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

package/index.esm.js

@@ -156,7 +156,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#od04nnpgd11hcww_a)"
+    clipPath: "url(#9lohbcgwff4t0z8ao_a)"
   }, _path$I || (_path$I = /*#__PURE__*/React.createElement("path", {
     d: "M150.585 1.535C49.483-11.495 27.481 61.805 45.725 97.481c10.581 20.69-39.64 70.792 17.744 81.468 27.538 5.123 36-13.341 62.433-10.655 35.4 3.6 148.167-4.73 88.349-78.915-31.713-39.335 1.026-79.506-63.666-87.844Z",
     fill: "#F5F6FA"
@@ -177,7 +177,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M86.786 22.982c-2.55 0-4.965 2.07-4.965 4.552V120.6c0 2.484 2.4 4.572 4.965 4.572h88.101c2.582 0 4.986-2.089 4.986-4.572V27.534c0-2.464-2.418-4.552-4.986-4.552h-88.1Zm-5.793 4.552c0-3.022 2.874-5.38 5.793-5.38h88.101c2.935 0 5.814 2.374 5.814 5.38V120.6c0 3.021-2.86 5.4-5.814 5.4h-88.1c-2.94 0-5.794-2.381-5.794-5.4V27.534Z",
     fill: "#1D1E26"
   })), /*#__PURE__*/React.createElement("mask", {
-    id: "od04nnhjnkq8z8gf6_b",
+    id: "9lohbc5wkdxvlva3h_b",
     style: {
       maskType: "alpha"
     },
@@ -190,7 +190,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M174.887 125.586h-88.1c-2.752 0-5.38-2.234-5.38-4.986V27.534c0-2.752 2.644-4.966 5.38-4.966h88.1c2.752 0 5.4 2.23 5.4 4.966V120.6c0 2.752-2.632 4.986-5.4 4.986Z",
     fill: "#9BDEFF"
   }))), _g || (_g = /*#__PURE__*/React.createElement("g", {
-    mask: "url(#od04nnhjnkq8z8gf6_b)",
+    mask: "url(#9lohbc5wkdxvlva3h_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
@@ -276,7 +276,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M24.73 96.184a.414.414 0 0 1 .581.06l48.646 59.751a.413.413 0 1 1-.642.523L24.67 96.766a.414.414 0 0 1 .06-.582Z",
     fill: "#fff"
   }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "od04nnpgd11hcww_a"
+    id: "9lohbcgwff4t0z8ao_a"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
@@ -927,14 +927,14 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
 };
 var ForwardRef$4 = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
 
-var css$1w = {"root":"wHWe96","uui-spinner":"GbwXIv","uuiSpinner":"GbwXIv"};
+var css$1x = {"root":"-bpbAB","uui-spinner":"_1fFqh2","uuiSpinner":"_1fFqh2"};
 
 function applySpinnerMods() {
-    return [css$1w.root, 'uui-spinner'];
+    return [css$1x.root, 'uui-spinner'];
 }
 const Spinner = /* @__PURE__ */withMods(Spinner$1, 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":"CZRNCb","loading-word":"FNiUWH","loadingWord":"FNiUWH","animated-loading":"_2PrDY8","animatedLoading":"_2PrDY8","skeleton_loading":"maW48T","skeletonLoading":"maW48T"};
 
 const TextPlaceholder = (props) => {
     const pattern = ' ';
@@ -946,20 +946,20 @@ const TextPlaceholder = (props) => {
         }
         return words;
     }, [props.wordsCount]);
-    return (React.createElement("div", { "aria-busy": true, className: cx(css$1v.root, 'uui-text-placeholder'), ...props.rawProps }, text.map((it, index) => (React.createElement("span", { key: index, className: cx([
-            props.cx, css$1v.loadingWord, !props.isNotAnimated && css$1v.animatedLoading,
+    return (React.createElement("div", { "aria-busy": true, className: cx(css$1w.root, 'uui-text-placeholder'), ...props.rawProps }, text.map((it, index) => (React.createElement("span", { key: index, className: cx([
+            props.cx, css$1w.loadingWord, !props.isNotAnimated && css$1w.animatedLoading,
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
-var css$1u = {"root":"t2qF7o","line-height":"QsHsg-","lineHeight":"QsHsg-","font-size":"DYySQH","fontSize":"DYySQH"};
+var css$1v = {"root":"Wg-zMe","line-height":"WRAnUW","lineHeight":"WRAnUW","font-size":"XIbWqO","fontSize":"XIbWqO"};
 
 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'}`,
@@ -978,9 +978,9 @@ const Text = /* @__PURE__ */withMods(uuiComponents.Text, applyTextMods, (props)
     };
 });
 
-var css$1t = {"root":"VW0xT7"};
+var css$1u = {"root":"PkVtUU"};
 
-const Blocker = /* @__PURE__ */withMods(Blocker$1, () => [css$1t.root], () => ({ renderSpinner: settings.blocker.renderSpinner }));
+const Blocker = /* @__PURE__ */withMods(Blocker$1, () => [css$1u.root], () => ({ renderSpinner: settings.blocker.renderSpinner }));
 
 const accordionSettings = {
     icons: {
@@ -1349,6 +1349,7 @@ const rangeDatePickerSettings = {
     sizes: {
         default: '36',
         preset: '24',
+        mobilePreset: '30',
     },
 };
 const ratingSettings = {
@@ -1483,11 +1484,11 @@ const settings = {
     textInput: textInputSettings,
 };
 
-var css$1s = {"root":"_73MvAx"};
+var css$1t = {"root":"UuLjjr"};
 
 function applyButtonMods(mods) {
     return [
-        css$1s.root,
+        css$1t.root,
         'uui-button',
         `uui-fill-${mods.fill || 'solid'}`,
         `uui-color-${mods.color || 'primary'}`,
@@ -1501,10 +1502,10 @@ const Button = /* @__PURE__ */withMods(uuiComponents.Button, applyButtonMods, ()
     };
 });
 
-var css$1r = {"root":"qJt05Y"};
+var css$1s = {"root":"gcJCb8"};
 
 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__ */withMods(uuiComponents.IconButton, applyIconButtonMods, (props) => {
     const isDeprecated = ['info', 'success', 'error', 'warning'].includes(props.color);
@@ -1538,7 +1539,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":"_7Tdu50"};
 
 const DEFAULT_COLOR = 'primary';
 const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
@@ -1553,7 +1554,7 @@ const LinkButton = /* @__PURE__ */React.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}`,
@@ -1568,11 +1569,11 @@ const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         props.isDropdown && (React.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1p = {"root":"F1K5-G"};
+var css$1q = {"root":"Q89OqQ"};
 
 const CountIndicator = /* @__PURE__ */forwardRef((props, ref) => {
     return (React__default.createElement("div", { ref: ref, className: cx([
-            css$1p.root,
+            css$1q.root,
             'uui-count_indicator',
             `uui-size-${props.size || settings.countIndicator.sizes.default}`,
             props.color && `uui-color-${props.color}`,
@@ -1580,7 +1581,7 @@ const CountIndicator = /* @__PURE__ */forwardRef((props, ref) => {
         ]) }, props.caption));
 });
 
-var css$1o = {"root":"BQ79nw","withNotify":"fu1mgU"};
+var css$1p = {"root":"uBdryQ","withNotify":"KbbzSx"};
 
 const TabButton = /* @__PURE__ */React__default.forwardRef((props, refExternal) => {
     const refLocal = React__default.useRef(null);
@@ -1592,7 +1593,7 @@ const TabButton = /* @__PURE__ */React__default.forwardRef((props, refExternal)
     });
     const styles = [
         isActive && uuiMod.active,
-        css$1o.root,
+        css$1p.root,
         'uui-tab-button',
         `uui-size-${props.size || settings.tabButton.sizes.default}`,
         ...getIconClass(props),
@@ -1620,26 +1621,26 @@ const TabButton = /* @__PURE__ */React__default.forwardRef((props, refExternal)
         props.icon && props.iconPosition !== 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         (props.caption || props.withNotify) && (React__default.createElement("div", { className: cx$1(uuiElement.caption) },
             props.caption,
-            props.withNotify && React__default.createElement("div", { className: css$1o.withNotify }))),
+            props.withNotify && React__default.createElement("div", { className: css$1p.withNotify }))),
         props.icon && props.iconPosition === 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { color: "neutral", size: settings.tabButton.sizes.countIndicatorMap[props.size || settings.tabButton.sizes.default], caption: props.count })),
         props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen })),
         props.onClear && !props.isDisabled && (React__default.createElement(IconContainer, { cx: uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
 });
 
-var css$1n = {"root":"btG3d4","noLeftPadding":"BNhpdA","foldingArea":"_3Medwy","onlyFoldable":"viXzqW","captionWrapper":"wCY6DC","withNotify":"MP0UKc"};
+var css$1o = {"root":"IFI60C","noLeftPadding":"H4Yrjh","foldingArea":"rFYoXz","onlyFoldable":"_9-8Wqv","captionWrapper":"_2lbvoy","withNotify":"XxsIYg"};
 
-var css$1m = {"root":"UKJGXU"};
+var css$1n = {"root":"aHlmL-"};
 
-const AvatarStack = /* @__PURE__ */withMods(AvatarStack$1, () => [css$1m.root]);
+const AvatarStack = /* @__PURE__ */withMods(AvatarStack$1, () => [css$1n.root]);
 
-var css$1l = {"root":"mBcbTU"};
+var css$1m = {"root":"_5-9PwS"};
 
 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'}`,
@@ -1661,11 +1662,11 @@ const Badge = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1k = {"root":"Kyg-VZ"};
+var css$1l = {"root":"rZC4Oc"};
 
 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'}`,
@@ -1694,11 +1695,11 @@ const Tag = /* @__PURE__ */React__default.forwardRef((props, ref) => {
             } }))));
 });
 
-var css$1j = {"root":"zVDYL9","page":"YLRFk9","spacer":"_-5gzP8","mode-ghost":"l0MSu-","modeGhost":"l0MSu-"};
+var css$1k = {"root":"ef4x8T","page":"e8G64P","spacer":"KMyAzQ","mode-ghost":"u-9cl0","modeGhost":"u-9cl0"};
 
 function Paginator(props) {
     const renderPaginator = (params) => (React__default.createElement("nav", { role: "navigation", className: cx('uui-paginator', `uui-size-${props.size || settings.paginator.sizes.default}`), ...params.rawProps },
-        React__default.createElement("ul", { className: css$1j.root },
+        React__default.createElement("ul", { className: css$1k.root },
             React__default.createElement("li", null,
                 React__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',
@@ -1706,11 +1707,11 @@ function Paginator(props) {
             params.pages.map((page, index) => {
                 if (page.type === 'spacer') {
                     return (React__default.createElement("li", { key: `${index}_spacer` },
-                        React__default.createElement(Button, { cx: cx(css$1j.spacer, css$1j.page), size: props.size || settings.paginator.sizes.default, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1, isDisabled: props.isDisabled })));
+                        React__default.createElement(Button, { cx: cx(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__default.createElement("li", { key: page.pageNumber },
-                        React__default.createElement(Button, { cx: cx(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__default.createElement(Button, { cx: cx(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__default.createElement("li", null,
@@ -1720,40 +1721,40 @@ function Paginator(props) {
     return React__default.createElement(Paginator$1, { ...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":"_51cIS2","progress-bar":"BEZwen","progressBar":"BEZwen","progressBar-indeterminate":"dWYzJ7","progressBarIndeterminate":"dWYzJ7","size-12":"_5tIQz3","size12":"_5tIQz3","size-18":"_104FVJ","size18":"_104FVJ","size-24":"cSKhDN","size24":"cSKhDN"};
 
 const IndeterminateBar = /* @__PURE__ */React.forwardRef((props, ref) => {
-    return (React.createElement("div", { ref: ref, className: cx('uui-indeterminate_bar', props.cx, css$1i.root, css$1i[`size-${props.size || 12}`]) },
-        React.createElement("div", { className: cx(css$1i.progressBar) })));
+    return (React.createElement("div", { ref: ref, className: cx('uui-indeterminate_bar', props.cx, css$1j.root, css$1j[`size-${props.size || 12}`]) },
+        React.createElement("div", { className: cx(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":"-C6R9X","striped":"lAjv1c","animate-stripes":"juBAH-","animateStripes":"juBAH-","size-12":"KmEX7D","size12":"KmEX7D","size-18":"hVqKsC","size18":"hVqKsC","size-24":"mbC4B-","size24":"mbC4B-"};
 
 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__ */withMods(uuiComponents.ProgressBar, applyProgressBarMods, (props) => ({
     hideLabel: props.hideLabel || props.striped,
 }));
 
-var css$1g = {"root":"Yvl3rP"};
+var css$1h = {"root":"KeXYLM"};
 
 const IndicatorBar = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { progress } = props;
-    return progress || progress === 0 ? (React.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx(css$1g.root, props.cx), hideLabel: true })) : (React.createElement(IndeterminateBar, { ref: ref, cx: cx(css$1g.root, props.cx) }));
+    return progress || progress === 0 ? (React.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx(css$1h.root, props.cx), hideLabel: true })) : (React.createElement(IndeterminateBar, { ref: ref, cx: cx(css$1h.root, props.cx) }));
 });
 
-var css$1f = {"root":"g2poa9"};
+var css$1g = {"root":"vc48LB"};
 
 const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
     return (React__default.createElement("div", { ref: ref, className: cx([
-            css$1f.root,
+            css$1g.root,
             `uui-size-${props.size || settings.statusIndicator.sizes.default}`,
             'uui-status_indicator',
             `uui-color-${props.color || 'neutral'}`,
@@ -1764,11 +1765,11 @@ const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
         React__default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
 });
 
-var css$1e = {"root":"-zhjHE"};
+var css$1f = {"root":"TroD4d"};
 
 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',
@@ -1782,11 +1783,11 @@ const applyUUICheckboxProps = (props) => {
 };
 const Checkbox = /* @__PURE__ */withMods(uuiComponents.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$1d = {"root":"BndSCy"};
+var css$1e = {"root":"CSrWsT"};
 
 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',
@@ -1794,11 +1795,11 @@ function applyRadioInputMods(mods) {
 }
 const RadioInput = /* @__PURE__ */withMods(RadioInput$1, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : settings.radioInput.icons.dotIcon }));
 
-var css$1c = {"root":"IwresO"};
+var css$1d = {"root":"zAvEco"};
 
 function applySwitchMods(mods) {
     return [
-        css$1c.root,
+        css$1d.root,
         `uui-size-${mods.size || settings.switch.sizes.default}`,
         'uui-color-primary',
     ];
@@ -1818,7 +1819,7 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var textInputCss = {"root":"o2jUgK"};
+var textInputCss = {"root":"fr3QWE"};
 
 const DEFAULT_MODE$3 = EditMode.FORM;
 function applyTextInputMods(mods) {
@@ -1843,9 +1844,9 @@ const SearchInput = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         } }));
 });
 
-var css$1b = {"root":"_4yz802"};
+var css$1c = {"root":"O24FEl"};
 
-const ControlGroup = /* @__PURE__ */withMods(ControlGroup$1, () => [css$1b.root, 'uui-control-group']);
+const ControlGroup = /* @__PURE__ */withMods(ControlGroup$1, () => [css$1c.root, 'uui-control-group']);
 
 function MultiSwitchComponent(props, ref) {
     return (React.createElement(ControlGroup, { ref: ref, rawProps: {
@@ -1859,13 +1860,13 @@ function MultiSwitchComponent(props, ref) {
 }
 const MultiSwitch = /* @__PURE__ */React.forwardRef(MultiSwitchComponent);
 
-var css$1a = {"root":"rD1EIe"};
+var css$1b = {"root":"L4QTq6"};
 
 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),
     ];
@@ -1879,12 +1880,12 @@ const NumericInput = /* @__PURE__ */withMods(NumericInput$1, applyNumericInputMo
     };
 });
 
-var css$19 = {"root":"hWjyQa"};
+var css$1a = {"root":"nDPS5n"};
 
 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),
@@ -1920,18 +1921,18 @@ function TREE_SHAKEABLE_INIT$1() {
     };
 }
 
-var css$18 = {"root":"_1xxWuz"};
+var css$19 = {"root":"_41H06T"};
 
 function applyDropdownContainerMods(mods) {
     return [
-        css$18.root,
+        css$19.root,
         mods.vPadding && `vPadding-${mods.vPadding}`,
         mods.padding && `padding-${mods.padding}`,
     ];
 }
 const DropdownContainer = /* @__PURE__ */withMods(uuiComponents.DropdownContainer, applyDropdownContainerMods);
 
-var css$17 = {"root":"zhllax","timepicker-input":"xs2Q7P","timepickerInput":"xs2Q7P","ltr-always":"cMUitE","ltrAlways":"cMUitE"};
+var css$18 = {"root":"vr2yFE","timepicker-input":"msulGW","timepickerInput":"msulGW","ltr-always":"a1AWX8","ltrAlways":"a1AWX8"};
 
 const uuiTimePicker = {
     container: 'uui-timepicker-container',
@@ -1970,8 +1971,8 @@ function TimePickerBody(props) {
         const minutesToSubtract = value.minute() % minutesStep === 0 ? minutesStep : value.minute() % minutesStep;
         onMinutesChange(value.subtract(minutesToSubtract, 'm').minute());
     };
-    return (React.createElement("div", { className: cx$1(css$17.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef, ...props.rawProps },
-        React.createElement("div", { className: css$17.ltrAlways },
+    return (React.createElement("div", { className: cx$1(css$18.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef, ...props.rawProps },
+        React.createElement("div", { className: css$18.ltrAlways },
             React.createElement("div", { className: uuiTimePicker.elementContainer },
                 React.createElement(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.createElement(NumericInput$1, { cx: uuiTimePicker.input, onValueChange: onHoursChange, value: +(uuiDayjs.dayjs()
@@ -2131,7 +2132,7 @@ function TimePickerComponent(props, ref) {
         }
     };
     const renderInput = (inputProps) => {
-        return (React__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__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;
@@ -2152,37 +2153,37 @@ function TimePickerComponent(props, ref) {
 }
 const TimePicker = /* @__PURE__ */React__default.forwardRef(TimePickerComponent);
 
-var css$16 = {"root":"PBiI6A"};
+var css$17 = {"root":"_0FDPSo"};
 
 function applyInputAddonMods() {
     return [
-        css$16.root,
+        css$17.root,
     ];
 }
 const InputAddon = /* @__PURE__ */withMods(InputAddon$1, applyInputAddonMods);
 
-var css$15 = {"root":"BfHmZn"};
+var css$16 = {"root":"rGRIAm"};
 
 function applySliderMods() {
-    return [css$15.root, 'uui-color-neutral'];
+    return [css$16.root, 'uui-color-neutral'];
 }
 const Slider = /* @__PURE__ */withMods(Slider$1, applySliderMods);
 
-var css$14 = {"root":"-S9u2y"};
+var css$15 = {"root":"_0oMzzo"};
 
 function applyTooltipMods(mods) {
     return [
-        css$14.root,
+        css$15.root,
         `uui-color-${mods.color || 'inverted'}`,
     ];
 }
 const Tooltip = /* @__PURE__ */withMods(uuiComponents.Tooltip, applyTooltipMods);
 
-var css$13 = {"root":"KybgXo","tooltip":"mQBZnf"};
+var css$14 = {"root":"rhT47s","tooltip":"hWQcNY"};
 
 function applyRatingMods(mods) {
     return [
-        css$13.root,
+        css$14.root,
         `uui-size-${mods.size || settings.rating.sizes.default}`,
     ];
 }
@@ -2192,7 +2193,7 @@ const Rating = /* @__PURE__ */withMods(uuiComponents.Rating, applyRatingMods, (p
     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":"thd3w9","dragHandleWrapper":"thd3w9","with-indent":"ON9GJ-","withIndent":"ON9GJ-","drag-handle":"_2whqdy","dragHandle":"_2whqdy","icon-container":"_--wKxZ","iconContainer":"_--wKxZ"};
 
 function DataRowAddons(props) {
     const row = props.rowProps;
@@ -2209,8 +2210,8 @@ function DataRowAddons(props) {
         if (props.renderDragHandle) {
             return props.renderDragHandle({ rowProps: props.rowProps, eventHandlers: props.eventHandlers });
         }
-        return (React__default.createElement("div", { key: "dh", className: cx(css$12.dragHandleWrapper, row.indent > 0 && css$12.withIndent), style: { width: row.indent > 0 ? (getIndent() + getWidth()) : 0 }, ...props.eventHandlers },
-            React__default.createElement(DragHandle, { cx: css$12.dragHandle })));
+        return (React__default.createElement("div", { key: "dh", className: cx(css$13.dragHandleWrapper, row.indent > 0 && css$13.withIndent), style: { width: row.indent > 0 ? (getIndent() + getWidth()) : 0 }, ...props.eventHandlers },
+            React__default.createElement(DragHandle, { cx: css$13.dragHandle })));
     };
     const handleFold = (e) => {
         if (e.key === 'Enter') {
@@ -2225,7 +2226,7 @@ function DataRowAddons(props) {
                 'aria-label': row.isFolded ? 'Unfold' : 'Fold',
                 role: 'button',
             }, key: "icon", icon: settings.dataTable.icons.body.foldingIcon, cx: [
-                uuiElement.foldingArrow, uuiMarkers.clickable, css$12.iconContainer,
+                uuiElement.foldingArrow, 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 }))))));
 }
 
@@ -2236,12 +2237,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 && 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,
     ];
@@ -2261,16 +2262,16 @@ function VerticalTabButtonComponent(props, ref) {
             'aria-selected': isActive,
             ...props.rawProps,
         }, cx: styles, ref: ref },
-        props.indent > 0 && (React__default.createElement("div", { key: "fold", className: cx$1(css$1n.foldingArea, props.onFold && uuiMarkers.clickable), style: { '--uui-folding-indent': `${props.indent - 1}` }, onClick: props.onFold }, props.isFoldable && (React__default.createElement(IconContainer, { rawProps: {
+        props.indent > 0 && (React__default.createElement("div", { key: "fold", className: cx$1(css$1o.foldingArea, props.onFold && uuiMarkers.clickable), style: { '--uui-folding-indent': `${props.indent - 1}` }, onClick: props.onFold }, props.isFoldable && (React__default.createElement(IconContainer, { rawProps: {
                 'aria-label': props.isFolded ? 'Unfold' : 'Fold',
                 role: 'button',
             }, key: "icon", icon: settings.verticalTabButton.icons.foldingIcon, cx: [
-                uuiElement.foldingArrow, css$1n.iconContainer,
+                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__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
-        (props.caption || props.withNotify) && (React__default.createElement("div", { className: css$1n.captionWrapper },
+        (props.caption || props.withNotify) && (React__default.createElement("div", { className: css$1o.captionWrapper },
             props.caption && React__default.createElement("div", { className: cx$1(uuiElement.caption, `uui-vertical-tab-button-weight-${props.weight || settings.verticalTabButton.weight}`) }, props.caption),
-            props.withNotify && React__default.createElement("div", { className: css$1n.withNotify }))),
+            props.withNotify && React__default.createElement("div", { className: css$1o.withNotify }))),
         props.icon && props.iconPosition === 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { color: "neutral", size: settings.verticalTabButton.sizes.countIndicatorMap[props.size || settings.verticalTabButton.sizes.default], caption: props.count })),
         props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen })),
@@ -2279,17 +2280,17 @@ function VerticalTabButtonComponent(props, ref) {
 }
 const VerticalTabButton = /* @__PURE__ */React__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":"fCCifk","main-path":"Y8WzCB","mainPath":"Y8WzCB","content-wrapper":"trwNHU","contentWrapper":"trwNHU","content":"_82YjHo","action-wrapper":"Yucaqi","actionWrapper":"Yucaqi","icon-wrapper":"-hH6K9","iconWrapper":"-hH6K9","icon":"_9NR5gU","close-icon":"CTbucX","closeIcon":"CTbucX"};
 
-const Alert = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("div", { role: "alert", ref: ref, className: cx('uui-alert', css$11.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
-    React.createElement("div", { className: css$11.mainPath },
-        React.createElement("div", { className: css$11.contentWrapper },
-            props.icon && (React.createElement("div", { className: css$11.iconWrapper },
-                React.createElement(IconContainer, { icon: props.icon, cx: css$11.icon }))),
-            React.createElement("div", { className: css$11.content },
+const Alert = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("div", { role: "alert", ref: ref, className: cx('uui-alert', css$12.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
+    React.createElement("div", { className: css$12.mainPath },
+        React.createElement("div", { className: css$12.contentWrapper },
+            props.icon && (React.createElement("div", { className: css$12.iconWrapper },
+                React.createElement(IconContainer, { icon: props.icon, cx: css$12.icon }))),
+            React.createElement("div", { className: css$12.content },
                 props.children,
-                props.actions && (React.createElement("div", { className: css$11.actionWrapper }, props.actions.map((action) => (React.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.createElement(IconButton, { icon: settings.alert.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$11.closeIcon })))));
+                props.actions && (React.createElement("div", { className: css$12.actionWrapper }, props.actions.map((action) => (React.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.createElement(IconButton, { icon: settings.alert.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$12.closeIcon })))));
 const WarningAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, { icon: settings.alert.icons.warningIcon, color: "warning", ref: ref, ...props }));
 const SuccessAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, { icon: settings.alert.icons.successIcon, color: "success", ref: ref, ...props }));
 const HintAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, { icon: settings.alert.icons.infoIcon, color: "info", ref: ref, ...props }));
@@ -2297,7 +2298,7 @@ const ErrorAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createE
 
 const Dropdown = /* @__PURE__ */withMods(Dropdown$1);
 
-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":"LoQsZ1","submenuRootItemRtl":"LoQsZ1","icon-after":"D7k-8S","iconAfter":"D7k-8S","submenu-root-item":"XQyfw0","submenuRootItem":"XQyfw0","icon-check":"PLUUMz","iconCheck":"PLUUMz","splitter-root":"_6vgKvJ","splitterRoot":"_6vgKvJ","splitter":"Gjtkyy","header-root":"sluV-r","headerRoot":"sluV-r","item-root":"ltGPMS","itemRoot":"ltGPMS","icon":"LfY7st","link":"suMBKa","indent":"A3-qpy","selected-mark":"YKgtIU","selectedMark":"YKgtIU"};
 
 var IDropdownControlKeys;
 (function (IDropdownControlKeys) {
@@ -2371,29 +2372,29 @@ const DropdownMenuButton = /* @__PURE__ */React__default.forwardRef((props, ref)
     const getMenuButtonContent = () => {
         const isIconBefore = Boolean(icon && iconPosition !== 'right');
         const isIconAfter = Boolean(icon && iconPosition === 'right');
-        const iconElement = (React__default.createElement(IconButton, { icon: icon, color: isActive ? 'primary' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: cx$1(css$10.icon, iconPosition === 'right' ? css$10.iconAfter : css$10.iconBefore) }));
+        const iconElement = (React__default.createElement(IconButton, { icon: icon, color: isActive ? 'primary' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: cx$1(css$11.icon, iconPosition === 'right' ? css$11.iconAfter : css$11.iconBefore) }));
         return (React__default.createElement(React__default.Fragment, null,
             isIconBefore && iconElement,
-            React__default.createElement(Text$1, { cx: props.indent && css$10.indent }, caption),
+            React__default.createElement(Text$1, { cx: props.indent && css$11.indent }, caption),
             isIconAfter && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(FlexSpacer, null),
                 iconElement))));
     };
     const isAnchor = Boolean(link || href);
-    const itemClassNames = cx$1(props.cx, css$10.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened, (!isDisabled && onClick) && uuiMarkers.clickable);
-    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$10.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0, ...props.rawProps }, onClick: handleClick, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref, ...props.rawProps },
+    const itemClassNames = cx$1(props.cx, css$11.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened, (!isDisabled && onClick) && uuiMarkers.clickable);
+    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$11.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0, ...props.rawProps }, onClick: handleClick, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref, ...props.rawProps },
         getMenuButtonContent(),
         isSelected && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(FlexSpacer, null),
-            React__default.createElement(IconContainer, { icon: settings.dropdownMenu.icons.acceptIcon, cx: css$10.selectedMark })))));
+            React__default.createElement(IconContainer, { icon: settings.dropdownMenu.icons.acceptIcon, cx: css$11.selectedMark })))));
 });
 function DropdownMenuSplitter(props) {
-    return (React__default.createElement("div", { className: cx$1(props.cx, css$10.splitterRoot) },
-        React__default.createElement("hr", { className: css$10.splitter })));
+    return (React__default.createElement("div", { className: cx$1(props.cx, css$11.splitterRoot) },
+        React__default.createElement("hr", { className: css$11.splitter })));
 }
 function DropdownMenuHeader(props) {
-    return (React__default.createElement("div", { className: cx$1('uui-dropdown-menu-header', props.cx, css$10.headerRoot) },
-        React__default.createElement("span", { className: css$10.header }, props.caption)));
+    return (React__default.createElement("div", { className: cx$1('uui-dropdown-menu-header', props.cx, css$11.headerRoot) },
+        React__default.createElement("span", { className: css$11.header }, props.caption)));
 }
 function DropdownSubMenu(props) {
     const subMenuMiddleware = [
@@ -2408,7 +2409,7 @@ function DropdownSubMenu(props) {
         }),
     ];
     const isRtl = getDir() === 'rtl';
-    return (React__default.createElement(Dropdown$1, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: isRtl ? 'left-start' : 'right-start', middleware: subMenuMiddleware, renderBody: (dropdownProps) => !props.isDisabled && (React__default.createElement(DropdownMenuBody, { closeOnKey: IDropdownControlKeys.LEFT_ARROW, ...props, ...dropdownProps })), renderTarget: ({ toggleDropdownOpening, ...targetProps }) => (React__default.createElement(DropdownMenuButton, { cx: cx$1(isRtl ? css$10.submenuRootItemRtl : css$10.submenuRootItem), icon: settings.dropdownMenu.icons.dropdownIcon, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening, ...props, ...targetProps })) }));
+    return (React__default.createElement(Dropdown$1, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: isRtl ? 'left-start' : 'right-start', middleware: subMenuMiddleware, renderBody: (dropdownProps) => !props.isDisabled && (React__default.createElement(DropdownMenuBody, { closeOnKey: IDropdownControlKeys.LEFT_ARROW, ...props, ...dropdownProps })), renderTarget: ({ toggleDropdownOpening, ...targetProps }) => (React__default.createElement(DropdownMenuButton, { cx: cx$1(isRtl ? css$11.submenuRootItemRtl : css$11.submenuRootItem), icon: settings.dropdownMenu.icons.dropdownIcon, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening, ...props, ...targetProps })) }));
 }
 function DropdownMenuSwitchButton(props) {
     const context = useContext(UuiContext);
@@ -2431,29 +2432,29 @@ function DropdownMenuSwitchButton(props) {
             return;
         onHandleValueChange(!isSelected);
     };
-    return (React__default.createElement("div", { className: cx$1(props.cx, css$10.itemRoot, isDisabled && uuiMod.disabled, (!isDisabled || onValueChange) && uuiMarkers.clickable), onClick: handleClick, role: "menuitem", onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 },
-        icon && React__default.createElement(IconContainer, { icon: icon, cx: css$10.iconBefore }),
+    return (React__default.createElement("div", { className: cx$1(props.cx, css$11.itemRoot, isDisabled && uuiMod.disabled, (!isDisabled || onValueChange) && uuiMarkers.clickable), onClick: handleClick, role: "menuitem", onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 },
+        icon && React__default.createElement(IconContainer, { icon: icon, cx: css$11.iconBefore }),
         React__default.createElement(Text$1, null, caption),
         React__default.createElement(FlexSpacer, null),
         React__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":"U3-Md-","mode-block":"VIVbbx","modeBlock":"VIVbbx","mode-inline":"wnxxl9","modeInline":"wnxxl9","padding-0":"_7wi1Wm","padding0":"_7wi1Wm","padding-6":"RJhKC-","padding6":"RJhKC-","padding-12":"_1CFvpf","padding12":"_1CFvpf","padding-18":"Thn503","padding18":"Thn503"};
 
 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__ */withMods(uuiComponents.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":"Z-SlmT","align-items":"W-C53l","alignItems":"W-C53l","justify-content":"BhbeRd","justifyContent":"BhbeRd","border-top":"ZIHeU-","borderTop":"ZIHeU-","border-bottom":"zJMY8A","borderBottom":"zJMY8A","top-shadow":"H1pdqB","topShadow":"H1pdqB","padding":"ehBSCa","margin":"_7mfEmz","vPadding":"_42qAX5","column-gap":"MpcFbp","columnGap":"MpcFbp","row-gap":"zv8IUA","rowGap":"zv8IUA","spacing":"-E7kJr"};
 
-const FlexCell = /* @__PURE__ */withMods(FlexCell$1, () => [css$_.flexCell]);
+const FlexCell = /* @__PURE__ */withMods(FlexCell$1, () => [css$$.flexCell]);
 
 const FlexRow = /* @__PURE__ */forwardRef((props, ref) => {
     if (process.env.NODE_ENV !== "production") {
@@ -2462,22 +2463,22 @@ const FlexRow = /* @__PURE__ */forwardRef((props, ref) => {
         }
     }
     const classNames = cx$1([
-        css$_.root,
+        css$$.root,
         'uui-flex-row',
         props.onClick && 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;
@@ -2503,22 +2504,22 @@ const FlexRow = /* @__PURE__ */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":"HGB-2U","margin-24":"uqfsvF","margin24":"uqfsvF","padding-12":"IvWhcQ","padding12":"IvWhcQ","padding-24":"_80IJbz","padding24":"_80IJbz","shadow":"KXuJbL","uui-surface-main":"_9zc2FW","uuiSurfaceMain":"_9zc2FW"};
 
 const Panel = /* @__PURE__ */withMods(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":"ni2YI-"};
 
 function applyLabeledInputMods(mods) {
     return [
         'uui-labeled-input',
-        css$Y.root,
+        css$Z.root,
         'uui-size-' + (mods.size || settings.labeledInput.sizes.default),
     ];
 }
@@ -2535,7 +2536,7 @@ function applyLabeledInputProps(props) {
 }
 const LabeledInput = /* @__PURE__ */withMods(uuiComponents.LabeledInput, applyLabeledInputMods, applyLabeledInputProps);
 
-var css$X = {"root":"hosaSA"};
+var css$Y = {"root":"UZhKOX"};
 
 function RadioGroup(props) {
     const direction = props.direction || 'vertical';
@@ -2544,13 +2545,13 @@ function RadioGroup(props) {
             props.onValueChange(newVal);
         }
     };
-    return (React.createElement("fieldset", { ref: props.forwardedRef, className: cx$1(css$X.root, directionMode[direction], props.cx), onFocus: props.onFocus, onBlur: props.onBlur, ...props.rawProps }, props.items.map((i) => {
+    return (React.createElement("fieldset", { ref: props.forwardedRef, className: cx$1(css$Y.root, directionMode[direction], props.cx), onFocus: props.onFocus, onBlur: props.onBlur, ...props.rawProps }, props.items.map((i) => {
         const { id, name, renderName, ...restItemProps } = i;
         return (React.createElement(RadioInput, { name: props.name, renderLabel: i.renderName ? i.renderName : () => i.name, value: props.value === i.id, onValueChange: () => handleChange(i.id), isDisabled: props.isDisabled || i.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, isRequired: props.isRequired, key: i.id.toString(), size: props.size || i.size, ...restItemProps }));
     })));
 }
 
-var css$W = {"root":"N728oL","viewport":"LFYBLp"};
+var css$X = {"root":"T0M4Za","viewport":"X0b4Uh"};
 
 var uuiScrollbars;
 (function (uuiScrollbars) {
@@ -2624,12 +2625,12 @@ const ScrollBars = /* @__PURE__ */forwardRef((props, ref) => {
             view: viewportRef.current,
         };
     }, []);
-    return (React__default.createElement("div", { ref: hostRef, className: cx(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__default.createElement("div", { className: css$W.viewport, "data-overlayscrollbars-contents": "", ref: (node) => { viewportRef.current = node; }, ...rawProps }, children)));
+    return (React__default.createElement("div", { ref: hostRef, className: cx(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__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":"QgfRYz","scrollContainer":"QgfRYz","list-container":"QpcaQM","listContainer":"QpcaQM"};
 
 const VirtualList = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const { listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef, } = useVirtualList({
@@ -2645,7 +2646,7 @@ const VirtualList = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const [blockerInset, setBlockerInset] = React__default.useState(null);
     const renderRows = () => props.renderRows?.({
         listContainerRef, estimatedHeight, offsetY,
-    }) || (React__default.createElement("div", { className: css$V.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+    }) || (React__default.createElement("div", { className: css$W.listContainer, style: { minHeight: `${estimatedHeight}px` } },
         React__default.createElement("div", { ref: listContainerRef, role: props.role, style: { marginTop: offsetY } }, props.rows)));
     const scrollBarsRef = React__default.useCallback((scrollbars) => {
         if (!scrollbars?.view)
@@ -2671,7 +2672,7 @@ const VirtualList = /* @__PURE__ */React__default.forwardRef((props, ref) => {
             updateBlockerInset();
         }
     }, [props.isLoading, updateBlockerInset]);
-    return (React__default.createElement(ScrollBars, { cx: cx$1(css$V.scrollContainer, props.cx), onScroll: handleScroll, ref: scrollBarsRef, rawProps: rawProps, overflowTopEffect: props.overflowTopEffect, overflowBottomEffect: props.overflowBottomEffect, autoHide: props.isLoading ? 'scroll' : undefined },
+    return (React__default.createElement(ScrollBars, { cx: cx$1(css$W.scrollContainer, props.cx), onScroll: handleScroll, ref: scrollBarsRef, rawProps: rawProps, overflowTopEffect: props.overflowTopEffect, overflowBottomEffect: props.overflowBottomEffect, autoHide: props.isLoading ? 'scroll' : undefined },
         renderRows(),
         React__default.createElement(Blocker, { isEnabled: props.isLoading, inset: blockerInset })));
 });
@@ -2704,7 +2705,7 @@ function Tree(props) {
     return (React.createElement(VirtualList, { value: value, onValueChange: onValueChange, rowsCount: rowsCount, rows: renderedRows, cx: cx$1(propsCx), role: "tree" }));
 }
 
-var css$U = {"root":"c-RFxN"};
+var css$V = {"root":"q56bHV"};
 
 function CheckboxGroup(props) {
     const currentValue = props.value || [];
@@ -2720,7 +2721,7 @@ function CheckboxGroup(props) {
         }
         props.onValueChange(newSelection);
     };
-    return (React.createElement("fieldset", { ref: props.forwardedRef, className: cx$1(css$U.root, directionMode[direction], props.cx), ...props.rawProps }, props.items.map((i) => {
+    return (React.createElement("fieldset", { ref: props.forwardedRef, className: cx$1(css$V.root, directionMode[direction], props.cx), ...props.rawProps }, props.items.map((i) => {
         const { id, name, renderName, ...restItemProps } = i;
         return (React.createElement(Checkbox, { renderLabel: i.renderName ? i.renderName : () => i.name, value: currentValue.indexOf(i.id) !== -1, onValueChange: (selected) => handleChange(selected, i.id), isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, isRequired: props.isRequired, key: i.id.toString(), size: props.size || i.size, ...restItemProps }));
     })));
@@ -2806,10 +2807,10 @@ const Tabs = /* @__PURE__ */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":"XKnBMo","modal-blocker":"_0O3spk","modalBlocker":"_0O3spk","animateModalBlocker":"kqkoZ6","modal":"d2-FBI","modal-footer":"_1Q1Hzc","modalFooter":"_1Q1Hzc","border-top":"UKcBxb","borderTop":"UKcBxb","modal-header":"cLulyv","modalHeader":"cLulyv","border-bottom":"_4XO1DX","borderBottom":"_4XO1DX"};
 
-const ModalBlocker = /* @__PURE__ */withMods(ModalBlocker$1, () => [css$T.modalBlocker]);
-const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$T.root, css$T.modal], (props) => {
+const ModalBlocker = /* @__PURE__ */withMods(ModalBlocker$1, () => [css$U.modalBlocker]);
+const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$U.root, css$U.modal], (props) => {
     const width = props.width;
     const height = props.height || 'auto';
     const maxHeight = isMobile() ? 'var(--uui-modals-mobile-max-height)' : (props.maxHeight || 'var(--uui-modals-max-height)');
@@ -2823,7 +2824,7 @@ const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$T.root, cs
     };
 });
 function ModalHeader(props) {
-    return (React__default.createElement("div", { className: cx(css$T.root, css$T.modalHeader, 'uui-modal-header', props.borderBottom && css$T.borderBottom, props.cx), ...props.rawProps, style: {
+    return (React__default.createElement("div", { className: cx(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__default.createElement("div", { className: cx('uui-modal-title', 'uui-typography') }, props.title)),
@@ -2833,7 +2834,7 @@ function ModalHeader(props) {
             React__default.createElement(IconButton, { rawProps: { 'aria-label': 'Close modal' }, icon: settings.modal.icons.closeIcon, onClick: props.onClose })))));
 }
 function ModalFooter(props) {
-    return (React__default.createElement("div", { className: cx(css$T.root, css$T.modalFooter, 'uui-modal-footer', props.borderTop && css$T.borderTop, props.cx), ...props.rawProps, style: {
+    return (React__default.createElement("div", { className: cx(css$U.root, css$U.modalFooter, 'uui-modal-footer', props.borderTop && css$U.borderTop, props.cx), ...props.rawProps, style: {
             ...props.rawProps?.style,
         } }, props.children));
 }
@@ -2879,6 +2880,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: {
@@ -2999,7 +3006,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":"_7shHNH","icon-wrapper":"_975Ysu","iconWrapper":"_975Ysu","action-wrapper":"YbfLOv","actionWrapper":"YbfLOv","close-icon":"ZE2eO-","closeIcon":"ZE2eO-","main-path":"CYyA41","mainPath":"CYyA41","content":"VJ72iQ","close-wrapper":"ZZc4wK","closeWrapper":"ZZc4wK","clear-notifications":"QBrA5Z","clearNotifications":"QBrA5Z"};
 
 const NotificationCard = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const notificationCardNode = React__default.useRef(null);
@@ -3012,15 +3019,15 @@ const NotificationCard = /* @__PURE__ */React__default.forwardRef((props, ref) =
             notificationCardNode.current?.removeEventListener('mouseleave', props.refreshTimer);
         };
     }, []);
-    return (React__default.createElement("div", { role: "alert", className: cx('uui-notification_card', props.color && `uui-color-${props.color}`, css$S.root, props.cx), ref: notificationCardNode, ...props.rawProps },
-        React__default.createElement("div", { className: css$S.mainPath },
-            props.icon && (React__default.createElement("div", { className: css$S.iconWrapper },
+    return (React__default.createElement("div", { role: "alert", className: cx('uui-notification_card', props.color && `uui-color-${props.color}`, css$T.root, props.cx), ref: notificationCardNode, ...props.rawProps },
+        React__default.createElement("div", { className: css$T.mainPath },
+            props.icon && (React__default.createElement("div", { className: css$T.iconWrapper },
                 React__default.createElement(IconContainer, { size: settings.notificationCard.sizes.icon, icon: props.icon }))),
-            React__default.createElement("div", { className: css$S.content },
+            React__default.createElement("div", { className: css$T.content },
                 props.children,
-                props.actions && (React__default.createElement("div", { className: css$S.actionWrapper }, props.actions.map((action) => (React__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__default.createElement("div", { className: cx(css$S.closeWrapper, 'uui-notification_card-close_icon') },
-                React__default.createElement(IconButton, { icon: settings.notificationCard.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$S.closeIcon }))))));
+                props.actions && (React__default.createElement("div", { className: css$T.actionWrapper }, props.actions.map((action) => (React__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__default.createElement("div", { className: cx(css$T.closeWrapper, 'uui-notification_card-close_icon') },
+                React__default.createElement(IconButton, { icon: settings.notificationCard.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$T.closeIcon }))))));
 });
 const WarningNotification = /* @__PURE__ */React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, { icon: settings.notificationCard.icons.warningIcon, color: "warning", ...props, ref: ref, cx: props.cx })));
 const SuccessNotification = /* @__PURE__ */React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, { icon: settings.notificationCard.icons.successIcon, color: "success", ...props, ref: ref, cx: props.cx })));
@@ -3028,11 +3035,11 @@ const HintNotification = /* @__PURE__ */React__default.forwardRef((props, ref) =
 const ErrorNotification = /* @__PURE__ */React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, { icon: settings.notificationCard.icons.errorIcon, color: "error", ...props, ref: ref, cx: props.cx })));
 function ClearNotification() {
     const uuiCtx = useUuiContext();
-    return (React__default.createElement("div", { className: cx(css$S.clearNotifications, 'uui-clear-notifications') },
+    return (React__default.createElement("div", { className: cx(css$T.clearNotifications, 'uui-clear-notifications') },
         React__default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
 }
 
-var css$R = {"footer":"fxjZ3J"};
+var css$S = {"footer":"_5JYDVq"};
 
 class ConfirmationModal extends React.Component {
     render() {
@@ -3044,7 +3051,7 @@ class ConfirmationModal extends React.Component {
             React.createElement(ModalWindow, { width: 420 },
                 React.createElement(ModalHeader, { borderBottom: true, title: this.props.caption, onClose: () => this.props.abort() }),
                 React.createElement(ScrollBars, null, bodyContent),
-                React.createElement(ModalFooter, { cx: css$R.footer },
+                React.createElement(ModalFooter, { cx: css$S.footer },
                     this.props.hideCancelButton || (React.createElement(Button, { caption: i18n.form.modals.discardButton, onClick: () => this.props.success(false), fill: "outline", color: "secondary" })),
                     React.createElement(Button, { caption: i18n.form.modals.saveButton, onClick: () => this.props.success(true), color: "primary" })))));
     }
@@ -3064,7 +3071,7 @@ function Snackbar(props) {
         };
         items = [clearOperation].concat(items);
     }
-    return React.createElement(Snackbar$1, { forwardedRef: props.forwardedRef, notifications: items });
+    return (React.createElement(Snackbar$1, { forwardedRef: props.forwardedRef, notifications: items, zIndex: uuiCtx.uuiLayout.getTopOverlayZIndex() }));
 }
 /**
  *  https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
@@ -3074,9 +3081,10 @@ function useReliableForceUpdate() {
     return red[1];
 }
 
-var css$Q = {"root":"wUEcRD","container":"Hsf-Hn"};
+var css$R = {"root":"hUcydF","container":"wmwA82"};
 
 const defaultFormat = 'MMM D, YYYY';
+const defaultFormatShort = 'MMM D';
 const valueFormat = 'YYYY-MM-DD';
 const supportedDateFormats = (format) => {
     return [
@@ -3294,21 +3302,21 @@ function DatePickerHeader({ navIconLeft, navIconRight, value: { month, view }, o
     }, [view, month]);
     const disablePrev = view === 'YEAR_SELECTION' && !isYearWithinSoberRange(getPrevYearsList(month));
     const disableNext = view === 'YEAR_SELECTION' && !isYearWithinSoberRange(getNextYearsList(month));
-    return (React.createElement("div", { className: cx(css$Q.root, uuiHeader.container, cx) },
+    return (React.createElement("div", { className: cx(css$R.root, uuiHeader.container, cx) },
         React.createElement("header", { className: uuiHeader.headerNav },
             React.createElement(Button, { icon: navIconLeft || settings.datePicker.icons.body.prevIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconLeft, onClick: !isDisabled && (() => onLeftNavigationArrow()), isDisabled: disablePrev }),
             React.createElement(Button, { caption: title, fill: "ghost", cx: uuiHeader.navTitle, onClick: !isDisabled && (() => onCaptionClick(view)) }),
             React.createElement(Button, { icon: navIconRight || settings.datePicker.icons.body.nextIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
 }
 
-var css$P = {"root":"U9XqRW"};
+var css$Q = {"root":"OWIGm-"};
 
-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__ */withMods(Calendar$1, applyDateSelectionMods);
 
-var css$O = {"root":"I6IzHT"};
+var css$P = {"root":"fSa2z0"};
 
 const uuiDatePickerBody = {
     wrapper: 'uui-datepicker-body-wrapper',
@@ -3327,7 +3335,7 @@ function DatePickerBodyComp(props, ref) {
     return (React__default.createElement(StatelessDatePickerBody, { ref: ref, ...props, month: month, view: view, onValueChange: onValueChange, onMonthChange: (m) => setMonth(m), onViewChange: (v) => setView(v) }));
 }
 const StatelessDatePickerBody = /* @__PURE__ */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 = useMemo(() => uuiDayjs.dayjs(value), [value]);
     const onMonthClick = (newDate) => {
         onMonthChange(newDate);
@@ -3349,11 +3357,11 @@ function StatelessDatePickerBodyComp({ renderDay, isHoliday, cx: classes, filter
             case 'YEAR_SELECTION':
                 return (React__default.createElement(YearSelection, { selectedDate: selectedDate, value: month, onValueChange: onYearClick }));
             case 'DAY_SELECTION':
-                return (React__default.createElement(Calendar, { value: selectedDate, month: month, onValueChange: onDayClick, filter: filter, renderDay: renderDay, isHoliday: isHoliday, isDisabled: isDisabled }));
+                return (React__default.createElement(Calendar, { value: selectedDate, month: month, onValueChange: onDayClick, filter: filter, renderDay: renderDay, isHoliday: isHoliday, isDisabled: isDisabled, size: size }));
         }
     };
-    return (React__default.createElement("div", { ref: ref, className: cx$1(uuiDatePickerBodyBase.container, `uui-size-${settings.datePicker.sizes.body}`, classes), ...rawProps },
-        React__default.createElement("div", { className: cx$1(css$O.root, uuiDatePickerBody.wrapper) },
+    return (React__default.createElement("div", { ref: ref, className: cx$1(uuiDatePickerBodyBase.container, `uui-size-${size ?? settings.datePicker.sizes.body}`, classes), ...rawProps },
+        React__default.createElement("div", { className: cx$1(css$P.root, uuiDatePickerBody.wrapper) },
             React__default.createElement(DatePickerHeader, { value: {
                     view,
                     month,
@@ -3435,9 +3443,9 @@ function DatePickerComponent(props, ref) {
 }
 const DatePicker = /* @__PURE__ */React__default.forwardRef(DatePickerComponent);
 
-var css$N = {"date-input":"zbGePZ","dateInput":"zbGePZ","root":"qkA0bQ","separator":"cwATGW"};
+var css$O = {"date-input":"DagCAJ","dateInput":"DagCAJ","root":"kivC-5","separator":"wO39Qo"};
 
-const RangeDatePickerInput = /* @__PURE__ */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__ */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] = useState(toCustomDateRangeFormat(value, format));
     useEffect(() => {
         setInputValue(toCustomDateRangeFormat(value, format));
@@ -3506,13 +3514,13 @@ const RangeDatePickerInput = /* @__PURE__ */forwardRef(({ isDisabled, isInvalid,
         && ((value.from && !preventEmptyFromDate) || (value.to && !preventEmptyToDate));
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    React__default.createElement("div", { ref: ref, className: cx$1(`uui-size-${size || settings.rangeDatePicker.sizes.default}`, 'uui-range-date-picker', classes, css$N.root, isDisabled && uuiMod.disabled, isReadonly && uuiMod.readonly, isInvalid && uuiMod.invalid, inFocus && uuiMod.focus), onKeyDown: onKeyDown },
-        React__default.createElement(TextInput, { icon: settings.rangeDatePicker.icons.input.calendarIcon, cx: cx$1(css$N.dateInput, inFocus === 'from' && uuiMod.focus), size: size || settings.rangeDatePicker.sizes.default, placeholder: getPlaceholder ? getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: inputValue.from || undefined, onValueChange: (v) => onInputChange(v || '', 'from'), onFocus: (event) => handleFocus(event, 'from'), onBlur: (event) => handleBlur(event, 'from'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.from, onClick: onClick, onKeyDown: onInputKeyDown, id: id }),
-        React__default.createElement("div", { className: css$N.separator }),
-        React__default.createElement(TextInput, { cx: cx$1(css$N.dateInput, inFocus === 'to' && 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__default.createElement("div", { ref: ref, className: cx$1(`uui-size-${size || settings.rangeDatePicker.sizes.default}`, 'uui-range-date-picker', classes, css$O.root, isDisabled && uuiMod.disabled, isReadonly && uuiMod.readonly, isInvalid && uuiMod.invalid, inFocus && uuiMod.focus), onKeyDown: onKeyDown },
+        React__default.createElement(TextInput, { icon: settings.rangeDatePicker.icons.input.calendarIcon, cx: cx$1(css$O.dateInput, inFocus === 'from' && uuiMod.focus), size: size || settings.rangeDatePicker.sizes.default, placeholder: getPlaceholder ? getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: inputValue.from || undefined, onValueChange: (v) => onInputChange(v || '', 'from'), onFocus: (event) => handleFocus(event, 'from'), onBlur: (event) => handleBlur(event, 'from'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.from, onClick: onClick, onIconClick: onIconClick, onKeyDown: onInputKeyDown, id: id }),
+        React__default.createElement("div", { className: css$O.separator }),
+        React__default.createElement(TextInput, { cx: cx$1(css$O.dateInput, inFocus === 'to' && 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":"lauh2W"};
 
 const uuiPresets = {
     container: 'uui-presets-container',
@@ -3527,12 +3535,14 @@ const getPresets = (presets) => {
     })).sort((a, b) => a.order - b.order);
 };
 function CalendarPresets(props) {
-    return (React.createElement("div", { ref: props.forwardedRef, className: cx$1(uuiPresets.container, css$M.root, props.cx), ...props.rawProps },
+    const isMobileView = isMobile();
+    const presetSize = isMobileView ? settings.rangeDatePicker.sizes.mobilePreset : settings.rangeDatePicker.sizes.preset;
+    return (React.createElement("div", { ref: props.forwardedRef, className: cx$1(uuiPresets.container, css$N.root, props.cx), ...props.rawProps },
         React.createElement("div", { className: uuiPresets.header }, "Presets"),
-        getPresets(props.presets).map((item) => (React.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: settings.rangeDatePicker.sizes.preset })))));
+        getPresets(props.presets).map((item) => (React.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":"-jHoSJ","container":"DKsALl","day-selection":"F0dQOL","daySelection":"F0dQOL","mobile":"-UCgAD","from-picker":"_-4GzyN","fromPicker":"_-4GzyN","to-picker":"Yp6EPW","toPicker":"Yp6EPW","bodes-wrapper":"A9xQa2","bodesWrapper":"A9xQa2","blocker":"_5nS4ST"};
 
 const uuiRangeDatePickerBody = {
     inRange: 'uui-range-datepicker-in-range',
@@ -3613,9 +3623,14 @@ function RangeDatePickerBodyComp(props, ref) {
     const selectedDate = _selectedDate || defaultRangeValue; // also handles null in comparison to default value
     const [view, setView] = useState('DAY_SELECTION');
     const [disabledPanel, setDisabledPanel] = useState(null);
-    const [month, setMonth] = useState(() => {
-        return getDisplayedMonth(selectedDate, inFocus, initialViewMonth);
-    });
+    const [month, setMonth] = useState(() => getDisplayedMonth(selectedDate, inFocus, initialViewMonth));
+    const isMobileView = isMobile();
+    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') {
@@ -3662,7 +3677,7 @@ function RangeDatePickerBodyComp(props, ref) {
     };
     const renderPresets = (presets) => {
         return (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement("div", { className: uuiRangeDatePickerBody.separator }),
+            !isMobileView && React__default.createElement("div", { className: uuiRangeDatePickerBody.separator }),
             React__default.createElement(CalendarPresets, { onPresetSet: (presetVal) => {
                     // enable day if smth other were selected
                     setView('DAY_SELECTION');
@@ -3679,35 +3694,37 @@ function RangeDatePickerBodyComp(props, ref) {
     };
     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__default.createElement("div", { ref: ref, className: cx(css$L.root, uuiDatePickerBodyBase.container, props.cx), ...props.rawProps, "aria-multiselectable": "true" },
-        React__default.createElement(FlexRow, { cx: [view === 'DAY_SELECTION' && css$L.daySelection, css$L.container], alignItems: "top" },
-            React__default.createElement(FlexCell, { width: "auto" },
-                React__default.createElement(FlexRow, null,
-                    React__default.createElement(FlexRow, { cx: css$L.bodesWrapper, alignItems: "top" },
-                        React__default.createElement(StatelessDatePickerBody, { key: "date-picker-body-left", cx: cx(css$L.fromPicker), ...from, onValueChange: (v) => onBodyValueChange(v), onMonthChange: (m) => {
+    return (React__default.createElement("div", { ref: ref, className: cx(css$M.root, uuiDatePickerBodyBase.container, props.cx), ...props.rawProps, "aria-multiselectable": "true" },
+        React__default.createElement(FlexRow, { cx: [view === 'DAY_SELECTION' && css$M.daySelection, isMobileView && css$M.mobile, css$M.container], alignItems: "top" },
+            React__default.createElement(FlexCell, { width: "auto", grow: 1 },
+                React__default.createElement(FlexRow, { alignItems: isMobileView ? 'stretch' : undefined },
+                    React__default.createElement(FlexRow, { cx: css$M.bodesWrapper, alignItems: "top" },
+                        React__default.createElement(StatelessDatePickerBody, { key: "date-picker-body-left", cx: cx(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__default.createElement(StatelessDatePickerBody, { key: "date-picker-body-right", cx: cx(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__default.createElement(StatelessDatePickerBody, { key: "date-picker-body-right", cx: cx(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__default.createElement("div", { style: {
+                            }, filter: props.filter, renderDay: props.renderDay || renderDay, isHoliday: props.isHoliday, isDisabled: disabledPanel === 'right' })),
+                        !isMobileView && view !== 'DAY_SELECTION' && (React__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__default.createElement("div", { className: "uui-range-datepicker-body-footer" }, props.renderFooter()))))));
 }
 const getDayCX = ({ inRange, isFirst, isLast }) => {
     return [
@@ -3734,7 +3751,48 @@ const getDayState = (day, selectedDate) => {
     };
 };
 
-var css$K = {"dropdown-container":"EBaWD4","dropdownContainer":"EBaWD4"};
+var css$L = {"root":"VSgNsB","modal-title":"d7fK8R","modalTitle":"d7fK8R","range-selector":"_19UJz6","rangeSelector":"_19UJz6","range-selector-button":"Ig4ijh","rangeSelectorButton":"Ig4ijh","header-range-separator":"QZ-ddQ","headerRangeSeparator":"QZ-ddQ","body":"YWoAoo"};
+
+function RangeDatePickerModal({ success, abort, isActive, zIndex, key, pickerProps, initialValue, }) {
+    const [modalValue, setModalValue] = useState(initialValue);
+    const [inFocus, setInFocus] = useState(pickerProps.initialInFocus ?? 'from');
+    const onModalBodyValueChange = (newValue) => {
+        setInFocus(newValue.inFocus ?? inFocus);
+        setModalValue(newValue.selectedDate);
+    };
+    const onClearAll = 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 = useMemo(() => getDateButtonCaption(modalValue?.from ?? null, i18n.rangeDatePicker.mobileModalStartPlaceholder), [modalValue?.from]);
+    const endDateButtonCaption = useMemo(() => getDateButtonCaption(modalValue?.to ?? null, i18n.rangeDatePicker.mobileModalEndPlaceholder), [modalValue?.to]);
+    const hideClearButton = pickerProps.disableClear || (pickerProps.preventEmptyToDate && pickerProps.preventEmptyFromDate);
+    const renderModalHeaderTitle = () => {
+        return (React__default.createElement(FlexCell, null,
+            React__default.createElement("h4", { className: css$L.modalTitle }, i18n.rangeDatePicker.mobileModalTitle),
+            React__default.createElement("h2", { className: css$L.rangeSelector },
+                React__default.createElement(LinkButton, { cx: css$L.rangeSelectorButton, color: inFocus === 'from' ? 'primary' : 'secondary', size: "36", caption: startDateButtonCaption, onClick: () => setInFocus('from') }),
+                React__default.createElement("span", { className: css$L.headerRangeSeparator }, " \u2013 "),
+                React__default.createElement(LinkButton, { cx: css$L.rangeSelectorButton, color: inFocus === 'to' ? 'primary' : 'secondary', size: "36", caption: endDateButtonCaption, onClick: () => setInFocus('to') }))));
+    };
+    return (React__default.createElement(ModalBlocker, { key: key, isActive: isActive, zIndex: zIndex, success: () => success(modalValue), abort: abort },
+        React__default.createElement(ModalWindow, { cx: css$L.root },
+            React__default.createElement(ModalHeader, { title: renderModalHeaderTitle(), borderBottom: true, onClose: abort }),
+            React__default.createElement(FlexRow, { cx: css$L.body, alignItems: "stretch" },
+                React__default.createElement(RangeDatePickerBody, { cx: cx(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__default.createElement(ModalFooter, { borderTop: true },
+                !hideClearButton && React__default.createElement(Button, { fill: "ghost", color: "primary", caption: i18n.rangeDatePicker.mobileModalClearAll, onClick: onClearAll, icon: ForwardRef$D }),
+                React__default.createElement(FlexSpacer, null),
+                React__default.createElement(Button, { fill: "outline", color: "secondary", caption: i18n.rangeDatePicker.mobileModalCancel, onClick: abort }),
+                React__default.createElement(Button, { color: "primary", caption: i18n.rangeDatePicker.mobileModalApply, onClick: () => success(modalValue) })))));
+}
+
+var css$K = {"dropdown-container":"fE4YH2","dropdownContainer":"fE4YH2"};
 
 function RangeDatePickerComponent(props, ref) {
     const { value: _value, format = defaultFormat, size = settings.rangeDatePicker.sizes.default } = props;
@@ -3742,7 +3800,8 @@ function RangeDatePickerComponent(props, ref) {
     const context = useUuiContext();
     const [isOpen, setIsOpen] = useState(false);
     const [inFocus, setInFocus] = useState(null);
-    const targetRef = React__default.useRef(null);
+    const targetRef = useRef(null);
+    const isMobileView = isMobile();
     useImperativeHandle(ref, () => targetRef.current);
     const onValueChange = (newValue) => {
         const fromChanged = value?.from !== newValue?.from;
@@ -3777,32 +3836,68 @@ function RangeDatePickerComponent(props, ref) {
             onOpenChange(false);
         }
     };
-    const renderBody = (renderProps) => {
-        return (React__default.createElement(DropdownContainer, { ...renderProps, cx: cx(css$K.dropdownContainer), shards: [targetRef], returnFocus: true },
-            React__default.createElement(FlexRow, null,
-                React__default.createElement(RangeDatePickerBody, { cx: cx(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__default.createElement(Dropdown$1, { renderTarget: (renderProps) => {
-            return props.renderTarget?.(renderProps) || (React__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: [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__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__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__default.isValidElement(customTarget) ? customTarget : renderInput());
+    }
+    const renderBody = (renderProps) => (React__default.createElement(DropdownContainer, { ...renderProps, cx: css$K.dropdownContainer, shards: [targetRef], returnFocus: true },
+        React__default.createElement(FlexRow, null,
+            React__default.createElement(RangeDatePickerBody, { cx: cx(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__default.createElement(Dropdown$1, { renderTarget: (rp) => props.renderTarget?.(rp) || renderInput(rp), renderBody: renderBody, onValueChange: onOpenChange, value: isOpen, middleware: [offset(6)], placement: props.placement, ref: ref }));
 }
 const RangeDatePicker = /* @__PURE__ */React__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":"maTKp4","blocker":"gYjwcI","marker":"Ff4Pem","top":"I0IWd3","bottom":"VnDksB","left":"NnyvlD","right":"XUX7Ti","inside":"CvOpcI"};
 
 function DropMarker(props) {
     return props.isDndInProgress
@@ -3817,9 +3912,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":"g-azNb","search-wrapper":"JHMbZN","searchWrapper":"JHMbZN","no-data":"_-4M4vI","noData":"_-4M4vI","empty-status-announcer":"LkRzVU","emptyStatusAnnouncer":"LkRzVU"};
 
-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":"hYBwLX","pickerRow":"hYBwLX","align-widgets-top":"_6Hepcm","alignWidgetsTop":"_6Hepcm","row-content":"SMnTSq","rowContent":"SMnTSq","align-widgets-center":"F6ufsC","alignWidgetsCenter":"F6ufsC","icon-container":"xuXXsH","iconContainer":"xuXXsH","content-wrapper":"_6OAqMx","contentWrapper":"_6OAqMx","icon-wrapper":"SWfkLg","iconWrapper":"SWfkLg","icon-default":"nW0aHI","iconDefault":"nW0aHI","selected-mark":"lUqefC","selectedMark":"lUqefC"};
 
 const mergeHighlightRanges = (ranges) => {
     const mergedRanges = [];
@@ -3886,7 +3981,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":"XVZ0ZG","column-gap":"nOU9VB","columnGap":"nOU9VB","title":"XbAzli","subtitle":"SXIiEv","disabled":"ygP3K7","multiline":"s5-Gyb"};
 
 function PickerItem(props) {
     const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, } = props;
@@ -4112,7 +4207,7 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = /* @__PURE__ */React__default.memo(DataPickerFooterImpl);
 
-var css$F = {"header":"_3pafpm","title":"X-mCig","close":"O1kxO5"};
+var css$F = {"header":"-Mb28k","title":"ax8PlP","close":"NoGLtT"};
 
 const DataPickerMobileHeaderImpl = (props) => {
     const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
@@ -4122,7 +4217,7 @@ const DataPickerMobileHeaderImpl = (props) => {
 };
 const DataPickerMobileHeader = /* @__PURE__ */React__default.memo(DataPickerMobileHeaderImpl);
 
-var css$E = {"done":"C-hjqE","container":"qfSqGc"};
+var css$E = {"done":"zefP-H","container":"PCAgME"};
 
 const PickerBodyMobileView = (props) => {
     const isMobileView = isMobile();
@@ -4134,7 +4229,7 @@ const PickerBodyMobileView = (props) => {
         isMobileView && (React__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":"j5kReQ","subHeaderWrapper":"j5kReQ","switch":"wTgQjb","search":"_4HWXVh","no-found-modal-container":"QP5BBm","noFoundModalContainer":"QP5BBm","no-found-modal-container-icon":"MiGWYg","noFoundModalContainerIcon":"MiGWYg","no-found-modal-container-text":"H6zS0F","noFoundModalContainerText":"H6zS0F","body":"_1c-rqy"};
 
 function PickerModal(props) {
     const { view, selection, dataSourceStateLens, dataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = usePickerModal(props);
@@ -4148,8 +4243,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__default.createElement(React__default.Fragment, null,
-            view.selectAll && !hasSelection && (React__default.createElement(LinkButton, { caption: i18n.pickerModal.selectAllButton, onClick: () => view.selectAll.onValueChange(true) })),
+            view.selectAll && !hasSelection && (React__default.createElement(LinkButton, { caption: i18n.pickerModal.selectAllButton, onClick: () => view.selectAll.onValueChange(true), isDisabled: isSelectAllDisabled })),
             showClear && (React__default.createElement(LinkButton, { caption: isSingleSelect() ? i18n.pickerModal.clearButton : i18n.pickerModal.clearAllButton, onClick: () => clearSelection(), isDisabled: isClearDisabled })),
             React__default.createElement(FlexSpacer, null),
             React__default.createElement(Button, { fill: "outline", color: "secondary", caption: i18n.pickerModal.cancelButton, onClick: () => props.abort() }),
@@ -4195,7 +4291,7 @@ function PickerModal(props) {
             React__default.createElement(ModalFooter, null, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$C = {"tooltip":"sDXKuB","noShrink":"iwYIz2"};
+var css$C = {"tooltip":"eIVRis","noShrink":"LXn8Mh"};
 
 const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     const tagProps = {
@@ -4214,7 +4310,7 @@ const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     }
 });
 
-var css$B = {"root":"HaJ1QH"};
+var css$B = {"root":"L8USrH"};
 
 const defaultMode = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
@@ -4296,7 +4392,7 @@ function PickerInputComponent(props, ref) {
 }
 const PickerInput = /* @__PURE__ */React__default.forwardRef(PickerInputComponent);
 
-var css$A = {"row":"wbZsb-"};
+var css$A = {"row":"lRAjnR"};
 
 function PickerListRow(props) {
     let label;
@@ -4316,7 +4412,7 @@ function PickerListRow(props) {
     return (React__default.createElement("div", { role: "option", "aria-selected": props.isSelectable ? props.isSelected : undefined, "aria-busy": props.isLoading, "aria-posinset": props.index + 1, ...(props.checkbox?.isVisible && { 'aria-checked': props.isChecked }), className: css$A.row }, component));
 }
 
-var css$z = {"root":"_19OH28"};
+var css$z = {"root":"MfXVcE"};
 
 function PickerList(props) {
     const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, getModalTogglerCaption, } = usePickerList(props);
@@ -4351,7 +4447,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":"uZ2Iff","wrapper":"IuoS6S","align-widgets-top":"kBOnKx","alignWidgetsTop":"kBOnKx","align-widgets-center":"u95m29","alignWidgetsCenter":"u95m29"};
 
 function DataTableCell(initialProps) {
     const props = { ...initialProps };
@@ -4401,7 +4497,7 @@ function DataTableCell(initialProps) {
     return React.createElement(DataTableCell$1, { ...props });
 }
 
-var css$x = {"root":"Hg853r"};
+var css$x = {"root":"HzWMvC"};
 
 // 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.
@@ -4417,7 +4513,7 @@ const DataTableRow = /* @__PURE__ */withMods(DataTableRow$1, ({ borderBottom = t
     ];
 }, () => propsMods);
 
-var css$w = {"sorting-panel-container":"_0NVWU2","sortingPanelContainer":"_0NVWU2"};
+var css$w = {"sorting-panel-container":"hQ3TXR","sortingPanelContainer":"hQ3TXR"};
 
 const SortingPanelImpl = ({ sortDirection, onSort }) => {
     const sortAsc = useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
@@ -4439,7 +4535,7 @@ const ColumnHeaderDropdownImpl = (props) => {
 };
 const ColumnHeaderDropdown = /* @__PURE__ */React__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":"NZc-5s","caption-wrapper":"-KU0WS","captionWrapper":"-KU0WS","sort-icon":"-PD0q-","sortIcon":"-PD0q-","dropdown-icon":"e1tAA8","dropdownIcon":"e1tAA8","infoIcon":"ccjQLB","sortInActive":"FT9gxO","align-right":"m11YXm","alignRight":"m11YXm","align-center":"ypHU9O","alignCenter":"ypHU9O","caption":"ykoctV","truncate":"z3aVQ0","upper-case":"lwcyv5","upperCase":"lwcyv5","checkbox":"RkkkyD","icon":"Hw8NQ4","fold-all-icon":"CGqLvA","foldAllIcon":"CGqLvA","cell-tooltip":"wI1QeH","cellTooltip":"wI1QeH","resizing-marker":"l6Mg8J","resizingMarker":"l6Mg8J","pinned-right":"js1CMU","pinnedRight":"js1CMU","draggable":"ZuOdmh","ghost":"KhpHLS","is-dragged-out":"FILfda","isDraggedOut":"FILfda","dnd-marker-left":"D-dJho","dndMarkerLeft":"D-dJho","dnd-marker-right":"Oe1ICL","dndMarkerRight":"Oe1ICL","cell-tooltip-wrapper":"uvmSEg","cellTooltipWrapper":"uvmSEg","cell-tooltip-text":"G7fK2h","cellTooltipText":"G7fK2h","tooltip-caption":"lnr6kY","tooltipCaption":"lnr6kY","tooltip-info":"RJmkRt","tooltipInfo":"RJmkRt"};
 
 function DefaultTooltipContent(column) {
     return (React__default.createElement("div", { className: cx$1(css$v.cellTooltipWrapper, uuiDataTableHeaderCell.uuiTableHeaderCaptionTooltip) },
@@ -4546,7 +4642,7 @@ function DataTableHeaderCell(props) {
     return (React__default.createElement(DataTableHeaderCell$1, { ...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":"TgVDKm","caption-wrapper":"xkmLVf","captionWrapper":"xkmLVf","align-center":"_8zHMCK","alignCenter":"_8zHMCK","caption":"_4phdT0","truncate":"eQZHj7","upper-case":"xmIT9c","upperCase":"xmIT9c","group-cell-tooltip":"F5zBLG","groupCellTooltip":"F5zBLG","group-cell-tooltip-wrapper":"_08kLnz","groupCellTooltipWrapper":"_08kLnz","group-cell-tooltip-text":"cD4YrM","groupCellTooltipText":"cD4YrM","tooltip-caption":"aTbKVi","tooltipCaption":"aTbKVi","tooltip-info":"ScLDLv","tooltipInfo":"ScLDLv"};
 
 class DataTableHeaderGroupCell extends React.Component {
     constructor() {
@@ -4586,7 +4682,7 @@ class DataTableHeaderGroupCell extends React.Component {
     }
 }
 
-var css$t = {"root":"TPytFN"};
+var css$t = {"root":"lAeVhN"};
 
 const DataTableHeaderRow = /* @__PURE__ */withMods(DataTableHeaderRow$1, () => [css$t.root, 'uui-dt-vars'], (mods) => {
     return ({
@@ -4694,7 +4790,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":"TqSg0j","header":"bOBsSW","title":"Tbo4nZ","removeButton":"cooe-z","with-search":"_2NAhMN","withSearch":"_2NAhMN"};
 
 function FilterColumnBody(props) {
     const [predicate, setPredicate] = useState(getDefaultPredicate(props.predicates, props.value));
@@ -4755,7 +4851,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":"vXmzyX","unpinIcon":"vXmzyX","pin-toggler-icon":"zVzaKP","pinTogglerIcon":"zVzaKP"};
 
 function PinIconButton(props) {
     const i18nLocal = i18n.tables.columnsConfigurationModal;
@@ -4806,7 +4902,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":"pLaZwu","rowWrapper":"pLaZwu","pin-icon-button":"N-ctBI","pinIconButton":"N-ctBI","not-pinned":"Z4u1KG","notPinned":"Z4u1KG","checkbox":"_8HyNGS","drag-handle":"L6T6iF","dragHandle":"L6T6iF","dnd-disabled":"tiNByr","dndDisabled":"tiNByr"};
 
 const ColumnRow = /* @__PURE__ */React.memo(function ColumnRow(props) {
     const { column } = props;
@@ -4840,7 +4936,7 @@ const ColumnRow = /* @__PURE__ */React.memo(function ColumnRow(props) {
     return (React.createElement(DndActor, { key: column.key, srcData: isDndAllowed && data, dstData: data, canAcceptDrop: onCanAcceptDrop, onDrop: onDrop, render: renderContent }));
 });
 
-var css$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":"VwnALR","main-panel":"Q6rotp","mainPanel":"Q6rotp","group":"yPjm-a","group-title":"_1PGI8F","groupTitle":"_1PGI8F","group-items":"TuT-BF","groupItems":"TuT-BF","no-data":"oVgjJ-","noData":"oVgjJ-","no-data-title":"zoOPZQ","noDataTitle":"zoOPZQ","no-data-sub-title":"LPbWaH","noDataSubTitle":"LPbWaH","h-divider":"EoqjDD","hDivider":"EoqjDD","search-area":"_6NP8Q1","searchArea":"_6NP8Q1","subgroup-accordion":"WXihFd","subgroupAccordion":"WXihFd","subgroup":"sGweJS","subgroup-title":"WrPpJS","subgroupTitle":"WrPpJS"};
 
 const renderGroupTitle = (title, amount) => (React.createElement(FlexRow, { cx: css$p.group },
     React.createElement(Text, { size: "none", cx: css$p.groupTitle }, title),
@@ -4943,7 +5039,7 @@ const getChildrenAndRest = (row, rows) => {
     return [children, rest];
 };
 
-var css$o = {"listContainer":"ElGYjG","header":"iYKCM4","group":"jOAK3i","stickyHeader":"ik0HAK"};
+var css$o = {"listContainer":"N4bXhB","header":"y4a8Mi","group":"GyltNi","stickyHeader":"P3k0U1"};
 
 function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
     const rowRef = useRef(undefined);
@@ -4983,7 +5079,7 @@ function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, r
             React__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":"CxwTDc","sticky-header":"jcc8QT","stickyHeader":"jcc8QT","no-results":"zJOAxT","noResults":"zJOAxT","icon":"qr5PGN","title":"oYOMxA"};
 
 function DataTable(props) {
     const { uuiModals } = useUuiContext();
@@ -5033,7 +5129,7 @@ function DataTable(props) {
             : (React.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":"xbzO0M","title-wrapper":"OEwiXb","titleWrapper":"OEwiXb","title":"gQoYpG","text-wrapper":"Rz0ngv","textWrapper":"Rz0ngv","selection":"_8xsWzs","postfix":"Ufcptz","selected":"MpN-D7"};
 
 const FilterPanelItemToggler = /* @__PURE__ */React.forwardRef((props, ref) => {
     const togglerPickerOpened = (e) => {
@@ -5258,7 +5354,7 @@ function FilterRangeDatePickerBody(props) {
         renderFooter()));
 }
 
-var css$l = {"container":"orEEwq"};
+var css$l = {"container":"qbiGby"};
 
 function FilterNumericBody({ min, max, step, ...props }) {
     const numericInputProps = { min, max, step };
@@ -5570,7 +5666,7 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = /* @__PURE__ */React__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":"vLzS1-","deleteButton":"vLzS1-","tab-button":"WI7PCI","tabButton":"WI7PCI","targetOpen":"_6YWvCG"};
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = useUuiContext();
@@ -5587,7 +5683,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 = useCallback(() => {
+        if (props.onCopyLink) {
+            props.onCopyLink(props.tableState);
+        }
+        else {
+            copyUrlToClipboard();
+        }
+    }, [props.onCopyLink, copyUrlToClipboard]);
     const saveInCurrent = useCallback(async (preset) => {
         const newPreset = {
             ...preset,
@@ -5636,8 +5739,8 @@ function PresetActionsDropdown(props) {
                 React__default.createElement(DropdownMenuButton, { icon: settings.presetsPanel.icons.deleteIcon, caption: "Delete", cx: css$k.deleteButton, onClick: deleteHandler })))));
     };
     const renderTarget = useCallback((dropdownProps) => {
-        return (React__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__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__default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", middleware: [offset(22)] }));
 }
 
@@ -5646,7 +5749,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":"VK8sko","presetInputCell":"VK8sko","preset-input":"wqPixg","presetInput":"wqPixg"};
 
 function PresetInput(props) {
     const [presetCaption, setPresetCaption] = useState(props.preset?.name || '');
@@ -5673,7 +5776,7 @@ function PresetInput(props) {
         React__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":"NRLIuK","activePreset":"rgoxly"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = useState(false);
@@ -5698,7 +5801,7 @@ function Preset(props) {
     return (React__default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$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":"cJmZbS","dropdownDeleteIcon":"yS24VW","presetsWrapper":"ylCHN0","addPresetContainer":"ZTn-O0","dropContainer":"ntSo0n"};
 
 function PresetsPanel(props) {
     const [isAddingPreset, setIsAddingPreset] = useState(false);
@@ -5747,9 +5850,9 @@ function PresetsPanel(props) {
             React__default.createElement(AdaptivePanel, { items: getPanelItems() }))));
 }
 
-var css$g = {"root":"vwmQsW"};
+var css$g = {"root":"BJbjH7"};
 
-var css$f = {"root":"t9xCnd","burger-content":"Vwvhk5","burgerContent":"Vwvhk5"};
+var css$f = {"root":"jWjjXh","burger-content":"gBgXmQ","burgerContent":"gBgXmQ"};
 
 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); }
@@ -5792,7 +5895,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
 };
 var ForwardRef$2 = /*#__PURE__*/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":"idyGIS","button-primary":"f9IR-H","buttonPrimary":"f9IR-H","button-secondary":"-V53iA","buttonSecondary":"-V53iA","hasIcon":"hlXDzD","dropdown":"zM-AIS"};
 
 function applyBurgerButtonMods(props) {
     return [
@@ -5817,13 +5920,13 @@ const BurgerButton = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         }, dropdownIcon: ForwardRef$2 }));
 });
 
-var css$d = {"search-input":"_1FCDfs","searchInput":"_1FCDfs"};
+var css$d = {"search-input":"QcMS5W","searchInput":"QcMS5W"};
 
 function BurgerSearch(props) {
     return (React.createElement(TextInput$1, { cx: cx(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":"geTTK-","group-header":"gpeTOQ","groupHeader":"gpeTOQ","group-name":"gle-Hb","groupName":"gle-Hb","line":"qelIMc"};
 
 function BurgerGroupHeader(props) {
     return (React.createElement("div", { className: cx(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
@@ -5831,7 +5934,7 @@ function BurgerGroupHeader(props) {
         React.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":"UO9-Do","type-primary":"PIlpNQ","typePrimary":"PIlpNQ","type-secondary":"qU1eGt","typeSecondary":"qU1eGt"};
 
 const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { type, ...clickableProps } = props;
@@ -5859,7 +5962,7 @@ const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         props.isDropdown && (React.createElement(IconContainer, { icon: ForwardRef$P, flipY: props.isOpen }))));
 });
 
-var css$a = {"dropdown-body":"TJaXQe","dropdownBody":"TJaXQe"};
+var css$a = {"dropdown-body":"PPSgL5","dropdownBody":"PPSgL5"};
 
 function MainMenuDropdown(props) {
     const handleEscape = (e, onClose, isOpen) => {
@@ -5905,12 +6008,12 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
 };
 var ForwardRef$1 = /*#__PURE__*/forwardRef(SvgNavigationGlobalMenuOutlineOutline);
 
-var css$9 = {"global-menu-btn":"tgu191","globalMenuBtn":"tgu191","global-menu-icon":"_63c8AS","globalMenuIcon":"_63c8AS"};
+var css$9 = {"global-menu-btn":"GzyI7l","globalMenuBtn":"GzyI7l","global-menu-icon":"GDsii-","globalMenuIcon":"GDsii-"};
 
 const GlobalMenu = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("button", { ref: ref, id: "global_menu_toggle", className: cx(css$9.globalMenuBtn, props.cx), ...props.rawProps },
     React.createElement(IconContainer, { size: 36, icon: ForwardRef$1, cx: css$9.globalMenuIcon }))));
 
-var css$8 = {"container":"vtFSrU","open":"x6lWsx","folding-arrow":"LcX0du","foldingArrow":"LcX0du"};
+var css$8 = {"container":"EgMfTI","open":"jY4JMk","folding-arrow":"_1fZfAN","foldingArrow":"_1fZfAN"};
 
 const MainMenuAvatar = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("button", { ref: ref, className: cx(css$8.container, props.isDropdown && css$8.dropdown, props.isOpen && css$8.open, props.onClick && uuiMarkers.clickable, props.cx), onClick: props.onClick, ...props.rawProps },
     React.createElement(Avatar, { size: "36", img: props.avatarUrl }),
@@ -5918,15 +6021,15 @@ const MainMenuAvatar = /* @__PURE__ */React.forwardRef((props, ref) => (React.cr
     props.isDropdown && (React.createElement("div", null,
         React.createElement(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":"jqwFHC","searchInput":"jqwFHC"};
 
 const MainMenuSearch = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement(IEditableDebouncer, { ...props, render: (iEditable) => (React.createElement(TextInput$1, { iconPosition: "left", icon: ForwardRef$M, cancelIcon: props.value?.length > 0 && ForwardRef$Q, ...props, ...iEditable, ref: ref, cx: cx$1(css$7.searchInput, props.cx), ...props.rawProps })) })));
 
-var css$6 = {"container":"KahbRG"};
+var css$6 = {"container":"vIbwOT"};
 
 const MainMenuIcon = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement(IconButton, { ref: ref, icon: props.icon, cx: cx$1(props.cx, css$6.container), ...props })));
 
-var css$5 = {"root":"mVCr-H"};
+var css$5 = {"root":"HwvGG9"};
 
 const Anchor = /* @__PURE__ */withMods(Anchor$1, () => [css$5.root]);
 
@@ -5984,7 +6087,7 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
 };
 var ForwardRef = /*#__PURE__*/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":"FAoAqT","drop-start":"AQOVEh","dropStart":"AQOVEh","drop-over":"mKidgs","dropOver":"mKidgs","link":"VFwgyg","drop-area":"_2Tgn-D","dropArea":"_2Tgn-D","drop-caption":"XhopP-","dropCaption":"XhopP-","icon-blue":"tBJTvU","iconBlue":"tBJTvU"};
 
 function DropSpot(props) {
     const getInfoText = typeof props.infoText === 'string'
@@ -6002,7 +6105,7 @@ function DropSpot(props) {
     return React.createElement(DropSpot$1, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
 }
 
-var css$3 = {"root":"_2wZddl"};
+var css$3 = {"root":"eyY55a"};
 
 const SvgCircleProgress = /* @__PURE__ */React.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
@@ -6013,7 +6116,7 @@ const SvgCircleProgress = /* @__PURE__ */React.forwardRef((props, ref) => {
         React.createElement("circle", { strokeWidth: 1, fill: "transparent", r: outsetRadius, cx: props.size / 2, cy: props.size / 2 })));
 });
 
-var css$2 = {"root":"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":"NZb9mK","file-name":"_9OqPzX","fileName":"_9OqPzX","default-color":"_87a0ZB","defaultColor":"_87a0ZB","doc-color":"-ebvNn","docColor":"-ebvNn","xls-color":"_0Vf8-h","xlsColor":"_0Vf8-h","pdf-color":"EI5IoV","pdfColor":"EI5IoV","movie-color":"vvcpQ9","movieColor":"vvcpQ9","img-color":"X-bUQp","imgColor":"X-bUQp","mov-color":"WO1L82","movColor":"WO1L82","error-block":"QF6Ux8","errorBlock":"QF6Ux8","icons-block":"UJNQEl","iconsBlock":"UJNQEl"};
 
 const FileCard = /* @__PURE__ */React.forwardRef((props, ref) => {
     const [isLoadingShow, setIsLoadingShow] = React.useState(true);
@@ -6133,7 +6236,7 @@ const getErrorPageConfig = () => ({
     },
 });
 
-var css$1 = {"container":"d2-PXn"};
+var css$1 = {"container":"a4-QzV"};
 
 const ErrorPage = (props) => {
     const isMobileScreen = isMobile();
@@ -6145,10 +6248,10 @@ const ErrorPage = (props) => {
             props?.supportLink && React__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":"AjJ461","recoverySpinner":"AjJ461","recovery-message":"xNogIo","recoveryMessage":"xNogIo","modal-blocker":"_78gUq2","modalBlocker":"_78gUq2","modalFadeIn":"BjVnvb"};
 
 function ErrorHandler(props) {
-    const { uuiNotifications, uuiModals, uuiApi } = useUuiContext();
+    const { uuiNotifications, uuiModals, uuiApi, uuiLayout } = useUuiContext();
     const { errorType, errorInfo } = useUuiError({
         getErrorInfo: props.getErrorInfo,
         options: { errorConfig: getErrorPageConfig(), recoveryConfig: getRecoveryMessageConfig() },
@@ -6168,7 +6271,7 @@ function ErrorHandler(props) {
     };
     const renderRecoveryBlocker = (errorInform) => {
         const { title, subtitle } = errorInform;
-        return (React__default.createElement(ModalBlocker, { key: "recovery-blocker", cx: css.modalBlocker, isActive: true, zIndex: 100500, success: () => { }, abort: () => { } },
+        return (React__default.createElement(ModalBlocker, { key: "recovery-blocker", cx: css.modalBlocker, isActive: true, zIndex: uuiLayout.getTopOverlayZIndex(), success: () => { }, abort: () => { } },
             React__default.createElement(ModalWindow, null,
                 React__default.createElement(ModalHeader, { borderBottom: true, title: title }),
                 React__default.createElement(Spinner, { cx: css.recoverySpinner }),