@epam/uui 6.2.0-alpha.2 → 6.3.0

package/index.esm.js

@@ -1,9 +1,9 @@
 import * as uuiComponents from '@epam/uui-components';
-import { Spinner as Spinner$1, Blocker as Blocker$1, Clickable, IconContainer, RadioInput as RadioInput$1, TextInput as TextInput$1, ControlGroup as ControlGroup$1, NumericInput as NumericInput$1, TextArea as TextArea$1, Dropdown as Dropdown$1, InputAddon as InputAddon$1, Slider as Slider$1, Anchor as Anchor$1, FlexSpacer, Text as Text$1, FlexCell as FlexCell$1, VPanel, ScrollBars as ScrollBars$1, ModalBlocker as ModalBlocker$1, ModalWindow as ModalWindow$1, Snackbar as Snackbar$1, Calendar as Calendar$1, YearSelection, MonthSelection, Day, uuiDaySelection, AvatarStack as AvatarStack$1, Paginator as Paginator$1, DragHandle, Avatar, usePickerModal, handleDataSourceKeyboard, PickerToggler as PickerToggler$1, usePickerInput, usePickerList, DataTableCell as DataTableCell$1, DataTableRow as DataTableRow$1, DataTableCellContainer, DataTableHeaderCell as DataTableHeaderCell$1, DataTableHeaderRow as DataTableHeaderRow$1, useColumnsConfiguration, Accordion as Accordion$1, DataTableSelectionProvider, DataTableFocusProvider, useShowSelected, usePickerApi, AdaptivePanel, Burger as Burger$1, Button as Button$1, DropSpot as DropSpot$1, UploadFileToggler, ErrorCatch } from '@epam/uui-components';
-export { Avatar, DataTableCellContainer, FlexSpacer, IconContainer } from '@epam/uui-components';
-import { withMods, devLogger, uuiElement, cx as cx$1, uuiMarkers, IEditableDebouncer, isFocusReceiverInsideFocusLock, UuiContext, uuiMod, getDir, isEventTargetInsideClickable, directionMode, useVirtualList, useScrollShadows, isMobile, i18n as i18n$1, useUuiContext, useLayoutEffectSafeForSsr, usePrevious, mobilePositioning, uuiDataTableHeaderCell, uuiDataTableHeaderGroupCell, DndActor, uuiDndState, useColumnsConfig, uuiScrollShadows, useForceUpdate, getSeparatedValue, useArrayDataSource, orderBy, getOrderBetween, Form as Form$1, useForm as useForm$1, formatBytes, useUuiError } from '@epam/uui-core';
+import { Spinner as Spinner$1, Blocker as Blocker$1, Clickable, IconContainer, AvatarStack as AvatarStack$1, Paginator as Paginator$1, RadioInput as RadioInput$1, TextInput as TextInput$1, ControlGroup as ControlGroup$1, NumericInput as NumericInput$1, TextArea as TextArea$1, Dropdown as Dropdown$1, InputAddon as InputAddon$1, Slider as Slider$1, DragHandle, Anchor as Anchor$1, FlexSpacer, Text as Text$1, FlexCell as FlexCell$1, VPanel, ModalBlocker as ModalBlocker$1, ModalWindow as ModalWindow$1, Snackbar as Snackbar$1, Calendar as Calendar$1, YearSelection, MonthSelection, Day, uuiDaySelection, Avatar, usePickerModal, handleDataSourceKeyboard, PickerToggler as PickerToggler$1, usePickerInput, usePickerList, DataTableCell as DataTableCell$1, DataTableRow as DataTableRow$1, DataTableCellContainer, DataTableHeaderCell as DataTableHeaderCell$1, DataTableHeaderRow as DataTableHeaderRow$1, useColumnsConfiguration, Accordion as Accordion$1, DataTableSelectionProvider, DataTableFocusProvider, useShowSelected, usePickerApi, AdaptivePanel, Burger as Burger$1, Button as Button$1, DropSpot as DropSpot$1, UploadFileToggler, ErrorCatch } from '@epam/uui-components';
+export { Avatar, DataTableCellContainer, FlexSpacer, IconContainer, MainMenuCustomElement, MainMenuLogo } from '@epam/uui-components';
+import { withMods, devLogger, uuiElement, useIsActive, uuiMod, cx as cx$1, uuiMarkers, IEditableDebouncer, isFocusReceiverInsideFocusLock, UuiContext, getDir, isEventTargetInsideClickable, directionMode, useScrollShadows, useVirtualList, isMobile, i18n as i18n$1, useUuiContext, useLayoutEffectSafeForSsr, usePrevious, mobilePositioning, uuiDataTableHeaderCell, uuiDataTableHeaderGroupCell, DndActor, uuiDndState, useColumnsConfig, uuiScrollShadows, useForceUpdate, getSeparatedValue, useArrayDataSource, orderBy, getOrderBetween, Form as Form$1, useForm as useForm$1, formatBytes, useUuiError } from '@epam/uui-core';
 import * as React from 'react';
-import React__default, { forwardRef, useState, useEffect, useContext, useRef, useReducer, useMemo, useImperativeHandle, useCallback, Fragment } from 'react';
+import React__default, { forwardRef, useState, useEffect, useContext, useRef, useImperativeHandle, useMemo, useReducer, useCallback, Fragment } from 'react';
 import cx from 'classnames';
 import { offset } from '@floating-ui/react';
 import dayjs from 'dayjs';
@@ -15,6 +15,8 @@ import updateLocale from 'dayjs/plugin/updateLocale.js';
 import objectSupport from 'dayjs/plugin/objectSupport';
 import customParseFormat from 'dayjs/plugin/customParseFormat.js';
 import isoWeek from 'dayjs/plugin/isoWeek.js';
+import { useOverlayScrollbars } from 'overlayscrollbars-react';
+import 'overlayscrollbars/styles/overlayscrollbars.css';
 import isEqual from 'react-fast-compare';
 import FocusLock, { MoveFocusInside } from 'react-focus-lock';
 
@@ -120,7 +122,9 @@ var SvgNotificationInfoOutline = function SvgNotificationInfoOutline(props, ref)
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$K || (_path$K = /*#__PURE__*/React.createElement("path", {
-    d: "M11 17h2v-6h-2v6zm1-8a.968.968 0 0 0 .713-.288A.967.967 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.967.967 0 0 0-.712.287A.968.968 0 0 0 11 8c0 .283.096.52.288.712A.965.965 0 0 0 12 9zm0 13a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20z"
+    fillRule: "evenodd",
+    d: "M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z",
+    clipRule: "evenodd"
   })));
 };
 var ForwardRef$K = /*#__PURE__*/forwardRef(SvgNotificationInfoOutline);
@@ -135,7 +139,9 @@ var SvgNotificationInfoFill = function SvgNotificationInfoFill(props, ref) {
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$J || (_path$J = /*#__PURE__*/React.createElement("path", {
-    d: "M11 17h2v-6h-2v6zm1-8a.968.968 0 0 0 .713-.288A.967.967 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.967.967 0 0 0-.712.287A.968.968 0 0 0 11 8c0 .283.096.52.288.712A.965.965 0 0 0 12 9zm0 13a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22z"
+    fillRule: "evenodd",
+    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",
+    clipRule: "evenodd"
   })));
 };
 var ForwardRef$J = /*#__PURE__*/forwardRef(SvgNotificationInfoFill);
@@ -151,7 +157,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#so5rmad7rvcg4bjgm_a)"
+    clipPath: "url(#0smlushu6n1uhrbtq_a)"
   }, _path$I || (_path$I = /*#__PURE__*/React.createElement("path", {
     d: "M150.585 1.535C49.483-11.495 27.481 61.805 45.725 97.481c10.581 20.69-39.64 70.792 17.744 81.468 27.538 5.123 36-13.341 62.433-10.655 35.4 3.6 148.167-4.73 88.349-78.915-31.713-39.335 1.026-79.506-63.666-87.844Z",
     fill: "#F5F6FA"
@@ -172,7 +178,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M86.786 22.982c-2.55 0-4.965 2.07-4.965 4.552V120.6c0 2.484 2.4 4.572 4.965 4.572h88.101c2.582 0 4.986-2.089 4.986-4.572V27.534c0-2.464-2.418-4.552-4.986-4.552h-88.1Zm-5.793 4.552c0-3.022 2.874-5.38 5.793-5.38h88.101c2.935 0 5.814 2.374 5.814 5.38V120.6c0 3.021-2.86 5.4-5.814 5.4h-88.1c-2.94 0-5.794-2.381-5.794-5.4V27.534Z",
     fill: "#1D1E26"
   })), /*#__PURE__*/React.createElement("mask", {
-    id: "so5rmaiu52j68aqp_b",
+    id: "0smlusms3cqehnlrc_b",
     style: {
       maskType: "alpha"
     },
@@ -185,7 +191,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M174.887 125.586h-88.1c-2.752 0-5.38-2.234-5.38-4.986V27.534c0-2.752 2.644-4.966 5.38-4.966h88.1c2.752 0 5.4 2.23 5.4 4.966V120.6c0 2.752-2.632 4.986-5.4 4.986Z",
     fill: "#9BDEFF"
   }))), _g || (_g = /*#__PURE__*/React.createElement("g", {
-    mask: "url(#so5rmaiu52j68aqp_b)",
+    mask: "url(#0smlusms3cqehnlrc_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
@@ -271,7 +277,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M24.73 96.184a.414.414 0 0 1 .581.06l48.646 59.751a.413.413 0 1 1-.642.523L24.67 96.766a.414.414 0 0 1 .06-.582Z",
     fill: "#fff"
   }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "so5rmad7rvcg4bjgm_a"
+    id: "0smlushu6n1uhrbtq_a"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
@@ -759,7 +765,7 @@ var SvgFileFileExcelFill = function SvgFileFileExcelFill(props, ref) {
     ref: ref
   }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm1.8 18H14l-2-3.4-2 3.4H8.2l2.9-4.5L8.2 11H10l2 3.4 2-3.4h1.8l-2.9 4.5 2.9 4.5zM13 9V3.5L18.5 9H13z",
+    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm2 16-1.5 1.5L12 17l-2.5 2.5L8 18l2.5-2.5L8 13l1.5-1.5L12 14l2.5-2.5L16 13l-2.5 2.5L16 18zm-3-9V3.5L18.5 9H13z",
     clipRule: "evenodd"
   })));
 };
@@ -809,10 +815,10 @@ var SvgFileFileVideoFill = function SvgFileFileVideoFill(props, ref) {
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
-    d: "M14.992 14 9.5 17.138v-6.276L14.992 14z"
+    d: "m14 15-5 3v-6l5 3z"
   })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    d: "M4 4c0-1.11.89-2 2-2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4zm9-.5V9h5.5L13 3.5zM8.5 9.138v9.724L17.008 14 8.5 9.138z",
+    d: "M4 4c0-1.11.89-2 2-2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4zm9-.5V9h5.5L13 3.5zM8 10v10l8-5-8-5z",
     clipRule: "evenodd"
   })));
 };
@@ -829,7 +835,7 @@ var SvgFileFileTableFill = function SvgFileFileTableFill(props, ref) {
     ref: ref
   }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-4 17H7v-2h3v2zm0-3H7v-2h3v2zm0-3H7v-2h3v2zm4 6h-3v-2h3v2zm0-3h-3v-2h3v2zm0-3h-3v-2h3v2zm-1-4V3.5L18.5 9H13z",
+    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM9 19H6v-2h3v2zm0-3H6v-2h3v2zm0-3H6v-2h3v2zm4 6h-3v-2h3v2zm0-3h-3v-2h3v2zm0-3h-3v-2h3v2zm0-4V3.5L18.5 9H13z",
     clipRule: "evenodd"
   })));
 };
@@ -922,14 +928,14 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
 };
 var ForwardRef$4 = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
 
-var css$1w = {"root":"swtubk","uui-spinner":"vlpq4m","uuiSpinner":"vlpq4m"};
+var css$1w = {"root":"K-RXLg","uui-spinner":"lgr1QK","uuiSpinner":"lgr1QK"};
 
 function applySpinnerMods() {
     return [css$1w.root, 'uui-spinner'];
 }
 const Spinner = /* @__PURE__ */withMods(Spinner$1, applySpinnerMods);
 
-var css$1v = {"root":"_3kDq7o","loading-word":"prJ-cY","loadingWord":"prJ-cY","animated-loading":"AFTQa1","animatedLoading":"AFTQa1","skeleton_loading":"r7ke0l","skeletonLoading":"r7ke0l"};
+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 = ' ';
@@ -946,7 +952,7 @@ const TextPlaceholder = (props) => {
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
-var css$1u = {"root":"-f8lAu","line-height":"ZdVCMv","lineHeight":"ZdVCMv","font-size":"oPBD61","fontSize":"oPBD61"};
+var css$1u = {"root":"TKV-RQ","line-height":"p0-b-4","lineHeight":"p0-b-4","font-size":"O36flr","fontSize":"O36flr"};
 
 function applyTextMods(mods) {
     return [
@@ -973,7 +979,7 @@ const Text = /* @__PURE__ */withMods(uuiComponents.Text, applyTextMods, (props)
     };
 });
 
-var css$1t = {"root":"BESAnm"};
+var css$1t = {"root":"_7GVMYK"};
 
 const Blocker = /* @__PURE__ */withMods(Blocker$1, () => [css$1t.root], () => ({ renderSpinner: settings.blocker.renderSpinner }));
 
@@ -1384,6 +1390,22 @@ const tabButtonSettings = {
         },
     },
 };
+const verticalTabButtonSettings = {
+    icons: {
+        clearIcon: ForwardRef$Q,
+        foldingIcon: ForwardRef$P,
+        dropdownIcon: ForwardRef$P,
+    },
+    sizes: {
+        default: '48',
+        countIndicatorMap: {
+            30: '18',
+            36: '18',
+            48: '18',
+        },
+    },
+    weight: 'semibold',
+};
 const tagSettings = {
     icons: {
         clearIcon: ForwardRef$Q,
@@ -1455,13 +1477,14 @@ const settings = {
     statusIndicator: statusIndicatorSettings,
     switch: switchSettings,
     tabButton: tabButtonSettings,
+    verticalTabButton: verticalTabButtonSettings,
     tag: tagSettings,
     text: textSettings,
     textArea: textAreaSettings,
     textInput: textInputSettings,
 };
 
-var css$1s = {"root":"nLqJ4E"};
+var css$1s = {"root":"_4vzV11"};
 
 function applyButtonMods(mods) {
     return [
@@ -1479,7 +1502,7 @@ const Button = /* @__PURE__ */withMods(uuiComponents.Button, applyButtonMods, ()
     };
 });
 
-var css$1r = {"root":"S-UB7B"};
+var css$1r = {"root":"v0XflL"};
 
 function applyIconButtonMods(props) {
     return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1r.root];
@@ -1516,7 +1539,7 @@ function getIconClass(props) {
     return [classList['has-left-icon'] ? 'uui-has-left-icon' : 'uui-no-left-icon', classList['has-right-icon'] ? 'uui-has-right-icon' : 'uui-no-right-icon'];
 }
 
-var css$1q = {"root":"_99KD6-"};
+var css$1q = {"root":"_-2astL"};
 
 const DEFAULT_COLOR = 'primary';
 const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
@@ -1546,7 +1569,7 @@ const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         props.isDropdown && (React.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1p = {"root":"iaCqV2"};
+var css$1p = {"root":"gaW5AH"};
 
 const CountIndicator = /* @__PURE__ */forwardRef((props, ref) => {
     return (React__default.createElement("div", { ref: ref, className: cx([
@@ -1558,10 +1581,18 @@ const CountIndicator = /* @__PURE__ */forwardRef((props, ref) => {
         ]) }, props.caption));
 });
 
-var css$1o = {"root":"sufzmE","withNotify":"_8Iqyd7"};
+var css$1o = {"root":"tdsef-","withNotify":"leQOnM"};
 
-const TabButton = /* @__PURE__ */React__default.forwardRef((props, ref) => {
+const TabButton = /* @__PURE__ */React__default.forwardRef((props, refExternal) => {
+    const refLocal = React__default.useRef(null);
+    const ref = refExternal ?? refLocal;
+    const { isActive } = useIsActive({
+        isLinkActive: props.isLinkActive,
+        link: props.link,
+        isActive: props.isActive,
+    });
     const styles = [
+        isActive && uuiMod.active,
         css$1o.root,
         'uui-tab-button',
         `uui-size-${props.size || settings.tabButton.sizes.default}`,
@@ -1570,11 +1601,22 @@ const TabButton = /* @__PURE__ */React__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__default.createElement(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__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         (props.caption || props.withNotify) && (React__default.createElement("div", { className: cx$1(uuiElement.caption) },
@@ -1586,18 +1628,134 @@ const TabButton = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         props.onClear && !props.isDisabled && (React__default.createElement(IconContainer, { cx: uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
 });
 
-var css$1n = {"root":"Uz3QsF"};
+var css$1n = {"root":"_8OICE6","noLeftPadding":"_8PKs0G","foldingArea":"_78wvG5","onlyFoldable":"LNaxgt","captionWrapper":"GWojew","withNotify":"mzjjIs"};
+
+var css$1m = {"root":"_-5F5VL"};
 
-function applyVerticalTabButtonMods() {
-    return [css$1n.root, 'uui-vertical-tab-button'];
+const AvatarStack = /* @__PURE__ */withMods(AvatarStack$1, () => [css$1m.root]);
+
+var css$1l = {"root":"ZynZU0"};
+
+const DEFAULT_FILL = 'solid';
+function applyBadgeMods(mods) {
+    return [
+        'uui-badge',
+        css$1l.root,
+        `uui-size-${mods.size || settings.badge.sizes.default}`,
+        `uui-fill-${mods.fill || DEFAULT_FILL}`,
+        `uui-color-${mods.color || 'info'}`,
+    ];
 }
-const VerticalTabButton = /* @__PURE__ */withMods(TabButton, applyVerticalTabButtonMods);
+const Badge = /* @__PURE__ */React__default.forwardRef((props, ref) => {
+    const styles = [applyBadgeMods(props), props.cx];
+    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.badge.icons.dropdownIcon;
+    return (React__default.createElement(Clickable, { ...props, rawProps: {
+            'aria-haspopup': props.isDropdown,
+            'aria-expanded': props.isOpen,
+            ...props.rawProps,
+        }, cx: styles, ref: ref },
+        (props.indicator && props.fill === 'outline') && (React__default.createElement("div", { className: "uui-indicator" })),
+        props.icon && props.iconPosition !== 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
+        props.caption && (React__default.createElement("div", { className: uuiElement.caption }, props.caption)),
+        props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { key: "count-indicator", color: null, size: settings.badge.sizes.countIndicatorMap[props.size || settings.badge.sizes.default], caption: props.count })),
+        props.icon && props.iconPosition === 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
+        props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
+});
 
-var css$1m = {"root":"Y4vjCx"};
+var css$1k = {"root":"ADBnKS"};
+
+function applyTagMods(props) {
+    return [
+        css$1k.root,
+        `uui-size-${props.size || settings.tag.sizes.default}`,
+        `uui-color-${props.color || 'neutral'}`,
+        `uui-fill-${props.fill || 'solid'}`,
+        'uui-tag',
+    ];
+}
+const Tag = /* @__PURE__ */React__default.forwardRef((props, ref) => {
+    const styles = [applyTagMods(props), props.cx];
+    const ClearIcon = props.clearIcon ? props.clearIcon : settings.tag.icons.clearIcon;
+    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.tag.icons.dropdownIcon;
+    return (React__default.createElement(Clickable, { ...props, rawProps: {
+            'aria-haspopup': props.isDropdown,
+            'aria-expanded': props.isOpen,
+            ...props.rawProps,
+        }, cx: styles, ref: ref },
+        props.icon && props.iconPosition !== 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
+        props.caption && (React__default.createElement("div", { className: uuiElement.caption }, props.caption)),
+        props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { color: (!props.color || props.color === 'neutral') ? 'white' : props.color, size: settings.tag.sizes.countIndicatorMap[(props.size || settings.tag.sizes.default)], caption: props.count })),
+        props.icon && props.iconPosition === 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
+        props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen })),
+        props.onClear && !props.isDisabled && (React__default.createElement(IconContainer, { cx: uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
+});
+
+var css$1j = {"root":"R3lgQz","page":"GavL40","spacer":"XKiV-t","mode-ghost":"Y9cxeS","modeGhost":"Y9cxeS"};
+
+function Paginator(props) {
+    const renderPaginator = (params) => (React__default.createElement("nav", { role: "navigation", className: cx(css$1j.root, 'uui-paginator', `uui-size-${props.size || settings.paginator.sizes.default}`), ...params.rawProps },
+        React__default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.leftArrowIcon, onClick: params.goToPrev, isDisabled: params.isFirst || props.isDisabled, fill: "outline", color: "secondary" }),
+        params.pages.map((page, index) => {
+            if (page.type === 'spacer') {
+                return (React__default.createElement(Button, { cx: cx(css$1j.spacer, css$1j.page), size: props.size || settings.paginator.sizes.default, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1, isDisabled: props.isDisabled }));
+            }
+            else {
+                return (React__default.createElement(Button, { cx: cx(css$1j[`mode-${!page.isActive && 'ghost'}`], css$1j.page), size: props.size || settings.paginator.sizes.default, key: page.pageNumber, caption: page.pageNumber, onClick: () => page.onClick?.(), rawProps: { 'aria-current': page.isActive }, fill: (page.isActive && 'outline') || 'ghost', color: "primary", isDisabled: props.isDisabled }));
+            }
+        }),
+        React__default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.rightArrowIcon, onClick: params.goToNext, isDisabled: params.isLast || props.isDisabled, fill: "outline", color: "secondary" })));
+    return React__default.createElement(Paginator$1, { ...props, render: renderPaginator });
+}
+
+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.forwardRef((props, ref) => {
+    return (React.createElement("div", { ref: ref, className: cx('uui-indeterminate_bar', props.cx, css$1i.root, css$1i[`size-${props.size || 12}`]) },
+        React.createElement("div", { className: cx(css$1i.progressBar) })));
+});
+
+var css$1h = {"root":"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) {
+    const size = mods.size || DEFAULT_SIZE;
+    return [
+        css$1h.root,
+        css$1h[`size-${size}`],
+        mods.striped && css$1h.striped,
+    ];
+}
+const ProgressBar = /* @__PURE__ */withMods(uuiComponents.ProgressBar, applyProgressBarMods, (props) => ({
+    hideLabel: props.hideLabel || props.striped,
+}));
+
+var css$1g = {"root":"wAZFgx"};
+
+const IndicatorBar = /* @__PURE__ */React.forwardRef((props, ref) => {
+    const { progress } = props;
+    return progress || progress === 0 ? (React.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx(css$1g.root, props.cx), hideLabel: true })) : (React.createElement(IndeterminateBar, { ref: ref, cx: cx(css$1g.root, props.cx) }));
+});
+
+var css$1f = {"root":"_3rssqT"};
+
+const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
+    return (React__default.createElement("div", { ref: ref, className: cx([
+            css$1f.root,
+            `uui-size-${props.size || settings.statusIndicator.sizes.default}`,
+            'uui-status_indicator',
+            `uui-color-${props.color || 'neutral'}`,
+            `uui-fill-${props.fill || 'solid'}`,
+            props.cx,
+        ]) },
+        React__default.createElement("div", { className: "uui-status_indicator-dot" }),
+        React__default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
+});
+
+var css$1e = {"root":"gaSdU1"};
 
 function applyCheckboxMods(mods) {
     return [
-        css$1m.root,
+        css$1e.root,
         `uui-size-${mods.size || settings.checkbox.sizes.default}`,
         'uui-control-mode-' + (mods.mode || 'form'),
         'uui-color-primary',
@@ -1611,11 +1769,11 @@ const applyUUICheckboxProps = (props) => {
 };
 const Checkbox = /* @__PURE__ */withMods(uuiComponents.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$1l = {"root":"_2z2Ynu"};
+var css$1d = {"root":"M28xhG"};
 
 function applyRadioInputMods(mods) {
     return [
-        css$1l.root,
+        css$1d.root,
         `uui-size-${mods.size || settings.radioInput.sizes.default}`,
         'uui-radio-input-container',
         'uui-color-primary',
@@ -1623,11 +1781,11 @@ function applyRadioInputMods(mods) {
 }
 const RadioInput = /* @__PURE__ */withMods(RadioInput$1, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : settings.radioInput.icons.dotIcon }));
 
-var css$1k = {"root":"Pipjeo"};
+var css$1c = {"root":"tBweim"};
 
 function applySwitchMods(mods) {
     return [
-        css$1k.root,
+        css$1c.root,
         `uui-size-${mods.size || settings.switch.sizes.default}`,
         'uui-color-primary',
     ];
@@ -1647,7 +1805,7 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var textInputCss = {"root":"GaLPp8"};
+var textInputCss = {"root":"_9pM85m"};
 
 const DEFAULT_MODE$3 = EditMode.FORM;
 function applyTextInputMods(mods) {
@@ -1672,9 +1830,9 @@ const SearchInput = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         } }));
 });
 
-var css$1j = {"root":"jf5GjA"};
+var css$1b = {"root":"BO21Fj"};
 
-const ControlGroup = /* @__PURE__ */withMods(ControlGroup$1, () => [css$1j.root, 'uui-control-group']);
+const ControlGroup = /* @__PURE__ */withMods(ControlGroup$1, () => [css$1b.root, 'uui-control-group']);
 
 function MultiSwitchComponent(props, ref) {
     return (React.createElement(ControlGroup, { ref: ref, rawProps: {
@@ -1688,13 +1846,13 @@ function MultiSwitchComponent(props, ref) {
 }
 const MultiSwitch = /* @__PURE__ */React.forwardRef(MultiSwitchComponent);
 
-var css$1i = {"root":"z2UqEd"};
+var css$1a = {"root":"PgOwFa"};
 
 const DEFAULT_MODE$2 = EditMode.FORM;
 function applyNumericInputMods(mods) {
     return [
         textInputCss.root,
-        css$1i.root,
+        css$1a.root,
         `uui-size-${mods.size || settings.numericInput.sizes.default}`,
         'uui-control-mode-' + (mods.mode || DEFAULT_MODE$2),
     ];
@@ -1708,12 +1866,12 @@ const NumericInput = /* @__PURE__ */withMods(NumericInput$1, applyNumericInputMo
     };
 });
 
-var css$1h = {"root":"ea7fge"};
+var css$19 = {"root":"LzQnoU"};
 
 const DEFAULT_MODE$1 = EditMode.FORM;
 function applyTextAreaMods(mods) {
     return [
-        css$1h.root,
+        css$19.root,
         'uui-textarea',
         'uui-size-' + (mods.size || settings.textArea.sizes.default),
         'uui-control-mode-' + (mods.mode || DEFAULT_MODE$1),
@@ -1749,18 +1907,18 @@ function TREE_SHAKEABLE_INIT$1() {
     };
 }
 
-var css$1g = {"root":"_9V3CJL"};
+var css$18 = {"root":"oQ2OvB"};
 
 function applyDropdownContainerMods(mods) {
     return [
-        css$1g.root,
+        css$18.root,
         mods.vPadding && `vPadding-${mods.vPadding}`,
         mods.padding && `padding-${mods.padding}`,
     ];
 }
 const DropdownContainer = /* @__PURE__ */withMods(uuiComponents.DropdownContainer, applyDropdownContainerMods);
 
-var css$1f = {"root":"ZFPYkY","timepicker-input":"L1dcBo","timepickerInput":"L1dcBo","ltr-always":"K2reK4","ltrAlways":"K2reK4"};
+var css$17 = {"root":"iQONol","timepicker-input":"BnXlx8","timepickerInput":"BnXlx8","ltr-always":"UQJvrt","ltrAlways":"UQJvrt"};
 
 const uuiTimePicker = {
     container: 'uui-timepicker-container',
@@ -1799,17 +1957,17 @@ function TimePickerBody(props) {
         const minutesToSubtract = value.minute() % minutesStep === 0 ? minutesStep : value.minute() % minutesStep;
         onMinutesChange(value.subtract(minutesToSubtract, 'm').minute());
     };
-    return (React.createElement("div", { className: cx$1(css$1f.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef, ...props.rawProps },
-        React.createElement("div", { className: css$1f.ltrAlways },
+    return (React.createElement("div", { className: cx$1(css$17.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef, ...props.rawProps },
+        React.createElement("div", { className: css$17.ltrAlways },
             React.createElement("div", { className: uuiTimePicker.elementContainer },
                 React.createElement(IconContainer, { size: 18, rawProps: { 'aria-label': 'Increment hours' }, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: () => onHoursChange(uuiDayjs.dayjs().set(props.value).add(1, 'h').hour()) }),
                 React.createElement(NumericInput$1, { cx: uuiTimePicker.input, onValueChange: onHoursChange, value: +(uuiDayjs.dayjs()
                         .set(props.value)
-                        .format(MAX_HOURS === FORMAT_12H ? 'hh' : 'HH')), min: MIN_HOURS, max: MAX_HOURS }),
+                        .format(MAX_HOURS === FORMAT_12H ? 'hh' : 'HH')), isReadonly: true, min: MIN_HOURS, max: MAX_HOURS }),
                 React.createElement(IconContainer, { size: 18, rawProps: { 'aria-label': 'Decrement hours' }, cx: uuiTimePicker.iconDown, icon: ForwardRef$P, onClick: () => onHoursChange(uuiDayjs.dayjs().set(props.value).subtract(1, 'h').hour()) })),
             React.createElement("div", { className: uuiTimePicker.elementContainer },
                 React.createElement(IconContainer, { size: 18, rawProps: { 'aria-label': 'Increment minutes' }, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: handleMinutesUpClick }),
-                React.createElement(NumericInput$1, { cx: uuiTimePicker.input, onValueChange: onMinutesChange, value: +uuiDayjs.dayjs().set(props.value).format('m'), min: MIN_MINUTES, max: MAX_MINUTES }),
+                React.createElement(NumericInput$1, { cx: uuiTimePicker.input, onValueChange: onMinutesChange, value: +uuiDayjs.dayjs().set(props.value).format('m'), isReadonly: true, min: MIN_MINUTES, max: MAX_MINUTES }),
                 React.createElement(IconContainer, { size: 18, rawProps: { 'aria-label': 'Decrement minutes' }, cx: uuiTimePicker.iconDown, icon: ForwardRef$P, onClick: handleMinutesDownClick }))),
         MAX_HOURS === FORMAT_12H && (React.createElement("div", { className: uuiTimePicker.elementContainer },
             React.createElement(IconContainer, { size: 18, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: onTimeTypeChange }),
@@ -1943,7 +2101,7 @@ function TimePickerComponent(props, ref) {
         state.value && state.inputValue && saveTime(state.value);
     };
     const renderInput = (inputProps) => {
-        return (React__default.createElement(TextInput, { ...inputProps, onClick: null, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$1f.root, css$1f.timepickerInput, props.inputCx], value: state.inputValue, onValueChange: handleInputChange, onCancel: !props.disableClear && onClear, onFocus: handleFocus, onBlur: handleBlur, isDropdown: false, placeholder: props.placeholder ? props.placeholder : getFormat(), mode: props.mode || DEFAULT_MODE, rawProps: props.rawProps?.input }));
+        return (React__default.createElement(TextInput, { ...inputProps, onClick: null, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$17.root, css$17.timepickerInput, props.inputCx], value: state.inputValue, onValueChange: handleInputChange, onCancel: !props.disableClear && onClear, onFocus: handleFocus, onBlur: handleBlur, isDropdown: false, placeholder: props.placeholder ? props.placeholder : getFormat(), mode: props.mode || DEFAULT_MODE, rawProps: props.rawProps?.input }));
     };
     const renderBody = (bodyProps) => {
         const { forwardedRef, onValueChange, ...timePickerBodyProps } = props;
@@ -1954,37 +2112,37 @@ function TimePickerComponent(props, ref) {
 }
 const TimePicker = /* @__PURE__ */React__default.forwardRef(TimePickerComponent);
 
-var css$1e = {"root":"FYglS-"};
+var css$16 = {"root":"y9iBid"};
 
 function applyInputAddonMods() {
     return [
-        css$1e.root,
+        css$16.root,
     ];
 }
 const InputAddon = /* @__PURE__ */withMods(InputAddon$1, applyInputAddonMods);
 
-var css$1d = {"root":"qF5NFi"};
+var css$15 = {"root":"iyMhGP"};
 
 function applySliderMods() {
-    return [css$1d.root, 'uui-color-neutral'];
+    return [css$15.root, 'uui-color-neutral'];
 }
 const Slider = /* @__PURE__ */withMods(Slider$1, applySliderMods);
 
-var css$1c = {"root":"_93wnl5"};
+var css$14 = {"root":"kJkPM0"};
 
 function applyTooltipMods(mods) {
     return [
-        css$1c.root,
+        css$14.root,
         `uui-color-${mods.color || 'inverted'}`,
     ];
 }
 const Tooltip = /* @__PURE__ */withMods(uuiComponents.Tooltip, applyTooltipMods);
 
-var css$1b = {"root":"Et68-h","tooltip":"_--dTuc"};
+var css$13 = {"root":"gnsYhI","tooltip":"fjucPA"};
 
 function applyRatingMods(mods) {
     return [
-        css$1b.root,
+        css$13.root,
         `uui-size-${mods.size || settings.rating.sizes.default}`,
     ];
 }
@@ -1994,17 +2152,94 @@ const Rating = /* @__PURE__ */withMods(uuiComponents.Rating, applyRatingMods, (p
     Tooltip,
 }));
 
-var css$1a = {"root":"Na7HfU","main-path":"FMXSZt","mainPath":"FMXSZt","content-wrapper":"pyGwR-","contentWrapper":"pyGwR-","content":"GYLwV1","action-wrapper":"vHkcdW","actionWrapper":"vHkcdW","icon-wrapper":"ABKSq-","iconWrapper":"ABKSq-","icon":"avSEz-","close-icon":"-xznB8","closeIcon":"-xznB8"};
+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;
+    const getIndent = () => {
+        return (row.indent - 1) * settings.dataTable.sizes.body.indentUnitMap[props.size || settings.dataTable.sizes.body.row];
+    };
+    const getWidth = () => {
+        return settings.dataTable.sizes.body.indentWidthMap[props.size || settings.dataTable.sizes.body.row];
+    };
+    const renderDragHandle = () => {
+        if (props.renderDragHandle) {
+            return props.renderDragHandle({ rowProps: props.rowProps, eventHandlers: props.eventHandlers });
+        }
+        return (React__default.createElement("div", { key: "dh", className: cx(css$12.dragHandleWrapper, row.indent > 0 && css$12.withIndent), style: { width: row.indent > 0 ? (getIndent() + getWidth()) : 0 }, ...props.eventHandlers },
+            React__default.createElement(DragHandle, { cx: css$12.dragHandle })));
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        row.dnd?.srcData && renderDragHandle(),
+        row?.checkbox?.isVisible && (React__default.createElement(Checkbox, { key: "cb", cx: "uui-dr_addons-checkbox", tabIndex: props.tabIndex, size: settings.dataTable.sizes.body.checkboxMap[props.size], value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => row.onCheck?.(row), isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
+        row.indent > 0 && (React__default.createElement("div", { key: "fold", className: cx('uui-dr_addons-indent', `uui-size-${props.size || settings.dataTable.sizes.body.row}`), style: { marginInlineStart: getIndent(), width: getWidth() } }, row.isFoldable && (React__default.createElement(IconContainer, { rawProps: {
+                'aria-label': row.isFolded ? 'Unfold' : 'Fold',
+                role: 'button',
+            }, key: "icon", icon: settings.dataTable.icons.body.foldingIcon, cx: [
+                uuiElement.foldingArrow, uuiMarkers.clickable, css$12.iconContainer,
+            ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), size: settings.dataTable.sizes.body.iconMap[props.size || settings.dataTable.sizes.body.row] }))))));
+}
+
+function VerticalTabButtonComponent(props, ref) {
+    const { isActive } = useIsActive({
+        isLinkActive: props.isLinkActive,
+        link: props.link,
+        isActive: props.isActive,
+    });
+    const styles = [
+        css$1n.root,
+        'uui-vertical-tab-button',
+        `uui-size-${props.size || settings.verticalTabButton.sizes.default}`,
+        isActive && uuiMod.active,
+        props.indent > 0 && css$1n.noLeftPadding,
+        !props.onClick && props.onFold && css$1n.onlyFoldable,
+        ...getIconClass(props),
+        props.cx,
+    ];
+    if (props.count !== undefined && props.count !== null) {
+        devLogger.warn('VerticalTabButton: count prop is deprecated. Use renderAddons prop instead.');
+    }
+    if (props.onClear !== undefined && props.onClear !== null) {
+        devLogger.warn('VerticalTabButton: onClear prop is deprecated. Use renderAddons prop instead.');
+    }
+    if (props.clearIcon !== undefined && props.clearIcon !== null) {
+        devLogger.warn('VerticalTabButton: clearIcon prop is deprecated. Use renderAddons prop instead.');
+    }
+    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.verticalTabButton.icons.dropdownIcon;
+    const ClearIcon = props.clearIcon ? props.clearIcon : settings.verticalTabButton.icons.clearIcon;
+    return (React__default.createElement(Clickable, { ...props, onClick: props.onClick || props.onFold, rawProps: {
+            role: 'tab',
+            ...props.rawProps,
+        }, cx: styles, ref: ref },
+        props.indent > 0 && (React__default.createElement("div", { key: "fold", className: cx$1(css$1n.foldingArea, props.onFold && uuiMarkers.clickable), style: { '--uui-folding-indent': `${props.indent - 1}` }, onClick: props.onFold }, props.isFoldable && (React__default.createElement(IconContainer, { rawProps: {
+                'aria-label': props.isFolded ? 'Unfold' : 'Fold',
+                role: 'button',
+            }, key: "icon", icon: settings.verticalTabButton.icons.foldingIcon, cx: [
+                uuiElement.foldingArrow, css$1n.iconContainer,
+            ], rotate: props.isFolded ? '90ccw' : '0', size: settings.dataTable.sizes.body.iconMap[props.size || settings.dataTable.sizes.body.row] })))),
+        props.icon && props.iconPosition !== 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
+        (props.caption || props.withNotify) && (React__default.createElement("div", { className: css$1n.captionWrapper },
+            props.caption && React__default.createElement("div", { className: cx$1(uuiElement.caption, `uui-vertical-tab-button-weight-${props.weight || settings.verticalTabButton.weight}`) }, props.caption),
+            props.withNotify && React__default.createElement("div", { className: css$1n.withNotify }))),
+        props.icon && props.iconPosition === 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
+        props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { color: "neutral", size: settings.verticalTabButton.sizes.countIndicatorMap[props.size || settings.verticalTabButton.sizes.default], caption: props.count })),
+        props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen })),
+        props.onClear && !props.isDisabled && (React__default.createElement(IconContainer, { cx: uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear })),
+        props.renderAddons && props.renderAddons()));
+}
+const VerticalTabButton = /* @__PURE__ */React__default.forwardRef(VerticalTabButtonComponent);
+
+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.forwardRef((props, ref) => (React.createElement("div", { role: "alert", ref: ref, className: cx('uui-alert', css$1a.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
-    React.createElement("div", { className: css$1a.mainPath },
-        React.createElement("div", { className: css$1a.contentWrapper },
-            props.icon && (React.createElement("div", { className: css$1a.iconWrapper },
-                React.createElement(IconContainer, { icon: props.icon, cx: css$1a.icon }))),
-            React.createElement("div", { className: css$1a.content },
+const Alert = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("div", { role: "alert", ref: ref, className: cx('uui-alert', css$11.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
+    React.createElement("div", { className: css$11.mainPath },
+        React.createElement("div", { className: css$11.contentWrapper },
+            props.icon && (React.createElement("div", { className: css$11.iconWrapper },
+                React.createElement(IconContainer, { icon: props.icon, cx: css$11.icon }))),
+            React.createElement("div", { className: css$11.content },
                 props.children,
-                props.actions && (React.createElement("div", { className: css$1a.actionWrapper }, props.actions.map((action) => (React.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$1a.actionLink, size: settings.alert.sizes.actionMap[props.size || settings.alert.sizes.default] }))))))),
-        props.onClose && React.createElement(IconButton, { icon: settings.alert.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$1a.closeIcon })))));
+                props.actions && (React.createElement("div", { className: css$11.actionWrapper }, props.actions.map((action) => (React.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$11.actionLink, size: settings.alert.sizes.actionMap[props.size || settings.alert.sizes.default] }))))))),
+        props.onClose && React.createElement(IconButton, { icon: settings.alert.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$11.closeIcon })))));
 const WarningAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, { icon: settings.alert.icons.warningIcon, color: "warning", ref: ref, ...props }));
 const SuccessAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, { icon: settings.alert.icons.successIcon, color: "success", ref: ref, ...props }));
 const HintAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, { icon: settings.alert.icons.infoIcon, color: "info", ref: ref, ...props }));
@@ -2012,7 +2247,7 @@ const ErrorAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createE
 
 const Dropdown = /* @__PURE__ */withMods(Dropdown$1);
 
-var css$19 = {"submenu-root-item-rtl":"pHdw-T","submenuRootItemRtl":"pHdw-T","icon-after":"OJyC0Z","iconAfter":"OJyC0Z","submenu-root-item":"cLB58e","submenuRootItem":"cLB58e","icon-check":"kC8EPl","iconCheck":"kC8EPl","splitter-root":"AMC0-5","splitterRoot":"AMC0-5","splitter":"uOIGWU","header-root":"j6mtyh","headerRoot":"j6mtyh","item-root":"fK5YiL","itemRoot":"fK5YiL","icon":"xM4vuV","link":"JP1ipM","indent":"HMKspL","selected-mark":"w1PiCh","selectedMark":"w1PiCh"};
+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"};
 
 var IDropdownControlKeys;
 (function (IDropdownControlKeys) {
@@ -2026,25 +2261,34 @@ var IDropdownControlKeys;
 function DropdownMenuContainer(props) {
     const menuRef = useRef(null);
     const [currentlyFocused, setFocused] = useState(0);
-    const menuItems = menuRef.current ? Array.from(menuRef.current.querySelectorAll(`[role="menuitem"]:not(.${uuiMod.disabled})`)) : [];
+    const getMenuItems = () => {
+        if (!menuRef.current)
+            return [];
+        return Array.from(menuRef.current.querySelectorAll(`[role="menuitem"]:not(.${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 === 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 === 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();
         }
     };
@@ -2077,29 +2321,29 @@ const DropdownMenuButton = /* @__PURE__ */React__default.forwardRef((props, ref)
     const getMenuButtonContent = () => {
         const isIconBefore = Boolean(icon && iconPosition !== 'right');
         const isIconAfter = Boolean(icon && iconPosition === 'right');
-        const iconElement = (React__default.createElement(IconButton, { icon: icon, color: isActive ? 'primary' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: cx$1(css$19.icon, iconPosition === 'right' ? css$19.iconAfter : css$19.iconBefore) }));
+        const iconElement = (React__default.createElement(IconButton, { icon: icon, color: isActive ? 'primary' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: cx$1(css$10.icon, iconPosition === 'right' ? css$10.iconAfter : css$10.iconBefore) }));
         return (React__default.createElement(React__default.Fragment, null,
             isIconBefore && iconElement,
-            React__default.createElement(Text$1, { cx: props.indent && css$19.indent }, caption),
+            React__default.createElement(Text$1, { cx: props.indent && css$10.indent }, caption),
             isIconAfter && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(FlexSpacer, null),
                 iconElement))));
     };
     const isAnchor = Boolean(link || href);
-    const itemClassNames = cx$1(props.cx, css$19.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened, (!isDisabled && onClick) && uuiMarkers.clickable);
-    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$19.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isLinkActive: isActive, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref },
+    const itemClassNames = cx$1(props.cx, css$10.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened, (!isDisabled && onClick) && uuiMarkers.clickable);
+    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$10.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref },
         getMenuButtonContent(),
         isSelected && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(FlexSpacer, null),
-            React__default.createElement(IconContainer, { icon: settings.dropdownMenu.icons.acceptIcon, cx: css$19.selectedMark })))));
+            React__default.createElement(IconContainer, { icon: settings.dropdownMenu.icons.acceptIcon, cx: css$10.selectedMark })))));
 });
 function DropdownMenuSplitter(props) {
-    return (React__default.createElement("div", { className: cx$1(props.cx, css$19.splitterRoot) },
-        React__default.createElement("hr", { className: css$19.splitter })));
+    return (React__default.createElement("div", { className: cx$1(props.cx, css$10.splitterRoot) },
+        React__default.createElement("hr", { className: css$10.splitter })));
 }
 function DropdownMenuHeader(props) {
-    return (React__default.createElement("div", { className: cx$1('uui-dropdown-menu-header', props.cx, css$19.headerRoot) },
-        React__default.createElement("span", { className: css$19.header }, props.caption)));
+    return (React__default.createElement("div", { className: cx$1('uui-dropdown-menu-header', props.cx, css$10.headerRoot) },
+        React__default.createElement("span", { className: css$10.header }, props.caption)));
 }
 function DropdownSubMenu(props) {
     const subMenuMiddleware = [
@@ -2114,7 +2358,7 @@ function DropdownSubMenu(props) {
         }),
     ];
     const isRtl = getDir() === 'rtl';
-    return (React__default.createElement(Dropdown$1, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: isRtl ? 'left-start' : 'right-start', middleware: subMenuMiddleware, renderBody: (dropdownProps) => !props.isDisabled && (React__default.createElement(DropdownMenuBody, { closeOnKey: IDropdownControlKeys.LEFT_ARROW, ...props, ...dropdownProps })), renderTarget: ({ toggleDropdownOpening, ...targetProps }) => (React__default.createElement(DropdownMenuButton, { cx: cx$1(isRtl ? css$19.submenuRootItemRtl : css$19.submenuRootItem), icon: settings.dropdownMenu.icons.dropdownIcon, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening, ...props, ...targetProps })) }));
+    return (React__default.createElement(Dropdown$1, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: isRtl ? 'left-start' : 'right-start', middleware: subMenuMiddleware, renderBody: (dropdownProps) => !props.isDisabled && (React__default.createElement(DropdownMenuBody, { closeOnKey: IDropdownControlKeys.LEFT_ARROW, ...props, ...dropdownProps })), renderTarget: ({ toggleDropdownOpening, ...targetProps }) => (React__default.createElement(DropdownMenuButton, { cx: cx$1(isRtl ? css$10.submenuRootItemRtl : css$10.submenuRootItem), icon: settings.dropdownMenu.icons.dropdownIcon, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening, ...props, ...targetProps })) }));
 }
 function DropdownMenuSwitchButton(props) {
     const context = useContext(UuiContext);
@@ -2130,29 +2374,29 @@ function DropdownMenuSwitchButton(props) {
             onHandleValueChange(!isSelected);
         }
     };
-    return (React__default.createElement("div", { className: cx$1(props.cx, css$19.itemRoot, isDisabled && uuiMod.disabled, (!isDisabled || onValueChange) && uuiMarkers.clickable), onClick: () => onHandleValueChange(!isSelected), role: "menuitem", onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 },
-        icon && React__default.createElement(IconContainer, { icon: icon, cx: css$19.iconBefore }),
+    return (React__default.createElement("div", { className: cx$1(props.cx, css$10.itemRoot, isDisabled && uuiMod.disabled, (!isDisabled || onValueChange) && uuiMarkers.clickable), onClick: () => onHandleValueChange(!isSelected), role: "menuitem", onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 },
+        icon && React__default.createElement(IconContainer, { icon: icon, cx: css$10.iconBefore }),
         React__default.createElement(Text$1, null, caption),
         React__default.createElement(FlexSpacer, null),
         React__default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
 }
 
-var css$18 = {"root":"DQqkrY","mode-block":"fH2y0y","modeBlock":"fH2y0y","mode-inline":"YWNF9y","modeInline":"YWNF9y","padding-0":"enL-As","padding0":"enL-As","padding-6":"sWbbVt","padding6":"sWbbVt","padding-12":"K1vr99","padding12":"K1vr99","padding-18":"pWlHbT","padding18":"pWlHbT"};
+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 [
-        css$18.root,
-        css$18[`mode-${mods.mode || 'block'}`],
-        mods.padding && css$18['padding-' + mods.padding],
+        css$$.root,
+        css$$[`mode-${mods.mode || 'block'}`],
+        mods.padding && css$$['padding-' + mods.padding],
     ];
 }
 const Accordion = /* @__PURE__ */withMods(uuiComponents.Accordion, applyAccordionMods, (mods) => ({
     dropdownIcon: mods.dropdownIcon !== null && settings.accordion.icons.dropdownIcon,
 }));
 
-var css$17 = {"root":"_1C6hvv","align-items":"viT8-O","alignItems":"viT8-O","justify-content":"uOw0I-","justifyContent":"uOw0I-","border-top":"_6uwZpp","borderTop":"_6uwZpp","border-bottom":"ed3zce","borderBottom":"ed3zce","top-shadow":"uRcfIV","topShadow":"uRcfIV","padding":"-C766q","margin":"_5WiaVm","vPadding":"XnKodA","column-gap":"ihuVkq","columnGap":"ihuVkq","row-gap":"_3HiCpt","rowGap":"_3HiCpt","spacing":"_0G0CWH"};
+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__ */withMods(FlexCell$1, () => [css$17.flexCell]);
+const FlexCell = /* @__PURE__ */withMods(FlexCell$1, () => [css$_.flexCell]);
 
 const FlexRow = /* @__PURE__ */forwardRef((props, ref) => {
     if (process.env.NODE_ENV !== "production") {
@@ -2161,22 +2405,22 @@ const FlexRow = /* @__PURE__ */forwardRef((props, ref) => {
         }
     }
     const classNames = cx$1([
-        css$17.root,
+        css$_.root,
         'uui-flex-row',
         props.onClick && uuiMarkers.clickable,
         props.cx,
         props.size !== null && 'uui-size-' + (props.size || settings.flexRow.sizes.default),
-        props.alignItems && css$17.alignItems,
-        props.justifyContent && css$17.justifyContent,
-        props.padding && css$17.padding,
-        props.vPadding && css$17.vPadding,
-        props.margin && css$17.margin,
-        props.topShadow && css$17.topShadow,
-        props.borderBottom && css$17.borderBottom,
-        props.borderTop && css$17.borderTop,
-        props.columnGap && css$17.columnGap,
-        props.rowGap && css$17.rowGap,
-        props.spacing && css$17.spacing,
+        props.alignItems && css$_.alignItems,
+        props.justifyContent && css$_.justifyContent,
+        props.padding && css$_.padding,
+        props.vPadding && css$_.vPadding,
+        props.margin && css$_.margin,
+        props.topShadow && css$_.topShadow,
+        props.borderBottom && css$_.borderBottom,
+        props.borderTop && css$_.borderTop,
+        props.columnGap && css$_.columnGap,
+        props.rowGap && css$_.rowGap,
+        props.spacing && css$_.spacing,
         props.background && `uui-flex-row-bg-${props.background}`,
     ]);
     let alignItemsValue = props.alignItems;
@@ -2202,22 +2446,22 @@ const FlexRow = /* @__PURE__ */forwardRef((props, ref) => {
         } }, props.children));
 });
 
-var css$16 = {"root":"_7oknl-","margin-24":"BCH9S0","margin24":"BCH9S0","padding-12":"-u3HDd","padding12":"-u3HDd","padding-24":"BJBXnw","padding24":"BJBXnw","shadow":"pJ7Tra","uui-surface-main":"vleANi","uuiSurfaceMain":"vleANi"};
+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__ */withMods(VPanel, (props) => [
     'uui-panel',
-    css$16.root,
-    props.shadow && css$16.shadow,
-    props.margin && css$16['margin-' + props.margin],
-    props.background && css$16[`uui-${props.background}`],
+    css$Z.root,
+    props.shadow && css$Z.shadow,
+    props.margin && css$Z['margin-' + props.margin],
+    props.background && css$Z[`uui-${props.background}`],
 ]);
 
-var css$15 = {"root":"e5tcpt"};
+var css$Y = {"root":"Xdx8Hf"};
 
 function applyLabeledInputMods(mods) {
     return [
         'uui-labeled-input',
-        css$15.root,
+        css$Y.root,
         'uui-size-' + (mods.size || settings.labeledInput.sizes.default),
     ];
 }
@@ -2229,7 +2473,7 @@ function applyLabeledInputProps(props) {
 }
 const LabeledInput = /* @__PURE__ */withMods(uuiComponents.LabeledInput, applyLabeledInputMods, applyLabeledInputProps);
 
-var css$14 = {"root":"RS3Znw"};
+var css$X = {"root":"FALrI9"};
 
 function RadioGroup(props) {
     const direction = props.direction || 'vertical';
@@ -2238,24 +2482,85 @@ function RadioGroup(props) {
             props.onValueChange(newVal);
         }
     };
-    return (React.createElement("fieldset", { ref: props.forwardedRef, className: cx$1(css$14.root, directionMode[direction], props.cx), onFocus: props.onFocus, onBlur: props.onBlur, ...props.rawProps }, props.items.map((i) => {
+    return (React.createElement("fieldset", { ref: props.forwardedRef, className: cx$1(css$X.root, directionMode[direction], props.cx), onFocus: props.onFocus, onBlur: props.onBlur, ...props.rawProps }, props.items.map((i) => {
         const { id, name, renderName, ...restItemProps } = i;
         return (React.createElement(RadioInput, { name: props.name, renderLabel: i.renderName ? i.renderName : () => i.name, value: props.value === i.id, onValueChange: () => handleChange(i.id), isDisabled: props.isDisabled || i.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, isRequired: props.isRequired, key: i.id.toString(), size: props.size || i.size, ...restItemProps }));
     })));
 }
 
-var css$13 = {"root":"sGTbdF"};
-
-function applyScrollBarsMods() {
-    return [
-        css$13.root, 'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
-    ];
-}
-const ScrollBars = /* @__PURE__ */withMods(ScrollBars$1, 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__ */forwardRef((props, ref) => {
+    const { cx: outerCx, children, overflowTopEffect = 'none', overflowBottomEffect = 'none', onScroll, autoHide = 'never', autoHideDelay, rawProps, ...rest } = props;
+    const [shadowElements, setShadowElements] = useState({
+        host: null,
+        viewport: null,
+    });
+    const hostRef = useRef(null);
+    const viewportRef = useRef(null);
+    const containerRef = useRef(null);
+    const [initialize, osInstance] = useOverlayScrollbars({
+        options: {
+            scrollbars: {
+                theme: 'uui-scroll-bars',
+                autoHide: autoHide,
+                autoHideDelay: typeof autoHideDelay === 'number' ? autoHideDelay : undefined,
+            },
+        },
+        events: {
+            scroll: (_inst, ev) => {
+                onScroll?.(ev);
+            },
+        },
+    });
+    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]);
+    useEffect(() => {
+        const instance = osInstance();
+        if (!instance)
+            return;
+        const elements = instance.elements();
+        setShadowElements({
+            host: elements.host,
+            viewport: elements.viewport,
+        });
+    }, [osInstance]);
+    useScrollShadows(shadowElements.host, shadowElements.viewport);
+    useImperativeHandle(ref, () => {
+        return {
+            container: containerRef.current,
+            view: viewportRef.current,
+        };
+    }, []);
+    return (React__default.createElement("div", { ref: hostRef, className: cx(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__default.createElement("div", { className: css$W.viewport, "data-overlayscrollbars-contents": "", ref: (node) => { viewportRef.current = node; }, ...rawProps }, children)));
+});
+ScrollBars.displayName = 'ScrollBars';
 
-var css$12 = {"scroll-container":"ZyfepS","scrollContainer":"ZyfepS","list-container":"FVGW2K","listContainer":"FVGW2K"};
+var css$V = {"scroll-container":"T6hPfH","scrollContainer":"T6hPfH","list-container":"ZPmhUI","listContainer":"ZPmhUI"};
 
-const VirtualList = /* @__PURE__ */React.forwardRef((props, ref) => {
+const VirtualList = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const { listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef, } = useVirtualList({
         value: props.value,
         onValueChange: props.onValueChange,
@@ -2263,41 +2568,50 @@ const VirtualList = /* @__PURE__ */React.forwardRef((props, ref) => {
         rowsCount: props.rowsCount,
         rowsSelector: props.rowsSelector,
     });
-    React.useImperativeHandle(ref, () => scrollContainerRef.current, [scrollContainerRef.current]);
-    const scrollShadows = useScrollShadows({ root: scrollContainerRef.current });
+    React__default.useImperativeHandle(ref, () => scrollContainerRef.current, [scrollContainerRef.current]);
     const renderRows = () => props.renderRows?.({
-        listContainerRef, estimatedHeight, offsetY, scrollShadows,
-    }) || (React.createElement("div", { className: css$12.listContainer, style: { minHeight: `${estimatedHeight}px` } },
-        React.createElement("div", { ref: listContainerRef, role: props.role, style: { marginTop: offsetY } }, props.rows)));
-    const renderView = ({ style }) => (React.createElement(VirtualListView, { isLoading: props.isLoading, style: style, rawProps: props.rawProps, renderBlocker: props.renderBlocker }));
-    const scrollBarsRef = React.useCallback((scrollbars) => {
-        if (!scrollbars?.container?.firstChild)
+        listContainerRef, estimatedHeight, offsetY,
+    }) || (React__default.createElement("div", { className: css$V.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+        React__default.createElement("div", { ref: listContainerRef, role: props.role, style: { marginTop: offsetY } }, props.rows)));
+    const scrollBarsRef = React__default.useCallback((scrollbars) => {
+        if (!scrollbars?.view)
             return;
-        scrollContainerRef.current = scrollbars.container.firstChild;
+        scrollContainerRef.current = scrollbars.view;
     }, []);
-    return (React.createElement(ScrollBars, { cx: cx$1(css$12.scrollContainer, props.cx, {
-            [uuiMarkers.scrolledLeft]: scrollShadows.horizontalLeft,
-            [uuiMarkers.scrolledRight]: scrollShadows.horizontalRight,
-            [uuiMarkers.scrolledTop]: scrollShadows.verticalTop,
-            [uuiMarkers.scrolledBottom]: scrollShadows.verticalBottom,
-        }), onScroll: handleScroll, renderView: renderView, ref: scrollBarsRef }, renderRows()));
-});
-const VirtualListView = /* @__PURE__ */React.forwardRef((props, ref) => {
-    return (React.createElement(React.Fragment, null,
-        React.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.createElement(Blocker, { isEnabled: props.isLoading })));
+    return (React__default.createElement(ScrollBars, { cx: cx$1(css$V.scrollContainer, props.cx), onScroll: handleScroll, ref: scrollBarsRef, rawProps: props.rawProps, overflowTopEffect: props.overflowTopEffect, overflowBottomEffect: props.overflowBottomEffect },
+        renderRows(),
+        React__default.createElement(Blocker, { isEnabled: props.isLoading })));
 });
 
-var css$11 = {"root":"tWR3kt"};
+const RichTextView = /* @__PURE__ */withMods(uuiComponents.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || settings.richTextView.sizes.default}`]);
+
+function TreeRowRenderer(props) {
+    const { row, size } = props;
+    const handleClick = React.useCallback(() => {
+        const cb = row.onClick || row.onSelect;
+        if (cb && !row.isDisabled) {
+            cb(row);
+        }
+    }, [row]);
+    const handleFold = React.useCallback(() => row.onFold && row.onFold(row), [row]);
+    const renderAddons = React.useCallback(() => props.renderAddons && props.renderAddons(row), [props.renderAddons, row]);
+    const isActive = row.isSelected;
+    const getCaption = React.useCallback((value) => {
+        return props.getCaption(value);
+    }, [props.getCaption]);
+    return (React.createElement(VerticalTabButton, { ...row, isActive: isActive, caption: row.isLoading ? React.createElement(TextPlaceholder, null) : getCaption(row.value), size: size, onClick: (row.onClick || row.onSelect) ? handleClick : undefined, link: row.link, onFold: row.onFold ? handleFold : undefined, weight: (row.isChildrenSelected || row.isSelected || isActive) ? 'semibold' : 'regular', renderAddons: renderAddons }));
+}
+const MemoizedTreeRowRenderer = /* @__PURE__ */React.memo(TreeRowRenderer);
+function Tree(props) {
+    const { view, renderRow, size = '36', cx: propsCx, value, onValueChange, } = props;
+    const rows = view.getVisibleRows();
+    const rowsCount = view.getListProps().rowsCount ?? rows.length;
+    const renderRowFunction = renderRow || (({ key, ...row }) => (React.createElement(MemoizedTreeRowRenderer, { key: key, row: row, size: size, getCaption: props.getCaption, renderAddons: props.renderAddons })));
+    const renderedRows = useMemo(() => rows.map((row) => renderRowFunction(row)), [rows, renderRowFunction, size]);
+    return (React.createElement(VirtualList, { value: value, onValueChange: onValueChange, rowsCount: rowsCount, rows: renderedRows, cx: cx$1(propsCx), role: "tree" }));
+}
+
+var css$U = {"root":"U6Epqp"};
 
 function CheckboxGroup(props) {
     const currentValue = props.value || [];
@@ -2313,16 +2627,96 @@ function CheckboxGroup(props) {
         }
         props.onValueChange(newSelection);
     };
-    return (React.createElement("fieldset", { ref: props.forwardedRef, className: cx$1(css$11.root, directionMode[direction], props.cx), ...props.rawProps }, props.items.map((i) => {
+    return (React.createElement("fieldset", { ref: props.forwardedRef, className: cx$1(css$U.root, directionMode[direction], props.cx), ...props.rawProps }, props.items.map((i) => {
         const { id, name, renderName, ...restItemProps } = i;
         return (React.createElement(Checkbox, { renderLabel: i.renderName ? i.renderName : () => i.name, value: currentValue.indexOf(i.id) !== -1, onValueChange: (selected) => handleChange(selected, i.id), isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, isRequired: props.isRequired, key: i.id.toString(), size: props.size || i.size, ...restItemProps }));
     })));
 }
 
-var css$10 = {"root":"qUODMI","modal-blocker":"ifK49h","modalBlocker":"ifK49h","animateModalBlocker":"qlF0Si","modal":"DH5Z2N","modal-footer":"wx8O4l","modalFooter":"wx8O4l","border-top":"mdeiH3","borderTop":"mdeiH3","modal-header":"-wRu6i","modalHeader":"-wRu6i","border-bottom":"nsfT8G","borderBottom":"nsfT8G"};
+const Tabs = /* @__PURE__ */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__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__default.createElement(TabButton, { key: id, isActive: isActive, tabIndex: tabIndex, ...tabProps, onClick: handleOnClick, rawProps: {
+                id,
+                'aria-selected': isActive,
+                ...tabProps.rawProps,
+                onKeyDown: handleOnKeyDown,
+            } }));
+    })));
+});
+Tabs.displayName = 'Tabs';
 
-const ModalBlocker = /* @__PURE__ */withMods(ModalBlocker$1, () => [css$10.modalBlocker]);
-const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$10.root, css$10.modal], (props) => {
+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__ */withMods(ModalBlocker$1, () => [css$T.modalBlocker]);
+const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$T.root, css$T.modal], (props) => {
     const width = props.width;
     const height = props.height || 'auto';
     const maxHeight = isMobile() ? 'var(--uui-modals-mobile-max-height)' : (props.maxHeight || 'var(--uui-modals-max-height)');
@@ -2336,7 +2730,7 @@ const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$10.root, c
     };
 });
 function ModalHeader(props) {
-    return (React__default.createElement("div", { className: cx(css$10.root, css$10.modalHeader, 'uui-modal-header', props.borderBottom && css$10.borderBottom, props.cx), ...props.rawProps, style: {
+    return (React__default.createElement("div", { className: cx(css$T.root, css$T.modalHeader, 'uui-modal-header', props.borderBottom && css$T.borderBottom, props.cx), ...props.rawProps, style: {
             ...props.rawProps?.style,
         } },
         props.title && (React__default.createElement("div", { className: cx('uui-modal-title', 'uui-typography') }, props.title)),
@@ -2346,7 +2740,7 @@ function ModalHeader(props) {
             React__default.createElement(IconButton, { rawProps: { 'aria-label': 'Close modal' }, icon: settings.modal.icons.closeIcon, onClick: props.onClose })))));
 }
 function ModalFooter(props) {
-    return (React__default.createElement("div", { className: cx(css$10.root, css$10.modalFooter, 'uui-modal-footer', props.borderTop && css$10.borderTop, props.cx), ...props.rawProps, style: {
+    return (React__default.createElement("div", { className: cx(css$T.root, css$T.modalFooter, 'uui-modal-footer', props.borderTop && css$T.borderTop, props.cx), ...props.rawProps, style: {
             ...props.rawProps?.style,
         } }, props.children));
 }
@@ -2511,7 +2905,7 @@ const TREE_SHAKEABLE_INIT = () => ({
 });
 const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
 
-var css$$ = {"root":"M9rQgZ","icon-wrapper":"sLSjXx","iconWrapper":"sLSjXx","action-wrapper":"vPJP5l","actionWrapper":"vPJP5l","close-icon":"SA8eK2","closeIcon":"SA8eK2","main-path":"RzJQIZ","mainPath":"RzJQIZ","content":"aOrLxG","close-wrapper":"WC2-VJ","closeWrapper":"WC2-VJ","clear-notifications":"ObL8EM","clearNotifications":"ObL8EM"};
+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__default.forwardRef((props, ref) => {
     const notificationCardNode = React__default.useRef(null);
@@ -2524,15 +2918,15 @@ const NotificationCard = /* @__PURE__ */React__default.forwardRef((props, ref) =
             notificationCardNode.current?.removeEventListener('mouseleave', props.refreshTimer);
         };
     }, []);
-    return (React__default.createElement("div", { role: "alert", className: cx('uui-notification_card', props.color && `uui-color-${props.color}`, css$$.root, props.cx), ref: notificationCardNode, ...props.rawProps },
-        React__default.createElement("div", { className: css$$.mainPath },
-            props.icon && (React__default.createElement("div", { className: css$$.iconWrapper },
+    return (React__default.createElement("div", { role: "alert", className: cx('uui-notification_card', props.color && `uui-color-${props.color}`, css$S.root, props.cx), ref: notificationCardNode, ...props.rawProps },
+        React__default.createElement("div", { className: css$S.mainPath },
+            props.icon && (React__default.createElement("div", { className: css$S.iconWrapper },
                 React__default.createElement(IconContainer, { size: settings.notificationCard.sizes.icon, icon: props.icon }))),
-            React__default.createElement("div", { className: css$$.content },
+            React__default.createElement("div", { className: css$S.content },
                 props.children,
-                props.actions && (React__default.createElement("div", { className: css$$.actionWrapper }, props.actions.map((action) => (React__default.createElement(LinkButton, { key: action.name, caption: action.name, onClick: action.action, cx: css$$.actionLink, size: settings.notificationCard.sizes.action, rawProps: action.rawProps })))))),
-            props.onClose && (React__default.createElement("div", { className: cx(css$$.closeWrapper, 'uui-notification_card-close_icon') },
-                React__default.createElement(IconButton, { icon: settings.notificationCard.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$$.closeIcon }))))));
+                props.actions && (React__default.createElement("div", { className: css$S.actionWrapper }, props.actions.map((action) => (React__default.createElement(LinkButton, { key: action.name, caption: action.name, onClick: action.action, cx: css$S.actionLink, size: settings.notificationCard.sizes.action, rawProps: action.rawProps })))))),
+            props.onClose && (React__default.createElement("div", { className: cx(css$S.closeWrapper, 'uui-notification_card-close_icon') },
+                React__default.createElement(IconButton, { icon: settings.notificationCard.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$S.closeIcon }))))));
 });
 const WarningNotification = /* @__PURE__ */React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, { icon: settings.notificationCard.icons.warningIcon, color: "warning", ...props, ref: ref, cx: props.cx })));
 const SuccessNotification = /* @__PURE__ */React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, { icon: settings.notificationCard.icons.successIcon, color: "success", ...props, ref: ref, cx: props.cx })));
@@ -2540,11 +2934,11 @@ const HintNotification = /* @__PURE__ */React__default.forwardRef((props, ref) =
 const ErrorNotification = /* @__PURE__ */React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, { icon: settings.notificationCard.icons.errorIcon, color: "error", ...props, ref: ref, cx: props.cx })));
 function ClearNotification() {
     const uuiCtx = useUuiContext();
-    return (React__default.createElement("div", { className: cx(css$$.clearNotifications, 'uui-clear-notifications') },
+    return (React__default.createElement("div", { className: cx(css$S.clearNotifications, 'uui-clear-notifications') },
         React__default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
 }
 
-var css$_ = {"footer":"owWNoP"};
+var css$R = {"footer":"lZut3N"};
 
 class ConfirmationModal extends React.Component {
     render() {
@@ -2556,7 +2950,7 @@ class ConfirmationModal extends React.Component {
             React.createElement(ModalWindow, { width: 420 },
                 React.createElement(ModalHeader, { borderBottom: true, title: this.props.caption, onClose: () => this.props.abort() }),
                 React.createElement(ScrollBars, null, bodyContent),
-                React.createElement(ModalFooter, { cx: css$_.footer },
+                React.createElement(ModalFooter, { cx: css$R.footer },
                     this.props.hideCancelButton || (React.createElement(Button, { caption: i18n.form.modals.discardButton, onClick: () => this.props.success(false), fill: "outline", color: "secondary" })),
                     React.createElement(Button, { caption: i18n.form.modals.saveButton, onClick: () => this.props.success(true), color: "primary" })))));
     }
@@ -2586,7 +2980,7 @@ function useReliableForceUpdate() {
     return red[1];
 }
 
-var css$Z = {"root":"cK220Q","container":"FtVAtQ"};
+var css$Q = {"root":"jmhVru","container":"tWIJrl"};
 
 const defaultFormat = 'MMM D, YYYY';
 const valueFormat = 'YYYY-MM-DD';
@@ -2797,21 +3191,21 @@ function DatePickerHeader({ navIconLeft, navIconRight, value: { month, view }, o
     }, [view, month]);
     const disablePrev = view === 'YEAR_SELECTION' && !isYearWithinSoberRange(getPrevYearsList(month));
     const disableNext = view === 'YEAR_SELECTION' && !isYearWithinSoberRange(getNextYearsList(month));
-    return (React.createElement("div", { className: cx(css$Z.root, uuiHeader.container, cx) },
+    return (React.createElement("div", { className: cx(css$Q.root, uuiHeader.container, cx) },
         React.createElement("header", { className: uuiHeader.headerNav },
             React.createElement(Button, { icon: navIconLeft || settings.datePicker.icons.body.prevIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconLeft, onClick: !isDisabled && (() => onLeftNavigationArrow()), isDisabled: disablePrev }),
             React.createElement(Button, { caption: title, fill: "ghost", cx: uuiHeader.navTitle, onClick: !isDisabled && (() => onCaptionClick(view)) }),
             React.createElement(Button, { icon: navIconRight || settings.datePicker.icons.body.nextIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
 }
 
-var css$Y = {"root":"_9ofnOx"};
+var css$P = {"root":"_0q9Ttf"};
 
 function applyDateSelectionMods() {
-    return [css$Y.root, `uui-size-${settings.datePicker.sizes.body}`];
+    return [css$P.root, `uui-size-${settings.datePicker.sizes.body}`];
 }
 const Calendar = /* @__PURE__ */withMods(Calendar$1, applyDateSelectionMods);
 
-var css$X = {"root":"_0Og3CF"};
+var css$O = {"root":"-PXc4J"};
 
 const uuiDatePickerBody = {
     wrapper: 'uui-datepicker-body-wrapper',
@@ -2855,7 +3249,7 @@ function StatelessDatePickerBodyComp({ renderDay, isHoliday, cx: classes, filter
         }
     };
     return (React__default.createElement("div", { ref: ref, className: cx$1(uuiDatePickerBodyBase.container, `uui-size-${settings.datePicker.sizes.body}`, classes), ...rawProps },
-        React__default.createElement("div", { className: cx$1(css$X.root, uuiDatePickerBody.wrapper) },
+        React__default.createElement("div", { className: cx$1(css$O.root, uuiDatePickerBody.wrapper) },
             React__default.createElement(DatePickerHeader, { value: {
                     view,
                     month,
@@ -2932,7 +3326,7 @@ function DatePickerComponent(props, ref) {
 }
 const DatePicker = /* @__PURE__ */React__default.forwardRef(DatePickerComponent);
 
-var css$W = {"date-input":"o-pew4","dateInput":"o-pew4","root":"lcdJKP","separator":"_9Ed4Wa"};
+var css$N = {"date-input":"_4SswK5","dateInput":"_4SswK5","root":"M8dEUC","separator":"tXEJ4C"};
 
 const RangeDatePickerInput = /* @__PURE__ */forwardRef(({ isDisabled, isInvalid, isReadonly, size, disableClear, rawProps, value, inFocus, format, onValueChange, onFocusInput, onBlurInput, onClick, getPlaceholder, filter, onKeyDown, preventEmptyFromDate, preventEmptyToDate, id, cx: classes, }, ref) => {
     const [inputValue, setInputValue] = useState(toCustomDateRangeFormat(value, format));
@@ -2997,13 +3391,13 @@ const RangeDatePickerInput = /* @__PURE__ */forwardRef(({ isDisabled, isInvalid,
     const clearAllowed = !disableClear && !(preventEmptyFromDate && preventEmptyToDate) && inputValue.from && inputValue.to;
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    React__default.createElement("div", { ref: ref, className: cx$1(`uui-size-${size || settings.rangeDatePicker.sizes.default}`, 'uui-range-date-picker', classes, css$W.root, isDisabled && uuiMod.disabled, isReadonly && uuiMod.readonly, isInvalid && uuiMod.invalid, inFocus && uuiMod.focus), onKeyDown: onKeyDown },
-        React__default.createElement(TextInput, { icon: settings.rangeDatePicker.icons.input.calendarIcon, cx: cx$1(css$W.dateInput, inFocus === 'from' && uuiMod.focus), size: size || settings.rangeDatePicker.sizes.default, placeholder: getPlaceholder ? getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: inputValue.from || undefined, onValueChange: (v) => onInputChange(v || '', 'from'), onFocus: (event) => handleFocus(event, 'from'), onBlur: (event) => handleBlur(event, 'from'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.from, onClick: onClick, onKeyDown: onInputKeyDown, id: id }),
-        React__default.createElement("div", { className: css$W.separator }),
-        React__default.createElement(TextInput, { cx: cx$1(css$W.dateInput, inFocus === 'to' && uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.rangeDatePicker.sizes.default, value: inputValue.to || undefined, onCancel: clearAllowed ? onClear : undefined, onValueChange: (v) => onInputChange(v || '', 'to'), onFocus: (e) => handleFocus(e, 'to'), onBlur: (e) => handleBlur(e, 'to'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.to, onClick: onClick, onKeyDown: onInputKeyDown })));
+    React__default.createElement("div", { ref: ref, className: cx$1(`uui-size-${size || settings.rangeDatePicker.sizes.default}`, 'uui-range-date-picker', classes, css$N.root, isDisabled && uuiMod.disabled, isReadonly && uuiMod.readonly, isInvalid && uuiMod.invalid, inFocus && uuiMod.focus), onKeyDown: onKeyDown },
+        React__default.createElement(TextInput, { icon: settings.rangeDatePicker.icons.input.calendarIcon, cx: cx$1(css$N.dateInput, inFocus === 'from' && uuiMod.focus), size: size || settings.rangeDatePicker.sizes.default, placeholder: getPlaceholder ? getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: inputValue.from || undefined, onValueChange: (v) => onInputChange(v || '', 'from'), onFocus: (event) => handleFocus(event, 'from'), onBlur: (event) => handleBlur(event, 'from'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.from, onClick: onClick, onKeyDown: onInputKeyDown, id: id }),
+        React__default.createElement("div", { className: css$N.separator }),
+        React__default.createElement(TextInput, { cx: cx$1(css$N.dateInput, inFocus === 'to' && uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.rangeDatePicker.sizes.default, value: inputValue.to || undefined, onCancel: clearAllowed ? onClear : undefined, onValueChange: (v) => onInputChange(v || '', 'to'), onFocus: (e) => handleFocus(e, 'to'), onBlur: (e) => handleBlur(e, 'to'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.to, onClick: onClick, onKeyDown: onInputKeyDown })));
 });
 
-var css$V = {"root":"pZCxLI"};
+var css$M = {"root":"ctWOZN"};
 
 const uuiPresets = {
     container: 'uui-presets-container',
@@ -3018,12 +3412,12 @@ const getPresets = (presets) => {
     })).sort((a, b) => a.order - b.order);
 };
 function CalendarPresets(props) {
-    return (React.createElement("div", { ref: props.forwardedRef, className: cx$1(uuiPresets.container, css$V.root, props.cx), ...props.rawProps },
+    return (React.createElement("div", { ref: props.forwardedRef, className: cx$1(uuiPresets.container, css$M.root, props.cx), ...props.rawProps },
         React.createElement("div", { className: uuiPresets.header }, "Presets"),
         getPresets(props.presets).map((item) => (React.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: settings.rangeDatePicker.sizes.preset })))));
 }
 
-var css$U = {"root":"A6KVww","container":"O-aOPr","day-selection":"f-gnnt","daySelection":"f-gnnt","from-picker":"Mpiilf","fromPicker":"Mpiilf","to-picker":"caEgSS","toPicker":"caEgSS","bodes-wrapper":"qRoeln","bodesWrapper":"qRoeln","blocker":"ytoP08"};
+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',
@@ -3036,7 +3430,7 @@ const rangeDatePickerPresets = {
         name: 'Today',
         getRange: () => ({
             from: uuiDayjs.dayjs().toString(),
-            to: undefined,
+            to: uuiDayjs.dayjs().toString(),
             order: 1,
         }),
     },
@@ -3077,7 +3471,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: {
@@ -3162,8 +3556,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 })));
@@ -3176,18 +3570,18 @@ function RangeDatePickerBodyComp(props, ref) {
             setMonth(monthToSet);
         }
     }, [selectedDate]);
-    return (React__default.createElement("div", { ref: ref, className: cx(css$U.root, uuiDatePickerBodyBase.container, props.cx), ...props.rawProps, "aria-multiselectable": "true" },
-        React__default.createElement(FlexRow, { cx: [view === 'DAY_SELECTION' && css$U.daySelection, css$U.container], alignItems: "top" },
+    return (React__default.createElement("div", { ref: ref, className: cx(css$L.root, uuiDatePickerBodyBase.container, props.cx), ...props.rawProps, "aria-multiselectable": "true" },
+        React__default.createElement(FlexRow, { cx: [view === 'DAY_SELECTION' && css$L.daySelection, css$L.container], alignItems: "top" },
             React__default.createElement(FlexCell, { width: "auto" },
                 React__default.createElement(FlexRow, null,
-                    React__default.createElement(FlexRow, { cx: css$U.bodesWrapper, alignItems: "top" },
-                        React__default.createElement(StatelessDatePickerBody, { key: "date-picker-body-left", cx: cx(css$U.fromPicker), ...from, onValueChange: (v) => onBodyValueChange(v), onMonthChange: (m) => {
+                    React__default.createElement(FlexRow, { cx: css$L.bodesWrapper, alignItems: "top" },
+                        React__default.createElement(StatelessDatePickerBody, { key: "date-picker-body-left", cx: cx(css$L.fromPicker), ...from, onValueChange: (v) => onBodyValueChange(v), onMonthChange: (m) => {
                                 setMonth(m);
                             }, onViewChange: (v) => {
                                 setView(v);
                                 setDisabledPanel(v !== 'DAY_SELECTION' ? 'right' : null);
                             }, filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay || renderDay, isDisabled: disabledPanel === 'left' }),
-                        React__default.createElement(StatelessDatePickerBody, { key: "date-picker-body-right", cx: cx(css$U.toPicker), ...to, onValueChange: (v) => onBodyValueChange(v), onMonthChange: (m) => {
+                        React__default.createElement(StatelessDatePickerBody, { key: "date-picker-body-right", cx: cx(css$L.toPicker), ...to, onValueChange: (v) => onBodyValueChange(v), onMonthChange: (m) => {
                                 setMonth(m.subtract(1, 'month'));
                             }, onViewChange: (v) => {
                                 setView(v);
@@ -3196,7 +3590,7 @@ function RangeDatePickerBodyComp(props, ref) {
                         view !== 'DAY_SELECTION' && (React__default.createElement("div", { style: {
                                 left: disabledPanel === 'right' ? '50%' : undefined,
                                 right: disabledPanel === 'left' ? '50%' : undefined,
-                            }, className: css$U.blocker }))),
+                            }, className: css$L.blocker }))),
                     props.presets && renderPresets(props.presets)),
                 props.renderFooter && props.renderFooter()))));
 }
@@ -3225,7 +3619,7 @@ const getDayState = (day, selectedDate) => {
     };
 };
 
-var css$T = {"dropdown-container":"abs1hj","dropdownContainer":"abs1hj"};
+var css$K = {"dropdown-container":"mRcXPu","dropdownContainer":"mRcXPu"};
 
 function RangeDatePickerComponent(props, ref) {
     const { value: _value, format = defaultFormat, size = settings.rangeDatePicker.sizes.default } = props;
@@ -3269,7 +3663,7 @@ function RangeDatePickerComponent(props, ref) {
         }
     };
     const renderBody = (renderProps) => {
-        return (React__default.createElement(DropdownContainer, { ...renderProps, cx: cx(css$T.dropdownContainer), shards: [targetRef], returnFocus: true },
+        return (React__default.createElement(DropdownContainer, { ...renderProps, cx: cx(css$K.dropdownContainer), shards: [targetRef], returnFocus: true },
             React__default.createElement(FlexRow, null,
                 React__default.createElement(RangeDatePickerBody, { cx: cx(props.bodyCx), value: {
                         selectedDate: _value,
@@ -3293,175 +3687,24 @@ function RangeDatePickerComponent(props, ref) {
 }
 const RangeDatePicker = /* @__PURE__ */React__default.forwardRef(RangeDatePickerComponent);
 
-var css$S = {"root":"on-o3g","blocker":"_0uP85S","marker":"KpXnaA","top":"YKi624","bottom":"jHhns7","left":"rdrKB3","right":"_35BaWK","inside":"TAg3rT"};
+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
         ? (React.createElement(React.Fragment, null,
-            props.enableBlocker && React.createElement("div", { className: css$S.blocker }),
+            props.enableBlocker && React.createElement("div", { className: css$J.blocker }),
             React.createElement("div", { className: cx([
-                    css$S.root,
-                    css$S.marker,
-                    css$S[props.position],
+                    css$J.root,
+                    css$J.marker,
+                    css$J[props.position],
                     props?.cx,
                 ]) })))
         : null;
 }
 
-const RichTextView = /* @__PURE__ */withMods(uuiComponents.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || settings.richTextView.sizes.default}`]);
-
-var css$R = {"search-wrapper":"cV-MZn","searchWrapper":"cV-MZn","no-data":"Y5kqHg","noData":"Y5kqHg"};
-
-var css$Q = {"picker-row":"_1xhV55","pickerRow":"_1xhV55","align-widgets-top":"p5XSxH","alignWidgetsTop":"p5XSxH","row-content":"dlHw-8","rowContent":"dlHw-8","align-widgets-center":"OyAt2X","alignWidgetsCenter":"OyAt2X","icon-container":"_08h-iq","iconContainer":"_08h-iq","content-wrapper":"fVienB","contentWrapper":"fVienB","icon-wrapper":"_94m5Ka","iconWrapper":"_94m5Ka","icon-default":"VfnBoS","iconDefault":"VfnBoS","selected-mark":"jDp6J-","selectedMark":"jDp6J-"};
-
-var css$P = {"root":"_86NRQl"};
+var css$I = {"search-wrapper":"LI6Ne8","searchWrapper":"LI6Ne8","no-data":"GZfFGS","noData":"GZfFGS"};
 
-const AvatarStack = /* @__PURE__ */withMods(AvatarStack$1, () => [css$P.root]);
-
-var css$O = {"root":"_4qT-dg"};
-
-const DEFAULT_FILL = 'solid';
-function applyBadgeMods(mods) {
-    return [
-        'uui-badge',
-        css$O.root,
-        `uui-size-${mods.size || settings.badge.sizes.default}`,
-        `uui-fill-${mods.fill || DEFAULT_FILL}`,
-        `uui-color-${mods.color || 'info'}`,
-    ];
-}
-const Badge = /* @__PURE__ */React__default.forwardRef((props, ref) => {
-    const styles = [applyBadgeMods(props), props.cx];
-    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.badge.icons.dropdownIcon;
-    return (React__default.createElement(Clickable, { ...props, rawProps: {
-            'aria-haspopup': props.isDropdown,
-            'aria-expanded': props.isOpen,
-            ...props.rawProps,
-        }, cx: styles, ref: ref },
-        (props.indicator && props.fill === 'outline') && (React__default.createElement("div", { className: "uui-indicator" })),
-        props.icon && props.iconPosition !== 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
-        props.caption && (React__default.createElement("div", { className: uuiElement.caption }, props.caption)),
-        props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { key: "count-indicator", color: null, size: settings.badge.sizes.countIndicatorMap[props.size || settings.badge.sizes.default], caption: props.count })),
-        props.icon && props.iconPosition === 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
-        props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
-});
-
-var css$N = {"root":"LNHyR-"};
-
-function applyTagMods(props) {
-    return [
-        css$N.root,
-        `uui-size-${props.size || settings.tag.sizes.default}`,
-        `uui-color-${props.color || 'neutral'}`,
-        `uui-fill-${props.fill || 'solid'}`,
-        'uui-tag',
-    ];
-}
-const Tag = /* @__PURE__ */React__default.forwardRef((props, ref) => {
-    const styles = [applyTagMods(props), props.cx];
-    const ClearIcon = props.clearIcon ? props.clearIcon : settings.tag.icons.clearIcon;
-    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.tag.icons.dropdownIcon;
-    return (React__default.createElement(Clickable, { ...props, rawProps: {
-            'aria-haspopup': props.isDropdown,
-            'aria-expanded': props.isOpen,
-            ...props.rawProps,
-        }, cx: styles, ref: ref },
-        props.icon && props.iconPosition !== 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
-        props.caption && (React__default.createElement("div", { className: uuiElement.caption }, props.caption)),
-        props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { color: (!props.color || props.color === 'neutral') ? 'white' : props.color, size: settings.tag.sizes.countIndicatorMap[(props.size || settings.tag.sizes.default)], caption: props.count })),
-        props.icon && props.iconPosition === 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
-        props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen })),
-        props.onClear && !props.isDisabled && (React__default.createElement(IconContainer, { cx: uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
-});
-
-var css$M = {"root":"FKoLYk","page":"-Ra7SI","spacer":"Oi9A1x","mode-ghost":"TpZYzP","modeGhost":"TpZYzP"};
-
-function Paginator(props) {
-    const renderPaginator = (params) => (React__default.createElement("nav", { role: "navigation", className: cx(css$M.root, 'uui-paginator', `uui-size-${props.size || settings.paginator.sizes.default}`), ...params.rawProps },
-        React__default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.leftArrowIcon, onClick: params.goToPrev, isDisabled: params.isFirst || props.isDisabled, fill: "outline", color: "secondary" }),
-        params.pages.map((page, index) => {
-            if (page.type === 'spacer') {
-                return (React__default.createElement(Button, { cx: cx(css$M.spacer, css$M.page), size: props.size || settings.paginator.sizes.default, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1, isDisabled: props.isDisabled }));
-            }
-            else {
-                return (React__default.createElement(Button, { cx: cx(css$M[`mode-${!page.isActive && 'ghost'}`], css$M.page), size: props.size || settings.paginator.sizes.default, key: page.pageNumber, caption: page.pageNumber, onClick: () => page.onClick?.(), rawProps: { 'aria-current': page.isActive }, fill: (page.isActive && 'outline') || 'ghost', color: "primary", isDisabled: props.isDisabled }));
-            }
-        }),
-        React__default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.rightArrowIcon, onClick: params.goToNext, isDisabled: params.isLast || props.isDisabled, fill: "outline", color: "secondary" })));
-    return React__default.createElement(Paginator$1, { ...props, render: renderPaginator });
-}
-
-var css$L = {"root":"O49G0H","progress-bar":"oX3pvS","progressBar":"oX3pvS","progressBar-indeterminate":"QKuEjD","progressBarIndeterminate":"QKuEjD","size-12":"S-U8PS","size12":"S-U8PS","size-18":"QqQq--","size18":"QqQq--","size-24":"QZ9aGj","size24":"QZ9aGj"};
-
-const IndeterminateBar = /* @__PURE__ */React.forwardRef((props, ref) => {
-    return (React.createElement("div", { ref: ref, className: cx('uui-indeterminate_bar', props.cx, css$L.root, css$L[`size-${props.size || 12}`]) },
-        React.createElement("div", { className: cx(css$L.progressBar) })));
-});
-
-var css$K = {"root":"REaQX3","striped":"W0h6gP","animate-stripes":"_5I3FMZ","animateStripes":"_5I3FMZ","size-12":"qEKAxJ","size12":"qEKAxJ","size-18":"n5uxU0","size18":"n5uxU0","size-24":"rHeOEd","size24":"rHeOEd"};
-
-const DEFAULT_SIZE = '12';
-function applyProgressBarMods(mods) {
-    const size = mods.size || DEFAULT_SIZE;
-    return [
-        css$K.root,
-        css$K[`size-${size}`],
-        mods.striped && css$K.striped,
-    ];
-}
-const ProgressBar = /* @__PURE__ */withMods(uuiComponents.ProgressBar, applyProgressBarMods, (props) => ({
-    hideLabel: props.hideLabel || props.striped,
-}));
-
-var css$J = {"root":"_0sp5PJ"};
-
-const IndicatorBar = /* @__PURE__ */React.forwardRef((props, ref) => {
-    const { progress } = props;
-    return progress || progress === 0 ? (React.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx(css$J.root, props.cx), hideLabel: true })) : (React.createElement(IndeterminateBar, { ref: ref, cx: cx(css$J.root, props.cx) }));
-});
-
-var css$I = {"root":"_9sFjB5"};
-
-const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
-    return (React__default.createElement("div", { ref: ref, className: cx([
-            css$I.root,
-            `uui-size-${props.size || settings.statusIndicator.sizes.default}`,
-            'uui-status_indicator',
-            `uui-color-${props.color || 'neutral'}`,
-            `uui-fill-${props.fill || 'solid'}`,
-            props.cx,
-        ]) },
-        React__default.createElement("div", { className: "uui-status_indicator-dot" }),
-        React__default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
-});
-
-var css$H = {"drag-handle-wrapper":"m60Juc","dragHandleWrapper":"m60Juc","with-indent":"INTgRy","withIndent":"INTgRy","drag-handle":"waOWlA","dragHandle":"waOWlA","icon-container":"J0-rxs","iconContainer":"J0-rxs"};
-
-function DataRowAddons(props) {
-    const row = props.rowProps;
-    const getIndent = () => {
-        return (row.indent - 1) * settings.dataTable.sizes.body.indentUnitMap[props.size || settings.dataTable.sizes.body.row];
-    };
-    const getWidth = () => {
-        return settings.dataTable.sizes.body.indentWidthMap[props.size || settings.dataTable.sizes.body.row];
-    };
-    const renderDragHandle = () => {
-        if (props.renderDragHandle) {
-            return props.renderDragHandle({ rowProps: props.rowProps, eventHandlers: props.eventHandlers });
-        }
-        return (React__default.createElement("div", { key: "dh", className: cx(css$H.dragHandleWrapper, row.indent > 0 && css$H.withIndent), style: { width: row.indent > 0 ? (getIndent() + getWidth()) : 0 }, ...props.eventHandlers },
-            React__default.createElement(DragHandle, { cx: css$H.dragHandle })));
-    };
-    return (React__default.createElement(React__default.Fragment, null,
-        row.dnd?.srcData && renderDragHandle(),
-        row?.checkbox?.isVisible && (React__default.createElement(Checkbox, { key: "cb", cx: "uui-dr_addons-checkbox", tabIndex: props.tabIndex, size: settings.dataTable.sizes.body.checkboxMap[props.size], value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => row.onCheck?.(row), isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
-        row.indent > 0 && (React__default.createElement("div", { key: "fold", className: cx('uui-dr_addons-indent', `uui-size-${props.size || settings.dataTable.sizes.body.row}`), style: { marginInlineStart: getIndent(), width: getWidth() } }, row.isFoldable && (React__default.createElement(IconContainer, { rawProps: {
-                'aria-label': row.isFolded ? 'Unfold' : 'Fold',
-                role: 'button',
-            }, key: "icon", icon: settings.dataTable.icons.body.foldingIcon, cx: [
-                uuiElement.foldingArrow, uuiMarkers.clickable, css$H.iconContainer,
-            ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), size: settings.dataTable.sizes.body.iconMap[props.size || settings.dataTable.sizes.body.row] }))))));
-}
+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 = [];
@@ -3528,7 +3771,7 @@ const getHighlightedSearchMatches = (str, search) => {
     return getDecoratedText(str, ranges);
 };
 
-var css$G = {"root":"JqGWN3","column-gap":"R-StN2","columnGap":"R-StN2","title":"uTzkPi","subtitle":"TjvwZW","disabled":"_5knY-v","multiline":"hENnBV"};
+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;
@@ -3536,14 +3779,13 @@ function PickerItem(props) {
     const isMultiline = !!(props.title && props.subtitle);
     const { search } = props.dataSourceState ?? {};
     const title = highlightSearchMatches ? getHighlightedSearchMatches(props.title, search) : props.title;
-    const subtitle = highlightSearchMatches ? getHighlightedSearchMatches(props.subtitle, search) : props.subtitle;
     return (React.createElement(FlexCell, { width: "auto", cx: [css$G.root, 'uui-picker_input-item', 'uui-typography', props.cx] },
         React.createElement(FlexRow, { size: itemSize, cx: [isMultiline && css$G.multiline, css$G.columnGap], rawProps: { style: { '--uui-picker_item-vertical-padding': `${settings.pickerInput.sizes.body.itemVerticalPaddingMap[itemSize]}px` } } },
             avatarUrl && (React.createElement(Avatar, { isLoading: isLoading, img: avatarUrl, size: getAvatarSize(itemSize, isMultiline) })),
             icon && React.createElement(IconContainer, { icon: icon }),
             React.createElement(FlexCell, { width: "auto" },
                 title && (React.createElement("div", { className: cx(css$G.title, isDisabled && css$G.disabled, `uui-size-${itemSize}`) }, title)),
-                subtitle && (React.createElement("div", { className: cx(css$G.subtitle, isDisabled && css$G.disabled, `uui-size-${itemSize}`) }, subtitle))))));
+                props.subtitle && (React.createElement("div", { className: cx(css$G.subtitle, isDisabled && css$G.disabled, `uui-size-${itemSize}`) }, props.subtitle))))));
 }
 function getAvatarSize(size, isMultiline) {
     return settings.pickerInput.sizes.body[isMultiline ? 'itemAvatarMultilineMap' : 'itemAvatarMap'][size];
@@ -3591,19 +3833,19 @@ function DataPickerRow(props) {
             content = (React.createElement(React.Fragment, null,
                 renderRowItem(props.value, props),
                 React.createElement(FlexSpacer, null),
-                (props.isChildrenSelected || props.isSelected) && (React.createElement("div", { className: cx$1(css$Q.iconWrapper, 'uui-picker_input-row-select_icon', uuiMod.selected) },
-                    React.createElement(IconContainer, { size: settings.pickerInput.sizes.body.selectIconMap[props.size], icon: SelectIcon, cx: props.isChildrenSelected ? css$Q.iconDefault : css$Q.selectedMark, rawProps: { 'aria-label': props.isChildrenSelected
+                (props.isChildrenSelected || props.isSelected) && (React.createElement("div", { className: cx$1(css$H.iconWrapper, 'uui-picker_input-row-select_icon', uuiMod.selected) },
+                    React.createElement(IconContainer, { size: settings.pickerInput.sizes.body.selectIconMap[props.size], icon: SelectIcon, cx: props.isChildrenSelected ? css$H.iconDefault : css$H.selectedMark, rawProps: { 'aria-label': props.isChildrenSelected
                                 ? 'Child is selected'
                                 : 'Selected' } })))));
         }
-        return (React.createElement(FlexCell, { grow: 1, width: 0, minWidth: 0, cx: css$Q.rowContent },
+        return (React.createElement(FlexCell, { grow: 1, width: 0, minWidth: 0, cx: css$H.rowContent },
             React.createElement(DataRowAddons, { size: props.size, rowProps: props, tabIndex: -1 }),
-            React.createElement("div", { className: css$Q.contentWrapper }, content)));
+            React.createElement("div", { className: css$H.contentWrapper }, content)));
     };
     const clickHandler = props.onClick || props.onSelect || props.onFold || props.onCheck;
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    React.createElement("div", { onClick: clickHandler && ((e) => !isEventTargetInsideClickable(e) && clickHandler(props)), role: "option", "aria-busy": props.isLoading, "aria-posinset": props.index + 1, "aria-checked": props.checkbox?.isVisible ? props.isChecked : null, "aria-selected": props.isSelectable ? props.isSelected : null, ref: rowNode, className: cx$1(css$Q.pickerRow, 'uui-picker_input-row', `uui-size-${props.size || settings.pickerInput.sizes.body.row}`, css$Q[`align-widgets-${props.alignActions || 'top'}`], clickHandler && props.isFocused && uuiMod.focus, clickHandler && uuiMarkers.clickable, props.cx), style: props.padding && {
+    React.createElement("div", { onClick: clickHandler && ((e) => !isEventTargetInsideClickable(e) && clickHandler(props)), role: "option", "aria-busy": props.isLoading, "aria-posinset": props.index + 1, "aria-checked": props.checkbox?.isVisible ? props.isChecked : null, "aria-selected": props.isSelectable ? props.isSelected : null, ref: rowNode, className: cx$1(css$H.pickerRow, 'uui-picker_input-row', `uui-size-${props.size || settings.pickerInput.sizes.body.row}`, css$H[`align-widgets-${props.alignActions || 'top'}`], clickHandler && props.isFocused && uuiMod.focus, clickHandler && uuiMarkers.clickable, props.cx), style: props.padding && {
             '--uui-data_picker-horizontal-padding': `${props.padding}px`,
         }, ...props.rawProps }, renderContent()));
 }
@@ -3631,7 +3873,7 @@ function DataPickerBody({ highlightSearchMatches = true, ...props }) {
             });
         }
         if (props.minCharsToSearch && search.length < props.minCharsToSearch) {
-            return (React__default.createElement(FlexCell$1, { cx: css$R.noData, grow: 1, textAlign: "center" },
+            return (React__default.createElement(FlexCell$1, { cx: css$I.noData, grow: 1, textAlign: "center" },
                 React__default.createElement(Text, { size: props.searchSize }, i18n.dataPickerBody.typeSearchToLoadMessage)));
         }
         if (props.rows.length === 0) {
@@ -3644,7 +3886,7 @@ function DataPickerBody({ highlightSearchMatches = true, ...props }) {
                     search: search,
                 });
             }
-            return (React__default.createElement(FlexCell$1, { cx: css$R.noData, grow: 1, textAlign: "center" },
+            return (React__default.createElement(FlexCell$1, { cx: css$I.noData, grow: 1, textAlign: "center" },
                 React__default.createElement(Text, { size: props.searchSize }, i18n.dataPickerBody.noRecordsMessage)));
         }
     };
@@ -3663,7 +3905,7 @@ function DataPickerBody({ highlightSearchMatches = true, ...props }) {
         : settings.pickerInput.sizes.body.getSearchSize({ pickerSize: props.searchSize });
     const renderedDataRows = useMemo(() => props.rows.map((row) => renderRow(row, props.value)), [props.rows, props.value]);
     return (React__default.createElement(React__default.Fragment, null,
-        showSearch && (React__default.createElement("div", { key: "search", className: cx$1(css$R.searchWrapper, 'uui-picker_input-body-search') },
+        showSearch && (React__default.createElement("div", { key: "search", className: cx$1(css$I.searchWrapper, 'uui-picker_input-body-search') },
             React__default.createElement(FlexCell$1, { grow: 1 },
                 React__default.createElement(MoveFocusInside, null,
                     React__default.createElement(SearchInput, { placeholder: i18n.dataPickerBody.searchPlaceholder, value: props.value.search, onValueChange: (newVal) => props.onValueChange({ ...props.value, search: newVal }), onKeyDown: searchKeyDown, size: searchSize, debounceDelay: props.searchDebounceDelay, rawProps: { dir: 'auto' } }))))),
@@ -3675,7 +3917,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) {
@@ -3702,7 +3944,7 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = /* @__PURE__ */React__default.memo(DataPickerFooterImpl);
 
-var css$F = {"header":"oEDT8C","title":"v59QdI","close":"BoBuZz"};
+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) : '';
@@ -3712,7 +3954,7 @@ const DataPickerMobileHeaderImpl = (props) => {
 };
 const DataPickerMobileHeader = /* @__PURE__ */React__default.memo(DataPickerMobileHeaderImpl);
 
-var css$E = {"done":"waKVFE","container":"hVKll1"};
+var css$E = {"done":"ozLT3k","container":"ghCR8W"};
 
 const PickerBodyMobileView = (props) => {
     const isMobileView = isMobile();
@@ -3724,7 +3966,7 @@ const PickerBodyMobileView = (props) => {
         isMobileView && (React__default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => props.onClose?.(), cx: css$E.done, size: settings.pickerInput.sizes.body.mobileFooterLinkButton }))));
 };
 
-var css$D = {"sub-header-wrapper":"PieDL8","subHeaderWrapper":"PieDL8","switch":"J4wJ8c","no-found-modal-container":"LyVu3k","noFoundModalContainer":"LyVu3k","no-found-modal-container-icon":"lx7d1l","noFoundModalContainerIcon":"lx7d1l","no-found-modal-container-text":"olFfKT","noFoundModalContainerText":"olFfKT","body":"YojBfI"};
+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, } = usePickerModal(props);
@@ -3770,7 +4012,7 @@ function PickerModal(props) {
             React__default.createElement(ModalFooter, null, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$C = {"tooltip":"dq0ZYS"};
+var css$C = {"tooltip":"MF9jqp"};
 
 const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     const tagProps = {
@@ -3789,7 +4031,7 @@ const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     }
 });
 
-var css$B = {"root":"CYvft5"};
+var css$B = {"root":"uRM0DJ"};
 
 const defaultMode = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
@@ -3871,7 +4113,7 @@ function PickerInputComponent(props, ref) {
 }
 const PickerInput = /* @__PURE__ */React__default.forwardRef(PickerInputComponent);
 
-var css$A = {"row":"Vy0vEb"};
+var css$A = {"row":"_2u3Ayo"};
 
 function PickerListRow(props) {
     let label;
@@ -3891,7 +4133,7 @@ function PickerListRow(props) {
     return (React__default.createElement("div", { role: "option", "aria-selected": props.isSelectable ? props.isSelected : undefined, "aria-busy": props.isLoading, "aria-posinset": props.index + 1, ...(props.checkbox?.isVisible && { 'aria-checked': props.isChecked }), className: css$A.row }, component));
 }
 
-var css$z = {"root":"PGZFGA"};
+var css$z = {"root":"oktYdH"};
 
 function PickerList(props) {
     const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, getModalTogglerCaption, } = usePickerList(props);
@@ -3926,7 +4168,7 @@ function PickerList(props) {
             }, selectedRows)));
 }
 
-var css$y = {"root":"f42u0w","wrapper":"RCY3ow","align-widgets-top":"GATkWR","alignWidgetsTop":"GATkWR","align-widgets-center":"KZzjoA","alignWidgetsCenter":"KZzjoA"};
+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 };
@@ -3976,7 +4218,7 @@ function DataTableCell(initialProps) {
     return React.createElement(DataTableCell$1, { ...props });
 }
 
-var css$x = {"root":"ujAZz6"};
+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.
@@ -3992,7 +4234,7 @@ const DataTableRow = /* @__PURE__ */withMods(DataTableRow$1, ({ borderBottom = t
     ];
 }, () => propsMods);
 
-var css$w = {"sorting-panel-container":"OMTweC","sortingPanelContainer":"OMTweC"};
+var css$w = {"sorting-panel-container":"Wk4TKo","sortingPanelContainer":"Wk4TKo"};
 
 const SortingPanelImpl = ({ sortDirection, onSort }) => {
     const sortAsc = useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
@@ -4012,7 +4254,7 @@ const ColumnHeaderDropdownImpl = (props) => {
 };
 const ColumnHeaderDropdown = /* @__PURE__ */React__default.memo(ColumnHeaderDropdownImpl);
 
-var css$v = {"root":"l2NB6i","caption-wrapper":"XXWlCJ","captionWrapper":"XXWlCJ","sort-icon":"quLMvO","sortIcon":"quLMvO","dropdown-icon":"l-8IVJ","dropdownIcon":"l-8IVJ","infoIcon":"-AWRcg","align-right":"zZf-to","alignRight":"zZf-to","align-center":"hpIA5e","alignCenter":"hpIA5e","caption":"_-4G-TA","truncate":"AJaSY-","upper-case":"UeI7jU","upperCase":"UeI7jU","checkbox":"LIWlXZ","icon":"wnoXPz","fold-all-icon":"XFn5Jk","foldAllIcon":"XFn5Jk","cell-tooltip":"JEq0DA","cellTooltip":"JEq0DA","resizing-marker":"v-DUDd","resizingMarker":"v-DUDd","pinned-right":"LXSl9T","pinnedRight":"LXSl9T","draggable":"BoHO3D","ghost":"_3FNaub","is-dragged-out":"YKj-hN","isDraggedOut":"YKj-hN","dnd-marker-left":"GQDpx-","dndMarkerLeft":"GQDpx-","dnd-marker-right":"MvoW9y","dndMarkerRight":"MvoW9y","cell-tooltip-wrapper":"Qy77eH","cellTooltipWrapper":"Qy77eH","cell-tooltip-text":"vb9byC","cellTooltipText":"vb9byC","tooltip-caption":"_9Qn9I1","tooltipCaption":"_9Qn9I1","tooltip-info":"LY7oG8","tooltipInfo":"LY7oG8"};
+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.Component {
     constructor() {
@@ -4106,7 +4348,7 @@ class DataTableHeaderCell extends React.Component {
     }
 }
 
-var css$u = {"root":"FGivmS","caption-wrapper":"dXvmNi","captionWrapper":"dXvmNi","align-center":"dNpR45","alignCenter":"dNpR45","caption":"KBNKiQ","truncate":"_3GvGEA","upper-case":"OlODep","upperCase":"OlODep","group-cell-tooltip":"xkHg2l","groupCellTooltip":"xkHg2l","group-cell-tooltip-wrapper":"Pl8RC2","groupCellTooltipWrapper":"Pl8RC2","group-cell-tooltip-text":"EOogj3","groupCellTooltipText":"EOogj3","tooltip-caption":"kCO1bE","tooltipCaption":"kCO1bE","tooltip-info":"CBtnqx","tooltipInfo":"CBtnqx"};
+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.Component {
     constructor() {
@@ -4146,7 +4388,7 @@ class DataTableHeaderGroupCell extends React.Component {
     }
 }
 
-var css$t = {"root":"WSZi-A"};
+var css$t = {"root":"bELrvr"};
 
 const DataTableHeaderRow = /* @__PURE__ */withMods(DataTableHeaderRow$1, () => [css$t.root, 'uui-dt-vars'], (mods) => ({
     renderCell: (props) => (React.createElement(DataTableHeaderCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.column.key, columnsGap: mods.columnsGap })),
@@ -4242,7 +4484,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":"Wy20Yk","header":"ClBJQT","title":"i-QGBP","removeButton":"fj0Ums","with-search":"CY0mgV","withSearch":"CY0mgV"};
+var css$s = {"body":"YjsM2k","header":"ZBEDAy","title":"LinM-7","removeButton":"S7llfQ","with-search":"_5DFEet","withSearch":"_5DFEet"};
 
 function FilterColumnBody(props) {
     const [predicate, setPredicate] = useState(getDefaultPredicate(props.predicates, props.value));
@@ -4303,7 +4545,7 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var css$r = {"unpin-icon":"_5Kvn0A","unpinIcon":"_5Kvn0A","pin-toggler-icon":"FMU5qi","pinTogglerIcon":"FMU5qi"};
+var css$r = {"unpin-icon":"YQzsHo","unpinIcon":"YQzsHo","pin-toggler-icon":"AH6-nx","pinTogglerIcon":"AH6-nx"};
 
 function PinIconButton(props) {
     const i18nLocal = i18n.tables.columnsConfigurationModal;
@@ -4316,14 +4558,23 @@ function PinIconButton(props) {
         const iconTooltip = isPinnedAlways ? i18nLocal.lockedColumnPinButton : i18nLocal.unPinColumnButton;
         const unpinClickHandler = isPinnedAlways ? undefined : () => onTogglePin(undefined);
         pinUnpinNode = (React.createElement(Tooltip, { content: iconTooltip, placement: "bottom", color: "inverted" },
-            React.createElement(IconButton, { cx: cx$1(!isPinnedAlways && css$r.unpinIcon, css$r.pinTogglerIcon), icon: unpinIcon, onClick: unpinClickHandler, isDisabled: isPinnedAlways, color: "primary" })));
+            React.createElement(IconButton, { cx: cx$1(!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.createElement(React.Fragment, null,
             React.createElement(Tooltip, { content: i18nLocal.pinColumnToTheLeftButton, placement: "bottom", color: "inverted" },
-                React.createElement(IconButton, { cx: css$r.pinTogglerIcon, icon: settings.dataTable.icons.columnsConfigurationModal.pinLeftIcon, onClick: () => onTogglePin('left'), isDisabled: isPinnedAlways })),
+                React.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.createElement(Tooltip, { content: i18nLocal.pinColumnToTheRightButton, placement: "bottom", color: "inverted" },
-                React.createElement(IconButton, { cx: css$r.pinTogglerIcon, icon: settings.dataTable.icons.columnsConfigurationModal.pinRightIcon, onClick: () => onTogglePin('right'), isDisabled: isPinnedAlways }))));
+                React.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;
 }
@@ -4345,22 +4596,33 @@ function getUnpinIcon(params) {
     }
 }
 
-var css$q = {"row-wrapper":"_5NUQky","rowWrapper":"_5NUQky","pin-icon-button":"ILixCV","pinIconButton":"ILixCV","not-pinned":"MimAcI","notPinned":"MimAcI","checkbox":"KkDtc4","drag-handle":"pQaryi","dragHandle":"pQaryi","dnd-disabled":"_5EFtiE","dndDisabled":"_5EFtiE"};
+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.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 = cx$1(css$q.rowWrapper, !isPinned && css$q.notPinned, dndActorParams.isDragGhost && uuiDndState.dragGhost, 'uui-dt-columns-config-row');
         const { onTouchStart, onPointerDown, ...restEventHandlers } = dndActorParams.eventHandlers;
         const { ref, ...dndActorPropsWithoutRef } = dndActorParams;
         return (React.createElement(FlexRow, { size: settings.dataTable.sizes.columnsConfigurationModal.columnRow, cx: wrapperClasses, ref: dndActorParams.ref, rawProps: { ...restEventHandlers }, alignItems: "top" },
             React.createElement(DragHandle, { dragHandleIcon: settings.dataTable.icons.columnsConfigurationModal.dragIndicator, rawProps: { onTouchStart, onPointerDown }, isDisabled: !isDndAllowed, cx: cx$1(css$q.dragHandle, !isDndAllowed && css$q.dndDisabled) }),
-            React.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.createElement(Checkbox, { key: column.key, label: getColumnCaption(), value: isVisible, onValueChange: toggleVisibility, isReadonly: column.isAlwaysVisible || column.isLocked, cx: css$q.checkbox }),
             React.createElement(FlexRow, { size: null, cx: css$q.pinIconButton },
                 React.createElement(PinIconButton, { pinPosition: pinPosition, canUnpin: !isPinnedAlways, onTogglePin: togglePin })),
             React.createElement(DropMarker, { ...dndActorPropsWithoutRef })));
@@ -4368,7 +4630,7 @@ const ColumnRow = /* @__PURE__ */React.memo(function ColumnRow(props) {
     return (React.createElement(DndActor, { key: column.key, srcData: isDndAllowed && data, dstData: data, canAcceptDrop: onCanAcceptDrop, onDrop: onDrop, render: renderContent }));
 });
 
-var css$p = {"root":"ZmcE6j","main-panel":"_9WcpXI","mainPanel":"_9WcpXI","group":"ao8qTE","group-title":"k1B9tu","groupTitle":"k1B9tu","group-items":"luMI7Y","groupItems":"luMI7Y","no-data":"Lf4tRM","noData":"Lf4tRM","no-data-title":"yMJ23B","noDataTitle":"yMJ23B","no-data-sub-title":"VRWDvP","noDataSubTitle":"VRWDvP","h-divider":"KGfWpw","hDivider":"KGfWpw","search-area":"s7wecD","searchArea":"s7wecD","subgroup-accordion":"jxCvwV","subgroupAccordion":"jxCvwV","subgroup":"_3ymtH3","subgroup-title":"daqVTp","subgroupTitle":"daqVTp"};
+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.createElement(FlexRow, { cx: css$p.group },
     React.createElement(Text, { size: "none", cx: css$p.groupTitle }, title),
@@ -4382,6 +4644,7 @@ function ColumnsConfigurationModal(props) {
         columns,
         defaultConfig,
         getSearchFields: props.getSearchFields,
+        columnGroups: props.columnGroups,
     });
     const apply = useCallback(() => modalProps.success(columnsConfig), [columnsConfig, modalProps]);
     const close = useCallback(() => modalProps.abort(), [modalProps]);
@@ -4470,7 +4733,7 @@ const getChildrenAndRest = (row, rows) => {
     return [children, rest];
 };
 
-var css$o = {"listContainer":"p5UWNR","header":"Ognu5z","group":"g1adbD","stickyHeader":"z-VW5y"};
+var css$o = {"listContainer":"SP3tYM","header":"mnh-cy","group":"mlBqW2","stickyHeader":"_84AjX2"};
 
 function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
     const rowRef = useRef(undefined);
@@ -4510,7 +4773,7 @@ function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, r
             React__default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
 }
 
-var css$n = {"root":"M2la1y","sticky-header":"kpkmhl","stickyHeader":"kpkmhl","no-results":"c-N6ww","noResults":"c-N6ww","icon":"_9nJQbS","title":"O0dTO1"};
+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 } = useUuiContext();
@@ -4534,7 +4797,7 @@ function DataTable(props) {
             .show((modalProps) => {
             return (props.renderColumnsConfigurationModal
                 ? props.renderColumnsConfigurationModal({ ...configProps, ...modalProps })
-                : (React.createElement(ColumnsConfigurationModal, { ...modalProps, columns: props.columns, columnsConfig: config, defaultConfig: defaultConfig })));
+                : (React.createElement(ColumnsConfigurationModal, { ...modalProps, columns: props.columns, columnGroups: props.columnGroups, columnsConfig: config, defaultConfig: defaultConfig })));
         })
             .then((columnsConfig) => props.onValueChange({ ...props.value, columnsConfig }))
             .catch(() => null);
@@ -4543,11 +4806,8 @@ function DataTable(props) {
     ]);
     const renderTableBody = React.useCallback((params) => (React.createElement(React.Fragment, null,
         React.createElement("div", { className: cx$1(css$n.stickyHeader, 'uui-dt-sticky_header'), ref: headerRef },
-            React.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.createElement("div", { className: cx$1(uuiScrollShadows.top, {
-                    [uuiScrollShadows.topVisible]: params?.scrollShadows?.verticalTop,
-                }) })),
-        props.exactRowsCount !== 0 ? (React.createElement(DataRowsContainer, { headerRef: headerRef, listContainerRef: params?.listContainerRef, estimatedHeight: params?.estimatedHeight, offsetY: params?.offsetY, scrollShadows: params?.scrollShadows, renderRow: renderRow, rows: rows })) : (renderNoResultsBlock?.()))), [
+            React.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: uuiScrollShadows.top })),
+        props.exactRowsCount !== 0 ? (React.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 = cx$1(css$n.root, props.cx, 'uui-dt-vars', 'uui-data_table');
@@ -4562,7 +4822,7 @@ function DataTable(props) {
             : (React.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rowsCount: props.rowsCount, renderRows: renderTableBody, cx: classes, isLoading: props.isReloading, rowsSelector: "[role=row]", rawProps: rawProps })))));
 }
 
-var css$m = {"root":"IVVu0T","title-wrapper":"_3D6iLk","titleWrapper":"_3D6iLk","title":"_6e7qWt","text-wrapper":"fZ4ZKC","textWrapper":"fZ4ZKC","selection":"npHb02","postfix":"Y8Gb0L","selected":"SJ96bk"};
+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.forwardRef((props, ref) => {
     const togglerPickerOpened = (e) => {
@@ -4643,6 +4903,7 @@ function FilterPickerBody({ highlightSearchMatches = true, ...restProps }) {
             selectionMode: props.selectionMode,
             selection: props.value,
             search: dataSourceState.search,
+            disableClear: props.disableClear,
         };
         return props.renderFooter
             ? props.renderFooter(footerProps)
@@ -4786,7 +5047,7 @@ function FilterRangeDatePickerBody(props) {
         renderFooter()));
 }
 
-var css$l = {"container":"DDgCfF"};
+var css$l = {"container":"_-1Uhqp"};
 
 function FilterNumericBody(props) {
     const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
@@ -5097,14 +5358,24 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = /* @__PURE__ */React__default.memo(FiltersToolbarImpl);
 
-var css$k = {"delete-button":"BdTbNL","deleteButton":"BdTbNL","tab-button":"izaDkg","tabButton":"izaDkg","targetOpen":"dIv3EY"};
+var css$k = {"delete-button":"TkUdma","deleteButton":"TkUdma","tab-button":"V1sZHz","tabButton":"V1sZHz","targetOpen":"_0-IIaY"};
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = useUuiContext();
+    const successNotificationHandler = useCallback((text) => {
+        uuiNotifications
+            .show((props) => (React__default.createElement(SuccessNotification, { ...props },
+            React__default.createElement("div", { className: "uui-presets-panel-notification-text" }, text))), { duration: 3 })
+            .catch(() => null);
+    }, []);
     const copyUrlToClipboard = useCallback(async () => {
-        await navigator.clipboard.writeText(props.getPresetLink(props.preset));
+        const isPresetChanged = props.activePresetId === props.preset.id && props.hasPresetChanged(props.preset);
+        const preset = isPresetChanged ? { ...props.preset, ...props.tableState } : props.preset;
+        const link = props.getPresetLink(preset);
+        await navigator.clipboard.writeText(link);
         successNotificationHandler('Link copied!');
-    }, []);
+    }, [props.activePresetId, props.preset, props.hasPresetChanged, props.getPresetLink, props.tableState]);
+    const onCopyLink = props.onCopyLink ? props.onCopyLink : copyUrlToClipboard;
     const saveInCurrent = useCallback(async (preset) => {
         const newPreset = {
             ...preset,
@@ -5119,12 +5390,6 @@ function PresetActionsDropdown(props) {
     }, [
         props.tableState.filter, props.tableState.columnsConfig, props.tableState.filtersConfig,
     ]);
-    const successNotificationHandler = useCallback((text) => {
-        uuiNotifications
-            .show((props) => (React__default.createElement(SuccessNotification, { ...props },
-            React__default.createElement("div", { className: "uui-presets-panel-notification-text" }, text))), { duration: 3 })
-            .catch(() => null);
-    }, []);
     const saveInCurrentHandler = useCallback(() => {
         saveInCurrent(props.preset);
     }, [props.preset]);
@@ -5152,8 +5417,8 @@ function PresetActionsDropdown(props) {
                 React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-discard`, icon: settings.presetsPanel.icons.discardChangesIcon, caption: "Discard all changes", onClick: () => { dropdownProps.onClose(); discardAllChangesHandler(); } }),
                 React__default.createElement(DropdownMenuSplitter, { key: "discard-splitter" }))),
             isRenameAvailable && (React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-rename`, icon: settings.presetsPanel.icons.renameIcon, caption: "Rename", onClick: props.renamePreset })),
-            React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-duplicate`, icon: settings.presetsPanel.icons.copyIcon, caption: "Duplicate", onClick: () => { dropdownProps.onClose(); duplicateHandler(); } }),
-            React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-copyLink`, icon: settings.presetsPanel.icons.copyLinkIcon, caption: "Copy Link", onClick: copyUrlToClipboard }),
+            !isPresetChanged && (React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-duplicate`, icon: settings.presetsPanel.icons.copyIcon, caption: "Duplicate", onClick: () => { dropdownProps.onClose(); duplicateHandler(); } })),
+            props.onCopyLink !== null && (React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-copyLink`, icon: settings.presetsPanel.icons.copyLinkIcon, caption: "Copy Link", onClick: onCopyLink })),
             !isReadonlyPreset && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(DropdownMenuSplitter, { key: "delete-splitter" }),
                 React__default.createElement(DropdownMenuButton, { icon: settings.presetsPanel.icons.deleteIcon, caption: "Delete", cx: css$k.deleteButton, onClick: deleteHandler })))));
@@ -5169,7 +5434,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":"OphRUB","presetInputCell":"OphRUB","preset-input":"k1nIpI","presetInput":"k1nIpI"};
+var css$j = {"preset-input-cell":"xCehzP","presetInputCell":"xCehzP","preset-input":"tt5F9a","presetInput":"tt5F9a"};
 
 function PresetInput(props) {
     const [presetCaption, setPresetCaption] = useState(props.preset?.name || '');
@@ -5196,7 +5461,7 @@ function PresetInput(props) {
         React__default.createElement(TextInput, { cx: css$j.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50, isReadonly: readonly })));
 }
 
-var css$i = {"preset":"Y2ikKC","activePreset":"uVr9V9"};
+var css$i = {"preset":"J1q077","activePreset":"C7QNjX"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = useState(false);
@@ -5218,10 +5483,10 @@ function Preset(props) {
     }, [props.preset]);
     const isPresetActive = props.activePresetId === props.preset.id;
     const PresetActionsDropdownComponent = useCallback(() => React__default.createElement(PresetActionsDropdown, { renamePreset: setPresetForRename, ...props }), [props.preset, props.tableState, props.activePresetId]);
-    return (React__default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$i.preset, isPresetActive && css$i.activePreset, UUI_PRESETS_PANEL_PRESET], size: settings.presetsPanel.sizes.tabButton, withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: PresetActionsDropdownComponent, iconPosition: "right", isLinkActive: isPresetActive }))));
+    return (React__default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$i.preset, isPresetActive && css$i.activePreset, UUI_PRESETS_PANEL_PRESET], size: settings.presetsPanel.sizes.tabButton, withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: PresetActionsDropdownComponent, iconPosition: "right", isActive: isPresetActive }))));
 }
 
-var css$h = {"divider":"_3uoM3m","dropdownDeleteIcon":"QW1M--","presetsWrapper":"JCT1Uh","addPresetContainer":"-tGN5-","dropContainer":"bVX2aa"};
+var css$h = {"divider":"vekOdI","dropdownDeleteIcon":"i7naC6","presetsWrapper":"lkHUKJ","addPresetContainer":"_485nR3","dropContainer":"qIMA-g"};
 
 function PresetsPanel(props) {
     const [isAddingPreset, setIsAddingPreset] = useState(false);
@@ -5270,9 +5535,9 @@ function PresetsPanel(props) {
             React__default.createElement(AdaptivePanel, { items: getPanelItems() }))));
 }
 
-var css$g = {"root":"dZKxBx"};
+var css$g = {"root":"_5KnibK"};
 
-var css$f = {"root":"_1bWXqs","burger-content":"_-5iEeZ","burgerContent":"_-5iEeZ"};
+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); }
@@ -5315,24 +5580,38 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
 };
 var ForwardRef$2 = /*#__PURE__*/forwardRef(SvgNavigationArrowDownOutline);
 
-var css$e = {"root":"uXTAl5","button-primary":"F4y5-n","buttonPrimary":"F4y5-n","button-secondary":"clr6Jv","buttonSecondary":"clr6Jv","hasIcon":"xiiW6e","dropdown":"HM56dj"};
+var css$e = {"root":"dtUWWh","button-primary":"-Mis7-","buttonPrimary":"-Mis7-","button-secondary":"ylTyFw","buttonSecondary":"ylTyFw","hasIcon":"LOevly","dropdown":"_9xeNwU"};
 
-const BurgerButton = /* @__PURE__ */withMods(Button$1, (props) => [
-    css$e.root,
-    'uui-main_menu-burger-button',
-    css$e['button-' + (props.type || 'primary')],
-    css$e['indent-' + (props.indentLevel || 0)],
-    props.isDropdown && css$e.dropdown,
-    props.icon && css$e.hasIcon,
-], () => ({ dropdownIcon: ForwardRef$2, dropdownIconPosition: 'left', role: 'menuitem' }));
+function applyBurgerButtonMods(props) {
+    return [
+        css$e.root,
+        'uui-main_menu-burger-button',
+        css$e['button-' + (props.type || 'primary')],
+        css$e['indent-' + (props.indentLevel || 0)],
+        props.isActive && uuiMod.active,
+        props.isDropdown && css$e.dropdown,
+        props.icon && css$e.hasIcon,
+    ];
+}
+const BurgerButton = /* @__PURE__ */React__default.forwardRef((props, ref) => {
+    const { isActive } = useIsActive({
+        isLinkActive: props.isLinkActive,
+        link: props.link,
+        isActive: props.isActive,
+    });
+    return (React__default.createElement(Button$1, { ...props, ref: ref, cx: applyBurgerButtonMods({ ...props, isActive }), rawProps: {
+            ...props.rawProps,
+            role: 'menuitem',
+        }, dropdownIcon: ForwardRef$2 }));
+});
 
-var css$d = {"search-input":"_3GOVDt","searchInput":"_3GOVDt"};
+var css$d = {"search-input":"vYVtSz","searchInput":"vYVtSz"};
 
 function BurgerSearch(props) {
     return (React.createElement(TextInput$1, { cx: cx(css$d.searchInput, 'uui-main_menu-burger-search'), iconPosition: "left", icon: ForwardRef$M, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$Q }));
 }
 
-var css$c = {"root":"uk6e8i","group-header":"X7bZPO","groupHeader":"X7bZPO","group-name":"Rd7BT8","groupName":"Rd7BT8","line":"MSoAYj"};
+var css$c = {"root":"KuPp6c","group-header":"uJKceF","groupHeader":"uJKceF","group-name":"jgiWdd","groupName":"jgiWdd","line":"vu919g"};
 
 function BurgerGroupHeader(props) {
     return (React.createElement("div", { className: cx(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
@@ -5340,19 +5619,25 @@ function BurgerGroupHeader(props) {
         React.createElement("span", { className: css$c.groupName }, props.caption)));
 }
 
-var css$b = {"root":"KagEMM","type-primary":"KxhHzJ","typePrimary":"KxhHzJ","type-secondary":"WGY-78","typeSecondary":"WGY-78"};
+var css$b = {"root":"PLtwlE","type-primary":"xVnypL","typePrimary":"xVnypL","type-secondary":"-YJtZ8","typeSecondary":"-YJtZ8"};
 
 const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { type, ...clickableProps } = props;
+    const { isActive } = useIsActive({
+        isLinkActive: props.isLinkActive,
+        link: props.link,
+        isActive: props.isActive,
+    });
     return (React.createElement(Clickable, { ...clickableProps, rawProps: {
             'aria-expanded': props.isOpen,
-            'aria-current': props.isLinkActive
+            'aria-current': isActive
                 ? 'page'
                 : undefined,
             ...props.rawProps,
         }, cx: [
             css$b.root,
             css$b['type-' + (type || 'primary')],
+            isActive && uuiMod.active,
             props.cx,
         ], ref: ref },
         props.icon && props.iconPosition !== 'right' && (React.createElement(IconContainer, { icon: props.icon, onClick: props.onIconClick })),
@@ -5362,34 +5647,18 @@ const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         props.isDropdown && (React.createElement(IconContainer, { icon: ForwardRef$P, flipY: props.isOpen }))));
 });
 
-var css$a = {"dropdown-body":"XnVPJS","dropdownBody":"XnVPJS"};
+var css$a = {"dropdown-body":"pI0ItD","dropdownBody":"pI0ItD"};
 
-class MainMenuDropdown extends React.Component {
-    render() {
-        return (React.createElement(Dropdown$1, { renderTarget: (props) => (React.createElement(MainMenuButton, { caption: this.props.caption, ...props, rawProps: this.props.rawProps, isLinkActive: this.props.isLinkActive, isDropdown: true })), renderBody: (props) => {
-                const handleEscape = (e) => {
-                    if (e.key === 'Escape' && props.isOpen) {
-                        props.onClose();
-                    }
-                };
-                return (React.createElement(FocusLock, { returnFocus: true, persistentFocus: true, lockProps: { onKeyDown: handleEscape } },
-                    React.createElement("div", { className: cx(css$a.dropdownBody, 'uui-main_menu-dropdown', this.props.cx) }, this.props.renderBody
-                        ? this.props.renderBody({ ...props })
-                        : React.Children.map(this.props.children, (item) => {
-                            if (!item)
-                                return item;
-                            return React.createElement(item.type, {
-                                ...item.props,
-                                onClick: item.props.onClick
-                                    ? () => {
-                                        item.props.onClick();
-                                        props.onClose();
-                                    }
-                                    : null,
-                            });
-                        }))));
-            }, placement: "bottom-start" }));
-    }
+function MainMenuDropdown(props) {
+    const handleEscape = (e, onClose, isOpen) => {
+        if (e.key === 'Escape' && isOpen) {
+            onClose();
+        }
+    };
+    return (React__default.createElement(Dropdown$1, { renderTarget: (dropdownProps) => (React__default.createElement(MainMenuButton, { caption: props.caption, ...dropdownProps, rawProps: props.rawProps, isActive: props.isActive, isDropdown: true })), renderBody: (dropdownBodyProps) => (React__default.createElement(FocusLock, { returnFocus: true, persistentFocus: true, lockProps: {
+                onKeyDown: (e) => handleEscape(e, dropdownBodyProps.onClose, dropdownBodyProps.isOpen),
+            } },
+            React__default.createElement("div", { className: cx(css$a.dropdownBody, 'uui-main_menu-dropdown', props.cx) }, props.renderBody({ ...dropdownBodyProps })))), placement: "bottom-start" }));
 }
 
 function applyMainMenuMods() {
@@ -5421,12 +5690,12 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
 };
 var ForwardRef$1 = /*#__PURE__*/forwardRef(SvgNavigationGlobalMenuOutlineOutline);
 
-var css$9 = {"global-menu-btn":"sOnX4O","globalMenuBtn":"sOnX4O","global-menu-icon":"_7Kjl2N","globalMenuIcon":"_7Kjl2N"};
+var css$9 = {"global-menu-btn":"Rcf6o8","globalMenuBtn":"Rcf6o8","global-menu-icon":"-KObp5","globalMenuIcon":"-KObp5"};
 
 const GlobalMenu = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("button", { ref: ref, id: "global_menu_toggle", className: cx(css$9.globalMenuBtn, props.cx), ...props.rawProps },
     React.createElement(IconContainer, { size: 36, icon: ForwardRef$1, cx: css$9.globalMenuIcon }))));
 
-var css$8 = {"container":"_1rHVEs","open":"gTpu-f","folding-arrow":"N4ddZ-","foldingArrow":"N4ddZ-"};
+var css$8 = {"container":"w9ZVai","open":"u8-Udc","folding-arrow":"_7iFuL1","foldingArrow":"_7iFuL1"};
 
 const MainMenuAvatar = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("button", { ref: ref, className: cx(css$8.container, props.isDropdown && css$8.dropdown, props.isOpen && css$8.open, props.onClick && uuiMarkers.clickable, props.cx), onClick: props.onClick, ...props.rawProps },
     React.createElement(Avatar, { size: "36", img: props.avatarUrl }),
@@ -5434,15 +5703,15 @@ const MainMenuAvatar = /* @__PURE__ */React.forwardRef((props, ref) => (React.cr
     props.isDropdown && (React.createElement("div", null,
         React.createElement(IconContainer, { size: 18, icon: ForwardRef$P, flipY: props.isOpen, cx: css$8.foldingArrow }))))));
 
-var css$7 = {"search-input":"HvmqXw","searchInput":"HvmqXw"};
+var css$7 = {"search-input":"_2vTcli","searchInput":"_2vTcli"};
 
 const MainMenuSearch = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement(IEditableDebouncer, { ...props, render: (iEditable) => (React.createElement(TextInput$1, { iconPosition: "left", icon: ForwardRef$M, cancelIcon: props.value?.length > 0 && ForwardRef$Q, ...props, ...iEditable, ref: ref, cx: cx$1(css$7.searchInput, props.cx), ...props.rawProps })) })));
 
-var css$6 = {"container":"sIJHtT"};
+var css$6 = {"container":"wsFTHn"};
 
 const MainMenuIcon = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement(IconButton, { ref: ref, icon: props.icon, cx: cx$1(props.cx, css$6.container), ...props })));
 
-var css$5 = {"root":"_1E-KZz"};
+var css$5 = {"root":"pn9hTw"};
 
 const Anchor = /* @__PURE__ */withMods(Anchor$1, () => [css$5.root]);
 
@@ -5500,7 +5769,7 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgFileCloudUploadFill);
 
-var css$4 = {"root":"qHuwCn","drop-start":"CYFcgP","dropStart":"CYFcgP","drop-over":"H7acK3","dropOver":"H7acK3","link":"LddVu7","drop-area":"FLX-HM","dropArea":"FLX-HM","drop-caption":"ezSx52","dropCaption":"ezSx52","icon-blue":"MWrAj-","iconBlue":"MWrAj-"};
+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'
@@ -5518,7 +5787,7 @@ function DropSpot(props) {
     return React.createElement(DropSpot$1, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
 }
 
-var css$3 = {"root":"NWOiVA"};
+var css$3 = {"root":"huTrTa"};
 
 const SvgCircleProgress = /* @__PURE__ */React.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
@@ -5529,7 +5798,7 @@ const SvgCircleProgress = /* @__PURE__ */React.forwardRef((props, ref) => {
         React.createElement("circle", { strokeWidth: 1, fill: "transparent", r: outsetRadius, cx: props.size / 2, cy: props.size / 2 })));
 });
 
-var css$2 = {"root":"qPF4K9","file-name":"sqZWd8","fileName":"sqZWd8","default-color":"_5BqquI","defaultColor":"_5BqquI","doc-color":"r-neiO","docColor":"r-neiO","xls-color":"OkQHGA","xlsColor":"OkQHGA","pdf-color":"_8i9y3S","pdfColor":"_8i9y3S","movie-color":"b7ZF3i","movieColor":"b7ZF3i","img-color":"sqDNfL","imgColor":"sqDNfL","mov-color":"vtyJQg","movColor":"vtyJQg","error-block":"U1PT-R","errorBlock":"U1PT-R","icons-block":"swxJt7","iconsBlock":"swxJt7"};
+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.forwardRef((props, ref) => {
     const [isLoadingShow, setIsLoadingShow] = React.useState(true);
@@ -5584,7 +5853,7 @@ const FileCard = /* @__PURE__ */React.forwardRef((props, ref) => {
         setIsLoadingShow(() => false);
     };
     const renderErrorContent = () => (React.createElement(Tooltip, { content: file.error.message, placement: "bottom-start" },
-        React.createElement("div", { className: css$2.errorBlock },
+        React.createElement("div", { className: css$2.errorBlock, "aria-description": file.error.message, "aria-label": "File Upload Error" },
             React.createElement(IconContainer, { icon: settings.fileCard.icons.errorIcon, size: 12 }),
             i18n.fileCard.failedUploadErrorMessage)));
     const renderSuccessfulContent = () => (React.createElement(Text, { size: "none", fontSize: "14", lineHeight: "18", color: "tertiary" },
@@ -5648,7 +5917,7 @@ const getErrorPageConfig = () => ({
     },
 });
 
-var css$1 = {"container":"SZfHHg"};
+var css$1 = {"container":"R-B39Y"};
 
 const ErrorPage = (props) => {
     const isMobileScreen = isMobile();
@@ -5660,7 +5929,7 @@ const ErrorPage = (props) => {
             props?.supportLink && React__default.createElement("div", { className: "uui-error-support-link" }, props?.supportLink))));
 };
 
-var css = {"recovery-spinner":"BOObZW","recoverySpinner":"BOObZW","recovery-message":"VAb36R","recoveryMessage":"VAb36R","modal-blocker":"gPQ4YD","modalBlocker":"gPQ4YD","modalFadeIn":"LKuqxx"};
+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 } = useUuiContext();
@@ -5711,5 +5980,5 @@ function ErrorHandler(props) {
         errorType === 'recovery' && renderRecoveryBlocker(errorInfo)));
 }
 
-export { Accordion, Alert, Anchor, AvatarStack, Badge, Blocker, Burger, BurgerButton, BurgerGroupHeader, BurgerSearch, Button, Calendar, Checkbox, CheckboxGroup, ClearNotification, ColumnHeaderDropdown, ColumnsConfigurationModal, ConfirmationModal, ControlGroup, CountIndicator, DataPickerBody, DataPickerFooter, DataPickerMobileHeader, DataPickerRow, DataRowAddons, DataRowsContainer, DataTable, DataTableCell, DataTableHeaderCell, DataTableHeaderRow, DataTableRow, DatePicker, DatePickerBody, DatePickerComponent, DropMarker, DropSpot, Dropdown, DropdownContainer, DropdownMenuBody, DropdownMenuButton, DropdownMenuHeader, DropdownMenuSplitter, DropdownMenuSwitchButton, DropdownSubMenu, ErrorAlert, ErrorHandler, ErrorNotification, ErrorPage, FileCard, FilterDatePickerBodyFooter, FilterItemBody, FilterPickerBody, FilterRangeDatePickerBodyFooter, FiltersPanel, FlexCell, FlexRow, Form, GlobalMenu, HintAlert, HintNotification, IDropdownControlKeys, IconButton, IndeterminateBar, IndicatorBar, InputAddon, LabeledInput, LinkButton, MainMenu, MainMenuAvatar, MainMenuButton, MainMenuDropdown, MainMenuIcon, MainMenuSearch, ModalBlocker, ModalFooter, ModalHeader, ModalWindow, MultiSwitch, NotificationCard, NumericInput, Paginator, Panel, PickerBodyMobileView, PickerInput, PickerItem, PickerList, PickerListRow, PickerModal, PickerToggler, PickerTogglerTag, PresetsPanel, ProgressBar, RadioGroup, RadioInput, RangeDatePicker, RangeDatePickerBody, RangeDatePickerInput, Rating, RichTextView, ScrollBars, SearchInput, Slider, Snackbar, Spinner, StatusIndicator, SuccessAlert, SuccessNotification, SvgCircleProgress, Switch, TabButton, Tag, Text, TextArea, TextInput, TextPlaceholder, TimePicker, TimePickerBody, TimePickerComponent, Tooltip, VerticalTabButton, VirtualList, WarningAlert, WarningNotification, applyDateSelectionMods, defaultPredicates, getDefaultPredicate, getErrorPageConfig, getHighlightRanges, getHighlightedSearchMatches, getRecoveryMessageConfig, i18n, propsMods, rangeDatePickerPresets, renderCell, renderDropMarkers, settings, useColumnsWithFilters, useForm, uuiDatePickerBody, uuiRangeDatePickerBody, uuiTimePicker };
+export { Accordion, Alert, Anchor, AvatarStack, Badge, Blocker, Burger, BurgerButton, BurgerGroupHeader, BurgerSearch, Button, Calendar, Checkbox, CheckboxGroup, ClearNotification, ColumnHeaderDropdown, ColumnsConfigurationModal, ConfirmationModal, ControlGroup, CountIndicator, DataPickerBody, DataPickerFooter, DataPickerMobileHeader, DataPickerRow, DataRowAddons, DataRowsContainer, DataTable, DataTableCell, DataTableHeaderCell, DataTableHeaderRow, DataTableRow, DatePicker, DatePickerBody, DatePickerComponent, DropMarker, DropSpot, Dropdown, DropdownContainer, DropdownMenuBody, DropdownMenuButton, DropdownMenuHeader, DropdownMenuSplitter, DropdownMenuSwitchButton, DropdownSubMenu, ErrorAlert, ErrorHandler, ErrorNotification, ErrorPage, FileCard, FilterDatePickerBodyFooter, FilterItemBody, FilterPickerBody, FilterRangeDatePickerBodyFooter, FiltersPanel, FlexCell, FlexRow, Form, GlobalMenu, HintAlert, HintNotification, IDropdownControlKeys, IconButton, IndeterminateBar, IndicatorBar, InputAddon, LabeledInput, LinkButton, MainMenu, MainMenuAvatar, MainMenuButton, MainMenuDropdown, MainMenuIcon, MainMenuSearch, ModalBlocker, ModalFooter, ModalHeader, ModalWindow, MultiSwitch, NotificationCard, NumericInput, Paginator, Panel, PickerBodyMobileView, PickerInput, PickerItem, PickerList, PickerListRow, PickerModal, PickerToggler, PickerTogglerTag, PresetsPanel, ProgressBar, RadioGroup, RadioInput, RangeDatePicker, RangeDatePickerBody, RangeDatePickerInput, Rating, RichTextView, ScrollBars, SearchInput, Slider, Snackbar, Spinner, StatusIndicator, SuccessAlert, SuccessNotification, SvgCircleProgress, Switch, TabButton, Tabs, Tag, Text, TextArea, TextInput, TextPlaceholder, TimePicker, TimePickerBody, TimePickerComponent, Tooltip, Tree, VerticalTabButton, VirtualList, WarningAlert, WarningNotification, applyDateSelectionMods, defaultPredicates, getDefaultPredicate, getErrorPageConfig, getHighlightRanges, getHighlightedSearchMatches, getRecoveryMessageConfig, i18n, propsMods, rangeDatePickerPresets, renderCell, renderDropMarkers, settings, useColumnsWithFilters, useForm, uuiDatePickerBody, uuiRangeDatePickerBody, uuiTimePicker };
 //# sourceMappingURL=index.esm.js.map