diff --git a/app/src/common/AppFooter.tsx b/app/src/common/AppFooter.tsx
index d608ae6283..38454471f7 100644
--- a/app/src/common/AppFooter.tsx
+++ b/app/src/common/AppFooter.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import css from './AppFooter.module.scss';
 import {
     FlexRow, Text, Anchor, IconContainer,
-} from '@epam/promo';
+} from '@epam/uui';
 import { ReactComponent as EPAMIcon } from '../icons/EPAM.svg';
 
 const EPAM_LINK = 'https://www.epam.com';
@@ -15,7 +15,7 @@ export class AppFooter extends React.Component {
                     <Anchor rawProps={ { tabIndex: -1, 'aria-label': 'EPAM' } } href={ EPAM_LINK } target="_blank">
                         <IconContainer icon={ EPAMIcon } />
                     </Anchor>
-                    <Text color="gray60" font="sans" fontSize="14" lineHeight="24" cx={ css.copyright }>
+                    <Text color="secondary" fontSize="14" lineHeight="24" cx={ css.copyright }>
                         {`© ${new Date().getFullYear()} EPAM Systems. All Rights reserved`}
                     </Text>
                 </FlexRow>
diff --git a/app/src/common/AppHeader.module.scss b/app/src/common/AppHeader.module.scss
index 7b9f781772..bc494cbfa3 100644
--- a/app/src/common/AppHeader.module.scss
+++ b/app/src/common/AppHeader.module.scss
@@ -8,7 +8,7 @@
 
         .link-caption {
             padding-left: 6px;
-            color: #FFFFFF;
+            color: var(--uui-main_menu-text);
             white-space: nowrap;
         }
     }
@@ -21,8 +21,8 @@
         min-width: 320px;
     }
 
-    .git-icon {
-        fill: #FFFFFF;
+    .git-icon, .logo-icon {
+        fill: var(--uui-main_menu-text);
     }
 
     .theme-switcher-button:hover {
diff --git a/app/src/common/AppHeader.tsx b/app/src/common/AppHeader.tsx
index cd5674f55d..d361c323e2 100644
--- a/app/src/common/AppHeader.tsx
+++ b/app/src/common/AppHeader.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { BurgerButton, MainMenu, FlexSpacer, GlobalMenu, MainMenuButton, Text, IconContainer, Burger, DropdownMenuBody, Dropdown, DropdownMenuButton, Button } from '@epam/uui';
-import { Anchor, MainMenuLogo } from '@epam/uui-components';
-import { TSkin } from '@epam/uui-docs';
+import { Anchor, MainMenuCustomElement } from '@epam/uui-components';
 import { svc } from '../services';
 import { analyticsEvents } from '../analyticsEvents';
-import { ReactComponent as GitIcon } from '../icons/git-branch-18.svg';
 import { useTheme } from '../helpers/useTheme';
-import css from './AppHeader.module.scss';
+import { TMode } from './docs';
+import { ReactComponent as GitIcon } from '../icons/git-branch-18.svg';
+import { ReactComponent as LogoIcon } from '../icons/logo.svg';
 import { ReactComponent as DoneIcon } from '@epam/assets/icons/common/notification-done-18.svg';
+import css from './AppHeader.module.scss';
 
 export type Theme = 'uui-theme-promo' | 'uui-theme-loveship' | 'uui-theme-loveship_dark' | 'uui-theme-electric' | 'uui-theme-vanilla_thunder';
 const themeName: Record<Theme, 'Promo' | 'Loveship Light' | 'Loveship Dark' | 'Electric' | 'Vanilla Thunder'> = {
@@ -50,7 +51,7 @@ export function AppHeader() {
                     link={ {
                         pathname: '/documents',
                         query: {
-                            id: 'accordion', mode: 'doc', skin: TSkin.UUI, category: 'components',
+                            category: 'components', id: 'accordion', mode: TMode.doc,
                         },
                     } }
                     isLinkActive={ pathName === '/documents' && category === 'components' }
@@ -95,7 +96,13 @@ export function AppHeader() {
             {
                 id: 'logo',
                 priority: 100499,
-                render: () => <MainMenuLogo link={ { pathname: '/' } } onClick={ () => sendEvent('Welcome') } logoUrl="/static/logo.svg" key="logo" />,
+                render: () => (
+                    <MainMenuCustomElement key="logo">
+                        <Anchor link={ { pathname: '/' } } href={ GIT_LINK } target="_blank" onClick={ () => sendEvent('Welcome') } key="logo">
+                            <IconContainer icon={ LogoIcon } cx={ css.logoIcon } />
+                        </Anchor>
+                    </MainMenuCustomElement>
+                ),
             },
             {
                 id: 'documents',
@@ -134,7 +141,7 @@ export function AppHeader() {
                         link={ {
                             pathname: '/documents',
                             query: {
-                                id: 'accordion', mode: 'doc', skin: TSkin.UUI, category: 'components',
+                                category: 'components', id: 'accordion', mode: 'doc',
                             },
                         } }
                         isLinkActive={ pathName === '/documents' && category === 'components' }
diff --git a/app/src/common/Page.module.scss b/app/src/common/Page.module.scss
index 4beb89af36..0431a895d7 100644
--- a/app/src/common/Page.module.scss
+++ b/app/src/common/Page.module.scss
@@ -1,7 +1,8 @@
 @use '~@epam/promo/assets/styles/colors.scss' as *;
 
 .root {
-    background: $gray10;
+    background: var(--uui-app-bg);
+    color: var(--uui-text-primary);
     min-height: 100%;
     display: flex;
     flex-direction: column;
diff --git a/app/src/common/apiReference/TypeRefSection.module.scss b/app/src/common/apiReference/TypeRefSection.module.scss
index cdf580c5e0..9532c6f508 100644
--- a/app/src/common/apiReference/TypeRefSection.module.scss
+++ b/app/src/common/apiReference/TypeRefSection.module.scss
@@ -1,7 +1,4 @@
-@use '~@epam/assets/theme/theme_promo' as *;
-
 .root {
-    @include theme-promo();
     max-width: 100%;
     width: 960px;
 
diff --git a/app/src/common/apiReference/TypeRefTable.module.scss b/app/src/common/apiReference/TypeRefTable.module.scss
index f27118ad6d..1a92c296f8 100644
--- a/app/src/common/apiReference/TypeRefTable.module.scss
+++ b/app/src/common/apiReference/TypeRefTable.module.scss
@@ -3,4 +3,8 @@
     top: 0;
     isolation: isolate;
     z-index: 5;
+}
+
+.code-bg {
+    --code-bg: var(--uui-surface-main);
 }
\ No newline at end of file
diff --git a/app/src/common/apiReference/TypeRefTable.tsx b/app/src/common/apiReference/TypeRefTable.tsx
index 725ba0a99d..1d198e1fe6 100644
--- a/app/src/common/apiReference/TypeRefTable.tsx
+++ b/app/src/common/apiReference/TypeRefTable.tsx
@@ -136,7 +136,7 @@ function getColumns(summaries: TDocsGenTypeSummary): DataColumnProps<TApiRefProp
                     return null;
                 }
                 return (
-                    <Code codeAsHtml={ item.typeValue.html } isCompact={ true } />
+                    <Code cx={ css.codeBg } codeAsHtml={ item.typeValue.html } isCompact={ true } />
                 );
             },
             width: WIDTH.typeValue,
diff --git a/app/src/common/apiReference/components/CodeExpandable.module.scss b/app/src/common/apiReference/components/CodeExpandable.module.scss
index a370362d75..9da62d55b9 100644
--- a/app/src/common/apiReference/components/CodeExpandable.module.scss
+++ b/app/src/common/apiReference/components/CodeExpandable.module.scss
@@ -1,8 +1,7 @@
 .root {
-    background-color: #FFFFFF;
+    background-color: var(--uui-surface-main);
     display: flex;
     flex-direction: column;
-    border-top: 1px solid var(--uui-divider);
     flex-grow: 1;
     flex-shrink: 0;
     flex-basis: 0;
diff --git a/app/src/common/docs/BaseDocsBlock.module.scss b/app/src/common/docs/BaseDocsBlock.module.scss
index c871c5371c..9833eb4288 100644
--- a/app/src/common/docs/BaseDocsBlock.module.scss
+++ b/app/src/common/docs/BaseDocsBlock.module.scss
@@ -1,28 +1,7 @@
-@use '~@epam/assets/theme/theme_promo' as *;
-@use '~@epam/assets/theme/theme_loveship' as *;
-@use '~@epam/promo/assets/styles/index.scss' as *;
-
-:global {
-    .uui-theme-loveship_important.uui-theme-loveship_important.uui-theme-loveship_important.uui-theme-loveship_important {
-        @include theme-loveship();
-    }
-
-    .uui-theme-promo_important.uui-theme-promo_important.uui-theme-promo_important.uui-theme-promo_important {
-        @include theme-promo();
-    }
-}
-
-
 .secondary-navigation {
     box-sizing: border-box;
     min-height: 60px;
     background-color: var(--uui-surface-main);
-
-    &.uui-theme-promo {
-        :global {
-            @include theme-promo();
-        }
-    }
 }
 
 .container {
@@ -32,6 +11,9 @@
     min-width: 0;
     height: calc(100vh - 60px);
     overflow: hidden;
+    background-color: var(--uui-surface-main);
+    border-top: 1px solid var(--uui-divider);
+    box-sizing: border-box;
 }
 
 .content-container {
@@ -54,16 +36,7 @@
     margin: auto;
 }
 
-.api-block {
-    &.uui-theme-promo {
-        :global {
-            @include theme-promo();
-        }
-    }
-}
-
-.theme-promo {
-    :global {
-        @include theme-promo();
-    }
+.info-icon {
+    padding-left: 9px;
+    fill: var(--uui-icon);
 }
diff --git a/app/src/common/docs/BaseDocsBlock.tsx b/app/src/common/docs/BaseDocsBlock.tsx
index 08f32d40ea..ab4cf5106f 100644
--- a/app/src/common/docs/BaseDocsBlock.tsx
+++ b/app/src/common/docs/BaseDocsBlock.tsx
@@ -1,32 +1,35 @@
 import * as React from 'react';
+import cx from 'classnames';
+import { TDocConfig, TSkin } from '@epam/uui-docs';
 import { UuiContext, UuiContexts } from '@epam/uui-core';
-import { FlexRow, FlexSpacer, MultiSwitch, RichTextView, ScrollBars, TabButton } from '@epam/promo';
+import { Checkbox, FlexRow, FlexSpacer, RichTextView, ScrollBars, TabButton, Tooltip, IconContainer } from '@epam/uui';
 import { svc } from '../../services';
 import { getQuery } from '../../helpers';
 import { analyticsEvents } from '../../analyticsEvents';
 import { TypeRefSection } from '../apiReference/TypeRefSection';
 import { ComponentEditorWrapper } from './componentEditor/ComponentEditor';
-import cx from 'classnames';
+import { ReactComponent as InfoIcon } from '@epam/assets/icons/common/notification-help-fill-18.svg';
 import css from './BaseDocsBlock.module.scss';
-import { TDocConfig, TSkin } from '@epam/uui-docs';
 
-enum TMode {
+export enum TMode {
     doc = 'doc',
     propsEditor = 'propsEditor'
 }
 
-const DEFAULT_SKIN = TSkin.UUI;
-const DEFAULT_MODE = TMode.doc;
+export enum TTheme {
+    electric = 'electric',
+    loveship = 'loveship',
+    loveship_dark = 'loveship_dark',
+    promo = 'promo',
+    vanilla_thunder = 'vanilla_thunder'
+}
 
-const themeName: Record<TSkin, string> = {
-    [TSkin.UUI4_promo]: 'uui-theme-promo_important',
-    [TSkin.UUI3_loveship]: 'uui-theme-loveship_important',
-    [TSkin.UUI]: '',
-};
+export type TUUITheme = `uui-theme-${TTheme}`;
 
-const items: { id: TSkin; caption: string }[] = [
-    { caption: 'UUI [Themeable]', id: TSkin.UUI }, { caption: 'UUI3 [Loveship]', id: TSkin.UUI3_loveship }, { caption: 'UUI4 [Promo]', id: TSkin.UUI4_promo },
-];
+const DEFAULT_MODE = TMode.doc;
+const DEFAULT_THEME: TUUITheme = 'uui-theme-loveship';
+
+const CONTROL_DESCRIPTION = 'If checked, a component from the skin-specific package will be used, according to the selected theme (for example, "@epam/loveship"). If unchecked, it will use a component from the "@epam/uui" package, only with semantic props.';
 
 interface BaseDocsBlockState {}
 
@@ -41,14 +44,22 @@ export abstract class BaseDocsBlock extends React.Component<any, BaseDocsBlockSt
         svc.uuiAnalytics.sendEvent(analyticsEvents.document.pv(id, category));
     }
 
-    private getSkin(): TSkin {
-        return getQuery('skin') || DEFAULT_SKIN;
+    private isSkin(): boolean {
+        return getQuery('isSkin') ?? JSON.parse(localStorage.getItem('app-theme-context'))?.isSkin ?? true;
     }
 
     private getMode(): TMode {
         return getQuery('mode') || DEFAULT_MODE;
     }
 
+    private getTheme(): TUUITheme {
+        return getQuery('theme') ?? (localStorage.getItem('app-theme') as TUUITheme) ?? DEFAULT_THEME;
+    }
+
+    private hasSkin(): boolean {
+        return ['electric', 'loveship', 'loveship_dark', 'promo'].includes(this.getTheme().split('-').pop());
+    }
+
     abstract title: string;
     abstract renderContent(): React.ReactNode;
 
@@ -89,13 +100,16 @@ export abstract class BaseDocsBlock extends React.Component<any, BaseDocsBlockSt
     };
 
     protected renderSkinSwitcher() {
+        if (this.getMode() !== TMode.propsEditor || !this.hasSkin()) return;
+
         return (
-            <MultiSwitch<TSkin>
-                size="36"
-                items={ items }
-                value={ this.getSkin() }
-                onValueChange={ (newValue: TSkin) => this.handleChangeSkin(newValue) }
-            />
+            <>
+                <FlexSpacer />
+                <Checkbox label="Show theme specific props" value={ this.isSkin() } onValueChange={ this.handleChangeSkin } />
+                <Tooltip content={ CONTROL_DESCRIPTION } color="inverted">
+                    <IconContainer icon={ InfoIcon } cx={ css.infoIcon } />
+                </Tooltip>
+            </>
         );
     }
 
@@ -104,7 +118,7 @@ export abstract class BaseDocsBlock extends React.Component<any, BaseDocsBlockSt
             <FlexRow
                 rawProps={ { role: 'tablist' } }
                 padding="12"
-                cx={ [css.uuiThemePromo, css.secondaryNavigation] }
+                cx={ [css.secondaryNavigation] }
                 borderBottom
             >
                 <TabButton
@@ -119,8 +133,7 @@ export abstract class BaseDocsBlock extends React.Component<any, BaseDocsBlockSt
                     isLinkActive={ this.getMode() === TMode.propsEditor }
                     onClick={ () => this.handleChangeMode(TMode.propsEditor) }
                 />
-                <FlexSpacer />
-                {this.getMode() === TMode.propsEditor && this.renderSkinSwitcher()}
+                {this.renderSkinSwitcher()}
             </FlexRow>
         );
     }
@@ -130,20 +143,23 @@ export abstract class BaseDocsBlock extends React.Component<any, BaseDocsBlockSt
     };
 
     private renderPropsEditor() {
-        const skin = this.getSkin();
+        const isSkin = this.isSkin();
+        const theme = this.getTheme();
+
         return (
             <ComponentEditorWrapper
                 onRedirectBackToDocs={ () => this.handleChangeMode(TMode.doc) }
                 config={ this.config }
                 title={ this.title }
-                skin={ skin }
+                isSkin={ isSkin }
+                theme={ theme }
             />
         );
     }
 
     protected renderSectionTitle(title: string) {
         return (
-            <RichTextView cx={ css.themePromo }>
+            <RichTextView>
                 <h2>{title}</h2>
             </RichTextView>
         );
@@ -151,7 +167,7 @@ export abstract class BaseDocsBlock extends React.Component<any, BaseDocsBlockSt
 
     protected renderDocTitle() {
         return (
-            <RichTextView cx={ css.themePromo }>
+            <RichTextView>
                 <h1>{this.title}</h1>
             </RichTextView>
         );
@@ -169,31 +185,21 @@ export abstract class BaseDocsBlock extends React.Component<any, BaseDocsBlockSt
         );
     }
 
-    handlePortalTheme(prop: 'clear' | TSkin) {
-        // TODO: remove this when all our site will use one 'theme-color-picker' with PropertyExplorer
-        const portalId = this.context.uuiLayout.getPortalRootId();
-        const rootPortal = document.getElementById(portalId);
+    private handleChangeSkin = () => {
+        const isSkin = this.isSkin();
 
-        if (prop === 'clear') {
-            rootPortal.className = '';
-        } else {
-            rootPortal.className = themeName[prop];
-        }
-    }
-
-    private handleChangeSkin(skin: TSkin) {
-        this.handlePortalTheme(skin);
-        this.handleNav({ skin });
-    }
+        localStorage.setItem('app-theme-context', JSON.stringify({ isSkin: !isSkin }));
+        this.handleNav({ isSkin: !isSkin });
+    };
 
     private handleChangeMode(mode: TMode) {
-        this.handlePortalTheme('clear');
-        this.handleNav({ mode, skin: DEFAULT_SKIN });
+        this.handleNav({ mode });
     }
 
-    private handleNav = (params: { mode?: TMode, skin?: TSkin }) => {
+    private handleNav = (params: { mode?: TMode, isSkin?: boolean, theme?: TUUITheme }) => {
         const mode: TMode = params.mode ? params.mode : this.getMode();
-        const skin: TSkin = params.skin ? params.skin : this.getSkin();
+        const isSkin: boolean = params.isSkin ?? this.isSkin();
+        const theme: TUUITheme = params.theme ? params.theme : this.getTheme();
 
         svc.uuiRouter.redirect({
             pathname: '/documents',
@@ -201,7 +207,8 @@ export abstract class BaseDocsBlock extends React.Component<any, BaseDocsBlockSt
                 category: 'components',
                 id: getQuery('id'),
                 mode,
-                skin,
+                isSkin: isSkin,
+                theme,
             },
         });
     };
diff --git a/app/src/common/docs/Code.module.scss b/app/src/common/docs/Code.module.scss
index 6ca04a223d..9ca2ce149f 100644
--- a/app/src/common/docs/Code.module.scss
+++ b/app/src/common/docs/Code.module.scss
@@ -1,15 +1,15 @@
 @use '~@epam/promo/assets/styles/index' as *;
 
 .code {
+    --code-bg: var(--uui-surface-sunken);
     font-size: 14px;
     line-height: 18px;
     padding: 24px;
     margin: 0;
-    border-top: 1px solid $gray40;
-    background-color: white;
+    background-color: var(--code-bg);
     font-family: monospace;
     white-space: pre-wrap;
-    word-wrap: normal;
+    word-wrap: break-word;
     overflow: auto;
 
     &.compact {
@@ -18,21 +18,35 @@
     }
 
     /* Highly opinionated - make comments stand out and more readable // YakovZh */
-    :global(.token):global(.comment) {
-        color: $gray60;
-        font-family: $font-sans;
-        font-size: 14px;
-        position: relative;
+    :global {
+        .token {
+            &.comment {
+                color: var(--uui-text-secondary);
+                font-family: var(--uui-font);
+                font-size: 14px;
+                position: relative;
 
-        &::before {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            height: 18px;
-            width: 12px;
-            background: white;
-            opacity: 0.7;
+                &::before {
+                    content: '';
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    height: 18px;
+                    width: 12px;
+                    background: var(--code-bg);
+                    opacity: 0.7;
+                }
+            }
+
+            &.operator {
+                color: var(--uui-warning-70);
+                background: var(--code-bg);
+            }
+
+            &.punctuation {
+                color: var(--uui-text-tertiary);
+            }
         }
     }
+
 }
diff --git a/app/src/common/docs/Code.tsx b/app/src/common/docs/Code.tsx
index bd383e28a8..83b8212643 100644
--- a/app/src/common/docs/Code.tsx
+++ b/app/src/common/docs/Code.tsx
@@ -1,14 +1,14 @@
-import css from './Code.module.scss';
 import React from 'react';
+import { IHasCX } from '@epam/uui-core';
+import cx from 'classnames';
+import css from './Code.module.scss';
 
-type TCode = {
+type TCode = IHasCX & {
     codeAsHtml: string;
     isCompact?: boolean;
 };
 export function Code(props: TCode) {
-    const className = [css.code];
-    if (props.isCompact) {
-        className.push(css.compact);
-    }
-    return <pre className={ className.join(' ') } dangerouslySetInnerHTML={ { __html: props.codeAsHtml } } />;
+    const classNames = cx(css.code, props.isCompact && css.compact, props.cx);
+
+    return <pre className={ classNames } dangerouslySetInnerHTML={ { __html: props.codeAsHtml } } />;
 }
diff --git a/app/src/common/docs/DocExample.module.scss b/app/src/common/docs/DocExample.module.scss
index d948d74b53..4d3799f696 100644
--- a/app/src/common/docs/DocExample.module.scss
+++ b/app/src/common/docs/DocExample.module.scss
@@ -1,4 +1,3 @@
-@use '~@epam/assets/theme/theme_promo' as *;
 @use '~@epam/promo/assets/styles/index' as *;
 @import '../../themes/themeVariables.module';
 
@@ -9,18 +8,12 @@
 
 .container-footer {
     justify-content: space-between;
-    background-color: $white;
-
-    &.uui-theme-promo {
-        :global {
-            @include theme-promo();
-        }
-    }
+    background-color: var(--uui-surface-sunken);
 }
 
 .preview-container {
-    background: var(--uui-docs-bg, var(--uui-surface-main));
-    border: 1px solid $gray40;
+    background: var(--uui-surface-sunken);
+    border: 1px solid var(--uui-divider);
     width: 960px;
     max-width: 100%;
 
diff --git a/app/src/common/docs/DocExample.tsx b/app/src/common/docs/DocExample.tsx
index 294da79457..38af27e22a 100644
--- a/app/src/common/docs/DocExample.tsx
+++ b/app/src/common/docs/DocExample.tsx
@@ -78,7 +78,7 @@ export class DocExample extends React.Component<DocExampleProps, DocExampleState
                 <FlexRow size={ null } vPadding="48" padding="24" borderBottom alignItems="top" spacing="12">
                     {this.state.component && React.createElement(this.state.component)}
                 </FlexRow>
-                <FlexRow padding="12" vPadding="12" cx={ [css.containerFooter, css.uuiThemePromo] }>
+                <FlexRow padding="12" vPadding="12" cx={ [css.containerFooter] }>
                     <Switch value={ this.state.showCode } onValueChange={ this.onSwitchValueChange } label="View code" />
                     <CodesandboxLink raw={ raw } dirPath={ dirPath } />
                 </FlexRow>
diff --git a/app/src/common/docs/EditableDocContent.module.scss b/app/src/common/docs/EditableDocContent.module.scss
index fb4944b703..c6da09ef78 100644
--- a/app/src/common/docs/EditableDocContent.module.scss
+++ b/app/src/common/docs/EditableDocContent.module.scss
@@ -5,9 +5,9 @@
     position: relative;
 
     .container {
-        @include theme-promo();
         margin: 0 -24px;
         width: 986px;
+        color: var(--uui-text-primary);
     }
 }
 
@@ -16,8 +16,9 @@
     margin-top: 24px;
 
     .title {
-        font-family: $font-museo-sans;
-        color: $gray80;
+        font-family: var(--uui-font);
+        font-weight: 600;
+        color: var(--uui-text-primary);
         font-size: 24px;
         margin-bottom: 6px;
     }
@@ -32,7 +33,7 @@
 
     &:hover {
         .anchor {
-            fill: $blue;
+            fill: var(--uui-link);
         }
     }
 }
diff --git a/app/src/common/docs/EditableDocContent.tsx b/app/src/common/docs/EditableDocContent.tsx
index 787c5e70ba..ec641cd354 100644
--- a/app/src/common/docs/EditableDocContent.tsx
+++ b/app/src/common/docs/EditableDocContent.tsx
@@ -86,7 +86,7 @@ export class EditableDocContent extends React.Component<EditableDocContentProps,
         return (
             <div className={ css.wrapper }>
                 {this.props.title && (
-                    <FlexRow cx={ css.titleRow }>
+                    <FlexRow spacing="6" cx={ css.titleRow }>
                         <div id={ this.props.title.split(' ').join('_').toLowerCase() } className={ css.title } ref={ this.titleRef }>
                             {this.props.title}
                         </div>
diff --git a/app/src/common/docs/componentEditor/ComponentEditor.tsx b/app/src/common/docs/componentEditor/ComponentEditor.tsx
index 4cc1083de5..58122d4eec 100644
--- a/app/src/common/docs/componentEditor/ComponentEditor.tsx
+++ b/app/src/common/docs/componentEditor/ComponentEditor.tsx
@@ -3,24 +3,28 @@ import { IHasCX } from '@epam/uui-core';
 import { IComponentDocs, PropDoc, PropExample, TDocConfig, TSkin, TDocsGenExportedType } from '@epam/uui-docs';
 import { ComponentEditorView } from './view/ComponentEditorView';
 import { useDocBuilderGen } from '../docBuilderGen/hooks/useDocBuilderGen';
-import { getExamplesList, getInputValuesFromInputData, getTheme, isPropValueEmpty } from './utils';
+import { getExamplesList, getInputValuesFromInputData, getSkin, isPropValueEmpty } from './utils';
 import { PropSamplesCreationContext } from './view/PropSamplesCreationContext';
+import { TUUITheme } from '../BaseDocsBlock';
 
 export function ComponentEditorWrapper(props: {
+    theme: TUUITheme,
     title: string;
-    skin: TSkin;
+    isSkin: boolean;
     config: TDocConfig;
     onRedirectBackToDocs: () => void;
 }) {
     const {
+        theme,
         title,
-        skin,
+        isSkin,
         config,
         onRedirectBackToDocs,
     } = props;
+    const skin = getSkin(theme, isSkin);
     const { isLoaded, docs, generatedFromType } = useDocBuilderGen({
         config,
-        skin,
+        skin: skin,
     });
 
     React.useEffect(() => {
@@ -262,9 +266,8 @@ export class ComponentEditor extends React.Component<ComponentEditorProps, Compo
     });
 
     render() {
-        const { title, skin, docs, isLoaded, onRedirectBackToDocs, generatedFromType } = this.props;
+        const { title, docs, isLoaded, onRedirectBackToDocs, generatedFromType } = this.props;
         const { showCode, inputData, selectedContext, isInited, componentKey } = this.state;
-        const currentTheme = getTheme(skin);
         const { component: DemoComponent, name: tagName, contexts, props } = docs || {};
         const selectedCtxName = selectedContext || (contexts?.length > 0 ? contexts[0].name : undefined);
         const isDocUnsupportedForSkin = isLoaded && !docs;
@@ -272,7 +275,6 @@ export class ComponentEditor extends React.Component<ComponentEditorProps, Compo
         return (
             <ComponentEditorView
                 contexts={ contexts }
-                currentTheme={ currentTheme }
                 componentKey={ componentKey }
                 DemoComponent={ DemoComponent }
                 generatedFromType={ generatedFromType }
diff --git a/app/src/common/docs/componentEditor/utils.ts b/app/src/common/docs/componentEditor/utils.ts
index f438c62cbf..0c51a787cb 100644
--- a/app/src/common/docs/componentEditor/utils.ts
+++ b/app/src/common/docs/componentEditor/utils.ts
@@ -1,4 +1,5 @@
 import { IPropSamplesCreationContext, PropDoc, PropExampleObject, TSkin } from '@epam/uui-docs';
+import { TTheme, TUUITheme } from '../BaseDocsBlock';
 
 export function isPropValueEmpty(propValue: any): boolean {
     return propValue === undefined;
@@ -13,16 +14,19 @@ export function getExamplesList(examples: PropDoc<any, any>['examples'], ctx: IP
     return [];
 }
 
-export function getTheme(skin: TSkin) {
-    switch (skin) {
-        case TSkin.UUI:
-            return '';
-        case TSkin.UUI4_promo:
-            return 'uui-theme-promo';
-        case TSkin.UUI3_loveship:
-            return 'uui-theme-loveship';
+export function getSkin(theme: TUUITheme, isSkin: boolean): TSkin {
+    if (!isSkin) return TSkin.UUI;
+
+    switch (theme) {
+        case `uui-theme-${TTheme.electric}`:
+            return TSkin.Electric;
+        case `uui-theme-${TTheme.loveship}`:
+        case `uui-theme-${TTheme.loveship_dark}`:
+            return TSkin.Loveship;
+        case `uui-theme-${TTheme.promo}`:
+            return TSkin.Promo;
         default:
-            return '';
+            return TSkin.UUI;
     }
 }
 
diff --git a/app/src/common/docs/componentEditor/view/ComponentEditorView.module.scss b/app/src/common/docs/componentEditor/view/ComponentEditorView.module.scss
index 0ae445f0d4..ab49c1e387 100644
--- a/app/src/common/docs/componentEditor/view/ComponentEditorView.module.scss
+++ b/app/src/common/docs/componentEditor/view/ComponentEditorView.module.scss
@@ -1,30 +1,19 @@
-@use '~@epam/assets/theme/theme_promo' as *;
-@use '~@epam/assets/theme/theme_loveship' as *;
-@use '~@epam/promo/assets/styles/index' as *;
-
-
 .root {
     display: flex;
     flex: 1 1 auto;
 }
 
 .container {
-    background-color: #FFFFFF;
+    background-color: var(--uui-surface-main);
     display: flex;
     flex-direction: column;
     min-width: 480px;
     max-width: 726px;
-    border-right: 1px solid $gray40;
+    border-right: 1px solid var(--uui-divider);
     flex-grow: 1;
     flex-shrink: 0;
     flex-basis: 0;
 
-    &.uui-theme-promo {
-        :global {
-            @include theme-promo();
-        }
-    }
-
     .box-sizing {
         box-sizing: border-box;
     }
@@ -36,7 +25,7 @@
 
     .row-props {
         overflow: auto;
-        border-bottom: 1px solid $gray40;
+        border-bottom: 1px solid var(--uui-divider);
         flex-grow: 1;
         flex-shrink: 0;
         flex-basis: 0;
@@ -64,12 +53,6 @@
         justify-content: center;
         box-sizing: border-box;
         width: 100%;
-
-        &.uui-theme-promo {
-            :global {
-                @include theme-promo();
-            }
-        }
     }
 }
 
@@ -80,18 +63,6 @@
     flex-basis: 0;
     width: 100%;
     background-color: var(--uui-surface-main);
-
-    &.uui-theme-promo {
-        :global {
-            @include theme-promo();
-        }
-    }
-
-    &.uui-theme-loveship {
-        :global {
-            @include theme-loveship();
-        }
-    }
 }
 
 .not-support {
@@ -108,9 +79,3 @@
         }
     }
 }
-
-.theme-promo {
-    :global {
-        @include theme-promo();
-    }
-}
diff --git a/app/src/common/docs/componentEditor/view/ComponentEditorView.tsx b/app/src/common/docs/componentEditor/view/ComponentEditorView.tsx
index f01961c9bb..ec992d748f 100644
--- a/app/src/common/docs/componentEditor/view/ComponentEditorView.tsx
+++ b/app/src/common/docs/componentEditor/view/ComponentEditorView.tsx
@@ -1,24 +1,17 @@
 import * as React from 'react';
 import {
-    FlexCell,
-    FlexSpacer,
-    IconButton,
-    Spinner,
-    FlexRow, LinkButton, MultiSwitch, ScrollBars, Text, Tooltip,
+    FlexCell, FlexSpacer, IconButton, Spinner, FlexRow, LinkButton, MultiSwitch, ScrollBars, Text, Tooltip,
 } from '@epam/uui';
-import { cx } from '@epam/uui-core';
 import { PropDoc, IPropSamplesCreationContext, DemoContext, TDocsGenExportedType } from '@epam/uui-docs';
 import { PropEditorRow } from './PropEditorRow';
-//
-import { ReactComponent as ResetIcon } from '../../../../icons/reset-icon.svg';
-import css from './ComponentEditorView.module.scss';
 import { DemoCode } from './DemoCode';
 import { DemoErrorBoundary } from './DemoErrorBoundary';
 import { getInputValuesFromInputData } from '../utils';
+import { ReactComponent as ResetIcon } from '../../../../icons/reset-icon.svg';
+import css from './ComponentEditorView.module.scss';
 
 interface IComponentEditorViewProps {
     contexts: DemoContext[],
-    currentTheme: string;
     componentKey?: string;
     DemoComponent: React.ComponentType<any>;
     generatedFromType?: TDocsGenExportedType;
@@ -89,7 +82,7 @@ export function ComponentEditorView(props: IComponentEditorViewProps) {
 
     return (
         <div className={ css.root }>
-            <div className={ cx(css.container, css.uuiThemePromo) }>
+            <div className={ css.container }>
                 <Toolbar title={ props.title } onReset={ props.onReset } generatedFromType={ props.generatedFromType } />
                 <Header />
                 <div className={ css.rowProps }>
@@ -106,7 +99,7 @@ export function ComponentEditorView(props: IComponentEditorViewProps) {
             </div>
             <div className={ css.demoContext }>
                 <ContextSwitcher contexts={ props.contexts } selectedCtxName={ props.selectedCtxName } onChangeSelectedCtx={ props.onChangeSelectedCtx } />
-                <div className={ cx(css.demoContainer, css[props.currentTheme]) }>
+                <div className={ css.demoContainer }>
                     <ScrollBars>
                         <DemoErrorBoundary>
                             <SelectedDemoContext DemoComponent={ props.DemoComponent } props={ inputValues } />
@@ -127,9 +120,9 @@ const ContextSwitcher = React.memo(
                 size="36"
                 padding="12"
                 spacing="6"
-                background="surface"
+                background="surface-main"
                 borderBottom
-                cx={ cx(css.contextSettingRow, css.uuiThemePromo) }
+                cx={ css.contextSettingRow }
             >
                 <MultiSwitch
                     key="multi-switch"
@@ -165,7 +158,7 @@ const Toolbar = React.memo(
 );
 const Header = React.memo(function HeaderComponent() {
     return (
-        <FlexRow key="table-head" size="36" padding="12" spacing="6" borderBottom cx={ css.boxSizing } background="surface">
+        <FlexRow key="table-head" size="36" padding="12" spacing="6" borderBottom cx={ css.boxSizing } background="surface-main">
             <FlexCell key="name" width={ 130 }>
                 <Text size="24" fontWeight="600">
                     NAME
@@ -187,7 +180,7 @@ const Header = React.memo(function HeaderComponent() {
 
 function NotSupportedForSkin(props: { onRedirectBackToDocs: () => void }) {
     return (
-        <div className={ cx(css.notSupport, css.themePromo) }>
+        <div className={ css.notSupport }>
             <Text fontSize="16" lineHeight="24">
                 This component does not support property explorer
             </Text>
diff --git a/app/src/common/docs/componentEditor/view/DemoCode.module.scss b/app/src/common/docs/componentEditor/view/DemoCode.module.scss
index 56e15d4b1e..aca6b56c2e 100644
--- a/app/src/common/docs/componentEditor/view/DemoCode.module.scss
+++ b/app/src/common/docs/componentEditor/view/DemoCode.module.scss
@@ -2,7 +2,7 @@
     font-family: monospace;
     font-size: 14px;
     line-height: 24px;
-    color: var(--night700);
+    color: var(--uui-text-primary);
     padding: 12px 24px;
     white-space: pre-wrap;
     overflow: hidden;
diff --git a/app/src/common/docs/componentEditor/view/PropSamplesCreationContext.tsx b/app/src/common/docs/componentEditor/view/PropSamplesCreationContext.tsx
index 58276554a1..89db2fe6d1 100644
--- a/app/src/common/docs/componentEditor/view/PropSamplesCreationContext.tsx
+++ b/app/src/common/docs/componentEditor/view/PropSamplesCreationContext.tsx
@@ -18,7 +18,7 @@ export class PropSamplesCreationContext implements IPropSamplesCreationContext<a
             svc.uuiNotifications
                 .show(
                     () => (
-                        <Panel shadow={ true } background="surface">
+                        <Panel shadow={ true } background="surface-main">
                             <FlexRow padding="24" vPadding="12" borderBottom={ true }>
                                 <pre>
                                     {name}
diff --git a/app/src/common/docs/docBuilderGen/propDetailsBuilders/shared/reusableDocs.tsx b/app/src/common/docs/docBuilderGen/propDetailsBuilders/shared/reusableDocs.tsx
index 6a3fb4e027..3ec17bb998 100644
--- a/app/src/common/docs/docBuilderGen/propDetailsBuilders/shared/reusableDocs.tsx
+++ b/app/src/common/docs/docBuilderGen/propDetailsBuilders/shared/reusableDocs.tsx
@@ -1,4 +1,5 @@
 import * as uuiDocs from '../../../../../docs/_props/uui/docs';
+import * as electricDocs from '../../../../../docs/_props/epam-electric/docs';
 import * as loveshipDocs from '../../../../../docs/_props/loveship/docs';
 import * as promoDocs from '../../../../../docs/_props/epam-promo/docs';
 import { TSkin } from '@epam/uui-docs';
@@ -6,8 +7,9 @@ import { TSkin } from '@epam/uui-docs';
 const DOCS_SKIN_SPECIFIC = {
     colorDoc: {
         [TSkin.UUI]: uuiDocs.colorDoc,
-        [TSkin.UUI3_loveship]: loveshipDocs.colorDoc,
-        [TSkin.UUI4_promo]: promoDocs.colorDoc,
+        [TSkin.Electric]: electricDocs.colorDoc,
+        [TSkin.Loveship]: loveshipDocs.colorDoc,
+        [TSkin.Promo]: promoDocs.colorDoc,
     },
 };
 const DOCS_SKIN_AGNOSTIC = {
diff --git a/app/src/common/sidebar/Sidebar.module.scss b/app/src/common/sidebar/Sidebar.module.scss
index ae98073685..63a49184ff 100644
--- a/app/src/common/sidebar/Sidebar.module.scss
+++ b/app/src/common/sidebar/Sidebar.module.scss
@@ -4,19 +4,13 @@
 
 .root {
     width: 240px;
-    background-color: #FFFFFF;
+    background-color: var(--uui-surface-sunken);
     display: flex;
     flex-direction: column;
 
-    &.uui-theme-promo {
-        :global {
-            @include theme-promo();
-        }
-    }
-
     .tree {
         overflow: auto;
-        border: 1px solid $gray40;
+        border: 1px solid var(--uui-divider);
         border-top: 0;
         border-bottom: 0;
         flex-grow: 1;
@@ -26,5 +20,6 @@
 }
 
 .search {
+    --uui-text_input-border-radius: 0;
     padding: 0 12px;
 }
diff --git a/app/src/common/sidebar/Sidebar.tsx b/app/src/common/sidebar/Sidebar.tsx
index b39909e5ae..369c8298c2 100644
--- a/app/src/common/sidebar/Sidebar.tsx
+++ b/app/src/common/sidebar/Sidebar.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import cx from 'classnames';
 import css from './Sidebar.module.scss';
 import { ScrollBars, SearchInput } from '@epam/promo';
 import { Tree, TreeListItem } from '@epam/uui-components';
@@ -51,7 +50,7 @@ export function Sidebar<TItem extends TreeListItem>(props: SidebarProps<TItem>)
     }, [uuiAnalytics]);
 
     return (
-        <aside className={ cx(css.root, css.uuiThemePromo) }>
+        <aside className={ css.root }>
             <SearchInput
                 cx={ css.search }
                 value={ value.search }
diff --git a/app/src/common/slider/Slide.tsx b/app/src/common/slider/Slide.tsx
index df3e8e7bf0..a66e13177c 100644
--- a/app/src/common/slider/Slide.tsx
+++ b/app/src/common/slider/Slide.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import css from './Slide.module.scss';
-import { Text } from '@epam/promo';
+import { Text } from '@epam/uui';
 
 export interface SlideProps {
     image: string;
@@ -20,18 +20,18 @@ export class Slide extends React.Component<SlideProps> {
             <div className={ css.slide }>
                 <div className={ css.card }>
                     <img alt={ this.props.name } src={ this.props.image } width="180" height="180" />
-                    <Text font="sans-semibold" lineHeight="24" fontSize="16" size="none">
+                    <Text fontWeight="600" lineHeight="24" fontSize="16" size="none">
                         {this.props.name}
                     </Text>
-                    <Text font="sans" lineHeight="24" fontSize="16" size="none">
+                    <Text lineHeight="24" fontSize="16" size="none">
                         {this.props.position}
                     </Text>
                 </div>
-                <Text font="sans" fontSize="24" cx={ css.testimonialText }>
+                <Text fontSize="24" cx={ css.testimonialText }>
                     {this.props.feedback}
                 </Text>
                 {this.props.quote && (
-                    <Text font="museo-slab" cx={ css.quoteText }>
+                    <Text cx={ css.quoteText }>
                         {this.props.quote}
                     </Text>
                 )}
diff --git a/app/src/common/slider/Slider.tsx b/app/src/common/slider/Slider.tsx
index 26800edc28..24595e6b25 100644
--- a/app/src/common/slider/Slider.tsx
+++ b/app/src/common/slider/Slider.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import css from './Slider.module.scss';
 import { Slide, SlideProps } from './Slide';
-import { IconButton } from '@epam/promo';
+import { IconButton } from '@epam/uui';
 import { IAnalyticableOnChange, UuiContext, UuiContexts } from '@epam/uui-core';
 import { ReactComponent as ArrowPrev } from '../../icons/navigation-left.svg';
 import { ReactComponent as ArrowNext } from '../../icons/navigation-right.svg';
@@ -43,14 +43,14 @@ export class Slider extends React.Component<SliderProps> {
                 <div className={ css.controls }>
                     <IconButton
                         rawProps={ { 'aria-label': 'Backward' } }
-                        color="blue"
+                        color="info"
                         isDisabled={ this.state.activeSlide === 0 }
                         icon={ ArrowPrev }
                         onClick={ this.handlePreviousClick }
                     />
                     <IconButton
                         rawProps={ { 'aria-label': 'Forward' } }
-                        color="blue"
+                        color="info"
                         isDisabled={ this.state.activeSlide === this.props.slides.length - 1 }
                         icon={ ArrowNext }
                         onClick={ this.handleNextClick }
diff --git a/app/src/demo/DemoPage.module.scss b/app/src/demo/DemoPage.module.scss
index 5f5d6da48e..333e849b30 100644
--- a/app/src/demo/DemoPage.module.scss
+++ b/app/src/demo/DemoPage.module.scss
@@ -13,6 +13,7 @@
 
         .nav-title {
             font-family: var(--uui-font);
+            font-weight: 600;
             color: var(--uui-text-primary);
             margin: 30px 0 5px;
             font-size: 36px;
diff --git a/app/src/demo/dnd/DemoDnd.tsx b/app/src/demo/dnd/DemoDnd.tsx
index ea05498b6f..11418901d2 100644
--- a/app/src/demo/dnd/DemoDnd.tsx
+++ b/app/src/demo/dnd/DemoDnd.tsx
@@ -62,7 +62,7 @@ export class DemoDnd extends React.Component<{}, DemoDndState> {
             <FlexRow cx={ css.root } alignItems="stretch">
                 {isDesktop && (
                     <>
-                        <Panel background="surface" shadow>
+                        <Panel background="surface-main" shadow>
                             <FlexCell minWidth={ 282 }>
                                 <FlexRow padding="18" borderBottom>
                                     <Text size="48" fontWeight="600">
diff --git a/app/src/demo/dnd/DndCriterion.tsx b/app/src/demo/dnd/DndCriterion.tsx
index 6cc299ab64..b2b06e0f21 100644
--- a/app/src/demo/dnd/DndCriterion.tsx
+++ b/app/src/demo/dnd/DndCriterion.tsx
@@ -63,7 +63,7 @@ export class DndCriterion extends React.Component<DndCriterionProps> {
                                         onPointerDown: props.eventHandlers.onPointerDown,
                                     } }
                                 />
-                                <FlexRow background="surface" vPadding="12" padding="18" cx={ css.row }>
+                                <FlexRow background="surface-main" vPadding="12" padding="18" cx={ css.row }>
                                     <Checkbox
                                         value={ item.isChecked }
                                         onValueChange={ (newValue) => this.props.onValueChange({ ...item, isChecked: newValue }) }
diff --git a/app/src/demo/dnd/DndMaterial.tsx b/app/src/demo/dnd/DndMaterial.tsx
index bc3c46a758..a59b793493 100644
--- a/app/src/demo/dnd/DndMaterial.tsx
+++ b/app/src/demo/dnd/DndMaterial.tsx
@@ -56,7 +56,7 @@ export class DndMaterial extends React.Component<DndMaterialProps> {
                 onDrop={ this.handleOnDrop }
                 render={ (props) => (
                     <div { ...props.eventHandlers } ref={ props.ref } className={ cx(css.dragElement, props.classNames) }>
-                        <Panel background="surface" cx={ cx(css.dndItem, props.isDragGhost && uuiDndState.dragGhost) }>
+                        <Panel background="surface-main" cx={ cx(css.dndItem, props.isDragGhost && uuiDndState.dragGhost) }>
                             <FlexRow cx={ css.materialRow }>
                                 <FlexCell width="auto" shrink={ 0 } cx={ css.iconWrapper }>
                                     <DragHandle cx={ [css.dragHandle] } />
diff --git a/app/src/demo/dnd/DndModule.module.scss b/app/src/demo/dnd/DndModule.module.scss
index e3e62d5729..e105c84373 100644
--- a/app/src/demo/dnd/DndModule.module.scss
+++ b/app/src/demo/dnd/DndModule.module.scss
@@ -23,6 +23,10 @@
         background-color: var(--uui-surface-main);
     }
 
+    .item {
+        background-color: var(--uui-surface-main);
+    }
+
     .module-icon {
         width: 36px;
         height: 36px;
diff --git a/app/src/demo/dnd/DndSection.tsx b/app/src/demo/dnd/DndSection.tsx
index a49d800917..11a8d0dc43 100644
--- a/app/src/demo/dnd/DndSection.tsx
+++ b/app/src/demo/dnd/DndSection.tsx
@@ -77,7 +77,7 @@ export class DndSection extends React.Component<DndSectionProps> {
                         onPointerUp={ props.eventHandlers.onPointerUp }
                         className={ cx(css.dragElement, props.classNames) }
                     >
-                        <Panel background="surface" cx={ cx(css.dndItem, props.isDragGhost && uuiDndState.dragGhost) } shadow>
+                        <Panel background="surface-main" cx={ cx(css.dndItem, props.isDragGhost && uuiDndState.dragGhost) } shadow>
                             <FlexRow
                                 padding="24"
                                 vPadding="12"
diff --git a/app/src/demo/form/DemoForm.tsx b/app/src/demo/form/DemoForm.tsx
index 785b9bb0eb..c5b1350517 100644
--- a/app/src/demo/form/DemoForm.tsx
+++ b/app/src/demo/form/DemoForm.tsx
@@ -508,7 +508,7 @@ export function DemoForm() {
                 </RichTextView>
                 <FlexSpacer />
             </FlexRow>
-            <Panel background="surface" cx={ css.formPanel } shadow>
+            <Panel background="surface-main" cx={ css.formPanel } shadow>
                 <FlexCell width="100%">
                     <PersonalInfo lens={ lens.prop('personalInfo') } />
                     <Location lens={ lens.prop('location') } countriesDS={ countriesDS } />
diff --git a/app/src/demo/tables/editableTable/ProjectTableDemo.tsx b/app/src/demo/tables/editableTable/ProjectTableDemo.tsx
index 13f79bf63c..47f5d3d958 100644
--- a/app/src/demo/tables/editableTable/ProjectTableDemo.tsx
+++ b/app/src/demo/tables/editableTable/ProjectTableDemo.tsx
@@ -205,7 +205,7 @@ export function ProjectTableDemo() {
 
     return (
         <Panel cx={ css.container }>
-            <FlexRow spacing="18" padding="24" vPadding="18" borderBottom={ true } background="surface">
+            <FlexRow spacing="18" padding="24" vPadding="18" borderBottom={ true } background="surface-main">
                 <FlexCell width="auto">
                     <Tooltip content={ getKeybindingWithControl('Add new task', 'Enter') } placement="bottom">
                         <Button size="30" icon={ add } caption="Add Task" onClick={ () => insertTask('bottom') } />
diff --git a/app/src/demo/tables/masterDetailedTable/FilterPanel/FiltersBlock/Filter/Filter.module.scss b/app/src/demo/tables/masterDetailedTable/FilterPanel/FiltersBlock/Filter/Filter.module.scss
index 6b90dec51b..af8602107d 100644
--- a/app/src/demo/tables/masterDetailedTable/FilterPanel/FiltersBlock/Filter/Filter.module.scss
+++ b/app/src/demo/tables/masterDetailedTable/FilterPanel/FiltersBlock/Filter/Filter.module.scss
@@ -10,3 +10,7 @@
 .icon {
     fill: var(--uui-icon);
 }
+
+.icon {
+    fill: var(--uui-icon);
+}
diff --git a/app/src/demo/tables/masterDetailedTable/SlidingPanel.tsx b/app/src/demo/tables/masterDetailedTable/SlidingPanel.tsx
index a2ac882a92..ca3fefc8f7 100644
--- a/app/src/demo/tables/masterDetailedTable/SlidingPanel.tsx
+++ b/app/src/demo/tables/masterDetailedTable/SlidingPanel.tsx
@@ -46,7 +46,7 @@ const SlidingPanelImpl: React.FC<ISlidingPanelProps> = ({
     );
 
     return (
-        <Panel background="surface" cx={ className } style={ style }>
+        <Panel background="surface-main" cx={ className } style={ style }>
             {children}
         </Panel>
     );
diff --git a/app/src/docs/Alert.doc.tsx b/app/src/docs/Alert.doc.tsx
index de147d2635..8a2301f7ae 100644
--- a/app/src/docs/Alert.doc.tsx
+++ b/app/src/docs/Alert.doc.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as uui from '@epam/uui';
+import * as electric from '@epam/electric';
 import * as loveship from '@epam/loveship';
 import * as promo from '@epam/promo';
 import { DocBuilder, TDocConfig, TDocContext, TSkin } from '@epam/uui-docs';
@@ -12,9 +13,10 @@ export class AlertDoc extends BaseDocsBlock {
         name: 'Alert',
         contexts: [TDocContext.Resizable],
         bySkin: {
-            [TSkin.UUI3_loveship]: { type: '@epam/loveship:AlertProps', component: loveship.Alert },
-            [TSkin.UUI4_promo]: { type: '@epam/promo:AlertProps', component: promo.Alert },
             [TSkin.UUI]: { type: '@epam/uui:AlertProps', component: uui.Alert },
+            [TSkin.Electric]: { type: '@epam/uui:AlertProps', component: electric.Alert },
+            [TSkin.Loveship]: { type: '@epam/loveship:AlertProps', component: loveship.Alert },
+            [TSkin.Promo]: { type: '@epam/promo:AlertProps', component: promo.Alert },
         },
         doc: (doc: DocBuilder<loveship.AlertProps | promo.AlertProps>) => {
             doc.setDefaultPropExample('color', (_, index) => index === 0);
diff --git a/app/src/docs/Avatar.doc.tsx b/app/src/docs/Avatar.doc.tsx
index 873a6c2396..3ac11171d6 100644
--- a/app/src/docs/Avatar.doc.tsx
+++ b/app/src/docs/Avatar.doc.tsx
@@ -12,8 +12,8 @@ export class AvatarDoc extends BaseDocsBlock {
     override config: TDocConfig = {
         name: 'Avatar',
         bySkin: {
-            [TSkin.UUI3_loveship]: { type: '@epam/uui-components:AvatarProps', component: loveship.Avatar },
-            [TSkin.UUI4_promo]: { type: '@epam/uui-components:AvatarProps', component: promo.Avatar },
+            [TSkin.Loveship]: { type: '@epam/uui-components:AvatarProps', component: loveship.Avatar },
+            [TSkin.Promo]: { type: '@epam/uui-components:AvatarProps', component: promo.Avatar },
             [TSkin.UUI]: { type: '@epam/uui-components:AvatarProps', component: uui.Avatar },
         },
         doc: (doc: DocBuilder<AvatarProps>) => {
diff --git a/app/src/docs/AvatarStack.doc.tsx b/app/src/docs/AvatarStack.doc.tsx
index 015faa1ee5..5dbb18433a 100644
--- a/app/src/docs/AvatarStack.doc.tsx
+++ b/app/src/docs/AvatarStack.doc.tsx
@@ -13,8 +13,8 @@ export class AvatarStackDoc extends BaseDocsBlock {
     override config: TDocConfig = {
         name: 'AvatarStack',
         bySkin: {
-            [TSkin.UUI3_loveship]: { type: '@epam/uui-components:AvatarStackProps', component: loveship.AvatarStack },
-            [TSkin.UUI4_promo]: { type: '@epam/uui-components:AvatarStackProps', component: promo.AvatarStack },
+            [TSkin.Loveship]: { type: '@epam/uui-components:AvatarStackProps', component: loveship.AvatarStack },
+            [TSkin.Promo]: { type: '@epam/uui-components:AvatarStackProps', component: promo.AvatarStack },
             [TSkin.UUI]: { type: '@epam/uui-components:AvatarStackProps', component: uui.AvatarStack },
         },
         doc: (doc: DocBuilder<AvatarStackProps>) => {
diff --git a/app/src/docs/Badge.doc.tsx b/app/src/docs/Badge.doc.tsx
index 7cf2fdf1d9..d36971e326 100644
--- a/app/src/docs/Badge.doc.tsx
+++ b/app/src/docs/Badge.doc.tsx
@@ -13,8 +13,8 @@ export class BadgeDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Form, TDocContext.Resizable],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:BadgeProps', component: uui.Badge },
-            [TSkin.UUI3_loveship]: { type: '@epam/loveship:BadgeProps', component: loveship.Badge },
-            [TSkin.UUI4_promo]: { type: '@epam/promo:BadgeProps', component: promo.Badge },
+            [TSkin.Loveship]: { type: '@epam/loveship:BadgeProps', component: loveship.Badge },
+            [TSkin.Promo]: { type: '@epam/promo:BadgeProps', component: promo.Badge },
         },
         doc: (doc: DocBuilder<uui.BadgeProps | promo.BadgeProps | loveship.BadgeProps>) => {
             doc.merge('iconPosition', { defaultValue: 'left' });
diff --git a/app/src/docs/Blocker.doc.tsx b/app/src/docs/Blocker.doc.tsx
index c5f1ce1d31..8d6b3ea41f 100644
--- a/app/src/docs/Blocker.doc.tsx
+++ b/app/src/docs/Blocker.doc.tsx
@@ -13,8 +13,8 @@ export class BlockerDoc extends BaseDocsBlock {
         contexts: [TDocContext.RelativePanel],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui-components:BlockerProps', component: uui.Blocker },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui-components:BlockerProps', component: loveship.Blocker },
-            [TSkin.UUI4_promo]: { type: '@epam/uui-components:BlockerProps', component: promo.Blocker },
+            [TSkin.Loveship]: { type: '@epam/uui-components:BlockerProps', component: loveship.Blocker },
+            [TSkin.Promo]: { type: '@epam/uui-components:BlockerProps', component: promo.Blocker },
         },
     };
 
diff --git a/app/src/docs/Button.doc.tsx b/app/src/docs/Button.doc.tsx
index 84ecb1f0a4..6967f192e2 100644
--- a/app/src/docs/Button.doc.tsx
+++ b/app/src/docs/Button.doc.tsx
@@ -13,8 +13,8 @@ export class ButtonDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Resizable, TDocContext.Form],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:ButtonProps', component: uui.Button },
-            [TSkin.UUI3_loveship]: { type: '@epam/loveship:ButtonProps', component: loveship.Button },
-            [TSkin.UUI4_promo]: { type: '@epam/promo:ButtonProps', component: promo.Button },
+            [TSkin.Loveship]: { type: '@epam/loveship:ButtonProps', component: loveship.Button },
+            [TSkin.Promo]: { type: '@epam/promo:ButtonProps', component: promo.Button },
         },
         doc: (doc: DocBuilder<uui.ButtonProps | promo.ButtonProps | loveship.ButtonProps>) => {
             doc.merge('iconPosition', { defaultValue: 'left' });
diff --git a/app/src/docs/Checkbox.doc.tsx b/app/src/docs/Checkbox.doc.tsx
index fe49322a77..099e0a37f1 100644
--- a/app/src/docs/Checkbox.doc.tsx
+++ b/app/src/docs/Checkbox.doc.tsx
@@ -13,8 +13,8 @@ export class CheckboxDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Form, TDocContext.Table],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:CheckboxProps', component: uui.Checkbox },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui:CheckboxProps', component: loveship.Checkbox },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:CheckboxProps', component: promo.Checkbox },
+            [TSkin.Loveship]: { type: '@epam/uui:CheckboxProps', component: loveship.Checkbox },
+            [TSkin.Promo]: { type: '@epam/uui:CheckboxProps', component: promo.Checkbox },
         },
     };
 
diff --git a/app/src/docs/CheckboxGroup.doc.tsx b/app/src/docs/CheckboxGroup.doc.tsx
index c4dd6ad8b1..4954c34eb5 100644
--- a/app/src/docs/CheckboxGroup.doc.tsx
+++ b/app/src/docs/CheckboxGroup.doc.tsx
@@ -14,8 +14,8 @@ export class CheckboxGroupDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Form, TDocContext.Resizable],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui-components:CheckboxGroupProps', component: uui.CheckboxGroup },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui-components:CheckboxGroupProps', component: loveship.CheckboxGroup },
-            [TSkin.UUI4_promo]: { type: '@epam/uui-components:CheckboxGroupProps', component: promo.CheckboxGroup },
+            [TSkin.Loveship]: { type: '@epam/uui-components:CheckboxGroupProps', component: loveship.CheckboxGroup },
+            [TSkin.Promo]: { type: '@epam/uui-components:CheckboxGroupProps', component: promo.CheckboxGroup },
         },
         doc: (doc: DocBuilder<uuiComponents.CheckboxGroupProps<any>>) => {
             doc.merge('CheckboxInput', {
diff --git a/app/src/docs/ControlGroup.doc.tsx b/app/src/docs/ControlGroup.doc.tsx
index 3e74b508bd..3794785d65 100644
--- a/app/src/docs/ControlGroup.doc.tsx
+++ b/app/src/docs/ControlGroup.doc.tsx
@@ -14,8 +14,8 @@ export class ControlGroupDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Form, TDocContext.Resizable],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui-components:ControlGroupProps', component: uui.ControlGroup },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui-components:ControlGroupProps', component: loveship.ControlGroup },
-            [TSkin.UUI4_promo]: { type: '@epam/uui-components:ControlGroupProps', component: promo.ControlGroup },
+            [TSkin.Loveship]: { type: '@epam/uui-components:ControlGroupProps', component: loveship.ControlGroup },
+            [TSkin.Promo]: { type: '@epam/uui-components:ControlGroupProps', component: promo.ControlGroup },
         },
         doc: (doc: DocBuilder<uuiComponents.ControlGroupProps>) => {
             doc.merge('children', {
diff --git a/app/src/docs/CountIndicator.doc.tsx b/app/src/docs/CountIndicator.doc.tsx
index 49cc0a7e39..1d383d53d8 100644
--- a/app/src/docs/CountIndicator.doc.tsx
+++ b/app/src/docs/CountIndicator.doc.tsx
@@ -12,8 +12,8 @@ export class CountIndicatorDoc extends BaseDocsBlock {
         name: 'CountIndicator',
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:CountIndicatorProps', component: uui.CountIndicator },
-            [TSkin.UUI3_loveship]: { type: '@epam/loveship:CountIndicatorProps', component: loveship.CountIndicator },
-            [TSkin.UUI4_promo]: { type: '@epam/promo:CountIndicatorProps', component: promo.CountIndicator },
+            [TSkin.Loveship]: { type: '@epam/loveship:CountIndicatorProps', component: loveship.CountIndicator },
+            [TSkin.Promo]: { type: '@epam/promo:CountIndicatorProps', component: promo.CountIndicator },
         },
         doc: (doc: DocBuilder<uui.CountIndicatorProps | promo.CountIndicatorProps | loveship.CountIndicatorProps>) => {
             doc.setDefaultPropExample('color', (_, index) => index === 0);
diff --git a/app/src/docs/Dropdown.doc.tsx b/app/src/docs/Dropdown.doc.tsx
index 61a3e1aa04..51682e1532 100644
--- a/app/src/docs/Dropdown.doc.tsx
+++ b/app/src/docs/Dropdown.doc.tsx
@@ -12,8 +12,8 @@ export class DropdownDoc extends BaseDocsBlock {
     override config: TDocConfig = {
         name: 'Dropdown',
         bySkin: {
-            [TSkin.UUI3_loveship]: { type: '@epam/uui-core:DropdownProps', component: loveship.Dropdown },
-            [TSkin.UUI4_promo]: { type: '@epam/uui-core:DropdownProps', component: promo.Dropdown },
+            [TSkin.Loveship]: { type: '@epam/uui-core:DropdownProps', component: loveship.Dropdown },
+            [TSkin.Promo]: { type: '@epam/uui-core:DropdownProps', component: promo.Dropdown },
             [TSkin.UUI]: { type: '@epam/uui-core:DropdownProps', component: uui.Dropdown },
         },
         doc: (doc: DocBuilder<DropdownProps>) => {
diff --git a/app/src/docs/FlexCell.doc.tsx b/app/src/docs/FlexCell.doc.tsx
index 3770ff3d27..03b6ad85cf 100644
--- a/app/src/docs/FlexCell.doc.tsx
+++ b/app/src/docs/FlexCell.doc.tsx
@@ -12,8 +12,8 @@ export class FlexCellDoc extends BaseDocsBlock {
         name: 'FlexCell',
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:FlexCellProps', component: uui.FlexCell },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui:FlexCellProps', component: loveship.FlexCell },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:FlexCellProps', component: promo.FlexCell },
+            [TSkin.Loveship]: { type: '@epam/uui:FlexCellProps', component: loveship.FlexCell },
+            [TSkin.Promo]: { type: '@epam/uui:FlexCellProps', component: promo.FlexCell },
         },
         doc: (doc: DocBuilder<uui.FlexCellProps>) => {
             doc.merge('alignSelf', { editorType: 'MultiUnknownEditor', examples: ['flex-start', 'center', 'flex-end'] });
diff --git a/app/src/docs/IconButton.doc.tsx b/app/src/docs/IconButton.doc.tsx
index 021ce074a7..2c03753662 100644
--- a/app/src/docs/IconButton.doc.tsx
+++ b/app/src/docs/IconButton.doc.tsx
@@ -13,8 +13,8 @@ export class IconButtonDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Form],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:IconButtonProps', component: uui.IconButton },
-            [TSkin.UUI3_loveship]: { type: '@epam/loveship:IconButtonProps', component: loveship.IconButton },
-            [TSkin.UUI4_promo]: { type: '@epam/promo:IconButtonProps', component: promo.IconButton },
+            [TSkin.Loveship]: { type: '@epam/loveship:IconButtonProps', component: loveship.IconButton },
+            [TSkin.Promo]: { type: '@epam/promo:IconButtonProps', component: promo.IconButton },
         },
         doc: (doc: DocBuilder<promo.IconButtonProps | loveship.IconButtonProps| uui.IconButtonProps>) => {
             doc.merge('iconPosition', { defaultValue: 'left' });
diff --git a/app/src/docs/IconContainer.doc.tsx b/app/src/docs/IconContainer.doc.tsx
index c72bd70b5c..e87778a9ee 100644
--- a/app/src/docs/IconContainer.doc.tsx
+++ b/app/src/docs/IconContainer.doc.tsx
@@ -13,8 +13,8 @@ export class IconContainerDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Form],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui-components:ControlIconProps', component: uui.IconContainer },
-            [TSkin.UUI3_loveship]: { type: '@epam/loveship:IconContainerProps', component: loveship.IconContainer },
-            [TSkin.UUI4_promo]: { type: '@epam/promo:IconContainerProps', component: promo.IconContainer },
+            [TSkin.Loveship]: { type: '@epam/loveship:IconContainerProps', component: loveship.IconContainer },
+            [TSkin.Promo]: { type: '@epam/promo:IconContainerProps', component: promo.IconContainer },
         },
     };
 
diff --git a/app/src/docs/LabeledInput.doc.tsx b/app/src/docs/LabeledInput.doc.tsx
index bda9049659..1cbcfc1caa 100644
--- a/app/src/docs/LabeledInput.doc.tsx
+++ b/app/src/docs/LabeledInput.doc.tsx
@@ -13,8 +13,8 @@ export class LabeledInputDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Resizable, TDocContext.Form],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:LabeledInputProps', component: uui.LabeledInput },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui:LabeledInputProps', component: loveship.LabeledInput },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:LabeledInputProps', component: promo.LabeledInput },
+            [TSkin.Loveship]: { type: '@epam/uui:LabeledInputProps', component: loveship.LabeledInput },
+            [TSkin.Promo]: { type: '@epam/uui:LabeledInputProps', component: promo.LabeledInput },
         },
         doc: (doc: DocBuilder<uui.LabeledInputProps>) => {
             doc.merge('value', { examples: ['Some simple text'] });
diff --git a/app/src/docs/LinkButton.doc.tsx b/app/src/docs/LinkButton.doc.tsx
index eb9bbfab85..81cdc0d021 100644
--- a/app/src/docs/LinkButton.doc.tsx
+++ b/app/src/docs/LinkButton.doc.tsx
@@ -13,8 +13,8 @@ export class LinkButtonDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Form],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:LinkButtonProps', component: uui.LinkButton },
-            [TSkin.UUI3_loveship]: { type: '@epam/loveship:LinkButtonProps', component: loveship.LinkButton },
-            [TSkin.UUI4_promo]: { type: '@epam/promo:LinkButtonProps', component: promo.LinkButton },
+            [TSkin.Loveship]: { type: '@epam/loveship:LinkButtonProps', component: loveship.LinkButton },
+            [TSkin.Promo]: { type: '@epam/promo:LinkButtonProps', component: promo.LinkButton },
         },
         doc: (doc: DocBuilder<promo.LinkButtonProps | loveship.LinkButtonProps | uui.LinkButtonProps>) => {
             doc.merge('iconPosition', { defaultValue: 'left' });
diff --git a/app/src/docs/MultiSwitch.doc.tsx b/app/src/docs/MultiSwitch.doc.tsx
index 2d67438d68..9a8c04d23c 100644
--- a/app/src/docs/MultiSwitch.doc.tsx
+++ b/app/src/docs/MultiSwitch.doc.tsx
@@ -13,8 +13,8 @@ export class MultiSwitchDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Form],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:MultiSwitchProps', component: uui.MultiSwitch },
-            [TSkin.UUI3_loveship]: { type: '@epam/loveship:MultiSwitchProps', component: loveship.MultiSwitch },
-            [TSkin.UUI4_promo]: { type: '@epam/promo:MultiSwitchProps', component: promo.MultiSwitch },
+            [TSkin.Loveship]: { type: '@epam/loveship:MultiSwitchProps', component: loveship.MultiSwitch },
+            [TSkin.Promo]: { type: '@epam/promo:MultiSwitchProps', component: promo.MultiSwitch },
         },
         doc: (doc: DocBuilder<uui.MultiSwitchProps<any>>) => {
             doc.merge('size', { defaultValue: '36' });
diff --git a/app/src/docs/NotificationCard.doc.tsx b/app/src/docs/NotificationCard.doc.tsx
index 5a6c3dfc87..19e8cfd951 100644
--- a/app/src/docs/NotificationCard.doc.tsx
+++ b/app/src/docs/NotificationCard.doc.tsx
@@ -12,8 +12,8 @@ export class NotificationCardDoc extends BaseDocsBlock {
         name: 'NotificationCard',
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:NotificationCardProps', component: uui.NotificationCard },
-            [TSkin.UUI3_loveship]: { type: '@epam/loveship:NotificationCardProps', component: loveship.NotificationCard },
-            [TSkin.UUI4_promo]: { type: '@epam/promo:NotificationCardProps', component: promo.NotificationCard },
+            [TSkin.Loveship]: { type: '@epam/loveship:NotificationCardProps', component: loveship.NotificationCard },
+            [TSkin.Promo]: { type: '@epam/promo:NotificationCardProps', component: promo.NotificationCard },
         },
         doc: (doc: DocBuilder<uui.NotificationCardProps | loveship.NotificationCardProps| promo.NotificationCardProps>) => {
             doc.merge('clearTimer', { remountOnChange: true });
diff --git a/app/src/docs/NumericInput.doc.tsx b/app/src/docs/NumericInput.doc.tsx
index 7f65d6aad5..1345bfab15 100644
--- a/app/src/docs/NumericInput.doc.tsx
+++ b/app/src/docs/NumericInput.doc.tsx
@@ -13,8 +13,8 @@ export class NumericInputDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Form, TDocContext.Table, TDocContext.Resizable],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:NumericInputProps', component: uui.NumericInput },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui:NumericInputProps', component: loveship.NumericInput },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:NumericInputProps', component: promo.NumericInput },
+            [TSkin.Loveship]: { type: '@epam/uui:NumericInputProps', component: loveship.NumericInput },
+            [TSkin.Promo]: { type: '@epam/uui:NumericInputProps', component: promo.NumericInput },
         },
         doc: (doc: DocBuilder<uui.NumericInputProps>) => {
             doc.merge('value', { examples: [{ value: 0, isDefault: true }, 123, 123.99] });
diff --git a/app/src/docs/Paginator.doc.tsx b/app/src/docs/Paginator.doc.tsx
index f87736ce61..2cd1dff374 100644
--- a/app/src/docs/Paginator.doc.tsx
+++ b/app/src/docs/Paginator.doc.tsx
@@ -14,8 +14,8 @@ export class PaginatorDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.PagePanel],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui-components:PaginatorProps', component: uui.Paginator },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui-components:PaginatorProps', component: loveship.Paginator },
-            [TSkin.UUI4_promo]: { type: '@epam/uui-components:PaginatorProps', component: promo.Paginator },
+            [TSkin.Loveship]: { type: '@epam/uui-components:PaginatorProps', component: loveship.Paginator },
+            [TSkin.Promo]: { type: '@epam/uui-components:PaginatorProps', component: promo.Paginator },
         },
         doc: (doc: DocBuilder<uuiComponents.PaginatorProps>) => {
             doc.merge('totalPages', { examples: [5, 8, { value: 10, isDefault: true }, 100, 1000] });
diff --git a/app/src/docs/PickerList.doc.tsx b/app/src/docs/PickerList.doc.tsx
index c9208416b6..ce1f3241b3 100644
--- a/app/src/docs/PickerList.doc.tsx
+++ b/app/src/docs/PickerList.doc.tsx
@@ -13,8 +13,8 @@ export class PickerListDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Resizable, TDocContext.Form],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:PickerListProps', component: uui.PickerList },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui:PickerListProps', component: loveship.PickerList },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:PickerListProps', component: promo.PickerList },
+            [TSkin.Loveship]: { type: '@epam/uui:PickerListProps', component: loveship.PickerList },
+            [TSkin.Promo]: { type: '@epam/uui:PickerListProps', component: promo.PickerList },
         },
         doc: (doc: DocBuilder<uui.PickerListProps<any, any>>) => {
             doc.merge('value', {
diff --git a/app/src/docs/RadioGroup.doc.tsx b/app/src/docs/RadioGroup.doc.tsx
index ca5765fd11..0a776f4049 100644
--- a/app/src/docs/RadioGroup.doc.tsx
+++ b/app/src/docs/RadioGroup.doc.tsx
@@ -14,8 +14,8 @@ export class RadioGroupDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Form, TDocContext.Resizable],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui-components:RadioGroupProps', component: uui.RadioGroup },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui-components:RadioGroupProps', component: loveship.RadioGroup },
-            [TSkin.UUI4_promo]: { type: '@epam/uui-components:RadioGroupProps', component: promo.RadioGroup },
+            [TSkin.Loveship]: { type: '@epam/uui-components:RadioGroupProps', component: loveship.RadioGroup },
+            [TSkin.Promo]: { type: '@epam/uui-components:RadioGroupProps', component: promo.RadioGroup },
         },
         doc: (doc: DocBuilder<uuiComponents.RadioGroupProps<any>>) => {
             doc.merge('items', {
diff --git a/app/src/docs/RadioInput.doc.tsx b/app/src/docs/RadioInput.doc.tsx
index a48d347124..f0b93ce588 100644
--- a/app/src/docs/RadioInput.doc.tsx
+++ b/app/src/docs/RadioInput.doc.tsx
@@ -13,8 +13,8 @@ export class RadioInputDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Form, TDocContext.Resizable],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:RadioInputProps', component: uui.RadioInput },
-            [TSkin.UUI3_loveship]: { type: '@epam/loveship:RadioInputProps', component: loveship.RadioInput },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:RadioInputProps', component: promo.RadioInput },
+            [TSkin.Loveship]: { type: '@epam/loveship:RadioInputProps', component: loveship.RadioInput },
+            [TSkin.Promo]: { type: '@epam/uui:RadioInputProps', component: promo.RadioInput },
         },
         doc: (doc: DocBuilder<loveship.RadioInputProps| uui.RadioInputProps>) => {
             doc.merge('value', { examples: [true, { value: false, isDefault: true }] });
diff --git a/app/src/docs/Rating.doc.tsx b/app/src/docs/Rating.doc.tsx
index e600ae7052..2001c5b109 100644
--- a/app/src/docs/Rating.doc.tsx
+++ b/app/src/docs/Rating.doc.tsx
@@ -12,8 +12,8 @@ export class RatingDoc extends BaseDocsBlock {
         name: 'Rating',
         contexts: [TDocContext.Default, TDocContext.Form],
         bySkin: {
-            [TSkin.UUI3_loveship]: { type: '@epam/loveship:RatingProps', component: loveship.Rating },
-            [TSkin.UUI4_promo]: { type: '@epam/promo:RatingProps', component: promo.Rating },
+            [TSkin.Loveship]: { type: '@epam/loveship:RatingProps', component: loveship.Rating },
+            [TSkin.Promo]: { type: '@epam/promo:RatingProps', component: promo.Rating },
         },
         doc: (doc: DocBuilder<promo.RatingProps | loveship.RatingProps>) => {
             doc.merge('Tooltip', { examples: [{ value: uui.Tooltip, name: 'Tooltip' }] });
diff --git a/app/src/docs/SearchInput.doc.tsx b/app/src/docs/SearchInput.doc.tsx
index ad4f80aafa..f2b0d6e25b 100644
--- a/app/src/docs/SearchInput.doc.tsx
+++ b/app/src/docs/SearchInput.doc.tsx
@@ -13,8 +13,8 @@ export class SearchInputDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Form, TDocContext.Resizable, TDocContext.Table],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:SearchInputProps', component: uui.SearchInput },
-            [TSkin.UUI3_loveship]: { type: '@epam/loveship:SearchInputProps', component: loveship.SearchInput },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:SearchInputProps', component: promo.SearchInput },
+            [TSkin.Loveship]: { type: '@epam/loveship:SearchInputProps', component: loveship.SearchInput },
+            [TSkin.Promo]: { type: '@epam/uui:SearchInputProps', component: promo.SearchInput },
         },
         doc: (doc: DocBuilder<uui.SearchInputProps | loveship.SearchInputProps>) => {
             doc.merge('iconPosition', { defaultValue: 'left' });
diff --git a/app/src/docs/Slider.doc.tsx b/app/src/docs/Slider.doc.tsx
index 7d1de0f1a4..d46c495afa 100644
--- a/app/src/docs/Slider.doc.tsx
+++ b/app/src/docs/Slider.doc.tsx
@@ -13,8 +13,8 @@ export class SliderDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Resizable, TDocContext.Form],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:SliderProps', component: uui.Slider },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:SliderProps', component: promo.Slider },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui:SliderProps', component: loveship.Slider },
+            [TSkin.Promo]: { type: '@epam/uui:SliderProps', component: promo.Slider },
+            [TSkin.Loveship]: { type: '@epam/uui:SliderProps', component: loveship.Slider },
         },
         doc: (doc: DocBuilder<uui.SliderProps>) => {
             doc.merge('min', { examples: [{ value: 0, isDefault: true }, 1, 50] });
diff --git a/app/src/docs/SliderRating.doc.tsx b/app/src/docs/SliderRating.doc.tsx
index 5949ae2eb2..7be5c578fc 100644
--- a/app/src/docs/SliderRating.doc.tsx
+++ b/app/src/docs/SliderRating.doc.tsx
@@ -13,7 +13,7 @@ export class SliderRatingDoc extends BaseDocsBlock {
         name: 'SliderRating',
         contexts: [TDocContext.Default, TDocContext.Form],
         bySkin: {
-            [TSkin.UUI3_loveship]: {
+            [TSkin.Loveship]: {
                 type: '@epam/loveship:SliderRatingProps',
                 component: loveship.SliderRating,
                 doc: (doc: DocBuilder<loveship.SliderRatingProps<any>>) => {
@@ -37,7 +37,7 @@ export class SliderRatingDoc extends BaseDocsBlock {
 
     renderContent() {
         return (
-            <span className={ cx(css.wrapper, css.uuiThemePromo) }>
+            <span className={ cx(css.wrapper) }>
                 <EditableDocContent fileName="sliderRating-descriptions" />
                 {this.renderSectionTitle('Examples')}
                 <DocExample title="Basic" path="./_examples/sliderRating/Basic.example.tsx" />
diff --git a/app/src/docs/Spinner.doc.tsx b/app/src/docs/Spinner.doc.tsx
index 97849563e3..148c368dcb 100644
--- a/app/src/docs/Spinner.doc.tsx
+++ b/app/src/docs/Spinner.doc.tsx
@@ -13,8 +13,8 @@ export class SpinnerDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Form, TDocContext.Resizable],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:SpinnerProps', component: uui.Spinner },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui:SpinnerProps', component: loveship.Spinner },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:SpinnerProps', component: promo.Spinner },
+            [TSkin.Loveship]: { type: '@epam/uui:SpinnerProps', component: loveship.Spinner },
+            [TSkin.Promo]: { type: '@epam/uui:SpinnerProps', component: promo.Spinner },
         },
     };
 
diff --git a/app/src/docs/StatusIndicator.doc.tsx b/app/src/docs/StatusIndicator.doc.tsx
index c9c092cc7a..974ab0fc23 100644
--- a/app/src/docs/StatusIndicator.doc.tsx
+++ b/app/src/docs/StatusIndicator.doc.tsx
@@ -14,8 +14,8 @@ export class StatusIndicatorDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Form, TDocContext.Resizable],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:StatusIndicatorProps', component: uui.StatusIndicator },
-            [TSkin.UUI3_loveship]: { type: '@epam/loveship:StatusIndicatorProps', component: loveship.StatusIndicator },
-            [TSkin.UUI4_promo]: { type: '@epam/promo:StatusIndicatorProps', component: promo.StatusIndicator },
+            [TSkin.Loveship]: { type: '@epam/loveship:StatusIndicatorProps', component: loveship.StatusIndicator },
+            [TSkin.Promo]: { type: '@epam/promo:StatusIndicatorProps', component: promo.StatusIndicator },
         },
     };
 
diff --git a/app/src/docs/Switch.doc.tsx b/app/src/docs/Switch.doc.tsx
index fb958b6c73..3eb259f8d7 100644
--- a/app/src/docs/Switch.doc.tsx
+++ b/app/src/docs/Switch.doc.tsx
@@ -13,8 +13,8 @@ export class SwitchDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Resizable, TDocContext.Form],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:SwitchProps', component: uui.Switch },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui:SwitchProps', component: loveship.Switch },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:SwitchProps', component: promo.Switch },
+            [TSkin.Loveship]: { type: '@epam/uui:SwitchProps', component: loveship.Switch },
+            [TSkin.Promo]: { type: '@epam/uui:SwitchProps', component: promo.Switch },
         },
     };
 
diff --git a/app/src/docs/TabButton.doc.tsx b/app/src/docs/TabButton.doc.tsx
index 93d2077a8b..3edfbb1c07 100644
--- a/app/src/docs/TabButton.doc.tsx
+++ b/app/src/docs/TabButton.doc.tsx
@@ -13,8 +13,8 @@ export class TabButtonDoc extends BaseDocsBlock {
         contexts: [TDocContext.TabButton],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:TabButtonProps', component: uui.TabButton },
-            [TSkin.UUI3_loveship]: { type: '@epam/loveship:TabButtonProps', component: loveship.TabButton },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:TabButtonProps', component: promo.TabButton },
+            [TSkin.Loveship]: { type: '@epam/loveship:TabButtonProps', component: loveship.TabButton },
+            [TSkin.Promo]: { type: '@epam/uui:TabButtonProps', component: promo.TabButton },
         },
         doc: (doc: DocBuilder<uui.TabButtonProps | loveship.TabButtonProps>) => {
             doc.merge('iconPosition', { defaultValue: 'left' });
diff --git a/app/src/docs/Tag.doc.tsx b/app/src/docs/Tag.doc.tsx
index 6289b51ae6..4261d0fde3 100644
--- a/app/src/docs/Tag.doc.tsx
+++ b/app/src/docs/Tag.doc.tsx
@@ -13,8 +13,8 @@ export class TagDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Resizable, TDocContext.Form],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:TagProps', component: uui.Tag },
-            [TSkin.UUI4_promo]: { type: '@epam/promo:TagProps', component: promo.Tag },
-            [TSkin.UUI3_loveship]: { type: '@epam/loveship:TagProps', component: loveship.Tag },
+            [TSkin.Promo]: { type: '@epam/promo:TagProps', component: promo.Tag },
+            [TSkin.Loveship]: { type: '@epam/loveship:TagProps', component: loveship.Tag },
         },
         doc: (doc: DocBuilder<loveship.TagProps | uui.TagProps>) => {
             doc.merge('iconPosition', { defaultValue: 'left' });
diff --git a/app/src/docs/Text.doc.tsx b/app/src/docs/Text.doc.tsx
index 84fdc70391..f27ccc51cc 100644
--- a/app/src/docs/Text.doc.tsx
+++ b/app/src/docs/Text.doc.tsx
@@ -13,8 +13,8 @@ export class TextDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Resizable, TDocContext.Form],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:TextProps', component: uui.Text },
-            [TSkin.UUI3_loveship]: { type: '@epam/loveship:TextProps', component: loveship.Text },
-            [TSkin.UUI4_promo]: { type: '@epam/promo:TextProps', component: promo.Text },
+            [TSkin.Loveship]: { type: '@epam/loveship:TextProps', component: loveship.Text },
+            [TSkin.Promo]: { type: '@epam/promo:TextProps', component: promo.Text },
         },
         doc: (doc: DocBuilder<promo.TextProps | loveship.TextProps | uui.TextProps>) => {
             doc.merge('children', {
diff --git a/app/src/docs/TextArea.doc.tsx b/app/src/docs/TextArea.doc.tsx
index dd5c25f09b..0e38637e05 100644
--- a/app/src/docs/TextArea.doc.tsx
+++ b/app/src/docs/TextArea.doc.tsx
@@ -12,8 +12,8 @@ export class TextAreaDoc extends BaseDocsBlock {
         name: 'TextArea',
         contexts: [TDocContext.Default, TDocContext.Resizable, TDocContext.Form],
         bySkin: {
-            [TSkin.UUI3_loveship]: { type: '@epam/uui:TextAreaProps', component: loveship.TextArea },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:TextAreaProps', component: promo.TextArea },
+            [TSkin.Loveship]: { type: '@epam/uui:TextAreaProps', component: loveship.TextArea },
+            [TSkin.Promo]: { type: '@epam/uui:TextAreaProps', component: promo.TextArea },
             [TSkin.UUI]: { type: '@epam/uui:TextAreaProps', component: uui.TextArea },
         },
         doc: (doc: DocBuilder<uui.TextAreaProps>) => {
diff --git a/app/src/docs/TextInput.doc.tsx b/app/src/docs/TextInput.doc.tsx
index 5094e9783b..b469dde93a 100644
--- a/app/src/docs/TextInput.doc.tsx
+++ b/app/src/docs/TextInput.doc.tsx
@@ -13,8 +13,8 @@ export class TextInputDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Resizable, TDocContext.Form, TDocContext.Table],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:TextInputProps', component: uui.TextInput },
-            [TSkin.UUI3_loveship]: { type: '@epam/loveship:TextInputProps', component: loveship.TextInput },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:TextInputProps', component: promo.TextInput },
+            [TSkin.Loveship]: { type: '@epam/loveship:TextInputProps', component: loveship.TextInput },
+            [TSkin.Promo]: { type: '@epam/uui:TextInputProps', component: promo.TextInput },
         },
         doc: (doc: DocBuilder<uui.TextInputProps | loveship.TextInputProps>) => {
             doc.merge('type', { defaultValue: 'text' });
diff --git a/app/src/docs/TextPlaceholder.doc.tsx b/app/src/docs/TextPlaceholder.doc.tsx
index e3c6a1e600..4837276d14 100644
--- a/app/src/docs/TextPlaceholder.doc.tsx
+++ b/app/src/docs/TextPlaceholder.doc.tsx
@@ -13,8 +13,8 @@ export class TextPlaceholderDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Resizable, TDocContext.Form],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:TextPlaceholderProps', component: uui.TextPlaceholder },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui:TextPlaceholderProps', component: loveship.TextPlaceholder },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:TextPlaceholderProps', component: promo.TextPlaceholder },
+            [TSkin.Loveship]: { type: '@epam/uui:TextPlaceholderProps', component: loveship.TextPlaceholder },
+            [TSkin.Promo]: { type: '@epam/uui:TextPlaceholderProps', component: promo.TextPlaceholder },
         },
         doc: (doc: DocBuilder<uui.TextPlaceholderProps>) => {
             doc.merge('wordsCount', { examples: [2, 3, 4, 5, 6, 12, 150] });
diff --git a/app/src/docs/TimePicker.doc.tsx b/app/src/docs/TimePicker.doc.tsx
index f399cd1ea1..db95341f22 100644
--- a/app/src/docs/TimePicker.doc.tsx
+++ b/app/src/docs/TimePicker.doc.tsx
@@ -15,8 +15,8 @@ export class TimePickerDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Resizable, TDocContext.Form, TDocContext.Table],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:TimePickerProps', component: uui.TimePicker },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui:TimePickerProps', component: loveship.TimePicker },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:TimePickerProps', component: promo.TimePicker },
+            [TSkin.Loveship]: { type: '@epam/uui:TimePickerProps', component: loveship.TimePicker },
+            [TSkin.Promo]: { type: '@epam/uui:TimePickerProps', component: promo.TimePicker },
         },
         doc: (doc: DocBuilder<uui.TimePickerProps>) => {
             doc.merge('minutesStep', { examples: [5, 10, 15] });
diff --git a/app/src/docs/Tooltip.doc.tsx b/app/src/docs/Tooltip.doc.tsx
index 3922951285..dd572fa3fa 100644
--- a/app/src/docs/Tooltip.doc.tsx
+++ b/app/src/docs/Tooltip.doc.tsx
@@ -14,8 +14,8 @@ export class TooltipDoc extends BaseDocsBlock {
         name: 'Tooltip',
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:TooltipProps', component: uui.Tooltip },
-            [TSkin.UUI3_loveship]: { type: '@epam/loveship:TooltipProps', component: loveship.Tooltip },
-            [TSkin.UUI4_promo]: { type: '@epam/promo:TooltipProps', component: promo.Tooltip },
+            [TSkin.Loveship]: { type: '@epam/loveship:TooltipProps', component: loveship.Tooltip },
+            [TSkin.Promo]: { type: '@epam/promo:TooltipProps', component: promo.Tooltip },
         },
         doc: (doc: DocBuilder<uui.TooltipProps | loveship.TooltipProps | promo.TooltipProps>) => {
             doc.merge('closeDelay', { examples: [0, 500, 1000] });
diff --git a/app/src/docs/VerticalTabButton.doc.tsx b/app/src/docs/VerticalTabButton.doc.tsx
index 2bb2e0e738..91f132a117 100644
--- a/app/src/docs/VerticalTabButton.doc.tsx
+++ b/app/src/docs/VerticalTabButton.doc.tsx
@@ -13,8 +13,8 @@ export class VerticalTabButtonDoc extends BaseDocsBlock {
         contexts: [TDocContext.VerticalTabButton],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:VerticalTabButtonProps', component: uui.VerticalTabButton },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui:VerticalTabButtonProps', component: loveship.VerticalTabButton },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:VerticalTabButtonProps', component: promo.VerticalTabButton },
+            [TSkin.Loveship]: { type: '@epam/uui:VerticalTabButtonProps', component: loveship.VerticalTabButton },
+            [TSkin.Promo]: { type: '@epam/uui:VerticalTabButtonProps', component: promo.VerticalTabButton },
         },
         doc: (doc: DocBuilder<uui.VerticalTabButtonProps>) => {
             doc.merge('iconPosition', { defaultValue: 'left' });
diff --git a/app/src/docs/_examples/anchor/Basic.example.tsx b/app/src/docs/_examples/anchor/Basic.example.tsx
index 9a41e1f4e4..ff55ed1011 100644
--- a/app/src/docs/_examples/anchor/Basic.example.tsx
+++ b/app/src/docs/_examples/anchor/Basic.example.tsx
@@ -5,7 +5,7 @@ import { ReactComponent as TypescriptIcon } from '../../../icons/typescript-icon
 
 export default function BasicExample() {
     return (
-        <Panel background="surface" style={ { padding: '4px' } }>
+        <Panel style={ { padding: '4px' } }>
             <Text>Opens in a new window (target _blank)</Text>
             <FlexRow>
                 <Anchor rawProps={ { 'aria-label': 'ReactJS' } } href="https://reactjs.org/" target="_blank">
diff --git a/app/src/docs/_examples/badge/Attributes.example.tsx b/app/src/docs/_examples/badge/Attributes.example.tsx
index 33c04a79f0..f5c2c5fbe0 100644
--- a/app/src/docs/_examples/badge/Attributes.example.tsx
+++ b/app/src/docs/_examples/badge/Attributes.example.tsx
@@ -6,7 +6,7 @@ import css from './AttributesExample.module.scss';
 
 export default function AttributesExample() {
     return (
-        <Panel background="surface" shadow cx={ css.container }>
+        <Panel background="surface-main" shadow cx={ css.container }>
             <FlexRow cx={ css.containerItem }>
                 <Avatar size="60" alt="avatar" img="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4" />
                 <FlexRow padding="12">
diff --git a/app/src/docs/_examples/badge/Colors.example.tsx b/app/src/docs/_examples/badge/Colors.example.tsx
index 6c6ea9f58a..6709d7b071 100644
--- a/app/src/docs/_examples/badge/Colors.example.tsx
+++ b/app/src/docs/_examples/badge/Colors.example.tsx
@@ -4,7 +4,7 @@ import { FlexRow, Panel, Text, Badge } from '@epam/uui';
 export default function ColorsExample() {
     return (
         
-        <Panel background="surface" style={ { padding: '12px', flex: '1 1 0' } }>
+        <Panel background="surface-main" style={ { padding: '12px', flex: '1 1 0' } }>
             <Text fontSize="14">Semantic colors, use for appropriate sense</Text>
             <FlexRow spacing="12">
                 <Badge color="info" fill="solid" caption="Info" />
diff --git a/app/src/docs/_examples/badge/Styles.example.tsx b/app/src/docs/_examples/badge/Styles.example.tsx
index e25530548e..ed54d9c3f5 100644
--- a/app/src/docs/_examples/badge/Styles.example.tsx
+++ b/app/src/docs/_examples/badge/Styles.example.tsx
@@ -4,11 +4,11 @@ import { Badge, FlexRow, Panel, Text } from '@epam/uui';
 export default function StylesExample() {
     return (
         <FlexRow rawProps={ { style: { width: '100%' } } }>
-            <Panel background="surface" style={ { rowGap: '18px', marginRight: '12px', padding: '12px', flex: '0 1 auto' } }>
+            <Panel background="surface-main" style={ { rowGap: '18px', marginRight: '12px', padding: '12px', flex: '0 1 auto' } }>
                 <Badge color="info" fill="solid" caption="Solid" />
                 <Badge color="info" fill="outline" caption="Halftone" />
             </Panel>
-            <Panel background="surface" style={ { rowGap: '18px', padding: '12px', flex: '1 1 auto' } }>
+            <Panel background="surface-main" style={ { rowGap: '18px', padding: '12px', flex: '1 1 auto' } }>
                 <Text fontSize="14">Mostly used as an accent, primary information or feature </Text>
                 <Text fontSize="14">Mostly used as secondary information or feature </Text>
             </Panel>
diff --git a/app/src/docs/_examples/badge/Types.example.tsx b/app/src/docs/_examples/badge/Types.example.tsx
index c76ace5e12..1f953ea210 100644
--- a/app/src/docs/_examples/badge/Types.example.tsx
+++ b/app/src/docs/_examples/badge/Types.example.tsx
@@ -7,7 +7,7 @@ import { ReactComponent as navigationDownIcon } from '@epam/assets/icons/common/
 export default function TypesExample() {
     return (
         <>
-            <Panel background="surface" style={ { rowGap: '18px', padding: '12px', flex: '1 1 auto' } }>
+            <Panel background="surface-main" style={ { rowGap: '18px', padding: '12px', flex: '1 1 auto' } }>
                 <FlexRow spacing="18">
                     <Badge icon={ mediaIcon } color="warning" fill="outline" caption="Video" />
                     <Text fontSize="14">Use as an attribute or label</Text>
@@ -21,7 +21,7 @@ export default function TypesExample() {
                     <Text fontSize="14">Filter chips</Text>
                 </FlexRow>
             </Panel>
-            <Panel background="surface" style={ { rowGap: '18px', padding: '12px', flex: '1 1 auto' } }>
+            <Panel background="surface-main" style={ { rowGap: '18px', padding: '12px', flex: '1 1 auto' } }>
                 <FlexRow spacing="18">
                     <Badge count={ 25 } color="critical" fill="solid" caption="Rejected" onClick={ () => {} } />
                     <Text fontSize="14">Quick filters selection with informer</Text>
diff --git a/app/src/docs/_examples/button/Toggler.example.tsx b/app/src/docs/_examples/button/Toggler.example.tsx
index 6d1b3d51d6..88f1362345 100644
--- a/app/src/docs/_examples/button/Toggler.example.tsx
+++ b/app/src/docs/_examples/button/Toggler.example.tsx
@@ -18,7 +18,7 @@ export default function ButtonAsToggler() {
         <FlexRow spacing="12">
             <Dropdown
                 renderBody={ (props) => (
-                    <Panel background="surface" { ...props }>
+                    <Panel background="surface-main" { ...props }>
                         some dropdown content
                     </Panel>
                 ) }
diff --git a/app/src/docs/_examples/common/Card.example.tsx b/app/src/docs/_examples/common/Card.example.tsx
index 41ca3b6ea1..6932465569 100644
--- a/app/src/docs/_examples/common/Card.example.tsx
+++ b/app/src/docs/_examples/common/Card.example.tsx
@@ -6,7 +6,7 @@ import css from './CardExample.module.scss';
 
 export default function AttributesExample() {
     return (
-        <Panel background="surface" shadow cx={ css.container }>
+        <Panel background="surface-main" shadow cx={ css.container }>
             <div className={ css.wrapper }>
                 <FlexRow>
                     <Avatar size="60" alt="avatar" img="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4" />
diff --git a/app/src/docs/_examples/common/CardExample.module.scss b/app/src/docs/_examples/common/CardExample.module.scss
index 2e4562d7e5..444e1146f0 100644
--- a/app/src/docs/_examples/common/CardExample.module.scss
+++ b/app/src/docs/_examples/common/CardExample.module.scss
@@ -23,5 +23,5 @@
     width: 100%;
     margin-top: 3px;
     margin-bottom: 3px;
-    border-bottom: 1px solid $gray30;
+    border-bottom: 1px solid var(--uui-divider);
 }
diff --git a/app/src/docs/_examples/contexts/AnalyticsContextEvents.example.tsx b/app/src/docs/_examples/contexts/AnalyticsContextEvents.example.tsx
index 720faedb50..39fe8d08e6 100644
--- a/app/src/docs/_examples/contexts/AnalyticsContextEvents.example.tsx
+++ b/app/src/docs/_examples/contexts/AnalyticsContextEvents.example.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { Button, Switch } from '@epam/promo';
+import { Button, Switch } from '@epam/uui';
 import { AnalyticsEvent, useUuiContext } from '@epam/uui-core';
 
 export default function AnalyticsContextEvents() {
diff --git a/app/src/docs/_examples/contexts/ApiContextBase.example.tsx b/app/src/docs/_examples/contexts/ApiContextBase.example.tsx
index 9f3e72265c..0d7a8fca73 100644
--- a/app/src/docs/_examples/contexts/ApiContextBase.example.tsx
+++ b/app/src/docs/_examples/contexts/ApiContextBase.example.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { LinkButton, Text, FlexRow } from '@epam/promo';
+import { LinkButton, Text, FlexRow } from '@epam/uui';
 import { useUuiContext } from '@epam/uui-core';
 
 export default function ApiContextBaseExample() {
diff --git a/app/src/docs/_examples/contexts/ApiContextThrowUUIError.example.tsx b/app/src/docs/_examples/contexts/ApiContextThrowUUIError.example.tsx
index bb9a535c68..e34464b62a 100644
--- a/app/src/docs/_examples/contexts/ApiContextThrowUUIError.example.tsx
+++ b/app/src/docs/_examples/contexts/ApiContextThrowUUIError.example.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { LinkButton } from '@epam/promo';
+import { LinkButton } from '@epam/uui';
 import { useUuiContext, UuiError } from '@epam/uui-core';
 
 /**
diff --git a/app/src/docs/_examples/contexts/NotificationContext.example.tsx b/app/src/docs/_examples/contexts/NotificationContext.example.tsx
index 3790dad5ea..6755656496 100644
--- a/app/src/docs/_examples/contexts/NotificationContext.example.tsx
+++ b/app/src/docs/_examples/contexts/NotificationContext.example.tsx
@@ -14,7 +14,7 @@ import {
     ErrorNotification,
     NotificationCard,
     RichTextView,
-} from '@epam/promo';
+} from '@epam/uui';
 import { ArrayDataSource, INotification, useUuiContext } from '@epam/uui-core';
 import { FlexCell } from '@epam/uui-components';
 
@@ -31,7 +31,7 @@ export default function NotificationContextExample() {
             .show(
                 (props: INotification) => (
                     <SuccessNotification { ...props }>
-                        <Text size="36" font="sans" fontSize="14">
+                        <Text size="36" fontSize="14">
                             Success notification
                         </Text>
                     </SuccessNotification>
@@ -57,7 +57,7 @@ export default function NotificationContextExample() {
                             },
                         ] }
                     >
-                        <Text size="36" font="sans" fontSize="14">
+                        <Text size="36" fontSize="14">
                             Warning notification with some buttons
                         </Text>
                     </WarningNotification>
@@ -69,7 +69,7 @@ export default function NotificationContextExample() {
                     .show(
                         (props: INotification) => (
                             <SuccessNotification { ...props }>
-                                <Text size="36" font="sans" fontSize="14">
+                                <Text size="36" fontSize="14">
                                     It`s Ok!
                                 </Text>
                             </SuccessNotification>
@@ -94,7 +94,7 @@ export default function NotificationContextExample() {
                             },
                         ] }
                     >
-                        <Text size="36" font="sans" fontSize="14">
+                        <Text size="36" fontSize="14">
                             Error notification with looooooooong looooooong text about lorem ispum dolor
                         </Text>
                     </ErrorNotification>
@@ -108,7 +108,7 @@ export default function NotificationContextExample() {
         uuiNotifications
             .show(
                 (props: INotification): ReactNode => (
-                    <NotificationCard { ...props } color="gray60">
+                    <NotificationCard { ...props } color="info">
                         <RichTextView>
                             <h3>Title</h3>
                             <p>
@@ -131,14 +131,14 @@ export default function NotificationContextExample() {
         uuiNotifications
             .show(
                 (props: INotification): ReactNode => (
-                    <Panel style={ { width: '420px', background: 'white' } } shadow>
+                    <Panel style={ { width: '420px' } } shadow>
                         <ModalHeader title="Custom notification" onClose={ props.onClose } />
-                        <FlexRow padding="24" background="none" spacing="12">
+                        <FlexRow padding="24" spacing="12">
                             <LabeledInput size="36" label="Promotion Cycle">
                                 <TextInput value="" size="36" onValueChange={ () => {} } />
                             </LabeledInput>
                         </FlexRow>
-                        <FlexRow padding="24" background="none" spacing="12">
+                        <FlexRow padding="24" spacing="12">
                             <LabeledInput size="36" label="Discipline">
                                 <TextInput value="" size="36" onValueChange={ () => {} } />
                             </LabeledInput>
@@ -146,8 +146,8 @@ export default function NotificationContextExample() {
                         <FlexSpacer />
                         <FlexRow padding="24" vPadding="24" spacing="12">
                             <FlexSpacer />
-                            <Button color="gray" onClick={ props.onClose } caption="Cancel" />
-                            <Button color="green" caption="Confirm" onClick={ props.onSuccess } />
+                            <Button color="accent" onClick={ props.onClose } caption="Cancel" />
+                            <Button color="accent" caption="Confirm" onClick={ props.onSuccess } />
                         </FlexRow>
                     </Panel>
                 ),
@@ -160,38 +160,38 @@ export default function NotificationContextExample() {
     return (
         <div>
             <FlexRow size="48" padding="12" spacing="12">
-                <Button caption="Click" size="24" color="green" fill="white" onClick={ handleSuccess } />
-                <Text size="36" font="sans-semibold">
+                <Button caption="Click" size="24" color="accent" fill="outline" onClick={ handleSuccess } />
+                <Text size="36" fontWeight="600">
                     Simple notification
                 </Text>
             </FlexRow>
             <FlexRow size="48" padding="12" spacing="12">
-                <Button caption="Click" size="24" color="blue" fill="white" onClick={ handleWarning } />
-                <Text size="36" font="sans-semibold">
+                <Button caption="Click" size="24" color="primary" fill="outline" onClick={ handleWarning } />
+                <Text size="36" fontWeight="600">
                     Notification with additional buttons
                 </Text>
             </FlexRow>
             <FlexRow size="48" padding="12" spacing="12">
-                <Button caption="Click" size="24" color="red" fill="white" onClick={ handleError } />
-                <Text size="36" font="sans-semibold">
+                <Button caption="Click" size="24" color="critical" fill="outline" onClick={ handleError } />
+                <Text size="36" fontWeight="600">
                     Huge notification with long title and several rows with buttons
                 </Text>
             </FlexRow>
             <FlexRow size="48" padding="12" spacing="12">
-                <Button caption="Click" size="24" color="gray" fill="white" onClick={ customNotificationHandler } />
-                <Text size="36" font="sans-semibold">
+                <Button caption="Click" size="24" color="accent" fill="outline" onClick={ customNotificationHandler } />
+                <Text size="36" fontWeight="600">
                     All custom notification
                 </Text>
             </FlexRow>
             <FlexRow size="48" padding="12" spacing="12">
-                <Button caption="Click" size="24" color="gray" fill="white" onClick={ handleSnackWithRichText } />
-                <Text size="36" font="sans-semibold">
+                <Button caption="Click" size="24" color="secondary" fill="outline" onClick={ handleSnackWithRichText } />
+                <Text size="36" fontWeight="600">
                     Notification with RichTextView
                 </Text>
             </FlexRow>
 
             <FlexRow size="48" padding="12" spacing="12">
-                <Text size="36" font="sans-semibold">
+                <Text size="36" fontWeight="600">
                     Position of pop-up:
                 </Text>
                 <FlexCell width={ 200 }>
diff --git a/app/src/docs/_examples/controlGroup/Basic.example.tsx b/app/src/docs/_examples/controlGroup/Basic.example.tsx
index cf4e0c8c36..6ecf1a5795 100644
--- a/app/src/docs/_examples/controlGroup/Basic.example.tsx
+++ b/app/src/docs/_examples/controlGroup/Basic.example.tsx
@@ -5,7 +5,7 @@ import { ReactComponent as menuIcon } from '@epam/assets/icons/common/navigation
 export default function BasicExample() {
     const renderBody = () => {
         return (
-            <Panel background="surface" shadow={ true }>
+            <Panel background="surface-main" shadow={ true }>
                 <DropdownMenuButton caption="Duplicate" onClick={ () => {} } />
                 <DropdownMenuButton caption="Rename" onClick={ () => {} } />
                 <DropdownMenuButton caption="Delete" onClick={ () => {} } />
diff --git a/app/src/docs/_examples/dataSources/ArrayDataSourceSearch.example.tsx b/app/src/docs/_examples/dataSources/ArrayDataSourceSearch.example.tsx
index a2b1ff7ae5..324d05695d 100644
--- a/app/src/docs/_examples/dataSources/ArrayDataSourceSearch.example.tsx
+++ b/app/src/docs/_examples/dataSources/ArrayDataSourceSearch.example.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { DataSourceState, useArrayDataSource } from '@epam/uui-core';
-import { FlexRow, Panel, TextInput } from '@epam/promo';
+import { FlexRow, Panel, TextInput } from '@epam/uui';
 import { DataSourceViewer } from '@epam/uui-docs';
 
 const items = Array(100).fill(0).map((_, index) => ({
diff --git a/app/src/docs/_examples/dataSources/DataSourceViewer.code.example.tsx b/app/src/docs/_examples/dataSources/DataSourceViewer.code.example.tsx
index af7be9d54a..3ca5c6924c 100644
--- a/app/src/docs/_examples/dataSources/DataSourceViewer.code.example.tsx
+++ b/app/src/docs/_examples/dataSources/DataSourceViewer.code.example.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { DataPickerRow, VirtualList, Text, Panel, LinkButton } from '@epam/promo';
+import { DataPickerRow, VirtualList, Text, Panel, LinkButton } from '@epam/uui';
 import { FlexRow, PickerItem } from '@epam/uui';
 import { DataRowProps, DataSourceState, IDataSource, IEditable } from '@epam/uui-core';
 
diff --git a/app/src/docs/_examples/dataSources/LazyDataSourceFlattenSearchResults.example.tsx b/app/src/docs/_examples/dataSources/LazyDataSourceFlattenSearchResults.example.tsx
index 8091f8b51f..be8c00ce4d 100644
--- a/app/src/docs/_examples/dataSources/LazyDataSourceFlattenSearchResults.example.tsx
+++ b/app/src/docs/_examples/dataSources/LazyDataSourceFlattenSearchResults.example.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Panel, TextInput, FlexRow } from '@epam/promo';
+import { Panel, TextInput, FlexRow } from '@epam/uui';
 import { DataQueryFilter, DataSourceState, useLazyDataSource, useUuiContext } from '@epam/uui-core';
 import { Location } from '@epam/uui-docs';
 import { DataSourceViewer } from '@epam/uui-docs';
diff --git a/app/src/docs/_examples/dataSources/RowOptionsOnClick.example.tsx b/app/src/docs/_examples/dataSources/RowOptionsOnClick.example.tsx
index e11e27cb44..91c5a837ad 100644
--- a/app/src/docs/_examples/dataSources/RowOptionsOnClick.example.tsx
+++ b/app/src/docs/_examples/dataSources/RowOptionsOnClick.example.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { SuccessNotification, Text } from '@epam/promo';
+import { SuccessNotification, Text } from '@epam/uui';
 import { DataSourceState, INotification, useArrayDataSource, useUuiContext } from '@epam/uui-core';
 import { DataSourceTableViewer, dataSourceTextColumns } from '@epam/uui-docs';
 
@@ -26,7 +26,7 @@ export default function RowOptionsOnClickExample() {
             .show(
                 (props: INotification) => (
                     <SuccessNotification { ...props }>
-                        <Text size="36" font="sans" fontSize="14">
+                        <Text size="36" fontSize="14">
                             {`${name} was clicked`}
                         </Text>
                     </SuccessNotification>
diff --git a/app/src/docs/_examples/dnd/Basic.example.tsx b/app/src/docs/_examples/dnd/Basic.example.tsx
index f510aba83e..1df699cd98 100644
--- a/app/src/docs/_examples/dnd/Basic.example.tsx
+++ b/app/src/docs/_examples/dnd/Basic.example.tsx
@@ -69,7 +69,7 @@ export default function DndMaterial() {
             render={ (params: DndActorRenderParams) => (
                 <div ref={ params.ref } { ...params.eventHandlers } className={ cx(css.dragElement, params.classNames) }>
                     <Panel
-                        background="surface"
+                        background="surface-main"
                         cx={ cx(css.dndItem, {
                             [uuiDndState.dragGhost]: params.isDragGhost,
                         }) }
diff --git a/app/src/docs/_examples/dropdown/Basic.example.tsx b/app/src/docs/_examples/dropdown/Basic.example.tsx
index d9b1061801..941ba5f015 100644
--- a/app/src/docs/_examples/dropdown/Basic.example.tsx
+++ b/app/src/docs/_examples/dropdown/Basic.example.tsx
@@ -23,7 +23,7 @@ export default function BasicDropdownExample() {
         return (
             <DropdownContainer showArrow={ true } cx={ css.container } { ...props }>
                 <FlexRow alignItems="top" padding="12" vPadding="24">
-                    <Panel background="surface" style={ { width: '100%' } }>
+                    <Panel background="surface-main" style={ { width: '100%' } }>
                         <FlexRow cx={ css.containerItem } padding="6">
                             <Avatar size="48" alt="avatar" img="https://api.dicebear.com/7.x/pixel-art/svg?seed=Coco&radius=50&backgroundColor=b6e3f4" />
 
@@ -45,7 +45,7 @@ export default function BasicDropdownExample() {
                         </FlexRow>
 
                         <FlexRow padding="6">
-                            <Panel background="surface">
+                            <Panel background="surface-main">
                                 <FlexRow alignItems="center" spacing="6">
                                     <Badge cx={ css.badge } color="success" size="18" icon={ notificationIcon } caption="Available" />
                                     <Badge cx={ css.badge } color="warning" size="18" caption="Bench" />
@@ -62,7 +62,7 @@ export default function BasicDropdownExample() {
                 <div className={ css.divider }></div>
 
                 <FlexRow padding="12" vPadding="24">
-                    <Panel background="surface">
+                    <Panel background="surface-main">
                         <FlexRow alignItems="center" spacing="12" padding="6">
                             <IconButton icon={ telescopeIcon } color="info" onClick={ () => null } />
                             <IconButton icon={ chatIcon } color="info" onClick={ () => null } />
@@ -131,7 +131,7 @@ export default function BasicDropdownExample() {
                 <div className={ css.divider }></div>
 
                 <FlexRow padding="18" vPadding="24">
-                    <Panel background="surface">
+                    <Panel background="surface-main">
                         <Text cx={ css.text } lineHeight="18" fontSize="12" color="secondary">
                             Reporting to
                         </Text>
diff --git a/app/src/docs/_examples/dropdownContainer/Basic.example.tsx b/app/src/docs/_examples/dropdownContainer/Basic.example.tsx
index d5b5689f64..67fc6624cf 100644
--- a/app/src/docs/_examples/dropdownContainer/Basic.example.tsx
+++ b/app/src/docs/_examples/dropdownContainer/Basic.example.tsx
@@ -31,7 +31,7 @@ export default function BasicExample() {
     const renderSecondDropdownBody = (props: DropdownBodyProps) => {
         return (
             <DropdownContainer showArrow={ true } width="auto" { ...props }>
-                <Panel background="surface">
+                <Panel background="surface-main">
                     <DropdownMenuButton caption="Export" icon={ ExportIcon } onClick={ () => {} } />
                     <DropdownMenuButton caption="Delete" icon={ DeleteIcon } onClick={ () => {} } />
                     <DropdownMenuButton caption="Phone" icon={ phoneIcon } onClick={ () => {} } />
diff --git a/app/src/docs/_examples/flexItems/FlexCell.example.tsx b/app/src/docs/_examples/flexItems/FlexCell.example.tsx
index 1f6f73e0ec..2a4dffd640 100644
--- a/app/src/docs/_examples/flexItems/FlexCell.example.tsx
+++ b/app/src/docs/_examples/flexItems/FlexCell.example.tsx
@@ -6,7 +6,7 @@ export default function FlexCellExample() {
     const [value, onValueChange] = useState(null);
 
     return (
-        <Panel background="surface" shadow cx={ css.root }>
+        <Panel background="surface-main" shadow cx={ css.root }>
             <FlexRow padding="12">
                 <Text fontWeight="600" size="48">
                     Identity Document
diff --git a/app/src/docs/_examples/flexItems/FlexSpacer.example.tsx b/app/src/docs/_examples/flexItems/FlexSpacer.example.tsx
index af376414f4..e29a121b46 100644
--- a/app/src/docs/_examples/flexItems/FlexSpacer.example.tsx
+++ b/app/src/docs/_examples/flexItems/FlexSpacer.example.tsx
@@ -8,7 +8,7 @@ export default function FlexSpacerExample() {
     const [value, onValueChange] = useState(null);
 
     return (
-        <Panel background="surface" shadow cx={ css.root }>
+        <Panel background="surface-main" shadow cx={ css.root }>
             <FlexRow padding="12" vPadding="18">
                 <Text fontWeight="600" size="48">
                     User settings
diff --git a/app/src/docs/_examples/flexItems/Panel.example.tsx b/app/src/docs/_examples/flexItems/Panel.example.tsx
index fccd84aa65..4791212d85 100644
--- a/app/src/docs/_examples/flexItems/Panel.example.tsx
+++ b/app/src/docs/_examples/flexItems/Panel.example.tsx
@@ -4,7 +4,7 @@ import { demoData } from '@epam/uui-docs';
 
 export default function BasicExample() {
     return (
-        <Panel background="surface" margin="24" style={ { width: '400px' } } shadow>
+        <Panel background="surface-main" margin="24" style={ { width: '400px' } } shadow>
             <FlexRow padding="12" vPadding="12" borderBottom>
                 <FlexCell width="100%">
                     <Text size="36" color="secondary">
diff --git a/app/src/docs/_examples/linkButton/Default.example.tsx b/app/src/docs/_examples/linkButton/Default.example.tsx
index d1f9b52088..089bf8ab1b 100644
--- a/app/src/docs/_examples/linkButton/Default.example.tsx
+++ b/app/src/docs/_examples/linkButton/Default.example.tsx
@@ -5,17 +5,17 @@ import { ReactComponent as navigationBack } from '@epam/assets/icons/common/navi
 import css from './DefaultExample.module.scss';
 
 export default function DefaultLinkButtonExample() {
-    const renderDropdownBody = () => <Panel background="surface" shadow><Text>Dropdown body</Text></Panel>;
+    const renderDropdownBody = () => <Panel background="surface-main" shadow><Text>Dropdown body</Text></Panel>;
 
     return (
         <div className={ css.wrapper }>
-            <Panel background="surface" cx={ css.components }>
+            <Panel background="surface-main" cx={ css.components }>
                 <LinkButton caption="VIEW DETAILS" link={ { pathname: '/' } } />
                 <LinkButton caption="BACK TO CATALOG" link={ { pathname: '/' } } icon={ navigationBack } />
                 <Dropdown renderBody={ renderDropdownBody } renderTarget={ (props: IDropdownToggler) => <LinkButton caption="SORT BY" { ...props } /> } />
             </Panel>
 
-            <Panel background="surface" cx={ css.descriptions }>
+            <Panel background="surface-main" cx={ css.descriptions }>
                 <Text>Simple action. Can also be used for redirection</Text>
                 <Text>Different icons support the meaning of an action. Can be used for a redirection or action</Text>
                 <Text>Chevron-down icon on the right makes a link button a toggler for Dropdowns</Text>
diff --git a/app/src/docs/_examples/modals/Basic.example.tsx b/app/src/docs/_examples/modals/Basic.example.tsx
index 7967df9912..53b15a7a4a 100644
--- a/app/src/docs/_examples/modals/Basic.example.tsx
+++ b/app/src/docs/_examples/modals/Basic.example.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 import { IModal, useUuiContext } from '@epam/uui-core';
 import { demoData } from '@epam/uui-docs';
-import { ModalBlocker, ModalFooter, ModalHeader, ModalWindow, FlexRow, FlexSpacer, Panel, ScrollBars, Text, Button, SuccessNotification, WarningNotification } from '@epam/uui';
+import {
+    ModalBlocker, ModalFooter, ModalHeader, ModalWindow, FlexRow, FlexSpacer, Panel, ScrollBars, Text, Button,
+    SuccessNotification, WarningNotification,
+} from '@epam/uui';
 
 export default function BasicModalExampleToggler() {
     const { uuiModals, uuiNotifications } = useUuiContext();
@@ -41,7 +44,7 @@ export function BasicModalExample(modalProps: IModal<string>) {
     return (
         <ModalBlocker { ...modalProps }>
             <ModalWindow>
-                <Panel background="surface">
+                <Panel background="surface-main">
                     <ModalHeader title="Simple modal example " onClose={ () => modalProps.abort() } />
                     <ScrollBars hasTopShadow hasBottomShadow>
                         <FlexRow padding="24">
diff --git a/app/src/docs/_examples/modals/DisableClickOutsideAndCross.example.tsx b/app/src/docs/_examples/modals/DisableClickOutsideAndCross.example.tsx
index 4dd68ea681..e05c620cf2 100644
--- a/app/src/docs/_examples/modals/DisableClickOutsideAndCross.example.tsx
+++ b/app/src/docs/_examples/modals/DisableClickOutsideAndCross.example.tsx
@@ -7,7 +7,7 @@ function ModalWithDisabledClickOutsideAndCross(props: IModal<string>) {
     return (
         <ModalBlocker disallowClickOutside { ...props } disableCloseByEsc={ true }>
             <ModalWindow>
-                <Panel background="surface">
+                <Panel background="surface-main">
                     <ModalHeader title="Simple modal example " />
                     <ScrollBars hasTopShadow hasBottomShadow>
                         <FlexRow padding="24" vPadding="12">
diff --git a/app/src/docs/_examples/modals/ModalWithForm.example.tsx b/app/src/docs/_examples/modals/ModalWithForm.example.tsx
index 014ffa30c6..bd84221081 100644
--- a/app/src/docs/_examples/modals/ModalWithForm.example.tsx
+++ b/app/src/docs/_examples/modals/ModalWithForm.example.tsx
@@ -40,7 +40,7 @@ function ModalWithFormExample(modalProps: IModal<Person>) {
             <ModalWindow>
                 <ModalHeader borderBottom title="New committee" onClose={ () => close().then(modalProps.abort).catch(() => {}) } />
                 <ScrollBars>
-                    <Panel background="surface">
+                    <Panel background="surface-main">
                         <FlexRow padding="24" vPadding="12">
                             <FlexCell grow={ 1 }>
                                 <LabeledInput label="First Name" { ...lens.prop('firstName').toProps() }>
diff --git a/app/src/docs/_examples/pickerInput/ConfigurePortalTargetAndPlacement.example.tsx b/app/src/docs/_examples/pickerInput/ConfigurePortalTargetAndPlacement.example.tsx
index a797cbd18b..0ac2f384e3 100644
--- a/app/src/docs/_examples/pickerInput/ConfigurePortalTargetAndPlacement.example.tsx
+++ b/app/src/docs/_examples/pickerInput/ConfigurePortalTargetAndPlacement.example.tsx
@@ -24,7 +24,7 @@ export default function ConfigurePortalTargetAndPlacement() {
             closeOnEsc={ false }
             shards={ [portalTargetRef] }
         >
-            <Panel background="surface">
+            <Panel background="surface-main">
                 <FlexRow alignItems="top" padding="18" vPadding="24">
                     <FlexCell grow={ 1 } ref={ portalTargetRef }>
                         <Text fontSize="18" lineHeight="24" color="brand">
diff --git a/app/src/docs/_examples/progressBar/Basic.example.tsx b/app/src/docs/_examples/progressBar/Basic.example.tsx
index adcbf34527..e9be0f27ca 100644
--- a/app/src/docs/_examples/progressBar/Basic.example.tsx
+++ b/app/src/docs/_examples/progressBar/Basic.example.tsx
@@ -24,7 +24,7 @@ export default function BasicProgressBarExample() {
     }, []);
 
     return (
-        <Panel background="surface" style={ { flexBasis: '100%' } } cx={ css.root }>
+        <Panel background="surface-main" style={ { flexBasis: '100%' } } cx={ css.root }>
             <ProgressBar cx={ css.bar } progress={ progress } hideLabel />
             <ProgressBar cx={ css.bar } progress={ progress } size="18" />
             <ProgressBar cx={ css.bar } progress={ progress } size="24" striped />
diff --git a/app/src/docs/_examples/progressBar/IndeterminateBar.example.tsx b/app/src/docs/_examples/progressBar/IndeterminateBar.example.tsx
index af379f448c..9639c9849d 100644
--- a/app/src/docs/_examples/progressBar/IndeterminateBar.example.tsx
+++ b/app/src/docs/_examples/progressBar/IndeterminateBar.example.tsx
@@ -4,7 +4,7 @@ import css from './BasicExample.module.scss';
 
 export default function CustomLabelProgressBarExample() {
     return (
-        <Panel background="surface" style={ { flexBasis: '100%' } } cx={ css.root }>
+        <Panel background="surface-main" style={ { flexBasis: '100%' } } cx={ css.root }>
             <IndeterminateBar />
             <IndeterminateBar size="18" />
             <IndeterminateBar size="24" />
diff --git a/app/src/docs/_examples/progressBar/IndicatorBar.example.tsx b/app/src/docs/_examples/progressBar/IndicatorBar.example.tsx
index fcac92ad85..d8a50e34b1 100644
--- a/app/src/docs/_examples/progressBar/IndicatorBar.example.tsx
+++ b/app/src/docs/_examples/progressBar/IndicatorBar.example.tsx
@@ -23,7 +23,7 @@ export default function CustomLabelProgressBarExample() {
         };
     }, []);
     return (
-        <Panel background="surface" style={ { flexBasis: '100%' } } cx={ css.root }>
+        <Panel background="surface-main" style={ { flexBasis: '100%' } } cx={ css.root }>
             <IndicatorBar progress={ progress } />
             <IndicatorBar />
         </Panel>
diff --git a/app/src/docs/_examples/statusIndicator/WithTable.example.tsx b/app/src/docs/_examples/statusIndicator/WithTable.example.tsx
index 5fa9b75ed5..cfe3aa1def 100644
--- a/app/src/docs/_examples/statusIndicator/WithTable.example.tsx
+++ b/app/src/docs/_examples/statusIndicator/WithTable.example.tsx
@@ -70,7 +70,7 @@ export default function WithTableExample() {
     const view = dataSource.useView(tableState, setTableState);
 
     return (
-        <Panel background="surface" style={ { height: '400px' } }>
+        <Panel background="surface-main" style={ { height: '400px' } }>
             <DataTable getRows={ view.getVisibleRows } columns={ personColumns } value={ tableState } onValueChange={ setTableState } { ...view.getListProps() } />
         </Panel>
     );
diff --git a/app/src/docs/_examples/tables/ArrayTable.example.tsx b/app/src/docs/_examples/tables/ArrayTable.example.tsx
index 96ca3ad788..6982c43132 100644
--- a/app/src/docs/_examples/tables/ArrayTable.example.tsx
+++ b/app/src/docs/_examples/tables/ArrayTable.example.tsx
@@ -43,7 +43,7 @@ export default function ArrayDataTableExample() {
     );
 
     return (
-        <Panel background="surface" shadow cx={ css.container }>
+        <Panel background="surface-main" shadow cx={ css.container }>
             <DataTable
                 { ...view.getListProps() }
                 getRows={ view.getVisibleRows }
diff --git a/app/src/docs/_examples/tables/AsyncTable.example.tsx b/app/src/docs/_examples/tables/AsyncTable.example.tsx
index bb49c24048..bd4d77416f 100644
--- a/app/src/docs/_examples/tables/AsyncTable.example.tsx
+++ b/app/src/docs/_examples/tables/AsyncTable.example.tsx
@@ -74,7 +74,7 @@ export default function ProductTable() {
     );
 
     return (
-        <Panel background="surface" shadow cx={ css.container }>
+        <Panel background="surface-main" shadow cx={ css.container }>
             <DataTable
                 { ...view.getListProps() }
                 getRows={ view.getVisibleRows }
diff --git a/app/src/docs/_examples/tables/ColumnFiltersTable.example.tsx b/app/src/docs/_examples/tables/ColumnFiltersTable.example.tsx
index c599906780..74eac41355 100644
--- a/app/src/docs/_examples/tables/ColumnFiltersTable.example.tsx
+++ b/app/src/docs/_examples/tables/ColumnFiltersTable.example.tsx
@@ -116,7 +116,7 @@ export default function ColumnsConfigurationDataTableExample() {
     const view = dataSource.useView(tableState, setTableState);
 
     return (
-        <Panel background="surface" shadow cx={ css.container }>
+        <Panel background="surface-main" shadow cx={ css.container }>
             <DataTable
                 getRows={ view.getVisibleRows }
                 columns={ personColumns }
diff --git a/app/src/docs/_examples/tables/ColumnsConfig.example.tsx b/app/src/docs/_examples/tables/ColumnsConfig.example.tsx
index 4eec73f803..bc89b8c662 100644
--- a/app/src/docs/_examples/tables/ColumnsConfig.example.tsx
+++ b/app/src/docs/_examples/tables/ColumnsConfig.example.tsx
@@ -99,7 +99,7 @@ export default function ColumnsConfigurationDataTableExample() {
     });
 
     return (
-        <Panel background="surface" shadow cx={ css.container }>
+        <Panel background="surface-main" shadow cx={ css.container }>
             <DataTable
                 value={ tableState }
                 onValueChange={ handleTableStateChange }
diff --git a/app/src/docs/_examples/tables/EditableTable.example.tsx b/app/src/docs/_examples/tables/EditableTable.example.tsx
index bafe6b9afe..48bba8bb9a 100644
--- a/app/src/docs/_examples/tables/EditableTable.example.tsx
+++ b/app/src/docs/_examples/tables/EditableTable.example.tsx
@@ -181,7 +181,7 @@ export default function EditableTableExample() {
 
     // Render the table, passing the prepared data to it in form of getVisibleRows callback, list props (e.g. items counts)
     return (
-        <Panel background="surface" shadow>
+        <Panel background="surface-main" shadow>
             {/* Render a panel with Save/Revert buttons to control the form */}
             <FlexRow spacing="12" padding="12" vPadding="12" borderBottom>
                 <FlexCell width="auto">
diff --git a/app/src/docs/_examples/tables/FiltersPanelBasic.example.tsx b/app/src/docs/_examples/tables/FiltersPanelBasic.example.tsx
index 6d1eec4fd7..2e4e4c013c 100644
--- a/app/src/docs/_examples/tables/FiltersPanelBasic.example.tsx
+++ b/app/src/docs/_examples/tables/FiltersPanelBasic.example.tsx
@@ -177,7 +177,7 @@ export default function FiltersPanelExample() {
     const view = dataSource.useView(tableState, setTableState);
 
     return (
-        <Panel background="surface" shadow style={ { height: '400px' } }>
+        <Panel background="surface-main" shadow style={ { height: '400px' } }>
             <FlexRow padding="12" vPadding="24" rawProps={ { style: { flexWrap: 'wrap', gap: '3px' } } }>
                 <FiltersPanel filters={ filtersConfig } tableState={ tableState } setTableState={ setTableState } />
             </FlexRow>
diff --git a/app/src/docs/_examples/tables/LazyTable.example.tsx b/app/src/docs/_examples/tables/LazyTable.example.tsx
index bd6b67d4a5..b87f66c280 100644
--- a/app/src/docs/_examples/tables/LazyTable.example.tsx
+++ b/app/src/docs/_examples/tables/LazyTable.example.tsx
@@ -115,7 +115,7 @@ export default function CitiesTable() {
     });
 
     return (
-        <Panel background="surface" shadow cx={ css.container }>
+        <Panel background="surface-main" shadow cx={ css.container }>
             <DataTable
                 value={ tableState }
                 onValueChange={ setTableState }
diff --git a/app/src/docs/_examples/tables/PagedTable.example.tsx b/app/src/docs/_examples/tables/PagedTable.example.tsx
index 874eb982c3..446017c3dd 100644
--- a/app/src/docs/_examples/tables/PagedTable.example.tsx
+++ b/app/src/docs/_examples/tables/PagedTable.example.tsx
@@ -72,7 +72,7 @@ export default function PagedTable() {
     const listProps = view.getListProps();
 
     return (
-        <Panel background="surface" shadow cx={ css.container }>
+        <Panel background="surface-main" shadow cx={ css.container }>
             <DataTable
                 { ...listProps }
                 getRows={ view.getVisibleRows }
diff --git a/app/src/docs/_examples/tables/PagedTableWithSelectAll.example.tsx b/app/src/docs/_examples/tables/PagedTableWithSelectAll.example.tsx
index 17c6a4d9cd..3daf4c2e0f 100644
--- a/app/src/docs/_examples/tables/PagedTableWithSelectAll.example.tsx
+++ b/app/src/docs/_examples/tables/PagedTableWithSelectAll.example.tsx
@@ -75,7 +75,7 @@ export default function PagedTableWithSelectAll() {
     }), [selectAll, state.checked?.length, listProps.totalCount]);
 
     return (
-        <Panel background="surface" shadow cx={ css.container }>
+        <Panel background="surface-main" shadow cx={ css.container }>
             <DataTable
                 { ...listProps }
                 getRows={ view.getVisibleRows }
diff --git a/app/src/docs/_examples/tables/PresetsPanelBasic.example.tsx b/app/src/docs/_examples/tables/PresetsPanelBasic.example.tsx
index c4e4192a0f..f2e0c28c44 100644
--- a/app/src/docs/_examples/tables/PresetsPanelBasic.example.tsx
+++ b/app/src/docs/_examples/tables/PresetsPanelBasic.example.tsx
@@ -133,7 +133,7 @@ export default function PresetsPanelExample() {
     const view = dataSource.useView(tableStateApi.tableState, tableStateApi.setTableState);
 
     return (
-        <Panel background="surface" shadow style={ { height: '400px' } }>
+        <Panel background="surface-main" shadow style={ { height: '400px' } }>
             <FlexRow>
                 <PresetsPanel { ...tableStateApi } />
             </FlexRow>
diff --git a/app/src/docs/_examples/tables/StyledColumns.example.tsx b/app/src/docs/_examples/tables/StyledColumns.example.tsx
index dcd01a4de7..1e0ee5b2ae 100644
--- a/app/src/docs/_examples/tables/StyledColumns.example.tsx
+++ b/app/src/docs/_examples/tables/StyledColumns.example.tsx
@@ -75,7 +75,7 @@ export default function StyledColumnsExample() {
     );
 
     return (
-        <Panel background="surface" shadow cx={ css.container }>
+        <Panel background="surface-main" shadow cx={ css.container }>
             <DataTable
                 { ...view.getListProps() }
                 getRows={ view.getVisibleRows }
diff --git a/app/src/docs/_examples/tables/TableWithCopying.example.tsx b/app/src/docs/_examples/tables/TableWithCopying.example.tsx
index 5346a2ab8f..f6969b12b3 100644
--- a/app/src/docs/_examples/tables/TableWithCopying.example.tsx
+++ b/app/src/docs/_examples/tables/TableWithCopying.example.tsx
@@ -134,7 +134,7 @@ export default function ProjectTimeReportDemo() {
     };
 
     return (
-        <Panel background="surface" shadow cx={ css.container }>
+        <Panel background="surface-main" shadow cx={ css.container }>
             <DataTable
                 headerTextCase="upper"
                 onCopy={ onCopy }
diff --git a/app/src/docs/_examples/tables/TableWithDnD.example.tsx b/app/src/docs/_examples/tables/TableWithDnD.example.tsx
index 8b958c6d89..6e13a5a4f5 100644
--- a/app/src/docs/_examples/tables/TableWithDnD.example.tsx
+++ b/app/src/docs/_examples/tables/TableWithDnD.example.tsx
@@ -66,7 +66,7 @@ export default function TableWithDnDExample() {
     );
 
     return (
-        <Panel background="surface" shadow cx={ css.container }>
+        <Panel background="surface-main" shadow cx={ css.container }>
             <DataTable
                 { ...view.getListProps() }
                 getRows={ view.getVisibleRows }
diff --git a/app/src/docs/_examples/tables/TreeTable.example.tsx b/app/src/docs/_examples/tables/TreeTable.example.tsx
index a06280b1aa..69a1e5d4cd 100644
--- a/app/src/docs/_examples/tables/TreeTable.example.tsx
+++ b/app/src/docs/_examples/tables/TreeTable.example.tsx
@@ -92,7 +92,7 @@ export default function TreeTableExample() {
     });
 
     return (
-        <Panel background="surface" shadow cx={ css.container } rawProps={ { role: 'tree_grid' } }>
+        <Panel background="surface-main" shadow cx={ css.container } rawProps={ { role: 'tree_grid' } }>
             <DataTable
                 getRows={ view.getVisibleRows }
                 { ...view.getListProps() }
diff --git a/app/src/docs/_examples/tables/useTableState/useTableState.example.tsx b/app/src/docs/_examples/tables/useTableState/useTableState.example.tsx
index 87ed44f5ac..bfbea69674 100644
--- a/app/src/docs/_examples/tables/useTableState/useTableState.example.tsx
+++ b/app/src/docs/_examples/tables/useTableState/useTableState.example.tsx
@@ -128,7 +128,7 @@ export default function FiltersPanelExample() {
     const view = dataSource.useView(tableState, setTableState);
 
     return (
-        <Panel background="surface" shadow style={ { height: '400px' } }>
+        <Panel background="surface-main" shadow style={ { height: '400px' } }>
             <FlexRow>
                 <PresetsPanel { ...tableStateApi } />
             </FlexRow>
diff --git a/app/src/docs/_examples/tables/useTableState/useTableStateWithIEditable.example.tsx b/app/src/docs/_examples/tables/useTableState/useTableStateWithIEditable.example.tsx
index f05d547f0a..3fb153c3f0 100644
--- a/app/src/docs/_examples/tables/useTableState/useTableStateWithIEditable.example.tsx
+++ b/app/src/docs/_examples/tables/useTableState/useTableStateWithIEditable.example.tsx
@@ -115,7 +115,7 @@ export default function FiltersPanelExample() {
     const view = dataSource.useView(tableState, setTableState);
 
     return (
-        <Panel background="surface" shadow style={ { height: '400px' } }>
+        <Panel background="surface-main" shadow style={ { height: '400px' } }>
             <DataTable
                 getRows={ view.getVisibleRows }
                 columns={ personColumns }
diff --git a/app/src/docs/_examples/tooltip/Delay.example.tsx b/app/src/docs/_examples/tooltip/Delay.example.tsx
index 2a53d6b278..eb4fd4aedc 100644
--- a/app/src/docs/_examples/tooltip/Delay.example.tsx
+++ b/app/src/docs/_examples/tooltip/Delay.example.tsx
@@ -4,7 +4,7 @@ import css from './DelayExample.module.scss';
 
 export default function TriggerConfigurationWithDelayExample() {
     return (
-        <Panel background="surface" shadow cx={ css.container }>
+        <Panel background="surface-main" shadow cx={ css.container }>
             <Text fontSize="14" fontWeight="600" cx={ css.caption }>
                 Project Team
             </Text>
diff --git a/app/src/docs/_examples/virtualList/Basic.example.tsx b/app/src/docs/_examples/virtualList/Basic.example.tsx
index 92a2f74659..87bbdda77e 100644
--- a/app/src/docs/_examples/virtualList/Basic.example.tsx
+++ b/app/src/docs/_examples/virtualList/Basic.example.tsx
@@ -9,7 +9,7 @@ const MyListItem: FC<{ index: number }> = (props) => {
     const [isFolded, setIsFolded] = useState<boolean>(true);
     return (
         <div className={ css.itemContainer } role="row">
-            <Panel background="surface" cx={ css.item } shadow>
+            <Panel background="surface-main" cx={ css.item } shadow>
                 <FlexRow cx={ css.header } onClick={ () => setIsFolded(!isFolded) }>
                     <IconButton icon={ isFolded ? FoldedIcon : UnfoldedIcon } />
                     <Text>
diff --git a/app/src/docs/_examples/virtualList/ScrollTo.example.tsx b/app/src/docs/_examples/virtualList/ScrollTo.example.tsx
index 1983d12c53..472404c96c 100644
--- a/app/src/docs/_examples/virtualList/ScrollTo.example.tsx
+++ b/app/src/docs/_examples/virtualList/ScrollTo.example.tsx
@@ -6,7 +6,7 @@ import css from './BasicExample.module.scss';
 function MyListItem(props: { index: number }) {
     return (
         <div className={ css.itemContainer } role="row">
-            <Panel cx={ css.item } shadow background="surface">
+            <Panel cx={ css.item } shadow background="surface-main">
                 <FlexRow cx={ css.header }>
                     <Text>
                         Row #
diff --git a/app/src/docs/_props/epam-electric/docs/common.tsx b/app/src/docs/_props/epam-electric/docs/common.tsx
new file mode 100644
index 0000000000..44ae520d3d
--- /dev/null
+++ b/app/src/docs/_props/epam-electric/docs/common.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ColorPicker, DocBuilder, IPropDocEditor } from '@epam/uui-docs';
+
+export const colorDoc = new DocBuilder<{ color: string }>({ name: 'Color' }).prop('color', {
+    editorType: function UuiColorPicker(props: IPropDocEditor) {
+        const { value, onValueChange } = props;
+        const examples = props.examples?.map((ex) => ({ value: ex.value }));
+        const editable = { value, onValueChange };
+        return (
+            <ColorPicker colors={ examples } { ...editable } />
+        );
+    },
+});
diff --git a/app/src/docs/_props/epam-electric/docs/index.ts b/app/src/docs/_props/epam-electric/docs/index.ts
new file mode 100644
index 0000000000..d0b9323665
--- /dev/null
+++ b/app/src/docs/_props/epam-electric/docs/index.ts
@@ -0,0 +1 @@
+export * from './common';
diff --git a/app/src/docs/_props/uui/components/iconPicker/IconPicker.module.scss b/app/src/docs/_props/uui/components/iconPicker/IconPicker.module.scss
index 6b164b308f..25ee969397 100644
--- a/app/src/docs/_props/uui/components/iconPicker/IconPicker.module.scss
+++ b/app/src/docs/_props/uui/components/iconPicker/IconPicker.module.scss
@@ -27,11 +27,11 @@
         width: 36px;
         height: 36px;
         align-items: center;
-        border: 1px solid var(--uui-secondary);
+        border: 1px solid var(--uui-divider);
         border-radius: 3px;
 
         svg {
-            fill: var(--uui-secondary);
+            fill: var(--uui-icon);
         }
     }
 
diff --git a/app/src/docs/_props/uui/docs/contexts/FormContext.tsx b/app/src/docs/_props/uui/docs/contexts/FormContext.tsx
index dc26540379..7ad73c4ae3 100644
--- a/app/src/docs/_props/uui/docs/contexts/FormContext.tsx
+++ b/app/src/docs/_props/uui/docs/contexts/FormContext.tsx
@@ -45,7 +45,7 @@ export class FormContext extends React.Component<DemoComponentProps, FormContext
         };
 
         return (
-            <Panel shadow cx={ css.panel } background="surface" margin="24">
+            <Panel shadow cx={ css.panel } background="surface-main" margin="24">
                 <FlexRow borderBottom padding="24" size="48">
                     <FlexCell grow={ 1 } width="auto">
                         <LabeledInput label="Form size:" labelPosition="left" size="36">
diff --git a/app/src/docs/_props/uui/docs/contexts/PagePanelContext.tsx b/app/src/docs/_props/uui/docs/contexts/PagePanelContext.tsx
index d11874e9ca..97a709316f 100644
--- a/app/src/docs/_props/uui/docs/contexts/PagePanelContext.tsx
+++ b/app/src/docs/_props/uui/docs/contexts/PagePanelContext.tsx
@@ -25,7 +25,7 @@ export class PagePanelContext extends React.Component<DemoComponentProps, DemoCo
                 <FlexRow padding="12" borderBottom>
                     <Text fontWeight="600">{item.country}</Text>
                 </FlexRow>
-                <FlexRow padding="12" background="surface" borderBottom>
+                <FlexRow padding="12" background="surface-main" borderBottom>
                     <FlexCell minWidth={ 100 } grow={ 4 }>
                         <Text fontWeight="600" size="24">
                             Column1
@@ -100,7 +100,7 @@ export class PagePanelContext extends React.Component<DemoComponentProps, DemoCo
 
         return (
             <Panel cx={ css.container } margin="24">
-                <Panel background="surface" cx={ css.demo }>
+                <Panel background="surface-main" cx={ css.demo }>
                     {this.renderTable(items[props.value - 1])}
                     <FlexRow padding="12" vPadding="12" size="36">
                         <DemoComponent { ...props } totalPages={ this.state.totalPages } />
diff --git a/app/src/docs/_props/uui/docs/contexts/RelativePanelContext.tsx b/app/src/docs/_props/uui/docs/contexts/RelativePanelContext.tsx
index 179a7b12d5..7e652235a3 100644
--- a/app/src/docs/_props/uui/docs/contexts/RelativePanelContext.tsx
+++ b/app/src/docs/_props/uui/docs/contexts/RelativePanelContext.tsx
@@ -67,7 +67,7 @@ export class RelativePanelContext extends React.Component<DemoComponentProps, De
                         } }
                     />
                 </FlexRow>
-                <Panel background="surface" cx={ css.demo }>
+                <Panel background="surface-main" cx={ css.demo }>
                     {this.state.activeContent === 'form' ? this.renderForm() : this.renderText()}
                     <DemoComponent { ...props } />
                 </Panel>
diff --git a/app/src/docs/_props/uui/docs/contexts/TabButtonContext.tsx b/app/src/docs/_props/uui/docs/contexts/TabButtonContext.tsx
index fc3f69fa61..a029f2996b 100644
--- a/app/src/docs/_props/uui/docs/contexts/TabButtonContext.tsx
+++ b/app/src/docs/_props/uui/docs/contexts/TabButtonContext.tsx
@@ -21,7 +21,7 @@ export class TabButtonContext extends React.Component<DemoComponentProps<ButtonP
     render() {
         const { DemoComponent, props } = this.props;
         return (
-            <Panel background="surface" margin="24" style={ { padding: '6px' } }>
+            <Panel background="surface-main" margin="24" style={ { padding: '6px' } }>
                 <FlexRow borderBottom size="36">
                     <DemoComponent caption="Main" onClick={ () => this.setTab('Main', props.onClick) } size={ props.size } isLinkActive={ this.state.activeTab === 'Main' } />
                     <DemoComponent
diff --git a/app/src/docs/_props/uui/docs/contexts/VerticalTabButtonContext.tsx b/app/src/docs/_props/uui/docs/contexts/VerticalTabButtonContext.tsx
index 3cf4b421ed..44c2de070c 100644
--- a/app/src/docs/_props/uui/docs/contexts/VerticalTabButtonContext.tsx
+++ b/app/src/docs/_props/uui/docs/contexts/VerticalTabButtonContext.tsx
@@ -22,7 +22,7 @@ export class VerticalTabButtonContext extends React.Component<DemoComponentProps
     render() {
         const { DemoComponent, props } = this.props;
         return (
-            <Panel background="surface" margin="24">
+            <Panel background="surface-main" margin="24">
                 <FlexRow>
                     <FlexCell grow={ 1 }>
                         <DemoComponent
diff --git a/app/src/docs/accordion/Accordion.doc.tsx b/app/src/docs/accordion/Accordion.doc.tsx
index 7018fed326..7d497a927f 100644
--- a/app/src/docs/accordion/Accordion.doc.tsx
+++ b/app/src/docs/accordion/Accordion.doc.tsx
@@ -13,8 +13,8 @@ export class AccordionDoc extends BaseDocsBlock {
         name: 'Accordion',
         contexts: [TDocContext.Resizable],
         bySkin: {
-            [TSkin.UUI3_loveship]: { type: '@epam/uui:AccordionProps', component: loveship.Accordion },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:AccordionProps', component: promo.Accordion },
+            [TSkin.Loveship]: { type: '@epam/uui:AccordionProps', component: loveship.Accordion },
+            [TSkin.Promo]: { type: '@epam/uui:AccordionProps', component: promo.Accordion },
             [TSkin.UUI]: { type: '@epam/uui:AccordionProps', component: uui.Accordion },
         },
         doc: (doc: DocBuilder<uui.AccordionProps>) => {
diff --git a/app/src/docs/anchor/Anchor.doc.tsx b/app/src/docs/anchor/Anchor.doc.tsx
index 5188e2380f..fa620668db 100644
--- a/app/src/docs/anchor/Anchor.doc.tsx
+++ b/app/src/docs/anchor/Anchor.doc.tsx
@@ -13,8 +13,8 @@ export class AnchorDoc extends BaseDocsBlock {
     override config: TDocConfig = {
         name: 'Anchor',
         bySkin: {
-            [TSkin.UUI3_loveship]: { type: '@epam/uui-components:AnchorProps', component: loveship.Anchor },
-            [TSkin.UUI4_promo]: { type: '@epam/uui-components:AnchorProps', component: promo.Anchor },
+            [TSkin.Loveship]: { type: '@epam/uui-components:AnchorProps', component: loveship.Anchor },
+            [TSkin.Promo]: { type: '@epam/uui-components:AnchorProps', component: promo.Anchor },
             [TSkin.UUI]: { type: '@epam/uui-components:AnchorProps', component: uui.Anchor },
         },
         doc: (doc: DocBuilder<AnchorProps>) => {
diff --git a/app/src/docs/assets/ColorsPage.doc.tsx b/app/src/docs/assets/ColorsPage.doc.tsx
index 5db9151731..202535addc 100644
--- a/app/src/docs/assets/ColorsPage.doc.tsx
+++ b/app/src/docs/assets/ColorsPage.doc.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FlexRow, FlexSpacer } from '@epam/promo';
+import { FlexRow, FlexSpacer } from '@epam/uui';
 import { BaseDocsBlock } from '../../common';
 import { getQuery } from '../../helpers';
 import css from './DownloadsDoc.module.scss';
@@ -21,6 +21,6 @@ export class ColorsPageDoc extends BaseDocsBlock {
     }
 
     renderContent(): React.ReactNode {
-        return getQuery('skin') === TSkin.UUI3_loveship ? React.createElement(LoveshipColorsDoc) : React.createElement(PromoColorsDoc);
+        return getQuery('skin') === TSkin.Loveship ? React.createElement(LoveshipColorsDoc) : React.createElement(PromoColorsDoc);
     }
 }
diff --git a/app/src/docs/assets/ColorsPageDoc.module.scss b/app/src/docs/assets/ColorsPageDoc.module.scss
index 8bf1557a7e..9431ceeb57 100644
--- a/app/src/docs/assets/ColorsPageDoc.module.scss
+++ b/app/src/docs/assets/ColorsPageDoc.module.scss
@@ -1,7 +1,7 @@
 @use '~@epam/promo/assets/styles/index' as *;
 
 .title {
-    font-family: $font-museo-sans;
+    font-family: var(--font-primary);
     margin: 30px 0;
     font-size: 36px;
     line-height: 48px;
diff --git a/app/src/docs/assets/Downloads.doc.tsx b/app/src/docs/assets/Downloads.doc.tsx
index 24c62f5132..a9b222b892 100644
--- a/app/src/docs/assets/Downloads.doc.tsx
+++ b/app/src/docs/assets/Downloads.doc.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { cx } from '@epam/uui-core';
-import { FlexCell, FlexRow, IconContainer, LinkButton, RichTextView, Text, Tooltip } from '@epam/promo';
+import { FlexCell, FlexRow, IconContainer, LinkButton, RichTextView, Text, Tooltip } from '@epam/uui';
 import { BaseDocsBlock } from '../../common/docs';
 import css from './DownloadsDoc.module.scss';
 import { ReactComponent as Artbord } from '../../icons/artboard.svg';
@@ -85,7 +85,7 @@ export class DownloadsDoc extends BaseDocsBlock {
                                 icon={ ContentLinkIcon }
                             />
                         )}
-                        <Text size="18" fontSize="12" lineHeight="18" color="gray60">
+                        <Text size="18" fontSize="12" lineHeight="18" color="secondary">
                             {additionalInfo}
                         </Text>
                     </FlexCell>
@@ -96,7 +96,7 @@ export class DownloadsDoc extends BaseDocsBlock {
 
     renderContent() {
         return (
-            <span className={ css.themePromo }>
+            <>
                 <FlexRow alignItems="top" cx={ css.headerRow }>
                     <FlexCell width="100%" cx={ css.contentBlock }>
                         <RichTextView size="16">
@@ -120,7 +120,7 @@ export class DownloadsDoc extends BaseDocsBlock {
                                     <IconContainer icon={ FontIcon } />
                                 </div>
                                 <FlexCell width="auto">
-                                    <Text size="24" fontSize="16" font="museo-sans">
+                                    <Text size="24" fontSize="16" fontWeight="600">
                                         Font Pack
                                     </Text>
                                     <Tooltip content="For internal use only" offset={ [0, 10] }>
@@ -142,7 +142,7 @@ export class DownloadsDoc extends BaseDocsBlock {
                                     <IconContainer icon={ LogotypeIcon } />
                                 </div>
                                 <FlexCell width="auto">
-                                    <Text size="24" fontSize="16" font="museo-sans">
+                                    <Text size="24" fontSize="16" fontWeight="600">
                                         Logotypes
                                     </Text>
                                     <LinkButton
@@ -160,7 +160,7 @@ export class DownloadsDoc extends BaseDocsBlock {
                                     <IconContainer icon={ DownloadIcon } />
                                 </div>
                                 <FlexCell width="auto">
-                                    <Text size="24" fontSize="16" font="museo-sans">
+                                    <Text size="24" fontSize="16" fontWeight="600">
                                         Icon Set
                                     </Text>
                                     <LinkButton
@@ -180,7 +180,7 @@ export class DownloadsDoc extends BaseDocsBlock {
                                     <IconContainer icon={ IllustrationsIcon } />
                                 </div>
                                 <FlexCell width="auto">
-                                    <Text size="24" fontSize="16" font="museo-sans">
+                                    <Text size="24" fontSize="16" fontWeight="600">
                                         UUI Illustrations (SVG pack & Guidelines)
                                     </Text>
                                     <FlexRow>
@@ -200,7 +200,7 @@ export class DownloadsDoc extends BaseDocsBlock {
                         </FlexCell>
                     </FlexRow>
                 </FlexCell>
-            </span>
+            </>
         );
     }
 }
diff --git a/app/src/docs/assets/DownloadsDoc.module.scss b/app/src/docs/assets/DownloadsDoc.module.scss
index bbcb776911..662b42c8c3 100644
--- a/app/src/docs/assets/DownloadsDoc.module.scss
+++ b/app/src/docs/assets/DownloadsDoc.module.scss
@@ -1,14 +1,6 @@
-@use '~@epam/promo/assets/styles/index' as *;
-@use '~@epam/assets/theme/theme_promo' as *;
-
-.theme-promo {
-    :global {
-        @include theme-promo();
-    }
-}
-
 .title {
-    font-family: $font-museo-sans;
+    font-family: var(--uui-font);
+    font-weight: 600;
     margin: 30px 0;
     font-size: 36px;
     line-height: 48px;
@@ -16,7 +8,7 @@
 
 .header-row {
     padding-bottom: 24px;
-    border-bottom: 1px solid $gray40;
+    border-bottom: 1px solid var(--uui-divider);
     margin-bottom: 48px;
 
     .content-block {
@@ -50,7 +42,7 @@
     }
 
     .font-pack-background {
-        background-color: $blue-lightest;
+        background-color: #D6F2FF;
     }
 
     .logotypes-background {
@@ -58,7 +50,7 @@
     }
 
     .icon-set-background {
-        background-color: $purple-10;
+        background-color: #F2CCFA;
     }
 
     .illustrations-background {
diff --git a/app/src/docs/assets/Icons.doc.tsx b/app/src/docs/assets/Icons.doc.tsx
index e187c07b26..9715458665 100644
--- a/app/src/docs/assets/Icons.doc.tsx
+++ b/app/src/docs/assets/Icons.doc.tsx
@@ -17,7 +17,7 @@ import {
     ScrollBars,
     SearchInput,
     TextInput,
-} from '@epam/promo';
+} from '@epam/uui';
 import {
     ArrayDataSource, cx, DataRowProps, DataSourceState, Icon,
 } from '@epam/uui-core';
@@ -69,8 +69,8 @@ export class IconsDoc extends React.Component {
     showNotification() {
         svc.uuiNotifications.show(
             (props) => (
-                <NotificationCard { ...props } icon={ NotificationIcon } color="gray60" onClose={ null }>
-                    <Text size="36" font="sans">
+                <NotificationCard { ...props } icon={ NotificationIcon } color="info" onClose={ null }>
+                    <Text size="36">
                         Import was copied to the clipboard
                     </Text>
                 </NotificationCard>
@@ -91,7 +91,7 @@ export class IconsDoc extends React.Component {
                 <FlexRow padding="24" vPadding="48" borderBottom cx={ css.iconCardDemo }>
                     {this.renderDemo()}
                 </FlexRow>
-                <FlexRow vPadding="24" padding="24" background="gray5" cx={ css.iconCardImport }>
+                <FlexRow vPadding="24" padding="24" cx={ css.iconCardImport }>
                     {this.renderImport()}
                 </FlexRow>
             </Panel>
@@ -106,14 +106,14 @@ export class IconsDoc extends React.Component {
         return (
             <FlexCell width="100%" cx={ css.infoBox }>
                 <FlexRow>
-                    <Text font="museo-sans" fontSize="24" lineHeight="30" cx={ css.iconCardTitle }>
+                    <Text fontSize="24" lineHeight="30" cx={ css.iconCardTitle }>
                         {item.name}
                     </Text>
                     <FlexSpacer />
                     <Button
-                        color="gray"
+                        color="secondary"
                         size="30"
-                        fill="light"
+                        fill="ghost"
                         icon={ this.state.isLocked ? LockedIcon : UnlockedIcon }
                         onClick={ () => this.setState({ isLocked: !this.state.isLocked }) }
                         cx={ css.lockButton }
@@ -196,19 +196,19 @@ export class IconsDoc extends React.Component {
 
         return (
             isRecommendedSizeAvailable && (
-                <FlexRow cx={ css.recommendedSize } padding="24" vPadding="48" background="white" borderBottom>
+                <FlexRow cx={ css.recommendedSize } padding="24" vPadding="48" borderBottom>
                     <FlexCell width="100%" cx={ css.recommendedSizeIcon }>
-                        <Text size="18" fontSize="14" font="sans-semibold" cx={ css.recommendedCaption }>
+                        <Text size="18" fontSize="14" fontWeight="600" cx={ css.recommendedCaption }>
                             Use the recommended icon sizes:
                         </Text>
                         <FlexRow padding={ null } vPadding={ null } margin={ null } cx={ css.recommendedSizeIconRow }>
                             <FlexCell minWidth={ 227 }>
                                 <FlexRow vPadding={ null } padding={ null }>
                                     <FlexCell minWidth={ 42 } cx={ css.sizesCaptions }>
-                                        <Text size="30" fontSize="12" color="gray60">
+                                        <Text size="30" fontSize="12" color="secondary">
                                             Control:
                                         </Text>
-                                        <Text size="30" fontSize="12" color="gray60">
+                                        <Text size="30" fontSize="12" color="secondary">
                                             Icon:
                                         </Text>
                                     </FlexCell>
@@ -225,7 +225,7 @@ export class IconsDoc extends React.Component {
                                                         control === this.state.controlSize && size === this.state.selectedIcon.size.toString() && css.selectedSizes,
                                                     ) }
                                                 >
-                                                    <Text size="30" font="sans-semibold" cx={ css.sizesText }>
+                                                    <Text size="30" fontWeight="600" cx={ css.sizesText }>
                                                         {control}
                                                     </Text>
                                                     <Text size="30" cx={ css.sizesText }>
@@ -281,7 +281,7 @@ export class IconsDoc extends React.Component {
             >
                 <FlexRow padding="24" vPadding="24" spacing="12" size="24" borderBottom cx={ css.controlSizeContent }>
                     <FlexCell width="auto">
-                        <Text font="sans-semibold" size="24" fontSize="14">
+                        <Text fontWeight="600" size="24" fontSize="14">
                             Control size:
                         </Text>
                     </FlexCell>
@@ -312,7 +312,7 @@ export class IconsDoc extends React.Component {
                     }) }
             >
                 <IconContainer cx={ css.itemIcon } icon={ item.icon } />
-                <Text size="18" color="gray60" cx={ css.itemName }>
+                <Text size="18" color="secondary" cx={ css.itemName }>
                     {item.name}
                 </Text>
             </div>
@@ -335,7 +335,7 @@ export class IconsDoc extends React.Component {
                     <FlexRow>
                         <Button
                             caption="Request an Icon"
-                            color="green"
+                            color="accent"
                             href="https://www.figma.com/file/UyChXPLmyv5zMrOU37KdUL/UUI4-(Components)?node-id=14983%3A274834"
                         />
                     </FlexRow>
diff --git a/app/src/docs/assets/IconsPage.module.scss b/app/src/docs/assets/IconsPage.module.scss
index b0e8361c02..e6589cf448 100644
--- a/app/src/docs/assets/IconsPage.module.scss
+++ b/app/src/docs/assets/IconsPage.module.scss
@@ -28,10 +28,12 @@
             border: 0 none;
             line-height: inherit;
             text-align: left;
+            color: var(--uui-text-primary);
         }
 
         .title {
-            font-family: $font-museo-sans;
+            font-family: var(--uui-font);
+            font-weight: 600;
             margin-bottom: 24px;
             font-size: 36px;
             line-height: 48px;
@@ -51,15 +53,15 @@
                 margin: 9px;
                 width: 72px;
                 height: 72px;
-                border: 1px solid $gray40;
-                background: white;
+                border: 1px solid var(--uui-divider);
+                background: var(--uui-surface-main);
                 cursor: pointer;
                 box-sizing: border-box;
 
                 .itemIcon {
                     padding: 11px 0 6px;
                     align-items: center;
-                    fill: $gray60;
+                    fill: var(--uui-icon);
 
                     svg {
                         width: 36px;
@@ -74,19 +76,19 @@
                 }
 
                 &:hover {
-                    border-color: $blue;
+                    border-color: var(--uui-info-50);
 
                     .itemIcon {
-                        fill: $blue;
+                        fill: var(--uui-info-50);
                     }
                 }
             }
 
             .activeItem {
-                border-color: $blue;
+                border-color: var(--uui-info-50);
 
                 .itemIcon {
-                    fill: $blue;
+                    fill: var(--uui-info-50);
                 }
             }
         }
@@ -101,7 +103,7 @@
                 margin-bottom: 12px;
 
                 span {
-                    font-family: $font-sans-semibold;
+                    font-family: var(--font-semibold);
                 }
             }
         }
@@ -124,8 +126,8 @@
 
         .icon-card {
             box-sizing: border-box;
-            border: 1px solid $gray40;
-            background-color: #FFFFFF;
+            border: 1px solid var(--uui-divider);
+            background-color: var(--uui-surface-main);
             min-height: 380px;
 
             .icon-card-title {
@@ -134,7 +136,7 @@
 
             .lock-button {
                 :global(.uui-icon) {
-                    fill: $gray60;
+                    fill: var(--uui-icon);
                 }
             }
 
@@ -144,9 +146,9 @@
                 margin-top: 18px;
                 padding: 9px;
                 box-sizing: border-box;
-                border: 1px solid $gray40;
-                background: $gray5;
-                fill: $gray60;
+                border: 1px solid var(--uui-divider);
+                background: var(--uui-surface-low);
+                fill: var(--uui-icon);
             }
 
             .icon-box {
@@ -154,45 +156,46 @@
 
                 .size-icon {
                     padding: 8px;
-                    border: 1px solid $gray40;
-                    fill: $gray40;
+                    border: 1px solid var(--uui-divider);
+                    fill: var(--uui-icon-disabled);
                 }
 
                 .selected-icon {
-                    border-color: $gray60;
-                    fill: $gray60;
+                    border-color: var(--uui-control-border-hover);
+                    fill: var(--uui-icon);
                 }
 
                 .selectable-icon {
-                    border-color: $gray60;
-                    fill: $gray60;
+                    border-color: var(--uui-control-border-hover);
+                    fill: var(--uui-icon);
                     cursor: pointer;
 
                     &:hover {
-                        border-color: $blue;
-                        background-color: $blue-lightest;
-                        fill: $blue;
+                        border-color: var(--uui-info-50);
+                        background-color: var(--uui-info-10);
+                        fill: var(--uui-info-50);
                     }
 
                     &:active {
-                        background-color: $blue-light;
+                        background-color: var(--uui-info-20);
                     }
 
                     &.selected-icon {
-                        border-color: $blue;
-                        fill: $blue;
+                        border-color: var(--uui-info-50);
+                        fill: var(--uui-info-50);
                     }
                 }
             }
 
             .icon-box-label {
-                font-family: $font-sans-semibold;
+                font-family: var(--font-semibold);
                 font-size: 12px;
                 line-height: 18px;
-                color: $gray80;
+                color: var(--uui-text-primary);
             }
 
             .recommended-size {
+                background-color: var(--uui-surface-main);
                 z-index: 1;
             }
 
@@ -219,21 +222,21 @@
                     cursor: pointer;
 
                     &:hover {
-                        background-color: $blue-lightest;
+                        background-color: var(--uui-info-10);
                     }
                 }
 
                 .disabled-sizes {
                     .sizes-text {
-                        color: $gray40;
+                        color: var(--uui-text-disabled);
                     }
                 }
 
                 .selected-sizes {
-                    background-color: $blue-lightest;
+                    background-color: var(--uui-info-10);
 
                     .sizes-text {
-                        color: $blue;
+                        color: var(--uui-info-50);
                     }
                 }
 
@@ -251,7 +254,7 @@
                         width: 60px;
                         height: 60px;
                         border-radius: 50%;
-                        background-color: $red-lightest;
+                        background-color: var(--uui-error-10);
                         animation: pulse-wrapper 3s infinite linear;
                     }
 
@@ -270,7 +273,7 @@
                             width: 36px;
                             height: 36px;
                             border-radius: 50%;
-                            background-color: $red-light;
+                            background-color: var(--uui-error-20);
                             z-index: -1;
                             animation: pulse-icon 3s infinite linear;
                         }
@@ -349,7 +352,8 @@
             }
 
             .icon-card-import {
-                font-family: $font-sans;
+                background-color: var(--uui-surface-low);
+                font-family: var(--font-regular);
                 font-size: 14px;
                 line-height: 24px;
                 cursor: pointer;
diff --git a/app/src/docs/assets/loveship/LoveshipColors.doc.tsx b/app/src/docs/assets/loveship/LoveshipColors.doc.tsx
index 473e19cf27..976504c1f8 100644
--- a/app/src/docs/assets/loveship/LoveshipColors.doc.tsx
+++ b/app/src/docs/assets/loveship/LoveshipColors.doc.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FlexCell, FlexRow, NotificationCard, RichTextView, Text, Tooltip } from '@epam/promo';
+import { FlexCell, FlexRow, NotificationCard, RichTextView, Text, Tooltip } from '@epam/uui';
 import { arrayToMatrix, cx, INotification } from '@epam/uui-core';
 import { copyTextToClipboard } from '../../../helpers';
 import { svc } from '../../../services';
@@ -115,8 +115,8 @@ export class LoveshipColorsDoc extends React.Component {
     showNotification() {
         svc.uuiNotifications.show(
             (props: INotification) => (
-                <NotificationCard { ...props } icon={ NotificationIcon } color="gray60" onClose={ null }>
-                    <Text size="36" font="sans">
+                <NotificationCard { ...props } icon={ NotificationIcon } color="info" onClose={ null }>
+                    <Text size="36">
                         HEX code was copied to the clipboard
                     </Text>
                 </NotificationCard>
@@ -154,17 +154,17 @@ export class LoveshipColorsDoc extends React.Component {
                     })}
                     <FlexCell minWidth={ 100 } alignSelf="flex-end">
                         <div className={ cx(css.box, css.captionColorBox) }>
-                            <Text color="gray60" font="sans-italic" fontSize="12" lineHeight="18">
+                            <Text color="secondary" fontStyle="italic" fontSize="12" lineHeight="18">
                                 Rested
                             </Text>
                         </div>
                         <div className={ cx(css.box, css.captionColorBox) }>
-                            <Text color="gray60" font="sans-italic" fontSize="12" lineHeight="18">
+                            <Text color="secondary" fontStyle="italic" fontSize="12" lineHeight="18">
                                 Hovered
                             </Text>
                         </div>
                         <div className={ cx(css.box, css.captionColorBox) }>
-                            <Text color="gray60" font="sans-italic" fontSize="12" lineHeight="18">
+                            <Text color="secondary" fontStyle="italic" fontSize="12" lineHeight="18">
                                 Pressed
                             </Text>
                         </div>
diff --git a/app/src/docs/assets/promo/PromoColors.doc.tsx b/app/src/docs/assets/promo/PromoColors.doc.tsx
index bc00c7637e..0eb2d245d7 100644
--- a/app/src/docs/assets/promo/PromoColors.doc.tsx
+++ b/app/src/docs/assets/promo/PromoColors.doc.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import css from './PromoColorsDoc.module.scss';
 import {
     FlexCell, FlexRow, NotificationCard, RichTextView, Text, Tooltip,
-} from '@epam/promo';
+} from '@epam/uui';
 import { cx, arrayToMatrix, INotification } from '@epam/uui-core';
 import { copyTextToClipboard } from '../../../helpers';
 import { svc } from '../../../services';
@@ -117,8 +117,8 @@ export class PromoColorsDoc extends React.Component {
     showNotification() {
         svc.uuiNotifications.show(
             (props: INotification) => (
-                <NotificationCard { ...props } icon={ NotificationIcon } color="gray60" onClose={ null }>
-                    <Text size="36" font="sans">
+                <NotificationCard { ...props } icon={ NotificationIcon } color="info" onClose={ null }>
+                    <Text size="36">
                         HEX code was copied to the clipboard
                     </Text>
                 </NotificationCard>
@@ -153,17 +153,17 @@ export class PromoColorsDoc extends React.Component {
                     })}
                     <FlexCell minWidth={ 100 } alignSelf="flex-end">
                         <div className={ cx(css.box, css.captionColorBox) }>
-                            <Text color="gray60" font="sans-italic" fontSize="12" lineHeight="18">
+                            <Text color="secondary" fontStyle="italic" fontSize="12" lineHeight="18">
                                 Rested
                             </Text>
                         </div>
                         <div className={ cx(css.box, css.captionColorBox) }>
-                            <Text color="gray60" font="sans-italic" fontSize="12" lineHeight="18">
+                            <Text color="secondary" fontStyle="italic" fontSize="12" lineHeight="18">
                                 Hovered
                             </Text>
                         </div>
                         <div className={ cx(css.box, css.captionColorBox) }>
-                            <Text color="gray60" font="sans-italic" fontSize="12" lineHeight="18">
+                            <Text color="secondary" fontStyle="italic" fontSize="12" lineHeight="18">
                                 Pressed
                             </Text>
                         </div>
diff --git a/app/src/docs/datePicker/DatePicker.doc.tsx b/app/src/docs/datePicker/DatePicker.doc.tsx
index 23cf936175..cbf372f2e1 100644
--- a/app/src/docs/datePicker/DatePicker.doc.tsx
+++ b/app/src/docs/datePicker/DatePicker.doc.tsx
@@ -15,8 +15,8 @@ export class DatePickerDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Form, TDocContext.Resizable, TDocContext.Table],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:DatePickerProps', component: uui.DatePicker },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui:DatePickerProps', component: loveship.DatePicker },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:DatePickerProps', component: promo.DatePicker },
+            [TSkin.Loveship]: { type: '@epam/uui:DatePickerProps', component: loveship.DatePicker },
+            [TSkin.Promo]: { type: '@epam/uui:DatePickerProps', component: promo.DatePicker },
         },
         doc: (doc: DocBuilder<uui.DatePickerProps>) => {
             doc.merge('size', { defaultValue: '36' });
diff --git a/app/src/docs/design/GettingStarted.doc.tsx b/app/src/docs/design/GettingStarted.doc.tsx
index 321589b387..e617997f3c 100644
--- a/app/src/docs/design/GettingStarted.doc.tsx
+++ b/app/src/docs/design/GettingStarted.doc.tsx
@@ -26,6 +26,6 @@ export class GettingStartedForDesignersDoc extends BaseDocsBlock {
     }
 
     renderContent() {
-        return getQuery('skin') === TSkin.UUI3_loveship ? this.renderLoveshipContent() : this.renderPromoContent();
+        return getQuery('skin') === TSkin.Loveship ? this.renderLoveshipContent() : this.renderPromoContent();
     }
 }
diff --git a/app/src/docs/dropdownContainer/DropdownContainer.doc.tsx b/app/src/docs/dropdownContainer/DropdownContainer.doc.tsx
index 9a384d46c6..50a91bf55a 100644
--- a/app/src/docs/dropdownContainer/DropdownContainer.doc.tsx
+++ b/app/src/docs/dropdownContainer/DropdownContainer.doc.tsx
@@ -12,14 +12,14 @@ export class DropdownContainerDoc extends BaseDocsBlock {
     override config: TDocConfig = {
         name: 'DropdownContainer',
         bySkin: {
-            [TSkin.UUI3_loveship]: {
+            [TSkin.Loveship]: {
                 type: '@epam/loveship:DropdownContainerProps',
                 component: loveship.DropdownContainer,
                 doc: (doc: DocBuilder<loveship.DropdownContainerProps>) => {
                     doc.merge('children', { examples: childrenLoveshipOrPromo });
                 },
             },
-            [TSkin.UUI4_promo]: {
+            [TSkin.Promo]: {
                 type: '@epam/promo:DropdownContainerProps',
                 component: promo.DropdownContainer,
                 doc: (doc: DocBuilder<promo.DropdownContainerProps>) => {
diff --git a/app/src/docs/flexRow/FlexRow.doc.tsx b/app/src/docs/flexRow/FlexRow.doc.tsx
index 4db1ae4fe1..97b4ed58a9 100644
--- a/app/src/docs/flexRow/FlexRow.doc.tsx
+++ b/app/src/docs/flexRow/FlexRow.doc.tsx
@@ -14,7 +14,7 @@ export class FlexRowDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Resizable],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:FlexRowProps', component: uui.FlexRow },
-            [TSkin.UUI3_loveship]: {
+            [TSkin.Loveship]: {
                 type: '@epam/loveship:FlexRowProps',
                 component: loveship.FlexRow,
                 doc: (doc: DocBuilder<loveship.FlexRowProps>) => {
@@ -23,7 +23,7 @@ export class FlexRowDoc extends BaseDocsBlock {
                     doc.merge('size', { defaultValue: '36' });
                 },
             },
-            [TSkin.UUI4_promo]: {
+            [TSkin.Promo]: {
                 type: '@epam/promo:FlexRowProps',
                 component: promo.FlexRow,
                 doc: (doc: DocBuilder<promo.FlexRowProps>) => {
diff --git a/app/src/docs/mainMenu/MainMenu.doc.tsx b/app/src/docs/mainMenu/MainMenu.doc.tsx
index bcb26a9b39..59415827ba 100644
--- a/app/src/docs/mainMenu/MainMenu.doc.tsx
+++ b/app/src/docs/mainMenu/MainMenu.doc.tsx
@@ -16,8 +16,8 @@ export class MainMenuDoc extends BaseDocsBlock {
         contexts: [TDocContext.Resizable],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:MainMenuProps', component: uui.MainMenu },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui:MainMenuProps', component: loveship.MainMenu },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:MainMenuProps', component: promo.MainMenu },
+            [TSkin.Loveship]: { type: '@epam/uui:MainMenuProps', component: loveship.MainMenu },
+            [TSkin.Promo]: { type: '@epam/uui:MainMenuProps', component: promo.MainMenu },
         },
         doc: (doc: DocBuilder<uui.MainMenuProps>) => {
             doc.merge('children', { examples: childrenExamples });
diff --git a/app/src/docs/other/Projects.doc.tsx b/app/src/docs/other/Projects.doc.tsx
index c1dea1c47f..ee1191307e 100644
--- a/app/src/docs/other/Projects.doc.tsx
+++ b/app/src/docs/other/Projects.doc.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Icon } from '@epam/uui-core';
 import {
     FlexCell, FlexRow, FlexSpacer, IconContainer, LinkButton, Text,
-} from '@epam/promo';
+} from '@epam/uui';
 import { ContentSection } from '../../common';
 import css from './ProjectsDoc.module.scss';
 
@@ -127,11 +127,11 @@ export class ProjectsDoc extends React.Component {
                                             cx={ css.projectLink }
                                         />
                                     ) : (
-                                        <Text font="museo-sans" fontSize="24" lineHeight="30" cx={ css.projectName }>
+                                        <Text fontSize="24" lineHeight="30" cx={ css.projectName }>
                                             {project.projectName}
                                         </Text>
                                     )}
-                                    <Text color="gray60" cx={ css.projectCode }>
+                                    <Text color="secondary" cx={ css.projectCode }>
                                         {project.projectCode}
                                     </Text>
                                 </FlexCell>
diff --git a/app/src/docs/other/ProjectsDoc.module.scss b/app/src/docs/other/ProjectsDoc.module.scss
index 98493bd88d..192cb0a599 100644
--- a/app/src/docs/other/ProjectsDoc.module.scss
+++ b/app/src/docs/other/ProjectsDoc.module.scss
@@ -1,7 +1,8 @@
 @import '~@epam/promo/assets/styles/index';
 
 .title {
-    font-family: $font-museo-sans;
+    font-family: var(--uui-font);
+    font-weight: 600;
     margin: 24px 0;
     font-size: 36px;
     line-height: 48px;
@@ -9,8 +10,8 @@
 
 .layout {
     .project-container {
-        background: $white;
-        border: 1px solid $gray40;
+        background: var(--uui-surface-main);
+        border: 1px solid var(--uui-divider);
         max-width: 960px;
         margin-bottom: -1px;
 
diff --git a/app/src/docs/other/ReleaseNotes.doc.tsx b/app/src/docs/other/ReleaseNotes.doc.tsx
index 87174af3ca..0b07a8ecfd 100644
--- a/app/src/docs/other/ReleaseNotes.doc.tsx
+++ b/app/src/docs/other/ReleaseNotes.doc.tsx
@@ -3,7 +3,7 @@ import css from './ReleaseNotesDoc.module.scss';
 import { svc } from '../../services';
 import {
     FlexCell, FlexRow, RichTextView, Spinner, Text,
-} from '@epam/promo';
+} from '@epam/uui';
 import { UuiReactMarkdown } from '../../documents/uuiReactMarkdown';
 import dayjs from 'dayjs';
 import { ContentSection } from '../../common';
@@ -60,10 +60,10 @@ export class ReleaseNotesDoc extends React.Component {
         return (
             <FlexRow key={ index } cx={ css.releaseRow } rawProps={ { id: header.split('#')[1] } }>
                 <FlexCell minWidth={ 246 } alignSelf="start">
-                    <Text font="museo-sans" fontSize="24" lineHeight="30" cx={ css.releaseHeader }>
+                    <Text fontSize="24" lineHeight="30" cx={ css.releaseHeader }>
                         {header}
                     </Text>
-                    <Text color="gray60" fontSize="16" lineHeight="24" cx={ css.releaseDate }>
+                    <Text color="secondary" fontSize="16" lineHeight="24" cx={ css.releaseDate }>
                         {dayjs(date, 'DD.MM.YYYY').isValid() && dayjs(date, 'DD.MM.YYYY').format('MMM DD, YYYY')}
                     </Text>
                 </FlexCell>
diff --git a/app/src/docs/other/ReleaseNotesDoc.module.scss b/app/src/docs/other/ReleaseNotesDoc.module.scss
index c21a2f7c06..80f00e0381 100644
--- a/app/src/docs/other/ReleaseNotesDoc.module.scss
+++ b/app/src/docs/other/ReleaseNotesDoc.module.scss
@@ -1,7 +1,8 @@
 @use '~@epam/promo/assets/styles/index' as *;
 
 .title {
-    font-family: $font-museo-sans;
+    font-family: var(--uui-font);
+    font-weight: 600;
     margin: 24px 0;
     font-size: 36px;
     line-height: 48px;
@@ -23,7 +24,7 @@
     .release-content {
         max-width: 714px;
         width: 100%;
-        border-bottom: 1px solid $gray40;
+        border-bottom: 1px solid var(--uui-divider);
         padding-bottom: 24px;
     }
 
diff --git a/app/src/docs/other/Team.doc.tsx b/app/src/docs/other/Team.doc.tsx
index d1a8956f52..428a3a6b09 100644
--- a/app/src/docs/other/Team.doc.tsx
+++ b/app/src/docs/other/Team.doc.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import css from './TeamDoc.module.scss';
 import {
     Button, FlexRow, IconContainer, LinkButton, RichTextView, Text,
-} from '@epam/promo';
+} from '@epam/uui';
 import { ReactComponent as AddIcon } from '@epam/assets/icons/common/action-add-24.svg';
 import { ContentSection } from '../../common';
 
@@ -166,7 +166,7 @@ export class TeamDoc extends React.Component {
                             <div key={ index } className={ css.card }>
                                 <img alt={ name } src={ src } width="222" height="222" />
                                 <LinkButton size="24" caption={ name } target="_blank" href={ link } />
-                                <Text font="sans" lineHeight="24" fontSize="16" size="none">
+                                <Text lineHeight="24" fontSize="16" size="none">
                                     {position}
                                 </Text>
                             </div>
@@ -184,7 +184,7 @@ export class TeamDoc extends React.Component {
                             <div key={ index } className={ css.card }>
                                 <img alt={ name } src={ src } width="222" height="222" />
                                 <LinkButton size="24" caption={ name } target="_blank" href={ link } />
-                                <Text font="sans" lineHeight="24" fontSize="16" size="none">
+                                <Text lineHeight="24" fontSize="16" size="none">
                                     {position}
                                 </Text>
                             </div>
@@ -192,7 +192,7 @@ export class TeamDoc extends React.Component {
                     })}
                     <div className={ css.contributeCard }>
                         <IconContainer cx={ [css.iconContainer, css.iconBlue] } icon={ AddIcon } size={ 48 } />
-                        <Button cx={ css.link } size="48" fill="light" caption="Contribute" target="_blank" href="https://github.com/epam/UUI/blob/main/CONTRIBUTING.md" />
+                        <Button cx={ css.link } size="48" fill="ghost" caption="Contribute" target="_blank" href="https://github.com/epam/UUI/blob/main/CONTRIBUTING.md" />
                     </div>
                 </FlexRow>
             </ContentSection>
diff --git a/app/src/docs/other/TeamDoc.module.scss b/app/src/docs/other/TeamDoc.module.scss
index 40c4c7358d..b3ed5c41e4 100644
--- a/app/src/docs/other/TeamDoc.module.scss
+++ b/app/src/docs/other/TeamDoc.module.scss
@@ -1,7 +1,8 @@
 @import '~@epam/promo/assets/styles/index';
 
 .title {
-    font-family: $font-museo-sans;
+    font-family: var(--uui-font);
+    font-weight: 600;
     margin: 24px 0;
     font-size: 36px;
     line-height: 48px;
@@ -32,7 +33,7 @@
     }
 
     .contribute-card {
-        border: 1px solid $blue;
+        border: 1px solid var(--uui-info-50);
         box-sizing: border-box;
         margin-top: 24px;
         min-width: 222px;
@@ -40,7 +41,7 @@
         .icon-container {
             min-height: 220px;
             align-items: center;
-            border-bottom: 1px solid $blue;
+            border-bottom: 1px solid var(--uui-info-50);
         }
 
         .link {
diff --git a/app/src/docs/panel/Panel.doc.tsx b/app/src/docs/panel/Panel.doc.tsx
index a96462bbd3..e44cf3580f 100644
--- a/app/src/docs/panel/Panel.doc.tsx
+++ b/app/src/docs/panel/Panel.doc.tsx
@@ -14,8 +14,8 @@ export class PanelDoc extends BaseDocsBlock {
         contexts: [TDocContext.Resizable, TDocContext.Default],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:PanelProps', component: uui.Panel },
-            [TSkin.UUI3_loveship]: { type: '@epam/loveship:PanelProps', component: loveship.Panel },
-            [TSkin.UUI4_promo]: { type: '@epam/promo:PanelProps', component: promo.Panel },
+            [TSkin.Loveship]: { type: '@epam/loveship:PanelProps', component: loveship.Panel },
+            [TSkin.Promo]: { type: '@epam/promo:PanelProps', component: promo.Panel },
         },
         doc: (doc: DocBuilder<promo.PanelProps | loveship.PanelProps | uui.PanelProps>) => {
             doc.merge('children', { examples: childrenExamples });
diff --git a/app/src/docs/pickerInput/PickerInput.doc.tsx b/app/src/docs/pickerInput/PickerInput.doc.tsx
index 343b6838ac..a9c3ddacac 100644
--- a/app/src/docs/pickerInput/PickerInput.doc.tsx
+++ b/app/src/docs/pickerInput/PickerInput.doc.tsx
@@ -14,8 +14,8 @@ export class PickerInputDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Resizable, TDocContext.Table, TDocContext.Form],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:CompletePickerInputProps', component: uui.PickerInput },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui:CompletePickerInputProps', component: loveship.PickerInput },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:CompletePickerInputProps', component: promo.PickerInput },
+            [TSkin.Loveship]: { type: '@epam/uui:CompletePickerInputProps', component: loveship.PickerInput },
+            [TSkin.Promo]: { type: '@epam/uui:CompletePickerInputProps', component: promo.PickerInput },
         },
         doc: (doc: DocBuilder<uui.CompletePickerInputProps<any, any>>) => {
             doc.merge('renderToggler', { examples: renderTogglerExamples });
diff --git a/app/src/docs/rangeDatePicker/RangeDatePicker.doc.tsx b/app/src/docs/rangeDatePicker/RangeDatePicker.doc.tsx
index 195afe1ef9..998f8c511c 100644
--- a/app/src/docs/rangeDatePicker/RangeDatePicker.doc.tsx
+++ b/app/src/docs/rangeDatePicker/RangeDatePicker.doc.tsx
@@ -20,8 +20,8 @@ export class RangeDatePickerDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Form, TDocContext.Resizable],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:RangeDatePickerProps', component: uui.RangeDatePicker },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui:RangeDatePickerProps', component: loveship.RangeDatePicker },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:RangeDatePickerProps', component: promo.RangeDatePicker },
+            [TSkin.Loveship]: { type: '@epam/uui:RangeDatePickerProps', component: loveship.RangeDatePicker },
+            [TSkin.Promo]: { type: '@epam/uui:RangeDatePickerProps', component: promo.RangeDatePicker },
         },
         doc: (doc: DocBuilder<uui.RangeDatePickerProps>) => {
             doc.merge('value', {
diff --git a/app/src/docs/richTextView/RichTextView.doc.tsx b/app/src/docs/richTextView/RichTextView.doc.tsx
index 728dfd0d45..d95ae5cfec 100644
--- a/app/src/docs/richTextView/RichTextView.doc.tsx
+++ b/app/src/docs/richTextView/RichTextView.doc.tsx
@@ -13,8 +13,8 @@ export class RichTextViewDoc extends BaseDocsBlock {
         name: 'RichTextView',
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:RichTextViewProps', component: uui.RichTextView },
-            [TSkin.UUI3_loveship]: { type: '@epam/uui:RichTextViewProps', component: loveship.RichTextView },
-            [TSkin.UUI4_promo]: { type: '@epam/uui:RichTextViewProps', component: promo.RichTextView },
+            [TSkin.Loveship]: { type: '@epam/uui:RichTextViewProps', component: loveship.RichTextView },
+            [TSkin.Promo]: { type: '@epam/uui:RichTextViewProps', component: promo.RichTextView },
         },
         doc: (doc: DocBuilder<uui.RichTextViewProps>) => {
             doc.merge('htmlContent', { examples: htmlContent });
diff --git a/app/src/documents/DocumentsPage.tsx b/app/src/documents/DocumentsPage.tsx
index 4322577754..1cf1a2d8f1 100644
--- a/app/src/documents/DocumentsPage.tsx
+++ b/app/src/documents/DocumentsPage.tsx
@@ -1,19 +1,18 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { FlexRow } from '@epam/promo';
-import { AppHeader, Page, Sidebar } from '../common';
+import { DataRowProps } from '@epam/uui-core';
+import { TreeListItem } from '@epam/uui-components';
+import { FlexRow } from '@epam/uui';
+import { AppHeader, Page, Sidebar, TMode, TUUITheme, TypeRefPage } from '../common';
 import { svc } from '../services';
 import { DocItem, items as itemsStructure } from './structure';
 import { useQuery } from '../helpers';
 import { codesandboxService } from '../data/service';
-import { TreeListItem } from '@epam/uui-components';
-import { DataRowProps } from '@epam/uui-core';
-import { TypeRefPage } from '../common';
-import { TSkin } from '@epam/uui-docs';
 
 type DocsQuery = {
     id: string;
-    mode?: string;
-    skin?: TSkin.UUI3_loveship | TSkin.UUI4_promo;
+    mode?: TMode;
+    isSkin?: boolean;
+    theme?: TUUITheme;
     category?: string;
 };
 
@@ -59,13 +58,14 @@ const redirectTo = (query: DocsQuery) =>
 
 export function DocumentsPage() {
     const queryParamId: string = useQuery('id');
-    const mode = useQuery('mode') || 'doc';
-    const skin = useQuery<DocsQuery['skin']>('skin') || TSkin.UUI4_promo;
+    const mode = useQuery<DocsQuery['mode']>('mode') || TMode.doc;
+    const isSkin = useQuery<DocsQuery['isSkin']>('isSkin');
+    const theme = useQuery<DocsQuery['theme']>('theme');
     const itemsInfo = useItems(queryParamId);
 
     useEffect(() => {
         if (itemsInfo && !itemsInfo.PageComponent) {
-            redirectTo({ id: itemsInfo.items[0].id, mode: 'doc', skin: TSkin.UUI4_promo });
+            redirectTo({ id: itemsInfo.items[0].id, mode: TMode.doc, isSkin: isSkin, theme: theme });
         }
     }, [itemsInfo]);
 
@@ -82,10 +82,11 @@ export function DocumentsPage() {
     const onChange = (row: DataRowProps<TreeListItem, string>) => {
         if (row.parentId === 'components') {
             redirectTo({
-                id: row.id,
-                mode,
-                skin,
                 category: row.parentId,
+                mode,
+                id: row.id,
+                isSkin,
+                theme,
             });
         } else {
             redirectTo({ id: row.id, category: row.parentId });
@@ -104,8 +105,8 @@ export function DocumentsPage() {
                             pathname: '/documents',
                             query: {
                                 id: row.id,
-                                mode: (row.parentId && mode) || 'doc',
-                                skin: (row.parentId && skin) || TSkin.UUI4_promo,
+                                mode: (row.parentId && mode),
+                                isSkin: (row.parentId && isSkin),
                                 category: row.parentId,
                             },
                         } }
diff --git a/app/src/documents/structure.ts b/app/src/documents/structure.ts
index bb056fdf62..3bfe0fe221 100644
--- a/app/src/documents/structure.ts
+++ b/app/src/documents/structure.ts
@@ -5,7 +5,7 @@ import {
     NotificationContextDoc, DropdownDoc, MainMenuDoc, ModalsDoc, BadgeDoc, FiltersPanelDoc, TagDoc,
     PaginatorDoc, SpinnerDoc, RichTextViewDoc, TextDoc, TextPlaceholderDoc, DatePickerDoc, RangeDatePickerDoc,
     TimePickerDoc, ControlGroupDoc, NotificationCardDoc, TooltipDoc, LabeledInputDoc,
-    AlertDoc, IconContainerDoc, BlockerDoc, IconsDoc, ColorsPageDoc, DownloadsDoc, ProjectsDoc, ReleaseNotesDoc,
+    AlertDoc, IconContainerDoc, BlockerDoc, IconsDoc, DownloadsDoc, ProjectsDoc, ReleaseNotesDoc,
     FlexRowDoc, FlexCellDoc, FlexSpacerDoc, PanelDoc, GettingStartedForDesignersDoc, RichTextEditorDoc, FormDoc,
     LockContextDoc, AvatarDoc, InternationalizationDoc, FileUploadDoc, SliderDoc, SliderRatingDoc,
     AvatarStackDoc, PickerListDoc, TeamDoc, AnalyticsContextDoc, DragAndDropDoc, VirtualListDoc,
@@ -122,7 +122,7 @@ export const items: DocItem[] = [
 
     { id: 'assets', name: 'Assets' },
     { id: 'icons', name: 'Icons', component: IconsDoc, parentId: 'assets' },
-    { id: 'promoColors', name: 'Colors', component: ColorsPageDoc, parentId: 'assets' },
+    // { id: 'promoColors', name: 'Colors', component: ColorsPageDoc, parentId: 'assets' },
     { id: 'downloads', name: 'Downloads', component: DownloadsDoc, parentId: 'assets' },
 
     { id: 'dataSources', name: 'DataSources' },
diff --git a/app/src/helpers/useTheme.tsx b/app/src/helpers/useTheme.tsx
index e5ea66135d..adfa6e106f 100644
--- a/app/src/helpers/useTheme.tsx
+++ b/app/src/helpers/useTheme.tsx
@@ -1,17 +1,24 @@
 import { useState, useEffect } from 'react';
+import { useUuiContext } from '@epam/uui-core';
+import { TUUITheme } from '../common/docs/BaseDocsBlock';
 
 export const useTheme = () => {
-    const [theme, setTheme] = useState<string>(localStorage.getItem('app-theme') || 'uui-theme-promo');
+    const { uuiRouter } = useUuiContext();
+    const [theme, setTheme] = useState<TUUITheme>(
+        uuiRouter.getCurrentLink().query['theme'] || (localStorage.getItem('app-theme') as TUUITheme) || 'uui-theme-loveship',
+    );
 
-    const toggleTheme = (newTheme: string) => {
+    const toggleTheme = (newTheme: TUUITheme) => {
         setTheme(newTheme);
         localStorage.setItem('app-theme', newTheme);
     };
 
     // Apply the current theme to the body element
     useEffect(() => {
+        const { pathname, query } = uuiRouter.getCurrentLink();
         const currentTheme = document.body.classList.value.match(/uui-theme-(\S+)\s*/)[0];
         document.body.classList.replace(currentTheme, theme);
+        uuiRouter.redirect({ pathname: pathname, query: { ...query, theme: theme } });
     }, [theme]);
 
     return {
diff --git a/app/src/icons/logo.svg b/app/src/icons/logo.svg
new file mode 100644
index 0000000000..e37925d580
--- /dev/null
+++ b/app/src/icons/logo.svg
@@ -0,0 +1,21 @@
+<svg width="168px" height="60px" viewBox="0 0 168 60" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <title>logo/UUI</title>
+    <g id="Symbols" fill-rule="evenodd">
+        <g id="Header/Clear">
+            <g id="Header">
+                <g id="logo/UUI">
+                    <rect id="bg" opacity="0" x="0" y="0" width="168" height="60"></rect>
+                    <rect id="area" opacity="0" x="18" y="12" width="36" height="36"></rect>
+                    <path d="M29.8965517,26.6 L29.8965517,33.3 L36,36.7 L42.1034483,33.3 L42.1034483,26.6 L36,23.2 L29.8965517,26.6 Z M25.4482759,23.4 L36.1034483,17.4 L46.7586207,23.4 L46.7586207,28.8 L51,26.4 L51,21.4 L35.8965517,13 L21,21.4 L21,26.4 L25.4482759,28.9 L25.4482759,23.4 Z M46.7586207,33 L46.7586207,36.5 L36.1034483,42.5 L25.4482759,36.5 L25.4482759,33.1 L21,30.7 L21,38.5 L36,47 L51,38.5 L51,30.7 L46.7586207,33 Z" id="Shape"></path>
+                    <path d="M65.442575,32 C68.7783467,32 70.8632041,30.1589041 70.8632041,25.4465753 L70.8632041,17.4027397 L68.4272129,17.4027397 L68.4272129,25.6438356 C68.4272129,28.7561644 67.1982443,29.7863014 65.442575,29.7863014 C63.7088515,29.7863014 62.5457206,28.7561644 62.5457206,25.6438356 L62.5457206,17.4027397 L60,17.4027397 L60,25.4465753 C60,30.1589041 62.1287491,32 65.442575,32 Z M76.7446964,31.7369863 L76.7446964,24.2191781 C77.644477,23.3424658 78.2589612,22.8821918 79.2026335,22.8821918 C80.3877103,22.8821918 80.8924653,23.539726 80.8924653,25.3150685 L80.8924653,31.7369863 L83.4162399,31.7369863 L83.4162399,24.9863014 C83.4162399,22.2684932 82.4067301,20.7123288 80.102414,20.7123288 C78.632041,20.7123288 77.5347476,21.4794521 76.5691295,22.4219178 L76.481346,22.4219178 L76.3057791,20.9753425 L74.2209217,20.9753425 L74.2209217,31.7369863 L76.7446964,31.7369863 Z M87.7834674,19.090411 C88.683248,19.090411 89.341624,18.4986301 89.341624,17.6657534 C89.341624,16.8109589 88.683248,16.2191781 87.7834674,16.2191781 C86.8836869,16.2191781 86.2253109,16.8109589 86.2253109,17.6657534 C86.2253109,18.4986301 86.8836869,19.090411 87.7834674,19.090411 Z M89.0343819,31.7369863 L89.0343819,20.9753425 L86.5106072,20.9753425 L86.5106072,31.7369863 L89.0343819,31.7369863 Z M95.2231163,31.7369863 L95.2231163,22.969863 L97.3299195,22.969863 L97.3299195,20.9753425 L95.2231163,20.9753425 L95.2231163,19.8136986 C95.2231163,18.5643836 95.7059254,17.9945205 96.5837601,17.9945205 C96.9568398,17.9945205 97.3738113,18.0821918 97.7688369,18.2575342 L98.2516459,16.3726027 C97.7688369,16.1753425 97.0446233,16 96.2765179,16 C93.7307974,16 92.6993416,17.6219178 92.6993416,19.8575342 L92.6993416,20.9753425 L91.2509144,21.0849315 L91.2509144,22.969863 L92.6993416,22.969863 L92.6993416,31.7369863 L95.2231163,31.7369863 Z M100.490124,19.090411 C101.389905,19.090411 102.048281,18.4986301 102.048281,17.6657534 C102.048281,16.8109589 101.389905,16.2191781 100.490124,16.2191781 C99.5903438,16.2191781 98.9319678,16.8109589 98.9319678,17.6657534 C98.9319678,18.4986301 99.5903438,19.090411 100.490124,19.090411 Z M101.741039,31.7369863 L101.741039,20.9753425 L99.2172641,20.9753425 L99.2172641,31.7369863 L101.741039,31.7369863 Z M109.575713,32 C110.936357,32 112.231163,31.5178082 113.262619,30.8383562 L112.40673,29.260274 C111.616679,29.7643836 110.826628,30.0493151 109.904901,30.0493151 C108.171178,30.0493151 106.942209,28.9534247 106.722751,27.0465753 L113.569861,27.0465753 C113.635699,26.7835616 113.67959,26.3013699 113.67959,25.8191781 C113.67959,22.8164384 112.14338,20.7123288 109.224579,20.7123288 C106.700805,20.7123288 104.264813,22.860274 104.264813,26.3671233 C104.264813,29.9178082 106.591075,32 109.575713,32 Z M111.485004,25.3369863 L106.700805,25.3369863 C106.920263,23.6054795 108.017557,22.6630137 109.290417,22.6630137 C110.76079,22.6630137 111.485004,23.6712329 111.485004,25.3369863 Z M119.868325,32 C121.031456,32 122.128749,31.3643836 122.9188,30.5753425 L123.006584,30.5753425 L123.182151,31.7369863 L125.267008,31.7369863 L125.267008,16.2630137 L122.743233,16.2630137 L122.743233,20.1643836 L122.831017,21.8958904 C121.997074,21.1726027 121.228969,20.7123288 120,20.7123288 C117.651792,20.7123288 115.43526,22.860274 115.43526,26.3671233 C115.43526,29.9178082 117.168983,32 119.868325,32 Z M120.482809,29.9178082 C118.924653,29.9178082 118.046818,28.6684932 118.046818,26.3452055 C118.046818,24.0876712 119.166057,22.7945205 120.548647,22.7945205 C121.27286,22.7945205 121.997074,23.0356164 122.743233,23.6931507 L122.743233,28.7123288 C122.01902,29.5452055 121.316752,29.9178082 120.482809,29.9178082 Z M138.456474,32 C141.792246,32 143.877103,30.1589041 143.877103,25.4465753 L143.877103,17.4027397 L141.441112,17.4027397 L141.441112,25.6438356 C141.441112,28.7561644 140.212143,29.7863014 138.456474,29.7863014 C136.722751,29.7863014 135.55962,28.7561644 135.55962,25.6438356 L135.55962,17.4027397 L133.013899,17.4027397 L133.013899,25.4465753 C133.013899,30.1589041 135.142648,32 138.456474,32 Z M150,31.7369863 L150,17.4027397 L147.454279,17.4027397 L147.454279,31.7369863 L150,31.7369863 Z" id="UnifiedUI" fill-rule="nonzero" opacity="0.900000036"></path>
+                    <g id="digital_platform" transform="translate(60.000000, 38.000000)">
+                        <g id="digital_platform_X2">
+                            <path d="M-1.20792265e-12,7.0133206 L-1.20792265e-12,0.341323428 L1.64,0.341323428 C3.66,0.341323428 4.74,1.6233206 4.74,3.7033206 C4.74,5.7933206 3.66,7.0133206 1.68,7.0133206 L-1.20792265e-12,7.0133206 Z M0.83,6.3333206 L1.58,6.3333206 C3.11,6.3333206 3.88,5.3633206 3.88,3.7033206 C3.88,2.0533206 3.11,1.02132343 1.58,1.02132343 L0.83,1.02132343 L0.83,6.3333206 Z M6.02164223,7.0133206 L6.02164223,2.1533206 L6.84164223,2.1533206 L6.84164223,7.0133206 L6.02164223,7.0133206 Z M6.5079085,1.06 C6.1879085,1.06 5.9379085,0.84 5.9379085,0.53 C5.9379085,0.21 6.1879085,-2.66453526e-15 6.5079085,-2.66453526e-15 C6.8279085,-2.66453526e-15 7.0779085,0.21 7.0779085,0.53 C7.0779085,0.84 6.8279085,1.06 6.5079085,1.06 Z M10.0032935,9.03567383 C8.81329348,9.03567383 8.00334797,8.61 8.00334797,7.77 C8.00334797,7.36 8.27334797,6.97 8.71334797,6.67 L8.71334797,6.63 C8.47334797,6.48 8.28334797,6.22 8.28334797,5.84 C8.28334797,5.43 8.56334797,5.11 8.81334797,4.94 L8.81334797,4.9 C8.49334797,4.64 8.18334797,4.3233206 8.18334797,3.7433206 C8.18334797,2.6833206 9.02334797,2.0133206 10.013348,2.0133206 C10.283348,2.0133206 10.523348,2.0633206 10.703348,2.1333206 L12.393348,2.1333206 L12.393348,2.7633206 L11.393348,2.7633206 C11.623348,2.9833206 11.793348,3.3533206 11.793348,3.7633206 C11.793348,4.8033206 11.003348,5.3 10.013348,5.3 C9.77334797,5.3 9.50334797,5.24 9.28334797,5.13 C9.11334797,5.28 8.97334797,5.44 8.97334797,5.71 C8.97334797,6.02 9.17334797,6.24 9.83334797,6.24 L10.773348,6.24 C11.903348,6.24 12.473348,6.59 12.473348,7.4 C12.473348,8.3 11.5132935,9.03567383 10.0032935,9.03567383 Z M10.013348,4.75 C10.573348,4.75 11.043348,4.4533206 11.043348,3.7433206 C11.043348,3.0333206 10.583348,2.6133206 10.013348,2.6133206 C9.44334797,2.6133206 8.98334797,3.0333206 8.98334797,3.7433206 C8.98334797,4.4533206 9.45334797,4.75 10.013348,4.75 Z M10.1232935,8.46567383 C11.0532935,8.46567383 11.673348,8.03 11.673348,7.52 C11.673348,7.07 11.323348,6.92 10.693348,6.92 L9.85334797,6.92 C9.66334797,6.92 9.43334797,6.9 9.22334797,6.84 C8.87334797,7.09 8.72334797,7.38 8.72334797,7.66 C8.72334797,8.18 9.24329348,8.46567383 10.1232935,8.46567383 Z M14.0095652,6.92 L14.0095652,2.06 L14.8295652,2.06 L14.8295652,6.92 L14.0095652,6.92 Z M14.3891329,1.06 C14.0691329,1.06 13.8191329,0.84 13.8191329,0.53 C13.8191329,0.21 14.0691329,-2.66453526e-15 14.3891329,-2.66453526e-15 C14.7091329,-2.66453526e-15 14.9591329,0.21 14.9591329,0.53 C14.9591329,0.84 14.7091329,1.06 14.3891329,1.06 Z M18.395,7.0233206 C17.355,7.0233206 17.005,6.3633206 17.005,5.4033206 L17.005,2.7133206 L16.285,2.7133206 L16.285,2.0933206 L17.045,2.0433206 L17.145,1.0133206 L17.835,1.0133206 L17.835,2.0433206 L19.0079265,2.0433206 L19.0079265,2.7133206 L17.835,2.7133206 L17.835,5.4133206 C17.835,6.0133206 18.025,6.3533206 18.585,6.3533206 C18.755,6.3533206 18.975,6.2833206 19.135,6.2233206 L19.295,6.8433206 C19.025,6.9333206 18.695,7.0233206 18.395,7.0233206 Z M21.6083857,7.06 C20.7983857,7.06 20.1883857,6.55 20.1883857,5.68 C20.1883857,4.62 21.0983857,4.09 23.1683857,3.86 C23.1683857,3.24 22.9683857,2.64 22.1683857,2.64 C21.6083857,2.64 21.0983857,2.9 20.7183857,3.16 L20.3983857,2.59 C20.8483857,2.3 21.5283857,1.96 22.3083857,1.96 C23.4983857,1.96 23.9983857,2.75 23.9983857,3.96 L23.9983857,6.94 L23.3183857,6.94 L23.2483857,6.36 L23.2183857,6.36 C22.7583857,6.74 22.2183857,7.06 21.6083857,7.06 Z M21.8483857,6.4 C22.3183857,6.4 22.6983857,6.17 23.1683857,5.75 L23.1683857,4.4 C21.5483857,4.6 20.9883857,5 20.9883857,5.62 C20.9883857,6.17 21.3683857,6.4 21.8483857,6.4 Z M26.0843572,6.94 C25.4643572,6.94 25.2143572,6.55 25.2143572,5.84 L25.1046505,-8.8817842e-15 L25.9246505,-8.8817842e-15 L26.0343572,5.9 C26.0343572,6.16 26.1443572,6.26 26.2643572,6.26 C26.3143572,6.26 26.3543572,6.26 26.4443572,6.24 L26.5543572,6.86 C26.4443572,6.91 26.3043572,6.94 26.0843572,6.94 Z M31.070207,7.0033206 L31.070207,0.0833206019 L32.940207,0.0833206019 C34.410207,0.0833206019 35.400207,0.673320602 35.400207,2.1133206 C35.400207,3.4933206 34.420207,3.9533206 32.980207,3.9533206 L31.900207,3.9533206 L31.900207,7.0033206 L31.070207,7.0033206 Z M31.900207,3.2733206 L32.880207,3.2733206 C34.020207,3.2733206 34.570207,3.0433206 34.570207,2.1133206 C34.570207,1.1633206 33.990207,0.753320602 32.840207,0.753320602 L31.900207,0.753320602 L31.900207,3.2733206 Z M37.9071261,6.9933206 C37.2871261,6.9933206 37.0371261,6.6033206 37.0371261,5.8933206 L37.0371261,0.0133206019 L37.8571261,0.0133206019 L37.8571261,5.9533206 C37.8571261,6.2133206 37.9671261,6.3133206 38.0871261,6.3133206 C38.1371261,6.3133206 38.1771261,6.3133206 38.2671261,6.2933206 L38.3771261,6.9133206 C38.2671261,6.9633206 38.1271261,6.9933206 37.9071261,6.9933206 Z M40.6033067,7.0133206 C39.7933067,7.0133206 39.1833067,6.5033206 39.1833067,5.6333206 C39.1833067,4.5733206 40.0933067,4.0433206 42.1633067,3.8133206 C42.1633067,3.1933206 41.9633067,2.5933206 41.1633067,2.5933206 C40.6033067,2.5933206 40.0933067,2.8533206 39.7133067,3.1133206 L39.3933067,2.5433206 C39.8433067,2.2533206 40.5233067,1.9133206 41.3033067,1.9133206 C42.4933067,1.9133206 42.9933067,2.7033206 42.9933067,3.9133206 L42.9933067,6.8933206 L42.3133067,6.8933206 L42.2433067,6.3133206 L42.2133067,6.3133206 C41.7533067,6.6933206 41.2133067,7.0133206 40.6033067,7.0133206 Z M40.8433067,6.3533206 C41.3133067,6.3533206 41.6933067,6.1233206 42.1633067,5.7033206 L42.1633067,4.3533206 C40.5433067,4.5533206 39.9833067,4.9533206 39.9833067,5.5733206 C39.9833067,6.1233206 40.3633067,6.3533206 40.8433067,6.3533206 Z M46.396577,7.0233206 C45.356577,7.0233206 45.006577,6.3633206 45.006577,5.4033206 L45.006577,2.7133206 L44.286577,2.7133206 L44.286577,2.0933206 L45.046577,2.0433206 L45.146577,1.0133206 L45.836577,1.0133206 L45.836577,2.0433206 L47.0095035,2.0433206 L47.0095035,2.7133206 L45.836577,2.7133206 L45.836577,5.4133206 C45.836577,6.0133206 46.026577,6.3533206 46.586577,6.3533206 C46.756577,6.3533206 46.976577,6.2833206 47.136577,6.2233206 L47.296577,6.8433206 C47.026577,6.9333206 46.696577,7.0233206 46.396577,7.0233206 Z M51.0299999,0.243320602 L51.1245655,0.873320602 C50.9445655,0.793320602 50.7545655,0.753320602 50.5745655,0.753320602 C50.1145655,0.753320602 49.8945655,1.0733206 49.8945655,1.6933206 L49.8945655,2.1533206 L50.9245655,2.1533206 L50.9245655,2.8233206 L49.8945655,2.8233206 L49.8945655,7.0133206 L49.0745655,7.0133206 L49.0745655,2.8233206 L48.4145655,2.8233206 L48.4145655,2.2033206 L49.0745655,2.1533206 L49.0745655,1.6933206 C49.0745655,0.703320602 49.5245655,0.0833206019 50.4945655,0.0833206019 C50.7945655,0.0833206019 50.8099999,0.153320602 51.0299999,0.243320602 Z M54.5010106,7.0133206 C53.3110106,7.0133206 52.2510106,6.0833206 52.2510106,4.4733206 C52.2510106,2.8433206 53.3110106,1.9133206 54.5010106,1.9133206 C55.6910106,1.9133206 56.7510106,2.8433206 56.7510106,4.4733206 C56.7510106,6.0833206 55.6910106,7.0133206 54.5010106,7.0133206 Z M54.5010106,6.3333206 C55.3410106,6.3333206 55.9010106,5.5833206 55.9010106,4.4733206 C55.9010106,3.3533206 55.3410106,2.5933206 54.5010106,2.5933206 C53.6710106,2.5933206 53.1010106,3.3533206 53.1010106,4.4733206 C53.1010106,5.5833206 53.6710106,6.3333206 54.5010106,6.3333206 Z M57.9816865,7.0233206 L57.9816865,2.1633206 L58.6616865,2.1633206 L58.7316865,3.0433206 L58.7616865,3.0433206 C59.0916865,2.4333206 59.5916865,2.0433206 60.1416865,2.0433206 C60.3516865,2.0433206 60.5016865,2.0733206 60.6616865,2.1433206 L60.5016865,2.8633206 C60.3416865,2.8133206 60.2316865,2.7833206 60.0316865,2.7833206 C59.6216865,2.7833206 59.1316865,3.0833206 58.8016865,3.9033206 L58.8016865,7.0233206 L57.9816865,7.0233206 Z M62.1208786,7.0133206 L62.1208786,2.1533206 L62.8008786,2.1533206 L62.8708786,2.8533206 L62.9008786,2.8533206 C63.3208786,2.3933206 63.8308786,2.0333206 64.4108786,2.0333206 C65.1508786,2.0333206 65.5508786,2.3833206 65.7508786,2.9633206 C66.2608786,2.4133206 66.7608786,2.0333206 67.3508786,2.0333206 C68.3508786,2.0333206 68.8308786,2.6933206 68.8308786,3.9333206 L68.8308786,7.0133206 L68.0108786,7.0133206 L68.0108786,4.0433206 C68.0108786,3.1333206 67.7208786,2.7433206 67.1108786,2.7433206 C66.7308786,2.7433206 66.3408786,2.9933206 65.8908786,3.4933206 L65.8908786,7.0133206 L65.0708786,7.0133206 L65.0708786,4.0433206 C65.0708786,3.1333206 64.7808786,2.7433206 64.1608786,2.7433206 C63.8008786,2.7433206 63.3908786,2.9933206 62.9408786,3.4933206 L62.9408786,7.0133206 L62.1208786,7.0133206 Z" id="Digital_Platform"></path>
+                            <path d="M-1.20792265e-12,7.0133206 L-1.20792265e-12,0.341323428 L1.64,0.341323428 C3.66,0.341323428 4.74,1.6233206 4.74,3.7033206 C4.74,5.7933206 3.66,7.0133206 1.68,7.0133206 L-1.20792265e-12,7.0133206 Z M0.83,6.3333206 L1.58,6.3333206 C3.11,6.3333206 3.88,5.3633206 3.88,3.7033206 C3.88,2.0533206 3.11,1.02132343 1.58,1.02132343 L0.83,1.02132343 L0.83,6.3333206 Z M6.02164223,7.0133206 L6.02164223,2.1533206 L6.84164223,2.1533206 L6.84164223,7.0133206 L6.02164223,7.0133206 Z M6.5079085,1.06 C6.1879085,1.06 5.9379085,0.84 5.9379085,0.53 C5.9379085,0.21 6.1879085,-2.66453526e-15 6.5079085,-2.66453526e-15 C6.8279085,-2.66453526e-15 7.0779085,0.21 7.0779085,0.53 C7.0779085,0.84 6.8279085,1.06 6.5079085,1.06 Z M10.0032935,9.03567383 C8.81329348,9.03567383 8.00334797,8.61 8.00334797,7.77 C8.00334797,7.36 8.27334797,6.97 8.71334797,6.67 L8.71334797,6.63 C8.47334797,6.48 8.28334797,6.22 8.28334797,5.84 C8.28334797,5.43 8.56334797,5.11 8.81334797,4.94 L8.81334797,4.9 C8.49334797,4.64 8.18334797,4.3233206 8.18334797,3.7433206 C8.18334797,2.6833206 9.02334797,2.0133206 10.013348,2.0133206 C10.283348,2.0133206 10.523348,2.0633206 10.703348,2.1333206 L12.393348,2.1333206 L12.393348,2.7633206 L11.393348,2.7633206 C11.623348,2.9833206 11.793348,3.3533206 11.793348,3.7633206 C11.793348,4.8033206 11.003348,5.3 10.013348,5.3 C9.77334797,5.3 9.50334797,5.24 9.28334797,5.13 C9.11334797,5.28 8.97334797,5.44 8.97334797,5.71 C8.97334797,6.02 9.17334797,6.24 9.83334797,6.24 L10.773348,6.24 C11.903348,6.24 12.473348,6.59 12.473348,7.4 C12.473348,8.3 11.5132935,9.03567383 10.0032935,9.03567383 Z M10.013348,4.75 C10.573348,4.75 11.043348,4.4533206 11.043348,3.7433206 C11.043348,3.0333206 10.583348,2.6133206 10.013348,2.6133206 C9.44334797,2.6133206 8.98334797,3.0333206 8.98334797,3.7433206 C8.98334797,4.4533206 9.45334797,4.75 10.013348,4.75 Z M10.1232935,8.46567383 C11.0532935,8.46567383 11.673348,8.03 11.673348,7.52 C11.673348,7.07 11.323348,6.92 10.693348,6.92 L9.85334797,6.92 C9.66334797,6.92 9.43334797,6.9 9.22334797,6.84 C8.87334797,7.09 8.72334797,7.38 8.72334797,7.66 C8.72334797,8.18 9.24329348,8.46567383 10.1232935,8.46567383 Z M14.0095652,6.92 L14.0095652,2.06 L14.8295652,2.06 L14.8295652,6.92 L14.0095652,6.92 Z M14.3891329,1.06 C14.0691329,1.06 13.8191329,0.84 13.8191329,0.53 C13.8191329,0.21 14.0691329,-2.66453526e-15 14.3891329,-2.66453526e-15 C14.7091329,-2.66453526e-15 14.9591329,0.21 14.9591329,0.53 C14.9591329,0.84 14.7091329,1.06 14.3891329,1.06 Z M18.395,7.0233206 C17.355,7.0233206 17.005,6.3633206 17.005,5.4033206 L17.005,2.7133206 L16.285,2.7133206 L16.285,2.0933206 L17.045,2.0433206 L17.145,1.0133206 L17.835,1.0133206 L17.835,2.0433206 L19.0079265,2.0433206 L19.0079265,2.7133206 L17.835,2.7133206 L17.835,5.4133206 C17.835,6.0133206 18.025,6.3533206 18.585,6.3533206 C18.755,6.3533206 18.975,6.2833206 19.135,6.2233206 L19.295,6.8433206 C19.025,6.9333206 18.695,7.0233206 18.395,7.0233206 Z M21.6083857,7.06 C20.7983857,7.06 20.1883857,6.55 20.1883857,5.68 C20.1883857,4.62 21.0983857,4.09 23.1683857,3.86 C23.1683857,3.24 22.9683857,2.64 22.1683857,2.64 C21.6083857,2.64 21.0983857,2.9 20.7183857,3.16 L20.3983857,2.59 C20.8483857,2.3 21.5283857,1.96 22.3083857,1.96 C23.4983857,1.96 23.9983857,2.75 23.9983857,3.96 L23.9983857,6.94 L23.3183857,6.94 L23.2483857,6.36 L23.2183857,6.36 C22.7583857,6.74 22.2183857,7.06 21.6083857,7.06 Z M21.8483857,6.4 C22.3183857,6.4 22.6983857,6.17 23.1683857,5.75 L23.1683857,4.4 C21.5483857,4.6 20.9883857,5 20.9883857,5.62 C20.9883857,6.17 21.3683857,6.4 21.8483857,6.4 Z M26.0843572,6.94 C25.4643572,6.94 25.2143572,6.55 25.2143572,5.84 L25.1046505,-8.8817842e-15 L25.9246505,-8.8817842e-15 L26.0343572,5.9 C26.0343572,6.16 26.1443572,6.26 26.2643572,6.26 C26.3143572,6.26 26.3543572,6.26 26.4443572,6.24 L26.5543572,6.86 C26.4443572,6.91 26.3043572,6.94 26.0843572,6.94 Z M31.070207,7.0033206 L31.070207,0.0833206019 L32.940207,0.0833206019 C34.410207,0.0833206019 35.400207,0.673320602 35.400207,2.1133206 C35.400207,3.4933206 34.420207,3.9533206 32.980207,3.9533206 L31.900207,3.9533206 L31.900207,7.0033206 L31.070207,7.0033206 Z M31.900207,3.2733206 L32.880207,3.2733206 C34.020207,3.2733206 34.570207,3.0433206 34.570207,2.1133206 C34.570207,1.1633206 33.990207,0.753320602 32.840207,0.753320602 L31.900207,0.753320602 L31.900207,3.2733206 Z M37.9071261,6.9933206 C37.2871261,6.9933206 37.0371261,6.6033206 37.0371261,5.8933206 L37.0371261,0.0133206019 L37.8571261,0.0133206019 L37.8571261,5.9533206 C37.8571261,6.2133206 37.9671261,6.3133206 38.0871261,6.3133206 C38.1371261,6.3133206 38.1771261,6.3133206 38.2671261,6.2933206 L38.3771261,6.9133206 C38.2671261,6.9633206 38.1271261,6.9933206 37.9071261,6.9933206 Z M40.6033067,7.0133206 C39.7933067,7.0133206 39.1833067,6.5033206 39.1833067,5.6333206 C39.1833067,4.5733206 40.0933067,4.0433206 42.1633067,3.8133206 C42.1633067,3.1933206 41.9633067,2.5933206 41.1633067,2.5933206 C40.6033067,2.5933206 40.0933067,2.8533206 39.7133067,3.1133206 L39.3933067,2.5433206 C39.8433067,2.2533206 40.5233067,1.9133206 41.3033067,1.9133206 C42.4933067,1.9133206 42.9933067,2.7033206 42.9933067,3.9133206 L42.9933067,6.8933206 L42.3133067,6.8933206 L42.2433067,6.3133206 L42.2133067,6.3133206 C41.7533067,6.6933206 41.2133067,7.0133206 40.6033067,7.0133206 Z M40.8433067,6.3533206 C41.3133067,6.3533206 41.6933067,6.1233206 42.1633067,5.7033206 L42.1633067,4.3533206 C40.5433067,4.5533206 39.9833067,4.9533206 39.9833067,5.5733206 C39.9833067,6.1233206 40.3633067,6.3533206 40.8433067,6.3533206 Z M46.396577,7.0233206 C45.356577,7.0233206 45.006577,6.3633206 45.006577,5.4033206 L45.006577,2.7133206 L44.286577,2.7133206 L44.286577,2.0933206 L45.046577,2.0433206 L45.146577,1.0133206 L45.836577,1.0133206 L45.836577,2.0433206 L47.0095035,2.0433206 L47.0095035,2.7133206 L45.836577,2.7133206 L45.836577,5.4133206 C45.836577,6.0133206 46.026577,6.3533206 46.586577,6.3533206 C46.756577,6.3533206 46.976577,6.2833206 47.136577,6.2233206 L47.296577,6.8433206 C47.026577,6.9333206 46.696577,7.0233206 46.396577,7.0233206 Z M51.0299999,0.243320602 L51.1245655,0.873320602 C50.9445655,0.793320602 50.7545655,0.753320602 50.5745655,0.753320602 C50.1145655,0.753320602 49.8945655,1.0733206 49.8945655,1.6933206 L49.8945655,2.1533206 L50.9245655,2.1533206 L50.9245655,2.8233206 L49.8945655,2.8233206 L49.8945655,7.0133206 L49.0745655,7.0133206 L49.0745655,2.8233206 L48.4145655,2.8233206 L48.4145655,2.2033206 L49.0745655,2.1533206 L49.0745655,1.6933206 C49.0745655,0.703320602 49.5245655,0.0833206019 50.4945655,0.0833206019 C50.7945655,0.0833206019 50.8099999,0.153320602 51.0299999,0.243320602 Z M54.5010106,7.0133206 C53.3110106,7.0133206 52.2510106,6.0833206 52.2510106,4.4733206 C52.2510106,2.8433206 53.3110106,1.9133206 54.5010106,1.9133206 C55.6910106,1.9133206 56.7510106,2.8433206 56.7510106,4.4733206 C56.7510106,6.0833206 55.6910106,7.0133206 54.5010106,7.0133206 Z M54.5010106,6.3333206 C55.3410106,6.3333206 55.9010106,5.5833206 55.9010106,4.4733206 C55.9010106,3.3533206 55.3410106,2.5933206 54.5010106,2.5933206 C53.6710106,2.5933206 53.1010106,3.3533206 53.1010106,4.4733206 C53.1010106,5.5833206 53.6710106,6.3333206 54.5010106,6.3333206 Z M57.9816865,7.0233206 L57.9816865,2.1633206 L58.6616865,2.1633206 L58.7316865,3.0433206 L58.7616865,3.0433206 C59.0916865,2.4333206 59.5916865,2.0433206 60.1416865,2.0433206 C60.3516865,2.0433206 60.5016865,2.0733206 60.6616865,2.1433206 L60.5016865,2.8633206 C60.3416865,2.8133206 60.2316865,2.7833206 60.0316865,2.7833206 C59.6216865,2.7833206 59.1316865,3.0833206 58.8016865,3.9033206 L58.8016865,7.0233206 L57.9816865,7.0233206 Z M62.1208786,7.0133206 L62.1208786,2.1533206 L62.8008786,2.1533206 L62.8708786,2.8533206 L62.9008786,2.8533206 C63.3208786,2.3933206 63.8308786,2.0333206 64.4108786,2.0333206 C65.1508786,2.0333206 65.5508786,2.3833206 65.7508786,2.9633206 C66.2608786,2.4133206 66.7608786,2.0333206 67.3508786,2.0333206 C68.3508786,2.0333206 68.8308786,2.6933206 68.8308786,3.9333206 L68.8308786,7.0133206 L68.0108786,7.0133206 L68.0108786,4.0433206 C68.0108786,3.1333206 67.7208786,2.7433206 67.1108786,2.7433206 C66.7308786,2.7433206 66.3408786,2.9933206 65.8908786,3.4933206 L65.8908786,7.0133206 L65.0708786,7.0133206 L65.0708786,4.0433206 C65.0708786,3.1333206 64.7808786,2.7433206 64.1608786,2.7433206 C63.8008786,2.7433206 63.3908786,2.9933206 62.9408786,3.4933206 L62.9408786,7.0133206 L62.1208786,7.0133206 Z" id="Digital_Platform"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/app/src/index.module.scss b/app/src/index.module.scss
index 6b8ffae384..7793516969 100644
--- a/app/src/index.module.scss
+++ b/app/src/index.module.scss
@@ -1,4 +1,6 @@
 @use '~@epam/assets/theme/theme_promo' as *;
+/* Fonts for vanilla */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
 body, html {
     height: 100%;
@@ -8,15 +10,15 @@ body {
     margin: 0;
     display: flex;
     flex-direction: column;
+    background: var(--uui-app-bg);
 
     > div {
         flex: 1 0 auto;
     }
 
-    :global(.landing) {
-        :global {
-            @include theme-promo();
-        }
+    &:global(.uui-theme-vanilla_thunder) {
+        --font-inter: 'Inter', sans-serif;
+        --font-museo-sans: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;
     }
 }
 
diff --git a/app/src/landing/BenefitsBlock.module.scss b/app/src/landing/BenefitsBlock.module.scss
index f5b2099c1a..59780b5b1e 100644
--- a/app/src/landing/BenefitsBlock.module.scss
+++ b/app/src/landing/BenefitsBlock.module.scss
@@ -1,14 +1,11 @@
-@use '~@epam/promo/assets/styles/colors' as *;
-@use '~@epam/promo/assets/styles/fonts' as *;
-
 @mixin control-focus($width: 2px, $offset: 2px) {
-    outline: $blue auto $width;
+    outline: var(--uui-info-50) auto $width;
     outline-offset: $offset;
 }
 
 .layout {
     margin: 0 auto;
-    background-color: #F5F6FA;
+    background-color: var(--uui-surface-low);
 
     .benefits {
         display: flex;
@@ -57,8 +54,8 @@
                         }
 
                         &-active {
-                            border-left: 6px solid $blue;
-                            background-color: white;
+                            border-left: 6px solid var(--uui-info-50);
+                            background-color: var(--uui-surface-main);
                         }
 
                         & div {
@@ -88,7 +85,7 @@
                         border-radius: 50%;
                         top: 14px;
                         left: 0;
-                        background-color: $blue;
+                        background-color: var(--uui-info-50);
                     }
 
                     &:last-child {
@@ -118,7 +115,7 @@
                         .actions-container {
                             display: flex;
                             flex-direction: row;
-                            border-bottom: 1px solid #CED0DB;
+                            border-bottom: 1px solid var(--uui-divider);
                             justify-content: space-between;
                         }
 
@@ -133,17 +130,17 @@
                             .reason-caption {
                                 font-size: 14px;
                                 line-height: 24px;
-                                font-family: $font-sans-semibold;
-                                color: $gray80;
+                                font-family: var(--font-semibold);
+                                color: var(--uui-text-primary);
                             }
 
                             &-active {
                                 border-left: 0;
-                                border-bottom: 3px solid $blue;
+                                border-bottom: 3px solid var(--uui-info-50);
                                 background-color: transparent;
 
                                 .reason-caption {
-                                    color: $blue;
+                                    color: var(--uui-info-50);
                                 }
                             }
                         }
@@ -191,7 +188,7 @@
                             min-width: 664px;
                             display: flex;
                             flex-direction: row;
-                            border-bottom: 1px solid #CED0DB;
+                            border-bottom: 1px solid var(--uui-divider);
                             justify-content: space-between;
                         }
 
@@ -206,17 +203,17 @@
                             .reason-caption {
                                 font-size: 14px;
                                 line-height: 24px;
-                                font-family: $font-sans-semibold;
-                                color: $gray80;
+                                font-family: var(--font-semibold);
+                                color: var(--uui-text-primary);
                             }
 
                             &-active {
                                 border-left: 0;
-                                border-bottom: 3px solid $blue;
+                                border-bottom: 3px solid var(--uui-info-50);
                                 background-color: transparent;
 
                                 .reason-caption {
-                                    color: $blue;
+                                    color: var(--uui-info-50);
                                 }
                             }
                         }
diff --git a/app/src/landing/BenefitsBlock.tsx b/app/src/landing/BenefitsBlock.tsx
index 1943d326cb..18698e67e6 100644
--- a/app/src/landing/BenefitsBlock.tsx
+++ b/app/src/landing/BenefitsBlock.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FlexRow, Text } from '@epam/promo';
+import { FlexRow, Text } from '@epam/uui';
 import css from './BenefitsBlock.module.scss';
 import { cx } from '@epam/uui-core';
 import { svc } from '../services';
@@ -54,7 +54,7 @@ export class BenefitsBlock extends React.Component<{}, BenefitsBlockState> {
             <div className={ css.layout }>
                 <FlexRow cx={ css.benefits } borderBottom>
                     <div className={ css.wrapper }>
-                        <Text font="museo-sans" cx={ css.header }>
+                        <Text cx={ css.header }>
                             Why to Use
                         </Text>
                         <div className={ css.content }>
@@ -73,8 +73,7 @@ export class BenefitsBlock extends React.Component<{}, BenefitsBlockState> {
                                         >
                                             <Text
                                                 cx={ css.reasonCaption }
-                                                font="museo-sans"
-                                                color={ this.state.reason === reason ? 'gray80' : 'gray60' }
+                                                color={ this.state.reason === reason ? 'primary' : 'secondary' }
                                                 fontSize="24"
                                                 lineHeight="30"
                                             >
@@ -87,7 +86,7 @@ export class BenefitsBlock extends React.Component<{}, BenefitsBlockState> {
                             <ul id={ this.state.reason }>
                                 {benefits[this.state.reason].points.map((point: string, index: number) => (
                                     <li key={ index } className={ css.pointWrapper }>
-                                        <Text font="sans" fontSize="24" cx={ css.point }>
+                                        <Text fontSize="24" cx={ css.point }>
                                             {point}
                                         </Text>
                                     </li>
diff --git a/app/src/landing/ContactsBlock.module.scss b/app/src/landing/ContactsBlock.module.scss
index c176ac8abe..e288454596 100644
--- a/app/src/landing/ContactsBlock.module.scss
+++ b/app/src/landing/ContactsBlock.module.scss
@@ -2,7 +2,7 @@
 
 .layout {
     margin: 0 auto;
-    background-color: $gray10;
+    background-color: var(--uui-surface-lower);
 
     .contacts {
         display: flex;
@@ -12,7 +12,7 @@
         width: 100%;
         margin: 0 auto;
         padding: 60px 0;
-        border-bottom: 1px solid $gray40;
+        //border-bottom: 1px solid var(--uui-divider);
     }
 
     .wrapper {
@@ -20,6 +20,7 @@
     }
 
     .header {
+        font-weight: 600;
         font-size: 30px;
         line-height: 36px;
         padding: 0;
@@ -32,7 +33,7 @@
 
         .card {
             display: flex;
-            background-color: $white;
+            background-color: var(--uui-surface-main);
             max-width: 588px;
             flex-grow: 1;
 
@@ -83,7 +84,7 @@
 
             .card {
                 display: flex;
-                background-color: $white;
+                background-color: var(--uui-surface-main);
                 max-width: none;
                 flex-grow: unset;
 
@@ -115,7 +116,7 @@
         }
 
         .banner {
-            background-color: $white;
+            background-color: var(--uui-surface-main);
             box-sizing: border-box;
             max-width: 1200px;
             width: 100%;
@@ -123,7 +124,7 @@
 
             .banner-text {
                 font-size: 24px;
-                color: $blue;
+                color: var(--uui-info-50);
             }
         }
     }
@@ -153,7 +154,7 @@
 
             .card {
                 display: flex;
-                background-color: $white;
+                background-color: var(--uui-surface-main);
 
                 &:not(:last-child) {
                     margin-right: 12px;
@@ -192,7 +193,7 @@
                 font-size: 24px;
                 padding-top: 0;
                 text-align: center;
-                color: $blue;
+                color: var(--uui-info-50);
             }
         }
     }
diff --git a/app/src/landing/ContactsBlock.tsx b/app/src/landing/ContactsBlock.tsx
index 296bc23bed..5306692ded 100644
--- a/app/src/landing/ContactsBlock.tsx
+++ b/app/src/landing/ContactsBlock.tsx
@@ -3,7 +3,7 @@ import Measure from 'react-measure';
 
 import {
     FlexRow, IconContainer, LinkButton, Text, Anchor,
-} from '@epam/promo';
+} from '@epam/uui';
 import { analyticsEvents } from '../analyticsEvents';
 import css from './ContactsBlock.module.scss';
 import { ReactComponent as MailIcon } from '../icons/outlook-90.svg';
@@ -25,7 +25,7 @@ export class ContactsBlock extends React.Component {
                         <div className={ css.layout } ref={ measureRef }>
                             <div className={ css.contacts }>
                                 <div className={ css.wrapper }>
-                                    <Text font="museo-sans" cx={ css.header }>
+                                    <Text cx={ css.header }>
                                         Contact Us
                                     </Text>
                                 </div>
@@ -35,7 +35,7 @@ export class ContactsBlock extends React.Component {
                                             <>
                                                 <IconContainer icon={ GitIcon } cx={ css.cardIcon } />
                                                 <div className={ css.cardTextContent }>
-                                                    <Text font="sans" fontSize="16" lineHeight="24">
+                                                    <Text fontSize="16" lineHeight="24">
                                                         Missing a feature or have an issue?
                                                     </Text>
                                                     <LinkButton
@@ -59,7 +59,7 @@ export class ContactsBlock extends React.Component {
                                             <>
                                                 <IconContainer icon={ MailIcon } cx={ css.cardIcon } />
                                                 <div className={ css.cardTextContent }>
-                                                    <Text font="sans" fontSize="16" lineHeight="24">
+                                                    <Text fontSize="16" lineHeight="24">
                                                         You can also email your questions to submit a support ticket
                                                     </Text>
                                                     <LinkButton
diff --git a/app/src/landing/ExploreBlock.module.scss b/app/src/landing/ExploreBlock.module.scss
index 53f492ee4a..c0f475aede 100644
--- a/app/src/landing/ExploreBlock.module.scss
+++ b/app/src/landing/ExploreBlock.module.scss
@@ -7,7 +7,7 @@
 
 .layout {
     margin: 0 auto;
-    background-color: $gray10;
+    background-color: var(--uui-surface-lower);
 
     .explore {
         max-width: 1200px;
@@ -17,6 +17,7 @@
     }
 
     .header {
+        font-weight: 600;
         font-size: 30px;
         line-height: 36px;
         padding: 0;
diff --git a/app/src/landing/ExploreBlock.tsx b/app/src/landing/ExploreBlock.tsx
index ff93a09d63..b7c64c4df2 100644
--- a/app/src/landing/ExploreBlock.tsx
+++ b/app/src/landing/ExploreBlock.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import css from './ExploreBlock.module.scss';
 import {
     Anchor, FlexRow, IconContainer, Text,
-} from '@epam/promo';
+} from '@epam/uui';
 import { ReactComponent as DownloadIcon } from '../icons/download.svg';
 import { svc } from '../services';
 import { analyticsEvents } from '../analyticsEvents';
@@ -18,7 +18,7 @@ export class ExploreBlock extends React.Component {
             <div className={ css.layout }>
                 <FlexRow cx={ css.explore } borderBottom>
                     <div className={ css.wrapper }>
-                        <Text font="museo-sans" cx={ css.header }>
+                        <Text cx={ css.header }>
                             Explore
                         </Text>
                         <div className={ css.content }>
@@ -27,20 +27,20 @@ export class ExploreBlock extends React.Component {
                                 link={ {
                                     pathname: '/documents',
                                     query: {
-                                        id: 'accordion', mode: 'doc', skin: TSkin.UUI4_promo, category: 'components',
+                                        id: 'accordion', mode: 'doc', skin: TSkin.Promo, category: 'components',
                                     },
                                 } }
                                 onClick={ () => this.sendEvent('Components') }
                             >
                                 <div tabIndex={ 0 } className={ css.components }>
-                                    <Text font="sans-semibold" lineHeight="30" fontSize="24" cx={ css.caption }>
+                                    <Text fontWeight="600" lineHeight="30" fontSize="24" cx={ css.caption }>
                                         Components
                                     </Text>
                                 </div>
                             </Anchor>
                             <Anchor rawProps={ { tabIndex: -1 } } link={ { pathname: '/demo' } } onClick={ () => this.sendEvent('Demo') }>
                                 <div tabIndex={ 0 } className={ css.demo }>
-                                    <Text font="sans-semibold" lineHeight="30" fontSize="24" cx={ css.caption }>
+                                    <Text fontWeight="600" lineHeight="30" fontSize="24" cx={ css.caption }>
                                         Demos
                                     </Text>
                                 </div>
@@ -51,7 +51,7 @@ export class ExploreBlock extends React.Component {
                                 onClick={ () => this.sendEvent('Color palette') }
                             >
                                 <div tabIndex={ 0 } className={ css.colorPalette }>
-                                    <Text font="sans-semibold" lineHeight="30" fontSize="24" cx={ css.caption }>
+                                    <Text fontWeight="600" lineHeight="30" fontSize="24" cx={ css.caption }>
                                         Color Palette
                                     </Text>
                                 </div>
@@ -61,27 +61,27 @@ export class ExploreBlock extends React.Component {
                                 link={ {
                                     pathname: '/documents',
                                     query: {
-                                        id: 'richTextView', mode: 'doc', skin: TSkin.UUI4_promo, category: 'components',
+                                        id: 'richTextView', mode: 'doc', skin: TSkin.Promo, category: 'components',
                                     },
                                 } }
                                 onClick={ () => this.sendEvent('Typography') }
                             >
                                 <div tabIndex={ 0 } className={ css.typography }>
-                                    <Text font="sans-semibold" lineHeight="30" fontSize="24" cx={ css.caption }>
+                                    <Text fontWeight="600" lineHeight="30" fontSize="24" cx={ css.caption }>
                                         Typography
                                     </Text>
-                                    <Text font="museo-sans" cx={ css.typographyIcon }>
+                                    <Text cx={ css.typographyIcon }>
                                         Aa
                                     </Text>
                                 </div>
                             </Anchor>
                             <Anchor
                                 rawProps={ { tabIndex: -1 } }
-                                link={ { pathname: '/documents', query: { id: 'downloads', category: 'assets', skin: TSkin.UUI4_promo } } }
+                                link={ { pathname: '/documents', query: { id: 'downloads', category: 'assets', skin: TSkin.Promo } } }
                                 onClick={ () => this.sendEvent('Downloads') }
                             >
                                 <div tabIndex={ 0 } className={ css.download }>
-                                    <Text font="sans-semibold" lineHeight="30" fontSize="24" cx={ css.caption }>
+                                    <Text fontWeight="600" lineHeight="30" fontSize="24" cx={ css.caption }>
                                         Download Assets
                                     </Text>
                                     <IconContainer rawProps={ { tabIndex: -1 } } icon={ DownloadIcon } cx={ css.downloadIcon } />
diff --git a/app/src/landing/HeroBlock.module.scss b/app/src/landing/HeroBlock.module.scss
index 5c81491343..2431d2ba12 100644
--- a/app/src/landing/HeroBlock.module.scss
+++ b/app/src/landing/HeroBlock.module.scss
@@ -2,7 +2,7 @@
 
 .layout {
     margin: 0 auto;
-    background-color: $gray10;
+    background-color: var(--uui-surface-lower);
     overflow: hidden;
 
     .hero {
@@ -22,6 +22,7 @@
                 line-height: 90px;
                 padding: 0;
                 font-family: var(--uui-font);
+                font-weight: 600;
             }
 
             .hero-secondary {
diff --git a/app/src/landing/HeroBlock.tsx b/app/src/landing/HeroBlock.tsx
index 428af1cbb5..319f33e473 100644
--- a/app/src/landing/HeroBlock.tsx
+++ b/app/src/landing/HeroBlock.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Measure from 'react-measure';
 import { cx } from '@epam/uui-core';
-import { FlexRow, Text } from '@epam/promo';
+import { FlexRow, Text } from '@epam/uui';
 import css from './HeroBlock.module.scss';
 
 export interface HeroBlockProps {}
@@ -99,13 +99,13 @@ export class HeroBlock extends React.Component<HeroBlockProps, HeroBlockState> {
                         <div className={ css.layout } ref={ measureRef }>
                             <FlexRow cx={ css.hero }>
                                 <div className={ css.heroText }>
-                                    <Text rawProps={ { role: 'heading', 'aria-level': 1 } } font="museo-slab" cx={ css.heroHeader }>
+                                    <Text rawProps={ { role: 'heading', 'aria-level': 1 } } cx={ css.heroHeader }>
                                         EPAM UUI
                                     </Text>
-                                    <Text font="sans" fontSize="24" cx={ css.heroSecondary }>
+                                    <Text fontSize="24" cx={ css.heroSecondary }>
                                         UI development accelerator for business applications
                                     </Text>
-                                    <Text font="sans" fontSize="24" cx={ css.heroSecondary }>
+                                    <Text fontSize="24" cx={ css.heroSecondary }>
                                         Complete set of components,
                                         guidelines, blueprints, examples, to build your apps on top of React, Figma, TypeScript
                                     </Text>
diff --git a/app/src/landing/InfoBlock.module.scss b/app/src/landing/InfoBlock.module.scss
index 5396d7af1f..5a999cc8a8 100644
--- a/app/src/landing/InfoBlock.module.scss
+++ b/app/src/landing/InfoBlock.module.scss
@@ -2,7 +2,7 @@
 
 .layout {
     margin: 0 auto;
-    background: #FFFFFF;
+    background: var(--uui-surface-main);
 
     .info {
         display: flex;
@@ -43,8 +43,8 @@
                 right: 90px;
                 box-sizing: border-box;
                 border-radius: 50%;
-                background-color: $red;
-                box-shadow: 0 0 0 5px #FADED9;
+                background-color: var(--uui-critical-50);
+                box-shadow: 0 0 0 5px var(--uui-critical-5);
                 animation: pulse 2s infinite linear;
             }
         }
diff --git a/app/src/landing/InfoBlock.tsx b/app/src/landing/InfoBlock.tsx
index feb350bc4b..fd74af0bc6 100644
--- a/app/src/landing/InfoBlock.tsx
+++ b/app/src/landing/InfoBlock.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { cx } from '@epam/uui-core';
-import { FlexCell, FlexRow, Text } from '@epam/promo';
+import { FlexCell, FlexRow, Text } from '@epam/uui';
 import css from './InfoBlock.module.scss';
 
 const infoData = [
@@ -18,10 +18,10 @@ export class InfoBlock extends React.Component {
                 <FlexRow cx={ css.info }>
                     {infoData.map((data) => (
                         <FlexCell cx={ css.infoContainer } key={ data.caption } width="auto">
-                            <Text font="museo-sans" cx={ css.infoValue }>
+                            <Text cx={ css.infoValue }>
                                 {data.value}
                             </Text>
-                            <Text font="museo-slab" cx={ cx(css.infoCaption, data.pulse && css.pulse) }>
+                            <Text cx={ cx(css.infoCaption, data.pulse && css.pulse) }>
                                 {data.caption}
                             </Text>
                         </FlexCell>
diff --git a/app/src/landing/LandingPage.tsx b/app/src/landing/LandingPage.tsx
index f706811500..657030220a 100644
--- a/app/src/landing/LandingPage.tsx
+++ b/app/src/landing/LandingPage.tsx
@@ -27,7 +27,7 @@ export class LandingPage extends React.Component {
     render() {
         return (
             <Page renderHeader={ this.renderHeader } renderFooter={ this.renderFooter }>
-                <FlexCell cx="landing" width="100%">
+                <FlexCell width="100%">
                     <HeroBlock />
                     <StartedBlock />
                     <ExploreBlock />
diff --git a/app/src/landing/ProjectsBlock.module.scss b/app/src/landing/ProjectsBlock.module.scss
index 7c1fc87aa9..6129e04e3e 100644
--- a/app/src/landing/ProjectsBlock.module.scss
+++ b/app/src/landing/ProjectsBlock.module.scss
@@ -2,7 +2,7 @@
 
 .layout {
     margin: 0 auto;
-    background-color: $gray10;
+    background-color: var(--uui-surface-lower);
 
     .projects {
         max-width: 1200px;
@@ -33,7 +33,7 @@
             text-decoration: none;
 
             &:hover {
-                background-color: white;
+                background-color: var(--uui-surface-main);
             }
         }
 
@@ -48,16 +48,16 @@
         .overflow-projects {
             font-size: 36px;
             line-height: 48px;
-            color: $blue;
+            color: var(--uui-info-50);
         }
 
         .project-caption {
-            color: $gray80;
+            color: var(--uui-text-primary);
             text-align: center;
         }
 
         .project-caption-all {
-            color: $blue;
+            color: var(--uui-info-50);
             text-align: center;
         }
     }
@@ -105,14 +105,14 @@
             }
 
             .project-caption {
-                color: $gray80;
+                color: var(--uui-text-primary);
                 text-align: center;
                 padding-top: 2px;
                 padding-bottom: 2px;
             }
 
             .project-caption-all {
-                color: $blue;
+                color: var(--uui-info-50);
                 text-align: center;
                 padding-top: 2px;
                 padding-bottom: 2px;
diff --git a/app/src/landing/ProjectsBlock.tsx b/app/src/landing/ProjectsBlock.tsx
index 6b046807ce..24d7b5c73e 100644
--- a/app/src/landing/ProjectsBlock.tsx
+++ b/app/src/landing/ProjectsBlock.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Measure from 'react-measure';
 import {
     Anchor, FlexRow, IconContainer, Text,
-} from '@epam/promo';
+} from '@epam/uui';
 import { svc } from '../services';
 import { analyticsEvents } from '../analyticsEvents';
 import { projectsList } from '../docs/other/Projects.doc';
@@ -25,7 +25,7 @@ export class ProjectsBlock extends React.Component {
                         <div className={ css.layout } ref={ measureRef }>
                             <FlexRow cx={ css.projects } borderBottom>
                                 <div className={ css.wrapper }>
-                                    <Text font="museo-sans" cx={ css.header }>
+                                    <Text cx={ css.header }>
                                         Trusted by
                                     </Text>
                                     <div className={ css.content }>
@@ -51,11 +51,11 @@ export class ProjectsBlock extends React.Component {
                                             onClick={ () => this.sendEvent('All') }
                                         >
                                             <div className={ css.iconWrapper }>
-                                                <Text font="museo-sans" cx={ css.overflowProjects }>
+                                                <Text cx={ css.overflowProjects }>
                                                     {projectsList.length}
                                                 </Text>
                                             </div>
-                                            <Text cx={ css.projectCaptionAll } font="sans-semibold">
+                                            <Text cx={ css.projectCaptionAll } fontWeight="600">
                                                 View All
                                             </Text>
                                         </Anchor>
diff --git a/app/src/landing/ReleasesBlock.module.scss b/app/src/landing/ReleasesBlock.module.scss
index 0357ee5d4b..00a8eed892 100644
--- a/app/src/landing/ReleasesBlock.module.scss
+++ b/app/src/landing/ReleasesBlock.module.scss
@@ -2,7 +2,7 @@
 
 .layout {
     margin: 0 auto;
-    background: #FFFFFF;
+    background: var(--uui-surface-main);
 
     .releases {
         display: flex;
@@ -23,6 +23,7 @@
             }
 
             .header {
+                font-weight: 600;
                 font-size: 30px;
                 line-height: 36px;
                 padding: 0;
@@ -47,7 +48,7 @@
                 display: flex;
                 justify-content: center;
                 padding: 24px 0;
-                border-top: 1px solid $gray40;
+                border-top: 1px solid var(--uui-divider);
             }
         }
     }
diff --git a/app/src/landing/ReleasesBlock.tsx b/app/src/landing/ReleasesBlock.tsx
index 6a48582a49..f47cd9c00f 100644
--- a/app/src/landing/ReleasesBlock.tsx
+++ b/app/src/landing/ReleasesBlock.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Measure from 'react-measure';
 import {
     FlexRow, FlexSpacer, LinkButton, Text,
-} from '@epam/promo';
+} from '@epam/uui';
 import { ReleasesCell } from './ReleasesCell';
 import { svc } from '../services';
 import css from './ReleasesBlock.module.scss';
@@ -26,7 +26,7 @@ export class ReleasesBlock extends React.Component<{}, LandingReleasesState> {
             .then((data) => {
                 this.setState({
                     markdown: data.markdown
-                        .split('#')
+                        .split('# ')
                         .filter((el: any) => el !== '')
                         .map((el: any) => '#'.concat(el)),
                     isLoaded: true,
@@ -47,7 +47,7 @@ export class ReleasesBlock extends React.Component<{}, LandingReleasesState> {
                             <FlexRow cx={ css.releases }>
                                 <div className={ css.wrapper }>
                                     <FlexRow size="36" cx={ css.headerWrapper }>
-                                        <Text font="museo-sans" cx={ css.header }>
+                                        <Text cx={ css.header }>
                                             Release Notes
                                         </Text>
                                         {containerWidth > 768 && (
diff --git a/app/src/landing/ReleasesCell.module.scss b/app/src/landing/ReleasesCell.module.scss
index 0a966e0167..67250b7c4b 100644
--- a/app/src/landing/ReleasesCell.module.scss
+++ b/app/src/landing/ReleasesCell.module.scss
@@ -25,7 +25,7 @@
         overflow: hidden;
 
         .release-date {
-            color: $gray60;
+            color: var(--uui-text-tertiary);
             padding-top: 3px;
         }
 
@@ -65,7 +65,7 @@
             overflow: hidden;
 
             .release-date {
-                color: $gray60;
+                color: var(--uui-text-tertiary);
                 padding-top: 3px;
             }
 
diff --git a/app/src/landing/ReleasesCell.tsx b/app/src/landing/ReleasesCell.tsx
index b846072e3d..57fa73a4cf 100644
--- a/app/src/landing/ReleasesCell.tsx
+++ b/app/src/landing/ReleasesCell.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import dayjs from 'dayjs';
 import { UuiReactMarkdown } from '../documents/uuiReactMarkdown';
 import { cx } from '@epam/uui-core';
-import { FlexRow, LinkButton, RichTextView } from '@epam/promo';
+import { FlexRow, LinkButton, RichTextView } from '@epam/uui';
 import { analyticsEvents } from '../analyticsEvents';
 import css from './ReleasesCell.module.scss';
 
diff --git a/app/src/landing/StartedBlock.module.scss b/app/src/landing/StartedBlock.module.scss
index f34bdd0550..9e18783581 100644
--- a/app/src/landing/StartedBlock.module.scss
+++ b/app/src/landing/StartedBlock.module.scss
@@ -2,7 +2,7 @@
 
 .layout {
     margin: 0 auto;
-    background: #FFFFFF;
+    background: var(--uui-surface-main);
 
     .landing-started {
         display: flex;
@@ -56,7 +56,7 @@
             bottom: 0;
             height: 132px;
             width: 1px;
-            background-color: $gray40;
+            background-color: var(--uui-divider);
         }
     }
 
diff --git a/app/src/landing/StartedBlock.tsx b/app/src/landing/StartedBlock.tsx
index d7cff1186a..3753d2195f 100644
--- a/app/src/landing/StartedBlock.tsx
+++ b/app/src/landing/StartedBlock.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
     Button, FlexRow, IconContainer, RichTextView, Text,
-} from '@epam/promo';
+} from '@epam/uui';
 import css from './StartedBlock.module.scss';
 import { ReactComponent as CrystalIcon } from '../icons/crystal.svg';
 import { ReactComponent as ReactIcon } from '../icons/react_small.svg';
@@ -31,9 +31,9 @@ export class StartedBlock extends React.Component {
                                     <Button
                                         rawProps={ { 'aria-label': 'For Developers' } }
                                         caption="FOR DEVELOPERS"
-                                        fill="white"
+                                        fill="outline"
                                         size="48"
-                                        color="blue"
+                                        color="primary"
                                         clickAnalyticsEvent={ this.forDevelopersEvent }
                                         link={ { pathname: 'documents', query: { id: 'gettingStarted' } } }
                                     />
@@ -53,16 +53,16 @@ export class StartedBlock extends React.Component {
                                     <Button
                                         rawProps={ { 'aria-label': 'For Designers' } }
                                         caption="FOR DESIGNERS"
-                                        fill="white"
+                                        fill="outline"
                                         size="48"
-                                        color="blue"
+                                        color="primary"
                                         link={ {
                                             pathname: 'documents',
                                             query: {
                                                 id: 'gettingStartedForDesigners',
                                                 category: 'forDesigners',
                                                 mode: 'doc',
-                                                skin: TSkin.UUI4_promo,
+                                                skin: TSkin.Promo,
                                             },
                                         } }
                                         clickAnalyticsEvent={ this.forDesignersEvent }
diff --git a/app/src/landing/TeamBlock.module.scss b/app/src/landing/TeamBlock.module.scss
index b8f00f2331..9b3408b1e3 100644
--- a/app/src/landing/TeamBlock.module.scss
+++ b/app/src/landing/TeamBlock.module.scss
@@ -2,7 +2,7 @@
 
 .layout {
     margin: 0 auto;
-    background-color: $gray10;
+    background-color: var(--uui-surface-lower);
 
     .teams {
         display: flex;
@@ -12,7 +12,7 @@
         width: 100%;
         margin: 0 auto;
         padding: 54px 0 60px;
-        border-bottom: 1px solid $gray40;
+        border-bottom: 1px solid var(--uui-divider);
     }
 
     .header-wrapper {
diff --git a/app/src/landing/TeamBlock.tsx b/app/src/landing/TeamBlock.tsx
index 2d9d43088f..e54b62d04e 100644
--- a/app/src/landing/TeamBlock.tsx
+++ b/app/src/landing/TeamBlock.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Measure from 'react-measure';
 import {
     FlexCell, FlexRow, FlexSpacer, LinkButton, Text,
-} from '@epam/promo';
+} from '@epam/uui';
 import { team } from '../docs';
 import { analyticsEvents } from '../analyticsEvents';
 import css from './TeamBlock.module.scss';
@@ -19,7 +19,7 @@ export class TeamBlock extends React.Component {
                         <div className={ css.layout } ref={ measureRef }>
                             <FlexCell cx={ css.teams } width="100%">
                                 <FlexRow size="36" cx={ css.headerWrapper }>
-                                    <Text font="museo-sans" cx={ css.header }>
+                                    <Text cx={ css.header }>
                                         Team
                                     </Text>
                                     <FlexSpacer />
@@ -46,7 +46,7 @@ export class TeamBlock extends React.Component {
                                                     href={ link }
                                                     clickAnalyticsEvent={ analyticsEvents.welcome.team(name) }
                                                 />
-                                                <Text font="sans" lineHeight="24" fontSize="16" size="none">
+                                                <Text lineHeight="24" fontSize="16" size="none">
                                                     {position}
                                                 </Text>
                                             </div>
diff --git a/app/src/landing/TechnologiesBlock.module.scss b/app/src/landing/TechnologiesBlock.module.scss
index f9253451bf..3ecdd13b88 100644
--- a/app/src/landing/TechnologiesBlock.module.scss
+++ b/app/src/landing/TechnologiesBlock.module.scss
@@ -2,7 +2,7 @@
 
 .layout {
     margin: 0 auto;
-    background-color: $gray10;
+    background-color: var(--uui-surface-lower);
 
     .technologies {
         max-width: 1200px;
diff --git a/app/src/landing/TechnologiesBlock.tsx b/app/src/landing/TechnologiesBlock.tsx
index f2b0dd4c32..729f3cbdd1 100644
--- a/app/src/landing/TechnologiesBlock.tsx
+++ b/app/src/landing/TechnologiesBlock.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FlexRow, IconButton } from '@epam/promo';
+import { FlexRow, IconButton } from '@epam/uui';
 import css from './TechnologiesBlock.module.scss';
 import { ReactComponent as CssModulesIcon } from '../icons/css-modules-logo.inkscape.svg';
 import { ReactComponent as SassIcon } from '../icons/sass.svg';
diff --git a/app/src/sandbox/SandboxPage.tsx b/app/src/sandbox/SandboxPage.tsx
index 469e654424..547c6bfdef 100644
--- a/app/src/sandbox/SandboxPage.tsx
+++ b/app/src/sandbox/SandboxPage.tsx
@@ -12,7 +12,7 @@ import { DraftRTEDemo } from './draft-rte/DraftRTEDemo';
 import { ScrollSpyDemo } from './scroll-spy/ScrollSpyDemo';
 import { Responsive } from './responsive/Responsive';
 import { ThemeDemo } from './theme/ThemeDemo';
-import { ThemeDemo as ThemeElectricDemo } from './theme-electric-test/ThemeDemo';
+import { ThemeElectricDemo } from './theme-electric-test/ThemeDemo';
 import { ProductsTableDemo } from './productsTable/ProductsTableDemo';
 import { AdaptivePanelDemo } from './adaptivePanel/AdaptivePanelDemo';
 import { TreeListItem } from '@epam/uui-components';
diff --git a/app/src/sandbox/tasks/ProjectTasksDemo.tsx b/app/src/sandbox/tasks/ProjectTasksDemo.tsx
index d7aa755d03..462c600948 100644
--- a/app/src/sandbox/tasks/ProjectTasksDemo.tsx
+++ b/app/src/sandbox/tasks/ProjectTasksDemo.tsx
@@ -84,7 +84,7 @@ export function ProjectTasksDemo() {
     };
 
     return (
-        <Panel background="surface" style={ { width: '100%' } }>
+        <Panel background="surface-main" style={ { width: '100%' } }>
             <FlexRow spacing="12" margin="12">
                 <FlexCell width="auto">
                     <IconButton icon={ insertAfter } onClick={ () => insertTask('top', null, null) } />
diff --git a/app/src/sandbox/theme-electric-test/ThemeDemo.tsx b/app/src/sandbox/theme-electric-test/ThemeDemo.tsx
index ae27c328e4..75f749f8e2 100644
--- a/app/src/sandbox/theme-electric-test/ThemeDemo.tsx
+++ b/app/src/sandbox/theme-electric-test/ThemeDemo.tsx
@@ -19,7 +19,7 @@ interface Person {
     displayAdsAgreed?: boolean;
 }
 
-export function ThemeDemo() {
+export function ThemeElectricDemo() {
     const svc = useUuiContext();
 
     const countryDataSource = useAsyncDataSource<Country, string, unknown>(
@@ -35,7 +35,7 @@ export function ThemeDemo() {
                 <ModalWindow width={ 360 }>
                     <ModalHeader borderBottom title="Simple modal example " onClose={ () => props.abort() } />
                     <ScrollBars>
-                        <Panel background="surface" margin="24">
+                        <Panel background="surface-main" margin="24">
                             <Text color="primary" fontSize="16">
                                 Changes will be undone!
                             </Text>
@@ -77,7 +77,7 @@ export function ThemeDemo() {
                 },
             },
         }),
-        settingsKey: 'theme-demo',
+        settingsKey: 'theme-electric-demo',
     });
 
     const renderDemoForm = () => {
@@ -242,7 +242,7 @@ export function ThemeDemo() {
                     <PromoButton caption="BUTTON" size="42" isDisabled onClick={ () => {} } />
                 </FlexRow>
             </div>
-            <Panel background="surface" shadow rawProps={ { style: { margin: '24px auto' } } }>
+            <Panel background="surface-main" shadow rawProps={ { style: { margin: '24px auto' } } }>
                 <ScrollBars>{renderDemoForm()}</ScrollBars>
             </Panel>
         </div>
diff --git a/app/src/sandbox/theme/ThemeDemo.tsx b/app/src/sandbox/theme/ThemeDemo.tsx
index bb94e9038e..66e7a38e83 100644
--- a/app/src/sandbox/theme/ThemeDemo.tsx
+++ b/app/src/sandbox/theme/ThemeDemo.tsx
@@ -34,7 +34,7 @@ export function ThemeDemo() {
                 <ModalWindow width={ 360 }>
                     <ModalHeader borderBottom title="Simple modal example " onClose={ () => props.abort() } />
                     <ScrollBars>
-                        <Panel background="surface" margin="24">
+                        <Panel background="surface-main" margin="24">
                             <Text color="primary" fontSize="16">
                                 Changes will be undone!
                             </Text>
@@ -233,7 +233,7 @@ export function ThemeDemo() {
 
     return (
         <div style={ { height: 'calc(100vh - 60px)', margin: '0 auto', display: 'flex' } }>
-            <Panel background="surface" shadow rawProps={ { style: { margin: '24px auto' } } }>
+            <Panel background="surface-main" shadow rawProps={ { style: { margin: '24px auto' } } }>
                 <ScrollBars>{renderDemoForm()}</ScrollBars>
             </Panel>
         </div>
diff --git a/changelog.md b/changelog.md
index 956589bf5c..d73665cb7d 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,22 +1,27 @@
-# 5.3.1 - __.__.2023
+# 5.4.1 - ??.??.2023
 
 **What's New**
+* [Site]: rework for theming support
 * [Tag]: remade Tag by new design. It has new `colors` and new fill mods `solid & outline`;
 * [Breaking change]: Tag in loveship changed default `size` to `36px`. It was 18px;
 * Upload new icons pack
-  * Breaking changes:
-    * 'action-update' icon was removed use 'navigation-refresh' instead
-    * 'content-plus' icon was removed use 'action-add' instead
-    * 'action-map_pin' icon was removed use 'communication-geo_tag' instead
-    * 'table-info-outline' icon was removed use 'notification-info-outline' instead
-    * 'action-chat' icon was removed use 'communication-chat' instead
-    * 'not-recommended' icon was removed use 'blacklist' instead
-    * 'copy-content' icon was removed use 'action-copy_content' instead
-**What's Fixed**
-* [Calendar]: fixed disabled text `color`.
+    * Breaking changes:
+        * 'action-update' icon was removed use 'navigation-refresh' instead
+        * 'content-plus' icon was removed use 'action-add' instead
+        * 'action-map_pin' icon was removed use 'communication-geo_tag' instead
+        * 'table-info-outline' icon was removed use 'notification-info-outline' instead
+        * 'action-chat' icon was removed use 'communication-chat' instead
+        * 'not-recommended' icon was removed use 'blacklist' instead
+        * 'copy-content' icon was removed use 'action-copy_content' instead
 
+**What's Fixed**
+* [Calendar]: fixed disabled text `color`
+* [TextPlaceholder]: changed animation
+* [Text]: fixed default font
+* [Panel]: fixed "background" property, in default state it transparent
+* fixed variables for "theme-vanilla-thunder"
 
-# 5.3.0 - 21.11.2023
+# 5.4.0 - 21.11.2023
 
 **What's New**
 * This release introduced stable Theming approach and theme css variables:
diff --git a/epam-assets/theme/theme_electric.scss b/epam-assets/theme/theme_electric.scss
index 31785bc401..b4a96b18b7 100644
--- a/epam-assets/theme/theme_electric.scss
+++ b/epam-assets/theme/theme_electric.scss
@@ -518,6 +518,26 @@
         }
     }
 
+    /* MainMenu */
+
+    .uui-main_menu {
+        --uui-main_menu-bg: var(--uui-neutral-95);
+        --uui-main_menu-hover: var(--uui-neutral-90);
+        --uui-main_menu-border-active-gradient: var(--gradient-1);
+    }
+
+    .uui-main_menu-dropdown {
+        --uui-main_menu-dropdown-bg-hover: var(--uui-neutral-95);
+    }
+
+    /* BurgerMenu */
+
+    .uui-burger {
+        --uui-burger_menu-bg: var(--uui-neutral-95);
+        --uui-burger_menu-bg-hover: var(--uui-neutral-95);
+        --uui-burger_menu-item: var(--uui-neutral-95);
+    }
+
     /* Tag */
 
     .uui-tag {
diff --git a/epam-assets/theme/theme_loveship_dark.scss b/epam-assets/theme/theme_loveship_dark.scss
index 2062fe47df..3544710205 100644
--- a/epam-assets/theme/theme_loveship_dark.scss
+++ b/epam-assets/theme/theme_loveship_dark.scss
@@ -832,7 +832,7 @@
     }
 
     .uui-text-placeholder {
-        --uui-text_placeholder-gradient: linear-gradient(90deg, var(--uui-neutral-30) 0%, var(--uui-neutral-50) 50%, var(--uui-neutral-30) 100%);
+        --uui-text_placeholder-gradient: repeating-linear-gradient(90deg, var(--uui-neutral-30) 0, var(--uui-neutral-50) 150px, var(--uui-neutral-30) 300px);
     }
 
     /* fonts */
diff --git a/epam-assets/theme/theme_vanilla_thunder.scss b/epam-assets/theme/theme_vanilla_thunder.scss
index 87ce86a569..68e9f61c67 100644
--- a/epam-assets/theme/theme_vanilla_thunder.scss
+++ b/epam-assets/theme/theme_vanilla_thunder.scss
@@ -266,6 +266,7 @@
         --uui-color-contrast: var(--uui-warning-contrast);
     }
 
+    .uui-color-neutral,
     .uui-color-secondary {
         --uui-color-5: var(--uui-secondary-5);
         --uui-color-10: var(--uui-secondary-10);
@@ -318,8 +319,66 @@
         --uui-filters_toggler-font-weight: 400;
     }
 
+    /* MainMenu */
+
+    .uui-main_menu {
+        --uui-main_menu-text: var(--uui-text-brand);
+        --uui-main_menu-text-active: var(--uui-info-50);
+        --uui-main_menu-bg: var(--uui-info-5);
+        --uui-main_menu-hover: var(--uui-neutral-0);
+        --uui-main_menu-active: var(--uui-neutral-0);
+        --uui-main_menu-border-active: var(--uui-neutral-0);
+
+        --uui-main_menu-search-bg: var(--uui-neutral-5);
+        --uui-main_menu-search-border: var(--uui-neutral-40);
+        --uui-main_menu-search-placeholder: var(--uui-text-tertiary);
+        --uui-main_menu-search-text: var(--uui-text-primary);
+        --uui-main_menu-search-icon: var(--uui-neutral-70);
+
+        --uui-main_menu-icon: var(--uui-text-brand);
+        --uui-main_menu-icon-hover: var(--uui-text-brand);
+        --uui-main_menu-icon-active: var(--uui-text-brand);
+    }
+
+    .uui-main_menu-dropdown {
+        --uui-main_menu-text: var(--uui-text-brand);
+        --uui-main_menu-text-active: var(--uui-text-brand);
+        --uui-main_menu-dropdown-bg-hover: var(--uui-neutral-70);
+    }
+
+    /* BurgerMenu */
+
+    .uui-burger {
+        --uui-burger_menu-bg: var(--uui-info-5);
+        --uui-burger_menu-bg-hover: var(--uui-neutral-0);
+        --uui-burger_menu-caption: var(--uui-text-brand);
+        --uui-burger_menu-icon: var(--uui-text-brand);
+        --uui-burger_menu-item: var(--uui-info-5);
+    }
+
+    /* BurgerButton */
+    .uui-main_menu-burger-button {
+        --uui-burger_btn_caption: var(--uui-text-brand);
+        --uui-burger_btn_caption-hover: var(--uui-primary-50);
+        --uui-burger_btn_caption-active: var(--uui-primary-50);
+        --uui-burger_btn-border: var(--uui-neutral-40);
+    }
+
+    /* BurgerSearch */
+
+    .uui-main_menu-burger-search {
+        --uui-burger_search: var(--uui-text-brand);
+        --uui-burger_search-fill: var(--uui-neutral-70);
+        --uui-burger_search-bg: var(--uui-neutral-40);
+        --uui-burger_search-placeholder: var(--uui-text-tertiary);
+    }
+
     .uui-main_menu-dropdown {
+        --uui-main_menu-text: var(--uui-text-brand);
+        --uui-main_menu-text-active: var(--uui-text-brand);
+
         --uui-main_menu-dropdown-bg: var(--chromatic-0);
+        --uui-main_menu-dropdown-bg-hover: var(--chromatic-150);
         --uui-main_menu-dropdown-shadow: var(--uui-shadow-level-2);
         --uui-main_menu-dropdown-border-radius: 8px;
     }
@@ -330,7 +389,7 @@
     }
 
     .uui-text-placeholder {
-        --uui-text_placeholder-gradient: linear-gradient(90deg, var(--chromatic-200) 0%, var(--chromatic-100) 50%, var(--chromatic-200) 100%);
+        --uui-text_placeholder-gradient: repeating-linear-gradient(90deg, var(--chromatic-200) 0, var(--chromatic-100) 150px, var(--chromatic-200) 300px);
     }
 
     /* Tag */
diff --git a/epam-promo/components/typography/Text.tsx b/epam-promo/components/typography/Text.tsx
index aef4e1b60e..4fd29f0a6f 100644
--- a/epam-promo/components/typography/Text.tsx
+++ b/epam-promo/components/typography/Text.tsx
@@ -17,7 +17,7 @@ export type TextProps = Omit<UuiTextProps, 'color' | 'font'> & TextMods;
 
 export const Text = withMods<Omit<UuiTextProps, 'color' | 'font'>, TextMods>(
     UuiText,
-    (props) => [`uui-font-${props.font || 'sans'}`],
+    (props) => [props.font && `uui-font-${props.font}`],
     (props) => {
         if (__DEV__) {
             if (props.font) {
diff --git a/loveship/components/typography/Text.tsx b/loveship/components/typography/Text.tsx
index fa47ede259..7d07bc1cc4 100644
--- a/loveship/components/typography/Text.tsx
+++ b/loveship/components/typography/Text.tsx
@@ -17,7 +17,7 @@ export type TextProps = Omit<UuiTextProps, 'color' | 'font'> & TextMods;
 
 export const Text = withMods<Omit<UuiTextProps, 'color' | 'font'>, TextMods>(
     UuiText,
-    (props) => [`uui-font-${props.font || 'sans'}`],
+    (props) => [props.font && `uui-font-${props.font}`],
     (props) => {
         if (__DEV__) {
             if (props.font) {
diff --git a/public/docs/content/dataSources-array-dataSource-props-overview.json b/public/docs/content/dataSources-array-dataSource-props-overview.json
index f2ea03edc8..ba14dca4c9 100644
--- a/public/docs/content/dataSources-array-dataSource-props-overview.json
+++ b/public/docs/content/dataSources-array-dataSource-props-overview.json
@@ -4,8 +4,11 @@
     "type": "paragraph",
     "children": [
       {
-        "text": "Below, you can review the ",
-        "color": "rgb(55, 65, 81)"
+        "text": "Below, you can review the"
+      },
+      {
+        "color": "rgb(55, 65, 81)",
+        "text": " "
       },
       {
         "text": "ArrayDataSourceProps",
@@ -14,7 +17,14 @@
       },
       {
         "color": "rgb(55, 65, 81)",
-        "text": " interface accepted by "
+        "text": " "
+      },
+      {
+        "text": "interface accepted by"
+      },
+      {
+        "color": "rgb(55, 65, 81)",
+        "text": " "
       },
       {
         "color": "rgb(55, 65, 81)",
diff --git a/public/docs/content/dataSources-lazy-dataSource-props-overview.json b/public/docs/content/dataSources-lazy-dataSource-props-overview.json
index 42d29ec9f4..0aabcc5653 100644
--- a/public/docs/content/dataSources-lazy-dataSource-props-overview.json
+++ b/public/docs/content/dataSources-lazy-dataSource-props-overview.json
@@ -4,25 +4,20 @@
     "type": "paragraph",
     "children": [
       {
-        "text": "Below, you can review the ",
-        "color": "rgb(55, 65, 81)"
+        "text": "Below, you can review the "
       },
       {
-        "color": "rgb(55, 65, 81)",
         "text": "LazyDataSourceProps",
         "uui-richTextEditor-code": true
       },
       {
-        "color": "rgb(55, 65, 81)",
         "text": " interface accepted by "
       },
       {
-        "color": "rgb(55, 65, 81)",
         "text": "LazyDataSource",
         "uui-richTextEditor-code": true
       },
       {
-        "color": "rgb(55, 65, 81)",
         "text": "."
       }
     ]
diff --git a/public/docs/content/examples-alert-Sizes.json b/public/docs/content/examples-alert-Sizes.json
index da1b8d6bca..47c04c2599 100644
--- a/public/docs/content/examples-alert-Sizes.json
+++ b/public/docs/content/examples-alert-Sizes.json
@@ -3,8 +3,7 @@
     "type": "paragraph",
     "children": [
       {
-        "text": "By default, alerts can be 48 (48 pixels high) or you can set the size to 36 (36 pixels high).",
-        "color": "rgb(22, 23, 25)"
+        "text": "By default, alerts can be 48 (48 pixels high) or you can set the size to 36 (36 pixels high)."
       }
     ]
   }
diff --git a/public/docs/content/examples-avatarStack-Basic.json b/public/docs/content/examples-avatarStack-Basic.json
index 9bcb483b19..8b95b320d2 100644
--- a/public/docs/content/examples-avatarStack-Basic.json
+++ b/public/docs/content/examples-avatarStack-Basic.json
@@ -1,69 +1,38 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Basic AvatarStack usage.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#0e101a",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          }
-        ]
+        "text": "Basic AvatarStack usage.",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "The "
+      },
+      {
+        "text": "avatarsCount",
+        "uui-richTextEditor-code": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "The ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "avatarsCount",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " props allow you to specify the number of avatars in the stack.",
-            "marks": []
-          }
-        ]
+        "text": " props allow you to specify the number of avatars in the stack."
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/examples-contexts-UuiServicesUsage.json b/public/docs/content/examples-contexts-UuiServicesUsage.json
index 3638f72f92..c5edf44d79 100644
--- a/public/docs/content/examples-contexts-UuiServicesUsage.json
+++ b/public/docs/content/examples-contexts-UuiServicesUsage.json
@@ -3,8 +3,11 @@
     "type": "paragraph",
     "children": [
       {
-        "text": "To access UUI services in your app, use the ",
-        "color": "rgb(55, 65, 81)"
+        "text": "To access UUI services in your app, use the"
+      },
+      {
+        "color": "rgb(55, 65, 81)",
+        "text": " "
       },
       {
         "text": "useUuiContext",
@@ -12,8 +15,11 @@
         "uui-richTextEditor-code": true
       },
       {
-        "text": " hook, which returns an object containing all UUI services.",
+        "text": " ",
         "color": "rgb(55, 65, 81)"
+      },
+      {
+        "text": "hook, which returns an object containing all UUI services."
       }
     ]
   }
diff --git a/public/docs/content/examples-form-ComplexValidation.json b/public/docs/content/examples-form-ComplexValidation.json
index c788427cd0..495e649f4f 100644
--- a/public/docs/content/examples-form-ComplexValidation.json
+++ b/public/docs/content/examples-form-ComplexValidation.json
@@ -3,17 +3,19 @@
     "type": "paragraph",
     "children": [
       {
-        "text": "This example demonstrates how to validate array data and create custom validators. ",
-        "color": "rgb(55, 65, 81)"
+        "text": "This example demonstrates how to validate array data and create custom validators. "
       }
     ]
   },
   {
     "type": "paragraph",
     "children": [
+      {
+        "text": "Custom validators can be valuable in cases where you require more complex validation that what is provided by the default"
+      },
       {
         "color": "rgb(55, 65, 81)",
-        "text": "Custom validators can be valuable in cases where you require more complex validation that what is provided by the default "
+        "text": " "
       },
       {
         "text": "isRequired",
@@ -21,8 +23,11 @@
         "color": "var(--tw-prose-code)"
       },
       {
-        "text": " option. They also give you the ability to provide custom error messages or perform validations where one field depends on another, as the validator callback receives values from the parent object as a second parameter.",
+        "text": " ",
         "color": "rgb(55, 65, 81)"
+      },
+      {
+        "text": "option. They also give you the ability to provide custom error messages or perform validations where one field depends on another, as the validator callback receives values from the parent object as a second parameter."
       }
     ]
   }
diff --git a/public/docs/content/examples-form-HandleSuccessSaveAndError.json b/public/docs/content/examples-form-HandleSuccessSaveAndError.json
index becc6eec5f..fd71388121 100644
--- a/public/docs/content/examples-form-HandleSuccessSaveAndError.json
+++ b/public/docs/content/examples-form-HandleSuccessSaveAndError.json
@@ -39,11 +39,7 @@
         "uui-richTextEditor-code": true
       },
       {
-        "text": " callback. "
-      },
-      {
-        "text": "This is because when the API promise resolves, it doesn't necessarily mean that the form has completed the save actions and transitioned to the 'saved' mode.",
-        "color": "rgb(55, 65, 81)"
+        "text": " callback. This is because when the API promise resolves, it doesn't necessarily mean that the form has completed the save actions and transitioned to the 'saved' mode."
       }
     ]
   }
diff --git a/public/docs/content/examples-form-ServerValidation.json b/public/docs/content/examples-form-ServerValidation.json
index d76ac9b064..5f5d75f0cc 100644
--- a/public/docs/content/examples-form-ServerValidation.json
+++ b/public/docs/content/examples-form-ServerValidation.json
@@ -1,606 +1,297 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
-      {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "If you need to get",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "a",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "form validation state from",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "the server side",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": ", your",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "onSave",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "api should return",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "an",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "object like",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "{",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "validation",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#9876aa",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "?: ICanBeInvalid }",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": ",",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "or you can transform your api response to",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "the",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "ICanBeInvalid",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " model by yourself and return it from",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "the",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "onSave",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "callback.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          }
-        ]
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "If you need to get",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "a",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "form validation state from",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "the server side, your",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "onSave",
+        "font-size": "12pt",
+        "font-family": null,
+        "color": "#303240",
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true,
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "api should return",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "an",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "object like",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "{",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "validation?: ICanBeInvalid },",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "or you can transform your api response to",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "the",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "ICanBeInvalid",
+        "font-size": "12pt",
+        "font-family": null,
+        "color": "#303240",
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true,
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " model by yourself and return it from",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "the",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "onSave",
+        "font-size": "12pt",
+        "font-family": null,
+        "color": "#303240",
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true,
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "callback.",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/examples-mainMenu-Basic.json b/public/docs/content/examples-mainMenu-Basic.json
index a61f956b81..4b04e5dd4c 100644
--- a/public/docs/content/examples-mainMenu-Basic.json
+++ b/public/docs/content/examples-mainMenu-Basic.json
@@ -1,37 +1,18 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Simple ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "MainMenu",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " usage example",
-            "marks": []
-          }
-        ]
+        "text": "Simple "
+      },
+      {
+        "text": "MainMenu",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " usage example"
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/examples-mainMenu-Responsive.json b/public/docs/content/examples-mainMenu-Responsive.json
index 9e56ec0443..a0f91cab4e 100644
--- a/public/docs/content/examples-mainMenu-Responsive.json
+++ b/public/docs/content/examples-mainMenu-Responsive.json
@@ -26,7 +26,6 @@
         "text": "is",
         "font-size": "12pt",
         "font-family": null,
-        "color": "#303240",
         "background-color": null,
         "font-weight": "400",
         "font-style": null,
@@ -44,7 +43,6 @@
         "text": "based on",
         "font-size": "12pt",
         "font-family": null,
-        "color": "#303240",
         "background-color": null,
         "font-weight": "400",
         "font-style": null,
@@ -62,7 +60,6 @@
         "text": "the",
         "font-size": "12pt",
         "font-family": null,
-        "color": "#303240",
         "background-color": null,
         "font-weight": "400",
         "font-style": null,
@@ -99,7 +96,6 @@
         "text": "component, so",
         "font-size": "12pt",
         "font-family": null,
-        "color": "#303240",
         "background-color": null,
         "font-weight": "400",
         "font-style": null,
@@ -117,7 +113,6 @@
         "text": "it supports",
         "font-size": "12pt",
         "font-family": null,
-        "color": "#303240",
         "background-color": null,
         "font-weight": "400",
         "font-style": null,
@@ -135,7 +130,6 @@
         "text": "an",
         "font-size": "12pt",
         "font-family": null,
-        "color": "#303240",
         "background-color": null,
         "font-weight": "400",
         "font-style": null,
@@ -150,40 +144,9 @@
         "text": " "
       },
       {
-        "text": "adaptive main menu items layout",
-        "font-size": "12pt",
-        "font-family": null,
-        "color": "#303240",
-        "background-color": null,
-        "font-weight": "400",
-        "font-style": null,
-        "font-variant": "normal",
-        "text-decoration": "none",
-        "vertical-align": "baseline",
-        "white-space": "pre-wrap",
-        "": null,
-        "uui-richTextEditor-span-mark": true
-      },
-      {
-        "text": ". I",
-        "font-size": "12pt",
-        "font-family": null,
-        "color": "#303240",
-        "background-color": null,
-        "font-weight": "400",
-        "font-style": null,
-        "font-variant": "normal",
-        "text-decoration": "none",
-        "vertical-align": "baseline",
-        "white-space": "pre-wrap",
-        "": null,
-        "uui-richTextEditor-span-mark": true
-      },
-      {
-        "text": "f some items can't fit in",
+        "text": "adaptive main menu items layout. If some items can't fit in",
         "font-size": "12pt",
         "font-family": null,
-        "color": "#303240",
         "background-color": null,
         "font-weight": "400",
         "font-style": null,
@@ -201,7 +164,6 @@
         "text": "the",
         "font-size": "12pt",
         "font-family": null,
-        "color": "#303240",
         "background-color": null,
         "font-weight": "400",
         "font-style": null,
@@ -219,7 +181,6 @@
         "text": "menu container, they will be hidden and can be rendered inside",
         "font-size": "12pt",
         "font-family": null,
-        "color": "#303240",
         "background-color": null,
         "font-weight": "400",
         "font-style": null,
@@ -250,25 +211,9 @@
         "uui-richTextEditor-code": true
       },
       {
-        "text": ". For more information",
+        "text": ". For more information,",
         "font-size": "12pt",
         "font-family": null,
-        "color": "#303240",
-        "background-color": null,
-        "font-weight": "400",
-        "font-style": null,
-        "font-variant": "normal",
-        "text-decoration": "none",
-        "vertical-align": "baseline",
-        "white-space": "pre-wrap",
-        "": null,
-        "uui-richTextEditor-span-mark": true
-      },
-      {
-        "text": ",",
-        "font-size": "12pt",
-        "font-family": null,
-        "color": "#303240",
         "background-color": null,
         "font-weight": "400",
         "font-style": null,
@@ -286,7 +231,6 @@
         "text": "go to the",
         "font-size": "12pt",
         "font-family": null,
-        "color": "#303240",
         "background-color": null,
         "font-weight": "400",
         "font-style": null,
@@ -311,7 +255,6 @@
             "text": "AdaptivePanel",
             "font-size": "12pt",
             "font-family": null,
-            "color": "#5214cc",
             "background-color": null,
             "font-weight": "400",
             "font-style": null,
@@ -333,7 +276,6 @@
         "text": "documentation page.",
         "font-size": "12pt",
         "font-family": null,
-        "color": "#303240",
         "background-color": null,
         "font-weight": "400",
         "font-style": null,
diff --git a/public/docs/content/examples-notificationCard-Advanced.json b/public/docs/content/examples-notificationCard-Advanced.json
index 7a5104a387..598b9c88c3 100644
--- a/public/docs/content/examples-notificationCard-Advanced.json
+++ b/public/docs/content/examples-notificationCard-Advanced.json
@@ -1,21 +1,11 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Additionally, you can pass actions for your NotificationCard.",
-            "marks": []
-          }
-        ]
+        "text": "Additionally, you can pass actions for your NotificationCard."
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/examples-pickerInput-ArrayPickerInput.json b/public/docs/content/examples-pickerInput-ArrayPickerInput.json
index 635b07b250..b24123381a 100644
--- a/public/docs/content/examples-pickerInput-ArrayPickerInput.json
+++ b/public/docs/content/examples-pickerInput-ArrayPickerInput.json
@@ -4,25 +4,9 @@
     "type": "paragraph",
     "children": [
       {
-        "text": "Below, you can see b",
+        "text": "Below, you can see basic PickerInput usage with ",
         "font-size": "12pt",
         "font-family": null,
-        "color": "#303240",
-        "background-color": null,
-        "font-weight": "400",
-        "font-style": null,
-        "font-variant": "normal",
-        "text-decoration": "none",
-        "vertical-align": "baseline",
-        "white-space": "pre-wrap",
-        "": null,
-        "uui-richTextEditor-span-mark": true
-      },
-      {
-        "text": "asic PickerInput usage with ",
-        "font-size": "12pt",
-        "font-family": null,
-        "color": "#303240",
         "background-color": null,
         "font-weight": "400",
         "font-style": null,
diff --git a/public/docs/content/examples-pickerInput-PickerInputWithCustomFooter.json b/public/docs/content/examples-pickerInput-PickerInputWithCustomFooter.json
index 8abfb87fe2..7d29bbeabb 100644
--- a/public/docs/content/examples-pickerInput-PickerInputWithCustomFooter.json
+++ b/public/docs/content/examples-pickerInput-PickerInputWithCustomFooter.json
@@ -1,65 +1,34 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "By default,  ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "DataPickerFooter",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " is rendered as a footer. But it is possible to pass a  ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "renderFooter",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " method, which is suitable for some specific cases. ",
-            "marks": []
-          }
-        ]
+        "text": "By default,  "
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "In this example, it is shown how to render a custom footer.",
-            "marks": []
-          }
-        ]
+        "text": "DataPickerFooter",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " is rendered as a footer. But it is possible to pass a  "
+      },
+      {
+        "text": "renderFooter",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " method, which is suitable for some specific cases. "
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "In this example, it is shown how to render a custom footer."
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/examples-pickerInput-TogglerConfiguration.json b/public/docs/content/examples-pickerInput-TogglerConfiguration.json
index f388318075..e6bf0d56be 100644
--- a/public/docs/content/examples-pickerInput-TogglerConfiguration.json
+++ b/public/docs/content/examples-pickerInput-TogglerConfiguration.json
@@ -1,137 +1,73 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "You can configure how many tags should be shown in the picker toggler via the ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "maxItems",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " prop; if you have more items than the maxItem number, they will be wrapped into one tag.",
-            "marks": []
-          }
-        ]
+        "text": "You can configure how many tags should be shown in the picker toggler via the "
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "By default, PickerInput wraps tags in a new line. You can change this behavior via the ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "isSingleLine={ true }",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " prop.",
-            "marks": []
-          }
-        ]
+        "text": "maxItems",
+        "uui-richTextEditor-code": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "If you prefer the autocomplete behavior — when the dropdown opens after you type some number of symbols - use  ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "minCharsToSearch",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " prop. Pay attention that you set ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "searchPosition='input'",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " in this case.",
-            "marks": []
-          }
-        ]
+        "text": " prop; if you have more items than the maxItem number, they will be wrapped into one tag."
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "By default, PickerInput wraps tags in a new line. You can change this behavior via the "
+      },
+      {
+        "text": "isSingleLine={ true }",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " prop."
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "If you prefer the autocomplete behavior — when the dropdown opens after you type some number of symbols - use  "
+      },
+      {
+        "text": "minCharsToSearch",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " prop. Pay attention that you set "
+      },
+      {
+        "text": "searchPosition='input'",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " in this case."
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "At last, you can define your own toggler components via the "
+      },
+      {
+        "text": "renderToggler",
+        "uui-richTextEditor-code": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "At last, you can define your own toggler components via the ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "renderToggler",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " callback.",
-            "marks": []
-          }
-        ]
+        "text": " callback."
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/examples-pickerList-Basic.json b/public/docs/content/examples-pickerList-Basic.json
index 6b17add390..d3fa4387bf 100644
--- a/public/docs/content/examples-pickerList-Basic.json
+++ b/public/docs/content/examples-pickerList-Basic.json
@@ -1,312 +1,174 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "You can configure the number of items to shown initially when nothing is selected via ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "maxDefaultItems",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " prop; by default it 10.",
-            "marks": []
-          }
-        ]
+        "text": "You can configure the number of items to shown initially when nothing is selected via "
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "The same applies to the",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "maximum",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "number of items to show, including",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "those",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "selected via",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "the",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "maxTotalItems",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "prop.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          }
-        ]
+        "text": "maxDefaultItems",
+        "uui-richTextEditor-code": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Also, you can provide a ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "defaultIds",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " array which will be shown first. If not specified, top items will be shown according to the DataSource sorting settings.",
-            "marks": []
-          }
-        ]
+        "text": " prop; by default it 10."
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "The same applies to the",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "maximum",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "number of items to show, including",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "those",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "selected via",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "the",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "maxTotalItems",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true,
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "prop.",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "Also, you can provide a "
+      },
+      {
+        "text": "defaultIds",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " array which will be shown first. If not specified, top items will be shown according to the DataSource sorting settings."
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/examples-pickerModal-BasicPickerModal.json b/public/docs/content/examples-pickerModal-BasicPickerModal.json
index c007d1530d..f10a4f45d4 100644
--- a/public/docs/content/examples-pickerModal-BasicPickerModal.json
+++ b/public/docs/content/examples-pickerModal-BasicPickerModal.json
@@ -1,149 +1,67 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Below, you can see b",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "asic PickerModal usage with ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "ArrayDataSource",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": ".",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          }
-        ]
+        "text": "Below, you can see basic PickerModal usage with ",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "If you want a single or multi select, pass the ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "selectionMode: 'single' | 'multi",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " prop.",
-            "marks": []
-          }
-        ]
+        "text": "ArrayDataSource",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true,
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": ".",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "If you want a single or multi select, pass the "
+      },
+      {
+        "text": "selectionMode: 'single' | 'multi",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " prop."
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/examples-progressBar-Basic.json b/public/docs/content/examples-progressBar-Basic.json
index 4c6c289a12..6868731195 100644
--- a/public/docs/content/examples-progressBar-Basic.json
+++ b/public/docs/content/examples-progressBar-Basic.json
@@ -1,286 +1,133 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "By default, ProgressBar",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "displays",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "a progress label like '20%",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": ".'",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "  But you can set your custom label using",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "the",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "label",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "prop.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          }
-        ]
+        "text": "By default, ProgressBar",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "To show ProgressBar with striped animation, set the ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "striped",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " prop. The striped progress bar has no label.",
-            "marks": []
-          }
-        ]
+        "text": " "
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "ProgressBar can be of three sizes: 12, 18 and 24px. By default — 12px.",
-            "marks": []
-          }
-        ]
+        "text": "displays",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "a progress label like '20%.'  But you can set your custom label using",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "the",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "label",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true,
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "prop.",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "To show ProgressBar with striped animation, set the "
+      },
+      {
+        "text": "striped",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " prop. The striped progress bar has no label."
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "ProgressBar can be of three sizes: 12, 18 and 24px. By default — 12px."
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/examples-progressBar-IndeterminateBar.json b/public/docs/content/examples-progressBar-IndeterminateBar.json
index ebe2531215..6a60fa20f9 100644
--- a/public/docs/content/examples-progressBar-IndeterminateBar.json
+++ b/public/docs/content/examples-progressBar-IndeterminateBar.json
@@ -1,131 +1,73 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Here is a",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "basic example of IndeterminateBar in",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "three",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "different sizes.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          }
-        ]
+        "text": "Here is a",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "basic example of IndeterminateBar in",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "three",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "different sizes.",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/examples-progressBar-IndicatorBar.json b/public/docs/content/examples-progressBar-IndicatorBar.json
index ddac13f506..c5fe780ac8 100644
--- a/public/docs/content/examples-progressBar-IndicatorBar.json
+++ b/public/docs/content/examples-progressBar-IndicatorBar.json
@@ -1,121 +1,39 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Below is a",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "n example of determinate IndicatorBar. If no progress is set",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": ",",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "IndicatorBar will be animated as indeterminate.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          }
-        ]
+        "text": "Below is an example of determinate IndicatorBar. If no progress is set,",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "IndicatorBar will be animated as indeterminate.",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/examples-radioInput-Basic.json b/public/docs/content/examples-radioInput-Basic.json
index f79ddee3a3..d2b428431c 100644
--- a/public/docs/content/examples-radioInput-Basic.json
+++ b/public/docs/content/examples-radioInput-Basic.json
@@ -1 +1,11 @@
-{"object":"value","document":{"object":"document","data":{},"nodes":[{"object":"block","type":"paragraph","data":{},"nodes":[{"object":"text","text":"Basic radioInput usage","marks":[]}]}]}}
\ No newline at end of file
+[
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "Basic radioInput usage"
+      }
+    ]
+  }
+]
\ No newline at end of file
diff --git a/public/docs/content/examples-rating-Basic.json b/public/docs/content/examples-rating-Basic.json
index 8f80b5834f..7f7684c327 100644
--- a/public/docs/content/examples-rating-Basic.json
+++ b/public/docs/content/examples-rating-Basic.json
@@ -1 +1,11 @@
-{"object":"value","document":{"object":"document","data":{},"nodes":[{"object":"block","type":"paragraph","data":{},"nodes":[{"object":"text","text":"Basic Rating usage","marks":[]}]}]}}
\ No newline at end of file
+[
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "Basic Rating usage"
+      }
+    ]
+  }
+]
\ No newline at end of file
diff --git a/public/docs/content/examples-slider-Basic.json b/public/docs/content/examples-slider-Basic.json
index dac88c211c..d6d4a4ad45 100644
--- a/public/docs/content/examples-slider-Basic.json
+++ b/public/docs/content/examples-slider-Basic.json
@@ -1,568 +1,299 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Let’s look at the b",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "asic slider usage. ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          }
-        ]
+        "text": "Let’s look at the basic slider usage. ",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "You can use the",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "color",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true,
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "property to",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "change",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "the",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "color of the filled slider.",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "With",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "the",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "splitAt",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true,
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "property, you can mark points at the slider. And you can also disable the tooltip -  set",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "false",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true,
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "for",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "showTooltip",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true,
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "and add labels to the points of the slider -",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "renderLabel",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true,
+        "uui-richTextEditor-code": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "You can use the",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "color",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "property to",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "change",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "the",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "color of the filled slider.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "With",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "the",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "splitAt",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "property, you can mark points at the slider. And you can also disable the tooltip -  set",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "false",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "for",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "showTooltip",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "and add labels to the points of the slider -",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "renderLabel",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": ".",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          }
-        ]
+        "text": ".",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/examples-sliderRating-Basic.json b/public/docs/content/examples-sliderRating-Basic.json
index 1b733533b4..817f3c7b63 100644
--- a/public/docs/content/examples-sliderRating-Basic.json
+++ b/public/docs/content/examples-sliderRating-Basic.json
@@ -1,94 +1,38 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Let’s see the b",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "asic SliderRating usage.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          }
-        ]
+        "text": "Let’s see the basic SliderRating usage.",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "By passing the "
+      },
+      {
+        "text": "renderTooltip",
+        "uui-richTextEditor-code": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "By passing the ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "renderTooltip",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-code",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " property, you can provide your own tooltip render.",
-            "marks": []
-          }
-        ]
+        "text": " property, you can provide your own tooltip render."
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/examples-switch-Basic.json b/public/docs/content/examples-switch-Basic.json
index de586b0e7e..7f834c8658 100644
--- a/public/docs/content/examples-switch-Basic.json
+++ b/public/docs/content/examples-switch-Basic.json
@@ -1 +1,11 @@
-{"object":"value","document":{"object":"document","data":{},"nodes":[{"object":"block","type":"paragraph","data":{},"nodes":[{"object":"text","text":"Basic switch usage","marks":[]}]}]}}
\ No newline at end of file
+[
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "Basic switch usage"
+      }
+    ]
+  }
+]
\ No newline at end of file
diff --git a/public/docs/content/examples-tables-useTableState-useTableStateWithIEditable.json b/public/docs/content/examples-tables-useTableState-useTableStateWithIEditable.json
index 19b6a3fa67..3a40d10549 100644
--- a/public/docs/content/examples-tables-useTableState-useTableStateWithIEditable.json
+++ b/public/docs/content/examples-tables-useTableState-useTableStateWithIEditable.json
@@ -3,8 +3,11 @@
     "type": "paragraph",
     "children": [
       {
-        "text": "If you prefer to handle table state changes manually, you can provide the ",
-        "color": "rgb(55, 65, 81)"
+        "text": "If you prefer to handle table state changes manually, you can provide the"
+      },
+      {
+        "color": "rgb(55, 65, 81)",
+        "text": " "
       },
       {
         "text": "value",
@@ -12,16 +15,22 @@
         "color": "var(--tw-prose-code)"
       },
       {
-        "text": " and ",
+        "text": " ",
         "color": "rgb(55, 65, 81)"
       },
+      {
+        "text": "and"
+      },
+      {
+        "color": "rgb(55, 65, 81)",
+        "text": " "
+      },
       {
         "text": "onValueChange",
         "uui-richTextEditor-code": true
       },
       {
-        "text": " parameters with your table state value and change handler, respectively. ",
-        "color": "rgb(55, 65, 81)"
+        "text": " parameters with your table state value and change handler, respectively. "
       }
     ]
   },
@@ -29,7 +38,6 @@
     "type": "paragraph",
     "children": [
       {
-        "color": "rgb(55, 65, 81)",
         "text": "This will override the default behavior of storing the state in the URL and allow you to have full control over the state management."
       }
     ]
diff --git a/public/docs/content/examples-testing-__tests__-testComponentNoTestUtilstesttsx.json b/public/docs/content/examples-testing-__tests__-testComponentNoTestUtilstesttsx.json
index fdf087ca8e..8bf1a72680 100644
--- a/public/docs/content/examples-testing-__tests__-testComponentNoTestUtilstesttsx.json
+++ b/public/docs/content/examples-testing-__tests__-testComponentNoTestUtilstesttsx.json
@@ -11,17 +11,23 @@
         "uui-richTextEditor-code": true
       },
       {
-        "color": "rgb(48, 50, 64)",
-        "text": " library requires "
+        "text": " ",
+        "color": "rgb(48, 50, 64)"
+      },
+      {
+        "text": "library requires "
       },
       {
-        "color": "rgb(48, 50, 64)",
         "text": "React ^18",
-        "uui-richTextEditor-code": true
+        "uui-richTextEditor-code": true,
+        "color": "rgb(48, 50, 64)"
       },
       {
         "color": "rgb(48, 50, 64)",
-        "text": " If this version of React cannot be used, then it's still possible to test UUI components using approach below."
+        "text": " "
+      },
+      {
+        "text": "If this version of React cannot be used, then it's still possible to test UUI components using approach below."
       }
     ]
   }
diff --git a/public/docs/content/examples-textArea-Basic.json b/public/docs/content/examples-textArea-Basic.json
index f3da29b5d2..2da4ac5d15 100644
--- a/public/docs/content/examples-textArea-Basic.json
+++ b/public/docs/content/examples-textArea-Basic.json
@@ -1,21 +1,11 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Basic TextArea usage",
-            "marks": []
-          }
-        ]
+        "text": "Basic TextArea usage"
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/examples-textArea-HeightConfiguration.json b/public/docs/content/examples-textArea-HeightConfiguration.json
index da1f94563a..1526610bb6 100644
--- a/public/docs/content/examples-textArea-HeightConfiguration.json
+++ b/public/docs/content/examples-textArea-HeightConfiguration.json
@@ -14,11 +14,9 @@
       },
       {
         "text": "rows",
-        "color": "rgb(0, 0, 0)",
         "uui-richTextEditor-code": true
       },
       {
-        "color": "rgb(0, 0, 0)",
         "text": " prop. "
       }
     ]
@@ -27,16 +25,13 @@
     "type": "paragraph",
     "children": [
       {
-        "color": "rgb(0, 0, 0)",
         "text": "In case if you need height adjusted to the content, use "
       },
       {
-        "color": "rgb(0, 0, 0)",
         "text": "autoSize={ true }",
         "uui-richTextEditor-code": true
       },
       {
-        "color": "rgb(0, 0, 0)",
         "text": " prop."
       }
     ]
diff --git a/public/docs/content/loaders-for-designers.json b/public/docs/content/loaders-for-designers.json
index f13bd19036..2d8884bd2e 100644
--- a/public/docs/content/loaders-for-designers.json
+++ b/public/docs/content/loaders-for-designers.json
@@ -1,246 +1,328 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "Loaders are devided into",
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " ",
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": "2 main groups",
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " ",
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": "- loaders themself and skeletons. ",
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": "Inside this groups there are also different types of elements. On the sheme below you can find the division.",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "uui-richTextEditor-header-2",
+    "children": [
+      {
+        "text": "Loaders",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "uui-richTextEditor-header-3",
+    "children": [
+      {
+        "text": "Types",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "There are three visually distinct types of progress indicators:",
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " ",
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": "spinner, waver, progress bar",
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": ". Only one type should represent each kind of activity in an app. For example, if a refresh action displays a spinner indicator on one screen, that same action shouldn’t use a waver indicator elsewhere.",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {
+      "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD1.png",
+      "imageSize": {
+        "width": 934,
+        "height": 613.3266666666667
+      }
+    },
+    "type": "image",
+    "url": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD1.png",
+    "children": [
+      {
+        "text": ""
+      }
+    ],
+    "width": 934
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "When the process of loading is completed and for users it’s visually not viewable, that the process has changed something, like sending contact form it’s better to show notification, that the process was successful, after the loader has disappeared.",
+        "font-style": "normal",
+        "font-variant-caps": "normal",
+        "font-weight": "normal",
+        "letter-spacing": "normal",
+        "orphans": "auto",
+        "text-align": "start",
+        "text-indent": "0px",
+        "text-transform": "none",
+        "white-space": "normal",
+        "widows": "auto",
+        "word-spacing": "0px",
+        "-webkit-text-size-adjust": "auto",
+        "-webkit-text-stroke-width": "0px",
+        "text-decoration": "none",
+        "caret-color": "rgb(0, 0, 0)",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {
+      "cellSizes": [
+        467,
+        464
+      ]
+    },
+    "type": "table",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
         "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Loaders are devided into",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "2 main groups",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
+        "type": "table_row",
+        "children": [
           {
-            "object": "text",
-            "text": "- loaders themself and skeletons. ",
-            "marks": [
+            "data": {},
+            "type": "table_header_cell",
+            "children": [
               {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
+                "data": {},
+                "type": "paragraph",
+                "children": [
+                  {
+                    "text": "Determinate indicators",
+                    "uui-richTextEditor-span-mark": true,
+                    "font-style": "normal",
+                    "font-variant-caps": "normal",
+                    "font-weight": "normal",
+                    "letter-spacing": "normal",
+                    "orphans": "auto",
+                    "text-align": "start",
+                    "text-indent": "0px",
+                    "text-transform": "none",
+                    "white-space": "normal",
+                    "widows": "auto",
+                    "word-spacing": "0px",
+                    "-webkit-text-size-adjust": "auto",
+                    "-webkit-text-stroke-width": "0px",
+                    "text-decoration": "none",
+                    "caret-color": "rgb(0, 0, 0)"
+                  }
+                ]
               }
-            ]
+            ],
+            "colIndex": 0,
+            "rowIndex": 0,
+            "colSpan": 1,
+            "rowSpan": 1
           },
           {
-            "object": "text",
-            "text": "Inside this groups there are also different types of elements. On the sheme below you can find the division.",
-            "marks": [
+            "data": {},
+            "type": "table_header_cell",
+            "children": [
               {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
+                "data": {},
+                "type": "paragraph",
+                "children": [
+                  {
+                    "text": "Indeterminate indicators",
+                    "uui-richTextEditor-span-mark": true,
+                    "font-style": "normal",
+                    "font-variant-caps": "normal",
+                    "font-weight": "normal",
+                    "letter-spacing": "normal",
+                    "orphans": "auto",
+                    "text-align": "start",
+                    "text-indent": "0px",
+                    "text-transform": "none",
+                    "white-space": "normal",
+                    "widows": "auto",
+                    "word-spacing": "0px",
+                    "-webkit-text-size-adjust": "auto",
+                    "-webkit-text-stroke-width": "0px",
+                    "text-decoration": "none",
+                    "caret-color": "rgb(0, 0, 0)"
+                  }
+                ]
               }
-            ]
+            ],
+            "colIndex": 1,
+            "rowIndex": 0,
+            "colSpan": 1,
+            "rowSpan": 1
           }
         ]
       },
       {
-        "object": "block",
-        "type": "uui-richTextEditor-header-2",
         "data": {},
-        "nodes": [
+        "type": "table_row",
+        "children": [
           {
-            "object": "text",
-            "text": "Loaders",
-            "marks": [
+            "data": {},
+            "type": "table_cell",
+            "children": [
               {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
+                "data": {},
+                "type": "paragraph",
+                "children": [
+                  {
+                    "text": "Determinate indicators show how long a process will take. They should be used when the process with a known duration.",
+                    "font-style": "normal",
+                    "font-variant-caps": "normal",
+                    "font-weight": "normal",
+                    "letter-spacing": "normal",
+                    "orphans": "auto",
+                    "text-align": "start",
+                    "text-indent": "0px",
+                    "text-transform": "none",
+                    "white-space": "normal",
+                    "widows": "auto",
+                    "word-spacing": "0px",
+                    "-webkit-text-size-adjust": "auto",
+                    "-webkit-text-stroke-width": "0px",
+                    "text-decoration": "none",
+                    "caret-color": "rgb(0, 0, 0)",
+                    "uui-richTextEditor-span-mark": true
+                  }
+                ]
               }
-            ]
-          }
-        ]
-      },
-      {
-        "object": "block",
-        "type": "uui-richTextEditor-header-3",
-        "data": {},
-        "nodes": [
+            ],
+            "colIndex": 0,
+            "rowIndex": 1,
+            "colSpan": 1,
+            "rowSpan": 1
+          },
           {
-            "object": "text",
-            "text": "Types",
-            "marks": [
+            "data": {},
+            "type": "table_cell",
+            "children": [
               {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
+                "data": {},
+                "type": "paragraph",
+                "children": [
+                  {
+                    "text": "Indeterminate indicators express an unknown amount of wait time. They should be used when website performs an unquantifiable task, such as loading or synchronizing complex data or if it’s not necessary to indicate how long an activity will take.",
+                    "font-style": "normal",
+                    "font-variant-caps": "normal",
+                    "font-weight": "normal",
+                    "letter-spacing": "normal",
+                    "orphans": "auto",
+                    "text-align": "start",
+                    "text-indent": "0px",
+                    "text-transform": "none",
+                    "white-space": "normal",
+                    "widows": "auto",
+                    "word-spacing": "0px",
+                    "-webkit-text-size-adjust": "auto",
+                    "-webkit-text-stroke-width": "0px",
+                    "text-decoration": "none",
+                    "caret-color": "rgb(0, 0, 0)",
+                    "uui-richTextEditor-span-mark": true
+                  }
+                ]
               }
-            ]
+            ],
+            "colIndex": 1,
+            "rowIndex": 1,
+            "colSpan": 1,
+            "rowSpan": 1
           }
         ]
       },
       {
-        "object": "block",
-        "type": "paragraph",
         "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "There are three visually distinct types of progress indicators:",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
+        "type": "table_row",
+        "children": [
           {
-            "object": "text",
-            "text": "spinner, waver, progress bar",
-            "marks": [
+            "data": {},
+            "type": "table_cell",
+            "children": [
               {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
+                "data": {},
+                "type": "paragraph",
+                "children": [
+                  {
+                    "text": "Use it when the process with well-defined duration.",
+                    "font-style": "normal",
+                    "font-variant-caps": "normal",
+                    "font-weight": "normal",
+                    "letter-spacing": "normal",
+                    "orphans": "auto",
+                    "text-align": "start",
+                    "text-indent": "0px",
+                    "text-transform": "none",
+                    "white-space": "normal",
+                    "widows": "auto",
+                    "word-spacing": "0px",
+                    "-webkit-text-size-adjust": "auto",
+                    "-webkit-text-stroke-width": "0px",
+                    "text-decoration": "none",
+                    "caret-color": "rgb(0, 0, 0)",
+                    "uui-richTextEditor-span-mark": true
+                  }
+                ]
               }
-            ]
+            ],
+            "colIndex": 0,
+            "rowIndex": 2,
+            "colSpan": 1,
+            "rowSpan": 1
           },
           {
-            "object": "text",
-            "text": ". Only one type should represent each kind of activity in an app. For example, if a refresh action displays a spinner indicator on one screen, that same action shouldn’t use a waver indicator elsewhere.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "object": "block",
-        "type": "image",
-        "data": {
-          "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD1.png",
-          "imageSize": {
-            "width": 934,
-            "height": 613.3266666666667
-          }
-        },
-        "nodes": [
-          {
-            "object": "text",
-            "text": "",
-            "marks": []
-          }
-        ]
-      },
-      {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "When the process of loading is completed and for users it’s visually not viewable, that the process has changed something, like sending contact form it’s better to show notification, that the process was successful, after the loader has disappeared.",
-            "marks": [
+            "data": {},
+            "type": "table_cell",
+            "children": [
               {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
+                "data": {},
+                "type": "paragraph",
+                "children": [
+                  {
+                    "text": "Use it to communicate the status of a background operation or when space is constrained.",
                     "font-style": "normal",
                     "font-variant-caps": "normal",
                     "font-weight": "normal",
@@ -256,2198 +338,950 @@
                     "-webkit-text-stroke-width": "0px",
                     "text-decoration": "none",
                     "caret-color": "rgb(0, 0, 0)",
-                    "color": "rgb(0, 0, 0)"
+                    "uui-richTextEditor-span-mark": true
                   }
-                }
+                ]
               }
-            ]
+            ],
+            "colIndex": 1,
+            "rowIndex": 2,
+            "colSpan": 1,
+            "rowSpan": 1
           }
         ]
       },
       {
-        "object": "block",
-        "type": "paragraph",
         "data": {},
-        "nodes": [
+        "type": "table_row",
+        "children": [
           {
-            "object": "block",
-            "type": "table",
-            "data": {
-              "cellSizes": [
-                467,
-                464
-              ]
-            },
-            "nodes": [
+            "data": {},
+            "type": "table_cell",
+            "children": [
               {
-                "object": "block",
-                "type": "table_row",
                 "data": {},
-                "nodes": [
+                "type": "paragraph",
+                "children": [
                   {
-                    "object": "block",
-                    "type": "table_header_cell",
-                    "data": {},
-                    "nodes": [
-                      {
-                        "object": "block",
-                        "type": "paragraph",
-                        "data": {},
-                        "nodes": [
-                          {
-                            "object": "text",
-                            "text": "Determinate indicators",
-                            "marks": [
-                              {
-                                "object": "mark",
-                                "type": "uui-richTextEditor-span-mark",
-                                "data": {
-                                  "style": {}
-                                }
-                              },
-                              {
-                                "object": "mark",
-                                "type": "uui-richTextEditor-span-mark",
-                                "data": {
-                                  "style": {
-                                    "font-style": "normal",
-                                    "font-variant-caps": "normal",
-                                    "font-weight": "normal",
-                                    "letter-spacing": "normal",
-                                    "orphans": "auto",
-                                    "text-align": "start",
-                                    "text-indent": "0px",
-                                    "text-transform": "none",
-                                    "white-space": "normal",
-                                    "widows": "auto",
-                                    "word-spacing": "0px",
-                                    "-webkit-text-size-adjust": "auto",
-                                    "-webkit-text-stroke-width": "0px",
-                                    "text-decoration": "none",
-                                    "caret-color": "rgb(0, 0, 0)",
-                                    "color": "rgb(0, 0, 0)"
-                                  }
-                                }
-                              }
-                            ]
-                          }
-                        ]
-                      }
-                    ]
-                  },
-                  {
-                    "object": "block",
-                    "type": "table_header_cell",
-                    "data": {},
-                    "nodes": [
-                      {
-                        "object": "block",
-                        "type": "paragraph",
-                        "data": {},
-                        "nodes": [
-                          {
-                            "object": "text",
-                            "text": "Indeterminate indicators",
-                            "marks": [
-                              {
-                                "object": "mark",
-                                "type": "uui-richTextEditor-span-mark",
-                                "data": {
-                                  "style": {}
-                                }
-                              },
-                              {
-                                "object": "mark",
-                                "type": "uui-richTextEditor-span-mark",
-                                "data": {
-                                  "style": {
-                                    "font-style": "normal",
-                                    "font-variant-caps": "normal",
-                                    "font-weight": "normal",
-                                    "letter-spacing": "normal",
-                                    "orphans": "auto",
-                                    "text-align": "start",
-                                    "text-indent": "0px",
-                                    "text-transform": "none",
-                                    "white-space": "normal",
-                                    "widows": "auto",
-                                    "word-spacing": "0px",
-                                    "-webkit-text-size-adjust": "auto",
-                                    "-webkit-text-stroke-width": "0px",
-                                    "text-decoration": "none",
-                                    "caret-color": "rgb(0, 0, 0)",
-                                    "color": "rgb(0, 0, 0)"
-                                  }
-                                }
-                              }
-                            ]
-                          }
-                        ]
-                      }
-                    ]
+                    "text": "Always report progress accurately.",
+                    "font-style": "normal",
+                    "font-variant-caps": "normal",
+                    "font-weight": "normal",
+                    "letter-spacing": "normal",
+                    "orphans": "auto",
+                    "text-align": "start",
+                    "text-indent": "0px",
+                    "text-transform": "none",
+                    "white-space": "normal",
+                    "widows": "auto",
+                    "word-spacing": "0px",
+                    "-webkit-text-size-adjust": "auto",
+                    "-webkit-text-stroke-width": "0px",
+                    "text-decoration": "none",
+                    "caret-color": "rgb(0, 0, 0)",
+                    "uui-richTextEditor-span-mark": true
                   }
                 ]
-              },
+              }
+            ],
+            "colIndex": 0,
+            "rowIndex": 3,
+            "colSpan": 1,
+            "rowSpan": 1
+          },
+          {
+            "data": {},
+            "type": "table_cell",
+            "children": [
               {
-                "object": "block",
-                "type": "table_row",
                 "data": {},
-                "nodes": [
-                  {
-                    "object": "block",
-                    "type": "table_cell",
-                    "data": {},
-                    "nodes": [
-                      {
-                        "object": "block",
-                        "type": "paragraph",
-                        "data": {},
-                        "nodes": [
-                          {
-                            "object": "text",
-                            "text": "Determinate indicators show how long a process will take. They should be used when the process with a known duration.",
-                            "marks": [
-                              {
-                                "object": "mark",
-                                "type": "uui-richTextEditor-span-mark",
-                                "data": {
-                                  "style": {
-                                    "font-style": "normal",
-                                    "font-variant-caps": "normal",
-                                    "font-weight": "normal",
-                                    "letter-spacing": "normal",
-                                    "orphans": "auto",
-                                    "text-align": "start",
-                                    "text-indent": "0px",
-                                    "text-transform": "none",
-                                    "white-space": "normal",
-                                    "widows": "auto",
-                                    "word-spacing": "0px",
-                                    "-webkit-text-size-adjust": "auto",
-                                    "-webkit-text-stroke-width": "0px",
-                                    "text-decoration": "none",
-                                    "caret-color": "rgb(0, 0, 0)",
-                                    "color": "rgb(0, 0, 0)"
-                                  }
-                                }
-                              }
-                            ]
-                          }
-                        ]
-                      }
-                    ]
-                  },
+                "type": "paragraph",
+                "children": [
                   {
-                    "object": "block",
-                    "type": "table_cell",
-                    "data": {},
-                    "nodes": [
-                      {
-                        "object": "block",
-                        "type": "paragraph",
-                        "data": {},
-                        "nodes": [
-                          {
-                            "object": "text",
-                            "text": "Indeterminate indicators express an unknown amount of wait time. They should be used when website performs an unquantifiable task, such as loading or synchronizing complex data or if it’s not necessary to indicate how long an activity will take.",
-                            "marks": [
-                              {
-                                "object": "mark",
-                                "type": "uui-richTextEditor-span-mark",
-                                "data": {
-                                  "style": {
-                                    "font-style": "normal",
-                                    "font-variant-caps": "normal",
-                                    "font-weight": "normal",
-                                    "letter-spacing": "normal",
-                                    "orphans": "auto",
-                                    "text-align": "start",
-                                    "text-indent": "0px",
-                                    "text-transform": "none",
-                                    "white-space": "normal",
-                                    "widows": "auto",
-                                    "word-spacing": "0px",
-                                    "-webkit-text-size-adjust": "auto",
-                                    "-webkit-text-stroke-width": "0px",
-                                    "text-decoration": "none",
-                                    "caret-color": "rgb(0, 0, 0)",
-                                    "color": "rgb(0, 0, 0)"
-                                  }
-                                }
-                              }
-                            ]
-                          }
-                        ]
-                      }
-                    ]
+                    "text": "When possible, switch from an indeterminate progress bar to a determinate progress bar.",
+                    "font-style": "normal",
+                    "font-variant-caps": "normal",
+                    "font-weight": "normal",
+                    "letter-spacing": "normal",
+                    "orphans": "auto",
+                    "text-align": "start",
+                    "text-indent": "0px",
+                    "text-transform": "none",
+                    "white-space": "normal",
+                    "widows": "auto",
+                    "word-spacing": "0px",
+                    "-webkit-text-size-adjust": "auto",
+                    "-webkit-text-stroke-width": "0px",
+                    "text-decoration": "none",
+                    "caret-color": "rgb(0, 0, 0)",
+                    "uui-richTextEditor-span-mark": true
                   }
                 ]
-              },
+              }
+            ],
+            "colIndex": 1,
+            "rowIndex": 3,
+            "colSpan": 1,
+            "rowSpan": 1
+          }
+        ]
+      },
+      {
+        "data": {},
+        "type": "table_row",
+        "children": [
+          {
+            "data": {},
+            "type": "table_cell",
+            "children": [
               {
-                "object": "block",
-                "type": "table_row",
                 "data": {},
-                "nodes": [
+                "type": "paragraph",
+                "children": [
                   {
-                    "object": "block",
-                    "type": "table_cell",
-                    "data": {},
-                    "nodes": [
-                      {
-                        "object": "block",
-                        "type": "paragraph",
-                        "data": {},
-                        "nodes": [
-                          {
-                            "object": "text",
-                            "text": "Use it when the process with well-defined duration.",
-                            "marks": [
-                              {
-                                "object": "mark",
-                                "type": "uui-richTextEditor-span-mark",
-                                "data": {
-                                  "style": {
-                                    "font-style": "normal",
-                                    "font-variant-caps": "normal",
-                                    "font-weight": "normal",
-                                    "letter-spacing": "normal",
-                                    "orphans": "auto",
-                                    "text-align": "start",
-                                    "text-indent": "0px",
-                                    "text-transform": "none",
-                                    "white-space": "normal",
-                                    "widows": "auto",
-                                    "word-spacing": "0px",
-                                    "-webkit-text-size-adjust": "auto",
-                                    "-webkit-text-stroke-width": "0px",
-                                    "text-decoration": "none",
-                                    "caret-color": "rgb(0, 0, 0)",
-                                    "color": "rgb(0, 0, 0)"
-                                  }
-                                }
-                              }
-                            ]
-                          }
-                        ]
-                      }
-                    ]
-                  },
-                  {
-                    "object": "block",
-                    "type": "table_cell",
-                    "data": {},
-                    "nodes": [
-                      {
-                        "object": "block",
-                        "type": "paragraph",
-                        "data": {},
-                        "nodes": [
-                          {
-                            "object": "text",
-                            "text": "Use it to communicate the status of a background operation or when space is constrained.",
-                            "marks": [
-                              {
-                                "object": "mark",
-                                "type": "uui-richTextEditor-span-mark",
-                                "data": {
-                                  "style": {
-                                    "font-style": "normal",
-                                    "font-variant-caps": "normal",
-                                    "font-weight": "normal",
-                                    "letter-spacing": "normal",
-                                    "orphans": "auto",
-                                    "text-align": "start",
-                                    "text-indent": "0px",
-                                    "text-transform": "none",
-                                    "white-space": "normal",
-                                    "widows": "auto",
-                                    "word-spacing": "0px",
-                                    "-webkit-text-size-adjust": "auto",
-                                    "-webkit-text-stroke-width": "0px",
-                                    "text-decoration": "none",
-                                    "caret-color": "rgb(0, 0, 0)",
-                                    "color": "rgb(0, 0, 0)"
-                                  }
-                                }
-                              }
-                            ]
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "object": "block",
-                "type": "table_row",
-                "data": {},
-                "nodes": [
-                  {
-                    "object": "block",
-                    "type": "table_cell",
-                    "data": {},
-                    "nodes": [
-                      {
-                        "object": "block",
-                        "type": "paragraph",
-                        "data": {},
-                        "nodes": [
-                          {
-                            "object": "text",
-                            "text": "Always report progress accurately.",
-                            "marks": [
-                              {
-                                "object": "mark",
-                                "type": "uui-richTextEditor-span-mark",
-                                "data": {
-                                  "style": {
-                                    "font-style": "normal",
-                                    "font-variant-caps": "normal",
-                                    "font-weight": "normal",
-                                    "letter-spacing": "normal",
-                                    "orphans": "auto",
-                                    "text-align": "start",
-                                    "text-indent": "0px",
-                                    "text-transform": "none",
-                                    "white-space": "normal",
-                                    "widows": "auto",
-                                    "word-spacing": "0px",
-                                    "-webkit-text-size-adjust": "auto",
-                                    "-webkit-text-stroke-width": "0px",
-                                    "text-decoration": "none",
-                                    "caret-color": "rgb(0, 0, 0)",
-                                    "color": "rgb(0, 0, 0)"
-                                  }
-                                }
-                              }
-                            ]
-                          }
-                        ]
-                      }
-                    ]
-                  },
-                  {
-                    "object": "block",
-                    "type": "table_cell",
-                    "data": {},
-                    "nodes": [
-                      {
-                        "object": "block",
-                        "type": "paragraph",
-                        "data": {},
-                        "nodes": [
-                          {
-                            "object": "text",
-                            "text": "When possible, switch from an indeterminate progress bar to a determinate progress bar.",
-                            "marks": [
-                              {
-                                "object": "mark",
-                                "type": "uui-richTextEditor-span-mark",
-                                "data": {
-                                  "style": {
-                                    "font-style": "normal",
-                                    "font-variant-caps": "normal",
-                                    "font-weight": "normal",
-                                    "letter-spacing": "normal",
-                                    "orphans": "auto",
-                                    "text-align": "start",
-                                    "text-indent": "0px",
-                                    "text-transform": "none",
-                                    "white-space": "normal",
-                                    "widows": "auto",
-                                    "word-spacing": "0px",
-                                    "-webkit-text-size-adjust": "auto",
-                                    "-webkit-text-stroke-width": "0px",
-                                    "text-decoration": "none",
-                                    "caret-color": "rgb(0, 0, 0)",
-                                    "color": "rgb(0, 0, 0)"
-                                  }
-                                }
-                              }
-                            ]
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "object": "block",
-                "type": "table_row",
-                "data": {},
-                "nodes": [
-                  {
-                    "object": "block",
-                    "type": "table_cell",
-                    "data": {},
-                    "nodes": [
-                      {
-                        "object": "block",
-                        "type": "paragraph",
-                        "data": {},
-                        "nodes": [
-                          {
-                            "object": "text",
-                            "text": "Hide in",
-                            "marks": [
-                              {
-                                "object": "mark",
-                                "type": "uui-richTextEditor-span-mark",
-                                "data": {
-                                  "style": {
-                                    "font-style": "normal",
-                                    "font-variant-caps": "normal",
-                                    "font-weight": "normal",
-                                    "letter-spacing": "normal",
-                                    "orphans": "auto",
-                                    "text-align": "start",
-                                    "text-indent": "0px",
-                                    "text-transform": "none",
-                                    "white-space": "normal",
-                                    "widows": "auto",
-                                    "word-spacing": "0px",
-                                    "-webkit-text-size-adjust": "auto",
-                                    "-webkit-text-stroke-width": "0px",
-                                    "text-decoration": "none",
-                                    "caret-color": "rgb(0, 0, 0)",
-                                    "color": "rgb(0, 0, 0)"
-                                  }
-                                }
-                              }
-                            ]
-                          },
-                          {
-                            "object": "text",
-                            "text": "di",
-                            "marks": [
-                              {
-                                "object": "mark",
-                                "type": "uui-richTextEditor-span-mark",
-                                "data": {
-                                  "style": {
-                                    "font-style": "normal",
-                                    "font-variant-caps": "normal",
-                                    "font-weight": "normal",
-                                    "letter-spacing": "normal",
-                                    "orphans": "auto",
-                                    "text-align": "start",
-                                    "text-indent": "0px",
-                                    "text-transform": "none",
-                                    "white-space": "normal",
-                                    "widows": "auto",
-                                    "word-spacing": "0px",
-                                    "-webkit-text-size-adjust": "auto",
-                                    "-webkit-text-stroke-width": "0px",
-                                    "text-decoration": "none",
-                                    "caret-color": "rgb(0, 0, 0)",
-                                    "color": "rgb(0, 0, 0)"
-                                  }
-                                }
-                              }
-                            ]
-                          },
-                          {
-                            "object": "text",
-                            "text": "cator after it’s completely filled.",
-                            "marks": [
-                              {
-                                "object": "mark",
-                                "type": "uui-richTextEditor-span-mark",
-                                "data": {
-                                  "style": {
-                                    "font-style": "normal",
-                                    "font-variant-caps": "normal",
-                                    "font-weight": "normal",
-                                    "letter-spacing": "normal",
-                                    "orphans": "auto",
-                                    "text-align": "start",
-                                    "text-indent": "0px",
-                                    "text-transform": "none",
-                                    "white-space": "normal",
-                                    "widows": "auto",
-                                    "word-spacing": "0px",
-                                    "-webkit-text-size-adjust": "auto",
-                                    "-webkit-text-stroke-width": "0px",
-                                    "text-decoration": "none",
-                                    "caret-color": "rgb(0, 0, 0)",
-                                    "color": "rgb(0, 0, 0)"
-                                  }
-                                }
-                              }
-                            ]
-                          }
-                        ]
-                      }
-                    ]
-                  },
-                  {
-                    "object": "block",
-                    "type": "table_cell",
-                    "data": {},
-                    "nodes": [
-                      {
-                        "object": "block",
-                        "type": "paragraph",
-                        "data": {},
-                        "nodes": [
-                          {
-                            "object": "text",
-                            "text": "Don’t transition from a spinner to a progress bar.",
-                            "marks": [
-                              {
-                                "object": "mark",
-                                "type": "uui-richTextEditor-span-mark",
-                                "data": {
-                                  "style": {
-                                    "font-style": "normal",
-                                    "font-variant-caps": "normal",
-                                    "font-weight": "normal",
-                                    "letter-spacing": "normal",
-                                    "orphans": "auto",
-                                    "text-align": "start",
-                                    "text-indent": "0px",
-                                    "text-transform": "none",
-                                    "white-space": "normal",
-                                    "widows": "auto",
-                                    "word-spacing": "0px",
-                                    "-webkit-text-size-adjust": "auto",
-                                    "-webkit-text-stroke-width": "0px",
-                                    "text-decoration": "none",
-                                    "caret-color": "rgb(0, 0, 0)",
-                                    "color": "rgb(0, 0, 0)"
-                                  }
-                                }
-                              }
-                            ]
-                          }
-                        ]
-                      }
-                    ]
+                    "text": "Hide indicator after it’s completely filled.",
+                    "font-style": "normal",
+                    "font-variant-caps": "normal",
+                    "font-weight": "normal",
+                    "letter-spacing": "normal",
+                    "orphans": "auto",
+                    "text-align": "start",
+                    "text-indent": "0px",
+                    "text-transform": "none",
+                    "white-space": "normal",
+                    "widows": "auto",
+                    "word-spacing": "0px",
+                    "-webkit-text-size-adjust": "auto",
+                    "-webkit-text-stroke-width": "0px",
+                    "text-decoration": "none",
+                    "caret-color": "rgb(0, 0, 0)",
+                    "uui-richTextEditor-span-mark": true
                   }
                 ]
-              },
+              }
+            ],
+            "colIndex": 0,
+            "rowIndex": 4,
+            "colSpan": 1,
+            "rowSpan": 1
+          },
+          {
+            "data": {},
+            "type": "table_cell",
+            "children": [
               {
-                "object": "block",
-                "type": "table_row",
                 "data": {},
-                "nodes": [
-                  {
-                    "object": "block",
-                    "type": "table_cell",
-                    "data": {},
-                    "nodes": [
-                      {
-                        "object": "block",
-                        "type": "paragraph",
-                        "data": {},
-                        "nodes": [
-                          {
-                            "object": "text",
-                            "text": "If it’s helpful, include a label to indicator to add context.",
-                            "marks": [
-                              {
-                                "object": "mark",
-                                "type": "uui-richTextEditor-span-mark",
-                                "data": {
-                                  "style": {
-                                    "font-style": "normal",
-                                    "font-variant-caps": "normal",
-                                    "font-weight": "normal",
-                                    "letter-spacing": "normal",
-                                    "orphans": "auto",
-                                    "text-align": "start",
-                                    "text-indent": "0px",
-                                    "text-transform": "none",
-                                    "white-space": "normal",
-                                    "widows": "auto",
-                                    "word-spacing": "0px",
-                                    "-webkit-text-size-adjust": "auto",
-                                    "-webkit-text-stroke-width": "0px",
-                                    "text-decoration": "none",
-                                    "caret-color": "rgb(0, 0, 0)",
-                                    "color": "rgb(0, 0, 0)"
-                                  }
-                                }
-                              }
-                            ]
-                          }
-                        ]
-                      }
-                    ]
-                  },
+                "type": "paragraph",
+                "children": [
                   {
-                    "object": "block",
-                    "type": "table_cell",
-                    "data": {},
-                    "nodes": [
-                      {
-                        "object": "block",
-                        "type": "paragraph",
-                        "data": {},
-                        "nodes": [
-                          {
-                            "object": "text",
-                            "text": "Keep indeterminate progress indicators moving so people know something is happening.",
-                            "marks": [
-                              {
-                                "object": "mark",
-                                "type": "uui-richTextEditor-span-mark",
-                                "data": {
-                                  "style": {
-                                    "font-style": "normal",
-                                    "font-variant-caps": "normal",
-                                    "font-weight": "normal",
-                                    "letter-spacing": "normal",
-                                    "orphans": "auto",
-                                    "text-align": "start",
-                                    "text-indent": "0px",
-                                    "text-transform": "none",
-                                    "white-space": "normal",
-                                    "widows": "auto",
-                                    "word-spacing": "0px",
-                                    "-webkit-text-size-adjust": "auto",
-                                    "-webkit-text-stroke-width": "0px",
-                                    "text-decoration": "none",
-                                    "caret-color": "rgb(0, 0, 0)",
-                                    "color": "rgb(0, 0, 0)"
-                                  }
-                                }
-                              }
-                            ]
-                          }
-                        ]
-                      }
-                    ]
+                    "text": "Don’t transition from a spinner to a progress bar.",
+                    "font-style": "normal",
+                    "font-variant-caps": "normal",
+                    "font-weight": "normal",
+                    "letter-spacing": "normal",
+                    "orphans": "auto",
+                    "text-align": "start",
+                    "text-indent": "0px",
+                    "text-transform": "none",
+                    "white-space": "normal",
+                    "widows": "auto",
+                    "word-spacing": "0px",
+                    "-webkit-text-size-adjust": "auto",
+                    "-webkit-text-stroke-width": "0px",
+                    "text-decoration": "none",
+                    "caret-color": "rgb(0, 0, 0)",
+                    "uui-richTextEditor-span-mark": true
                   }
                 ]
               }
-            ]
+            ],
+            "colIndex": 1,
+            "rowIndex": 4,
+            "colSpan": 1,
+            "rowSpan": 1
           }
         ]
       },
       {
-        "object": "block",
-        "type": "uui-richTextEditor-header-3",
         "data": {},
-        "nodes": [
+        "type": "table_row",
+        "children": [
           {
-            "object": "text",
-            "text": "Spinner",
-            "marks": [
+            "data": {},
+            "type": "table_cell",
+            "children": [
               {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
+                "data": {},
+                "type": "paragraph",
+                "children": [
+                  {
+                    "text": "If it’s helpful, include a label to indicator to add context.",
+                    "font-style": "normal",
+                    "font-variant-caps": "normal",
+                    "font-weight": "normal",
+                    "letter-spacing": "normal",
+                    "orphans": "auto",
+                    "text-align": "start",
+                    "text-indent": "0px",
+                    "text-transform": "none",
+                    "white-space": "normal",
+                    "widows": "auto",
+                    "word-spacing": "0px",
+                    "-webkit-text-size-adjust": "auto",
+                    "-webkit-text-stroke-width": "0px",
+                    "text-decoration": "none",
+                    "caret-color": "rgb(0, 0, 0)",
+                    "uui-richTextEditor-span-mark": true
+                  }
+                ]
               }
-            ]
-          }
-        ]
-      },
-      {
-        "object": "block",
-        "type": "image",
-        "data": {
-          "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD2.png",
-          "imageSize": {
-            "width": 800,
-            "height": 300
-          }
-        },
-        "nodes": [
-          {
-            "object": "text",
-            "text": "",
-            "marks": []
-          }
-        ]
-      },
-      {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
+            ],
+            "colIndex": 0,
+            "rowIndex": 5,
+            "colSpan": 1,
+            "rowSpan": 1
+          },
           {
-            "object": "text",
-            "text": "Behavior",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
+            "data": {},
+            "type": "table_cell",
+            "children": [
               {
-                "object": "mark",
-                "type": "uui-richTextEditor-bold",
-                "data": {}
+                "data": {},
+                "type": "paragraph",
+                "children": [
+                  {
+                    "text": "Keep indeterminate progress indicators moving so people know something is happening.",
+                    "font-style": "normal",
+                    "font-variant-caps": "normal",
+                    "font-weight": "normal",
+                    "letter-spacing": "normal",
+                    "orphans": "auto",
+                    "text-align": "start",
+                    "text-indent": "0px",
+                    "text-transform": "none",
+                    "white-space": "normal",
+                    "widows": "auto",
+                    "word-spacing": "0px",
+                    "-webkit-text-size-adjust": "auto",
+                    "-webkit-text-stroke-width": "0px",
+                    "text-decoration": "none",
+                    "caret-color": "rgb(0, 0, 0)",
+                    "uui-richTextEditor-span-mark": true
+                  }
+                ]
               }
-            ]
+            ],
+            "colIndex": 1,
+            "rowIndex": 5,
+            "colSpan": 1,
+            "rowSpan": 1
           }
         ]
-      },
+      }
+    ],
+    "colSizes": [
+      467,
+      464
+    ]
+  },
+  {
+    "data": {},
+    "type": "uui-richTextEditor-header-3",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Spinner displays progress by animating an indicator along an invisible circular track in a clockwise direction. They can be applied directly to a surface, such as a button or card.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
-      },
+        "text": "Spinner",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {
+      "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD2.png",
+      "imageSize": {
+        "width": 800,
+        "height": 300
+      }
+    },
+    "type": "image",
+    "url": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD2.png",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "\n",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "Integrating with actions",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-bold",
-                "data": {}
-              }
-            ]
-          }
-        ]
-      },
+        "text": ""
+      }
+    ],
+    "width": 800
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "A spinner can be integrated into a button or actionable icon to express a connection between an interaction and a specific item. They are typically used to express when an interaction, such as clicking a button again, isn’t available.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
-      },
+        "text": "Behavior",
+        "uui-richTextEditor-span-mark": true,
+        "uui-richTextEditor-bold": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "They should be used for short, indeterminate activities",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "(between",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "2-5 seconds). Longer activities may require alternate methods of communication, such as snackbars or notifications.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
-      },
+        "text": "Spinner displays progress by animating an indicator along an invisible circular track in a clockwise direction. They can be applied directly to a surface, such as a button or card.",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "In cases, when spinner was used to submit something or sent, for example after sending contact form, after spinner has worked, sending was completed and spinner disappeared, it’s good to show some notification that the process was successful.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
+        "text": "\n"
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
-      },
+        "text": "Integrating with actions",
+        "uui-richTextEditor-span-mark": true,
+        "uui-richTextEditor-bold": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "uui-richTextEditor-header-3",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Waver",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
-      },
+        "text": "A spinner can be integrated into a button or actionable icon to express a connection between an interaction and a specific item. They are typically used to express when an interaction, such as clicking a button again, isn’t available.",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "image",
-        "data": {
-          "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD3.png",
-          "imageSize": {
-            "width": 800,
-            "height": 300
-          }
-        },
-        "nodes": [
-          {
-            "object": "text",
-            "text": "",
-            "marks": []
-          }
-        ]
+        "text": "They should be used for short, indeterminate activities",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Behavior",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-bold",
-                "data": {}
-              }
-            ]
-          }
-        ]
+        "text": " ",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Waver displays progress by animating an indicator that the points gradually rise and fall. They are not as used as spinners, but can be used",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "for specific cases",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": ", when the spinner doesn’t work well, for example while a person is typing in chat. ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
+        "text": "(between",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Integrating with actions",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-bold",
-                "data": {}
-              }
-            ]
-          }
-        ]
+        "text": " ",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "They should be used for short, indeterminate activities",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "(between",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "2-5 seconds). Longer activities may require alternate methods of communication, such as snackbars or notifications.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "If for some element in some place, for example a card, if you  have already used a spinner, we can’t use waver in other places.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
-      },
+        "text": "2-5 seconds). Longer activities may require alternate methods of communication, such as snackbars or notifications.",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "uui-richTextEditor-header-3",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Progress bar",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
-      },
+        "text": "In cases, when spinner was used to submit something or sent, for example after sending contact form, after spinner has worked, sending was completed and spinner disappeared, it’s good to show some notification that the process was successful.",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "image",
-        "data": {
-          "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD4.png",
-          "imageSize": {
-            "width": 934,
-            "height": 412.51666666666665
-          }
-        },
-        "nodes": [
-          {
-            "object": "text",
-            "text": "",
-            "marks": []
-          }
-        ]
-      },
+        "text": "",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "uui-richTextEditor-header-3",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Behavior",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-bold",
-                "data": {}
-              }
-            ]
-          }
-        ]
-      },
+        "text": "Waver",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {
+      "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD3.png",
+      "imageSize": {
+        "width": 800,
+        "height": 300
+      }
+    },
+    "type": "image",
+    "url": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD3.png",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Progress bar display progress by animating an indicator along the length of a fixed, visible track. The behavior of the indicator is dependent on whether the progress of a process is known.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
-      },
+        "text": ""
+      }
+    ],
+    "width": 800
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "When a lot of elements are loading together it’s better to use skeletons. Progress bars can be used for loading some specific element.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
-      },
+        "text": "Behavior",
+        "uui-richTextEditor-span-mark": true,
+        "uui-richTextEditor-bold": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Types",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-bold",
-                "data": {}
-              }
-            ]
-          }
-        ]
+        "text": "Waver displays progress by animating an indicator that the points gradually rise and fall. They are not as used as spinners, but can be used",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Progress bar support both determinate and indeterminate operations.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
+        "text": " ",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "unordered-list",
-        "data": {},
-        "nodes": [
-          {
-            "object": "block",
-            "type": "list-item",
-            "data": {},
-            "nodes": [
-              {
-                "object": "block",
-                "type": "list-item-child",
-                "data": {},
-                "nodes": [
-                  {
-                    "object": "text",
-                    "text": "Determinate operations display the indicator increasing in width from 0 to 100% of the track, in sync with the process’s progress.",
-                    "marks": [
-                      {
-                        "object": "mark",
-                        "type": "uui-richTextEditor-span-mark",
-                        "data": {
-                          "style": {}
-                        }
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "object": "block",
-            "type": "list-item",
-            "data": {},
-            "nodes": [
-              {
-                "object": "block",
-                "type": "list-item-child",
-                "data": {},
-                "nodes": [
-                  {
-                    "object": "text",
-                    "text": "Indeterminate operations display the indicator continually growing and shrinking along the track until the process is complete.",
-                    "marks": [
-                      {
-                        "object": "mark",
-                        "type": "uui-richTextEditor-span-mark",
-                        "data": {
-                          "style": {}
-                        }
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ]
+        "text": "for specific cases",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "For better overview of how to use different types of indicator review section",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "“determined",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "and Indetermined”",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
-      },
+        "text": ", when the spinner doesn’t work well, for example while a person is typing in chat. ",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Determined progress bar is also divided into simple, percent, stripped and indicator. Simple, percent and stripped progress bar could be used equally depending on what you think will look better.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
+        "text": "Integrating with actions",
+        "uui-richTextEditor-span-mark": true,
+        "uui-richTextEditor-bold": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "They should be used for short, indeterminate activities",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Indicator CAN ONLY BE USED FOR SHOWING UPLOADING OF PAGE. ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
+        "text": " ",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "uui-richTextEditor-header-3",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Size of elements",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
+        "text": "(between",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "There are 3 possible size of loaders to use: large, medium, small.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
+        "text": " ",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "image",
-        "data": {
-          "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD5.png",
-          "imageSize": {
-            "width": 934,
-            "height": 412.51666666666665
-          }
-        },
-        "nodes": [
-          {
-            "object": "text",
-            "text": "",
-            "marks": []
-          }
-        ]
+        "text": "2-5 seconds). Longer activities may require alternate methods of communication, such as snackbars or notifications.",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
+        "text": "If for some element in some place, for example a card, if you  have already used a spinner, we can’t use waver in other places.",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "uui-richTextEditor-header-3",
+    "children": [
+      {
+        "text": "Progress bar",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {
+      "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD4.png",
+      "imageSize": {
+        "width": 934,
+        "height": 412.51666666666665
+      }
+    },
+    "type": "image",
+    "url": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD4.png",
+    "children": [
+      {
+        "text": ""
+      }
+    ],
+    "width": 934
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "Behavior",
+        "uui-richTextEditor-span-mark": true,
+        "uui-richTextEditor-bold": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "Progress bar display progress by animating an indicator along the length of a fixed, visible track. The behavior of the indicator is dependent on whether the progress of a process is known.",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "When a lot of elements are loading together it’s better to use skeletons. Progress bars can be used for loading some specific element.",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "Types",
+        "uui-richTextEditor-span-mark": true,
+        "uui-richTextEditor-bold": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "Progress bar support both determinate and indeterminate operations.",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "unordered-list",
+    "children": [
+      {
         "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "The main rule of using appropriate size of element is that their size should be",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
+        "type": "list-item",
+        "children": [
           {
-            "object": "text",
-            "text": "visually proportional",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-bold",
-                "data": {}
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "to the element for which it is used.",
-            "marks": [
+            "data": {},
+            "type": "list-item-child",
+            "children": [
               {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
+                "text": "Determinate operations display the indicator increasing in width from 0 to 100% of the track, in sync with the process’s progress.",
+                "uui-richTextEditor-span-mark": true
               }
             ]
           }
         ]
       },
       {
-        "object": "block",
-        "type": "paragraph",
         "data": {},
-        "nodes": [
+        "type": "list-item",
+        "children": [
           {
-            "object": "text",
-            "text": "So large elements should be basically used for some big elements, such as the whole page or big section.",
-            "marks": [
+            "data": {},
+            "type": "list-item-child",
+            "children": [
               {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
+                "text": "Indeterminate operations display the indicator continually growing and shrinking along the track until the process is complete.",
+                "uui-richTextEditor-span-mark": true
               }
             ]
           }
         ]
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "For better overview of how to use different types of indicator review section",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Medium elements should be used for smaller sections or elements, like cards. But if you have already used a large loader size for a similar type of component, you should choose only one of them and use it everywhere in the system.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
+        "text": " ",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Small size elements should logically be used for small components, such as buttons. Use the size option when you need to increase or decrease the visual weight of the loader.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
+        "text": "“determined",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "image",
-        "data": {
-          "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD 6.png",
-          "imageSize": {
-            "width": 934,
-            "height": 280.2
-          }
-        },
-        "nodes": [
-          {
-            "object": "text",
-            "text": "",
-            "marks": []
-          }
-        ]
+        "text": " ",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "uui-richTextEditor-header-2",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Sceletons",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
+        "text": "and Indetermined”",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "Determined progress bar is also divided into simple, percent, stripped and indicator. Simple, percent and stripped progress bar could be used equally depending on what you think will look better.",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "Indicator CAN ONLY BE USED FOR SHOWING UPLOADING OF PAGE. ",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "uui-richTextEditor-header-3",
+    "children": [
+      {
+        "text": "Size of elements",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "There are 3 possible size of loaders to use: large, medium, small.",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {
+      "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD5.png",
+      "imageSize": {
+        "width": 934,
+        "height": 412.51666666666665
+      }
+    },
+    "type": "image",
+    "url": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD5.png",
+    "children": [
+      {
+        "text": ""
+      }
+    ],
+    "width": 934
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "The main rule of using appropriate size of element is that their size should be",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "uui-richTextEditor-header-3",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Types",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
+        "text": " ",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "There are four types of skeletons: item, text block, person, card. Skeleton page is used with other skeleton loading components to provide a low fidelity representation of the user interface",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "(UI)",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              },
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "before content appears on the page.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
+        "text": "visually proportional",
+        "uui-richTextEditor-span-mark": true,
+        "uui-richTextEditor-bold": true
       },
       {
-        "object": "block",
-        "type": "image",
-        "data": {
-          "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD7.png",
-          "imageSize": {
-            "width": 934,
-            "height": 1438.36
-          },
-          "align": null
-        },
-        "nodes": [
-          {
-            "object": "text",
-            "text": "",
-            "marks": []
-          }
-        ]
+        "text": " ",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "uui-richTextEditor-header-3",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Behaviour",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
+        "text": "to the element for which it is used.",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "So large elements should be basically used for some big elements, such as the whole page or big section.",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "Medium elements should be used for smaller sections or elements, like cards. But if you have already used a large loader size for a similar type of component, you should choose only one of them and use it everywhere in the system.",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "Small size elements should logically be used for small components, such as buttons. Use the size option when you need to increase or decrease the visual weight of the loader.",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {
+      "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD 6.png",
+      "imageSize": {
+        "width": 934,
+        "height": 280.2
+      }
+    },
+    "type": "image",
+    "url": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD 6.png",
+    "children": [
+      {
+        "text": ""
+      }
+    ],
+    "width": 934
+  },
+  {
+    "data": {},
+    "type": "uui-richTextEditor-header-2",
+    "children": [
+      {
+        "text": "Sceletons",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "uui-richTextEditor-header-3",
+    "children": [
+      {
+        "text": "Types",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "There are four types of skeletons: item, text block, person, card. Skeleton page is used with other skeleton loading components to provide a low fidelity representation of the user interface",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "On launch, core structural elements – such as the status bar, app bar, and bottom sheet – are displayed without content until the app has loaded. ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "Placeholder elements, with subtle animation, should be displayed in locations where content will load. ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "Use also indicator while loading the page. ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "Placeholder elements should remain positioned where content will load to avoid unexpected shifts in positioning.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
-              }
-            ]
-          }
-        ]
+        "text": " ",
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": "(UI)",
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " ",
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": "before content appears on the page.",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {
+      "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD7.png",
+      "imageSize": {
+        "width": 934,
+        "height": 1438.36
+      },
+      "align": null
+    },
+    "type": "image",
+    "url": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD7.png",
+    "children": [
+      {
+        "text": ""
+      }
+    ],
+    "width": 934
+  },
+  {
+    "data": {},
+    "type": "uui-richTextEditor-header-3",
+    "children": [
+      {
+        "text": "Behaviour",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "On launch, core structural elements – such as the status bar, app bar, and bottom sheet – are displayed without content until the app has loaded. ",
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": "Placeholder elements, with subtle animation, should be displayed in locations where content will load. ",
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": "Use also indicator while loading the page. ",
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "uui-richTextEditor-header-3",
+        "text": "Placeholder elements should remain positioned where content will load to avoid unexpected shifts in positioning.",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "uui-richTextEditor-header-3",
+    "children": [
+      {
+        "text": "Best practices",
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "unordered-list",
+    "children": [
+      {
         "data": {},
-        "nodes": [
+        "type": "list-item",
+        "children": [
           {
-            "object": "text",
-            "text": "Best practices",
-            "marks": [
+            "data": {},
+            "type": "list-item-child",
+            "children": [
               {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {}
-                }
+                "text": "Try to match the number of lines of the text block to the content being loaded so it gives an accurate representation.",
+                "uui-richTextEditor-span-mark": true
               }
             ]
           }
         ]
       },
       {
-        "object": "block",
-        "type": "unordered-list",
         "data": {},
-        "nodes": [
+        "type": "list-item",
+        "children": [
           {
-            "object": "block",
-            "type": "list-item",
             "data": {},
-            "nodes": [
+            "type": "list-item-child",
+            "children": [
               {
-                "object": "block",
-                "type": "list-item-child",
-                "data": {},
-                "nodes": [
-                  {
-                    "object": "text",
-                    "text": "Try to match the number of lines of the text block to the content being loaded so it gives an accurate representation.",
-                    "marks": [
-                      {
-                        "object": "mark",
-                        "type": "uui-richTextEditor-span-mark",
-                        "data": {
-                          "style": {}
-                        }
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "object": "block",
-            "type": "list-item",
-            "data": {},
-            "nodes": [
+                "text": "Show static content that never changes on a page and",
+                "uui-richTextEditor-span-mark": true
+              },
               {
-                "object": "block",
-                "type": "list-item-child",
-                "data": {},
-                "nodes": [
-                  {
-                    "object": "text",
-                    "text": "Show static content that never changes on a page and",
-                    "marks": [
-                      {
-                        "object": "mark",
-                        "type": "uui-richTextEditor-span-mark",
-                        "data": {
-                          "style": {}
-                        }
-                      }
-                    ]
-                  },
-                  {
-                    "object": "text",
-                    "text": " ",
-                    "marks": [
-                      {
-                        "object": "mark",
-                        "type": "uui-richTextEditor-span-mark",
-                        "data": {
-                          "style": {}
-                        }
-                      },
-                      {
-                        "object": "mark",
-                        "type": "uui-richTextEditor-span-mark",
-                        "data": {
-                          "style": {}
-                        }
-                      }
-                    ]
-                  },
-                  {
-                    "object": "text",
-                    "text": "use skeleton loading for dynamic content",
-                    "marks": [
-                      {
-                        "object": "mark",
-                        "type": "uui-richTextEditor-span-mark",
-                        "data": {
-                          "style": {}
-                        }
-                      }
-                    ]
-                  },
-                  {
-                    "object": "text",
-                    "text": ". Skeleton text block can sometimes be used to represent non-typographic content such as forms. Don’t use placeholder content that will change when the page fully loads.",
-                    "marks": [
-                      {
-                        "object": "mark",
-                        "type": "uui-richTextEditor-span-mark",
-                        "data": {
-                          "style": {}
-                        }
-                      }
-                    ]
-                  }
-                ]
+                "text": " ",
+                "uui-richTextEditor-span-mark": true
+              },
+              {
+                "text": "use skeleton loading for dynamic content",
+                "uui-richTextEditor-span-mark": true
+              },
+              {
+                "text": ". Skeleton text block can sometimes be used to represent non-typographic content such as forms. Don’t use placeholder content that will change when the page fully loads.",
+                "uui-richTextEditor-span-mark": true
               }
             ]
           }
         ]
-      },
+      }
+    ]
+  },
+  {
+    "data": {
+      "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD8.1.png",
+      "imageSize": {
+        "width": 934,
+        "height": 551.0600000000001
+      }
+    },
+    "type": "image",
+    "url": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD8.1.png",
+    "children": [
       {
-        "object": "block",
-        "type": "image",
-        "data": {
-          "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD8.1.png",
-          "imageSize": {
-            "width": 934,
-            "height": 551.0600000000001
-          }
-        },
-        "nodes": [
-          {
-            "object": "text",
-            "text": "",
-            "marks": []
-          }
-        ]
-      },
+        "text": ""
+      }
+    ],
+    "width": 934
+  },
+  {
+    "data": {
+      "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD8.2.png",
+      "imageSize": {
+        "width": 934,
+        "height": 551
+      }
+    },
+    "type": "image",
+    "url": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD8.2.png",
+    "children": [
       {
-        "object": "block",
-        "type": "image",
-        "data": {
-          "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD8.2.png",
-          "imageSize": {
-            "width": 934,
-            "height": 551
-          }
-        },
-        "nodes": [
-          {
-            "object": "text",
-            "text": "",
-            "marks": []
-          }
-        ]
-      },
+        "text": ""
+      }
+    ],
+    "width": 934
+  },
+  {
+    "data": {
+      "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD 9.png",
+      "imageSize": {
+        "width": 934,
+        "height": 607.1
+      }
+    },
+    "type": "image",
+    "url": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD 9.png",
+    "children": [
       {
-        "object": "block",
-        "type": "image",
-        "data": {
-          "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/LOD 9.png",
-          "imageSize": {
-            "width": 934,
-            "height": 607.1
-          }
-        },
-        "nodes": [
-          {
-            "object": "text",
-            "text": "",
-            "marks": []
-          }
-        ]
+        "text": ""
       }
-    ]
+    ],
+    "width": 934
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/modals-descriptions.json b/public/docs/content/modals-descriptions.json
index c0302c8053..c96dd0e73e 100644
--- a/public/docs/content/modals-descriptions.json
+++ b/public/docs/content/modals-descriptions.json
@@ -1,287 +1,167 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "UUI",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "has a",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "set of components for modal construction. Pay attention",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "that they are",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "only presentational components, which we recommend",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "using",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "along with our ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "inline",
-            "type": "link",
-            "data": {
-              "url": "https://uui.epam.com/documents?category=contexts&id=modalContext&mode=doc&skin=UUI4_promo"
-            },
-            "nodes": [
-              {
-                "object": "text",
-                "text": "ModalContext",
-                "marks": [
-                  {
-                    "object": "mark",
-                    "type": "uui-richTextEditor-span-mark",
-                    "data": {
-                      "style": {
-                        "font-size": "12pt",
-                        "font-family": null,
-                        "color": "#5214cc",
-                        "background-color": null,
-                        "font-weight": "400",
-                        "font-style": null,
-                        "font-variant": "normal",
-                        "text-decoration": "underline",
-                        "-webkit-text-decoration-skip": "none",
-                        "text-decoration-skip-ink": "none",
-                        "vertical-align": "baseline",
-                        "white-space": "pre-wrap",
-                        "": null
-                      }
-                    }
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "api.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
+        "text": "UUI",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "has a",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "set of components for modal construction. Pay attention",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "that they are",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "only presentational components, which we recommend",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "using",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "along with our ",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "data": {
+          "url": "https://uui.epam.com/documents?category=contexts&id=modalContext&mode=doc&skin=UUI4_promo"
+        },
+        "type": "link",
+        "url": "https://uui.epam.com/documents?category=contexts&id=modalContext&mode=doc&skin=UUI4_promo",
+        "children": [
+          {
+            "text": "ModalContext",
+            "font-size": "12pt",
+            "font-family": null,
+            "color": "#5214cc",
+            "background-color": null,
+            "font-weight": "400",
+            "font-style": null,
+            "font-variant": "normal",
+            "text-decoration": "underline",
+            "-webkit-text-decoration-skip": "none",
+            "text-decoration-skip-ink": "none",
+            "vertical-align": "baseline",
+            "white-space": "pre-wrap",
+            "": null,
+            "uui-richTextEditor-span-mark": true
           }
         ]
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "api.",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/notificationCard-descriptions.json b/public/docs/content/notificationCard-descriptions.json
index 2c8478449d..cebe4852a2 100644
--- a/public/docs/content/notificationCard-descriptions.json
+++ b/public/docs/content/notificationCard-descriptions.json
@@ -1,364 +1,169 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "This is a component to notify the user about the result of",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "a",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "particular action. ",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          }
-        ]
+        "text": "This is a component to notify the user about the result of",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "It's just a presentational component",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": ";",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "notification",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "s to",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "show/hide business logic are provid",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "ed",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "by",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "inline",
-            "type": "link",
-            "data": {
-              "url": "https://uui.epam.com/documents?category=contexts&id=notificationContextDoc&mode=doc&skin=UUI4_promo"
-            },
-            "nodes": [
-              {
-                "object": "text",
-                "text": " ",
-                "marks": []
-              },
-              {
-                "object": "text",
-                "text": "Notification Context",
-                "marks": [
-                  {
-                    "object": "mark",
-                    "type": "uui-richTextEditor-span-mark",
-                    "data": {
-                      "style": {
-                        "font-size": "12pt",
-                        "font-family": null,
-                        "color": "#5214cc",
-                        "background-color": null,
-                        "font-weight": "400",
-                        "font-style": null,
-                        "font-variant": "normal",
-                        "text-decoration": "underline",
-                        "-webkit-text-decoration-skip": "none",
-                        "text-decoration-skip-ink": "none",
-                        "vertical-align": "baseline",
-                        "white-space": "pre-wrap",
-                        "": null
-                      }
-                    }
-                  }
-                ]
-              }
-            ]
+        "text": " "
+      },
+      {
+        "text": "a",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "particular action. ",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "It's just a presentational component;",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "notifications to",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "show/hide business logic are provided",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "by",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "data": {
+          "url": "https://uui.epam.com/documents?category=contexts&id=notificationContextDoc&mode=doc&skin=UUI4_promo"
+        },
+        "type": "link",
+        "url": "https://uui.epam.com/documents?category=contexts&id=notificationContextDoc&mode=doc&skin=UUI4_promo",
+        "children": [
+          {
+            "text": " "
           },
           {
-            "object": "text",
-            "text": ".",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
+            "text": "Notification Context",
+            "font-size": "12pt",
+            "font-family": null,
+            "background-color": null,
+            "font-weight": "400",
+            "font-style": null,
+            "font-variant": "normal",
+            "text-decoration": "underline",
+            "-webkit-text-decoration-skip": "none",
+            "text-decoration-skip-ink": "none",
+            "vertical-align": "baseline",
+            "white-space": "pre-wrap",
+            "": null,
+            "uui-richTextEditor-span-mark": true
           }
         ]
+      },
+      {
+        "text": ".",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/pickerInput-descriptions.json b/public/docs/content/pickerInput-descriptions.json
index 3d04902e7a..19114574ed 100644
--- a/public/docs/content/pickerInput-descriptions.json
+++ b/public/docs/content/pickerInput-descriptions.json
@@ -19,7 +19,6 @@
         "text": "alongside",
         "font-size": "12pt",
         "font-family": null,
-        "color": "#0e101a",
         "background-color": null,
         "font-weight": "400",
         "font-style": null,
diff --git a/public/docs/content/pickerList-description.json b/public/docs/content/pickerList-description.json
index d74dd515ea..342ee4e60c 100644
--- a/public/docs/content/pickerList-description.json
+++ b/public/docs/content/pickerList-description.json
@@ -1,186 +1,90 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "PickerList is a p",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "icker with",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "a",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "short list of items and",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "a",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "modal for all items view.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          }
-        ]
+        "text": "PickerList is a picker with",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "a",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "short list of items and",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "a",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "modal for all items view.",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/pickerModal-descriptions.json b/public/docs/content/pickerModal-descriptions.json
index f7fbc31f0a..97f67e65c6 100644
--- a/public/docs/content/pickerModal-descriptions.json
+++ b/public/docs/content/pickerModal-descriptions.json
@@ -1,41 +1,22 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "PickerModal is a selectable list of items opened in modal window.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          }
-        ]
+        "text": "PickerModal is a selectable list of items opened in modal window.",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/progressBar-descriptions.json b/public/docs/content/progressBar-descriptions.json
index 274087387e..05e36eff29 100644
--- a/public/docs/content/progressBar-descriptions.json
+++ b/public/docs/content/progressBar-descriptions.json
@@ -1,527 +1,242 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "A p",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "rogress bar display",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "s",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "progress by animating an indicator along the length of a fixed, visible track. The behavior of the indicator is dependent on whether the progress of a process is known.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          }
-        ]
+        "text": "A progress bar displays",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Progress bars support",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "both determinate and indeterminate operations.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          }
-        ]
+        "text": " "
+      },
+      {
+        "text": "progress by animating an indicator along the length of a fixed, visible track. The behavior of the indicator is dependent on whether the progress of a process is known.",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "Progress bars support",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
       },
       {
-        "object": "block",
-        "type": "unordered-list",
+        "text": "both determinate and indeterminate operations.",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "unordered-list",
+    "children": [
+      {
         "data": {},
-        "nodes": [
+        "type": "list-item",
+        "children": [
           {
-            "object": "block",
-            "type": "list-item",
             "data": {},
-            "nodes": [
-              {
-                "object": "block",
-                "type": "list-item-child",
-                "data": {},
-                "nodes": [
-                  {
-                    "object": "text",
-                    "text": "Determinate operations display the indicator increasing in width from 0 to 100% of the track, in sync with the process’s progress.",
-                    "marks": [
-                      {
-                        "object": "mark",
-                        "type": "uui-richTextEditor-span-mark",
-                        "data": {
-                          "style": {
-                            "font-size": "12pt",
-                            "font-family": null,
-                            "color": "#303240",
-                            "background-color": null,
-                            "font-weight": "400",
-                            "font-style": null,
-                            "font-variant": "normal",
-                            "text-decoration": "none",
-                            "vertical-align": "baseline",
-                            "white-space": "pre-wrap",
-                            "": null
-                          }
-                        }
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "object": "block",
-            "type": "list-item",
-            "data": {},
-            "nodes": [
-              {
-                "object": "block",
-                "type": "list-item-child",
-                "data": {},
-                "nodes": [
-                  {
-                    "object": "text",
-                    "text": "Indeterminate operations display the indicator continually growing and shrinking along the track until the process is complete.",
-                    "marks": [
-                      {
-                        "object": "mark",
-                        "type": "uui-richTextEditor-span-mark",
-                        "data": {
-                          "style": {
-                            "font-size": "12pt",
-                            "font-family": null,
-                            "color": "#303240",
-                            "background-color": null,
-                            "font-weight": "400",
-                            "font-style": null,
-                            "font-variant": "normal",
-                            "text-decoration": "none",
-                            "vertical-align": "baseline",
-                            "white-space": "pre-wrap",
-                            "": null
-                          }
-                        }
-                      }
-                    ]
-                  }
-                ]
+            "type": "list-item-child",
+            "children": [
+              {
+                "text": "Determinate operations display the indicator increasing in width from 0 to 100% of the track, in sync with the process’s progress.",
+                "font-size": "12pt",
+                "font-family": null,
+                "background-color": null,
+                "font-weight": "400",
+                "font-style": null,
+                "font-variant": "normal",
+                "text-decoration": "none",
+                "vertical-align": "baseline",
+                "white-space": "pre-wrap",
+                "": null,
+                "uui-richTextEditor-span-mark": true
               }
             ]
           }
         ]
       },
       {
-        "object": "block",
-        "type": "paragraph",
         "data": {},
-        "nodes": [
+        "type": "list-item",
+        "children": [
           {
-            "object": "text",
-            "text": "If the progress is known",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": ",",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "please use the ProgressBar component. Otherwise",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": ",",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "use the IndeterminateBar component.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
+            "data": {},
+            "type": "list-item-child",
+            "children": [
+              {
+                "text": "Indeterminate operations display the indicator continually growing and shrinking along the track until the process is complete.",
+                "font-size": "12pt",
+                "font-family": null,
+                "background-color": null,
+                "font-weight": "400",
+                "font-style": null,
+                "font-variant": "normal",
+                "text-decoration": "none",
+                "vertical-align": "baseline",
+                "white-space": "pre-wrap",
+                "": null,
+                "uui-richTextEditor-span-mark": true
               }
             ]
           }
         ]
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "If the progress is known,",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
       },
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "The I",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": "ndicatorBar component",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "is",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "used to show page loading. It can be determinate or indeterminate.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          }
-        ]
+        "text": " "
+      },
+      {
+        "text": "please use the ProgressBar component. Otherwise,",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "use the IndeterminateBar component.",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "The IndicatorBar component",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "is",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "used to show page loading. It can be determinate or indeterminate.",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/richTextView-descriptions.json b/public/docs/content/richTextView-descriptions.json
index 1ef6b4b3dd..11a351f5be 100644
--- a/public/docs/content/richTextView-descriptions.json
+++ b/public/docs/content/richTextView-descriptions.json
@@ -1,21 +1,11 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "RichTextView is used to display HTML markup according to a design typography specification. ",
-            "marks": []
-          }
-        ]
+        "text": "RichTextView is used to display HTML markup according to a design typography specification. "
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/slider-descriptions.json b/public/docs/content/slider-descriptions.json
index 908aab8bad..c331416def 100644
--- a/public/docs/content/slider-descriptions.json
+++ b/public/docs/content/slider-descriptions.json
@@ -1,281 +1,158 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Slider is",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "a",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "UI element that",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "enables users",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "to choose some (principally numeric) value or",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "a",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "range of values using",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "a",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          },
-          {
-            "object": "text",
-            "text": " ",
-            "marks": []
-          },
-          {
-            "object": "text",
-            "text": "simple drag action.",
-            "marks": [
-              {
-                "object": "mark",
-                "type": "uui-richTextEditor-span-mark",
-                "data": {
-                  "style": {
-                    "font-size": "12pt",
-                    "font-family": null,
-                    "color": "#303240",
-                    "background-color": null,
-                    "font-weight": "400",
-                    "font-style": null,
-                    "font-variant": "normal",
-                    "text-decoration": "none",
-                    "vertical-align": "baseline",
-                    "white-space": "pre-wrap",
-                    "": null
-                  }
-                }
-              }
-            ]
-          }
-        ]
+        "text": "Slider is",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "a",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "UI element that",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "enables users",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "to choose some (principally numeric) value or",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "a",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "range of values using",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "a",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
+      },
+      {
+        "text": " "
+      },
+      {
+        "text": "simple drag action.",
+        "font-size": "12pt",
+        "font-family": null,
+        "background-color": null,
+        "font-weight": "400",
+        "font-style": null,
+        "font-variant": "normal",
+        "text-decoration": "none",
+        "vertical-align": "baseline",
+        "white-space": "pre-wrap",
+        "": null,
+        "uui-richTextEditor-span-mark": true
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/sliderRating-descriptions.json b/public/docs/content/sliderRating-descriptions.json
index 7d2c80b3d6..f806d58513 100644
--- a/public/docs/content/sliderRating-descriptions.json
+++ b/public/docs/content/sliderRating-descriptions.json
@@ -1,21 +1,11 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
+[
+  {
     "data": {},
-    "nodes": [
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "SliderRating is a user interface element used to evaluate something.",
-            "marks": []
-          }
-        ]
+        "text": "SliderRating is a user interface element used to evaluate something."
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/content/tables-overview-descriptions.json b/public/docs/content/tables-overview-descriptions.json
index a79bb1bafb..871fe324c9 100644
--- a/public/docs/content/tables-overview-descriptions.json
+++ b/public/docs/content/tables-overview-descriptions.json
@@ -26,7 +26,6 @@
         "text": "alongside",
         "font-size": "12pt",
         "font-family": null,
-        "color": "#0e101a",
         "background-color": null,
         "font-weight": "400",
         "font-style": null,
diff --git a/public/docs/content/unitTestingGuide-2-cookbook.json b/public/docs/content/unitTestingGuide-2-cookbook.json
index b1d5032f95..0db605a342 100644
--- a/public/docs/content/unitTestingGuide-2-cookbook.json
+++ b/public/docs/content/unitTestingGuide-2-cookbook.json
@@ -402,7 +402,6 @@
       },
       {
         "text": "'react-popper'",
-        "color": "#008000",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -421,7 +420,6 @@
       },
       {
         "text": "'react-popper'",
-        "color": "#008000",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -431,7 +429,6 @@
       },
       {
         "text": "Popper",
-        "color": "#7a7a43",
         "": null,
         "uui-richTextEditor-span-mark": true
       },
@@ -440,7 +437,6 @@
       },
       {
         "text": "function ",
-        "color": "#000080",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -456,7 +452,6 @@
       },
       {
         "text": "any",
-        "color": "#000080",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -466,7 +461,6 @@
       },
       {
         "text": "return ",
-        "color": "#000080",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -476,7 +470,6 @@
       },
       {
         "text": "ref",
-        "color": "#660e7a",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -495,7 +488,6 @@
       },
       {
         "text": "update",
-        "color": "#660e7a",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -514,7 +506,6 @@
       },
       {
         "text": "style",
-        "color": "#660e7a",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -524,7 +515,6 @@
       },
       {
         "text": "arrowProps",
-        "color": "#660e7a",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -534,7 +524,6 @@
       },
       {
         "text": "ref",
-        "color": "#660e7a",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -553,7 +542,6 @@
       },
       {
         "text": "placement",
-        "color": "#660e7a",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -563,7 +551,6 @@
       },
       {
         "text": "'bottom-start'",
-        "color": "#008000",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -573,7 +560,6 @@
       },
       {
         "text": "isReferenceHidden",
-        "color": "#660e7a",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -583,7 +569,6 @@
       },
       {
         "text": "false",
-        "color": "#000080",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -632,79 +617,56 @@
     "type": "note-quote",
     "children": [
       {
-        "text": "jest.",
-        "color": "rgb(0, 0, 0)"
+        "text": "jest."
       },
       {
         "text": "mock",
-        "uui-richTextEditor-italic": true,
-        "color": "rgb(0, 0, 0)"
+        "uui-richTextEditor-italic": true
       },
       {
-        "text": "(",
-        "color": "rgb(0, 0, 0)"
+        "text": "("
       },
       {
         "text": "'react-focus-lock'",
-        "color": "rgb(0, 128, 0)",
         "uui-richTextEditor-bold": true
       },
       {
-        "text": ", () => ({\n    ...jest.",
-        "color": "rgb(0, 0, 0)"
+        "text": ", () => ({\n    ...jest."
       },
       {
         "text": "requireActual",
-        "uui-richTextEditor-italic": true,
-        "color": "rgb(0, 0, 0)"
+        "uui-richTextEditor-italic": true
       },
       {
-        "text": "(",
-        "color": "rgb(0, 0, 0)"
+        "text": "("
       },
       {
         "text": "'react-focus-lock'",
-        "color": "rgb(0, 128, 0)",
         "uui-richTextEditor-bold": true
       },
       {
-        "text": "),\n    ",
-        "color": "rgb(0, 0, 0)"
+        "text": "),\n    "
       },
       {
         "text": "__esModule",
-        "color": "rgb(102, 14, 122)",
         "uui-richTextEditor-bold": true
       },
       {
-        "text": ": ",
-        "color": "rgb(0, 0, 0)"
+        "text": ": "
       },
       {
         "text": "true",
-        "color": "rgb(0, 0, 128)",
         "uui-richTextEditor-bold": true
       },
       {
-        "text": ",\n   ",
-        "color": "rgb(0, 0, 0)"
+        "text": ",\n   "
       },
       {
         "text": "default",
-        "color": "rgb(122, 122, 67)",
         "uui-richTextEditor-bold": true
       },
       {
-        "text": ": ({ children }) => (<>{ children }</>),\n   ",
-        "color": "rgb(0, 0, 0)"
-      },
-      {
-        "text": "FreeFocusInside",
-        "color": "rgb(122, 122, 67)"
-      },
-      {
-        "text": ": ({ children }) => (<>{ children }</>),\n}));",
-        "color": "rgb(0, 0, 0)"
+        "text": ": ({ children }) => (<>{ children }</>),\n   FreeFocusInside: ({ children }) => (<>{ children }</>),\n}));"
       }
     ]
   },
@@ -727,7 +689,6 @@
     "children": [
       {
         "text": "import ",
-        "color": "#000080",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -754,15 +715,7 @@
         "text": "} "
       },
       {
-        "text": "from ",
-        "color": "#000080",
-        "font-weight": "bold",
-        "": null,
-        "uui-richTextEditor-span-mark": true
-      },
-      {
-        "text": "'@epam/uui-test-utils'",
-        "color": "#008000",
+        "text": "from '@epam/uui-test-utils'",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -772,7 +725,6 @@
       },
       {
         "text": "it",
-        "color": "#660e7a",
         "font-weight": "bold",
         "font-style": null,
         "": null,
@@ -783,7 +735,6 @@
       },
       {
         "text": "'should render with maximum props'",
-        "color": "#008000",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -793,7 +744,6 @@
       },
       {
         "text": "async ",
-        "color": "#000080",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -803,14 +753,12 @@
       },
       {
         "text": "const ",
-        "color": "#000080",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
       },
       {
         "text": "portalMock ",
-        "color": "#458383",
         "": null,
         "uui-richTextEditor-span-mark": true
       },
@@ -828,14 +776,12 @@
       },
       {
         "text": "const ",
-        "color": "#000080",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
       },
       {
         "text": "tree ",
-        "color": "#458383",
         "": null,
         "uui-richTextEditor-span-mark": true
       },
@@ -844,7 +790,6 @@
       },
       {
         "text": "await ",
-        "color": "#000080",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -866,7 +811,6 @@
       },
       {
         "text": "Test ",
-        "color": "#000080",
         "background-color": null,
         "font-weight": "bold",
         "": null,
@@ -883,7 +827,6 @@
       },
       {
         "text": "portalMock",
-        "color": "#458383",
         "": null,
         "uui-richTextEditor-span-mark": true
       },
@@ -892,7 +835,6 @@
       },
       {
         "text": "mockClear",
-        "color": "#660e7a",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -902,7 +844,6 @@
       },
       {
         "text": "expect",
-        "color": "#660e7a",
         "font-weight": "bold",
         "font-style": null,
         "": null,
@@ -913,7 +854,6 @@
       },
       {
         "text": "tree",
-        "color": "#458383",
         "": null,
         "uui-richTextEditor-span-mark": true
       },
@@ -922,7 +862,6 @@
       },
       {
         "text": "toMatchSnapshot",
-        "color": "#7a7a43",
         "": null,
         "uui-richTextEditor-span-mark": true
       },
@@ -956,7 +895,6 @@
     "children": [
       {
         "text": "import ",
-        "color": "#000080",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -983,15 +921,7 @@
         "text": "} "
       },
       {
-        "text": "from ",
-        "color": "#000080",
-        "font-weight": "bold",
-        "": null,
-        "uui-richTextEditor-span-mark": true
-      },
-      {
-        "text": "'@epam/uui-test-utils'",
-        "color": "#008000",
+        "text": "from '@epam/uui-test-utils'",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -1001,7 +931,6 @@
       },
       {
         "text": "it",
-        "color": "#660e7a",
         "font-weight": "bold",
         "font-style": null,
         "": null,
@@ -1012,7 +941,6 @@
       },
       {
         "text": "'should render with maximum props'",
-        "color": "#008000",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -1022,7 +950,6 @@
       },
       {
         "text": "async ",
-        "color": "#000080",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -1032,14 +959,12 @@
       },
       {
         "text": "const ",
-        "color": "#000080",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
       },
       {
         "text": "tree ",
-        "color": "#458383",
         "": null,
         "uui-richTextEditor-span-mark": true
       },
@@ -1048,7 +973,6 @@
       },
       {
         "text": "await ",
-        "color": "#000080",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -1069,24 +993,7 @@
         "uui-richTextEditor-span-mark": true
       },
       {
-        "text": "Test ",
-        "color": "#000080",
-        "background-color": null,
-        "font-weight": "bold",
-        "": null,
-        "uui-richTextEditor-span-mark": true
-      },
-      {
-        "text": "icon",
-        "color": "#0000ff",
-        "background-color": null,
-        "font-weight": "bold",
-        "": null,
-        "uui-richTextEditor-span-mark": true
-      },
-      {
-        "text": "=",
-        "color": "#008000",
+        "text": "Test icon=",
         "background-color": null,
         "font-weight": "bold",
         "": null,
@@ -1115,7 +1022,6 @@
       },
       {
         "text": "expect",
-        "color": "#660e7a",
         "font-weight": "bold",
         "font-style": null,
         "": null,
@@ -1126,7 +1032,6 @@
       },
       {
         "text": "tree",
-        "color": "#458383",
         "": null,
         "uui-richTextEditor-span-mark": true
       },
@@ -1135,7 +1040,6 @@
       },
       {
         "text": "toMatchSnapshot",
-        "color": "#7a7a43",
         "": null,
         "uui-richTextEditor-span-mark": true
       },
@@ -1210,8 +1114,7 @@
     "type": "paragraph",
     "children": [
       {
-        "text": "How to fix errors like this?",
-        "color": "rgb(31, 35, 40)",
+        "text": "How to fix errors like this? ",
         "font-family": null,
         "font-size": "16px",
         "font-style": null,
@@ -1236,33 +1139,6 @@
         "": null,
         "uui-richTextEditor-span-mark": true
       },
-      {
-        "text": " ",
-        "uui-richTextEditor-span-mark": true,
-        "color": "rgb(31, 35, 40)",
-        "font-family": null,
-        "font-size": "16px",
-        "font-style": null,
-        "font-variant-ligatures": "normal",
-        "font-variant-caps": "normal",
-        "font-weight": "400",
-        "letter-spacing": "normal",
-        "orphans": "2",
-        "text-align": "left",
-        "text-indent": "0px",
-        "text-transform": "none",
-        "white-space": "normal",
-        "widows": "2",
-        "word-spacing": "0px",
-        "-webkit-text-stroke-width": "0px",
-        "background-color": null,
-        "text-decoration-thickness": "initial",
-        "text-decoration-style": "initial",
-        "text-decoration-color": "initial",
-        "display": "inline !important",
-        "float": "none",
-        "": null
-      },
       {
         "text": "Warning: An update to inside a test was not wrapped in act",
         "uui-richTextEditor-code": true
@@ -1275,7 +1151,6 @@
     "children": [
       {
         "text": "Answer",
-        "color": "rgb(31, 35, 40)",
         "font-family": null,
         "font-size": "16px",
         "font-style": null,
@@ -1302,8 +1177,7 @@
         "uui-richTextEditor-underlined": true
       },
       {
-        "text": ": Please check next article:",
-        "color": "rgb(31, 35, 40)",
+        "text": ": Please check next article: ",
         "font-family": null,
         "font-size": "16px",
         "font-style": null,
@@ -1328,33 +1202,6 @@
         "": null,
         "uui-richTextEditor-span-mark": true
       },
-      {
-        "text": " ",
-        "uui-richTextEditor-span-mark": true,
-        "color": "rgb(31, 35, 40)",
-        "font-family": null,
-        "font-size": "16px",
-        "font-style": null,
-        "font-variant-ligatures": "normal",
-        "font-variant-caps": "normal",
-        "font-weight": "400",
-        "letter-spacing": "normal",
-        "orphans": "2",
-        "text-align": "left",
-        "text-indent": "0px",
-        "text-transform": "none",
-        "white-space": "normal",
-        "widows": "2",
-        "word-spacing": "0px",
-        "-webkit-text-stroke-width": "0px",
-        "background-color": null,
-        "text-decoration-thickness": "initial",
-        "text-decoration-style": "initial",
-        "text-decoration-color": "initial",
-        "display": "inline !important",
-        "float": "none",
-        "": null
-      },
       {
         "data": {
           "url": "https://davidwcai.medium.com/react-testing-library-and-the-not-wrapped-in-act-errors-491a5629193b"
@@ -1406,7 +1253,6 @@
       },
       {
         "text": "How do I test only part of the object/array?",
-        "color": "rgb(31, 35, 40)",
         "font-family": null,
         "font-size": "16px",
         "font-style": null,
@@ -1442,7 +1288,6 @@
       },
       {
         "text": "Answer",
-        "color": "rgb(31, 35, 40)",
         "font-family": null,
         "font-size": "16px",
         "font-style": null,
@@ -1469,35 +1314,7 @@
         "uui-richTextEditor-underlined": true
       },
       {
-        "text": ": ",
-        "color": "rgb(31, 35, 40)",
-        "font-family": null,
-        "font-size": "16px",
-        "font-style": null,
-        "font-variant-ligatures": "normal",
-        "font-variant-caps": "normal",
-        "font-weight": "400",
-        "letter-spacing": "normal",
-        "orphans": "2",
-        "text-align": "left",
-        "text-indent": "0px",
-        "text-transform": "none",
-        "white-space": "normal",
-        "widows": "2",
-        "word-spacing": "0px",
-        "-webkit-text-stroke-width": "0px",
-        "background-color": null,
-        "text-decoration-thickness": "initial",
-        "text-decoration-style": "initial",
-        "text-decoration-color": "initial",
-        "display": "inline !important",
-        "float": "none",
-        "": null,
-        "uui-richTextEditor-span-mark": true
-      },
-      {
-        "text": "Use partial matchers like ",
-        "color": "rgb(31, 35, 40)",
+        "text": ": Use partial matchers like ",
         "font-family": null,
         "font-size": "16px",
         "font-style": null,
@@ -1524,7 +1341,6 @@
       },
       {
         "text": "objectContaining",
-        "color": "rgb(31, 35, 40)",
         "font-family": null,
         "font-size": "16px",
         "font-style": null,
@@ -1552,7 +1368,6 @@
       },
       {
         "text": ", ",
-        "color": "rgb(31, 35, 40)",
         "font-family": null,
         "font-size": "16px",
         "font-style": null,
@@ -1579,7 +1394,6 @@
       },
       {
         "text": "arrayContaining",
-        "color": "rgb(31, 35, 40)",
         "font-family": null,
         "font-size": "16px",
         "font-style": null,
@@ -1606,35 +1420,7 @@
         "uui-richTextEditor-code": true
       },
       {
-        "text": ", etc. ",
-        "color": "rgb(31, 35, 40)",
-        "font-family": null,
-        "font-size": "16px",
-        "font-style": null,
-        "font-variant-ligatures": "normal",
-        "font-variant-caps": "normal",
-        "font-weight": "400",
-        "letter-spacing": "normal",
-        "orphans": "2",
-        "text-align": "left",
-        "text-indent": "0px",
-        "text-transform": "none",
-        "white-space": "normal",
-        "widows": "2",
-        "word-spacing": "0px",
-        "-webkit-text-stroke-width": "0px",
-        "background-color": null,
-        "text-decoration-thickness": "initial",
-        "text-decoration-style": "initial",
-        "text-decoration-color": "initial",
-        "display": "inline !important",
-        "float": "none",
-        "": null,
-        "uui-richTextEditor-span-mark": true
-      },
-      {
-        "text": "E.g.",
-        "color": "rgb(31, 35, 40)",
+        "text": ", etc. E.g.",
         "font-family": null,
         "font-size": "16px",
         "font-style": null,
@@ -1667,7 +1453,6 @@
     "children": [
       {
         "text": "expect",
-        "color": "#660e7a",
         "font-weight": "bold",
         "font-style": null,
         "": null,
@@ -1678,7 +1463,6 @@
       },
       {
         "text": "mocks",
-        "color": "#458383",
         "": null,
         "uui-richTextEditor-span-mark": true
       },
@@ -1687,7 +1471,6 @@
       },
       {
         "text": "setTableState",
-        "color": "#660e7a",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -1697,7 +1480,6 @@
       },
       {
         "text": "lastCalledWith",
-        "color": "#7a7a43",
         "": null,
         "uui-richTextEditor-span-mark": true
       },
@@ -1706,7 +1488,6 @@
       },
       {
         "text": "expect",
-        "color": "#660e7a",
         "font-weight": "bold",
         "font-style": null,
         "": null,
@@ -1717,7 +1498,6 @@
       },
       {
         "text": "objectContaining",
-        "color": "#7a7a43",
         "": null,
         "uui-richTextEditor-span-mark": true
       },
@@ -1726,7 +1506,6 @@
       },
       {
         "text": "filter",
-        "color": "#660e7a",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -1736,7 +1515,6 @@
       },
       {
         "text": "position",
-        "color": "#660e7a",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -1746,7 +1524,6 @@
       },
       {
         "text": "2",
-        "color": "#0000ff",
         "": null,
         "uui-richTextEditor-span-mark": true
       },
@@ -1755,7 +1532,6 @@
       },
       {
         "text": "3",
-        "color": "#0000ff",
         "": null,
         "uui-richTextEditor-span-mark": true
       },
@@ -1783,7 +1559,6 @@
       },
       {
         "text": " use DOM API (such as ",
-        "color": "rgb(31, 35, 40)",
         "font-family": null,
         "font-size": "16px",
         "font-style": null,
@@ -1810,7 +1585,6 @@
       },
       {
         "text": "querySelectorAll",
-        "color": "rgb(31, 35, 40)",
         "font-family": null,
         "font-size": "16px",
         "font-style": null,
@@ -1838,7 +1612,6 @@
       },
       {
         "text": ") for testing?",
-        "color": "rgb(31, 35, 40)",
         "font-family": null,
         "font-size": "16px",
         "font-style": null,
@@ -1871,7 +1644,6 @@
     "children": [
       {
         "text": "Answer",
-        "color": "rgb(31, 35, 40)",
         "font-family": null,
         "font-size": "16px",
         "font-style": null,
@@ -1899,7 +1671,6 @@
       },
       {
         "text": ": ",
-        "color": "rgb(31, 35, 40)",
         "font-family": null,
         "font-size": "16px",
         "font-style": null,
@@ -1954,8 +1725,7 @@
         "text": " "
       },
       {
-        "text": "How to  add",
-        "color": "rgb(31, 35, 40)",
+        "text": "How to  add ",
         "font-family": null,
         "font-size": "16px",
         "font-style": null,
@@ -1980,41 +1750,13 @@
         "": null,
         "uui-richTextEditor-span-mark": true
       },
-      {
-        "text": " ",
-        "uui-richTextEditor-span-mark": true,
-        "color": "rgb(31, 35, 40)",
-        "font-family": null,
-        "font-size": "16px",
-        "font-style": null,
-        "font-variant-ligatures": "normal",
-        "font-variant-caps": "normal",
-        "font-weight": "400",
-        "letter-spacing": "normal",
-        "orphans": "2",
-        "text-align": "left",
-        "text-indent": "0px",
-        "text-transform": "none",
-        "white-space": "normal",
-        "widows": "2",
-        "word-spacing": "0px",
-        "-webkit-text-stroke-width": "0px",
-        "background-color": null,
-        "text-decoration-thickness": "initial",
-        "text-decoration-style": "initial",
-        "text-decoration-color": "initial",
-        "display": "inline !important",
-        "float": "none",
-        "": null
-      },
       {
         "text": "data-testid",
         "uui-richTextEditor-code": true
       },
       {
-        "text": " ",
+        "text": " attribute to UUI component?",
         "uui-richTextEditor-span-mark": true,
-        "color": "rgb(31, 35, 40)",
         "font-family": null,
         "font-size": "16px",
         "font-style": null,
@@ -2037,33 +1779,6 @@
         "display": "inline !important",
         "float": "none",
         "": null
-      },
-      {
-        "text": "attribute to UUI component?",
-        "color": "rgb(31, 35, 40)",
-        "font-family": null,
-        "font-size": "16px",
-        "font-style": null,
-        "font-variant-ligatures": "normal",
-        "font-variant-caps": "normal",
-        "font-weight": "400",
-        "letter-spacing": "normal",
-        "orphans": "2",
-        "text-align": "left",
-        "text-indent": "0px",
-        "text-transform": "none",
-        "white-space": "normal",
-        "widows": "2",
-        "word-spacing": "0px",
-        "-webkit-text-stroke-width": "0px",
-        "background-color": null,
-        "text-decoration-thickness": "initial",
-        "text-decoration-style": "initial",
-        "text-decoration-color": "initial",
-        "display": "inline !important",
-        "float": "none",
-        "": null,
-        "uui-richTextEditor-span-mark": true
       }
     ]
   },
@@ -2076,7 +1791,6 @@
       },
       {
         "text": "Answer",
-        "color": "rgb(31, 35, 40)",
         "font-family": null,
         "font-size": "16px",
         "font-style": null,
@@ -2104,7 +1818,6 @@
       },
       {
         "text": ": ",
-        "color": "rgb(31, 35, 40)",
         "font-family": null,
         "font-size": "16px",
         "font-style": null,
@@ -2152,24 +1865,7 @@
         "uui-richTextEditor-span-mark": true
       },
       {
-        "text": "Test ",
-        "color": "#000080",
-        "background-color": null,
-        "font-weight": "bold",
-        "": null,
-        "uui-richTextEditor-span-mark": true
-      },
-      {
-        "text": "rawProps",
-        "color": "#0000ff",
-        "background-color": null,
-        "font-weight": "bold",
-        "": null,
-        "uui-richTextEditor-span-mark": true
-      },
-      {
-        "text": "=",
-        "color": "#008000",
+        "text": "Test rawProps=",
         "background-color": null,
         "font-weight": "bold",
         "": null,
@@ -2180,7 +1876,6 @@
       },
       {
         "text": "'data-testid'",
-        "color": "#008000",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
@@ -2190,7 +1885,6 @@
       },
       {
         "text": "'...' ",
-        "color": "#008000",
         "font-weight": "bold",
         "": null,
         "uui-richTextEditor-span-mark": true
diff --git a/public/docs/content/unitTestingGuide-3-tools.json b/public/docs/content/unitTestingGuide-3-tools.json
index 5645d48352..a19c725c1c 100644
--- a/public/docs/content/unitTestingGuide-3-tools.json
+++ b/public/docs/content/unitTestingGuide-3-tools.json
@@ -1054,13 +1054,14 @@
             "colSpan": 1,
             "rowSpan": 1
           }
-        ]
+        ],
+        "size": 100
       }
     ],
     "colSizes": [
-      174.59994506835938,
-      406.3999328613281,
-      354.2000732421875
+      171,
+      399,
+      358
     ]
   },
   {
diff --git a/public/docs/content/visualExamples-for-designers.json b/public/docs/content/visualExamples-for-designers.json
index c49d43badc..f6b69f2893 100644
--- a/public/docs/content/visualExamples-for-designers.json
+++ b/public/docs/content/visualExamples-for-designers.json
@@ -1,117 +1,89 @@
-{
-  "object": "value",
-  "document": {
-    "object": "document",
-    "data": {},
-    "nodes": [
+[
+  {
+    "data": {
+      "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/Cover.png",
+      "imageSize": {
+        "width": 934,
+        "height": 664.1777777777778
+      }
+    },
+    "type": "image",
+    "url": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/Cover.png",
+    "children": [
       {
-        "object": "block",
-        "type": "image",
-        "data": {
-          "src": "http://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/Images/Cover.png",
-          "imageSize": {
-            "width": 934,
-            "height": 664.1777777777778
-          }
-        },
-        "nodes": [
-          {
-            "object": "text",
-            "text": "",
-            "marks": []
-          }
-        ]
-      },
+        "text": ""
+      }
+    ],
+    "width": 934
+  },
+  {
+    "data": {},
+    "type": "paragraph",
+    "children": [
       {
-        "object": "block",
-        "type": "paragraph",
-        "data": {},
-        "nodes": [
-          {
-            "object": "text",
-            "text": "Here you can find examples of UUI4 design concepts:",
-            "marks": []
-          }
-        ]
-      },
+        "text": "Here you can find examples of UUI4 design concepts:"
+      }
+    ]
+  },
+  {
+    "data": {},
+    "type": "ordered-list",
+    "children": [
       {
-        "object": "block",
-        "type": "ordered-list",
         "data": {},
-        "nodes": [
+        "type": "list-item",
+        "children": [
           {
-            "object": "block",
-            "type": "list-item",
             "data": {},
-            "nodes": [
+            "type": "list-item-child",
+            "children": [
               {
-                "object": "block",
-                "type": "list-item-child",
-                "data": {},
-                "nodes": [
-                  {
-                    "object": "text",
-                    "text": "",
-                    "marks": []
-                  },
-                  {
-                    "object": "inline",
-                    "type": "link",
-                    "data": {
-                      "url": "https://display.lab.epam.com/share/dUTdjxio8"
-                    },
-                    "nodes": [
-                      {
-                        "object": "text",
-                        "text": "English Platform",
-                        "marks": []
-                      }
-                    ]
-                  },
+                "text": ""
+              },
+              {
+                "data": {
+                  "url": "https://display.lab.epam.com/share/dUTdjxio8"
+                },
+                "type": "link",
+                "url": "https://display.lab.epam.com/share/dUTdjxio8",
+                "children": [
                   {
-                    "object": "text",
-                    "text": "",
-                    "marks": []
+                    "text": "English Platform"
                   }
                 ]
+              },
+              {
+                "text": ""
               }
             ]
-          },
+          }
+        ]
+      },
+      {
+        "data": {},
+        "type": "list-item",
+        "children": [
           {
-            "object": "block",
-            "type": "list-item",
             "data": {},
-            "nodes": [
+            "type": "list-item-child",
+            "children": [
               {
-                "object": "block",
-                "type": "list-item-child",
-                "data": {},
-                "nodes": [
-                  {
-                    "object": "text",
-                    "text": "",
-                    "marks": []
-                  },
-                  {
-                    "object": "inline",
-                    "type": "link",
-                    "data": {
-                      "url": "https://display.lab.epam.com/share/5z7q_Slks"
-                    },
-                    "nodes": [
-                      {
-                        "object": "text",
-                        "text": "EPAM Plus",
-                        "marks": []
-                      }
-                    ]
-                  },
+                "text": ""
+              },
+              {
+                "data": {
+                  "url": "https://display.lab.epam.com/share/5z7q_Slks"
+                },
+                "type": "link",
+                "url": "https://display.lab.epam.com/share/5z7q_Slks",
+                "children": [
                   {
-                    "object": "text",
-                    "text": "",
-                    "marks": []
+                    "text": "EPAM Plus"
                   }
                 ]
+              },
+              {
+                "text": ""
               }
             ]
           }
@@ -119,4 +91,4 @@
       }
     ]
   }
-}
\ No newline at end of file
+]
\ No newline at end of file
diff --git a/public/docs/docsGenOutput/docsGenOutput.json b/public/docs/docsGenOutput/docsGenOutput.json
index 6529a81943..f7f1f5508f 100644
--- a/public/docs/docsGenOutput/docsGenOutput.json
+++ b/public/docs/docsGenOutput/docsGenOutput.json
@@ -446,10 +446,10 @@
       "name": "errorHandling",
       "comment": {
        "raw": [
-        "Defines how to handle request errors:",
-        " 'page' - displays an error splash screen.",
-        " 'notification' - shows the error using a notification card without blocking the application.",
-        " 'manual' - means the API context won't handle the error; you should manage it yourself."
+        "/** Defines how to handle request errors:\r",
+        "     * 'page' - displays an error splash screen.\r",
+        "     * 'notification' - shows the error using a notification card without blocking the application.\r",
+        "     * 'manual' - means the API context won't handle the error; you should manage it yourself."
        ]
       },
       "typeValue": {
@@ -507,9 +507,9 @@
       "name": "apiReloginPath",
       "comment": {
        "raw": [
-        "Url to the relogin page. Used to open new browser window by this path, in case of auth lost error.",
-        " Opened by this path page, should process authentication and then post 'authSuccess' cross-window message to the opener, to recover failed requests.",
-        " @default '/auth/login'"
+        "/** Url to the relogin page. Used to open new browser window by this path, in case of auth lost error.\r",
+        "     * Opened by this path page, should process authentication and then post 'authSuccess' cross-window message to the opener, to recover failed requests.\r",
+        "     * @default '/auth/login'"
        ],
        "tags": {
         "@default": "/auth/login"
@@ -528,8 +528,8 @@
       "name": "apiPingPath",
       "comment": {
        "raw": [
-        "Url to the api, which ApiContext will start pinging in case of 'connection lost', until it gets 200 status. Then it will retry failed requests.",
-        " @default '/auth/ping'"
+        "/** Url to the api, which ApiContext will start pinging in case of 'connection lost', until it gets 200 status. Then it will retry failed requests.\r",
+        "     * @default '/auth/ping'"
        ],
        "tags": {
         "@default": "/auth/ping"
@@ -548,8 +548,8 @@
       "name": "apiServerUrl",
       "comment": {
        "raw": [
-        "Url to the server api under which all requests will be processed. Usefully for cases, when all api located by some specific url, which is not much app url.",
-        " @default ''"
+        "/** Url to the server api under which all requests will be processed. Usefully for cases, when all api located by some specific url, which is not much app url.\r",
+        "     * @default ''"
        ],
        "tags": {
         "@default": ""
@@ -832,7 +832,7 @@
       "name": "getSearchFields",
       "comment": {
        "raw": [
-        "A pure function that gets search value for each item.",
+        "/** A pure function that gets search value for each item.\r",
         "     Default: (item) => item.name."
        ]
       },
@@ -867,8 +867,8 @@
       "name": "getFilter",
       "comment": {
        "raw": [
-        "A pure function that returns filter callback to be applied for each item.",
-        " The callback should return true, if item passed the filter."
+        "/** A pure function that returns filter callback to be applied for each item.\r",
+        "     * The callback should return true, if item passed the filter."
        ]
       },
       "typeValue": {
@@ -885,20 +885,21 @@
       "name": "sortSearchByRelevance",
       "comment": {
        "raw": [
-        "Enables sorting of search results by relevance.",
-        " - The highest priority has records, which have a full match with a search keyword.",
-        " - The lower one has records, which have a search keyword at the 0 position, but not the full match.",
-        " - Then, records, which contain a search keyword as a separate word, but not at the beginning.",
-        " - And the lowest one - any other match of the search keyword.",
-        "",
-        " Example:",
-        " - `search`: 'some'",
-        " - `record string`: 'some word', `rank` = 4",
-        " - `record string`: 'someone', `rank` = 3",
-        " - `record string`: 'I know some guy', `rank` = 2",
-        " - `record string`: 'awesome', `rank` = 1",
-        "",
-        " @default true"
+        "/**\r",
+        "     * Enables sorting of search results by relevance.\r",
+        "     * - The highest priority has records, which have a full match with a search keyword.\r",
+        "     * - The lower one has records, which have a search keyword at the 0 position, but not the full match.\r",
+        "     * - Then, records, which contain a search keyword as a separate word, but not at the beginning.\r",
+        "     * - And the lowest one - any other match of the search keyword.\r",
+        "     *\r",
+        "     * Example:\r",
+        "     * - `search`: 'some'\r",
+        "     * - `record string`: 'some word', `rank` = 4\r",
+        "     * - `record string`: 'someone', `rank` = 3\r",
+        "     * - `record string`: 'I know some guy', `rank` = 2\r",
+        "     * - `record string`: 'awesome', `rank` = 1\r",
+        "     *\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -918,9 +919,10 @@
       "name": "getId",
       "comment": {
        "raw": [
-        "Should return unique ID of the TItem",
-        " If omitted, we assume that every TItem has and unique id in its 'id' field.",
-        " @param item An item to get ID of"
+        "/**\r",
+        "     * Should return unique ID of the TItem\r",
+        "     * If omitted, we assume that every TItem has and unique id in its 'id' field.\r",
+        "     * @param item An item to get ID of"
        ]
       },
       "typeValue": {
@@ -937,8 +939,9 @@
       "name": "complexIds",
       "comment": {
        "raw": [
-        "Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).",
-        " In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys."
+        "/**\r",
+        "     * Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).\r",
+        "     * In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys."
        ]
       },
       "typeValue": {
@@ -955,14 +958,14 @@
       "name": "getParentId",
       "comment": {
        "raw": [
-        "Should return ID of the Item's parent. Usually it's i => i.parentId.",
-        " If specified, Data Source will build items hierarchy.",
-        "",
-        " Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:",
-        " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain",
-        "   to highlight parents with selected children",
-        " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),",
-        "   We need to load parents with a separate call (if backend doesn't pre-fetch them)"
+        "/** Should return ID of the Item's parent. Usually it's i => i.parentId.\r",
+        "     * If specified, Data Source will build items hierarchy.\r",
+        "     *\r",
+        "     * Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:\r",
+        "     * - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain\r",
+        "     *   to highlight parents with selected children\r",
+        "     * - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),\r",
+        "     *   We need to load parents with a separate call (if backend doesn't pre-fetch them)"
        ]
       },
       "typeValue": {
@@ -979,12 +982,13 @@
       "name": "rowOptions",
       "comment": {
        "raw": [
-        "Specifies if rows are selectable, checkable, draggable, clickable, and more.",
-        " See DataRowOptions for more details.",
-        " If options depends on the item itself, use getRowOptions.",
-        " Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.",
-        " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance",
-        " @param item An item to get options for"
+        "/**\r",
+        "     * Specifies if rows are selectable, checkable, draggable, clickable, and more.\r",
+        "     * See DataRowOptions for more details.\r",
+        "     * If options depends on the item itself, use getRowOptions.\r",
+        "     * Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.\r",
+        "     * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance\r",
+        "     * @param item An item to get options for"
        ]
       },
       "typeValue": {
@@ -998,12 +1002,13 @@
       "name": "getRowOptions",
       "comment": {
        "raw": [
-        "For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.",
-        " To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.",
-        " See DataRowOptions for more details.",
-        " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.",
-        " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance",
-        " @param item An item to get options for"
+        "/**\r",
+        "     * For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.\r",
+        "     * To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.\r",
+        "     * See DataRowOptions for more details.\r",
+        "     * If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.\r",
+        "     * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance\r",
+        "     * @param item An item to get options for"
        ]
       },
       "typeValue": {
@@ -1020,8 +1025,9 @@
       "name": "isFoldedByDefault",
       "comment": {
        "raw": [
-        "Can be specified to unfold all or some items at start.",
-        " If not specified, all rows would be folded."
+        "/**\r",
+        "     * Can be specified to unfold all or some items at start.\r",
+        "     * If not specified, all rows would be folded."
        ]
       },
       "typeValue": {
@@ -1038,14 +1044,15 @@
       "name": "cascadeSelection",
       "comment": {
        "raw": [
-        "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.",
-        " - false: All nodes are selected independently (default).",
-        " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.",
-        " - 'implicit': Selecting a parent node means that all children are considered checked.",
-        "   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked",
-        "   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,",
-        "   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last",
-        "   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
+        "/**\r",
+        "     * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.\r",
+        "     * - false: All nodes are selected independently (default).\r",
+        "     * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.\r",
+        "     * - 'implicit': Selecting a parent node means that all children are considered checked.\r",
+        "     *   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked\r",
+        "     *   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,\r",
+        "     *   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last\r",
+        "     *   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
        ]
       },
       "typeValue": {
@@ -1068,7 +1075,8 @@
       "name": "selectAll",
       "comment": {
        "raw": [
-        "Enables or disables \"select all\" checkbox. Default is true."
+        "/**\r",
+        "     * Enables or disables \"select all\" checkbox. Default is true."
        ]
       },
       "typeValue": {
@@ -1085,11 +1093,12 @@
       "name": "backgroundReload",
       "comment": {
        "raw": [
-        "Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.",
-        " During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.",
-        " In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.",
-        " It is required to add blockers/spinners to the components, built on your own.",
-        " If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`."
+        "/**\r",
+        "     * Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.\r",
+        "     * During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.\r",
+        "     * In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.\r",
+        "     * It is required to add blockers/spinners to the components, built on your own.\r",
+        "     * If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`."
        ]
       },
       "typeValue": {
@@ -1165,7 +1174,7 @@
       "name": "getSearchFields",
       "comment": {
        "raw": [
-        "A pure function that gets search value for each item.",
+        "/** A pure function that gets search value for each item.\r",
         "     Default: (item) => item.name."
        ]
       },
@@ -1200,8 +1209,8 @@
       "name": "getFilter",
       "comment": {
        "raw": [
-        "A pure function that returns filter callback to be applied for each item.",
-        " The callback should return true, if item passed the filter."
+        "/** A pure function that returns filter callback to be applied for each item.\r",
+        "     * The callback should return true, if item passed the filter."
        ]
       },
       "typeValue": {
@@ -1218,20 +1227,21 @@
       "name": "sortSearchByRelevance",
       "comment": {
        "raw": [
-        "Enables sorting of search results by relevance.",
-        " - The highest priority has records, which have a full match with a search keyword.",
-        " - The lower one has records, which have a search keyword at the 0 position, but not the full match.",
-        " - Then, records, which contain a search keyword as a separate word, but not at the beginning.",
-        " - And the lowest one - any other match of the search keyword.",
-        "",
-        " Example:",
-        " - `search`: 'some'",
-        " - `record string`: 'some word', `rank` = 4",
-        " - `record string`: 'someone', `rank` = 3",
-        " - `record string`: 'I know some guy', `rank` = 2",
-        " - `record string`: 'awesome', `rank` = 1",
-        "",
-        " @default true"
+        "/**\r",
+        "     * Enables sorting of search results by relevance.\r",
+        "     * - The highest priority has records, which have a full match with a search keyword.\r",
+        "     * - The lower one has records, which have a search keyword at the 0 position, but not the full match.\r",
+        "     * - Then, records, which contain a search keyword as a separate word, but not at the beginning.\r",
+        "     * - And the lowest one - any other match of the search keyword.\r",
+        "     *\r",
+        "     * Example:\r",
+        "     * - `search`: 'some'\r",
+        "     * - `record string`: 'some word', `rank` = 4\r",
+        "     * - `record string`: 'someone', `rank` = 3\r",
+        "     * - `record string`: 'I know some guy', `rank` = 2\r",
+        "     * - `record string`: 'awesome', `rank` = 1\r",
+        "     *\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -1251,9 +1261,10 @@
       "name": "getId",
       "comment": {
        "raw": [
-        "Should return unique ID of the TItem",
-        " If omitted, we assume that every TItem has and unique id in its 'id' field.",
-        " @param item An item to get ID of"
+        "/**\r",
+        "     * Should return unique ID of the TItem\r",
+        "     * If omitted, we assume that every TItem has and unique id in its 'id' field.\r",
+        "     * @param item An item to get ID of"
        ]
       },
       "typeValue": {
@@ -1270,8 +1281,9 @@
       "name": "complexIds",
       "comment": {
        "raw": [
-        "Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).",
-        " In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys."
+        "/**\r",
+        "     * Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).\r",
+        "     * In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys."
        ]
       },
       "typeValue": {
@@ -1288,14 +1300,14 @@
       "name": "getParentId",
       "comment": {
        "raw": [
-        "Should return ID of the Item's parent. Usually it's i => i.parentId.",
-        " If specified, Data Source will build items hierarchy.",
-        "",
-        " Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:",
-        " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain",
-        "   to highlight parents with selected children",
-        " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),",
-        "   We need to load parents with a separate call (if backend doesn't pre-fetch them)"
+        "/** Should return ID of the Item's parent. Usually it's i => i.parentId.\r",
+        "     * If specified, Data Source will build items hierarchy.\r",
+        "     *\r",
+        "     * Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:\r",
+        "     * - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain\r",
+        "     *   to highlight parents with selected children\r",
+        "     * - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),\r",
+        "     *   We need to load parents with a separate call (if backend doesn't pre-fetch them)"
        ]
       },
       "typeValue": {
@@ -1312,12 +1324,13 @@
       "name": "rowOptions",
       "comment": {
        "raw": [
-        "Specifies if rows are selectable, checkable, draggable, clickable, and more.",
-        " See DataRowOptions for more details.",
-        " If options depends on the item itself, use getRowOptions.",
-        " Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.",
-        " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance",
-        " @param item An item to get options for"
+        "/**\r",
+        "     * Specifies if rows are selectable, checkable, draggable, clickable, and more.\r",
+        "     * See DataRowOptions for more details.\r",
+        "     * If options depends on the item itself, use getRowOptions.\r",
+        "     * Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.\r",
+        "     * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance\r",
+        "     * @param item An item to get options for"
        ]
       },
       "typeValue": {
@@ -1331,12 +1344,13 @@
       "name": "getRowOptions",
       "comment": {
        "raw": [
-        "For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.",
-        " To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.",
-        " See DataRowOptions for more details.",
-        " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.",
-        " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance",
-        " @param item An item to get options for"
+        "/**\r",
+        "     * For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.\r",
+        "     * To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.\r",
+        "     * See DataRowOptions for more details.\r",
+        "     * If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.\r",
+        "     * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance\r",
+        "     * @param item An item to get options for"
        ]
       },
       "typeValue": {
@@ -1353,8 +1367,9 @@
       "name": "isFoldedByDefault",
       "comment": {
        "raw": [
-        "Can be specified to unfold all or some items at start.",
-        " If not specified, all rows would be folded."
+        "/**\r",
+        "     * Can be specified to unfold all or some items at start.\r",
+        "     * If not specified, all rows would be folded."
        ]
       },
       "typeValue": {
@@ -1371,14 +1386,15 @@
       "name": "cascadeSelection",
       "comment": {
        "raw": [
-        "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.",
-        " - false: All nodes are selected independently (default).",
-        " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.",
-        " - 'implicit': Selecting a parent node means that all children are considered checked.",
-        "   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked",
-        "   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,",
-        "   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last",
-        "   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
+        "/**\r",
+        "     * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.\r",
+        "     * - false: All nodes are selected independently (default).\r",
+        "     * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.\r",
+        "     * - 'implicit': Selecting a parent node means that all children are considered checked.\r",
+        "     *   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked\r",
+        "     *   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,\r",
+        "     *   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last\r",
+        "     *   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
        ]
       },
       "typeValue": {
@@ -1401,7 +1417,8 @@
       "name": "selectAll",
       "comment": {
        "raw": [
-        "Enables or disables \"select all\" checkbox. Default is true."
+        "/**\r",
+        "     * Enables or disables \"select all\" checkbox. Default is true."
        ]
       },
       "typeValue": {
@@ -1418,11 +1435,12 @@
       "name": "backgroundReload",
       "comment": {
        "raw": [
-        "Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.",
-        " During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.",
-        " In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.",
-        " It is required to add blockers/spinners to the components, built on your own.",
-        " If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`."
+        "/**\r",
+        "     * Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.\r",
+        "     * During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.\r",
+        "     * In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.\r",
+        "     * It is required to add blockers/spinners to the components, built on your own.\r",
+        "     * If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`."
        ]
       },
       "typeValue": {
@@ -1518,7 +1536,7 @@
       "name": "emptyValue",
       "comment": {
        "raw": [
-        "Defines what to use as an empty value. If other value provided, it will be assumed as selection."
+        "/** Defines what to use as an empty value. If other value provided, it will be assumed as selection."
        ]
       },
       "typeValue": {
@@ -1733,10 +1751,10 @@
       "name": "api",
       "comment": {
        "raw": [
-        "A function to retrieve the data, asynchronously. This function usually performs a REST API call.",
-        " Should return the array of items, which will be processed by dataSource.",
-        " This api called only once during the initialization and assumed to return the full amount of data.",
-        " For lazy loading cases, use LazyDataSource"
+        "/** A function to retrieve the data, asynchronously. This function usually performs a REST API call.\r",
+        "     * Should return the array of items, which will be processed by dataSource.\r",
+        "     * This api called only once during the initialization and assumed to return the full amount of data.\r",
+        "     * For lazy loading cases, use LazyDataSource"
        ]
       },
       "typeValue": {
@@ -1753,7 +1771,7 @@
       "name": "getSearchFields",
       "comment": {
        "raw": [
-        "A pure function that gets search value for each item.",
+        "/** A pure function that gets search value for each item.\r",
         "     Default: (item) => item.name."
        ]
       },
@@ -1788,8 +1806,8 @@
       "name": "getFilter",
       "comment": {
        "raw": [
-        "A pure function that returns filter callback to be applied for each item.",
-        " The callback should return true, if item passed the filter."
+        "/** A pure function that returns filter callback to be applied for each item.\r",
+        "     * The callback should return true, if item passed the filter."
        ]
       },
       "typeValue": {
@@ -1806,20 +1824,21 @@
       "name": "sortSearchByRelevance",
       "comment": {
        "raw": [
-        "Enables sorting of search results by relevance.",
-        " - The highest priority has records, which have a full match with a search keyword.",
-        " - The lower one has records, which have a search keyword at the 0 position, but not the full match.",
-        " - Then, records, which contain a search keyword as a separate word, but not at the beginning.",
-        " - And the lowest one - any other match of the search keyword.",
-        "",
-        " Example:",
-        " - `search`: 'some'",
-        " - `record string`: 'some word', `rank` = 4",
-        " - `record string`: 'someone', `rank` = 3",
-        " - `record string`: 'I know some guy', `rank` = 2",
-        " - `record string`: 'awesome', `rank` = 1",
-        "",
-        " @default true"
+        "/**\r",
+        "     * Enables sorting of search results by relevance.\r",
+        "     * - The highest priority has records, which have a full match with a search keyword.\r",
+        "     * - The lower one has records, which have a search keyword at the 0 position, but not the full match.\r",
+        "     * - Then, records, which contain a search keyword as a separate word, but not at the beginning.\r",
+        "     * - And the lowest one - any other match of the search keyword.\r",
+        "     *\r",
+        "     * Example:\r",
+        "     * - `search`: 'some'\r",
+        "     * - `record string`: 'some word', `rank` = 4\r",
+        "     * - `record string`: 'someone', `rank` = 3\r",
+        "     * - `record string`: 'I know some guy', `rank` = 2\r",
+        "     * - `record string`: 'awesome', `rank` = 1\r",
+        "     *\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -1839,9 +1858,10 @@
       "name": "getId",
       "comment": {
        "raw": [
-        "Should return unique ID of the TItem",
-        " If omitted, we assume that every TItem has and unique id in its 'id' field.",
-        " @param item An item to get ID of"
+        "/**\r",
+        "     * Should return unique ID of the TItem\r",
+        "     * If omitted, we assume that every TItem has and unique id in its 'id' field.\r",
+        "     * @param item An item to get ID of"
        ]
       },
       "typeValue": {
@@ -1858,8 +1878,9 @@
       "name": "complexIds",
       "comment": {
        "raw": [
-        "Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).",
-        " In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys."
+        "/**\r",
+        "     * Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).\r",
+        "     * In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys."
        ]
       },
       "typeValue": {
@@ -1876,14 +1897,14 @@
       "name": "getParentId",
       "comment": {
        "raw": [
-        "Should return ID of the Item's parent. Usually it's i => i.parentId.",
-        " If specified, Data Source will build items hierarchy.",
-        "",
-        " Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:",
-        " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain",
-        "   to highlight parents with selected children",
-        " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),",
-        "   We need to load parents with a separate call (if backend doesn't pre-fetch them)"
+        "/** Should return ID of the Item's parent. Usually it's i => i.parentId.\r",
+        "     * If specified, Data Source will build items hierarchy.\r",
+        "     *\r",
+        "     * Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:\r",
+        "     * - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain\r",
+        "     *   to highlight parents with selected children\r",
+        "     * - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),\r",
+        "     *   We need to load parents with a separate call (if backend doesn't pre-fetch them)"
        ]
       },
       "typeValue": {
@@ -1900,12 +1921,13 @@
       "name": "rowOptions",
       "comment": {
        "raw": [
-        "Specifies if rows are selectable, checkable, draggable, clickable, and more.",
-        " See DataRowOptions for more details.",
-        " If options depends on the item itself, use getRowOptions.",
-        " Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.",
-        " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance",
-        " @param item An item to get options for"
+        "/**\r",
+        "     * Specifies if rows are selectable, checkable, draggable, clickable, and more.\r",
+        "     * See DataRowOptions for more details.\r",
+        "     * If options depends on the item itself, use getRowOptions.\r",
+        "     * Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.\r",
+        "     * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance\r",
+        "     * @param item An item to get options for"
        ]
       },
       "typeValue": {
@@ -1919,12 +1941,13 @@
       "name": "getRowOptions",
       "comment": {
        "raw": [
-        "For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.",
-        " To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.",
-        " See DataRowOptions for more details.",
-        " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.",
-        " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance",
-        " @param item An item to get options for"
+        "/**\r",
+        "     * For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.\r",
+        "     * To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.\r",
+        "     * See DataRowOptions for more details.\r",
+        "     * If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.\r",
+        "     * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance\r",
+        "     * @param item An item to get options for"
        ]
       },
       "typeValue": {
@@ -1941,8 +1964,9 @@
       "name": "isFoldedByDefault",
       "comment": {
        "raw": [
-        "Can be specified to unfold all or some items at start.",
-        " If not specified, all rows would be folded."
+        "/**\r",
+        "     * Can be specified to unfold all or some items at start.\r",
+        "     * If not specified, all rows would be folded."
        ]
       },
       "typeValue": {
@@ -1959,14 +1983,15 @@
       "name": "cascadeSelection",
       "comment": {
        "raw": [
-        "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.",
-        " - false: All nodes are selected independently (default).",
-        " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.",
-        " - 'implicit': Selecting a parent node means that all children are considered checked.",
-        "   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked",
-        "   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,",
-        "   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last",
-        "   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
+        "/**\r",
+        "     * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.\r",
+        "     * - false: All nodes are selected independently (default).\r",
+        "     * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.\r",
+        "     * - 'implicit': Selecting a parent node means that all children are considered checked.\r",
+        "     *   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked\r",
+        "     *   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,\r",
+        "     *   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last\r",
+        "     *   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
        ]
       },
       "typeValue": {
@@ -1989,7 +2014,8 @@
       "name": "selectAll",
       "comment": {
        "raw": [
-        "Enables or disables \"select all\" checkbox. Default is true."
+        "/**\r",
+        "     * Enables or disables \"select all\" checkbox. Default is true."
        ]
       },
       "typeValue": {
@@ -2006,11 +2032,12 @@
       "name": "backgroundReload",
       "comment": {
        "raw": [
-        "Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.",
-        " During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.",
-        " In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.",
-        " It is required to add blockers/spinners to the components, built on your own.",
-        " If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`."
+        "/**\r",
+        "     * Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.\r",
+        "     * During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.\r",
+        "     * In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.\r",
+        "     * It is required to add blockers/spinners to the components, built on your own.\r",
+        "     * If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`."
        ]
       },
       "typeValue": {
@@ -2057,10 +2084,10 @@
       "name": "api",
       "comment": {
        "raw": [
-        "A function to retrieve the data, asynchronously. This function usually performs a REST API call.",
-        " Should return the array of items, which will be processed by dataSource.",
-        " This api called only once during the initialization and assumed to return the full amount of data.",
-        " For lazy loading cases, use LazyDataSource"
+        "/** A function to retrieve the data, asynchronously. This function usually performs a REST API call.\r",
+        "     * Should return the array of items, which will be processed by dataSource.\r",
+        "     * This api called only once during the initialization and assumed to return the full amount of data.\r",
+        "     * For lazy loading cases, use LazyDataSource"
        ]
       },
       "typeValue": {
@@ -2076,7 +2103,7 @@
       "name": "getSearchFields",
       "comment": {
        "raw": [
-        "A pure function that gets search value for each item.",
+        "/** A pure function that gets search value for each item.\r",
         "     Default: (item) => item.name."
        ]
       },
@@ -2111,8 +2138,8 @@
       "name": "getFilter",
       "comment": {
        "raw": [
-        "A pure function that returns filter callback to be applied for each item.",
-        " The callback should return true, if item passed the filter."
+        "/** A pure function that returns filter callback to be applied for each item.\r",
+        "     * The callback should return true, if item passed the filter."
        ]
       },
       "typeValue": {
@@ -2129,20 +2156,21 @@
       "name": "sortSearchByRelevance",
       "comment": {
        "raw": [
-        "Enables sorting of search results by relevance.",
-        " - The highest priority has records, which have a full match with a search keyword.",
-        " - The lower one has records, which have a search keyword at the 0 position, but not the full match.",
-        " - Then, records, which contain a search keyword as a separate word, but not at the beginning.",
-        " - And the lowest one - any other match of the search keyword.",
-        "",
-        " Example:",
-        " - `search`: 'some'",
-        " - `record string`: 'some word', `rank` = 4",
-        " - `record string`: 'someone', `rank` = 3",
-        " - `record string`: 'I know some guy', `rank` = 2",
-        " - `record string`: 'awesome', `rank` = 1",
-        "",
-        " @default true"
+        "/**\r",
+        "     * Enables sorting of search results by relevance.\r",
+        "     * - The highest priority has records, which have a full match with a search keyword.\r",
+        "     * - The lower one has records, which have a search keyword at the 0 position, but not the full match.\r",
+        "     * - Then, records, which contain a search keyword as a separate word, but not at the beginning.\r",
+        "     * - And the lowest one - any other match of the search keyword.\r",
+        "     *\r",
+        "     * Example:\r",
+        "     * - `search`: 'some'\r",
+        "     * - `record string`: 'some word', `rank` = 4\r",
+        "     * - `record string`: 'someone', `rank` = 3\r",
+        "     * - `record string`: 'I know some guy', `rank` = 2\r",
+        "     * - `record string`: 'awesome', `rank` = 1\r",
+        "     *\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -2162,9 +2190,10 @@
       "name": "getId",
       "comment": {
        "raw": [
-        "Should return unique ID of the TItem",
-        " If omitted, we assume that every TItem has and unique id in its 'id' field.",
-        " @param item An item to get ID of"
+        "/**\r",
+        "     * Should return unique ID of the TItem\r",
+        "     * If omitted, we assume that every TItem has and unique id in its 'id' field.\r",
+        "     * @param item An item to get ID of"
        ]
       },
       "typeValue": {
@@ -2181,8 +2210,9 @@
       "name": "complexIds",
       "comment": {
        "raw": [
-        "Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).",
-        " In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys."
+        "/**\r",
+        "     * Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).\r",
+        "     * In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys."
        ]
       },
       "typeValue": {
@@ -2199,14 +2229,14 @@
       "name": "getParentId",
       "comment": {
        "raw": [
-        "Should return ID of the Item's parent. Usually it's i => i.parentId.",
-        " If specified, Data Source will build items hierarchy.",
-        "",
-        " Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:",
-        " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain",
-        "   to highlight parents with selected children",
-        " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),",
-        "   We need to load parents with a separate call (if backend doesn't pre-fetch them)"
+        "/** Should return ID of the Item's parent. Usually it's i => i.parentId.\r",
+        "     * If specified, Data Source will build items hierarchy.\r",
+        "     *\r",
+        "     * Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:\r",
+        "     * - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain\r",
+        "     *   to highlight parents with selected children\r",
+        "     * - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),\r",
+        "     *   We need to load parents with a separate call (if backend doesn't pre-fetch them)"
        ]
       },
       "typeValue": {
@@ -2223,12 +2253,13 @@
       "name": "rowOptions",
       "comment": {
        "raw": [
-        "Specifies if rows are selectable, checkable, draggable, clickable, and more.",
-        " See DataRowOptions for more details.",
-        " If options depends on the item itself, use getRowOptions.",
-        " Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.",
-        " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance",
-        " @param item An item to get options for"
+        "/**\r",
+        "     * Specifies if rows are selectable, checkable, draggable, clickable, and more.\r",
+        "     * See DataRowOptions for more details.\r",
+        "     * If options depends on the item itself, use getRowOptions.\r",
+        "     * Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.\r",
+        "     * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance\r",
+        "     * @param item An item to get options for"
        ]
       },
       "typeValue": {
@@ -2242,12 +2273,13 @@
       "name": "getRowOptions",
       "comment": {
        "raw": [
-        "For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.",
-        " To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.",
-        " See DataRowOptions for more details.",
-        " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.",
-        " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance",
-        " @param item An item to get options for"
+        "/**\r",
+        "     * For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.\r",
+        "     * To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.\r",
+        "     * See DataRowOptions for more details.\r",
+        "     * If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.\r",
+        "     * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance\r",
+        "     * @param item An item to get options for"
        ]
       },
       "typeValue": {
@@ -2264,8 +2296,9 @@
       "name": "isFoldedByDefault",
       "comment": {
        "raw": [
-        "Can be specified to unfold all or some items at start.",
-        " If not specified, all rows would be folded."
+        "/**\r",
+        "     * Can be specified to unfold all or some items at start.\r",
+        "     * If not specified, all rows would be folded."
        ]
       },
       "typeValue": {
@@ -2282,14 +2315,15 @@
       "name": "cascadeSelection",
       "comment": {
        "raw": [
-        "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.",
-        " - false: All nodes are selected independently (default).",
-        " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.",
-        " - 'implicit': Selecting a parent node means that all children are considered checked.",
-        "   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked",
-        "   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,",
-        "   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last",
-        "   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
+        "/**\r",
+        "     * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.\r",
+        "     * - false: All nodes are selected independently (default).\r",
+        "     * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.\r",
+        "     * - 'implicit': Selecting a parent node means that all children are considered checked.\r",
+        "     *   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked\r",
+        "     *   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,\r",
+        "     *   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last\r",
+        "     *   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
        ]
       },
       "typeValue": {
@@ -2312,7 +2346,8 @@
       "name": "selectAll",
       "comment": {
        "raw": [
-        "Enables or disables \"select all\" checkbox. Default is true."
+        "/**\r",
+        "     * Enables or disables \"select all\" checkbox. Default is true."
        ]
       },
       "typeValue": {
@@ -2329,11 +2364,12 @@
       "name": "backgroundReload",
       "comment": {
        "raw": [
-        "Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.",
-        " During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.",
-        " In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.",
-        " It is required to add blockers/spinners to the components, built on your own.",
-        " If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`."
+        "/**\r",
+        "     * Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.\r",
+        "     * During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.\r",
+        "     * In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.\r",
+        "     * It is required to add blockers/spinners to the components, built on your own.\r",
+        "     * If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`."
        ]
       },
       "typeValue": {
@@ -2401,7 +2437,7 @@
       "name": "getSearchFields",
       "comment": {
        "raw": [
-        "A pure function that gets search value for each item.",
+        "/** A pure function that gets search value for each item.\r",
         "     Default: (item) => item.name."
        ]
       },
@@ -2434,8 +2470,8 @@
       "name": "getFilter",
       "comment": {
        "raw": [
-        "A pure function that returns filter callback to be applied for each item.",
-        " The callback should return true, if item passed the filter."
+        "/** A pure function that returns filter callback to be applied for each item.\r",
+        "     * The callback should return true, if item passed the filter."
        ]
       },
       "typeValue": {
@@ -2451,20 +2487,21 @@
       "name": "sortSearchByRelevance",
       "comment": {
        "raw": [
-        "Enables sorting of search results by relevance.",
-        " - The highest priority has records, which have a full match with a search keyword.",
-        " - The lower one has records, which have a search keyword at the 0 position, but not the full match.",
-        " - Then, records, which contain a search keyword as a separate word, but not at the beginning.",
-        " - And the lowest one - any other match of the search keyword.",
-        "",
-        " Example:",
-        " - `search`: 'some'",
-        " - `record string`: 'some word', `rank` = 4",
-        " - `record string`: 'someone', `rank` = 3",
-        " - `record string`: 'I know some guy', `rank` = 2",
-        " - `record string`: 'awesome', `rank` = 1",
-        "",
-        " @default true"
+        "/**\r",
+        "     * Enables sorting of search results by relevance.\r",
+        "     * - The highest priority has records, which have a full match with a search keyword.\r",
+        "     * - The lower one has records, which have a search keyword at the 0 position, but not the full match.\r",
+        "     * - Then, records, which contain a search keyword as a separate word, but not at the beginning.\r",
+        "     * - And the lowest one - any other match of the search keyword.\r",
+        "     *\r",
+        "     * Example:\r",
+        "     * - `search`: 'some'\r",
+        "     * - `record string`: 'some word', `rank` = 4\r",
+        "     * - `record string`: 'someone', `rank` = 3\r",
+        "     * - `record string`: 'I know some guy', `rank` = 2\r",
+        "     * - `record string`: 'awesome', `rank` = 1\r",
+        "     *\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -2483,9 +2520,10 @@
       "name": "getId",
       "comment": {
        "raw": [
-        "Should return unique ID of the TItem",
-        " If omitted, we assume that every TItem has and unique id in its 'id' field.",
-        " @param item An item to get ID of"
+        "/**\r",
+        "     * Should return unique ID of the TItem\r",
+        "     * If omitted, we assume that every TItem has and unique id in its 'id' field.\r",
+        "     * @param item An item to get ID of"
        ]
       },
       "typeValue": {
@@ -2502,8 +2540,9 @@
       "name": "complexIds",
       "comment": {
        "raw": [
-        "Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).",
-        " In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys."
+        "/**\r",
+        "     * Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).\r",
+        "     * In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys."
        ]
       },
       "typeValue": {
@@ -2520,14 +2559,14 @@
       "name": "getParentId",
       "comment": {
        "raw": [
-        "Should return ID of the Item's parent. Usually it's i => i.parentId.",
-        " If specified, Data Source will build items hierarchy.",
-        "",
-        " Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:",
-        " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain",
-        "   to highlight parents with selected children",
-        " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),",
-        "   We need to load parents with a separate call (if backend doesn't pre-fetch them)"
+        "/** Should return ID of the Item's parent. Usually it's i => i.parentId.\r",
+        "     * If specified, Data Source will build items hierarchy.\r",
+        "     *\r",
+        "     * Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:\r",
+        "     * - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain\r",
+        "     *   to highlight parents with selected children\r",
+        "     * - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),\r",
+        "     *   We need to load parents with a separate call (if backend doesn't pre-fetch them)"
        ]
       },
       "typeValue": {
@@ -2544,12 +2583,13 @@
       "name": "rowOptions",
       "comment": {
        "raw": [
-        "Specifies if rows are selectable, checkable, draggable, clickable, and more.",
-        " See DataRowOptions for more details.",
-        " If options depends on the item itself, use getRowOptions.",
-        " Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.",
-        " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance",
-        " @param item An item to get options for"
+        "/**\r",
+        "     * Specifies if rows are selectable, checkable, draggable, clickable, and more.\r",
+        "     * See DataRowOptions for more details.\r",
+        "     * If options depends on the item itself, use getRowOptions.\r",
+        "     * Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.\r",
+        "     * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance\r",
+        "     * @param item An item to get options for"
        ]
       },
       "typeValue": {
@@ -2563,12 +2603,13 @@
       "name": "getRowOptions",
       "comment": {
        "raw": [
-        "For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.",
-        " To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.",
-        " See DataRowOptions for more details.",
-        " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.",
-        " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance",
-        " @param item An item to get options for"
+        "/**\r",
+        "     * For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.\r",
+        "     * To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.\r",
+        "     * See DataRowOptions for more details.\r",
+        "     * If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.\r",
+        "     * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance\r",
+        "     * @param item An item to get options for"
        ]
       },
       "typeValue": {
@@ -2585,8 +2626,9 @@
       "name": "isFoldedByDefault",
       "comment": {
        "raw": [
-        "Can be specified to unfold all or some items at start.",
-        " If not specified, all rows would be folded."
+        "/**\r",
+        "     * Can be specified to unfold all or some items at start.\r",
+        "     * If not specified, all rows would be folded."
        ]
       },
       "typeValue": {
@@ -2603,14 +2645,15 @@
       "name": "cascadeSelection",
       "comment": {
        "raw": [
-        "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.",
-        " - false: All nodes are selected independently (default).",
-        " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.",
-        " - 'implicit': Selecting a parent node means that all children are considered checked.",
-        "   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked",
-        "   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,",
-        "   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last",
-        "   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
+        "/**\r",
+        "     * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.\r",
+        "     * - false: All nodes are selected independently (default).\r",
+        "     * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.\r",
+        "     * - 'implicit': Selecting a parent node means that all children are considered checked.\r",
+        "     *   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked\r",
+        "     *   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,\r",
+        "     *   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last\r",
+        "     *   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
        ]
       },
       "typeValue": {
@@ -2633,7 +2676,8 @@
       "name": "selectAll",
       "comment": {
        "raw": [
-        "Enables or disables \"select all\" checkbox. Default is true."
+        "/**\r",
+        "     * Enables or disables \"select all\" checkbox. Default is true."
        ]
       },
       "typeValue": {
@@ -2650,11 +2694,12 @@
       "name": "backgroundReload",
       "comment": {
        "raw": [
-        "Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.",
-        " During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.",
-        " In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.",
-        " It is required to add blockers/spinners to the components, built on your own.",
-        " If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`."
+        "/**\r",
+        "     * Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.\r",
+        "     * During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.\r",
+        "     * In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.\r",
+        "     * It is required to add blockers/spinners to the components, built on your own.\r",
+        "     * If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`."
        ]
       },
       "typeValue": {
@@ -2795,8 +2840,9 @@
       "name": "disableClear",
       "comment": {
        "raw": [
-        "Disable clearing date value (e.g. via cross icon)",
-        " @default false"
+        "/**\r",
+        "     * Disable clearing date value (e.g. via cross icon)\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -3099,8 +3145,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -3223,9 +3270,10 @@
       "name": "getId",
       "comment": {
        "raw": [
-        "Should return unique ID of the TItem",
-        " If omitted, we assume that every TItem has and unique id in its 'id' field.",
-        " @param item An item to get ID of"
+        "/**\r",
+        "     * Should return unique ID of the TItem\r",
+        "     * If omitted, we assume that every TItem has and unique id in its 'id' field.\r",
+        "     * @param item An item to get ID of"
        ]
       },
       "typeValue": {
@@ -3241,8 +3289,9 @@
       "name": "complexIds",
       "comment": {
        "raw": [
-        "Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).",
-        " In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys."
+        "/**\r",
+        "     * Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).\r",
+        "     * In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys."
        ]
       },
       "typeValue": {
@@ -3258,14 +3307,14 @@
       "name": "getParentId",
       "comment": {
        "raw": [
-        "Should return ID of the Item's parent. Usually it's i => i.parentId.",
-        " If specified, Data Source will build items hierarchy.",
-        "",
-        " Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:",
-        " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain",
-        "   to highlight parents with selected children",
-        " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),",
-        "   We need to load parents with a separate call (if backend doesn't pre-fetch them)"
+        "/** Should return ID of the Item's parent. Usually it's i => i.parentId.\r",
+        "     * If specified, Data Source will build items hierarchy.\r",
+        "     *\r",
+        "     * Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:\r",
+        "     * - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain\r",
+        "     *   to highlight parents with selected children\r",
+        "     * - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),\r",
+        "     *   We need to load parents with a separate call (if backend doesn't pre-fetch them)"
        ]
       },
       "typeValue": {
@@ -3281,12 +3330,13 @@
       "name": "rowOptions",
       "comment": {
        "raw": [
-        "Specifies if rows are selectable, checkable, draggable, clickable, and more.",
-        " See DataRowOptions for more details.",
-        " If options depends on the item itself, use getRowOptions.",
-        " Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.",
-        " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance",
-        " @param item An item to get options for"
+        "/**\r",
+        "     * Specifies if rows are selectable, checkable, draggable, clickable, and more.\r",
+        "     * See DataRowOptions for more details.\r",
+        "     * If options depends on the item itself, use getRowOptions.\r",
+        "     * Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.\r",
+        "     * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance\r",
+        "     * @param item An item to get options for"
        ]
       },
       "typeValue": {
@@ -3299,12 +3349,13 @@
       "name": "getRowOptions",
       "comment": {
        "raw": [
-        "For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.",
-        " To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.",
-        " See DataRowOptions for more details.",
-        " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.",
-        " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance",
-        " @param item An item to get options for"
+        "/**\r",
+        "     * For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.\r",
+        "     * To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.\r",
+        "     * See DataRowOptions for more details.\r",
+        "     * If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.\r",
+        "     * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance\r",
+        "     * @param item An item to get options for"
        ]
       },
       "typeValue": {
@@ -3320,8 +3371,9 @@
       "name": "isFoldedByDefault",
       "comment": {
        "raw": [
-        "Can be specified to unfold all or some items at start.",
-        " If not specified, all rows would be folded."
+        "/**\r",
+        "     * Can be specified to unfold all or some items at start.\r",
+        "     * If not specified, all rows would be folded."
        ]
       },
       "typeValue": {
@@ -3337,14 +3389,15 @@
       "name": "cascadeSelection",
       "comment": {
        "raw": [
-        "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.",
-        " - false: All nodes are selected independently (default).",
-        " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.",
-        " - 'implicit': Selecting a parent node means that all children are considered checked.",
-        "   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked",
-        "   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,",
-        "   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last",
-        "   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
+        "/**\r",
+        "     * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.\r",
+        "     * - false: All nodes are selected independently (default).\r",
+        "     * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.\r",
+        "     * - 'implicit': Selecting a parent node means that all children are considered checked.\r",
+        "     *   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked\r",
+        "     *   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,\r",
+        "     *   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last\r",
+        "     *   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
        ]
       },
       "typeValue": {
@@ -3366,7 +3419,8 @@
       "name": "selectAll",
       "comment": {
        "raw": [
-        "Enables or disables \"select all\" checkbox. Default is true."
+        "/**\r",
+        "     * Enables or disables \"select all\" checkbox. Default is true."
        ]
       },
       "typeValue": {
@@ -3382,11 +3436,12 @@
       "name": "backgroundReload",
       "comment": {
        "raw": [
-        "Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.",
-        " During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.",
-        " In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.",
-        " It is required to add blockers/spinners to the components, built on your own.",
-        " If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`."
+        "/**\r",
+        "     * Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.\r",
+        "     * During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.\r",
+        "     * In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.\r",
+        "     * It is required to add blockers/spinners to the components, built on your own.\r",
+        "     * If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`."
        ]
       },
       "typeValue": {
@@ -3552,8 +3607,9 @@
       "name": "presets",
       "comment": {
        "raw": [
-        "Range presets (like 'this week', 'this month', etc.) to display at the right of the Picker's body.",
-        " UUI provides defaults in the 'rangeDatePickerPresets' exported variable - you can use it as is, or build on top of it (e.g. add your presets)"
+        "/**\r",
+        "     * Range presets (like 'this week', 'this month', etc.) to display at the right of the Picker's body.\r",
+        "     * UUI provides defaults in the 'rangeDatePickerPresets' exported variable - you can use it as is, or build on top of it (e.g. add your presets)"
        ]
       },
       "typeValue": {
@@ -3566,8 +3622,9 @@
       "name": "disableClear",
       "comment": {
        "raw": [
-        "Disables clearing component (with the cross icon)",
-        " @default false"
+        "/**\r",
+        "     * Disables clearing component (with the cross icon)\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -3586,8 +3643,9 @@
       "name": "placement",
       "comment": {
        "raw": [
-        "Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/)",
-        " @default 'bottom-start'"
+        "/**\r",
+        "     * Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/)\r",
+        "     * @default 'bottom-start'"
        ],
        "tags": {
         "@default": "bottom-start"
@@ -3856,8 +3914,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -4078,8 +4137,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -4358,8 +4418,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -4751,8 +4812,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -5192,8 +5254,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -5527,9 +5590,9 @@
       "name": "apiDefinition",
       "comment": {
        "raw": [
-        "Function to get the api definitions.",
-        " Usually, api definitions this is an object which contain object with all api requests of the app.",
-        " Then you can call this requests via 'uuiContext.api.myApi(myData)'"
+        "/** Function to get the api definitions.\r",
+        "     * Usually, api definitions this is an object which contain object with all api requests of the app.\r",
+        "     * Then you can call this requests via 'uuiContext.api.myApi(myData)'"
        ]
       },
       "typeValue": {
@@ -5546,9 +5609,9 @@
       "name": "apiReloginPath",
       "comment": {
        "raw": [
-        "Url to the relogin page. Used to open new browser window by this path, in case of auth lost error.",
-        " Opened by this path page, should process authentication and then post 'authSuccess' cross-window message to the opener, to recover failed requests.",
-        " @default '/auth/login'"
+        "/** Url to the relogin page. Used to open new browser window by this path, in case of auth lost error.\r",
+        "     * Opened by this path page, should process authentication and then post 'authSuccess' cross-window message to the opener, to recover failed requests.\r",
+        "     * @default '/auth/login'"
        ],
        "tags": {
         "@default": "/auth/login"
@@ -5568,8 +5631,8 @@
       "name": "apiPingPath",
       "comment": {
        "raw": [
-        "Url to the api, which ApiContext will start pinging in case of 'connection lost', until it gets 200 status. Then it will retry failed requests.",
-        " @default '/auth/ping'"
+        "/** Url to the api, which ApiContext will start pinging in case of 'connection lost', until it gets 200 status. Then it will retry failed requests.\r",
+        "     * @default '/auth/ping'"
        ],
        "tags": {
         "@default": "/auth/ping"
@@ -5589,8 +5652,8 @@
       "name": "apiServerUrl",
       "comment": {
        "raw": [
-        "Url to the server api under which all requests will be processed. Usefully for cases, when all api located by some specific url, which is not much app url.",
-        " @default ''"
+        "/** Url to the server api under which all requests will be processed. Usefully for cases, when all api located by some specific url, which is not much app url.\r",
+        "     * @default ''"
        ],
        "tags": {
         "@default": ""
@@ -5705,6 +5768,11 @@
       "    canCopy?: (cell: DataTableSelectedCellData<TItem, TId, TFilter>) => boolean;",
       "    /** A pure function that defines that column accepts copying other column value into it */",
       "    canAcceptCopy?: (from: DataTableSelectedCellData<TItem, TId, TFilter>, to: DataTableSelectedCellData<TItem, TId, TFilter>) => boolean;",
+      "    groupBy?: string;",
+      "    headerFontSize?: '24' | '18' | '12' | '10' | '14' | '16';",
+      "    groupCaptionCX?: string;",
+      "    onHeaderClick?(e: any): void;",
+      "    onGroupClick?(config: ColumnsConfig, props: unknown): void;",
       "    /** Render the cell content. The item props is the value of the whole row (TItem). */",
       "    render?(item: TItem, props: DataRowProps<TItem, TId>): any;",
       "    /** Overrides rendering of the whole cell */",
@@ -5730,8 +5798,9 @@
       "name": "key",
       "comment": {
        "raw": [
-        "Unique key to identify the column. Used to reference columns, e.g. in ColumnsConfig.",
-        " Also, used as React key for cells, header cells, and other components inside tables."
+        "/**\r",
+        "     * Unique key to identify the column. Used to reference columns, e.g. in ColumnsConfig.\r",
+        "     * Also, used as React key for cells, header cells, and other components inside tables."
        ]
       },
       "typeValue": {
@@ -5761,9 +5830,10 @@
       "name": "width",
       "comment": {
        "raw": [
-        "The width of the column. Usually, columns has exact this width.",
-        " When all columns fit, and there's spare horizontal space, you can use 'grow' prop to use this space for certain columns.",
-        " DataTable's columns can't shrink below width - table will add horizontal scrolling instead of shrinking columns"
+        "/**\r",
+        "     * The width of the column. Usually, columns has exact this width.\r",
+        "     * When all columns fit, and there's spare horizontal space, you can use 'grow' prop to use this space for certain columns.\r",
+        "     * DataTable's columns can't shrink below width - table will add horizontal scrolling instead of shrinking columns"
        ]
       },
       "typeValue": {
@@ -5864,8 +5934,9 @@
       "name": "isSortable",
       "comment": {
        "raw": [
-        "Enables sorting arrows on the column.",
-        " Sorting state is kept in DataSourceState.sorting"
+        "/**\r",
+        "     * Enables sorting arrows on the column.\r",
+        "     * Sorting state is kept in DataSourceState.sorting"
        ]
       },
       "typeValue": {
@@ -5927,9 +5998,10 @@
       "name": "isFilterActive",
       "comment": {
        "raw": [
-        "Should return true, if current filter affects the column.",
-        " Usually, this prop is filled automatically by the useTableState hook.",
-        " If you use the useTableState hook, you don't need to specify it manually."
+        "/**\r",
+        "     * Should return true, if current filter affects the column.\r",
+        "     * Usually, this prop is filled automatically by the useTableState hook.\r",
+        "     * If you use the useTableState hook, you don't need to specify it manually."
        ]
       },
       "typeValue": {
@@ -5974,6 +6046,69 @@
      },
      {
       "uid": 16,
+      "name": "groupBy",
+      "typeValue": {
+       "raw": "string"
+      },
+      "editor": {
+       "type": "string"
+      },
+      "required": false
+     },
+     {
+      "uid": 17,
+      "name": "headerFontSize",
+      "typeValue": {
+       "raw": "'24' | '18' | '12' | '10' | '14' | '16'"
+      },
+      "editor": {
+       "type": "oneOf",
+       "options": [
+        "10",
+        "12",
+        "14",
+        "16",
+        "18",
+        "24"
+       ]
+      },
+      "required": false
+     },
+     {
+      "uid": 18,
+      "name": "groupCaptionCX",
+      "typeValue": {
+       "raw": "string"
+      },
+      "editor": {
+       "type": "string"
+      },
+      "required": false
+     },
+     {
+      "uid": 19,
+      "name": "onHeaderClick",
+      "typeValue": {
+       "raw": "(e: any) => void"
+      },
+      "editor": {
+       "type": "func"
+      },
+      "required": false
+     },
+     {
+      "uid": 20,
+      "name": "onGroupClick",
+      "typeValue": {
+       "raw": "(config: ColumnsConfig, props: unknown) => void"
+      },
+      "editor": {
+       "type": "func"
+      },
+      "required": false
+     },
+     {
+      "uid": 21,
       "name": "render",
       "comment": {
        "raw": [
@@ -5989,7 +6124,7 @@
       "required": false
      },
      {
-      "uid": 17,
+      "uid": 22,
       "name": "renderCell",
       "comment": {
        "raw": [
@@ -6005,13 +6140,14 @@
       "required": false
      },
      {
-      "uid": 18,
+      "uid": 23,
       "name": "renderDropdown",
       "comment": {
        "raw": [
-        "Renders column header dropdown.",
-        " Usually, this prop is filled automatically by the useTableState hook.",
-        " If you use the useTableState hook, you don't need to specify it manually."
+        "/**\r",
+        "     * Renders column header dropdown.\r",
+        "     * Usually, this prop is filled automatically by the useTableState hook.\r",
+        "     * If you use the useTableState hook, you don't need to specify it manually."
        ]
       },
       "typeValue": {
@@ -6023,13 +6159,14 @@
       "required": false
      },
      {
-      "uid": 19,
+      "uid": 24,
       "name": "renderFilter",
       "comment": {
        "raw": [
-        "Renders column filter.",
-        " If you use useTableState hook, and you specify filter for the column, default filter will be rendered automatically.",
-        " You can use this prop to render a custom filter component."
+        "/**\r",
+        "     * Renders column filter.\r",
+        "     * If you use useTableState hook, and you specify filter for the column, default filter will be rendered automatically.\r",
+        "     * You can use this prop to render a custom filter component."
        ]
       },
       "typeValue": {
@@ -6041,7 +6178,7 @@
       "required": false
      },
      {
-      "uid": 20,
+      "uid": 25,
       "name": "fix",
       "comment": {
        "raw": [
@@ -6062,7 +6199,7 @@
       "required": false
      },
      {
-      "uid": 21,
+      "uid": 26,
       "name": "cx",
       "comment": {
        "raw": [
@@ -6077,7 +6214,7 @@
       "required": false
      },
      {
-      "uid": 22,
+      "uid": 27,
       "name": "onClick",
       "comment": {
        "raw": [
@@ -6094,7 +6231,7 @@
       "required": false
      },
      {
-      "uid": 23,
+      "uid": 28,
       "name": "rawProps",
       "comment": {
        "raw": [
@@ -6241,8 +6378,8 @@
     "src": "uui-core/src/types/dataRows.ts",
     "comment": {
      "raw": [
-      "A part of the DataRowProps, which can be configured for each data row via getRowOptions callback.",
-      " Other props in DataRowProps are computed when generating rows."
+      "/** A part of the DataRowProps, which can be configured for each data row via getRowOptions callback.\r",
+      " * Other props in DataRowProps are computed when generating rows."
      ]
     },
     "exported": true
@@ -6353,8 +6490,9 @@
       "name": "pin",
       "comment": {
        "raw": [
-        "A pure function that gets pinned state for each row.",
-        " If row pinned, it means that it will be sticky inside their parent section."
+        "/**\r",
+        "     * A pure function that gets pinned state for each row.\r",
+        "     * If row pinned, it means that it will be sticky inside their parent section."
        ]
       },
       "typeValue": {
@@ -6566,17 +6704,17 @@
     "src": "uui-core/src/types/dataRows.ts",
     "comment": {
      "raw": [
-      "DataRowProps is a base shape of props, passed to items in various lists or trees.",
-      "",
-      " Despite 'Row' in it's name, it doesn't directly connected to a table.",
-      " We use DataRowProps as a base for DataTableRowProps and DataPickerRowProps.",
-      " But it can also be used for any user-built list, tree, custom picker rows, or even a grid of cards.",
-      "",
-      " Array of DataRowProps describes a part of hierarchical list, while still being a flat array (not a tree of some kind).",
-      " We use depth, indent, path, and other props to show row's place in the hierarchy.",
-      " This is very handy to handle rendering, especially in virtual scrolling scenarios.",
-      "",
-      " DataSources primary job is to convert various data stores into arrays of DataRowProps."
+      "/** DataRowProps is a base shape of props, passed to items in various lists or trees.\r",
+      " *\r",
+      " * Despite 'Row' in it's name, it doesn't directly connected to a table.\r",
+      " * We use DataRowProps as a base for DataTableRowProps and DataPickerRowProps.\r",
+      " * But it can also be used for any user-built list, tree, custom picker rows, or even a grid of cards.\r",
+      " *\r",
+      " * Array of DataRowProps describes a part of hierarchical list, while still being a flat array (not a tree of some kind).\r",
+      " * We use depth, indent, path, and other props to show row's place in the hierarchy.\r",
+      " * This is very handy to handle rendering, especially in virtual scrolling scenarios.\r",
+      " *\r",
+      " * DataSources primary job is to convert various data stores into arrays of DataRowProps."
      ]
     },
     "exported": true
@@ -6770,7 +6908,7 @@
        ]
       },
       "typeValue": {
-       "raw": "number | '6' | '12' | '18' | '24' | '36'"
+       "raw": "number | '24' | '18' | '12' | '6' | '36'"
       },
       "from": "@epam/uui-core:FlexRowProps",
       "required": false
@@ -6784,7 +6922,7 @@
        ]
       },
       "typeValue": {
-       "raw": "number | '6' | '12' | '18' | '24' | '36'"
+       "raw": "number | '24' | '18' | '12' | '6' | '36'"
       },
       "from": "@epam/uui-core:FlexRowProps",
       "required": false
@@ -6853,8 +6991,9 @@
       "name": "pin",
       "comment": {
        "raw": [
-        "A pure function that gets pinned state for each row.",
-        " If row pinned, it means that it will be sticky inside their parent section."
+        "/**\r",
+        "     * A pure function that gets pinned state for each row.\r",
+        "     * If row pinned, it means that it will be sticky inside their parent section."
        ]
       },
       "typeValue": {
@@ -7085,9 +7224,9 @@
       "name": "indent",
       "comment": {
        "raw": [
-        "Indent of the item, to show hierarchy.",
-        "  Unlike depth, it contains additional logic, to not add unnecessary indents:",
-        "  if all children of node has no children, all nodes would get the same indent as parent."
+        "/** Indent of the item, to show hierarchy.\r",
+        "         *  Unlike depth, it contains additional logic, to not add unnecessary indents:\r",
+        "         *  if all children of node has no children, all nodes would get the same indent as parent."
        ]
       },
       "typeValue": {
@@ -7199,7 +7338,7 @@
       "name": "isChildrenChecked",
       "comment": {
        "raw": [
-        "True if some of row's children are checked.",
+        "/** True if some of row's children are checked.\r",
         " Used to show 'indefinite' checkbox state, to show user that something inside is checked"
        ]
       },
@@ -7280,8 +7419,8 @@
       "name": "onFold",
       "comment": {
        "raw": [
-        "Handles row folding change.",
-        " We demand to pass the row as well, to avoid creating closures for each row."
+        "/** Handles row folding change.\r",
+        "         * We demand to pass the row as well, to avoid creating closures for each row."
        ]
       },
       "typeValue": {
@@ -7297,8 +7436,8 @@
       "name": "onCheck",
       "comment": {
        "raw": [
-        "Handles row checkbox change.",
-        " We demand to pass the row as well, to avoid creating closures for each row."
+        "/** Handles row checkbox change.\r",
+        "         * We demand to pass the row as well, to avoid creating closures for each row."
        ]
       },
       "typeValue": {
@@ -7314,8 +7453,8 @@
       "name": "onSelect",
       "comment": {
        "raw": [
-        "Handles row selection.",
-        " We demand to pass the row as well, to avoid creating closures for each row."
+        "/** Handles row selection.\r",
+        "         * We demand to pass the row as well, to avoid creating closures for each row."
        ]
       },
       "typeValue": {
@@ -7331,7 +7470,7 @@
       "name": "onFocus",
       "comment": {
        "raw": [
-        "Handles row focusing."
+        "/** Handles row focusing."
        ]
       },
       "typeValue": {
@@ -7402,8 +7541,9 @@
       "name": "rowsCount",
       "comment": {
        "raw": [
-        "Count of rows, after applying filter, and folding on tree nodes.",
-        " Obsolete! Please switch to exactRowsCount / knownRowsCount"
+        "/**\r",
+        "     * Count of rows, after applying filter, and folding on tree nodes.\r",
+        "     * Obsolete! Please switch to exactRowsCount / knownRowsCount"
        ]
       },
       "typeValue": {
@@ -7435,9 +7575,10 @@
       "name": "knownRowsCount",
       "comment": {
        "raw": [
-        "There's at least knownRowsCount rows. There can be more if list is lazy loaded.",
-        " Equals to exactRowsCount if all rows are loaded, or if API returns rows count",
-        " Otherwise, exactRowsCount will be null, and knownRowsCount will specify number of loaded rows."
+        "/**\r",
+        "     * There's at least knownRowsCount rows. There can be more if list is lazy loaded.\r",
+        "     * Equals to exactRowsCount if all rows are loaded, or if API returns rows count\r",
+        "     * Otherwise, exactRowsCount will be null, and knownRowsCount will specify number of loaded rows."
        ]
       },
       "typeValue": {
@@ -7500,8 +7641,9 @@
       "name": "selectAll",
       "comment": {
        "raw": [
-        "ICheckable object for Select All behavior.",
-        " If omitted, Select All action will be absent."
+        "/**\r",
+        "     * ICheckable object for Select All behavior.\r",
+        "     * If omitted, Select All action will be absent."
        ]
       },
       "typeValue": {
@@ -7530,8 +7672,9 @@
       "name": "rowsCount",
       "comment": {
        "raw": [
-        "Count of rows, after applying filter, and folding on tree nodes.",
-        " Obsolete! Please switch to exactRowsCount / knownRowsCount"
+        "/**\r",
+        "     * Count of rows, after applying filter, and folding on tree nodes.\r",
+        "     * Obsolete! Please switch to exactRowsCount / knownRowsCount"
        ]
       },
       "typeValue": {
@@ -7565,9 +7708,10 @@
       "name": "knownRowsCount",
       "comment": {
        "raw": [
-        "There's at least knownRowsCount rows. There can be more if list is lazy loaded.",
-        " Equals to exactRowsCount if all rows are loaded, or if API returns rows count",
-        " Otherwise, exactRowsCount will be null, and knownRowsCount will specify number of loaded rows."
+        "/**\r",
+        "     * There's at least knownRowsCount rows. There can be more if list is lazy loaded.\r",
+        "     * Equals to exactRowsCount if all rows are loaded, or if API returns rows count\r",
+        "     * Otherwise, exactRowsCount will be null, and knownRowsCount will specify number of loaded rows."
        ]
       },
       "typeValue": {
@@ -7664,9 +7808,10 @@
       "name": "search",
       "comment": {
        "raw": [
-        "Search value, used to filter data based on it.",
-        " Included in the API request object when using a LazyDataSource.",
-        " For Array and Async data sources, searching is performed internally by the datasource."
+        "/**\r",
+        "     * Search value, used to filter data based on it.\r",
+        "     * Included in the API request object when using a LazyDataSource.\r",
+        "     * For Array and Async data sources, searching is performed internally by the datasource."
        ]
       },
       "typeValue": {
@@ -7695,8 +7840,9 @@
       "name": "folded",
       "comment": {
        "raw": [
-        "A map of item IDs to their folding state.",
-        " If an item ID is present with a `true` value, it's folded; otherwise, it's not folded."
+        "/**\r",
+        "     * A map of item IDs to their folding state.\r",
+        "     * If an item ID is present with a `true` value, it's folded; otherwise, it's not folded."
        ]
       },
       "typeValue": {
@@ -7709,9 +7855,10 @@
       "name": "filter",
       "comment": {
        "raw": [
-        "Filter value used to filter data based on it.",
-        " Included in the API request object when using a LazyDataSource.",
-        " For Array and Async data sources, filtering is performed internally by the datasource."
+        "/**\r",
+        "     * Filter value used to filter data based on it.\r",
+        "     * Included in the API request object when using a LazyDataSource.\r",
+        "     * For Array and Async data sources, filtering is performed internally by the datasource."
        ]
       },
       "typeValue": {
@@ -7724,9 +7871,10 @@
       "name": "sorting",
       "comment": {
        "raw": [
-        "Sorting value, used to sort data based on it.",
-        " Included in the API request object when using a LazyDataSource.",
-        " For Array and Async data sources, sorting is performed internally by the datasource."
+        "/**\r",
+        "     * Sorting value, used to sort data based on it.\r",
+        "     * Included in the API request object when using a LazyDataSource.\r",
+        "     * For Array and Async data sources, sorting is performed internally by the datasource."
        ]
       },
       "typeValue": {
@@ -7800,10 +7948,11 @@
       "name": "scrollTo",
       "comment": {
        "raw": [
-        "Virtual list ensures that row with this Index is within the visible area, if not Virtual List .",
-        " Virtual list updates this value on scroll to null when appear in the visible area.",
-        " If this value is updated manually, Virtual List would scroll to the specified items.",
-        " It would attempt to put scroll so this item will be at the top of the list."
+        "/**\r",
+        "     * Virtual list ensures that row with this Index is within the visible area, if not Virtual List .\r",
+        "     * Virtual list updates this value on scroll to null when appear in the visible area.\r",
+        "     * If this value is updated manually, Virtual List would scroll to the specified items.\r",
+        "     * It would attempt to put scroll so this item will be at the top of the list."
        ]
       },
       "typeValue": {
@@ -7817,8 +7966,9 @@
       "name": "topIndex",
       "comment": {
        "raw": [
-        "Index of the topmost item, in rendered batch.",
-        " Note - this item might not be visible, as Virtual List maintain some reserve of rows on top / at the bottom of the list"
+        "/**\r",
+        "     * Index of the topmost item, in rendered batch.\r",
+        "     * Note - this item might not be visible, as Virtual List maintain some reserve of rows on top / at the bottom of the list"
        ]
       },
       "typeValue": {
@@ -7835,10 +7985,11 @@
       "name": "visibleCount",
       "comment": {
        "raw": [
-        "Number of currently rendered items.",
-        " Virtual list updates this value automatically, if it too small.",
-        " Note Virtual List renders more items, that actually visible,",
-        " as it need maintain some reserve of rows on top / at the bottom of the list."
+        "/**\r",
+        "     * Number of currently rendered items.\r",
+        "     * Virtual list updates this value automatically, if it too small.\r",
+        "     * Note Virtual List renders more items, that actually visible,\r",
+        "     * as it need maintain some reserve of rows on top / at the bottom of the list."
        ]
       },
       "typeValue": {
@@ -8056,8 +8207,8 @@
       "name": "renderPlaceholder",
       "comment": {
        "raw": [
-        "Overrides default loading placeholder ('skeleton') rendering.",
-        " By default: () => <Text> Unknown </Text>"
+        "/** Overrides default loading placeholder ('skeleton') rendering.\r",
+        "     * By default: () => <Text> Unknown </Text>"
        ]
       },
       "typeValue": {
@@ -8089,12 +8240,13 @@
       "name": "renderEditor",
       "comment": {
        "raw": [
-        "If passed, the cell is rendered as editable - receives focus, show validation errors.",
-        " All necessary props for the editor are passed as argument:",
-        " - props implements IEditable and can be passed directly to suitable component (like TextInput)",
-        " - ICanFocus props are passed as well. Component should implement it so cell focus highlight works properly",
-        " - mode='cell' prop is passed to render UUI components in 'cell' mode",
-        " - rowProps is passed, so you depend on additional info about the row itself"
+        "/**\r",
+        "     * If passed, the cell is rendered as editable - receives focus, show validation errors.\r",
+        "     * All necessary props for the editor are passed as argument:\r",
+        "     * - props implements IEditable and can be passed directly to suitable component (like TextInput)\r",
+        "     * - ICanFocus props are passed as well. Component should implement it so cell focus highlight works properly\r",
+        "     * - mode='cell' prop is passed to render UUI components in 'cell' mode\r",
+        "     * - rowProps is passed, so you depend on additional info about the row itself"
        ]
       },
       "typeValue": {
@@ -8413,8 +8565,8 @@
       "name": "allowColumnsReordering",
       "comment": {
        "raw": [
-        "If true, allows user to change columns order",
-        " @default false"
+        "/** If true, allows user to change columns order\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -8433,8 +8585,8 @@
       "name": "allowColumnsResizing",
       "comment": {
        "raw": [
-        "If true, allows user to change columns width",
-        " @default false"
+        "/** If true, allows user to change columns width\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -9018,8 +9170,8 @@
       "name": "allowColumnsReordering",
       "comment": {
        "raw": [
-        "If true, allows user to change columns order",
-        " @default false"
+        "/** If true, allows user to change columns order\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -9039,8 +9191,8 @@
       "name": "allowColumnsResizing",
       "comment": {
        "raw": [
-        "If true, allows user to change columns width",
-        " @default false"
+        "/** If true, allows user to change columns width\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -9281,8 +9433,8 @@
       "name": "allowColumnsReordering",
       "comment": {
        "raw": [
-        "If true, allows user to change columns order",
-        " @default false"
+        "/** If true, allows user to change columns order\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -9302,8 +9454,8 @@
       "name": "allowColumnsResizing",
       "comment": {
        "raw": [
-        "If true, allows user to change columns width",
-        " @default false"
+        "/** If true, allows user to change columns width\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -9372,8 +9524,9 @@
       "name": "renderCell",
       "comment": {
        "raw": [
-        "Render callback for each cell at row.",
-        " If omitted, default cell renderer will be used."
+        "/**\r",
+        "     * Render callback for each cell at row.\r",
+        "     * If omitted, default cell renderer will be used."
        ]
       },
       "typeValue": {
@@ -9389,8 +9542,9 @@
       "name": "renderDropMarkers",
       "comment": {
        "raw": [
-        "Render callback for the drop marker. Rendered only if 'dnd' option was provided via getRowProps.",
-        " If omitted, default renderer will be used."
+        "/**\r",
+        "     * Render callback for the drop marker. Rendered only if 'dnd' option was provided via getRowProps.\r",
+        "     * If omitted, default renderer will be used."
        ]
       },
       "typeValue": {
@@ -9503,7 +9657,7 @@
        ]
       },
       "typeValue": {
-       "raw": "number | '6' | '12' | '18' | '24' | '36'"
+       "raw": "number | '24' | '18' | '12' | '6' | '36'"
       },
       "from": "@epam/uui-core:FlexRowProps",
       "required": false
@@ -9517,7 +9671,7 @@
        ]
       },
       "typeValue": {
-       "raw": "number | '6' | '12' | '18' | '24' | '36'"
+       "raw": "number | '24' | '18' | '12' | '6' | '36'"
       },
       "from": "@epam/uui-core:FlexRowProps",
       "required": false
@@ -9586,8 +9740,9 @@
       "name": "pin",
       "comment": {
        "raw": [
-        "A pure function that gets pinned state for each row.",
-        " If row pinned, it means that it will be sticky inside their parent section."
+        "/**\r",
+        "     * A pure function that gets pinned state for each row.\r",
+        "     * If row pinned, it means that it will be sticky inside their parent section."
        ]
       },
       "typeValue": {
@@ -9824,9 +9979,9 @@
       "name": "indent",
       "comment": {
        "raw": [
-        "Indent of the item, to show hierarchy.",
-        "  Unlike depth, it contains additional logic, to not add unnecessary indents:",
-        "  if all children of node has no children, all nodes would get the same indent as parent."
+        "/** Indent of the item, to show hierarchy.\r",
+        "         *  Unlike depth, it contains additional logic, to not add unnecessary indents:\r",
+        "         *  if all children of node has no children, all nodes would get the same indent as parent."
        ]
       },
       "typeValue": {
@@ -9945,7 +10100,7 @@
       "name": "isChildrenChecked",
       "comment": {
        "raw": [
-        "True if some of row's children are checked.",
+        "/** True if some of row's children are checked.\r",
         " Used to show 'indefinite' checkbox state, to show user that something inside is checked"
        ]
       },
@@ -10031,8 +10186,8 @@
       "name": "onFold",
       "comment": {
        "raw": [
-        "Handles row folding change.",
-        " We demand to pass the row as well, to avoid creating closures for each row."
+        "/** Handles row folding change.\r",
+        "         * We demand to pass the row as well, to avoid creating closures for each row."
        ]
       },
       "typeValue": {
@@ -10049,8 +10204,8 @@
       "name": "onCheck",
       "comment": {
        "raw": [
-        "Handles row checkbox change.",
-        " We demand to pass the row as well, to avoid creating closures for each row."
+        "/** Handles row checkbox change.\r",
+        "         * We demand to pass the row as well, to avoid creating closures for each row."
        ]
       },
       "typeValue": {
@@ -10067,8 +10222,8 @@
       "name": "onSelect",
       "comment": {
        "raw": [
-        "Handles row selection.",
-        " We demand to pass the row as well, to avoid creating closures for each row."
+        "/** Handles row selection.\r",
+        "         * We demand to pass the row as well, to avoid creating closures for each row."
        ]
       },
       "typeValue": {
@@ -10085,7 +10240,7 @@
       "name": "onFocus",
       "comment": {
        "raw": [
-        "Handles row focusing."
+        "/** Handles row focusing."
        ]
       },
       "typeValue": {
@@ -10261,9 +10416,10 @@
       "name": "search",
       "comment": {
        "raw": [
-        "Search value, used to filter data based on it.",
-        " Included in the API request object when using a LazyDataSource.",
-        " For Array and Async data sources, searching is performed internally by the datasource."
+        "/**\r",
+        "     * Search value, used to filter data based on it.\r",
+        "     * Included in the API request object when using a LazyDataSource.\r",
+        "     * For Array and Async data sources, searching is performed internally by the datasource."
        ]
       },
       "typeValue": {
@@ -10294,8 +10450,9 @@
       "name": "folded",
       "comment": {
        "raw": [
-        "A map of item IDs to their folding state.",
-        " If an item ID is present with a `true` value, it's folded; otherwise, it's not folded."
+        "/**\r",
+        "     * A map of item IDs to their folding state.\r",
+        "     * If an item ID is present with a `true` value, it's folded; otherwise, it's not folded."
        ]
       },
       "typeValue": {
@@ -10309,9 +10466,10 @@
       "name": "filter",
       "comment": {
        "raw": [
-        "Filter value used to filter data based on it.",
-        " Included in the API request object when using a LazyDataSource.",
-        " For Array and Async data sources, filtering is performed internally by the datasource."
+        "/**\r",
+        "     * Filter value used to filter data based on it.\r",
+        "     * Included in the API request object when using a LazyDataSource.\r",
+        "     * For Array and Async data sources, filtering is performed internally by the datasource."
        ]
       },
       "typeValue": {
@@ -10325,9 +10483,10 @@
       "name": "sorting",
       "comment": {
        "raw": [
-        "Sorting value, used to sort data based on it.",
-        " Included in the API request object when using a LazyDataSource.",
-        " For Array and Async data sources, sorting is performed internally by the datasource."
+        "/**\r",
+        "     * Sorting value, used to sort data based on it.\r",
+        "     * Included in the API request object when using a LazyDataSource.\r",
+        "     * For Array and Async data sources, sorting is performed internally by the datasource."
        ]
       },
       "typeValue": {
@@ -10406,10 +10565,11 @@
       "name": "scrollTo",
       "comment": {
        "raw": [
-        "Virtual list ensures that row with this Index is within the visible area, if not Virtual List .",
-        " Virtual list updates this value on scroll to null when appear in the visible area.",
-        " If this value is updated manually, Virtual List would scroll to the specified items.",
-        " It would attempt to put scroll so this item will be at the top of the list."
+        "/**\r",
+        "     * Virtual list ensures that row with this Index is within the visible area, if not Virtual List .\r",
+        "     * Virtual list updates this value on scroll to null when appear in the visible area.\r",
+        "     * If this value is updated manually, Virtual List would scroll to the specified items.\r",
+        "     * It would attempt to put scroll so this item will be at the top of the list."
        ]
       },
       "typeValue": {
@@ -10423,8 +10583,9 @@
       "name": "topIndex",
       "comment": {
        "raw": [
-        "Index of the topmost item, in rendered batch.",
-        " Note - this item might not be visible, as Virtual List maintain some reserve of rows on top / at the bottom of the list"
+        "/**\r",
+        "     * Index of the topmost item, in rendered batch.\r",
+        "     * Note - this item might not be visible, as Virtual List maintain some reserve of rows on top / at the bottom of the list"
        ]
       },
       "typeValue": {
@@ -10441,10 +10602,11 @@
       "name": "visibleCount",
       "comment": {
        "raw": [
-        "Number of currently rendered items.",
-        " Virtual list updates this value automatically, if it too small.",
-        " Note Virtual List renders more items, that actually visible,",
-        " as it need maintain some reserve of rows on top / at the bottom of the list."
+        "/**\r",
+        "     * Number of currently rendered items.\r",
+        "     * Virtual list updates this value automatically, if it too small.\r",
+        "     * Note Virtual List renders more items, that actually visible,\r",
+        "     * as it need maintain some reserve of rows on top / at the bottom of the list."
        ]
       },
       "typeValue": {
@@ -10575,8 +10737,9 @@
       "name": "disableClear",
       "comment": {
        "raw": [
-        "Disable clearing date value (e.g. via cross icon)",
-        " @default false"
+        "/**\r",
+        "     * Disable clearing date value (e.g. via cross icon)\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -10887,8 +11050,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -10961,8 +11125,8 @@
       "name": "srcData",
       "comment": {
        "raw": [
-        "Data used when this component acts as a drag source.",
-        " If provided, it means this component can be dragged. Can be used in combination with dstData."
+        "/** Data used when this component acts as a drag source.\r",
+        "     * If provided, it means this component can be dragged. Can be used in combination with dstData."
        ]
       },
       "typeValue": {
@@ -10976,8 +11140,8 @@
       "name": "dstData",
       "comment": {
        "raw": [
-        "Data used when this component acts as a drop destination.",
-        " If provided, it means something can be dragged onto this component. Can be used in combination with srcData."
+        "/** Data used when this component acts as a drop destination.\r",
+        "     * If provided, it means something can be dragged onto this component. Can be used in combination with srcData."
        ]
       },
       "typeValue": {
@@ -11216,8 +11380,9 @@
       "name": "eventHandlers",
       "comment": {
        "raw": [
-        "Event handlers. Component is expected to pass these events to the top element it renders.",
-        " As onClick event on the element will be overwritten, use DndActorProps.onClick to receive click events on the element"
+        "/**\r",
+        "     * Event handlers. Component is expected to pass these events to the top element it renders.\r",
+        "     * As onClick event on the element will be overwritten, use DndActorProps.onClick to receive click events on the element"
        ]
       },
       "typeValue": {
@@ -11230,8 +11395,9 @@
       "name": "classNames",
       "comment": {
        "raw": [
-        "CSS class names to add to the element.",
-        " Some of these markers are used by the DndActor internally, so they must be added even if no used by component itself to apply styles."
+        "/**\r",
+        "     * CSS class names to add to the element.\r",
+        "     * Some of these markers are used by the DndActor internally, so they must be added even if no used by component itself to apply styles."
        ]
       },
       "typeValue": {
@@ -11628,7 +11794,7 @@
       "name": "renderTarget",
       "comment": {
        "raw": [
-        "Render callback fo the dropdown target.",
+        "/** Render callback fo the dropdown target.\r",
         "     Note, that it's required to pass 'props' parameters to the target component."
        ]
       },
@@ -11693,8 +11859,8 @@
       "name": "zIndex",
       "comment": {
        "raw": [
-        "zIndex for dropdown body",
-        " By default used value received by LayoutContext"
+        "/** zIndex for dropdown body\r",
+        "     * By default used value received by LayoutContext"
        ]
       },
       "typeValue": {
@@ -11756,9 +11922,9 @@
       "name": "openDelay",
       "comment": {
        "raw": [
-        "Defines how much 'ms' user should hold mouse over target to open the dropdown",
-        " This prop work only with openOnHover={true}",
-        " @default 0"
+        "/** Defines how much 'ms' user should hold mouse over target to open the dropdown\r",
+        "     * This prop work only with openOnHover={true}\r",
+        "     * @default 0"
        ],
        "tags": {
         "@default": 0
@@ -11777,9 +11943,9 @@
       "name": "closeDelay",
       "comment": {
        "raw": [
-        "Defines after which delay dropdown will be closed, if user leave mouse from target.",
-        " This prop work only with openOnHover={true}",
-        " @default 0"
+        "/** Defines after which delay dropdown will be closed, if user leave mouse from target.\r",
+        "     * This prop work only with openOnHover={true}\r",
+        "     * @default 0"
        ],
        "tags": {
         "@default": 0
@@ -11798,8 +11964,8 @@
       "name": "openOnClick",
       "comment": {
        "raw": [
-        "If true, dropdown will be opened by click on toggler.",
-        " @default true"
+        "/** If true, dropdown will be opened by click on toggler.\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -11818,8 +11984,8 @@
       "name": "openOnHover",
       "comment": {
        "raw": [
-        "If true, dropdown will be opened by hover on toggler.",
-        " @default false"
+        "/** If true, dropdown will be opened by hover on toggler.\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -11838,9 +12004,9 @@
       "name": "closeOnTargetClick",
       "comment": {
        "raw": [
-        "If true, clicks on target will toggle dropdown open state.",
-        " If false, click on target will only open dropdown and won't close it.",
-        " @default true"
+        "/** If true, clicks on target will toggle dropdown open state.\r",
+        "     * If false, click on target will only open dropdown and won't close it.\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -11859,8 +12025,8 @@
       "name": "closeOnClickOutside",
       "comment": {
        "raw": [
-        "If true, dropdown will be closed on click outside body or toggler.",
-        " @default true"
+        "/** If true, dropdown will be closed on click outside body or toggler.\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -11879,11 +12045,11 @@
       "name": "closeOnMouseLeave",
       "comment": {
        "raw": [
-        "Defined when to close dropdown in case of openOnHover={ true }",
-        " toggler — dropdown will be closed when a mouse leaves the target component",
-        " boundary — will not to close the dropdown when a mouse is on target or in 30px around target area",
-        " false — will not close dropdown by mouse move event",
-        " @default 'toggler'"
+        "/** Defined when to close dropdown in case of openOnHover={ true }\r",
+        "     * toggler — dropdown will be closed when a mouse leaves the target component\r",
+        "     * boundary — will not to close the dropdown when a mouse is on target or in 30px around target area\r",
+        "     * false — will not close dropdown by mouse move event\r",
+        "     * @default 'toggler'"
        ],
        "tags": {
         "@default": "toggler"
@@ -11907,8 +12073,9 @@
       "name": "portalTarget",
       "comment": {
        "raw": [
-        "Node of portal target, where to render the dropdown body.",
-        " By default, will be used global portal node."
+        "/**\r",
+        "     * Node of portal target, where to render the dropdown body.\r",
+        "     * By default, will be used global portal node."
        ]
       },
       "typeValue": {
@@ -11921,7 +12088,8 @@
       "name": "boundaryElement",
       "comment": {
        "raw": [
-        "Element relative to which dropdown will calculate position"
+        "/**\r",
+        "     * Element relative to which dropdown will calculate position"
        ]
       },
       "typeValue": {
@@ -11934,8 +12102,8 @@
       "name": "closeBodyOnTogglerHidden",
       "comment": {
        "raw": [
-        "Pass false, if you do not want to close the dropdown in case Toggler move out of viewport.",
-        " @default true"
+        "/** Pass false, if you do not want to close the dropdown in case Toggler move out of viewport.\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -13113,7 +13281,7 @@
        ]
       },
       "typeValue": {
-       "raw": "number | '6' | '12' | '18' | '24' | '36'"
+       "raw": "number | '24' | '18' | '12' | '6' | '36'"
       },
       "required": false
      },
@@ -13126,7 +13294,7 @@
        ]
       },
       "typeValue": {
-       "raw": "number | '6' | '12' | '18' | '24' | '36'"
+       "raw": "number | '24' | '18' | '12' | '6' | '36'"
       },
       "required": false
      }
@@ -13222,7 +13390,8 @@
       "name": "renderForm",
       "comment": {
        "raw": [
-        "Render the form body, provided by form state"
+        "/**\r",
+        "     * Render the form body, provided by form state"
        ]
       },
       "typeValue": {
@@ -13238,8 +13407,9 @@
       "name": "getMetadata",
       "comment": {
        "raw": [
-        "Returns form metadata - information used to validate the form.",
-        " @param state Metadata can depend on state, and will be re-computed on updates"
+        "/**\r",
+        "     * Returns form metadata - information used to validate the form.\r",
+        "     * @param state Metadata can depend on state, and will be re-computed on updates"
        ]
       },
       "typeValue": {
@@ -13255,10 +13425,11 @@
       "name": "onSave",
       "comment": {
        "raw": [
-        "Occurs when 'save' function is called on Form.",
-        " Should save form data (usually with API call to server).",
-        " Server can also reject form, and provide validation errors in response.",
-        " @param state Form state to save"
+        "/**\r",
+        "     * Occurs when 'save' function is called on Form.\r",
+        "     * Should save form data (usually with API call to server).\r",
+        "     * Server can also reject form, and provide validation errors in response.\r",
+        "     * @param state Form state to save"
        ]
       },
       "typeValue": {
@@ -13274,10 +13445,11 @@
       "name": "beforeLeave",
       "comment": {
        "raw": [
-        "Called when form is unmounted, but user still have unsaved changes.",
-        " Accepts a Promise<boolean> to be returned. If promise resolves to true - save procedure is performed.",
-        " The common use-case is to show a modal with \"Save Changes?\" dialog",
-        " Skins usually implement this as default behavior. To prevent it, you can pass null to this prop to override it."
+        "/**\r",
+        "     * Called when form is unmounted, but user still have unsaved changes.\r",
+        "     * Accepts a Promise<boolean> to be returned. If promise resolves to true - save procedure is performed.\r",
+        "     * The common use-case is to show a modal with \"Save Changes?\" dialog\r",
+        "     * Skins usually implement this as default behavior. To prevent it, you can pass null to this prop to override it."
        ]
       },
       "typeValue": {
@@ -13293,10 +13465,11 @@
       "name": "loadUnsavedChanges",
       "comment": {
        "raw": [
-        "Used to restore unsaved user edits from the last session (usually to localstorage, via uuiUserSettings context)",
-        " If unsaved changes are detected, this callback is called. If it is resolved - the form restores unsaved edits.",
-        " The common use-case is to show a modal with \"You have unsaved changes, restore them?\" dialog",
-        " Skins usually implement this as default behavior. To prevent it, you can pass null to this prop to override it."
+        "/**\r",
+        "     * Used to restore unsaved user edits from the last session (usually to localstorage, via uuiUserSettings context)\r",
+        "     * If unsaved changes are detected, this callback is called. If it is resolved - the form restores unsaved edits.\r",
+        "     * The common use-case is to show a modal with \"You have unsaved changes, restore them?\" dialog\r",
+        "     * Skins usually implement this as default behavior. To prevent it, you can pass null to this prop to override it."
        ]
       },
       "typeValue": {
@@ -13312,9 +13485,10 @@
       "name": "onSuccess",
       "comment": {
        "raw": [
-        "Called after successful save.",
-        " @param state Saved state",
-        " @param isSavedBeforeLeave true, if save is triggered via leaving the page, and \"Save Changes?\" dialog"
+        "/**\r",
+        "     * Called after successful save.\r",
+        "     * @param state Saved state\r",
+        "     * @param isSavedBeforeLeave true, if save is triggered via leaving the page, and \"Save Changes?\" dialog"
        ]
       },
       "typeValue": {
@@ -13346,7 +13520,8 @@
       "name": "settingsKey",
       "comment": {
        "raw": [
-        "The key, under which form save unsaved state usually to localstorage, via uuiUserSettings context)"
+        "/**\r",
+        "     * The key, under which form save unsaved state usually to localstorage, via uuiUserSettings context)"
        ]
       },
       "typeValue": {
@@ -13362,9 +13537,10 @@
       "name": "validationOn",
       "comment": {
        "raw": [
-        "Controls when form validation occurs:",
-        " save (default, recommended) - form is validated on save. If form is invalid - it will be revalidated on every change, until become valid",
-        " change - form is validated on every user change. Only fields changes in current edit session are validated"
+        "/**\r",
+        "     * Controls when form validation occurs:\r",
+        "     * save (default, recommended) - form is validated on save. If form is invalid - it will be revalidated on every change, until become valid\r",
+        "     * change - form is validated on every user change. Only fields changes in current edit session are validated"
        ]
       },
       "typeValue": {
@@ -13552,8 +13728,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -13595,8 +13772,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -13754,11 +13932,11 @@
       "name": "status",
       "comment": {
        "raw": [
-        "Current status of api service.",
-        " idle - service do nothing and ready to process new requests",
-        " running - service is currently processing requests",
-        " error - service received an error and stop processing requests, due to this error will be discarded",
-        " recovery - service trying to restore connection and recover latest requests"
+        "/** Current status of api service.\r",
+        "     * idle - service do nothing and ready to process new requests\r",
+        "     * running - service is currently processing requests\r",
+        "     * error - service received an error and stop processing requests, due to this error will be discarded\r",
+        "     * recovery - service trying to restore connection and recover latest requests"
        ]
       },
       "typeValue": {
@@ -13969,9 +14147,10 @@
     "src": "uui-core/src/types/pickers.ts",
     "comment": {
      "raw": [
-      "Component can be used as Toggler control for pickers.",
-      " This interface is enough for basic pickers.",
-      " Picker togglers with search or advanced selection display should implement IPickerToggler interface"
+      "/**\r",
+      " * Component can be used as Toggler control for pickers.\r",
+      " * This interface is enough for basic pickers.\r",
+      " * Picker togglers with search or advanced selection display should implement IPickerToggler interface"
      ]
     },
     "exported": true
@@ -14799,8 +14978,9 @@
       "name": "order",
       "comment": {
        "raw": [
-        "Determines the order in which this column should appear in the table.",
-        " The columns are sorted in ascending alphabetical order."
+        "/**\r",
+        "     * Determines the order in which this column should appear in the table.\r",
+        "     * The columns are sorted in ascending alphabetical order."
        ]
       },
       "typeValue": {
@@ -14920,9 +15100,9 @@
       "name": "apiDefinition",
       "comment": {
        "raw": [
-        "Function to get the api definitions.",
-        " Usually, api definitions this is an object which contain object with all api requests of the app.",
-        " Then you can call this requests via 'uuiContext.api.myApi(myData)'"
+        "/** Function to get the api definitions.\r",
+        "     * Usually, api definitions this is an object which contain object with all api requests of the app.\r",
+        "     * Then you can call this requests via 'uuiContext.api.myApi(myData)'"
        ]
       },
       "typeValue": {
@@ -14939,9 +15119,9 @@
       "name": "apiReloginPath",
       "comment": {
        "raw": [
-        "Url to the relogin page. Used to open new browser window by this path, in case of auth lost error.",
-        " Opened by this path page, should process authentication and then post 'authSuccess' cross-window message to the opener, to recover failed requests.",
-        " @default '/auth/login'"
+        "/** Url to the relogin page. Used to open new browser window by this path, in case of auth lost error.\r",
+        "     * Opened by this path page, should process authentication and then post 'authSuccess' cross-window message to the opener, to recover failed requests.\r",
+        "     * @default '/auth/login'"
        ],
        "tags": {
         "@default": "/auth/login"
@@ -14961,8 +15141,8 @@
       "name": "apiPingPath",
       "comment": {
        "raw": [
-        "Url to the api, which ApiContext will start pinging in case of 'connection lost', until it gets 200 status. Then it will retry failed requests.",
-        " @default '/auth/ping'"
+        "/** Url to the api, which ApiContext will start pinging in case of 'connection lost', until it gets 200 status. Then it will retry failed requests.\r",
+        "     * @default '/auth/ping'"
        ],
        "tags": {
         "@default": "/auth/ping"
@@ -14982,8 +15162,8 @@
       "name": "apiServerUrl",
       "comment": {
        "raw": [
-        "Url to the server api under which all requests will be processed. Usefully for cases, when all api located by some specific url, which is not much app url.",
-        " @default ''"
+        "/** Url to the server api under which all requests will be processed. Usefully for cases, when all api located by some specific url, which is not much app url.\r",
+        "     * @default ''"
        ],
        "tags": {
         "@default": ""
@@ -15325,8 +15505,8 @@
       "name": "srcData",
       "comment": {
        "raw": [
-        "Data used when this component acts as a drag source.",
-        " If provided, it means this component can be dragged. Can be used in combination with dstData."
+        "/** Data used when this component acts as a drag source.\r",
+        "     * If provided, it means this component can be dragged. Can be used in combination with dstData."
        ]
       },
       "typeValue": {
@@ -15339,8 +15519,8 @@
       "name": "dstData",
       "comment": {
        "raw": [
-        "Data used when this component acts as a drop destination.",
-        " If provided, it means something can be dragged onto this component. Can be used in combination with srcData."
+        "/** Data used when this component acts as a drop destination.\r",
+        "     * If provided, it means something can be dragged onto this component. Can be used in combination with srcData."
        ]
       },
       "typeValue": {
@@ -16007,7 +16187,8 @@
     "src": "uui-core/src/helpers/IEditableDebouncer.ts",
     "comment": {
      "raw": [
-      "IEditableDebouncer component options."
+      "/**\r",
+      " * IEditableDebouncer component options."
      ]
     },
     "exported": true
@@ -16075,7 +16256,8 @@
     "src": "uui-core/src/helpers/IEditableDebouncer.ts",
     "comment": {
      "raw": [
-      "IEditableDebouncer component props."
+      "/**\r",
+      " * IEditableDebouncer component props."
      ]
     },
     "exported": true
@@ -16102,7 +16284,8 @@
       "name": "render",
       "comment": {
        "raw": [
-        "Render wrapped component."
+        "/**\r",
+        "     * Render wrapped component."
        ]
       },
       "typeValue": {
@@ -16280,8 +16463,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -16492,8 +16676,9 @@
       "name": "order",
       "comment": {
        "raw": [
-        "Determines the order in which this filter should appear in the filters list.",
-        " The filters are sorted in ascending alphabetical order."
+        "/**\r",
+        "     * Determines the order in which this filter should appear in the filters list.\r",
+        "     * The filters are sorted in ascending alphabetical order."
        ]
       },
       "typeValue": {
@@ -16566,8 +16751,9 @@
       "name": "columnKey",
       "comment": {
        "raw": [
-        "Key of the column to which the filter is attached.",
-        " If omitted, filter won't be attached to the column."
+        "/**\r",
+        "     * Key of the column to which the filter is attached.\r",
+        "     * If omitted, filter won't be attached to the column."
        ]
       },
       "typeValue": {
@@ -16646,7 +16832,7 @@
       "name": "getName",
       "comment": {
        "raw": [
-        "A pure function that gets entity name from entity object.",
+        "/** A pure function that gets entity name from entity object.\r",
         "     Default: (item) => item.name."
        ]
       },
@@ -16702,8 +16888,9 @@
       "name": "showSearch",
       "comment": {
        "raw": [
-        "Pass false to hide search in picker body.",
-        " If omitted, true value will be used."
+        "/**\r",
+        "     * Pass false to hide search in picker body.\r",
+        "     * If omitted, true value will be used."
        ]
       },
       "typeValue": {
@@ -17198,13 +17385,13 @@
       "name": "predicate",
       "comment": {
        "raw": [
-        "Predicate key, which wraps filter value.",
-        "  E.g. your have 'in' predicate for locationIds filter, the resulted filter object will be:",
-        "  filter: {",
-        "      locationIds: {",
-        "          in: [/selected location ids/]",
-        "      }",
-        "  }"
+        "/** Predicate key, which wraps filter value.\r",
+        "     *  E.g. your have 'in' predicate for locationIds filter, the resulted filter object will be:\r",
+        "     *  filter: {\r",
+        "     *      locationIds: {\r",
+        "     *          in: [/selected location ids/]\r",
+        "     *      }\r",
+        "     *  }"
        ]
       },
       "typeValue": {
@@ -17324,7 +17511,8 @@
       "name": "lens",
       "comment": {
        "raw": [
-        "Lens - a helper to split parts of the form state, validation, and setState callbacks, and pass this to components"
+        "/**\r",
+        "     * Lens - a helper to split parts of the form state, validation, and setState callbacks, and pass this to components"
        ]
       },
       "typeValue": {
@@ -17337,8 +17525,9 @@
       "name": "setValue",
       "comment": {
        "raw": [
-        "Sets form value. The signature is the same for setState in React.useState - either new value, or callback to update the value.",
-        " The change is threated as user input - sets isChanged and creates undo endpoint"
+        "/**\r",
+        "     * Sets form value. The signature is the same for setState in React.useState - either new value, or callback to update the value.\r",
+        "     * The change is threated as user input - sets isChanged and creates undo endpoint"
        ]
       },
       "typeValue": {
@@ -17354,8 +17543,9 @@
       "name": "replaceValue",
       "comment": {
        "raw": [
-        "Replaces form value. The signature is the same for setState in React.useState - either new value, or callback to update the value.",
-        " The change is not threated as user input - it replaces last changed state, and doesn't create undo checkpoint."
+        "/**\r",
+        "     * Replaces form value. The signature is the same for setState in React.useState - either new value, or callback to update the value.\r",
+        "     * The change is not threated as user input - it replaces last changed state, and doesn't create undo checkpoint."
        ]
       },
       "typeValue": {
@@ -17371,7 +17561,8 @@
       "name": "save",
       "comment": {
        "raw": [
-        "Triggers save procedure - validation, calling props.onSave, and processing results"
+        "/**\r",
+        "     * Triggers save procedure - validation, calling props.onSave, and processing results"
        ]
       },
       "typeValue": {
@@ -17387,7 +17578,8 @@
       "name": "undo",
       "comment": {
        "raw": [
-        "Undo to last checkpoint"
+        "/**\r",
+        "     * Undo to last checkpoint"
        ]
       },
       "typeValue": {
@@ -17403,7 +17595,8 @@
       "name": "redo",
       "comment": {
        "raw": [
-        "Redo last action"
+        "/**\r",
+        "     * Redo last action"
        ]
       },
       "typeValue": {
@@ -17419,7 +17612,8 @@
       "name": "revert",
       "comment": {
        "raw": [
-        "Reverts all changes up to the initial or last saved state"
+        "/**\r",
+        "     * Reverts all changes up to the initial or last saved state"
        ]
       },
       "typeValue": {
@@ -17435,7 +17629,8 @@
       "name": "close",
       "comment": {
        "raw": [
-        "Try to leave form and ask to save unsaved changes"
+        "/**\r",
+        "     * Try to leave form and ask to save unsaved changes"
        ]
       },
       "typeValue": {
@@ -17451,9 +17646,10 @@
       "name": "validate",
       "comment": {
        "raw": [
-        "Forces form to validate value.",
-        " Validation is usually done automatically, according to validationOn prop.",
-        " Use this method only in corner cases."
+        "/**\r",
+        "     * Forces form to validate value.\r",
+        "     * Validation is usually done automatically, according to validationOn prop.\r",
+        "     * Use this method only in corner cases."
        ]
       },
       "typeValue": {
@@ -17777,12 +17973,13 @@
     "src": "uui-core/src/types/props.ts",
     "comment": {
      "raw": [
-      "Component can accept cx property, allowing to pass classes to put on component.",
-      " CX is a shortcut for 'classnames'.",
-      " The props accept string, arrays, object, recursively. All falsy values are thrown away. Examples:",
-      " - 'red' => 'red'",
-      " - ['red', 0, false, 'blue' ] => 'red blue'",
-      " - { 'red': true, 'blue': false, ['green', 'white']} => 'red green white'"
+      "/**\r",
+      " * Component can accept cx property, allowing to pass classes to put on component.\r",
+      " * CX is a shortcut for 'classnames'.\r",
+      " * The props accept string, arrays, object, recursively. All falsy values are thrown away. Examples:\r",
+      " * - 'red' => 'red'\r",
+      " * - ['red', 0, false, 'blue' ] => 'red blue'\r",
+      " * - { 'red': true, 'blue': false, ['green', 'white']} => 'red green white'"
      ]
     },
     "exported": true
@@ -18375,9 +18572,10 @@
       "name": "getPortalRoot",
       "comment": {
        "raw": [
-        "Returns portal root node.",
-        " In simple cases it will be node with 'main' or 'root' id or document.body.",
-        " Or it will return node with portalRootId."
+        "/**\r",
+        "     * Returns portal root node.\r",
+        "     * In simple cases it will be node with 'main' or 'root' id or document.body.\r",
+        "     * Or it will return node with portalRootId."
        ]
       },
       "typeValue": {
@@ -18393,8 +18591,9 @@
       "name": "getPortalRootId",
       "comment": {
        "raw": [
-        "Returns unique id, which can be used as id for portal root.",
-        " Usually used for cases with shadow DOM, to be able to find this portal root element if it's located under shadow DOM"
+        "/**\r",
+        "     * Returns unique id, which can be used as id for portal root.\r",
+        "     * Usually used for cases with shadow DOM, to be able to find this portal root element if it's located under shadow DOM"
        ]
       },
       "typeValue": {
@@ -18487,8 +18686,8 @@
       "name": "update",
       "comment": {
        "raw": [
-        "Updates lens value with returned value from provided callback.",
-        "  This callback received current lens value as a param"
+        "/** Updates lens value with returned value from provided callback.\r",
+        "     *  This callback received current lens value as a param"
        ]
       },
       "typeValue": {
@@ -18536,8 +18735,8 @@
       "name": "onChange",
       "comment": {
        "raw": [
-        "Add to the lens a setter callback, which received old and new value and should return new value for set.",
-        " This callback will be called on any lens update"
+        "/** Add to the lens a setter callback, which received old and new value and should return new value for set.\r",
+        "     * This callback will be called on any lens update"
        ]
       },
       "typeValue": {
@@ -18569,7 +18768,7 @@
       "name": "toProps",
       "comment": {
        "raw": [
-        "Return IEditable interface, which accepted by UUI form components.",
+        "/** Return IEditable interface, which accepted by UUI form components.\r",
         " Usually you just need to spread it to the component, e.g. { ...lens.prop('name').toProps() }"
        ]
       },
@@ -18621,8 +18820,9 @@
       "name": "acquire",
       "comment": {
        "raw": [
-        "Tries to take a lock, and sets tryRelease callback, which will be invoked when something tries to take control over.",
-        " If a lock already exists, it tries to release the current lock and then set a new one"
+        "/**\r",
+        "     * Tries to take a lock, and sets tryRelease callback, which will be invoked when something tries to take control over.\r",
+        "     * If a lock already exists, it tries to release the current lock and then set a new one"
        ]
       },
       "typeValue": {
@@ -19346,9 +19546,10 @@
     "src": "uui-core/src/types/pickers.ts",
     "comment": {
      "raw": [
-      "Component can be used as Toggler control for pickers.",
-      " Only IDropdownToggler implementation is necessary for the picker to function.",
-      " Other props can be implemented for full-featured picker togglers."
+      "/**\r",
+      " * Component can be used as Toggler control for pickers.\r",
+      " * Only IDropdownToggler implementation is necessary for the picker to function.\r",
+      " * Other props can be implemented for full-featured picker togglers."
      ]
     },
     "exported": true
@@ -19892,12 +20093,13 @@
     "src": "uui-core/src/services/routing/interfaces/IRouter6.ts",
     "comment": {
      "raw": [
-      "From: react-router version 6.14.0",
-      "",
-      " The type definition of the IRouter6 is not complete (It's OK as long as we only use a subset of its API)",
-      "",
-      " NOTE: Complete definitions of the router is located in @remix-run/router:",
-      " https://github.com/remix-run/react-router/blob/main/packages/router/router.ts#L57"
+      "/**\r",
+      " * From: react-router version 6.14.0\r",
+      " *\r",
+      " * The type definition of the IRouter6 is not complete (It's OK as long as we only use a subset of its API)\r",
+      " *\r",
+      " * NOTE: Complete definitions of the router is located in @remix-run/router:\r",
+      " * https://github.com/remix-run/react-router/blob/main/packages/router/router.ts#L57"
      ]
     },
     "exported": true
@@ -20133,8 +20335,9 @@
       "name": "block",
       "comment": {
        "raw": [
-        "Blocks router changes. Can be used to show confirmation dialogs before the redirect.",
-        " If block callback provide, all router changes will be blocked, you need to unblock and to retry them by yourself."
+        "/**\r",
+        "     * Blocks router changes. Can be used to show confirmation dialogs before the redirect.\r",
+        "     * If block callback provide, all router changes will be blocked, you need to unblock and to retry them by yourself."
        ]
       },
       "typeValue": {
@@ -20243,8 +20446,9 @@
       "name": "order",
       "comment": {
        "raw": [
-        "Determines the order in which this preset should appear in the presets list.",
-        " The columns are sorted in ascending alphabetical order."
+        "/**\r",
+        "     * Determines the order in which this preset should appear in the presets list.\r",
+        "     * The columns are sorted in ascending alphabetical order."
        ]
       },
       "typeValue": {
@@ -21109,8 +21313,8 @@
       "name": "htmlFor",
       "comment": {
        "raw": [
-        "HTML 'for' tag to bind the label to a component.",
-        " Can be used when component can't be wrapped by the LabeledInput, e.g. when form is layed out as table with labels and inputs placed into different columns"
+        "/** HTML 'for' tag to bind the label to a component.\r",
+        "     * Can be used when component can't be wrapped by the LabeledInput, e.g. when form is layed out as table with labels and inputs placed into different columns"
        ]
       },
       "typeValue": {
@@ -21489,8 +21693,9 @@
       "name": "filter",
       "comment": {
        "raw": [
-        "The filter object, by which data should be filtered.",
-        " It is a merged result of filters from DataSourceState and LazyDataSourceProps."
+        "/**\r",
+        "     * The filter object, by which data should be filtered.\r",
+        "     * It is a merged result of filters from DataSourceState and LazyDataSourceProps."
        ]
       },
       "typeValue": {
@@ -21577,9 +21782,10 @@
       "name": "ids",
       "comment": {
        "raw": [
-        "An array of item IDs to be retrieved from the API.",
-        " Other request options like filter, search and others should be ignored when IDs are provided.",
-        " Used for requesting specific items separately from the list."
+        "/**\r",
+        "     * An array of item IDs to be retrieved from the API.\r",
+        "     * Other request options like filter, search and others should be ignored when IDs are provided.\r",
+        "     * Used for requesting specific items separately from the list."
        ]
       },
       "typeValue": {
@@ -21629,8 +21835,9 @@
       "name": "parentId",
       "comment": {
        "raw": [
-        "The ID of the parent item whose children are being requested.",
-        " Used for lazy-loading data in tree lists."
+        "/**\r",
+        "     * The ID of the parent item whose children are being requested.\r",
+        "     * Used for lazy-loading data in tree lists."
        ]
       },
       "typeValue": {
@@ -21782,8 +21989,9 @@
       "name": "from",
       "comment": {
        "raw": [
-        "API can set 'from' field if it wants to return more items than what was requested in request.range.",
-        " This can be used to return all items at once (with from:0, count: totalCount), or align response to pages."
+        "/**\r",
+        "     * API can set 'from' field if it wants to return more items than what was requested in request.range.\r",
+        "     * This can be used to return all items at once (with from:0, count: totalCount), or align response to pages."
        ]
       },
       "typeValue": {
@@ -21799,8 +22007,9 @@
       "name": "count",
       "comment": {
        "raw": [
-        "Total count of items which match current filter and pagination.",
-        " If not specified, total count will be detected only when user scrolls to the end of the list."
+        "/**\r",
+        "     * Total count of items which match current filter and pagination.\r",
+        "     * If not specified, total count will be detected only when user scrolls to the end of the list."
        ]
       },
       "typeValue": {
@@ -21816,7 +22025,8 @@
       "name": "totalCount",
       "comment": {
        "raw": [
-        "Total count of items which match current filter."
+        "/**\r",
+        "     * Total count of items which match current filter."
        ]
       },
       "typeValue": {
@@ -21856,13 +22066,14 @@
       "name": "api",
       "comment": {
        "raw": [
-        "A function to retrieve the data, asynchronously.",
-        " This function usually performs a REST API call.",
-        " API is used to retrieve lists of items.",
-        " It is expected to:",
-        " - be able to handle paging (via from/count params)",
-        " - be able to retrieve specific items by the list of their ids",
-        " - be able to retrieve children by parents (when getChildCount is specified, and ctx.parentId is passed)"
+        "/**\r",
+        "     * A function to retrieve the data, asynchronously.\r",
+        "     * This function usually performs a REST API call.\r",
+        "     * API is used to retrieve lists of items.\r",
+        "     * It is expected to:\r",
+        "     * - be able to handle paging (via from/count params)\r",
+        "     * - be able to retrieve specific items by the list of their ids\r",
+        "     * - be able to retrieve children by parents (when getChildCount is specified, and ctx.parentId is passed)"
        ]
       },
       "typeValue": {
@@ -21880,13 +22091,14 @@
       "name": "getChildCount",
       "comment": {
        "raw": [
-        "Should return number of children of the item.",
-        " If it returns > 0, the item is assumed to have children and to be foldable.",
-        " Usually, this value should be returned from API, as a field of a parent, e.g. { id: 1, name: 'London', childCount: 12 }.",
-        " In this case, you can implement getChildCount as (i) => i.childCount.",
-        "",
-        " If you can't get number of children via API, you can return a guess value (avg number of children for this type of entity).",
-        " Note, that this can lead to more API calls, and increased load times in the 'parallel' fetch mode."
+        "/**\r",
+        "     * Should return number of children of the item.\r",
+        "     * If it returns > 0, the item is assumed to have children and to be foldable.\r",
+        "     * Usually, this value should be returned from API, as a field of a parent, e.g. { id: 1, name: 'London', childCount: 12 }.\r",
+        "     * In this case, you can implement getChildCount as (i) => i.childCount.\r",
+        "     *\r",
+        "     * If you can't get number of children via API, you can return a guess value (avg number of children for this type of entity).\r",
+        "     * Note, that this can lead to more API calls, and increased load times in the 'parallel' fetch mode."
        ]
       },
       "typeValue": {
@@ -21903,10 +22115,11 @@
       "name": "filter",
       "comment": {
        "raw": [
-        "A filter to pass to API.",
-        " Note, that the DataSourceState also has a filter fields. These two filters are merged before API calls.",
-        " Use this prop if you need to apply some filter in any case.",
-        " Prefer to use filter in the DataSourceState for end-user editable filters."
+        "/**\r",
+        "     * A filter to pass to API.\r",
+        "     * Note, that the DataSourceState also has a filter fields. These two filters are merged before API calls.\r",
+        "     * Use this prop if you need to apply some filter in any case.\r",
+        "     * Prefer to use filter in the DataSourceState for end-user editable filters."
        ]
       },
       "typeValue": {
@@ -21920,10 +22133,11 @@
       "name": "fetchStrategy",
       "comment": {
        "raw": [
-        "Defines how to fetch children:",
-        " sequential (default) - fetch children for each parent one-by-one. Makes minimal over-querying, at cost of some speed.",
-        " parallel - fetch children for several parents simultaneously. Can make a lot of over-querying for deep trees.",
-        "      Recommended for 2 level trees (grouping), as it makes no over-querying in this case, and is faster than sequential strategy."
+        "/**\r",
+        "     * Defines how to fetch children:\r",
+        "     * sequential (default) - fetch children for each parent one-by-one. Makes minimal over-querying, at cost of some speed.\r",
+        "     * parallel - fetch children for several parents simultaneously. Can make a lot of over-querying for deep trees.\r",
+        "     *      Recommended for 2 level trees (grouping), as it makes no over-querying in this case, and is faster than sequential strategy."
        ]
       },
       "typeValue": {
@@ -21944,14 +22158,15 @@
       "name": "flattenSearchResults",
       "comment": {
        "raw": [
-        "Falls back to plain list from tree, if there's search.",
-        " Default is true.",
-        "",
-        " If enabled, and search is active:",
-        " - API will be called with parentId and parent undefined",
-        " - getChildCount is ignored, all nodes are assumed to have no children",
-        "",
-        " See more here: https://github.com/epam/UUI/issues/8"
+        "/**\r",
+        "     * Falls back to plain list from tree, if there's search.\r",
+        "     * Default is true.\r",
+        "     *\r",
+        "     * If enabled, and search is active:\r",
+        "     * - API will be called with parentId and parent undefined\r",
+        "     * - getChildCount is ignored, all nodes are assumed to have no children\r",
+        "     *\r",
+        "     * See more here: https://github.com/epam/UUI/issues/8"
        ]
       },
       "typeValue": {
@@ -21968,9 +22183,10 @@
       "name": "legacyLoadDataBehavior",
       "comment": {
        "raw": [
-        "This option is added for the purpose of supporting legacy behavior of fetching data",
-        " on `getVisibleRows` and `getListProps`, not to break users' own implementation of dataSources.",
-        " @default true"
+        "/**\r",
+        "     * This option is added for the purpose of supporting legacy behavior of fetching data\r",
+        "     * on `getVisibleRows` and `getListProps`, not to break users' own implementation of dataSources.\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -21990,9 +22206,10 @@
       "name": "getId",
       "comment": {
        "raw": [
-        "Should return unique ID of the TItem",
-        " If omitted, we assume that every TItem has and unique id in its 'id' field.",
-        " @param item An item to get ID of"
+        "/**\r",
+        "     * Should return unique ID of the TItem\r",
+        "     * If omitted, we assume that every TItem has and unique id in its 'id' field.\r",
+        "     * @param item An item to get ID of"
        ]
       },
       "typeValue": {
@@ -22009,8 +22226,9 @@
       "name": "complexIds",
       "comment": {
        "raw": [
-        "Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).",
-        " In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys."
+        "/**\r",
+        "     * Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).\r",
+        "     * In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys."
        ]
       },
       "typeValue": {
@@ -22027,14 +22245,14 @@
       "name": "getParentId",
       "comment": {
        "raw": [
-        "Should return ID of the Item's parent. Usually it's i => i.parentId.",
-        " If specified, Data Source will build items hierarchy.",
-        "",
-        " Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:",
-        " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain",
-        "   to highlight parents with selected children",
-        " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),",
-        "   We need to load parents with a separate call (if backend doesn't pre-fetch them)"
+        "/** Should return ID of the Item's parent. Usually it's i => i.parentId.\r",
+        "     * If specified, Data Source will build items hierarchy.\r",
+        "     *\r",
+        "     * Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:\r",
+        "     * - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain\r",
+        "     *   to highlight parents with selected children\r",
+        "     * - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),\r",
+        "     *   We need to load parents with a separate call (if backend doesn't pre-fetch them)"
        ]
       },
       "typeValue": {
@@ -22051,12 +22269,13 @@
       "name": "rowOptions",
       "comment": {
        "raw": [
-        "Specifies if rows are selectable, checkable, draggable, clickable, and more.",
-        " See DataRowOptions for more details.",
-        " If options depends on the item itself, use getRowOptions.",
-        " Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.",
-        " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance",
-        " @param item An item to get options for"
+        "/**\r",
+        "     * Specifies if rows are selectable, checkable, draggable, clickable, and more.\r",
+        "     * See DataRowOptions for more details.\r",
+        "     * If options depends on the item itself, use getRowOptions.\r",
+        "     * Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.\r",
+        "     * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance\r",
+        "     * @param item An item to get options for"
        ]
       },
       "typeValue": {
@@ -22070,12 +22289,13 @@
       "name": "getRowOptions",
       "comment": {
        "raw": [
-        "For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.",
-        " To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.",
-        " See DataRowOptions for more details.",
-        " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.",
-        " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance",
-        " @param item An item to get options for"
+        "/**\r",
+        "     * For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.\r",
+        "     * To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.\r",
+        "     * See DataRowOptions for more details.\r",
+        "     * If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.\r",
+        "     * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance\r",
+        "     * @param item An item to get options for"
        ]
       },
       "typeValue": {
@@ -22092,8 +22312,9 @@
       "name": "isFoldedByDefault",
       "comment": {
        "raw": [
-        "Can be specified to unfold all or some items at start.",
-        " If not specified, all rows would be folded."
+        "/**\r",
+        "     * Can be specified to unfold all or some items at start.\r",
+        "     * If not specified, all rows would be folded."
        ]
       },
       "typeValue": {
@@ -22110,14 +22331,15 @@
       "name": "cascadeSelection",
       "comment": {
        "raw": [
-        "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.",
-        " - false: All nodes are selected independently (default).",
-        " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.",
-        " - 'implicit': Selecting a parent node means that all children are considered checked.",
-        "   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked",
-        "   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,",
-        "   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last",
-        "   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
+        "/**\r",
+        "     * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.\r",
+        "     * - false: All nodes are selected independently (default).\r",
+        "     * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.\r",
+        "     * - 'implicit': Selecting a parent node means that all children are considered checked.\r",
+        "     *   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked\r",
+        "     *   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,\r",
+        "     *   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last\r",
+        "     *   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
        ]
       },
       "typeValue": {
@@ -22140,7 +22362,8 @@
       "name": "selectAll",
       "comment": {
        "raw": [
-        "Enables or disables \"select all\" checkbox. Default is true."
+        "/**\r",
+        "     * Enables or disables \"select all\" checkbox. Default is true."
        ]
       },
       "typeValue": {
@@ -22157,11 +22380,12 @@
       "name": "backgroundReload",
       "comment": {
        "raw": [
-        "Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.",
-        " During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.",
-        " In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.",
-        " It is required to add blockers/spinners to the components, built on your own.",
-        " If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`."
+        "/**\r",
+        "     * Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.\r",
+        "     * During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.\r",
+        "     * In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.\r",
+        "     * It is required to add blockers/spinners to the components, built on your own.\r",
+        "     * If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`."
        ]
       },
       "typeValue": {
@@ -22253,13 +22477,14 @@
       "name": "api",
       "comment": {
        "raw": [
-        "A function to retrieve the data, asynchronously.",
-        " This function usually performs a REST API call.",
-        " API is used to retrieve lists of items.",
-        " It is expected to:",
-        " - be able to handle paging (via from/count params)",
-        " - be able to retrieve specific items by the list of their ids",
-        " - be able to retrieve children by parents (when getChildCount is specified, and ctx.parentId is passed)"
+        "/**\r",
+        "     * A function to retrieve the data, asynchronously.\r",
+        "     * This function usually performs a REST API call.\r",
+        "     * API is used to retrieve lists of items.\r",
+        "     * It is expected to:\r",
+        "     * - be able to handle paging (via from/count params)\r",
+        "     * - be able to retrieve specific items by the list of their ids\r",
+        "     * - be able to retrieve children by parents (when getChildCount is specified, and ctx.parentId is passed)"
        ]
       },
       "typeValue": {
@@ -22276,13 +22501,14 @@
       "name": "getChildCount",
       "comment": {
        "raw": [
-        "Should return number of children of the item.",
-        " If it returns > 0, the item is assumed to have children and to be foldable.",
-        " Usually, this value should be returned from API, as a field of a parent, e.g. { id: 1, name: 'London', childCount: 12 }.",
-        " In this case, you can implement getChildCount as (i) => i.childCount.",
-        "",
-        " If you can't get number of children via API, you can return a guess value (avg number of children for this type of entity).",
-        " Note, that this can lead to more API calls, and increased load times in the 'parallel' fetch mode."
+        "/**\r",
+        "     * Should return number of children of the item.\r",
+        "     * If it returns > 0, the item is assumed to have children and to be foldable.\r",
+        "     * Usually, this value should be returned from API, as a field of a parent, e.g. { id: 1, name: 'London', childCount: 12 }.\r",
+        "     * In this case, you can implement getChildCount as (i) => i.childCount.\r",
+        "     *\r",
+        "     * If you can't get number of children via API, you can return a guess value (avg number of children for this type of entity).\r",
+        "     * Note, that this can lead to more API calls, and increased load times in the 'parallel' fetch mode."
        ]
       },
       "typeValue": {
@@ -22298,10 +22524,11 @@
       "name": "filter",
       "comment": {
        "raw": [
-        "A filter to pass to API.",
-        " Note, that the DataSourceState also has a filter fields. These two filters are merged before API calls.",
-        " Use this prop if you need to apply some filter in any case.",
-        " Prefer to use filter in the DataSourceState for end-user editable filters."
+        "/**\r",
+        "     * A filter to pass to API.\r",
+        "     * Note, that the DataSourceState also has a filter fields. These two filters are merged before API calls.\r",
+        "     * Use this prop if you need to apply some filter in any case.\r",
+        "     * Prefer to use filter in the DataSourceState for end-user editable filters."
        ]
       },
       "typeValue": {
@@ -22314,10 +22541,11 @@
       "name": "fetchStrategy",
       "comment": {
        "raw": [
-        "Defines how to fetch children:",
-        " sequential (default) - fetch children for each parent one-by-one. Makes minimal over-querying, at cost of some speed.",
-        " parallel - fetch children for several parents simultaneously. Can make a lot of over-querying for deep trees.",
-        "      Recommended for 2 level trees (grouping), as it makes no over-querying in this case, and is faster than sequential strategy."
+        "/**\r",
+        "     * Defines how to fetch children:\r",
+        "     * sequential (default) - fetch children for each parent one-by-one. Makes minimal over-querying, at cost of some speed.\r",
+        "     * parallel - fetch children for several parents simultaneously. Can make a lot of over-querying for deep trees.\r",
+        "     *      Recommended for 2 level trees (grouping), as it makes no over-querying in this case, and is faster than sequential strategy."
        ]
       },
       "typeValue": {
@@ -22337,14 +22565,15 @@
       "name": "flattenSearchResults",
       "comment": {
        "raw": [
-        "Falls back to plain list from tree, if there's search.",
-        " Default is true.",
-        "",
-        " If enabled, and search is active:",
-        " - API will be called with parentId and parent undefined",
-        " - getChildCount is ignored, all nodes are assumed to have no children",
-        "",
-        " See more here: https://github.com/epam/UUI/issues/8"
+        "/**\r",
+        "     * Falls back to plain list from tree, if there's search.\r",
+        "     * Default is true.\r",
+        "     *\r",
+        "     * If enabled, and search is active:\r",
+        "     * - API will be called with parentId and parent undefined\r",
+        "     * - getChildCount is ignored, all nodes are assumed to have no children\r",
+        "     *\r",
+        "     * See more here: https://github.com/epam/UUI/issues/8"
        ]
       },
       "typeValue": {
@@ -22360,9 +22589,10 @@
       "name": "legacyLoadDataBehavior",
       "comment": {
        "raw": [
-        "This option is added for the purpose of supporting legacy behavior of fetching data",
-        " on `getVisibleRows` and `getListProps`, not to break users' own implementation of dataSources.",
-        " @default true"
+        "/**\r",
+        "     * This option is added for the purpose of supporting legacy behavior of fetching data\r",
+        "     * on `getVisibleRows` and `getListProps`, not to break users' own implementation of dataSources.\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -22381,9 +22611,10 @@
       "name": "getId",
       "comment": {
        "raw": [
-        "Should return unique ID of the TItem",
-        " If omitted, we assume that every TItem has and unique id in its 'id' field.",
-        " @param item An item to get ID of"
+        "/**\r",
+        "     * Should return unique ID of the TItem\r",
+        "     * If omitted, we assume that every TItem has and unique id in its 'id' field.\r",
+        "     * @param item An item to get ID of"
        ]
       },
       "typeValue": {
@@ -22400,8 +22631,9 @@
       "name": "complexIds",
       "comment": {
        "raw": [
-        "Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).",
-        " In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys."
+        "/**\r",
+        "     * Set to true, if you use IDs which can't act as javascript Map key (objects or arrays).\r",
+        "     * In this case, IDs will be internally JSON.stringify-ed to be used as Maps keys."
        ]
       },
       "typeValue": {
@@ -22418,14 +22650,14 @@
       "name": "getParentId",
       "comment": {
        "raw": [
-        "Should return ID of the Item's parent. Usually it's i => i.parentId.",
-        " If specified, Data Source will build items hierarchy.",
-        "",
-        " Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:",
-        " - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain",
-        "   to highlight parents with selected children",
-        " - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),",
-        "   We need to load parents with a separate call (if backend doesn't pre-fetch them)"
+        "/** Should return ID of the Item's parent. Usually it's i => i.parentId.\r",
+        "     * If specified, Data Source will build items hierarchy.\r",
+        "     *\r",
+        "     * Also, it is used by LazyDataSource to pre-fetch missing parents of loaded items. This is required in following cases:\r",
+        "     * - when a child item is pre-selected, but not yet loaded at start. We need to load it's parent chain\r",
+        "     *   to highlight parents with selected children\r",
+        "     * - in flattenSearch mode, we usually want to display a path to each item (e.g. Canada/Ontario/Paris),\r",
+        "     *   We need to load parents with a separate call (if backend doesn't pre-fetch them)"
        ]
       },
       "typeValue": {
@@ -22442,12 +22674,13 @@
       "name": "rowOptions",
       "comment": {
        "raw": [
-        "Specifies if rows are selectable, checkable, draggable, clickable, and more.",
-        " See DataRowOptions for more details.",
-        " If options depends on the item itself, use getRowOptions.",
-        " Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.",
-        " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance",
-        " @param item An item to get options for"
+        "/**\r",
+        "     * Specifies if rows are selectable, checkable, draggable, clickable, and more.\r",
+        "     * See DataRowOptions for more details.\r",
+        "     * If options depends on the item itself, use getRowOptions.\r",
+        "     * Specifying both rowOptions and getRowOptions might help to render better loading skeletons: we use only rowOptions in this case, as we haven't loaded an item yet.\r",
+        "     * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance\r",
+        "     * @param item An item to get options for"
        ]
       },
       "typeValue": {
@@ -22461,12 +22694,13 @@
       "name": "getRowOptions",
       "comment": {
        "raw": [
-        "For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.",
-        " To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.",
-        " See DataRowOptions for more details.",
-        " If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.",
-        " Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance",
-        " @param item An item to get options for"
+        "/**\r",
+        "     * For each row, specify if row is selectable, editable, checkable, draggable, clickable, have its own set of columns, and more.\r",
+        "     * To make rows editable, pass IEditable interface to each row. This works the same way as for other editable components.\r",
+        "     * See DataRowOptions for more details.\r",
+        "     * If both getRowOptions and rowOptions specified, we'll use getRowOptions for loaded rows, and rowOptions only for loading rows.\r",
+        "     * Make sure all callbacks are properly memoized, as changing them will trigger re-renders or row, which would impact performance\r",
+        "     * @param item An item to get options for"
        ]
       },
       "typeValue": {
@@ -22483,8 +22717,9 @@
       "name": "isFoldedByDefault",
       "comment": {
        "raw": [
-        "Can be specified to unfold all or some items at start.",
-        " If not specified, all rows would be folded."
+        "/**\r",
+        "     * Can be specified to unfold all or some items at start.\r",
+        "     * If not specified, all rows would be folded."
        ]
       },
       "typeValue": {
@@ -22501,14 +22736,15 @@
       "name": "cascadeSelection",
       "comment": {
        "raw": [
-        "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.",
-        " - false: All nodes are selected independently (default).",
-        " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.",
-        " - 'implicit': Selecting a parent node means that all children are considered checked.",
-        "   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked",
-        "   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,",
-        "   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last",
-        "   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
+        "/**\r",
+        "     * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.\r",
+        "     * - false: All nodes are selected independently (default).\r",
+        "     * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.\r",
+        "     * - 'implicit': Selecting a parent node means that all children are considered checked.\r",
+        "     *   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked\r",
+        "     *   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,\r",
+        "     *   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last\r",
+        "     *   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
        ]
       },
       "typeValue": {
@@ -22531,7 +22767,8 @@
       "name": "selectAll",
       "comment": {
        "raw": [
-        "Enables or disables \"select all\" checkbox. Default is true."
+        "/**\r",
+        "     * Enables or disables \"select all\" checkbox. Default is true."
        ]
       },
       "typeValue": {
@@ -22548,11 +22785,12 @@
       "name": "backgroundReload",
       "comment": {
        "raw": [
-        "Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.",
-        " During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.",
-        " In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.",
-        " It is required to add blockers/spinners to the components, built on your own.",
-        " If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`."
+        "/**\r",
+        "     * Enables background reloading of data on search/sort/filter/reload, which turns off the rows placeholders displaying while data loading.\r",
+        "     * During data reloading, previous data is displayed. To prevent any interaction with visible not actual rows, a blocker/spinner should be displayed.\r",
+        "     * In UUI components, such as `PickerInput`, `PickerList`, `PickerModal` and `DataTable`, blockers are added.\r",
+        "     * It is required to add blockers/spinners to the components, built on your own.\r",
+        "     * If reloading is started, `view.getListProps` returns `isReloading` flag, set to `true`."
        ]
       },
       "typeValue": {
@@ -22578,7 +22816,8 @@
     "src": "uui-core/src/helpers/LazyLoadedMap.ts",
     "comment": {
      "raw": [
-      "An callback to pass to LazyLoadedMap constructor"
+      "/**\r",
+      " * An callback to pass to LazyLoadedMap constructor"
      ]
     },
     "exported": true
@@ -22894,10 +23133,11 @@
       "name": "filter",
       "comment": {
        "raw": [
-        "A filter to pass to API.",
-        " Note, that the DataSourceState also has a filter fields. These two filters are merged before API calls.",
-        " Use this prop if you need to apply some filter in any case.",
-        " Prefer to use filter in the DataSourceState for end-user editable filters."
+        "/**\r",
+        "     * A filter to pass to API.\r",
+        "     * Note, that the DataSourceState also has a filter fields. These two filters are merged before API calls.\r",
+        "     * Use this prop if you need to apply some filter in any case.\r",
+        "     * Prefer to use filter in the DataSourceState for end-user editable filters."
        ]
       },
       "typeValue": {
@@ -22911,13 +23151,14 @@
       "name": "api",
       "comment": {
        "raw": [
-        "A function to retrieve the data, asynchronously.",
-        " This function usually performs a REST API call.",
-        " API is used to retrieve lists of items.",
-        " It is expected to:",
-        " - be able to handle paging (via from/count params)",
-        " - be able to retrieve specific items by the list of their ids",
-        " - be able to retrieve children by parents (when getChildCount is specified, and ctx.parentId is passed)"
+        "/**\r",
+        "     * A function to retrieve the data, asynchronously.\r",
+        "     * This function usually performs a REST API call.\r",
+        "     * API is used to retrieve lists of items.\r",
+        "     * It is expected to:\r",
+        "     * - be able to handle paging (via from/count params)\r",
+        "     * - be able to retrieve specific items by the list of their ids\r",
+        "     * - be able to retrieve children by parents (when getChildCount is specified, and ctx.parentId is passed)"
        ]
       },
       "typeValue": {
@@ -22934,13 +23175,14 @@
       "name": "getChildCount",
       "comment": {
        "raw": [
-        "Should return number of children of the item.",
-        " If it returns > 0, the item is assumed to have children and to be foldable.",
-        " Usually, this value should be returned from API, as a field of a parent, e.g. { id: 1, name: 'London', childCount: 12 }.",
-        " In this case, you can implement getChildCount as (i) => i.childCount.",
-        "",
-        " If you can't get number of children via API, you can return a guess value (avg number of children for this type of entity).",
-        " Note, that this can lead to more API calls, and increased load times in the 'parallel' fetch mode."
+        "/**\r",
+        "     * Should return number of children of the item.\r",
+        "     * If it returns > 0, the item is assumed to have children and to be foldable.\r",
+        "     * Usually, this value should be returned from API, as a field of a parent, e.g. { id: 1, name: 'London', childCount: 12 }.\r",
+        "     * In this case, you can implement getChildCount as (i) => i.childCount.\r",
+        "     *\r",
+        "     * If you can't get number of children via API, you can return a guess value (avg number of children for this type of entity).\r",
+        "     * Note, that this can lead to more API calls, and increased load times in the 'parallel' fetch mode."
        ]
       },
       "typeValue": {
@@ -22957,10 +23199,11 @@
       "name": "fetchStrategy",
       "comment": {
        "raw": [
-        "Defines how to fetch children:",
-        " sequential (default) - fetch children for each parent one-by-one. Makes minimal over-querying, at cost of some speed.",
-        " parallel - fetch children for several parents simultaneously. Can make a lot of over-querying for deep trees.",
-        "      Recommended for 2 level trees (grouping), as it makes no over-querying in this case, and is faster than sequential strategy."
+        "/**\r",
+        "     * Defines how to fetch children:\r",
+        "     * sequential (default) - fetch children for each parent one-by-one. Makes minimal over-querying, at cost of some speed.\r",
+        "     * parallel - fetch children for several parents simultaneously. Can make a lot of over-querying for deep trees.\r",
+        "     *      Recommended for 2 level trees (grouping), as it makes no over-querying in this case, and is faster than sequential strategy."
        ]
       },
       "typeValue": {
@@ -22981,14 +23224,15 @@
       "name": "flattenSearchResults",
       "comment": {
        "raw": [
-        "Falls back to plain list from tree, if there's search.",
-        " Default is true.",
-        "",
-        " If enabled, and search is active:",
-        " - API will be called with parentId and parent undefined",
-        " - getChildCount is ignored, all nodes are assumed to have no children",
-        "",
-        " See more here: https://github.com/epam/UUI/issues/8"
+        "/**\r",
+        "     * Falls back to plain list from tree, if there's search.\r",
+        "     * Default is true.\r",
+        "     *\r",
+        "     * If enabled, and search is active:\r",
+        "     * - API will be called with parentId and parent undefined\r",
+        "     * - getChildCount is ignored, all nodes are assumed to have no children\r",
+        "     *\r",
+        "     * See more here: https://github.com/epam/UUI/issues/8"
        ]
       },
       "typeValue": {
@@ -26873,8 +27117,9 @@
       "name": "all",
       "comment": {
        "raw": [
-        "Metadata for all fields of current level of object.",
-        " Usually used for consistent validation of arrays."
+        "/**\r",
+        "     * Metadata for all fields of current level of object.\r",
+        "     * Usually used for consistent validation of arrays."
        ]
       },
       "typeValue": {
@@ -26935,9 +27180,9 @@
       "name": "validators",
       "comment": {
        "raw": [
-        "Array of your custom validators.",
-        " Validator is a pure function that accept value and should return error message if this field is invalid.",
-        " If validators provided, all other metadata options(e.g. isRequired, maxLength) will be ignored."
+        "/** Array of your custom validators.\r",
+        "     * Validator is a pure function that accept value and should return error message if this field is invalid.\r",
+        "     * If validators provided, all other metadata options(e.g. isRequired, maxLength) will be ignored."
        ]
       },
       "typeValue": {
@@ -27033,8 +27278,8 @@
       "name": "disableFocusLock",
       "comment": {
        "raw": [
-        "Pass true to disabled locking focus inside modal.",
-        " If omitted, first clickable element of modal will receive focus on mount and focus will be looped inside modal."
+        "/** Pass true to disabled locking focus inside modal.\r",
+        "     * If omitted, first clickable element of modal will receive focus on mount and focus will be looped inside modal."
        ]
       },
       "typeValue": {
@@ -27585,8 +27830,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -27696,8 +27942,8 @@
       "name": "duration",
       "comment": {
        "raw": [
-        "Notification visibility duration in ms",
-        " If 'forever' value provided, notification required manual action for closing."
+        "/** Notification visibility duration in ms\r",
+        "     * If 'forever' value provided, notification required manual action for closing."
        ]
       },
       "typeValue": {
@@ -27848,7 +28094,7 @@
       "name": "getName",
       "comment": {
        "raw": [
-        "A pure function that gets entity name from entity object.",
+        "/** A pure function that gets entity name from entity object.\r",
         "     Default: (item) => item.name."
        ]
       },
@@ -27897,7 +28143,7 @@
       "name": "renderNotFound",
       "comment": {
        "raw": [
-        "Overrides the default 'no records found' banner.",
+        "/** Overrides the default 'no records found' banner.\r",
         " The 'search' callback parameter allows to distinguish cases when there's no records at all, and when current search doesn't find anything."
        ]
       },
@@ -27969,14 +28215,15 @@
       "name": "cascadeSelection",
       "comment": {
        "raw": [
-        "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.",
-        " - false: All nodes are selected independently (default).",
-        " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.",
-        " - 'implicit': Selecting a parent node means that all children are considered checked.",
-        "   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked",
-        "   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,",
-        "   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last",
-        "   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
+        "/**\r",
+        "     * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.\r",
+        "     * - false: All nodes are selected independently (default).\r",
+        "     * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.\r",
+        "     * - 'implicit': Selecting a parent node means that all children are considered checked.\r",
+        "     *   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked\r",
+        "     *   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,\r",
+        "     *   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last\r",
+        "     *   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
        ]
       },
       "typeValue": {
@@ -28109,7 +28356,7 @@
       "name": "getName",
       "comment": {
        "raw": [
-        "A pure function that gets entity name from entity object.",
+        "/** A pure function that gets entity name from entity object.\r",
         "     Default: (item) => item.name."
        ]
       },
@@ -28161,7 +28408,7 @@
       "name": "renderNotFound",
       "comment": {
        "raw": [
-        "Overrides the default 'no records found' banner.",
+        "/** Overrides the default 'no records found' banner.\r",
         " The 'search' callback parameter allows to distinguish cases when there's no records at all, and when current search doesn't find anything."
        ]
       },
@@ -28238,14 +28485,15 @@
       "name": "cascadeSelection",
       "comment": {
        "raw": [
-        "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.",
-        " - false: All nodes are selected independently (default).",
-        " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.",
-        " - 'implicit': Selecting a parent node means that all children are considered checked.",
-        "   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked",
-        "   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,",
-        "   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last",
-        "   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
+        "/**\r",
+        "     * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.\r",
+        "     * - false: All nodes are selected independently (default).\r",
+        "     * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.\r",
+        "     * - 'implicit': Selecting a parent node means that all children are considered checked.\r",
+        "     *   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked\r",
+        "     *   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,\r",
+        "     *   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last\r",
+        "     *   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
        ]
       },
       "typeValue": {
@@ -28479,8 +28727,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -28952,7 +29201,7 @@
       "name": "emptyValue",
       "comment": {
        "raw": [
-        "Defines what to use as an empty value. If other value provided, it will be assumed as selection."
+        "/** Defines what to use as an empty value. If other value provided, it will be assumed as selection."
        ]
       },
       "typeValue": {
@@ -29130,8 +29379,9 @@
       "name": "columnKey",
       "comment": {
        "raw": [
-        "Key of the column to which the filter is attached.",
-        " If omitted, filter won't be attached to the column."
+        "/**\r",
+        "     * Key of the column to which the filter is attached.\r",
+        "     * If omitted, filter won't be attached to the column."
        ]
       },
       "typeValue": {
@@ -29210,7 +29460,7 @@
       "name": "getName",
       "comment": {
        "raw": [
-        "A pure function that gets entity name from entity object.",
+        "/** A pure function that gets entity name from entity object.\r",
         "     Default: (item) => item.name."
        ]
       },
@@ -29265,8 +29515,9 @@
       "name": "showSearch",
       "comment": {
        "raw": [
-        "Pass false to hide search in picker body.",
-        " If omitted, true value will be used."
+        "/**\r",
+        "     * Pass false to hide search in picker body.\r",
+        "     * If omitted, true value will be used."
        ]
       },
       "typeValue": {
@@ -29620,8 +29871,9 @@
       "name": "rowLens",
       "comment": {
        "raw": [
-        "Lens instance, wrapping IEditable on the row, to help binding to row's value.",
-        " E.g. <TextInput { ...rowLens.prop('name').toProps() } />"
+        "/**\r",
+        "     * Lens instance, wrapping IEditable on the row, to help binding to row's value.\r",
+        "     * E.g. <TextInput { ...rowLens.prop('name').toProps() } />"
        ]
       },
       "typeValue": {
@@ -30008,7 +30260,8 @@
     "src": "uui-core/src/types/dataSources.ts",
     "comment": {
      "raw": [
-      "Holds configuration of the force scrolling behavior."
+      "/**\r",
+      " * Holds configuration of the force scrolling behavior."
      ]
     },
     "exported": true
@@ -30082,14 +30335,14 @@
       "name": "align",
       "comment": {
        "raw": [
-        "Alignment behavior. This property specifies, to which position a row with an index should be scrolled to.",
-        " @default 'top'",
-        "",
-        " If `nearest` is specified, a list will be scrolled to a row in the nearest position only if row is not visible.",
-        " If a row is closer to the bottom, the list will be scrolled to the row in the bottom position of a scroll container.",
-        " If closer to the top, will be scrolled to the row in the top position.",
-        "",
-        " If `top` is specified, scrolling a list to a row to the top part of the container will happen in any case."
+        "/** Alignment behavior. This property specifies, to which position a row with an index should be scrolled to.\r",
+        "     * @default 'top'\r",
+        "     *\r",
+        "     * If `nearest` is specified, a list will be scrolled to a row in the nearest position only if row is not visible.\r",
+        "     * If a row is closer to the bottom, the list will be scrolled to the row in the bottom position of a scroll container.\r",
+        "     * If closer to the top, will be scrolled to the row in the top position.\r",
+        "     *\r",
+        "     * If `top` is specified, scrolling a list to a row to the top part of the container will happen in any case."
        ],
        "tags": {
         "@default": "top"
@@ -30660,8 +30913,9 @@
       "name": "columnKey",
       "comment": {
        "raw": [
-        "Key of the column to which the filter is attached.",
-        " If omitted, filter won't be attached to the column."
+        "/**\r",
+        "     * Key of the column to which the filter is attached.\r",
+        "     * If omitted, filter won't be attached to the column."
        ]
       },
       "typeValue": {
@@ -30740,7 +30994,7 @@
       "name": "getName",
       "comment": {
        "raw": [
-        "A pure function that gets entity name from entity object.",
+        "/** A pure function that gets entity name from entity object.\r",
         "     Default: (item) => item.name."
        ]
       },
@@ -30796,8 +31050,9 @@
       "name": "showSearch",
       "comment": {
        "raw": [
-        "Pass false to hide search in picker body.",
-        " If omitted, true value will be used."
+        "/**\r",
+        "     * Pass false to hide search in picker body.\r",
+        "     * If omitted, true value will be used."
        ]
       },
       "typeValue": {
@@ -31504,8 +31759,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -31767,7 +32023,7 @@
       "name": "renderContent",
       "comment": {
        "raw": [
-        "Alternative to 'content' prop, you can pass a render function.",
+        "/** Alternative to 'content' prop, you can pass a render function.\r",
         " The function will only be called when content is shown, this can save performance."
        ]
       },
@@ -32051,9 +32307,9 @@
       "name": "openDelay",
       "comment": {
        "raw": [
-        "Defines how much 'ms' user should hold mouse over target to open the dropdown",
-        " This prop work only with openOnHover={true}",
-        " @default 0"
+        "/** Defines how much 'ms' user should hold mouse over target to open the dropdown\r",
+        "     * This prop work only with openOnHover={true}\r",
+        "     * @default 0"
        ],
        "tags": {
         "@default": 0
@@ -32073,9 +32329,9 @@
       "name": "closeDelay",
       "comment": {
        "raw": [
-        "Defines after which delay dropdown will be closed, if user leave mouse from target.",
-        " This prop work only with openOnHover={true}",
-        " @default 0"
+        "/** Defines after which delay dropdown will be closed, if user leave mouse from target.\r",
+        "     * This prop work only with openOnHover={true}\r",
+        "     * @default 0"
        ],
        "tags": {
         "@default": 0
@@ -32095,11 +32351,11 @@
       "name": "closeOnMouseLeave",
       "comment": {
        "raw": [
-        "Defined when to close dropdown in case of openOnHover={ true }",
-        " toggler — dropdown will be closed when a mouse leaves the target component",
-        " boundary — will not to close the dropdown when a mouse is on target or in 30px around target area",
-        " false — will not close dropdown by mouse move event",
-        " @default 'toggler'"
+        "/** Defined when to close dropdown in case of openOnHover={ true }\r",
+        "     * toggler — dropdown will be closed when a mouse leaves the target component\r",
+        "     * boundary — will not to close the dropdown when a mouse is on target or in 30px around target area\r",
+        "     * false — will not close dropdown by mouse move event\r",
+        "     * @default 'toggler'"
        ],
        "tags": {
         "@default": "toggler"
@@ -32124,8 +32380,9 @@
       "name": "portalTarget",
       "comment": {
        "raw": [
-        "Node of portal target, where to render the dropdown body.",
-        " By default, will be used global portal node."
+        "/**\r",
+        "     * Node of portal target, where to render the dropdown body.\r",
+        "     * By default, will be used global portal node."
        ]
       },
       "typeValue": {
@@ -32139,7 +32396,8 @@
       "name": "boundaryElement",
       "comment": {
        "raw": [
-        "Element relative to which dropdown will calculate position"
+        "/**\r",
+        "     * Element relative to which dropdown will calculate position"
        ]
       },
       "typeValue": {
@@ -32153,8 +32411,8 @@
       "name": "closeBodyOnTogglerHidden",
       "comment": {
        "raw": [
-        "Pass false, if you do not want to close the dropdown in case Toggler move out of viewport.",
-        " @default true"
+        "/** Pass false, if you do not want to close the dropdown in case Toggler move out of viewport.\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -32319,8 +32577,9 @@
       "name": "getMetadata",
       "comment": {
        "raw": [
-        "Returns form metadata - information used to validate the form.",
-        " @param state Metadata can depend on state, and will be re-computed on updates"
+        "/**\r",
+        "     * Returns form metadata - information used to validate the form.\r",
+        "     * @param state Metadata can depend on state, and will be re-computed on updates"
        ]
       },
       "typeValue": {
@@ -32337,10 +32596,11 @@
       "name": "onSave",
       "comment": {
        "raw": [
-        "Occurs when 'save' function is called on Form.",
-        " Should save form data (usually with API call to server).",
-        " Server can also reject form, and provide validation errors in response.",
-        " @param state Form state to save"
+        "/**\r",
+        "     * Occurs when 'save' function is called on Form.\r",
+        "     * Should save form data (usually with API call to server).\r",
+        "     * Server can also reject form, and provide validation errors in response.\r",
+        "     * @param state Form state to save"
        ]
       },
       "typeValue": {
@@ -32357,10 +32617,11 @@
       "name": "beforeLeave",
       "comment": {
        "raw": [
-        "Called when form is unmounted, but user still have unsaved changes.",
-        " Accepts a Promise<boolean> to be returned. If promise resolves to true - save procedure is performed.",
-        " The common use-case is to show a modal with \"Save Changes?\" dialog",
-        " Skins usually implement this as default behavior. To prevent it, you can pass null to this prop to override it."
+        "/**\r",
+        "     * Called when form is unmounted, but user still have unsaved changes.\r",
+        "     * Accepts a Promise<boolean> to be returned. If promise resolves to true - save procedure is performed.\r",
+        "     * The common use-case is to show a modal with \"Save Changes?\" dialog\r",
+        "     * Skins usually implement this as default behavior. To prevent it, you can pass null to this prop to override it."
        ]
       },
       "typeValue": {
@@ -32377,10 +32638,11 @@
       "name": "loadUnsavedChanges",
       "comment": {
        "raw": [
-        "Used to restore unsaved user edits from the last session (usually to localstorage, via uuiUserSettings context)",
-        " If unsaved changes are detected, this callback is called. If it is resolved - the form restores unsaved edits.",
-        " The common use-case is to show a modal with \"You have unsaved changes, restore them?\" dialog",
-        " Skins usually implement this as default behavior. To prevent it, you can pass null to this prop to override it."
+        "/**\r",
+        "     * Used to restore unsaved user edits from the last session (usually to localstorage, via uuiUserSettings context)\r",
+        "     * If unsaved changes are detected, this callback is called. If it is resolved - the form restores unsaved edits.\r",
+        "     * The common use-case is to show a modal with \"You have unsaved changes, restore them?\" dialog\r",
+        "     * Skins usually implement this as default behavior. To prevent it, you can pass null to this prop to override it."
        ]
       },
       "typeValue": {
@@ -32397,9 +32659,10 @@
       "name": "onSuccess",
       "comment": {
        "raw": [
-        "Called after successful save.",
-        " @param state Saved state",
-        " @param isSavedBeforeLeave true, if save is triggered via leaving the page, and \"Save Changes?\" dialog"
+        "/**\r",
+        "     * Called after successful save.\r",
+        "     * @param state Saved state\r",
+        "     * @param isSavedBeforeLeave true, if save is triggered via leaving the page, and \"Save Changes?\" dialog"
        ]
       },
       "typeValue": {
@@ -32433,7 +32696,8 @@
       "name": "settingsKey",
       "comment": {
        "raw": [
-        "The key, under which form save unsaved state usually to localstorage, via uuiUserSettings context)"
+        "/**\r",
+        "     * The key, under which form save unsaved state usually to localstorage, via uuiUserSettings context)"
        ]
       },
       "typeValue": {
@@ -32450,9 +32714,10 @@
       "name": "validationOn",
       "comment": {
        "raw": [
-        "Controls when form validation occurs:",
-        " save (default, recommended) - form is validated on save. If form is invalid - it will be revalidated on every change, until become valid",
-        " change - form is validated on every user change. Only fields changes in current edit session are validated"
+        "/**\r",
+        "     * Controls when form validation occurs:\r",
+        "     * save (default, recommended) - form is validated on save. If form is invalid - it will be revalidated on every change, until become valid\r",
+        "     * change - form is validated on every user change. Only fields changes in current edit session are validated"
        ]
       },
       "typeValue": {
@@ -32858,9 +33123,9 @@
       "name": "apiDefinition",
       "comment": {
        "raw": [
-        "Function to get the api definitions.",
-        " Usually, api definitions this is an object which contain object with all api requests of the app.",
-        " Then you can call this requests via 'uuiContext.api.myApi(myData)'"
+        "/** Function to get the api definitions.\r",
+        "     * Usually, api definitions this is an object which contain object with all api requests of the app.\r",
+        "     * Then you can call this requests via 'uuiContext.api.myApi(myData)'"
        ]
       },
       "typeValue": {
@@ -32877,9 +33142,9 @@
       "name": "apiReloginPath",
       "comment": {
        "raw": [
-        "Url to the relogin page. Used to open new browser window by this path, in case of auth lost error.",
-        " Opened by this path page, should process authentication and then post 'authSuccess' cross-window message to the opener, to recover failed requests.",
-        " @default '/auth/login'"
+        "/** Url to the relogin page. Used to open new browser window by this path, in case of auth lost error.\r",
+        "     * Opened by this path page, should process authentication and then post 'authSuccess' cross-window message to the opener, to recover failed requests.\r",
+        "     * @default '/auth/login'"
        ],
        "tags": {
         "@default": "/auth/login"
@@ -32899,8 +33164,8 @@
       "name": "apiPingPath",
       "comment": {
        "raw": [
-        "Url to the api, which ApiContext will start pinging in case of 'connection lost', until it gets 200 status. Then it will retry failed requests.",
-        " @default '/auth/ping'"
+        "/** Url to the api, which ApiContext will start pinging in case of 'connection lost', until it gets 200 status. Then it will retry failed requests.\r",
+        "     * @default '/auth/ping'"
        ],
        "tags": {
         "@default": "/auth/ping"
@@ -32920,8 +33185,8 @@
       "name": "apiServerUrl",
       "comment": {
        "raw": [
-        "Url to the server api under which all requests will be processed. Usefully for cases, when all api located by some specific url, which is not much app url.",
-        " @default ''"
+        "/** Url to the server api under which all requests will be processed. Usefully for cases, when all api located by some specific url, which is not much app url.\r",
+        "     * @default ''"
        ],
        "tags": {
         "@default": ""
@@ -33132,9 +33397,9 @@
       "name": "apiDefinition",
       "comment": {
        "raw": [
-        "Function to get the api definitions.",
-        " Usually, api definitions this is an object which contain object with all api requests of the app.",
-        " Then you can call this requests via 'uuiContext.api.myApi(myData)'"
+        "/** Function to get the api definitions.\r",
+        "     * Usually, api definitions this is an object which contain object with all api requests of the app.\r",
+        "     * Then you can call this requests via 'uuiContext.api.myApi(myData)'"
        ]
       },
       "typeValue": {
@@ -33150,9 +33415,9 @@
       "name": "apiReloginPath",
       "comment": {
        "raw": [
-        "Url to the relogin page. Used to open new browser window by this path, in case of auth lost error.",
-        " Opened by this path page, should process authentication and then post 'authSuccess' cross-window message to the opener, to recover failed requests.",
-        " @default '/auth/login'"
+        "/** Url to the relogin page. Used to open new browser window by this path, in case of auth lost error.\r",
+        "     * Opened by this path page, should process authentication and then post 'authSuccess' cross-window message to the opener, to recover failed requests.\r",
+        "     * @default '/auth/login'"
        ],
        "tags": {
         "@default": "/auth/login"
@@ -33172,8 +33437,8 @@
       "name": "apiPingPath",
       "comment": {
        "raw": [
-        "Url to the api, which ApiContext will start pinging in case of 'connection lost', until it gets 200 status. Then it will retry failed requests.",
-        " @default '/auth/ping'"
+        "/** Url to the api, which ApiContext will start pinging in case of 'connection lost', until it gets 200 status. Then it will retry failed requests.\r",
+        "     * @default '/auth/ping'"
        ],
        "tags": {
         "@default": "/auth/ping"
@@ -33193,8 +33458,8 @@
       "name": "apiServerUrl",
       "comment": {
        "raw": [
-        "Url to the server api under which all requests will be processed. Usefully for cases, when all api located by some specific url, which is not much app url.",
-        " @default ''"
+        "/** Url to the server api under which all requests will be processed. Usefully for cases, when all api located by some specific url, which is not much app url.\r",
+        "     * @default ''"
        ],
        "tags": {
         "@default": ""
@@ -33270,8 +33535,9 @@
       "name": "topIndex",
       "comment": {
        "raw": [
-        "Index of the topmost item, in rendered batch.",
-        " Note - this item might not be visible, as Virtual List maintain some reserve of rows on top / at the bottom of the list"
+        "/**\r",
+        "     * Index of the topmost item, in rendered batch.\r",
+        "     * Note - this item might not be visible, as Virtual List maintain some reserve of rows on top / at the bottom of the list"
        ]
       },
       "typeValue": {
@@ -33287,10 +33553,11 @@
       "name": "visibleCount",
       "comment": {
        "raw": [
-        "Number of currently rendered items.",
-        " Virtual list updates this value automatically, if it too small.",
-        " Note Virtual List renders more items, that actually visible,",
-        " as it need maintain some reserve of rows on top / at the bottom of the list."
+        "/**\r",
+        "     * Number of currently rendered items.\r",
+        "     * Virtual list updates this value automatically, if it too small.\r",
+        "     * Note Virtual List renders more items, that actually visible,\r",
+        "     * as it need maintain some reserve of rows on top / at the bottom of the list."
        ]
       },
       "typeValue": {
@@ -33348,10 +33615,11 @@
       "name": "scrollTo",
       "comment": {
        "raw": [
-        "Virtual list ensures that row with this Index is within the visible area, if not Virtual List .",
-        " Virtual list updates this value on scroll to null when appear in the visible area.",
-        " If this value is updated manually, Virtual List would scroll to the specified items.",
-        " It would attempt to put scroll so this item will be at the top of the list."
+        "/**\r",
+        "     * Virtual list ensures that row with this Index is within the visible area, if not Virtual List .\r",
+        "     * Virtual list updates this value on scroll to null when appear in the visible area.\r",
+        "     * If this value is updated manually, Virtual List would scroll to the specified items.\r",
+        "     * It would attempt to put scroll so this item will be at the top of the list."
        ]
       },
       "typeValue": {
@@ -33364,8 +33632,9 @@
       "name": "focusedIndex",
       "comment": {
        "raw": [
-        "Virtual List manually scroll to this Index when it appears not within the visible area.",
-        " It would attempt to put scroll so this item will be in the middle of the list."
+        "/**\r",
+        "     * Virtual List manually scroll to this Index when it appears not within the visible area.\r",
+        "     * It would attempt to put scroll so this item will be in the middle of the list."
        ]
       },
       "typeValue": {
@@ -33381,8 +33650,9 @@
       "name": "topIndex",
       "comment": {
        "raw": [
-        "Index of the topmost item, in rendered batch.",
-        " Note - this item might not be visible, as Virtual List maintain some reserve of rows on top / at the bottom of the list"
+        "/**\r",
+        "     * Index of the topmost item, in rendered batch.\r",
+        "     * Note - this item might not be visible, as Virtual List maintain some reserve of rows on top / at the bottom of the list"
        ]
       },
       "typeValue": {
@@ -33399,10 +33669,11 @@
       "name": "visibleCount",
       "comment": {
        "raw": [
-        "Number of currently rendered items.",
-        " Virtual list updates this value automatically, if it too small.",
-        " Note Virtual List renders more items, that actually visible,",
-        " as it need maintain some reserve of rows on top / at the bottom of the list."
+        "/**\r",
+        "     * Number of currently rendered items.\r",
+        "     * Virtual list updates this value automatically, if it too small.\r",
+        "     * Note Virtual List renders more items, that actually visible,\r",
+        "     * as it need maintain some reserve of rows on top / at the bottom of the list."
        ]
       },
       "typeValue": {
@@ -33520,8 +33791,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -33992,8 +34264,8 @@
       "name": "render",
       "comment": {
        "raw": [
-        "Render callback of the item. It renders items inside the panel and measures their width.",
-        " Pay attention that we can't measure margins. If you need to have margins, please make a wrapper and add margins inside"
+        "/** Render callback of the item. It renders items inside the panel and measures their width.\r",
+        "     * Pay attention that we can't measure margins. If you need to have margins, please make a wrapper and add margins inside"
        ]
       },
       "typeValue": {
@@ -34025,7 +34297,7 @@
       "name": "collapsedContainer",
       "comment": {
        "raw": [
-        "If true, this item will be shown when some other items was hidden; for example, you can use it to render dropdowns with hidden items.",
+        "/** If true, this item will be shown when some other items was hidden; for example, you can use it to render dropdowns with hidden items.\r",
         " You can provide more than one collapsedContainer item, but will be shown only those which has minimal priority, but this priority can't be less than the last hidden item’s priority."
        ]
       },
@@ -34374,8 +34646,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -34969,8 +35242,8 @@
       "name": "onClick",
       "comment": {
        "raw": [
-        "Avatar onClick.",
-        "  @deprecated Property onClick is deprecated and will be removed in future release."
+        "/** Avatar onClick.\r",
+        "     *  @deprecated Property onClick is deprecated and will be removed in future release."
        ]
       },
       "typeValue": {
@@ -35202,7 +35475,8 @@
       "name": "step",
       "comment": {
        "raw": [
-        "@default 1"
+        "/**\r",
+        "     * @default 1"
        ],
        "tags": {
         "@default": 1
@@ -36243,8 +36517,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -36721,8 +36996,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -37922,8 +38198,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -38121,8 +38398,9 @@
       "name": "key",
       "comment": {
        "raw": [
-        "Unique key to identify the column. Used to reference columns, e.g. in ColumnsConfig.",
-        " Also, used as React key for cells, header cells, and other components inside tables."
+        "/**\r",
+        "     * Unique key to identify the column. Used to reference columns, e.g. in ColumnsConfig.\r",
+        "     * Also, used as React key for cells, header cells, and other components inside tables."
        ]
       },
       "typeValue": {
@@ -38154,9 +38432,10 @@
       "name": "width",
       "comment": {
        "raw": [
-        "The width of the column. Usually, columns has exact this width.",
-        " When all columns fit, and there's spare horizontal space, you can use 'grow' prop to use this space for certain columns.",
-        " DataTable's columns can't shrink below width - table will add horizontal scrolling instead of shrinking columns"
+        "/**\r",
+        "     * The width of the column. Usually, columns has exact this width.\r",
+        "     * When all columns fit, and there's spare horizontal space, you can use 'grow' prop to use this space for certain columns.\r",
+        "     * DataTable's columns can't shrink below width - table will add horizontal scrolling instead of shrinking columns"
        ]
       },
       "typeValue": {
@@ -38263,8 +38542,9 @@
       "name": "isSortable",
       "comment": {
        "raw": [
-        "Enables sorting arrows on the column.",
-        " Sorting state is kept in DataSourceState.sorting"
+        "/**\r",
+        "     * Enables sorting arrows on the column.\r",
+        "     * Sorting state is kept in DataSourceState.sorting"
        ]
       },
       "typeValue": {
@@ -38330,9 +38610,10 @@
       "name": "isFilterActive",
       "comment": {
        "raw": [
-        "Should return true, if current filter affects the column.",
-        " Usually, this prop is filled automatically by the useTableState hook.",
-        " If you use the useTableState hook, you don't need to specify it manually."
+        "/**\r",
+        "     * Should return true, if current filter affects the column.\r",
+        "     * Usually, this prop is filled automatically by the useTableState hook.\r",
+        "     * If you use the useTableState hook, you don't need to specify it manually."
        ]
       },
       "typeValue": {
@@ -38380,6 +38661,74 @@
      },
      {
       "uid": 25,
+      "name": "groupBy",
+      "typeValue": {
+       "raw": "string"
+      },
+      "editor": {
+       "type": "string"
+      },
+      "from": "@epam/uui-core:DataColumnProps",
+      "required": false
+     },
+     {
+      "uid": 26,
+      "name": "headerFontSize",
+      "typeValue": {
+       "raw": "'12' | '18' | '24' | '10' | '14' | '16'"
+      },
+      "editor": {
+       "type": "oneOf",
+       "options": [
+        "10",
+        "12",
+        "14",
+        "16",
+        "18",
+        "24"
+       ]
+      },
+      "from": "@epam/uui-core:DataColumnProps",
+      "required": false
+     },
+     {
+      "uid": 27,
+      "name": "groupCaptionCX",
+      "typeValue": {
+       "raw": "string"
+      },
+      "editor": {
+       "type": "string"
+      },
+      "from": "@epam/uui-core:DataColumnProps",
+      "required": false
+     },
+     {
+      "uid": 28,
+      "name": "onHeaderClick",
+      "typeValue": {
+       "raw": "(e: any) => void"
+      },
+      "editor": {
+       "type": "func"
+      },
+      "from": "@epam/uui-core:DataColumnProps",
+      "required": false
+     },
+     {
+      "uid": 29,
+      "name": "onGroupClick",
+      "typeValue": {
+       "raw": "(config: ColumnsConfig, props: unknown) => void"
+      },
+      "editor": {
+       "type": "func"
+      },
+      "from": "@epam/uui-core:DataColumnProps",
+      "required": false
+     },
+     {
+      "uid": 30,
       "name": "render",
       "comment": {
        "raw": [
@@ -38396,7 +38745,7 @@
       "required": false
      },
      {
-      "uid": 26,
+      "uid": 31,
       "name": "renderCell",
       "comment": {
        "raw": [
@@ -38413,13 +38762,14 @@
       "required": false
      },
      {
-      "uid": 27,
+      "uid": 32,
       "name": "renderDropdown",
       "comment": {
        "raw": [
-        "Renders column header dropdown.",
-        " Usually, this prop is filled automatically by the useTableState hook.",
-        " If you use the useTableState hook, you don't need to specify it manually."
+        "/**\r",
+        "     * Renders column header dropdown.\r",
+        "     * Usually, this prop is filled automatically by the useTableState hook.\r",
+        "     * If you use the useTableState hook, you don't need to specify it manually."
        ]
       },
       "typeValue": {
@@ -38432,13 +38782,14 @@
       "required": false
      },
      {
-      "uid": 28,
+      "uid": 33,
       "name": "renderFilter",
       "comment": {
        "raw": [
-        "Renders column filter.",
-        " If you use useTableState hook, and you specify filter for the column, default filter will be rendered automatically.",
-        " You can use this prop to render a custom filter component."
+        "/**\r",
+        "     * Renders column filter.\r",
+        "     * If you use useTableState hook, and you specify filter for the column, default filter will be rendered automatically.\r",
+        "     * You can use this prop to render a custom filter component."
        ]
       },
       "typeValue": {
@@ -38451,7 +38802,7 @@
       "required": false
      },
      {
-      "uid": 29,
+      "uid": 34,
       "name": "fix",
       "comment": {
        "raw": [
@@ -38472,7 +38823,7 @@
       "required": false
      },
      {
-      "uid": 30,
+      "uid": 35,
       "name": "cx",
       "comment": {
        "raw": [
@@ -38487,7 +38838,7 @@
       "required": false
      },
      {
-      "uid": 31,
+      "uid": 36,
       "name": "onClick",
       "comment": {
        "raw": [
@@ -38504,7 +38855,7 @@
       "required": false
      },
      {
-      "uid": 32,
+      "uid": 37,
       "name": "rawProps",
       "comment": {
        "raw": [
@@ -39827,8 +40178,8 @@
       "name": "showArrow",
       "comment": {
        "raw": [
-        "If true, arrow tip will be shown",
-        " @default false"
+        "/** If true, arrow tip will be shown\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -39847,11 +40198,12 @@
       "name": "focusLock",
       "comment": {
        "raw": [
-        "Pass true to wrap DropdownContainer with FocusLock component to support keyboard navigation.",
-        " If omitted, true value will be used.",
-        "",
-        " After DropdownContainer appeared the focus will be set on the first focusable element inside.",
-        " @default true"
+        "/**\r",
+        "     * Pass true to wrap DropdownContainer with FocusLock component to support keyboard navigation.\r",
+        "     * If omitted, true value will be used.\r",
+        "     *\r",
+        "     * After DropdownContainer appeared the focus will be set on the first focusable element inside.\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -39870,8 +40222,9 @@
       "name": "returnFocus",
       "comment": {
        "raw": [
-        "Pass true to return focus into initial position on unmount.",
-        " If omitted, true value will be used. It's used if focusLock=true."
+        "/**\r",
+        "     * Pass true to return focus into initial position on unmount.\r",
+        "     * If omitted, true value will be used. It's used if focusLock=true."
        ]
       },
       "typeValue": {
@@ -39887,8 +40240,9 @@
       "name": "persistentFocus",
       "comment": {
        "raw": [
-        "Pass true to lock focus within DropdownContainer.",
-        " If omitted, true value will be used. It's used if focusLock=true."
+        "/**\r",
+        "     * Pass true to lock focus within DropdownContainer.\r",
+        "     * If omitted, true value will be used. It's used if focusLock=true."
        ]
       },
       "typeValue": {
@@ -39904,7 +40258,8 @@
       "name": "lockProps",
       "comment": {
        "raw": [
-        "Pass any extra props to the FocusLock wrapper."
+        "/**\r",
+        "     * Pass any extra props to the FocusLock wrapper."
        ]
       },
       "typeValue": {
@@ -39917,7 +40272,8 @@
       "name": "shards",
       "comment": {
        "raw": [
-        "Pass an array of ref pointing to the nodes, which focus lock should consider and a part of it. This is a way of focus scattering."
+        "/**\r",
+        "     * Pass an array of ref pointing to the nodes, which focus lock should consider and a part of it. This is a way of focus scattering."
        ]
       },
       "typeValue": {
@@ -39930,7 +40286,8 @@
       "name": "as",
       "comment": {
        "raw": [
-        "Pass element name if you need to change internal FocusLock div element, to any other."
+        "/**\r",
+        "     * Pass element name if you need to change internal FocusLock div element, to any other."
        ]
       },
       "typeValue": {
@@ -39946,8 +40303,9 @@
       "name": "closeOnEsc",
       "comment": {
        "raw": [
-        "Pass true to handle Escape key press and call props.onClose().",
-        " If omitted, true value will be used. It's used if focusLock=true."
+        "/**\r",
+        "     * Pass true to handle Escape key press and call props.onClose().\r",
+        "     * If omitted, true value will be used. It's used if focusLock=true."
        ]
       },
       "typeValue": {
@@ -39963,7 +40321,7 @@
       "name": "onKeyDown",
       "comment": {
        "raw": [
-        "Called on keyDown event in DropdownContainer.",
+        "/** Called on keyDown event in DropdownContainer.\r",
         "     Can be used to provide your own handlers."
        ]
       },
@@ -40544,8 +40902,9 @@
       "name": "eventHandlers",
       "comment": {
        "raw": [
-        "Event handlers. Component is expected to pass these events to the top element it renders.",
-        " As onClick event on the element will be overwritten, use DndActorProps.onClick to receive click events on the element"
+        "/**\r",
+        "     * Event handlers. Component is expected to pass these events to the top element it renders.\r",
+        "     * As onClick event on the element will be overwritten, use DndActorProps.onClick to receive click events on the element"
        ]
       },
       "typeValue": {
@@ -40559,8 +40918,9 @@
       "name": "classNames",
       "comment": {
        "raw": [
-        "CSS class names to add to the element.",
-        " Some of these markers are used by the DndActor internally, so they must be added even if no used by component itself to apply styles."
+        "/**\r",
+        "     * CSS class names to add to the element.\r",
+        "     * Some of these markers are used by the DndActor internally, so they must be added even if no used by component itself to apply styles."
        ]
       },
       "typeValue": {
@@ -40836,8 +41196,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -45399,8 +45760,8 @@
       "name": "htmlFor",
       "comment": {
        "raw": [
-        "HTML 'for' tag to bind the label to a component.",
-        " Can be used when component can't be wrapped by the LabeledInput, e.g. when form is layed out as table with labels and inputs placed into different columns"
+        "/** HTML 'for' tag to bind the label to a component.\r",
+        "     * Can be used when component can't be wrapped by the LabeledInput, e.g. when form is layed out as table with labels and inputs placed into different columns"
        ]
       },
       "typeValue": {
@@ -46254,7 +46615,7 @@
       "name": "children",
       "comment": {
        "raw": [
-        "@deprecated",
+        "/** @deprecated\r",
         " Use 'items' prop to define menu content"
        ]
       },
@@ -46396,8 +46757,8 @@
       "name": "renderBurger",
       "comment": {
        "raw": [
-        "Render callback for burger menu content.",
-        " Burger will appear, which some items don't fit the menu width."
+        "/** Render callback for burger menu content.\r",
+        "     * Burger will appear, which some items don't fit the menu width."
        ]
       },
       "typeValue": {
@@ -46584,8 +46945,9 @@
       "name": "min",
       "comment": {
        "raw": [
-        "Minimum value (default is 0)",
-        " @default 0"
+        "/**\r",
+        "     * Minimum value (default is 0)\r",
+        "     * @default 0"
        ],
        "tags": {
         "@default": 0
@@ -46718,8 +47080,9 @@
       "name": "disableLocaleFormatting",
       "comment": {
        "raw": [
-        "Turns off locale-based formatting, standard Number.toString() is used instead",
-        " @default false"
+        "/**\r",
+        "     * Turns off locale-based formatting, standard Number.toString() is used instead\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -46751,10 +47114,11 @@
       "name": "formatValue",
       "comment": {
        "raw": [
-        "A function to convert current input value to displayed text.",
-        " Overrides standard Intl-based formatting.",
-        " If passed, only maximumFractionDigits considered from formatOptions when both properties provided.",
-        " Formatting is applied only when input is not focused."
+        "/**\r",
+        "     * A function to convert current input value to displayed text.\r",
+        "     * Overrides standard Intl-based formatting.\r",
+        "     * If passed, only maximumFractionDigits considered from formatOptions when both properties provided.\r",
+        "     * Formatting is applied only when input is not focused."
        ]
       },
       "typeValue": {
@@ -46981,8 +47345,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -47337,8 +47702,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -47851,8 +48217,9 @@
       "name": "selectAll",
       "comment": {
        "raw": [
-        "ICheckable object for Select All behavior.",
-        " If omitted, Select All action will be absent."
+        "/**\r",
+        "     * ICheckable object for Select All behavior.\r",
+        "     * If omitted, Select All action will be absent."
        ]
       },
       "typeValue": {
@@ -47883,8 +48250,9 @@
       "name": "rowsCount",
       "comment": {
        "raw": [
-        "Count of rows, after applying filter, and folding on tree nodes.",
-        " Obsolete! Please switch to exactRowsCount / knownRowsCount"
+        "/**\r",
+        "     * Count of rows, after applying filter, and folding on tree nodes.\r",
+        "     * Obsolete! Please switch to exactRowsCount / knownRowsCount"
        ]
       },
       "typeValue": {
@@ -47918,9 +48286,10 @@
       "name": "knownRowsCount",
       "comment": {
        "raw": [
-        "There's at least knownRowsCount rows. There can be more if list is lazy loaded.",
-        " Equals to exactRowsCount if all rows are loaded, or if API returns rows count",
-        " Otherwise, exactRowsCount will be null, and knownRowsCount will specify number of loaded rows."
+        "/**\r",
+        "     * There's at least knownRowsCount rows. There can be more if list is lazy loaded.\r",
+        "     * Equals to exactRowsCount if all rows are loaded, or if API returns rows count\r",
+        "     * Otherwise, exactRowsCount will be null, and knownRowsCount will specify number of loaded rows."
        ]
       },
       "typeValue": {
@@ -48282,7 +48651,7 @@
       "name": "getName",
       "comment": {
        "raw": [
-        "A pure function that gets entity name from entity object.",
+        "/** A pure function that gets entity name from entity object.\r",
         "     Default: (item) => item.name."
        ]
       },
@@ -48334,7 +48703,7 @@
       "name": "renderNotFound",
       "comment": {
        "raw": [
-        "Overrides the default 'no records found' banner.",
+        "/** Overrides the default 'no records found' banner.\r",
         " The 'search' callback parameter allows to distinguish cases when there's no records at all, and when current search doesn't find anything."
        ]
       },
@@ -48411,14 +48780,15 @@
       "name": "cascadeSelection",
       "comment": {
        "raw": [
-        "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.",
-        " - false: All nodes are selected independently (default).",
-        " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.",
-        " - 'implicit': Selecting a parent node means that all children are considered checked.",
-        "   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked",
-        "   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,",
-        "   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last",
-        "   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
+        "/**\r",
+        "     * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.\r",
+        "     * - false: All nodes are selected independently (default).\r",
+        "     * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.\r",
+        "     * - 'implicit': Selecting a parent node means that all children are considered checked.\r",
+        "     *   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked\r",
+        "     *   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,\r",
+        "     *   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last\r",
+        "     *   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
        ]
       },
       "typeValue": {
@@ -48652,8 +49022,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -48890,12 +49261,13 @@
       "name": "searchPosition",
       "comment": {
        "raw": [
-        "Defines where search field is:",
-        " 'input' - try to place search inside the toggler (default for single-select),",
-        " 'body' - put search inside the dropdown (default for multi-select)",
-        " 'none' - disables search completely",
-        "",
-        " Note: 'searchPosition' cannot be 'input' if 'editMode' is 'modal'"
+        "/**\r",
+        "      *  Defines where search field is:\r",
+        "      * 'input' - try to place search inside the toggler (default for single-select),\r",
+        "      * 'body' - put search inside the dropdown (default for multi-select)\r",
+        "      * 'none' - disables search completely\r",
+        "      *\r",
+        "      * Note: 'searchPosition' cannot be 'input' if 'editMode' is 'modal'"
        ]
       },
       "typeValue": {
@@ -48932,10 +49304,11 @@
       "name": "minCharsToSearch",
       "comment": {
        "raw": [
-        "Minimum characters to type, before search will trigger. If input characters number is less then 'minCharsToSearch', it will disable opening dropdown body.",
-        " By default search triggers after input value is changed.",
-        "",
-        " Note: defined minCharsToSearch isn't compatible with searchPosition=body."
+        "/**\r",
+        "     * Minimum characters to type, before search will trigger. If input characters number is less then 'minCharsToSearch', it will disable opening dropdown body.\r",
+        "     * By default search triggers after input value is changed.\r",
+        "     *\r",
+        "     * Note: defined minCharsToSearch isn't compatible with searchPosition=body."
        ]
       },
       "typeValue": {
@@ -49064,7 +49437,8 @@
       "name": "highlightSearchMatches",
       "comment": {
        "raw": [
-        "Enables highlighting of the items' text with search-matching results."
+        "/**\r",
+        "     * Enables highlighting of the items' text with search-matching results."
        ]
       },
       "typeValue": {
@@ -49359,7 +49733,7 @@
       "name": "getName",
       "comment": {
        "raw": [
-        "A pure function that gets entity name from entity object.",
+        "/** A pure function that gets entity name from entity object.\r",
         "     Default: (item) => item.name."
        ]
       },
@@ -49411,7 +49785,7 @@
       "name": "renderNotFound",
       "comment": {
        "raw": [
-        "Overrides the default 'no records found' banner.",
+        "/** Overrides the default 'no records found' banner.\r",
         " The 'search' callback parameter allows to distinguish cases when there's no records at all, and when current search doesn't find anything."
        ]
       },
@@ -49488,14 +49862,15 @@
       "name": "cascadeSelection",
       "comment": {
        "raw": [
-        "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.",
-        " - false: All nodes are selected independently (default).",
-        " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.",
-        " - 'implicit': Selecting a parent node means that all children are considered checked.",
-        "   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked",
-        "   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,",
-        "   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last",
-        "   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
+        "/**\r",
+        "     * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.\r",
+        "     * - false: All nodes are selected independently (default).\r",
+        "     * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.\r",
+        "     * - 'implicit': Selecting a parent node means that all children are considered checked.\r",
+        "     *   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked\r",
+        "     *   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,\r",
+        "     *   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last\r",
+        "     *   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
        ]
       },
       "typeValue": {
@@ -49729,8 +50104,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -49747,8 +50123,9 @@
       "name": "maxDefaultItems",
       "comment": {
        "raw": [
-        "Number of default items to show initially, when nothing is selected.",
-        " @default 10"
+        "/**\r",
+        "     * Number of default items to show initially, when nothing is selected.\r",
+        "     * @default 10"
        ],
        "tags": {
         "@default": 10
@@ -49767,8 +50144,9 @@
       "name": "maxTotalItems",
       "comment": {
        "raw": [
-        "Maximum total number of items to show, including selected",
-        " @default 50"
+        "/**\r",
+        "     * Maximum total number of items to show, including selected\r",
+        "     * @default 50"
        ],
        "tags": {
         "@default": 50
@@ -49787,8 +50165,9 @@
       "name": "defaultIds",
       "comment": {
        "raw": [
-        "Ids of items to show first.",
-        " If not specified, top props.maxDefaultItems will be shown according to the DataSource sorting settings (default is 10)"
+        "/**\r",
+        "     * Ids of items to show first.\r",
+        "     * If not specified, top props.maxDefaultItems will be shown according to the DataSource sorting settings (default is 10)"
        ]
       },
       "typeValue": {
@@ -50264,7 +50643,8 @@
       "name": "disallowClickOutside",
       "comment": {
        "raw": [
-        "@default false"
+        "/**\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -51185,8 +51565,8 @@
       "name": "target",
       "comment": {
        "raw": [
-        "Element where portal content will be rendered",
-        " By default, it will be node with 'main' or 'root' id or document.body"
+        "/** Element where portal content will be rendered\r",
+        "     * By default, it will be node with 'main' or 'root' id or document.body"
        ]
       },
       "typeValue": {
@@ -51935,8 +52315,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -52228,7 +52609,8 @@
       "name": "step",
       "comment": {
        "raw": [
-        "@default 1"
+        "/**\r",
+        "     * @default 1"
        ],
        "tags": {
         "@default": 1
@@ -59156,8 +59538,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -59310,7 +59693,8 @@
       "name": "autoSize",
       "comment": {
        "raw": [
-        "Enables auto-resizing height to fit text. Rows prop is ignored in this mode"
+        "/**\r",
+        "     * Enables auto-resizing height to fit text. Rows prop is ignored in this mode"
        ]
       },
       "typeValue": {
@@ -60240,8 +60624,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -60393,8 +60778,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -60769,7 +61155,7 @@
       "name": "renderContent",
       "comment": {
        "raw": [
-        "Alternative to 'content' prop, you can pass a render function.",
+        "/** Alternative to 'content' prop, you can pass a render function.\r",
         " The function will only be called when content is shown, this can save performance."
        ]
       },
@@ -61057,9 +61443,9 @@
       "name": "openDelay",
       "comment": {
        "raw": [
-        "Defines how much 'ms' user should hold mouse over target to open the dropdown",
-        " This prop work only with openOnHover={true}",
-        " @default 0"
+        "/** Defines how much 'ms' user should hold mouse over target to open the dropdown\r",
+        "     * This prop work only with openOnHover={true}\r",
+        "     * @default 0"
        ],
        "tags": {
         "@default": 0
@@ -61079,9 +61465,9 @@
       "name": "closeDelay",
       "comment": {
        "raw": [
-        "Defines after which delay dropdown will be closed, if user leave mouse from target.",
-        " This prop work only with openOnHover={true}",
-        " @default 0"
+        "/** Defines after which delay dropdown will be closed, if user leave mouse from target.\r",
+        "     * This prop work only with openOnHover={true}\r",
+        "     * @default 0"
        ],
        "tags": {
         "@default": 0
@@ -61101,11 +61487,11 @@
       "name": "closeOnMouseLeave",
       "comment": {
        "raw": [
-        "Defined when to close dropdown in case of openOnHover={ true }",
-        " toggler — dropdown will be closed when a mouse leaves the target component",
-        " boundary — will not to close the dropdown when a mouse is on target or in 30px around target area",
-        " false — will not close dropdown by mouse move event",
-        " @default 'toggler'"
+        "/** Defined when to close dropdown in case of openOnHover={ true }\r",
+        "     * toggler — dropdown will be closed when a mouse leaves the target component\r",
+        "     * boundary — will not to close the dropdown when a mouse is on target or in 30px around target area\r",
+        "     * false — will not close dropdown by mouse move event\r",
+        "     * @default 'toggler'"
        ],
        "tags": {
         "@default": "toggler"
@@ -61130,8 +61516,9 @@
       "name": "portalTarget",
       "comment": {
        "raw": [
-        "Node of portal target, where to render the dropdown body.",
-        " By default, will be used global portal node."
+        "/**\r",
+        "     * Node of portal target, where to render the dropdown body.\r",
+        "     * By default, will be used global portal node."
        ]
       },
       "typeValue": {
@@ -61145,7 +61532,8 @@
       "name": "boundaryElement",
       "comment": {
        "raw": [
-        "Element relative to which dropdown will calculate position"
+        "/**\r",
+        "     * Element relative to which dropdown will calculate position"
        ]
       },
       "typeValue": {
@@ -61159,8 +61547,8 @@
       "name": "closeBodyOnTogglerHidden",
       "comment": {
        "raw": [
-        "Pass false, if you do not want to close the dropdown in case Toggler move out of viewport.",
-        " @default true"
+        "/** Pass false, if you do not want to close the dropdown in case Toggler move out of viewport.\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -61550,7 +61938,7 @@
       "name": "getName",
       "comment": {
        "raw": [
-        "A pure function that gets entity name from entity object.",
+        "/** A pure function that gets entity name from entity object.\r",
         "     Default: (item) => item.name."
        ]
       },
@@ -61602,7 +61990,7 @@
       "name": "renderNotFound",
       "comment": {
        "raw": [
-        "Overrides the default 'no records found' banner.",
+        "/** Overrides the default 'no records found' banner.\r",
         " The 'search' callback parameter allows to distinguish cases when there's no records at all, and when current search doesn't find anything."
        ]
       },
@@ -61679,14 +62067,15 @@
       "name": "cascadeSelection",
       "comment": {
        "raw": [
-        "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.",
-        " - false: All nodes are selected independently (default).",
-        " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.",
-        " - 'implicit': Selecting a parent node means that all children are considered checked.",
-        "   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked",
-        "   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,",
-        "   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last",
-        "   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
+        "/**\r",
+        "     * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.\r",
+        "     * - false: All nodes are selected independently (default).\r",
+        "     * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.\r",
+        "     * - 'implicit': Selecting a parent node means that all children are considered checked.\r",
+        "     *   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked\r",
+        "     *   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,\r",
+        "     *   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last\r",
+        "     *   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
        ]
       },
       "typeValue": {
@@ -61920,8 +62309,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -62164,12 +62554,13 @@
       "name": "searchPosition",
       "comment": {
        "raw": [
-        "Defines where search field is:",
-        " 'input' - try to place search inside the toggler (default for single-select),",
-        " 'body' - put search inside the dropdown (default for multi-select)",
-        " 'none' - disables search completely",
-        "",
-        " Note: 'searchPosition' cannot be 'input' if 'editMode' is 'modal'"
+        "/**\r",
+        "      *  Defines where search field is:\r",
+        "      * 'input' - try to place search inside the toggler (default for single-select),\r",
+        "      * 'body' - put search inside the dropdown (default for multi-select)\r",
+        "      * 'none' - disables search completely\r",
+        "      *\r",
+        "      * Note: 'searchPosition' cannot be 'input' if 'editMode' is 'modal'"
        ]
       },
       "typeValue": {
@@ -62208,10 +62599,11 @@
       "name": "minCharsToSearch",
       "comment": {
        "raw": [
-        "Minimum characters to type, before search will trigger. If input characters number is less then 'minCharsToSearch', it will disable opening dropdown body.",
-        " By default search triggers after input value is changed.",
-        "",
-        " Note: defined minCharsToSearch isn't compatible with searchPosition=body."
+        "/**\r",
+        "     * Minimum characters to type, before search will trigger. If input characters number is less then 'minCharsToSearch', it will disable opening dropdown body.\r",
+        "     * By default search triggers after input value is changed.\r",
+        "     *\r",
+        "     * Note: defined minCharsToSearch isn't compatible with searchPosition=body."
        ]
       },
       "typeValue": {
@@ -62349,7 +62741,8 @@
       "name": "highlightSearchMatches",
       "comment": {
        "raw": [
-        "Enables highlighting of the items' text with search-matching results."
+        "/**\r",
+        "     * Enables highlighting of the items' text with search-matching results."
        ]
       },
       "typeValue": {
@@ -62649,7 +63042,7 @@
       "name": "getName",
       "comment": {
        "raw": [
-        "A pure function that gets entity name from entity object.",
+        "/** A pure function that gets entity name from entity object.\r",
         "     Default: (item) => item.name."
        ]
       },
@@ -62701,7 +63094,7 @@
       "name": "renderNotFound",
       "comment": {
        "raw": [
-        "Overrides the default 'no records found' banner.",
+        "/** Overrides the default 'no records found' banner.\r",
         " The 'search' callback parameter allows to distinguish cases when there's no records at all, and when current search doesn't find anything."
        ]
       },
@@ -62778,14 +63171,15 @@
       "name": "cascadeSelection",
       "comment": {
        "raw": [
-        "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.",
-        " - false: All nodes are selected independently (default).",
-        " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.",
-        " - 'implicit': Selecting a parent node means that all children are considered checked.",
-        "   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked",
-        "   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,",
-        "   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last",
-        "   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
+        "/**\r",
+        "     * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.\r",
+        "     * - false: All nodes are selected independently (default).\r",
+        "     * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.\r",
+        "     * - 'implicit': Selecting a parent node means that all children are considered checked.\r",
+        "     *   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked\r",
+        "     *   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,\r",
+        "     *   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last\r",
+        "     *   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
        ]
       },
       "typeValue": {
@@ -63019,8 +63413,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -63037,8 +63432,9 @@
       "name": "maxDefaultItems",
       "comment": {
        "raw": [
-        "Number of default items to show initially, when nothing is selected.",
-        " @default 10"
+        "/**\r",
+        "     * Number of default items to show initially, when nothing is selected.\r",
+        "     * @default 10"
        ],
        "tags": {
         "@default": 10
@@ -63058,8 +63454,9 @@
       "name": "maxTotalItems",
       "comment": {
        "raw": [
-        "Maximum total number of items to show, including selected",
-        " @default 50"
+        "/**\r",
+        "     * Maximum total number of items to show, including selected\r",
+        "     * @default 50"
        ],
        "tags": {
         "@default": 50
@@ -63079,8 +63476,9 @@
       "name": "defaultIds",
       "comment": {
        "raw": [
-        "Ids of items to show first.",
-        " If not specified, top props.maxDefaultItems will be shown according to the DataSource sorting settings (default is 10)"
+        "/**\r",
+        "     * Ids of items to show first.\r",
+        "     * If not specified, top props.maxDefaultItems will be shown according to the DataSource sorting settings (default is 10)"
        ]
       },
       "typeValue": {
@@ -63355,7 +63753,7 @@
       "name": "getName",
       "comment": {
        "raw": [
-        "A pure function that gets entity name from entity object.",
+        "/** A pure function that gets entity name from entity object.\r",
         "     Default: (item) => item.name."
        ]
       },
@@ -63407,7 +63805,7 @@
       "name": "renderNotFound",
       "comment": {
        "raw": [
-        "Overrides the default 'no records found' banner.",
+        "/** Overrides the default 'no records found' banner.\r",
         " The 'search' callback parameter allows to distinguish cases when there's no records at all, and when current search doesn't find anything."
        ]
       },
@@ -63484,14 +63882,15 @@
       "name": "cascadeSelection",
       "comment": {
        "raw": [
-        "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.",
-        " - false: All nodes are selected independently (default).",
-        " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.",
-        " - 'implicit': Selecting a parent node means that all children are considered checked.",
-        "   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked",
-        "   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,",
-        "   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last",
-        "   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
+        "/**\r",
+        "     * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.\r",
+        "     * - false: All nodes are selected independently (default).\r",
+        "     * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.\r",
+        "     * - 'implicit': Selecting a parent node means that all children are considered checked.\r",
+        "     *   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked\r",
+        "     *   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,\r",
+        "     *   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last\r",
+        "     *   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
        ]
       },
       "typeValue": {
@@ -63750,7 +64149,8 @@
       "name": "disallowClickOutside",
       "comment": {
        "raw": [
-        "@default false"
+        "/**\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -64691,8 +65091,9 @@
       "name": "size",
       "comment": {
        "raw": [
-        "Component size. If omitted, 48 size will be used.",
-        " @default '48'"
+        "/**\r",
+        "     * Component size. If omitted, 48 size will be used.\r",
+        "     * @default '48'"
        ],
        "tags": {
         "@default": "48"
@@ -65029,8 +65430,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -65694,8 +66096,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -66967,8 +67370,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -67320,8 +67724,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -68018,8 +68423,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -68594,8 +69000,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -68892,10 +69299,11 @@
       "name": "mode",
       "comment": {
        "raw": [
-        "Visual mode for component:",
-        " - form: default visuals, to use in forms.",
-        " - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)",
-        " - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
+        "/**\r",
+        "     * Visual mode for component:\r",
+        "     * - form: default visuals, to use in forms.\r",
+        "     * - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)\r",
+        "     * - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
        ]
       },
       "typeValue": {
@@ -68965,7 +69373,7 @@
       "name": "getName",
       "comment": {
        "raw": [
-        "A pure function that gets entity name from entity object.",
+        "/** A pure function that gets entity name from entity object.\r",
         "     Default: (item) => item.name."
        ]
       },
@@ -69017,7 +69425,7 @@
       "name": "renderNotFound",
       "comment": {
        "raw": [
-        "Overrides the default 'no records found' banner.",
+        "/** Overrides the default 'no records found' banner.\r",
         " The 'search' callback parameter allows to distinguish cases when there's no records at all, and when current search doesn't find anything."
        ]
       },
@@ -69094,14 +69502,15 @@
       "name": "cascadeSelection",
       "comment": {
        "raw": [
-        "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.",
-        " - false: All nodes are selected independently (default).",
-        " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.",
-        " - 'implicit': Selecting a parent node means that all children are considered checked.",
-        "   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked",
-        "   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,",
-        "   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last",
-        "   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
+        "/**\r",
+        "     * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.\r",
+        "     * - false: All nodes are selected independently (default).\r",
+        "     * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.\r",
+        "     * - 'implicit': Selecting a parent node means that all children are considered checked.\r",
+        "     *   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked\r",
+        "     *   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,\r",
+        "     *   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last\r",
+        "     *   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
        ]
       },
       "typeValue": {
@@ -69335,8 +69744,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -69579,12 +69989,13 @@
       "name": "searchPosition",
       "comment": {
        "raw": [
-        "Defines where search field is:",
-        " 'input' - try to place search inside the toggler (default for single-select),",
-        " 'body' - put search inside the dropdown (default for multi-select)",
-        " 'none' - disables search completely",
-        "",
-        " Note: 'searchPosition' cannot be 'input' if 'editMode' is 'modal'"
+        "/**\r",
+        "      *  Defines where search field is:\r",
+        "      * 'input' - try to place search inside the toggler (default for single-select),\r",
+        "      * 'body' - put search inside the dropdown (default for multi-select)\r",
+        "      * 'none' - disables search completely\r",
+        "      *\r",
+        "      * Note: 'searchPosition' cannot be 'input' if 'editMode' is 'modal'"
        ]
       },
       "typeValue": {
@@ -69623,10 +70034,11 @@
       "name": "minCharsToSearch",
       "comment": {
        "raw": [
-        "Minimum characters to type, before search will trigger. If input characters number is less then 'minCharsToSearch', it will disable opening dropdown body.",
-        " By default search triggers after input value is changed.",
-        "",
-        " Note: defined minCharsToSearch isn't compatible with searchPosition=body."
+        "/**\r",
+        "     * Minimum characters to type, before search will trigger. If input characters number is less then 'minCharsToSearch', it will disable opening dropdown body.\r",
+        "     * By default search triggers after input value is changed.\r",
+        "     *\r",
+        "     * Note: defined minCharsToSearch isn't compatible with searchPosition=body."
        ]
       },
       "typeValue": {
@@ -69764,7 +70176,8 @@
       "name": "highlightSearchMatches",
       "comment": {
        "raw": [
-        "Enables highlighting of the items' text with search-matching results."
+        "/**\r",
+        "     * Enables highlighting of the items' text with search-matching results."
        ]
       },
       "typeValue": {
@@ -70190,7 +70603,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '24'"
+        "/**\r",
+        "     * @default '24'"
        ],
        "tags": {
         "@default": "24"
@@ -70446,8 +70860,9 @@
       "name": "selectAll",
       "comment": {
        "raw": [
-        "ICheckable object for Select All behavior.",
-        " If omitted, Select All action will be absent."
+        "/**\r",
+        "     * ICheckable object for Select All behavior.\r",
+        "     * If omitted, Select All action will be absent."
        ]
       },
       "typeValue": {
@@ -70478,8 +70893,9 @@
       "name": "rowsCount",
       "comment": {
        "raw": [
-        "Count of rows, after applying filter, and folding on tree nodes.",
-        " Obsolete! Please switch to exactRowsCount / knownRowsCount"
+        "/**\r",
+        "     * Count of rows, after applying filter, and folding on tree nodes.\r",
+        "     * Obsolete! Please switch to exactRowsCount / knownRowsCount"
        ]
       },
       "typeValue": {
@@ -70513,9 +70929,10 @@
       "name": "knownRowsCount",
       "comment": {
        "raw": [
-        "There's at least knownRowsCount rows. There can be more if list is lazy loaded.",
-        " Equals to exactRowsCount if all rows are loaded, or if API returns rows count",
-        " Otherwise, exactRowsCount will be null, and knownRowsCount will specify number of loaded rows."
+        "/**\r",
+        "     * There's at least knownRowsCount rows. There can be more if list is lazy loaded.\r",
+        "     * Equals to exactRowsCount if all rows are loaded, or if API returns rows count\r",
+        "     * Otherwise, exactRowsCount will be null, and knownRowsCount will specify number of loaded rows."
        ]
       },
       "typeValue": {
@@ -70976,8 +71393,9 @@
       "name": "pin",
       "comment": {
        "raw": [
-        "A pure function that gets pinned state for each row.",
-        " If row pinned, it means that it will be sticky inside their parent section."
+        "/**\r",
+        "     * A pure function that gets pinned state for each row.\r",
+        "     * If row pinned, it means that it will be sticky inside their parent section."
        ]
       },
       "typeValue": {
@@ -71214,9 +71632,9 @@
       "name": "indent",
       "comment": {
        "raw": [
-        "Indent of the item, to show hierarchy.",
-        "  Unlike depth, it contains additional logic, to not add unnecessary indents:",
-        "  if all children of node has no children, all nodes would get the same indent as parent."
+        "/** Indent of the item, to show hierarchy.\r",
+        "         *  Unlike depth, it contains additional logic, to not add unnecessary indents:\r",
+        "         *  if all children of node has no children, all nodes would get the same indent as parent."
        ]
       },
       "typeValue": {
@@ -71335,7 +71753,7 @@
       "name": "isChildrenChecked",
       "comment": {
        "raw": [
-        "True if some of row's children are checked.",
+        "/** True if some of row's children are checked.\r",
         " Used to show 'indefinite' checkbox state, to show user that something inside is checked"
        ]
       },
@@ -71421,8 +71839,8 @@
       "name": "onFold",
       "comment": {
        "raw": [
-        "Handles row folding change.",
-        " We demand to pass the row as well, to avoid creating closures for each row."
+        "/** Handles row folding change.\r",
+        "         * We demand to pass the row as well, to avoid creating closures for each row."
        ]
       },
       "typeValue": {
@@ -71439,8 +71857,8 @@
       "name": "onCheck",
       "comment": {
        "raw": [
-        "Handles row checkbox change.",
-        " We demand to pass the row as well, to avoid creating closures for each row."
+        "/** Handles row checkbox change.\r",
+        "         * We demand to pass the row as well, to avoid creating closures for each row."
        ]
       },
       "typeValue": {
@@ -71457,8 +71875,8 @@
       "name": "onSelect",
       "comment": {
        "raw": [
-        "Handles row selection.",
-        " We demand to pass the row as well, to avoid creating closures for each row."
+        "/** Handles row selection.\r",
+        "         * We demand to pass the row as well, to avoid creating closures for each row."
        ]
       },
       "typeValue": {
@@ -71475,7 +71893,7 @@
       "name": "onFocus",
       "comment": {
        "raw": [
-        "Handles row focusing."
+        "/** Handles row focusing."
        ]
       },
       "typeValue": {
@@ -72143,8 +72561,9 @@
       "name": "selectAll",
       "comment": {
        "raw": [
-        "ICheckable object for Select All behavior.",
-        " If omitted, Select All action will be absent."
+        "/**\r",
+        "     * ICheckable object for Select All behavior.\r",
+        "     * If omitted, Select All action will be absent."
        ]
       },
       "typeValue": {
@@ -72175,8 +72594,9 @@
       "name": "rowsCount",
       "comment": {
        "raw": [
-        "Count of rows, after applying filter, and folding on tree nodes.",
-        " Obsolete! Please switch to exactRowsCount / knownRowsCount"
+        "/**\r",
+        "     * Count of rows, after applying filter, and folding on tree nodes.\r",
+        "     * Obsolete! Please switch to exactRowsCount / knownRowsCount"
        ]
       },
       "typeValue": {
@@ -72210,9 +72630,10 @@
       "name": "knownRowsCount",
       "comment": {
        "raw": [
-        "There's at least knownRowsCount rows. There can be more if list is lazy loaded.",
-        " Equals to exactRowsCount if all rows are loaded, or if API returns rows count",
-        " Otherwise, exactRowsCount will be null, and knownRowsCount will specify number of loaded rows."
+        "/**\r",
+        "     * There's at least knownRowsCount rows. There can be more if list is lazy loaded.\r",
+        "     * Equals to exactRowsCount if all rows are loaded, or if API returns rows count\r",
+        "     * Otherwise, exactRowsCount will be null, and knownRowsCount will specify number of loaded rows."
        ]
       },
       "typeValue": {
@@ -72246,8 +72667,8 @@
       "name": "allowColumnsReordering",
       "comment": {
        "raw": [
-        "If true, allows user to change columns order",
-        " @default false"
+        "/** If true, allows user to change columns order\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -72267,8 +72688,8 @@
       "name": "allowColumnsResizing",
       "comment": {
        "raw": [
-        "If true, allows user to change columns width",
-        " @default false"
+        "/** If true, allows user to change columns width\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -72657,8 +73078,9 @@
       "name": "disableClear",
       "comment": {
        "raw": [
-        "Disable clearing date value (e.g. via cross icon)",
-        " @default false"
+        "/**\r",
+        "     * Disable clearing date value (e.g. via cross icon)\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -72969,8 +73391,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -73021,10 +73444,11 @@
       "name": "mode",
       "comment": {
        "raw": [
-        "Visual mode for component:",
-        " - form: default visuals, to use in forms.",
-        " - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)",
-        " - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
+        "/**\r",
+        "     * Visual mode for component:\r",
+        "     * - form: default visuals, to use in forms.\r",
+        "     * - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)\r",
+        "     * - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
        ]
       },
       "typeValue": {
@@ -73360,8 +73784,8 @@
       "name": "showArrow",
       "comment": {
        "raw": [
-        "If true, arrow tip will be shown",
-        " @default false"
+        "/** If true, arrow tip will be shown\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -73381,11 +73805,12 @@
       "name": "focusLock",
       "comment": {
        "raw": [
-        "Pass true to wrap DropdownContainer with FocusLock component to support keyboard navigation.",
-        " If omitted, true value will be used.",
-        "",
-        " After DropdownContainer appeared the focus will be set on the first focusable element inside.",
-        " @default true"
+        "/**\r",
+        "     * Pass true to wrap DropdownContainer with FocusLock component to support keyboard navigation.\r",
+        "     * If omitted, true value will be used.\r",
+        "     *\r",
+        "     * After DropdownContainer appeared the focus will be set on the first focusable element inside.\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -73405,8 +73830,9 @@
       "name": "returnFocus",
       "comment": {
        "raw": [
-        "Pass true to return focus into initial position on unmount.",
-        " If omitted, true value will be used. It's used if focusLock=true."
+        "/**\r",
+        "     * Pass true to return focus into initial position on unmount.\r",
+        "     * If omitted, true value will be used. It's used if focusLock=true."
        ]
       },
       "typeValue": {
@@ -73423,8 +73849,9 @@
       "name": "persistentFocus",
       "comment": {
        "raw": [
-        "Pass true to lock focus within DropdownContainer.",
-        " If omitted, true value will be used. It's used if focusLock=true."
+        "/**\r",
+        "     * Pass true to lock focus within DropdownContainer.\r",
+        "     * If omitted, true value will be used. It's used if focusLock=true."
        ]
       },
       "typeValue": {
@@ -73441,7 +73868,8 @@
       "name": "lockProps",
       "comment": {
        "raw": [
-        "Pass any extra props to the FocusLock wrapper."
+        "/**\r",
+        "     * Pass any extra props to the FocusLock wrapper."
        ]
       },
       "typeValue": {
@@ -73455,7 +73883,8 @@
       "name": "shards",
       "comment": {
        "raw": [
-        "Pass an array of ref pointing to the nodes, which focus lock should consider and a part of it. This is a way of focus scattering."
+        "/**\r",
+        "     * Pass an array of ref pointing to the nodes, which focus lock should consider and a part of it. This is a way of focus scattering."
        ]
       },
       "typeValue": {
@@ -73469,7 +73898,8 @@
       "name": "as",
       "comment": {
        "raw": [
-        "Pass element name if you need to change internal FocusLock div element, to any other."
+        "/**\r",
+        "     * Pass element name if you need to change internal FocusLock div element, to any other."
        ]
       },
       "typeValue": {
@@ -73486,8 +73916,9 @@
       "name": "closeOnEsc",
       "comment": {
        "raw": [
-        "Pass true to handle Escape key press and call props.onClose().",
-        " If omitted, true value will be used. It's used if focusLock=true."
+        "/**\r",
+        "     * Pass true to handle Escape key press and call props.onClose().\r",
+        "     * If omitted, true value will be used. It's used if focusLock=true."
        ]
       },
       "typeValue": {
@@ -73504,7 +73935,7 @@
       "name": "onKeyDown",
       "comment": {
        "raw": [
-        "Called on keyDown event in DropdownContainer.",
+        "/** Called on keyDown event in DropdownContainer.\r",
         "     Can be used to provide your own handlers."
        ]
       },
@@ -73889,8 +74320,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -74051,11 +74483,12 @@
       "name": "focusLock",
       "comment": {
        "raw": [
-        "Pass true to wrap DropdownContainer with FocusLock component to support keyboard navigation.",
-        " If omitted, true value will be used.",
-        "",
-        " After DropdownContainer appeared the focus will be set on the first focusable element inside.",
-        " @default true"
+        "/**\r",
+        "     * Pass true to wrap DropdownContainer with FocusLock component to support keyboard navigation.\r",
+        "     * If omitted, true value will be used.\r",
+        "     *\r",
+        "     * After DropdownContainer appeared the focus will be set on the first focusable element inside.\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -74251,8 +74684,9 @@
       "name": "eventHandlers",
       "comment": {
        "raw": [
-        "Event handlers. Component is expected to pass these events to the top element it renders.",
-        " As onClick event on the element will be overwritten, use DndActorProps.onClick to receive click events on the element"
+        "/**\r",
+        "     * Event handlers. Component is expected to pass these events to the top element it renders.\r",
+        "     * As onClick event on the element will be overwritten, use DndActorProps.onClick to receive click events on the element"
        ]
       },
       "typeValue": {
@@ -74266,8 +74700,9 @@
       "name": "classNames",
       "comment": {
        "raw": [
-        "CSS class names to add to the element.",
-        " Some of these markers are used by the DndActor internally, so they must be added even if no used by component itself to apply styles."
+        "/**\r",
+        "     * CSS class names to add to the element.\r",
+        "     * Some of these markers are used by the DndActor internally, so they must be added even if no used by component itself to apply styles."
        ]
       },
       "typeValue": {
@@ -75554,8 +75989,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -75805,7 +76241,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'default'"
+        "/**\r",
+        "     * @default 'default'"
        ],
        "tags": {
         "@default": "default"
@@ -76080,8 +76517,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -76248,7 +76686,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'default'"
+        "/**\r",
+        "     * @default 'default'"
        ],
        "tags": {
         "@default": "default"
@@ -76566,8 +77005,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -76731,10 +77171,11 @@
       "name": "mode",
       "comment": {
        "raw": [
-        "Visual mode for component:",
-        " - form: default visuals, to use in forms.",
-        " - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)",
-        " - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
+        "/**\r",
+        "     * Visual mode for component:\r",
+        "     * - form: default visuals, to use in forms.\r",
+        "     * - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)\r",
+        "     * - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
        ]
       },
       "typeValue": {
@@ -77059,8 +77500,8 @@
       "name": "htmlFor",
       "comment": {
        "raw": [
-        "HTML 'for' tag to bind the label to a component.",
-        " Can be used when component can't be wrapped by the LabeledInput, e.g. when form is layed out as table with labels and inputs placed into different columns"
+        "/** HTML 'for' tag to bind the label to a component.\r",
+        "     * Can be used when component can't be wrapped by the LabeledInput, e.g. when form is layed out as table with labels and inputs placed into different columns"
        ]
       },
       "typeValue": {
@@ -77580,8 +78021,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -77900,7 +78342,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '36'"
+        "/**\r",
+        "     * @default '36'"
        ],
        "tags": {
         "@default": "36"
@@ -77927,7 +78370,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'primary'"
+        "/**\r",
+        "     * @default 'primary'"
        ],
        "tags": {
         "@default": "primary"
@@ -78199,8 +78643,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -78433,7 +78878,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'primary'"
+        "/**\r",
+        "     * @default 'primary'"
        ],
        "tags": {
         "@default": "primary"
@@ -79056,8 +79502,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -79443,7 +79890,7 @@
       "name": "children",
       "comment": {
        "raw": [
-        "@deprecated",
+        "/** @deprecated\r",
         " Use 'items' prop to define menu content"
        ]
       },
@@ -79595,8 +80042,8 @@
       "name": "renderBurger",
       "comment": {
        "raw": [
-        "Render callback for burger menu content.",
-        " Burger will appear, which some items don't fit the menu width."
+        "/** Render callback for burger menu content.\r",
+        "     * Burger will appear, which some items don't fit the menu width."
        ]
       },
       "typeValue": {
@@ -80328,8 +80775,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -80626,12 +81074,12 @@
       "uid": 10,
       "name": "background",
       "typeValue": {
-       "raw": "'surface'"
+       "raw": "'surface-main'"
       },
       "editor": {
        "type": "oneOf",
        "options": [
-        "surface"
+        "surface-main"
        ]
       },
       "from": "@epam/uui:RowMods",
@@ -80858,12 +81306,12 @@
       "uid": 10,
       "name": "background",
       "typeValue": {
-       "raw": "'surface'"
+       "raw": "'surface-main'"
       },
       "editor": {
        "type": "oneOf",
        "options": [
-        "surface"
+        "surface-main"
        ]
       },
       "from": "@epam/uui:RowMods",
@@ -81096,8 +81544,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -81186,7 +81635,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'primary'"
+        "/**\r",
+        "     * @default 'primary'"
        ],
        "tags": {
         "@default": "primary"
@@ -81624,10 +82074,11 @@
       "name": "mode",
       "comment": {
        "raw": [
-        "Visual mode for component:",
-        " - form: default visuals, to use in forms.",
-        " - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)",
-        " - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
+        "/**\r",
+        "     * Visual mode for component:\r",
+        "     * - form: default visuals, to use in forms.\r",
+        "     * - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)\r",
+        "     * - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
        ]
       },
       "typeValue": {
@@ -81689,8 +82140,9 @@
       "name": "min",
       "comment": {
        "raw": [
-        "Minimum value (default is 0)",
-        " @default 0"
+        "/**\r",
+        "     * Minimum value (default is 0)\r",
+        "     * @default 0"
        ],
        "tags": {
         "@default": 0
@@ -81831,8 +82283,9 @@
       "name": "disableLocaleFormatting",
       "comment": {
        "raw": [
-        "Turns off locale-based formatting, standard Number.toString() is used instead",
-        " @default false"
+        "/**\r",
+        "     * Turns off locale-based formatting, standard Number.toString() is used instead\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -81866,10 +82319,11 @@
       "name": "formatValue",
       "comment": {
        "raw": [
-        "A function to convert current input value to displayed text.",
-        " Overrides standard Intl-based formatting.",
-        " If passed, only maximumFractionDigits considered from formatOptions when both properties provided.",
-        " Formatting is applied only when input is not focused."
+        "/**\r",
+        "     * A function to convert current input value to displayed text.\r",
+        "     * Overrides standard Intl-based formatting.\r",
+        "     * If passed, only maximumFractionDigits considered from formatOptions when both properties provided.\r",
+        "     * Formatting is applied only when input is not focused."
        ]
       },
       "typeValue": {
@@ -82097,8 +82551,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -82149,10 +82604,11 @@
       "name": "mode",
       "comment": {
        "raw": [
-        "Visual mode for component:",
-        " - form: default visuals, to use in forms.",
-        " - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)",
-        " - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
+        "/**\r",
+        "     * Visual mode for component:\r",
+        "     * - form: default visuals, to use in forms.\r",
+        "     * - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)\r",
+        "     * - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
        ]
       },
       "typeValue": {
@@ -82191,7 +82647,7 @@
       "interface PanelMods {",
       "    shadow?: boolean;",
       "    margin?: '24';",
-      "    background?: 'surface';",
+      "    background?: 'surface-main';",
       "}"
      ]
     },
@@ -82225,12 +82681,12 @@
       "uid": 3,
       "name": "background",
       "typeValue": {
-       "raw": "'surface'"
+       "raw": "'surface-main'"
       },
       "editor": {
        "type": "oneOf",
        "options": [
-        "surface"
+        "surface-main"
        ]
       },
       "required": false
@@ -82338,8 +82794,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -82393,12 +82850,12 @@
       "uid": 10,
       "name": "background",
       "typeValue": {
-       "raw": "'surface'"
+       "raw": "'surface-main'"
       },
       "editor": {
        "type": "oneOf",
        "options": [
-        "surface"
+        "surface-main"
        ]
       },
       "from": "@epam/uui:PanelMods",
@@ -82452,10 +82909,11 @@
       "name": "mode",
       "comment": {
        "raw": [
-        "Visual mode for component:",
-        " - form: default visuals, to use in forms.",
-        " - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)",
-        " - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
+        "/**\r",
+        "     * Visual mode for component:\r",
+        "     * - form: default visuals, to use in forms.\r",
+        "     * - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)\r",
+        "     * - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
        ]
       },
       "typeValue": {
@@ -82563,8 +83021,9 @@
       "name": "highlightSearchMatches",
       "comment": {
        "raw": [
-        "Enables highlighting of the items' text with search-matching results.",
-        " @default true"
+        "/**\r",
+        "     * Enables highlighting of the items' text with search-matching results.\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -82763,8 +83222,9 @@
       "name": "pin",
       "comment": {
        "raw": [
-        "A pure function that gets pinned state for each row.",
-        " If row pinned, it means that it will be sticky inside their parent section."
+        "/**\r",
+        "     * A pure function that gets pinned state for each row.\r",
+        "     * If row pinned, it means that it will be sticky inside their parent section."
        ]
       },
       "typeValue": {
@@ -83001,9 +83461,9 @@
       "name": "indent",
       "comment": {
        "raw": [
-        "Indent of the item, to show hierarchy.",
-        "  Unlike depth, it contains additional logic, to not add unnecessary indents:",
-        "  if all children of node has no children, all nodes would get the same indent as parent."
+        "/** Indent of the item, to show hierarchy.\r",
+        "         *  Unlike depth, it contains additional logic, to not add unnecessary indents:\r",
+        "         *  if all children of node has no children, all nodes would get the same indent as parent."
        ]
       },
       "typeValue": {
@@ -83122,7 +83582,7 @@
       "name": "isChildrenChecked",
       "comment": {
        "raw": [
-        "True if some of row's children are checked.",
+        "/** True if some of row's children are checked.\r",
         " Used to show 'indefinite' checkbox state, to show user that something inside is checked"
        ]
       },
@@ -83208,8 +83668,8 @@
       "name": "onFold",
       "comment": {
        "raw": [
-        "Handles row folding change.",
-        " We demand to pass the row as well, to avoid creating closures for each row."
+        "/** Handles row folding change.\r",
+        "         * We demand to pass the row as well, to avoid creating closures for each row."
        ]
       },
       "typeValue": {
@@ -83226,8 +83686,8 @@
       "name": "onCheck",
       "comment": {
        "raw": [
-        "Handles row checkbox change.",
-        " We demand to pass the row as well, to avoid creating closures for each row."
+        "/** Handles row checkbox change.\r",
+        "         * We demand to pass the row as well, to avoid creating closures for each row."
        ]
       },
       "typeValue": {
@@ -83244,8 +83704,8 @@
       "name": "onSelect",
       "comment": {
        "raw": [
-        "Handles row selection.",
-        " We demand to pass the row as well, to avoid creating closures for each row."
+        "/** Handles row selection.\r",
+        "         * We demand to pass the row as well, to avoid creating closures for each row."
        ]
       },
       "typeValue": {
@@ -83262,7 +83722,7 @@
       "name": "onFocus",
       "comment": {
        "raw": [
-        "Handles row focusing."
+        "/** Handles row focusing."
        ]
       },
       "typeValue": {
@@ -83532,8 +83992,9 @@
       "name": "pin",
       "comment": {
        "raw": [
-        "A pure function that gets pinned state for each row.",
-        " If row pinned, it means that it will be sticky inside their parent section."
+        "/**\r",
+        "     * A pure function that gets pinned state for each row.\r",
+        "     * If row pinned, it means that it will be sticky inside their parent section."
        ]
       },
       "typeValue": {
@@ -83770,9 +84231,9 @@
       "name": "indent",
       "comment": {
        "raw": [
-        "Indent of the item, to show hierarchy.",
-        "  Unlike depth, it contains additional logic, to not add unnecessary indents:",
-        "  if all children of node has no children, all nodes would get the same indent as parent."
+        "/** Indent of the item, to show hierarchy.\r",
+        "         *  Unlike depth, it contains additional logic, to not add unnecessary indents:\r",
+        "         *  if all children of node has no children, all nodes would get the same indent as parent."
        ]
       },
       "typeValue": {
@@ -83891,7 +84352,7 @@
       "name": "isChildrenChecked",
       "comment": {
        "raw": [
-        "True if some of row's children are checked.",
+        "/** True if some of row's children are checked.\r",
         " Used to show 'indefinite' checkbox state, to show user that something inside is checked"
        ]
       },
@@ -83977,8 +84438,8 @@
       "name": "onFold",
       "comment": {
        "raw": [
-        "Handles row folding change.",
-        " We demand to pass the row as well, to avoid creating closures for each row."
+        "/** Handles row folding change.\r",
+        "         * We demand to pass the row as well, to avoid creating closures for each row."
        ]
       },
       "typeValue": {
@@ -83995,8 +84456,8 @@
       "name": "onCheck",
       "comment": {
        "raw": [
-        "Handles row checkbox change.",
-        " We demand to pass the row as well, to avoid creating closures for each row."
+        "/** Handles row checkbox change.\r",
+        "         * We demand to pass the row as well, to avoid creating closures for each row."
        ]
       },
       "typeValue": {
@@ -84013,8 +84474,8 @@
       "name": "onSelect",
       "comment": {
        "raw": [
-        "Handles row selection.",
-        " We demand to pass the row as well, to avoid creating closures for each row."
+        "/** Handles row selection.\r",
+        "         * We demand to pass the row as well, to avoid creating closures for each row."
        ]
       },
       "typeValue": {
@@ -84031,7 +84492,7 @@
       "name": "onFocus",
       "comment": {
        "raw": [
-        "Handles row focusing."
+        "/** Handles row focusing."
        ]
       },
       "typeValue": {
@@ -84149,7 +84610,8 @@
       "name": "disallowClickOutside",
       "comment": {
        "raw": [
-        "@default false"
+        "/**\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -84251,7 +84713,7 @@
       "name": "getName",
       "comment": {
        "raw": [
-        "A pure function that gets entity name from entity object.",
+        "/** A pure function that gets entity name from entity object.\r",
         "     Default: (item) => item.name."
        ]
       },
@@ -84303,7 +84765,7 @@
       "name": "renderNotFound",
       "comment": {
        "raw": [
-        "Overrides the default 'no records found' banner.",
+        "/** Overrides the default 'no records found' banner.\r",
         " The 'search' callback parameter allows to distinguish cases when there's no records at all, and when current search doesn't find anything."
        ]
       },
@@ -84380,14 +84842,15 @@
       "name": "cascadeSelection",
       "comment": {
        "raw": [
-        "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.",
-        " - false: All nodes are selected independently (default).",
-        " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.",
-        " - 'implicit': Selecting a parent node means that all children are considered checked.",
-        "   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked",
-        "   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,",
-        "   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last",
-        "   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
+        "/**\r",
+        "     * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.\r",
+        "     * - false: All nodes are selected independently (default).\r",
+        "     * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.\r",
+        "     * - 'implicit': Selecting a parent node means that all children are considered checked.\r",
+        "     *   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked\r",
+        "     *   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,\r",
+        "     *   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last\r",
+        "     *   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
        ]
       },
       "typeValue": {
@@ -84621,8 +85084,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -84639,8 +85103,9 @@
       "name": "maxDefaultItems",
       "comment": {
        "raw": [
-        "Number of default items to show initially, when nothing is selected.",
-        " @default 10"
+        "/**\r",
+        "     * Number of default items to show initially, when nothing is selected.\r",
+        "     * @default 10"
        ],
        "tags": {
         "@default": 10
@@ -84660,8 +85125,9 @@
       "name": "maxTotalItems",
       "comment": {
        "raw": [
-        "Maximum total number of items to show, including selected",
-        " @default 50"
+        "/**\r",
+        "     * Maximum total number of items to show, including selected\r",
+        "     * @default 50"
        ],
        "tags": {
         "@default": 50
@@ -84681,8 +85147,9 @@
       "name": "defaultIds",
       "comment": {
        "raw": [
-        "Ids of items to show first.",
-        " If not specified, top props.maxDefaultItems will be shown according to the DataSource sorting settings (default is 10)"
+        "/**\r",
+        "     * Ids of items to show first.\r",
+        "     * If not specified, top props.maxDefaultItems will be shown according to the DataSource sorting settings (default is 10)"
        ]
       },
       "typeValue": {
@@ -84713,10 +85180,11 @@
       "name": "mode",
       "comment": {
        "raw": [
-        "Visual mode for component:",
-        " - form: default visuals, to use in forms.",
-        " - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)",
-        " - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
+        "/**\r",
+        "     * Visual mode for component:\r",
+        "     * - form: default visuals, to use in forms.\r",
+        "     * - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)\r",
+        "     * - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
        ]
       },
       "typeValue": {
@@ -84982,7 +85450,7 @@
       "name": "getName",
       "comment": {
        "raw": [
-        "A pure function that gets entity name from entity object.",
+        "/** A pure function that gets entity name from entity object.\r",
         "     Default: (item) => item.name."
        ]
       },
@@ -85034,7 +85502,7 @@
       "name": "renderNotFound",
       "comment": {
        "raw": [
-        "Overrides the default 'no records found' banner.",
+        "/** Overrides the default 'no records found' banner.\r",
         " The 'search' callback parameter allows to distinguish cases when there's no records at all, and when current search doesn't find anything."
        ]
       },
@@ -85111,14 +85579,15 @@
       "name": "cascadeSelection",
       "comment": {
        "raw": [
-        "Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.",
-        " - false: All nodes are selected independently (default).",
-        " - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.",
-        " - 'implicit': Selecting a parent node means that all children are considered checked.",
-        "   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked",
-        "   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,",
-        "   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last",
-        "   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
+        "/**\r",
+        "     * Controls how the selection (checking items) of a parent node affects the selection of its all children, and vice versa.\r",
+        "     * - false: All nodes are selected independently (default).\r",
+        "     * - true or 'explicit': Selecting a parent node explicitly selects all its children. Unchecking the last parent's child unchecks its parent.\r",
+        "     * - 'implicit': Selecting a parent node means that all children are considered checked.\r",
+        "     *   The user sees all these nodes as checked on the UI, but only the selected parent is visible in the PickerInput tags, and only the checked\r",
+        "     *   parent is present in the Picker's value or DataSourceState.checked array. When the user unchecks the first child of such a parent,\r",
+        "     *   its parents become unchecked and all children but the unchecked one become checked, making children's selection explicit. If the last\r",
+        "     *   unchecked child gets checked, all children from the checked are removed, returning to the implicit state when only the parent is checked."
        ]
       },
       "typeValue": {
@@ -85377,7 +85846,8 @@
       "name": "disallowClickOutside",
       "comment": {
        "raw": [
-        "@default false"
+        "/**\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -85612,10 +86082,11 @@
       "name": "mode",
       "comment": {
        "raw": [
-        "Visual mode for component:",
-        " - form: default visuals, to use in forms.",
-        " - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)",
-        " - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
+        "/**\r",
+        "     * Visual mode for component:\r",
+        "     * - form: default visuals, to use in forms.\r",
+        "     * - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)\r",
+        "     * - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
        ]
       },
       "typeValue": {
@@ -85915,7 +86386,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '18'"
+        "/**\r",
+        "     * @default '18'"
        ],
        "tags": {
         "@default": "18"
@@ -85961,7 +86433,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '18'"
+        "/**\r",
+        "     * @default '18'"
        ],
        "tags": {
         "@default": "18"
@@ -86193,8 +86666,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -86687,8 +87161,9 @@
       "name": "presets",
       "comment": {
        "raw": [
-        "Range presets (like 'this week', 'this month', etc.) to display at the right of the Picker's body.",
-        " UUI provides defaults in the 'rangeDatePickerPresets' exported variable - you can use it as is, or build on top of it (e.g. add your presets)"
+        "/**\r",
+        "     * Range presets (like 'this week', 'this month', etc.) to display at the right of the Picker's body.\r",
+        "     * UUI provides defaults in the 'rangeDatePickerPresets' exported variable - you can use it as is, or build on top of it (e.g. add your presets)"
        ]
       },
       "typeValue": {
@@ -86702,8 +87177,9 @@
       "name": "disableClear",
       "comment": {
        "raw": [
-        "Disables clearing component (with the cross icon)",
-        " @default false"
+        "/**\r",
+        "     * Disables clearing component (with the cross icon)\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -86723,8 +87199,9 @@
       "name": "placement",
       "comment": {
        "raw": [
-        "Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/)",
-        " @default 'bottom-start'"
+        "/**\r",
+        "     * Dropdown position relative to the input. See [Popper Docs](@link https://popper.js.org/)\r",
+        "     * @default 'bottom-start'"
        ],
        "tags": {
         "@default": "bottom-start"
@@ -87001,8 +87478,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -87129,7 +87607,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '14'"
+        "/**\r",
+        "     * @default '14'"
        ],
        "tags": {
         "@default": "14"
@@ -87229,7 +87708,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '14'"
+        "/**\r",
+        "     * @default '14'"
        ],
        "tags": {
         "@default": "14"
@@ -87278,7 +87758,7 @@
       "    spacing?: '6' | '12' | '18';",
       "    topShadow?: boolean;",
       "    vPadding?: '12' | '18' | '24' | '36' | '48';",
-      "    background?: 'surface';",
+      "    background?: 'surface-main';",
       "};"
      ]
     },
@@ -87410,12 +87890,12 @@
       "uid": 10,
       "name": "background",
       "typeValue": {
-       "raw": "'surface'"
+       "raw": "'surface-main'"
       },
       "editor": {
        "type": "oneOf",
        "options": [
-        "surface"
+        "surface-main"
        ]
       },
       "required": false
@@ -88040,8 +88520,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -88123,7 +88604,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '36'"
+        "/**\r",
+        "     * @default '36'"
        ],
        "tags": {
         "@default": "36"
@@ -88151,10 +88633,11 @@
       "name": "mode",
       "comment": {
        "raw": [
-        "Visual mode for component:",
-        " - form: default visuals, to use in forms.",
-        " - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)",
-        " - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
+        "/**\r",
+        "     * Visual mode for component:\r",
+        "     * - form: default visuals, to use in forms.\r",
+        "     * - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)\r",
+        "     * - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
        ]
       },
       "typeValue": {
@@ -88702,8 +89185,9 @@
       "name": "size",
       "comment": {
        "raw": [
-        "Component size. If omitted, 24 size will be used.",
-        " @default '24'"
+        "/**\r",
+        "     * Component size. If omitted, 24 size will be used.\r",
+        "     * @default '24'"
        ],
        "tags": {
         "@default": "24"
@@ -88727,8 +89211,9 @@
       "name": "color",
       "comment": {
        "raw": [
-        "Component color.",
-        " @default 'neutral'"
+        "/**\r",
+        "     * Component color.\r",
+        "     * @default 'neutral'"
        ],
        "tags": {
         "@default": "neutral"
@@ -88754,8 +89239,9 @@
       "name": "fill",
       "comment": {
        "raw": [
-        "Fill mode, solid is used by default",
-        " @default 'solid'"
+        "/**\r",
+        "     * Fill mode, solid is used by default\r",
+        "     * @default 'solid'"
        ],
        "tags": {
         "@default": "solid"
@@ -88837,7 +89323,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '18'"
+        "/**\r",
+        "     * @default '18'"
        ],
        "tags": {
         "@default": "18"
@@ -89056,8 +89543,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -89153,7 +89641,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '18'"
+        "/**\r",
+        "     * @default '18'"
        ],
        "tags": {
         "@default": "18"
@@ -89207,7 +89696,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '48'"
+        "/**\r",
+        "     * @default '48'"
        ],
        "tags": {
         "@default": "48"
@@ -89265,7 +89755,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '48'"
+        "/**\r",
+        "     * @default '48'"
        ],
        "tags": {
         "@default": "48"
@@ -89527,8 +90018,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -90069,8 +90561,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -90708,8 +91201,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -91129,10 +91623,11 @@
       "name": "mode",
       "comment": {
        "raw": [
-        "Visual mode for component:",
-        " - form: default visuals, to use in forms.",
-        " - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)",
-        " - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
+        "/**\r",
+        "     * Visual mode for component:\r",
+        "     * - form: default visuals, to use in forms.\r",
+        "     * - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)\r",
+        "     * - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
        ]
       },
       "typeValue": {
@@ -91194,7 +91689,8 @@
       "name": "autoSize",
       "comment": {
        "raw": [
-        "Enables auto-resizing height to fit text. Rows prop is ignored in this mode"
+        "/**\r",
+        "     * Enables auto-resizing height to fit text. Rows prop is ignored in this mode"
        ]
       },
       "typeValue": {
@@ -91539,10 +92035,11 @@
       "name": "mode",
       "comment": {
        "raw": [
-        "Visual mode for component:",
-        " - form: default visuals, to use in forms.",
-        " - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)",
-        " - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
+        "/**\r",
+        "     * Visual mode for component:\r",
+        "     * - form: default visuals, to use in forms.\r",
+        "     * - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)\r",
+        "     * - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
        ]
       },
       "typeValue": {
@@ -91652,7 +92149,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '36'"
+        "/**\r",
+        "     * @default '36'"
        ],
        "tags": {
         "@default": "36"
@@ -91679,10 +92177,11 @@
       "name": "mode",
       "comment": {
        "raw": [
-        "Visual mode for component:",
-        " - form: default visuals, to use in forms.",
-        " - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)",
-        " - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
+        "/**\r",
+        "     * Visual mode for component:\r",
+        "     * - form: default visuals, to use in forms.\r",
+        "     * - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)\r",
+        "     * - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
        ]
       },
       "typeValue": {
@@ -92319,8 +92818,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -92402,7 +92902,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '36'"
+        "/**\r",
+        "     * @default '36'"
        ],
        "tags": {
         "@default": "36"
@@ -92430,10 +92931,11 @@
       "name": "mode",
       "comment": {
        "raw": [
-        "Visual mode for component:",
-        " - form: default visuals, to use in forms.",
-        " - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)",
-        " - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
+        "/**\r",
+        "     * Visual mode for component:\r",
+        "     * - form: default visuals, to use in forms.\r",
+        "     * - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)\r",
+        "     * - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
        ]
       },
       "typeValue": {
@@ -92753,8 +93255,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -93028,7 +93531,8 @@
       "name": "minutesStep",
       "comment": {
        "raw": [
-        "@default 5"
+        "/**\r",
+        "     * @default 5"
        ],
        "tags": {
         "@default": 5
@@ -93047,7 +93551,8 @@
       "name": "format",
       "comment": {
        "raw": [
-        "@default 12"
+        "/**\r",
+        "     * @default 12"
        ],
        "tags": {
         "@default": 12
@@ -93343,10 +93848,11 @@
       "name": "mode",
       "comment": {
        "raw": [
-        "Visual mode for component:",
-        " - form: default visuals, to use in forms.",
-        " - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)",
-        " - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
+        "/**\r",
+        "     * Visual mode for component:\r",
+        "     * - form: default visuals, to use in forms.\r",
+        "     * - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)\r",
+        "     * - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
        ]
       },
       "typeValue": {
@@ -93397,8 +93903,9 @@
       "name": "color",
       "comment": {
        "raw": [
-        "Tooltip color",
-        " @default 'inverted'"
+        "/**\r",
+        "     * Tooltip color\r",
+        "     * @default 'inverted'"
        ],
        "tags": {
         "@default": "inverted"
@@ -93459,7 +93966,7 @@
       "name": "renderContent",
       "comment": {
        "raw": [
-        "Alternative to 'content' prop, you can pass a render function.",
+        "/** Alternative to 'content' prop, you can pass a render function.\r",
         " The function will only be called when content is shown, this can save performance."
        ]
       },
@@ -93747,9 +94254,9 @@
       "name": "openDelay",
       "comment": {
        "raw": [
-        "Defines how much 'ms' user should hold mouse over target to open the dropdown",
-        " This prop work only with openOnHover={true}",
-        " @default 0"
+        "/** Defines how much 'ms' user should hold mouse over target to open the dropdown\r",
+        "     * This prop work only with openOnHover={true}\r",
+        "     * @default 0"
        ],
        "tags": {
         "@default": 0
@@ -93769,9 +94276,9 @@
       "name": "closeDelay",
       "comment": {
        "raw": [
-        "Defines after which delay dropdown will be closed, if user leave mouse from target.",
-        " This prop work only with openOnHover={true}",
-        " @default 0"
+        "/** Defines after which delay dropdown will be closed, if user leave mouse from target.\r",
+        "     * This prop work only with openOnHover={true}\r",
+        "     * @default 0"
        ],
        "tags": {
         "@default": 0
@@ -93791,11 +94298,11 @@
       "name": "closeOnMouseLeave",
       "comment": {
        "raw": [
-        "Defined when to close dropdown in case of openOnHover={ true }",
-        " toggler — dropdown will be closed when a mouse leaves the target component",
-        " boundary — will not to close the dropdown when a mouse is on target or in 30px around target area",
-        " false — will not close dropdown by mouse move event",
-        " @default 'toggler'"
+        "/** Defined when to close dropdown in case of openOnHover={ true }\r",
+        "     * toggler — dropdown will be closed when a mouse leaves the target component\r",
+        "     * boundary — will not to close the dropdown when a mouse is on target or in 30px around target area\r",
+        "     * false — will not close dropdown by mouse move event\r",
+        "     * @default 'toggler'"
        ],
        "tags": {
         "@default": "toggler"
@@ -93820,8 +94327,9 @@
       "name": "portalTarget",
       "comment": {
        "raw": [
-        "Node of portal target, where to render the dropdown body.",
-        " By default, will be used global portal node."
+        "/**\r",
+        "     * Node of portal target, where to render the dropdown body.\r",
+        "     * By default, will be used global portal node."
        ]
       },
       "typeValue": {
@@ -93835,7 +94343,8 @@
       "name": "boundaryElement",
       "comment": {
        "raw": [
-        "Element relative to which dropdown will calculate position"
+        "/**\r",
+        "     * Element relative to which dropdown will calculate position"
        ]
       },
       "typeValue": {
@@ -93849,8 +94358,8 @@
       "name": "closeBodyOnTogglerHidden",
       "comment": {
        "raw": [
-        "Pass false, if you do not want to close the dropdown in case Toggler move out of viewport.",
-        " @default true"
+        "/** Pass false, if you do not want to close the dropdown in case Toggler move out of viewport.\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -93870,8 +94379,9 @@
       "name": "color",
       "comment": {
        "raw": [
-        "Tooltip color",
-        " @default 'inverted'"
+        "/**\r",
+        "     * Tooltip color\r",
+        "     * @default 'inverted'"
        ],
        "tags": {
         "@default": "inverted"
@@ -94164,8 +94674,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -94378,7 +94889,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '48'"
+        "/**\r",
+        "     * @default '48'"
        ],
        "tags": {
         "@default": "48"
@@ -94966,8 +95478,9 @@
       "name": "size",
       "comment": {
        "raw": [
-        "Component size. If omitted, 48 size will be used.",
-        " @default '48'"
+        "/**\r",
+        "     * Component size. If omitted, 48 size will be used.\r",
+        "     * @default '48'"
        ],
        "tags": {
         "@default": "48"
@@ -95400,8 +95913,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -95796,8 +96310,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -96510,8 +97025,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -97017,7 +97533,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '24'"
+        "/**\r",
+        "     * @default '24'"
        ],
        "tags": {
         "@default": "24"
@@ -97202,8 +97719,8 @@
       "name": "showArrow",
       "comment": {
        "raw": [
-        "If true, arrow tip will be shown",
-        " @default false"
+        "/** If true, arrow tip will be shown\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -97223,11 +97740,12 @@
       "name": "focusLock",
       "comment": {
        "raw": [
-        "Pass true to wrap DropdownContainer with FocusLock component to support keyboard navigation.",
-        " If omitted, true value will be used.",
-        "",
-        " After DropdownContainer appeared the focus will be set on the first focusable element inside.",
-        " @default true"
+        "/**\r",
+        "     * Pass true to wrap DropdownContainer with FocusLock component to support keyboard navigation.\r",
+        "     * If omitted, true value will be used.\r",
+        "     *\r",
+        "     * After DropdownContainer appeared the focus will be set on the first focusable element inside.\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -97247,8 +97765,9 @@
       "name": "returnFocus",
       "comment": {
        "raw": [
-        "Pass true to return focus into initial position on unmount.",
-        " If omitted, true value will be used. It's used if focusLock=true."
+        "/**\r",
+        "     * Pass true to return focus into initial position on unmount.\r",
+        "     * If omitted, true value will be used. It's used if focusLock=true."
        ]
       },
       "typeValue": {
@@ -97265,8 +97784,9 @@
       "name": "persistentFocus",
       "comment": {
        "raw": [
-        "Pass true to lock focus within DropdownContainer.",
-        " If omitted, true value will be used. It's used if focusLock=true."
+        "/**\r",
+        "     * Pass true to lock focus within DropdownContainer.\r",
+        "     * If omitted, true value will be used. It's used if focusLock=true."
        ]
       },
       "typeValue": {
@@ -97283,7 +97803,8 @@
       "name": "lockProps",
       "comment": {
        "raw": [
-        "Pass any extra props to the FocusLock wrapper."
+        "/**\r",
+        "     * Pass any extra props to the FocusLock wrapper."
        ]
       },
       "typeValue": {
@@ -97297,7 +97818,8 @@
       "name": "shards",
       "comment": {
        "raw": [
-        "Pass an array of ref pointing to the nodes, which focus lock should consider and a part of it. This is a way of focus scattering."
+        "/**\r",
+        "     * Pass an array of ref pointing to the nodes, which focus lock should consider and a part of it. This is a way of focus scattering."
        ]
       },
       "typeValue": {
@@ -97311,7 +97833,8 @@
       "name": "as",
       "comment": {
        "raw": [
-        "Pass element name if you need to change internal FocusLock div element, to any other."
+        "/**\r",
+        "     * Pass element name if you need to change internal FocusLock div element, to any other."
        ]
       },
       "typeValue": {
@@ -97328,8 +97851,9 @@
       "name": "closeOnEsc",
       "comment": {
        "raw": [
-        "Pass true to handle Escape key press and call props.onClose().",
-        " If omitted, true value will be used. It's used if focusLock=true."
+        "/**\r",
+        "     * Pass true to handle Escape key press and call props.onClose().\r",
+        "     * If omitted, true value will be used. It's used if focusLock=true."
        ]
       },
       "typeValue": {
@@ -97346,7 +97870,7 @@
       "name": "onKeyDown",
       "comment": {
        "raw": [
-        "Called on keyDown event in DropdownContainer.",
+        "/** Called on keyDown event in DropdownContainer.\r",
         "     Can be used to provide your own handlers."
        ]
       },
@@ -97916,7 +98440,8 @@
       "name": "background",
       "comment": {
        "raw": [
-        "@default 'none'"
+        "/**\r",
+        "     * @default 'none'"
        ],
        "tags": {
         "@default": "none"
@@ -98170,7 +98695,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'gray60'"
+        "/**\r",
+        "     * @default 'gray60'"
        ],
        "tags": {
         "@default": "gray60"
@@ -98446,8 +98972,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -98614,7 +99141,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'gray60'"
+        "/**\r",
+        "     * @default 'gray60'"
        ],
        "tags": {
         "@default": "gray60"
@@ -98768,9 +99296,10 @@
       "name": "color",
       "comment": {
        "raw": [
-        "IconContainer color.",
-        "  @deprecated Property color is deprecated and will be removed in future release. Please make icon color configuration by yourself, e.g. via cx or style prop.",
-        "  @default 'gray60'"
+        "/**\r",
+        "     *  IconContainer color.\r",
+        "     *  @deprecated Property color is deprecated and will be removed in future release. Please make icon color configuration by yourself, e.g. via cx or style prop.\r",
+        "     *  @default 'gray60'"
        ],
        "tags": {
         "@default": "gray60"
@@ -99001,9 +99530,10 @@
       "name": "color",
       "comment": {
        "raw": [
-        "IconContainer color.",
-        "  @deprecated Property color is deprecated and will be removed in future release. Please make icon color configuration by yourself, e.g. via cx or style prop.",
-        "  @default 'gray60'"
+        "/**\r",
+        "     *  IconContainer color.\r",
+        "     *  @deprecated Property color is deprecated and will be removed in future release. Please make icon color configuration by yourself, e.g. via cx or style prop.\r",
+        "     *  @default 'gray60'"
        ],
        "tags": {
         "@default": "gray60"
@@ -99072,7 +99602,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'blue'"
+        "/**\r",
+        "     * @default 'blue'"
        ],
        "tags": {
         "@default": "blue"
@@ -99347,8 +99878,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -99581,7 +100113,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'blue'"
+        "/**\r",
+        "     * @default 'blue'"
        ],
        "tags": {
         "@default": "blue"
@@ -99754,7 +100287,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'blue'"
+        "/**\r",
+        "     * @default 'blue'"
        ],
        "tags": {
         "@default": "blue"
@@ -99971,7 +100505,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'blue'"
+        "/**\r",
+        "     * @default 'blue'"
        ],
        "tags": {
         "@default": "blue"
@@ -100412,8 +100947,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -100512,7 +101048,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '18'"
+        "/**\r",
+        "     * @default '18'"
        ],
        "tags": {
         "@default": "18"
@@ -100641,7 +101178,8 @@
       "name": "step",
       "comment": {
        "raw": [
-        "@default 1"
+        "/**\r",
+        "     * @default 1"
        ],
        "tags": {
         "@default": 1
@@ -100851,7 +101389,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '18'"
+        "/**\r",
+        "     * @default '18'"
        ],
        "tags": {
         "@default": "18"
@@ -100904,7 +101443,8 @@
       "name": "background",
       "comment": {
        "raw": [
-        "@default 'none'"
+        "/**\r",
+        "     * @default 'none'"
        ],
        "tags": {
         "@default": "none"
@@ -101226,8 +101766,9 @@
       "name": "size",
       "comment": {
        "raw": [
-        "Component size. If omitted, 24 size will be used.",
-        " @default '24'"
+        "/**\r",
+        "     * Component size. If omitted, 24 size will be used.\r",
+        "     * @default '24'"
        ],
        "tags": {
         "@default": "24"
@@ -101266,8 +101807,9 @@
       "name": "fill",
       "comment": {
        "raw": [
-        "Fill mode, solid is used by default",
-        " @default 'solid'"
+        "/**\r",
+        "     * Fill mode, solid is used by default\r",
+        "     * @default 'solid'"
        ],
        "tags": {
         "@default": "solid"
@@ -101331,8 +101873,9 @@
       "name": "size",
       "comment": {
        "raw": [
-        "Component size. If omitted, 24 size will be used.",
-        " @default '24'"
+        "/**\r",
+        "     * Component size. If omitted, 24 size will be used.\r",
+        "     * @default '24'"
        ],
        "tags": {
         "@default": "24"
@@ -101371,8 +101914,9 @@
       "name": "fill",
       "comment": {
        "raw": [
-        "Fill mode, solid is used by default",
-        " @default 'solid'"
+        "/**\r",
+        "     * Fill mode, solid is used by default\r",
+        "     * @default 'solid'"
        ],
        "tags": {
         "@default": "solid"
@@ -101469,7 +102013,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'gray30'"
+        "/**\r",
+        "     * @default 'gray30'"
        ],
        "tags": {
         "@default": "gray30"
@@ -101746,8 +102291,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -102012,7 +102558,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'gray30'"
+        "/**\r",
+        "     * @default 'gray30'"
        ],
        "tags": {
         "@default": "gray30"
@@ -102129,7 +102676,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'gray80'"
+        "/**\r",
+        "     * @default 'gray80'"
        ],
        "tags": {
         "@default": "gray80"
@@ -102160,7 +102708,8 @@
       "name": "font",
       "comment": {
        "raw": [
-        "@default 'sans'"
+        "/**\r",
+        "     * @default 'sans'"
        ],
        "tags": {
         "@default": "sans"
@@ -102289,8 +102838,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -102392,7 +102942,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'gray80'"
+        "/**\r",
+        "     * @default 'gray80'"
        ],
        "tags": {
         "@default": "gray80"
@@ -102424,7 +102975,8 @@
       "name": "font",
       "comment": {
        "raw": [
-        "@default 'sans'"
+        "/**\r",
+        "     * @default 'sans'"
        ],
        "tags": {
         "@default": "sans"
@@ -102501,9 +103053,10 @@
       "name": "color",
       "comment": {
        "raw": [
-        "Tooltip color.",
-        " 'gray90' is deprecated and will be removed in future release, use 'gray' instead.",
-        " @default 'gray'"
+        "/**\r",
+        "     * Tooltip color.\r",
+        "     * 'gray90' is deprecated and will be removed in future release, use 'gray' instead.\r",
+        "     * @default 'gray'"
        ],
        "tags": {
         "@default": "gray"
@@ -102788,9 +103341,9 @@
       "name": "openDelay",
       "comment": {
        "raw": [
-        "Defines how much 'ms' user should hold mouse over target to open the dropdown",
-        " This prop work only with openOnHover={true}",
-        " @default 0"
+        "/** Defines how much 'ms' user should hold mouse over target to open the dropdown\r",
+        "     * This prop work only with openOnHover={true}\r",
+        "     * @default 0"
        ],
        "tags": {
         "@default": 0
@@ -102810,9 +103363,9 @@
       "name": "closeDelay",
       "comment": {
        "raw": [
-        "Defines after which delay dropdown will be closed, if user leave mouse from target.",
-        " This prop work only with openOnHover={true}",
-        " @default 0"
+        "/** Defines after which delay dropdown will be closed, if user leave mouse from target.\r",
+        "     * This prop work only with openOnHover={true}\r",
+        "     * @default 0"
        ],
        "tags": {
         "@default": 0
@@ -102832,11 +103385,11 @@
       "name": "closeOnMouseLeave",
       "comment": {
        "raw": [
-        "Defined when to close dropdown in case of openOnHover={ true }",
-        " toggler — dropdown will be closed when a mouse leaves the target component",
-        " boundary — will not to close the dropdown when a mouse is on target or in 30px around target area",
-        " false — will not close dropdown by mouse move event",
-        " @default 'toggler'"
+        "/** Defined when to close dropdown in case of openOnHover={ true }\r",
+        "     * toggler — dropdown will be closed when a mouse leaves the target component\r",
+        "     * boundary — will not to close the dropdown when a mouse is on target or in 30px around target area\r",
+        "     * false — will not close dropdown by mouse move event\r",
+        "     * @default 'toggler'"
        ],
        "tags": {
         "@default": "toggler"
@@ -102861,8 +103414,9 @@
       "name": "portalTarget",
       "comment": {
        "raw": [
-        "Node of portal target, where to render the dropdown body.",
-        " By default, will be used global portal node."
+        "/**\r",
+        "     * Node of portal target, where to render the dropdown body.\r",
+        "     * By default, will be used global portal node."
        ]
       },
       "typeValue": {
@@ -102876,7 +103430,8 @@
       "name": "boundaryElement",
       "comment": {
        "raw": [
-        "Element relative to which dropdown will calculate position"
+        "/**\r",
+        "     * Element relative to which dropdown will calculate position"
        ]
       },
       "typeValue": {
@@ -102890,8 +103445,8 @@
       "name": "closeBodyOnTogglerHidden",
       "comment": {
        "raw": [
-        "Pass false, if you do not want to close the dropdown in case Toggler move out of viewport.",
-        " @default true"
+        "/** Pass false, if you do not want to close the dropdown in case Toggler move out of viewport.\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -102925,7 +103480,7 @@
       "name": "renderContent",
       "comment": {
        "raw": [
-        "Alternative to 'content' prop, you can pass a render function.",
+        "/** Alternative to 'content' prop, you can pass a render function.\r",
         " The function will only be called when content is shown, this can save performance."
        ]
       },
@@ -102974,9 +103529,10 @@
       "name": "color",
       "comment": {
        "raw": [
-        "Tooltip color.",
-        " 'gray90' is deprecated and will be removed in future release, use 'gray' instead.",
-        " @default 'gray'"
+        "/**\r",
+        "     * Tooltip color.\r",
+        "     * 'gray90' is deprecated and will be removed in future release, use 'gray' instead.\r",
+        "     * @default 'gray'"
        ],
        "tags": {
         "@default": "gray"
@@ -103236,8 +103792,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -103509,8 +104066,9 @@
       "name": "size",
       "comment": {
        "raw": [
-        "Component size. If omitted, 48 size will be used.",
-        " @default '48'"
+        "/**\r",
+        "     * Component size. If omitted, 48 size will be used.\r",
+        "     * @default '48'"
        ],
        "tags": {
         "@default": "48"
@@ -103942,8 +104500,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -104413,8 +104972,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -105109,8 +105669,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -105642,7 +106203,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '24'"
+        "/**\r",
+        "     * @default '24'"
        ],
        "tags": {
         "@default": "24"
@@ -105827,8 +106389,8 @@
       "name": "showArrow",
       "comment": {
        "raw": [
-        "If true, arrow tip will be shown",
-        " @default false"
+        "/** If true, arrow tip will be shown\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -105848,11 +106410,12 @@
       "name": "focusLock",
       "comment": {
        "raw": [
-        "Pass true to wrap DropdownContainer with FocusLock component to support keyboard navigation.",
-        " If omitted, true value will be used.",
-        "",
-        " After DropdownContainer appeared the focus will be set on the first focusable element inside.",
-        " @default true"
+        "/**\r",
+        "     * Pass true to wrap DropdownContainer with FocusLock component to support keyboard navigation.\r",
+        "     * If omitted, true value will be used.\r",
+        "     *\r",
+        "     * After DropdownContainer appeared the focus will be set on the first focusable element inside.\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -105872,8 +106435,9 @@
       "name": "returnFocus",
       "comment": {
        "raw": [
-        "Pass true to return focus into initial position on unmount.",
-        " If omitted, true value will be used. It's used if focusLock=true."
+        "/**\r",
+        "     * Pass true to return focus into initial position on unmount.\r",
+        "     * If omitted, true value will be used. It's used if focusLock=true."
        ]
       },
       "typeValue": {
@@ -105890,8 +106454,9 @@
       "name": "persistentFocus",
       "comment": {
        "raw": [
-        "Pass true to lock focus within DropdownContainer.",
-        " If omitted, true value will be used. It's used if focusLock=true."
+        "/**\r",
+        "     * Pass true to lock focus within DropdownContainer.\r",
+        "     * If omitted, true value will be used. It's used if focusLock=true."
        ]
       },
       "typeValue": {
@@ -105908,7 +106473,8 @@
       "name": "lockProps",
       "comment": {
        "raw": [
-        "Pass any extra props to the FocusLock wrapper."
+        "/**\r",
+        "     * Pass any extra props to the FocusLock wrapper."
        ]
       },
       "typeValue": {
@@ -105922,7 +106488,8 @@
       "name": "shards",
       "comment": {
        "raw": [
-        "Pass an array of ref pointing to the nodes, which focus lock should consider and a part of it. This is a way of focus scattering."
+        "/**\r",
+        "     * Pass an array of ref pointing to the nodes, which focus lock should consider and a part of it. This is a way of focus scattering."
        ]
       },
       "typeValue": {
@@ -105936,7 +106503,8 @@
       "name": "as",
       "comment": {
        "raw": [
-        "Pass element name if you need to change internal FocusLock div element, to any other."
+        "/**\r",
+        "     * Pass element name if you need to change internal FocusLock div element, to any other."
        ]
       },
       "typeValue": {
@@ -105953,8 +106521,9 @@
       "name": "closeOnEsc",
       "comment": {
        "raw": [
-        "Pass true to handle Escape key press and call props.onClose().",
-        " If omitted, true value will be used. It's used if focusLock=true."
+        "/**\r",
+        "     * Pass true to handle Escape key press and call props.onClose().\r",
+        "     * If omitted, true value will be used. It's used if focusLock=true."
        ]
       },
       "typeValue": {
@@ -105971,7 +106540,7 @@
       "name": "onKeyDown",
       "comment": {
        "raw": [
-        "Called on keyDown event in DropdownContainer.",
+        "/** Called on keyDown event in DropdownContainer.\r",
         "     Can be used to provide your own handlers."
        ]
       },
@@ -106620,7 +107189,8 @@
       "name": "background",
       "comment": {
        "raw": [
-        "@default 'none'"
+        "/**\r",
+        "     * @default 'none'"
        ],
        "tags": {
         "@default": "none"
@@ -106664,7 +107234,8 @@
       "name": "type",
       "comment": {
        "raw": [
-        "@default 'panel'"
+        "/**\r",
+        "     * @default 'panel'"
        ],
        "tags": {
         "@default": "panel"
@@ -106874,7 +107445,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'night600'"
+        "/**\r",
+        "     * @default 'night600'"
        ],
        "tags": {
         "@default": "night600"
@@ -107156,8 +107728,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -107324,7 +107897,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'night600'"
+        "/**\r",
+        "     * @default 'night600'"
        ],
        "tags": {
         "@default": "night600"
@@ -107444,9 +108018,10 @@
       "name": "color",
       "comment": {
        "raw": [
-        "IconContainer color.",
-        " @deprecated Property color is deprecated and will be removed in future release. Please make icon color configuration by yourself, e.g. via cx or style prop.",
-        " @default 'night600'"
+        "/**\r",
+        "     * IconContainer color.\r",
+        "     * @deprecated Property color is deprecated and will be removed in future release. Please make icon color configuration by yourself, e.g. via cx or style prop.\r",
+        "     * @default 'night600'"
        ],
        "tags": {
         "@default": "night600"
@@ -107677,9 +108252,10 @@
       "name": "color",
       "comment": {
        "raw": [
-        "IconContainer color.",
-        " @deprecated Property color is deprecated and will be removed in future release. Please make icon color configuration by yourself, e.g. via cx or style prop.",
-        " @default 'night600'"
+        "/**\r",
+        "     * IconContainer color.\r",
+        "     * @deprecated Property color is deprecated and will be removed in future release. Please make icon color configuration by yourself, e.g. via cx or style prop.\r",
+        "     * @default 'night600'"
        ],
        "tags": {
         "@default": "night600"
@@ -107748,7 +108324,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'sky'"
+        "/**\r",
+        "     * @default 'sky'"
        ],
        "tags": {
         "@default": "sky"
@@ -108035,8 +108612,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -108269,7 +108847,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'sky'"
+        "/**\r",
+        "     * @default 'sky'"
        ],
        "tags": {
         "@default": "sky"
@@ -108572,7 +109151,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'sky'"
+        "/**\r",
+        "     * @default 'sky'"
        ],
        "tags": {
         "@default": "sky"
@@ -108789,7 +109369,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'sky'"
+        "/**\r",
+        "     * @default 'sky'"
        ],
        "tags": {
         "@default": "sky"
@@ -109230,8 +109811,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -109330,7 +109912,8 @@
       "name": "theme",
       "comment": {
        "raw": [
-        "@default 'light'"
+        "/**\r",
+        "     * @default 'light'"
        ],
        "tags": {
         "@default": "light"
@@ -109353,7 +109936,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '18'"
+        "/**\r",
+        "     * @default '18'"
        ],
        "tags": {
         "@default": "18"
@@ -109401,7 +109985,8 @@
       "name": "theme",
       "comment": {
        "raw": [
-        "@default 'light'"
+        "/**\r",
+        "     * @default 'light'"
        ],
        "tags": {
         "@default": "light"
@@ -109425,7 +110010,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '18'"
+        "/**\r",
+        "     * @default '18'"
        ],
        "tags": {
         "@default": "18"
@@ -109657,8 +110243,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -109826,7 +110413,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '18'"
+        "/**\r",
+        "     * @default '18'"
        ],
        "tags": {
         "@default": "18"
@@ -109955,7 +110543,8 @@
       "name": "step",
       "comment": {
        "raw": [
-        "@default 1"
+        "/**\r",
+        "     * @default 1"
        ],
        "tags": {
         "@default": 1
@@ -110165,7 +110754,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '18'"
+        "/**\r",
+        "     * @default '18'"
        ],
        "tags": {
         "@default": "18"
@@ -110223,7 +110813,8 @@
       "name": "background",
       "comment": {
        "raw": [
-        "@default 'none'"
+        "/**\r",
+        "     * @default 'none'"
        ],
        "tags": {
         "@default": "none"
@@ -110265,7 +110856,8 @@
       "name": "type",
       "comment": {
        "raw": [
-        "@default 'panel'"
+        "/**\r",
+        "     * @default 'panel'"
        ],
        "tags": {
         "@default": "panel"
@@ -111080,8 +111672,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -111163,7 +111756,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '36'"
+        "/**\r",
+        "     * @default '36'"
        ],
        "tags": {
         "@default": "36"
@@ -111192,10 +111786,11 @@
       "name": "mode",
       "comment": {
        "raw": [
-        "Visual mode for component:",
-        " - form: default visuals, to use in forms.",
-        " - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)",
-        " - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
+        "/**\r",
+        "     * Visual mode for component:\r",
+        "     * - form: default visuals, to use in forms.\r",
+        "     * - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)\r",
+        "     * - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
        ]
       },
       "typeValue": {
@@ -111346,7 +111941,8 @@
       "name": "from",
       "comment": {
        "raw": [
-        "@default 1"
+        "/**\r",
+        "     * @default 1"
        ],
        "tags": {
         "@default": 1
@@ -111369,7 +111965,8 @@
       "name": "withoutNa",
       "comment": {
        "raw": [
-        "@default false"
+        "/**\r",
+        "     * @default false"
        ],
        "tags": {
         "@default": false
@@ -111388,7 +111985,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '18'"
+        "/**\r",
+        "     * @default '18'"
        ],
        "tags": {
         "@default": "18"
@@ -111816,8 +112414,9 @@
       "name": "size",
       "comment": {
        "raw": [
-        "Component size. If omitted, 24 size will be used.",
-        " @default '24'"
+        "/**\r",
+        "     * Component size. If omitted, 24 size will be used.\r",
+        "     * @default '24'"
        ],
        "tags": {
         "@default": "24"
@@ -111856,8 +112455,9 @@
       "name": "fill",
       "comment": {
        "raw": [
-        "Fill mode, solid is used by default",
-        " @default 'solid'"
+        "/**\r",
+        "     * Fill mode, solid is used by default\r",
+        "     * @default 'solid'"
        ],
        "tags": {
         "@default": "solid"
@@ -111921,8 +112521,9 @@
       "name": "size",
       "comment": {
        "raw": [
-        "Component size. If omitted, 24 size will be used.",
-        " @default '24'"
+        "/**\r",
+        "     * Component size. If omitted, 24 size will be used.\r",
+        "     * @default '24'"
        ],
        "tags": {
         "@default": "24"
@@ -111961,8 +112562,9 @@
       "name": "fill",
       "comment": {
        "raw": [
-        "Fill mode, solid is used by default",
-        " @default 'solid'"
+        "/**\r",
+        "     * Fill mode, solid is used by default\r",
+        "     * @default 'solid'"
        ],
        "tags": {
         "@default": "solid"
@@ -112056,7 +112658,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '48'"
+        "/**\r",
+        "     * @default '48'"
        ],
        "tags": {
         "@default": "48"
@@ -112318,8 +112921,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -112625,7 +113229,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '48'"
+        "/**\r",
+        "     * @default '48'"
        ],
        "tags": {
         "@default": "48"
@@ -112887,8 +113492,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -113200,7 +113806,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'night300'"
+        "/**\r",
+        "     * @default 'night300'"
        ],
        "tags": {
         "@default": "night300"
@@ -113477,8 +114084,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -113743,7 +114351,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'night300'"
+        "/**\r",
+        "     * @default 'night300'"
        ],
        "tags": {
         "@default": "night300"
@@ -113856,7 +114465,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '36'"
+        "/**\r",
+        "     * @default '36'"
        ],
        "tags": {
         "@default": "36"
@@ -113884,10 +114494,11 @@
       "name": "mode",
       "comment": {
        "raw": [
-        "Visual mode for component:",
-        " - form: default visuals, to use in forms.",
-        " - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)",
-        " - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
+        "/**\r",
+        "     * Visual mode for component:\r",
+        "     * - form: default visuals, to use in forms.\r",
+        "     * - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)\r",
+        "     * - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
        ]
       },
       "typeValue": {
@@ -114523,8 +115134,9 @@
       "name": "getValueChangeAnalyticsEvent",
       "comment": {
        "raw": [
-        "Given a value, returns an analytics event to send when component is edited.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * Given a value, returns an analytics event to send when component is edited.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -114606,7 +115218,8 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '36'"
+        "/**\r",
+        "     * @default '36'"
        ],
        "tags": {
         "@default": "36"
@@ -114635,10 +115248,11 @@
       "name": "mode",
       "comment": {
        "raw": [
-        "Visual mode for component:",
-        " - form: default visuals, to use in forms.",
-        " - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)",
-        " - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
+        "/**\r",
+        "     * Visual mode for component:\r",
+        "     * - form: default visuals, to use in forms.\r",
+        "     * - cell: adjust to embed as table cell editor: no borders, no focus (it is applied by DataCell)\r",
+        "     * - inline: adjust for WYSIWYG UX. Backgrounds removed. Borders appear only on hover."
        ]
       },
       "typeValue": {
@@ -114692,7 +115306,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'night700'"
+        "/**\r",
+        "     * @default 'night700'"
        ],
        "tags": {
         "@default": "night700"
@@ -114726,7 +115341,8 @@
       "name": "font",
       "comment": {
        "raw": [
-        "@default 'sans'"
+        "/**\r",
+        "     * @default 'sans'"
        ],
        "tags": {
         "@default": "sans"
@@ -114853,8 +115469,9 @@
       "name": "clickAnalyticsEvent",
       "comment": {
        "raw": [
-        "An analytics event to send (via AnalyticsContext) when component is clicked.",
-        " See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
+        "/**\r",
+        "     * An analytics event to send (via AnalyticsContext) when component is clicked.\r",
+        "     * See [AnalyticsContext](@link https://uui.epam.com/documents?id=analyticsContext&mode=doc&skin=UUI4_promo&category=contexts)."
        ]
       },
       "typeValue": {
@@ -114956,7 +115573,8 @@
       "name": "color",
       "comment": {
        "raw": [
-        "@default 'night700'"
+        "/**\r",
+        "     * @default 'night700'"
        ],
        "tags": {
         "@default": "night700"
@@ -114991,7 +115609,8 @@
       "name": "font",
       "comment": {
        "raw": [
-        "@default 'sans'"
+        "/**\r",
+        "     * @default 'sans'"
        ],
        "tags": {
         "@default": "sans"
@@ -115067,10 +115686,11 @@
       "name": "color",
       "comment": {
        "raw": [
-        "Tooltip color.",
-        " 'night900' is deprecated and will be removed in future release, use 'gray' instead.",
-        "",
-        " @default 'gray'"
+        "/**\r",
+        "     * Tooltip color.\r",
+        "     * 'night900' is deprecated and will be removed in future release, use 'gray' instead.\r",
+        "     *\r",
+        "     * @default 'gray'"
        ],
        "tags": {
         "@default": "gray"
@@ -115355,9 +115975,9 @@
       "name": "openDelay",
       "comment": {
        "raw": [
-        "Defines how much 'ms' user should hold mouse over target to open the dropdown",
-        " This prop work only with openOnHover={true}",
-        " @default 0"
+        "/** Defines how much 'ms' user should hold mouse over target to open the dropdown\r",
+        "     * This prop work only with openOnHover={true}\r",
+        "     * @default 0"
        ],
        "tags": {
         "@default": 0
@@ -115377,9 +115997,9 @@
       "name": "closeDelay",
       "comment": {
        "raw": [
-        "Defines after which delay dropdown will be closed, if user leave mouse from target.",
-        " This prop work only with openOnHover={true}",
-        " @default 0"
+        "/** Defines after which delay dropdown will be closed, if user leave mouse from target.\r",
+        "     * This prop work only with openOnHover={true}\r",
+        "     * @default 0"
        ],
        "tags": {
         "@default": 0
@@ -115399,11 +116019,11 @@
       "name": "closeOnMouseLeave",
       "comment": {
        "raw": [
-        "Defined when to close dropdown in case of openOnHover={ true }",
-        " toggler — dropdown will be closed when a mouse leaves the target component",
-        " boundary — will not to close the dropdown when a mouse is on target or in 30px around target area",
-        " false — will not close dropdown by mouse move event",
-        " @default 'toggler'"
+        "/** Defined when to close dropdown in case of openOnHover={ true }\r",
+        "     * toggler — dropdown will be closed when a mouse leaves the target component\r",
+        "     * boundary — will not to close the dropdown when a mouse is on target or in 30px around target area\r",
+        "     * false — will not close dropdown by mouse move event\r",
+        "     * @default 'toggler'"
        ],
        "tags": {
         "@default": "toggler"
@@ -115428,8 +116048,9 @@
       "name": "portalTarget",
       "comment": {
        "raw": [
-        "Node of portal target, where to render the dropdown body.",
-        " By default, will be used global portal node."
+        "/**\r",
+        "     * Node of portal target, where to render the dropdown body.\r",
+        "     * By default, will be used global portal node."
        ]
       },
       "typeValue": {
@@ -115443,7 +116064,8 @@
       "name": "boundaryElement",
       "comment": {
        "raw": [
-        "Element relative to which dropdown will calculate position"
+        "/**\r",
+        "     * Element relative to which dropdown will calculate position"
        ]
       },
       "typeValue": {
@@ -115457,8 +116079,8 @@
       "name": "closeBodyOnTogglerHidden",
       "comment": {
        "raw": [
-        "Pass false, if you do not want to close the dropdown in case Toggler move out of viewport.",
-        " @default true"
+        "/** Pass false, if you do not want to close the dropdown in case Toggler move out of viewport.\r",
+        "     * @default true"
        ],
        "tags": {
         "@default": true
@@ -115492,7 +116114,7 @@
       "name": "renderContent",
       "comment": {
        "raw": [
-        "Alternative to 'content' prop, you can pass a render function.",
+        "/** Alternative to 'content' prop, you can pass a render function.\r",
         " The function will only be called when content is shown, this can save performance."
        ]
       },
@@ -115541,10 +116163,11 @@
       "name": "color",
       "comment": {
        "raw": [
-        "Tooltip color.",
-        " 'night900' is deprecated and will be removed in future release, use 'gray' instead.",
-        "",
-        " @default 'gray'"
+        "/**\r",
+        "     * Tooltip color.\r",
+        "     * 'night900' is deprecated and will be removed in future release, use 'gray' instead.\r",
+        "     *\r",
+        "     * @default 'gray'"
        ],
        "tags": {
         "@default": "gray"
diff --git a/public/docs/docsGenOutput/docsGenStats.json b/public/docs/docsGenOutput/docsGenStats.json
index bce0b7c7bf..34cf2a84ab 100644
--- a/public/docs/docsGenOutput/docsGenStats.json
+++ b/public/docs/docsGenOutput/docsGenStats.json
@@ -1,8 +1,8 @@
 {
  "missingPropComment": {
   "totals": {
-   "amountProps": 613,
-   "amountTypes": 210
+   "amountProps": 582,
+   "amountTypes": 189
   },
   "value": [
    {
@@ -63,6 +63,16 @@
      "history"
     ]
    },
+   {
+    "typeRef": "@epam/uui-core:DataColumnProps",
+    "value": [
+     "groupBy",
+     "groupCaptionCX",
+     "headerFontSize",
+     "onGroupClick",
+     "onHeaderClick"
+    ]
+   },
    {
     "typeRef": "@epam/uui-core:DataQuery",
     "value": [
@@ -414,7 +424,6 @@
     "value": [
      "from",
      "renderRating",
-     "step",
      "to"
     ]
    },
@@ -654,7 +663,6 @@
    {
     "typeRef": "@epam/uui-components:PickerModalOptions",
     "value": [
-     "disallowClickOutside",
      "renderFilter",
      "renderFooter"
     ]
@@ -909,8 +917,7 @@
    {
     "typeRef": "@epam/uui:CountIndicatorProps",
     "value": [
-     "color",
-     "size"
+     "color"
     ]
    },
    {
@@ -1060,12 +1067,6 @@
      "to"
     ]
    },
-   {
-    "typeRef": "@epam/uui:IconButtonMods",
-    "value": [
-     "color"
-    ]
-   },
    {
     "typeRef": "@epam/uui:IDropdownMenuItemProps",
     "value": [
@@ -1093,13 +1094,6 @@
      "size"
     ]
    },
-   {
-    "typeRef": "@epam/uui:LinkButtonMods",
-    "value": [
-     "color",
-     "size"
-    ]
-   },
    {
     "typeRef": "@epam/uui:MainMenuAvatarProps",
     "value": [
@@ -1123,7 +1117,6 @@
    {
     "typeRef": "@epam/uui:MultiSwitchProps",
     "value": [
-     "color",
      "items"
     ]
    },
@@ -1184,12 +1177,6 @@
      "striped"
     ]
    },
-   {
-    "typeRef": "@epam/uui:RadioInputMods",
-    "value": [
-     "size"
-    ]
-   },
    {
     "typeRef": "@epam/uui:RangeDatePickerBodyProps",
     "value": [
@@ -1212,12 +1199,6 @@
      "to"
     ]
    },
-   {
-    "typeRef": "@epam/uui:RichTextViewMods",
-    "value": [
-     "size"
-    ]
-   },
    {
     "typeRef": "@epam/uui:RowMods",
     "value": [
@@ -1239,16 +1220,9 @@
      "size"
     ]
    },
-   {
-    "typeRef": "@epam/uui:SwitchMods",
-    "value": [
-     "size"
-    ]
-   },
    {
     "typeRef": "@epam/uui:TabButtonMods",
     "value": [
-     "size",
      "withNotify"
     ]
    },
@@ -1271,12 +1245,6 @@
      "size"
     ]
    },
-   {
-    "typeRef": "@epam/uui:TextInputMods",
-    "value": [
-     "size"
-    ]
-   },
    {
     "typeRef": "@epam/uui:TextMods",
     "value": [
@@ -1293,13 +1261,6 @@
      "lineHeight"
     ]
    },
-   {
-    "typeRef": "@epam/uui:TimePickerProps",
-    "value": [
-     "format",
-     "minutesStep"
-    ]
-   },
    {
     "typeRef": "@epam/uui:VirtualListRenderRowsParams",
     "value": [
@@ -1348,18 +1309,6 @@
      "onNotificationError"
     ]
    },
-   {
-    "typeRef": "@epam/promo:IconButtonMods",
-    "value": [
-     "color"
-    ]
-   },
-   {
-    "typeRef": "@epam/promo:LinkButtonMods",
-    "value": [
-     "color"
-    ]
-   },
    {
     "typeRef": "@epam/promo:ModalWindowMods",
     "value": [
@@ -1367,12 +1316,6 @@
      "width"
     ]
    },
-   {
-    "typeRef": "@epam/promo:MultiSwitchMods",
-    "value": [
-     "color"
-    ]
-   },
    {
     "typeRef": "@epam/promo:NotificationCardMods",
     "value": [
@@ -1387,18 +1330,6 @@
      "shadow"
     ]
    },
-   {
-    "typeRef": "@epam/promo:RatingMods",
-    "value": [
-     "size"
-    ]
-   },
-   {
-    "typeRef": "@epam/promo:RowMods",
-    "value": [
-     "background"
-    ]
-   },
    {
     "typeRef": "@epam/promo:RowSizeMod",
     "value": [
@@ -1411,19 +1342,6 @@
      "color"
     ]
    },
-   {
-    "typeRef": "@epam/promo:TagMods",
-    "value": [
-     "color"
-    ]
-   },
-   {
-    "typeRef": "@epam/promo:TextMods",
-    "value": [
-     "color",
-     "font"
-    ]
-   },
    {
     "typeRef": "@epam/electric:PromoButtonMods",
     "value": [
@@ -1486,18 +1404,6 @@
      "font"
     ]
    },
-   {
-    "typeRef": "@epam/loveship:IconButtonMods",
-    "value": [
-     "color"
-    ]
-   },
-   {
-    "typeRef": "@epam/loveship:LinkButtonMods",
-    "value": [
-     "color"
-    ]
-   },
    {
     "typeRef": "@epam/loveship:MakeMeItemProps",
     "value": [
@@ -1521,12 +1427,6 @@
      "width"
     ]
    },
-   {
-    "typeRef": "@epam/loveship:MultiSwitchMods",
-    "value": [
-     "color"
-    ]
-   },
    {
     "typeRef": "@epam/loveship:NotificationCardMods",
     "value": [
@@ -1541,24 +1441,10 @@
      "shadow"
     ]
    },
-   {
-    "typeRef": "@epam/loveship:RadioInputMods",
-    "value": [
-     "theme"
-    ]
-   },
-   {
-    "typeRef": "@epam/loveship:RatingMods",
-    "value": [
-     "size"
-    ]
-   },
    {
     "typeRef": "@epam/loveship:RowMods",
     "value": [
-     "background",
-     "spacing",
-     "type"
+     "spacing"
     ]
    },
    {
@@ -1576,13 +1462,10 @@
    {
     "typeRef": "@epam/loveship:SliderRatingProps",
     "value": [
-     "from",
      "getHandlerIcon",
      "getScaleIcon",
      "renderTooltip",
-     "size",
-     "tooltipColor",
-     "withoutNa"
+     "tooltipColor"
     ]
    },
    {
@@ -1603,25 +1486,6 @@
      "theme"
     ]
    },
-   {
-    "typeRef": "@epam/loveship:TagMods",
-    "value": [
-     "color"
-    ]
-   },
-   {
-    "typeRef": "@epam/loveship:TextInputMods",
-    "value": [
-     "size"
-    ]
-   },
-   {
-    "typeRef": "@epam/loveship:TextMods",
-    "value": [
-     "color",
-     "font"
-    ]
-   },
    {
     "typeRef": "@epam/uui-editor:LinkElement",
     "value": [
diff --git a/uui-docs/src/types.ts b/uui-docs/src/types.ts
index 94e506450d..c9b4ead6ac 100644
--- a/uui-docs/src/types.ts
+++ b/uui-docs/src/types.ts
@@ -70,9 +70,10 @@ export interface PropDoc<TProps, TProp extends keyof TProps> {
 }
 
 export enum TSkin {
-    UUI3_loveship = 'UUI3_loveship',
-    UUI4_promo = 'UUI4_promo',
-    UUI = 'UUI'
+    UUI = 'uui',
+    Electric = 'electric',
+    Loveship = 'loveship',
+    Promo = 'promo'
 }
 
 export type TDocConfig = {
diff --git a/uui/assets/styles/typography.scss b/uui/assets/styles/typography.scss
index d1cf15d46f..c7a454a540 100644
--- a/uui/assets/styles/typography.scss
+++ b/uui/assets/styles/typography.scss
@@ -99,7 +99,7 @@
         padding: 0.125em 0.25em;
         color: var(--uui-text-primary);
         background-color: var(--uui-neutral-30);
-        font-family: var(--uui-font-mono, 'monospace');
+        font-family: var(--uui-font-mono, monospace);
         font-weight: 400;
         white-space: pre-wrap;
         word-wrap: normal;
diff --git a/uui/components/filters/PresetPanel/PresetActionsDropdown.tsx b/uui/components/filters/PresetPanel/PresetActionsDropdown.tsx
index 14a01288f5..f23cfb8e68 100644
--- a/uui/components/filters/PresetPanel/PresetActionsDropdown.tsx
+++ b/uui/components/filters/PresetPanel/PresetActionsDropdown.tsx
@@ -85,7 +85,7 @@ export function PresetActionsDropdown(props: ITubButtonDropdownProps) {
     const renderBody = () => {
         const isReadonlyPreset = props.preset.isReadonly;
         return (
-            <Panel background="surface" shadow={ true } cx={ css.presetDropdownPanel }>
+            <Panel background="surface-main" shadow={ true } cx={ css.presetDropdownPanel }>
                 {props.activePresetId === props.preset.id && props.hasPresetChanged(props.preset) && (
                     <>
                         {!isReadonlyPreset && (
diff --git a/uui/components/layout/FlexItems/FlexRow.module.scss b/uui/components/layout/FlexItems/FlexRow.module.scss
index 6fbc82c370..bb27b48a22 100644
--- a/uui/components/layout/FlexItems/FlexRow.module.scss
+++ b/uui/components/layout/FlexItems/FlexRow.module.scss
@@ -115,7 +115,7 @@
         @include items-spacing(18px);
     }
 
-    &:global(.uui-flex-row.uui-color-surface) {
+    &.uui-surface-main {
         --uui-flex-row-bg: var(--uui-surface-main);
     }
 }
diff --git a/uui/components/layout/FlexItems/FlexRow.tsx b/uui/components/layout/FlexItems/FlexRow.tsx
index 97bb91b328..49198a948e 100644
--- a/uui/components/layout/FlexItems/FlexRow.tsx
+++ b/uui/components/layout/FlexItems/FlexRow.tsx
@@ -12,7 +12,7 @@ export type RowMods = {
     spacing?: '6' | '12' | '18';
     topShadow?: boolean;
     vPadding?: '12' | '18' | '24' | '36' | '48';
-    background?: 'surface';
+    background?: 'surface-main';
 };
 
 export interface FlexRowProps extends Omit<uuiFlexRowProps, 'columnGap' | 'rowGap'> {}
@@ -27,6 +27,6 @@ export const FlexRow = withMods<FlexRowProps, RowMods>(uuiFlexRow, (props) => {
         props.topShadow && css.topShadow,
         props.borderBottom && css.borderBottom,
         props.spacing && css['spacing-' + props.spacing],
-        props.background && `uui-color-${props.background}`,
+        props.background && css[`uui-${props.background}`],
     ];
 });
diff --git a/uui/components/layout/FlexItems/Panel.module.scss b/uui/components/layout/FlexItems/Panel.module.scss
index c13554614b..a5c71058cf 100644
--- a/uui/components/layout/FlexItems/Panel.module.scss
+++ b/uui/components/layout/FlexItems/Panel.module.scss
@@ -1,5 +1,5 @@
 .root {
-    --uui-panel-bg: var(--uui-surface-main);
+    --uui-panel-bg: transparent;
     --uui-panel-shadow: var(--uui-shadow-level-1);
 
     --uui-panel-border-radius: var(--uui-border-radius);
@@ -28,7 +28,7 @@
         cursor: pointer;
     }
 
-    &:global(.uui-panel.uui-color-surface) {
+    &.uui-surface-main {
         --uui-panel-bg: var(--uui-surface-main);
     }
 }
diff --git a/uui/components/layout/FlexItems/Panel.tsx b/uui/components/layout/FlexItems/Panel.tsx
index c8e9097ea8..82c6265aa2 100644
--- a/uui/components/layout/FlexItems/Panel.tsx
+++ b/uui/components/layout/FlexItems/Panel.tsx
@@ -5,7 +5,7 @@ import css from './Panel.module.scss';
 export interface PanelMods {
     shadow?: boolean;
     margin?: '24';
-    background?: 'surface';
+    background?: 'surface-main';
 }
 
 export type PanelProps = VPanelProps & PanelMods;
@@ -15,5 +15,5 @@ export const Panel = withMods<VPanelProps, PanelMods>(VPanel, (props) => [
     css.root,
     props.shadow && css.shadow,
     props.margin && css['margin-' + props.margin],
-    props.background && `uui-color-${props.background}`,
+    props.background && css[`uui-${props.background}`],
 ]);
diff --git a/uui/components/navigation/MainMenu/MainMenuButton.module.scss b/uui/components/navigation/MainMenu/MainMenuButton.module.scss
index 7b0c84629b..6a701fbb18 100644
--- a/uui/components/navigation/MainMenu/MainMenuButton.module.scss
+++ b/uui/components/navigation/MainMenu/MainMenuButton.module.scss
@@ -52,6 +52,8 @@
     &:global(.uui-active) {
         background-color: var(--uui-main_menu-hover);
         border-bottom: 3px solid var(--uui-main_menu-border-active);
+        border-image: var(--uui-main_menu-border-active-gradient, none);
+        border-image-slice: 3;
         color: var(--uui-main_menu-text-active);
         fill: var(--uui-main_menu-icon-active);
     }
diff --git a/uui/components/overlays/ConfirmationModal.tsx b/uui/components/overlays/ConfirmationModal.tsx
index eca56fcb79..a4242c02e8 100644
--- a/uui/components/overlays/ConfirmationModal.tsx
+++ b/uui/components/overlays/ConfirmationModal.tsx
@@ -16,7 +16,7 @@ export class ConfirmationModal extends React.Component<ConfirmationModalWindowPr
         let bodyContent;
 
         if (this.props.bodyContent) {
-            bodyContent = <Panel background="surface" margin="24">{this.props.bodyContent}</Panel>;
+            bodyContent = <Panel background="surface-main" margin="24">{this.props.bodyContent}</Panel>;
         }
 
         return (
diff --git a/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap b/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap
index 93e688def6..2ec40510e3 100644
--- a/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap
+++ b/uui/components/overlays/__tests__/__snapshots__/ConfirmationModal.test.tsx.snap
@@ -329,7 +329,7 @@ exports[`ConfirmationModal should be rendered correctly 2`] = `
           }
         >
           <div
-            className="uui-panel root margin-24 uui-color-surface container"
+            className="uui-panel root margin-24 uui-surface-main container"
           >
             <div>
               Test content
diff --git a/uui/components/tables/columnsConfigurationModal/ColumnsConfigurationModal.tsx b/uui/components/tables/columnsConfigurationModal/ColumnsConfigurationModal.tsx
index 8288b6ee45..37b6dc90fe 100644
--- a/uui/components/tables/columnsConfigurationModal/ColumnsConfigurationModal.tsx
+++ b/uui/components/tables/columnsConfigurationModal/ColumnsConfigurationModal.tsx
@@ -111,7 +111,7 @@ export function ColumnsConfigurationModal<TItem, TId, TFilter>(props: ColumnsCon
                     <Dropdown
                         closeOnTargetClick={ true }
                         renderBody={ () => (
-                            <Panel background="surface" shadow={ true }>
+                            <Panel background="surface-main" shadow={ true }>
                                 <DropdownMenuButton caption={ i18n.clearAllButton } onClick={ uncheckAll } />
                                 <DropdownMenuButton caption={ i18n.selectAllButton } onClick={ checkAll } />
                             </Panel>
@@ -119,7 +119,7 @@ export function ColumnsConfigurationModal<TItem, TId, TFilter>(props: ColumnsCon
                         renderTarget={ (props) => <Button { ...props } fill="none" icon={ MenuIcon } size="30" color="secondary" isDropdown={ false } /> }
                     />
                 </FlexRow>
-                <Panel background="surface" cx={ styles.mainPanel }>
+                <Panel background="surface-main" cx={ styles.mainPanel }>
                     <ScrollBars>
                         {renderVisible()}
                         {renderHidden()}
diff --git a/uui/components/tables/columnsConfigurationModal/__tests__/__snapshots__/ColumnsConfigurationModal.test.tsx.snap b/uui/components/tables/columnsConfigurationModal/__tests__/__snapshots__/ColumnsConfigurationModal.test.tsx.snap
index b39b8324d1..16410291f1 100644
--- a/uui/components/tables/columnsConfigurationModal/__tests__/__snapshots__/ColumnsConfigurationModal.test.tsx.snap
+++ b/uui/components/tables/columnsConfigurationModal/__tests__/__snapshots__/ColumnsConfigurationModal.test.tsx.snap
@@ -147,7 +147,7 @@ exports[`ColumnsConfigurationModal should be rendered correctly 1`] = `
         </button>
       </div>
       <div
-        className="uui-panel root uui-color-surface mainPanel container"
+        className="uui-panel root uui-surface-main mainPanel container"
       >
         <div
           className="root root uui-scroll-bars uui-shadow-top uui-shadow-bottom"
@@ -630,7 +630,7 @@ exports[`ColumnsConfigurationModal should disable Apply button if all columns ar
         </button>
       </div>
       <div
-        className="uui-panel root uui-color-surface mainPanel container"
+        className="uui-panel root uui-surface-main mainPanel container"
       >
         <div
           className="root root uui-scroll-bars uui-shadow-top uui-shadow-bottom"
diff --git a/uui/components/typography/TextPlaceholder.module.scss b/uui/components/typography/TextPlaceholder.module.scss
index d9e8d7e38e..d76536b9df 100644
--- a/uui/components/typography/TextPlaceholder.module.scss
+++ b/uui/components/typography/TextPlaceholder.module.scss
@@ -1,11 +1,11 @@
 @keyframes skeleton_loading {
-    0% { background-position: 200% 0; }
+    0% { background-position: -300px 0; }
     100% { background-position: 0 0; }
 }
 
 .root {
     --uui-text_placeholder: var(--uui-skeleton);
-    --uui-text_placeholder-gradient: linear-gradient(90deg, var(--uui-neutral-40) 0%, var(--uui-neutral-10) 50%, var(--uui-neutral-40) 100%);
+    --uui-text_placeholder-gradient: repeating-linear-gradient(90deg, var(--uui-neutral-40) 0, var(--uui-neutral-10) 150px, var(--uui-neutral-40) 300px);
     //
     display: flex;
     flex-wrap: wrap;
@@ -28,6 +28,8 @@
         background-size: 200% 100%;
         background-clip: border-box;
         -webkit-background-clip: text;
-        animation: skeleton_loading 1s ease infinite;
+        background-repeat: repeat;
+        background-attachment: fixed;
+        animation: skeleton_loading 1.3s ease infinite;
     }
 }