diff --git a/app/package.json b/app/package.json
index 77adac82e7..20659f7e8d 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epam/app",
-  "version": "5.11.1-alpha.0",
+  "version": "5.11.1-rc.0",
   "description": "EPAM Unified UI landing",
   "author": "EPAM",
   "license": "MIT",
@@ -17,19 +17,19 @@
   "dependencies": {
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
     "@elastic/apm-rum": "^5.14.0",
-    "@epam/assets": "5.11.1-alpha.0",
-    "@epam/draft-rte": "5.11.1-alpha.0",
-    "@epam/electric": "5.11.1-alpha.0",
+    "@epam/assets": "5.11.1-rc.0",
+    "@epam/draft-rte": "5.11.1-rc.0",
+    "@epam/electric": "5.11.1-rc.0",
     "@epam/internal": "0.0.2",
-    "@epam/loveship": "5.11.1-alpha.0",
-    "@epam/promo": "5.11.1-alpha.0",
-    "@epam/uui": "5.11.1-alpha.0",
-    "@epam/uui-components": "5.11.1-alpha.0",
-    "@epam/uui-core": "5.11.1-alpha.0",
-    "@epam/uui-db": "5.11.1-alpha.0",
-    "@epam/uui-docs": "5.11.1-alpha.0",
-    "@epam/uui-editor": "5.11.1-alpha.0",
-    "@epam/uui-timeline": "5.11.1-alpha.0",
+    "@epam/loveship": "5.11.1-rc.0",
+    "@epam/promo": "5.11.1-rc.0",
+    "@epam/uui": "5.11.1-rc.0",
+    "@epam/uui-components": "5.11.1-rc.0",
+    "@epam/uui-core": "5.11.1-rc.0",
+    "@epam/uui-db": "5.11.1-rc.0",
+    "@epam/uui-docs": "5.11.1-rc.0",
+    "@epam/uui-editor": "5.11.1-rc.0",
+    "@epam/uui-timeline": "5.11.1-rc.0",
     "@tanstack/react-query": "^5.17.19",
     "@udecode/plate-common": "31.3.2",
     "amplitude-js": "8.9.1",
@@ -40,7 +40,6 @@
     "imask": "6.0.7",
     "lodash.assign": "4.2.0",
     "prismjs": "^1.19.0",
-    "prop-types": "15.7.2",
     "qhistory": "1.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/app/src/demo/tables/editableTable/ProjectTableDemo.tsx b/app/src/demo/tables/editableTable/ProjectTableDemo.tsx
index 0b035c6153..15cddc4187 100644
--- a/app/src/demo/tables/editableTable/ProjectTableDemo.tsx
+++ b/app/src/demo/tables/editableTable/ProjectTableDemo.tsx
@@ -135,7 +135,7 @@ export function ProjectTableDemo() {
     }, []);
 
     const insertTask = useCallback((position: DropPosition, relativeTask: Task | null = null, existingTask: Task | null = null) => {
-        const taskToInsert: Task = existingTask ? { ...existingTask, type: 'task' } : { id: lastId--, name: '', type: 'task' };
+        const taskToInsert: Task = existingTask ? { ...existingTask, type: 'task' } : { id: lastId--, name: '', type: 'task', parentId: null };
         const task: Task = setTaskInsertPosition(taskToInsert, relativeTask, position, treeRef.current);
 
         setValue((currentValue) => {
@@ -153,9 +153,11 @@ export function ProjectTableDemo() {
                 }
             }
 
-            let currentItems = currentValue.items
-                .set(task.id, task)
-                .set(parentTask.id, parentTask);
+            let currentItems = currentValue.items.set(task.id, task);
+
+            if (parentTask) {
+                currentValue.items.set(parentTask.id, parentTask);
+            }
 
             if (prevParentTask !== null && prevParentTask !== NOT_FOUND_RECORD) {
                 currentItems = currentItems.set(prevParentTask.id, prevParentTask);
diff --git a/app/src/demo/tables/editableTable/TimelineMode.tsx b/app/src/demo/tables/editableTable/TimelineMode.tsx
index 4f5dd455b3..f81c4979f9 100644
--- a/app/src/demo/tables/editableTable/TimelineMode.tsx
+++ b/app/src/demo/tables/editableTable/TimelineMode.tsx
@@ -31,7 +31,6 @@ export function TimelineMode({
             value={ tableState }
             onValueChange={ setTableState }
             dataTableFocusManager={ dataTableFocusManager }
-            showColumnsConfig
             allowColumnsResizing
             allowColumnsReordering
             headerSize="60"
diff --git a/app/src/docs/_examples/alert/Sizes.example.tsx b/app/src/docs/_examples/alert/Sizes.example.tsx
index 1752b2a689..1df0b99520 100644
--- a/app/src/docs/_examples/alert/Sizes.example.tsx
+++ b/app/src/docs/_examples/alert/Sizes.example.tsx
@@ -15,6 +15,7 @@ export default function BasicAlertExample() {
                 {' '}
             </SuccessAlert>
             <WarningAlert
+                size="48"
                 onClose={ () => alert('close action') }
                 actions={ [{ name: 'ACTION 1', action: () => null }, { name: 'ACTION 2', action: () => null }] }
             >
diff --git a/app/src/docs/_examples/multiSwitch/Basic.example.tsx b/app/src/docs/_examples/multiSwitch/Basic.example.tsx
index 1c6a88d40c..22d22d9318 100644
--- a/app/src/docs/_examples/multiSwitch/Basic.example.tsx
+++ b/app/src/docs/_examples/multiSwitch/Basic.example.tsx
@@ -11,9 +11,10 @@ import { ReactComponent as ChatIcon } from '@epam/assets/icons/communication-cha
 import css from './BasicExample.module.scss';
 
 export default function BasicExample() {
-    const [value, onValueChange] = useState(null);
-    const [view, setView] = useState(null);
-    const [filter, setFilter] = useState(null);
+    const [value, onValueChange] = useState('on');
+    const [userType, userTypeOnValueChange] = useState();
+    const [view, setView] = useState(1);
+    const [filter, setFilter] = useState(2);
 
     return (
         <FlexCell width="auto" cx={ css.container }>
@@ -28,8 +29,8 @@ export default function BasicExample() {
                 items={ [
                     { id: 1, caption: 'Mentee' }, { id: 2, caption: 'Mentor' }, { id: 3, caption: 'Coordinator' },
                 ] }
-                value={ value }
-                onValueChange={ onValueChange }
+                value={ userType }
+                onValueChange={ userTypeOnValueChange }
             />
             <Text>With Grey border</Text>
             <MultiSwitch
@@ -38,16 +39,16 @@ export default function BasicExample() {
                     { id: 1, caption: 'Mentee' }, { id: 2, caption: 'Mentor' }, { id: 3, caption: 'Coordinator' },
                 ] }
                 color="secondary"
-                value={ value }
-                onValueChange={ onValueChange }
+                value={ userType }
+                onValueChange={ userTypeOnValueChange }
             />
             <Text>Disabled</Text>
             <MultiSwitch
                 items={ [
                     { id: 1, caption: 'Mentee' }, { id: 2, caption: 'Mentor' }, { id: 3, caption: 'Coordinator' },
                 ] }
-                value={ value }
-                onValueChange={ onValueChange }
+                value={ userType }
+                onValueChange={ userTypeOnValueChange }
                 isDisabled
             />
             <Text>Icon only</Text>
diff --git a/app/src/docs/_examples/pickerInput/LazyTreeSearch.example.tsx b/app/src/docs/_examples/pickerInput/LazyTreeSearch.example.tsx
index 83c23abee0..6cebce86b2 100644
--- a/app/src/docs/_examples/pickerInput/LazyTreeSearch.example.tsx
+++ b/app/src/docs/_examples/pickerInput/LazyTreeSearch.example.tsx
@@ -19,6 +19,7 @@ export default function LazyTreeSearch() {
             getId: (i) => i.id,
             getParentId: (i) => i.parentId,
             getChildCount: (l) => l.childCount,
+            selectAll: false,
         },
         [],
     );
@@ -42,6 +43,7 @@ export default function LazyTreeSearch() {
             getId: (i) => i.id,
             getParentId: (i) => i.parentId,
             getChildCount: (l) => l.childCount,
+            selectAll: false,
         },
         [],
     );
diff --git a/app/src/docs/_examples/richTextEditor/WithInnerScroll.example.tsx b/app/src/docs/_examples/richTextEditor/WithInnerScroll.example.tsx
index 518b7348e4..0504a87709 100644
--- a/app/src/docs/_examples/richTextEditor/WithInnerScroll.example.tsx
+++ b/app/src/docs/_examples/richTextEditor/WithInnerScroll.example.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { FileUploadResponse, useUuiContext } from '@epam/uui-core';
-import { ErrorNotification, Panel } from '@epam/promo';
+import { ErrorNotification, FlexRow } from '@epam/promo';
 import { SlateEditor, defaultPlugins, imagePlugin, videoPlugin, attachmentPlugin, toDoListPlugin, baseMarksPlugin,
     linkPlugin, iframePlugin, notePlugin, separatorPlugin, uploadFilePlugin, tablePlugin, quotePlugin, colorPlugin,
     superscriptPlugin, headerPlugin, listPlugin, placeholderPlugin, EditorValue, codeBlockPlugin,
@@ -56,7 +56,7 @@ export default function WithInnerScrollExample() {
     ];
 
     return (
-        <Panel rawProps={ { style: { width: '100%', height: '350px' } } }>
+        <FlexRow rawProps={ { style: { width: '100%', height: '350px' } } }>
             <SlateEditor
                 value={ value }
                 onValueChange={ setValue }
@@ -68,6 +68,6 @@ export default function WithInnerScrollExample() {
                 fontSize="14"
                 scrollbars
             />
-        </Panel>
+        </FlexRow>
     );
 }
diff --git a/app/src/docs/_examples/tables/PagedTable.example.tsx b/app/src/docs/_examples/tables/PagedTable.example.tsx
index f9b69c25bd..55d0474381 100644
--- a/app/src/docs/_examples/tables/PagedTable.example.tsx
+++ b/app/src/docs/_examples/tables/PagedTable.example.tsx
@@ -1,5 +1,4 @@
-import React, { SetStateAction, useCallback, useMemo, useState } from 'react';
-import isEqual from 'react-fast-compare';
+import React, { useCallback, useMemo, useState } from 'react';
 import { DataColumnProps, useLazyDataSource, DataSourceState, LazyDataSourceApiRequest, useUuiContext, LazyDataSourceApi } from '@epam/uui-core';
 import { DataTable, Panel, Text, Paginator, FlexRow, FlexSpacer } from '@epam/uui';
 import { Person } from '@epam/uui-docs';
@@ -11,20 +10,6 @@ export default function PagedTable() {
         page: 1, pageSize: 10,
     });
 
-    const setTableState = useCallback((newState: SetStateAction<DataSourceState>) => {
-        setState((currentState) => {
-            const updatedState = typeof newState === 'function' ? newState(currentState) : newState;
-            const isFilterChanged = !isEqual(currentState.filter, updatedState.filter);
-            const isSearchChanged = currentState.search !== updatedState.search;
-            const isSortingChanged = !isEqual(currentState.sorting, updatedState.sorting);
-
-            if (isFilterChanged || isSearchChanged || isSortingChanged) {
-                return { ...updatedState, checked: [] };
-            }
-            return updatedState;
-        });
-    }, []);
-
     const columns: DataColumnProps<Person>[] = useMemo(
         () => [
             {
@@ -67,9 +52,10 @@ export default function PagedTable() {
             },
         },
         backgroundReload: true,
+        selectAll: false,
     }, []);
 
-    const view = dataSource.useView(state, setTableState, {});
+    const view = dataSource.useView(state, setState, {});
     const listProps = view.getListProps();
 
     return (
@@ -78,7 +64,7 @@ export default function PagedTable() {
                 { ...listProps }
                 getRows={ view.getVisibleRows }
                 value={ state }
-                onValueChange={ setTableState }
+                onValueChange={ setState }
                 columns={ columns }
                 headerTextCase="upper"
             />
@@ -86,7 +72,7 @@ export default function PagedTable() {
                 <FlexSpacer />
                 <Paginator
                     value={ state.page }
-                    onValueChange={ (newPage) => setTableState({ ...state, page: newPage, scrollTo: { index: 0 } }) }
+                    onValueChange={ (newPage) => setState({ ...state, page: newPage, scrollTo: { index: 0 } }) }
                     totalPages={ Math.ceil((listProps.totalCount ?? 0) / state.pageSize) }
                 />
                 <FlexSpacer />
diff --git a/app/src/docs/_examples/tables/TableGroupedHeader.example.tsx b/app/src/docs/_examples/tables/TableGroupedHeader.example.tsx
new file mode 100644
index 0000000000..3466d93fc2
--- /dev/null
+++ b/app/src/docs/_examples/tables/TableGroupedHeader.example.tsx
@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import { DataSourceState, DataColumnProps, useUuiContext, useLazyDataSource, DataColumnGroupProps } from '@epam/uui-core';
+import { Text, DataTable, Panel, FlexRow, Badge, BadgeProps } from '@epam/uui';
+import { Person } from '@epam/uui-docs';
+
+import css from './TablesExamples.module.scss';
+import { TApi } from '../../../data';
+
+export default function TableGroupedHeaderExample() {
+    const svc = useUuiContext<TApi>();
+    const [tableState, setTableState] = useState<DataSourceState>({});
+
+    // Define columns groups array
+    const columnGroups: DataColumnGroupProps[] = [
+        {
+            key: 'location',
+            caption: 'Location',
+            textAlign: 'center',
+        },
+        {
+            key: 'position',
+            caption: 'Position',
+            textAlign: 'center',
+        },
+    ];
+
+    // Define columns config array
+    const personColumns: DataColumnProps<Person, number>[] = [
+        {
+            key: 'name',
+            caption: 'Name',
+            render: (p) => <Text>{p.name}</Text>,
+            width: 130,
+            isSortable: true,
+        },
+        {
+            key: 'profileStatus',
+            caption: 'Status',
+            render: (p) => (
+                <FlexRow>
+                    <Badge size="24" indicator fill="outline" color={ p.profileStatus.toLowerCase() as BadgeProps['color'] } caption={ p.profileStatus } />
+                </FlexRow>
+            ),
+            grow: 0,
+            width: 100,
+            minWidth: 90,
+            isSortable: true,
+        },
+        {
+            key: 'countryName',
+            caption: 'Country',
+            group: 'location', // Specify group key
+            render: (p) => <Text>{p.countryName}</Text>,
+            grow: 0,
+            width: 110,
+            isSortable: true,
+        },
+        {
+            key: 'cityName',
+            caption: 'City',
+            group: 'location', // Specify group key
+            render: (p) => <Text>{p.cityName}</Text>,
+            grow: 0,
+            width: 110,
+            isSortable: true,
+        },
+        {
+            key: 'officeAddress',
+            caption: 'Office',
+            group: 'location', // Specify group key
+            render: (p) => <Text>{p.officeAddress}</Text>,
+            grow: 0,
+            width: 150,
+            isSortable: true,
+        },
+        {
+            key: 'jobTitle',
+            caption: 'Title',
+            group: 'position', // Specify group key
+            render: (r) => <Text>{r.jobTitle}</Text>,
+            width: 180,
+            isSortable: true,
+        },
+        {
+            key: 'titleLevel',
+            caption: 'Track & Level',
+            group: 'position', // Specify group key
+            render: (p) => <Text>{p.titleLevel}</Text>,
+            grow: 1,
+            width: 100,
+            isSortable: true,
+        },
+    ];
+
+    const citiesDS = useLazyDataSource<Person, number, unknown>({
+        api: svc.api.demo.persons,
+        backgroundReload: true,
+    }, []);
+
+    const view = citiesDS.useView(tableState, setTableState);
+
+    return (
+        <Panel background="surface-main" shadow cx={ css.container }>
+            <DataTable
+                value={ tableState }
+                onValueChange={ setTableState }
+                { ...view.getListProps() }
+                getRows={ view.getVisibleRows }
+                showColumnsConfig={ false }
+                columnGroups={ columnGroups }
+                columns={ personColumns }
+                headerTextCase="upper"
+            />
+        </Panel>
+    );
+}
diff --git a/app/src/docs/_examples/tables/useTableState/useTableState.example.tsx b/app/src/docs/_examples/tables/useTableState/useTableState.example.tsx
index 79c66683d8..f2fae4d163 100644
--- a/app/src/docs/_examples/tables/useTableState/useTableState.example.tsx
+++ b/app/src/docs/_examples/tables/useTableState/useTableState.example.tsx
@@ -64,7 +64,7 @@ const initialPresets: ITablePreset[] = [
         name: 'Red status',
         order: 'a',
         filter: {
-            profileStatusId: 1,
+            profileStatusId: [1],
         },
         isReadonly: true,
     },
diff --git a/app/src/docs/_examples/tooltip/Basic.example.tsx b/app/src/docs/_examples/tooltip/Basic.example.tsx
deleted file mode 100644
index aabc82db60..0000000000
--- a/app/src/docs/_examples/tooltip/Basic.example.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { Button, FlexRow, Tooltip } from '@epam/uui';
-
-export default function BasicTooltipExample() {
-    return (
-        <FlexRow columnGap="12">
-            <Tooltip content="Some text">
-                <Button caption="Top" onClick={ () => null } />
-            </Tooltip>
-
-            <Tooltip content="Some text" placement="bottom">
-                <Button caption="Bottom" onClick={ () => null } />
-            </Tooltip>
-
-            <Tooltip content="Some text" placement="right">
-                <Button caption="Right" onClick={ () => null } />
-            </Tooltip>
-
-            <Tooltip content="Some text" placement="left">
-                <Button caption="Left" onClick={ () => null } />
-            </Tooltip>
-        </FlexRow>
-    );
-}
diff --git a/app/src/docs/_examples/tooltip/Types.example.tsx b/app/src/docs/_examples/tooltip/Types.example.tsx
index 170e79d125..7e457a901c 100644
--- a/app/src/docs/_examples/tooltip/Types.example.tsx
+++ b/app/src/docs/_examples/tooltip/Types.example.tsx
@@ -15,7 +15,7 @@ export default function TypesTooltipExample() {
 
     return (
         <div className={ css.container }>
-            <Tooltip content="Compact" placement="bottom">
+            <Tooltip content="Compact">
                 <Button icon={ copyIcon } caption="Copy" fill="outline" color="primary" cx={ css.firstColumn } onClick={ () => null } />
             </Tooltip>
 
@@ -23,12 +23,12 @@ export default function TypesTooltipExample() {
                 <RichTextView>
                     <span className={ css.permissionText }>Permissions</span>
                 </RichTextView>
-                <Tooltip content="Default tooltip. Can be inside as one row as 3 rows of text" placement="bottom">
+                <Tooltip content="Default tooltip. Can be inside as one row as 3 rows of text">
                     <IconContainer icon={ infoIcon } cx={ css.iconBlue } />
                 </Tooltip>
             </FlexRow>
 
-            <Tooltip content={ renderTypesMarkup() } placement="bottom" color="neutral">
+            <Tooltip content={ renderTypesMarkup() } color="neutral">
                 <Button icon={ plusIcon } onClick={ () => null } cx={ css.firstColumn } />
             </Tooltip>
 
diff --git a/app/src/docs/_examples/tooltip/Variants.example.tsx b/app/src/docs/_examples/tooltip/Variants.example.tsx
index ab93b77d2e..8c2305386a 100644
--- a/app/src/docs/_examples/tooltip/Variants.example.tsx
+++ b/app/src/docs/_examples/tooltip/Variants.example.tsx
@@ -6,15 +6,15 @@ import css from './TypesExample.module.scss';
 export default function VariantsTooltipExample() {
     return (
         <div className={ css.container }>
-            <Tooltip content="Tooltip message" placement="bottom" color="inverted">
+            <Tooltip content="Tooltip message" color="inverted">
                 <Button caption="Default" fill="outline" color="secondary" onClick={ () => null } />
             </Tooltip>
 
-            <Tooltip content="Tooltip message" placement="bottom" color="neutral">
+            <Tooltip content="Tooltip message" color="neutral">
                 <Button caption="Contrast" color="primary" onClick={ () => null } />
             </Tooltip>
 
-            <Tooltip content="Tooltip message" placement="bottom" color="critical">
+            <Tooltip content="Tooltip message" color="critical">
                 <Button caption="Critical" fill="outline" color="critical" onClick={ () => null } />
             </Tooltip>
 
diff --git a/app/src/docs/_examples/tooltip/WithLink.example.tsx b/app/src/docs/_examples/tooltip/WithLink.example.tsx
index d30108a463..6a7d455d1a 100644
--- a/app/src/docs/_examples/tooltip/WithLink.example.tsx
+++ b/app/src/docs/_examples/tooltip/WithLink.example.tsx
@@ -20,7 +20,7 @@ export default function LinkTooltipExample() {
     return (
         <FlexRow alignItems="center">
             <Text fontSize="14">Working from home allowed for employees only</Text>
-            <Tooltip content={ renderTypesMarkup() } placement="top" color="neutral" closeOnMouseLeave="boundary">
+            <Tooltip content={ renderTypesMarkup() } color="neutral" closeOnMouseLeave="boundary">
                 <IconContainer icon={ myIcon } style={ { justifyContent: 'center', marginLeft: '3px' } } cx={ css.iconAmber } />
             </Tooltip>
         </FlexRow>
diff --git a/app/src/docs/tables/Advanced.doc.tsx b/app/src/docs/tables/Advanced.doc.tsx
index db0844a6b8..153c7bcb8b 100644
--- a/app/src/docs/tables/Advanced.doc.tsx
+++ b/app/src/docs/tables/Advanced.doc.tsx
@@ -14,8 +14,6 @@ export class AdvancedTablesDoc extends BaseDocsBlock {
 
                 <DocExample cx={ css.appBg } title="Columns Configuration" path="./_examples/tables/ColumnsConfig.example.tsx" />
 
-                <DocExample cx={ css.appBg } title="Table with rows Drag&Drop" path="./_examples/tables/TableWithDnD.example.tsx" />
-
                 <DocExample cx={ css.appBg } title="Table with paging and select page" path="./_examples/tables/PagedTable.example.tsx" />
                 <DocExample cx={ css.appBg } title="Table with paging and select all rows" path="./_examples/tables/PagedTableWithSelectAll.example.tsx" />
 
@@ -23,6 +21,10 @@ export class AdvancedTablesDoc extends BaseDocsBlock {
                 
                 <DocExample cx={ css.appBg } title="Table with pinned rows" path="./_examples/tables/TableWithPinnedRows.example.tsx" />
                 <DocExample cx={ css.appBg } title="Table with expandable rows" path="./_examples/tables/TableWithExpandableRows.example.tsx" />
+
+                <DocExample cx={ css.appBg } title="Table with rows Drag&Drop" path="./_examples/tables/TableWithDnD.example.tsx" />
+
+                <DocExample cx={ css.appBg } title="Table with header groups" path="./_examples/tables/TableGroupedHeader.example.tsx" />
             </>
         );
     }
diff --git a/app/src/index.tsx b/app/src/index.tsx
index 9cc3feb878..a35e00e7ce 100644
--- a/app/src/index.tsx
+++ b/app/src/index.tsx
@@ -4,6 +4,7 @@ import { RouterProvider } from 'react-router';
 import { createBrowserRouter } from 'react-router-dom';
 import { init as initApm } from '@elastic/apm-rum';
 import { Router6AdaptedRouter, useUuiServices, UuiContext, IProcessRequest, GAListener } from '@epam/uui-core';
+import { i18n } from '@epam/uui';
 import { AmplitudeListener } from './analyticsEvents';
 import { svc } from './services';
 import App from './App';
@@ -19,6 +20,14 @@ import '@epam/assets/theme/theme_eduverse_light.scss';
 import '@epam/assets/theme/theme_eduverse_dark.scss';
 import './index.module.scss';
 
+i18n.errorHandler.supportLink = (
+    <>
+        You can track the service availability at
+        {' '}
+        <a href={ `https://status.epam.com/?utm_source=${window.location.host}&utm_medium=ErrorPage&utm_campaign=StatusAquisitionTracking` }>status.epam.com</a>
+    </>
+);
+
 const router6 = createBrowserRouter([
     { path: '*', element: <App /> },
 ]);
diff --git a/app/src/sandbox/RTE-readonly/RichTextEditorDemo.module.scss b/app/src/sandbox/RTE-readonly/RichTextEditorDemo.module.scss
new file mode 100644
index 0000000000..49e7721e90
--- /dev/null
+++ b/app/src/sandbox/RTE-readonly/RichTextEditorDemo.module.scss
@@ -0,0 +1,5 @@
+.container {
+    width: 60vw;
+    max-width: 1024px;
+    margin: 24px auto;
+}
diff --git a/app/src/sandbox/RTE-readonly/RichTextEditorDemo.tsx b/app/src/sandbox/RTE-readonly/RichTextEditorDemo.tsx
new file mode 100644
index 0000000000..492edbbad1
--- /dev/null
+++ b/app/src/sandbox/RTE-readonly/RichTextEditorDemo.tsx
@@ -0,0 +1,101 @@
+import * as React from 'react';
+import {
+    SlateEditor,
+    defaultPlugins,
+    imagePlugin,
+    videoPlugin,
+    attachmentPlugin,
+    toDoListPlugin,
+    baseMarksPlugin,
+    linkPlugin,
+    iframePlugin,
+    notePlugin,
+    separatorPlugin,
+    uploadFilePlugin,
+    tablePlugin,
+    quotePlugin,
+    colorPlugin,
+    superscriptPlugin,
+    headerPlugin,
+    listPlugin,
+    placeholderPlugin,
+    codeBlockPlugin,
+    EditorValue,
+} from '@epam/uui-editor';
+import { svc } from '../../services';
+import { demoData } from '@epam/uui-docs';
+import css from './RichTextEditorDemo.module.scss';
+import { ErrorNotification, Text } from '@epam/uui';
+import { FileUploadResponse } from '@epam/uui-core';
+
+interface SlateEditorBasicExampleState {
+    value: EditorValue;
+}
+
+export class RichTextEditorDemoReadonly extends React.Component<any, SlateEditorBasicExampleState> {
+    state: SlateEditorBasicExampleState = {
+        value: demoData.slateInitialValue,
+    };
+
+    onChange = (value: EditorValue) => {
+        this.setState({ value: value });
+    };
+
+    uploadFile = (file: File): Promise<FileUploadResponse> => {
+        return svc.uuiApi.uploadFile('/upload/uploadFileMock', file, {})
+            .catch((res) => {
+                svc.uuiNotifications.show((props) =>
+                    <ErrorNotification { ...props }><Text>{ res.error.message }</Text></ErrorNotification>).catch(() => {});
+                return Promise.reject(res);
+            });
+    };
+
+    plugins = [
+        ...defaultPlugins,
+        ...baseMarksPlugin(),
+        headerPlugin(),
+        colorPlugin(),
+        superscriptPlugin(),
+        listPlugin(),
+        toDoListPlugin(),
+        quotePlugin(),
+        linkPlugin(),
+        notePlugin(),
+        uploadFilePlugin({ uploadFile: this.uploadFile }),
+        attachmentPlugin(),
+        imagePlugin(),
+        videoPlugin(),
+        iframePlugin(),
+        separatorPlugin(),
+        tablePlugin(),
+        placeholderPlugin({
+            items: [
+                {
+                    name: 'Name',
+                    field: 'name',
+                },
+                {
+                    name: 'Email',
+                    field: 'email',
+                },
+            ],
+        }),
+        codeBlockPlugin(),
+    ];
+
+    render() {
+        return (
+            <div className={ css.container }>
+                <SlateEditor
+                    value={ this.state.value }
+                    onValueChange={ this.onChange }
+                    autoFocus={ true }
+                    plugins={ this.plugins }
+                    placeholder="Add description"
+                    minHeight="none"
+                    isReadonly={ true }
+                />
+            </div>
+        );
+    }
+}
diff --git a/app/src/sandbox/SandboxPage.tsx b/app/src/sandbox/SandboxPage.tsx
index f47c296fba..06b582b922 100644
--- a/app/src/sandbox/SandboxPage.tsx
+++ b/app/src/sandbox/SandboxPage.tsx
@@ -23,6 +23,7 @@ import { ReactQueryLocationsTable } from './reactQueryLocationsTable';
 import { ProjectTableDemo } from './editableTable';
 import { RtlExample } from './rtl/Rtl-example';
 import { DemoForm } from './rtl/form/DemoForm';
+import { RichTextEditorDemoReadonly } from './RTE-readonly/RichTextEditorDemo';
 
 export function SandboxPage() {
     const items = useMemo(
@@ -41,7 +42,8 @@ export function SandboxPage() {
             { id: 'SkillsBatteryPopover', name: 'Skills', component: Skills },
             { id: 'TableCellsStylesSandbox', name: 'Table Cells/Rows styles', component: TableCellsStylesSandbox },
             { id: 'AdaptivePanel', name: 'Adaptive panel', component: AdaptivePanelDemo },
-            { id: 'RTEDemo', name: 'RTE Demo', component: RichTextEditorDemo },
+            { id: 'RTEDemo', name: 'RTE Contents', component: RichTextEditorDemo },
+            { id: 'RTE-readonly', name: 'RTE Readonly', component: RichTextEditorDemoReadonly },
             { id: 'tokens', name: 'Tokens' },
             { parentId: 'tokens', id: 'tokensPalette', name: 'Palette', component: PalettePage },
             { id: 'rtl-example', name: 'Rtl-example', component: RtlExample },
diff --git a/app/src/sandbox/tables/PersonsTableDemo.tsx b/app/src/sandbox/tables/PersonsTableDemo.tsx
index 8a08495b39..c8f1eab076 100644
--- a/app/src/sandbox/tables/PersonsTableDemo.tsx
+++ b/app/src/sandbox/tables/PersonsTableDemo.tsx
@@ -18,7 +18,7 @@ const formatCurrency = (value: number) => {
 };
 
 export function PersonsTableDemo() {
-    const { personColumns, summaryColumns } = React.useMemo(() => getColumns(), []);
+    const { personColumns, summaryColumns, personColumnsGroups } = React.useMemo(() => getColumns(), []);
 
     const [summary, setSummary] = React.useState<PersonsSummary & Pick<PersonsApiResponse, 'totalCount'>>({
         totalCount: undefined,
@@ -161,7 +161,7 @@ export function PersonsTableDemo() {
         [value.filter?.groupBy],
     );
     const { rows, listProps } = useDataRows(tree);
-    
+
     return (
         <div className={ cx(css.container, css.uuiThemeLoveship) }>
             <FlexRow spacing="12" padding="24" vPadding="12" borderBottom={ true }>
@@ -189,6 +189,7 @@ export function PersonsTableDemo() {
             <DataTable
                 rows={ rows }
                 columns={ personColumns as DataColumnProps<PersonTableRecord, PersonTableRecordId, any>[] }
+                columnGroups={ personColumnsGroups }
                 value={ value }
                 onValueChange={ onValueChange }
                 filters={ getFilters() }
diff --git a/app/src/sandbox/tables/columns.tsx b/app/src/sandbox/tables/columns.tsx
index 9807ade643..dabbf1ed24 100644
--- a/app/src/sandbox/tables/columns.tsx
+++ b/app/src/sandbox/tables/columns.tsx
@@ -1,60 +1,93 @@
 import * as React from 'react';
 import { Text, FlexRow } from '@epam/loveship';
-import { DataQueryFilter, DataColumnProps } from '@epam/uui-core';
+import { DataQueryFilter, DataColumnProps, DataColumnGroupProps } from '@epam/uui-core';
 import type { Person } from '@epam/uui-docs';
 import type { PersonTableRecordId } from './types';
 import type { PersonsSummary } from './types';
 
 export function getColumns() {
+    const personColumnsGroups: DataColumnGroupProps[] = [
+        {
+            key: 'name',
+            caption: 'Name',
+        },
+        {
+            key: 'position',
+            caption: 'Position',
+        },
+        {
+            key: 'amounts',
+            caption: 'Amounts',
+            textAlign: 'right',
+        },
+    ];
+
     const personColumns: DataColumnProps<Person, PersonTableRecordId, DataQueryFilter<Person>>[] = [
         {
             key: 'name',
+            group: 'name',
             caption: 'Name',
             render: (p) => <Text>{p.name}</Text>,
             width: 250,
-            grow: 1,
             fix: 'left',
+            allowResizing: true,
+            isSortable: true,
+        }, {
+            key: 'name2',
+            group: 'name',
+            caption: 'Name2',
+            render: (p) => <Text>{p.name}</Text>,
+            width: 250,
+            fix: 'left',
+            allowResizing: true,
             isSortable: true,
         }, {
             key: 'jobTitle',
+            group: 'position',
             caption: 'Job Title',
             render: (r) => <Text>{r.jobTitle}</Text>,
             width: 200,
-            grow: 1,
+            allowResizing: true,
             isSortable: true,
             isFilterActive: (f) => !!f.jobTitle,
         }, {
             key: 'departmentName',
+            group: 'position',
             caption: 'Department',
             render: (p) => <Text>{p.departmentName}</Text>,
             width: 200,
-            grow: 1,
+            allowResizing: true,
             isSortable: true,
             isFilterActive: (f) => !!f.departmentId,
         }, {
             key: 'birthDate',
+            group: 'position',
             caption: 'Birth Date',
             render: (p) => p?.birthDate && <Text>{new Date(p.birthDate).toLocaleDateString()}</Text>,
             width: 120,
+            allowResizing: true,
             isSortable: true,
         }, {
             key: 'hireDate',
             caption: 'Hire Date',
             render: (p) => p?.hireDate && <Text>{new Date(p.hireDate).toLocaleDateString()}</Text>,
             width: 120,
+            allowResizing: true,
             isSortable: true,
         }, {
             key: 'locationName',
             caption: 'Location',
             render: (p) => <Text>{p.locationName}</Text>,
             width: 180,
-            grow: 1,
+            allowResizing: true,
             isSortable: true,
         }, {
             key: 'salary',
+            group: 'amounts',
             caption: 'Salary',
             render: (p) => <Text color="night900">{p.salary}</Text>,
             width: 150,
+            allowResizing: true,
             isSortable: true,
             textAlign: 'right',
         }, {
@@ -72,7 +105,6 @@ export function getColumns() {
             fix: 'left',
             textAlign: 'right',
             width: 250,
-            grow: 1,
             render: (p) => (
                 <FlexRow background="night50">
                     <Text fontSize="14">
@@ -87,13 +119,13 @@ export function getColumns() {
             ),
         }, {
             key: 'jobTitle',
+            group: 'position',
             width: 200,
-            grow: 1,
             render: () => <Text fontSize="14">-</Text>,
         }, {
             key: 'departmentName',
+            group: 'position',
             width: 200,
-            grow: 1,
             render: () => (
                 <Text fontSize="14">
                     -
@@ -111,7 +143,6 @@ export function getColumns() {
             key: 'locationName',
             render: () => <Text fontSize="14">-</Text>,
             width: 180,
-            grow: 1,
         }, {
             key: 'salary',
             caption: 'Total Salary',
@@ -133,5 +164,6 @@ export function getColumns() {
     return {
         personColumns,
         summaryColumns,
+        personColumnsGroups,
     };
 }
diff --git a/changelog.md b/changelog.md
index a06210b3ea..d50fbb72ef 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,3 +1,26 @@
+# 5.xx.xx - xx.xx.2024
+
+**What's New**
+* Remove 'prop-types' from UUI packages dependencies. Remove `uuiContextTypes` interface, since it was needed for already outdated React context API.
+* [Alert]: added support for size theming
+* [DataTable]: added support of column groups in table header. Read more - https://uui.epam.com/documents?id=advancedTables&mode=doc&category=tables&theme=electric#table_with_header_groups
+* [ErrorPage]: added field for additional message with support link (it works with `500, 503, default` errors), added support link for the site
+* [ErrorPage]: embed typography styles for error page texts
+
+**What's Fixed**
+* [Dropdown][Tooltip]: Fixed a bug where the body overflowed if there was no space for the default or opposite placement. 
+  Now it tries other placements, e.g., if there’s no space at the top or bottom, it will place the body on the right if there’s enough space.
+* [PickerInput]: fixed unnecessary api calls on body open with `minCharsToSearch` prop and search in body
+* [RTE]: fixed image caption not being visible when RTE initially in readonly mode
+* [DatePicker]: fixed body close if date picker input scrolled out from view
+* [Modals]: prevent scrolling to the modal toggler because of focus return after modal close
+* [RTE]: fixed scroll to the top of the editor after editor modal windows(Add image/link/video etc.) were close
+* [RTE]: fixed error while merging cells without content
+* [RTE]: fixed bug when files added from attachment button inserted in preview mode instead of attachment block
+* [RTE]: fixed crash when removing the sole table row
+* [Svg]: don't set fill attribute if it's not provided
+* [Modals]: autofocus first active element on modal open. It's a temporary fix, because of bug in react-focus-lock lib(https://github.com/theKashey/react-focus-lock/issues/340). Ideally focus should move to the first active element only after 'Tab' key was pressed, we will come back to this solution when bug will be fixed.
+
 # 5.11.0 - 15.11.2024
 
 **What's New**
diff --git a/draft-rte/package.json b/draft-rte/package.json
index f7c05a352e..c66476b1ec 100644
--- a/draft-rte/package.json
+++ b/draft-rte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epam/draft-rte",
-  "version": "5.11.1-alpha.0",
+  "version": "5.11.1-rc.0",
   "author": "EPAM",
   "license": "MIT",
   "main": "index.js",
@@ -11,10 +11,10 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@epam/assets": "5.11.1-alpha.0",
-    "@epam/loveship": "5.11.1-alpha.0",
-    "@epam/uui-components": "5.11.1-alpha.0",
-    "@epam/uui-core": "5.11.1-alpha.0",
+    "@epam/assets": "5.11.1-rc.0",
+    "@epam/loveship": "5.11.1-rc.0",
+    "@epam/uui-components": "5.11.1-rc.0",
+    "@epam/uui-core": "5.11.1-rc.0",
     "@types/draft-js": "0.10.23",
     "classnames": "^2.2.6",
     "draft-convert": "^2.1.2",
diff --git a/epam-assets/package.json b/epam-assets/package.json
index 21161033ae..3cc34907e3 100644
--- a/epam-assets/package.json
+++ b/epam-assets/package.json
@@ -1,12 +1,12 @@
 {
   "name": "@epam/assets",
-  "version": "5.11.1-alpha.0",
+  "version": "5.11.1-rc.0",
   "description": "EPAM Assets Library",
   "author": "EPAM",
   "license": "MIT",
   "scripts": {
     "build": "ts-node -T ../uui-build/ts/scripts/buildUuiModule.ts && yarn buildTheme",
-    "buildTheme": "yarn --cwd ../uui-build compile-theme-scss --dirs=./epam-assets/theme:./epam-assets/build/css/theme",
+    "buildTheme": "yarn --cwd ../uui-build compile-theme-scss --dirs=./epam-assets/theme:./epam-assets/build/css/theme --recursive",
     "prepublish": "yarn build"
   },
   "repository": {
diff --git a/epam-assets/theme/variables/6px_grid.scss b/epam-assets/theme/variables/6px_grid.scss
index 68d983a429..ba6a694d0a 100644
--- a/epam-assets/theme/variables/6px_grid.scss
+++ b/epam-assets/theme/variables/6px_grid.scss
@@ -313,4 +313,15 @@
             --uui-vertical-padding: 3px;
         }
     }
+
+    .uui-alert {
+        &.uui-size-36 {
+            --uui-alert-indicator-border-width: 3px;
+            --uui-alert-gap-h: 12px;
+            --uui-alert-gap-v: 3px;
+            --uui-alert-padding-h: 9px;
+            --uui-alert-padding-v: 3px;
+            --uui-alert-caption-gap-h: 9px;
+        }
+    }
 }
diff --git a/epam-electric/package.json b/epam-electric/package.json
index b572f53d11..b19ef96a85 100644
--- a/epam-electric/package.json
+++ b/epam-electric/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epam/electric",
-  "version": "5.11.1-alpha.0",
+  "version": "5.11.1-rc.0",
   "description": "EPAM UUI components set branded with 'electric' style",
   "author": "EPAM",
   "license": "MIT",
@@ -12,15 +12,14 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@epam/uui": "5.11.1-alpha.0",
-    "@epam/uui-components": "5.11.1-alpha.0",
-    "@epam/uui-core": "5.11.1-alpha.0"
+    "@epam/uui": "5.11.1-rc.0",
+    "@epam/uui-components": "5.11.1-rc.0",
+    "@epam/uui-core": "5.11.1-rc.0"
   },
   "devDependencies": {
     "mockdate": "^3.0.5"
   },
   "peerDependencies": {
-    "prop-types": "*",
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0"
   },
diff --git a/epam-promo/package.json b/epam-promo/package.json
index bb71de0ad3..9433b7ee6d 100644
--- a/epam-promo/package.json
+++ b/epam-promo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epam/promo",
-  "version": "5.11.1-alpha.0",
+  "version": "5.11.1-rc.0",
   "description": "EPAM UUI4 components set",
   "author": "EPAM",
   "license": "MIT",
@@ -12,15 +12,14 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@epam/assets": "5.11.1-alpha.0",
-    "@epam/uui": "5.11.1-alpha.0",
-    "@epam/uui-components": "5.11.1-alpha.0",
-    "@epam/uui-core": "5.11.1-alpha.0",
+    "@epam/assets": "5.11.1-rc.0",
+    "@epam/uui": "5.11.1-rc.0",
+    "@epam/uui-components": "5.11.1-rc.0",
+    "@epam/uui-core": "5.11.1-rc.0",
     "@types/classnames": "2.2.6",
     "classnames": "2.2.6"
   },
   "peerDependencies": {
-    "prop-types": "*",
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0"
   },
diff --git a/extra/package.json b/extra/package.json
index eeaf3b249a..aa9c31bdd4 100644
--- a/extra/package.json
+++ b/extra/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epam/uui-extra",
-  "version": "5.11.1-alpha.0",
+  "version": "5.11.1-rc.0",
   "description": "EPAM UUI components set branded with 'loveship' style",
   "author": "EPAM",
   "license": "MIT",
@@ -11,13 +11,12 @@
     "build": "ts-node ../uui-build/ts/scripts/buildUuiModule.ts"
   },
   "dependencies": {
-    "@epam/loveship": "5.11.1-alpha.0",
-    "@epam/promo": "5.11.1-alpha.0",
-    "@epam/uui-core": "5.11.1-alpha.0",
+    "@epam/loveship": "5.11.1-rc.0",
+    "@epam/promo": "5.11.1-rc.0",
+    "@epam/uui-core": "5.11.1-rc.0",
     "immutable": "3.8.2"
   },
   "peerDependencies": {
-    "prop-types": "*",
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0"
   },
diff --git a/lerna.json b/lerna.json
index 28176cdad7..34b458d25f 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "5.11.1-alpha.0",
+  "version": "5.11.1-rc.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "exact": true
diff --git a/loveship/package.json b/loveship/package.json
index d71ecc8f5a..af7dfaccdc 100644
--- a/loveship/package.json
+++ b/loveship/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epam/loveship",
-  "version": "5.11.1-alpha.0",
+  "version": "5.11.1-rc.0",
   "description": "EPAM UUI components set branded with 'loveship' style",
   "author": "EPAM",
   "license": "MIT",
@@ -12,15 +12,14 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@epam/assets": "5.11.1-alpha.0",
-    "@epam/uui": "5.11.1-alpha.0",
-    "@epam/uui-components": "5.11.1-alpha.0",
-    "@epam/uui-core": "5.11.1-alpha.0",
+    "@epam/assets": "5.11.1-rc.0",
+    "@epam/uui": "5.11.1-rc.0",
+    "@epam/uui-components": "5.11.1-rc.0",
+    "@epam/uui-core": "5.11.1-rc.0",
     "@types/classnames": "2.2.6",
     "classnames": "2.2.6"
   },
   "peerDependencies": {
-    "prop-types": "*",
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0"
   },
diff --git a/public/docs/content/examples-adaptivePanel-Basic.json b/public/docs/content/examples-adaptivePanel-Basic.json
index 2e9017bcd3..399403e3e0 100644
--- a/public/docs/content/examples-adaptivePanel-Basic.json
+++ b/public/docs/content/examples-adaptivePanel-Basic.json
@@ -60,17 +60,24 @@
   },
   {
     "data": {},
-    "type": "paragraph",
+    "type": "note-error",
     "children": [
       {
-        "text": "Additionally, the AdaptivePanel has an "
+        "text": "Note: If you need to add margins between items, use the "
       },
       {
         "text": "itemsGap",
         "uui-richTextEditor-code": true
       },
       {
-        "text": " property used to define the spacing between the items within it."
+        "text": " prop on the "
+      },
+      {
+        "text": "AdaptivePanel",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " instead of applying CSS margins to each item. This is because margin values cannot be accounted when calculating the item's width and must be explicitly added."
       }
     ]
   }
diff --git a/public/docs/content/examples-tables-TableGroupedHeader.json b/public/docs/content/examples-tables-TableGroupedHeader.json
new file mode 100644
index 0000000000..ed1dc5a795
--- /dev/null
+++ b/public/docs/content/examples-tables-TableGroupedHeader.json
@@ -0,0 +1,32 @@
+[
+  {
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "To create column groups in the table header, provide the group configuration using the "
+      },
+      {
+        "text": "columnGroups",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " prop. For each column to be grouped, specify the "
+      },
+      {
+        "text": "group",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " field with the corresponding group key."
+      }
+    ]
+  },
+  {
+    "type": "note-warning",
+    "children": [
+      {
+        "text": "This is preview version of header groups functionality with limited support of some DataTable features, like columns reordering, resizing and columns configuration via modal."
+      }
+    ]
+  }
+]
\ No newline at end of file
diff --git a/public/docs/content/examples-tables-useTableState-useTableState.json b/public/docs/content/examples-tables-useTableState-useTableState.json
index 46f9ad336a..25e81314f1 100644
--- a/public/docs/content/examples-tables-useTableState-useTableState.json
+++ b/public/docs/content/examples-tables-useTableState-useTableState.json
@@ -13,5 +13,26 @@
         "text": " hook for table with filtration on columns and saving it to the presets. "
       }
     ]
+  },
+  {
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "By default, table state value stored in URL, if you want to store it somewhere else, look at "
+      },
+      {
+        "type": "link",
+        "url": "/documents?id=useTableState&mode=doc&category=tables#disable_url_storing_and_handle_state_manually",
+        "target": "_blank",
+        "children": [
+          {
+            "text": "this"
+          }
+        ]
+      },
+      {
+        "text": " example."
+      }
+    ]
   }
 ]
\ No newline at end of file
diff --git a/templates/uui-cra-template/package.json b/templates/uui-cra-template/package.json
index d5113ebba7..e556d05d77 100644
--- a/templates/uui-cra-template/package.json
+++ b/templates/uui-cra-template/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epam/cra-template-uui",
-  "version": "5.11.1-alpha.0",
+  "version": "5.11.1-rc.0",
   "keywords": [
     "UUI",
     "react",
diff --git a/test-utils/package.json b/test-utils/package.json
index e32530527b..6e5b35193b 100644
--- a/test-utils/package.json
+++ b/test-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epam/uui-test-utils",
-  "version": "5.11.1-alpha.0",
+  "version": "5.11.1-rc.0",
   "author": "EPAM",
   "license": "MIT",
   "private": false,
@@ -11,7 +11,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@epam/uui-core": "5.11.1-alpha.0",
+    "@epam/uui-core": "5.11.1-rc.0",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/react-test-renderer": "18.0.0",
diff --git a/uui-build/config/bundleSizeBaseLine.json b/uui-build/config/bundleSizeBaseLine.json
index aa68d1186e..076df6afc6 100644
--- a/uui-build/config/bundleSizeBaseLine.json
+++ b/uui-build/config/bundleSizeBaseLine.json
@@ -1,62 +1,62 @@
 {
-  "version": "5.10.0",
-  "timestamp": "2024-10-15",
+  "version": "5.11.0",
+  "timestamp": "2024-11-22",
   "sizes": {
     "templateApp": {
-      "css": 300045,
-      "js": 478744
+      "css": 303125,
+      "js": 482762
     },
     "@epam/app": {
-      "css": 678966,
-      "js": 5033790
+      "css": 731357,
+      "js": 5035508
     },
     "@epam/draft-rte": {
-      "css": 9771,
-      "js": 45292
+      "css": 9782,
+      "js": 45296
     },
     "@epam/electric": {
       "css": 2275,
-      "js": 2408
+      "js": 2416
     },
     "@epam/promo": {
-      "css": 47627,
-      "js": 10896
+      "css": 47140,
+      "js": 9424
     },
     "@epam/uui-extra": {
       "css": 0,
       "js": 213
     },
     "@epam/loveship": {
-      "css": 53440,
-      "js": 42547
+      "css": 53117,
+      "js": 40264
     },
     "@epam/uui-components": {
-      "css": 22530,
-      "js": 247001
+      "css": 22508,
+      "js": 248024
     },
     "@epam/uui-core": {
       "css": 0,
-      "js": 345544
+      "js": 346246
     },
     "@epam/uui-db": {
       "css": 0,
       "js": 45769
     },
     "@epam/uui-docs": {
-      "css": 2448,
-      "js": 209641
+      "css": 2447,
+      "js": 178066
     },
     "@epam/uui-editor": {
-      "css": 12733,
-      "js": 175284
+      "css": 12746,
+      "js": 176104
     },
     "@epam/uui-timeline": {
-      "css": 2255,
-      "js": 79166
+      "css": 2254,
+      "js": 80669
     },
     "@epam/uui": {
-      "css": 277776,
-      "js": 343597
+      "css": 280340,
+      "js": 346171
     }
   }
 }
\ No newline at end of file
diff --git a/uui-build/linting/stylelintrc.base.js b/uui-build/linting/stylelintrc.base.js
index 76a4f75c8b..d866d8a536 100644
--- a/uui-build/linting/stylelintrc.base.js
+++ b/uui-build/linting/stylelintrc.base.js
@@ -73,6 +73,12 @@ const SCSS_COMMON_RULES = {
     'scss/selector-no-redundant-nesting-selector': null,
     'scss/dollar-variable-pattern': null,
     'scss/no-global-function-names': null,
+    'length-zero-no-unit': [
+        true, {
+            ignore: ['custom-properties'],
+            ignoreFunctions: ['var', '/^--/'],
+        },
+    ],
 };
 
 module.exports = {
diff --git a/uui-build/package.json b/uui-build/package.json
index e06637778f..fd2580e9b5 100644
--- a/uui-build/package.json
+++ b/uui-build/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epam/uui-build",
-  "version": "5.11.1-alpha.0",
+  "version": "5.11.1-rc.0",
   "bin": {
     "epam-uui-build": "./bin/cli.js"
   },
diff --git a/uui-components/package.json b/uui-components/package.json
index f4295cf854..9744b90003 100644
--- a/uui-components/package.json
+++ b/uui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epam/uui-components",
-  "version": "5.11.1-alpha.0",
+  "version": "5.11.1-rc.0",
   "description": "EPAM UUI Components",
   "author": "EPAM",
   "license": "MIT",
@@ -13,7 +13,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@epam/uui-core": "5.11.1-alpha.0",
+    "@epam/uui-core": "5.11.1-rc.0",
     "@popperjs/core": "2.9.0",
     "@types/classnames": "2.2.6",
     "@types/react-measure": "2.0.8",
@@ -28,7 +28,6 @@
     "react-transition-group": "4.4.5"
   },
   "peerDependencies": {
-    "prop-types": "*",
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0"
   },
diff --git a/uui-components/src/overlays/Dropdown.tsx b/uui-components/src/overlays/Dropdown.tsx
index 467291546c..b30ade0967 100644
--- a/uui-components/src/overlays/Dropdown.tsx
+++ b/uui-components/src/overlays/Dropdown.tsx
@@ -219,14 +219,24 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
         }
     };
 
-    private getPlacement = (placement: Placement): Placement => {
+    private getPlacement = (placement: Placement = 'bottom-start'): Placement => {
         if (window.document?.dir === 'rtl') {
-            if (!placement) return 'bottom-end';
             return placement.replace('start', 'end') as Placement;
         }
         return placement;
     };
 
+    private getOppositePlacement = (placement: Placement): Placement => {
+        const placementDirection = placement.split('-')[0];
+        switch (placementDirection) {
+            case 'bottom': return placement.replace('bottom', 'top') as Placement;
+            case 'top': return placement.replace('top', 'bottom') as Placement;
+            case 'left': return placement.replace('left', 'right') as Placement;
+            case 'right': return placement.replace('right', 'left') as Placement;
+            default: return placement;
+        }
+    };
+
     private renderTarget(targetProps: ReferenceChildrenProps) {
         const innerRef = (node: HTMLElement | null) => {
             if (!node) {
@@ -264,7 +274,6 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
         if (isReferenceHidden && this.props.closeBodyOnTogglerHidden !== false && this.isOpened()) {
             // Yes, we know that it's hack and we can perform setState in render, but we don't have other way to do it in this case
             setTimeout(() => this.handleOpenedChange(false), 0);
-            return null;
         }
 
         // @ts-ignore
@@ -320,10 +329,17 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
                     rootBoundary: 'viewport',
                     boundary: this.props.boundaryElement,
                 },
-            }, {
+            },
+            {
                 name: 'hide',
                 enabled: true,
             },
+            {
+                name: 'flip',
+                options: {
+                    fallbackPlacements: [this.getOppositePlacement(this.getPlacement(this.props.placement)), 'auto'],
+                },
+            },
         ];
 
         if (shouldShowBody) {
@@ -335,7 +351,7 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
                 <Reference>{(targetProps) => this.renderTarget(targetProps)}</Reference>
                 {shouldShowBody && (
                     <Portal target={ this.props.portalTarget }>
-                        <Popper placement={ this.getPlacement(this.props.placement) || 'bottom-start' } strategy="fixed" modifiers={ [...defaultModifiers, ...(this.props.modifiers || [])] }>
+                        <Popper placement={ this.getPlacement(this.props.placement) } strategy="fixed" modifiers={ [...defaultModifiers, ...(this.props.modifiers || [])] }>
                             {this.renderDropdownBody}
                         </Popper>
                     </Portal>
diff --git a/uui-components/src/overlays/ModalBlocker.tsx b/uui-components/src/overlays/ModalBlocker.tsx
index 948fb50187..ee050da3aa 100644
--- a/uui-components/src/overlays/ModalBlocker.tsx
+++ b/uui-components/src/overlays/ModalBlocker.tsx
@@ -53,7 +53,7 @@ export const ModalBlocker = React.forwardRef<HTMLDivElement, ModalBlockerProps>(
                 onClick={ handleBlockerClick }
                 aria-label="Click to close a modal"
             />
-            <FocusLock autoFocus={ false } returnFocus disabled={ props.disableFocusLock }>
+            <FocusLock autoFocus={ true } returnFocus={ { preventScroll: true } } disabled={ props.disableFocusLock }>
                 {props.children}
             </FocusLock>
         </div>
diff --git a/uui-components/src/pickers/hooks/usePickerInput.ts b/uui-components/src/pickers/hooks/usePickerInput.ts
index 876aa537ad..bc4a59c039 100644
--- a/uui-components/src/pickers/hooks/usePickerInput.ts
+++ b/uui-components/src/pickers/hooks/usePickerInput.ts
@@ -52,7 +52,9 @@ export function usePickerInput<TItem, TId, TProps>(props: UsePickerInputProps<TI
 
     const shouldShowBody = () => (props.shouldShowBody ?? defaultShouldShowBody)();
 
-    const showSelectedOnly = !shouldShowBody() || pickerInputState.showSelected;
+    const shouldLoadList = () => isSearchLongEnough() && shouldShowBody();
+
+    const showSelectedOnly = !shouldLoadList() || pickerInputState.showSelected;
 
     const picker = usePicker<TItem, TId, UsePickerInputProps<TItem, TId, TProps>>({ ...props, showSelectedOnly }, pickerInputState);
     const {
diff --git a/uui-components/src/table/DataTableCellContainer.tsx b/uui-components/src/table/DataTableCellContainer.tsx
index de49ccd56f..98a51dd34b 100644
--- a/uui-components/src/table/DataTableCellContainer.tsx
+++ b/uui-components/src/table/DataTableCellContainer.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataColumnProps, IClickable, IHasCX, IHasRawProps } from '@epam/uui-core';
+import { DataColumnGroupProps, DataColumnProps, IClickable, IHasCX, IHasRawProps } from '@epam/uui-core';
 import { FlexCell } from '../layout';
 
 import css from './DataTableCellContainer.module.scss';
@@ -15,7 +15,7 @@ export interface DataTableCellContainerProps extends
     /**
      * DataTable column configuration.
      */
-    column: DataColumnProps;
+    column: DataColumnProps | DataColumnGroupProps;
     /**
      * CSS text-align property.
      */
@@ -38,7 +38,7 @@ export const DataTableCellContainer = React.forwardRef<HTMLDivElement, DataTable
     return (
         <FlexCell
             { ...props.column }
-            minWidth={ props.column.width }
+            minWidth={ 'width' in props.column ? props.column.width : undefined }
             rawProps={ props.rawProps }
             cx={ ['uui-dt-vars', css.root, props.column.cx, props.cx] }
             onClick={ props.onClick }
diff --git a/uui-components/src/table/DataTableHeaderRow.tsx b/uui-components/src/table/DataTableHeaderRow.tsx
index d2a11bc7a4..c7a72b2043 100644
--- a/uui-components/src/table/DataTableHeaderRow.tsx
+++ b/uui-components/src/table/DataTableHeaderRow.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {
     DataSourceState, DataColumnProps, DataTableHeaderRowProps, DropdownBodyProps, Lens, DropParams, getOrderBetween, DataTableState,
+    DataColumnGroupProps,
 } from '@epam/uui-core';
 import { DataTableRowContainer } from './DataTableRowContainer';
 import css from './DataTableHeaderRow.module.scss';
@@ -79,14 +80,29 @@ export class DataTableHeaderRow<TItem, TId> extends React.Component<DataTableHea
         });
     };
 
+    renderGroupCell = (group: DataColumnGroupProps, idx: number, firstColumnIdx: number, lastColumnIdx: number) => {
+        const isFirstCell = firstColumnIdx === 0;
+        const isLastCell = lastColumnIdx === this.props.columns.length - 1;
+        return this.props.renderGroupCell({
+            key: `${group.key}-${idx}`,
+            group,
+            isFirstCell,
+            isLastCell,
+            value: this.props.value,
+            onValueChange: this.props.onValueChange,
+        });
+    };
+
     render() {
         return (
             <DataTableRowContainer
                 cx={ [
                     css.root, this.props.cx, uuiDataTableHeaderRow.uuiTableHeaderRow,
                 ] }
+                columnGroups={ this.props.columnGroups }
                 columns={ this.props.columns }
                 renderCell={ this.renderCell }
+                renderGroupCell={ this.renderGroupCell }
                 rawProps={ { role: 'row' } }
                 renderConfigButton={ this.props.onConfigButtonClick && this.props.renderConfigButton }
             />
diff --git a/uui-components/src/table/DataTableRowContainer.module.scss b/uui-components/src/table/DataTableRowContainer.module.scss
index e403dda49b..f9d2f4d8f4 100644
--- a/uui-components/src/table/DataTableRowContainer.module.scss
+++ b/uui-components/src/table/DataTableRowContainer.module.scss
@@ -50,8 +50,7 @@
 
     // Compensate negative padding of cells to overlap borders
     // W/o this, we'll have additional --uui-cell-border-width pixels at the right
-    // We don't have access to the --uui-cell-border-width var. Hard-coded 1px for now.
-    border-inline-end: 1px solid transparent;
+    border-inline-end: var(--uui-dt-cell-border-width) solid transparent;
 }
 
 .fixed-columns-section-right {
@@ -76,3 +75,13 @@
 :global(.uui-scroll-shadow-right) {
     @include scroll-shadow('inset-inline-end');
 }
+
+.groupColumnsWrapper {
+    display: flex;
+    flex-direction: row;
+}
+
+:global(.uui-table-column-group-wrapper) {
+    display: flex;
+    flex-direction: column;
+}
\ No newline at end of file
diff --git a/uui-components/src/table/DataTableRowContainer.tsx b/uui-components/src/table/DataTableRowContainer.tsx
index e1fe8326cb..f1488e002b 100644
--- a/uui-components/src/table/DataTableRowContainer.tsx
+++ b/uui-components/src/table/DataTableRowContainer.tsx
@@ -2,17 +2,23 @@ import React from 'react';
 import {
     DataColumnProps, IClickable, IHasCX, IHasRawProps, uuiMarkers, Link, cx,
     DndEventHandlers,
+    DataColumnGroupProps,
 } from '@epam/uui-core';
 import { FlexRow } from '../layout';
 import { Anchor } from '../navigation';
 import css from './DataTableRowContainer.module.scss';
+import { getGroupsWithColumns, isGroupOfColumns } from './columnsConfigurationModal/columnsGroupsUtils';
 
 export interface DataTableRowContainerProps<TItem, TId, TFilter>
     extends IClickable,
     IHasCX,
     IHasRawProps<React.HTMLAttributes<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>> {
+    /** Columns groups configuration */
+    columnGroups?: DataColumnGroupProps[];
     columns?: DataColumnProps<TItem, TId, TFilter>[];
     renderCell?(column: DataColumnProps<TItem, TId, TFilter>, idx: number, eventHandlers?: DndEventHandlers): React.ReactNode;
+    /** Columns group cell render function. */
+    renderGroupCell?(group: DataColumnGroupProps, idx: number, firstColumnIdx: number, lastColumnIdx: number): React.ReactNode;
     renderConfigButton?(): React.ReactNode;
     overlays?: React.ReactNode;
     link?: Link;
@@ -35,20 +41,43 @@ const uuiDataTableRowCssMarkers = {
 
 const CELL_BORDER_WIDTH = 1;
 
+enum SectionType {
+    Fixed = 1,
+    Scrolling = 2,
+    Group = 3,
+    Table = 4
+}
+
 // Scrolling/Fixed sections wrappers, as well as the whole row itself, has to have matching flex-item parameters.
 // This is required to have the same width, as the sum of column's width, and grow in the same proportion, as columns inside.
 // E.g. for 2 columns: { width: 100, grow: 0 }, { width: 200, grow: 1 } we compute { width: 300, grow: 1 }
 // For scrollingSection and for the whole table, we put at least grow=1 - to make the table occupy full width, even if there's no columns with grow > 0.
-function getSectionStyle(columns: DataColumnProps[], minGrow = 0) {
+function getSectionStyle(columns: DataColumnProps[], type: SectionType) {
     let grow = 0;
     let width = 0;
 
     columns.forEach((column) => {
-        const columnWidth = typeof column.width === 'number' ? (column.fix ? column.width : column.width - CELL_BORDER_WIDTH) : column.minWidth || 0; // (column.width - CELL_BORDER_WIDTH) do not forget the negative margin of the scrolling columns in the calculation of the width
+        let columnWidth;
+        if (typeof column.width === 'number') {
+            // As columns border's are overlap to collapse borders, effective width of each cell is less by CELL_BORDER_WIDTH
+            columnWidth = column.width - CELL_BORDER_WIDTH;
+        } else if (typeof column.minWidth === 'number') {
+            columnWidth = column.minWidth;
+        } else {
+            columnWidth = 0;
+        }
+
         width += columnWidth;
+
         grow += typeof column.grow === 'number' ? column.grow : 0;
     });
 
+    // For fixed sections we keep 1 border width for a transparent border on the edge, so borders on scrolling section can be visible through it
+    if (width > 0 && type === SectionType.Fixed) {
+        width += CELL_BORDER_WIDTH;
+    }
+
+    const minGrow = type === SectionType.Scrolling ? 1 : 0;
     grow = Math.max(grow, minGrow);
 
     return {
@@ -61,18 +90,46 @@ function getSectionStyle(columns: DataColumnProps[], minGrow = 0) {
 export const DataTableRowContainer = React.forwardRef(
     <TItem, TId, TFilter>(props: DataTableRowContainerProps<TItem, TId, TFilter>, ref: React.ForwardedRef<HTMLDivElement>) => {
         const { onPointerDown, onTouchStart, ...restRawProps } = props.rawProps ?? {};
+
         function renderCells(columns: DataColumnProps<TItem, TId, TFilter>[]) {
-            return columns.reduce<React.ReactNode[]>((cells, column) => {
-                const idx = props.columns?.indexOf(column) || 0;
-                cells.push(props.renderCell(column, idx, { onPointerDown, onTouchStart }));
-                return cells;
-            }, []);
+            if (!props.columnGroups) {
+                return columns.map((column) => {
+                    const idx = props.columns?.indexOf(column) || 0;
+                    return props.renderCell(column, idx, { onPointerDown, onTouchStart });
+                });
+            }
+
+            const columnsWithGroups = getGroupsWithColumns(props.columnGroups, columns);
+            return columnsWithGroups.map((item, index) => {
+                if (isGroupOfColumns(item)) {
+                    const firstColumnIdx = props.columns?.indexOf(item.columns[0]) || 0;
+                    const lastColumnIdx = props.columns?.indexOf(item.columns[item.columns.length - 1]) || 0;
+
+                    return (
+                        <div style={ getSectionStyle(item.columns, SectionType.Group) } className={ cx(css.section, 'uui-table-column-group-wrapper') }>
+
+                            {props.renderGroupCell(item.group, index, firstColumnIdx, lastColumnIdx)}
+                            <div className={ css.groupColumnsWrapper }>
+                                {
+                                    item.columns.map((column) => {
+                                        const idx = props.columns?.indexOf(column) || 0;
+                                        return props.renderCell(column, idx, { onPointerDown, onTouchStart });
+                                    })
+                                }
+                            </div>
+                        </div>
+                    );
+                }
+
+                const idx = props.columns?.indexOf(item) || 0;
+                return props.renderCell(item, idx, { onPointerDown, onTouchStart });
+            });
         }
 
         function wrapFixedSection(columns: DataColumnProps<TItem, TId, TFilter>[], direction: 'left' | 'right', hasScrollingSection: boolean) {
             return (
                 <div
-                    style={ getSectionStyle(columns) }
+                    style={ getSectionStyle(columns, SectionType.Fixed) }
                     className={ cx({
                         [css.section]: true,
                         [uuiDataTableRowCssMarkers.uuiTableFixedSection]: true,
@@ -92,7 +149,10 @@ export const DataTableRowContainer = React.forwardRef(
 
         function wrapScrollingSection(columns: DataColumnProps<TItem, TId, TFilter>[]) {
             return (
-                <div className={ cx(css.section, css.scrollingSection, uuiDataTableRowCssMarkers.uuiTableScrollingSection) } style={ getSectionStyle(columns, 1) }>
+                <div
+                    className={ cx(css.section, css.scrollingSection, uuiDataTableRowCssMarkers.uuiTableScrollingSection) }
+                    style={ getSectionStyle(columns, SectionType.Scrolling) }
+                >
                     {renderCells(columns)}
                 </div>
             );
@@ -122,7 +182,7 @@ export const DataTableRowContainer = React.forwardRef(
         }
 
         // We use only total minWidth here, grow is not needed (rows are placed in block or vertical flex contexts)
-        const minWidth = getSectionStyle(props.columns, 1).minWidth;
+        const minWidth = getSectionStyle(props.columns, SectionType.Table).minWidth;
 
         const rawProps = {
             ...restRawProps,
diff --git a/uui-components/src/table/columnsConfigurationModal/columnsGroupsUtils.ts b/uui-components/src/table/columnsConfigurationModal/columnsGroupsUtils.ts
new file mode 100644
index 0000000000..4ce1a4186e
--- /dev/null
+++ b/uui-components/src/table/columnsConfigurationModal/columnsGroupsUtils.ts
@@ -0,0 +1,49 @@
+import { DataColumnGroupProps, DataColumnProps } from '@epam/uui-core';
+
+interface GroupOfColumns<TItem, TId> {
+    type: 'group';
+    group: DataColumnGroupProps;
+    columns: DataColumnProps<TItem, TId>[];
+}
+
+const getGroupsByKey = (groups: DataColumnGroupProps[]) => {
+    if (!groups) {
+        return null;
+    }
+    const gRec = groups.reduce<Record<string, DataColumnGroupProps>>(
+        (g, group) => ({ ...g, [group.key]: group }),
+        {},
+    );
+    return !Object.keys(gRec).length ? null : gRec;
+};
+
+export const isGroupOfColumns = <TItem, TId>(
+    item: GroupOfColumns<TItem, TId> | DataColumnProps<TItem, TId>,
+): item is GroupOfColumns<TItem, TId> => 'type' in item && item.type === 'group';
+
+export const getGroupsWithColumns = <TItem, TId>(columnGroups: DataColumnGroupProps[], columns: DataColumnProps<TItem, TId>[]) => {
+    const columnGroupsByKey = getGroupsByKey(columnGroups);
+    if (!columnGroupsByKey) {
+        return columns;
+    }
+
+    return columns.reduce<Array<GroupOfColumns<TItem, TId> | DataColumnProps<TItem, TId>>>((columnsAndGroups, column) => {
+        if (column.group) {
+            const group = columnGroupsByKey[column.group];
+            if (!group) {
+                throw new Error(`The '${column.group}' group mentioned in the '${column.key}' column is undefined.`);
+            }
+            const lastItem = columnsAndGroups[columnsAndGroups.length - 1];
+            if (lastItem && isGroupOfColumns(lastItem) && lastItem.group.key === column.group) {
+                lastItem.columns.push(column);
+                return columnsAndGroups;
+            }
+
+            columnsAndGroups.push({ type: 'group', group: columnGroupsByKey[column.group], columns: [column] });
+            return columnsAndGroups;
+        }
+
+        columnsAndGroups.push(column);
+        return columnsAndGroups;
+    }, []);
+};
diff --git a/uui-components/src/widgets/Svg.tsx b/uui-components/src/widgets/Svg.tsx
index 1fdc2301fe..53fedbbdad 100644
--- a/uui-components/src/widgets/Svg.tsx
+++ b/uui-components/src/widgets/Svg.tsx
@@ -6,7 +6,7 @@ import {
 
 interface ISvgProps {
     className: string;
-    fill: string;
+    fill?: string;
     height?: number | string;
     width?: number | string;
 }
@@ -27,10 +27,10 @@ export const Svg = React.forwardRef<SVGSVGElement, SvgProps>((props, ref) => {
 
     const svgProps: ISvgProps = {
         className: cx(props.cx),
-        fill: fillColor,
         ...props.rawProps,
     };
 
+    if (fillColor !== undefined) svgProps.fill = fillColor;
     if (height !== undefined) svgProps.height = height;
     if (width !== undefined) svgProps.width = width;
 
diff --git a/uui-core/package.json b/uui-core/package.json
index c435bedb8c..e40c28dbaf 100644
--- a/uui-core/package.json
+++ b/uui-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epam/uui-core",
-  "version": "5.11.1-alpha.0",
+  "version": "5.11.1-rc.0",
   "description": "EPAM UUI Core",
   "author": "EPAM",
   "license": "MIT",
@@ -24,7 +24,6 @@
     "react-popper": "2.3.0"
   },
   "peerDependencies": {
-    "prop-types": "*",
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0"
   },
diff --git a/uui-core/src/constants/selectors.ts b/uui-core/src/constants/selectors.ts
index 23385f347f..4343066f83 100644
--- a/uui-core/src/constants/selectors.ts
+++ b/uui-core/src/constants/selectors.ts
@@ -82,6 +82,13 @@ export const uuiDataTableHeaderCell = {
     uuiTableHeaderFoldAllIcon: 'uui-table-header-fold-all-icon',
 } as const;
 
+export const uuiDataTableHeaderGroupCell = {
+    uuiTableHeaderGroupCell: 'uui-table-header-group-cell',
+    uuiTableHeaderGroupCaption: 'uui-table-header-group-caption',
+    uuiTableHeaderGroupCaptionWrapper: 'uui-table-header-group-caption-wrapper',
+    uuiTableHeaderGroupCaptionTooltip: 'uui-table-header-group-caption-tooltip',
+} as const;
+
 export const uuiScrollShadows = {
     top: 'uui-scroll-shadow-top',
     topVisible: 'uui-scroll-shadow-top-visible',
diff --git a/uui-core/src/services/ErrorContext.ts b/uui-core/src/services/ErrorContext.ts
index 9a6b708a5f..c2310797d7 100644
--- a/uui-core/src/services/ErrorContext.ts
+++ b/uui-core/src/services/ErrorContext.ts
@@ -43,6 +43,8 @@ export interface ErrorPageInfo {
     imageUrl?: string;
     /** Url of error image to display on error page in case of mobile layout (app width < 720px) */
     mobileImageUrl?: string;
+    /** Additional message with link to the support portal */
+    supportLink?: React.ReactNode;
 }
 
 export class UuiError extends Error {
diff --git a/uui-core/src/types/contexts.ts b/uui-core/src/types/contexts.ts
index 3bbbf1c95b..a11fe63d03 100644
--- a/uui-core/src/types/contexts.ts
+++ b/uui-core/src/types/contexts.ts
@@ -1,5 +1,4 @@
 import { AnalyticsEvent, Link } from './objects';
-import * as PropTypes from 'prop-types';
 import { IModal, INotification } from './props';
 import { DndContextState, TMouseCoords } from '../services/dnd/DndContext';
 import { Lock } from '../services/LockContext';
@@ -293,20 +292,3 @@ export interface CommonContexts<TApi, TAppContext> extends UuiContexts {
     /** React router history instance */
     history?: IHistory4;
 }
-
-export const uuiContextTypes = {
-    uuiAnalytics: PropTypes.object,
-    uuiErrors: PropTypes.object,
-    uuiApi: PropTypes.object,
-    uuiModals: PropTypes.object,
-    uuiNotifications: PropTypes.object,
-    api: PropTypes.object,
-    uuiUserSettings: PropTypes.object,
-    uuiDnD: PropTypes.object,
-    uuiApp: PropTypes.object,
-    uuiRouter: PropTypes.object,
-    uuiLayout: PropTypes.object,
-    uuiLocks: PropTypes.object,
-    history: PropTypes.object,
-    uuiSkin: PropTypes.object,
-};
diff --git a/uui-core/src/types/tables.ts b/uui-core/src/types/tables.ts
index a26cc490f2..7253c54a56 100644
--- a/uui-core/src/types/tables.ts
+++ b/uui-core/src/types/tables.ts
@@ -31,6 +31,41 @@ export type ICanBeFixed = {
     fix?: 'left' | 'right';
 };
 
+/**
+ * Columns group configuration.
+ */
+export interface DataColumnGroupProps extends IHasCX, IClickable {
+    /**
+     * Unique key to identify the columns group. Used to reference columns group.
+     */
+    key: string;
+
+    /** Columns group caption. Can be a plain text, or any React Component */
+    caption?: React.ReactNode;
+
+    /** Aligns columns group header content horizontally */
+    textAlign?: 'left' | 'center' | 'right';
+
+    /** Info tooltip displayed in the table header */
+    info?: React.ReactNode;
+
+    /** Overrides rendering of the whole columns group cell */
+    renderCell?(column: DataColumnGroupProps): any;
+
+    /** Render callback for columns group header tooltip.
+     * This tooltip will appear on cell hover with 600ms delay.
+     *
+     * If omitted, default implementation with columnGroup.caption + columnGroup.info will be rendered.
+     * Pass `() => null` to disable tooltip rendering.
+     */
+    renderTooltip?(column: DataColumnGroupProps): React.ReactNode;
+
+    /**
+     * Overrides rendering of the whole columns group header cell.
+     */
+    renderHeaderCell?(cellProps: DataTableHeaderGroupCellProps): any;
+}
+
 export interface DataColumnProps<TItem = any, TId = any, TFilter = any> extends ICanBeFixed, IHasCX, IClickable, IHasRawProps<HTMLDivElement>, Attributes {
     /**
      * Unique key to identify the column. Used to reference columns, e.g. in ColumnsConfig.
@@ -38,6 +73,11 @@ export interface DataColumnProps<TItem = any, TId = any, TFilter = any> extends
      */
     key: string;
 
+    /**
+     * A unique identifier for a group of columns that establishes a connection between the column and the group of columns.
+     */
+    group?: string;
+
     /** Column caption. Can be a plain text, or any React Component */
     caption?: React.ReactNode;
 
@@ -159,6 +199,29 @@ export interface DataTableHeaderCellProps<TItem = any, TId = any> extends IEdita
     renderFilter?: (dropdownProps: IDropdownBodyProps) => React.ReactNode;
 }
 
+/**
+ * DataTable columns group header cell props.
+ */
+export interface DataTableHeaderGroupCellProps extends IHasCX, IEditable<DataTableState> {
+    /**
+     * A unique identifier for a group.
+     */
+    key: string;
+    /**
+     * Columns group configuration.
+     */
+    group: DataColumnGroupProps;
+    /**
+     * Defines if first column of the group is the first one in the table header.
+     */
+    isFirstCell: boolean;
+
+    /**
+     * Defines if last column of the group is the last one in the table header.
+     */
+    isLastCell: boolean;
+}
+
 export type DataTableConfigModalParams = IEditable<DataSourceState> & {
     /** Array of all table columns */
     columns: DataColumnProps[];
@@ -166,6 +229,10 @@ export type DataTableConfigModalParams = IEditable<DataSourceState> & {
 
 export interface DataTableHeaderRowProps<TItem = any, TId = any> extends IEditable<DataTableState>, IHasCX, DataTableColumnsConfigOptions {
     columns: DataColumnProps<TItem, TId>[];
+    /**
+     * Columns group configuration.
+     */
+    columnGroups?: DataColumnGroupProps[];
     selectAll?: ICheckable;
     /**
      * Enables collapse/expand all functionality.
@@ -173,6 +240,10 @@ export interface DataTableHeaderRowProps<TItem = any, TId = any> extends IEditab
     showFoldAll?: boolean;
     onConfigButtonClick?: (params: DataTableConfigModalParams) => any;
     renderCell?: (props: DataTableHeaderCellProps<TItem, TId>) => React.ReactNode;
+    /**
+     * Columns group cell render function.
+     */
+    renderGroupCell?: (props: DataTableHeaderGroupCellProps) => React.ReactNode;
     renderConfigButton?: () => React.ReactNode;
 }
 
diff --git a/uui-db/package.json b/uui-db/package.json
index e40cddf2dc..d36e33ddf2 100644
--- a/uui-db/package.json
+++ b/uui-db/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epam/uui-db",
-  "version": "5.11.1-alpha.0",
+  "version": "5.11.1-rc.0",
   "description": "UUI - client-side relational state cache",
   "author": "EPAM",
   "license": "MIT",
@@ -14,7 +14,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@epam/uui-core": "5.11.1-alpha.0",
+    "@epam/uui-core": "5.11.1-rc.0",
     "@types/lodash.countby": "4.6.6",
     "@types/lodash.filter": "4.6.6",
     "@types/lodash.foreach": "4.5.6",
@@ -47,7 +47,6 @@
     "ts-node": "10.9.1"
   },
   "peerDependencies": {
-    "prop-types": "*",
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0"
   },
diff --git a/uui-docs/package.json b/uui-docs/package.json
index 79dec65acd..599d34d721 100644
--- a/uui-docs/package.json
+++ b/uui-docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epam/uui-docs",
-  "version": "5.11.1-alpha.0",
+  "version": "5.11.1-rc.0",
   "description": "EPAM UUI Documentation infrastructure",
   "author": "EPAM",
   "license": "MIT",
@@ -12,16 +12,15 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@epam/assets": "5.11.1-alpha.0",
-    "@epam/promo": "5.11.1-alpha.0",
-    "@epam/uui": "5.11.1-alpha.0",
-    "@epam/uui-components": "5.11.1-alpha.0",
-    "@epam/uui-core": "5.11.1-alpha.0",
+    "@epam/assets": "5.11.1-rc.0",
+    "@epam/promo": "5.11.1-rc.0",
+    "@epam/uui": "5.11.1-rc.0",
+    "@epam/uui-components": "5.11.1-rc.0",
+    "@epam/uui-core": "5.11.1-rc.0",
     "@types/classnames": "2.2.6",
     "classnames": "^2.2.6"
   },
   "peerDependencies": {
-    "prop-types": "*",
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0"
   },
diff --git a/uui-docs/src/demoData/slateInitialValue.ts b/uui-docs/src/demoData/slateInitialValue.ts
index a7101d8206..f58f77ca4b 100644
--- a/uui-docs/src/demoData/slateInitialValue.ts
+++ b/uui-docs/src/demoData/slateInitialValue.ts
@@ -1,434 +1,354 @@
-export const slateInitialValue = {
-    object: 'value',
-    document: {
-        object: 'document',
+export const slateInitialValue = [
+    {
+        type: 'uui-richTextEditor-header-1',
         data: {},
-        nodes: [
+        children: [
             {
-                object: 'block',
-                type: 'uui-richTextEditor-header-1',
+                text: 'Rich Text Editor',
+                'uui-richTextEditor-span-mark': true,
+            },
+        ],
+    },
+    {
+        type: 'uui-richTextEditor-header-2',
+        data: {},
+        children: [
+            {
+                text: 'Introduction',
+                'uui-richTextEditor-span-mark': true,
+            },
+        ],
+    },
+    {
+        type: 'paragraph',
+        data: {},
+        children: [
+            {
+                text: 'The ',
+            },
+            {
+                text: '@epam/uui-editor',
+                'uui-richTextEditor-span-mark': true,
+                'uui-richTextEditor-code': true,
+            },
+            {
+                'uui-richTextEditor-span-mark': true,
+                text: ' package contains a full-featured Rich Text Editor, based on open-source ',
+            },
+            {
+                type: 'link',
                 data: {},
-                nodes: [
+                url: 'https://www.slatejs.org/',
+                children: [
                     {
-                        object: 'text',
-                        text: 'Rich Text Editor',
-                        marks: [
-                            {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
-                            },
-                        ],
+                        text: 'slate.js',
+                        'uui-richTextEditor-span-mark': true,
                     },
                 ],
-            }, {
-                object: 'block',
-                type: 'uui-richTextEditor-header-3',
+            },
+            {
+                text: " library. Slate.JS is a framework to build editors, and it's highly configurable with plugins. In UUI, we picked and tuned dozen of plugins, build several plugins ourselves, added common styles and UX on top of it. One can pick from our default set of plugins, or even introduce new, app-specific plugins, on top.",
+                'uui-richTextEditor-span-mark': true,
+            },
+        ],
+    },
+    {
+        type: 'paragraph',
+        data: {},
+        children: [
+            {
+                text: 'Unlikely to most Rich-Text editors, Slate uses JSON data model instead of HTML, which allows it to embed any entities, like arbitrary React components. For example, this checkbox, is a custom react component (check ',
+                'uui-richTextEditor-span-mark': true,
+            },
+            {
+                type: 'link',
                 data: {},
-                nodes: [
+                url: 'https://github.com/epam/UUI/blob/main/uui-editor/src/plugins/toDoListPlugin/ToDoItem.tsx',
+                children: [
                     {
-                        object: 'text',
-                        text: 'Introduction',
-                        marks: [
-                            {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
-                            },
-                        ],
+                        text: 'source here',
+                        'uui-richTextEditor-span-mark': true,
                     },
                 ],
-            }, {
-                object: 'block',
-                type: 'paragraph',
+            },
+            {
+                text: '):',
+                'uui-richTextEditor-span-mark': true,
+            },
+        ],
+    },
+    {
+        type: 'toDoItem',
+        data: {
+            checked: false,
+        },
+        children: [
+            {
+                text: ' An item',
+                'uui-richTextEditor-span-mark': true,
+            },
+        ],
+    },
+    {
+        type: 'paragraph',
+        data: {
+            checked: false,
+        },
+        children: [
+            {
+                text: 'We include HTML to Slate JSON converter, which is also used to convert pasted HTML.',
+                'uui-richTextEditor-span-mark': true,
+            },
+        ],
+    },
+    {
+        type: 'uui-richTextEditor-header-2',
+        data: {
+            checked: false,
+        },
+        children: [
+            {
+                text: 'Out of the box components',
+                'uui-richTextEditor-span-mark': true,
+            },
+        ],
+    },
+    {
+        type: 'uui-richTextEditor-header-3',
+        data: {},
+        children: [
+            {
+                text: 'Basic layout',
+                'uui-richTextEditor-span-mark': true,
+            },
+        ],
+    },
+    {
+        type: 'paragraph',
+        data: {
+            checked: false,
+        },
+        children: [
+            {
+                text: 'We support inline text styles: ',
+                'uui-richTextEditor-span-mark': true,
+            },
+            {
+                text: 'bold',
+                'uui-richTextEditor-span-mark': true,
+                'uui-richTextEditor-bold': true,
+            },
+            {
+                text: ', ',
+                'uui-richTextEditor-span-mark': true,
+            },
+            {
+                text: 'italic',
+                'uui-richTextEditor-span-mark': true,
+                'uui-richTextEditor-italic': true,
+            },
+            {
+                text: ', ',
+                'uui-richTextEditor-span-mark': true,
+            },
+            {
+                text: 'underlined,',
+                'uui-richTextEditor-span-mark': true,
+                'uui-richTextEditor-underlined': true,
+            },
+            {
+                text: ' align with several UUI-friendly text colors: ',
+                'uui-richTextEditor-span-mark': true,
+            },
+            {
+                text: 'red',
+                'uui-richTextEditor-span-mark': true,
+                color: 'var(--uui-text-critical)',
+            },
+            {
+                text: ', ',
+                'uui-richTextEditor-span-mark': true,
+            },
+            {
+                text: 'yellow',
+                'uui-richTextEditor-span-mark': true,
+                color: 'var(--uui-text-warning)',
+            },
+            {
+                text: ', and ',
+                'uui-richTextEditor-span-mark': true,
+            },
+            {
+                text: 'green',
+                'uui-richTextEditor-span-mark': true,
+                color: 'var(--uui-text-success)',
+            },
+            {
+                color: '#9BC837',
+                'uui-richTextEditor-span-mark': true,
+                text: '.',
+            },
+        ],
+    },
+    {
+        type: 'uui-richTextEditor-header-3',
+        data: {
+            checked: false,
+        },
+        children: [
+            {
+                text: 'Numbered lists',
+                'uui-richTextEditor-span-mark': true,
+                'uui-richTextEditor-bold': true,
+            },
+        ],
+    },
+    {
+        type: 'ordered-list',
+        data: {},
+        children: [
+            {
+                type: 'list-item',
                 data: {},
-                nodes: [
+                children: [
                     {
-                        object: 'text',
-                        text: '@epam/uui-editor package contains a full-featured Rich Text Editor, based on open-source ',
-                        marks: [
-                            {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
-                            },
-                        ],
-                    }, {
-                        object: 'inline',
-                        type: 'link',
+                        type: 'list-item-child',
                         data: {
-                            url: 'https://www.slatejs.org/',
+                            checked: false,
                         },
-                        nodes: [
+                        children: [
                             {
-                                object: 'text',
-                                text: 'slate.js',
-                                marks: [
-                                    {
-                                        object: 'mark',
-                                        type: 'uui-richTextEditor-span-mark',
-                                        data: {},
-                                    },
-                                ],
+                                text: 'In edit mode, ',
+                                'uui-richTextEditor-span-mark': true,
                             },
-                        ],
-                    }, {
-                        object: 'text',
-                        text: " library. Slate.JS is a framework to build editors, and it's highly configurable with plugins. In UUI, we picked and tuned dozen of plugins, build several plugins ourselves, added common styles and UX on top of it. One can pick from our default set of plugins, or even introduce new, app-specific plugins, on top.",
-                        marks: [
                             {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
+                                text: "typing '1.' automatically starts a numbered list.",
                             },
                         ],
                     },
                 ],
-            }, {
-                object: 'block',
-                type: 'paragraph',
+            },
+            {
+                type: 'list-item',
                 data: {},
-                nodes: [
+                children: [
                     {
-                        object: 'text',
-                        text: 'Unlikely to most Rich-Text editors, Slate uses JSON data model instead of HTML, which allows it to embed any entities, like arbitrary React components. For example, this checkbox, is a custom react component (check ',
-                        marks: [
-                            {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
-                            },
-                        ],
-                    }, {
-                        object: 'inline',
-                        type: 'link',
+                        type: 'list-item-child',
                         data: {
-                            url: 'https://github.com/epam/UUI/blob/main/uui-editor/src/plugins/toDoListPlugin/ToDoItem.tsx',
+                            checked: false,
                         },
-                        nodes: [
-                            {
-                                object: 'text',
-                                text: 'source here',
-                                marks: [
-                                    {
-                                        object: 'mark',
-                                        type: 'uui-richTextEditor-span-mark',
-                                        data: {},
-                                    },
-                                ],
-                            },
-                        ],
-                    }, {
-                        object: 'text',
-                        text: '):',
-                        marks: [
+                        children: [
                             {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
-                            },
-                        ],
-                    },
-                ],
-            }, {
-                object: 'block',
-                type: 'toDoItem',
-                data: {
-                    checked: false,
-                },
-                nodes: [
-                    {
-                        object: 'text',
-                        text: ' An item',
-                        marks: [
-                            {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
+                                text: "You can use 'Tab' / 'Shift+Tab' to ",
+                                'uui-richTextEditor-span-mark': true,
                             },
-                        ],
-                    },
-                ],
-            }, {
-                object: 'block',
-                type: 'paragraph',
-                data: {
-                    checked: false,
-                },
-                nodes: [
-                    {
-                        object: 'text',
-                        text: 'We include HTML to Slate JSON converter, which is also used to convert pasted HTML.',
-                        marks: [
                             {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
+                                text: "adjust the list's indentation level.",
                             },
                         ],
                     },
                 ],
-            }, {
-                object: 'block',
-                type: 'uui-richTextEditor-header-2',
-                data: {
-                    checked: false,
-                },
-                nodes: [
+            },
+        ],
+    },
+    {
+        type: 'uui-richTextEditor-header-3',
+        data: {
+            checked: false,
+        },
+        children: [
+            {
+                text: 'Bullet lists',
+                'uui-richTextEditor-span-mark': true,
+                'uui-richTextEditor-bold': true,
+            },
+        ],
+    },
+    {
+        type: 'unordered-list',
+        data: {},
+        children: [
+            {
+                type: 'list-item',
+                data: {},
+                children: [
                     {
-                        object: 'text',
-                        text: 'Out of the box components',
-                        marks: [
+                        type: 'list-item-child',
+                        data: {
+                            checked: false,
+                        },
+                        children: [
                             {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
+                                text: "Type '- ' ",
+                                'uui-richTextEditor-span-mark': true,
                             },
-                        ],
-                    },
-                ],
-            }, {
-                object: 'block',
-                type: 'uui-richTextEditor-header-3',
-                data: {
-                    checked: false,
-                },
-                nodes: [
-                    {
-                        object: 'text',
-                        text: 'Basic layout',
-                        marks: [
                             {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
+                                text: 'to start a bullet list.',
                             },
                         ],
                     },
                 ],
-            }, {
-                object: 'block',
-                type: 'paragraph',
-                data: {
-                    checked: false,
-                },
-                nodes: [
+            },
+            {
+                type: 'list-item',
+                data: {},
+                children: [
                     {
-                        object: 'text',
-                        text: 'We support inline text styles: ',
-                        marks: [
-                            {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
-                            },
-                        ],
-                    }, {
-                        object: 'text',
-                        text: 'bold',
-                        marks: [
-                            {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
-                            }, {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-bold',
-                                data: {},
-                            },
-                        ],
-                    }, {
-                        object: 'text',
-                        text: ', ',
-                        marks: [
-                            {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
-                            },
-                        ],
-                    }, {
-                        object: 'text',
-                        text: 'italic',
-                        marks: [
-                            {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
-                            }, {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-italic',
-                                data: {},
-                            },
-                        ],
-                    }, {
-                        object: 'text',
-                        text: ', ',
-                        marks: [
-                            {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
-                            },
-                        ],
-                    }, {
-                        object: 'text',
-                        text: 'underlined,',
-                        marks: [
-                            {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
-                            }, {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-underlined',
-                                data: {},
-                            },
-                        ],
-                    }, {
-                        object: 'text',
-                        text: ' several UUI-friendly text colors: ',
-                        marks: [
-                            {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
-                            },
-                        ],
-                    }, {
-                        object: 'text',
-                        text: 'red',
-                        marks: [
-                            {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {
-                                    style: {
-                                        color: '#FF4E33',
-                                    },
-                                },
-                            },
-                        ],
-                    }, {
-                        object: 'text',
-                        text: ', ',
-                        marks: [
-                            {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
-                            },
-                        ],
-                    }, {
-                        object: 'text',
-                        text: 'yellow',
-                        marks: [
-                            {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {
-                                    style: {
-                                        color: '#FFA21D',
-                                    },
-                                },
-                            },
-                        ],
-                    }, {
-                        object: 'text',
-                        text: ', and ',
-                        marks: [
-                            {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
-                            },
-                        ],
-                    }, {
-                        object: 'text',
-                        text: 'green.',
-                        marks: [
+                        type: 'list-item-child',
+                        data: {
+                            checked: false,
+                        },
+                        children: [
                             {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {
-                                    style: {
-                                        color: '#9BC837',
-                                    },
-                                },
+                                text: 'Create multi-level lists using',
                             },
-                        ],
-                    },
-                ],
-            }, {
-                object: 'block',
-                type: 'paragraph',
-                data: {
-                    checked: false,
-                },
-                nodes: [
-                    {
-                        object: 'text',
-                        text: 'Numbered lists:',
-                        marks: [
                             {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
+                                text: " 'Tab' / 'Shift+Tab'. Example:",
+                                'uui-richTextEditor-span-mark': true,
                             },
                         ],
                     },
-                ],
-            }, {
-                object: 'block',
-                type: 'ordered-list',
-                data: {},
-                nodes: [
                     {
-                        object: 'block',
-                        type: 'list-item',
+                        type: 'unordered-list',
                         data: {},
-                        nodes: [
+                        children: [
                             {
-                                object: 'block',
-                                type: 'list-item-child',
-                                data: {
-                                    checked: false,
-                                },
-                                nodes: [
+                                type: 'list-item',
+                                data: {},
+                                children: [
                                     {
-                                        object: 'text',
-                                        text: "In edit mode, we detect  '1.' and start list automatically",
-                                        marks: [
+                                        type: 'list-item-child',
+                                        data: {
+                                            checked: false,
+                                        },
+                                        children: [
                                             {
-                                                object: 'mark',
-                                                type: 'uui-richTextEditor-span-mark',
-                                                data: {},
+                                                text: 'Level 2',
+                                                'uui-richTextEditor-span-mark': true,
                                             },
                                         ],
                                     },
-                                ],
-                            },
-                        ],
-                    }, {
-                        object: 'block',
-                        type: 'list-item',
-                        data: {},
-                        nodes: [
-                            {
-                                object: 'block',
-                                type: 'list-item-child',
-                                data: {
-                                    checked: false,
-                                },
-                                nodes: [
                                     {
-                                        object: 'text',
-                                        text: "You can use 'tab' / 'shift/tab' to indent the list",
-                                        marks: [
+                                        type: 'unordered-list',
+                                        data: {},
+                                        children: [
                                             {
-                                                object: 'mark',
-                                                type: 'uui-richTextEditor-span-mark',
+                                                type: 'list-item',
                                                 data: {},
+                                                children: [
+                                                    {
+                                                        type: 'list-item-child',
+                                                        data: {
+                                                            checked: false,
+                                                        },
+                                                        children: [
+                                                            {
+                                                                text: 'Level 3',
+                                                                'uui-richTextEditor-span-mark': true,
+                                                            },
+                                                        ],
+                                                    },
+                                                ],
                                             },
                                         ],
                                     },
@@ -437,917 +357,745 @@ export const slateInitialValue = {
                         ],
                     },
                 ],
-            }, {
-                object: 'block',
-                type: 'paragraph',
-                data: {
-                    checked: false,
-                },
-                nodes: [
+            },
+        ],
+    },
+    {
+        type: 'h5',
+        children: [
+            {
+                text: 'Headers and Links',
+                'uui-richTextEditor-bold': true,
+            },
+        ],
+    },
+    {
+        type: 'paragraph',
+        children: [
+            {
+                text: 'We also support three levels of headers, ',
+            },
+            {
+                type: 'link',
+                url: 'https://uui.epam.com/',
+                target: '_blank',
+                children: [
                     {
-                        object: 'text',
-                        text: 'Bullet lists:',
-                        marks: [
-                            {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
-                            },
-                        ],
+                        text: 'hyperlinks',
                     },
                 ],
-            }, {
-                object: 'block',
-                type: 'unordered-list',
-                data: {},
-                nodes: [
-                    {
-                        object: 'block',
-                        type: 'list-item',
-                        data: {},
-                        nodes: [
-                            {
-                                object: 'block',
-                                type: 'list-item-child',
-                                data: {
-                                    checked: false,
-                                },
-                                nodes: [
-                                    {
-                                        object: 'text',
-                                        text: "Type '- ' to start the list",
-                                        marks: [
-                                            {
-                                                object: 'mark',
-                                                type: 'uui-richTextEditor-span-mark',
-                                                data: {},
-                                            },
-                                        ],
-                                    },
-                                ],
+            },
+            {
+                text: ', ',
+            },
+            {
+                text: 'superscript',
+                'uui-richTextEditor-superscript': true,
+            },
+            {
+                text: ', and more.',
+            },
+        ],
+    },
+    {
+        type: 'uui-richTextEditor-header-2',
+        data: {
+            checked: false,
+        },
+        children: [
+            {
+                text: 'Embedded content',
+                'uui-richTextEditor-span-mark': true,
+            },
+        ],
+    },
+    {
+        type: 'paragraph',
+        data: {
+            checked: false,
+        },
+        children: [
+            {
+                text: 'You can embed various types of content into the editor:',
+            },
+        ],
+    },
+    {
+        type: 'uui-richTextEditor-header-3',
+        data: {
+            checked: false,
+        },
+        children: [
+            {
+                text: 'Images',
+                'uui-richTextEditor-bold': true,
+            },
+        ],
+    },
+    {
+        type: 'unordered-list',
+        children: [
+            {
+                type: 'list-item',
+                children: [
+                    {
+                        type: 'list-item-child',
+                        children: [
+                            {
+                                text: 'Embed images via the ',
                             },
-                        ],
-                    }, {
-                        object: 'block',
-                        type: 'list-item',
-                        data: {},
-                        nodes: [
                             {
-                                object: 'block',
-                                type: 'list-item-child',
-                                data: {
-                                    checked: false,
-                                },
-                                nodes: [
-                                    {
-                                        object: 'text',
-                                        text: "You can create multi-level lists with 'tab' / 'shift+tab'. Example:",
-                                        marks: [
-                                            {
-                                                object: 'mark',
-                                                type: 'uui-richTextEditor-span-mark',
-                                                data: {},
-                                            },
-                                        ],
-                                    },
-                                ],
-                            }, {
-                                object: 'block',
-                                type: 'unordered-list',
-                                data: {},
-                                nodes: [
-                                    {
-                                        object: 'block',
-                                        type: 'list-item',
-                                        data: {},
-                                        nodes: [
-                                            {
-                                                object: 'block',
-                                                type: 'list-item-child',
-                                                data: {
-                                                    checked: false,
-                                                },
-                                                nodes: [
-                                                    {
-                                                        object: 'text',
-                                                        text: 'Level 2',
-                                                        marks: [
-                                                            {
-                                                                object: 'mark',
-                                                                type: 'uui-richTextEditor-span-mark',
-                                                                data: {},
-                                                            },
-                                                        ],
-                                                    },
-                                                ],
-                                            }, {
-                                                object: 'block',
-                                                type: 'unordered-list',
-                                                data: {},
-                                                nodes: [
-                                                    {
-                                                        object: 'block',
-                                                        type: 'list-item',
-                                                        data: {},
-                                                        nodes: [
-                                                            {
-                                                                object: 'block',
-                                                                type: 'list-item-child',
-                                                                data: {
-                                                                    checked: false,
-                                                                },
-                                                                nodes: [
-                                                                    {
-                                                                        object: 'text',
-                                                                        text: 'Level 3',
-                                                                        marks: [
-                                                                            {
-                                                                                object: 'mark',
-                                                                                type: 'uui-richTextEditor-span-mark',
-                                                                                data: {},
-                                                                            },
-                                                                        ],
-                                                                    },
-                                                                ],
-                                                            },
-                                                        ],
-                                                    },
-                                                ],
-                                            },
-                                        ],
-                                    },
-                                ],
+                                text: '"Add Image"',
+                                'uui-richTextEditor-bold': true,
+                            },
+                            {
+                                text: ' icon, drag-and-drop from your computer, or insert a direct internet address link.',
                             },
                         ],
                     },
                 ],
-            }, {
-                object: 'block',
-                type: 'paragraph',
-                data: {
-                    checked: false,
-                },
-                nodes: [
+            },
+            {
+                type: 'list-item',
+                children: [
                     {
-                        object: 'text',
-                        text: "There's also support 3 levels of headers, hyperlinks, superscript, and more.",
-                        marks: [
+                        type: 'list-item-child',
+                        children: [
                             {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
-                                data: {},
+                                text: 'Images support alignment and resizing.',
                             },
                         ],
                     },
                 ],
-            }, {
-                object: 'block',
-                type: 'uui-richTextEditor-header-3',
-                data: {
-                    checked: false,
-                },
-                nodes: [
+            },
+        ],
+    },
+    {
+        type: 'image',
+        data: {
+            size: 77236,
+            path: '/static/uploads/blue-orange.jpg',
+            fileName: 'blue-orange.jpg',
+            name: 'blue-orange.jpg',
+            type: 'image',
+            id: '100500',
+        },
+        url: '/static/uploads/blue-orange.jpg',
+        align: 'center',
+        width: 862,
+        height: 417,
+        children: [
+            {
+                text: '',
+                'uui-richTextEditor-span-mark': true,
+            },
+        ],
+        caption: [
+            {
+                text: 'Picture from a file',
+            },
+        ],
+    },
+    {
+        type: 'paragraph',
+        children: [
+            {
+                text: '',
+            },
+        ],
+    },
+    {
+        align: 'center',
+        url: 'https://c.files.bbci.co.uk/D8CD/production/_117310555_16.jpg',
+        width: 862,
+        type: 'image',
+        children: [
+            {
+                text: '',
+            },
+        ],
+        caption: [
+            {
+                text: 'Picture from the internet',
+            },
+        ],
+    },
+    {
+        type: 'uui-richTextEditor-header-3',
+        children: [
+            {
+                text: 'PDFs',
+                'uui-richTextEditor-bold': true,
+            },
+        ],
+    },
+    {
+        type: 'paragraph',
+        children: [
+            {
+                text: 'Embed PDFs via the ',
+            },
+            {
+                text: '"Add PDF" ',
+                'uui-richTextEditor-bold': true,
+            },
+            {
+                text: 'icon or drag-and-drop.',
+            },
+        ],
+    },
+    {
+        type: 'iframe',
+        children: [
+            {
+                text: '',
+            },
+        ],
+        data: {},
+        url: 'https://pdfobject.com/pdf/sample.pdf',
+    },
+    {
+        type: 'uui-richTextEditor-header-3',
+        children: [
+            {
+                text: 'Files',
+                'uui-richTextEditor-bold': true,
+            },
+        ],
+    },
+    {
+        type: 'paragraph',
+        children: [
+            {
+                text: 'Upload arbitrary files using the ',
+            },
+            {
+                text: '"Add Attachment"',
+                'uui-richTextEditor-bold': true,
+            },
+            {
+                text: ' icon. Files appear as downloadable links.',
+            },
+        ],
+    },
+    {
+        type: 'attachment',
+        data: {
+            path: '/static/uploads/blue-orange.jpg',
+            name: 'Excel.xlsx',
+            size: 8710,
+            id: 1,
+            type: 'attachment',
+            extension: 'xlsx',
+            fileName: 'DemoExcelAttachment.xlsx',
+        },
+        children: [
+            {
+                text: '',
+            },
+        ],
+    },
+    {
+        type: 'attachment',
+        data: {
+            path: '/static/uploads/blue-orange.jpg',
+            name: 'Word.docx',
+            size: 11943,
+            id: 2,
+            type: 'attachment',
+            extension: 'docx',
+            fileName: 'DemoWordAttachment.docx',
+        },
+        children: [
+            {
+                text: '',
+            },
+        ],
+    },
+    {
+        type: 'attachment',
+        data: {
+            path: '/static/uploads/blue-orange.jpg',
+            name: '5mb-file.txt',
+            size: 5000000,
+            id: 4,
+            type: 'attachment',
+            extension: 'txt',
+            fileName: 'DemoTxtAttachment.txt',
+        },
+        children: [
+            {
+                text: '',
+            },
+        ],
+    },
+    {
+        type: 'uui-richTextEditor-header-3',
+        data: {
+            checked: false,
+        },
+        children: [
+            {
+                text: 'Videos',
+                'uui-richTextEditor-bold': true,
+            },
+        ],
+    },
+    {
+        type: 'paragraph',
+        children: [
+            {
+                text: 'Embed videos via the ',
+            },
+            {
+                text: '"Add Video"',
+                'uui-richTextEditor-bold': true,
+            },
+            {
+                text: ' icon.',
+            },
+        ],
+    },
+    {
+        type: 'iframe',
+        children: [
+            {
+                text: '',
+                'uui-richTextEditor-span-mark': true,
+            },
+        ],
+        data: {},
+        url: 'https://www.youtube.com/embed/jfKfPfyJRdk',
+    },
+    {
+        type: 'uui-richTextEditor-header-3',
+        data: {},
+        children: [
+            {
+                text: 'Tables',
+            },
+        ],
+    },
+    {
+        type: 'paragraph',
+        data: {},
+        children: [
+            {
+                text: 'We provide a powerful tables plugin:',
+            },
+        ],
+    },
+    {
+        type: 'table',
+        children: [
+            {
+                type: 'table_row',
+                children: [
                     {
-                        object: 'text',
-                        text: 'Embedded content',
-                        marks: [
+                        type: 'table_header_cell',
+                        children: [
                             {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
+                                type: 'paragraph',
                                 data: {},
+                                children: [
+                                    {
+                                        text: 'Department',
+                                    },
+                                ],
                             },
                         ],
                     },
-                ],
-            }, {
-                object: 'block',
-                type: 'paragraph',
-                data: {
-                    checked: false,
-                },
-                nodes: [
                     {
-                        object: 'text',
-                        text: 'Files can be dropped directly into the editor. You can embed images (align and resizing is supported):',
-                        marks: [
+                        type: 'table_header_cell',
+                        children: [
                             {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
+                                type: 'paragraph',
                                 data: {},
+                                children: [
+                                    {
+                                        text: 'Name & Title',
+                                    },
+                                ],
                             },
                         ],
+                        colSpan: 2,
+                        rowSpan: 1,
                     },
-                ],
-            }, {
-                object: 'block',
-                type: 'image',
-                data: {
-                    size: 77236,
-                    src: '/static/uploads/blue-orange.jpg',
-                    path: '/static/uploads/blue-orange.jpg',
-                    align: 'align-center',
-                    fileName: 'blue-orange.jpg',
-                    name: 'blue-orange.jpg',
-                    type: 'image',
-                    id: '100500',
-                    imageSize: {
-                        width: 800,
-                        height: 417,
-                    },
-                },
-                nodes: [
                     {
-                        object: 'text',
-                        text: '',
-                        marks: [
+                        type: 'table_header_cell',
+                        children: [
                             {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
+                                type: 'paragraph',
                                 data: {},
+                                children: [
+                                    {
+                                        text: 'Tasks',
+                                    },
+                                ],
                             },
                         ],
                     },
                 ],
-            }, {
-                object: 'block',
-                type: 'paragraph',
-                data: {
-                    checked: false,
-                },
-                nodes: [
+            },
+            {
+                type: 'table_row',
+                children: [
                     {
-                        object: 'text',
-                        text: 'Video:',
-                        marks: [
+                        type: 'table_cell',
+                        children: [
                             {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
+                                type: 'paragraph',
                                 data: {},
+                                children: [
+                                    {
+                                        text: 'RnD',
+                                    },
+                                ],
                             },
                         ],
+                        colSpan: 1,
+                        rowSpan: 2,
                     },
-                ],
-            }, {
-                object: 'block',
-                type: 'iframe',
-                data: {
-                    src: 'https://www.youtube.com/embed/5qap5aO4i9A',
-                },
-                nodes: [
                     {
-                        object: 'text',
-                        text: '',
-                        marks: [
+                        type: 'table_cell',
+                        children: [
                             {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
+                                type: 'paragraph',
                                 data: {},
+                                children: [
+                                    {
+                                        text: 'Alice Green',
+                                    },
+                                ],
                             },
                         ],
+                        rowSpan: 1,
+                        colSpan: 1,
                     },
-                ],
-            }, {
-                object: 'block',
-                type: 'paragraph',
-                data: {
-                    checked: false,
-                },
-                nodes: [
                     {
-                        object: 'text',
-                        text: 'Arbitrary attachments:',
-                        marks: [
+                        type: 'table_cell',
+                        children: [
                             {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
+                                type: 'paragraph',
                                 data: {},
+                                children: [
+                                    {
+                                        text: 'Design',
+                                    },
+                                ],
                             },
                         ],
+                        rowSpan: 1,
+                        colSpan: 1,
                     },
-                ],
-            }, {
-                object: 'block',
-                type: 'attachment',
-                data: {
-                    path: '/static/uploads/DemoExcelAttachment.xlsx',
-                    name: 'DemoExcelAttachment.xlsx',
-                    size: 8669,
-                    id: '100500',
-                    type: 'attachment',
-                    src: '/static/uploads/DemoExcelAttachment.xlsx',
-                    fileName: 'DemoExcelAttachment.xlsx',
-                    extension: 'xlsx',
-                },
-                nodes: [
                     {
-                        object: 'text',
-                        text: '',
-                        marks: [
+                        type: 'table_cell',
+                        children: [
                             {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-span-mark',
+                                type: 'paragraph',
                                 data: {},
+                                children: [
+                                    {
+                                        text: 'Ok',
+                                        color: '#9BC837',
+                                        'uui-richTextEditor-span-mark': true,
+                                        'uui-richTextEditor-bold': true,
+                                    },
+                                ],
                             },
                         ],
                     },
                 ],
-            }, {
-                object: 'block',
-                type: 'paragraph',
-                data: {},
-                nodes: [
-                    {
-                        object: 'text',
-                        text: 'You can also embed any arbitrary content, like PDF files, directly into the document, inside IFrame.',
-                        marks: [],
-                    },
-                ],
-            }, {
-                object: 'block',
-                type: 'uui-richTextEditor-header-3',
-                data: {},
-                nodes: [
-                    {
-                        object: 'text',
-                        text: 'Tables',
-                        marks: [],
-                    },
-                ],
-            }, {
-                object: 'block',
-                type: 'paragraph',
-                data: {},
-                nodes: [
-                    {
-                        object: 'text',
-                        text: 'We provide a powerful tables plugin:',
-                        marks: [],
-                    },
-                ],
-            }, {
-                object: 'block',
-                type: 'paragraph',
-                data: {},
-                nodes: [
+                size: 47,
+            },
+            {
+                type: 'table_row',
+                children: [
                     {
-                        object: 'block',
-                        type: 'table',
-                        data: {
-                            cellSizes: [
-                                130, 200, 200, 183, 161,
-                            ],
-                        },
-                        nodes: [
+                        type: 'table_cell',
+                        children: [
                             {
-                                object: 'block',
-                                type: 'table_row',
+                                type: 'paragraph',
                                 data: {},
-                                nodes: [
+                                children: [
                                     {
-                                        object: 'block',
-                                        type: 'table_header_cell',
-                                        data: { },
-                                        nodes: [
-                                            {
-                                                object: 'block',
-                                                type: 'paragraph',
-                                                data: {},
-                                                nodes: [
-                                                    {
-                                                        object: 'text',
-                                                        text: 'Department',
-                                                        marks: [],
-                                                    },
-
-                                                ],
-                                            },
-                                        ],
-                                    },
-                                    {
-                                        object: 'block',
-                                        type: 'table_header_cell',
-                                        data: { colSpan: 2 },
-                                        nodes: [
-                                            {
-                                                object: 'block',
-                                                type: 'paragraph',
-                                                data: {},
-                                                nodes: [
-                                                    {
-                                                        object: 'text',
-                                                        text: 'Name',
-                                                        marks: [],
-                                                    },
-                                                    {
-                                                        object: 'text',
-                                                        text: ' & ',
-                                                        marks: [],
-                                                    },
-                                                    {
-                                                        object: 'text',
-                                                        text: 'Title',
-                                                        marks: [],
-                                                    },
-                                                ],
-                                            },
-                                        ],
-                                    },
-
-                                    {
-                                        object: 'block',
-                                        type: 'table_header_cell',
-                                        data: {},
-                                        nodes: [
-                                            {
-                                                object: 'block',
-                                                type: 'paragraph',
-                                                data: {},
-                                                nodes: [
-                                                    {
-                                                        object: 'text',
-                                                        text: 'Tasks',
-                                                        marks: [],
-                                                    },
-                                                ],
-                                            },
-                                        ],
+                                        text: 'Bob Blue',
                                     },
                                 ],
                             },
+                        ],
+                        colSpan: 1,
+                        rowSpan: 1,
+                    },
+                    {
+                        type: 'table_cell',
+                        children: [
                             {
-                                object: 'block',
-                                type: 'table_row',
+                                type: 'paragraph',
                                 data: {},
-                                nodes: [
+                                children: [
                                     {
-                                        object: 'block',
-                                        type: 'table_cell',
-                                        data: { rowSpan: 2 },
-                                        nodes: [
-                                            {
-                                                object: 'block',
-                                                type: 'paragraph',
-                                                data: {},
-                                                nodes: [
-                                                    {
-                                                        object: 'text',
-                                                        text: 'RnD',
-                                                        marks: [],
-                                                    },
-                                                ],
-                                            },
-                                        ],
-                                    },
-                                    {
-                                        object: 'block',
-                                        type: 'table_cell',
-                                        data: {},
-                                        nodes: [
-                                            {
-                                                object: 'block',
-                                                type: 'paragraph',
-                                                data: {},
-                                                nodes: [
-                                                    {
-                                                        object: 'text',
-                                                        text: 'Alice Green',
-                                                        marks: [],
-                                                    },
-                                                ],
-                                            },
-                                        ],
-                                    },
-                                    {
-                                        object: 'block',
-                                        type: 'table_cell',
-                                        data: {},
-                                        nodes: [
-                                            {
-                                                object: 'block',
-                                                type: 'paragraph',
-                                                data: {},
-                                                nodes: [
-                                                    {
-                                                        object: 'text',
-                                                        text: 'Design',
-                                                        marks: [],
-                                                    },
-                                                ],
-                                            },
-                                        ],
-                                    },
-                                    {
-                                        object: 'block',
-                                        type: 'table_cell',
-                                        data: {},
-                                        nodes: [
-                                            {
-                                                object: 'block',
-                                                type: 'paragraph',
-                                                data: {},
-                                                nodes: [
-                                                    {
-                                                        object: 'text',
-                                                        text: 'Ok',
-                                                        marks: [
-                                                            {
-                                                                object: 'mark',
-                                                                type: 'uui-richTextEditor-span-mark',
-                                                                data: {
-                                                                    style: {
-                                                                        color: '#9BC837',
-                                                                    },
-                                                                },
-                                                            }, {
-                                                                object: 'mark',
-                                                                type: 'uui-richTextEditor-bold',
-                                                                data: {},
-                                                            },
-                                                        ],
-                                                    },
-                                                ],
-                                            },
-                                        ],
+                                        text: 'Developer',
                                     },
                                 ],
                             },
+                        ],
+                        colSpan: 1,
+                        rowSpan: 1,
+                    },
+                    {
+                        type: 'table_cell',
+                        children: [
                             {
-                                object: 'block',
-                                type: 'table_row',
+                                type: 'paragraph',
                                 data: {},
-                                nodes: [
+                                children: [
                                     {
-                                        object: 'block',
-                                        type: 'table_cell',
-                                        data: {},
-                                        nodes: [
-                                            {
-                                                object: 'block',
-                                                type: 'paragraph',
-                                                data: {},
-                                                nodes: [
-                                                    {
-                                                        object: 'text',
-                                                        text: 'Bob Blue',
-                                                        marks: [],
-                                                    },
-                                                ],
-                                            },
-                                        ],
-                                    }, {
-                                        object: 'block',
-                                        type: 'table_cell',
-                                        data: {},
-                                        nodes: [
-                                            {
-                                                object: 'block',
-                                                type: 'paragraph',
-                                                data: {},
-                                                nodes: [
-                                                    {
-                                                        object: 'text',
-                                                        text: 'Developer',
-                                                        marks: [],
-                                                    },
-                                                ],
-                                            },
-                                        ],
-                                    }, {
-                                        object: 'block',
-                                        type: 'table_cell',
-                                        data: {},
-                                        nodes: [
-                                            {
-                                                object: 'block',
-                                                type: 'paragraph',
-                                                data: {},
-                                                nodes: [
-                                                    {
-                                                        object: 'text',
-                                                        text: 'Ok',
-                                                        marks: [
-                                                            {
-                                                                object: 'mark',
-                                                                type: 'uui-richTextEditor-span-mark',
-                                                                data: {
-                                                                    style: {
-                                                                        color: '#9BC837',
-                                                                    },
-                                                                },
-                                                            }, {
-                                                                object: 'mark',
-                                                                type: 'uui-richTextEditor-bold',
-                                                                data: {},
-                                                            },
-                                                        ],
-                                                    },
-                                                ],
-                                            },
-                                        ],
+                                        text: 'Ok',
+                                        color: '#9BC837',
+                                        'uui-richTextEditor-span-mark': true,
+                                        'uui-richTextEditor-bold': true,
                                     },
                                 ],
                             },
+                        ],
+                        colSpan: 1,
+                        rowSpan: 1,
+                    },
+                ],
+            },
+            {
+                type: 'table_row',
+                children: [
+                    {
+                        type: 'table_cell',
+                        children: [
                             {
-                                object: 'block',
-                                type: 'table_row',
+                                type: 'paragraph',
                                 data: {},
-                                nodes: [
-                                    {
-                                        object: 'block',
-                                        type: 'table_cell',
-                                        data: { rowSpan: 1 },
-                                        nodes: [
-                                            {
-                                                object: 'block',
-                                                type: 'paragraph',
-                                                data: {},
-                                                nodes: [
-                                                    {
-                                                        object: 'text',
-                                                        text: 'People',
-                                                        marks: [],
-                                                    },
-                                                ],
-                                            },
-                                        ],
-                                    },
+                                children: [
                                     {
-                                        object: 'block',
-                                        type: 'table_cell',
-                                        data: { rowSpan: 1 },
-                                        nodes: [
-                                            {
-                                                object: 'block',
-                                                type: 'paragraph',
-                                                data: {},
-                                                nodes: [
-                                                    {
-                                                        object: 'text',
-                                                        text: 'Ann Chovey',
-                                                        marks: [],
-                                                    },
-                                                ],
-                                            },
-                                        ],
-                                    },
-                                    {
-                                        object: 'block',
-                                        type: 'table_cell',
-                                        data: { rowSpan: 1 },
-                                        nodes: [
-                                            {
-                                                object: 'block',
-                                                type: 'paragraph',
-                                                data: {},
-                                                nodes: [
-                                                    {
-                                                        object: 'text',
-                                                        text: 'Primary HR',
-                                                        marks: [],
-                                                    },
-                                                ],
-                                            },
-                                        ],
-                                    },
-                                    {
-                                        object: 'block',
-                                        type: 'table_cell',
-                                        data: { rowSpan: 1 },
-                                        nodes: [
-                                            {
-                                                object: 'block',
-                                                type: 'paragraph',
-                                                data: {},
-                                                nodes: [
-                                                    {
-                                                        object: 'text',
-                                                        text: 'In progress',
-                                                        marks: [
-                                                            {
-                                                                object: 'mark',
-                                                                type: 'uui-richTextEditor-span-mark',
-                                                                data: {
-                                                                    style: {
-                                                                        color: '#8A7CBB',
-                                                                    },
-                                                                },
-                                                            }, {
-                                                                object: 'mark',
-                                                                type: 'uui-richTextEditor-bold',
-                                                                data: {},
-                                                            },
-                                                        ],
-                                                    },
-                                                ],
-                                            },
-                                        ],
+                                        text: 'People',
                                     },
                                 ],
                             },
+                        ],
+                        colSpan: 1,
+                        rowSpan: 1,
+                    },
+                    {
+                        type: 'table_cell',
+                        children: [
                             {
-                                object: 'block',
-                                type: 'table_row',
+                                type: 'paragraph',
                                 data: {},
-                                nodes: [
+                                children: [
                                     {
-                                        object: 'block',
-                                        type: 'table_cell',
-                                        data: { },
-                                        nodes: [
-                                            {
-                                                object: 'block',
-                                                type: 'paragraph',
-                                                data: {},
-                                                nodes: [
-                                                    {
-                                                        object: 'text',
-                                                        text: '',
-                                                    },
-                                                ],
-                                            },
-                                        ],
-                                    },
-                                    {
-                                        object: 'block',
-                                        type: 'table_cell',
-                                        data: { colSpan: 3 },
-                                        nodes: [
-                                            {
-                                                object: 'block',
-                                                type: 'paragraph',
-                                                data: {},
-                                                nodes: [
-                                                    {
-                                                        object: 'text',
-                                                        text: 'Footer',
-                                                        marks: [],
-                                                    },
-                                                ],
-                                            },
-                                        ],
+                                        text: 'Ann Chovey',
                                     },
                                 ],
                             },
                         ],
+                        colSpan: 1,
+                        rowSpan: 1,
                     },
-                ],
-            }, {
-                object: 'block',
-                type: 'uui-richTextEditor-header-3',
-                data: {},
-                nodes: [
-                    {
-                        object: 'text',
-                        text: 'Placeholders:',
-                        marks: [],
-                    },
-                ],
-            }, {
-                object: 'block',
-                type: 'paragraph',
-                data: {},
-                nodes: [
                     {
-                        object: 'text',
-                        text: 'Allows to insert ',
-                        marks: [],
-                    }, {
-                        object: 'inline',
-                        type: 'placeholder',
-                        data: {
-                            name: 'Placeholder',
-                            field: 'placeholder',
-                        },
-                        nodes: [
+                        type: 'table_cell',
+                        children: [
                             {
-                                object: 'text',
-                                text: '',
-                                marks: [],
+                                type: 'paragraph',
+                                data: {},
+                                children: [
+                                    {
+                                        text: 'Primary HR',
+                                    },
+                                ],
                             },
                         ],
-                    }, {
-                        object: 'text',
-                        text: " into text. Can be used for editing templates, for example for emails. Placeholders can be then replaced with real values programmatically (currently that's done by some apps in back-end code).",
-                        marks: [],
-                    },
-                ],
-            }, {
-                object: 'block',
-                type: 'paragraph',
-                data: {},
-                nodes: [
-                    {
-                        object: 'text',
-                        text: '',
-                        marks: [],
-                    },
-                ],
-            }, {
-                object: 'block',
-                type: 'uui-richTextEditor-header-2',
-                data: {},
-                nodes: [
-                    {
-                        object: 'text',
-                        text: 'Misc features',
-                        marks: [],
-                    },
-                ],
-            }, {
-                object: 'block',
-                type: 'paragraph',
-                data: {},
-                nodes: [
-                    {
-                        object: 'text',
-                        text: 'Highlighted blocks:',
-                        marks: [],
+                        colSpan: 1,
+                        rowSpan: 1,
                     },
-                ],
-            }, {
-                object: 'block',
-                type: 'note-error',
-                data: {},
-                nodes: [
                     {
-                        object: 'text',
-                        text: 'Danger!',
-                        marks: [
+                        type: 'table_cell',
+                        children: [
                             {
-                                object: 'mark',
-                                type: 'uui-richTextEditor-bold',
+                                type: 'paragraph',
                                 data: {},
+                                children: [
+                                    {
+                                        text: 'In progress',
+                                        color: '#8A7CBB',
+                                        'uui-richTextEditor-span-mark': true,
+                                        'uui-richTextEditor-bold': true,
+                                    },
+                                ],
                             },
                         ],
+                        colSpan: 1,
+                        rowSpan: 1,
                     },
                 ],
-            }, {
-                object: 'block',
-                type: 'note-link',
-                data: {},
-                nodes: [
-                    {
-                        object: 'text',
-                        text: 'Info',
-                        marks: [],
-                    },
-                ],
-            }, {
-                object: 'block',
-                type: 'note-warning',
-                data: {},
-                nodes: [
-                    {
-                        object: 'text',
-                        text: 'Warning',
-                        marks: [],
-                    },
-                ],
-            }, {
-                object: 'block',
-                type: 'note-quote',
-                data: {},
-                nodes: [
-                    {
-                        object: 'text',
-                        text: 'Side note',
-                        marks: [],
-                    },
-                ],
-            }, {
-                object: 'block',
-                type: 'paragraph',
-                data: {},
-                nodes: [
+                size: 47,
+            },
+            {
+                type: 'table_row',
+                children: [
                     {
-                        object: 'text',
-                        text: 'Splitter:',
-                        marks: [],
+                        type: 'table_cell',
+                        children: [
+                            {
+                                type: 'paragraph',
+                                children: [
+                                    {
+                                        text: '',
+                                    },
+                                ],
+                            },
+                        ],
+                        colSpan: 1,
+                        rowSpan: 1,
                     },
-                ],
-            }, {
-                object: 'block',
-                type: 'separatorBLock',
-                data: {},
-                nodes: [
                     {
-                        object: 'text',
-                        text: '',
-                        marks: [],
+                        type: 'table_cell',
+                        children: [
+                            {
+                                type: 'paragraph',
+                                data: {},
+                                children: [
+                                    {
+                                        text: 'Footer',
+                                    },
+                                ],
+                            },
+                        ],
+                        colSpan: 3,
+                        rowSpan: 1,
                     },
                 ],
-            }, {
-                object: 'block',
-                type: 'paragraph',
-                data: {},
-                nodes: [
+                size: 46,
+            },
+        ],
+        data: {},
+        colSizes: [
+            200,
+            154,
+            150,
+            189,
+        ],
+    },
+    {
+        type: 'uui-richTextEditor-header-3',
+        data: {},
+        children: [
+            {
+                text: 'Placeholders',
+            },
+        ],
+    },
+    {
+        type: 'paragraph',
+        data: {},
+        children: [
+            {
+                text: '',
+            },
+            {
+                type: 'placeholder',
+                data: {
+                    name: 'Placeholder',
+                    field: 'placeholder',
+                },
+                children: [
                     {
-                        object: 'text',
                         text: '',
-                        marks: [],
                     },
                 ],
             },
+            {
+                text: ' can be inserted into text and are useful for creating editable templates, such as emails. These placeholders can be programmatically replaced with real values (currently handled by some apps in back-end code).',
+            },
+        ],
+    },
+    {
+        type: 'uui-richTextEditor-header-2',
+        data: {},
+        children: [
+            {
+                text: 'Miscellaneous Features',
+            },
+        ],
+    },
+    {
+        type: 'paragraph',
+        data: {},
+        children: [
+            {
+                text: 'Highlighted blocks:',
+            },
+        ],
+    },
+    {
+        type: 'note-error',
+        data: {},
+        children: [
+            {
+                text: 'Danger!',
+                'uui-richTextEditor-bold': true,
+            },
+        ],
+    },
+    {
+        type: 'note-link',
+        data: {},
+        children: [
+            {
+                text: 'Info',
+            },
+        ],
+    },
+    {
+        type: 'note-warning',
+        data: {},
+        children: [
+            {
+                text: 'Warning',
+            },
+        ],
+    },
+    {
+        type: 'note-quote',
+        data: {},
+        children: [
+            {
+                text: 'Side note',
+            },
+        ],
+    },
+    {
+        type: 'paragraph',
+        data: {},
+        children: [
+            {
+                text: 'Splitter:',
+            },
+        ],
+    },
+    {
+        type: 'separatorBLock',
+        data: {},
+        children: [
+            {
+                text: '',
+            },
+        ],
+    },
+    {
+        type: 'paragraph',
+        data: {},
+        children: [
+            {
+                text: '',
+            },
         ],
     },
-} as any;
+];
diff --git a/uui-e2e-tests/framework/data/testData.ts b/uui-e2e-tests/framework/data/testData.ts
index 798ccd534f..c93a628651 100644
--- a/uui-e2e-tests/framework/data/testData.ts
+++ b/uui-e2e-tests/framework/data/testData.ts
@@ -143,7 +143,7 @@ export type TPreviewIdByComponentId = {
 };
 
 export const THEMES = {
-    allExceptVanillaThunder: Object.values(TTheme).filter((t) => t !== TTheme.vanilla_thunder),
+    allExceptVanillaThunder: Object.values(TTheme),
 };
 
 /**
diff --git a/uui-e2e-tests/framework/types.ts b/uui-e2e-tests/framework/types.ts
index bb97257393..d4f1fd31c3 100644
--- a/uui-e2e-tests/framework/types.ts
+++ b/uui-e2e-tests/framework/types.ts
@@ -12,10 +12,9 @@ export enum TTheme {
     electric = 'electric',
     loveship = 'loveship',
     loveship_dark = 'loveship_dark',
-    promo = 'promo',
-    vanilla_thunder = 'vanilla_thunder',
-    eduverse_light = 'eduverse_light',
-    eduverse_dark = 'eduverse_dark'
+    promo = 'promo'
+    // eduverse_light = 'eduverse_light',
+    // eduverse_dark = 'eduverse_dark'
 }
 
 export interface DocExamplePageParams {
diff --git a/uui-e2e-tests/package.json b/uui-e2e-tests/package.json
index 3161d99012..d77142c208 100644
--- a/uui-e2e-tests/package.json
+++ b/uui-e2e-tests/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epam/uui-e2e-tests",
-  "version": "5.11.1-alpha.0",
+  "version": "5.11.1-rc.0",
   "description": "",
   "author": "EPAM",
   "license": "MIT",
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-EduverseDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-EduverseDark-NotSkin.png
index 9dcf0afbd2..f0e21b79f4 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-EduverseDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-EduverseDark-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-EduverseLight-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-EduverseLight-NotSkin.png
index b4df3222cc..3c80b51dc2 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-EduverseLight-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-EduverseLight-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Electric-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Electric-NotSkin.png
index e7c52e3d32..bb4c665702 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Electric-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Electric-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Loveship-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Loveship-NotSkin.png
index e21d697bfe..225edeb0a6 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Loveship-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Loveship-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-LoveshipDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-LoveshipDark-NotSkin.png
index 73fc697105..10f074b44f 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-LoveshipDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-LoveshipDark-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Promo-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Promo-NotSkin.png
index dd87b58f25..c595b814ff 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Promo-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-ColorVariants-Promo-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-EduverseDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-EduverseDark-NotSkin.png
index 3d8c2485d0..1dc05ab83b 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-EduverseDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-EduverseDark-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-EduverseLight-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-EduverseLight-NotSkin.png
index 2250c0e500..df3f4e5207 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-EduverseLight-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-EduverseLight-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Electric-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Electric-NotSkin.png
index a847df2d4b..51956c6ec5 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Electric-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Electric-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Loveship-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Loveship-NotSkin.png
index e155be6c90..61deded213 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Loveship-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Loveship-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-LoveshipDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-LoveshipDark-NotSkin.png
index 3ba7d384ee..34f720cdb3 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-LoveshipDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-LoveshipDark-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Promo-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Promo-NotSkin.png
index 6911e8f148..59a446c750 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Promo-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/Alert-Layout-Promo-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-EduverseDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-EduverseDark-NotSkin.png
index 64e54ad229..26417987ca 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-EduverseDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-EduverseDark-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-EduverseLight-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-EduverseLight-NotSkin.png
index 220f78f7af..0a147dd306 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-EduverseLight-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-EduverseLight-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Electric-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Electric-NotSkin.png
index 506462968d..f5224e333d 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Electric-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Electric-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Loveship-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Loveship-NotSkin.png
index b2c740bb13..c3c55d4105 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Loveship-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Loveship-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-LoveshipDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-LoveshipDark-NotSkin.png
index 60a0ad96de..db0313fdf9 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-LoveshipDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-LoveshipDark-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Promo-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Promo-NotSkin.png
index 549e4edcbe..10d327210d 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Promo-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-ColorVariants-Promo-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-EduverseDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-EduverseDark-NotSkin.png
index 1e470f1c51..fb0a3762ab 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-EduverseDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-EduverseDark-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-EduverseLight-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-EduverseLight-NotSkin.png
index 85caee40a1..340cbd556e 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-EduverseLight-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-EduverseLight-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Electric-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Electric-NotSkin.png
index a070b32bb9..3f9d43aa6a 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Electric-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Electric-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Loveship-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Loveship-NotSkin.png
index d0dc5bf8e9..b954929345 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Loveship-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Loveship-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-LoveshipDark-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-LoveshipDark-NotSkin.png
index b017ec83d7..d8b4b1af20 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-LoveshipDark-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-LoveshipDark-NotSkin.png differ
diff --git a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Promo-NotSkin.png b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Promo-NotSkin.png
index 81e5d5160a..7bd7a5599c 100644
Binary files a/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Promo-NotSkin.png and b/uui-e2e-tests/tests/previewTests/__screenshots__/linux/webkit/Alert-Layout-Promo-NotSkin.png differ
diff --git a/uui-editor/package.json b/uui-editor/package.json
index 3093fb822b..f3c8d83ee7 100644
--- a/uui-editor/package.json
+++ b/uui-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epam/uui-editor",
-  "version": "5.11.1-alpha.0",
+  "version": "5.11.1-rc.0",
   "author": "EPAM",
   "license": "MIT",
   "main": "index.js",
@@ -12,10 +12,10 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "7.0.0",
-    "@epam/assets": "5.11.1-alpha.0",
-    "@epam/uui": "5.11.1-alpha.0",
-    "@epam/uui-components": "5.11.1-alpha.0",
-    "@epam/uui-core": "5.11.1-alpha.0",
+    "@epam/assets": "5.11.1-rc.0",
+    "@epam/uui": "5.11.1-rc.0",
+    "@epam/uui-components": "5.11.1-rc.0",
+    "@epam/uui-core": "5.11.1-rc.0",
     "@udecode/plate-autoformat": "31.0.0",
     "@udecode/plate-basic-marks": "31.0.0",
     "@udecode/plate-block-quote": "31.0.0",
diff --git a/uui-editor/src/migrations/normalizers.ts b/uui-editor/src/migrations/normalizers.ts
index 5685652d95..2290d691d1 100644
--- a/uui-editor/src/migrations/normalizers.ts
+++ b/uui-editor/src/migrations/normalizers.ts
@@ -32,6 +32,7 @@ export const normalizeTableCellElement = (editor: PlateEditor<Value>, entry: TNo
             cellNode,
             { at: path },
         );
+        return;
     }
 };
 
diff --git a/uui-editor/src/plugins/imagePlugin/ImageElement.tsx b/uui-editor/src/plugins/imagePlugin/ImageElement.tsx
index 1d2978b768..7bc7604dd4 100644
--- a/uui-editor/src/plugins/imagePlugin/ImageElement.tsx
+++ b/uui-editor/src/plugins/imagePlugin/ImageElement.tsx
@@ -15,6 +15,7 @@ import { Resizable, ResizeHandle } from '../../implementation/Resizable';
 import { PlateImgAlign, TImageElement } from './types';
 import { Caption, CaptionTextarea } from '@udecode/plate-caption';
 import { ResizableProvider } from '@udecode/plate-resizable';
+import { useForceUpdate } from '@epam/uui-core';
 
 interface ImageElementProps extends PlateElementProps<Value, TImageElement> {
     align?: PlateImgAlign;
@@ -28,6 +29,7 @@ export const ImageElement = withHOC(ResizableProvider, ({
     align,
     ...props
 }: ImageElementProps) => {
+    const forceUpdate = useForceUpdate();
     const { children, nodeProps } = props;
 
     const focused = useFocused();
@@ -80,6 +82,7 @@ export const ImageElement = withHOC(ResizableProvider, ({
                             visible && css.selectedImage, // for mobile
                             nodeProps?.className,
                         ) }
+                        onLoad={ () => forceUpdate() }
                     />
                     {!readOnly && (
                         <ResizeHandle
diff --git a/uui-editor/src/plugins/tablePlugin/ToolbarContent.tsx b/uui-editor/src/plugins/tablePlugin/ToolbarContent.tsx
index 04e0361382..99ff4b7aaf 100644
--- a/uui-editor/src/plugins/tablePlugin/ToolbarContent.tsx
+++ b/uui-editor/src/plugins/tablePlugin/ToolbarContent.tsx
@@ -14,6 +14,7 @@ import { ToolbarButton } from '../../implementation/ToolbarButton';
 import { useEditorRef } from '@udecode/plate-common';
 import { getTableEntries, insertTableColumn, insertTableRow, deleteRow, deleteTable, unmergeTableCells, deleteColumn } from '@udecode/plate-table';
 import { TABLE_HEADER_CELL_TYPE } from './constants';
+import { temporaryFixDeleteRow } from './temporaryFixDeleteRow';
 
 function StyledRemoveTable() {
     return <RemoveTable className={ css.removeTableIcon } />;
@@ -72,7 +73,7 @@ export function TableToolbarContent({ canUnmerge }:{ canUnmerge:boolean }) {
             />
             <ToolbarButton
                 key="delete-row"
-                onClick={ () => deleteRow(editor) }
+                onClick={ temporaryFixDeleteRow(editor, () => deleteRow(editor)) }
                 icon={ RemoveRow }
             />
             <ToolbarButton
diff --git a/uui-editor/src/plugins/tablePlugin/tablePlugin.tsx b/uui-editor/src/plugins/tablePlugin/tablePlugin.tsx
index c5e7c237c5..4d2299c0a0 100644
--- a/uui-editor/src/plugins/tablePlugin/tablePlugin.tsx
+++ b/uui-editor/src/plugins/tablePlugin/tablePlugin.tsx
@@ -168,7 +168,6 @@ export const tablePlugin = (): PlatePlugin<TablePLuginOptions> =>
 
                 if (isElement(node) && (TABLE_CELL_TYPE === node.type || TABLE_CELL_TYPE === node.type)) {
                     normalizeTableCellElement(editor, entry);
-                    return;
                 }
 
                 normalizeNode(entry);
diff --git a/uui-editor/src/plugins/tablePlugin/temporaryFixDeleteRow.ts b/uui-editor/src/plugins/tablePlugin/temporaryFixDeleteRow.ts
new file mode 100644
index 0000000000..18e78632fa
--- /dev/null
+++ b/uui-editor/src/plugins/tablePlugin/temporaryFixDeleteRow.ts
@@ -0,0 +1,25 @@
+import { isType, type PlateEditor, getBlockAbove } from '@udecode/plate-common';
+import { TABLE_TYPE } from './constants';
+import type { TableElementType } from './types';
+
+/**
+* Remove fix wrapper function when `@udecode/plate-table` will be updated to 40.0.0
+* See {@link https://github.com/udecode/plate/blob/f8fa0e7f4c0b4dd3ab445fd0aa55738db1596de9/packages/table/CHANGELOG.md#4000} for details
+*/
+export const temporaryFixDeleteRow = (editor: PlateEditor, deleteRowFn: () => void) => {
+    return () => {
+        const tableElement = getBlockAbove<TableElementType>(editor, { match: (node) => isType(editor, node, TABLE_TYPE) });
+
+        if (!tableElement) {
+            return;
+        }
+
+        const [tableNode] = tableElement;
+
+        if (tableNode.children.length <= 1) {
+            return;
+        }
+
+        deleteRowFn();
+    };
+};
diff --git a/uui-editor/src/plugins/uploadFilePlugin/file_uploader.ts b/uui-editor/src/plugins/uploadFilePlugin/file_uploader.ts
index 966e88f897..73d85dd3c0 100644
--- a/uui-editor/src/plugins/uploadFilePlugin/file_uploader.ts
+++ b/uui-editor/src/plugins/uploadFilePlugin/file_uploader.ts
@@ -82,14 +82,17 @@ const isValidFileType = (fileType?: string) => {
 
 const buildFragments = (
     files: FileUploadResponse[],
+    blockType?: UploadType,
 ) => {
     return files.map((file: FileUploadResponse) => {
         const fileType = file.type;
-        const uploadType = (
-            isValidFileType(fileType) ? fileType : ATTACHMENT_TYPE
-        ) as UploadType;
+        if (blockType) {
+            return UPLOAD_BLOCKS[blockType](file);
+        } else {
+            const blockTypeByFile = (isValidFileType(fileType) ? fileType : ATTACHMENT_TYPE) as UploadType;
 
-        return UPLOAD_BLOCKS[uploadType](file);
+            return UPLOAD_BLOCKS[blockTypeByFile](file);
+        }
     });
 };
 
@@ -97,6 +100,7 @@ export const createFileUploader = (options?: UploadFileOptions) =>
     async (
         editor: PlateEditor,
         files: File[],
+        blockType: UploadType,
     ) => {
         const uploadFile = options?.uploadFile;
         if (!uploadFile) return;
@@ -127,7 +131,7 @@ export const createFileUploader = (options?: UploadFileOptions) =>
         }
 
         // build fragments
-        const fileFragments = buildFragments(res);
+        const fileFragments = buildFragments(res, blockType);
 
         // remove loader
         removeLoader();
@@ -138,14 +142,14 @@ export const createFileUploader = (options?: UploadFileOptions) =>
 
 export const useFilesUploader = (editor: PlateEditor) => {
     return useCallback(
-        (files: File[], overriddenAction?: UploadType): Promise<void> => {
+        (files: File[], blockType?: UploadType): Promise<void> => {
             const callback = getPlugin<FileUploaderOptions>(editor, UPLOAD_PLUGIN_KEY)?.options.uploadFiles;
 
             if (callback) {
                 return callback(
                     editor,
                     files,
-                    overriddenAction,
+                    blockType,
                 );
             }
 
diff --git a/uui-timeline/package.json b/uui-timeline/package.json
index 6552209c6e..033799d61b 100644
--- a/uui-timeline/package.json
+++ b/uui-timeline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epam/uui-timeline",
-  "version": "5.11.1-alpha.0",
+  "version": "5.11.1-rc.0",
   "author": "EPAM",
   "license": "MIT",
   "main": "index.js",
@@ -11,8 +11,8 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@epam/uui-components": "5.11.1-alpha.0",
-    "@epam/uui-core": "5.11.1-alpha.0",
+    "@epam/uui-components": "5.11.1-rc.0",
+    "@epam/uui-core": "5.11.1-rc.0",
     "@types/lodash.sortedindex": "^4.1.9",
     "classnames": "^2.2.6",
     "lodash.sortedindex": "^4.1.0"
diff --git a/uui-timeline/src/TimelineScale.module.scss b/uui-timeline/src/TimelineScale.module.scss
index ddbe91c54d..c04d714ce9 100644
--- a/uui-timeline/src/TimelineScale.module.scss
+++ b/uui-timeline/src/TimelineScale.module.scss
@@ -5,7 +5,6 @@ canvas {
 
 .timelineHeader {
     position: relative;
-    height: 61px;
     background-color: #FFF;
     border-top: 1px solid #EEE; // temp
 }
@@ -23,11 +22,9 @@ canvas {
 .arrow {
     display: inline-block;
     width: 36px;
-    height: 60px;
     position: absolute;
     text-align: center;
     vertical-align: middle;
-    line-height: 60px;
     margin: auto;
     color: rgba(102, 102, 102, 0.7);
     cursor: pointer;
diff --git a/uui-timeline/src/TimelineScale.tsx b/uui-timeline/src/TimelineScale.tsx
index 8a949836ff..8c59fcd5ea 100644
--- a/uui-timeline/src/TimelineScale.tsx
+++ b/uui-timeline/src/TimelineScale.tsx
@@ -180,7 +180,8 @@ export function TimelineScale({
     ...props
 }: TimelineScaleProps) {
     const [isMouseDown, setIsMouseDown] = useState(false);
-    
+    const canvasHeight = props.canvasHeight ?? 60;
+
     const handleWindowMouseUp = useCallback(() => {
         if (isMouseDown) {
             setIsMouseDown(false);
@@ -211,6 +212,10 @@ export function TimelineScale({
         return (
             <div
                 className={ cx(styles.arrow, direction == 'left' ? styles.arrowLeft : styles.arrowRight) }
+                style={ {
+                    height: `${canvasHeight}px`,
+                    lineHeight: `${canvasHeight}px`,
+                } }
                 onClick={ handleClick }
             >
                 {(props.renderArrowIcon ?? renderArrowIcon)(direction)}
@@ -219,7 +224,6 @@ export function TimelineScale({
     };
 
     const draw = (context: CanvasRenderingContext2D, t: TimelineTransform) => {
-        const canvasHeight = 60;
         context.clearRect(0, 0, t.widthMs, canvasHeight);
 
         const fonts = { currentPeriodFont, periodFont, meridiemFont };
@@ -227,8 +231,8 @@ export function TimelineScale({
             context,
             timelineTransform: t,
             periodTextColor,
-            canvasHeight,
             cellBackgroundColor,
+            canvasHeight,
             ...fonts,
         };
 
@@ -279,7 +283,7 @@ export function TimelineScale({
     }, [handleWindowMouseUp]);
 
     return (
-        <div className={ styles.timelineHeader } style={ { width: timelineTransform.widthPx } }>
+        <div className={ styles.timelineHeader } style={ { width: timelineTransform.widthPx, height: `${canvasHeight}px` } }>
             {!isMouseDown && (props.renderArrow ?? renderArrow)('left')}
             {!isMouseDown && (props.renderArrow ?? renderArrow)('right')}
             <TimelineCanvas
@@ -287,6 +291,7 @@ export function TimelineScale({
                 onMouseDown={ isDraggable && handleMouseDown }
                 onWheel={ isScaleChangeOnWheel && handleWheel }
                 draw={ props.draw ?? draw }
+                canvasHeight={ canvasHeight }
                 timelineController={ timelineController }
             />
         </div>
diff --git a/uui-timeline/src/draw/scale.ts b/uui-timeline/src/draw/scale.ts
index a4f27e5828..eea791e0aa 100644
--- a/uui-timeline/src/draw/scale.ts
+++ b/uui-timeline/src/draw/scale.ts
@@ -16,6 +16,7 @@ import {
     CanvasDrawWeekendHoursCell,
     CanvasDrawBottomMonthProps,
     CanvasDrawTopMonthProps,
+    CanvasDrawProps,
 } from './types';
 
 const defaultFonts = {
@@ -41,12 +42,9 @@ const defaultWidth = {
     todayLineHeight: 4,
 };
 
-const moveAmount = 0.7;
-const topLineMoveAmount = 0.8;
-
 const isCurrentPeriod = (leftDate: Date, rightDate: Date) => new Date() >= leftDate && new Date() <= rightDate;
 
-const getCanvasVerticalCenter = (canvasHeight: number) => canvasHeight / 2 - 1;
+const getCanvasVerticalCenter = (canvasHeight: number) => canvasHeight / 2;
 const getBottomCellY = (canvasHeight: number) => getCanvasVerticalCenter(canvasHeight);
 const getTopMonth = (month: number) => months[month]?.toUpperCase() ?? '';
 const getBottomMonth = (month: number) => months[month] ?? '';
@@ -130,6 +128,21 @@ const drawPeriod = (
     context.restore();
 };
 
+const calculateTextLine = ({
+    context,
+    text,
+    canvasHeight,
+    line,
+}: CanvasDrawProps & { canvasHeight: number, line: number, text: string }) => {
+    const { actualBoundingBoxAscent, actualBoundingBoxDescent } = context.measureText(text);
+    const headerTextHeight = Math.abs(actualBoundingBoxAscent) + Math.abs(actualBoundingBoxDescent);
+
+    const lineHeight = canvasHeight / 2;
+    const textCenter = lineHeight / 2;
+    const baseTextLine = textCenter + headerTextHeight / 2;
+    return baseTextLine + lineHeight * (line - 1);
+};
+
 const drawPeriodText = ({
     context,
     timelineTransform,
@@ -137,6 +150,7 @@ const drawPeriodText = ({
     x,
     width,
     line,
+    canvasHeight,
     isCurPeriod,
     textColor = defaultColors.periodTextColor,
     superscript,
@@ -148,7 +162,8 @@ const drawPeriodText = ({
     context.fillStyle = textColor;
 
     const padding = 12;
-    const headerTextWidth = context.measureText(text).width;
+    const { width: headerTextWidth } = context.measureText(text);
+
     const textWidth = headerTextWidth + padding * 2;
     const center = x + width / 2;
     let left = center - textWidth / 2;
@@ -175,16 +190,19 @@ const drawPeriodText = ({
         }
     }
 
-    context.fillText(text, left + padding, line * 24);
+    const textLine = calculateTextLine({ context, text, canvasHeight, line });
+
+    context.fillText(text, left + padding, textLine);
 
     if (superscript) {
         context.font = meridiemFont;
-        context.fillText(superscript, left + padding + headerTextWidth + (text.length === 1 ? 3 : 4), line * 24);
+        const superscriptTextLine = calculateTextLine({ context, text: superscript, canvasHeight, line });
+        context.fillText(superscript, left + padding + headerTextWidth + (text.length === 1 ? 3 : 4), superscriptTextLine);
     }
 };
 
-const getBottomLine = (visibility: number) => 2 + (1 - visibility) * moveAmount;
-const getTopLine = (visibility: number) => visibility * topLineMoveAmount;
+const getBottomLine = (visibility: number) => 2 + (1 - visibility) * 1;
+const getTopLine = (visibility: number) => visibility * 1;
 
 const drawMinutes = ({
     context,
@@ -214,6 +232,7 @@ const drawMinutes = ({
             line: getBottomLine(visibility),
             isCurPeriod,
             textColor: periodTextColor,
+            canvasHeight,
             ...restProps,
         });
         drawBottomGridLine({ context, canvasHeight, scaleBar: w, width: cellBorderWidth, color: cellBorderColor });
@@ -333,6 +352,7 @@ const drawRemainingHours = ({
                 isCurPeriod,
                 textColor: periodTextColor,
                 superscript,
+                canvasHeight,
                 ...restProps,
             });
         });
@@ -375,6 +395,7 @@ const drawHours = ({
                 isCurPeriod,
                 textColor: periodTextColor,
                 superscript,
+                canvasHeight,
                 ...restProps,
             });
         });
@@ -427,6 +448,7 @@ const drawTopDays = ({
             line: getTopLine(visibility),
             isCurPeriod,
             textColor,
+            canvasHeight,
             ...restProps,
         });
         (customDrawToday ?? drawToday)({ context, scaleBar: w, todayLineColor, todayLineHeight, canvasHeight });
@@ -471,6 +493,7 @@ const drawDays = ({
             width: w.right - w.left,
             line: getBottomLine(visibility),
             isCurPeriod,
+            canvasHeight,
             ...restProps,
         });
     });
@@ -508,6 +531,7 @@ const drawTopMonths = ({
             line: getTopLine(visibility),
             isCurPeriod,
             textColor: periodTextColor,
+            canvasHeight,
             ...restProps,
         });
     });
@@ -544,6 +568,7 @@ const drawWeeks = ({
             line: getBottomLine(visibility),
             isCurPeriod,
             textColor: periodTextColor,
+            canvasHeight,
             ...restProps,
         });
     });
@@ -578,6 +603,7 @@ const drawBottomMonths = ({
             line: getBottomLine(visibility),
             isCurPeriod,
             textColor: periodTextColor,
+            canvasHeight,
             ...restProps,
         });
         (customDrawToday ?? drawToday)({ context, scaleBar: w, todayLineColor, todayLineHeight, canvasHeight });
@@ -605,8 +631,13 @@ const drawYears = ({
     timelineTransform.getVisibleYears().forEach((w) => {
         const text = w.leftDate.getFullYear().toString().toUpperCase();
         const isCurPeriod = isCurrentPeriod(w.leftDate, w.rightDate);
-        const textMoveAmount = isBottom ? moveAmount : topLineMoveAmount;
-        const line = (visibility + isBottom) * textMoveAmount;
+
+        const bottomAnimationThreshold = 0.4;
+        const bottomTextMoveMount = 0.74;
+        const textMoveAmount = isBottom > bottomAnimationThreshold ? bottomTextMoveMount : 1;
+        let line = (visibility + isBottom) * textMoveAmount;
+        line = isBottom < bottomAnimationThreshold ? Math.min(line, 1) : line;
+
         if (isBottom) {
             const y = canvasHeight;
             timelinePrimitives.drawHorizontalLine({ context, x1: w.left, x2: w.right + 1, y: y - 1, color: cellBorderColor, width: cellBorderWidth });
@@ -631,6 +662,7 @@ const drawYears = ({
             line,
             isCurPeriod,
             textColor: periodTextColor,
+            canvasHeight,
             ...restProps,
         });
     });
diff --git a/uui/components/errors/ErrorPage.module.scss b/uui/components/errors/ErrorPage.module.scss
index fdc912f386..cc997310a4 100644
--- a/uui/components/errors/ErrorPage.module.scss
+++ b/uui/components/errors/ErrorPage.module.scss
@@ -39,6 +39,18 @@
     font-size: 16px;
     color: var(--uui-text-primary);
     max-width: 700px;
+    margin-top: 8px;
+}
+
+:global(.uui-error-support-link) {
+    font-family: var(--uui-font);
+    font-weight: 400;
+    text-align: center;
+    line-height: 24px;
+    font-size: 16px;
+    color: var(--uui-text-primary);
+    max-width: 700px;
+    margin-top: 18px;
 }
 
 @media screen and (max-width: 720px) {
@@ -48,7 +60,6 @@
     }
 
     :global(.uui-error-title) {
-        font-family: var(--uui-font);
         font-weight: 400;
         font-size: 24px;
         line-height: 30px;
@@ -57,12 +68,10 @@
     }
 
     :global(.uui-error-subtitle) {
-        font-family: var(--uui-font);
-        font-weight: 400;
-        text-align: center;
-        line-height: 24px;
-        font-size: 16px;
-        color: var(--uui-text-primary);
+        max-width: 460px;
+    }
+
+    :global(.uui-error-support-link) {
         max-width: 460px;
     }
 }
diff --git a/uui/components/errors/ErrorPage.tsx b/uui/components/errors/ErrorPage.tsx
index 77817b6d7c..0cc93fefc0 100644
--- a/uui/components/errors/ErrorPage.tsx
+++ b/uui/components/errors/ErrorPage.tsx
@@ -9,10 +9,11 @@ export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
 
     return (
         <div className={ cx(css.container, props.cx) }>
-            <div className="uui-error-content">
+            <div className={ cx('uui-error-content', 'uui-typography') }>
                 <img className="uui-error-image" src={ isMobileScreen && props.mobileImageUrl ? props.mobileImageUrl : props.imageUrl } alt="ERROR OCCURRED!" />
                 <div className="uui-error-title">{props.title}</div>
                 <div className="uui-error-subtitle">{props.subtitle}</div>
+                <div className="uui-error-support-link">{props?.supportLink}</div>
             </div>
         </div>
     );
diff --git a/uui/components/errors/config.ts b/uui/components/errors/config.ts
index a42cab87ad..79fca53cd1 100644
--- a/uui/components/errors/config.ts
+++ b/uui/components/errors/config.ts
@@ -26,17 +26,20 @@ export const getErrorPageConfig = () => ({
         mobileImageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-illustrations/L_Error_500_Monochrome.svg',
         title: i18n.errorHandler.errorPageConfig.serverError.title,
         subtitle: i18n.errorHandler.errorPageConfig.serverError.subtitle,
+        supportLink: i18n.errorHandler.supportLink,
     },
     serviceUnavailable: {
         imageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-illustrations/L_Error_503_Monochrome.svg',
         mobileImageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-illustrations/L_Error_503_Monochrome.svg',
         title: i18n.errorHandler.errorPageConfig.serviceUnavailable.title,
         subtitle: i18n.errorHandler.errorPageConfig.serviceUnavailable.subtitle,
+        supportLink: i18n.errorHandler.supportLink,
     },
     default: {
         imageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-illustrations/L_Empty_Monochrome.svg',
         mobileImageUrl: 'https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/error-pages-illustrations/L_Empty_Monochrome.svg',
         title: i18n.errorHandler.errorPageConfig.default.title,
         subtitle: i18n.errorHandler.errorPageConfig.default.subtitle,
+        supportLink: i18n.errorHandler.supportLink,
     },
 });
diff --git a/uui/components/overlays/Alert.module.scss b/uui/components/overlays/Alert.module.scss
index 04312e5fbf..7afef19994 100644
--- a/uui/components/overlays/Alert.module.scss
+++ b/uui/components/overlays/Alert.module.scss
@@ -5,79 +5,90 @@
     --uui-alert-bg: var(--uui-color-10);
     --uui-alert-border: var(--uui-color-50);
     --uui-alert-icon: var(--uui-color-50);
-    --uui-alert-border-radius: var(--uui-border-radius);
-    //
-    background-color: var(--uui-alert-bg);
-    border-left: 6px solid var(--uui-alert-border);
-
-    :global(.uui-text) {
-        color: var(--uui-alert-text);
-    }
 
-    .icon-wrapper {
-        :global(.uui-icon) {
-            fill: var(--uui-alert-icon);
-        }
-    }
-}
+    --uui-alert-min-height: var(--uui-size);
+    --uui-alert-min-width: 170px;
+    --uui-alert-border-radius: var(--uui-border-radius);
+    --uui-alert-border-width: 0px;
+    --uui-alert-indicator-border-width: 6px;
+    --uui-alert-gap-h: 12px;
+    --uui-alert-gap-v: 0px;
+    --uui-alert-padding-h: 18px;
+    --uui-alert-padding-v: 9px;
+    --uui-alert-caption-gap-h: 12px;
+    --uui-alert-icon-size: var(--uui-icon-size);
 
-.alert-wrapper {
+    //
     box-sizing: border-box;
     display: flex;
     align-items: center;
     overflow: hidden;
-    min-width: 170px;
     border-radius: var(--uui-alert-border-radius);
-}
+    background-color: var(--uui-alert-bg);
+    border-width: var(--uui-alert-border-width);
+    border-inline-start: var(--uui-alert-indicator-border-width) solid var(--uui-alert-border);
+    padding-inline-start: calc(var(--uui-alert-padding-h) - var(--uui-alert-indicator-border-width));
+    padding-inline-end: var(--uui-alert-padding-h);
+    padding-top: var(--uui-alert-padding-v);
+    padding-bottom: var(--uui-alert-padding-v);
+    min-height: var(--uui-alert-min-height);
+    min-width: var(--uui-alert-min-width);
 
-.size-48 {
-    padding: 9px 18px 9px 12px;
-    min-height: 48px;
+    .main-path {
+        width: 100%;
+        display: flex;
+        column-gap: var(--uui-alert-gap-h);
+    }
 
-    @include scalable-icon-size(48);
-}
+    .content-wrapper {
+        display: flex;
+        column-gap: var(--uui-alert-caption-gap-h);
+        width: 100%;
+    }
 
-.size-36 {
-    padding: 3px 9px;
-    min-height: 36px;
-    border-left-width: 3px;
+    .content {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        column-gap: var(--uui-alert-gap-h);
+        row-gap: var(--uui-alert-gap-v);
+        width: 100%;
+    }
 
-    @include scalable-icon-size(36);
-}
+    .action-wrapper {
+        display: flex;
+        align-items: center;
+        column-gap: var(--uui-alert-gap-h);
+    }
 
-.icon-wrapper {
-    height: 100%;
-    margin-inline-end: 12px;
-}
+    :global(.uui-text) {
+        color: var(--uui-alert-text);
+    }
 
-.action-wrapper {
-    display: flex;
-    align-items: center;
-}
+    svg {
+        height: var(--uui-alert-icon-size);
+        width: inherit;
+    }
 
-.action-icon {
-    min-height: 30px;
-}
+    .icon-wrapper {
+        height: 100%;
 
-.action-link:not(:last-child) {
-    margin-inline-end: 12px;
-}
+        :global(.uui-icon) {
+            fill: var(--uui-alert-icon);
+        }
+    }
 
-.close-icon {
-    margin-inline-start: 17px;
-    min-height: 30px;
-    min-width: fit-content;
-    align-self: flex-start;
-}
+    .icon {
+        min-height: calc(var(--uui-alert-min-height) - (2 * var(--uui-alert-padding-v)) - (2 * var(--uui-alert-border-width)));
+    }
 
-.main-path {
-    width: 100%;
-    display: flex;
+    .close-icon {
+        min-height: calc(var(--uui-alert-min-height) - (2 * var(--uui-alert-padding-v)) - (2 * var(--uui-alert-border-width)));
+        min-width: fit-content;
+        align-self: flex-start;
+    }
 }
 
-.content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    width: 100%;
-}
+
+
diff --git a/uui/components/overlays/Alert.tsx b/uui/components/overlays/Alert.tsx
index 58e0c3dce9..11fe0e09b8 100644
--- a/uui/components/overlays/Alert.tsx
+++ b/uui/components/overlays/Alert.tsx
@@ -2,12 +2,14 @@ import * as React from 'react';
 import cx from 'classnames';
 import { IHasChildren, IHasCX, Icon, IHasRawProps } from '@epam/uui-core';
 import { IconContainer } from '@epam/uui-components';
-import { IconButton, LinkButton } from '../buttons';
+import { IconButton, LinkButton, LinkButtonProps } from '../buttons';
 import { ReactComponent as SuccessIcon } from '@epam/assets/icons/notification-check-fill.svg';
 import { ReactComponent as WarningIcon } from '@epam/assets/icons/notification-warning-fill.svg';
 import { ReactComponent as ErrorIcon } from '@epam/assets/icons/notification-error-fill.svg';
 import { ReactComponent as HintIcon } from '@epam/assets/icons/notification-info-fill.svg';
 import { ReactComponent as CrossIcon } from '@epam/assets/icons/navigation-close-outline.svg';
+import { settings } from '../../settings';
+
 import css from './Alert.module.scss';
 
 interface AlertNotificationAction {
@@ -51,29 +53,30 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>((props, ref) =
             cx(
                 'uui-alert',
                 css.root,
-                css.alertWrapper,
                 props.color && `uui-color-${props.color}`,
                 props.cx,
-                (props.size === '36' ? css.size36 : css.size48),
+                `uui-size-${props.size || settings.sizes.defaults.alert}`,
             )
         }
         { ...props.rawProps }
     >
         <div className={ css.mainPath }>
-            {props.icon && (
-                <div className={ css.iconWrapper }>
-                    <IconContainer icon={ props.icon } cx={ css.actionIcon } />
-                </div>
-            )}
-            <div className={ css.content }>
-                {props.children}
-                {props.actions && (
-                    <div className={ css.actionWrapper }>
-                        {props.actions.map((action) => (
-                            <LinkButton caption={ action.name } onClick={ action.action } key={ action.name } cx={ css.actionLink } size={ props?.size === '36' ? '24' : '30' } />
-                        ))}
+            <div className={ css.contentWrapper }>
+                {props.icon && (
+                    <div className={ css.iconWrapper }>
+                        <IconContainer icon={ props.icon } cx={ css.icon } />
                     </div>
                 )}
+                <div className={ css.content }>
+                    {props.children}
+                    {props.actions && (
+                        <div className={ css.actionWrapper }>
+                            {props.actions.map((action) => (
+                                <LinkButton caption={ action.name } onClick={ action.action } key={ action.name } cx={ css.actionLink } size={ settings.sizes.alert.action[props.size || settings.sizes.defaults.alert] as LinkButtonProps['size'] } />
+                            ))}
+                        </div>
+                    )}
+                </div>
             </div>
             {props.onClose && <IconButton icon={ CrossIcon } color="neutral" onClick={ props.onClose } cx={ css.closeIcon } />}
         </div>
diff --git a/uui/components/overlays/__tests__/__snapshots__/Alert.test.tsx.snap b/uui/components/overlays/__tests__/__snapshots__/Alert.test.tsx.snap
index 12ebc121ab..2d99899cba 100644
--- a/uui/components/overlays/__tests__/__snapshots__/Alert.test.tsx.snap
+++ b/uui/components/overlays/__tests__/__snapshots__/Alert.test.tsx.snap
@@ -2,42 +2,46 @@
 
 exports[`Alert should render with maximum props 1`] = `
 <div
-  className="uui-alert root alertWrapper uui-color-success size48"
+  className="uui-alert root uui-color-success uui-size-48"
   role="alert"
 >
   <div
     className="mainPath"
   >
     <div
-      className="iconWrapper"
+      className="contentWrapper"
     >
       <div
-        className="container uui-icon uui-enabled actionIcon"
-        style={Object {}}
+        className="iconWrapper"
       >
-        <svg
-          className=""
-        />
+        <div
+          className="container uui-icon uui-enabled icon"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
       </div>
-    </div>
-    <div
-      className="content"
-    >
       <div
-        className="actionWrapper"
+        className="content"
       >
-        <button
-          className="uui-button-box uui-enabled -clickable uui-link_button root uui-size-30 uui-no-left-icon uui-no-right-icon uui-color-primary actionLink"
-          onClick={[Function]}
-          tabIndex={0}
-          type="button"
+        <div
+          className="actionWrapper"
         >
-          <div
-            className="uui-caption uui-link-button-weight-semibold"
+          <button
+            className="uui-button-box uui-enabled -clickable uui-link_button root uui-size-30 uui-no-left-icon uui-no-right-icon uui-color-primary actionLink"
+            onClick={[Function]}
+            tabIndex={0}
+            type="button"
           >
-            ACTION 1
-          </div>
-        </button>
+            <div
+              className="uui-caption uui-link-button-weight-semibold"
+            >
+              ACTION 1
+            </div>
+          </button>
+        </div>
       </div>
     </div>
     <button
@@ -61,123 +65,143 @@ exports[`Alert should render with maximum props 1`] = `
 
 exports[`Alert should render with minimum props 1`] = `
 <div
-  className="uui-alert root alertWrapper uui-color-info size48"
+  className="uui-alert root uui-color-info uui-size-48"
   role="alert"
 >
   <div
     className="mainPath"
   >
     <div
-      className="content"
-    />
+      className="contentWrapper"
+    >
+      <div
+        className="content"
+      />
+    </div>
   </div>
 </div>
 `;
 
 exports[`ErrorAlert should be rendered correctly 1`] = `
 <div
-  className="uui-alert root alertWrapper uui-color-error size48"
+  className="uui-alert root uui-color-error uui-size-48"
   role="alert"
 >
   <div
     className="mainPath"
   >
     <div
-      className="iconWrapper"
+      className="contentWrapper"
     >
       <div
-        className="container uui-icon uui-enabled actionIcon"
-        style={Object {}}
+        className="iconWrapper"
       >
-        <svg
-          className=""
-        />
+        <div
+          className="container uui-icon uui-enabled icon"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
       </div>
+      <div
+        className="content"
+      />
     </div>
-    <div
-      className="content"
-    />
   </div>
 </div>
 `;
 
 exports[`HintAlert should be rendered correctly 1`] = `
 <div
-  className="uui-alert root alertWrapper uui-color-info size48"
+  className="uui-alert root uui-color-info uui-size-48"
   role="alert"
 >
   <div
     className="mainPath"
   >
     <div
-      className="iconWrapper"
+      className="contentWrapper"
     >
       <div
-        className="container uui-icon uui-enabled actionIcon"
-        style={Object {}}
+        className="iconWrapper"
       >
-        <svg
-          className=""
-        />
+        <div
+          className="container uui-icon uui-enabled icon"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
       </div>
+      <div
+        className="content"
+      />
     </div>
-    <div
-      className="content"
-    />
   </div>
 </div>
 `;
 
 exports[`SuccessAlert should be rendered correctly 1`] = `
 <div
-  className="uui-alert root alertWrapper uui-color-success size48"
+  className="uui-alert root uui-color-success uui-size-48"
   role="alert"
 >
   <div
     className="mainPath"
   >
     <div
-      className="iconWrapper"
+      className="contentWrapper"
     >
       <div
-        className="container uui-icon uui-enabled actionIcon"
-        style={Object {}}
+        className="iconWrapper"
       >
-        <svg
-          className=""
-        />
+        <div
+          className="container uui-icon uui-enabled icon"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
       </div>
+      <div
+        className="content"
+      />
     </div>
-    <div
-      className="content"
-    />
   </div>
 </div>
 `;
 
 exports[`WarningAlert should be rendered correctly 1`] = `
 <div
-  className="uui-alert root alertWrapper uui-color-warning size48"
+  className="uui-alert root uui-color-warning uui-size-48"
   role="alert"
 >
   <div
     className="mainPath"
   >
     <div
-      className="iconWrapper"
+      className="contentWrapper"
     >
       <div
-        className="container uui-icon uui-enabled actionIcon"
-        style={Object {}}
+        className="iconWrapper"
       >
-        <svg
-          className=""
-        />
+        <div
+          className="container uui-icon uui-enabled icon"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
       </div>
+      <div
+        className="content"
+      />
     </div>
-    <div
-      className="content"
-    />
   </div>
 </div>
 `;
diff --git a/uui/components/pickers/__tests__/PickerInput.test.tsx b/uui/components/pickers/__tests__/PickerInput.test.tsx
index 1bdf1ff2f1..39bd35a4ad 100644
--- a/uui/components/pickers/__tests__/PickerInput.test.tsx
+++ b/uui/components/pickers/__tests__/PickerInput.test.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { ArrayDataSource, CascadeSelection } from '@epam/uui-core';
+import { ArrayDataSource, CascadeSelection, LazyDataSource } from '@epam/uui-core';
 import {
     renderSnapshotWithContextAsync, setupComponentForTest, screen, within, fireEvent, waitFor, userEvent, PickerInputTestObject, act,
     delayAct,
@@ -1411,25 +1411,20 @@ describe('PickerInput', () => {
         console.error = prevConsoleError;
     });
 
-    it('should render message in body for not enough chars in search while using minCharsToSearch', async () => {
-        const mockEmptyDS = new ArrayDataSource<TestItemType, number, any>({
-            items: [],
+    it('should not load items while search less than minCharsToSearch', async () => {
+        const apiMock = jest.fn().mockResolvedValue([]);
+
+        const mockEmptyDS = new LazyDataSource<TestItemType, number, any>({
+            api: apiMock,
             getId: ({ id }) => id,
         });
 
-        const customText = 'Custom Text or Component';
-
         const { dom } = await setupPickerInputForTest({
             value: undefined,
             selectionMode: 'multi',
             minCharsToSearch: 3,
             searchPosition: 'body',
             dataSource: mockEmptyDS,
-            renderNotFound: () => (
-                <FlexCell grow={ 1 } textAlign="center" rawProps={ { 'data-testid': 'test-custom-not-found' } }>
-                    <Text>{customText}</Text>
-                </FlexCell>
-            ),
             getSearchFields: (item) => [item!.level],
         });
 
@@ -1443,6 +1438,24 @@ describe('PickerInput', () => {
             const notFound = within(await screen.findByRole('dialog'));
             expect(notFound.getByText('Type search to load items')).toBeInTheDocument();
         });
+
+        expect(apiMock).toBeCalledTimes(0);
+
+        const bodyInput = within(dialog).getByPlaceholderText('Search');
+
+        jest.useFakeTimers();
+        fireEvent.change(bodyInput, { target: { value: '1234' } });
+        act(() => {
+            jest.runAllTimers();
+        });
+        jest.useRealTimers();
+
+        await waitFor(async () => {
+            const notFound = within(await screen.findByRole('dialog'));
+            expect(notFound.getByText('No records found')).toBeInTheDocument();
+        });
+
+        expect(apiMock).toBeCalledTimes(1);
     });
 
     it('should render custom renderEmpty', async () => {
diff --git a/uui/components/tables/DataTable.tsx b/uui/components/tables/DataTable.tsx
index 70e91ea85d..4909482a4a 100644
--- a/uui/components/tables/DataTable.tsx
+++ b/uui/components/tables/DataTable.tsx
@@ -4,6 +4,7 @@ import { useColumnsWithFilters } from '../../helpers';
 import {
     ColumnsConfig, DataRowProps, useUuiContext, uuiScrollShadows, useColumnsConfig, IEditable, DataTableState, DataTableColumnsConfigOptions,
     DataSourceListProps, DataColumnProps, cx, TableFiltersConfig, DataTableRowProps, DataTableSelectedCellData, Overwrite,
+    DataColumnGroupProps,
 } from '@epam/uui-core';
 import { DataTableHeaderRow, DataTableHeaderRowProps } from './DataTableHeaderRow';
 import { DataTableRow, DataTableRowProps as UuiDataTableRowProps } from './DataTableRow';
@@ -26,6 +27,9 @@ export interface DataTableProps<TItem, TId, TFilter = any> extends IEditable<Dat
     /** Rows that should be rendered in table */
     rows?: DataRowProps<TItem, TId>[];
 
+    /** Array of all possible column groups for the table */
+    columnGroups?: DataColumnGroupProps[];
+
     /** Array of all possible columns for the table */
     columns: DataColumnProps<TItem, TId>[];
 
@@ -140,6 +144,7 @@ export function DataTable<TItem, TId>(props: React.PropsWithChildren<DataTablePr
                 <div className={ css.stickyHeader } ref={ headerRef }>
                     <DataTableHeaderRow
                         columns={ columns }
+                        columnGroups={ props.columnGroups }
                         onConfigButtonClick={ props.showColumnsConfig && onConfigurationButtonClick }
                         selectAll={ props.selectAll }
                         size={ props.headerSize || settings.sizes.dataTable.header.row.default as DataTableHeaderRowProps['size'] }
diff --git a/uui/components/tables/DataTableHeaderCell.module.scss b/uui/components/tables/DataTableHeaderCell.module.scss
index 5c522106de..19643394c9 100644
--- a/uui/components/tables/DataTableHeaderCell.module.scss
+++ b/uui/components/tables/DataTableHeaderCell.module.scss
@@ -13,6 +13,7 @@
     --uui-dt-header-cell-height: var(--uui-size);
     --uui-dt-header-cell-caption-column-gap: 3px;
     --uui-dt-header-cell-truncate-caption-line-height: 18px;
+    --uui-dt-header-cell-border: transparent;
     //
     color: var(--uui-text-primary);
     align-items: center;
@@ -20,7 +21,8 @@
     padding-inline-end: var(--uui-dt-header-cell-padding-end);
     width: 0;
     background-clip: padding-box;
-    height: var(--uui-dt-header-cell-height);
+    min-height: var(--uui-dt-header-cell-height);
+    border-color: var(--uui-dt-header-cell-border);
 
     .caption-wrapper {
         column-gap: var(--uui-dt-header-cell-caption-column-gap);
@@ -38,7 +40,7 @@
 
         &:hover {
             background: var(--uui-dt-row-bg-hover);
-            box-shadow: inset 1px 0 0 var(--uui-dt-border), inset -1px 0 0 var(--uui-dt-border);
+            border-color: var(--uui-dt-border);
         }
 
         &:hover:not(:has(:global(.-clickable):hover)) {
@@ -50,7 +52,7 @@
 
     &.resizable {
         &:hover {
-            box-shadow: inset 1px 0 0 var(--uui-dt-border), inset -1px 0 0 var(--uui-dt-border);
+            border-color: var(--uui-dt-border);
         }
     }
 
diff --git a/uui/components/tables/DataTableHeaderGroupCell.module.scss b/uui/components/tables/DataTableHeaderGroupCell.module.scss
new file mode 100644
index 0000000000..496a21e7ab
--- /dev/null
+++ b/uui/components/tables/DataTableHeaderGroupCell.module.scss
@@ -0,0 +1,95 @@
+@use '../../assets/styles/index' as *;
+
+// !!! For these variables the values are set inline
+// --uui-dt-header-group-cell-icon-size,
+// --uui-dt-header-group-cell-padding-start,
+// --uui-dt-header-group-cell-padding-end,
+
+.root {
+    --uui-dt-header-group-cell-font: var(--uui-font);
+    --uui-dt-header-group-cell-font-weight: 600;
+    --uui-dt-header-group-cell-line-height: 30px;
+    --uui-dt-header-group-cell-height: var(--uui-size);
+    --uui-dt-header-group-cell-caption-column-gap: 3px;
+    --uui-dt-header-group-cell-truncate-caption-line-height: 18px;
+    color: var(--uui-text-primary);
+    align-items: center;
+    padding-inline-start: var(--uui-dt-header-group-cell-padding-start);
+    padding-inline-end: var(--uui-dt-header-group-cell-padding-end);
+    align-self: stretch;
+    background-clip: padding-box;
+    min-height: var(--uui-dt-header-group-cell-height);
+    border-bottom: 1px solid;
+    border-color: var(--uui-dt-border);
+
+    .caption-wrapper {
+        column-gap: var(--uui-dt-header-group-cell-caption-column-gap);
+    }
+
+    .caption-wrapper {
+        display: flex;
+        overflow: hidden;
+        flex: 1 1 0;
+        min-width: 0;
+
+        &.align-center {
+            justify-content: center;
+        }
+    }
+
+    .caption {
+        --uui-text-line-height: var(--uui-dt-header-group-cell-line-height);
+        font-family: var(--uui-dt-header-group-cell-font);
+        font-weight: var(--uui-dt-header-group-cell-font-weight);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin: 0; //????
+
+        &.truncate {
+            /* stylelint-disable */
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            /* stylelint-enable */
+            overflow: hidden;
+            white-space: normal;
+            line-height: var(--uui-dt-header-group-cell-truncate-caption-line-height);
+        }
+    }
+
+    .group-cell-tooltip {
+        top: 0;
+    }
+
+    .upper-case {
+        text-transform: uppercase;
+    }
+}
+
+.group-cell-tooltip-wrapper {
+    --uui-dt-header-group-cell-tooltip-caption-font-size: 14px;
+    --uui-dt-header-group-cell-tooltip-caption-font-weight: 600;
+    --uui-dt-header-group-cell-tooltip-info-font-size: 12px;
+    --uui-dt-header-group-cell-tooltip-info-font-weight: 400;
+    //
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    row-gap: var(--uui-vertical-gap);
+
+    .group-cell-tooltip-text {
+        color: var(--uui-tooltip-text);
+        padding: 0;
+    }
+
+    .tooltip-caption {
+        font-size: var(--uui-dt-header-group-cell-tooltip-caption-font-size);
+        font-weight: var(--uui-dt-header-group-cell-tooltip-caption-font-weight);
+    }
+
+    .tooltip-info {
+        font-size: var(--uui-dt-header-group-cell-tooltip-info-font-size);
+        font-weight: var(--uui-dt-header-group-cell-tooltip-info-font-weight);
+    }
+}
diff --git a/uui/components/tables/DataTableHeaderGroupCell.tsx b/uui/components/tables/DataTableHeaderGroupCell.tsx
new file mode 100644
index 0000000000..8c8078fec8
--- /dev/null
+++ b/uui/components/tables/DataTableHeaderGroupCell.tsx
@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { cx, DataColumnGroupProps, DataTableHeaderGroupCellProps, Overwrite, uuiDataTableHeaderGroupCell } from '@epam/uui-core';
+import { DataTableCellContainer, HeaderCellContentProps } from '@epam/uui-components';
+import { DataTableHeaderCellMods } from './types';
+import { Tooltip } from '../overlays';
+import { Text, TextProps } from '../typography';
+import { settings } from '../../settings';
+
+import './variables.scss';
+import css from './DataTableHeaderGroupCell.module.scss';
+
+export interface DataTableHeaderGroupCellModsOverride {
+}
+
+export class DataTableHeaderGroupCell extends
+    React.Component<
+    DataTableHeaderGroupCellProps & Overwrite<DataTableHeaderCellMods,
+    DataTableHeaderGroupCellModsOverride>
+    > {
+    getTooltipContent = (column: DataColumnGroupProps) => (
+        <div className={ cx(css.groupCellTooltipWrapper, uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCaptionTooltip) }>
+            <Text cx={ [css.groupCellTooltipText, css.tooltipCaption] }>
+                { column.caption }
+            </Text>
+            { column.info && (
+                <Text cx={ [css.groupCellTooltipText, css.tooltipInfo] }>
+                    { column.info }
+                </Text>
+            ) }
+        </div>
+    );
+
+    getColumnCaption = () => {
+        const renderTooltip = this.props.group.renderTooltip || this.getTooltipContent;
+        const captionCx = [
+            css.caption,
+            this.props.textCase === 'upper' && css.upperCase,
+            uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCaption,
+            settings.sizes.dataTable.header.row.groupCell.truncate.includes(this.props.size) && css.truncate,
+        ];
+
+        return (
+            <div
+                className={ cx(css.captionWrapper, css['align-' + this.props.group.textAlign], uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCaptionWrapper) }
+            >
+                <Tooltip
+                    placement="top"
+                    color="inverted"
+                    content={ renderTooltip(this.props.group) }
+                    cx={ css.groupCellTooltip }
+                    openDelay={ 600 }
+                >
+                    <Text
+                        key="text"
+                        fontSize={ settings.sizes.dataTable.header.row.groupCell.columnCaption[this.props.textCase === 'upper' ? 'uppercase' : 'fontSize'] as TextProps['fontSize'] }
+                        size={ settings.sizes.dataTable.header.row.groupCell.columnCaption.size as TextProps['size'] }
+                        cx={ captionCx }
+                    >
+                        { this.props.group.caption }
+                    </Text>
+                </Tooltip>
+            </div>
+        );
+    };
+
+    getLeftPadding = () => {
+        const { columnsGap, isFirstCell } = this.props;
+
+        if (columnsGap) return isFirstCell ? columnsGap : +columnsGap / 2;
+        return isFirstCell ? settings.sizes.dataTable.header.row.groupCell.defaults.paddingEdge : settings.sizes.dataTable.header.row.groupCell.defaults.padding;
+    };
+
+    getRightPadding = () => {
+        const { columnsGap, isLastCell } = this.props;
+
+        if (columnsGap) return isLastCell ? columnsGap : +columnsGap / 2;
+        return isLastCell ? settings.sizes.dataTable.header.row.groupCell.defaults.paddingEdge : settings.sizes.dataTable.header.row.groupCell.defaults.padding;
+    };
+
+    renderCellContent = (props: HeaderCellContentProps) => {
+        const computeStyles = {
+            '--uui-dt-header-group-cell-padding-start': `${this.getLeftPadding()}px`,
+            '--uui-dt-header-group-cell-padding-end': `${this.getRightPadding()}px`,
+        } as React.CSSProperties;
+
+        return (
+            <DataTableCellContainer
+                column={ this.props.group }
+                ref={ (ref) => {
+                    (props.ref as React.RefCallback<HTMLElement>)(ref);
+                } }
+                cx={ cx(
+                    uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCell,
+                    css.root,
+                    `uui-size-${this.props.size || settings.sizes.dataTable.header.row.groupCell.defaults.size}`,
+                    this.props.isFirstCell && 'uui-dt-header-first-column',
+                    this.props.isLastCell && 'uui-dt-header-last-column',
+                ) }
+                rawProps={ {
+                    role: 'columnheader',
+                    ...props.eventHandlers,
+                } }
+                style={ computeStyles }
+            >
+                { this.getColumnCaption() }
+            </DataTableCellContainer>
+        );
+    };
+
+    render() {
+        if (this.props.group.renderHeaderCell) {
+            return this.props.group.renderHeaderCell(this.props);
+        }
+
+        const computeStyles = {
+            '--uui-dt-header-group-cell-padding-start': `${this.getLeftPadding()}px`,
+            '--uui-dt-header-group-cell-padding-end': `${this.getRightPadding()}px`,
+        } as React.CSSProperties;
+
+        return (
+            <DataTableCellContainer
+                column={ this.props.group }
+                cx={ cx(
+                    uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCell,
+                    css.root,
+                    `uui-size-${this.props.size || settings.sizes.dataTable.header.row.groupCell.defaults.size}`,
+                    this.props.isFirstCell && 'uui-dt-header-first-column',
+                    this.props.isLastCell && 'uui-dt-header-last-column',
+                ) }
+                rawProps={ { role: 'columnheader' } }
+                style={ computeStyles }
+            >
+                { this.getColumnCaption() }
+            </DataTableCellContainer>
+        );
+    }
+}
diff --git a/uui/components/tables/DataTableHeaderRow.module.scss b/uui/components/tables/DataTableHeaderRow.module.scss
index da12d29626..f1f56a0d9b 100644
--- a/uui/components/tables/DataTableHeaderRow.module.scss
+++ b/uui/components/tables/DataTableHeaderRow.module.scss
@@ -2,6 +2,11 @@
 
 .root {
     --uui-dt-header-row-config-icon-padding: 24px;
+
+
+    :global(.uui-table-column-group-wrapper) :global(.uui-table-header-cell) {
+        --uui-dt-header-cell-border: var(--uui-dt-border);
+    }
 }
 
 :global(.config-icon) {
diff --git a/uui/components/tables/DataTableHeaderRow.tsx b/uui/components/tables/DataTableHeaderRow.tsx
index e7afd97939..e842bf748a 100644
--- a/uui/components/tables/DataTableHeaderRow.tsx
+++ b/uui/components/tables/DataTableHeaderRow.tsx
@@ -9,6 +9,7 @@ import { settings } from '../../settings';
 
 import './variables.scss';
 import css from './DataTableHeaderRow.module.scss';
+import { DataTableHeaderGroupCell } from './DataTableHeaderGroupCell';
 
 export type DataTableHeaderRowProps = CoreDataTableHeaderRowProps & DataTableHeaderRowMods;
 export const DataTableHeaderRow = withMods<CoreDataTableHeaderRowProps, DataTableHeaderRowProps>(
@@ -24,6 +25,15 @@ export const DataTableHeaderRow = withMods<CoreDataTableHeaderRowProps, DataTabl
                 columnsGap={ mods.columnsGap }
             />
         ),
+        renderGroupCell: (props) => (
+            <DataTableHeaderGroupCell
+                { ...props }
+                size={ mods.size }
+                textCase={ mods.textCase || 'normal' }
+                key={ props.key }
+                columnsGap={ mods.columnsGap }
+            />
+        ),
         renderConfigButton: () => (
             <IconButton
                 key="configuration"
diff --git a/uui/i18n.ts b/uui/i18n.ts
index 41aa077381..9930d7d835 100644
--- a/uui/i18n.ts
+++ b/uui/i18n.ts
@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { i18n as uuiI18n } from '@epam/uui-core';
 
 const TREE_SHAKEABLE_INIT = () => ({
@@ -153,6 +154,7 @@ const TREE_SHAKEABLE_INIT = () => ({
                 subtitle: 'We are trying to recover. Please wait.',
             },
         },
+        supportLink: undefined as ReactNode,
     },
 });
 
diff --git a/uui/package.json b/uui/package.json
index 003bd5c186..5fda3cfaff 100644
--- a/uui/package.json
+++ b/uui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epam/uui",
-  "version": "5.11.1-alpha.0",
+  "version": "5.11.1-rc.0",
   "description": "EPAM UUI components set",
   "author": "EPAM",
   "license": "MIT",
@@ -12,9 +12,9 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@epam/assets": "5.11.1-alpha.0",
-    "@epam/uui-components": "5.11.1-alpha.0",
-    "@epam/uui-core": "5.11.1-alpha.0",
+    "@epam/assets": "5.11.1-rc.0",
+    "@epam/uui-components": "5.11.1-rc.0",
+    "@epam/uui-core": "5.11.1-rc.0",
     "@popperjs/core": "2.9.0",
     "classnames": "2.2.6",
     "dayjs": "1.11.12",
@@ -22,7 +22,6 @@
     "react-popper": "2.3.0"
   },
   "peerDependencies": {
-    "prop-types": "*",
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0"
   },
diff --git a/uui/settings.ts b/uui/settings.ts
index c54a314bf3..c5df674c86 100644
--- a/uui/settings.ts
+++ b/uui/settings.ts
@@ -3,6 +3,7 @@ import type { Settings } from './settings.types';
 export const settings: Settings = {
     sizes: {
         defaults: {
+            alert: '48',
             badge: '36',
             button: '36',
             checkbox: '18',
@@ -23,6 +24,12 @@ export const settings: Settings = {
             paginator: '30',
             rating: '18',
         },
+        alert: {
+            action: {
+                36: '24',
+                48: '30',
+            },
+        },
         tag: {
             countIndicator: {
                 18: '12',
@@ -234,6 +241,25 @@ export const settings: Settings = {
                         },
                         truncate: ['48'],
                     },
+                    groupCell: {
+                        defaults: {
+                            size: '36',
+                            padding: '12',
+                            paddingEdge: '24',
+                        },
+                        columnCaption: {
+                            fontSize: '14',
+                            fontWeight: '400',
+                            size: '18',
+                            uppercase: '12',
+                        },
+                        iconSize: {
+                            36: '18',
+                            48: '18',
+                            60: '18',
+                        },
+                        truncate: ['48'],
+                    },
                 },
             },
             body: {
diff --git a/uui/settings.types.ts b/uui/settings.types.ts
index 431213abec..da532ad388 100644
--- a/uui/settings.types.ts
+++ b/uui/settings.types.ts
@@ -1,4 +1,5 @@
 interface DefaultSizes {
+    alert: string;
     badge: string;
     button: string;
     checkbox: string;
@@ -35,6 +36,10 @@ interface UppercaseTextSize {
     uppercase: string;
 }
 
+interface AlertSizes {
+    action: Sizes;
+}
+
 interface TagSizes {
     countIndicator: Sizes;
 }
@@ -155,6 +160,19 @@ interface DataTableHeaderCellSizes {
     truncate?: string[];
 }
 
+interface DataTableHeaderGroupCellDefaults {
+    size: string;
+    padding: string;
+    paddingEdge: string;
+}
+
+interface DataTableHeaderGroupCellSizes {
+    defaults: DataTableHeaderGroupCellDefaults;
+    columnCaption: TextSize & UppercaseTextSize;
+    iconSize: Sizes;
+    truncate?: string[];
+}
+
 interface DataTableHeaderCellDefaults {
     size: string;
     resizeMarker: string;
@@ -196,6 +214,7 @@ interface FiltersPanelSizes {
 interface DataTableHeaderRowSizes {
     default: string;
     cell: DataTableHeaderCellSizes;
+    groupCell: DataTableHeaderGroupCellSizes;
 }
 
 interface DataTableHeaderSizes {
@@ -235,6 +254,7 @@ interface ModalSizes {
 
 interface SizesSettings {
     defaults: DefaultSizes;
+    alert: AlertSizes;
     tag: TagSizes;
     pickerInput: PickerInputSizes;
     rowAddons: RowAddonsSizes;
diff --git a/yarn.lock b/yarn.lock
index cdffbfc8e7..5506633ddd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3124,80 +3124,85 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
-"@rollup/rollup-android-arm-eabi@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.2.tgz#9047b5b1ec19f58c0fdf3a072bd977bcec056576"
-  integrity sha512-ahxSgCkAEk+P/AVO0vYr7DxOD3CwAQrT0Go9BJyGQ9Ef0QxVOfjDZMiF4Y2s3mLyPrjonchIMH/tbWHucJMykQ==
-
-"@rollup/rollup-android-arm64@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.2.tgz#08a2d2705193ebb3054941994e152808beb5254e"
-  integrity sha512-lAarIdxZWbFSHFSDao9+I/F5jDaKyCqAPMq5HqnfpBw8dKDiCaaqM0lq5h1pQTLeIqueeay4PieGR5jGZMWprw==
-
-"@rollup/rollup-darwin-arm64@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.2.tgz#bf746c610f337b104408ec001549d825a91eca57"
-  integrity sha512-SWsr8zEUk82KSqquIMgZEg2GE5mCSfr9sE/thDROkX6pb3QQWPp8Vw8zOq2GyxZ2t0XoSIUlvHDkrf5Gmf7x3Q==
-
-"@rollup/rollup-darwin-x64@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.2.tgz#59ebe3b858a44680d5f87546ea2df1c7e3135f6a"
-  integrity sha512-o/HAIrQq0jIxJAhgtIvV5FWviYK4WB0WwV91SLUnsliw1lSAoLsmgEEgRWzDguAFeUEUUoIWXiJrPqU7vGiVkA==
-
-"@rollup/rollup-linux-arm-gnueabihf@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.2.tgz#44cffc07d04d659cb635aec11bef530d5757ee6a"
-  integrity sha512-nwlJ65UY9eGq91cBi6VyDfArUJSKOYt5dJQBq8xyLhvS23qO+4Nr/RreibFHjP6t+5ap2ohZrUJcHv5zk5ju/g==
-
-"@rollup/rollup-linux-arm64-gnu@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.2.tgz#9901e2288fb192b74a2f8428c507d43cc2739ceb"
-  integrity sha512-Pg5TxxO2IVlMj79+c/9G0LREC9SY3HM+pfAwX7zj5/cAuwrbfj2Wv9JbMHIdPCfQpYsI4g9mE+2Bw/3aeSs2rQ==
-
-"@rollup/rollup-linux-arm64-musl@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.2.tgz#8a2c55a72e0c716a15d830fee3bf5a1a756f13ec"
-  integrity sha512-cAOTjGNm84gc6tS02D1EXtG7tDRsVSDTBVXOLbj31DkwfZwgTPYZ6aafSU7rD/4R2a34JOwlF9fQayuTSkoclA==
-
-"@rollup/rollup-linux-powerpc64le-gnu@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.2.tgz#71bf99c8017476ac85b09d21b3fa2eacbad96100"
-  integrity sha512-4RyT6v1kXb7C0fn6zV33rvaX05P0zHoNzaXI/5oFHklfKm602j+N4mn2YvoezQViRLPnxP8M1NaY4s/5kXO5cw==
-
-"@rollup/rollup-linux-riscv64-gnu@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.2.tgz#48ee7fe5fee7b6d0028b6dda4fab95238208a0cd"
-  integrity sha512-KNUH6jC/vRGAKSorySTyc/yRYlCwN/5pnMjXylfBniwtJx5O7X17KG/0efj8XM3TZU7raYRXJFFReOzNmL1n1w==
-
-"@rollup/rollup-linux-s390x-gnu@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.2.tgz#65ad6f82729ef9d8634847189214e3205892f42f"
-  integrity sha512-xPV4y73IBEXToNPa3h5lbgXOi/v0NcvKxU0xejiFw6DtIYQqOTMhZ2DN18/HrrP0PmiL3rGtRG9gz1QE8vFKXQ==
-
-"@rollup/rollup-linux-x64-gnu@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.2.tgz#2ab802ce25c0d0d44a0ea55b0068f79e462d22cd"
-  integrity sha512-QBhtr07iFGmF9egrPOWyO5wciwgtzKkYPNLVCFZTmr4TWmY0oY2Dm/bmhHjKRwZoGiaKdNcKhFtUMBKvlchH+Q==
-
-"@rollup/rollup-linux-x64-musl@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.2.tgz#85dcd3f549c2fdbcf1cb1f1b5f501933ed590880"
-  integrity sha512-8zfsQRQGH23O6qazZSFY5jP5gt4cFvRuKTpuBsC1ZnSWxV8ZKQpPqOZIUtdfMOugCcBvFGRa1pDC/tkf19EgBw==
-
-"@rollup/rollup-win32-arm64-msvc@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.2.tgz#10f608dfc1e5bb96aca18c7784cc4a94d890c03c"
-  integrity sha512-H4s8UjgkPnlChl6JF5empNvFHp77Jx+Wfy2EtmYPe9G22XV+PMuCinZVHurNe8ggtwoaohxARJZbaH/3xjB/FA==
-
-"@rollup/rollup-win32-ia32-msvc@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.2.tgz#f27f9fb64b7e10b04121e0054d9145ee21589267"
-  integrity sha512-djqpAjm/i8erWYF0K6UY4kRO3X5+T4TypIqw60Q8MTqSBaQNpNXDhxdjpZ3ikgb+wn99svA7jxcXpiyg9MUsdw==
-
-"@rollup/rollup-win32-x64-msvc@4.14.2":
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.2.tgz#5d2d9dc96b436469dc74ef93de069b14fb12aace"
-  integrity sha512-teAqzLT0yTYZa8ZP7zhFKEx4cotS8Tkk5XiqNMJhD4CpaWB1BHARE4Qy+RzwnXvSAYv+Q3jAqCVBS+PS+Yee8Q==
+"@rollup/rollup-android-arm-eabi@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz#8b613b9725e8f9479d142970b106b6ae878610d5"
+  integrity sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==
+
+"@rollup/rollup-android-arm64@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.4.tgz#654ca1049189132ff602bfcf8df14c18da1f15fb"
+  integrity sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA==
+
+"@rollup/rollup-darwin-arm64@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.4.tgz#6d241d099d1518ef0c2205d96b3fa52e0fe1954b"
+  integrity sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q==
+
+"@rollup/rollup-darwin-x64@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.4.tgz#42bd19d292a57ee11734c980c4650de26b457791"
+  integrity sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.4.tgz#f23555ee3d8fe941c5c5fd458cd22b65eb1c2232"
+  integrity sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ==
+
+"@rollup/rollup-linux-arm-musleabihf@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.4.tgz#f3bbd1ae2420f5539d40ac1fde2b38da67779baa"
+  integrity sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg==
+
+"@rollup/rollup-linux-arm64-gnu@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.4.tgz#7abe900120113e08a1f90afb84c7c28774054d15"
+  integrity sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw==
+
+"@rollup/rollup-linux-arm64-musl@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.4.tgz#9e655285c8175cd44f57d6a1e8e5dedfbba1d820"
+  integrity sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA==
+
+"@rollup/rollup-linux-powerpc64le-gnu@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.4.tgz#9a79ae6c9e9d8fe83d49e2712ecf4302db5bef5e"
+  integrity sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg==
+
+"@rollup/rollup-linux-riscv64-gnu@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.4.tgz#67ac70eca4ace8e2942fabca95164e8874ab8128"
+  integrity sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA==
+
+"@rollup/rollup-linux-s390x-gnu@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.4.tgz#9f883a7440f51a22ed7f99e1d070bd84ea5005fc"
+  integrity sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q==
+
+"@rollup/rollup-linux-x64-gnu@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.4.tgz#70116ae6c577fe367f58559e2cffb5641a1dd9d0"
+  integrity sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg==
+
+"@rollup/rollup-linux-x64-musl@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.4.tgz#f473f88219feb07b0b98b53a7923be716d1d182f"
+  integrity sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g==
+
+"@rollup/rollup-win32-arm64-msvc@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.4.tgz#4349482d17f5d1c58604d1c8900540d676f420e0"
+  integrity sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw==
+
+"@rollup/rollup-win32-ia32-msvc@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.4.tgz#a6fc39a15db618040ec3c2a24c1e26cb5f4d7422"
+  integrity sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g==
+
+"@rollup/rollup-win32-x64-msvc@4.22.4":
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.4.tgz#3dd5d53e900df2a40841882c02e56f866c04d202"
+  integrity sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q==
 
 "@rushstack/eslint-patch@^1.1.0":
   version "1.10.2"
@@ -14403,15 +14408,6 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@15.7.2:
-  version "15.7.2"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
-  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
-  dependencies:
-    loose-envify "^1.4.0"
-    object-assign "^4.1.1"
-    react-is "^16.8.1"
-
 prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
@@ -14701,7 +14697,7 @@ react-imask@6.0.7:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-is@^16.13.1, react-is@^16.8.1:
+react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -15413,28 +15409,29 @@ rollup-pluginutils@^2.8.2:
   dependencies:
     estree-walker "^0.6.1"
 
-rollup@4.14.2:
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.14.2.tgz#992df3c3bb4ca84ce6b00d51aacb1e5a62d0a14c"
-  integrity sha512-WkeoTWvuBoFjFAhsEOHKRoZ3r9GfTyhh7Vff1zwebEFLEFjT1lG3784xEgKiTa7E+e70vsC81roVL2MP4tgEEQ==
+rollup@4.22.4:
+  version "4.22.4"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.22.4.tgz#4135a6446671cd2a2453e1ad42a45d5973ec3a0f"
+  integrity sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==
   dependencies:
     "@types/estree" "1.0.5"
   optionalDependencies:
-    "@rollup/rollup-android-arm-eabi" "4.14.2"
-    "@rollup/rollup-android-arm64" "4.14.2"
-    "@rollup/rollup-darwin-arm64" "4.14.2"
-    "@rollup/rollup-darwin-x64" "4.14.2"
-    "@rollup/rollup-linux-arm-gnueabihf" "4.14.2"
-    "@rollup/rollup-linux-arm64-gnu" "4.14.2"
-    "@rollup/rollup-linux-arm64-musl" "4.14.2"
-    "@rollup/rollup-linux-powerpc64le-gnu" "4.14.2"
-    "@rollup/rollup-linux-riscv64-gnu" "4.14.2"
-    "@rollup/rollup-linux-s390x-gnu" "4.14.2"
-    "@rollup/rollup-linux-x64-gnu" "4.14.2"
-    "@rollup/rollup-linux-x64-musl" "4.14.2"
-    "@rollup/rollup-win32-arm64-msvc" "4.14.2"
-    "@rollup/rollup-win32-ia32-msvc" "4.14.2"
-    "@rollup/rollup-win32-x64-msvc" "4.14.2"
+    "@rollup/rollup-android-arm-eabi" "4.22.4"
+    "@rollup/rollup-android-arm64" "4.22.4"
+    "@rollup/rollup-darwin-arm64" "4.22.4"
+    "@rollup/rollup-darwin-x64" "4.22.4"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.22.4"
+    "@rollup/rollup-linux-arm-musleabihf" "4.22.4"
+    "@rollup/rollup-linux-arm64-gnu" "4.22.4"
+    "@rollup/rollup-linux-arm64-musl" "4.22.4"
+    "@rollup/rollup-linux-powerpc64le-gnu" "4.22.4"
+    "@rollup/rollup-linux-riscv64-gnu" "4.22.4"
+    "@rollup/rollup-linux-s390x-gnu" "4.22.4"
+    "@rollup/rollup-linux-x64-gnu" "4.22.4"
+    "@rollup/rollup-linux-x64-musl" "4.22.4"
+    "@rollup/rollup-win32-arm64-msvc" "4.22.4"
+    "@rollup/rollup-win32-ia32-msvc" "4.22.4"
+    "@rollup/rollup-win32-x64-msvc" "4.22.4"
     fsevents "~2.3.2"
 
 rollup@^2.43.1: