@epam/uui 6.4.2 → 6.4.4

package/index.esm.js

@@ -1,9 +1,9 @@
 import * as uuiComponents from '@epam/uui-components';
-import { Spinner as Spinner$1, Blocker as Blocker$1, Clickable, IconContainer, AvatarStack as AvatarStack$1, ControlIcon, Paginator as Paginator$1, RadioInput as RadioInput$1, TextInput as TextInput$1, ControlGroup as ControlGroup$1, NumericInput as NumericInput$1, TextArea as TextArea$1, Dropdown as Dropdown$1, InputAddon as InputAddon$1, Slider as Slider$1, DragHandle, Anchor as Anchor$1, FlexSpacer, Text as Text$1, FlexCell as FlexCell$1, VPanel, ModalBlocker as ModalBlocker$1, ModalWindow as ModalWindow$1, Snackbar as Snackbar$1, Calendar as Calendar$1, YearSelection, MonthSelection, Day, uuiDaySelection, Avatar, usePickerModal, handleDataSourceKeyboard, PickerToggler as PickerToggler$1, usePickerInput, usePickerList, DataTableCell as DataTableCell$1, DataTableRow as DataTableRow$1, DataTableCellContainer, DataTableHeaderCell as DataTableHeaderCell$1, DataTableHeaderRow as DataTableHeaderRow$1, useColumnsConfiguration, Accordion as Accordion$1, DataTableSelectionProvider, DataTableFocusProvider, useShowSelected, usePickerApi, AdaptivePanel, Burger as Burger$1, Button as Button$1, DropSpot as DropSpot$1, UploadFileToggler, ErrorCatch } from '@epam/uui-components';
+import { Spinner as Spinner$1, Blocker as Blocker$1, Clickable, IconContainer, AvatarStack as AvatarStack$1, ControlIcon, Paginator as Paginator$1, RadioInput as RadioInput$1, TextInput as TextInput$1, ControlGroup as ControlGroup$1, NumericInput as NumericInput$1, TextArea as TextArea$1, Dropdown as Dropdown$1, InputAddon as InputAddon$1, Slider as Slider$1, DragHandle, Anchor as Anchor$1, FlexSpacer, Text as Text$1, FlexCell as FlexCell$1, VPanel, ModalBlocker as ModalBlocker$1, ModalWindow as ModalWindow$1, Snackbar as Snackbar$1, Calendar as Calendar$1, YearSelection, MonthSelection, Day, uuiDaySelection, Avatar, usePickerModal, handleDataSourceKeyboard, PickerToggler as PickerToggler$1, usePickerInput, usePickerList, DataTableCell as DataTableCell$1, DataTableRow as DataTableRow$1, DataTableHeaderCell as DataTableHeaderCell$1, DataTableCellContainer, DataTableHeaderRow as DataTableHeaderRow$1, useColumnsConfiguration, Accordion as Accordion$1, DataTableSelectionProvider, DataTableFocusProvider, useShowSelected, usePickerApi, AdaptivePanel, Burger as Burger$1, Button as Button$1, DropSpot as DropSpot$1, UploadFileToggler, ErrorCatch } from '@epam/uui-components';
 export { Avatar, DataTableCellContainer, FlexSpacer, IconContainer, MainMenuCustomElement, MainMenuLogo } from '@epam/uui-components';
 import { withMods, devLogger, uuiElement, useIsActive, uuiMod, cx as cx$1, uuiMarkers, IEditableDebouncer, UuiContext, getDir, isEventTargetInsideClickable, directionMode, useScrollShadows, useVirtualList, isMobile, i18n as i18n$1, useUuiContext, useLayoutEffectSafeForSsr, usePrevious, mobilePositioning, uuiDataTableHeaderCell, uuiDataTableHeaderGroupCell, DndActor, uuiDndState, useColumnsConfig, uuiScrollShadows, useForceUpdate, getSeparatedValue, useArrayDataSource, orderBy, getOrderBetween, Form as Form$1, useForm as useForm$1, formatBytes, useUuiError } from '@epam/uui-core';
 import * as React from 'react';
-import React__default, { forwardRef, useState, useEffect, useContext, useRef, useImperativeHandle, useMemo, useReducer, useCallback, Fragment } from 'react';
+import React__default, { forwardRef, useState, useEffect, useContext, useRef, useMemo, useImperativeHandle, useReducer, useCallback, useId, Fragment } from 'react';
 import cx from 'classnames';
 import { offset } from '@floating-ui/react';
 import dayjs from 'dayjs';
@@ -156,7 +156,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#5ijuogspqkuhn1rg_a)"
+    clipPath: "url(#g3sdanswhqkvot7f_a)"
   }, _path$I || (_path$I = /*#__PURE__*/React.createElement("path", {
     d: "M150.585 1.535C49.483-11.495 27.481 61.805 45.725 97.481c10.581 20.69-39.64 70.792 17.744 81.468 27.538 5.123 36-13.341 62.433-10.655 35.4 3.6 148.167-4.73 88.349-78.915-31.713-39.335 1.026-79.506-63.666-87.844Z",
     fill: "#F5F6FA"
@@ -177,7 +177,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M86.786 22.982c-2.55 0-4.965 2.07-4.965 4.552V120.6c0 2.484 2.4 4.572 4.965 4.572h88.101c2.582 0 4.986-2.089 4.986-4.572V27.534c0-2.464-2.418-4.552-4.986-4.552h-88.1Zm-5.793 4.552c0-3.022 2.874-5.38 5.793-5.38h88.101c2.935 0 5.814 2.374 5.814 5.38V120.6c0 3.021-2.86 5.4-5.814 5.4h-88.1c-2.94 0-5.794-2.381-5.794-5.4V27.534Z",
     fill: "#1D1E26"
   })), /*#__PURE__*/React.createElement("mask", {
-    id: "5ijuogtu6oq6pwj4_b",
+    id: "g3sdancilj2tzyi46_b",
     style: {
       maskType: "alpha"
     },
@@ -190,7 +190,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M174.887 125.586h-88.1c-2.752 0-5.38-2.234-5.38-4.986V27.534c0-2.752 2.644-4.966 5.38-4.966h88.1c2.752 0 5.4 2.23 5.4 4.966V120.6c0 2.752-2.632 4.986-5.4 4.986Z",
     fill: "#9BDEFF"
   }))), _g || (_g = /*#__PURE__*/React.createElement("g", {
-    mask: "url(#5ijuogtu6oq6pwj4_b)",
+    mask: "url(#g3sdancilj2tzyi46_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
@@ -276,7 +276,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M24.73 96.184a.414.414 0 0 1 .581.06l48.646 59.751a.413.413 0 1 1-.642.523L24.67 96.766a.414.414 0 0 1 .06-.582Z",
     fill: "#fff"
   }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "5ijuogspqkuhn1rg_a"
+    id: "g3sdanswhqkvot7f_a"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
@@ -927,14 +927,14 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
 };
 var ForwardRef$4 = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
 
-var css$1w = {"root":"_9QN1yi","uui-spinner":"_2TpjB9","uuiSpinner":"_2TpjB9"};
+var css$1w = {"root":"UE27xC","uui-spinner":"JZ8Uv5","uuiSpinner":"JZ8Uv5"};
 
 function applySpinnerMods() {
     return [css$1w.root, 'uui-spinner'];
 }
 const Spinner = /* @__PURE__ */withMods(Spinner$1, applySpinnerMods);
 
-var css$1v = {"root":"DLs1Il","loading-word":"IbALyA","loadingWord":"IbALyA","animated-loading":"_6WhCoy","animatedLoading":"_6WhCoy","skeleton_loading":"yp4oCW","skeletonLoading":"yp4oCW"};
+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 = ' ';
@@ -951,7 +951,7 @@ const TextPlaceholder = (props) => {
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
-var css$1u = {"root":"ADkaQX","line-height":"QtSITm","lineHeight":"QtSITm","font-size":"fcVzfk","fontSize":"fcVzfk"};
+var css$1u = {"root":"GDTy8P","line-height":"uxBDY-","lineHeight":"uxBDY-","font-size":"Jfl4Kx","fontSize":"Jfl4Kx"};
 
 function applyTextMods(mods) {
     return [
@@ -978,7 +978,7 @@ const Text = /* @__PURE__ */withMods(uuiComponents.Text, applyTextMods, (props)
     };
 });
 
-var css$1t = {"root":"pqcU0t"};
+var css$1t = {"root":"tP39oV"};
 
 const Blocker = /* @__PURE__ */withMods(Blocker$1, () => [css$1t.root], () => ({ renderSpinner: settings.blocker.renderSpinner }));
 
@@ -1483,7 +1483,7 @@ const settings = {
     textInput: textInputSettings,
 };
 
-var css$1s = {"root":"krR-kO"};
+var css$1s = {"root":"UngvQG"};
 
 function applyButtonMods(mods) {
     return [
@@ -1501,7 +1501,7 @@ const Button = /* @__PURE__ */withMods(uuiComponents.Button, applyButtonMods, ()
     };
 });
 
-var css$1r = {"root":"_6yrG-R"};
+var css$1r = {"root":"WpOWm9"};
 
 function applyIconButtonMods(props) {
     return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1r.root];
@@ -1538,7 +1538,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":"vUSh6-"};
+var css$1q = {"root":"-wCqo3"};
 
 const DEFAULT_COLOR = 'primary';
 const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
@@ -1568,7 +1568,7 @@ const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         props.isDropdown && (React.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1p = {"root":"_48OcY9"};
+var css$1p = {"root":"Nn9bGc"};
 
 const CountIndicator = /* @__PURE__ */forwardRef((props, ref) => {
     return (React__default.createElement("div", { ref: ref, className: cx([
@@ -1580,7 +1580,7 @@ const CountIndicator = /* @__PURE__ */forwardRef((props, ref) => {
         ]) }, props.caption));
 });
 
-var css$1o = {"root":"_3PsUxa","withNotify":"_9B2HrO"};
+var css$1o = {"root":"HB7Csf","withNotify":"_73xN8N"};
 
 const TabButton = /* @__PURE__ */React__default.forwardRef((props, refExternal) => {
     const refLocal = React__default.useRef(null);
@@ -1627,13 +1627,13 @@ const TabButton = /* @__PURE__ */React__default.forwardRef((props, refExternal)
         props.onClear && !props.isDisabled && (React__default.createElement(IconContainer, { cx: uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
 });
 
-var css$1n = {"root":"peObWc","noLeftPadding":"M9oM9m","foldingArea":"O3E-QD","onlyFoldable":"GKSVwK","captionWrapper":"PXXAOU","withNotify":"yiUC4M"};
+var css$1n = {"root":"DjEb16","noLeftPadding":"vFYbua","foldingArea":"d2FFaF","onlyFoldable":"F6gy36","captionWrapper":"_92Ln4t","withNotify":"tqso6T"};
 
-var css$1m = {"root":"_0F5xqb"};
+var css$1m = {"root":"e0-jaV"};
 
 const AvatarStack = /* @__PURE__ */withMods(AvatarStack$1, () => [css$1m.root]);
 
-var css$1l = {"root":"nh4MZv"};
+var css$1l = {"root":"MoXaMB"};
 
 const DEFAULT_FILL = 'solid';
 function applyBadgeMods(mods) {
@@ -1661,7 +1661,7 @@ const Badge = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1k = {"root":"kXKR1s"};
+var css$1k = {"root":"EluYH6"};
 
 function applyTagMods(props) {
     return [
@@ -1694,7 +1694,7 @@ const Tag = /* @__PURE__ */React__default.forwardRef((props, ref) => {
             } }))));
 });
 
-var css$1j = {"root":"JNufGU","page":"mZ5zUd","spacer":"XjssZB","mode-ghost":"MjgFZy","modeGhost":"MjgFZy"};
+var css$1j = {"root":"dGyt7a","page":"Ir6nO6","spacer":"I3NMdL","mode-ghost":"_4xtqr6","modeGhost":"_4xtqr6"};
 
 function Paginator(props) {
     const renderPaginator = (params) => (React__default.createElement("nav", { role: "navigation", className: cx('uui-paginator', `uui-size-${props.size || settings.paginator.sizes.default}`), ...params.rawProps },
@@ -1720,14 +1720,14 @@ function Paginator(props) {
     return React__default.createElement(Paginator$1, { ...props, render: renderPaginator });
 }
 
-var css$1i = {"root":"quYrc5","progress-bar":"_1IjHFJ","progressBar":"_1IjHFJ","progressBar-indeterminate":"x38wjI","progressBarIndeterminate":"x38wjI","size-12":"zCDLL5","size12":"zCDLL5","size-18":"_4B7SXr","size18":"_4B7SXr","size-24":"x1p-IV","size24":"x1p-IV"};
+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.forwardRef((props, ref) => {
     return (React.createElement("div", { ref: ref, className: cx('uui-indeterminate_bar', props.cx, css$1i.root, css$1i[`size-${props.size || 12}`]) },
         React.createElement("div", { className: cx(css$1i.progressBar) })));
 });
 
-var css$1h = {"root":"vwMiei","striped":"BxBzcl","animate-stripes":"rXqbPX","animateStripes":"rXqbPX","size-12":"omUXKt","size12":"omUXKt","size-18":"oUm4No","size18":"oUm4No","size-24":"QZW1ld","size24":"QZW1ld"};
+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) {
@@ -1742,14 +1742,14 @@ const ProgressBar = /* @__PURE__ */withMods(uuiComponents.ProgressBar, applyProg
     hideLabel: props.hideLabel || props.striped,
 }));
 
-var css$1g = {"root":"kyVEb9"};
+var css$1g = {"root":"_0mbooH"};
 
 const IndicatorBar = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { progress } = props;
     return progress || progress === 0 ? (React.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx(css$1g.root, props.cx), hideLabel: true })) : (React.createElement(IndeterminateBar, { ref: ref, cx: cx(css$1g.root, props.cx) }));
 });
 
-var css$1f = {"root":"_1QTGJ9"};
+var css$1f = {"root":"-Ez8OP"};
 
 const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
     return (React__default.createElement("div", { ref: ref, className: cx([
@@ -1764,7 +1764,7 @@ const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
         React__default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
 });
 
-var css$1e = {"root":"CvX6eY"};
+var css$1e = {"root":"ONuItu"};
 
 function applyCheckboxMods(mods) {
     return [
@@ -1782,7 +1782,7 @@ const applyUUICheckboxProps = (props) => {
 };
 const Checkbox = /* @__PURE__ */withMods(uuiComponents.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$1d = {"root":"Bw2K4o"};
+var css$1d = {"root":"JmMFgU"};
 
 function applyRadioInputMods(mods) {
     return [
@@ -1794,7 +1794,7 @@ function applyRadioInputMods(mods) {
 }
 const RadioInput = /* @__PURE__ */withMods(RadioInput$1, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : settings.radioInput.icons.dotIcon }));
 
-var css$1c = {"root":"_5-bml2"};
+var css$1c = {"root":"XQzutj"};
 
 function applySwitchMods(mods) {
     return [
@@ -1818,7 +1818,7 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var textInputCss = {"root":"Ach0D5"};
+var textInputCss = {"root":"hMCzBl"};
 
 const DEFAULT_MODE$3 = EditMode.FORM;
 function applyTextInputMods(mods) {
@@ -1843,7 +1843,7 @@ const SearchInput = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         } }));
 });
 
-var css$1b = {"root":"qfc1b8"};
+var css$1b = {"root":"BPv3vl"};
 
 const ControlGroup = /* @__PURE__ */withMods(ControlGroup$1, () => [css$1b.root, 'uui-control-group']);
 
@@ -1859,7 +1859,7 @@ function MultiSwitchComponent(props, ref) {
 }
 const MultiSwitch = /* @__PURE__ */React.forwardRef(MultiSwitchComponent);
 
-var css$1a = {"root":"Bh6hQu"};
+var css$1a = {"root":"MPAM05"};
 
 const DEFAULT_MODE$2 = EditMode.FORM;
 function applyNumericInputMods(mods) {
@@ -1879,7 +1879,7 @@ const NumericInput = /* @__PURE__ */withMods(NumericInput$1, applyNumericInputMo
     };
 });
 
-var css$19 = {"root":"GRmenM"};
+var css$19 = {"root":"NvBVoj"};
 
 const DEFAULT_MODE$1 = EditMode.FORM;
 function applyTextAreaMods(mods) {
@@ -1920,7 +1920,7 @@ function TREE_SHAKEABLE_INIT$1() {
     };
 }
 
-var css$18 = {"root":"_89PZB-"};
+var css$18 = {"root":"wZvAB2"};
 
 function applyDropdownContainerMods(mods) {
     return [
@@ -1931,7 +1931,7 @@ function applyDropdownContainerMods(mods) {
 }
 const DropdownContainer = /* @__PURE__ */withMods(uuiComponents.DropdownContainer, applyDropdownContainerMods);
 
-var css$17 = {"root":"NkryVu","timepicker-input":"m7KbGC","timepickerInput":"m7KbGC","ltr-always":"Q6F-0V","ltrAlways":"Q6F-0V"};
+var css$17 = {"root":"uQskY7","timepicker-input":"pyHstO","timepickerInput":"pyHstO","ltr-always":"wGaM07","ltrAlways":"wGaM07"};
 
 const uuiTimePicker = {
     container: 'uui-timepicker-container',
@@ -1976,11 +1976,11 @@ function TimePickerBody(props) {
                 React.createElement(IconContainer, { size: 18, rawProps: { 'aria-label': 'Increment hours' }, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: () => onHoursChange(uuiDayjs.dayjs().set(props.value).add(1, 'h').hour()) }),
                 React.createElement(NumericInput$1, { cx: uuiTimePicker.input, onValueChange: onHoursChange, value: +(uuiDayjs.dayjs()
                         .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.createElement(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.createElement("div", { className: uuiTimePicker.elementContainer },
                 React.createElement(IconContainer, { size: 18, rawProps: { 'aria-label': 'Increment minutes' }, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: handleMinutesUpClick }),
-                React.createElement(NumericInput$1, { cx: uuiTimePicker.input, onValueChange: onMinutesChange, value: +uuiDayjs.dayjs().set(props.value).format('m'), isReadonly: true, min: MIN_MINUTES, max: MAX_MINUTES }),
+                React.createElement(NumericInput$1, { 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.createElement(IconContainer, { size: 18, rawProps: { 'aria-label': 'Decrement minutes' }, cx: uuiTimePicker.iconDown, icon: ForwardRef$P, onClick: handleMinutesDownClick }))),
         MAX_HOURS === FORMAT_12H && (React.createElement("div", { className: uuiTimePicker.elementContainer },
             React.createElement(IconContainer, { size: 18, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: onTimeTypeChange }),
@@ -2104,11 +2104,15 @@ function TimePickerComponent(props, ref) {
             if (isTimeValid(result)) {
                 setState((prevState) => ({ ...prevState, value: result }));
             }
+            // save time immediately if the input value is valid
+            if (isTimeValid(newValue)) {
+                saveTime(newValue);
+            }
         }
     };
     const handleBlur = (e) => {
         props.onBlur?.(e);
-        if (state.value === '' || state.inputValue === '') {
+        if (state.value === '' || state.inputValue === '' || state.value === null) {
             props.onValueChange(null);
             setState((prevState) => ({ ...prevState, value: null, inputValue: null }));
         }
@@ -2128,6 +2132,8 @@ function TimePickerComponent(props, ref) {
     };
     const renderInput = (inputProps) => {
         return (React__default.createElement(TextInput, { ...inputProps, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$17.root, css$17.timepickerInput, props.inputCx], value: state.inputValue, onValueChange: handleInputChange, onCancel: !props.disableClear && onClear, onKeyDown: onKeyDown, onFocus: handleFocus, onBlur: handleBlur, isDropdown: false, placeholder: props.placeholder ? props.placeholder : getFormat(), mode: props.mode || DEFAULT_MODE, rawProps: props.rawProps?.input, ref: (node) => {
+                if (!node)
+                    return;
                 targetRef.current = node;
                 if (typeof inputProps.ref === 'function') {
                     inputProps.ref(node);
@@ -2146,7 +2152,7 @@ function TimePickerComponent(props, ref) {
 }
 const TimePicker = /* @__PURE__ */React__default.forwardRef(TimePickerComponent);
 
-var css$16 = {"root":"Wc-ttN"};
+var css$16 = {"root":"mSYQeQ"};
 
 function applyInputAddonMods() {
     return [
@@ -2155,14 +2161,14 @@ function applyInputAddonMods() {
 }
 const InputAddon = /* @__PURE__ */withMods(InputAddon$1, applyInputAddonMods);
 
-var css$15 = {"root":"_2th2mG"};
+var css$15 = {"root":"_0T9jml"};
 
 function applySliderMods() {
     return [css$15.root, 'uui-color-neutral'];
 }
 const Slider = /* @__PURE__ */withMods(Slider$1, applySliderMods);
 
-var css$14 = {"root":"_2woU-o"};
+var css$14 = {"root":"OySA86"};
 
 function applyTooltipMods(mods) {
     return [
@@ -2172,7 +2178,7 @@ function applyTooltipMods(mods) {
 }
 const Tooltip = /* @__PURE__ */withMods(uuiComponents.Tooltip, applyTooltipMods);
 
-var css$13 = {"root":"PdX32A","tooltip":"YFejA1"};
+var css$13 = {"root":"OqYx-a","tooltip":"-VZob5"};
 
 function applyRatingMods(mods) {
     return [
@@ -2186,10 +2192,13 @@ const Rating = /* @__PURE__ */withMods(uuiComponents.Rating, applyRatingMods, (p
     Tooltip,
 }));
 
-var css$12 = {"drag-handle-wrapper":"PyemR7","dragHandleWrapper":"PyemR7","with-indent":"LxfPDK","withIndent":"LxfPDK","drag-handle":"nJn50K","dragHandle":"nJn50K","icon-container":"QsPd8n","iconContainer":"QsPd8n"};
+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];
     };
@@ -2210,7 +2219,8 @@ function DataRowAddons(props) {
     };
     return (React__default.createElement(React__default.Fragment, null,
         row.dnd?.srcData && renderDragHandle(),
-        row?.checkbox?.isVisible && (React__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 })),
+        isCheckboxVisible && (React__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__default.createElement("div", { key: "cb-spacer", className: cx('uui-checkbox-container', 'uui-dr_addons-checkbox-spacer', `uui-size-${checkboxSize}`), "aria-hidden": "true" })),
         row.indent > 0 && (React__default.createElement("div", { key: "fold", className: cx('uui-dr_addons-indent', `uui-size-${props.size || settings.dataTable.sizes.body.row}`), style: { marginInlineStart: getIndent(), width: getWidth() } }, row.isFoldable && (React__default.createElement(ControlIcon, { rawProps: {
                 'aria-label': row.isFolded ? 'Unfold' : 'Fold',
                 role: 'button',
@@ -2248,6 +2258,7 @@ function VerticalTabButtonComponent(props, ref) {
     const ClearIcon = props.clearIcon ? props.clearIcon : settings.verticalTabButton.icons.clearIcon;
     return (React__default.createElement(Clickable, { ...props, onClick: props.onClick || props.onFold, rawProps: {
             role: 'tab',
+            'aria-selected': isActive,
             ...props.rawProps,
         }, cx: styles, ref: ref },
         props.indent > 0 && (React__default.createElement("div", { key: "fold", className: cx$1(css$1n.foldingArea, props.onFold && uuiMarkers.clickable), style: { '--uui-folding-indent': `${props.indent - 1}` }, onClick: props.onFold }, props.isFoldable && (React__default.createElement(IconContainer, { rawProps: {
@@ -2268,7 +2279,7 @@ function VerticalTabButtonComponent(props, ref) {
 }
 const VerticalTabButton = /* @__PURE__ */React__default.forwardRef(VerticalTabButtonComponent);
 
-var css$11 = {"root":"vDGcoJ","main-path":"u5IAID","mainPath":"u5IAID","content-wrapper":"ZrnhH5","contentWrapper":"ZrnhH5","content":"TsKAY8","action-wrapper":"_3T4NBj","actionWrapper":"_3T4NBj","icon-wrapper":"OqmFMf","iconWrapper":"OqmFMf","icon":"maEFhr","close-icon":"pBvrmI","closeIcon":"pBvrmI"};
+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.forwardRef((props, ref) => (React.createElement("div", { role: "alert", ref: ref, className: cx('uui-alert', css$11.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
     React.createElement("div", { className: css$11.mainPath },
@@ -2286,7 +2297,7 @@ const ErrorAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createE
 
 const Dropdown = /* @__PURE__ */withMods(Dropdown$1);
 
-var css$10 = {"submenu-root-item-rtl":"GdZ1Yl","submenuRootItemRtl":"GdZ1Yl","icon-after":"z-UhE0","iconAfter":"z-UhE0","submenu-root-item":"_4moyb-","submenuRootItem":"_4moyb-","icon-check":"xcPEVJ","iconCheck":"xcPEVJ","splitter-root":"bYmh0w","splitterRoot":"bYmh0w","splitter":"cTqUUx","header-root":"vBx3qt","headerRoot":"vBx3qt","item-root":"xEPcY7","itemRoot":"xEPcY7","icon":"UD6uJy","link":"zoDMK2","indent":"_9jYkfR","selected-mark":"iF9nNV","selectedMark":"iF9nNV"};
+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"};
 
 var IDropdownControlKeys;
 (function (IDropdownControlKeys) {
@@ -2303,7 +2314,7 @@ function DropdownMenuContainer(props) {
     const getMenuItems = () => {
         if (!menuRef.current)
             return [];
-        return Array.from(menuRef.current.querySelectorAll(`[role="menuitem"]:not(.${uuiMod.disabled})`));
+        return Array.from(menuRef.current.querySelectorAll(`[role^="menuitem"]:not(.${uuiMod.disabled})`));
     };
     const changeFocus = (nextFocusedIndex) => {
         const menuItems = getMenuItems();
@@ -2370,7 +2381,7 @@ const DropdownMenuButton = /* @__PURE__ */React__default.forwardRef((props, ref)
     };
     const isAnchor = Boolean(link || href);
     const itemClassNames = cx$1(props.cx, css$10.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened, (!isDisabled && onClick) && uuiMarkers.clickable);
-    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$10.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref },
+    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$10.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0, ...props.rawProps }, onClick: handleClick, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref, ...props.rawProps },
         getMenuButtonContent(),
         isSelected && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(FlexSpacer, null),
@@ -2401,6 +2412,7 @@ function DropdownSubMenu(props) {
 }
 function DropdownMenuSwitchButton(props) {
     const context = useContext(UuiContext);
+    const switchRef = useRef(null);
     const { icon, caption, isDisabled, isSelected, onValueChange, } = props;
     const onHandleValueChange = (value) => {
         if (isDisabled || !onValueChange)
@@ -2413,14 +2425,20 @@ function DropdownMenuSwitchButton(props) {
             onHandleValueChange(!isSelected);
         }
     };
-    return (React__default.createElement("div", { className: cx$1(props.cx, css$10.itemRoot, isDisabled && uuiMod.disabled, (!isDisabled || onValueChange) && 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__default.createElement("div", { className: cx$1(props.cx, css$10.itemRoot, isDisabled && uuiMod.disabled, (!isDisabled || onValueChange) && uuiMarkers.clickable), onClick: handleClick, role: "menuitem", onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 },
         icon && React__default.createElement(IconContainer, { icon: icon, cx: css$10.iconBefore }),
         React__default.createElement(Text$1, null, caption),
         React__default.createElement(FlexSpacer, null),
-        React__default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
+        React__default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange, ref: switchRef })));
 }
 
-var css$$ = {"root":"cEesEV","mode-block":"VLbDlI","modeBlock":"VLbDlI","mode-inline":"hYgMBY","modeInline":"hYgMBY","padding-0":"DQl1jM","padding0":"DQl1jM","padding-6":"DiKBDb","padding6":"DiKBDb","padding-12":"esdG0F","padding12":"esdG0F","padding-18":"Ic1Rmq","padding18":"Ic1Rmq"};
+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 [
@@ -2433,7 +2451,7 @@ const Accordion = /* @__PURE__ */withMods(uuiComponents.Accordion, applyAccordio
     dropdownIcon: mods.dropdownIcon !== null && settings.accordion.icons.dropdownIcon,
 }));
 
-var css$_ = {"root":"ODQHa4","align-items":"surmIX","alignItems":"surmIX","justify-content":"DQ-ne5","justifyContent":"DQ-ne5","border-top":"ZtUM1z","borderTop":"ZtUM1z","border-bottom":"_9pcqCN","borderBottom":"_9pcqCN","top-shadow":"nBkTqc","topShadow":"nBkTqc","padding":"fs4htr","margin":"bZWSj8","vPadding":"tX8H6b","column-gap":"H4uI4w","columnGap":"H4uI4w","row-gap":"rEP9ii","rowGap":"rEP9ii","spacing":"AazSkr"};
+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__ */withMods(FlexCell$1, () => [css$_.flexCell]);
 
@@ -2485,7 +2503,7 @@ const FlexRow = /* @__PURE__ */forwardRef((props, ref) => {
         } }, props.children));
 });
 
-var css$Z = {"root":"DZ-DpS","margin-24":"V2DlJV","margin24":"V2DlJV","padding-12":"_9QuAOU","padding12":"_9QuAOU","padding-24":"_8YrjFF","padding24":"_8YrjFF","shadow":"-o08Ej","uui-surface-main":"Twz9Mp","uuiSurfaceMain":"Twz9Mp"};
+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__ */withMods(VPanel, (props) => [
     'uui-panel',
@@ -2495,7 +2513,7 @@ const Panel = /* @__PURE__ */withMods(VPanel, (props) => [
     props.background && css$Z[`uui-${props.background}`],
 ]);
 
-var css$Y = {"root":"u1v2GM"};
+var css$Y = {"root":"a0b0i-"};
 
 function applyLabeledInputMods(mods) {
     return [
@@ -2517,7 +2535,7 @@ function applyLabeledInputProps(props) {
 }
 const LabeledInput = /* @__PURE__ */withMods(uuiComponents.LabeledInput, applyLabeledInputMods, applyLabeledInputProps);
 
-var css$X = {"root":"_3WD8id"};
+var css$X = {"root":"cKPomo"};
 
 function RadioGroup(props) {
     const direction = props.direction || 'vertical';
@@ -2532,7 +2550,7 @@ function RadioGroup(props) {
     })));
 }
 
-var css$W = {"root":"yZjICs","viewport":"flAqGS"};
+var css$W = {"root":"Yc1hqI","viewport":"AR-rKK"};
 
 var uuiScrollbars;
 (function (uuiScrollbars) {
@@ -2542,16 +2560,25 @@ var uuiScrollbars;
     uuiScrollbars["uuiLineBottom"] = "uui-line-bottom";
 })(uuiScrollbars || (uuiScrollbars = {}));
 const ScrollBars = /* @__PURE__ */forwardRef((props, ref) => {
-    const { cx: outerCx, children, overflowTopEffect = 'none', overflowBottomEffect = 'none', onScroll, autoHide = 'never', autoHideDelay, rawProps, ...rest } = props;
+    const { cx: outerCx, children, overflowTopEffect = 'none', overflowBottomEffect = 'none', onScroll, autoHide = 'never', autoHideDelay, elementEvents, rawProps, ...rest } = props;
     const [shadowElements, setShadowElements] = useState({
         host: null,
         viewport: null,
     });
     const hostRef = useRef(null);
     const viewportRef = useRef(null);
-    const containerRef = useRef(null);
+    const elementEventsEffective = useMemo(() => {
+        const result = [['img', 'load']]; // this is default
+        if (elementEvents && elementEvents.length > 0) {
+            result.push(...elementEvents);
+        }
+        return result;
+    }, [elementEvents]);
     const [initialize, osInstance] = useOverlayScrollbars({
         options: {
+            update: {
+                elementEvents: elementEventsEffective,
+            },
             scrollbars: {
                 theme: 'uui-scroll-bars',
                 autoHide: autoHide,
@@ -2593,7 +2620,7 @@ const ScrollBars = /* @__PURE__ */forwardRef((props, ref) => {
     useScrollShadows(shadowElements.host, shadowElements.viewport);
     useImperativeHandle(ref, () => {
         return {
-            container: containerRef.current,
+            container: hostRef.current,
             view: viewportRef.current,
         };
     }, []);
@@ -2602,7 +2629,7 @@ const ScrollBars = /* @__PURE__ */forwardRef((props, ref) => {
 });
 ScrollBars.displayName = 'ScrollBars';
 
-var css$V = {"scroll-container":"sMbo8E","scrollContainer":"sMbo8E","list-container":"m3vbi0","listContainer":"m3vbi0"};
+var css$V = {"scroll-container":"gugpxO","scrollContainer":"gugpxO","list-container":"DtcsB0","listContainer":"DtcsB0"};
 
 const VirtualList = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const { listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef, } = useVirtualList({
@@ -2611,8 +2638,11 @@ const VirtualList = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         onScroll: props.onScroll,
         rowsCount: props.rowsCount,
         rowsSelector: props.rowsSelector,
+        rowHeight: props.rowHeight,
+        rowGap: props.rowGap,
     });
     React__default.useImperativeHandle(ref, () => scrollContainerRef.current, [scrollContainerRef.current]);
+    const [blockerInset, setBlockerInset] = React__default.useState(null);
     const renderRows = () => props.renderRows?.({
         listContainerRef, estimatedHeight, offsetY,
     }) || (React__default.createElement("div", { className: css$V.listContainer, style: { minHeight: `${estimatedHeight}px` } },
@@ -2622,9 +2652,28 @@ const VirtualList = /* @__PURE__ */React__default.forwardRef((props, ref) => {
             return;
         scrollContainerRef.current = scrollbars.view;
     }, []);
-    return (React__default.createElement(ScrollBars, { cx: cx$1(css$V.scrollContainer, props.cx), onScroll: handleScroll, ref: scrollBarsRef, rawProps: props.rawProps, overflowTopEffect: props.overflowTopEffect, overflowBottomEffect: props.overflowBottomEffect },
+    const rawProps = React__default.useMemo(() => ({
+        ...(props.rawProps ?? {}),
+        style: {
+            ...(props.rawProps?.style ?? {}),
+            overflow: props.isLoading ? 'hidden' : props.rawProps?.style?.overflow,
+        },
+    }), [props.rawProps, props.isLoading]);
+    const updateBlockerInset = React__default.useCallback(() => {
+        const scrollContainer = scrollContainerRef.current;
+        if (!scrollContainer)
+            return;
+        const { scrollTop, scrollLeft } = scrollContainer;
+        setBlockerInset({ top: scrollTop, left: scrollLeft, right: -scrollLeft, bottom: -scrollTop });
+    }, [setBlockerInset]);
+    React__default.useEffect(() => {
+        if (props.isLoading) {
+            updateBlockerInset();
+        }
+    }, [props.isLoading, updateBlockerInset]);
+    return (React__default.createElement(ScrollBars, { cx: cx$1(css$V.scrollContainer, props.cx), onScroll: handleScroll, ref: scrollBarsRef, rawProps: rawProps, overflowTopEffect: props.overflowTopEffect, overflowBottomEffect: props.overflowBottomEffect, autoHide: props.isLoading ? 'scroll' : undefined },
         renderRows(),
-        React__default.createElement(Blocker, { isEnabled: props.isLoading })));
+        React__default.createElement(Blocker, { isEnabled: props.isLoading, inset: blockerInset })));
 });
 
 const RichTextView = /* @__PURE__ */withMods(uuiComponents.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || settings.richTextView.sizes.default}`]);
@@ -2655,7 +2704,7 @@ function Tree(props) {
     return (React.createElement(VirtualList, { value: value, onValueChange: onValueChange, rowsCount: rowsCount, rows: renderedRows, cx: cx$1(propsCx), role: "tree" }));
 }
 
-var css$U = {"root":"hHTDG7"};
+var css$U = {"root":"lMXYuJ"};
 
 function CheckboxGroup(props) {
     const currentValue = props.value || [];
@@ -2757,7 +2806,7 @@ const Tabs = /* @__PURE__ */forwardRef((props, ref) => {
 });
 Tabs.displayName = 'Tabs';
 
-var css$T = {"root":"ThyT4m","modal-blocker":"V6snqm","modalBlocker":"V6snqm","animateModalBlocker":"op2kJ9","modal":"_98HlxR","modal-footer":"o03RoT","modalFooter":"o03RoT","border-top":"ZKegJj","borderTop":"ZKegJj","modal-header":"okK-NK","modalHeader":"okK-NK","border-bottom":"bZ-p4H","borderBottom":"bZ-p4H"};
+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__ */withMods(ModalBlocker$1, () => [css$T.modalBlocker]);
 const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$T.root, css$T.modal], (props) => {
@@ -2864,6 +2913,7 @@ const TREE_SHAKEABLE_INIT = () => ({
         columnHeader: {
             collapseAllTooltip: 'Collapse All',
             expandAllTooltip: 'Expand All',
+            filterActiveLabel: 'filter active',
         },
     },
     pickerFilterHeader: {
@@ -2949,7 +2999,7 @@ const TREE_SHAKEABLE_INIT = () => ({
 });
 const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
 
-var css$S = {"root":"JOmpvW","icon-wrapper":"Rk3Kg6","iconWrapper":"Rk3Kg6","action-wrapper":"AT1sud","actionWrapper":"AT1sud","close-icon":"NIkRYj","closeIcon":"NIkRYj","main-path":"ZVWwAW","mainPath":"ZVWwAW","content":"CTMRj-","close-wrapper":"AW90dt","closeWrapper":"AW90dt","clear-notifications":"bZiaDZ","clearNotifications":"bZiaDZ"};
+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__default.forwardRef((props, ref) => {
     const notificationCardNode = React__default.useRef(null);
@@ -2982,7 +3032,7 @@ function ClearNotification() {
         React__default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
 }
 
-var css$R = {"footer":"D--Nqm"};
+var css$R = {"footer":"J56wd0"};
 
 class ConfirmationModal extends React.Component {
     render() {
@@ -3024,7 +3074,7 @@ function useReliableForceUpdate() {
     return red[1];
 }
 
-var css$Q = {"root":"JxMpHI","container":"La8OdX"};
+var css$Q = {"root":"CGEeiF","container":"vi-Ish"};
 
 const defaultFormat = 'MMM D, YYYY';
 const valueFormat = 'YYYY-MM-DD';
@@ -3251,14 +3301,14 @@ function DatePickerHeader({ navIconLeft, navIconRight, value: { month, view }, o
             React.createElement(Button, { icon: navIconRight || settings.datePicker.icons.body.nextIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
 }
 
-var css$P = {"root":"hiodii"};
+var css$P = {"root":"EXKo7e"};
 
 function applyDateSelectionMods() {
     return [css$P.root, `uui-size-${settings.datePicker.sizes.body}`];
 }
 const Calendar = /* @__PURE__ */withMods(Calendar$1, applyDateSelectionMods);
 
-var css$O = {"root":"FkKbOC"};
+var css$O = {"root":"fM4MRI"};
 
 const uuiDatePickerBody = {
     wrapper: 'uui-datepicker-body-wrapper',
@@ -3324,7 +3374,8 @@ function DatePickerComponent(props, ref) {
         setInputValue(toCustomDateFormat(value, format));
     }, [value, setInputValue]);
     const onValueChange = (newValue) => {
-        if (value !== newValue) {
+        const isValueChanged = (value || '') !== (newValue || '');
+        if (isValueChanged) {
             props.onValueChange(newValue);
             if (props.getValueChangeAnalyticsEvent) {
                 const event = props.getValueChangeAnalyticsEvent(newValue, value);
@@ -3339,6 +3390,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));
@@ -3367,7 +3422,7 @@ function DatePickerComponent(props, ref) {
                 props.onFocus?.(e);
             }, onKeyDown: onInputKeyDown, onBlur: onBlur, mode: props.mode || defaultMode$1, rawProps: props.rawProps?.input, id: props.id }));
     };
-    const renderBody = useMemo(() => (renderProps) => {
+    const renderBody = useMemo(() => function (renderProps) {
         return (React__default.createElement(DropdownContainer, { ...renderProps },
             React__default.createElement(DatePickerBody, { value: value, onValueChange: onBodyValueChange, cx: cx$1(props.bodyCx), filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay, rawProps: props.rawProps?.body, initialViewMonth: props.initialViewMonth }),
             props.renderFooter?.()));
@@ -3380,7 +3435,7 @@ function DatePickerComponent(props, ref) {
 }
 const DatePicker = /* @__PURE__ */React__default.forwardRef(DatePickerComponent);
 
-var css$N = {"date-input":"Jqv8iS","dateInput":"Jqv8iS","root":"Li5E8E","separator":"AbfuiE"};
+var css$N = {"date-input":"f61-sG","dateInput":"f61-sG","root":"g7GnjG","separator":"awlDd6"};
 
 const RangeDatePickerInput = /* @__PURE__ */forwardRef(({ isDisabled, isInvalid, isReadonly, size, disableClear, rawProps, value, inFocus, format, onValueChange, onFocusInput, onBlurInput, onClick, getPlaceholder, filter, onKeyDown, preventEmptyFromDate, preventEmptyToDate, id, cx: classes, }, ref) => {
     const [inputValue, setInputValue] = useState(toCustomDateRangeFormat(value, format));
@@ -3403,6 +3458,10 @@ const RangeDatePickerInput = /* @__PURE__ */forwardRef(({ isDisabled, isInvalid,
     };
     const handleBlur = (event, inputType) => {
         onBlurInput?.(event, inputType);
+        const formattedValue = toCustomDateRangeFormat(value, format);
+        if (inputValue[inputType] === formattedValue[inputType]) {
+            return; // No changes made to this field, skip validation
+        }
         const canBeEmpty = {
             from: !preventEmptyFromDate,
             to: !preventEmptyToDate,
@@ -3453,7 +3512,7 @@ const RangeDatePickerInput = /* @__PURE__ */forwardRef(({ isDisabled, isInvalid,
         React__default.createElement(TextInput, { cx: cx$1(css$N.dateInput, inFocus === 'to' && uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.rangeDatePicker.sizes.default, value: inputValue.to || undefined, icon: clearAllowed && ForwardRef$Q, iconPosition: "right", iconLabel: "Clear selected date range", onIconClick: onClear, onValueChange: (v) => onInputChange(v || '', 'to'), onFocus: (e) => handleFocus(e, 'to'), onBlur: (e) => handleBlur(e, 'to'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.to, onClick: onClick, onKeyDown: onInputKeyDown })));
 });
 
-var css$M = {"root":"J3GYr2"};
+var css$M = {"root":"FE5uLX"};
 
 const uuiPresets = {
     container: 'uui-presets-container',
@@ -3473,7 +3532,7 @@ function CalendarPresets(props) {
         getPresets(props.presets).map((item) => (React.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: settings.rangeDatePicker.sizes.preset })))));
 }
 
-var css$L = {"root":"Q1L-Gc","container":"-pb3gQ","day-selection":"i7elKX","daySelection":"i7elKX","from-picker":"tzjsB8","fromPicker":"tzjsB8","to-picker":"K0f3uP","toPicker":"K0f3uP","bodes-wrapper":"a8Nkk5","bodesWrapper":"a8Nkk5","blocker":"VuM7dV"};
+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',
@@ -3675,7 +3734,7 @@ const getDayState = (day, selectedDate) => {
     };
 };
 
-var css$K = {"dropdown-container":"jqgyaD","dropdownContainer":"jqgyaD"};
+var css$K = {"dropdown-container":"uKTNuw","dropdownContainer":"uKTNuw"};
 
 function RangeDatePickerComponent(props, ref) {
     const { value: _value, format = defaultFormat, size = settings.rangeDatePicker.sizes.default } = props;
@@ -3743,7 +3802,7 @@ function RangeDatePickerComponent(props, ref) {
 }
 const RangeDatePicker = /* @__PURE__ */React__default.forwardRef(RangeDatePickerComponent);
 
-var css$J = {"root":"KWXYFs","blocker":"_34prcH","marker":"_84dtsR","top":"UhZzgZ","bottom":"DCwbkt","left":"R8GNRF","right":"lCnSoV","inside":"bodQRa"};
+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
@@ -3758,9 +3817,9 @@ function DropMarker(props) {
         : null;
 }
 
-var css$I = {"root":"sO-4YH","search-wrapper":"ZNucT4","searchWrapper":"ZNucT4","no-data":"aWayXT","noData":"aWayXT"};
+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":"OEG3Tc","pickerRow":"OEG3Tc","align-widgets-top":"r1NAZC","alignWidgetsTop":"r1NAZC","row-content":"L7cFY8","rowContent":"L7cFY8","align-widgets-center":"iHarv9","alignWidgetsCenter":"iHarv9","icon-container":"AgdYH7","iconContainer":"AgdYH7","content-wrapper":"AEh42m","contentWrapper":"AEh42m","icon-wrapper":"RgkYBk","iconWrapper":"RgkYBk","icon-default":"IHAUy-","iconDefault":"IHAUy-","selected-mark":"C-1TQK","selectedMark":"C-1TQK"};
+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 = [];
@@ -3827,7 +3886,7 @@ const getHighlightedSearchMatches = (str, search) => {
     return getDecoratedText(str, ranges);
 };
 
-var css$G = {"root":"bNoqr-","column-gap":"Ig-s0L","columnGap":"Ig-s0L","title":"_8OsPQb","subtitle":"kYPPOS","disabled":"o62R-I","multiline":"xzbnMo"};
+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;
@@ -3916,6 +3975,15 @@ function DataPickerBody({ highlightSearchMatches = true, autoFocusSearch = true,
     const prevProps = usePrevious(props);
     const showSearch = props.showSearch === 'auto' ? props.totalCount > 10 : Boolean(props.showSearch);
     const [isKeyboardNavigation, setIsKeyboardNavigation] = React__default.useState(false);
+    const [emptyMessage, setEmptyMessage] = React__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;
+    useEffect(() => {
+        if (!isEmptyList) {
+            setEmptyMessage('');
+        }
+    }, [isEmptyList]);
     useEffect(() => {
         if (props.rows.length !== prevProps?.rows.length || (!isEqual(prevProps?.value.checked, props.value.checked) && !props.fixedBodyPosition)) {
             props.scheduleUpdate?.();
@@ -4005,12 +4073,11 @@ function DataPickerBody({ highlightSearchMatches = true, autoFocusSearch = true,
         : settings.pickerInput.sizes.body.getSearchSize({ pickerSize: props.searchSize });
     const renderedDataRows = useMemo(() => props.rows.map((row) => renderRow(row, props.value)), [props.rows, props.value, isKeyboardNavigation]);
     return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: css$I.emptyStatusAnnouncer, role: "status", "aria-live": "polite", "aria-atomic": "true" }, emptyMessage),
         showSearch && (React__default.createElement("div", { key: "search", className: cx$1(css$I.searchWrapper, 'uui-picker_input-body-search') },
             React__default.createElement(FlexCell$1, { grow: 1 }, autoFocusSearch ? React__default.createElement(MoveFocusInside, null, renderSearchInput()) : renderSearchInput()))),
-        React__default.createElement(FlexRow, { key: "body", cx: cx$1('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__default.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, rows: renderedDataRows, role: "listbox", cx: css$I.root, rawProps: {
+        React__default.createElement(FlexRow, { key: "body", cx: cx$1('uui-picker_input-body'), rawProps: { style: { maxHeight: props.maxHeight, maxWidth: props.maxWidth }, tabIndex: -1 } }, isEmptyList
+            ? (React__default.createElement("div", { ref: (el) => el && setEmptyMessage(el.textContent ?? '') }, renderEmpty())) : (React__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,
@@ -4045,7 +4112,7 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = /* @__PURE__ */React__default.memo(DataPickerFooterImpl);
 
-var css$F = {"header":"D-mQSm","title":"c9DZwj","close":"DKAZa7"};
+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) : '';
@@ -4055,7 +4122,7 @@ const DataPickerMobileHeaderImpl = (props) => {
 };
 const DataPickerMobileHeader = /* @__PURE__ */React__default.memo(DataPickerMobileHeaderImpl);
 
-var css$E = {"done":"jDyBhQ","container":"Oyqjup"};
+var css$E = {"done":"zlooV9","container":"_4TbYLa"};
 
 const PickerBodyMobileView = (props) => {
     const isMobileView = isMobile();
@@ -4067,7 +4134,7 @@ const PickerBodyMobileView = (props) => {
         isMobileView && (React__default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => props.onClose?.(), cx: css$E.done, size: settings.pickerInput.sizes.body.mobileFooterLinkButton }))));
 };
 
-var css$D = {"sub-header-wrapper":"r9yNqY","subHeaderWrapper":"r9yNqY","switch":"ThMdDP","search":"HCA2V7","no-found-modal-container":"jHdJU4","noFoundModalContainer":"jHdJU4","no-found-modal-container-icon":"_8ijOrr","noFoundModalContainerIcon":"_8ijOrr","no-found-modal-container-text":"I8ZOZj","noFoundModalContainerText":"I8ZOZj","body":"CMCOxZ"};
+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, } = usePickerModal(props);
@@ -4128,7 +4195,7 @@ function PickerModal(props) {
             React__default.createElement(ModalFooter, null, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$C = {"tooltip":"T8WmWD","noShrink":"B6xHyj"};
+var css$C = {"tooltip":"_4Treuu","noShrink":"rR7TvO"};
 
 const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     const tagProps = {
@@ -4147,7 +4214,7 @@ const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     }
 });
 
-var css$B = {"root":"CqpEUb"};
+var css$B = {"root":"QGtLbJ"};
 
 const defaultMode = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
@@ -4229,7 +4296,7 @@ function PickerInputComponent(props, ref) {
 }
 const PickerInput = /* @__PURE__ */React__default.forwardRef(PickerInputComponent);
 
-var css$A = {"row":"Fhrl5-"};
+var css$A = {"row":"hWRm8c"};
 
 function PickerListRow(props) {
     let label;
@@ -4249,7 +4316,7 @@ function PickerListRow(props) {
     return (React__default.createElement("div", { role: "option", "aria-selected": props.isSelectable ? props.isSelected : undefined, "aria-busy": props.isLoading, "aria-posinset": props.index + 1, ...(props.checkbox?.isVisible && { 'aria-checked': props.isChecked }), className: css$A.row }, component));
 }
 
-var css$z = {"root":"W0z1ys"};
+var css$z = {"root":"BM9No7"};
 
 function PickerList(props) {
     const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, getModalTogglerCaption, } = usePickerList(props);
@@ -4284,7 +4351,7 @@ function PickerList(props) {
             }, selectedRows)));
 }
 
-var css$y = {"root":"R-YzH1","wrapper":"P-Ka0T","align-widgets-top":"PDiAt1","alignWidgetsTop":"PDiAt1","align-widgets-center":"g8d-g-","alignWidgetsCenter":"g8d-g-"};
+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 };
@@ -4334,7 +4401,7 @@ function DataTableCell(initialProps) {
     return React.createElement(DataTableCell$1, { ...props });
 }
 
-var css$x = {"root":"t6V8fH"};
+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.
@@ -4350,14 +4417,16 @@ const DataTableRow = /* @__PURE__ */withMods(DataTableRow$1, ({ borderBottom = t
     ];
 }, () => propsMods);
 
-var css$w = {"sorting-panel-container":"Hpbjih","sortingPanelContainer":"Hpbjih"};
+var css$w = {"sorting-panel-container":"vLpv8O","sortingPanelContainer":"vLpv8O"};
 
 const SortingPanelImpl = ({ sortDirection, onSort }) => {
     const sortAsc = useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
     const sortDesc = useCallback(() => onSort(sortDirection === 'desc' ? undefined : 'desc'), [onSort]);
+    const isAscSelected = sortDirection === 'asc';
+    const isDescSelected = sortDirection === 'desc';
     return (React__default.createElement(FlexCell, { cx: cx$1(css$w.sortingPanelContainer, 'uui-dropdownMenu-body') },
-        React__default.createElement(DropdownMenuButton, { isActive: sortDirection === 'asc', caption: i18n.pickerFilterHeader.sortAscending, icon: settings.dataTable.icons.header.ascSortIcon, onClick: sortAsc }),
-        React__default.createElement(DropdownMenuButton, { isActive: sortDirection === 'desc', caption: i18n.pickerFilterHeader.sortDescending, icon: settings.dataTable.icons.header.descSortIcon, onClick: sortDesc })));
+        React__default.createElement(DropdownMenuButton, { isActive: isAscSelected, caption: i18n.pickerFilterHeader.sortAscending, icon: settings.dataTable.icons.header.ascSortIcon, onClick: sortAsc, rawProps: { role: 'menuitemradio', 'aria-checked': isAscSelected } }),
+        React__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__default.memo(SortingPanelImpl);
 
@@ -4370,113 +4439,114 @@ const ColumnHeaderDropdownImpl = (props) => {
 };
 const ColumnHeaderDropdown = /* @__PURE__ */React__default.memo(ColumnHeaderDropdownImpl);
 
-var css$v = {"root":"xOjbS5","caption-wrapper":"nSzmnq","captionWrapper":"nSzmnq","sort-icon":"tBrExv","sortIcon":"tBrExv","dropdown-icon":"_9YzAp3","dropdownIcon":"_9YzAp3","infoIcon":"xj-i7M","sortInActive":"LHLh8z","align-right":"dcEwZw","alignRight":"dcEwZw","align-center":"H0AKL0","alignCenter":"H0AKL0","caption":"YCnKYe","truncate":"kGBPHG","upper-case":"_2u1c58","upperCase":"_2u1c58","checkbox":"PdIaNC","icon":"Y8tF4z","fold-all-icon":"V4sJIA","foldAllIcon":"V4sJIA","cell-tooltip":"IjJPRW","cellTooltip":"IjJPRW","resizing-marker":"-kLxwb","resizingMarker":"-kLxwb","pinned-right":"o4M0td","pinnedRight":"o4M0td","draggable":"OM6j-K","ghost":"aeKzhL","is-dragged-out":"Lr1C-Q","isDraggedOut":"Lr1C-Q","dnd-marker-left":"AOczTV","dndMarkerLeft":"AOczTV","dnd-marker-right":"o1qyDz","dndMarkerRight":"o1qyDz","cell-tooltip-wrapper":"g6tjqL","cellTooltipWrapper":"g6tjqL","cell-tooltip-text":"_2xcQes","cellTooltipText":"_2xcQes","tooltip-caption":"_0Ula0-","tooltipCaption":"_0Ula0-","tooltip-info":"uEyohm","tooltipInfo":"uEyohm"};
+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.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            isDropdownOpen: null,
-        };
-        this.getTooltipContent = (column) => (React.createElement("div", { className: cx$1(css$v.cellTooltipWrapper, uuiDataTableHeaderCell.uuiTableHeaderCaptionTooltip) },
-            React.createElement(Text, { cx: [css$v.cellTooltipText, css$v.tooltipCaption] }, column.caption),
-            column.info && (React.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 = cx$1([
-                css$v.caption,
-                this.props.textCase === 'upper' && css$v.upperCase,
-                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.createElement("div", { className: cx$1(css$v.captionWrapper, css$v['align-' + this.props.column.textAlign], uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
-                React.createElement(Tooltip, { placement: "top", color: "inverted", content: renderTooltip(this.props.column), cx: [css$v.cellTooltip, 'uui-dt-header-tooltip'], openDelay: 600, closeOnMouseLeave: "boundary" },
-                    React.createElement("div", { key: "text", className: captionCx }, this.props.column.caption)),
-                this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React.createElement(ControlIcon, { key: "sort", cx: cx$1(css$v.icon, css$v.sortIcon, !this.props.sortDirection && css$v.sortInActive, 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.createElement(IconButton, { key: "filter", cx: cx$1(css$v.icon, !this.props.sortDirection && css$v.filterIcon, uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "neutral", icon: settings.dataTable.icons.header.filterIcon })),
-                this.props.column.renderFilter && (React.createElement(ControlIcon, { key: "dropdown", cx: cx$1(css$v.icon, css$v.dropdownIcon, 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.createElement(Checkbox, { size: settings.dataTable.sizes.body.checkboxMap[this.props.size], rawProps: { 'aria-label': 'Select All' }, ...this.props.selectAll, cx: cx$1(css$v.checkbox, uuiDataTableHeaderCell.uuiTableHeaderCheckbox) }));
+function DefaultTooltipContent(column) {
+    return (React__default.createElement("div", { className: cx$1(css$v.cellTooltipWrapper, uuiDataTableHeaderCell.uuiTableHeaderCaptionTooltip) },
+        React__default.createElement(Text, { cx: [css$v.cellTooltipText, css$v.tooltipCaption] }, column.caption),
+        column.info && (React__default.createElement(Text, { cx: [css$v.cellTooltipText, css$v.tooltipInfo] }, column.info))));
+}
+function DataTableHeaderCell(props) {
+    const [isDropdownOpen, setIsDropdownOpen] = useState(null);
+    const id = 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 = cx$1([
+            css$v.caption,
+            props.textCase === 'upper' && css$v.upperCase,
+            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.createElement(Tooltip, { content: this.props.areAllFolded
-                        ? i18n.tables.columnHeader.expandAllTooltip
-                        : i18n.tables.columnHeader.collapseAllTooltip },
-                    React.createElement(ControlIcon, { cx: cx$1(css$v.icon, css$v.foldAllIcon, 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.createElement("div", { role: "separator", onMouseDown: props.onResizeStart, className: cx$1(css$v.resizingMarker, uuiMarkers.draggable, 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.createElement(DataTableCellContainer, { column: this.props.column, ref: (ref) => {
-                    props.ref(ref);
-                    dropdownProps?.ref?.(ref);
-                }, cx: cx$1(uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && 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 && 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.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__default.createElement("div", { className: cx$1(css$v.captionWrapper, css$v['align-' + props.column.textAlign], uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
+            React__default.createElement(Tooltip, { placement: "top", color: "inverted", content: renderTooltip(props.column), cx: [css$v.cellTooltip, 'uui-dt-header-tooltip'], openDelay: 600, closeOnMouseLeave: "boundary" },
+                React__default.createElement("div", { key: "text", id: captionId, className: captionCx }, props.column.caption)),
+            props.column.isSortable && (!props.column.renderFilter || props.sortDirection) && (React__default.createElement(ControlIcon, { key: "sort", cx: cx$1(css$v.icon, css$v.sortIcon, !props.sortDirection && css$v.sortInActive, 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__default.createElement(IconButton, { key: "filter", cx: cx$1(css$v.icon, !props.sortDirection && css$v.filterIcon, uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "neutral", icon: settings.dataTable.icons.header.filterIcon, rawProps: { 'aria-hidden': true } })),
+            props.column.renderFilter && (React__default.createElement(ControlIcon, { key: "dropdown", cx: cx$1(css$v.icon, css$v.dropdownIcon, uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), icon: settings.dataTable.icons.header[isDropdownOpen ? 'openedDropdownIcon' : 'dropdownIcon'], onKeyDown: handleFilterOpen, rawProps: captionAriaProps }))));
+    };
+    const renderHeaderCheckbox = () => {
+        if (props.selectAll && props.isFirstColumn) {
+            return (React__default.createElement(Checkbox, { size: settings.dataTable.sizes.body.checkboxMap[props.size], rawProps: { 'aria-label': 'Select All' }, ...props.selectAll, cx: cx$1(css$v.checkbox, uuiDataTableHeaderCell.uuiTableHeaderCheckbox) }));
         }
-        return (React.createElement(DataTableHeaderCell$1, { ...this.props, renderCellContent: this.props.column.renderFilter ? this.renderCellWithFilter : this.renderCellContent }));
+    };
+    const renderFoldAllIcon = () => {
+        if (props.isFirstColumn && props.showFoldAll) {
+            return (React__default.createElement(Tooltip, { content: props.areAllFolded
+                    ? i18n.tables.columnHeader.expandAllTooltip
+                    : i18n.tables.columnHeader.collapseAllTooltip },
+                React__default.createElement(ControlIcon, { cx: cx$1(css$v.icon, css$v.foldAllIcon, 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,
+                    } })));
+        }
+    };
+    const renderResizingMarker = (contentProps) => {
+        return (React__default.createElement("div", { role: "separator", onMouseDown: contentProps.onResizeStart, className: cx$1(css$v.resizingMarker, uuiMarkers.draggable, 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__default.createElement(DataTableCellContainer, { column: props.column, ref: (ref) => {
+                contentProps.ref(ref);
+                dropdownProps?.ref?.(ref);
+            }, cx: cx$1(uuiDataTableHeaderCell.uuiTableHeaderCell, (props.column.isSortable || props.isDropdown) && 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 && 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__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__default.createElement(DataTableHeaderCell$1, { ...props, renderCellContent: props.column.renderFilter ? renderCellWithFilter : renderCellContent }));
 }
 
-var css$u = {"root":"ldCRrm","caption-wrapper":"VLvvJA","captionWrapper":"VLvvJA","align-center":"JMCmnW","alignCenter":"JMCmnW","caption":"Gs68vM","truncate":"_0Ys-Yz","upper-case":"b3VenJ","upperCase":"b3VenJ","group-cell-tooltip":"Dpkedv","groupCellTooltip":"Dpkedv","group-cell-tooltip-wrapper":"cdyOuP","groupCellTooltipWrapper":"cdyOuP","group-cell-tooltip-text":"_68z4kR","groupCellTooltipText":"_68z4kR","tooltip-caption":"yZncE9","tooltipCaption":"yZncE9","tooltip-info":"TBSzrL","tooltipInfo":"TBSzrL"};
+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.Component {
     constructor() {
@@ -4516,7 +4586,7 @@ class DataTableHeaderGroupCell extends React.Component {
     }
 }
 
-var css$t = {"root":"MXEMfI"};
+var css$t = {"root":"_5cSIAT"};
 
 const DataTableHeaderRow = /* @__PURE__ */withMods(DataTableHeaderRow$1, () => [css$t.root, 'uui-dt-vars'], (mods) => {
     return ({
@@ -4528,6 +4598,20 @@ const DataTableHeaderRow = /* @__PURE__ */withMods(DataTableHeaderRow$1, () => [
     });
 });
 
+/**
+ * Checks if the value is a range object with at least one boundary property defined
+ */
+const isValidRangeValue = (range) => {
+    return range != null && (range.from != null || range.to != null);
+};
+const isFilledArray = (arr) => {
+    return Array.isArray(arr) && arr.length > 0;
+};
+const hasSomeNullishProp = (obj) => {
+    return Object.keys(obj).some((prop) => obj[prop] == null);
+};
+const isValidArrayValue = isFilledArray;
+const hasSomeNullishPredicate = hasSomeNullishProp;
 const normalizeFilterWithPredicates = (filter) => {
     if (!filter) {
         return {};
@@ -4545,27 +4629,21 @@ const normalizeFilterWithPredicates = (filter) => {
             if ('from' in filterValue && 'to' in filterValue) {
                 continue;
             }
-            if ('in' in filterValue && (!Array.isArray(filterValue.in) || !filterValue.in.length)) {
+            if ('in' in filterValue && !isValidArrayValue(filterValue.in)) {
                 delete filter[key];
             }
-            if ('nin' in filterValue && (!Array.isArray(filterValue.nin) || !filterValue.nin.length)) {
+            if ('nin' in filterValue && !isValidArrayValue(filterValue.nin)) {
                 delete filter[key];
             }
-            if ('inRange' in filterValue) {
-                if (!filterValue.inRange || (!filterValue.inRange.from && !filterValue.inRange.to)) {
-                    delete filter[key];
-                }
+            if ('inRange' in filterValue && !isValidRangeValue(filterValue.inRange)) {
+                delete filter[key];
             }
-            if ('notInRange' in filterValue) {
-                if (!filterValue.notInRange || (!filterValue.notInRange.from && !filterValue.notInRange.to)) {
-                    delete filter[key];
-                }
+            if ('notInRange' in filterValue && !isValidRangeValue(filterValue.notInRange)) {
+                delete filter[key];
+            }
+            if (hasSomeNullishPredicate(filterValue)) {
+                delete filter[key];
             }
-            Object.keys(filterValue).forEach((predicate) => {
-                if (filterValue[predicate] === null || filterValue[predicate] === undefined) {
-                    delete filter[key];
-                }
-            });
         }
     }
     return result;
@@ -4616,7 +4694,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":"hJV7Av","header":"Bsf-i0","title":"JQ3UZf","removeButton":"_55kuB5","with-search":"uPNb0E","withSearch":"uPNb0E"};
+var css$s = {"body":"Oeq3L5","header":"eMTe8I","title":"q4z-t1","removeButton":"-mPrB9","with-search":"_5ZXgMR","withSearch":"_5ZXgMR"};
 
 function FilterColumnBody(props) {
     const [predicate, setPredicate] = useState(getDefaultPredicate(props.predicates, props.value));
@@ -4677,7 +4755,7 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var css$r = {"unpin-icon":"zjpIcN","unpinIcon":"zjpIcN","pin-toggler-icon":"Hm4zy0","pinTogglerIcon":"Hm4zy0"};
+var css$r = {"unpin-icon":"BnhK--","unpinIcon":"BnhK--","pin-toggler-icon":"d2W-Dd","pinTogglerIcon":"d2W-Dd"};
 
 function PinIconButton(props) {
     const i18nLocal = i18n.tables.columnsConfigurationModal;
@@ -4728,7 +4806,7 @@ function getUnpinIcon(params) {
     }
 }
 
-var css$q = {"row-wrapper":"BpfHqa","rowWrapper":"BpfHqa","pin-icon-button":"sPah20","pinIconButton":"sPah20","not-pinned":"_6I0PKw","notPinned":"_6I0PKw","checkbox":"JUJr-Q","drag-handle":"jFOEbm","dragHandle":"jFOEbm","dnd-disabled":"F9W28O","dndDisabled":"F9W28O"};
+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.memo(function ColumnRow(props) {
     const { column } = props;
@@ -4762,7 +4840,7 @@ const ColumnRow = /* @__PURE__ */React.memo(function ColumnRow(props) {
     return (React.createElement(DndActor, { key: column.key, srcData: isDndAllowed && data, dstData: data, canAcceptDrop: onCanAcceptDrop, onDrop: onDrop, render: renderContent }));
 });
 
-var css$p = {"root":"_3o74w8","main-panel":"wKjF9K","mainPanel":"wKjF9K","group":"tkiRP7","group-title":"k79tZk","groupTitle":"k79tZk","group-items":"DGRSsd","groupItems":"DGRSsd","no-data":"yv7Udo","noData":"yv7Udo","no-data-title":"XRblv5","noDataTitle":"XRblv5","no-data-sub-title":"F8TxEL","noDataSubTitle":"F8TxEL","h-divider":"zJYD8d","hDivider":"zJYD8d","search-area":"SqSC-s","searchArea":"SqSC-s","subgroup-accordion":"oN9ika","subgroupAccordion":"oN9ika","subgroup":"jEh7Ao","subgroup-title":"jHaw0V","subgroupTitle":"jHaw0V"};
+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.createElement(FlexRow, { cx: css$p.group },
     React.createElement(Text, { size: "none", cx: css$p.groupTitle }, title),
@@ -4865,7 +4943,7 @@ const getChildrenAndRest = (row, rows) => {
     return [children, rest];
 };
 
-var css$o = {"listContainer":"m0mjZ6","header":"HUDNFM","group":"ShPCEZ","stickyHeader":"_0K0By-"};
+var css$o = {"listContainer":"-gBDgo","header":"uPVX4r","group":"Nlg0US","stickyHeader":"P-aC-C"};
 
 function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
     const rowRef = useRef(undefined);
@@ -4905,7 +4983,7 @@ function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, r
             React__default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
 }
 
-var css$n = {"root":"D4yDhP","sticky-header":"ZG49tM","stickyHeader":"ZG49tM","no-results":"CkMZyb","noResults":"CkMZyb","icon":"TvyS5a","title":"_7GBkj2"};
+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 } = useUuiContext();
@@ -4947,6 +5025,7 @@ function DataTable(props) {
         role: 'table',
         'aria-colcount': columns.length,
         'aria-rowcount': props.rowsCount,
+        ...props.rawProps,
     };
     return (React.createElement(DataTableSelectionProvider, { onCopy: props.onCopy, rows: rows, columns: columns },
         React.createElement(DataTableFocusProvider, { dataTableFocusManager: props.dataTableFocusManager }, props.disableVirtualization === true
@@ -4954,7 +5033,7 @@ function DataTable(props) {
             : (React.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rowsCount: props.rowsCount, renderRows: renderTableBody, cx: classes, isLoading: props.isReloading, rowsSelector: "[role=row]", rawProps: rawProps })))));
 }
 
-var css$m = {"root":"ziQWZ9","title-wrapper":"BqFAg6","titleWrapper":"BqFAg6","title":"Mh-jwA","text-wrapper":"MJdOLd","textWrapper":"MJdOLd","selection":"IcVvsm","postfix":"SHvUrH","selected":"hvJnhD"};
+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.forwardRef((props, ref) => {
     const togglerPickerOpened = (e) => {
@@ -5179,9 +5258,10 @@ function FilterRangeDatePickerBody(props) {
         renderFooter()));
 }
 
-var css$l = {"container":"UrxYgl"};
+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)
@@ -5230,15 +5310,15 @@ function FilterNumericBody(props) {
         return (React__default.createElement("div", null,
             React__default.createElement(FlexRow, { padding: "12", alignItems: "center", columnGap: "12", borderBottom: true, cx: css$l.container },
                 React__default.createElement(FlexCell, { width: "100%" },
-                    React__default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: value?.from ?? null, onValueChange: rangeValueHandler('from'), placeholder: "Min", formatOptions: { maximumFractionDigits: 2 } })),
+                    React__default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: value?.from ?? null, onValueChange: rangeValueHandler('from'), placeholder: "Min", formatOptions: { maximumFractionDigits: 2 }, ...numericInputProps })),
                 React__default.createElement(FlexCell, { width: "100%" },
-                    React__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__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__default.createElement("div", null,
         React__default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$l.container },
             React__default.createElement(FlexCell, { width: 130 },
-                React__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__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()));
 }
 
@@ -5317,9 +5397,9 @@ function FiltersToolbarItemImpl(props) {
         props.predicates ? (React__default.createElement(FilterPredicatePanel, { predicates: props.predicates, predicate: predicate, type: props.type, onValueChange: props.onValueChange, value: props.value, setPredicate: setPredicate })) : (!hideTitle && (React__default.createElement("div", { className: css$s.title }, props.title))),
         !props?.isAlwaysVisible && (React__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__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__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__default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(predicate, props.value), onValueChange: onValueChange }))) : (React__default.createElement(DropdownContainer, { cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], ...dropdownProps, rawProps: { ...dropdownProps.arrowProps, 'aria-modal': true } },
+            React__default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(predicate, props.value), onValueChange: onValueChange }))) : (React__default.createElement(DropdownContainer, { cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], ...dropdownProps, rawProps: { 'aria-modal': true } },
             renderHeader(hideHeaderTitle),
             React__default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(predicate, props.value), onValueChange: onValueChange })));
     };
@@ -5490,7 +5570,7 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = /* @__PURE__ */React__default.memo(FiltersToolbarImpl);
 
-var css$k = {"delete-button":"PIqhJl","deleteButton":"PIqhJl","tab-button":"ifUJRi","tabButton":"ifUJRi","targetOpen":"tvmfFZ"};
+var css$k = {"delete-button":"frGXqP","deleteButton":"frGXqP","tab-button":"_5COuq7","tabButton":"_5COuq7","targetOpen":"zE5K4c"};
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = useUuiContext();
@@ -5566,7 +5646,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":"_7LiJBJ","presetInputCell":"_7LiJBJ","preset-input":"zWZL0y","presetInput":"zWZL0y"};
+var css$j = {"preset-input-cell":"CX--BX","presetInputCell":"CX--BX","preset-input":"Pc-ija","presetInput":"Pc-ija"};
 
 function PresetInput(props) {
     const [presetCaption, setPresetCaption] = useState(props.preset?.name || '');
@@ -5593,7 +5673,7 @@ function PresetInput(props) {
         React__default.createElement(TextInput, { cx: css$j.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50, isReadonly: readonly })));
 }
 
-var css$i = {"preset":"B5tRsk","activePreset":"xvxfJk"};
+var css$i = {"preset":"_7-CwRy","activePreset":"I-Hd6X"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = useState(false);
@@ -5618,7 +5698,7 @@ function Preset(props) {
     return (React__default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$i.preset, isPresetActive && css$i.activePreset, UUI_PRESETS_PANEL_PRESET], size: settings.presetsPanel.sizes.tabButton, withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: PresetActionsDropdownComponent, iconPosition: "right", isActive: isPresetActive }))));
 }
 
-var css$h = {"divider":"ykJF2A","dropdownDeleteIcon":"_8MYSu-","presetsWrapper":"_4SR-mK","addPresetContainer":"_7fxQxH","dropContainer":"YWqtWe"};
+var css$h = {"divider":"eB2z47","dropdownDeleteIcon":"_8t-mZX","presetsWrapper":"xc27q1","addPresetContainer":"wrmFxW","dropContainer":"iqVuNd"};
 
 function PresetsPanel(props) {
     const [isAddingPreset, setIsAddingPreset] = useState(false);
@@ -5667,9 +5747,9 @@ function PresetsPanel(props) {
             React__default.createElement(AdaptivePanel, { items: getPanelItems() }))));
 }
 
-var css$g = {"root":"N5dccP"};
+var css$g = {"root":"LJp6vz"};
 
-var css$f = {"root":"ZsbsVl","burger-content":"R0uvXx","burgerContent":"R0uvXx"};
+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); }
@@ -5712,7 +5792,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
 };
 var ForwardRef$2 = /*#__PURE__*/forwardRef(SvgNavigationArrowDownOutline);
 
-var css$e = {"root":"F6m8xD","button-primary":"ZOdCEL","buttonPrimary":"ZOdCEL","button-secondary":"_4qZv9-","buttonSecondary":"_4qZv9-","hasIcon":"h0Cxtm","dropdown":"fCSs75"};
+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 [
@@ -5737,13 +5817,13 @@ const BurgerButton = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         }, dropdownIcon: ForwardRef$2 }));
 });
 
-var css$d = {"search-input":"JJCAdZ","searchInput":"JJCAdZ"};
+var css$d = {"search-input":"gQLAWs","searchInput":"gQLAWs"};
 
 function BurgerSearch(props) {
     return (React.createElement(TextInput$1, { cx: cx(css$d.searchInput, 'uui-main_menu-burger-search'), iconPosition: "left", icon: ForwardRef$M, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$Q }));
 }
 
-var css$c = {"root":"EMudHy","group-header":"nu5Js0","groupHeader":"nu5Js0","group-name":"uERjYv","groupName":"uERjYv","line":"XZ86-f"};
+var css$c = {"root":"w-S8L1","group-header":"YGKwqA","groupHeader":"YGKwqA","group-name":"mbcwfp","groupName":"mbcwfp","line":"YjM1L5"};
 
 function BurgerGroupHeader(props) {
     return (React.createElement("div", { className: cx(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
@@ -5751,7 +5831,7 @@ function BurgerGroupHeader(props) {
         React.createElement("span", { className: css$c.groupName }, props.caption)));
 }
 
-var css$b = {"root":"AV361g","type-primary":"LF75wV","typePrimary":"LF75wV","type-secondary":"K3lGww","typeSecondary":"K3lGww"};
+var css$b = {"root":"C1udgy","type-primary":"LMLYUT","typePrimary":"LMLYUT","type-secondary":"_1NwAKU","typeSecondary":"_1NwAKU"};
 
 const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { type, ...clickableProps } = props;
@@ -5779,7 +5859,7 @@ const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         props.isDropdown && (React.createElement(IconContainer, { icon: ForwardRef$P, flipY: props.isOpen }))));
 });
 
-var css$a = {"dropdown-body":"_243Ac5","dropdownBody":"_243Ac5"};
+var css$a = {"dropdown-body":"PB-SfU","dropdownBody":"PB-SfU"};
 
 function MainMenuDropdown(props) {
     const handleEscape = (e, onClose, isOpen) => {
@@ -5825,12 +5905,12 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
 };
 var ForwardRef$1 = /*#__PURE__*/forwardRef(SvgNavigationGlobalMenuOutlineOutline);
 
-var css$9 = {"global-menu-btn":"Burn52","globalMenuBtn":"Burn52","global-menu-icon":"IAqwXr","globalMenuIcon":"IAqwXr"};
+var css$9 = {"global-menu-btn":"A39zfo","globalMenuBtn":"A39zfo","global-menu-icon":"iMqHXL","globalMenuIcon":"iMqHXL"};
 
 const GlobalMenu = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("button", { ref: ref, id: "global_menu_toggle", className: cx(css$9.globalMenuBtn, props.cx), ...props.rawProps },
     React.createElement(IconContainer, { size: 36, icon: ForwardRef$1, cx: css$9.globalMenuIcon }))));
 
-var css$8 = {"container":"iy5whG","open":"VUDSkM","folding-arrow":"_2SBx7F","foldingArrow":"_2SBx7F"};
+var css$8 = {"container":"Vfxej-","open":"_6xCWfp","folding-arrow":"Vw00hX","foldingArrow":"Vw00hX"};
 
 const MainMenuAvatar = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("button", { ref: ref, className: cx(css$8.container, props.isDropdown && css$8.dropdown, props.isOpen && css$8.open, props.onClick && uuiMarkers.clickable, props.cx), onClick: props.onClick, ...props.rawProps },
     React.createElement(Avatar, { size: "36", img: props.avatarUrl }),
@@ -5838,15 +5918,15 @@ const MainMenuAvatar = /* @__PURE__ */React.forwardRef((props, ref) => (React.cr
     props.isDropdown && (React.createElement("div", null,
         React.createElement(IconContainer, { size: 18, icon: ForwardRef$P, flipY: props.isOpen, cx: css$8.foldingArrow }))))));
 
-var css$7 = {"search-input":"Uu9zeo","searchInput":"Uu9zeo"};
+var css$7 = {"search-input":"_67jSLc","searchInput":"_67jSLc"};
 
 const MainMenuSearch = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement(IEditableDebouncer, { ...props, render: (iEditable) => (React.createElement(TextInput$1, { iconPosition: "left", icon: ForwardRef$M, cancelIcon: props.value?.length > 0 && ForwardRef$Q, ...props, ...iEditable, ref: ref, cx: cx$1(css$7.searchInput, props.cx), ...props.rawProps })) })));
 
-var css$6 = {"container":"-ZN7sD"};
+var css$6 = {"container":"CuJETf"};
 
 const MainMenuIcon = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement(IconButton, { ref: ref, icon: props.icon, cx: cx$1(props.cx, css$6.container), ...props })));
 
-var css$5 = {"root":"_1QDE4-"};
+var css$5 = {"root":"b0P50j"};
 
 const Anchor = /* @__PURE__ */withMods(Anchor$1, () => [css$5.root]);
 
@@ -5904,7 +5984,7 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgFileCloudUploadFill);
 
-var css$4 = {"root":"A-Muqt","drop-start":"RrP3N2","dropStart":"RrP3N2","drop-over":"LXa2lh","dropOver":"LXa2lh","link":"dUNgjr","drop-area":"T-W1s5","dropArea":"T-W1s5","drop-caption":"hj9LDg","dropCaption":"hj9LDg","icon-blue":"PgO6qQ","iconBlue":"PgO6qQ"};
+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'
@@ -5922,7 +6002,7 @@ function DropSpot(props) {
     return React.createElement(DropSpot$1, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
 }
 
-var css$3 = {"root":"q4Jmgj"};
+var css$3 = {"root":"nksM9G"};
 
 const SvgCircleProgress = /* @__PURE__ */React.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
@@ -5933,7 +6013,7 @@ const SvgCircleProgress = /* @__PURE__ */React.forwardRef((props, ref) => {
         React.createElement("circle", { strokeWidth: 1, fill: "transparent", r: outsetRadius, cx: props.size / 2, cy: props.size / 2 })));
 });
 
-var css$2 = {"root":"nzEzgt","file-name":"LZ4Va8","fileName":"LZ4Va8","default-color":"ZrSeeV","defaultColor":"ZrSeeV","doc-color":"jMf4SE","docColor":"jMf4SE","xls-color":"ZSNzXO","xlsColor":"ZSNzXO","pdf-color":"Dw0ZHV","pdfColor":"Dw0ZHV","movie-color":"_0-NDhd","movieColor":"_0-NDhd","img-color":"Kb2jDC","imgColor":"Kb2jDC","mov-color":"zaIixU","movColor":"zaIixU","error-block":"sTLkU3","errorBlock":"sTLkU3","icons-block":"gybRn-","iconsBlock":"gybRn-"};
+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.forwardRef((props, ref) => {
     const [isLoadingShow, setIsLoadingShow] = React.useState(true);
@@ -6053,7 +6133,7 @@ const getErrorPageConfig = () => ({
     },
 });
 
-var css$1 = {"container":"qzBFgp"};
+var css$1 = {"container":"p7VA34"};
 
 const ErrorPage = (props) => {
     const isMobileScreen = isMobile();
@@ -6065,7 +6145,7 @@ const ErrorPage = (props) => {
             props?.supportLink && React__default.createElement("div", { className: "uui-error-support-link" }, props?.supportLink))));
 };
 
-var css = {"recovery-spinner":"_6teYUO","recoverySpinner":"_6teYUO","recovery-message":"ton-8f","recoveryMessage":"ton-8f","modal-blocker":"f3NULg","modalBlocker":"f3NULg","modalFadeIn":"XN-DN3"};
+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 } = useUuiContext();