@epam/uui 6.2.0 → 6.3.0

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(#0smlushu6n1uhrbtq_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: "0smlusms3cqehnlrc_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(#0smlusms3cqehnlrc_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: "0smlushu6n1uhrbtq_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":"K-RXLg","uui-spinner":"lgr1QK","uuiSpinner":"lgr1QK"};
 
 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":"_4rwDuz","loading-word":"edKoQm","loadingWord":"edKoQm","animated-loading":"cJ2aht","animatedLoading":"cJ2aht","skeleton_loading":"i1s8WI","skeletonLoading":"i1s8WI"};
 
 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":"TKV-RQ","line-height":"p0-b-4","lineHeight":"p0-b-4","font-size":"O36flr","fontSize":"O36flr"};
 
 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":"_7GVMYK"};
 
 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":"_4vzV11"};
 
 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":"v0XflL"};
 
 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":"_-2astL"};
 
 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":"gaW5AH"};
 
 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":"tdsef-","withNotify":"leQOnM"};
 
-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":"_8OICE6","noLeftPadding":"_8PKs0G","foldingArea":"_78wvG5","onlyFoldable":"LNaxgt","captionWrapper":"GWojew","withNotify":"mzjjIs"};
 
-var css$1m = {"root":"vfgS47"};
+var css$1m = {"root":"_-5F5VL"};
 
 const AvatarStack = /* @__PURE__ */uuiCore.withMods(uuiComponents.AvatarStack, () => [css$1m.root]);
 
-var css$1l = {"root":"WcDOil"};
+var css$1l = {"root":"ZynZU0"};
 
 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":"ADBnKS"};
 
 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":"R3lgQz","page":"GavL40","spacer":"XKiV-t","mode-ghost":"Y9cxeS","modeGhost":"Y9cxeS"};
 
 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":"kXKWWk","progress-bar":"oQtg3Z","progressBar":"oQtg3Z","progressBar-indeterminate":"gteY2b","progressBarIndeterminate":"gteY2b","size-12":"F2scht","size12":"F2scht","size-18":"_6kAsZW","size18":"_6kAsZW","size-24":"O6EcRI","size24":"O6EcRI"};
 
 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":"UKvE7P","striped":"VbxMEC","animate-stripes":"AVth0h","animateStripes":"AVth0h","size-12":"AIiYu8","size12":"AIiYu8","size-18":"RAgKy4","size18":"RAgKy4","size-24":"bdwz8S","size24":"bdwz8S"};
 
 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":"wAZFgx"};
 
 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":"_3rssqT"};
 
 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":"gaSdU1"};
 
 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":"M28xhG"};
 
 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":"tBweim"};
 
 function applySwitchMods(mods) {
     return [
@@ -1824,7 +1839,7 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var textInputCss = {"root":"ZrE20o"};
+var textInputCss = {"root":"_9pM85m"};
 
 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":"BO21Fj"};
 
 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":"PgOwFa"};
 
 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":"LzQnoU"};
 
 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":"oQ2OvB"};
 
 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":"iQONol","timepicker-input":"BnXlx8","timepickerInput":"BnXlx8","ltr-always":"UQJvrt","ltrAlways":"UQJvrt"};
 
 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":"y9iBid"};
 
 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":"iyMhGP"};
 
 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":"kJkPM0"};
 
 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":"gnsYhI","tooltip":"fjucPA"};
 
 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":"Wu725P","dragHandleWrapper":"Wu725P","with-indent":"fPa6fV","withIndent":"fPa6fV","drag-handle":"z1C-Pm","dragHandle":"z1C-Pm","icon-container":"_98if5G","iconContainer":"_98if5G"};
 
 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":"y-aBPX","main-path":"ZeqG-n","mainPath":"ZeqG-n","content-wrapper":"_8-VGbx","contentWrapper":"_8-VGbx","content":"f1Bo97","action-wrapper":"yHHIyH","actionWrapper":"yHHIyH","icon-wrapper":"_-3xjG7","iconWrapper":"_-3xjG7","icon":"py2Lun","close-icon":"UW5usS","closeIcon":"UW5usS"};
 
 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":"kt6hNc","submenuRootItemRtl":"kt6hNc","icon-after":"cvuxMu","iconAfter":"cvuxMu","submenu-root-item":"jSfVoe","submenuRootItem":"jSfVoe","icon-check":"_772w3N","iconCheck":"_772w3N","splitter-root":"RanNVV","splitterRoot":"RanNVV","splitter":"tZAbt0","header-root":"HG1K4L","headerRoot":"HG1K4L","item-root":"_1sqOxa","itemRoot":"_1sqOxa","icon":"MunWuB","link":"u02ZhT","indent":"TvnwQu","selected-mark":"_3xfn0R","selectedMark":"_3xfn0R"};
 
 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":"_9Q8qyL","mode-block":"b-q2--","modeBlock":"b-q2--","mode-inline":"DUGgXF","modeInline":"DUGgXF","padding-0":"ha8phR","padding0":"ha8phR","padding-6":"bb3J-V","padding6":"bb3J-V","padding-12":"yZwuXj","padding12":"yZwuXj","padding-18":"MSxLsx","padding18":"MSxLsx"};
 
 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":"g8kTts","align-items":"_4mcqOz","alignItems":"_4mcqOz","justify-content":"eR4yds","justifyContent":"eR4yds","border-top":"_1NoDBx","borderTop":"_1NoDBx","border-bottom":"jY6yPS","borderBottom":"jY6yPS","top-shadow":"CJfy2S","topShadow":"CJfy2S","padding":"ehk42B","margin":"w4BZ8M","vPadding":"_4x13-2","column-gap":"GQiae9","columnGap":"GQiae9","row-gap":"AElaKQ","rowGap":"AElaKQ","spacing":"kxVjhK"};
 
 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":"GlIDeG","margin-24":"nLBcez","margin24":"nLBcez","padding-12":"vYUQl6","padding12":"vYUQl6","padding-24":"BQ0pCZ","padding24":"BQ0pCZ","shadow":"Yl-WgY","uui-surface-main":"nI0dBJ","uuiSurfaceMain":"nI0dBJ"};
 
 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":"Xdx8Hf"};
 
 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":"FALrI9"};
 
 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":"c7Scrj","viewport":"NCvV-L"};
+
+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":"T6hPfH","scrollContainer":"T6hPfH","list-container":"ZPmhUI","listContainer":"ZPmhUI"};
 
-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":"U6Epqp"};
 
 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":"U78jff","modal-blocker":"rLHfoX","modalBlocker":"rLHfoX","animateModalBlocker":"N6T2OU","modal":"nQ1ZUh","modal-footer":"eDVe9r","modalFooter":"eDVe9r","border-top":"FXWMEf","borderTop":"FXWMEf","modal-header":"tb7hiH","modalHeader":"tb7hiH","border-bottom":"_3cGnEZ","borderBottom":"_3cGnEZ"};
 
 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":"wD5M43","icon-wrapper":"ytSieg","iconWrapper":"ytSieg","action-wrapper":"jUW4oa","actionWrapper":"jUW4oa","close-icon":"Y9JY19","closeIcon":"Y9JY19","main-path":"ZGabYW","mainPath":"ZGabYW","content":"vkuP49","close-wrapper":"JQicTB","closeWrapper":"JQicTB","clear-notifications":"QjUgBA","clearNotifications":"QjUgBA"};
 
 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":"lZut3N"};
 
 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":"jmhVru","container":"tWIJrl"};
 
 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":"_0q9Ttf"};
 
 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":"-PXc4J"};
 
 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":"_4SswK5","dateInput":"_4SswK5","root":"M8dEUC","separator":"tXEJ4C"};
 
 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":"ctWOZN"};
 
 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":"ad8s-W","container":"uHvbmV","day-selection":"J9FAqZ","daySelection":"J9FAqZ","from-picker":"ncvxX5","fromPicker":"ncvxX5","to-picker":"OcG7s4","toPicker":"OcG7s4","bodes-wrapper":"zzbJ9q","bodesWrapper":"zzbJ9q","blocker":"yfsvJ5"};
 
 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":"mRcXPu","dropdownContainer":"mRcXPu"};
 
 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":"WSj09H","blocker":"_0iNUa9","marker":"_0CRQIv","top":"lB62dD","bottom":"HKii4S","left":"w8wOC3","right":"wcwV-y","inside":"aYGwmC"};
 
 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":"LI6Ne8","searchWrapper":"LI6Ne8","no-data":"GZfFGS","noData":"GZfFGS"};
 
-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":"_6cp1MK","pickerRow":"_6cp1MK","align-widgets-top":"faIUYo","alignWidgetsTop":"faIUYo","row-content":"zctZK0","rowContent":"zctZK0","align-widgets-center":"_1Kvir6","alignWidgetsCenter":"_1Kvir6","icon-container":"zs82EY","iconContainer":"zs82EY","content-wrapper":"FwKXt3","contentWrapper":"FwKXt3","icon-wrapper":"_3I1JBQ","iconWrapper":"_3I1JBQ","icon-default":"_2-bWe-","iconDefault":"_2-bWe-","selected-mark":"ybARsV","selectedMark":"ybARsV"};
 
 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":"H7CF2p","column-gap":"_36BmDK","columnGap":"_36BmDK","title":"eWUnIT","subtitle":"Gz0osj","disabled":"IxLjh4","multiline":"rEm-xY"};
 
 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":"SS-3Uh","title":"jIxoPH","close":"CTpj87"};
 
 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":"ozLT3k","container":"ghCR8W"};
 
 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":"q7O-lH","subHeaderWrapper":"q7O-lH","switch":"oc7wMg","no-found-modal-container":"gQCW-D","noFoundModalContainer":"gQCW-D","no-found-modal-container-icon":"Yd-1du","noFoundModalContainerIcon":"Yd-1du","no-found-modal-container-text":"GcZVa2","noFoundModalContainerText":"GcZVa2","body":"dzqHRB"};
 
 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":"MF9jqp"};
 
 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":"uRM0DJ"};
 
 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":"_2u3Ayo"};
 
 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":"oktYdH"};
 
 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":"NGjEfX","wrapper":"WmJNRA","align-widgets-top":"_2Nav-w","alignWidgetsTop":"_2Nav-w","align-widgets-center":"IqMJZ7","alignWidgetsCenter":"IqMJZ7"};
 
 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":"_3B0xu-"};
 
 // 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":"Wk4TKo","sortingPanelContainer":"Wk4TKo"};
 
 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":"pbCilY","caption-wrapper":"kKrvyf","captionWrapper":"kKrvyf","sort-icon":"_0HCjfB","sortIcon":"_0HCjfB","dropdown-icon":"_1xdL9q","dropdownIcon":"_1xdL9q","infoIcon":"_529USl","align-right":"b53Phw","alignRight":"b53Phw","align-center":"cFihLb","alignCenter":"cFihLb","caption":"YXQOCU","truncate":"jg83S5","upper-case":"_0Rhbef","upperCase":"_0Rhbef","checkbox":"h5VwzM","icon":"Y6tqhg","fold-all-icon":"tCfaP0","foldAllIcon":"tCfaP0","cell-tooltip":"LnPuCz","cellTooltip":"LnPuCz","resizing-marker":"zJ848M","resizingMarker":"zJ848M","pinned-right":"oOPyKQ","pinnedRight":"oOPyKQ","draggable":"XyGdEU","ghost":"Y2mK0K","is-dragged-out":"s3pOC2","isDraggedOut":"s3pOC2","dnd-marker-left":"VQ7F9l","dndMarkerLeft":"VQ7F9l","dnd-marker-right":"_4czKk1","dndMarkerRight":"_4czKk1","cell-tooltip-wrapper":"G672hm","cellTooltipWrapper":"G672hm","cell-tooltip-text":"t9G04e","cellTooltipText":"t9G04e","tooltip-caption":"Z2xriK","tooltipCaption":"Z2xriK","tooltip-info":"-uPuyj","tooltipInfo":"-uPuyj"};
 
 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":"GJA-jl","caption-wrapper":"JeQsdh","captionWrapper":"JeQsdh","align-center":"-AI1-m","alignCenter":"-AI1-m","caption":"_7p-MQZ","truncate":"NbBQc6","upper-case":"sBGMS-","upperCase":"sBGMS-","group-cell-tooltip":"Y9xwZN","groupCellTooltip":"Y9xwZN","group-cell-tooltip-wrapper":"y62P49","groupCellTooltipWrapper":"y62P49","group-cell-tooltip-text":"KV5V7M","groupCellTooltipText":"KV5V7M","tooltip-caption":"Cc9PMG","tooltipCaption":"Cc9PMG","tooltip-info":"pmBFBy","tooltipInfo":"pmBFBy"};
 
 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":"bELrvr"};
 
 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":"YjsM2k","header":"ZBEDAy","title":"LinM-7","removeButton":"S7llfQ","with-search":"_5DFEet","withSearch":"_5DFEet"};
 
 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":"YQzsHo","unpinIcon":"YQzsHo","pin-toggler-icon":"AH6-nx","pinTogglerIcon":"AH6-nx"};
 
 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":"zJslkk","rowWrapper":"zJslkk","pin-icon-button":"iwmnEY","pinIconButton":"iwmnEY","not-pinned":"_-5k19-","notPinned":"_-5k19-","checkbox":"QRyN6c","drag-handle":"Syw6Ub","dragHandle":"Syw6Ub","dnd-disabled":"qhrR-D","dndDisabled":"qhrR-D"};
 
 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":"s0VYId","main-panel":"FWKGJW","mainPanel":"FWKGJW","group":"z9ehud","group-title":"ETOdas","groupTitle":"ETOdas","group-items":"rMfxth","groupItems":"rMfxth","no-data":"Gc6okj","noData":"Gc6okj","no-data-title":"i-WLSZ","noDataTitle":"i-WLSZ","no-data-sub-title":"cn2Twl","noDataSubTitle":"cn2Twl","h-divider":"aqcTmP","hDivider":"aqcTmP","search-area":"pupJ7S","searchArea":"pupJ7S","subgroup-accordion":"lnVqMP","subgroupAccordion":"lnVqMP","subgroup":"SDPOOg","subgroup-title":"cABfd-","subgroupTitle":"cABfd-"};
 
 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":"SP3tYM","header":"mnh-cy","group":"mlBqW2","stickyHeader":"_84AjX2"};
 
 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":"BpqeXM","sticky-header":"MTHa5T","stickyHeader":"MTHa5T","no-results":"fJzFwb","noResults":"fJzFwb","icon":"_5d-97G","title":"lP2BFV"};
 
 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":"Ahu0CP","title-wrapper":"_6ZWgQL","titleWrapper":"_6ZWgQL","title":"_4VrmKX","text-wrapper":"z8ZI0b","textWrapper":"z8ZI0b","selection":"aLbA9r","postfix":"i3vFJn","selected":"_3edSVh"};
 
 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":"_-1Uhqp"};
 
 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":"TkUdma","deleteButton":"TkUdma","tab-button":"V1sZHz","tabButton":"V1sZHz","targetOpen":"_0-IIaY"};
 
 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":"xCehzP","presetInputCell":"xCehzP","preset-input":"tt5F9a","presetInput":"tt5F9a"};
 
 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":"J1q077","activePreset":"C7QNjX"};
 
 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":"vekOdI","dropdownDeleteIcon":"i7naC6","presetsWrapper":"lkHUKJ","addPresetContainer":"_485nR3","dropContainer":"qIMA-g"};
 
 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":"_5KnibK"};
 
-var css$f = {"root":"nx7RBH","burger-content":"jyN-38","burgerContent":"jyN-38"};
+var css$f = {"root":"m1kbC6","burger-content":"S1Y8ec","burgerContent":"S1Y8ec"};
 
 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":"dtUWWh","button-primary":"-Mis7-","buttonPrimary":"-Mis7-","button-secondary":"ylTyFw","buttonSecondary":"ylTyFw","hasIcon":"LOevly","dropdown":"_9xeNwU"};
 
 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":"vYVtSz","searchInput":"vYVtSz"};
 
 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":"KuPp6c","group-header":"uJKceF","groupHeader":"uJKceF","group-name":"jgiWdd","groupName":"jgiWdd","line":"vu919g"};
 
 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":"PLtwlE","type-primary":"xVnypL","typePrimary":"xVnypL","type-secondary":"-YJtZ8","typeSecondary":"-YJtZ8"};
 
 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":"pI0ItD","dropdownBody":"pI0ItD"};
 
 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":"Rcf6o8","globalMenuBtn":"Rcf6o8","global-menu-icon":"-KObp5","globalMenuIcon":"-KObp5"};
 
 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":"w9ZVai","open":"u8-Udc","folding-arrow":"_7iFuL1","foldingArrow":"_7iFuL1"};
 
 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":"_2vTcli","searchInput":"_2vTcli"};
 
 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":"wsFTHn"};
 
 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":"pn9hTw"};
 
 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":"_9KpK9K","drop-start":"c4tGeC","dropStart":"c4tGeC","drop-over":"xQ6lFt","dropOver":"xQ6lFt","link":"vMDLUG","drop-area":"YOmTpi","dropArea":"YOmTpi","drop-caption":"tGfwB3","dropCaption":"tGfwB3","icon-blue":"zD4Egz","iconBlue":"zD4Egz"};
 
 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":"huTrTa"};
 
 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":"pafLq4","file-name":"_80Ljt2","fileName":"_80Ljt2","default-color":"zJLWmG","defaultColor":"zJLWmG","doc-color":"-XBxir","docColor":"-XBxir","xls-color":"F2M9WF","xlsColor":"F2M9WF","pdf-color":"h64wle","pdfColor":"h64wle","movie-color":"PWzEHg","movieColor":"PWzEHg","img-color":"_8oFOIz","imgColor":"_8oFOIz","mov-color":"Kg0e4J","movColor":"Kg0e4J","error-block":"IKpfhS","errorBlock":"IKpfhS","icons-block":"_6oidLn","iconsBlock":"_6oidLn"};
 
 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":"R-B39Y"};
 
 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":"_4uFmj3","recoverySpinner":"_4uFmj3","recovery-message":"QQYg-5","recoveryMessage":"QQYg-5","modal-blocker":"_8uCqcK","modalBlocker":"_8uCqcK","modalFadeIn":"nSSJ-5"};
 
 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;