@epam/uui 6.4.3 → 6.4.4

package/index.js

@@ -190,7 +190,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#7rku2u20ng8n2e0u2_a)"
+    clipPath: "url(#g3sdanswhqkvot7f_a)"
   }, _path$I || (_path$I = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M150.585 1.535C49.483-11.495 27.481 61.805 45.725 97.481c10.581 20.69-39.64 70.792 17.744 81.468 27.538 5.123 36-13.341 62.433-10.655 35.4 3.6 148.167-4.73 88.349-78.915-31.713-39.335 1.026-79.506-63.666-87.844Z",
     fill: "#F5F6FA"
@@ -211,7 +211,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M86.786 22.982c-2.55 0-4.965 2.07-4.965 4.552V120.6c0 2.484 2.4 4.572 4.965 4.572h88.101c2.582 0 4.986-2.089 4.986-4.572V27.534c0-2.464-2.418-4.552-4.986-4.552h-88.1Zm-5.793 4.552c0-3.022 2.874-5.38 5.793-5.38h88.101c2.935 0 5.814 2.374 5.814 5.38V120.6c0 3.021-2.86 5.4-5.814 5.4h-88.1c-2.94 0-5.794-2.381-5.794-5.4V27.534Z",
     fill: "#1D1E26"
   })), /*#__PURE__*/React__namespace.createElement("mask", {
-    id: "7rku2vt84p7bhihh_b",
+    id: "g3sdancilj2tzyi46_b",
     style: {
       maskType: "alpha"
     },
@@ -224,7 +224,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M174.887 125.586h-88.1c-2.752 0-5.38-2.234-5.38-4.986V27.534c0-2.752 2.644-4.966 5.38-4.966h88.1c2.752 0 5.4 2.23 5.4 4.966V120.6c0 2.752-2.632 4.986-5.4 4.986Z",
     fill: "#9BDEFF"
   }))), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
-    mask: "url(#7rku2vt84p7bhihh_b)",
+    mask: "url(#g3sdancilj2tzyi46_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -310,7 +310,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M24.73 96.184a.414.414 0 0 1 .581.06l48.646 59.751a.413.413 0 1 1-.642.523L24.67 96.766a.414.414 0 0 1 .06-.582Z",
     fill: "#fff"
   }))), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "7rku2u20ng8n2e0u2_a"
+    id: "g3sdanswhqkvot7f_a"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
@@ -961,14 +961,14 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
 };
 var ForwardRef$4 = /*#__PURE__*/React.forwardRef(SvgSearchWithBackground);
 
-var css$1w = {"root":"_8hLwMO","uui-spinner":"R-jhSm","uuiSpinner":"R-jhSm"};
+var css$1w = {"root":"UE27xC","uui-spinner":"JZ8Uv5","uuiSpinner":"JZ8Uv5"};
 
 function applySpinnerMods() {
     return [css$1w.root, 'uui-spinner'];
 }
 const Spinner = /* @__PURE__ */uuiCore.withMods(uuiComponents.Spinner, applySpinnerMods);
 
-var css$1v = {"root":"DNQ--Z","loading-word":"bVoEv-","loadingWord":"bVoEv-","animated-loading":"aWmYTS","animatedLoading":"aWmYTS","skeleton_loading":"ta-y36","skeletonLoading":"ta-y36"};
+var css$1v = {"root":"vlgrhq","loading-word":"RxXHQu","loadingWord":"RxXHQu","animated-loading":"vIsykU","animatedLoading":"vIsykU","skeleton_loading":"MTpfbj","skeletonLoading":"MTpfbj"};
 
 const TextPlaceholder = (props) => {
     const pattern = ' ';
@@ -985,7 +985,7 @@ const TextPlaceholder = (props) => {
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
-var css$1u = {"root":"pMvf3g","line-height":"zEEf4D","lineHeight":"zEEf4D","font-size":"_4aEQ4J","fontSize":"_4aEQ4J"};
+var css$1u = {"root":"GDTy8P","line-height":"uxBDY-","lineHeight":"uxBDY-","font-size":"Jfl4Kx","fontSize":"Jfl4Kx"};
 
 function applyTextMods(mods) {
     return [
@@ -1012,7 +1012,7 @@ const Text = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Text, appl
     };
 });
 
-var css$1t = {"root":"MLcxSI"};
+var css$1t = {"root":"tP39oV"};
 
 const Blocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.Blocker, () => [css$1t.root], () => ({ renderSpinner: settings.blocker.renderSpinner }));
 
@@ -1517,7 +1517,7 @@ const settings = {
     textInput: textInputSettings,
 };
 
-var css$1s = {"root":"jTwM9i"};
+var css$1s = {"root":"UngvQG"};
 
 function applyButtonMods(mods) {
     return [
@@ -1535,7 +1535,7 @@ const Button = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Button,
     };
 });
 
-var css$1r = {"root":"_4WdNiE"};
+var css$1r = {"root":"WpOWm9"};
 
 function applyIconButtonMods(props) {
     return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1r.root];
@@ -1572,7 +1572,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":"pYZg7j"};
+var css$1q = {"root":"-wCqo3"};
 
 const DEFAULT_COLOR = 'primary';
 const LinkButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
@@ -1602,7 +1602,7 @@ const LinkButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
         props.isDropdown && (React__namespace.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1p = {"root":"q-Vi6c"};
+var css$1p = {"root":"Nn9bGc"};
 
 const CountIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
     return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
@@ -1614,7 +1614,7 @@ const CountIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
         ]) }, props.caption));
 });
 
-var css$1o = {"root":"-lzGOU","withNotify":"ncK1Q2"};
+var css$1o = {"root":"HB7Csf","withNotify":"_73xN8N"};
 
 const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, refExternal) => {
     const refLocal = React__namespace.default.useRef(null);
@@ -1661,13 +1661,13 @@ const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, ref
         props.onClear && !props.isDisabled && (React__namespace.default.createElement(uuiComponents.IconContainer, { cx: uuiCore.uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
 });
 
-var css$1n = {"root":"NLF-70","noLeftPadding":"qDkIGp","foldingArea":"-ossLC","onlyFoldable":"_090PZs","captionWrapper":"dH6VQK","withNotify":"tWMvCW"};
+var css$1n = {"root":"DjEb16","noLeftPadding":"vFYbua","foldingArea":"d2FFaF","onlyFoldable":"F6gy36","captionWrapper":"_92Ln4t","withNotify":"tqso6T"};
 
-var css$1m = {"root":"wcwKbc"};
+var css$1m = {"root":"e0-jaV"};
 
 const AvatarStack = /* @__PURE__ */uuiCore.withMods(uuiComponents.AvatarStack, () => [css$1m.root]);
 
-var css$1l = {"root":"kL6Tbp"};
+var css$1l = {"root":"MoXaMB"};
 
 const DEFAULT_FILL = 'solid';
 function applyBadgeMods(mods) {
@@ -1695,7 +1695,7 @@ const Badge = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) =>
         props.isDropdown && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1k = {"root":"_8ejsbh"};
+var css$1k = {"root":"EluYH6"};
 
 function applyTagMods(props) {
     return [
@@ -1728,7 +1728,7 @@ const Tag = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
             } }))));
 });
 
-var css$1j = {"root":"fHn-cg","page":"snUZHH","spacer":"Bm1PLu","mode-ghost":"Tk4CAT","modeGhost":"Tk4CAT"};
+var css$1j = {"root":"dGyt7a","page":"Ir6nO6","spacer":"I3NMdL","mode-ghost":"_4xtqr6","modeGhost":"_4xtqr6"};
 
 function Paginator(props) {
     const renderPaginator = (params) => (React__namespace.default.createElement("nav", { role: "navigation", className: cx__default.default('uui-paginator', `uui-size-${props.size || settings.paginator.sizes.default}`), ...params.rawProps },
@@ -1754,14 +1754,14 @@ function Paginator(props) {
     return React__namespace.default.createElement(uuiComponents.Paginator, { ...props, render: renderPaginator });
 }
 
-var css$1i = {"root":"yfsXOh","progress-bar":"C-iJFW","progressBar":"C-iJFW","progressBar-indeterminate":"F5x8oC","progressBarIndeterminate":"F5x8oC","size-12":"qIeaxr","size12":"qIeaxr","size-18":"Lu-gwD","size18":"Lu-gwD","size-24":"xCWhuo","size24":"xCWhuo"};
+var css$1i = {"root":"C4JxUr","progress-bar":"nJiiRt","progressBar":"nJiiRt","progressBar-indeterminate":"Un-0I3","progressBarIndeterminate":"Un-0I3","size-12":"J-wweH","size12":"J-wweH","size-18":"YaxwGL","size18":"YaxwGL","size-24":"gljeGl","size24":"gljeGl"};
 
 const IndeterminateBar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     return (React__namespace.createElement("div", { ref: ref, className: cx__default.default('uui-indeterminate_bar', props.cx, css$1i.root, css$1i[`size-${props.size || 12}`]) },
         React__namespace.createElement("div", { className: cx__default.default(css$1i.progressBar) })));
 });
 
-var css$1h = {"root":"CxCTzP","striped":"_3gNHFF","animate-stripes":"WVIgYO","animateStripes":"WVIgYO","size-12":"_7REGvN","size12":"_7REGvN","size-18":"fGh9tR","size18":"fGh9tR","size-24":"b3mqFI","size24":"b3mqFI"};
+var css$1h = {"root":"ClOpVp","striped":"_8YBwrZ","animate-stripes":"-jpz57","animateStripes":"-jpz57","size-12":"tNDqAh","size12":"tNDqAh","size-18":"EolQHk","size18":"EolQHk","size-24":"JYY2Ik","size24":"JYY2Ik"};
 
 const DEFAULT_SIZE = '12';
 function applyProgressBarMods(mods) {
@@ -1776,14 +1776,14 @@ const ProgressBar = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Pro
     hideLabel: props.hideLabel || props.striped,
 }));
 
-var css$1g = {"root":"_83Ha80"};
+var css$1g = {"root":"_0mbooH"};
 
 const IndicatorBar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const { progress } = props;
     return progress || progress === 0 ? (React__namespace.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx__default.default(css$1g.root, props.cx), hideLabel: true })) : (React__namespace.createElement(IndeterminateBar, { ref: ref, cx: cx__default.default(css$1g.root, props.cx) }));
 });
 
-var css$1f = {"root":"mmdPAb"};
+var css$1f = {"root":"-Ez8OP"};
 
 const StatusIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
     return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
@@ -1798,7 +1798,7 @@ const StatusIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
         React__namespace.default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
 });
 
-var css$1e = {"root":"ulLCPc"};
+var css$1e = {"root":"ONuItu"};
 
 function applyCheckboxMods(mods) {
     return [
@@ -1816,7 +1816,7 @@ const applyUUICheckboxProps = (props) => {
 };
 const Checkbox = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$1d = {"root":"UEuGTj"};
+var css$1d = {"root":"JmMFgU"};
 
 function applyRadioInputMods(mods) {
     return [
@@ -1828,7 +1828,7 @@ function applyRadioInputMods(mods) {
 }
 const RadioInput = /* @__PURE__ */uuiCore.withMods(uuiComponents.RadioInput, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : settings.radioInput.icons.dotIcon }));
 
-var css$1c = {"root":"HCSa-i"};
+var css$1c = {"root":"XQzutj"};
 
 function applySwitchMods(mods) {
     return [
@@ -1852,7 +1852,7 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var textInputCss = {"root":"bzFpyH"};
+var textInputCss = {"root":"hMCzBl"};
 
 const DEFAULT_MODE$3 = EditMode.FORM;
 function applyTextInputMods(mods) {
@@ -1877,7 +1877,7 @@ const SearchInput = /* @__PURE__ */React__namespace.default.forwardRef((props, r
         } }));
 });
 
-var css$1b = {"root":"Lqndn2"};
+var css$1b = {"root":"BPv3vl"};
 
 const ControlGroup = /* @__PURE__ */uuiCore.withMods(uuiComponents.ControlGroup, () => [css$1b.root, 'uui-control-group']);
 
@@ -1893,7 +1893,7 @@ function MultiSwitchComponent(props, ref) {
 }
 const MultiSwitch = /* @__PURE__ */React__namespace.forwardRef(MultiSwitchComponent);
 
-var css$1a = {"root":"kEwxAR"};
+var css$1a = {"root":"MPAM05"};
 
 const DEFAULT_MODE$2 = EditMode.FORM;
 function applyNumericInputMods(mods) {
@@ -1913,7 +1913,7 @@ const NumericInput = /* @__PURE__ */uuiCore.withMods(uuiComponents.NumericInput,
     };
 });
 
-var css$19 = {"root":"VyQTdl"};
+var css$19 = {"root":"NvBVoj"};
 
 const DEFAULT_MODE$1 = EditMode.FORM;
 function applyTextAreaMods(mods) {
@@ -1954,7 +1954,7 @@ function TREE_SHAKEABLE_INIT$1() {
     };
 }
 
-var css$18 = {"root":"jeat4s"};
+var css$18 = {"root":"wZvAB2"};
 
 function applyDropdownContainerMods(mods) {
     return [
@@ -1965,7 +1965,7 @@ function applyDropdownContainerMods(mods) {
 }
 const DropdownContainer = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.DropdownContainer, applyDropdownContainerMods);
 
-var css$17 = {"root":"HxES-u","timepicker-input":"OdqQbC","timepickerInput":"OdqQbC","ltr-always":"Zbs3dP","ltrAlways":"Zbs3dP"};
+var css$17 = {"root":"uQskY7","timepicker-input":"pyHstO","timepickerInput":"pyHstO","ltr-always":"wGaM07","ltrAlways":"wGaM07"};
 
 const uuiTimePicker = {
     container: 'uui-timepicker-container',
@@ -2010,11 +2010,11 @@ function TimePickerBody(props) {
                 React__namespace.createElement(uuiComponents.IconContainer, { size: 18, rawProps: { 'aria-label': 'Increment hours' }, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: () => onHoursChange(uuiDayjs.dayjs().set(props.value).add(1, 'h').hour()) }),
                 React__namespace.createElement(uuiComponents.NumericInput, { cx: uuiTimePicker.input, onValueChange: onHoursChange, value: +(uuiDayjs.dayjs()
                         .set(props.value)
-                        .format(MAX_HOURS === FORMAT_12H ? 'hh' : 'HH')), isReadonly: true, min: MIN_HOURS, max: MAX_HOURS }),
+                        .format(MAX_HOURS === FORMAT_12H ? 'hh' : 'HH')), formatValue: (v) => String(v).padStart(2, '0'), isReadonly: true, min: MIN_HOURS, max: MAX_HOURS }),
                 React__namespace.createElement(uuiComponents.IconContainer, { size: 18, rawProps: { 'aria-label': 'Decrement hours' }, cx: uuiTimePicker.iconDown, icon: ForwardRef$P, onClick: () => onHoursChange(uuiDayjs.dayjs().set(props.value).subtract(1, 'h').hour()) })),
             React__namespace.createElement("div", { className: uuiTimePicker.elementContainer },
                 React__namespace.createElement(uuiComponents.IconContainer, { size: 18, rawProps: { 'aria-label': 'Increment minutes' }, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: handleMinutesUpClick }),
-                React__namespace.createElement(uuiComponents.NumericInput, { cx: uuiTimePicker.input, onValueChange: onMinutesChange, value: +uuiDayjs.dayjs().set(props.value).format('m'), isReadonly: true, min: MIN_MINUTES, max: MAX_MINUTES }),
+                React__namespace.createElement(uuiComponents.NumericInput, { cx: uuiTimePicker.input, onValueChange: onMinutesChange, value: +uuiDayjs.dayjs().set(props.value).format('m'), formatValue: (v) => String(v).padStart(2, '0'), isReadonly: true, min: MIN_MINUTES, max: MAX_MINUTES }),
                 React__namespace.createElement(uuiComponents.IconContainer, { size: 18, rawProps: { 'aria-label': 'Decrement minutes' }, cx: uuiTimePicker.iconDown, icon: ForwardRef$P, onClick: handleMinutesDownClick }))),
         MAX_HOURS === FORMAT_12H && (React__namespace.createElement("div", { className: uuiTimePicker.elementContainer },
             React__namespace.createElement(uuiComponents.IconContainer, { size: 18, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: onTimeTypeChange }),
@@ -2186,7 +2186,7 @@ function TimePickerComponent(props, ref) {
 }
 const TimePicker = /* @__PURE__ */React__namespace.default.forwardRef(TimePickerComponent);
 
-var css$16 = {"root":"rMoG-Q"};
+var css$16 = {"root":"mSYQeQ"};
 
 function applyInputAddonMods() {
     return [
@@ -2195,14 +2195,14 @@ function applyInputAddonMods() {
 }
 const InputAddon = /* @__PURE__ */uuiCore.withMods(uuiComponents.InputAddon, applyInputAddonMods);
 
-var css$15 = {"root":"BTxkhK"};
+var css$15 = {"root":"_0T9jml"};
 
 function applySliderMods() {
     return [css$15.root, 'uui-color-neutral'];
 }
 const Slider = /* @__PURE__ */uuiCore.withMods(uuiComponents.Slider, applySliderMods);
 
-var css$14 = {"root":"uGxzLI"};
+var css$14 = {"root":"OySA86"};
 
 function applyTooltipMods(mods) {
     return [
@@ -2212,7 +2212,7 @@ function applyTooltipMods(mods) {
 }
 const Tooltip = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Tooltip, applyTooltipMods);
 
-var css$13 = {"root":"cIcj2V","tooltip":"fL-2KQ"};
+var css$13 = {"root":"OqYx-a","tooltip":"-VZob5"};
 
 function applyRatingMods(mods) {
     return [
@@ -2226,10 +2226,13 @@ const Rating = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Rating,
     Tooltip,
 }));
 
-var css$12 = {"drag-handle-wrapper":"vz4Jau","dragHandleWrapper":"vz4Jau","with-indent":"Gb4-F8","withIndent":"Gb4-F8","drag-handle":"W6zySe","dragHandle":"W6zySe","icon-container":"RBZlzp","iconContainer":"RBZlzp"};
+var css$12 = {"drag-handle-wrapper":"RZxDvE","dragHandleWrapper":"RZxDvE","with-indent":"_6omlAl","withIndent":"_6omlAl","drag-handle":"qN7vvv","dragHandle":"qN7vvv","icon-container":"Y7UjiS","iconContainer":"Y7UjiS"};
 
 function DataRowAddons(props) {
     const row = props.rowProps;
+    const checkboxSize = settings.dataTable.sizes.body.checkboxMap[props.size];
+    const isCheckboxVisible = row?.checkbox?.isVisible;
+    const reserveCheckboxSpace = row?.checkbox?.reserveSpace;
     const getIndent = () => {
         return (row.indent - 1) * settings.dataTable.sizes.body.indentUnitMap[props.size || settings.dataTable.sizes.body.row];
     };
@@ -2250,7 +2253,8 @@ function DataRowAddons(props) {
     };
     return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
         row.dnd?.srcData && renderDragHandle(),
-        row?.checkbox?.isVisible && (React__namespace.default.createElement(Checkbox, { key: "cb", cx: "uui-dr_addons-checkbox", tabIndex: props.tabIndex, size: settings.dataTable.sizes.body.checkboxMap[props.size], value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => row.onCheck?.(row), isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid, rawProps: { 'aria-label': 'Select' } })),
+        isCheckboxVisible && (React__namespace.default.createElement(Checkbox, { key: "cb", cx: "uui-dr_addons-checkbox", tabIndex: props.tabIndex, size: checkboxSize, value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => row.onCheck?.(row), isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid, rawProps: { 'aria-label': 'Select' } })),
+        !isCheckboxVisible && reserveCheckboxSpace && (React__namespace.default.createElement("div", { key: "cb-spacer", className: cx__default.default('uui-checkbox-container', 'uui-dr_addons-checkbox-spacer', `uui-size-${checkboxSize}`), "aria-hidden": "true" })),
         row.indent > 0 && (React__namespace.default.createElement("div", { key: "fold", className: cx__default.default('uui-dr_addons-indent', `uui-size-${props.size || settings.dataTable.sizes.body.row}`), style: { marginInlineStart: getIndent(), width: getWidth() } }, row.isFoldable && (React__namespace.default.createElement(uuiComponents.ControlIcon, { rawProps: {
                 'aria-label': row.isFolded ? 'Unfold' : 'Fold',
                 role: 'button',
@@ -2288,6 +2292,7 @@ function VerticalTabButtonComponent(props, ref) {
     const ClearIcon = props.clearIcon ? props.clearIcon : settings.verticalTabButton.icons.clearIcon;
     return (React__namespace.default.createElement(uuiComponents.Clickable, { ...props, onClick: props.onClick || props.onFold, rawProps: {
             role: 'tab',
+            'aria-selected': isActive,
             ...props.rawProps,
         }, cx: styles, ref: ref },
         props.indent > 0 && (React__namespace.default.createElement("div", { key: "fold", className: uuiCore.cx(css$1n.foldingArea, props.onFold && uuiCore.uuiMarkers.clickable), style: { '--uui-folding-indent': `${props.indent - 1}` }, onClick: props.onFold }, props.isFoldable && (React__namespace.default.createElement(uuiComponents.IconContainer, { rawProps: {
@@ -2308,7 +2313,7 @@ function VerticalTabButtonComponent(props, ref) {
 }
 const VerticalTabButton = /* @__PURE__ */React__namespace.default.forwardRef(VerticalTabButtonComponent);
 
-var css$11 = {"root":"MJvL6k","main-path":"_3a8RsN","mainPath":"_3a8RsN","content-wrapper":"_9nh9V7","contentWrapper":"_9nh9V7","content":"-EISlR","action-wrapper":"VFvxE-","actionWrapper":"VFvxE-","icon-wrapper":"X3Bu8y","iconWrapper":"X3Bu8y","icon":"KxlhS-","close-icon":"j4xHs4","closeIcon":"j4xHs4"};
+var css$11 = {"root":"suPfV7","main-path":"GqksXy","mainPath":"GqksXy","content-wrapper":"-N7JSJ","contentWrapper":"-N7JSJ","content":"sn-tUw","action-wrapper":"pAzBw1","actionWrapper":"pAzBw1","icon-wrapper":"JdDOMV","iconWrapper":"JdDOMV","icon":"Bp4zdQ","close-icon":"sSZgE3","closeIcon":"sSZgE3"};
 
 const Alert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("div", { role: "alert", ref: ref, className: cx__default.default('uui-alert', css$11.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
     React__namespace.createElement("div", { className: css$11.mainPath },
@@ -2326,7 +2331,7 @@ const ErrorAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => Re
 
 const Dropdown = /* @__PURE__ */uuiCore.withMods(uuiComponents.Dropdown);
 
-var css$10 = {"submenu-root-item-rtl":"Nq2X0n","submenuRootItemRtl":"Nq2X0n","icon-after":"_8JuzK8","iconAfter":"_8JuzK8","submenu-root-item":"ZDksfs","submenuRootItem":"ZDksfs","icon-check":"kKpSl7","iconCheck":"kKpSl7","splitter-root":"VbyK2Z","splitterRoot":"VbyK2Z","splitter":"UFbkr-","header-root":"S0UYrf","headerRoot":"S0UYrf","item-root":"Y7tVM2","itemRoot":"Y7tVM2","icon":"PDP2D-","link":"NtukED","indent":"cSS-IU","selected-mark":"eWdgui","selectedMark":"eWdgui"};
+var css$10 = {"submenu-root-item-rtl":"_8sezyH","submenuRootItemRtl":"_8sezyH","icon-after":"_2tkap9","iconAfter":"_2tkap9","submenu-root-item":"_7b-9d4","submenuRootItem":"_7b-9d4","icon-check":"K4cfYl","iconCheck":"K4cfYl","splitter-root":"gUr7g6","splitterRoot":"gUr7g6","splitter":"A6ftY9","header-root":"_85nMHp","headerRoot":"_85nMHp","item-root":"m-YPSQ","itemRoot":"m-YPSQ","icon":"_0nKtmu","link":"nvd2aA","indent":"yJQ5rE","selected-mark":"T6eITy","selectedMark":"T6eITy"};
 
 exports.IDropdownControlKeys = void 0;
 (function (IDropdownControlKeys) {
@@ -2343,7 +2348,7 @@ function DropdownMenuContainer(props) {
     const getMenuItems = () => {
         if (!menuRef.current)
             return [];
-        return Array.from(menuRef.current.querySelectorAll(`[role="menuitem"]:not(.${uuiCore.uuiMod.disabled})`));
+        return Array.from(menuRef.current.querySelectorAll(`[role^="menuitem"]:not(.${uuiCore.uuiMod.disabled})`));
     };
     const changeFocus = (nextFocusedIndex) => {
         const menuItems = getMenuItems();
@@ -2410,7 +2415,7 @@ const DropdownMenuButton = /* @__PURE__ */React__namespace.default.forwardRef((p
     };
     const isAnchor = Boolean(link || href);
     const itemClassNames = uuiCore.cx(props.cx, css$10.itemRoot, isDisabled && uuiCore.uuiMod.disabled, isActive && uuiCore.uuiMod.active, isOpen && uuiCore.uuiMod.opened, (!isDisabled && onClick) && uuiCore.uuiMarkers.clickable);
-    return isAnchor ? (React__namespace.default.createElement(uuiComponents.Anchor, { cx: uuiCore.cx(css$10.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__namespace.default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref },
+    return isAnchor ? (React__namespace.default.createElement(uuiComponents.Anchor, { cx: uuiCore.cx(css$10.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0, ...props.rawProps }, onClick: handleClick, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__namespace.default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref, ...props.rawProps },
         getMenuButtonContent(),
         isSelected && (React__namespace.default.createElement(React__namespace.default.Fragment, null,
             React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
@@ -2441,6 +2446,7 @@ function DropdownSubMenu(props) {
 }
 function DropdownMenuSwitchButton(props) {
     const context = React.useContext(uuiCore.UuiContext);
+    const switchRef = React.useRef(null);
     const { icon, caption, isDisabled, isSelected, onValueChange, } = props;
     const onHandleValueChange = (value) => {
         if (isDisabled || !onValueChange)
@@ -2453,14 +2459,20 @@ function DropdownMenuSwitchButton(props) {
             onHandleValueChange(!isSelected);
         }
     };
-    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$10.itemRoot, isDisabled && uuiCore.uuiMod.disabled, (!isDisabled || onValueChange) && uuiCore.uuiMarkers.clickable), onClick: () => onHandleValueChange(!isSelected), role: "menuitem", onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 },
+    const handleClick = (event) => {
+        const isSwitchClicked = switchRef.current?.contains(event.target);
+        if (isSwitchClicked)
+            return;
+        onHandleValueChange(!isSelected);
+    };
+    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$10.itemRoot, isDisabled && uuiCore.uuiMod.disabled, (!isDisabled || onValueChange) && uuiCore.uuiMarkers.clickable), onClick: handleClick, role: "menuitem", onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 },
         icon && React__namespace.default.createElement(uuiComponents.IconContainer, { icon: icon, cx: css$10.iconBefore }),
         React__namespace.default.createElement(uuiComponents.Text, null, caption),
         React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
-        React__namespace.default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
+        React__namespace.default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange, ref: switchRef })));
 }
 
-var css$$ = {"root":"GC19EI","mode-block":"J5dlRj","modeBlock":"J5dlRj","mode-inline":"cB0EHs","modeInline":"cB0EHs","padding-0":"rgSnJT","padding0":"rgSnJT","padding-6":"GQZfvV","padding6":"GQZfvV","padding-12":"_8wkABy","padding12":"_8wkABy","padding-18":"N2U9gX","padding18":"N2U9gX"};
+var css$$ = {"root":"PcyFZ3","mode-block":"-hovKu","modeBlock":"-hovKu","mode-inline":"_7uG285","modeInline":"_7uG285","padding-0":"MsI11x","padding0":"MsI11x","padding-6":"xfO-1U","padding6":"xfO-1U","padding-12":"jQJc2I","padding12":"jQJc2I","padding-18":"dEVGd2","padding18":"dEVGd2"};
 
 function applyAccordionMods(mods) {
     return [
@@ -2473,7 +2485,7 @@ const Accordion = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Accor
     dropdownIcon: mods.dropdownIcon !== null && settings.accordion.icons.dropdownIcon,
 }));
 
-var css$_ = {"root":"lymBPc","align-items":"sBduCE","alignItems":"sBduCE","justify-content":"chMoMP","justifyContent":"chMoMP","border-top":"Q-QoP4","borderTop":"Q-QoP4","border-bottom":"Pi-9hw","borderBottom":"Pi-9hw","top-shadow":"_64ECK2","topShadow":"_64ECK2","padding":"iJ-cwy","margin":"R4ZPZb","vPadding":"_3OPJQL","column-gap":"AOuvsp","columnGap":"AOuvsp","row-gap":"IZaB2u","rowGap":"IZaB2u","spacing":"an5wua"};
+var css$_ = {"root":"ikdE6t","align-items":"NQh8KE","alignItems":"NQh8KE","justify-content":"_8UUkKu","justifyContent":"_8UUkKu","border-top":"E1eUd7","borderTop":"E1eUd7","border-bottom":"FpoPsZ","borderBottom":"FpoPsZ","top-shadow":"i8Vw0o","topShadow":"i8Vw0o","padding":"cbGu2X","margin":"OqFcqI","vPadding":"lcmsET","column-gap":"_4jB8Qh","columnGap":"_4jB8Qh","row-gap":"CNZhiF","rowGap":"CNZhiF","spacing":"TrD3JA"};
 
 const FlexCell = /* @__PURE__ */uuiCore.withMods(uuiComponents.FlexCell, () => [css$_.flexCell]);
 
@@ -2525,7 +2537,7 @@ const FlexRow = /* @__PURE__ */React.forwardRef((props, ref) => {
         } }, props.children));
 });
 
-var css$Z = {"root":"Fk9gyQ","margin-24":"tAqyRo","margin24":"tAqyRo","padding-12":"uLU0kE","padding12":"uLU0kE","padding-24":"EZlU17","padding24":"EZlU17","shadow":"q2R8LA","uui-surface-main":"IZIQGr","uuiSurfaceMain":"IZIQGr"};
+var css$Z = {"root":"mdSWEE","margin-24":"_2nytQ-","margin24":"_2nytQ-","padding-12":"GMGJf2","padding12":"GMGJf2","padding-24":"u-TmU9","padding24":"u-TmU9","shadow":"GJha7t","uui-surface-main":"BHP0Yp","uuiSurfaceMain":"BHP0Yp"};
 
 const Panel = /* @__PURE__ */uuiCore.withMods(uuiComponents.VPanel, (props) => [
     'uui-panel',
@@ -2535,7 +2547,7 @@ const Panel = /* @__PURE__ */uuiCore.withMods(uuiComponents.VPanel, (props) => [
     props.background && css$Z[`uui-${props.background}`],
 ]);
 
-var css$Y = {"root":"R4VcpT"};
+var css$Y = {"root":"a0b0i-"};
 
 function applyLabeledInputMods(mods) {
     return [
@@ -2557,7 +2569,7 @@ function applyLabeledInputProps(props) {
 }
 const LabeledInput = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.LabeledInput, applyLabeledInputMods, applyLabeledInputProps);
 
-var css$X = {"root":"ReR-6A"};
+var css$X = {"root":"cKPomo"};
 
 function RadioGroup(props) {
     const direction = props.direction || 'vertical';
@@ -2572,7 +2584,7 @@ function RadioGroup(props) {
     })));
 }
 
-var css$W = {"root":"yPmEqK","viewport":"yOo6xt"};
+var css$W = {"root":"Yc1hqI","viewport":"AR-rKK"};
 
 var uuiScrollbars;
 (function (uuiScrollbars) {
@@ -2651,7 +2663,7 @@ const ScrollBars = /* @__PURE__ */React.forwardRef((props, ref) => {
 });
 ScrollBars.displayName = 'ScrollBars';
 
-var css$V = {"scroll-container":"-iJzit","scrollContainer":"-iJzit","list-container":"TQ5X2A","listContainer":"TQ5X2A"};
+var css$V = {"scroll-container":"gugpxO","scrollContainer":"gugpxO","list-container":"DtcsB0","listContainer":"DtcsB0"};
 
 const VirtualList = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
     const { listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef, } = uuiCore.useVirtualList({
@@ -2660,8 +2672,11 @@ const VirtualList = /* @__PURE__ */React__namespace.default.forwardRef((props, r
         onScroll: props.onScroll,
         rowsCount: props.rowsCount,
         rowsSelector: props.rowsSelector,
+        rowHeight: props.rowHeight,
+        rowGap: props.rowGap,
     });
     React__namespace.default.useImperativeHandle(ref, () => scrollContainerRef.current, [scrollContainerRef.current]);
+    const [blockerInset, setBlockerInset] = React__namespace.default.useState(null);
     const renderRows = () => props.renderRows?.({
         listContainerRef, estimatedHeight, offsetY,
     }) || (React__namespace.default.createElement("div", { className: css$V.listContainer, style: { minHeight: `${estimatedHeight}px` } },
@@ -2671,9 +2686,28 @@ const VirtualList = /* @__PURE__ */React__namespace.default.forwardRef((props, r
             return;
         scrollContainerRef.current = scrollbars.view;
     }, []);
-    return (React__namespace.default.createElement(ScrollBars, { cx: uuiCore.cx(css$V.scrollContainer, props.cx), onScroll: handleScroll, ref: scrollBarsRef, rawProps: props.rawProps, overflowTopEffect: props.overflowTopEffect, overflowBottomEffect: props.overflowBottomEffect },
+    const rawProps = React__namespace.default.useMemo(() => ({
+        ...(props.rawProps ?? {}),
+        style: {
+            ...(props.rawProps?.style ?? {}),
+            overflow: props.isLoading ? 'hidden' : props.rawProps?.style?.overflow,
+        },
+    }), [props.rawProps, props.isLoading]);
+    const updateBlockerInset = React__namespace.default.useCallback(() => {
+        const scrollContainer = scrollContainerRef.current;
+        if (!scrollContainer)
+            return;
+        const { scrollTop, scrollLeft } = scrollContainer;
+        setBlockerInset({ top: scrollTop, left: scrollLeft, right: -scrollLeft, bottom: -scrollTop });
+    }, [setBlockerInset]);
+    React__namespace.default.useEffect(() => {
+        if (props.isLoading) {
+            updateBlockerInset();
+        }
+    }, [props.isLoading, updateBlockerInset]);
+    return (React__namespace.default.createElement(ScrollBars, { cx: uuiCore.cx(css$V.scrollContainer, props.cx), onScroll: handleScroll, ref: scrollBarsRef, rawProps: rawProps, overflowTopEffect: props.overflowTopEffect, overflowBottomEffect: props.overflowBottomEffect, autoHide: props.isLoading ? 'scroll' : undefined },
         renderRows(),
-        React__namespace.default.createElement(Blocker, { isEnabled: props.isLoading })));
+        React__namespace.default.createElement(Blocker, { isEnabled: props.isLoading, inset: blockerInset })));
 });
 
 const RichTextView = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || settings.richTextView.sizes.default}`]);
@@ -2704,7 +2738,7 @@ function Tree(props) {
     return (React__namespace.createElement(VirtualList, { value: value, onValueChange: onValueChange, rowsCount: rowsCount, rows: renderedRows, cx: uuiCore.cx(propsCx), role: "tree" }));
 }
 
-var css$U = {"root":"_24tVSx"};
+var css$U = {"root":"lMXYuJ"};
 
 function CheckboxGroup(props) {
     const currentValue = props.value || [];
@@ -2806,7 +2840,7 @@ const Tabs = /* @__PURE__ */React.forwardRef((props, ref) => {
 });
 Tabs.displayName = 'Tabs';
 
-var css$T = {"root":"lRFOCl","modal-blocker":"M99ISm","modalBlocker":"M99ISm","animateModalBlocker":"yRsqBN","modal":"_4QtQh1","modal-footer":"TZcP8l","modalFooter":"TZcP8l","border-top":"_9gR2FJ","borderTop":"_9gR2FJ","modal-header":"E6QdWb","modalHeader":"E6QdWb","border-bottom":"RyEVCf","borderBottom":"RyEVCf"};
+var css$T = {"root":"_4yUjfz","modal-blocker":"TX5p8-","modalBlocker":"TX5p8-","animateModalBlocker":"qsInCo","modal":"_2Ks58T","modal-footer":"qmTu-7","modalFooter":"qmTu-7","border-top":"_6W15ve","borderTop":"_6W15ve","modal-header":"kBqnuN","modalHeader":"kBqnuN","border-bottom":"mGXFEu","borderBottom":"mGXFEu"};
 
 const ModalBlocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalBlocker, () => [css$T.modalBlocker]);
 const ModalWindow = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalWindow, () => [css$T.root, css$T.modal], (props) => {
@@ -2913,6 +2947,7 @@ const TREE_SHAKEABLE_INIT = () => ({
         columnHeader: {
             collapseAllTooltip: 'Collapse All',
             expandAllTooltip: 'Expand All',
+            filterActiveLabel: 'filter active',
         },
     },
     pickerFilterHeader: {
@@ -2998,7 +3033,7 @@ const TREE_SHAKEABLE_INIT = () => ({
 });
 const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
 
-var css$S = {"root":"_5QexGN","icon-wrapper":"kdiQJ7","iconWrapper":"kdiQJ7","action-wrapper":"dIMAuL","actionWrapper":"dIMAuL","close-icon":"qmU4i0","closeIcon":"qmU4i0","main-path":"_1tBY8r","mainPath":"_1tBY8r","content":"g6VUBm","close-wrapper":"JR0GPn","closeWrapper":"JR0GPn","clear-notifications":"u-uzl2","clearNotifications":"u-uzl2"};
+var css$S = {"root":"VCuR5k","icon-wrapper":"prqZvp","iconWrapper":"prqZvp","action-wrapper":"X-IzMp","actionWrapper":"X-IzMp","close-icon":"_3EZ22P","closeIcon":"_3EZ22P","main-path":"QDcskl","mainPath":"QDcskl","content":"J9j7nF","close-wrapper":"Cq64U-","closeWrapper":"Cq64U-","clear-notifications":"M5PhB8","clearNotifications":"M5PhB8"};
 
 const NotificationCard = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
     const notificationCardNode = React__namespace.default.useRef(null);
@@ -3031,7 +3066,7 @@ function ClearNotification() {
         React__namespace.default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
 }
 
-var css$R = {"footer":"_60qdeS"};
+var css$R = {"footer":"J56wd0"};
 
 class ConfirmationModal extends React__namespace.Component {
     render() {
@@ -3073,7 +3108,7 @@ function useReliableForceUpdate() {
     return red[1];
 }
 
-var css$Q = {"root":"tC19nI","container":"giKzNJ"};
+var css$Q = {"root":"CGEeiF","container":"vi-Ish"};
 
 const defaultFormat = 'MMM D, YYYY';
 const valueFormat = 'YYYY-MM-DD';
@@ -3300,14 +3335,14 @@ function DatePickerHeader({ navIconLeft, navIconRight, value: { month, view }, o
             React__namespace.createElement(Button, { icon: navIconRight || settings.datePicker.icons.body.nextIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
 }
 
-var css$P = {"root":"XdnSRh"};
+var css$P = {"root":"EXKo7e"};
 
 function applyDateSelectionMods() {
     return [css$P.root, `uui-size-${settings.datePicker.sizes.body}`];
 }
 const Calendar = /* @__PURE__ */uuiCore.withMods(uuiComponents.Calendar, applyDateSelectionMods);
 
-var css$O = {"root":"WYVM0E"};
+var css$O = {"root":"fM4MRI"};
 
 const uuiDatePickerBody = {
     wrapper: 'uui-datepicker-body-wrapper',
@@ -3389,6 +3424,10 @@ function DatePickerComponent(props, ref) {
     };
     const onBlur = (e) => {
         props.onBlur?.(e);
+        const formattedValue = toCustomDateFormat(value, format);
+        if (inputValue === formattedValue) {
+            return; // No changes made to the field, skip validation
+        }
         if (isValidDate(inputValue, format, props.filter)) {
             setInputValue(toCustomDateFormat(inputValue, format));
             onValueChange(toValueDateFormat(inputValue, format));
@@ -3430,7 +3469,7 @@ function DatePickerComponent(props, ref) {
 }
 const DatePicker = /* @__PURE__ */React__namespace.default.forwardRef(DatePickerComponent);
 
-var css$N = {"date-input":"Zfzja8","dateInput":"Zfzja8","root":"_4FuhU8","separator":"P3lURM"};
+var css$N = {"date-input":"f61-sG","dateInput":"f61-sG","root":"g7GnjG","separator":"awlDd6"};
 
 const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isInvalid, isReadonly, size, disableClear, rawProps, value, inFocus, format, onValueChange, onFocusInput, onBlurInput, onClick, getPlaceholder, filter, onKeyDown, preventEmptyFromDate, preventEmptyToDate, id, cx: classes, }, ref) => {
     const [inputValue, setInputValue] = React.useState(toCustomDateRangeFormat(value, format));
@@ -3507,7 +3546,7 @@ const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isIn
         React__namespace.default.createElement(TextInput, { cx: uuiCore.cx(css$N.dateInput, inFocus === 'to' && uuiCore.uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.rangeDatePicker.sizes.default, value: inputValue.to || undefined, icon: clearAllowed && ForwardRef$Q, iconPosition: "right", iconLabel: "Clear selected date range", onIconClick: onClear, onValueChange: (v) => onInputChange(v || '', 'to'), onFocus: (e) => handleFocus(e, 'to'), onBlur: (e) => handleBlur(e, 'to'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.to, onClick: onClick, onKeyDown: onInputKeyDown })));
 });
 
-var css$M = {"root":"tmO-ge"};
+var css$M = {"root":"FE5uLX"};
 
 const uuiPresets = {
     container: 'uui-presets-container',
@@ -3527,7 +3566,7 @@ function CalendarPresets(props) {
         getPresets(props.presets).map((item) => (React__namespace.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: settings.rangeDatePicker.sizes.preset })))));
 }
 
-var css$L = {"root":"_9l4AAN","container":"ZV5zAH","day-selection":"_4oVloa","daySelection":"_4oVloa","from-picker":"iNdUuh","fromPicker":"iNdUuh","to-picker":"_3DJQ-h","toPicker":"_3DJQ-h","bodes-wrapper":"RCavWs","bodesWrapper":"RCavWs","blocker":"ZQ-DVq"};
+var css$L = {"root":"g-Uh-a","container":"chyhsa","day-selection":"o1UhI-","daySelection":"o1UhI-","from-picker":"_9tzbXn","fromPicker":"_9tzbXn","to-picker":"wJloKY","toPicker":"wJloKY","bodes-wrapper":"R7HbPd","bodesWrapper":"R7HbPd","blocker":"VyzdAJ"};
 
 const uuiRangeDatePickerBody = {
     inRange: 'uui-range-datepicker-in-range',
@@ -3729,7 +3768,7 @@ const getDayState = (day, selectedDate) => {
     };
 };
 
-var css$K = {"dropdown-container":"NRIhlE","dropdownContainer":"NRIhlE"};
+var css$K = {"dropdown-container":"uKTNuw","dropdownContainer":"uKTNuw"};
 
 function RangeDatePickerComponent(props, ref) {
     const { value: _value, format = defaultFormat, size = settings.rangeDatePicker.sizes.default } = props;
@@ -3797,7 +3836,7 @@ function RangeDatePickerComponent(props, ref) {
 }
 const RangeDatePicker = /* @__PURE__ */React__namespace.default.forwardRef(RangeDatePickerComponent);
 
-var css$J = {"root":"bhPexW","blocker":"g5DvHx","marker":"efw3mZ","top":"zdbHm3","bottom":"eGCZfA","left":"eXy3xa","right":"fVoeKE","inside":"VsLu-1"};
+var css$J = {"root":"u7dZKH","blocker":"Uk3hQU","marker":"xeke1m","top":"B0TIVy","bottom":"_85B0uh","left":"ePl0zr","right":"_4R6YIi","inside":"gEBKHQ"};
 
 function DropMarker(props) {
     return props.isDndInProgress
@@ -3812,9 +3851,9 @@ function DropMarker(props) {
         : null;
 }
 
-var css$I = {"root":"EAAX-K","search-wrapper":"hNmjU-","searchWrapper":"hNmjU-","no-data":"nxK7fS","noData":"nxK7fS"};
+var css$I = {"root":"tMJiQm","search-wrapper":"fhZFAT","searchWrapper":"fhZFAT","no-data":"WMkNix","noData":"WMkNix","empty-status-announcer":"bvtPB7","emptyStatusAnnouncer":"bvtPB7"};
 
-var css$H = {"picker-row":"u5AZZ6","pickerRow":"u5AZZ6","align-widgets-top":"a-x7UY","alignWidgetsTop":"a-x7UY","row-content":"b3gd1w","rowContent":"b3gd1w","align-widgets-center":"LeeyZB","alignWidgetsCenter":"LeeyZB","icon-container":"P0KnuX","iconContainer":"P0KnuX","content-wrapper":"_8Cr--u","contentWrapper":"_8Cr--u","icon-wrapper":"BojYAa","iconWrapper":"BojYAa","icon-default":"Lgt4cy","iconDefault":"Lgt4cy","selected-mark":"Q-7L53","selectedMark":"Q-7L53"};
+var css$H = {"picker-row":"AznH1Z","pickerRow":"AznH1Z","align-widgets-top":"XPma4m","alignWidgetsTop":"XPma4m","row-content":"JwKtND","rowContent":"JwKtND","align-widgets-center":"JHmBNU","alignWidgetsCenter":"JHmBNU","icon-container":"oPKubC","iconContainer":"oPKubC","content-wrapper":"Pz-8SD","contentWrapper":"Pz-8SD","icon-wrapper":"lOXhs1","iconWrapper":"lOXhs1","icon-default":"zkdtCU","iconDefault":"zkdtCU","selected-mark":"Rfykaj","selectedMark":"Rfykaj"};
 
 const mergeHighlightRanges = (ranges) => {
     const mergedRanges = [];
@@ -3881,7 +3920,7 @@ const getHighlightedSearchMatches = (str, search) => {
     return getDecoratedText(str, ranges);
 };
 
-var css$G = {"root":"tgXlxW","column-gap":"jG030A","columnGap":"jG030A","title":"ZoRkwN","subtitle":"LtQgHD","disabled":"Uzd3jW","multiline":"yvfy1-"};
+var css$G = {"root":"OpXQJD","column-gap":"_2jvmWR","columnGap":"_2jvmWR","title":"vhbNHi","subtitle":"BAV0Du","disabled":"-byJT0","multiline":"_7FoW3u"};
 
 function PickerItem(props) {
     const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, } = props;
@@ -3970,6 +4009,15 @@ function DataPickerBody({ highlightSearchMatches = true, autoFocusSearch = true,
     const prevProps = uuiCore.usePrevious(props);
     const showSearch = props.showSearch === 'auto' ? props.totalCount > 10 : Boolean(props.showSearch);
     const [isKeyboardNavigation, setIsKeyboardNavigation] = React__namespace.default.useState(false);
+    const [emptyMessage, setEmptyMessage] = React__namespace.default.useState('');
+    // We need to also ensure that topIndex === 0, because we can have state were there is no rows but topIndex > 0, in case when we scrolled lover than we have rows
+    // we fix this state on next render and shouldn't show empty state.
+    const isEmptyList = props.rows.length === 0 && props.value.topIndex === 0;
+    React.useEffect(() => {
+        if (!isEmptyList) {
+            setEmptyMessage('');
+        }
+    }, [isEmptyList]);
     React.useEffect(() => {
         if (props.rows.length !== prevProps?.rows.length || (!isEqual__default.default(prevProps?.value.checked, props.value.checked) && !props.fixedBodyPosition)) {
             props.scheduleUpdate?.();
@@ -4059,12 +4107,11 @@ function DataPickerBody({ highlightSearchMatches = true, autoFocusSearch = true,
         : settings.pickerInput.sizes.body.getSearchSize({ pickerSize: props.searchSize });
     const renderedDataRows = React.useMemo(() => props.rows.map((row) => renderRow(row, props.value)), [props.rows, props.value, isKeyboardNavigation]);
     return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
+        React__namespace.default.createElement("div", { className: css$I.emptyStatusAnnouncer, role: "status", "aria-live": "polite", "aria-atomic": "true" }, emptyMessage),
         showSearch && (React__namespace.default.createElement("div", { key: "search", className: uuiCore.cx(css$I.searchWrapper, 'uui-picker_input-body-search') },
             React__namespace.default.createElement(uuiComponents.FlexCell, { grow: 1 }, autoFocusSearch ? React__namespace.default.createElement(FocusLock.MoveFocusInside, null, renderSearchInput()) : renderSearchInput()))),
-        React__namespace.default.createElement(FlexRow, { key: "body", cx: uuiCore.cx('uui-picker_input-body'), rawProps: { style: { maxHeight: props.maxHeight, maxWidth: props.maxWidth }, tabIndex: -1 } }, props.rows.length === 0 && props.value.topIndex === 0
-            // We need to also ensure that topIndex === 0, because we can have state were there is no rows but topIndex > 0, in case when we scrolled lover than we have rows
-            // we fix this state on next render and shouldn't show empty state.
-            ? renderEmpty() : (React__namespace.default.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, rows: renderedDataRows, role: "listbox", cx: css$I.root, rawProps: {
+        React__namespace.default.createElement(FlexRow, { key: "body", cx: uuiCore.cx('uui-picker_input-body'), rawProps: { style: { maxHeight: props.maxHeight, maxWidth: props.maxWidth }, tabIndex: -1 } }, isEmptyList
+            ? (React__namespace.default.createElement("div", { ref: (el) => el && setEmptyMessage(el.textContent ?? '') }, renderEmpty())) : (React__namespace.default.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, rows: renderedDataRows, role: "listbox", cx: css$I.root, rawProps: {
                 'aria-multiselectable': props.selectionMode === 'multi' ? true : null,
                 'aria-orientation': 'vertical',
                 tabIndex: 0,
@@ -4099,7 +4146,7 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = /* @__PURE__ */React__namespace.default.memo(DataPickerFooterImpl);
 
-var css$F = {"header":"NjrBsd","title":"EjGZFV","close":"d4-sql"};
+var css$F = {"header":"dcE--O","title":"KTqdQx","close":"ish9jy"};
 
 const DataPickerMobileHeaderImpl = (props) => {
     const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
@@ -4109,7 +4156,7 @@ const DataPickerMobileHeaderImpl = (props) => {
 };
 const DataPickerMobileHeader = /* @__PURE__ */React__namespace.default.memo(DataPickerMobileHeaderImpl);
 
-var css$E = {"done":"QAHFPg","container":"WeVuSZ"};
+var css$E = {"done":"zlooV9","container":"_4TbYLa"};
 
 const PickerBodyMobileView = (props) => {
     const isMobileView = uuiCore.isMobile();
@@ -4121,7 +4168,7 @@ const PickerBodyMobileView = (props) => {
         isMobileView && (React__namespace.default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => props.onClose?.(), cx: css$E.done, size: settings.pickerInput.sizes.body.mobileFooterLinkButton }))));
 };
 
-var css$D = {"sub-header-wrapper":"-WaTiC","subHeaderWrapper":"-WaTiC","switch":"vgUYG7","search":"Kcvg3m","no-found-modal-container":"Z-kRp1","noFoundModalContainer":"Z-kRp1","no-found-modal-container-icon":"nB6TFX","noFoundModalContainerIcon":"nB6TFX","no-found-modal-container-text":"kud4P-","noFoundModalContainerText":"kud4P-","body":"qDPF85"};
+var css$D = {"sub-header-wrapper":"DctblX","subHeaderWrapper":"DctblX","switch":"nxAIRh","search":"gA8hqk","no-found-modal-container":"OK1ls2","noFoundModalContainer":"OK1ls2","no-found-modal-container-icon":"OkqEpQ","noFoundModalContainerIcon":"OkqEpQ","no-found-modal-container-text":"AHOgpq","noFoundModalContainerText":"AHOgpq","body":"aioejM"};
 
 function PickerModal(props) {
     const { view, selection, dataSourceStateLens, dataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = uuiComponents.usePickerModal(props);
@@ -4182,7 +4229,7 @@ function PickerModal(props) {
             React__namespace.default.createElement(ModalFooter, null, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$C = {"tooltip":"sVSMmu","noShrink":"q5FRqd"};
+var css$C = {"tooltip":"_4Treuu","noShrink":"rR7TvO"};
 
 const PickerTogglerTag = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const tagProps = {
@@ -4201,7 +4248,7 @@ const PickerTogglerTag = /* @__PURE__ */React__namespace.forwardRef((props, ref)
     }
 });
 
-var css$B = {"root":"EXkD-M"};
+var css$B = {"root":"QGtLbJ"};
 
 const defaultMode = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
@@ -4283,7 +4330,7 @@ function PickerInputComponent(props, ref) {
 }
 const PickerInput = /* @__PURE__ */React__namespace.default.forwardRef(PickerInputComponent);
 
-var css$A = {"row":"FnwVP-"};
+var css$A = {"row":"hWRm8c"};
 
 function PickerListRow(props) {
     let label;
@@ -4303,7 +4350,7 @@ function PickerListRow(props) {
     return (React__namespace.default.createElement("div", { role: "option", "aria-selected": props.isSelectable ? props.isSelected : undefined, "aria-busy": props.isLoading, "aria-posinset": props.index + 1, ...(props.checkbox?.isVisible && { 'aria-checked': props.isChecked }), className: css$A.row }, component));
 }
 
-var css$z = {"root":"zKr2jP"};
+var css$z = {"root":"BM9No7"};
 
 function PickerList(props) {
     const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, getModalTogglerCaption, } = uuiComponents.usePickerList(props);
@@ -4338,7 +4385,7 @@ function PickerList(props) {
             }, selectedRows)));
 }
 
-var css$y = {"root":"wmTpKH","wrapper":"_3SQ0tU","align-widgets-top":"KholVD","alignWidgetsTop":"KholVD","align-widgets-center":"_8BvvB1","alignWidgetsCenter":"_8BvvB1"};
+var css$y = {"root":"djeBSr","wrapper":"_2xF4NN","align-widgets-top":"-mnZme","alignWidgetsTop":"-mnZme","align-widgets-center":"DCXMuu","alignWidgetsCenter":"DCXMuu"};
 
 function DataTableCell(initialProps) {
     const props = { ...initialProps };
@@ -4388,7 +4435,7 @@ function DataTableCell(initialProps) {
     return React__namespace.createElement(uuiComponents.DataTableCell, { ...props });
 }
 
-var css$x = {"root":"nLHLB5"};
+var css$x = {"root":"_-58jb7"};
 
 // 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.
@@ -4404,14 +4451,16 @@ const DataTableRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableRow,
     ];
 }, () => propsMods);
 
-var css$w = {"sorting-panel-container":"EmzCRJ","sortingPanelContainer":"EmzCRJ"};
+var css$w = {"sorting-panel-container":"vLpv8O","sortingPanelContainer":"vLpv8O"};
 
 const SortingPanelImpl = ({ sortDirection, onSort }) => {
     const sortAsc = React.useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
     const sortDesc = React.useCallback(() => onSort(sortDirection === 'desc' ? undefined : 'desc'), [onSort]);
+    const isAscSelected = sortDirection === 'asc';
+    const isDescSelected = sortDirection === 'desc';
     return (React__namespace.default.createElement(FlexCell, { cx: uuiCore.cx(css$w.sortingPanelContainer, 'uui-dropdownMenu-body') },
-        React__namespace.default.createElement(DropdownMenuButton, { isActive: sortDirection === 'asc', caption: i18n.pickerFilterHeader.sortAscending, icon: settings.dataTable.icons.header.ascSortIcon, onClick: sortAsc }),
-        React__namespace.default.createElement(DropdownMenuButton, { isActive: sortDirection === 'desc', caption: i18n.pickerFilterHeader.sortDescending, icon: settings.dataTable.icons.header.descSortIcon, onClick: sortDesc })));
+        React__namespace.default.createElement(DropdownMenuButton, { isActive: isAscSelected, caption: i18n.pickerFilterHeader.sortAscending, icon: settings.dataTable.icons.header.ascSortIcon, onClick: sortAsc, rawProps: { role: 'menuitemradio', 'aria-checked': isAscSelected } }),
+        React__namespace.default.createElement(DropdownMenuButton, { isActive: isDescSelected, caption: i18n.pickerFilterHeader.sortDescending, icon: settings.dataTable.icons.header.descSortIcon, onClick: sortDesc, rawProps: { role: 'menuitemradio', 'aria-checked': isDescSelected } })));
 };
 const SortingPanel = /* @__PURE__ */React__namespace.default.memo(SortingPanelImpl);
 
@@ -4424,113 +4473,114 @@ const ColumnHeaderDropdownImpl = (props) => {
 };
 const ColumnHeaderDropdown = /* @__PURE__ */React__namespace.default.memo(ColumnHeaderDropdownImpl);
 
-var css$v = {"root":"mKnkBv","caption-wrapper":"Ch78UX","captionWrapper":"Ch78UX","sort-icon":"n22IQI","sortIcon":"n22IQI","dropdown-icon":"M7VFve","dropdownIcon":"M7VFve","infoIcon":"D7Hgfd","sortInActive":"Q6pnMU","align-right":"dmfN9r","alignRight":"dmfN9r","align-center":"rk2LcT","alignCenter":"rk2LcT","caption":"JsHZsm","truncate":"xhOP-F","upper-case":"A-5jF3","upperCase":"A-5jF3","checkbox":"U-WdUO","icon":"qy8MdU","fold-all-icon":"VG9oQE","foldAllIcon":"VG9oQE","cell-tooltip":"_5HuM3H","cellTooltip":"_5HuM3H","resizing-marker":"_2jAD-J","resizingMarker":"_2jAD-J","pinned-right":"_6Ibbi0","pinnedRight":"_6Ibbi0","draggable":"ughYjh","ghost":"QHNfl-","is-dragged-out":"jxqvhj","isDraggedOut":"jxqvhj","dnd-marker-left":"u7Q6Qj","dndMarkerLeft":"u7Q6Qj","dnd-marker-right":"OQhn0O","dndMarkerRight":"OQhn0O","cell-tooltip-wrapper":"jGsFt2","cellTooltipWrapper":"jGsFt2","cell-tooltip-text":"oONZGp","cellTooltipText":"oONZGp","tooltip-caption":"rMc-oB","tooltipCaption":"rMc-oB","tooltip-info":"_5uo0nu","tooltipInfo":"_5uo0nu"};
+var css$v = {"root":"MlPbCS","caption-wrapper":"NiopQP","captionWrapper":"NiopQP","sort-icon":"UO6JkM","sortIcon":"UO6JkM","dropdown-icon":"iRU0zZ","dropdownIcon":"iRU0zZ","infoIcon":"L7egmt","sortInActive":"gfP7KI","align-right":"uk9YRV","alignRight":"uk9YRV","align-center":"hOepfI","alignCenter":"hOepfI","caption":"iW3U6O","truncate":"_7SBpJX","upper-case":"ub6mi-","upperCase":"ub6mi-","checkbox":"NO-b1J","icon":"GFDAeS","fold-all-icon":"x5NQJW","foldAllIcon":"x5NQJW","cell-tooltip":"FZW2AN","cellTooltip":"FZW2AN","resizing-marker":"w8Dc-z","resizingMarker":"w8Dc-z","pinned-right":"_3OcRs0","pinnedRight":"_3OcRs0","draggable":"z-n-KL","ghost":"nSsP-w","is-dragged-out":"n7UC4E","isDraggedOut":"n7UC4E","dnd-marker-left":"iYrgv0","dndMarkerLeft":"iYrgv0","dnd-marker-right":"dx-azV","dndMarkerRight":"dx-azV","cell-tooltip-wrapper":"PGSC1n","cellTooltipWrapper":"PGSC1n","cell-tooltip-text":"h3gfus","cellTooltipText":"h3gfus","tooltip-caption":"ChZNkP","tooltipCaption":"ChZNkP","tooltip-info":"hMScDw","tooltipInfo":"hMScDw"};
 
-class DataTableHeaderCell extends React__namespace.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            isDropdownOpen: null,
-        };
-        this.getTooltipContent = (column) => (React__namespace.createElement("div", { className: uuiCore.cx(css$v.cellTooltipWrapper, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaptionTooltip) },
-            React__namespace.createElement(Text, { cx: [css$v.cellTooltipText, css$v.tooltipCaption] }, column.caption),
-            column.info && (React__namespace.createElement(Text, { cx: [css$v.cellTooltipText, css$v.tooltipInfo] }, column.info))));
-        this.getColumnCaption = (props, dropdownProps) => {
-            const renderTooltip = this.props.column.renderTooltip || this.getTooltipContent;
-            const captionCx = uuiCore.cx([
-                css$v.caption,
-                this.props.textCase === 'upper' && css$v.upperCase,
-                uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaption,
-                'uui-typography-inline',
-                this.props.size >= '48' && css$v.truncate,
-            ]);
-            const handleFilterOpen = (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    dropdownProps.onClick(e);
-                    e.preventDefault();
-                }
-            };
-            const handleSort = (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    props.toggleSort(e);
-                    e.preventDefault();
-                }
-            };
-            return (React__namespace.createElement("div", { className: uuiCore.cx(css$v.captionWrapper, css$v['align-' + this.props.column.textAlign], uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
-                React__namespace.createElement(Tooltip, { placement: "top", color: "inverted", content: renderTooltip(this.props.column), cx: [css$v.cellTooltip, 'uui-dt-header-tooltip'], openDelay: 600, closeOnMouseLeave: "boundary" },
-                    React__namespace.createElement("div", { key: "text", className: captionCx }, this.props.column.caption)),
-                this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React__namespace.createElement(uuiComponents.ControlIcon, { key: "sort", cx: uuiCore.cx(css$v.icon, css$v.sortIcon, !this.props.sortDirection && css$v.sortInActive, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderSortIcon), icon: settings.dataTable.icons.header[this.props.sortDirection === 'desc' ? 'descSortIcon' : this.props.sortDirection === 'asc' ? 'ascSortIcon' : 'defaultSortIcon'], onKeyDown: !this.props.column.renderFilter ? handleSort : undefined })),
-                this.props.isFilterActive && (React__namespace.createElement(IconButton, { key: "filter", cx: uuiCore.cx(css$v.icon, !this.props.sortDirection && css$v.filterIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "neutral", icon: settings.dataTable.icons.header.filterIcon })),
-                this.props.column.renderFilter && (React__namespace.createElement(uuiComponents.ControlIcon, { key: "dropdown", cx: uuiCore.cx(css$v.icon, css$v.dropdownIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), icon: settings.dataTable.icons.header[this.state.isDropdownOpen ? 'openedDropdownIcon' : 'dropdownIcon'], onKeyDown: handleFilterOpen }))));
-        };
-        this.renderHeaderCheckbox = () => {
-            if (this.props.selectAll && this.props.isFirstColumn) {
-                return (React__namespace.createElement(Checkbox, { size: settings.dataTable.sizes.body.checkboxMap[this.props.size], rawProps: { 'aria-label': 'Select All' }, ...this.props.selectAll, cx: uuiCore.cx(css$v.checkbox, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCheckbox) }));
+function DefaultTooltipContent(column) {
+    return (React__namespace.default.createElement("div", { className: uuiCore.cx(css$v.cellTooltipWrapper, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaptionTooltip) },
+        React__namespace.default.createElement(Text, { cx: [css$v.cellTooltipText, css$v.tooltipCaption] }, column.caption),
+        column.info && (React__namespace.default.createElement(Text, { cx: [css$v.cellTooltipText, css$v.tooltipInfo] }, column.info))));
+}
+function DataTableHeaderCell(props) {
+    const [isDropdownOpen, setIsDropdownOpen] = React.useState(null);
+    const id = React.useId();
+    const captionId = `uui-dt-header-caption-${id}-${props.column.key}`;
+    const captionAriaProps = {
+        'aria-labelledby': captionId,
+        'aria-description': props.isFilterActive ? i18n.tables.columnHeader.filterActiveLabel : undefined,
+    };
+    const getColumnCaption = (contentProps, dropdownProps) => {
+        const renderTooltip = props.column.renderTooltip || DefaultTooltipContent;
+        const captionCx = uuiCore.cx([
+            css$v.caption,
+            props.textCase === 'upper' && css$v.upperCase,
+            uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaption,
+            'uui-typography-inline',
+            props.size >= '48' && css$v.truncate,
+        ]);
+        const handleFilterOpen = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                dropdownProps.onClick(e);
+                e.preventDefault();
             }
         };
-        this.renderFoldAllIcon = () => {
-            if (this.props.isFirstColumn && this.props.showFoldAll) {
-                return (React__namespace.createElement(Tooltip, { content: this.props.areAllFolded
-                        ? i18n.tables.columnHeader.expandAllTooltip
-                        : i18n.tables.columnHeader.collapseAllTooltip },
-                    React__namespace.createElement(uuiComponents.ControlIcon, { cx: uuiCore.cx(css$v.icon, css$v.foldAllIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderFoldAllIcon), icon: settings.dataTable.icons.header[this.props.areAllFolded ? 'unfoldIcon' : 'foldIcon'], onClick: this.props.onFoldAll, rawProps: {
-                            'aria-label': this.props.areAllFolded ? 'Expand All' : 'Collapse All',
-                            'aria-expanded': !!this.props.areAllFolded,
-                        } })));
+        const handleSort = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                contentProps.toggleSort(e);
+                e.preventDefault();
             }
         };
-        this.renderResizingMarker = (props) => {
-            return (React__namespace.createElement("div", { role: "separator", onMouseDown: props.onResizeStart, className: uuiCore.cx(css$v.resizingMarker, uuiCore.uuiMarkers.draggable, uuiCore.uuiMarkers.clickable) }));
-        };
-        this.getLeftPadding = () => {
-            const { columnsGap, isFirstColumn } = this.props;
-            if (columnsGap)
-                return isFirstColumn ? `${columnsGap}px` : `${+columnsGap / 2}px`;
-            return `var(--uui-dt-header-cell-padding${isFirstColumn ? '-edge' : ''})`;
-        };
-        this.getRightPadding = () => {
-            const { columnsGap, isLastColumn } = this.props;
-            if (columnsGap)
-                return isLastColumn ? `${columnsGap}px` : `${+columnsGap / 2}px`;
-            return `var(--uui-dt-header-cell-padding${isLastColumn ? '-edge' : ''})`;
-        };
-        this.getResizingMarkerWidth = () => {
-            const { columnsGap } = this.props;
-            return columnsGap ? `${+columnsGap / 2}px` : 'var(--uui-resize-marker-width)';
-        };
-        this.renderCellContent = (props, dropdownProps) => {
-            const isResizable = this.props.column.allowResizing ?? this.props.allowColumnsResizing;
-            const onClickEvent = !props.isResizing && (!this.props.column.renderFilter ? props.toggleSort : dropdownProps?.onClick);
-            const computeStyles = {
-                '--uui-dt-header-cell-icon-size': `${settings.dataTable.sizes.header.iconMap[this.props.size || settings.dataTable.sizes.header.row]}px`,
-                '--uui-dt-header-cell-padding-start': this.getLeftPadding(),
-                '--uui-dt-header-cell-padding-end': this.getRightPadding(),
-                '--uui-dt-header-cell-resizing-marker-width': this.getResizingMarkerWidth(),
-            };
-            return (React__namespace.createElement(uuiComponents.DataTableCellContainer, { column: this.props.column, ref: (ref) => {
-                    props.ref(ref);
-                    dropdownProps?.ref?.(ref);
-                }, cx: uuiCore.cx(uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiCore.uuiMarkers.clickable, css$v.root, `uui-size-${this.props.size || settings.dataTable.sizes.header.row}`, this.props.isFirstColumn && 'uui-dt-header-first-column', this.props.isLastColumn && 'uui-dt-header-last-column', this.props.column.fix && css$v['pinned-' + this.props.column.fix], isResizable && uuiCore.uuiMarkers.resizable, props.isDraggable && css$v.draggable, props.isDragGhost && css$v.ghost, props.isDraggedOut && css$v.isDraggedOut, props.isDndInProgress && css$v['dnd-marker-' + props.position]), onClick: onClickEvent, rawProps: {
-                    role: 'columnheader',
-                    'aria-sort': this.props.sortDirection === 'asc' ? 'ascending' : this.props.sortDirection ? 'descending' : 'none',
-                    ...props.eventHandlers,
-                }, style: computeStyles },
-                this.renderHeaderCheckbox(),
-                this.renderFoldAllIcon(),
-                this.getColumnCaption(props, dropdownProps),
-                isResizable && this.renderResizingMarker(props)));
-        };
-        this.renderCellWithFilter = (props) => (React__namespace.createElement(ColumnHeaderDropdown, { isOpen: this.state.isDropdownOpen, isSortable: this.props.column.isSortable, renderTarget: (dropdownProps) => this.renderCellContent(props, dropdownProps), renderFilter: this.props.renderFilter, onSort: this.props.onSort, sortDirection: this.props.sortDirection, onOpenChange: (isDropdownOpen) => this.setState({ isDropdownOpen }), title: this.props.column.caption }));
-    }
-    render() {
-        if (this.props.column.renderHeaderCell) {
-            return this.props.column.renderHeaderCell(this.props);
+        return (React__namespace.default.createElement("div", { className: uuiCore.cx(css$v.captionWrapper, css$v['align-' + props.column.textAlign], uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
+            React__namespace.default.createElement(Tooltip, { placement: "top", color: "inverted", content: renderTooltip(props.column), cx: [css$v.cellTooltip, 'uui-dt-header-tooltip'], openDelay: 600, closeOnMouseLeave: "boundary" },
+                React__namespace.default.createElement("div", { key: "text", id: captionId, className: captionCx }, props.column.caption)),
+            props.column.isSortable && (!props.column.renderFilter || props.sortDirection) && (React__namespace.default.createElement(uuiComponents.ControlIcon, { key: "sort", cx: uuiCore.cx(css$v.icon, css$v.sortIcon, !props.sortDirection && css$v.sortInActive, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderSortIcon), icon: settings.dataTable.icons.header[props.sortDirection === 'desc' ? 'descSortIcon' : props.sortDirection === 'asc' ? 'ascSortIcon' : 'defaultSortIcon'], onKeyDown: !props.column.renderFilter ? handleSort : undefined, rawProps: { ...captionAriaProps, 'aria-hidden': !!props.column.renderFilter } })),
+            props.isFilterActive && (React__namespace.default.createElement(IconButton, { key: "filter", cx: uuiCore.cx(css$v.icon, !props.sortDirection && css$v.filterIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "neutral", icon: settings.dataTable.icons.header.filterIcon, rawProps: { 'aria-hidden': true } })),
+            props.column.renderFilter && (React__namespace.default.createElement(uuiComponents.ControlIcon, { key: "dropdown", cx: uuiCore.cx(css$v.icon, css$v.dropdownIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), icon: settings.dataTable.icons.header[isDropdownOpen ? 'openedDropdownIcon' : 'dropdownIcon'], onKeyDown: handleFilterOpen, rawProps: captionAriaProps }))));
+    };
+    const renderHeaderCheckbox = () => {
+        if (props.selectAll && props.isFirstColumn) {
+            return (React__namespace.default.createElement(Checkbox, { size: settings.dataTable.sizes.body.checkboxMap[props.size], rawProps: { 'aria-label': 'Select All' }, ...props.selectAll, cx: uuiCore.cx(css$v.checkbox, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCheckbox) }));
+        }
+    };
+    const renderFoldAllIcon = () => {
+        if (props.isFirstColumn && props.showFoldAll) {
+            return (React__namespace.default.createElement(Tooltip, { content: props.areAllFolded
+                    ? i18n.tables.columnHeader.expandAllTooltip
+                    : i18n.tables.columnHeader.collapseAllTooltip },
+                React__namespace.default.createElement(uuiComponents.ControlIcon, { cx: uuiCore.cx(css$v.icon, css$v.foldAllIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderFoldAllIcon), icon: settings.dataTable.icons.header[props.areAllFolded ? 'unfoldIcon' : 'foldIcon'], onClick: props.onFoldAll, rawProps: {
+                        'aria-label': props.areAllFolded ? 'Expand All' : 'Collapse All',
+                        'aria-expanded': !!props.areAllFolded,
+                    } })));
         }
-        return (React__namespace.createElement(uuiComponents.DataTableHeaderCell, { ...this.props, renderCellContent: this.props.column.renderFilter ? this.renderCellWithFilter : this.renderCellContent }));
+    };
+    const renderResizingMarker = (contentProps) => {
+        return (React__namespace.default.createElement("div", { role: "separator", onMouseDown: contentProps.onResizeStart, className: uuiCore.cx(css$v.resizingMarker, uuiCore.uuiMarkers.draggable, uuiCore.uuiMarkers.clickable) }));
+    };
+    const getLeftPadding = () => {
+        const { columnsGap, isFirstColumn } = props;
+        if (columnsGap)
+            return isFirstColumn ? `${columnsGap}px` : `${+columnsGap / 2}px`;
+        return `var(--uui-dt-header-cell-padding${isFirstColumn ? '-edge' : ''})`;
+    };
+    const getRightPadding = () => {
+        const { columnsGap, isLastColumn } = props;
+        if (columnsGap)
+            return isLastColumn ? `${columnsGap}px` : `${+columnsGap / 2}px`;
+        return `var(--uui-dt-header-cell-padding${isLastColumn ? '-edge' : ''})`;
+    };
+    const getResizingMarkerWidth = () => {
+        const { columnsGap } = props;
+        return columnsGap ? `${+columnsGap / 2}px` : 'var(--uui-resize-marker-width)';
+    };
+    const renderCellContent = (contentProps, dropdownProps) => {
+        const isResizable = props.column.allowResizing ?? props.allowColumnsResizing;
+        const onClickEvent = !contentProps.isResizing && (!props.column.renderFilter ? contentProps.toggleSort : dropdownProps?.onClick);
+        const computeStyles = {
+            '--uui-dt-header-cell-icon-size': `${settings.dataTable.sizes.header.iconMap[props.size || settings.dataTable.sizes.header.row]}px`,
+            '--uui-dt-header-cell-padding-start': getLeftPadding(),
+            '--uui-dt-header-cell-padding-end': getRightPadding(),
+            '--uui-dt-header-cell-resizing-marker-width': getResizingMarkerWidth(),
+        };
+        return (React__namespace.default.createElement(uuiComponents.DataTableCellContainer, { column: props.column, ref: (ref) => {
+                contentProps.ref(ref);
+                dropdownProps?.ref?.(ref);
+            }, cx: uuiCore.cx(uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCell, (props.column.isSortable || props.isDropdown) && uuiCore.uuiMarkers.clickable, css$v.root, `uui-size-${props.size || settings.dataTable.sizes.header.row}`, props.isFirstColumn && 'uui-dt-header-first-column', props.isLastColumn && 'uui-dt-header-last-column', props.column.fix && css$v['pinned-' + props.column.fix], isResizable && uuiCore.uuiMarkers.resizable, contentProps.isDraggable && css$v.draggable, contentProps.isDragGhost && css$v.ghost, contentProps.isDraggedOut && css$v.isDraggedOut, contentProps.isDndInProgress && css$v['dnd-marker-' + contentProps.position]), onClick: onClickEvent, rawProps: {
+                role: 'columnheader',
+                'aria-sort': props.sortDirection === 'asc' ? 'ascending' : props.sortDirection ? 'descending' : 'none',
+                ...contentProps.eventHandlers,
+            }, style: computeStyles },
+            renderHeaderCheckbox(),
+            renderFoldAllIcon(),
+            getColumnCaption(contentProps, dropdownProps),
+            isResizable && renderResizingMarker(contentProps)));
+    };
+    const renderCellWithFilter = (contentProps) => (React__namespace.default.createElement(ColumnHeaderDropdown, { isOpen: isDropdownOpen, isSortable: props.column.isSortable, renderTarget: (dropdownProps) => renderCellContent(contentProps, dropdownProps), renderFilter: props.renderFilter, onSort: props.onSort, sortDirection: props.sortDirection, onOpenChange: setIsDropdownOpen, title: props.column.caption }));
+    if (props.column.renderHeaderCell) {
+        return props.column.renderHeaderCell(props);
     }
+    return (React__namespace.default.createElement(uuiComponents.DataTableHeaderCell, { ...props, renderCellContent: props.column.renderFilter ? renderCellWithFilter : renderCellContent }));
 }
 
-var css$u = {"root":"pPb-jB","caption-wrapper":"ogYG0j","captionWrapper":"ogYG0j","align-center":"PDwe6v","alignCenter":"PDwe6v","caption":"DJgyCM","truncate":"iXTK5U","upper-case":"UswDSS","upperCase":"UswDSS","group-cell-tooltip":"pF-6Os","groupCellTooltip":"pF-6Os","group-cell-tooltip-wrapper":"_1Lia3-","groupCellTooltipWrapper":"_1Lia3-","group-cell-tooltip-text":"x5zHcL","groupCellTooltipText":"x5zHcL","tooltip-caption":"nL6NLI","tooltipCaption":"nL6NLI","tooltip-info":"HhhtTx","tooltipInfo":"HhhtTx"};
+var css$u = {"root":"_2uQD0I","caption-wrapper":"DCW1wE","captionWrapper":"DCW1wE","align-center":"OOZAi0","alignCenter":"OOZAi0","caption":"RJC3aU","truncate":"Ik27Fy","upper-case":"h7yYCr","upperCase":"h7yYCr","group-cell-tooltip":"Gtpssv","groupCellTooltip":"Gtpssv","group-cell-tooltip-wrapper":"Mx2RxI","groupCellTooltipWrapper":"Mx2RxI","group-cell-tooltip-text":"Rd2QDK","groupCellTooltipText":"Rd2QDK","tooltip-caption":"lj18gK","tooltipCaption":"lj18gK","tooltip-info":"_8tibXu","tooltipInfo":"_8tibXu"};
 
 class DataTableHeaderGroupCell extends React__namespace.Component {
     constructor() {
@@ -4570,7 +4620,7 @@ class DataTableHeaderGroupCell extends React__namespace.Component {
     }
 }
 
-var css$t = {"root":"a8rBQY"};
+var css$t = {"root":"_5cSIAT"};
 
 const DataTableHeaderRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableHeaderRow, () => [css$t.root, 'uui-dt-vars'], (mods) => {
     return ({
@@ -4678,7 +4728,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":"Wo3kzg","header":"W77D0P","title":"O-eEci","removeButton":"seVjF4","with-search":"KspFtz","withSearch":"KspFtz"};
+var css$s = {"body":"Oeq3L5","header":"eMTe8I","title":"q4z-t1","removeButton":"-mPrB9","with-search":"_5ZXgMR","withSearch":"_5ZXgMR"};
 
 function FilterColumnBody(props) {
     const [predicate, setPredicate] = React.useState(getDefaultPredicate(props.predicates, props.value));
@@ -4739,7 +4789,7 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var css$r = {"unpin-icon":"_1Ylry-","unpinIcon":"_1Ylry-","pin-toggler-icon":"WYLTuX","pinTogglerIcon":"WYLTuX"};
+var css$r = {"unpin-icon":"BnhK--","unpinIcon":"BnhK--","pin-toggler-icon":"d2W-Dd","pinTogglerIcon":"d2W-Dd"};
 
 function PinIconButton(props) {
     const i18nLocal = i18n.tables.columnsConfigurationModal;
@@ -4790,7 +4840,7 @@ function getUnpinIcon(params) {
     }
 }
 
-var css$q = {"row-wrapper":"BRohev","rowWrapper":"BRohev","pin-icon-button":"Z0RdBI","pinIconButton":"Z0RdBI","not-pinned":"_5ebTVx","notPinned":"_5ebTVx","checkbox":"ZtJDFF","drag-handle":"gTlWH1","dragHandle":"gTlWH1","dnd-disabled":"_3LlTeT","dndDisabled":"_3LlTeT"};
+var css$q = {"row-wrapper":"c9H8oz","rowWrapper":"c9H8oz","pin-icon-button":"yaZ9Zn","pinIconButton":"yaZ9Zn","not-pinned":"hpuUvH","notPinned":"hpuUvH","checkbox":"iJa3dS","drag-handle":"QzxqNA","dragHandle":"QzxqNA","dnd-disabled":"PZUp2w","dndDisabled":"PZUp2w"};
 
 const ColumnRow = /* @__PURE__ */React__namespace.memo(function ColumnRow(props) {
     const { column } = props;
@@ -4824,7 +4874,7 @@ const ColumnRow = /* @__PURE__ */React__namespace.memo(function ColumnRow(props)
     return (React__namespace.createElement(uuiCore.DndActor, { key: column.key, srcData: isDndAllowed && data, dstData: data, canAcceptDrop: onCanAcceptDrop, onDrop: onDrop, render: renderContent }));
 });
 
-var css$p = {"root":"-wGL22","main-panel":"MoWf5P","mainPanel":"MoWf5P","group":"U1U-he","group-title":"VU7acp","groupTitle":"VU7acp","group-items":"muIn-v","groupItems":"muIn-v","no-data":"O99bu-","noData":"O99bu-","no-data-title":"QxvQ96","noDataTitle":"QxvQ96","no-data-sub-title":"Npcqlh","noDataSubTitle":"Npcqlh","h-divider":"qWrWOP","hDivider":"qWrWOP","search-area":"xAd54e","searchArea":"xAd54e","subgroup-accordion":"wnZDbW","subgroupAccordion":"wnZDbW","subgroup":"zSxw5A","subgroup-title":"_8eHocM","subgroupTitle":"_8eHocM"};
+var css$p = {"root":"I8e28f","main-panel":"w7Zcli","mainPanel":"w7Zcli","group":"-JPNp5","group-title":"L-MM9V","groupTitle":"L-MM9V","group-items":"uN10Jg","groupItems":"uN10Jg","no-data":"-l34C5","noData":"-l34C5","no-data-title":"C6xq4x","noDataTitle":"C6xq4x","no-data-sub-title":"mcfBS1","noDataSubTitle":"mcfBS1","h-divider":"_91tlWq","hDivider":"_91tlWq","search-area":"Mm3qTT","searchArea":"Mm3qTT","subgroup-accordion":"AALvgz","subgroupAccordion":"AALvgz","subgroup":"vsKUIZ","subgroup-title":"FiM4NP","subgroupTitle":"FiM4NP"};
 
 const renderGroupTitle = (title, amount) => (React__namespace.createElement(FlexRow, { cx: css$p.group },
     React__namespace.createElement(Text, { size: "none", cx: css$p.groupTitle }, title),
@@ -4927,7 +4977,7 @@ const getChildrenAndRest = (row, rows) => {
     return [children, rest];
 };
 
-var css$o = {"listContainer":"Ng-O--","header":"STVLJ3","group":"_9p4TG5","stickyHeader":"kMhqu1"};
+var css$o = {"listContainer":"-gBDgo","header":"uPVX4r","group":"Nlg0US","stickyHeader":"P-aC-C"};
 
 function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
     const rowRef = React.useRef(undefined);
@@ -4967,7 +5017,7 @@ function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, r
             React__namespace.default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
 }
 
-var css$n = {"root":"wdzXqF","sticky-header":"O8TivO","stickyHeader":"O8TivO","no-results":"zccqlV","noResults":"zccqlV","icon":"ExKJUn","title":"_00tHys"};
+var css$n = {"root":"Rt6x9-","sticky-header":"qKF0-g","stickyHeader":"qKF0-g","no-results":"fSp-H-","noResults":"fSp-H-","icon":"EpGowY","title":"ImAAqn"};
 
 function DataTable(props) {
     const { uuiModals } = uuiCore.useUuiContext();
@@ -5009,6 +5059,7 @@ function DataTable(props) {
         role: 'table',
         'aria-colcount': columns.length,
         'aria-rowcount': props.rowsCount,
+        ...props.rawProps,
     };
     return (React__namespace.createElement(uuiComponents.DataTableSelectionProvider, { onCopy: props.onCopy, rows: rows, columns: columns },
         React__namespace.createElement(uuiComponents.DataTableFocusProvider, { dataTableFocusManager: props.dataTableFocusManager }, props.disableVirtualization === true
@@ -5016,7 +5067,7 @@ function DataTable(props) {
             : (React__namespace.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rowsCount: props.rowsCount, renderRows: renderTableBody, cx: classes, isLoading: props.isReloading, rowsSelector: "[role=row]", rawProps: rawProps })))));
 }
 
-var css$m = {"root":"Hm8PuR","title-wrapper":"eNq-vK","titleWrapper":"eNq-vK","title":"_6jDmxz","text-wrapper":"-Ty3ot","textWrapper":"-Ty3ot","selection":"VkuBX8","postfix":"_19-Awi","selected":"_6WpmvX"};
+var css$m = {"root":"bEq-Qb","title-wrapper":"iUPJXI","titleWrapper":"iUPJXI","title":"h6zCAh","text-wrapper":"AAQtxj","textWrapper":"AAQtxj","selection":"v2oaFP","postfix":"_5Ql-LF","selected":"O-rh-V"};
 
 const FilterPanelItemToggler = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const togglerPickerOpened = (e) => {
@@ -5241,9 +5292,10 @@ function FilterRangeDatePickerBody(props) {
         renderFooter()));
 }
 
-var css$l = {"container":"kLHvmW"};
+var css$l = {"container":"xeqrCL"};
 
-function FilterNumericBody(props) {
+function FilterNumericBody({ min, max, step, ...props }) {
+    const numericInputProps = { min, max, step };
     const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
     const isWrongRange = (from, to) => {
         if (!to && to !== 0)
@@ -5292,15 +5344,15 @@ function FilterNumericBody(props) {
         return (React__namespace.default.createElement("div", null,
             React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", columnGap: "12", borderBottom: true, cx: css$l.container },
                 React__namespace.default.createElement(FlexCell, { width: "100%" },
-                    React__namespace.default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: value?.from ?? null, onValueChange: rangeValueHandler('from'), placeholder: "Min", formatOptions: { maximumFractionDigits: 2 } })),
+                    React__namespace.default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: value?.from ?? null, onValueChange: rangeValueHandler('from'), placeholder: "Min", formatOptions: { maximumFractionDigits: 2 }, ...numericInputProps })),
                 React__namespace.default.createElement(FlexCell, { width: "100%" },
-                    React__namespace.default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: value?.to ?? null, onValueChange: rangeValueHandler('to'), placeholder: "Max", formatOptions: { maximumFractionDigits: 2 }, isInvalid: isWrongRange(value?.from, value?.to) }))),
+                    React__namespace.default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: value?.to ?? null, onValueChange: rangeValueHandler('to'), placeholder: "Max", formatOptions: { maximumFractionDigits: 2 }, isInvalid: isWrongRange(value?.from, value?.to), ...numericInputProps }))),
             renderFooter()));
     }
     return (React__namespace.default.createElement("div", null,
         React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$l.container },
             React__namespace.default.createElement(FlexCell, { width: 130 },
-                React__namespace.default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: typeof props.value === 'number' ? props.value : null, onValueChange: props.onValueChange, placeholder: "Enter a number", formatOptions: { maximumFractionDigits: 2 } }))),
+                React__namespace.default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: typeof props.value === 'number' ? props.value : null, onValueChange: props.onValueChange, placeholder: "Enter a number", formatOptions: { maximumFractionDigits: 2 }, ...numericInputProps }))),
         renderFooter()));
 }
 
@@ -5379,9 +5431,9 @@ function FiltersToolbarItemImpl(props) {
         props.predicates ? (React__namespace.default.createElement(FilterPredicatePanel, { predicates: props.predicates, predicate: predicate, type: props.type, onValueChange: props.onValueChange, value: props.value, setPredicate: setPredicate })) : (!hideTitle && (React__namespace.default.createElement("div", { className: css$s.title }, props.title))),
         !props?.isAlwaysVisible && (React__namespace.default.createElement(LinkButton, { cx: css$s.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: settings.filtersPanel.sizes.pickerBodyLinkButton, icon: settings.filtersPanel.icons.pickerBodyRemoveIcon }))));
     const renderBody = (dropdownProps) => {
-        return isPickersType ? (React__namespace.default.createElement(PickerBodyMobileView, { ...dropdownProps, rawProps: { ...dropdownProps.arrowProps, 'aria-modal': true }, cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], title: props.title, width: settings.filtersPanel.sizes.pickerBodyMinWidth, onClose: () => isOpenChange(false) },
+        return isPickersType ? (React__namespace.default.createElement(PickerBodyMobileView, { ...dropdownProps, rawProps: { 'aria-modal': true }, cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], title: props.title, width: settings.filtersPanel.sizes.pickerBodyMinWidth, onClose: () => isOpenChange(false) },
             renderHeader(hideHeaderTitle),
-            React__namespace.default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(predicate, props.value), onValueChange: onValueChange }))) : (React__namespace.default.createElement(DropdownContainer, { cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], ...dropdownProps, rawProps: { ...dropdownProps.arrowProps, 'aria-modal': true } },
+            React__namespace.default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(predicate, props.value), onValueChange: onValueChange }))) : (React__namespace.default.createElement(DropdownContainer, { cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], ...dropdownProps, rawProps: { 'aria-modal': true } },
             renderHeader(hideHeaderTitle),
             React__namespace.default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(predicate, props.value), onValueChange: onValueChange })));
     };
@@ -5552,7 +5604,7 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = /* @__PURE__ */React__namespace.default.memo(FiltersToolbarImpl);
 
-var css$k = {"delete-button":"ywoFk2","deleteButton":"ywoFk2","tab-button":"e6rdsw","tabButton":"e6rdsw","targetOpen":"g1kEAC"};
+var css$k = {"delete-button":"frGXqP","deleteButton":"frGXqP","tab-button":"_5COuq7","tabButton":"_5COuq7","targetOpen":"zE5K4c"};
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = uuiCore.useUuiContext();
@@ -5628,7 +5680,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":"kH-0uK","presetInputCell":"kH-0uK","preset-input":"qOLjPK","presetInput":"qOLjPK"};
+var css$j = {"preset-input-cell":"CX--BX","presetInputCell":"CX--BX","preset-input":"Pc-ija","presetInput":"Pc-ija"};
 
 function PresetInput(props) {
     const [presetCaption, setPresetCaption] = React.useState(props.preset?.name || '');
@@ -5655,7 +5707,7 @@ function PresetInput(props) {
         React__namespace.default.createElement(TextInput, { cx: css$j.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50, isReadonly: readonly })));
 }
 
-var css$i = {"preset":"Q9z2cO","activePreset":"M9Ekkb"};
+var css$i = {"preset":"_7-CwRy","activePreset":"I-Hd6X"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = React.useState(false);
@@ -5680,7 +5732,7 @@ function Preset(props) {
     return (React__namespace.default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__namespace.default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__namespace.default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$i.preset, isPresetActive && css$i.activePreset, UUI_PRESETS_PANEL_PRESET], size: settings.presetsPanel.sizes.tabButton, withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: PresetActionsDropdownComponent, iconPosition: "right", isActive: isPresetActive }))));
 }
 
-var css$h = {"divider":"psaU2b","dropdownDeleteIcon":"_1C98GT","presetsWrapper":"YyiMSF","addPresetContainer":"_1vbNzT","dropContainer":"hwx7RR"};
+var css$h = {"divider":"eB2z47","dropdownDeleteIcon":"_8t-mZX","presetsWrapper":"xc27q1","addPresetContainer":"wrmFxW","dropContainer":"iqVuNd"};
 
 function PresetsPanel(props) {
     const [isAddingPreset, setIsAddingPreset] = React.useState(false);
@@ -5729,9 +5781,9 @@ function PresetsPanel(props) {
             React__namespace.default.createElement(uuiComponents.AdaptivePanel, { items: getPanelItems() }))));
 }
 
-var css$g = {"root":"-pZw-C"};
+var css$g = {"root":"LJp6vz"};
 
-var css$f = {"root":"J-8vFW","burger-content":"ys9pTk","burgerContent":"ys9pTk"};
+var css$f = {"root":"_6gLsRs","burger-content":"rkuFY6","burgerContent":"rkuFY6"};
 
 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); }
@@ -5774,7 +5826,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
 };
 var ForwardRef$2 = /*#__PURE__*/React.forwardRef(SvgNavigationArrowDownOutline);
 
-var css$e = {"root":"kQQxrW","button-primary":"_4WvNm-","buttonPrimary":"_4WvNm-","button-secondary":"xUZ3ej","buttonSecondary":"xUZ3ej","hasIcon":"a3kPg-","dropdown":"dMLhvj"};
+var css$e = {"root":"OZQczq","button-primary":"wx8yiu","buttonPrimary":"wx8yiu","button-secondary":"gy-75D","buttonSecondary":"gy-75D","hasIcon":"QjBofk","dropdown":"qLwDDX"};
 
 function applyBurgerButtonMods(props) {
     return [
@@ -5799,13 +5851,13 @@ const BurgerButton = /* @__PURE__ */React__namespace.default.forwardRef((props,
         }, dropdownIcon: ForwardRef$2 }));
 });
 
-var css$d = {"search-input":"-L1mHB","searchInput":"-L1mHB"};
+var css$d = {"search-input":"gQLAWs","searchInput":"gQLAWs"};
 
 function BurgerSearch(props) {
     return (React__namespace.createElement(uuiComponents.TextInput, { cx: cx__default.default(css$d.searchInput, 'uui-main_menu-burger-search'), iconPosition: "left", icon: ForwardRef$M, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$Q }));
 }
 
-var css$c = {"root":"uZE1Yo","group-header":"pnNiZl","groupHeader":"pnNiZl","group-name":"ZDOhwI","groupName":"ZDOhwI","line":"_1xB48O"};
+var css$c = {"root":"w-S8L1","group-header":"YGKwqA","groupHeader":"YGKwqA","group-name":"mbcwfp","groupName":"mbcwfp","line":"YjM1L5"};
 
 function BurgerGroupHeader(props) {
     return (React__namespace.createElement("div", { className: cx__default.default(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
@@ -5813,7 +5865,7 @@ function BurgerGroupHeader(props) {
         React__namespace.createElement("span", { className: css$c.groupName }, props.caption)));
 }
 
-var css$b = {"root":"wAu87D","type-primary":"YqCFc6","typePrimary":"YqCFc6","type-secondary":"dj8hE6","typeSecondary":"dj8hE6"};
+var css$b = {"root":"C1udgy","type-primary":"LMLYUT","typePrimary":"LMLYUT","type-secondary":"_1NwAKU","typeSecondary":"_1NwAKU"};
 
 const MainMenuButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const { type, ...clickableProps } = props;
@@ -5841,7 +5893,7 @@ const MainMenuButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) =
         props.isDropdown && (React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef$P, flipY: props.isOpen }))));
 });
 
-var css$a = {"dropdown-body":"imC63H","dropdownBody":"imC63H"};
+var css$a = {"dropdown-body":"PB-SfU","dropdownBody":"PB-SfU"};
 
 function MainMenuDropdown(props) {
     const handleEscape = (e, onClose, isOpen) => {
@@ -5887,12 +5939,12 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
 };
 var ForwardRef$1 = /*#__PURE__*/React.forwardRef(SvgNavigationGlobalMenuOutlineOutline);
 
-var css$9 = {"global-menu-btn":"g-s03l","globalMenuBtn":"g-s03l","global-menu-icon":"C2qVsA","globalMenuIcon":"C2qVsA"};
+var css$9 = {"global-menu-btn":"A39zfo","globalMenuBtn":"A39zfo","global-menu-icon":"iMqHXL","globalMenuIcon":"iMqHXL"};
 
 const GlobalMenu = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", { ref: ref, id: "global_menu_toggle", className: cx__default.default(css$9.globalMenuBtn, props.cx), ...props.rawProps },
     React__namespace.createElement(uuiComponents.IconContainer, { size: 36, icon: ForwardRef$1, cx: css$9.globalMenuIcon }))));
 
-var css$8 = {"container":"qWRbin","open":"getmvg","folding-arrow":"_2SFzKr","foldingArrow":"_2SFzKr"};
+var css$8 = {"container":"Vfxej-","open":"_6xCWfp","folding-arrow":"Vw00hX","foldingArrow":"Vw00hX"};
 
 const MainMenuAvatar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", { ref: ref, className: cx__default.default(css$8.container, props.isDropdown && css$8.dropdown, props.isOpen && css$8.open, props.onClick && uuiCore.uuiMarkers.clickable, props.cx), onClick: props.onClick, ...props.rawProps },
     React__namespace.createElement(uuiComponents.Avatar, { size: "36", img: props.avatarUrl }),
@@ -5900,15 +5952,15 @@ const MainMenuAvatar = /* @__PURE__ */React__namespace.forwardRef((props, ref) =
     props.isDropdown && (React__namespace.createElement("div", null,
         React__namespace.createElement(uuiComponents.IconContainer, { size: 18, icon: ForwardRef$P, flipY: props.isOpen, cx: css$8.foldingArrow }))))));
 
-var css$7 = {"search-input":"HcXk6g","searchInput":"HcXk6g"};
+var css$7 = {"search-input":"_67jSLc","searchInput":"_67jSLc"};
 
 const MainMenuSearch = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement(uuiCore.IEditableDebouncer, { ...props, render: (iEditable) => (React__namespace.createElement(uuiComponents.TextInput, { iconPosition: "left", icon: ForwardRef$M, cancelIcon: props.value?.length > 0 && ForwardRef$Q, ...props, ...iEditable, ref: ref, cx: uuiCore.cx(css$7.searchInput, props.cx), ...props.rawProps })) })));
 
-var css$6 = {"container":"RkR7Ot"};
+var css$6 = {"container":"CuJETf"};
 
 const MainMenuIcon = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement(IconButton, { ref: ref, icon: props.icon, cx: uuiCore.cx(props.cx, css$6.container), ...props })));
 
-var css$5 = {"root":"JGyo-D"};
+var css$5 = {"root":"b0P50j"};
 
 const Anchor = /* @__PURE__ */uuiCore.withMods(uuiComponents.Anchor, () => [css$5.root]);
 
@@ -5966,7 +6018,7 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
 };
 var ForwardRef = /*#__PURE__*/React.forwardRef(SvgFileCloudUploadFill);
 
-var css$4 = {"root":"_3Q0Uli","drop-start":"vXCYRc","dropStart":"vXCYRc","drop-over":"lOwBoy","dropOver":"lOwBoy","link":"DUqzjK","drop-area":"-r3-Cb","dropArea":"-r3-Cb","drop-caption":"XVsXbs","dropCaption":"XVsXbs","icon-blue":"CQ1kbm","iconBlue":"CQ1kbm"};
+var css$4 = {"root":"s2hV5Q","drop-start":"B8kpCs","dropStart":"B8kpCs","drop-over":"MXcGrP","dropOver":"MXcGrP","link":"_1RYnw-","drop-area":"jz8iwH","dropArea":"jz8iwH","drop-caption":"_1IWZzH","dropCaption":"_1IWZzH","icon-blue":"rnKR0s","iconBlue":"rnKR0s"};
 
 function DropSpot(props) {
     const getInfoText = typeof props.infoText === 'string'
@@ -5984,7 +6036,7 @@ function DropSpot(props) {
     return React__namespace.createElement(uuiComponents.DropSpot, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
 }
 
-var css$3 = {"root":"TTJiKB"};
+var css$3 = {"root":"nksM9G"};
 
 const SvgCircleProgress = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
@@ -5995,7 +6047,7 @@ const SvgCircleProgress = /* @__PURE__ */React__namespace.forwardRef((props, ref
         React__namespace.createElement("circle", { strokeWidth: 1, fill: "transparent", r: outsetRadius, cx: props.size / 2, cy: props.size / 2 })));
 });
 
-var css$2 = {"root":"LYc1f3","file-name":"heAc3B","fileName":"heAc3B","default-color":"FjPxV8","defaultColor":"FjPxV8","doc-color":"xfeXWx","docColor":"xfeXWx","xls-color":"SXP0kx","xlsColor":"SXP0kx","pdf-color":"ywxSLm","pdfColor":"ywxSLm","movie-color":"_4P8f75","movieColor":"_4P8f75","img-color":"ZTR5JD","imgColor":"ZTR5JD","mov-color":"V1ItQP","movColor":"V1ItQP","error-block":"_5iXAlQ","errorBlock":"_5iXAlQ","icons-block":"S5DUp-","iconsBlock":"S5DUp-"};
+var css$2 = {"root":"vLjTKy","file-name":"_6HkxLE","fileName":"_6HkxLE","default-color":"_2IV72d","defaultColor":"_2IV72d","doc-color":"jEY6Ye","docColor":"jEY6Ye","xls-color":"PNefNe","xlsColor":"PNefNe","pdf-color":"_-1OcsO","pdfColor":"_-1OcsO","movie-color":"CFmzjL","movieColor":"CFmzjL","img-color":"s7NiFu","imgColor":"s7NiFu","mov-color":"ZfaPOA","movColor":"ZfaPOA","error-block":"YS16lt","errorBlock":"YS16lt","icons-block":"sJWOvu","iconsBlock":"sJWOvu"};
 
 const FileCard = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const [isLoadingShow, setIsLoadingShow] = React__namespace.useState(true);
@@ -6115,7 +6167,7 @@ const getErrorPageConfig = () => ({
     },
 });
 
-var css$1 = {"container":"X2BixO"};
+var css$1 = {"container":"p7VA34"};
 
 const ErrorPage = (props) => {
     const isMobileScreen = uuiCore.isMobile();
@@ -6127,7 +6179,7 @@ const ErrorPage = (props) => {
             props?.supportLink && React__namespace.default.createElement("div", { className: "uui-error-support-link" }, props?.supportLink))));
 };
 
-var css = {"recovery-spinner":"l-h6dw","recoverySpinner":"l-h6dw","recovery-message":"u63POt","recoveryMessage":"u63POt","modal-blocker":"BzMFuC","modalBlocker":"BzMFuC","modalFadeIn":"yBpQnO"};
+var css = {"recovery-spinner":"qpWq9b","recoverySpinner":"qpWq9b","recovery-message":"_8tB95V","recoveryMessage":"_8tB95V","modal-blocker":"DWNCZ1","modalBlocker":"DWNCZ1","modalFadeIn":"-rCBak"};
 
 function ErrorHandler(props) {
     const { uuiNotifications, uuiModals, uuiApi } = uuiCore.useUuiContext();