@epam/uui 6.3.1 → 6.3.2-alpha.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import * as uuiComponents from '@epam/uui-components';
-import { Spinner as Spinner$1, Blocker as Blocker$1, Clickable, IconContainer, AvatarStack as AvatarStack$1, 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, 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';
 export { Avatar, DataTableCellContainer, FlexSpacer, IconContainer, MainMenuCustomElement, MainMenuLogo } from '@epam/uui-components';
-import { withMods, devLogger, uuiElement, useIsActive, uuiMod, cx as cx$1, uuiMarkers, IEditableDebouncer, isFocusReceiverInsideFocusLock, 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 { withMods, devLogger, uuiElement, useIsActive, uuiMod, cx as cx$1, uuiMarkers, IEditableDebouncer, UuiContext, getDir, isEventTargetInsideClickable, directionMode, useScrollShadows, useVirtualList, isMobile, i18n as i18n$1, useUuiContext, useLayoutEffectSafeForSsr, usePrevious, mobilePositioning, uuiDataTableHeaderCell, uuiDataTableHeaderGroupCell, DndActor, uuiDndState, useColumnsConfig, uuiScrollShadows, useForceUpdate, getSeparatedValue, useArrayDataSource, orderBy, getOrderBetween, Form as Form$1, useForm as useForm$1, formatBytes, useUuiError } from '@epam/uui-core';
 import * as React from 'react';
 import React__default, { forwardRef, useState, useEffect, useContext, useRef, useImperativeHandle, useMemo, useReducer, useCallback, Fragment } from 'react';
 import cx from 'classnames';
@@ -15,9 +15,9 @@ import updateLocale from 'dayjs/plugin/updateLocale.js';
 import objectSupport from 'dayjs/plugin/objectSupport';
 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 'overlayscrollbars/styles/overlayscrollbars.css';
-import isEqual from 'react-fast-compare';
 import FocusLock, { MoveFocusInside } from 'react-focus-lock';
 
 var _path$Q;
@@ -157,7 +157,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#hicei867eaayu7zc8_a)"
+    clipPath: "url(#q2djoiqxe9h8iuzzm_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"
@@ -178,7 +178,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: "hicei8f3owhh88tl_b",
+    id: "q2djoi2uryu1iuu9t_b",
     style: {
       maskType: "alpha"
     },
@@ -191,7 +191,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(#hicei8f3owhh88tl_b)",
+    mask: "url(#q2djoi2uryu1iuu9t_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
@@ -277,7 +277,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: "hicei867eaayu7zc8_a"
+    id: "q2djoiqxe9h8iuzzm_a"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
@@ -928,14 +928,14 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
 };
 var ForwardRef$4 = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
 
-var css$1w = {"root":"q81NXg","uui-spinner":"aSawZ7","uuiSpinner":"aSawZ7"};
+var css$1w = {"root":"Bl9hOf","uui-spinner":"bnA3SH","uuiSpinner":"bnA3SH"};
 
 function applySpinnerMods() {
     return [css$1w.root, 'uui-spinner'];
 }
 const Spinner = /* @__PURE__ */withMods(Spinner$1, applySpinnerMods);
 
-var css$1v = {"root":"tX0Cx5","loading-word":"LpvWng","loadingWord":"LpvWng","animated-loading":"WYZ6VB","animatedLoading":"WYZ6VB","skeleton_loading":"ymDJTM","skeletonLoading":"ymDJTM"};
+var css$1v = {"root":"DCq8iH","loading-word":"JQfEJn","loadingWord":"JQfEJn","animated-loading":"Ty4JJp","animatedLoading":"Ty4JJp","skeleton_loading":"XW8J42","skeletonLoading":"XW8J42"};
 
 const TextPlaceholder = (props) => {
     const pattern = ' ';
@@ -952,7 +952,7 @@ const TextPlaceholder = (props) => {
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
-var css$1u = {"root":"_6atkB5","line-height":"OQ81vG","lineHeight":"OQ81vG","font-size":"byoVK-","fontSize":"byoVK-"};
+var css$1u = {"root":"LSZ2uB","line-height":"_3b-6rS","lineHeight":"_3b-6rS","font-size":"XLRI9-","fontSize":"XLRI9-"};
 
 function applyTextMods(mods) {
     return [
@@ -979,7 +979,7 @@ const Text = /* @__PURE__ */withMods(uuiComponents.Text, applyTextMods, (props)
     };
 });
 
-var css$1t = {"root":"sL8FHg"};
+var css$1t = {"root":"Xnnwau"};
 
 const Blocker = /* @__PURE__ */withMods(Blocker$1, () => [css$1t.root], () => ({ renderSpinner: settings.blocker.renderSpinner }));
 
@@ -1484,7 +1484,7 @@ const settings = {
     textInput: textInputSettings,
 };
 
-var css$1s = {"root":"_6gOP-j"};
+var css$1s = {"root":"X4CBzV"};
 
 function applyButtonMods(mods) {
     return [
@@ -1502,7 +1502,7 @@ const Button = /* @__PURE__ */withMods(uuiComponents.Button, applyButtonMods, ()
     };
 });
 
-var css$1r = {"root":"uk-SwI"};
+var css$1r = {"root":"_5JNCLJ"};
 
 function applyIconButtonMods(props) {
     return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1r.root];
@@ -1539,7 +1539,7 @@ function getIconClass(props) {
     return [classList['has-left-icon'] ? 'uui-has-left-icon' : 'uui-no-left-icon', classList['has-right-icon'] ? 'uui-has-right-icon' : 'uui-no-right-icon'];
 }
 
-var css$1q = {"root":"_1lsq8k"};
+var css$1q = {"root":"yi6S3b"};
 
 const DEFAULT_COLOR = 'primary';
 const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
@@ -1569,7 +1569,7 @@ const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         props.isDropdown && (React.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1p = {"root":"_3rOezU"};
+var css$1p = {"root":"yROGWW"};
 
 const CountIndicator = /* @__PURE__ */forwardRef((props, ref) => {
     return (React__default.createElement("div", { ref: ref, className: cx([
@@ -1581,7 +1581,7 @@ const CountIndicator = /* @__PURE__ */forwardRef((props, ref) => {
         ]) }, props.caption));
 });
 
-var css$1o = {"root":"E4aDmz","withNotify":"hBLeej"};
+var css$1o = {"root":"O3l7EN","withNotify":"TZoVKu"};
 
 const TabButton = /* @__PURE__ */React__default.forwardRef((props, refExternal) => {
     const refLocal = React__default.useRef(null);
@@ -1628,13 +1628,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":"_3fCuzD","noLeftPadding":"AXdwiA","foldingArea":"FDqszx","onlyFoldable":"_36ENZj","captionWrapper":"hQUS4-","withNotify":"x0g2Et"};
+var css$1n = {"root":"aVsRXm","noLeftPadding":"IhSrqD","foldingArea":"vh8E9m","onlyFoldable":"-b8tdK","captionWrapper":"gGAkA5","withNotify":"MdNT7l"};
 
-var css$1m = {"root":"eICEHK"};
+var css$1m = {"root":"_7wzE7F"};
 
 const AvatarStack = /* @__PURE__ */withMods(AvatarStack$1, () => [css$1m.root]);
 
-var css$1l = {"root":"_6EKP9S"};
+var css$1l = {"root":"_2z5IFH"};
 
 const DEFAULT_FILL = 'solid';
 function applyBadgeMods(mods) {
@@ -1662,7 +1662,7 @@ const Badge = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1k = {"root":"r4wCPX"};
+var css$1k = {"root":"jburBf"};
 
 function applyTagMods(props) {
     return [
@@ -1677,44 +1677,58 @@ const Tag = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const styles = [applyTagMods(props), props.cx];
     const ClearIcon = props.clearIcon ? props.clearIcon : settings.tag.icons.clearIcon;
     const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.tag.icons.dropdownIcon;
+    const icon = (React__default.createElement(ControlIcon, { icon: props.icon, onClick: props.onIconClick, isDisabled: props.isDisabled, rawProps: {
+            'aria-label': 'Icon in input',
+        } }));
     return (React__default.createElement(Clickable, { ...props, rawProps: {
             'aria-haspopup': props.isDropdown,
             'aria-expanded': props.isOpen,
             ...props.rawProps,
         }, cx: styles, ref: ref },
-        props.icon && props.iconPosition !== 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
+        props.iconPosition !== 'right' && icon,
         props.caption && (React__default.createElement("div", { className: uuiElement.caption }, props.caption)),
         props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { color: (!props.color || props.color === 'neutral') ? 'white' : props.color, size: settings.tag.sizes.countIndicatorMap[(props.size || settings.tag.sizes.default)], caption: props.count })),
-        props.icon && props.iconPosition === 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
-        props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen })),
-        props.onClear && !props.isDisabled && (React__default.createElement(IconContainer, { cx: uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
+        props.iconPosition === 'right' && icon,
+        props.isDropdown && (React__default.createElement(ControlIcon, { icon: DropdownIcon, flipY: props.isOpen })),
+        props.onClear && !props.isDisabled && (React__default.createElement(ControlIcon, { cx: "uui-icon-cancel", icon: ClearIcon, onClick: props.onClear, rawProps: {
+                'aria-label': 'Remove tag',
+            } }))));
 });
 
-var css$1j = {"root":"mcySYP","page":"MOs1r0","spacer":"_5QEOm4","mode-ghost":"zODZyj","modeGhost":"zODZyj"};
+var css$1j = {"root":"_0fh9CR","page":"goMkC6","spacer":"ciNOgU","mode-ghost":"IdkVaR","modeGhost":"IdkVaR"};
 
 function Paginator(props) {
-    const renderPaginator = (params) => (React__default.createElement("nav", { role: "navigation", className: cx(css$1j.root, 'uui-paginator', `uui-size-${props.size || settings.paginator.sizes.default}`), ...params.rawProps },
-        React__default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.leftArrowIcon, onClick: params.goToPrev, isDisabled: params.isFirst || props.isDisabled, fill: "outline", color: "secondary" }),
-        params.pages.map((page, index) => {
-            if (page.type === 'spacer') {
-                return (React__default.createElement(Button, { cx: cx(css$1j.spacer, css$1j.page), size: props.size || settings.paginator.sizes.default, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1, isDisabled: props.isDisabled }));
-            }
-            else {
-                return (React__default.createElement(Button, { cx: cx(css$1j[`mode-${!page.isActive && 'ghost'}`], css$1j.page), size: props.size || settings.paginator.sizes.default, key: page.pageNumber, caption: page.pageNumber, onClick: () => page.onClick?.(), rawProps: { 'aria-current': page.isActive }, fill: (page.isActive && 'outline') || 'ghost', color: "primary", isDisabled: props.isDisabled }));
-            }
-        }),
-        React__default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.rightArrowIcon, onClick: params.goToNext, isDisabled: params.isLast || props.isDisabled, fill: "outline", color: "secondary" })));
+    const renderPaginator = (params) => (React__default.createElement("nav", { role: "navigation", className: cx('uui-paginator', `uui-size-${props.size || settings.paginator.sizes.default}`), ...params.rawProps },
+        React__default.createElement("ul", { className: css$1j.root },
+            React__default.createElement("li", null,
+                React__default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.leftArrowIcon, onClick: params.goToPrev, isDisabled: params.isFirst || props.isDisabled, fill: "outline", color: "secondary", rawProps: {
+                        'aria-label': 'Previous page',
+                    } })),
+            params.pages.map((page, index) => {
+                if (page.type === 'spacer') {
+                    return (React__default.createElement("li", { key: `${index}_spacer` },
+                        React__default.createElement(Button, { cx: cx(css$1j.spacer, css$1j.page), size: props.size || settings.paginator.sizes.default, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1, isDisabled: props.isDisabled })));
+                }
+                else {
+                    return (React__default.createElement("li", { key: page.pageNumber },
+                        React__default.createElement(Button, { cx: cx(css$1j[`mode-${!page.isActive && 'ghost'}`], css$1j.page), size: props.size || settings.paginator.sizes.default, caption: page.pageNumber, onClick: () => page.onClick?.(), rawProps: { 'aria-current': page.isActive }, fill: (page.isActive && 'outline') || 'ghost', color: "primary", isDisabled: props.isDisabled })));
+                }
+            }),
+            React__default.createElement("li", null,
+                React__default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.rightArrowIcon, onClick: params.goToNext, isDisabled: params.isLast || props.isDisabled, fill: "outline", color: "secondary", rawProps: {
+                        'aria-label': 'Next page',
+                    } })))));
     return React__default.createElement(Paginator$1, { ...props, render: renderPaginator });
 }
 
-var css$1i = {"root":"s3plZG","progress-bar":"vjJRo2","progressBar":"vjJRo2","progressBar-indeterminate":"WkHkwo","progressBarIndeterminate":"WkHkwo","size-12":"ZklAd2","size12":"ZklAd2","size-18":"H0w7Td","size18":"H0w7Td","size-24":"yudSfL","size24":"yudSfL"};
+var css$1i = {"root":"_6d6OGB","progress-bar":"jxhtGj","progressBar":"jxhtGj","progressBar-indeterminate":"UAUdqY","progressBarIndeterminate":"UAUdqY","size-12":"_3QoY-t","size12":"_3QoY-t","size-18":"PQU-uw","size18":"PQU-uw","size-24":"YvfI-u","size24":"YvfI-u"};
 
 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":"o4oDVE","striped":"_-4ThKH","animate-stripes":"Xf3EGd","animateStripes":"Xf3EGd","size-12":"_93guqG","size12":"_93guqG","size-18":"uI-ij-","size18":"uI-ij-","size-24":"aNbA-L","size24":"aNbA-L"};
+var css$1h = {"root":"jH4RT2","striped":"-lnGLM","animate-stripes":"x3NzSR","animateStripes":"x3NzSR","size-12":"_2kl6qt","size12":"_2kl6qt","size-18":"Vplio2","size18":"Vplio2","size-24":"ej5LE0","size24":"ej5LE0"};
 
 const DEFAULT_SIZE = '12';
 function applyProgressBarMods(mods) {
@@ -1729,14 +1743,14 @@ const ProgressBar = /* @__PURE__ */withMods(uuiComponents.ProgressBar, applyProg
     hideLabel: props.hideLabel || props.striped,
 }));
 
-var css$1g = {"root":"Eo7a2N"};
+var css$1g = {"root":"UkG-f-"};
 
 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":"_1DokyX"};
+var css$1f = {"root":"p4TRSc"};
 
 const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
     return (React__default.createElement("div", { ref: ref, className: cx([
@@ -1751,7 +1765,7 @@ const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
         React__default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
 });
 
-var css$1e = {"root":"aAyymM"};
+var css$1e = {"root":"i-SrE5"};
 
 function applyCheckboxMods(mods) {
     return [
@@ -1769,7 +1783,7 @@ const applyUUICheckboxProps = (props) => {
 };
 const Checkbox = /* @__PURE__ */withMods(uuiComponents.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$1d = {"root":"-DKtr0"};
+var css$1d = {"root":"_8z3otr"};
 
 function applyRadioInputMods(mods) {
     return [
@@ -1781,7 +1795,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":"BCYGx0"};
+var css$1c = {"root":"-GLwX5"};
 
 function applySwitchMods(mods) {
     return [
@@ -1805,7 +1819,7 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var textInputCss = {"root":"_9M-jBw"};
+var textInputCss = {"root":"qM-1eO"};
 
 const DEFAULT_MODE$3 = EditMode.FORM;
 function applyTextInputMods(mods) {
@@ -1830,7 +1844,7 @@ const SearchInput = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         } }));
 });
 
-var css$1b = {"root":"BRliMG"};
+var css$1b = {"root":"AXiiQ6"};
 
 const ControlGroup = /* @__PURE__ */withMods(ControlGroup$1, () => [css$1b.root, 'uui-control-group']);
 
@@ -1846,7 +1860,7 @@ function MultiSwitchComponent(props, ref) {
 }
 const MultiSwitch = /* @__PURE__ */React.forwardRef(MultiSwitchComponent);
 
-var css$1a = {"root":"MmanhM"};
+var css$1a = {"root":"qCGNj4"};
 
 const DEFAULT_MODE$2 = EditMode.FORM;
 function applyNumericInputMods(mods) {
@@ -1866,7 +1880,7 @@ const NumericInput = /* @__PURE__ */withMods(NumericInput$1, applyNumericInputMo
     };
 });
 
-var css$19 = {"root":"_4vjOWZ"};
+var css$19 = {"root":"KDENUR"};
 
 const DEFAULT_MODE$1 = EditMode.FORM;
 function applyTextAreaMods(mods) {
@@ -1907,7 +1921,7 @@ function TREE_SHAKEABLE_INIT$1() {
     };
 }
 
-var css$18 = {"root":"I9-1iQ"};
+var css$18 = {"root":"XUiEbr"};
 
 function applyDropdownContainerMods(mods) {
     return [
@@ -1918,7 +1932,7 @@ function applyDropdownContainerMods(mods) {
 }
 const DropdownContainer = /* @__PURE__ */withMods(uuiComponents.DropdownContainer, applyDropdownContainerMods);
 
-var css$17 = {"root":"ZOJ0YA","timepicker-input":"e-YUzP","timepickerInput":"e-YUzP","ltr-always":"_1Ox0Mq","ltrAlways":"_1Ox0Mq"};
+var css$17 = {"root":"T5Ik6C","timepicker-input":"gZdkaQ","timepickerInput":"gZdkaQ","ltr-always":"lmgoJn","ltrAlways":"lmgoJn"};
 
 const uuiTimePicker = {
     container: 'uui-timepicker-container',
@@ -2036,6 +2050,7 @@ function TimePickerComponent(props, ref) {
         value: valueToTimeString(props.value, props.format),
         inputValue: valueToTimeString(props.value, props.format),
     });
+    const targetRef = React__default.useRef(null);
     useEffect(() => {
         if (valueToTimeString(props.value, props.format) !== state.value) {
             const stringValue = valueToTimeString(props.value, props.format);
@@ -2063,7 +2078,10 @@ function TimePickerComponent(props, ref) {
     };
     const saveTime = (newTime) => {
         setState((prevState) => ({ ...prevState, inputValue: newTime }));
-        props.onValueChange(formatStringTimeToObject(newTime));
+        const newValue = formatStringTimeToObject(newTime);
+        if (!isEqual(props.value, newValue)) {
+            props.onValueChange(formatStringTimeToObject(newTime));
+        }
     };
     const getTimeFromInputValue = (newValue) => {
         const trimmedNewValue = newValue.trimStart();
@@ -2077,7 +2095,6 @@ function TimePickerComponent(props, ref) {
         saveTime(inputValue);
     };
     const handleFocus = (e) => {
-        onToggle(true);
         props.onFocus?.(e);
     };
     const handleInputChange = (newValue) => {
@@ -2090,9 +2107,6 @@ function TimePickerComponent(props, ref) {
         }
     };
     const handleBlur = (e) => {
-        if (isFocusReceiverInsideFocusLock(e))
-            return;
-        onToggle(false);
         props.onBlur?.(e);
         if (state.value === '' || state.inputValue === '') {
             props.onValueChange(null);
@@ -2100,19 +2114,37 @@ function TimePickerComponent(props, ref) {
         }
         state.value && state.inputValue && saveTime(state.value);
     };
+    const onKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            onToggle(true);
+        }
+        if (e.key === 'Escape' && state.isOpen) {
+            e.preventDefault();
+            e.stopPropagation();
+            onToggle(false);
+        }
+    };
     const renderInput = (inputProps) => {
-        return (React__default.createElement(TextInput, { ...inputProps, onClick: null, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$17.root, css$17.timepickerInput, props.inputCx], value: state.inputValue, onValueChange: handleInputChange, onCancel: !props.disableClear && onClear, onFocus: handleFocus, onBlur: handleBlur, isDropdown: false, placeholder: props.placeholder ? props.placeholder : getFormat(), mode: props.mode || DEFAULT_MODE, rawProps: props.rawProps?.input }));
+        return (React__default.createElement(TextInput, { ...inputProps, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$17.root, css$17.timepickerInput, props.inputCx], value: state.inputValue, onValueChange: handleInputChange, onCancel: !props.disableClear && onClear, onKeyDown: onKeyDown, onFocus: handleFocus, onBlur: handleBlur, isDropdown: false, placeholder: props.placeholder ? props.placeholder : getFormat(), mode: props.mode || DEFAULT_MODE, rawProps: props.rawProps?.input, ref: (node) => {
+                targetRef.current = node;
+                if (typeof inputProps.ref === 'function') {
+                    inputProps.ref(node);
+                }
+                else if (inputProps.ref && 'current' in inputProps.ref) {
+                    inputProps.ref.current = node;
+                }
+            } }));
     };
     const renderBody = (bodyProps) => {
         const { forwardedRef, onValueChange, ...timePickerBodyProps } = props;
-        return (!props.isDisabled && !props.isReadonly && (React__default.createElement(DropdownContainer, { ...bodyProps, focusLock: false },
+        return (!props.isDisabled && !props.isReadonly && (React__default.createElement(DropdownContainer, { ...bodyProps, shards: [targetRef] },
             React__default.createElement(TimePickerBody, { ...timePickerBodyProps, onValueChange: handleBodyValueChange, value: formatStringTimeToObject(state.value), rawProps: props.rawProps?.body, cx: props.bodyCx }))));
     };
     return (React__default.createElement(Dropdown$1, { renderTarget: (targetProps) => (props.renderTarget ? props.renderTarget(targetProps) : renderInput(targetProps)), renderBody: (bodyProps) => !props.isDisabled && !props.isReadonly && renderBody(bodyProps), onValueChange: !props.isDisabled && !props.isReadonly ? onToggle : null, value: state.isOpen, middleware: [offset(6)], ref: ref }));
 }
 const TimePicker = /* @__PURE__ */React__default.forwardRef(TimePickerComponent);
 
-var css$16 = {"root":"IoU-Ru"};
+var css$16 = {"root":"xYLQQo"};
 
 function applyInputAddonMods() {
     return [
@@ -2121,14 +2153,14 @@ function applyInputAddonMods() {
 }
 const InputAddon = /* @__PURE__ */withMods(InputAddon$1, applyInputAddonMods);
 
-var css$15 = {"root":"-AAfN7"};
+var css$15 = {"root":"EjLeYa"};
 
 function applySliderMods() {
     return [css$15.root, 'uui-color-neutral'];
 }
 const Slider = /* @__PURE__ */withMods(Slider$1, applySliderMods);
 
-var css$14 = {"root":"vuRe-y"};
+var css$14 = {"root":"_8pGKsh"};
 
 function applyTooltipMods(mods) {
     return [
@@ -2138,7 +2170,7 @@ function applyTooltipMods(mods) {
 }
 const Tooltip = /* @__PURE__ */withMods(uuiComponents.Tooltip, applyTooltipMods);
 
-var css$13 = {"root":"_3YNKaf","tooltip":"B2RbXC"};
+var css$13 = {"root":"vyiVij","tooltip":"dLB1JM"};
 
 function applyRatingMods(mods) {
     return [
@@ -2152,7 +2184,7 @@ const Rating = /* @__PURE__ */withMods(uuiComponents.Rating, applyRatingMods, (p
     Tooltip,
 }));
 
-var css$12 = {"drag-handle-wrapper":"p47bqp","dragHandleWrapper":"p47bqp","with-indent":"ifaQSF","withIndent":"ifaQSF","drag-handle":"JV6flR","dragHandle":"JV6flR","icon-container":"VpLXPg","iconContainer":"VpLXPg"};
+var css$12 = {"drag-handle-wrapper":"Jt1tzZ","dragHandleWrapper":"Jt1tzZ","with-indent":"ijgM1M","withIndent":"ijgM1M","drag-handle":"iCAOm6","dragHandle":"iCAOm6","icon-container":"xmdvRx","iconContainer":"xmdvRx"};
 
 function DataRowAddons(props) {
     const row = props.rowProps;
@@ -2169,15 +2201,20 @@ function DataRowAddons(props) {
         return (React__default.createElement("div", { key: "dh", className: cx(css$12.dragHandleWrapper, row.indent > 0 && css$12.withIndent), style: { width: row.indent > 0 ? (getIndent() + getWidth()) : 0 }, ...props.eventHandlers },
             React__default.createElement(DragHandle, { cx: css$12.dragHandle })));
     };
+    const handleFold = (e) => {
+        if (props.isFoldingFocusable && e.key === 'Enter') {
+            row.onFold(row);
+        }
+    };
     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 })),
-        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(IconContainer, { rawProps: {
+        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',
             }, key: "icon", icon: settings.dataTable.icons.body.foldingIcon, cx: [
                 uuiElement.foldingArrow, uuiMarkers.clickable, css$12.iconContainer,
-            ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), size: settings.dataTable.sizes.body.iconMap[props.size || settings.dataTable.sizes.body.row] }))))));
+            ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), onKeyDown: handleFold, size: settings.dataTable.sizes.body.iconMap[props.size || settings.dataTable.sizes.body.row], tabIndex: props.isFoldingFocusable ? 0 : undefined }))))));
 }
 
 function VerticalTabButtonComponent(props, ref) {
@@ -2229,7 +2266,7 @@ function VerticalTabButtonComponent(props, ref) {
 }
 const VerticalTabButton = /* @__PURE__ */React__default.forwardRef(VerticalTabButtonComponent);
 
-var css$11 = {"root":"qQbFvx","main-path":"kYDASw","mainPath":"kYDASw","content-wrapper":"d8lhmY","contentWrapper":"d8lhmY","content":"fo8ze2","action-wrapper":"U2aFgx","actionWrapper":"U2aFgx","icon-wrapper":"kIJK-A","iconWrapper":"kIJK-A","icon":"JApauQ","close-icon":"aA-jXD","closeIcon":"aA-jXD"};
+var css$11 = {"root":"XhC-dI","main-path":"gSGai1","mainPath":"gSGai1","content-wrapper":"p-VzwJ","contentWrapper":"p-VzwJ","content":"FJrj4b","action-wrapper":"NrqhOD","actionWrapper":"NrqhOD","icon-wrapper":"exM3RM","iconWrapper":"exM3RM","icon":"GiA1lc","close-icon":"Yv9d-K","closeIcon":"Yv9d-K"};
 
 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 },
@@ -2247,7 +2284,7 @@ const ErrorAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createE
 
 const Dropdown = /* @__PURE__ */withMods(Dropdown$1);
 
-var css$10 = {"submenu-root-item-rtl":"hR-QP9","submenuRootItemRtl":"hR-QP9","icon-after":"OQaI7N","iconAfter":"OQaI7N","submenu-root-item":"ARhjyS","submenuRootItem":"ARhjyS","icon-check":"MzRMYQ","iconCheck":"MzRMYQ","splitter-root":"tv1Dl5","splitterRoot":"tv1Dl5","splitter":"nCvWnG","header-root":"-wnjXT","headerRoot":"-wnjXT","item-root":"_7ohDM9","itemRoot":"_7ohDM9","icon":"OKtLUS","link":"_9cX1Ag","indent":"_3AiFA8","selected-mark":"QC7HMp","selectedMark":"QC7HMp"};
+var css$10 = {"submenu-root-item-rtl":"l5uxvV","submenuRootItemRtl":"l5uxvV","icon-after":"iOFLSJ","iconAfter":"iOFLSJ","submenu-root-item":"_207xrH","submenuRootItem":"_207xrH","icon-check":"ajtGcR","iconCheck":"ajtGcR","splitter-root":"g2IhYU","splitterRoot":"g2IhYU","splitter":"fHxQpU","header-root":"Pio5lB","headerRoot":"Pio5lB","item-root":"ZaYGBq","itemRoot":"ZaYGBq","icon":"nc3Fia","link":"QeyOEQ","indent":"_6T2R8z","selected-mark":"AfAZUI","selectedMark":"AfAZUI"};
 
 var IDropdownControlKeys;
 (function (IDropdownControlKeys) {
@@ -2381,7 +2418,7 @@ function DropdownMenuSwitchButton(props) {
         React__default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
 }
 
-var css$$ = {"root":"_6PQbDB","mode-block":"L2ukY9","modeBlock":"L2ukY9","mode-inline":"ECkuJa","modeInline":"ECkuJa","padding-0":"oOHXKp","padding0":"oOHXKp","padding-6":"SDIJ-V","padding6":"SDIJ-V","padding-12":"_94Ys8b","padding12":"_94Ys8b","padding-18":"Cy-Yzt","padding18":"Cy-Yzt"};
+var css$$ = {"root":"lQspfr","mode-block":"FOkdF5","modeBlock":"FOkdF5","mode-inline":"-UaZXh","modeInline":"-UaZXh","padding-0":"_8uVTti","padding0":"_8uVTti","padding-6":"_8Fd3jq","padding6":"_8Fd3jq","padding-12":"tWHePG","padding12":"tWHePG","padding-18":"WIUjNh","padding18":"WIUjNh"};
 
 function applyAccordionMods(mods) {
     return [
@@ -2394,7 +2431,7 @@ const Accordion = /* @__PURE__ */withMods(uuiComponents.Accordion, applyAccordio
     dropdownIcon: mods.dropdownIcon !== null && settings.accordion.icons.dropdownIcon,
 }));
 
-var css$_ = {"root":"ap-2nK","align-items":"DnOVnb","alignItems":"DnOVnb","justify-content":"_1aKt9k","justifyContent":"_1aKt9k","border-top":"jsseLL","borderTop":"jsseLL","border-bottom":"EV6ZjA","borderBottom":"EV6ZjA","top-shadow":"fMeNAt","topShadow":"fMeNAt","padding":"sFr-Fr","margin":"_4rReVQ","vPadding":"ZojVsY","column-gap":"gdKbpH","columnGap":"gdKbpH","row-gap":"Ca-VtG","rowGap":"Ca-VtG","spacing":"KRvhXW"};
+var css$_ = {"root":"QaQft7","align-items":"_8b411O","alignItems":"_8b411O","justify-content":"z-nV-f","justifyContent":"z-nV-f","border-top":"OSboNp","borderTop":"OSboNp","border-bottom":"AWKEwz","borderBottom":"AWKEwz","top-shadow":"_4d-shM","topShadow":"_4d-shM","padding":"_2mVXDL","margin":"VXQ2qL","vPadding":"VCgRlA","column-gap":"wgbMW2","columnGap":"wgbMW2","row-gap":"WCUpVM","rowGap":"WCUpVM","spacing":"mYRdIZ"};
 
 const FlexCell = /* @__PURE__ */withMods(FlexCell$1, () => [css$_.flexCell]);
 
@@ -2446,7 +2483,7 @@ const FlexRow = /* @__PURE__ */forwardRef((props, ref) => {
         } }, props.children));
 });
 
-var css$Z = {"root":"s9u8hG","margin-24":"VubwqG","margin24":"VubwqG","padding-12":"yECNX-","padding12":"yECNX-","padding-24":"pzzeE5","padding24":"pzzeE5","shadow":"RpEITe","uui-surface-main":"vdXtnk","uuiSurfaceMain":"vdXtnk"};
+var css$Z = {"root":"ryvTqu","margin-24":"ZkrnGM","margin24":"ZkrnGM","padding-12":"iGI7pt","padding12":"iGI7pt","padding-24":"_8irR8v","padding24":"_8irR8v","shadow":"qvLIdV","uui-surface-main":"_9GB8h3","uuiSurfaceMain":"_9GB8h3"};
 
 const Panel = /* @__PURE__ */withMods(VPanel, (props) => [
     'uui-panel',
@@ -2456,7 +2493,7 @@ const Panel = /* @__PURE__ */withMods(VPanel, (props) => [
     props.background && css$Z[`uui-${props.background}`],
 ]);
 
-var css$Y = {"root":"_4xKIXG"};
+var css$Y = {"root":"KXIV2k"};
 
 function applyLabeledInputMods(mods) {
     return [
@@ -2465,15 +2502,20 @@ function applyLabeledInputMods(mods) {
         'uui-size-' + (mods.size || settings.labeledInput.sizes.default),
     ];
 }
+function getInfoIconForSize(size) {
+    return size <= '30'
+        ? settings.labeledInput.icons.fillInfoIcon
+        : settings.labeledInput.icons.infoIcon;
+}
 function applyLabeledInputProps(props) {
-    return ({
+    return {
         Tooltip: props.Tooltip || Tooltip,
-        infoIcon: props.infoIcon || props.size <= '30' ? settings.labeledInput.icons.fillInfoIcon : settings.labeledInput.icons.infoIcon,
-    });
+        infoIcon: props.infoIcon || getInfoIconForSize(props.size),
+    };
 }
 const LabeledInput = /* @__PURE__ */withMods(uuiComponents.LabeledInput, applyLabeledInputMods, applyLabeledInputProps);
 
-var css$X = {"root":"XV08r0"};
+var css$X = {"root":"fFibdG"};
 
 function RadioGroup(props) {
     const direction = props.direction || 'vertical';
@@ -2488,7 +2530,7 @@ function RadioGroup(props) {
     })));
 }
 
-var css$W = {"root":"LJvO0J","viewport":"WS08dq"};
+var css$W = {"root":"t-6UmP","viewport":"gfk2Q7"};
 
 var uuiScrollbars;
 (function (uuiScrollbars) {
@@ -2558,7 +2600,7 @@ const ScrollBars = /* @__PURE__ */forwardRef((props, ref) => {
 });
 ScrollBars.displayName = 'ScrollBars';
 
-var css$V = {"scroll-container":"trLwuQ","scrollContainer":"trLwuQ","list-container":"_8fY7le","listContainer":"_8fY7le"};
+var css$V = {"scroll-container":"aE5ea4","scrollContainer":"aE5ea4","list-container":"I3cAUF","listContainer":"I3cAUF"};
 
 const VirtualList = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const { listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef, } = useVirtualList({
@@ -2611,7 +2653,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":"k86vxv"};
+var css$U = {"root":"_0AGVh9"};
 
 function CheckboxGroup(props) {
     const currentValue = props.value || [];
@@ -2713,7 +2755,7 @@ const Tabs = /* @__PURE__ */forwardRef((props, ref) => {
 });
 Tabs.displayName = 'Tabs';
 
-var css$T = {"root":"R1qIKu","modal-blocker":"oYAxKl","modalBlocker":"oYAxKl","animateModalBlocker":"gCC3Vp","modal":"NChdlF","modal-footer":"gQVrMC","modalFooter":"gQVrMC","border-top":"gtsH59","borderTop":"gtsH59","modal-header":"_09A5AL","modalHeader":"_09A5AL","border-bottom":"n7jjVR","borderBottom":"n7jjVR"};
+var css$T = {"root":"_9aKN6y","modal-blocker":"_1g5qc6","modalBlocker":"_1g5qc6","animateModalBlocker":"HemH-J","modal":"RnEPYd","modal-footer":"jc44aV","modalFooter":"jc44aV","border-top":"QteKIZ","borderTop":"QteKIZ","modal-header":"KwUVu4","modalHeader":"KwUVu4","border-bottom":"nqe48n","borderBottom":"nqe48n"};
 
 const ModalBlocker = /* @__PURE__ */withMods(ModalBlocker$1, () => [css$T.modalBlocker]);
 const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$T.root, css$T.modal], (props) => {
@@ -2905,7 +2947,7 @@ const TREE_SHAKEABLE_INIT = () => ({
 });
 const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
 
-var css$S = {"root":"tFqyuu","icon-wrapper":"oUQriM","iconWrapper":"oUQriM","action-wrapper":"ueSQ8c","actionWrapper":"ueSQ8c","close-icon":"_6eNkLg","closeIcon":"_6eNkLg","main-path":"mw30oe","mainPath":"mw30oe","content":"KxMprA","close-wrapper":"xLTRzz","closeWrapper":"xLTRzz","clear-notifications":"-igb8x","clearNotifications":"-igb8x"};
+var css$S = {"root":"mxel03","icon-wrapper":"zia8AV","iconWrapper":"zia8AV","action-wrapper":"VKLdu7","actionWrapper":"VKLdu7","close-icon":"HFf0sB","closeIcon":"HFf0sB","main-path":"qpQM5x","mainPath":"qpQM5x","content":"-ffdfy","close-wrapper":"mqOVx4","closeWrapper":"mqOVx4","clear-notifications":"p2JiXm","clearNotifications":"p2JiXm"};
 
 const NotificationCard = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const notificationCardNode = React__default.useRef(null);
@@ -2938,7 +2980,7 @@ function ClearNotification() {
         React__default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
 }
 
-var css$R = {"footer":"sTPayW"};
+var css$R = {"footer":"QkiE0u"};
 
 class ConfirmationModal extends React.Component {
     render() {
@@ -2980,7 +3022,7 @@ function useReliableForceUpdate() {
     return red[1];
 }
 
-var css$Q = {"root":"NqfEPK","container":"qlxhN-"};
+var css$Q = {"root":"yPK2Ad","container":"I4z498"};
 
 const defaultFormat = 'MMM D, YYYY';
 const valueFormat = 'YYYY-MM-DD';
@@ -2999,7 +3041,16 @@ const defaultRangeValue = {
     from: null,
     to: null,
 };
-const getDisplayedMonth = (selectedDate, focus) => {
+const getDisplayedMonth = (selectedDate, focus, initialViewMonth) => {
+    if (selectedDate.from || selectedDate.to) {
+        return getDisplayedMonthBySelection(selectedDate, focus);
+    }
+    else if (initialViewMonth) {
+        return getNewMonth(`${initialViewMonth}-01`);
+    }
+    return uuiDayjs.dayjs();
+};
+const getDisplayedMonthBySelection = (selectedDate, focus) => {
     if (selectedDate.from && selectedDate.to && focus) {
         return uuiDayjs.dayjs(selectedDate[focus]);
     }
@@ -3198,26 +3249,27 @@ 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":"e9n0iE"};
+var css$P = {"root":"_50QShK"};
 
 function applyDateSelectionMods() {
     return [css$P.root, `uui-size-${settings.datePicker.sizes.body}`];
 }
 const Calendar = /* @__PURE__ */withMods(Calendar$1, applyDateSelectionMods);
 
-var css$O = {"root":"RtXxRP"};
+var css$O = {"root":"hVXtQn"};
 
 const uuiDatePickerBody = {
     wrapper: 'uui-datepicker-body-wrapper',
 };
 const DatePickerBody = /* @__PURE__ */forwardRef(DatePickerBodyComp);
 function DatePickerBodyComp(props, ref) {
-    const { value, onValueChange } = props;
-    const [month, setMonth] = useState(getNewMonth(value));
+    const { value, onValueChange, initialViewMonth } = props;
+    const initialViewDate = value || (initialViewMonth ? `${initialViewMonth}-01` : '');
+    const [month, setMonth] = useState(getNewMonth(initialViewDate));
     const [view, setView] = useState('DAY_SELECTION');
     // sync updated props with internal state
     useEffect(() => {
-        setMonth(getNewMonth(value));
+        setMonth(getNewMonth(initialViewDate));
         setView('DAY_SELECTION');
     }, [value, setMonth]);
     return (React__default.createElement(StatelessDatePickerBody, { ref: ref, ...props, month: month, view: view, onValueChange: onValueChange, onMonthChange: (m) => setMonth(m), onViewChange: (v) => setView(v) }));
@@ -3315,7 +3367,7 @@ function DatePickerComponent(props, ref) {
     };
     const renderBody = useMemo(() => (renderProps) => {
         return (React__default.createElement(DropdownContainer, { ...renderProps },
-            React__default.createElement(DatePickerBody, { value: value, onValueChange: onBodyValueChange, cx: cx$1(props.bodyCx), filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay, rawProps: props.rawProps?.body }),
+            React__default.createElement(DatePickerBody, { value: value, onValueChange: onBodyValueChange, cx: cx$1(props.bodyCx), filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay, rawProps: props.rawProps?.body, initialViewMonth: props.initialViewMonth }),
             props.renderFooter?.()));
     }, [value, onBodyValueChange]);
     return (React__default.createElement(Dropdown$1, { value: isBodyOpen, middleware: [offset(6)], placement: props.placement, ref: ref, onValueChange: (v) => {
@@ -3326,7 +3378,7 @@ function DatePickerComponent(props, ref) {
 }
 const DatePicker = /* @__PURE__ */React__default.forwardRef(DatePickerComponent);
 
-var css$N = {"date-input":"Qmi952","dateInput":"Qmi952","root":"c8Uueg","separator":"wOOKpz"};
+var css$N = {"date-input":"OIJFeD","dateInput":"OIJFeD","root":"Op2H4m","separator":"DEcGdd"};
 
 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));
@@ -3388,16 +3440,18 @@ const RangeDatePickerInput = /* @__PURE__ */forwardRef(({ isDisabled, isInvalid,
         };
         onValueChange(newValue);
     };
-    const clearAllowed = !disableClear && !(preventEmptyFromDate && preventEmptyToDate) && inputValue.from && inputValue.to;
+    const clearAllowed = !disableClear && !isReadonly && !isDisabled
+        && !(preventEmptyFromDate && preventEmptyToDate)
+        && ((value.from && !preventEmptyFromDate) || (value.to && !preventEmptyToDate));
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React__default.createElement("div", { ref: ref, className: cx$1(`uui-size-${size || settings.rangeDatePicker.sizes.default}`, 'uui-range-date-picker', classes, css$N.root, isDisabled && uuiMod.disabled, isReadonly && uuiMod.readonly, isInvalid && uuiMod.invalid, inFocus && uuiMod.focus), onKeyDown: onKeyDown },
         React__default.createElement(TextInput, { icon: settings.rangeDatePicker.icons.input.calendarIcon, cx: cx$1(css$N.dateInput, inFocus === 'from' && uuiMod.focus), size: size || settings.rangeDatePicker.sizes.default, placeholder: getPlaceholder ? getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: inputValue.from || undefined, onValueChange: (v) => onInputChange(v || '', 'from'), onFocus: (event) => handleFocus(event, 'from'), onBlur: (event) => handleBlur(event, 'from'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.from, onClick: onClick, onKeyDown: onInputKeyDown, id: id }),
         React__default.createElement("div", { className: css$N.separator }),
-        React__default.createElement(TextInput, { cx: cx$1(css$N.dateInput, inFocus === 'to' && uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.rangeDatePicker.sizes.default, value: inputValue.to || undefined, onCancel: clearAllowed ? onClear : undefined, onValueChange: (v) => onInputChange(v || '', 'to'), onFocus: (e) => handleFocus(e, 'to'), onBlur: (e) => handleBlur(e, 'to'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.to, onClick: onClick, onKeyDown: onInputKeyDown })));
+        React__default.createElement(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":"uIPHQO"};
+var css$M = {"root":"J7Mfcq"};
 
 const uuiPresets = {
     container: 'uui-presets-container',
@@ -3417,7 +3471,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":"oAaYcl","container":"mktP22","day-selection":"vlDlCk","daySelection":"vlDlCk","from-picker":"TkrR7k","fromPicker":"TkrR7k","to-picker":"m7Wf5o","toPicker":"m7Wf5o","bodes-wrapper":"j7PcOy","bodesWrapper":"j7PcOy","blocker":"RD1Woy"};
+var css$L = {"root":"vt9wZ3","container":"kbNPzB","day-selection":"Zpoq55","daySelection":"Zpoq55","from-picker":"zGz-f8","fromPicker":"zGz-f8","to-picker":"YhfqIU","toPicker":"YhfqIU","bodes-wrapper":"w0uGnM","bodesWrapper":"w0uGnM","blocker":"_7FlL0A"};
 
 const uuiRangeDatePickerBody = {
     inRange: 'uui-range-datepicker-in-range',
@@ -3493,13 +3547,13 @@ const rangeDatePickerPresets = {
 };
 const RangeDatePickerBody = /* @__PURE__ */forwardRef(RangeDatePickerBodyComp);
 function RangeDatePickerBodyComp(props, ref) {
-    const { value: _value, filter } = props;
+    const { value: _value, filter, initialViewMonth } = props;
     const { selectedDate: _selectedDate, inFocus, } = _value;
     const selectedDate = _selectedDate || defaultRangeValue; // also handles null in comparison to default value
     const [view, setView] = useState('DAY_SELECTION');
     const [disabledPanel, setDisabledPanel] = useState(null);
     const [month, setMonth] = useState(() => {
-        return getDisplayedMonth(selectedDate, inFocus);
+        return getDisplayedMonth(selectedDate, inFocus, initialViewMonth);
     });
     const getRange = (newValue) => {
         if (!filter || filter(uuiDayjs.dayjs(newValue))) {
@@ -3563,7 +3617,7 @@ function RangeDatePickerBodyComp(props, ref) {
                 }, presets: presets })));
     };
     useLayoutEffectSafeForSsr(() => {
-        const monthToSet = getDisplayedMonth(selectedDate, inFocus);
+        const monthToSet = getDisplayedMonth(selectedDate, inFocus, initialViewMonth);
         // To avoid re-rendering the body if the current month being displayed is equal to or greater than 1
         const shouldNotIgnoreUpdate = !(uuiDayjs.dayjs(month).isSame(monthToSet, 'month') || uuiDayjs.dayjs(month).add(1, 'month').isSame(monthToSet, 'month'));
         if (shouldNotIgnoreUpdate) {
@@ -3619,7 +3673,7 @@ const getDayState = (day, selectedDate) => {
     };
 };
 
-var css$K = {"dropdown-container":"ulbVn2","dropdownContainer":"ulbVn2"};
+var css$K = {"dropdown-container":"_-1JpMi","dropdownContainer":"_-1JpMi"};
 
 function RangeDatePickerComponent(props, ref) {
     const { value: _value, format = defaultFormat, size = settings.rangeDatePicker.sizes.default } = props;
@@ -3670,7 +3724,7 @@ function RangeDatePickerComponent(props, ref) {
                         inFocus,
                     }, onValueChange: onBodyValueChange, filter: props.filter, presets: props.presets, renderDay: props.renderDay, renderFooter: () => {
                         return props.renderFooter?.(value);
-                    }, isHoliday: props.isHoliday, rawProps: props.rawProps?.body, preventEmptyToDate: props.preventEmptyToDate, preventEmptyFromDate: props.preventEmptyFromDate }))));
+                    }, isHoliday: props.isHoliday, rawProps: props.rawProps?.body, preventEmptyToDate: props.preventEmptyToDate, preventEmptyFromDate: props.preventEmptyFromDate, initialViewMonth: props.initialViewMonth }))));
     };
     const handleEscape = (e) => {
         if (e.key === 'Escape' && isOpen) {
@@ -3687,7 +3741,7 @@ function RangeDatePickerComponent(props, ref) {
 }
 const RangeDatePicker = /* @__PURE__ */React__default.forwardRef(RangeDatePickerComponent);
 
-var css$J = {"root":"JT1DSu","blocker":"DKmFCr","marker":"wSNZAd","top":"JqFkPc","bottom":"ctfwAV","left":"dgyY-G","right":"-HZAP5","inside":"mQ02Ti"};
+var css$J = {"root":"cs8XxT","blocker":"DDQc6v","marker":"En16TJ","top":"bj63Pc","bottom":"_7E6u5b","left":"uGe-JQ","right":"Ly4mkl","inside":"VGx-mW"};
 
 function DropMarker(props) {
     return props.isDndInProgress
@@ -3702,9 +3756,9 @@ function DropMarker(props) {
         : null;
 }
 
-var css$I = {"search-wrapper":"_3uPUth","searchWrapper":"_3uPUth","no-data":"-nyrgX","noData":"-nyrgX"};
+var css$I = {"search-wrapper":"WCbplD","searchWrapper":"WCbplD","no-data":"_2v6-B8","noData":"_2v6-B8"};
 
-var css$H = {"picker-row":"n86yn9","pickerRow":"n86yn9","align-widgets-top":"OzIkUE","alignWidgetsTop":"OzIkUE","row-content":"_1u6ksV","rowContent":"_1u6ksV","align-widgets-center":"Rsq5fu","alignWidgetsCenter":"Rsq5fu","icon-container":"-KtaW1","iconContainer":"-KtaW1","content-wrapper":"W1rQQd","contentWrapper":"W1rQQd","icon-wrapper":"zv-RHL","iconWrapper":"zv-RHL","icon-default":"_3VdvP8","iconDefault":"_3VdvP8","selected-mark":"d13459","selectedMark":"d13459"};
+var css$H = {"picker-row":"LP3vW0","pickerRow":"LP3vW0","align-widgets-top":"_2Z35Gw","alignWidgetsTop":"_2Z35Gw","row-content":"rByCc0","rowContent":"rByCc0","align-widgets-center":"_9q4-4j","alignWidgetsCenter":"_9q4-4j","icon-container":"sbbFeW","iconContainer":"sbbFeW","content-wrapper":"h4qhD9","contentWrapper":"h4qhD9","icon-wrapper":"qWk7qm","iconWrapper":"qWk7qm","icon-default":"xdKQQX","iconDefault":"xdKQQX","selected-mark":"kVy8Zf","selectedMark":"kVy8Zf"};
 
 const mergeHighlightRanges = (ranges) => {
     const mergedRanges = [];
@@ -3771,7 +3825,7 @@ const getHighlightedSearchMatches = (str, search) => {
     return getDecoratedText(str, ranges);
 };
 
-var css$G = {"root":"M-rUkA","column-gap":"Q-YwVF","columnGap":"Q-YwVF","title":"IwfQ5u","subtitle":"TibkeU","disabled":"XZXvlo","multiline":"ngwx3F"};
+var css$G = {"root":"p8Fxg-","column-gap":"HCsW7G","columnGap":"HCsW7G","title":"E8JdOe","subtitle":"_7W--fB","disabled":"KXg1id","multiline":"mVYJfb"};
 
 function PickerItem(props) {
     const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, } = props;
@@ -3804,6 +3858,12 @@ function DataPickerRow(props) {
             rowNode.current?.removeEventListener('mouseenter', handleMouseEnter);
         };
     }, [props.onFocus, handleMouseEnter]);
+    const handleFocus = () => {
+        // If this row gets focus but is not the focused row, make it focused
+        if (!props.isFocused && props.onFocus) {
+            props.onFocus(props.index);
+        }
+    };
     const getSubtitle = ({ path }) => {
         if (!props.dataSourceState?.search)
             return;
@@ -3845,14 +3905,15 @@ function DataPickerRow(props) {
     const clickHandler = props.onClick || props.onSelect || props.onFold || props.onCheck;
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    React.createElement("div", { onClick: clickHandler && ((e) => !isEventTargetInsideClickable(e) && clickHandler(props)), role: "option", "aria-busy": props.isLoading, "aria-posinset": props.index + 1, "aria-checked": props.checkbox?.isVisible ? props.isChecked : null, "aria-selected": props.isSelectable ? props.isSelected : null, ref: rowNode, className: cx$1(css$H.pickerRow, 'uui-picker_input-row', `uui-size-${props.size || settings.pickerInput.sizes.body.row}`, css$H[`align-widgets-${props.alignActions || 'top'}`], clickHandler && props.isFocused && uuiMod.focus, clickHandler && uuiMarkers.clickable, props.cx), style: props.padding && {
+    React.createElement("div", { onClick: clickHandler && ((e) => !isEventTargetInsideClickable(e) && clickHandler(props)), onFocus: handleFocus, role: "option", "aria-busy": props.isLoading, "aria-posinset": props.index + 1, "aria-checked": props.checkbox?.isVisible ? props.isChecked : null, "aria-selected": props.isSelectable ? props.isSelected : null, tabIndex: -1, ref: rowNode, id: props.rowKey, className: cx$1(css$H.pickerRow, 'uui-picker_input-row', `uui-size-${props.size || settings.pickerInput.sizes.body.row}`, css$H[`align-widgets-${props.alignActions || 'top'}`], clickHandler && props.isFocused && uuiMod.focus, clickHandler && uuiMarkers.clickable, props.cx), style: props.padding && {
             '--uui-data_picker-horizontal-padding': `${props.padding}px`,
         }, ...props.rawProps }, renderContent()));
 }
 
-function DataPickerBody({ highlightSearchMatches = true, ...props }) {
+function DataPickerBody({ highlightSearchMatches = true, autoFocusSearch = true, ...props }) {
     const prevProps = usePrevious(props);
     const showSearch = props.showSearch === 'auto' ? props.totalCount > 10 : Boolean(props.showSearch);
+    const [isKeyboardNavigation, setIsKeyboardNavigation] = React__default.useState(false);
     useEffect(() => {
         if (props.rows.length !== prevProps?.rows.length || (!isEqual(prevProps?.value.checked, props.value.checked) && !props.fixedBodyPosition)) {
             props.scheduleUpdate?.();
@@ -3860,9 +3921,36 @@ function DataPickerBody({ highlightSearchMatches = true, ...props }) {
     }, [props.rows, prevProps, props.value.checked, props.fixedBodyPosition]);
     const searchKeyDown = (e) => {
         props.onKeyDown?.(e);
-        if (e.shiftKey && e.key === 'Tab')
-            e.preventDefault();
     };
+    const handleVirtualListFocus = (e) => {
+        // Only set keyboard navigation if focus came from keyboard (Tab key)
+        // Check if the focus event was triggered by keyboard navigation
+        const isKeyboardFocus = e.target === e.currentTarget;
+        if (isKeyboardFocus) {
+            setIsKeyboardNavigation(true);
+        }
+    };
+    const handleVirtualListBlur = (e) => {
+        // Check if focus is moving outside the virtual list
+        const relatedTarget = e.relatedTarget;
+        const currentTarget = e.currentTarget;
+        if (relatedTarget && !currentTarget.contains(relatedTarget)) {
+            // Focus is leaving the virtual list, hide visual focus but keep focusedIndex for navigation "by circle"
+            setIsKeyboardNavigation(false);
+        }
+    };
+    const { focusedIndex, topIndex, } = props.value;
+    const focusedRowId = useMemo(() => {
+        // No need to make unnecessary calculations.
+        if (!props.showSearch) {
+            return '';
+        }
+        const focusedRow = props.rows.at(focusedIndex - topIndex);
+        if (!focusedRow) {
+            return '';
+        }
+        return focusedRow.rowKey;
+    }, [props.showSearch, focusedIndex, topIndex]);
     const renderEmpty = () => {
         const search = props.value.search;
         if (props.renderEmpty) {
@@ -3897,25 +3985,37 @@ function DataPickerBody({ highlightSearchMatches = true, ...props }) {
         return props.size || settings.pickerInput.sizes.body.row;
     };
     const renderRow = (row, dsState) => {
-        const pickerRowProps = { ...row, getName: props.getName };
+        const pickerRowProps = {
+            ...row,
+            getName: props.getName,
+            cx: cx$1(row.cx, isKeyboardNavigation && row.isFocused && 'uui-focus', isKeyboardNavigation && row.isFocused && 'uui-keyboard-focus'),
+        };
         return props.renderRow ? (props.renderRow(pickerRowProps, dsState)) : (React__default.createElement(DataPickerRow, { ...pickerRowProps, key: row.rowKey, size: getRowSize(), flattenSearchResults: props.flattenSearchResults, highlightSearchMatches: highlightSearchMatches, dataSourceState: dsState, getName: props.getName }));
     };
+    const renderSearchInput = () => {
+        return (React__default.createElement(SearchInput, { placeholder: i18n.dataPickerBody.searchPlaceholder, value: props.value.search, onValueChange: (newVal) => props.onValueChange({ ...props.value, search: newVal }), onKeyDown: searchKeyDown, size: searchSize, debounceDelay: props.searchDebounceDelay, rawProps: {
+                dir: 'auto',
+                'aria-activedescendant': focusedRowId,
+            } }));
+    };
     const searchSize = isMobile()
         ? settings.pickerInput.sizes.body.mobileSearchInput
         : settings.pickerInput.sizes.body.getSearchSize({ pickerSize: props.searchSize });
-    const renderedDataRows = useMemo(() => props.rows.map((row) => renderRow(row, props.value)), [props.rows, props.value]);
+    const renderedDataRows = useMemo(() => props.rows.map((row) => renderRow(row, props.value)), [props.rows, props.value, isKeyboardNavigation]);
     return (React__default.createElement(React__default.Fragment, null,
         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 },
-                React__default.createElement(MoveFocusInside, null,
-                    React__default.createElement(SearchInput, { placeholder: i18n.dataPickerBody.searchPlaceholder, value: props.value.search, onValueChange: (newVal) => props.onValueChange({ ...props.value, search: newVal }), onKeyDown: searchKeyDown, size: searchSize, debounceDelay: props.searchDebounceDelay, rawProps: { dir: 'auto' } }))))),
+            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, rawProps: {
+            ? renderEmpty() : (React__default.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, rows: renderedDataRows, role: "listbox", rawProps: {
                 'aria-multiselectable': props.selectionMode === 'multi' ? true : null,
                 'aria-orientation': 'vertical',
-                tabIndex: -1,
+                tabIndex: 0,
+                onKeyDown: props.onKeyDown,
+                onFocus: handleVirtualListFocus,
+                onBlur: handleVirtualListBlur,
+                // onMouseMove: handleVirtualListMouseMove,
                 ...props.rawProps,
             }, rowsCount: props.rowsCount, isLoading: props.isReloading, renderBlocker: settings.pickerInput.renderBlocker, overflowTopEffect: showSearch ? 'line' : 'none', overflowBottomEffect: "line" })))));
 }
@@ -3944,7 +4044,7 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = /* @__PURE__ */React__default.memo(DataPickerFooterImpl);
 
-var css$F = {"header":"B2qlMl","title":"MuoHEK","close":"ggO-wF"};
+var css$F = {"header":"_3eZ5QV","title":"_36bPib","close":"EJpfQu"};
 
 const DataPickerMobileHeaderImpl = (props) => {
     const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
@@ -3954,7 +4054,7 @@ const DataPickerMobileHeaderImpl = (props) => {
 };
 const DataPickerMobileHeader = /* @__PURE__ */React__default.memo(DataPickerMobileHeaderImpl);
 
-var css$E = {"done":"_1ZKYor","container":"_9uBP7f"};
+var css$E = {"done":"_5EOY5k","container":"EPgdwK"};
 
 const PickerBodyMobileView = (props) => {
     const isMobileView = isMobile();
@@ -3966,7 +4066,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":"VsqsbP","subHeaderWrapper":"VsqsbP","switch":"OtYuI-","no-found-modal-container":"lYAdNj","noFoundModalContainer":"lYAdNj","no-found-modal-container-icon":"_5MPGsr","noFoundModalContainerIcon":"_5MPGsr","no-found-modal-container-text":"_53bfMM","noFoundModalContainerText":"_53bfMM","body":"h-Vf7M"};
+var css$D = {"sub-header-wrapper":"HEVmrY","subHeaderWrapper":"HEVmrY","switch":"BLo6SS","search":"-Y0Smk","no-found-modal-container":"k0Ww8A","noFoundModalContainer":"k0Ww8A","no-found-modal-container-icon":"Ww665W","noFoundModalContainerIcon":"Ww665W","no-found-modal-container-text":"TmM-Ur","noFoundModalContainerText":"TmM-Ur","body":"SDIV2k"};
 
 function PickerModal(props) {
     const { view, selection, dataSourceStateLens, dataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = usePickerModal(props);
@@ -3994,25 +4094,37 @@ function PickerModal(props) {
             React__default.createElement(Text, { cx: css$D.noFoundModalContainerText, fontSize: "12", lineHeight: "18", color: "primary" }, i18n.dataPickerBody.noRecordsSubTitle)));
     };
     const dataRows = getRows();
+    const { focusedIndex, topIndex, } = dataSourceState;
+    const focusedRowId = useMemo(() => {
+        const focusedRow = dataRows.at(focusedIndex - topIndex);
+        if (!focusedRow) {
+            return '';
+        }
+        return focusedRow.rowKey;
+    }, [focusedIndex, topIndex]);
     return (React__default.createElement(ModalBlocker, { ...props },
         React__default.createElement(ModalWindow, { width: 600, height: 700, cx: css$D.body },
             React__default.createElement(ModalHeader, { title: props.caption || i18n.pickerModal.headerTitle, onClose: () => props.abort() }),
             React__default.createElement(FlexCell, { cx: css$D.subHeaderWrapper },
                 React__default.createElement(FlexRow, { vPadding: "24" },
-                    React__default.createElement(SearchInput, { ...dataSourceStateLens.prop('search').toProps(), onKeyDown: (e) => handleDataSourceKeyboard({
-                            value: dataSourceState,
-                            onValueChange: handleDataSourceValueChange,
-                            listView: view,
-                            rows: dataRows,
-                            searchPosition: 'body',
-                        }, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder, rawProps: { dir: 'auto' } })),
+                    React__default.createElement(MoveFocusInside, { className: css$D.search },
+                        React__default.createElement(SearchInput, { ...dataSourceStateLens.prop('search').toProps(), onKeyDown: (e) => handleDataSourceKeyboard({
+                                value: dataSourceState,
+                                onValueChange: handleDataSourceValueChange,
+                                listView: view,
+                                rows: dataRows,
+                                searchPosition: 'body',
+                            }, e), placeholder: i18n.pickerModal.searchPlaceholder, rawProps: {
+                                dir: 'auto',
+                                'aria-activedescendant': focusedRowId,
+                            } }))),
                 !isSingleSelect() && (React__default.createElement(Switch, { cx: css$D.switch, size: settings.pickerInput.sizes.body.footerSwitchMap[settings.pickerInput.sizes.body.row], ...getFooterProps().showSelected, isDisabled: isSearching || view.getSelectedRowsCount() < 1, label: "Show only selected" })),
                 props.renderFilter && React__default.createElement(FlexCell, { grow: 2 }, props.renderFilter(dataSourceStateLens.prop('filter').toProps()))),
             React__default.createElement(DataPickerBody, { ...getListProps(), value: dataSourceState, onValueChange: handleDataSourceValueChange, showSearch: false, getName: getName, rows: dataRows, renderRow: renderRow, renderEmpty: renderNotFound, size: settings.pickerInput.sizes.body.row }),
             React__default.createElement(ModalFooter, null, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$C = {"tooltip":"g4fIzj"};
+var css$C = {"tooltip":"nRtUOE","noShrink":"MFV3Ci"};
 
 const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     const tagProps = {
@@ -4024,14 +4136,14 @@ const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     if (props.isCollapsed) {
         const collapsedRows = props.collapsedRows.map((row) => props.getName(row.value)).join(', ');
         return (React.createElement(Tooltip, { key: "selected", content: collapsedRows, closeDelay: 150, closeOnMouseLeave: "boundary", cx: css$C.tooltip },
-            React.createElement(Tag, { ref: ref, rawProps: { role: 'option' }, ...tagProps })));
+            React.createElement(Tag, { ref: ref, rawProps: { role: 'option' }, ...tagProps, cx: css$C.noShrink })));
     }
     else {
         return React.createElement(Tag, { ref: ref, rawProps: { role: 'option' }, ...tagProps });
     }
 });
 
-var css$B = {"root":"JAVuYn"};
+var css$B = {"root":"-GtIUg"};
 
 const defaultMode = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
@@ -4101,7 +4213,7 @@ function PickerInputComponent(props, ref) {
         const bodyHeight = isMobile() ? document.documentElement.clientHeight : props.dropdownHeight || settings.pickerInput.sizes.body.maxHeight;
         const minBodyWidth = props.minBodyWidth || settings.pickerInput.sizes.body.minWidth;
         const onKeyDown = (e) => handlePickerInputKeyboard(rows, e);
-        return (React__default.createElement(PickerBodyMobileView, { title: props.entityName, onClose: () => toggleBodyOpening(false), cx: [props.bodyCx, 'uui-picker_input-body-wrapper'], onKeyDown: onKeyDown, width: dropdownProps.togglerWidth > minBodyWidth ? dropdownProps.togglerWidth : minBodyWidth, focusLock: getSearchPosition() === 'body' },
+        return (React__default.createElement(PickerBodyMobileView, { title: props.entityName, onClose: () => toggleBodyOpening(false), cx: [props.bodyCx, 'uui-picker_input-body-wrapper'], width: dropdownProps.togglerWidth > minBodyWidth ? dropdownProps.togglerWidth : minBodyWidth, focusLock: true, shards: getSearchPosition() === 'input' ? [togglerRef] : undefined },
             React__default.createElement(DataPickerBody, { ...dropdownProps, ...getListProps(), showSearch: getSearchPosition() === 'body', getName: getName, value: dataSourceState, onValueChange: handleDataSourceValueChange, rows: rows, maxHeight: bodyHeight, searchSize: props.size, selectionMode: props.selectionMode, renderNotFound: props.renderNotFound, renderEmpty: props.renderEmpty, renderRow: props.renderRow, onKeyDown: onKeyDown, minCharsToSearch: props.minCharsToSearch, fixedBodyPosition: props.fixedBodyPosition, searchDebounceDelay: props.searchDebounceDelay, rawProps: props.rawProps?.body, highlightSearchMatches: props.highlightSearchMatches, flattenSearchResults: view.getConfig().flattenSearchResults }),
             renderFooter()));
     };
@@ -4109,11 +4221,11 @@ function PickerInputComponent(props, ref) {
     return (React__default.createElement(Dropdown, { renderTarget: (dropdownProps) => {
             const targetProps = getTogglerProps();
             return renderTarget({ ...dropdownProps, ...targetProps, renderItem });
-        }, renderBody: (bodyProps) => renderBody(bodyProps), value: shouldShowBody(), onValueChange: !props.isDisabled && toggleBodyOpening, placement: props.dropdownPlacement, middleware: middleware, closeBodyOnTogglerHidden: !isMobile(), portalTarget: props.portalTarget, ref: togglerRef }));
+        }, renderBody: (bodyProps) => renderBody(bodyProps), value: shouldShowBody(), onValueChange: !props.isDisabled && toggleBodyOpening, placement: props.dropdownPlacement, middleware: middleware, closeBodyOnTogglerHidden: isMobile() ? false : props.closeBodyOnTogglerHidden, portalTarget: props.portalTarget, ref: togglerRef }));
 }
 const PickerInput = /* @__PURE__ */React__default.forwardRef(PickerInputComponent);
 
-var css$A = {"row":"zugrfa"};
+var css$A = {"row":"_8Xp1Y5"};
 
 function PickerListRow(props) {
     let label;
@@ -4133,7 +4245,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":"yW1FgL"};
+var css$z = {"root":"rvpFK2"};
 
 function PickerList(props) {
     const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, getModalTogglerCaption, } = usePickerList(props);
@@ -4168,12 +4280,12 @@ function PickerList(props) {
             }, selectedRows)));
 }
 
-var css$y = {"root":"AV-t05","wrapper":"LVQzVv","align-widgets-top":"_76hfvD","alignWidgetsTop":"_76hfvD","align-widgets-center":"HqHk95","alignWidgetsCenter":"HqHk95"};
+var css$y = {"root":"OfWfys","wrapper":"r2o6VS","align-widgets-top":"_6jB-wO","alignWidgetsTop":"_6jB-wO","align-widgets-center":"ZK0GEm","alignWidgetsCenter":"ZK0GEm"};
 
 function DataTableCell(initialProps) {
     const props = { ...initialProps };
     if (props.isFirstColumn) {
-        props.addons = React.createElement(DataRowAddons, { size: props.size, ...props });
+        props.addons = React.createElement(DataRowAddons, { size: props.size, ...props, isFoldingFocusable: true });
     }
     props.renderPlaceholder = props.renderPlaceholder
         || (() => settings.dataTable.renderPlaceholder({ rowSize: props.size }));
@@ -4218,7 +4330,7 @@ function DataTableCell(initialProps) {
     return React.createElement(DataTableCell$1, { ...props });
 }
 
-var css$x = {"root":"SWO5JN"};
+var css$x = {"root":"hM9gEp"};
 
 // 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.
@@ -4234,7 +4346,7 @@ const DataTableRow = /* @__PURE__ */withMods(DataTableRow$1, ({ borderBottom = t
     ];
 }, () => propsMods);
 
-var css$w = {"sorting-panel-container":"fHU-1Q","sortingPanelContainer":"fHU-1Q"};
+var css$w = {"sorting-panel-container":"yjYRDQ","sortingPanelContainer":"yjYRDQ"};
 
 const SortingPanelImpl = ({ sortDirection, onSort }) => {
     const sortAsc = useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
@@ -4254,7 +4366,7 @@ const ColumnHeaderDropdownImpl = (props) => {
 };
 const ColumnHeaderDropdown = /* @__PURE__ */React__default.memo(ColumnHeaderDropdownImpl);
 
-var css$v = {"root":"ozuVAj","caption-wrapper":"vHT4Ig","captionWrapper":"vHT4Ig","sort-icon":"HORUZ3","sortIcon":"HORUZ3","dropdown-icon":"_1L1tLS","dropdownIcon":"_1L1tLS","infoIcon":"RHHu4N","align-right":"Z4Hc2q","alignRight":"Z4Hc2q","align-center":"opPQm5","alignCenter":"opPQm5","caption":"gbGK5c","truncate":"G5i6Jr","upper-case":"_8GqCQM","upperCase":"_8GqCQM","checkbox":"Nr-bJz","icon":"_2-FWaa","fold-all-icon":"JEa5eY","foldAllIcon":"JEa5eY","cell-tooltip":"zgRKF9","cellTooltip":"zgRKF9","resizing-marker":"SMJV-f","resizingMarker":"SMJV-f","pinned-right":"ouJCWX","pinnedRight":"ouJCWX","draggable":"HN4cjV","ghost":"oo-xLa","is-dragged-out":"v5Ig38","isDraggedOut":"v5Ig38","dnd-marker-left":"BjibIG","dndMarkerLeft":"BjibIG","dnd-marker-right":"_1v1yKg","dndMarkerRight":"_1v1yKg","cell-tooltip-wrapper":"fC58tu","cellTooltipWrapper":"fC58tu","cell-tooltip-text":"eMASvm","cellTooltipText":"eMASvm","tooltip-caption":"geXjGG","tooltipCaption":"geXjGG","tooltip-info":"PFlVUq","tooltipInfo":"PFlVUq"};
+var css$v = {"root":"-QfBVy","caption-wrapper":"_1ZPY43","captionWrapper":"_1ZPY43","sort-icon":"FgbtGF","sortIcon":"FgbtGF","dropdown-icon":"_2eOwkr","dropdownIcon":"_2eOwkr","infoIcon":"bxvSbO","sortInActive":"rTw7vn","align-right":"rHjjR7","alignRight":"rHjjR7","align-center":"Q8PFNn","alignCenter":"Q8PFNn","caption":"IjqNvZ","truncate":"_5MHCi6","upper-case":"Hq0CxQ","upperCase":"Hq0CxQ","checkbox":"gBWF1u","icon":"wSXWSE","fold-all-icon":"klK4fD","foldAllIcon":"klK4fD","cell-tooltip":"EnHlC4","cellTooltip":"EnHlC4","resizing-marker":"O9Jjyv","resizingMarker":"O9Jjyv","pinned-right":"EHkt2d","pinnedRight":"EHkt2d","draggable":"yoGCFu","ghost":"nZ1wcj","is-dragged-out":"d5vJzx","isDraggedOut":"d5vJzx","dnd-marker-left":"y7kzBF","dndMarkerLeft":"y7kzBF","dnd-marker-right":"riHXIT","dndMarkerRight":"riHXIT","cell-tooltip-wrapper":"ZjvMpE","cellTooltipWrapper":"ZjvMpE","cell-tooltip-text":"UQmxm7","cellTooltipText":"UQmxm7","tooltip-caption":"QZ0ng6","tooltipCaption":"QZ0ng6","tooltip-info":"EkelTT","tooltipInfo":"EkelTT"};
 
 class DataTableHeaderCell extends React.Component {
     constructor() {
@@ -4265,7 +4377,7 @@ class DataTableHeaderCell extends React.Component {
         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 = () => {
+        this.getColumnCaption = (props, dropdownProps) => {
             const renderTooltip = this.props.column.renderTooltip || this.getTooltipContent;
             const captionCx = cx$1([
                 css$v.caption,
@@ -4274,12 +4386,24 @@ class DataTableHeaderCell extends React.Component {
                 '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 },
+                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(IconButton, { key: "sort", cx: cx$1(css$v.icon, css$v.sortIcon, this.props.sortDirection && css$v.sortIconActive, uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: this.props.sortDirection ? 'neutral' : 'secondary', icon: settings.dataTable.icons.header[this.props.sortDirection === 'desc' ? 'descSortIcon' : this.props.sortDirection === 'asc' ? 'ascSortIcon' : 'defaultSortIcon'] })),
+                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(IconButton, { key: "dropdown", cx: cx$1(css$v.icon, css$v.dropdownIcon, uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), color: "secondary", icon: settings.dataTable.icons.header[this.state.isDropdownOpen ? 'openedDropdownIcon' : 'dropdownIcon'] }))));
+                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) {
@@ -4291,7 +4415,7 @@ class DataTableHeaderCell extends React.Component {
                 return (React.createElement(Tooltip, { content: this.props.areAllFolded
                         ? i18n.tables.columnHeader.expandAllTooltip
                         : i18n.tables.columnHeader.collapseAllTooltip },
-                    React.createElement(IconButton, { color: "secondary", 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: {
+                    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,
                         } })));
@@ -4335,7 +4459,7 @@ class DataTableHeaderCell extends React.Component {
                 }, style: computeStyles },
                 this.renderHeaderCheckbox(),
                 this.renderFoldAllIcon(),
-                this.getColumnCaption(),
+                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 }));
@@ -4348,7 +4472,7 @@ class DataTableHeaderCell extends React.Component {
     }
 }
 
-var css$u = {"root":"FiaHii","caption-wrapper":"_1xCvgX","captionWrapper":"_1xCvgX","align-center":"_1GeYcv","alignCenter":"_1GeYcv","caption":"LXuw0c","truncate":"UR9VW7","upper-case":"bCDwvZ","upperCase":"bCDwvZ","group-cell-tooltip":"CbpXWb","groupCellTooltip":"CbpXWb","group-cell-tooltip-wrapper":"g-1KjA","groupCellTooltipWrapper":"g-1KjA","group-cell-tooltip-text":"ht23fN","groupCellTooltipText":"ht23fN","tooltip-caption":"TJyncB","tooltipCaption":"TJyncB","tooltip-info":"VGb9Sb","tooltipInfo":"VGb9Sb"};
+var css$u = {"root":"_4NgaPv","caption-wrapper":"tqkPmS","captionWrapper":"tqkPmS","align-center":"dj9EMm","alignCenter":"dj9EMm","caption":"wJCrFs","truncate":"yJgSQZ","upper-case":"h-vRIN","upperCase":"h-vRIN","group-cell-tooltip":"Ea2y9v","groupCellTooltip":"Ea2y9v","group-cell-tooltip-wrapper":"esXgV8","groupCellTooltipWrapper":"esXgV8","group-cell-tooltip-text":"BkRU8j","groupCellTooltipText":"BkRU8j","tooltip-caption":"gDhCFt","tooltipCaption":"gDhCFt","tooltip-info":"PevA5B","tooltipInfo":"PevA5B"};
 
 class DataTableHeaderGroupCell extends React.Component {
     constructor() {
@@ -4388,13 +4512,15 @@ class DataTableHeaderGroupCell extends React.Component {
     }
 }
 
-var css$t = {"root":"rU4otq"};
+var css$t = {"root":"_5ND0H0"};
 
-const DataTableHeaderRow = /* @__PURE__ */withMods(DataTableHeaderRow$1, () => [css$t.root, 'uui-dt-vars'], (mods) => ({
-    renderCell: (props) => (React.createElement(DataTableHeaderCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.column.key, columnsGap: mods.columnsGap })),
-    renderGroupCell: (props) => (React.createElement(DataTableHeaderGroupCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.key, columnsGap: mods.columnsGap })),
-    renderConfigButton: () => (React.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: ['config-icon', `uui-size-${settings.dataTable.sizes.header.iconMap[mods.size || settings.dataTable.sizes.header.row]}`], color: "neutral", icon: settings.dataTable.icons.header.configIcon })),
-}));
+const DataTableHeaderRow = /* @__PURE__ */withMods(DataTableHeaderRow$1, () => [css$t.root, 'uui-dt-vars'], (mods) => {
+    return ({
+        renderCell: (props) => (React.createElement(DataTableHeaderCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.column.key, columnsGap: mods.columnsGap })),
+        renderGroupCell: (props) => (React.createElement(DataTableHeaderGroupCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.key, columnsGap: mods.columnsGap })),
+        renderConfigButton: () => (React.createElement(ControlIcon, { key: "configuration", onClick: mods.onConfigButtonClick, size: settings.dataTable.sizes.header.iconMap[mods.size || settings.dataTable.sizes.header.row], cx: ['config-icon'], icon: settings.dataTable.icons.header.configIcon })),
+    });
+});
 
 const normalizeFilterWithPredicates = (filter) => {
     if (!filter) {
@@ -4484,7 +4610,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":"VBOdST","header":"j2V9vY","title":"UOAHC1","removeButton":"q4jR4F","with-search":"ZZAI8r","withSearch":"ZZAI8r"};
+var css$s = {"body":"gHbOXM","header":"OTW1QL","title":"l-OBG1","removeButton":"C6i89p","with-search":"Jfi9eo","withSearch":"Jfi9eo"};
 
 function FilterColumnBody(props) {
     const [predicate, setPredicate] = useState(getDefaultPredicate(props.predicates, props.value));
@@ -4508,7 +4634,7 @@ function FilterColumnBody(props) {
         return props.predicates?.length > 0 && (React__default.createElement("div", { className: css$s.header },
             React__default.createElement(FilterPredicatePanel, { ...panelProps })));
     };
-    return (React__default.createElement(DropdownContainer, { style: { minWidth: '360px' }, cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], ...props },
+    return (React__default.createElement(DropdownContainer, { style: { minWidth: '360px' }, cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], ...props, focusLock: false },
         renderHeader(),
         React__default.createElement(FilterItemBody, { ...props, selectedPredicate: predicate, value: getValue(predicate, props.value), onValueChange: onValueChange })));
 }
@@ -4545,7 +4671,7 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var css$r = {"unpin-icon":"D1A8bo","unpinIcon":"D1A8bo","pin-toggler-icon":"r9EnmR","pinTogglerIcon":"r9EnmR"};
+var css$r = {"unpin-icon":"bP6UdW","unpinIcon":"bP6UdW","pin-toggler-icon":"Ifhc9z","pinTogglerIcon":"Ifhc9z"};
 
 function PinIconButton(props) {
     const i18nLocal = i18n.tables.columnsConfigurationModal;
@@ -4596,7 +4722,7 @@ function getUnpinIcon(params) {
     }
 }
 
-var css$q = {"row-wrapper":"sP89qf","rowWrapper":"sP89qf","pin-icon-button":"Na6WUf","pinIconButton":"Na6WUf","not-pinned":"F1c4OL","notPinned":"F1c4OL","checkbox":"xmktS-","drag-handle":"iKEzSh","dragHandle":"iKEzSh","dnd-disabled":"ud9YbU","dndDisabled":"ud9YbU"};
+var css$q = {"row-wrapper":"jnLfZ-","rowWrapper":"jnLfZ-","pin-icon-button":"wOby6M","pinIconButton":"wOby6M","not-pinned":"PeOGEz","notPinned":"PeOGEz","checkbox":"TRNRi2","drag-handle":"iQ8cp1","dragHandle":"iQ8cp1","dnd-disabled":"RbSSp4","dndDisabled":"RbSSp4"};
 
 const ColumnRow = /* @__PURE__ */React.memo(function ColumnRow(props) {
     const { column } = props;
@@ -4630,7 +4756,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":"zxIZl3","main-panel":"QrvjP8","mainPanel":"QrvjP8","group":"dodTFs","group-title":"d6Wsgy","groupTitle":"d6Wsgy","group-items":"-Udu2w","groupItems":"-Udu2w","no-data":"k5DR4i","noData":"k5DR4i","no-data-title":"UADIfT","noDataTitle":"UADIfT","no-data-sub-title":"_2y020t","noDataSubTitle":"_2y020t","h-divider":"_0KdO2x","hDivider":"_0KdO2x","search-area":"Bz3S3s","searchArea":"Bz3S3s","subgroup-accordion":"gil8Ci","subgroupAccordion":"gil8Ci","subgroup":"TUFjto","subgroup-title":"HIXrhD","subgroupTitle":"HIXrhD"};
+var css$p = {"root":"b0LDqL","main-panel":"F4ibph","mainPanel":"F4ibph","group":"_0GcLUD","group-title":"_51Xf6m","groupTitle":"_51Xf6m","group-items":"ikjaLO","groupItems":"ikjaLO","no-data":"h5eOoR","noData":"h5eOoR","no-data-title":"aAgK1c","noDataTitle":"aAgK1c","no-data-sub-title":"akjGWW","noDataSubTitle":"akjGWW","h-divider":"VOg2dE","hDivider":"VOg2dE","search-area":"a0q1Zx","searchArea":"a0q1Zx","subgroup-accordion":"lB5iGb","subgroupAccordion":"lB5iGb","subgroup":"_5bZYu-","subgroup-title":"LeazTn","subgroupTitle":"LeazTn"};
 
 const renderGroupTitle = (title, amount) => (React.createElement(FlexRow, { cx: css$p.group },
     React.createElement(Text, { size: "none", cx: css$p.groupTitle }, title),
@@ -4733,7 +4859,7 @@ const getChildrenAndRest = (row, rows) => {
     return [children, rest];
 };
 
-var css$o = {"listContainer":"MhvPDr","header":"r-gnBR","group":"gqN6A4","stickyHeader":"moN4dq"};
+var css$o = {"listContainer":"wIa-tG","header":"_55VcoO","group":"aOImlv","stickyHeader":"v4wmts"};
 
 function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
     const rowRef = useRef(undefined);
@@ -4773,7 +4899,7 @@ function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, r
             React__default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
 }
 
-var css$n = {"root":"hukdyK","sticky-header":"ARKxNK","stickyHeader":"ARKxNK","no-results":"t055MF","noResults":"t055MF","icon":"_0CKT68","title":"Xp6OjX"};
+var css$n = {"root":"gs5tAi","sticky-header":"OlbZ1I","stickyHeader":"OlbZ1I","no-results":"IGCZuA","noResults":"IGCZuA","icon":"gcfIP7","title":"HZIFTX"};
 
 function DataTable(props) {
     const { uuiModals } = useUuiContext();
@@ -4822,7 +4948,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":"dP-yyN","title-wrapper":"u-Jp-4","titleWrapper":"u-Jp-4","title":"T9Dy3A","text-wrapper":"LhBHlq","textWrapper":"LhBHlq","selection":"fCdhE4","postfix":"Z63mub","selected":"M5YxAu"};
+var css$m = {"root":"_1iHo7x","title-wrapper":"u8YyzL","titleWrapper":"u8YyzL","title":"QmogUG","text-wrapper":"YhuGTX","textWrapper":"YhuGTX","selection":"-Q0ANM","postfix":"zIXFAA","selected":"av6pcA"};
 
 const FilterPanelItemToggler = /* @__PURE__ */React.forwardRef((props, ref) => {
     const togglerPickerOpened = (e) => {
@@ -4921,7 +5047,7 @@ function FilterPickerBody({ highlightSearchMatches = true, ...restProps }) {
             rows,
         }, e);
         return (React.createElement(React.Fragment, null,
-            React.createElement(DataPickerBody, { ...getListProps(), selectionMode: props.selectionMode, rows: rows, maxHeight: maxHeight, maxWidth: maxWidth, searchSize: settings.pickerInput.sizes.body.row, showSearch: props.showSearch ?? true, getName: getName, value: dataSourceState, onValueChange: handleDataSourceValueChange, renderRow: props.renderRow, onKeyDown: onKeyDown, minCharsToSearch: props.minCharsToSearch, searchDebounceDelay: props.searchDebounceDelay, rawProps: props.rawProps?.body, highlightSearchMatches: props.highlightSearchMatches, flattenSearchResults: view.getConfig().flattenSearchResults }),
+            React.createElement(DataPickerBody, { ...getListProps(), selectionMode: props.selectionMode, rows: rows, maxHeight: maxHeight, maxWidth: maxWidth, searchSize: settings.pickerInput.sizes.body.row, showSearch: props.showSearch ?? true, getName: getName, value: dataSourceState, onValueChange: handleDataSourceValueChange, renderRow: props.renderRow, onKeyDown: onKeyDown, minCharsToSearch: props.minCharsToSearch, searchDebounceDelay: props.searchDebounceDelay, rawProps: props.rawProps?.body, highlightSearchMatches: props.highlightSearchMatches, flattenSearchResults: view.getConfig().flattenSearchResults, autoFocusSearch: false }),
             renderFooter()));
     };
     return renderBody();
@@ -5047,7 +5173,7 @@ function FilterRangeDatePickerBody(props) {
         renderFooter()));
 }
 
-var css$l = {"container":"EzbFWT"};
+var css$l = {"container":"yCZxVJ"};
 
 function FilterNumericBody(props) {
     const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
@@ -5358,7 +5484,7 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = /* @__PURE__ */React__default.memo(FiltersToolbarImpl);
 
-var css$k = {"delete-button":"-jDuQP","deleteButton":"-jDuQP","tab-button":"feveqX","tabButton":"feveqX","targetOpen":"-r6PFN"};
+var css$k = {"delete-button":"PAinEU","deleteButton":"PAinEU","tab-button":"v70RAO","tabButton":"v70RAO","targetOpen":"cBSM75"};
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = useUuiContext();
@@ -5434,7 +5560,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":"_3B8qbQ","presetInputCell":"_3B8qbQ","preset-input":"spVgUw","presetInput":"spVgUw"};
+var css$j = {"preset-input-cell":"K3OTly","presetInputCell":"K3OTly","preset-input":"_3fvOW-","presetInput":"_3fvOW-"};
 
 function PresetInput(props) {
     const [presetCaption, setPresetCaption] = useState(props.preset?.name || '');
@@ -5461,7 +5587,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":"w1WNmT","activePreset":"qPfpzE"};
+var css$i = {"preset":"im1Nbl","activePreset":"iVZ1pv"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = useState(false);
@@ -5486,7 +5612,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":"Cd-6Gd","dropdownDeleteIcon":"LYMigY","presetsWrapper":"b970nw","addPresetContainer":"vznxrD","dropContainer":"E9KMxm"};
+var css$h = {"divider":"pkfpmt","dropdownDeleteIcon":"ElQbms","presetsWrapper":"w09K5k","addPresetContainer":"_137MKw","dropContainer":"_1n6Nv-"};
 
 function PresetsPanel(props) {
     const [isAddingPreset, setIsAddingPreset] = useState(false);
@@ -5535,9 +5661,9 @@ function PresetsPanel(props) {
             React__default.createElement(AdaptivePanel, { items: getPanelItems() }))));
 }
 
-var css$g = {"root":"-Zowr5"};
+var css$g = {"root":"z5tlxk"};
 
-var css$f = {"root":"eXY3tv","burger-content":"n2eF2e","burgerContent":"n2eF2e"};
+var css$f = {"root":"bmAw-b","burger-content":"EAx6K7","burgerContent":"EAx6K7"};
 
 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); }
@@ -5580,7 +5706,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
 };
 var ForwardRef$2 = /*#__PURE__*/forwardRef(SvgNavigationArrowDownOutline);
 
-var css$e = {"root":"YNfGRL","button-primary":"_34UpRL","buttonPrimary":"_34UpRL","button-secondary":"j9QX5u","buttonSecondary":"j9QX5u","hasIcon":"r0hAab","dropdown":"hDZv34"};
+var css$e = {"root":"uWJzFd","button-primary":"FGo4Gk","buttonPrimary":"FGo4Gk","button-secondary":"jw-yNL","buttonSecondary":"jw-yNL","hasIcon":"vcEXxU","dropdown":"AicG-l"};
 
 function applyBurgerButtonMods(props) {
     return [
@@ -5605,13 +5731,13 @@ const BurgerButton = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         }, dropdownIcon: ForwardRef$2 }));
 });
 
-var css$d = {"search-input":"TKibWd","searchInput":"TKibWd"};
+var css$d = {"search-input":"voTcNB","searchInput":"voTcNB"};
 
 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":"-iFT8A","group-header":"YBDc6P","groupHeader":"YBDc6P","group-name":"RALnKy","groupName":"RALnKy","line":"_5kyLC3"};
+var css$c = {"root":"i3JYel","group-header":"psafjs","groupHeader":"psafjs","group-name":"rrCOyP","groupName":"rrCOyP","line":"BQg0OA"};
 
 function BurgerGroupHeader(props) {
     return (React.createElement("div", { className: cx(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
@@ -5619,7 +5745,7 @@ function BurgerGroupHeader(props) {
         React.createElement("span", { className: css$c.groupName }, props.caption)));
 }
 
-var css$b = {"root":"y98K5L","type-primary":"HOG0rc","typePrimary":"HOG0rc","type-secondary":"EXGQyl","typeSecondary":"EXGQyl"};
+var css$b = {"root":"QcCInU","type-primary":"Ar1F9z","typePrimary":"Ar1F9z","type-secondary":"_7jjV3H","typeSecondary":"_7jjV3H"};
 
 const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { type, ...clickableProps } = props;
@@ -5647,7 +5773,7 @@ const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         props.isDropdown && (React.createElement(IconContainer, { icon: ForwardRef$P, flipY: props.isOpen }))));
 });
 
-var css$a = {"dropdown-body":"Vgu9hK","dropdownBody":"Vgu9hK"};
+var css$a = {"dropdown-body":"O0aoEX","dropdownBody":"O0aoEX"};
 
 function MainMenuDropdown(props) {
     const handleEscape = (e, onClose, isOpen) => {
@@ -5655,10 +5781,13 @@ function MainMenuDropdown(props) {
             onClose();
         }
     };
-    return (React__default.createElement(Dropdown$1, { renderTarget: (dropdownProps) => (React__default.createElement(MainMenuButton, { caption: props.caption, ...dropdownProps, rawProps: props.rawProps, isActive: props.isActive, isDropdown: true })), renderBody: (dropdownBodyProps) => (React__default.createElement(FocusLock, { returnFocus: true, persistentFocus: true, lockProps: {
+    return (React__default.createElement(Dropdown$1, { renderTarget: (dropdownProps) => (React__default.createElement(MainMenuButton, { caption: props.caption, ...dropdownProps, rawProps: {
+                'aria-haspopup': 'menu',
+                ...props.rawProps,
+            }, isActive: props.isActive, isDropdown: true })), renderBody: (dropdownBodyProps) => (React__default.createElement(FocusLock, { returnFocus: true, persistentFocus: true, lockProps: {
                 onKeyDown: (e) => handleEscape(e, dropdownBodyProps.onClose, dropdownBodyProps.isOpen),
             } },
-            React__default.createElement("div", { className: cx(css$a.dropdownBody, 'uui-main_menu-dropdown', props.cx) }, props.renderBody({ ...dropdownBodyProps })))), placement: "bottom-start" }));
+            React__default.createElement("div", { className: cx(css$a.dropdownBody, 'uui-main_menu-dropdown', props.cx), role: "menu" }, props.renderBody({ ...dropdownBodyProps })))), placement: "bottom-start" }));
 }
 
 function applyMainMenuMods() {
@@ -5690,12 +5819,12 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
 };
 var ForwardRef$1 = /*#__PURE__*/forwardRef(SvgNavigationGlobalMenuOutlineOutline);
 
-var css$9 = {"global-menu-btn":"xHcAA4","globalMenuBtn":"xHcAA4","global-menu-icon":"ZZ0NV5","globalMenuIcon":"ZZ0NV5"};
+var css$9 = {"global-menu-btn":"_7Y3hFc","globalMenuBtn":"_7Y3hFc","global-menu-icon":"IhinSn","globalMenuIcon":"IhinSn"};
 
 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":"rlYaHu","open":"dg1dOo","folding-arrow":"vbDCe1","foldingArrow":"vbDCe1"};
+var css$8 = {"container":"lO5Him","open":"VTrHfo","folding-arrow":"y74cEG","foldingArrow":"y74cEG"};
 
 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 }),
@@ -5703,15 +5832,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":"aRXFjU","searchInput":"aRXFjU"};
+var css$7 = {"search-input":"xu7NSx","searchInput":"xu7NSx"};
 
 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":"hyXzI4"};
+var css$6 = {"container":"vxSSzb"};
 
 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":"CJivvI"};
+var css$5 = {"root":"-tLxO2"};
 
 const Anchor = /* @__PURE__ */withMods(Anchor$1, () => [css$5.root]);
 
@@ -5769,7 +5898,7 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgFileCloudUploadFill);
 
-var css$4 = {"root":"_2a6aC-","drop-start":"B2U0ud","dropStart":"B2U0ud","drop-over":"V-EAy5","dropOver":"V-EAy5","link":"_3dIe-E","drop-area":"rdRoFt","dropArea":"rdRoFt","drop-caption":"APzu6R","dropCaption":"APzu6R","icon-blue":"CBwhKR","iconBlue":"CBwhKR"};
+var css$4 = {"root":"mN1Gjg","drop-start":"FEMtJb","dropStart":"FEMtJb","drop-over":"_7cmFqo","dropOver":"_7cmFqo","link":"_5WohnP","drop-area":"xKURY-","dropArea":"xKURY-","drop-caption":"lP5SCF","dropCaption":"lP5SCF","icon-blue":"gs4mGN","iconBlue":"gs4mGN"};
 
 function DropSpot(props) {
     const getInfoText = typeof props.infoText === 'string'
@@ -5787,7 +5916,7 @@ function DropSpot(props) {
     return React.createElement(DropSpot$1, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
 }
 
-var css$3 = {"root":"aZa3pC"};
+var css$3 = {"root":"HyZm4g"};
 
 const SvgCircleProgress = /* @__PURE__ */React.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
@@ -5798,7 +5927,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":"l-KkEK","file-name":"T-lQVT","fileName":"T-lQVT","default-color":"SLuifX","defaultColor":"SLuifX","doc-color":"eC7cqO","docColor":"eC7cqO","xls-color":"iqyqLf","xlsColor":"iqyqLf","pdf-color":"ECFGME","pdfColor":"ECFGME","movie-color":"Gr8Cjs","movieColor":"Gr8Cjs","img-color":"_0L4iqL","imgColor":"_0L4iqL","mov-color":"GQ-0pz","movColor":"GQ-0pz","error-block":"_0P3G9Z","errorBlock":"_0P3G9Z","icons-block":"rhmwad","iconsBlock":"rhmwad"};
+var css$2 = {"root":"NmvPaQ","file-name":"-d4DxY","fileName":"-d4DxY","default-color":"epcNaA","defaultColor":"epcNaA","doc-color":"ntMF3f","docColor":"ntMF3f","xls-color":"aZ4rNx","xlsColor":"aZ4rNx","pdf-color":"pLG29X","pdfColor":"pLG29X","movie-color":"xEh2xz","movieColor":"xEh2xz","img-color":"AqsGH0","imgColor":"AqsGH0","mov-color":"NqRUSc","movColor":"NqRUSc","error-block":"hbccqf","errorBlock":"hbccqf","icons-block":"ls-IyX","iconsBlock":"ls-IyX"};
 
 const FileCard = /* @__PURE__ */React.forwardRef((props, ref) => {
     const [isLoadingShow, setIsLoadingShow] = React.useState(true);
@@ -5917,7 +6046,7 @@ const getErrorPageConfig = () => ({
     },
 });
 
-var css$1 = {"container":"_1izzyN"};
+var css$1 = {"container":"i1fiTJ"};
 
 const ErrorPage = (props) => {
     const isMobileScreen = isMobile();
@@ -5929,7 +6058,7 @@ const ErrorPage = (props) => {
             props?.supportLink && React__default.createElement("div", { className: "uui-error-support-link" }, props?.supportLink))));
 };
 
-var css = {"recovery-spinner":"-KL8no","recoverySpinner":"-KL8no","recovery-message":"ApZ9Nl","recoveryMessage":"ApZ9Nl","modal-blocker":"DRshx5","modalBlocker":"DRshx5","modalFadeIn":"EWPamP"};
+var css = {"recovery-spinner":"wLKQLK","recoverySpinner":"wLKQLK","recovery-message":"ar3H23","recoveryMessage":"ar3H23","modal-blocker":"GO1LaW","modalBlocker":"GO1LaW","modalFadeIn":"N9-knf"};
 
 function ErrorHandler(props) {
     const { uuiNotifications, uuiModals, uuiApi } = useUuiContext();