@epam/uui 6.2.0 → 6.3.1

package/index.js

@@ -14,6 +14,8 @@ var updateLocale = require('dayjs/plugin/updateLocale.js');
 var objectSupport = require('dayjs/plugin/objectSupport');
 var customParseFormat = require('dayjs/plugin/customParseFormat.js');
 var isoWeek = require('dayjs/plugin/isoWeek.js');
+var overlayscrollbarsReact = require('overlayscrollbars-react');
+require('overlayscrollbars/styles/overlayscrollbars.css');
 var isEqual = require('react-fast-compare');
 var FocusLock = require('react-focus-lock');
 
@@ -189,7 +191,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#yqxngil7x52qx4twn_a)"
+    clipPath: "url(#hicei867eaayu7zc8_a)"
   }, _path$I || (_path$I = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M150.585 1.535C49.483-11.495 27.481 61.805 45.725 97.481c10.581 20.69-39.64 70.792 17.744 81.468 27.538 5.123 36-13.341 62.433-10.655 35.4 3.6 148.167-4.73 88.349-78.915-31.713-39.335 1.026-79.506-63.666-87.844Z",
     fill: "#F5F6FA"
@@ -210,7 +212,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M86.786 22.982c-2.55 0-4.965 2.07-4.965 4.552V120.6c0 2.484 2.4 4.572 4.965 4.572h88.101c2.582 0 4.986-2.089 4.986-4.572V27.534c0-2.464-2.418-4.552-4.986-4.552h-88.1Zm-5.793 4.552c0-3.022 2.874-5.38 5.793-5.38h88.101c2.935 0 5.814 2.374 5.814 5.38V120.6c0 3.021-2.86 5.4-5.814 5.4h-88.1c-2.94 0-5.794-2.381-5.794-5.4V27.534Z",
     fill: "#1D1E26"
   })), /*#__PURE__*/React__namespace.createElement("mask", {
-    id: "yqxngibavdrndpbws_b",
+    id: "hicei8f3owhh88tl_b",
     style: {
       maskType: "alpha"
     },
@@ -223,7 +225,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M174.887 125.586h-88.1c-2.752 0-5.38-2.234-5.38-4.986V27.534c0-2.752 2.644-4.966 5.38-4.966h88.1c2.752 0 5.4 2.23 5.4 4.966V120.6c0 2.752-2.632 4.986-5.4 4.986Z",
     fill: "#9BDEFF"
   }))), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
-    mask: "url(#yqxngibavdrndpbws_b)",
+    mask: "url(#hicei8f3owhh88tl_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -309,7 +311,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M24.73 96.184a.414.414 0 0 1 .581.06l48.646 59.751a.413.413 0 1 1-.642.523L24.67 96.766a.414.414 0 0 1 .06-.582Z",
     fill: "#fff"
   }))), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "yqxngil7x52qx4twn_a"
+    id: "hicei867eaayu7zc8_a"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
@@ -960,14 +962,14 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
 };
 var ForwardRef$4 = /*#__PURE__*/React.forwardRef(SvgSearchWithBackground);
 
-var css$1w = {"root":"hg0ux0","uui-spinner":"dLpTPh","uuiSpinner":"dLpTPh"};
+var css$1w = {"root":"q81NXg","uui-spinner":"aSawZ7","uuiSpinner":"aSawZ7"};
 
 function applySpinnerMods() {
     return [css$1w.root, 'uui-spinner'];
 }
 const Spinner = /* @__PURE__ */uuiCore.withMods(uuiComponents.Spinner, applySpinnerMods);
 
-var css$1v = {"root":"StHx2D","loading-word":"n2b-qa","loadingWord":"n2b-qa","animated-loading":"_90z0qL","animatedLoading":"_90z0qL","skeleton_loading":"_28XDvH","skeletonLoading":"_28XDvH"};
+var css$1v = {"root":"tX0Cx5","loading-word":"LpvWng","loadingWord":"LpvWng","animated-loading":"WYZ6VB","animatedLoading":"WYZ6VB","skeleton_loading":"ymDJTM","skeletonLoading":"ymDJTM"};
 
 const TextPlaceholder = (props) => {
     const pattern = ' ';
@@ -984,7 +986,7 @@ const TextPlaceholder = (props) => {
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
-var css$1u = {"root":"_57AaT8","line-height":"QBtxhX","lineHeight":"QBtxhX","font-size":"_21cBsU","fontSize":"_21cBsU"};
+var css$1u = {"root":"_6atkB5","line-height":"OQ81vG","lineHeight":"OQ81vG","font-size":"byoVK-","fontSize":"byoVK-"};
 
 function applyTextMods(mods) {
     return [
@@ -1011,7 +1013,7 @@ const Text = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Text, appl
     };
 });
 
-var css$1t = {"root":"jGr-EP"};
+var css$1t = {"root":"sL8FHg"};
 
 const Blocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.Blocker, () => [css$1t.root], () => ({ renderSpinner: settings.blocker.renderSpinner }));
 
@@ -1516,7 +1518,7 @@ const settings = {
     textInput: textInputSettings,
 };
 
-var css$1s = {"root":"SR8RJb"};
+var css$1s = {"root":"_6gOP-j"};
 
 function applyButtonMods(mods) {
     return [
@@ -1534,7 +1536,7 @@ const Button = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Button,
     };
 });
 
-var css$1r = {"root":"_1dZe0N"};
+var css$1r = {"root":"uk-SwI"};
 
 function applyIconButtonMods(props) {
     return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1r.root];
@@ -1571,7 +1573,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":"_1EyVrV"};
+var css$1q = {"root":"_1lsq8k"};
 
 const DEFAULT_COLOR = 'primary';
 const LinkButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
@@ -1601,7 +1603,7 @@ const LinkButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
         props.isDropdown && (React__namespace.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1p = {"root":"nDrvBH"};
+var css$1p = {"root":"_3rOezU"};
 
 const CountIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
     return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
@@ -1613,9 +1615,11 @@ const CountIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
         ]) }, props.caption));
 });
 
-var css$1o = {"root":"yeDi6j","withNotify":"_0sIeUG"};
+var css$1o = {"root":"E4aDmz","withNotify":"hBLeej"};
 
-const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
+const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, refExternal) => {
+    const refLocal = React__namespace.default.useRef(null);
+    const ref = refExternal ?? refLocal;
     const { isActive } = uuiCore.useIsActive({
         isLinkActive: props.isLinkActive,
         link: props.link,
@@ -1631,11 +1635,22 @@ const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, ref
     ];
     const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.tabButton.icons.dropdownIcon;
     const ClearIcon = props.clearIcon ? props.clearIcon : settings.tabButton.icons.clearIcon;
+    const handleOnKeyDown = (event) => {
+        props.rawProps?.onKeyDown?.(event);
+        const isLink = (props.link !== undefined
+            || props.href !== undefined);
+        if (isLink
+            && event.code === 'Space'
+            && typeof ref != 'function') {
+            ref.current?.click();
+        }
+    };
     return (React__namespace.default.createElement(uuiComponents.Clickable, { ...props, rawProps: {
             role: 'tab',
             'aria-haspopup': props.isDropdown,
             'aria-expanded': props.isOpen,
             ...props.rawProps,
+            onKeyDown: handleOnKeyDown,
         }, cx: styles, ref: ref },
         props.icon && props.iconPosition !== 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         (props.caption || props.withNotify) && (React__namespace.default.createElement("div", { className: uuiCore.cx(uuiCore.uuiElement.caption) },
@@ -1647,13 +1662,13 @@ const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, ref
         props.onClear && !props.isDisabled && (React__namespace.default.createElement(uuiComponents.IconContainer, { cx: uuiCore.uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
 });
 
-var css$1n = {"root":"fjU1aJ","noLeftPadding":"IMErJL","foldingArea":"Dq35m6","onlyFoldable":"_5yB0ZL","captionWrapper":"y9Xln-","withNotify":"DyWm7v"};
+var css$1n = {"root":"_3fCuzD","noLeftPadding":"AXdwiA","foldingArea":"FDqszx","onlyFoldable":"_36ENZj","captionWrapper":"hQUS4-","withNotify":"x0g2Et"};
 
-var css$1m = {"root":"vfgS47"};
+var css$1m = {"root":"eICEHK"};
 
 const AvatarStack = /* @__PURE__ */uuiCore.withMods(uuiComponents.AvatarStack, () => [css$1m.root]);
 
-var css$1l = {"root":"WcDOil"};
+var css$1l = {"root":"_6EKP9S"};
 
 const DEFAULT_FILL = 'solid';
 function applyBadgeMods(mods) {
@@ -1681,7 +1696,7 @@ const Badge = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) =>
         props.isDropdown && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1k = {"root":"kPrZII"};
+var css$1k = {"root":"r4wCPX"};
 
 function applyTagMods(props) {
     return [
@@ -1709,7 +1724,7 @@ const Tag = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
         props.onClear && !props.isDisabled && (React__namespace.default.createElement(uuiComponents.IconContainer, { cx: uuiCore.uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
 });
 
-var css$1j = {"root":"Elp8Rf","page":"zQw1gf","spacer":"S9RWzE","mode-ghost":"nQX-4b","modeGhost":"nQX-4b"};
+var css$1j = {"root":"mcySYP","page":"MOs1r0","spacer":"_5QEOm4","mode-ghost":"zODZyj","modeGhost":"zODZyj"};
 
 function Paginator(props) {
     const renderPaginator = (params) => (React__namespace.default.createElement("nav", { role: "navigation", className: cx__default.default(css$1j.root, 'uui-paginator', `uui-size-${props.size || settings.paginator.sizes.default}`), ...params.rawProps },
@@ -1726,14 +1741,14 @@ function Paginator(props) {
     return React__namespace.default.createElement(uuiComponents.Paginator, { ...props, render: renderPaginator });
 }
 
-var css$1i = {"root":"vhIxQ9","progress-bar":"pozs0V","progressBar":"pozs0V","progressBar-indeterminate":"gRJ3yy","progressBarIndeterminate":"gRJ3yy","size-12":"Gi2A94","size12":"Gi2A94","size-18":"Pr17su","size18":"Pr17su","size-24":"T0nZ95","size24":"T0nZ95"};
+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"};
 
 const IndeterminateBar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     return (React__namespace.createElement("div", { ref: ref, className: cx__default.default('uui-indeterminate_bar', props.cx, css$1i.root, css$1i[`size-${props.size || 12}`]) },
         React__namespace.createElement("div", { className: cx__default.default(css$1i.progressBar) })));
 });
 
-var css$1h = {"root":"wuzmu-","striped":"JoscLR","animate-stripes":"uqDgIM","animateStripes":"uqDgIM","size-12":"qK3Wno","size12":"qK3Wno","size-18":"ZblyNp","size18":"ZblyNp","size-24":"pG9dMv","size24":"pG9dMv"};
+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"};
 
 const DEFAULT_SIZE = '12';
 function applyProgressBarMods(mods) {
@@ -1748,14 +1763,14 @@ const ProgressBar = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Pro
     hideLabel: props.hideLabel || props.striped,
 }));
 
-var css$1g = {"root":"hpZhtt"};
+var css$1g = {"root":"Eo7a2N"};
 
 const IndicatorBar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const { progress } = props;
     return progress || progress === 0 ? (React__namespace.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx__default.default(css$1g.root, props.cx), hideLabel: true })) : (React__namespace.createElement(IndeterminateBar, { ref: ref, cx: cx__default.default(css$1g.root, props.cx) }));
 });
 
-var css$1f = {"root":"qUeWV-"};
+var css$1f = {"root":"_1DokyX"};
 
 const StatusIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
     return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
@@ -1770,7 +1785,7 @@ const StatusIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
         React__namespace.default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
 });
 
-var css$1e = {"root":"SSMIJB"};
+var css$1e = {"root":"aAyymM"};
 
 function applyCheckboxMods(mods) {
     return [
@@ -1788,7 +1803,7 @@ const applyUUICheckboxProps = (props) => {
 };
 const Checkbox = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$1d = {"root":"sL80J9"};
+var css$1d = {"root":"-DKtr0"};
 
 function applyRadioInputMods(mods) {
     return [
@@ -1800,7 +1815,7 @@ function applyRadioInputMods(mods) {
 }
 const RadioInput = /* @__PURE__ */uuiCore.withMods(uuiComponents.RadioInput, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : settings.radioInput.icons.dotIcon }));
 
-var css$1c = {"root":"Yqq3Qx"};
+var css$1c = {"root":"BCYGx0"};
 
 function applySwitchMods(mods) {
     return [
@@ -1824,7 +1839,7 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var textInputCss = {"root":"ZrE20o"};
+var textInputCss = {"root":"_9M-jBw"};
 
 const DEFAULT_MODE$3 = EditMode.FORM;
 function applyTextInputMods(mods) {
@@ -1849,7 +1864,7 @@ const SearchInput = /* @__PURE__ */React__namespace.default.forwardRef((props, r
         } }));
 });
 
-var css$1b = {"root":"M12JiO"};
+var css$1b = {"root":"BRliMG"};
 
 const ControlGroup = /* @__PURE__ */uuiCore.withMods(uuiComponents.ControlGroup, () => [css$1b.root, 'uui-control-group']);
 
@@ -1865,7 +1880,7 @@ function MultiSwitchComponent(props, ref) {
 }
 const MultiSwitch = /* @__PURE__ */React__namespace.forwardRef(MultiSwitchComponent);
 
-var css$1a = {"root":"Ipri2m"};
+var css$1a = {"root":"MmanhM"};
 
 const DEFAULT_MODE$2 = EditMode.FORM;
 function applyNumericInputMods(mods) {
@@ -1885,7 +1900,7 @@ const NumericInput = /* @__PURE__ */uuiCore.withMods(uuiComponents.NumericInput,
     };
 });
 
-var css$19 = {"root":"tBbHl2"};
+var css$19 = {"root":"_4vjOWZ"};
 
 const DEFAULT_MODE$1 = EditMode.FORM;
 function applyTextAreaMods(mods) {
@@ -1926,7 +1941,7 @@ function TREE_SHAKEABLE_INIT$1() {
     };
 }
 
-var css$18 = {"root":"tVEelg"};
+var css$18 = {"root":"I9-1iQ"};
 
 function applyDropdownContainerMods(mods) {
     return [
@@ -1937,7 +1952,7 @@ function applyDropdownContainerMods(mods) {
 }
 const DropdownContainer = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.DropdownContainer, applyDropdownContainerMods);
 
-var css$17 = {"root":"v6lTlF","timepicker-input":"snWvI4","timepickerInput":"snWvI4","ltr-always":"ZOQ3cu","ltrAlways":"ZOQ3cu"};
+var css$17 = {"root":"ZOJ0YA","timepicker-input":"e-YUzP","timepickerInput":"e-YUzP","ltr-always":"_1Ox0Mq","ltrAlways":"_1Ox0Mq"};
 
 const uuiTimePicker = {
     container: 'uui-timepicker-container',
@@ -1982,11 +1997,11 @@ function TimePickerBody(props) {
                 React__namespace.createElement(uuiComponents.IconContainer, { size: 18, rawProps: { 'aria-label': 'Increment hours' }, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: () => onHoursChange(uuiDayjs.dayjs().set(props.value).add(1, 'h').hour()) }),
                 React__namespace.createElement(uuiComponents.NumericInput, { cx: uuiTimePicker.input, onValueChange: onHoursChange, value: +(uuiDayjs.dayjs()
                         .set(props.value)
-                        .format(MAX_HOURS === FORMAT_12H ? 'hh' : 'HH')), min: MIN_HOURS, max: MAX_HOURS }),
+                        .format(MAX_HOURS === FORMAT_12H ? 'hh' : 'HH')), isReadonly: true, min: MIN_HOURS, max: MAX_HOURS }),
                 React__namespace.createElement(uuiComponents.IconContainer, { size: 18, rawProps: { 'aria-label': 'Decrement hours' }, cx: uuiTimePicker.iconDown, icon: ForwardRef$P, onClick: () => onHoursChange(uuiDayjs.dayjs().set(props.value).subtract(1, 'h').hour()) })),
             React__namespace.createElement("div", { className: uuiTimePicker.elementContainer },
                 React__namespace.createElement(uuiComponents.IconContainer, { size: 18, rawProps: { 'aria-label': 'Increment minutes' }, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: handleMinutesUpClick }),
-                React__namespace.createElement(uuiComponents.NumericInput, { cx: uuiTimePicker.input, onValueChange: onMinutesChange, value: +uuiDayjs.dayjs().set(props.value).format('m'), min: MIN_MINUTES, max: MAX_MINUTES }),
+                React__namespace.createElement(uuiComponents.NumericInput, { cx: uuiTimePicker.input, onValueChange: onMinutesChange, value: +uuiDayjs.dayjs().set(props.value).format('m'), isReadonly: true, min: MIN_MINUTES, max: MAX_MINUTES }),
                 React__namespace.createElement(uuiComponents.IconContainer, { size: 18, rawProps: { 'aria-label': 'Decrement minutes' }, cx: uuiTimePicker.iconDown, icon: ForwardRef$P, onClick: handleMinutesDownClick }))),
         MAX_HOURS === FORMAT_12H && (React__namespace.createElement("div", { className: uuiTimePicker.elementContainer },
             React__namespace.createElement(uuiComponents.IconContainer, { size: 18, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: onTimeTypeChange }),
@@ -2131,7 +2146,7 @@ function TimePickerComponent(props, ref) {
 }
 const TimePicker = /* @__PURE__ */React__namespace.default.forwardRef(TimePickerComponent);
 
-var css$16 = {"root":"MmwXUN"};
+var css$16 = {"root":"IoU-Ru"};
 
 function applyInputAddonMods() {
     return [
@@ -2140,14 +2155,14 @@ function applyInputAddonMods() {
 }
 const InputAddon = /* @__PURE__ */uuiCore.withMods(uuiComponents.InputAddon, applyInputAddonMods);
 
-var css$15 = {"root":"eD3ydC"};
+var css$15 = {"root":"-AAfN7"};
 
 function applySliderMods() {
     return [css$15.root, 'uui-color-neutral'];
 }
 const Slider = /* @__PURE__ */uuiCore.withMods(uuiComponents.Slider, applySliderMods);
 
-var css$14 = {"root":"_4AmZXx"};
+var css$14 = {"root":"vuRe-y"};
 
 function applyTooltipMods(mods) {
     return [
@@ -2157,7 +2172,7 @@ function applyTooltipMods(mods) {
 }
 const Tooltip = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Tooltip, applyTooltipMods);
 
-var css$13 = {"root":"Cxs-JE","tooltip":"oYTMu4"};
+var css$13 = {"root":"_3YNKaf","tooltip":"B2RbXC"};
 
 function applyRatingMods(mods) {
     return [
@@ -2171,7 +2186,7 @@ const Rating = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Rating,
     Tooltip,
 }));
 
-var css$12 = {"drag-handle-wrapper":"O9g2nI","dragHandleWrapper":"O9g2nI","with-indent":"uDs70V","withIndent":"uDs70V","drag-handle":"b0Eh-1","dragHandle":"b0Eh-1","icon-container":"I62G80","iconContainer":"I62G80"};
+var css$12 = {"drag-handle-wrapper":"p47bqp","dragHandleWrapper":"p47bqp","with-indent":"ifaQSF","withIndent":"ifaQSF","drag-handle":"JV6flR","dragHandle":"JV6flR","icon-container":"VpLXPg","iconContainer":"VpLXPg"};
 
 function DataRowAddons(props) {
     const row = props.rowProps;
@@ -2248,7 +2263,7 @@ function VerticalTabButtonComponent(props, ref) {
 }
 const VerticalTabButton = /* @__PURE__ */React__namespace.default.forwardRef(VerticalTabButtonComponent);
 
-var css$11 = {"root":"Q2076c","main-path":"PtWhns","mainPath":"PtWhns","content-wrapper":"q0DVA2","contentWrapper":"q0DVA2","content":"lA2ze0","action-wrapper":"EVYECe","actionWrapper":"EVYECe","icon-wrapper":"oVoOfy","iconWrapper":"oVoOfy","icon":"Mqzicb","close-icon":"ZezkoQ","closeIcon":"ZezkoQ"};
+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"};
 
 const Alert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("div", { role: "alert", ref: ref, className: cx__default.default('uui-alert', css$11.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
     React__namespace.createElement("div", { className: css$11.mainPath },
@@ -2266,7 +2281,7 @@ const ErrorAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => Re
 
 const Dropdown = /* @__PURE__ */uuiCore.withMods(uuiComponents.Dropdown);
 
-var css$10 = {"submenu-root-item-rtl":"YpFLUa","submenuRootItemRtl":"YpFLUa","icon-after":"NhGFmF","iconAfter":"NhGFmF","submenu-root-item":"_7--gFj","submenuRootItem":"_7--gFj","icon-check":"mnjr0c","iconCheck":"mnjr0c","splitter-root":"fHWLWD","splitterRoot":"fHWLWD","splitter":"IJDpbg","header-root":"-rFZXp","headerRoot":"-rFZXp","item-root":"APUUt-","itemRoot":"APUUt-","icon":"_7og0ci","link":"_1Nzp0S","indent":"Zawp1N","selected-mark":"ptEhwV","selectedMark":"ptEhwV"};
+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"};
 
 exports.IDropdownControlKeys = void 0;
 (function (IDropdownControlKeys) {
@@ -2280,25 +2295,34 @@ exports.IDropdownControlKeys = void 0;
 function DropdownMenuContainer(props) {
     const menuRef = React.useRef(null);
     const [currentlyFocused, setFocused] = React.useState(0);
-    const menuItems = menuRef.current ? Array.from(menuRef.current.querySelectorAll(`[role="menuitem"]:not(.${uuiCore.uuiMod.disabled})`)) : [];
+    const getMenuItems = () => {
+        if (!menuRef.current)
+            return [];
+        return Array.from(menuRef.current.querySelectorAll(`[role="menuitem"]:not(.${uuiCore.uuiMod.disabled})`));
+    };
     const changeFocus = (nextFocusedIndex) => {
-        if (menuItems.length > 0) {
+        const menuItems = getMenuItems();
+        if (menuItems.length > 0 && nextFocusedIndex >= 0 && nextFocusedIndex < menuItems.length) {
             setFocused(nextFocusedIndex);
-            menuItems[nextFocusedIndex].focus();
+            const targetItem = menuItems[nextFocusedIndex];
+            targetItem.focus();
         }
     };
     const handleArrowKeys = (e) => {
+        const menuItems = getMenuItems();
         const lastMenuItemsIndex = menuItems.length - 1;
         if (e.key === exports.IDropdownControlKeys.UP_ARROW) {
             changeFocus(currentlyFocused > 0 ? currentlyFocused - 1 : lastMenuItemsIndex);
+            e.stopPropagation(); // TODO: need improvement to track event only for current overlay
             e.preventDefault();
         }
         else if (e.key === exports.IDropdownControlKeys.DOWN_ARROW) {
             changeFocus(currentlyFocused < lastMenuItemsIndex ? currentlyFocused + 1 : 0);
+            e.stopPropagation(); // TODO: need improvement to track event only for current overlay
             e.preventDefault();
         }
         else if (e.key === props.closeOnKey && props.onClose) {
-            e.stopPropagation();
+            e.stopPropagation(); // TODO: need improvement to track event only for current overlay
             props.onClose();
         }
     };
@@ -2391,7 +2415,7 @@ function DropdownMenuSwitchButton(props) {
         React__namespace.default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
 }
 
-var css$$ = {"root":"mVBoLW","mode-block":"xr5Q3f","modeBlock":"xr5Q3f","mode-inline":"UZQL88","modeInline":"UZQL88","padding-0":"vIjOHF","padding0":"vIjOHF","padding-6":"FByQid","padding6":"FByQid","padding-12":"_2gjjpE","padding12":"_2gjjpE","padding-18":"_0ZnoQj","padding18":"_0ZnoQj"};
+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"};
 
 function applyAccordionMods(mods) {
     return [
@@ -2404,7 +2428,7 @@ const Accordion = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Accor
     dropdownIcon: mods.dropdownIcon !== null && settings.accordion.icons.dropdownIcon,
 }));
 
-var css$_ = {"root":"or-LGB","align-items":"gQavrR","alignItems":"gQavrR","justify-content":"_5R-bAR","justifyContent":"_5R-bAR","border-top":"EXawvI","borderTop":"EXawvI","border-bottom":"Jr1DA2","borderBottom":"Jr1DA2","top-shadow":"mLDNO8","topShadow":"mLDNO8","padding":"ocwUAY","margin":"_1F822J","vPadding":"hPOXwK","column-gap":"_8fcsP9","columnGap":"_8fcsP9","row-gap":"_0CBol8","rowGap":"_0CBol8","spacing":"axRVsv"};
+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"};
 
 const FlexCell = /* @__PURE__ */uuiCore.withMods(uuiComponents.FlexCell, () => [css$_.flexCell]);
 
@@ -2456,7 +2480,7 @@ const FlexRow = /* @__PURE__ */React.forwardRef((props, ref) => {
         } }, props.children));
 });
 
-var css$Z = {"root":"_0HdaRS","margin-24":"wscOss","margin24":"wscOss","padding-12":"TW7e6A","padding12":"TW7e6A","padding-24":"VANOgE","padding24":"VANOgE","shadow":"yIWjTA","uui-surface-main":"G8-rfN","uuiSurfaceMain":"G8-rfN"};
+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"};
 
 const Panel = /* @__PURE__ */uuiCore.withMods(uuiComponents.VPanel, (props) => [
     'uui-panel',
@@ -2466,7 +2490,7 @@ const Panel = /* @__PURE__ */uuiCore.withMods(uuiComponents.VPanel, (props) => [
     props.background && css$Z[`uui-${props.background}`],
 ]);
 
-var css$Y = {"root":"OpdXDI"};
+var css$Y = {"root":"_4xKIXG"};
 
 function applyLabeledInputMods(mods) {
     return [
@@ -2483,7 +2507,7 @@ function applyLabeledInputProps(props) {
 }
 const LabeledInput = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.LabeledInput, applyLabeledInputMods, applyLabeledInputProps);
 
-var css$X = {"root":"A-FGtz"};
+var css$X = {"root":"XV08r0"};
 
 function RadioGroup(props) {
     const direction = props.direction || 'vertical';
@@ -2498,18 +2522,79 @@ function RadioGroup(props) {
     })));
 }
 
-var css$W = {"root":"oxpPtB"};
-
-function applyScrollBarsMods() {
-    return [
-        css$W.root, 'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
-    ];
-}
-const ScrollBars = /* @__PURE__ */uuiCore.withMods(uuiComponents.ScrollBars, applyScrollBarsMods);
+var css$W = {"root":"LJvO0J","viewport":"WS08dq"};
+
+var uuiScrollbars;
+(function (uuiScrollbars) {
+    uuiScrollbars["uuiShadowTop"] = "uui-shadow-top";
+    uuiScrollbars["uuiShadowBottom"] = "uui-shadow-bottom";
+    uuiScrollbars["uuiLineTop"] = "uui-line-top";
+    uuiScrollbars["uuiLineBottom"] = "uui-line-bottom";
+})(uuiScrollbars || (uuiScrollbars = {}));
+const ScrollBars = /* @__PURE__ */React.forwardRef((props, ref) => {
+    const { cx: outerCx, children, overflowTopEffect = 'none', overflowBottomEffect = 'none', onScroll, autoHide = 'never', autoHideDelay, rawProps, ...rest } = props;
+    const [shadowElements, setShadowElements] = React.useState({
+        host: null,
+        viewport: null,
+    });
+    const hostRef = React.useRef(null);
+    const viewportRef = React.useRef(null);
+    const containerRef = React.useRef(null);
+    const [initialize, osInstance] = overlayscrollbarsReact.useOverlayScrollbars({
+        options: {
+            scrollbars: {
+                theme: 'uui-scroll-bars',
+                autoHide: autoHide,
+                autoHideDelay: typeof autoHideDelay === 'number' ? autoHideDelay : undefined,
+            },
+        },
+        events: {
+            scroll: (_inst, ev) => {
+                onScroll?.(ev);
+            },
+        },
+    });
+    React.useEffect(() => {
+        const host = hostRef.current;
+        const vp = viewportRef.current;
+        if (!host || !vp)
+            return;
+        initialize({
+            target: host,
+            elements: {
+                viewport: vp,
+                content: vp,
+            },
+        });
+        return () => {
+            osInstance()?.destroy();
+        };
+    }, [initialize, osInstance]);
+    React.useEffect(() => {
+        const instance = osInstance();
+        if (!instance)
+            return;
+        const elements = instance.elements();
+        setShadowElements({
+            host: elements.host,
+            viewport: elements.viewport,
+        });
+    }, [osInstance]);
+    uuiCore.useScrollShadows(shadowElements.host, shadowElements.viewport);
+    React.useImperativeHandle(ref, () => {
+        return {
+            container: containerRef.current,
+            view: viewportRef.current,
+        };
+    }, []);
+    return (React__namespace.default.createElement("div", { ref: hostRef, className: cx__default.default(css$W.root, outerCx, 'uui-scroll-bars', overflowTopEffect === 'shadow' && uuiScrollbars.uuiShadowTop, overflowBottomEffect === 'shadow' && uuiScrollbars.uuiShadowBottom, overflowTopEffect === 'line' && uuiScrollbars.uuiLineTop, overflowBottomEffect === 'line' && uuiScrollbars.uuiLineBottom), ...rest, "data-overlayscrollbars-initialize": "" },
+        React__namespace.default.createElement("div", { className: css$W.viewport, "data-overlayscrollbars-contents": "", ref: (node) => { viewportRef.current = node; }, ...rawProps }, children)));
+});
+ScrollBars.displayName = 'ScrollBars';
 
-var css$V = {"scroll-container":"_5eIPxb","scrollContainer":"_5eIPxb","list-container":"nkQnrp","listContainer":"nkQnrp"};
+var css$V = {"scroll-container":"trLwuQ","scrollContainer":"trLwuQ","list-container":"_8fY7le","listContainer":"_8fY7le"};
 
-const VirtualList = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
+const VirtualList = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
     const { listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef, } = uuiCore.useVirtualList({
         value: props.value,
         onValueChange: props.onValueChange,
@@ -2517,38 +2602,19 @@ const VirtualList = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
         rowsCount: props.rowsCount,
         rowsSelector: props.rowsSelector,
     });
-    React__namespace.useImperativeHandle(ref, () => scrollContainerRef.current, [scrollContainerRef.current]);
-    const scrollShadows = uuiCore.useScrollShadows({ root: scrollContainerRef.current });
+    React__namespace.default.useImperativeHandle(ref, () => scrollContainerRef.current, [scrollContainerRef.current]);
     const renderRows = () => props.renderRows?.({
-        listContainerRef, estimatedHeight, offsetY, scrollShadows,
-    }) || (React__namespace.createElement("div", { className: css$V.listContainer, style: { minHeight: `${estimatedHeight}px` } },
-        React__namespace.createElement("div", { ref: listContainerRef, role: props.role, style: { marginTop: offsetY } }, props.rows)));
-    const renderView = ({ style }) => (React__namespace.createElement(VirtualListView, { isLoading: props.isLoading, style: style, rawProps: props.rawProps, renderBlocker: props.renderBlocker }));
-    const scrollBarsRef = React__namespace.useCallback((scrollbars) => {
-        if (!scrollbars?.container?.firstChild)
+        listContainerRef, estimatedHeight, offsetY,
+    }) || (React__namespace.default.createElement("div", { className: css$V.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+        React__namespace.default.createElement("div", { ref: listContainerRef, role: props.role, style: { marginTop: offsetY } }, props.rows)));
+    const scrollBarsRef = React__namespace.default.useCallback((scrollbars) => {
+        if (!scrollbars?.view)
             return;
-        scrollContainerRef.current = scrollbars.container.firstChild;
+        scrollContainerRef.current = scrollbars.view;
     }, []);
-    return (React__namespace.createElement(ScrollBars, { cx: uuiCore.cx(css$V.scrollContainer, props.cx, {
-            [uuiCore.uuiMarkers.scrolledLeft]: scrollShadows.horizontalLeft,
-            [uuiCore.uuiMarkers.scrolledRight]: scrollShadows.horizontalRight,
-            [uuiCore.uuiMarkers.scrolledTop]: scrollShadows.verticalTop,
-            [uuiCore.uuiMarkers.scrolledBottom]: scrollShadows.verticalBottom,
-        }), onScroll: handleScroll, renderView: renderView, ref: scrollBarsRef }, renderRows()));
-});
-const VirtualListView = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
-    return (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement("div", { ...props.rawProps, style: {
-                ...props.style,
-                position: 'relative',
-                flex: '1 1 auto',
-                display: 'flex',
-                flexDirection: 'column',
-                overflow: props.isLoading ? 'hidden' : 'scroll',
-                marginRight: props.isLoading ? 0 : props.style.marginRight,
-                marginBottom: props.isLoading ? 0 : props.style.marginBottom,
-            }, ref: ref }, props.children),
-        props.renderBlocker ? props.renderBlocker({ isLoading: props.isLoading }) : React__namespace.createElement(Blocker, { isEnabled: props.isLoading })));
+    return (React__namespace.default.createElement(ScrollBars, { cx: uuiCore.cx(css$V.scrollContainer, props.cx), onScroll: handleScroll, ref: scrollBarsRef, rawProps: props.rawProps, overflowTopEffect: props.overflowTopEffect, overflowBottomEffect: props.overflowBottomEffect },
+        renderRows(),
+        React__namespace.default.createElement(Blocker, { isEnabled: props.isLoading })));
 });
 
 const RichTextView = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || settings.richTextView.sizes.default}`]);
@@ -2579,7 +2645,7 @@ function Tree(props) {
     return (React__namespace.createElement(VirtualList, { value: value, onValueChange: onValueChange, rowsCount: rowsCount, rows: renderedRows, cx: uuiCore.cx(propsCx), role: "tree" }));
 }
 
-var css$U = {"root":"ZWH4Jq"};
+var css$U = {"root":"k86vxv"};
 
 function CheckboxGroup(props) {
     const currentValue = props.value || [];
@@ -2601,7 +2667,87 @@ function CheckboxGroup(props) {
     })));
 }
 
-var css$T = {"root":"uJElha","modal-blocker":"xYD5eb","modalBlocker":"xYD5eb","animateModalBlocker":"s6L8sR","modal":"buo8iX","modal-footer":"_1-Stuw","modalFooter":"_1-Stuw","border-top":"gA2QOE","borderTop":"gA2QOE","modal-header":"lMLcm5","modalHeader":"lMLcm5","border-bottom":"sulsSn","borderBottom":"sulsSn"};
+const Tabs = /* @__PURE__ */React.forwardRef((props, ref) => {
+    const { items, value, onValueChange, borderBottom = true, rawProps, ...otherProps } = props;
+    if (items.length === 0) {
+        return null;
+    }
+    const tabLastIndex = items.length - 1;
+    const getTabCurrentIndex = (tabIdCurrent) => {
+        return items.findIndex((tabProps) => {
+            return tabProps.id === tabIdCurrent;
+        });
+    };
+    const moveToTabWithIndex = (tabIndex) => {
+        /*
+            `id`-s provided in `items` are assigned to the tabs.
+            Unless users manually broke this connection,
+            the index calculation will be correct,
+            and the tab element will be present in the DOM.
+        */
+        const tab = items.at(tabIndex);
+        const tabElement = document.getElementById(tab.id);
+        tabElement.focus();
+    };
+    const moveToPreviousTab = (tabIdCurrent) => {
+        const tabCurrentIndex = getTabCurrentIndex(tabIdCurrent);
+        const tabIndexNext = tabCurrentIndex === 0 ? tabLastIndex : tabCurrentIndex - 1;
+        moveToTabWithIndex(tabIndexNext);
+    };
+    const moveToNextTab = (tabIdCurrent) => {
+        const tabCurrentIndex = getTabCurrentIndex(tabIdCurrent);
+        const tabIndexNext = tabCurrentIndex === tabLastIndex ? 0 : tabCurrentIndex + 1;
+        moveToTabWithIndex(tabIndexNext);
+    };
+    const onKeyDown = (event) => {
+        const focusedTabIdCurrent = event.target.id;
+        // https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#keyboardinteraction
+        switch (event.code) {
+            case 'ArrowLeft': {
+                moveToPreviousTab(focusedTabIdCurrent);
+                break;
+            }
+            case 'ArrowRight': {
+                moveToNextTab(focusedTabIdCurrent);
+                break;
+            }
+            case 'Home': {
+                moveToTabWithIndex(0);
+                break;
+            }
+            case 'End': {
+                moveToTabWithIndex(tabLastIndex);
+                break;
+            }
+        }
+    };
+    return (React__namespace.default.createElement(FlexRow, { ref: ref, borderBottom: borderBottom, rawProps: {
+            role: 'tablist',
+            'aria-orientation': 'horizontal',
+            ...rawProps,
+        }, ...otherProps }, items.map((tabProps) => {
+        const { id } = tabProps;
+        const handleOnClick = () => {
+            onValueChange(id);
+            tabProps.onClick?.();
+        };
+        const handleOnKeyDown = (event) => {
+            onKeyDown(event);
+            tabProps.rawProps?.onKeyDown?.(event);
+        };
+        const isActive = id === value;
+        const tabIndex = isActive ? undefined : -1;
+        return (React__namespace.default.createElement(TabButton, { key: id, isActive: isActive, tabIndex: tabIndex, ...tabProps, onClick: handleOnClick, rawProps: {
+                id,
+                'aria-selected': isActive,
+                ...tabProps.rawProps,
+                onKeyDown: handleOnKeyDown,
+            } }));
+    })));
+});
+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"};
 
 const ModalBlocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalBlocker, () => [css$T.modalBlocker]);
 const ModalWindow = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalWindow, () => [css$T.root, css$T.modal], (props) => {
@@ -2793,7 +2939,7 @@ const TREE_SHAKEABLE_INIT = () => ({
 });
 const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
 
-var css$S = {"root":"nCiB38","icon-wrapper":"O-zcGy","iconWrapper":"O-zcGy","action-wrapper":"y-7SIi","actionWrapper":"y-7SIi","close-icon":"fcTSmE","closeIcon":"fcTSmE","main-path":"G-efK0","mainPath":"G-efK0","content":"lkS2A3","close-wrapper":"ZC6vZ8","closeWrapper":"ZC6vZ8","clear-notifications":"aDBAE0","clearNotifications":"aDBAE0"};
+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"};
 
 const NotificationCard = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
     const notificationCardNode = React__namespace.default.useRef(null);
@@ -2826,7 +2972,7 @@ function ClearNotification() {
         React__namespace.default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
 }
 
-var css$R = {"footer":"BXu-K-"};
+var css$R = {"footer":"sTPayW"};
 
 class ConfirmationModal extends React__namespace.Component {
     render() {
@@ -2868,7 +3014,7 @@ function useReliableForceUpdate() {
     return red[1];
 }
 
-var css$Q = {"root":"Kehh-v","container":"_9AWgBo"};
+var css$Q = {"root":"NqfEPK","container":"qlxhN-"};
 
 const defaultFormat = 'MMM D, YYYY';
 const valueFormat = 'YYYY-MM-DD';
@@ -3086,14 +3232,14 @@ function DatePickerHeader({ navIconLeft, navIconRight, value: { month, view }, o
             React__namespace.createElement(Button, { icon: navIconRight || settings.datePicker.icons.body.nextIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
 }
 
-var css$P = {"root":"RoEgIt"};
+var css$P = {"root":"e9n0iE"};
 
 function applyDateSelectionMods() {
     return [css$P.root, `uui-size-${settings.datePicker.sizes.body}`];
 }
 const Calendar = /* @__PURE__ */uuiCore.withMods(uuiComponents.Calendar, applyDateSelectionMods);
 
-var css$O = {"root":"cIwFTj"};
+var css$O = {"root":"RtXxRP"};
 
 const uuiDatePickerBody = {
     wrapper: 'uui-datepicker-body-wrapper',
@@ -3214,7 +3360,7 @@ function DatePickerComponent(props, ref) {
 }
 const DatePicker = /* @__PURE__ */React__namespace.default.forwardRef(DatePickerComponent);
 
-var css$N = {"date-input":"_2tZSi7","dateInput":"_2tZSi7","root":"NV5l08","separator":"_38ISk1"};
+var css$N = {"date-input":"Qmi952","dateInput":"Qmi952","root":"c8Uueg","separator":"wOOKpz"};
 
 const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isInvalid, isReadonly, size, disableClear, rawProps, value, inFocus, format, onValueChange, onFocusInput, onBlurInput, onClick, getPlaceholder, filter, onKeyDown, preventEmptyFromDate, preventEmptyToDate, id, cx: classes, }, ref) => {
     const [inputValue, setInputValue] = React.useState(toCustomDateRangeFormat(value, format));
@@ -3285,7 +3431,7 @@ const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isIn
         React__namespace.default.createElement(TextInput, { cx: uuiCore.cx(css$N.dateInput, inFocus === 'to' && uuiCore.uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.rangeDatePicker.sizes.default, value: inputValue.to || undefined, 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 })));
 });
 
-var css$M = {"root":"JXWS7P"};
+var css$M = {"root":"uIPHQO"};
 
 const uuiPresets = {
     container: 'uui-presets-container',
@@ -3305,7 +3451,7 @@ function CalendarPresets(props) {
         getPresets(props.presets).map((item) => (React__namespace.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: settings.rangeDatePicker.sizes.preset })))));
 }
 
-var css$L = {"root":"BRPQ2v","container":"eq16uM","day-selection":"VMBu16","daySelection":"VMBu16","from-picker":"-VtEZ-","fromPicker":"-VtEZ-","to-picker":"xUOMw5","toPicker":"xUOMw5","bodes-wrapper":"fNJvww","bodesWrapper":"fNJvww","blocker":"jS9UMi"};
+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"};
 
 const uuiRangeDatePickerBody = {
     inRange: 'uui-range-datepicker-in-range',
@@ -3318,7 +3464,7 @@ const rangeDatePickerPresets = {
         name: 'Today',
         getRange: () => ({
             from: uuiDayjs.dayjs().toString(),
-            to: undefined,
+            to: uuiDayjs.dayjs().toString(),
             order: 1,
         }),
     },
@@ -3359,7 +3505,7 @@ const rangeDatePickerPresets = {
         getRange: () => ({
             from: uuiDayjs.dayjs().startOf('month').subtract(3, 'month').toString(),
             to: uuiDayjs.dayjs().subtract(1, 'month').endOf('month').toString(),
-            order: 5,
+            order: 6,
         }),
     },
     thisYear: {
@@ -3444,8 +3590,8 @@ function RangeDatePickerBodyComp(props, ref) {
                     props.onValueChange({
                         inFocus: props.value.inFocus,
                         selectedDate: {
-                            from: uuiDayjs.dayjs(presetVal.from).format(valueFormat),
-                            to: uuiDayjs.dayjs(presetVal.to).format(valueFormat),
+                            from: presetVal.from ? uuiDayjs.dayjs(presetVal.from).format(valueFormat) : undefined,
+                            to: presetVal.to ? uuiDayjs.dayjs(presetVal.to).format(valueFormat) : undefined,
                         },
                     });
                 }, presets: presets })));
@@ -3507,7 +3653,7 @@ const getDayState = (day, selectedDate) => {
     };
 };
 
-var css$K = {"dropdown-container":"nLCSbA","dropdownContainer":"nLCSbA"};
+var css$K = {"dropdown-container":"ulbVn2","dropdownContainer":"ulbVn2"};
 
 function RangeDatePickerComponent(props, ref) {
     const { value: _value, format = defaultFormat, size = settings.rangeDatePicker.sizes.default } = props;
@@ -3575,7 +3721,7 @@ function RangeDatePickerComponent(props, ref) {
 }
 const RangeDatePicker = /* @__PURE__ */React__namespace.default.forwardRef(RangeDatePickerComponent);
 
-var css$J = {"root":"VGpmp6","blocker":"PgZcIt","marker":"nLWkhp","top":"UCiZiy","bottom":"wRKnPg","left":"ZkVMaX","right":"n7-q6w","inside":"_6lbD0m"};
+var css$J = {"root":"JT1DSu","blocker":"DKmFCr","marker":"wSNZAd","top":"JqFkPc","bottom":"ctfwAV","left":"dgyY-G","right":"-HZAP5","inside":"mQ02Ti"};
 
 function DropMarker(props) {
     return props.isDndInProgress
@@ -3590,9 +3736,9 @@ function DropMarker(props) {
         : null;
 }
 
-var css$I = {"search-wrapper":"xT6L7x","searchWrapper":"xT6L7x","no-data":"yb7j-G","noData":"yb7j-G"};
+var css$I = {"search-wrapper":"_3uPUth","searchWrapper":"_3uPUth","no-data":"-nyrgX","noData":"-nyrgX"};
 
-var css$H = {"picker-row":"X8qUF3","pickerRow":"X8qUF3","align-widgets-top":"_-0oA5q","alignWidgetsTop":"_-0oA5q","row-content":"YEAMbJ","rowContent":"YEAMbJ","align-widgets-center":"wo0jIu","alignWidgetsCenter":"wo0jIu","icon-container":"YsNuRS","iconContainer":"YsNuRS","content-wrapper":"wC-c08","contentWrapper":"wC-c08","icon-wrapper":"JNvvU4","iconWrapper":"JNvvU4","icon-default":"BR2utH","iconDefault":"BR2utH","selected-mark":"AqhCFH","selectedMark":"AqhCFH"};
+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"};
 
 const mergeHighlightRanges = (ranges) => {
     const mergedRanges = [];
@@ -3659,7 +3805,7 @@ const getHighlightedSearchMatches = (str, search) => {
     return getDecoratedText(str, ranges);
 };
 
-var css$G = {"root":"GS82I7","column-gap":"JXVA03","columnGap":"JXVA03","title":"et0-va","subtitle":"i1VrBt","disabled":"pFYF01","multiline":"_4RcmRb"};
+var css$G = {"root":"M-rUkA","column-gap":"Q-YwVF","columnGap":"Q-YwVF","title":"IwfQ5u","subtitle":"TibkeU","disabled":"XZXvlo","multiline":"ngwx3F"};
 
 function PickerItem(props) {
     const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, } = props;
@@ -3805,7 +3951,7 @@ function DataPickerBody({ highlightSearchMatches = true, ...props }) {
                 'aria-orientation': 'vertical',
                 tabIndex: -1,
                 ...props.rawProps,
-            }, rowsCount: props.rowsCount, isLoading: props.isReloading, renderBlocker: settings.pickerInput.renderBlocker })))));
+            }, rowsCount: props.rowsCount, isLoading: props.isReloading, renderBlocker: settings.pickerInput.renderBlocker, overflowTopEffect: showSearch ? 'line' : 'none', overflowBottomEffect: "line" })))));
 }
 
 function DataPickerFooterImpl(props) {
@@ -3832,7 +3978,7 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = /* @__PURE__ */React__namespace.default.memo(DataPickerFooterImpl);
 
-var css$F = {"header":"NQqV9H","title":"EZGqV3","close":"_4yrAj8"};
+var css$F = {"header":"B2qlMl","title":"MuoHEK","close":"ggO-wF"};
 
 const DataPickerMobileHeaderImpl = (props) => {
     const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
@@ -3842,7 +3988,7 @@ const DataPickerMobileHeaderImpl = (props) => {
 };
 const DataPickerMobileHeader = /* @__PURE__ */React__namespace.default.memo(DataPickerMobileHeaderImpl);
 
-var css$E = {"done":"-noL9F","container":"mvjfRX"};
+var css$E = {"done":"_1ZKYor","container":"_9uBP7f"};
 
 const PickerBodyMobileView = (props) => {
     const isMobileView = uuiCore.isMobile();
@@ -3854,7 +4000,7 @@ const PickerBodyMobileView = (props) => {
         isMobileView && (React__namespace.default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => props.onClose?.(), cx: css$E.done, size: settings.pickerInput.sizes.body.mobileFooterLinkButton }))));
 };
 
-var css$D = {"sub-header-wrapper":"pw-VR6","subHeaderWrapper":"pw-VR6","switch":"_4eMeQa","no-found-modal-container":"f7lJFw","noFoundModalContainer":"f7lJFw","no-found-modal-container-icon":"x-f5cT","noFoundModalContainerIcon":"x-f5cT","no-found-modal-container-text":"xLalBW","noFoundModalContainerText":"xLalBW","body":"RyPydl"};
+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"};
 
 function PickerModal(props) {
     const { view, selection, dataSourceStateLens, dataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = uuiComponents.usePickerModal(props);
@@ -3900,7 +4046,7 @@ function PickerModal(props) {
             React__namespace.default.createElement(ModalFooter, null, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$C = {"tooltip":"KKR5Hz"};
+var css$C = {"tooltip":"g4fIzj"};
 
 const PickerTogglerTag = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const tagProps = {
@@ -3919,7 +4065,7 @@ const PickerTogglerTag = /* @__PURE__ */React__namespace.forwardRef((props, ref)
     }
 });
 
-var css$B = {"root":"_6BDOSN"};
+var css$B = {"root":"JAVuYn"};
 
 const defaultMode = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
@@ -4001,7 +4147,7 @@ function PickerInputComponent(props, ref) {
 }
 const PickerInput = /* @__PURE__ */React__namespace.default.forwardRef(PickerInputComponent);
 
-var css$A = {"row":"XqEcUZ"};
+var css$A = {"row":"zugrfa"};
 
 function PickerListRow(props) {
     let label;
@@ -4021,7 +4167,7 @@ function PickerListRow(props) {
     return (React__namespace.default.createElement("div", { role: "option", "aria-selected": props.isSelectable ? props.isSelected : undefined, "aria-busy": props.isLoading, "aria-posinset": props.index + 1, ...(props.checkbox?.isVisible && { 'aria-checked': props.isChecked }), className: css$A.row }, component));
 }
 
-var css$z = {"root":"Mo5mcj"};
+var css$z = {"root":"yW1FgL"};
 
 function PickerList(props) {
     const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, getModalTogglerCaption, } = uuiComponents.usePickerList(props);
@@ -4056,7 +4202,7 @@ function PickerList(props) {
             }, selectedRows)));
 }
 
-var css$y = {"root":"_-1fghw","wrapper":"_6OVFLW","align-widgets-top":"OZsjsh","alignWidgetsTop":"OZsjsh","align-widgets-center":"XJ-X6-","alignWidgetsCenter":"XJ-X6-"};
+var css$y = {"root":"AV-t05","wrapper":"LVQzVv","align-widgets-top":"_76hfvD","alignWidgetsTop":"_76hfvD","align-widgets-center":"HqHk95","alignWidgetsCenter":"HqHk95"};
 
 function DataTableCell(initialProps) {
     const props = { ...initialProps };
@@ -4106,7 +4252,7 @@ function DataTableCell(initialProps) {
     return React__namespace.createElement(uuiComponents.DataTableCell, { ...props });
 }
 
-var css$x = {"root":"wsv7pR"};
+var css$x = {"root":"SWO5JN"};
 
 // 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.
@@ -4122,7 +4268,7 @@ const DataTableRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableRow,
     ];
 }, () => propsMods);
 
-var css$w = {"sorting-panel-container":"yWeO0t","sortingPanelContainer":"yWeO0t"};
+var css$w = {"sorting-panel-container":"fHU-1Q","sortingPanelContainer":"fHU-1Q"};
 
 const SortingPanelImpl = ({ sortDirection, onSort }) => {
     const sortAsc = React.useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
@@ -4142,7 +4288,7 @@ const ColumnHeaderDropdownImpl = (props) => {
 };
 const ColumnHeaderDropdown = /* @__PURE__ */React__namespace.default.memo(ColumnHeaderDropdownImpl);
 
-var css$v = {"root":"b4757w","caption-wrapper":"naqhO4","captionWrapper":"naqhO4","sort-icon":"W1ER8j","sortIcon":"W1ER8j","dropdown-icon":"SmyQ4p","dropdownIcon":"SmyQ4p","infoIcon":"PCHDjW","align-right":"gzLwwv","alignRight":"gzLwwv","align-center":"qaWypb","alignCenter":"qaWypb","caption":"XkiMr0","truncate":"xLvRDD","upper-case":"UBHmx4","upperCase":"UBHmx4","checkbox":"OTBbz2","icon":"w-U0fW","fold-all-icon":"e8tRmY","foldAllIcon":"e8tRmY","cell-tooltip":"PMtDXK","cellTooltip":"PMtDXK","resizing-marker":"_-53OVU","resizingMarker":"_-53OVU","pinned-right":"wyOrGa","pinnedRight":"wyOrGa","draggable":"i5xueY","ghost":"BqoNqL","is-dragged-out":"L8uO1Z","isDraggedOut":"L8uO1Z","dnd-marker-left":"EfFJJ5","dndMarkerLeft":"EfFJJ5","dnd-marker-right":"dNe4Gg","dndMarkerRight":"dNe4Gg","cell-tooltip-wrapper":"xu68Er","cellTooltipWrapper":"xu68Er","cell-tooltip-text":"_8-BkJU","cellTooltipText":"_8-BkJU","tooltip-caption":"b-72Aj","tooltipCaption":"b-72Aj","tooltip-info":"ifHrZu","tooltipInfo":"ifHrZu"};
+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"};
 
 class DataTableHeaderCell extends React__namespace.Component {
     constructor() {
@@ -4236,7 +4382,7 @@ class DataTableHeaderCell extends React__namespace.Component {
     }
 }
 
-var css$u = {"root":"nTQW5Z","caption-wrapper":"CfTFgF","captionWrapper":"CfTFgF","align-center":"B-QRPf","alignCenter":"B-QRPf","caption":"hLnjIF","truncate":"_0Rq4Bu","upper-case":"HjRRlY","upperCase":"HjRRlY","group-cell-tooltip":"LpIW7M","groupCellTooltip":"LpIW7M","group-cell-tooltip-wrapper":"tXPS1H","groupCellTooltipWrapper":"tXPS1H","group-cell-tooltip-text":"f4U-22","groupCellTooltipText":"f4U-22","tooltip-caption":"A4h6nf","tooltipCaption":"A4h6nf","tooltip-info":"-e0QVE","tooltipInfo":"-e0QVE"};
+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"};
 
 class DataTableHeaderGroupCell extends React__namespace.Component {
     constructor() {
@@ -4276,7 +4422,7 @@ class DataTableHeaderGroupCell extends React__namespace.Component {
     }
 }
 
-var css$t = {"root":"ZoDNIU"};
+var css$t = {"root":"rU4otq"};
 
 const DataTableHeaderRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableHeaderRow, () => [css$t.root, 'uui-dt-vars'], (mods) => ({
     renderCell: (props) => (React__namespace.createElement(DataTableHeaderCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.column.key, columnsGap: mods.columnsGap })),
@@ -4372,7 +4518,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":"_4Ixn2c","header":"s2bmwZ","title":"dZJlcD","removeButton":"LtHPkg","with-search":"CPCFHX","withSearch":"CPCFHX"};
+var css$s = {"body":"VBOdST","header":"j2V9vY","title":"UOAHC1","removeButton":"q4jR4F","with-search":"ZZAI8r","withSearch":"ZZAI8r"};
 
 function FilterColumnBody(props) {
     const [predicate, setPredicate] = React.useState(getDefaultPredicate(props.predicates, props.value));
@@ -4433,7 +4579,7 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var css$r = {"unpin-icon":"Vwl9-L","unpinIcon":"Vwl9-L","pin-toggler-icon":"dxdZPu","pinTogglerIcon":"dxdZPu"};
+var css$r = {"unpin-icon":"D1A8bo","unpinIcon":"D1A8bo","pin-toggler-icon":"r9EnmR","pinTogglerIcon":"r9EnmR"};
 
 function PinIconButton(props) {
     const i18nLocal = i18n.tables.columnsConfigurationModal;
@@ -4446,14 +4592,23 @@ function PinIconButton(props) {
         const iconTooltip = isPinnedAlways ? i18nLocal.lockedColumnPinButton : i18nLocal.unPinColumnButton;
         const unpinClickHandler = isPinnedAlways ? undefined : () => onTogglePin(undefined);
         pinUnpinNode = (React__namespace.createElement(Tooltip, { content: iconTooltip, placement: "bottom", color: "inverted" },
-            React__namespace.createElement(IconButton, { cx: uuiCore.cx(!isPinnedAlways && css$r.unpinIcon, css$r.pinTogglerIcon), icon: unpinIcon, onClick: unpinClickHandler, isDisabled: isPinnedAlways, color: "primary" })));
+            React__namespace.createElement(IconButton, { cx: uuiCore.cx(!isPinnedAlways && css$r.unpinIcon, css$r.pinTogglerIcon), icon: unpinIcon, onClick: unpinClickHandler, isDisabled: isPinnedAlways, color: "primary", rawProps: {
+                    'aria-description': iconTooltip,
+                    'aria-label': 'Unpin Button',
+                } })));
     }
     else {
         pinUnpinNode = (React__namespace.createElement(React__namespace.Fragment, null,
             React__namespace.createElement(Tooltip, { content: i18nLocal.pinColumnToTheLeftButton, placement: "bottom", color: "inverted" },
-                React__namespace.createElement(IconButton, { cx: css$r.pinTogglerIcon, icon: settings.dataTable.icons.columnsConfigurationModal.pinLeftIcon, onClick: () => onTogglePin('left'), isDisabled: isPinnedAlways })),
+                React__namespace.createElement(IconButton, { cx: css$r.pinTogglerIcon, icon: settings.dataTable.icons.columnsConfigurationModal.pinLeftIcon, onClick: () => onTogglePin('left'), isDisabled: isPinnedAlways, rawProps: {
+                        'aria-description': i18nLocal.pinColumnToTheLeftButton,
+                        'aria-label': 'Pin left button',
+                    } })),
             React__namespace.createElement(Tooltip, { content: i18nLocal.pinColumnToTheRightButton, placement: "bottom", color: "inverted" },
-                React__namespace.createElement(IconButton, { cx: css$r.pinTogglerIcon, icon: settings.dataTable.icons.columnsConfigurationModal.pinRightIcon, onClick: () => onTogglePin('right'), isDisabled: isPinnedAlways }))));
+                React__namespace.createElement(IconButton, { cx: css$r.pinTogglerIcon, icon: settings.dataTable.icons.columnsConfigurationModal.pinRightIcon, onClick: () => onTogglePin('right'), isDisabled: isPinnedAlways, rawProps: {
+                        'aria-description': i18nLocal.pinColumnToTheRightButton,
+                        'aria-label': 'Pin right button',
+                    } }))));
     }
     return pinUnpinNode;
 }
@@ -4475,22 +4630,33 @@ function getUnpinIcon(params) {
     }
 }
 
-var css$q = {"row-wrapper":"hW9VxK","rowWrapper":"hW9VxK","pin-icon-button":"pTpMzl","pinIconButton":"pTpMzl","not-pinned":"xkwn3G","notPinned":"xkwn3G","checkbox":"bYsMGJ","drag-handle":"Z3jkmJ","dragHandle":"Z3jkmJ","dnd-disabled":"kNlTt-","dndDisabled":"kNlTt-"};
+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"};
 
 const ColumnRow = /* @__PURE__ */React__namespace.memo(function ColumnRow(props) {
     const { column } = props;
-    const { toggleVisibility, togglePin, onCanAcceptDrop, onDrop, columnConfig, isDndAllowed, isPinnedAlways, } = column;
+    const { toggleVisibility, togglePin, onCanAcceptDrop, onDrop, columnConfig, isDndAllowed, isPinnedAlways, columnGroup, } = column;
     const { isVisible, fix } = columnConfig;
     const pinPosition = fix || (isPinnedAlways ? 'left' : undefined);
     const isPinned = !!pinPosition;
     const data = { column, columnConfig };
+    const getColumnCaption = () => {
+        if (props.renderItem) {
+            return props.renderItem(props.column);
+        }
+        if (column.group) {
+            return `${column.caption}/${columnGroup.caption}`;
+        }
+        else {
+            return column.caption;
+        }
+    };
     const renderContent = (dndActorParams) => {
         const wrapperClasses = uuiCore.cx(css$q.rowWrapper, !isPinned && css$q.notPinned, dndActorParams.isDragGhost && uuiCore.uuiDndState.dragGhost, 'uui-dt-columns-config-row');
         const { onTouchStart, onPointerDown, ...restEventHandlers } = dndActorParams.eventHandlers;
         const { ref, ...dndActorPropsWithoutRef } = dndActorParams;
         return (React__namespace.createElement(FlexRow, { size: settings.dataTable.sizes.columnsConfigurationModal.columnRow, cx: wrapperClasses, ref: dndActorParams.ref, rawProps: { ...restEventHandlers }, alignItems: "top" },
             React__namespace.createElement(uuiComponents.DragHandle, { dragHandleIcon: settings.dataTable.icons.columnsConfigurationModal.dragIndicator, rawProps: { onTouchStart, onPointerDown }, isDisabled: !isDndAllowed, cx: uuiCore.cx(css$q.dragHandle, !isDndAllowed && css$q.dndDisabled) }),
-            React__namespace.createElement(Checkbox, { key: column.key, label: props.renderItem ? props.renderItem(props.column) : column.caption, value: isVisible, onValueChange: toggleVisibility, isReadonly: column.isAlwaysVisible || column.isLocked, cx: css$q.checkbox }),
+            React__namespace.createElement(Checkbox, { key: column.key, label: getColumnCaption(), value: isVisible, onValueChange: toggleVisibility, isReadonly: column.isAlwaysVisible || column.isLocked, cx: css$q.checkbox }),
             React__namespace.createElement(FlexRow, { size: null, cx: css$q.pinIconButton },
                 React__namespace.createElement(PinIconButton, { pinPosition: pinPosition, canUnpin: !isPinnedAlways, onTogglePin: togglePin })),
             React__namespace.createElement(DropMarker, { ...dndActorPropsWithoutRef })));
@@ -4498,7 +4664,7 @@ const ColumnRow = /* @__PURE__ */React__namespace.memo(function ColumnRow(props)
     return (React__namespace.createElement(uuiCore.DndActor, { key: column.key, srcData: isDndAllowed && data, dstData: data, canAcceptDrop: onCanAcceptDrop, onDrop: onDrop, render: renderContent }));
 });
 
-var css$p = {"root":"h2kKw1","main-panel":"wbLxSw","mainPanel":"wbLxSw","group":"_01mC0F","group-title":"qrU7pu","groupTitle":"qrU7pu","group-items":"_4Se-rL","groupItems":"_4Se-rL","no-data":"e2OMxc","noData":"e2OMxc","no-data-title":"jlgzxT","noDataTitle":"jlgzxT","no-data-sub-title":"XpH-38","noDataSubTitle":"XpH-38","h-divider":"j7aofd","hDivider":"j7aofd","search-area":"-JP4zK","searchArea":"-JP4zK","subgroup-accordion":"_768iQh","subgroupAccordion":"_768iQh","subgroup":"fZn8BC","subgroup-title":"Hcy17j","subgroupTitle":"Hcy17j"};
+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"};
 
 const renderGroupTitle = (title, amount) => (React__namespace.createElement(FlexRow, { cx: css$p.group },
     React__namespace.createElement(Text, { size: "none", cx: css$p.groupTitle }, title),
@@ -4512,6 +4678,7 @@ function ColumnsConfigurationModal(props) {
         columns,
         defaultConfig,
         getSearchFields: props.getSearchFields,
+        columnGroups: props.columnGroups,
     });
     const apply = React.useCallback(() => modalProps.success(columnsConfig), [columnsConfig, modalProps]);
     const close = React.useCallback(() => modalProps.abort(), [modalProps]);
@@ -4600,7 +4767,7 @@ const getChildrenAndRest = (row, rows) => {
     return [children, rest];
 };
 
-var css$o = {"listContainer":"q4XfOM","header":"yEAyo7","group":"n3NxKs","stickyHeader":"dZHT7W"};
+var css$o = {"listContainer":"MhvPDr","header":"r-gnBR","group":"gqN6A4","stickyHeader":"moN4dq"};
 
 function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
     const rowRef = React.useRef(undefined);
@@ -4640,7 +4807,7 @@ function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, r
             React__namespace.default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
 }
 
-var css$n = {"root":"GkdlCQ","sticky-header":"bQeT--","stickyHeader":"bQeT--","no-results":"IGoPZy","noResults":"IGoPZy","icon":"uhFwKr","title":"u-9W3w"};
+var css$n = {"root":"hukdyK","sticky-header":"ARKxNK","stickyHeader":"ARKxNK","no-results":"t055MF","noResults":"t055MF","icon":"_0CKT68","title":"Xp6OjX"};
 
 function DataTable(props) {
     const { uuiModals } = uuiCore.useUuiContext();
@@ -4664,7 +4831,7 @@ function DataTable(props) {
             .show((modalProps) => {
             return (props.renderColumnsConfigurationModal
                 ? props.renderColumnsConfigurationModal({ ...configProps, ...modalProps })
-                : (React__namespace.createElement(ColumnsConfigurationModal, { ...modalProps, columns: props.columns, columnsConfig: config, defaultConfig: defaultConfig })));
+                : (React__namespace.createElement(ColumnsConfigurationModal, { ...modalProps, columns: props.columns, columnGroups: props.columnGroups, columnsConfig: config, defaultConfig: defaultConfig })));
         })
             .then((columnsConfig) => props.onValueChange({ ...props.value, columnsConfig }))
             .catch(() => null);
@@ -4673,11 +4840,8 @@ function DataTable(props) {
     ]);
     const renderTableBody = React__namespace.useCallback((params) => (React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement("div", { className: uuiCore.cx(css$n.stickyHeader, 'uui-dt-sticky_header'), ref: headerRef },
-            React__namespace.createElement(DataTableHeaderRow, { columns: columns, columnGroups: props.columnGroups, onConfigButtonClick: props.showColumnsConfig && onConfigurationButtonClick, selectAll: props.selectAll, size: props.headerSize || settings.dataTable.sizes.header.row, textCase: props.headerTextCase, allowColumnsReordering: props.allowColumnsReordering, allowColumnsResizing: props.allowColumnsResizing, showFoldAll: props.showFoldAll, value: { ...props.value, columnsConfig: config }, onValueChange: props.onValueChange, columnsGap: props.columnsGap }),
-            React__namespace.createElement("div", { className: uuiCore.cx(uuiCore.uuiScrollShadows.top, {
-                    [uuiCore.uuiScrollShadows.topVisible]: params?.scrollShadows?.verticalTop,
-                }) })),
-        props.exactRowsCount !== 0 ? (React__namespace.createElement(DataRowsContainer, { headerRef: headerRef, listContainerRef: params?.listContainerRef, estimatedHeight: params?.estimatedHeight, offsetY: params?.offsetY, scrollShadows: params?.scrollShadows, renderRow: renderRow, rows: rows })) : (renderNoResultsBlock?.()))), [
+            React__namespace.createElement(DataTableHeaderRow, { columns: columns, columnGroups: props.columnGroups, onConfigButtonClick: props.showColumnsConfig && onConfigurationButtonClick, selectAll: props.selectAll, size: props.headerSize || settings.dataTable.sizes.header.row, textCase: props.headerTextCase, allowColumnsReordering: props.allowColumnsReordering, allowColumnsResizing: props.allowColumnsResizing, showFoldAll: props.showFoldAll, value: { ...props.value, columnsConfig: config }, onValueChange: props.onValueChange, columnsGap: props.columnsGap, cx: uuiCore.uuiScrollShadows.top })),
+        props.exactRowsCount !== 0 ? (React__namespace.createElement(DataRowsContainer, { headerRef: headerRef, listContainerRef: params?.listContainerRef, estimatedHeight: params?.estimatedHeight, offsetY: params?.offsetY, renderRow: renderRow, rows: rows })) : (renderNoResultsBlock?.()))), [
         props, columns, rows, renderNoResultsBlock, onConfigurationButtonClick,
     ]);
     const classes = uuiCore.cx(css$n.root, props.cx, 'uui-dt-vars', 'uui-data_table');
@@ -4692,7 +4856,7 @@ function DataTable(props) {
             : (React__namespace.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rowsCount: props.rowsCount, renderRows: renderTableBody, cx: classes, isLoading: props.isReloading, rowsSelector: "[role=row]", rawProps: rawProps })))));
 }
 
-var css$m = {"root":"GyNc5R","title-wrapper":"a2AIB7","titleWrapper":"a2AIB7","title":"pIKrqL","text-wrapper":"lyouu6","textWrapper":"lyouu6","selection":"nxjlPq","postfix":"wnx4gr","selected":"PQAmMq"};
+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"};
 
 const FilterPanelItemToggler = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const togglerPickerOpened = (e) => {
@@ -4773,6 +4937,7 @@ function FilterPickerBody({ highlightSearchMatches = true, ...restProps }) {
             selectionMode: props.selectionMode,
             selection: props.value,
             search: dataSourceState.search,
+            disableClear: props.disableClear,
         };
         return props.renderFooter
             ? props.renderFooter(footerProps)
@@ -4916,7 +5081,7 @@ function FilterRangeDatePickerBody(props) {
         renderFooter()));
 }
 
-var css$l = {"container":"_1Pzf3M"};
+var css$l = {"container":"EzbFWT"};
 
 function FilterNumericBody(props) {
     const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
@@ -5227,7 +5392,7 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = /* @__PURE__ */React__namespace.default.memo(FiltersToolbarImpl);
 
-var css$k = {"delete-button":"BgcNFt","deleteButton":"BgcNFt","tab-button":"Urs7Hb","tabButton":"Urs7Hb","targetOpen":"_99xTOz"};
+var css$k = {"delete-button":"-jDuQP","deleteButton":"-jDuQP","tab-button":"feveqX","tabButton":"feveqX","targetOpen":"-r6PFN"};
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = uuiCore.useUuiContext();
@@ -5303,7 +5468,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":"cwvFx2","presetInputCell":"cwvFx2","preset-input":"jkvIku","presetInput":"jkvIku"};
+var css$j = {"preset-input-cell":"_3B8qbQ","presetInputCell":"_3B8qbQ","preset-input":"spVgUw","presetInput":"spVgUw"};
 
 function PresetInput(props) {
     const [presetCaption, setPresetCaption] = React.useState(props.preset?.name || '');
@@ -5330,7 +5495,7 @@ function PresetInput(props) {
         React__namespace.default.createElement(TextInput, { cx: css$j.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50, isReadonly: readonly })));
 }
 
-var css$i = {"preset":"Dye5l0","activePreset":"f-5V5b"};
+var css$i = {"preset":"w1WNmT","activePreset":"qPfpzE"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = React.useState(false);
@@ -5355,7 +5520,7 @@ function Preset(props) {
     return (React__namespace.default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__namespace.default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__namespace.default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$i.preset, isPresetActive && css$i.activePreset, UUI_PRESETS_PANEL_PRESET], size: settings.presetsPanel.sizes.tabButton, withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: PresetActionsDropdownComponent, iconPosition: "right", isActive: isPresetActive }))));
 }
 
-var css$h = {"divider":"KHh8Zw","dropdownDeleteIcon":"UN1qU6","presetsWrapper":"_8MsJOo","addPresetContainer":"uK2DuH","dropContainer":"JgZTNZ"};
+var css$h = {"divider":"Cd-6Gd","dropdownDeleteIcon":"LYMigY","presetsWrapper":"b970nw","addPresetContainer":"vznxrD","dropContainer":"E9KMxm"};
 
 function PresetsPanel(props) {
     const [isAddingPreset, setIsAddingPreset] = React.useState(false);
@@ -5404,9 +5569,9 @@ function PresetsPanel(props) {
             React__namespace.default.createElement(uuiComponents.AdaptivePanel, { items: getPanelItems() }))));
 }
 
-var css$g = {"root":"CfPVgr"};
+var css$g = {"root":"-Zowr5"};
 
-var css$f = {"root":"nx7RBH","burger-content":"jyN-38","burgerContent":"jyN-38"};
+var css$f = {"root":"eXY3tv","burger-content":"n2eF2e","burgerContent":"n2eF2e"};
 
 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); }
@@ -5449,7 +5614,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
 };
 var ForwardRef$2 = /*#__PURE__*/React.forwardRef(SvgNavigationArrowDownOutline);
 
-var css$e = {"root":"aSfkhg","button-primary":"FGHk2Z","buttonPrimary":"FGHk2Z","button-secondary":"DCpiox","buttonSecondary":"DCpiox","hasIcon":"_02T-H0","dropdown":"tHICjI"};
+var css$e = {"root":"YNfGRL","button-primary":"_34UpRL","buttonPrimary":"_34UpRL","button-secondary":"j9QX5u","buttonSecondary":"j9QX5u","hasIcon":"r0hAab","dropdown":"hDZv34"};
 
 function applyBurgerButtonMods(props) {
     return [
@@ -5474,13 +5639,13 @@ const BurgerButton = /* @__PURE__ */React__namespace.default.forwardRef((props,
         }, dropdownIcon: ForwardRef$2 }));
 });
 
-var css$d = {"search-input":"-AUA1G","searchInput":"-AUA1G"};
+var css$d = {"search-input":"TKibWd","searchInput":"TKibWd"};
 
 function BurgerSearch(props) {
     return (React__namespace.createElement(uuiComponents.TextInput, { cx: cx__default.default(css$d.searchInput, 'uui-main_menu-burger-search'), iconPosition: "left", icon: ForwardRef$M, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$Q }));
 }
 
-var css$c = {"root":"dxTVgr","group-header":"_2IAhvh","groupHeader":"_2IAhvh","group-name":"BisoKj","groupName":"BisoKj","line":"Vw-Qxb"};
+var css$c = {"root":"-iFT8A","group-header":"YBDc6P","groupHeader":"YBDc6P","group-name":"RALnKy","groupName":"RALnKy","line":"_5kyLC3"};
 
 function BurgerGroupHeader(props) {
     return (React__namespace.createElement("div", { className: cx__default.default(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
@@ -5488,7 +5653,7 @@ function BurgerGroupHeader(props) {
         React__namespace.createElement("span", { className: css$c.groupName }, props.caption)));
 }
 
-var css$b = {"root":"_2Cznnq","type-primary":"-IkhrK","typePrimary":"-IkhrK","type-secondary":"_59s4v0","typeSecondary":"_59s4v0"};
+var css$b = {"root":"y98K5L","type-primary":"HOG0rc","typePrimary":"HOG0rc","type-secondary":"EXGQyl","typeSecondary":"EXGQyl"};
 
 const MainMenuButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const { type, ...clickableProps } = props;
@@ -5516,7 +5681,7 @@ const MainMenuButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) =
         props.isDropdown && (React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef$P, flipY: props.isOpen }))));
 });
 
-var css$a = {"dropdown-body":"qC5nxf","dropdownBody":"qC5nxf"};
+var css$a = {"dropdown-body":"Vgu9hK","dropdownBody":"Vgu9hK"};
 
 function MainMenuDropdown(props) {
     const handleEscape = (e, onClose, isOpen) => {
@@ -5559,12 +5724,12 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
 };
 var ForwardRef$1 = /*#__PURE__*/React.forwardRef(SvgNavigationGlobalMenuOutlineOutline);
 
-var css$9 = {"global-menu-btn":"Zgx50Q","globalMenuBtn":"Zgx50Q","global-menu-icon":"ptbChi","globalMenuIcon":"ptbChi"};
+var css$9 = {"global-menu-btn":"xHcAA4","globalMenuBtn":"xHcAA4","global-menu-icon":"ZZ0NV5","globalMenuIcon":"ZZ0NV5"};
 
 const GlobalMenu = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", { ref: ref, id: "global_menu_toggle", className: cx__default.default(css$9.globalMenuBtn, props.cx), ...props.rawProps },
     React__namespace.createElement(uuiComponents.IconContainer, { size: 36, icon: ForwardRef$1, cx: css$9.globalMenuIcon }))));
 
-var css$8 = {"container":"JOg9EY","open":"_9Xp0Gk","folding-arrow":"_42X9dZ","foldingArrow":"_42X9dZ"};
+var css$8 = {"container":"rlYaHu","open":"dg1dOo","folding-arrow":"vbDCe1","foldingArrow":"vbDCe1"};
 
 const MainMenuAvatar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", { ref: ref, className: cx__default.default(css$8.container, props.isDropdown && css$8.dropdown, props.isOpen && css$8.open, props.onClick && uuiCore.uuiMarkers.clickable, props.cx), onClick: props.onClick, ...props.rawProps },
     React__namespace.createElement(uuiComponents.Avatar, { size: "36", img: props.avatarUrl }),
@@ -5572,15 +5737,15 @@ const MainMenuAvatar = /* @__PURE__ */React__namespace.forwardRef((props, ref) =
     props.isDropdown && (React__namespace.createElement("div", null,
         React__namespace.createElement(uuiComponents.IconContainer, { size: 18, icon: ForwardRef$P, flipY: props.isOpen, cx: css$8.foldingArrow }))))));
 
-var css$7 = {"search-input":"LWtnwu","searchInput":"LWtnwu"};
+var css$7 = {"search-input":"aRXFjU","searchInput":"aRXFjU"};
 
 const MainMenuSearch = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement(uuiCore.IEditableDebouncer, { ...props, render: (iEditable) => (React__namespace.createElement(uuiComponents.TextInput, { iconPosition: "left", icon: ForwardRef$M, cancelIcon: props.value?.length > 0 && ForwardRef$Q, ...props, ...iEditable, ref: ref, cx: uuiCore.cx(css$7.searchInput, props.cx), ...props.rawProps })) })));
 
-var css$6 = {"container":"d-E4Ii"};
+var css$6 = {"container":"hyXzI4"};
 
 const MainMenuIcon = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement(IconButton, { ref: ref, icon: props.icon, cx: uuiCore.cx(props.cx, css$6.container), ...props })));
 
-var css$5 = {"root":"IRUUJv"};
+var css$5 = {"root":"CJivvI"};
 
 const Anchor = /* @__PURE__ */uuiCore.withMods(uuiComponents.Anchor, () => [css$5.root]);
 
@@ -5638,7 +5803,7 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
 };
 var ForwardRef = /*#__PURE__*/React.forwardRef(SvgFileCloudUploadFill);
 
-var css$4 = {"root":"tcm7tF","drop-start":"lSg-VV","dropStart":"lSg-VV","drop-over":"_8fZSzw","dropOver":"_8fZSzw","link":"ZtYJFd","drop-area":"g8N6qt","dropArea":"g8N6qt","drop-caption":"_13ruEY","dropCaption":"_13ruEY","icon-blue":"sNjEhT","iconBlue":"sNjEhT"};
+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"};
 
 function DropSpot(props) {
     const getInfoText = typeof props.infoText === 'string'
@@ -5656,7 +5821,7 @@ function DropSpot(props) {
     return React__namespace.createElement(uuiComponents.DropSpot, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
 }
 
-var css$3 = {"root":"_8KeYyk"};
+var css$3 = {"root":"aZa3pC"};
 
 const SvgCircleProgress = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
@@ -5667,7 +5832,7 @@ const SvgCircleProgress = /* @__PURE__ */React__namespace.forwardRef((props, ref
         React__namespace.createElement("circle", { strokeWidth: 1, fill: "transparent", r: outsetRadius, cx: props.size / 2, cy: props.size / 2 })));
 });
 
-var css$2 = {"root":"k2RJTn","file-name":"zlZ4b-","fileName":"zlZ4b-","default-color":"d8xlQ4","defaultColor":"d8xlQ4","doc-color":"_5hOH57","docColor":"_5hOH57","xls-color":"xGVIvZ","xlsColor":"xGVIvZ","pdf-color":"_74zO-v","pdfColor":"_74zO-v","movie-color":"_6E4yt-","movieColor":"_6E4yt-","img-color":"_243-4q","imgColor":"_243-4q","mov-color":"bej-U1","movColor":"bej-U1","error-block":"_6WDRWV","errorBlock":"_6WDRWV","icons-block":"MknJ5f","iconsBlock":"MknJ5f"};
+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"};
 
 const FileCard = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const [isLoadingShow, setIsLoadingShow] = React__namespace.useState(true);
@@ -5722,7 +5887,7 @@ const FileCard = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
         setIsLoadingShow(() => false);
     };
     const renderErrorContent = () => (React__namespace.createElement(Tooltip, { content: file.error.message, placement: "bottom-start" },
-        React__namespace.createElement("div", { className: css$2.errorBlock },
+        React__namespace.createElement("div", { className: css$2.errorBlock, "aria-description": file.error.message, "aria-label": "File Upload Error" },
             React__namespace.createElement(uuiComponents.IconContainer, { icon: settings.fileCard.icons.errorIcon, size: 12 }),
             i18n.fileCard.failedUploadErrorMessage)));
     const renderSuccessfulContent = () => (React__namespace.createElement(Text, { size: "none", fontSize: "14", lineHeight: "18", color: "tertiary" },
@@ -5786,7 +5951,7 @@ const getErrorPageConfig = () => ({
     },
 });
 
-var css$1 = {"container":"OXiYOQ"};
+var css$1 = {"container":"_1izzyN"};
 
 const ErrorPage = (props) => {
     const isMobileScreen = uuiCore.isMobile();
@@ -5798,7 +5963,7 @@ const ErrorPage = (props) => {
             props?.supportLink && React__namespace.default.createElement("div", { className: "uui-error-support-link" }, props?.supportLink))));
 };
 
-var css = {"recovery-spinner":"M9-nnX","recoverySpinner":"M9-nnX","recovery-message":"_8vzTQg","recoveryMessage":"_8vzTQg","modal-blocker":"XgXrc3","modalBlocker":"XgXrc3","modalFadeIn":"_1j1hZh"};
+var css = {"recovery-spinner":"-KL8no","recoverySpinner":"-KL8no","recovery-message":"ApZ9Nl","recoveryMessage":"ApZ9Nl","modal-blocker":"DRshx5","modalBlocker":"DRshx5","modalFadeIn":"EWPamP"};
 
 function ErrorHandler(props) {
     const { uuiNotifications, uuiModals, uuiApi } = uuiCore.useUuiContext();
@@ -5982,6 +6147,7 @@ exports.SuccessNotification = SuccessNotification;
 exports.SvgCircleProgress = SvgCircleProgress;
 exports.Switch = Switch;
 exports.TabButton = TabButton;
+exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.Text = Text;
 exports.TextArea = TextArea;