@epam/uui 6.4.3 → 6.5.0-alpha.0

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, useMemo, useImperativeHandle, 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';
@@ -17,7 +17,7 @@ import customParseFormat from 'dayjs/plugin/customParseFormat.js';
 import isoWeek from 'dayjs/plugin/isoWeek.js';
 import isEqual from 'react-fast-compare';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
-import FocusLock, { MoveFocusInside } from 'react-focus-lock';
+import FocusLock, { MoveFocusInside } from '@epam/uui-react-focus-lock-fork';
 
 var _path$Q;
 function _extends$Q() { return _extends$Q = 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$Q.apply(null, arguments); }
@@ -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(#7rku2u20ng8n2e0u2_a)"
+    clipPath: "url(#od04nnpgd11hcww_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: "7rku2vt84p7bhihh_b",
+    id: "od04nnhjnkq8z8gf6_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(#7rku2vt84p7bhihh_b)",
+    mask: "url(#od04nnhjnkq8z8gf6_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: "7rku2u20ng8n2e0u2_a"
+    id: "od04nnpgd11hcww_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":"_8hLwMO","uui-spinner":"R-jhSm","uuiSpinner":"R-jhSm"};
+var css$1w = {"root":"wHWe96","uui-spinner":"GbwXIv","uuiSpinner":"GbwXIv"};
 
 function applySpinnerMods() {
     return [css$1w.root, 'uui-spinner'];
 }
 const Spinner = /* @__PURE__ */withMods(Spinner$1, applySpinnerMods);
 
-var css$1v = {"root":"DNQ--Z","loading-word":"bVoEv-","loadingWord":"bVoEv-","animated-loading":"aWmYTS","animatedLoading":"aWmYTS","skeleton_loading":"ta-y36","skeletonLoading":"ta-y36"};
+var css$1v = {"root":"L5AYte","loading-word":"hLQqgv","loadingWord":"hLQqgv","animated-loading":"_3YSplp","animatedLoading":"_3YSplp","skeleton_loading":"BBSZPL","skeletonLoading":"BBSZPL"};
 
 const TextPlaceholder = (props) => {
     const pattern = '&nbsp;';
@@ -951,7 +951,7 @@ const TextPlaceholder = (props) => {
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
-var css$1u = {"root":"pMvf3g","line-height":"zEEf4D","lineHeight":"zEEf4D","font-size":"_4aEQ4J","fontSize":"_4aEQ4J"};
+var css$1u = {"root":"t2qF7o","line-height":"QsHsg-","lineHeight":"QsHsg-","font-size":"DYySQH","fontSize":"DYySQH"};
 
 function applyTextMods(mods) {
     return [
@@ -978,7 +978,7 @@ const Text = /* @__PURE__ */withMods(uuiComponents.Text, applyTextMods, (props)
     };
 });
 
-var css$1t = {"root":"MLcxSI"};
+var css$1t = {"root":"VW0xT7"};
 
 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":"jTwM9i"};
+var css$1s = {"root":"_73MvAx"};
 
 function applyButtonMods(mods) {
     return [
@@ -1501,7 +1501,7 @@ const Button = /* @__PURE__ */withMods(uuiComponents.Button, applyButtonMods, ()
     };
 });
 
-var css$1r = {"root":"_4WdNiE"};
+var css$1r = {"root":"qJt05Y"};
 
 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":"pYZg7j"};
+var css$1q = {"root":"cv8fbr"};
 
 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":"q-Vi6c"};
+var css$1p = {"root":"F1K5-G"};
 
 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":"-lzGOU","withNotify":"ncK1Q2"};
+var css$1o = {"root":"BQ79nw","withNotify":"fu1mgU"};
 
 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":"NLF-70","noLeftPadding":"qDkIGp","foldingArea":"-ossLC","onlyFoldable":"_090PZs","captionWrapper":"dH6VQK","withNotify":"tWMvCW"};
+var css$1n = {"root":"btG3d4","noLeftPadding":"BNhpdA","foldingArea":"_3Medwy","onlyFoldable":"viXzqW","captionWrapper":"wCY6DC","withNotify":"MP0UKc"};
 
-var css$1m = {"root":"wcwKbc"};
+var css$1m = {"root":"UKJGXU"};
 
 const AvatarStack = /* @__PURE__ */withMods(AvatarStack$1, () => [css$1m.root]);
 
-var css$1l = {"root":"kL6Tbp"};
+var css$1l = {"root":"mBcbTU"};
 
 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":"_8ejsbh"};
+var css$1k = {"root":"Kyg-VZ"};
 
 function applyTagMods(props) {
     return [
@@ -1694,7 +1694,7 @@ const Tag = /* @__PURE__ */React__default.forwardRef((props, ref) => {
             } }))));
 });
 
-var css$1j = {"root":"fHn-cg","page":"snUZHH","spacer":"Bm1PLu","mode-ghost":"Tk4CAT","modeGhost":"Tk4CAT"};
+var css$1j = {"root":"zVDYL9","page":"YLRFk9","spacer":"_-5gzP8","mode-ghost":"l0MSu-","modeGhost":"l0MSu-"};
 
 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":"yfsXOh","progress-bar":"C-iJFW","progressBar":"C-iJFW","progressBar-indeterminate":"F5x8oC","progressBarIndeterminate":"F5x8oC","size-12":"qIeaxr","size12":"qIeaxr","size-18":"Lu-gwD","size18":"Lu-gwD","size-24":"xCWhuo","size24":"xCWhuo"};
+var css$1i = {"root":"DhfzLk","progress-bar":"D5HO-D","progressBar":"D5HO-D","progressBar-indeterminate":"q7pX-1","progressBarIndeterminate":"q7pX-1","size-12":"SBS94U","size12":"SBS94U","size-18":"GXFvFr","size18":"GXFvFr","size-24":"_4FBi2t","size24":"_4FBi2t"};
 
 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":"CxCTzP","striped":"_3gNHFF","animate-stripes":"WVIgYO","animateStripes":"WVIgYO","size-12":"_7REGvN","size12":"_7REGvN","size-18":"fGh9tR","size18":"fGh9tR","size-24":"b3mqFI","size24":"b3mqFI"};
+var css$1h = {"root":"vqR8ki","striped":"aoQy5k","animate-stripes":"Cpocf4","animateStripes":"Cpocf4","size-12":"yW3aif","size12":"yW3aif","size-18":"Vjt90X","size18":"Vjt90X","size-24":"oOrFSH","size24":"oOrFSH"};
 
 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":"_83Ha80"};
+var css$1g = {"root":"Yvl3rP"};
 
 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":"mmdPAb"};
+var css$1f = {"root":"g2poa9"};
 
 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":"ulLCPc"};
+var css$1e = {"root":"-zhjHE"};
 
 function applyCheckboxMods(mods) {
     return [
@@ -1782,7 +1782,7 @@ const applyUUICheckboxProps = (props) => {
 };
 const Checkbox = /* @__PURE__ */withMods(uuiComponents.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$1d = {"root":"UEuGTj"};
+var css$1d = {"root":"BndSCy"};
 
 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":"HCSa-i"};
+var css$1c = {"root":"IwresO"};
 
 function applySwitchMods(mods) {
     return [
@@ -1818,7 +1818,7 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var textInputCss = {"root":"bzFpyH"};
+var textInputCss = {"root":"o2jUgK"};
 
 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":"Lqndn2"};
+var css$1b = {"root":"_4yz802"};
 
 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":"kEwxAR"};
+var css$1a = {"root":"rD1EIe"};
 
 const DEFAULT_MODE$2 = EditMode.FORM;
 function applyNumericInputMods(mods) {
@@ -1879,7 +1879,7 @@ const NumericInput = /* @__PURE__ */withMods(NumericInput$1, applyNumericInputMo
     };
 });
 
-var css$19 = {"root":"VyQTdl"};
+var css$19 = {"root":"hWjyQa"};
 
 const DEFAULT_MODE$1 = EditMode.FORM;
 function applyTextAreaMods(mods) {
@@ -1920,7 +1920,7 @@ function TREE_SHAKEABLE_INIT$1() {
     };
 }
 
-var css$18 = {"root":"jeat4s"};
+var css$18 = {"root":"_1xxWuz"};
 
 function applyDropdownContainerMods(mods) {
     return [
@@ -1931,7 +1931,7 @@ function applyDropdownContainerMods(mods) {
 }
 const DropdownContainer = /* @__PURE__ */withMods(uuiComponents.DropdownContainer, applyDropdownContainerMods);
 
-var css$17 = {"root":"HxES-u","timepicker-input":"OdqQbC","timepickerInput":"OdqQbC","ltr-always":"Zbs3dP","ltrAlways":"Zbs3dP"};
+var css$17 = {"root":"zhllax","timepicker-input":"xs2Q7P","timepickerInput":"xs2Q7P","ltr-always":"cMUitE","ltrAlways":"cMUitE"};
 
 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 }),
@@ -2152,7 +2152,7 @@ function TimePickerComponent(props, ref) {
 }
 const TimePicker = /* @__PURE__ */React__default.forwardRef(TimePickerComponent);
 
-var css$16 = {"root":"rMoG-Q"};
+var css$16 = {"root":"PBiI6A"};
 
 function applyInputAddonMods() {
     return [
@@ -2161,14 +2161,14 @@ function applyInputAddonMods() {
 }
 const InputAddon = /* @__PURE__ */withMods(InputAddon$1, applyInputAddonMods);
 
-var css$15 = {"root":"BTxkhK"};
+var css$15 = {"root":"BfHmZn"};
 
 function applySliderMods() {
     return [css$15.root, 'uui-color-neutral'];
 }
 const Slider = /* @__PURE__ */withMods(Slider$1, applySliderMods);
 
-var css$14 = {"root":"uGxzLI"};
+var css$14 = {"root":"-S9u2y"};
 
 function applyTooltipMods(mods) {
     return [
@@ -2178,7 +2178,7 @@ function applyTooltipMods(mods) {
 }
 const Tooltip = /* @__PURE__ */withMods(uuiComponents.Tooltip, applyTooltipMods);
 
-var css$13 = {"root":"cIcj2V","tooltip":"fL-2KQ"};
+var css$13 = {"root":"KybgXo","tooltip":"mQBZnf"};
 
 function applyRatingMods(mods) {
     return [
@@ -2192,10 +2192,13 @@ const Rating = /* @__PURE__ */withMods(uuiComponents.Rating, applyRatingMods, (p
     Tooltip,
 }));
 
-var css$12 = {"drag-handle-wrapper":"vz4Jau","dragHandleWrapper":"vz4Jau","with-indent":"Gb4-F8","withIndent":"Gb4-F8","drag-handle":"W6zySe","dragHandle":"W6zySe","icon-container":"RBZlzp","iconContainer":"RBZlzp"};
+var css$12 = {"drag-handle-wrapper":"hZXH74","dragHandleWrapper":"hZXH74","with-indent":"tSvayR","withIndent":"tSvayR","drag-handle":"Ogd3pd","dragHandle":"Ogd3pd","icon-container":"Yudulw","iconContainer":"Yudulw"};
 
 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];
     };
@@ -2216,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, rawProps: { 'aria-label': 'Select' } })),
+        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',
@@ -2254,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: {
@@ -2274,7 +2279,7 @@ function VerticalTabButtonComponent(props, ref) {
 }
 const VerticalTabButton = /* @__PURE__ */React__default.forwardRef(VerticalTabButtonComponent);
 
-var css$11 = {"root":"MJvL6k","main-path":"_3a8RsN","mainPath":"_3a8RsN","content-wrapper":"_9nh9V7","contentWrapper":"_9nh9V7","content":"-EISlR","action-wrapper":"VFvxE-","actionWrapper":"VFvxE-","icon-wrapper":"X3Bu8y","iconWrapper":"X3Bu8y","icon":"KxlhS-","close-icon":"j4xHs4","closeIcon":"j4xHs4"};
+var css$11 = {"root":"y8-sZZ","main-path":"E1Gu4A","mainPath":"E1Gu4A","content-wrapper":"Ccq7zS","contentWrapper":"Ccq7zS","content":"UBuZ3S","action-wrapper":"tMzyji","actionWrapper":"tMzyji","icon-wrapper":"-BWk33","iconWrapper":"-BWk33","icon":"cseZ3d","close-icon":"eOSTWB","closeIcon":"eOSTWB"};
 
 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 },
@@ -2292,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":"Nq2X0n","submenuRootItemRtl":"Nq2X0n","icon-after":"_8JuzK8","iconAfter":"_8JuzK8","submenu-root-item":"ZDksfs","submenuRootItem":"ZDksfs","icon-check":"kKpSl7","iconCheck":"kKpSl7","splitter-root":"VbyK2Z","splitterRoot":"VbyK2Z","splitter":"UFbkr-","header-root":"S0UYrf","headerRoot":"S0UYrf","item-root":"Y7tVM2","itemRoot":"Y7tVM2","icon":"PDP2D-","link":"NtukED","indent":"cSS-IU","selected-mark":"eWdgui","selectedMark":"eWdgui"};
+var css$10 = {"submenu-root-item-rtl":"-SXlFo","submenuRootItemRtl":"-SXlFo","icon-after":"Aw-soR","iconAfter":"Aw-soR","submenu-root-item":"GL65CC","submenuRootItem":"GL65CC","icon-check":"cTUiAV","iconCheck":"cTUiAV","splitter-root":"AXlotw","splitterRoot":"AXlotw","splitter":"-ZSUra","header-root":"nbHgvJ","headerRoot":"nbHgvJ","item-root":"kGjdoa","itemRoot":"kGjdoa","icon":"_0dj3P5","link":"MPm2rJ","indent":"-fB7EW","selected-mark":"kJ2s73","selectedMark":"kJ2s73"};
 
 var IDropdownControlKeys;
 (function (IDropdownControlKeys) {
@@ -2309,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();
@@ -2376,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),
@@ -2407,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)
@@ -2419,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":"GC19EI","mode-block":"J5dlRj","modeBlock":"J5dlRj","mode-inline":"cB0EHs","modeInline":"cB0EHs","padding-0":"rgSnJT","padding0":"rgSnJT","padding-6":"GQZfvV","padding6":"GQZfvV","padding-12":"_8wkABy","padding12":"_8wkABy","padding-18":"N2U9gX","padding18":"N2U9gX"};
+var css$$ = {"root":"_7ym0Q1","mode-block":"mZZfmW","modeBlock":"mZZfmW","mode-inline":"ILmBGP","modeInline":"ILmBGP","padding-0":"mQI3xm","padding0":"mQI3xm","padding-6":"gBI21x","padding6":"gBI21x","padding-12":"n2bYZo","padding12":"n2bYZo","padding-18":"ufPX2E","padding18":"ufPX2E"};
 
 function applyAccordionMods(mods) {
     return [
@@ -2439,7 +2451,7 @@ const Accordion = /* @__PURE__ */withMods(uuiComponents.Accordion, applyAccordio
     dropdownIcon: mods.dropdownIcon !== null && settings.accordion.icons.dropdownIcon,
 }));
 
-var css$_ = {"root":"lymBPc","align-items":"sBduCE","alignItems":"sBduCE","justify-content":"chMoMP","justifyContent":"chMoMP","border-top":"Q-QoP4","borderTop":"Q-QoP4","border-bottom":"Pi-9hw","borderBottom":"Pi-9hw","top-shadow":"_64ECK2","topShadow":"_64ECK2","padding":"iJ-cwy","margin":"R4ZPZb","vPadding":"_3OPJQL","column-gap":"AOuvsp","columnGap":"AOuvsp","row-gap":"IZaB2u","rowGap":"IZaB2u","spacing":"an5wua"};
+var css$_ = {"root":"kBfmQo","align-items":"_0A4ApT","alignItems":"_0A4ApT","justify-content":"MQYnY7","justifyContent":"MQYnY7","border-top":"V3T823","borderTop":"V3T823","border-bottom":"l9pBWT","borderBottom":"l9pBWT","top-shadow":"ANDXxq","topShadow":"ANDXxq","padding":"tod-Y-","margin":"P9tAeR","vPadding":"nhJR-m","column-gap":"Zw4aJb","columnGap":"Zw4aJb","row-gap":"v5UPqo","rowGap":"v5UPqo","spacing":"hqzxt0"};
 
 const FlexCell = /* @__PURE__ */withMods(FlexCell$1, () => [css$_.flexCell]);
 
@@ -2491,7 +2503,7 @@ const FlexRow = /* @__PURE__ */forwardRef((props, ref) => {
         } }, props.children));
 });
 
-var css$Z = {"root":"Fk9gyQ","margin-24":"tAqyRo","margin24":"tAqyRo","padding-12":"uLU0kE","padding12":"uLU0kE","padding-24":"EZlU17","padding24":"EZlU17","shadow":"q2R8LA","uui-surface-main":"IZIQGr","uuiSurfaceMain":"IZIQGr"};
+var css$Z = {"root":"TuJfIF","margin-24":"Cwcy31","margin24":"Cwcy31","padding-12":"k7GOV-","padding12":"k7GOV-","padding-24":"nZ9A0H","padding24":"nZ9A0H","shadow":"V-n1gg","uui-surface-main":"KPnxB5","uuiSurfaceMain":"KPnxB5"};
 
 const Panel = /* @__PURE__ */withMods(VPanel, (props) => [
     'uui-panel',
@@ -2501,7 +2513,7 @@ const Panel = /* @__PURE__ */withMods(VPanel, (props) => [
     props.background && css$Z[`uui-${props.background}`],
 ]);
 
-var css$Y = {"root":"R4VcpT"};
+var css$Y = {"root":"_6QFAQ6"};
 
 function applyLabeledInputMods(mods) {
     return [
@@ -2523,7 +2535,7 @@ function applyLabeledInputProps(props) {
 }
 const LabeledInput = /* @__PURE__ */withMods(uuiComponents.LabeledInput, applyLabeledInputMods, applyLabeledInputProps);
 
-var css$X = {"root":"ReR-6A"};
+var css$X = {"root":"hosaSA"};
 
 function RadioGroup(props) {
     const direction = props.direction || 'vertical';
@@ -2538,7 +2550,7 @@ function RadioGroup(props) {
     })));
 }
 
-var css$W = {"root":"yPmEqK","viewport":"yOo6xt"};
+var css$W = {"root":"N728oL","viewport":"LFYBLp"};
 
 var uuiScrollbars;
 (function (uuiScrollbars) {
@@ -2617,7 +2629,7 @@ const ScrollBars = /* @__PURE__ */forwardRef((props, ref) => {
 });
 ScrollBars.displayName = 'ScrollBars';
 
-var css$V = {"scroll-container":"-iJzit","scrollContainer":"-iJzit","list-container":"TQ5X2A","listContainer":"TQ5X2A"};
+var css$V = {"scroll-container":"vyk4vm","scrollContainer":"vyk4vm","list-container":"_4LfZz2","listContainer":"_4LfZz2"};
 
 const VirtualList = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const { listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef, } = useVirtualList({
@@ -2626,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` } },
@@ -2637,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}`]);
@@ -2670,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":"_24tVSx"};
+var css$U = {"root":"c-RFxN"};
 
 function CheckboxGroup(props) {
     const currentValue = props.value || [];
@@ -2772,7 +2806,7 @@ const Tabs = /* @__PURE__ */forwardRef((props, ref) => {
 });
 Tabs.displayName = 'Tabs';
 
-var css$T = {"root":"lRFOCl","modal-blocker":"M99ISm","modalBlocker":"M99ISm","animateModalBlocker":"yRsqBN","modal":"_4QtQh1","modal-footer":"TZcP8l","modalFooter":"TZcP8l","border-top":"_9gR2FJ","borderTop":"_9gR2FJ","modal-header":"E6QdWb","modalHeader":"E6QdWb","border-bottom":"RyEVCf","borderBottom":"RyEVCf"};
+var css$T = {"root":"vJUISY","modal-blocker":"_1FrNGk","modalBlocker":"_1FrNGk","animateModalBlocker":"yeonBH","modal":"dEOG-e","modal-footer":"HAPRNy","modalFooter":"HAPRNy","border-top":"hkV0VA","borderTop":"hkV0VA","modal-header":"b454X3","modalHeader":"b454X3","border-bottom":"gbrw-4","borderBottom":"gbrw-4"};
 
 const ModalBlocker = /* @__PURE__ */withMods(ModalBlocker$1, () => [css$T.modalBlocker]);
 const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$T.root, css$T.modal], (props) => {
@@ -2879,6 +2913,7 @@ const TREE_SHAKEABLE_INIT = () => ({
         columnHeader: {
             collapseAllTooltip: 'Collapse All',
             expandAllTooltip: 'Expand All',
+            filterActiveLabel: 'filter active',
         },
     },
     pickerFilterHeader: {
@@ -2964,7 +2999,7 @@ const TREE_SHAKEABLE_INIT = () => ({
 });
 const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
 
-var css$S = {"root":"_5QexGN","icon-wrapper":"kdiQJ7","iconWrapper":"kdiQJ7","action-wrapper":"dIMAuL","actionWrapper":"dIMAuL","close-icon":"qmU4i0","closeIcon":"qmU4i0","main-path":"_1tBY8r","mainPath":"_1tBY8r","content":"g6VUBm","close-wrapper":"JR0GPn","closeWrapper":"JR0GPn","clear-notifications":"u-uzl2","clearNotifications":"u-uzl2"};
+var css$S = {"root":"_-4Cfjm","icon-wrapper":"DkWk0Z","iconWrapper":"DkWk0Z","action-wrapper":"INd3Dw","actionWrapper":"INd3Dw","close-icon":"ydTlc1","closeIcon":"ydTlc1","main-path":"IyGbbt","mainPath":"IyGbbt","content":"WQiAXv","close-wrapper":"evWKsT","closeWrapper":"evWKsT","clear-notifications":"KPFLgX","clearNotifications":"KPFLgX"};
 
 const NotificationCard = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const notificationCardNode = React__default.useRef(null);
@@ -2997,7 +3032,7 @@ function ClearNotification() {
         React__default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
 }
 
-var css$R = {"footer":"_60qdeS"};
+var css$R = {"footer":"fxjZ3J"};
 
 class ConfirmationModal extends React.Component {
     render() {
@@ -3039,7 +3074,7 @@ function useReliableForceUpdate() {
     return red[1];
 }
 
-var css$Q = {"root":"tC19nI","container":"giKzNJ"};
+var css$Q = {"root":"wUEcRD","container":"Hsf-Hn"};
 
 const defaultFormat = 'MMM D, YYYY';
 const valueFormat = 'YYYY-MM-DD';
@@ -3266,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":"XdnSRh"};
+var css$P = {"root":"U9XqRW"};
 
 function applyDateSelectionMods() {
     return [css$P.root, `uui-size-${settings.datePicker.sizes.body}`];
 }
 const Calendar = /* @__PURE__ */withMods(Calendar$1, applyDateSelectionMods);
 
-var css$O = {"root":"WYVM0E"};
+var css$O = {"root":"I6IzHT"};
 
 const uuiDatePickerBody = {
     wrapper: 'uui-datepicker-body-wrapper',
@@ -3355,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));
@@ -3396,7 +3435,7 @@ function DatePickerComponent(props, ref) {
 }
 const DatePicker = /* @__PURE__ */React__default.forwardRef(DatePickerComponent);
 
-var css$N = {"date-input":"Zfzja8","dateInput":"Zfzja8","root":"_4FuhU8","separator":"P3lURM"};
+var css$N = {"date-input":"zbGePZ","dateInput":"zbGePZ","root":"qkA0bQ","separator":"cwATGW"};
 
 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));
@@ -3473,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":"tmO-ge"};
+var css$M = {"root":"tJFWNa"};
 
 const uuiPresets = {
     container: 'uui-presets-container',
@@ -3493,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":"_9l4AAN","container":"ZV5zAH","day-selection":"_4oVloa","daySelection":"_4oVloa","from-picker":"iNdUuh","fromPicker":"iNdUuh","to-picker":"_3DJQ-h","toPicker":"_3DJQ-h","bodes-wrapper":"RCavWs","bodesWrapper":"RCavWs","blocker":"ZQ-DVq"};
+var css$L = {"root":"KfhmE7","container":"_6EhKm5","day-selection":"_2BhQNw","daySelection":"_2BhQNw","from-picker":"jWhtwQ","fromPicker":"jWhtwQ","to-picker":"ZkHpUy","toPicker":"ZkHpUy","bodes-wrapper":"bpnimp","bodesWrapper":"bpnimp","blocker":"_3uKj40"};
 
 const uuiRangeDatePickerBody = {
     inRange: 'uui-range-datepicker-in-range',
@@ -3695,7 +3734,7 @@ const getDayState = (day, selectedDate) => {
     };
 };
 
-var css$K = {"dropdown-container":"NRIhlE","dropdownContainer":"NRIhlE"};
+var css$K = {"dropdown-container":"EBaWD4","dropdownContainer":"EBaWD4"};
 
 function RangeDatePickerComponent(props, ref) {
     const { value: _value, format = defaultFormat, size = settings.rangeDatePicker.sizes.default } = props;
@@ -3763,7 +3802,7 @@ function RangeDatePickerComponent(props, ref) {
 }
 const RangeDatePicker = /* @__PURE__ */React__default.forwardRef(RangeDatePickerComponent);
 
-var css$J = {"root":"bhPexW","blocker":"g5DvHx","marker":"efw3mZ","top":"zdbHm3","bottom":"eGCZfA","left":"eXy3xa","right":"fVoeKE","inside":"VsLu-1"};
+var css$J = {"root":"_8mTpTX","blocker":"RRjkSj","marker":"nmLqMg","top":"b21LQG","bottom":"-elVju","left":"_4N4xvg","right":"n6QF1r","inside":"_5BsENF"};
 
 function DropMarker(props) {
     return props.isDndInProgress
@@ -3778,9 +3817,9 @@ function DropMarker(props) {
         : null;
 }
 
-var css$I = {"root":"EAAX-K","search-wrapper":"hNmjU-","searchWrapper":"hNmjU-","no-data":"nxK7fS","noData":"nxK7fS"};
+var css$I = {"root":"DwPHmh","search-wrapper":"OjrP2d","searchWrapper":"OjrP2d","no-data":"TpcuwJ","noData":"TpcuwJ","empty-status-announcer":"qIUtil","emptyStatusAnnouncer":"qIUtil"};
 
-var css$H = {"picker-row":"u5AZZ6","pickerRow":"u5AZZ6","align-widgets-top":"a-x7UY","alignWidgetsTop":"a-x7UY","row-content":"b3gd1w","rowContent":"b3gd1w","align-widgets-center":"LeeyZB","alignWidgetsCenter":"LeeyZB","icon-container":"P0KnuX","iconContainer":"P0KnuX","content-wrapper":"_8Cr--u","contentWrapper":"_8Cr--u","icon-wrapper":"BojYAa","iconWrapper":"BojYAa","icon-default":"Lgt4cy","iconDefault":"Lgt4cy","selected-mark":"Q-7L53","selectedMark":"Q-7L53"};
+var css$H = {"picker-row":"aQsjTG","pickerRow":"aQsjTG","align-widgets-top":"xjaj4p","alignWidgetsTop":"xjaj4p","row-content":"wIE0xi","rowContent":"wIE0xi","align-widgets-center":"hXejLh","alignWidgetsCenter":"hXejLh","icon-container":"a3BR0j","iconContainer":"a3BR0j","content-wrapper":"Cz7JO-","contentWrapper":"Cz7JO-","icon-wrapper":"TsnJWk","iconWrapper":"TsnJWk","icon-default":"_4Jirf9","iconDefault":"_4Jirf9","selected-mark":"_-7iz-1","selectedMark":"_-7iz-1"};
 
 const mergeHighlightRanges = (ranges) => {
     const mergedRanges = [];
@@ -3847,7 +3886,7 @@ const getHighlightedSearchMatches = (str, search) => {
     return getDecoratedText(str, ranges);
 };
 
-var css$G = {"root":"tgXlxW","column-gap":"jG030A","columnGap":"jG030A","title":"ZoRkwN","subtitle":"LtQgHD","disabled":"Uzd3jW","multiline":"yvfy1-"};
+var css$G = {"root":"xK-3QQ","column-gap":"_8LaI2z","columnGap":"_8LaI2z","title":"awT96p","subtitle":"CgOIQs","disabled":"_3OrgEX","multiline":"_01ElBj"};
 
 function PickerItem(props) {
     const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, } = props;
@@ -3936,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?.();
@@ -4025,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,
@@ -4065,7 +4112,7 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = /* @__PURE__ */React__default.memo(DataPickerFooterImpl);
 
-var css$F = {"header":"NjrBsd","title":"EjGZFV","close":"d4-sql"};
+var css$F = {"header":"_3pafpm","title":"X-mCig","close":"O1kxO5"};
 
 const DataPickerMobileHeaderImpl = (props) => {
     const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
@@ -4075,7 +4122,7 @@ const DataPickerMobileHeaderImpl = (props) => {
 };
 const DataPickerMobileHeader = /* @__PURE__ */React__default.memo(DataPickerMobileHeaderImpl);
 
-var css$E = {"done":"QAHFPg","container":"WeVuSZ"};
+var css$E = {"done":"C-hjqE","container":"qfSqGc"};
 
 const PickerBodyMobileView = (props) => {
     const isMobileView = isMobile();
@@ -4087,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":"-WaTiC","subHeaderWrapper":"-WaTiC","switch":"vgUYG7","search":"Kcvg3m","no-found-modal-container":"Z-kRp1","noFoundModalContainer":"Z-kRp1","no-found-modal-container-icon":"nB6TFX","noFoundModalContainerIcon":"nB6TFX","no-found-modal-container-text":"kud4P-","noFoundModalContainerText":"kud4P-","body":"qDPF85"};
+var css$D = {"sub-header-wrapper":"VB-vMc","subHeaderWrapper":"VB-vMc","switch":"tcNMre","search":"_3jEP3G","no-found-modal-container":"BBODB5","noFoundModalContainer":"BBODB5","no-found-modal-container-icon":"U4kWfu","noFoundModalContainerIcon":"U4kWfu","no-found-modal-container-text":"w2F10j","noFoundModalContainerText":"w2F10j","body":"Ps3Ami"};
 
 function PickerModal(props) {
     const { view, selection, dataSourceStateLens, dataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = usePickerModal(props);
@@ -4148,7 +4195,7 @@ function PickerModal(props) {
             React__default.createElement(ModalFooter, null, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$C = {"tooltip":"sVSMmu","noShrink":"q5FRqd"};
+var css$C = {"tooltip":"sDXKuB","noShrink":"iwYIz2"};
 
 const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     const tagProps = {
@@ -4167,7 +4214,7 @@ const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     }
 });
 
-var css$B = {"root":"EXkD-M"};
+var css$B = {"root":"HaJ1QH"};
 
 const defaultMode = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
@@ -4249,7 +4296,7 @@ function PickerInputComponent(props, ref) {
 }
 const PickerInput = /* @__PURE__ */React__default.forwardRef(PickerInputComponent);
 
-var css$A = {"row":"FnwVP-"};
+var css$A = {"row":"wbZsb-"};
 
 function PickerListRow(props) {
     let label;
@@ -4269,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":"zKr2jP"};
+var css$z = {"root":"_19OH28"};
 
 function PickerList(props) {
     const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, getModalTogglerCaption, } = usePickerList(props);
@@ -4304,7 +4351,7 @@ function PickerList(props) {
             }, selectedRows)));
 }
 
-var css$y = {"root":"wmTpKH","wrapper":"_3SQ0tU","align-widgets-top":"KholVD","alignWidgetsTop":"KholVD","align-widgets-center":"_8BvvB1","alignWidgetsCenter":"_8BvvB1"};
+var css$y = {"root":"_2-pNpM","wrapper":"_6wASpZ","align-widgets-top":"_9NUjzI","alignWidgetsTop":"_9NUjzI","align-widgets-center":"enpFa4","alignWidgetsCenter":"enpFa4"};
 
 function DataTableCell(initialProps) {
     const props = { ...initialProps };
@@ -4354,7 +4401,7 @@ function DataTableCell(initialProps) {
     return React.createElement(DataTableCell$1, { ...props });
 }
 
-var css$x = {"root":"nLHLB5"};
+var css$x = {"root":"Hg853r"};
 
 // 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.
@@ -4370,14 +4417,16 @@ const DataTableRow = /* @__PURE__ */withMods(DataTableRow$1, ({ borderBottom = t
     ];
 }, () => propsMods);
 
-var css$w = {"sorting-panel-container":"EmzCRJ","sortingPanelContainer":"EmzCRJ"};
+var css$w = {"sorting-panel-container":"_0NVWU2","sortingPanelContainer":"_0NVWU2"};
 
 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);
 
@@ -4390,113 +4439,114 @@ const ColumnHeaderDropdownImpl = (props) => {
 };
 const ColumnHeaderDropdown = /* @__PURE__ */React__default.memo(ColumnHeaderDropdownImpl);
 
-var css$v = {"root":"mKnkBv","caption-wrapper":"Ch78UX","captionWrapper":"Ch78UX","sort-icon":"n22IQI","sortIcon":"n22IQI","dropdown-icon":"M7VFve","dropdownIcon":"M7VFve","infoIcon":"D7Hgfd","sortInActive":"Q6pnMU","align-right":"dmfN9r","alignRight":"dmfN9r","align-center":"rk2LcT","alignCenter":"rk2LcT","caption":"JsHZsm","truncate":"xhOP-F","upper-case":"A-5jF3","upperCase":"A-5jF3","checkbox":"U-WdUO","icon":"qy8MdU","fold-all-icon":"VG9oQE","foldAllIcon":"VG9oQE","cell-tooltip":"_5HuM3H","cellTooltip":"_5HuM3H","resizing-marker":"_2jAD-J","resizingMarker":"_2jAD-J","pinned-right":"_6Ibbi0","pinnedRight":"_6Ibbi0","draggable":"ughYjh","ghost":"QHNfl-","is-dragged-out":"jxqvhj","isDraggedOut":"jxqvhj","dnd-marker-left":"u7Q6Qj","dndMarkerLeft":"u7Q6Qj","dnd-marker-right":"OQhn0O","dndMarkerRight":"OQhn0O","cell-tooltip-wrapper":"jGsFt2","cellTooltipWrapper":"jGsFt2","cell-tooltip-text":"oONZGp","cellTooltipText":"oONZGp","tooltip-caption":"rMc-oB","tooltipCaption":"rMc-oB","tooltip-info":"_5uo0nu","tooltipInfo":"_5uo0nu"};
+var css$v = {"root":"vmlKoK","caption-wrapper":"YyIFNf","captionWrapper":"YyIFNf","sort-icon":"xUPV5I","sortIcon":"xUPV5I","dropdown-icon":"HhfCk3","dropdownIcon":"HhfCk3","infoIcon":"EQmMij","sortInActive":"bqu4Tk","align-right":"BUEVZ1","alignRight":"BUEVZ1","align-center":"C4RZLh","alignCenter":"C4RZLh","caption":"n3EJt6","truncate":"_536Mw2","upper-case":"gP577i","upperCase":"gP577i","checkbox":"XPmrob","icon":"o2LVVf","fold-all-icon":"ptp7yB","foldAllIcon":"ptp7yB","cell-tooltip":"asmbtw","cellTooltip":"asmbtw","resizing-marker":"T7V1Wc","resizingMarker":"T7V1Wc","pinned-right":"ugOZMg","pinnedRight":"ugOZMg","draggable":"HjRKRd","ghost":"TKuBtX","is-dragged-out":"Qpbd-3","isDraggedOut":"Qpbd-3","dnd-marker-left":"_72iSFu","dndMarkerLeft":"_72iSFu","dnd-marker-right":"jI09xo","dndMarkerRight":"jI09xo","cell-tooltip-wrapper":"r3buZY","cellTooltipWrapper":"r3buZY","cell-tooltip-text":"c3zcuU","cellTooltipText":"c3zcuU","tooltip-caption":"z7l0Jz","tooltipCaption":"z7l0Jz","tooltip-info":"i7Cerk","tooltipInfo":"i7Cerk"};
 
-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) }));
+        }
+    };
+    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,
+                    } })));
         }
-        return (React.createElement(DataTableHeaderCell$1, { ...this.props, renderCellContent: this.props.column.renderFilter ? this.renderCellWithFilter : this.renderCellContent }));
+    };
+    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":"pPb-jB","caption-wrapper":"ogYG0j","captionWrapper":"ogYG0j","align-center":"PDwe6v","alignCenter":"PDwe6v","caption":"DJgyCM","truncate":"iXTK5U","upper-case":"UswDSS","upperCase":"UswDSS","group-cell-tooltip":"pF-6Os","groupCellTooltip":"pF-6Os","group-cell-tooltip-wrapper":"_1Lia3-","groupCellTooltipWrapper":"_1Lia3-","group-cell-tooltip-text":"x5zHcL","groupCellTooltipText":"x5zHcL","tooltip-caption":"nL6NLI","tooltipCaption":"nL6NLI","tooltip-info":"HhhtTx","tooltipInfo":"HhhtTx"};
+var css$u = {"root":"_4zIJDX","caption-wrapper":"lqk35X","captionWrapper":"lqk35X","align-center":"L-pMol","alignCenter":"L-pMol","caption":"kH2KWa","truncate":"_6kpJB7","upper-case":"s11sgv","upperCase":"s11sgv","group-cell-tooltip":"haAlHc","groupCellTooltip":"haAlHc","group-cell-tooltip-wrapper":"vAJFy4","groupCellTooltipWrapper":"vAJFy4","group-cell-tooltip-text":"nXaIdp","groupCellTooltipText":"nXaIdp","tooltip-caption":"lxBBNo","tooltipCaption":"lxBBNo","tooltip-info":"Fve3YQ","tooltipInfo":"Fve3YQ"};
 
 class DataTableHeaderGroupCell extends React.Component {
     constructor() {
@@ -4536,7 +4586,7 @@ class DataTableHeaderGroupCell extends React.Component {
     }
 }
 
-var css$t = {"root":"a8rBQY"};
+var css$t = {"root":"TPytFN"};
 
 const DataTableHeaderRow = /* @__PURE__ */withMods(DataTableHeaderRow$1, () => [css$t.root, 'uui-dt-vars'], (mods) => {
     return ({
@@ -4644,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":"Wo3kzg","header":"W77D0P","title":"O-eEci","removeButton":"seVjF4","with-search":"KspFtz","withSearch":"KspFtz"};
+var css$s = {"body":"_5UWfHP","header":"_160Chm","title":"Roa-Sf","removeButton":"yBlGQC","with-search":"aoPvSm","withSearch":"aoPvSm"};
 
 function FilterColumnBody(props) {
     const [predicate, setPredicate] = useState(getDefaultPredicate(props.predicates, props.value));
@@ -4705,7 +4755,7 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var css$r = {"unpin-icon":"_1Ylry-","unpinIcon":"_1Ylry-","pin-toggler-icon":"WYLTuX","pinTogglerIcon":"WYLTuX"};
+var css$r = {"unpin-icon":"_9MhHxU","unpinIcon":"_9MhHxU","pin-toggler-icon":"_2TBFen","pinTogglerIcon":"_2TBFen"};
 
 function PinIconButton(props) {
     const i18nLocal = i18n.tables.columnsConfigurationModal;
@@ -4756,7 +4806,7 @@ function getUnpinIcon(params) {
     }
 }
 
-var css$q = {"row-wrapper":"BRohev","rowWrapper":"BRohev","pin-icon-button":"Z0RdBI","pinIconButton":"Z0RdBI","not-pinned":"_5ebTVx","notPinned":"_5ebTVx","checkbox":"ZtJDFF","drag-handle":"gTlWH1","dragHandle":"gTlWH1","dnd-disabled":"_3LlTeT","dndDisabled":"_3LlTeT"};
+var css$q = {"row-wrapper":"c4oJ5o","rowWrapper":"c4oJ5o","pin-icon-button":"qrT-GF","pinIconButton":"qrT-GF","not-pinned":"YWMo9k","notPinned":"YWMo9k","checkbox":"OLPBwf","drag-handle":"qRrbbV","dragHandle":"qRrbbV","dnd-disabled":"Vf4stl","dndDisabled":"Vf4stl"};
 
 const ColumnRow = /* @__PURE__ */React.memo(function ColumnRow(props) {
     const { column } = props;
@@ -4790,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":"-wGL22","main-panel":"MoWf5P","mainPanel":"MoWf5P","group":"U1U-he","group-title":"VU7acp","groupTitle":"VU7acp","group-items":"muIn-v","groupItems":"muIn-v","no-data":"O99bu-","noData":"O99bu-","no-data-title":"QxvQ96","noDataTitle":"QxvQ96","no-data-sub-title":"Npcqlh","noDataSubTitle":"Npcqlh","h-divider":"qWrWOP","hDivider":"qWrWOP","search-area":"xAd54e","searchArea":"xAd54e","subgroup-accordion":"wnZDbW","subgroupAccordion":"wnZDbW","subgroup":"zSxw5A","subgroup-title":"_8eHocM","subgroupTitle":"_8eHocM"};
+var css$p = {"root":"_8ziuPb","main-panel":"pUSNlg","mainPanel":"pUSNlg","group":"_5QHtvv","group-title":"z-zJ1I","groupTitle":"z-zJ1I","group-items":"WZrmiC","groupItems":"WZrmiC","no-data":"_-7RPjt","noData":"_-7RPjt","no-data-title":"ZWVXtn","noDataTitle":"ZWVXtn","no-data-sub-title":"BEHMD4","noDataSubTitle":"BEHMD4","h-divider":"tCTraj","hDivider":"tCTraj","search-area":"deBq4-","searchArea":"deBq4-","subgroup-accordion":"eKhFYl","subgroupAccordion":"eKhFYl","subgroup":"crHg04","subgroup-title":"CtuIxj","subgroupTitle":"CtuIxj"};
 
 const renderGroupTitle = (title, amount) => (React.createElement(FlexRow, { cx: css$p.group },
     React.createElement(Text, { size: "none", cx: css$p.groupTitle }, title),
@@ -4893,7 +4943,7 @@ const getChildrenAndRest = (row, rows) => {
     return [children, rest];
 };
 
-var css$o = {"listContainer":"Ng-O--","header":"STVLJ3","group":"_9p4TG5","stickyHeader":"kMhqu1"};
+var css$o = {"listContainer":"ElGYjG","header":"iYKCM4","group":"jOAK3i","stickyHeader":"ik0HAK"};
 
 function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
     const rowRef = useRef(undefined);
@@ -4933,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":"wdzXqF","sticky-header":"O8TivO","stickyHeader":"O8TivO","no-results":"zccqlV","noResults":"zccqlV","icon":"ExKJUn","title":"_00tHys"};
+var css$n = {"root":"G8RWom","sticky-header":"gc4i9W","stickyHeader":"gc4i9W","no-results":"FgxHcI","noResults":"FgxHcI","icon":"SR40c4","title":"oxfrPp"};
 
 function DataTable(props) {
     const { uuiModals } = useUuiContext();
@@ -4975,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
@@ -4982,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":"Hm8PuR","title-wrapper":"eNq-vK","titleWrapper":"eNq-vK","title":"_6jDmxz","text-wrapper":"-Ty3ot","textWrapper":"-Ty3ot","selection":"VkuBX8","postfix":"_19-Awi","selected":"_6WpmvX"};
+var css$m = {"root":"HYyHRK","title-wrapper":"zDBS6c","titleWrapper":"zDBS6c","title":"wVhTWU","text-wrapper":"_6q3L9l","textWrapper":"_6q3L9l","selection":"_4lQgpu","postfix":"FLBR3p","selected":"_-6KA54"};
 
 const FilterPanelItemToggler = /* @__PURE__ */React.forwardRef((props, ref) => {
     const togglerPickerOpened = (e) => {
@@ -5207,9 +5258,10 @@ function FilterRangeDatePickerBody(props) {
         renderFooter()));
 }
 
-var css$l = {"container":"kLHvmW"};
+var css$l = {"container":"orEEwq"};
 
-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)
@@ -5258,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()));
 }
 
@@ -5345,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 })));
     };
@@ -5518,7 +5570,7 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = /* @__PURE__ */React__default.memo(FiltersToolbarImpl);
 
-var css$k = {"delete-button":"ywoFk2","deleteButton":"ywoFk2","tab-button":"e6rdsw","tabButton":"e6rdsw","targetOpen":"g1kEAC"};
+var css$k = {"delete-button":"IJ-WfK","deleteButton":"IJ-WfK","tab-button":"_0QRP2Z","tabButton":"_0QRP2Z","targetOpen":"_4x5oss"};
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = useUuiContext();
@@ -5594,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":"kH-0uK","presetInputCell":"kH-0uK","preset-input":"qOLjPK","presetInput":"qOLjPK"};
+var css$j = {"preset-input-cell":"jnG-oN","presetInputCell":"jnG-oN","preset-input":"aw-ooU","presetInput":"aw-ooU"};
 
 function PresetInput(props) {
     const [presetCaption, setPresetCaption] = useState(props.preset?.name || '');
@@ -5621,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":"Q9z2cO","activePreset":"M9Ekkb"};
+var css$i = {"preset":"-Pdaed","activePreset":"YIGgQV"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = useState(false);
@@ -5646,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":"psaU2b","dropdownDeleteIcon":"_1C98GT","presetsWrapper":"YyiMSF","addPresetContainer":"_1vbNzT","dropContainer":"hwx7RR"};
+var css$h = {"divider":"_2BsGoM","dropdownDeleteIcon":"d-eK6V","presetsWrapper":"sydJlD","addPresetContainer":"PVULn-","dropContainer":"_5BRzuC"};
 
 function PresetsPanel(props) {
     const [isAddingPreset, setIsAddingPreset] = useState(false);
@@ -5695,9 +5747,9 @@ function PresetsPanel(props) {
             React__default.createElement(AdaptivePanel, { items: getPanelItems() }))));
 }
 
-var css$g = {"root":"-pZw-C"};
+var css$g = {"root":"vwmQsW"};
 
-var css$f = {"root":"J-8vFW","burger-content":"ys9pTk","burgerContent":"ys9pTk"};
+var css$f = {"root":"t9xCnd","burger-content":"Vwvhk5","burgerContent":"Vwvhk5"};
 
 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); }
@@ -5740,7 +5792,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
 };
 var ForwardRef$2 = /*#__PURE__*/forwardRef(SvgNavigationArrowDownOutline);
 
-var css$e = {"root":"kQQxrW","button-primary":"_4WvNm-","buttonPrimary":"_4WvNm-","button-secondary":"xUZ3ej","buttonSecondary":"xUZ3ej","hasIcon":"a3kPg-","dropdown":"dMLhvj"};
+var css$e = {"root":"sCDDzB","button-primary":"KgPtRd","buttonPrimary":"KgPtRd","button-secondary":"JfihMn","buttonSecondary":"JfihMn","hasIcon":"wad1rM","dropdown":"uEMwT-"};
 
 function applyBurgerButtonMods(props) {
     return [
@@ -5765,13 +5817,13 @@ const BurgerButton = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         }, dropdownIcon: ForwardRef$2 }));
 });
 
-var css$d = {"search-input":"-L1mHB","searchInput":"-L1mHB"};
+var css$d = {"search-input":"_1FCDfs","searchInput":"_1FCDfs"};
 
 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":"uZE1Yo","group-header":"pnNiZl","groupHeader":"pnNiZl","group-name":"ZDOhwI","groupName":"ZDOhwI","line":"_1xB48O"};
+var css$c = {"root":"f6WqOs","group-header":"_3rslt7","groupHeader":"_3rslt7","group-name":"c7lU1L","groupName":"c7lU1L","line":"M-6-se"};
 
 function BurgerGroupHeader(props) {
     return (React.createElement("div", { className: cx(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
@@ -5779,7 +5831,7 @@ function BurgerGroupHeader(props) {
         React.createElement("span", { className: css$c.groupName }, props.caption)));
 }
 
-var css$b = {"root":"wAu87D","type-primary":"YqCFc6","typePrimary":"YqCFc6","type-secondary":"dj8hE6","typeSecondary":"dj8hE6"};
+var css$b = {"root":"G9Rw8g","type-primary":"_5QAI7K","typePrimary":"_5QAI7K","type-secondary":"EZsVK0","typeSecondary":"EZsVK0"};
 
 const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { type, ...clickableProps } = props;
@@ -5807,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":"imC63H","dropdownBody":"imC63H"};
+var css$a = {"dropdown-body":"TJaXQe","dropdownBody":"TJaXQe"};
 
 function MainMenuDropdown(props) {
     const handleEscape = (e, onClose, isOpen) => {
@@ -5853,12 +5905,12 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
 };
 var ForwardRef$1 = /*#__PURE__*/forwardRef(SvgNavigationGlobalMenuOutlineOutline);
 
-var css$9 = {"global-menu-btn":"g-s03l","globalMenuBtn":"g-s03l","global-menu-icon":"C2qVsA","globalMenuIcon":"C2qVsA"};
+var css$9 = {"global-menu-btn":"tgu191","globalMenuBtn":"tgu191","global-menu-icon":"_63c8AS","globalMenuIcon":"_63c8AS"};
 
 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":"qWRbin","open":"getmvg","folding-arrow":"_2SFzKr","foldingArrow":"_2SFzKr"};
+var css$8 = {"container":"vtFSrU","open":"x6lWsx","folding-arrow":"LcX0du","foldingArrow":"LcX0du"};
 
 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 }),
@@ -5866,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":"HcXk6g","searchInput":"HcXk6g"};
+var css$7 = {"search-input":"UaOHWB","searchInput":"UaOHWB"};
 
 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":"RkR7Ot"};
+var css$6 = {"container":"KahbRG"};
 
 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":"JGyo-D"};
+var css$5 = {"root":"mVCr-H"};
 
 const Anchor = /* @__PURE__ */withMods(Anchor$1, () => [css$5.root]);
 
@@ -5932,7 +5984,7 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgFileCloudUploadFill);
 
-var css$4 = {"root":"_3Q0Uli","drop-start":"vXCYRc","dropStart":"vXCYRc","drop-over":"lOwBoy","dropOver":"lOwBoy","link":"DUqzjK","drop-area":"-r3-Cb","dropArea":"-r3-Cb","drop-caption":"XVsXbs","dropCaption":"XVsXbs","icon-blue":"CQ1kbm","iconBlue":"CQ1kbm"};
+var css$4 = {"root":"_8osKhn","drop-start":"xmDD2I","dropStart":"xmDD2I","drop-over":"KUbcxW","dropOver":"KUbcxW","link":"wVC2yH","drop-area":"NiXVjF","dropArea":"NiXVjF","drop-caption":"-vqUYd","dropCaption":"-vqUYd","icon-blue":"N-YC3C","iconBlue":"N-YC3C"};
 
 function DropSpot(props) {
     const getInfoText = typeof props.infoText === 'string'
@@ -5950,7 +6002,7 @@ function DropSpot(props) {
     return React.createElement(DropSpot$1, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
 }
 
-var css$3 = {"root":"TTJiKB"};
+var css$3 = {"root":"_2wZddl"};
 
 const SvgCircleProgress = /* @__PURE__ */React.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
@@ -5961,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":"LYc1f3","file-name":"heAc3B","fileName":"heAc3B","default-color":"FjPxV8","defaultColor":"FjPxV8","doc-color":"xfeXWx","docColor":"xfeXWx","xls-color":"SXP0kx","xlsColor":"SXP0kx","pdf-color":"ywxSLm","pdfColor":"ywxSLm","movie-color":"_4P8f75","movieColor":"_4P8f75","img-color":"ZTR5JD","imgColor":"ZTR5JD","mov-color":"V1ItQP","movColor":"V1ItQP","error-block":"_5iXAlQ","errorBlock":"_5iXAlQ","icons-block":"S5DUp-","iconsBlock":"S5DUp-"};
+var css$2 = {"root":"Xq1ST3","file-name":"u-1fTp","fileName":"u-1fTp","default-color":"GCyBb0","defaultColor":"GCyBb0","doc-color":"JPt-OP","docColor":"JPt-OP","xls-color":"J2GvnQ","xlsColor":"J2GvnQ","pdf-color":"hzwvnm","pdfColor":"hzwvnm","movie-color":"vPdLkZ","movieColor":"vPdLkZ","img-color":"voQrvi","imgColor":"voQrvi","mov-color":"x0nOhM","movColor":"x0nOhM","error-block":"-ERPrL","errorBlock":"-ERPrL","icons-block":"_3CpC1p","iconsBlock":"_3CpC1p"};
 
 const FileCard = /* @__PURE__ */React.forwardRef((props, ref) => {
     const [isLoadingShow, setIsLoadingShow] = React.useState(true);
@@ -6081,7 +6133,7 @@ const getErrorPageConfig = () => ({
     },
 });
 
-var css$1 = {"container":"X2BixO"};
+var css$1 = {"container":"d2-PXn"};
 
 const ErrorPage = (props) => {
     const isMobileScreen = isMobile();
@@ -6093,7 +6145,7 @@ const ErrorPage = (props) => {
             props?.supportLink && React__default.createElement("div", { className: "uui-error-support-link" }, props?.supportLink))));
 };
 
-var css = {"recovery-spinner":"l-h6dw","recoverySpinner":"l-h6dw","recovery-message":"u63POt","recoveryMessage":"u63POt","modal-blocker":"BzMFuC","modalBlocker":"BzMFuC","modalFadeIn":"yBpQnO"};
+var css = {"recovery-spinner":"ccX40-","recoverySpinner":"ccX40-","recovery-message":"KY4BiR","recoveryMessage":"KY4BiR","modal-blocker":"nxCg8a","modalBlocker":"nxCg8a","modalFadeIn":"J3Qd0w"};
 
 function ErrorHandler(props) {
     const { uuiNotifications, uuiModals, uuiApi } = useUuiContext();