@epam/uui 5.2.0-rc.3 → 5.3.0-rc.0

package/index.esm.js

@@ -1,12 +1,13 @@
-import { Button as Button$1, IconButton as IconButton$1, Checkbox as Checkbox$1, RadioInput as RadioInput$1, Switch as Switch$1, TextInput as TextInput$1, ControlGroup as ControlGroup$1, NumericInput as NumericInput$1, TextArea as TextArea$1, DropdownContainer as DropdownContainer$1, TimePickerBody as TimePickerBody$1, BaseTimePicker, InputAddon as InputAddon$1, Calendar as Calendar$1, DatePickerBodyBase, valueFormat, YearSelection, MonthSelection, i18n as i18n$1, IconContainer, Dropdown as Dropdown$1, Anchor as Anchor$1, FlexRow as FlexRow$1, Text as Text$1, FlexSpacer, FlexCell as FlexCell$1, VPanel, Accordion as Accordion$1, Tooltip as Tooltip$1, LabeledInput as LabeledInput$1, RadioGroup as RadioGroup$1, ScrollBars as ScrollBars$1, VirtualList as VirtualList$1, Spinner as Spinner$1, Blocker as Blocker$1, CheckboxGroup as CheckboxGroup$1, PickerBodyBase, DataTableCell as DataTableCell$1, DragHandle, DataPickerRow as DataPickerRow$1, usePickerModal, handleDataSourceKeyboard, AvatarStack as AvatarStack$1, Paginator as Paginator$1, ProgressBar as ProgressBar$1, PickerToggler as PickerToggler$1, Avatar, usePickerInput, usePickerList, BaseDatePicker, BaseRangeDatePicker, AdaptivePanel, RichTextView as RichTextView$1, ModalBlocker as ModalBlocker$1, ModalWindow as ModalWindow$1, CalendarPresets as CalendarPresets$1, uuiDaySelection, uuiDatePickerBodyBase, DataTableRow as DataTableRow$1, DataTableHeaderCell as DataTableHeaderCell$1, DataTableHeaderRow as DataTableHeaderRow$1, useColumnsConfiguration, DataTableSelectionProvider, Burger as Burger$1, MainMenu as MainMenu$1, UploadFileToggler, DropSpot as DropSpot$1 } from '@epam/uui-components';
-export { Avatar, FlexSpacer, IconContainer } from '@epam/uui-components';
-import { withMods, IEditableDebouncer, devLogger, cx as cx$1, UuiContext, uuiMod, i18n as i18n$2, Lens, isMobile, uuiMarkers, uuiElement, useForceUpdate, getSeparatedValue, useArrayDataSource, getOrderBetween, useUuiContext, arrayToMatrix, mobilePopperModifier, uuiDataTableHeaderCell, DndActor, useColumnsConfig, uuiScrollShadows, Form as Form$1, useForm as useForm$1, formatBytes } from '@epam/uui-core';
 import * as React from 'react';
 import React__default, { forwardRef, useContext, useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import * as uuiComponents from '@epam/uui-components';
+import { AvatarStack as AvatarStack$1, Button as Button$1, Spinner as Spinner$1, Paginator as Paginator$1, ProgressBar as ProgressBar$1, IconButton as IconButton$1, RadioInput as RadioInput$1, TextInput as TextInput$1, ControlGroup as ControlGroup$1, NumericInput as NumericInput$1, TextArea as TextArea$1, TimePickerBody as TimePickerBody$1, BaseTimePicker, InputAddon as InputAddon$1, Slider as Slider$1, Calendar as Calendar$1, DatePickerBodyBase, valueFormat, YearSelection, MonthSelection, i18n as i18n$1, IconContainer, Dropdown as Dropdown$1, Anchor as Anchor$1, FlexRow as FlexRow$1, Text as Text$1, FlexSpacer, FlexCell as FlexCell$1, VPanel, Tooltip as Tooltip$1, RadioGroup as RadioGroup$1, ScrollBars as ScrollBars$1, Blocker as Blocker$1, CheckboxGroup as CheckboxGroup$1, PickerBodyBase, DataTableCell as DataTableCell$1, DragHandle, DataPickerRow as DataPickerRow$1, usePickerModal, handleDataSourceKeyboard, PickerToggler as PickerToggler$1, Avatar, usePickerInput, usePickerList, BaseDatePicker, BaseRangeDatePicker, AdaptivePanel, ModalBlocker as ModalBlocker$1, ModalWindow as ModalWindow$1, CalendarPresets as CalendarPresets$1, uuiDaySelection, uuiDatePickerBodyBase, DataTableRow as DataTableRow$1, DataTableHeaderCell as DataTableHeaderCell$1, DataTableHeaderRow as DataTableHeaderRow$1, useColumnsConfiguration, DataTableSelectionProvider, Burger as Burger$1, UploadFileToggler, DropSpot as DropSpot$1 } from '@epam/uui-components';
+export { Avatar, FlexSpacer, IconContainer } from '@epam/uui-components';
+import { withMods, devLogger, IEditableDebouncer, cx as cx$1, UuiContext, uuiMod, i18n as i18n$2, useVirtualList, useScrollShadows, uuiMarkers, Lens, isMobile, uuiElement, useForceUpdate, getSeparatedValue, useArrayDataSource, getOrderBetween, useUuiContext, arrayToMatrix, mobilePopperModifier, uuiDataTableHeaderCell, DndActor, useColumnsConfig, uuiScrollShadows, Form as Form$1, useForm as useForm$1, formatBytes } from '@epam/uui-core';
+import cx from 'classnames';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat.js';
 import updateLocale from 'dayjs/plugin/updateLocale.js';
-import cx from 'classnames';
 import localeData from 'dayjs/plugin/localeData';
 import sortBy from 'lodash.sortby';
 import isoWeek from 'dayjs/plugin/isoWeek.js';
@@ -571,37 +572,275 @@ const systemIcons = {
     },
 };
 
-var css$1l = {"root":"_8xDYat","size-18":"CUnR2U","size-24":"n-QNUz","size-30":"WJXZhd","size-36":"GYxQn3","size-42":"JrC7Ne","size-48":"mkEgLj","size18":"CUnR2U","size24":"n-QNUz","size30":"WJXZhd","size36":"GYxQn3","size42":"JrC7Ne","size48":"mkEgLj"};
+var css$1n = {"root":"OGJyAA"};
+
+const AvatarStack = withMods(AvatarStack$1, () => [css$1n.root]);
+
+var css$1m = {"root":"_723x-7","size-24":"_3US0jP","size-18":"uJJpdb","size-12":"-Ym7r-","size24":"_3US0jP","size18":"uJJpdb","size12":"-Ym7r-"};
+
+const CountIndicator = forwardRef((props, ref) => {
+    return (React__default.createElement("div", { ref: ref, className: cx([
+            css$1m.root,
+            'uui-count_indicator',
+            css$1m[`size-${props.size || 24}`],
+            props.color && `uui-color-${props.color}`,
+            props.cx,
+        ]) }, props.caption));
+});
+
+var css$1l = {"uui-typography":"eDMB8n","hero-header":"t3RZR2","promo-header":"id8tKi","uui-critical":"TCe3z-","uui-success":"a8l8aJ","uui-warning":"vxAGrs","uui-typography-size-12":"fLMuYa","uui-typography-size-14":"oLE3Jv","uui-typography-size-16":"P1Vk-O","root":"OcUAEf","size-18":"Y78XaG","size-24":"LgSgbx","size-30":"jLP7uR","size-36":"k7qIOW","size-42":"pNUIOI","size-48":"tNDmp4","uuiTypography":"eDMB8n","heroHeader":"t3RZR2","promoHeader":"id8tKi","uuiCritical":"TCe3z-","uuiSuccess":"a8l8aJ","uuiWarning":"vxAGrs","uuiTypographySize12":"fLMuYa","uuiTypographySize14":"oLE3Jv","uuiTypographySize16":"P1Vk-O","size18":"Y78XaG","size24":"LgSgbx","size30":"jLP7uR","size36":"k7qIOW","size42":"pNUIOI","size48":"tNDmp4"};
+
+const defaultSize$b = '36';
+const mapSize$1 = {
+    48: '48',
+    42: '48',
+    36: '36',
+    30: '30',
+    24: '30',
+    18: '18',
+};
+function applyBadgeMods(mods) {
+    return [
+        'uui-badge',
+        css$1l.root,
+        css$1l['size-' + (mods.size || defaultSize$b)],
+        `uui-fill-${mods.fill || 'solid'}`,
+        mods.color && `uui-color-${mods.color}`,
+        mods.indicator && 'uui-indicator',
+    ];
+}
+const mapCountIndicatorSizes$1 = {
+    18: '12',
+    24: '18',
+    30: '18',
+    36: '18',
+    42: '24',
+    48: '24',
+};
+const Badge = withMods(Button$1, applyBadgeMods, (props) => {
+    if (process.env.NODE_ENV !== "production") {
+        devLogger.warnAboutDeprecatedPropValue({
+            component: 'Badge',
+            propName: 'size',
+            propValue: props.size,
+            propValueUseInstead: '42',
+            condition: () => ['48'].indexOf(props.size) !== -1,
+        });
+    }
+    return {
+        dropdownIcon: systemIcons[(props.size && mapSize$1[props.size]) || defaultSize$b].foldingArrow,
+        clearIcon: systemIcons[(props.size && mapSize$1[props.size]) || defaultSize$b].clear,
+        countPosition: 'left',
+        countIndicator: (countIndicatorProps) => (React__default.createElement(CountIndicator, Object.assign({}, countIndicatorProps, { color: null, size: mapCountIndicatorSizes$1[props.size || defaultSize$b] }))),
+        indicator: props.indicator || false,
+    };
+});
+
+var css$1k = {"uui-typography":"o2R8qc","hero-header":"_5gKOsI","promo-header":"BH1xZG","uui-critical":"K4XPRN","uui-success":"CdJF-j","uui-warning":"bT-8-Z","uui-typography-size-12":"HwaQan","uui-typography-size-14":"wiZ1yj","uui-typography-size-16":"NzruFf","root":"-NfsH-","size-18":"US-fLR","size-24":"_632Uwl","size-30":"K-DFbQ","size-36":"Sm1C07","size-42":"iV8a5D","size-48":"CdarUL","uuiTypography":"o2R8qc","heroHeader":"_5gKOsI","promoHeader":"BH1xZG","uuiCritical":"K4XPRN","uuiSuccess":"CdJF-j","uuiWarning":"bT-8-Z","uuiTypographySize12":"HwaQan","uuiTypographySize14":"wiZ1yj","uuiTypographySize16":"NzruFf","size18":"US-fLR","size24":"_632Uwl","size30":"K-DFbQ","size36":"Sm1C07","size42":"iV8a5D","size48":"CdarUL"};
+
+const defaultSize$a = '36';
+const mapSize = {
+    48: '48',
+    42: '48',
+    36: '36',
+    30: '30',
+    24: '30',
+    18: '18',
+};
+const mapCountIndicatorSizes = {
+    18: '12',
+    24: '18',
+    30: '18',
+    36: '18',
+    42: '24',
+    48: '24',
+};
+function applyTagMods(mods) {
+    return [
+        css$1k['size-' + (mods.size || defaultSize$a)],
+        css$1k.root,
+        'uui-color-neutral',
+        'uui-tag',
+    ];
+}
+const Tag = withMods(Button$1, applyTagMods, (props) => ({
+    dropdownIcon: systemIcons[mapSize[props.size] || defaultSize$a].foldingArrow,
+    clearIcon: systemIcons[mapSize[props.size] || defaultSize$a].clear,
+    countIndicator: (countIndicatorProps) => (React__default.createElement(CountIndicator, Object.assign({}, countIndicatorProps, { color: "white", size: mapCountIndicatorSizes[props.size || defaultSize$a] }))),
+}));
+
+var css$1j = {"root":"IJ-Yci","uui-spinner":"XqvuBZ","uuiSpinner":"XqvuBZ"};
+
+function applySpinnerMods() {
+    return [css$1j.root, 'uui-spinner'];
+}
+const Spinner = withMods(Spinner$1, applySpinnerMods);
+
+var css$1i = {"root":"MdAmE7","spacer":"pe2ubC","mode-ghost":"aihJFJ","size-24":"rZFJ5R","size-30":"_5565Jq","navigation-size-24":"_9xmLQ6","navigation-size-30":"K3BMHI","modeGhost":"aihJFJ","size24":"rZFJ5R","size30":"_5565Jq","navigationSize24":"_9xmLQ6","navigationSize30":"K3BMHI"};
+
+var _path$M;
+function _extends$O() { _extends$O = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$O.apply(this, arguments); }
+var SvgNavigationChevronLeft12 = function SvgNavigationChevronLeft12(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$O({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    ref: ref
+  }, props), _path$M || (_path$M = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M7.705 3.705 7 3 4 6l3 3 .705-.705L5.415 6l2.29-2.295z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$O = /*#__PURE__*/forwardRef(SvgNavigationChevronLeft12);
+
+var _path$L;
+function _extends$N() { _extends$N = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$N.apply(this, arguments); }
+var SvgNavigationChevronRight12 = function SvgNavigationChevronRight12(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$N({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    ref: ref
+  }, props), _path$L || (_path$L = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "m5 3-.705.705L6.585 6l-2.29 2.295L5 9l3-3-3-3z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$N = /*#__PURE__*/forwardRef(SvgNavigationChevronRight12);
+
+var _path$K;
+function _extends$M() { _extends$M = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$M.apply(this, arguments); }
+var SvgNavigationChevronLeft18 = function SvgNavigationChevronLeft18(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$M({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$K || (_path$K = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M11.557 5.558 10.5 4.5 6 9l4.5 4.5 1.057-1.057L8.123 9l3.434-3.442z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$M = /*#__PURE__*/forwardRef(SvgNavigationChevronLeft18);
+
+var _path$J;
+function _extends$L() { _extends$L = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$L.apply(this, arguments); }
+var SvgNavigationChevronRight18 = function SvgNavigationChevronRight18(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$L({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$J || (_path$J = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M7.5 4.5 6.442 5.558 9.877 9l-3.435 3.443L7.5 13.5 12 9 7.5 4.5z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$L = /*#__PURE__*/forwardRef(SvgNavigationChevronRight18);
+
+function Paginator(props) {
+    const renderPaginator = (params) => {
+        var _a, _b;
+        return (React__default.createElement("nav", Object.assign({ role: "navigation", className: cx(css$1i.root, 'uui-paginator') }, params.rawProps),
+            React__default.createElement(Button, { cx: css$1i[`navigation-size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$M : ForwardRef$O, onClick: params.goToPrev, isDisabled: params.isFirst, fill: "outline", color: "secondary" }),
+            params.pages.map((page, index) => {
+                var _a, _b;
+                if (page.type === 'spacer') {
+                    return (React__default.createElement(Button, { cx: cx(css$1i[`size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], css$1i.spacer), size: params.size, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1 }));
+                }
+                else {
+                    return (React__default.createElement(Button, { cx: cx(css$1i[`size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], css$1i[`mode-${!page.isActive && 'ghost'}`]), size: params.size, key: page.pageNumber, caption: page.pageNumber, onClick: () => { var _a; return (_a = page.onClick) === null || _a === void 0 ? void 0 : _a.call(page); }, rawProps: { 'aria-current': page.isActive }, fill: (page.isActive && 'outline') || 'ghost', color: "primary" }));
+                }
+            }),
+            React__default.createElement(Button, { cx: css$1i[`navigation-size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$L : ForwardRef$N, onClick: params.goToNext, isDisabled: params.isLast, fill: "outline", color: "secondary" })));
+    };
+    return React__default.createElement(Paginator$1, Object.assign({}, props, { render: renderPaginator }));
+}
+
+var css$1h = {"root":"MHvesC","bar":"Q0RjIc","progressBar-indeterminate":"xRCQUE","size-12":"SvtZSo","size-18":"x-4uJ0","size-24":"QYXUHo","progressBarIndeterminate":"xRCQUE","size12":"SvtZSo","size18":"x-4uJ0","size24":"QYXUHo"};
+
+const IndeterminateBar = React.forwardRef((props, ref) => {
+    return (React.createElement("div", { ref: ref, className: cx('uui-indeterminate_bar', props.cx, css$1h.root, css$1h[`size-${props.size || 12}`]) },
+        React.createElement("div", { className: cx(css$1h.bar) })));
+});
+
+var css$1g = {"root":"KE3rZG","striped":"LRp-Lw","animate-stripes":"d7BOBF","size-12":"c4EBQo","size-18":"mRaPHp","size-24":"WIFWK2","animateStripes":"d7BOBF","size12":"c4EBQo","size18":"mRaPHp","size24":"WIFWK2"};
+
+const defaultSize$9 = '12';
+function applyProgressBarMods(mods) {
+    const size = mods.size || defaultSize$9;
+    return [
+        css$1g.root,
+        css$1g[`size-${size}`],
+        mods.striped && css$1g.striped,
+    ];
+}
+const ProgressBar = withMods(ProgressBar$1, applyProgressBarMods, (props) => ({
+    hideLabel: props.hideLabel || props.striped,
+}));
+
+var css$1f = {"root":"ODMyao"};
+
+const IndicatorBar = React.forwardRef((props, ref) => {
+    const { progress } = props;
+    return progress || progress === 0 ? (React.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx(css$1f.root, props.cx), hideLabel: true })) : (React.createElement(IndeterminateBar, { ref: ref, cx: cx(css$1f.root, props.cx) }));
+});
+
+var css$1e = {"root":"Ld4RCO","size-12":"_8G6ivf","size-18":"WzabQU","size-24":"mzlmOO","size12":"_8G6ivf","size18":"WzabQU","size24":"mzlmOO"};
+
+const StatusIndicator = forwardRef((props, ref) => {
+    return (React__default.createElement("div", { ref: ref, className: cx([
+            css$1e.root,
+            css$1e[`size-${props.size || 24}`],
+            'uui-status_indicator',
+            `uui-color-${props.color || 'neutral'}`,
+            `uui-fill-${props.fill || 'solid'}`,
+            props.cx,
+        ]) },
+        React__default.createElement("div", { className: "uui-status_indicator_dot" }),
+        React__default.createElement("p", { className: "uui-status_indicator_caption" }, props.caption)));
+});
+
+var css$1d = {"uui-typography":"d-pCLI","hero-header":"DPXc1q","promo-header":"Wjjj7C","uui-critical":"KDwqFK","uui-success":"qGfSuu","uui-warning":"HNaYRT","uui-typography-size-12":"PYXGrH","uui-typography-size-14":"_62UZ1B","uui-typography-size-16":"_0AFtoC","root":"_1UkAXk","size-18":"Lo611v","size-24":"_6U3dKn","size-30":"_9XGvV7","size-36":"zGarwU","size-42":"uZ9exU","size-48":"xXvOdg","uuiTypography":"d-pCLI","heroHeader":"DPXc1q","promoHeader":"Wjjj7C","uuiCritical":"KDwqFK","uuiSuccess":"qGfSuu","uuiWarning":"HNaYRT","uuiTypographySize12":"PYXGrH","uuiTypographySize14":"_62UZ1B","uuiTypographySize16":"_0AFtoC","size18":"Lo611v","size24":"_6U3dKn","size30":"_9XGvV7","size36":"zGarwU","size42":"uZ9exU","size48":"xXvOdg"};
 
 const allButtonColors = [
-    'accent', 'primary', 'secondary', 'critical',
+    'accent', 'primary', 'critical', 'secondary', 'neutral',
 ];
-const defaultSize$b = '36';
+const defaultSize$8 = '36';
 function applyButtonMods(mods) {
     return [
-        css$1l.root,
+        css$1d.root,
         'uui-button',
         `uui-fill-${mods.fill || 'solid'}`,
         `uui-color-${mods.color || 'primary'}`,
-        css$1l[`size-${mods.size || defaultSize$b}`],
+        css$1d[`size-${mods.size || defaultSize$8}`],
     ];
 }
 const Button = withMods(Button$1, applyButtonMods, (props) => ({
-    dropdownIcon: systemIcons[props.size || defaultSize$b].foldingArrow,
-    clearIcon: systemIcons[props.size || defaultSize$b].clear,
+    dropdownIcon: systemIcons[props.size || defaultSize$8].foldingArrow,
+    clearIcon: systemIcons[props.size || defaultSize$8].clear,
+    countIndicator: (countIndicatorProps) => React__default.createElement(CountIndicator, Object.assign({}, countIndicatorProps, { color: "white" })),
 }));
 
-var css$1k = {"root":"B5z-iP"};
+var css$1c = {"root":"ZZ473Y"};
 
 const allIconColors = [
     'info', 'success', 'warning', 'error', 'secondary', 'neutral',
 ];
 function applyIconButtonMods(mods) {
-    return ['uui-icon_button', `uui-color-${mods.color || 'neutral'}`, css$1k.root];
+    return ['uui-icon_button', `uui-color-${mods.color || 'neutral'}`, css$1c.root];
 }
 const IconButton = withMods(IconButton$1, applyIconButtonMods);
 
-var css$1j = {"root":"mWCYfr","size-18":"JGq-lV","size-24":"xKhXMC","size-30":"YBQ-6X","size-36":"jGDPvD","size-42":"lIQCww","size-48":"PgKsfV","size18":"JGq-lV","size24":"xKhXMC","size30":"YBQ-6X","size36":"jGDPvD","size42":"lIQCww","size48":"PgKsfV"};
+var css$1b = {"root":"iVpl7q","size-18":"l-1ZWb","size-24":"TthNTH","size-30":"iP1y0i","size-36":"rIoKlV","size-42":"X69uia","size-48":"nrNqM4","size18":"l-1ZWb","size24":"TthNTH","size30":"iP1y0i","size36":"rIoKlV","size42":"X69uia","size48":"nrNqM4"};
 
 function getIconClass(props) {
     const classList = {
@@ -620,39 +859,39 @@ function getIconClass(props) {
     return [classList['has-left-icon'] ? 'uui-has-left-icon' : 'uui-no-left-icon', classList['has-right-icon'] ? 'uui-has-right-icon' : 'uui-no-right-icon'];
 }
 
-const defaultSize$a = '36';
+const defaultSize$7 = '36';
 const allLinkButtonColors = ['primary', 'secondary', 'contrast'];
 function applyLinkButtonMods(mods) {
     return [
         'uui-link_button',
-        css$1j.root,
-        css$1j['size-' + (mods.size || defaultSize$a)],
+        css$1b.root,
+        css$1b['size-' + (mods.size || defaultSize$7)],
         ...getIconClass(mods),
         `uui-color-${mods.color || 'primary'}`,
     ];
 }
 const LinkButton = withMods(Button$1, applyLinkButtonMods, (props) => ({
-    dropdownIcon: systemIcons[props.size || defaultSize$a].foldingArrow,
-    clearIcon: systemIcons[props.size || defaultSize$a].clear,
+    dropdownIcon: systemIcons[props.size || defaultSize$7].foldingArrow,
+    clearIcon: systemIcons[props.size || defaultSize$7].clear,
 }));
 
-var css$1i = {"root":"qRkalt","withNotify":"PZj3JN","size-36":"UKYRFQ","size-48":"_33MZE0","size-60":"Onrb-Z","size36":"UKYRFQ","size48":"_33MZE0","size60":"Onrb-Z"};
+var css$1a = {"uui-typography":"y-VYv4","hero-header":"wTNqSp","promo-header":"NXzCXN","uui-critical":"VvGIuJ","uui-success":"TY710q","uui-warning":"_0n1YXt","uui-typography-size-12":"q7BBDm","uui-typography-size-14":"FHC-7C","uui-typography-size-16":"_7mGCfj","root":"Y-c-PR","withNotify":"snIH2z","size-36":"_1Bd6gR","size-48":"oBRI61","size-60":"TH8Cj2","uuiTypography":"y-VYv4","heroHeader":"wTNqSp","promoHeader":"NXzCXN","uuiCritical":"VvGIuJ","uuiSuccess":"TY710q","uuiWarning":"_0n1YXt","uuiTypographySize12":"q7BBDm","uuiTypographySize14":"FHC-7C","uuiTypographySize16":"_7mGCfj","size36":"_1Bd6gR","size48":"oBRI61","size60":"TH8Cj2"};
 
 function applyTabButtonMods(mods) {
     return [
-        css$1i.root,
+        css$1a.root,
         'uui-tab-button',
-        css$1i['size-' + (mods.size || '48')],
-        mods.withNotify && css$1i.withNotify,
+        css$1a['size-' + (mods.size || '48')],
+        mods.withNotify && css$1a.withNotify,
         ...getIconClass(mods),
     ];
 }
-const TabButton = withMods(Button$1, applyTabButtonMods, (props) => (Object.assign(Object.assign({ dropdownIcon: systemIcons['36'].foldingArrow, clearIcon: systemIcons['36'].clear, countPosition: 'right' }, props), { rawProps: Object.assign({ role: 'tab' }, props.rawProps) })));
+const TabButton = withMods(Button$1, applyTabButtonMods, (props) => (Object.assign(Object.assign({ dropdownIcon: systemIcons['36'].foldingArrow, clearIcon: systemIcons['36'].clear }, props), { rawProps: Object.assign({ role: 'tab' }, props.rawProps), countIndicator: (countIndicatorProps) => (React__default.createElement(CountIndicator, Object.assign({}, countIndicatorProps, { color: props.isLinkActive ? 'info' : 'neutral', size: "18" }))) })));
 
-var css$1h = {"root":"P-Xm-d"};
+var css$19 = {"uui-typography":"VPcP6T","hero-header":"gEHpxw","promo-header":"bgQAQR","uui-critical":"BAgmbv","uui-success":"_8ZXn-D","uui-warning":"U94iRT","uui-typography-size-12":"BvJwr0","uui-typography-size-14":"vrOu1P","uui-typography-size-16":"K--CkC","root":"cmRTpx","uuiTypography":"VPcP6T","heroHeader":"gEHpxw","promoHeader":"bgQAQR","uuiCritical":"BAgmbv","uuiSuccess":"_8ZXn-D","uuiWarning":"U94iRT","uuiTypographySize12":"BvJwr0","uuiTypographySize14":"vrOu1P","uuiTypographySize16":"K--CkC"};
 
 function applyVerticalTabButtonMods() {
-    return [css$1h.root];
+    return [css$19.root];
 }
 const VerticalTabButton = withMods(TabButton, applyVerticalTabButtonMods);
 
@@ -670,7 +909,7 @@ const allSemanticColors = [
     'info', 'success', 'warning', 'error',
 ];
 const allEpamBadgeSemanticColors = [
-    'info', 'success', 'warning', 'error', 'neutral',
+    'info', 'success', 'warning', 'critical', 'neutral',
 ];
 const allTextSizes = [
     '18', '24', '30', '36', '48',
@@ -685,92 +924,92 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var _path$M;
-function _extends$O() { _extends$O = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$O.apply(this, arguments); }
+var _path$I;
+function _extends$K() { _extends$K = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$K.apply(this, arguments); }
 var SvgCheck12 = function SvgCheck12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$O({
+  return /*#__PURE__*/React.createElement("svg", _extends$K({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$M || (_path$M = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$I || (_path$I = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M9.491 3.449 10.51 4.55 5.663 9.024 2.487 6.047l1.026-1.094L5.67 6.975z"
   })));
 };
-var ForwardRef$O = /*#__PURE__*/forwardRef(SvgCheck12);
+var ForwardRef$K = /*#__PURE__*/forwardRef(SvgCheck12);
 
-var _path$L;
-function _extends$N() { _extends$N = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$N.apply(this, arguments); }
+var _path$H;
+function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); }
 var SvgCheck18 = function SvgCheck18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$N({
+  return /*#__PURE__*/React.createElement("svg", _extends$J({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$L || (_path$L = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$H || (_path$H = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "m14.247 4.341 1.506 1.318-7.704 8.804-4.756-4.756 1.414-1.414 3.244 3.243z"
   })));
 };
-var ForwardRef$N = /*#__PURE__*/forwardRef(SvgCheck18);
+var ForwardRef$J = /*#__PURE__*/forwardRef(SvgCheck18);
 
-var _path$K;
-function _extends$M() { _extends$M = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$M.apply(this, arguments); }
+var _path$G;
+function _extends$I() { _extends$I = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$I.apply(this, arguments); }
 var SvgPartlySelect12 = function SvgPartlySelect12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$M({
+  return /*#__PURE__*/React.createElement("svg", _extends$I({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$K || (_path$K = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$G || (_path$G = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M9 5v2H3V5z"
   })));
 };
-var ForwardRef$M = /*#__PURE__*/forwardRef(SvgPartlySelect12);
+var ForwardRef$I = /*#__PURE__*/forwardRef(SvgPartlySelect12);
 
-var _path$J;
-function _extends$L() { _extends$L = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$L.apply(this, arguments); }
+var _path$F;
+function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); }
 var SvgPartlySelect18 = function SvgPartlySelect18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$L({
+  return /*#__PURE__*/React.createElement("svg", _extends$H({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$J || (_path$J = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$F || (_path$F = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M14 8v2H4V8z"
   })));
 };
-var ForwardRef$L = /*#__PURE__*/forwardRef(SvgPartlySelect18);
+var ForwardRef$H = /*#__PURE__*/forwardRef(SvgPartlySelect18);
 
-var css$1g = {"root":"mCn1wd","size-18":"-pnsU7","size-12":"_3NAUAF","mode-cell":"s8ghIq","size18":"-pnsU7","size12":"_3NAUAF","modeCell":"s8ghIq"};
+var css$18 = {"uui-typography":"PIBPnE","hero-header":"t-6hoI","promo-header":"nZSMXM","uui-critical":"_4aYZWv","uui-success":"E4kiYc","uui-warning":"UQEjxK","uui-typography-size-12":"qBjUr9","uui-typography-size-14":"dgsxDM","uui-typography-size-16":"_5uN-0S","root":"THQBC6","size-18":"Xp29lq","size-12":"KuDpjx","mode-cell":"VbuSuE","uuiTypography":"PIBPnE","heroHeader":"t-6hoI","promoHeader":"nZSMXM","uuiCritical":"_4aYZWv","uuiSuccess":"E4kiYc","uuiWarning":"UQEjxK","uuiTypographySize12":"qBjUr9","uuiTypographySize14":"dgsxDM","uuiTypographySize16":"_5uN-0S","size18":"Xp29lq","size12":"KuDpjx","modeCell":"VbuSuE"};
 
 function applyCheckboxMods(mods) {
     return [
-        css$1g.root,
-        css$1g['size-' + (mods.size || '18')],
-        css$1g['mode-' + (mods.mode || 'form')],
+        css$18.root,
+        css$18['size-' + (mods.size || '18')],
+        css$18['mode-' + (mods.mode || 'form')],
         'uui-color-primary',
     ];
 }
 const applyUUICheckboxProps = (props) => ({
-    icon: props.size === '12' ? ForwardRef$O : ForwardRef$N,
-    indeterminateIcon: props.size === '12' ? ForwardRef$M : ForwardRef$L,
+    icon: props.size === '12' ? ForwardRef$K : ForwardRef$J,
+    indeterminateIcon: props.size === '12' ? ForwardRef$I : ForwardRef$H,
 });
-const Checkbox = withMods(Checkbox$1, applyCheckboxMods, applyUUICheckboxProps);
+const Checkbox = withMods(uuiComponents.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$1f = {"root":"NDw01S","size-18":"Z7qS3J","size-12":"ylYjgF","size18":"Z7qS3J","size12":"ylYjgF"};
+var css$17 = {"uui-typography":"-iDKoQ","hero-header":"RhKRs7","promo-header":"h-UWRJ","uui-critical":"lIGFuF","uui-success":"XrS0R0","uui-warning":"gb3AO2","uui-typography-size-12":"_3e5L15","uui-typography-size-14":"_9isW1j","uui-typography-size-16":"zr-zCt","root":"lNjTUi","size-18":"iYB8qZ","size-12":"mhj7Ov","uuiTypography":"-iDKoQ","heroHeader":"RhKRs7","promoHeader":"h-UWRJ","uuiCritical":"lIGFuF","uuiSuccess":"XrS0R0","uuiWarning":"gb3AO2","uuiTypographySize12":"_3e5L15","uuiTypographySize14":"_9isW1j","uuiTypographySize16":"zr-zCt","size18":"iYB8qZ","size12":"mhj7Ov"};
 
 var _circle;
-function _extends$K() { _extends$K = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$K.apply(this, arguments); }
+function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); }
 var SvgRadioPoint = function SvgRadioPoint(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$K({
+  return /*#__PURE__*/React.createElement("svg", _extends$G({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
@@ -782,21 +1021,21 @@ var SvgRadioPoint = function SvgRadioPoint(props, ref) {
     r: 6
   })));
 };
-var ForwardRef$K = /*#__PURE__*/forwardRef(SvgRadioPoint);
+var ForwardRef$G = /*#__PURE__*/forwardRef(SvgRadioPoint);
 
 function applyRadioInputMods(mods) {
-    return [css$1f.root, css$1f['size-' + (mods.size || '18')], 'uui-color-primary'];
+    return [css$17.root, css$17['size-' + (mods.size || '18')], 'uui-color-primary'];
 }
-const RadioInput = withMods(RadioInput$1, applyRadioInputMods, () => ({ icon: ForwardRef$K }));
+const RadioInput = withMods(RadioInput$1, applyRadioInputMods, () => ({ icon: ForwardRef$G }));
 
-var css$1e = {"root":"yswhAi","size-12":"AKebHP","size-18":"SyOckL","size-24":"_1aUprk","size12":"AKebHP","size18":"SyOckL","size24":"_1aUprk"};
+var css$16 = {"root":"_5eGiNq","size-12":"dmGsw-","size-18":"dnZ83Z","size-24":"sQJGNJ","size12":"dmGsw-","size18":"dnZ83Z","size24":"sQJGNJ"};
 
 function applySwitchMods(mods) {
     return [
-        css$1e.root, css$1e['size-' + (mods.size || '18')], 'uui-color-primary',
+        css$16.root, css$16['size-' + (mods.size || '18')], 'uui-color-primary',
     ];
 }
-const Switch = withMods(Switch$1, applySwitchMods);
+const Switch = withMods(uuiComponents.Switch, applySwitchMods);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -842,27 +1081,27 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var textInputCss = {"root":"pQN2Hb","mode-form":"jYbWAN","mode-inline":"a15a6A","mode-cell":"iTNCzd","size-24":"LtSJwc","size-30":"V3DpDv","size-36":"G3kf7f","size-42":"_9yiRif","size-48":"LKb2a0","modeForm":"jYbWAN","modeInline":"a15a6A","modeCell":"iTNCzd","size24":"LtSJwc","size30":"V3DpDv","size36":"G3kf7f","size42":"_9yiRif","size48":"LKb2a0"};
+var textInputCss = {"uui-typography":"Vqe9Hc","hero-header":"TwsQ7b","promo-header":"Zl6eXK","uui-critical":"kjmiE2","uui-success":"oqLwZt","uui-warning":"uy3Bmj","uui-typography-size-12":"nFtkWZ","uui-typography-size-14":"kv2pSu","uui-typography-size-16":"eESpCP","root":"vKsAnN","mode-form":"fxgMSF","mode-inline":"qBWKpx","mode-cell":"g0HKL4","size-24":"kTbPQM","size-30":"NZv94p","size-36":"_8JfSxy","size-42":"GextdL","size-48":"gSYmDT","uuiTypography":"Vqe9Hc","heroHeader":"TwsQ7b","promoHeader":"Zl6eXK","uuiCritical":"kjmiE2","uuiSuccess":"oqLwZt","uuiWarning":"uy3Bmj","uuiTypographySize12":"nFtkWZ","uuiTypographySize14":"kv2pSu","uuiTypographySize16":"eESpCP","modeForm":"fxgMSF","modeInline":"qBWKpx","modeCell":"g0HKL4","size24":"kTbPQM","size30":"NZv94p","size36":"_8JfSxy","size42":"GextdL","size48":"gSYmDT"};
 
-const defaultSize$9 = '36';
+const defaultSize$6 = '36';
 const defaultMode$5 = EditMode.FORM;
 function applyTextInputMods(mods) {
     return [
         textInputCss.root,
-        textInputCss['size-' + (mods.size || defaultSize$9)],
+        textInputCss['size-' + (mods.size || defaultSize$6)],
         textInputCss['mode-' + (mods.mode || defaultMode$5)],
     ];
 }
 const TextInput = withMods(TextInput$1, applyTextInputMods, (props) => ({
-    acceptIcon: systemIcons[props.size || defaultSize$9].accept,
-    cancelIcon: systemIcons[props.size || defaultSize$9].clear,
-    dropdownIcon: systemIcons[props.size || defaultSize$9].foldingArrow,
+    acceptIcon: systemIcons[props.size || defaultSize$6].accept,
+    cancelIcon: systemIcons[props.size || defaultSize$6].clear,
+    dropdownIcon: systemIcons[props.size || defaultSize$6].foldingArrow,
 }));
 const SearchInput = React__default.forwardRef((props, ref) => {
     // analytics events are sending in IEditableDebouncer, so we need to avoid sending events in TextInput
     const textInputProps = __rest(props, []);
     delete textInputProps.getValueChangeAnalyticsEvent;
-    return (React__default.createElement(IEditableDebouncer, Object.assign({}, props, { render: (iEditable) => (React__default.createElement(TextInput, Object.assign({ icon: systemIcons[props.size || defaultSize$9].search, onCancel: !!props.value
+    return (React__default.createElement(IEditableDebouncer, Object.assign({}, props, { render: (iEditable) => (React__default.createElement(TextInput, Object.assign({ icon: systemIcons[props.size || defaultSize$6].search, onCancel: !!props.value
                 // In a lot of places, it is required to check if a clicked element is a part of some other element.
                 // Usually, those are global click event handlers. To allow that logic to work correctly, it is necessary
                 // to execute the `disappearing` of the cross (setState execution) after the event will pass through all the handlers.
@@ -871,41 +1110,41 @@ const SearchInput = React__default.forwardRef((props, ref) => {
                 : undefined, type: "search", inputMode: "search", ref: ref }, textInputProps, iEditable))) })));
 });
 
-var css$1d = {"root":"XFGIxV"};
+var css$15 = {"root":"KA9WO-"};
 
-const ControlGroup = withMods(ControlGroup$1, () => [css$1d.root]);
+const ControlGroup = withMods(ControlGroup$1, () => [css$15.root]);
 
 function MultiSwitchComponent(props, ref) {
     return (React.createElement(ControlGroup, { ref: ref, rawProps: Object.assign(Object.assign({}, props.rawProps), { role: 'tablist' }) }, props.items.map((item, index) => (React.createElement(Button, Object.assign({}, props, item, { isDisabled: props.isDisabled, key: index + '-' + item.id, onClick: () => props.onValueChange(item.id), fill: props.value === item.id ? 'solid' : 'outline', color: props.color === 'secondary' && props.value === item.id ? 'primary' : props.color || 'primary', size: props.size, rawProps: { 'aria-current': props.value === item.id, role: 'tab' } }))))));
 }
 const MultiSwitch = React.forwardRef(MultiSwitchComponent);
 
-var css$1c = {"root":"_2Bn2t-","size-24":"FvOkQz","size-30":"yrVy9l","size-36":"RLTuCt","size-42":"N1Rcf4","size-48":"WExutP","mode-form":"Ozo4-p","mode-cell":"yYTf-L","size24":"FvOkQz","size30":"yrVy9l","size36":"RLTuCt","size42":"N1Rcf4","size48":"WExutP","modeForm":"Ozo4-p","modeCell":"yYTf-L"};
+var css$14 = {"uui-typography":"-dUdcX","hero-header":"Z6gBx1","promo-header":"_72v0kR","uui-critical":"kjzvMi","uui-success":"XGW7ke","uui-warning":"unu2bz","uui-typography-size-12":"O2IM5q","uui-typography-size-14":"JU75LM","uui-typography-size-16":"amta3z","root":"K6OU3B","size-24":"DMQU-8","size-30":"kmSZ-K","size-36":"wDCUAW","size-42":"HQKayp","size-48":"_16Bkal","mode-form":"ph27ht","mode-cell":"eWk4CJ","uuiTypography":"-dUdcX","heroHeader":"Z6gBx1","promoHeader":"_72v0kR","uuiCritical":"kjzvMi","uuiSuccess":"XGW7ke","uuiWarning":"unu2bz","uuiTypographySize12":"O2IM5q","uuiTypographySize14":"JU75LM","uuiTypographySize16":"amta3z","size24":"DMQU-8","size30":"kmSZ-K","size36":"wDCUAW","size42":"HQKayp","size48":"_16Bkal","modeForm":"ph27ht","modeCell":"eWk4CJ"};
 
-const defaultSize$8 = '36';
+const defaultSize$5 = '36';
 const defaultMode$4 = EditMode.FORM;
 function applyNumericInputMods(mods) {
     return [
-        textInputCss.root, css$1c.root, css$1c['size-' + (mods.size || defaultSize$8)], textInputCss['size-' + (mods.size || defaultSize$8)], textInputCss['mode-' + (mods.mode || defaultMode$4)],
+        textInputCss.root, css$14.root, css$14['size-' + (mods.size || defaultSize$5)], textInputCss['size-' + (mods.size || defaultSize$5)], textInputCss['mode-' + (mods.mode || defaultMode$4)],
     ];
 }
 const NumericInput = withMods(NumericInput$1, applyNumericInputMods, (props) => {
     var _a, _b;
     return ({
-        upIcon: systemIcons[props.size || defaultSize$8].foldingArrow,
-        downIcon: systemIcons[props.size || defaultSize$8].foldingArrow,
+        upIcon: systemIcons[props.size || defaultSize$5].foldingArrow,
+        downIcon: systemIcons[props.size || defaultSize$5].foldingArrow,
         align: (_a = props.align) !== null && _a !== void 0 ? _a : (props.mode === 'cell' ? 'right' : 'left'),
         disableArrows: (_b = props.disableArrows) !== null && _b !== void 0 ? _b : props.mode === 'cell',
     });
 });
 
-var css$1b = {"root":"bkrhfN","mode-form":"UAONtW","mode-cell":"yBW8Xe","mode-inline":"Uhf64E","size-24":"_4TYlSr","size-30":"SUQKWW","size-36":"JqlVkG","size-42":"aQfEdH","size-48":"Wa2cTq","modeForm":"UAONtW","modeCell":"yBW8Xe","modeInline":"Uhf64E","size24":"_4TYlSr","size30":"SUQKWW","size36":"JqlVkG","size42":"aQfEdH","size48":"Wa2cTq"};
+var css$13 = {"uui-typography":"_715x-F","hero-header":"umk8VP","promo-header":"Wc3IgT","uui-critical":"_6aejJw","uui-success":"tdn-Eo","uui-warning":"ttPuHb","uui-typography-size-12":"_5PNCHe","uui-typography-size-14":"cOX4sg","uui-typography-size-16":"Vgi1Mx","root":"Ce4Vuu","mode-form":"iuj5Z6","mode-cell":"glsVfO","mode-inline":"E3QA2X","size-24":"h2Zco-","size-30":"K15-cm","size-36":"hL4JAw","size-42":"XZbGSO","size-48":"Ylt6-B","uuiTypography":"_715x-F","heroHeader":"umk8VP","promoHeader":"Wc3IgT","uuiCritical":"_6aejJw","uuiSuccess":"tdn-Eo","uuiWarning":"ttPuHb","uuiTypographySize12":"_5PNCHe","uuiTypographySize14":"cOX4sg","uuiTypographySize16":"Vgi1Mx","modeForm":"iuj5Z6","modeCell":"glsVfO","modeInline":"E3QA2X","size24":"h2Zco-","size30":"K15-cm","size36":"hL4JAw","size42":"XZbGSO","size48":"Ylt6-B"};
 
-const defaultSize$7 = '36';
+const defaultSize$4 = '36';
 const defaultMode$3 = EditMode.FORM;
 function applyTextAreaMods(mods) {
     return [
-        css$1b.root, css$1b['size-' + (mods.size || defaultSize$7)], css$1b['mode-' + (mods.mode || defaultMode$3)],
+        css$13.root, css$13['size-' + (mods.size || defaultSize$4)], css$13['mode-' + (mods.mode || defaultMode$3)],
     ];
 }
 const TextArea = withMods(TextArea$1, applyTextAreaMods, (props) => ({
@@ -913,20 +1152,20 @@ const TextArea = withMods(TextArea$1, applyTextAreaMods, (props) => ({
     maxLength: props.mode === EditMode.CELL ? undefined : props.maxLength,
 }));
 
-var css$1a = {"root":"Bts3XB"};
+var css$12 = {"root":"vjSXA6"};
 
 function applyDropdownContainerMods(mods) {
     return [
-        css$1a.root,
+        css$12.root,
         mods.vPadding && `vPadding-${mods.vPadding}`,
         mods.padding && `padding-${mods.padding}`,
     ];
 }
-const DropdownContainer = withMods(DropdownContainer$1, applyDropdownContainerMods);
+const DropdownContainer = withMods(uuiComponents.DropdownContainer, applyDropdownContainerMods);
 
-var css$19 = {"root":"jThuOL","icon":"_0eoPvM","date-input":"wz-piV","dateInput":"wz-piV"};
+var css$11 = {"root":"_1z5901","icon":"_474N6m","date-input":"fSthI4","dateInput":"fSthI4"};
 
-const TimePickerBody = withMods(TimePickerBody$1, () => [css$19.root], () => ({ addIcon: ForwardRef$1b, subtractIcon: ForwardRef$1b }));
+const TimePickerBody = withMods(TimePickerBody$1, () => [css$11.root], () => ({ addIcon: ForwardRef$1b, subtractIcon: ForwardRef$1b }));
 
 dayjs.extend(customParseFormat);
 const defaultMode$2 = EditMode.FORM;
@@ -946,7 +1185,7 @@ class TimePicker extends BaseTimePicker {
                     });
                 }
             }
-            return (React__default.createElement(TextInput, Object.assign({}, props, { onClick: null, size: this.props.size || '36', isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, isInvalid: this.props.isInvalid, cx: [css$19.root, css$19.dateInput, this.props.inputCx], value: this.state.value, onValueChange: this.handleInputChange, onCancel: this.onClear, onFocus: this.handleFocus, onBlur: this.handleBlur, isDropdown: false, placeholder: this.props.placeholder ? this.props.placeholder : this.getFormat(), mode: this.props.mode || defaultMode$2, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.input })));
+            return (React__default.createElement(TextInput, Object.assign({}, props, { onClick: null, size: this.props.size || '36', isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, isInvalid: this.props.isInvalid, cx: [css$11.root, css$11.dateInput, this.props.inputCx], value: this.state.value, onValueChange: this.handleInputChange, onCancel: this.onClear, onFocus: this.handleFocus, onBlur: this.handleBlur, isDropdown: false, placeholder: this.props.placeholder ? this.props.placeholder : this.getFormat(), mode: this.props.mode || defaultMode$2, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.input })));
         };
         this.renderBody = (props) => {
             var _a;
@@ -956,50 +1195,23 @@ class TimePicker extends BaseTimePicker {
     }
 }
 
-var css$18 = {"root":"_5Rd7CG"};
+var css$10 = {"root":"BIYkBh"};
 
 function applyInputAddonMods() {
     return [
-        css$18.root,
+        css$10.root,
     ];
 }
 const InputAddon = withMods(InputAddon$1, applyInputAddonMods);
 
-var css$17 = {"container":"YgfwCr"};
+var css$$ = {"root":"_2FWoQd"};
 
-var _path$I;
-function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); }
-var SvgNavigationChevronLeft18 = function SvgNavigationChevronLeft18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$J({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 18,
-    height: 18,
-    viewBox: "0 0 18 18",
-    ref: ref
-  }, props), _path$I || (_path$I = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M11.557 5.558 10.5 4.5 6 9l4.5 4.5 1.057-1.057L8.123 9l3.434-3.442z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$J = /*#__PURE__*/forwardRef(SvgNavigationChevronLeft18);
+function applySliderMods() {
+    return [css$$.root];
+}
+const Slider = withMods(Slider$1, applySliderMods);
 
-var _path$H;
-function _extends$I() { _extends$I = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$I.apply(this, arguments); }
-var SvgNavigationChevronRight18 = function SvgNavigationChevronRight18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$I({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 18,
-    height: 18,
-    viewBox: "0 0 18 18",
-    ref: ref
-  }, props), _path$H || (_path$H = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M7.5 4.5 6.442 5.558 9.877 9l-3.435 3.443L7.5 13.5 12 9 7.5 4.5z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$I = /*#__PURE__*/forwardRef(SvgNavigationChevronRight18);
+var css$_ = {"container":"vRT4Th"};
 
 dayjs.extend(localeData);
 const uuiHeader = {
@@ -1074,21 +1286,21 @@ function DatePickerHeader(props) {
         var _a, _b, _c;
         return `${((_a = props.value) === null || _a === void 0 ? void 0 : _a.view) !== 'MONTH_SELECTION' ? dayjs.months()[(_b = props.value) === null || _b === void 0 ? void 0 : _b.displayedDate.month()] : ''} ${(_c = props.value) === null || _c === void 0 ? void 0 : _c.displayedDate.year()}`;
     }, [(_a = props.value) === null || _a === void 0 ? void 0 : _a.view, (_b = props.value) === null || _b === void 0 ? void 0 : _b.displayedDate]);
-    return (React.createElement("div", { className: cx(css$17.container, uuiHeader.container, props.cx) },
+    return (React.createElement("div", { className: cx(css$_.container, uuiHeader.container, props.cx) },
         React.createElement("header", { className: uuiHeader.header },
-            React.createElement(Button, { icon: props.navIconLeft || ForwardRef$J, color: "secondary", fill: "ghost", cx: uuiHeader.navIconLeft, onClick: () => onLeftNavigationArrow() }),
+            React.createElement(Button, { icon: props.navIconLeft || ForwardRef$M, color: "secondary", fill: "ghost", cx: uuiHeader.navIconLeft, onClick: () => onLeftNavigationArrow() }),
             React.createElement(Button, { caption: title, fill: "ghost", cx: uuiHeader.navTitle, onClick: () => onCaptionClick(props.value.view) }),
-            React.createElement(Button, { icon: props.navIconRight || ForwardRef$I, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: () => onRightNavigationArrow() }))));
+            React.createElement(Button, { icon: props.navIconRight || ForwardRef$L, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: () => onRightNavigationArrow() }))));
 }
 
-var css$16 = {"root":"F9Yc8K"};
+var css$Z = {"uui-typography":"_75FVgp","hero-header":"qzWIhI","promo-header":"_1KKrGN","uui-critical":"XJfyFK","uui-success":"ef-4cF","uui-warning":"Z30Sn-","uui-typography-size-12":"LgkOOE","uui-typography-size-14":"Ey3o6z","uui-typography-size-16":"_8PKcDr","root":"dB9AVm","uuiTypography":"_75FVgp","heroHeader":"qzWIhI","promoHeader":"_1KKrGN","uuiCritical":"XJfyFK","uuiSuccess":"ef-4cF","uuiWarning":"Z30Sn-","uuiTypographySize12":"LgkOOE","uuiTypographySize14":"Ey3o6z","uuiTypographySize16":"_8PKcDr"};
 
 function applyDateSelectionMods() {
-    return [css$16.root];
+    return [css$Z.root];
 }
 const Calendar = withMods(Calendar$1, applyDateSelectionMods);
 
-var css$15 = {"root":"OWohPB"};
+var css$Y = {"uui-typography":"THyeDd","hero-header":"zwAx-r","promo-header":"ckbv64","uui-critical":"krOLsT","uui-success":"N9EzfC","uui-warning":"_4OudPu","uui-typography-size-12":"eSJUpW","uui-typography-size-14":"_7ZI8r3","uui-typography-size-16":"B2sB0-","root":"ou0EZq","uuiTypography":"THyeDd","heroHeader":"zwAx-r","promoHeader":"ckbv64","uuiCritical":"krOLsT","uuiSuccess":"N9EzfC","uuiWarning":"_4OudPu","uuiTypographySize12":"eSJUpW","uuiTypographySize14":"_7ZI8r3","uuiTypographySize16":"B2sB0-"};
 
 dayjs.extend(updateLocale);
 const uuiDatePickerBody = {
@@ -1116,7 +1328,7 @@ class DatePickerBody extends DatePickerBodyBase {
             }
         };
         this.renderBody = () => {
-            return (React.createElement("div", { className: cx$1(css$15.root, uuiDatePickerBody.wrapper, this.props.cx) },
+            return (React.createElement("div", { className: cx$1(css$Y.root, uuiDatePickerBody.wrapper, this.props.cx) },
                 React.createElement(DatePickerHeader, { value: this.props.value, onValueChange: (newValue) => this.props.setDisplayedDateAndView(newValue.displayedDate, newValue.view) }),
                 this.getView()));
         };
@@ -1125,106 +1337,106 @@ class DatePickerBody extends DatePickerBodyBase {
     }
 }
 
-var _path$G;
-function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); }
+var _path$E;
+function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); }
 var SvgNotificationCheckCircleFill24 = function SvgNotificationCheckCircleFill24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$H({
+  return /*#__PURE__*/React.createElement("svg", _extends$F({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$G || (_path$G = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$E || (_path$E = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
   })));
 };
-var ForwardRef$H = /*#__PURE__*/forwardRef(SvgNotificationCheckCircleFill24);
+var ForwardRef$F = /*#__PURE__*/forwardRef(SvgNotificationCheckCircleFill24);
 
-var _path$F;
-function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); }
+var _path$D;
+function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); }
 var SvgNotificationWarningFill24 = function SvgNotificationWarningFill24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$G({
+  return /*#__PURE__*/React.createElement("svg", _extends$E({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$F || (_path$F = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$D || (_path$D = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
   })));
 };
-var ForwardRef$G = /*#__PURE__*/forwardRef(SvgNotificationWarningFill24);
+var ForwardRef$E = /*#__PURE__*/forwardRef(SvgNotificationWarningFill24);
 
-var _path$E;
-function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); }
+var _path$C;
+function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
 var SvgNotificationErrorFill24 = function SvgNotificationErrorFill24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$F({
+  return /*#__PURE__*/React.createElement("svg", _extends$D({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$E || (_path$E = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$C || (_path$C = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
   })));
 };
-var ForwardRef$F = /*#__PURE__*/forwardRef(SvgNotificationErrorFill24);
+var ForwardRef$D = /*#__PURE__*/forwardRef(SvgNotificationErrorFill24);
 
-var _path$D;
-function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); }
+var _path$B;
+function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
 var SvgNotificationHelpFill24 = function SvgNotificationHelpFill24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$E({
+  return /*#__PURE__*/React.createElement("svg", _extends$C({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$D || (_path$D = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$B || (_path$B = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
   })));
 };
-var ForwardRef$E = /*#__PURE__*/forwardRef(SvgNotificationHelpFill24);
+var ForwardRef$C = /*#__PURE__*/forwardRef(SvgNotificationHelpFill24);
 
-var _path$C;
-function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
+var _path$A;
+function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
 var SvgNavigationClose24$1 = function SvgNavigationClose24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$D({
+  return /*#__PURE__*/React.createElement("svg", _extends$B({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$C || (_path$C = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$A || (_path$A = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
   })));
 };
-var ForwardRef$D = /*#__PURE__*/forwardRef(SvgNavigationClose24$1);
+var ForwardRef$B = /*#__PURE__*/forwardRef(SvgNavigationClose24$1);
 
-var css$14 = {"root":"_0ZIked","icon-wrapper":"_323APP","alert-wrapper":"UKzorq","size-48":"jDI03w","size-36":"kUk8dq","action-wrapper":"qb8FPn","action-icon":"RmKnuG","action-link":"ZSsfts","close-icon":"kdwLKQ","main-path":"L-dHhV","content":"hYii3z","iconWrapper":"_323APP","alertWrapper":"UKzorq","size48":"jDI03w","size36":"kUk8dq","actionWrapper":"qb8FPn","actionIcon":"RmKnuG","actionLink":"ZSsfts","closeIcon":"kdwLKQ","mainPath":"L-dHhV"};
+var css$X = {"root":"hH33Pj","icon-wrapper":"mavA8x","alert-wrapper":"n8pptZ","size-48":"_1tHAyk","size-36":"_2RfS3-","action-wrapper":"_7Ltx-K","action-icon":"MTrWZE","action-link":"ALDYSa","close-icon":"BjPoge","main-path":"_6o9Ay7","content":"AyIbIl","iconWrapper":"mavA8x","alertWrapper":"n8pptZ","size48":"_1tHAyk","size36":"_2RfS3-","actionWrapper":"_7Ltx-K","actionIcon":"MTrWZE","actionLink":"ALDYSa","closeIcon":"BjPoge","mainPath":"_6o9Ay7"};
 
-const Alert = React.forwardRef((props, ref) => (React.createElement("div", Object.assign({ role: "alert", ref: ref, className: cx('uui-alert', css$14.root, css$14.alertWrapper, props.color && `uui-color-${props.color}`, props.cx, (props.size === '36' ? css$14.size36 : css$14.size48)) }, props.rawProps),
-    React.createElement("div", { className: css$14.mainPath },
-        props.icon && (React.createElement("div", { className: css$14.iconWrapper },
-            React.createElement(IconContainer, { icon: props.icon, cx: css$14.actionIcon }))),
-        React.createElement("div", { className: css$14.content },
+const Alert = React.forwardRef((props, ref) => (React.createElement("div", Object.assign({ role: "alert", ref: ref, className: cx('uui-alert', css$X.root, css$X.alertWrapper, props.color && `uui-color-${props.color}`, props.cx, (props.size === '36' ? css$X.size36 : css$X.size48)) }, props.rawProps),
+    React.createElement("div", { className: css$X.mainPath },
+        props.icon && (React.createElement("div", { className: css$X.iconWrapper },
+            React.createElement(IconContainer, { icon: props.icon, cx: css$X.actionIcon }))),
+        React.createElement("div", { className: css$X.content },
             props.children,
-            props.actions && (React.createElement("div", { className: css$14.actionWrapper }, props.actions.map((action) => (React.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$14.actionLink, size: (props === null || props === void 0 ? void 0 : props.size) === '36' ? '24' : '30' })))))),
-        props.onClose && React.createElement(IconButton, { icon: ForwardRef$D, color: "neutral", onClick: props.onClose, cx: css$14.closeIcon })))));
-const WarningAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$G, color: "warning", ref: ref }, props)));
-const SuccessAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$H, color: "success", ref: ref }, props)));
-const HintAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$E, color: "info", ref: ref }, props)));
-const ErrorAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$F, color: "error", ref: ref }, props)));
+            props.actions && (React.createElement("div", { className: css$X.actionWrapper }, props.actions.map((action) => (React.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$X.actionLink, size: (props === null || props === void 0 ? void 0 : props.size) === '36' ? '24' : '30' })))))),
+        props.onClose && React.createElement(IconButton, { icon: ForwardRef$B, color: "neutral", onClick: props.onClose, cx: css$X.closeIcon })))));
+const WarningAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$E, color: "warning", ref: ref }, props)));
+const SuccessAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$F, color: "success", ref: ref }, props)));
+const HintAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$C, color: "info", ref: ref }, props)));
+const ErrorAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$D, color: "error", ref: ref }, props)));
 
 function Dropdown(props) {
     return React.createElement(Dropdown$1, Object.assign({}, props));
 }
 
-var css$13 = {"root":"TVXlr1","bodyRoot":"auaShj","submenuRootItem":"HJUFix","iconAfter":"TeH-fd","iconCheck":"adTvjR","splitterRoot":"dO6TV1","splitter":"El14RE","headerRoot":"_5poaht","itemRoot":"_0S-9Mc","icon":"W8Gmap","link":"_2gs-va","indent":"vYWB98"};
+var css$W = {"uui-typography":"eBtsyJ","hero-header":"xfQ7lA","promo-header":"f0T4Ca","uui-critical":"I2ltwg","uui-success":"yGRBwt","uui-warning":"_55UiLR","uui-typography-size-12":"_0GRghR","uui-typography-size-14":"j0--Mr","uui-typography-size-16":"WrJ-7-","root":"at3Khw","bodyRoot":"kmqdMl","submenuRootItem":"_5xXKgl","iconAfter":"Y1bohr","iconCheck":"eraKq0","splitterRoot":"OT3qAg","splitter":"_4D1E3s","headerRoot":"_5MW-zq","itemRoot":"g0iI46","icon":"_02d-x-","link":"_2h8VmD","indent":"YHo-Ro","uuiTypography":"eBtsyJ","heroHeader":"xfQ7lA","promoHeader":"f0T4Ca","uuiCritical":"I2ltwg","uuiSuccess":"yGRBwt","uuiWarning":"_55UiLR","uuiTypographySize12":"_0GRghR","uuiTypographySize14":"j0--Mr","uuiTypographySize16":"WrJ-7-"};
 
 const icons = systemIcons['36'];
 var IDropdownControlKeys;
@@ -1259,9 +1471,9 @@ function DropdownMenuContainer(props) {
             props.onClose();
         }
     };
-    return (React__default.createElement(DropdownContainer, Object.assign({}, props, { rawProps: Object.assign(Object.assign({}, props.rawProps), { role: 'menu' }), ref: menuRef, lockProps: { onKeyDown: handleArrowKeys }, cx: css$13.root })));
+    return (React__default.createElement(DropdownContainer, Object.assign({}, props, { rawProps: Object.assign(Object.assign({}, props.rawProps), { role: 'menu' }), ref: menuRef, lockProps: { onKeyDown: handleArrowKeys }, cx: css$W.root })));
 }
-const DropdownMenuBody = withMods(DropdownMenuContainer, () => [css$13.bodyRoot], (props) => {
+const DropdownMenuBody = withMods(DropdownMenuContainer, () => [css$W.bodyRoot], (props) => {
     const dropdownRawProps = props.minWidth ? Object.assign(Object.assign({}, props.rawProps), { style: { minWidth: `${props.minWidth}px` } }) : null;
     return (Object.assign(Object.assign({ closeOnKey: IDropdownControlKeys.ESCAPE }, props), { rawProps: dropdownRawProps || props.rawProps }));
 });
@@ -1285,32 +1497,32 @@ const DropdownMenuButton = React__default.forwardRef((props, ref) => {
     const getMenuButtonContent = () => {
         const isIconBefore = Boolean(icon && iconPosition !== 'right');
         const isIconAfter = Boolean(icon && iconPosition === 'right');
-        const iconElement = (React__default.createElement(IconButton, { icon: icon, color: isActive ? 'info' : 'neutral', onClick: onIconClick, cx: cx$1(css$13.root, css$13.icon, iconPosition === 'right' ? css$13.iconAfter : css$13.iconBefore) }));
+        const iconElement = (React__default.createElement(IconButton, { icon: icon, color: isActive ? 'info' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: cx$1(css$W.root, css$W.icon, iconPosition === 'right' ? css$W.iconAfter : css$W.iconBefore) }));
         return (React__default.createElement(React__default.Fragment, null,
             isIconBefore && iconElement,
-            React__default.createElement(Text$1, { cx: props.indent && css$13.indent }, caption),
+            React__default.createElement(Text$1, { cx: props.indent && css$W.indent }, caption),
             isIconAfter && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(FlexSpacer, null),
                 iconElement))));
     };
     const isAnchor = Boolean(link || href);
-    const itemClassNames = cx$1(css$13.root, props.cx, css$13.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened);
-    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$13.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isDisabled: isDisabled, forwardedRef: ref, target: target }, getMenuButtonContent())) : (React__default.createElement(FlexRow$1, { rawProps: {
+    const itemClassNames = cx$1(css$W.root, props.cx, css$W.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened);
+    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$W.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isDisabled: isDisabled, forwardedRef: ref, target: target }, getMenuButtonContent())) : (React__default.createElement(FlexRow$1, { rawProps: {
             tabIndex: isDisabled ? -1 : 0,
             role: 'menuitem',
             onKeyDown: isDisabled ? null : handleOpenDropdown,
         }, cx: itemClassNames, onClick: handleClick, ref: ref },
         getMenuButtonContent(),
-        isSelected && React__default.createElement(IconContainer, { icon: icons.accept, cx: cx$1(css$13.root, css$13.selectedCheckmark) })));
+        isSelected && React__default.createElement(IconContainer, { icon: icons.accept, cx: cx$1(css$W.root, css$W.selectedCheckmark) })));
 });
 DropdownMenuButton.displayName = 'DropdownMenuButton';
 function DropdownMenuSplitter(props) {
-    return (React__default.createElement("div", { className: cx$1(css$13.root, props.cx, css$13.splitterRoot) },
-        React__default.createElement("hr", { className: css$13.splitter })));
+    return (React__default.createElement("div", { className: cx$1(css$W.root, props.cx, css$W.splitterRoot) },
+        React__default.createElement("hr", { className: css$W.splitter })));
 }
 function DropdownMenuHeader(props) {
-    return (React__default.createElement("div", { className: cx$1('uui-dropdown-menu-header', css$13.root, props.cx, css$13.headerRoot) },
-        React__default.createElement("span", { className: css$13.header }, props.caption)));
+    return (React__default.createElement("div", { className: cx$1('uui-dropdown-menu-header', css$W.root, props.cx, css$W.headerRoot) },
+        React__default.createElement("span", { className: css$W.header }, props.caption)));
 }
 function DropdownSubMenu(props) {
     const subMenuModifiers = [
@@ -1330,7 +1542,7 @@ function DropdownSubMenu(props) {
     ];
     return (React__default.createElement(Dropdown$1, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: "right-start", modifiers: subMenuModifiers, renderBody: (dropdownProps) => React__default.createElement(DropdownMenuBody, Object.assign({ closeOnKey: IDropdownControlKeys.LEFT_ARROW }, props, dropdownProps)), renderTarget: (_a) => {
             var { toggleDropdownOpening } = _a, targetProps = __rest(_a, ["toggleDropdownOpening"]);
-            return (React__default.createElement(DropdownMenuButton, Object.assign({ cx: cx$1(css$13.root, css$13.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
+            return (React__default.createElement(DropdownMenuButton, Object.assign({ cx: cx$1(css$W.root, css$W.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
         } }));
 }
 function DropdownMenuSwitchButton(props) {
@@ -1347,38 +1559,38 @@ function DropdownMenuSwitchButton(props) {
             onHandleValueChange(!isSelected);
         }
     };
-    return (React__default.createElement(FlexRow$1, { cx: cx$1(props.cx, css$13.itemRoot, isDisabled && uuiMod.disabled), onClick: () => onHandleValueChange(!isSelected), rawProps: { role: 'menuitem', onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 } },
-        icon && React__default.createElement(IconContainer, { icon: icon, cx: css$13.iconBefore }),
+    return (React__default.createElement(FlexRow$1, { cx: cx$1(props.cx, css$W.itemRoot, isDisabled && uuiMod.disabled), onClick: () => onHandleValueChange(!isSelected), rawProps: { role: 'menuitem', onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 } },
+        icon && React__default.createElement(IconContainer, { icon: icon, cx: css$W.iconBefore }),
         React__default.createElement(Text$1, null, caption),
         React__default.createElement(FlexSpacer, null),
         React__default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
 }
 
-var css$12 = {"root":"_87SQ78","border-bottom":"BhVolQ","top-shadow":"K6-qyf","size-24":"T-kMsQ","size-30":"QGrds7","size-36":"pLLgQF","size-42":"pudUNn","size-48":"wR8tBZ","padding-6":"g-NAEE","padding-12":"oYgCBs","padding-18":"mfjWD5","padding-24":"wiwVol","margin-24":"AAGZg-","margin-12":"urWP2V","vPadding-12":"xofbOt","vPadding-18":"SYjpZo","vPadding-24":"B634oC","vPadding-36":"mZSSVi","vPadding-48":"wo4cdC","spacing-6":"qEPx8a","spacing-12":"rWF6qe","spacing-18":"_86V2ct","borderBottom":"BhVolQ","topShadow":"K6-qyf","size24":"T-kMsQ","size30":"QGrds7","size36":"pLLgQF","size42":"pudUNn","size48":"wR8tBZ","padding6":"g-NAEE","padding12":"oYgCBs","padding18":"mfjWD5","padding24":"wiwVol","margin24":"AAGZg-","margin12":"urWP2V","vPadding12":"xofbOt","vPadding18":"SYjpZo","vPadding24":"B634oC","vPadding36":"mZSSVi","vPadding48":"wo4cdC","spacing6":"qEPx8a","spacing12":"rWF6qe","spacing18":"_86V2ct"};
+var css$V = {"uui-typography":"gukPI5","hero-header":"BS-Wyc","promo-header":"qTbTZv","uui-critical":"WzDJF2","uui-success":"SnQjUC","uui-warning":"xycbUG","uui-typography-size-12":"cxEel-","uui-typography-size-14":"rzlpeS","uui-typography-size-16":"_6rMGj-","root":"ETXhOY","border-bottom":"NL8VeU","top-shadow":"NhZeFB","size-24":"GUQsTD","size-30":"WPpbTz","size-36":"xXKtAe","size-42":"_6DqH5J","size-48":"_7AKUXM","padding-6":"uJfJsj","padding-12":"_8cASub","padding-18":"kHJhfx","padding-24":"_6BaAcc","margin-24":"-nCtma","margin-12":"cgsaKa","vPadding-12":"HiMKb3","vPadding-18":"x1fMzN","vPadding-24":"zLwcAJ","vPadding-36":"-T7r9k","vPadding-48":"WCarRH","spacing-6":"Q8iR1G","spacing-12":"_6jnx7q","spacing-18":"TQOfRE","uuiTypography":"gukPI5","heroHeader":"BS-Wyc","promoHeader":"qTbTZv","uuiCritical":"WzDJF2","uuiSuccess":"SnQjUC","uuiWarning":"xycbUG","uuiTypographySize12":"cxEel-","uuiTypographySize14":"rzlpeS","uuiTypographySize16":"_6rMGj-","borderBottom":"NL8VeU","topShadow":"NhZeFB","size24":"GUQsTD","size30":"WPpbTz","size36":"xXKtAe","size42":"_6DqH5J","size48":"_7AKUXM","padding6":"uJfJsj","padding12":"_8cASub","padding18":"kHJhfx","padding24":"_6BaAcc","margin24":"-nCtma","margin12":"cgsaKa","vPadding12":"HiMKb3","vPadding18":"x1fMzN","vPadding24":"zLwcAJ","vPadding36":"-T7r9k","vPadding48":"WCarRH","spacing6":"Q8iR1G","spacing12":"_6jnx7q","spacing18":"TQOfRE"};
 
-const FlexCell = withMods(FlexCell$1, () => [css$12.flexCell]);
+const FlexCell = withMods(FlexCell$1, () => [css$V.flexCell]);
 
 const FlexRow = withMods(FlexRow$1, (props) => {
     return [
-        css$12.root,
-        props.size !== null && css$12['size-' + (props.size || '36')],
-        props.padding && css$12['padding-' + props.padding],
-        props.vPadding && css$12['vPadding-' + props.vPadding],
-        props.margin && css$12['margin-' + props.margin],
-        props.topShadow && css$12.topShadow,
-        props.borderBottom && css$12.borderBottom,
-        props.spacing && css$12['spacing-' + props.spacing],
+        css$V.root,
+        props.size !== null && css$V['size-' + (props.size || '36')],
+        props.padding && css$V['padding-' + props.padding],
+        props.vPadding && css$V['vPadding-' + props.vPadding],
+        props.margin && css$V['margin-' + props.margin],
+        props.topShadow && css$V.topShadow,
+        props.borderBottom && css$V.borderBottom,
+        props.spacing && css$V['spacing-' + props.spacing],
         props.background && `uui-color-${props.background}`,
     ];
 });
 
-var css$11 = {"root":"yB0V5j","margin-24":"IBu-rl","padding-12":"LokTzm","padding-24":"O2-rmI","shadow":"B3SHKr","margin24":"IBu-rl","padding12":"LokTzm","padding24":"O2-rmI"};
+var css$U = {"root":"gAacU6","margin-24":"aZBTiV","padding-12":"ljZW-v","padding-24":"fq5PlF","shadow":"NAxBEY","margin24":"aZBTiV","padding12":"ljZW-v","padding24":"fq5PlF"};
 
 const Panel = withMods(VPanel, (props) => [
     'uui-panel',
-    css$11.root,
-    props.shadow && css$11.shadow,
-    props.margin && css$11['margin-' + props.margin],
+    css$U.root,
+    props.shadow && css$U.shadow,
+    props.margin && css$U['margin-' + props.margin],
     props.background && `uui-color-${props.background}`,
 ]);
 
@@ -1471,43 +1683,43 @@ const i18n = Object.assign(Object.assign({}, i18n$2), { dataPickerBody: {
         fileSizeProgress: ' of ',
     } });
 
-var css$10 = {"root":"C9bQDt","mode-block":"LaxMjY","mode-inline":"tyY8xQ","padding-0":"Vxj-Lh","padding-6":"UeinoS","padding-12":"p6NmAi","padding-18":"JEJGBM","modeBlock":"LaxMjY","modeInline":"tyY8xQ","padding0":"Vxj-Lh","padding6":"UeinoS","padding12":"p6NmAi","padding18":"JEJGBM"};
+var css$T = {"root":"RGpAzR","mode-block":"Yy-seD","mode-inline":"bCXVqO","padding-0":"R4XLj-","padding-6":"_5OIi4H","padding-12":"i7pBII","padding-18":"RzDCHj","modeBlock":"Yy-seD","modeInline":"bCXVqO","padding0":"R4XLj-","padding6":"_5OIi4H","padding12":"i7pBII","padding18":"RzDCHj"};
 
 function applyAccordionMods(mods) {
     return [
-        css$10.root,
-        css$10['mode-' + (mods.mode || 'block')],
-        mods.padding && css$10['padding-' + mods.padding],
+        css$T.root,
+        css$T['mode-' + (mods.mode || 'block')],
+        mods.padding && css$T['padding-' + mods.padding],
     ];
 }
-const Accordion = withMods(Accordion$1, applyAccordionMods, (mods) => ({
+const Accordion = withMods(uuiComponents.Accordion, applyAccordionMods, (mods) => ({
     dropdownIcon: mods.dropdownIcon !== null && systemIcons[mods.mode === 'block' ? '60' : '30'].foldingArrow,
 }));
 
-var css$$ = {"root":"SCw5ha"};
+var css$S = {"root":"Ov808D"};
 
 function applyTooltipMods(mods) {
     return [
-        css$$.root,
+        css$S.root,
         `uui-color-${mods.color || 'contrast'}`,
     ];
 }
 const Tooltip = withMods(Tooltip$1, applyTooltipMods);
 
-var css$_ = {"root":"XUfJWg","size-24":"DaZNiN","size-30":"Cl4T2h","size-36":"kAT-fR","size-42":"NlegI9","size-48":"KTodID","size24":"DaZNiN","size30":"Cl4T2h","size36":"kAT-fR","size42":"NlegI9","size48":"KTodID"};
+var css$R = {"uui-typography":"-ZCZd-","hero-header":"FbJA7S","promo-header":"yBgN2t","uui-critical":"TOKj7X","uui-success":"PNLuuV","uui-warning":"uTQ5-u","uui-typography-size-12":"uBMO-v","uui-typography-size-14":"_76lwLc","uui-typography-size-16":"_01PmI3","root":"-qFU00","size-24":"dYxt-6","size-30":"haBt-5","size-36":"t6Sy-t","size-42":"aOSnFA","size-48":"nLYo7J","uuiTypography":"-ZCZd-","heroHeader":"FbJA7S","promoHeader":"yBgN2t","uuiCritical":"TOKj7X","uuiSuccess":"PNLuuV","uuiWarning":"uTQ5-u","uuiTypographySize12":"uBMO-v","uuiTypographySize14":"_76lwLc","uuiTypographySize16":"_01PmI3","size24":"dYxt-6","size30":"haBt-5","size36":"t6Sy-t","size42":"aOSnFA","size48":"nLYo7J"};
 
-const defaultSize$6 = '36';
+const defaultSize$3 = '36';
 function applyLabeledInputMods(mods) {
-    return [css$_.root, css$_['size-' + (mods.size || defaultSize$6)]];
+    return [css$R.root, css$R['size-' + (mods.size || defaultSize$3)]];
 }
-const LabeledInput = withMods(LabeledInput$1, applyLabeledInputMods, (props) => ({
+const LabeledInput = withMods(uuiComponents.LabeledInput, applyLabeledInputMods, (props) => ({
     Tooltip,
-    infoIcon: systemIcons[props.size || defaultSize$6].help,
+    infoIcon: systemIcons[props.size || defaultSize$3].help,
 }));
 
-var css$Z = {"root":"QYIUDV"};
+var css$Q = {"root":"lYA1x5"};
 
-const RadioGroup = withMods(RadioGroup$1, () => [css$Z.root], () => ({ RadioInput }));
+const RadioGroup = withMods(RadioGroup$1, () => [css$Q.root], () => ({ RadioInput }));
 
 function applyScrollBarsMods() {
     return [
@@ -1516,51 +1728,75 @@ function applyScrollBarsMods() {
 }
 const ScrollBars = withMods(ScrollBars$1, applyScrollBarsMods);
 
-const VirtualList = VirtualList$1;
+var css$P = {"scroll-container":"F5k5Hp","list-container":"CJK86n","scrollContainer":"F5k5Hp","listContainer":"CJK86n"};
 
-var css$Y = {"root":"i3VYZA"};
+var css$O = {"root":"QhmkGn"};
 
-var css$X = {"root":"suOYKL","uui-spinner":"o-7gN5","uuiSpinner":"o-7gN5"};
-
-function applySpinnerMods() {
-    return [css$X.root, 'uui-spinner'];
-}
-const Spinner = withMods(Spinner$1, applySpinnerMods);
+const Blocker = withMods(Blocker$1, () => [css$O.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__default.createElement(Spinner, null)) }));
 
-const Blocker = withMods(Blocker$1, () => [css$Y.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__default.createElement(Spinner, null)) }));
+const VirtualList = React.forwardRef((props, ref) => {
+    const { listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef, } = useVirtualList({
+        value: props.value,
+        onValueChange: props.onValueChange,
+        onScroll: props.onScroll,
+        rowsCount: props.rowsCount,
+        rowsSelector: props.rowsSelector,
+    });
+    React.useImperativeHandle(ref, () => scrollContainerRef.current, [scrollContainerRef.current]);
+    const scrollShadows = useScrollShadows({ root: scrollContainerRef.current });
+    const renderRows = () => {
+        var _a;
+        return ((_a = props.renderRows) === null || _a === void 0 ? void 0 : _a.call(props, {
+            listContainerRef, estimatedHeight, offsetY, scrollShadows,
+        })) || (React.createElement("div", { className: css$P.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+            React.createElement("div", { ref: listContainerRef, role: props.role, style: { marginTop: offsetY } }, props.rows)));
+    };
+    const scrollBarsRef = React.useCallback((scrollbars) => {
+        var _a;
+        if (!((_a = scrollbars === null || scrollbars === void 0 ? void 0 : scrollbars.container) === null || _a === void 0 ? void 0 : _a.firstChild))
+            return;
+        scrollContainerRef.current = scrollbars.container.firstChild;
+    }, []);
+    return (React.createElement(ScrollBars, { cx: cx$1(css$P.scrollContainer, props.cx, {
+            [uuiMarkers.scrolledLeft]: scrollShadows.horizontalLeft,
+            [uuiMarkers.scrolledRight]: scrollShadows.horizontalRight,
+            [uuiMarkers.scrolledTop]: scrollShadows.verticalTop,
+            [uuiMarkers.scrolledBottom]: scrollShadows.verticalBottom,
+        }), onScroll: handleScroll, renderView: ({ style }) => React.createElement(VirtualListView, { isLoading: props.isLoading, style: style }), ref: scrollBarsRef }, renderRows()));
+});
+const VirtualListView = React.forwardRef((props, ref) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", Object.assign({}, props.rawProps, { style: Object.assign(Object.assign({}, props.style), { position: 'relative', flex: '1 1 auto', display: 'flex', flexDirection: 'column', overflow: props.isLoading ? 'hidden' : 'scroll', marginRight: props.isLoading ? 0 : props.style.marginRight, marginBottom: props.isLoading ? 0 : props.style.marginBottom }), ref: ref }), props.children),
+        React.createElement(Blocker, { isEnabled: props.isLoading })));
+});
+VirtualList.displayName = 'VirtualList';
 
-var css$W = {"root":"u6NUSh"};
+var css$N = {"root":"PHGe32"};
 
-const CheckboxGroup = withMods(CheckboxGroup$1, () => [css$W.root], () => ({ CheckboxInput: Checkbox }));
+const CheckboxGroup = withMods(CheckboxGroup$1, () => [css$N.root], () => ({ CheckboxInput: Checkbox }));
 
-var css$V = {"body":"VIlCPT","modal":"o5-RsD","search-wrapper":"U12jeR","checkbox":"KLKorc","no-found-size-24":"o7DpqL","no-found-size-30":"guJA44","no-found-size-36":"Z6kmkG","no-found-size-42":"_4pLSof","searchWrapper":"U12jeR","noFoundSize24":"o7DpqL","noFoundSize30":"guJA44","noFoundSize36":"Z6kmkG","noFoundSize42":"_4pLSof"};
+var css$M = {"uui-typography":"CcJUEM","hero-header":"sW2C9A","promo-header":"K8BvX8","uui-critical":"CNgxgM","uui-success":"U5-zAZ","uui-warning":"LgL-f5","uui-typography-size-12":"N-tuF7","uui-typography-size-14":"DMxONi","uui-typography-size-16":"fqGVbF","body":"PaMsU9","modal":"rar-ps","search-wrapper":"CCuVGA","checkbox":"Yy4qtl","no-found-size-24":"yMc3EV","no-found-size-30":"qNoKon","no-found-size-36":"UYvZLA","no-found-size-42":"CfyGGE","uuiTypography":"CcJUEM","heroHeader":"sW2C9A","promoHeader":"K8BvX8","uuiCritical":"CNgxgM","uuiSuccess":"U5-zAZ","uuiWarning":"LgL-f5","uuiTypographySize12":"N-tuF7","uuiTypographySize14":"DMxONi","uuiTypographySize16":"fqGVbF","searchWrapper":"CCuVGA","noFoundSize24":"yMc3EV","noFoundSize30":"qNoKon","noFoundSize36":"UYvZLA","noFoundSize42":"CfyGGE"};
 
 class DataPickerBody extends PickerBodyBase {
     constructor() {
         super(...arguments);
         this.lens = Lens.onEditableComponent(this);
         this.searchLens = this.lens.prop('search');
-        this.renderRowsContainer = ({ listContainerRef, estimatedHeight, offsetY }) => {
-            return (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("div", { className: css$V.listContainer, style: { minHeight: `${estimatedHeight}px` } },
-                    React__default.createElement("div", { ref: listContainerRef, role: "listbox", style: { marginTop: offsetY } }, this.props.rows)),
-                React__default.createElement(Blocker, { isEnabled: this.props.isReloading })));
-        };
     }
     renderNotFound() {
         if (this.props.renderNotFound) {
             return this.props.renderNotFound();
         }
-        return (React__default.createElement(FlexCell$1, { cx: css$V[`no-found-size-${this.props.searchSize || 36}`], grow: 1, textAlign: "center" },
+        return (React__default.createElement(FlexCell$1, { cx: css$M[`no-found-size-${this.props.searchSize || 36}`], grow: 1, textAlign: "center" },
             React__default.createElement(Text, { size: this.props.searchSize || '36' }, i18n.dataPickerBody.noRecordsMessage)));
     }
     render() {
         const searchSize = isMobile() ? '48' : this.props.searchSize || '36';
         return (React__default.createElement(React__default.Fragment, null,
-            this.showSearch() && (React__default.createElement("div", { key: "search", className: css$V.searchWrapper },
+            this.showSearch() && (React__default.createElement("div", { key: "search", className: css$M.searchWrapper },
                 React__default.createElement(FlexCell$1, { grow: 1 },
                     React__default.createElement(SearchInput, Object.assign({ ref: this.searchRef, placeholder: i18n.dataPickerBody.searchPlaceholder }, this.searchLens.toProps(), { onKeyDown: this.searchKeyDown, size: searchSize, debounceDelay: this.props.searchDebounceDelay }))))),
-            React__default.createElement(FlexRow, { key: "body", cx: cx$1(css$V.body, css$V[this.props.editMode], css$V[this.props.selectionMode]), rawProps: { style: { maxHeight: this.props.maxHeight } } }, this.props.rowsCount > 0 ? (React__default.createElement(VirtualList, Object.assign({}, this.lens.toProps(), { renderRows: this.renderRowsContainer, rawProps: this.props.rawProps, rowsCount: this.props.rowsCount, disableScroll: this.props.isReloading }))) : (this.renderNotFound()))));
+            React__default.createElement(FlexRow, { key: "body", cx: cx$1(css$M.body, css$M[this.props.editMode], css$M[this.props.selectionMode]), rawProps: { style: { maxHeight: this.props.maxHeight } } }, this.props.rowsCount > 0 ? (React__default.createElement(VirtualList, Object.assign({}, this.lens.toProps(), { rows: this.props.rows, rawProps: this.props.rawProps, rowsCount: this.props.rowsCount, isLoading: this.props.isReloading }))) : (this.renderNotFound()))));
     }
 }
 
@@ -1594,64 +1830,64 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = React__default.memo(DataPickerFooterImpl);
 
-var css$U = {"header":"_2SP8Gr","close":"-lAnPH"};
+var css$L = {"header":"K9dJGL","close":"uPysLT"};
 
-var _path$B;
-function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
+var _path$z;
+function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
 var SvgNavigationClose24 = function SvgNavigationClose24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$C({
+  return /*#__PURE__*/React.createElement("svg", _extends$A({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$B || (_path$B = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$z || (_path$z = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$C = /*#__PURE__*/forwardRef(SvgNavigationClose24);
+var ForwardRef$A = /*#__PURE__*/forwardRef(SvgNavigationClose24);
 
 const DataPickerHeaderImpl = (props) => {
     const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
-    return (React__default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: css$U.header },
+    return (React__default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: css$L.header },
         React__default.createElement(Text, { size: "48", font: "semibold" }, title),
-        React__default.createElement(IconButton, { icon: ForwardRef$C, onClick: () => { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$U.close })));
+        React__default.createElement(IconButton, { icon: ForwardRef$A, onClick: () => { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$L.close })));
 };
 const DataPickerHeader = React__default.memo(DataPickerHeaderImpl);
 
-var _path$A;
-function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
+var _path$y;
+function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
 var SvgNavigationChevronDown18 = function SvgNavigationChevronDown18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$B({
+  return /*#__PURE__*/React.createElement("svg", _extends$z({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$A || (_path$A = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$y || (_path$y = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M12.443 6.442 9 9.877 5.558 6.442 4.5 7.5 9 12l4.5-4.5-1.057-1.058z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$B = /*#__PURE__*/forwardRef(SvgNavigationChevronDown18);
+var ForwardRef$z = /*#__PURE__*/forwardRef(SvgNavigationChevronDown18);
 
-var css$T = {"cell":"a-eia1","wrapper":"eddJ44","align-widgets-top":"Oxz1nk","size-24":"y7gUwL","folding-arrow":"ZRqECH","size-30":"uIhcWZ","size-36":"_2gou0C","size-42":"n62SC4","size-48":"SE4GaK","size-60":"y5hmTO","align-widgets-center":"_64q22J","padding-12":"iY5j5b","padding-24":"iQXegu","padding-left-12":"_8l6OHX","padding-left-24":"-e717L","padding-right-24":"EeClT9","drag-handle":"yrnuz7","checkbox":"mDtBQB","indent":"g1ocIN","folding-arrow-12":"OOUtlG","folding-arrow-18":"w4x0nL","icon-container":"yCNIse","loading-cell":"PJ4AtR","alignWidgetsTop":"Oxz1nk","size24":"y7gUwL","foldingArrow":"ZRqECH","size30":"uIhcWZ","size36":"_2gou0C","size42":"n62SC4","size48":"SE4GaK","size60":"y5hmTO","alignWidgetsCenter":"_64q22J","padding12":"iY5j5b","padding24":"iQXegu","paddingLeft12":"_8l6OHX","paddingLeft24":"-e717L","paddingRight24":"EeClT9","dragHandle":"yrnuz7","foldingArrow12":"OOUtlG","foldingArrow18":"w4x0nL","iconContainer":"yCNIse","loadingCell":"PJ4AtR"};
+var css$K = {"cell":"P4X6-0","wrapper":"FQCCcw","align-widgets-top":"LdbiF4","size-24":"QNbjhK","folding-arrow":"RbCwvA","size-30":"UI-1HN","size-36":"AbgWx8","size-42":"FRvmI7","size-48":"-V0-dR","size-60":"m8XPtP","align-widgets-center":"Trsw9-","padding-12":"wUwbTn","padding-24":"BbMKgU","padding-left-12":"soTF-9","padding-left-24":"kNijPu","padding-right-24":"pUGE7e","drag-handle":"yOoRDp","checkbox":"_83Q-W0","indent":"HtQwnk","folding-arrow-12":"YJD3FZ","folding-arrow-18":"ZrasWF","icon-container":"eIbDdJ","loading-cell":"_6-BCg3","alignWidgetsTop":"LdbiF4","size24":"QNbjhK","foldingArrow":"RbCwvA","size30":"UI-1HN","size36":"AbgWx8","size42":"FRvmI7","size48":"-V0-dR","size60":"m8XPtP","alignWidgetsCenter":"Trsw9-","padding12":"wUwbTn","padding24":"BbMKgU","paddingLeft12":"soTF-9","paddingLeft24":"kNijPu","paddingRight24":"pUGE7e","dragHandle":"yOoRDp","foldingArrow12":"YJD3FZ","foldingArrow18":"ZrasWF","iconContainer":"eIbDdJ","loadingCell":"_6-BCg3"};
 
 function DataTableRowAddons(props) {
     var _a, _b;
     const row = props.rowProps;
     const additionalItemSize = +props.size < 30 ? '12' : '18';
     return (React.createElement(React.Fragment, null,
-        ((_a = row.dnd) === null || _a === void 0 ? void 0 : _a.srcData) && React.createElement(DragHandle, { key: "dh", cx: css$T.dragHandle }),
-        ((_b = row === null || row === void 0 ? void 0 : row.checkbox) === null || _b === void 0 ? void 0 : _b.isVisible) && (React.createElement(Checkbox, { key: "cb", cx: css$T.checkbox, tabIndex: props.tabIndex, size: additionalItemSize, value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => { var _a; return (_a = row.onCheck) === null || _a === void 0 ? void 0 : _a.call(row, row); }, isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
-        row.indent > 0 && (React.createElement("div", { key: "fold", className: css$T.indent, style: { marginLeft: (row.indent - 1) * 24 } }, row.isFoldable && (React.createElement(IconContainer, { rawProps: {
+        ((_a = row.dnd) === null || _a === void 0 ? void 0 : _a.srcData) && React.createElement(DragHandle, { key: "dh", cx: css$K.dragHandle }),
+        ((_b = row === null || row === void 0 ? void 0 : row.checkbox) === null || _b === void 0 ? void 0 : _b.isVisible) && (React.createElement(Checkbox, { key: "cb", cx: css$K.checkbox, tabIndex: props.tabIndex, size: additionalItemSize, value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => { var _a; return (_a = row.onCheck) === null || _a === void 0 ? void 0 : _a.call(row, row); }, isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
+        row.indent > 0 && (React.createElement("div", { key: "fold", className: css$K.indent, style: { marginLeft: (row.indent - 1) * 24 } }, row.isFoldable && (React.createElement(IconContainer, { rawProps: {
                 'aria-label': row.isFolded ? 'Unfold' : 'Fold',
                 role: 'button',
-            }, key: "icon", icon: ForwardRef$B, cx: [
-                css$T.foldingArrow, css$T[`folding-arrow-${additionalItemSize}`], uuiMarkers.clickable, css$T.iconContainer,
+            }, key: "icon", icon: ForwardRef$z, cx: [
+                css$K.foldingArrow, css$K[`folding-arrow-${additionalItemSize}`], uuiMarkers.clickable, css$K.iconContainer,
             ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row) }))))));
 }
 function DataTableCell(props) {
@@ -1662,7 +1898,7 @@ function DataTableCell(props) {
     props.renderPlaceholder = props.renderPlaceholder
         || (() => (
         // remove `css.loadingCell` after` removing `margin: 0 3px 3px 0` from `TextPlaceholder` `loadingWord` class styles.
-        React.createElement(Text, { key: "t", size: props.size !== '60' ? props.size : '48', cx: css$T.loadingCell },
+        React.createElement(Text, { key: "t", size: props.size !== '60' ? props.size : '48', cx: css$K.loadingCell },
             React.createElement(TextPlaceholder, null))));
     props.renderUnknown = props.renderUnknown
         || (() => (React.createElement(Text, { key: "t", size: props.size !== '60' ? props.size : '48' }, "Unknown")));
@@ -1672,67 +1908,67 @@ function DataTableCell(props) {
         'uui-dt-vars',
         'data-table-cell',
         props.cx,
-        css$T.cell,
-        css$T['size-' + (props.size || '36')],
-        css$T[`padding-${props.padding || (isEditable && !props.rowProps.isLoading && '0') || '12'}`],
-        props.isFirstColumn && css$T[`padding-left-${props.padding || (isEditable && !props.rowProps.isLoading && '12') || '24'}`],
-        props.isLastColumn && css$T['padding-right-24'],
-        css$T[`align-widgets-${props.alignActions || 'top'}`],
+        css$K.cell,
+        css$K['size-' + (props.size || '36')],
+        css$K[`padding-${props.padding || (isEditable && !props.rowProps.isLoading && '0') || '12'}`],
+        props.isFirstColumn && css$K[`padding-left-${props.padding || (isEditable && !props.rowProps.isLoading && '12') || '24'}`],
+        props.isLastColumn && css$K['padding-right-24'],
+        css$K[`align-widgets-${props.alignActions || 'top'}`],
         (props.border || isEditable) && 'uui-dt-vertical-cell-border',
     ];
     return React.createElement(DataTableCell$1, Object.assign({}, props));
 }
 
-var _path$z;
-function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
+var _path$x;
+function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
 var SvgNotificationDone24 = function SvgNotificationDone24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$A({
+  return /*#__PURE__*/React.createElement("svg", _extends$y({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$z || (_path$z = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$x || (_path$x = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "m9.727 16.075-4.295-4.388L4 13.149 9.727 19 22 6.463 20.568 5 9.728 16.075z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$A = /*#__PURE__*/forwardRef(SvgNotificationDone24);
+var ForwardRef$y = /*#__PURE__*/forwardRef(SvgNotificationDone24);
 
-var _path$y;
-function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
+var _path$w;
+function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
 var SvgNotificationDone18 = function SvgNotificationDone18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$z({
+  return /*#__PURE__*/React.createElement("svg", _extends$x({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$y || (_path$y = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$w || (_path$w = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M7.136 11.91 4.034 8.776 3 9.821 7.136 14 16 5.045 14.966 4l-7.83 7.91z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$z = /*#__PURE__*/forwardRef(SvgNotificationDone18);
+var ForwardRef$x = /*#__PURE__*/forwardRef(SvgNotificationDone18);
 
-var _path$x;
-function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
+var _path$v;
+function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
 var SvgNotificationDone12 = function SvgNotificationDone12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$y({
+  return /*#__PURE__*/React.createElement("svg", _extends$w({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$x || (_path$x = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
     d: "M11 3.6 9.462 2 4.846 6.8 2.538 4.4 1 6l3.846 4L11 3.6z"
   })));
 };
-var ForwardRef$y = /*#__PURE__*/forwardRef(SvgNotificationDone12);
+var ForwardRef$w = /*#__PURE__*/forwardRef(SvgNotificationDone12);
 
-var css$S = {"render-item":"wreqOo","icon-wrapper":"IsbXkM","picker-row":"pitB9v","icon-default":"CAn8HC","icon-primary":"_4--nkQ","renderItem":"wreqOo","iconWrapper":"IsbXkM","pickerRow":"pitB9v","iconDefault":"CAn8HC","iconPrimary":"_4--nkQ"};
+var css$J = {"uui-typography":"rZJwh2","hero-header":"DBbf57","promo-header":"IKnvOY","uui-critical":"apQM8G","uui-success":"dHF5nl","uui-warning":"GlwlhS","uui-typography-size-12":"jfeql1","uui-typography-size-14":"ZNFM5w","uui-typography-size-16":"komUri","render-item":"XOVaaH","icon-wrapper":"lEw-ee","picker-row":"_63E29s","icon-default":"cf4ps3","icon-primary":"Ith4d5","uuiTypography":"rZJwh2","heroHeader":"DBbf57","promoHeader":"IKnvOY","uuiCritical":"apQM8G","uuiSuccess":"dHF5nl","uuiWarning":"GlwlhS","uuiTypographySize12":"jfeql1","uuiTypographySize14":"ZNFM5w","uuiTypographySize16":"komUri","renderItem":"XOVaaH","iconWrapper":"lEw-ee","pickerRow":"_63E29s","iconDefault":"cf4ps3","iconPrimary":"Ith4d5"};
 
 class DataPickerRow extends React.Component {
     constructor() {
@@ -1740,26 +1976,26 @@ class DataPickerRow extends React.Component {
         this.getIcon = (size) => {
             switch (size) {
                 case '24':
-                    return ForwardRef$y;
+                    return ForwardRef$w;
                 case '30':
-                    return ForwardRef$z;
+                    return ForwardRef$x;
                 case '36':
-                    return ForwardRef$z;
+                    return ForwardRef$x;
                 case '42':
-                    return ForwardRef$A;
+                    return ForwardRef$y;
                 default:
-                    return ForwardRef$z;
+                    return ForwardRef$x;
             }
         };
         this.column = {
             key: 'name',
             grow: 1,
             width: 0,
-            render: (item, rowProps) => (React.createElement("div", { key: rowProps.id, className: css$S.renderItem },
+            render: (item, rowProps) => (React.createElement("div", { key: rowProps.id, className: css$J.renderItem },
                 this.props.renderItem(item, rowProps),
                 React.createElement(FlexSpacer, null),
-                (rowProps.isChildrenSelected || rowProps.isSelected) && (React.createElement("div", { className: css$S.iconWrapper },
-                    React.createElement(IconContainer, { icon: this.getIcon(this.props.size), cx: rowProps.isChildrenSelected ? css$S.iconDefault : css$S.iconPrimary, rawProps: { 'aria-label': rowProps.isChildrenSelected
+                (rowProps.isChildrenSelected || rowProps.isSelected) && (React.createElement("div", { className: css$J.iconWrapper },
+                    React.createElement(IconContainer, { icon: this.getIcon(this.props.size), cx: rowProps.isChildrenSelected ? css$J.iconDefault : css$J.iconPrimary, rawProps: { 'aria-label': rowProps.isChildrenSelected
                                 ? 'Child is selected'
                                 : 'Selected' } }))))),
         };
@@ -1768,31 +2004,31 @@ class DataPickerRow extends React.Component {
         };
     }
     render() {
-        return React.createElement(DataPickerRow$1, Object.assign({}, this.props, { cx: [css$S.pickerRow, this.props.cx], renderContent: this.renderContent }));
+        return React.createElement(DataPickerRow$1, Object.assign({}, this.props, { cx: [css$J.pickerRow, this.props.cx], renderContent: this.renderContent }));
     }
 }
 
-var css$R = {"done":"_1f5JI6","container":"lMBOdO"};
+var css$I = {"uui-typography":"_9qNf2Q","hero-header":"XKxME7","promo-header":"c7VCDM","uui-critical":"bU4FWu","uui-success":"-JUWAS","uui-warning":"LqvTxa","uui-typography-size-12":"wcRLHM","uui-typography-size-14":"PQRQoH","uui-typography-size-16":"_29wwWE","done":"E5WUzg","container":"vs-6iP","uuiTypography":"_9qNf2Q","heroHeader":"XKxME7","promoHeader":"c7VCDM","uuiCritical":"bU4FWu","uuiSuccess":"-JUWAS","uuiWarning":"LqvTxa","uuiTypographySize12":"wcRLHM","uuiTypographySize14":"PQRQoH","uuiTypographySize16":"_29wwWE"};
 
 const MobileDropdownWrapper = (props) => {
     const isMobileView = isMobile();
-    return (React__default.createElement(DropdownContainer, Object.assign({}, props, { cx: [css$R.container, props.cx], rawProps: props.rawProps, onKeyDown: props.onKeyDown, focusLock: props.focusLock, width: props.width }),
+    return (React__default.createElement(DropdownContainer, Object.assign({}, props, { cx: [css$I.container, props.cx], rawProps: props.rawProps, onKeyDown: props.onKeyDown, focusLock: props.focusLock, width: props.width }),
         isMobileView && React__default.createElement(DataPickerHeader, { title: props.title, close: props.onClose }),
         props.children,
-        isMobileView && React__default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => { var _a; return (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$R.done, size: "48" })));
+        isMobileView && React__default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => { var _a; return (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$I.done, size: "48" })));
 };
 
-var _path$w, _path2$1;
-function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
+var _path$u, _path2$1;
+function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
 var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$x({
+  return /*#__PURE__*/React.createElement("svg", _extends$v({
     width: 66,
     height: 67,
     viewBox: "0 0 66 67",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$w || (_path$w = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
     d: "M0 33.5C0 15.275 14.775.5 33 .5s33 14.775 33 33-14.775 33-33 33-33-14.775-33-33Z",
     fill: "#EBEDF5"
   })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
@@ -1802,9 +2038,9 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
     fill: "#6C6F80"
   })));
 };
-var ForwardRef$x = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
+var ForwardRef$v = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
 
-var css$Q = {"sub-header-wrapper":"Upn5eX","switch":"JgdYX7","no-found-modal-container":"mdYviJ","no-found-modal-container-icon":"kwBGjR","no-found-modal-container-text":"DfNAQX","subHeaderWrapper":"Upn5eX","$switch$":"JgdYX7","noFoundModalContainer":"mdYviJ","noFoundModalContainerIcon":"kwBGjR","noFoundModalContainerText":"DfNAQX"};
+var css$H = {"uui-typography":"Ur5MiI","hero-header":"_0FoUFa","promo-header":"xR-BAk","uui-critical":"Wf0BDP","uui-success":"jNVRk1","uui-warning":"aDfBQZ","uui-typography-size-12":"_9bFNLb","uui-typography-size-14":"_0dfgBH","uui-typography-size-16":"yhaF4a","sub-header-wrapper":"xtIzf8","switch":"g22RGI","no-found-modal-container":"JtVJ9C","no-found-modal-container-icon":"wgf3tX","no-found-modal-container-text":"_8Kfh6N","uuiTypography":"Ur5MiI","heroHeader":"_0FoUFa","promoHeader":"xR-BAk","uuiCritical":"Wf0BDP","uuiSuccess":"jNVRk1","uuiWarning":"aDfBQZ","uuiTypographySize12":"_9bFNLb","uuiTypographySize14":"_0dfgBH","uuiTypographySize16":"yhaF4a","subHeaderWrapper":"xtIzf8","$switch$":"g22RGI","noFoundModalContainer":"JtVJ9C","noFoundModalContainerIcon":"wgf3tX","noFoundModalContainerText":"_8Kfh6N"};
 
 function PickerModal(props) {
     const { view, selection, dataSourceStateLens, showSelectedLens, dataSourceState, getDataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = usePickerModal(props);
@@ -1820,17 +2056,17 @@ function PickerModal(props) {
             React__default.createElement(Button, { color: "accent", caption: i18n.pickerModal.selectButton, onClick: () => props.success(selection) })));
     };
     const renderNotFound = () => {
-        return props.renderNotFound ? (props.renderNotFound({ search: dataSourceState.search, onClose: () => props.success(null) })) : (React__default.createElement("div", { className: css$Q.noFoundModalContainer },
-            React__default.createElement(IconContainer, { cx: css$Q.noFoundModalContainerIcon, icon: ForwardRef$x }),
-            React__default.createElement(Text, { cx: css$Q.noFoundModalContainerText, font: "semibold", fontSize: "16", lineHeight: "24", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsMessage),
-            React__default.createElement(Text, { cx: css$Q.noFoundModalContainerText, fontSize: "12", lineHeight: "18", font: "regular", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsSubTitle)));
+        return props.renderNotFound ? (props.renderNotFound({ search: dataSourceState.search, onClose: () => props.success(null) })) : (React__default.createElement("div", { className: css$H.noFoundModalContainer },
+            React__default.createElement(IconContainer, { cx: css$H.noFoundModalContainerIcon, icon: ForwardRef$v }),
+            React__default.createElement(Text, { cx: css$H.noFoundModalContainerText, font: "semibold", fontSize: "16", lineHeight: "24", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsMessage),
+            React__default.createElement(Text, { cx: css$H.noFoundModalContainerText, fontSize: "12", lineHeight: "18", font: "regular", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsSubTitle)));
     };
     const dataRows = getRows();
     const rows = dataRows.map((row) => renderRow(row));
     return (React__default.createElement(ModalBlocker, Object.assign({}, props),
         React__default.createElement(ModalWindow, { width: 600, height: 700 },
             React__default.createElement(ModalHeader, { title: props.caption || i18n.pickerModal.headerTitle, onClose: () => props.abort() }),
-            React__default.createElement(FlexCell, { cx: css$Q.subHeaderWrapper },
+            React__default.createElement(FlexCell, { cx: css$H.subHeaderWrapper },
                 React__default.createElement(FlexRow, { vPadding: "24" },
                     React__default.createElement(SearchInput, Object.assign({}, dataSourceStateLens.prop('search').toProps(), { onKeyDown: (e) => handleDataSourceKeyboard({
                             value: getDataSourceState(),
@@ -1839,168 +2075,24 @@ function PickerModal(props) {
                             rows: dataRows,
                             searchPosition: 'body',
                         }, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder }))),
-                !isSingleSelect() && (React__default.createElement(Switch, Object.assign({ cx: css$Q.switch, size: "18" }, showSelectedLens.toProps(), { isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" }))),
+                !isSingleSelect() && (React__default.createElement(Switch, Object.assign({ cx: css$H.switch, size: "18" }, showSelectedLens.toProps(), { isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" }))),
                 props.renderFilter && React__default.createElement(FlexCell, { grow: 2 }, props.renderFilter(dataSourceStateLens.prop('filter').toProps()))),
             React__default.createElement(DataPickerBody, Object.assign({}, getListProps(), { value: getDataSourceState(), onValueChange: handleDataSourceValueChange, search: dataSourceStateLens.prop('search').toProps(), showSearch: false, rows: rows, renderNotFound: renderNotFound, editMode: "modal" })),
             React__default.createElement(ModalFooter, { padding: "24", vPadding: "24" }, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$P = {"root":"Cqz3Ry"};
-
-const AvatarStack = withMods(AvatarStack$1, () => [css$P.root]);
-
-var css$O = {"root":"_8j2Pdp","size-18":"qMV7zC","size-24":"R2OFMy","size-30":"BgaLX3","size-36":"qLi8c3","size-42":"ydCAMA","size-48":"xn-v4s","size18":"qMV7zC","size24":"R2OFMy","size30":"BgaLX3","size36":"qLi8c3","size42":"ydCAMA","size48":"xn-v4s"};
-
-const defaultSize$5 = '36';
-const mapSize$1 = {
-    48: '48',
-    42: '48',
-    36: '36',
-    30: '30',
-    24: '30',
-    18: '18',
-};
-function applyBadgeMods(mods) {
-    return [
-        'uui-badge',
-        css$O.root,
-        css$O['size-' + (mods.size || defaultSize$5)],
-        `fill-${mods.fill || 'solid'}`,
-        mods.color && `uui-color-${mods.color}`,
-    ];
-}
-const Badge = withMods(Button$1, applyBadgeMods, (props) => ({
-    dropdownIcon: systemIcons[(props.size && mapSize$1[props.size]) || defaultSize$5].foldingArrow,
-    clearIcon: systemIcons[(props.size && mapSize$1[props.size]) || defaultSize$5].clear,
-    countPosition: 'left',
-}));
-
-var css$N = {"root":"MS24E-","size-18":"WT3Ivg","size-24":"gGgt8L","size-30":"gY40BV","size-36":"xcA7Nm","size-42":"-PGvxx","size-48":"cpmfsB","size18":"WT3Ivg","size24":"gGgt8L","size30":"gY40BV","size36":"xcA7Nm","size42":"-PGvxx","size48":"cpmfsB"};
-
-const defaultSize$4 = '36';
-const mapSize = {
-    48: '48',
-    42: '48',
-    36: '36',
-    30: '30',
-    24: '30',
-    18: '18',
-};
-function applyTagMods(mods) {
-    return [css$N['size-' + (mods.size || defaultSize$4)], css$N.root, 'uui-color-gray', 'uui-tag'];
-}
-const Tag = withMods(Button$1, applyTagMods, (props) => ({
-    dropdownIcon: systemIcons[mapSize[props.size] || defaultSize$4].foldingArrow,
-    clearIcon: systemIcons[mapSize[props.size] || defaultSize$4].clear,
-}));
-
-var css$M = {"root":"A1e7MR","spacer":"ioSBM8","mode-ghost":"NhTAvE","size-24":"QRazxp","size-30":"un047X","navigation-size-24":"LWOBKR","navigation-size-30":"k3cF4G","modeGhost":"NhTAvE","size24":"QRazxp","size30":"un047X","navigationSize24":"LWOBKR","navigationSize30":"k3cF4G"};
-
-var _path$v;
-function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
-var SvgNavigationChevronLeft12 = function SvgNavigationChevronLeft12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$w({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    viewBox: "0 0 12 12",
-    ref: ref
-  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M7.705 3.705 7 3 4 6l3 3 .705-.705L5.415 6l2.29-2.295z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$w = /*#__PURE__*/forwardRef(SvgNavigationChevronLeft12);
-
-var _path$u;
-function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
-var SvgNavigationChevronRight12 = function SvgNavigationChevronRight12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$v({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    viewBox: "0 0 12 12",
-    ref: ref
-  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "m5 3-.705.705L6.585 6l-2.29 2.295L5 9l3-3-3-3z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$v = /*#__PURE__*/forwardRef(SvgNavigationChevronRight12);
-
-function Paginator(props) {
-    const renderPaginator = (params) => {
-        var _a, _b;
-        return (React__default.createElement("nav", Object.assign({ role: "navigation", className: cx(css$M.root, 'uui-paginator') }, params.rawProps),
-            React__default.createElement(Button, { cx: css$M[`navigation-size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$J : ForwardRef$w, onClick: params.goToPrev, isDisabled: params.isFirst, fill: "outline", color: "secondary" }),
-            params.pages.map((page, index) => {
-                var _a, _b;
-                if (page.type === 'spacer') {
-                    return (React__default.createElement(Button, { cx: cx(css$M[`size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], css$M.spacer), size: params.size, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1 }));
-                }
-                else {
-                    return (React__default.createElement(Button, { cx: cx(css$M[`size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], css$M[`mode-${!page.isActive && 'ghost'}`]), size: params.size, key: page.pageNumber, caption: page.pageNumber, onClick: () => { var _a; return (_a = page.onClick) === null || _a === void 0 ? void 0 : _a.call(page); }, rawProps: { 'aria-current': page.isActive }, fill: (page.isActive && 'outline') || 'ghost', color: "primary" }));
-                }
-            }),
-            React__default.createElement(Button, { cx: css$M[`navigation-size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$I : ForwardRef$v, onClick: params.goToNext, isDisabled: params.isLast, fill: "outline", color: "secondary" })));
-    };
-    return React__default.createElement(Paginator$1, Object.assign({}, props, { render: renderPaginator }));
-}
-
-var css$L = {"root":"ad-0f4","bar":"tnbgJt","progressBar-indeterminate":"_1hGUFm","size-12":"_0qMUN9","size-18":"Ri5BiU","size-24":"abPz-b","progressBarIndeterminate":"_1hGUFm","size12":"_0qMUN9","size18":"Ri5BiU","size24":"abPz-b"};
-
-const IndeterminateBar = React.forwardRef((props, ref) => {
-    return (React.createElement("div", { ref: ref, className: cx('uui-indeterminate_bar', props.cx, css$L.root, css$L[`size-${props.size || 12}`]) },
-        React.createElement("div", { className: cx(css$L.bar) })));
-});
-
-var css$K = {"root":"euBBqd","striped":"_6Fl2Mx","animate-stripes":"Ixlc0M","size-12":"p3DSUZ","size-18":"yf8gLh","size-24":"Zhpq7s","animateStripes":"Ixlc0M","size12":"p3DSUZ","size18":"yf8gLh","size24":"Zhpq7s"};
-
-const defaultSize$3 = '12';
-function applyProgressBarMods(mods) {
-    const size = mods.size || defaultSize$3;
-    return [
-        css$K.root,
-        css$K[`size-${size}`],
-        mods.striped && css$K.striped,
-    ];
-}
-const ProgressBar = withMods(ProgressBar$1, applyProgressBarMods, (props) => ({
-    hideLabel: props.hideLabel || props.striped,
-}));
-
-var css$J = {"root":"-UOWB4"};
-
-const IndicatorBar = React.forwardRef((props, ref) => {
-    const { progress } = props;
-    return progress || progress === 0 ? (React.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx(css$J.root, props.cx), hideLabel: true })) : (React.createElement(IndeterminateBar, { ref: ref, cx: cx(css$J.root, props.cx) }));
-});
-
-var css$I = {"root":"dxRv9o"};
-
-const Informer = forwardRef((props, ref) => {
-    return (React__default.createElement("div", { ref: ref, className: cx([
-            css$I.root,
-            'uui-informer',
-            `size-${props.size || 24}`,
-            props.color && `uui-color-${props.color}`,
-        ]) }, props.caption));
-});
-
 const MAX_ITEMS = 100;
 const getMaxItems = (maxItems) => maxItems || maxItems === 0 ? maxItems : MAX_ITEMS;
 
-var css$H = {"root":"F5hGJf","mode-form":"V5eEqK","mode-cell":"zELSkF","mode-inline":"IGw6sX","size-24":"GKVBns","size-30":"pc2fqF","size-36":"N-tzNJ","size-42":"r9535-","size-48":"JPC2so","modeForm":"V5eEqK","modeCell":"zELSkF","modeInline":"IGw6sX","size24":"GKVBns","size30":"pc2fqF","size36":"N-tzNJ","size42":"r9535-","size48":"JPC2so"};
+var css$G = {"uui-typography":"-kMsnj","hero-header":"D6pxR7","promo-header":"_6j9uJd","uui-critical":"GeYQ8j","uui-success":"sVFh9E","uui-warning":"IpHU7t","uui-typography-size-12":"_-2hQwF","uui-typography-size-14":"kDcap9","uui-typography-size-16":"dXWelT","root":"-OJMCg","mode-form":"_9QuoKh","mode-cell":"ZGOQq6","mode-inline":"nFp9-k","size-24":"vnyssf","size-30":"tzYHLO","size-36":"_4k9Qp1","size-42":"MIsovA","size-48":"_0IwSQd","uuiTypography":"-kMsnj","heroHeader":"D6pxR7","promoHeader":"_6j9uJd","uuiCritical":"GeYQ8j","uuiSuccess":"sVFh9E","uuiWarning":"IpHU7t","uuiTypographySize12":"_-2hQwF","uuiTypographySize14":"kDcap9","uuiTypographySize16":"dXWelT","modeForm":"_9QuoKh","modeCell":"ZGOQq6","modeInline":"nFp9-k","size24":"vnyssf","size30":"tzYHLO","size36":"_4k9Qp1","size42":"MIsovA","size48":"_0IwSQd"};
 
 const defaultSize$2 = '36';
 const defaultMode$1 = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
     return [
-        css$H.root,
-        css$H['size-' + (mods.size || defaultSize$2)],
-        css$H['mode-' + (mods.mode || defaultMode$1)],
+        css$G.root,
+        css$G['size-' + (mods.size || defaultSize$2)],
+        css$G['mode-' + (mods.mode || defaultMode$1)],
     ];
 }
 function PickerTogglerComponent(props, ref) {
@@ -2042,9 +2134,9 @@ function PickerTogglerComponent(props, ref) {
 }
 const PickerToggler = React.forwardRef(PickerTogglerComponent);
 
-var css$G = {"root":"_4GLlvh","multiline":"e3jyq6","vertical-padding-24":"SSL5TO","vertical-padding-30":"vqVKRN","vertical-padding-36":"M34pb-","vertical-padding-42":"NcUTrY","vertical-padding-48":"tgBzru","text":"R7W1kt","verticalPadding24":"SSL5TO","verticalPadding30":"vqVKRN","verticalPadding36":"M34pb-","verticalPadding42":"NcUTrY","verticalPadding48":"tgBzru"};
+var css$F = {"root":"rV7aJu","multiline":"ZKiU44","vertical-padding-24":"ADIADL","vertical-padding-30":"M2eN8h","vertical-padding-36":"fFeA9V","vertical-padding-42":"eVyZ03","vertical-padding-48":"_21L38I","text":"VvPOEH","verticalPadding24":"ADIADL","verticalPadding30":"M2eN8h","verticalPadding36":"fFeA9V","verticalPadding42":"eVyZ03","verticalPadding48":"_21L38I"};
 
-var css$F = {"highlighted-text":"lab3ga","highlightedText":"lab3ga"};
+var css$E = {"highlighted-text":"ALd6ve","highlightedText":"ALd6ve"};
 
 const mergeHighlightRanges = (ranges) => {
     const mergedRanges = [];
@@ -2098,7 +2190,7 @@ const getHighlightRanges = (str, search) => {
 };
 const getDecoratedText = (str, ranges) => ranges.map((range, index) => {
     const rangeStr = str.substring(range.from, range.to);
-    return (React__default.createElement("span", Object.assign({ key: `${rangeStr}-${index}` }, (range.isHighlighted ? { className: css$F.highlightedText } : {})), rangeStr));
+    return (React__default.createElement("span", Object.assign({ key: `${rangeStr}-${index}` }, (range.isHighlighted ? { className: css$E.highlightedText } : {})), rangeStr));
 });
 const getHighlightedSearchMatches = (str, search) => {
     if (!search || !str) {
@@ -2127,20 +2219,20 @@ class PickerItem extends React.Component {
         const { search } = (_a = this.props.dataSourceState) !== null && _a !== void 0 ? _a : {};
         const title = highlightSearchMatches ? getHighlightedSearchMatches(this.props.title, search) : this.props.title;
         const subtitle = highlightSearchMatches ? getHighlightedSearchMatches(this.props.subtitle, search) : this.props.subtitle;
-        return (React.createElement(FlexCell, { width: "auto", cx: [css$G.root, cx] },
-            React.createElement(FlexRow, { size: itemSize, cx: isMultiline && [css$G.multiline, css$G[`vertical-padding-${itemSize}`]], spacing: "12" },
+        return (React.createElement(FlexCell, { width: "auto", cx: [css$F.root, cx] },
+            React.createElement(FlexRow, { size: itemSize, cx: isMultiline && [css$F.multiline, css$F[`vertical-padding-${itemSize}`]], spacing: "12" },
                 avatarUrl && React.createElement(Avatar, { isLoading: isLoading, img: avatarUrl, size: this.getAvatarSize(itemSize, isMultiline).toString() }),
                 icon && React.createElement(IconContainer, { icon: icon }),
                 React.createElement(FlexCell, { width: "auto" },
-                    title && (React.createElement(Text, { size: itemSize, cx: css$G.text, color: isDisabled ? 'disabled' : 'primary' }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : title)),
-                    subtitle && (React.createElement(Text, { size: itemSize, color: isDisabled ? 'disabled' : 'secondary', cx: css$G.text }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : subtitle))))));
+                    title && (React.createElement(Text, { size: itemSize, cx: css$F.text, color: isDisabled ? 'disabled' : 'primary' }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : title)),
+                    subtitle && (React.createElement(Text, { size: itemSize, color: isDisabled ? 'disabled' : 'secondary', cx: css$F.text }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : subtitle))))));
     }
 }
 PickerItem.defaultProps = {
     highlightSearchMatches: true,
 };
 
-var css$E = {"root":"gIgYz4","panel":"TOIMEd","footer-wrapper":"SwI3Ho","footer-size-24":"_9vxEUn","footer-size-30":"_2hIbhR","footer-size-36":"JAprH4","footer-size-42":"U7jDmC","footer-size-48":"Gqr4HA","footerWrapper":"SwI3Ho","footerSize24":"_9vxEUn","footerSize30":"_2hIbhR","footerSize36":"JAprH4","footerSize42":"U7jDmC","footerSize48":"Gqr4HA"};
+var css$D = {"uui-typography":"ngd97c","hero-header":"afsRhK","promo-header":"d3Kjey","uui-critical":"FmQEwz","uui-success":"GzwYqr","uui-warning":"_13DPu3","uui-typography-size-12":"Uy-fEu","uui-typography-size-14":"NufN7K","uui-typography-size-16":"nwKEAd","root":"fcBJnM","panel":"UCJmyg","footer-wrapper":"_4SZ1D3","footer-size-24":"eEx2vV","footer-size-30":"fqcVl-","footer-size-36":"pI6rDl","footer-size-42":"r7dAX7","footer-size-48":"okY9KF","uuiTypography":"ngd97c","heroHeader":"afsRhK","promoHeader":"d3Kjey","uuiCritical":"FmQEwz","uuiSuccess":"GzwYqr","uuiWarning":"_13DPu3","uuiTypographySize12":"Uy-fEu","uuiTypographySize14":"NufN7K","uuiTypographySize16":"nwKEAd","footerWrapper":"_4SZ1D3","footerSize24":"eEx2vV","footerSize30":"fqcVl-","footerSize36":"pI6rDl","footerSize42":"r7dAX7","footerSize48":"okY9KF"};
 
 const pickerHeight$1 = 300;
 const pickerWidth = 360;
@@ -2155,7 +2247,7 @@ function PickerInput(_a) {
         })
             .catch(() => { });
     };
-    const { context, popperModifiers, getName, getPlaceholder, handleSelectionValueChange, getTogglerProps, getRows, handleTogglerSearchChange, toggleBodyOpening, dataSourceState, getFooterProps, getPickerBodyProps, getListProps, shouldShowBody, getSearchPosition, } = usePickerInput(Object.assign(Object.assign({}, props), { toggleModalOpening }));
+    const { context, popperModifiers, getName, getPlaceholder, handleSelectionValueChange, getTogglerProps, getRows, handleTogglerSearchChange, toggleBodyOpening, dataSourceState, getFooterProps, getPickerBodyProps, getListProps, shouldShowBody, getSearchPosition, handlePickerInputKeyboard, } = usePickerInput(Object.assign(Object.assign({}, props), { toggleModalOpening }));
     const getTogglerMods = () => {
         return {
             size: props.size,
@@ -2164,7 +2256,7 @@ function PickerInput(_a) {
     };
     const renderTarget = (targetProps) => {
         const renderTargetFn = props.renderToggler || ((props) => React__default.createElement(PickerToggler, Object.assign({}, props)));
-        return (React__default.createElement(IEditableDebouncer, { value: targetProps.value, onValueChange: handleTogglerSearchChange, debounceDelay: props.searchDebounceDelay, render: (editableProps) => renderTargetFn(Object.assign(Object.assign(Object.assign({}, getTogglerMods()), targetProps), editableProps)) }));
+        return (React__default.createElement(IEditableDebouncer, { value: targetProps.value, onValueChange: handleTogglerSearchChange, debounceDelay: props.searchDebounceDelay, render: (editableProps) => renderTargetFn(Object.assign(Object.assign(Object.assign(Object.assign({}, getTogglerMods()), targetProps), editableProps), { onKeyDown: (e) => handlePickerInputKeyboard(rows, e, editableProps.value) })) }));
     };
     const renderFooter = () => {
         const footerProps = getFooterProps();
@@ -2186,7 +2278,7 @@ function PickerInput(_a) {
         const renderedDataRows = rows.map((row) => renderRow(row, dataSourceState));
         const bodyHeight = isMobile() ? document.documentElement.clientHeight : props.dropdownHeight || pickerHeight$1;
         const minBodyWidth = props.minBodyWidth || pickerWidth;
-        return (React__default.createElement(MobileDropdownWrapper, { title: props.entityName, onClose: () => toggleBodyOpening(false), cx: [css$E.panel, css$E.root, props.bodyCx], onKeyDown: bodyProps.onKeyDown, width: bodyProps.togglerWidth > minBodyWidth ? bodyProps.togglerWidth : minBodyWidth, focusLock: getSearchPosition() === 'body' },
+        return (React__default.createElement(MobileDropdownWrapper, { title: props.entityName, onClose: () => toggleBodyOpening(false), cx: [css$D.panel, css$D.root, props.bodyCx], onKeyDown: bodyProps.onKeyDown, width: bodyProps.togglerWidth > minBodyWidth ? bodyProps.togglerWidth : minBodyWidth, focusLock: getSearchPosition() === 'body' },
             React__default.createElement(DataPickerBody, Object.assign({}, bodyProps, { rows: renderedDataRows, maxHeight: bodyHeight, searchSize: props.size, editMode: "dropdown", selectionMode: props.selectionMode, renderNotFound: props.renderNotFound
                     ? () => props.renderNotFound({
                         search: dataSourceState.search,
@@ -2197,12 +2289,12 @@ function PickerInput(_a) {
     };
     const rows = getRows();
     return (React__default.createElement(Dropdown, { renderTarget: (dropdownProps) => {
-            const targetProps = getTogglerProps(rows);
+            const targetProps = getTogglerProps();
             return renderTarget(Object.assign(Object.assign({}, dropdownProps), targetProps));
         }, renderBody: (bodyProps) => renderBody(Object.assign(Object.assign(Object.assign({}, bodyProps), getPickerBodyProps(rows)), getListProps()), rows), value: shouldShowBody(), onValueChange: !props.isDisabled && toggleBodyOpening, placement: props.dropdownPlacement, modifiers: popperModifiers, closeBodyOnTogglerHidden: !isMobile(), portalTarget: props.portalTarget }));
 }
 
-var css$D = {"row":"JzCThO"};
+var css$C = {"row":"HyYMxC"};
 
 function PickerListItem(props) {
     var _a;
@@ -2220,7 +2312,7 @@ function PickerListItem(props) {
     else {
         component = (React__default.createElement(RadioInput, { label: label, value: props.isSelected, isDisabled: props.isLoading || !props.isSelectable || props.isDisabled, onValueChange: () => props.onSelect(props) }));
     }
-    return (React__default.createElement("div", Object.assign({ role: "option", "aria-selected": props.isSelectable ? props.isSelected : undefined, "aria-busy": props.isLoading, "aria-posinset": props.index + 1 }, (((_a = props.checkbox) === null || _a === void 0 ? void 0 : _a.isVisible) && { 'aria-checked': props.isChecked }), { className: css$D.row }), component));
+    return (React__default.createElement("div", Object.assign({ role: "option", "aria-selected": props.isSelectable ? props.isSelected : undefined, "aria-busy": props.isLoading, "aria-posinset": props.index + 1 }, (((_a = props.checkbox) === null || _a === void 0 ? void 0 : _a.isVisible) && { 'aria-checked': props.isChecked }), { className: css$C.row }), component));
 }
 
 function PickerList(props) {
@@ -2256,7 +2348,7 @@ function PickerList(props) {
             }, selectedRows)));
 }
 
-var css$C = {"root":"g6tAWY","title-wrapper":"-edJIm","title":"mfJCw2","text-wrapper":"Pk5ore","selection":"ovY5oj","postfix":"_0ve-Av","selected":"_6aC-2l","titleWrapper":"-edJIm","textWrapper":"Pk5ore"};
+var css$B = {"uui-typography":"ap4TZT","hero-header":"yzXr-B","promo-header":"MHI-nJ","uui-critical":"MHNLpK","uui-success":"aRhVsX","uui-warning":"bsLhZ1","uui-typography-size-12":"qCyqMB","uui-typography-size-14":"giHqBO","uui-typography-size-16":"XyxnbN","root":"daYT2z","title-wrapper":"RXPVOW","title":"Im21qa","text-wrapper":"SRaabv","selection":"_4BnvZc","postfix":"-sMc7R","selected":"NJzm8S","uuiTypography":"ap4TZT","heroHeader":"yzXr-B","promoHeader":"MHI-nJ","uuiCritical":"MHNLpK","uuiSuccess":"aRhVsX","uuiWarning":"bsLhZ1","uuiTypographySize12":"qCyqMB","uuiTypographySize14":"giHqBO","uuiTypographySize16":"XyxnbN","titleWrapper":"RXPVOW","textWrapper":"SRaabv"};
 
 const defaultSize = '36';
 const FilterPanelItemToggler = React.forwardRef((props, ref) => {
@@ -2281,19 +2373,19 @@ const FilterPanelItemToggler = React.forwardRef((props, ref) => {
     };
     const getTitle = props.predicateName ? `${props.title} ${props.predicateName}` : `${props.title}${props.selection ? ':' : ''}`;
     const getSelectionText = () => props.selection.map((i, index) => (React.createElement(React.Fragment, { key: `${i}${index}` },
-        React.createElement(Text, { color: "brand", size: props.size, cx: css$C.selection }, i),
+        React.createElement(Text, { color: "brand", size: props.size, cx: css$B.selection }, i),
         (props.postfix || index !== props.selection.length - 1) && React.createElement("span", null, ",\u00A0"))));
     return (React.createElement(FlexRow$1, Object.assign({}, props, { rawProps: {
             style: { maxWidth: `${props.maxWidth ? props.maxWidth + 'px' : 'auto'}` },
             role: 'button',
             tabIndex: props.isDisabled ? -1 : 0,
             onKeyDown: onKeyDownHandler,
-        }, cx: cx(css$C.root, uuiElement.inputBox, uuiMarkers.clickable, props.isOpen && uuiMod.opened, ['size-' + (props.size || defaultSize)], props.cx), onClick: togglerPickerOpened, ref: ref }),
-        React.createElement(FlexRow$1, { cx: css$C.titleWrapper },
-            React.createElement(Text, { size: props.size, cx: css$C.title }, getTitle),
-            props.selection && (React.createElement("div", { className: css$C.textWrapper },
+        }, cx: cx(css$B.root, uuiElement.inputBox, uuiMarkers.clickable, props.isOpen && uuiMod.opened, ['size-' + (props.size || defaultSize)], props.cx), onClick: togglerPickerOpened, ref: ref }),
+        React.createElement(FlexRow$1, { cx: css$B.titleWrapper },
+            React.createElement(Text, { size: props.size, cx: css$B.title }, getTitle),
+            props.selection && (React.createElement("div", { className: css$B.textWrapper },
                 getSelectionText(),
-                props.postfix && (React.createElement(Text, { color: "brand", size: props.size, cx: css$C.postfix }, props.postfix))))),
+                props.postfix && (React.createElement(Text, { color: "brand", size: props.size, cx: css$B.postfix }, props.postfix))))),
         !props.isDisabled && React.createElement(IconContainer, { icon: systemIcons[props.size || defaultSize].foldingArrow, flipY: props.isOpen, cx: "uui-icon-dropdown" })));
 });
 
@@ -2360,7 +2452,7 @@ class FilterDatePickerBody extends BaseDatePicker {
     }
 }
 
-var css$B = {"date-input":"SlwlbE","size-24":"r1WHjP","size-30":"K4VED0","size-36":"KiyeGh","size-42":"N1ESEP","size-48":"z8YGjp","date-input-group":"sdetab","separator":"eTnvAg","mode-form":"rcbUqG","mode-cell":"_4-nrq9","dateInput":"SlwlbE","size24":"r1WHjP","size30":"K4VED0","size36":"KiyeGh","size42":"N1ESEP","size48":"z8YGjp","dateInputGroup":"sdetab","modeForm":"rcbUqG","modeCell":"_4-nrq9"};
+var css$A = {"uui-typography":"_5jJXMg","hero-header":"miYEaS","promo-header":"c7vb7b","uui-critical":"ZYQXZ9","uui-success":"XAqC0H","uui-warning":"OEQOG9","uui-typography-size-12":"r4I1ne","uui-typography-size-14":"Qu3DOq","uui-typography-size-16":"wt0YIk","date-input":"Rhf-NY","size-24":"bePuD7","size-30":"Nr65L1","size-36":"n8JWZi","size-42":"eHlmPe","size-48":"WDErmE","date-input-group":"_1tCXUz","separator":"Wer6VQ","mode-form":"PMJeg4","mode-cell":"L7RNk6","uuiTypography":"_5jJXMg","heroHeader":"miYEaS","promoHeader":"c7vb7b","uuiCritical":"ZYQXZ9","uuiSuccess":"XAqC0H","uuiWarning":"OEQOG9","uuiTypographySize12":"r4I1ne","uuiTypographySize14":"Qu3DOq","uuiTypographySize16":"wt0YIk","dateInput":"Rhf-NY","size24":"bePuD7","size30":"Nr65L1","size36":"n8JWZi","size42":"eHlmPe","size48":"WDErmE","dateInputGroup":"_1tCXUz","modeForm":"PMJeg4","modeCell":"L7RNk6"};
 
 class FilterRangeDatePickerBody extends BaseRangeDatePicker {
     constructor() {
@@ -2380,10 +2472,10 @@ class FilterRangeDatePickerBody extends BaseRangeDatePicker {
                 React.createElement(RangeDatePickerBody, { value: this.getValue(), onValueChange: this.onRangeChange, filter: this.props.filter, focusPart: this.state.inFocus, changeIsOpen: this.changeIsOpen, presets: this.props.presets })),
             React.createElement(FlexCell, { alignSelf: "stretch" },
                 React.createElement(FlexRow, { padding: "24", vPadding: "12" },
-                    React.createElement("div", { className: cx(css$B.dateInputGroup, this.state.inFocus && uuiMod.focus) },
-                        React.createElement(TextInput, { icon: systemIcons['30'].calendar, cx: cx(css$B.dateInput, css$B['size-30'], this.state.inFocus === 'from' && uuiMod.focus), size: "30", placeholder: i18n.rangeDatePicker.pickerPlaceholderFrom, value: this.state.inputValue.from, onValueChange: this.getChangeHandler('from'), onFocus: (event) => this.handleFocus(event, 'from'), onBlur: (event) => this.handleBlur(event, 'from') }),
-                        React.createElement("div", { className: css$B.separator }),
-                        React.createElement(TextInput, { cx: cx(css$B.dateInput, css$B['size-30'], this.state.inFocus === 'to' && uuiMod.focus), placeholder: i18n.rangeDatePicker.pickerPlaceholderTo, size: "30", value: this.state.inputValue.to, onCancel: this.state.inputValue.from && this.state.inputValue.to && this.handleCancel, onValueChange: this.getChangeHandler('to'), onFocus: (event) => this.handleFocus(event, 'to'), onBlur: (event) => this.handleBlur(event, 'to') })),
+                    React.createElement("div", { className: cx(css$A.dateInputGroup, this.state.inFocus && uuiMod.focus) },
+                        React.createElement(TextInput, { icon: systemIcons['30'].calendar, cx: cx(css$A.dateInput, css$A['size-30'], this.state.inFocus === 'from' && uuiMod.focus), size: "30", placeholder: i18n.rangeDatePicker.pickerPlaceholderFrom, value: this.state.inputValue.from, onValueChange: this.getChangeHandler('from'), onFocus: (event) => this.handleFocus(event, 'from'), onBlur: (event) => this.handleBlur(event, 'from') }),
+                        React.createElement("div", { className: css$A.separator }),
+                        React.createElement(TextInput, { cx: cx(css$A.dateInput, css$A['size-30'], this.state.inFocus === 'to' && uuiMod.focus), placeholder: i18n.rangeDatePicker.pickerPlaceholderTo, size: "30", value: this.state.inputValue.to, onCancel: this.state.inputValue.from && this.state.inputValue.to && this.handleCancel, onValueChange: this.getChangeHandler('to'), onFocus: (event) => this.handleFocus(event, 'to'), onBlur: (event) => this.handleBlur(event, 'to') })),
                     React.createElement(FlexSpacer, null),
                     React.createElement(LinkButton, { isDisabled: !this.state.inputValue.from && !this.state.inputValue.to, caption: i18n.pickerModal.clearAllButton, onClick: this.handleCancel })))));
     }
@@ -2392,7 +2484,7 @@ class FilterRangeDatePickerBody extends BaseRangeDatePicker {
     }
 }
 
-var css$A = {"container":"eb-CfJ"};
+var css$z = {"container":"WTjS8E"};
 
 function FilterNumericBody(props) {
     var _a, _b;
@@ -2436,7 +2528,7 @@ function FilterNumericBody(props) {
     if (isInRangePredicate) {
         const value = props.value;
         return (React__default.createElement("div", null,
-            React__default.createElement(FlexRow, { padding: "12", alignItems: "center", spacing: "12", borderBottom: true, cx: css$A.container },
+            React__default.createElement(FlexRow, { padding: "12", alignItems: "center", spacing: "12", borderBottom: true, cx: css$z.container },
                 React__default.createElement(FlexCell, { width: "100%" },
                     React__default.createElement(NumericInput, { value: (_a = value === null || value === void 0 ? void 0 : value.from) !== null && _a !== void 0 ? _a : null, onValueChange: rangeValueHandler('from'), size: "36", placeholder: "Min", formatOptions: { maximumFractionDigits: 2 } })),
                 React__default.createElement(FlexCell, { width: "100%" },
@@ -2444,7 +2536,7 @@ function FilterNumericBody(props) {
             renderFooter()));
     }
     return (React__default.createElement("div", null,
-        React__default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$A.container },
+        React__default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$z.container },
             React__default.createElement(FlexCell, { width: 130 },
                 React__default.createElement(NumericInput, { value: typeof props.value === 'number' ? props.value : null, onValueChange: props.onValueChange, size: "36", placeholder: "Enter a number", formatOptions: { maximumFractionDigits: 2 } }))),
         renderFooter()));
@@ -2483,7 +2575,7 @@ var SvgActionDeleteforever12 = function SvgActionDeleteforever12(props, ref) {
 };
 var ForwardRef$u = /*#__PURE__*/forwardRef(SvgActionDeleteforever12);
 
-var css$z = {"root":"_--ae2T","header":"I-B3Zr","removeButton":"XHG7rl","with-search":"fVy-Ml","withSearch":"fVy-Ml"};
+var css$y = {"uui-typography":"Zk7WJo","hero-header":"UZnVFS","promo-header":"Wzv05a","uui-critical":"CY0Vrn","uui-success":"_18Xc94","uui-warning":"b9jr0l","uui-typography-size-12":"tdbLzj","uui-typography-size-14":"CDcNtq","uui-typography-size-16":"mQzog5","root":"RLboIe","header":"hhgQGi","removeButton":"lzxfsQ","with-search":"XGKB1N","uuiTypography":"Zk7WJo","heroHeader":"UZnVFS","promoHeader":"Wzv05a","uuiCritical":"CY0Vrn","uuiSuccess":"_18Xc94","uuiWarning":"b9jr0l","uuiTypographySize12":"tdbLzj","uuiTypographySize14":"CDcNtq","uuiTypographySize16":"mQzog5","withSearch":"XGKB1N"};
 
 function FiltersToolbarItemImpl(props) {
     const { maxCount = 2 } = props;
@@ -2559,13 +2651,13 @@ function FiltersToolbarItemImpl(props) {
     };
     const renderHeader = (hideTitle) => {
         var _a;
-        return (React__default.createElement("div", { className: cx(css$z.header, isPickersType && ((_a = props.showSearch) !== null && _a !== void 0 ? _a : css$z.withSearch)) },
+        return (React__default.createElement("div", { className: cx(css$y.header, isPickersType && ((_a = props.showSearch) !== null && _a !== void 0 ? _a : css$y.withSearch)) },
             props.predicates ? (React__default.createElement(MultiSwitch, { items: props.predicates.map((i) => ({ id: i.predicate, caption: i.name })), value: predicate, onValueChange: changePredicate, size: "24" })) : (!hideTitle && (React__default.createElement(Text, { color: "secondary", size: "24", fontSize: "14" }, props.title))),
-            !(props === null || props === void 0 ? void 0 : props.isAlwaysVisible) && (React__default.createElement(LinkButton, { cx: css$z.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: "24", icon: ForwardRef$u }))));
+            !(props === null || props === void 0 ? void 0 : props.isAlwaysVisible) && (React__default.createElement(LinkButton, { cx: css$y.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: "24", icon: ForwardRef$u }))));
     };
     const renderBody = (dropdownProps) => {
         const hideHeaderTitle = isPickersType && isMobileScreen;
-        return isPickersType ? (React__default.createElement(MobileDropdownWrapper, Object.assign({}, dropdownProps, { cx: css$z.root, title: props.title, width: 360, onClose: () => isOpenChange(false) }),
+        return isPickersType ? (React__default.createElement(MobileDropdownWrapper, Object.assign({}, dropdownProps, { cx: css$y.root, title: props.title, width: 360, onClose: () => isOpenChange(false) }),
             renderHeader(hideHeaderTitle),
             React__default.createElement(FilterItemBody, Object.assign({}, props, dropdownProps, { selectedPredicate: predicate, value: getValue(), onValueChange: onValueChange })))) : (React__default.createElement(DropdownContainer, Object.assign({}, dropdownProps),
             renderHeader(hideHeaderTitle),
@@ -2779,9 +2871,9 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = React__default.memo(FiltersToolbarImpl);
 
-var css$y = {"divider":"B95GQr","dropdownDeleteIcon":"_2pUECw","presetsWrapper":"_6o3yWT","addPresetContainer":"jReawz","dropContainer":"duOJxw"};
+var css$x = {"divider":"DQnMf6","dropdownDeleteIcon":"qwj572","presetsWrapper":"dSs46P","addPresetContainer":"NtPIXt","dropContainer":"_7VJGe2"};
 
-var css$x = {"preset-dropdown-panel":"SjXSIv","delete-row":"Wroi25","delete-button":"_1xaMO8","targetOpen":"WCMpar","presetDropdownPanel":"SjXSIv","deleteRow":"Wroi25","deleteButton":"_1xaMO8"};
+var css$w = {"preset-dropdown-panel":"A90xPX","delete-row":"spOE-B","delete-button":"kctO7l","targetOpen":"RjVggq","presetDropdownPanel":"A90xPX","deleteRow":"spOE-B","deleteButton":"kctO7l"};
 
 var _path$r;
 function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
@@ -2952,7 +3044,7 @@ function PresetActionsDropdown(props) {
     ]);
     const renderBody = () => {
         const isReadonlyPreset = props.preset.isReadonly;
-        return (React__default.createElement(Panel, { background: "surface", shadow: true, cx: css$x.presetDropdownPanel },
+        return (React__default.createElement(Panel, { background: "surface", shadow: true, cx: css$w.presetDropdownPanel },
             props.activePresetId === props.preset.id && props.hasPresetChanged(props.preset) && (React__default.createElement(React__default.Fragment, null,
                 !isReadonlyPreset && (React__default.createElement(FlexRow, { key: `${props.preset.id}-save-in-current` },
                     React__default.createElement(DropdownMenuButton, { icon: ForwardRef$r, caption: "Save in current", onClick: saveInCurrentHandler }))),
@@ -2966,16 +3058,16 @@ function PresetActionsDropdown(props) {
                 React__default.createElement(DropdownMenuButton, { icon: ForwardRef$o, caption: "Duplicate", onClick: duplicateHandler })),
             React__default.createElement(FlexRow, { borderBottom: true, key: `${props.preset.id}-copyLink` },
                 React__default.createElement(DropdownMenuButton, { icon: ForwardRef$m, caption: "Copy Link", onClick: copyUrlToClipboard })),
-            !isReadonlyPreset && (React__default.createElement(FlexRow, { key: `${props.preset.id}-delete`, cx: css$x.deleteRow },
-                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$l, caption: "Delete", cx: css$x.deleteButton, onClick: deleteHandler })))));
+            !isReadonlyPreset && (React__default.createElement(FlexRow, { key: `${props.preset.id}-delete`, cx: css$w.deleteRow },
+                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$l, caption: "Delete", cx: css$w.deleteButton, onClick: deleteHandler })))));
     };
     const renderTarget = useCallback((dropdownProps) => {
-        return (React__default.createElement(IconButton, Object.assign({ cx: dropdownProps.isOpen && css$x.targetOpen, color: props.preset.id === props.activePresetId ? 'info' : 'neutral' }, dropdownProps, { icon: ForwardRef$s })));
+        return (React__default.createElement(IconButton, Object.assign({ cx: dropdownProps.isOpen && css$w.targetOpen, color: props.preset.id === props.activePresetId ? 'info' : 'neutral' }, dropdownProps, { icon: ForwardRef$s })));
     }, []);
     return (React__default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", modifiers: [{ name: 'offset', options: { offset: [0, 22] } }] }));
 }
 
-var css$w = {"preset-input-cell":"DAkrrp","preset-input":"-pvSxv","presetInputCell":"DAkrrp","presetInput":"-pvSxv"};
+var css$v = {"preset-input-cell":"vMf-kt","preset-input":"HPLexe","presetInputCell":"vMf-kt","presetInput":"HPLexe"};
 
 function PresetInput(props) {
     var _a;
@@ -2996,11 +3088,11 @@ function PresetInput(props) {
         }
         props.onCancel();
     }, [presetCaption.length, props.onCancel]);
-    return (React__default.createElement(FlexCell, { cx: css$w.presetInputCell, minWidth: 180 },
-        React__default.createElement(TextInput, { cx: css$w.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50 })));
+    return (React__default.createElement(FlexCell, { cx: css$v.presetInputCell, minWidth: 180 },
+        React__default.createElement(TextInput, { cx: css$v.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50 })));
 }
 
-var css$v = {"preset":"GjqrSR","activePreset":"ZPPWsj"};
+var css$u = {"preset":"elilTR","activePreset":"J8qO16"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = useState(false);
@@ -3018,7 +3110,7 @@ function Preset(props) {
         return props.updatePreset(newPreset);
     }, [props.preset]);
     const isPresetActive = props.activePresetId === props.preset.id;
-    return (React__default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$v.preset, isPresetActive && css$v.activePreset], size: "60", withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: () => React__default.createElement(PresetActionsDropdown, Object.assign({ renamePreset: setPresetForRename }, props)), iconPosition: "right", isLinkActive: isPresetActive }))));
+    return (React__default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$u.preset, isPresetActive && css$u.activePreset], size: "60", withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: () => React__default.createElement(PresetActionsDropdown, Object.assign({ renamePreset: setPresetForRename }, props)), iconPosition: "right", isLinkActive: isPresetActive }))));
 }
 
 var _path$j;
@@ -3049,16 +3141,16 @@ function PresetsPanel(props) {
         return React__default.createElement(Preset, Object.assign({ key: preset.id, preset: preset, addPreset: setAddingPreset }, presetApi));
     };
     const renderAddPresetButton = useCallback(() => {
-        return (React__default.createElement("div", { key: "addingPresetBlock", className: css$y.addPresetContainer }, !isAddingPreset ? (React__default.createElement(Button, { size: "36", onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: ForwardRef$k, iconPosition: "left", fill: "ghost", color: "primary" })) : (React__default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
+        return (React__default.createElement("div", { key: "addingPresetBlock", className: css$x.addPresetContainer }, !isAddingPreset ? (React__default.createElement(Button, { size: "36", onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: ForwardRef$k, iconPosition: "left", fill: "ghost", color: "primary" })) : (React__default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
     }, [isAddingPreset]);
     const onPresetDropdownSelect = (preset) => {
         props.choosePreset(preset.preset);
     };
     const renderMoreButtonDropdown = (item, hiddenItems) => {
         return (React__default.createElement(Dropdown, { key: "more", renderTarget: (props) => (React__default.createElement(FlexRow, null,
-                React__default.createElement("div", { className: css$y.divider }),
-                React__default.createElement(Button, Object.assign({ fill: "ghost", color: "secondary", caption: `${(hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.length) || ''} more` }, props)))), renderBody: (propsBody) => (React__default.createElement(DropdownContainer, Object.assign({ cx: cx$1(css$y.dropContainer), width: 230 }, propsBody),
-                React__default.createElement(ScrollBars$1, null, hiddenItems.map((hiddenItem) => (React__default.createElement(DropdownMenuButton, { key: hiddenItem.preset.id, onClick: () => onPresetDropdownSelect(hiddenItem), caption: hiddenItem.preset.name, icon: !hiddenItem.preset.isReadonly && ForwardRef$l, iconPosition: "right", cx: css$y.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
+                React__default.createElement("div", { className: css$x.divider }),
+                React__default.createElement(Button, Object.assign({ fill: "ghost", color: "secondary", caption: `${(hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.length) || ''} more` }, props)))), renderBody: (propsBody) => (React__default.createElement(DropdownContainer, Object.assign({ cx: cx$1(css$x.dropContainer), width: 230 }, propsBody),
+                React__default.createElement(ScrollBars$1, null, hiddenItems.map((hiddenItem) => (React__default.createElement(DropdownMenuButton, { key: hiddenItem.preset.id, onClick: () => onPresetDropdownSelect(hiddenItem), caption: hiddenItem.preset.name, icon: !hiddenItem.preset.isReadonly && ForwardRef$l, iconPosition: "right", cx: css$x.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
     };
     const getPresetPriority = (preset, index) => {
         return preset.id === props.activePresetId ? 100499 : 1000 - index;
@@ -3076,7 +3168,7 @@ function PresetsPanel(props) {
         ];
     };
     return (React__default.createElement(FlexCell, { grow: 1, minWidth: 310, rawProps: props.rawProps },
-        React__default.createElement(FlexRow, { size: null, spacing: "12", cx: css$y.presetsWrapper },
+        React__default.createElement(FlexRow, { size: null, spacing: "12", cx: css$x.presetsWrapper },
             React__default.createElement(AdaptivePanel, { items: getPanelItems() }))));
 }
 
@@ -3114,7 +3206,7 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var css$u = {"line-height-12":"gnqeJP","line-height-18":"_0HeJOH","line-height-24":"z17ViQ","line-height-30":"PPpLg-","font-size-10":"JgKxV2","font-size-12":"rvvp2r","font-size-14":"br99be","font-size-16":"AAZdm3","font-size-18":"piDdw-","font-size-24":"ElLMBx","v-padding-2":"_7SkLfV","v-padding-3":"b7eiDk","v-padding-5":"dFlWDe","v-padding-6":"_5BDNpB","v-padding-8":"wo-A43","v-padding-9":"Ls2EKS","v-padding-11":"H8vl9-","v-padding-12":"xC1pJD","v-padding-14":"ss3TWa","v-padding-15":"Ya76--","v-padding-17":"GfKFnD","v-padding-18":"jnpobl","v-padding-23":"MTOI1d","v-padding-24":"OKY02H","lineHeight12":"gnqeJP","lineHeight18":"_0HeJOH","lineHeight24":"z17ViQ","lineHeight30":"PPpLg-","fontSize10":"JgKxV2","fontSize12":"rvvp2r","fontSize14":"br99be","fontSize16":"AAZdm3","fontSize18":"piDdw-","fontSize24":"ElLMBx","vPadding2":"_7SkLfV","vPadding3":"b7eiDk","vPadding5":"dFlWDe","vPadding6":"_5BDNpB","vPadding8":"wo-A43","vPadding9":"Ls2EKS","vPadding11":"H8vl9-","vPadding12":"xC1pJD","vPadding14":"ss3TWa","vPadding15":"Ya76--","vPadding17":"GfKFnD","vPadding18":"jnpobl","vPadding23":"MTOI1d","vPadding24":"OKY02H"};
+var css$t = {"line-height-12":"aUZCjy","line-height-18":"-WV9kE","line-height-24":"FU018S","line-height-30":"S5txCm","font-size-10":"yrVTW7","font-size-12":"_8eziTJ","font-size-14":"_5zz2n0","font-size-16":"ZF1uV5","font-size-18":"_3K1Bk2","font-size-24":"zMaz8u","v-padding-2":"_0CgM6y","v-padding-3":"UfF4X7","v-padding-5":"PEIZFg","v-padding-6":"ruRp-S","v-padding-8":"a2j-4Q","v-padding-9":"CQ4hm7","v-padding-11":"_0--Xwc","v-padding-12":"yFVXCi","v-padding-14":"INP55i","v-padding-15":"_2ul1pb","v-padding-17":"Lh24ww","v-padding-18":"YXSaBf","v-padding-23":"qbsjT7","v-padding-24":"_63VWvS","lineHeight12":"aUZCjy","lineHeight18":"-WV9kE","lineHeight24":"FU018S","lineHeight30":"S5txCm","fontSize10":"yrVTW7","fontSize12":"_8eziTJ","fontSize14":"_5zz2n0","fontSize16":"ZF1uV5","fontSize18":"_3K1Bk2","fontSize24":"zMaz8u","vPadding2":"_0CgM6y","vPadding3":"UfF4X7","vPadding5":"PEIZFg","vPadding6":"ruRp-S","vPadding8":"a2j-4Q","vPadding9":"CQ4hm7","vPadding11":"_0--Xwc","vPadding12":"yFVXCi","vPadding14":"INP55i","vPadding15":"_2ul1pb","vPadding17":"Lh24ww","vPadding18":"YXSaBf","vPadding23":"qbsjT7","vPadding24":"_63VWvS"};
 
 const defaultTextSettings = {
     18: { lineHeight: 12, fontSize: 10 },
@@ -3127,7 +3219,7 @@ const defaultTextSettings = {
 };
 function getTextClasses(props, border) {
     if (props.size === 'none') {
-        return [css$u['line-height-' + props.lineHeight], css$u['font-size-' + props.fontSize]];
+        return [css$t['line-height-' + props.lineHeight], css$t['font-size-' + props.fontSize]];
     }
     const setting = {
         size: props.size,
@@ -3136,11 +3228,11 @@ function getTextClasses(props, border) {
     };
     const vPadding = (+setting.size - +setting.lineHeight - (border ? 2 : 0)) / 2;
     return [
-        css$u['line-height-' + setting.lineHeight], css$u['font-size-' + setting.fontSize], css$u['v-padding-' + vPadding],
+        css$t['line-height-' + setting.lineHeight], css$t['font-size-' + setting.fontSize], css$t['v-padding-' + vPadding],
     ];
 }
 
-var css$t = {"root":"KPE1S0"};
+var css$s = {"root":"Dni-ME"};
 
 const allTextColors = ['info', 'warning', 'error', 'success', 'brand', 'primary', 'secondary', 'disabled', 'contrast', 'white'];
 function applyTextMods(mods) {
@@ -3150,15 +3242,16 @@ function applyTextMods(mods) {
         fontSize: mods.fontSize,
     }, false);
     return [
-        css$t.root,
+        css$s.root,
         'uui-text',
         `uui-font-${mods.font || 'regular'}`,
         `uui-color-${mods.color || 'primary'}`,
+        'uui-typography',
     ].concat(textClasses);
 }
 const Text = withMods(Text$1, applyTextMods);
 
-var css$s = {"root":"_7AQCfe","loading-word":"YIb4i7","animated-loading":"CkgQRN","skeleton_loading":"_4yi-7n","loadingWord":"YIb4i7","animatedLoading":"CkgQRN","skeletonLoading":"_4yi-7n"};
+var css$r = {"root":"de--DO","loading-word":"qxTKrq","animated-loading":"tqXcVL","skeleton_loading":"GHL1hG","loadingWord":"qxTKrq","animatedLoading":"tqXcVL","skeletonLoading":"GHL1hG"};
 
 const TextPlaceholder = (props) => {
     const pattern = '&nbsp;';
@@ -3170,37 +3263,35 @@ const TextPlaceholder = (props) => {
         }
         return words;
     }, [props.wordsCount]);
-    return (React.createElement("div", Object.assign({ "aria-busy": true, className: css$s.root }, props.rawProps), text.map((it, index) => (React.createElement("span", { key: index, className: cx([
-            props.cx, css$s.loadingWord, !props.isNotAnimated && css$s.animatedLoading,
+    return (React.createElement("div", Object.assign({ "aria-busy": true, className: css$r.root }, props.rawProps), text.map((it, index) => (React.createElement("span", { key: index, className: cx([
+            props.cx, css$r.loadingWord, !props.isNotAnimated && css$r.animatedLoading,
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
-var style = {"typography-16":"baqGMN","typography-14":"kYwine","typography-12":"LK33w5","typography-uui":"thGQKK","typography16":"baqGMN","typography14":"kYwine","typography12":"LK33w5","typographyUui":"thGQKK"};
+const RichTextView = withMods(uuiComponents.RichTextView, (mods) => ['uui-typography', `uui-typography-${mods.size || '14'}`]);
 
-const RichTextView = withMods(RichTextView$1, (mods) => [style.typographyUui, style['typography-' + (mods.size || '14')]]);
+var css$q = {"uui-typography":"drvtD9","hero-header":"QxmnBG","promo-header":"V3FmWe","uui-critical":"_3ekauF","uui-success":"mAVhXk","uui-warning":"A8Fz0M","uui-typography-size-12":"Sv6fjZ","uui-typography-size-14":"tZP8sz","uui-typography-size-16":"_81jdyh","root":"TCWIOt","modal-blocker":"Dn-Ya0","animateModalBlocker":"eoF-Qh","modal":"kkO-ou","modal-footer":"ykk3NX","border-top":"qL6Q7m","modal-header":"fN8gha","uuiTypography":"drvtD9","heroHeader":"QxmnBG","promoHeader":"V3FmWe","uuiCritical":"_3ekauF","uuiSuccess":"mAVhXk","uuiWarning":"A8Fz0M","uuiTypographySize12":"Sv6fjZ","uuiTypographySize14":"tZP8sz","uuiTypographySize16":"_81jdyh","modalBlocker":"Dn-Ya0","modalFooter":"ykk3NX","borderTop":"qL6Q7m","modalHeader":"fN8gha"};
 
-var css$r = {"root":"e34c9h","modal-blocker":"PU3pdT","animateModalBlocker":"FKW2w-","modal":"ooxJvl","modal-footer":"j5BDA4","border-top":"O-IL2R","modal-header":"_88B-pu","modalBlocker":"PU3pdT","modalFooter":"j5BDA4","borderTop":"O-IL2R","modalHeader":"_88B-pu"};
-
-const ModalBlocker = withMods(ModalBlocker$1, () => [css$r.modalBlocker]);
-const ModalWindow = withMods(ModalWindow$1, () => [css$r.root, css$r.modal], (props) => ({
+const ModalBlocker = withMods(ModalBlocker$1, () => [css$q.modalBlocker]);
+const ModalWindow = withMods(ModalWindow$1, () => [css$q.root, css$q.modal], (props) => ({
     style: Object.assign(Object.assign({}, props.style), { width: `${props.width || 420}px`, height: props.height ? `${props.height}px` : 'auto' }),
 }));
 class ModalHeader extends React.Component {
     render() {
-        return (React.createElement(FlexRow, { padding: this.props.padding || '24', vPadding: "12", borderBottom: this.props.borderBottom, cx: [css$r.root, css$r.modalHeader, this.props.cx], spacing: "12", rawProps: this.props.rawProps },
+        return (React.createElement(FlexRow, { padding: this.props.padding || '24', vPadding: "12", borderBottom: this.props.borderBottom, cx: [css$q.root, css$q.modalHeader, this.props.cx], spacing: "12", rawProps: this.props.rawProps },
             this.props.title && (React.createElement(Text, { size: "48", fontSize: "18", font: "semibold" }, this.props.title)),
             this.props.children,
             this.props.onClose && React.createElement(FlexSpacer, null),
             this.props.onClose && (React.createElement(FlexCell, { shrink: 0, width: "auto" },
-                React.createElement(IconButton, { rawProps: { 'aria-label': 'Close modal' }, icon: ForwardRef$D, onClick: this.props.onClose })))));
+                React.createElement(IconButton, { rawProps: { 'aria-label': 'Close modal' }, icon: ForwardRef$B, onClick: this.props.onClose })))));
     }
 }
 class ModalFooter extends React.Component {
     render() {
         return (React.createElement(FlexRow, { spacing: this.props.spacing || '12', cx: [
-                css$r.root,
-                css$r.modalFooter,
-                this.props.borderTop && css$r.borderTop,
+                css$q.root,
+                css$q.modalFooter,
+                this.props.borderTop && css$q.borderTop,
                 this.props.cx,
             ], padding: this.props.padding || '24', vPadding: this.props.vPadding || '24', rawProps: this.props.rawProps }, this.props.children));
     }
@@ -3222,7 +3313,7 @@ var SvgCross = function SvgCross(props, ref) {
 };
 var ForwardRef$j = /*#__PURE__*/forwardRef(SvgCross);
 
-var css$q = {"root":"_2wFC-r","icon-wrapper":"FTaOnv","action-wrapper":"KE9vxb","action-link":"I0ZjlW","close-icon":"jlecMO","main-path":"ZhsbwQ","content":"O5KPzs","clear-button":"jcBccY","close-wrapper":"cIIH5i","iconWrapper":"FTaOnv","actionWrapper":"KE9vxb","actionLink":"I0ZjlW","closeIcon":"jlecMO","mainPath":"ZhsbwQ","clearButton":"jcBccY","closeWrapper":"cIIH5i"};
+var css$p = {"uui-typography":"C7RWD7","hero-header":"o0EP9a","promo-header":"y2S-Il","uui-critical":"hlubEH","uui-success":"SdBl-0","uui-warning":"_1bukA-","uui-typography-size-12":"DMT-yK","uui-typography-size-14":"_9XByoT","uui-typography-size-16":"yo3e7T","root":"_7yW3Qn","icon-wrapper":"EKg7qw","action-wrapper":"_8X9sYB","action-link":"w3pp0M","close-icon":"_1n3GTb","main-path":"GejCTv","content":"_2X4juk","clear-button":"NLD9DT","close-wrapper":"pf2LwY","uuiTypography":"C7RWD7","heroHeader":"o0EP9a","promoHeader":"y2S-Il","uuiCritical":"hlubEH","uuiSuccess":"SdBl-0","uuiWarning":"_1bukA-","uuiTypographySize12":"DMT-yK","uuiTypographySize14":"_9XByoT","uuiTypographySize16":"yo3e7T","iconWrapper":"EKg7qw","actionWrapper":"_8X9sYB","actionLink":"w3pp0M","closeIcon":"_1n3GTb","mainPath":"GejCTv","clearButton":"NLD9DT","closeWrapper":"pf2LwY"};
 
 const NotificationCard = React__default.forwardRef((props, ref) => {
     const notificationCardNode = React__default.useRef(null);
@@ -3237,23 +3328,23 @@ const NotificationCard = React__default.forwardRef((props, ref) => {
             (_b = notificationCardNode.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', props.refreshTimer);
         };
     }, []);
-    return (React__default.createElement("div", Object.assign({ role: "alert", className: cx('uui-notification_card', props.color && `uui-color-${props.color}`, css$q.root, props.cx), ref: notificationCardNode }, props.rawProps),
-        React__default.createElement("div", { className: css$q.mainPath },
-            props.icon && (React__default.createElement("div", { className: css$q.iconWrapper },
-                React__default.createElement(IconContainer, { icon: props.icon, cx: css$q.actionIcon }))),
-            React__default.createElement("div", { className: css$q.content },
+    return (React__default.createElement("div", Object.assign({ role: "alert", className: cx('uui-notification_card', props.color && `uui-color-${props.color}`, css$p.root, props.cx), ref: notificationCardNode }, props.rawProps),
+        React__default.createElement("div", { className: css$p.mainPath },
+            props.icon && (React__default.createElement("div", { className: css$p.iconWrapper },
+                React__default.createElement(IconContainer, { icon: props.icon, cx: css$p.actionIcon }))),
+            React__default.createElement("div", { className: css$p.content },
                 props.children,
-                props.actions && (React__default.createElement("div", { className: css$q.actionWrapper }, props.actions.map((action) => (React__default.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$q.actionLink, size: "36", rawProps: action.rawProps })))))),
-            props.onClose && (React__default.createElement("div", { className: css$q.closeWrapper },
-                React__default.createElement(IconButton, { icon: ForwardRef$j, color: "neutral", onClick: props.onClose, cx: css$q.closeIcon }))))));
+                props.actions && (React__default.createElement("div", { className: css$p.actionWrapper }, props.actions.map((action) => (React__default.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$p.actionLink, size: "36", rawProps: action.rawProps })))))),
+            props.onClose && (React__default.createElement("div", { className: css$p.closeWrapper },
+                React__default.createElement(IconButton, { icon: ForwardRef$j, color: "neutral", onClick: props.onClose, cx: css$p.closeIcon }))))));
 });
-const WarningNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$G, color: "warning" }, props, { ref: ref, cx: props.cx }))));
-const SuccessNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$H, color: "success" }, props, { ref: ref, cx: props.cx }))));
-const HintNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$E, color: "info" }, props, { ref: ref, cx: props.cx }))));
-const ErrorNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$F, color: "error" }, props, { ref: ref, cx: props.cx }))));
+const WarningNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$E, color: "warning" }, props, { ref: ref, cx: props.cx }))));
+const SuccessNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$F, color: "success" }, props, { ref: ref, cx: props.cx }))));
+const HintNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$C, color: "info" }, props, { ref: ref, cx: props.cx }))));
+const ErrorNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$D, color: "error" }, props, { ref: ref, cx: props.cx }))));
 class ClearNotification extends React__default.Component {
     render() {
-        return (React__default.createElement("div", { className: cx(css$q.notificationWrapper, css$q.clearButton) },
+        return (React__default.createElement("div", { className: cx(css$p.notificationWrapper, css$p.clearButton) },
             React__default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => this.context.uuiNotifications.clearAll() })));
     }
 }
@@ -3304,14 +3395,14 @@ class DatePicker extends BaseDatePicker {
     }
 }
 
-var css$p = {"root":"_8x08oa"};
+var css$o = {"uui-typography":"RVerdp","hero-header":"ET1To2","promo-header":"wfeV-q","uui-critical":"hlpwQT","uui-success":"Jus5M1","uui-warning":"lHLxF8","uui-typography-size-12":"_5MAlQh","uui-typography-size-14":"PBSnKi","uui-typography-size-16":"Ps26MG","root":"CkuUAx","uuiTypography":"RVerdp","heroHeader":"ET1To2","promoHeader":"wfeV-q","uuiCritical":"hlpwQT","uuiSuccess":"Jus5M1","uuiWarning":"lHLxF8","uuiTypographySize12":"_5MAlQh","uuiTypographySize14":"PBSnKi","uuiTypographySize16":"Ps26MG"};
 
 function applyCalendarPresetsMods() {
-    return [css$p.root];
+    return [css$o.root];
 }
 const CalendarPresets = withMods(CalendarPresets$1, applyCalendarPresetsMods, () => ({}));
 
-var css$o = {"root":"_7aHaaq","container":"_1tEewG","day-selection":"s4B1Su","from-picker":"_3Acw2X","to-picker":"ZxJ3Lm","bodes-wrapper":"jKftgh","blocker":"jQiH5d","daySelection":"s4B1Su","fromPicker":"_3Acw2X","toPicker":"ZxJ3Lm","bodesWrapper":"jKftgh"};
+var css$n = {"uui-typography":"GHfMQm","hero-header":"WHskA-","promo-header":"zj6hkU","uui-critical":"JKs2MR","uui-success":"v0X8lb","uui-warning":"K1d-7C","uui-typography-size-12":"KPEGPA","uui-typography-size-14":"_5r-TeS","uui-typography-size-16":"eu7f8-","root":"ILu4gt","container":"sKhRL1","day-selection":"kFPB6w","from-picker":"MQMdPh","to-picker":"Jye9-n","bodes-wrapper":"R2zd5U","blocker":"fSE4q-","uuiTypography":"GHfMQm","heroHeader":"WHskA-","promoHeader":"zj6hkU","uuiCritical":"JKs2MR","uuiSuccess":"v0X8lb","uuiWarning":"K1d-7C","uuiTypographySize12":"KPEGPA","uuiTypographySize14":"_5r-TeS","uuiTypographySize16":"eu7f8-","daySelection":"kFPB6w","fromPicker":"MQMdPh","toPicker":"Jye9-n","bodesWrapper":"R2zd5U"};
 
 dayjs.extend(isoWeek);
 function weekCount(displayedDate) {
@@ -3408,16 +3499,16 @@ class RangeDatePickerBody extends React.Component {
         };
         this.renderDatePicker = () => {
             var _a, _b;
-            return (React.createElement(FlexRow, { cx: [((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.view) === 'DAY_SELECTION' && css$o.daySelection, css$o.container], alignItems: "top" },
+            return (React.createElement(FlexRow, { cx: [((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.view) === 'DAY_SELECTION' && css$n.daySelection, css$n.container], alignItems: "top" },
                 React.createElement(FlexCell, { width: "auto" },
                     React.createElement(FlexRow, null,
-                        React.createElement(FlexRow, { cx: css$o.bodesWrapper, alignItems: "top" },
-                            React.createElement(DatePickerBody, { cx: cx$1(css$o.fromPicker), setSelectedDate: (nv) => this.setSelectedDate(nv), value: this.getFromValue(), setDisplayedDateAndView: (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'from'), getDayCX: this.getDayCX, filter: this.props.filter, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday }),
-                            React.createElement(DatePickerBody, { cx: cx$1(css$o.toPicker), setSelectedDate: (nv) => this.setSelectedDate(nv), value: this.getToValue(), setDisplayedDateAndView: (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'to'), getDayCX: this.getDayCX, filter: this.props.filter, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday }),
+                        React.createElement(FlexRow, { cx: css$n.bodesWrapper, alignItems: "top" },
+                            React.createElement(DatePickerBody, { cx: cx$1(css$n.fromPicker), setSelectedDate: (nv) => this.setSelectedDate(nv), value: this.getFromValue(), setDisplayedDateAndView: (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'from'), getDayCX: this.getDayCX, filter: this.props.filter, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday }),
+                            React.createElement(DatePickerBody, { cx: cx$1(css$n.toPicker), setSelectedDate: (nv) => this.setSelectedDate(nv), value: this.getToValue(), setDisplayedDateAndView: (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'to'), getDayCX: this.getDayCX, filter: this.props.filter, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday }),
                             ((_b = this.props.value) === null || _b === void 0 ? void 0 : _b.view) !== 'DAY_SELECTION' && (React.createElement("div", { style: {
                                     left: this.state.activePart === 'from' && '50%',
                                     right: this.state.activePart === 'to' && '50%',
-                                }, className: css$o.blocker }))),
+                                }, className: css$n.blocker }))),
                         this.props.presets && this.renderPresets()),
                     this.props.renderFooter && this.props.renderFooter())));
         };
@@ -3468,11 +3559,11 @@ class RangeDatePickerBody extends React.Component {
         });
     }
     render() {
-        return (React.createElement("div", Object.assign({ className: cx$1(css$o.root, uuiDatePickerBodyBase.container, this.props.cx) }, this.props.rawProps), this.renderDatePicker()));
+        return (React.createElement("div", Object.assign({ className: cx$1(css$n.root, uuiDatePickerBodyBase.container, this.props.cx) }, this.props.rawProps), this.renderDatePicker()));
     }
 }
 
-var css$n = {"dropdown-container":"e6lJqh","date-input":"YX63WL","size-24":"Ok7zil","size-30":"yMd82T","size-36":"JdfbIS","size-42":"qm7zcz","size-48":"yKgMLW","date-input-group":"Cbq1lZ","separator":"wIBvHc","mode-form":"qWi-Xx","mode-cell":"_4U6p4Q","dropdownContainer":"e6lJqh","dateInput":"YX63WL","size24":"Ok7zil","size30":"yMd82T","size36":"JdfbIS","size42":"qm7zcz","size48":"yKgMLW","dateInputGroup":"Cbq1lZ","modeForm":"qWi-Xx","modeCell":"_4U6p4Q"};
+var css$m = {"uui-typography":"kRFh0u","hero-header":"PuwmR-","promo-header":"_817QbA","uui-critical":"C4t-kM","uui-success":"ydfX2d","uui-warning":"mDQvoD","uui-typography-size-12":"HAxTMZ","uui-typography-size-14":"rjV3tq","uui-typography-size-16":"z0c-5q","dropdown-container":"xCiqFM","date-input":"_510nfe","size-24":"DSun5f","size-30":"_57dfyq","size-36":"fQGt5i","size-42":"kBgVek","size-48":"xpFTyF","date-input-group":"q3jDaK","separator":"_1WeMKp","mode-form":"v1H049","mode-cell":"E31Jml","uuiTypography":"kRFh0u","heroHeader":"PuwmR-","promoHeader":"_817QbA","uuiCritical":"C4t-kM","uuiSuccess":"ydfX2d","uuiWarning":"mDQvoD","uuiTypographySize12":"HAxTMZ","uuiTypographySize14":"rjV3tq","uuiTypographySize16":"z0c-5q","dropdownContainer":"xCiqFM","dateInput":"_510nfe","size24":"DSun5f","size30":"_57dfyq","size36":"fQGt5i","size42":"kBgVek","size48":"xpFTyF","dateInputGroup":"q3jDaK","modeForm":"v1H049","modeCell":"E31Jml"};
 
 const defaultValue = { from: null, to: null };
 class RangeDatePicker extends BaseRangeDatePicker {
@@ -3491,36 +3582,36 @@ class RangeDatePicker extends BaseRangeDatePicker {
                     });
                 }
             }
-            return (React.createElement("div", { className: cx(this.props.inputCx, css$n.dateInputGroup, this.props.isDisabled && uuiMod.disabled, this.props.isReadonly && uuiMod.readonly, this.props.isInvalid && uuiMod.invalid, this.state.inFocus && uuiMod.focus), onClick: !this.props.isDisabled && props.onClick, onBlur: this.handleWrapperBlur, ref: props.ref },
-                React.createElement(TextInput, { icon: systemIcons[this.props.size || '36'].calendar, cx: cx(css$n.dateInput, css$n['size-' + (this.props.size || 36)], this.state.inFocus === 'from' && uuiMod.focus), size: this.props.size || '36', placeholder: this.props.getPlaceholder ? this.props.getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: this.state.inputValue.from, onValueChange: this.getChangeHandler('from'), isInvalid: this.props.isInvalid, isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, onFocus: (event) => this.handleFocus(event, 'from'), onBlur: (event) => this.handleBlur(event, 'from'), isDropdown: false, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.from }),
-                React.createElement("div", { className: css$n.separator }),
-                React.createElement(TextInput, { cx: cx(css$n.dateInput, css$n['size-' + (this.props.size || 36)], this.state.inFocus === 'to' && uuiMod.focus), placeholder: this.props.getPlaceholder ? this.props.getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: this.props.size || '36', value: this.state.inputValue.to, onCancel: this.props.disableClear ? null : this.state.inputValue.from && this.state.inputValue.to && this.handleCancel, onValueChange: this.getChangeHandler('to'), isInvalid: this.props.isInvalid, isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, onFocus: (e) => this.handleFocus(e, 'to'), onBlur: (e) => this.handleBlur(e, 'to'), isDropdown: false, rawProps: (_b = this.props.rawProps) === null || _b === void 0 ? void 0 : _b.to })));
+            return (React.createElement("div", { className: cx(this.props.inputCx, css$m.dateInputGroup, this.props.isDisabled && uuiMod.disabled, this.props.isReadonly && uuiMod.readonly, this.props.isInvalid && uuiMod.invalid, this.state.inFocus && uuiMod.focus), onClick: !this.props.isDisabled && props.onClick, onBlur: this.handleWrapperBlur, ref: props.ref },
+                React.createElement(TextInput, { icon: systemIcons[this.props.size || '36'].calendar, cx: cx(css$m.dateInput, css$m['size-' + (this.props.size || 36)], this.state.inFocus === 'from' && uuiMod.focus), size: this.props.size || '36', placeholder: this.props.getPlaceholder ? this.props.getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: this.state.inputValue.from, onValueChange: this.getChangeHandler('from'), isInvalid: this.props.isInvalid, isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, onFocus: (event) => this.handleFocus(event, 'from'), onBlur: (event) => this.handleBlur(event, 'from'), isDropdown: false, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.from }),
+                React.createElement("div", { className: css$m.separator }),
+                React.createElement(TextInput, { cx: cx(css$m.dateInput, css$m['size-' + (this.props.size || 36)], this.state.inFocus === 'to' && uuiMod.focus), placeholder: this.props.getPlaceholder ? this.props.getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: this.props.size || '36', value: this.state.inputValue.to, onCancel: this.props.disableClear ? null : this.state.inputValue.from && this.state.inputValue.to && this.handleCancel, onValueChange: this.getChangeHandler('to'), isInvalid: this.props.isInvalid, isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, onFocus: (e) => this.handleFocus(e, 'to'), onBlur: (e) => this.handleBlur(e, 'to'), isDropdown: false, rawProps: (_b = this.props.rawProps) === null || _b === void 0 ? void 0 : _b.to })));
         };
     }
     renderBody(props) {
         var _a;
-        return (React.createElement(DropdownContainer, Object.assign({}, props, { cx: cx(css$n.dropdownContainer), focusLock: false }),
+        return (React.createElement(DropdownContainer, Object.assign({}, props, { cx: cx(css$m.dropdownContainer), focusLock: false }),
             React.createElement(FlexRow, null,
                 React.createElement(RangeDatePickerBody, { cx: cx(this.props.bodyCx), value: this.getValue(), onValueChange: this.onRangeChange, filter: this.props.filter, changeIsOpen: this.toggleOpening, presets: this.props.presets, focusPart: this.state.inFocus, renderDay: this.props.renderDay, renderFooter: this.props.renderFooter && (() => this.props.renderFooter(this.props.value || defaultValue)), isHoliday: this.props.isHoliday, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.body }))));
     }
 }
 
-var css$m = {"root":"bZ0nVT","blocker":"qHkRPS","marker":"Qc-vcX","top":"m8OMc-","bottom":"_9Ly0iF","left":"VhmxkW","right":"_5U6Z3S","inside":"cm9htT"};
+var css$l = {"root":"HKQ-ca","blocker":"b1ysHW","marker":"I6H6oI","top":"_4jGlgZ","bottom":"ZRbmau","left":"X3-qyg","right":"Do8NvI","inside":"DzRmPs"};
 
 function DropMarker(props) {
     return props.isDndInProgress
         ? (React.createElement(React.Fragment, null,
-            props.enableBlocker && React.createElement("div", { className: css$m.blocker }),
+            props.enableBlocker && React.createElement("div", { className: css$l.blocker }),
             React.createElement("div", { className: cx([
-                    css$m.root,
-                    css$m.marker,
-                    css$m[props.position],
+                    css$l.root,
+                    css$l.marker,
+                    css$l[props.position],
                     props === null || props === void 0 ? void 0 : props.cx,
                 ]) })))
         : null;
 }
 
-var css$l = {"root":"nyMs2x","size-24":"chkSyn","size-30":"YfZfvb","size-36":"f168Bn","size-48":"f9wik7","size-60":"_7DwaIp","size24":"chkSyn","size30":"YfZfvb","size36":"f168Bn","size48":"f9wik7","size60":"_7DwaIp"};
+var css$k = {"uui-typography":"bjdVPG","hero-header":"KkP5A2","promo-header":"NN70h3","uui-critical":"e2dk78","uui-success":"jNvV3Y","uui-warning":"_014-hX","uui-typography-size-12":"u7IPIz","uui-typography-size-14":"tiyL2t","uui-typography-size-16":"_9CF3Gn","root":"I9m3iS","size-24":"zo94vi","size-30":"hiXoyF","size-36":"gQI3Cj","size-48":"RLVhUl","size-60":"XAd88H","uuiTypography":"bjdVPG","heroHeader":"KkP5A2","promoHeader":"NN70h3","uuiCritical":"e2dk78","uuiSuccess":"jNvV3Y","uuiWarning":"_014-hX","uuiTypographySize12":"u7IPIz","uuiTypographySize14":"tiyL2t","uuiTypographySize16":"_9CF3Gn","size24":"zo94vi","size30":"hiXoyF","size36":"gQI3Cj","size48":"RLVhUl","size60":"XAd88H"};
 
 // Here we define a single instance of the renderCell function to make DataTableRow#shouldComponentUpdate work.
 // As we need our mods to style the cell properly, we extract them from DataTableCellProps.rowProps, which is a hack, but it's reliable enough.
@@ -3532,13 +3623,11 @@ const renderDropMarkers = (props) => React.createElement(DropMarker, Object.assi
 const propsMods = { renderCell, renderDropMarkers };
 const DataTableRow = withMods(DataTableRow$1, ({ borderBottom = true, size }) => {
     return [
-        css$l.root, 'uui-dt-vars', borderBottom && 'uui-dt-row-border', css$l['size-' + (size || '36')],
+        css$k.root, 'uui-dt-vars', borderBottom && 'uui-dt-row-border', css$k['size-' + (size || '36')],
     ];
 }, () => propsMods);
 
-var css$k = {"panel":"r1fr9O"};
-
-var css$j = {"sorting-panel-container":"g1Vwar","sort-active":"_1qQ-VD","sortingPanelContainer":"g1Vwar","sortActive":"_1qQ-VD"};
+var css$j = {"uui-typography":"xK-6uO","hero-header":"_1C22-M","promo-header":"A63DHb","uui-critical":"N-glf1","uui-success":"ZW0eZ6","uui-warning":"S3kR9m","uui-typography-size-12":"NMXreN","uui-typography-size-14":"TB-FHj","uui-typography-size-16":"b6c9fY","sorting-panel-container":"s-epnz","sort-active":"sMbyw-","uuiTypography":"xK-6uO","heroHeader":"_1C22-M","promoHeader":"A63DHb","uuiCritical":"N-glf1","uuiSuccess":"ZW0eZ6","uuiWarning":"S3kR9m","uuiTypographySize12":"NMXreN","uuiTypographySize14":"TB-FHj","uuiTypographySize16":"b6c9fY","sortingPanelContainer":"s-epnz","sortActive":"sMbyw-"};
 
 var _path$h;
 function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
@@ -3590,18 +3679,14 @@ const ColumnHeaderDropdownImpl = (props) => {
             options: { offset: [0, 1] },
         }, mobilePopperModifier,
     ], []);
-    const style = useMemo(() => ({
-        width: isMobile() ? document.documentElement.clientWidth : undefined,
-    }), []);
     const closeDropdown = useCallback(() => props.onOpenChange(false), [props.onOpenChange]);
-    return (React__default.createElement(Dropdown$1, { renderTarget: props.renderTarget, renderBody: (dropdownProps) => (React__default.createElement(Panel, { background: "surface", style: style, shadow: true, cx: css$k.panel },
-            React__default.createElement(MobileDropdownWrapper, { title: props.title, onClose: closeDropdown },
-                props.isSortable && React__default.createElement(SortingPanel, { sortDirection: props.sortDirection, onSort: props.onSort }),
-                props.renderFilter(dropdownProps)))), modifiers: popperModifiers, value: props.isOpen, onValueChange: props.onOpenChange }));
+    return (React__default.createElement(Dropdown$1, { renderTarget: props.renderTarget, renderBody: (dropdownProps) => (React__default.createElement(MobileDropdownWrapper, { width: 280, title: props.title, onClose: closeDropdown },
+            props.isSortable && React__default.createElement(SortingPanel, { sortDirection: props.sortDirection, onSort: props.onSort }),
+            props.renderFilter(dropdownProps))), modifiers: popperModifiers, value: props.isOpen, onValueChange: props.onOpenChange }));
 };
 const ColumnHeaderDropdown = React__default.memo(ColumnHeaderDropdownImpl);
 
-var css$i = {"cell":"sJGH-C","sort-icon":"IujieB","dropdown-icon":"Gdb2Ci","infoIcon":"_3dxJZF","resizable":"Yyktb3","size-24":"fbKv6z","size-30":"zSSLS6","size-36":"qxVrMF","size-42":"fg39WD","size-48":"nwGPW0","padding-left-24":"_1ysUy-","padding-right-24":"X8x-O3","caption":"OXgK3-","checkbox":"_2yRY17","icon":"MKD8Qj","icon-cell":"_8vQMUZ","align-right":"Q4Yf-h","align-center":"BaKrBD","tooltip-wrapper":"YjcaTy","cell-tooltip":"_6kLiLR","upper-case":"Wr7wSp","font-size-14":"_2-qUIj","resize-mark":"EZjb6D","draggable":"laEVXa","ghost":"fzPGE-","is-dragged-out":"SE5Cr4","dnd-marker-left":"pmeURy","dnd-marker-right":"WqHnF1","cell-tooltip-wrapper":"Nv9lns","cell-tooltip-text":"m-JwZw","sortIcon":"IujieB","dropdownIcon":"Gdb2Ci","size24":"fbKv6z","size30":"zSSLS6","size36":"qxVrMF","size42":"fg39WD","size48":"nwGPW0","paddingLeft24":"_1ysUy-","paddingRight24":"X8x-O3","iconCell":"_8vQMUZ","alignRight":"Q4Yf-h","alignCenter":"BaKrBD","tooltipWrapper":"YjcaTy","cellTooltip":"_6kLiLR","upperCase":"Wr7wSp","fontSize14":"_2-qUIj","resizeMark":"EZjb6D","isDraggedOut":"SE5Cr4","dndMarkerLeft":"pmeURy","dndMarkerRight":"WqHnF1","cellTooltipWrapper":"Nv9lns","cellTooltipText":"m-JwZw"};
+var css$i = {"uui-typography":"bkorBr","hero-header":"Vv8CnA","promo-header":"foQFJk","uui-critical":"cIN232","uui-success":"dLVF4d","uui-warning":"_8moeH7","uui-typography-size-12":"GmMZAC","uui-typography-size-14":"tUz-WI","uui-typography-size-16":"LCoOzD","cell":"e5S818","sort-icon":"re9iBD","dropdown-icon":"fqSP-T","infoIcon":"q299ha","resizable":"Ik3WaK","size-24":"S9O-D1","size-30":"xabzzM","size-36":"pb8gW2","size-42":"_1eTgM0","size-48":"tFYIUB","padding-left-24":"Kd-A-a","padding-right-24":"pnMVIj","caption":"eMUPCA","checkbox":"oWHOu0","icon":"_5NdHFH","icon-cell":"Q4mdEY","align-right":"wEjgxl","align-center":"RuCfrQ","tooltip-wrapper":"S11ckh","cell-tooltip":"_31GTNk","upper-case":"FAu8IX","font-size-14":"bywbNf","resize-mark":"SORtOZ","draggable":"VOVZ5t","ghost":"DxWfzP","is-dragged-out":"AQwcgk","dnd-marker-left":"P3eriw","dnd-marker-right":"_1cwJC5","cell-tooltip-wrapper":"_6n8uoh","cell-tooltip-text":"-JShWF","uuiTypography":"bkorBr","heroHeader":"Vv8CnA","promoHeader":"foQFJk","uuiCritical":"cIN232","uuiSuccess":"dLVF4d","uuiWarning":"_8moeH7","uuiTypographySize12":"GmMZAC","uuiTypographySize14":"tUz-WI","uuiTypographySize16":"LCoOzD","sortIcon":"re9iBD","dropdownIcon":"fqSP-T","size24":"S9O-D1","size30":"xabzzM","size36":"pb8gW2","size42":"_1eTgM0","size48":"tFYIUB","paddingLeft24":"Kd-A-a","paddingRight24":"pnMVIj","iconCell":"Q4mdEY","alignRight":"wEjgxl","alignCenter":"RuCfrQ","tooltipWrapper":"S11ckh","cellTooltip":"_31GTNk","upperCase":"FAu8IX","fontSize14":"bywbNf","resizeMark":"SORtOZ","isDraggedOut":"AQwcgk","dndMarkerLeft":"P3eriw","dndMarkerRight":"_1cwJC5","cellTooltipWrapper":"_6n8uoh","cellTooltipText":"-JShWF"};
 
 var _path$f;
 function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
@@ -3675,7 +3760,7 @@ class DataTableHeaderCell extends React.Component {
                         React.createElement(Text, { key: "text", lineHeight: "30", fontSize: "14", size: "30", cx: cx$1(css$i.caption, this.getTextStyle(), uuiDataTableHeaderCell.uuiTableHeaderCaption) }, this.props.column.caption)),
                     this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React.createElement(IconButton, { key: "sort", cx: cx$1(css$i.icon, css$i.sortIcon, this.props.sortDirection && css$i.sortIconActive, uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: this.props.sortDirection ? 'neutral' : 'secondary', icon: this.props.sortDirection === 'desc' ? ForwardRef$h : this.props.sortDirection === 'asc' ? ForwardRef$i : ForwardRef$g })),
                     this.props.isFilterActive && (React.createElement(IconButton, { key: "filter", cx: cx$1(css$i.icon, !this.props.sortDirection && css$i.filterIcon, uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "neutral", icon: ForwardRef$f })),
-                    this.props.column.renderFilter && (React.createElement(IconButton, { key: "dropdown", cx: cx$1(css$i.icon, css$i.dropdownIcon, uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), color: "secondary", icon: this.state.isDropdownOpen ? ForwardRef$e : ForwardRef$B })))));
+                    this.props.column.renderFilter && (React.createElement(IconButton, { key: "dropdown", cx: cx$1(css$i.icon, css$i.dropdownIcon, uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), color: "secondary", icon: this.state.isDropdownOpen ? ForwardRef$e : ForwardRef$z })))));
         };
         this.renderHeaderCheckbox = () => this.props.selectAll
             && this.props.isFirstColumn && (React.createElement(Checkbox, Object.assign({ size: +this.props.size < 36 ? '12' : '18' }, this.props.selectAll, { cx: cx$1(css$i.checkbox, uuiDataTableHeaderCell.uuiTableHeaderCheckbox) })));
@@ -3695,7 +3780,7 @@ class DataTableHeaderCell extends React.Component {
     }
 }
 
-var css$h = {"header-cell":"M2DtlP","config-icon":"Wc-ikU","headerCell":"M2DtlP","configIcon":"Wc-ikU"};
+var css$h = {"uui-typography":"_9MI91Y","hero-header":"_0Qi3-0","promo-header":"gXVGIS","uui-critical":"XfRA6H","uui-success":"p8iQSV","uui-warning":"hU8dUJ","uui-typography-size-12":"oCSbea","uui-typography-size-14":"aHJcb4","uui-typography-size-16":"lcFYqO","header-cell":"Mh1A8x","config-icon":"r42XUZ","uuiTypography":"_9MI91Y","heroHeader":"_0Qi3-0","promoHeader":"gXVGIS","uuiCritical":"XfRA6H","uuiSuccess":"p8iQSV","uuiWarning":"hU8dUJ","uuiTypographySize12":"oCSbea","uuiTypographySize14":"aHJcb4","uuiTypographySize16":"lcFYqO","headerCell":"Mh1A8x","configIcon":"r42XUZ"};
 
 var _path$c;
 function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
@@ -3719,7 +3804,7 @@ const DataTableHeaderRow = withMods(DataTableHeaderRow$1, () => [css$h.root, 'uu
     renderConfigButton: () => React.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: css$h.configIcon, color: "neutral", icon: ForwardRef$d }),
 }));
 
-var styles$1 = {"main-panel":"ndBPUQ","group-title":"OYT8FZ","group-title-text":"wCAT-Y","group-title-badge":"sLrPLB","group-items":"AXxS5h","no-data":"Ns7EiE","h-divider":"aVxHy2","search-area":"_6BP6Bs","mainPanel":"ndBPUQ","groupTitle":"OYT8FZ","groupTitleText":"wCAT-Y","groupTitleBadge":"sLrPLB","groupItems":"AXxS5h","noData":"Ns7EiE","hDivider":"aVxHy2","searchArea":"_6BP6Bs"};
+var styles$1 = {"uui-typography":"nh7WgS","hero-header":"vwBmvG","promo-header":"_6iJwJ-","uui-critical":"MHu7mi","uui-success":"HOmsTS","uui-warning":"hPfS47","uui-typography-size-12":"jgNevH","uui-typography-size-14":"zyNvyW","uui-typography-size-16":"KOPUMT","main-panel":"Gesp2K","group-title":"_7SMWYC","group-title-text":"iual1t","group-title-badge":"vHuAMk","group-items":"_2uhWT6","no-data":"MB-1WA","h-divider":"IcY6eT","search-area":"Wdbpxx","uuiTypography":"nh7WgS","heroHeader":"vwBmvG","promoHeader":"_6iJwJ-","uuiCritical":"MHu7mi","uuiSuccess":"HOmsTS","uuiWarning":"hPfS47","uuiTypographySize12":"jgNevH","uuiTypographySize14":"zyNvyW","uuiTypographySize16":"KOPUMT","mainPanel":"Gesp2K","groupTitle":"_7SMWYC","groupTitleText":"iual1t","groupTitleBadge":"vHuAMk","groupItems":"_2uhWT6","noData":"MB-1WA","hDivider":"IcY6eT","searchArea":"Wdbpxx"};
 
 var _path$b;
 function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
@@ -3798,7 +3883,7 @@ function PinIconButton(props) {
             React.createElement(IconButton, { icon: pinIcon, onClick: pinClickHandler, isDisabled: isPinnedAlways, color: isPinned ? 'info' : undefined }))));
 }
 
-var styles = {"row-wrapper":"_3Cmguf","not-pinned":"BCDWws","pin-icon-button":"lREqHf","checkbox":"_3Fmb5g","drag-handle":"_5bTbKF","dnd-disabled":"WDJFCm","rowWrapper":"_3Cmguf","notPinned":"BCDWws","pinIconButton":"lREqHf","dragHandle":"_5bTbKF","dndDisabled":"WDJFCm"};
+var styles = {"uui-typography":"cT2V4-","hero-header":"rh00xg","promo-header":"Z-XykY","uui-critical":"-rXc0C","uui-success":"tg1dr8","uui-warning":"XG3Asw","uui-typography-size-12":"_4mRK-h","uui-typography-size-14":"IryKgW","uui-typography-size-16":"BR55YW","row-wrapper":"AeJi93","not-pinned":"Zprhto","pin-icon-button":"wsYjR9","checkbox":"NJv8UH","drag-handle":"utizSR","dnd-disabled":"QQXiQz","uuiTypography":"cT2V4-","heroHeader":"rh00xg","promoHeader":"Z-XykY","uuiCritical":"-rXc0C","uuiSuccess":"tg1dr8","uuiWarning":"XG3Asw","uuiTypographySize12":"_4mRK-h","uuiTypographySize14":"IryKgW","uuiTypographySize16":"BR55YW","rowWrapper":"AeJi93","notPinned":"Zprhto","pinIconButton":"wsYjR9","dragHandle":"utizSR","dndDisabled":"QQXiQz"};
 
 const ColumnRow = React.memo(function ColumnRow(props) {
     const { column } = props;
@@ -3883,7 +3968,7 @@ function ColumnsConfigurationModal(props) {
                 noVisibleColumns ? (React.createElement(Tooltip, { content: i18n$1.enableAtLeastOneColumnMessage, placement: "top-end", color: "critical" }, applyButton)) : (applyButton)))));
 }
 
-var css$g = {"listContainer":"AyNuAd","header":"_6fSx6A","group":"HcUve7","stickyHeader":"QAVdcT"};
+var css$g = {"listContainer":"TKLWIu","header":"oQabbQ","group":"uYIJg-","stickyHeader":"_4WoN1g"};
 
 const getChildrenAndRest = (row, rows) => {
     const firstNotChildIndex = rows.findIndex((other) => other.depth < row.depth || (row.depth === other.depth && other.isPinned));
@@ -3949,7 +4034,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#4izetwbaxv8azmeb_a)"
+    clipPath: "url(#odcvp14f5jigh3wnc_a)"
   }, _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
     d: "M150.585 1.535C49.483-11.495 27.481 61.805 45.725 97.481c10.581 20.69-39.64 70.792 17.744 81.468 27.538 5.123 36-13.341 62.433-10.655 35.4 3.6 148.167-4.73 88.349-78.915-31.713-39.335 1.026-79.506-63.666-87.844Z",
     fill: "#F5F6FA"
@@ -3970,7 +4055,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M86.786 22.982c-2.55 0-4.965 2.07-4.965 4.552V120.6c0 2.484 2.4 4.572 4.965 4.572h88.101c2.582 0 4.986-2.089 4.986-4.572V27.534c0-2.464-2.418-4.552-4.986-4.552h-88.1Zm-5.793 4.552c0-3.022 2.874-5.38 5.793-5.38h88.101c2.935 0 5.814 2.374 5.814 5.38V120.6c0 3.021-2.86 5.4-5.814 5.4h-88.1c-2.94 0-5.794-2.381-5.794-5.4V27.534Z",
     fill: "#1D1E26"
   })), /*#__PURE__*/React.createElement("mask", {
-    id: "4izetwhgipvq72oc6_b",
+    id: "odcvp1h2yq1tv2m5c_b",
     style: {
       maskType: "alpha"
     },
@@ -3983,7 +4068,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M174.887 125.586h-88.1c-2.752 0-5.38-2.234-5.38-4.986V27.534c0-2.752 2.644-4.966 5.38-4.966h88.1c2.752 0 5.4 2.23 5.4 4.966V120.6c0 2.752-2.632 4.986-5.4 4.986Z",
     fill: "#9BDEFF"
   }))), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
-    mask: "url(#4izetwhgipvq72oc6_b)",
+    mask: "url(#odcvp1h2yq1tv2m5c_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
@@ -4069,7 +4154,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M24.73 96.184a.414.414 0 0 1 .581.06l48.646 59.751a.413.413 0 1 1-.642.523L24.67 96.766a.414.414 0 0 1 .06-.582Z",
     fill: "#fff"
   }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "4izetwbaxv8azmeb_a"
+    id: "odcvp14f5jigh3wnc_a"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
@@ -4078,7 +4163,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
 };
 var ForwardRef$9 = /*#__PURE__*/forwardRef(SvgEmptyTable);
 
-var css$f = {"sticky-header":"UK-0j4","table":"xj5vlU","no-results":"Q-qmRZ","no-results-icon":"jKQzRl","no-results-title":"fkjUTM","stickyHeader":"UK-0j4","noResults":"Q-qmRZ","noResultsIcon":"jKQzRl","noResultsTitle":"fkjUTM"};
+var css$f = {"sticky-header":"Yr1gKJ","table":"x6cmhN","no-results":"OEhAL9","no-results-icon":"_3qURi8","no-results-title":"RkhM12","stickyHeader":"Yr1gKJ","noResults":"OEhAL9","noResultsIcon":"_3qURi8","noResultsTitle":"RkhM12"};
 
 function DataTable(props) {
     var _a;
@@ -4117,21 +4202,20 @@ function DataTable(props) {
             React.createElement("div", { className: cx$1(uuiScrollShadows.top, {
                     [uuiScrollShadows.topVisible]: scrollShadows.verticalTop,
                 }) })),
-        props.exactRowsCount !== 0 ? (React.createElement(DataRowsContainer, { headerRef: headerRef, listContainerRef: listContainerRef, estimatedHeight: estimatedHeight, offsetY: offsetY, scrollShadows: scrollShadows, renderRow: renderRow, rows: rows })) : (renderNoResultsBlock === null || renderNoResultsBlock === void 0 ? void 0 : renderNoResultsBlock()),
-        React.createElement(Blocker, { isEnabled: props.isReloading }))), [
+        props.exactRowsCount !== 0 ? (React.createElement(DataRowsContainer, { headerRef: headerRef, listContainerRef: listContainerRef, estimatedHeight: estimatedHeight, offsetY: offsetY, scrollShadows: scrollShadows, renderRow: renderRow, rows: rows })) : (renderNoResultsBlock === null || renderNoResultsBlock === void 0 ? void 0 : renderNoResultsBlock()))), [
         props, columns, rows, renderNoResultsBlock, onConfigurationButtonClick,
     ]);
     return (React.createElement(DataTableSelectionProvider, { onCopy: props.onCopy, rows: rows, columns: columns },
-        React.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rowsCount: props.rowsCount, renderRows: renderRowsContainer, cx: cx$1(css$f.table, 'uui-dt-vars'), disableScroll: props.isReloading, rowsSelector: "[role=row]", rawProps: {
+        React.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rowsCount: props.rowsCount, renderRows: renderRowsContainer, cx: cx$1(css$f.table, 'uui-dt-vars'), isLoading: props.isReloading, rowsSelector: "[role=row]", rawProps: {
                 role: 'table',
                 'aria-colcount': columns.length,
                 'aria-rowcount': props.rowsCount,
             } })));
 }
 
-var css$e = {"root":"sZ-aKk"};
+var css$e = {"root":"nUu4v6"};
 
-var css$d = {"root":"qvMp4-","burger-content":"QZJCef","burgerContent":"QZJCef"};
+var css$d = {"root":"YgJxo0","burger-content":"NVCq2B","burgerContent":"NVCq2B"};
 
 var _path$7;
 function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
@@ -4198,7 +4282,7 @@ var SvgTriangle = function SvgTriangle(props, ref) {
 };
 var ForwardRef$6 = /*#__PURE__*/forwardRef(SvgTriangle);
 
-var css$c = {"root":"ZLGe1w","button-primary":"ar9z3T","button-secondary":"nx0Dd1","hasIcon":"BxYBvl","dropdown":"n8EaG6","buttonPrimary":"ar9z3T","buttonSecondary":"nx0Dd1"};
+var css$c = {"uui-typography":"uRDD-m","hero-header":"_7ZRcTr","promo-header":"_9YioH4","uui-critical":"WMI4cG","uui-success":"_8b7ece","uui-warning":"i3RDqG","uui-typography-size-12":"aGHOA6","uui-typography-size-14":"e4FJ9a","uui-typography-size-16":"abgIlP","root":"JdVEUQ","button-primary":"LijBED","button-secondary":"IQMsTt","hasIcon":"-NN9-5","dropdown":"ELLUye","uuiTypography":"uRDD-m","heroHeader":"_7ZRcTr","promoHeader":"_9YioH4","uuiCritical":"WMI4cG","uuiSuccess":"_8b7ece","uuiWarning":"i3RDqG","uuiTypographySize12":"aGHOA6","uuiTypographySize14":"e4FJ9a","uuiTypographySize16":"abgIlP","buttonPrimary":"LijBED","buttonSecondary":"IQMsTt"};
 
 const BurgerButton = withMods(Button$1, (props) => [
     css$c.root,
@@ -4255,13 +4339,13 @@ var SvgMenuInputCancel = function SvgMenuInputCancel(props, ref) {
 };
 var ForwardRef$5 = /*#__PURE__*/forwardRef(SvgMenuInputCancel);
 
-var css$b = {"search-input":"wej8gI","searchInput":"wej8gI"};
+var css$b = {"search-input":"tGROR5","searchInput":"tGROR5"};
 
 function BurgerSearch(props) {
     return (React.createElement(TextInput$1, { cx: cx(css$b.searchInput, 'uui-main_menu-burger-search'), iconPosition: "left", icon: ForwardRef$15, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$5 }));
 }
 
-var css$a = {"root":"mpQabO","group-header":"JWOBGZ","group-name":"crVrf-","line":"rLH9si","groupHeader":"JWOBGZ","groupName":"crVrf-"};
+var css$a = {"root":"k2ZCD9","group-header":"bTDk44","group-name":"BI-PeX","line":"pVl6Qh","groupHeader":"bTDk44","groupName":"BI-PeX"};
 
 function BurgerGroupHeader(props) {
     return (React.createElement("div", { className: cx(css$a.root, css$a.groupHeader, 'uui-burger-group-header') },
@@ -4269,7 +4353,7 @@ function BurgerGroupHeader(props) {
         React.createElement("span", { className: css$a.groupName }, props.caption)));
 }
 
-var css$9 = {"root":"Q31ipb","type-primary":"_0-RgQ-","type-secondary":"HwgUAz","typePrimary":"_0-RgQ-","typeSecondary":"HwgUAz"};
+var css$9 = {"uui-typography":"GVaIuA","hero-header":"CorQar","promo-header":"sGwxGY","uui-critical":"xTp4Xc","uui-success":"cjfefQ","uui-warning":"NiAu13","uui-typography-size-12":"_5zDq6v","uui-typography-size-14":"uWCTKx","uui-typography-size-16":"SSenM-","root":"QxsGk0","type-primary":"zRNtmE","type-secondary":"ximnJC","uuiTypography":"GVaIuA","heroHeader":"CorQar","promoHeader":"sGwxGY","uuiCritical":"xTp4Xc","uuiSuccess":"cjfefQ","uuiWarning":"NiAu13","uuiTypographySize12":"_5zDq6v","uuiTypographySize14":"uWCTKx","uuiTypographySize16":"SSenM-","typePrimary":"zRNtmE","typeSecondary":"ximnJC"};
 
 var _path$4;
 function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
@@ -4289,7 +4373,7 @@ var ForwardRef$4 = /*#__PURE__*/forwardRef(SvgChevronDown24);
 
 const MainMenuButton = withMods(Button$1, (mods) => [css$9.root, css$9['type-' + (mods.type || 'primary')]], () => ({ dropdownIcon: ForwardRef$4, role: 'menuitem' }));
 
-var css$8 = {"dropdown-body":"_2ACwI-","dropdownBody":"_2ACwI-"};
+var css$8 = {"dropdown-body":"mgSK0p","dropdownBody":"mgSK0p"};
 
 class MainMenuDropdown extends React.Component {
     render() {
@@ -4322,7 +4406,7 @@ function applyMainMenuMods() {
         'uui-main_menu',
     ];
 }
-const MainMenu = withMods(MainMenu$1, applyMainMenuMods, () => ({
+const MainMenu = withMods(uuiComponents.MainMenu, applyMainMenuMods, () => ({
     Burger,
     MainMenuDropdown,
 }));
@@ -4343,12 +4427,12 @@ var SvgGlobalMenu = function SvgGlobalMenu(props, ref) {
 };
 var ForwardRef$3 = /*#__PURE__*/forwardRef(SvgGlobalMenu);
 
-var css$7 = {"global-menu-btn":"fD1CWC","globalMenuIcon":"_248sm-","globalMenuBtn":"fD1CWC"};
+var css$7 = {"global-menu-btn":"dDPxEL","globalMenuIcon":"_2b33-m","globalMenuBtn":"dDPxEL"};
 
 const GlobalMenu = React.forwardRef((props, ref) => (React.createElement("button", Object.assign({ ref: ref, id: "global_menu_toggle", className: cx(css$7.globalMenuBtn, props.cx) }, props.rawProps),
     React.createElement(IconContainer, { icon: ForwardRef$3, cx: css$7.globalMenuIcon }))));
 
-var css$6 = {"container":"zaRJhv","open":"B0Vf-s"};
+var css$6 = {"container":"-wZrLg","open":"EXNBJy"};
 
 const MainMenuAvatar = React.forwardRef((props, ref) => (React.createElement("button", { ref: ref, className: cx(css$6.container, props.isDropdown && css$6.dropdown, props.isOpen && css$6.open, props.onClick && uuiMarkers.clickable, props.cx), onClick: props.onClick },
     React.createElement(Avatar, { size: "36", img: props.avatarUrl }),
@@ -4356,18 +4440,18 @@ const MainMenuAvatar = React.forwardRef((props, ref) => (React.createElement("bu
     props.isDropdown && (React.createElement("div", null,
         React.createElement(IconContainer, { icon: ForwardRef$1b, flipY: props.isOpen }))))));
 
-var css$5 = {"search-input":"i6FH-a","searchInput":"i6FH-a"};
+var css$5 = {"search-input":"_7PPGLK","searchInput":"_7PPGLK"};
 
 const MainMenuSearch = React.forwardRef((props, ref) => (React.createElement(IEditableDebouncer, Object.assign({}, props, { render: (iEditable) => {
         var _a;
         return (React.createElement(TextInput$1, Object.assign({ iconPosition: "left", icon: ForwardRef$15, cancelIcon: ((_a = props.value) === null || _a === void 0 ? void 0 : _a.length) > 0 && ForwardRef$5 }, props, iEditable, { ref: ref, cx: cx$1(css$5.searchInput, props.cx) }, props.rawProps)));
     } }))));
 
-var css$4 = {"container":"U-cezM"};
+var css$4 = {"container":"atjytZ"};
 
 const MainMenuIcon = React.forwardRef((props, ref) => (React.createElement(IconButton, Object.assign({ ref: ref, icon: props.icon, cx: cx$1(props.cx, css$4.container) }, props))));
 
-var css$3 = {"root":"Q0jtOk"};
+var css$3 = {"root":"_6oLV6I"};
 
 const Anchor = withMods(Anchor$1, () => [css$3.root]);
 
@@ -4424,7 +4508,7 @@ var SvgShape = function SvgShape(props, ref) {
 };
 var ForwardRef$2 = /*#__PURE__*/forwardRef(SvgShape);
 
-var css$2 = {"root":"czb8eW","drop-start":"WapaHZ","drop-over":"Vd3m5d","link":"cRXq0R","drop-area":"FJXA3j","icon-blue":"Ohqm6b","dropStart":"WapaHZ","dropOver":"Vd3m5d","dropArea":"FJXA3j","iconBlue":"Ohqm6b"};
+var css$2 = {"root":"GYZECa","drop-start":"AIhmOf","drop-over":"NvN90A","link":"cL95WF","drop-area":"E9-ozb","icon-blue":"EiTHWZ","dropStart":"AIhmOf","dropOver":"NvN90A","dropArea":"E9-ozb","iconBlue":"EiTHWZ"};
 
 class DropSpot extends React.Component {
     constructor() {
@@ -4448,9 +4532,9 @@ class DropSpot extends React.Component {
     }
 }
 
-var css$1 = {"root":"uoIALi","file-card-wrapper":"_4hID-4","file-name":"L2FYye","error-card-wrapper":"dQWmp1","default-color":"yshbvi","doc-color":"WQXcU-","xls-color":"kfeHRw","pdf-color":"luEP1W","mov-color":"oSLb2S","img-color":"LlHfZ0","movie-color":"lAjr0i","error-block":"ZZh9Df","icons-block":"sYd3q-","fileCardWrapper":"_4hID-4","fileName":"L2FYye","errorCardWrapper":"dQWmp1","defaultColor":"yshbvi","docColor":"WQXcU-","xlsColor":"kfeHRw","pdfColor":"luEP1W","movColor":"oSLb2S","imgColor":"LlHfZ0","movieColor":"lAjr0i","errorBlock":"ZZh9Df","iconsBlock":"sYd3q-"};
+var css$1 = {"root":"_9Y-z2O","file-name":"L-LfnB","default-color":"zaZeIU","doc-color":"sBpP7I","xls-color":"_6c0Ve4","pdf-color":"liEOmG","movie-color":"aIy8ez","img-color":"_78cDpF","mov-color":"DKhayr","error-block":"xln0jE","icons-block":"oHcpts","fileName":"L-LfnB","defaultColor":"zaZeIU","docColor":"sBpP7I","xlsColor":"_6c0Ve4","pdfColor":"liEOmG","movieColor":"aIy8ez","imgColor":"_78cDpF","movColor":"DKhayr","errorBlock":"xln0jE","iconsBlock":"oHcpts"};
 
-var css = {"root":"B93Ai5"};
+var css = {"root":"XjgmVj"};
 
 const SvgCircleProgress = React.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
@@ -4558,8 +4642,8 @@ const FileCard = React.forwardRef((props, ref) => {
         progress && progress < 100 && abortXHR();
         onClick();
     };
-    return (React.createElement(FlexCell, { ref: ref, cx: cx$1(css$1.root, css$1.fileCardWrapper, (isLoading || (error === null || error === void 0 ? void 0 : error.isError)) && uuiMod.loading, componentCx, (error === null || error === void 0 ? void 0 : error.isError) && css$1.errorCardWrapper), minWidth: width, width: !width ? '100%' : undefined },
-        React.createElement(FlexRow, { cx: css$1.fileCardRow, size: "36", alignItems: "top", spacing: "6" },
+    return (React.createElement(FlexCell, { ref: ref, cx: cx$1(css$1.root, 'uui-file_card', (isLoading || (error === null || error === void 0 ? void 0 : error.isError)) && uuiMod.loading, componentCx, (error === null || error === void 0 ? void 0 : error.isError) && uuiMod.error), minWidth: width, width: !width ? '100%' : undefined },
+        React.createElement(FlexRow, { size: "36", alignItems: "top", spacing: "6" },
             fileExtension && getIcon(fileExtension),
             React.createElement(FlexCell, { width: "100%" },
                 React.createElement(Text, { size: "18", fontSize: "14", lineHeight: "18", color: progress < 100 ? 'secondary' : 'primary', cx: css$1.fileName }, fileName),
@@ -4569,5 +4653,5 @@ const FileCard = React.forwardRef((props, ref) => {
                 isCrossShow && React.createElement(IconButton, { icon: ForwardRef$1, onClick: removeHandler })))));
 });
 
-export { Accordion, Alert, Anchor, AvatarStack, Badge, Blocker, Burger, BurgerButton, BurgerGroupHeader, BurgerSearch, Button, Calendar, Checkbox, CheckboxGroup, ClearNotification, ColumnHeaderDropdown, ColumnsConfigurationModal, ConfirmationModal, ControlGroup, DataPickerBody, DataPickerFooter, DataPickerHeader, DataPickerRow, DataRowsContainer, DataTable, DataTableCell, DataTableHeaderCell, DataTableHeaderRow, DataTableRow, DatePicker, DatePickerBody, DropMarker, DropSpot, Dropdown, DropdownContainer, DropdownMenuBody, DropdownMenuButton, DropdownMenuHeader, DropdownMenuSplitter, DropdownMenuSwitchButton, DropdownSubMenu, EditMode, ErrorAlert, ErrorNotification, FileCard, FilterItemBody, FiltersPanel, FlexCell, FlexRow, Form, GlobalMenu, HintAlert, HintNotification, IDropdownControlKeys, IconButton, IndeterminateBar, IndicatorBar, Informer, InputAddon, LabeledInput, LinkButton, MainMenu, MainMenuAvatar, MainMenuButton, MainMenuDropdown, MainMenuIcon, MainMenuSearch, MobileDropdownWrapper, ModalBlocker, ModalFooter, ModalHeader, ModalWindow, MultiSwitch, NotificationCard, NumericInput, Paginator, Panel, PickerInput, PickerItem, PickerList, PickerListItem, PickerModal, PickerToggler, PresetsPanel, ProgressBar, RadioGroup, RadioInput, RangeDatePicker, RangeDatePickerBody, RichTextView, ScrollBars, SearchInput, Spinner, SuccessAlert, SuccessNotification, SvgCircleProgress, Switch, TabButton, Tag, Text, TextArea, TextInput, TextPlaceholder, TimePicker, Tooltip, VerticalTabButton, VirtualList, WarningAlert, WarningNotification, allButtonColors, allButtonFills, allEpamBadgeSemanticColors, allFillStyles, allFontStyles, allIconColors, allLinkButtonColors, allRowSizes, allSemanticColors, allSizes, allTextColors, allTextSizes, applyBadgeMods, applyButtonMods, applyCheckboxMods, applyDateSelectionMods, applyInputAddonMods, applyNumericInputMods, applyProgressBarMods, applySpinnerMods, applySwitchMods, applyTagMods, applyTextAreaMods, applyTextInputMods, defaultPredicates, getHighlightRanges, getHighlightedSearchMatches, getTextClasses, i18n, propsMods, rangeDatePickerPresets, renderCell, renderDropMarkers, useColumnsWithFilters, useForm, uuiDatePickerBody, weekCount };
+export { Accordion, Alert, Anchor, AvatarStack, Badge, Blocker, Burger, BurgerButton, BurgerGroupHeader, BurgerSearch, Button, Calendar, Checkbox, CheckboxGroup, ClearNotification, ColumnHeaderDropdown, ColumnsConfigurationModal, ConfirmationModal, ControlGroup, CountIndicator, DataPickerBody, DataPickerFooter, DataPickerHeader, DataPickerRow, DataRowsContainer, DataTable, DataTableCell, DataTableHeaderCell, DataTableHeaderRow, DataTableRow, DatePicker, DatePickerBody, DropMarker, DropSpot, Dropdown, DropdownContainer, DropdownMenuBody, DropdownMenuButton, DropdownMenuHeader, DropdownMenuSplitter, DropdownMenuSwitchButton, DropdownSubMenu, EditMode, ErrorAlert, ErrorNotification, FileCard, FilterItemBody, FiltersPanel, FlexCell, FlexRow, Form, GlobalMenu, HintAlert, HintNotification, IDropdownControlKeys, IconButton, IndeterminateBar, IndicatorBar, InputAddon, LabeledInput, LinkButton, MainMenu, MainMenuAvatar, MainMenuButton, MainMenuDropdown, MainMenuIcon, MainMenuSearch, MobileDropdownWrapper, ModalBlocker, ModalFooter, ModalHeader, ModalWindow, MultiSwitch, NotificationCard, NumericInput, Paginator, Panel, PickerInput, PickerItem, PickerList, PickerListItem, PickerModal, PickerToggler, PresetsPanel, ProgressBar, RadioGroup, RadioInput, RangeDatePicker, RangeDatePickerBody, RichTextView, ScrollBars, SearchInput, Slider, Spinner, StatusIndicator, SuccessAlert, SuccessNotification, SvgCircleProgress, Switch, TabButton, Tag, Text, TextArea, TextInput, TextPlaceholder, TimePicker, Tooltip, VerticalTabButton, VirtualList, WarningAlert, WarningNotification, allButtonColors, allButtonFills, allEpamBadgeSemanticColors, allFillStyles, allFontStyles, allIconColors, allLinkButtonColors, allRowSizes, allSemanticColors, allSizes, allTextColors, allTextSizes, applyBadgeMods, applyButtonMods, applyCheckboxMods, applyDateSelectionMods, applyInputAddonMods, applyNumericInputMods, applyProgressBarMods, applySliderMods, applySpinnerMods, applySwitchMods, applyTagMods, applyTextAreaMods, applyTextInputMods, defaultPredicates, getHighlightRanges, getHighlightedSearchMatches, getTextClasses, i18n, propsMods, rangeDatePickerPresets, renderCell, renderDropMarkers, useColumnsWithFilters, useForm, uuiDatePickerBody, weekCount };
 //# sourceMappingURL=index.esm.js.map