@epam/uui 6.5.0-alpha.0 → 6.5.1-beta.0

package/index.js

@@ -190,7 +190,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#od04nnpgd11hcww_a)"
+    clipPath: "url(#86y8n2cgql43goqxg_a)"
   }, _path$I || (_path$I = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M150.585 1.535C49.483-11.495 27.481 61.805 45.725 97.481c10.581 20.69-39.64 70.792 17.744 81.468 27.538 5.123 36-13.341 62.433-10.655 35.4 3.6 148.167-4.73 88.349-78.915-31.713-39.335 1.026-79.506-63.666-87.844Z",
     fill: "#F5F6FA"
@@ -211,7 +211,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M86.786 22.982c-2.55 0-4.965 2.07-4.965 4.552V120.6c0 2.484 2.4 4.572 4.965 4.572h88.101c2.582 0 4.986-2.089 4.986-4.572V27.534c0-2.464-2.418-4.552-4.986-4.552h-88.1Zm-5.793 4.552c0-3.022 2.874-5.38 5.793-5.38h88.101c2.935 0 5.814 2.374 5.814 5.38V120.6c0 3.021-2.86 5.4-5.814 5.4h-88.1c-2.94 0-5.794-2.381-5.794-5.4V27.534Z",
     fill: "#1D1E26"
   })), /*#__PURE__*/React__namespace.createElement("mask", {
-    id: "od04nnhjnkq8z8gf6_b",
+    id: "86y8n2ykqv84rixjh_b",
     style: {
       maskType: "alpha"
     },
@@ -224,7 +224,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M174.887 125.586h-88.1c-2.752 0-5.38-2.234-5.38-4.986V27.534c0-2.752 2.644-4.966 5.38-4.966h88.1c2.752 0 5.4 2.23 5.4 4.966V120.6c0 2.752-2.632 4.986-5.4 4.986Z",
     fill: "#9BDEFF"
   }))), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
-    mask: "url(#od04nnhjnkq8z8gf6_b)",
+    mask: "url(#86y8n2ykqv84rixjh_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -310,7 +310,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M24.73 96.184a.414.414 0 0 1 .581.06l48.646 59.751a.413.413 0 1 1-.642.523L24.67 96.766a.414.414 0 0 1 .06-.582Z",
     fill: "#fff"
   }))), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "od04nnpgd11hcww_a"
+    id: "86y8n2cgql43goqxg_a"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
@@ -961,14 +961,14 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
 };
 var ForwardRef$4 = /*#__PURE__*/React.forwardRef(SvgSearchWithBackground);
 
-var css$1w = {"root":"wHWe96","uui-spinner":"GbwXIv","uuiSpinner":"GbwXIv"};
+var css$1x = {"root":"OuBUh3","uui-spinner":"pQ0oho","uuiSpinner":"pQ0oho"};
 
 function applySpinnerMods() {
-    return [css$1w.root, 'uui-spinner'];
+    return [css$1x.root, 'uui-spinner'];
 }
 const Spinner = /* @__PURE__ */uuiCore.withMods(uuiComponents.Spinner, applySpinnerMods);
 
-var css$1v = {"root":"L5AYte","loading-word":"hLQqgv","loadingWord":"hLQqgv","animated-loading":"_3YSplp","animatedLoading":"_3YSplp","skeleton_loading":"BBSZPL","skeletonLoading":"BBSZPL"};
+var css$1w = {"root":"qOBIXH","loading-word":"CgWZEU","loadingWord":"CgWZEU","animated-loading":"ZEEs3l","animatedLoading":"ZEEs3l","skeleton_loading":"_5xYtVF","skeletonLoading":"_5xYtVF"};
 
 const TextPlaceholder = (props) => {
     const pattern = ' ';
@@ -980,20 +980,20 @@ const TextPlaceholder = (props) => {
         }
         return words;
     }, [props.wordsCount]);
-    return (React__namespace.createElement("div", { "aria-busy": true, className: cx__default.default(css$1v.root, 'uui-text-placeholder'), ...props.rawProps }, text.map((it, index) => (React__namespace.createElement("span", { key: index, className: cx__default.default([
-            props.cx, css$1v.loadingWord, !props.isNotAnimated && css$1v.animatedLoading,
+    return (React__namespace.createElement("div", { "aria-busy": true, className: cx__default.default(css$1w.root, 'uui-text-placeholder'), ...props.rawProps }, text.map((it, index) => (React__namespace.createElement("span", { key: index, className: cx__default.default([
+            props.cx, css$1w.loadingWord, !props.isNotAnimated && css$1w.animatedLoading,
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
-var css$1u = {"root":"t2qF7o","line-height":"QsHsg-","lineHeight":"QsHsg-","font-size":"DYySQH","fontSize":"DYySQH"};
+var css$1v = {"root":"_2MOxcp","line-height":"gbBOkC","lineHeight":"gbBOkC","font-size":"_0e9G-g","fontSize":"_0e9G-g"};
 
 function applyTextMods(mods) {
     return [
-        css$1u.root,
+        css$1v.root,
         'uui-text',
         `uui-size-${mods.size || settings.text.sizes.default}`,
-        (mods.size !== 'none' || mods.lineHeight) && css$1u.lineHeight,
-        (mods.size !== 'none' || mods.fontSize) && css$1u.fontSize,
+        (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'}`,
@@ -1012,9 +1012,9 @@ const Text = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Text, appl
     };
 });
 
-var css$1t = {"root":"VW0xT7"};
+var css$1u = {"root":"_2CgssR"};
 
-const Blocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.Blocker, () => [css$1t.root], () => ({ renderSpinner: settings.blocker.renderSpinner }));
+const Blocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.Blocker, () => [css$1u.root], () => ({ renderSpinner: settings.blocker.renderSpinner }));
 
 const accordionSettings = {
     icons: {
@@ -1383,6 +1383,7 @@ const rangeDatePickerSettings = {
     sizes: {
         default: '36',
         preset: '24',
+        mobilePreset: '30',
     },
 };
 const ratingSettings = {
@@ -1517,11 +1518,11 @@ const settings = {
     textInput: textInputSettings,
 };
 
-var css$1s = {"root":"_73MvAx"};
+var css$1t = {"root":"_93Kume"};
 
 function applyButtonMods(mods) {
     return [
-        css$1s.root,
+        css$1t.root,
         'uui-button',
         `uui-fill-${mods.fill || 'solid'}`,
         `uui-color-${mods.color || 'primary'}`,
@@ -1535,10 +1536,10 @@ const Button = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Button,
     };
 });
 
-var css$1r = {"root":"qJt05Y"};
+var css$1s = {"root":"_2X5nEJ"};
 
 function applyIconButtonMods(props) {
-    return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1r.root];
+    return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1s.root];
 }
 const IconButton = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.IconButton, applyIconButtonMods, (props) => {
     const isDeprecated = ['info', 'success', 'error', 'warning'].includes(props.color);
@@ -1572,7 +1573,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$1q = {"root":"cv8fbr"};
+var css$1r = {"root":"IKNhEL"};
 
 const DEFAULT_COLOR = 'primary';
 const LinkButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
@@ -1587,7 +1588,7 @@ const LinkButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     }
     const rootStyles = [
         'uui-link_button',
-        css$1q.root,
+        css$1r.root,
         `uui-size-${props.size || settings.linkButton.sizes.default}`,
         ...getIconClass(props),
         `uui-color-${props.color || DEFAULT_COLOR}`,
@@ -1602,11 +1603,11 @@ const LinkButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
         props.isDropdown && (React__namespace.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1p = {"root":"F1K5-G"};
+var css$1q = {"root":"Gq5yqS"};
 
 const CountIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
     return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
-            css$1p.root,
+            css$1q.root,
             'uui-count_indicator',
             `uui-size-${props.size || settings.countIndicator.sizes.default}`,
             props.color && `uui-color-${props.color}`,
@@ -1614,7 +1615,7 @@ const CountIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
         ]) }, props.caption));
 });
 
-var css$1o = {"root":"BQ79nw","withNotify":"fu1mgU"};
+var css$1p = {"root":"_3vsS8v","withNotify":"GzurRq"};
 
 const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, refExternal) => {
     const refLocal = React__namespace.default.useRef(null);
@@ -1626,7 +1627,7 @@ const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, ref
     });
     const styles = [
         isActive && uuiCore.uuiMod.active,
-        css$1o.root,
+        css$1p.root,
         'uui-tab-button',
         `uui-size-${props.size || settings.tabButton.sizes.default}`,
         ...getIconClass(props),
@@ -1654,26 +1655,26 @@ const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, ref
         props.icon && props.iconPosition !== 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         (props.caption || props.withNotify) && (React__namespace.default.createElement("div", { className: uuiCore.cx(uuiCore.uuiElement.caption) },
             props.caption,
-            props.withNotify && React__namespace.default.createElement("div", { className: css$1o.withNotify }))),
+            props.withNotify && React__namespace.default.createElement("div", { className: css$1p.withNotify }))),
         props.icon && props.iconPosition === 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         props.count !== undefined && props.count !== null && (React__namespace.default.createElement(CountIndicator, { color: "neutral", size: settings.tabButton.sizes.countIndicatorMap[props.size || settings.tabButton.sizes.default], caption: props.count })),
         props.isDropdown && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen })),
         props.onClear && !props.isDisabled && (React__namespace.default.createElement(uuiComponents.IconContainer, { cx: uuiCore.uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
 });
 
-var css$1n = {"root":"btG3d4","noLeftPadding":"BNhpdA","foldingArea":"_3Medwy","onlyFoldable":"viXzqW","captionWrapper":"wCY6DC","withNotify":"MP0UKc"};
+var css$1o = {"root":"usEo37","noLeftPadding":"Mqrfq0","foldingArea":"_3mG6bZ","onlyFoldable":"AiAJzz","captionWrapper":"klsMLj","withNotify":"fWP-Bc"};
 
-var css$1m = {"root":"UKJGXU"};
+var css$1n = {"root":"AKPEoQ"};
 
-const AvatarStack = /* @__PURE__ */uuiCore.withMods(uuiComponents.AvatarStack, () => [css$1m.root]);
+const AvatarStack = /* @__PURE__ */uuiCore.withMods(uuiComponents.AvatarStack, () => [css$1n.root]);
 
-var css$1l = {"root":"mBcbTU"};
+var css$1m = {"root":"BUFVmU"};
 
 const DEFAULT_FILL = 'solid';
 function applyBadgeMods(mods) {
     return [
         'uui-badge',
-        css$1l.root,
+        css$1m.root,
         `uui-size-${mods.size || settings.badge.sizes.default}`,
         `uui-fill-${mods.fill || DEFAULT_FILL}`,
         `uui-color-${mods.color || 'info'}`,
@@ -1695,11 +1696,11 @@ const Badge = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) =>
         props.isDropdown && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1k = {"root":"Kyg-VZ"};
+var css$1l = {"root":"WrLoYS"};
 
 function applyTagMods(props) {
     return [
-        css$1k.root,
+        css$1l.root,
         `uui-size-${props.size || settings.tag.sizes.default}`,
         `uui-color-${props.color || 'neutral'}`,
         `uui-fill-${props.fill || 'solid'}`,
@@ -1728,11 +1729,11 @@ const Tag = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
             } }))));
 });
 
-var css$1j = {"root":"zVDYL9","page":"YLRFk9","spacer":"_-5gzP8","mode-ghost":"l0MSu-","modeGhost":"l0MSu-"};
+var css$1k = {"root":"y3HEp7","page":"TzCuyj","spacer":"cZc-AL","mode-ghost":"HkaxFZ","modeGhost":"HkaxFZ"};
 
 function Paginator(props) {
     const renderPaginator = (params) => (React__namespace.default.createElement("nav", { role: "navigation", className: cx__default.default('uui-paginator', `uui-size-${props.size || settings.paginator.sizes.default}`), ...params.rawProps },
-        React__namespace.default.createElement("ul", { className: css$1j.root },
+        React__namespace.default.createElement("ul", { className: css$1k.root },
             React__namespace.default.createElement("li", null,
                 React__namespace.default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.leftArrowIcon, onClick: params.goToPrev, isDisabled: params.isFirst || props.isDisabled, fill: "outline", color: "secondary", rawProps: {
                         'aria-label': 'Previous page',
@@ -1740,11 +1741,11 @@ function Paginator(props) {
             params.pages.map((page, index) => {
                 if (page.type === 'spacer') {
                     return (React__namespace.default.createElement("li", { key: `${index}_spacer` },
-                        React__namespace.default.createElement(Button, { cx: cx__default.default(css$1j.spacer, css$1j.page), size: props.size || settings.paginator.sizes.default, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1, isDisabled: props.isDisabled })));
+                        React__namespace.default.createElement(Button, { cx: cx__default.default(css$1k.spacer, css$1k.page), size: props.size || settings.paginator.sizes.default, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1, isDisabled: props.isDisabled })));
                 }
                 else {
                     return (React__namespace.default.createElement("li", { key: page.pageNumber },
-                        React__namespace.default.createElement(Button, { cx: cx__default.default(css$1j[`mode-${!page.isActive && 'ghost'}`], css$1j.page), size: props.size || settings.paginator.sizes.default, caption: page.pageNumber, onClick: () => page.onClick?.(), rawProps: { 'aria-current': page.isActive }, fill: (page.isActive && 'outline') || 'ghost', color: "primary", isDisabled: props.isDisabled })));
+                        React__namespace.default.createElement(Button, { cx: cx__default.default(css$1k[`mode-${!page.isActive && 'ghost'}`], css$1k.page), size: props.size || settings.paginator.sizes.default, caption: page.pageNumber, onClick: () => page.onClick?.(), rawProps: { 'aria-current': page.isActive }, fill: (page.isActive && 'outline') || 'ghost', color: "primary", isDisabled: props.isDisabled })));
                 }
             }),
             React__namespace.default.createElement("li", null,
@@ -1754,40 +1755,40 @@ function Paginator(props) {
     return React__namespace.default.createElement(uuiComponents.Paginator, { ...props, render: renderPaginator });
 }
 
-var css$1i = {"root":"DhfzLk","progress-bar":"D5HO-D","progressBar":"D5HO-D","progressBar-indeterminate":"q7pX-1","progressBarIndeterminate":"q7pX-1","size-12":"SBS94U","size12":"SBS94U","size-18":"GXFvFr","size18":"GXFvFr","size-24":"_4FBi2t","size24":"_4FBi2t"};
+var css$1j = {"root":"iMrosC","progress-bar":"E-Sysv","progressBar":"E-Sysv","progressBar-indeterminate":"vVd1qf","progressBarIndeterminate":"vVd1qf","size-12":"olb-JK","size12":"olb-JK","size-18":"BScQLT","size18":"BScQLT","size-24":"RMDLQY","size24":"RMDLQY"};
 
 const IndeterminateBar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
-    return (React__namespace.createElement("div", { ref: ref, className: cx__default.default('uui-indeterminate_bar', props.cx, css$1i.root, css$1i[`size-${props.size || 12}`]) },
-        React__namespace.createElement("div", { className: cx__default.default(css$1i.progressBar) })));
+    return (React__namespace.createElement("div", { ref: ref, className: cx__default.default('uui-indeterminate_bar', props.cx, css$1j.root, css$1j[`size-${props.size || 12}`]) },
+        React__namespace.createElement("div", { className: cx__default.default(css$1j.progressBar) })));
 });
 
-var css$1h = {"root":"vqR8ki","striped":"aoQy5k","animate-stripes":"Cpocf4","animateStripes":"Cpocf4","size-12":"yW3aif","size12":"yW3aif","size-18":"Vjt90X","size18":"Vjt90X","size-24":"oOrFSH","size24":"oOrFSH"};
+var css$1i = {"root":"-J7I2e","striped":"SZyzmH","animate-stripes":"u-4gbW","animateStripes":"u-4gbW","size-12":"sVXf6M","size12":"sVXf6M","size-18":"kH5E--","size18":"kH5E--","size-24":"_3n7saA","size24":"_3n7saA"};
 
 const DEFAULT_SIZE = '12';
 function applyProgressBarMods(mods) {
     const size = mods.size || DEFAULT_SIZE;
     return [
-        css$1h.root,
-        css$1h[`size-${size}`],
-        mods.striped && css$1h.striped,
+        css$1i.root,
+        css$1i[`size-${size}`],
+        mods.striped && css$1i.striped,
     ];
 }
 const ProgressBar = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.ProgressBar, applyProgressBarMods, (props) => ({
     hideLabel: props.hideLabel || props.striped,
 }));
 
-var css$1g = {"root":"Yvl3rP"};
+var css$1h = {"root":"Vf7ycQ"};
 
 const IndicatorBar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const { progress } = props;
-    return progress || progress === 0 ? (React__namespace.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx__default.default(css$1g.root, props.cx), hideLabel: true })) : (React__namespace.createElement(IndeterminateBar, { ref: ref, cx: cx__default.default(css$1g.root, props.cx) }));
+    return progress || progress === 0 ? (React__namespace.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx__default.default(css$1h.root, props.cx), hideLabel: true })) : (React__namespace.createElement(IndeterminateBar, { ref: ref, cx: cx__default.default(css$1h.root, props.cx) }));
 });
 
-var css$1f = {"root":"g2poa9"};
+var css$1g = {"root":"Y0iy29"};
 
 const StatusIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
     return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
-            css$1f.root,
+            css$1g.root,
             `uui-size-${props.size || settings.statusIndicator.sizes.default}`,
             'uui-status_indicator',
             `uui-color-${props.color || 'neutral'}`,
@@ -1798,11 +1799,11 @@ const StatusIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
         React__namespace.default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
 });
 
-var css$1e = {"root":"-zhjHE"};
+var css$1f = {"root":"SwPEPA"};
 
 function applyCheckboxMods(mods) {
     return [
-        css$1e.root,
+        css$1f.root,
         `uui-size-${mods.size || settings.checkbox.sizes.default}`,
         'uui-control-mode-' + (mods.mode || 'form'),
         'uui-color-primary',
@@ -1816,11 +1817,11 @@ const applyUUICheckboxProps = (props) => {
 };
 const Checkbox = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$1d = {"root":"BndSCy"};
+var css$1e = {"root":"_0U1M0x"};
 
 function applyRadioInputMods(mods) {
     return [
-        css$1d.root,
+        css$1e.root,
         `uui-size-${mods.size || settings.radioInput.sizes.default}`,
         'uui-radio-input-container',
         'uui-color-primary',
@@ -1828,11 +1829,11 @@ function applyRadioInputMods(mods) {
 }
 const RadioInput = /* @__PURE__ */uuiCore.withMods(uuiComponents.RadioInput, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : settings.radioInput.icons.dotIcon }));
 
-var css$1c = {"root":"IwresO"};
+var css$1d = {"root":"ln8RhG"};
 
 function applySwitchMods(mods) {
     return [
-        css$1c.root,
+        css$1d.root,
         `uui-size-${mods.size || settings.switch.sizes.default}`,
         'uui-color-primary',
     ];
@@ -1852,7 +1853,7 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var textInputCss = {"root":"o2jUgK"};
+var textInputCss = {"root":"KRjCQq"};
 
 const DEFAULT_MODE$3 = EditMode.FORM;
 function applyTextInputMods(mods) {
@@ -1877,9 +1878,9 @@ const SearchInput = /* @__PURE__ */React__namespace.default.forwardRef((props, r
         } }));
 });
 
-var css$1b = {"root":"_4yz802"};
+var css$1c = {"root":"Lyhnkf"};
 
-const ControlGroup = /* @__PURE__ */uuiCore.withMods(uuiComponents.ControlGroup, () => [css$1b.root, 'uui-control-group']);
+const ControlGroup = /* @__PURE__ */uuiCore.withMods(uuiComponents.ControlGroup, () => [css$1c.root, 'uui-control-group']);
 
 function MultiSwitchComponent(props, ref) {
     return (React__namespace.createElement(ControlGroup, { ref: ref, rawProps: {
@@ -1893,13 +1894,13 @@ function MultiSwitchComponent(props, ref) {
 }
 const MultiSwitch = /* @__PURE__ */React__namespace.forwardRef(MultiSwitchComponent);
 
-var css$1a = {"root":"rD1EIe"};
+var css$1b = {"root":"_4w8wYQ"};
 
 const DEFAULT_MODE$2 = EditMode.FORM;
 function applyNumericInputMods(mods) {
     return [
         textInputCss.root,
-        css$1a.root,
+        css$1b.root,
         `uui-size-${mods.size || settings.numericInput.sizes.default}`,
         'uui-control-mode-' + (mods.mode || DEFAULT_MODE$2),
     ];
@@ -1913,12 +1914,12 @@ const NumericInput = /* @__PURE__ */uuiCore.withMods(uuiComponents.NumericInput,
     };
 });
 
-var css$19 = {"root":"hWjyQa"};
+var css$1a = {"root":"U1rBRE"};
 
 const DEFAULT_MODE$1 = EditMode.FORM;
 function applyTextAreaMods(mods) {
     return [
-        css$19.root,
+        css$1a.root,
         'uui-textarea',
         'uui-size-' + (mods.size || settings.textArea.sizes.default),
         'uui-control-mode-' + (mods.mode || DEFAULT_MODE$1),
@@ -1954,18 +1955,18 @@ function TREE_SHAKEABLE_INIT$1() {
     };
 }
 
-var css$18 = {"root":"_1xxWuz"};
+var css$19 = {"root":"b68Jga"};
 
 function applyDropdownContainerMods(mods) {
     return [
-        css$18.root,
+        css$19.root,
         mods.vPadding && `vPadding-${mods.vPadding}`,
         mods.padding && `padding-${mods.padding}`,
     ];
 }
 const DropdownContainer = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.DropdownContainer, applyDropdownContainerMods);
 
-var css$17 = {"root":"zhllax","timepicker-input":"xs2Q7P","timepickerInput":"xs2Q7P","ltr-always":"cMUitE","ltrAlways":"cMUitE"};
+var css$18 = {"root":"Jejfar","timepicker-input":"J8-s1Q","timepickerInput":"J8-s1Q","ltr-always":"_0zW2aO","ltrAlways":"_0zW2aO"};
 
 const uuiTimePicker = {
     container: 'uui-timepicker-container',
@@ -2004,8 +2005,8 @@ function TimePickerBody(props) {
         const minutesToSubtract = value.minute() % minutesStep === 0 ? minutesStep : value.minute() % minutesStep;
         onMinutesChange(value.subtract(minutesToSubtract, 'm').minute());
     };
-    return (React__namespace.createElement("div", { className: uuiCore.cx(css$17.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef, ...props.rawProps },
-        React__namespace.createElement("div", { className: css$17.ltrAlways },
+    return (React__namespace.createElement("div", { className: uuiCore.cx(css$18.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef, ...props.rawProps },
+        React__namespace.createElement("div", { className: css$18.ltrAlways },
             React__namespace.createElement("div", { className: uuiTimePicker.elementContainer },
                 React__namespace.createElement(uuiComponents.IconContainer, { size: 18, rawProps: { 'aria-label': 'Increment hours' }, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: () => onHoursChange(uuiDayjs.dayjs().set(props.value).add(1, 'h').hour()) }),
                 React__namespace.createElement(uuiComponents.NumericInput, { cx: uuiTimePicker.input, onValueChange: onHoursChange, value: +(uuiDayjs.dayjs()
@@ -2165,7 +2166,7 @@ function TimePickerComponent(props, ref) {
         }
     };
     const renderInput = (inputProps) => {
-        return (React__namespace.default.createElement(TextInput, { ...inputProps, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$17.root, css$17.timepickerInput, props.inputCx], value: state.inputValue, onValueChange: handleInputChange, onCancel: !props.disableClear && onClear, onKeyDown: onKeyDown, onFocus: handleFocus, onBlur: handleBlur, isDropdown: false, placeholder: props.placeholder ? props.placeholder : getFormat(), mode: props.mode || DEFAULT_MODE, rawProps: props.rawProps?.input, ref: (node) => {
+        return (React__namespace.default.createElement(TextInput, { ...inputProps, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$18.root, css$18.timepickerInput, props.inputCx], value: state.inputValue, onValueChange: handleInputChange, onCancel: !props.disableClear && onClear, onKeyDown: onKeyDown, onFocus: handleFocus, onBlur: handleBlur, isDropdown: false, placeholder: props.placeholder ? props.placeholder : getFormat(), mode: props.mode || DEFAULT_MODE, rawProps: props.rawProps?.input, ref: (node) => {
                 if (!node)
                     return;
                 targetRef.current = node;
@@ -2186,37 +2187,37 @@ function TimePickerComponent(props, ref) {
 }
 const TimePicker = /* @__PURE__ */React__namespace.default.forwardRef(TimePickerComponent);
 
-var css$16 = {"root":"PBiI6A"};
+var css$17 = {"root":"VTXQ9x"};
 
 function applyInputAddonMods() {
     return [
-        css$16.root,
+        css$17.root,
     ];
 }
 const InputAddon = /* @__PURE__ */uuiCore.withMods(uuiComponents.InputAddon, applyInputAddonMods);
 
-var css$15 = {"root":"BfHmZn"};
+var css$16 = {"root":"ab6Fwz"};
 
 function applySliderMods() {
-    return [css$15.root, 'uui-color-neutral'];
+    return [css$16.root, 'uui-color-neutral'];
 }
 const Slider = /* @__PURE__ */uuiCore.withMods(uuiComponents.Slider, applySliderMods);
 
-var css$14 = {"root":"-S9u2y"};
+var css$15 = {"root":"X2C5-k"};
 
 function applyTooltipMods(mods) {
     return [
-        css$14.root,
+        css$15.root,
         `uui-color-${mods.color || 'inverted'}`,
     ];
 }
 const Tooltip = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Tooltip, applyTooltipMods);
 
-var css$13 = {"root":"KybgXo","tooltip":"mQBZnf"};
+var css$14 = {"root":"LxrIV-","tooltip":"H-FvJp"};
 
 function applyRatingMods(mods) {
     return [
-        css$13.root,
+        css$14.root,
         `uui-size-${mods.size || settings.rating.sizes.default}`,
     ];
 }
@@ -2226,7 +2227,7 @@ const Rating = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Rating,
     Tooltip,
 }));
 
-var css$12 = {"drag-handle-wrapper":"hZXH74","dragHandleWrapper":"hZXH74","with-indent":"tSvayR","withIndent":"tSvayR","drag-handle":"Ogd3pd","dragHandle":"Ogd3pd","icon-container":"Yudulw","iconContainer":"Yudulw"};
+var css$13 = {"drag-handle-wrapper":"M3zKTO","dragHandleWrapper":"M3zKTO","with-indent":"kkaEYJ","withIndent":"kkaEYJ","drag-handle":"bytoUT","dragHandle":"bytoUT","icon-container":"c7g7SH","iconContainer":"c7g7SH"};
 
 function DataRowAddons(props) {
     const row = props.rowProps;
@@ -2243,8 +2244,8 @@ function DataRowAddons(props) {
         if (props.renderDragHandle) {
             return props.renderDragHandle({ rowProps: props.rowProps, eventHandlers: props.eventHandlers });
         }
-        return (React__namespace.default.createElement("div", { key: "dh", className: cx__default.default(css$12.dragHandleWrapper, row.indent > 0 && css$12.withIndent), style: { width: row.indent > 0 ? (getIndent() + getWidth()) : 0 }, ...props.eventHandlers },
-            React__namespace.default.createElement(uuiComponents.DragHandle, { cx: css$12.dragHandle })));
+        return (React__namespace.default.createElement("div", { key: "dh", className: cx__default.default(css$13.dragHandleWrapper, row.indent > 0 && css$13.withIndent), style: { width: row.indent > 0 ? (getIndent() + getWidth()) : 0 }, ...props.eventHandlers },
+            React__namespace.default.createElement(uuiComponents.DragHandle, { cx: css$13.dragHandle })));
     };
     const handleFold = (e) => {
         if (e.key === 'Enter') {
@@ -2259,7 +2260,7 @@ function DataRowAddons(props) {
                 'aria-label': row.isFolded ? 'Unfold' : 'Fold',
                 role: 'button',
             }, key: "icon", icon: settings.dataTable.icons.body.foldingIcon, cx: [
-                uuiCore.uuiElement.foldingArrow, uuiCore.uuiMarkers.clickable, css$12.iconContainer,
+                uuiCore.uuiElement.foldingArrow, uuiCore.uuiMarkers.clickable, css$13.iconContainer,
             ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), onKeyDown: handleFold, size: settings.dataTable.sizes.body.iconMap[props.size || settings.dataTable.sizes.body.row], tabIndex: props.tabIndex }))))));
 }
 
@@ -2270,12 +2271,12 @@ function VerticalTabButtonComponent(props, ref) {
         isActive: props.isActive,
     });
     const styles = [
-        css$1n.root,
+        css$1o.root,
         'uui-vertical-tab-button',
         `uui-size-${props.size || settings.verticalTabButton.sizes.default}`,
         isActive && uuiCore.uuiMod.active,
-        props.indent > 0 && css$1n.noLeftPadding,
-        !props.onClick && props.onFold && css$1n.onlyFoldable,
+        props.indent > 0 && css$1o.noLeftPadding,
+        !props.onClick && props.onFold && css$1o.onlyFoldable,
         ...getIconClass(props),
         props.cx,
     ];
@@ -2295,16 +2296,16 @@ function VerticalTabButtonComponent(props, ref) {
             'aria-selected': isActive,
             ...props.rawProps,
         }, cx: styles, ref: ref },
-        props.indent > 0 && (React__namespace.default.createElement("div", { key: "fold", className: uuiCore.cx(css$1n.foldingArea, props.onFold && uuiCore.uuiMarkers.clickable), style: { '--uui-folding-indent': `${props.indent - 1}` }, onClick: props.onFold }, props.isFoldable && (React__namespace.default.createElement(uuiComponents.IconContainer, { rawProps: {
+        props.indent > 0 && (React__namespace.default.createElement("div", { key: "fold", className: uuiCore.cx(css$1o.foldingArea, props.onFold && uuiCore.uuiMarkers.clickable), style: { '--uui-folding-indent': `${props.indent - 1}` }, onClick: props.onFold }, props.isFoldable && (React__namespace.default.createElement(uuiComponents.IconContainer, { rawProps: {
                 'aria-label': props.isFolded ? 'Unfold' : 'Fold',
                 role: 'button',
             }, key: "icon", icon: settings.verticalTabButton.icons.foldingIcon, cx: [
-                uuiCore.uuiElement.foldingArrow, css$1n.iconContainer,
+                uuiCore.uuiElement.foldingArrow, css$1o.iconContainer,
             ], rotate: props.isFolded ? '90ccw' : '0', size: settings.dataTable.sizes.body.iconMap[props.size || settings.dataTable.sizes.body.row] })))),
         props.icon && props.iconPosition !== 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
-        (props.caption || props.withNotify) && (React__namespace.default.createElement("div", { className: css$1n.captionWrapper },
+        (props.caption || props.withNotify) && (React__namespace.default.createElement("div", { className: css$1o.captionWrapper },
             props.caption && React__namespace.default.createElement("div", { className: uuiCore.cx(uuiCore.uuiElement.caption, `uui-vertical-tab-button-weight-${props.weight || settings.verticalTabButton.weight}`) }, props.caption),
-            props.withNotify && React__namespace.default.createElement("div", { className: css$1n.withNotify }))),
+            props.withNotify && React__namespace.default.createElement("div", { className: css$1o.withNotify }))),
         props.icon && props.iconPosition === 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         props.count !== undefined && props.count !== null && (React__namespace.default.createElement(CountIndicator, { color: "neutral", size: settings.verticalTabButton.sizes.countIndicatorMap[props.size || settings.verticalTabButton.sizes.default], caption: props.count })),
         props.isDropdown && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen })),
@@ -2313,17 +2314,17 @@ function VerticalTabButtonComponent(props, ref) {
 }
 const VerticalTabButton = /* @__PURE__ */React__namespace.default.forwardRef(VerticalTabButtonComponent);
 
-var css$11 = {"root":"y8-sZZ","main-path":"E1Gu4A","mainPath":"E1Gu4A","content-wrapper":"Ccq7zS","contentWrapper":"Ccq7zS","content":"UBuZ3S","action-wrapper":"tMzyji","actionWrapper":"tMzyji","icon-wrapper":"-BWk33","iconWrapper":"-BWk33","icon":"cseZ3d","close-icon":"eOSTWB","closeIcon":"eOSTWB"};
+var css$12 = {"root":"F3KZ66","main-path":"_5DmYws","mainPath":"_5DmYws","content-wrapper":"UrVcu8","contentWrapper":"UrVcu8","content":"_1ba8Yl","action-wrapper":"x5kZPO","actionWrapper":"x5kZPO","icon-wrapper":"E3DzHV","iconWrapper":"E3DzHV","icon":"WOWfpk","close-icon":"_8PRNic","closeIcon":"_8PRNic"};
 
-const Alert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("div", { role: "alert", ref: ref, className: cx__default.default('uui-alert', css$11.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
-    React__namespace.createElement("div", { className: css$11.mainPath },
-        React__namespace.createElement("div", { className: css$11.contentWrapper },
-            props.icon && (React__namespace.createElement("div", { className: css$11.iconWrapper },
-                React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon, cx: css$11.icon }))),
-            React__namespace.createElement("div", { className: css$11.content },
+const Alert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("div", { role: "alert", ref: ref, className: cx__default.default('uui-alert', css$12.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
+    React__namespace.createElement("div", { className: css$12.mainPath },
+        React__namespace.createElement("div", { className: css$12.contentWrapper },
+            props.icon && (React__namespace.createElement("div", { className: css$12.iconWrapper },
+                React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon, cx: css$12.icon }))),
+            React__namespace.createElement("div", { className: css$12.content },
                 props.children,
-                props.actions && (React__namespace.createElement("div", { className: css$11.actionWrapper }, props.actions.map((action) => (React__namespace.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$11.actionLink, size: settings.alert.sizes.actionMap[props.size || settings.alert.sizes.default] }))))))),
-        props.onClose && React__namespace.createElement(IconButton, { icon: settings.alert.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$11.closeIcon })))));
+                props.actions && (React__namespace.createElement("div", { className: css$12.actionWrapper }, props.actions.map((action) => (React__namespace.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$12.actionLink, size: settings.alert.sizes.actionMap[props.size || settings.alert.sizes.default] }))))))),
+        props.onClose && React__namespace.createElement(IconButton, { icon: settings.alert.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$12.closeIcon })))));
 const WarningAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, { icon: settings.alert.icons.warningIcon, color: "warning", ref: ref, ...props }));
 const SuccessAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, { icon: settings.alert.icons.successIcon, color: "success", ref: ref, ...props }));
 const HintAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, { icon: settings.alert.icons.infoIcon, color: "info", ref: ref, ...props }));
@@ -2331,7 +2332,7 @@ const ErrorAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => Re
 
 const Dropdown = /* @__PURE__ */uuiCore.withMods(uuiComponents.Dropdown);
 
-var css$10 = {"submenu-root-item-rtl":"-SXlFo","submenuRootItemRtl":"-SXlFo","icon-after":"Aw-soR","iconAfter":"Aw-soR","submenu-root-item":"GL65CC","submenuRootItem":"GL65CC","icon-check":"cTUiAV","iconCheck":"cTUiAV","splitter-root":"AXlotw","splitterRoot":"AXlotw","splitter":"-ZSUra","header-root":"nbHgvJ","headerRoot":"nbHgvJ","item-root":"kGjdoa","itemRoot":"kGjdoa","icon":"_0dj3P5","link":"MPm2rJ","indent":"-fB7EW","selected-mark":"kJ2s73","selectedMark":"kJ2s73"};
+var css$11 = {"submenu-root-item-rtl":"lCNKGP","submenuRootItemRtl":"lCNKGP","icon-after":"DbHR8Y","iconAfter":"DbHR8Y","submenu-root-item":"_4yTZIg","submenuRootItem":"_4yTZIg","icon-check":"-aLGB3","iconCheck":"-aLGB3","splitter-root":"JgOJy4","splitterRoot":"JgOJy4","splitter":"Z8SvLU","header-root":"_1IYVxv","headerRoot":"_1IYVxv","item-root":"_8VTbBO","itemRoot":"_8VTbBO","icon":"SSf8Ma","link":"O3IGlh","indent":"gXk8hW","selected-mark":"-BscHg","selectedMark":"-BscHg"};
 
 exports.IDropdownControlKeys = void 0;
 (function (IDropdownControlKeys) {
@@ -2405,29 +2406,29 @@ const DropdownMenuButton = /* @__PURE__ */React__namespace.default.forwardRef((p
     const getMenuButtonContent = () => {
         const isIconBefore = Boolean(icon && iconPosition !== 'right');
         const isIconAfter = Boolean(icon && iconPosition === 'right');
-        const iconElement = (React__namespace.default.createElement(IconButton, { icon: icon, color: isActive ? 'primary' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: uuiCore.cx(css$10.icon, iconPosition === 'right' ? css$10.iconAfter : css$10.iconBefore) }));
+        const iconElement = (React__namespace.default.createElement(IconButton, { icon: icon, color: isActive ? 'primary' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: uuiCore.cx(css$11.icon, iconPosition === 'right' ? css$11.iconAfter : css$11.iconBefore) }));
         return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
             isIconBefore && iconElement,
-            React__namespace.default.createElement(uuiComponents.Text, { cx: props.indent && css$10.indent }, caption),
+            React__namespace.default.createElement(uuiComponents.Text, { cx: props.indent && css$11.indent }, caption),
             isIconAfter && (React__namespace.default.createElement(React__namespace.default.Fragment, null,
                 React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
                 iconElement))));
     };
     const isAnchor = Boolean(link || href);
-    const itemClassNames = uuiCore.cx(props.cx, css$10.itemRoot, isDisabled && uuiCore.uuiMod.disabled, isActive && uuiCore.uuiMod.active, isOpen && uuiCore.uuiMod.opened, (!isDisabled && onClick) && uuiCore.uuiMarkers.clickable);
-    return isAnchor ? (React__namespace.default.createElement(uuiComponents.Anchor, { cx: uuiCore.cx(css$10.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0, ...props.rawProps }, onClick: handleClick, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__namespace.default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref, ...props.rawProps },
+    const itemClassNames = uuiCore.cx(props.cx, css$11.itemRoot, isDisabled && uuiCore.uuiMod.disabled, isActive && uuiCore.uuiMod.active, isOpen && uuiCore.uuiMod.opened, (!isDisabled && onClick) && uuiCore.uuiMarkers.clickable);
+    return isAnchor ? (React__namespace.default.createElement(uuiComponents.Anchor, { cx: uuiCore.cx(css$11.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0, ...props.rawProps }, onClick: handleClick, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__namespace.default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref, ...props.rawProps },
         getMenuButtonContent(),
         isSelected && (React__namespace.default.createElement(React__namespace.default.Fragment, null,
             React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
-            React__namespace.default.createElement(uuiComponents.IconContainer, { icon: settings.dropdownMenu.icons.acceptIcon, cx: css$10.selectedMark })))));
+            React__namespace.default.createElement(uuiComponents.IconContainer, { icon: settings.dropdownMenu.icons.acceptIcon, cx: css$11.selectedMark })))));
 });
 function DropdownMenuSplitter(props) {
-    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$10.splitterRoot) },
-        React__namespace.default.createElement("hr", { className: css$10.splitter })));
+    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$11.splitterRoot) },
+        React__namespace.default.createElement("hr", { className: css$11.splitter })));
 }
 function DropdownMenuHeader(props) {
-    return (React__namespace.default.createElement("div", { className: uuiCore.cx('uui-dropdown-menu-header', props.cx, css$10.headerRoot) },
-        React__namespace.default.createElement("span", { className: css$10.header }, props.caption)));
+    return (React__namespace.default.createElement("div", { className: uuiCore.cx('uui-dropdown-menu-header', props.cx, css$11.headerRoot) },
+        React__namespace.default.createElement("span", { className: css$11.header }, props.caption)));
 }
 function DropdownSubMenu(props) {
     const subMenuMiddleware = [
@@ -2442,7 +2443,7 @@ function DropdownSubMenu(props) {
         }),
     ];
     const isRtl = uuiCore.getDir() === 'rtl';
-    return (React__namespace.default.createElement(uuiComponents.Dropdown, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: isRtl ? 'left-start' : 'right-start', middleware: subMenuMiddleware, renderBody: (dropdownProps) => !props.isDisabled && (React__namespace.default.createElement(DropdownMenuBody, { closeOnKey: exports.IDropdownControlKeys.LEFT_ARROW, ...props, ...dropdownProps })), renderTarget: ({ toggleDropdownOpening, ...targetProps }) => (React__namespace.default.createElement(DropdownMenuButton, { cx: uuiCore.cx(isRtl ? css$10.submenuRootItemRtl : css$10.submenuRootItem), icon: settings.dropdownMenu.icons.dropdownIcon, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening, ...props, ...targetProps })) }));
+    return (React__namespace.default.createElement(uuiComponents.Dropdown, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: isRtl ? 'left-start' : 'right-start', middleware: subMenuMiddleware, renderBody: (dropdownProps) => !props.isDisabled && (React__namespace.default.createElement(DropdownMenuBody, { closeOnKey: exports.IDropdownControlKeys.LEFT_ARROW, ...props, ...dropdownProps })), renderTarget: ({ toggleDropdownOpening, ...targetProps }) => (React__namespace.default.createElement(DropdownMenuButton, { cx: uuiCore.cx(isRtl ? css$11.submenuRootItemRtl : css$11.submenuRootItem), icon: settings.dropdownMenu.icons.dropdownIcon, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening, ...props, ...targetProps })) }));
 }
 function DropdownMenuSwitchButton(props) {
     const context = React.useContext(uuiCore.UuiContext);
@@ -2465,29 +2466,29 @@ function DropdownMenuSwitchButton(props) {
             return;
         onHandleValueChange(!isSelected);
     };
-    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$10.itemRoot, isDisabled && uuiCore.uuiMod.disabled, (!isDisabled || onValueChange) && uuiCore.uuiMarkers.clickable), onClick: handleClick, role: "menuitem", onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 },
-        icon && React__namespace.default.createElement(uuiComponents.IconContainer, { icon: icon, cx: css$10.iconBefore }),
+    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$11.itemRoot, isDisabled && uuiCore.uuiMod.disabled, (!isDisabled || onValueChange) && uuiCore.uuiMarkers.clickable), onClick: handleClick, role: "menuitem", onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 },
+        icon && React__namespace.default.createElement(uuiComponents.IconContainer, { icon: icon, cx: css$11.iconBefore }),
         React__namespace.default.createElement(uuiComponents.Text, null, caption),
         React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
         React__namespace.default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange, ref: switchRef })));
 }
 
-var css$$ = {"root":"_7ym0Q1","mode-block":"mZZfmW","modeBlock":"mZZfmW","mode-inline":"ILmBGP","modeInline":"ILmBGP","padding-0":"mQI3xm","padding0":"mQI3xm","padding-6":"gBI21x","padding6":"gBI21x","padding-12":"n2bYZo","padding12":"n2bYZo","padding-18":"ufPX2E","padding18":"ufPX2E"};
+var css$10 = {"root":"_3BWR8V","mode-block":"VgRY6H","modeBlock":"VgRY6H","mode-inline":"_2In9-o","modeInline":"_2In9-o","padding-0":"wN1NJL","padding0":"wN1NJL","padding-6":"OnX-co","padding6":"OnX-co","padding-12":"_462b3T","padding12":"_462b3T","padding-18":"TjVSp8","padding18":"TjVSp8"};
 
 function applyAccordionMods(mods) {
     return [
-        css$$.root,
-        css$$[`mode-${mods.mode || 'block'}`],
-        mods.padding && css$$['padding-' + mods.padding],
+        css$10.root,
+        css$10[`mode-${mods.mode || 'block'}`],
+        mods.padding && css$10['padding-' + mods.padding],
     ];
 }
 const Accordion = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Accordion, applyAccordionMods, (mods) => ({
     dropdownIcon: mods.dropdownIcon !== null && settings.accordion.icons.dropdownIcon,
 }));
 
-var css$_ = {"root":"kBfmQo","align-items":"_0A4ApT","alignItems":"_0A4ApT","justify-content":"MQYnY7","justifyContent":"MQYnY7","border-top":"V3T823","borderTop":"V3T823","border-bottom":"l9pBWT","borderBottom":"l9pBWT","top-shadow":"ANDXxq","topShadow":"ANDXxq","padding":"tod-Y-","margin":"P9tAeR","vPadding":"nhJR-m","column-gap":"Zw4aJb","columnGap":"Zw4aJb","row-gap":"v5UPqo","rowGap":"v5UPqo","spacing":"hqzxt0"};
+var css$$ = {"root":"ZzFYHw","align-items":"e5oM79","alignItems":"e5oM79","justify-content":"TKkzHN","justifyContent":"TKkzHN","border-top":"QWm9IM","borderTop":"QWm9IM","border-bottom":"nQmU5w","borderBottom":"nQmU5w","top-shadow":"_6SB3Tq","topShadow":"_6SB3Tq","padding":"_9GyrzV","margin":"A8kAdL","vPadding":"FZXh4C","column-gap":"Ydt30Q","columnGap":"Ydt30Q","row-gap":"nPmDdl","rowGap":"nPmDdl","spacing":"YhHdZh"};
 
-const FlexCell = /* @__PURE__ */uuiCore.withMods(uuiComponents.FlexCell, () => [css$_.flexCell]);
+const FlexCell = /* @__PURE__ */uuiCore.withMods(uuiComponents.FlexCell, () => [css$$.flexCell]);
 
 const FlexRow = /* @__PURE__ */React.forwardRef((props, ref) => {
     if (process.env.NODE_ENV !== "production") {
@@ -2496,22 +2497,22 @@ const FlexRow = /* @__PURE__ */React.forwardRef((props, ref) => {
         }
     }
     const classNames = uuiCore.cx([
-        css$_.root,
+        css$$.root,
         'uui-flex-row',
         props.onClick && uuiCore.uuiMarkers.clickable,
         props.cx,
         props.size !== null && 'uui-size-' + (props.size || settings.flexRow.sizes.default),
-        props.alignItems && css$_.alignItems,
-        props.justifyContent && css$_.justifyContent,
-        props.padding && css$_.padding,
-        props.vPadding && css$_.vPadding,
-        props.margin && css$_.margin,
-        props.topShadow && css$_.topShadow,
-        props.borderBottom && css$_.borderBottom,
-        props.borderTop && css$_.borderTop,
-        props.columnGap && css$_.columnGap,
-        props.rowGap && css$_.rowGap,
-        props.spacing && css$_.spacing,
+        props.alignItems && css$$.alignItems,
+        props.justifyContent && css$$.justifyContent,
+        props.padding && css$$.padding,
+        props.vPadding && css$$.vPadding,
+        props.margin && css$$.margin,
+        props.topShadow && css$$.topShadow,
+        props.borderBottom && css$$.borderBottom,
+        props.borderTop && css$$.borderTop,
+        props.columnGap && css$$.columnGap,
+        props.rowGap && css$$.rowGap,
+        props.spacing && css$$.spacing,
         props.background && `uui-flex-row-bg-${props.background}`,
     ]);
     let alignItemsValue = props.alignItems;
@@ -2537,22 +2538,22 @@ const FlexRow = /* @__PURE__ */React.forwardRef((props, ref) => {
         } }, props.children));
 });
 
-var css$Z = {"root":"TuJfIF","margin-24":"Cwcy31","margin24":"Cwcy31","padding-12":"k7GOV-","padding12":"k7GOV-","padding-24":"nZ9A0H","padding24":"nZ9A0H","shadow":"V-n1gg","uui-surface-main":"KPnxB5","uuiSurfaceMain":"KPnxB5"};
+var css$_ = {"root":"-UoW3k","margin-24":"OHIitG","margin24":"OHIitG","padding-12":"_61-s5c","padding12":"_61-s5c","padding-24":"xDPpyd","padding24":"xDPpyd","shadow":"gPLiRY","uui-surface-main":"x7okAA","uuiSurfaceMain":"x7okAA"};
 
 const Panel = /* @__PURE__ */uuiCore.withMods(uuiComponents.VPanel, (props) => [
     'uui-panel',
-    css$Z.root,
-    props.shadow && css$Z.shadow,
-    props.margin && css$Z['margin-' + props.margin],
-    props.background && css$Z[`uui-${props.background}`],
+    css$_.root,
+    props.shadow && css$_.shadow,
+    props.margin && css$_['margin-' + props.margin],
+    props.background && css$_[`uui-${props.background}`],
 ]);
 
-var css$Y = {"root":"_6QFAQ6"};
+var css$Z = {"root":"ZtCRdf"};
 
 function applyLabeledInputMods(mods) {
     return [
         'uui-labeled-input',
-        css$Y.root,
+        css$Z.root,
         'uui-size-' + (mods.size || settings.labeledInput.sizes.default),
     ];
 }
@@ -2569,7 +2570,7 @@ function applyLabeledInputProps(props) {
 }
 const LabeledInput = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.LabeledInput, applyLabeledInputMods, applyLabeledInputProps);
 
-var css$X = {"root":"hosaSA"};
+var css$Y = {"root":"_3-ydMY"};
 
 function RadioGroup(props) {
     const direction = props.direction || 'vertical';
@@ -2578,13 +2579,13 @@ function RadioGroup(props) {
             props.onValueChange(newVal);
         }
     };
-    return (React__namespace.createElement("fieldset", { ref: props.forwardedRef, className: uuiCore.cx(css$X.root, uuiCore.directionMode[direction], props.cx), onFocus: props.onFocus, onBlur: props.onBlur, ...props.rawProps }, props.items.map((i) => {
+    return (React__namespace.createElement("fieldset", { ref: props.forwardedRef, className: uuiCore.cx(css$Y.root, uuiCore.directionMode[direction], props.cx), onFocus: props.onFocus, onBlur: props.onBlur, ...props.rawProps }, props.items.map((i) => {
         const { id, name, renderName, ...restItemProps } = i;
         return (React__namespace.createElement(RadioInput, { name: props.name, renderLabel: i.renderName ? i.renderName : () => i.name, value: props.value === i.id, onValueChange: () => handleChange(i.id), isDisabled: props.isDisabled || i.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, isRequired: props.isRequired, key: i.id.toString(), size: props.size || i.size, ...restItemProps }));
     })));
 }
 
-var css$W = {"root":"N728oL","viewport":"LFYBLp"};
+var css$X = {"root":"Xwxh0g","viewport":"rTDwU9"};
 
 var uuiScrollbars;
 (function (uuiScrollbars) {
@@ -2658,12 +2659,12 @@ const ScrollBars = /* @__PURE__ */React.forwardRef((props, ref) => {
             view: viewportRef.current,
         };
     }, []);
-    return (React__namespace.default.createElement("div", { ref: hostRef, className: cx__default.default(css$W.root, outerCx, 'uui-scroll-bars', overflowTopEffect === 'shadow' && uuiScrollbars.uuiShadowTop, overflowBottomEffect === 'shadow' && uuiScrollbars.uuiShadowBottom, overflowTopEffect === 'line' && uuiScrollbars.uuiLineTop, overflowBottomEffect === 'line' && uuiScrollbars.uuiLineBottom), ...rest, "data-overlayscrollbars-initialize": "" },
-        React__namespace.default.createElement("div", { className: css$W.viewport, "data-overlayscrollbars-contents": "", ref: (node) => { viewportRef.current = node; }, ...rawProps }, children)));
+    return (React__namespace.default.createElement("div", { ref: hostRef, className: cx__default.default(css$X.root, outerCx, 'uui-scroll-bars', overflowTopEffect === 'shadow' && uuiScrollbars.uuiShadowTop, overflowBottomEffect === 'shadow' && uuiScrollbars.uuiShadowBottom, overflowTopEffect === 'line' && uuiScrollbars.uuiLineTop, overflowBottomEffect === 'line' && uuiScrollbars.uuiLineBottom), ...rest, "data-overlayscrollbars-initialize": "" },
+        React__namespace.default.createElement("div", { className: css$X.viewport, "data-overlayscrollbars-contents": "", ref: (node) => { viewportRef.current = node; }, ...rawProps }, children)));
 });
 ScrollBars.displayName = 'ScrollBars';
 
-var css$V = {"scroll-container":"vyk4vm","scrollContainer":"vyk4vm","list-container":"_4LfZz2","listContainer":"_4LfZz2"};
+var css$W = {"scroll-container":"SdfZly","scrollContainer":"SdfZly","list-container":"te7TvO","listContainer":"te7TvO"};
 
 const VirtualList = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
     const { listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef, } = uuiCore.useVirtualList({
@@ -2679,7 +2680,7 @@ const VirtualList = /* @__PURE__ */React__namespace.default.forwardRef((props, r
     const [blockerInset, setBlockerInset] = React__namespace.default.useState(null);
     const renderRows = () => props.renderRows?.({
         listContainerRef, estimatedHeight, offsetY,
-    }) || (React__namespace.default.createElement("div", { className: css$V.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+    }) || (React__namespace.default.createElement("div", { className: css$W.listContainer, style: { minHeight: `${estimatedHeight}px` } },
         React__namespace.default.createElement("div", { ref: listContainerRef, role: props.role, style: { marginTop: offsetY } }, props.rows)));
     const scrollBarsRef = React__namespace.default.useCallback((scrollbars) => {
         if (!scrollbars?.view)
@@ -2705,7 +2706,7 @@ const VirtualList = /* @__PURE__ */React__namespace.default.forwardRef((props, r
             updateBlockerInset();
         }
     }, [props.isLoading, updateBlockerInset]);
-    return (React__namespace.default.createElement(ScrollBars, { cx: uuiCore.cx(css$V.scrollContainer, props.cx), onScroll: handleScroll, ref: scrollBarsRef, rawProps: rawProps, overflowTopEffect: props.overflowTopEffect, overflowBottomEffect: props.overflowBottomEffect, autoHide: props.isLoading ? 'scroll' : undefined },
+    return (React__namespace.default.createElement(ScrollBars, { cx: uuiCore.cx(css$W.scrollContainer, props.cx), onScroll: handleScroll, ref: scrollBarsRef, rawProps: rawProps, overflowTopEffect: props.overflowTopEffect, overflowBottomEffect: props.overflowBottomEffect, autoHide: props.isLoading ? 'scroll' : undefined },
         renderRows(),
         React__namespace.default.createElement(Blocker, { isEnabled: props.isLoading, inset: blockerInset })));
 });
@@ -2738,7 +2739,7 @@ function Tree(props) {
     return (React__namespace.createElement(VirtualList, { value: value, onValueChange: onValueChange, rowsCount: rowsCount, rows: renderedRows, cx: uuiCore.cx(propsCx), role: "tree" }));
 }
 
-var css$U = {"root":"c-RFxN"};
+var css$V = {"root":"RzJpW2"};
 
 function CheckboxGroup(props) {
     const currentValue = props.value || [];
@@ -2754,7 +2755,7 @@ function CheckboxGroup(props) {
         }
         props.onValueChange(newSelection);
     };
-    return (React__namespace.createElement("fieldset", { ref: props.forwardedRef, className: uuiCore.cx(css$U.root, uuiCore.directionMode[direction], props.cx), ...props.rawProps }, props.items.map((i) => {
+    return (React__namespace.createElement("fieldset", { ref: props.forwardedRef, className: uuiCore.cx(css$V.root, uuiCore.directionMode[direction], props.cx), ...props.rawProps }, props.items.map((i) => {
         const { id, name, renderName, ...restItemProps } = i;
         return (React__namespace.createElement(Checkbox, { renderLabel: i.renderName ? i.renderName : () => i.name, value: currentValue.indexOf(i.id) !== -1, onValueChange: (selected) => handleChange(selected, i.id), isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, isRequired: props.isRequired, key: i.id.toString(), size: props.size || i.size, ...restItemProps }));
     })));
@@ -2840,10 +2841,10 @@ const Tabs = /* @__PURE__ */React.forwardRef((props, ref) => {
 });
 Tabs.displayName = 'Tabs';
 
-var css$T = {"root":"vJUISY","modal-blocker":"_1FrNGk","modalBlocker":"_1FrNGk","animateModalBlocker":"yeonBH","modal":"dEOG-e","modal-footer":"HAPRNy","modalFooter":"HAPRNy","border-top":"hkV0VA","borderTop":"hkV0VA","modal-header":"b454X3","modalHeader":"b454X3","border-bottom":"gbrw-4","borderBottom":"gbrw-4"};
+var css$U = {"root":"JSAD9B","modal-blocker":"JJackx","modalBlocker":"JJackx","animateModalBlocker":"_9vVPON","modal":"Mk87hz","modal-footer":"R-dJ8k","modalFooter":"R-dJ8k","border-top":"TKGWqz","borderTop":"TKGWqz","modal-header":"mIph6H","modalHeader":"mIph6H","border-bottom":"kMw-NH","borderBottom":"kMw-NH"};
 
-const ModalBlocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalBlocker, () => [css$T.modalBlocker]);
-const ModalWindow = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalWindow, () => [css$T.root, css$T.modal], (props) => {
+const ModalBlocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalBlocker, () => [css$U.modalBlocker]);
+const ModalWindow = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalWindow, () => [css$U.root, css$U.modal], (props) => {
     const width = props.width;
     const height = props.height || 'auto';
     const maxHeight = uuiCore.isMobile() ? 'var(--uui-modals-mobile-max-height)' : (props.maxHeight || 'var(--uui-modals-max-height)');
@@ -2857,7 +2858,7 @@ const ModalWindow = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalWindow, (
     };
 });
 function ModalHeader(props) {
-    return (React__namespace.default.createElement("div", { className: cx__default.default(css$T.root, css$T.modalHeader, 'uui-modal-header', props.borderBottom && css$T.borderBottom, props.cx), ...props.rawProps, style: {
+    return (React__namespace.default.createElement("div", { className: cx__default.default(css$U.root, css$U.modalHeader, 'uui-modal-header', props.borderBottom && css$U.borderBottom, props.cx), ...props.rawProps, style: {
             ...props.rawProps?.style,
         } },
         props.title && (React__namespace.default.createElement("div", { className: cx__default.default('uui-modal-title', 'uui-typography') }, props.title)),
@@ -2867,7 +2868,7 @@ function ModalHeader(props) {
             React__namespace.default.createElement(IconButton, { rawProps: { 'aria-label': 'Close modal' }, icon: settings.modal.icons.closeIcon, onClick: props.onClose })))));
 }
 function ModalFooter(props) {
-    return (React__namespace.default.createElement("div", { className: cx__default.default(css$T.root, css$T.modalFooter, 'uui-modal-footer', props.borderTop && css$T.borderTop, props.cx), ...props.rawProps, style: {
+    return (React__namespace.default.createElement("div", { className: cx__default.default(css$U.root, css$U.modalFooter, 'uui-modal-footer', props.borderTop && css$U.borderTop, props.cx), ...props.rawProps, style: {
             ...props.rawProps?.style,
         } }, props.children));
 }
@@ -2913,6 +2914,12 @@ const TREE_SHAKEABLE_INIT = () => ({
     rangeDatePicker: {
         pickerPlaceholderFrom: 'From',
         pickerPlaceholderTo: 'To',
+        mobileModalTitle: 'Select date range',
+        mobileModalStartPlaceholder: 'Start',
+        mobileModalEndPlaceholder: 'End',
+        mobileModalCancel: 'Cancel',
+        mobileModalApply: 'Apply',
+        mobileModalClearAll: 'Clear all',
     },
     tables: {
         noResultsBlock: {
@@ -3033,7 +3040,7 @@ const TREE_SHAKEABLE_INIT = () => ({
 });
 const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
 
-var css$S = {"root":"_-4Cfjm","icon-wrapper":"DkWk0Z","iconWrapper":"DkWk0Z","action-wrapper":"INd3Dw","actionWrapper":"INd3Dw","close-icon":"ydTlc1","closeIcon":"ydTlc1","main-path":"IyGbbt","mainPath":"IyGbbt","content":"WQiAXv","close-wrapper":"evWKsT","closeWrapper":"evWKsT","clear-notifications":"KPFLgX","clearNotifications":"KPFLgX"};
+var css$T = {"root":"uAyETU","icon-wrapper":"CDXUHl","iconWrapper":"CDXUHl","action-wrapper":"TQXOiE","actionWrapper":"TQXOiE","close-icon":"Dq-1P7","closeIcon":"Dq-1P7","main-path":"LCwpd5","mainPath":"LCwpd5","content":"D-G4DM","close-wrapper":"rAH0in","closeWrapper":"rAH0in","clear-notifications":"RTUbX9","clearNotifications":"RTUbX9"};
 
 const NotificationCard = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
     const notificationCardNode = React__namespace.default.useRef(null);
@@ -3046,15 +3053,15 @@ const NotificationCard = /* @__PURE__ */React__namespace.default.forwardRef((pro
             notificationCardNode.current?.removeEventListener('mouseleave', props.refreshTimer);
         };
     }, []);
-    return (React__namespace.default.createElement("div", { role: "alert", className: cx__default.default('uui-notification_card', props.color && `uui-color-${props.color}`, css$S.root, props.cx), ref: notificationCardNode, ...props.rawProps },
-        React__namespace.default.createElement("div", { className: css$S.mainPath },
-            props.icon && (React__namespace.default.createElement("div", { className: css$S.iconWrapper },
+    return (React__namespace.default.createElement("div", { role: "alert", className: cx__default.default('uui-notification_card', props.color && `uui-color-${props.color}`, css$T.root, props.cx), ref: notificationCardNode, ...props.rawProps },
+        React__namespace.default.createElement("div", { className: css$T.mainPath },
+            props.icon && (React__namespace.default.createElement("div", { className: css$T.iconWrapper },
                 React__namespace.default.createElement(uuiComponents.IconContainer, { size: settings.notificationCard.sizes.icon, icon: props.icon }))),
-            React__namespace.default.createElement("div", { className: css$S.content },
+            React__namespace.default.createElement("div", { className: css$T.content },
                 props.children,
-                props.actions && (React__namespace.default.createElement("div", { className: css$S.actionWrapper }, props.actions.map((action) => (React__namespace.default.createElement(LinkButton, { key: action.name, caption: action.name, onClick: action.action, cx: css$S.actionLink, size: settings.notificationCard.sizes.action, rawProps: action.rawProps })))))),
-            props.onClose && (React__namespace.default.createElement("div", { className: cx__default.default(css$S.closeWrapper, 'uui-notification_card-close_icon') },
-                React__namespace.default.createElement(IconButton, { icon: settings.notificationCard.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$S.closeIcon }))))));
+                props.actions && (React__namespace.default.createElement("div", { className: css$T.actionWrapper }, props.actions.map((action) => (React__namespace.default.createElement(LinkButton, { key: action.name, caption: action.name, onClick: action.action, cx: css$T.actionLink, size: settings.notificationCard.sizes.action, rawProps: action.rawProps })))))),
+            props.onClose && (React__namespace.default.createElement("div", { className: cx__default.default(css$T.closeWrapper, 'uui-notification_card-close_icon') },
+                React__namespace.default.createElement(IconButton, { icon: settings.notificationCard.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$T.closeIcon }))))));
 });
 const WarningNotification = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, { icon: settings.notificationCard.icons.warningIcon, color: "warning", ...props, ref: ref, cx: props.cx })));
 const SuccessNotification = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, { icon: settings.notificationCard.icons.successIcon, color: "success", ...props, ref: ref, cx: props.cx })));
@@ -3062,11 +3069,11 @@ const HintNotification = /* @__PURE__ */React__namespace.default.forwardRef((pro
 const ErrorNotification = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, { icon: settings.notificationCard.icons.errorIcon, color: "error", ...props, ref: ref, cx: props.cx })));
 function ClearNotification() {
     const uuiCtx = uuiCore.useUuiContext();
-    return (React__namespace.default.createElement("div", { className: cx__default.default(css$S.clearNotifications, 'uui-clear-notifications') },
+    return (React__namespace.default.createElement("div", { className: cx__default.default(css$T.clearNotifications, 'uui-clear-notifications') },
         React__namespace.default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
 }
 
-var css$R = {"footer":"fxjZ3J"};
+var css$S = {"footer":"b02aEg"};
 
 class ConfirmationModal extends React__namespace.Component {
     render() {
@@ -3078,7 +3085,7 @@ class ConfirmationModal extends React__namespace.Component {
             React__namespace.createElement(ModalWindow, { width: 420 },
                 React__namespace.createElement(ModalHeader, { borderBottom: true, title: this.props.caption, onClose: () => this.props.abort() }),
                 React__namespace.createElement(ScrollBars, null, bodyContent),
-                React__namespace.createElement(ModalFooter, { cx: css$R.footer },
+                React__namespace.createElement(ModalFooter, { cx: css$S.footer },
                     this.props.hideCancelButton || (React__namespace.createElement(Button, { caption: i18n.form.modals.discardButton, onClick: () => this.props.success(false), fill: "outline", color: "secondary" })),
                     React__namespace.createElement(Button, { caption: i18n.form.modals.saveButton, onClick: () => this.props.success(true), color: "primary" })))));
     }
@@ -3098,7 +3105,7 @@ function Snackbar(props) {
         };
         items = [clearOperation].concat(items);
     }
-    return React__namespace.createElement(uuiComponents.Snackbar, { forwardedRef: props.forwardedRef, notifications: items });
+    return (React__namespace.createElement(uuiComponents.Snackbar, { forwardedRef: props.forwardedRef, notifications: items, zIndex: uuiCtx.uuiLayout.getTopOverlayZIndex() }));
 }
 /**
  *  https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
@@ -3108,9 +3115,10 @@ function useReliableForceUpdate() {
     return red[1];
 }
 
-var css$Q = {"root":"wUEcRD","container":"Hsf-Hn"};
+var css$R = {"root":"hN1h2-","container":"RtLbl7"};
 
 const defaultFormat = 'MMM D, YYYY';
+const defaultFormatShort = 'MMM D';
 const valueFormat = 'YYYY-MM-DD';
 const supportedDateFormats = (format) => {
     return [
@@ -3328,21 +3336,21 @@ function DatePickerHeader({ navIconLeft, navIconRight, value: { month, view }, o
     }, [view, month]);
     const disablePrev = view === 'YEAR_SELECTION' && !isYearWithinSoberRange(getPrevYearsList(month));
     const disableNext = view === 'YEAR_SELECTION' && !isYearWithinSoberRange(getNextYearsList(month));
-    return (React__namespace.createElement("div", { className: cx__default.default(css$Q.root, uuiHeader.container, cx__default.default) },
+    return (React__namespace.createElement("div", { className: cx__default.default(css$R.root, uuiHeader.container, cx__default.default) },
         React__namespace.createElement("header", { className: uuiHeader.headerNav },
             React__namespace.createElement(Button, { icon: navIconLeft || settings.datePicker.icons.body.prevIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconLeft, onClick: !isDisabled && (() => onLeftNavigationArrow()), isDisabled: disablePrev }),
             React__namespace.createElement(Button, { caption: title, fill: "ghost", cx: uuiHeader.navTitle, onClick: !isDisabled && (() => onCaptionClick(view)) }),
             React__namespace.createElement(Button, { icon: navIconRight || settings.datePicker.icons.body.nextIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
 }
 
-var css$P = {"root":"U9XqRW"};
+var css$Q = {"root":"tbz8qf"};
 
-function applyDateSelectionMods() {
-    return [css$P.root, `uui-size-${settings.datePicker.sizes.body}`];
+function applyDateSelectionMods(mods) {
+    return [css$Q.root, `uui-size-${mods.size ?? settings.datePicker.sizes.body}`];
 }
 const Calendar = /* @__PURE__ */uuiCore.withMods(uuiComponents.Calendar, applyDateSelectionMods);
 
-var css$O = {"root":"I6IzHT"};
+var css$P = {"root":"WlKPp-"};
 
 const uuiDatePickerBody = {
     wrapper: 'uui-datepicker-body-wrapper',
@@ -3361,7 +3369,7 @@ function DatePickerBodyComp(props, ref) {
     return (React__namespace.default.createElement(StatelessDatePickerBody, { ref: ref, ...props, month: month, view: view, onValueChange: onValueChange, onMonthChange: (m) => setMonth(m), onViewChange: (v) => setView(v) }));
 }
 const StatelessDatePickerBody = /* @__PURE__ */React.forwardRef(StatelessDatePickerBodyComp);
-function StatelessDatePickerBodyComp({ renderDay, isHoliday, cx: classes, filter, rawProps, value, month, view, onValueChange, onMonthChange, onViewChange, isDisabled, }, ref) {
+function StatelessDatePickerBodyComp({ renderDay, isHoliday, cx: classes, filter, rawProps, value, month, view, onValueChange, onMonthChange, onViewChange, isDisabled, size, }, ref) {
     const selectedDate = React.useMemo(() => uuiDayjs.dayjs(value), [value]);
     const onMonthClick = (newDate) => {
         onMonthChange(newDate);
@@ -3383,11 +3391,11 @@ function StatelessDatePickerBodyComp({ renderDay, isHoliday, cx: classes, filter
             case 'YEAR_SELECTION':
                 return (React__namespace.default.createElement(uuiComponents.YearSelection, { selectedDate: selectedDate, value: month, onValueChange: onYearClick }));
             case 'DAY_SELECTION':
-                return (React__namespace.default.createElement(Calendar, { value: selectedDate, month: month, onValueChange: onDayClick, filter: filter, renderDay: renderDay, isHoliday: isHoliday, isDisabled: isDisabled }));
+                return (React__namespace.default.createElement(Calendar, { value: selectedDate, month: month, onValueChange: onDayClick, filter: filter, renderDay: renderDay, isHoliday: isHoliday, isDisabled: isDisabled, size: size }));
         }
     };
-    return (React__namespace.default.createElement("div", { ref: ref, className: uuiCore.cx(uuiDatePickerBodyBase.container, `uui-size-${settings.datePicker.sizes.body}`, classes), ...rawProps },
-        React__namespace.default.createElement("div", { className: uuiCore.cx(css$O.root, uuiDatePickerBody.wrapper) },
+    return (React__namespace.default.createElement("div", { ref: ref, className: uuiCore.cx(uuiDatePickerBodyBase.container, `uui-size-${size ?? settings.datePicker.sizes.body}`, classes), ...rawProps },
+        React__namespace.default.createElement("div", { className: uuiCore.cx(css$P.root, uuiDatePickerBody.wrapper) },
             React__namespace.default.createElement(DatePickerHeader, { value: {
                     view,
                     month,
@@ -3469,9 +3477,9 @@ function DatePickerComponent(props, ref) {
 }
 const DatePicker = /* @__PURE__ */React__namespace.default.forwardRef(DatePickerComponent);
 
-var css$N = {"date-input":"zbGePZ","dateInput":"zbGePZ","root":"qkA0bQ","separator":"cwATGW"};
+var css$O = {"date-input":"LJM7Oa","dateInput":"LJM7Oa","root":"oJ0FTh","separator":"v88ehd"};
 
-const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isInvalid, isReadonly, size, disableClear, rawProps, value, inFocus, format, onValueChange, onFocusInput, onBlurInput, onClick, getPlaceholder, filter, onKeyDown, preventEmptyFromDate, preventEmptyToDate, id, cx: classes, }, ref) => {
+const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isInvalid, isReadonly, size, disableClear, rawProps, value, inFocus, format, onValueChange, onFocusInput, onBlurInput, onClick, getPlaceholder, filter, onKeyDown, onIconClick, preventEmptyFromDate, preventEmptyToDate, id, cx: classes, }, ref) => {
     const [inputValue, setInputValue] = React.useState(toCustomDateRangeFormat(value, format));
     React.useEffect(() => {
         setInputValue(toCustomDateRangeFormat(value, format));
@@ -3540,13 +3548,13 @@ const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isIn
         && ((value.from && !preventEmptyFromDate) || (value.to && !preventEmptyToDate));
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    React__namespace.default.createElement("div", { ref: ref, className: uuiCore.cx(`uui-size-${size || settings.rangeDatePicker.sizes.default}`, 'uui-range-date-picker', classes, css$N.root, isDisabled && uuiCore.uuiMod.disabled, isReadonly && uuiCore.uuiMod.readonly, isInvalid && uuiCore.uuiMod.invalid, inFocus && uuiCore.uuiMod.focus), onKeyDown: onKeyDown },
-        React__namespace.default.createElement(TextInput, { icon: settings.rangeDatePicker.icons.input.calendarIcon, cx: uuiCore.cx(css$N.dateInput, inFocus === 'from' && uuiCore.uuiMod.focus), size: size || settings.rangeDatePicker.sizes.default, placeholder: getPlaceholder ? getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: inputValue.from || undefined, onValueChange: (v) => onInputChange(v || '', 'from'), onFocus: (event) => handleFocus(event, 'from'), onBlur: (event) => handleBlur(event, 'from'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.from, onClick: onClick, onKeyDown: onInputKeyDown, id: id }),
-        React__namespace.default.createElement("div", { className: css$N.separator }),
-        React__namespace.default.createElement(TextInput, { cx: uuiCore.cx(css$N.dateInput, inFocus === 'to' && uuiCore.uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.rangeDatePicker.sizes.default, value: inputValue.to || undefined, icon: clearAllowed && ForwardRef$Q, iconPosition: "right", iconLabel: "Clear selected date range", onIconClick: onClear, 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 })));
+    React__namespace.default.createElement("div", { ref: ref, className: uuiCore.cx(`uui-size-${size || settings.rangeDatePicker.sizes.default}`, 'uui-range-date-picker', classes, css$O.root, isDisabled && uuiCore.uuiMod.disabled, isReadonly && uuiCore.uuiMod.readonly, isInvalid && uuiCore.uuiMod.invalid, inFocus && uuiCore.uuiMod.focus), onKeyDown: onKeyDown },
+        React__namespace.default.createElement(TextInput, { icon: settings.rangeDatePicker.icons.input.calendarIcon, cx: uuiCore.cx(css$O.dateInput, inFocus === 'from' && uuiCore.uuiMod.focus), size: size || settings.rangeDatePicker.sizes.default, placeholder: getPlaceholder ? getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: inputValue.from || undefined, onValueChange: (v) => onInputChange(v || '', 'from'), onFocus: (event) => handleFocus(event, 'from'), onBlur: (event) => handleBlur(event, 'from'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.from, onClick: onClick, onIconClick: onIconClick, onKeyDown: onInputKeyDown, id: id }),
+        React__namespace.default.createElement("div", { className: css$O.separator }),
+        React__namespace.default.createElement(TextInput, { cx: uuiCore.cx(css$O.dateInput, inFocus === 'to' && uuiCore.uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.rangeDatePicker.sizes.default, value: inputValue.to || undefined, icon: clearAllowed && ForwardRef$Q, iconPosition: "right", iconLabel: "Clear selected date range", onIconClick: onClear, 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$M = {"root":"tJFWNa"};
+var css$N = {"root":"OSm-QX"};
 
 const uuiPresets = {
     container: 'uui-presets-container',
@@ -3561,12 +3569,14 @@ const getPresets = (presets) => {
     })).sort((a, b) => a.order - b.order);
 };
 function CalendarPresets(props) {
-    return (React__namespace.createElement("div", { ref: props.forwardedRef, className: uuiCore.cx(uuiPresets.container, css$M.root, props.cx), ...props.rawProps },
+    const isMobileView = uuiCore.isMobile();
+    const presetSize = isMobileView ? settings.rangeDatePicker.sizes.mobilePreset : settings.rangeDatePicker.sizes.preset;
+    return (React__namespace.createElement("div", { ref: props.forwardedRef, className: uuiCore.cx(uuiPresets.container, css$N.root, props.cx), ...props.rawProps },
         React__namespace.createElement("div", { className: uuiPresets.header }, "Presets"),
-        getPresets(props.presets).map((item) => (React__namespace.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: settings.rangeDatePicker.sizes.preset })))));
+        getPresets(props.presets).map((item) => (React__namespace.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: presetSize })))));
 }
 
-var css$L = {"root":"KfhmE7","container":"_6EhKm5","day-selection":"_2BhQNw","daySelection":"_2BhQNw","from-picker":"jWhtwQ","fromPicker":"jWhtwQ","to-picker":"ZkHpUy","toPicker":"ZkHpUy","bodes-wrapper":"bpnimp","bodesWrapper":"bpnimp","blocker":"_3uKj40"};
+var css$M = {"root":"quKELS","container":"mHDTX8","day-selection":"_4k5Pkb","daySelection":"_4k5Pkb","mobile":"I9JF2s","from-picker":"gO-3MU","fromPicker":"gO-3MU","to-picker":"ooI5Mq","toPicker":"ooI5Mq","bodes-wrapper":"FT8KJL","bodesWrapper":"FT8KJL","blocker":"YWr-df"};
 
 const uuiRangeDatePickerBody = {
     inRange: 'uui-range-datepicker-in-range',
@@ -3647,9 +3657,14 @@ function RangeDatePickerBodyComp(props, ref) {
     const selectedDate = _selectedDate || defaultRangeValue; // also handles null in comparison to default value
     const [view, setView] = React.useState('DAY_SELECTION');
     const [disabledPanel, setDisabledPanel] = React.useState(null);
-    const [month, setMonth] = React.useState(() => {
-        return getDisplayedMonth(selectedDate, inFocus, initialViewMonth);
-    });
+    const [month, setMonth] = React.useState(() => getDisplayedMonth(selectedDate, inFocus, initialViewMonth));
+    const isMobileView = uuiCore.isMobile();
+    React.useEffect(() => {
+        if (isMobileView && selectedDate[inFocus]) {
+            setMonth(getDisplayedMonth(selectedDate, inFocus, initialViewMonth));
+            setView('DAY_SELECTION');
+        }
+    }, [selectedDate, inFocus, initialViewMonth]);
     const getRange = (newValue) => {
         if (!filter || filter(uuiDayjs.dayjs(newValue))) {
             if (inFocus === 'from') {
@@ -3696,7 +3711,7 @@ function RangeDatePickerBodyComp(props, ref) {
     };
     const renderPresets = (presets) => {
         return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
-            React__namespace.default.createElement("div", { className: uuiRangeDatePickerBody.separator }),
+            !isMobileView && React__namespace.default.createElement("div", { className: uuiRangeDatePickerBody.separator }),
             React__namespace.default.createElement(CalendarPresets, { onPresetSet: (presetVal) => {
                     // enable day if smth other were selected
                     setView('DAY_SELECTION');
@@ -3713,35 +3728,37 @@ function RangeDatePickerBodyComp(props, ref) {
     };
     uuiCore.useLayoutEffectSafeForSsr(() => {
         const monthToSet = getDisplayedMonth(selectedDate, inFocus, initialViewMonth);
-        // To avoid re-rendering the body if the current month being displayed is equal to or greater than 1
-        const shouldNotIgnoreUpdate = !(uuiDayjs.dayjs(month).isSame(monthToSet, 'month') || uuiDayjs.dayjs(month).add(1, 'month').isSame(monthToSet, 'month'));
+        // Desktop: sync when displayed month differs from left or right panel anchor. Mobile: single month only.
+        const shouldNotIgnoreUpdate = isMobileView
+            ? !uuiDayjs.dayjs(month).isSame(monthToSet, 'month')
+            : !(uuiDayjs.dayjs(month).isSame(monthToSet, 'month') || uuiDayjs.dayjs(month).add(1, 'month').isSame(monthToSet, 'month'));
         if (shouldNotIgnoreUpdate) {
             setMonth(monthToSet);
         }
     }, [selectedDate]);
-    return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default(css$L.root, uuiDatePickerBodyBase.container, props.cx), ...props.rawProps, "aria-multiselectable": "true" },
-        React__namespace.default.createElement(FlexRow, { cx: [view === 'DAY_SELECTION' && css$L.daySelection, css$L.container], alignItems: "top" },
-            React__namespace.default.createElement(FlexCell, { width: "auto" },
-                React__namespace.default.createElement(FlexRow, null,
-                    React__namespace.default.createElement(FlexRow, { cx: css$L.bodesWrapper, alignItems: "top" },
-                        React__namespace.default.createElement(StatelessDatePickerBody, { key: "date-picker-body-left", cx: cx__default.default(css$L.fromPicker), ...from, onValueChange: (v) => onBodyValueChange(v), onMonthChange: (m) => {
+    return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default(css$M.root, uuiDatePickerBodyBase.container, props.cx), ...props.rawProps, "aria-multiselectable": "true" },
+        React__namespace.default.createElement(FlexRow, { cx: [view === 'DAY_SELECTION' && css$M.daySelection, isMobileView && css$M.mobile, css$M.container], alignItems: "top" },
+            React__namespace.default.createElement(FlexCell, { width: "auto", grow: 1 },
+                React__namespace.default.createElement(FlexRow, { alignItems: isMobileView ? 'stretch' : undefined },
+                    React__namespace.default.createElement(FlexRow, { cx: css$M.bodesWrapper, alignItems: "top" },
+                        React__namespace.default.createElement(StatelessDatePickerBody, { key: "date-picker-body-left", cx: cx__default.default(css$M.fromPicker), ...from, onValueChange: (v) => onBodyValueChange(v), onMonthChange: (m) => {
                                 setMonth(m);
                             }, onViewChange: (v) => {
                                 setView(v);
                                 setDisabledPanel(v !== 'DAY_SELECTION' ? 'right' : null);
-                            }, filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay || renderDay, isDisabled: disabledPanel === 'left' }),
-                        React__namespace.default.createElement(StatelessDatePickerBody, { key: "date-picker-body-right", cx: cx__default.default(css$L.toPicker), ...to, onValueChange: (v) => onBodyValueChange(v), onMonthChange: (m) => {
+                            }, filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay || renderDay, isDisabled: disabledPanel === 'left', size: isMobileView ? '36' : undefined }),
+                        !isMobileView && (React__namespace.default.createElement(StatelessDatePickerBody, { key: "date-picker-body-right", cx: cx__default.default(css$M.toPicker), ...to, onValueChange: (v) => onBodyValueChange(v), onMonthChange: (m) => {
                                 setMonth(m.subtract(1, 'month'));
                             }, onViewChange: (v) => {
                                 setView(v);
                                 setDisabledPanel(v !== 'DAY_SELECTION' ? 'left' : null);
-                            }, filter: props.filter, renderDay: props.renderDay || renderDay, isHoliday: props.isHoliday, isDisabled: disabledPanel === 'right' }),
-                        view !== 'DAY_SELECTION' && (React__namespace.default.createElement("div", { style: {
+                            }, filter: props.filter, renderDay: props.renderDay || renderDay, isHoliday: props.isHoliday, isDisabled: disabledPanel === 'right' })),
+                        !isMobileView && view !== 'DAY_SELECTION' && (React__namespace.default.createElement("div", { style: {
                                 left: disabledPanel === 'right' ? '50%' : undefined,
                                 right: disabledPanel === 'left' ? '50%' : undefined,
-                            }, className: css$L.blocker }))),
+                            }, className: css$M.blocker }))),
                     props.presets && renderPresets(props.presets)),
-                props.renderFooter && props.renderFooter()))));
+                props.renderFooter && (React__namespace.default.createElement("div", { className: "uui-range-datepicker-body-footer" }, props.renderFooter()))))));
 }
 const getDayCX = ({ inRange, isFirst, isLast }) => {
     return [
@@ -3768,7 +3785,48 @@ const getDayState = (day, selectedDate) => {
     };
 };
 
-var css$K = {"dropdown-container":"EBaWD4","dropdownContainer":"EBaWD4"};
+var css$L = {"root":"ofLu95","modal-title":"KLaTx7","modalTitle":"KLaTx7","range-selector":"HS8DO1","rangeSelector":"HS8DO1","range-selector-button":"Id19KM","rangeSelectorButton":"Id19KM","header-range-separator":"udkYjO","headerRangeSeparator":"udkYjO","body":"_6L67of"};
+
+function RangeDatePickerModal({ success, abort, isActive, zIndex, key, pickerProps, initialValue, }) {
+    const [modalValue, setModalValue] = React.useState(initialValue);
+    const [inFocus, setInFocus] = React.useState(pickerProps.initialInFocus ?? 'from');
+    const onModalBodyValueChange = (newValue) => {
+        setInFocus(newValue.inFocus ?? inFocus);
+        setModalValue(newValue.selectedDate);
+    };
+    const onClearAll = React.useCallback(() => {
+        setModalValue((prevValue) => ({
+            from: pickerProps.preventEmptyFromDate ? prevValue.from : null,
+            to: pickerProps.preventEmptyToDate ? prevValue.to : null,
+        }));
+    }, [pickerProps.preventEmptyFromDate, pickerProps.preventEmptyToDate]);
+    const getDateButtonCaption = (date, placeholder) => {
+        return date ? toCustomDateFormat(date, defaultFormatShort) : placeholder;
+    };
+    const startDateButtonCaption = React.useMemo(() => getDateButtonCaption(modalValue?.from ?? null, i18n.rangeDatePicker.mobileModalStartPlaceholder), [modalValue?.from]);
+    const endDateButtonCaption = React.useMemo(() => getDateButtonCaption(modalValue?.to ?? null, i18n.rangeDatePicker.mobileModalEndPlaceholder), [modalValue?.to]);
+    const hideClearButton = pickerProps.disableClear || (pickerProps.preventEmptyToDate && pickerProps.preventEmptyFromDate);
+    const renderModalHeaderTitle = () => {
+        return (React__namespace.default.createElement(FlexCell, null,
+            React__namespace.default.createElement("h4", { className: css$L.modalTitle }, i18n.rangeDatePicker.mobileModalTitle),
+            React__namespace.default.createElement("h2", { className: css$L.rangeSelector },
+                React__namespace.default.createElement(LinkButton, { cx: css$L.rangeSelectorButton, color: inFocus === 'from' ? 'primary' : 'secondary', size: "36", caption: startDateButtonCaption, onClick: () => setInFocus('from') }),
+                React__namespace.default.createElement("span", { className: css$L.headerRangeSeparator }, " \u2013 "),
+                React__namespace.default.createElement(LinkButton, { cx: css$L.rangeSelectorButton, color: inFocus === 'to' ? 'primary' : 'secondary', size: "36", caption: endDateButtonCaption, onClick: () => setInFocus('to') }))));
+    };
+    return (React__namespace.default.createElement(ModalBlocker, { key: key, isActive: isActive, zIndex: zIndex, success: () => success(modalValue), abort: abort },
+        React__namespace.default.createElement(ModalWindow, { cx: css$L.root },
+            React__namespace.default.createElement(ModalHeader, { title: renderModalHeaderTitle(), borderBottom: true, onClose: abort }),
+            React__namespace.default.createElement(FlexRow, { cx: css$L.body, alignItems: "stretch" },
+                React__namespace.default.createElement(RangeDatePickerBody, { cx: cx__default.default(pickerProps.bodyCx), value: { selectedDate: modalValue, inFocus }, onValueChange: onModalBodyValueChange, filter: pickerProps.filter, presets: pickerProps.presets, renderDay: pickerProps.renderDay, renderFooter: () => pickerProps.renderFooter?.(modalValue), isHoliday: pickerProps.isHoliday, rawProps: pickerProps.rawProps?.body, preventEmptyToDate: pickerProps.preventEmptyToDate, preventEmptyFromDate: pickerProps.preventEmptyFromDate, initialViewMonth: pickerProps.initialViewMonth })),
+            React__namespace.default.createElement(ModalFooter, { borderTop: true },
+                !hideClearButton && React__namespace.default.createElement(Button, { fill: "ghost", color: "primary", caption: i18n.rangeDatePicker.mobileModalClearAll, onClick: onClearAll, icon: ForwardRef$D }),
+                React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
+                React__namespace.default.createElement(Button, { fill: "outline", color: "secondary", caption: i18n.rangeDatePicker.mobileModalCancel, onClick: abort }),
+                React__namespace.default.createElement(Button, { color: "primary", caption: i18n.rangeDatePicker.mobileModalApply, onClick: () => success(modalValue) })))));
+}
+
+var css$K = {"dropdown-container":"EYK-1S","dropdownContainer":"EYK-1S"};
 
 function RangeDatePickerComponent(props, ref) {
     const { value: _value, format = defaultFormat, size = settings.rangeDatePicker.sizes.default } = props;
@@ -3776,7 +3834,8 @@ function RangeDatePickerComponent(props, ref) {
     const context = uuiCore.useUuiContext();
     const [isOpen, setIsOpen] = React.useState(false);
     const [inFocus, setInFocus] = React.useState(null);
-    const targetRef = React__namespace.default.useRef(null);
+    const targetRef = React.useRef(null);
+    const isMobileView = uuiCore.isMobile();
     React.useImperativeHandle(ref, () => targetRef.current);
     const onValueChange = (newValue) => {
         const fromChanged = value?.from !== newValue?.from;
@@ -3811,32 +3870,68 @@ function RangeDatePickerComponent(props, ref) {
             onOpenChange(false);
         }
     };
-    const renderBody = (renderProps) => {
-        return (React__namespace.default.createElement(DropdownContainer, { ...renderProps, cx: cx__default.default(css$K.dropdownContainer), shards: [targetRef], returnFocus: true },
-            React__namespace.default.createElement(FlexRow, null,
-                React__namespace.default.createElement(RangeDatePickerBody, { cx: cx__default.default(props.bodyCx), value: {
-                        selectedDate: _value,
-                        inFocus,
-                    }, onValueChange: onBodyValueChange, filter: props.filter, presets: props.presets, renderDay: props.renderDay, renderFooter: () => {
-                        return props.renderFooter?.(value);
-                    }, isHoliday: props.isHoliday, rawProps: props.rawProps?.body, preventEmptyToDate: props.preventEmptyToDate, preventEmptyFromDate: props.preventEmptyFromDate, initialViewMonth: props.initialViewMonth }))));
-    };
     const handleEscape = (e) => {
         if (e.key === 'Escape' && isOpen) {
             e.preventDefault();
             onOpenChange(false);
         }
     };
-    return (React__namespace.default.createElement(uuiComponents.Dropdown, { renderTarget: (renderProps) => {
-            return props.renderTarget?.(renderProps) || (React__namespace.default.createElement(RangeDatePickerInput, { id: props.id, ref: (node) => { renderProps.ref(node); targetRef.current = node; }, cx: props.inputCx, onClick: () => renderProps.toggleDropdownOpening(true), isDisabled: props.isDisabled, isInvalid: props.isInvalid, isReadonly: props.isReadonly, size: size, getPlaceholder: props.getPlaceholder, disableClear: props.disableClear, rawProps: props.rawProps, inFocus: inFocus, value: value, format: format, filter: props.filter, onValueChange: onValueChange, onFocusInput: (e, type) => {
-                    props.onFocus?.(e, type);
-                    setInFocus(type);
-                }, onBlurInput: (e, type) => { props.onBlur?.(e, type); !isOpen && setInFocus(null); }, onKeyDown: handleEscape, preventEmptyFromDate: props.preventEmptyFromDate, preventEmptyToDate: props.preventEmptyToDate }));
-        }, renderBody: (renderProps) => renderBody(renderProps), onValueChange: (v) => onOpenChange(v), value: isOpen, middleware: [react.offset(6)], placement: props.placement, ref: ref }));
+    const openModal = () => {
+        if (props.isDisabled || props.isReadonly)
+            return;
+        const valueBeforeOpen = { ...value };
+        props.onOpenChange?.(true);
+        context.uuiModals.show((modalProps) => (React__namespace.default.createElement(RangeDatePickerModal, { ...modalProps, pickerProps: { ...props, initialInFocus: inFocus }, initialValue: valueBeforeOpen })))
+            .then((result) => {
+            if (result) {
+                onValueChange(result);
+            }
+        })
+            .catch(() => {
+            onValueChange(valueBeforeOpen);
+        })
+            .finally(() => {
+            props.onOpenChange?.(false);
+        });
+    };
+    const onInputClick = (dropdownRenderProps) => {
+        if (isMobileView) {
+            openModal();
+        }
+        else {
+            dropdownRenderProps?.toggleDropdownOpening?.(true);
+        }
+    };
+    const renderInput = (dropdownRenderProps) => (React__namespace.default.createElement(RangeDatePickerInput, { id: props.id, ref: (node) => {
+            dropdownRenderProps?.ref?.(node);
+            targetRef.current = node;
+        }, cx: props.inputCx, onClick: () => onInputClick(dropdownRenderProps), isDisabled: props.isDisabled, isInvalid: props.isInvalid, isReadonly: props.isReadonly, size: size, getPlaceholder: props.getPlaceholder, disableClear: props.disableClear, rawProps: props.rawProps, inFocus: inFocus, value: value, format: format, filter: props.filter, onValueChange: onValueChange, onFocusInput: (e, type) => {
+            props.onFocus?.(e, type);
+            setInFocus(type);
+        }, onBlurInput: (e, type) => {
+            props.onBlur?.(e, type);
+            (!isOpen || isMobileView) && setInFocus(null);
+        }, onKeyDown: !isMobileView ? handleEscape : undefined, preventEmptyFromDate: props.preventEmptyFromDate, preventEmptyToDate: props.preventEmptyToDate }));
+    if (isMobileView) {
+        const mobileTogglerProps = {
+            isOpen: false,
+            toggleDropdownOpening: openModal,
+            onClick: openModal,
+            ref: (node) => {
+                targetRef.current = node;
+            },
+        };
+        const customTarget = props.renderTarget?.(mobileTogglerProps);
+        return (React__namespace.default.isValidElement(customTarget) ? customTarget : renderInput());
+    }
+    const renderBody = (renderProps) => (React__namespace.default.createElement(DropdownContainer, { ...renderProps, cx: css$K.dropdownContainer, shards: [targetRef], returnFocus: true },
+        React__namespace.default.createElement(FlexRow, null,
+            React__namespace.default.createElement(RangeDatePickerBody, { cx: cx__default.default(props.bodyCx), value: { selectedDate: value, inFocus }, onValueChange: onBodyValueChange, filter: props.filter, presets: props.presets, renderDay: props.renderDay, renderFooter: () => props.renderFooter?.(value), isHoliday: props.isHoliday, rawProps: props.rawProps?.body, preventEmptyToDate: props.preventEmptyToDate, preventEmptyFromDate: props.preventEmptyFromDate, initialViewMonth: props.initialViewMonth }))));
+    return (React__namespace.default.createElement(uuiComponents.Dropdown, { renderTarget: (rp) => props.renderTarget?.(rp) || renderInput(rp), renderBody: renderBody, onValueChange: onOpenChange, value: isOpen, middleware: [react.offset(6)], placement: props.placement, ref: ref }));
 }
 const RangeDatePicker = /* @__PURE__ */React__namespace.default.forwardRef(RangeDatePickerComponent);
 
-var css$J = {"root":"_8mTpTX","blocker":"RRjkSj","marker":"nmLqMg","top":"b21LQG","bottom":"-elVju","left":"_4N4xvg","right":"n6QF1r","inside":"_5BsENF"};
+var css$J = {"root":"Dfbxpq","blocker":"iM-TUI","marker":"ALoITO","top":"ndsWjm","bottom":"yOapOE","left":"KXItUP","right":"tW9opS","inside":"qJ4vv-"};
 
 function DropMarker(props) {
     return props.isDndInProgress
@@ -3851,9 +3946,9 @@ function DropMarker(props) {
         : null;
 }
 
-var css$I = {"root":"DwPHmh","search-wrapper":"OjrP2d","searchWrapper":"OjrP2d","no-data":"TpcuwJ","noData":"TpcuwJ","empty-status-announcer":"qIUtil","emptyStatusAnnouncer":"qIUtil"};
+var css$I = {"root":"_39q9e9","search-wrapper":"dX2YHp","searchWrapper":"dX2YHp","no-data":"fcXSIW","noData":"fcXSIW","empty-status-announcer":"lP-Mnc","emptyStatusAnnouncer":"lP-Mnc"};
 
-var css$H = {"picker-row":"aQsjTG","pickerRow":"aQsjTG","align-widgets-top":"xjaj4p","alignWidgetsTop":"xjaj4p","row-content":"wIE0xi","rowContent":"wIE0xi","align-widgets-center":"hXejLh","alignWidgetsCenter":"hXejLh","icon-container":"a3BR0j","iconContainer":"a3BR0j","content-wrapper":"Cz7JO-","contentWrapper":"Cz7JO-","icon-wrapper":"TsnJWk","iconWrapper":"TsnJWk","icon-default":"_4Jirf9","iconDefault":"_4Jirf9","selected-mark":"_-7iz-1","selectedMark":"_-7iz-1"};
+var css$H = {"picker-row":"t7io2b","pickerRow":"t7io2b","align-widgets-top":"pxo8lS","alignWidgetsTop":"pxo8lS","row-content":"Tafdsu","rowContent":"Tafdsu","align-widgets-center":"_0Itoxp","alignWidgetsCenter":"_0Itoxp","icon-container":"-yfEOK","iconContainer":"-yfEOK","content-wrapper":"Or-gtc","contentWrapper":"Or-gtc","icon-wrapper":"eULv4N","iconWrapper":"eULv4N","icon-default":"Rzmaw4","iconDefault":"Rzmaw4","selected-mark":"aifwTi","selectedMark":"aifwTi"};
 
 const mergeHighlightRanges = (ranges) => {
     const mergedRanges = [];
@@ -3920,7 +4015,7 @@ const getHighlightedSearchMatches = (str, search) => {
     return getDecoratedText(str, ranges);
 };
 
-var css$G = {"root":"xK-3QQ","column-gap":"_8LaI2z","columnGap":"_8LaI2z","title":"awT96p","subtitle":"CgOIQs","disabled":"_3OrgEX","multiline":"_01ElBj"};
+var css$G = {"root":"cZj8GS","column-gap":"Sd-I4v","columnGap":"Sd-I4v","title":"_4EaSEw","subtitle":"rWeA7s","disabled":"nkv6Le","multiline":"_2AOZ5X"};
 
 function PickerItem(props) {
     const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, } = props;
@@ -4146,7 +4241,7 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = /* @__PURE__ */React__namespace.default.memo(DataPickerFooterImpl);
 
-var css$F = {"header":"_3pafpm","title":"X-mCig","close":"O1kxO5"};
+var css$F = {"header":"_4mRBIx","title":"w9ty5M","close":"_7TgPdH"};
 
 const DataPickerMobileHeaderImpl = (props) => {
     const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
@@ -4156,7 +4251,7 @@ const DataPickerMobileHeaderImpl = (props) => {
 };
 const DataPickerMobileHeader = /* @__PURE__ */React__namespace.default.memo(DataPickerMobileHeaderImpl);
 
-var css$E = {"done":"C-hjqE","container":"qfSqGc"};
+var css$E = {"done":"d-8x8E","container":"c5Hc5y"};
 
 const PickerBodyMobileView = (props) => {
     const isMobileView = uuiCore.isMobile();
@@ -4168,7 +4263,7 @@ const PickerBodyMobileView = (props) => {
         isMobileView && (React__namespace.default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => props.onClose?.(), cx: css$E.done, size: settings.pickerInput.sizes.body.mobileFooterLinkButton }))));
 };
 
-var css$D = {"sub-header-wrapper":"VB-vMc","subHeaderWrapper":"VB-vMc","switch":"tcNMre","search":"_3jEP3G","no-found-modal-container":"BBODB5","noFoundModalContainer":"BBODB5","no-found-modal-container-icon":"U4kWfu","noFoundModalContainerIcon":"U4kWfu","no-found-modal-container-text":"w2F10j","noFoundModalContainerText":"w2F10j","body":"Ps3Ami"};
+var css$D = {"sub-header-wrapper":"A6-fi2","subHeaderWrapper":"A6-fi2","switch":"hmivDi","search":"jy6IA-","no-found-modal-container":"EJFBCq","noFoundModalContainer":"EJFBCq","no-found-modal-container-icon":"_5YHkoP","noFoundModalContainerIcon":"_5YHkoP","no-found-modal-container-text":"FNfdKG","noFoundModalContainerText":"FNfdKG","body":"_6jIS0j"};
 
 function PickerModal(props) {
     const { view, selection, dataSourceStateLens, dataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = uuiComponents.usePickerModal(props);
@@ -4182,8 +4277,9 @@ function PickerModal(props) {
         const isEmptyRowsAndHasNoSelection = (rowsCount === 0 || !hasSelection);
         const showClear = !props.disableClear && (isSingleSelect() ? true : (!view.selectAll || hasSelection));
         const isClearDisabled = isSearching || isEmptyRowsAndHasNoSelection;
+        const isSelectAllDisabled = isSearching;
         return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
-            view.selectAll && !hasSelection && (React__namespace.default.createElement(LinkButton, { caption: i18n.pickerModal.selectAllButton, onClick: () => view.selectAll.onValueChange(true) })),
+            view.selectAll && !hasSelection && (React__namespace.default.createElement(LinkButton, { caption: i18n.pickerModal.selectAllButton, onClick: () => view.selectAll.onValueChange(true), isDisabled: isSelectAllDisabled })),
             showClear && (React__namespace.default.createElement(LinkButton, { caption: isSingleSelect() ? i18n.pickerModal.clearButton : i18n.pickerModal.clearAllButton, onClick: () => clearSelection(), isDisabled: isClearDisabled })),
             React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
             React__namespace.default.createElement(Button, { fill: "outline", color: "secondary", caption: i18n.pickerModal.cancelButton, onClick: () => props.abort() }),
@@ -4229,7 +4325,7 @@ function PickerModal(props) {
             React__namespace.default.createElement(ModalFooter, null, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$C = {"tooltip":"sDXKuB","noShrink":"iwYIz2"};
+var css$C = {"tooltip":"KOU0oQ","noShrink":"YSA6qO"};
 
 const PickerTogglerTag = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const tagProps = {
@@ -4248,7 +4344,7 @@ const PickerTogglerTag = /* @__PURE__ */React__namespace.forwardRef((props, ref)
     }
 });
 
-var css$B = {"root":"HaJ1QH"};
+var css$B = {"root":"wU2S1m"};
 
 const defaultMode = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
@@ -4330,7 +4426,7 @@ function PickerInputComponent(props, ref) {
 }
 const PickerInput = /* @__PURE__ */React__namespace.default.forwardRef(PickerInputComponent);
 
-var css$A = {"row":"wbZsb-"};
+var css$A = {"row":"crAQhU"};
 
 function PickerListRow(props) {
     let label;
@@ -4350,7 +4446,7 @@ function PickerListRow(props) {
     return (React__namespace.default.createElement("div", { role: "option", "aria-selected": props.isSelectable ? props.isSelected : undefined, "aria-busy": props.isLoading, "aria-posinset": props.index + 1, ...(props.checkbox?.isVisible && { 'aria-checked': props.isChecked }), className: css$A.row }, component));
 }
 
-var css$z = {"root":"_19OH28"};
+var css$z = {"root":"Jqz42t"};
 
 function PickerList(props) {
     const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, getModalTogglerCaption, } = uuiComponents.usePickerList(props);
@@ -4385,7 +4481,7 @@ function PickerList(props) {
             }, selectedRows)));
 }
 
-var css$y = {"root":"_2-pNpM","wrapper":"_6wASpZ","align-widgets-top":"_9NUjzI","alignWidgetsTop":"_9NUjzI","align-widgets-center":"enpFa4","alignWidgetsCenter":"enpFa4"};
+var css$y = {"root":"-JH1tz","wrapper":"zHen-O","align-widgets-top":"_9SSuYh","alignWidgetsTop":"_9SSuYh","align-widgets-center":"_6Uwczu","alignWidgetsCenter":"_6Uwczu"};
 
 function DataTableCell(initialProps) {
     const props = { ...initialProps };
@@ -4435,7 +4531,7 @@ function DataTableCell(initialProps) {
     return React__namespace.createElement(uuiComponents.DataTableCell, { ...props });
 }
 
-var css$x = {"root":"Hg853r"};
+var css$x = {"root":"_4-WxN0"};
 
 // 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.
@@ -4451,7 +4547,7 @@ const DataTableRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableRow,
     ];
 }, () => propsMods);
 
-var css$w = {"sorting-panel-container":"_0NVWU2","sortingPanelContainer":"_0NVWU2"};
+var css$w = {"sorting-panel-container":"gNJ05Y","sortingPanelContainer":"gNJ05Y"};
 
 const SortingPanelImpl = ({ sortDirection, onSort }) => {
     const sortAsc = React.useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
@@ -4473,7 +4569,7 @@ const ColumnHeaderDropdownImpl = (props) => {
 };
 const ColumnHeaderDropdown = /* @__PURE__ */React__namespace.default.memo(ColumnHeaderDropdownImpl);
 
-var css$v = {"root":"vmlKoK","caption-wrapper":"YyIFNf","captionWrapper":"YyIFNf","sort-icon":"xUPV5I","sortIcon":"xUPV5I","dropdown-icon":"HhfCk3","dropdownIcon":"HhfCk3","infoIcon":"EQmMij","sortInActive":"bqu4Tk","align-right":"BUEVZ1","alignRight":"BUEVZ1","align-center":"C4RZLh","alignCenter":"C4RZLh","caption":"n3EJt6","truncate":"_536Mw2","upper-case":"gP577i","upperCase":"gP577i","checkbox":"XPmrob","icon":"o2LVVf","fold-all-icon":"ptp7yB","foldAllIcon":"ptp7yB","cell-tooltip":"asmbtw","cellTooltip":"asmbtw","resizing-marker":"T7V1Wc","resizingMarker":"T7V1Wc","pinned-right":"ugOZMg","pinnedRight":"ugOZMg","draggable":"HjRKRd","ghost":"TKuBtX","is-dragged-out":"Qpbd-3","isDraggedOut":"Qpbd-3","dnd-marker-left":"_72iSFu","dndMarkerLeft":"_72iSFu","dnd-marker-right":"jI09xo","dndMarkerRight":"jI09xo","cell-tooltip-wrapper":"r3buZY","cellTooltipWrapper":"r3buZY","cell-tooltip-text":"c3zcuU","cellTooltipText":"c3zcuU","tooltip-caption":"z7l0Jz","tooltipCaption":"z7l0Jz","tooltip-info":"i7Cerk","tooltipInfo":"i7Cerk"};
+var css$v = {"root":"haFoNy","caption-wrapper":"dW9UQP","captionWrapper":"dW9UQP","sort-icon":"efDv9x","sortIcon":"efDv9x","dropdown-icon":"kol8Xx","dropdownIcon":"kol8Xx","infoIcon":"fXjpGN","sortInActive":"aFVm6H","align-right":"hmnVog","alignRight":"hmnVog","align-center":"BSFQQr","alignCenter":"BSFQQr","caption":"_1PKy5q","truncate":"rjUUy-","upper-case":"Og40lP","upperCase":"Og40lP","checkbox":"s9DV4r","icon":"Q9WRXf","fold-all-icon":"g5v5hO","foldAllIcon":"g5v5hO","cell-tooltip":"qrhJrM","cellTooltip":"qrhJrM","resizing-marker":"PBp3Cl","resizingMarker":"PBp3Cl","pinned-right":"rosspY","pinnedRight":"rosspY","draggable":"fJD7p-","ghost":"lkZQ9h","is-dragged-out":"qILMIK","isDraggedOut":"qILMIK","dnd-marker-left":"_9LEeJU","dndMarkerLeft":"_9LEeJU","dnd-marker-right":"r-DBx1","dndMarkerRight":"r-DBx1","cell-tooltip-wrapper":"_5UK2gG","cellTooltipWrapper":"_5UK2gG","cell-tooltip-text":"snpLBU","cellTooltipText":"snpLBU","tooltip-caption":"kTHlYp","tooltipCaption":"kTHlYp","tooltip-info":"hOWNTH","tooltipInfo":"hOWNTH"};
 
 function DefaultTooltipContent(column) {
     return (React__namespace.default.createElement("div", { className: uuiCore.cx(css$v.cellTooltipWrapper, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaptionTooltip) },
@@ -4580,7 +4676,7 @@ function DataTableHeaderCell(props) {
     return (React__namespace.default.createElement(uuiComponents.DataTableHeaderCell, { ...props, renderCellContent: props.column.renderFilter ? renderCellWithFilter : renderCellContent }));
 }
 
-var css$u = {"root":"_4zIJDX","caption-wrapper":"lqk35X","captionWrapper":"lqk35X","align-center":"L-pMol","alignCenter":"L-pMol","caption":"kH2KWa","truncate":"_6kpJB7","upper-case":"s11sgv","upperCase":"s11sgv","group-cell-tooltip":"haAlHc","groupCellTooltip":"haAlHc","group-cell-tooltip-wrapper":"vAJFy4","groupCellTooltipWrapper":"vAJFy4","group-cell-tooltip-text":"nXaIdp","groupCellTooltipText":"nXaIdp","tooltip-caption":"lxBBNo","tooltipCaption":"lxBBNo","tooltip-info":"Fve3YQ","tooltipInfo":"Fve3YQ"};
+var css$u = {"root":"ebuVzD","caption-wrapper":"y9pk5s","captionWrapper":"y9pk5s","align-center":"hqJhf-","alignCenter":"hqJhf-","caption":"JJ4Dij","truncate":"serVGZ","upper-case":"EH8Z0n","upperCase":"EH8Z0n","group-cell-tooltip":"paJSwk","groupCellTooltip":"paJSwk","group-cell-tooltip-wrapper":"CTh-w0","groupCellTooltipWrapper":"CTh-w0","group-cell-tooltip-text":"jdiATY","groupCellTooltipText":"jdiATY","tooltip-caption":"_5s2PdS","tooltipCaption":"_5s2PdS","tooltip-info":"-xeDyA","tooltipInfo":"-xeDyA"};
 
 class DataTableHeaderGroupCell extends React__namespace.Component {
     constructor() {
@@ -4620,7 +4716,7 @@ class DataTableHeaderGroupCell extends React__namespace.Component {
     }
 }
 
-var css$t = {"root":"TPytFN"};
+var css$t = {"root":"JTC4cc"};
 
 const DataTableHeaderRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableHeaderRow, () => [css$t.root, 'uui-dt-vars'], (mods) => {
     return ({
@@ -4728,7 +4824,7 @@ const UUI_FILTERS_PANEL_ITEM_TOGGLER_SELECTION = 'uui-filters-panel-item-toggler
 const UUI_FILTERS_PANEL_ITEM_TOGGLER_POSTFIX = 'uui-filters-panel-item-toggler-postfix';
 const UUI_FILTERS_PANEL_BODY_FOOTER = 'uui-filters-panel-item-footer';
 
-var css$s = {"body":"_5UWfHP","header":"_160Chm","title":"Roa-Sf","removeButton":"yBlGQC","with-search":"aoPvSm","withSearch":"aoPvSm"};
+var css$s = {"body":"bb0w3w","header":"aWjSiG","title":"_-9vmX7","removeButton":"Y64saA","with-search":"oQFZaS","withSearch":"oQFZaS"};
 
 function FilterColumnBody(props) {
     const [predicate, setPredicate] = React.useState(getDefaultPredicate(props.predicates, props.value));
@@ -4789,7 +4885,7 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var css$r = {"unpin-icon":"_9MhHxU","unpinIcon":"_9MhHxU","pin-toggler-icon":"_2TBFen","pinTogglerIcon":"_2TBFen"};
+var css$r = {"unpin-icon":"_7H8qYt","unpinIcon":"_7H8qYt","pin-toggler-icon":"fufXkN","pinTogglerIcon":"fufXkN"};
 
 function PinIconButton(props) {
     const i18nLocal = i18n.tables.columnsConfigurationModal;
@@ -4840,7 +4936,7 @@ function getUnpinIcon(params) {
     }
 }
 
-var css$q = {"row-wrapper":"c4oJ5o","rowWrapper":"c4oJ5o","pin-icon-button":"qrT-GF","pinIconButton":"qrT-GF","not-pinned":"YWMo9k","notPinned":"YWMo9k","checkbox":"OLPBwf","drag-handle":"qRrbbV","dragHandle":"qRrbbV","dnd-disabled":"Vf4stl","dndDisabled":"Vf4stl"};
+var css$q = {"row-wrapper":"jXnPOb","rowWrapper":"jXnPOb","pin-icon-button":"FLVoOv","pinIconButton":"FLVoOv","not-pinned":"NyVjOV","notPinned":"NyVjOV","checkbox":"_5ihLSC","drag-handle":"XOx0nK","dragHandle":"XOx0nK","dnd-disabled":"c0k6Ch","dndDisabled":"c0k6Ch"};
 
 const ColumnRow = /* @__PURE__ */React__namespace.memo(function ColumnRow(props) {
     const { column } = props;
@@ -4874,7 +4970,7 @@ const ColumnRow = /* @__PURE__ */React__namespace.memo(function ColumnRow(props)
     return (React__namespace.createElement(uuiCore.DndActor, { key: column.key, srcData: isDndAllowed && data, dstData: data, canAcceptDrop: onCanAcceptDrop, onDrop: onDrop, render: renderContent }));
 });
 
-var css$p = {"root":"_8ziuPb","main-panel":"pUSNlg","mainPanel":"pUSNlg","group":"_5QHtvv","group-title":"z-zJ1I","groupTitle":"z-zJ1I","group-items":"WZrmiC","groupItems":"WZrmiC","no-data":"_-7RPjt","noData":"_-7RPjt","no-data-title":"ZWVXtn","noDataTitle":"ZWVXtn","no-data-sub-title":"BEHMD4","noDataSubTitle":"BEHMD4","h-divider":"tCTraj","hDivider":"tCTraj","search-area":"deBq4-","searchArea":"deBq4-","subgroup-accordion":"eKhFYl","subgroupAccordion":"eKhFYl","subgroup":"crHg04","subgroup-title":"CtuIxj","subgroupTitle":"CtuIxj"};
+var css$p = {"root":"CNuaPB","main-panel":"_5wQfkL","mainPanel":"_5wQfkL","group":"Ovxjlu","group-title":"_9l9w5E","groupTitle":"_9l9w5E","group-items":"fI1z11","groupItems":"fI1z11","no-data":"_14r-Vc","noData":"_14r-Vc","no-data-title":"P6zps6","noDataTitle":"P6zps6","no-data-sub-title":"isYv7r","noDataSubTitle":"isYv7r","h-divider":"M9sD-c","hDivider":"M9sD-c","search-area":"XZb8f8","searchArea":"XZb8f8","subgroup-accordion":"Rf-wAP","subgroupAccordion":"Rf-wAP","subgroup":"_7-hc-8","subgroup-title":"b0BTnW","subgroupTitle":"b0BTnW"};
 
 const renderGroupTitle = (title, amount) => (React__namespace.createElement(FlexRow, { cx: css$p.group },
     React__namespace.createElement(Text, { size: "none", cx: css$p.groupTitle }, title),
@@ -4977,7 +5073,7 @@ const getChildrenAndRest = (row, rows) => {
     return [children, rest];
 };
 
-var css$o = {"listContainer":"ElGYjG","header":"iYKCM4","group":"jOAK3i","stickyHeader":"ik0HAK"};
+var css$o = {"listContainer":"FeoXKJ","header":"Ysswq8","group":"n4MDD6","stickyHeader":"SSARuE"};
 
 function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
     const rowRef = React.useRef(undefined);
@@ -5017,7 +5113,7 @@ function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, r
             React__namespace.default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
 }
 
-var css$n = {"root":"G8RWom","sticky-header":"gc4i9W","stickyHeader":"gc4i9W","no-results":"FgxHcI","noResults":"FgxHcI","icon":"SR40c4","title":"oxfrPp"};
+var css$n = {"root":"jhIaZE","sticky-header":"LCtrUj","stickyHeader":"LCtrUj","no-results":"UrQTTF","noResults":"UrQTTF","icon":"BpTDes","title":"cqNR--"};
 
 function DataTable(props) {
     const { uuiModals } = uuiCore.useUuiContext();
@@ -5067,7 +5163,7 @@ function DataTable(props) {
             : (React__namespace.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rowsCount: props.rowsCount, renderRows: renderTableBody, cx: classes, isLoading: props.isReloading, rowsSelector: "[role=row]", rawProps: rawProps })))));
 }
 
-var css$m = {"root":"HYyHRK","title-wrapper":"zDBS6c","titleWrapper":"zDBS6c","title":"wVhTWU","text-wrapper":"_6q3L9l","textWrapper":"_6q3L9l","selection":"_4lQgpu","postfix":"FLBR3p","selected":"_-6KA54"};
+var css$m = {"root":"ocWz4n","title-wrapper":"QL-0F1","titleWrapper":"QL-0F1","title":"CpRE3C","text-wrapper":"NcPGx5","textWrapper":"NcPGx5","selection":"sh170n","postfix":"VP6TJr","selected":"tIkn4b"};
 
 const FilterPanelItemToggler = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const togglerPickerOpened = (e) => {
@@ -5292,7 +5388,7 @@ function FilterRangeDatePickerBody(props) {
         renderFooter()));
 }
 
-var css$l = {"container":"orEEwq"};
+var css$l = {"container":"X0AMzp"};
 
 function FilterNumericBody({ min, max, step, ...props }) {
     const numericInputProps = { min, max, step };
@@ -5604,7 +5700,7 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = /* @__PURE__ */React__namespace.default.memo(FiltersToolbarImpl);
 
-var css$k = {"delete-button":"IJ-WfK","deleteButton":"IJ-WfK","tab-button":"_0QRP2Z","tabButton":"_0QRP2Z","targetOpen":"_4x5oss"};
+var css$k = {"delete-button":"W7sXHA","deleteButton":"W7sXHA","tab-button":"P8oOHY","tabButton":"P8oOHY","targetOpen":"PNUhuR"};
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = uuiCore.useUuiContext();
@@ -5621,7 +5717,14 @@ function PresetActionsDropdown(props) {
         await navigator.clipboard.writeText(link);
         successNotificationHandler('Link copied!');
     }, [props.activePresetId, props.preset, props.hasPresetChanged, props.getPresetLink, props.tableState]);
-    const onCopyLink = props.onCopyLink ? props.onCopyLink : copyUrlToClipboard;
+    const onCopyLink = React.useCallback(() => {
+        if (props.onCopyLink) {
+            props.onCopyLink(props.tableState);
+        }
+        else {
+            copyUrlToClipboard();
+        }
+    }, [props.onCopyLink, copyUrlToClipboard]);
     const saveInCurrent = React.useCallback(async (preset) => {
         const newPreset = {
             ...preset,
@@ -5670,8 +5773,8 @@ function PresetActionsDropdown(props) {
                 React__namespace.default.createElement(DropdownMenuButton, { icon: settings.presetsPanel.icons.deleteIcon, caption: "Delete", cx: css$k.deleteButton, onClick: deleteHandler })))));
     };
     const renderTarget = React.useCallback((dropdownProps) => {
-        return (React__namespace.default.createElement(IconButton, { cx: [css$k.tabButton, dropdownProps.isOpen && css$k.targetOpen], color: props.preset.id === props.activePresetId ? 'primary' : 'neutral', ...dropdownProps, icon: settings.presetsPanel.icons.menuIcon, size: settings.presetsPanel.sizes.dropdownTargetIconButton }));
-    }, []);
+        return (React__namespace.default.createElement(IconButton, { cx: [css$k.tabButton, dropdownProps.isOpen && css$k.targetOpen], color: props.preset.id === props.activePresetId ? 'primary' : 'neutral', ...dropdownProps, icon: settings.presetsPanel.icons.menuIcon, size: settings.presetsPanel.sizes.dropdownTargetIconButton, type: "span", rawProps: { role: 'button' } }));
+    }, [props.preset.id, props.activePresetId]);
     return (React__namespace.default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", middleware: [react.offset(22)] }));
 }
 
@@ -5680,7 +5783,7 @@ const UUI_PRESETS_PANEL_MORE_BUTTON = 'uui-presets-panel-more-button';
 const UUI_PRESETS_PANEL_INPUT = 'uui-presets-panel-input';
 const UUI_PRESETS_PANEL_PRESET = 'uui-presets-panel-preset';
 
-var css$j = {"preset-input-cell":"jnG-oN","presetInputCell":"jnG-oN","preset-input":"aw-ooU","presetInput":"aw-ooU"};
+var css$j = {"preset-input-cell":"_6n1zob","presetInputCell":"_6n1zob","preset-input":"o0w7T6","presetInput":"o0w7T6"};
 
 function PresetInput(props) {
     const [presetCaption, setPresetCaption] = React.useState(props.preset?.name || '');
@@ -5707,7 +5810,7 @@ function PresetInput(props) {
         React__namespace.default.createElement(TextInput, { cx: css$j.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50, isReadonly: readonly })));
 }
 
-var css$i = {"preset":"-Pdaed","activePreset":"YIGgQV"};
+var css$i = {"preset":"I9ylmM","activePreset":"CUg-Rn"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = React.useState(false);
@@ -5732,7 +5835,7 @@ function Preset(props) {
     return (React__namespace.default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__namespace.default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__namespace.default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$i.preset, isPresetActive && css$i.activePreset, UUI_PRESETS_PANEL_PRESET], size: settings.presetsPanel.sizes.tabButton, withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: PresetActionsDropdownComponent, iconPosition: "right", isActive: isPresetActive }))));
 }
 
-var css$h = {"divider":"_2BsGoM","dropdownDeleteIcon":"d-eK6V","presetsWrapper":"sydJlD","addPresetContainer":"PVULn-","dropContainer":"_5BRzuC"};
+var css$h = {"divider":"y6-BdY","dropdownDeleteIcon":"eS5KBC","presetsWrapper":"-jz3rU","addPresetContainer":"bftp08","dropContainer":"c7XitO"};
 
 function PresetsPanel(props) {
     const [isAddingPreset, setIsAddingPreset] = React.useState(false);
@@ -5781,9 +5884,9 @@ function PresetsPanel(props) {
             React__namespace.default.createElement(uuiComponents.AdaptivePanel, { items: getPanelItems() }))));
 }
 
-var css$g = {"root":"vwmQsW"};
+var css$g = {"root":"A68gN9"};
 
-var css$f = {"root":"t9xCnd","burger-content":"Vwvhk5","burgerContent":"Vwvhk5"};
+var css$f = {"root":"_52ghc3","burger-content":"SAwG7j","burgerContent":"SAwG7j"};
 
 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); }
@@ -5826,7 +5929,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
 };
 var ForwardRef$2 = /*#__PURE__*/React.forwardRef(SvgNavigationArrowDownOutline);
 
-var css$e = {"root":"sCDDzB","button-primary":"KgPtRd","buttonPrimary":"KgPtRd","button-secondary":"JfihMn","buttonSecondary":"JfihMn","hasIcon":"wad1rM","dropdown":"uEMwT-"};
+var css$e = {"root":"_1szTwY","button-primary":"aMldJ7","buttonPrimary":"aMldJ7","button-secondary":"GroDEm","buttonSecondary":"GroDEm","hasIcon":"AMOpTD","dropdown":"_2gOJ1A"};
 
 function applyBurgerButtonMods(props) {
     return [
@@ -5851,13 +5954,13 @@ const BurgerButton = /* @__PURE__ */React__namespace.default.forwardRef((props,
         }, dropdownIcon: ForwardRef$2 }));
 });
 
-var css$d = {"search-input":"_1FCDfs","searchInput":"_1FCDfs"};
+var css$d = {"search-input":"ABpOax","searchInput":"ABpOax"};
 
 function BurgerSearch(props) {
     return (React__namespace.createElement(uuiComponents.TextInput, { cx: cx__default.default(css$d.searchInput, 'uui-main_menu-burger-search'), iconPosition: "left", icon: ForwardRef$M, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$Q }));
 }
 
-var css$c = {"root":"f6WqOs","group-header":"_3rslt7","groupHeader":"_3rslt7","group-name":"c7lU1L","groupName":"c7lU1L","line":"M-6-se"};
+var css$c = {"root":"G1H2rq","group-header":"k-3Nov","groupHeader":"k-3Nov","group-name":"_66g9Fv","groupName":"_66g9Fv","line":"dmEgrb"};
 
 function BurgerGroupHeader(props) {
     return (React__namespace.createElement("div", { className: cx__default.default(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
@@ -5865,7 +5968,7 @@ function BurgerGroupHeader(props) {
         React__namespace.createElement("span", { className: css$c.groupName }, props.caption)));
 }
 
-var css$b = {"root":"G9Rw8g","type-primary":"_5QAI7K","typePrimary":"_5QAI7K","type-secondary":"EZsVK0","typeSecondary":"EZsVK0"};
+var css$b = {"root":"_4xnuDW","type-primary":"wi0yud","typePrimary":"wi0yud","type-secondary":"_9VRSxx","typeSecondary":"_9VRSxx"};
 
 const MainMenuButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const { type, ...clickableProps } = props;
@@ -5893,7 +5996,7 @@ const MainMenuButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) =
         props.isDropdown && (React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef$P, flipY: props.isOpen }))));
 });
 
-var css$a = {"dropdown-body":"TJaXQe","dropdownBody":"TJaXQe"};
+var css$a = {"dropdown-body":"ajpjE9","dropdownBody":"ajpjE9"};
 
 function MainMenuDropdown(props) {
     const handleEscape = (e, onClose, isOpen) => {
@@ -5939,12 +6042,12 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
 };
 var ForwardRef$1 = /*#__PURE__*/React.forwardRef(SvgNavigationGlobalMenuOutlineOutline);
 
-var css$9 = {"global-menu-btn":"tgu191","globalMenuBtn":"tgu191","global-menu-icon":"_63c8AS","globalMenuIcon":"_63c8AS"};
+var css$9 = {"global-menu-btn":"iPFHdf","globalMenuBtn":"iPFHdf","global-menu-icon":"g2ZAhi","globalMenuIcon":"g2ZAhi"};
 
 const GlobalMenu = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", { ref: ref, id: "global_menu_toggle", className: cx__default.default(css$9.globalMenuBtn, props.cx), ...props.rawProps },
     React__namespace.createElement(uuiComponents.IconContainer, { size: 36, icon: ForwardRef$1, cx: css$9.globalMenuIcon }))));
 
-var css$8 = {"container":"vtFSrU","open":"x6lWsx","folding-arrow":"LcX0du","foldingArrow":"LcX0du"};
+var css$8 = {"container":"_35QFDZ","open":"wIhGjR","folding-arrow":"_8yYwEa","foldingArrow":"_8yYwEa"};
 
 const MainMenuAvatar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", { ref: ref, className: cx__default.default(css$8.container, props.isDropdown && css$8.dropdown, props.isOpen && css$8.open, props.onClick && uuiCore.uuiMarkers.clickable, props.cx), onClick: props.onClick, ...props.rawProps },
     React__namespace.createElement(uuiComponents.Avatar, { size: "36", img: props.avatarUrl }),
@@ -5952,15 +6055,15 @@ const MainMenuAvatar = /* @__PURE__ */React__namespace.forwardRef((props, ref) =
     props.isDropdown && (React__namespace.createElement("div", null,
         React__namespace.createElement(uuiComponents.IconContainer, { size: 18, icon: ForwardRef$P, flipY: props.isOpen, cx: css$8.foldingArrow }))))));
 
-var css$7 = {"search-input":"UaOHWB","searchInput":"UaOHWB"};
+var css$7 = {"search-input":"sIWjOH","searchInput":"sIWjOH"};
 
 const MainMenuSearch = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement(uuiCore.IEditableDebouncer, { ...props, render: (iEditable) => (React__namespace.createElement(uuiComponents.TextInput, { iconPosition: "left", icon: ForwardRef$M, cancelIcon: props.value?.length > 0 && ForwardRef$Q, ...props, ...iEditable, ref: ref, cx: uuiCore.cx(css$7.searchInput, props.cx), ...props.rawProps })) })));
 
-var css$6 = {"container":"KahbRG"};
+var css$6 = {"container":"_6WmP2N"};
 
 const MainMenuIcon = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement(IconButton, { ref: ref, icon: props.icon, cx: uuiCore.cx(props.cx, css$6.container), ...props })));
 
-var css$5 = {"root":"mVCr-H"};
+var css$5 = {"root":"wE3yab"};
 
 const Anchor = /* @__PURE__ */uuiCore.withMods(uuiComponents.Anchor, () => [css$5.root]);
 
@@ -6018,7 +6121,7 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
 };
 var ForwardRef = /*#__PURE__*/React.forwardRef(SvgFileCloudUploadFill);
 
-var css$4 = {"root":"_8osKhn","drop-start":"xmDD2I","dropStart":"xmDD2I","drop-over":"KUbcxW","dropOver":"KUbcxW","link":"wVC2yH","drop-area":"NiXVjF","dropArea":"NiXVjF","drop-caption":"-vqUYd","dropCaption":"-vqUYd","icon-blue":"N-YC3C","iconBlue":"N-YC3C"};
+var css$4 = {"root":"tgmZ6w","drop-start":"fxIV1h","dropStart":"fxIV1h","drop-over":"SAzEm3","dropOver":"SAzEm3","link":"lu1JIF","drop-area":"gtE0R6","dropArea":"gtE0R6","drop-caption":"oom5dl","dropCaption":"oom5dl","icon-blue":"luMPYq","iconBlue":"luMPYq"};
 
 function DropSpot(props) {
     const getInfoText = typeof props.infoText === 'string'
@@ -6036,7 +6139,7 @@ function DropSpot(props) {
     return React__namespace.createElement(uuiComponents.DropSpot, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
 }
 
-var css$3 = {"root":"_2wZddl"};
+var css$3 = {"root":"AyyvPx"};
 
 const SvgCircleProgress = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
@@ -6047,7 +6150,7 @@ const SvgCircleProgress = /* @__PURE__ */React__namespace.forwardRef((props, ref
         React__namespace.createElement("circle", { strokeWidth: 1, fill: "transparent", r: outsetRadius, cx: props.size / 2, cy: props.size / 2 })));
 });
 
-var css$2 = {"root":"Xq1ST3","file-name":"u-1fTp","fileName":"u-1fTp","default-color":"GCyBb0","defaultColor":"GCyBb0","doc-color":"JPt-OP","docColor":"JPt-OP","xls-color":"J2GvnQ","xlsColor":"J2GvnQ","pdf-color":"hzwvnm","pdfColor":"hzwvnm","movie-color":"vPdLkZ","movieColor":"vPdLkZ","img-color":"voQrvi","imgColor":"voQrvi","mov-color":"x0nOhM","movColor":"x0nOhM","error-block":"-ERPrL","errorBlock":"-ERPrL","icons-block":"_3CpC1p","iconsBlock":"_3CpC1p"};
+var css$2 = {"root":"_55jCqB","file-name":"QN4YvS","fileName":"QN4YvS","default-color":"qwaOM1","defaultColor":"qwaOM1","doc-color":"RF09fF","docColor":"RF09fF","xls-color":"KANFsF","xlsColor":"KANFsF","pdf-color":"_82A2yr","pdfColor":"_82A2yr","movie-color":"y8sXYZ","movieColor":"y8sXYZ","img-color":"OZ78ff","imgColor":"OZ78ff","mov-color":"tSn-s1","movColor":"tSn-s1","error-block":"UfE6rs","errorBlock":"UfE6rs","icons-block":"BgkkFX","iconsBlock":"BgkkFX"};
 
 const FileCard = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const [isLoadingShow, setIsLoadingShow] = React__namespace.useState(true);
@@ -6167,7 +6270,7 @@ const getErrorPageConfig = () => ({
     },
 });
 
-var css$1 = {"container":"d2-PXn"};
+var css$1 = {"container":"VGQyoz"};
 
 const ErrorPage = (props) => {
     const isMobileScreen = uuiCore.isMobile();
@@ -6179,10 +6282,10 @@ const ErrorPage = (props) => {
             props?.supportLink && React__namespace.default.createElement("div", { className: "uui-error-support-link" }, props?.supportLink))));
 };
 
-var css = {"recovery-spinner":"ccX40-","recoverySpinner":"ccX40-","recovery-message":"KY4BiR","recoveryMessage":"KY4BiR","modal-blocker":"nxCg8a","modalBlocker":"nxCg8a","modalFadeIn":"J3Qd0w"};
+var css = {"recovery-spinner":"SaXoWn","recoverySpinner":"SaXoWn","recovery-message":"w-sJ7M","recoveryMessage":"w-sJ7M","modal-blocker":"_7ki2Ln","modalBlocker":"_7ki2Ln","modalFadeIn":"ikD6VL"};
 
 function ErrorHandler(props) {
-    const { uuiNotifications, uuiModals, uuiApi } = uuiCore.useUuiContext();
+    const { uuiNotifications, uuiModals, uuiApi, uuiLayout } = uuiCore.useUuiContext();
     const { errorType, errorInfo } = uuiCore.useUuiError({
         getErrorInfo: props.getErrorInfo,
         options: { errorConfig: getErrorPageConfig(), recoveryConfig: getRecoveryMessageConfig() },
@@ -6202,7 +6305,7 @@ function ErrorHandler(props) {
     };
     const renderRecoveryBlocker = (errorInform) => {
         const { title, subtitle } = errorInform;
-        return (React__namespace.default.createElement(ModalBlocker, { key: "recovery-blocker", cx: css.modalBlocker, isActive: true, zIndex: 100500, success: () => { }, abort: () => { } },
+        return (React__namespace.default.createElement(ModalBlocker, { key: "recovery-blocker", cx: css.modalBlocker, isActive: true, zIndex: uuiLayout.getTopOverlayZIndex(), success: () => { }, abort: () => { } },
             React__namespace.default.createElement(ModalWindow, null,
                 React__namespace.default.createElement(ModalHeader, { borderBottom: true, title: title }),
                 React__namespace.default.createElement(Spinner, { cx: css.recoverySpinner }),