@epam/uui 5.4.3 → 5.5.1

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":"y8-9n1","size-24":"qDoo-4","size-18":"_9d7-bt","size-12":"kxMBc-","size24":"qDoo-4","size18":"_9d7-bt","size12":"kxMBc-"};
 
 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":"OouLE2","hero-header":"sCwdYr","promo-header":"Y9OAXz","uui-critical":"hHE3Zz","uui-info":"iYhc6I","uui-success":"-JhAmX","uui-warning":"PFVWV7","uui-highlight":"Y-4Zii","uui-typography-size-12":"X-ct5j","uui-typography-size-14":"NjidLb","uui-typography-size-16":"HCk0Xn","root":"cXteIc","uuiTypography":"OouLE2","heroHeader":"sCwdYr","promoHeader":"Y9OAXz","uuiCritical":"hHE3Zz","uuiInfo":"iYhc6I","uuiSuccess":"-JhAmX","uuiWarning":"PFVWV7","uuiHighlight":"Y-4Zii","uuiTypographySize12":"X-ct5j","uuiTypographySize14":"NjidLb","uuiTypographySize16":"HCk0Xn"};
 
-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":"AVt6C9"};
 
-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":"JjrN8P"};
 
 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":"_2rMU9W","hero-header":"TfTpGJ","promo-header":"BTezW2","uui-critical":"pU2uXH","uui-info":"RKimD7","uui-success":"Ul4IRj","uui-warning":"CPcUl0","uui-highlight":"yubZWU","uui-typography-size-12":"_4sVBqw","uui-typography-size-14":"jYmJMT","uui-typography-size-16":"IX2cUA","root":"p67Lb8","withNotify":"WUP1YN","size-36":"wwVnOs","size-48":"JWPbrq","size-60":"DcJBPD","uuiTypography":"_2rMU9W","heroHeader":"TfTpGJ","promoHeader":"BTezW2","uuiCritical":"pU2uXH","uuiInfo":"RKimD7","uuiSuccess":"Ul4IRj","uuiWarning":"CPcUl0","uuiHighlight":"yubZWU","uuiTypographySize12":"_4sVBqw","uuiTypographySize14":"jYmJMT","uuiTypographySize16":"IX2cUA","size36":"wwVnOs","size48":"JWPbrq","size60":"DcJBPD"};
 
 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":"ZsH6tf","hero-header":"nFgALB","promo-header":"pdlG9I","uui-critical":"_9MGkW4","uui-info":"uxWh3A","uui-success":"M-Fdrn","uui-warning":"E4o81e","uui-highlight":"Rp2-7q","uui-typography-size-12":"_50CmHv","uui-typography-size-14":"RzMEl1","uui-typography-size-16":"-zbJaG","root":"aBY-jc","uuiTypography":"ZsH6tf","heroHeader":"nFgALB","promoHeader":"pdlG9I","uuiCritical":"_9MGkW4","uuiInfo":"uxWh3A","uuiSuccess":"M-Fdrn","uuiWarning":"E4o81e","uuiHighlight":"Rp2-7q","uuiTypographySize12":"_50CmHv","uuiTypographySize14":"RzMEl1","uuiTypographySize16":"-zbJaG"};
 
 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":"XAGH2h","hero-header":"JLfxtW","promo-header":"Hjegcd","uui-critical":"UJfcWv","uui-info":"YZjiAw","uui-success":"_6-peKN","uui-warning":"f36TOU","uui-highlight":"_18M7io","uui-typography-size-12":"-h-xzi","uui-typography-size-14":"p3qQPU","uui-typography-size-16":"acJbxT","root":"iiorG-","size-18":"_5sNwdh","size-12":"DRv9EB","mode-cell":"zKBcz-","uuiTypography":"XAGH2h","heroHeader":"JLfxtW","promoHeader":"Hjegcd","uuiCritical":"UJfcWv","uuiInfo":"YZjiAw","uuiSuccess":"_6-peKN","uuiWarning":"f36TOU","uuiHighlight":"_18M7io","uuiTypographySize12":"-h-xzi","uuiTypographySize14":"p3qQPU","uuiTypographySize16":"acJbxT","size18":"_5sNwdh","size12":"DRv9EB","modeCell":"zKBcz-"};
 
 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":"pi8UIB","hero-header":"kZYshV","promo-header":"acIblc","uui-critical":"b4CHH0","uui-info":"_7EeKrY","uui-success":"rirphd","uui-warning":"q7kRyL","uui-highlight":"Vf2JtG","uui-typography-size-12":"x-YkN-","uui-typography-size-14":"Nl-Wcy","uui-typography-size-16":"YKAwbf","root":"XNffCv","size-18":"j3-20H","size-12":"_2R6kTu","uuiTypography":"pi8UIB","heroHeader":"kZYshV","promoHeader":"acIblc","uuiCritical":"b4CHH0","uuiInfo":"_7EeKrY","uuiSuccess":"rirphd","uuiWarning":"q7kRyL","uuiHighlight":"Vf2JtG","uuiTypographySize12":"x-YkN-","uuiTypographySize14":"Nl-Wcy","uuiTypographySize16":"YKAwbf","size18":"j3-20H","size12":"_2R6kTu"};
 
 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":"_5GxjSY","size-12":"SRSOv1","size-18":"MnCTLv","size-24":"_3nkfHu","size12":"SRSOv1","size18":"MnCTLv","size24":"_3nkfHu"};
 
 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":"BNNK8D","hero-header":"NXHLrr","promo-header":"w-s00O","uui-critical":"UIaGCk","uui-info":"WCytJk","uui-success":"_9FbaKQ","uui-warning":"c2uuR3","uui-highlight":"-PpRIW","uui-typography-size-12":"fIM44-","uui-typography-size-14":"Hq9s7a","uui-typography-size-16":"TF6Wah","root":"osfugy","mode-form":"EznVE7","mode-inline":"d0xvAa","mode-cell":"kQTTlK","size-24":"kDR60g","size-30":"QxK1WP","size-36":"BdYmNu","size-42":"w0PRX3","size-48":"xNQRzx","size-60":"RZI1Z3","uuiTypography":"BNNK8D","heroHeader":"NXHLrr","promoHeader":"w-s00O","uuiCritical":"UIaGCk","uuiInfo":"WCytJk","uuiSuccess":"_9FbaKQ","uuiWarning":"c2uuR3","uuiHighlight":"-PpRIW","uuiTypographySize12":"fIM44-","uuiTypographySize14":"Hq9s7a","uuiTypographySize16":"TF6Wah","modeForm":"EznVE7","modeInline":"d0xvAa","modeCell":"kQTTlK","size24":"kDR60g","size30":"QxK1WP","size36":"BdYmNu","size42":"w0PRX3","size48":"xNQRzx","size60":"RZI1Z3"};
 
-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":"uN5x3I"};
 
-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":"PU1grL","hero-header":"Xpj9No","promo-header":"ZAarfW","uui-critical":"Uf8JUI","uui-info":"s3KGf6","uui-success":"tzM-dH","uui-warning":"_41fK1w","uui-highlight":"NxX6JU","uui-typography-size-12":"SanRTh","uui-typography-size-14":"M-GpZJ","uui-typography-size-16":"XBl70R","root":"_7cBJlC","size-24":"cryZcE","size-30":"xg9O1v","size-36":"ECC3r6","size-42":"XhGNDL","size-48":"q0eNxi","mode-form":"_9hwqxD","mode-cell":"PbP8st","uuiTypography":"PU1grL","heroHeader":"Xpj9No","promoHeader":"ZAarfW","uuiCritical":"Uf8JUI","uuiInfo":"s3KGf6","uuiSuccess":"tzM-dH","uuiWarning":"_41fK1w","uuiHighlight":"NxX6JU","uuiTypographySize12":"SanRTh","uuiTypographySize14":"M-GpZJ","uuiTypographySize16":"XBl70R","size24":"cryZcE","size30":"xg9O1v","size36":"ECC3r6","size42":"XhGNDL","size48":"q0eNxi","modeForm":"_9hwqxD","modeCell":"PbP8st"};
 
-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":"AKJsWj","hero-header":"B7Zl7y","promo-header":"vpZZj4","uui-critical":"_8qRZho","uui-info":"b4ONtr","uui-success":"AOtmS8","uui-warning":"CniXGJ","uui-highlight":"Vbtqrg","uui-typography-size-12":"WURxfb","uui-typography-size-14":"DbY1mb","uui-typography-size-16":"HiWwot","root":"A-9vGL","mode-form":"ssd0Tu","mode-cell":"sXBR6G","mode-inline":"q76i-4","size-24":"-LZBcg","size-30":"-eLm23","size-36":"gYfiJq","size-42":"_23mJx7","size-48":"Njy4HU","uuiTypography":"AKJsWj","heroHeader":"B7Zl7y","promoHeader":"vpZZj4","uuiCritical":"_8qRZho","uuiInfo":"b4ONtr","uuiSuccess":"AOtmS8","uuiWarning":"CniXGJ","uuiHighlight":"Vbtqrg","uuiTypographySize12":"WURxfb","uuiTypographySize14":"DbY1mb","uuiTypographySize16":"HiWwot","modeForm":"ssd0Tu","modeCell":"sXBR6G","modeInline":"q76i-4","size24":"-LZBcg","size30":"-eLm23","size36":"gYfiJq","size42":"_23mJx7","size48":"Njy4HU"};
 
-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":"pyu-92"};
 
 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":"WNgUfd","timepicker-input":"UOpQxV","timepickerInput":"UOpQxV"};
 
-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":"X9VhII"};
 
 function applyInputAddonMods() {
     return [
-        css$$.root,
+        css$1a.root,
     ];
 }
 const InputAddon = withMods(InputAddon$1, applyInputAddonMods);
 
-var css$_ = {"root":"jAInJS"};
+var css$19 = {"root":"AuR71K"};
 
 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":"_5eGIcg"};
+
+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":"_7k9-Fg","hero-header":"mLZXmI","promo-header":"ViJfk7","uui-critical":"YnS1vb","uui-info":"zdRqGi","uui-success":"Aax0qe","uui-warning":"qprMVJ","uui-highlight":"_1QKHfx","uui-typography-size-12":"iL5M4z","uui-typography-size-14":"LhMlYr","uui-typography-size-16":"_0RI4-I","root":"wba7p3","uuiTypography":"_7k9-Fg","heroHeader":"mLZXmI","promoHeader":"ViJfk7","uuiCritical":"YnS1vb","uuiInfo":"zdRqGi","uuiSuccess":"Aax0qe","uuiWarning":"qprMVJ","uuiHighlight":"_1QKHfx","uuiTypographySize12":"iL5M4z","uuiTypographySize14":"LhMlYr","uuiTypographySize16":"_0RI4-I"};
 
 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":"zs7uoJ","hero-header":"WTj-TQ","promo-header":"EQ8UeF","uui-critical":"_2UjAZT","uui-info":"XC6OJ-","uui-success":"vi6TAl","uui-warning":"qT5LWK","uui-highlight":"ihb3YW","uui-typography-size-12":"qSHoh7","uui-typography-size-14":"qercwt","uui-typography-size-16":"Qzg-fD","root":"EdFKi2","uuiTypography":"zs7uoJ","heroHeader":"WTj-TQ","promoHeader":"EQ8UeF","uuiCritical":"_2UjAZT","uuiInfo":"XC6OJ-","uuiSuccess":"vi6TAl","uuiWarning":"qT5LWK","uuiHighlight":"ihb3YW","uuiTypographySize12":"qSHoh7","uuiTypographySize14":"qercwt","uuiTypographySize16":"Qzg-fD"};
 
 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":"TKyp8H","icon-wrapper":"GUVu0V","alert-wrapper":"gVry8R","size-48":"-bMQTo","size-36":"jKLOFj","action-wrapper":"qQBfEZ","action-icon":"f3PRDg","action-link":"spMRYu","close-icon":"VALNgI","main-path":"L5JyPc","content":"EX8z2I","iconWrapper":"GUVu0V","alertWrapper":"gVry8R","size48":"-bMQTo","size36":"jKLOFj","actionWrapper":"qQBfEZ","actionIcon":"f3PRDg","actionLink":"spMRYu","closeIcon":"VALNgI","mainPath":"L5JyPc"};
 
-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":"Yf9L-2","hero-header":"b5cqy3","promo-header":"_8Tpz9j","uui-critical":"qvXSUY","uui-info":"_1p6q6I","uui-success":"_3CgNse","uui-warning":"Yj9Bxn","uui-highlight":"_71im6Q","uui-typography-size-12":"Dn98-7","uui-typography-size-14":"PqTyd3","uui-typography-size-16":"igX-QT","root":"_3DOjFG","body-root":"Fvl-rt","submenu-root-item":"nIuE06","icon-after":"ivsPn5","icon-check":"Q4OsSa","splitter-root":"frZCA3","splitter":"ccJ7nB","header-root":"exKXYt","item-root":"-Sagmw","icon":"D3hkFA","link":"-wr5mZ","indent":"_9h4S-g","uuiTypography":"Yf9L-2","heroHeader":"b5cqy3","promoHeader":"_8Tpz9j","uuiCritical":"qvXSUY","uuiInfo":"_1p6q6I","uuiSuccess":"_3CgNse","uuiWarning":"Yj9Bxn","uuiHighlight":"_71im6Q","uuiTypographySize12":"Dn98-7","uuiTypographySize14":"PqTyd3","uuiTypographySize16":"igX-QT","bodyRoot":"Fvl-rt","submenuRootItem":"nIuE06","iconAfter":"ivsPn5","iconCheck":"Q4OsSa","splitterRoot":"frZCA3","headerRoot":"exKXYt","itemRoot":"-Sagmw"};
 
 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":"TXV39U","hero-header":"VcrPvd","promo-header":"sz6s0l","uui-critical":"S-mSb3","uui-info":"Rqx1mj","uui-success":"aEVr46","uui-warning":"UEFdOk","uui-highlight":"_9XO78z","uui-typography-size-12":"Fgar9b","uui-typography-size-14":"P1lvnE","uui-typography-size-16":"K5MtyY","root":"BJIARz","border-bottom":"rnS0eX","top-shadow":"dIrs3-","size-24":"cQYEhv","size-30":"v9HjAa","size-36":"FAyswq","size-42":"kq2nFP","size-48":"T0S3xQ","padding-6":"RCJOvB","padding-12":"o9h-NQ","padding-18":"jfdE4G","padding-24":"SH-sLu","margin-24":"XvLSZZ","margin-12":"ay4BDY","vPadding-12":"_0adekl","vPadding-18":"ACubrz","vPadding-24":"T-AGpu","vPadding-36":"HbkDsT","vPadding-48":"BsUHDC","spacing-6":"_5OvVTl","spacing-12":"_9uA5RC","spacing-18":"YkCheR","uui-surface-main":"j7HocX","uuiTypography":"TXV39U","heroHeader":"VcrPvd","promoHeader":"sz6s0l","uuiCritical":"S-mSb3","uuiInfo":"Rqx1mj","uuiSuccess":"aEVr46","uuiWarning":"UEFdOk","uuiHighlight":"_9XO78z","uuiTypographySize12":"Fgar9b","uuiTypographySize14":"P1lvnE","uuiTypographySize16":"K5MtyY","borderBottom":"rnS0eX","topShadow":"dIrs3-","size24":"cQYEhv","size30":"v9HjAa","size36":"FAyswq","size42":"kq2nFP","size48":"T0S3xQ","padding6":"RCJOvB","padding12":"o9h-NQ","padding18":"jfdE4G","padding24":"SH-sLu","margin24":"XvLSZZ","margin12":"ay4BDY","vPadding12":"_0adekl","vPadding18":"ACubrz","vPadding24":"T-AGpu","vPadding36":"HbkDsT","vPadding48":"BsUHDC","spacing6":"_5OvVTl","spacing12":"_9uA5RC","spacing18":"YkCheR","uuiSurfaceMain":"j7HocX"};
 
-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":"_3EZpx0","margin-24":"oXscO5","padding-12":"_23WrF1","padding-24":"_8N3lPX","shadow":"zmUqN9","uui-surface-main":"phTVaE","margin24":"oXscO5","padding12":"_23WrF1","padding24":"_8N3lPX","uuiSurfaceMain":"phTVaE"};
 
 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":"obPJZ7","mode-block":"_18F-rz","mode-inline":"I-HKyC","padding-0":"siBu-0","padding-6":"_4WW8Td","padding-12":"yhY4nI","padding-18":"sH66CD","modeBlock":"_18F-rz","modeInline":"I-HKyC","padding0":"siBu-0","padding6":"_4WW8Td","padding12":"yhY4nI","padding18":"sH66CD"};
 
 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":"nDF-Qo"};
 
 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":"easxT3","hero-header":"EJpp3C","promo-header":"dY7iGv","uui-critical":"pWOW0r","uui-info":"_98r2h1","uui-success":"MOl95O","uui-warning":"vHPy6P","uui-highlight":"_0BLA8O","uui-typography-size-12":"i5maUX","uui-typography-size-14":"KcWUtc","uui-typography-size-16":"kHUZcp","root":"bEgAxc","size-24":"W-Dkul","size-30":"eEavxp","size-36":"u6zwU9","size-42":"_1mF1Xf","size-48":"bqJLEZ","uuiTypography":"easxT3","heroHeader":"EJpp3C","promoHeader":"dY7iGv","uuiCritical":"pWOW0r","uuiInfo":"_98r2h1","uuiSuccess":"MOl95O","uuiWarning":"vHPy6P","uuiHighlight":"_0BLA8O","uuiTypographySize12":"i5maUX","uuiTypographySize14":"KcWUtc","uuiTypographySize16":"kHUZcp","size24":"W-Dkul","size30":"eEavxp","size36":"u6zwU9","size42":"_1mF1Xf","size48":"bqJLEZ"};
 
-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":"s7PebU"};
 
-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":"-nkbpi"};
 
 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":"_4DihxY","list-container":"jzNN8x","scrollContainer":"_4DihxY","listContainer":"jzNN8x"};
+
+var css$X = {"root":"iTLVYo"};
+
+const AvatarStack = withMods(AvatarStack$1, () => [css$X.root]);
+
+var css$W = {"uui-typography":"yNiB-5","hero-header":"w3PjjV","promo-header":"fay--e","uui-critical":"e9Lbwn","uui-info":"mXOGo5","uui-success":"_2OJeGk","uui-warning":"_3CQje-","uui-highlight":"PD0W27","uui-typography-size-12":"Lyoobo","uui-typography-size-14":"GDAqwK","uui-typography-size-16":"I3xG4T","root":"pU7Opy","size-18":"QzR9Rf","size-24":"RFqQYi","size-30":"cuV0iU","size-36":"kJ3m6w","size-42":"RYwEyT","size-48":"FVigd9","uuiTypography":"yNiB-5","heroHeader":"w3PjjV","promoHeader":"fay--e","uuiCritical":"e9Lbwn","uuiInfo":"mXOGo5","uuiSuccess":"_2OJeGk","uuiWarning":"_3CQje-","uuiHighlight":"PD0W27","uuiTypographySize12":"Lyoobo","uuiTypographySize14":"GDAqwK","uuiTypographySize16":"I3xG4T","size18":"QzR9Rf","size24":"RFqQYi","size30":"cuV0iU","size36":"kJ3m6w","size42":"RYwEyT","size48":"FVigd9"};
+
+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":"nU35M-","hero-header":"udupC3","promo-header":"gHMMtX","uui-critical":"_9B9bBO","uui-info":"TmgIT5","uui-success":"R1ynZG","uui-warning":"SIm4nz","uui-highlight":"sjVvUP","uui-typography-size-12":"ftfTrS","uui-typography-size-14":"blS2NA","uui-typography-size-16":"NvMhgk","root":"_1yItVB","size-18":"EBQl4d","size-24":"OxxkZ-","size-30":"y5Gwfp","size-36":"HLLGox","size-42":"fj4mod","size-48":"HmqPOq","uuiTypography":"nU35M-","heroHeader":"udupC3","promoHeader":"gHMMtX","uuiCritical":"_9B9bBO","uuiInfo":"TmgIT5","uuiSuccess":"R1ynZG","uuiWarning":"SIm4nz","uuiHighlight":"sjVvUP","uuiTypographySize12":"ftfTrS","uuiTypographySize14":"blS2NA","uuiTypographySize16":"NvMhgk","size18":"EBQl4d","size24":"OxxkZ-","size30":"y5Gwfp","size36":"HLLGox","size42":"fj4mod","size48":"HmqPOq"};
+
+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":"NVkQml","uui-spinner":"QvAuqf","uuiSpinner":"QvAuqf"};
+
+function applySpinnerMods() {
+    return [css$U.root, 'uui-spinner'];
+}
+const Spinner = withMods(Spinner$1, applySpinnerMods);
+
+var css$T = {"root":"cUrJA3","spacer":"knKCls","mode-ghost":"iVD-IR","size-24":"me75D1","size-30":"_104PGt","navigation-size-24":"oeaZp4","navigation-size-30":"Sh2ttP","modeGhost":"iVD-IR","size24":"me75D1","size30":"_104PGt","navigationSize24":"oeaZp4","navigationSize30":"Sh2ttP"};
+
+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":"_3n-7Cf","progress-bar":"zRAobf","progressBar-indeterminate":"b8rRMx","size-12":"MjaZYF","size-18":"g5avIU","size-24":"hocWzV","progressBar":"zRAobf","progressBarIndeterminate":"b8rRMx","size12":"MjaZYF","size18":"g5avIU","size24":"hocWzV"};
+
+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":"IoINDQ","striped":"-D5sr-","animate-stripes":"mjxvlQ","size-12":"qg3mQW","size-18":"kGXObQ","size-24":"tRt3lf","animateStripes":"mjxvlQ","size12":"qg3mQW","size18":"kGXObQ","size24":"tRt3lf"};
+
+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":"hWDtpe"};
+
+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":"d2zFL7","size-12":"C2h541","size-18":"pCdgj4","size-24":"_51u74f","size12":"C2h541","size18":"pCdgj4","size24":"_51u74f"};
+
+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":"gCHQOT","drag-handle":"ap03uG","indent":"KZ6E2T","folding-arrow-12":"ba9IeB","folding-arrow-18":"_6pmYqU","icon-container":"BlLWPC","dragHandle":"ap03uG","foldingArrow12":"ba9IeB","foldingArrow18":"_6pmYqU","iconContainer":"BlLWPC"};
+
+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":"yDOFg5"};
 
-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":"kh96y-"};
 
-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":"trkRBw","hero-header":"rsA3tb","promo-header":"-CC6WX","uui-critical":"M65rOo","uui-info":"qjh3Xi","uui-success":"Ws1FrR","uui-warning":"BpDoL2","uui-highlight":"qY-Gy4","uui-typography-size-12":"lE5Uyh","uui-typography-size-14":"rdivWu","uui-typography-size-16":"sH4OM6","body":"pudB5s","modal":"VczQNP","search-wrapper":"sLy-YP","checkbox":"ucKBvA","no-found-size-24":"LTXZ27","no-found-size-30":"j0ntq7","no-found-size-36":"AIJB7b","no-found-size-42":"-AWO--","uuiTypography":"trkRBw","heroHeader":"rsA3tb","promoHeader":"-CC6WX","uuiCritical":"M65rOo","uuiInfo":"qjh3Xi","uuiSuccess":"Ws1FrR","uuiWarning":"BpDoL2","uuiHighlight":"qY-Gy4","uuiTypographySize12":"lE5Uyh","uuiTypographySize14":"rdivWu","uuiTypographySize16":"sH4OM6","searchWrapper":"sLy-YP","noFoundSize24":"LTXZ27","noFoundSize30":"j0ntq7","noFoundSize36":"AIJB7b","noFoundSize42":"-AWO--"};
 
 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":"n3dYud","close":"_34pEIg"};
 
-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":"BTlVUk","align-widgets-top":"_59s-AG","size-24":"eTxH--","size-30":"IzB8L4","size-36":"NqTTrv","size-42":"_34B67-","size-48":"TmuLed","size-60":"vW0MVA","align-widgets-center":"LZEPYT","padding-12":"WXmdlF","padding-24":"z3zk90","padding-left-12":"pJsqqz","padding-left-24":"GZ0HTv","icon-container":"VstEqf","loading-cell":"ccoKti","content-wrapper":"_8A6QMz","render-item":"aaQq7C","icon-wrapper":"jCj5-r","icon-default":"FOW6nA","icon-primary":"DhA6Nk","alignWidgetsTop":"_59s-AG","size24":"eTxH--","size30":"IzB8L4","size36":"NqTTrv","size42":"_34B67-","size48":"TmuLed","size60":"vW0MVA","alignWidgetsCenter":"LZEPYT","padding12":"WXmdlF","padding24":"z3zk90","paddingLeft12":"pJsqqz","paddingLeft24":"GZ0HTv","iconContainer":"VstEqf","loadingCell":"ccoKti","contentWrapper":"_8A6QMz","renderItem":"aaQq7C","iconWrapper":"jCj5-r","iconDefault":"FOW6nA","iconPrimary":"DhA6Nk"};
+
+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":"BtLunW","hero-header":"viVgqT","promo-header":"tsxZo-","uui-critical":"scGEgi","uui-info":"_11KFkl","uui-success":"gpNO0m","uui-warning":"_3COfvw","uui-highlight":"W4Bjwa","uui-typography-size-12":"LYhGqO","uui-typography-size-14":"VomELe","uui-typography-size-16":"rcrWXk","picker-row":"P6BBuA","uuiTypography":"BtLunW","heroHeader":"viVgqT","promoHeader":"tsxZo-","uuiCritical":"scGEgi","uuiInfo":"_11KFkl","uuiSuccess":"gpNO0m","uuiWarning":"_3COfvw","uuiHighlight":"W4Bjwa","uuiTypographySize12":"LYhGqO","uuiTypographySize14":"VomELe","uuiTypographySize16":"rcrWXk","pickerRow":"P6BBuA"};
 
 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":"_41aTK1","hero-header":"Mx-RTM","promo-header":"ZmGjq0","uui-critical":"IIgE8p","uui-info":"yD021D","uui-success":"AjlwAe","uui-warning":"USv5eb","uui-highlight":"qtA3Jh","uui-typography-size-12":"auK5GJ","uui-typography-size-14":"_61JKHx","uui-typography-size-16":"izpWZs","done":"IjlH4B","container":"HD6qvL","uuiTypography":"_41aTK1","heroHeader":"Mx-RTM","promoHeader":"ZmGjq0","uuiCritical":"IIgE8p","uuiInfo":"yD021D","uuiSuccess":"AjlwAe","uuiWarning":"USv5eb","uuiHighlight":"qtA3Jh","uuiTypographySize12":"auK5GJ","uuiTypographySize14":"_61JKHx","uuiTypographySize16":"izpWZs"};
 
 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":"oujOnL","hero-header":"H3Frc9","promo-header":"u--uDf","uui-critical":"K0fS55","uui-info":"_4W37ZZ","uui-success":"kEKXAj","uui-warning":"CLrWIO","uui-highlight":"VEUvNb","uui-typography-size-12":"ZaurV8","uui-typography-size-14":"Kv3cad","uui-typography-size-16":"T1h7n6","sub-header-wrapper":"Svz7rt","switch":"fdiE44","no-found-modal-container":"MkYOxv","no-found-modal-container-icon":"TeBpE5","no-found-modal-container-text":"V67wU9","uuiTypography":"oujOnL","heroHeader":"H3Frc9","promoHeader":"u--uDf","uuiCritical":"K0fS55","uuiInfo":"_4W37ZZ","uuiSuccess":"kEKXAj","uuiWarning":"CLrWIO","uuiHighlight":"VEUvNb","uuiTypographySize12":"ZaurV8","uuiTypographySize14":"Kv3cad","uuiTypographySize16":"T1h7n6","subHeaderWrapper":"Svz7rt","$switch$":"fdiE44","noFoundModalContainer":"MkYOxv","noFoundModalContainerIcon":"TeBpE5","noFoundModalContainerText":"V67wU9"};
 
-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":"RGmy3-","multiline":"yFXyPu","vertical-padding-24":"_5qN2HJ","vertical-padding-30":"azS-o8","vertical-padding-36":"f0ZRQB","vertical-padding-42":"khmsyn","vertical-padding-48":"NZ3WFl","text":"dZMIft","verticalPadding24":"_5qN2HJ","verticalPadding30":"azS-o8","verticalPadding36":"f0ZRQB","verticalPadding42":"khmsyn","verticalPadding48":"NZ3WFl"};
 
 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":"WYLwL9","hero-header":"wYSFYd","promo-header":"Z4Ab6D","uui-critical":"uZq6h6","uui-info":"u7ptbF","uui-success":"TB5zFz","uui-warning":"_1vyXbv","uui-highlight":"Q-61lh","uui-typography-size-12":"UaG-7U","uui-typography-size-14":"gkZE84","uui-typography-size-16":"ol9NBZ","root":"sb3g7m","mode-form":"ofBhs1","mode-cell":"O57FJ0","mode-inline":"wn--mX","size-24":"zThdwY","size-30":"_82yW7r","size-36":"YIHORs","size-42":"t89r-B","size-48":"_0tq4mr","uuiTypography":"WYLwL9","heroHeader":"wYSFYd","promoHeader":"Z4Ab6D","uuiCritical":"uZq6h6","uuiInfo":"u7ptbF","uuiSuccess":"TB5zFz","uuiWarning":"_1vyXbv","uuiHighlight":"Q-61lh","uuiTypographySize12":"UaG-7U","uuiTypographySize14":"gkZE84","uuiTypographySize16":"ol9NBZ","modeForm":"ofBhs1","modeCell":"O57FJ0","modeInline":"wn--mX","size24":"zThdwY","size30":"_82yW7r","size36":"YIHORs","size42":"t89r-B","size48":"_0tq4mr"};
+
+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":"_6pH5iK"};
 
 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":"mRZ8b-","hero-header":"RVmn4U","promo-header":"EgMYWZ","uui-critical":"WfLSjW","uui-info":"hH-A5y","uui-success":"F1JjPI","uui-warning":"ko0M9W","uui-highlight":"OlqQ7z","uui-typography-size-12":"DcW-ia","uui-typography-size-14":"rp7cEQ","uui-typography-size-16":"jrxv18","root":"DSe6Rg","title-wrapper":"grTHGT","title":"V17bYC","text-wrapper":"-kxmAc","selection":"mi9FHJ","postfix":"Ztv3My","selected":"WBlZyn","uuiTypography":"mRZ8b-","heroHeader":"RVmn4U","promoHeader":"EgMYWZ","uuiCritical":"WfLSjW","uuiInfo":"hH-A5y","uuiSuccess":"F1JjPI","uuiWarning":"ko0M9W","uuiHighlight":"OlqQ7z","uuiTypographySize12":"DcW-ia","uuiTypographySize14":"rp7cEQ","uuiTypographySize16":"jrxv18","titleWrapper":"grTHGT","textWrapper":"-kxmAc"};
 
 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":"b5CIQV","hero-header":"r4ZQPm","promo-header":"TSqXsu","uui-critical":"_0vOc2P","uui-info":"BGzutU","uui-success":"WJJ3do","uui-warning":"_7W2rhk","uui-highlight":"LzCRTD","uui-typography-size-12":"fjRQ8Z","uui-typography-size-14":"hxZlQf","uui-typography-size-16":"xBpZSD","date-input":"AoCwn5","size-24":"_9-2UK6","size-30":"mliOW2","size-36":"KtdK12","size-42":"GOG33b","size-48":"LUQvre","date-input-group":"SayZQh","separator":"_5jWAOl","mode-form":"Y8cP-5","mode-cell":"_8T9acV","uuiTypography":"b5CIQV","heroHeader":"r4ZQPm","promoHeader":"TSqXsu","uuiCritical":"_0vOc2P","uuiInfo":"BGzutU","uuiSuccess":"WJJ3do","uuiWarning":"_7W2rhk","uuiHighlight":"LzCRTD","uuiTypographySize12":"fjRQ8Z","uuiTypographySize14":"hxZlQf","uuiTypographySize16":"xBpZSD","dateInput":"AoCwn5","size24":"_9-2UK6","size30":"mliOW2","size36":"KtdK12","size42":"GOG33b","size48":"LUQvre","dateInputGroup":"SayZQh","modeForm":"Y8cP-5","modeCell":"_8T9acV"};
 
 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":"hFQ7PF"};
 
 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":"m3YfAA","hero-header":"_36zbXo","promo-header":"R69r2O","uui-critical":"QlyOvG","uui-info":"BXQuPm","uui-success":"a-6Oey","uui-warning":"un-2Zb","uui-highlight":"cxO-i7","uui-typography-size-12":"_2eVXV1","uui-typography-size-14":"B9cS0U","uui-typography-size-16":"Y5yHdB","header":"JxbZHp","removeButton":"sSvVf1","with-search":"L9kMEv","uuiTypography":"m3YfAA","heroHeader":"_36zbXo","promoHeader":"R69r2O","uuiCritical":"QlyOvG","uuiInfo":"BXQuPm","uuiSuccess":"a-6Oey","uuiWarning":"un-2Zb","uuiHighlight":"cxO-i7","uuiTypographySize12":"_2eVXV1","uuiTypographySize14":"B9cS0U","uuiTypographySize16":"Y5yHdB","withSearch":"L9kMEv"};
 
 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":"tsBmbu","dropdownDeleteIcon":"KiZEv9","presetsWrapper":"tYniKV","addPresetContainer":"h2fOCl","dropContainer":"aGq0Ly"};
 
-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":"_7jWSm3","delete-row":"raVLjP","delete-button":"r8-H0n","targetOpen":"lXfEoL","presetDropdownPanel":"_7jWSm3","deleteRow":"raVLjP","deleteButton":"r8-H0n"};
 
 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":"BOmcKH","preset-input":"TTQstR","presetInputCell":"BOmcKH","presetInput":"TTQstR"};
 
 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":"enEze8","activePreset":"QPDGJD"};
 
 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":"kDVnE-","line-height-18":"xqrjta","line-height-24":"zs1BM2","line-height-30":"X3by9E","font-size-10":"ZQI1UD","font-size-12":"rIVFaf","font-size-14":"SmWA5T","font-size-16":"DWaIXN","font-size-18":"_8DWhvx","font-size-24":"_3v1x8T","v-padding-2":"YN-h5n","v-padding-3":"_0LcARS","v-padding-5":"RPgfM0","v-padding-6":"yYXTCZ","v-padding-8":"zZ9jYp","v-padding-9":"_7zAi8A","v-padding-11":"zilksg","v-padding-12":"d4g4lf","v-padding-14":"_44qQnX","v-padding-15":"_20nlXB","v-padding-17":"NCmNeG","v-padding-18":"miqt4v","v-padding-23":"g-pT1O","v-padding-24":"QmTNFx","lineHeight12":"kDVnE-","lineHeight18":"xqrjta","lineHeight24":"zs1BM2","lineHeight30":"X3by9E","fontSize10":"ZQI1UD","fontSize12":"rIVFaf","fontSize14":"SmWA5T","fontSize16":"DWaIXN","fontSize18":"_8DWhvx","fontSize24":"_3v1x8T","vPadding2":"YN-h5n","vPadding3":"_0LcARS","vPadding5":"RPgfM0","vPadding6":"yYXTCZ","vPadding8":"zZ9jYp","vPadding9":"_7zAi8A","vPadding11":"zilksg","vPadding12":"d4g4lf","vPadding14":"_44qQnX","vPadding15":"_20nlXB","vPadding17":"NCmNeG","vPadding18":"miqt4v","vPadding23":"g-pT1O","vPadding24":"QmTNFx"};
 
 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":"ImFe7J"};
 
 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":"wBPvCZ","loading-word":"uVDfCP","animated-loading":"tHj2kX","skeleton_loading":"BWQwys","loadingWord":"uVDfCP","animatedLoading":"tHj2kX","skeletonLoading":"BWQwys"};
 
 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":"czY89s","hero-header":"uW7wLS","promo-header":"Xii7GJ","uui-critical":"XT1sE7","uui-info":"-FCJL2","uui-success":"A21Lud","uui-warning":"_3D7Z2u","uui-highlight":"fiIk6d","uui-typography-size-12":"X-clNv","uui-typography-size-14":"BrqzZ7","uui-typography-size-16":"XEkqaX","root":"Fberoh","modal-blocker":"foyF8y","animateModalBlocker":"-PoAoX","modal":"xo3f2j","modal-footer":"Ooa7qH","border-top":"fScyec","modal-header":"_2nitV7","uuiTypography":"czY89s","heroHeader":"uW7wLS","promoHeader":"Xii7GJ","uuiCritical":"XT1sE7","uuiInfo":"-FCJL2","uuiSuccess":"A21Lud","uuiWarning":"_3D7Z2u","uuiHighlight":"fiIk6d","uuiTypographySize12":"X-clNv","uuiTypographySize14":"BrqzZ7","uuiTypographySize16":"XEkqaX","modalBlocker":"foyF8y","modalFooter":"Ooa7qH","borderTop":"fScyec","modalHeader":"_2nitV7"};
 
-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":"IupFu4","hero-header":"rCtY6d","promo-header":"_4-cCb2","uui-critical":"DaUY6A","uui-info":"sCGkU6","uui-success":"AARFWE","uui-warning":"Xx1GHa","uui-highlight":"ta-paO","uui-typography-size-12":"LaQ-Jc","uui-typography-size-14":"g-tbBE","uui-typography-size-16":"SaRVU4","root":"af7Car","icon-wrapper":"O8lpZ7","action-wrapper":"_8Kea3-","action-link":"o5OgCj","close-icon":"_-8-2ND","main-path":"RR3qSD","content":"_38gwfc","clear-button":"VtprbH","close-wrapper":"jwGctx","uuiTypography":"IupFu4","heroHeader":"rCtY6d","promoHeader":"_4-cCb2","uuiCritical":"DaUY6A","uuiInfo":"sCGkU6","uuiSuccess":"AARFWE","uuiWarning":"Xx1GHa","uuiHighlight":"ta-paO","uuiTypographySize12":"LaQ-Jc","uuiTypographySize14":"g-tbBE","uuiTypographySize16":"SaRVU4","iconWrapper":"O8lpZ7","actionWrapper":"_8Kea3-","actionLink":"o5OgCj","closeIcon":"_-8-2ND","mainPath":"RR3qSD","clearButton":"VtprbH","closeWrapper":"jwGctx"};
 
 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":"s2N3xL","hero-header":"OoCUrF","promo-header":"WOY87N","uui-critical":"hiVIaX","uui-info":"_6k9yL6","uui-success":"UVqqhk","uui-warning":"aDEyeq","uui-highlight":"E21Lic","uui-typography-size-12":"abYIXG","uui-typography-size-14":"l23p85","uui-typography-size-16":"-lhJts","root":"sS2VP6","uuiTypography":"s2N3xL","heroHeader":"OoCUrF","promoHeader":"WOY87N","uuiCritical":"hiVIaX","uuiInfo":"_6k9yL6","uuiSuccess":"UVqqhk","uuiWarning":"aDEyeq","uuiHighlight":"E21Lic","uuiTypographySize12":"abYIXG","uuiTypographySize14":"l23p85","uuiTypographySize16":"-lhJts"};
 
 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":"Cee1-3","hero-header":"kzOGDz","promo-header":"y9hEcP","uui-critical":"x7qXqO","uui-info":"HdyEq6","uui-success":"F4HHWy","uui-warning":"rfa5nL","uui-highlight":"_7Ti0pv","uui-typography-size-12":"_2qETKo","uui-typography-size-14":"RiYxf5","uui-typography-size-16":"Y2pxzw","root":"uP0ofM","container":"B-m1z-","day-selection":"tb67BY","from-picker":"_6e9dZd","to-picker":"Q18D-d","bodes-wrapper":"qbLQP-","blocker":"oIwljg","uuiTypography":"Cee1-3","heroHeader":"kzOGDz","promoHeader":"y9hEcP","uuiCritical":"x7qXqO","uuiInfo":"HdyEq6","uuiSuccess":"F4HHWy","uuiWarning":"rfa5nL","uuiHighlight":"_7Ti0pv","uuiTypographySize12":"_2qETKo","uuiTypographySize14":"RiYxf5","uuiTypographySize16":"Y2pxzw","daySelection":"tb67BY","fromPicker":"_6e9dZd","toPicker":"Q18D-d","bodesWrapper":"qbLQP-"};
 
 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":"AmWsw9","hero-header":"VO1S8c","promo-header":"fUVD7j","uui-critical":"_4rf5PI","uui-info":"_6zv-at","uui-success":"rAXqPa","uui-warning":"_2sZr3Z","uui-highlight":"ZZ4fbK","uui-typography-size-12":"p7OD4m","uui-typography-size-14":"_5blwV1","uui-typography-size-16":"lypzGg","dropdown-container":"hTXjAG","date-input":"eZl6Hj","size-24":"_52unMd","size-30":"PaVTlw","size-36":"WbABCP","size-42":"_7FoLuC","size-48":"-mPdo-","date-input-group":"r41Loq","separator":"D8WyXO","mode-form":"eI0jJH","mode-cell":"XqGXo3","uuiTypography":"AmWsw9","heroHeader":"VO1S8c","promoHeader":"fUVD7j","uuiCritical":"_4rf5PI","uuiInfo":"_6zv-at","uuiSuccess":"rAXqPa","uuiWarning":"_2sZr3Z","uuiHighlight":"ZZ4fbK","uuiTypographySize12":"p7OD4m","uuiTypographySize14":"_5blwV1","uuiTypographySize16":"lypzGg","dropdownContainer":"hTXjAG","dateInput":"eZl6Hj","size24":"_52unMd","size30":"PaVTlw","size36":"WbABCP","size42":"_7FoLuC","size48":"-mPdo-","dateInputGroup":"r41Loq","modeForm":"eI0jJH","modeCell":"XqGXo3"};
 
 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":"vzeK4s","blocker":"uPnlmq","marker":"b4OmVs","top":"HFcJI0","bottom":"vs5D0n","left":"TWDVPY","right":"qoBM08","inside":"_7T3Kcj"};
 
 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":"RVWUcw","wrapper":"Y0BHDn","align-widgets-top":"ZnCKbp","size-24":"pHokN1","size-30":"lkdyUq","size-36":"Ts5cV5","size-42":"_91T2Nr","size-48":"Iql6tI","size-60":"-aM-hE","align-widgets-center":"zoha1A","padding-12":"OL9sS8","padding-24":"ntsbFe","padding-left-12":"V7jdm2","padding-left-24":"vIyJPQ","padding-right-24":"GZjwJQ","loading-cell":"PMdcqa","alignWidgetsTop":"ZnCKbp","size24":"pHokN1","size30":"lkdyUq","size36":"Ts5cV5","size42":"_91T2Nr","size48":"Iql6tI","size60":"-aM-hE","alignWidgetsCenter":"zoha1A","padding12":"OL9sS8","padding24":"ntsbFe","paddingLeft12":"V7jdm2","paddingLeft24":"vIyJPQ","paddingRight24":"GZjwJQ","loadingCell":"PMdcqa"};
+
+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":"Fb7H-7","hero-header":"RJ3mBq","promo-header":"XC-xOY","uui-critical":"QDFz-j","uui-info":"tdZIb-","uui-success":"GUC9K-","uui-warning":"amPFF-","uui-highlight":"aTMZ7i","uui-typography-size-12":"Ym1QLa","uui-typography-size-14":"B--gKe","uui-typography-size-16":"Y4FuMU","root":"JBqTbM","size-24":"PlMQzX","size-30":"EiajYq","size-36":"_0Bffoq","size-48":"ntZqrU","size-60":"x8fibF","uuiTypography":"Fb7H-7","heroHeader":"RJ3mBq","promoHeader":"XC-xOY","uuiCritical":"QDFz-j","uuiInfo":"tdZIb-","uuiSuccess":"GUC9K-","uuiWarning":"amPFF-","uuiHighlight":"aTMZ7i","uuiTypographySize12":"Ym1QLa","uuiTypographySize14":"B--gKe","uuiTypographySize16":"Y4FuMU","size24":"PlMQzX","size30":"EiajYq","size36":"_0Bffoq","size48":"ntZqrU","size60":"x8fibF"};
 
 // 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":"t9GQDI","hero-header":"Ol0wyl","promo-header":"F9jcWc","uui-critical":"Lo0JEa","uui-info":"_9-E13r","uui-success":"ZTwf7n","uui-warning":"_4XQ3xZ","uui-highlight":"_0mr-SG","uui-typography-size-12":"PDad-V","uui-typography-size-14":"_7WIGnT","uui-typography-size-16":"_3CFBUH","sorting-panel-container":"ZLK-lU","sort-active":"wHs8dx","uuiTypography":"t9GQDI","heroHeader":"Ol0wyl","promoHeader":"F9jcWc","uuiCritical":"Lo0JEa","uuiInfo":"_9-E13r","uuiSuccess":"ZTwf7n","uuiWarning":"_4XQ3xZ","uuiHighlight":"_0mr-SG","uuiTypographySize12":"PDad-V","uuiTypographySize14":"_7WIGnT","uuiTypographySize16":"_3CFBUH","sortingPanelContainer":"ZLK-lU","sortActive":"wHs8dx"};
 
 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":"lb6TVl","hero-header":"_5UfnEe","promo-header":"bQdbiq","uui-critical":"rX-TcV","uui-info":"nHen-v","uui-success":"lZnH-h","uui-warning":"ZBftHC","uui-highlight":"sdOZ8r","uui-typography-size-12":"rUDmwQ","uui-typography-size-14":"_3QwJGB","uui-typography-size-16":"KQw5rx","cell":"Q-JwR-","sort-icon":"z9dxCY","dropdown-icon":"RMrv41","infoIcon":"LlEbXM","resizable":"_1OK0Cj","size-24":"uTmMCn","size-30":"Nrp19i","size-36":"lA6ZwA","size-42":"X7MzI9","size-48":"ICZeds","padding-left-24":"_1jFrqa","padding-right-24":"RJfeVX","caption":"IyY-uX","checkbox":"_3lG1cc","icon":"kKdwxY","icon-cell":"ti9ibF","align-right":"fdMaK0","align-center":"pSxrKX","tooltip-wrapper":"KQJQcB","cell-tooltip":"BKyShx","upper-case":"ra2SNj","font-size-14":"_3-caBi","resize-mark":"HnQ1xU","draggable":"w7RpO7","ghost":"G-Q-e-","is-dragged-out":"rDJ102","dnd-marker-left":"HSbumS","dnd-marker-right":"abejUQ","cell-tooltip-wrapper":"_2KFYt9","cell-tooltip-text":"_9i1NZ1","uuiTypography":"lb6TVl","heroHeader":"_5UfnEe","promoHeader":"bQdbiq","uuiCritical":"rX-TcV","uuiInfo":"nHen-v","uuiSuccess":"lZnH-h","uuiWarning":"ZBftHC","uuiHighlight":"sdOZ8r","uuiTypographySize12":"rUDmwQ","uuiTypographySize14":"_3QwJGB","uuiTypographySize16":"KQw5rx","sortIcon":"z9dxCY","dropdownIcon":"RMrv41","size24":"uTmMCn","size30":"Nrp19i","size36":"lA6ZwA","size42":"X7MzI9","size48":"ICZeds","paddingLeft24":"_1jFrqa","paddingRight24":"RJfeVX","iconCell":"ti9ibF","alignRight":"fdMaK0","alignCenter":"pSxrKX","tooltipWrapper":"KQJQcB","cellTooltip":"BKyShx","upperCase":"ra2SNj","fontSize14":"_3-caBi","resizeMark":"HnQ1xU","isDraggedOut":"rDJ102","dndMarkerLeft":"HSbumS","dndMarkerRight":"abejUQ","cellTooltipWrapper":"_2KFYt9","cellTooltipText":"_9i1NZ1"};
 
 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); }
@@ -3715,29 +3833,34 @@ class DataTableHeaderCell extends React.Component {
                 return css$i.upperCase;
             return css$i['font-size-14'];
         };
-        this.getTooltipContent = () => (React.createElement("div", { className: css$i.cellTooltipWrapper },
-            React.createElement(Text, { fontSize: "14", fontWeight: "600", cx: css$i.cellTooltipText }, this.props.column.caption),
-            this.props.column.info && React.createElement(Text, { fontSize: "12", cx: css$i.cellTooltipText }, this.props.column.info)));
+        this.getTooltipContent = (column) => (React.createElement("div", { className: css$i.cellTooltipWrapper },
+            React.createElement(Text, { fontSize: "14", fontWeight: "600", cx: css$i.cellTooltipText }, column.caption),
+            column.info && React.createElement(Text, { fontSize: "12", cx: css$i.cellTooltipText }, column.info)));
         this.getColumnCaption = () => {
+            const renderTooltip = this.props.column.renderTooltip || this.getTooltipContent;
             return (React.createElement("div", { className: css$i.tooltipWrapper },
                 React.createElement("div", { className: cx$1(css$i.iconCell, css$i['align-' + this.props.column.textAlign], uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
-                    React.createElement(Tooltip, { placement: "top", color: "inverted", renderContent: this.getTooltipContent, cx: css$i.cellTooltip, openDelay: 600 },
+                    React.createElement(Tooltip, { placement: "top", color: "inverted", content: renderTooltip(this.props.column), cx: css$i.cellTooltip, openDelay: 600 },
                         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 +3868,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":"kUP0Bg","hero-header":"HWGGQS","promo-header":"BjYBOu","uui-critical":"bjGyfF","uui-info":"_98CSaO","uui-success":"ifHJGc","uui-warning":"MbblBs","uui-highlight":"sqeNOU","uui-typography-size-12":"UwuKlU","uui-typography-size-14":"amwqrJ","uui-typography-size-16":"_7481CR","header-cell":"C1v1-H","config-icon":"K6oN2v","uuiTypography":"kUP0Bg","heroHeader":"HWGGQS","promoHeader":"BjYBOu","uuiCritical":"bjGyfF","uuiInfo":"_98CSaO","uuiSuccess":"ifHJGc","uuiWarning":"MbblBs","uuiHighlight":"sqeNOU","uuiTypographySize12":"UwuKlU","uuiTypographySize14":"amwqrJ","uuiTypographySize16":"_7481CR","headerCell":"C1v1-H","configIcon":"K6oN2v"};
 
 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 +3890,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":"dmtsIC","hero-header":"Ro3Jzt","promo-header":"lqF1kx","uui-critical":"x97psm","uui-info":"fk840w","uui-success":"UTxyfe","uui-warning":"JTA1iK","uui-highlight":"ldvO7R","uui-typography-size-12":"c0sGqK","uui-typography-size-14":"m4X3l2","uui-typography-size-16":"MlMS1g","main-panel":"Qonzlc","group-title":"_9-MmQg","group-title-text":"Z-9w0v","group-title-badge":"fvARWH","group-items":"vVSUi8","no-data":"ZFPr-w","h-divider":"a4U40a","search-area":"f0goZx","uuiTypography":"dmtsIC","heroHeader":"Ro3Jzt","promoHeader":"lqF1kx","uuiCritical":"x97psm","uuiInfo":"fk840w","uuiSuccess":"UTxyfe","uuiWarning":"JTA1iK","uuiHighlight":"ldvO7R","uuiTypographySize12":"c0sGqK","uuiTypographySize14":"m4X3l2","uuiTypographySize16":"MlMS1g","mainPanel":"Qonzlc","groupTitle":"_9-MmQg","groupTitleText":"Z-9w0v","groupTitleBadge":"fvARWH","groupItems":"vVSUi8","noData":"ZFPr-w","hDivider":"a4U40a","searchArea":"f0goZx"};
 
 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 +3967,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":"O-Iz2Z","hero-header":"l314-H","promo-header":"_0Bsw2N","uui-critical":"UAhKoH","uui-info":"_5uMvty","uui-success":"_1Zh2rC","uui-warning":"Ht4qaH","uui-highlight":"_6YB2o-","uui-typography-size-12":"HDQJ1Q","uui-typography-size-14":"DZMwNh","uui-typography-size-16":"KKn0Pq","row-wrapper":"rg8x12","not-pinned":"XJ1v9I","pin-icon-button":"mYCCqT","checkbox":"Sv-O5B","drag-handle":"s1GJkH","dnd-disabled":"QeLxax","uuiTypography":"O-Iz2Z","heroHeader":"l314-H","promoHeader":"_0Bsw2N","uuiCritical":"UAhKoH","uuiInfo":"_5uMvty","uuiSuccess":"_1Zh2rC","uuiWarning":"Ht4qaH","uuiHighlight":"_6YB2o-","uuiTypographySize12":"HDQJ1Q","uuiTypographySize14":"DZMwNh","uuiTypographySize16":"KKn0Pq","rowWrapper":"rg8x12","notPinned":"XJ1v9I","pinIconButton":"mYCCqT","dragHandle":"s1GJkH","dndDisabled":"QeLxax"};
 
 const ColumnRow = React.memo(function ColumnRow(props) {
     const { column } = props;
@@ -3929,7 +4052,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":"wjH0WA","header":"NeYNRl","group":"BbLIAR","stickyHeader":"YFmYjt"};
 
 const getChildrenAndRest = (row, rows) => {
     const firstNotChildIndex = rows.findIndex((other) => other.depth < row.depth || (row.depth === other.depth && other.isPinned));
@@ -3995,7 +4118,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(#3bhpypmfrawyt3dvg_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 +4139,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: "3bhpypeik276tbobi_b",
     style: {
       maskType: "alpha"
     },
@@ -4029,7 +4152,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(#3bhpypeik276tbobi_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
@@ -4115,7 +4238,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: "3bhpypmfrawyt3dvg_a"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
@@ -4124,7 +4247,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":"Mt7uet","table":"Kq4KG0","no-results":"DpD05i","no-results-icon":"ilgwr8","no-results-title":"U-ZX-b","stickyHeader":"Mt7uet","noResults":"DpD05i","noResultsIcon":"ilgwr8","noResultsTitle":"U-ZX-b"};
 
 function DataTable(props) {
     var _a;
@@ -4167,16 +4290,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":"nioDWj"};
 
-var css$d = {"root":"K8P9r0","burger-content":"pF1P54","burgerContent":"pF1P54"};
+var css$d = {"root":"nmpo6n","burger-content":"lJ3AVW","burgerContent":"lJ3AVW"};
 
 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 +4367,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":"Pobf3h","hero-header":"oz1ED-","promo-header":"LnOE3I","uui-critical":"Ttn7Lu","uui-info":"opy3d6","uui-success":"_6uZcAf","uui-warning":"IQ3jj0","uui-highlight":"hdE1yv","uui-typography-size-12":"qGBHbm","uui-typography-size-14":"RcPMh6","uui-typography-size-16":"KYO7-K","root":"KdGRVO","button-primary":"Q14tu5","button-secondary":"svgeau","hasIcon":"jJcJ6j","dropdown":"MKivDG","uuiTypography":"Pobf3h","heroHeader":"oz1ED-","promoHeader":"LnOE3I","uuiCritical":"Ttn7Lu","uuiInfo":"opy3d6","uuiSuccess":"_6uZcAf","uuiWarning":"IQ3jj0","uuiHighlight":"hdE1yv","uuiTypographySize12":"qGBHbm","uuiTypographySize14":"RcPMh6","uuiTypographySize16":"KYO7-K","buttonPrimary":"Q14tu5","buttonSecondary":"svgeau"};
 
 const BurgerButton = withMods(Button$1, (props) => [
     css$c.root,
@@ -4300,13 +4424,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":"_5hukyq","searchInput":"_5hukyq"};
 
 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":"-i9Wkx","group-header":"Z66ZcX","group-name":"boWC5P","line":"ECocic","groupHeader":"Z66ZcX","groupName":"boWC5P"};
 
 function BurgerGroupHeader(props) {
     return (React.createElement("div", { className: cx(css$a.root, css$a.groupHeader, 'uui-burger-group-header') },
@@ -4314,7 +4438,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":"jK9IFk","hero-header":"mzY5fw","promo-header":"xI-gdN","uui-critical":"MUFcWE","uui-info":"UWRtPC","uui-success":"v-m4xe","uui-warning":"hK--NN","uui-highlight":"_4mLQs1","uui-typography-size-12":"Icx9Cd","uui-typography-size-14":"j04EFx","uui-typography-size-16":"_5rWUkn","root":"_1xQI-Y","type-primary":"W78gnx","type-secondary":"y-S979","uuiTypography":"jK9IFk","heroHeader":"mzY5fw","promoHeader":"xI-gdN","uuiCritical":"MUFcWE","uuiInfo":"UWRtPC","uuiSuccess":"v-m4xe","uuiWarning":"hK--NN","uuiHighlight":"_4mLQs1","uuiTypographySize12":"Icx9Cd","uuiTypographySize14":"j04EFx","uuiTypographySize16":"_5rWUkn","typePrimary":"W78gnx","typeSecondary":"y-S979"};
 
 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 +4458,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":"xMYwMi","dropdownBody":"xMYwMi"};
 
 class MainMenuDropdown extends React.Component {
     render() {
@@ -4388,12 +4512,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":"yEqyee","globalMenuIcon":"V4tH1A","globalMenuBtn":"yEqyee"};
 
 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":"st-10Q","open":"_5fKMfl"};
 
 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 +4525,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":"dAA0Bz","searchInput":"dAA0Bz"};
 
 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":"_2kO4Px"};
 
 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":"rM1Ru-"};
 
 const Anchor = withMods(Anchor$1, () => [css$3.root]);
 
@@ -4469,7 +4593,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":"U6mZR6","drop-start":"sX48Xt","drop-over":"n5F0jf","link":"_9sp0HM","drop-area":"pvNlS0","icon-blue":"YMsTic","dropStart":"sX48Xt","dropOver":"n5F0jf","dropArea":"pvNlS0","iconBlue":"YMsTic"};
 
 class DropSpot extends React.Component {
     constructor() {
@@ -4493,9 +4617,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":"iYjFvh","file-name":"_4WzsUu","default-color":"H-oMfN","doc-color":"svz-Xb","xls-color":"hBRfoi","pdf-color":"E3-cUV","movie-color":"bLzKed","img-color":"-mjpN7","mov-color":"bJQcmh","error-block":"rKY5ue","icons-block":"_2GobFx","fileName":"_4WzsUu","defaultColor":"H-oMfN","docColor":"svz-Xb","xlsColor":"hBRfoi","pdfColor":"E3-cUV","movieColor":"bLzKed","imgColor":"-mjpN7","movColor":"bJQcmh","errorBlock":"rKY5ue","iconsBlock":"_2GobFx"};
 
-var css = {"root":"BFXhPo"};
+var css = {"root":"EW6881"};
 
 const SvgCircleProgress = React.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
@@ -4612,5 +4736,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