@epam/uui 5.4.2 → 5.5.0

package/index.js

@@ -600,274 +600,44 @@ const systemIcons = {
     },
 };
 
-var css$1m = {"root":"Ngqiag"};
-
-const AvatarStack = uuiCore.withMods(uuiComponents.AvatarStack, () => [css$1m.root]);
-
-var css$1l = {"root":"X4DjMb","size-24":"_7XUB-t","size-18":"ryh2zj","size-12":"ztjftI","size24":"_7XUB-t","size18":"ryh2zj","size12":"ztjftI"};
+var css$1o = {"root":"g9tgpe","size-24":"_6-zHVP","size-18":"Tn39rO","size-12":"RcGZ35","size24":"_6-zHVP","size18":"Tn39rO","size12":"RcGZ35"};
 
 const CountIndicator = React.forwardRef((props, ref) => {
     return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
-            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":"uDW7Ar","hero-header":"a6Qntk","promo-header":"PU9Wyd","uui-critical":"USLgK-","uui-info":"W2SJfQ","uui-success":"ABu---","uui-warning":"ykhV4C","uui-highlight":"rRxxVV","uui-typography-size-12":"TMKcPB","uui-typography-size-14":"cpcClK","uui-typography-size-16":"NuIVBZ","root":"gJIs67","size-18":"msCxWK","size-24":"wQBz3s","size-30":"biY1B1","size-36":"_4X8tc4","size-42":"PAmter","size-48":"URhhsN","uuiTypography":"uDW7Ar","heroHeader":"a6Qntk","promoHeader":"PU9Wyd","uuiCritical":"USLgK-","uuiInfo":"W2SJfQ","uuiSuccess":"ABu---","uuiWarning":"ykhV4C","uuiHighlight":"rRxxVV","uuiTypographySize12":"TMKcPB","uuiTypographySize14":"cpcClK","uuiTypographySize16":"NuIVBZ","size18":"msCxWK","size24":"wQBz3s","size30":"biY1B1","size36":"_4X8tc4","size42":"PAmter","size48":"URhhsN"};
-
-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 = uuiCore.withMods(uuiComponents.Button, applyBadgeMods, (props) => {
-    if (process.env.NODE_ENV !== "production") {
-        uuiCore.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__namespace.default.createElement(CountIndicator, Object.assign({}, countIndicatorProps, { color: null, size: mapCountIndicatorSizes$1[props.size || defaultBadgeSize] }))),
-        indicator: props.indicator || false,
-    };
-});
-
-var css$1j = {"uui-typography":"X19USP","hero-header":"REfC0T","promo-header":"J48gJt","uui-critical":"dg6WfQ","uui-info":"L98kfi","uui-success":"_2BI5V1","uui-warning":"b3h-Nj","uui-highlight":"mKgL1k","uui-typography-size-12":"JDPRJn","uui-typography-size-14":"aNp1yl","uui-typography-size-16":"hMBcSu","root":"JmAjZV","size-18":"RNUktm","size-24":"_1xagmu","size-30":"mcg1hb","size-36":"_7KvOFf","size-42":"A3f4oM","size-48":"EWiH-A","uuiTypography":"X19USP","heroHeader":"REfC0T","promoHeader":"J48gJt","uuiCritical":"dg6WfQ","uuiInfo":"L98kfi","uuiSuccess":"_2BI5V1","uuiWarning":"b3h-Nj","uuiHighlight":"mKgL1k","uuiTypographySize12":"JDPRJn","uuiTypographySize14":"aNp1yl","uuiTypographySize16":"hMBcSu","size18":"RNUktm","size24":"_1xagmu","size30":"mcg1hb","size36":"_7KvOFf","size42":"A3f4oM","size48":"EWiH-A"};
-
-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 = uuiCore.withMods(uuiComponents.Button, applyTagMods, (props) => ({
-    dropdownIcon: systemIcons[mapSize[props.size] || defaultSize$a].foldingArrow,
-    clearIcon: systemIcons[mapSize[props.size] || defaultSize$a].clear,
-    countIndicator: (countIndicatorProps) => (React__namespace.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":"wcTxZn","uui-spinner":"ITifhD","uuiSpinner":"ITifhD"};
-
-function applySpinnerMods() {
-    return [css$1i.root, 'uui-spinner'];
-}
-const Spinner = uuiCore.withMods(uuiComponents.Spinner, applySpinnerMods);
-
-var css$1h = {"root":"daw2FO","spacer":"Z-roQH","mode-ghost":"n4YGiM","size-24":"uEuaew","size-30":"OpnoXH","navigation-size-24":"eNmQhM","navigation-size-30":"iLUOj-","modeGhost":"n4YGiM","size24":"uEuaew","size30":"OpnoXH","navigationSize24":"eNmQhM","navigationSize30":"iLUOj-"};
-
-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__namespace.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__namespace.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__*/React.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__namespace.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__namespace.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__*/React.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__namespace.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__namespace.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__*/React.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__namespace.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__namespace.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__*/React.forwardRef(SvgNavigationChevronRight18);
-
-function Paginator(props) {
-    const renderPaginator = (params) => {
-        var _a, _b;
-        return (React__namespace.default.createElement("nav", Object.assign({ role: "navigation", className: cx__default.default(css$1h.root, 'uui-paginator') }, params.rawProps),
-            React__namespace.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__namespace.default.createElement(Button, { cx: cx__default.default(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__namespace.default.createElement(Button, { cx: cx__default.default(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__namespace.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__namespace.default.createElement(uuiComponents.Paginator, Object.assign({}, props, { render: renderPaginator }));
-}
-
-var css$1g = {"root":"wDfbfo","progress-bar":"_--o96q","progressBar-indeterminate":"BoVU45","size-12":"a0X-Ql","size-18":"osdB82","size-24":"ZADC7q","progressBar":"_--o96q","progressBarIndeterminate":"BoVU45","size12":"a0X-Ql","size18":"osdB82","size24":"ZADC7q"};
-
-const IndeterminateBar = React__namespace.forwardRef((props, ref) => {
-    return (React__namespace.createElement("div", { ref: ref, className: cx__default.default('uui-indeterminate_bar', props.cx, css$1g.root, css$1g[`size-${props.size || 12}`]) },
-        React__namespace.createElement("div", { className: cx__default.default(css$1g.progressBar) })));
-});
-
-var css$1f = {"root":"-LB0DA","striped":"tAx5jf","animate-stripes":"_82rPsW","size-12":"ed7OyW","size-18":"jwlFQE","size-24":"fssVPJ","animateStripes":"_82rPsW","size12":"ed7OyW","size18":"jwlFQE","size24":"fssVPJ"};
-
-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 = uuiCore.withMods(uuiComponents.ProgressBar, applyProgressBarMods, (props) => ({
-    hideLabel: props.hideLabel || props.striped,
-}));
-
-var css$1e = {"root":"ppTjb-"};
-
-const IndicatorBar = React__namespace.forwardRef((props, ref) => {
-    const { progress } = props;
-    return progress || progress === 0 ? (React__namespace.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx__default.default(css$1e.root, props.cx), hideLabel: true })) : (React__namespace.createElement(IndeterminateBar, { ref: ref, cx: cx__default.default(css$1e.root, props.cx) }));
-});
-
-var css$1d = {"root":"DkKip9","size-12":"SE7WrJ","size-18":"_4QY6-L","size-24":"UJ1beM","size12":"SE7WrJ","size18":"_4QY6-L","size24":"UJ1beM"};
+var css$1n = {"uui-typography":"wlHZsN","hero-header":"_0i4pMv","promo-header":"vqQd0m","uui-critical":"_81-rPl","uui-info":"_0daN0o","uui-success":"_0fTQh-","uui-warning":"_1Tviem","uui-highlight":"iI8hkF","uui-typography-size-12":"qdEfwG","uui-typography-size-14":"z5HWt-","uui-typography-size-16":"_0DVMpj","root":"qBwJ-6","uuiTypography":"wlHZsN","heroHeader":"_0i4pMv","promoHeader":"vqQd0m","uuiCritical":"_81-rPl","uuiInfo":"_0daN0o","uuiSuccess":"_0fTQh-","uuiWarning":"_1Tviem","uuiHighlight":"iI8hkF","uuiTypographySize12":"qdEfwG","uuiTypographySize14":"z5HWt-","uuiTypographySize16":"_0DVMpj"};
 
-const StatusIndicator = React.forwardRef((props, ref) => {
-    return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
-            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__namespace.default.createElement("div", { className: "uui-status_indicator_dot" }),
-        React__namespace.default.createElement("p", { className: "uui-status_indicator_caption" }, props.caption)));
-});
-
-var css$1c = {"uui-typography":"pJbV3I","hero-header":"NYNI5T","promo-header":"OJpMqE","uui-critical":"SzBk5S","uui-info":"AZ21LA","uui-success":"Xw-7Fx","uui-warning":"Tdbbcb","uui-highlight":"_0inLus","uui-typography-size-12":"i7eKYU","uui-typography-size-14":"PzWsRk","uui-typography-size-16":"j5iu1M","root":"B0OU7s","uuiTypography":"pJbV3I","heroHeader":"NYNI5T","promoHeader":"OJpMqE","uuiCritical":"SzBk5S","uuiInfo":"AZ21LA","uuiSuccess":"Xw-7Fx","uuiWarning":"Tdbbcb","uuiHighlight":"_0inLus","uuiTypographySize12":"i7eKYU","uuiTypographySize14":"PzWsRk","uuiTypographySize16":"j5iu1M"};
-
-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 = uuiCore.withMods(uuiComponents.Button, 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__namespace.default.createElement(CountIndicator, Object.assign({}, countIndicatorProps, { color: "white" })),
 }));
 
-var css$1b = {"root":"dDHWQU"};
+var css$1m = {"root":"DBt6Pb"};
 
-const allIconColors = [
-    'info', 'success', 'warning', 'error', 'secondary', 'neutral',
-];
 function applyIconButtonMods(mods) {
-    return ['uui-icon_button', `uui-color-${mods.color || 'neutral'}`, css$1b.root];
+    return ['uui-icon_button', `uui-color-${mods.color || 'neutral'}`, css$1m.root];
 }
 const IconButton = uuiCore.withMods(uuiComponents.IconButton, applyIconButtonMods);
 
-var css$1a = {"root":"GrGDQe"};
+var css$1l = {"root":"tZra-e"};
 
 function getIconClass(props) {
     const classList = {
@@ -886,135 +656,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 = uuiCore.withMods(uuiComponents.Button, 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":"DY3hUp","hero-header":"EfIXK9","promo-header":"_3cXSwK","uui-critical":"_9z2ykp","uui-info":"vf31H4","uui-success":"EKTLsv","uui-warning":"u2rhTM","uui-highlight":"LphkCE","uui-typography-size-12":"AGahCs","uui-typography-size-14":"UCJ-Vf","uui-typography-size-16":"CSB-4J","root":"_8T6RX5","withNotify":"MYpabD","size-36":"_4oRwLs","size-48":"_5bIPi-","size-60":"rt3GYZ","uuiTypography":"DY3hUp","heroHeader":"EfIXK9","promoHeader":"_3cXSwK","uuiCritical":"_9z2ykp","uuiInfo":"vf31H4","uuiSuccess":"EKTLsv","uuiWarning":"u2rhTM","uuiHighlight":"LphkCE","uuiTypographySize12":"AGahCs","uuiTypographySize14":"UCJ-Vf","uuiTypographySize16":"CSB-4J","size36":"_4oRwLs","size48":"_5bIPi-","size60":"rt3GYZ"};
+var css$1k = {"uui-typography":"ZLN5w9","hero-header":"Wqv32u","promo-header":"huf-Hl","uui-critical":"_8LTqQL","uui-info":"BhrC9H","uui-success":"c5rbnJ","uui-warning":"AUxOoI","uui-highlight":"RhKFxa","uui-typography-size-12":"gYP93f","uui-typography-size-14":"dma8hi","uui-typography-size-16":"a4u4IL","root":"nd1aAL","withNotify":"_90LS-v","size-36":"N-HjGE","size-48":"JJhRIX","size-60":"_3k75W8","uuiTypography":"ZLN5w9","heroHeader":"Wqv32u","promoHeader":"huf-Hl","uuiCritical":"_8LTqQL","uuiInfo":"BhrC9H","uuiSuccess":"c5rbnJ","uuiWarning":"AUxOoI","uuiHighlight":"RhKFxa","uuiTypographySize12":"gYP93f","uuiTypographySize14":"dma8hi","uuiTypographySize16":"a4u4IL","size36":"N-HjGE","size48":"JJhRIX","size60":"_3k75W8"};
 
 function applyTabButtonMods(mods) {
     return [
-        css$19.root,
+        css$1k.root,
         'uui-tab-button',
-        css$19['size-' + (mods.size || '48')],
-        mods.withNotify && css$19.withNotify,
+        css$1k['size-' + (mods.size || '48')],
+        mods.withNotify && css$1k.withNotify,
         ...getIconClass(mods),
     ];
 }
-const TabButton = uuiCore.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__namespace.default.createElement(CountIndicator, Object.assign({}, countIndicatorProps, { color: props.isLinkActive ? 'info' : 'neutral', size: "18" }))) })));
+const TabButton = uuiCore.withMods(uuiComponents__namespace.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__namespace.default.createElement(CountIndicator, Object.assign({}, countIndicatorProps, { color: props.isLinkActive ? 'info' : 'neutral', size: "18" }))) })));
 
-var css$18 = {"uui-typography":"hgMSgN","hero-header":"AeBEkf","promo-header":"LpCIJw","uui-critical":"ui4LA9","uui-info":"oFyky3","uui-success":"MHt6KD","uui-warning":"FItuRM","uui-highlight":"lzDyTM","uui-typography-size-12":"g4jokF","uui-typography-size-14":"pjloH-","uui-typography-size-16":"h7w94C","root":"K1ZeL1","uuiTypography":"hgMSgN","heroHeader":"AeBEkf","promoHeader":"LpCIJw","uuiCritical":"ui4LA9","uuiInfo":"oFyky3","uuiSuccess":"MHt6KD","uuiWarning":"FItuRM","uuiHighlight":"lzDyTM","uuiTypographySize12":"g4jokF","uuiTypographySize14":"pjloH-","uuiTypographySize16":"h7w94C"};
+var css$1j = {"uui-typography":"S8UFcE","hero-header":"OHeBzt","promo-header":"I7ssz7","uui-critical":"VYdXnv","uui-info":"D7v8r-","uui-success":"RcPeqf","uui-warning":"irCx6c","uui-highlight":"bjiqJE","uui-typography-size-12":"EDJPDM","uui-typography-size-14":"IUgCpo","uui-typography-size-16":"yIWdpP","root":"e8Uvl6","uuiTypography":"S8UFcE","heroHeader":"OHeBzt","promoHeader":"I7ssz7","uuiCritical":"VYdXnv","uuiInfo":"D7v8r-","uuiSuccess":"RcPeqf","uuiWarning":"irCx6c","uuiHighlight":"bjiqJE","uuiTypographySize12":"EDJPDM","uuiTypographySize14":"IUgCpo","uuiTypographySize16":"yIWdpP"};
 
 function applyVerticalTabButtonMods() {
-    return [css$18.root];
+    return [css$1j.root];
 }
 const VerticalTabButton = uuiCore.withMods(TabButton, applyVerticalTabButtonMods);
 
-exports.EditMode = void 0;
+/**
+ * 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";
-})(exports.EditMode || (exports.EditMode = {}));
+})(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__namespace.createElement("svg", _extends$J({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$L || (_path$L = /*#__PURE__*/React__namespace.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__*/React.forwardRef(SvgCheck12);
+var ForwardRef$N = /*#__PURE__*/React.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__namespace.createElement("svg", _extends$I({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$K || (_path$K = /*#__PURE__*/React__namespace.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__*/React.forwardRef(SvgCheck18);
+var ForwardRef$M = /*#__PURE__*/React.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__namespace.createElement("svg", _extends$H({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$J || (_path$J = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M9 5v2H3V5z"
   })));
 };
-var ForwardRef$H = /*#__PURE__*/React.forwardRef(SvgPartlySelect12);
+var ForwardRef$L = /*#__PURE__*/React.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__namespace.createElement("svg", _extends$G({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$I || (_path$I = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M14 8v2H4V8z"
   })));
 };
-var ForwardRef$G = /*#__PURE__*/React.forwardRef(SvgPartlySelect18);
+var ForwardRef$K = /*#__PURE__*/React.forwardRef(SvgPartlySelect18);
 
-var css$17 = {"uui-typography":"baWDuO","hero-header":"nVk1YL","promo-header":"A3keCW","uui-critical":"_9AJoRO","uui-info":"cIObc3","uui-success":"n-rzA8","uui-warning":"DSq2rc","uui-highlight":"V5pLqL","uui-typography-size-12":"eys6BF","uui-typography-size-14":"n8K-kR","uui-typography-size-16":"YCvaml","root":"ML5y77","size-18":"Dfp539","size-12":"cvCKee","mode-cell":"YrlOEC","uuiTypography":"baWDuO","heroHeader":"nVk1YL","promoHeader":"A3keCW","uuiCritical":"_9AJoRO","uuiInfo":"cIObc3","uuiSuccess":"n-rzA8","uuiWarning":"DSq2rc","uuiHighlight":"V5pLqL","uuiTypographySize12":"eys6BF","uuiTypographySize14":"n8K-kR","uuiTypographySize16":"YCvaml","size18":"Dfp539","size12":"cvCKee","modeCell":"YrlOEC"};
+var css$1i = {"uui-typography":"_9Kl6Gw","hero-header":"Ivyo6J","promo-header":"Jr1I2-","uui-critical":"udlZ3e","uui-info":"-xM3TZ","uui-success":"wCNO3O","uui-warning":"UzL6yg","uui-highlight":"Jmt7fj","uui-typography-size-12":"_4IaqYZ","uui-typography-size-14":"feuq-x","uui-typography-size-16":"_5VTci4","root":"zj644Z","size-18":"DW7-Tw","size-12":"B-mPUV","mode-cell":"EUCzBT","uuiTypography":"_9Kl6Gw","heroHeader":"Ivyo6J","promoHeader":"Jr1I2-","uuiCritical":"udlZ3e","uuiInfo":"-xM3TZ","uuiSuccess":"wCNO3O","uuiWarning":"UzL6yg","uuiHighlight":"Jmt7fj","uuiTypographySize12":"_4IaqYZ","uuiTypographySize14":"feuq-x","uuiTypographySize16":"_5VTci4","size18":"DW7-Tw","size12":"B-mPUV","modeCell":"EUCzBT"};
 
 function applyCheckboxMods(mods) {
     return [
-        css$17.root,
-        css$17['size-' + (mods.size || '18')],
-        css$17['mode-' + (mods.mode || 'form')],
+        css$1i.root,
+        css$1i['size-' + (mods.size || '18')],
+        css$1i['mode-' + (mods.mode || 'form')],
         'uui-color-primary',
     ];
 }
-const applyUUICheckboxProps = (props) => ({
-    icon: props.size === '12' ? ForwardRef$J : ForwardRef$I,
-    indeterminateIcon: props.size === '12' ? ForwardRef$H : ForwardRef$G,
-});
+const applyUUICheckboxProps = (props) => {
+    const defaultIcon = props.size === '12' ? ForwardRef$N : ForwardRef$M;
+    const defaultIndeterminateIcon = props.size === '12' ? ForwardRef$L : ForwardRef$K;
+    return {
+        icon: props.icon ? props.icon : defaultIcon,
+        indeterminateIcon: props.indeterminateIcon ? props.indeterminateIcon : defaultIndeterminateIcon,
+    };
+};
 const Checkbox = uuiCore.withMods(uuiComponents__namespace.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$16 = {"uui-typography":"OQKEba","hero-header":"iRoK0F","promo-header":"OJYdHw","uui-critical":"t3uXix","uui-info":"dxrHvn","uui-success":"_9eaqOg","uui-warning":"FtD4lp","uui-highlight":"baBfpi","uui-typography-size-12":"kkPUDv","uui-typography-size-14":"-Y85qY","uui-typography-size-16":"_646Oqt","root":"E1RePL","size-18":"_95p5OS","size-12":"wp85lx","uuiTypography":"OQKEba","heroHeader":"iRoK0F","promoHeader":"OJYdHw","uuiCritical":"t3uXix","uuiInfo":"dxrHvn","uuiSuccess":"_9eaqOg","uuiWarning":"FtD4lp","uuiHighlight":"baBfpi","uuiTypographySize12":"kkPUDv","uuiTypographySize14":"-Y85qY","uuiTypographySize16":"_646Oqt","size18":"_95p5OS","size12":"wp85lx"};
+var css$1h = {"uui-typography":"b7r2CC","hero-header":"gdUjCL","promo-header":"OEIbof","uui-critical":"I4EqJw","uui-info":"ssQiTL","uui-success":"eAZMJC","uui-warning":"TTItB5","uui-highlight":"iaVnYA","uui-typography-size-12":"_31JuQ8","uui-typography-size-14":"mG0UN7","uui-typography-size-16":"_7etnjp","root":"rLWndQ","size-18":"r3YyDb","size-12":"JDmzFK","uuiTypography":"b7r2CC","heroHeader":"gdUjCL","promoHeader":"OEIbof","uuiCritical":"I4EqJw","uuiInfo":"ssQiTL","uuiSuccess":"eAZMJC","uuiWarning":"TTItB5","uuiHighlight":"iaVnYA","uuiTypographySize12":"_31JuQ8","uuiTypographySize14":"mG0UN7","uuiTypographySize16":"_7etnjp","size18":"r3YyDb","size12":"JDmzFK"};
 
 var _circle;
-function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); }
+function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); }
 var SvgRadioPoint = function SvgRadioPoint(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$J({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
@@ -1026,18 +805,23 @@ var SvgRadioPoint = function SvgRadioPoint(props, ref) {
     r: 6
   })));
 };
-var ForwardRef$F = /*#__PURE__*/React.forwardRef(SvgRadioPoint);
+var ForwardRef$J = /*#__PURE__*/React.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 = uuiCore.withMods(uuiComponents.RadioInput, applyRadioInputMods, () => ({ icon: ForwardRef$F }));
+const RadioInput = uuiCore.withMods(uuiComponents.RadioInput, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : ForwardRef$J }));
 
-var css$15 = {"root":"yanLM1","size-12":"s8f5kw","size-18":"fvdShL","size-24":"T9qGqk","size12":"s8f5kw","size18":"fvdShL","size24":"T9qGqk"};
+var css$1g = {"root":"Kz-GS0","size-12":"_0W2X0C","size-18":"_8jRpYn","size-24":"Eye9uS","size12":"_0W2X0C","size18":"_8jRpYn","size24":"Eye9uS"};
 
 function applySwitchMods(mods) {
     return [
-        css$15.root, css$15['size-' + (mods.size || '18')], 'uui-color-primary',
+        css$1g.root, css$1g['size-' + (mods.size || '18')], 'uui-color-primary',
     ];
 }
 const Switch = uuiCore.withMods(uuiComponents__namespace.Switch, applySwitchMods);
@@ -1086,94 +870,114 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var textInputCss = {"uui-typography":"I8L1zf","hero-header":"DPbLsz","promo-header":"kZ4OYl","uui-critical":"_4JBkLY","uui-info":"mYxpPw","uui-success":"w9M8xh","uui-warning":"Oj4N-U","uui-highlight":"Bs-Z8g","uui-typography-size-12":"a4Jg2t","uui-typography-size-14":"Z3ZXGS","uui-typography-size-16":"oO3uGf","root":"sE0WiL","mode-form":"u6IFV7","mode-inline":"_2Agvwk","mode-cell":"Uoe57d","size-24":"_7jRtuJ","size-30":"CS6YDg","size-36":"YIGiJQ","size-42":"gZYEyS","size-48":"rZge-W","uuiTypography":"I8L1zf","heroHeader":"DPbLsz","promoHeader":"kZ4OYl","uuiCritical":"_4JBkLY","uuiInfo":"mYxpPw","uuiSuccess":"w9M8xh","uuiWarning":"Oj4N-U","uuiHighlight":"Bs-Z8g","uuiTypographySize12":"a4Jg2t","uuiTypographySize14":"Z3ZXGS","uuiTypographySize16":"oO3uGf","modeForm":"u6IFV7","modeInline":"_2Agvwk","modeCell":"Uoe57d","size24":"_7jRtuJ","size30":"CS6YDg","size36":"YIGiJQ","size42":"gZYEyS","size48":"rZge-W"};
+var textInputCss = {"uui-typography":"aC13vK","hero-header":"xbqpuN","promo-header":"j7uWPD","uui-critical":"c-i2ST","uui-info":"k1Ippk","uui-success":"scEZqK","uui-warning":"d9Iy3c","uui-highlight":"a6zDMZ","uui-typography-size-12":"MNvt5j","uui-typography-size-14":"GDVMrp","uui-typography-size-16":"U5mb2N","root":"cpSJGA","mode-form":"g4YsZk","mode-inline":"_4v5oNP","mode-cell":"nh6u5I","size-24":"Kg-rRj","size-30":"znLhbb","size-36":"pPX4wT","size-42":"_1rQEUl","size-48":"tVKGNb","size-60":"Zukytv","uuiTypography":"aC13vK","heroHeader":"xbqpuN","promoHeader":"j7uWPD","uuiCritical":"c-i2ST","uuiInfo":"k1Ippk","uuiSuccess":"scEZqK","uuiWarning":"d9Iy3c","uuiHighlight":"a6zDMZ","uuiTypographySize12":"MNvt5j","uuiTypographySize14":"GDVMrp","uuiTypographySize16":"U5mb2N","modeForm":"g4YsZk","modeInline":"_4v5oNP","modeCell":"nh6u5I","size24":"Kg-rRj","size30":"znLhbb","size36":"pPX4wT","size42":"_1rQEUl","size48":"tVKGNb","size60":"Zukytv"};
 
-const defaultSize$6 = '36';
-const defaultMode$5 = exports.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 = uuiCore.withMods(uuiComponents.TextInput, 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__namespace.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__namespace.default.createElement(uuiCore.IEditableDebouncer, Object.assign({}, props, { render: (iEditable) => (React__namespace.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__namespace.default.createElement(uuiCore.IEditableDebouncer, Object.assign({}, props, { render: (iEditable) => (React__namespace.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":"uC8HN3"};
+var css$1f = {"root":"KYFtmg"};
 
-const ControlGroup = uuiCore.withMods(uuiComponents.ControlGroup, () => [css$14.root]);
+const ControlGroup = uuiCore.withMods(uuiComponents.ControlGroup, () => [css$1f.root]);
 
 function MultiSwitchComponent(props, ref) {
     return (React__namespace.createElement(ControlGroup, { ref: ref, rawProps: Object.assign(Object.assign({}, props.rawProps), { role: 'tablist' }) }, props.items.map((item, index) => (React__namespace.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__namespace.forwardRef(MultiSwitchComponent);
 
-var css$13 = {"uui-typography":"reiCqQ","hero-header":"y73yia","promo-header":"r1FTXz","uui-critical":"rLQI2v","uui-info":"K9NEZx","uui-success":"NjSTMs","uui-warning":"UBsQjj","uui-highlight":"XCSdyn","uui-typography-size-12":"_6JtHyi","uui-typography-size-14":"_5dhEwl","uui-typography-size-16":"XbDXTw","root":"xeKrF6","size-24":"TAOHpS","size-30":"xz5Kra","size-36":"DtlciI","size-42":"r2kY2f","size-48":"_99QvFR","mode-form":"X5wBXD","mode-cell":"pseOM6","uuiTypography":"reiCqQ","heroHeader":"y73yia","promoHeader":"r1FTXz","uuiCritical":"rLQI2v","uuiInfo":"K9NEZx","uuiSuccess":"NjSTMs","uuiWarning":"UBsQjj","uuiHighlight":"XCSdyn","uuiTypographySize12":"_6JtHyi","uuiTypographySize14":"_5dhEwl","uuiTypographySize16":"XbDXTw","size24":"TAOHpS","size30":"xz5Kra","size36":"DtlciI","size42":"r2kY2f","size48":"_99QvFR","modeForm":"X5wBXD","modeCell":"pseOM6"};
+var css$1e = {"uui-typography":"EcxqoU","hero-header":"PL7YXa","promo-header":"Y60ul3","uui-critical":"-qiEjy","uui-info":"F00x1F","uui-success":"Nzoc84","uui-warning":"omLl0N","uui-highlight":"KybmFb","uui-typography-size-12":"UTAuRG","uui-typography-size-14":"ysPEIt","uui-typography-size-16":"SeZXYT","root":"A0PEAI","size-24":"cJzZ-j","size-30":"dKK00M","size-36":"OIrkCZ","size-42":"_22O1Rw","size-48":"nJvdf-","mode-form":"UfY86g","mode-cell":"Q8Hibx","uuiTypography":"EcxqoU","heroHeader":"PL7YXa","promoHeader":"Y60ul3","uuiCritical":"-qiEjy","uuiInfo":"F00x1F","uuiSuccess":"Nzoc84","uuiWarning":"omLl0N","uuiHighlight":"KybmFb","uuiTypographySize12":"UTAuRG","uuiTypographySize14":"ysPEIt","uuiTypographySize16":"SeZXYT","size24":"cJzZ-j","size30":"dKK00M","size36":"OIrkCZ","size42":"_22O1Rw","size48":"nJvdf-","modeForm":"UfY86g","modeCell":"Q8Hibx"};
 
-const defaultSize$5 = '36';
-const defaultMode$4 = exports.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 = uuiCore.withMods(uuiComponents.NumericInput, 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") {
+        uuiCore.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":"sPO9op","hero-header":"c2Kiwe","promo-header":"co5eGn","uui-critical":"uFVg38","uui-info":"cNkRPN","uui-success":"F5GsNA","uui-warning":"SRWfQG","uui-highlight":"Pp9roW","uui-typography-size-12":"E6Xz-4","uui-typography-size-14":"osiFp2","uui-typography-size-16":"sLnlbD","root":"Z8skpu","mode-form":"tDp7zT","mode-cell":"-RFt75","mode-inline":"_5iarfk","size-24":"-NhUVd","size-30":"xRCYMM","size-36":"uW84Ko","size-42":"FgU9HX","size-48":"fEJ7JF","uuiTypography":"sPO9op","heroHeader":"c2Kiwe","promoHeader":"co5eGn","uuiCritical":"uFVg38","uuiInfo":"cNkRPN","uuiSuccess":"F5GsNA","uuiWarning":"SRWfQG","uuiHighlight":"Pp9roW","uuiTypographySize12":"E6Xz-4","uuiTypographySize14":"osiFp2","uuiTypographySize16":"sLnlbD","modeForm":"tDp7zT","modeCell":"-RFt75","modeInline":"_5iarfk","size24":"-NhUVd","size30":"xRCYMM","size36":"uW84Ko","size42":"FgU9HX","size48":"fEJ7JF"};
+var css$1d = {"uui-typography":"dQ6e3V","hero-header":"tC6x9u","promo-header":"FS-HaA","uui-critical":"zHS2-H","uui-info":"aeOFJo","uui-success":"AYCCpU","uui-warning":"TaSO9u","uui-highlight":"WveS4o","uui-typography-size-12":"RAczXp","uui-typography-size-14":"FHIBhd","uui-typography-size-16":"RvwyNp","root":"cWIBXx","mode-form":"Q6ssTp","mode-cell":"_3EfgRF","mode-inline":"zOQk1p","size-24":"_--L5RO","size-30":"qG0TzC","size-36":"_5-MwcX","size-42":"l-FuMK","size-48":"CX0dBe","uuiTypography":"dQ6e3V","heroHeader":"tC6x9u","promoHeader":"FS-HaA","uuiCritical":"zHS2-H","uuiInfo":"aeOFJo","uuiSuccess":"AYCCpU","uuiWarning":"TaSO9u","uuiHighlight":"WveS4o","uuiTypographySize12":"RAczXp","uuiTypographySize14":"FHIBhd","uuiTypographySize16":"RvwyNp","modeForm":"Q6ssTp","modeCell":"_3EfgRF","modeInline":"zOQk1p","size24":"_--L5RO","size30":"qG0TzC","size36":"_5-MwcX","size42":"l-FuMK","size48":"CX0dBe"};
 
-const defaultSize$4 = '36';
-const defaultMode$3 = exports.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 = uuiCore.withMods(uuiComponents.TextArea, applyTextAreaMods, (props) => ({
-    autoSize: props.mode === exports.EditMode.CELL ? true : props.autoSize,
-    maxLength: props.mode === exports.EditMode.CELL ? undefined : props.maxLength,
-}));
+const TextArea = uuiCore.withMods(uuiComponents.TextArea, applyTextAreaMods, (props) => {
+    if (process.env.NODE_ENV !== "production") {
+        uuiCore.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":"oMqwWP"};
+var css$1c = {"root":"O9-0Ok"};
 
 function applyDropdownContainerMods(mods) {
     return [
-        css$11.root,
+        css$1c.root,
         mods.vPadding && `vPadding-${mods.vPadding}`,
         mods.padding && `padding-${mods.padding}`,
     ];
 }
 const DropdownContainer = uuiCore.withMods(uuiComponents__namespace.DropdownContainer, applyDropdownContainerMods);
 
-var css$10 = {"root":"hAHp7n","timepicker-input":"duF1-H","timepickerInput":"duF1-H"};
+var css$1b = {"root":"MBeWTF","timepicker-input":"xjFAs0","timepickerInput":"xjFAs0"};
 
-const TimePickerBody = uuiCore.withMods(uuiComponents.TimePickerBody, () => [css$10.root], () => ({ addIcon: ForwardRef$1a, subtractIcon: ForwardRef$1a }));
+const TimePickerBody = uuiCore.withMods(uuiComponents.TimePickerBody, () => [css$1b.root], () => ({ addIcon: ForwardRef$1a, subtractIcon: ForwardRef$1a }));
 
 dayjs__default.default.extend(customParseFormat__default.default);
-const defaultMode$2 = exports.EditMode.FORM;
+const DEFAULT_MODE = EditMode.FORM;
 class TimePickerComponent extends uuiComponents.BaseTimePicker {
     constructor() {
         super(...arguments);
@@ -1190,7 +994,7 @@ class TimePickerComponent extends uuiComponents.BaseTimePicker {
                     });
                 }
             }
-            return (React__namespace.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__namespace.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;
@@ -1202,23 +1006,57 @@ class TimePickerComponent extends uuiComponents.BaseTimePicker {
 }
 const TimePicker = uuiCore.withMods(TimePickerComponent);
 
-var css$$ = {"root":"_7UiA2k"};
+var css$1a = {"root":"Tfvpxh"};
 
 function applyInputAddonMods() {
     return [
-        css$$.root,
+        css$1a.root,
     ];
 }
 const InputAddon = uuiCore.withMods(uuiComponents.InputAddon, applyInputAddonMods);
 
-var css$_ = {"root":"_7VqSkc"};
+var css$19 = {"root":"nnS5Ny"};
 
 function applySliderMods() {
-    return [css$_.root, 'uui-color-neutral'];
+    return [css$19.root, 'uui-color-neutral'];
 }
 const Slider = uuiCore.withMods(uuiComponents.Slider, applySliderMods);
 
-var css$Z = {"container":"_7ngEPi"};
+var css$18 = {"container":"_6zEJTQ"};
+
+var _path$H;
+function _extends$I() { _extends$I = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$I.apply(this, arguments); }
+var SvgNavigationChevronLeft18 = function SvgNavigationChevronLeft18(props, ref) {
+  return /*#__PURE__*/React__namespace.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__namespace.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__*/React.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__namespace.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__namespace.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__*/React.forwardRef(SvgNavigationChevronRight18);
 
 dayjs__default.default.extend(localeData__default.default);
 const uuiHeader = {
@@ -1291,23 +1129,25 @@ function DatePickerHeader(props) {
     };
     const title = React__namespace.useMemo(() => {
         var _a, _b, _c;
-        return `${((_a = props.value) === null || _a === void 0 ? void 0 : _a.view) !== 'MONTH_SELECTION' ? dayjs__default.default.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__default.default.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__namespace.createElement("div", { className: cx__default.default(css$Z.container, uuiHeader.container, props.cx) },
+    return (React__namespace.createElement("div", { className: cx__default.default(css$18.container, uuiHeader.container, props.cx) },
         React__namespace.createElement("header", { className: uuiHeader.header },
-            React__namespace.createElement(Button, { icon: props.navIconLeft || ForwardRef$L, color: "secondary", fill: "ghost", cx: uuiHeader.navIconLeft, onClick: () => onLeftNavigationArrow() }),
+            React__namespace.createElement(Button, { icon: props.navIconLeft || ForwardRef$I, color: "secondary", fill: "ghost", cx: uuiHeader.navIconLeft, onClick: () => onLeftNavigationArrow() }),
             React__namespace.createElement(Button, { caption: title, fill: "ghost", cx: uuiHeader.navTitle, onClick: () => onCaptionClick(props.value.view) }),
-            React__namespace.createElement(Button, { icon: props.navIconRight || ForwardRef$K, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: () => onRightNavigationArrow() }))));
+            React__namespace.createElement(Button, { icon: props.navIconRight || ForwardRef$H, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: () => onRightNavigationArrow() }))));
 }
 
-var css$Y = {"uui-typography":"QNqaaW","hero-header":"NIRABa","promo-header":"_6157vS","uui-critical":"ZmRS1Q","uui-info":"LB6RPE","uui-success":"_0eaj4-","uui-warning":"tDOzq8","uui-highlight":"lZwdVb","uui-typography-size-12":"qwyzP9","uui-typography-size-14":"wxKa9m","uui-typography-size-16":"HL4oR8","root":"_7eFxG4","uuiTypography":"QNqaaW","heroHeader":"NIRABa","promoHeader":"_6157vS","uuiCritical":"ZmRS1Q","uuiInfo":"LB6RPE","uuiSuccess":"_0eaj4-","uuiWarning":"tDOzq8","uuiHighlight":"lZwdVb","uuiTypographySize12":"qwyzP9","uuiTypographySize14":"wxKa9m","uuiTypographySize16":"HL4oR8"};
+var css$17 = {"uui-typography":"_9-dDfv","hero-header":"S4rOus","promo-header":"kI8x9T","uui-critical":"uJK3xA","uui-info":"aGweJr","uui-success":"TY394N","uui-warning":"pjeI1G","uui-highlight":"Lx3qe7","uui-typography-size-12":"l7fMyB","uui-typography-size-14":"s3OCAA","uui-typography-size-16":"Hu8o1m","root":"ErDDW1","uuiTypography":"_9-dDfv","heroHeader":"S4rOus","promoHeader":"kI8x9T","uuiCritical":"uJK3xA","uuiInfo":"aGweJr","uuiSuccess":"TY394N","uuiWarning":"pjeI1G","uuiHighlight":"Lx3qe7","uuiTypographySize12":"l7fMyB","uuiTypographySize14":"s3OCAA","uuiTypographySize16":"Hu8o1m"};
 
 function applyDateSelectionMods() {
-    return [css$Y.root];
+    return [css$17.root];
 }
 const Calendar = uuiCore.withMods(uuiComponents.Calendar, applyDateSelectionMods);
 
-var css$X = {"uui-typography":"NxLuy1","hero-header":"q7jhcj","promo-header":"pNGk03","uui-critical":"x9l8Vv","uui-info":"-k844n","uui-success":"_3UcLoV","uui-warning":"QZFWTU","uui-highlight":"p9JBSV","uui-typography-size-12":"MCtW5J","uui-typography-size-14":"UBUgnv","uui-typography-size-16":"XpnIA6","root":"VktQ-T","uuiTypography":"NxLuy1","heroHeader":"q7jhcj","promoHeader":"pNGk03","uuiCritical":"x9l8Vv","uuiInfo":"-k844n","uuiSuccess":"_3UcLoV","uuiWarning":"QZFWTU","uuiHighlight":"p9JBSV","uuiTypographySize12":"MCtW5J","uuiTypographySize14":"UBUgnv","uuiTypographySize16":"XpnIA6"};
+var css$16 = {"uui-typography":"zCIyEp","hero-header":"z-bv1e","promo-header":"_6g7lza","uui-critical":"VmWgWk","uui-info":"_0zaZFU","uui-success":"KEfUXm","uui-warning":"W-E19Z","uui-highlight":"ktUA64","uui-typography-size-12":"GNrZS1","uui-typography-size-14":"WJWYjf","uui-typography-size-16":"hWvWzl","root":"_6rmck6","uuiTypography":"zCIyEp","heroHeader":"z-bv1e","promoHeader":"_6g7lza","uuiCritical":"VmWgWk","uuiInfo":"_0zaZFU","uuiSuccess":"KEfUXm","uuiWarning":"W-E19Z","uuiHighlight":"ktUA64","uuiTypographySize12":"GNrZS1","uuiTypographySize14":"WJWYjf","uuiTypographySize16":"hWvWzl"};
 
 dayjs__default.default.extend(updateLocale__default.default);
 const uuiDatePickerBody = {
@@ -1335,7 +1175,7 @@ class DatePickerBody extends uuiComponents.DatePickerBodyBase {
             }
         };
         this.renderBody = () => {
-            return (React__namespace.createElement("div", { className: uuiCore.cx(css$X.root, uuiDatePickerBody.wrapper, this.props.cx) },
+            return (React__namespace.createElement("div", { className: uuiCore.cx(css$16.root, uuiDatePickerBody.wrapper, this.props.cx) },
                 React__namespace.createElement(DatePickerHeader, { value: this.props.value, onValueChange: (newValue) => this.props.setDisplayedDateAndView(newValue.displayedDate, newValue.view) }),
                 this.getView()));
         };
@@ -1344,104 +1184,104 @@ class DatePickerBody extends uuiComponents.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__namespace.createElement("svg", _extends$E({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$F || (_path$F = /*#__PURE__*/React__namespace.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__*/React.forwardRef(SvgNotificationCheckCircleFill24);
+var ForwardRef$G = /*#__PURE__*/React.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__namespace.createElement("svg", _extends$D({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$E || (_path$E = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
   })));
 };
-var ForwardRef$D = /*#__PURE__*/React.forwardRef(SvgNotificationWarningFill24);
+var ForwardRef$F = /*#__PURE__*/React.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__namespace.createElement("svg", _extends$C({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$D || (_path$D = /*#__PURE__*/React__namespace.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__*/React.forwardRef(SvgNotificationErrorFill24);
+var ForwardRef$E = /*#__PURE__*/React.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__namespace.createElement("svg", _extends$B({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$C || (_path$C = /*#__PURE__*/React__namespace.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__*/React.forwardRef(SvgNotificationHelpFill24);
+var ForwardRef$D = /*#__PURE__*/React.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__namespace.createElement("svg", _extends$A({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$B || (_path$B = /*#__PURE__*/React__namespace.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__*/React.forwardRef(SvgNavigationClose24$1);
+var ForwardRef$C = /*#__PURE__*/React.forwardRef(SvgNavigationClose24$1);
 
-var css$W = {"root":"KinSFt","icon-wrapper":"i4-8oF","alert-wrapper":"aYXMyI","size-48":"L62KVX","size-36":"_3nAv-S","action-wrapper":"i53Kqr","action-icon":"TVvQkk","action-link":"CdCDlQ","close-icon":"yS4GIg","main-path":"I2aXYU","content":"wXC9d5","iconWrapper":"i4-8oF","alertWrapper":"aYXMyI","size48":"L62KVX","size36":"_3nAv-S","actionWrapper":"i53Kqr","actionIcon":"TVvQkk","actionLink":"CdCDlQ","closeIcon":"yS4GIg","mainPath":"I2aXYU"};
+var css$15 = {"root":"W1nNZ2","icon-wrapper":"rbYZg7","alert-wrapper":"FKRaHG","size-48":"PVHQcw","size-36":"vJJGJE","action-wrapper":"Rw-Hfs","action-icon":"YHgk9T","action-link":"uTP-0I","close-icon":"_3--vy0","main-path":"sTl-Hn","content":"_1p4XTX","iconWrapper":"rbYZg7","alertWrapper":"FKRaHG","size48":"PVHQcw","size36":"vJJGJE","actionWrapper":"Rw-Hfs","actionIcon":"YHgk9T","actionLink":"uTP-0I","closeIcon":"_3--vy0","mainPath":"sTl-Hn"};
 
-const Alert = React__namespace.forwardRef((props, ref) => (React__namespace.createElement("div", Object.assign({ role: "alert", ref: ref, className: cx__default.default('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__namespace.createElement("div", { className: css$W.mainPath },
-        props.icon && (React__namespace.createElement("div", { className: css$W.iconWrapper },
-            React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon, cx: css$W.actionIcon }))),
-        React__namespace.createElement("div", { className: css$W.content },
+const Alert = React__namespace.forwardRef((props, ref) => (React__namespace.createElement("div", Object.assign({ role: "alert", ref: ref, className: cx__default.default('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__namespace.createElement("div", { className: css$15.mainPath },
+        props.icon && (React__namespace.createElement("div", { className: css$15.iconWrapper },
+            React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon, cx: css$15.actionIcon }))),
+        React__namespace.createElement("div", { className: css$15.content },
             props.children,
-            props.actions && (React__namespace.createElement("div", { className: css$W.actionWrapper }, props.actions.map((action) => (React__namespace.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__namespace.createElement(IconButton, { icon: ForwardRef$A, color: "neutral", onClick: props.onClose, cx: css$W.closeIcon })))));
-const WarningAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$D, color: "warning", ref: ref }, props)));
-const SuccessAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$E, color: "success", ref: ref }, props)));
-const HintAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$B, color: "info", ref: ref }, props)));
-const ErrorAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$C, color: "error", ref: ref }, props)));
+            props.actions && (React__namespace.createElement("div", { className: css$15.actionWrapper }, props.actions.map((action) => (React__namespace.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__namespace.createElement(IconButton, { icon: ForwardRef$C, color: "neutral", onClick: props.onClose, cx: css$15.closeIcon })))));
+const WarningAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$F, color: "warning", ref: ref }, props)));
+const SuccessAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$G, color: "success", ref: ref }, props)));
+const HintAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$D, color: "info", ref: ref }, props)));
+const ErrorAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$E, color: "error", ref: ref }, props)));
 
 const Dropdown = uuiCore.withMods(uuiComponents.Dropdown);
 
-var css$V = {"uui-typography":"_7BGqAx","hero-header":"o3BOGc","promo-header":"cmJljI","uui-critical":"pFqODh","uui-info":"Ks1RY1","uui-success":"fCHKEw","uui-warning":"ksF0bd","uui-highlight":"kHwa3V","uui-typography-size-12":"t4L2nx","uui-typography-size-14":"OciQdz","uui-typography-size-16":"yUuE-a","root":"ebzzu9","body-root":"LKjRKl","submenu-root-item":"rD5w50","icon-after":"RqIa2S","icon-check":"iLJGgz","splitter-root":"yhmxhR","splitter":"C5bxbJ","header-root":"xr7Bsa","item-root":"ywn6w9","icon":"A25YP-","link":"TJ1EUF","indent":"iPA0V3","uuiTypography":"_7BGqAx","heroHeader":"o3BOGc","promoHeader":"cmJljI","uuiCritical":"pFqODh","uuiInfo":"Ks1RY1","uuiSuccess":"fCHKEw","uuiWarning":"ksF0bd","uuiHighlight":"kHwa3V","uuiTypographySize12":"t4L2nx","uuiTypographySize14":"OciQdz","uuiTypographySize16":"yUuE-a","bodyRoot":"LKjRKl","submenuRootItem":"rD5w50","iconAfter":"RqIa2S","iconCheck":"iLJGgz","splitterRoot":"yhmxhR","headerRoot":"xr7Bsa","itemRoot":"ywn6w9"};
+var css$14 = {"uui-typography":"LQdLQQ","hero-header":"_3TyRW8","promo-header":"Eq7UTP","uui-critical":"SqYuLp","uui-info":"_0J4h34","uui-success":"UpBWM3","uui-warning":"zksmg6","uui-highlight":"tmXgF0","uui-typography-size-12":"GbysMP","uui-typography-size-14":"dV4lFy","uui-typography-size-16":"JpJeDI","root":"iuYgcF","body-root":"dlGUt-","submenu-root-item":"kG0fft","icon-after":"wWdg3A","icon-check":"_4NOswt","splitter-root":"-UeUhJ","splitter":"kHw7Br","header-root":"iqeJKl","item-root":"fczaeI","icon":"_3srg8P","link":"VwkLXq","indent":"vTBFJo","uuiTypography":"LQdLQQ","heroHeader":"_3TyRW8","promoHeader":"Eq7UTP","uuiCritical":"SqYuLp","uuiInfo":"_0J4h34","uuiSuccess":"UpBWM3","uuiWarning":"zksmg6","uuiHighlight":"tmXgF0","uuiTypographySize12":"GbysMP","uuiTypographySize14":"dV4lFy","uuiTypographySize16":"JpJeDI","bodyRoot":"dlGUt-","submenuRootItem":"kG0fft","iconAfter":"wWdg3A","iconCheck":"_4NOswt","splitterRoot":"-UeUhJ","headerRoot":"iqeJKl","itemRoot":"fczaeI"};
 
 const icons = systemIcons['36'];
 exports.IDropdownControlKeys = void 0;
@@ -1476,9 +1316,9 @@ function DropdownMenuContainer(props) {
             props.onClose();
         }
     };
-    return (React__namespace.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__namespace.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 = uuiCore.withMods(DropdownMenuContainer, () => [css$V.bodyRoot], (props) => {
+const DropdownMenuBody = uuiCore.withMods(DropdownMenuContainer, () => [css$14.bodyRoot], (props) => {
     return (Object.assign({ closeOnKey: exports.IDropdownControlKeys.ESCAPE }, props));
 });
 const DropdownMenuButton = React__namespace.default.forwardRef((props, ref) => {
@@ -1501,32 +1341,32 @@ const DropdownMenuButton = React__namespace.default.forwardRef((props, ref) => {
     const getMenuButtonContent = () => {
         const isIconBefore = Boolean(icon && iconPosition !== 'right');
         const isIconAfter = Boolean(icon && iconPosition === 'right');
-        const iconElement = (React__namespace.default.createElement(IconButton, { icon: icon, color: isActive ? 'info' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: uuiCore.cx(css$V.root, css$V.icon, iconPosition === 'right' ? css$V.iconAfter : css$V.iconBefore) }));
+        const iconElement = (React__namespace.default.createElement(IconButton, { icon: icon, color: isActive ? 'info' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: uuiCore.cx(css$14.root, css$14.icon, iconPosition === 'right' ? css$14.iconAfter : css$14.iconBefore) }));
         return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
             isIconBefore && iconElement,
-            React__namespace.default.createElement(uuiComponents.Text, { cx: props.indent && css$V.indent }, caption),
+            React__namespace.default.createElement(uuiComponents.Text, { cx: props.indent && css$14.indent }, caption),
             isIconAfter && (React__namespace.default.createElement(React__namespace.default.Fragment, null,
                 React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
                 iconElement))));
     };
     const isAnchor = Boolean(link || href);
-    const itemClassNames = uuiCore.cx(css$V.root, props.cx, css$V.itemRoot, isDisabled && uuiCore.uuiMod.disabled, isActive && uuiCore.uuiMod.active, isOpen && uuiCore.uuiMod.opened);
-    return isAnchor ? (React__namespace.default.createElement(uuiComponents.Anchor, { cx: uuiCore.cx(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__namespace.default.createElement(uuiComponents.FlexRow, { rawProps: {
+    const itemClassNames = uuiCore.cx(css$14.root, props.cx, css$14.itemRoot, isDisabled && uuiCore.uuiMod.disabled, isActive && uuiCore.uuiMod.active, isOpen && uuiCore.uuiMod.opened);
+    return isAnchor ? (React__namespace.default.createElement(uuiComponents.Anchor, { cx: uuiCore.cx(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__namespace.default.createElement(uuiComponents.FlexRow, { rawProps: {
             tabIndex: isDisabled ? -1 : 0,
             role: 'menuitem',
             onKeyDown: isDisabled ? null : handleOpenDropdown,
         }, cx: itemClassNames, onClick: handleClick, ref: ref },
         getMenuButtonContent(),
-        isSelected && React__namespace.default.createElement(uuiComponents.IconContainer, { icon: icons.accept, cx: uuiCore.cx(css$V.root, css$V.selectedCheckmark) })));
+        isSelected && React__namespace.default.createElement(uuiComponents.IconContainer, { icon: icons.accept, cx: uuiCore.cx(css$14.root, css$14.selectedCheckmark) })));
 });
 DropdownMenuButton.displayName = 'DropdownMenuButton';
 function DropdownMenuSplitter(props) {
-    return (React__namespace.default.createElement("div", { className: uuiCore.cx(css$V.root, props.cx, css$V.splitterRoot) },
-        React__namespace.default.createElement("hr", { className: css$V.splitter })));
+    return (React__namespace.default.createElement("div", { className: uuiCore.cx(css$14.root, props.cx, css$14.splitterRoot) },
+        React__namespace.default.createElement("hr", { className: css$14.splitter })));
 }
 function DropdownMenuHeader(props) {
-    return (React__namespace.default.createElement("div", { className: uuiCore.cx('uui-dropdown-menu-header', css$V.root, props.cx, css$V.headerRoot) },
-        React__namespace.default.createElement("span", { className: css$V.header }, props.caption)));
+    return (React__namespace.default.createElement("div", { className: uuiCore.cx('uui-dropdown-menu-header', css$14.root, props.cx, css$14.headerRoot) },
+        React__namespace.default.createElement("span", { className: css$14.header }, props.caption)));
 }
 function DropdownSubMenu(props) {
     const subMenuModifiers = [
@@ -1546,7 +1386,7 @@ function DropdownSubMenu(props) {
     ];
     return (React__namespace.default.createElement(uuiComponents.Dropdown, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: "right-start", modifiers: subMenuModifiers, renderBody: (dropdownProps) => React__namespace.default.createElement(DropdownMenuBody, Object.assign({ closeOnKey: exports.IDropdownControlKeys.LEFT_ARROW }, props, dropdownProps)), renderTarget: (_a) => {
             var { toggleDropdownOpening } = _a, targetProps = __rest(_a, ["toggleDropdownOpening"]);
-            return (React__namespace.default.createElement(DropdownMenuButton, Object.assign({ cx: uuiCore.cx(css$V.root, css$V.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
+            return (React__namespace.default.createElement(DropdownMenuButton, Object.assign({ cx: uuiCore.cx(css$14.root, css$14.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
         } }));
 }
 function DropdownMenuSwitchButton(props) {
@@ -1563,39 +1403,39 @@ function DropdownMenuSwitchButton(props) {
             onHandleValueChange(!isSelected);
         }
     };
-    return (React__namespace.default.createElement(uuiComponents.FlexRow, { cx: uuiCore.cx(props.cx, css$V.itemRoot, isDisabled && uuiCore.uuiMod.disabled), onClick: () => onHandleValueChange(!isSelected), rawProps: { role: 'menuitem', onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 } },
-        icon && React__namespace.default.createElement(uuiComponents.IconContainer, { icon: icon, cx: css$V.iconBefore }),
+    return (React__namespace.default.createElement(uuiComponents.FlexRow, { cx: uuiCore.cx(props.cx, css$14.itemRoot, isDisabled && uuiCore.uuiMod.disabled), onClick: () => onHandleValueChange(!isSelected), rawProps: { role: 'menuitem', onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 } },
+        icon && React__namespace.default.createElement(uuiComponents.IconContainer, { icon: icon, cx: css$14.iconBefore }),
         React__namespace.default.createElement(uuiComponents.Text, null, caption),
         React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
         React__namespace.default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
 }
 
-var css$U = {"uui-typography":"fOIhd2","hero-header":"d5eyA-","promo-header":"kxbY5N","uui-critical":"O9n-ZA","uui-info":"h-QkFS","uui-success":"vWzdgV","uui-warning":"wbpxeS","uui-highlight":"NhKID8","uui-typography-size-12":"mFxQAs","uui-typography-size-14":"pwHjzb","uui-typography-size-16":"S7qfNT","root":"MebBX4","border-bottom":"_5BYvdn","top-shadow":"EfV7KR","size-24":"C1pc2Q","size-30":"c333x-","size-36":"FZz3lp","size-42":"PJd-3F","size-48":"cKPHD6","padding-6":"IFyVmy","padding-12":"s5-joV","padding-18":"_5MxpDU","padding-24":"gXRdTG","margin-24":"l3qQvL","margin-12":"vK-ttJ","vPadding-12":"-gK2CZ","vPadding-18":"CSZhrX","vPadding-24":"JPvs6K","vPadding-36":"eNOY9v","vPadding-48":"_5x0UR8","spacing-6":"MdPv8-","spacing-12":"sSIQI5","spacing-18":"tWnZFe","uui-surface-main":"LAc1p0","uuiTypography":"fOIhd2","heroHeader":"d5eyA-","promoHeader":"kxbY5N","uuiCritical":"O9n-ZA","uuiInfo":"h-QkFS","uuiSuccess":"vWzdgV","uuiWarning":"wbpxeS","uuiHighlight":"NhKID8","uuiTypographySize12":"mFxQAs","uuiTypographySize14":"pwHjzb","uuiTypographySize16":"S7qfNT","borderBottom":"_5BYvdn","topShadow":"EfV7KR","size24":"C1pc2Q","size30":"c333x-","size36":"FZz3lp","size42":"PJd-3F","size48":"cKPHD6","padding6":"IFyVmy","padding12":"s5-joV","padding18":"_5MxpDU","padding24":"gXRdTG","margin24":"l3qQvL","margin12":"vK-ttJ","vPadding12":"-gK2CZ","vPadding18":"CSZhrX","vPadding24":"JPvs6K","vPadding36":"eNOY9v","vPadding48":"_5x0UR8","spacing6":"MdPv8-","spacing12":"sSIQI5","spacing18":"tWnZFe","uuiSurfaceMain":"LAc1p0"};
+var css$13 = {"uui-typography":"j5tYuI","hero-header":"IEpBdJ","promo-header":"sdO7uW","uui-critical":"_5aZ1-D","uui-info":"jxOgt5","uui-success":"xBupx7","uui-warning":"UOfYCs","uui-highlight":"i3Ijp-","uui-typography-size-12":"_8aBOgv","uui-typography-size-14":"E9I1f6","uui-typography-size-16":"a15Q5f","root":"z4sbms","border-bottom":"abuI0x","top-shadow":"zCp9F4","size-24":"j1idmI","size-30":"mrdSWJ","size-36":"_1HO2Le","size-42":"IKu2Y3","size-48":"CaPqT0","padding-6":"EJ46iX","padding-12":"nXHdHI","padding-18":"NJasKl","padding-24":"_8mnZ--","margin-24":"fRJ1Gu","margin-12":"Q0Jukn","vPadding-12":"WcNP1L","vPadding-18":"C52NH3","vPadding-24":"nnNqSc","vPadding-36":"VoS14d","vPadding-48":"rjLwpo","spacing-6":"uRUlem","spacing-12":"qIWqPR","spacing-18":"_4DwNYb","uui-surface-main":"ek9-UP","uuiTypography":"j5tYuI","heroHeader":"IEpBdJ","promoHeader":"sdO7uW","uuiCritical":"_5aZ1-D","uuiInfo":"jxOgt5","uuiSuccess":"xBupx7","uuiWarning":"UOfYCs","uuiHighlight":"i3Ijp-","uuiTypographySize12":"_8aBOgv","uuiTypographySize14":"E9I1f6","uuiTypographySize16":"a15Q5f","borderBottom":"abuI0x","topShadow":"zCp9F4","size24":"j1idmI","size30":"mrdSWJ","size36":"_1HO2Le","size42":"IKu2Y3","size48":"CaPqT0","padding6":"EJ46iX","padding12":"nXHdHI","padding18":"NJasKl","padding24":"_8mnZ--","margin24":"fRJ1Gu","margin12":"Q0Jukn","vPadding12":"WcNP1L","vPadding18":"C52NH3","vPadding24":"nnNqSc","vPadding36":"VoS14d","vPadding48":"rjLwpo","spacing6":"uRUlem","spacing12":"qIWqPR","spacing18":"_4DwNYb","uuiSurfaceMain":"ek9-UP"};
 
-const FlexCell = uuiCore.withMods(uuiComponents.FlexCell, () => [css$U.flexCell]);
+const FlexCell = uuiCore.withMods(uuiComponents.FlexCell, () => [css$13.flexCell]);
 
 const FlexRow = uuiCore.withMods(uuiComponents.FlexRow, (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":"rGCjD9","margin-24":"AtFYWF","padding-12":"-PwK-u","padding-24":"iG7t8R","shadow":"qBq2mZ","uui-surface-main":"rmoUVn","margin24":"AtFYWF","padding12":"-PwK-u","padding24":"iG7t8R","uuiSurfaceMain":"rmoUVn"};
+var css$12 = {"root":"lNErC1","margin-24":"dwlliI","padding-12":"htwotk","padding-24":"yPzJkk","shadow":"CYljHV","uui-surface-main":"WKu4zM","margin24":"dwlliI","padding12":"htwotk","padding24":"yPzJkk","uuiSurfaceMain":"WKu4zM"};
 
 const Panel = uuiCore.withMods(uuiComponents.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({}, uuiCore.i18n), { dataPickerBody: {
@@ -1687,61 +1527,301 @@ const i18n = Object.assign(Object.assign({}, uuiCore.i18n), { dataPickerBody: {
         fileSizeProgress: ' of ',
     } });
 
-var css$S = {"root":"_9yFnO-","mode-block":"rrEWva","mode-inline":"_6OgpXE","padding-0":"R9-SFJ","padding-6":"_5KTVZ-","padding-12":"Wo9dHU","padding-18":"zP0MCk","modeBlock":"rrEWva","modeInline":"_6OgpXE","padding0":"R9-SFJ","padding6":"_5KTVZ-","padding12":"Wo9dHU","padding18":"zP0MCk"};
+var css$11 = {"root":"_-5RRek","mode-block":"z5PnEk","mode-inline":"_81RMu5","padding-0":"bZIogc","padding-6":"qYyFVI","padding-12":"SOwmAy","padding-18":"NDBjMe","modeBlock":"z5PnEk","modeInline":"_81RMu5","padding0":"bZIogc","padding6":"qYyFVI","padding12":"SOwmAy","padding18":"NDBjMe"};
 
 const getMode = (mode) => {
     return mode || 'block';
 };
 function applyAccordionMods(mods) {
     return [
-        css$S.root,
-        css$S['mode-' + getMode(mods.mode)],
-        mods.padding && css$S['padding-' + mods.padding],
+        css$11.root,
+        css$11['mode-' + getMode(mods.mode)],
+        mods.padding && css$11['padding-' + mods.padding],
     ];
 }
 const Accordion = uuiCore.withMods(uuiComponents__namespace.Accordion, applyAccordionMods, (mods) => ({
     dropdownIcon: mods.dropdownIcon !== null && systemIcons[getMode(mods.mode) === 'block' ? '60' : '30'].foldingArrow,
 }));
 
-var css$R = {"root":"ksuHZj"};
+var css$10 = {"root":"mbiA7Q"};
 
 function applyTooltipMods(mods) {
     return [
-        css$R.root,
+        css$10.root,
         `uui-color-${mods.color || 'inverted'}`,
     ];
 }
-const Tooltip = uuiCore.withMods(uuiComponents.Tooltip, applyTooltipMods);
+const Tooltip = uuiCore.withMods(uuiComponents__namespace.Tooltip, applyTooltipMods);
 
-var css$Q = {"uui-typography":"Zyr-O-","hero-header":"WPEeZS","promo-header":"HirpNI","uui-critical":"uSGOXm","uui-info":"fj2D6X","uui-success":"Vv3Wdn","uui-warning":"o0JpVJ","uui-highlight":"J4lnjg","uui-typography-size-12":"_5rnXDs","uui-typography-size-14":"jYivj-","uui-typography-size-16":"pH18QO","root":"gbk4YR","size-24":"wzY4YI","size-30":"Si5fVU","size-36":"NteFLP","size-42":"Kt68e9","size-48":"xYpOPh","uuiTypography":"Zyr-O-","heroHeader":"WPEeZS","promoHeader":"HirpNI","uuiCritical":"uSGOXm","uuiInfo":"fj2D6X","uuiSuccess":"Vv3Wdn","uuiWarning":"o0JpVJ","uuiHighlight":"J4lnjg","uuiTypographySize12":"_5rnXDs","uuiTypographySize14":"jYivj-","uuiTypographySize16":"pH18QO","size24":"wzY4YI","size30":"Si5fVU","size36":"NteFLP","size42":"Kt68e9","size48":"xYpOPh"};
+var css$$ = {"uui-typography":"XJHUsI","hero-header":"kAVLHn","promo-header":"qDxKsT","uui-critical":"wrhYEq","uui-info":"lZaO6T","uui-success":"kouN3c","uui-warning":"Q2Vvxz","uui-highlight":"yo2VkC","uui-typography-size-12":"MYM34R","uui-typography-size-14":"iBKzWm","uui-typography-size-16":"BM7wF7","root":"b-oV8u","size-24":"jXUjSH","size-30":"XiH5l6","size-36":"_0NNieu","size-42":"RFo9ME","size-48":"Li-PLe","uuiTypography":"XJHUsI","heroHeader":"kAVLHn","promoHeader":"qDxKsT","uuiCritical":"wrhYEq","uuiInfo":"lZaO6T","uuiSuccess":"kouN3c","uuiWarning":"Q2Vvxz","uuiHighlight":"yo2VkC","uuiTypographySize12":"MYM34R","uuiTypographySize14":"iBKzWm","uuiTypographySize16":"BM7wF7","size24":"jXUjSH","size30":"XiH5l6","size36":"_0NNieu","size42":"RFo9ME","size48":"Li-PLe"};
 
-const defaultSize$3 = '36';
+const DEFAULT_SIZE$3 = '36';
 function applyLabeledInputMods(mods) {
-    return [css$Q.root, css$Q['size-' + (mods.size || defaultSize$3)]];
+    return [css$$.root, css$$['size-' + (mods.size || DEFAULT_SIZE$3)]];
 }
 const LabeledInput = uuiCore.withMods(uuiComponents__namespace.LabeledInput, applyLabeledInputMods, (props) => ({
     Tooltip,
-    infoIcon: systemIcons[props.size || defaultSize$3].help,
+    infoIcon: systemIcons[props.size || DEFAULT_SIZE$3].help,
 }));
 
-var css$P = {"root":"HyeU0a"};
+var css$_ = {"root":"OCsStR"};
 
-const RadioGroup = uuiCore.withMods(uuiComponents.RadioGroup, () => [css$P.root], () => ({ RadioInput }));
+function RadioGroup(props) {
+    const direction = props.direction || 'vertical';
+    const handleChange = (newVal) => {
+        if (newVal !== props.value) {
+            props.onValueChange(newVal);
+        }
+    };
+    return (React__namespace.createElement("fieldset", Object.assign({ ref: props.forwardedRef, className: uuiCore.cx(css$_.root, uuiCore.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__namespace.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":"AFP1Os"};
+var css$Z = {"root":"YIeH-Z"};
 
 function applyScrollBarsMods() {
     return [
-        css$O.root, 'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
+        css$Z.root, 'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
     ];
 }
 const ScrollBars = uuiCore.withMods(uuiComponents.ScrollBars, applyScrollBarsMods);
 
-var css$N = {"scroll-container":"RK3xmD","list-container":"F9el-t","scrollContainer":"RK3xmD","listContainer":"F9el-t"};
+var css$Y = {"scroll-container":"_5VNazm","list-container":"N8Z5dG","scrollContainer":"_5VNazm","listContainer":"N8Z5dG"};
+
+var css$X = {"root":"eqx5Be"};
+
+const AvatarStack = uuiCore.withMods(uuiComponents.AvatarStack, () => [css$X.root]);
+
+var css$W = {"uui-typography":"sC932f","hero-header":"Z6f1-i","promo-header":"QwOjl4","uui-critical":"PbxWhu","uui-info":"fNOAjg","uui-success":"_2Ot7ou","uui-warning":"YZsA-O","uui-highlight":"xUldt1","uui-typography-size-12":"qtma1n","uui-typography-size-14":"c2Mt3L","uui-typography-size-16":"V9Z6fT","root":"CNEWiQ","size-18":"la1Nz-","size-24":"BtcF7K","size-30":"Biogbr","size-36":"IkK7DW","size-42":"hN62fw","size-48":"CBJ6yW","uuiTypography":"sC932f","heroHeader":"Z6f1-i","promoHeader":"QwOjl4","uuiCritical":"PbxWhu","uuiInfo":"fNOAjg","uuiSuccess":"_2Ot7ou","uuiWarning":"YZsA-O","uuiHighlight":"xUldt1","uuiTypographySize12":"qtma1n","uuiTypographySize14":"c2Mt3L","uuiTypographySize16":"V9Z6fT","size18":"la1Nz-","size24":"BtcF7K","size30":"Biogbr","size36":"IkK7DW","size42":"hN62fw","size48":"CBJ6yW"};
+
+const mapSize$1 = {
+    48: '48',
+    42: '48',
+    36: '36',
+    30: '30',
+    24: '30',
+    18: '18',
+};
+const DEFAULT_SIZE$2 = '36';
+const DEFAULT_FILL = 'solid';
+function applyBadgeMods(mods) {
+    return [
+        'uui-badge',
+        css$W.root,
+        css$W['size-' + (mods.size || DEFAULT_SIZE$2)],
+        `uui-fill-${mods.fill || DEFAULT_FILL}`,
+        `uui-color-${mods.color || 'info'}`,
+        mods.indicator && mods.fill === 'outline' && 'uui-indicator',
+    ];
+}
+const mapCountIndicatorSizes$1 = {
+    12: '12',
+    18: '12',
+    24: '18',
+    30: '18',
+    36: '18',
+    42: '24',
+    48: '24',
+};
+const Badge = uuiCore.withMods(uuiComponents__namespace.Button, applyBadgeMods, (props) => {
+    if (process.env.NODE_ENV !== "production") {
+        uuiCore.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__namespace.default.createElement(CountIndicator, Object.assign({}, countIndicatorProps, { color: null, size: mapCountIndicatorSizes$1[props.size || DEFAULT_SIZE$2] }))),
+        indicator: props.indicator || false,
+        iconPosition: props.iconPosition || 'left',
+    };
+});
+
+var css$V = {"uui-typography":"_88kp4h","hero-header":"LxnzN-","promo-header":"_12io1C","uui-critical":"fXVd1Q","uui-info":"NkxcUY","uui-success":"_7W9RQf","uui-warning":"sPTppR","uui-highlight":"ScxHHL","uui-typography-size-12":"W3MwM0","uui-typography-size-14":"_1eAUkf","uui-typography-size-16":"CN16SL","root":"_8Kz8g-","size-18":"tZkT7S","size-24":"gDJ5Gq","size-30":"M6Q7Eq","size-36":"PD0-xT","size-42":"zBCjJu","size-48":"qNwt-O","uuiTypography":"_88kp4h","heroHeader":"LxnzN-","promoHeader":"_12io1C","uuiCritical":"fXVd1Q","uuiInfo":"NkxcUY","uuiSuccess":"_7W9RQf","uuiWarning":"sPTppR","uuiHighlight":"ScxHHL","uuiTypographySize12":"W3MwM0","uuiTypographySize14":"_1eAUkf","uuiTypographySize16":"CN16SL","size18":"tZkT7S","size24":"gDJ5Gq","size30":"M6Q7Eq","size36":"PD0-xT","size42":"zBCjJu","size48":"qNwt-O"};
+
+const DEFAULT_SIZE$1 = '36';
+const mapSize = {
+    48: '48',
+    42: '48',
+    36: '36',
+    30: '30',
+    24: '30',
+    18: '18',
+};
+const mapCountIndicatorSizes = {
+    18: '12',
+    24: '18',
+    30: '18',
+    36: '18',
+    42: '24',
+    48: '24',
+};
+function applyTagMods(props) {
+    return [
+        css$V['size-' + (props.size || DEFAULT_SIZE$1)],
+        css$V.root,
+        `uui-color-${props.color || 'neutral'}`,
+        `uui-fill-${props.fill || 'solid'}`,
+        'uui-tag',
+    ];
+}
+const Tag = uuiCore.withMods(uuiComponents.Button, applyTagMods, (props) => ({
+    dropdownIcon: systemIcons[mapSize[props.size] || DEFAULT_SIZE$1].foldingArrow,
+    clearIcon: systemIcons[mapSize[props.size] || DEFAULT_SIZE$1].clear,
+    countIndicator: (countIndicatorProps) => (React__namespace.default.createElement(CountIndicator, Object.assign({}, countIndicatorProps, { color: (!props.color || props.color === 'neutral') ? 'white' : props.color, size: mapCountIndicatorSizes[props.size || DEFAULT_SIZE$1] }))),
+}));
+
+var css$U = {"root":"JtxFks","uui-spinner":"SI80KO","uuiSpinner":"SI80KO"};
+
+function applySpinnerMods() {
+    return [css$U.root, 'uui-spinner'];
+}
+const Spinner = uuiCore.withMods(uuiComponents.Spinner, applySpinnerMods);
+
+var css$T = {"root":"Yd6asj","spacer":"-C8p6F","mode-ghost":"Lmg3Cy","size-24":"_6WOpso","size-30":"Wj4rci","navigation-size-24":"_1AdJTK","navigation-size-30":"ZG8Zet","modeGhost":"Lmg3Cy","size24":"_6WOpso","size30":"Wj4rci","navigationSize24":"_1AdJTK","navigationSize30":"ZG8Zet"};
+
+var _path$A;
+function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
+var SvgNavigationChevronLeft12 = function SvgNavigationChevronLeft12(props, ref) {
+  return /*#__PURE__*/React__namespace.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__namespace.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__*/React.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__namespace.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__namespace.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__*/React.forwardRef(SvgNavigationChevronRight12);
+
+function Paginator(props) {
+    const renderPaginator = (params) => {
+        var _a, _b;
+        return (React__namespace.default.createElement("nav", Object.assign({ role: "navigation", className: cx__default.default(css$T.root, 'uui-paginator') }, params.rawProps),
+            React__namespace.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__namespace.default.createElement(Button, { cx: cx__default.default(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__namespace.default.createElement(Button, { cx: cx__default.default(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__namespace.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__namespace.default.createElement(uuiComponents.Paginator, Object.assign({}, props, { render: renderPaginator }));
+}
+
+var css$S = {"root":"KQyEVC","progress-bar":"_0Ly7pU","progressBar-indeterminate":"QxKjeS","size-12":"QWJJKD","size-18":"-DPYxB","size-24":"e2nUT4","progressBar":"_0Ly7pU","progressBarIndeterminate":"QxKjeS","size12":"QWJJKD","size18":"-DPYxB","size24":"e2nUT4"};
+
+const IndeterminateBar = React__namespace.forwardRef((props, ref) => {
+    return (React__namespace.createElement("div", { ref: ref, className: cx__default.default('uui-indeterminate_bar', props.cx, css$S.root, css$S[`size-${props.size || 12}`]) },
+        React__namespace.createElement("div", { className: cx__default.default(css$S.progressBar) })));
+});
+
+var css$R = {"root":"_3-j2fh","striped":"fgUkbp","animate-stripes":"oomKxP","size-12":"_8luzwc","size-18":"u6yNgC","size-24":"rWTlbC","animateStripes":"oomKxP","size12":"_8luzwc","size18":"u6yNgC","size24":"rWTlbC"};
+
+const DEFAULT_SIZE = '12';
+function applyProgressBarMods(mods) {
+    const size = mods.size || DEFAULT_SIZE;
+    return [
+        css$R.root,
+        css$R[`size-${size}`],
+        mods.striped && css$R.striped,
+    ];
+}
+const ProgressBar = uuiCore.withMods(uuiComponents.ProgressBar, applyProgressBarMods, (props) => ({
+    hideLabel: props.hideLabel || props.striped,
+}));
+
+var css$Q = {"root":"EnZ2we"};
+
+const IndicatorBar = React__namespace.forwardRef((props, ref) => {
+    const { progress } = props;
+    return progress || progress === 0 ? (React__namespace.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx__default.default(css$Q.root, props.cx), hideLabel: true })) : (React__namespace.createElement(IndeterminateBar, { ref: ref, cx: cx__default.default(css$Q.root, props.cx) }));
+});
+
+var css$P = {"root":"NwxnLv","size-12":"_42pJE9","size-18":"a1hXOL","size-24":"ZMk2fC","size12":"_42pJE9","size18":"a1hXOL","size24":"ZMk2fC"};
+
+const StatusIndicator = React.forwardRef((props, ref) => {
+    return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
+            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__namespace.default.createElement("div", { className: "uui-status_indicator_dot" }),
+        React__namespace.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__namespace.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__namespace.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__*/React.forwardRef(SvgNavigationChevronDown18);
+
+var css$O = {"checkbox":"wtJxyM","drag-handle":"e71wIl","indent":"_5-Pqoe","folding-arrow-12":"PAPeDK","folding-arrow-18":"E6s3U3","icon-container":"mw4MCA","dragHandle":"e71wIl","foldingArrow12":"PAPeDK","foldingArrow18":"E6s3U3","iconContainer":"mw4MCA"};
+
+function DataRowAddons(props) {
+    var _a, _b;
+    const row = props.rowProps;
+    const additionalItemSize = +props.size < 30 ? '12' : '18';
+    return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
+        ((_a = row.dnd) === null || _a === void 0 ? void 0 : _a.srcData) && React__namespace.default.createElement(uuiComponents.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__namespace.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__namespace.default.createElement("div", { key: "fold", className: css$O.indent, style: { marginLeft: (row.indent - 1) * 24 } }, row.isFoldable && (React__namespace.default.createElement(uuiComponents.IconContainer, { rawProps: {
+                'aria-label': row.isFolded ? 'Unfold' : 'Fold',
+                role: 'button',
+            }, key: "icon", icon: ForwardRef$z, cx: [
+                uuiCore.uuiElement.foldingArrow, css$O[`folding-arrow-${additionalItemSize}`], uuiCore.uuiMarkers.clickable, css$O.iconContainer,
+            ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row) }))))));
+}
 
-var css$M = {"root":"aD5DUS"};
+var css$N = {"root":"h2KPev"};
 
-const Blocker = uuiCore.withMods(uuiComponents.Blocker, () => [css$M.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__namespace.default.createElement(Spinner, null)) }));
+const Blocker = uuiCore.withMods(uuiComponents.Blocker, () => [css$N.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__namespace.default.createElement(Spinner, null)) }));
 
 const VirtualList = React__namespace.forwardRef((props, ref) => {
     const { listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef, } = uuiCore.useVirtualList({
@@ -1757,7 +1837,7 @@ const VirtualList = React__namespace.forwardRef((props, ref) => {
         var _a;
         return ((_a = props.renderRows) === null || _a === void 0 ? void 0 : _a.call(props, {
             listContainerRef, estimatedHeight, offsetY, scrollShadows,
-        })) || (React__namespace.createElement("div", { className: css$N.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+        })) || (React__namespace.createElement("div", { className: css$Y.listContainer, style: { minHeight: `${estimatedHeight}px` } },
             React__namespace.createElement("div", { ref: listContainerRef, role: props.role, style: { marginTop: offsetY } }, props.rows)));
     };
     const renderView = ({ style }) => (React__namespace.createElement(VirtualListView, { isLoading: props.isLoading, style: style, rawProps: props.rawProps }));
@@ -1767,7 +1847,7 @@ const VirtualList = React__namespace.forwardRef((props, ref) => {
             return;
         scrollContainerRef.current = scrollbars.container.firstChild;
     }, []);
-    return (React__namespace.createElement(ScrollBars, { cx: uuiCore.cx(css$N.scrollContainer, props.cx, {
+    return (React__namespace.createElement(ScrollBars, { cx: uuiCore.cx(css$Y.scrollContainer, props.cx, {
             [uuiCore.uuiMarkers.scrolledLeft]: scrollShadows.horizontalLeft,
             [uuiCore.uuiMarkers.scrolledRight]: scrollShadows.horizontalRight,
             [uuiCore.uuiMarkers.scrolledTop]: scrollShadows.verticalTop,
@@ -1781,11 +1861,29 @@ const VirtualListView = React__namespace.forwardRef((props, ref) => {
 });
 VirtualList.displayName = 'VirtualList';
 
-var css$L = {"root":"GnF4yw"};
+var css$M = {"root":"acZmCZ"};
 
-const CheckboxGroup = uuiCore.withMods(uuiComponents.CheckboxGroup, () => [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__namespace.createElement("fieldset", Object.assign({ ref: props.forwardedRef, className: uuiCore.cx(css$M.root, uuiCore.directionMode[direction], props.cx) }, props.rawProps), props.items.map((i) => {
+        const restItemProps = __rest(i, ["id", "name", "renderName"]);
+        return (React__namespace.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":"dvcjfq","hero-header":"-qF-2N","promo-header":"sA89sf","uui-critical":"_8rLEgR","uui-info":"k0qLSy","uui-success":"_0ES8G0","uui-warning":"fO-kX9","uui-highlight":"oyp4kp","uui-typography-size-12":"YfDNNe","uui-typography-size-14":"J6-Ma6","uui-typography-size-16":"qI6PkU","body":"_5IHnUN","modal":"C2aFbC","search-wrapper":"wol0Dd","checkbox":"QRhq81","no-found-size-24":"dIpxjB","no-found-size-30":"B2Co-R","no-found-size-36":"_9kOM5h","no-found-size-42":"GTE1FZ","uuiTypography":"dvcjfq","heroHeader":"-qF-2N","promoHeader":"sA89sf","uuiCritical":"_8rLEgR","uuiInfo":"k0qLSy","uuiSuccess":"_0ES8G0","uuiWarning":"fO-kX9","uuiHighlight":"oyp4kp","uuiTypographySize12":"YfDNNe","uuiTypographySize14":"J6-Ma6","uuiTypographySize16":"qI6PkU","searchWrapper":"wol0Dd","noFoundSize24":"dIpxjB","noFoundSize30":"B2Co-R","noFoundSize36":"_9kOM5h","noFoundSize42":"GTE1FZ"};
+var css$L = {"uui-typography":"_7lvT7A","hero-header":"NIqi25","promo-header":"ClUOnH","uui-critical":"APUTz3","uui-info":"HErAje","uui-success":"ene-CJ","uui-warning":"JVQzly","uui-highlight":"zTcKML","uui-typography-size-12":"UvhsTx","uui-typography-size-14":"vZYhJR","uui-typography-size-16":"DoTVFp","body":"_5aCqCy","modal":"tu-CzG","search-wrapper":"wyig7G","checkbox":"t9ahlq","no-found-size-24":"_9rovga","no-found-size-30":"u7l5xk","no-found-size-36":"RixJYT","no-found-size-42":"D60xhg","uuiTypography":"_7lvT7A","heroHeader":"NIqi25","promoHeader":"ClUOnH","uuiCritical":"APUTz3","uuiInfo":"HErAje","uuiSuccess":"ene-CJ","uuiWarning":"JVQzly","uuiHighlight":"zTcKML","uuiTypographySize12":"UvhsTx","uuiTypographySize14":"vZYhJR","uuiTypographySize16":"DoTVFp","searchWrapper":"wyig7G","noFoundSize24":"_9rovga","noFoundSize30":"u7l5xk","noFoundSize36":"RixJYT","noFoundSize42":"D60xhg"};
 
 class DataPickerBody extends uuiComponents.PickerBodyBase {
     constructor() {
@@ -1797,16 +1895,16 @@ class DataPickerBody extends uuiComponents.PickerBodyBase {
         if (this.props.renderNotFound) {
             return this.props.renderNotFound();
         }
-        return (React__namespace.default.createElement(uuiComponents.FlexCell, { cx: css$K[`no-found-size-${this.props.searchSize || 36}`], grow: 1, textAlign: "center" },
+        return (React__namespace.default.createElement(uuiComponents.FlexCell, { cx: css$L[`no-found-size-${this.props.searchSize || 36}`], grow: 1, textAlign: "center" },
             React__namespace.default.createElement(Text, { size: this.props.searchSize || '36' }, i18n.dataPickerBody.noRecordsMessage)));
     }
     render() {
         const searchSize = uuiCore.isMobile() ? '48' : this.props.searchSize || '36';
         return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
-            this.showSearch() && (React__namespace.default.createElement("div", { key: "search", className: css$K.searchWrapper },
+            this.showSearch() && (React__namespace.default.createElement("div", { key: "search", className: css$L.searchWrapper },
                 React__namespace.default.createElement(uuiComponents.FlexCell, { grow: 1 },
                     React__namespace.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__namespace.default.createElement(FlexRow, { key: "body", cx: uuiCore.cx(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__namespace.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__namespace.default.createElement(FlexRow, { key: "body", cx: uuiCore.cx(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__namespace.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()))));
     }
 }
 
@@ -1842,92 +1940,30 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = React__namespace.default.memo(DataPickerFooterImpl);
 
-var css$J = {"header":"eMFi9R","close":"FXi3oh"};
+var css$K = {"header":"E9L6WK","close":"VGQcJT"};
 
-var _path$y;
-function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
+var _path$x;
+function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
 var SvgNavigationClose24 = function SvgNavigationClose24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
+  return /*#__PURE__*/React__namespace.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__namespace.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__*/React.forwardRef(SvgNavigationClose24);
-
-const DataPickerHeaderImpl = (props) => {
-    const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
-    return (React__namespace.default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: css$J.header },
-        React__namespace.default.createElement(Text, { size: "48", fontWeight: "600" }, title),
-        React__namespace.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__namespace.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__namespace.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__namespace.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"
+    ref: ref
+  }, props), _path$x || (_path$x = /*#__PURE__*/React__namespace.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$y = /*#__PURE__*/React.forwardRef(SvgNavigationChevronDown18);
-
-var css$I = {"cell":"_2a0VYu","wrapper":"WYpmYX","align-widgets-top":"lYCqjF","size-24":"qOFHgg","folding-arrow":"ntnHWt","size-30":"rmyvYS","size-36":"aaJKS4","size-42":"i8B-DA","size-48":"mflmvA","size-60":"HTw-BA","align-widgets-center":"TAU-ww","padding-12":"NkKYRn","padding-24":"vDLTlJ","padding-left-12":"jVKlb4","padding-left-24":"RqOtci","padding-right-24":"ePJX1C","drag-handle":"_1BeR-J","checkbox":"_2vbfX5","indent":"_4gJyf-","folding-arrow-12":"A9QQij","folding-arrow-18":"QH7EtV","icon-container":"_7YKBzw","loading-cell":"MymUnw","alignWidgetsTop":"lYCqjF","size24":"qOFHgg","foldingArrow":"ntnHWt","size30":"rmyvYS","size36":"aaJKS4","size42":"i8B-DA","size48":"mflmvA","size60":"HTw-BA","alignWidgetsCenter":"TAU-ww","padding12":"NkKYRn","padding24":"vDLTlJ","paddingLeft12":"jVKlb4","paddingLeft24":"RqOtci","paddingRight24":"ePJX1C","dragHandle":"_1BeR-J","foldingArrow12":"A9QQij","foldingArrow18":"QH7EtV","iconContainer":"_7YKBzw","loadingCell":"MymUnw"};
+var ForwardRef$y = /*#__PURE__*/React.forwardRef(SvgNavigationClose24);
 
-function DataTableRowAddons(props) {
-    var _a, _b;
-    const row = props.rowProps;
-    const additionalItemSize = +props.size < 30 ? '12' : '18';
-    return (React__namespace.createElement(React__namespace.Fragment, null,
-        ((_a = row.dnd) === null || _a === void 0 ? void 0 : _a.srcData) && React__namespace.createElement(uuiComponents.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__namespace.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__namespace.createElement("div", { key: "fold", className: css$I.indent, style: { marginLeft: (row.indent - 1) * 24 } }, row.isFoldable && (React__namespace.createElement(uuiComponents.IconContainer, { rawProps: {
-                'aria-label': row.isFolded ? 'Unfold' : 'Fold',
-                role: 'button',
-            }, key: "icon", icon: ForwardRef$y, cx: [
-                css$I.foldingArrow, css$I[`folding-arrow-${additionalItemSize}`], uuiCore.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__namespace.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__namespace.createElement(Text, { key: "t", size: props.size !== '60' ? props.size : '48', cx: css$I.loadingCell },
-            React__namespace.createElement(TextPlaceholder, null))));
-    props.renderUnknown = props.renderUnknown
-        || (() => (React__namespace.createElement(Text, { key: "t", size: props.size !== '60' ? props.size : '48' }, "Unknown")));
-    props.renderTooltip = (tooltipProps) => React__namespace.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__namespace.createElement(uuiComponents.DataTableCell, 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__namespace.default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: css$K.header },
+        React__namespace.default.createElement(Text, { size: "48", fontWeight: "600" }, title),
+        React__namespace.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__namespace.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); }
@@ -1974,55 +2010,81 @@ var SvgNotificationDone12 = function SvgNotificationDone12(props, ref) {
 };
 var ForwardRef$v = /*#__PURE__*/React.forwardRef(SvgNotificationDone12);
 
-var css$H = {"uui-typography":"LWLydj","hero-header":"EdgmEM","promo-header":"icd27f","uui-critical":"_8pcXBO","uui-info":"CUl9LA","uui-success":"P9Rpu0","uui-warning":"UmIkV4","uui-highlight":"YlvcWc","uui-typography-size-12":"vf65GU","uui-typography-size-14":"uL7G2K","uui-typography-size-16":"MfIqed","render-item":"aUvphH","icon-wrapper":"QCfPes","picker-row":"_1Yi8zf","icon-default":"Vdgnsz","icon-primary":"mEoC-3","uuiTypography":"LWLydj","heroHeader":"EdgmEM","promoHeader":"icd27f","uuiCritical":"_8pcXBO","uuiInfo":"CUl9LA","uuiSuccess":"P9Rpu0","uuiWarning":"UmIkV4","uuiHighlight":"YlvcWc","uuiTypographySize12":"vf65GU","uuiTypographySize14":"uL7G2K","uuiTypographySize16":"MfIqed","renderItem":"aUvphH","iconWrapper":"QCfPes","pickerRow":"_1Yi8zf","iconDefault":"Vdgnsz","iconPrimary":"mEoC-3"};
+var css$J = {"cell":"Vfzz6W","align-widgets-top":"mwPv-Z","size-24":"_83d4iw","size-30":"_4SRdpz","size-36":"vXqi76","size-42":"glpLdq","size-48":"DQov11","size-60":"JByWdj","align-widgets-center":"h3KjWz","padding-12":"MzQusK","padding-24":"TyUxSC","padding-left-12":"lTi2xH","padding-left-24":"nienEg","icon-container":"tWp-Dj","loading-cell":"_8LsVle","content-wrapper":"OisgQG","render-item":"_5lWMRi","icon-wrapper":"_14lB9n","icon-default":"dMp5ed","icon-primary":"NVJ8ry","alignWidgetsTop":"mwPv-Z","size24":"_83d4iw","size30":"_4SRdpz","size36":"vXqi76","size42":"glpLdq","size48":"DQov11","size60":"JByWdj","alignWidgetsCenter":"h3KjWz","padding12":"MzQusK","padding24":"TyUxSC","paddingLeft12":"lTi2xH","paddingLeft24":"nienEg","iconContainer":"tWp-Dj","loadingCell":"_8LsVle","contentWrapper":"OisgQG","renderItem":"_5lWMRi","iconWrapper":"_14lB9n","iconDefault":"dMp5ed","iconPrimary":"NVJ8ry"};
+
+const getIcon = (size) => {
+    switch (size) {
+        case '24':
+            return ForwardRef$v;
+        case '30':
+            return ForwardRef$w;
+        case '36':
+            return ForwardRef$w;
+        case '42':
+            return ForwardRef$x;
+        default:
+            return ForwardRef$w;
+    }
+};
+function DataPickerCell(props) {
+    const ref = React__namespace.useRef();
+    let content;
+    if (props.rowProps.isLoading) {
+        content = (
+        // remove `css.loadingCell` after` removing `margin: 0 3px 3px 0` from `TextPlaceholder` `loadingWord` class styles.
+        React__namespace.createElement(Text, { key: "t", size: props.size !== '60' ? props.size : '48', cx: css$J.loadingCell },
+            React__namespace.createElement(TextPlaceholder, null)));
+    }
+    else if (props.rowProps.isUnknown) {
+        content = (React__namespace.createElement(Text, { key: "t", size: props.size !== '60' ? props.size : '48' }, "Unknown"));
+    }
+    else {
+        content = (React__namespace.createElement("div", { key: `${props.rowProps.id}`, className: css$J.renderItem },
+            props.renderItem(props.rowProps.value, props.rowProps),
+            React__namespace.createElement(uuiComponents.FlexSpacer, null),
+            (props.rowProps.isChildrenSelected || props.rowProps.isSelected) && (React__namespace.createElement("div", { className: css$J.iconWrapper },
+                React__namespace.createElement(uuiComponents.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__namespace.createElement("div", { className: css$J.contentWrapper }, content));
+    return (React__namespace.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__namespace.createElement(DataRowAddons, Object.assign({}, props)),
+        getWrappedContent()));
+}
+
+var css$I = {"uui-typography":"YOQgNO","hero-header":"Hs9Zpn","promo-header":"AsK2Ou","uui-critical":"X5IOi0","uui-info":"gwzNPx","uui-success":"WIava2","uui-warning":"dpfJ6x","uui-highlight":"lWQHWt","uui-typography-size-12":"iAVQq9","uui-typography-size-14":"SOVpnw","uui-typography-size-16":"b-iwzF","picker-row":"TXoZxy","uuiTypography":"YOQgNO","heroHeader":"Hs9Zpn","promoHeader":"AsK2Ou","uuiCritical":"X5IOi0","uuiInfo":"gwzNPx","uuiSuccess":"WIava2","uuiWarning":"dpfJ6x","uuiHighlight":"lWQHWt","uuiTypographySize12":"iAVQq9","uuiTypographySize14":"SOVpnw","uuiTypographySize16":"b-iwzF","pickerRow":"TXoZxy"};
 
 class DataPickerRow extends React__namespace.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__namespace.createElement("div", { key: rowProps.id, className: css$H.renderItem },
-                this.props.renderItem(item, rowProps),
-                React__namespace.createElement(uuiComponents.FlexSpacer, null),
-                (rowProps.isChildrenSelected || rowProps.isSelected) && (React__namespace.createElement("div", { className: css$H.iconWrapper },
-                    React__namespace.createElement(uuiComponents.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__namespace.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__namespace.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__namespace.createElement(uuiComponents.DataPickerRow, Object.assign({}, this.props, { cx: [css$H.pickerRow, this.props.cx], renderContent: this.renderContent }));
+        return (React__namespace.createElement(uuiComponents.DataPickerRow, Object.assign({}, this.props, { cx: [css$I.pickerRow, this.props.cx], renderContent: this.renderContent })));
     }
 }
 
-var css$G = {"uui-typography":"yuKvtC","hero-header":"aP8krf","promo-header":"qhRx4S","uui-critical":"Bghmkk","uui-info":"UfifME","uui-success":"-TmVea","uui-warning":"RRpPRN","uui-highlight":"_4ORVJp","uui-typography-size-12":"QjX6OG","uui-typography-size-14":"yVj6X8","uui-typography-size-16":"wtqY21","done":"Y41WEW","container":"wXnZPM","uuiTypography":"yuKvtC","heroHeader":"aP8krf","promoHeader":"qhRx4S","uuiCritical":"Bghmkk","uuiInfo":"UfifME","uuiSuccess":"-TmVea","uuiWarning":"RRpPRN","uuiHighlight":"_4ORVJp","uuiTypographySize12":"QjX6OG","uuiTypographySize14":"yVj6X8","uuiTypographySize16":"wtqY21"};
+var css$H = {"uui-typography":"g-MuZa","hero-header":"IkhnnL","promo-header":"RE7fTr","uui-critical":"lTfvmv","uui-info":"u2corP","uui-success":"_1LVIx4","uui-warning":"l9LlGd","uui-highlight":"ZR03gu","uui-typography-size-12":"UAnEuL","uui-typography-size-14":"X1sL9z","uui-typography-size-16":"Yxi8tP","done":"JwuPkK","container":"_0SARad","uuiTypography":"g-MuZa","heroHeader":"IkhnnL","promoHeader":"RE7fTr","uuiCritical":"lTfvmv","uuiInfo":"u2corP","uuiSuccess":"_1LVIx4","uuiWarning":"l9LlGd","uuiHighlight":"ZR03gu","uuiTypographySize12":"UAnEuL","uuiTypographySize14":"X1sL9z","uuiTypographySize16":"Yxi8tP"};
 
 const MobileDropdownWrapper = (props) => {
     const isMobileView = uuiCore.isMobile();
     const maxWidth = isMobileView ? 'auto' : props.maxWidth;
-    return (React__namespace.default.createElement(DropdownContainer, Object.assign({}, props, { maxWidth: maxWidth, cx: [css$G.container, props.cx] }),
+    const maxHeight = isMobileView ? 'auto' : props.maxHeight;
+    return (React__namespace.default.createElement(DropdownContainer, Object.assign({}, props, { maxWidth: maxWidth, maxHeight: maxHeight, cx: [css$H.container, props.cx] }),
         isMobileView && React__namespace.default.createElement(DataPickerHeader, { title: props.title, close: props.onClose }),
         props.children,
-        isMobileView && React__namespace.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__namespace.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;
@@ -2047,103 +2109,9 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
 };
 var ForwardRef$u = /*#__PURE__*/React.forwardRef(SvgSearchWithBackground);
 
-var css$F = {"uui-typography":"Yutb8-","hero-header":"c4BaC6","promo-header":"_6ItXZm","uui-critical":"Xswvn5","uui-info":"-Q9nWS","uui-success":"_98uHmp","uui-warning":"F3mjNB","uui-highlight":"OdaoJf","uui-typography-size-12":"_2k5bfo","uui-typography-size-14":"m-FB3t","uui-typography-size-16":"ErdS6K","sub-header-wrapper":"g4uw3r","switch":"IXLBu-","no-found-modal-container":"TwM2tX","no-found-modal-container-icon":"ZQblvc","no-found-modal-container-text":"_2nlQZi","uuiTypography":"Yutb8-","heroHeader":"c4BaC6","promoHeader":"_6ItXZm","uuiCritical":"Xswvn5","uuiInfo":"-Q9nWS","uuiSuccess":"_98uHmp","uuiWarning":"F3mjNB","uuiHighlight":"OdaoJf","uuiTypographySize12":"_2k5bfo","uuiTypographySize14":"m-FB3t","uuiTypographySize16":"ErdS6K","subHeaderWrapper":"g4uw3r","$switch$":"IXLBu-","noFoundModalContainer":"TwM2tX","noFoundModalContainerIcon":"ZQblvc","noFoundModalContainerText":"_2nlQZi"};
-
-function PickerModal(props) {
-    const { view, selection, dataSourceStateLens, showSelectedLens, dataSourceState, getDataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = uuiComponents.usePickerModal(props);
-    const renderRow = (rowProps) => {
-        return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React__namespace.default.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, borderBottom: "none", padding: "24", size: "36", renderItem: (i) => React__namespace.default.createElement(Text, { size: "36" }, rowProps.isLoading ? React__namespace.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__namespace.default.createElement(React__namespace.default.Fragment, null,
-            view.selectAll && (React__namespace.default.createElement(LinkButton, { caption: hasSelection ? i18n.pickerModal.clearAllButton : i18n.pickerModal.selectAllButton, onClick: hasSelection ? () => clearSelection() : () => view.selectAll.onValueChange(true), isDisabled: isEmptyRowsAndHasNoSelection })),
-            React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
-            React__namespace.default.createElement(Button, { fill: "outline", color: "secondary", caption: i18n.pickerModal.cancelButton, onClick: () => props.abort() }),
-            React__namespace.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__namespace.default.createElement("div", { className: css$F.noFoundModalContainer },
-            React__namespace.default.createElement(uuiComponents.IconContainer, { cx: css$F.noFoundModalContainerIcon, icon: ForwardRef$u }),
-            React__namespace.default.createElement(Text, { cx: css$F.noFoundModalContainerText, fontWeight: "600", fontSize: "16", lineHeight: "24", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsMessage),
-            React__namespace.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__namespace.default.createElement(ModalBlocker, Object.assign({}, props),
-        React__namespace.default.createElement(ModalWindow, { width: 600, height: 700 },
-            React__namespace.default.createElement(ModalHeader, { title: props.caption || i18n.pickerModal.headerTitle, onClose: () => props.abort() }),
-            React__namespace.default.createElement(FlexCell, { cx: css$F.subHeaderWrapper },
-                React__namespace.default.createElement(FlexRow, { vPadding: "24" },
-                    React__namespace.default.createElement(SearchInput, Object.assign({}, dataSourceStateLens.prop('search').toProps(), { onKeyDown: (e) => uuiComponents.handleDataSourceKeyboard({
-                            value: getDataSourceState(),
-                            onValueChange: handleDataSourceValueChange,
-                            listView: view,
-                            rows: dataRows,
-                            searchPosition: 'body',
-                        }, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder }))),
-                !isSingleSelect() && (React__namespace.default.createElement(Switch, Object.assign({ cx: css$F.switch, size: "18" }, showSelectedLens.toProps(), { isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" }))),
-                props.renderFilter && React__namespace.default.createElement(FlexCell, { grow: 2 }, props.renderFilter(dataSourceStateLens.prop('filter').toProps()))),
-            React__namespace.default.createElement(DataPickerBody, Object.assign({}, getListProps(), { value: getDataSourceState(), onValueChange: handleDataSourceValueChange, search: dataSourceStateLens.prop('search').toProps(), showSearch: false, rows: rows, renderNotFound: renderNotFound, editMode: "modal" })),
-            React__namespace.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":"DaVXeI","hero-header":"G84ajh","promo-header":"TnYzyU","uui-critical":"ua-nua","uui-info":"Q4t-qH","uui-success":"VqkZDj","uui-warning":"ZhF6YL","uui-highlight":"SW6kSD","uui-typography-size-12":"F8ibpz","uui-typography-size-14":"oE2CRi","uui-typography-size-16":"E7BS5K","root":"eoDLwD","mode-form":"jdVH1z","mode-cell":"vrptwP","mode-inline":"-qSP49","size-24":"G3uyzv","size-30":"mONNMG","size-36":"-AELUy","size-42":"GVKdN5","size-48":"pJC6S8","uuiTypography":"DaVXeI","heroHeader":"G84ajh","promoHeader":"TnYzyU","uuiCritical":"ua-nua","uuiInfo":"Q4t-qH","uuiSuccess":"VqkZDj","uuiWarning":"ZhF6YL","uuiHighlight":"SW6kSD","uuiTypographySize12":"F8ibpz","uuiTypographySize14":"oE2CRi","uuiTypographySize16":"E7BS5K","modeForm":"jdVH1z","modeCell":"vrptwP","modeInline":"-qSP49","size24":"G3uyzv","size30":"mONNMG","size36":"-AELUy","size42":"GVKdN5","size48":"pJC6S8"};
-
-const defaultSize$2 = '36';
-const defaultMode$1 = exports.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__namespace.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__namespace.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__namespace.createElement(uuiComponents.PickerToggler, 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__namespace.forwardRef(PickerTogglerComponent);
+var css$G = {"uui-typography":"bVvQtf","hero-header":"_68UDXg","promo-header":"W5kmrw","uui-critical":"HzXdGX","uui-info":"DdtIjT","uui-success":"SnFxhE","uui-warning":"_7F3pHh","uui-highlight":"_9PvOeY","uui-typography-size-12":"MocZrh","uui-typography-size-14":"mjhkLm","uui-typography-size-16":"SHUh7R","sub-header-wrapper":"TZNbzK","switch":"_5SdIIE","no-found-modal-container":"clyLUl","no-found-modal-container-icon":"X0-P2O","no-found-modal-container-text":"x-GvUV","uuiTypography":"bVvQtf","heroHeader":"_68UDXg","promoHeader":"W5kmrw","uuiCritical":"HzXdGX","uuiInfo":"DdtIjT","uuiSuccess":"SnFxhE","uuiWarning":"_7F3pHh","uuiHighlight":"_9PvOeY","uuiTypographySize12":"MocZrh","uuiTypographySize14":"mjhkLm","uuiTypographySize16":"SHUh7R","subHeaderWrapper":"TZNbzK","$switch$":"_5SdIIE","noFoundModalContainer":"clyLUl","noFoundModalContainerIcon":"X0-P2O","noFoundModalContainerText":"x-GvUV"};
 
-var css$D = {"root":"HgMMSQ","multiline":"vp8QoR","vertical-padding-24":"pNi-52","vertical-padding-30":"y3YOM-","vertical-padding-36":"tGbjJM","vertical-padding-42":"DHDuWR","vertical-padding-48":"gSC-Xi","text":"iDWwbi","verticalPadding24":"pNi-52","verticalPadding30":"y3YOM-","verticalPadding36":"tGbjJM","verticalPadding42":"DHDuWR","verticalPadding48":"gSC-Xi"};
+var css$F = {"root":"LsffkB","multiline":"_9WZW0N","vertical-padding-24":"WAgBT-","vertical-padding-30":"oV6d-0","vertical-padding-36":"J-0NBH","vertical-padding-42":"htzWHL","vertical-padding-48":"_3tKjB1","text":"_7fNt-8","verticalPadding24":"WAgBT-","verticalPadding30":"oV6d-0","verticalPadding36":"J-0NBH","verticalPadding42":"htzWHL","verticalPadding48":"_3tKjB1"};
 
 const mergeHighlightRanges = (ranges) => {
     const mergedRanges = [];
@@ -2210,7 +2178,7 @@ const getHighlightedSearchMatches = (str, search) => {
     return getDecoratedText(str, ranges);
 };
 
-const defaultSize$1 = '36';
+const defaultSize$2 = '36';
 class PickerItem extends React__namespace.Component {
     constructor() {
         super(...arguments);
@@ -2221,24 +2189,130 @@ class PickerItem extends React__namespace.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__namespace.createElement(FlexCell, { width: "auto", cx: [css$D.root, 'uui-typography', cx] },
-            React__namespace.createElement(FlexRow, { size: itemSize, cx: isMultiline && [css$D.multiline, css$D[`vertical-padding-${itemSize}`]], spacing: "12" },
+        return (React__namespace.createElement(FlexCell, { width: "auto", cx: [css$F.root, 'uui-typography', cx] },
+            React__namespace.createElement(FlexRow, { size: itemSize, cx: isMultiline && [css$F.multiline, css$F[`vertical-padding-${itemSize}`]], spacing: "12" },
                 avatarUrl && React__namespace.createElement(uuiComponents.Avatar, { isLoading: isLoading, img: avatarUrl, size: this.getAvatarSize(itemSize, isMultiline).toString() }),
                 icon && React__namespace.createElement(uuiComponents.IconContainer, { icon: icon }),
                 React__namespace.createElement(FlexCell, { width: "auto" },
-                    title && (React__namespace.createElement(Text, { size: itemSize, cx: css$D.text, color: isDisabled ? 'disabled' : 'primary' }, isLoading ? React__namespace.createElement(TextPlaceholder, { wordsCount: 2 }) : title)),
-                    subtitle && (React__namespace.createElement(Text, { size: itemSize, color: isDisabled ? 'disabled' : 'secondary', cx: css$D.text }, isLoading ? React__namespace.createElement(TextPlaceholder, { wordsCount: 2 }) : subtitle))))));
+                    title && (React__namespace.createElement(Text, { size: itemSize, cx: css$F.text, color: isDisabled ? 'disabled' : 'primary' }, isLoading ? React__namespace.createElement(TextPlaceholder, { wordsCount: 2 }) : title)),
+                    subtitle && (React__namespace.createElement(Text, { size: itemSize, color: isDisabled ? 'disabled' : 'secondary', cx: css$F.text }, isLoading ? React__namespace.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, } = uuiComponents.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__namespace.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__namespace.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__namespace.default.createElement(React__namespace.default.Fragment, null,
+            view.selectAll && (React__namespace.default.createElement(LinkButton, { caption: hasSelection ? i18n.pickerModal.clearAllButton : i18n.pickerModal.selectAllButton, onClick: hasSelection ? () => clearSelection() : () => view.selectAll.onValueChange(true), isDisabled: isEmptyRowsAndHasNoSelection })),
+            React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
+            React__namespace.default.createElement(Button, { fill: "outline", color: "secondary", caption: i18n.pickerModal.cancelButton, onClick: () => props.abort() }),
+            React__namespace.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__namespace.default.createElement("div", { className: css$G.noFoundModalContainer },
+            React__namespace.default.createElement(uuiComponents.IconContainer, { cx: css$G.noFoundModalContainerIcon, icon: ForwardRef$u }),
+            React__namespace.default.createElement(Text, { cx: css$G.noFoundModalContainerText, fontWeight: "600", fontSize: "16", lineHeight: "24", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsMessage),
+            React__namespace.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__namespace.default.createElement(ModalBlocker, Object.assign({}, props),
+        React__namespace.default.createElement(ModalWindow, { width: 600, height: 700 },
+            React__namespace.default.createElement(ModalHeader, { title: props.caption || i18n.pickerModal.headerTitle, onClose: () => props.abort() }),
+            React__namespace.default.createElement(FlexCell, { cx: css$G.subHeaderWrapper },
+                React__namespace.default.createElement(FlexRow, { vPadding: "24" },
+                    React__namespace.default.createElement(SearchInput, Object.assign({}, dataSourceStateLens.prop('search').toProps(), { onKeyDown: (e) => uuiComponents.handleDataSourceKeyboard({
+                            value: getDataSourceState(),
+                            onValueChange: handleDataSourceValueChange,
+                            listView: view,
+                            rows: dataRows,
+                            searchPosition: 'body',
+                        }, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder }))),
+                !isSingleSelect() && (React__namespace.default.createElement(Switch, Object.assign({ cx: css$G.switch, size: "18" }, showSelectedLens.toProps(), { isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" }))),
+                props.renderFilter && React__namespace.default.createElement(FlexCell, { grow: 2 }, props.renderFilter(dataSourceStateLens.prop('filter').toProps()))),
+            React__namespace.default.createElement(DataPickerBody, Object.assign({}, getListProps(), { value: getDataSourceState(), onValueChange: handleDataSourceValueChange, search: dataSourceStateLens.prop('search').toProps(), showSearch: false, rows: rows, renderNotFound: renderNotFound, editMode: "modal" })),
+            React__namespace.default.createElement(ModalFooter, { padding: "24", vPadding: "24" }, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
+}
+
+const MAX_ITEMS = 100;
+const getMaxItems = (maxItems) => maxItems || maxItems === 0 ? maxItems : MAX_ITEMS;
+
+var css$E = {"uui-typography":"rnyfMq","hero-header":"Y7q9WB","promo-header":"OWyHdX","uui-critical":"u571OY","uui-info":"cDjRw-","uui-success":"qZ8Nyd","uui-warning":"OO9mb7","uui-highlight":"EKnIWq","uui-typography-size-12":"CTuLeT","uui-typography-size-14":"_6D-9dq","uui-typography-size-16":"WSIScG","root":"KCoBpS","mode-form":"zTtF8z","mode-cell":"egxNS9","mode-inline":"Kp8R36","size-24":"JyTGw6","size-30":"_1CaXm0","size-36":"UPirSQ","size-42":"ksodYN","size-48":"dMhsfc","uuiTypography":"rnyfMq","heroHeader":"Y7q9WB","promoHeader":"OWyHdX","uuiCritical":"u571OY","uuiInfo":"cDjRw-","uuiSuccess":"qZ8Nyd","uuiWarning":"OO9mb7","uuiHighlight":"EKnIWq","uuiTypographySize12":"CTuLeT","uuiTypographySize14":"_6D-9dq","uuiTypographySize16":"WSIScG","modeForm":"zTtF8z","modeCell":"egxNS9","modeInline":"Kp8R36","size24":"JyTGw6","size30":"_1CaXm0","size36":"UPirSQ","size42":"ksodYN","size48":"dMhsfc"};
+
+const defaultSize$1 = '36';
+const defaultMode$1 = EditMode.FORM;
+function applyPickerTogglerMods(mods) {
+    return [
+        css$E.root,
+        css$E['size-' + (mods.size || defaultSize$1)],
+        css$E['mode-' + (mods.mode || defaultMode$1)],
+    ];
+}
+function PickerTogglerComponent(props, ref) {
+    const getPickerTogglerButtonSize = (propSize) => {
+        switch (propSize) {
+            case '48':
+                return '42';
+            case '42':
+                return '36';
+            case '36':
+                return '30';
+            case '30':
+                return '24';
+            case '24':
+                return '18';
+        }
+    };
+    const getCaption = (row) => {
+        const maxItems = getMaxItems(props.maxItems);
+        if (row.isLoading) {
+            return React__namespace.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__namespace.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__namespace.createElement(uuiComponents.PickerToggler, 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__namespace.forwardRef(PickerTogglerComponent);
+
 const pickerHeight$1 = 300;
 const pickerWidth = 360;
 function PickerInputComponent(_a, ref) {
@@ -2252,11 +2326,11 @@ function PickerInputComponent(_a, ref) {
         })
             .catch(() => { });
     };
-    const { context, popperModifiers, getName, getPlaceholder, handleSelectionValueChange, getTogglerProps, getRows, handleTogglerSearchChange, toggleBodyOpening, dataSourceState, getFooterProps, getPickerBodyProps, getListProps, shouldShowBody, getSearchPosition, handlePickerInputKeyboard, } = uuiComponents.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, } = uuiComponents.usePickerInput(Object.assign(Object.assign({}, props), { toggleModalOpening }));
     const getTogglerMods = () => {
         return {
             size: props.size,
-            mode: props.mode ? props.mode : exports.EditMode.FORM,
+            mode: props.mode ? props.mode : EditMode.FORM,
         };
     };
     const renderTarget = (targetProps) => {
@@ -2273,11 +2347,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__namespace.default.createElement(PickerItem, Object.assign({ title: getName(item), size: getRowSize(), dataSourceState: dsState, highlightSearchMatches: highlightSearchMatches }, rowProps)));
+        const { flattenSearchResults } = view.getConfig();
+        return (React__namespace.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__namespace.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__namespace.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));
@@ -2300,7 +2383,7 @@ function PickerInputComponent(_a, ref) {
 }
 const PickerInput = React__namespace.default.forwardRef(PickerInputComponent);
 
-var css$C = {"row":"_3LTt5c"};
+var css$D = {"row":"igcBWl"};
 
 function PickerListItem(props) {
     var _a;
@@ -2318,7 +2401,7 @@ function PickerListItem(props) {
     else {
         component = (React__namespace.default.createElement(RadioInput, { label: label, value: props.isSelected, isDisabled: props.isLoading || !props.isSelectable || props.isDisabled, onValueChange: () => props.onSelect(props) }));
     }
-    return (React__namespace.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__namespace.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) {
@@ -2359,7 +2442,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":"CnWQ8P","hero-header":"I2-2iE","promo-header":"WYbevf","uui-critical":"hQUBmq","uui-info":"QUSI8D","uui-success":"PocQQ6","uui-warning":"ro-vLC","uui-highlight":"hT7fjA","uui-typography-size-12":"yYPapZ","uui-typography-size-14":"vEod0U","uui-typography-size-16":"EapDRc","root":"dIOwdZ","title-wrapper":"gc1suU","title":"EhAUtz","text-wrapper":"-Xnhtt","selection":"P9IxM4","postfix":"J8jc0i","selected":"_1hSOJf","uuiTypography":"CnWQ8P","heroHeader":"I2-2iE","promoHeader":"WYbevf","uuiCritical":"hQUBmq","uuiInfo":"QUSI8D","uuiSuccess":"PocQQ6","uuiWarning":"ro-vLC","uuiHighlight":"hT7fjA","uuiTypographySize12":"yYPapZ","uuiTypographySize14":"vEod0U","uuiTypographySize16":"EapDRc","titleWrapper":"gc1suU","textWrapper":"-Xnhtt"};
+var css$C = {"uui-typography":"M8mVEi","hero-header":"xeNbYZ","promo-header":"uaphsN","uui-critical":"bs7i0K","uui-info":"sYaSdF","uui-success":"VBEFvu","uui-warning":"LUuhxT","uui-highlight":"utwV1n","uui-typography-size-12":"bows1-","uui-typography-size-14":"ubBwuU","uui-typography-size-16":"bJCZJ7","root":"p0Kjta","title-wrapper":"iPyOyL","title":"lO0bb8","text-wrapper":"HEjNdv","selection":"Jopo7a","postfix":"Qjcbyq","selected":"LqZUIC","uuiTypography":"M8mVEi","heroHeader":"xeNbYZ","promoHeader":"uaphsN","uuiCritical":"bs7i0K","uuiInfo":"sYaSdF","uuiSuccess":"VBEFvu","uuiWarning":"LUuhxT","uuiHighlight":"utwV1n","uuiTypographySize12":"bows1-","uuiTypographySize14":"ubBwuU","uuiTypographySize16":"bJCZJ7","titleWrapper":"iPyOyL","textWrapper":"HEjNdv"};
 
 const defaultSize = '36';
 const FilterPanelItemToggler = React__namespace.forwardRef((props, ref) => {
@@ -2384,19 +2467,19 @@ const FilterPanelItemToggler = React__namespace.forwardRef((props, ref) => {
     };
     const getTitle = props.predicateName ? `${props.title} ${props.predicateName}` : `${props.title}${props.selection ? ':' : ''}`;
     const getSelectionText = () => props.selection.map((i, index) => (React__namespace.createElement(React__namespace.Fragment, { key: `${i}${index}` },
-        React__namespace.createElement(Text, { color: "brand", size: props.size, cx: css$B.selection }, i),
+        React__namespace.createElement(Text, { color: "brand", size: props.size, cx: css$C.selection }, i),
         (props.postfix || index !== props.selection.length - 1) && React__namespace.createElement("span", null, ",\u00A0"))));
     return (React__namespace.createElement(uuiComponents.FlexRow, Object.assign({}, props, { rawProps: {
             style: { maxWidth: `${props.maxWidth ? props.maxWidth + 'px' : 'auto'}` },
             role: 'button',
             tabIndex: props.isDisabled ? -1 : 0,
             onKeyDown: onKeyDownHandler,
-        }, cx: cx__default.default(UUI_FILTERS_PANEL_ITEM_TOGGLER, css$B.root, uuiCore.uuiElement.inputBox, uuiCore.uuiMarkers.clickable, props.isOpen && uuiCore.uuiMod.opened, `size-${props.size || defaultSize}`, props.cx), onClick: togglerPickerOpened, ref: ref }),
-        React__namespace.createElement(uuiComponents.FlexRow, { cx: css$B.titleWrapper },
-            React__namespace.createElement(Text, { size: props.size, cx: css$B.title }, getTitle),
-            props.selection && (React__namespace.createElement("div", { className: css$B.textWrapper },
+        }, cx: cx__default.default(UUI_FILTERS_PANEL_ITEM_TOGGLER, css$C.root, uuiCore.uuiElement.inputBox, uuiCore.uuiMarkers.clickable, props.isOpen && uuiCore.uuiMod.opened, `size-${props.size || defaultSize}`, props.cx), onClick: togglerPickerOpened, ref: ref }),
+        React__namespace.createElement(uuiComponents.FlexRow, { cx: css$C.titleWrapper },
+            React__namespace.createElement(Text, { size: props.size, cx: css$C.title }, getTitle),
+            props.selection && (React__namespace.createElement("div", { className: css$C.textWrapper },
                 getSelectionText(),
-                props.postfix && (React__namespace.createElement(Text, { color: "brand", size: props.size, cx: css$B.postfix }, props.postfix))))),
+                props.postfix && (React__namespace.createElement(Text, { color: "brand", size: props.size, cx: css$C.postfix }, props.postfix))))),
         !props.isDisabled && React__namespace.createElement(uuiComponents.IconContainer, { icon: systemIcons[props.size || defaultSize].foldingArrow, flipY: props.isOpen, cx: "uui-icon-dropdown" })));
 });
 
@@ -2416,14 +2499,14 @@ function FilterPickerBody(props) {
         if (rowProps.isSelectable && isSingleSelect() && props.editMode !== 'modal') {
             rowProps.onSelect = onSelect;
         }
-        return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React__namespace.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, borderBottom: "none", size: "36", padding: "12", renderItem: renderItem })));
+        return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React__namespace.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, size: "36", padding: "12", renderItem: renderItem })));
     };
     const renderFooter = () => {
         return React__namespace.createElement(DataPickerFooter, Object.assign({}, getFooterProps(), { size: "36" }));
     };
     const renderBody = (bodyProps, rows) => {
         const renderedDataRows = rows.map((props) => renderRow(props));
-        const maxHeight = uuiCore.isMobile() ? document.documentElement.clientHeight : props.dropdownHeight || pickerHeight;
+        const maxHeight = uuiCore.isMobile() ? document.documentElement.clientHeight : props.maxBodyHeight || pickerHeight;
         const maxWidth = uuiCore.isMobile() ? undefined : 360;
         return (React__namespace.createElement(React__namespace.Fragment, null,
             React__namespace.createElement(DataPickerBody, Object.assign({}, bodyProps, { selectionMode: props.selectionMode, rows: renderedDataRows, maxHeight: maxHeight, maxWidth: maxWidth, searchSize: "36", editMode: "dropdown" })),
@@ -2436,7 +2519,6 @@ function FilterPickerBody(props) {
 class FilterDatePickerBody extends uuiComponents.BaseDatePicker {
     constructor() {
         super(...arguments);
-        this.state = Object.assign(Object.assign({}, super.getValue()), { isOpen: false, inputValue: null });
         this.renderInput = () => {
             return null;
         };
@@ -2465,7 +2547,7 @@ class FilterDatePickerBody extends uuiComponents.BaseDatePicker {
     }
 }
 
-var css$A = {"uui-typography":"IYz69c","hero-header":"m40ey-","promo-header":"kQEiCw","uui-critical":"vSEYpS","uui-info":"N648iP","uui-success":"bgTbBZ","uui-warning":"K1i27o","uui-highlight":"jSuT-Z","uui-typography-size-12":"CfCC-6","uui-typography-size-14":"SY5Pni","uui-typography-size-16":"WX2HZ-","date-input":"IQSXEJ","size-24":"_-5giIB","size-30":"_0bu7l6","size-36":"mRgMW6","size-42":"KwRaUN","size-48":"tyDMgg","date-input-group":"dhdyKI","separator":"jeVW7h","mode-form":"_1WE1y8","mode-cell":"mlHM0q","uuiTypography":"IYz69c","heroHeader":"m40ey-","promoHeader":"kQEiCw","uuiCritical":"vSEYpS","uuiInfo":"N648iP","uuiSuccess":"bgTbBZ","uuiWarning":"K1i27o","uuiHighlight":"jSuT-Z","uuiTypographySize12":"CfCC-6","uuiTypographySize14":"SY5Pni","uuiTypographySize16":"WX2HZ-","dateInput":"IQSXEJ","size24":"_-5giIB","size30":"_0bu7l6","size36":"mRgMW6","size42":"KwRaUN","size48":"tyDMgg","dateInputGroup":"dhdyKI","modeForm":"_1WE1y8","modeCell":"mlHM0q"};
+var css$B = {"uui-typography":"_2lwDgc","hero-header":"_8BVo-C","promo-header":"_6wNPYK","uui-critical":"xjNSVL","uui-info":"mKh1Kg","uui-success":"_60B2v-","uui-warning":"NMVKil","uui-highlight":"z4pLMb","uui-typography-size-12":"PuerFT","uui-typography-size-14":"N3HORL","uui-typography-size-16":"u6qg78","date-input":"r7imjF","size-24":"NAFOFJ","size-30":"G-iozs","size-36":"_9muMIh","size-42":"V5z-7S","size-48":"Rh2YlB","date-input-group":"oEFGny","separator":"SnYWdz","mode-form":"L-SoDe","mode-cell":"CD-brp","uuiTypography":"_2lwDgc","heroHeader":"_8BVo-C","promoHeader":"_6wNPYK","uuiCritical":"xjNSVL","uuiInfo":"mKh1Kg","uuiSuccess":"_60B2v-","uuiWarning":"NMVKil","uuiHighlight":"z4pLMb","uuiTypographySize12":"PuerFT","uuiTypographySize14":"N3HORL","uuiTypographySize16":"u6qg78","dateInput":"r7imjF","size24":"NAFOFJ","size30":"G-iozs","size36":"_9muMIh","size42":"V5z-7S","size48":"Rh2YlB","dateInputGroup":"oEFGny","modeForm":"L-SoDe","modeCell":"CD-brp"};
 
 class FilterRangeDatePickerBody extends uuiComponents.BaseRangeDatePicker {
     constructor() {
@@ -2485,10 +2567,10 @@ class FilterRangeDatePickerBody extends uuiComponents.BaseRangeDatePicker {
                 React__namespace.createElement(RangeDatePickerBody, { value: this.getValue(), onValueChange: this.onRangeChange, filter: this.props.filter, focusPart: this.state.inFocus, changeIsOpen: this.changeIsOpen, presets: this.props.presets })),
             React__namespace.createElement(FlexCell, { alignSelf: "stretch" },
                 React__namespace.createElement(FlexRow, { padding: "24", vPadding: "12" },
-                    React__namespace.createElement("div", { className: cx__default.default(css$A.dateInputGroup, this.state.inFocus && uuiCore.uuiMod.focus) },
-                        React__namespace.createElement(TextInput, { icon: systemIcons['30'].calendar, cx: cx__default.default(css$A.dateInput, css$A['size-30'], this.state.inFocus === 'from' && uuiCore.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__namespace.createElement("div", { className: css$A.separator }),
-                        React__namespace.createElement(TextInput, { cx: cx__default.default(css$A.dateInput, css$A['size-30'], this.state.inFocus === 'to' && uuiCore.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__namespace.createElement("div", { className: cx__default.default(css$B.dateInputGroup, this.state.inFocus && uuiCore.uuiMod.focus) },
+                        React__namespace.createElement(TextInput, { icon: systemIcons['30'].calendar, cx: cx__default.default(css$B.dateInput, css$B['size-30'], this.state.inFocus === 'from' && uuiCore.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__namespace.createElement("div", { className: css$B.separator }),
+                        React__namespace.createElement(TextInput, { cx: cx__default.default(css$B.dateInput, css$B['size-30'], this.state.inFocus === 'to' && uuiCore.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__namespace.createElement(uuiComponents.FlexSpacer, null),
                     React__namespace.createElement(LinkButton, { isDisabled: !this.state.inputValue.from && !this.state.inputValue.to, caption: i18n.pickerModal.clearAllButton, onClick: this.handleCancel })))));
     }
@@ -2497,11 +2579,16 @@ class FilterRangeDatePickerBody extends uuiComponents.BaseRangeDatePicker {
     }
 }
 
-var css$z = {"container":"HzBOw9"};
+var css$A = {"container":"T9DU35"};
 
 function FilterNumericBody(props) {
     var _a, _b;
     const isInRangePredicate = (props === null || props === void 0 ? void 0 : props.selectedPredicate) === 'inRange' || (props === null || props === void 0 ? void 0 : props.selectedPredicate) === 'notInRange';
+    const isWrongRange = (from, to) => {
+        if (!to && to !== 0)
+            return false;
+        return from > to;
+    };
     const rangeValueHandler = (type) => (val) => {
         var _a, _b;
         const value = props.value;
@@ -2541,15 +2628,15 @@ function FilterNumericBody(props) {
     if (isInRangePredicate) {
         const value = props.value;
         return (React__namespace.default.createElement("div", null,
-            React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", spacing: "12", borderBottom: true, cx: css$z.container },
+            React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", spacing: "12", borderBottom: true, cx: css$A.container },
                 React__namespace.default.createElement(FlexCell, { width: "100%" },
                     React__namespace.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__namespace.default.createElement(FlexCell, { width: "100%" },
-                    React__namespace.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__namespace.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__namespace.default.createElement("div", null,
-        React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$z.container },
+        React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$A.container },
             React__namespace.default.createElement(FlexCell, { width: 130 },
                 React__namespace.default.createElement(NumericInput, { value: typeof props.value === 'number' ? props.value : null, onValueChange: props.onValueChange, size: "36", placeholder: "Enter a number", formatOptions: { maximumFractionDigits: 2 } }))),
         renderFooter()));
@@ -2589,7 +2676,7 @@ var SvgActionDeleteforever12 = function SvgActionDeleteforever12(props, ref) {
 };
 var ForwardRef$t = /*#__PURE__*/React.forwardRef(SvgActionDeleteforever12);
 
-var css$y = {"uui-typography":"YK6ylR","hero-header":"_8M5U5P","promo-header":"_6ZgMEH","uui-critical":"FTGIoC","uui-info":"tuiReD","uui-success":"_6Px-ij","uui-warning":"OUJtfV","uui-highlight":"iArzCf","uui-typography-size-12":"_50DXrm","uui-typography-size-14":"e24vsM","uui-typography-size-16":"g662VU","header":"FEbTVJ","removeButton":"dQ4V2M","with-search":"CUlYPb","uuiTypography":"YK6ylR","heroHeader":"_8M5U5P","promoHeader":"_6ZgMEH","uuiCritical":"FTGIoC","uuiInfo":"tuiReD","uuiSuccess":"_6Px-ij","uuiWarning":"OUJtfV","uuiHighlight":"iArzCf","uuiTypographySize12":"_50DXrm","uuiTypographySize14":"e24vsM","uuiTypographySize16":"g662VU","withSearch":"CUlYPb"};
+var css$z = {"uui-typography":"UEQBuU","hero-header":"_1j5wHt","promo-header":"yNUbr2","uui-critical":"pagUtC","uui-info":"KzL6Ip","uui-success":"pBa-ua","uui-warning":"_8rrQRb","uui-highlight":"B1pemW","uui-typography-size-12":"AghrTi","uui-typography-size-14":"mjM4rh","uui-typography-size-16":"ydvrpY","header":"JKJr-4","removeButton":"c04OPd","with-search":"LyubSz","uuiTypography":"UEQBuU","heroHeader":"_1j5wHt","promoHeader":"yNUbr2","uuiCritical":"pagUtC","uuiInfo":"KzL6Ip","uuiSuccess":"pBa-ua","uuiWarning":"_8rrQRb","uuiHighlight":"B1pemW","uuiTypographySize12":"AghrTi","uuiTypographySize14":"mjM4rh","uuiTypographySize16":"ydvrpY","withSearch":"LyubSz"};
 
 function FiltersToolbarItemImpl(props) {
     const { maxCount = 2 } = props;
@@ -2665,9 +2752,9 @@ function FiltersToolbarItemImpl(props) {
     };
     const renderHeader = (hideTitle) => {
         var _a;
-        return (React__namespace.default.createElement("div", { className: cx__default.default(css$y.header, isPickersType && ((_a = props.showSearch) !== null && _a !== void 0 ? _a : css$y.withSearch)) },
+        return (React__namespace.default.createElement("div", { className: cx__default.default(css$z.header, isPickersType && ((_a = props.showSearch) !== null && _a !== void 0 ? _a : css$z.withSearch)) },
             props.predicates ? (React__namespace.default.createElement(MultiSwitch, { items: props.predicates.map((i) => ({ id: i.predicate, caption: i.name })), value: predicate, onValueChange: changePredicate, size: "24" })) : (!hideTitle && (React__namespace.default.createElement(Text, { color: "secondary", size: "24", fontSize: "14" }, props.title))),
-            !(props === null || props === void 0 ? void 0 : props.isAlwaysVisible) && (React__namespace.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__namespace.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;
@@ -2890,9 +2977,9 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = React__namespace.default.memo(FiltersToolbarImpl);
 
-var css$x = {"divider":"D5jLlV","dropdownDeleteIcon":"-wr0mb","presetsWrapper":"WUaRgU","addPresetContainer":"pteYE6","dropContainer":"G7XOkR"};
+var css$y = {"divider":"Z1EP4U","dropdownDeleteIcon":"M47n0M","presetsWrapper":"NMQBav","addPresetContainer":"_3lJYYr","dropContainer":"qBKiM8"};
 
-var css$w = {"preset-dropdown-panel":"XEaQGM","delete-row":"_3dSF9v","delete-button":"_93LBF8","targetOpen":"cG26d3","presetDropdownPanel":"XEaQGM","deleteRow":"_3dSF9v","deleteButton":"_93LBF8"};
+var css$x = {"preset-dropdown-panel":"_6G8WBh","delete-row":"_45Cg-t","delete-button":"Z3dZnN","targetOpen":"mW5tkT","presetDropdownPanel":"_6G8WBh","deleteRow":"_45Cg-t","deleteButton":"Z3dZnN"};
 
 var _path$q;
 function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
@@ -3057,7 +3144,7 @@ function PresetActionsDropdown(props) {
     ]);
     const renderBody = () => {
         const isReadonlyPreset = props.preset.isReadonly;
-        return (React__namespace.default.createElement(Panel, { background: "surface-main", shadow: true, cx: css$w.presetDropdownPanel },
+        return (React__namespace.default.createElement(Panel, { background: "surface-main", shadow: true, cx: css$x.presetDropdownPanel },
             props.activePresetId === props.preset.id && props.hasPresetChanged(props.preset) && (React__namespace.default.createElement(React__namespace.default.Fragment, null,
                 !isReadonlyPreset && (React__namespace.default.createElement(FlexRow, { key: `${props.preset.id}-save-in-current` },
                     React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$q, caption: "Save in current", onClick: saveInCurrentHandler }))),
@@ -3071,16 +3158,16 @@ function PresetActionsDropdown(props) {
                 React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$n, caption: "Duplicate", onClick: duplicateHandler })),
             React__namespace.default.createElement(FlexRow, { borderBottom: true, key: `${props.preset.id}-copyLink` },
                 React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$l, caption: "Copy Link", onClick: copyUrlToClipboard })),
-            !isReadonlyPreset && (React__namespace.default.createElement(FlexRow, { key: `${props.preset.id}-delete`, cx: css$w.deleteRow },
-                React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$k, caption: "Delete", cx: css$w.deleteButton, onClick: deleteHandler })))));
+            !isReadonlyPreset && (React__namespace.default.createElement(FlexRow, { key: `${props.preset.id}-delete`, cx: css$x.deleteRow },
+                React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$k, caption: "Delete", cx: css$x.deleteButton, onClick: deleteHandler })))));
     };
     const renderTarget = React.useCallback((dropdownProps) => {
-        return (React__namespace.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__namespace.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__namespace.default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", modifiers: [{ name: 'offset', options: { offset: [0, 22] } }] }));
 }
 
-var css$v = {"preset-input-cell":"O22AP9","preset-input":"rcZWYX","presetInputCell":"O22AP9","presetInput":"rcZWYX"};
+var css$w = {"preset-input-cell":"btqiSH","preset-input":"eDBfhW","presetInputCell":"btqiSH","presetInput":"eDBfhW"};
 
 const UUI_PRESETS_PANEL_ADD_BUTTON = 'uui-presets-panel-add-button';
 const UUI_PRESETS_PANEL_MORE_BUTTON = 'uui-presets-panel-more-button';
@@ -3090,15 +3177,18 @@ const UUI_PRESETS_PANEL_PRESET = 'uui-presets-panel-preset';
 function PresetInput(props) {
     var _a;
     const [presetCaption, setPresetCaption] = React.useState(((_a = props.preset) === null || _a === void 0 ? void 0 : _a.name) || '');
+    const [readonly, setReadonly] = React.useState(false);
     const cancelActionHandler = React.useCallback(() => {
         setPresetCaption('');
         props.onCancel();
     }, [props.onCancel]);
     const acceptActionHandler = React.useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        setReadonly(() => true);
         if (presetCaption) {
             yield props.onSuccess(presetCaption);
         }
         props.onCancel();
+        setReadonly(() => false);
     }), [presetCaption]);
     const newPresetOnBlurHandler = React.useCallback(() => {
         if (presetCaption.length) {
@@ -3106,11 +3196,11 @@ function PresetInput(props) {
         }
         props.onCancel();
     }, [presetCaption.length, props.onCancel]);
-    return (React__namespace.default.createElement(FlexCell, { cx: [css$v.presetInputCell, UUI_PRESETS_PANEL_INPUT], minWidth: 180 },
-        React__namespace.default.createElement(TextInput, { cx: css$v.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50 })));
+    return (React__namespace.default.createElement(FlexCell, { cx: [css$w.presetInputCell, UUI_PRESETS_PANEL_INPUT], minWidth: 180 },
+        React__namespace.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":"I9IbU6","activePreset":"_250fmA"};
+var css$v = {"preset":"vjDQ-S","activePreset":"pIaB6m"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = React.useState(false);
@@ -3128,7 +3218,7 @@ function Preset(props) {
         return props.updatePreset(newPreset);
     }, [props.preset]);
     const isPresetActive = props.activePresetId === props.preset.id;
-    return (React__namespace.default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__namespace.default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__namespace.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__namespace.default.createElement(PresetActionsDropdown, Object.assign({ renamePreset: setPresetForRename }, props)), iconPosition: "right", isLinkActive: isPresetActive }))));
+    return (React__namespace.default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__namespace.default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__namespace.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__namespace.default.createElement(PresetActionsDropdown, Object.assign({ renamePreset: setPresetForRename }, props)), iconPosition: "right", isLinkActive: isPresetActive }))));
 }
 
 function PresetsPanel(props) {
@@ -3144,16 +3234,16 @@ function PresetsPanel(props) {
         return React__namespace.default.createElement(Preset, Object.assign({ key: preset.id, preset: preset, addPreset: setAddingPreset }, presetApi));
     };
     const renderAddPresetButton = React.useCallback(() => {
-        return (React__namespace.default.createElement("div", { key: "addingPresetBlock", className: css$x.addPresetContainer }, !isAddingPreset ? (React__namespace.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__namespace.default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
+        return (React__namespace.default.createElement("div", { key: "addingPresetBlock", className: css$y.addPresetContainer }, !isAddingPreset ? (React__namespace.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__namespace.default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
     }, [isAddingPreset]);
     const onPresetDropdownSelect = (preset) => {
         props.choosePreset(preset.preset);
     };
     const renderMoreButtonDropdown = (item, hiddenItems) => {
         return (React__namespace.default.createElement(Dropdown, { key: "more", renderTarget: (props) => (React__namespace.default.createElement(FlexRow, null,
-                React__namespace.default.createElement("div", { className: css$x.divider }),
-                React__namespace.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__namespace.default.createElement(DropdownContainer, Object.assign({ cx: uuiCore.cx(css$x.dropContainer), width: 230 }, propsBody),
-                React__namespace.default.createElement(uuiComponents.ScrollBars, null, hiddenItems.map((hiddenItem) => (React__namespace.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__namespace.default.createElement("div", { className: css$y.divider }),
+                React__namespace.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__namespace.default.createElement(DropdownContainer, Object.assign({ cx: uuiCore.cx(css$y.dropContainer), width: 230 }, propsBody),
+                React__namespace.default.createElement(uuiComponents.ScrollBars, null, hiddenItems.map((hiddenItem) => (React__namespace.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;
@@ -3171,7 +3261,7 @@ function PresetsPanel(props) {
         ];
     };
     return (React__namespace.default.createElement(FlexCell, { grow: 1, minWidth: 310, rawProps: props.rawProps },
-        React__namespace.default.createElement(FlexRow, { size: null, spacing: "12", cx: css$x.presetsWrapper },
+        React__namespace.default.createElement(FlexRow, { size: null, spacing: "12", cx: css$y.presetsWrapper },
             React__namespace.default.createElement(uuiComponents.AdaptivePanel, { items: getPanelItems() }))));
 }
 
@@ -3209,7 +3299,7 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var css$t = {"line-height-12":"avBYJu","line-height-18":"E57gfi","line-height-24":"HcVwhb","line-height-30":"_30i0V0","font-size-10":"fTrQj0","font-size-12":"nKZDnQ","font-size-14":"skTOh6","font-size-16":"ERqp1D","font-size-18":"_8bl-Di","font-size-24":"Ss0lKt","v-padding-2":"o65hcl","v-padding-3":"QeC1PH","v-padding-5":"NvI9aq","v-padding-6":"Dn2BeI","v-padding-8":"mFWiNx","v-padding-9":"KCYb3Y","v-padding-11":"KxYY97","v-padding-12":"RkqW8e","v-padding-14":"_4ySUfS","v-padding-15":"W-lQJL","v-padding-17":"X2lSMC","v-padding-18":"XnQJTY","v-padding-23":"OxLHZJ","v-padding-24":"SiN3Cr","lineHeight12":"avBYJu","lineHeight18":"E57gfi","lineHeight24":"HcVwhb","lineHeight30":"_30i0V0","fontSize10":"fTrQj0","fontSize12":"nKZDnQ","fontSize14":"skTOh6","fontSize16":"ERqp1D","fontSize18":"_8bl-Di","fontSize24":"Ss0lKt","vPadding2":"o65hcl","vPadding3":"QeC1PH","vPadding5":"NvI9aq","vPadding6":"Dn2BeI","vPadding8":"mFWiNx","vPadding9":"KCYb3Y","vPadding11":"KxYY97","vPadding12":"RkqW8e","vPadding14":"_4ySUfS","vPadding15":"W-lQJL","vPadding17":"X2lSMC","vPadding18":"XnQJTY","vPadding23":"OxLHZJ","vPadding24":"SiN3Cr"};
+var css$u = {"line-height-12":"Q3Qv20","line-height-18":"b2hPSQ","line-height-24":"-Y5Dym","line-height-30":"_5IVeZI","font-size-10":"X2628I","font-size-12":"foSWQO","font-size-14":"-KuFcE","font-size-16":"_6GiZro","font-size-18":"_3-cMrq","font-size-24":"BgjE93","v-padding-2":"GU0pk-","v-padding-3":"wwmr9r","v-padding-5":"_8LoTzH","v-padding-6":"ceppc7","v-padding-8":"dIEGa8","v-padding-9":"ACLoGo","v-padding-11":"LasNdx","v-padding-12":"_6Zp8gd","v-padding-14":"D6QLyh","v-padding-15":"v8P1uJ","v-padding-17":"NZIe-B","v-padding-18":"oTUz6B","v-padding-23":"_8CrI9s","v-padding-24":"Cw8ljy","lineHeight12":"Q3Qv20","lineHeight18":"b2hPSQ","lineHeight24":"-Y5Dym","lineHeight30":"_5IVeZI","fontSize10":"X2628I","fontSize12":"foSWQO","fontSize14":"-KuFcE","fontSize16":"_6GiZro","fontSize18":"_3-cMrq","fontSize24":"BgjE93","vPadding2":"GU0pk-","vPadding3":"wwmr9r","vPadding5":"_8LoTzH","vPadding6":"ceppc7","vPadding8":"dIEGa8","vPadding9":"ACLoGo","vPadding11":"LasNdx","vPadding12":"_6Zp8gd","vPadding14":"D6QLyh","vPadding15":"v8P1uJ","vPadding17":"NZIe-B","vPadding18":"oTUz6B","vPadding23":"_8CrI9s","vPadding24":"Cw8ljy"};
 
 const defaultTextSettings = {
     18: { lineHeight: 12, fontSize: 10 },
@@ -3222,7 +3312,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,
@@ -3231,11 +3321,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":"ZS02bT"};
+var css$t = {"root":"DItj1X"};
 
 function applyTextMods(mods) {
     const textClasses = getTextClasses({
@@ -3244,7 +3334,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'}`,
@@ -3252,9 +3342,9 @@ function applyTextMods(mods) {
         'uui-typography',
     ].concat(textClasses);
 }
-const Text = uuiCore.withMods(uuiComponents.Text, applyTextMods);
+const Text = uuiCore.withMods(uuiComponents__namespace.Text, applyTextMods);
 
-var css$r = {"root":"_8S5txb","loading-word":"JgYCAr","animated-loading":"bsGZj6","skeleton_loading":"_6tz9-r","loadingWord":"JgYCAr","animatedLoading":"bsGZj6","skeletonLoading":"_6tz9-r"};
+var css$s = {"root":"P-9agp","loading-word":"MkiESq","animated-loading":"fYEbdN","skeleton_loading":"_0dREls","loadingWord":"MkiESq","animatedLoading":"fYEbdN","skeletonLoading":"_0dREls"};
 
 const TextPlaceholder = (props) => {
     const pattern = '&nbsp;';
@@ -3266,35 +3356,35 @@ const TextPlaceholder = (props) => {
         }
         return words;
     }, [props.wordsCount]);
-    return (React__namespace.createElement("div", Object.assign({ "aria-busy": true, className: cx__default.default(css$r.root, 'uui-text-placeholder') }, props.rawProps), text.map((it, index) => (React__namespace.createElement("span", { key: index, className: cx__default.default([
-            props.cx, css$r.loadingWord, !props.isNotAnimated && css$r.animatedLoading,
+    return (React__namespace.createElement("div", Object.assign({ "aria-busy": true, className: cx__default.default(css$s.root, 'uui-text-placeholder') }, props.rawProps), text.map((it, index) => (React__namespace.createElement("span", { key: index, className: cx__default.default([
+            props.cx, css$s.loadingWord, !props.isNotAnimated && css$s.animatedLoading,
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
 const RichTextView = uuiCore.withMods(uuiComponents__namespace.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || '14'}`]);
 
-var css$q = {"uui-typography":"Vf-5m2","hero-header":"xz9j81","promo-header":"OCzS5-","uui-critical":"-bt4pv","uui-info":"VkkzBT","uui-success":"MNUQyx","uui-warning":"_8cs8xc","uui-highlight":"nxr6Ye","uui-typography-size-12":"O67zRe","uui-typography-size-14":"qwU6sL","uui-typography-size-16":"Lpw1i1","root":"QtOnU6","modal-blocker":"Y1wNMj","animateModalBlocker":"fTweE3","modal":"Lo7Q-r","modal-footer":"E1KfIM","border-top":"KjqOCG","modal-header":"zFuMMW","uuiTypography":"Vf-5m2","heroHeader":"xz9j81","promoHeader":"OCzS5-","uuiCritical":"-bt4pv","uuiInfo":"VkkzBT","uuiSuccess":"MNUQyx","uuiWarning":"_8cs8xc","uuiHighlight":"nxr6Ye","uuiTypographySize12":"O67zRe","uuiTypographySize14":"qwU6sL","uuiTypographySize16":"Lpw1i1","modalBlocker":"Y1wNMj","modalFooter":"E1KfIM","borderTop":"KjqOCG","modalHeader":"zFuMMW"};
+var css$r = {"uui-typography":"f6ZPMH","hero-header":"PgfwBt","promo-header":"xHf-Qy","uui-critical":"VCWEeY","uui-info":"uupi3E","uui-success":"O-xjaZ","uui-warning":"BawFT3","uui-highlight":"-qLPBR","uui-typography-size-12":"jTf91y","uui-typography-size-14":"eJOD6F","uui-typography-size-16":"_33SiIY","root":"oNoJ1-","modal-blocker":"IMYXBd","animateModalBlocker":"lA4rkX","modal":"MlJggs","modal-footer":"v-dKkp","border-top":"a6-Xsg","modal-header":"CIOQR4","uuiTypography":"f6ZPMH","heroHeader":"PgfwBt","promoHeader":"xHf-Qy","uuiCritical":"VCWEeY","uuiInfo":"uupi3E","uuiSuccess":"O-xjaZ","uuiWarning":"BawFT3","uuiHighlight":"-qLPBR","uuiTypographySize12":"jTf91y","uuiTypographySize14":"eJOD6F","uuiTypographySize16":"_33SiIY","modalBlocker":"IMYXBd","modalFooter":"v-dKkp","borderTop":"a6-Xsg","modalHeader":"CIOQR4"};
 
-const ModalBlocker = uuiCore.withMods(uuiComponents.ModalBlocker, () => [css$q.modalBlocker]);
-const ModalWindow = uuiCore.withMods(uuiComponents.ModalWindow, () => [css$q.root, css$q.modal], (props) => ({
+const ModalBlocker = uuiCore.withMods(uuiComponents.ModalBlocker, () => [css$r.modalBlocker]);
+const ModalWindow = uuiCore.withMods(uuiComponents.ModalWindow, () => [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__namespace.Component {
     render() {
-        return (React__namespace.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__namespace.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__namespace.createElement(Text, { size: "48", fontSize: "18", fontWeight: "600" }, this.props.title)),
             this.props.children,
             this.props.onClose && React__namespace.createElement(uuiComponents.FlexSpacer, null),
             this.props.onClose && (React__namespace.createElement(FlexCell, { shrink: 0, width: "auto" },
-                React__namespace.createElement(IconButton, { rawProps: { 'aria-label': 'Close modal' }, icon: ForwardRef$A, onClick: this.props.onClose })))));
+                React__namespace.createElement(IconButton, { rawProps: { 'aria-label': 'Close modal' }, icon: ForwardRef$C, onClick: this.props.onClose })))));
     }
 }
 class ModalFooter extends React__namespace.Component {
     render() {
         return (React__namespace.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));
     }
@@ -3316,7 +3406,7 @@ var SvgCross = function SvgCross(props, ref) {
 };
 var ForwardRef$j = /*#__PURE__*/React.forwardRef(SvgCross);
 
-var css$p = {"uui-typography":"_3F-4Qj","hero-header":"JIunMu","promo-header":"SgG146","uui-critical":"DnlVM0","uui-info":"_0IrNax","uui-success":"X7nbYF","uui-warning":"KPWQJc","uui-highlight":"nI6Nhx","uui-typography-size-12":"v-2pis","uui-typography-size-14":"sd574a","uui-typography-size-16":"L8iAxb","root":"T6irSs","icon-wrapper":"ShVRgg","action-wrapper":"nxc4IV","action-link":"hCStCC","close-icon":"pu-q19","main-path":"Jps3aq","content":"aFDcQa","clear-button":"PRsA6R","close-wrapper":"_702bUI","uuiTypography":"_3F-4Qj","heroHeader":"JIunMu","promoHeader":"SgG146","uuiCritical":"DnlVM0","uuiInfo":"_0IrNax","uuiSuccess":"X7nbYF","uuiWarning":"KPWQJc","uuiHighlight":"nI6Nhx","uuiTypographySize12":"v-2pis","uuiTypographySize14":"sd574a","uuiTypographySize16":"L8iAxb","iconWrapper":"ShVRgg","actionWrapper":"nxc4IV","actionLink":"hCStCC","closeIcon":"pu-q19","mainPath":"Jps3aq","clearButton":"PRsA6R","closeWrapper":"_702bUI"};
+var css$q = {"uui-typography":"sFBkBg","hero-header":"StNapT","promo-header":"CS05tn","uui-critical":"ngZ-G4","uui-info":"B8KdLt","uui-success":"z1elXG","uui-warning":"Tfz-JO","uui-highlight":"_4JjDbF","uui-typography-size-12":"k-Y8Ep","uui-typography-size-14":"Yr5doO","uui-typography-size-16":"mqDLhc","root":"s94Q--","icon-wrapper":"cWsS2D","action-wrapper":"gwavNo","action-link":"kyAv4L","close-icon":"yGMm-K","main-path":"_40-nmH","content":"CZnEOw","clear-button":"_3xT2Pt","close-wrapper":"-I9ntX","uuiTypography":"sFBkBg","heroHeader":"StNapT","promoHeader":"CS05tn","uuiCritical":"ngZ-G4","uuiInfo":"B8KdLt","uuiSuccess":"z1elXG","uuiWarning":"Tfz-JO","uuiHighlight":"_4JjDbF","uuiTypographySize12":"k-Y8Ep","uuiTypographySize14":"Yr5doO","uuiTypographySize16":"mqDLhc","iconWrapper":"cWsS2D","actionWrapper":"gwavNo","actionLink":"kyAv4L","closeIcon":"yGMm-K","mainPath":"_40-nmH","clearButton":"_3xT2Pt","closeWrapper":"-I9ntX"};
 
 const NotificationCard = React__namespace.default.forwardRef((props, ref) => {
     const notificationCardNode = React__namespace.default.useRef(null);
@@ -3331,23 +3421,23 @@ const NotificationCard = React__namespace.default.forwardRef((props, ref) => {
             (_b = notificationCardNode.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', props.refreshTimer);
         };
     }, []);
-    return (React__namespace.default.createElement("div", Object.assign({ role: "alert", className: cx__default.default('uui-notification_card', props.color && `uui-color-${props.color}`, css$p.root, props.cx), ref: notificationCardNode }, props.rawProps),
-        React__namespace.default.createElement("div", { className: css$p.mainPath },
-            props.icon && (React__namespace.default.createElement("div", { className: css$p.iconWrapper },
-                React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, cx: css$p.actionIcon }))),
-            React__namespace.default.createElement("div", { className: css$p.content },
+    return (React__namespace.default.createElement("div", Object.assign({ role: "alert", className: cx__default.default('uui-notification_card', props.color && `uui-color-${props.color}`, css$q.root, props.cx), ref: notificationCardNode }, props.rawProps),
+        React__namespace.default.createElement("div", { className: css$q.mainPath },
+            props.icon && (React__namespace.default.createElement("div", { className: css$q.iconWrapper },
+                React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, cx: css$q.actionIcon }))),
+            React__namespace.default.createElement("div", { className: css$q.content },
                 props.children,
-                props.actions && (React__namespace.default.createElement("div", { className: css$p.actionWrapper }, props.actions.map((action) => (React__namespace.default.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$p.actionLink, size: "36", rawProps: action.rawProps })))))),
-            props.onClose && (React__namespace.default.createElement("div", { className: css$p.closeWrapper },
-                React__namespace.default.createElement(IconButton, { icon: ForwardRef$j, color: "neutral", onClick: props.onClose, cx: css$p.closeIcon }))))));
+                props.actions && (React__namespace.default.createElement("div", { className: css$q.actionWrapper }, props.actions.map((action) => (React__namespace.default.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$q.actionLink, size: "36", rawProps: action.rawProps })))))),
+            props.onClose && (React__namespace.default.createElement("div", { className: css$q.closeWrapper },
+                React__namespace.default.createElement(IconButton, { icon: ForwardRef$j, color: "neutral", onClick: props.onClose, cx: css$q.closeIcon }))))));
 });
-const WarningNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$D, color: "warning" }, props, { ref: ref, cx: props.cx }))));
-const SuccessNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$E, color: "success" }, props, { ref: ref, cx: props.cx }))));
-const HintNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$B, color: "info" }, props, { ref: ref, cx: props.cx }))));
-const ErrorNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$C, color: "error" }, props, { ref: ref, cx: props.cx }))));
+const WarningNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$F, color: "warning" }, props, { ref: ref, cx: props.cx }))));
+const SuccessNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$G, color: "success" }, props, { ref: ref, cx: props.cx }))));
+const HintNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$D, color: "info" }, props, { ref: ref, cx: props.cx }))));
+const ErrorNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$E, color: "error" }, props, { ref: ref, cx: props.cx }))));
 class ClearNotification extends React__namespace.default.Component {
     render() {
-        return (React__namespace.default.createElement("div", { className: cx__default.default(css$p.notificationWrapper, css$p.clearButton) },
+        return (React__namespace.default.createElement("div", { className: cx__default.default(css$q.notificationWrapper, css$q.clearButton) },
             React__namespace.default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => this.context.uuiNotifications.clearAll() })));
     }
 }
@@ -3370,7 +3460,7 @@ class ConfirmationModal extends React__namespace.Component {
     }
 }
 
-const defaultMode = exports.EditMode.FORM;
+const defaultMode = EditMode.FORM;
 class DatePickerComponent extends uuiComponents.BaseDatePicker {
     constructor() {
         super(...arguments);
@@ -3387,7 +3477,7 @@ class DatePickerComponent extends uuiComponents.BaseDatePicker {
                     });
                 }
             }
-            return (React__namespace.default.createElement(TextInput, Object.assign({}, props, { onClick: null, isDropdown: false, cx: uuiCore.cx(this.props.inputCx, this.state.isOpen && uuiCore.uuiMod.focus), icon: this.props.mode !== exports.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__namespace.default.createElement(TextInput, Object.assign({}, props, { onClick: null, isDropdown: false, cx: uuiCore.cx(this.props.inputCx, this.state.isOpen && uuiCore.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) {
@@ -3399,14 +3489,14 @@ class DatePickerComponent extends uuiComponents.BaseDatePicker {
 }
 const DatePicker = uuiCore.withMods(DatePickerComponent);
 
-var css$o = {"uui-typography":"VX2hVo","hero-header":"nK0hH9","promo-header":"pQm6XK","uui-critical":"_5oScLn","uui-info":"CWBPU3","uui-success":"G9-VY0","uui-warning":"_1-lKGe","uui-highlight":"NRB5KI","uui-typography-size-12":"YDJF5x","uui-typography-size-14":"aLsYj0","uui-typography-size-16":"zC6k4v","root":"Ag-nVM","uuiTypography":"VX2hVo","heroHeader":"nK0hH9","promoHeader":"pQm6XK","uuiCritical":"_5oScLn","uuiInfo":"CWBPU3","uuiSuccess":"G9-VY0","uuiWarning":"_1-lKGe","uuiHighlight":"NRB5KI","uuiTypographySize12":"YDJF5x","uuiTypographySize14":"aLsYj0","uuiTypographySize16":"zC6k4v"};
+var css$p = {"uui-typography":"bZ8Kto","hero-header":"dAccHM","promo-header":"psAXn5","uui-critical":"CMuqb8","uui-info":"ueKHKJ","uui-success":"_5LQoOE","uui-warning":"_2RXCwf","uui-highlight":"ZyWyEm","uui-typography-size-12":"M-AxUK","uui-typography-size-14":"ef1Z6m","uui-typography-size-16":"eG-WlI","root":"RFldna","uuiTypography":"bZ8Kto","heroHeader":"dAccHM","promoHeader":"psAXn5","uuiCritical":"CMuqb8","uuiInfo":"ueKHKJ","uuiSuccess":"_5LQoOE","uuiWarning":"_2RXCwf","uuiHighlight":"ZyWyEm","uuiTypographySize12":"M-AxUK","uuiTypographySize14":"ef1Z6m","uuiTypographySize16":"eG-WlI"};
 
 function applyCalendarPresetsMods() {
-    return [css$o.root];
+    return [css$p.root];
 }
 const CalendarPresets = uuiCore.withMods(uuiComponents.CalendarPresets, applyCalendarPresetsMods, () => ({}));
 
-var css$n = {"uui-typography":"_6wLpBf","hero-header":"CazX0m","promo-header":"gfzT07","uui-critical":"SbHsAO","uui-info":"hgYwsy","uui-success":"j-GDBi","uui-warning":"ifg6rB","uui-highlight":"BZfsgs","uui-typography-size-12":"Q5f7F0","uui-typography-size-14":"MfT0fY","uui-typography-size-16":"hTJaxz","root":"Uv-4T-","container":"gAPRpn","day-selection":"rYYeJj","from-picker":"_2BOC5P","to-picker":"W6b37B","bodes-wrapper":"egfl-H","blocker":"_20OeP8","uuiTypography":"_6wLpBf","heroHeader":"CazX0m","promoHeader":"gfzT07","uuiCritical":"SbHsAO","uuiInfo":"hgYwsy","uuiSuccess":"j-GDBi","uuiWarning":"ifg6rB","uuiHighlight":"BZfsgs","uuiTypographySize12":"Q5f7F0","uuiTypographySize14":"MfT0fY","uuiTypographySize16":"hTJaxz","daySelection":"rYYeJj","fromPicker":"_2BOC5P","toPicker":"W6b37B","bodesWrapper":"egfl-H"};
+var css$o = {"uui-typography":"ApF0f6","hero-header":"sa7spX","promo-header":"-XeD2o","uui-critical":"Guz4Wd","uui-info":"Jeu0Pd","uui-success":"k-82q7","uui-warning":"_2SSylT","uui-highlight":"y4id8a","uui-typography-size-12":"_4GNZxp","uui-typography-size-14":"_47xpUq","uui-typography-size-16":"Yku-yE","root":"VFKRX9","container":"yNLlMq","day-selection":"YmPPoM","from-picker":"-RwAFR","to-picker":"SYet8F","bodes-wrapper":"loM9hh","blocker":"NEGsCT","uuiTypography":"ApF0f6","heroHeader":"sa7spX","promoHeader":"-XeD2o","uuiCritical":"Guz4Wd","uuiInfo":"Jeu0Pd","uuiSuccess":"k-82q7","uuiWarning":"_2SSylT","uuiHighlight":"y4id8a","uuiTypographySize12":"_4GNZxp","uuiTypographySize14":"_47xpUq","uuiTypographySize16":"Yku-yE","daySelection":"YmPPoM","fromPicker":"-RwAFR","toPicker":"SYet8F","bodesWrapper":"loM9hh"};
 
 dayjs__default.default.extend(isoWeek__default.default);
 function weekCount(displayedDate) {
@@ -3466,60 +3556,56 @@ class RangeDatePickerBody extends React__namespace.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__default.default(this.props.value.selectedDate.from).valueOf() : null;
-            const toValue = ((_b = this.props.value) === null || _b === void 0 ? void 0 : _b.selectedDate.to) ? dayjs__default.default(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__default.default(this.props.value.selectedDate.from).valueOf() : null;
+            const toValue = ((_b = this.props.value.selectedDate) === null || _b === void 0 ? void 0 : _b.to) ? dayjs__default.default(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) && uuiComponents.uuiDaySelection.selectedDay,
-            ];
+            return [uuiCore.cx(inRange && uuiRangeDatePickerBody.inRange, isFirst && uuiRangeDatePickerBody.firstDayInRangeWrapper, !inRange && isFirst && uuiRangeDatePickerBody.lastDayInRangeWrapper, isLast && uuiRangeDatePickerBody.lastDayInRangeWrapper, !inRange && isLast && uuiRangeDatePickerBody.firstDayInRangeWrapper, (dayValue === fromValue || dayValue === toValue) && uuiComponents.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__namespace.createElement(React__namespace.Fragment, null,
                 React__namespace.createElement("div", { className: uuiRangeDatePickerBody.separator }),
                 React__namespace.createElement(CalendarPresets, { forwardedRef: this.props.forwardedRef, onPresetSet: (presetVal) => {
+                        var _a, _b;
                         this.props.onValueChange({
                             view: 'DAY_SELECTION',
                             selectedDate: { from: dayjs__default.default(presetVal.from).format(uuiComponents.valueFormat), to: dayjs__default.default(presetVal.to).format(uuiComponents.valueFormat) },
                             displayedDate: dayjs__default.default(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__namespace.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__namespace.createElement(FlexRow, { cx: [this.props.value.view === 'DAY_SELECTION' && css$o.daySelection, css$o.container], alignItems: "top" },
                 React__namespace.createElement(FlexCell, { width: "auto" },
                     React__namespace.createElement(FlexRow, null,
-                        React__namespace.createElement(FlexRow, { cx: css$n.bodesWrapper, alignItems: "top" },
-                            React__namespace.createElement(DatePickerBody, { cx: uuiCore.cx(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__namespace.createElement(DatePickerBody, { cx: uuiCore.cx(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__namespace.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__namespace.createElement(FlexRow, { cx: css$o.bodesWrapper, alignItems: "top" },
+                            React__namespace.createElement(DatePickerBody, { cx: uuiCore.cx(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__namespace.createElement(DatePickerBody, { cx: uuiCore.cx(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__namespace.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__default.default(selectedDate))) {
             if (this.props.focusPart === 'from') {
                 if (dayjs__default.default(selectedDate).valueOf() <= dayjs__default.default(currentRange.to).valueOf()) {
@@ -3548,10 +3634,11 @@ class RangeDatePickerBody extends React__namespace.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) {
@@ -3563,18 +3650,18 @@ class RangeDatePickerBody extends React__namespace.Component {
         });
     }
     render() {
-        return (React__namespace.createElement("div", Object.assign({ className: uuiCore.cx(css$n.root, uuiComponents.uuiDatePickerBodyBase.container, this.props.cx) }, this.props.rawProps), this.renderDatePicker()));
+        return (React__namespace.createElement("div", Object.assign({ className: uuiCore.cx(css$o.root, uuiComponents.uuiDatePickerBodyBase.container, this.props.cx) }, this.props.rawProps), this.renderDatePicker()));
     }
 }
 
-var css$m = {"uui-typography":"B6kF--","hero-header":"IGpi7x","promo-header":"szdRP-","uui-critical":"imltvA","uui-info":"jBz8i7","uui-success":"fGGFeD","uui-warning":"v0HpWS","uui-highlight":"wLiXrB","uui-typography-size-12":"fZcEf8","uui-typography-size-14":"CQONdO","uui-typography-size-16":"aXzAG2","dropdown-container":"lqIV7y","date-input":"HypyHv","size-24":"VORxcG","size-30":"JKttGA","size-36":"_8OmYLv","size-42":"qGatut","size-48":"OZjo--","date-input-group":"Y-ffAT","separator":"awQJBq","mode-form":"rmEnNV","mode-cell":"X8uAwS","uuiTypography":"B6kF--","heroHeader":"IGpi7x","promoHeader":"szdRP-","uuiCritical":"imltvA","uuiInfo":"jBz8i7","uuiSuccess":"fGGFeD","uuiWarning":"v0HpWS","uuiHighlight":"wLiXrB","uuiTypographySize12":"fZcEf8","uuiTypographySize14":"CQONdO","uuiTypographySize16":"aXzAG2","dropdownContainer":"lqIV7y","dateInput":"HypyHv","size24":"VORxcG","size30":"JKttGA","size36":"_8OmYLv","size42":"qGatut","size48":"OZjo--","dateInputGroup":"Y-ffAT","modeForm":"rmEnNV","modeCell":"X8uAwS"};
+var css$n = {"uui-typography":"Gcc5-5","hero-header":"HYhJlC","promo-header":"e2-Qgk","uui-critical":"sF7SYO","uui-info":"Y9t9cM","uui-success":"_9xIBJM","uui-warning":"pKt-iq","uui-highlight":"lDt-Pg","uui-typography-size-12":"g9vN-o","uui-typography-size-14":"V4yVlK","uui-typography-size-16":"_7qoN8F","dropdown-container":"O-7jjq","date-input":"vnE-r2","size-24":"cVVoe0","size-30":"wHMCCG","size-36":"w393Fs","size-42":"ZDucAV","size-48":"_9SEOQW","date-input-group":"l6WjbD","separator":"hsO1Cw","mode-form":"RBB8BD","mode-cell":"tGoz1b","uuiTypography":"Gcc5-5","heroHeader":"HYhJlC","promoHeader":"e2-Qgk","uuiCritical":"sF7SYO","uuiInfo":"Y9t9cM","uuiSuccess":"_9xIBJM","uuiWarning":"pKt-iq","uuiHighlight":"lDt-Pg","uuiTypographySize12":"g9vN-o","uuiTypographySize14":"V4yVlK","uuiTypographySize16":"_7qoN8F","dropdownContainer":"O-7jjq","dateInput":"vnE-r2","size24":"cVVoe0","size30":"wHMCCG","size36":"w393Fs","size42":"ZDucAV","size48":"_9SEOQW","dateInputGroup":"l6WjbD","modeForm":"RBB8BD","modeCell":"tGoz1b"};
 
 const defaultValue = { from: null, to: null };
 class RangeDatePickerComponent extends uuiComponents.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') {
                     uuiCore.devLogger.warnAboutDeprecatedPropValue({
@@ -3586,37 +3673,68 @@ class RangeDatePickerComponent extends uuiComponents.BaseRangeDatePicker {
                     });
                 }
             }
-            return (React__namespace.createElement("div", { className: cx__default.default(this.props.inputCx, css$m.dateInputGroup, this.props.isDisabled && uuiCore.uuiMod.disabled, this.props.isReadonly && uuiCore.uuiMod.readonly, this.props.isInvalid && uuiCore.uuiMod.invalid, this.state.inFocus && uuiCore.uuiMod.focus), onClick: !this.props.isDisabled && props.onClick, onBlur: this.handleWrapperBlur, ref: props.ref },
-                React__namespace.createElement(TextInput, { icon: systemIcons[this.props.size || '36'].calendar, cx: cx__default.default(css$m.dateInput, css$m['size-' + (this.props.size || 36)], this.state.inFocus === 'from' && uuiCore.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__namespace.createElement("div", { className: css$m.separator }),
-                React__namespace.createElement(TextInput, { cx: cx__default.default(css$m.dateInput, css$m['size-' + (this.props.size || 36)], this.state.inFocus === 'to' && uuiCore.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__namespace.createElement("div", { className: cx__default.default(this.props.inputCx, css$n.dateInputGroup, this.props.isDisabled && uuiCore.uuiMod.disabled, this.props.isReadonly && uuiCore.uuiMod.readonly, this.props.isInvalid && uuiCore.uuiMod.invalid, this.state.inFocus && uuiCore.uuiMod.focus), onClick: !this.props.isDisabled && props.onClick, onBlur: this.handleWrapperBlur, ref: props.ref },
+                React__namespace.createElement(TextInput, { icon: systemIcons[this.props.size || '36'].calendar, cx: cx__default.default(css$n.dateInput, css$n['size-' + (this.props.size || 36)], this.state.inFocus === 'from' && uuiCore.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__namespace.createElement("div", { className: css$n.separator }),
+                React__namespace.createElement(TextInput, { cx: cx__default.default(css$n.dateInput, css$n['size-' + (this.props.size || 36)], this.state.inFocus === 'to' && uuiCore.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__namespace.createElement(DropdownContainer, Object.assign({}, props, { cx: cx__default.default(css$m.dropdownContainer), focusLock: false }),
+        return (React__namespace.createElement(DropdownContainer, Object.assign({}, props, { cx: cx__default.default(css$n.dropdownContainer), focusLock: false }),
             React__namespace.createElement(FlexRow, null,
                 React__namespace.createElement(RangeDatePickerBody, { cx: cx__default.default(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 = uuiCore.withMods(RangeDatePickerComponent);
 
-var css$l = {"root":"Gl5xmB","blocker":"_4t64Bj","marker":"lzx5M1","top":"k8H2SW","bottom":"_6d8zZa","left":"MC-c7X","right":"m3Wjoj","inside":"n95pho"};
+var css$m = {"root":"NLuslP","blocker":"CFj-N9","marker":"ef5KWU","top":"Kq7HJf","bottom":"fbfNXt","left":"pp9XjC","right":"nI4BN-","inside":"ljrwC7"};
 
 function DropMarker(props) {
     return props.isDndInProgress
         ? (React__namespace.createElement(React__namespace.Fragment, null,
-            props.enableBlocker && React__namespace.createElement("div", { className: css$l.blocker }),
+            props.enableBlocker && React__namespace.createElement("div", { className: css$m.blocker }),
             React__namespace.createElement("div", { className: cx__default.default([
-                    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":"RgZprs","hero-header":"u34R1K","promo-header":"_7jPvW-","uui-critical":"pFJnO4","uui-info":"YAeAuR","uui-success":"lgPkio","uui-warning":"Fsi6H2","uui-highlight":"aKdTpD","uui-typography-size-12":"Jvp7VA","uui-typography-size-14":"gl-xhr","uui-typography-size-16":"KT29F6","root":"xJ0RYj","size-24":"CV6-Lc","size-30":"_7BMXvy","size-36":"CmPCmT","size-48":"NNDEIl","size-60":"nOUTcf","uuiTypography":"RgZprs","heroHeader":"u34R1K","promoHeader":"_7jPvW-","uuiCritical":"pFJnO4","uuiInfo":"YAeAuR","uuiSuccess":"lgPkio","uuiWarning":"Fsi6H2","uuiHighlight":"aKdTpD","uuiTypographySize12":"Jvp7VA","uuiTypographySize14":"gl-xhr","uuiTypographySize16":"KT29F6","size24":"CV6-Lc","size30":"_7BMXvy","size36":"CmPCmT","size48":"NNDEIl","size60":"nOUTcf"};
+var css$l = {"cell":"Bx8zfY","wrapper":"wqME4r","align-widgets-top":"v16-aj","size-24":"Xcgeoi","size-30":"sPckMf","size-36":"Mt27rd","size-42":"upC8pS","size-48":"_5H3mUw","size-60":"FmydwS","align-widgets-center":"_7Fofk9","padding-12":"a5f7Mg","padding-24":"ZpJSBF","padding-left-12":"_1bOzar","padding-left-24":"EctYjs","padding-right-24":"sU566a","loading-cell":"WX5tRO","alignWidgetsTop":"v16-aj","size24":"Xcgeoi","size30":"sPckMf","size36":"Mt27rd","size42":"upC8pS","size48":"_5H3mUw","size60":"FmydwS","alignWidgetsCenter":"_7Fofk9","padding12":"a5f7Mg","padding24":"ZpJSBF","paddingLeft12":"_1bOzar","paddingLeft24":"EctYjs","paddingRight24":"sU566a","loadingCell":"WX5tRO"};
+
+function DataTableCell(props) {
+    props = Object.assign({}, props);
+    if (props.isFirstColumn) {
+        props.addons = React__namespace.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__namespace.createElement(Text, { key: "t", size: props.size !== '60' ? props.size : '48', cx: css$l.loadingCell },
+            React__namespace.createElement(TextPlaceholder, null))));
+    props.renderUnknown = props.renderUnknown
+        || (() => (React__namespace.createElement(Text, { key: "t", size: props.size !== '60' ? props.size : '48' }, "Unknown")));
+    props.renderTooltip = (tooltipProps) => React__namespace.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__namespace.createElement(uuiComponents.DataTableCell, Object.assign({}, props));
+}
+
+var css$k = {"uui-typography":"ULyBfz","hero-header":"hGdWXa","promo-header":"i6sj5V","uui-critical":"_95XDh-","uui-info":"X0gYe-","uui-success":"KhZHw4","uui-warning":"TDOM9h","uui-highlight":"pAahi-","uui-typography-size-12":"fgwdqC","uui-typography-size-14":"cZh83X","uui-typography-size-16":"BpahX7","root":"IVVmUR","size-24":"KSSjqJ","size-30":"SRNUed","size-36":"BVfWJw","size-48":"_7hUmjB","size-60":"IxBdkJ","uuiTypography":"ULyBfz","heroHeader":"hGdWXa","promoHeader":"i6sj5V","uuiCritical":"_95XDh-","uuiInfo":"X0gYe-","uuiSuccess":"KhZHw4","uuiWarning":"TDOM9h","uuiHighlight":"pAahi-","uuiTypographySize12":"fgwdqC","uuiTypographySize14":"cZh83X","uuiTypographySize16":"BpahX7","size24":"KSSjqJ","size30":"SRNUed","size36":"BVfWJw","size48":"_7hUmjB","size60":"IxBdkJ"};
 
 // Here we define a single instance of the renderCell function to make DataTableRow#shouldComponentUpdate work.
 // As we need our mods to style the cell properly, we extract them from DataTableCellProps.rowProps, which is a hack, but it's reliable enough.
@@ -3632,7 +3750,7 @@ const DataTableRow = uuiCore.withMods(uuiComponents.DataTableRow, ({ borderBotto
     ];
 }, () => propsMods);
 
-var css$j = {"uui-typography":"fg6sLy","hero-header":"pfq1Dc","promo-header":"qmkMRh","uui-critical":"_1afBgs","uui-info":"K9v4pm","uui-success":"I8VDQo","uui-warning":"L-IeLE","uui-highlight":"KBrIBl","uui-typography-size-12":"Mm4PIL","uui-typography-size-14":"jtjs7B","uui-typography-size-16":"fS4WlV","sorting-panel-container":"v87Psd","sort-active":"k-9iPt","uuiTypography":"fg6sLy","heroHeader":"pfq1Dc","promoHeader":"qmkMRh","uuiCritical":"_1afBgs","uuiInfo":"K9v4pm","uuiSuccess":"I8VDQo","uuiWarning":"L-IeLE","uuiHighlight":"KBrIBl","uuiTypographySize12":"Mm4PIL","uuiTypographySize14":"jtjs7B","uuiTypographySize16":"fS4WlV","sortingPanelContainer":"v87Psd","sortActive":"k-9iPt"};
+var css$j = {"uui-typography":"qW9rk9","hero-header":"K-iY35","promo-header":"_57zjph","uui-critical":"-WzvIr","uui-info":"XDd-az","uui-success":"CKLw-X","uui-warning":"rMZn2T","uui-highlight":"z6AKeY","uui-typography-size-12":"_6PtkM0","uui-typography-size-14":"Ww9Eyy","uui-typography-size-16":"VV8qDh","sorting-panel-container":"UwExHH","sort-active":"_6LMovX","uuiTypography":"qW9rk9","heroHeader":"K-iY35","promoHeader":"_57zjph","uuiCritical":"-WzvIr","uuiInfo":"XDd-az","uuiSuccess":"CKLw-X","uuiWarning":"rMZn2T","uuiHighlight":"z6AKeY","uuiTypographySize12":"_6PtkM0","uuiTypographySize14":"Ww9Eyy","uuiTypographySize16":"VV8qDh","sortingPanelContainer":"UwExHH","sortActive":"_6LMovX"};
 
 var _path$h;
 function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
@@ -3681,13 +3799,13 @@ const ColumnHeaderDropdownImpl = (props) => {
         }, uuiCore.mobilePopperModifier,
     ], []);
     const closeDropdown = React.useCallback(() => props.onOpenChange(false), [props.onOpenChange]);
-    return (React__namespace.default.createElement(uuiComponents.Dropdown, { renderTarget: props.renderTarget, renderBody: (dropdownProps) => (React__namespace.default.createElement(MobileDropdownWrapper, { width: 360, maxWidth: "auto", title: props.title, onClose: closeDropdown },
+    return (React__namespace.default.createElement(uuiComponents.Dropdown, { renderTarget: props.renderTarget, renderBody: (dropdownProps) => (React__namespace.default.createElement(MobileDropdownWrapper, { width: 280, maxWidth: "auto", title: props.title, onClose: closeDropdown },
             props.isSortable && React__namespace.default.createElement(SortingPanel, { sortDirection: props.sortDirection, onSort: props.onSort }),
             props.renderFilter(dropdownProps))), modifiers: popperModifiers, value: props.isOpen, onValueChange: props.onOpenChange }));
 };
 const ColumnHeaderDropdown = React__namespace.default.memo(ColumnHeaderDropdownImpl);
 
-var css$i = {"uui-typography":"cIicEm","hero-header":"e2n2U6","promo-header":"dhTeof","uui-critical":"_0ItWmj","uui-info":"_7uusmj","uui-success":"RcBrkl","uui-warning":"ZXy5P-","uui-highlight":"sSooR2","uui-typography-size-12":"kBPu2I","uui-typography-size-14":"y8p9Sz","uui-typography-size-16":"naseeE","cell":"SK4FZN","sort-icon":"XXuBFn","dropdown-icon":"Cf-Fyk","infoIcon":"mc3Gu6","resizable":"XjhOPz","size-24":"TOHLbb","size-30":"Wz86oX","size-36":"omxk5l","size-42":"x6AnBo","size-48":"_3G7EJc","padding-left-24":"UPRnvg","padding-right-24":"ptytDI","caption":"dH0Xpt","checkbox":"rJ6tCT","icon":"pU-Ig0","icon-cell":"dxSZy1","align-right":"YQuiqB","align-center":"uM27sT","tooltip-wrapper":"F35RTK","cell-tooltip":"v0uWRC","upper-case":"ePF-sz","font-size-14":"gHfadD","resize-mark":"pQJiCt","draggable":"xlyUtT","ghost":"Nsr-86","is-dragged-out":"-HjuP-","dnd-marker-left":"-F2E9f","dnd-marker-right":"gZ5YxZ","cell-tooltip-wrapper":"P0RAAR","cell-tooltip-text":"KbbcCc","uuiTypography":"cIicEm","heroHeader":"e2n2U6","promoHeader":"dhTeof","uuiCritical":"_0ItWmj","uuiInfo":"_7uusmj","uuiSuccess":"RcBrkl","uuiWarning":"ZXy5P-","uuiHighlight":"sSooR2","uuiTypographySize12":"kBPu2I","uuiTypographySize14":"y8p9Sz","uuiTypographySize16":"naseeE","sortIcon":"XXuBFn","dropdownIcon":"Cf-Fyk","size24":"TOHLbb","size30":"Wz86oX","size36":"omxk5l","size42":"x6AnBo","size48":"_3G7EJc","paddingLeft24":"UPRnvg","paddingRight24":"ptytDI","iconCell":"dxSZy1","alignRight":"YQuiqB","alignCenter":"uM27sT","tooltipWrapper":"F35RTK","cellTooltip":"v0uWRC","upperCase":"ePF-sz","fontSize14":"gHfadD","resizeMark":"pQJiCt","isDraggedOut":"-HjuP-","dndMarkerLeft":"-F2E9f","dndMarkerRight":"gZ5YxZ","cellTooltipWrapper":"P0RAAR","cellTooltipText":"KbbcCc"};
+var css$i = {"uui-typography":"KqEOoo","hero-header":"TQcJ6a","promo-header":"vJiB-2","uui-critical":"GM6o-J","uui-info":"KvAS6A","uui-success":"ETiEyh","uui-warning":"iplftE","uui-highlight":"_9nghK3","uui-typography-size-12":"oNNaNC","uui-typography-size-14":"kBX8sq","uui-typography-size-16":"vjT70O","cell":"c-Irou","sort-icon":"_8D4KQM","dropdown-icon":"fea8aD","infoIcon":"t7rPM0","resizable":"Krkp5M","size-24":"rHG8RZ","size-30":"i0nLpb","size-36":"P-w3lL","size-42":"r48THR","size-48":"uv45TC","padding-left-24":"_1Bv9I-","padding-right-24":"z6JxL8","caption":"XC2JHZ","checkbox":"_0x9nLT","icon":"j7ML52","icon-cell":"m2RTma","align-right":"kCOdfN","align-center":"NOvjJe","tooltip-wrapper":"sVKO--","cell-tooltip":"AuvgjZ","upper-case":"CJdc5z","font-size-14":"bamgF2","resize-mark":"ntNxui","draggable":"sNDJFX","ghost":"_3ZPxKR","is-dragged-out":"muSeFq","dnd-marker-left":"zpZnD9","dnd-marker-right":"nu6z9E","cell-tooltip-wrapper":"kvFvIV","cell-tooltip-text":"nuzBl1","uuiTypography":"KqEOoo","heroHeader":"TQcJ6a","promoHeader":"vJiB-2","uuiCritical":"GM6o-J","uuiInfo":"KvAS6A","uuiSuccess":"ETiEyh","uuiWarning":"iplftE","uuiHighlight":"_9nghK3","uuiTypographySize12":"oNNaNC","uuiTypographySize14":"kBX8sq","uuiTypographySize16":"vjT70O","sortIcon":"_8D4KQM","dropdownIcon":"fea8aD","size24":"rHG8RZ","size30":"i0nLpb","size36":"P-w3lL","size42":"r48THR","size48":"uv45TC","paddingLeft24":"_1Bv9I-","paddingRight24":"z6JxL8","iconCell":"m2RTma","alignRight":"kCOdfN","alignCenter":"NOvjJe","tooltipWrapper":"sVKO--","cellTooltip":"AuvgjZ","upperCase":"CJdc5z","fontSize14":"bamgF2","resizeMark":"ntNxui","isDraggedOut":"muSeFq","dndMarkerLeft":"zpZnD9","dndMarkerRight":"nu6z9E","cellTooltipWrapper":"kvFvIV","cellTooltipText":"nuzBl1"};
 
 var _path$f;
 function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
@@ -3755,19 +3873,23 @@ class DataTableHeaderCell extends React__namespace.Component {
                         React__namespace.createElement(Text, { key: "text", lineHeight: "30", fontSize: "14", size: "30", cx: uuiCore.cx(css$i.caption, this.getTextStyle(), uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaption) }, this.props.column.caption)),
                     this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React__namespace.createElement(IconButton, { key: "sort", cx: uuiCore.cx(css$i.icon, css$i.sortIcon, this.props.sortDirection && css$i.sortIconActive, uuiCore.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__namespace.createElement(IconButton, { key: "filter", cx: uuiCore.cx(css$i.icon, !this.props.sortDirection && css$i.filterIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "neutral", icon: ForwardRef$f })),
-                    this.props.column.renderFilter && (React__namespace.createElement(IconButton, { key: "dropdown", cx: uuiCore.cx(css$i.icon, css$i.dropdownIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), color: "secondary", icon: this.state.isDropdownOpen ? ForwardRef$e : ForwardRef$y })))));
+                    this.props.column.renderFilter && (React__namespace.createElement(IconButton, { key: "dropdown", cx: uuiCore.cx(css$i.icon, css$i.dropdownIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), color: "secondary", icon: this.state.isDropdownOpen ? ForwardRef$e : ForwardRef$z })))));
         };
         this.renderHeaderCheckbox = () => this.props.selectAll
             && this.props.isFirstColumn && (React__namespace.createElement(Checkbox, Object.assign({ size: +this.props.size < 36 ? '12' : '18' }, this.props.selectAll, { cx: uuiCore.cx(css$i.checkbox, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCheckbox) })));
         this.renderResizeMark = (props) => React__namespace.createElement("div", { onMouseDown: props.onResizeStart, className: uuiCore.cx(css$i.resizeMark, uuiCore.uuiMarkers.draggable) });
-        this.renderCellContent = (props, dropdownProps) => (React__namespace.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: uuiCore.cx('uui-dt-vars', uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiCore.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__namespace.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: uuiCore.cx('uui-dt-vars', uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiCore.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__namespace.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() {
@@ -3775,7 +3897,7 @@ class DataTableHeaderCell extends React__namespace.Component {
     }
 }
 
-var css$h = {"uui-typography":"ppIPxF","hero-header":"jD63Tz","promo-header":"TU36Dt","uui-critical":"-hbxJl","uui-info":"hBVaSx","uui-success":"_0pWW-p","uui-warning":"IZ-vBp","uui-highlight":"btn2ar","uui-typography-size-12":"Vijp7f","uui-typography-size-14":"Evo0o0","uui-typography-size-16":"O0by8d","header-cell":"uwv6n8","config-icon":"_7Yew6l","uuiTypography":"ppIPxF","heroHeader":"jD63Tz","promoHeader":"TU36Dt","uuiCritical":"-hbxJl","uuiInfo":"hBVaSx","uuiSuccess":"_0pWW-p","uuiWarning":"IZ-vBp","uuiHighlight":"btn2ar","uuiTypographySize12":"Vijp7f","uuiTypographySize14":"Evo0o0","uuiTypographySize16":"O0by8d","headerCell":"uwv6n8","configIcon":"_7Yew6l"};
+var css$h = {"uui-typography":"LAWGRL","hero-header":"falTc0","promo-header":"Sa6Fei","uui-critical":"msLNAE","uui-info":"b-RREi","uui-success":"_4R6DWY","uui-warning":"HdjbTb","uui-highlight":"_9-D96z","uui-typography-size-12":"jsDkLT","uui-typography-size-14":"Ryf5fJ","uui-typography-size-16":"S7QTqe","header-cell":"scmV7q","config-icon":"Uxd80W","uuiTypography":"LAWGRL","heroHeader":"falTc0","promoHeader":"Sa6Fei","uuiCritical":"msLNAE","uuiInfo":"b-RREi","uuiSuccess":"_4R6DWY","uuiWarning":"HdjbTb","uuiHighlight":"_9-D96z","uuiTypographySize12":"jsDkLT","uuiTypographySize14":"Ryf5fJ","uuiTypographySize16":"S7QTqe","headerCell":"scmV7q","configIcon":"Uxd80W"};
 
 var _path$c;
 function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
@@ -3797,7 +3919,7 @@ const DataTableHeaderRow = uuiCore.withMods(uuiComponents.DataTableHeaderRow, ()
     renderConfigButton: () => React__namespace.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: css$h.configIcon, color: "neutral", icon: ForwardRef$d }),
 }));
 
-var styles$1 = {"uui-typography":"_2A3zxX","hero-header":"GOTurM","promo-header":"jUHJ-X","uui-critical":"jnBp3J","uui-info":"_0ieSA2","uui-success":"cbN7Ov","uui-warning":"_07BfFD","uui-highlight":"gH4yN4","uui-typography-size-12":"rdFOeB","uui-typography-size-14":"XWJcSa","uui-typography-size-16":"_1bph9m","main-panel":"AAjptz","group-title":"ahuzuD","group-title-text":"f-cFuQ","group-title-badge":"B5Y-7D","group-items":"gWYMWp","no-data":"_9AtSqe","h-divider":"MQlhUW","search-area":"Oor70j","uuiTypography":"_2A3zxX","heroHeader":"GOTurM","promoHeader":"jUHJ-X","uuiCritical":"jnBp3J","uuiInfo":"_0ieSA2","uuiSuccess":"cbN7Ov","uuiWarning":"_07BfFD","uuiHighlight":"gH4yN4","uuiTypographySize12":"rdFOeB","uuiTypographySize14":"XWJcSa","uuiTypographySize16":"_1bph9m","mainPanel":"AAjptz","groupTitle":"ahuzuD","groupTitleText":"f-cFuQ","groupTitleBadge":"B5Y-7D","groupItems":"gWYMWp","noData":"_9AtSqe","hDivider":"MQlhUW","searchArea":"Oor70j"};
+var styles$1 = {"uui-typography":"TT20jg","hero-header":"AS8fJB","promo-header":"Rejx-H","uui-critical":"-Xcww-","uui-info":"u-JpkZ","uui-success":"hheIP6","uui-warning":"QsBwJb","uui-highlight":"YhlEYE","uui-typography-size-12":"LcGgne","uui-typography-size-14":"iItSq1","uui-typography-size-16":"gsLDLo","main-panel":"nqsKpP","group-title":"CepeuQ","group-title-text":"Ck75kx","group-title-badge":"tYAVN2","group-items":"DrOjx9","no-data":"tFM7VN","h-divider":"v1enP7","search-area":"Ssy6YG","uuiTypography":"TT20jg","heroHeader":"AS8fJB","promoHeader":"Rejx-H","uuiCritical":"-Xcww-","uuiInfo":"u-JpkZ","uuiSuccess":"hheIP6","uuiWarning":"QsBwJb","uuiHighlight":"YhlEYE","uuiTypographySize12":"LcGgne","uuiTypographySize14":"iItSq1","uuiTypographySize16":"gsLDLo","mainPanel":"nqsKpP","groupTitle":"CepeuQ","groupTitleText":"Ck75kx","groupTitleBadge":"tYAVN2","groupItems":"DrOjx9","noData":"tFM7VN","hDivider":"v1enP7","searchArea":"Ssy6YG"};
 
 var _path$b;
 function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
@@ -3874,7 +3996,7 @@ function PinIconButton(props) {
             React__namespace.createElement(IconButton, { icon: pinIcon, onClick: pinClickHandler, isDisabled: isPinnedAlways, color: isPinned ? 'info' : undefined }))));
 }
 
-var styles = {"uui-typography":"BOrt-2","hero-header":"OVE4c5","promo-header":"hCT0EZ","uui-critical":"l5aXw1","uui-info":"CyatAR","uui-success":"YRiHzr","uui-warning":"_6VU-v7","uui-highlight":"aK3Vb3","uui-typography-size-12":"ErB6cC","uui-typography-size-14":"_1Rs50R","uui-typography-size-16":"sMpg5M","row-wrapper":"aREzJh","not-pinned":"_1SRFck","pin-icon-button":"-CyPia","checkbox":"KUT-aa","drag-handle":"sgjyxy","dnd-disabled":"OnxkQJ","uuiTypography":"BOrt-2","heroHeader":"OVE4c5","promoHeader":"hCT0EZ","uuiCritical":"l5aXw1","uuiInfo":"CyatAR","uuiSuccess":"YRiHzr","uuiWarning":"_6VU-v7","uuiHighlight":"aK3Vb3","uuiTypographySize12":"ErB6cC","uuiTypographySize14":"_1Rs50R","uuiTypographySize16":"sMpg5M","rowWrapper":"aREzJh","notPinned":"_1SRFck","pinIconButton":"-CyPia","dragHandle":"sgjyxy","dndDisabled":"OnxkQJ"};
+var styles = {"uui-typography":"XZFZl5","hero-header":"xr3X1z","promo-header":"DkWXRk","uui-critical":"GTDPzW","uui-info":"MwhLbs","uui-success":"RxyMpg","uui-warning":"_0fPeFC","uui-highlight":"L4HsyU","uui-typography-size-12":"Q6pjfi","uui-typography-size-14":"Xm1Un6","uui-typography-size-16":"JGHfF1","row-wrapper":"_4FcG7j","not-pinned":"_5lkuzB","pin-icon-button":"F0jr9Y","checkbox":"iP92nV","drag-handle":"O-By6q","dnd-disabled":"Uf-OJo","uuiTypography":"XZFZl5","heroHeader":"xr3X1z","promoHeader":"DkWXRk","uuiCritical":"GTDPzW","uuiInfo":"MwhLbs","uuiSuccess":"RxyMpg","uuiWarning":"_0fPeFC","uuiHighlight":"L4HsyU","uuiTypographySize12":"Q6pjfi","uuiTypographySize14":"Xm1Un6","uuiTypographySize16":"JGHfF1","rowWrapper":"_4FcG7j","notPinned":"_5lkuzB","pinIconButton":"F0jr9Y","dragHandle":"O-By6q","dndDisabled":"Uf-OJo"};
 
 const ColumnRow = React__namespace.memo(function ColumnRow(props) {
     const { column } = props;
@@ -3959,7 +4081,7 @@ function ColumnsConfigurationModal(props) {
                 noVisibleColumns ? (React__namespace.createElement(Tooltip, { content: i18n$1.enableAtLeastOneColumnMessage, placement: "top-end", color: "critical" }, applyButton)) : (applyButton)))));
 }
 
-var css$g = {"listContainer":"HN5-Z7","header":"NjRJBz","group":"M7Cm3e","stickyHeader":"XWmTeI"};
+var css$g = {"listContainer":"_9882Ng","header":"AwSNRA","group":"JeyKpk","stickyHeader":"_4s8BtD"};
 
 const getChildrenAndRest = (row, rows) => {
     const firstNotChildIndex = rows.findIndex((other) => other.depth < row.depth || (row.depth === other.depth && other.isPinned));
@@ -4025,7 +4147,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#vibtxg3rgngwzabew_a)"
+    clipPath: "url(#jdufip20r8eubn779_a)"
   }, _path$8 || (_path$8 = /*#__PURE__*/React__namespace.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"
@@ -4046,7 +4168,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__namespace.createElement("mask", {
-    id: "vibtxgouahfjafhp_b",
+    id: "jdufip9x0xejcqsc_b",
     style: {
       maskType: "alpha"
     },
@@ -4059,7 +4181,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__namespace.createElement("g", {
-    mask: "url(#vibtxgouahfjafhp_b)",
+    mask: "url(#jdufip9x0xejcqsc_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -4145,7 +4267,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__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "vibtxg3rgngwzabew_a"
+    id: "jdufip20r8eubn779_a"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
@@ -4154,7 +4276,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
 };
 var ForwardRef$9 = /*#__PURE__*/React.forwardRef(SvgEmptyTable);
 
-var css$f = {"sticky-header":"NoD6im","table":"ENdO5p","no-results":"A8XweR","no-results-icon":"wzqCK5","no-results-title":"OuUeIk","stickyHeader":"NoD6im","noResults":"A8XweR","noResultsIcon":"wzqCK5","noResultsTitle":"OuUeIk"};
+var css$f = {"sticky-header":"sapEod","table":"_2EYfig","no-results":"BJBATb","no-results-icon":"crLhs5","no-results-title":"bxvPfk","stickyHeader":"sapEod","noResults":"BJBATb","noResultsIcon":"crLhs5","noResultsTitle":"bxvPfk"};
 
 function DataTable(props) {
     var _a;
@@ -4197,16 +4319,17 @@ function DataTable(props) {
         props, columns, rows, renderNoResultsBlock, onConfigurationButtonClick,
     ]);
     return (React__namespace.createElement(uuiComponents.DataTableSelectionProvider, { onCopy: props.onCopy, rows: rows, columns: columns },
-        React__namespace.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rowsCount: props.rowsCount, renderRows: renderRowsContainer, cx: uuiCore.cx(css$f.table, 'uui-dt-vars'), isLoading: props.isReloading, rowsSelector: "[role=row]", rawProps: {
-                role: 'table',
-                'aria-colcount': columns.length,
-                'aria-rowcount': props.rowsCount,
-            } })));
+        React__namespace.createElement(uuiComponents.DataTableFocusProvider, { dataTableFocusManager: props.dataTableFocusManager },
+            React__namespace.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rowsCount: props.rowsCount, renderRows: renderRowsContainer, cx: uuiCore.cx(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":"f-a4Nf"};
+var css$e = {"root":"BULoA8"};
 
-var css$d = {"root":"_2s8bG0","burger-content":"Pxzjkv","burgerContent":"Pxzjkv"};
+var css$d = {"root":"D-s6bp","burger-content":"blkUWp","burgerContent":"blkUWp"};
 
 var _path$7;
 function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
@@ -4273,7 +4396,7 @@ var SvgTriangle = function SvgTriangle(props, ref) {
 };
 var ForwardRef$6 = /*#__PURE__*/React.forwardRef(SvgTriangle);
 
-var css$c = {"uui-typography":"_4OqKAO","hero-header":"Yh-rWM","promo-header":"-inyOk","uui-critical":"ARc5-t","uui-info":"cxRTsz","uui-success":"b8x12-","uui-warning":"Vkl-1-","uui-highlight":"_0aPgBB","uui-typography-size-12":"-MCYrK","uui-typography-size-14":"uD-1h7","uui-typography-size-16":"VkGJRT","root":"eePB-f","button-primary":"-pjOwl","button-secondary":"sRsY7Z","hasIcon":"_6pcVge","dropdown":"_0whZ4S","uuiTypography":"_4OqKAO","heroHeader":"Yh-rWM","promoHeader":"-inyOk","uuiCritical":"ARc5-t","uuiInfo":"cxRTsz","uuiSuccess":"b8x12-","uuiWarning":"Vkl-1-","uuiHighlight":"_0aPgBB","uuiTypographySize12":"-MCYrK","uuiTypographySize14":"uD-1h7","uuiTypographySize16":"VkGJRT","buttonPrimary":"-pjOwl","buttonSecondary":"sRsY7Z"};
+var css$c = {"uui-typography":"Z3x-BM","hero-header":"y3V-v5","promo-header":"AJuYqN","uui-critical":"-nIBQb","uui-info":"VoH3Xo","uui-success":"_3Am2dN","uui-warning":"q2mQfv","uui-highlight":"B1jPMy","uui-typography-size-12":"_0SvSl5","uui-typography-size-14":"_8Y8JM7","uui-typography-size-16":"SEN7wx","root":"S87UWs","button-primary":"NP1Y6w","button-secondary":"jTC2ri","hasIcon":"-KCmGd","dropdown":"o7RykL","uuiTypography":"Z3x-BM","heroHeader":"y3V-v5","promoHeader":"AJuYqN","uuiCritical":"-nIBQb","uuiInfo":"VoH3Xo","uuiSuccess":"_3Am2dN","uuiWarning":"q2mQfv","uuiHighlight":"B1jPMy","uuiTypographySize12":"_0SvSl5","uuiTypographySize14":"_8Y8JM7","uuiTypographySize16":"SEN7wx","buttonPrimary":"NP1Y6w","buttonSecondary":"jTC2ri"};
 
 const BurgerButton = uuiCore.withMods(uuiComponents.Button, (props) => [
     css$c.root,
@@ -4330,13 +4453,13 @@ var SvgMenuInputCancel = function SvgMenuInputCancel(props, ref) {
 };
 var ForwardRef$5 = /*#__PURE__*/React.forwardRef(SvgMenuInputCancel);
 
-var css$b = {"search-input":"WoDrMs","searchInput":"WoDrMs"};
+var css$b = {"search-input":"NCxjSp","searchInput":"NCxjSp"};
 
 function BurgerSearch(props) {
     return (React__namespace.createElement(uuiComponents.TextInput, { cx: cx__default.default(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":"lkEIVX","group-header":"_3-OdIb","group-name":"_30LaAE","line":"swp0Xa","groupHeader":"_3-OdIb","groupName":"_30LaAE"};
+var css$a = {"root":"Mn50b5","group-header":"D-NFwz","group-name":"_7TdB4H","line":"YfPxVB","groupHeader":"D-NFwz","groupName":"_7TdB4H"};
 
 function BurgerGroupHeader(props) {
     return (React__namespace.createElement("div", { className: cx__default.default(css$a.root, css$a.groupHeader, 'uui-burger-group-header') },
@@ -4344,7 +4467,7 @@ function BurgerGroupHeader(props) {
         React__namespace.createElement("span", { className: css$a.groupName }, props.caption)));
 }
 
-var css$9 = {"uui-typography":"_73-Uwi","hero-header":"ZsOhr4","promo-header":"kfXQxI","uui-critical":"KuFyqM","uui-info":"kLqkzi","uui-success":"dNCthu","uui-warning":"egFy6G","uui-highlight":"pociQs","uui-typography-size-12":"QckWxx","uui-typography-size-14":"d3cAQy","uui-typography-size-16":"pcPBex","root":"_-8F6ql","type-primary":"eLRWGs","type-secondary":"mecNMI","uuiTypography":"_73-Uwi","heroHeader":"ZsOhr4","promoHeader":"kfXQxI","uuiCritical":"KuFyqM","uuiInfo":"kLqkzi","uuiSuccess":"dNCthu","uuiWarning":"egFy6G","uuiHighlight":"pociQs","uuiTypographySize12":"QckWxx","uuiTypographySize14":"d3cAQy","uuiTypographySize16":"pcPBex","typePrimary":"eLRWGs","typeSecondary":"mecNMI"};
+var css$9 = {"uui-typography":"tsXsIp","hero-header":"sGVNVR","promo-header":"M0g-Mx","uui-critical":"gOEA7O","uui-info":"OrROWF","uui-success":"_0EvuXS","uui-warning":"PlnGFn","uui-highlight":"_22Anf4","uui-typography-size-12":"EwtiOG","uui-typography-size-14":"bfKwSj","uui-typography-size-16":"LKoX54","root":"RL38By","type-primary":"_8kGjpz","type-secondary":"kXJCF9","uuiTypography":"tsXsIp","heroHeader":"sGVNVR","promoHeader":"M0g-Mx","uuiCritical":"gOEA7O","uuiInfo":"OrROWF","uuiSuccess":"_0EvuXS","uuiWarning":"PlnGFn","uuiHighlight":"_22Anf4","uuiTypographySize12":"EwtiOG","uuiTypographySize14":"bfKwSj","uuiTypographySize16":"LKoX54","typePrimary":"_8kGjpz","typeSecondary":"kXJCF9"};
 
 var _path$4;
 function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
@@ -4364,7 +4487,7 @@ var ForwardRef$4 = /*#__PURE__*/React.forwardRef(SvgChevronDown24);
 
 const MainMenuButton = uuiCore.withMods(uuiComponents.Button, (mods) => [css$9.root, css$9['type-' + (mods.type || 'primary')]], () => ({ dropdownIcon: ForwardRef$4, role: 'menuitem' }));
 
-var css$8 = {"dropdown-body":"-OOPRx","dropdownBody":"-OOPRx"};
+var css$8 = {"dropdown-body":"O1NpHx","dropdownBody":"O1NpHx"};
 
 class MainMenuDropdown extends React__namespace.Component {
     render() {
@@ -4418,12 +4541,12 @@ var SvgGlobalMenu = function SvgGlobalMenu(props, ref) {
 };
 var ForwardRef$3 = /*#__PURE__*/React.forwardRef(SvgGlobalMenu);
 
-var css$7 = {"global-menu-btn":"_5MZL3v","globalMenuIcon":"_0JpS3x","globalMenuBtn":"_5MZL3v"};
+var css$7 = {"global-menu-btn":"QQ-fbr","globalMenuIcon":"bKjc3p","globalMenuBtn":"QQ-fbr"};
 
 const GlobalMenu = React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", Object.assign({ ref: ref, id: "global_menu_toggle", className: cx__default.default(css$7.globalMenuBtn, props.cx) }, props.rawProps),
     React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef$3, cx: css$7.globalMenuIcon }))));
 
-var css$6 = {"container":"X0A8lN","open":"zLcJK0"};
+var css$6 = {"container":"ocq0c6","open":"j1mavv"};
 
 const MainMenuAvatar = React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", { ref: ref, className: cx__default.default(css$6.container, props.isDropdown && css$6.dropdown, props.isOpen && css$6.open, props.onClick && uuiCore.uuiMarkers.clickable, props.cx), onClick: props.onClick },
     React__namespace.createElement(uuiComponents.Avatar, { size: "36", img: props.avatarUrl }),
@@ -4431,18 +4554,18 @@ const MainMenuAvatar = React__namespace.forwardRef((props, ref) => (React__names
     props.isDropdown && (React__namespace.createElement("div", null,
         React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef$1a, flipY: props.isOpen }))))));
 
-var css$5 = {"search-input":"X3TYM9","searchInput":"X3TYM9"};
+var css$5 = {"search-input":"nVqUZe","searchInput":"nVqUZe"};
 
 const MainMenuSearch = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(uuiCore.IEditableDebouncer, Object.assign({}, props, { render: (iEditable) => {
         var _a;
         return (React__namespace.createElement(uuiComponents.TextInput, 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: uuiCore.cx(css$5.searchInput, props.cx) }, props.rawProps)));
     } }))));
 
-var css$4 = {"container":"pfki6b"};
+var css$4 = {"container":"_1ERubV"};
 
 const MainMenuIcon = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(IconButton, Object.assign({ ref: ref, icon: props.icon, cx: uuiCore.cx(props.cx, css$4.container) }, props))));
 
-var css$3 = {"root":"wiV09o"};
+var css$3 = {"root":"AaVf8p"};
 
 const Anchor = uuiCore.withMods(uuiComponents.Anchor, () => [css$3.root]);
 
@@ -4499,7 +4622,7 @@ var SvgShape = function SvgShape(props, ref) {
 };
 var ForwardRef$2 = /*#__PURE__*/React.forwardRef(SvgShape);
 
-var css$2 = {"root":"R6KMJJ","drop-start":"NYpFMj","drop-over":"KK5NRG","link":"rEi8cU","drop-area":"V3wO8r","icon-blue":"vQrLEg","dropStart":"NYpFMj","dropOver":"KK5NRG","dropArea":"V3wO8r","iconBlue":"vQrLEg"};
+var css$2 = {"root":"QrWkbG","drop-start":"BHCWUV","drop-over":"d7h0Ta","link":"DJh969","drop-area":"sfRo56","icon-blue":"bELkH7","dropStart":"BHCWUV","dropOver":"d7h0Ta","dropArea":"sfRo56","iconBlue":"bELkH7"};
 
 class DropSpot extends React__namespace.Component {
     constructor() {
@@ -4523,9 +4646,9 @@ class DropSpot extends React__namespace.Component {
     }
 }
 
-var css$1 = {"root":"VPUfYj","file-name":"R2NCPu","default-color":"Ag4OSr","doc-color":"MKeyx9","xls-color":"bpRhaA","pdf-color":"iFOM4p","movie-color":"_1YrmQM","img-color":"FB4rri","mov-color":"_26WyGF","error-block":"GxsUKN","icons-block":"sLREkj","fileName":"R2NCPu","defaultColor":"Ag4OSr","docColor":"MKeyx9","xlsColor":"bpRhaA","pdfColor":"iFOM4p","movieColor":"_1YrmQM","imgColor":"FB4rri","movColor":"_26WyGF","errorBlock":"GxsUKN","iconsBlock":"sLREkj"};
+var css$1 = {"root":"mQqmvX","file-name":"OEJNaK","default-color":"wmqfHy","doc-color":"sqNMxF","xls-color":"wEbA2M","pdf-color":"IWxNv5","movie-color":"_3YJaam","img-color":"Yd6luC","mov-color":"B9eaQc","error-block":"Fiukdl","icons-block":"zgSr0r","fileName":"OEJNaK","defaultColor":"wmqfHy","docColor":"sqNMxF","xlsColor":"wEbA2M","pdfColor":"IWxNv5","movieColor":"_3YJaam","imgColor":"Yd6luC","movColor":"B9eaQc","errorBlock":"Fiukdl","iconsBlock":"zgSr0r"};
 
-var css = {"root":"BvYzoi"};
+var css = {"root":"UAiMdl"};
 
 const SvgCircleProgress = React__namespace.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
@@ -4678,6 +4801,7 @@ exports.DataPickerBody = DataPickerBody;
 exports.DataPickerFooter = DataPickerFooter;
 exports.DataPickerHeader = DataPickerHeader;
 exports.DataPickerRow = DataPickerRow;
+exports.DataRowAddons = DataRowAddons;
 exports.DataRowsContainer = DataRowsContainer;
 exports.DataTable = DataTable;
 exports.DataTableCell = DataTableCell;
@@ -4763,23 +4887,7 @@ exports.VerticalTabButton = VerticalTabButton;
 exports.VirtualList = VirtualList;
 exports.WarningAlert = WarningAlert;
 exports.WarningNotification = WarningNotification;
-exports.allIconColors = allIconColors;
-exports.allLinkButtonColors = allLinkButtonColors;
-exports.applyBadgeMods = applyBadgeMods;
-exports.applyButtonMods = applyButtonMods;
-exports.applyCheckboxMods = applyCheckboxMods;
 exports.applyDateSelectionMods = applyDateSelectionMods;
-exports.applyInputAddonMods = applyInputAddonMods;
-exports.applyNumericInputMods = applyNumericInputMods;
-exports.applyProgressBarMods = applyProgressBarMods;
-exports.applySliderMods = applySliderMods;
-exports.applySpinnerMods = applySpinnerMods;
-exports.applySwitchMods = applySwitchMods;
-exports.applyTagMods = applyTagMods;
-exports.applyTextAreaMods = applyTextAreaMods;
-exports.applyTextInputMods = applyTextInputMods;
-exports.defaultBadgeFill = defaultBadgeFill;
-exports.defaultBadgeSize = defaultBadgeSize;
 exports.defaultPredicates = defaultPredicates;
 exports.getHighlightRanges = getHighlightRanges;
 exports.getHighlightedSearchMatches = getHighlightedSearchMatches;