@epam/uui 5.4.3 → 5.5.0

package/index.esm.js

@@ -1,9 +1,9 @@
 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';
+import { Button as Button$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, ScrollBars as ScrollBars$1, AvatarStack as AvatarStack$1, Spinner as Spinner$1, Paginator as Paginator$1, ProgressBar as ProgressBar$1, DragHandle, Blocker as Blocker$1, PickerBodyBase, DataPickerRow as DataPickerRow$1, Avatar, usePickerModal, handleDataSourceKeyboard, PickerToggler as PickerToggler$1, usePickerInput, usePickerList, BaseDatePicker, BaseRangeDatePicker, AdaptivePanel, ModalBlocker as ModalBlocker$1, ModalWindow as ModalWindow$1, CalendarPresets as CalendarPresets$1, uuiDaySelection, uuiDatePickerBodyBase, DataTableCell as DataTableCell$1, DataTableRow as DataTableRow$1, DataTableHeaderCell as DataTableHeaderCell$1, DataTableHeaderRow as DataTableHeaderRow$1, useColumnsConfiguration, DataTableSelectionProvider, DataTableFocusProvider, 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 { withMods, IEditableDebouncer, devLogger, cx as cx$1, UuiContext, uuiMod, i18n as i18n$2, directionMode, uuiElement, uuiMarkers, useVirtualList, useScrollShadows, Lens, isMobile, 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';
@@ -570,274 +570,44 @@ const systemIcons = {
     },
 };
 
-var css$1m = {"root":"JCSVdn"};
-
-const AvatarStack = withMods(AvatarStack$1, () => [css$1m.root]);
-
-var css$1l = {"root":"tgDuFG","size-24":"_6AG2w-","size-18":"AFmt8Q","size-12":"XDRpIZ","size24":"_6AG2w-","size18":"AFmt8Q","size12":"XDRpIZ"};
+var css$1o = {"root":"g9tgpe","size-24":"_6-zHVP","size-18":"Tn39rO","size-12":"RcGZ35","size24":"_6-zHVP","size18":"Tn39rO","size12":"RcGZ35"};
 
 const CountIndicator = forwardRef((props, ref) => {
     return (React__default.createElement("div", { ref: ref, className: cx([
-            css$1l.root,
+            css$1o.root,
             'uui-count_indicator',
-            css$1l[`size-${props.size || 24}`],
+            css$1o[`size-${props.size || 24}`],
             props.color && `uui-color-${props.color}`,
             props.cx,
         ]) }, props.caption));
 });
 
-var css$1k = {"uui-typography":"_9Ww8mE","hero-header":"HBH751","promo-header":"ddVUOa","uui-critical":"XT99xr","uui-info":"TVSTZb","uui-success":"rFqtwg","uui-warning":"sjWEJc","uui-highlight":"yR04EY","uui-typography-size-12":"RAWxiZ","uui-typography-size-14":"_6edrsu","uui-typography-size-16":"Xd3Wu-","root":"YwO6Y9","size-18":"DbEwkb","size-24":"HImBvu","size-30":"PP8tud","size-36":"VisQDc","size-42":"_4mUyVB","size-48":"nvgOgy","uuiTypography":"_9Ww8mE","heroHeader":"HBH751","promoHeader":"ddVUOa","uuiCritical":"XT99xr","uuiInfo":"TVSTZb","uuiSuccess":"rFqtwg","uuiWarning":"sjWEJc","uuiHighlight":"yR04EY","uuiTypographySize12":"RAWxiZ","uuiTypographySize14":"_6edrsu","uuiTypographySize16":"Xd3Wu-","size18":"DbEwkb","size24":"HImBvu","size30":"PP8tud","size36":"VisQDc","size42":"_4mUyVB","size48":"nvgOgy"};
-
-const mapSize$1 = {
-    48: '48',
-    42: '48',
-    36: '36',
-    30: '30',
-    24: '30',
-    18: '18',
-};
-const defaultBadgeSize = '36';
-const defaultBadgeFill = 'solid';
-function applyBadgeMods(mods) {
-    return [
-        'uui-badge',
-        css$1k.root,
-        css$1k['size-' + (mods.size || defaultBadgeSize)],
-        `uui-fill-${mods.fill || defaultBadgeFill}`,
-        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]) || defaultBadgeSize].foldingArrow,
-        clearIcon: systemIcons[(props.size && mapSize$1[props.size]) || defaultBadgeSize].clear,
-        countPosition: 'left',
-        countIndicator: (countIndicatorProps) => (React__default.createElement(CountIndicator, Object.assign({}, countIndicatorProps, { color: null, size: mapCountIndicatorSizes$1[props.size || defaultBadgeSize] }))),
-        indicator: props.indicator || false,
-    };
-});
-
-var css$1j = {"uui-typography":"kR-zdy","hero-header":"pXvl66","promo-header":"kLu1mC","uui-critical":"bJ3yk-","uui-info":"gGtKUi","uui-success":"FnuyWD","uui-warning":"qCvd-a","uui-highlight":"clxp3g","uui-typography-size-12":"guyLnM","uui-typography-size-14":"iM8b5d","uui-typography-size-16":"kVb8vI","root":"yXCfh8","size-18":"p-brSA","size-24":"YR3c20","size-30":"_41EJdZ","size-36":"_1WAYSe","size-42":"Rv7drN","size-48":"-bhT6C","uuiTypography":"kR-zdy","heroHeader":"pXvl66","promoHeader":"kLu1mC","uuiCritical":"bJ3yk-","uuiInfo":"gGtKUi","uuiSuccess":"FnuyWD","uuiWarning":"qCvd-a","uuiHighlight":"clxp3g","uuiTypographySize12":"guyLnM","uuiTypographySize14":"iM8b5d","uuiTypographySize16":"kVb8vI","size18":"p-brSA","size24":"YR3c20","size30":"_41EJdZ","size36":"_1WAYSe","size42":"Rv7drN","size48":"-bhT6C"};
-
-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(props) {
-    return [
-        css$1j['size-' + (props.size || defaultSize$a)],
-        css$1j.root,
-        `uui-color-${props.color || 'neutral'}`,
-        `uui-fill-${props.fill || 'solid'}`,
-        '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: (!props.color || props.color === 'neutral') ? 'white' : props.color, size: mapCountIndicatorSizes[props.size || defaultSize$a] }))),
-}));
-
-var css$1i = {"root":"GnKCde","uui-spinner":"fGZaIO","uuiSpinner":"fGZaIO"};
-
-function applySpinnerMods() {
-    return [css$1i.root, 'uui-spinner'];
-}
-const Spinner = withMods(Spinner$1, applySpinnerMods);
-
-var css$1h = {"root":"rGX-Wj","spacer":"hwwINc","mode-ghost":"zDhYg5","size-24":"OsKYGq","size-30":"RoJAMc","navigation-size-24":"rL6scB","navigation-size-30":"zUBzYZ","modeGhost":"zDhYg5","size24":"OsKYGq","size30":"RoJAMc","navigationSize24":"rL6scB","navigationSize30":"zUBzYZ"};
-
-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 SvgNavigationChevronLeft12 = function SvgNavigationChevronLeft12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$N({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 13,
-    height: 12,
-    viewBox: "0 0 13 12",
-    ref: ref
-  }, props), _path$L || (_path$L = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M8.205 3.705 7.5 3l-3 3 3 3 .705-.705L5.915 6l2.29-2.295z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$N = /*#__PURE__*/forwardRef(SvgNavigationChevronLeft12);
-
-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 SvgNavigationChevronRight12 = function SvgNavigationChevronRight12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$M({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 13,
-    height: 12,
-    viewBox: "0 0 13 12",
-    ref: ref
-  }, props), _path$K || (_path$K = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "m5.5 3-.705.705L7.085 6l-2.29 2.295L5.5 9l3-3-3-3z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$M = /*#__PURE__*/forwardRef(SvgNavigationChevronRight12);
-
-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 SvgNavigationChevronLeft18 = function SvgNavigationChevronLeft18(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: "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$L = /*#__PURE__*/forwardRef(SvgNavigationChevronLeft18);
-
-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 SvgNavigationChevronRight18 = function SvgNavigationChevronRight18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$K({
-    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: "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$K = /*#__PURE__*/forwardRef(SvgNavigationChevronRight18);
-
-function Paginator(props) {
-    const renderPaginator = (params) => {
-        var _a, _b;
-        return (React__default.createElement("nav", Object.assign({ role: "navigation", className: cx(css$1h.root, 'uui-paginator') }, params.rawProps),
-            React__default.createElement(Button, { cx: css$1h[`navigation-size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$L : ForwardRef$N, 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$1h[`size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], css$1h.spacer), size: params.size, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1 }));
-                }
-                else {
-                    return (React__default.createElement(Button, { cx: cx(css$1h[`size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], css$1h[`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$1h[`navigation-size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$K : ForwardRef$M, onClick: params.goToNext, isDisabled: params.isLast, fill: "outline", color: "secondary" })));
-    };
-    return React__default.createElement(Paginator$1, Object.assign({}, props, { render: renderPaginator }));
-}
-
-var css$1g = {"root":"DlfU8Y","progress-bar":"_0Sp4BA","progressBar-indeterminate":"uz7iBb","size-12":"I2vkxB","size-18":"Kwnij4","size-24":"_5yRVa6","progressBar":"_0Sp4BA","progressBarIndeterminate":"uz7iBb","size12":"I2vkxB","size18":"Kwnij4","size24":"_5yRVa6"};
-
-const IndeterminateBar = React.forwardRef((props, ref) => {
-    return (React.createElement("div", { ref: ref, className: cx('uui-indeterminate_bar', props.cx, css$1g.root, css$1g[`size-${props.size || 12}`]) },
-        React.createElement("div", { className: cx(css$1g.progressBar) })));
-});
-
-var css$1f = {"root":"LoCAMF","striped":"O3leER","animate-stripes":"AJqUfb","size-12":"nk-vZG","size-18":"_9Bhp0E","size-24":"xtNS9D","animateStripes":"AJqUfb","size12":"nk-vZG","size18":"_9Bhp0E","size24":"xtNS9D"};
-
-const defaultSize$9 = '12';
-function applyProgressBarMods(mods) {
-    const size = mods.size || defaultSize$9;
-    return [
-        css$1f.root,
-        css$1f[`size-${size}`],
-        mods.striped && css$1f.striped,
-    ];
-}
-const ProgressBar = withMods(ProgressBar$1, applyProgressBarMods, (props) => ({
-    hideLabel: props.hideLabel || props.striped,
-}));
-
-var css$1e = {"root":"_4Bdufz"};
-
-const IndicatorBar = React.forwardRef((props, ref) => {
-    const { progress } = props;
-    return progress || progress === 0 ? (React.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx(css$1e.root, props.cx), hideLabel: true })) : (React.createElement(IndeterminateBar, { ref: ref, cx: cx(css$1e.root, props.cx) }));
-});
-
-var css$1d = {"root":"GPy3p5","size-12":"gK0qes","size-18":"_7H-YeF","size-24":"ypMWVG","size12":"gK0qes","size18":"_7H-YeF","size24":"ypMWVG"};
-
-const StatusIndicator = forwardRef((props, ref) => {
-    return (React__default.createElement("div", { ref: ref, className: cx([
-            css$1d.root,
-            css$1d[`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$1c = {"uui-typography":"bq-glA","hero-header":"lfIJZP","promo-header":"H4YRgL","uui-critical":"MGylyY","uui-info":"RZi5Yr","uui-success":"lKlFmZ","uui-warning":"dGvj31","uui-highlight":"wp-VpT","uui-typography-size-12":"arWNHO","uui-typography-size-14":"ijFoJK","uui-typography-size-16":"Q9Ru4G","root":"dHTqKf","uuiTypography":"bq-glA","heroHeader":"lfIJZP","promoHeader":"H4YRgL","uuiCritical":"MGylyY","uuiInfo":"RZi5Yr","uuiSuccess":"lKlFmZ","uuiWarning":"dGvj31","uuiHighlight":"wp-VpT","uuiTypographySize12":"arWNHO","uuiTypographySize14":"ijFoJK","uuiTypographySize16":"Q9Ru4G"};
+var css$1n = {"uui-typography":"wlHZsN","hero-header":"_0i4pMv","promo-header":"vqQd0m","uui-critical":"_81-rPl","uui-info":"_0daN0o","uui-success":"_0fTQh-","uui-warning":"_1Tviem","uui-highlight":"iI8hkF","uui-typography-size-12":"qdEfwG","uui-typography-size-14":"z5HWt-","uui-typography-size-16":"_0DVMpj","root":"qBwJ-6","uuiTypography":"wlHZsN","heroHeader":"_0i4pMv","promoHeader":"vqQd0m","uuiCritical":"_81-rPl","uuiInfo":"_0daN0o","uuiSuccess":"_0fTQh-","uuiWarning":"_1Tviem","uuiHighlight":"iI8hkF","uuiTypographySize12":"qdEfwG","uuiTypographySize14":"z5HWt-","uuiTypographySize16":"_0DVMpj"};
 
-const defaultSize$8 = '36';
+const DEFAULT_SIZE$8 = '36';
 function applyButtonMods(mods) {
     return [
-        css$1c.root,
+        css$1n.root,
         'uui-button',
         `uui-fill-${mods.fill || 'solid'}`,
         `uui-color-${mods.color || 'primary'}`,
-        `uui-size-${mods.size || defaultSize$8}`,
+        `uui-size-${mods.size || DEFAULT_SIZE$8}`,
     ];
 }
 const Button = withMods(Button$1, applyButtonMods, (props) => ({
-    dropdownIcon: systemIcons[props.size || defaultSize$8].foldingArrow,
-    clearIcon: systemIcons[props.size || defaultSize$8].clear,
+    dropdownIcon: systemIcons[props.size || DEFAULT_SIZE$8].foldingArrow,
+    clearIcon: systemIcons[props.size || DEFAULT_SIZE$8].clear,
     countIndicator: (countIndicatorProps) => React__default.createElement(CountIndicator, Object.assign({}, countIndicatorProps, { color: "white" })),
 }));
 
-var css$1b = {"root":"VWzV1A"};
+var css$1m = {"root":"DBt6Pb"};
 
-const allIconColors = [
-    'info', 'success', 'warning', 'error', 'secondary', 'neutral',
-];
 function applyIconButtonMods(mods) {
-    return ['uui-icon_button', `uui-color-${mods.color || 'neutral'}`, css$1b.root];
+    return ['uui-icon_button', `uui-color-${mods.color || 'neutral'}`, css$1m.root];
 }
 const IconButton = withMods(IconButton$1, applyIconButtonMods);
 
-var css$1a = {"root":"ZzLAqU"};
+var css$1l = {"root":"tZra-e"};
 
 function getIconClass(props) {
     const classList = {
@@ -856,135 +626,144 @@ 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$7 = '36';
-const allLinkButtonColors = ['primary', 'secondary', 'contrast'];
+const DEFAULT_SIZE$7 = '36';
 function applyLinkButtonMods(mods) {
     return [
         'uui-link_button',
-        css$1a.root,
-        `uui-size-${mods.size || defaultSize$7}`,
+        css$1l.root,
+        `uui-size-${mods.size || DEFAULT_SIZE$7}`,
         ...getIconClass(mods),
         `uui-color-${mods.color || 'primary'}`,
     ];
 }
 const LinkButton = withMods(Button$1, applyLinkButtonMods, (props) => ({
-    dropdownIcon: systemIcons[props.size || defaultSize$7].foldingArrow,
-    clearIcon: systemIcons[props.size || defaultSize$7].clear,
+    dropdownIcon: systemIcons[props.size || DEFAULT_SIZE$7].foldingArrow,
+    clearIcon: systemIcons[props.size || DEFAULT_SIZE$7].clear,
 }));
 
-var css$19 = {"uui-typography":"AfCMOU","hero-header":"_5voUEy","promo-header":"gzSjiJ","uui-critical":"yMNL6B","uui-info":"IYtby1","uui-success":"_2UpEQF","uui-warning":"MkYic4","uui-highlight":"ftRUzB","uui-typography-size-12":"_3pDYk1","uui-typography-size-14":"HzYaPY","uui-typography-size-16":"kf1Fmz","root":"V2OpqN","withNotify":"ZKMEUY","size-36":"RI1XHA","size-48":"kjfWmH","size-60":"qRviAw","uuiTypography":"AfCMOU","heroHeader":"_5voUEy","promoHeader":"gzSjiJ","uuiCritical":"yMNL6B","uuiInfo":"IYtby1","uuiSuccess":"_2UpEQF","uuiWarning":"MkYic4","uuiHighlight":"ftRUzB","uuiTypographySize12":"_3pDYk1","uuiTypographySize14":"HzYaPY","uuiTypographySize16":"kf1Fmz","size36":"RI1XHA","size48":"kjfWmH","size60":"qRviAw"};
+var css$1k = {"uui-typography":"ZLN5w9","hero-header":"Wqv32u","promo-header":"huf-Hl","uui-critical":"_8LTqQL","uui-info":"BhrC9H","uui-success":"c5rbnJ","uui-warning":"AUxOoI","uui-highlight":"RhKFxa","uui-typography-size-12":"gYP93f","uui-typography-size-14":"dma8hi","uui-typography-size-16":"a4u4IL","root":"nd1aAL","withNotify":"_90LS-v","size-36":"N-HjGE","size-48":"JJhRIX","size-60":"_3k75W8","uuiTypography":"ZLN5w9","heroHeader":"Wqv32u","promoHeader":"huf-Hl","uuiCritical":"_8LTqQL","uuiInfo":"BhrC9H","uuiSuccess":"c5rbnJ","uuiWarning":"AUxOoI","uuiHighlight":"RhKFxa","uuiTypographySize12":"gYP93f","uuiTypographySize14":"dma8hi","uuiTypographySize16":"a4u4IL","size36":"N-HjGE","size48":"JJhRIX","size60":"_3k75W8"};
 
 function applyTabButtonMods(mods) {
     return [
-        css$19.root,
+        css$1k.root,
         'uui-tab-button',
-        css$19['size-' + (mods.size || '48')],
-        mods.withNotify && css$19.withNotify,
+        css$1k['size-' + (mods.size || '48')],
+        mods.withNotify && css$1k.withNotify,
         ...getIconClass(mods),
     ];
 }
-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" }))) })));
+const TabButton = withMods(uuiComponents.Button, 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$18 = {"uui-typography":"U9gonE","hero-header":"tTWAJw","promo-header":"-PdLC-","uui-critical":"_0o7owI","uui-info":"WzLsWp","uui-success":"xIG4za","uui-warning":"R6huz3","uui-highlight":"RZwmWD","uui-typography-size-12":"UT-mcy","uui-typography-size-14":"P0qT8Q","uui-typography-size-16":"p5Zn10","root":"CheQjz","uuiTypography":"U9gonE","heroHeader":"tTWAJw","promoHeader":"-PdLC-","uuiCritical":"_0o7owI","uuiInfo":"WzLsWp","uuiSuccess":"xIG4za","uuiWarning":"R6huz3","uuiHighlight":"RZwmWD","uuiTypographySize12":"UT-mcy","uuiTypographySize14":"P0qT8Q","uuiTypographySize16":"p5Zn10"};
+var css$1j = {"uui-typography":"S8UFcE","hero-header":"OHeBzt","promo-header":"I7ssz7","uui-critical":"VYdXnv","uui-info":"D7v8r-","uui-success":"RcPeqf","uui-warning":"irCx6c","uui-highlight":"bjiqJE","uui-typography-size-12":"EDJPDM","uui-typography-size-14":"IUgCpo","uui-typography-size-16":"yIWdpP","root":"e8Uvl6","uuiTypography":"S8UFcE","heroHeader":"OHeBzt","promoHeader":"I7ssz7","uuiCritical":"VYdXnv","uuiInfo":"D7v8r-","uuiSuccess":"RcPeqf","uuiWarning":"irCx6c","uuiHighlight":"bjiqJE","uuiTypographySize12":"EDJPDM","uuiTypographySize14":"IUgCpo","uuiTypographySize16":"yIWdpP"};
 
 function applyVerticalTabButtonMods() {
-    return [css$18.root];
+    return [css$1j.root];
 }
 const VerticalTabButton = withMods(TabButton, applyVerticalTabButtonMods);
 
+/**
+ * Defines the different edit modes.
+ */
 var EditMode;
 (function (EditMode) {
+    /** Defines edit mode for form */
     EditMode["FORM"] = "form";
+    /** Defines edit mode for cell in tables */
     EditMode["CELL"] = "cell";
+    /** Defines edit mode for inline elements */
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-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 _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 SvgCheck12 = function SvgCheck12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$J({
+  return /*#__PURE__*/React.createElement("svg", _extends$N({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$H || (_path$H = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$L || (_path$L = /*#__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$J = /*#__PURE__*/forwardRef(SvgCheck12);
+var ForwardRef$N = /*#__PURE__*/forwardRef(SvgCheck12);
 
-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 _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 SvgCheck18 = function SvgCheck18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$I({
+  return /*#__PURE__*/React.createElement("svg", _extends$M({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$G || (_path$G = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$K || (_path$K = /*#__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$I = /*#__PURE__*/forwardRef(SvgCheck18);
+var ForwardRef$M = /*#__PURE__*/forwardRef(SvgCheck18);
 
-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 _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 SvgPartlySelect12 = function SvgPartlySelect12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$H({
+  return /*#__PURE__*/React.createElement("svg", _extends$L({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$F || (_path$F = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$J || (_path$J = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M9 5v2H3V5z"
   })));
 };
-var ForwardRef$H = /*#__PURE__*/forwardRef(SvgPartlySelect12);
+var ForwardRef$L = /*#__PURE__*/forwardRef(SvgPartlySelect12);
 
-var _path$E;
-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$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 SvgPartlySelect18 = function SvgPartlySelect18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$G({
+  return /*#__PURE__*/React.createElement("svg", _extends$K({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$E || (_path$E = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$I || (_path$I = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M14 8v2H4V8z"
   })));
 };
-var ForwardRef$G = /*#__PURE__*/forwardRef(SvgPartlySelect18);
+var ForwardRef$K = /*#__PURE__*/forwardRef(SvgPartlySelect18);
 
-var css$17 = {"uui-typography":"qzLNxj","hero-header":"w1-O3D","promo-header":"_5oBRVX","uui-critical":"mvUOO0","uui-info":"awnWgk","uui-success":"xV0VDD","uui-warning":"V8JyEZ","uui-highlight":"dKqo9X","uui-typography-size-12":"rFbUOS","uui-typography-size-14":"qfU-Qz","uui-typography-size-16":"QMr7-D","root":"wJM1Wd","size-18":"_0FAjL1","size-12":"_64-4UK","mode-cell":"abobUl","uuiTypography":"qzLNxj","heroHeader":"w1-O3D","promoHeader":"_5oBRVX","uuiCritical":"mvUOO0","uuiInfo":"awnWgk","uuiSuccess":"xV0VDD","uuiWarning":"V8JyEZ","uuiHighlight":"dKqo9X","uuiTypographySize12":"rFbUOS","uuiTypographySize14":"qfU-Qz","uuiTypographySize16":"QMr7-D","size18":"_0FAjL1","size12":"_64-4UK","modeCell":"abobUl"};
+var css$1i = {"uui-typography":"_9Kl6Gw","hero-header":"Ivyo6J","promo-header":"Jr1I2-","uui-critical":"udlZ3e","uui-info":"-xM3TZ","uui-success":"wCNO3O","uui-warning":"UzL6yg","uui-highlight":"Jmt7fj","uui-typography-size-12":"_4IaqYZ","uui-typography-size-14":"feuq-x","uui-typography-size-16":"_5VTci4","root":"zj644Z","size-18":"DW7-Tw","size-12":"B-mPUV","mode-cell":"EUCzBT","uuiTypography":"_9Kl6Gw","heroHeader":"Ivyo6J","promoHeader":"Jr1I2-","uuiCritical":"udlZ3e","uuiInfo":"-xM3TZ","uuiSuccess":"wCNO3O","uuiWarning":"UzL6yg","uuiHighlight":"Jmt7fj","uuiTypographySize12":"_4IaqYZ","uuiTypographySize14":"feuq-x","uuiTypographySize16":"_5VTci4","size18":"DW7-Tw","size12":"B-mPUV","modeCell":"EUCzBT"};
 
 function applyCheckboxMods(mods) {
     return [
-        css$17.root,
-        css$17['size-' + (mods.size || '18')],
-        css$17['mode-' + (mods.mode || 'form')],
+        css$1i.root,
+        css$1i['size-' + (mods.size || '18')],
+        css$1i['mode-' + (mods.mode || 'form')],
         'uui-color-primary',
     ];
 }
-const applyUUICheckboxProps = (props) => ({
-    icon: props.size === '12' ? ForwardRef$J : ForwardRef$I,
-    indeterminateIcon: props.size === '12' ? ForwardRef$H : ForwardRef$G,
-});
+const applyUUICheckboxProps = (props) => {
+    const defaultIcon = props.size === '12' ? ForwardRef$N : ForwardRef$M;
+    const defaultIndeterminateIcon = props.size === '12' ? ForwardRef$L : ForwardRef$K;
+    return {
+        icon: props.icon ? props.icon : defaultIcon,
+        indeterminateIcon: props.indeterminateIcon ? props.indeterminateIcon : defaultIndeterminateIcon,
+    };
+};
 const Checkbox = withMods(uuiComponents.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$16 = {"uui-typography":"_0lzkU6","hero-header":"E66vax","promo-header":"woC2HP","uui-critical":"SUr4f8","uui-info":"XLINO7","uui-success":"Ui9q80","uui-warning":"xAagtu","uui-highlight":"L9ul6X","uui-typography-size-12":"f5Xkce","uui-typography-size-14":"z-D2Dd","uui-typography-size-16":"BqpACu","root":"LRUP50","size-18":"O-Ak5q","size-12":"_5K1N22","uuiTypography":"_0lzkU6","heroHeader":"E66vax","promoHeader":"woC2HP","uuiCritical":"SUr4f8","uuiInfo":"XLINO7","uuiSuccess":"Ui9q80","uuiWarning":"xAagtu","uuiHighlight":"L9ul6X","uuiTypographySize12":"f5Xkce","uuiTypographySize14":"z-D2Dd","uuiTypographySize16":"BqpACu","size18":"O-Ak5q","size12":"_5K1N22"};
+var css$1h = {"uui-typography":"b7r2CC","hero-header":"gdUjCL","promo-header":"OEIbof","uui-critical":"I4EqJw","uui-info":"ssQiTL","uui-success":"eAZMJC","uui-warning":"TTItB5","uui-highlight":"iaVnYA","uui-typography-size-12":"_31JuQ8","uui-typography-size-14":"mG0UN7","uui-typography-size-16":"_7etnjp","root":"rLWndQ","size-18":"r3YyDb","size-12":"JDmzFK","uuiTypography":"b7r2CC","heroHeader":"gdUjCL","promoHeader":"OEIbof","uuiCritical":"I4EqJw","uuiInfo":"ssQiTL","uuiSuccess":"eAZMJC","uuiWarning":"TTItB5","uuiHighlight":"iaVnYA","uuiTypographySize12":"_31JuQ8","uuiTypographySize14":"mG0UN7","uuiTypographySize16":"_7etnjp","size18":"r3YyDb","size12":"JDmzFK"};
 
 var _circle;
-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); }
+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 SvgRadioPoint = function SvgRadioPoint(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$F({
+  return /*#__PURE__*/React.createElement("svg", _extends$J({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
@@ -996,18 +775,23 @@ var SvgRadioPoint = function SvgRadioPoint(props, ref) {
     r: 6
   })));
 };
-var ForwardRef$F = /*#__PURE__*/forwardRef(SvgRadioPoint);
+var ForwardRef$J = /*#__PURE__*/forwardRef(SvgRadioPoint);
 
 function applyRadioInputMods(mods) {
-    return [css$16.root, css$16['size-' + (mods.size || '18')], 'uui-color-primary'];
+    return [
+        css$1h.root,
+        css$1h['size-' + (mods.size || '18')],
+        'uui-radio-input-container',
+        'uui-color-primary',
+    ];
 }
-const RadioInput = withMods(RadioInput$1, applyRadioInputMods, () => ({ icon: ForwardRef$F }));
+const RadioInput = withMods(RadioInput$1, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : ForwardRef$J }));
 
-var css$15 = {"root":"VX-qEl","size-12":"nPY6Pe","size-18":"zUpHJ1","size-24":"gAy78j","size12":"nPY6Pe","size18":"zUpHJ1","size24":"gAy78j"};
+var css$1g = {"root":"Kz-GS0","size-12":"_0W2X0C","size-18":"_8jRpYn","size-24":"Eye9uS","size12":"_0W2X0C","size18":"_8jRpYn","size24":"Eye9uS"};
 
 function applySwitchMods(mods) {
     return [
-        css$15.root, css$15['size-' + (mods.size || '18')], 'uui-color-primary',
+        css$1g.root, css$1g['size-' + (mods.size || '18')], 'uui-color-primary',
     ];
 }
 const Switch = withMods(uuiComponents.Switch, applySwitchMods);
@@ -1056,94 +840,114 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var textInputCss = {"uui-typography":"DMJGsJ","hero-header":"QMFQas","promo-header":"gRH9Jr","uui-critical":"nk7krI","uui-info":"b78IRr","uui-success":"JY8mXU","uui-warning":"QsEi5l","uui-highlight":"mm0XaD","uui-typography-size-12":"kbY1Tv","uui-typography-size-14":"NTuhjg","uui-typography-size-16":"_7-kQCa","root":"_2HF5Fq","mode-form":"_8X3NES","mode-inline":"BGv7Q8","mode-cell":"_4FrC-I","size-24":"LBMeg4","size-30":"d8lWoe","size-36":"eMesyr","size-42":"_0b4AVV","size-48":"_67yUJm","uuiTypography":"DMJGsJ","heroHeader":"QMFQas","promoHeader":"gRH9Jr","uuiCritical":"nk7krI","uuiInfo":"b78IRr","uuiSuccess":"JY8mXU","uuiWarning":"QsEi5l","uuiHighlight":"mm0XaD","uuiTypographySize12":"kbY1Tv","uuiTypographySize14":"NTuhjg","uuiTypographySize16":"_7-kQCa","modeForm":"_8X3NES","modeInline":"BGv7Q8","modeCell":"_4FrC-I","size24":"LBMeg4","size30":"d8lWoe","size36":"eMesyr","size42":"_0b4AVV","size48":"_67yUJm"};
+var textInputCss = {"uui-typography":"aC13vK","hero-header":"xbqpuN","promo-header":"j7uWPD","uui-critical":"c-i2ST","uui-info":"k1Ippk","uui-success":"scEZqK","uui-warning":"d9Iy3c","uui-highlight":"a6zDMZ","uui-typography-size-12":"MNvt5j","uui-typography-size-14":"GDVMrp","uui-typography-size-16":"U5mb2N","root":"cpSJGA","mode-form":"g4YsZk","mode-inline":"_4v5oNP","mode-cell":"nh6u5I","size-24":"Kg-rRj","size-30":"znLhbb","size-36":"pPX4wT","size-42":"_1rQEUl","size-48":"tVKGNb","size-60":"Zukytv","uuiTypography":"aC13vK","heroHeader":"xbqpuN","promoHeader":"j7uWPD","uuiCritical":"c-i2ST","uuiInfo":"k1Ippk","uuiSuccess":"scEZqK","uuiWarning":"d9Iy3c","uuiHighlight":"a6zDMZ","uuiTypographySize12":"MNvt5j","uuiTypographySize14":"GDVMrp","uuiTypographySize16":"U5mb2N","modeForm":"g4YsZk","modeInline":"_4v5oNP","modeCell":"nh6u5I","size24":"Kg-rRj","size30":"znLhbb","size36":"pPX4wT","size42":"_1rQEUl","size48":"tVKGNb","size60":"Zukytv"};
 
-const defaultSize$6 = '36';
-const defaultMode$5 = EditMode.FORM;
+const DEFAULT_SIZE$6 = '36';
+const DEFAULT_MODE$3 = EditMode.FORM;
 function applyTextInputMods(mods) {
     return [
         textInputCss.root,
-        textInputCss['size-' + (mods.size || defaultSize$6)],
-        textInputCss['mode-' + (mods.mode || defaultMode$5)],
+        textInputCss['size-' + (mods.size || DEFAULT_SIZE$6)],
+        textInputCss['mode-' + (mods.mode || DEFAULT_MODE$3)],
     ];
 }
 const TextInput = withMods(TextInput$1, applyTextInputMods, (props) => ({
-    acceptIcon: systemIcons[props.size || defaultSize$6].accept,
-    cancelIcon: systemIcons[props.size || defaultSize$6].clear,
-    dropdownIcon: systemIcons[props.size || defaultSize$6].foldingArrow,
+    acceptIcon: systemIcons[props.size || DEFAULT_SIZE$6].accept,
+    cancelIcon: systemIcons[props.size || DEFAULT_SIZE$6].clear,
+    dropdownIcon: systemIcons[props.size || DEFAULT_SIZE$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$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.
-                // Related issue: https://github.com/epam/UUI/issues/1045.
-                ? (() => setTimeout(() => iEditable.onValueChange(''), 0))
-                : undefined, type: "search", inputMode: "search", ref: ref }, textInputProps, iEditable))) })));
+    return (React__default.createElement(IEditableDebouncer, Object.assign({}, props, { render: (iEditable) => (React__default.createElement(TextInput, Object.assign({ icon: systemIcons[props.size || DEFAULT_SIZE$6].search, onCancel: !!props.value && (() => iEditable.onValueChange('')), type: "search", inputMode: "search", ref: ref }, textInputProps, iEditable))) })));
 });
 
-var css$14 = {"root":"tt67X2"};
+var css$1f = {"root":"KYFtmg"};
 
-const ControlGroup = withMods(ControlGroup$1, () => [css$14.root]);
+const ControlGroup = withMods(ControlGroup$1, () => [css$1f.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, size: props.size, rawProps: { 'aria-current': props.value === item.id, role: 'tab' } }))))));
 }
 const MultiSwitch = React.forwardRef(MultiSwitchComponent);
 
-var css$13 = {"uui-typography":"RrFGnQ","hero-header":"W8cLAL","promo-header":"_6hVQGw","uui-critical":"_0326Bl","uui-info":"ICWDK7","uui-success":"KYegNH","uui-warning":"NbTJu2","uui-highlight":"_9diYSF","uui-typography-size-12":"Mom5PD","uui-typography-size-14":"U-IiTJ","uui-typography-size-16":"TQeR-o","root":"-iPVAy","size-24":"yHtpyG","size-30":"_9jdOA7","size-36":"_8E1m4b","size-42":"ovRe1b","size-48":"J7H6am","mode-form":"bopmVk","mode-cell":"rfVoDe","uuiTypography":"RrFGnQ","heroHeader":"W8cLAL","promoHeader":"_6hVQGw","uuiCritical":"_0326Bl","uuiInfo":"ICWDK7","uuiSuccess":"KYegNH","uuiWarning":"NbTJu2","uuiHighlight":"_9diYSF","uuiTypographySize12":"Mom5PD","uuiTypographySize14":"U-IiTJ","uuiTypographySize16":"TQeR-o","size24":"yHtpyG","size30":"_9jdOA7","size36":"_8E1m4b","size42":"ovRe1b","size48":"J7H6am","modeForm":"bopmVk","modeCell":"rfVoDe"};
+var css$1e = {"uui-typography":"EcxqoU","hero-header":"PL7YXa","promo-header":"Y60ul3","uui-critical":"-qiEjy","uui-info":"F00x1F","uui-success":"Nzoc84","uui-warning":"omLl0N","uui-highlight":"KybmFb","uui-typography-size-12":"UTAuRG","uui-typography-size-14":"ysPEIt","uui-typography-size-16":"SeZXYT","root":"A0PEAI","size-24":"cJzZ-j","size-30":"dKK00M","size-36":"OIrkCZ","size-42":"_22O1Rw","size-48":"nJvdf-","mode-form":"UfY86g","mode-cell":"Q8Hibx","uuiTypography":"EcxqoU","heroHeader":"PL7YXa","promoHeader":"Y60ul3","uuiCritical":"-qiEjy","uuiInfo":"F00x1F","uuiSuccess":"Nzoc84","uuiWarning":"omLl0N","uuiHighlight":"KybmFb","uuiTypographySize12":"UTAuRG","uuiTypographySize14":"ysPEIt","uuiTypographySize16":"SeZXYT","size24":"cJzZ-j","size30":"dKK00M","size36":"OIrkCZ","size42":"_22O1Rw","size48":"nJvdf-","modeForm":"UfY86g","modeCell":"Q8Hibx"};
 
-const defaultSize$5 = '36';
-const defaultMode$4 = EditMode.FORM;
+const DEFAULT_SIZE$5 = '36';
+const DEFAULT_MODE$2 = EditMode.FORM;
 function applyNumericInputMods(mods) {
     return [
-        textInputCss.root, css$13.root, css$13['size-' + (mods.size || defaultSize$5)], textInputCss['size-' + (mods.size || defaultSize$5)], textInputCss['mode-' + (mods.mode || defaultMode$4)],
+        textInputCss.root,
+        css$1e.root,
+        css$1e['size-' + (mods.size || DEFAULT_SIZE$5)],
+        textInputCss['size-' + (mods.size || DEFAULT_SIZE$5)],
+        textInputCss['mode-' + (mods.mode || DEFAULT_MODE$2)],
     ];
 }
 const NumericInput = withMods(NumericInput$1, applyNumericInputMods, (props) => {
     var _a, _b;
-    return ({
-        upIcon: systemIcons[props.size || defaultSize$5].foldingArrow,
-        downIcon: systemIcons[props.size || defaultSize$5].foldingArrow,
+    if (process.env.NODE_ENV !== "production") {
+        devLogger.warnAboutDeprecatedPropValue({
+            component: 'NumericInput',
+            propName: 'size',
+            propValue: '48',
+            propValueUseInstead: '42',
+            condition: () => props.size === '48',
+        });
+    }
+    return {
+        upIcon: systemIcons[props.size || DEFAULT_SIZE$5].foldingArrow,
+        downIcon: systemIcons[props.size || DEFAULT_SIZE$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$12 = {"uui-typography":"JY1jdy","hero-header":"WRaUrG","promo-header":"omtu4R","uui-critical":"BjWHfs","uui-info":"VjE9ay","uui-success":"_2j1mpW","uui-warning":"iHZi6z","uui-highlight":"B4OguM","uui-typography-size-12":"tZgIsr","uui-typography-size-14":"DVpUI3","uui-typography-size-16":"Z2Qkqu","root":"X40AQH","mode-form":"ZhtNxg","mode-cell":"cyjh8P","mode-inline":"sEQjYt","size-24":"-Z0hH0","size-30":"z4GoX4","size-36":"ZqLQY-","size-42":"WVi9Gp","size-48":"nHy5ft","uuiTypography":"JY1jdy","heroHeader":"WRaUrG","promoHeader":"omtu4R","uuiCritical":"BjWHfs","uuiInfo":"VjE9ay","uuiSuccess":"_2j1mpW","uuiWarning":"iHZi6z","uuiHighlight":"B4OguM","uuiTypographySize12":"tZgIsr","uuiTypographySize14":"DVpUI3","uuiTypographySize16":"Z2Qkqu","modeForm":"ZhtNxg","modeCell":"cyjh8P","modeInline":"sEQjYt","size24":"-Z0hH0","size30":"z4GoX4","size36":"ZqLQY-","size42":"WVi9Gp","size48":"nHy5ft"};
+var css$1d = {"uui-typography":"dQ6e3V","hero-header":"tC6x9u","promo-header":"FS-HaA","uui-critical":"zHS2-H","uui-info":"aeOFJo","uui-success":"AYCCpU","uui-warning":"TaSO9u","uui-highlight":"WveS4o","uui-typography-size-12":"RAczXp","uui-typography-size-14":"FHIBhd","uui-typography-size-16":"RvwyNp","root":"cWIBXx","mode-form":"Q6ssTp","mode-cell":"_3EfgRF","mode-inline":"zOQk1p","size-24":"_--L5RO","size-30":"qG0TzC","size-36":"_5-MwcX","size-42":"l-FuMK","size-48":"CX0dBe","uuiTypography":"dQ6e3V","heroHeader":"tC6x9u","promoHeader":"FS-HaA","uuiCritical":"zHS2-H","uuiInfo":"aeOFJo","uuiSuccess":"AYCCpU","uuiWarning":"TaSO9u","uuiHighlight":"WveS4o","uuiTypographySize12":"RAczXp","uuiTypographySize14":"FHIBhd","uuiTypographySize16":"RvwyNp","modeForm":"Q6ssTp","modeCell":"_3EfgRF","modeInline":"zOQk1p","size24":"_--L5RO","size30":"qG0TzC","size36":"_5-MwcX","size42":"l-FuMK","size48":"CX0dBe"};
 
-const defaultSize$4 = '36';
-const defaultMode$3 = EditMode.FORM;
+const DEFAULT_SIZE$4 = '36';
+const DEFAULT_MODE$1 = EditMode.FORM;
 function applyTextAreaMods(mods) {
     return [
-        css$12.root, css$12['size-' + (mods.size || defaultSize$4)], css$12['mode-' + (mods.mode || defaultMode$3)],
+        css$1d.root,
+        css$1d['size-' + (mods.size || DEFAULT_SIZE$4)],
+        css$1d['mode-' + (mods.mode || DEFAULT_MODE$1)],
     ];
 }
-const TextArea = withMods(TextArea$1, applyTextAreaMods, (props) => ({
-    autoSize: props.mode === EditMode.CELL ? true : props.autoSize,
-    maxLength: props.mode === EditMode.CELL ? undefined : props.maxLength,
-}));
+const TextArea = withMods(TextArea$1, applyTextAreaMods, (props) => {
+    if (process.env.NODE_ENV !== "production") {
+        devLogger.warnAboutDeprecatedPropValue({
+            component: 'TextArea',
+            propName: 'size',
+            propValue: '48',
+            propValueUseInstead: '42',
+            condition: () => props.size === '48',
+        });
+    }
+    return {
+        autoSize: props.mode === EditMode.CELL ? true : props.autoSize,
+        maxLength: props.mode === EditMode.CELL ? undefined : props.maxLength,
+    };
+});
 
-var css$11 = {"root":"DP1uBx"};
+var css$1c = {"root":"O9-0Ok"};
 
 function applyDropdownContainerMods(mods) {
     return [
-        css$11.root,
+        css$1c.root,
         mods.vPadding && `vPadding-${mods.vPadding}`,
         mods.padding && `padding-${mods.padding}`,
     ];
 }
 const DropdownContainer = withMods(uuiComponents.DropdownContainer, applyDropdownContainerMods);
 
-var css$10 = {"root":"deCm4m","timepicker-input":"S6Nk-9","timepickerInput":"S6Nk-9"};
+var css$1b = {"root":"MBeWTF","timepicker-input":"xjFAs0","timepickerInput":"xjFAs0"};
 
-const TimePickerBody = withMods(TimePickerBody$1, () => [css$10.root], () => ({ addIcon: ForwardRef$1a, subtractIcon: ForwardRef$1a }));
+const TimePickerBody = withMods(TimePickerBody$1, () => [css$1b.root], () => ({ addIcon: ForwardRef$1a, subtractIcon: ForwardRef$1a }));
 
 dayjs.extend(customParseFormat);
-const defaultMode$2 = EditMode.FORM;
+const DEFAULT_MODE = EditMode.FORM;
 class TimePickerComponent extends BaseTimePicker {
     constructor() {
         super(...arguments);
@@ -1160,7 +964,7 @@ class TimePickerComponent 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$10.root, css$10.timepickerInput, 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$1b.root, css$1b.timepickerInput, 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 || DEFAULT_MODE, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.input })));
         };
         this.renderBody = (props) => {
             var _a;
@@ -1172,23 +976,57 @@ class TimePickerComponent extends BaseTimePicker {
 }
 const TimePicker = withMods(TimePickerComponent);
 
-var css$$ = {"root":"IDGYza"};
+var css$1a = {"root":"Tfvpxh"};
 
 function applyInputAddonMods() {
     return [
-        css$$.root,
+        css$1a.root,
     ];
 }
 const InputAddon = withMods(InputAddon$1, applyInputAddonMods);
 
-var css$_ = {"root":"jAInJS"};
+var css$19 = {"root":"nnS5Ny"};
 
 function applySliderMods() {
-    return [css$_.root, 'uui-color-neutral'];
+    return [css$19.root, 'uui-color-neutral'];
 }
 const Slider = withMods(Slider$1, applySliderMods);
 
-var css$Z = {"container":"BZqZxP"};
+var css$18 = {"container":"_6zEJTQ"};
+
+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 SvgNavigationChevronLeft18 = function SvgNavigationChevronLeft18(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: "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$I = /*#__PURE__*/forwardRef(SvgNavigationChevronLeft18);
+
+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 SvgNavigationChevronRight18 = function SvgNavigationChevronRight18(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$H({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$G || (_path$G = /*#__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$H = /*#__PURE__*/forwardRef(SvgNavigationChevronRight18);
 
 dayjs.extend(localeData);
 const uuiHeader = {
@@ -1261,23 +1099,25 @@ function DatePickerHeader(props) {
     };
     const title = React.useMemo(() => {
         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()}`;
+        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$Z.container, uuiHeader.container, props.cx) },
+    return (React.createElement("div", { className: cx(css$18.container, uuiHeader.container, props.cx) },
         React.createElement("header", { className: uuiHeader.header },
-            React.createElement(Button, { icon: props.navIconLeft || ForwardRef$L, color: "secondary", fill: "ghost", cx: uuiHeader.navIconLeft, onClick: () => onLeftNavigationArrow() }),
+            React.createElement(Button, { icon: props.navIconLeft || ForwardRef$I, 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$K, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: () => onRightNavigationArrow() }))));
+            React.createElement(Button, { icon: props.navIconRight || ForwardRef$H, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: () => onRightNavigationArrow() }))));
 }
 
-var css$Y = {"uui-typography":"aFP3FT","hero-header":"WKwqrY","promo-header":"sYkt6w","uui-critical":"n-IY5U","uui-info":"GD-tnQ","uui-success":"FrTbeD","uui-warning":"GiEP8s","uui-highlight":"-H40uF","uui-typography-size-12":"PyukQ5","uui-typography-size-14":"kQnEfX","uui-typography-size-16":"bKnRnp","root":"Zn8vwQ","uuiTypography":"aFP3FT","heroHeader":"WKwqrY","promoHeader":"sYkt6w","uuiCritical":"n-IY5U","uuiInfo":"GD-tnQ","uuiSuccess":"FrTbeD","uuiWarning":"GiEP8s","uuiHighlight":"-H40uF","uuiTypographySize12":"PyukQ5","uuiTypographySize14":"kQnEfX","uuiTypographySize16":"bKnRnp"};
+var css$17 = {"uui-typography":"_9-dDfv","hero-header":"S4rOus","promo-header":"kI8x9T","uui-critical":"uJK3xA","uui-info":"aGweJr","uui-success":"TY394N","uui-warning":"pjeI1G","uui-highlight":"Lx3qe7","uui-typography-size-12":"l7fMyB","uui-typography-size-14":"s3OCAA","uui-typography-size-16":"Hu8o1m","root":"ErDDW1","uuiTypography":"_9-dDfv","heroHeader":"S4rOus","promoHeader":"kI8x9T","uuiCritical":"uJK3xA","uuiInfo":"aGweJr","uuiSuccess":"TY394N","uuiWarning":"pjeI1G","uuiHighlight":"Lx3qe7","uuiTypographySize12":"l7fMyB","uuiTypographySize14":"s3OCAA","uuiTypographySize16":"Hu8o1m"};
 
 function applyDateSelectionMods() {
-    return [css$Y.root];
+    return [css$17.root];
 }
 const Calendar = withMods(Calendar$1, applyDateSelectionMods);
 
-var css$X = {"uui-typography":"PD2jPg","hero-header":"_5-ZITq","promo-header":"ZAHz1G","uui-critical":"o7Hf8t","uui-info":"fnAGcp","uui-success":"ERm1r3","uui-warning":"_501OtC","uui-highlight":"_6qmyeo","uui-typography-size-12":"ejLhvN","uui-typography-size-14":"-L51p3","uui-typography-size-16":"MemzuT","root":"ULVBkJ","uuiTypography":"PD2jPg","heroHeader":"_5-ZITq","promoHeader":"ZAHz1G","uuiCritical":"o7Hf8t","uuiInfo":"fnAGcp","uuiSuccess":"ERm1r3","uuiWarning":"_501OtC","uuiHighlight":"_6qmyeo","uuiTypographySize12":"ejLhvN","uuiTypographySize14":"-L51p3","uuiTypographySize16":"MemzuT"};
+var css$16 = {"uui-typography":"zCIyEp","hero-header":"z-bv1e","promo-header":"_6g7lza","uui-critical":"VmWgWk","uui-info":"_0zaZFU","uui-success":"KEfUXm","uui-warning":"W-E19Z","uui-highlight":"ktUA64","uui-typography-size-12":"GNrZS1","uui-typography-size-14":"WJWYjf","uui-typography-size-16":"hWvWzl","root":"_6rmck6","uuiTypography":"zCIyEp","heroHeader":"z-bv1e","promoHeader":"_6g7lza","uuiCritical":"VmWgWk","uuiInfo":"_0zaZFU","uuiSuccess":"KEfUXm","uuiWarning":"W-E19Z","uuiHighlight":"ktUA64","uuiTypographySize12":"GNrZS1","uuiTypographySize14":"WJWYjf","uuiTypographySize16":"hWvWzl"};
 
 dayjs.extend(updateLocale);
 const uuiDatePickerBody = {
@@ -1305,7 +1145,7 @@ class DatePickerBody extends DatePickerBodyBase {
             }
         };
         this.renderBody = () => {
-            return (React.createElement("div", { className: cx$1(css$X.root, uuiDatePickerBody.wrapper, this.props.cx) },
+            return (React.createElement("div", { className: cx$1(css$16.root, uuiDatePickerBody.wrapper, this.props.cx) },
                 React.createElement(DatePickerHeader, { value: this.props.value, onValueChange: (newValue) => this.props.setDisplayedDateAndView(newValue.displayedDate, newValue.view) }),
                 this.getView()));
         };
@@ -1314,104 +1154,104 @@ class DatePickerBody extends DatePickerBodyBase {
     }
 }
 
-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$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 SvgNotificationCheckCircleFill24 = function SvgNotificationCheckCircleFill24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$E({
+  return /*#__PURE__*/React.createElement("svg", _extends$G({
     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$F || (_path$F = /*#__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$E = /*#__PURE__*/forwardRef(SvgNotificationCheckCircleFill24);
+var ForwardRef$G = /*#__PURE__*/forwardRef(SvgNotificationCheckCircleFill24);
 
-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$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 SvgNotificationWarningFill24 = function SvgNotificationWarningFill24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$D({
+  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$C || (_path$C = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$E || (_path$E = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
   })));
 };
-var ForwardRef$D = /*#__PURE__*/forwardRef(SvgNotificationWarningFill24);
+var ForwardRef$F = /*#__PURE__*/forwardRef(SvgNotificationWarningFill24);
 
-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$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 SvgNotificationErrorFill24 = function SvgNotificationErrorFill24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$C({
+  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$B || (_path$B = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$D || (_path$D = /*#__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$C = /*#__PURE__*/forwardRef(SvgNotificationErrorFill24);
+var ForwardRef$E = /*#__PURE__*/forwardRef(SvgNotificationErrorFill24);
 
-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$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 SvgNotificationHelpFill24 = function SvgNotificationHelpFill24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$B({
+  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$A || (_path$A = /*#__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 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$B = /*#__PURE__*/forwardRef(SvgNotificationHelpFill24);
+var ForwardRef$D = /*#__PURE__*/forwardRef(SvgNotificationHelpFill24);
 
-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$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 SvgNavigationClose24$1 = function SvgNavigationClose24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$A({
+  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$z || (_path$z = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$B || (_path$B = /*#__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$A = /*#__PURE__*/forwardRef(SvgNavigationClose24$1);
+var ForwardRef$C = /*#__PURE__*/forwardRef(SvgNavigationClose24$1);
 
-var css$W = {"root":"PNv618","icon-wrapper":"_5zSMO2","alert-wrapper":"dbJ3-0","size-48":"yu867p","size-36":"HnCXPd","action-wrapper":"uLZZFs","action-icon":"W2lU45","action-link":"J8f-MV","close-icon":"_-16f63","main-path":"OeWThw","content":"pzE-l5","iconWrapper":"_5zSMO2","alertWrapper":"dbJ3-0","size48":"yu867p","size36":"HnCXPd","actionWrapper":"uLZZFs","actionIcon":"W2lU45","actionLink":"J8f-MV","closeIcon":"_-16f63","mainPath":"OeWThw"};
+var css$15 = {"root":"W1nNZ2","icon-wrapper":"rbYZg7","alert-wrapper":"FKRaHG","size-48":"PVHQcw","size-36":"vJJGJE","action-wrapper":"Rw-Hfs","action-icon":"YHgk9T","action-link":"uTP-0I","close-icon":"_3--vy0","main-path":"sTl-Hn","content":"_1p4XTX","iconWrapper":"rbYZg7","alertWrapper":"FKRaHG","size48":"PVHQcw","size36":"vJJGJE","actionWrapper":"Rw-Hfs","actionIcon":"YHgk9T","actionLink":"uTP-0I","closeIcon":"_3--vy0","mainPath":"sTl-Hn"};
 
-const Alert = React.forwardRef((props, ref) => (React.createElement("div", Object.assign({ role: "alert", ref: ref, className: cx('uui-alert', css$W.root, css$W.alertWrapper, props.color && `uui-color-${props.color}`, props.cx, (props.size === '36' ? css$W.size36 : css$W.size48)) }, props.rawProps),
-    React.createElement("div", { className: css$W.mainPath },
-        props.icon && (React.createElement("div", { className: css$W.iconWrapper },
-            React.createElement(IconContainer, { icon: props.icon, cx: css$W.actionIcon }))),
-        React.createElement("div", { className: css$W.content },
+const Alert = React.forwardRef((props, ref) => (React.createElement("div", Object.assign({ role: "alert", ref: ref, className: cx('uui-alert', css$15.root, css$15.alertWrapper, props.color && `uui-color-${props.color}`, props.cx, (props.size === '36' ? css$15.size36 : css$15.size48)) }, props.rawProps),
+    React.createElement("div", { className: css$15.mainPath },
+        props.icon && (React.createElement("div", { className: css$15.iconWrapper },
+            React.createElement(IconContainer, { icon: props.icon, cx: css$15.actionIcon }))),
+        React.createElement("div", { className: css$15.content },
             props.children,
-            props.actions && (React.createElement("div", { className: css$W.actionWrapper }, props.actions.map((action) => (React.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$W.actionLink, size: (props === null || props === void 0 ? void 0 : props.size) === '36' ? '24' : '30' })))))),
-        props.onClose && React.createElement(IconButton, { icon: ForwardRef$A, color: "neutral", onClick: props.onClose, cx: css$W.closeIcon })))));
-const WarningAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$D, color: "warning", ref: ref }, props)));
-const SuccessAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$E, color: "success", ref: ref }, props)));
-const HintAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$B, color: "info", ref: ref }, props)));
-const ErrorAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$C, color: "error", ref: ref }, props)));
+            props.actions && (React.createElement("div", { className: css$15.actionWrapper }, props.actions.map((action) => (React.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$15.actionLink, size: (props === null || props === void 0 ? void 0 : props.size) === '36' ? '24' : '30' })))))),
+        props.onClose && React.createElement(IconButton, { icon: ForwardRef$C, color: "neutral", onClick: props.onClose, cx: css$15.closeIcon })))));
+const WarningAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$F, color: "warning", ref: ref }, props)));
+const SuccessAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$G, color: "success", ref: ref }, props)));
+const HintAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$D, color: "info", ref: ref }, props)));
+const ErrorAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$E, color: "error", ref: ref }, props)));
 
 const Dropdown = withMods(Dropdown$1);
 
-var css$V = {"uui-typography":"C199ec","hero-header":"n1YLcA","promo-header":"_5efDX3","uui-critical":"l2Kv2-","uui-info":"aFHB7c","uui-success":"_9v9E7m","uui-warning":"Gnx9x0","uui-highlight":"BCOQ8t","uui-typography-size-12":"okxVRn","uui-typography-size-14":"qpajvD","uui-typography-size-16":"CAqwzT","root":"NfChk4","body-root":"MVphIW","submenu-root-item":"w9r-1m","icon-after":"s5P-o7","icon-check":"rECHGD","splitter-root":"U6o98y","splitter":"iTYi3P","header-root":"bgk8F2","item-root":"tO0gdt","icon":"a6zunS","link":"CbjU9r","indent":"_-3PNsm","uuiTypography":"C199ec","heroHeader":"n1YLcA","promoHeader":"_5efDX3","uuiCritical":"l2Kv2-","uuiInfo":"aFHB7c","uuiSuccess":"_9v9E7m","uuiWarning":"Gnx9x0","uuiHighlight":"BCOQ8t","uuiTypographySize12":"okxVRn","uuiTypographySize14":"qpajvD","uuiTypographySize16":"CAqwzT","bodyRoot":"MVphIW","submenuRootItem":"w9r-1m","iconAfter":"s5P-o7","iconCheck":"rECHGD","splitterRoot":"U6o98y","headerRoot":"bgk8F2","itemRoot":"tO0gdt"};
+var css$14 = {"uui-typography":"LQdLQQ","hero-header":"_3TyRW8","promo-header":"Eq7UTP","uui-critical":"SqYuLp","uui-info":"_0J4h34","uui-success":"UpBWM3","uui-warning":"zksmg6","uui-highlight":"tmXgF0","uui-typography-size-12":"GbysMP","uui-typography-size-14":"dV4lFy","uui-typography-size-16":"JpJeDI","root":"iuYgcF","body-root":"dlGUt-","submenu-root-item":"kG0fft","icon-after":"wWdg3A","icon-check":"_4NOswt","splitter-root":"-UeUhJ","splitter":"kHw7Br","header-root":"iqeJKl","item-root":"fczaeI","icon":"_3srg8P","link":"VwkLXq","indent":"vTBFJo","uuiTypography":"LQdLQQ","heroHeader":"_3TyRW8","promoHeader":"Eq7UTP","uuiCritical":"SqYuLp","uuiInfo":"_0J4h34","uuiSuccess":"UpBWM3","uuiWarning":"zksmg6","uuiHighlight":"tmXgF0","uuiTypographySize12":"GbysMP","uuiTypographySize14":"dV4lFy","uuiTypographySize16":"JpJeDI","bodyRoot":"dlGUt-","submenuRootItem":"kG0fft","iconAfter":"wWdg3A","iconCheck":"_4NOswt","splitterRoot":"-UeUhJ","headerRoot":"iqeJKl","itemRoot":"fczaeI"};
 
 const icons = systemIcons['36'];
 var IDropdownControlKeys;
@@ -1446,9 +1286,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, width: props.minWidth, lockProps: { onKeyDown: handleArrowKeys }, cx: [props.cx, css$V.root] })));
+    return (React__default.createElement(DropdownContainer, Object.assign({}, props, { rawProps: Object.assign(Object.assign({}, props.rawProps), { role: 'menu' }), ref: menuRef, width: props.minWidth, lockProps: { onKeyDown: handleArrowKeys }, cx: [props.cx, css$14.root] })));
 }
-const DropdownMenuBody = withMods(DropdownMenuContainer, () => [css$V.bodyRoot], (props) => {
+const DropdownMenuBody = withMods(DropdownMenuContainer, () => [css$14.bodyRoot], (props) => {
     return (Object.assign({ closeOnKey: IDropdownControlKeys.ESCAPE }, props));
 });
 const DropdownMenuButton = React__default.forwardRef((props, ref) => {
@@ -1471,32 +1311,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, isDisabled: isDisabled, cx: cx$1(css$V.root, css$V.icon, iconPosition === 'right' ? css$V.iconAfter : css$V.iconBefore) }));
+        const iconElement = (React__default.createElement(IconButton, { icon: icon, color: isActive ? 'info' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: cx$1(css$14.root, css$14.icon, iconPosition === 'right' ? css$14.iconAfter : css$14.iconBefore) }));
         return (React__default.createElement(React__default.Fragment, null,
             isIconBefore && iconElement,
-            React__default.createElement(Text$1, { cx: props.indent && css$V.indent }, caption),
+            React__default.createElement(Text$1, { cx: props.indent && css$14.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$V.root, props.cx, css$V.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened);
-    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$V.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isLinkActive: isActive, isDisabled: isDisabled, forwardedRef: ref, target: target }, getMenuButtonContent())) : (React__default.createElement(FlexRow$1, { rawProps: {
+    const itemClassNames = cx$1(css$14.root, props.cx, css$14.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened);
+    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$14.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isLinkActive: isActive, 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$V.root, css$V.selectedCheckmark) })));
+        isSelected && React__default.createElement(IconContainer, { icon: icons.accept, cx: cx$1(css$14.root, css$14.selectedCheckmark) })));
 });
 DropdownMenuButton.displayName = 'DropdownMenuButton';
 function DropdownMenuSplitter(props) {
-    return (React__default.createElement("div", { className: cx$1(css$V.root, props.cx, css$V.splitterRoot) },
-        React__default.createElement("hr", { className: css$V.splitter })));
+    return (React__default.createElement("div", { className: cx$1(css$14.root, props.cx, css$14.splitterRoot) },
+        React__default.createElement("hr", { className: css$14.splitter })));
 }
 function DropdownMenuHeader(props) {
-    return (React__default.createElement("div", { className: cx$1('uui-dropdown-menu-header', css$V.root, props.cx, css$V.headerRoot) },
-        React__default.createElement("span", { className: css$V.header }, props.caption)));
+    return (React__default.createElement("div", { className: cx$1('uui-dropdown-menu-header', css$14.root, props.cx, css$14.headerRoot) },
+        React__default.createElement("span", { className: css$14.header }, props.caption)));
 }
 function DropdownSubMenu(props) {
     const subMenuModifiers = [
@@ -1516,7 +1356,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$V.root, css$V.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
+            return (React__default.createElement(DropdownMenuButton, Object.assign({ cx: cx$1(css$14.root, css$14.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
         } }));
 }
 function DropdownMenuSwitchButton(props) {
@@ -1533,39 +1373,39 @@ function DropdownMenuSwitchButton(props) {
             onHandleValueChange(!isSelected);
         }
     };
-    return (React__default.createElement(FlexRow$1, { cx: cx$1(props.cx, css$V.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$V.iconBefore }),
+    return (React__default.createElement(FlexRow$1, { cx: cx$1(props.cx, css$14.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$14.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$U = {"uui-typography":"VXFB8p","hero-header":"_67ftfO","promo-header":"ub1UJY","uui-critical":"K9YFha","uui-info":"MVkUi8","uui-success":"FVnhQM","uui-warning":"xtoaGG","uui-highlight":"tXUCjR","uui-typography-size-12":"s9pFh6","uui-typography-size-14":"b7XY6L","uui-typography-size-16":"A4EtQC","root":"AC-MRE","border-bottom":"W0nVpl","top-shadow":"T01kXy","size-24":"NRUuOA","size-30":"_0zK-Ux","size-36":"-iPSmo","size-42":"_9t8Lyo","size-48":"KpwbyE","padding-6":"_1D6qgz","padding-12":"syKAhS","padding-18":"X1aBuE","padding-24":"_4WKW4Y","margin-24":"jd2ULr","margin-12":"TzkCyw","vPadding-12":"wf4clI","vPadding-18":"urBcj8","vPadding-24":"cUmz-2","vPadding-36":"FjGXcW","vPadding-48":"Ai4bZj","spacing-6":"GHCi-s","spacing-12":"Bb2xjv","spacing-18":"agu4Yc","uui-surface-main":"hZEynF","uuiTypography":"VXFB8p","heroHeader":"_67ftfO","promoHeader":"ub1UJY","uuiCritical":"K9YFha","uuiInfo":"MVkUi8","uuiSuccess":"FVnhQM","uuiWarning":"xtoaGG","uuiHighlight":"tXUCjR","uuiTypographySize12":"s9pFh6","uuiTypographySize14":"b7XY6L","uuiTypographySize16":"A4EtQC","borderBottom":"W0nVpl","topShadow":"T01kXy","size24":"NRUuOA","size30":"_0zK-Ux","size36":"-iPSmo","size42":"_9t8Lyo","size48":"KpwbyE","padding6":"_1D6qgz","padding12":"syKAhS","padding18":"X1aBuE","padding24":"_4WKW4Y","margin24":"jd2ULr","margin12":"TzkCyw","vPadding12":"wf4clI","vPadding18":"urBcj8","vPadding24":"cUmz-2","vPadding36":"FjGXcW","vPadding48":"Ai4bZj","spacing6":"GHCi-s","spacing12":"Bb2xjv","spacing18":"agu4Yc","uuiSurfaceMain":"hZEynF"};
+var css$13 = {"uui-typography":"j5tYuI","hero-header":"IEpBdJ","promo-header":"sdO7uW","uui-critical":"_5aZ1-D","uui-info":"jxOgt5","uui-success":"xBupx7","uui-warning":"UOfYCs","uui-highlight":"i3Ijp-","uui-typography-size-12":"_8aBOgv","uui-typography-size-14":"E9I1f6","uui-typography-size-16":"a15Q5f","root":"z4sbms","border-bottom":"abuI0x","top-shadow":"zCp9F4","size-24":"j1idmI","size-30":"mrdSWJ","size-36":"_1HO2Le","size-42":"IKu2Y3","size-48":"CaPqT0","padding-6":"EJ46iX","padding-12":"nXHdHI","padding-18":"NJasKl","padding-24":"_8mnZ--","margin-24":"fRJ1Gu","margin-12":"Q0Jukn","vPadding-12":"WcNP1L","vPadding-18":"C52NH3","vPadding-24":"nnNqSc","vPadding-36":"VoS14d","vPadding-48":"rjLwpo","spacing-6":"uRUlem","spacing-12":"qIWqPR","spacing-18":"_4DwNYb","uui-surface-main":"ek9-UP","uuiTypography":"j5tYuI","heroHeader":"IEpBdJ","promoHeader":"sdO7uW","uuiCritical":"_5aZ1-D","uuiInfo":"jxOgt5","uuiSuccess":"xBupx7","uuiWarning":"UOfYCs","uuiHighlight":"i3Ijp-","uuiTypographySize12":"_8aBOgv","uuiTypographySize14":"E9I1f6","uuiTypographySize16":"a15Q5f","borderBottom":"abuI0x","topShadow":"zCp9F4","size24":"j1idmI","size30":"mrdSWJ","size36":"_1HO2Le","size42":"IKu2Y3","size48":"CaPqT0","padding6":"EJ46iX","padding12":"nXHdHI","padding18":"NJasKl","padding24":"_8mnZ--","margin24":"fRJ1Gu","margin12":"Q0Jukn","vPadding12":"WcNP1L","vPadding18":"C52NH3","vPadding24":"nnNqSc","vPadding36":"VoS14d","vPadding48":"rjLwpo","spacing6":"uRUlem","spacing12":"qIWqPR","spacing18":"_4DwNYb","uuiSurfaceMain":"ek9-UP"};
 
-const FlexCell = withMods(FlexCell$1, () => [css$U.flexCell]);
+const FlexCell = withMods(FlexCell$1, () => [css$13.flexCell]);
 
 const FlexRow = withMods(FlexRow$1, (props) => {
     return [
-        css$U.root,
-        props.size !== null && css$U['size-' + (props.size || '36')],
-        props.padding && css$U['padding-' + props.padding],
-        props.vPadding && css$U['vPadding-' + props.vPadding],
-        props.margin && css$U['margin-' + props.margin],
-        props.topShadow && css$U.topShadow,
-        props.borderBottom && css$U.borderBottom,
-        props.spacing && css$U['spacing-' + props.spacing],
-        props.background && css$U[`uui-${props.background}`],
+        css$13.root,
+        props.size !== null && css$13['size-' + (props.size || '36')],
+        props.padding && css$13['padding-' + props.padding],
+        props.vPadding && css$13['vPadding-' + props.vPadding],
+        props.margin && css$13['margin-' + props.margin],
+        props.topShadow && css$13.topShadow,
+        props.borderBottom && css$13.borderBottom,
+        props.spacing && css$13['spacing-' + props.spacing],
+        props.background && css$13[`uui-${props.background}`],
     ];
 });
 
-var css$T = {"root":"yMOFIe","margin-24":"ApkQyE","padding-12":"ZYrGtr","padding-24":"cpdxmt","shadow":"qq79qM","uui-surface-main":"lV8eRc","margin24":"ApkQyE","padding12":"ZYrGtr","padding24":"cpdxmt","uuiSurfaceMain":"lV8eRc"};
+var css$12 = {"root":"lNErC1","margin-24":"dwlliI","padding-12":"htwotk","padding-24":"yPzJkk","shadow":"CYljHV","uui-surface-main":"WKu4zM","margin24":"dwlliI","padding12":"htwotk","padding24":"yPzJkk","uuiSurfaceMain":"WKu4zM"};
 
 const Panel = withMods(VPanel, (props) => [
     'uui-panel',
-    css$T.root,
-    props.shadow && css$T.shadow,
-    props.margin && css$T['margin-' + props.margin],
-    props.background && css$T[`uui-${props.background}`],
+    css$12.root,
+    props.shadow && css$12.shadow,
+    props.margin && css$12['margin-' + props.margin],
+    props.background && css$12[`uui-${props.background}`],
 ]);
 
 const i18n = Object.assign(Object.assign({}, i18n$2), { dataPickerBody: {
@@ -1657,61 +1497,301 @@ const i18n = Object.assign(Object.assign({}, i18n$2), { dataPickerBody: {
         fileSizeProgress: ' of ',
     } });
 
-var css$S = {"root":"YTlnlb","mode-block":"vxxD-r","mode-inline":"DppdeR","padding-0":"ik13vt","padding-6":"aDaA2f","padding-12":"z6tU0z","padding-18":"_1liMrq","modeBlock":"vxxD-r","modeInline":"DppdeR","padding0":"ik13vt","padding6":"aDaA2f","padding12":"z6tU0z","padding18":"_1liMrq"};
+var css$11 = {"root":"_-5RRek","mode-block":"z5PnEk","mode-inline":"_81RMu5","padding-0":"bZIogc","padding-6":"qYyFVI","padding-12":"SOwmAy","padding-18":"NDBjMe","modeBlock":"z5PnEk","modeInline":"_81RMu5","padding0":"bZIogc","padding6":"qYyFVI","padding12":"SOwmAy","padding18":"NDBjMe"};
 
 const getMode = (mode) => {
     return mode || 'block';
 };
 function applyAccordionMods(mods) {
     return [
-        css$S.root,
-        css$S['mode-' + getMode(mods.mode)],
-        mods.padding && css$S['padding-' + mods.padding],
+        css$11.root,
+        css$11['mode-' + getMode(mods.mode)],
+        mods.padding && css$11['padding-' + mods.padding],
     ];
 }
 const Accordion = withMods(uuiComponents.Accordion, applyAccordionMods, (mods) => ({
     dropdownIcon: mods.dropdownIcon !== null && systemIcons[getMode(mods.mode) === 'block' ? '60' : '30'].foldingArrow,
 }));
 
-var css$R = {"root":"xBLDsi"};
+var css$10 = {"root":"mbiA7Q"};
 
 function applyTooltipMods(mods) {
     return [
-        css$R.root,
+        css$10.root,
         `uui-color-${mods.color || 'inverted'}`,
     ];
 }
-const Tooltip = withMods(Tooltip$1, applyTooltipMods);
+const Tooltip = withMods(uuiComponents.Tooltip, applyTooltipMods);
 
-var css$Q = {"uui-typography":"_7RtqlS","hero-header":"vr7j1x","promo-header":"EkqNNN","uui-critical":"paVDdd","uui-info":"TDCb4u","uui-success":"roT1WI","uui-warning":"_-9wGt1","uui-highlight":"HsJWZl","uui-typography-size-12":"q7T6PZ","uui-typography-size-14":"gccNrU","uui-typography-size-16":"YAgfoH","root":"E-oYjn","size-24":"MIlPDB","size-30":"_8ZVYYx","size-36":"QsUIOm","size-42":"gOhhcF","size-48":"Dtsc7-","uuiTypography":"_7RtqlS","heroHeader":"vr7j1x","promoHeader":"EkqNNN","uuiCritical":"paVDdd","uuiInfo":"TDCb4u","uuiSuccess":"roT1WI","uuiWarning":"_-9wGt1","uuiHighlight":"HsJWZl","uuiTypographySize12":"q7T6PZ","uuiTypographySize14":"gccNrU","uuiTypographySize16":"YAgfoH","size24":"MIlPDB","size30":"_8ZVYYx","size36":"QsUIOm","size42":"gOhhcF","size48":"Dtsc7-"};
+var css$$ = {"uui-typography":"XJHUsI","hero-header":"kAVLHn","promo-header":"qDxKsT","uui-critical":"wrhYEq","uui-info":"lZaO6T","uui-success":"kouN3c","uui-warning":"Q2Vvxz","uui-highlight":"yo2VkC","uui-typography-size-12":"MYM34R","uui-typography-size-14":"iBKzWm","uui-typography-size-16":"BM7wF7","root":"b-oV8u","size-24":"jXUjSH","size-30":"XiH5l6","size-36":"_0NNieu","size-42":"RFo9ME","size-48":"Li-PLe","uuiTypography":"XJHUsI","heroHeader":"kAVLHn","promoHeader":"qDxKsT","uuiCritical":"wrhYEq","uuiInfo":"lZaO6T","uuiSuccess":"kouN3c","uuiWarning":"Q2Vvxz","uuiHighlight":"yo2VkC","uuiTypographySize12":"MYM34R","uuiTypographySize14":"iBKzWm","uuiTypographySize16":"BM7wF7","size24":"jXUjSH","size30":"XiH5l6","size36":"_0NNieu","size42":"RFo9ME","size48":"Li-PLe"};
 
-const defaultSize$3 = '36';
+const DEFAULT_SIZE$3 = '36';
 function applyLabeledInputMods(mods) {
-    return [css$Q.root, css$Q['size-' + (mods.size || defaultSize$3)]];
+    return [css$$.root, css$$['size-' + (mods.size || DEFAULT_SIZE$3)]];
 }
 const LabeledInput = withMods(uuiComponents.LabeledInput, applyLabeledInputMods, (props) => ({
     Tooltip,
-    infoIcon: systemIcons[props.size || defaultSize$3].help,
+    infoIcon: systemIcons[props.size || DEFAULT_SIZE$3].help,
 }));
 
-var css$P = {"root":"dU-yzB"};
+var css$_ = {"root":"OCsStR"};
 
-const RadioGroup = withMods(RadioGroup$1, () => [css$P.root], () => ({ RadioInput }));
+function RadioGroup(props) {
+    const direction = props.direction || 'vertical';
+    const handleChange = (newVal) => {
+        if (newVal !== props.value) {
+            props.onValueChange(newVal);
+        }
+    };
+    return (React.createElement("fieldset", Object.assign({ ref: props.forwardedRef, className: cx$1(css$_.root, directionMode[direction], props.cx), onFocus: props.onFocus, onBlur: props.onBlur }, props.rawProps), props.items.map((i) => {
+        const restItemProps = __rest(i, ["id", "name", "renderName"]);
+        return (React.createElement(RadioInput, Object.assign({ renderLabel: i.renderName ? i.renderName : () => i.name, value: props.value === i.id, onValueChange: () => handleChange(i.id), isDisabled: props.isDisabled || i.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, isRequired: props.isRequired, key: i.id.toString(), size: props.size || i.size }, restItemProps)));
+    })));
+}
 
-var css$O = {"root":"DVBDlJ"};
+var css$Z = {"root":"YIeH-Z"};
 
 function applyScrollBarsMods() {
     return [
-        css$O.root, 'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
+        css$Z.root, 'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
     ];
 }
 const ScrollBars = withMods(ScrollBars$1, applyScrollBarsMods);
 
-var css$N = {"scroll-container":"KbeVph","list-container":"c7QeN6","scrollContainer":"KbeVph","listContainer":"c7QeN6"};
+var css$Y = {"scroll-container":"_5VNazm","list-container":"N8Z5dG","scrollContainer":"_5VNazm","listContainer":"N8Z5dG"};
+
+var css$X = {"root":"eqx5Be"};
+
+const AvatarStack = withMods(AvatarStack$1, () => [css$X.root]);
+
+var css$W = {"uui-typography":"sC932f","hero-header":"Z6f1-i","promo-header":"QwOjl4","uui-critical":"PbxWhu","uui-info":"fNOAjg","uui-success":"_2Ot7ou","uui-warning":"YZsA-O","uui-highlight":"xUldt1","uui-typography-size-12":"qtma1n","uui-typography-size-14":"c2Mt3L","uui-typography-size-16":"V9Z6fT","root":"CNEWiQ","size-18":"la1Nz-","size-24":"BtcF7K","size-30":"Biogbr","size-36":"IkK7DW","size-42":"hN62fw","size-48":"CBJ6yW","uuiTypography":"sC932f","heroHeader":"Z6f1-i","promoHeader":"QwOjl4","uuiCritical":"PbxWhu","uuiInfo":"fNOAjg","uuiSuccess":"_2Ot7ou","uuiWarning":"YZsA-O","uuiHighlight":"xUldt1","uuiTypographySize12":"qtma1n","uuiTypographySize14":"c2Mt3L","uuiTypographySize16":"V9Z6fT","size18":"la1Nz-","size24":"BtcF7K","size30":"Biogbr","size36":"IkK7DW","size42":"hN62fw","size48":"CBJ6yW"};
+
+const mapSize$1 = {
+    48: '48',
+    42: '48',
+    36: '36',
+    30: '30',
+    24: '30',
+    18: '18',
+};
+const DEFAULT_SIZE$2 = '36';
+const DEFAULT_FILL = 'solid';
+function applyBadgeMods(mods) {
+    return [
+        'uui-badge',
+        css$W.root,
+        css$W['size-' + (mods.size || DEFAULT_SIZE$2)],
+        `uui-fill-${mods.fill || DEFAULT_FILL}`,
+        `uui-color-${mods.color || 'info'}`,
+        mods.indicator && mods.fill === 'outline' && 'uui-indicator',
+    ];
+}
+const mapCountIndicatorSizes$1 = {
+    12: '12',
+    18: '12',
+    24: '18',
+    30: '18',
+    36: '18',
+    42: '24',
+    48: '24',
+};
+const Badge = withMods(uuiComponents.Button, 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]) || DEFAULT_SIZE$2].foldingArrow,
+        clearIcon: systemIcons[(props.size && mapSize$1[props.size]) || DEFAULT_SIZE$2].clear,
+        countPosition: 'left',
+        countIndicator: (countIndicatorProps) => (React__default.createElement(CountIndicator, Object.assign({}, countIndicatorProps, { color: null, size: mapCountIndicatorSizes$1[props.size || DEFAULT_SIZE$2] }))),
+        indicator: props.indicator || false,
+        iconPosition: props.iconPosition || 'left',
+    };
+});
+
+var css$V = {"uui-typography":"_88kp4h","hero-header":"LxnzN-","promo-header":"_12io1C","uui-critical":"fXVd1Q","uui-info":"NkxcUY","uui-success":"_7W9RQf","uui-warning":"sPTppR","uui-highlight":"ScxHHL","uui-typography-size-12":"W3MwM0","uui-typography-size-14":"_1eAUkf","uui-typography-size-16":"CN16SL","root":"_8Kz8g-","size-18":"tZkT7S","size-24":"gDJ5Gq","size-30":"M6Q7Eq","size-36":"PD0-xT","size-42":"zBCjJu","size-48":"qNwt-O","uuiTypography":"_88kp4h","heroHeader":"LxnzN-","promoHeader":"_12io1C","uuiCritical":"fXVd1Q","uuiInfo":"NkxcUY","uuiSuccess":"_7W9RQf","uuiWarning":"sPTppR","uuiHighlight":"ScxHHL","uuiTypographySize12":"W3MwM0","uuiTypographySize14":"_1eAUkf","uuiTypographySize16":"CN16SL","size18":"tZkT7S","size24":"gDJ5Gq","size30":"M6Q7Eq","size36":"PD0-xT","size42":"zBCjJu","size48":"qNwt-O"};
+
+const DEFAULT_SIZE$1 = '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(props) {
+    return [
+        css$V['size-' + (props.size || DEFAULT_SIZE$1)],
+        css$V.root,
+        `uui-color-${props.color || 'neutral'}`,
+        `uui-fill-${props.fill || 'solid'}`,
+        'uui-tag',
+    ];
+}
+const Tag = withMods(Button$1, applyTagMods, (props) => ({
+    dropdownIcon: systemIcons[mapSize[props.size] || DEFAULT_SIZE$1].foldingArrow,
+    clearIcon: systemIcons[mapSize[props.size] || DEFAULT_SIZE$1].clear,
+    countIndicator: (countIndicatorProps) => (React__default.createElement(CountIndicator, Object.assign({}, countIndicatorProps, { color: (!props.color || props.color === 'neutral') ? 'white' : props.color, size: mapCountIndicatorSizes[props.size || DEFAULT_SIZE$1] }))),
+}));
+
+var css$U = {"root":"JtxFks","uui-spinner":"SI80KO","uuiSpinner":"SI80KO"};
+
+function applySpinnerMods() {
+    return [css$U.root, 'uui-spinner'];
+}
+const Spinner = withMods(Spinner$1, applySpinnerMods);
+
+var css$T = {"root":"Yd6asj","spacer":"-C8p6F","mode-ghost":"Lmg3Cy","size-24":"_6WOpso","size-30":"Wj4rci","navigation-size-24":"_1AdJTK","navigation-size-30":"ZG8Zet","modeGhost":"Lmg3Cy","size24":"_6WOpso","size30":"Wj4rci","navigationSize24":"_1AdJTK","navigationSize30":"ZG8Zet"};
+
+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 SvgNavigationChevronLeft12 = function SvgNavigationChevronLeft12(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$B({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 13,
+    height: 12,
+    viewBox: "0 0 13 12",
+    ref: ref
+  }, props), _path$A || (_path$A = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M8.205 3.705 7.5 3l-3 3 3 3 .705-.705L5.915 6l2.29-2.295z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$B = /*#__PURE__*/forwardRef(SvgNavigationChevronLeft12);
+
+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 SvgNavigationChevronRight12 = function SvgNavigationChevronRight12(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$A({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 13,
+    height: 12,
+    viewBox: "0 0 13 12",
+    ref: ref
+  }, props), _path$z || (_path$z = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "m5.5 3-.705.705L7.085 6l-2.29 2.295L5.5 9l3-3-3-3z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$A = /*#__PURE__*/forwardRef(SvgNavigationChevronRight12);
+
+function Paginator(props) {
+    const renderPaginator = (params) => {
+        var _a, _b;
+        return (React__default.createElement("nav", Object.assign({ role: "navigation", className: cx(css$T.root, 'uui-paginator') }, params.rawProps),
+            React__default.createElement(Button, { cx: css$T[`navigation-size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$I : ForwardRef$B, 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$T[`size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], css$T.spacer), size: params.size, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1 }));
+                }
+                else {
+                    return (React__default.createElement(Button, { cx: cx(css$T[`size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], css$T[`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$T[`navigation-size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$H : ForwardRef$A, onClick: params.goToNext, isDisabled: params.isLast, fill: "outline", color: "secondary" })));
+    };
+    return React__default.createElement(Paginator$1, Object.assign({}, props, { render: renderPaginator }));
+}
+
+var css$S = {"root":"KQyEVC","progress-bar":"_0Ly7pU","progressBar-indeterminate":"QxKjeS","size-12":"QWJJKD","size-18":"-DPYxB","size-24":"e2nUT4","progressBar":"_0Ly7pU","progressBarIndeterminate":"QxKjeS","size12":"QWJJKD","size18":"-DPYxB","size24":"e2nUT4"};
+
+const IndeterminateBar = React.forwardRef((props, ref) => {
+    return (React.createElement("div", { ref: ref, className: cx('uui-indeterminate_bar', props.cx, css$S.root, css$S[`size-${props.size || 12}`]) },
+        React.createElement("div", { className: cx(css$S.progressBar) })));
+});
+
+var css$R = {"root":"_3-j2fh","striped":"fgUkbp","animate-stripes":"oomKxP","size-12":"_8luzwc","size-18":"u6yNgC","size-24":"rWTlbC","animateStripes":"oomKxP","size12":"_8luzwc","size18":"u6yNgC","size24":"rWTlbC"};
+
+const DEFAULT_SIZE = '12';
+function applyProgressBarMods(mods) {
+    const size = mods.size || DEFAULT_SIZE;
+    return [
+        css$R.root,
+        css$R[`size-${size}`],
+        mods.striped && css$R.striped,
+    ];
+}
+const ProgressBar = withMods(ProgressBar$1, applyProgressBarMods, (props) => ({
+    hideLabel: props.hideLabel || props.striped,
+}));
+
+var css$Q = {"root":"EnZ2we"};
+
+const IndicatorBar = React.forwardRef((props, ref) => {
+    const { progress } = props;
+    return progress || progress === 0 ? (React.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx(css$Q.root, props.cx), hideLabel: true })) : (React.createElement(IndeterminateBar, { ref: ref, cx: cx(css$Q.root, props.cx) }));
+});
+
+var css$P = {"root":"NwxnLv","size-12":"_42pJE9","size-18":"a1hXOL","size-24":"ZMk2fC","size12":"_42pJE9","size18":"a1hXOL","size24":"ZMk2fC"};
+
+const StatusIndicator = forwardRef((props, ref) => {
+    return (React__default.createElement("div", { ref: ref, className: cx([
+            css$P.root,
+            css$P[`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 _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$z({
+    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", {
+    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$z = /*#__PURE__*/forwardRef(SvgNavigationChevronDown18);
+
+var css$O = {"checkbox":"wtJxyM","drag-handle":"e71wIl","indent":"_5-Pqoe","folding-arrow-12":"PAPeDK","folding-arrow-18":"E6s3U3","icon-container":"mw4MCA","dragHandle":"e71wIl","foldingArrow12":"PAPeDK","foldingArrow18":"E6s3U3","iconContainer":"mw4MCA"};
+
+function DataRowAddons(props) {
+    var _a, _b;
+    const row = props.rowProps;
+    const additionalItemSize = +props.size < 30 ? '12' : '18';
+    return (React__default.createElement(React__default.Fragment, null,
+        ((_a = row.dnd) === null || _a === void 0 ? void 0 : _a.srcData) && React__default.createElement(DragHandle, { key: "dh", cx: css$O.dragHandle }),
+        ((_b = row === null || row === void 0 ? void 0 : row.checkbox) === null || _b === void 0 ? void 0 : _b.isVisible) && (React__default.createElement(Checkbox, { key: "cb", cx: css$O.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__default.createElement("div", { key: "fold", className: css$O.indent, style: { marginLeft: (row.indent - 1) * 24 } }, row.isFoldable && (React__default.createElement(IconContainer, { rawProps: {
+                'aria-label': row.isFolded ? 'Unfold' : 'Fold',
+                role: 'button',
+            }, key: "icon", icon: ForwardRef$z, cx: [
+                uuiElement.foldingArrow, css$O[`folding-arrow-${additionalItemSize}`], uuiMarkers.clickable, css$O.iconContainer,
+            ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row) }))))));
+}
 
-var css$M = {"root":"MGGD1n"};
+var css$N = {"root":"h2KPev"};
 
-const Blocker = withMods(Blocker$1, () => [css$M.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__default.createElement(Spinner, null)) }));
+const Blocker = withMods(Blocker$1, () => [css$N.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__default.createElement(Spinner, null)) }));
 
 const VirtualList = React.forwardRef((props, ref) => {
     const { listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef, } = useVirtualList({
@@ -1727,7 +1807,7 @@ const VirtualList = React.forwardRef((props, ref) => {
         var _a;
         return ((_a = props.renderRows) === null || _a === void 0 ? void 0 : _a.call(props, {
             listContainerRef, estimatedHeight, offsetY, scrollShadows,
-        })) || (React.createElement("div", { className: css$N.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+        })) || (React.createElement("div", { className: css$Y.listContainer, style: { minHeight: `${estimatedHeight}px` } },
             React.createElement("div", { ref: listContainerRef, role: props.role, style: { marginTop: offsetY } }, props.rows)));
     };
     const renderView = ({ style }) => (React.createElement(VirtualListView, { isLoading: props.isLoading, style: style, rawProps: props.rawProps }));
@@ -1737,7 +1817,7 @@ const VirtualList = React.forwardRef((props, ref) => {
             return;
         scrollContainerRef.current = scrollbars.container.firstChild;
     }, []);
-    return (React.createElement(ScrollBars, { cx: cx$1(css$N.scrollContainer, props.cx, {
+    return (React.createElement(ScrollBars, { cx: cx$1(css$Y.scrollContainer, props.cx, {
             [uuiMarkers.scrolledLeft]: scrollShadows.horizontalLeft,
             [uuiMarkers.scrolledRight]: scrollShadows.horizontalRight,
             [uuiMarkers.scrolledTop]: scrollShadows.verticalTop,
@@ -1751,11 +1831,29 @@ const VirtualListView = React.forwardRef((props, ref) => {
 });
 VirtualList.displayName = 'VirtualList';
 
-var css$L = {"root":"_91oH9o"};
+var css$M = {"root":"acZmCZ"};
 
-const CheckboxGroup = withMods(CheckboxGroup$1, () => [css$L.root], () => ({ CheckboxInput: Checkbox }));
+function CheckboxGroup(props) {
+    const currentValue = props.value || [];
+    const direction = props.direction || 'vertical';
+    const handleChange = (selected, newVal) => {
+        let newSelection;
+        const actualValue = props.value || [];
+        if (selected) {
+            newSelection = actualValue.concat([newVal]);
+        }
+        else {
+            newSelection = actualValue.filter((i) => i !== newVal);
+        }
+        props.onValueChange(newSelection);
+    };
+    return (React.createElement("fieldset", Object.assign({ ref: props.forwardedRef, className: cx$1(css$M.root, directionMode[direction], props.cx) }, props.rawProps), props.items.map((i) => {
+        const restItemProps = __rest(i, ["id", "name", "renderName"]);
+        return (React.createElement(Checkbox, Object.assign({ renderLabel: i.renderName ? i.renderName : () => i.name, value: currentValue.indexOf(i.id) !== -1, onValueChange: (selected) => handleChange(selected, i.id), isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, isRequired: props.isRequired, key: i.id.toString(), size: props.size || i.size }, restItemProps)));
+    })));
+}
 
-var css$K = {"uui-typography":"_8FCo3s","hero-header":"_3ABHdg","promo-header":"_0gWtGm","uui-critical":"UtBt7J","uui-info":"sUoQ7L","uui-success":"NmWMqb","uui-warning":"NHyJgJ","uui-highlight":"ybS0zg","uui-typography-size-12":"QcDXTB","uui-typography-size-14":"NBxwx3","uui-typography-size-16":"N17qC7","body":"Qu74gu","modal":"wE9KNS","search-wrapper":"zvunaa","checkbox":"aL-rIQ","no-found-size-24":"MKxW10","no-found-size-30":"k4dldH","no-found-size-36":"l1abMF","no-found-size-42":"-gX3Pb","uuiTypography":"_8FCo3s","heroHeader":"_3ABHdg","promoHeader":"_0gWtGm","uuiCritical":"UtBt7J","uuiInfo":"sUoQ7L","uuiSuccess":"NmWMqb","uuiWarning":"NHyJgJ","uuiHighlight":"ybS0zg","uuiTypographySize12":"QcDXTB","uuiTypographySize14":"NBxwx3","uuiTypographySize16":"N17qC7","searchWrapper":"zvunaa","noFoundSize24":"MKxW10","noFoundSize30":"k4dldH","noFoundSize36":"l1abMF","noFoundSize42":"-gX3Pb"};
+var css$L = {"uui-typography":"_7lvT7A","hero-header":"NIqi25","promo-header":"ClUOnH","uui-critical":"APUTz3","uui-info":"HErAje","uui-success":"ene-CJ","uui-warning":"JVQzly","uui-highlight":"zTcKML","uui-typography-size-12":"UvhsTx","uui-typography-size-14":"vZYhJR","uui-typography-size-16":"DoTVFp","body":"_5aCqCy","modal":"tu-CzG","search-wrapper":"wyig7G","checkbox":"t9ahlq","no-found-size-24":"_9rovga","no-found-size-30":"u7l5xk","no-found-size-36":"RixJYT","no-found-size-42":"D60xhg","uuiTypography":"_7lvT7A","heroHeader":"NIqi25","promoHeader":"ClUOnH","uuiCritical":"APUTz3","uuiInfo":"HErAje","uuiSuccess":"ene-CJ","uuiWarning":"JVQzly","uuiHighlight":"zTcKML","uuiTypographySize12":"UvhsTx","uuiTypographySize14":"vZYhJR","uuiTypographySize16":"DoTVFp","searchWrapper":"wyig7G","noFoundSize24":"_9rovga","noFoundSize30":"u7l5xk","noFoundSize36":"RixJYT","noFoundSize42":"D60xhg"};
 
 class DataPickerBody extends PickerBodyBase {
     constructor() {
@@ -1767,16 +1865,16 @@ class DataPickerBody extends PickerBodyBase {
         if (this.props.renderNotFound) {
             return this.props.renderNotFound();
         }
-        return (React__default.createElement(FlexCell$1, { cx: css$K[`no-found-size-${this.props.searchSize || 36}`], grow: 1, textAlign: "center" },
+        return (React__default.createElement(FlexCell$1, { cx: css$L[`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$K.searchWrapper },
+            this.showSearch() && (React__default.createElement("div", { key: "search", className: css$L.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$K.body, css$K[this.props.editMode], css$K[this.props.selectionMode]), rawProps: { style: { maxHeight: this.props.maxHeight, maxWidth: this.props.maxWidth } } }, 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()))));
+            React__default.createElement(FlexRow, { key: "body", cx: cx$1(css$L.body, css$L[this.props.editMode], css$L[this.props.selectionMode]), rawProps: { style: { maxHeight: this.props.maxHeight, maxWidth: this.props.maxWidth } } }, 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()))));
     }
 }
 
@@ -1812,92 +1910,30 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = React__default.memo(DataPickerFooterImpl);
 
-var css$J = {"header":"arMnNr","close":"fQBwGI"};
+var css$K = {"header":"E9L6WK","close":"VGQcJT"};
 
-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$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 SvgNavigationClose24 = function SvgNavigationClose24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$z({
+  return /*#__PURE__*/React.createElement("svg", _extends$y({
     xmlns: "http://www.w3.org/2000/svg",
     width: 25,
     height: 24,
     viewBox: "0 0 25 24",
     ref: ref
-  }, props), _path$y || (_path$y = /*#__PURE__*/React.createElement("path", {
-    d: "m6.9 19-1.4-1.4 5.6-5.6-5.6-5.6L6.9 5l5.6 5.6L18.1 5l1.4 1.4-5.6 5.6 5.6 5.6-1.4 1.4-5.6-5.6L6.9 19z"
-  })));
-};
-var ForwardRef$z = /*#__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$J.header },
-        React__default.createElement(Text, { size: "48", fontWeight: "600" }, title),
-        React__default.createElement(IconButton, { icon: ForwardRef$z, onClick: () => { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$J.close })));
-};
-const DataPickerHeader = React__default.memo(DataPickerHeaderImpl);
-
-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 SvgNavigationChevronDown18 = function SvgNavigationChevronDown18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$y({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 18,
-    height: 18,
-    viewBox: "0 0 18 18",
-    ref: ref
   }, props), _path$x || (_path$x = /*#__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"
+    d: "m6.9 19-1.4-1.4 5.6-5.6-5.6-5.6L6.9 5l5.6 5.6L18.1 5l1.4 1.4-5.6 5.6 5.6 5.6-1.4 1.4-5.6-5.6L6.9 19z"
   })));
 };
-var ForwardRef$y = /*#__PURE__*/forwardRef(SvgNavigationChevronDown18);
-
-var css$I = {"cell":"_9XaMDo","wrapper":"_0Bi0AE","align-widgets-top":"_25j4RB","size-24":"vwSpKm","folding-arrow":"NG5lmu","size-30":"vDRj65","size-36":"F55CtJ","size-42":"_3kBOQ5","size-48":"ez0lFv","size-60":"yx1mWX","align-widgets-center":"xNFVAl","padding-12":"_450jT0","padding-24":"xNENQw","padding-left-12":"k3JyB4","padding-left-24":"_0jnslm","padding-right-24":"bOl2Wb","drag-handle":"H5A3b6","checkbox":"_00ipIE","indent":"_7Au90W","folding-arrow-12":"_3riDIR","folding-arrow-18":"_5PmcPi","icon-container":"-BdtRU","loading-cell":"_6gJ8ph","alignWidgetsTop":"_25j4RB","size24":"vwSpKm","foldingArrow":"NG5lmu","size30":"vDRj65","size36":"F55CtJ","size42":"_3kBOQ5","size48":"ez0lFv","size60":"yx1mWX","alignWidgetsCenter":"xNFVAl","padding12":"_450jT0","padding24":"xNENQw","paddingLeft12":"k3JyB4","paddingLeft24":"_0jnslm","paddingRight24":"bOl2Wb","dragHandle":"H5A3b6","foldingArrow12":"_3riDIR","foldingArrow18":"_5PmcPi","iconContainer":"-BdtRU","loadingCell":"_6gJ8ph"};
+var ForwardRef$y = /*#__PURE__*/forwardRef(SvgNavigationClose24);
 
-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$I.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$I.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$I.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$y, cx: [
-                css$I.foldingArrow, css$I[`folding-arrow-${additionalItemSize}`], uuiMarkers.clickable, css$I.iconContainer,
-            ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row) }))))));
-}
-function DataTableCell(props) {
-    props = Object.assign({}, props);
-    if (props.isFirstColumn) {
-        props.addons = React.createElement(DataTableRowAddons, Object.assign({}, 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$I.loadingCell },
-            React.createElement(TextPlaceholder, null))));
-    props.renderUnknown = props.renderUnknown
-        || (() => (React.createElement(Text, { key: "t", size: props.size !== '60' ? props.size : '48' }, "Unknown")));
-    props.renderTooltip = (tooltipProps) => React.createElement(Tooltip, Object.assign({ color: "critical" }, tooltipProps));
-    const isEditable = !!props.onValueChange;
-    props.cx = [
-        'uui-dt-vars',
-        'data-table-cell',
-        props.cx,
-        css$I.cell,
-        css$I['size-' + (props.size || '36')],
-        css$I[`padding-${props.padding || (isEditable && !props.rowProps.isLoading && '0') || '12'}`],
-        props.isFirstColumn && css$I[`padding-left-${props.padding || (isEditable && !props.rowProps.isLoading && '12') || '24'}`],
-        props.isLastColumn && css$I['padding-right-24'],
-        css$I[`align-widgets-${props.alignActions || 'top'}`],
-        (props.border || isEditable) && 'uui-dt-vertical-cell-border',
-    ];
-    return React.createElement(DataTableCell$1, Object.assign({}, props));
-}
+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$K.header },
+        React__default.createElement(Text, { size: "48", fontWeight: "600" }, title),
+        React__default.createElement(IconButton, { icon: ForwardRef$y, onClick: () => { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$K.close })));
+};
+const DataPickerHeader = React__default.memo(DataPickerHeaderImpl);
 
 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); }
@@ -1944,55 +1980,81 @@ var SvgNotificationDone12 = function SvgNotificationDone12(props, ref) {
 };
 var ForwardRef$v = /*#__PURE__*/forwardRef(SvgNotificationDone12);
 
-var css$H = {"uui-typography":"rs57-f","hero-header":"_1XCa8q","promo-header":"sTNU8X","uui-critical":"vFvrE0","uui-info":"NrGuM-","uui-success":"_4KQpHT","uui-warning":"_1QR5ML","uui-highlight":"QziQmH","uui-typography-size-12":"a5QqAh","uui-typography-size-14":"wn80mR","uui-typography-size-16":"mCIKro","render-item":"_6gWc5V","icon-wrapper":"idzGGa","picker-row":"utShu-","icon-default":"rlec-7","icon-primary":"sajFeI","uuiTypography":"rs57-f","heroHeader":"_1XCa8q","promoHeader":"sTNU8X","uuiCritical":"vFvrE0","uuiInfo":"NrGuM-","uuiSuccess":"_4KQpHT","uuiWarning":"_1QR5ML","uuiHighlight":"QziQmH","uuiTypographySize12":"a5QqAh","uuiTypographySize14":"wn80mR","uuiTypographySize16":"mCIKro","renderItem":"_6gWc5V","iconWrapper":"idzGGa","pickerRow":"utShu-","iconDefault":"rlec-7","iconPrimary":"sajFeI"};
+var css$J = {"cell":"Vfzz6W","align-widgets-top":"mwPv-Z","size-24":"_83d4iw","size-30":"_4SRdpz","size-36":"vXqi76","size-42":"glpLdq","size-48":"DQov11","size-60":"JByWdj","align-widgets-center":"h3KjWz","padding-12":"MzQusK","padding-24":"TyUxSC","padding-left-12":"lTi2xH","padding-left-24":"nienEg","icon-container":"tWp-Dj","loading-cell":"_8LsVle","content-wrapper":"OisgQG","render-item":"_5lWMRi","icon-wrapper":"_14lB9n","icon-default":"dMp5ed","icon-primary":"NVJ8ry","alignWidgetsTop":"mwPv-Z","size24":"_83d4iw","size30":"_4SRdpz","size36":"vXqi76","size42":"glpLdq","size48":"DQov11","size60":"JByWdj","alignWidgetsCenter":"h3KjWz","padding12":"MzQusK","padding24":"TyUxSC","paddingLeft12":"lTi2xH","paddingLeft24":"nienEg","iconContainer":"tWp-Dj","loadingCell":"_8LsVle","contentWrapper":"OisgQG","renderItem":"_5lWMRi","iconWrapper":"_14lB9n","iconDefault":"dMp5ed","iconPrimary":"NVJ8ry"};
+
+const getIcon = (size) => {
+    switch (size) {
+        case '24':
+            return ForwardRef$v;
+        case '30':
+            return ForwardRef$w;
+        case '36':
+            return ForwardRef$w;
+        case '42':
+            return ForwardRef$x;
+        default:
+            return ForwardRef$w;
+    }
+};
+function DataPickerCell(props) {
+    const ref = React.useRef();
+    let content;
+    if (props.rowProps.isLoading) {
+        content = (
+        // 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$J.loadingCell },
+            React.createElement(TextPlaceholder, null)));
+    }
+    else if (props.rowProps.isUnknown) {
+        content = (React.createElement(Text, { key: "t", size: props.size !== '60' ? props.size : '48' }, "Unknown"));
+    }
+    else {
+        content = (React.createElement("div", { key: `${props.rowProps.id}`, className: css$J.renderItem },
+            props.renderItem(props.rowProps.value, props.rowProps),
+            React.createElement(FlexSpacer, null),
+            (props.rowProps.isChildrenSelected || props.rowProps.isSelected) && (React.createElement("div", { className: css$J.iconWrapper },
+                React.createElement(IconContainer, { icon: getIcon(props.size), cx: props.rowProps.isChildrenSelected ? css$J.iconDefault : css$J.iconPrimary, rawProps: { 'aria-label': props.rowProps.isChildrenSelected
+                            ? 'Child is selected'
+                            : 'Selected' } })))));
+    }
+    const getWrappedContent = () => (React.createElement("div", { className: css$J.contentWrapper }, content));
+    return (React.createElement(FlexCell, { ref: ref, grow: 1, width: 0, minWidth: 0, rawProps: { role: 'cell' }, cx: [
+            css$J.cell,
+            props.cx,
+            'data-picker-cell',
+            css$J['size-' + (props.size || '36')],
+            css$J[`padding-${props.padding || '12'}`],
+            css$J[`padding-left-${props.padding || '24'}`],
+            css$J[`align-widgets-${props.alignActions || 'top'}`],
+        ] },
+        React.createElement(DataRowAddons, Object.assign({}, props)),
+        getWrappedContent()));
+}
+
+var css$I = {"uui-typography":"YOQgNO","hero-header":"Hs9Zpn","promo-header":"AsK2Ou","uui-critical":"X5IOi0","uui-info":"gwzNPx","uui-success":"WIava2","uui-warning":"dpfJ6x","uui-highlight":"lWQHWt","uui-typography-size-12":"iAVQq9","uui-typography-size-14":"SOVpnw","uui-typography-size-16":"b-iwzF","picker-row":"TXoZxy","uuiTypography":"YOQgNO","heroHeader":"Hs9Zpn","promoHeader":"AsK2Ou","uuiCritical":"X5IOi0","uuiInfo":"gwzNPx","uuiSuccess":"WIava2","uuiWarning":"dpfJ6x","uuiHighlight":"lWQHWt","uuiTypographySize12":"iAVQq9","uuiTypographySize14":"SOVpnw","uuiTypographySize16":"b-iwzF","pickerRow":"TXoZxy"};
 
 class DataPickerRow extends React.Component {
     constructor() {
         super(...arguments);
-        this.getIcon = (size) => {
-            switch (size) {
-                case '24':
-                    return ForwardRef$v;
-                case '30':
-                    return ForwardRef$w;
-                case '36':
-                    return ForwardRef$w;
-                case '42':
-                    return ForwardRef$x;
-                default:
-                    return ForwardRef$w;
-            }
-        };
-        this.column = {
-            key: 'name',
-            grow: 1,
-            width: 0,
-            render: (item, rowProps) => (React.createElement("div", { key: rowProps.id, className: css$H.renderItem },
-                this.props.renderItem(item, rowProps),
-                React.createElement(FlexSpacer, null),
-                (rowProps.isChildrenSelected || rowProps.isSelected) && (React.createElement("div", { className: css$H.iconWrapper },
-                    React.createElement(IconContainer, { icon: this.getIcon(this.props.size), cx: rowProps.isChildrenSelected ? css$H.iconDefault : css$H.iconPrimary, rawProps: { 'aria-label': rowProps.isChildrenSelected
-                                ? 'Child is selected'
-                                : 'Selected' } }))))),
-        };
         this.renderContent = () => {
-            return (React.createElement(DataTableCell, { key: "name", size: this.props.size || '36', padding: this.props.padding || '24', isFirstColumn: true, isLastColumn: false, tabIndex: -1, column: this.column, rowProps: this.props, alignActions: this.props.alignActions || 'top' }));
+            return (React.createElement(DataPickerCell, { key: "name", size: this.props.size || '36', padding: this.props.padding || '24', rowProps: this.props, alignActions: this.props.alignActions || 'top', renderItem: this.props.renderItem }));
         };
     }
     render() {
-        return React.createElement(DataPickerRow$1, Object.assign({}, this.props, { cx: [css$H.pickerRow, this.props.cx], renderContent: this.renderContent }));
+        return (React.createElement(DataPickerRow$1, Object.assign({}, this.props, { cx: [css$I.pickerRow, this.props.cx], renderContent: this.renderContent })));
     }
 }
 
-var css$G = {"uui-typography":"-KXCdS","hero-header":"KrYD--","promo-header":"pC2vWD","uui-critical":"T-0wxN","uui-info":"VJ3Imq","uui-success":"AwR29-","uui-warning":"l2m7-o","uui-highlight":"Ql0-nJ","uui-typography-size-12":"_1uxkUO","uui-typography-size-14":"WcAPcF","uui-typography-size-16":"v74Y76","done":"MTh2Gd","container":"O--RPd","uuiTypography":"-KXCdS","heroHeader":"KrYD--","promoHeader":"pC2vWD","uuiCritical":"T-0wxN","uuiInfo":"VJ3Imq","uuiSuccess":"AwR29-","uuiWarning":"l2m7-o","uuiHighlight":"Ql0-nJ","uuiTypographySize12":"_1uxkUO","uuiTypographySize14":"WcAPcF","uuiTypographySize16":"v74Y76"};
+var css$H = {"uui-typography":"g-MuZa","hero-header":"IkhnnL","promo-header":"RE7fTr","uui-critical":"lTfvmv","uui-info":"u2corP","uui-success":"_1LVIx4","uui-warning":"l9LlGd","uui-highlight":"ZR03gu","uui-typography-size-12":"UAnEuL","uui-typography-size-14":"X1sL9z","uui-typography-size-16":"Yxi8tP","done":"JwuPkK","container":"_0SARad","uuiTypography":"g-MuZa","heroHeader":"IkhnnL","promoHeader":"RE7fTr","uuiCritical":"lTfvmv","uuiInfo":"u2corP","uuiSuccess":"_1LVIx4","uuiWarning":"l9LlGd","uuiHighlight":"ZR03gu","uuiTypographySize12":"UAnEuL","uuiTypographySize14":"X1sL9z","uuiTypographySize16":"Yxi8tP"};
 
 const MobileDropdownWrapper = (props) => {
     const isMobileView = isMobile();
     const maxWidth = isMobileView ? 'auto' : props.maxWidth;
-    return (React__default.createElement(DropdownContainer, Object.assign({}, props, { maxWidth: maxWidth, cx: [css$G.container, props.cx] }),
+    const maxHeight = isMobileView ? 'auto' : props.maxHeight;
+    return (React__default.createElement(DropdownContainer, Object.assign({}, props, { maxWidth: maxWidth, maxHeight: maxHeight, cx: [css$H.container, props.cx] }),
         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$G.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$H.done, size: "48" })));
 };
 
 var _path$t, _path2$2;
@@ -2017,103 +2079,9 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
 };
 var ForwardRef$u = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
 
-var css$F = {"uui-typography":"aTDq44","hero-header":"_7fhrAP","promo-header":"BzQulU","uui-critical":"ICldb2","uui-info":"-pVt0T","uui-success":"_63qpkW","uui-warning":"jcuvhJ","uui-highlight":"wPVCk-","uui-typography-size-12":"vkiRH2","uui-typography-size-14":"aKFQ97","uui-typography-size-16":"RMtzOf","sub-header-wrapper":"cAV4R4","switch":"P8CRxy","no-found-modal-container":"h26C9N","no-found-modal-container-icon":"Bp8o-b","no-found-modal-container-text":"VW18wO","uuiTypography":"aTDq44","heroHeader":"_7fhrAP","promoHeader":"BzQulU","uuiCritical":"ICldb2","uuiInfo":"-pVt0T","uuiSuccess":"_63qpkW","uuiWarning":"jcuvhJ","uuiHighlight":"wPVCk-","uuiTypographySize12":"vkiRH2","uuiTypographySize14":"aKFQ97","uuiTypographySize16":"RMtzOf","subHeaderWrapper":"cAV4R4","$switch$":"P8CRxy","noFoundModalContainer":"h26C9N","noFoundModalContainerIcon":"Bp8o-b","noFoundModalContainerText":"VW18wO"};
-
-function PickerModal(props) {
-    const { view, selection, dataSourceStateLens, showSelectedLens, dataSourceState, getDataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = usePickerModal(props);
-    const renderRow = (rowProps) => {
-        return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React__default.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, borderBottom: "none", padding: "24", size: "36", renderItem: (i) => React__default.createElement(Text, { size: "36" }, rowProps.isLoading ? React__default.createElement(TextPlaceholder, { wordsCount: 2 }) : getName(i)) })));
-    };
-    const renderFooter = () => {
-        const hasSelection = view.getSelectedRowsCount() > 0;
-        const rowsCount = view.getListProps().rowsCount;
-        const isEmptyRowsAndHasNoSelection = (rowsCount === 0 && !hasSelection);
-        return (React__default.createElement(React__default.Fragment, null,
-            view.selectAll && (React__default.createElement(LinkButton, { caption: hasSelection ? i18n.pickerModal.clearAllButton : i18n.pickerModal.selectAllButton, onClick: hasSelection ? () => clearSelection() : () => view.selectAll.onValueChange(true), isDisabled: isEmptyRowsAndHasNoSelection })),
-            React__default.createElement(FlexSpacer, null),
-            React__default.createElement(Button, { fill: "outline", color: "secondary", caption: i18n.pickerModal.cancelButton, onClick: () => props.abort() }),
-            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$F.noFoundModalContainer },
-            React__default.createElement(IconContainer, { cx: css$F.noFoundModalContainerIcon, icon: ForwardRef$u }),
-            React__default.createElement(Text, { cx: css$F.noFoundModalContainerText, fontWeight: "600", fontSize: "16", lineHeight: "24", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsMessage),
-            React__default.createElement(Text, { cx: css$F.noFoundModalContainerText, fontSize: "12", lineHeight: "18", 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$F.subHeaderWrapper },
-                React__default.createElement(FlexRow, { vPadding: "24" },
-                    React__default.createElement(SearchInput, Object.assign({}, dataSourceStateLens.prop('search').toProps(), { onKeyDown: (e) => handleDataSourceKeyboard({
-                            value: getDataSourceState(),
-                            onValueChange: handleDataSourceValueChange,
-                            listView: view,
-                            rows: dataRows,
-                            searchPosition: 'body',
-                        }, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder }))),
-                !isSingleSelect() && (React__default.createElement(Switch, Object.assign({ cx: css$F.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()))));
-}
-
-const MAX_ITEMS = 100;
-const getMaxItems = (maxItems) => maxItems || maxItems === 0 ? maxItems : MAX_ITEMS;
-
-var css$E = {"uui-typography":"f5TS7b","hero-header":"eV0Dv9","promo-header":"rryMzv","uui-critical":"iz4YDE","uui-info":"_0Rkccx","uui-success":"mbjPp7","uui-warning":"IAGrmV","uui-highlight":"HstNhX","uui-typography-size-12":"rerjq4","uui-typography-size-14":"mI-YTc","uui-typography-size-16":"Oc8yqj","root":"_0E7gs3","mode-form":"D7gulF","mode-cell":"gFsSih","mode-inline":"idAbwJ","size-24":"gpQPW2","size-30":"md41Y1","size-36":"QWspEW","size-42":"_-7t3Jr","size-48":"MuXcCw","uuiTypography":"f5TS7b","heroHeader":"eV0Dv9","promoHeader":"rryMzv","uuiCritical":"iz4YDE","uuiInfo":"_0Rkccx","uuiSuccess":"mbjPp7","uuiWarning":"IAGrmV","uuiHighlight":"HstNhX","uuiTypographySize12":"rerjq4","uuiTypographySize14":"mI-YTc","uuiTypographySize16":"Oc8yqj","modeForm":"D7gulF","modeCell":"gFsSih","modeInline":"idAbwJ","size24":"gpQPW2","size30":"md41Y1","size36":"QWspEW","size42":"_-7t3Jr","size48":"MuXcCw"};
-
-const defaultSize$2 = '36';
-const defaultMode$1 = EditMode.FORM;
-function applyPickerTogglerMods(mods) {
-    return [
-        css$E.root,
-        css$E['size-' + (mods.size || defaultSize$2)],
-        css$E['mode-' + (mods.mode || defaultMode$1)],
-    ];
-}
-function PickerTogglerComponent(props, ref) {
-    const getPickerTogglerButtonSize = (propSize) => {
-        switch (propSize) {
-            case '48':
-                return '42';
-            case '42':
-                return '36';
-            case '36':
-                return '30';
-            case '30':
-                return '24';
-            case '24':
-                return '18';
-        }
-    };
-    const getCaption = (row) => {
-        const maxItems = getMaxItems(props.maxItems);
-        if (row.isLoading) {
-            return React.createElement(TextPlaceholder, null);
-        }
-        else if (!props.getName || props.selectedRowsCount > maxItems) {
-            return row.value;
-        }
-        else {
-            return props.getName(row.value);
-        }
-    };
-    const renderItem = (row) => {
-        var _a;
-        return (React.createElement(Tag, { key: row.rowKey, caption: getCaption(row), tabIndex: -1, size: props.size ? getPickerTogglerButtonSize(props.size) : '30', onClear: (e) => {
-                var _a;
-                (_a = row.onCheck) === null || _a === void 0 ? void 0 : _a.call(row, row);
-                e.stopPropagation();
-            }, isDisabled: props.isDisabled || props.isReadonly || ((_a = row === null || row === void 0 ? void 0 : row.checkbox) === null || _a === void 0 ? void 0 : _a.isDisabled) }));
-    };
-    return (React.createElement(PickerToggler$1, Object.assign({}, props, { ref: ref, cx: [applyPickerTogglerMods(props), props.cx], renderItem: !!props.renderItem ? props.renderItem : renderItem, getName: (item) => (props.getName ? props.getName(item) : item), cancelIcon: systemIcons[props.size || defaultSize$2].clear, dropdownIcon: systemIcons[props.size || defaultSize$2].foldingArrow })));
-}
-const PickerToggler = React.forwardRef(PickerTogglerComponent);
+var css$G = {"uui-typography":"bVvQtf","hero-header":"_68UDXg","promo-header":"W5kmrw","uui-critical":"HzXdGX","uui-info":"DdtIjT","uui-success":"SnFxhE","uui-warning":"_7F3pHh","uui-highlight":"_9PvOeY","uui-typography-size-12":"MocZrh","uui-typography-size-14":"mjhkLm","uui-typography-size-16":"SHUh7R","sub-header-wrapper":"TZNbzK","switch":"_5SdIIE","no-found-modal-container":"clyLUl","no-found-modal-container-icon":"X0-P2O","no-found-modal-container-text":"x-GvUV","uuiTypography":"bVvQtf","heroHeader":"_68UDXg","promoHeader":"W5kmrw","uuiCritical":"HzXdGX","uuiInfo":"DdtIjT","uuiSuccess":"SnFxhE","uuiWarning":"_7F3pHh","uuiHighlight":"_9PvOeY","uuiTypographySize12":"MocZrh","uuiTypographySize14":"mjhkLm","uuiTypographySize16":"SHUh7R","subHeaderWrapper":"TZNbzK","$switch$":"_5SdIIE","noFoundModalContainer":"clyLUl","noFoundModalContainerIcon":"X0-P2O","noFoundModalContainerText":"x-GvUV"};
 
-var css$D = {"root":"Wvm05v","multiline":"bguF2l","vertical-padding-24":"Ls4wmo","vertical-padding-30":"m8m-se","vertical-padding-36":"sp2m0R","vertical-padding-42":"FkiOxc","vertical-padding-48":"_0-XVgH","text":"Qrz101","verticalPadding24":"Ls4wmo","verticalPadding30":"m8m-se","verticalPadding36":"sp2m0R","verticalPadding42":"FkiOxc","verticalPadding48":"_0-XVgH"};
+var css$F = {"root":"LsffkB","multiline":"_9WZW0N","vertical-padding-24":"WAgBT-","vertical-padding-30":"oV6d-0","vertical-padding-36":"J-0NBH","vertical-padding-42":"htzWHL","vertical-padding-48":"_3tKjB1","text":"_7fNt-8","verticalPadding24":"WAgBT-","verticalPadding30":"oV6d-0","verticalPadding36":"J-0NBH","verticalPadding42":"htzWHL","verticalPadding48":"_3tKjB1"};
 
 const mergeHighlightRanges = (ranges) => {
     const mergedRanges = [];
@@ -2180,7 +2148,7 @@ const getHighlightedSearchMatches = (str, search) => {
     return getDecoratedText(str, ranges);
 };
 
-const defaultSize$1 = '36';
+const defaultSize$2 = '36';
 class PickerItem extends React.Component {
     constructor() {
         super(...arguments);
@@ -2191,24 +2159,130 @@ class PickerItem extends React.Component {
     render() {
         var _a;
         const { size, avatarUrl, isLoading, isDisabled, icon, highlightSearchMatches, cx, } = this.props;
-        const itemSize = size && size !== 'none' ? size : defaultSize$1;
+        const itemSize = size || defaultSize$2;
         const isMultiline = !!(this.props.title && this.props.subtitle);
         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$D.root, 'uui-typography', cx] },
-            React.createElement(FlexRow, { size: itemSize, cx: isMultiline && [css$D.multiline, css$D[`vertical-padding-${itemSize}`]], spacing: "12" },
+        return (React.createElement(FlexCell, { width: "auto", cx: [css$F.root, 'uui-typography', 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$D.text, color: isDisabled ? 'disabled' : 'primary' }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : title)),
-                    subtitle && (React.createElement(Text, { size: itemSize, color: isDisabled ? 'disabled' : 'secondary', cx: css$D.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,
 };
 
+function PickerModal(props) {
+    const { view, selection, dataSourceStateLens, showSelectedLens, dataSourceState, getDataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = usePickerModal(props);
+    const getSubtitle = ({ path }, { search }) => {
+        if (!search)
+            return;
+        return path
+            .map(({ value }) => getName(value))
+            .filter(Boolean)
+            .join(' / ');
+    };
+    const renderItem = (item, rowProps, dsState) => {
+        const { flattenSearchResults } = view.getConfig();
+        return (React__default.createElement(PickerItem, Object.assign({ title: getName(item), size: "36", dataSourceState: dsState }, (flattenSearchResults ? { subtitle: getSubtitle(rowProps, dataSourceState) } : {}), rowProps)));
+    };
+    const renderRow = (rowProps) => {
+        return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React__default.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, padding: "24", size: "36", renderItem: (item, itemProps) => renderItem(item, itemProps, dataSourceState) })));
+    };
+    const renderFooter = () => {
+        const hasSelection = view.getSelectedRowsCount() > 0;
+        const rowsCount = view.getListProps().rowsCount;
+        const isEmptyRowsAndHasNoSelection = (rowsCount === 0 && !hasSelection);
+        return (React__default.createElement(React__default.Fragment, null,
+            view.selectAll && (React__default.createElement(LinkButton, { caption: hasSelection ? i18n.pickerModal.clearAllButton : i18n.pickerModal.selectAllButton, onClick: hasSelection ? () => clearSelection() : () => view.selectAll.onValueChange(true), isDisabled: isEmptyRowsAndHasNoSelection })),
+            React__default.createElement(FlexSpacer, null),
+            React__default.createElement(Button, { fill: "outline", color: "secondary", caption: i18n.pickerModal.cancelButton, onClick: () => props.abort() }),
+            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$G.noFoundModalContainer },
+            React__default.createElement(IconContainer, { cx: css$G.noFoundModalContainerIcon, icon: ForwardRef$u }),
+            React__default.createElement(Text, { cx: css$G.noFoundModalContainerText, fontWeight: "600", fontSize: "16", lineHeight: "24", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsMessage),
+            React__default.createElement(Text, { cx: css$G.noFoundModalContainerText, fontSize: "12", lineHeight: "18", 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$G.subHeaderWrapper },
+                React__default.createElement(FlexRow, { vPadding: "24" },
+                    React__default.createElement(SearchInput, Object.assign({}, dataSourceStateLens.prop('search').toProps(), { onKeyDown: (e) => handleDataSourceKeyboard({
+                            value: getDataSourceState(),
+                            onValueChange: handleDataSourceValueChange,
+                            listView: view,
+                            rows: dataRows,
+                            searchPosition: 'body',
+                        }, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder }))),
+                !isSingleSelect() && (React__default.createElement(Switch, Object.assign({ cx: css$G.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()))));
+}
+
+const MAX_ITEMS = 100;
+const getMaxItems = (maxItems) => maxItems || maxItems === 0 ? maxItems : MAX_ITEMS;
+
+var css$E = {"uui-typography":"rnyfMq","hero-header":"Y7q9WB","promo-header":"OWyHdX","uui-critical":"u571OY","uui-info":"cDjRw-","uui-success":"qZ8Nyd","uui-warning":"OO9mb7","uui-highlight":"EKnIWq","uui-typography-size-12":"CTuLeT","uui-typography-size-14":"_6D-9dq","uui-typography-size-16":"WSIScG","root":"KCoBpS","mode-form":"zTtF8z","mode-cell":"egxNS9","mode-inline":"Kp8R36","size-24":"JyTGw6","size-30":"_1CaXm0","size-36":"UPirSQ","size-42":"ksodYN","size-48":"dMhsfc","uuiTypography":"rnyfMq","heroHeader":"Y7q9WB","promoHeader":"OWyHdX","uuiCritical":"u571OY","uuiInfo":"cDjRw-","uuiSuccess":"qZ8Nyd","uuiWarning":"OO9mb7","uuiHighlight":"EKnIWq","uuiTypographySize12":"CTuLeT","uuiTypographySize14":"_6D-9dq","uuiTypographySize16":"WSIScG","modeForm":"zTtF8z","modeCell":"egxNS9","modeInline":"Kp8R36","size24":"JyTGw6","size30":"_1CaXm0","size36":"UPirSQ","size42":"ksodYN","size48":"dMhsfc"};
+
+const defaultSize$1 = '36';
+const defaultMode$1 = EditMode.FORM;
+function applyPickerTogglerMods(mods) {
+    return [
+        css$E.root,
+        css$E['size-' + (mods.size || defaultSize$1)],
+        css$E['mode-' + (mods.mode || defaultMode$1)],
+    ];
+}
+function PickerTogglerComponent(props, ref) {
+    const getPickerTogglerButtonSize = (propSize) => {
+        switch (propSize) {
+            case '48':
+                return '42';
+            case '42':
+                return '36';
+            case '36':
+                return '30';
+            case '30':
+                return '24';
+            case '24':
+                return '18';
+        }
+    };
+    const getCaption = (row) => {
+        const maxItems = getMaxItems(props.maxItems);
+        if (row.isLoading) {
+            return React.createElement(TextPlaceholder, null);
+        }
+        else if (!props.getName || props.selectedRowsCount > maxItems) {
+            return row.value;
+        }
+        else {
+            return props.getName(row.value);
+        }
+    };
+    const renderItem = (row) => {
+        var _a;
+        return (React.createElement(Tag, { key: row.rowKey, caption: getCaption(row), tabIndex: -1, size: props.size ? getPickerTogglerButtonSize(props.size) : '30', onClear: (e) => {
+                var _a;
+                (_a = row.onCheck) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                e.stopPropagation();
+            }, isDisabled: props.isDisabled || props.isReadonly || ((_a = row === null || row === void 0 ? void 0 : row.checkbox) === null || _a === void 0 ? void 0 : _a.isDisabled) }));
+    };
+    return (React.createElement(PickerToggler$1, Object.assign({}, props, { ref: ref, cx: [applyPickerTogglerMods(props), props.cx], renderItem: !!props.renderItem ? props.renderItem : renderItem, getName: (item) => (props.getName ? props.getName(item) : item), cancelIcon: systemIcons[props.size || defaultSize$1].clear, dropdownIcon: systemIcons[props.size || defaultSize$1].foldingArrow })));
+}
+const PickerToggler = React.forwardRef(PickerTogglerComponent);
+
 const pickerHeight$1 = 300;
 const pickerWidth = 360;
 function PickerInputComponent(_a, ref) {
@@ -2222,7 +2296,7 @@ function PickerInputComponent(_a, ref) {
         })
             .catch(() => { });
     };
-    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 { view, 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,
@@ -2243,11 +2317,20 @@ function PickerInputComponent(_a, ref) {
         }
         return props.editMode === 'modal' ? '36' : props.size;
     };
+    const getSubtitle = ({ path }, { search }) => {
+        if (!search)
+            return;
+        return path
+            .map(({ value }) => getName(value))
+            .filter(Boolean)
+            .join(' / ');
+    };
     const renderItem = (item, rowProps, dsState) => {
-        return (React__default.createElement(PickerItem, Object.assign({ title: getName(item), size: getRowSize(), dataSourceState: dsState, highlightSearchMatches: highlightSearchMatches }, rowProps)));
+        const { flattenSearchResults } = view.getConfig();
+        return (React__default.createElement(PickerItem, Object.assign({ title: getName(item), size: getRowSize(), dataSourceState: dsState, highlightSearchMatches: highlightSearchMatches }, (flattenSearchResults ? { subtitle: getSubtitle(rowProps, dataSourceState) } : {}), rowProps)));
     };
     const renderRow = (rowProps, dsState) => {
-        return props.renderRow ? (props.renderRow(rowProps, dsState)) : (React__default.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, borderBottom: "none", size: getRowSize(), padding: props.editMode === 'modal' ? '24' : '12', renderItem: (item, itemProps) => renderItem(item, itemProps, dsState) })));
+        return props.renderRow ? (props.renderRow(rowProps, dsState)) : (React__default.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, size: getRowSize(), padding: props.editMode === 'modal' ? '24' : '12', renderItem: (item, itemProps) => renderItem(item, itemProps, dsState) })));
     };
     const renderBody = (bodyProps, rows) => {
         const renderedDataRows = rows.map((row) => renderRow(row, dataSourceState));
@@ -2270,7 +2353,7 @@ function PickerInputComponent(_a, ref) {
 }
 const PickerInput = React__default.forwardRef(PickerInputComponent);
 
-var css$C = {"row":"_7QQJDw"};
+var css$D = {"row":"igcBWl"};
 
 function PickerListItem(props) {
     var _a;
@@ -2288,7 +2371,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$C.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$D.row }), component));
 }
 
 function PickerList(props) {
@@ -2329,7 +2412,7 @@ const UUI_FILTERS_PANEL_ADD_BUTTON_BODY = 'uui-filters-panel-add-button-body';
 const UUI_FILTERS_PANEL_ITEM_BODY = 'uui-filters-panel-item-body';
 const UUI_FILTERS_PANEL_ITEM_TOGGLER = 'uui-filters-panel-item-toggler';
 
-var css$B = {"uui-typography":"_7g7C98","hero-header":"MshH5E","promo-header":"xagFuQ","uui-critical":"_0qvyjc","uui-info":"_3L7YWR","uui-success":"_0XXZSO","uui-warning":"Hb4IgJ","uui-highlight":"eRGOuu","uui-typography-size-12":"_78u2-Y","uui-typography-size-14":"j9HLWV","uui-typography-size-16":"UGKTwM","root":"eUWLMS","title-wrapper":"_7-LIIT","title":"_2xei3W","text-wrapper":"WJbfFo","selection":"slWNom","postfix":"_85WmjD","selected":"CJ5X-N","uuiTypography":"_7g7C98","heroHeader":"MshH5E","promoHeader":"xagFuQ","uuiCritical":"_0qvyjc","uuiInfo":"_3L7YWR","uuiSuccess":"_0XXZSO","uuiWarning":"Hb4IgJ","uuiHighlight":"eRGOuu","uuiTypographySize12":"_78u2-Y","uuiTypographySize14":"j9HLWV","uuiTypographySize16":"UGKTwM","titleWrapper":"_7-LIIT","textWrapper":"WJbfFo"};
+var css$C = {"uui-typography":"M8mVEi","hero-header":"xeNbYZ","promo-header":"uaphsN","uui-critical":"bs7i0K","uui-info":"sYaSdF","uui-success":"VBEFvu","uui-warning":"LUuhxT","uui-highlight":"utwV1n","uui-typography-size-12":"bows1-","uui-typography-size-14":"ubBwuU","uui-typography-size-16":"bJCZJ7","root":"p0Kjta","title-wrapper":"iPyOyL","title":"lO0bb8","text-wrapper":"HEjNdv","selection":"Jopo7a","postfix":"Qjcbyq","selected":"LqZUIC","uuiTypography":"M8mVEi","heroHeader":"xeNbYZ","promoHeader":"uaphsN","uuiCritical":"bs7i0K","uuiInfo":"sYaSdF","uuiSuccess":"VBEFvu","uuiWarning":"LUuhxT","uuiHighlight":"utwV1n","uuiTypographySize12":"bows1-","uuiTypographySize14":"ubBwuU","uuiTypographySize16":"bJCZJ7","titleWrapper":"iPyOyL","textWrapper":"HEjNdv"};
 
 const defaultSize = '36';
 const FilterPanelItemToggler = React.forwardRef((props, ref) => {
@@ -2354,19 +2437,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$B.selection }, i),
+        React.createElement(Text, { color: "brand", size: props.size, cx: css$C.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(UUI_FILTERS_PANEL_ITEM_TOGGLER, 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 },
+        }, cx: cx(UUI_FILTERS_PANEL_ITEM_TOGGLER, 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 },
                 getSelectionText(),
-                props.postfix && (React.createElement(Text, { color: "brand", size: props.size, cx: css$B.postfix }, props.postfix))))),
+                props.postfix && (React.createElement(Text, { color: "brand", size: props.size, cx: css$C.postfix }, props.postfix))))),
         !props.isDisabled && React.createElement(IconContainer, { icon: systemIcons[props.size || defaultSize].foldingArrow, flipY: props.isOpen, cx: "uui-icon-dropdown" })));
 });
 
@@ -2386,14 +2469,14 @@ function FilterPickerBody(props) {
         if (rowProps.isSelectable && isSingleSelect() && props.editMode !== 'modal') {
             rowProps.onSelect = onSelect;
         }
-        return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, borderBottom: "none", size: "36", padding: "12", renderItem: renderItem })));
+        return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, size: "36", padding: "12", renderItem: renderItem })));
     };
     const renderFooter = () => {
         return React.createElement(DataPickerFooter, Object.assign({}, getFooterProps(), { size: "36" }));
     };
     const renderBody = (bodyProps, rows) => {
         const renderedDataRows = rows.map((props) => renderRow(props));
-        const maxHeight = isMobile() ? document.documentElement.clientHeight : props.dropdownHeight || pickerHeight;
+        const maxHeight = isMobile() ? document.documentElement.clientHeight : props.maxBodyHeight || pickerHeight;
         const maxWidth = isMobile() ? undefined : 360;
         return (React.createElement(React.Fragment, null,
             React.createElement(DataPickerBody, Object.assign({}, bodyProps, { selectionMode: props.selectionMode, rows: renderedDataRows, maxHeight: maxHeight, maxWidth: maxWidth, searchSize: "36", editMode: "dropdown" })),
@@ -2406,7 +2489,6 @@ function FilterPickerBody(props) {
 class FilterDatePickerBody extends BaseDatePicker {
     constructor() {
         super(...arguments);
-        this.state = Object.assign(Object.assign({}, super.getValue()), { isOpen: false, inputValue: null });
         this.renderInput = () => {
             return null;
         };
@@ -2435,7 +2517,7 @@ class FilterDatePickerBody extends BaseDatePicker {
     }
 }
 
-var css$A = {"uui-typography":"IBVU9T","hero-header":"-b1svy","promo-header":"fGAfBX","uui-critical":"_4OvEhL","uui-info":"KhK0BW","uui-success":"ZRhDsd","uui-warning":"zU4Q0X","uui-highlight":"V6BBrn","uui-typography-size-12":"owZG1U","uui-typography-size-14":"_1TbtWG","uui-typography-size-16":"_7Iq4cE","date-input":"quSARo","size-24":"y9ocMh","size-30":"_26E40v","size-36":"Mh2yoV","size-42":"ACK63J","size-48":"UZWhhS","date-input-group":"o89W--","separator":"q6mn2w","mode-form":"IQPr28","mode-cell":"CrdMTZ","uuiTypography":"IBVU9T","heroHeader":"-b1svy","promoHeader":"fGAfBX","uuiCritical":"_4OvEhL","uuiInfo":"KhK0BW","uuiSuccess":"ZRhDsd","uuiWarning":"zU4Q0X","uuiHighlight":"V6BBrn","uuiTypographySize12":"owZG1U","uuiTypographySize14":"_1TbtWG","uuiTypographySize16":"_7Iq4cE","dateInput":"quSARo","size24":"y9ocMh","size30":"_26E40v","size36":"Mh2yoV","size42":"ACK63J","size48":"UZWhhS","dateInputGroup":"o89W--","modeForm":"IQPr28","modeCell":"CrdMTZ"};
+var css$B = {"uui-typography":"_2lwDgc","hero-header":"_8BVo-C","promo-header":"_6wNPYK","uui-critical":"xjNSVL","uui-info":"mKh1Kg","uui-success":"_60B2v-","uui-warning":"NMVKil","uui-highlight":"z4pLMb","uui-typography-size-12":"PuerFT","uui-typography-size-14":"N3HORL","uui-typography-size-16":"u6qg78","date-input":"r7imjF","size-24":"NAFOFJ","size-30":"G-iozs","size-36":"_9muMIh","size-42":"V5z-7S","size-48":"Rh2YlB","date-input-group":"oEFGny","separator":"SnYWdz","mode-form":"L-SoDe","mode-cell":"CD-brp","uuiTypography":"_2lwDgc","heroHeader":"_8BVo-C","promoHeader":"_6wNPYK","uuiCritical":"xjNSVL","uuiInfo":"mKh1Kg","uuiSuccess":"_60B2v-","uuiWarning":"NMVKil","uuiHighlight":"z4pLMb","uuiTypographySize12":"PuerFT","uuiTypographySize14":"N3HORL","uuiTypographySize16":"u6qg78","dateInput":"r7imjF","size24":"NAFOFJ","size30":"G-iozs","size36":"_9muMIh","size42":"V5z-7S","size48":"Rh2YlB","dateInputGroup":"oEFGny","modeForm":"L-SoDe","modeCell":"CD-brp"};
 
 class FilterRangeDatePickerBody extends BaseRangeDatePicker {
     constructor() {
@@ -2455,10 +2537,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$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("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(FlexSpacer, null),
                     React.createElement(LinkButton, { isDisabled: !this.state.inputValue.from && !this.state.inputValue.to, caption: i18n.pickerModal.clearAllButton, onClick: this.handleCancel })))));
     }
@@ -2467,11 +2549,16 @@ class FilterRangeDatePickerBody extends BaseRangeDatePicker {
     }
 }
 
-var css$z = {"container":"jyS96r"};
+var css$A = {"container":"T9DU35"};
 
 function FilterNumericBody(props) {
     var _a, _b;
     const isInRangePredicate = (props === null || props === void 0 ? void 0 : props.selectedPredicate) === 'inRange' || (props === null || props === void 0 ? void 0 : props.selectedPredicate) === 'notInRange';
+    const isWrongRange = (from, to) => {
+        if (!to && to !== 0)
+            return false;
+        return from > to;
+    };
     const rangeValueHandler = (type) => (val) => {
         var _a, _b;
         const value = props.value;
@@ -2511,15 +2598,15 @@ 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$z.container },
+            React__default.createElement(FlexRow, { padding: "12", alignItems: "center", spacing: "12", borderBottom: true, cx: css$A.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%" },
-                    React__default.createElement(NumericInput, { value: (_b = value === null || value === void 0 ? void 0 : value.to) !== null && _b !== void 0 ? _b : null, onValueChange: rangeValueHandler('to'), size: "36", placeholder: "Max", formatOptions: { maximumFractionDigits: 2 } }))),
+                    React__default.createElement(NumericInput, { value: (_b = value === null || value === void 0 ? void 0 : value.to) !== null && _b !== void 0 ? _b : null, onValueChange: rangeValueHandler('to'), size: "36", placeholder: "Max", formatOptions: { maximumFractionDigits: 2 }, isInvalid: isWrongRange(value === null || value === void 0 ? void 0 : value.from, value === null || value === void 0 ? void 0 : value.to) }))),
             renderFooter()));
     }
     return (React__default.createElement("div", null,
-        React__default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$z.container },
+        React__default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$A.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()));
@@ -2559,7 +2646,7 @@ var SvgActionDeleteforever12 = function SvgActionDeleteforever12(props, ref) {
 };
 var ForwardRef$t = /*#__PURE__*/forwardRef(SvgActionDeleteforever12);
 
-var css$y = {"uui-typography":"-FNZSY","hero-header":"_2AMfE5","promo-header":"zXc5Ty","uui-critical":"oulv4i","uui-info":"jOIIMh","uui-success":"ggDYht","uui-warning":"PYy9Gj","uui-highlight":"J0J3ac","uui-typography-size-12":"TJWq1m","uui-typography-size-14":"Eg4NcY","uui-typography-size-16":"WJIi63","header":"yXUwhQ","removeButton":"sroU-i","with-search":"m2i112","uuiTypography":"-FNZSY","heroHeader":"_2AMfE5","promoHeader":"zXc5Ty","uuiCritical":"oulv4i","uuiInfo":"jOIIMh","uuiSuccess":"ggDYht","uuiWarning":"PYy9Gj","uuiHighlight":"J0J3ac","uuiTypographySize12":"TJWq1m","uuiTypographySize14":"Eg4NcY","uuiTypographySize16":"WJIi63","withSearch":"m2i112"};
+var css$z = {"uui-typography":"UEQBuU","hero-header":"_1j5wHt","promo-header":"yNUbr2","uui-critical":"pagUtC","uui-info":"KzL6Ip","uui-success":"pBa-ua","uui-warning":"_8rrQRb","uui-highlight":"B1pemW","uui-typography-size-12":"AghrTi","uui-typography-size-14":"mjM4rh","uui-typography-size-16":"ydvrpY","header":"JKJr-4","removeButton":"c04OPd","with-search":"LyubSz","uuiTypography":"UEQBuU","heroHeader":"_1j5wHt","promoHeader":"yNUbr2","uuiCritical":"pagUtC","uuiInfo":"KzL6Ip","uuiSuccess":"pBa-ua","uuiWarning":"_8rrQRb","uuiHighlight":"B1pemW","uuiTypographySize12":"AghrTi","uuiTypographySize14":"mjM4rh","uuiTypographySize16":"ydvrpY","withSearch":"LyubSz"};
 
 function FiltersToolbarItemImpl(props) {
     const { maxCount = 2 } = props;
@@ -2635,9 +2722,9 @@ function FiltersToolbarItemImpl(props) {
     };
     const renderHeader = (hideTitle) => {
         var _a;
-        return (React__default.createElement("div", { className: cx(css$y.header, isPickersType && ((_a = props.showSearch) !== null && _a !== void 0 ? _a : css$y.withSearch)) },
+        return (React__default.createElement("div", { className: cx(css$z.header, isPickersType && ((_a = props.showSearch) !== null && _a !== void 0 ? _a : css$z.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$y.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: "24", icon: ForwardRef$t }))));
+            !(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$t }))));
     };
     const renderBody = (dropdownProps) => {
         const hideHeaderTitle = isPickersType && isMobileScreen;
@@ -2860,9 +2947,9 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = React__default.memo(FiltersToolbarImpl);
 
-var css$x = {"divider":"g-EFsC","dropdownDeleteIcon":"CWLWRV","presetsWrapper":"OJpl9b","addPresetContainer":"wx6WGa","dropContainer":"cm0dJU"};
+var css$y = {"divider":"Z1EP4U","dropdownDeleteIcon":"M47n0M","presetsWrapper":"NMQBav","addPresetContainer":"_3lJYYr","dropContainer":"qBKiM8"};
 
-var css$w = {"preset-dropdown-panel":"PjKHVa","delete-row":"PkNB1K","delete-button":"_16XuiP","targetOpen":"hQvtx8","presetDropdownPanel":"PjKHVa","deleteRow":"PkNB1K","deleteButton":"_16XuiP"};
+var css$x = {"preset-dropdown-panel":"_6G8WBh","delete-row":"_45Cg-t","delete-button":"Z3dZnN","targetOpen":"mW5tkT","presetDropdownPanel":"_6G8WBh","deleteRow":"_45Cg-t","deleteButton":"Z3dZnN"};
 
 var _path$q;
 function _extends$r() { _extends$r = 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$r.apply(this, arguments); }
@@ -3027,7 +3114,7 @@ function PresetActionsDropdown(props) {
     ]);
     const renderBody = () => {
         const isReadonlyPreset = props.preset.isReadonly;
-        return (React__default.createElement(Panel, { background: "surface-main", shadow: true, cx: css$w.presetDropdownPanel },
+        return (React__default.createElement(Panel, { background: "surface-main", shadow: true, cx: css$x.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$q, caption: "Save in current", onClick: saveInCurrentHandler }))),
@@ -3041,16 +3128,16 @@ function PresetActionsDropdown(props) {
                 React__default.createElement(DropdownMenuButton, { icon: ForwardRef$n, caption: "Duplicate", onClick: duplicateHandler })),
             React__default.createElement(FlexRow, { borderBottom: true, key: `${props.preset.id}-copyLink` },
                 React__default.createElement(DropdownMenuButton, { icon: ForwardRef$l, caption: "Copy Link", onClick: copyUrlToClipboard })),
-            !isReadonlyPreset && (React__default.createElement(FlexRow, { key: `${props.preset.id}-delete`, cx: css$w.deleteRow },
-                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$k, caption: "Delete", cx: css$w.deleteButton, onClick: deleteHandler })))));
+            !isReadonlyPreset && (React__default.createElement(FlexRow, { key: `${props.preset.id}-delete`, cx: css$x.deleteRow },
+                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$k, caption: "Delete", cx: css$x.deleteButton, onClick: deleteHandler })))));
     };
     const renderTarget = useCallback((dropdownProps) => {
-        return (React__default.createElement(IconButton, Object.assign({ cx: dropdownProps.isOpen && css$w.targetOpen, color: props.preset.id === props.activePresetId ? 'info' : 'neutral' }, dropdownProps, { icon: ForwardRef$r })));
+        return (React__default.createElement(IconButton, Object.assign({ cx: dropdownProps.isOpen && css$x.targetOpen, color: props.preset.id === props.activePresetId ? 'info' : 'neutral' }, dropdownProps, { icon: ForwardRef$r })));
     }, []);
     return (React__default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", modifiers: [{ name: 'offset', options: { offset: [0, 22] } }] }));
 }
 
-var css$v = {"preset-input-cell":"_8C5Vae","preset-input":"_03CLIz","presetInputCell":"_8C5Vae","presetInput":"_03CLIz"};
+var css$w = {"preset-input-cell":"btqiSH","preset-input":"eDBfhW","presetInputCell":"btqiSH","presetInput":"eDBfhW"};
 
 const UUI_PRESETS_PANEL_ADD_BUTTON = 'uui-presets-panel-add-button';
 const UUI_PRESETS_PANEL_MORE_BUTTON = 'uui-presets-panel-more-button';
@@ -3060,15 +3147,18 @@ const UUI_PRESETS_PANEL_PRESET = 'uui-presets-panel-preset';
 function PresetInput(props) {
     var _a;
     const [presetCaption, setPresetCaption] = useState(((_a = props.preset) === null || _a === void 0 ? void 0 : _a.name) || '');
+    const [readonly, setReadonly] = useState(false);
     const cancelActionHandler = useCallback(() => {
         setPresetCaption('');
         props.onCancel();
     }, [props.onCancel]);
     const acceptActionHandler = useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        setReadonly(() => true);
         if (presetCaption) {
             yield props.onSuccess(presetCaption);
         }
         props.onCancel();
+        setReadonly(() => false);
     }), [presetCaption]);
     const newPresetOnBlurHandler = useCallback(() => {
         if (presetCaption.length) {
@@ -3076,11 +3166,11 @@ function PresetInput(props) {
         }
         props.onCancel();
     }, [presetCaption.length, props.onCancel]);
-    return (React__default.createElement(FlexCell, { cx: [css$v.presetInputCell, UUI_PRESETS_PANEL_INPUT], minWidth: 180 },
-        React__default.createElement(TextInput, { cx: css$v.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50 })));
+    return (React__default.createElement(FlexCell, { cx: [css$w.presetInputCell, UUI_PRESETS_PANEL_INPUT], minWidth: 180 },
+        React__default.createElement(TextInput, { cx: css$w.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50, isReadonly: readonly })));
 }
 
-var css$u = {"preset":"N1bzim","activePreset":"e1HBB-"};
+var css$v = {"preset":"vjDQ-S","activePreset":"pIaB6m"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = useState(false);
@@ -3098,7 +3188,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$u.preset, isPresetActive && css$u.activePreset, UUI_PRESETS_PANEL_PRESET], 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$v.preset, isPresetActive && css$v.activePreset, UUI_PRESETS_PANEL_PRESET], size: "60", withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: () => React__default.createElement(PresetActionsDropdown, Object.assign({ renamePreset: setPresetForRename }, props)), iconPosition: "right", isLinkActive: isPresetActive }))));
 }
 
 function PresetsPanel(props) {
@@ -3114,16 +3204,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$x.addPresetContainer }, !isAddingPreset ? (React__default.createElement(Button, { cx: UUI_PRESETS_PANEL_ADD_BUTTON, size: "36", onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: ForwardRef$s, iconPosition: "left", fill: "ghost", color: "primary" })) : (React__default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
+        return (React__default.createElement("div", { key: "addingPresetBlock", className: css$y.addPresetContainer }, !isAddingPreset ? (React__default.createElement(Button, { cx: UUI_PRESETS_PANEL_ADD_BUTTON, size: "36", onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: ForwardRef$s, 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$x.divider }),
-                React__default.createElement(Button, Object.assign({ cx: UUI_PRESETS_PANEL_MORE_BUTTON, 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$k, iconPosition: "right", cx: css$x.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
+                React__default.createElement("div", { className: css$y.divider }),
+                React__default.createElement(Button, Object.assign({ cx: UUI_PRESETS_PANEL_MORE_BUTTON, 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$k, iconPosition: "right", cx: css$y.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
     };
     const getPresetPriority = (preset, index) => {
         return preset.id === props.activePresetId ? 100499 : 1000 - index;
@@ -3141,7 +3231,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$x.presetsWrapper },
+        React__default.createElement(FlexRow, { size: null, spacing: "12", cx: css$y.presetsWrapper },
             React__default.createElement(AdaptivePanel, { items: getPanelItems() }))));
 }
 
@@ -3179,7 +3269,7 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var css$t = {"line-height-12":"HP0E95","line-height-18":"x4m9Lh","line-height-24":"_0Rikwi","line-height-30":"z980QL","font-size-10":"Ca3mtn","font-size-12":"_7btmyx","font-size-14":"_0dDik6","font-size-16":"LX2DVT","font-size-18":"uxfE3U","font-size-24":"_8x3tW-","v-padding-2":"_4t-oow","v-padding-3":"wef8ep","v-padding-5":"jQvO5Q","v-padding-6":"YPhQ4I","v-padding-8":"S1-Dfc","v-padding-9":"E6Wety","v-padding-11":"PwrhmE","v-padding-12":"zrYE0v","v-padding-14":"HSLsjM","v-padding-15":"-jDck5","v-padding-17":"Iu2B2T","v-padding-18":"iYwIpj","v-padding-23":"_5bPRRb","v-padding-24":"aAXi4y","lineHeight12":"HP0E95","lineHeight18":"x4m9Lh","lineHeight24":"_0Rikwi","lineHeight30":"z980QL","fontSize10":"Ca3mtn","fontSize12":"_7btmyx","fontSize14":"_0dDik6","fontSize16":"LX2DVT","fontSize18":"uxfE3U","fontSize24":"_8x3tW-","vPadding2":"_4t-oow","vPadding3":"wef8ep","vPadding5":"jQvO5Q","vPadding6":"YPhQ4I","vPadding8":"S1-Dfc","vPadding9":"E6Wety","vPadding11":"PwrhmE","vPadding12":"zrYE0v","vPadding14":"HSLsjM","vPadding15":"-jDck5","vPadding17":"Iu2B2T","vPadding18":"iYwIpj","vPadding23":"_5bPRRb","vPadding24":"aAXi4y"};
+var css$u = {"line-height-12":"Q3Qv20","line-height-18":"b2hPSQ","line-height-24":"-Y5Dym","line-height-30":"_5IVeZI","font-size-10":"X2628I","font-size-12":"foSWQO","font-size-14":"-KuFcE","font-size-16":"_6GiZro","font-size-18":"_3-cMrq","font-size-24":"BgjE93","v-padding-2":"GU0pk-","v-padding-3":"wwmr9r","v-padding-5":"_8LoTzH","v-padding-6":"ceppc7","v-padding-8":"dIEGa8","v-padding-9":"ACLoGo","v-padding-11":"LasNdx","v-padding-12":"_6Zp8gd","v-padding-14":"D6QLyh","v-padding-15":"v8P1uJ","v-padding-17":"NZIe-B","v-padding-18":"oTUz6B","v-padding-23":"_8CrI9s","v-padding-24":"Cw8ljy","lineHeight12":"Q3Qv20","lineHeight18":"b2hPSQ","lineHeight24":"-Y5Dym","lineHeight30":"_5IVeZI","fontSize10":"X2628I","fontSize12":"foSWQO","fontSize14":"-KuFcE","fontSize16":"_6GiZro","fontSize18":"_3-cMrq","fontSize24":"BgjE93","vPadding2":"GU0pk-","vPadding3":"wwmr9r","vPadding5":"_8LoTzH","vPadding6":"ceppc7","vPadding8":"dIEGa8","vPadding9":"ACLoGo","vPadding11":"LasNdx","vPadding12":"_6Zp8gd","vPadding14":"D6QLyh","vPadding15":"v8P1uJ","vPadding17":"NZIe-B","vPadding18":"oTUz6B","vPadding23":"_8CrI9s","vPadding24":"Cw8ljy"};
 
 const defaultTextSettings = {
     18: { lineHeight: 12, fontSize: 10 },
@@ -3192,7 +3282,7 @@ const defaultTextSettings = {
 };
 function getTextClasses(props, border) {
     if (props.size === 'none') {
-        return [css$t['line-height-' + props.lineHeight], css$t['font-size-' + props.fontSize]];
+        return [css$u['line-height-' + props.lineHeight], css$u['font-size-' + props.fontSize]];
     }
     const setting = {
         size: props.size,
@@ -3201,11 +3291,11 @@ function getTextClasses(props, border) {
     };
     const vPadding = (+setting.size - +setting.lineHeight - (border ? 2 : 0)) / 2;
     return [
-        css$t['line-height-' + setting.lineHeight], css$t['font-size-' + setting.fontSize], css$t['v-padding-' + vPadding],
+        css$u['line-height-' + setting.lineHeight], css$u['font-size-' + setting.fontSize], css$u['v-padding-' + vPadding],
     ];
 }
 
-var css$s = {"root":"hX-gdT"};
+var css$t = {"root":"DItj1X"};
 
 function applyTextMods(mods) {
     const textClasses = getTextClasses({
@@ -3214,7 +3304,7 @@ function applyTextMods(mods) {
         fontSize: mods.fontSize,
     }, false);
     return [
-        css$s.root,
+        css$t.root,
         'uui-text',
         `uui-color-${mods.color || 'primary'}`,
         `uui-font-weight-${mods.fontWeight || '400'}`,
@@ -3222,9 +3312,9 @@ function applyTextMods(mods) {
         'uui-typography',
     ].concat(textClasses);
 }
-const Text = withMods(Text$1, applyTextMods);
+const Text = withMods(uuiComponents.Text, applyTextMods);
 
-var css$r = {"root":"ePHlUz","loading-word":"VdBYqd","animated-loading":"vTOidh","skeleton_loading":"H5-c-6","loadingWord":"VdBYqd","animatedLoading":"vTOidh","skeletonLoading":"H5-c-6"};
+var css$s = {"root":"P-9agp","loading-word":"MkiESq","animated-loading":"fYEbdN","skeleton_loading":"_0dREls","loadingWord":"MkiESq","animatedLoading":"fYEbdN","skeletonLoading":"_0dREls"};
 
 const TextPlaceholder = (props) => {
     const pattern = '&nbsp;';
@@ -3236,35 +3326,35 @@ const TextPlaceholder = (props) => {
         }
         return words;
     }, [props.wordsCount]);
-    return (React.createElement("div", Object.assign({ "aria-busy": true, className: cx(css$r.root, 'uui-text-placeholder') }, props.rawProps), text.map((it, index) => (React.createElement("span", { key: index, className: cx([
-            props.cx, css$r.loadingWord, !props.isNotAnimated && css$r.animatedLoading,
+    return (React.createElement("div", Object.assign({ "aria-busy": true, className: cx(css$s.root, 'uui-text-placeholder') }, props.rawProps), text.map((it, index) => (React.createElement("span", { key: index, className: cx([
+            props.cx, css$s.loadingWord, !props.isNotAnimated && css$s.animatedLoading,
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
 const RichTextView = withMods(uuiComponents.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || '14'}`]);
 
-var css$q = {"uui-typography":"lV5Wwq","hero-header":"Nu8uzp","promo-header":"_5F10L5","uui-critical":"vzT6EO","uui-info":"Tqh-dk","uui-success":"yPAOAA","uui-warning":"_9SEz0L","uui-highlight":"_-3m0YT","uui-typography-size-12":"_8sDujL","uui-typography-size-14":"WSm59e","uui-typography-size-16":"_1Kdc3b","root":"_4czAiu","modal-blocker":"UG4moD","animateModalBlocker":"G6x0Mw","modal":"_6XWVw2","modal-footer":"DjL30C","border-top":"_5iUaYc","modal-header":"-Md2FA","uuiTypography":"lV5Wwq","heroHeader":"Nu8uzp","promoHeader":"_5F10L5","uuiCritical":"vzT6EO","uuiInfo":"Tqh-dk","uuiSuccess":"yPAOAA","uuiWarning":"_9SEz0L","uuiHighlight":"_-3m0YT","uuiTypographySize12":"_8sDujL","uuiTypographySize14":"WSm59e","uuiTypographySize16":"_1Kdc3b","modalBlocker":"UG4moD","modalFooter":"DjL30C","borderTop":"_5iUaYc","modalHeader":"-Md2FA"};
+var css$r = {"uui-typography":"f6ZPMH","hero-header":"PgfwBt","promo-header":"xHf-Qy","uui-critical":"VCWEeY","uui-info":"uupi3E","uui-success":"O-xjaZ","uui-warning":"BawFT3","uui-highlight":"-qLPBR","uui-typography-size-12":"jTf91y","uui-typography-size-14":"eJOD6F","uui-typography-size-16":"_33SiIY","root":"oNoJ1-","modal-blocker":"IMYXBd","animateModalBlocker":"lA4rkX","modal":"MlJggs","modal-footer":"v-dKkp","border-top":"a6-Xsg","modal-header":"CIOQR4","uuiTypography":"f6ZPMH","heroHeader":"PgfwBt","promoHeader":"xHf-Qy","uuiCritical":"VCWEeY","uuiInfo":"uupi3E","uuiSuccess":"O-xjaZ","uuiWarning":"BawFT3","uuiHighlight":"-qLPBR","uuiTypographySize12":"jTf91y","uuiTypographySize14":"eJOD6F","uuiTypographySize16":"_33SiIY","modalBlocker":"IMYXBd","modalFooter":"v-dKkp","borderTop":"a6-Xsg","modalHeader":"CIOQR4"};
 
-const ModalBlocker = withMods(ModalBlocker$1, () => [css$q.modalBlocker]);
-const ModalWindow = withMods(ModalWindow$1, () => [css$q.root, css$q.modal], (props) => ({
+const ModalBlocker = withMods(ModalBlocker$1, () => [css$r.modalBlocker]);
+const ModalWindow = withMods(ModalWindow$1, () => [css$r.root, css$r.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$q.root, css$q.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$r.root, css$r.modalHeader, this.props.cx], spacing: "12", rawProps: this.props.rawProps },
             this.props.title && (React.createElement(Text, { size: "48", fontSize: "18", fontWeight: "600" }, 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$A, onClick: this.props.onClose })))));
+                React.createElement(IconButton, { rawProps: { 'aria-label': 'Close modal' }, icon: ForwardRef$C, onClick: this.props.onClose })))));
     }
 }
 class ModalFooter extends React.Component {
     render() {
         return (React.createElement(FlexRow, { spacing: this.props.spacing || '12', cx: [
-                css$q.root,
-                css$q.modalFooter,
-                this.props.borderTop && css$q.borderTop,
+                css$r.root,
+                css$r.modalFooter,
+                this.props.borderTop && css$r.borderTop,
                 this.props.cx,
             ], padding: this.props.padding || '24', vPadding: this.props.vPadding || '24', rawProps: this.props.rawProps }, this.props.children));
     }
@@ -3286,7 +3376,7 @@ var SvgCross = function SvgCross(props, ref) {
 };
 var ForwardRef$j = /*#__PURE__*/forwardRef(SvgCross);
 
-var css$p = {"uui-typography":"TaF5p7","hero-header":"HWQCyX","promo-header":"_6rFDX-","uui-critical":"Bd43t-","uui-info":"vdqEho","uui-success":"kSPsjY","uui-warning":"_79zf6k","uui-highlight":"_2PMYUe","uui-typography-size-12":"N25pkY","uui-typography-size-14":"MZEQ1Q","uui-typography-size-16":"lxeOQQ","root":"PHrkDR","icon-wrapper":"E8cfWi","action-wrapper":"LVPIg5","action-link":"UTx5wM","close-icon":"eWi2i9","main-path":"pNgTg4","content":"Ar8sli","clear-button":"cytznc","close-wrapper":"_44D-WH","uuiTypography":"TaF5p7","heroHeader":"HWQCyX","promoHeader":"_6rFDX-","uuiCritical":"Bd43t-","uuiInfo":"vdqEho","uuiSuccess":"kSPsjY","uuiWarning":"_79zf6k","uuiHighlight":"_2PMYUe","uuiTypographySize12":"N25pkY","uuiTypographySize14":"MZEQ1Q","uuiTypographySize16":"lxeOQQ","iconWrapper":"E8cfWi","actionWrapper":"LVPIg5","actionLink":"UTx5wM","closeIcon":"eWi2i9","mainPath":"pNgTg4","clearButton":"cytznc","closeWrapper":"_44D-WH"};
+var css$q = {"uui-typography":"sFBkBg","hero-header":"StNapT","promo-header":"CS05tn","uui-critical":"ngZ-G4","uui-info":"B8KdLt","uui-success":"z1elXG","uui-warning":"Tfz-JO","uui-highlight":"_4JjDbF","uui-typography-size-12":"k-Y8Ep","uui-typography-size-14":"Yr5doO","uui-typography-size-16":"mqDLhc","root":"s94Q--","icon-wrapper":"cWsS2D","action-wrapper":"gwavNo","action-link":"kyAv4L","close-icon":"yGMm-K","main-path":"_40-nmH","content":"CZnEOw","clear-button":"_3xT2Pt","close-wrapper":"-I9ntX","uuiTypography":"sFBkBg","heroHeader":"StNapT","promoHeader":"CS05tn","uuiCritical":"ngZ-G4","uuiInfo":"B8KdLt","uuiSuccess":"z1elXG","uuiWarning":"Tfz-JO","uuiHighlight":"_4JjDbF","uuiTypographySize12":"k-Y8Ep","uuiTypographySize14":"Yr5doO","uuiTypographySize16":"mqDLhc","iconWrapper":"cWsS2D","actionWrapper":"gwavNo","actionLink":"kyAv4L","closeIcon":"yGMm-K","mainPath":"_40-nmH","clearButton":"_3xT2Pt","closeWrapper":"-I9ntX"};
 
 const NotificationCard = React__default.forwardRef((props, ref) => {
     const notificationCardNode = React__default.useRef(null);
@@ -3301,23 +3391,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$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 },
+    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 },
                 props.children,
-                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 }))))));
+                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 }))))));
 });
-const WarningNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$D, color: "warning" }, props, { ref: ref, cx: props.cx }))));
-const SuccessNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$E, color: "success" }, props, { ref: ref, cx: props.cx }))));
-const HintNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$B, color: "info" }, props, { ref: ref, cx: props.cx }))));
-const ErrorNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$C, color: "error" }, props, { ref: ref, cx: props.cx }))));
+const WarningNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$F, color: "warning" }, props, { ref: ref, cx: props.cx }))));
+const SuccessNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$G, color: "success" }, props, { ref: ref, cx: props.cx }))));
+const HintNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$D, color: "info" }, props, { ref: ref, cx: props.cx }))));
+const ErrorNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$E, color: "error" }, props, { ref: ref, cx: props.cx }))));
 class ClearNotification extends React__default.Component {
     render() {
-        return (React__default.createElement("div", { className: cx(css$p.notificationWrapper, css$p.clearButton) },
+        return (React__default.createElement("div", { className: cx(css$q.notificationWrapper, css$q.clearButton) },
             React__default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => this.context.uuiNotifications.clearAll() })));
     }
 }
@@ -3357,7 +3447,7 @@ class DatePickerComponent extends BaseDatePicker {
                     });
                 }
             }
-            return (React__default.createElement(TextInput, Object.assign({}, props, { onClick: null, isDropdown: false, cx: cx$1(this.props.inputCx, this.state.isOpen && uuiMod.focus), icon: this.props.mode !== EditMode.CELL && systemIcons[this.props.size || '36'].calendar, iconPosition: this.props.iconPosition || 'left', placeholder: this.props.placeholder ? this.props.placeholder : this.getFormat(), size: this.props.size || '36', value: this.state.inputValue, onValueChange: this.handleInputChange, onCancel: this.props.disableClear || !this.state.inputValue ? undefined : this.handleCancel, isInvalid: this.props.isInvalid, isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, tabIndex: this.props.isReadonly || this.props.isDisabled ? -1 : 0, onFocus: this.handleFocus, onBlur: this.handleBlur, mode: this.props.mode || defaultMode, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.input })));
+            return (React__default.createElement(TextInput, Object.assign({}, props, { onClick: null, isDropdown: false, cx: cx$1(this.props.inputCx, this.state.isOpen && uuiMod.focus), icon: this.props.mode !== EditMode.CELL && systemIcons[this.props.size || '36'].calendar, iconPosition: this.props.iconPosition || 'left', placeholder: this.props.placeholder ? this.props.placeholder : this.getFormat(), size: this.props.size || '36', value: this.state.inputValue, onValueChange: this.handleInputChange, onCancel: this.props.disableClear || !this.state.inputValue ? undefined : this.handleCancel, isInvalid: this.props.isInvalid, isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, tabIndex: this.props.isReadonly || this.props.isDisabled ? -1 : 0, onFocus: this.handleFocus, onBlur: this.handleBlur, mode: this.props.mode || defaultMode, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.input, id: this.props.id })));
         };
     }
     renderBody(props) {
@@ -3369,14 +3459,14 @@ class DatePickerComponent extends BaseDatePicker {
 }
 const DatePicker = withMods(DatePickerComponent);
 
-var css$o = {"uui-typography":"R9Xa-F","hero-header":"HixjV5","promo-header":"LQyb-D","uui-critical":"JaKTu-","uui-info":"udTEFR","uui-success":"eE6RmV","uui-warning":"I9G-Hh","uui-highlight":"zxRlMb","uui-typography-size-12":"Ryqhe4","uui-typography-size-14":"erKb1e","uui-typography-size-16":"tFLF7m","root":"N9IcuJ","uuiTypography":"R9Xa-F","heroHeader":"HixjV5","promoHeader":"LQyb-D","uuiCritical":"JaKTu-","uuiInfo":"udTEFR","uuiSuccess":"eE6RmV","uuiWarning":"I9G-Hh","uuiHighlight":"zxRlMb","uuiTypographySize12":"Ryqhe4","uuiTypographySize14":"erKb1e","uuiTypographySize16":"tFLF7m"};
+var css$p = {"uui-typography":"bZ8Kto","hero-header":"dAccHM","promo-header":"psAXn5","uui-critical":"CMuqb8","uui-info":"ueKHKJ","uui-success":"_5LQoOE","uui-warning":"_2RXCwf","uui-highlight":"ZyWyEm","uui-typography-size-12":"M-AxUK","uui-typography-size-14":"ef1Z6m","uui-typography-size-16":"eG-WlI","root":"RFldna","uuiTypography":"bZ8Kto","heroHeader":"dAccHM","promoHeader":"psAXn5","uuiCritical":"CMuqb8","uuiInfo":"ueKHKJ","uuiSuccess":"_5LQoOE","uuiWarning":"_2RXCwf","uuiHighlight":"ZyWyEm","uuiTypographySize12":"M-AxUK","uuiTypographySize14":"ef1Z6m","uuiTypographySize16":"eG-WlI"};
 
 function applyCalendarPresetsMods() {
-    return [css$o.root];
+    return [css$p.root];
 }
 const CalendarPresets = withMods(CalendarPresets$1, applyCalendarPresetsMods, () => ({}));
 
-var css$n = {"uui-typography":"_6D1S4f","hero-header":"dw0rIq","promo-header":"dsQzEd","uui-critical":"lhq4ea","uui-info":"sD5hBm","uui-success":"EsOP22","uui-warning":"_94p-5u","uui-highlight":"XEXMOf","uui-typography-size-12":"lQLuV9","uui-typography-size-14":"rA-PTu","uui-typography-size-16":"C23DyZ","root":"qUDGNz","container":"laC6TS","day-selection":"IbF55O","from-picker":"Cw8Fpi","to-picker":"gPUb10","bodes-wrapper":"yPl4dk","blocker":"eRWBUq","uuiTypography":"_6D1S4f","heroHeader":"dw0rIq","promoHeader":"dsQzEd","uuiCritical":"lhq4ea","uuiInfo":"sD5hBm","uuiSuccess":"EsOP22","uuiWarning":"_94p-5u","uuiHighlight":"XEXMOf","uuiTypographySize12":"lQLuV9","uuiTypographySize14":"rA-PTu","uuiTypographySize16":"C23DyZ","daySelection":"IbF55O","fromPicker":"Cw8Fpi","toPicker":"gPUb10","bodesWrapper":"yPl4dk"};
+var css$o = {"uui-typography":"ApF0f6","hero-header":"sa7spX","promo-header":"-XeD2o","uui-critical":"Guz4Wd","uui-info":"Jeu0Pd","uui-success":"k-82q7","uui-warning":"_2SSylT","uui-highlight":"y4id8a","uui-typography-size-12":"_4GNZxp","uui-typography-size-14":"_47xpUq","uui-typography-size-16":"Yku-yE","root":"VFKRX9","container":"yNLlMq","day-selection":"YmPPoM","from-picker":"-RwAFR","to-picker":"SYet8F","bodes-wrapper":"loM9hh","blocker":"NEGsCT","uuiTypography":"ApF0f6","heroHeader":"sa7spX","promoHeader":"-XeD2o","uuiCritical":"Guz4Wd","uuiInfo":"Jeu0Pd","uuiSuccess":"k-82q7","uuiWarning":"_2SSylT","uuiHighlight":"y4id8a","uuiTypographySize12":"_4GNZxp","uuiTypographySize14":"_47xpUq","uuiTypographySize16":"Yku-yE","daySelection":"YmPPoM","fromPicker":"-RwAFR","toPicker":"SYet8F","bodesWrapper":"loM9hh"};
 
 dayjs.extend(isoWeek);
 function weekCount(displayedDate) {
@@ -3436,60 +3526,56 @@ class RangeDatePickerBody extends React.Component {
         this.getDayCX = (day) => {
             var _a, _b;
             const dayValue = day.valueOf();
-            const fromValue = ((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.selectedDate.from) ? dayjs(this.props.value.selectedDate.from).valueOf() : null;
-            const toValue = ((_b = this.props.value) === null || _b === void 0 ? void 0 : _b.selectedDate.to) ? dayjs(this.props.value.selectedDate.to).valueOf() : null;
-            const inRange = dayValue >= fromValue && dayValue <= toValue && fromValue !== toValue && fromValue && toValue;
+            const fromValue = ((_a = this.props.value.selectedDate) === null || _a === void 0 ? void 0 : _a.from) ? dayjs(this.props.value.selectedDate.from).valueOf() : null;
+            const toValue = ((_b = this.props.value.selectedDate) === null || _b === void 0 ? void 0 : _b.to) ? dayjs(this.props.value.selectedDate.to).valueOf() : null;
+            const inRange = fromValue && toValue && dayValue >= fromValue && dayValue <= toValue && fromValue !== toValue;
             const isFirst = dayValue === fromValue;
             const isLast = dayValue === toValue;
-            return [
-                inRange && uuiRangeDatePickerBody.inRange,
-                isFirst && uuiRangeDatePickerBody.firstDayInRangeWrapper,
-                !inRange && isFirst && uuiRangeDatePickerBody.lastDayInRangeWrapper,
-                isLast && uuiRangeDatePickerBody.lastDayInRangeWrapper,
-                !inRange && isLast && uuiRangeDatePickerBody.firstDayInRangeWrapper,
-                (dayValue === fromValue || dayValue === toValue) && uuiDaySelection.selectedDay,
-            ];
+            return [cx$1(inRange && uuiRangeDatePickerBody.inRange, isFirst && uuiRangeDatePickerBody.firstDayInRangeWrapper, !inRange && isFirst && uuiRangeDatePickerBody.lastDayInRangeWrapper, isLast && uuiRangeDatePickerBody.lastDayInRangeWrapper, !inRange && isLast && uuiRangeDatePickerBody.firstDayInRangeWrapper, (dayValue === fromValue || dayValue === toValue) && uuiDaySelection.selectedDay)];
         };
         this.getFromValue = () => {
             var _a;
-            return Object.assign(Object.assign({}, this.props.value), { view: this.state.activePart === 'from' ? this.props.value.view : 'DAY_SELECTION', selectedDate: (_a = this.props.value) === null || _a === void 0 ? void 0 : _a.selectedDate.from });
+            return Object.assign(Object.assign({}, this.props.value), { view: this.state.activePart === 'from' ? this.props.value.view : 'DAY_SELECTION', selectedDate: ((_a = this.props.value.selectedDate) === null || _a === void 0 ? void 0 : _a.from) || null });
         };
         this.getToValue = () => {
-            if (!this.props.value)
-                return;
-            return Object.assign(Object.assign({}, this.props.value), { view: this.state.activePart === 'to' ? this.props.value.view : 'DAY_SELECTION', displayedDate: this.props.value.displayedDate.add(1, 'month'), selectedDate: this.props.value.selectedDate.to });
+            var _a;
+            return {
+                view: this.state.activePart === 'to' ? this.props.value.view : 'DAY_SELECTION',
+                displayedDate: this.props.value.displayedDate.add(1, 'month'),
+                selectedDate: ((_a = this.props.value.selectedDate) === null || _a === void 0 ? void 0 : _a.from) || null,
+            };
         };
-        this.renderPresets = () => {
+        this.renderPresets = (presets) => {
             return (React.createElement(React.Fragment, null,
                 React.createElement("div", { className: uuiRangeDatePickerBody.separator }),
                 React.createElement(CalendarPresets, { forwardedRef: this.props.forwardedRef, onPresetSet: (presetVal) => {
+                        var _a, _b;
                         this.props.onValueChange({
                             view: 'DAY_SELECTION',
                             selectedDate: { from: dayjs(presetVal.from).format(valueFormat), to: dayjs(presetVal.to).format(valueFormat) },
                             displayedDate: dayjs(presetVal.from),
                         });
-                        this.props.changeIsOpen(false);
-                    }, presets: this.props.presets })));
+                        (_b = (_a = this.props).changeIsOpen) === null || _b === void 0 ? void 0 : _b.call(_a, false);
+                    }, presets: presets })));
         };
         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$n.daySelection, css$n.container], alignItems: "top" },
+            return (React.createElement(FlexRow, { cx: [this.props.value.view === 'DAY_SELECTION' && css$o.daySelection, css$o.container], alignItems: "top" },
                 React.createElement(FlexCell, { width: "auto" },
                     React.createElement(FlexRow, null,
-                        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$n.blocker }))),
-                        this.props.presets && this.renderPresets()),
+                        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 }),
+                            this.props.value.view !== 'DAY_SELECTION' && (React.createElement("div", { style: {
+                                    left: this.state.activePart === 'from' ? '50%' : undefined,
+                                    right: this.state.activePart === 'to' ? '50%' : undefined,
+                                }, className: css$o.blocker }))),
+                        this.props.presets && this.renderPresets(this.props.presets)),
                     this.props.renderFooter && this.props.renderFooter())));
         };
     }
     getRange(selectedDate) {
         const newRange = { from: null, to: null };
-        const currentRange = this.props.value.selectedDate;
+        const currentRange = this.props.value.selectedDate || { from: null, to: null };
         if (!this.props.filter || this.props.filter(dayjs(selectedDate))) {
             if (this.props.focusPart === 'from') {
                 if (dayjs(selectedDate).valueOf() <= dayjs(currentRange.to).valueOf()) {
@@ -3518,10 +3604,11 @@ class RangeDatePickerBody extends React.Component {
         return newRange;
     }
     setSelectedDate(selectedDate) {
+        var _a, _b;
         const range = this.getRange(selectedDate);
         this.props.onValueChange(Object.assign(Object.assign({}, this.props.value), { selectedDate: range }));
         if (range.from && range.to && this.props.focusPart === 'to') {
-            this.props.changeIsOpen(false);
+            (_b = (_a = this.props).changeIsOpen) === null || _b === void 0 ? void 0 : _b.call(_a, false);
         }
     }
     setDisplayedDateAndView(displayedDate, view, part) {
@@ -3533,18 +3620,18 @@ class RangeDatePickerBody extends React.Component {
         });
     }
     render() {
-        return (React.createElement("div", Object.assign({ className: cx$1(css$n.root, uuiDatePickerBodyBase.container, this.props.cx) }, this.props.rawProps), this.renderDatePicker()));
+        return (React.createElement("div", Object.assign({ className: cx$1(css$o.root, uuiDatePickerBodyBase.container, this.props.cx) }, this.props.rawProps), this.renderDatePicker()));
     }
 }
 
-var css$m = {"uui-typography":"RWustB","hero-header":"egX-Or","promo-header":"cr9nSQ","uui-critical":"SVYUuA","uui-info":"Fx5GIU","uui-success":"XcTI5q","uui-warning":"_4FQkvV","uui-highlight":"Nzs0hv","uui-typography-size-12":"Ld2ofW","uui-typography-size-14":"hXsL3P","uui-typography-size-16":"TZ4dMV","dropdown-container":"_7Old1D","date-input":"WW2Wso","size-24":"hGn5Gg","size-30":"czc-Z-","size-36":"_36WnMj","size-42":"c530zJ","size-48":"AslpmV","date-input-group":"KgTjSS","separator":"l4Nftf","mode-form":"_5JPAFJ","mode-cell":"uDlFAL","uuiTypography":"RWustB","heroHeader":"egX-Or","promoHeader":"cr9nSQ","uuiCritical":"SVYUuA","uuiInfo":"Fx5GIU","uuiSuccess":"XcTI5q","uuiWarning":"_4FQkvV","uuiHighlight":"Nzs0hv","uuiTypographySize12":"Ld2ofW","uuiTypographySize14":"hXsL3P","uuiTypographySize16":"TZ4dMV","dropdownContainer":"_7Old1D","dateInput":"WW2Wso","size24":"hGn5Gg","size30":"czc-Z-","size36":"_36WnMj","size42":"c530zJ","size48":"AslpmV","dateInputGroup":"KgTjSS","modeForm":"_5JPAFJ","modeCell":"uDlFAL"};
+var css$n = {"uui-typography":"Gcc5-5","hero-header":"HYhJlC","promo-header":"e2-Qgk","uui-critical":"sF7SYO","uui-info":"Y9t9cM","uui-success":"_9xIBJM","uui-warning":"pKt-iq","uui-highlight":"lDt-Pg","uui-typography-size-12":"g9vN-o","uui-typography-size-14":"V4yVlK","uui-typography-size-16":"_7qoN8F","dropdown-container":"O-7jjq","date-input":"vnE-r2","size-24":"cVVoe0","size-30":"wHMCCG","size-36":"w393Fs","size-42":"ZDucAV","size-48":"_9SEOQW","date-input-group":"l6WjbD","separator":"hsO1Cw","mode-form":"RBB8BD","mode-cell":"tGoz1b","uuiTypography":"Gcc5-5","heroHeader":"HYhJlC","promoHeader":"e2-Qgk","uuiCritical":"sF7SYO","uuiInfo":"Y9t9cM","uuiSuccess":"_9xIBJM","uuiWarning":"pKt-iq","uuiHighlight":"lDt-Pg","uuiTypographySize12":"g9vN-o","uuiTypographySize14":"V4yVlK","uuiTypographySize16":"_7qoN8F","dropdownContainer":"O-7jjq","dateInput":"vnE-r2","size24":"cVVoe0","size30":"wHMCCG","size36":"w393Fs","size42":"ZDucAV","size48":"_9SEOQW","dateInputGroup":"l6WjbD","modeForm":"RBB8BD","modeCell":"tGoz1b"};
 
 const defaultValue = { from: null, to: null };
 class RangeDatePickerComponent extends BaseRangeDatePicker {
     constructor() {
         super(...arguments);
         this.renderInput = (props) => {
-            var _a, _b;
+            var _a, _b, _c;
             if (process.env.NODE_ENV !== "production") {
                 if (this.props.size === '48') {
                     devLogger.warnAboutDeprecatedPropValue({
@@ -3556,37 +3643,68 @@ class RangeDatePickerComponent extends BaseRangeDatePicker {
                     });
                 }
             }
-            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 })));
+            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, id: (_b = this.props) === null || _b === void 0 ? void 0 : _b.id }),
+                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: (_c = this.props.rawProps) === null || _c === void 0 ? void 0 : _c.to })));
         };
     }
     renderBody(props) {
         var _a;
-        return (React.createElement(DropdownContainer, Object.assign({}, props, { cx: cx(css$m.dropdownContainer), focusLock: false }),
+        return (React.createElement(DropdownContainer, Object.assign({}, props, { cx: cx(css$n.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 }))));
     }
 }
 const RangeDatePicker = withMods(RangeDatePickerComponent);
 
-var css$l = {"root":"p7zZKY","blocker":"Qpc1UC","marker":"TqhQk-","top":"UJmWXk","bottom":"chm-Dg","left":"C-XAGx","right":"_5GUxjB","inside":"-APJyH"};
+var css$m = {"root":"NLuslP","blocker":"CFj-N9","marker":"ef5KWU","top":"Kq7HJf","bottom":"fbfNXt","left":"pp9XjC","right":"nI4BN-","inside":"ljrwC7"};
 
 function DropMarker(props) {
     return props.isDndInProgress
         ? (React.createElement(React.Fragment, null,
-            props.enableBlocker && React.createElement("div", { className: css$l.blocker }),
+            props.enableBlocker && React.createElement("div", { className: css$m.blocker }),
             React.createElement("div", { className: cx([
-                    css$l.root,
-                    css$l.marker,
-                    css$l[props.position],
+                    css$m.root,
+                    css$m.marker,
+                    css$m[props.position],
                     props === null || props === void 0 ? void 0 : props.cx,
                 ]) })))
         : null;
 }
 
-var css$k = {"uui-typography":"obZTSg","hero-header":"NcvlOy","promo-header":"FvV0zq","uui-critical":"uRH6Bg","uui-info":"JOzItb","uui-success":"la8xzo","uui-warning":"-Yi-pQ","uui-highlight":"GbpD0D","uui-typography-size-12":"W2da-i","uui-typography-size-14":"uEoapQ","uui-typography-size-16":"WaZBrw","root":"jDiTMa","size-24":"_12Mgq7","size-30":"FSag-8","size-36":"MYvyr0","size-48":"YR4Rxo","size-60":"thcbxL","uuiTypography":"obZTSg","heroHeader":"NcvlOy","promoHeader":"FvV0zq","uuiCritical":"uRH6Bg","uuiInfo":"JOzItb","uuiSuccess":"la8xzo","uuiWarning":"-Yi-pQ","uuiHighlight":"GbpD0D","uuiTypographySize12":"W2da-i","uuiTypographySize14":"uEoapQ","uuiTypographySize16":"WaZBrw","size24":"_12Mgq7","size30":"FSag-8","size36":"MYvyr0","size48":"YR4Rxo","size60":"thcbxL"};
+var css$l = {"cell":"Bx8zfY","wrapper":"wqME4r","align-widgets-top":"v16-aj","size-24":"Xcgeoi","size-30":"sPckMf","size-36":"Mt27rd","size-42":"upC8pS","size-48":"_5H3mUw","size-60":"FmydwS","align-widgets-center":"_7Fofk9","padding-12":"a5f7Mg","padding-24":"ZpJSBF","padding-left-12":"_1bOzar","padding-left-24":"EctYjs","padding-right-24":"sU566a","loading-cell":"WX5tRO","alignWidgetsTop":"v16-aj","size24":"Xcgeoi","size30":"sPckMf","size36":"Mt27rd","size42":"upC8pS","size48":"_5H3mUw","size60":"FmydwS","alignWidgetsCenter":"_7Fofk9","padding12":"a5f7Mg","padding24":"ZpJSBF","paddingLeft12":"_1bOzar","paddingLeft24":"EctYjs","paddingRight24":"sU566a","loadingCell":"WX5tRO"};
+
+function DataTableCell(props) {
+    props = Object.assign({}, props);
+    if (props.isFirstColumn) {
+        props.addons = React.createElement(DataRowAddons, Object.assign({}, 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$l.loadingCell },
+            React.createElement(TextPlaceholder, null))));
+    props.renderUnknown = props.renderUnknown
+        || (() => (React.createElement(Text, { key: "t", size: props.size !== '60' ? props.size : '48' }, "Unknown")));
+    props.renderTooltip = (tooltipProps) => React.createElement(Tooltip, Object.assign({ color: "critical" }, tooltipProps));
+    const isEditable = !!props.onValueChange;
+    props.cx = [
+        'uui-dt-vars',
+        'data-table-cell',
+        props.cx,
+        css$l.cell,
+        css$l['size-' + (props.size || '36')],
+        css$l[`padding-${props.padding || (isEditable && !props.rowProps.isLoading && '0') || '12'}`],
+        props.isFirstColumn && css$l[`padding-left-${props.padding || (isEditable && !props.rowProps.isLoading && '12') || '24'}`],
+        props.isLastColumn && css$l['padding-right-24'],
+        css$l[`align-widgets-${props.alignActions || 'top'}`],
+        (props.border || isEditable) && 'uui-dt-vertical-cell-border',
+    ];
+    return React.createElement(DataTableCell$1, Object.assign({}, props));
+}
+
+var css$k = {"uui-typography":"ULyBfz","hero-header":"hGdWXa","promo-header":"i6sj5V","uui-critical":"_95XDh-","uui-info":"X0gYe-","uui-success":"KhZHw4","uui-warning":"TDOM9h","uui-highlight":"pAahi-","uui-typography-size-12":"fgwdqC","uui-typography-size-14":"cZh83X","uui-typography-size-16":"BpahX7","root":"IVVmUR","size-24":"KSSjqJ","size-30":"SRNUed","size-36":"BVfWJw","size-48":"_7hUmjB","size-60":"IxBdkJ","uuiTypography":"ULyBfz","heroHeader":"hGdWXa","promoHeader":"i6sj5V","uuiCritical":"_95XDh-","uuiInfo":"X0gYe-","uuiSuccess":"KhZHw4","uuiWarning":"TDOM9h","uuiHighlight":"pAahi-","uuiTypographySize12":"fgwdqC","uuiTypographySize14":"cZh83X","uuiTypographySize16":"BpahX7","size24":"KSSjqJ","size30":"SRNUed","size36":"BVfWJw","size48":"_7hUmjB","size60":"IxBdkJ"};
 
 // 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.
@@ -3602,7 +3720,7 @@ const DataTableRow = withMods(DataTableRow$1, ({ borderBottom = true, size }) =>
     ];
 }, () => propsMods);
 
-var css$j = {"uui-typography":"t5XRgz","hero-header":"_2BQXCr","promo-header":"n-23BX","uui-critical":"mVrW9a","uui-info":"h5A4hG","uui-success":"az3m6L","uui-warning":"rc4ANQ","uui-highlight":"cC55E-","uui-typography-size-12":"Dz6Wcd","uui-typography-size-14":"bd0GbU","uui-typography-size-16":"fNJfa8","sorting-panel-container":"Rwq5JL","sort-active":"goXaC7","uuiTypography":"t5XRgz","heroHeader":"_2BQXCr","promoHeader":"n-23BX","uuiCritical":"mVrW9a","uuiInfo":"h5A4hG","uuiSuccess":"az3m6L","uuiWarning":"rc4ANQ","uuiHighlight":"cC55E-","uuiTypographySize12":"Dz6Wcd","uuiTypographySize14":"bd0GbU","uuiTypographySize16":"fNJfa8","sortingPanelContainer":"Rwq5JL","sortActive":"goXaC7"};
+var css$j = {"uui-typography":"qW9rk9","hero-header":"K-iY35","promo-header":"_57zjph","uui-critical":"-WzvIr","uui-info":"XDd-az","uui-success":"CKLw-X","uui-warning":"rMZn2T","uui-highlight":"z6AKeY","uui-typography-size-12":"_6PtkM0","uui-typography-size-14":"Ww9Eyy","uui-typography-size-16":"VV8qDh","sorting-panel-container":"UwExHH","sort-active":"_6LMovX","uuiTypography":"qW9rk9","heroHeader":"K-iY35","promoHeader":"_57zjph","uuiCritical":"-WzvIr","uuiInfo":"XDd-az","uuiSuccess":"CKLw-X","uuiWarning":"rMZn2T","uuiHighlight":"z6AKeY","uuiTypographySize12":"_6PtkM0","uuiTypographySize14":"Ww9Eyy","uuiTypographySize16":"VV8qDh","sortingPanelContainer":"UwExHH","sortActive":"_6LMovX"};
 
 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); }
@@ -3651,13 +3769,13 @@ const ColumnHeaderDropdownImpl = (props) => {
         }, mobilePopperModifier,
     ], []);
     const closeDropdown = useCallback(() => props.onOpenChange(false), [props.onOpenChange]);
-    return (React__default.createElement(Dropdown$1, { renderTarget: props.renderTarget, renderBody: (dropdownProps) => (React__default.createElement(MobileDropdownWrapper, { width: 360, maxWidth: "auto", title: props.title, onClose: closeDropdown },
+    return (React__default.createElement(Dropdown$1, { renderTarget: props.renderTarget, renderBody: (dropdownProps) => (React__default.createElement(MobileDropdownWrapper, { width: 280, maxWidth: "auto", 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 = {"uui-typography":"v-cmZh","hero-header":"MhPCMz","promo-header":"YjsG7x","uui-critical":"Amvms4","uui-info":"udvUgk","uui-success":"nCxowL","uui-warning":"e4goXW","uui-highlight":"HApjQH","uui-typography-size-12":"oybssJ","uui-typography-size-14":"_6z7FvU","uui-typography-size-16":"PcuCA6","cell":"VwxPNg","sort-icon":"rmclFe","dropdown-icon":"Z4WVZr","infoIcon":"fiwf2R","resizable":"FyxvA4","size-24":"WtThi-","size-30":"aDygAA","size-36":"kMc7-C","size-42":"T9WDKK","size-48":"X-c9Ek","padding-left-24":"Rl8pYO","padding-right-24":"MqIE86","caption":"FE4PHb","checkbox":"A1jTsn","icon":"JrdXpb","icon-cell":"h130Iv","align-right":"_-0TMI-","align-center":"cIC07o","tooltip-wrapper":"dj-WSi","cell-tooltip":"egkO9O","upper-case":"-CGEUo","font-size-14":"c4JEsL","resize-mark":"EsxTFq","draggable":"R9Rzjf","ghost":"tF2Uyt","is-dragged-out":"p9iols","dnd-marker-left":"osUfCd","dnd-marker-right":"_1hFAxV","cell-tooltip-wrapper":"iadl-M","cell-tooltip-text":"-jknzr","uuiTypography":"v-cmZh","heroHeader":"MhPCMz","promoHeader":"YjsG7x","uuiCritical":"Amvms4","uuiInfo":"udvUgk","uuiSuccess":"nCxowL","uuiWarning":"e4goXW","uuiHighlight":"HApjQH","uuiTypographySize12":"oybssJ","uuiTypographySize14":"_6z7FvU","uuiTypographySize16":"PcuCA6","sortIcon":"rmclFe","dropdownIcon":"Z4WVZr","size24":"WtThi-","size30":"aDygAA","size36":"kMc7-C","size42":"T9WDKK","size48":"X-c9Ek","paddingLeft24":"Rl8pYO","paddingRight24":"MqIE86","iconCell":"h130Iv","alignRight":"_-0TMI-","alignCenter":"cIC07o","tooltipWrapper":"dj-WSi","cellTooltip":"egkO9O","upperCase":"-CGEUo","fontSize14":"c4JEsL","resizeMark":"EsxTFq","isDraggedOut":"p9iols","dndMarkerLeft":"osUfCd","dndMarkerRight":"_1hFAxV","cellTooltipWrapper":"iadl-M","cellTooltipText":"-jknzr"};
+var css$i = {"uui-typography":"KqEOoo","hero-header":"TQcJ6a","promo-header":"vJiB-2","uui-critical":"GM6o-J","uui-info":"KvAS6A","uui-success":"ETiEyh","uui-warning":"iplftE","uui-highlight":"_9nghK3","uui-typography-size-12":"oNNaNC","uui-typography-size-14":"kBX8sq","uui-typography-size-16":"vjT70O","cell":"c-Irou","sort-icon":"_8D4KQM","dropdown-icon":"fea8aD","infoIcon":"t7rPM0","resizable":"Krkp5M","size-24":"rHG8RZ","size-30":"i0nLpb","size-36":"P-w3lL","size-42":"r48THR","size-48":"uv45TC","padding-left-24":"_1Bv9I-","padding-right-24":"z6JxL8","caption":"XC2JHZ","checkbox":"_0x9nLT","icon":"j7ML52","icon-cell":"m2RTma","align-right":"kCOdfN","align-center":"NOvjJe","tooltip-wrapper":"sVKO--","cell-tooltip":"AuvgjZ","upper-case":"CJdc5z","font-size-14":"bamgF2","resize-mark":"ntNxui","draggable":"sNDJFX","ghost":"_3ZPxKR","is-dragged-out":"muSeFq","dnd-marker-left":"zpZnD9","dnd-marker-right":"nu6z9E","cell-tooltip-wrapper":"kvFvIV","cell-tooltip-text":"nuzBl1","uuiTypography":"KqEOoo","heroHeader":"TQcJ6a","promoHeader":"vJiB-2","uuiCritical":"GM6o-J","uuiInfo":"KvAS6A","uuiSuccess":"ETiEyh","uuiWarning":"iplftE","uuiHighlight":"_9nghK3","uuiTypographySize12":"oNNaNC","uuiTypographySize14":"kBX8sq","uuiTypographySize16":"vjT70O","sortIcon":"_8D4KQM","dropdownIcon":"fea8aD","size24":"rHG8RZ","size30":"i0nLpb","size36":"P-w3lL","size42":"r48THR","size48":"uv45TC","paddingLeft24":"_1Bv9I-","paddingRight24":"z6JxL8","iconCell":"m2RTma","alignRight":"kCOdfN","alignCenter":"NOvjJe","tooltipWrapper":"sVKO--","cellTooltip":"AuvgjZ","upperCase":"CJdc5z","fontSize14":"bamgF2","resizeMark":"ntNxui","isDraggedOut":"muSeFq","dndMarkerLeft":"zpZnD9","dndMarkerRight":"nu6z9E","cellTooltipWrapper":"kvFvIV","cellTooltipText":"nuzBl1"};
 
 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); }
@@ -3725,19 +3843,23 @@ 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$y })))));
+                    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) })));
         this.renderResizeMark = (props) => React.createElement("div", { onMouseDown: props.onResizeStart, className: cx$1(css$i.resizeMark, uuiMarkers.draggable) });
-        this.renderCellContent = (props, dropdownProps) => (React.createElement(FlexCell, Object.assign({}, this.props.column, { minWidth: this.props.column.width, ref: (ref) => {
-                var _a;
-                props.ref(ref);
-                (_a = dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.ref) === null || _a === void 0 ? void 0 : _a.call(dropdownProps, ref);
-            }, cx: cx$1('uui-dt-vars', uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiMarkers.clickable, css$i.cell, css$i['size-' + (this.props.size || '36')], this.props.isFirstColumn && css$i['padding-left-24'], this.props.isLastColumn && css$i['padding-right-24'], this.props.column.cx, this.props.allowColumnsResizing && css$i.resizable, props.isDraggable && css$i.draggable, props.isDragGhost && css$i.ghost, props.isDraggedOut && css$i.isDraggedOut, props.isDndInProgress && css$i['dnd-marker-' + props.position]), onClick: !this.props.column.renderFilter ? props.toggleSort : dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.onClick, rawProps: Object.assign({ role: 'columnheader', 'aria-sort': this.props.sortDirection === 'asc' ? 'ascending' : this.props.sortDirection ? 'descending' : 'none' }, props.eventHandlers) }),
-            this.renderHeaderCheckbox(),
-            this.getColumnCaption(),
-            this.props.allowColumnsResizing && this.renderResizeMark(props)));
+        this.renderCellContent = (props, dropdownProps) => {
+            var _a;
+            const isResizable = (_a = this.props.column.allowResizing) !== null && _a !== void 0 ? _a : this.props.allowColumnsResizing;
+            return (React.createElement(FlexCell, Object.assign({}, this.props.column, { minWidth: this.props.column.width, ref: (ref) => {
+                    var _a;
+                    props.ref(ref);
+                    (_a = dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.ref) === null || _a === void 0 ? void 0 : _a.call(dropdownProps, ref);
+                }, cx: cx$1('uui-dt-vars', uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiMarkers.clickable, css$i.cell, css$i['size-' + (this.props.size || '36')], this.props.isFirstColumn && css$i['padding-left-24'], this.props.isLastColumn && css$i['padding-right-24'], this.props.column.cx, isResizable && css$i.resizable, props.isDraggable && css$i.draggable, props.isDragGhost && css$i.ghost, props.isDraggedOut && css$i.isDraggedOut, props.isDndInProgress && css$i['dnd-marker-' + props.position]), onClick: !this.props.column.renderFilter ? props.toggleSort : dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.onClick, rawProps: Object.assign({ role: 'columnheader', 'aria-sort': this.props.sortDirection === 'asc' ? 'ascending' : this.props.sortDirection ? 'descending' : 'none' }, props.eventHandlers) }),
+                this.renderHeaderCheckbox(),
+                this.getColumnCaption(),
+                isResizable && this.renderResizeMark(props)));
+        };
         this.renderCellWithFilter = (props) => (React.createElement(ColumnHeaderDropdown, { isOpen: this.state.isDropdownOpen, isSortable: this.props.column.isSortable, renderTarget: (dropdownProps) => this.renderCellContent(props, dropdownProps), renderFilter: this.props.renderFilter, onSort: this.props.onSort, sortDirection: this.props.sortDirection, onOpenChange: (isDropdownOpen) => this.setState({ isDropdownOpen }), title: this.props.column.caption }));
     }
     render() {
@@ -3745,7 +3867,7 @@ class DataTableHeaderCell extends React.Component {
     }
 }
 
-var css$h = {"uui-typography":"okGjrx","hero-header":"u8iFfu","promo-header":"Q3gJfD","uui-critical":"q2ekLW","uui-info":"KX4x6x","uui-success":"JRFDbj","uui-warning":"EH-C2x","uui-highlight":"GKcFIc","uui-typography-size-12":"n6Y6Sq","uui-typography-size-14":"d-QB3k","uui-typography-size-16":"MXtq3b","header-cell":"VMuKh7","config-icon":"bnNlco","uuiTypography":"okGjrx","heroHeader":"u8iFfu","promoHeader":"Q3gJfD","uuiCritical":"q2ekLW","uuiInfo":"KX4x6x","uuiSuccess":"JRFDbj","uuiWarning":"EH-C2x","uuiHighlight":"GKcFIc","uuiTypographySize12":"n6Y6Sq","uuiTypographySize14":"d-QB3k","uuiTypographySize16":"MXtq3b","headerCell":"VMuKh7","configIcon":"bnNlco"};
+var css$h = {"uui-typography":"LAWGRL","hero-header":"falTc0","promo-header":"Sa6Fei","uui-critical":"msLNAE","uui-info":"b-RREi","uui-success":"_4R6DWY","uui-warning":"HdjbTb","uui-highlight":"_9-D96z","uui-typography-size-12":"jsDkLT","uui-typography-size-14":"Ryf5fJ","uui-typography-size-16":"S7QTqe","header-cell":"scmV7q","config-icon":"Uxd80W","uuiTypography":"LAWGRL","heroHeader":"falTc0","promoHeader":"Sa6Fei","uuiCritical":"msLNAE","uuiInfo":"b-RREi","uuiSuccess":"_4R6DWY","uuiWarning":"HdjbTb","uuiHighlight":"_9-D96z","uuiTypographySize12":"jsDkLT","uuiTypographySize14":"Ryf5fJ","uuiTypographySize16":"S7QTqe","headerCell":"scmV7q","configIcon":"Uxd80W"};
 
 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); }
@@ -3767,7 +3889,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 = {"uui-typography":"CSsTHI","hero-header":"d61UFS","promo-header":"DZJp2Y","uui-critical":"U9ccME","uui-info":"_5YyiK3","uui-success":"GW3x7D","uui-warning":"VwhnvJ","uui-highlight":"HQnrTl","uui-typography-size-12":"r1D-UN","uui-typography-size-14":"vn49hE","uui-typography-size-16":"Lc1Ihi","main-panel":"gb1pqH","group-title":"Fhb09D","group-title-text":"_4I4zKB","group-title-badge":"qCtLxl","group-items":"y6FV8V","no-data":"LZt0f6","h-divider":"FMhGsm","search-area":"TWIefV","uuiTypography":"CSsTHI","heroHeader":"d61UFS","promoHeader":"DZJp2Y","uuiCritical":"U9ccME","uuiInfo":"_5YyiK3","uuiSuccess":"GW3x7D","uuiWarning":"VwhnvJ","uuiHighlight":"HQnrTl","uuiTypographySize12":"r1D-UN","uuiTypographySize14":"vn49hE","uuiTypographySize16":"Lc1Ihi","mainPanel":"gb1pqH","groupTitle":"Fhb09D","groupTitleText":"_4I4zKB","groupTitleBadge":"qCtLxl","groupItems":"y6FV8V","noData":"LZt0f6","hDivider":"FMhGsm","searchArea":"TWIefV"};
+var styles$1 = {"uui-typography":"TT20jg","hero-header":"AS8fJB","promo-header":"Rejx-H","uui-critical":"-Xcww-","uui-info":"u-JpkZ","uui-success":"hheIP6","uui-warning":"QsBwJb","uui-highlight":"YhlEYE","uui-typography-size-12":"LcGgne","uui-typography-size-14":"iItSq1","uui-typography-size-16":"gsLDLo","main-panel":"nqsKpP","group-title":"CepeuQ","group-title-text":"Ck75kx","group-title-badge":"tYAVN2","group-items":"DrOjx9","no-data":"tFM7VN","h-divider":"v1enP7","search-area":"Ssy6YG","uuiTypography":"TT20jg","heroHeader":"AS8fJB","promoHeader":"Rejx-H","uuiCritical":"-Xcww-","uuiInfo":"u-JpkZ","uuiSuccess":"hheIP6","uuiWarning":"QsBwJb","uuiHighlight":"YhlEYE","uuiTypographySize12":"LcGgne","uuiTypographySize14":"iItSq1","uuiTypographySize16":"gsLDLo","mainPanel":"nqsKpP","groupTitle":"CepeuQ","groupTitleText":"Ck75kx","groupTitleBadge":"tYAVN2","groupItems":"DrOjx9","noData":"tFM7VN","hDivider":"v1enP7","searchArea":"Ssy6YG"};
 
 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); }
@@ -3844,7 +3966,7 @@ function PinIconButton(props) {
             React.createElement(IconButton, { icon: pinIcon, onClick: pinClickHandler, isDisabled: isPinnedAlways, color: isPinned ? 'info' : undefined }))));
 }
 
-var styles = {"uui-typography":"dorZuX","hero-header":"DQGaSY","promo-header":"uGTuNy","uui-critical":"wTxt29","uui-info":"nqZdh4","uui-success":"XUjzJT","uui-warning":"qxIlOc","uui-highlight":"OdZM-u","uui-typography-size-12":"XC-UkC","uui-typography-size-14":"_1XpqWZ","uui-typography-size-16":"h2MuN0","row-wrapper":"sIk0X9","not-pinned":"XvDwDB","pin-icon-button":"cckClo","checkbox":"t0gHS9","drag-handle":"OQdnXq","dnd-disabled":"CUv2Oe","uuiTypography":"dorZuX","heroHeader":"DQGaSY","promoHeader":"uGTuNy","uuiCritical":"wTxt29","uuiInfo":"nqZdh4","uuiSuccess":"XUjzJT","uuiWarning":"qxIlOc","uuiHighlight":"OdZM-u","uuiTypographySize12":"XC-UkC","uuiTypographySize14":"_1XpqWZ","uuiTypographySize16":"h2MuN0","rowWrapper":"sIk0X9","notPinned":"XvDwDB","pinIconButton":"cckClo","dragHandle":"OQdnXq","dndDisabled":"CUv2Oe"};
+var styles = {"uui-typography":"XZFZl5","hero-header":"xr3X1z","promo-header":"DkWXRk","uui-critical":"GTDPzW","uui-info":"MwhLbs","uui-success":"RxyMpg","uui-warning":"_0fPeFC","uui-highlight":"L4HsyU","uui-typography-size-12":"Q6pjfi","uui-typography-size-14":"Xm1Un6","uui-typography-size-16":"JGHfF1","row-wrapper":"_4FcG7j","not-pinned":"_5lkuzB","pin-icon-button":"F0jr9Y","checkbox":"iP92nV","drag-handle":"O-By6q","dnd-disabled":"Uf-OJo","uuiTypography":"XZFZl5","heroHeader":"xr3X1z","promoHeader":"DkWXRk","uuiCritical":"GTDPzW","uuiInfo":"MwhLbs","uuiSuccess":"RxyMpg","uuiWarning":"_0fPeFC","uuiHighlight":"L4HsyU","uuiTypographySize12":"Q6pjfi","uuiTypographySize14":"Xm1Un6","uuiTypographySize16":"JGHfF1","rowWrapper":"_4FcG7j","notPinned":"_5lkuzB","pinIconButton":"F0jr9Y","dragHandle":"O-By6q","dndDisabled":"Uf-OJo"};
 
 const ColumnRow = React.memo(function ColumnRow(props) {
     const { column } = props;
@@ -3929,7 +4051,7 @@ function ColumnsConfigurationModal(props) {
                 noVisibleColumns ? (React.createElement(Tooltip, { content: i18n$1.enableAtLeastOneColumnMessage, placement: "top-end", color: "critical" }, applyButton)) : (applyButton)))));
 }
 
-var css$g = {"listContainer":"zq-iVu","header":"POV691","group":"zNuoe9","stickyHeader":"BOnP7H"};
+var css$g = {"listContainer":"_9882Ng","header":"AwSNRA","group":"JeyKpk","stickyHeader":"_4s8BtD"};
 
 const getChildrenAndRest = (row, rows) => {
     const firstNotChildIndex = rows.findIndex((other) => other.depth < row.depth || (row.depth === other.depth && other.isPinned));
@@ -3995,7 +4117,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#clfubvwrt4cika7u_a)"
+    clipPath: "url(#jdufip20r8eubn779_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"
@@ -4016,7 +4138,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: "clfubvjuh1dcx19ii_b",
+    id: "jdufip9x0xejcqsc_b",
     style: {
       maskType: "alpha"
     },
@@ -4029,7 +4151,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(#clfubvjuh1dcx19ii_b)",
+    mask: "url(#jdufip9x0xejcqsc_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
@@ -4115,7 +4237,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: "clfubvwrt4cika7u_a"
+    id: "jdufip20r8eubn779_a"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
@@ -4124,7 +4246,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
 };
 var ForwardRef$9 = /*#__PURE__*/forwardRef(SvgEmptyTable);
 
-var css$f = {"sticky-header":"dfMcGX","table":"v3FgE7","no-results":"T251Kf","no-results-icon":"t66uqq","no-results-title":"XXxtz1","stickyHeader":"dfMcGX","noResults":"T251Kf","noResultsIcon":"t66uqq","noResultsTitle":"XXxtz1"};
+var css$f = {"sticky-header":"sapEod","table":"_2EYfig","no-results":"BJBATb","no-results-icon":"crLhs5","no-results-title":"bxvPfk","stickyHeader":"sapEod","noResults":"BJBATb","noResultsIcon":"crLhs5","noResultsTitle":"bxvPfk"};
 
 function DataTable(props) {
     var _a;
@@ -4167,16 +4289,17 @@ function DataTable(props) {
         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'), isLoading: props.isReloading, rowsSelector: "[role=row]", rawProps: {
-                role: 'table',
-                'aria-colcount': columns.length,
-                'aria-rowcount': props.rowsCount,
-            } })));
+        React.createElement(DataTableFocusProvider, { dataTableFocusManager: props.dataTableFocusManager },
+            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":"_0FXRpw"};
+var css$e = {"root":"BULoA8"};
 
-var css$d = {"root":"K8P9r0","burger-content":"pF1P54","burgerContent":"pF1P54"};
+var css$d = {"root":"D-s6bp","burger-content":"blkUWp","burgerContent":"blkUWp"};
 
 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); }
@@ -4243,7 +4366,7 @@ var SvgTriangle = function SvgTriangle(props, ref) {
 };
 var ForwardRef$6 = /*#__PURE__*/forwardRef(SvgTriangle);
 
-var css$c = {"uui-typography":"RwIaCv","hero-header":"hkJLfm","promo-header":"_3dlEM3","uui-critical":"bFfpAq","uui-info":"wAUR89","uui-success":"nGhCwb","uui-warning":"AxpB-c","uui-highlight":"_-6MiKX","uui-typography-size-12":"KBLhr1","uui-typography-size-14":"KMqdey","uui-typography-size-16":"y7o-hk","root":"_-7jnvI","button-primary":"BjytvW","button-secondary":"EdiVDK","hasIcon":"K3GzyV","dropdown":"FTMOP7","uuiTypography":"RwIaCv","heroHeader":"hkJLfm","promoHeader":"_3dlEM3","uuiCritical":"bFfpAq","uuiInfo":"wAUR89","uuiSuccess":"nGhCwb","uuiWarning":"AxpB-c","uuiHighlight":"_-6MiKX","uuiTypographySize12":"KBLhr1","uuiTypographySize14":"KMqdey","uuiTypographySize16":"y7o-hk","buttonPrimary":"BjytvW","buttonSecondary":"EdiVDK"};
+var css$c = {"uui-typography":"Z3x-BM","hero-header":"y3V-v5","promo-header":"AJuYqN","uui-critical":"-nIBQb","uui-info":"VoH3Xo","uui-success":"_3Am2dN","uui-warning":"q2mQfv","uui-highlight":"B1jPMy","uui-typography-size-12":"_0SvSl5","uui-typography-size-14":"_8Y8JM7","uui-typography-size-16":"SEN7wx","root":"S87UWs","button-primary":"NP1Y6w","button-secondary":"jTC2ri","hasIcon":"-KCmGd","dropdown":"o7RykL","uuiTypography":"Z3x-BM","heroHeader":"y3V-v5","promoHeader":"AJuYqN","uuiCritical":"-nIBQb","uuiInfo":"VoH3Xo","uuiSuccess":"_3Am2dN","uuiWarning":"q2mQfv","uuiHighlight":"B1jPMy","uuiTypographySize12":"_0SvSl5","uuiTypographySize14":"_8Y8JM7","uuiTypographySize16":"SEN7wx","buttonPrimary":"NP1Y6w","buttonSecondary":"jTC2ri"};
 
 const BurgerButton = withMods(Button$1, (props) => [
     css$c.root,
@@ -4300,13 +4423,13 @@ var SvgMenuInputCancel = function SvgMenuInputCancel(props, ref) {
 };
 var ForwardRef$5 = /*#__PURE__*/forwardRef(SvgMenuInputCancel);
 
-var css$b = {"search-input":"ZnMbuC","searchInput":"ZnMbuC"};
+var css$b = {"search-input":"NCxjSp","searchInput":"NCxjSp"};
 
 function BurgerSearch(props) {
     return (React.createElement(TextInput$1, { cx: cx(css$b.searchInput, 'uui-main_menu-burger-search'), iconPosition: "left", icon: ForwardRef$14, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$5 }));
 }
 
-var css$a = {"root":"_0jXZiJ","group-header":"uBt2qF","group-name":"izW1E7","line":"MrfLof","groupHeader":"uBt2qF","groupName":"izW1E7"};
+var css$a = {"root":"Mn50b5","group-header":"D-NFwz","group-name":"_7TdB4H","line":"YfPxVB","groupHeader":"D-NFwz","groupName":"_7TdB4H"};
 
 function BurgerGroupHeader(props) {
     return (React.createElement("div", { className: cx(css$a.root, css$a.groupHeader, 'uui-burger-group-header') },
@@ -4314,7 +4437,7 @@ function BurgerGroupHeader(props) {
         React.createElement("span", { className: css$a.groupName }, props.caption)));
 }
 
-var css$9 = {"uui-typography":"_-7vioi","hero-header":"_7hj5UL","promo-header":"WP2lWW","uui-critical":"HdwmOJ","uui-info":"OOglLx","uui-success":"b2lmLX","uui-warning":"UlC999","uui-highlight":"fBxefx","uui-typography-size-12":"eIwDw-","uui-typography-size-14":"Phewdb","uui-typography-size-16":"-DfFEv","root":"H1sv-s","type-primary":"Heeh1f","type-secondary":"aoaqqy","uuiTypography":"_-7vioi","heroHeader":"_7hj5UL","promoHeader":"WP2lWW","uuiCritical":"HdwmOJ","uuiInfo":"OOglLx","uuiSuccess":"b2lmLX","uuiWarning":"UlC999","uuiHighlight":"fBxefx","uuiTypographySize12":"eIwDw-","uuiTypographySize14":"Phewdb","uuiTypographySize16":"-DfFEv","typePrimary":"Heeh1f","typeSecondary":"aoaqqy"};
+var css$9 = {"uui-typography":"tsXsIp","hero-header":"sGVNVR","promo-header":"M0g-Mx","uui-critical":"gOEA7O","uui-info":"OrROWF","uui-success":"_0EvuXS","uui-warning":"PlnGFn","uui-highlight":"_22Anf4","uui-typography-size-12":"EwtiOG","uui-typography-size-14":"bfKwSj","uui-typography-size-16":"LKoX54","root":"RL38By","type-primary":"_8kGjpz","type-secondary":"kXJCF9","uuiTypography":"tsXsIp","heroHeader":"sGVNVR","promoHeader":"M0g-Mx","uuiCritical":"gOEA7O","uuiInfo":"OrROWF","uuiSuccess":"_0EvuXS","uuiWarning":"PlnGFn","uuiHighlight":"_22Anf4","uuiTypographySize12":"EwtiOG","uuiTypographySize14":"bfKwSj","uuiTypographySize16":"LKoX54","typePrimary":"_8kGjpz","typeSecondary":"kXJCF9"};
 
 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); }
@@ -4334,7 +4457,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":"TgEt0u","dropdownBody":"TgEt0u"};
+var css$8 = {"dropdown-body":"O1NpHx","dropdownBody":"O1NpHx"};
 
 class MainMenuDropdown extends React.Component {
     render() {
@@ -4388,12 +4511,12 @@ var SvgGlobalMenu = function SvgGlobalMenu(props, ref) {
 };
 var ForwardRef$3 = /*#__PURE__*/forwardRef(SvgGlobalMenu);
 
-var css$7 = {"global-menu-btn":"UW6sf8","globalMenuIcon":"MLxKKA","globalMenuBtn":"UW6sf8"};
+var css$7 = {"global-menu-btn":"QQ-fbr","globalMenuIcon":"bKjc3p","globalMenuBtn":"QQ-fbr"};
 
 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":"gu6lHP","open":"DnZlDg"};
+var css$6 = {"container":"ocq0c6","open":"j1mavv"};
 
 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 }),
@@ -4401,18 +4524,18 @@ const MainMenuAvatar = React.forwardRef((props, ref) => (React.createElement("bu
     props.isDropdown && (React.createElement("div", null,
         React.createElement(IconContainer, { icon: ForwardRef$1a, flipY: props.isOpen }))))));
 
-var css$5 = {"search-input":"uii3Ie","searchInput":"uii3Ie"};
+var css$5 = {"search-input":"nVqUZe","searchInput":"nVqUZe"};
 
 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$14, 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":"Oh6S-W"};
+var css$4 = {"container":"_1ERubV"};
 
 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":"M-5JK0"};
+var css$3 = {"root":"AaVf8p"};
 
 const Anchor = withMods(Anchor$1, () => [css$3.root]);
 
@@ -4469,7 +4592,7 @@ var SvgShape = function SvgShape(props, ref) {
 };
 var ForwardRef$2 = /*#__PURE__*/forwardRef(SvgShape);
 
-var css$2 = {"root":"oSiqVn","drop-start":"UE3y-D","drop-over":"b8raor","link":"Rz9JWS","drop-area":"Eksbqd","icon-blue":"PawBjv","dropStart":"UE3y-D","dropOver":"b8raor","dropArea":"Eksbqd","iconBlue":"PawBjv"};
+var css$2 = {"root":"QrWkbG","drop-start":"BHCWUV","drop-over":"d7h0Ta","link":"DJh969","drop-area":"sfRo56","icon-blue":"bELkH7","dropStart":"BHCWUV","dropOver":"d7h0Ta","dropArea":"sfRo56","iconBlue":"bELkH7"};
 
 class DropSpot extends React.Component {
     constructor() {
@@ -4493,9 +4616,9 @@ class DropSpot extends React.Component {
     }
 }
 
-var css$1 = {"root":"Zh0Mdd","file-name":"-WHkZX","default-color":"CwI1FV","doc-color":"_8-rfR3","xls-color":"h7Qt5F","pdf-color":"_5bnyfR","movie-color":"W7F1Qt","img-color":"CbKxB9","mov-color":"QHa-bb","error-block":"RoG9vE","icons-block":"KNj5OE","fileName":"-WHkZX","defaultColor":"CwI1FV","docColor":"_8-rfR3","xlsColor":"h7Qt5F","pdfColor":"_5bnyfR","movieColor":"W7F1Qt","imgColor":"CbKxB9","movColor":"QHa-bb","errorBlock":"RoG9vE","iconsBlock":"KNj5OE"};
+var css$1 = {"root":"mQqmvX","file-name":"OEJNaK","default-color":"wmqfHy","doc-color":"sqNMxF","xls-color":"wEbA2M","pdf-color":"IWxNv5","movie-color":"_3YJaam","img-color":"Yd6luC","mov-color":"B9eaQc","error-block":"Fiukdl","icons-block":"zgSr0r","fileName":"OEJNaK","defaultColor":"wmqfHy","docColor":"sqNMxF","xlsColor":"wEbA2M","pdfColor":"IWxNv5","movieColor":"_3YJaam","imgColor":"Yd6luC","movColor":"B9eaQc","errorBlock":"Fiukdl","iconsBlock":"zgSr0r"};
 
-var css = {"root":"BFXhPo"};
+var css = {"root":"UAiMdl"};
 
 const SvgCircleProgress = React.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
@@ -4612,5 +4735,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, 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, allIconColors, allLinkButtonColors, applyBadgeMods, applyButtonMods, applyCheckboxMods, applyDateSelectionMods, applyInputAddonMods, applyNumericInputMods, applyProgressBarMods, applySliderMods, applySpinnerMods, applySwitchMods, applyTagMods, applyTextAreaMods, applyTextInputMods, defaultBadgeFill, defaultBadgeSize, 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, DataRowAddons, DataRowsContainer, DataTable, DataTableCell, DataTableHeaderCell, DataTableHeaderRow, DataTableRow, DatePicker, DatePickerBody, DropMarker, DropSpot, Dropdown, DropdownContainer, DropdownMenuBody, DropdownMenuButton, DropdownMenuHeader, DropdownMenuSplitter, DropdownMenuSwitchButton, DropdownSubMenu, 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, applyDateSelectionMods, defaultPredicates, getHighlightRanges, getHighlightedSearchMatches, getTextClasses, i18n, propsMods, rangeDatePickerPresets, renderCell, renderDropMarkers, useColumnsWithFilters, useForm, uuiDatePickerBody, weekCount };
 //# sourceMappingURL=index.esm.js.map