@epam/uui 5.13.3-beta.10 → 5.13.3-beta.11

package/index.esm.js

@@ -149,7 +149,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#zvwqw98vc6oliys27_a)"
+    clipPath: "url(#00v3wu9hmpw9hsfbr_a)"
   }, _path$J || (_path$J = /*#__PURE__*/React.createElement("path", {
     d: "M150.585 1.535C49.483-11.495 27.481 61.805 45.725 97.481c10.581 20.69-39.64 70.792 17.744 81.468 27.538 5.123 36-13.341 62.433-10.655 35.4 3.6 148.167-4.73 88.349-78.915-31.713-39.335 1.026-79.506-63.666-87.844Z",
     fill: "#F5F6FA"
@@ -170,7 +170,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M86.786 22.982c-2.55 0-4.965 2.07-4.965 4.552V120.6c0 2.484 2.4 4.572 4.965 4.572h88.101c2.582 0 4.986-2.089 4.986-4.572V27.534c0-2.464-2.418-4.552-4.986-4.552h-88.1Zm-5.793 4.552c0-3.022 2.874-5.38 5.793-5.38h88.101c2.935 0 5.814 2.374 5.814 5.38V120.6c0 3.021-2.86 5.4-5.814 5.4h-88.1c-2.94 0-5.794-2.381-5.794-5.4V27.534Z",
     fill: "#1D1E26"
   })), /*#__PURE__*/React.createElement("mask", {
-    id: "zvwqw97lb71v4zltk_b",
+    id: "00v3wuw379j41cyf_b",
     style: {
       maskType: "alpha"
     },
@@ -183,7 +183,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.createElement("g", {
-    mask: "url(#zvwqw97lb71v4zltk_b)",
+    mask: "url(#00v3wuw379j41cyf_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
@@ -269,7 +269,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M24.73 96.184a.414.414 0 0 1 .581.06l48.646 59.751a.413.413 0 1 1-.642.523L24.67 96.766a.414.414 0 0 1 .06-.582Z",
     fill: "#fff"
   }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "zvwqw98vc6oliys27_a"
+    id: "00v3wu9hmpw9hsfbr_a"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
@@ -826,14 +826,14 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
 };
 var ForwardRef$b = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
 
-var css$1y = {"root":"_9HFqQ2","uui-spinner":"Ssj06T","uuiSpinner":"Ssj06T"};
+var css$1x = {"root":"lT8il7","uui-spinner":"Ltp-Yo","uuiSpinner":"Ltp-Yo"};
 
 function applySpinnerMods() {
-    return [css$1y.root, 'uui-spinner'];
+    return [css$1x.root, 'uui-spinner'];
 }
 const Spinner = /* @__PURE__ */withMods(Spinner$1, applySpinnerMods);
 
-var css$1x = {"root":"zsauYS","loading-word":"_74xdD1","loadingWord":"_74xdD1","animated-loading":"L9KBNn","animatedLoading":"L9KBNn","skeleton_loading":"P6hZru","skeletonLoading":"P6hZru"};
+var css$1w = {"root":"J6pmRG","loading-word":"syuJlZ","loadingWord":"syuJlZ","animated-loading":"LN1aNS","animatedLoading":"LN1aNS","skeleton_loading":"M7NS6f","skeletonLoading":"M7NS6f"};
 
 const TextPlaceholder = (props) => {
     const pattern = ' ';
@@ -845,11 +845,38 @@ const TextPlaceholder = (props) => {
         }
         return words;
     }, [props.wordsCount]);
-    return (React.createElement("div", { "aria-busy": true, className: cx(css$1x.root, 'uui-text-placeholder'), ...props.rawProps }, text.map((it, index) => (React.createElement("span", { key: index, className: cx([
-            props.cx, css$1x.loadingWord, !props.isNotAnimated && css$1x.animatedLoading,
+    return (React.createElement("div", { "aria-busy": true, className: cx(css$1w.root, 'uui-text-placeholder'), ...props.rawProps }, text.map((it, index) => (React.createElement("span", { key: index, className: cx([
+            props.cx, css$1w.loadingWord, !props.isNotAnimated && css$1w.animatedLoading,
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
+var css$1v = {"root":"ylDE5V","line-height":"m-6511","lineHeight":"m-6511","font-size":"xpHY2c","fontSize":"xpHY2c"};
+
+function applyTextMods(mods) {
+    return [
+        css$1v.root,
+        'uui-text',
+        `uui-size-${mods.size || settings.text.sizes.default}`,
+        (mods.size !== 'none' || mods.lineHeight) && css$1v.lineHeight,
+        (mods.size !== 'none' || mods.fontSize) && css$1v.fontSize,
+        `uui-color-${mods.color || 'primary'}`,
+        `uui-font-weight-${mods.fontWeight || '400'}`,
+        `uui-font-style-${mods.fontStyle || 'normal'}`,
+        'uui-typography-inline',
+    ];
+}
+const Text = /* @__PURE__ */withMods(uuiComponents.Text, applyTextMods, (props) => {
+    const style = props?.rawProps?.style || {};
+    props.fontSize && (style['--uui-text-font-size'] = `${props.fontSize}px`);
+    props.lineHeight && (style['--uui-text-line-height'] = `${props.lineHeight}px`);
+    return {
+        rawProps: {
+            ...props?.rawProps,
+            style: style,
+        },
+    };
+});
+
 const accordionSettings = {
     icons: {
         dropdownIcon: ForwardRef$Q,
@@ -911,7 +938,8 @@ const countIndicatorSettings = {
     },
 };
 const dataTableSettings = {
-    renderPlaceholder: () => React__default.createElement(TextPlaceholder, { isNotAnimated: true }),
+    renderPlaceholder: (props) => React__default.createElement(Text, { size: props.rowSize },
+        React__default.createElement(TextPlaceholder, null)),
     icons: {
         emptyTable: ForwardRef$J,
         header: {
@@ -1099,7 +1127,8 @@ const paginatorSettings = {
     },
 };
 const pickerInputSettings = {
-    renderPlaceholder: () => React__default.createElement(TextPlaceholder, null),
+    renderPlaceholder: (props) => React__default.createElement(Text, { size: props.rowSize },
+        React__default.createElement(TextPlaceholder, null)),
     icons: {
         toggler: {
             clearIcon: ForwardRef$R,
@@ -1305,11 +1334,11 @@ const settings = {
     textInput: textInputSettings,
 };
 
-var css$1w = {"root":"zkypdG"};
+var css$1u = {"root":"RGCmoj"};
 
 function applyButtonMods(mods) {
     return [
-        css$1w.root,
+        css$1u.root,
         'uui-button',
         `uui-fill-${mods.fill || 'solid'}`,
         `uui-color-${mods.color || 'primary'}`,
@@ -1323,10 +1352,10 @@ const Button = /* @__PURE__ */withMods(uuiComponents.Button, applyButtonMods, ()
     };
 });
 
-var css$1v = {"root":"narzoG"};
+var css$1t = {"root":"af51dx"};
 
 function applyIconButtonMods(props) {
-    return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1v.root];
+    return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1t.root];
 }
 const IconButton = /* @__PURE__ */withMods(uuiComponents.IconButton, applyIconButtonMods, (props) => {
     const isDeprecated = ['info', 'success', 'error', 'warning'].includes(props.color);
@@ -1360,7 +1389,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$1u = {"root":"z3vw1q"};
+var css$1s = {"root":"zoHJ0E"};
 
 const DEFAULT_COLOR = 'primary';
 const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
@@ -1375,7 +1404,7 @@ const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
     }
     const rootStyles = [
         'uui-link_button',
-        css$1u.root,
+        css$1s.root,
         `uui-size-${props.size || settings.linkButton.sizes.default}`,
         ...getIconClass(props),
         `uui-color-${props.color || DEFAULT_COLOR}`,
@@ -1390,11 +1419,11 @@ const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         props.isDropdown && (React.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1t = {"root":"EF2EZr"};
+var css$1r = {"root":"hfZNzs"};
 
 const CountIndicator = /* @__PURE__ */forwardRef((props, ref) => {
     return (React__default.createElement("div", { ref: ref, className: cx([
-            css$1t.root,
+            css$1r.root,
             'uui-count_indicator',
             `uui-size-${props.size || settings.countIndicator.sizes.default}`,
             props.color && `uui-color-${props.color}`,
@@ -1402,11 +1431,11 @@ const CountIndicator = /* @__PURE__ */forwardRef((props, ref) => {
         ]) }, props.caption));
 });
 
-var css$1s = {"root":"-hOUcq","withNotify":"_9SVkXR"};
+var css$1q = {"root":"rwt5yG","withNotify":"_7LMflq"};
 
 const TabButton = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const styles = [
-        css$1s.root,
+        css$1q.root,
         'uui-tab-button',
         `uui-size-${props.size || settings.tabButton.sizes.default}`,
         ...getIconClass(props),
@@ -1423,25 +1452,25 @@ const TabButton = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         props.icon && props.iconPosition !== 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         (props.caption || props.withNotify) && (React__default.createElement("div", { className: cx$1(uuiElement.caption) },
             props.caption,
-            props.withNotify && React__default.createElement("div", { className: css$1s.withNotify }))),
+            props.withNotify && React__default.createElement("div", { className: css$1q.withNotify }))),
         props.icon && props.iconPosition === 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { color: "neutral", size: settings.tabButton.sizes.countIndicatorMap[props.size || settings.tabButton.sizes.default], caption: props.count })),
         props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen })),
         props.onClear && !props.isDisabled && (React__default.createElement(IconContainer, { cx: uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
 });
 
-var css$1r = {"root":"QDHUyv"};
+var css$1p = {"root":"yWUdk0"};
 
 function applyVerticalTabButtonMods() {
-    return [css$1r.root, 'uui-vertical-tab-button'];
+    return [css$1p.root, 'uui-vertical-tab-button'];
 }
 const VerticalTabButton = /* @__PURE__ */withMods(TabButton, applyVerticalTabButtonMods);
 
-var css$1q = {"root":"WOGKbM"};
+var css$1o = {"root":"_4wLfSU"};
 
 function applyCheckboxMods(mods) {
     return [
-        css$1q.root,
+        css$1o.root,
         `uui-size-${mods.size || settings.checkbox.sizes.default}`,
         'uui-control-mode-' + (mods.mode || 'form'),
         'uui-color-primary',
@@ -1455,11 +1484,11 @@ const applyUUICheckboxProps = (props) => {
 };
 const Checkbox = /* @__PURE__ */withMods(uuiComponents.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$1p = {"root":"BKdwKG"};
+var css$1n = {"root":"HroqD6"};
 
 function applyRadioInputMods(mods) {
     return [
-        css$1p.root,
+        css$1n.root,
         `uui-size-${mods.size || settings.radioInput.sizes.default}`,
         'uui-radio-input-container',
         'uui-color-primary',
@@ -1467,11 +1496,11 @@ function applyRadioInputMods(mods) {
 }
 const RadioInput = /* @__PURE__ */withMods(RadioInput$1, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : settings.radioInput.icons.dotIcon }));
 
-var css$1o = {"root":"UymHYi"};
+var css$1m = {"root":"-SQe-0"};
 
 function applySwitchMods(mods) {
     return [
-        css$1o.root,
+        css$1m.root,
         `uui-size-${mods.size || settings.switch.sizes.default}`,
         'uui-color-primary',
     ];
@@ -1491,7 +1520,7 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var textInputCss = {"root":"Ww8OPj"};
+var textInputCss = {"root":"BLuLu4"};
 
 const DEFAULT_MODE$3 = EditMode.FORM;
 function applyTextInputMods(mods) {
@@ -1516,9 +1545,9 @@ const SearchInput = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         } }));
 });
 
-var css$1n = {"root":"Q-XttA"};
+var css$1l = {"root":"v6IAk-"};
 
-const ControlGroup = /* @__PURE__ */withMods(ControlGroup$1, () => [css$1n.root, 'uui-control-group']);
+const ControlGroup = /* @__PURE__ */withMods(ControlGroup$1, () => [css$1l.root, 'uui-control-group']);
 
 function MultiSwitchComponent(props, ref) {
     return (React.createElement(ControlGroup, { ref: ref, rawProps: {
@@ -1532,13 +1561,13 @@ function MultiSwitchComponent(props, ref) {
 }
 const MultiSwitch = /* @__PURE__ */React.forwardRef(MultiSwitchComponent);
 
-var css$1m = {"root":"ZAERvd"};
+var css$1k = {"root":"X-aUTq"};
 
 const DEFAULT_MODE$2 = EditMode.FORM;
 function applyNumericInputMods(mods) {
     return [
         textInputCss.root,
-        css$1m.root,
+        css$1k.root,
         `uui-size-${mods.size || settings.numericInput.sizes.default}`,
         'uui-control-mode-' + (mods.mode || DEFAULT_MODE$2),
     ];
@@ -1552,12 +1581,12 @@ const NumericInput = /* @__PURE__ */withMods(NumericInput$1, applyNumericInputMo
     };
 });
 
-var css$1l = {"root":"KpZtVw"};
+var css$1j = {"root":"UYZaLu"};
 
 const DEFAULT_MODE$1 = EditMode.FORM;
 function applyTextAreaMods(mods) {
     return [
-        css$1l.root,
+        css$1j.root,
         'uui-textarea',
         'uui-size-' + (mods.size || settings.textArea.sizes.default),
         'uui-control-mode-' + (mods.mode || DEFAULT_MODE$1),
@@ -1593,17 +1622,17 @@ function TREE_SHAKEABLE_INIT$1() {
     };
 }
 
-var css$1k = {"root":"FSrCqj","main-path":"mHzTS4","mainPath":"mHzTS4","content-wrapper":"EmvPG9","contentWrapper":"EmvPG9","content":"MhuZQK","action-wrapper":"rBdAXw","actionWrapper":"rBdAXw","icon-wrapper":"C6izkk","iconWrapper":"C6izkk","icon":"EvBwqK","close-icon":"DD1rPc","closeIcon":"DD1rPc"};
+var css$1i = {"root":"_7iW3Pa","main-path":"_5g3WUo","mainPath":"_5g3WUo","content-wrapper":"bR2eks","contentWrapper":"bR2eks","content":"hpLMgH","action-wrapper":"oKFEmM","actionWrapper":"oKFEmM","icon-wrapper":"JXzT-o","iconWrapper":"JXzT-o","icon":"_7s7UKs","close-icon":"FDAtBk","closeIcon":"FDAtBk"};
 
-const Alert = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("div", { role: "alert", ref: ref, className: cx('uui-alert', css$1k.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
-    React.createElement("div", { className: css$1k.mainPath },
-        React.createElement("div", { className: css$1k.contentWrapper },
-            props.icon && (React.createElement("div", { className: css$1k.iconWrapper },
-                React.createElement(IconContainer, { icon: props.icon, cx: css$1k.icon }))),
-            React.createElement("div", { className: css$1k.content },
+const Alert = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("div", { role: "alert", ref: ref, className: cx('uui-alert', css$1i.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
+    React.createElement("div", { className: css$1i.mainPath },
+        React.createElement("div", { className: css$1i.contentWrapper },
+            props.icon && (React.createElement("div", { className: css$1i.iconWrapper },
+                React.createElement(IconContainer, { icon: props.icon, cx: css$1i.icon }))),
+            React.createElement("div", { className: css$1i.content },
                 props.children,
-                props.actions && (React.createElement("div", { className: css$1k.actionWrapper }, props.actions.map((action) => (React.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.createElement(IconButton, { icon: settings.alert.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$1k.closeIcon })))));
+                props.actions && (React.createElement("div", { className: css$1i.actionWrapper }, props.actions.map((action) => (React.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$1i.actionLink, size: settings.alert.sizes.actionMap[props.size || settings.alert.sizes.default] }))))))),
+        props.onClose && React.createElement(IconButton, { icon: settings.alert.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$1i.closeIcon })))));
 const WarningAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, { icon: settings.alert.icons.warningIcon, color: "warning", ref: ref, ...props }));
 const SuccessAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, { icon: settings.alert.icons.successIcon, color: "success", ref: ref, ...props }));
 const HintAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, { icon: settings.alert.icons.infoIcon, color: "info", ref: ref, ...props }));
@@ -1611,18 +1640,18 @@ const ErrorAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createE
 
 const Dropdown = /* @__PURE__ */withMods(Dropdown$1);
 
-var css$1j = {"root":"E71GS0"};
+var css$1h = {"root":"feGmZN"};
 
 function applyDropdownContainerMods(mods) {
     return [
-        css$1j.root,
+        css$1h.root,
         mods.vPadding && `vPadding-${mods.vPadding}`,
         mods.padding && `padding-${mods.padding}`,
     ];
 }
 const DropdownContainer = /* @__PURE__ */withMods(uuiComponents.DropdownContainer, applyDropdownContainerMods);
 
-var css$1i = {"submenu-root-item-rtl":"xYn5Ep","submenuRootItemRtl":"xYn5Ep","icon-after":"JrCStS","iconAfter":"JrCStS","submenu-root-item":"Rdk6Vo","submenuRootItem":"Rdk6Vo","icon-check":"z3-S0m","iconCheck":"z3-S0m","splitter-root":"nPKxzv","splitterRoot":"nPKxzv","splitter":"_1lhAYN","header-root":"s3FV1M","headerRoot":"s3FV1M","item-root":"_4g1puI","itemRoot":"_4g1puI","icon":"TbjIZ0","link":"TXjFr8","indent":"Sk0hqH","selected-mark":"mhiPb4","selectedMark":"mhiPb4"};
+var css$1g = {"submenu-root-item-rtl":"DmYcX6","submenuRootItemRtl":"DmYcX6","icon-after":"Mq6Qep","iconAfter":"Mq6Qep","submenu-root-item":"-KlPL-","submenuRootItem":"-KlPL-","icon-check":"wbivRt","iconCheck":"wbivRt","splitter-root":"gvd2D-","splitterRoot":"gvd2D-","splitter":"ZJRQ35","header-root":"B2r6Uc","headerRoot":"B2r6Uc","item-root":"Xjd57P","itemRoot":"Xjd57P","icon":"dkm6bb","link":"qE9QU9","indent":"QqxbDr","selected-mark":"xfIBEO","selectedMark":"xfIBEO"};
 
 var IDropdownControlKeys;
 (function (IDropdownControlKeys) {
@@ -1687,29 +1716,29 @@ const DropdownMenuButton = /* @__PURE__ */React__default.forwardRef((props, ref)
     const getMenuButtonContent = () => {
         const isIconBefore = Boolean(icon && iconPosition !== 'right');
         const isIconAfter = Boolean(icon && iconPosition === 'right');
-        const iconElement = (React__default.createElement(IconButton, { icon: icon, color: isActive ? 'primary' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: cx$1(css$1i.icon, iconPosition === 'right' ? css$1i.iconAfter : css$1i.iconBefore) }));
+        const iconElement = (React__default.createElement(IconButton, { icon: icon, color: isActive ? 'primary' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: cx$1(css$1g.icon, iconPosition === 'right' ? css$1g.iconAfter : css$1g.iconBefore) }));
         return (React__default.createElement(React__default.Fragment, null,
             isIconBefore && iconElement,
-            React__default.createElement(Text$1, { cx: props.indent && css$1i.indent }, caption),
+            React__default.createElement(Text$1, { cx: props.indent && css$1g.indent }, caption),
             isIconAfter && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(FlexSpacer, null),
                 iconElement))));
     };
     const isAnchor = Boolean(link || href);
-    const itemClassNames = cx$1(props.cx, css$1i.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened, (!isDisabled && onClick) && uuiMarkers.clickable);
-    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(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__default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref },
+    const itemClassNames = cx$1(props.cx, css$1g.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened, (!isDisabled && onClick) && uuiMarkers.clickable);
+    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$1g.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isLinkActive: isActive, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref },
         getMenuButtonContent(),
         isSelected && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(FlexSpacer, null),
-            React__default.createElement(IconContainer, { icon: settings.dropdownMenu.icons.acceptIcon, cx: css$1i.selectedMark })))));
+            React__default.createElement(IconContainer, { icon: settings.dropdownMenu.icons.acceptIcon, cx: css$1g.selectedMark })))));
 });
 function DropdownMenuSplitter(props) {
-    return (React__default.createElement("div", { className: cx$1(props.cx, css$1i.splitterRoot) },
-        React__default.createElement("hr", { className: css$1i.splitter })));
+    return (React__default.createElement("div", { className: cx$1(props.cx, css$1g.splitterRoot) },
+        React__default.createElement("hr", { className: css$1g.splitter })));
 }
 function DropdownMenuHeader(props) {
-    return (React__default.createElement("div", { className: cx$1('uui-dropdown-menu-header', props.cx, css$1i.headerRoot) },
-        React__default.createElement("span", { className: css$1i.header }, props.caption)));
+    return (React__default.createElement("div", { className: cx$1('uui-dropdown-menu-header', props.cx, css$1g.headerRoot) },
+        React__default.createElement("span", { className: css$1g.header }, props.caption)));
 }
 function DropdownSubMenu(props) {
     const subMenuModifiers = [
@@ -1729,7 +1758,7 @@ function DropdownSubMenu(props) {
         },
     ];
     const isRtl = getDir() === 'rtl';
-    return (React__default.createElement(Dropdown$1, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: isRtl ? 'left-start' : 'right-start', modifiers: subMenuModifiers, renderBody: (dropdownProps) => !props.isDisabled && (React__default.createElement(DropdownMenuBody, { closeOnKey: IDropdownControlKeys.LEFT_ARROW, ...props, ...dropdownProps })), renderTarget: ({ toggleDropdownOpening, ...targetProps }) => (React__default.createElement(DropdownMenuButton, { cx: cx$1(isRtl ? css$1i.submenuRootItemRtl : css$1i.submenuRootItem), icon: settings.dropdownMenu.icons.dropdownIcon, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening, ...props, ...targetProps })) }));
+    return (React__default.createElement(Dropdown$1, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: isRtl ? 'left-start' : 'right-start', modifiers: subMenuModifiers, renderBody: (dropdownProps) => !props.isDisabled && (React__default.createElement(DropdownMenuBody, { closeOnKey: IDropdownControlKeys.LEFT_ARROW, ...props, ...dropdownProps })), renderTarget: ({ toggleDropdownOpening, ...targetProps }) => (React__default.createElement(DropdownMenuButton, { cx: cx$1(isRtl ? css$1g.submenuRootItemRtl : css$1g.submenuRootItem), icon: settings.dropdownMenu.icons.dropdownIcon, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening, ...props, ...targetProps })) }));
 }
 function DropdownMenuSwitchButton(props) {
     const context = useContext(UuiContext);
@@ -1745,29 +1774,29 @@ function DropdownMenuSwitchButton(props) {
             onHandleValueChange(!isSelected);
         }
     };
-    return (React__default.createElement("div", { className: cx$1(props.cx, css$1i.itemRoot, isDisabled && uuiMod.disabled, (!isDisabled || onValueChange) && uuiMarkers.clickable), onClick: () => onHandleValueChange(!isSelected), role: "menuitem", onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 },
-        icon && React__default.createElement(IconContainer, { icon: icon, cx: css$1i.iconBefore }),
+    return (React__default.createElement("div", { className: cx$1(props.cx, css$1g.itemRoot, isDisabled && uuiMod.disabled, (!isDisabled || onValueChange) && uuiMarkers.clickable), onClick: () => onHandleValueChange(!isSelected), role: "menuitem", onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 },
+        icon && React__default.createElement(IconContainer, { icon: icon, cx: css$1g.iconBefore }),
         React__default.createElement(Text$1, null, caption),
         React__default.createElement(FlexSpacer, null),
         React__default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
 }
 
-var css$1h = {"root":"TDNqK9","mode-block":"g8yYBF","modeBlock":"g8yYBF","mode-inline":"zTef0o","modeInline":"zTef0o","padding-0":"VBAFcm","padding0":"VBAFcm","padding-6":"-vwj9q","padding6":"-vwj9q","padding-12":"wlDFAW","padding12":"wlDFAW","padding-18":"_-0hhh0","padding18":"_-0hhh0"};
+var css$1f = {"root":"_5CvukL","mode-block":"_28n9FZ","modeBlock":"_28n9FZ","mode-inline":"hVIEP5","modeInline":"hVIEP5","padding-0":"MKk4Gy","padding0":"MKk4Gy","padding-6":"uGECOy","padding6":"uGECOy","padding-12":"xRQRMa","padding12":"xRQRMa","padding-18":"gDwGMD","padding18":"gDwGMD"};
 
 function applyAccordionMods(mods) {
     return [
-        css$1h.root,
-        css$1h[`mode-${mods.mode || 'block'}`],
-        mods.padding && css$1h['padding-' + mods.padding],
+        css$1f.root,
+        css$1f[`mode-${mods.mode || 'block'}`],
+        mods.padding && css$1f['padding-' + mods.padding],
     ];
 }
 const Accordion = /* @__PURE__ */withMods(uuiComponents.Accordion, applyAccordionMods, (mods) => ({
     dropdownIcon: mods.dropdownIcon !== null && settings.accordion.icons.dropdownIcon,
 }));
 
-var css$1g = {"root":"s4Ixua","align-items":"IxdHus","alignItems":"IxdHus","justify-content":"y0ffPw","justifyContent":"y0ffPw","border-top":"FCSqoX","borderTop":"FCSqoX","border-bottom":"IcZmRR","borderBottom":"IcZmRR","top-shadow":"_8-Hvhu","topShadow":"_8-Hvhu","padding":"dNbg-l","margin":"yzmsBF","vPadding":"OBn-Pb","column-gap":"ZyMcmB","columnGap":"ZyMcmB","row-gap":"ZgwMrT","rowGap":"ZgwMrT","spacing":"UbSTkX"};
+var css$1e = {"root":"k8eeDw","align-items":"daLVSl","alignItems":"daLVSl","justify-content":"nYGpTT","justifyContent":"nYGpTT","border-top":"e2yK2g","borderTop":"e2yK2g","border-bottom":"KIzQ2i","borderBottom":"KIzQ2i","top-shadow":"qvMvLs","topShadow":"qvMvLs","padding":"p-tw1R","margin":"JXAIe5","vPadding":"rgs9OV","column-gap":"ZkBNgw","columnGap":"ZkBNgw","row-gap":"_5DVR0F","rowGap":"_5DVR0F","spacing":"gI2k8g"};
 
-const FlexCell = /* @__PURE__ */withMods(FlexCell$1, () => [css$1g.flexCell]);
+const FlexCell = /* @__PURE__ */withMods(FlexCell$1, () => [css$1e.flexCell]);
 
 const FlexRow = /* @__PURE__ */forwardRef((props, ref) => {
     if (process.env.NODE_ENV !== "production") {
@@ -1776,22 +1805,22 @@ const FlexRow = /* @__PURE__ */forwardRef((props, ref) => {
         }
     }
     const classNames = cx$1([
-        css$1g.root,
+        css$1e.root,
         'uui-flex-row',
         props.onClick && uuiMarkers.clickable,
         props.cx,
         props.size !== null && 'uui-size-' + (props.size || settings.flexRow.sizes.default),
-        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.alignItems && css$1e.alignItems,
+        props.justifyContent && css$1e.justifyContent,
+        props.padding && css$1e.padding,
+        props.vPadding && css$1e.vPadding,
+        props.margin && css$1e.margin,
+        props.topShadow && css$1e.topShadow,
+        props.borderBottom && css$1e.borderBottom,
+        props.borderTop && css$1e.borderTop,
+        props.columnGap && css$1e.columnGap,
+        props.rowGap && css$1e.rowGap,
+        props.spacing && css$1e.spacing,
         props.background && `uui-flex-row-bg-${props.background}`,
     ]);
     const style = {
@@ -1810,32 +1839,32 @@ const FlexRow = /* @__PURE__ */forwardRef((props, ref) => {
         } }, props.children));
 });
 
-var css$1f = {"root":"XX2600","margin-24":"BvR97f","margin24":"BvR97f","padding-12":"DM8noW","padding12":"DM8noW","padding-24":"fTJPEO","padding24":"fTJPEO","shadow":"_4DLKBy","uui-surface-main":"P3uVJ-","uuiSurfaceMain":"P3uVJ-"};
+var css$1d = {"root":"ogt-u1","margin-24":"GbuoP4","margin24":"GbuoP4","padding-12":"CN3JPv","padding12":"CN3JPv","padding-24":"r-6a2s","padding24":"r-6a2s","shadow":"_7c6l7H","uui-surface-main":"GE-60F","uuiSurfaceMain":"GE-60F"};
 
 const Panel = /* @__PURE__ */withMods(VPanel, (props) => [
     'uui-panel',
-    css$1f.root,
-    props.shadow && css$1f.shadow,
-    props.margin && css$1f['margin-' + props.margin],
-    props.background && css$1f[`uui-${props.background}`],
+    css$1d.root,
+    props.shadow && css$1d.shadow,
+    props.margin && css$1d['margin-' + props.margin],
+    props.background && css$1d[`uui-${props.background}`],
 ]);
 
-var css$1e = {"root":"bRFUkH"};
+var css$1c = {"root":"_3OCjZu"};
 
 function applyTooltipMods(mods) {
     return [
-        css$1e.root,
+        css$1c.root,
         `uui-color-${mods.color || 'inverted'}`,
     ];
 }
 const Tooltip = /* @__PURE__ */withMods(uuiComponents.Tooltip, applyTooltipMods);
 
-var css$1d = {"root":"h4liyi"};
+var css$1b = {"root":"yCRUhW"};
 
 function applyLabeledInputMods(mods) {
     return [
         'uui-labeled-input',
-        css$1d.root,
+        css$1b.root,
         'uui-size-' + (mods.size || settings.labeledInput.sizes.default),
     ];
 }
@@ -1847,7 +1876,7 @@ function applyLabeledInputProps(props) {
 }
 const LabeledInput = /* @__PURE__ */withMods(uuiComponents.LabeledInput, applyLabeledInputMods, applyLabeledInputProps);
 
-var css$1c = {"root":"QHm5Gk"};
+var css$1a = {"root":"Qmr9zU"};
 
 function RadioGroup(props) {
     const direction = props.direction || 'vertical';
@@ -1856,26 +1885,26 @@ function RadioGroup(props) {
             props.onValueChange(newVal);
         }
     };
-    return (React.createElement("fieldset", { ref: props.forwardedRef, className: cx$1(css$1c.root, directionMode[direction], props.cx), onFocus: props.onFocus, onBlur: props.onBlur, ...props.rawProps }, props.items.map((i) => {
+    return (React.createElement("fieldset", { ref: props.forwardedRef, className: cx$1(css$1a.root, directionMode[direction], props.cx), onFocus: props.onFocus, onBlur: props.onBlur, ...props.rawProps }, props.items.map((i) => {
         const { id, name, renderName, ...restItemProps } = i;
         return (React.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$1b = {"root":"Jnt3ic"};
+var css$19 = {"root":"_6Y4M76"};
 
 function applyScrollBarsMods() {
     return [
-        css$1b.root, 'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
+        css$19.root, 'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
     ];
 }
 const ScrollBars = /* @__PURE__ */withMods(ScrollBars$1, applyScrollBarsMods);
 
-var css$1a = {"scroll-container":"_21BEMc","scrollContainer":"_21BEMc","list-container":"_4rLwv4","listContainer":"_4rLwv4"};
+var css$18 = {"scroll-container":"_-7Dxnn","scrollContainer":"_-7Dxnn","list-container":"mqyIKD","listContainer":"mqyIKD"};
 
-var css$19 = {"root":"CrbNdl"};
+var css$17 = {"root":"bLzBZM"};
 
-const Blocker = /* @__PURE__ */withMods(Blocker$1, () => [css$19.root], () => ({ renderSpinner: settings.blocker.renderSpinner }));
+const Blocker = /* @__PURE__ */withMods(Blocker$1, () => [css$17.root], () => ({ renderSpinner: settings.blocker.renderSpinner }));
 
 const VirtualList = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef, } = useVirtualList({
@@ -1889,7 +1918,7 @@ const VirtualList = /* @__PURE__ */React.forwardRef((props, ref) => {
     const scrollShadows = useScrollShadows({ root: scrollContainerRef.current });
     const renderRows = () => props.renderRows?.({
         listContainerRef, estimatedHeight, offsetY, scrollShadows,
-    }) || (React.createElement("div", { className: css$1a.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+    }) || (React.createElement("div", { className: css$18.listContainer, style: { minHeight: `${estimatedHeight}px` } },
         React.createElement("div", { ref: listContainerRef, role: props.role, style: { marginTop: offsetY } }, props.rows)));
     const renderView = ({ style }) => (React.createElement(VirtualListView, { isLoading: props.isLoading, style: style, rawProps: props.rawProps }));
     const scrollBarsRef = React.useCallback((scrollbars) => {
@@ -1897,7 +1926,7 @@ const VirtualList = /* @__PURE__ */React.forwardRef((props, ref) => {
             return;
         scrollContainerRef.current = scrollbars.container.firstChild;
     }, []);
-    return (React.createElement(ScrollBars, { cx: cx$1(css$1a.scrollContainer, props.cx, {
+    return (React.createElement(ScrollBars, { cx: cx$1(css$18.scrollContainer, props.cx, {
             [uuiMarkers.scrolledLeft]: scrollShadows.horizontalLeft,
             [uuiMarkers.scrolledRight]: scrollShadows.horizontalRight,
             [uuiMarkers.scrolledTop]: scrollShadows.verticalTop,
@@ -1919,7 +1948,7 @@ const VirtualListView = /* @__PURE__ */React.forwardRef((props, ref) => {
         React.createElement(Blocker, { isEnabled: props.isLoading })));
 });
 
-var css$18 = {"root":"xIDJ-f"};
+var css$16 = {"root":"HOtXGZ"};
 
 function CheckboxGroup(props) {
     const currentValue = props.value || [];
@@ -1935,16 +1964,16 @@ function CheckboxGroup(props) {
         }
         props.onValueChange(newSelection);
     };
-    return (React.createElement("fieldset", { ref: props.forwardedRef, className: cx$1(css$18.root, directionMode[direction], props.cx), ...props.rawProps }, props.items.map((i) => {
+    return (React.createElement("fieldset", { ref: props.forwardedRef, className: cx$1(css$16.root, directionMode[direction], props.cx), ...props.rawProps }, props.items.map((i) => {
         const { id, name, renderName, ...restItemProps } = i;
         return (React.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$17 = {"root":"_4kZHm6","modal-blocker":"ohNrPY","modalBlocker":"ohNrPY","animateModalBlocker":"_6-O3xs","modal":"XMfhta","modal-footer":"_6MQnPd","modalFooter":"_6MQnPd","border-top":"_-7nubK","borderTop":"_-7nubK","modal-header":"_8bQQrQ","modalHeader":"_8bQQrQ","border-bottom":"b1eTCS","borderBottom":"b1eTCS"};
+var css$15 = {"root":"a7DcZQ","modal-blocker":"Pi64Ya","modalBlocker":"Pi64Ya","animateModalBlocker":"tZG-m2","modal":"_0DpMKi","modal-footer":"mIM3os","modalFooter":"mIM3os","border-top":"w3-ZCQ","borderTop":"w3-ZCQ","modal-header":"jy2jUn","modalHeader":"jy2jUn","border-bottom":"N8TqO5","borderBottom":"N8TqO5"};
 
-const ModalBlocker = /* @__PURE__ */withMods(ModalBlocker$1, () => [css$17.modalBlocker]);
-const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$17.root, css$17.modal], (props) => {
+const ModalBlocker = /* @__PURE__ */withMods(ModalBlocker$1, () => [css$15.modalBlocker]);
+const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$15.root, css$15.modal], (props) => {
     const width = props.width;
     const height = props.height || 'auto';
     const maxHeight = isMobile() ? 'var(--uui-modals-mobile-max-height)' : (props.maxHeight || 'var(--uui-modals-max-height)');
@@ -1958,7 +1987,7 @@ const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$17.root, c
     };
 });
 function ModalHeader(props) {
-    return (React__default.createElement("div", { className: cx(css$17.root, css$17.modalHeader, 'uui-modal-header', props.borderBottom && css$17.borderBottom, props.cx), ...props.rawProps, style: {
+    return (React__default.createElement("div", { className: cx(css$15.root, css$15.modalHeader, 'uui-modal-header', props.borderBottom && css$15.borderBottom, props.cx), ...props.rawProps, style: {
             ...props.rawProps?.style,
         } },
         props.title && (React__default.createElement("div", { className: cx('uui-modal-title', 'uui-typography') }, props.title)),
@@ -1968,7 +1997,7 @@ function ModalHeader(props) {
             React__default.createElement(IconButton, { rawProps: { 'aria-label': 'Close modal' }, icon: settings.modal.icons.closeIcon, onClick: props.onClose })))));
 }
 function ModalFooter(props) {
-    return (React__default.createElement("div", { className: cx(css$17.root, css$17.modalFooter, 'uui-modal-footer', props.borderTop && css$17.borderTop, props.cx), ...props.rawProps, style: {
+    return (React__default.createElement("div", { className: cx(css$15.root, css$15.modalFooter, 'uui-modal-footer', props.borderTop && css$15.borderTop, props.cx), ...props.rawProps, style: {
             ...props.rawProps?.style,
         } }, props.children));
 }
@@ -2131,7 +2160,7 @@ const TREE_SHAKEABLE_INIT = () => ({
 });
 const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
 
-var css$16 = {"root":"_83r3qq","icon-wrapper":"j1pR0c","iconWrapper":"j1pR0c","action-wrapper":"o0SgNN","actionWrapper":"o0SgNN","action-link":"AXXFs0","actionLink":"AXXFs0","close-icon":"c0929B","closeIcon":"c0929B","main-path":"_2UNvbp","mainPath":"_2UNvbp","content":"-nee61","close-wrapper":"wd7bda","closeWrapper":"wd7bda","notification-wrapper":"tVsCh-","notificationWrapper":"tVsCh-","clear-button":"YGyp5J","clearButton":"YGyp5J"};
+var css$14 = {"root":"eaSWnB","icon-wrapper":"k73cGX","iconWrapper":"k73cGX","action-wrapper":"_8NnI6l","actionWrapper":"_8NnI6l","action-link":"_4rBhn-","actionLink":"_4rBhn-","close-icon":"c8ShMl","closeIcon":"c8ShMl","main-path":"WtJ4AK","mainPath":"WtJ4AK","content":"Q5D-S7","close-wrapper":"l-JoBd","closeWrapper":"l-JoBd","notification-wrapper":"_8L9GQP","notificationWrapper":"_8L9GQP","clear-button":"cE6rQN","clearButton":"cE6rQN"};
 
 const NotificationCard = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const notificationCardNode = React__default.useRef(null);
@@ -2144,15 +2173,15 @@ const NotificationCard = /* @__PURE__ */React__default.forwardRef((props, ref) =
             notificationCardNode.current?.removeEventListener('mouseleave', props.refreshTimer);
         };
     }, []);
-    return (React__default.createElement("div", { role: "alert", className: cx('uui-notification_card', props.color && `uui-color-${props.color}`, css$16.root, props.cx), ref: notificationCardNode, ...props.rawProps },
-        React__default.createElement("div", { className: css$16.mainPath },
-            props.icon && (React__default.createElement("div", { className: css$16.iconWrapper },
+    return (React__default.createElement("div", { role: "alert", className: cx('uui-notification_card', props.color && `uui-color-${props.color}`, css$14.root, props.cx), ref: notificationCardNode, ...props.rawProps },
+        React__default.createElement("div", { className: css$14.mainPath },
+            props.icon && (React__default.createElement("div", { className: css$14.iconWrapper },
                 React__default.createElement(IconContainer, { size: 24, icon: props.icon }))),
-            React__default.createElement("div", { className: css$16.content },
+            React__default.createElement("div", { className: css$14.content },
                 props.children,
-                props.actions && (React__default.createElement("div", { className: css$16.actionWrapper }, props.actions.map((action) => (React__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__default.createElement("div", { className: css$16.closeWrapper },
-                React__default.createElement(IconButton, { icon: settings.notificationCard.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$16.closeIcon }))))));
+                props.actions && (React__default.createElement("div", { className: css$14.actionWrapper }, props.actions.map((action) => (React__default.createElement(LinkButton, { key: action.name, caption: action.name, onClick: action.action, cx: css$14.actionLink, size: settings.notificationCard.sizes.action, rawProps: action.rawProps })))))),
+            props.onClose && (React__default.createElement("div", { className: css$14.closeWrapper },
+                React__default.createElement(IconButton, { icon: settings.notificationCard.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$14.closeIcon }))))));
 });
 const WarningNotification = /* @__PURE__ */React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, { icon: settings.notificationCard.icons.warningIcon, color: "warning", ...props, ref: ref, cx: props.cx })));
 const SuccessNotification = /* @__PURE__ */React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, { icon: settings.notificationCard.icons.successIcon, color: "success", ...props, ref: ref, cx: props.cx })));
@@ -2160,11 +2189,11 @@ const HintNotification = /* @__PURE__ */React__default.forwardRef((props, ref) =
 const ErrorNotification = /* @__PURE__ */React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, { icon: settings.notificationCard.icons.errorIcon, color: "error", ...props, ref: ref, cx: props.cx })));
 function ClearNotification() {
     const uuiCtx = useUuiContext();
-    return (React__default.createElement("div", { className: cx(css$16.notificationWrapper, css$16.clearButton) },
+    return (React__default.createElement("div", { className: cx(css$14.notificationWrapper, css$14.clearButton) },
         React__default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
 }
 
-var css$15 = {"footer":"F38tlt"};
+var css$13 = {"footer":"YnEQlR"};
 
 class ConfirmationModal extends React.Component {
     render() {
@@ -2176,7 +2205,7 @@ class ConfirmationModal extends React.Component {
             React.createElement(ModalWindow, { width: 420 },
                 React.createElement(ModalHeader, { borderBottom: true, title: this.props.caption, onClose: () => this.props.abort() }),
                 React.createElement(ScrollBars, null, bodyContent),
-                React.createElement(ModalFooter, { cx: css$15.footer },
+                React.createElement(ModalFooter, { cx: css$13.footer },
                     this.props.hideCancelButton || (React.createElement(Button, { caption: i18n.form.modals.discardButton, onClick: () => this.props.success(false), fill: "outline", color: "secondary" })),
                     React.createElement(Button, { caption: i18n.form.modals.saveButton, onClick: () => this.props.success(true), color: "primary" })))));
     }
@@ -2206,7 +2235,7 @@ function useReliableForceUpdate() {
     return red[1];
 }
 
-var css$14 = {"root":"lDd8af","timepicker-input":"_3PsexC","timepickerInput":"_3PsexC","ltr-always":"WRdAft","ltrAlways":"WRdAft"};
+var css$12 = {"root":"_2Ynwsk","timepicker-input":"agnYHu","timepickerInput":"agnYHu","ltr-always":"-RVjIo","ltrAlways":"-RVjIo"};
 
 const uuiTimePicker = {
     container: 'uui-timepicker-container',
@@ -2245,8 +2274,8 @@ function TimePickerBody(props) {
         const minutesToSubtract = value.minute() % minutesStep === 0 ? minutesStep : value.minute() % minutesStep;
         onMinutesChange(value.subtract(minutesToSubtract, 'm').minute());
     };
-    return (React.createElement("div", { className: cx$1(css$14.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef, ...props.rawProps },
-        React.createElement("div", { className: css$14.ltrAlways },
+    return (React.createElement("div", { className: cx$1(css$12.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef, ...props.rawProps },
+        React.createElement("div", { className: css$12.ltrAlways },
             React.createElement("div", { className: uuiTimePicker.elementContainer },
                 React.createElement(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.createElement(NumericInput$1, { cx: uuiTimePicker.input, onValueChange: onHoursChange, value: +(uuiDayjs.dayjs()
@@ -2389,7 +2418,7 @@ function TimePicker(props) {
         state.value && state.inputValue && saveTime(state.value);
     };
     const renderInput = (inputProps) => {
-        return (React__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 }));
+        return (React__default.createElement(TextInput, { ...inputProps, onClick: null, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$12.root, css$12.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;
@@ -2399,27 +2428,27 @@ function TimePicker(props) {
     return (React__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$13 = {"root":"BBGglx"};
+var css$11 = {"root":"Mh6sMX"};
 
 function applyInputAddonMods() {
     return [
-        css$13.root,
+        css$11.root,
     ];
 }
 const InputAddon = /* @__PURE__ */withMods(InputAddon$1, applyInputAddonMods);
 
-var css$12 = {"root":"q-Npk1"};
+var css$10 = {"root":"vjbDyM"};
 
 function applySliderMods() {
-    return [css$12.root, 'uui-color-neutral'];
+    return [css$10.root, 'uui-color-neutral'];
 }
 const Slider = /* @__PURE__ */withMods(Slider$1, applySliderMods);
 
-var css$11 = {"root":"oVtrpi","tooltip":"nbALtz"};
+var css$$ = {"root":"t6IDqu","tooltip":"_60cWOd"};
 
 function applyRatingMods(mods) {
     return [
-        css$11.root,
+        css$$.root,
         `uui-size-${mods.size || settings.rating.sizes.default}`,
     ];
 }
@@ -2429,7 +2458,7 @@ const Rating = /* @__PURE__ */withMods(uuiComponents.Rating, applyRatingMods, (p
     Tooltip,
 }));
 
-var css$10 = {"root":"pzatO3","container":"WMyq4h"};
+var css$_ = {"root":"v-yTAM","container":"vcCPcf"};
 
 const defaultFormat = 'MMM D, YYYY';
 const valueFormat = 'YYYY-MM-DD';
@@ -2633,21 +2662,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.createElement("div", { className: cx(css$10.root, uuiHeader.container, cx) },
+    return (React.createElement("div", { className: cx(css$_.root, uuiHeader.container, cx) },
         React.createElement("header", { className: uuiHeader.headerNav },
             React.createElement(Button, { icon: navIconLeft || settings.datePicker.icons.body.prevIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconLeft, onClick: !isDisabled && (() => onLeftNavigationArrow()), isDisabled: disablePrev }),
             React.createElement(Button, { caption: title, fill: "ghost", cx: uuiHeader.navTitle, onClick: !isDisabled && (() => onCaptionClick(view)) }),
             React.createElement(Button, { icon: navIconRight || settings.datePicker.icons.body.nextIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
 }
 
-var css$$ = {"root":"EIB1Bp"};
+var css$Z = {"root":"DtooIy"};
 
 function applyDateSelectionMods() {
-    return [css$$.root, `uui-size-${settings.datePicker.sizes.body}`];
+    return [css$Z.root, `uui-size-${settings.datePicker.sizes.body}`];
 }
 const Calendar = /* @__PURE__ */withMods(Calendar$1, applyDateSelectionMods);
 
-var css$_ = {"root":"_6Fn7-S"};
+var css$Y = {"root":"Irzmgm"};
 
 const uuiDatePickerBody = {
     wrapper: 'uui-datepicker-body-wrapper',
@@ -2691,7 +2720,7 @@ function StatelessDatePickerBodyComp({ renderDay, isHoliday, cx: classes, filter
         }
     };
     return (React__default.createElement("div", { ref: ref, className: cx$1(uuiDatePickerBodyBase.container, `uui-size-${settings.datePicker.sizes.body}`, classes), ...rawProps },
-        React__default.createElement("div", { className: cx$1(css$_.root, uuiDatePickerBody.wrapper) },
+        React__default.createElement("div", { className: cx$1(css$Y.root, uuiDatePickerBody.wrapper) },
             React__default.createElement(DatePickerHeader, { value: {
                     view,
                     month,
@@ -2773,7 +2802,7 @@ function DatePickerComponent(props, ref) {
 }
 const DatePicker = /* @__PURE__ */React__default.forwardRef(DatePickerComponent);
 
-var css$Z = {"date-input":"ODsX3x","dateInput":"ODsX3x","root":"FOz-TU","separator":"FEYDRc"};
+var css$X = {"date-input":"_9E6Lq7","dateInput":"_9E6Lq7","root":"fA0K1m","separator":"nNqL7U"};
 
 const RangeDatePickerInput = /* @__PURE__ */forwardRef(({ isDisabled, isInvalid, isReadonly, size, disableClear, rawProps, value, inFocus, format, onValueChange, onFocusInput, onBlurInput, onClick, getPlaceholder, filter, onKeyDown, id, cx: classes, }, ref) => {
     const [inputValue, setInputValue] = useState(toCustomDateRangeFormat(value, format));
@@ -2816,15 +2845,15 @@ const RangeDatePickerInput = /* @__PURE__ */forwardRef(({ isDisabled, isInvalid,
     const clearAllowed = !disableClear && inputValue.from && inputValue.to;
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    React__default.createElement("div", { ref: ref, className: cx$1(`uui-size-${size || settings.rangeDatePicker.sizes.default}`, 'uui-range-date-picker', classes, css$Z.root, isDisabled && uuiMod.disabled, isReadonly && uuiMod.readonly, isInvalid && uuiMod.invalid, inFocus && uuiMod.focus), onKeyDown: onKeyDown },
-        React__default.createElement(TextInput, { icon: settings.rangeDatePicker.icons.input.calendarIcon, cx: cx$1(css$Z.dateInput, inFocus === 'from' && 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__default.createElement("div", { className: css$Z.separator }),
-        React__default.createElement(TextInput, { cx: cx$1(css$Z.dateInput, inFocus === 'to' && uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.rangeDatePicker.sizes.default, value: inputValue.to || undefined, onCancel: clearAllowed ? () => {
+    React__default.createElement("div", { ref: ref, className: cx$1(`uui-size-${size || settings.rangeDatePicker.sizes.default}`, 'uui-range-date-picker', classes, css$X.root, isDisabled && uuiMod.disabled, isReadonly && uuiMod.readonly, isInvalid && uuiMod.invalid, inFocus && uuiMod.focus), onKeyDown: onKeyDown },
+        React__default.createElement(TextInput, { icon: settings.rangeDatePicker.icons.input.calendarIcon, cx: cx$1(css$X.dateInput, inFocus === 'from' && 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__default.createElement("div", { className: css$X.separator }),
+        React__default.createElement(TextInput, { cx: cx$1(css$X.dateInput, inFocus === 'to' && 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$Y = {"root":"ITOzlb"};
+var css$W = {"root":"_2-Glz9"};
 
 const uuiPresets = {
     container: 'uui-presets-container',
@@ -2839,12 +2868,12 @@ const getPresets = (presets) => {
     })).sort((a, b) => a.order - b.order);
 };
 function CalendarPresets(props) {
-    return (React.createElement("div", { ref: props.forwardedRef, className: cx$1(uuiPresets.container, css$Y.root, props.cx), ...props.rawProps },
+    return (React.createElement("div", { ref: props.forwardedRef, className: cx$1(uuiPresets.container, css$W.root, props.cx), ...props.rawProps },
         React.createElement("div", { className: uuiPresets.header }, "Presets"),
         getPresets(props.presets).map((item) => (React.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: settings.rangeDatePicker.sizes.preset })))));
 }
 
-var css$X = {"root":"AN--PP","container":"CLMCQD","day-selection":"OJlODS","daySelection":"OJlODS","from-picker":"iXDN6y","fromPicker":"iXDN6y","to-picker":"xgZccC","toPicker":"xgZccC","bodes-wrapper":"eoPBD7","bodesWrapper":"eoPBD7","blocker":"guOOWS"};
+var css$V = {"root":"WMiVXg","container":"tnIjE5","day-selection":"G0ULmw","daySelection":"G0ULmw","from-picker":"-GCWl2","fromPicker":"-GCWl2","to-picker":"W1XN2m","toPicker":"W1XN2m","bodes-wrapper":"_0J6obL","bodesWrapper":"_0J6obL","blocker":"_93Zilr"};
 
 const uuiRangeDatePickerBody = {
     inRange: 'uui-range-datepicker-in-range',
@@ -2985,21 +3014,21 @@ function RangeDatePickerBodyComp(props, ref) {
                     });
                 }, presets: presets })));
     };
-    return (React__default.createElement("div", { ref: ref, className: cx$1(css$X.root, uuiDatePickerBodyBase.container, props.cx), ...props.rawProps },
-        React__default.createElement(FlexRow, { cx: [view === 'DAY_SELECTION' && css$X.daySelection, css$X.container], alignItems: "top" },
+    return (React__default.createElement("div", { ref: ref, className: cx$1(css$V.root, uuiDatePickerBodyBase.container, props.cx), ...props.rawProps },
+        React__default.createElement(FlexRow, { cx: [view === 'DAY_SELECTION' && css$V.daySelection, css$V.container], alignItems: "top" },
             React__default.createElement(FlexCell, { width: "auto" },
                 React__default.createElement(FlexRow, null,
-                    React__default.createElement(FlexRow, { cx: css$X.bodesWrapper, alignItems: "top" },
-                        React__default.createElement(StatelessDatePickerBody, { key: "date-picker-body-left", cx: cx$1(css$X.fromPicker), ...from, onValueChange: (v) => onBodyValueChange(v, 'from'), onMonthChange: (m) => {
+                    React__default.createElement(FlexRow, { cx: css$V.bodesWrapper, alignItems: "top" },
+                        React__default.createElement(StatelessDatePickerBody, { key: "date-picker-body-left", cx: cx$1(css$V.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__default.createElement(StatelessDatePickerBody, { key: "date-picker-body-right", cx: cx$1(css$X.toPicker), ...to, onValueChange: (v) => onBodyValueChange(v, 'to'), onMonthChange: (m) => {
+                        React__default.createElement(StatelessDatePickerBody, { key: "date-picker-body-right", cx: cx$1(css$V.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__default.createElement("div", { style: {
                                 left: activeMonth === 'from' ? '50%' : undefined,
                                 right: activeMonth === 'to' ? '50%' : undefined,
-                            }, className: css$X.blocker }))),
+                            }, className: css$V.blocker }))),
                     props.presets && renderPresets(props.presets)),
                 props.renderFooter && props.renderFooter()))));
 }
@@ -3019,7 +3048,7 @@ const getDayCX = (day, selectedDate) => {
     return [cx$1(inRange && uuiRangeDatePickerBody.inRange, isFirst && uuiRangeDatePickerBody.firstDayInRangeWrapper, !inRange && isFirst && uuiRangeDatePickerBody.lastDayInRangeWrapper, isLast && uuiRangeDatePickerBody.lastDayInRangeWrapper, !inRange && isLast && uuiRangeDatePickerBody.firstDayInRangeWrapper, (dayValue === fromValue || dayValue === toValue) && uuiDaySelection.selectedDay)];
 };
 
-var css$W = {"dropdown-container":"_3H7GWU","dropdownContainer":"_3H7GWU"};
+var css$U = {"dropdown-container":"ZodwOc","dropdownContainer":"ZodwOc"};
 
 const modifiers = [{
         name: 'offset',
@@ -3063,7 +3092,7 @@ function RangeDatePickerComponent(props, ref) {
         }
     };
     const renderBody = (renderProps) => {
-        return (React__default.createElement(DropdownContainer, { ...renderProps, cx: cx(css$W.dropdownContainer), shards: [targetRef], returnFocus: true },
+        return (React__default.createElement(DropdownContainer, { ...renderProps, cx: cx(css$U.dropdownContainer), shards: [targetRef], returnFocus: true },
             React__default.createElement(FlexRow, null,
                 React__default.createElement(RangeDatePickerBody, { cx: cx(props.bodyCx), value: {
                         selectedDate: _value,
@@ -3087,51 +3116,24 @@ function RangeDatePickerComponent(props, ref) {
 }
 const RangeDatePicker = /* @__PURE__ */React__default.forwardRef(RangeDatePickerComponent);
 
-var css$V = {"root":"SOTr48","blocker":"s4VrrJ","marker":"_60hb7Q","top":"qkvN9e","bottom":"T3leQU","left":"q4VQqs","right":"K-CN7Z","inside":"WOfKhG"};
+var css$T = {"root":"viX6F9","blocker":"C6j8Jq","marker":"k7NAia","top":"SEfXlM","bottom":"AjmXE5","left":"_7qcYC5","right":"FG49Or","inside":"BUo-Wk"};
 
 function DropMarker(props) {
     return props.isDndInProgress
         ? (React.createElement(React.Fragment, null,
-            props.enableBlocker && React.createElement("div", { className: css$V.blocker }),
+            props.enableBlocker && React.createElement("div", { className: css$T.blocker }),
             React.createElement("div", { className: cx([
-                    css$V.root,
-                    css$V.marker,
-                    css$V[props.position],
+                    css$T.root,
+                    css$T.marker,
+                    css$T[props.position],
                     props?.cx,
                 ]) })))
         : null;
 }
 
-var css$U = {"root":"_5yyIl6","line-height":"OhcYc1","lineHeight":"OhcYc1","font-size":"VKjIgU","fontSize":"VKjIgU"};
-
-function applyTextMods(mods) {
-    return [
-        css$U.root,
-        'uui-text',
-        `uui-size-${mods.size || settings.text.sizes.default}`,
-        (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'}`,
-        'uui-typography-inline',
-    ];
-}
-const Text = /* @__PURE__ */withMods(uuiComponents.Text, applyTextMods, (props) => {
-    const style = props?.rawProps?.style || {};
-    props.fontSize && (style['--uui-text-font-size'] = `${props.fontSize}px`);
-    props.lineHeight && (style['--uui-text-line-height'] = `${props.lineHeight}px`);
-    return {
-        rawProps: {
-            ...props?.rawProps,
-            style: style,
-        },
-    };
-});
-
 const RichTextView = /* @__PURE__ */withMods(uuiComponents.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || settings.richTextView.sizes.default}`]);
 
-var css$T = {"modal":"_4Y0p3-","search-wrapper":"aDAYG6","searchWrapper":"aDAYG6","no-data":"meqgGV","noData":"meqgGV","type-search-to-load-size-24":"AjvNyS","typeSearchToLoadSize24":"AjvNyS"};
+var css$S = {"modal":"LO-0ge","search-wrapper":"_0Hv78q","searchWrapper":"_0Hv78q","no-data":"CZLauV","noData":"CZLauV","type-search-to-load-size-24":"_9GQNCs","typeSearchToLoadSize24":"_9GQNCs"};
 
 class DataPickerBody extends PickerBodyBase {
     constructor() {
@@ -3152,7 +3154,7 @@ class DataPickerBody extends PickerBodyBase {
             });
         }
         if (this.props.minCharsToSearch && search.length < this.props.minCharsToSearch) {
-            return (React__default.createElement(FlexCell$1, { cx: css$T.noData, grow: 1, textAlign: "center" },
+            return (React__default.createElement(FlexCell$1, { cx: css$S.noData, grow: 1, textAlign: "center" },
                 React__default.createElement(Text, { size: this.props.searchSize }, i18n.dataPickerBody.typeSearchToLoadMessage)));
         }
         if (this.props.rows.length === 0) {
@@ -3167,25 +3169,23 @@ class DataPickerBody extends 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__default.createElement(FlexCell$1, { cx: css$T.noData, grow: 1, textAlign: "center" },
+            return (React__default.createElement(FlexCell$1, { cx: css$S.noData, grow: 1, textAlign: "center" },
                 React__default.createElement(Text, { size: this.props.searchSize }, i18n.dataPickerBody.noRecordsMessage)));
         }
     }
     render() {
         const searchSize = this.getSearchSize();
         return (React__default.createElement(React__default.Fragment, null,
-            this.showSearch() && (React__default.createElement("div", { key: "search", className: cx$1(css$T.searchWrapper, 'uui-picker_input-body-search') },
+            this.showSearch() && (React__default.createElement("div", { key: "search", className: cx$1(css$S.searchWrapper, 'uui-picker_input-body-search') },
                 React__default.createElement(FlexCell$1, { grow: 1 },
                     React__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__default.createElement(FlexRow, { key: "body", cx: cx$1('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
+            React__default.createElement(FlexRow, { key: "body", cx: cx$1('uui-picker_input-body', css$S[this.props.editMode], css$S[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__default.createElement(VirtualList, { ...this.lens.toProps(), rows: this.props.rows, rawProps: this.props.rawProps, rowsCount: this.props.rowsCount, isLoading: this.props.isReloading })))));
     }
 }
 
-var css$S = {"footer":"KGxzzk"};
-
 function DataPickerFooterImpl(props) {
     const { search, clearSelection, view, showSelected, selectionMode, isSearchTooShort, } = props;
     const size = isMobile() ? settings.pickerInput.sizes.body.mobileFooterLinkButton : props.size;
@@ -3198,7 +3198,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__default.createElement(FlexRow, { cx: css$S.footer },
+    return !hideFooter && (React__default.createElement(FlexRow, { cx: "uui-picker_input-footer" },
         !isSinglePicker && !isSearchTooShort && ( // Show this switch only for multi mode and when some rows rendered
         React__default.createElement(Switch, { size: settings.pickerInput.sizes.body.footerSwitchMap[props.size], value: showSelected.value, isDisabled: !hasSelection, onValueChange: showSelected.onValueChange, label: i18n.pickerInput.showOnlySelectedLabel })),
         React__default.createElement(FlexSpacer, null),
@@ -3210,7 +3210,7 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = /* @__PURE__ */React__default.memo(DataPickerFooterImpl);
 
-var css$R = {"header":"iX--pi","title":"_5QYG8c","close":"DLQmLG"};
+var css$R = {"header":"_2uPIeX","title":"pb27SQ","close":"aT2wUR"};
 
 const DataPickerHeaderImpl = (props) => {
     const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
@@ -3220,11 +3220,11 @@ const DataPickerHeaderImpl = (props) => {
 };
 const DataPickerHeader = /* @__PURE__ */React__default.memo(DataPickerHeaderImpl);
 
-var css$Q = {"root":"doFse3"};
+var css$Q = {"root":"iPnhjb"};
 
 const AvatarStack = /* @__PURE__ */withMods(AvatarStack$1, () => [css$Q.root]);
 
-var css$P = {"root":"W43bX5"};
+var css$P = {"root":"WkS6e8"};
 
 const DEFAULT_FILL = 'solid';
 function applyBadgeMods(mods) {
@@ -3252,7 +3252,7 @@ const Badge = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$O = {"root":"jfUF11"};
+var css$O = {"root":"FnHZ9u"};
 
 function applyTagMods(props) {
     return [
@@ -3280,7 +3280,7 @@ const Tag = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         props.onClear && !props.isDisabled && (React__default.createElement(IconContainer, { cx: uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
 });
 
-var css$N = {"root":"vck9zn","page":"o20D9o","spacer":"e89s1q","mode-ghost":"dlpjTa","modeGhost":"dlpjTa"};
+var css$N = {"root":"VjeqzI","page":"_9-1c9K","spacer":"dxjGGM","mode-ghost":"wG4iS5","modeGhost":"wG4iS5"};
 
 function Paginator(props) {
     const renderPaginator = (params) => (React__default.createElement("nav", { role: "navigation", className: cx(css$N.root, 'uui-paginator', `uui-size-${props.size || settings.paginator.sizes.default}`), ...params.rawProps },
@@ -3297,14 +3297,14 @@ function Paginator(props) {
     return React__default.createElement(Paginator$1, { ...props, render: renderPaginator });
 }
 
-var css$M = {"root":"BRpJMh","progress-bar":"Uaq4dc","progressBar":"Uaq4dc","progressBar-indeterminate":"Ojl-3B","progressBarIndeterminate":"Ojl-3B","size-12":"sE4Knn","size12":"sE4Knn","size-18":"HmgcL-","size18":"HmgcL-","size-24":"ftWXEA","size24":"ftWXEA"};
+var css$M = {"root":"SWbi--","progress-bar":"_5cFot8","progressBar":"_5cFot8","progressBar-indeterminate":"s-SG4W","progressBarIndeterminate":"s-SG4W","size-12":"ozCU6R","size12":"ozCU6R","size-18":"_8uORty","size18":"_8uORty","size-24":"j3K6AQ","size24":"j3K6AQ"};
 
 const IndeterminateBar = /* @__PURE__ */React.forwardRef((props, ref) => {
     return (React.createElement("div", { ref: ref, className: cx('uui-indeterminate_bar', props.cx, css$M.root, css$M[`size-${props.size || 12}`]) },
         React.createElement("div", { className: cx(css$M.progressBar) })));
 });
 
-var css$L = {"root":"SSlZaq","striped":"_5kZZBi","animate-stripes":"kdymei","animateStripes":"kdymei","size-12":"E0pMyM","size12":"E0pMyM","size-18":"Kqg6Zu","size18":"Kqg6Zu","size-24":"gIjGDq","size24":"gIjGDq"};
+var css$L = {"root":"_0--e2Q","striped":"f-wefX","animate-stripes":"lWuC-3","animateStripes":"lWuC-3","size-12":"xwZ63p","size12":"xwZ63p","size-18":"AXvm4p","size18":"AXvm4p","size-24":"KCFjfL","size24":"KCFjfL"};
 
 const DEFAULT_SIZE = '12';
 function applyProgressBarMods(mods) {
@@ -3319,14 +3319,14 @@ const ProgressBar = /* @__PURE__ */withMods(uuiComponents.ProgressBar, applyProg
     hideLabel: props.hideLabel || props.striped,
 }));
 
-var css$K = {"root":"-E9mEB"};
+var css$K = {"root":"PH-yG1"};
 
 const IndicatorBar = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { progress } = props;
     return progress || progress === 0 ? (React.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx(css$K.root, props.cx), hideLabel: true })) : (React.createElement(IndeterminateBar, { ref: ref, cx: cx(css$K.root, props.cx) }));
 });
 
-var css$J = {"root":"ZnfTiH"};
+var css$J = {"root":"f2f0A6"};
 
 const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
     return (React__default.createElement("div", { ref: ref, className: cx([
@@ -3341,7 +3341,7 @@ const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
         React__default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
 });
 
-var css$I = {"drag-handle":"otJktq","dragHandle":"otJktq","icon-container":"moTc6G","iconContainer":"moTc6G"};
+var css$I = {"drag-handle":"N18RfW","dragHandle":"N18RfW","icon-container":"wTWXki","iconContainer":"wTWXki"};
 
 function DataRowAddons(props) {
     const row = props.rowProps;
@@ -3362,15 +3362,13 @@ function DataRowAddons(props) {
             ], 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":"coBbF9","align-widgets-top":"_7z2Opd","alignWidgetsTop":"_7z2Opd","align-widgets-center":"_3wr0qE","alignWidgetsCenter":"_3wr0qE","icon-container":"mpnktg","iconContainer":"mpnktg","loading-cell":"lLXvAC","loadingCell":"lLXvAC","content-wrapper":"rLVdMl","contentWrapper":"rLVdMl","render-item":"rLbWpI","renderItem":"rLbWpI","icon-wrapper":"_405zwH","iconWrapper":"_405zwH","icon-default":"_6CSeu1","iconDefault":"_6CSeu1","selected-mark":"BMbc9R","selectedMark":"BMbc9R"};
+var css$H = {"root":"Gh08Kk","align-widgets-top":"_9SWD5a","alignWidgetsTop":"_9SWD5a","align-widgets-center":"_3ElKKA","alignWidgetsCenter":"_3ElKKA","icon-container":"YBmnUd","iconContainer":"YBmnUd","content-wrapper":"-uHeRN","contentWrapper":"-uHeRN","render-item":"hjSTlb","renderItem":"hjSTlb","icon-wrapper":"YLpeD5","iconWrapper":"YLpeD5","icon-default":"-Yuy--","iconDefault":"-Yuy--","selected-mark":"czCCuG","selectedMark":"czCCuG"};
 
 function DataPickerCell(props) {
     const ref = React.useRef();
     let content;
     if (props.rowProps.isLoading) {
-        content = (
-        // remove `css.loadingCell` after` removing `margin: 0 3px 3px 0` from `TextPlaceholder` `loadingWord` class styles.
-        React.createElement(Text, { key: "t", size: props.size, cx: css$H.loadingCell }, settings.pickerInput.renderPlaceholder()));
+        content = settings.pickerInput.renderPlaceholder({ rowSize: props.size });
     }
     else if (props.rowProps.isUnknown) {
         content = (React.createElement(Text, { key: "t", size: props.size }, "Unknown"));
@@ -3402,7 +3400,7 @@ function DataPickerCell(props) {
         getWrappedContent()));
 }
 
-var css$G = {"picker-row":"UxWzAm","pickerRow":"UxWzAm"};
+var css$G = {"picker-row":"ytFq3d","pickerRow":"ytFq3d"};
 
 class DataPickerRow extends React.Component {
     constructor() {
@@ -3416,7 +3414,7 @@ class DataPickerRow extends React.Component {
     }
 }
 
-var css$F = {"done":"WVDzh8","container":"nHQuYo"};
+var css$F = {"done":"hkpu2I","container":"HbjGUP"};
 
 const PickerBodyMobileView = (props) => {
     const isMobileView = isMobile();
@@ -3493,7 +3491,7 @@ const getHighlightedSearchMatches = (str, search) => {
     return getDecoratedText(str, ranges);
 };
 
-var css$E = {"root":"tJmbBE","column-gap":"upUK0d","columnGap":"upUK0d","title":"GT2fe9","subtitle":"MTwtBb","disabled":"YpsiS7","multiline":"ytfJ-n"};
+var css$E = {"root":"_2dLER3","column-gap":"TtH-k5","columnGap":"TtH-k5","title":"eR2yko","subtitle":"XKh5-q","disabled":"HnOqfw","multiline":"Mh2Dsm"};
 
 function PickerItem(props) {
     const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, } = props;
@@ -3514,7 +3512,7 @@ function getAvatarSize(size, isMultiline) {
     return settings.pickerInput.sizes.body[isMultiline ? 'itemAvatarMultilineMap' : 'itemAvatarMap'][size];
 }
 
-var css$D = {"sub-header-wrapper":"LtxHkG","subHeaderWrapper":"LtxHkG","switch":"teG4RC","no-found-modal-container":"SEji1H","noFoundModalContainer":"SEji1H","no-found-modal-container-icon":"QWEXQn","noFoundModalContainerIcon":"QWEXQn","no-found-modal-container-text":"osLTjF","noFoundModalContainerText":"osLTjF"};
+var css$D = {"sub-header-wrapper":"FcH9yU","subHeaderWrapper":"FcH9yU","switch":"i2ItvS","no-found-modal-container":"houlsn","noFoundModalContainer":"houlsn","no-found-modal-container-icon":"AlI5wz","noFoundModalContainerIcon":"AlI5wz","no-found-modal-container-text":"zpqrOc","noFoundModalContainerText":"zpqrOc"};
 
 function PickerModal(props) {
     const { view, selection, dataSourceStateLens, dataSourceState, getDataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = usePickerModal(props);
@@ -3569,7 +3567,7 @@ function PickerModal(props) {
             React__default.createElement(ModalFooter, null, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$C = {"tooltip":"s2kIwA"};
+var css$C = {"tooltip":"AnSd6-"};
 
 const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     const tagProps = {
@@ -3588,7 +3586,7 @@ const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     }
 });
 
-var css$B = {"root":"vu-HKj"};
+var css$B = {"root":"UChqVS"};
 
 const defaultMode = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
@@ -3689,7 +3687,7 @@ function PickerInputComponent({ highlightSearchMatches = true, ...props }, ref)
 }
 const PickerInput = /* @__PURE__ */React__default.forwardRef(PickerInputComponent);
 
-var css$A = {"row":"nCUeZJ"};
+var css$A = {"row":"sAxESU"};
 
 function PickerListItem(props) {
     let label;
@@ -3709,7 +3707,7 @@ function PickerListItem(props) {
     return (React__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":"_2zNDIn"};
+var css$z = {"root":"PO0ywP"};
 
 function PickerList(props) {
     const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, dataSourceState, getModalTogglerCaption, } = usePickerList(props);
@@ -3744,7 +3742,7 @@ function PickerList(props) {
             }, selectedRows)));
 }
 
-var css$y = {"root":"RhCNsR","wrapper":"VQjVcN","align-widgets-top":"z-SAN5","alignWidgetsTop":"z-SAN5","align-widgets-center":"GegYop","alignWidgetsCenter":"GegYop"};
+var css$y = {"root":"LnPKn8","wrapper":"poTKE2","align-widgets-top":"pw50ng","alignWidgetsTop":"pw50ng","align-widgets-center":"zoTFaE","alignWidgetsCenter":"zoTFaE"};
 
 function DataTableCell(initialProps) {
     const props = { ...initialProps };
@@ -3752,7 +3750,7 @@ function DataTableCell(initialProps) {
         props.addons = React.createElement(DataRowAddons, { size: props.size, ...props });
     }
     props.renderPlaceholder = props.renderPlaceholder
-        || (() => (React.createElement(Text, { key: "t", size: props.size }, settings.dataTable.renderPlaceholder())));
+        || (() => settings.dataTable.renderPlaceholder({ rowSize: props.size }));
     props.renderUnknown = props.renderUnknown
         || (() => (React.createElement(Text, { key: "t", size: props.size }, "Unknown")));
     props.renderTooltip = (tooltipProps) => React.createElement(Tooltip, { color: "critical", ...tooltipProps });
@@ -3792,7 +3790,7 @@ function DataTableCell(initialProps) {
     return React.createElement(DataTableCell$1, { ...props });
 }
 
-var css$x = {"root":"rosH-Q"};
+var css$x = {"root":"zqwdl-"};
 
 // 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.
@@ -3808,7 +3806,7 @@ const DataTableRow = /* @__PURE__ */withMods(DataTableRow$1, ({ borderBottom = t
     ];
 }, () => propsMods);
 
-var css$w = {"sorting-panel-container":"QNLpCR","sortingPanelContainer":"QNLpCR"};
+var css$w = {"sorting-panel-container":"KTSips","sortingPanelContainer":"KTSips"};
 
 const SortingPanelImpl = ({ sortDirection, onSort }) => {
     const sortAsc = useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
@@ -3833,7 +3831,7 @@ const ColumnHeaderDropdownImpl = (props) => {
 };
 const ColumnHeaderDropdown = /* @__PURE__ */React__default.memo(ColumnHeaderDropdownImpl);
 
-var css$v = {"root":"pfOroH","caption-wrapper":"fHHFtY","captionWrapper":"fHHFtY","sort-icon":"gueiqG","sortIcon":"gueiqG","dropdown-icon":"Nm3nut","dropdownIcon":"Nm3nut","infoIcon":"_538J-g","resizable":"v9jhmA","align-right":"IanQYF","alignRight":"IanQYF","align-center":"_5iQ9Mr","alignCenter":"_5iQ9Mr","caption":"K9AABm","truncate":"recvRz","upper-case":"FcmDaz","upperCase":"FcmDaz","checkbox":"qUz8nS","icon":"PNBFRP","fold-all-icon":"IBODcS","foldAllIcon":"IBODcS","cell-tooltip":"OcBUA1","cellTooltip":"OcBUA1","resizing-marker":"yKjIs1","resizingMarker":"yKjIs1","pinned-right":"q73PJ8","pinnedRight":"q73PJ8","draggable":"_3-E6eX","ghost":"_7o2ad8","is-dragged-out":"xaGXmP","isDraggedOut":"xaGXmP","dnd-marker-left":"M1PcQY","dndMarkerLeft":"M1PcQY","dnd-marker-right":"Kcj2Tu","dndMarkerRight":"Kcj2Tu","cell-tooltip-wrapper":"vxstNe","cellTooltipWrapper":"vxstNe","cell-tooltip-text":"xnbQ--","cellTooltipText":"xnbQ--","tooltip-caption":"XrFti6","tooltipCaption":"XrFti6","tooltip-info":"oN3Bec","tooltipInfo":"oN3Bec"};
+var css$v = {"root":"DtobLp","caption-wrapper":"_8L2tj4","captionWrapper":"_8L2tj4","sort-icon":"NKUDhr","sortIcon":"NKUDhr","dropdown-icon":"WHQMOM","dropdownIcon":"WHQMOM","infoIcon":"ft6BzC","resizable":"_0xA-AB","align-right":"O1S3eo","alignRight":"O1S3eo","align-center":"JjlZ-3","alignCenter":"JjlZ-3","caption":"wgmBIr","truncate":"BsDWrN","upper-case":"aAr45L","upperCase":"aAr45L","checkbox":"_3OYlGj","icon":"q8HtL7","fold-all-icon":"U-4O2D","foldAllIcon":"U-4O2D","cell-tooltip":"_1s1jHb","cellTooltip":"_1s1jHb","resizing-marker":"hbMsXX","resizingMarker":"hbMsXX","pinned-right":"Rapez1","pinnedRight":"Rapez1","draggable":"aceCvl","ghost":"cAp7Hc","is-dragged-out":"utPUYh","isDraggedOut":"utPUYh","dnd-marker-left":"NkNYZr","dndMarkerLeft":"NkNYZr","dnd-marker-right":"UmsWvd","dndMarkerRight":"UmsWvd","cell-tooltip-wrapper":"qqsOO-","cellTooltipWrapper":"qqsOO-","cell-tooltip-text":"eWXtLz","cellTooltipText":"eWXtLz","tooltip-caption":"uCPDfd","tooltipCaption":"uCPDfd","tooltip-info":"iC-ZvO","tooltipInfo":"iC-ZvO"};
 
 class DataTableHeaderCell extends React.Component {
     constructor() {
@@ -3927,7 +3925,7 @@ class DataTableHeaderCell extends React.Component {
     }
 }
 
-var css$u = {"root":"kEUThp","caption-wrapper":"_5n5NQj","captionWrapper":"_5n5NQj","align-center":"VElgs8","alignCenter":"VElgs8","caption":"ZWa37s","truncate":"IDf8TA","upper-case":"gCcVs6","upperCase":"gCcVs6","group-cell-tooltip":"_1qwVhh","groupCellTooltip":"_1qwVhh","group-cell-tooltip-wrapper":"zDGITW","groupCellTooltipWrapper":"zDGITW","group-cell-tooltip-text":"wWZ4Qn","groupCellTooltipText":"wWZ4Qn","tooltip-caption":"M2-2NJ","tooltipCaption":"M2-2NJ","tooltip-info":"_2tsqyp","tooltipInfo":"_2tsqyp"};
+var css$u = {"root":"BKV7YL","caption-wrapper":"_09PFkN","captionWrapper":"_09PFkN","align-center":"tyhd6B","alignCenter":"tyhd6B","caption":"VDPGbO","truncate":"c7dWjC","upper-case":"pRNyJ9","upperCase":"pRNyJ9","group-cell-tooltip":"_1uiLeP","groupCellTooltip":"_1uiLeP","group-cell-tooltip-wrapper":"bfzLBK","groupCellTooltipWrapper":"bfzLBK","group-cell-tooltip-text":"EQu1nO","groupCellTooltipText":"EQu1nO","tooltip-caption":"myAWQW","tooltipCaption":"myAWQW","tooltip-info":"_9G2uez","tooltipInfo":"_9G2uez"};
 
 class DataTableHeaderGroupCell extends React.Component {
     constructor() {
@@ -3967,7 +3965,7 @@ class DataTableHeaderGroupCell extends React.Component {
     }
 }
 
-var css$t = {"root":"Aw0bYD"};
+var css$t = {"root":"R6zorr"};
 
 const DataTableHeaderRow = /* @__PURE__ */withMods(DataTableHeaderRow$1, () => [css$t.root, 'uui-dt-vars'], (mods) => ({
     renderCell: (props) => (React.createElement(DataTableHeaderCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.column.key, columnsGap: mods.columnsGap })),
@@ -3980,7 +3978,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":"CzbPWY","title-wrapper":"A1z8AJ","titleWrapper":"A1z8AJ","title":"ITzIxi","text-wrapper":"DtMfNa","textWrapper":"DtMfNa","selection":"EgRQmQ","postfix":"wTJjox","selected":"E3TxhO"};
+var css$s = {"root":"_8qcSn3","title-wrapper":"STe-R-","titleWrapper":"STe-R-","title":"wAUsDj","text-wrapper":"dik8kB","textWrapper":"dik8kB","selection":"sC4jGR","postfix":"_41deNy","selected":"_2vL54k"};
 
 const FilterPanelItemToggler = /* @__PURE__ */React.forwardRef((props, ref) => {
     const togglerPickerOpened = (e) => {
@@ -4148,7 +4146,7 @@ function FilterRangeDatePickerBody(props) {
                 React__default.createElement(LinkButton, { isDisabled: !value.from && !value.to, caption: i18n.pickerModal.clearAllButton, onClick: () => onValueChange(defaultRangeValue) })))));
 }
 
-var css$r = {"container":"_5g4CVT"};
+var css$r = {"container":"LceOMM"};
 
 function FilterNumericBody(props) {
     const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
@@ -4244,7 +4242,7 @@ var SvgActionDeleteOutline = function SvgActionDeleteOutline(props, ref) {
 };
 var ForwardRef$a = /*#__PURE__*/forwardRef(SvgActionDeleteOutline);
 
-var css$q = {"header":"cie9kL","removeButton":"CQL02u","with-search":"ZtkyFI","withSearch":"ZtkyFI"};
+var css$q = {"header":"CxND9E","removeButton":"HavBQt","with-search":"uJeWbW","withSearch":"uJeWbW"};
 
 function useView(props, value) {
     const forceUpdate = useForceUpdate();
@@ -4550,7 +4548,7 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = /* @__PURE__ */React__default.memo(FiltersToolbarImpl);
 
-var css$p = {"divider":"ccnHOj","dropdownDeleteIcon":"HF5tty","presetsWrapper":"Ldg63G","addPresetContainer":"pALtKU","dropContainer":"pqS348"};
+var css$p = {"divider":"peZ6yB","dropdownDeleteIcon":"_8gNZR3","presetsWrapper":"Rmlxqn","addPresetContainer":"eYJ-uR","dropContainer":"MmXF0F"};
 
 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); }
@@ -4631,7 +4629,7 @@ var SvgContentLinkOutline = function SvgContentLinkOutline(props, ref) {
 };
 var ForwardRef$5 = /*#__PURE__*/forwardRef(SvgContentLinkOutline);
 
-var css$o = {"delete-button":"YEJr5L","deleteButton":"YEJr5L","tab-button":"DaiNMu","tabButton":"DaiNMu","targetOpen":"R8rwLb"};
+var css$o = {"delete-button":"ELeF4D","deleteButton":"ELeF4D","tab-button":"YVTZDR","tabButton":"YVTZDR","targetOpen":"xge902"};
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = useUuiContext();
@@ -4698,7 +4696,7 @@ function PresetActionsDropdown(props) {
     return (React__default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", modifiers: [{ name: 'offset', options: { offset: [0, 22] } }] }));
 }
 
-var css$n = {"preset-input-cell":"nWPwT1","presetInputCell":"nWPwT1","preset-input":"vbTSzk","presetInput":"vbTSzk"};
+var css$n = {"preset-input-cell":"k8PDrv","presetInputCell":"k8PDrv","preset-input":"rLqP9t","presetInput":"rLqP9t"};
 
 const UUI_PRESETS_PANEL_ADD_BUTTON = 'uui-presets-panel-add-button';
 const UUI_PRESETS_PANEL_MORE_BUTTON = 'uui-presets-panel-more-button';
@@ -4730,7 +4728,7 @@ function PresetInput(props) {
         React__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":"FvfJ0L","activePreset":"hb9Cop"};
+var css$m = {"preset":"X-ipT2","activePreset":"pAAlOe"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = useState(false);
@@ -4856,7 +4854,7 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var css$l = {"unpin-icon":"D-tMnZ","unpinIcon":"D-tMnZ","pin-toggler-icon":"FO0ACy","pinTogglerIcon":"FO0ACy"};
+var css$l = {"unpin-icon":"xhRRXP","unpinIcon":"xhRRXP","pin-toggler-icon":"Ww2Xpi","pinTogglerIcon":"Ww2Xpi"};
 
 function PinIconButton(props) {
     const i18nLocal = i18n.tables.columnsConfigurationModal;
@@ -4898,7 +4896,7 @@ function getUnpinIcon(params) {
     }
 }
 
-var css$k = {"row-wrapper":"hBIxVC","rowWrapper":"hBIxVC","pin-icon-button":"zyhtPC","pinIconButton":"zyhtPC","not-pinned":"JGLq-A","notPinned":"JGLq-A","checkbox":"n29N4q","drag-handle":"mevN5b","dragHandle":"mevN5b","dnd-disabled":"_8zOhei","dndDisabled":"_8zOhei"};
+var css$k = {"row-wrapper":"Kq0u-g","rowWrapper":"Kq0u-g","pin-icon-button":"FsP3mk","pinIconButton":"FsP3mk","not-pinned":"gcZpkD","notPinned":"gcZpkD","checkbox":"bNlRhQ","drag-handle":"g9DDG-","dragHandle":"g9DDG-","dnd-disabled":"xiDvE-","dndDisabled":"xiDvE-"};
 
 const ColumnRow = /* @__PURE__ */React.memo(function ColumnRow(props) {
     const { column } = props;
@@ -4921,7 +4919,7 @@ const ColumnRow = /* @__PURE__ */React.memo(function ColumnRow(props) {
     return (React.createElement(DndActor, { key: column.key, srcData: isDndAllowed && data, dstData: data, canAcceptDrop: onCanAcceptDrop, onDrop: onDrop, render: renderContent }));
 });
 
-var css$j = {"root":"uunCen","main-panel":"U44Hmj","mainPanel":"U44Hmj","group":"LT32Cx","group-title":"lSdN6w","groupTitle":"lSdN6w","group-items":"-uLMF0","groupItems":"-uLMF0","no-data":"SO6pXA","noData":"SO6pXA","no-data-title":"_7FEo9u","noDataTitle":"_7FEo9u","no-data-sub-title":"VddFsK","noDataSubTitle":"VddFsK","h-divider":"VgJrfR","hDivider":"VgJrfR","search-area":"Qqlyns","searchArea":"Qqlyns","subgroup-accordion":"bVzyIO","subgroupAccordion":"bVzyIO","subgroup":"gtSPpX","subgroup-title":"Dyi3Ra","subgroupTitle":"Dyi3Ra"};
+var css$j = {"root":"ixRIru","main-panel":"rw73Mj","mainPanel":"rw73Mj","group":"_5FM-MW","group-title":"lZsiEP","groupTitle":"lZsiEP","group-items":"-tPEZb","groupItems":"-tPEZb","no-data":"qJeFEW","noData":"qJeFEW","no-data-title":"_5RDMpJ","noDataTitle":"_5RDMpJ","no-data-sub-title":"_-76OKl","noDataSubTitle":"_-76OKl","h-divider":"YzCSyp","hDivider":"YzCSyp","search-area":"zH5jDP","searchArea":"zH5jDP","subgroup-accordion":"kJBbYU","subgroupAccordion":"kJBbYU","subgroup":"_0N72lN","subgroup-title":"TrCSkO","subgroupTitle":"TrCSkO"};
 
 const renderGroupTitle = (title, amount) => (React.createElement(FlexRow, { cx: css$j.group },
     React.createElement(Text, { size: "none", cx: css$j.groupTitle }, title),
@@ -5023,7 +5021,7 @@ const getChildrenAndRest = (row, rows) => {
     return [children, rest];
 };
 
-var css$i = {"listContainer":"u1BrdG","header":"zQ9KYP","group":"x3r2cH","stickyHeader":"c2j5Dt"};
+var css$i = {"listContainer":"_65FTPM","header":"qdiP2a","group":"_4OSDa0","stickyHeader":"KaNPhC"};
 
 function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
     const rowRef = useRef();
@@ -5063,7 +5061,7 @@ function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, r
             React__default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
 }
 
-var css$h = {"root":"v7pINd","sticky-header":"B24K9g","stickyHeader":"B24K9g","no-results":"_-2rDZW","noResults":"_-2rDZW","icon":"Qe-cfb","title":"_5quWZa"};
+var css$h = {"root":"_7tA7Ur","sticky-header":"kLsdEF","stickyHeader":"kLsdEF","no-results":"_5-lNRa","noResults":"_5-lNRa","icon":"ClZ2Ik","title":"QHRKj2"};
 
 function DataTable(props) {
     const { uuiModals } = useUuiContext();
@@ -5112,9 +5110,9 @@ function DataTable(props) {
                 } }))));
 }
 
-var css$g = {"root":"OtfZaT"};
+var css$g = {"root":"_9BeTNg"};
 
-var css$f = {"root":"pe-p7i","burger-content":"TO-7Sj","burgerContent":"TO-7Sj"};
+var css$f = {"root":"bhNFlG","burger-content":"OYv2V-","burgerContent":"OYv2V-"};
 
 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); }
@@ -5157,7 +5155,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
 };
 var ForwardRef$2 = /*#__PURE__*/forwardRef(SvgNavigationArrowDownOutline);
 
-var css$e = {"root":"Epmq7E","button-primary":"r3UwdN","buttonPrimary":"r3UwdN","button-secondary":"I2odi3","buttonSecondary":"I2odi3","hasIcon":"bIYl6T","dropdown":"N-Qjne"};
+var css$e = {"root":"M5dNn1","button-primary":"LdZ8NB","buttonPrimary":"LdZ8NB","button-secondary":"-gMdur","buttonSecondary":"-gMdur","hasIcon":"G1ogfs","dropdown":"UAPB4K"};
 
 const BurgerButton = /* @__PURE__ */withMods(Button$1, (props) => [
     css$e.root,
@@ -5168,13 +5166,13 @@ const BurgerButton = /* @__PURE__ */withMods(Button$1, (props) => [
     props.icon && css$e.hasIcon,
 ], () => ({ dropdownIcon: ForwardRef$2, dropdownIconPosition: 'left', role: 'menuitem' }));
 
-var css$d = {"search-input":"lOkWdE","searchInput":"lOkWdE"};
+var css$d = {"search-input":"wW--Oj","searchInput":"wW--Oj"};
 
 function BurgerSearch(props) {
     return (React.createElement(TextInput$1, { cx: cx(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":"y9lP8R","group-header":"R2aNi6","groupHeader":"R2aNi6","group-name":"JKUiIt","groupName":"JKUiIt","line":"p8aRVT"};
+var css$c = {"root":"ViR-KC","group-header":"Tc88T6","groupHeader":"Tc88T6","group-name":"hrsm0f","groupName":"hrsm0f","line":"pEKJJz"};
 
 function BurgerGroupHeader(props) {
     return (React.createElement("div", { className: cx(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
@@ -5182,7 +5180,7 @@ function BurgerGroupHeader(props) {
         React.createElement("span", { className: css$c.groupName }, props.caption)));
 }
 
-var css$b = {"root":"-LC7Uy","type-primary":"jH4LJ4","typePrimary":"jH4LJ4","type-secondary":"EjabHp","typeSecondary":"EjabHp"};
+var css$b = {"root":"AQmYK-","type-primary":"HVa9q1","typePrimary":"HVa9q1","type-secondary":"hk-x0O","typeSecondary":"hk-x0O"};
 
 const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { type, ...clickableProps } = props;
@@ -5204,7 +5202,7 @@ const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         props.isDropdown && (React.createElement(IconContainer, { icon: ForwardRef$Q, flipY: props.isOpen }))));
 });
 
-var css$a = {"dropdown-body":"CQVDpF","dropdownBody":"CQVDpF"};
+var css$a = {"dropdown-body":"nu7nUz","dropdownBody":"nu7nUz"};
 
 class MainMenuDropdown extends React.Component {
     render() {
@@ -5262,12 +5260,12 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
 };
 var ForwardRef$1 = /*#__PURE__*/forwardRef(SvgNavigationGlobalMenuOutlineOutline);
 
-var css$9 = {"global-menu-btn":"t-YBhs","globalMenuBtn":"t-YBhs","global-menu-icon":"-tBEtA","globalMenuIcon":"-tBEtA"};
+var css$9 = {"global-menu-btn":"J1KB8-","globalMenuBtn":"J1KB8-","global-menu-icon":"COSxSw","globalMenuIcon":"COSxSw"};
 
 const GlobalMenu = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("button", { ref: ref, id: "global_menu_toggle", className: cx(css$9.globalMenuBtn, props.cx), ...props.rawProps },
     React.createElement(IconContainer, { size: 36, icon: ForwardRef$1, cx: css$9.globalMenuIcon }))));
 
-var css$8 = {"container":"Xazrs0","open":"Zg1tOd","folding-arrow":"ore1ch","foldingArrow":"ore1ch"};
+var css$8 = {"container":"M2FK-s","open":"JgmGjS","folding-arrow":"bvletb","foldingArrow":"bvletb"};
 
 const MainMenuAvatar = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("button", { ref: ref, className: cx(css$8.container, props.isDropdown && css$8.dropdown, props.isOpen && css$8.open, props.onClick && uuiMarkers.clickable, props.cx), onClick: props.onClick, ...props.rawProps },
     React.createElement(Avatar, { size: "36", img: props.avatarUrl }),
@@ -5275,15 +5273,15 @@ const MainMenuAvatar = /* @__PURE__ */React.forwardRef((props, ref) => (React.cr
     props.isDropdown && (React.createElement("div", null,
         React.createElement(IconContainer, { size: 18, icon: ForwardRef$Q, flipY: props.isOpen, cx: css$8.foldingArrow }))))));
 
-var css$7 = {"search-input":"EnIXpz","searchInput":"EnIXpz"};
+var css$7 = {"search-input":"A94GJg","searchInput":"A94GJg"};
 
 const MainMenuSearch = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement(IEditableDebouncer, { ...props, render: (iEditable) => (React.createElement(TextInput$1, { iconPosition: "left", icon: ForwardRef$N, cancelIcon: props.value?.length > 0 && ForwardRef$R, ...props, ...iEditable, ref: ref, cx: cx$1(css$7.searchInput, props.cx), ...props.rawProps })) })));
 
-var css$6 = {"container":"F5lZm-"};
+var css$6 = {"container":"lUhHjj"};
 
 const MainMenuIcon = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement(IconButton, { ref: ref, icon: props.icon, cx: cx$1(props.cx, css$6.container), ...props })));
 
-var css$5 = {"root":"GvpSgM"};
+var css$5 = {"root":"guez0w"};
 
 const Anchor = /* @__PURE__ */withMods(Anchor$1, () => [css$5.root]);
 
@@ -5341,7 +5339,7 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgFileCloudUploadFill);
 
-var css$4 = {"root":"c7--a4","drop-start":"ycaV-F","dropStart":"ycaV-F","drop-over":"ifKjnY","dropOver":"ifKjnY","link":"yPHDkZ","drop-area":"R5yx-L","dropArea":"R5yx-L","drop-caption":"_7b9gsO","dropCaption":"_7b9gsO","icon-blue":"X4MMEA","iconBlue":"X4MMEA"};
+var css$4 = {"root":"_9i4W3h","drop-start":"jACi28","dropStart":"jACi28","drop-over":"Fy0zmb","dropOver":"Fy0zmb","link":"ajOWu-","drop-area":"v1Vzz8","dropArea":"v1Vzz8","drop-caption":"xSC5UP","dropCaption":"xSC5UP","icon-blue":"TKmz3v","iconBlue":"TKmz3v"};
 
 function DropSpot(props) {
     const getInfoText = typeof props.infoText === 'string'
@@ -5359,7 +5357,7 @@ function DropSpot(props) {
     return React.createElement(DropSpot$1, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
 }
 
-var css$3 = {"root":"iR0pUe"};
+var css$3 = {"root":"_8EvdTZ"};
 
 const SvgCircleProgress = /* @__PURE__ */React.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
@@ -5370,7 +5368,7 @@ const SvgCircleProgress = /* @__PURE__ */React.forwardRef((props, ref) => {
         React.createElement("circle", { strokeWidth: 1, fill: "transparent", r: outsetRadius, cx: props.size / 2, cy: props.size / 2 })));
 });
 
-var css$2 = {"root":"n5P-Ch","file-name":"CM2e-v","fileName":"CM2e-v","default-color":"im3iGK","defaultColor":"im3iGK","doc-color":"Xcqvoz","docColor":"Xcqvoz","xls-color":"Bb-qpD","xlsColor":"Bb-qpD","pdf-color":"BXCz6-","pdfColor":"BXCz6-","movie-color":"-RskFM","movieColor":"-RskFM","img-color":"zGMP9L","imgColor":"zGMP9L","mov-color":"D9-hMj","movColor":"D9-hMj","error-block":"OrtOFc","errorBlock":"OrtOFc","icons-block":"Jesxlt","iconsBlock":"Jesxlt"};
+var css$2 = {"root":"YupJrV","file-name":"o0JuqN","fileName":"o0JuqN","default-color":"tp0RxW","defaultColor":"tp0RxW","doc-color":"-DgvaJ","docColor":"-DgvaJ","xls-color":"oQiwXL","xlsColor":"oQiwXL","pdf-color":"KBqZzg","pdfColor":"KBqZzg","movie-color":"-oZz9x","movieColor":"-oZz9x","img-color":"mc6C2t","imgColor":"mc6C2t","mov-color":"-kinsM","movColor":"-kinsM","error-block":"OS1wOc","errorBlock":"OS1wOc","icons-block":"_5fCCkN","iconsBlock":"_5fCCkN"};
 
 const FileCard = /* @__PURE__ */React.forwardRef((props, ref) => {
     const [isLoadingShow, setIsLoadingShow] = React.useState(true);
@@ -5489,7 +5487,7 @@ const getErrorPageConfig = () => ({
     },
 });
 
-var css$1 = {"container":"_-8iBKl"};
+var css$1 = {"container":"dRwaBm"};
 
 const ErrorPage = (props) => {
     const isMobileScreen = isMobile();
@@ -5501,7 +5499,7 @@ const ErrorPage = (props) => {
             props?.supportLink && React__default.createElement("div", { className: "uui-error-support-link" }, props?.supportLink))));
 };
 
-var css = {"recovery-spinner":"VsM91N","recoverySpinner":"VsM91N","recovery-message":"MU1gQP","recoveryMessage":"MU1gQP","modal-blocker":"-x8QHj","modalBlocker":"-x8QHj","modalFadeIn":"oocA4y"};
+var css = {"recovery-spinner":"Ht0crH","recoverySpinner":"Ht0crH","recovery-message":"_5EADbQ","recoveryMessage":"_5EADbQ","modal-blocker":"Gwau3k","modalBlocker":"Gwau3k","modalFadeIn":"wemycR"};
 
 function ErrorHandler(props) {
     const { uuiNotifications, uuiModals, uuiApi } = useUuiContext();