@epam/uui 5.13.3-beta.4 → 5.13.3-beta.6

package/index.js

@@ -182,7 +182,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#irdry6pr9jqlnmq2f_a)"
+    clipPath: "url(#opwl57ko678gmoct_a)"
   }, _path$J || (_path$J = /*#__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"
@@ -203,7 +203,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: "irdry60u9701zvdxnf_b",
+    id: "opwl572601dkv95xg_b",
     style: {
       maskType: "alpha"
     },
@@ -216,7 +216,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 || (_g = /*#__PURE__*/React__namespace.createElement("g", {
-    mask: "url(#irdry60u9701zvdxnf_b)",
+    mask: "url(#opwl572601dkv95xg_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -302,7 +302,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: "irdry6pr9jqlnmq2f_a"
+    id: "opwl57ko678gmoct_a"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
@@ -859,6 +859,30 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
 };
 var ForwardRef$b = /*#__PURE__*/React.forwardRef(SvgSearchWithBackground);
 
+var css$1y = {"root":"OLzlqd","uui-spinner":"lc-cES","uuiSpinner":"lc-cES"};
+
+function applySpinnerMods() {
+    return [css$1y.root, 'uui-spinner'];
+}
+const Spinner = /* @__PURE__ */uuiCore.withMods(uuiComponents.Spinner, applySpinnerMods);
+
+var css$1x = {"root":"MVuiXk","loading-word":"vQ95FH","loadingWord":"vQ95FH","animated-loading":"K4B-4E","animatedLoading":"K4B-4E","skeleton_loading":"DJts8Q","skeletonLoading":"DJts8Q"};
+
+const TextPlaceholder = (props) => {
+    const pattern = ' ';
+    const text = React__namespace.useMemo(() => {
+        const words = [];
+        for (let i = 0; i < (props.wordsCount || 1); i++) {
+            const lengthWord = Math.floor(Math.random() * 10 + 8);
+            words.push(pattern.repeat(lengthWord));
+        }
+        return words;
+    }, [props.wordsCount]);
+    return (React__namespace.createElement("div", { "aria-busy": true, className: cx__default.default(css$1x.root, 'uui-text-placeholder'), ...props.rawProps }, text.map((it, index) => (React__namespace.createElement("span", { key: index, className: cx__default.default([
+            props.cx, css$1x.loadingWord, !props.isNotAnimated && css$1x.animatedLoading,
+        ]), dangerouslySetInnerHTML: { __html: it } })))));
+};
+
 const accordionSettings = {
     icons: {
         dropdownIcon: ForwardRef$Q,
@@ -920,6 +944,7 @@ const countIndicatorSettings = {
     },
 };
 const dataTableSettings = {
+    renderPlaceholder: () => React__namespace.default.createElement(TextPlaceholder, { isNotAnimated: true }),
     icons: {
         emptyTable: ForwardRef$J,
         header: {
@@ -1107,6 +1132,7 @@ const paginatorSettings = {
     },
 };
 const pickerInputSettings = {
+    renderPlaceholder: () => React__namespace.default.createElement(TextPlaceholder, null),
     icons: {
         toggler: {
             clearIcon: ForwardRef$R,
@@ -1271,11 +1297,15 @@ const textInputSettings = {
         default: '36',
     },
 };
+const blockerSettings = {
+    renderSpinner: () => React__namespace.default.createElement(Spinner, null),
+};
 const settings = {
     accordion: accordionSettings,
     alert: alertSettings,
     badge: badgeSettings,
     button: buttonSettings,
+    blocker: blockerSettings,
     checkbox: checkboxSettings,
     countIndicator: countIndicatorSettings,
     dataTable: dataTableSettings,
@@ -1305,11 +1335,11 @@ const settings = {
     textInput: textInputSettings,
 };
 
-var css$1y = {"root":"_2zkN52"};
+var css$1w = {"root":"iUZr-z"};
 
 function applyButtonMods(mods) {
     return [
-        css$1y.root,
+        css$1w.root,
         'uui-button',
         `uui-fill-${mods.fill || 'solid'}`,
         `uui-color-${mods.color || 'primary'}`,
@@ -1323,10 +1353,10 @@ const Button = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Button,
     };
 });
 
-var css$1x = {"root":"BOn4hB"};
+var css$1v = {"root":"ElcSgC"};
 
 function applyIconButtonMods(props) {
-    return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1x.root];
+    return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1v.root];
 }
 const IconButton = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.IconButton, applyIconButtonMods, (props) => {
     const isDeprecated = ['info', 'success', 'error', 'warning'].includes(props.color);
@@ -1360,7 +1390,7 @@ 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'];
 }
 
-var css$1w = {"root":"_0VbeEX"};
+var css$1u = {"root":"gsbkw-"};
 
 const DEFAULT_COLOR = 'primary';
 const LinkButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
@@ -1375,7 +1405,7 @@ const LinkButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     }
     const rootStyles = [
         'uui-link_button',
-        css$1w.root,
+        css$1u.root,
         `uui-size-${props.size || settings.linkButton.sizes.default}`,
         ...getIconClass(props),
         `uui-color-${props.color || DEFAULT_COLOR}`,
@@ -1390,11 +1420,11 @@ const LinkButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
         props.isDropdown && (React__namespace.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1v = {"root":"Yt8E9Y"};
+var css$1t = {"root":"_1gRdJq"};
 
 const CountIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
     return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
-            css$1v.root,
+            css$1t.root,
             'uui-count_indicator',
             `uui-size-${props.size || settings.countIndicator.sizes.default}`,
             props.color && `uui-color-${props.color}`,
@@ -1402,11 +1432,11 @@ const CountIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
         ]) }, props.caption));
 });
 
-var css$1u = {"root":"NmhhKr","withNotify":"Llf85G"};
+var css$1s = {"root":"IGH-FC","withNotify":"JC-G4N"};
 
 const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
     const styles = [
-        css$1u.root,
+        css$1s.root,
         'uui-tab-button',
         `uui-size-${props.size || settings.tabButton.sizes.default}`,
         ...getIconClass(props),
@@ -1423,27 +1453,27 @@ const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, ref
         props.icon && props.iconPosition !== 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         (props.caption || props.withNotify) && (React__namespace.default.createElement("div", { className: uuiCore.cx(uuiCore.uuiElement.caption) },
             props.caption,
-            props.withNotify && React__namespace.default.createElement("div", { className: css$1u.withNotify }))),
+            props.withNotify && React__namespace.default.createElement("div", { className: css$1s.withNotify }))),
         props.icon && props.iconPosition === 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         props.count !== undefined && props.count !== null && (React__namespace.default.createElement(CountIndicator, { color: "neutral", size: settings.tabButton.sizes.countIndicatorMap[props.size || settings.tabButton.sizes.default], caption: props.count })),
         props.isDropdown && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen })),
         props.onClear && !props.isDisabled && (React__namespace.default.createElement(uuiComponents.IconContainer, { cx: uuiCore.uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
 });
 
-var css$1t = {"root":"_4Phk5E"};
+var css$1r = {"root":"_8-VLva"};
 
 function applyVerticalTabButtonMods() {
-    return [css$1t.root, 'uui-vertical-tab-button'];
+    return [css$1r.root, 'uui-vertical-tab-button'];
 }
 const VerticalTabButton = /* @__PURE__ */uuiCore.withMods(TabButton, applyVerticalTabButtonMods);
 
-var css$1s = {"root":"iIMqVw","mode-cell":"UUvNk0","modeCell":"UUvNk0"};
+var css$1q = {"root":"JWazRN","mode-cell":"uYqs-B","modeCell":"uYqs-B"};
 
 function applyCheckboxMods(mods) {
     return [
-        css$1s.root,
+        css$1q.root,
         `uui-size-${mods.size || settings.checkbox.sizes.default}`,
-        css$1s['mode-' + (mods.mode || 'form')],
+        css$1q['mode-' + (mods.mode || 'form')],
         'uui-color-primary',
     ];
 }
@@ -1455,11 +1485,11 @@ const applyUUICheckboxProps = (props) => {
 };
 const Checkbox = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$1r = {"root":"tmCNSe"};
+var css$1p = {"root":"Y30m1A"};
 
 function applyRadioInputMods(mods) {
     return [
-        css$1r.root,
+        css$1p.root,
         `uui-size-${mods.size || settings.radioInput.sizes.default}`,
         'uui-radio-input-container',
         'uui-color-primary',
@@ -1467,11 +1497,11 @@ function applyRadioInputMods(mods) {
 }
 const RadioInput = /* @__PURE__ */uuiCore.withMods(uuiComponents.RadioInput, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : settings.radioInput.icons.dotIcon }));
 
-var css$1q = {"root":"M1cZVp"};
+var css$1o = {"root":"-VefN5"};
 
 function applySwitchMods(mods) {
     return [
-        css$1q.root,
+        css$1o.root,
         `uui-size-${mods.size || settings.switch.sizes.default}`,
         'uui-color-primary',
     ];
@@ -1491,7 +1521,7 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var textInputCss = {"root":"JtRU13","mode-form":"Z6bGe4","modeForm":"Z6bGe4","mode-inline":"xVLyKm","modeInline":"xVLyKm","mode-cell":"nNOdG5","modeCell":"nNOdG5"};
+var textInputCss = {"root":"NEWIUu","mode-form":"vrwCqc","modeForm":"vrwCqc","mode-inline":"HsUXpZ","modeInline":"HsUXpZ","mode-cell":"Q0HKR-","modeCell":"Q0HKR-"};
 
 const DEFAULT_MODE$3 = EditMode.FORM;
 function applyTextInputMods(mods) {
@@ -1516,9 +1546,9 @@ const SearchInput = /* @__PURE__ */React__namespace.default.forwardRef((props, r
         } }));
 });
 
-var css$1p = {"root":"JV9LvU"};
+var css$1n = {"root":"sC22k5"};
 
-const ControlGroup = /* @__PURE__ */uuiCore.withMods(uuiComponents.ControlGroup, () => [css$1p.root, 'uui-control-group']);
+const ControlGroup = /* @__PURE__ */uuiCore.withMods(uuiComponents.ControlGroup, () => [css$1n.root, 'uui-control-group']);
 
 function MultiSwitchComponent(props, ref) {
     return (React__namespace.createElement(ControlGroup, { ref: ref, rawProps: {
@@ -1532,13 +1562,13 @@ function MultiSwitchComponent(props, ref) {
 }
 const MultiSwitch = /* @__PURE__ */React__namespace.forwardRef(MultiSwitchComponent);
 
-var css$1o = {"root":"ZDn4hU","mode-form":"I367ib","modeForm":"I367ib","mode-cell":"bpByvt","modeCell":"bpByvt"};
+var css$1m = {"root":"_5QEBUX","mode-form":"UcrWR5","modeForm":"UcrWR5","mode-cell":"DSdLQA","modeCell":"DSdLQA"};
 
 const DEFAULT_MODE$2 = EditMode.FORM;
 function applyNumericInputMods(mods) {
     return [
         textInputCss.root,
-        css$1o.root,
+        css$1m.root,
         `uui-size-${mods.size || settings.numericInput.sizes.default}`,
         textInputCss['mode-' + (mods.mode || DEFAULT_MODE$2)],
     ];
@@ -1552,15 +1582,15 @@ const NumericInput = /* @__PURE__ */uuiCore.withMods(uuiComponents.NumericInput,
     };
 });
 
-var css$1n = {"root":"oV6ucX","mode-form":"EoSBiX","modeForm":"EoSBiX","mode-cell":"wCkRPa","modeCell":"wCkRPa","mode-inline":"w4tOUx","modeInline":"w4tOUx"};
+var css$1l = {"root":"zCzjYE","mode-form":"qe6wh6","modeForm":"qe6wh6","mode-cell":"y9-knd","modeCell":"y9-knd","mode-inline":"A-en-U","modeInline":"A-en-U"};
 
 const DEFAULT_MODE$1 = EditMode.FORM;
 function applyTextAreaMods(mods) {
     return [
-        css$1n.root,
+        css$1l.root,
         'uui-textarea',
         'uui-size-' + (mods.size || settings.textArea.sizes.default),
-        css$1n['mode-' + (mods.mode || DEFAULT_MODE$1)],
+        css$1l['mode-' + (mods.mode || DEFAULT_MODE$1)],
     ];
 }
 const TextArea = /* @__PURE__ */uuiCore.withMods(uuiComponents.TextArea, applyTextAreaMods, (props) => {
@@ -1593,17 +1623,17 @@ function TREE_SHAKEABLE_INIT$1() {
     };
 }
 
-var css$1m = {"root":"jOdj5P","main-path":"QjyCdV","mainPath":"QjyCdV","content-wrapper":"PM0sl8","contentWrapper":"PM0sl8","content":"XYFzTG","action-wrapper":"kSYiEP","actionWrapper":"kSYiEP","icon-wrapper":"_1Ymskf","iconWrapper":"_1Ymskf","icon":"gCrsWv","close-icon":"kQo4yZ","closeIcon":"kQo4yZ"};
+var css$1k = {"root":"bJvxfk","main-path":"U-nbSz","mainPath":"U-nbSz","content-wrapper":"BOjLzi","contentWrapper":"BOjLzi","content":"ldX-9c","action-wrapper":"Gw8j43","actionWrapper":"Gw8j43","icon-wrapper":"Hj4d8Q","iconWrapper":"Hj4d8Q","icon":"-g0HYO","close-icon":"-lx4xz","closeIcon":"-lx4xz"};
 
-const Alert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("div", { role: "alert", ref: ref, className: cx__default.default('uui-alert', css$1m.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
-    React__namespace.createElement("div", { className: css$1m.mainPath },
-        React__namespace.createElement("div", { className: css$1m.contentWrapper },
-            props.icon && (React__namespace.createElement("div", { className: css$1m.iconWrapper },
-                React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon, cx: css$1m.icon }))),
-            React__namespace.createElement("div", { className: css$1m.content },
+const Alert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("div", { role: "alert", ref: ref, className: cx__default.default('uui-alert', css$1k.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
+    React__namespace.createElement("div", { className: css$1k.mainPath },
+        React__namespace.createElement("div", { className: css$1k.contentWrapper },
+            props.icon && (React__namespace.createElement("div", { className: css$1k.iconWrapper },
+                React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon, cx: css$1k.icon }))),
+            React__namespace.createElement("div", { className: css$1k.content },
                 props.children,
-                props.actions && (React__namespace.createElement("div", { className: css$1m.actionWrapper }, props.actions.map((action) => (React__namespace.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$1m.actionLink, size: settings.alert.sizes.actionMap[props.size || settings.alert.sizes.default] }))))))),
-        props.onClose && React__namespace.createElement(IconButton, { icon: settings.alert.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$1m.closeIcon })))));
+                props.actions && (React__namespace.createElement("div", { className: css$1k.actionWrapper }, props.actions.map((action) => (React__namespace.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$1k.actionLink, size: settings.alert.sizes.actionMap[props.size || settings.alert.sizes.default] }))))))),
+        props.onClose && React__namespace.createElement(IconButton, { icon: settings.alert.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$1k.closeIcon })))));
 const WarningAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, { icon: settings.alert.icons.warningIcon, color: "warning", ref: ref, ...props }));
 const SuccessAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, { icon: settings.alert.icons.successIcon, color: "success", ref: ref, ...props }));
 const HintAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, { icon: settings.alert.icons.infoIcon, color: "info", ref: ref, ...props }));
@@ -1611,18 +1641,18 @@ const ErrorAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => Re
 
 const Dropdown = /* @__PURE__ */uuiCore.withMods(uuiComponents.Dropdown);
 
-var css$1l = {"root":"N7sS-W"};
+var css$1j = {"root":"yX0tAZ"};
 
 function applyDropdownContainerMods(mods) {
     return [
-        css$1l.root,
+        css$1j.root,
         mods.vPadding && `vPadding-${mods.vPadding}`,
         mods.padding && `padding-${mods.padding}`,
     ];
 }
 const DropdownContainer = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.DropdownContainer, applyDropdownContainerMods);
 
-var css$1k = {"submenu-root-item-rtl":"MiCoLv","submenuRootItemRtl":"MiCoLv","icon-after":"D4FSQa","iconAfter":"D4FSQa","submenu-root-item":"ZYkkn6","submenuRootItem":"ZYkkn6","icon-check":"GqRJ3A","iconCheck":"GqRJ3A","splitter-root":"MmUrC2","splitterRoot":"MmUrC2","splitter":"Y2PMqI","header-root":"hU1Ck0","headerRoot":"hU1Ck0","item-root":"NVzFiX","itemRoot":"NVzFiX","icon":"LNGh9i","link":"jqXSph","indent":"RVc-kI","selected-mark":"RgcEiT","selectedMark":"RgcEiT"};
+var css$1i = {"submenu-root-item-rtl":"E5Gvrn","submenuRootItemRtl":"E5Gvrn","icon-after":"L4V53I","iconAfter":"L4V53I","submenu-root-item":"iVvgXA","submenuRootItem":"iVvgXA","icon-check":"_1N1I42","iconCheck":"_1N1I42","splitter-root":"TJKB8R","splitterRoot":"TJKB8R","splitter":"kgB3bG","header-root":"_61hi4o","headerRoot":"_61hi4o","item-root":"QKh4gx","itemRoot":"QKh4gx","icon":"gDAQh1","link":"PnOKWz","indent":"NTUjuK","selected-mark":"t7P5a3","selectedMark":"t7P5a3"};
 
 exports.IDropdownControlKeys = void 0;
 (function (IDropdownControlKeys) {
@@ -1687,29 +1717,29 @@ const DropdownMenuButton = /* @__PURE__ */React__namespace.default.forwardRef((p
     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 ? 'primary' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: uuiCore.cx(css$1k.icon, iconPosition === 'right' ? css$1k.iconAfter : css$1k.iconBefore) }));
+        const iconElement = (React__namespace.default.createElement(IconButton, { icon: icon, color: isActive ? 'primary' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: uuiCore.cx(css$1i.icon, iconPosition === 'right' ? css$1i.iconAfter : css$1i.iconBefore) }));
         return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
             isIconBefore && iconElement,
-            React__namespace.default.createElement(uuiComponents.Text, { cx: props.indent && css$1k.indent }, caption),
+            React__namespace.default.createElement(uuiComponents.Text, { cx: props.indent && css$1i.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(props.cx, css$1k.itemRoot, isDisabled && uuiCore.uuiMod.disabled, isActive && uuiCore.uuiMod.active, isOpen && uuiCore.uuiMod.opened, (!isDisabled && onClick) && uuiCore.uuiMarkers.clickable);
-    return isAnchor ? (React__namespace.default.createElement(uuiComponents.Anchor, { cx: uuiCore.cx(css$1k.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isLinkActive: isActive, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__namespace.default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref },
+    const itemClassNames = uuiCore.cx(props.cx, css$1i.itemRoot, isDisabled && uuiCore.uuiMod.disabled, isActive && uuiCore.uuiMod.active, isOpen && uuiCore.uuiMod.opened, (!isDisabled && onClick) && uuiCore.uuiMarkers.clickable);
+    return isAnchor ? (React__namespace.default.createElement(uuiComponents.Anchor, { cx: uuiCore.cx(css$1i.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isLinkActive: isActive, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__namespace.default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref },
         getMenuButtonContent(),
         isSelected && (React__namespace.default.createElement(React__namespace.default.Fragment, null,
             React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
-            React__namespace.default.createElement(uuiComponents.IconContainer, { icon: settings.dropdownMenu.icons.acceptIcon, cx: css$1k.selectedMark })))));
+            React__namespace.default.createElement(uuiComponents.IconContainer, { icon: settings.dropdownMenu.icons.acceptIcon, cx: css$1i.selectedMark })))));
 });
 function DropdownMenuSplitter(props) {
-    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$1k.splitterRoot) },
-        React__namespace.default.createElement("hr", { className: css$1k.splitter })));
+    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$1i.splitterRoot) },
+        React__namespace.default.createElement("hr", { className: css$1i.splitter })));
 }
 function DropdownMenuHeader(props) {
-    return (React__namespace.default.createElement("div", { className: uuiCore.cx('uui-dropdown-menu-header', props.cx, css$1k.headerRoot) },
-        React__namespace.default.createElement("span", { className: css$1k.header }, props.caption)));
+    return (React__namespace.default.createElement("div", { className: uuiCore.cx('uui-dropdown-menu-header', props.cx, css$1i.headerRoot) },
+        React__namespace.default.createElement("span", { className: css$1i.header }, props.caption)));
 }
 function DropdownSubMenu(props) {
     const subMenuModifiers = [
@@ -1729,7 +1759,7 @@ function DropdownSubMenu(props) {
         },
     ];
     const isRtl = uuiCore.getDir() === 'rtl';
-    return (React__namespace.default.createElement(uuiComponents.Dropdown, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: isRtl ? 'left-start' : 'right-start', modifiers: subMenuModifiers, renderBody: (dropdownProps) => !props.isDisabled && (React__namespace.default.createElement(DropdownMenuBody, { closeOnKey: exports.IDropdownControlKeys.LEFT_ARROW, ...props, ...dropdownProps })), renderTarget: ({ toggleDropdownOpening, ...targetProps }) => (React__namespace.default.createElement(DropdownMenuButton, { cx: uuiCore.cx(isRtl ? css$1k.submenuRootItemRtl : css$1k.submenuRootItem), icon: settings.dropdownMenu.icons.dropdownIcon, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening, ...props, ...targetProps })) }));
+    return (React__namespace.default.createElement(uuiComponents.Dropdown, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: isRtl ? 'left-start' : 'right-start', modifiers: subMenuModifiers, renderBody: (dropdownProps) => !props.isDisabled && (React__namespace.default.createElement(DropdownMenuBody, { closeOnKey: exports.IDropdownControlKeys.LEFT_ARROW, ...props, ...dropdownProps })), renderTarget: ({ toggleDropdownOpening, ...targetProps }) => (React__namespace.default.createElement(DropdownMenuButton, { cx: uuiCore.cx(isRtl ? css$1i.submenuRootItemRtl : css$1i.submenuRootItem), icon: settings.dropdownMenu.icons.dropdownIcon, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening, ...props, ...targetProps })) }));
 }
 function DropdownMenuSwitchButton(props) {
     const context = React.useContext(uuiCore.UuiContext);
@@ -1745,29 +1775,29 @@ function DropdownMenuSwitchButton(props) {
             onHandleValueChange(!isSelected);
         }
     };
-    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$1k.itemRoot, isDisabled && uuiCore.uuiMod.disabled, (!isDisabled || onValueChange) && uuiCore.uuiMarkers.clickable), onClick: () => onHandleValueChange(!isSelected), role: "menuitem", onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 },
-        icon && React__namespace.default.createElement(uuiComponents.IconContainer, { icon: icon, cx: css$1k.iconBefore }),
+    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$1i.itemRoot, isDisabled && uuiCore.uuiMod.disabled, (!isDisabled || onValueChange) && uuiCore.uuiMarkers.clickable), onClick: () => onHandleValueChange(!isSelected), role: "menuitem", onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 },
+        icon && React__namespace.default.createElement(uuiComponents.IconContainer, { icon: icon, cx: css$1i.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$1j = {"root":"_9MRPF8","mode-block":"UQglSG","modeBlock":"UQglSG","mode-inline":"HdQmrl","modeInline":"HdQmrl","padding-0":"vdOXAZ","padding0":"vdOXAZ","padding-6":"xSqOI6","padding6":"xSqOI6","padding-12":"YHI-RA","padding12":"YHI-RA","padding-18":"_467MeR","padding18":"_467MeR"};
+var css$1h = {"root":"_7TFk1a","mode-block":"UUnqTv","modeBlock":"UUnqTv","mode-inline":"MIwkIt","modeInline":"MIwkIt","padding-0":"_7ZN6fG","padding0":"_7ZN6fG","padding-6":"oOd-hP","padding6":"oOd-hP","padding-12":"VwuxBa","padding12":"VwuxBa","padding-18":"_8DIewP","padding18":"_8DIewP"};
 
 function applyAccordionMods(mods) {
     return [
-        css$1j.root,
-        css$1j[`mode-${mods.mode || 'block'}`],
-        mods.padding && css$1j['padding-' + mods.padding],
+        css$1h.root,
+        css$1h[`mode-${mods.mode || 'block'}`],
+        mods.padding && css$1h['padding-' + mods.padding],
     ];
 }
 const Accordion = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Accordion, applyAccordionMods, (mods) => ({
     dropdownIcon: mods.dropdownIcon !== null && settings.accordion.icons.dropdownIcon,
 }));
 
-var css$1i = {"root":"ISyg6F","align-items":"_6pDgJ0","alignItems":"_6pDgJ0","justify-content":"Nu15hF","justifyContent":"Nu15hF","border-top":"_2kI5-C","borderTop":"_2kI5-C","border-bottom":"_7Fv2G3","borderBottom":"_7Fv2G3","top-shadow":"xbD9QD","topShadow":"xbD9QD","padding":"lP-TOc","margin":"-rG5ia","vPadding":"dKQ7Ce","column-gap":"JrO9e2","columnGap":"JrO9e2","row-gap":"mqg7-f","rowGap":"mqg7-f","spacing":"JmF70m","uui-bg-surface-main":"Je4NOG","uuiBgSurfaceMain":"Je4NOG"};
+var css$1g = {"root":"d-Q-fB","align-items":"WpVkcA","alignItems":"WpVkcA","justify-content":"AR8PDs","justifyContent":"AR8PDs","border-top":"_6mIROn","borderTop":"_6mIROn","border-bottom":"_4cm3o6","borderBottom":"_4cm3o6","top-shadow":"xqnXas","topShadow":"xqnXas","padding":"iRUiTf","margin":"_22xkZv","vPadding":"TJitE9","column-gap":"_6bydUj","columnGap":"_6bydUj","row-gap":"vvK1Rf","rowGap":"vvK1Rf","spacing":"jTol3I"};
 
-const FlexCell = /* @__PURE__ */uuiCore.withMods(uuiComponents.FlexCell, () => [css$1i.flexCell]);
+const FlexCell = /* @__PURE__ */uuiCore.withMods(uuiComponents.FlexCell, () => [css$1g.flexCell]);
 
 const FlexRow = /* @__PURE__ */React.forwardRef((props, ref) => {
     if (process.env.NODE_ENV !== "production") {
@@ -1776,23 +1806,23 @@ const FlexRow = /* @__PURE__ */React.forwardRef((props, ref) => {
         }
     }
     const classNames = uuiCore.cx([
-        css$1i.root,
+        css$1g.root,
         'uui-flex-row',
         props.onClick && uuiCore.uuiMarkers.clickable,
         props.cx,
         props.size !== null && 'uui-size-' + (props.size || settings.flexRow.sizes.default),
-        props.alignItems && css$1i.alignItems,
-        props.justifyContent && css$1i.justifyContent,
-        props.padding && css$1i.padding,
-        props.vPadding && css$1i.vPadding,
-        props.margin && css$1i.margin,
-        props.topShadow && css$1i.topShadow,
-        props.borderBottom && css$1i.borderBottom,
-        props.borderTop && css$1i.borderTop,
-        props.columnGap && css$1i.columnGap,
-        props.rowGap && css$1i.rowGap,
-        props.spacing && css$1i.spacing,
-        props.background && css$1i[`uui-bg-${props.background}`],
+        props.alignItems && css$1g.alignItems,
+        props.justifyContent && css$1g.justifyContent,
+        props.padding && css$1g.padding,
+        props.vPadding && css$1g.vPadding,
+        props.margin && css$1g.margin,
+        props.topShadow && css$1g.topShadow,
+        props.borderBottom && css$1g.borderBottom,
+        props.borderTop && css$1g.borderTop,
+        props.columnGap && css$1g.columnGap,
+        props.rowGap && css$1g.rowGap,
+        props.spacing && css$1g.spacing,
+        props.background && `uui-flex-row-bg-${props.background}`,
     ]);
     const style = {
         ...(props.alignItems && { '--uui-flex-row-align-items': props.alignItems }),
@@ -1810,32 +1840,32 @@ const FlexRow = /* @__PURE__ */React.forwardRef((props, ref) => {
         } }, props.children));
 });
 
-var css$1h = {"root":"Zt7GOR","margin-24":"Hxqg8c","margin24":"Hxqg8c","padding-12":"pYXVxn","padding12":"pYXVxn","padding-24":"_4cFeEU","padding24":"_4cFeEU","shadow":"kfa-nQ","uui-surface-main":"tsArhK","uuiSurfaceMain":"tsArhK"};
+var css$1f = {"root":"e7ufIk","margin-24":"OTd1ba","margin24":"OTd1ba","padding-12":"ChUgMF","padding12":"ChUgMF","padding-24":"WF5wvr","padding24":"WF5wvr","shadow":"O6ad1l","uui-surface-main":"CzP7A8","uuiSurfaceMain":"CzP7A8"};
 
 const Panel = /* @__PURE__ */uuiCore.withMods(uuiComponents.VPanel, (props) => [
     'uui-panel',
-    css$1h.root,
-    props.shadow && css$1h.shadow,
-    props.margin && css$1h['margin-' + props.margin],
-    props.background && css$1h[`uui-${props.background}`],
+    css$1f.root,
+    props.shadow && css$1f.shadow,
+    props.margin && css$1f['margin-' + props.margin],
+    props.background && css$1f[`uui-${props.background}`],
 ]);
 
-var css$1g = {"root":"_9me7l1"};
+var css$1e = {"root":"V0Ma84"};
 
 function applyTooltipMods(mods) {
     return [
-        css$1g.root,
+        css$1e.root,
         `uui-color-${mods.color || 'inverted'}`,
     ];
 }
 const Tooltip = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Tooltip, applyTooltipMods);
 
-var css$1f = {"root":"_1lhf2y"};
+var css$1d = {"root":"ZM0rjq"};
 
 function applyLabeledInputMods(mods) {
     return [
         'uui-labeled-input',
-        css$1f.root,
+        css$1d.root,
         'uui-size-' + (mods.size || settings.labeledInput.sizes.default),
     ];
 }
@@ -1847,7 +1877,7 @@ function applyLabeledInputProps(props) {
 }
 const LabeledInput = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.LabeledInput, applyLabeledInputMods, applyLabeledInputProps);
 
-var css$1e = {"root":"GAicnG"};
+var css$1c = {"root":"ePAxgt"};
 
 function RadioGroup(props) {
     const direction = props.direction || 'vertical';
@@ -1856,175 +1886,26 @@ function RadioGroup(props) {
             props.onValueChange(newVal);
         }
     };
-    return (React__namespace.createElement("fieldset", { ref: props.forwardedRef, className: uuiCore.cx(css$1e.root, uuiCore.directionMode[direction], props.cx), onFocus: props.onFocus, onBlur: props.onBlur, ...props.rawProps }, props.items.map((i) => {
+    return (React__namespace.createElement("fieldset", { ref: props.forwardedRef, className: uuiCore.cx(css$1c.root, uuiCore.directionMode[direction], props.cx), onFocus: props.onFocus, onBlur: props.onBlur, ...props.rawProps }, props.items.map((i) => {
         const { id, name, renderName, ...restItemProps } = i;
         return (React__namespace.createElement(RadioInput, { name: props.name, 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$1d = {"root":"-rhg4p"};
+var css$1b = {"root":"kgCowl"};
 
 function applyScrollBarsMods() {
     return [
-        css$1d.root, 'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
+        css$1b.root, 'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
     ];
 }
 const ScrollBars = /* @__PURE__ */uuiCore.withMods(uuiComponents.ScrollBars, applyScrollBarsMods);
 
-var css$1c = {"scroll-container":"-vGanP","scrollContainer":"-vGanP","list-container":"Gyv3E7","listContainer":"Gyv3E7"};
-
-var css$1b = {"root":"CFBjtt"};
-
-const AvatarStack = /* @__PURE__ */uuiCore.withMods(uuiComponents.AvatarStack, () => [css$1b.root]);
-
-var css$1a = {"root":"V8W3pw"};
-
-const DEFAULT_FILL = 'solid';
-function applyBadgeMods(mods) {
-    return [
-        'uui-badge',
-        css$1a.root,
-        `uui-size-${mods.size || settings.badge.sizes.default}`,
-        `uui-fill-${mods.fill || DEFAULT_FILL}`,
-        `uui-color-${mods.color || 'info'}`,
-    ];
-}
-const Badge = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
-    const styles = [applyBadgeMods(props), props.cx];
-    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.badge.icons.dropdownIcon;
-    return (React__namespace.default.createElement(uuiComponents.Clickable, { ...props, rawProps: {
-            'aria-haspopup': props.isDropdown,
-            'aria-expanded': props.isOpen,
-            ...props.rawProps,
-        }, cx: styles, ref: ref },
-        (props.indicator && props.fill === 'outline') && (React__namespace.default.createElement("div", { className: "uui-indicator" })),
-        props.icon && props.iconPosition !== 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
-        props.caption && (React__namespace.default.createElement("div", { className: uuiCore.uuiElement.caption }, props.caption)),
-        props.count !== undefined && props.count !== null && (React__namespace.default.createElement(CountIndicator, { key: "count-indicator", color: null, size: settings.badge.sizes.countIndicatorMap[props.size || settings.badge.sizes.default], caption: props.count })),
-        props.icon && props.iconPosition === 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
-        props.isDropdown && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
-});
-
-var css$19 = {"root":"_99RtV-"};
-
-function applyTagMods(props) {
-    return [
-        css$19.root,
-        `uui-size-${props.size || settings.tag.sizes.default}`,
-        `uui-color-${props.color || 'neutral'}`,
-        `uui-fill-${props.fill || 'solid'}`,
-        'uui-tag',
-    ];
-}
-const Tag = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
-    const styles = [applyTagMods(props), props.cx];
-    const ClearIcon = props.clearIcon ? props.clearIcon : settings.tag.icons.clearIcon;
-    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.tag.icons.dropdownIcon;
-    return (React__namespace.default.createElement(uuiComponents.Clickable, { ...props, rawProps: {
-            'aria-haspopup': props.isDropdown,
-            'aria-expanded': props.isOpen,
-            ...props.rawProps,
-        }, cx: styles, ref: ref },
-        props.icon && props.iconPosition !== 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
-        props.caption && (React__namespace.default.createElement("div", { className: uuiCore.uuiElement.caption }, props.caption)),
-        props.count !== undefined && props.count !== null && (React__namespace.default.createElement(CountIndicator, { color: (!props.color || props.color === 'neutral') ? 'white' : props.color, size: settings.tag.sizes.countIndicatorMap[(props.size || settings.tag.sizes.default)], caption: props.count })),
-        props.icon && props.iconPosition === 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
-        props.isDropdown && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen })),
-        props.onClear && !props.isDisabled && (React__namespace.default.createElement(uuiComponents.IconContainer, { cx: uuiCore.uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
-});
-
-var css$18 = {"root":"MKA8Es","uui-spinner":"Cg6J-G","uuiSpinner":"Cg6J-G"};
+var css$1a = {"scroll-container":"_--s0ho","scrollContainer":"_--s0ho","list-container":"_-96U1-","listContainer":"_-96U1-"};
 
-function applySpinnerMods() {
-    return [css$18.root, 'uui-spinner'];
-}
-const Spinner = /* @__PURE__ */uuiCore.withMods(uuiComponents.Spinner, applySpinnerMods);
-
-var css$17 = {"root":"_5MUWQj","page":"DLinp4","spacer":"kzpIIm","mode-ghost":"_7W6v0O","modeGhost":"_7W6v0O"};
-
-function Paginator(props) {
-    const renderPaginator = (params) => (React__namespace.default.createElement("nav", { role: "navigation", className: cx__default.default(css$17.root, 'uui-paginator', `uui-size-${props.size || settings.paginator.sizes.default}`), ...params.rawProps },
-        React__namespace.default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.leftArrowIcon, onClick: params.goToPrev, isDisabled: params.isFirst || props.isDisabled, fill: "outline", color: "secondary" }),
-        params.pages.map((page, index) => {
-            if (page.type === 'spacer') {
-                return (React__namespace.default.createElement(Button, { cx: cx__default.default(css$17.spacer, css$17.page), size: props.size || settings.paginator.sizes.default, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1, isDisabled: props.isDisabled }));
-            }
-            else {
-                return (React__namespace.default.createElement(Button, { cx: cx__default.default(css$17[`mode-${!page.isActive && 'ghost'}`], css$17.page), size: props.size || settings.paginator.sizes.default, key: page.pageNumber, caption: page.pageNumber, onClick: () => page.onClick?.(), rawProps: { 'aria-current': page.isActive }, fill: (page.isActive && 'outline') || 'ghost', color: "primary", isDisabled: props.isDisabled }));
-            }
-        }),
-        React__namespace.default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.rightArrowIcon, onClick: params.goToNext, isDisabled: params.isLast || props.isDisabled, fill: "outline", color: "secondary" })));
-    return React__namespace.default.createElement(uuiComponents.Paginator, { ...props, render: renderPaginator });
-}
-
-var css$16 = {"root":"aWoUxT","progress-bar":"i5Jybj","progressBar":"i5Jybj","progressBar-indeterminate":"NVvlu9","progressBarIndeterminate":"NVvlu9","size-12":"iMv1JJ","size12":"iMv1JJ","size-18":"xgI1ES","size18":"xgI1ES","size-24":"_4Ic0U7","size24":"_4Ic0U7"};
+var css$19 = {"root":"vY5vPW"};
 
-const IndeterminateBar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
-    return (React__namespace.createElement("div", { ref: ref, className: cx__default.default('uui-indeterminate_bar', props.cx, css$16.root, css$16[`size-${props.size || 12}`]) },
-        React__namespace.createElement("div", { className: cx__default.default(css$16.progressBar) })));
-});
-
-var css$15 = {"root":"t-Nk49","striped":"_6-sPRE","animate-stripes":"mZaW2D","animateStripes":"mZaW2D","size-12":"tiW043","size12":"tiW043","size-18":"C1ZL6Y","size18":"C1ZL6Y","size-24":"GkvDh5","size24":"GkvDh5"};
-
-const DEFAULT_SIZE = '12';
-function applyProgressBarMods(mods) {
-    const size = mods.size || DEFAULT_SIZE;
-    return [
-        css$15.root,
-        css$15[`size-${size}`],
-        mods.striped && css$15.striped,
-    ];
-}
-const ProgressBar = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.ProgressBar, applyProgressBarMods, (props) => ({
-    hideLabel: props.hideLabel || props.striped,
-}));
-
-var css$14 = {"root":"GHekfs"};
-
-const IndicatorBar = /* @__PURE__ */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$14.root, props.cx), hideLabel: true })) : (React__namespace.createElement(IndeterminateBar, { ref: ref, cx: cx__default.default(css$14.root, props.cx) }));
-});
-
-var css$13 = {"root":"rUlaLv"};
-
-const StatusIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
-    return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
-            css$13.root,
-            `uui-size-${props.size || settings.statusIndicator.sizes.default}`,
-            '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$12 = {"drag-handle":"z-Irr7","dragHandle":"z-Irr7","icon-container":"EMA7jG","iconContainer":"EMA7jG"};
-
-function DataRowAddons(props) {
-    const row = props.rowProps;
-    const getIndent = () => {
-        return (row.indent - 1) * settings.dataTable.sizes.body.indentUnitMap[props.size || settings.dataTable.sizes.body.row];
-    };
-    const getWidth = () => {
-        return settings.dataTable.sizes.body.indentWidthMap[props.size || settings.dataTable.sizes.body.row];
-    };
-    return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
-        row.dnd?.srcData && React__namespace.default.createElement(uuiComponents.DragHandle, { key: "dh", cx: css$12.dragHandle, rawProps: { ...props.eventHandlers } }),
-        row?.checkbox?.isVisible && (React__namespace.default.createElement(Checkbox, { key: "cb", cx: "uui-dr_addons-checkbox", tabIndex: props.tabIndex, size: settings.dataTable.sizes.body.checkboxMap[props.size], value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => row.onCheck?.(row), isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
-        row.indent > 0 && (React__namespace.default.createElement("div", { key: "fold", className: cx__default.default('uui-dr_addons-indent', `uui-size-${props.size}`), style: { marginInlineStart: getIndent(), width: getWidth() } }, row.isFoldable && (React__namespace.default.createElement(uuiComponents.IconContainer, { rawProps: {
-                'aria-label': row.isFolded ? 'Unfold' : 'Fold',
-                role: 'button',
-            }, key: "icon", icon: settings.dataTable.icons.body.foldingIcon, cx: [
-                uuiCore.uuiElement.foldingArrow, uuiCore.uuiMarkers.clickable, css$12.iconContainer,
-            ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), size: settings.dataTable.sizes.body.iconMap[props.size || settings.dataTable.sizes.body.row] }))))));
-}
-
-var css$11 = {"root":"E55IS2"};
-
-const Blocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.Blocker, () => [css$11.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__namespace.default.createElement(Spinner, null)) }));
+const Blocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.Blocker, () => [css$19.root], () => ({ renderSpinner: settings.blocker.renderSpinner }));
 
 const VirtualList = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const { listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef, } = uuiCore.useVirtualList({
@@ -2038,7 +1919,7 @@ const VirtualList = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const scrollShadows = uuiCore.useScrollShadows({ root: scrollContainerRef.current });
     const renderRows = () => props.renderRows?.({
         listContainerRef, estimatedHeight, offsetY, scrollShadows,
-    }) || (React__namespace.createElement("div", { className: css$1c.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+    }) || (React__namespace.createElement("div", { className: css$1a.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 }));
     const scrollBarsRef = React__namespace.useCallback((scrollbars) => {
@@ -2046,7 +1927,7 @@ const VirtualList = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
             return;
         scrollContainerRef.current = scrollbars.container.firstChild;
     }, []);
-    return (React__namespace.createElement(ScrollBars, { cx: uuiCore.cx(css$1c.scrollContainer, props.cx, {
+    return (React__namespace.createElement(ScrollBars, { cx: uuiCore.cx(css$1a.scrollContainer, props.cx, {
             [uuiCore.uuiMarkers.scrolledLeft]: scrollShadows.horizontalLeft,
             [uuiCore.uuiMarkers.scrolledRight]: scrollShadows.horizontalRight,
             [uuiCore.uuiMarkers.scrolledTop]: scrollShadows.verticalTop,
@@ -2068,7 +1949,7 @@ const VirtualListView = /* @__PURE__ */React__namespace.forwardRef((props, ref)
         React__namespace.createElement(Blocker, { isEnabled: props.isLoading })));
 });
 
-var css$10 = {"root":"jpS4Nf"};
+var css$18 = {"root":"wBEXJf"};
 
 function CheckboxGroup(props) {
     const currentValue = props.value || [];
@@ -2084,16 +1965,16 @@ function CheckboxGroup(props) {
         }
         props.onValueChange(newSelection);
     };
-    return (React__namespace.createElement("fieldset", { ref: props.forwardedRef, className: uuiCore.cx(css$10.root, uuiCore.directionMode[direction], props.cx), ...props.rawProps }, props.items.map((i) => {
+    return (React__namespace.createElement("fieldset", { ref: props.forwardedRef, className: uuiCore.cx(css$18.root, uuiCore.directionMode[direction], props.cx), ...props.rawProps }, props.items.map((i) => {
         const { id, name, renderName, ...restItemProps } = i;
         return (React__namespace.createElement(Checkbox, { 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$$ = {"root":"qMj3-g","modal-blocker":"pbYNUa","modalBlocker":"pbYNUa","animateModalBlocker":"DhducH","modal":"eL1vDj","modal-footer":"RtkFrn","modalFooter":"RtkFrn","border-top":"LLwUHs","borderTop":"LLwUHs","modal-header":"Byhirq","modalHeader":"Byhirq","border-bottom":"gT7ciw","borderBottom":"gT7ciw"};
+var css$17 = {"root":"qVXluU","modal-blocker":"FeZ1Nj","modalBlocker":"FeZ1Nj","animateModalBlocker":"_6Y3xUq","modal":"UULFzK","modal-footer":"NgPq43","modalFooter":"NgPq43","border-top":"HRnBN5","borderTop":"HRnBN5","modal-header":"_79e3JN","modalHeader":"_79e3JN","border-bottom":"syNGdA","borderBottom":"syNGdA"};
 
-const ModalBlocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalBlocker, () => [css$$.modalBlocker]);
-const ModalWindow = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalWindow, () => [css$$.root, css$$.modal], (props) => {
+const ModalBlocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalBlocker, () => [css$17.modalBlocker]);
+const ModalWindow = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalWindow, () => [css$17.root, css$17.modal], (props) => {
     const width = props.width;
     const height = props.height || 'auto';
     const maxHeight = uuiCore.isMobile() ? 'var(--uui-modals-mobile-max-height)' : (props.maxHeight || 'var(--uui-modals-max-height)');
@@ -2107,7 +1988,7 @@ const ModalWindow = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalWindow, (
     };
 });
 function ModalHeader(props) {
-    return (React__namespace.default.createElement("div", { className: cx__default.default(css$$.root, css$$.modalHeader, 'uui-modal-header', props.borderBottom && css$$.borderBottom, props.cx), ...props.rawProps, style: {
+    return (React__namespace.default.createElement("div", { className: cx__default.default(css$17.root, css$17.modalHeader, 'uui-modal-header', props.borderBottom && css$17.borderBottom, props.cx), ...props.rawProps, style: {
             ...props.rawProps?.style,
         } },
         props.title && (React__namespace.default.createElement("div", { className: cx__default.default('uui-modal-title', 'uui-typography') }, props.title)),
@@ -2117,7 +1998,7 @@ function ModalHeader(props) {
             React__namespace.default.createElement(IconButton, { rawProps: { 'aria-label': 'Close modal' }, icon: settings.modal.icons.closeIcon, onClick: props.onClose })))));
 }
 function ModalFooter(props) {
-    return (React__namespace.default.createElement("div", { className: cx__default.default(css$$.root, css$$.modalFooter, 'uui-modal-footer', props.borderTop && css$$.borderTop, props.cx), ...props.rawProps, style: {
+    return (React__namespace.default.createElement("div", { className: cx__default.default(css$17.root, css$17.modalFooter, 'uui-modal-footer', props.borderTop && css$17.borderTop, props.cx), ...props.rawProps, style: {
             ...props.rawProps?.style,
         } }, props.children));
 }
@@ -2280,7 +2161,7 @@ const TREE_SHAKEABLE_INIT = () => ({
 });
 const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
 
-var css$_ = {"root":"lxOMvh","icon-wrapper":"uHWn0y","iconWrapper":"uHWn0y","action-wrapper":"_99nc-9","actionWrapper":"_99nc-9","action-link":"FnGa0N","actionLink":"FnGa0N","close-icon":"g1w2vp","closeIcon":"g1w2vp","main-path":"oNIK50","mainPath":"oNIK50","content":"wMIwKm","close-wrapper":"nYtEeO","closeWrapper":"nYtEeO","notification-wrapper":"Hb4TpJ","notificationWrapper":"Hb4TpJ","clear-button":"VcPu9l","clearButton":"VcPu9l"};
+var css$16 = {"root":"r-d70Z","icon-wrapper":"_8ZgdD-","iconWrapper":"_8ZgdD-","action-wrapper":"u4deOz","actionWrapper":"u4deOz","action-link":"R-SvAa","actionLink":"R-SvAa","close-icon":"Qap3ZG","closeIcon":"Qap3ZG","main-path":"rdyFZW","mainPath":"rdyFZW","content":"aZvXQt","close-wrapper":"k3TafT","closeWrapper":"k3TafT","notification-wrapper":"zornVJ","notificationWrapper":"zornVJ","clear-button":"JUjSaR","clearButton":"JUjSaR"};
 
 const NotificationCard = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
     const notificationCardNode = React__namespace.default.useRef(null);
@@ -2293,15 +2174,15 @@ const NotificationCard = /* @__PURE__ */React__namespace.default.forwardRef((pro
             notificationCardNode.current?.removeEventListener('mouseleave', props.refreshTimer);
         };
     }, []);
-    return (React__namespace.default.createElement("div", { role: "alert", className: cx__default.default('uui-notification_card', props.color && `uui-color-${props.color}`, css$_.root, props.cx), ref: notificationCardNode, ...props.rawProps },
-        React__namespace.default.createElement("div", { className: css$_.mainPath },
-            props.icon && (React__namespace.default.createElement("div", { className: css$_.iconWrapper },
+    return (React__namespace.default.createElement("div", { role: "alert", className: cx__default.default('uui-notification_card', props.color && `uui-color-${props.color}`, css$16.root, props.cx), ref: notificationCardNode, ...props.rawProps },
+        React__namespace.default.createElement("div", { className: css$16.mainPath },
+            props.icon && (React__namespace.default.createElement("div", { className: css$16.iconWrapper },
                 React__namespace.default.createElement(uuiComponents.IconContainer, { size: 24, icon: props.icon }))),
-            React__namespace.default.createElement("div", { className: css$_.content },
+            React__namespace.default.createElement("div", { className: css$16.content },
                 props.children,
-                props.actions && (React__namespace.default.createElement("div", { className: css$_.actionWrapper }, props.actions.map((action) => (React__namespace.default.createElement(LinkButton, { key: action.name, caption: action.name, onClick: action.action, cx: css$_.actionLink, size: settings.notificationCard.sizes.action, rawProps: action.rawProps })))))),
-            props.onClose && (React__namespace.default.createElement("div", { className: css$_.closeWrapper },
-                React__namespace.default.createElement(IconButton, { icon: settings.notificationCard.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$_.closeIcon }))))));
+                props.actions && (React__namespace.default.createElement("div", { className: css$16.actionWrapper }, props.actions.map((action) => (React__namespace.default.createElement(LinkButton, { key: action.name, caption: action.name, onClick: action.action, cx: css$16.actionLink, size: settings.notificationCard.sizes.action, rawProps: action.rawProps })))))),
+            props.onClose && (React__namespace.default.createElement("div", { className: css$16.closeWrapper },
+                React__namespace.default.createElement(IconButton, { icon: settings.notificationCard.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$16.closeIcon }))))));
 });
 const WarningNotification = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, { icon: settings.notificationCard.icons.warningIcon, color: "warning", ...props, ref: ref, cx: props.cx })));
 const SuccessNotification = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, { icon: settings.notificationCard.icons.successIcon, color: "success", ...props, ref: ref, cx: props.cx })));
@@ -2309,11 +2190,11 @@ const HintNotification = /* @__PURE__ */React__namespace.default.forwardRef((pro
 const ErrorNotification = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, { icon: settings.notificationCard.icons.errorIcon, color: "error", ...props, ref: ref, cx: props.cx })));
 function ClearNotification() {
     const uuiCtx = uuiCore.useUuiContext();
-    return (React__namespace.default.createElement("div", { className: cx__default.default(css$_.notificationWrapper, css$_.clearButton) },
+    return (React__namespace.default.createElement("div", { className: cx__default.default(css$16.notificationWrapper, css$16.clearButton) },
         React__namespace.default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
 }
 
-var css$Z = {"footer":"jpdXPv"};
+var css$15 = {"footer":"yfBCW5"};
 
 class ConfirmationModal extends React__namespace.Component {
     render() {
@@ -2325,7 +2206,7 @@ class ConfirmationModal extends React__namespace.Component {
             React__namespace.createElement(ModalWindow, { width: 420 },
                 React__namespace.createElement(ModalHeader, { borderBottom: true, title: this.props.caption, onClose: () => this.props.abort() }),
                 React__namespace.createElement(ScrollBars, null, bodyContent),
-                React__namespace.createElement(ModalFooter, { cx: css$Z.footer },
+                React__namespace.createElement(ModalFooter, { cx: css$15.footer },
                     this.props.hideCancelButton || (React__namespace.createElement(Button, { caption: i18n.form.modals.discardButton, onClick: () => this.props.success(false), fill: "outline", color: "secondary" })),
                     React__namespace.createElement(Button, { caption: i18n.form.modals.saveButton, onClick: () => this.props.success(true), color: "primary" })))));
     }
@@ -2355,7 +2236,7 @@ function useReliableForceUpdate() {
     return red[1];
 }
 
-var css$Y = {"root":"WfNWxS","timepicker-input":"PRbzVL","timepickerInput":"PRbzVL","ltr-always":"Iiv8yW","ltrAlways":"Iiv8yW"};
+var css$14 = {"root":"aIUkWA","timepicker-input":"Vmnt5a","timepickerInput":"Vmnt5a","ltr-always":"_0-xKHe","ltrAlways":"_0-xKHe"};
 
 const uuiTimePicker = {
     container: 'uui-timepicker-container',
@@ -2394,8 +2275,8 @@ function TimePickerBody(props) {
         const minutesToSubtract = value.minute() % minutesStep === 0 ? minutesStep : value.minute() % minutesStep;
         onMinutesChange(value.subtract(minutesToSubtract, 'm').minute());
     };
-    return (React__namespace.createElement("div", { className: uuiCore.cx(css$Y.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef, ...props.rawProps },
-        React__namespace.createElement("div", { className: css$Y.ltrAlways },
+    return (React__namespace.createElement("div", { className: uuiCore.cx(css$14.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef, ...props.rawProps },
+        React__namespace.createElement("div", { className: css$14.ltrAlways },
             React__namespace.createElement("div", { className: uuiTimePicker.elementContainer },
                 React__namespace.createElement(uuiComponents.IconContainer, { size: 18, rawProps: { 'aria-label': 'Increment hours' }, cx: uuiTimePicker.iconUp, icon: ForwardRef$Q, onClick: () => onHoursChange(uuiDayjs.dayjs().set(props.value).add(1, 'h').hour()) }),
                 React__namespace.createElement(uuiComponents.NumericInput, { cx: uuiTimePicker.input, onValueChange: onHoursChange, value: +(uuiDayjs.dayjs()
@@ -2538,7 +2419,7 @@ function TimePicker(props) {
         state.value && state.inputValue && saveTime(state.value);
     };
     const renderInput = (inputProps) => {
-        return (React__namespace.default.createElement(TextInput, { ...inputProps, onClick: null, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$Y.root, css$Y.timepickerInput, props.inputCx], value: state.inputValue, onValueChange: handleInputChange, onCancel: !props.disableClear && onClear, onFocus: handleFocus, onBlur: handleBlur, isDropdown: false, placeholder: props.placeholder ? props.placeholder : getFormat(), mode: props.mode || DEFAULT_MODE, rawProps: props.rawProps?.input }));
+        return (React__namespace.default.createElement(TextInput, { ...inputProps, onClick: null, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$14.root, css$14.timepickerInput, props.inputCx], value: state.inputValue, onValueChange: handleInputChange, onCancel: !props.disableClear && onClear, onFocus: handleFocus, onBlur: handleBlur, isDropdown: false, placeholder: props.placeholder ? props.placeholder : getFormat(), mode: props.mode || DEFAULT_MODE, rawProps: props.rawProps?.input }));
     };
     const renderBody = (bodyProps) => {
         const { forwardedRef, onValueChange, ...timePickerBodyProps } = props;
@@ -2548,27 +2429,27 @@ function TimePicker(props) {
     return (React__namespace.default.createElement(Dropdown, { renderTarget: (targetProps) => (props.renderTarget ? props.renderTarget(targetProps) : renderInput(targetProps)), renderBody: (bodyProps) => !props.isDisabled && !props.isReadonly && renderBody(bodyProps), onValueChange: !props.isDisabled && !props.isReadonly ? onToggle : null, value: state.isOpen, modifiers: [{ name: 'offset', options: { offset: [0, 6] } }], forwardedRef: props.forwardedRef }));
 }
 
-var css$X = {"root":"PrRQLA"};
+var css$13 = {"root":"dXrY3g"};
 
 function applyInputAddonMods() {
     return [
-        css$X.root,
+        css$13.root,
     ];
 }
 const InputAddon = /* @__PURE__ */uuiCore.withMods(uuiComponents.InputAddon, applyInputAddonMods);
 
-var css$W = {"root":"oN9fNM"};
+var css$12 = {"root":"xbI--u"};
 
 function applySliderMods() {
-    return [css$W.root, 'uui-color-neutral'];
+    return [css$12.root, 'uui-color-neutral'];
 }
 const Slider = /* @__PURE__ */uuiCore.withMods(uuiComponents.Slider, applySliderMods);
 
-var css$V = {"root":"az9mk-","tooltip":"Zu11l7"};
+var css$11 = {"root":"mL-ZMs","tooltip":"vbKTDz"};
 
 function applyRatingMods(mods) {
     return [
-        css$V.root,
+        css$11.root,
         `uui-size-${mods.size || settings.rating.sizes.default}`,
     ];
 }
@@ -2578,7 +2459,7 @@ const Rating = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Rating,
     Tooltip,
 }));
 
-var css$U = {"root":"V1vaks","container":"I38P9n"};
+var css$10 = {"root":"GhizQ4","container":"EAwcbO"};
 
 const defaultFormat = 'MMM D, YYYY';
 const valueFormat = 'YYYY-MM-DD';
@@ -2782,21 +2663,21 @@ function DatePickerHeader({ navIconLeft, navIconRight, value: { month, view }, o
     }, [view, month]);
     const disablePrev = view === 'YEAR_SELECTION' && !isYearWithinSoberRange(getPrevYearsList(month));
     const disableNext = view === 'YEAR_SELECTION' && !isYearWithinSoberRange(getNextYearsList(month));
-    return (React__namespace.createElement("div", { className: cx__default.default(css$U.root, uuiHeader.container, cx__default.default) },
+    return (React__namespace.createElement("div", { className: cx__default.default(css$10.root, uuiHeader.container, cx__default.default) },
         React__namespace.createElement("header", { className: uuiHeader.headerNav },
             React__namespace.createElement(Button, { icon: navIconLeft || settings.datePicker.icons.body.prevIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconLeft, onClick: !isDisabled && (() => onLeftNavigationArrow()), isDisabled: disablePrev }),
             React__namespace.createElement(Button, { caption: title, fill: "ghost", cx: uuiHeader.navTitle, onClick: !isDisabled && (() => onCaptionClick(view)) }),
             React__namespace.createElement(Button, { icon: navIconRight || settings.datePicker.icons.body.nextIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
 }
 
-var css$T = {"root":"_6SYLl-"};
+var css$$ = {"root":"_8zTHRg"};
 
 function applyDateSelectionMods() {
-    return [css$T.root, `uui-size-${settings.datePicker.sizes.body}`];
+    return [css$$.root, `uui-size-${settings.datePicker.sizes.body}`];
 }
 const Calendar = /* @__PURE__ */uuiCore.withMods(uuiComponents.Calendar, applyDateSelectionMods);
 
-var css$S = {"root":"vtlg0P"};
+var css$_ = {"root":"KUBbjx"};
 
 const uuiDatePickerBody = {
     wrapper: 'uui-datepicker-body-wrapper',
@@ -2840,7 +2721,7 @@ function StatelessDatePickerBodyComp({ renderDay, isHoliday, cx: classes, filter
         }
     };
     return (React__namespace.default.createElement("div", { ref: ref, className: uuiCore.cx(uuiDatePickerBodyBase.container, `uui-size-${settings.datePicker.sizes.body}`, classes), ...rawProps },
-        React__namespace.default.createElement("div", { className: uuiCore.cx(css$S.root, uuiDatePickerBody.wrapper) },
+        React__namespace.default.createElement("div", { className: uuiCore.cx(css$_.root, uuiDatePickerBody.wrapper) },
             React__namespace.default.createElement(DatePickerHeader, { value: {
                     view,
                     month,
@@ -2922,7 +2803,7 @@ function DatePickerComponent(props, ref) {
 }
 const DatePicker = /* @__PURE__ */React__namespace.default.forwardRef(DatePickerComponent);
 
-var css$R = {"date-input":"OiChuR","dateInput":"OiChuR","root":"eMkVeZ","separator":"_0OZkk9","mode-form":"F2lPjS","modeForm":"F2lPjS","mode-cell":"yJW6Jw","modeCell":"yJW6Jw"};
+var css$Z = {"date-input":"tzkHsk","dateInput":"tzkHsk","root":"ANmkSw","separator":"Xy-z61","mode-form":"XSP1Kd","modeForm":"XSP1Kd","mode-cell":"bSU-AA","modeCell":"bSU-AA"};
 
 const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isInvalid, isReadonly, size, disableClear, rawProps, value, inFocus, format, onValueChange, onFocusInput, onBlurInput, onClick, getPlaceholder, filter, onKeyDown, id, cx: classes, }, ref) => {
     const [inputValue, setInputValue] = React.useState(toCustomDateRangeFormat(value, format));
@@ -2965,15 +2846,15 @@ const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isIn
     const clearAllowed = !disableClear && inputValue.from && inputValue.to;
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    React__namespace.default.createElement("div", { ref: ref, className: uuiCore.cx(`uui-size-${size || settings.rangeDatePicker.sizes.default}`, 'uui-range-date-picker', classes, css$R.root, isDisabled && uuiCore.uuiMod.disabled, isReadonly && uuiCore.uuiMod.readonly, isInvalid && uuiCore.uuiMod.invalid, inFocus && uuiCore.uuiMod.focus), onKeyDown: onKeyDown },
-        React__namespace.default.createElement(TextInput, { icon: settings.rangeDatePicker.icons.input.calendarIcon, cx: uuiCore.cx(css$R.dateInput, inFocus === 'from' && uuiCore.uuiMod.focus), size: size || settings.rangeDatePicker.sizes.default, placeholder: getPlaceholder ? getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: inputValue.from || undefined, onValueChange: (v) => onInputChange(v || '', 'from'), onFocus: (event) => handleFocus(event, 'from'), onBlur: (event) => handleBlur(event, 'from'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.from, onClick: onClick, onKeyDown: onInputKeyDown, id: id }),
-        React__namespace.default.createElement("div", { className: css$R.separator }),
-        React__namespace.default.createElement(TextInput, { cx: uuiCore.cx(css$R.dateInput, inFocus === 'to' && uuiCore.uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.rangeDatePicker.sizes.default, value: inputValue.to || undefined, onCancel: clearAllowed ? () => {
+    React__namespace.default.createElement("div", { ref: ref, className: uuiCore.cx(`uui-size-${size || settings.rangeDatePicker.sizes.default}`, 'uui-range-date-picker', classes, css$Z.root, isDisabled && uuiCore.uuiMod.disabled, isReadonly && uuiCore.uuiMod.readonly, isInvalid && uuiCore.uuiMod.invalid, inFocus && uuiCore.uuiMod.focus), onKeyDown: onKeyDown },
+        React__namespace.default.createElement(TextInput, { icon: settings.rangeDatePicker.icons.input.calendarIcon, cx: uuiCore.cx(css$Z.dateInput, inFocus === 'from' && uuiCore.uuiMod.focus), size: size || settings.rangeDatePicker.sizes.default, placeholder: getPlaceholder ? getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: inputValue.from || undefined, onValueChange: (v) => onInputChange(v || '', 'from'), onFocus: (event) => handleFocus(event, 'from'), onBlur: (event) => handleBlur(event, 'from'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.from, onClick: onClick, onKeyDown: onInputKeyDown, id: id }),
+        React__namespace.default.createElement("div", { className: css$Z.separator }),
+        React__namespace.default.createElement(TextInput, { cx: uuiCore.cx(css$Z.dateInput, inFocus === 'to' && uuiCore.uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.rangeDatePicker.sizes.default, value: inputValue.to || undefined, onCancel: clearAllowed ? () => {
                 onValueChange(defaultRangeValue);
             } : undefined, onValueChange: (v) => onInputChange(v || '', 'to'), onFocus: (e) => handleFocus(e, 'to'), onBlur: (e) => handleBlur(e, 'to'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.to, onClick: onClick, onKeyDown: onInputKeyDown })));
 });
 
-var css$Q = {"root":"PyTCLO"};
+var css$Y = {"root":"_1-2ivJ"};
 
 const uuiPresets = {
     container: 'uui-presets-container',
@@ -2988,12 +2869,12 @@ const getPresets = (presets) => {
     })).sort((a, b) => a.order - b.order);
 };
 function CalendarPresets(props) {
-    return (React__namespace.createElement("div", { ref: props.forwardedRef, className: uuiCore.cx(uuiPresets.container, css$Q.root, props.cx), ...props.rawProps },
+    return (React__namespace.createElement("div", { ref: props.forwardedRef, className: uuiCore.cx(uuiPresets.container, css$Y.root, props.cx), ...props.rawProps },
         React__namespace.createElement("div", { className: uuiPresets.header }, "Presets"),
         getPresets(props.presets).map((item) => (React__namespace.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: settings.rangeDatePicker.sizes.preset })))));
 }
 
-var css$P = {"root":"oMUEnB","container":"H6u1KE","day-selection":"dA2riP","daySelection":"dA2riP","from-picker":"n0qTga","fromPicker":"n0qTga","to-picker":"D5pB-6","toPicker":"D5pB-6","bodes-wrapper":"_7RblWr","bodesWrapper":"_7RblWr","blocker":"GxPQlT"};
+var css$X = {"root":"C6kzmJ","container":"M59ghC","day-selection":"HBi--o","daySelection":"HBi--o","from-picker":"Qzb0WQ","fromPicker":"Qzb0WQ","to-picker":"q-pk67","toPicker":"q-pk67","bodes-wrapper":"qbNc-t","bodesWrapper":"qbNc-t","blocker":"ntKRHH"};
 
 const uuiRangeDatePickerBody = {
     inRange: 'uui-range-datepicker-in-range',
@@ -3134,21 +3015,21 @@ function RangeDatePickerBodyComp(props, ref) {
                     });
                 }, presets: presets })));
     };
-    return (React__namespace.default.createElement("div", { ref: ref, className: uuiCore.cx(css$P.root, uuiDatePickerBodyBase.container, props.cx), ...props.rawProps },
-        React__namespace.default.createElement(FlexRow, { cx: [view === 'DAY_SELECTION' && css$P.daySelection, css$P.container], alignItems: "top" },
+    return (React__namespace.default.createElement("div", { ref: ref, className: uuiCore.cx(css$X.root, uuiDatePickerBodyBase.container, props.cx), ...props.rawProps },
+        React__namespace.default.createElement(FlexRow, { cx: [view === 'DAY_SELECTION' && css$X.daySelection, css$X.container], alignItems: "top" },
             React__namespace.default.createElement(FlexCell, { width: "auto" },
                 React__namespace.default.createElement(FlexRow, null,
-                    React__namespace.default.createElement(FlexRow, { cx: css$P.bodesWrapper, alignItems: "top" },
-                        React__namespace.default.createElement(StatelessDatePickerBody, { key: "date-picker-body-left", cx: uuiCore.cx(css$P.fromPicker), ...from, onValueChange: (v) => onBodyValueChange(v, 'from'), onMonthChange: (m) => {
+                    React__namespace.default.createElement(FlexRow, { cx: css$X.bodesWrapper, alignItems: "top" },
+                        React__namespace.default.createElement(StatelessDatePickerBody, { key: "date-picker-body-left", cx: uuiCore.cx(css$X.fromPicker), ...from, onValueChange: (v) => onBodyValueChange(v, 'from'), onMonthChange: (m) => {
                                 setMonth(m);
                             }, onViewChange: (v) => setView(v), filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay || renderDay, isDisabled: view !== 'DAY_SELECTION' && activeMonth === 'to' }),
-                        React__namespace.default.createElement(StatelessDatePickerBody, { key: "date-picker-body-right", cx: uuiCore.cx(css$P.toPicker), ...to, onValueChange: (v) => onBodyValueChange(v, 'to'), onMonthChange: (m) => {
+                        React__namespace.default.createElement(StatelessDatePickerBody, { key: "date-picker-body-right", cx: uuiCore.cx(css$X.toPicker), ...to, onValueChange: (v) => onBodyValueChange(v, 'to'), onMonthChange: (m) => {
                                 setMonth(m.subtract(1, 'month'));
                             }, onViewChange: (v) => setView(v), filter: props.filter, renderDay: props.renderDay || renderDay, isHoliday: props.isHoliday, isDisabled: view !== 'DAY_SELECTION' && activeMonth === 'from' }),
                         view !== 'DAY_SELECTION' && (React__namespace.default.createElement("div", { style: {
                                 left: activeMonth === 'from' ? '50%' : undefined,
                                 right: activeMonth === 'to' ? '50%' : undefined,
-                            }, className: css$P.blocker }))),
+                            }, className: css$X.blocker }))),
                     props.presets && renderPresets(props.presets)),
                 props.renderFooter && props.renderFooter()))));
 }
@@ -3168,7 +3049,7 @@ const getDayCX = (day, selectedDate) => {
     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)];
 };
 
-var css$O = {"dropdown-container":"_8Wxtxu","dropdownContainer":"_8Wxtxu"};
+var css$W = {"dropdown-container":"M-PAM5","dropdownContainer":"M-PAM5"};
 
 const modifiers = [{
         name: 'offset',
@@ -3212,7 +3093,7 @@ function RangeDatePickerComponent(props, ref) {
         }
     };
     const renderBody = (renderProps) => {
-        return (React__namespace.default.createElement(DropdownContainer, { ...renderProps, cx: cx__default.default(css$O.dropdownContainer), shards: [targetRef], returnFocus: true },
+        return (React__namespace.default.createElement(DropdownContainer, { ...renderProps, cx: cx__default.default(css$W.dropdownContainer), shards: [targetRef], returnFocus: true },
             React__namespace.default.createElement(FlexRow, null,
                 React__namespace.default.createElement(RangeDatePickerBody, { cx: cx__default.default(props.bodyCx), value: {
                         selectedDate: _value,
@@ -3236,30 +3117,30 @@ function RangeDatePickerComponent(props, ref) {
 }
 const RangeDatePicker = /* @__PURE__ */React__namespace.default.forwardRef(RangeDatePickerComponent);
 
-var css$N = {"root":"riHf0K","blocker":"dB-WXf","marker":"_4NJv6r","top":"SFom-v","bottom":"Fswuce","left":"oaWeF2","right":"lh960X","inside":"_8C6HPa"};
+var css$V = {"root":"yXuyET","blocker":"N5dd1r","marker":"yM2cRE","top":"lcWVdB","bottom":"jimZFF","left":"qH1C4H","right":"kQGIw1","inside":"ne-ILw"};
 
 function DropMarker(props) {
     return props.isDndInProgress
         ? (React__namespace.createElement(React__namespace.Fragment, null,
-            props.enableBlocker && React__namespace.createElement("div", { className: css$N.blocker }),
+            props.enableBlocker && React__namespace.createElement("div", { className: css$V.blocker }),
             React__namespace.createElement("div", { className: cx__default.default([
-                    css$N.root,
-                    css$N.marker,
-                    css$N[props.position],
+                    css$V.root,
+                    css$V.marker,
+                    css$V[props.position],
                     props?.cx,
                 ]) })))
         : null;
 }
 
-var css$M = {"root":"_8vRy7x","line-height":"_78puRb","lineHeight":"_78puRb","font-size":"KIA-up","fontSize":"KIA-up"};
+var css$U = {"root":"-uB4Nf","line-height":"WMU0mq","lineHeight":"WMU0mq","font-size":"CXtxWV","fontSize":"CXtxWV"};
 
 function applyTextMods(mods) {
     return [
-        css$M.root,
+        css$U.root,
         'uui-text',
         `uui-size-${mods.size || settings.text.sizes.default}`,
-        (mods.size !== 'none' || mods.lineHeight) && css$M.lineHeight,
-        (mods.size !== 'none' || mods.fontSize) && css$M.fontSize,
+        (mods.size !== 'none' || mods.lineHeight) && css$U.lineHeight,
+        (mods.size !== 'none' || mods.fontSize) && css$U.fontSize,
         `uui-color-${mods.color || 'primary'}`,
         `uui-font-weight-${mods.fontWeight || '400'}`,
         `uui-font-style-${mods.fontStyle || 'normal'}`,
@@ -3278,26 +3159,9 @@ const Text = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Text, appl
     };
 });
 
-var css$L = {"root":"iBJD1U","loading-word":"nl6Jr6","loadingWord":"nl6Jr6","animated-loading":"jcXHOz","animatedLoading":"jcXHOz","skeleton_loading":"xiGFmD","skeletonLoading":"xiGFmD"};
-
-const TextPlaceholder = (props) => {
-    const pattern = '&nbsp;';
-    const text = React__namespace.useMemo(() => {
-        const words = [];
-        for (let i = 0; i < (props.wordsCount || 1); i++) {
-            const lengthWord = Math.floor(Math.random() * 10 + 8);
-            words.push(pattern.repeat(lengthWord));
-        }
-        return words;
-    }, [props.wordsCount]);
-    return (React__namespace.createElement("div", { "aria-busy": true, className: cx__default.default(css$L.root, 'uui-text-placeholder'), ...props.rawProps }, text.map((it, index) => (React__namespace.createElement("span", { key: index, className: cx__default.default([
-            props.cx, css$L.loadingWord, !props.isNotAnimated && css$L.animatedLoading,
-        ]), dangerouslySetInnerHTML: { __html: it } })))));
-};
-
 const RichTextView = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || settings.richTextView.sizes.default}`]);
 
-var css$K = {"modal":"O2qpdE","search-wrapper":"_-37K4r","searchWrapper":"_-37K4r","no-data":"Mql-jL","noData":"Mql-jL","type-search-to-load-size-24":"jtRfOQ","typeSearchToLoadSize24":"jtRfOQ"};
+var css$T = {"modal":"-epZc3","search-wrapper":"tkQlgk","searchWrapper":"tkQlgk","no-data":"oGIrZd","noData":"oGIrZd","type-search-to-load-size-24":"_60e06z","typeSearchToLoadSize24":"_60e06z"};
 
 class DataPickerBody extends uuiComponents.PickerBodyBase {
     constructor() {
@@ -3316,7 +3180,7 @@ class DataPickerBody extends uuiComponents.PickerBodyBase {
             });
         }
         if (this.props.minCharsToSearch && search.length < this.props.minCharsToSearch) {
-            return (React__namespace.default.createElement(uuiComponents.FlexCell, { cx: css$K.noData, grow: 1, textAlign: "center" },
+            return (React__namespace.default.createElement(uuiComponents.FlexCell, { cx: css$T.noData, grow: 1, textAlign: "center" },
                 React__namespace.default.createElement(Text, { size: this.props.searchSize }, i18n.dataPickerBody.typeSearchToLoadMessage)));
         }
         if (this.props.rows.length === 0) {
@@ -3331,24 +3195,24 @@ class DataPickerBody extends uuiComponents.PickerBodyBase {
             }
             // Default no record found message for 'NOT_FOUND' and "NO_RECORDS" reason
             // TODO: make separate messages for 'NOT_FOUND' and "NO_RECORDS" reason
-            return (React__namespace.default.createElement(uuiComponents.FlexCell, { cx: css$K.noData, grow: 1, textAlign: "center" },
+            return (React__namespace.default.createElement(uuiComponents.FlexCell, { cx: css$T.noData, grow: 1, textAlign: "center" },
                 React__namespace.default.createElement(Text, { size: this.props.searchSize }, i18n.dataPickerBody.noRecordsMessage)));
         }
     }
     render() {
         const searchSize = this.getSearchSize();
         return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
-            this.showSearch() && (React__namespace.default.createElement("div", { key: "search", className: uuiCore.cx(css$K.searchWrapper, 'uui-picker_input-body-search') },
+            this.showSearch() && (React__namespace.default.createElement("div", { key: "search", className: uuiCore.cx(css$T.searchWrapper, 'uui-picker_input-body-search') },
                 React__namespace.default.createElement(uuiComponents.FlexCell, { grow: 1 },
                     React__namespace.default.createElement(SearchInput, { ref: this.searchRef, placeholder: i18n.dataPickerBody.searchPlaceholder, ...this.searchLens.toProps(), onKeyDown: this.searchKeyDown, size: searchSize, debounceDelay: this.props.searchDebounceDelay, rawProps: { dir: 'auto' } })))),
-            React__namespace.default.createElement(FlexRow, { key: "body", cx: uuiCore.cx('uui-picker_input-body', css$K[this.props.editMode], css$K[this.props.selectionMode]), rawProps: { style: { maxHeight: this.props.maxHeight, maxWidth: this.props.maxWidth } } }, this.props.rows.length === 0 && this.props.value.topIndex === 0
+            React__namespace.default.createElement(FlexRow, { key: "body", cx: uuiCore.cx('uui-picker_input-body', css$T[this.props.editMode], css$T[this.props.selectionMode]), rawProps: { style: { maxHeight: this.props.maxHeight, maxWidth: this.props.maxWidth } } }, this.props.rows.length === 0 && this.props.value.topIndex === 0
                 // We need to also ensure that topIndex === 0, because we can have state were there is no rows but topIndex > 0, in case when we scrolled lover than we have rows
                 // we fix this state on next render and shouldn't show empty state.
                 ? this.renderEmpty() : (React__namespace.default.createElement(VirtualList, { ...this.lens.toProps(), rows: this.props.rows, rawProps: this.props.rawProps, rowsCount: this.props.rowsCount, isLoading: this.props.isReloading })))));
     }
 }
 
-var css$J = {"footer":"Pm3ynv"};
+var css$S = {"footer":"aHp1QJ"};
 
 function DataPickerFooterImpl(props) {
     const { search, clearSelection, view, showSelected, selectionMode, isSearchTooShort, } = props;
@@ -3362,7 +3226,7 @@ function DataPickerFooterImpl(props) {
     const isSearching = search?.length;
     const hideFooter = (rowsCount === 0 && !hasSelection) || isSearching || (isSinglePicker && props.disableClear);
     const showClear = !props.disableClear && (isSinglePicker ? true : (!view.selectAll || hasSelection));
-    return !hideFooter && (React__namespace.default.createElement(FlexRow, { cx: css$J.footer },
+    return !hideFooter && (React__namespace.default.createElement(FlexRow, { cx: css$S.footer },
         !isSinglePicker && !isSearchTooShort && ( // Show this switch only for multi mode and when some rows rendered
         React__namespace.default.createElement(Switch, { size: settings.pickerInput.sizes.body.footerSwitchMap[props.size], value: showSelected.value, isDisabled: !hasSelection, onValueChange: showSelected.onValueChange, label: i18n.pickerInput.showOnlySelectedLabel })),
         React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
@@ -3374,17 +3238,159 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = /* @__PURE__ */React__namespace.default.memo(DataPickerFooterImpl);
 
-var css$I = {"header":"bpK491","title":"_2a7J-O","close":"LsOM9G"};
+var css$R = {"header":"Xh3NOh","title":"jgH9TH","close":"wiAN3Y"};
 
 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$I.header, 'uui-picker_input-body-header'] },
-        React__namespace.default.createElement("div", { className: css$I.title }, title),
-        React__namespace.default.createElement(IconButton, { icon: settings.pickerInput.icons.body.pickerBodyMobileHeaderCloseIcon, onClick: () => props.close?.(), cx: css$I.close })));
+    return (React__namespace.default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: [css$R.header, 'uui-picker_input-body-header'] },
+        React__namespace.default.createElement("div", { className: css$R.title }, title),
+        React__namespace.default.createElement(IconButton, { icon: settings.pickerInput.icons.body.pickerBodyMobileHeaderCloseIcon, onClick: () => props.close?.(), cx: css$R.close })));
 };
 const DataPickerHeader = /* @__PURE__ */React__namespace.default.memo(DataPickerHeaderImpl);
 
-var css$H = {"root":"DUs1HI","align-widgets-top":"_8ijZiG","alignWidgetsTop":"_8ijZiG","align-widgets-center":"_6mf4uM","alignWidgetsCenter":"_6mf4uM","icon-container":"peAG1j","iconContainer":"peAG1j","loading-cell":"YjOMRC","loadingCell":"YjOMRC","content-wrapper":"afYQZC","contentWrapper":"afYQZC","render-item":"ElZ9WV","renderItem":"ElZ9WV","icon-wrapper":"vTvIa1","iconWrapper":"vTvIa1","icon-default":"-srRB8","iconDefault":"-srRB8","selected-mark":"ngjhMH","selectedMark":"ngjhMH"};
+var css$Q = {"root":"qmChf4"};
+
+const AvatarStack = /* @__PURE__ */uuiCore.withMods(uuiComponents.AvatarStack, () => [css$Q.root]);
+
+var css$P = {"root":"y4qe6c"};
+
+const DEFAULT_FILL = 'solid';
+function applyBadgeMods(mods) {
+    return [
+        'uui-badge',
+        css$P.root,
+        `uui-size-${mods.size || settings.badge.sizes.default}`,
+        `uui-fill-${mods.fill || DEFAULT_FILL}`,
+        `uui-color-${mods.color || 'info'}`,
+    ];
+}
+const Badge = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
+    const styles = [applyBadgeMods(props), props.cx];
+    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.badge.icons.dropdownIcon;
+    return (React__namespace.default.createElement(uuiComponents.Clickable, { ...props, rawProps: {
+            'aria-haspopup': props.isDropdown,
+            'aria-expanded': props.isOpen,
+            ...props.rawProps,
+        }, cx: styles, ref: ref },
+        (props.indicator && props.fill === 'outline') && (React__namespace.default.createElement("div", { className: "uui-indicator" })),
+        props.icon && props.iconPosition !== 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
+        props.caption && (React__namespace.default.createElement("div", { className: uuiCore.uuiElement.caption }, props.caption)),
+        props.count !== undefined && props.count !== null && (React__namespace.default.createElement(CountIndicator, { key: "count-indicator", color: null, size: settings.badge.sizes.countIndicatorMap[props.size || settings.badge.sizes.default], caption: props.count })),
+        props.icon && props.iconPosition === 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
+        props.isDropdown && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
+});
+
+var css$O = {"root":"lkjETM"};
+
+function applyTagMods(props) {
+    return [
+        css$O.root,
+        `uui-size-${props.size || settings.tag.sizes.default}`,
+        `uui-color-${props.color || 'neutral'}`,
+        `uui-fill-${props.fill || 'solid'}`,
+        'uui-tag',
+    ];
+}
+const Tag = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
+    const styles = [applyTagMods(props), props.cx];
+    const ClearIcon = props.clearIcon ? props.clearIcon : settings.tag.icons.clearIcon;
+    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.tag.icons.dropdownIcon;
+    return (React__namespace.default.createElement(uuiComponents.Clickable, { ...props, rawProps: {
+            'aria-haspopup': props.isDropdown,
+            'aria-expanded': props.isOpen,
+            ...props.rawProps,
+        }, cx: styles, ref: ref },
+        props.icon && props.iconPosition !== 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
+        props.caption && (React__namespace.default.createElement("div", { className: uuiCore.uuiElement.caption }, props.caption)),
+        props.count !== undefined && props.count !== null && (React__namespace.default.createElement(CountIndicator, { color: (!props.color || props.color === 'neutral') ? 'white' : props.color, size: settings.tag.sizes.countIndicatorMap[(props.size || settings.tag.sizes.default)], caption: props.count })),
+        props.icon && props.iconPosition === 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
+        props.isDropdown && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen })),
+        props.onClear && !props.isDisabled && (React__namespace.default.createElement(uuiComponents.IconContainer, { cx: uuiCore.uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
+});
+
+var css$N = {"root":"fQb-Dw","page":"FD3Pjt","spacer":"ZIxNHJ","mode-ghost":"in7osj","modeGhost":"in7osj"};
+
+function Paginator(props) {
+    const renderPaginator = (params) => (React__namespace.default.createElement("nav", { role: "navigation", className: cx__default.default(css$N.root, 'uui-paginator', `uui-size-${props.size || settings.paginator.sizes.default}`), ...params.rawProps },
+        React__namespace.default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.leftArrowIcon, onClick: params.goToPrev, isDisabled: params.isFirst || props.isDisabled, fill: "outline", color: "secondary" }),
+        params.pages.map((page, index) => {
+            if (page.type === 'spacer') {
+                return (React__namespace.default.createElement(Button, { cx: cx__default.default(css$N.spacer, css$N.page), size: props.size || settings.paginator.sizes.default, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1, isDisabled: props.isDisabled }));
+            }
+            else {
+                return (React__namespace.default.createElement(Button, { cx: cx__default.default(css$N[`mode-${!page.isActive && 'ghost'}`], css$N.page), size: props.size || settings.paginator.sizes.default, key: page.pageNumber, caption: page.pageNumber, onClick: () => page.onClick?.(), rawProps: { 'aria-current': page.isActive }, fill: (page.isActive && 'outline') || 'ghost', color: "primary", isDisabled: props.isDisabled }));
+            }
+        }),
+        React__namespace.default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.rightArrowIcon, onClick: params.goToNext, isDisabled: params.isLast || props.isDisabled, fill: "outline", color: "secondary" })));
+    return React__namespace.default.createElement(uuiComponents.Paginator, { ...props, render: renderPaginator });
+}
+
+var css$M = {"root":"-smroZ","progress-bar":"FfgO5p","progressBar":"FfgO5p","progressBar-indeterminate":"tK3xSU","progressBarIndeterminate":"tK3xSU","size-12":"JSOCnj","size12":"JSOCnj","size-18":"lsvm-L","size18":"lsvm-L","size-24":"ZbBI1e","size24":"ZbBI1e"};
+
+const IndeterminateBar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
+    return (React__namespace.createElement("div", { ref: ref, className: cx__default.default('uui-indeterminate_bar', props.cx, css$M.root, css$M[`size-${props.size || 12}`]) },
+        React__namespace.createElement("div", { className: cx__default.default(css$M.progressBar) })));
+});
+
+var css$L = {"root":"_7mxkL8","striped":"yXqNQC","animate-stripes":"TIiRpU","animateStripes":"TIiRpU","size-12":"hgoJva","size12":"hgoJva","size-18":"eF6bdw","size18":"eF6bdw","size-24":"_5CgMyp","size24":"_5CgMyp"};
+
+const DEFAULT_SIZE = '12';
+function applyProgressBarMods(mods) {
+    const size = mods.size || DEFAULT_SIZE;
+    return [
+        css$L.root,
+        css$L[`size-${size}`],
+        mods.striped && css$L.striped,
+    ];
+}
+const ProgressBar = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.ProgressBar, applyProgressBarMods, (props) => ({
+    hideLabel: props.hideLabel || props.striped,
+}));
+
+var css$K = {"root":"_6ZNAdU"};
+
+const IndicatorBar = /* @__PURE__ */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$K.root, props.cx), hideLabel: true })) : (React__namespace.createElement(IndeterminateBar, { ref: ref, cx: cx__default.default(css$K.root, props.cx) }));
+});
+
+var css$J = {"root":"-tXIEB"};
+
+const StatusIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
+    return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
+            css$J.root,
+            `uui-size-${props.size || settings.statusIndicator.sizes.default}`,
+            '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$I = {"drag-handle":"Byw5m7","dragHandle":"Byw5m7","icon-container":"ptrnrS","iconContainer":"ptrnrS"};
+
+function DataRowAddons(props) {
+    const row = props.rowProps;
+    const getIndent = () => {
+        return (row.indent - 1) * settings.dataTable.sizes.body.indentUnitMap[props.size || settings.dataTable.sizes.body.row];
+    };
+    const getWidth = () => {
+        return settings.dataTable.sizes.body.indentWidthMap[props.size || settings.dataTable.sizes.body.row];
+    };
+    return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
+        row.dnd?.srcData && React__namespace.default.createElement(uuiComponents.DragHandle, { key: "dh", cx: css$I.dragHandle, rawProps: { ...props.eventHandlers } }),
+        row?.checkbox?.isVisible && (React__namespace.default.createElement(Checkbox, { key: "cb", cx: "uui-dr_addons-checkbox", tabIndex: props.tabIndex, size: settings.dataTable.sizes.body.checkboxMap[props.size], value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => row.onCheck?.(row), isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
+        row.indent > 0 && (React__namespace.default.createElement("div", { key: "fold", className: cx__default.default('uui-dr_addons-indent', `uui-size-${props.size}`), style: { marginInlineStart: getIndent(), width: getWidth() } }, row.isFoldable && (React__namespace.default.createElement(uuiComponents.IconContainer, { rawProps: {
+                'aria-label': row.isFolded ? 'Unfold' : 'Fold',
+                role: 'button',
+            }, key: "icon", icon: settings.dataTable.icons.body.foldingIcon, cx: [
+                uuiCore.uuiElement.foldingArrow, uuiCore.uuiMarkers.clickable, css$I.iconContainer,
+            ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), size: settings.dataTable.sizes.body.iconMap[props.size || settings.dataTable.sizes.body.row] }))))));
+}
+
+var css$H = {"root":"-N3CWw","align-widgets-top":"DQPaMj","alignWidgetsTop":"DQPaMj","align-widgets-center":"OVlRb8","alignWidgetsCenter":"OVlRb8","icon-container":"CBPZU-","iconContainer":"CBPZU-","loading-cell":"BCUogW","loadingCell":"BCUogW","content-wrapper":"xKZJOx","contentWrapper":"xKZJOx","render-item":"kk8Szx","renderItem":"kk8Szx","icon-wrapper":"GasdAg","iconWrapper":"GasdAg","icon-default":"Xtb-p6","iconDefault":"Xtb-p6","selected-mark":"_8HbyrB","selectedMark":"_8HbyrB"};
 
 function DataPickerCell(props) {
     const ref = React__namespace.useRef();
@@ -3392,8 +3398,7 @@ function DataPickerCell(props) {
     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, cx: css$H.loadingCell },
-            React__namespace.createElement(TextPlaceholder, null)));
+        React__namespace.createElement(Text, { key: "t", size: props.size, cx: css$H.loadingCell }, settings.pickerInput.renderPlaceholder()));
     }
     else if (props.rowProps.isUnknown) {
         content = (React__namespace.createElement(Text, { key: "t", size: props.size }, "Unknown"));
@@ -3425,7 +3430,7 @@ function DataPickerCell(props) {
         getWrappedContent()));
 }
 
-var css$G = {"picker-row":"_7A6v9S","pickerRow":"_7A6v9S"};
+var css$G = {"picker-row":"msc37k","pickerRow":"msc37k"};
 
 class DataPickerRow extends React__namespace.Component {
     constructor() {
@@ -3439,7 +3444,7 @@ class DataPickerRow extends React__namespace.Component {
     }
 }
 
-var css$F = {"done":"Qv5AvC","container":"lMNRB8"};
+var css$F = {"done":"hJW-s8","container":"alaYb-"};
 
 const PickerBodyMobileView = (props) => {
     const isMobileView = uuiCore.isMobile();
@@ -3516,7 +3521,7 @@ const getHighlightedSearchMatches = (str, search) => {
     return getDecoratedText(str, ranges);
 };
 
-var css$E = {"root":"GZPRBY","column-gap":"yCLDKq","columnGap":"yCLDKq","title":"_-1JsRW","subtitle":"_1CfPsC","disabled":"e0XZWh","multiline":"tneMEZ"};
+var css$E = {"root":"RA86Nl","column-gap":"MMAxij","columnGap":"MMAxij","title":"wfto9u","subtitle":"_9FR9xr","disabled":"fEeXWa","multiline":"_0230ms"};
 
 function PickerItem(props) {
     const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, } = props;
@@ -3537,7 +3542,7 @@ function getAvatarSize(size, isMultiline) {
     return settings.pickerInput.sizes.body[isMultiline ? 'itemAvatarMultilineMap' : 'itemAvatarMap'][size];
 }
 
-var css$D = {"sub-header-wrapper":"tdCA-K","subHeaderWrapper":"tdCA-K","switch":"z2uAsr","no-found-modal-container":"GcfPcg","noFoundModalContainer":"GcfPcg","no-found-modal-container-icon":"rYosly","noFoundModalContainerIcon":"rYosly","no-found-modal-container-text":"_4-oX18","noFoundModalContainerText":"_4-oX18"};
+var css$D = {"sub-header-wrapper":"-Xfnve","subHeaderWrapper":"-Xfnve","switch":"vWtThq","no-found-modal-container":"_0xl76W","noFoundModalContainer":"_0xl76W","no-found-modal-container-icon":"f25sjz","noFoundModalContainerIcon":"f25sjz","no-found-modal-container-text":"dkNH-1","noFoundModalContainerText":"dkNH-1"};
 
 function PickerModal(props) {
     const { view, selection, dataSourceStateLens, dataSourceState, getDataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = uuiComponents.usePickerModal(props);
@@ -3592,7 +3597,7 @@ function PickerModal(props) {
             React__namespace.default.createElement(ModalFooter, null, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$C = {"tooltip":"YgpESQ"};
+var css$C = {"tooltip":"wwTyxH"};
 
 const PickerTogglerTag = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const tagProps = {
@@ -3611,7 +3616,7 @@ const PickerTogglerTag = /* @__PURE__ */React__namespace.forwardRef((props, ref)
     }
 });
 
-var css$B = {"root":"xCDx0K","mode-form":"g6kc1R","modeForm":"g6kc1R","mode-cell":"q3nUFo","modeCell":"q3nUFo","mode-inline":"Onm97s","modeInline":"Onm97s"};
+var css$B = {"root":"CAvCYH","mode-form":"OGeq0z","modeForm":"OGeq0z","mode-cell":"I-NGib","modeCell":"I-NGib","mode-inline":"I89UxR","modeInline":"I89UxR"};
 
 const defaultMode = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
@@ -3712,7 +3717,7 @@ function PickerInputComponent({ highlightSearchMatches = true, ...props }, ref)
 }
 const PickerInput = /* @__PURE__ */React__namespace.default.forwardRef(PickerInputComponent);
 
-var css$A = {"row":"CNfKqW"};
+var css$A = {"row":"jNNNeD"};
 
 function PickerListItem(props) {
     let label;
@@ -3732,7 +3737,7 @@ function PickerListItem(props) {
     return (React__namespace.default.createElement("div", { role: "option", "aria-selected": props.isSelectable ? props.isSelected : undefined, "aria-busy": props.isLoading, "aria-posinset": props.index + 1, ...(props.checkbox?.isVisible && { 'aria-checked': props.isChecked }), className: css$A.row }, component));
 }
 
-var css$z = {"root":"YiCHLj"};
+var css$z = {"root":"HcTpU5"};
 
 function PickerList(props) {
     const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, dataSourceState, getModalTogglerCaption, } = uuiComponents.usePickerList(props);
@@ -3767,7 +3772,7 @@ function PickerList(props) {
             }, selectedRows)));
 }
 
-var css$y = {"root":"c6HuFy","wrapper":"vZUekd","align-widgets-top":"_0rxvBa","alignWidgetsTop":"_0rxvBa","align-widgets-center":"_88Jy2u","alignWidgetsCenter":"_88Jy2u"};
+var css$y = {"root":"VtLkh-","wrapper":"U8po1N","align-widgets-top":"-f8vwb","alignWidgetsTop":"-f8vwb","align-widgets-center":"_8cBqD-","alignWidgetsCenter":"_8cBqD-"};
 
 function DataTableCell(initialProps) {
     const props = { ...initialProps };
@@ -3775,8 +3780,7 @@ function DataTableCell(initialProps) {
         props.addons = React__namespace.createElement(DataRowAddons, { size: props.size, ...props });
     }
     props.renderPlaceholder = props.renderPlaceholder
-        || (() => (React__namespace.createElement(Text, { key: "t", size: props.size },
-            React__namespace.createElement(TextPlaceholder, { isNotAnimated: true }))));
+        || (() => (React__namespace.createElement(Text, { key: "t", size: props.size }, settings.dataTable.renderPlaceholder())));
     props.renderUnknown = props.renderUnknown
         || (() => (React__namespace.createElement(Text, { key: "t", size: props.size }, "Unknown")));
     props.renderTooltip = (tooltipProps) => React__namespace.createElement(Tooltip, { color: "critical", ...tooltipProps });
@@ -3816,7 +3820,7 @@ function DataTableCell(initialProps) {
     return React__namespace.createElement(uuiComponents.DataTableCell, { ...props });
 }
 
-var css$x = {"root":"LjPj1D"};
+var css$x = {"root":"_1VDQpZ"};
 
 // 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.
@@ -3832,7 +3836,7 @@ const DataTableRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableRow,
     ];
 }, () => propsMods);
 
-var css$w = {"sorting-panel-container":"I6YVcu","sortingPanelContainer":"I6YVcu"};
+var css$w = {"sorting-panel-container":"tJOLVj","sortingPanelContainer":"tJOLVj"};
 
 const SortingPanelImpl = ({ sortDirection, onSort }) => {
     const sortAsc = React.useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
@@ -3857,7 +3861,7 @@ const ColumnHeaderDropdownImpl = (props) => {
 };
 const ColumnHeaderDropdown = /* @__PURE__ */React__namespace.default.memo(ColumnHeaderDropdownImpl);
 
-var css$v = {"root":"xXibQC","caption-wrapper":"rHgGdD","captionWrapper":"rHgGdD","sort-icon":"_4I5Z80","sortIcon":"_4I5Z80","dropdown-icon":"xo2OFh","dropdownIcon":"xo2OFh","infoIcon":"F7Jtoc","resizable":"_8c2fsS","align-right":"_1dOhzc","alignRight":"_1dOhzc","align-center":"ORueaq","alignCenter":"ORueaq","caption":"H8sbN5","truncate":"yupg2P","upper-case":"MaKTyv","upperCase":"MaKTyv","checkbox":"MCyDsR","icon":"sdd4EQ","fold-all-icon":"rdYWKR","foldAllIcon":"rdYWKR","cell-tooltip":"tAtB60","cellTooltip":"tAtB60","resizing-marker":"PZmj1N","resizingMarker":"PZmj1N","pinned-right":"_7vh-aT","pinnedRight":"_7vh-aT","draggable":"_-9ZEXH","ghost":"uA-Pql","is-dragged-out":"D3c5ei","isDraggedOut":"D3c5ei","dnd-marker-left":"TRMbFz","dndMarkerLeft":"TRMbFz","dnd-marker-right":"aCAZZj","dndMarkerRight":"aCAZZj","cell-tooltip-wrapper":"_3SdPnG","cellTooltipWrapper":"_3SdPnG","cell-tooltip-text":"drEmDy","cellTooltipText":"drEmDy","tooltip-caption":"-ZUUmu","tooltipCaption":"-ZUUmu","tooltip-info":"UQBG1d","tooltipInfo":"UQBG1d"};
+var css$v = {"root":"_48b-nR","caption-wrapper":"hywdjT","captionWrapper":"hywdjT","sort-icon":"piYC7o","sortIcon":"piYC7o","dropdown-icon":"kExqVJ","dropdownIcon":"kExqVJ","infoIcon":"y24y8e","resizable":"_8szJs3","align-right":"kIF82w","alignRight":"kIF82w","align-center":"Rd7Jzu","alignCenter":"Rd7Jzu","caption":"IJcumt","truncate":"q5Slbb","upper-case":"c-1a1s","upperCase":"c-1a1s","checkbox":"RHTeKT","icon":"_1qQRXR","fold-all-icon":"qjSeCs","foldAllIcon":"qjSeCs","cell-tooltip":"T6MvfP","cellTooltip":"T6MvfP","resizing-marker":"ImiMuh","resizingMarker":"ImiMuh","pinned-right":"evQ2nn","pinnedRight":"evQ2nn","draggable":"IT5YeF","ghost":"Zl-Dj5","is-dragged-out":"SNiLeG","isDraggedOut":"SNiLeG","dnd-marker-left":"kpWgCc","dndMarkerLeft":"kpWgCc","dnd-marker-right":"idjE1d","dndMarkerRight":"idjE1d","cell-tooltip-wrapper":"qnxiUl","cellTooltipWrapper":"qnxiUl","cell-tooltip-text":"MqWydU","cellTooltipText":"MqWydU","tooltip-caption":"RxeZTe","tooltipCaption":"RxeZTe","tooltip-info":"ANz59x","tooltipInfo":"ANz59x"};
 
 class DataTableHeaderCell extends React__namespace.Component {
     constructor() {
@@ -3951,7 +3955,7 @@ class DataTableHeaderCell extends React__namespace.Component {
     }
 }
 
-var css$u = {"root":"MiDaDw","caption-wrapper":"UnqE3O","captionWrapper":"UnqE3O","align-center":"_0Y3epK","alignCenter":"_0Y3epK","caption":"NIP-qk","truncate":"c9jykp","upper-case":"eQGbCM","upperCase":"eQGbCM","group-cell-tooltip":"bjcMK-","groupCellTooltip":"bjcMK-","group-cell-tooltip-wrapper":"q4NSc6","groupCellTooltipWrapper":"q4NSc6","group-cell-tooltip-text":"tCZlmt","groupCellTooltipText":"tCZlmt","tooltip-caption":"GxurnA","tooltipCaption":"GxurnA","tooltip-info":"c96fi0","tooltipInfo":"c96fi0"};
+var css$u = {"root":"Y8JWtm","caption-wrapper":"hrFKIY","captionWrapper":"hrFKIY","align-center":"vPCZZ9","alignCenter":"vPCZZ9","caption":"WOEEpa","truncate":"o3h-ud","upper-case":"gt5XQS","upperCase":"gt5XQS","group-cell-tooltip":"a1-yAA","groupCellTooltip":"a1-yAA","group-cell-tooltip-wrapper":"ZMi6Bx","groupCellTooltipWrapper":"ZMi6Bx","group-cell-tooltip-text":"O1jRN9","groupCellTooltipText":"O1jRN9","tooltip-caption":"Xqzhaq","tooltipCaption":"Xqzhaq","tooltip-info":"iA10Zw","tooltipInfo":"iA10Zw"};
 
 class DataTableHeaderGroupCell extends React__namespace.Component {
     constructor() {
@@ -3991,7 +3995,7 @@ class DataTableHeaderGroupCell extends React__namespace.Component {
     }
 }
 
-var css$t = {"root":"moCfpe"};
+var css$t = {"root":"kMOrYG"};
 
 const DataTableHeaderRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableHeaderRow, () => [css$t.root, 'uui-dt-vars'], (mods) => ({
     renderCell: (props) => (React__namespace.createElement(DataTableHeaderCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.column.key, columnsGap: mods.columnsGap })),
@@ -4004,7 +4008,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$s = {"root":"KfPaUl","title-wrapper":"LRZe1k","titleWrapper":"LRZe1k","title":"GeKe5g","text-wrapper":"lJBe5v","textWrapper":"lJBe5v","selection":"C6SuiM","postfix":"Jty9pe","selected":"qqPx53"};
+var css$s = {"root":"wvydVB","title-wrapper":"TBME5K","titleWrapper":"TBME5K","title":"E6cDIN","text-wrapper":"A6RI-Q","textWrapper":"A6RI-Q","selection":"EFb0qg","postfix":"KebYoR","selected":"zD9HRm"};
 
 const FilterPanelItemToggler = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const togglerPickerOpened = (e) => {
@@ -4172,7 +4176,7 @@ function FilterRangeDatePickerBody(props) {
                 React__namespace.default.createElement(LinkButton, { isDisabled: !value.from && !value.to, caption: i18n.pickerModal.clearAllButton, onClick: () => onValueChange(defaultRangeValue) })))));
 }
 
-var css$r = {"container":"PZdUmS"};
+var css$r = {"container":"g48nXw"};
 
 function FilterNumericBody(props) {
     const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
@@ -4268,7 +4272,7 @@ var SvgActionDeleteOutline = function SvgActionDeleteOutline(props, ref) {
 };
 var ForwardRef$a = /*#__PURE__*/React.forwardRef(SvgActionDeleteOutline);
 
-var css$q = {"header":"gV4vBs","removeButton":"nr0mnQ","with-search":"yNEaKh","withSearch":"yNEaKh"};
+var css$q = {"header":"nQfOa5","removeButton":"zzWsa3","with-search":"x7Z6oG","withSearch":"x7Z6oG"};
 
 function useView(props, value) {
     const forceUpdate = uuiCore.useForceUpdate();
@@ -4574,7 +4578,7 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = /* @__PURE__ */React__namespace.default.memo(FiltersToolbarImpl);
 
-var css$p = {"divider":"nImaz5","dropdownDeleteIcon":"_2iL9lz","presetsWrapper":"r4cSLb","addPresetContainer":"NmbHJB","dropContainer":"e7Jn4r"};
+var css$p = {"divider":"mO66Fe","dropdownDeleteIcon":"P77zbO","presetsWrapper":"Agr0L-","addPresetContainer":"fNeloQ","dropContainer":"_093SE1"};
 
 var _path$9;
 function _extends$9() { return _extends$9 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$9.apply(null, arguments); }
@@ -4655,7 +4659,7 @@ var SvgContentLinkOutline = function SvgContentLinkOutline(props, ref) {
 };
 var ForwardRef$5 = /*#__PURE__*/React.forwardRef(SvgContentLinkOutline);
 
-var css$o = {"delete-button":"WInNVA","deleteButton":"WInNVA","tab-button":"sF2uKL","tabButton":"sF2uKL","targetOpen":"_3K7sDI"};
+var css$o = {"delete-button":"_8cri2K","deleteButton":"_8cri2K","tab-button":"G-ZnLp","tabButton":"G-ZnLp","targetOpen":"n5wk67"};
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = uuiCore.useUuiContext();
@@ -4722,7 +4726,7 @@ function PresetActionsDropdown(props) {
     return (React__namespace.default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", modifiers: [{ name: 'offset', options: { offset: [0, 22] } }] }));
 }
 
-var css$n = {"preset-input-cell":"pZ1U-k","presetInputCell":"pZ1U-k","preset-input":"_9BYRF4","presetInput":"_9BYRF4"};
+var css$n = {"preset-input-cell":"VxWJV-","presetInputCell":"VxWJV-","preset-input":"P-aZ3-","presetInput":"P-aZ3-"};
 
 const UUI_PRESETS_PANEL_ADD_BUTTON = 'uui-presets-panel-add-button';
 const UUI_PRESETS_PANEL_MORE_BUTTON = 'uui-presets-panel-more-button';
@@ -4754,7 +4758,7 @@ function PresetInput(props) {
         React__namespace.default.createElement(TextInput, { cx: css$n.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50, isReadonly: readonly })));
 }
 
-var css$m = {"preset":"_8-dASE","activePreset":"nsnbMZ"};
+var css$m = {"preset":"qrjGRX","activePreset":"LDB8M3"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = React.useState(false);
@@ -4880,7 +4884,7 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var css$l = {"unpin-icon":"aF-YkY","unpinIcon":"aF-YkY","pin-toggler-icon":"BMx8dF","pinTogglerIcon":"BMx8dF"};
+var css$l = {"unpin-icon":"tCZZBq","unpinIcon":"tCZZBq","pin-toggler-icon":"WK-Zkr","pinTogglerIcon":"WK-Zkr"};
 
 function PinIconButton(props) {
     const i18nLocal = i18n.tables.columnsConfigurationModal;
@@ -4922,7 +4926,7 @@ function getUnpinIcon(params) {
     }
 }
 
-var css$k = {"row-wrapper":"CyGdss","rowWrapper":"CyGdss","pin-icon-button":"svRQ-Q","pinIconButton":"svRQ-Q","not-pinned":"RSaTpW","notPinned":"RSaTpW","checkbox":"Rd6I2v","drag-handle":"cozg84","dragHandle":"cozg84","dnd-disabled":"bmjm1u","dndDisabled":"bmjm1u"};
+var css$k = {"row-wrapper":"_935DPP","rowWrapper":"_935DPP","pin-icon-button":"f33Kpw","pinIconButton":"f33Kpw","not-pinned":"FuOd73","notPinned":"FuOd73","checkbox":"_2hjqnd","drag-handle":"BvD5Mv","dragHandle":"BvD5Mv","dnd-disabled":"-w5E2R","dndDisabled":"-w5E2R"};
 
 const ColumnRow = /* @__PURE__ */React__namespace.memo(function ColumnRow(props) {
     const { column } = props;
@@ -4945,7 +4949,7 @@ const ColumnRow = /* @__PURE__ */React__namespace.memo(function ColumnRow(props)
     return (React__namespace.createElement(uuiCore.DndActor, { key: column.key, srcData: isDndAllowed && data, dstData: data, canAcceptDrop: onCanAcceptDrop, onDrop: onDrop, render: renderContent }));
 });
 
-var css$j = {"root":"PehWYJ","main-panel":"qC4D1O","mainPanel":"qC4D1O","group":"om--HX","group-title":"miJoIw","groupTitle":"miJoIw","group-items":"_903Okw","groupItems":"_903Okw","no-data":"EX7nPF","noData":"EX7nPF","no-data-title":"Jb6aC5","noDataTitle":"Jb6aC5","no-data-sub-title":"_8qnYRX","noDataSubTitle":"_8qnYRX","h-divider":"_1EEJF8","hDivider":"_1EEJF8","search-area":"ldS3Fz","searchArea":"ldS3Fz","subgroup-accordion":"yodU-W","subgroupAccordion":"yodU-W","subgroup":"A-Eg7U","subgroup-title":"si4g1e","subgroupTitle":"si4g1e"};
+var css$j = {"root":"JL9oRO","main-panel":"p495vP","mainPanel":"p495vP","group":"EysJCx","group-title":"Vf6eax","groupTitle":"Vf6eax","group-items":"zBXnE9","groupItems":"zBXnE9","no-data":"HCZhdn","noData":"HCZhdn","no-data-title":"A-tXy4","noDataTitle":"A-tXy4","no-data-sub-title":"_60rm3y","noDataSubTitle":"_60rm3y","h-divider":"s2VXEB","hDivider":"s2VXEB","search-area":"sSnnnp","searchArea":"sSnnnp","subgroup-accordion":"Y9ArFM","subgroupAccordion":"Y9ArFM","subgroup":"a-keBB","subgroup-title":"CeK-M9","subgroupTitle":"CeK-M9"};
 
 const renderGroupTitle = (title, amount) => (React__namespace.createElement(FlexRow, { cx: css$j.group },
     React__namespace.createElement(Text, { size: "none", cx: css$j.groupTitle }, title),
@@ -5047,7 +5051,7 @@ const getChildrenAndRest = (row, rows) => {
     return [children, rest];
 };
 
-var css$i = {"listContainer":"mO2knm","header":"I4aLZT","group":"e0EVXu","stickyHeader":"JU-8bp"};
+var css$i = {"listContainer":"tIehST","header":"_7IWGL0","group":"_6GtYZi","stickyHeader":"rkhO6X"};
 
 function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
     const rowRef = React.useRef();
@@ -5087,7 +5091,7 @@ function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, r
             React__namespace.default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
 }
 
-var css$h = {"root":"ufb8cY","sticky-header":"J0q1WT","stickyHeader":"J0q1WT","no-results":"WAmPpl","noResults":"WAmPpl","icon":"gc01UO","title":"VFUbBS"};
+var css$h = {"root":"hOJPeb","sticky-header":"bZU6Oa","stickyHeader":"bZU6Oa","no-results":"YG-8vF","noResults":"YG-8vF","icon":"TiXzch","title":"PnwFJC"};
 
 function DataTable(props) {
     const { uuiModals } = uuiCore.useUuiContext();
@@ -5136,9 +5140,9 @@ function DataTable(props) {
                 } }))));
 }
 
-var css$g = {"root":"KqsW7D"};
+var css$g = {"root":"-cFzxG"};
 
-var css$f = {"root":"XD0q5H","burger-content":"_7q76S1","burgerContent":"_7q76S1"};
+var css$f = {"root":"rRzCna","burger-content":"_7vJ4jU","burgerContent":"_7vJ4jU"};
 
 var _path$3;
 function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
@@ -5181,7 +5185,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
 };
 var ForwardRef$2 = /*#__PURE__*/React.forwardRef(SvgNavigationArrowDownOutline);
 
-var css$e = {"root":"WVRR31","button-primary":"Hw71ms","buttonPrimary":"Hw71ms","button-secondary":"_021wqg","buttonSecondary":"_021wqg","hasIcon":"rcAiq1","dropdown":"ID9nVt"};
+var css$e = {"root":"KMbiBY","button-primary":"djY9E-","buttonPrimary":"djY9E-","button-secondary":"odcBUV","buttonSecondary":"odcBUV","hasIcon":"_5f74DJ","dropdown":"_3fqYF4"};
 
 const BurgerButton = /* @__PURE__ */uuiCore.withMods(uuiComponents.Button, (props) => [
     css$e.root,
@@ -5192,13 +5196,13 @@ const BurgerButton = /* @__PURE__ */uuiCore.withMods(uuiComponents.Button, (prop
     props.icon && css$e.hasIcon,
 ], () => ({ dropdownIcon: ForwardRef$2, dropdownIconPosition: 'left', role: 'menuitem' }));
 
-var css$d = {"search-input":"bHZ5dY","searchInput":"bHZ5dY"};
+var css$d = {"search-input":"HUb9-x","searchInput":"HUb9-x"};
 
 function BurgerSearch(props) {
     return (React__namespace.createElement(uuiComponents.TextInput, { cx: cx__default.default(css$d.searchInput, 'uui-main_menu-burger-search'), iconPosition: "left", icon: ForwardRef$N, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$R }));
 }
 
-var css$c = {"root":"KC4AX2","group-header":"nOFAs0","groupHeader":"nOFAs0","group-name":"_5SGsUz","groupName":"_5SGsUz","line":"Ms3kkE"};
+var css$c = {"root":"o7fuFq","group-header":"_1LoMKB","groupHeader":"_1LoMKB","group-name":"U-2UaX","groupName":"U-2UaX","line":"CXzh-S"};
 
 function BurgerGroupHeader(props) {
     return (React__namespace.createElement("div", { className: cx__default.default(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
@@ -5206,7 +5210,7 @@ function BurgerGroupHeader(props) {
         React__namespace.createElement("span", { className: css$c.groupName }, props.caption)));
 }
 
-var css$b = {"root":"WkH2VG","type-primary":"ctJalG","typePrimary":"ctJalG","type-secondary":"NZM-Mi","typeSecondary":"NZM-Mi"};
+var css$b = {"root":"U4Uiy-","type-primary":"hOaf8O","typePrimary":"hOaf8O","type-secondary":"xX6Uxs","typeSecondary":"xX6Uxs"};
 
 const MainMenuButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const { type, ...clickableProps } = props;
@@ -5228,7 +5232,7 @@ const MainMenuButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) =
         props.isDropdown && (React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef$Q, flipY: props.isOpen }))));
 });
 
-var css$a = {"dropdown-body":"GUx5Y2","dropdownBody":"GUx5Y2"};
+var css$a = {"dropdown-body":"Mf-hmd","dropdownBody":"Mf-hmd"};
 
 class MainMenuDropdown extends React__namespace.Component {
     render() {
@@ -5286,12 +5290,12 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
 };
 var ForwardRef$1 = /*#__PURE__*/React.forwardRef(SvgNavigationGlobalMenuOutlineOutline);
 
-var css$9 = {"global-menu-btn":"j69MPp","globalMenuBtn":"j69MPp","global-menu-icon":"drmJnX","globalMenuIcon":"drmJnX"};
+var css$9 = {"global-menu-btn":"JmoqJT","globalMenuBtn":"JmoqJT","global-menu-icon":"lYiH8m","globalMenuIcon":"lYiH8m"};
 
 const GlobalMenu = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", { ref: ref, id: "global_menu_toggle", className: cx__default.default(css$9.globalMenuBtn, props.cx), ...props.rawProps },
     React__namespace.createElement(uuiComponents.IconContainer, { size: 36, icon: ForwardRef$1, cx: css$9.globalMenuIcon }))));
 
-var css$8 = {"container":"gtnoO2","open":"szGGC1","folding-arrow":"LZdVeH","foldingArrow":"LZdVeH"};
+var css$8 = {"container":"SVX3-g","open":"kF8a7A","folding-arrow":"-PgI0F","foldingArrow":"-PgI0F"};
 
 const MainMenuAvatar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", { ref: ref, className: cx__default.default(css$8.container, props.isDropdown && css$8.dropdown, props.isOpen && css$8.open, props.onClick && uuiCore.uuiMarkers.clickable, props.cx), onClick: props.onClick, ...props.rawProps },
     React__namespace.createElement(uuiComponents.Avatar, { size: "36", img: props.avatarUrl }),
@@ -5299,15 +5303,15 @@ const MainMenuAvatar = /* @__PURE__ */React__namespace.forwardRef((props, ref) =
     props.isDropdown && (React__namespace.createElement("div", null,
         React__namespace.createElement(uuiComponents.IconContainer, { size: 18, icon: ForwardRef$Q, flipY: props.isOpen, cx: css$8.foldingArrow }))))));
 
-var css$7 = {"search-input":"OhPd1i","searchInput":"OhPd1i"};
+var css$7 = {"search-input":"v5KLg-","searchInput":"v5KLg-"};
 
 const MainMenuSearch = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement(uuiCore.IEditableDebouncer, { ...props, render: (iEditable) => (React__namespace.createElement(uuiComponents.TextInput, { iconPosition: "left", icon: ForwardRef$N, cancelIcon: props.value?.length > 0 && ForwardRef$R, ...props, ...iEditable, ref: ref, cx: uuiCore.cx(css$7.searchInput, props.cx), ...props.rawProps })) })));
 
-var css$6 = {"container":"d2H1eR"};
+var css$6 = {"container":"wsXb0y"};
 
 const MainMenuIcon = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement(IconButton, { ref: ref, icon: props.icon, cx: uuiCore.cx(props.cx, css$6.container), ...props })));
 
-var css$5 = {"root":"XWTxgM"};
+var css$5 = {"root":"L3O88I"};
 
 const Anchor = /* @__PURE__ */uuiCore.withMods(uuiComponents.Anchor, () => [css$5.root]);
 
@@ -5365,7 +5369,7 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
 };
 var ForwardRef = /*#__PURE__*/React.forwardRef(SvgFileCloudUploadFill);
 
-var css$4 = {"root":"_17rKl-","drop-start":"NuO6Qr","dropStart":"NuO6Qr","drop-over":"Q9wYgv","dropOver":"Q9wYgv","link":"-ROYLb","drop-area":"pzG44t","dropArea":"pzG44t","drop-caption":"QrlkKZ","dropCaption":"QrlkKZ","icon-blue":"o9pzfW","iconBlue":"o9pzfW"};
+var css$4 = {"root":"Z9LBwe","drop-start":"KQbex5","dropStart":"KQbex5","drop-over":"Q9mcm9","dropOver":"Q9mcm9","link":"MKspmO","drop-area":"g73Oij","dropArea":"g73Oij","drop-caption":"bE6XOj","dropCaption":"bE6XOj","icon-blue":"_0x2cc9","iconBlue":"_0x2cc9"};
 
 function DropSpot(props) {
     const getInfoText = typeof props.infoText === 'string'
@@ -5383,7 +5387,7 @@ function DropSpot(props) {
     return React__namespace.createElement(uuiComponents.DropSpot, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
 }
 
-var css$3 = {"root":"ayzgN-"};
+var css$3 = {"root":"k5S-A1"};
 
 const SvgCircleProgress = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
@@ -5394,7 +5398,7 @@ const SvgCircleProgress = /* @__PURE__ */React__namespace.forwardRef((props, ref
         React__namespace.createElement("circle", { strokeWidth: 1, fill: "transparent", r: outsetRadius, cx: props.size / 2, cy: props.size / 2 })));
 });
 
-var css$2 = {"root":"_3faufU","file-name":"P-IU5W","fileName":"P-IU5W","default-color":"_3dDWos","defaultColor":"_3dDWos","doc-color":"kc2z2n","docColor":"kc2z2n","xls-color":"zuxhIR","xlsColor":"zuxhIR","pdf-color":"zMEZPf","pdfColor":"zMEZPf","movie-color":"V3sa3Z","movieColor":"V3sa3Z","img-color":"EMPDWf","imgColor":"EMPDWf","mov-color":"dlm4WB","movColor":"dlm4WB","error-block":"ehxe-S","errorBlock":"ehxe-S","icons-block":"Lv0nnh","iconsBlock":"Lv0nnh"};
+var css$2 = {"root":"JYXcOX","file-name":"JRXglE","fileName":"JRXglE","default-color":"N1NuBl","defaultColor":"N1NuBl","doc-color":"R-doN2","docColor":"R-doN2","xls-color":"O7C8jQ","xlsColor":"O7C8jQ","pdf-color":"XV-18d","pdfColor":"XV-18d","movie-color":"a0v9o-","movieColor":"a0v9o-","img-color":"akFypy","imgColor":"akFypy","mov-color":"ng1Azq","movColor":"ng1Azq","error-block":"UAmsnK","errorBlock":"UAmsnK","icons-block":"_185xl2","iconsBlock":"_185xl2"};
 
 const FileCard = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const [isLoadingShow, setIsLoadingShow] = React__namespace.useState(true);
@@ -5513,7 +5517,7 @@ const getErrorPageConfig = () => ({
     },
 });
 
-var css$1 = {"container":"M7ouXh"};
+var css$1 = {"container":"LcPv1O"};
 
 const ErrorPage = (props) => {
     const isMobileScreen = uuiCore.isMobile();
@@ -5525,7 +5529,7 @@ const ErrorPage = (props) => {
             props?.supportLink && React__namespace.default.createElement("div", { className: "uui-error-support-link" }, props?.supportLink))));
 };
 
-var css = {"recovery-spinner":"RTsC-H","recoverySpinner":"RTsC-H","recovery-message":"AbPzj5","recoveryMessage":"AbPzj5","modal-blocker":"zky9ug","modalBlocker":"zky9ug","modalFadeIn":"moY-p-"};
+var css = {"recovery-spinner":"ozAw6k","recoverySpinner":"ozAw6k","recovery-message":"-d8i-4","recoveryMessage":"-d8i-4","modal-blocker":"sUw9oj","modalBlocker":"sUw9oj","modalFadeIn":"Q6Mg0I"};
 
 function ErrorHandler(props) {
     const { uuiNotifications, uuiModals, uuiApi } = uuiCore.useUuiContext();