@epam/uui 5.11.0-alpha.0 → 5.12.0-rc.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import * as uuiComponents from '@epam/uui-components';
 import { 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, Anchor as Anchor$1, FlexRow as FlexRow$1, FlexSpacer, Text as Text$1, FlexCell as FlexCell$1, VPanel, ScrollBars as ScrollBars$1, AvatarStack as AvatarStack$1, Spinner as Spinner$1, Paginator as Paginator$1, DragHandle, Blocker as Blocker$1, ModalBlocker as ModalBlocker$1, ModalWindow as ModalWindow$1, Snackbar as Snackbar$1, InputAddon as InputAddon$1, Slider as Slider$1, Calendar as Calendar$1, YearSelection, MonthSelection, Day, uuiDaySelection, PickerBodyBase, DataPickerRow as DataPickerRow$1, 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, AdaptivePanel, useColumnsConfiguration, Accordion as Accordion$1, DataTableSelectionProvider, DataTableFocusProvider, 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, UuiContext, uuiMod, directionMode, useVirtualList, useScrollShadows, isMobile, i18n as i18n$1, useUuiContext, isFocusReceiverInsideFocusLock, Lens, mobilePopperModifier, uuiDataTableHeaderCell, usePrevious, useForceUpdate, getSeparatedValue, useArrayDataSource, orderBy, getOrderBetween, DndActor, uuiDndState, useColumnsConfig, uuiScrollShadows, Form as Form$1, useForm as useForm$1, formatBytes, useUuiError } from '@epam/uui-core';
+import { withMods, devLogger, uuiElement, cx as cx$1, uuiMarkers, IEditableDebouncer, UuiContext, uuiMod, directionMode, useVirtualList, useScrollShadows, isMobile, i18n as i18n$1, useUuiContext, isFocusReceiverInsideFocusLock, Lens, mobilePopperModifier, uuiDataTableHeaderCell, uuiDataTableHeaderGroupCell, usePrevious, useForceUpdate, getSeparatedValue, useArrayDataSource, orderBy, getOrderBetween, DndActor, uuiDndState, useColumnsConfig, uuiScrollShadows, Form as Form$1, useForm as useForm$1, formatBytes, useUuiError } from '@epam/uui-core';
 import * as React from 'react';
 import React__default, { forwardRef, useContext, useRef, useState, useEffect, useReducer, useImperativeHandle, useCallback, useMemo, Fragment } from 'react';
 import cx from 'classnames';
@@ -514,6 +514,25 @@ const settings = {
                         },
                         truncate: ['48'],
                     },
+                    groupCell: {
+                        defaults: {
+                            size: '36',
+                            padding: '12',
+                            paddingEdge: '24',
+                        },
+                        columnCaption: {
+                            fontSize: '14',
+                            fontWeight: '400',
+                            size: '18',
+                            uppercase: '12',
+                        },
+                        iconSize: {
+                            36: '18',
+                            48: '18',
+                            60: '18',
+                        },
+                        truncate: ['48'],
+                    },
                 },
             },
             body: {
@@ -548,7 +567,7 @@ const settings = {
         modal: {
             window: {
                 defaults: {
-                    width: '420',
+                    width: 420,
                 },
             },
         },
@@ -562,11 +581,11 @@ const settings = {
     },
 };
 
-var css$1w = {"uui-typography":"WlUnIC","hero-header":"izPMms","promo-header":"V9jqrL","uui-critical":"ldzwRW","uui-info":"TYDhOB","uui-success":"_9f9QNa","uui-warning":"rnvW7a","uui-highlight":"eyXBxk","uui-typography-size-12":"_7O-375","uui-typography-size-14":"i8nfhG","uui-typography-size-16":"_5I2q2X","root":"pz7cpM","uuiTypography":"WlUnIC","heroHeader":"izPMms","promoHeader":"V9jqrL","uuiCritical":"ldzwRW","uuiInfo":"TYDhOB","uuiSuccess":"_9f9QNa","uuiWarning":"rnvW7a","uuiHighlight":"eyXBxk","uuiTypographySize12":"_7O-375","uuiTypographySize14":"i8nfhG","uuiTypographySize16":"_5I2q2X"};
+var css$1x = {"uui-typography":"oPhd0A","hero-header":"CVggzf","promo-header":"-NftxO","uui-critical":"BjTM8o","uui-info":"UbWgsY","uui-success":"_4y88m-","uui-warning":"kzBfRe","uui-highlight":"PP1oA8","uui-typography-size-12":"BKSrF2","uui-typography-size-14":"Z2pfLR","uui-typography-size-16":"kogV7Z","root":"qynglP","uuiTypography":"oPhd0A","heroHeader":"CVggzf","promoHeader":"-NftxO","uuiCritical":"BjTM8o","uuiInfo":"UbWgsY","uuiSuccess":"_4y88m-","uuiWarning":"kzBfRe","uuiHighlight":"PP1oA8","uuiTypographySize12":"BKSrF2","uuiTypographySize14":"Z2pfLR","uuiTypographySize16":"kogV7Z"};
 
 function applyButtonMods(mods) {
     return [
-        css$1w.root,
+        css$1x.root,
         'uui-button',
         `uui-fill-${mods.fill || 'solid'}`,
         `uui-color-${mods.color || 'primary'}`,
@@ -580,10 +599,10 @@ const Button = /* @__PURE__ */withMods(uuiComponents.Button, applyButtonMods, ()
     };
 });
 
-var css$1v = {"root":"bK-KyP"};
+var css$1w = {"root":"yu82wx"};
 
 function applyIconButtonMods(props) {
-    return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1v.root];
+    return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1w.root];
 }
 const IconButton = /* @__PURE__ */withMods(uuiComponents.IconButton, applyIconButtonMods, (props) => {
     const isDeprecated = ['info', 'success', 'error', 'warning'].includes(props.color);
@@ -617,7 +636,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$1u = {"uui-typography":"O-34K0","hero-header":"vNsble","promo-header":"QJWmdW","uui-critical":"rAwTgv","uui-info":"aSdk4I","uui-success":"rHNyFD","uui-warning":"_0ybMLb","uui-highlight":"qj38Tz","uui-typography-size-12":"K6xdPo","uui-typography-size-14":"hSkMVm","uui-typography-size-16":"-b1lXP","root":"V0VbhU","uuiTypography":"O-34K0","heroHeader":"vNsble","promoHeader":"QJWmdW","uuiCritical":"rAwTgv","uuiInfo":"aSdk4I","uuiSuccess":"rHNyFD","uuiWarning":"_0ybMLb","uuiHighlight":"qj38Tz","uuiTypographySize12":"K6xdPo","uuiTypographySize14":"hSkMVm","uuiTypographySize16":"-b1lXP"};
+var css$1v = {"uui-typography":"zdx-JE","hero-header":"_0-kBf4","promo-header":"R-rHPK","uui-critical":"S2NOCn","uui-info":"_4tHaa4","uui-success":"zUgmsy","uui-warning":"UMDHBQ","uui-highlight":"QaI3-r","uui-typography-size-12":"-M93cb","uui-typography-size-14":"JeIj6-","uui-typography-size-16":"nn31sc","root":"XWXkk0","uuiTypography":"zdx-JE","heroHeader":"_0-kBf4","promoHeader":"R-rHPK","uuiCritical":"S2NOCn","uuiInfo":"_4tHaa4","uuiSuccess":"zUgmsy","uuiWarning":"UMDHBQ","uuiHighlight":"QaI3-r","uuiTypographySize12":"-M93cb","uuiTypographySize14":"JeIj6-","uuiTypographySize16":"nn31sc"};
 
 const DEFAULT_COLOR = 'primary';
 const DEFAULT_WEIGHT = 'semibold';
@@ -633,7 +652,7 @@ const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
     }
     const rootStyles = [
         'uui-link_button',
-        css$1u.root,
+        css$1v.root,
         `uui-size-${props.size || settings.sizes.defaults.linkButton}`,
         ...getIconClass(props),
         `uui-color-${props.color || DEFAULT_COLOR}`,
@@ -648,11 +667,11 @@ const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         props.isDropdown && (React.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1t = {"root":"YETOhn"};
+var css$1u = {"root":"_1NYrxj"};
 
 const CountIndicator = /* @__PURE__ */forwardRef((props, ref) => {
     return (React__default.createElement("div", { ref: ref, className: cx([
-            css$1t.root,
+            css$1u.root,
             'uui-count_indicator',
             `uui-size-${props.size || settings.sizes.defaults.countIndicator}`,
             props.color && `uui-color-${props.color}`,
@@ -660,11 +679,11 @@ const CountIndicator = /* @__PURE__ */forwardRef((props, ref) => {
         ]) }, props.caption));
 });
 
-var css$1s = {"uui-typography":"mcR-bP","hero-header":"YU-cyV","promo-header":"E8gT-w","uui-critical":"LW8m0T","uui-info":"kgiBLu","uui-success":"jWQEQO","uui-warning":"-E0avP","uui-highlight":"iHkagH","uui-typography-size-12":"oOiQaj","uui-typography-size-14":"ZJdPLa","uui-typography-size-16":"_6aVTXF","root":"gSTxmA","withNotify":"N1SRTp","uuiTypography":"mcR-bP","heroHeader":"YU-cyV","promoHeader":"E8gT-w","uuiCritical":"LW8m0T","uuiInfo":"kgiBLu","uuiSuccess":"jWQEQO","uuiWarning":"-E0avP","uuiHighlight":"iHkagH","uuiTypographySize12":"oOiQaj","uuiTypographySize14":"ZJdPLa","uuiTypographySize16":"_6aVTXF"};
+var css$1t = {"uui-typography":"dLx-4U","hero-header":"FhHpzj","promo-header":"_2DFdxd","uui-critical":"tKRuYD","uui-info":"Fz-bK2","uui-success":"H0wz--","uui-warning":"XlwlkV","uui-highlight":"HL-Yb6","uui-typography-size-12":"YTJm-J","uui-typography-size-14":"nn7pw9","uui-typography-size-16":"upAMrm","root":"lRoUG2","withNotify":"iErYq4","uuiTypography":"dLx-4U","heroHeader":"FhHpzj","promoHeader":"_2DFdxd","uuiCritical":"tKRuYD","uuiInfo":"Fz-bK2","uuiSuccess":"H0wz--","uuiWarning":"XlwlkV","uuiHighlight":"HL-Yb6","uuiTypographySize12":"YTJm-J","uuiTypographySize14":"nn7pw9","uuiTypographySize16":"upAMrm"};
 
 const TabButton = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const styles = [
-        css$1s.root,
+        css$1t.root,
         'uui-tab-button',
         `uui-size-${props.size || settings.sizes.defaults.tabButton}`,
         ...getIconClass(props),
@@ -676,17 +695,17 @@ const TabButton = /* @__PURE__ */React__default.forwardRef((props, 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) },
             props.caption,
-            props.withNotify && React__default.createElement("div", { className: css$1s.withNotify }))),
+            props.withNotify && React__default.createElement("div", { className: css$1t.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.sizes.tabButton.countIndicator[props.size || settings.sizes.defaults.tabButton], 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 }))));
 });
 
-var css$1r = {"uui-typography":"_9ceY7W","hero-header":"ApKIeC","promo-header":"HZGcZT","uui-critical":"j7Hhh8","uui-info":"iN3mJe","uui-success":"YxbVRR","uui-warning":"-GiqCS","uui-highlight":"fTSLlw","uui-typography-size-12":"t-Qvvq","uui-typography-size-14":"HphVYk","uui-typography-size-16":"uaHQlu","root":"v-H9j3","uuiTypography":"_9ceY7W","heroHeader":"ApKIeC","promoHeader":"HZGcZT","uuiCritical":"j7Hhh8","uuiInfo":"iN3mJe","uuiSuccess":"YxbVRR","uuiWarning":"-GiqCS","uuiHighlight":"fTSLlw","uuiTypographySize12":"t-Qvvq","uuiTypographySize14":"HphVYk","uuiTypographySize16":"uaHQlu"};
+var css$1s = {"uui-typography":"dN-7su","hero-header":"Ak0Pf0","promo-header":"S7wuRt","uui-critical":"Q6BLlK","uui-info":"l3tkPb","uui-success":"D1QyYi","uui-warning":"QF-Gdz","uui-highlight":"INl9bc","uui-typography-size-12":"PtxwTU","uui-typography-size-14":"_1VKeOH","uui-typography-size-16":"GNbNo-","root":"C7t3p1","uuiTypography":"dN-7su","heroHeader":"Ak0Pf0","promoHeader":"S7wuRt","uuiCritical":"Q6BLlK","uuiInfo":"l3tkPb","uuiSuccess":"D1QyYi","uuiWarning":"QF-Gdz","uuiHighlight":"INl9bc","uuiTypographySize12":"PtxwTU","uuiTypographySize14":"_1VKeOH","uuiTypographySize16":"GNbNo-"};
 
 function applyVerticalTabButtonMods() {
-    return [css$1r.root, 'uui-vertical-tab-button'];
+    return [css$1s.root, 'uui-vertical-tab-button'];
 }
 const VerticalTabButton = /* @__PURE__ */withMods(TabButton, applyVerticalTabButtonMods);
 
@@ -705,13 +724,13 @@ var SvgContentMinusOutline = function SvgContentMinusOutline(props, ref) {
 };
 var ForwardRef$B = /*#__PURE__*/forwardRef(SvgContentMinusOutline);
 
-var css$1q = {"uui-typography":"lSLcCE","hero-header":"nValmj","promo-header":"TQ8ufK","uui-critical":"SMjThD","uui-info":"uyb87h","uui-success":"hHMPgo","uui-warning":"_-6Qz3D","uui-highlight":"Srwu7V","uui-typography-size-12":"KZNj2B","uui-typography-size-14":"nGFzRp","uui-typography-size-16":"_8M94Pr","root":"ay13S1","mode-cell":"nM5BJa","uuiTypography":"lSLcCE","heroHeader":"nValmj","promoHeader":"TQ8ufK","uuiCritical":"SMjThD","uuiInfo":"uyb87h","uuiSuccess":"hHMPgo","uuiWarning":"_-6Qz3D","uuiHighlight":"Srwu7V","uuiTypographySize12":"KZNj2B","uuiTypographySize14":"nGFzRp","uuiTypographySize16":"_8M94Pr","modeCell":"nM5BJa"};
+var css$1r = {"uui-typography":"Xum7fa","hero-header":"KAMHwn","promo-header":"cQVXec","uui-critical":"KYss4W","uui-info":"GEuQ86","uui-success":"zkwvSN","uui-warning":"tAiNa7","uui-highlight":"pB65h7","uui-typography-size-12":"iJAK5C","uui-typography-size-14":"xb-8ur","uui-typography-size-16":"_9K8M3Y","root":"Q9H8K9","mode-cell":"GAuoD7","uuiTypography":"Xum7fa","heroHeader":"KAMHwn","promoHeader":"cQVXec","uuiCritical":"KYss4W","uuiInfo":"GEuQ86","uuiSuccess":"zkwvSN","uuiWarning":"tAiNa7","uuiHighlight":"pB65h7","uuiTypographySize12":"iJAK5C","uuiTypographySize14":"xb-8ur","uuiTypographySize16":"_9K8M3Y","modeCell":"GAuoD7"};
 
 function applyCheckboxMods(mods) {
     return [
-        css$1q.root,
+        css$1r.root,
         `uui-size-${mods.size || settings.sizes.defaults.checkbox}`,
-        css$1q['mode-' + (mods.mode || 'form')],
+        css$1r['mode-' + (mods.mode || 'form')],
         'uui-color-primary',
     ];
 }
@@ -740,11 +759,11 @@ var SvgRadioDotFill = function SvgRadioDotFill(props, ref) {
 };
 var ForwardRef$A = /*#__PURE__*/forwardRef(SvgRadioDotFill);
 
-var css$1p = {"uui-typography":"uDf4qC","hero-header":"Z6rmto","promo-header":"_6MOPL9","uui-critical":"Ev-o9t","uui-info":"F--cbc","uui-success":"LjBMCT","uui-warning":"oSbH-0","uui-highlight":"FI4m-D","uui-typography-size-12":"aXwfqO","uui-typography-size-14":"GOiP9j","uui-typography-size-16":"oigyP7","root":"CuhwBt","uuiTypography":"uDf4qC","heroHeader":"Z6rmto","promoHeader":"_6MOPL9","uuiCritical":"Ev-o9t","uuiInfo":"F--cbc","uuiSuccess":"LjBMCT","uuiWarning":"oSbH-0","uuiHighlight":"FI4m-D","uuiTypographySize12":"aXwfqO","uuiTypographySize14":"GOiP9j","uuiTypographySize16":"oigyP7"};
+var css$1q = {"uui-typography":"uJbYnl","hero-header":"iJTujC","promo-header":"vuDC5h","uui-critical":"_4s4haN","uui-info":"InZWIw","uui-success":"CTtlBO","uui-warning":"Q-WJa7","uui-highlight":"SbFe61","uui-typography-size-12":"PBaSw3","uui-typography-size-14":"kOjG1t","uui-typography-size-16":"jbNH0d","root":"pbQKvc","uuiTypography":"uJbYnl","heroHeader":"iJTujC","promoHeader":"vuDC5h","uuiCritical":"_4s4haN","uuiInfo":"InZWIw","uuiSuccess":"CTtlBO","uuiWarning":"Q-WJa7","uuiHighlight":"SbFe61","uuiTypographySize12":"PBaSw3","uuiTypographySize14":"kOjG1t","uuiTypographySize16":"jbNH0d"};
 
 function applyRadioInputMods(mods) {
     return [
-        css$1p.root,
+        css$1q.root,
         `uui-size-${mods.size || settings.sizes.defaults.radioInput}`,
         'uui-radio-input-container',
         'uui-color-primary',
@@ -752,11 +771,11 @@ function applyRadioInputMods(mods) {
 }
 const RadioInput = /* @__PURE__ */withMods(RadioInput$1, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : ForwardRef$A }));
 
-var css$1o = {"root":"xIBqoA"};
+var css$1p = {"root":"ZRH9cY"};
 
 function applySwitchMods(mods) {
     return [
-        css$1o.root,
+        css$1p.root,
         `uui-size-${mods.size || settings.sizes.defaults.switch}`,
         'uui-color-primary',
     ];
@@ -820,7 +839,7 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var textInputCss = {"uui-typography":"hoUcuD","hero-header":"HLEk0r","promo-header":"zzI5FN","uui-critical":"IkncSN","uui-info":"cCrfvX","uui-success":"_0RpwVs","uui-warning":"z1k3bm","uui-highlight":"jqFIOT","uui-typography-size-12":"_3AEtX4","uui-typography-size-14":"a-7LLT","uui-typography-size-16":"VrqTn3","root":"tPNWOb","mode-form":"d-Tyuy","mode-inline":"nNXYGT","mode-cell":"_4jFNRn","uuiTypography":"hoUcuD","heroHeader":"HLEk0r","promoHeader":"zzI5FN","uuiCritical":"IkncSN","uuiInfo":"cCrfvX","uuiSuccess":"_0RpwVs","uuiWarning":"z1k3bm","uuiHighlight":"jqFIOT","uuiTypographySize12":"_3AEtX4","uuiTypographySize14":"a-7LLT","uuiTypographySize16":"VrqTn3","modeForm":"d-Tyuy","modeInline":"nNXYGT","modeCell":"_4jFNRn"};
+var textInputCss = {"uui-typography":"pVS-sF","hero-header":"mCEgin","promo-header":"_2OTLgm","uui-critical":"FlrKsi","uui-info":"_--OeNo","uui-success":"cHlf0E","uui-warning":"g45Sjk","uui-highlight":"KkdBYT","uui-typography-size-12":"qKjMFO","uui-typography-size-14":"ryMt5D","uui-typography-size-16":"_-8c8gS","root":"tpd9k0","mode-form":"je1CdM","mode-inline":"doSyGv","mode-cell":"zx-kpK","uuiTypography":"pVS-sF","heroHeader":"mCEgin","promoHeader":"_2OTLgm","uuiCritical":"FlrKsi","uuiInfo":"_--OeNo","uuiSuccess":"cHlf0E","uuiWarning":"g45Sjk","uuiHighlight":"KkdBYT","uuiTypographySize12":"qKjMFO","uuiTypographySize14":"ryMt5D","uuiTypographySize16":"_-8c8gS","modeForm":"je1CdM","modeInline":"doSyGv","modeCell":"zx-kpK"};
 
 const DEFAULT_MODE$3 = EditMode.FORM;
 function applyTextInputMods(mods) {
@@ -846,22 +865,22 @@ const SearchInput = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         } })));
 });
 
-var css$1n = {"root":"OsKstH"};
+var css$1o = {"root":"_0LKW--"};
 
-const ControlGroup = /* @__PURE__ */withMods(ControlGroup$1, () => [css$1n.root]);
+const ControlGroup = /* @__PURE__ */withMods(ControlGroup$1, () => [css$1o.root, 'uui-control-group']);
 
 function MultiSwitchComponent(props, ref) {
     return (React.createElement(ControlGroup, { ref: ref, rawProps: Object.assign(Object.assign({}, props.rawProps), { role: 'tablist', 'aria-invalid': props.isInvalid, 'aria-required': props.isRequired, 'aria-disabled': props.isDisabled, 'aria-readonly': props.isReadonly }) }, props.items.map((item, index) => (React.createElement(Button, Object.assign({}, props, item, { isDisabled: props.isDisabled, key: index + '-' + item.id, onClick: () => props.onValueChange(item.id), fill: props.value === item.id ? 'solid' : 'outline', color: props.color, size: props.size, rawProps: { 'aria-current': props.value === item.id, role: 'tab' } }))))));
 }
 const MultiSwitch = /* @__PURE__ */React.forwardRef(MultiSwitchComponent);
 
-var css$1m = {"uui-typography":"QJj6IV","hero-header":"NaFeUx","promo-header":"ADLOLk","uui-critical":"yw2lHV","uui-info":"_1tDOjp","uui-success":"Z5YLfa","uui-warning":"_33WupO","uui-highlight":"_--VAra","uui-typography-size-12":"BUjB3y","uui-typography-size-14":"xfalnZ","uui-typography-size-16":"vXcP-P","root":"tSJ4PF","mode-form":"OYQpnA","mode-cell":"etCllf","uuiTypography":"QJj6IV","heroHeader":"NaFeUx","promoHeader":"ADLOLk","uuiCritical":"yw2lHV","uuiInfo":"_1tDOjp","uuiSuccess":"Z5YLfa","uuiWarning":"_33WupO","uuiHighlight":"_--VAra","uuiTypographySize12":"BUjB3y","uuiTypographySize14":"xfalnZ","uuiTypographySize16":"vXcP-P","modeForm":"OYQpnA","modeCell":"etCllf"};
+var css$1n = {"uui-typography":"ciPUQF","hero-header":"nhRrkT","promo-header":"WLhj8e","uui-critical":"q150ZZ","uui-info":"iSqHZR","uui-success":"RE-u8S","uui-warning":"j47Bgy","uui-highlight":"qJmBUJ","uui-typography-size-12":"vZa2DQ","uui-typography-size-14":"_6AKohz","uui-typography-size-16":"EkSKCw","root":"Gm24wJ","mode-form":"I9-Tit","mode-cell":"z088yj","uuiTypography":"ciPUQF","heroHeader":"nhRrkT","promoHeader":"WLhj8e","uuiCritical":"q150ZZ","uuiInfo":"iSqHZR","uuiSuccess":"RE-u8S","uuiWarning":"j47Bgy","uuiHighlight":"qJmBUJ","uuiTypographySize12":"vZa2DQ","uuiTypographySize14":"_6AKohz","uuiTypographySize16":"EkSKCw","modeForm":"I9-Tit","modeCell":"z088yj"};
 
 const DEFAULT_MODE$2 = EditMode.FORM;
 function applyNumericInputMods(mods) {
     return [
         textInputCss.root,
-        css$1m.root,
+        css$1n.root,
         `uui-size-${mods.size || settings.sizes.defaults.numericInput}`,
         textInputCss['mode-' + (mods.mode || DEFAULT_MODE$2)],
     ];
@@ -876,15 +895,15 @@ const NumericInput = /* @__PURE__ */withMods(NumericInput$1, applyNumericInputMo
     };
 });
 
-var css$1l = {"uui-typography":"lu1N7m","hero-header":"_2VTLhp","promo-header":"Lg2Lee","uui-critical":"gtOL9m","uui-info":"Ny1r7E","uui-success":"SN0jrk","uui-warning":"ljNBnk","uui-highlight":"G-nfwY","uui-typography-size-12":"_2X4n7U","uui-typography-size-14":"qSNtuw","uui-typography-size-16":"-XTM-B","root":"e8Wptd","mode-form":"URO--P","mode-cell":"uJeoMu","mode-inline":"_0ARVZt","uuiTypography":"lu1N7m","heroHeader":"_2VTLhp","promoHeader":"Lg2Lee","uuiCritical":"gtOL9m","uuiInfo":"Ny1r7E","uuiSuccess":"SN0jrk","uuiWarning":"ljNBnk","uuiHighlight":"G-nfwY","uuiTypographySize12":"_2X4n7U","uuiTypographySize14":"qSNtuw","uuiTypographySize16":"-XTM-B","modeForm":"URO--P","modeCell":"uJeoMu","modeInline":"_0ARVZt"};
+var css$1m = {"uui-typography":"l6ZqIK","hero-header":"TPwPit","promo-header":"MLmpQy","uui-critical":"BogZTk","uui-info":"x0-wAD","uui-success":"cw17RX","uui-warning":"xrfO9g","uui-highlight":"ySwAAH","uui-typography-size-12":"InfUKw","uui-typography-size-14":"xXFVJe","uui-typography-size-16":"NPQLGP","root":"-gEmdq","mode-form":"-YQGA2","mode-cell":"b1Ff1I","mode-inline":"fjd2sh","uuiTypography":"l6ZqIK","heroHeader":"TPwPit","promoHeader":"MLmpQy","uuiCritical":"BogZTk","uuiInfo":"x0-wAD","uuiSuccess":"cw17RX","uuiWarning":"xrfO9g","uuiHighlight":"ySwAAH","uuiTypographySize12":"InfUKw","uuiTypographySize14":"xXFVJe","uuiTypographySize16":"NPQLGP","modeForm":"-YQGA2","modeCell":"b1Ff1I","modeInline":"fjd2sh"};
 
 const DEFAULT_MODE$1 = EditMode.FORM;
 function applyTextAreaMods(mods) {
     return [
-        css$1l.root,
+        css$1m.root,
         'uui-textarea',
         'uui-size-' + (mods.size || settings.sizes.defaults.textArea),
-        css$1l['mode-' + (mods.mode || DEFAULT_MODE$1)],
+        css$1m['mode-' + (mods.mode || DEFAULT_MODE$1)],
     ];
 }
 const TextArea = /* @__PURE__ */withMods(TextArea$1, applyTextAreaMods, (props) => {
@@ -977,16 +996,16 @@ var SvgNotificationInfoFill = function SvgNotificationInfoFill(props, ref) {
 };
 var ForwardRef$w = /*#__PURE__*/forwardRef(SvgNotificationInfoFill);
 
-var css$1k = {"uui-typography":"CRLtjn","hero-header":"kdx398","promo-header":"DSB9Ok","uui-critical":"g-325s","uui-info":"j5iDMJ","uui-success":"F65OcN","uui-warning":"mB5KBw","uui-highlight":"mRBWwL","uui-typography-size-12":"yyhIpS","uui-typography-size-14":"_3L6YtE","uui-typography-size-16":"PBX0gy","root":"n6aX6o","icon-wrapper":"dCLSBt","alert-wrapper":"_3t9QzA","size-48":"ZTJ0FV","size-36":"_4uvuc1","action-wrapper":"QbLC19","action-icon":"AztB5l","action-link":"ch-C-X","close-icon":"_6-KKdY","main-path":"t7VdWe","content":"DzuYZ-","uuiTypography":"CRLtjn","heroHeader":"kdx398","promoHeader":"DSB9Ok","uuiCritical":"g-325s","uuiInfo":"j5iDMJ","uuiSuccess":"F65OcN","uuiWarning":"mB5KBw","uuiHighlight":"mRBWwL","uuiTypographySize12":"yyhIpS","uuiTypographySize14":"_3L6YtE","uuiTypographySize16":"PBX0gy","iconWrapper":"dCLSBt","alertWrapper":"_3t9QzA","size48":"ZTJ0FV","size36":"_4uvuc1","actionWrapper":"QbLC19","actionIcon":"AztB5l","actionLink":"ch-C-X","closeIcon":"_6-KKdY","mainPath":"t7VdWe"};
+var css$1l = {"uui-typography":"PMJG-b","hero-header":"O-SC5Z","promo-header":"gsbmdn","uui-critical":"VKPTEA","uui-info":"eCXqCl","uui-success":"_9zjZG-","uui-warning":"jCBUMD","uui-highlight":"JLJ65V","uui-typography-size-12":"_50xFx3","uui-typography-size-14":"aTWZYi","uui-typography-size-16":"U4Od2w","root":"y3WfNT","icon-wrapper":"_3-4P0p","alert-wrapper":"_5fhSly","size-48":"a2K7ZG","size-36":"ouOP9C","action-wrapper":"JdZtRw","action-icon":"siFkBM","action-link":"zJ43Fs","close-icon":"Fu4aiV","main-path":"wClHGr","content":"pRlo3t","uuiTypography":"PMJG-b","heroHeader":"O-SC5Z","promoHeader":"gsbmdn","uuiCritical":"VKPTEA","uuiInfo":"eCXqCl","uuiSuccess":"_9zjZG-","uuiWarning":"jCBUMD","uuiHighlight":"JLJ65V","uuiTypographySize12":"_50xFx3","uuiTypographySize14":"aTWZYi","uuiTypographySize16":"U4Od2w","iconWrapper":"_3-4P0p","alertWrapper":"_5fhSly","size48":"a2K7ZG","size36":"ouOP9C","actionWrapper":"JdZtRw","actionIcon":"siFkBM","actionLink":"zJ43Fs","closeIcon":"Fu4aiV","mainPath":"wClHGr"};
 
-const Alert = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("div", Object.assign({ role: "alert", ref: ref, className: cx('uui-alert', css$1k.root, css$1k.alertWrapper, props.color && `uui-color-${props.color}`, props.cx, (props.size === '36' ? css$1k.size36 : css$1k.size48)) }, props.rawProps),
-    React.createElement("div", { className: css$1k.mainPath },
-        props.icon && (React.createElement("div", { className: css$1k.iconWrapper },
-            React.createElement(IconContainer, { icon: props.icon, cx: css$1k.actionIcon }))),
-        React.createElement("div", { className: css$1k.content },
+const Alert = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("div", Object.assign({ role: "alert", ref: ref, className: cx('uui-alert', css$1l.root, css$1l.alertWrapper, props.color && `uui-color-${props.color}`, props.cx, (props.size === '36' ? css$1l.size36 : css$1l.size48)) }, props.rawProps),
+    React.createElement("div", { className: css$1l.mainPath },
+        props.icon && (React.createElement("div", { className: css$1l.iconWrapper },
+            React.createElement(IconContainer, { icon: props.icon, cx: css$1l.actionIcon }))),
+        React.createElement("div", { className: css$1l.content },
             props.children,
-            props.actions && (React.createElement("div", { className: css$1k.actionWrapper }, props.actions.map((action) => (React.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$1k.actionLink, size: (props === null || props === void 0 ? void 0 : props.size) === '36' ? '24' : '30' })))))),
-        props.onClose && React.createElement(IconButton, { icon: ForwardRef$Q, color: "neutral", onClick: props.onClose, cx: css$1k.closeIcon })))));
+            props.actions && (React.createElement("div", { className: css$1l.actionWrapper }, props.actions.map((action) => (React.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$1l.actionLink, size: (props === null || props === void 0 ? void 0 : props.size) === '36' ? '24' : '30' })))))),
+        props.onClose && React.createElement(IconButton, { icon: ForwardRef$Q, color: "neutral", onClick: props.onClose, cx: css$1l.closeIcon })))));
 const WarningAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$y, color: "warning", ref: ref }, props)));
 const SuccessAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$z, color: "success", ref: ref }, props)));
 const HintAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$w, color: "info", ref: ref }, props)));
@@ -994,18 +1013,18 @@ const ErrorAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createE
 
 const Dropdown = /* @__PURE__ */withMods(Dropdown$1);
 
-var css$1j = {"root":"oQc8rz"};
+var css$1k = {"root":"XFl9F-"};
 
 function applyDropdownContainerMods(mods) {
     return [
-        css$1j.root,
+        css$1k.root,
         mods.vPadding && `vPadding-${mods.vPadding}`,
         mods.padding && `padding-${mods.padding}`,
     ];
 }
 const DropdownContainer = /* @__PURE__ */withMods(uuiComponents.DropdownContainer, applyDropdownContainerMods);
 
-var css$1i = {"uui-typography":"YLRvhu","hero-header":"B7gZMh","promo-header":"PxXsK5","uui-critical":"_1357FN","uui-info":"J3tvz9","uui-success":"v11gtW","uui-warning":"UV7-bf","uui-highlight":"_97xV3R","uui-typography-size-12":"q-gsWR","uui-typography-size-14":"dzDLKF","uui-typography-size-16":"JPH9QA","submenu-root-item-rtl":"XQoKKC","icon-after":"nt-5bW","submenu-root-item":"_6VWPJS","icon-check":"iV-G7v","splitter-root":"cNAfdQ","splitter":"zmlHgz","header-root":"_9-i5JI","item-root":"igZET3","icon":"fjbVqT","link":"Xad3ZZ","indent":"jIMupl","selected-mark":"BbBHFU","uuiTypography":"YLRvhu","heroHeader":"B7gZMh","promoHeader":"PxXsK5","uuiCritical":"_1357FN","uuiInfo":"J3tvz9","uuiSuccess":"v11gtW","uuiWarning":"UV7-bf","uuiHighlight":"_97xV3R","uuiTypographySize12":"q-gsWR","uuiTypographySize14":"dzDLKF","uuiTypographySize16":"JPH9QA","submenuRootItemRtl":"XQoKKC","iconAfter":"nt-5bW","submenuRootItem":"_6VWPJS","iconCheck":"iV-G7v","splitterRoot":"cNAfdQ","headerRoot":"_9-i5JI","itemRoot":"igZET3","selectedMark":"BbBHFU"};
+var css$1j = {"uui-typography":"tHnCx1","hero-header":"FCXIwa","promo-header":"OBTgKD","uui-critical":"CyBap-","uui-info":"aRcBOY","uui-success":"Q-Rjd0","uui-warning":"Bq3WFX","uui-highlight":"-cX8U7","uui-typography-size-12":"HDH3fz","uui-typography-size-14":"pJoBlV","uui-typography-size-16":"uu6jAZ","submenu-root-item-rtl":"zuuDqN","icon-after":"_1JPZz3","submenu-root-item":"gSVcWt","icon-check":"b72yW6","splitter-root":"qy9-We","splitter":"ByAt6-","header-root":"Df-Rn0","item-root":"_2keaAd","icon":"Gu06Zv","link":"QQsoh4","indent":"Rminog","selected-mark":"YW-Elt","uuiTypography":"tHnCx1","heroHeader":"FCXIwa","promoHeader":"OBTgKD","uuiCritical":"CyBap-","uuiInfo":"aRcBOY","uuiSuccess":"Q-Rjd0","uuiWarning":"Bq3WFX","uuiHighlight":"-cX8U7","uuiTypographySize12":"HDH3fz","uuiTypographySize14":"pJoBlV","uuiTypographySize16":"uu6jAZ","submenuRootItemRtl":"zuuDqN","iconAfter":"_1JPZz3","submenuRootItem":"gSVcWt","iconCheck":"b72yW6","splitterRoot":"qy9-We","headerRoot":"Df-Rn0","itemRoot":"_2keaAd","selectedMark":"YW-Elt"};
 
 var IDropdownControlKeys;
 (function (IDropdownControlKeys) {
@@ -1066,17 +1085,17 @@ 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$1i.icon, iconPosition === 'right' ? css$1i.iconAfter : css$1i.iconBefore) }));
+        const iconElement = (React__default.createElement(IconButton, { icon: icon, color: isActive ? 'primary' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: cx$1(css$1j.icon, iconPosition === 'right' ? css$1j.iconAfter : css$1j.iconBefore) }));
         return (React__default.createElement(React__default.Fragment, null,
             isIconBefore && iconElement,
-            React__default.createElement(Text$1, { cx: props.indent && css$1i.indent }, caption),
+            React__default.createElement(Text$1, { cx: props.indent && css$1j.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$1i.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened);
-    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$1i.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(FlexRow$1, { rawProps: {
+    const itemClassNames = cx$1(props.cx, css$1j.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened);
+    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$1j.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(FlexRow$1, { rawProps: {
             tabIndex: isDisabled ? -1 : 0,
             role: 'menuitem',
             onKeyDown: isDisabled ? null : handleOpenDropdown,
@@ -1084,15 +1103,15 @@ const DropdownMenuButton = /* @__PURE__ */React__default.forwardRef((props, ref)
         getMenuButtonContent(),
         isSelected && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(FlexSpacer, null),
-            React__default.createElement(IconContainer, { icon: systemIcons.accept, cx: css$1i.selectedMark })))));
+            React__default.createElement(IconContainer, { icon: systemIcons.accept, cx: css$1j.selectedMark })))));
 });
 function DropdownMenuSplitter(props) {
-    return (React__default.createElement("div", { className: cx$1(props.cx, css$1i.splitterRoot) },
-        React__default.createElement("hr", { className: css$1i.splitter })));
+    return (React__default.createElement("div", { className: cx$1(props.cx, css$1j.splitterRoot) },
+        React__default.createElement("hr", { className: css$1j.splitter })));
 }
 function DropdownMenuHeader(props) {
-    return (React__default.createElement("div", { className: cx$1('uui-dropdown-menu-header', props.cx, css$1i.headerRoot) },
-        React__default.createElement("span", { className: css$1i.header }, props.caption)));
+    return (React__default.createElement("div", { className: cx$1('uui-dropdown-menu-header', props.cx, css$1j.headerRoot) },
+        React__default.createElement("span", { className: css$1j.header }, props.caption)));
 }
 function DropdownSubMenu(props) {
     const subMenuModifiers = [
@@ -1114,7 +1133,7 @@ function DropdownSubMenu(props) {
     const isRtl = (window === null || window === void 0 ? void 0 : window.document.dir) === 'rtl';
     return (React__default.createElement(Dropdown$1, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: isRtl ? 'left-start' : 'right-start', modifiers: subMenuModifiers, renderBody: (dropdownProps) => !props.isDisabled && (React__default.createElement(DropdownMenuBody, Object.assign({ closeOnKey: IDropdownControlKeys.LEFT_ARROW }, props, dropdownProps))), renderTarget: (_a) => {
             var { toggleDropdownOpening } = _a, targetProps = __rest(_a, ["toggleDropdownOpening"]);
-            return (React__default.createElement(DropdownMenuButton, Object.assign({ cx: cx$1(isRtl ? css$1i.submenuRootItemRtl : css$1i.submenuRootItem), icon: systemIcons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
+            return (React__default.createElement(DropdownMenuButton, Object.assign({ cx: cx$1(isRtl ? css$1j.submenuRootItemRtl : css$1j.submenuRootItem), icon: systemIcons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
         } }));
 }
 function DropdownMenuSwitchButton(props) {
@@ -1131,32 +1150,29 @@ function DropdownMenuSwitchButton(props) {
             onHandleValueChange(!isSelected);
         }
     };
-    return (React__default.createElement(FlexRow$1, { cx: cx$1(props.cx, css$1i.itemRoot, isDisabled && uuiMod.disabled), onClick: () => onHandleValueChange(!isSelected), rawProps: { role: 'menuitem', onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 } },
-        icon && React__default.createElement(IconContainer, { icon: icon, cx: css$1i.iconBefore }),
+    return (React__default.createElement(FlexRow$1, { cx: cx$1(props.cx, css$1j.itemRoot, isDisabled && uuiMod.disabled), onClick: () => onHandleValueChange(!isSelected), rawProps: { role: 'menuitem', onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 } },
+        icon && React__default.createElement(IconContainer, { icon: icon, cx: css$1j.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$1h = {"uui-typography":"UlJgu2","hero-header":"KtDdg7","promo-header":"-Wqa3S","uui-critical":"z5dDm3","uui-info":"g9OXJ-","uui-success":"boJriB","uui-warning":"qu9lDf","uui-highlight":"x2W1PT","uui-typography-size-12":"_3v1Y7p","uui-typography-size-14":"nDXkvh","uui-typography-size-16":"mL1330","root":"jKiIgt","mode-block":"bjzeHp","mode-inline":"VEokeu","padding-0":"_1v2Gxp","padding-6":"eV3pFz","padding-12":"GEJdYq","padding-18":"QBVouv","uuiTypography":"UlJgu2","heroHeader":"KtDdg7","promoHeader":"-Wqa3S","uuiCritical":"z5dDm3","uuiInfo":"g9OXJ-","uuiSuccess":"boJriB","uuiWarning":"qu9lDf","uuiHighlight":"x2W1PT","uuiTypographySize12":"_3v1Y7p","uuiTypographySize14":"nDXkvh","uuiTypographySize16":"mL1330","modeBlock":"bjzeHp","modeInline":"VEokeu","padding0":"_1v2Gxp","padding6":"eV3pFz","padding12":"GEJdYq","padding18":"QBVouv"};
+var css$1i = {"uui-typography":"DyjuLb","hero-header":"EWSlpK","promo-header":"OF1tzH","uui-critical":"_4Z7zvA","uui-info":"eIN72N","uui-success":"wqyN0p","uui-warning":"kABoy-","uui-highlight":"ivsJ18","uui-typography-size-12":"E7YHDb","uui-typography-size-14":"Z5wU-M","uui-typography-size-16":"u0sEjd","root":"B3wNKp","mode-block":"khw55M","mode-inline":"_2Tu88U","padding-0":"PkWsB-","padding-6":"BSJ-82","padding-12":"sC2Gx4","padding-18":"BaYnDn","uuiTypography":"DyjuLb","heroHeader":"EWSlpK","promoHeader":"OF1tzH","uuiCritical":"_4Z7zvA","uuiInfo":"eIN72N","uuiSuccess":"wqyN0p","uuiWarning":"kABoy-","uuiHighlight":"ivsJ18","uuiTypographySize12":"E7YHDb","uuiTypographySize14":"Z5wU-M","uuiTypographySize16":"u0sEjd","modeBlock":"khw55M","modeInline":"_2Tu88U","padding0":"PkWsB-","padding6":"BSJ-82","padding12":"sC2Gx4","padding18":"BaYnDn"};
 
-const getMode = (mode) => {
-    return mode || 'block';
-};
 function applyAccordionMods(mods) {
     return [
-        css$1h.root,
-        css$1h['mode-' + getMode(mods.mode)],
-        mods.padding && css$1h['padding-' + mods.padding],
+        css$1i.root,
+        css$1i[`mode-${mods.mode || 'block'}`],
+        mods.padding && css$1i['padding-' + mods.padding],
     ];
 }
 const Accordion = /* @__PURE__ */withMods(uuiComponents.Accordion, applyAccordionMods, (mods) => ({
     dropdownIcon: mods.dropdownIcon !== null && systemIcons.foldingArrow,
 }));
 
-var css$1g = {"uui-typography":"bqENKv","hero-header":"cN-U8P","promo-header":"voV1Hn","uui-critical":"hjyNs5","uui-info":"Y9ttIR","uui-success":"ajnHHG","uui-warning":"GUZTeU","uui-highlight":"NSOAIc","uui-typography-size-12":"o2KKEc","uui-typography-size-14":"Pyw82c","uui-typography-size-16":"eHwAIC","root":"uU7A-o","border-top":"cefRen","border-bottom":"RCLPwV","top-shadow":"_-5xgDw","padding-6":"uTT6Qx","padding-12":"_02DoiB","padding-18":"GniDIv","padding-24":"Nsp3FU","margin-24":"JJuCXh","margin-12":"JsStPD","vPadding-12":"OQsUri","vPadding-18":"-GYZaD","vPadding-24":"WERP7z","vPadding-36":"WTtzFe","vPadding-48":"zSo2S4","spacing-6":"JiXddc","spacing-12":"CloKwR","spacing-18":"tbi-dT","uui-surface-main":"HHhX7e","uuiTypography":"bqENKv","heroHeader":"cN-U8P","promoHeader":"voV1Hn","uuiCritical":"hjyNs5","uuiInfo":"Y9ttIR","uuiSuccess":"ajnHHG","uuiWarning":"GUZTeU","uuiHighlight":"NSOAIc","uuiTypographySize12":"o2KKEc","uuiTypographySize14":"Pyw82c","uuiTypographySize16":"eHwAIC","borderTop":"cefRen","borderBottom":"RCLPwV","topShadow":"_-5xgDw","padding6":"uTT6Qx","padding12":"_02DoiB","padding18":"GniDIv","padding24":"Nsp3FU","margin24":"JJuCXh","margin12":"JsStPD","vPadding12":"OQsUri","vPadding18":"-GYZaD","vPadding24":"WERP7z","vPadding36":"WTtzFe","vPadding48":"zSo2S4","spacing6":"JiXddc","spacing12":"CloKwR","spacing18":"tbi-dT","uuiSurfaceMain":"HHhX7e"};
+var css$1h = {"uui-typography":"_0jAbuc","hero-header":"iozeTp","promo-header":"ZcvPs0","uui-critical":"_45qA6c","uui-info":"-FTf7X","uui-success":"IyLK7Y","uui-warning":"bBe8Y9","uui-highlight":"dtMFxJ","uui-typography-size-12":"bq7bbQ","uui-typography-size-14":"eFexoQ","uui-typography-size-16":"EeNwE-","root":"V07F8U","border-top":"_4nzZq1","border-bottom":"HP0Fcb","top-shadow":"_-0hCEK","padding-6":"_2aYHWt","padding-12":"U2c7U-","padding-18":"yK06l4","padding-24":"_7DwiSL","margin-24":"-P-E-A","margin-12":"_34iKbG","vPadding-12":"_82BmZc","vPadding-18":"T0C8jO","vPadding-24":"uK8wUN","vPadding-36":"Zz8rJB","vPadding-48":"Ms9IKw","spacing-6":"_7Fh8Qs","spacing-12":"ozNo8h","spacing-18":"S9bOmm","uui-surface-main":"eL7dye","uuiTypography":"_0jAbuc","heroHeader":"iozeTp","promoHeader":"ZcvPs0","uuiCritical":"_45qA6c","uuiInfo":"-FTf7X","uuiSuccess":"IyLK7Y","uuiWarning":"bBe8Y9","uuiHighlight":"dtMFxJ","uuiTypographySize12":"bq7bbQ","uuiTypographySize14":"eFexoQ","uuiTypographySize16":"EeNwE-","borderTop":"_4nzZq1","borderBottom":"HP0Fcb","topShadow":"_-0hCEK","padding6":"_2aYHWt","padding12":"U2c7U-","padding18":"yK06l4","padding24":"_7DwiSL","margin24":"-P-E-A","margin12":"_34iKbG","vPadding12":"_82BmZc","vPadding18":"T0C8jO","vPadding24":"uK8wUN","vPadding36":"Zz8rJB","vPadding48":"Ms9IKw","spacing6":"_7Fh8Qs","spacing12":"ozNo8h","spacing18":"S9bOmm","uuiSurfaceMain":"eL7dye"};
 
-const FlexCell = /* @__PURE__ */withMods(FlexCell$1, () => [css$1g.flexCell]);
+const FlexCell = /* @__PURE__ */withMods(FlexCell$1, () => [css$1h.flexCell]);
 
 const FlexRow = /* @__PURE__ */withMods(FlexRow$1, (props) => {
     if (process.env.NODE_ENV !== "production") {
@@ -1165,45 +1181,45 @@ const FlexRow = /* @__PURE__ */withMods(FlexRow$1, (props) => {
         }
     }
     return [
-        css$1g.root,
+        css$1h.root,
         props.size !== null && 'uui-size-' + (props.size || '36'),
-        props.padding && css$1g['padding-' + props.padding],
-        props.vPadding && css$1g['vPadding-' + props.vPadding],
-        props.margin && css$1g['margin-' + props.margin],
-        props.topShadow && css$1g.topShadow,
-        props.borderBottom && css$1g.borderBottom,
-        props.borderTop && css$1g.borderTop,
-        props.spacing && css$1g['spacing-' + props.spacing],
-        props.background && css$1g[`uui-${props.background}`],
+        props.padding && css$1h['padding-' + props.padding],
+        props.vPadding && css$1h['vPadding-' + props.vPadding],
+        props.margin && css$1h['margin-' + props.margin],
+        props.topShadow && css$1h.topShadow,
+        props.borderBottom && css$1h.borderBottom,
+        props.borderTop && css$1h.borderTop,
+        props.spacing && css$1h['spacing-' + props.spacing],
+        props.background && css$1h[`uui-${props.background}`],
     ];
 });
 
-var css$1f = {"root":"ZWdxNf","margin-24":"kb5-jC","padding-12":"IIWxqE","padding-24":"Erboib","shadow":"w09yaU","uui-surface-main":"_6sAlAP","margin24":"kb5-jC","padding12":"IIWxqE","padding24":"Erboib","uuiSurfaceMain":"_6sAlAP"};
+var css$1g = {"root":"_-0E942","margin-24":"zZT5i7","padding-12":"Q0VJx1","padding-24":"QkdTxg","shadow":"Di5Xld","uui-surface-main":"_--AiN4","margin24":"zZT5i7","padding12":"Q0VJx1","padding24":"QkdTxg","uuiSurfaceMain":"_--AiN4"};
 
 const Panel = /* @__PURE__ */withMods(VPanel, (props) => [
     'uui-panel',
-    css$1f.root,
-    props.shadow && css$1f.shadow,
-    props.margin && css$1f['margin-' + props.margin],
-    props.background && css$1f[`uui-${props.background}`],
+    css$1g.root,
+    props.shadow && css$1g.shadow,
+    props.margin && css$1g['margin-' + props.margin],
+    props.background && css$1g[`uui-${props.background}`],
 ]);
 
-var css$1e = {"root":"IbOOaG"};
+var css$1f = {"root":"g0hTH8"};
 
 function applyTooltipMods(mods) {
     return [
-        css$1e.root,
+        css$1f.root,
         `uui-color-${mods.color || 'inverted'}`,
     ];
 }
 const Tooltip = /* @__PURE__ */withMods(uuiComponents.Tooltip, applyTooltipMods);
 
-var css$1d = {"uui-typography":"F5c3hN","hero-header":"W4fCXF","promo-header":"rr-yKU","uui-critical":"gQDiPg","uui-info":"-W6a-W","uui-success":"uqxzce","uui-warning":"I61Q6K","uui-highlight":"raqWxx","uui-typography-size-12":"tR0UFj","uui-typography-size-14":"AZbmA-","uui-typography-size-16":"cwIEt0","root":"rTycD8","uuiTypography":"F5c3hN","heroHeader":"W4fCXF","promoHeader":"rr-yKU","uuiCritical":"gQDiPg","uuiInfo":"-W6a-W","uuiSuccess":"uqxzce","uuiWarning":"I61Q6K","uuiHighlight":"raqWxx","uuiTypographySize12":"tR0UFj","uuiTypographySize14":"AZbmA-","uuiTypographySize16":"cwIEt0"};
+var css$1e = {"uui-typography":"MX-y98","hero-header":"OMzxmd","promo-header":"zEsayJ","uui-critical":"uDz9Uv","uui-info":"u6Q-WS","uui-success":"CqLDe7","uui-warning":"Ry5Eqf","uui-highlight":"cCEdN5","uui-typography-size-12":"zk-bpK","uui-typography-size-14":"cKTaa8","uui-typography-size-16":"_5ijBba","root":"UF341m","uuiTypography":"MX-y98","heroHeader":"OMzxmd","promoHeader":"zEsayJ","uuiCritical":"uDz9Uv","uuiInfo":"u6Q-WS","uuiSuccess":"CqLDe7","uuiWarning":"Ry5Eqf","uuiHighlight":"cCEdN5","uuiTypographySize12":"zk-bpK","uuiTypographySize14":"cKTaa8","uuiTypographySize16":"_5ijBba"};
 
 function applyLabeledInputMods(mods) {
     return [
         'uui-labeled-input',
-        css$1d.root,
+        css$1e.root,
         'uui-size-' + (mods.size || settings.sizes.defaults.labeledInput),
     ];
 }
@@ -1212,7 +1228,7 @@ const LabeledInput = /* @__PURE__ */withMods(uuiComponents.LabeledInput, applyLa
     infoIcon: props.infoIcon || (settings.sizes.labeledInput.fillIcon.includes(props.size) ? ForwardRef$w : ForwardRef$L),
 }));
 
-var css$1c = {"root":"CvfkSR"};
+var css$1d = {"root":"tlUb9Z"};
 
 function RadioGroup(props) {
     const direction = props.direction || 'vertical';
@@ -1221,34 +1237,34 @@ function RadioGroup(props) {
             props.onValueChange(newVal);
         }
     };
-    return (React.createElement("fieldset", Object.assign({ ref: props.forwardedRef, className: cx$1(css$1c.root, directionMode[direction], props.cx), onFocus: props.onFocus, onBlur: props.onBlur }, props.rawProps), props.items.map((i) => {
+    return (React.createElement("fieldset", Object.assign({ ref: props.forwardedRef, className: cx$1(css$1d.root, directionMode[direction], props.cx), onFocus: props.onFocus, onBlur: props.onBlur }, props.rawProps), props.items.map((i) => {
         const restItemProps = __rest(i, ["id", "name", "renderName"]);
         return (React.createElement(RadioInput, Object.assign({ 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$1b = {"root":"TQrQ8c"};
+var css$1c = {"root":"tyh2l2"};
 
 function applyScrollBarsMods() {
     return [
-        css$1b.root, 'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
+        css$1c.root, 'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
     ];
 }
 const ScrollBars = /* @__PURE__ */withMods(ScrollBars$1, applyScrollBarsMods);
 
-var css$1a = {"scroll-container":"FBXhRn","list-container":"hSHAEx","scrollContainer":"FBXhRn","listContainer":"hSHAEx"};
+var css$1b = {"scroll-container":"_0Y2R4G","list-container":"skRcYH","scrollContainer":"_0Y2R4G","listContainer":"skRcYH"};
 
-var css$19 = {"root":"ep5bAU"};
+var css$1a = {"root":"zKxj1u"};
 
-const AvatarStack = /* @__PURE__ */withMods(AvatarStack$1, () => [css$19.root]);
+const AvatarStack = /* @__PURE__ */withMods(AvatarStack$1, () => [css$1a.root]);
 
-var css$18 = {"uui-typography":"j1P3IS","hero-header":"_6JoKRi","promo-header":"aUDSQ-","uui-critical":"aazvdY","uui-info":"_1tZpNx","uui-success":"hRcrI5","uui-warning":"-mmOHI","uui-highlight":"Zo4ijO","uui-typography-size-12":"_0w87cy","uui-typography-size-14":"n-n4NH","uui-typography-size-16":"BT1O-L","root":"VIHY-i","uuiTypography":"j1P3IS","heroHeader":"_6JoKRi","promoHeader":"aUDSQ-","uuiCritical":"aazvdY","uuiInfo":"_1tZpNx","uuiSuccess":"hRcrI5","uuiWarning":"-mmOHI","uuiHighlight":"Zo4ijO","uuiTypographySize12":"_0w87cy","uuiTypographySize14":"n-n4NH","uuiTypographySize16":"BT1O-L"};
+var css$19 = {"uui-typography":"QQT02F","hero-header":"_7xL5v0","promo-header":"TUK0Yv","uui-critical":"Isx5vX","uui-info":"NApKTL","uui-success":"_7EuJxt","uui-warning":"WF1XeS","uui-highlight":"NokLLe","uui-typography-size-12":"tAFKJ8","uui-typography-size-14":"SOXVPP","uui-typography-size-16":"pFNMB8","root":"VH1wMu","uuiTypography":"QQT02F","heroHeader":"_7xL5v0","promoHeader":"TUK0Yv","uuiCritical":"Isx5vX","uuiInfo":"NApKTL","uuiSuccess":"_7EuJxt","uuiWarning":"WF1XeS","uuiHighlight":"NokLLe","uuiTypographySize12":"tAFKJ8","uuiTypographySize14":"SOXVPP","uuiTypographySize16":"pFNMB8"};
 
 const DEFAULT_FILL = 'solid';
 function applyBadgeMods(mods) {
     return [
         'uui-badge',
-        css$18.root,
+        css$19.root,
         `uui-size-${mods.size || settings.sizes.defaults.badge}`,
         `uui-fill-${mods.fill || DEFAULT_FILL}`,
         `uui-color-${mods.color || 'info'}`,
@@ -1266,11 +1282,11 @@ const Badge = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$17 = {"uui-typography":"BW244m","hero-header":"PWo1Aq","promo-header":"CyVAsg","uui-critical":"u8h-vy","uui-info":"_7EKGG7","uui-success":"SckpWg","uui-warning":"ugp-8h","uui-highlight":"R0lxeg","uui-typography-size-12":"s6AcO9","uui-typography-size-14":"YMgPa3","uui-typography-size-16":"vnxbp8","root":"_9Vurah","uuiTypography":"BW244m","heroHeader":"PWo1Aq","promoHeader":"CyVAsg","uuiCritical":"u8h-vy","uuiInfo":"_7EKGG7","uuiSuccess":"SckpWg","uuiWarning":"ugp-8h","uuiHighlight":"R0lxeg","uuiTypographySize12":"s6AcO9","uuiTypographySize14":"YMgPa3","uuiTypographySize16":"vnxbp8"};
+var css$18 = {"uui-typography":"_9DfYYD","hero-header":"_8lChTV","promo-header":"Ub7TX3","uui-critical":"Z2ayWT","uui-info":"mPZILn","uui-success":"pZheNZ","uui-warning":"c-1M5C","uui-highlight":"Ma181W","uui-typography-size-12":"M-WiIU","uui-typography-size-14":"_-8iLxb","uui-typography-size-16":"qeYpiG","root":"CMJd6y","uuiTypography":"_9DfYYD","heroHeader":"_8lChTV","promoHeader":"Ub7TX3","uuiCritical":"Z2ayWT","uuiInfo":"mPZILn","uuiSuccess":"pZheNZ","uuiWarning":"c-1M5C","uuiHighlight":"Ma181W","uuiTypographySize12":"M-WiIU","uuiTypographySize14":"_-8iLxb","uuiTypographySize16":"qeYpiG"};
 
 function applyTagMods(props) {
     return [
-        css$17.root,
+        css$18.root,
         `uui-size-${props.size || settings.sizes.defaults.tag}`,
         `uui-color-${props.color || 'neutral'}`,
         `uui-fill-${props.fill || 'solid'}`,
@@ -1290,10 +1306,10 @@ const Tag = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         props.onClear && !props.isDisabled && (React__default.createElement(IconContainer, { cx: uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
 });
 
-var css$16 = {"root":"_1umNac","uui-spinner":"GC6g-V","uuiSpinner":"GC6g-V"};
+var css$17 = {"root":"wpX2u6","uui-spinner":"AeYkFy","uuiSpinner":"AeYkFy"};
 
 function applySpinnerMods() {
-    return [css$16.root, 'uui-spinner'];
+    return [css$17.root, 'uui-spinner'];
 }
 const Spinner = /* @__PURE__ */withMods(Spinner$1, applySpinnerMods);
 
@@ -1327,57 +1343,57 @@ var SvgNavigationChevronRightOutline = function SvgNavigationChevronRightOutline
 };
 var ForwardRef$u = /*#__PURE__*/forwardRef(SvgNavigationChevronRightOutline);
 
-var css$15 = {"root":"l-ecWB","page":"tmjCUh","spacer":"ThCpZ8","mode-ghost":"iCi5JD","modeGhost":"iCi5JD"};
+var css$16 = {"root":"LgQr41","page":"h-ue9o","spacer":"_6lTnzR","mode-ghost":"rMWHAS","modeGhost":"rMWHAS"};
 
 function Paginator(props) {
-    const renderPaginator = (params) => (React__default.createElement("nav", Object.assign({ role: "navigation", className: cx(css$15.root, 'uui-paginator', `uui-size-${props.size || settings.sizes.defaults.paginator}`) }, params.rawProps),
+    const renderPaginator = (params) => (React__default.createElement("nav", Object.assign({ role: "navigation", className: cx(css$16.root, 'uui-paginator', `uui-size-${props.size || settings.sizes.defaults.paginator}`) }, params.rawProps),
         React__default.createElement(Button, { size: props.size || settings.sizes.defaults.paginator, icon: ForwardRef$v, 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$15.spacer, css$15.page), size: props.size || settings.sizes.defaults.paginator, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1, isDisabled: props.isDisabled }));
+                return (React__default.createElement(Button, { cx: cx(css$16.spacer, css$16.page), size: props.size || settings.sizes.defaults.paginator, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1, isDisabled: props.isDisabled }));
             }
             else {
-                return (React__default.createElement(Button, { cx: cx(css$15[`mode-${!page.isActive && 'ghost'}`], css$15.page), size: props.size || settings.sizes.defaults.paginator, key: page.pageNumber, caption: page.pageNumber, onClick: () => { var _a; return (_a = page.onClick) === null || _a === void 0 ? void 0 : _a.call(page); }, rawProps: { 'aria-current': page.isActive }, fill: (page.isActive && 'outline') || 'ghost', color: "primary", isDisabled: props.isDisabled }));
+                return (React__default.createElement(Button, { cx: cx(css$16[`mode-${!page.isActive && 'ghost'}`], css$16.page), size: props.size || settings.sizes.defaults.paginator, key: page.pageNumber, caption: page.pageNumber, onClick: () => { var _a; return (_a = page.onClick) === null || _a === void 0 ? void 0 : _a.call(page); }, rawProps: { 'aria-current': page.isActive }, fill: (page.isActive && 'outline') || 'ghost', color: "primary", isDisabled: props.isDisabled }));
             }
         }),
         React__default.createElement(Button, { size: props.size || settings.sizes.defaults.paginator, icon: ForwardRef$u, onClick: params.goToNext, isDisabled: params.isLast || props.isDisabled, fill: "outline", color: "secondary" })));
     return React__default.createElement(Paginator$1, Object.assign({}, props, { render: renderPaginator }));
 }
 
-var css$14 = {"root":"p8KDSq","progress-bar":"qgDCs2","progressBar-indeterminate":"bNfyvQ","size-12":"RFury2","size-18":"TRV-y4","size-24":"_926sxG","progressBar":"qgDCs2","progressBarIndeterminate":"bNfyvQ","size12":"RFury2","size18":"TRV-y4","size24":"_926sxG"};
+var css$15 = {"root":"Weqwl7","progress-bar":"XGajMm","progressBar-indeterminate":"FsuhtI","size-12":"ko4vwv","size-18":"UTWsI7","size-24":"_9LEPq7","progressBar":"XGajMm","progressBarIndeterminate":"FsuhtI","size12":"ko4vwv","size18":"UTWsI7","size24":"_9LEPq7"};
 
 const IndeterminateBar = /* @__PURE__ */React.forwardRef((props, ref) => {
-    return (React.createElement("div", { ref: ref, className: cx('uui-indeterminate_bar', props.cx, css$14.root, css$14[`size-${props.size || 12}`]) },
-        React.createElement("div", { className: cx(css$14.progressBar) })));
+    return (React.createElement("div", { ref: ref, className: cx('uui-indeterminate_bar', props.cx, css$15.root, css$15[`size-${props.size || 12}`]) },
+        React.createElement("div", { className: cx(css$15.progressBar) })));
 });
 
-var css$13 = {"root":"ZHTOq3","striped":"Ii-DgG","animate-stripes":"ZIrs8B","size-12":"_9eYfDG","size-18":"Dcfg-u","size-24":"Ob0phb","animateStripes":"ZIrs8B","size12":"_9eYfDG","size18":"Dcfg-u","size24":"Ob0phb"};
+var css$14 = {"root":"ZDxVEa","striped":"Vo5Ms-","animate-stripes":"uh2CtQ","size-12":"Ayaedz","size-18":"P1f-vL","size-24":"ptTFaV","animateStripes":"uh2CtQ","size12":"Ayaedz","size18":"P1f-vL","size24":"ptTFaV"};
 
 const DEFAULT_SIZE = '12';
 function applyProgressBarMods(mods) {
     const size = mods.size || DEFAULT_SIZE;
     return [
-        css$13.root,
-        css$13[`size-${size}`],
-        mods.striped && css$13.striped,
+        css$14.root,
+        css$14[`size-${size}`],
+        mods.striped && css$14.striped,
     ];
 }
 const ProgressBar = /* @__PURE__ */withMods(uuiComponents.ProgressBar, applyProgressBarMods, (props) => ({
     hideLabel: props.hideLabel || props.striped,
 }));
 
-var css$12 = {"root":"yECbM4"};
+var css$13 = {"root":"UD-QPC"};
 
 const IndicatorBar = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { progress } = props;
-    return progress || progress === 0 ? (React.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx(css$12.root, props.cx), hideLabel: true })) : (React.createElement(IndeterminateBar, { ref: ref, cx: cx(css$12.root, props.cx) }));
+    return progress || progress === 0 ? (React.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx(css$13.root, props.cx), hideLabel: true })) : (React.createElement(IndeterminateBar, { ref: ref, cx: cx(css$13.root, props.cx) }));
 });
 
-var css$11 = {"root":"_04N7qj"};
+var css$12 = {"root":"ztzoSG"};
 
 const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
     return (React__default.createElement("div", { ref: ref, className: cx([
-            css$11.root,
+            css$12.root,
             `uui-size-${props.size || settings.sizes.defaults.statusIndicator}`,
             'uui-status_indicator',
             `uui-color-${props.color || 'neutral'}`,
@@ -1388,7 +1404,7 @@ const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
         React__default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
 });
 
-var css$10 = {"drag-handle":"FG0YxZ","icon-container":"V-Jddg","dragHandle":"FG0YxZ","iconContainer":"V-Jddg"};
+var css$11 = {"drag-handle":"zCNLEd","icon-container":"HB-b1h","dragHandle":"zCNLEd","iconContainer":"HB-b1h"};
 
 function DataRowAddons(props) {
     var _a, _b;
@@ -1400,19 +1416,19 @@ function DataRowAddons(props) {
         return settings.sizes.rowAddons.indentWidth[props.size] || settings.sizes.rowAddons.defaults.indentWidth;
     };
     return (React__default.createElement(React__default.Fragment, null,
-        ((_a = row.dnd) === null || _a === void 0 ? void 0 : _a.srcData) && React__default.createElement(DragHandle, { key: "dh", cx: css$10.dragHandle, rawProps: Object.assign({}, props.eventHandlers) }),
+        ((_a = row.dnd) === null || _a === void 0 ? void 0 : _a.srcData) && React__default.createElement(DragHandle, { key: "dh", cx: css$11.dragHandle, rawProps: Object.assign({}, props.eventHandlers) }),
         ((_b = row === null || row === void 0 ? void 0 : row.checkbox) === null || _b === void 0 ? void 0 : _b.isVisible) && (React__default.createElement(Checkbox, { key: "cb", cx: "uui-dr_addons-checkbox", tabIndex: props.tabIndex, size: settings.sizes.rowAddons.checkbox[props.size], value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => { var _a; return (_a = row.onCheck) === null || _a === void 0 ? void 0 : _a.call(row, 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}`), style: { marginInlineStart: getIndent(), width: getWidth() } }, row.isFoldable && (React__default.createElement(IconContainer, { rawProps: {
                 'aria-label': row.isFolded ? 'Unfold' : 'Fold',
                 role: 'button',
             }, key: "icon", icon: ForwardRef$P, cx: [
-                uuiElement.foldingArrow, uuiMarkers.clickable, css$10.iconContainer,
+                uuiElement.foldingArrow, uuiMarkers.clickable, css$11.iconContainer,
             ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), size: settings.sizes.rowAddons.icon[props.size] || settings.sizes.rowAddons.defaults.icon }))))));
 }
 
-var css$$ = {"root":"_9SvpYt"};
+var css$10 = {"root":"oNClxd"};
 
-const Blocker = /* @__PURE__ */withMods(Blocker$1, () => [css$$.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__default.createElement(Spinner, null)) }));
+const Blocker = /* @__PURE__ */withMods(Blocker$1, () => [css$10.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__default.createElement(Spinner, null)) }));
 
 const VirtualList = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef, } = useVirtualList({
@@ -1428,7 +1444,7 @@ const VirtualList = /* @__PURE__ */React.forwardRef((props, ref) => {
         var _a;
         return ((_a = props.renderRows) === null || _a === void 0 ? void 0 : _a.call(props, {
             listContainerRef, estimatedHeight, offsetY, scrollShadows,
-        })) || (React.createElement("div", { className: css$1a.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+        })) || (React.createElement("div", { className: css$1b.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 }));
@@ -1438,7 +1454,7 @@ const VirtualList = /* @__PURE__ */React.forwardRef((props, ref) => {
             return;
         scrollContainerRef.current = scrollbars.container.firstChild;
     }, []);
-    return (React.createElement(ScrollBars, { cx: cx$1(css$1a.scrollContainer, props.cx, {
+    return (React.createElement(ScrollBars, { cx: cx$1(css$1b.scrollContainer, props.cx, {
             [uuiMarkers.scrolledLeft]: scrollShadows.horizontalLeft,
             [uuiMarkers.scrolledRight]: scrollShadows.horizontalRight,
             [uuiMarkers.scrolledTop]: scrollShadows.verticalTop,
@@ -1451,7 +1467,7 @@ const VirtualListView = /* @__PURE__ */React.forwardRef((props, ref) => {
         React.createElement(Blocker, { isEnabled: props.isLoading })));
 });
 
-var css$_ = {"root":"eSPgxO"};
+var css$$ = {"root":"-FfvPK"};
 
 function CheckboxGroup(props) {
     const currentValue = props.value || [];
@@ -1467,62 +1483,16 @@ function CheckboxGroup(props) {
         }
         props.onValueChange(newSelection);
     };
-    return (React.createElement("fieldset", Object.assign({ ref: props.forwardedRef, className: cx$1(css$_.root, directionMode[direction], props.cx) }, props.rawProps), props.items.map((i) => {
+    return (React.createElement("fieldset", Object.assign({ ref: props.forwardedRef, className: cx$1(css$$.root, directionMode[direction], props.cx) }, props.rawProps), props.items.map((i) => {
         const restItemProps = __rest(i, ["id", "name", "renderName"]);
         return (React.createElement(Checkbox, Object.assign({ 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$Z = {"root":"ApaBBR","line-height":"Ni6QdS","font-size":"_2nb4QC","lineHeight":"Ni6QdS","fontSize":"_2nb4QC"};
-
-function applyTextMods(mods) {
-    return [
-        css$Z.root,
-        'uui-text',
-        `uui-size-${mods.size || settings.sizes.defaults.text}`,
-        (mods.size !== 'none' || mods.lineHeight) && css$Z.lineHeight,
-        (mods.size !== 'none' || mods.fontSize) && css$Z.fontSize,
-        `uui-color-${mods.color || 'primary'}`,
-        `uui-font-weight-${mods.fontWeight || '400'}`,
-        `uui-font-style-${mods.fontStyle || 'normal'}`,
-        'uui-typography',
-    ];
-}
-const Text = /* @__PURE__ */withMods(uuiComponents.Text, applyTextMods, (props) => {
-    var _a;
-    if (props.fontSize || props.lineHeight) {
-        const style = {};
-        props.fontSize && (style['--uui-text-font-size'] = `${props.fontSize}px`);
-        props.lineHeight && (style['--uui-text-line-height'] = `${props.lineHeight}px`);
-        return {
-            rawProps: Object.assign({ style: Object.assign(Object.assign({}, style), (_a = props === null || props === void 0 ? void 0 : props.rawProps) === null || _a === void 0 ? void 0 : _a.style) }, props === null || props === void 0 ? void 0 : props.rawProps),
-        };
-    }
-});
-
-var css$Y = {"root":"p4WTiN","loading-word":"_0ibkqa","animated-loading":"svNd9S","skeleton_loading":"WPSnJo","loadingWord":"_0ibkqa","animatedLoading":"svNd9S","skeletonLoading":"WPSnJo"};
-
-const TextPlaceholder = (props) => {
-    const pattern = ' ';
-    const text = React.useMemo(() => {
-        const words = [];
-        for (let i = 0; i < (props.wordsCount || 1); i++) {
-            const lengthWord = Math.floor(Math.random() * 10 + 8);
-            words.push(pattern.repeat(lengthWord));
-        }
-        return words;
-    }, [props.wordsCount]);
-    return (React.createElement("div", Object.assign({ "aria-busy": true, className: cx(css$Y.root, 'uui-text-placeholder') }, props.rawProps), text.map((it, index) => (React.createElement("span", { key: index, className: cx([
-            props.cx, css$Y.loadingWord, !props.isNotAnimated && css$Y.animatedLoading,
-        ]), dangerouslySetInnerHTML: { __html: it } })))));
-};
-
-const RichTextView = /* @__PURE__ */withMods(uuiComponents.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || '14'}`]);
+var css$_ = {"uui-typography":"FUCXyg","hero-header":"Ga-xKu","promo-header":"_9-pY4n","uui-critical":"WvUfMM","uui-info":"ACzlJD","uui-success":"-HTwUf","uui-warning":"gxdOZq","uui-highlight":"DAldhQ","uui-typography-size-12":"_72J-3g","uui-typography-size-14":"eKNsN9","uui-typography-size-16":"_16-Hos","root":"P4aRqW","modal-blocker":"YEU1ei","animateModalBlocker":"vb0B43","modal":"TDvoRu","modal-footer":"czUmdM","modal-header":"C-bf7F","uuiTypography":"FUCXyg","heroHeader":"Ga-xKu","promoHeader":"_9-pY4n","uuiCritical":"WvUfMM","uuiInfo":"ACzlJD","uuiSuccess":"-HTwUf","uuiWarning":"gxdOZq","uuiHighlight":"DAldhQ","uuiTypographySize12":"_72J-3g","uuiTypographySize14":"eKNsN9","uuiTypographySize16":"_16-Hos","modalBlocker":"YEU1ei","modalFooter":"czUmdM","modalHeader":"C-bf7F"};
 
-var css$X = {"uui-typography":"Nn4zWU","hero-header":"X081eD","promo-header":"pFu88Z","uui-critical":"EzJ2Yj","uui-info":"_0h4vxT","uui-success":"sPWWzg","uui-warning":"IEZ8e6","uui-highlight":"kIyM8P","uui-typography-size-12":"kH2DyM","uui-typography-size-14":"R1lpis","uui-typography-size-16":"vNhYgZ","root":"-Mw-EQ","modal-blocker":"sudgOV","animateModalBlocker":"FNW8-u","modal":"O0I32M","modal-footer":"Ild-gz","modal-header":"o9Lk5O","uuiTypography":"Nn4zWU","heroHeader":"X081eD","promoHeader":"pFu88Z","uuiCritical":"EzJ2Yj","uuiInfo":"_0h4vxT","uuiSuccess":"sPWWzg","uuiWarning":"IEZ8e6","uuiHighlight":"kIyM8P","uuiTypographySize12":"kH2DyM","uuiTypographySize14":"R1lpis","uuiTypographySize16":"vNhYgZ","modalBlocker":"sudgOV","modalFooter":"Ild-gz","modalHeader":"o9Lk5O"};
-
-const ModalBlocker = /* @__PURE__ */withMods(ModalBlocker$1, () => [css$X.modalBlocker]);
-const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$X.root, css$X.modal], (props) => {
+const ModalBlocker = /* @__PURE__ */withMods(ModalBlocker$1, () => [css$_.modalBlocker]);
+const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$_.root, css$_.modal], (props) => {
     const width = props.width || settings.sizes.modal.window.defaults.width;
     const height = props.height || 'auto';
     const maxHeight = isMobile() ? '100dvh' : (props.maxHeight || '80dvh');
@@ -1534,8 +1504,8 @@ const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$X.root, cs
 });
 class ModalHeader extends React__default.Component {
     render() {
-        return (React__default.createElement(FlexRow, { padding: this.props.padding || '24', vPadding: "12", borderBottom: this.props.borderBottom, cx: [css$X.root, css$X.modalHeader, this.props.cx], columnGap: "12", rawProps: this.props.rawProps },
-            this.props.title && (React__default.createElement(Text, { size: "48", fontSize: "18", fontWeight: "600" }, this.props.title)),
+        return (React__default.createElement(FlexRow, { padding: this.props.padding || '24', size: null, vPadding: "36", borderBottom: this.props.borderBottom, cx: [css$_.root, css$_.modalHeader, this.props.cx], columnGap: "12", rawProps: this.props.rawProps },
+            this.props.title && (React__default.createElement("div", { className: cx('uui-modal-title', 'uui-typography') }, this.props.title)),
             this.props.children,
             this.props.onClose && React__default.createElement(FlexSpacer, null),
             this.props.onClose && (React__default.createElement(FlexCell, { shrink: 0, width: "auto" },
@@ -1545,8 +1515,8 @@ class ModalHeader extends React__default.Component {
 class ModalFooter extends React__default.Component {
     render() {
         return (React__default.createElement(FlexRow, { columnGap: this.props.columnGap || '12', cx: [
-                css$X.root,
-                css$X.modalFooter,
+                css$_.root,
+                css$_.modalFooter,
                 this.props.cx,
             ], borderTop: this.props.borderTop, padding: this.props.padding || '24', vPadding: this.props.vPadding || '24', rawProps: this.props.rawProps }, this.props.children));
     }
@@ -1708,7 +1678,7 @@ var SvgNotificationHelpFill = function SvgNotificationHelpFill(props, ref) {
 };
 var ForwardRef$t = /*#__PURE__*/forwardRef(SvgNotificationHelpFill);
 
-var css$W = {"uui-typography":"fiSzEP","hero-header":"b-7EnG","promo-header":"_3o9UvH","uui-critical":"_9W85ak","uui-info":"H7N0FX","uui-success":"dNV-ac","uui-warning":"XpHNML","uui-highlight":"OGLcEr","uui-typography-size-12":"SsJR0D","uui-typography-size-14":"IQXIwQ","uui-typography-size-16":"Z-v7Zl","root":"HyNzQQ","icon-wrapper":"HkWs2F","action-wrapper":"bNdDXi","action-link":"ZOCvhS","close-icon":"VSIGDm","main-path":"ppOsMQ","content":"YDCnJt","close-wrapper":"_6tlMcC","notification-wrapper":"cDcp-V","clear-button":"O0082R","uuiTypography":"fiSzEP","heroHeader":"b-7EnG","promoHeader":"_3o9UvH","uuiCritical":"_9W85ak","uuiInfo":"H7N0FX","uuiSuccess":"dNV-ac","uuiWarning":"XpHNML","uuiHighlight":"OGLcEr","uuiTypographySize12":"SsJR0D","uuiTypographySize14":"IQXIwQ","uuiTypographySize16":"Z-v7Zl","iconWrapper":"HkWs2F","actionWrapper":"bNdDXi","actionLink":"ZOCvhS","closeIcon":"VSIGDm","mainPath":"ppOsMQ","closeWrapper":"_6tlMcC","notificationWrapper":"cDcp-V","clearButton":"O0082R"};
+var css$Z = {"uui-typography":"V8MVTR","hero-header":"M8uwTY","promo-header":"QkwCNq","uui-critical":"-nIb6-","uui-info":"qUCUyn","uui-success":"_3tQq-1","uui-warning":"KFA-g1","uui-highlight":"_9JFSVi","uui-typography-size-12":"Z6byay","uui-typography-size-14":"oQnMqV","uui-typography-size-16":"RG11Vi","root":"AsWGeG","icon-wrapper":"iP3HPx","action-wrapper":"hypx8W","action-link":"o2nY2A","close-icon":"-P4kyO","main-path":"hHPGyn","content":"f3la9Q","close-wrapper":"bHPo1T","notification-wrapper":"wvB4J-","clear-button":"Y6F8av","uuiTypography":"V8MVTR","heroHeader":"M8uwTY","promoHeader":"QkwCNq","uuiCritical":"-nIb6-","uuiInfo":"qUCUyn","uuiSuccess":"_3tQq-1","uuiWarning":"KFA-g1","uuiHighlight":"_9JFSVi","uuiTypographySize12":"Z6byay","uuiTypographySize14":"oQnMqV","uuiTypographySize16":"RG11Vi","iconWrapper":"iP3HPx","actionWrapper":"hypx8W","actionLink":"o2nY2A","closeIcon":"-P4kyO","mainPath":"hHPGyn","closeWrapper":"bHPo1T","notificationWrapper":"wvB4J-","clearButton":"Y6F8av"};
 
 const NotificationCard = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const notificationCardNode = React__default.useRef(null);
@@ -1723,15 +1693,15 @@ const NotificationCard = /* @__PURE__ */React__default.forwardRef((props, ref) =
             (_b = notificationCardNode.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', props.refreshTimer);
         };
     }, []);
-    return (React__default.createElement("div", Object.assign({ role: "alert", className: cx('uui-notification_card', props.color && `uui-color-${props.color}`, css$W.root, props.cx), ref: notificationCardNode }, props.rawProps),
-        React__default.createElement("div", { className: css$W.mainPath },
-            props.icon && (React__default.createElement("div", { className: css$W.iconWrapper },
+    return (React__default.createElement("div", Object.assign({ role: "alert", className: cx('uui-notification_card', props.color && `uui-color-${props.color}`, css$Z.root, props.cx), ref: notificationCardNode }, props.rawProps),
+        React__default.createElement("div", { className: css$Z.mainPath },
+            props.icon && (React__default.createElement("div", { className: css$Z.iconWrapper },
                 React__default.createElement(IconContainer, { size: 24, icon: props.icon }))),
-            React__default.createElement("div", { className: css$W.content },
+            React__default.createElement("div", { className: css$Z.content },
                 props.children,
-                props.actions && (React__default.createElement("div", { className: css$W.actionWrapper }, props.actions.map((action) => (React__default.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$W.actionLink, size: "36", rawProps: action.rawProps })))))),
-            props.onClose && (React__default.createElement("div", { className: css$W.closeWrapper },
-                React__default.createElement(IconButton, { icon: ForwardRef$Q, color: "neutral", onClick: props.onClose, cx: css$W.closeIcon }))))));
+                props.actions && (React__default.createElement("div", { className: css$Z.actionWrapper }, props.actions.map((action) => (React__default.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$Z.actionLink, size: "36", rawProps: action.rawProps })))))),
+            props.onClose && (React__default.createElement("div", { className: css$Z.closeWrapper },
+                React__default.createElement(IconButton, { icon: ForwardRef$Q, color: "neutral", onClick: props.onClose, cx: css$Z.closeIcon }))))));
 });
 const WarningNotification = /* @__PURE__ */React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$y, color: "warning" }, props, { ref: ref, cx: props.cx }))));
 const SuccessNotification = /* @__PURE__ */React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$z, color: "success" }, props, { ref: ref, cx: props.cx }))));
@@ -1739,11 +1709,11 @@ const HintNotification = /* @__PURE__ */React__default.forwardRef((props, ref) =
 const ErrorNotification = /* @__PURE__ */React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$x, color: "error" }, props, { ref: ref, cx: props.cx }))));
 function ClearNotification() {
     const uuiCtx = useUuiContext();
-    return (React__default.createElement("div", { className: cx(css$W.notificationWrapper, css$W.clearButton) },
+    return (React__default.createElement("div", { className: cx(css$Z.notificationWrapper, css$Z.clearButton) },
         React__default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
 }
 
-var css$V = {"footer":"IRis2-"};
+var css$Y = {"footer":"nMveUl"};
 
 class ConfirmationModal extends React.Component {
     render() {
@@ -1755,7 +1725,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$V.footer },
+                React.createElement(ModalFooter, { cx: css$Y.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" })))));
     }
@@ -1785,7 +1755,7 @@ function useReliableForceUpdate() {
     return red[1];
 }
 
-var css$U = {"root":"_22Lufq","timepicker-input":"AbFVb3","ltr-always":"_1JPIuw","timepickerInput":"AbFVb3","ltrAlways":"_1JPIuw"};
+var css$X = {"root":"aPLQMU","timepicker-input":"oBjTPN","ltr-always":"bOQMVG","timepickerInput":"oBjTPN","ltrAlways":"bOQMVG"};
 
 const uuiTimePicker = {
     container: 'uui-timepicker-container',
@@ -1824,8 +1794,8 @@ function TimePickerBody(props) {
         const minutesToSubtract = value.minute() % minutesStep === 0 ? minutesStep : value.minute() % minutesStep;
         onMinutesChange(value.subtract(minutesToSubtract, 'm').minute());
     };
-    return (React.createElement("div", Object.assign({ className: cx$1(css$U.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef }, props.rawProps),
-        React.createElement("div", { className: css$U.ltrAlways },
+    return (React.createElement("div", Object.assign({ className: cx$1(css$X.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef }, props.rawProps),
+        React.createElement("div", { className: css$X.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()
@@ -1967,7 +1937,7 @@ function TimePicker(props) {
     };
     const renderInput = (inputProps) => {
         var _a;
-        return (React__default.createElement(TextInput, Object.assign({}, inputProps, { onClick: null, size: props.size || '36', isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$U.root, css$U.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: (_a = props.rawProps) === null || _a === void 0 ? void 0 : _a.input })));
+        return (React__default.createElement(TextInput, Object.assign({}, inputProps, { onClick: null, size: props.size || '36', isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$X.root, css$X.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: (_a = props.rawProps) === null || _a === void 0 ? void 0 : _a.input })));
     };
     const renderBody = (bodyProps) => {
         var _a;
@@ -1978,19 +1948,19 @@ function TimePicker(props) {
     return (React__default.createElement(Dropdown, { renderTarget: (targetProps) => (props.renderTarget ? props.renderTarget(targetProps) : renderInput(targetProps)), renderBody: (bodyProps) => !props.isDisabled && !props.isReadonly && renderBody(bodyProps), onValueChange: !props.isDisabled && !props.isReadonly ? onToggle : null, value: state.isOpen, modifiers: [{ name: 'offset', options: { offset: [0, 6] } }], forwardedRef: props.forwardedRef }));
 }
 
-var css$T = {"root":"l96E5w"};
+var css$W = {"root":"_8ZS4aJ"};
 
 function applyInputAddonMods() {
     return [
-        css$T.root,
+        css$W.root,
     ];
 }
 const InputAddon = /* @__PURE__ */withMods(InputAddon$1, applyInputAddonMods);
 
-var css$S = {"root":"toGbIQ"};
+var css$V = {"root":"KWdxCh"};
 
 function applySliderMods() {
-    return [css$S.root, 'uui-color-neutral'];
+    return [css$V.root, 'uui-color-neutral'];
 }
 const Slider = /* @__PURE__ */withMods(Slider$1, applySliderMods);
 
@@ -2122,7 +2092,7 @@ const getNextYearsList = (currentDate) => {
     return currentDate.add(16, 'year');
 };
 
-var css$R = {"root":"hKy-iY","container":"_9En3Xw"};
+var css$U = {"root":"vmfB3-","container":"YV7DSC"};
 
 const uuiHeader = {
     container: 'uui-datepicker-header-container',
@@ -2199,21 +2169,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$R.root, uuiHeader.container, cx) },
+    return (React.createElement("div", { className: cx(css$U.root, uuiHeader.container, cx) },
         React.createElement("header", { className: uuiHeader.headerNav },
             React.createElement(Button, { icon: navIconLeft || ForwardRef$v, 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 || ForwardRef$u, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
 }
 
-var css$Q = {"uui-typography":"GaJhvH","hero-header":"Sq-Cdg","promo-header":"OTNaDP","uui-critical":"qj-5VR","uui-info":"o3YUYb","uui-success":"l-yI8z","uui-warning":"HvU3Ot","uui-highlight":"OL5EQ0","uui-typography-size-12":"bWvWmn","uui-typography-size-14":"gHowu7","uui-typography-size-16":"dtR99S","root":"QsoJx-","uuiTypography":"GaJhvH","heroHeader":"Sq-Cdg","promoHeader":"OTNaDP","uuiCritical":"qj-5VR","uuiInfo":"o3YUYb","uuiSuccess":"l-yI8z","uuiWarning":"HvU3Ot","uuiHighlight":"OL5EQ0","uuiTypographySize12":"bWvWmn","uuiTypographySize14":"gHowu7","uuiTypographySize16":"dtR99S"};
+var css$T = {"uui-typography":"WeDXbN","hero-header":"D9Wjng","promo-header":"xb6Ef3","uui-critical":"z4M5cZ","uui-info":"jew4Xo","uui-success":"Jvj5S4","uui-warning":"ERzwrA","uui-highlight":"estoUb","uui-typography-size-12":"b0Dd-o","uui-typography-size-14":"Hx-fi-","uui-typography-size-16":"ERZnk7","root":"_5fc7tl","uuiTypography":"WeDXbN","heroHeader":"D9Wjng","promoHeader":"xb6Ef3","uuiCritical":"z4M5cZ","uuiInfo":"jew4Xo","uuiSuccess":"Jvj5S4","uuiWarning":"ERzwrA","uuiHighlight":"estoUb","uuiTypographySize12":"b0Dd-o","uuiTypographySize14":"Hx-fi-","uuiTypographySize16":"ERZnk7"};
 
 function applyDateSelectionMods() {
-    return [css$Q.root, `uui-size-${settings.sizes.defaults.datePicker}`];
+    return [css$T.root, `uui-size-${settings.sizes.defaults.datePicker}`];
 }
 const Calendar = /* @__PURE__ */withMods(Calendar$1, applyDateSelectionMods);
 
-var css$P = {"uui-typography":"U8EvMd","hero-header":"Q5T9VS","promo-header":"p8Q8f-","uui-critical":"xP5rpa","uui-info":"_3Ttw6v","uui-success":"ahITJd","uui-warning":"EWwf55","uui-highlight":"C-8PLv","uui-typography-size-12":"OjkiiU","uui-typography-size-14":"_0icHHo","uui-typography-size-16":"sfoU5K","root":"iwruQV","uuiTypography":"U8EvMd","heroHeader":"Q5T9VS","promoHeader":"p8Q8f-","uuiCritical":"xP5rpa","uuiInfo":"_3Ttw6v","uuiSuccess":"ahITJd","uuiWarning":"EWwf55","uuiHighlight":"C-8PLv","uuiTypographySize12":"OjkiiU","uuiTypographySize14":"_0icHHo","uuiTypographySize16":"sfoU5K"};
+var css$S = {"uui-typography":"_9upb8N","hero-header":"_0AxSGd","promo-header":"bTMJ3d","uui-critical":"Me3Ezc","uui-info":"lJQneT","uui-success":"UVaVgN","uui-warning":"f88Dvd","uui-highlight":"GV3ixr","uui-typography-size-12":"lcIg3e","uui-typography-size-14":"GZPWo3","uui-typography-size-16":"AHJ03R","root":"VVjEjz","uuiTypography":"_9upb8N","heroHeader":"_0AxSGd","promoHeader":"bTMJ3d","uuiCritical":"Me3Ezc","uuiInfo":"lJQneT","uuiSuccess":"UVaVgN","uuiWarning":"f88Dvd","uuiHighlight":"GV3ixr","uuiTypographySize12":"lcIg3e","uuiTypographySize14":"GZPWo3","uuiTypographySize16":"AHJ03R"};
 
 const uuiDatePickerBody = {
     wrapper: 'uui-datepicker-body-wrapper',
@@ -2257,7 +2227,7 @@ function StatelessDatePickerBodyComp({ renderDay, isHoliday, cx: classes, filter
         }
     };
     return (React__default.createElement("div", Object.assign({ ref: ref, className: cx$1(uuiDatePickerBodyBase.container, `uui-size-${settings.sizes.defaults.datePicker}`, classes) }, rawProps),
-        React__default.createElement("div", { className: cx$1(css$P.root, uuiDatePickerBody.wrapper) },
+        React__default.createElement("div", { className: cx$1(css$S.root, uuiDatePickerBody.wrapper) },
             React__default.createElement(DatePickerHeader, { value: {
                     view,
                     month,
@@ -2344,9 +2314,9 @@ function DatePickerComponent(props, ref) {
 }
 const DatePicker = /* @__PURE__ */React__default.forwardRef(DatePickerComponent);
 
-var css$O = {"uui-typography":"_7NYQYQ","hero-header":"Ggs5uz","promo-header":"rOzgDu","uui-critical":"_5L2Vpl","uui-info":"Ssk9pU","uui-success":"Rzq0pU","uui-warning":"N7VvxA","uui-highlight":"oPJmQG","uui-typography-size-12":"txVSGG","uui-typography-size-14":"UDSgfU","uui-typography-size-16":"yB2prB","date-input":"bbLvIz","root":"oA94Ku","separator":"QArlh7","mode-form":"u4-aGl","mode-cell":"_3SsGVy","uuiTypography":"_7NYQYQ","heroHeader":"Ggs5uz","promoHeader":"rOzgDu","uuiCritical":"_5L2Vpl","uuiInfo":"Ssk9pU","uuiSuccess":"Rzq0pU","uuiWarning":"N7VvxA","uuiHighlight":"oPJmQG","uuiTypographySize12":"txVSGG","uuiTypographySize14":"UDSgfU","uuiTypographySize16":"yB2prB","dateInput":"bbLvIz","modeForm":"u4-aGl","modeCell":"_3SsGVy"};
+var css$R = {"uui-typography":"BXNTni","hero-header":"V-Y1BU","promo-header":"_105k3N","uui-critical":"zafOJp","uui-info":"_7N3OMV","uui-success":"DMH0Pd","uui-warning":"ahJVaX","uui-highlight":"R4U-Nr","uui-typography-size-12":"Dxlstm","uui-typography-size-14":"CtHg1L","uui-typography-size-16":"_0-zknv","date-input":"A37kTt","root":"oR1q0Q","separator":"sBKGfF","mode-form":"jXvOcK","mode-cell":"uGWWRa","uuiTypography":"BXNTni","heroHeader":"V-Y1BU","promoHeader":"_105k3N","uuiCritical":"zafOJp","uuiInfo":"_7N3OMV","uuiSuccess":"DMH0Pd","uuiWarning":"ahJVaX","uuiHighlight":"R4U-Nr","uuiTypographySize12":"Dxlstm","uuiTypographySize14":"CtHg1L","uuiTypographySize16":"_0-zknv","dateInput":"A37kTt","modeForm":"jXvOcK","modeCell":"uGWWRa"};
 
-const RangeDatePickerInput = /* @__PURE__ */forwardRef(({ isDisabled, isInvalid, isReadonly, size, disableClear, rawProps, value, inFocus, format, onValueChange, onFocusInput, onBlurInput, onClick, getPlaceholder, filter, id, cx: classes, }, ref) => {
+const RangeDatePickerInput = /* @__PURE__ */forwardRef(({ isDisabled, isInvalid, isReadonly, size, disableClear, rawProps, value, inFocus, format, onValueChange, onFocusInput, onBlurInput, onClick, getPlaceholder, filter, onKeyDown, id, cx: classes, }, ref) => {
     const [inputValue, setInputValue] = useState(toCustomDateRangeFormat(value, format));
     useEffect(() => {
         setInputValue(toCustomDateRangeFormat(value, format));
@@ -2376,15 +2346,17 @@ const RangeDatePickerInput = /* @__PURE__ */forwardRef(({ isDisabled, isInvalid,
         }
     };
     const clearAllowed = !disableClear && inputValue.from && inputValue.to;
-    return (React__default.createElement("div", { ref: ref, className: cx$1(`uui-size-${size || settings.sizes.defaults.rangeDatePicker}`, 'uui-range-date-picker', classes, css$O.root, isDisabled && uuiMod.disabled, isReadonly && uuiMod.readonly, isInvalid && uuiMod.invalid, inFocus && uuiMod.focus) },
-        React__default.createElement(TextInput, { icon: systemIcons.calendar, cx: cx$1(css$O.dateInput, inFocus === 'from' && uuiMod.focus), size: size || settings.sizes.defaults.rangeDatePicker, 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 === null || rawProps === void 0 ? void 0 : rawProps.from, onClick: onClick, onKeyDown: onInputKeyDown, id: id }),
-        React__default.createElement("div", { className: css$O.separator }),
-        React__default.createElement(TextInput, { cx: cx$1(css$O.dateInput, inFocus === 'to' && uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.sizes.defaults.rangeDatePicker, value: inputValue.to || undefined, onCancel: clearAllowed ? () => {
+    return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React__default.createElement("div", { ref: ref, className: cx$1(`uui-size-${size || settings.sizes.defaults.rangeDatePicker}`, 'uui-range-date-picker', classes, css$R.root, isDisabled && uuiMod.disabled, isReadonly && uuiMod.readonly, isInvalid && uuiMod.invalid, inFocus && uuiMod.focus), onKeyDown: onKeyDown },
+        React__default.createElement(TextInput, { icon: systemIcons.calendar, cx: cx$1(css$R.dateInput, inFocus === 'from' && uuiMod.focus), size: size || settings.sizes.defaults.rangeDatePicker, 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 === null || rawProps === void 0 ? void 0 : rawProps.from, onClick: onClick, onKeyDown: onInputKeyDown, id: id }),
+        React__default.createElement("div", { className: css$R.separator }),
+        React__default.createElement(TextInput, { cx: cx$1(css$R.dateInput, inFocus === 'to' && uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.sizes.defaults.rangeDatePicker, value: inputValue.to || undefined, onCancel: clearAllowed ? () => {
                 onValueChange(defaultRangeValue);
             } : 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 === null || rawProps === void 0 ? void 0 : rawProps.to, onClick: onClick, onKeyDown: onInputKeyDown })));
 });
 
-var css$N = {"uui-typography":"_8Gwgoj","hero-header":"_2ju2ec","promo-header":"_0-yDie","uui-critical":"YajF9j","uui-info":"DGwfQG","uui-success":"_12iE7a","uui-warning":"H8TLrO","uui-highlight":"rxFkDr","uui-typography-size-12":"GiwzMC","uui-typography-size-14":"_83MAGN","uui-typography-size-16":"_8HBhpe","root":"rS3uvJ","uuiTypography":"_8Gwgoj","heroHeader":"_2ju2ec","promoHeader":"_0-yDie","uuiCritical":"YajF9j","uuiInfo":"DGwfQG","uuiSuccess":"_12iE7a","uuiWarning":"H8TLrO","uuiHighlight":"rxFkDr","uuiTypographySize12":"GiwzMC","uuiTypographySize14":"_83MAGN","uuiTypographySize16":"_8HBhpe"};
+var css$Q = {"uui-typography":"Rbfk9R","hero-header":"ynkLM4","promo-header":"ESKhqH","uui-critical":"_2zAv8g","uui-info":"kdiI6c","uui-success":"_6Qg8bO","uui-warning":"Wi2jSC","uui-highlight":"hyafyO","uui-typography-size-12":"-R9w-p","uui-typography-size-14":"AL1cYJ","uui-typography-size-16":"g4P1pm","root":"_1yrQYv","uuiTypography":"Rbfk9R","heroHeader":"ynkLM4","promoHeader":"ESKhqH","uuiCritical":"_2zAv8g","uuiInfo":"kdiI6c","uuiSuccess":"_6Qg8bO","uuiWarning":"Wi2jSC","uuiHighlight":"hyafyO","uuiTypographySize12":"-R9w-p","uuiTypographySize14":"AL1cYJ","uuiTypographySize16":"g4P1pm"};
 
 const uuiPresets = {
     container: 'uui-presets-container',
@@ -2395,12 +2367,12 @@ const getPresets = (presets) => {
     return Object.keys(presets).map((key) => (Object.assign(Object.assign({}, presets[key].getRange()), { name: presets[key].name, key }))).sort((a, b) => a.order - b.order);
 };
 function CalendarPresets(props) {
-    return (React.createElement("div", Object.assign({ ref: props.forwardedRef, className: cx$1(uuiPresets.container, css$N.root, props.cx) }, props.rawProps),
+    return (React.createElement("div", Object.assign({ ref: props.forwardedRef, className: cx$1(uuiPresets.container, css$Q.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: "24" })))));
 }
 
-var css$M = {"uui-typography":"fnYhbq","hero-header":"GlarDY","promo-header":"gaKEU-","uui-critical":"_3QrbDV","uui-info":"U4vFH0","uui-success":"RB2E3L","uui-warning":"fmM6b6","uui-highlight":"Bkj9GD","uui-typography-size-12":"TP-d88","uui-typography-size-14":"JLfyZB","uui-typography-size-16":"Db8Xpm","root":"_7dqGWJ","container":"ruFLtD","day-selection":"_6BIyKj","from-picker":"zAaAl9","to-picker":"iibx7s","bodes-wrapper":"FL8UYH","blocker":"PcXgSl","uuiTypography":"fnYhbq","heroHeader":"GlarDY","promoHeader":"gaKEU-","uuiCritical":"_3QrbDV","uuiInfo":"U4vFH0","uuiSuccess":"RB2E3L","uuiWarning":"fmM6b6","uuiHighlight":"Bkj9GD","uuiTypographySize12":"TP-d88","uuiTypographySize14":"JLfyZB","uuiTypographySize16":"Db8Xpm","daySelection":"_6BIyKj","fromPicker":"zAaAl9","toPicker":"iibx7s","bodesWrapper":"FL8UYH"};
+var css$P = {"uui-typography":"r3BCFH","hero-header":"MEPBCT","promo-header":"Waxl6E","uui-critical":"-fUyoR","uui-info":"aSpFzQ","uui-success":"yPVHRn","uui-warning":"hg3CkZ","uui-highlight":"F25MUS","uui-typography-size-12":"hlDJX1","uui-typography-size-14":"tXRgjf","uui-typography-size-16":"KVZJkS","root":"CCEjWU","container":"_2N5JfV","day-selection":"wCubE-","from-picker":"ZuDMrw","to-picker":"MHq9Ro","bodes-wrapper":"xwY0ae","blocker":"tMIryj","uuiTypography":"r3BCFH","heroHeader":"MEPBCT","promoHeader":"Waxl6E","uuiCritical":"-fUyoR","uuiInfo":"aSpFzQ","uuiSuccess":"yPVHRn","uuiWarning":"hg3CkZ","uuiHighlight":"F25MUS","uuiTypographySize12":"hlDJX1","uuiTypographySize14":"tXRgjf","uuiTypographySize16":"KVZJkS","daySelection":"wCubE-","fromPicker":"ZuDMrw","toPicker":"MHq9Ro","bodesWrapper":"xwY0ae"};
 
 const uuiRangeDatePickerBody = {
     inRange: 'uui-range-datepicker-in-range',
@@ -2541,21 +2513,21 @@ function RangeDatePickerBodyComp(props, ref) {
                     });
                 }, presets: presets })));
     };
-    return (React__default.createElement("div", Object.assign({ ref: ref, className: cx$1(css$M.root, uuiDatePickerBodyBase.container, props.cx) }, props.rawProps),
-        React__default.createElement(FlexRow, { cx: [view === 'DAY_SELECTION' && css$M.daySelection, css$M.container], alignItems: "top" },
+    return (React__default.createElement("div", Object.assign({ ref: ref, className: cx$1(css$P.root, uuiDatePickerBodyBase.container, props.cx) }, props.rawProps),
+        React__default.createElement(FlexRow, { cx: [view === 'DAY_SELECTION' && css$P.daySelection, css$P.container], alignItems: "top" },
             React__default.createElement(FlexCell, { width: "auto" },
                 React__default.createElement(FlexRow, null,
-                    React__default.createElement(FlexRow, { cx: css$M.bodesWrapper, alignItems: "top" },
-                        React__default.createElement(StatelessDatePickerBody, Object.assign({ key: "date-picker-body-left", cx: cx$1(css$M.fromPicker) }, from, { onValueChange: (v) => onBodyValueChange(v, 'from'), onMonthChange: (m) => {
+                    React__default.createElement(FlexRow, { cx: css$P.bodesWrapper, alignItems: "top" },
+                        React__default.createElement(StatelessDatePickerBody, Object.assign({ key: "date-picker-body-left", cx: cx$1(css$P.fromPicker) }, from, { onValueChange: (v) => onBodyValueChange(v, 'from'), onMonthChange: (m) => {
                                 setMonth(m);
                             }, onViewChange: (v) => setView(v), filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay || renderDay, isDisabled: view !== 'DAY_SELECTION' && activeMonth === 'to' })),
-                        React__default.createElement(StatelessDatePickerBody, Object.assign({ key: "date-picker-body-right", cx: cx$1(css$M.toPicker) }, to, { onValueChange: (v) => onBodyValueChange(v, 'to'), onMonthChange: (m) => {
+                        React__default.createElement(StatelessDatePickerBody, Object.assign({ key: "date-picker-body-right", cx: cx$1(css$P.toPicker) }, to, { onValueChange: (v) => onBodyValueChange(v, 'to'), onMonthChange: (m) => {
                                 setMonth(m.subtract(1, 'month'));
                             }, onViewChange: (v) => setView(v), filter: props.filter, renderDay: props.renderDay || renderDay, isHoliday: props.isHoliday, isDisabled: view !== 'DAY_SELECTION' && activeMonth === 'from' })),
                         view !== 'DAY_SELECTION' && (React__default.createElement("div", { style: {
                                 left: activeMonth === 'from' ? '50%' : undefined,
                                 right: activeMonth === 'to' ? '50%' : undefined,
-                            }, className: css$M.blocker }))),
+                            }, className: css$P.blocker }))),
                     props.presets && renderPresets(props.presets)),
                 props.renderFooter && props.renderFooter()))));
 }
@@ -2575,7 +2547,7 @@ const getDayCX = (day, selectedDate) => {
     return [cx$1(inRange && uuiRangeDatePickerBody.inRange, isFirst && uuiRangeDatePickerBody.firstDayInRangeWrapper, !inRange && isFirst && uuiRangeDatePickerBody.lastDayInRangeWrapper, isLast && uuiRangeDatePickerBody.lastDayInRangeWrapper, !inRange && isLast && uuiRangeDatePickerBody.firstDayInRangeWrapper, (dayValue === fromValue || dayValue === toValue) && uuiDaySelection.selectedDay)];
 };
 
-var css$L = {"dropdown-container":"_2qdXC1","dropdownContainer":"_2qdXC1"};
+var css$O = {"dropdown-container":"MtKUM1","dropdownContainer":"MtKUM1"};
 
 const modifiers = [{
         name: 'offset',
@@ -2587,6 +2559,7 @@ function RangeDatePickerComponent(props, ref) {
     const context = useUuiContext();
     const [isOpen, setIsOpen] = useState(false);
     const [inFocus, setInFocus] = useState(null);
+    const targetRef = React__default.useRef(null);
     const onValueChange = (newValue) => {
         const fromChanged = (value === null || value === void 0 ? void 0 : value.from) !== (newValue === null || newValue === void 0 ? void 0 : newValue.from);
         const toChanged = (value === null || value === void 0 ? void 0 : value.to) !== (newValue === null || newValue === void 0 ? void 0 : newValue.to);
@@ -2602,6 +2575,10 @@ function RangeDatePickerComponent(props, ref) {
         var _a;
         setIsOpen(newIsOpen);
         (_a = props.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(props, newIsOpen);
+        if (!inFocus && newIsOpen) {
+            setInFocus('from');
+            targetRef.current.querySelector('.uui-input').focus();
+        }
     };
     const onBodyValueChange = (newValue) => {
         var _a;
@@ -2617,7 +2594,10 @@ function RangeDatePickerComponent(props, ref) {
     };
     const renderBody = (renderProps) => {
         var _a;
-        return (React__default.createElement(DropdownContainer, Object.assign({}, renderProps, { cx: cx(css$L.dropdownContainer) }),
+        return (React__default.createElement(DropdownContainer, Object.assign({}, renderProps, { cx: cx(css$O.dropdownContainer), shards: [targetRef], returnFocus: (node) => {
+                console.log('lock', node);
+                return true;
+            } }),
             React__default.createElement(FlexRow, null,
                 React__default.createElement(RangeDatePickerBody, { cx: cx(props.bodyCx), value: {
                         selectedDate: _value,
@@ -2627,33 +2607,83 @@ function RangeDatePickerComponent(props, ref) {
                         return (_a = props.renderFooter) === null || _a === void 0 ? void 0 : _a.call(props, value);
                     }, isHoliday: props.isHoliday, rawProps: (_a = props.rawProps) === null || _a === void 0 ? void 0 : _a.body }))));
     };
+    const handleEscape = (e) => {
+        if (e.key === 'Escape' && isOpen) {
+            e.preventDefault();
+            onOpenChange(false);
+        }
+    };
     return (React__default.createElement(Dropdown$1, { renderTarget: (renderProps) => {
             var _a;
-            return ((_a = props.renderTarget) === null || _a === void 0 ? void 0 : _a.call(props, renderProps)) || (React__default.createElement(RangeDatePickerInput, { id: props.id, ref: renderProps.ref, cx: props.inputCx, onClick: renderProps.onClick, isDisabled: props.isDisabled, isInvalid: props.isInvalid, isReadonly: props.isReadonly, size: props.size, getPlaceholder: props.getPlaceholder, disableClear: props.disableClear, rawProps: props.rawProps, inFocus: inFocus, value: value, format: format, onValueChange: onValueChange, onFocusInput: (e, type) => {
+            return ((_a = props.renderTarget) === null || _a === void 0 ? void 0 : _a.call(props, renderProps)) || (React__default.createElement(RangeDatePickerInput, { id: props.id, ref: (node) => { renderProps.ref(node); targetRef.current = node; }, cx: props.inputCx, onClick: () => renderProps.toggleDropdownOpening(true), isDisabled: props.isDisabled, isInvalid: props.isInvalid, isReadonly: props.isReadonly, size: props.size, getPlaceholder: props.getPlaceholder, disableClear: props.disableClear, rawProps: props.rawProps, inFocus: inFocus, value: value, format: format, onValueChange: onValueChange, onFocusInput: (e, type) => {
                     var _a;
                     (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e, type);
                     setInFocus(type);
-                }, onBlurInput: (e, type) => { var _a; (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e, type); !isOpen && setInFocus(null); } }));
+                }, onBlurInput: (e, type) => { var _a; (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e, type); !isOpen && setInFocus(null); }, onKeyDown: handleEscape }));
         }, renderBody: (renderProps) => renderBody(renderProps), onValueChange: (v) => onOpenChange(v), value: isOpen, modifiers: modifiers, placement: props.placement, forwardedRef: ref }));
 }
 const RangeDatePicker = /* @__PURE__ */React__default.forwardRef(RangeDatePickerComponent);
 
-var css$K = {"root":"ra4YVf","blocker":"JFiwV0","marker":"A--J7n","top":"IeZAGl","bottom":"L8tqRv","left":"uykPbP","right":"_2qk8zY","inside":"ArqBxW"};
+var css$N = {"root":"_5M2TJ2","blocker":"rx5kjB","marker":"w0-6QR","top":"PfqFJD","bottom":"sjp65Q","left":"TF30bU","right":"onyygz","inside":"m0Loz2"};
 
 function DropMarker(props) {
     return props.isDndInProgress
         ? (React.createElement(React.Fragment, null,
-            props.enableBlocker && React.createElement("div", { className: css$K.blocker }),
+            props.enableBlocker && React.createElement("div", { className: css$N.blocker }),
             React.createElement("div", { className: cx([
-                    css$K.root,
-                    css$K.marker,
-                    css$K[props.position],
+                    css$N.root,
+                    css$N.marker,
+                    css$N[props.position],
                     props === null || props === void 0 ? void 0 : props.cx,
                 ]) })))
         : null;
 }
 
-var css$J = {"uui-typography":"S0pzu-","hero-header":"cTtIg3","promo-header":"PdlJ27","uui-critical":"mVcMvG","uui-info":"At5pwq","uui-success":"xlXPEU","uui-warning":"wa-UWw","uui-highlight":"FtutUW","uui-typography-size-12":"_2JUv2S","uui-typography-size-14":"kLasMV","uui-typography-size-16":"Zgo-6m","modal":"jFsOVE","search-wrapper":"N0U45x","no-data":"x35YFA","type-search-to-load-size-24":"Afra06","uuiTypography":"S0pzu-","heroHeader":"cTtIg3","promoHeader":"PdlJ27","uuiCritical":"mVcMvG","uuiInfo":"At5pwq","uuiSuccess":"xlXPEU","uuiWarning":"wa-UWw","uuiHighlight":"FtutUW","uuiTypographySize12":"_2JUv2S","uuiTypographySize14":"kLasMV","uuiTypographySize16":"Zgo-6m","searchWrapper":"N0U45x","noData":"x35YFA","typeSearchToLoadSize24":"Afra06"};
+var css$M = {"root":"Mjo7Bi","line-height":"_8GxBdr","font-size":"incD7r","lineHeight":"_8GxBdr","fontSize":"incD7r"};
+
+function applyTextMods(mods) {
+    return [
+        css$M.root,
+        'uui-text',
+        `uui-size-${mods.size || settings.sizes.defaults.text}`,
+        (mods.size !== 'none' || mods.lineHeight) && css$M.lineHeight,
+        (mods.size !== 'none' || mods.fontSize) && css$M.fontSize,
+        `uui-color-${mods.color || 'primary'}`,
+        `uui-font-weight-${mods.fontWeight || '400'}`,
+        `uui-font-style-${mods.fontStyle || 'normal'}`,
+        'uui-typography',
+    ];
+}
+const Text = /* @__PURE__ */withMods(uuiComponents.Text, applyTextMods, (props) => {
+    var _a;
+    const style = ((_a = props === null || props === void 0 ? void 0 : props.rawProps) === null || _a === void 0 ? void 0 : _a.style) || {};
+    props.fontSize && (style['--uui-text-font-size'] = `${props.fontSize}px`);
+    props.lineHeight && (style['--uui-text-line-height'] = `${props.lineHeight}px`);
+    return {
+        rawProps: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.rawProps), { style: style }),
+    };
+});
+
+var css$L = {"root":"_3biGS-","loading-word":"uXaVMN","animated-loading":"pkYE96","skeleton_loading":"iNlDsj","loadingWord":"uXaVMN","animatedLoading":"pkYE96","skeletonLoading":"iNlDsj"};
+
+const TextPlaceholder = (props) => {
+    const pattern = '&nbsp;';
+    const text = React.useMemo(() => {
+        const words = [];
+        for (let i = 0; i < (props.wordsCount || 1); i++) {
+            const lengthWord = Math.floor(Math.random() * 10 + 8);
+            words.push(pattern.repeat(lengthWord));
+        }
+        return words;
+    }, [props.wordsCount]);
+    return (React.createElement("div", Object.assign({ "aria-busy": true, className: cx(css$L.root, 'uui-text-placeholder') }, props.rawProps), text.map((it, index) => (React.createElement("span", { key: index, className: cx([
+            props.cx, css$L.loadingWord, !props.isNotAnimated && css$L.animatedLoading,
+        ]), dangerouslySetInnerHTML: { __html: it } })))));
+};
+
+const RichTextView = /* @__PURE__ */withMods(uuiComponents.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || '14'}`]);
+
+var css$K = {"uui-typography":"_7ZtltK","hero-header":"_7oUwdM","promo-header":"_2aycM9","uui-critical":"Qy5aUl","uui-info":"xygInV","uui-success":"_92uwUp","uui-warning":"qoKH-r","uui-highlight":"HCJsyM","uui-typography-size-12":"PyLdZK","uui-typography-size-14":"oWk9vM","uui-typography-size-16":"zhwt7t","modal":"wM1jdO","search-wrapper":"N3YZZJ","no-data":"nfTkW0","type-search-to-load-size-24":"v0W0V5","uuiTypography":"_7ZtltK","heroHeader":"_7oUwdM","promoHeader":"_2aycM9","uuiCritical":"Qy5aUl","uuiInfo":"xygInV","uuiSuccess":"_92uwUp","uuiWarning":"qoKH-r","uuiHighlight":"HCJsyM","uuiTypographySize12":"PyLdZK","uuiTypographySize14":"oWk9vM","uuiTypographySize16":"zhwt7t","searchWrapper":"N3YZZJ","noData":"nfTkW0","typeSearchToLoadSize24":"v0W0V5"};
 
 class DataPickerBody extends PickerBodyBase {
     constructor() {
@@ -2672,7 +2702,7 @@ class DataPickerBody extends PickerBodyBase {
             });
         }
         if (this.props.minCharsToSearch && search.length < this.props.minCharsToSearch) {
-            return (React__default.createElement(FlexCell$1, { cx: css$J.noData, grow: 1, textAlign: "center" },
+            return (React__default.createElement(FlexCell$1, { cx: css$K.noData, grow: 1, textAlign: "center" },
                 React__default.createElement(Text, { size: this.props.searchSize }, i18n.dataPickerBody.typeSearchToLoadMessage)));
         }
         if (this.props.rows.length === 0) {
@@ -2687,55 +2717,52 @@ class DataPickerBody extends PickerBodyBase {
             }
             // Default no record found message for 'NOT_FOUND' and "NO_RECORDS" reason
             // TODO: make separate messages for 'NOT_FOUND' and "NO_RECORDS" reason
-            return (React__default.createElement(FlexCell$1, { cx: css$J.noData, grow: 1, textAlign: "center" },
+            return (React__default.createElement(FlexCell$1, { cx: css$K.noData, grow: 1, textAlign: "center" },
                 React__default.createElement(Text, { size: this.props.searchSize }, i18n.dataPickerBody.noRecordsMessage)));
         }
     }
     render() {
         const searchSize = this.getSearchSize();
         return (React__default.createElement(React__default.Fragment, null,
-            this.showSearch() && (React__default.createElement("div", { key: "search", className: css$J.searchWrapper },
+            this.showSearch() && (React__default.createElement("div", { key: "search", className: css$K.searchWrapper },
                 React__default.createElement(FlexCell$1, { grow: 1 },
                     React__default.createElement(SearchInput, Object.assign({ ref: this.searchRef, placeholder: i18n.dataPickerBody.searchPlaceholder }, this.searchLens.toProps(), { onKeyDown: this.searchKeyDown, size: searchSize, debounceDelay: this.props.searchDebounceDelay, rawProps: { dir: 'auto' } }))))),
-            React__default.createElement(FlexRow, { key: "body", cx: cx$1('uui-picker_input-body', css$J[this.props.editMode], css$J[this.props.selectionMode]), rawProps: { style: { maxHeight: this.props.maxHeight, maxWidth: this.props.maxWidth } } }, this.props.rows.length > 0 ? (React__default.createElement(VirtualList, Object.assign({}, this.lens.toProps(), { rows: this.props.rows, rawProps: this.props.rawProps, rowsCount: this.props.rowsCount, isLoading: this.props.isReloading }))) : this.renderEmpty())));
+            React__default.createElement(FlexRow, { key: "body", cx: cx$1('uui-picker_input-body', css$K[this.props.editMode], css$K[this.props.selectionMode]), rawProps: { style: { maxHeight: this.props.maxHeight, maxWidth: this.props.maxWidth } } }, this.props.rows.length > 0 ? (React__default.createElement(VirtualList, Object.assign({}, this.lens.toProps(), { rows: this.props.rows, rawProps: this.props.rawProps, rowsCount: this.props.rowsCount, isLoading: this.props.isReloading }))) : this.renderEmpty())));
     }
 }
 
-var css$I = {"footer":"o4Ghan"};
+var css$J = {"footer":"_3cDF0d"};
 
 function DataPickerFooterImpl(props) {
     const { search, clearSelection, view, showSelected, selectionMode, isSearchTooShort, } = props;
     const size = isMobile() ? settings.sizes.pickerInput.body.mobile.footer.linkButton : props.size;
     const hasSelection = view.getSelectedRowsCount() > 0;
     const rowsCount = view.getListProps().rowsCount;
-    const isEmptyRowsAndHasNoSelection = (rowsCount === 0 && !hasSelection);
     const isSinglePicker = selectionMode === 'single';
     const clearAllText = i18n.pickerInput.clearSelectionButton;
     const clearSingleText = i18n.pickerInput.clearSelectionButtonSingle;
     const selectAllText = i18n.pickerInput.selectAllButton;
-    // show always for multi picker and for single only in case if search not disabled and doesn't searching.
-    const isSearching = search && (search === null || search === void 0 ? void 0 : search.length);
-    const hideFooter = isSearchTooShort || rowsCount === 0 || (isSinglePicker ? (isSearching && props.disableClear) : isSearching);
-    return !hideFooter && (React__default.createElement(FlexRow, { cx: css$I.footer },
+    const isSearching = search === null || search === void 0 ? void 0 : search.length;
+    const hideFooter = isSearchTooShort || rowsCount === 0 || isSearching || (isSinglePicker && props.disableClear);
+    const showClear = !props.disableClear && (isSinglePicker ? true : (!view.selectAll || hasSelection));
+    return !hideFooter && (React__default.createElement(FlexRow, { cx: css$J.footer },
         !isSinglePicker && (React__default.createElement(Switch, { size: settings.sizes.pickerInput.body.dropdown.footer.switch[props.size], value: showSelected.value, isDisabled: !hasSelection, onValueChange: showSelected.onValueChange, label: i18n.pickerInput.showOnlySelectedLabel })),
         React__default.createElement(FlexSpacer, null),
         React__default.createElement(FlexCell, { width: "auto", alignSelf: "center" },
-            view.selectAll && (React__default.createElement(LinkButton, { size: size, caption: hasSelection ? clearAllText : selectAllText, onClick: hasSelection ? clearSelection : () => view.selectAll.onValueChange(true), rawProps: {
-                    'aria-label': hasSelection ? clearAllText : selectAllText,
-                }, isDisabled: isEmptyRowsAndHasNoSelection })),
-            !view.selectAll && (React__default.createElement(LinkButton, { isDisabled: !hasSelection, size: size, caption: isSinglePicker ? clearSingleText : clearAllText, onClick: clearSelection, rawProps: {
-                    'aria-label': isSinglePicker ? clearSingleText : clearAllText,
-                } })))));
+            view.selectAll && !hasSelection && (React__default.createElement(LinkButton, { key: "SelectAll/ClearAll" // We use the same key for these buttons, because we need to leave focus on it after click, so we need to react doesn't remount it.
+                , size: size, caption: selectAllText, onClick: () => view.selectAll.onValueChange(true) })),
+            showClear && (React__default.createElement(LinkButton, { key: "SelectAll/ClearAll" // We use the same key for these buttons, because we need to leave focus on it after click, so we need to react doesn't remount it. Basically it's the same button, but with different caption.
+                , size: size, caption: isSinglePicker ? clearSingleText : clearAllText, onClick: clearSelection, isDisabled: !hasSelection })))));
 }
 const DataPickerFooter = /* @__PURE__ */React__default.memo(DataPickerFooterImpl);
 
-var css$H = {"header":"kfwfsh","title":"OM75ej","close":"PuyNWA"};
+var css$I = {"header":"WzgQhD","title":"fh1W76","close":"_486zLe"};
 
 const DataPickerHeaderImpl = (props) => {
     const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
-    return (React__default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: css$H.header },
-        React__default.createElement(Text, { size: settings.sizes.pickerInput.body.mobile.header.titleSize, cx: css$H.title }, title),
-        React__default.createElement(IconButton, { icon: ForwardRef$Q, onClick: () => { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$H.close })));
+    return (React__default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: css$I.header },
+        React__default.createElement(Text, { size: settings.sizes.pickerInput.body.mobile.header.titleSize, cx: css$I.title }, title),
+        React__default.createElement(IconButton, { icon: ForwardRef$Q, onClick: () => { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$I.close })));
 };
 const DataPickerHeader = /* @__PURE__ */React__default.memo(DataPickerHeaderImpl);
 
@@ -2754,7 +2781,7 @@ var SvgNotificationDoneFill = function SvgNotificationDoneFill(props, ref) {
 };
 var ForwardRef$s = /*#__PURE__*/forwardRef(SvgNotificationDoneFill);
 
-var css$G = {"uui-typography":"zO5ZyH","hero-header":"xEujV5","promo-header":"_70eStQ","uui-critical":"NTRelF","uui-info":"do8RZB","uui-success":"ZHbTaV","uui-warning":"JQtKZW","uui-highlight":"lkZGHu","uui-typography-size-12":"UZ6SGI","uui-typography-size-14":"UOmF5h","uui-typography-size-16":"_-9dNy7","root":"i-lsIL","align-widgets-top":"_2G4E7h","align-widgets-center":"_0BGLBp","icon-container":"iCR5PX","loading-cell":"kREhic","content-wrapper":"i4acDC","render-item":"j7y2i0","icon-wrapper":"iG2U0x","icon-default":"LuG5rc","selected-mark":"S4srOy","uuiTypography":"zO5ZyH","heroHeader":"xEujV5","promoHeader":"_70eStQ","uuiCritical":"NTRelF","uuiInfo":"do8RZB","uuiSuccess":"ZHbTaV","uuiWarning":"JQtKZW","uuiHighlight":"lkZGHu","uuiTypographySize12":"UZ6SGI","uuiTypographySize14":"UOmF5h","uuiTypographySize16":"_-9dNy7","alignWidgetsTop":"_2G4E7h","alignWidgetsCenter":"_0BGLBp","iconContainer":"iCR5PX","loadingCell":"kREhic","contentWrapper":"i4acDC","renderItem":"j7y2i0","iconWrapper":"iG2U0x","iconDefault":"LuG5rc","selectedMark":"S4srOy"};
+var css$H = {"uui-typography":"L3NIYP","hero-header":"-sP389","promo-header":"uTOwKP","uui-critical":"_5T6Gdp","uui-info":"WfDI2J","uui-success":"_---oBV","uui-warning":"MfCl5E","uui-highlight":"Uvidl7","uui-typography-size-12":"jLWdTk","uui-typography-size-14":"pyCjtg","uui-typography-size-16":"eholnY","root":"UECaWi","align-widgets-top":"AVEAk7","align-widgets-center":"_5C4zLQ","icon-container":"StDR2P","loading-cell":"_2v0exp","content-wrapper":"_5K0uOT","render-item":"nxmy10","icon-wrapper":"GlUtUA","icon-default":"qG26OL","selected-mark":"BqhGno","uuiTypography":"L3NIYP","heroHeader":"-sP389","promoHeader":"uTOwKP","uuiCritical":"_5T6Gdp","uuiInfo":"WfDI2J","uuiSuccess":"_---oBV","uuiWarning":"MfCl5E","uuiHighlight":"Uvidl7","uuiTypographySize12":"jLWdTk","uuiTypographySize14":"pyCjtg","uuiTypographySize16":"eholnY","alignWidgetsTop":"AVEAk7","alignWidgetsCenter":"_5C4zLQ","iconContainer":"StDR2P","loadingCell":"_2v0exp","contentWrapper":"_5K0uOT","renderItem":"nxmy10","iconWrapper":"GlUtUA","iconDefault":"qG26OL","selectedMark":"BqhGno"};
 
 function DataPickerCell(props) {
     const ref = React.useRef();
@@ -2762,28 +2789,28 @@ function DataPickerCell(props) {
     if (props.rowProps.isLoading) {
         content = (
         // remove `css.loadingCell` after` removing `margin: 0 3px 3px 0` from `TextPlaceholder` `loadingWord` class styles.
-        React.createElement(Text, { key: "t", size: settings.sizes.pickerInput.body.dropdown.row.cell.text[props.size], cx: css$G.loadingCell },
+        React.createElement(Text, { key: "t", size: settings.sizes.pickerInput.body.dropdown.row.cell.text[props.size], cx: css$H.loadingCell },
             React.createElement(TextPlaceholder, null)));
     }
     else if (props.rowProps.isUnknown) {
         content = (React.createElement(Text, { key: "t", size: settings.sizes.pickerInput.body.dropdown.row.cell.text[props.size] }, "Unknown"));
     }
     else {
-        content = (React.createElement("div", { key: `${props.rowProps.id}`, className: css$G.renderItem },
+        content = (React.createElement("div", { key: `${props.rowProps.id}`, className: css$H.renderItem },
             props.renderItem(props.rowProps.value, props.rowProps),
             React.createElement(FlexSpacer, null),
-            (props.rowProps.isChildrenSelected || props.rowProps.isSelected) && (React.createElement("div", { className: cx$1(css$G.iconWrapper, uuiMod.selected) },
-                React.createElement(IconContainer, { size: settings.sizes.pickerInput.body.dropdown.row.cell.icon[props.size], icon: settings.sizes.pickerInput.body.dropdown.row.cell.isBoldSelectionIcon[props.size] ? ForwardRef$s : ForwardRef$O, cx: props.rowProps.isChildrenSelected ? css$G.iconDefault : css$G.selectedMark, rawProps: { 'aria-label': props.rowProps.isChildrenSelected
+            (props.rowProps.isChildrenSelected || props.rowProps.isSelected) && (React.createElement("div", { className: cx$1(css$H.iconWrapper, uuiMod.selected) },
+                React.createElement(IconContainer, { size: settings.sizes.pickerInput.body.dropdown.row.cell.icon[props.size], icon: settings.sizes.pickerInput.body.dropdown.row.cell.isBoldSelectionIcon[props.size] ? ForwardRef$s : ForwardRef$O, cx: props.rowProps.isChildrenSelected ? css$H.iconDefault : css$H.selectedMark, rawProps: { 'aria-label': props.rowProps.isChildrenSelected
                             ? 'Child is selected'
                             : 'Selected' } })))));
     }
-    const getWrappedContent = () => (React.createElement("div", { className: css$G.contentWrapper }, content));
+    const getWrappedContent = () => (React.createElement("div", { className: css$H.contentWrapper }, content));
     return (React.createElement(FlexCell, { ref: ref, grow: 1, width: 0, minWidth: 0, rawProps: { role: 'cell' }, cx: [
-            css$G.root,
+            css$H.root,
             props.cx,
             'data-picker-cell',
             props.size && `uui-size-${props.size}`,
-            css$G[`align-widgets-${props.alignActions || 'top'}`],
+            css$H[`align-widgets-${props.alignActions || 'top'}`],
         ], style: props.padding && {
             '--uui-data_picker_cell-horizontal-padding': `${props.padding}px`,
         } },
@@ -2791,7 +2818,7 @@ function DataPickerCell(props) {
         getWrappedContent()));
 }
 
-var css$F = {"uui-typography":"_-1eJrd","hero-header":"_4utVDr","promo-header":"ndkxsM","uui-critical":"I6xJuj","uui-info":"_04CXjZ","uui-success":"u11VFP","uui-warning":"d3IhO7","uui-highlight":"hT2qtu","uui-typography-size-12":"wZE9IL","uui-typography-size-14":"jW28JD","uui-typography-size-16":"UDsbZg","picker-row":"_7056oI","uuiTypography":"_-1eJrd","heroHeader":"_4utVDr","promoHeader":"ndkxsM","uuiCritical":"I6xJuj","uuiInfo":"_04CXjZ","uuiSuccess":"u11VFP","uuiWarning":"d3IhO7","uuiHighlight":"hT2qtu","uuiTypographySize12":"wZE9IL","uuiTypographySize14":"jW28JD","uuiTypographySize16":"UDsbZg","pickerRow":"_7056oI"};
+var css$G = {"uui-typography":"KmVaRo","hero-header":"QWFgjX","promo-header":"ju02bk","uui-critical":"gsqesR","uui-info":"XPJP3J","uui-success":"_4bn4vC","uui-warning":"yO0RBs","uui-highlight":"Sfvad5","uui-typography-size-12":"dQu-dv","uui-typography-size-14":"nbU-hc","uui-typography-size-16":"_3ky1k6","picker-row":"Mm40S8","uuiTypography":"KmVaRo","heroHeader":"QWFgjX","promoHeader":"ju02bk","uuiCritical":"gsqesR","uuiInfo":"XPJP3J","uuiSuccess":"_4bn4vC","uuiWarning":"yO0RBs","uuiHighlight":"Sfvad5","uuiTypographySize12":"dQu-dv","uuiTypographySize14":"nbU-hc","uuiTypographySize16":"_3ky1k6","pickerRow":"Mm40S8"};
 
 class DataPickerRow extends React.Component {
     constructor() {
@@ -2801,20 +2828,20 @@ class DataPickerRow extends React.Component {
         };
     }
     render() {
-        return (React.createElement(DataPickerRow$1, Object.assign({}, this.props, { cx: [css$F.pickerRow, this.props.cx], renderContent: this.renderContent })));
+        return (React.createElement(DataPickerRow$1, Object.assign({}, this.props, { cx: [css$G.pickerRow, this.props.cx], renderContent: this.renderContent })));
     }
 }
 
-var css$E = {"uui-typography":"BX5tEK","hero-header":"-DB15v","promo-header":"YuWbHs","uui-critical":"qaUTdF","uui-info":"KiEuZc","uui-success":"DTLqIW","uui-warning":"naJe7H","uui-highlight":"D4aKgS","uui-typography-size-12":"cn2-rP","uui-typography-size-14":"KbFw-s","uui-typography-size-16":"sD681F","done":"a-MwQB","container":"kzfFwC","uuiTypography":"BX5tEK","heroHeader":"-DB15v","promoHeader":"YuWbHs","uuiCritical":"qaUTdF","uuiInfo":"KiEuZc","uuiSuccess":"DTLqIW","uuiWarning":"naJe7H","uuiHighlight":"D4aKgS","uuiTypographySize12":"cn2-rP","uuiTypographySize14":"KbFw-s","uuiTypographySize16":"sD681F"};
+var css$F = {"uui-typography":"_3vPdOB","hero-header":"rMjOH9","promo-header":"j7PqCT","uui-critical":"CV9YxQ","uui-info":"aJFzyJ","uui-success":"nzDhCh","uui-warning":"D302FC","uui-highlight":"agNeVj","uui-typography-size-12":"KWEEbZ","uui-typography-size-14":"XnapgA","uui-typography-size-16":"r46pxT","done":"FIddZU","container":"s8YsgN","uuiTypography":"_3vPdOB","heroHeader":"rMjOH9","promoHeader":"j7PqCT","uuiCritical":"CV9YxQ","uuiInfo":"aJFzyJ","uuiSuccess":"nzDhCh","uuiWarning":"D302FC","uuiHighlight":"agNeVj","uuiTypographySize12":"KWEEbZ","uuiTypographySize14":"XnapgA","uuiTypographySize16":"r46pxT"};
 
 const PickerBodyMobileView = (props) => {
     const isMobileView = isMobile();
     const maxWidth = isMobileView ? 'auto' : props.maxWidth;
     const maxHeight = isMobileView ? 'auto' : props.maxHeight;
-    return (React__default.createElement(DropdownContainer, Object.assign({}, props, { maxWidth: maxWidth, maxHeight: maxHeight, cx: [css$E.container, props.cx], autoFocus: true }),
+    return (React__default.createElement(DropdownContainer, Object.assign({}, props, { maxWidth: maxWidth, maxHeight: maxHeight, cx: [css$F.container, props.cx], autoFocus: true }),
         isMobileView && React__default.createElement(DataPickerHeader, { title: props.title, close: props.onClose }),
         props.children,
-        isMobileView && React__default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => { var _a; return (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$E.done, size: settings.sizes.pickerInput.body.mobile.footer.linkButton })));
+        isMobileView && React__default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => { var _a; return (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$F.done, size: settings.sizes.pickerInput.body.mobile.footer.linkButton })));
 };
 
 var _path$r, _path2$4;
@@ -2839,7 +2866,7 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
 };
 var ForwardRef$r = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
 
-var css$D = {"uui-typography":"v7ZuiC","hero-header":"aZO6qT","promo-header":"pXDbU2","uui-critical":"MNWrTd","uui-info":"_2hCnFg","uui-success":"nelSmY","uui-warning":"k3yFzO","uui-highlight":"pgXJZu","uui-typography-size-12":"_3-xX0y","uui-typography-size-14":"IuM4kC","uui-typography-size-16":"_5p1psP","sub-header-wrapper":"xo-vCY","switch":"_3IwTpR","no-found-modal-container":"ChOr8K","no-found-modal-container-icon":"EfjVXC","no-found-modal-container-text":"rRlEYE","uuiTypography":"v7ZuiC","heroHeader":"aZO6qT","promoHeader":"pXDbU2","uuiCritical":"MNWrTd","uuiInfo":"_2hCnFg","uuiSuccess":"nelSmY","uuiWarning":"k3yFzO","uuiHighlight":"pgXJZu","uuiTypographySize12":"_3-xX0y","uuiTypographySize14":"IuM4kC","uuiTypographySize16":"_5p1psP","subHeaderWrapper":"xo-vCY","$switch$":"_3IwTpR","noFoundModalContainer":"ChOr8K","noFoundModalContainerIcon":"EfjVXC","noFoundModalContainerText":"rRlEYE"};
+var css$E = {"uui-typography":"K7QXPd","hero-header":"YnTL8D","promo-header":"Fejt08","uui-critical":"qwQYDX","uui-info":"DkTwuU","uui-success":"-JgR3p","uui-warning":"iQ2HlF","uui-highlight":"skJunE","uui-typography-size-12":"AmVNf9","uui-typography-size-14":"Q5OJ1g","uui-typography-size-16":"wFbWJY","sub-header-wrapper":"dS880n","switch":"_6dZOdi","no-found-modal-container":"V4ibbJ","no-found-modal-container-icon":"OAQ6UN","no-found-modal-container-text":"_7RUOhC","uuiTypography":"K7QXPd","heroHeader":"YnTL8D","promoHeader":"Fejt08","uuiCritical":"qwQYDX","uuiInfo":"DkTwuU","uuiSuccess":"-JgR3p","uuiWarning":"iQ2HlF","uuiHighlight":"skJunE","uuiTypographySize12":"AmVNf9","uuiTypographySize14":"Q5OJ1g","uuiTypographySize16":"wFbWJY","subHeaderWrapper":"dS880n","$switch$":"_6dZOdi","noFoundModalContainer":"V4ibbJ","noFoundModalContainerIcon":"OAQ6UN","noFoundModalContainerText":"_7RUOhC"};
 
 const mergeHighlightRanges = (ranges) => {
     const mergedRanges = [];
@@ -2906,7 +2933,7 @@ const getHighlightedSearchMatches = (str, search) => {
     return getDecoratedText(str, ranges);
 };
 
-var css$C = {"root":"vd4jvD","column-gap":"_8-Bd0g","multiline":"pzFIeb","text":"jQd3wC","columnGap":"_8-Bd0g"};
+var css$D = {"root":"nmx00p","column-gap":"NcWFQ8","multiline":"-aoT4J","text":"uvN1vd","columnGap":"NcWFQ8"};
 
 function PickerItem(props) {
     var _a;
@@ -2916,13 +2943,13 @@ function PickerItem(props) {
     const { search } = (_a = props.dataSourceState) !== null && _a !== void 0 ? _a : {};
     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$C.root, 'uui-typography', cx] },
-        React.createElement(FlexRow, { size: itemSize, cx: [isMultiline && css$C.multiline, css$C.columnGap], rawProps: { style: { '--uui-picker_item-vertical-padding': `${settings.sizes.pickerInput.body.dropdown.row.cell.item.verticalPadding[itemSize]}px` } } },
+    return (React.createElement(FlexCell, { width: "auto", cx: [css$D.root, 'uui-typography', cx] },
+        React.createElement(FlexRow, { size: itemSize, cx: [isMultiline && css$D.multiline, css$D.columnGap], rawProps: { style: { '--uui-picker_item-vertical-padding': `${settings.sizes.pickerInput.body.dropdown.row.cell.item.verticalPadding[itemSize]}px` } } },
             avatarUrl && (React.createElement(Avatar, { isLoading: isLoading, img: avatarUrl, size: getAvatarSize(itemSize, isMultiline).toString() })),
             icon && React.createElement(IconContainer, { icon: icon }),
             React.createElement(FlexCell, { width: "auto" },
-                title && (React.createElement(Text, { size: itemSize, cx: css$C.text, color: isDisabled ? 'disabled' : 'primary' }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : title)),
-                subtitle && (React.createElement(Text, { size: itemSize, color: isDisabled ? 'disabled' : 'secondary', cx: css$C.text }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : subtitle))))));
+                title && (React.createElement(Text, { size: itemSize, cx: css$D.text, color: isDisabled ? 'disabled' : 'primary' }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : title)),
+                subtitle && (React.createElement(Text, { size: itemSize, color: isDisabled ? 'disabled' : 'secondary', cx: css$D.text }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : subtitle))))));
 }
 function getAvatarSize(size, isMultiline) {
     return settings.sizes.pickerInput.body.dropdown.row.cell.item.avatar[isMultiline ? 'multiline' : 'rest'][size];
@@ -2956,17 +2983,17 @@ function PickerModal(props) {
             React__default.createElement(Button, { color: "primary", caption: i18n.pickerModal.selectButton, onClick: () => props.success(selection) })));
     };
     const renderNotFound = () => {
-        return props.renderNotFound ? (props.renderNotFound({ search: dataSourceState.search, onClose: () => props.success(null) })) : (React__default.createElement("div", { className: css$D.noFoundModalContainer },
-            React__default.createElement(IconContainer, { cx: css$D.noFoundModalContainerIcon, icon: ForwardRef$r }),
-            React__default.createElement(Text, { cx: css$D.noFoundModalContainerText, fontWeight: "600", fontSize: "16", lineHeight: "24", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsMessage),
-            React__default.createElement(Text, { cx: css$D.noFoundModalContainerText, fontSize: "12", lineHeight: "18", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsSubTitle)));
+        return props.renderNotFound ? (props.renderNotFound({ search: dataSourceState.search, onClose: () => props.success(null) })) : (React__default.createElement("div", { className: css$E.noFoundModalContainer },
+            React__default.createElement(IconContainer, { cx: css$E.noFoundModalContainerIcon, icon: ForwardRef$r }),
+            React__default.createElement(Text, { cx: css$E.noFoundModalContainerText, fontWeight: "600", fontSize: "16", lineHeight: "24", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsMessage),
+            React__default.createElement(Text, { cx: css$E.noFoundModalContainerText, fontSize: "12", lineHeight: "18", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsSubTitle)));
     };
     const dataRows = getRows();
     const rows = dataRows.map((row) => renderRow(row));
     return (React__default.createElement(ModalBlocker, Object.assign({}, props),
         React__default.createElement(ModalWindow, { width: 600, height: 700 },
             React__default.createElement(ModalHeader, { title: props.caption || i18n.pickerModal.headerTitle, onClose: () => props.abort() }),
-            React__default.createElement(FlexCell, { cx: css$D.subHeaderWrapper },
+            React__default.createElement(FlexCell, { cx: css$E.subHeaderWrapper },
                 React__default.createElement(FlexRow, { vPadding: "24" },
                     React__default.createElement(SearchInput, Object.assign({}, dataSourceStateLens.prop('search').toProps(), { onKeyDown: (e) => handleDataSourceKeyboard({
                             value: getDataSourceState(),
@@ -2975,20 +3002,20 @@ function PickerModal(props) {
                             rows: dataRows,
                             searchPosition: 'body',
                         }, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder, rawProps: { dir: 'auto' } }))),
-                !isSingleSelect() && (React__default.createElement(Switch, Object.assign({ cx: css$D.switch, size: "18" }, getFooterProps().showSelected, { isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" }))),
+                !isSingleSelect() && (React__default.createElement(Switch, Object.assign({ cx: css$E.switch, size: "18" }, getFooterProps().showSelected, { isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" }))),
                 props.renderFilter && React__default.createElement(FlexCell, { grow: 2 }, props.renderFilter(dataSourceStateLens.prop('filter').toProps()))),
             React__default.createElement(DataPickerBody, Object.assign({}, getListProps(), { value: getDataSourceState(), onValueChange: handleDataSourceValueChange, search: dataSourceStateLens.prop('search').toProps(), showSearch: false, rows: rows, renderNotFound: renderNotFound, editMode: "modal" })),
             React__default.createElement(ModalFooter, { padding: "24", vPadding: "24" }, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$B = {"tooltip":"U1ZOOj"};
+var css$C = {"tooltip":"CQsB6W"};
 
 const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     var _a;
     const tagProps = Object.assign(Object.assign({}, props), { tabIndex: -1, size: settings.sizes.pickerInput.toggler.tag[props.size], caption: ((_a = props.rowProps) === null || _a === void 0 ? void 0 : _a.isLoading) ? React.createElement(TextPlaceholder, null) : props.caption });
     if (props.isCollapsed) {
         const collapsedRows = props.collapsedRows.map((row) => props.getName(row.value)).join(', ');
-        return (React.createElement(Tooltip, { key: "selected", content: collapsedRows, closeDelay: 150, closeOnMouseLeave: "boundary", cx: css$B.tooltip },
+        return (React.createElement(Tooltip, { key: "selected", content: collapsedRows, closeDelay: 150, closeOnMouseLeave: "boundary", cx: css$C.tooltip },
             React.createElement(Tag, Object.assign({ ref: ref, rawProps: { role: 'option' } }, tagProps))));
     }
     else {
@@ -2996,15 +3023,15 @@ const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     }
 });
 
-var css$A = {"uui-typography":"OLHewc","hero-header":"_4GIJ-a","promo-header":"dUXT1T","uui-critical":"fZ7Xi5","uui-info":"IqhE7b","uui-success":"_9xwEbi","uui-warning":"tXu2fY","uui-highlight":"QGUxVM","uui-typography-size-12":"ek59z9","uui-typography-size-14":"NsBggd","uui-typography-size-16":"N3YRol","root":"W04RzG","mode-form":"CVXgbR","mode-cell":"dGcrv0","mode-inline":"GfWIHg","uuiTypography":"OLHewc","heroHeader":"_4GIJ-a","promoHeader":"dUXT1T","uuiCritical":"fZ7Xi5","uuiInfo":"IqhE7b","uuiSuccess":"_9xwEbi","uuiWarning":"tXu2fY","uuiHighlight":"QGUxVM","uuiTypographySize12":"ek59z9","uuiTypographySize14":"NsBggd","uuiTypographySize16":"N3YRol","modeForm":"CVXgbR","modeCell":"dGcrv0","modeInline":"GfWIHg"};
+var css$B = {"uui-typography":"NvmU2F","hero-header":"gGvAZe","promo-header":"izRVKG","uui-critical":"xmU5kH","uui-info":"YBtyuQ","uui-success":"bFEyyO","uui-warning":"ZmgQYS","uui-highlight":"Lv0dG2","uui-typography-size-12":"bmUFtQ","uui-typography-size-14":"CKL5Y7","uui-typography-size-16":"zsUhPG","root":"JiAJ8K","mode-form":"Mk8NjG","mode-cell":"YDKiup","mode-inline":"tSu6mo","uuiTypography":"NvmU2F","heroHeader":"gGvAZe","promoHeader":"izRVKG","uuiCritical":"xmU5kH","uuiInfo":"YBtyuQ","uuiSuccess":"bFEyyO","uuiWarning":"ZmgQYS","uuiHighlight":"Lv0dG2","uuiTypographySize12":"bmUFtQ","uuiTypographySize14":"CKL5Y7","uuiTypographySize16":"zsUhPG","modeForm":"Mk8NjG","modeCell":"YDKiup","modeInline":"tSu6mo"};
 
 const defaultMode = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
     return [
-        css$A.root,
+        css$B.root,
         'uui-picker_toggler',
         `uui-size-${mods.size || settings.sizes.pickerInput.toggler.defaults.size}`,
-        css$A['mode-' + (mods.mode || defaultMode)],
+        css$B['mode-' + (mods.mode || defaultMode)],
     ];
 }
 function PickerTogglerComponent(props, ref) {
@@ -3093,7 +3120,7 @@ function PickerInputComponent(_a, ref) {
 }
 const PickerInput = /* @__PURE__ */React__default.forwardRef(PickerInputComponent);
 
-var css$z = {"row":"Dd8Pbk"};
+var css$A = {"row":"xwLjqb"};
 
 function PickerListItem(props) {
     var _a;
@@ -3111,10 +3138,10 @@ function PickerListItem(props) {
     else {
         component = (React__default.createElement(RadioInput, { label: label, value: props.isSelected, isDisabled: props.isLoading || !props.isSelectable || props.isDisabled, onValueChange: () => props.onSelect(props) }));
     }
-    return (React__default.createElement("div", Object.assign({ role: "option", "aria-selected": props.isSelectable ? props.isSelected : undefined, "aria-busy": props.isLoading, "aria-posinset": props.index + 1 }, (((_a = props.checkbox) === null || _a === void 0 ? void 0 : _a.isVisible) && { 'aria-checked': props.isChecked }), { className: css$z.row }), component));
+    return (React__default.createElement("div", Object.assign({ role: "option", "aria-selected": props.isSelectable ? props.isSelected : undefined, "aria-busy": props.isLoading, "aria-posinset": props.index + 1 }, (((_a = props.checkbox) === null || _a === void 0 ? void 0 : _a.isVisible) && { 'aria-checked': props.isChecked }), { className: css$A.row }), component));
 }
 
-var css$y = {"root":"_0RfXwe"};
+var css$z = {"root":"_8dlJaz"};
 
 function PickerList(props) {
     const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, dataSourceState, getModalTogglerCaption, } = usePickerList(props);
@@ -3137,7 +3164,7 @@ function PickerList(props) {
     const showPicker = viewProps.totalCount == null || viewProps.totalCount > getMaxDefaultItems();
     const renderToggler = props.renderModalToggler || defaultRenderToggler;
     const renderRow = props.renderRow || defaultRenderRow;
-    return (React__default.createElement("div", { className: cx('uui-picker-list', css$y.root) },
+    return (React__default.createElement("div", { className: cx('uui-picker-list', css$z.root) },
         !rows.length
             && (props.noOptionsMessage || (React__default.createElement(Text, { color: "secondary", size: props.size }, "No options available"))),
         rows.map((row) => renderRow(Object.assign(Object.assign({}, row), { isDisabled: props.isDisabled }), dataSourceState)),
@@ -3149,7 +3176,7 @@ function PickerList(props) {
             }, selectedRows)));
 }
 
-var css$x = {"uui-typography":"UKE0Oh","hero-header":"vB6TP4","promo-header":"f9IadE","uui-critical":"A4rNXv","uui-info":"q7niYa","uui-success":"ojHMcm","uui-warning":"_2UcOiN","uui-highlight":"QMBViV","uui-typography-size-12":"MDcnqu","uui-typography-size-14":"L0gODZ","uui-typography-size-16":"QH1bGG","root":"Z13Qp1","wrapper":"yfSjPr","align-widgets-top":"_9MPhzp","align-widgets-center":"cnu9SC","uuiTypography":"UKE0Oh","heroHeader":"vB6TP4","promoHeader":"f9IadE","uuiCritical":"A4rNXv","uuiInfo":"q7niYa","uuiSuccess":"ojHMcm","uuiWarning":"_2UcOiN","uuiHighlight":"QMBViV","uuiTypographySize12":"MDcnqu","uuiTypographySize14":"L0gODZ","uuiTypographySize16":"QH1bGG","alignWidgetsTop":"_9MPhzp","alignWidgetsCenter":"cnu9SC"};
+var css$y = {"uui-typography":"IXIwtn","hero-header":"gcdzix","promo-header":"Zk-yDs","uui-critical":"JuSJiv","uui-info":"yNSKnR","uui-success":"iu2Oku","uui-warning":"enRwuW","uui-highlight":"F3ywWg","uui-typography-size-12":"kxwOA0","uui-typography-size-14":"yTEqEY","uui-typography-size-16":"w-kkFK","root":"wc2P--","wrapper":"aMnK-J","align-widgets-top":"P7DVaa","align-widgets-center":"_7xlRjH","uuiTypography":"IXIwtn","heroHeader":"gcdzix","promoHeader":"Zk-yDs","uuiCritical":"JuSJiv","uuiInfo":"yNSKnR","uuiSuccess":"iu2Oku","uuiWarning":"enRwuW","uuiHighlight":"F3ywWg","uuiTypographySize12":"kxwOA0","uuiTypographySize14":"yTEqEY","uuiTypographySize16":"w-kkFK","alignWidgetsTop":"P7DVaa","alignWidgetsCenter":"_7xlRjH"};
 
 function DataTableCell(initialProps) {
     const props = Object.assign({}, initialProps);
@@ -3183,12 +3210,12 @@ function DataTableCell(initialProps) {
     };
     props.cx = [
         'data-table-cell',
-        css$x.root,
+        css$y.root,
         props.cx,
         'uui-size-' + (props.size || settings.sizes.dataTable.body.row.cell.defaults.size),
         props.isFirstColumn && 'uui-dt-first-column',
         props.isLastColumn && 'uui-dt-last-column',
-        css$x[`align-widgets-${props.alignActions || 'top'}`],
+        css$y[`align-widgets-${props.alignActions || 'top'}`],
         (props.border || isEditable) && 'uui-dt-vertical-cell-border',
     ];
     props.style = {
@@ -3198,7 +3225,7 @@ function DataTableCell(initialProps) {
     return React.createElement(DataTableCell$1, Object.assign({}, props));
 }
 
-var css$w = {"uui-typography":"dmpQGA","hero-header":"fyxkn6","promo-header":"ZNokYn","uui-critical":"uHFarI","uui-info":"Pj4wMI","uui-success":"hfcY00","uui-warning":"gX6H9h","uui-highlight":"_39ugu7","uui-typography-size-12":"RgcCdQ","uui-typography-size-14":"bVje5W","uui-typography-size-16":"f9dhRr","root":"pX6eyn","uuiTypography":"dmpQGA","heroHeader":"fyxkn6","promoHeader":"ZNokYn","uuiCritical":"uHFarI","uuiInfo":"Pj4wMI","uuiSuccess":"hfcY00","uuiWarning":"gX6H9h","uuiHighlight":"_39ugu7","uuiTypographySize12":"RgcCdQ","uuiTypographySize14":"bVje5W","uuiTypographySize16":"f9dhRr"};
+var css$x = {"uui-typography":"RINLW9","hero-header":"_2PKZfb","promo-header":"R-3HsK","uui-critical":"WU4J3e","uui-info":"-sjX4R","uui-success":"yNA-68","uui-warning":"PNNyZ6","uui-highlight":"sLidlb","uui-typography-size-12":"f71kgK","uui-typography-size-14":"_9KcAvl","uui-typography-size-16":"LnifN9","root":"_2p9z-U","uuiTypography":"RINLW9","heroHeader":"_2PKZfb","promoHeader":"R-3HsK","uuiCritical":"WU4J3e","uuiInfo":"-sjX4R","uuiSuccess":"yNA-68","uuiWarning":"PNNyZ6","uuiHighlight":"sLidlb","uuiTypographySize12":"f71kgK","uuiTypographySize14":"_9KcAvl","uuiTypographySize16":"LnifN9"};
 
 // 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.
@@ -3210,11 +3237,11 @@ const renderDropMarkers = (props) => React.createElement(DropMarker, Object.assi
 const propsMods = { renderCell, renderDropMarkers };
 const DataTableRow = /* @__PURE__ */withMods(DataTableRow$1, ({ borderBottom = true, size }) => {
     return [
-        css$w.root, 'uui-dt-vars', borderBottom && 'uui-dt-row-border', `uui-size-${size || settings.sizes.dataTable.body.row.default}`,
+        css$x.root, 'uui-dt-vars', borderBottom && 'uui-dt-row-border', `uui-size-${size || settings.sizes.dataTable.body.row.default}`,
     ];
 }, () => propsMods);
 
-var css$v = {"uui-typography":"OUDph6","hero-header":"_1cHv7I","promo-header":"LUOnKt","uui-critical":"L6gK-S","uui-info":"r0gKrE","uui-success":"AvaCHc","uui-warning":"_3iZ-dJ","uui-highlight":"gCPM-X","uui-typography-size-12":"HzYJ7k","uui-typography-size-14":"zkp62c","uui-typography-size-16":"QZMicN","sorting-panel-container":"_1sN9i6","uuiTypography":"OUDph6","heroHeader":"_1cHv7I","promoHeader":"LUOnKt","uuiCritical":"L6gK-S","uuiInfo":"r0gKrE","uuiSuccess":"AvaCHc","uuiWarning":"_3iZ-dJ","uuiHighlight":"gCPM-X","uuiTypographySize12":"HzYJ7k","uuiTypographySize14":"zkp62c","uuiTypographySize16":"QZMicN","sortingPanelContainer":"_1sN9i6"};
+var css$w = {"uui-typography":"UF-XUO","hero-header":"aE2Ipa","promo-header":"f-laxh","uui-critical":"ODLMd3","uui-info":"_9r-HYP","uui-success":"NzVRhT","uui-warning":"WxLK5f","uui-highlight":"_4C-fbr","uui-typography-size-12":"FxCW9s","uui-typography-size-14":"so2sHN","uui-typography-size-16":"SkgO6s","sorting-panel-container":"KahKEx","uuiTypography":"UF-XUO","heroHeader":"aE2Ipa","promoHeader":"f-laxh","uuiCritical":"ODLMd3","uuiInfo":"_9r-HYP","uuiSuccess":"NzVRhT","uuiWarning":"WxLK5f","uuiHighlight":"_4C-fbr","uuiTypographySize12":"FxCW9s","uuiTypographySize14":"so2sHN","uuiTypographySize16":"SkgO6s","sortingPanelContainer":"KahKEx"};
 
 var _path$q;
 function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
@@ -3249,7 +3276,7 @@ var ForwardRef$p = /*#__PURE__*/forwardRef(SvgTableSortDescOutline);
 const SortingPanelImpl = ({ sortDirection, onSort }) => {
     const sortAsc = useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
     const sortDesc = useCallback(() => onSort(sortDirection === 'desc' ? undefined : 'desc'), [onSort]);
-    return (React__default.createElement(FlexCell, { cx: cx$1(css$v.sortingPanelContainer, 'uui-dropdownMenu-body') },
+    return (React__default.createElement(FlexCell, { cx: cx$1(css$w.sortingPanelContainer, 'uui-dropdownMenu-body') },
         React__default.createElement(DropdownMenuButton, { isActive: sortDirection === 'asc', caption: i18n.pickerFilterHeader.sortAscending, icon: ForwardRef$q, onClick: sortAsc }),
         React__default.createElement(DropdownMenuButton, { isActive: sortDirection === 'desc', caption: i18n.pickerFilterHeader.sortDescending, icon: ForwardRef$p, onClick: sortDesc })));
 };
@@ -3344,7 +3371,7 @@ var SvgNavigationExpandAllOutline = function SvgNavigationExpandAllOutline(props
 };
 var ForwardRef$k = /*#__PURE__*/forwardRef(SvgNavigationExpandAllOutline);
 
-var css$u = {"uui-typography":"XMZ-i6","hero-header":"myhCUo","promo-header":"zZRPQT","uui-critical":"yOHMJv","uui-info":"zceJcl","uui-success":"_0EcspK","uui-warning":"l-W2vQ","uui-highlight":"_4OOrZw","uui-typography-size-12":"B5II2d","uui-typography-size-14":"UVa378","uui-typography-size-16":"j6ygD-","root":"oKzfPi","caption-wrapper":"O07QNY","sort-icon":"_5TX4Gv","dropdown-icon":"_17cjmY","infoIcon":"_1EAeFD","resizable":"d73HWi","align-right":"WNvZVG","align-center":"lymNFi","caption":"MFEiAD","truncate":"BWhX6K","checkbox":"A8TOLk","icon":"Ck1Sak","fold-all-icon":"H92A-o","cell-tooltip":"_2nTv45","upper-case":"Yj5-1l","resizing-marker":"X0onAS","pinned-right":"_7C6TZ4","draggable":"VWZbR7","ghost":"r7Fgtb","is-dragged-out":"rIFMqm","dnd-marker-left":"PPQR6A","dnd-marker-right":"H3YEM-","cell-tooltip-wrapper":"K9oXJD","cell-tooltip-text":"d3mwYB","tooltip-caption":"D4Asfn","tooltip-info":"_7WMMnB","uuiTypography":"XMZ-i6","heroHeader":"myhCUo","promoHeader":"zZRPQT","uuiCritical":"yOHMJv","uuiInfo":"zceJcl","uuiSuccess":"_0EcspK","uuiWarning":"l-W2vQ","uuiHighlight":"_4OOrZw","uuiTypographySize12":"B5II2d","uuiTypographySize14":"UVa378","uuiTypographySize16":"j6ygD-","captionWrapper":"O07QNY","sortIcon":"_5TX4Gv","dropdownIcon":"_17cjmY","alignRight":"WNvZVG","alignCenter":"lymNFi","foldAllIcon":"H92A-o","cellTooltip":"_2nTv45","upperCase":"Yj5-1l","resizingMarker":"X0onAS","pinnedRight":"_7C6TZ4","isDraggedOut":"rIFMqm","dndMarkerLeft":"PPQR6A","dndMarkerRight":"H3YEM-","cellTooltipWrapper":"K9oXJD","cellTooltipText":"d3mwYB","tooltipCaption":"D4Asfn","tooltipInfo":"_7WMMnB"};
+var css$v = {"uui-typography":"_5eFXni","hero-header":"O-5vZZ","promo-header":"u7u76x","uui-critical":"E3FjtM","uui-info":"_5qPrsM","uui-success":"ECoi0B","uui-warning":"Frznwg","uui-highlight":"UR5xbZ","uui-typography-size-12":"S4X4qj","uui-typography-size-14":"IPLd7s","uui-typography-size-16":"_-2gjCG","root":"RgckTZ","caption-wrapper":"Fu2yD-","sort-icon":"nPEMC3","dropdown-icon":"olxWkw","infoIcon":"_-6R-vp","resizable":"_2DeeQU","align-right":"O3TpFO","align-center":"BJ-hlC","caption":"UNduWY","truncate":"bXHn3i","checkbox":"_3-UDCj","icon":"zciOoW","fold-all-icon":"OIDjqB","cell-tooltip":"RSMIJo","upper-case":"bIos-q","resizing-marker":"IAoSZC","pinned-right":"oF9eOi","draggable":"vGz1NM","ghost":"FWMIAO","is-dragged-out":"geXWh5","dnd-marker-left":"LoTxGv","dnd-marker-right":"_28ovYp","cell-tooltip-wrapper":"gCyjhX","cell-tooltip-text":"ldzxFC","tooltip-caption":"EKkzXR","tooltip-info":"-X1CBi","uuiTypography":"_5eFXni","heroHeader":"O-5vZZ","promoHeader":"u7u76x","uuiCritical":"E3FjtM","uuiInfo":"_5qPrsM","uuiSuccess":"ECoi0B","uuiWarning":"Frznwg","uuiHighlight":"UR5xbZ","uuiTypographySize12":"S4X4qj","uuiTypographySize14":"IPLd7s","uuiTypographySize16":"_-2gjCG","captionWrapper":"Fu2yD-","sortIcon":"nPEMC3","dropdownIcon":"olxWkw","alignRight":"O3TpFO","alignCenter":"BJ-hlC","foldAllIcon":"OIDjqB","cellTooltip":"RSMIJo","upperCase":"bIos-q","resizingMarker":"IAoSZC","pinnedRight":"oF9eOi","isDraggedOut":"geXWh5","dndMarkerLeft":"LoTxGv","dndMarkerRight":"_28ovYp","cellTooltipWrapper":"gCyjhX","cellTooltipText":"ldzxFC","tooltipCaption":"EKkzXR","tooltipInfo":"-X1CBi"};
 
 class DataTableHeaderCell extends React.Component {
     constructor() {
@@ -3352,27 +3379,27 @@ class DataTableHeaderCell extends React.Component {
         this.state = {
             isDropdownOpen: null,
         };
-        this.getTooltipContent = (column) => (React.createElement("div", { className: cx$1(css$u.cellTooltipWrapper, uuiDataTableHeaderCell.uuiTableHeaderCaptionTooltip) },
-            React.createElement(Text, { cx: [css$u.cellTooltipText, css$u.tooltipCaption] }, column.caption),
-            column.info && (React.createElement(Text, { cx: [css$u.cellTooltipText, css$u.tooltipInfo] }, column.info))));
+        this.getTooltipContent = (column) => (React.createElement("div", { className: cx$1(css$v.cellTooltipWrapper, uuiDataTableHeaderCell.uuiTableHeaderCaptionTooltip) },
+            React.createElement(Text, { cx: [css$v.cellTooltipText, css$v.tooltipCaption] }, column.caption),
+            column.info && (React.createElement(Text, { cx: [css$v.cellTooltipText, css$v.tooltipInfo] }, column.info))));
         this.getColumnCaption = () => {
             const renderTooltip = this.props.column.renderTooltip || this.getTooltipContent;
             const captionCx = [
-                css$u.caption,
-                this.props.textCase === 'upper' && css$u.upperCase,
+                css$v.caption,
+                this.props.textCase === 'upper' && css$v.upperCase,
                 uuiDataTableHeaderCell.uuiTableHeaderCaption,
-                settings.sizes.dataTable.header.row.cell.truncate.includes(this.props.size) && css$u.truncate,
+                settings.sizes.dataTable.header.row.cell.truncate.includes(this.props.size) && css$v.truncate,
             ];
-            return (React.createElement("div", { className: cx$1(css$u.captionWrapper, css$u['align-' + this.props.column.textAlign], uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
-                React.createElement(Tooltip, { placement: "top", color: "inverted", content: renderTooltip(this.props.column), cx: css$u.cellTooltip, openDelay: 600 },
+            return (React.createElement("div", { className: cx$1(css$v.captionWrapper, css$v['align-' + this.props.column.textAlign], uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
+                React.createElement(Tooltip, { placement: "top", color: "inverted", content: renderTooltip(this.props.column), cx: css$v.cellTooltip, openDelay: 600 },
                     React.createElement(Text, { key: "text", fontSize: settings.sizes.dataTable.header.row.cell.columnCaption[this.props.textCase === 'upper' ? 'uppercase' : 'fontSize'], size: settings.sizes.dataTable.header.row.cell.columnCaption.size, cx: captionCx }, this.props.column.caption)),
-                this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React.createElement(IconButton, { key: "sort", cx: cx$1(css$u.icon, css$u.sortIcon, this.props.sortDirection && css$u.sortIconActive, uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: this.props.sortDirection ? 'neutral' : 'secondary', icon: this.props.sortDirection === 'desc' ? ForwardRef$p : this.props.sortDirection === 'asc' ? ForwardRef$q : ForwardRef$o })),
-                this.props.isFilterActive && (React.createElement(IconButton, { key: "filter", cx: cx$1(css$u.icon, !this.props.sortDirection && css$u.filterIcon, uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "neutral", icon: ForwardRef$n })),
-                this.props.column.renderFilter && (React.createElement(IconButton, { key: "dropdown", cx: cx$1(css$u.icon, css$u.dropdownIcon, uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), color: "secondary", icon: this.state.isDropdownOpen ? ForwardRef$m : ForwardRef$P }))));
+                this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React.createElement(IconButton, { key: "sort", cx: cx$1(css$v.icon, css$v.sortIcon, this.props.sortDirection && css$v.sortIconActive, uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: this.props.sortDirection ? 'neutral' : 'secondary', icon: this.props.sortDirection === 'desc' ? ForwardRef$p : this.props.sortDirection === 'asc' ? ForwardRef$q : ForwardRef$o })),
+                this.props.isFilterActive && (React.createElement(IconButton, { key: "filter", cx: cx$1(css$v.icon, !this.props.sortDirection && css$v.filterIcon, uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "neutral", icon: ForwardRef$n })),
+                this.props.column.renderFilter && (React.createElement(IconButton, { key: "dropdown", cx: cx$1(css$v.icon, css$v.dropdownIcon, uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), color: "secondary", icon: this.state.isDropdownOpen ? ForwardRef$m : ForwardRef$P }))));
         };
         this.renderHeaderCheckbox = () => {
             if (this.props.selectAll && this.props.isFirstColumn) {
-                return (React.createElement(Checkbox, Object.assign({ size: settings.sizes.dataTable.header.row.cell.checkbox[this.props.size] }, this.props.selectAll, { cx: cx$1(css$u.checkbox, uuiDataTableHeaderCell.uuiTableHeaderCheckbox) })));
+                return (React.createElement(Checkbox, Object.assign({ size: settings.sizes.dataTable.header.row.cell.checkbox[this.props.size] }, this.props.selectAll, { cx: cx$1(css$v.checkbox, uuiDataTableHeaderCell.uuiTableHeaderCheckbox) })));
             }
         };
         this.renderFoldAllIcon = () => {
@@ -3380,14 +3407,14 @@ class DataTableHeaderCell extends React.Component {
                 return (React.createElement(Tooltip, { content: this.props.areAllFolded
                         ? i18n.tables.columnHeader.expandAllTooltip
                         : i18n.tables.columnHeader.collapseAllTooltip },
-                    React.createElement(IconButton, { color: "secondary", cx: cx$1(css$u.icon, css$u.foldAllIcon, uuiDataTableHeaderCell.uuiTableHeaderFoldAllIcon), icon: this.props.areAllFolded ? ForwardRef$k : ForwardRef$l, onClick: this.props.onFoldAll, rawProps: {
+                    React.createElement(IconButton, { color: "secondary", cx: cx$1(css$v.icon, css$v.foldAllIcon, uuiDataTableHeaderCell.uuiTableHeaderFoldAllIcon), icon: this.props.areAllFolded ? ForwardRef$k : ForwardRef$l, onClick: this.props.onFoldAll, rawProps: {
                             'aria-label': this.props.areAllFolded ? 'Expand All' : 'Collapse All',
                             'aria-expanded': !!this.props.areAllFolded,
                         } })));
             }
         };
         this.renderResizingMarker = (props) => {
-            return (React.createElement("div", { role: "separator", onMouseDown: props.onResizeStart, className: cx$1(css$u.resizingMarker, uuiMarkers.draggable, uuiMarkers.clickable) }));
+            return (React.createElement("div", { role: "separator", onMouseDown: props.onResizeStart, className: cx$1(css$v.resizingMarker, uuiMarkers.draggable, uuiMarkers.clickable) }));
         };
         this.getLeftPadding = () => {
             const { columnsGap, isFirstColumn } = this.props;
@@ -3419,7 +3446,7 @@ class DataTableHeaderCell extends React.Component {
                     var _a;
                     props.ref(ref);
                     (_a = dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.ref) === null || _a === void 0 ? void 0 : _a.call(dropdownProps, ref);
-                }, cx: cx$1(uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiMarkers.clickable, css$u.root, `uui-size-${this.props.size || settings.sizes.dataTable.header.row.cell.defaults.size}`, this.props.isFirstColumn && 'uui-dt-header-first-column', this.props.isLastColumn && 'uui-dt-header-last-column', this.props.column.fix && css$u['pinned-' + this.props.column.fix], isResizable && css$u.resizable, props.isDraggable && css$u.draggable, props.isDragGhost && css$u.ghost, props.isDraggedOut && css$u.isDraggedOut, props.isDndInProgress && css$u['dnd-marker-' + props.position]), onClick: onClickEvent, rawProps: Object.assign({ role: 'columnheader', 'aria-sort': this.props.sortDirection === 'asc' ? 'ascending' : this.props.sortDirection ? 'descending' : 'none' }, props.eventHandlers), style: computeStyles },
+                }, cx: cx$1(uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiMarkers.clickable, css$v.root, `uui-size-${this.props.size || settings.sizes.dataTable.header.row.cell.defaults.size}`, this.props.isFirstColumn && 'uui-dt-header-first-column', this.props.isLastColumn && 'uui-dt-header-last-column', this.props.column.fix && css$v['pinned-' + this.props.column.fix], isResizable && css$v.resizable, props.isDraggable && css$v.draggable, props.isDragGhost && css$v.ghost, props.isDraggedOut && css$v.isDraggedOut, props.isDndInProgress && css$v['dnd-marker-' + props.position]), onClick: onClickEvent, rawProps: Object.assign({ role: 'columnheader', 'aria-sort': this.props.sortDirection === 'asc' ? 'ascending' : this.props.sortDirection ? 'descending' : 'none' }, props.eventHandlers), style: computeStyles },
                 this.renderHeaderCheckbox(),
                 this.renderFoldAllIcon(),
                 this.getColumnCaption(),
@@ -3450,10 +3477,66 @@ var SvgActionSettingsFill = function SvgActionSettingsFill(props, ref) {
 };
 var ForwardRef$j = /*#__PURE__*/forwardRef(SvgActionSettingsFill);
 
-var css$t = {"uui-typography":"mdpHZU","hero-header":"m-h5-3","promo-header":"_4fsntP","uui-critical":"rDXM0W","uui-info":"X5tCLR","uui-success":"qag4H-","uui-warning":"nGij9X","uui-highlight":"Ya8Ck2","uui-typography-size-12":"sKxz-E","uui-typography-size-14":"cFArwD","uui-typography-size-16":"kdobyH","root":"_2jLdaa","uuiTypography":"mdpHZU","heroHeader":"m-h5-3","promoHeader":"_4fsntP","uuiCritical":"rDXM0W","uuiInfo":"X5tCLR","uuiSuccess":"qag4H-","uuiWarning":"nGij9X","uuiHighlight":"Ya8Ck2","uuiTypographySize12":"sKxz-E","uuiTypographySize14":"cFArwD","uuiTypographySize16":"kdobyH"};
+var css$u = {"uui-typography":"Quv3q7","hero-header":"cd416h","promo-header":"fRlxtA","uui-critical":"wBWqZY","uui-info":"sliYzq","uui-success":"xNaS3m","uui-warning":"Vt7KjL","uui-highlight":"Or40sM","uui-typography-size-12":"GHrkqQ","uui-typography-size-14":"VNg2pI","uui-typography-size-16":"oHe-rC","root":"_-7GAkE","uuiTypography":"Quv3q7","heroHeader":"cd416h","promoHeader":"fRlxtA","uuiCritical":"wBWqZY","uuiInfo":"sliYzq","uuiSuccess":"xNaS3m","uuiWarning":"Vt7KjL","uuiHighlight":"Or40sM","uuiTypographySize12":"GHrkqQ","uuiTypographySize14":"VNg2pI","uuiTypographySize16":"oHe-rC"};
+
+var css$t = {"uui-typography":"D5x7Va","hero-header":"Kc-ium","promo-header":"DAd6L1","uui-critical":"x9VQCS","uui-info":"h0CW9X","uui-success":"_9V0vNz","uui-warning":"waEQkw","uui-highlight":"ZCTPin","uui-typography-size-12":"nLmHuR","uui-typography-size-14":"UrM7NM","uui-typography-size-16":"rMzoRx","root":"tjuGb1","caption-wrapper":"JPo2-7","align-center":"aZg84y","caption":"qnrN4G","truncate":"tK1X94","group-cell-tooltip":"m1qe-o","upper-case":"RURfyH","group-cell-tooltip-wrapper":"_9VA284","group-cell-tooltip-text":"ZETqRo","tooltip-caption":"s6LX6H","tooltip-info":"KQBVWp","uuiTypography":"D5x7Va","heroHeader":"Kc-ium","promoHeader":"DAd6L1","uuiCritical":"x9VQCS","uuiInfo":"h0CW9X","uuiSuccess":"_9V0vNz","uuiWarning":"waEQkw","uuiHighlight":"ZCTPin","uuiTypographySize12":"nLmHuR","uuiTypographySize14":"UrM7NM","uuiTypographySize16":"rMzoRx","captionWrapper":"JPo2-7","alignCenter":"aZg84y","groupCellTooltip":"m1qe-o","upperCase":"RURfyH","groupCellTooltipWrapper":"_9VA284","groupCellTooltipText":"ZETqRo","tooltipCaption":"s6LX6H","tooltipInfo":"KQBVWp"};
+
+class DataTableHeaderGroupCell extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getTooltipContent = (column) => (React.createElement("div", { className: cx$1(css$t.groupCellTooltipWrapper, uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCaptionTooltip) },
+            React.createElement(Text, { cx: [css$t.groupCellTooltipText, css$t.tooltipCaption] }, column.caption),
+            column.info && (React.createElement(Text, { cx: [css$t.groupCellTooltipText, css$t.tooltipInfo] }, column.info))));
+        this.getColumnCaption = () => {
+            const renderTooltip = this.props.group.renderTooltip || this.getTooltipContent;
+            const captionCx = [
+                css$t.caption,
+                this.props.textCase === 'upper' && css$t.upperCase,
+                uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCaption,
+                settings.sizes.dataTable.header.row.groupCell.truncate.includes(this.props.size) && css$t.truncate,
+            ];
+            return (React.createElement("div", { className: cx$1(css$t.captionWrapper, css$t['align-' + this.props.group.textAlign], uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCaptionWrapper) },
+                React.createElement(Tooltip, { placement: "top", color: "inverted", content: renderTooltip(this.props.group), cx: css$t.groupCellTooltip, openDelay: 600 },
+                    React.createElement(Text, { key: "text", fontSize: settings.sizes.dataTable.header.row.groupCell.columnCaption[this.props.textCase === 'upper' ? 'uppercase' : 'fontSize'], size: settings.sizes.dataTable.header.row.groupCell.columnCaption.size, cx: captionCx }, this.props.group.caption))));
+        };
+        this.getLeftPadding = () => {
+            const { columnsGap, isFirstCell } = this.props;
+            if (columnsGap)
+                return isFirstCell ? columnsGap : +columnsGap / 2;
+            return isFirstCell ? settings.sizes.dataTable.header.row.groupCell.defaults.paddingEdge : settings.sizes.dataTable.header.row.groupCell.defaults.padding;
+        };
+        this.getRightPadding = () => {
+            const { columnsGap, isLastCell } = this.props;
+            if (columnsGap)
+                return isLastCell ? columnsGap : +columnsGap / 2;
+            return isLastCell ? settings.sizes.dataTable.header.row.groupCell.defaults.paddingEdge : settings.sizes.dataTable.header.row.groupCell.defaults.padding;
+        };
+        this.renderCellContent = (props) => {
+            const computeStyles = {
+                '--uui-dt-header-group-cell-padding-start': `${this.getLeftPadding()}px`,
+                '--uui-dt-header-group-cell-padding-end': `${this.getRightPadding()}px`,
+            };
+            return (React.createElement(DataTableCellContainer, { column: this.props.group, ref: (ref) => {
+                    props.ref(ref);
+                }, cx: cx$1(uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCell, css$t.root, `uui-size-${this.props.size || settings.sizes.dataTable.header.row.groupCell.defaults.size}`, this.props.isFirstCell && 'uui-dt-header-first-column', this.props.isLastCell && 'uui-dt-header-last-column'), rawProps: Object.assign({ role: 'columnheader' }, props.eventHandlers), style: computeStyles }, this.getColumnCaption()));
+        };
+    }
+    render() {
+        if (this.props.group.renderHeaderCell) {
+            return this.props.group.renderHeaderCell(this.props);
+        }
+        const computeStyles = {
+            '--uui-dt-header-group-cell-padding-start': `${this.getLeftPadding()}px`,
+            '--uui-dt-header-group-cell-padding-end': `${this.getRightPadding()}px`,
+            width: '100%',
+        };
+        return (React.createElement(DataTableCellContainer, { column: this.props.group, cx: cx$1(uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCell, css$t.root, `uui-size-${this.props.size || settings.sizes.dataTable.header.row.groupCell.defaults.size}`, this.props.isFirstCell && 'uui-dt-header-first-column', this.props.isLastCell && 'uui-dt-header-last-column'), rawProps: { role: 'columnheader' }, style: computeStyles }, this.getColumnCaption()));
+    }
+}
 
-const DataTableHeaderRow = /* @__PURE__ */withMods(DataTableHeaderRow$1, () => [css$t.root, 'uui-dt-vars'], (mods) => ({
+const DataTableHeaderRow = /* @__PURE__ */withMods(DataTableHeaderRow$1, () => [css$u.root, 'uui-dt-vars'], (mods) => ({
     renderCell: (props) => (React.createElement(DataTableHeaderCell, Object.assign({}, props, { size: mods.size, textCase: mods.textCase || 'normal', key: props.column.key, columnsGap: mods.columnsGap }))),
+    renderGroupCell: (props) => (React.createElement(DataTableHeaderGroupCell, Object.assign({}, props, { size: mods.size, textCase: mods.textCase || 'normal', key: props.key, columnsGap: mods.columnsGap }))),
     renderConfigButton: () => (React.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: ['config-icon', `uui-size-${settings.sizes.dataTable.header.row.cell.iconSize[mods.size || settings.sizes.dataTable.header.row.default]}`], color: "neutral", icon: ForwardRef$j })),
 }));
 
@@ -3462,7 +3545,7 @@ const UUI_FILTERS_PANEL_ADD_BUTTON_BODY = 'uui-filters-panel-add-button-body';
 const UUI_FILTERS_PANEL_ITEM_BODY = 'uui-filters-panel-item-body';
 const UUI_FILTERS_PANEL_ITEM_TOGGLER = 'uui-filters-panel-item-toggler';
 
-var css$s = {"uui-typography":"uJmupB","hero-header":"RMATMB","promo-header":"FVMI7I","uui-critical":"nwgYFQ","uui-info":"Y-RKje","uui-success":"odWtaw","uui-warning":"HWdIPF","uui-highlight":"t8loqT","uui-typography-size-12":"SJtQN5","uui-typography-size-14":"ZyHMcE","uui-typography-size-16":"ozmeel","root":"pH6FMZ","title-wrapper":"s8xXsr","title":"L4ynnz","text-wrapper":"mEy14p","selection":"vb3rGn","postfix":"wGkBNi","selected":"-RaM-R","uuiTypography":"uJmupB","heroHeader":"RMATMB","promoHeader":"FVMI7I","uuiCritical":"nwgYFQ","uuiInfo":"Y-RKje","uuiSuccess":"odWtaw","uuiWarning":"HWdIPF","uuiHighlight":"t8loqT","uuiTypographySize12":"SJtQN5","uuiTypographySize14":"ZyHMcE","uuiTypographySize16":"ozmeel","titleWrapper":"s8xXsr","textWrapper":"mEy14p"};
+var css$s = {"uui-typography":"fo2CwB","hero-header":"JLHxdD","promo-header":"x47PAy","uui-critical":"VIE7nL","uui-info":"_0mdSGs","uui-success":"L9MjGW","uui-warning":"_4hav8N","uui-highlight":"pbtCxN","uui-typography-size-12":"VsSIeB","uui-typography-size-14":"Eh4pwj","uui-typography-size-16":"BwE4sY","root":"gLieAI","title-wrapper":"_8Ju-ZW","title":"_86rgMl","text-wrapper":"_9pG4Ze","selection":"_7DQ8UA","postfix":"UBiHLa","selected":"JvgXzX","uuiTypography":"fo2CwB","heroHeader":"JLHxdD","promoHeader":"x47PAy","uuiCritical":"VIE7nL","uuiInfo":"_0mdSGs","uuiSuccess":"L9MjGW","uuiWarning":"_4hav8N","uuiHighlight":"pbtCxN","uuiTypographySize12":"VsSIeB","uuiTypographySize14":"Eh4pwj","uuiTypographySize16":"BwE4sY","titleWrapper":"_8Ju-ZW","textWrapper":"_9pG4Ze"};
 
 const defaultSize = '36';
 const FilterPanelItemToggler = /* @__PURE__ */React.forwardRef((props, ref) => {
@@ -3640,7 +3723,7 @@ function FilterRangeDatePickerBody(props) {
                 React__default.createElement(LinkButton, { isDisabled: !value.from && !value.to, caption: i18n.pickerModal.clearAllButton, onClick: () => onValueChange(defaultRangeValue) })))));
 }
 
-var css$r = {"container":"_8NPmcs"};
+var css$r = {"container":"_6ZBiWx"};
 
 function FilterNumericBody(props) {
     var _a, _b;
@@ -3738,7 +3821,7 @@ var SvgActionDeleteOutline = function SvgActionDeleteOutline(props, ref) {
 };
 var ForwardRef$i = /*#__PURE__*/forwardRef(SvgActionDeleteOutline);
 
-var css$q = {"uui-typography":"a7VHqF","hero-header":"_4IKCQB","promo-header":"ang7Lm","uui-critical":"qVA6cM","uui-info":"GDu169","uui-success":"_2C-RSF","uui-warning":"DkNTda","uui-highlight":"Y4jZXq","uui-typography-size-12":"_58ephU","uui-typography-size-14":"m1Xvnn","uui-typography-size-16":"wB3Vr7","header":"_57muXa","removeButton":"AkdaJJ","with-search":"adZwIZ","uuiTypography":"a7VHqF","heroHeader":"_4IKCQB","promoHeader":"ang7Lm","uuiCritical":"qVA6cM","uuiInfo":"GDu169","uuiSuccess":"_2C-RSF","uuiWarning":"DkNTda","uuiHighlight":"Y4jZXq","uuiTypographySize12":"_58ephU","uuiTypographySize14":"m1Xvnn","uuiTypographySize16":"wB3Vr7","withSearch":"adZwIZ"};
+var css$q = {"uui-typography":"m9TdZM","hero-header":"hM-ss5","promo-header":"FxaAIM","uui-critical":"oyeFBi","uui-info":"ht90RN","uui-success":"DRuxST","uui-warning":"nE-E8J","uui-highlight":"sXrtwp","uui-typography-size-12":"XCcnwj","uui-typography-size-14":"mttp0I","uui-typography-size-16":"v-QoP9","header":"_3ELQSr","removeButton":"ZuyU3S","with-search":"_8HtXfd","uuiTypography":"m9TdZM","heroHeader":"hM-ss5","promoHeader":"FxaAIM","uuiCritical":"oyeFBi","uuiInfo":"ht90RN","uuiSuccess":"DRuxST","uuiWarning":"nE-E8J","uuiHighlight":"sXrtwp","uuiTypographySize12":"XCcnwj","uuiTypographySize14":"mttp0I","uuiTypographySize16":"v-QoP9","withSearch":"_8HtXfd"};
 
 function useView(props, value) {
     const forceUpdate = useForceUpdate();
@@ -4059,7 +4142,7 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = /* @__PURE__ */React__default.memo(FiltersToolbarImpl);
 
-var css$p = {"divider":"sicNka","dropdownDeleteIcon":"ez2PaJ","presetsWrapper":"MLuYCI","addPresetContainer":"D0Cp-2","dropContainer":"AxvKSh"};
+var css$p = {"divider":"_4wr1zo","dropdownDeleteIcon":"A0ppIK","presetsWrapper":"zsSH7j","addPresetContainer":"WXKR8O","dropContainer":"RWWHlr"};
 
 var _path$g;
 function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
@@ -4172,7 +4255,7 @@ var SvgContentLinkOutline = function SvgContentLinkOutline(props, ref) {
 };
 var ForwardRef$a = /*#__PURE__*/forwardRef(SvgContentLinkOutline);
 
-var css$o = {"delete-button":"ND90LK","tab-button":"z5DJpM","targetOpen":"qELeiq","deleteButton":"ND90LK","tabButton":"z5DJpM"};
+var css$o = {"delete-button":"_0NxjSE","tab-button":"RFzq0v","targetOpen":"ogYZs5","deleteButton":"_0NxjSE","tabButton":"RFzq0v"};
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = useUuiContext();
@@ -4230,7 +4313,7 @@ function PresetActionsDropdown(props) {
     return (React__default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", modifiers: [{ name: 'offset', options: { offset: [0, 22] } }] }));
 }
 
-var css$n = {"preset-input-cell":"yNOTXo","preset-input":"sbjeuo","presetInputCell":"yNOTXo","presetInput":"sbjeuo"};
+var css$n = {"preset-input-cell":"KFihLD","preset-input":"Pkz6yn","presetInputCell":"KFihLD","presetInput":"Pkz6yn"};
 
 const UUI_PRESETS_PANEL_ADD_BUTTON = 'uui-presets-panel-add-button';
 const UUI_PRESETS_PANEL_MORE_BUTTON = 'uui-presets-panel-more-button';
@@ -4263,7 +4346,7 @@ function PresetInput(props) {
         React__default.createElement(TextInput, { cx: css$n.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50, isReadonly: readonly })));
 }
 
-var css$m = {"preset":"d78VKg","activePreset":"EBd5nU"};
+var css$m = {"preset":"_3vILba","activePreset":"BjloKB"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = useState(false);
@@ -4437,7 +4520,7 @@ var SvgTableGroupColumnRightFill = function SvgTableGroupColumnRightFill(props,
 };
 var ForwardRef$6 = /*#__PURE__*/forwardRef(SvgTableGroupColumnRightFill);
 
-var css$l = {"unpin-icon":"yb7SXJ","pin-toggler-icon":"R-5DT5","unpinIcon":"yb7SXJ","pinTogglerIcon":"R-5DT5"};
+var css$l = {"unpin-icon":"XaICNP","pin-toggler-icon":"C4564U","unpinIcon":"XaICNP","pinTogglerIcon":"C4564U"};
 
 function PinIconButton(props) {
     const i18nLocal = i18n.tables.columnsConfigurationModal;
@@ -4496,7 +4579,7 @@ var SvgActionDragIndicator18 = function SvgActionDragIndicator18(props, ref) {
 };
 var ForwardRef$5 = /*#__PURE__*/forwardRef(SvgActionDragIndicator18);
 
-var css$k = {"uui-typography":"xG35BX","hero-header":"h9ODMX","promo-header":"YYyDcw","uui-critical":"_6QOTWs","uui-info":"YZZxos","uui-success":"iHyUDJ","uui-warning":"_-67zTs","uui-highlight":"QVz-Uy","uui-typography-size-12":"tIbAFJ","uui-typography-size-14":"fXj4lq","uui-typography-size-16":"NKd43i","row-wrapper":"VeIlFN","pin-icon-button":"h3ceIj","not-pinned":"Ki0MrJ","checkbox":"bqjdIU","drag-handle":"DZhpPT","dnd-disabled":"_9Nl6cH","uuiTypography":"xG35BX","heroHeader":"h9ODMX","promoHeader":"YYyDcw","uuiCritical":"_6QOTWs","uuiInfo":"YZZxos","uuiSuccess":"iHyUDJ","uuiWarning":"_-67zTs","uuiHighlight":"QVz-Uy","uuiTypographySize12":"tIbAFJ","uuiTypographySize14":"fXj4lq","uuiTypographySize16":"NKd43i","rowWrapper":"VeIlFN","pinIconButton":"h3ceIj","notPinned":"Ki0MrJ","dragHandle":"DZhpPT","dndDisabled":"_9Nl6cH"};
+var css$k = {"uui-typography":"zx8y6o","hero-header":"l19r9H","promo-header":"Rmw90J","uui-critical":"cLe9O5","uui-info":"FxoVZc","uui-success":"hhjF7y","uui-warning":"ZFJyTI","uui-highlight":"TjqTD3","uui-typography-size-12":"_8I-etm","uui-typography-size-14":"oSvede","uui-typography-size-16":"FeIXi9","row-wrapper":"yXSQ49","pin-icon-button":"mUe4I1","not-pinned":"dTvNi8","checkbox":"FikcF7","drag-handle":"RXAPI1","dnd-disabled":"spCa20","uuiTypography":"zx8y6o","heroHeader":"l19r9H","promoHeader":"Rmw90J","uuiCritical":"cLe9O5","uuiInfo":"FxoVZc","uuiSuccess":"hhjF7y","uuiWarning":"ZFJyTI","uuiHighlight":"TjqTD3","uuiTypographySize12":"_8I-etm","uuiTypographySize14":"oSvede","uuiTypographySize16":"FeIXi9","rowWrapper":"yXSQ49","pinIconButton":"mUe4I1","notPinned":"dTvNi8","dragHandle":"RXAPI1","dndDisabled":"spCa20"};
 
 const ColumnRow = /* @__PURE__ */React.memo(function ColumnRow(props) {
     const { column } = props;
@@ -4506,10 +4589,10 @@ const ColumnRow = /* @__PURE__ */React.memo(function ColumnRow(props) {
     const isPinned = !!pinPosition;
     const data = { column, columnConfig };
     const renderContent = (dndActorParams) => {
-        const wrapperClasses = cx$1(css$k.rowWrapper, !isPinned && css$k.notPinned, dndActorParams.isDragGhost && uuiDndState.dragGhost);
+        const wrapperClasses = cx$1(css$k.rowWrapper, !isPinned && css$k.notPinned, dndActorParams.isDragGhost && uuiDndState.dragGhost, 'uui-dt-columns-config-row');
         const _a = dndActorParams.eventHandlers, { onTouchStart, onPointerDown } = _a, restEventHandlers = __rest(_a, ["onTouchStart", "onPointerDown"]);
         const dndActorPropsWithoutRef = __rest(dndActorParams, ["ref"]);
-        return (React.createElement(FlexRow, { size: null, cx: wrapperClasses, ref: dndActorParams.ref, rawProps: Object.assign({}, restEventHandlers), alignItems: "top" },
+        return (React.createElement(FlexRow, { size: settings.sizes.dataTable.columnsConfigurationModal.columnRow, cx: wrapperClasses, ref: dndActorParams.ref, rawProps: Object.assign({}, restEventHandlers), alignItems: "top" },
             React.createElement(DragHandle, { dragHandleIcon: ForwardRef$5, rawProps: { onTouchStart, onPointerDown }, isDisabled: !isDndAllowed, cx: cx$1(css$k.dragHandle, !isDndAllowed && css$k.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$k.checkbox }),
             React.createElement(FlexRow, { size: null, cx: css$k.pinIconButton },
@@ -4519,7 +4602,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$j = {"uui-typography":"_7vS0zu","hero-header":"X1lnVj","promo-header":"gRHTW9","uui-critical":"_9fM0Sp","uui-info":"_8oByDK","uui-success":"_34fDSr","uui-warning":"Tcv-Lq","uui-highlight":"D5w2J3","uui-typography-size-12":"Hzn5y9","uui-typography-size-14":"JQNEQb","uui-typography-size-16":"sbmUUB","root":"ytEO-D","main-panel":"fy0Zh0","group":"jhqQ4g","group-title":"_8sVl9j","group-items":"VZgG6d","no-data":"du3QwK","no-data-title":"E9OBnS","no-data-sub-title":"LHy9dF","h-divider":"KWU09P","search-area":"htAIGU","subgroup-accordion":"g3yCNo","subgroup":"pzs51Y","subgroup-title":"xwK1rL","uuiTypography":"_7vS0zu","heroHeader":"X1lnVj","promoHeader":"gRHTW9","uuiCritical":"_9fM0Sp","uuiInfo":"_8oByDK","uuiSuccess":"_34fDSr","uuiWarning":"Tcv-Lq","uuiHighlight":"D5w2J3","uuiTypographySize12":"Hzn5y9","uuiTypographySize14":"JQNEQb","uuiTypographySize16":"sbmUUB","mainPanel":"fy0Zh0","groupTitle":"_8sVl9j","groupItems":"VZgG6d","noData":"du3QwK","noDataTitle":"E9OBnS","noDataSubTitle":"LHy9dF","hDivider":"KWU09P","searchArea":"htAIGU","subgroupAccordion":"g3yCNo","subgroupTitle":"xwK1rL"};
+var css$j = {"uui-typography":"BPGGBr","hero-header":"H-xLAU","promo-header":"jljpRr","uui-critical":"-W8-99","uui-info":"ycnIVU","uui-success":"R85t4t","uui-warning":"_26Dbaj","uui-highlight":"KThh3M","uui-typography-size-12":"uSQYqS","uui-typography-size-14":"_76hbIb","uui-typography-size-16":"-H--aJ","root":"R-Fd1v","main-panel":"_9-4YfA","group":"hKbCr-","group-title":"tR65jM","group-items":"RpwYxv","no-data":"_3osPKz","no-data-title":"XNORCB","no-data-sub-title":"KhrIYn","h-divider":"_8GOIaz","search-area":"_9uZZP-","subgroup-accordion":"B6L7vQ","subgroup":"Jcgttd","subgroup-title":"yZg5D5","uuiTypography":"BPGGBr","heroHeader":"H-xLAU","promoHeader":"jljpRr","uuiCritical":"-W8-99","uuiInfo":"ycnIVU","uuiSuccess":"R85t4t","uuiWarning":"_26Dbaj","uuiHighlight":"KThh3M","uuiTypographySize12":"uSQYqS","uuiTypographySize14":"_76hbIb","uuiTypographySize16":"-H--aJ","mainPanel":"_9-4YfA","groupTitle":"tR65jM","groupItems":"RpwYxv","noData":"_3osPKz","noDataTitle":"XNORCB","noDataSubTitle":"KhrIYn","hDivider":"_8GOIaz","searchArea":"_9uZZP-","subgroupAccordion":"B6L7vQ","subgroupTitle":"yZg5D5"};
 
 const renderGroupTitle = (title, amount) => (React.createElement(FlexRow, { cx: css$j.group },
     React.createElement(Text, { size: "none", cx: css$j.groupTitle }, title),
@@ -4608,7 +4691,7 @@ function SubGroup(props) {
     return null;
 }
 
-var css$i = {"listContainer":"g0Agx8","header":"ljBQT-","group":"zDpcyF","stickyHeader":"wpU0Cq"};
+var css$i = {"listContainer":"EwMhkg","header":"cr6GoK","group":"_-6XHBk","stickyHeader":"L1Od2j"};
 
 const getChildrenAndRest = (row, rows) => {
     const firstNotChildIndex = rows.findIndex((other) => other.depth < row.depth || (row.depth === other.depth && other.isPinned));
@@ -4674,7 +4757,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#c197vzu3wor0w2zw_a)"
+    clipPath: "url(#4i4gxfxqciyncjhri_a)"
   }, _path$4 || (_path$4 = /*#__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"
@@ -4695,7 +4778,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: "c197vzyk4v7l3x55_b",
+    id: "4i4gxfr65igsuth3_b",
     style: {
       maskType: "alpha"
     },
@@ -4708,7 +4791,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(#c197vzyk4v7l3x55_b)",
+    mask: "url(#4i4gxfr65igsuth3_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
@@ -4794,7 +4877,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: "c197vzu3wor0w2zw_a"
+    id: "4i4gxfxqciyncjhri_a"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
@@ -4803,7 +4886,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
 };
 var ForwardRef$4 = /*#__PURE__*/forwardRef(SvgEmptyTable);
 
-var css$h = {"root":"UxF4WX","sticky-header":"trckK6","no-results":"eOqTqS","icon":"aUDQjY","title":"TT9z9K","stickyHeader":"trckK6","noResults":"eOqTqS"};
+var css$h = {"root":"tHLkeF","sticky-header":"jONeJZ","no-results":"f4h-Yw","icon":"m-WhKy","title":"WoLDA6","stickyHeader":"jONeJZ","noResults":"f4h-Yw"};
 
 function DataTable(props) {
     var _a, _b, _c, _d;
@@ -4838,7 +4921,7 @@ function DataTable(props) {
     ]);
     const renderRowsContainer = React.useCallback(({ listContainerRef, estimatedHeight, offsetY, scrollShadows }) => (React.createElement(React.Fragment, null,
         React.createElement("div", { className: css$h.stickyHeader, ref: headerRef },
-            React.createElement(DataTableHeaderRow, { columns: columns, onConfigButtonClick: props.showColumnsConfig && onConfigurationButtonClick, selectAll: props.selectAll, size: props.headerSize || settings.sizes.dataTable.header.row.default, textCase: props.headerTextCase, allowColumnsReordering: props.allowColumnsReordering, allowColumnsResizing: props.allowColumnsResizing, showFoldAll: props.showFoldAll, value: Object.assign(Object.assign({}, props.value), { columnsConfig: config }), onValueChange: props.onValueChange, columnsGap: props.columnsGap }),
+            React.createElement(DataTableHeaderRow, { columns: columns, columnGroups: props.columnGroups, onConfigButtonClick: props.showColumnsConfig && onConfigurationButtonClick, selectAll: props.selectAll, size: props.headerSize || settings.sizes.dataTable.header.row.default, textCase: props.headerTextCase, allowColumnsReordering: props.allowColumnsReordering, allowColumnsResizing: props.allowColumnsResizing, showFoldAll: props.showFoldAll, value: Object.assign(Object.assign({}, props.value), { columnsConfig: config }), onValueChange: props.onValueChange, columnsGap: props.columnsGap }),
             React.createElement("div", { className: cx$1(uuiScrollShadows.top, {
                     [uuiScrollShadows.topVisible]: scrollShadows.verticalTop,
                 }) })),
@@ -4854,9 +4937,9 @@ function DataTable(props) {
                 } }))));
 }
 
-var css$g = {"root":"_3HMgZx"};
+var css$g = {"root":"VrUG5D"};
 
-var css$f = {"root":"T-lHnh","burger-content":"M74N-l","burgerContent":"M74N-l"};
+var css$f = {"root":"YZM2yD","burger-content":"cRAMXc","burgerContent":"cRAMXc"};
 
 var _path$3;
 function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
@@ -4899,7 +4982,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
 };
 var ForwardRef$2 = /*#__PURE__*/forwardRef(SvgNavigationArrowDownOutline);
 
-var css$e = {"uui-typography":"B1aMeP","hero-header":"N2M1tE","promo-header":"_4h8ZKO","uui-critical":"fYJYXE","uui-info":"_7-5Wp0","uui-success":"RdolxD","uui-warning":"j1Gix-","uui-highlight":"_0C-yEf","uui-typography-size-12":"nBRcFC","uui-typography-size-14":"naqwB2","uui-typography-size-16":"ZGYJsh","root":"_0JNB5I","button-primary":"P3X5l1","button-secondary":"vx2bx-","hasIcon":"TwA2OX","dropdown":"EB-zZB","uuiTypography":"B1aMeP","heroHeader":"N2M1tE","promoHeader":"_4h8ZKO","uuiCritical":"fYJYXE","uuiInfo":"_7-5Wp0","uuiSuccess":"RdolxD","uuiWarning":"j1Gix-","uuiHighlight":"_0C-yEf","uuiTypographySize12":"nBRcFC","uuiTypographySize14":"naqwB2","uuiTypographySize16":"ZGYJsh","buttonPrimary":"P3X5l1","buttonSecondary":"vx2bx-"};
+var css$e = {"uui-typography":"_3y3-ZC","hero-header":"h7dpUY","promo-header":"XC8y8G","uui-critical":"DaH6nu","uui-info":"DT1J6a","uui-success":"IdiXpP","uui-warning":"t-N4p4","uui-highlight":"GrWv8V","uui-typography-size-12":"sNv569","uui-typography-size-14":"_7dDtxS","uui-typography-size-16":"UB0Md-","root":"amQpg4","button-primary":"_97PcEw","button-secondary":"oIu-It","hasIcon":"UIPiJ0","dropdown":"kJLI3T","uuiTypography":"_3y3-ZC","heroHeader":"h7dpUY","promoHeader":"XC8y8G","uuiCritical":"DaH6nu","uuiInfo":"DT1J6a","uuiSuccess":"IdiXpP","uuiWarning":"t-N4p4","uuiHighlight":"GrWv8V","uuiTypographySize12":"sNv569","uuiTypographySize14":"_7dDtxS","uuiTypographySize16":"UB0Md-","buttonPrimary":"_97PcEw","buttonSecondary":"oIu-It"};
 
 const BurgerButton = /* @__PURE__ */withMods(Button$1, (props) => [
     css$e.root,
@@ -4910,13 +4993,13 @@ const BurgerButton = /* @__PURE__ */withMods(Button$1, (props) => [
     props.icon && css$e.hasIcon,
 ], () => ({ dropdownIcon: ForwardRef$2, dropdownIconPosition: 'left', role: 'menuitem' }));
 
-var css$d = {"search-input":"lAX5JR","searchInput":"lAX5JR"};
+var css$d = {"search-input":"U8g5Uw","searchInput":"U8g5Uw"};
 
 function BurgerSearch(props) {
     return (React.createElement(TextInput$1, { cx: cx(css$d.searchInput, 'uui-main_menu-burger-search'), iconPosition: "left", icon: ForwardRef$N, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$Q }));
 }
 
-var css$c = {"root":"_8U94wu","group-header":"n5ArT6","group-name":"fDoU66","line":"OsC0Qv","groupHeader":"n5ArT6","groupName":"fDoU66"};
+var css$c = {"root":"nqDq9z","group-header":"btNwk0","group-name":"OJlsOO","line":"fI22Sj","groupHeader":"btNwk0","groupName":"OJlsOO"};
 
 function BurgerGroupHeader(props) {
     return (React.createElement("div", { className: cx(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
@@ -4924,7 +5007,7 @@ function BurgerGroupHeader(props) {
         React.createElement("span", { className: css$c.groupName }, props.caption)));
 }
 
-var css$b = {"uui-typography":"tAMCWn","hero-header":"s8N5UW","promo-header":"w6tQ5R","uui-critical":"FI2hEx","uui-info":"B0spR4","uui-success":"I1w4CW","uui-warning":"hwADsG","uui-highlight":"ip6hUl","uui-typography-size-12":"U5ljdd","uui-typography-size-14":"W7FbAB","uui-typography-size-16":"QySmlq","root":"_2uXuPR","type-primary":"V4o-O0","type-secondary":"YB-SFw","uuiTypography":"tAMCWn","heroHeader":"s8N5UW","promoHeader":"w6tQ5R","uuiCritical":"FI2hEx","uuiInfo":"B0spR4","uuiSuccess":"I1w4CW","uuiWarning":"hwADsG","uuiHighlight":"ip6hUl","uuiTypographySize12":"U5ljdd","uuiTypographySize14":"W7FbAB","uuiTypographySize16":"QySmlq","typePrimary":"V4o-O0","typeSecondary":"YB-SFw"};
+var css$b = {"uui-typography":"_7WcSZ4","hero-header":"Cd0qAL","promo-header":"-dSVKH","uui-critical":"S4tItA","uui-info":"RzkpKA","uui-success":"_6Cg4Zf","uui-warning":"SXNR0h","uui-highlight":"jGm9be","uui-typography-size-12":"Gix2K4","uui-typography-size-14":"ftkulG","uui-typography-size-16":"xqFxtm","root":"sLljD5","type-primary":"_31yC8T","type-secondary":"bP5Fms","uuiTypography":"_7WcSZ4","heroHeader":"Cd0qAL","promoHeader":"-dSVKH","uuiCritical":"S4tItA","uuiInfo":"RzkpKA","uuiSuccess":"_6Cg4Zf","uuiWarning":"SXNR0h","uuiHighlight":"jGm9be","uuiTypographySize12":"Gix2K4","uuiTypographySize14":"ftkulG","uuiTypographySize16":"xqFxtm","typePrimary":"_31yC8T","typeSecondary":"bP5Fms"};
 
 const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { type } = props, clickableProps = __rest(props, ["type"]);
@@ -4940,7 +5023,7 @@ const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         props.isDropdown && (React.createElement(IconContainer, { icon: ForwardRef$P, flipY: props.isOpen }))));
 });
 
-var css$a = {"dropdown-body":"x3wuns","dropdownBody":"x3wuns"};
+var css$a = {"dropdown-body":"_4AK4XV","dropdownBody":"_4AK4XV"};
 
 class MainMenuDropdown extends React.Component {
     render() {
@@ -4995,12 +5078,12 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
 };
 var ForwardRef$1 = /*#__PURE__*/forwardRef(SvgNavigationGlobalMenuOutlineOutline);
 
-var css$9 = {"global-menu-btn":"Q98fT4","global-menu-icon":"pWr5EE","globalMenuBtn":"Q98fT4","globalMenuIcon":"pWr5EE"};
+var css$9 = {"global-menu-btn":"bChZQi","global-menu-icon":"RGtXj1","globalMenuBtn":"bChZQi","globalMenuIcon":"RGtXj1"};
 
 const GlobalMenu = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("button", Object.assign({ 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":"gqu-a9","open":"IXkE1y","folding-arrow":"ez-nIj","foldingArrow":"ez-nIj"};
+var css$8 = {"container":"n3hyXQ","open":"EbBSmf","folding-arrow":"m8PIG9","foldingArrow":"m8PIG9"};
 
 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 },
     React.createElement(Avatar, { size: "36", img: props.avatarUrl }),
@@ -5008,18 +5091,18 @@ 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":"nYNGlA","searchInput":"nYNGlA"};
+var css$7 = {"search-input":"hjTARJ","searchInput":"hjTARJ"};
 
 const MainMenuSearch = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement(IEditableDebouncer, Object.assign({}, props, { render: (iEditable) => {
         var _a;
         return (React.createElement(TextInput$1, Object.assign({ iconPosition: "left", icon: ForwardRef$N, cancelIcon: ((_a = props.value) === null || _a === void 0 ? void 0 : _a.length) > 0 && ForwardRef$Q }, props, iEditable, { ref: ref, cx: cx$1(css$7.searchInput, props.cx) }, props.rawProps)));
     } }))));
 
-var css$6 = {"container":"M4P1RR"};
+var css$6 = {"container":"F9R3-N"};
 
 const MainMenuIcon = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement(IconButton, Object.assign({ ref: ref, icon: props.icon, cx: cx$1(props.cx, css$6.container) }, props))));
 
-var css$5 = {"root":"bv3-rM"};
+var css$5 = {"root":"PYOBf5"};
 
 const Anchor = /* @__PURE__ */withMods(Anchor$1, () => [css$5.root]);
 
@@ -5077,7 +5160,7 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgFileCloudUploadFill);
 
-var css$4 = {"root":"KKW0eo","drop-start":"Vjpx5W","drop-over":"sjr4CF","link":"_3UitLJ","drop-area":"Yy5NvG","drop-caption":"c0lAec","icon-blue":"HcdHBm","dropStart":"Vjpx5W","dropOver":"sjr4CF","dropArea":"Yy5NvG","dropCaption":"c0lAec","iconBlue":"HcdHBm"};
+var css$4 = {"root":"P6EKub","drop-start":"kE84I2","drop-over":"Ft3Uej","link":"D31y-c","drop-area":"RgCV-i","drop-caption":"AFIjyA","icon-blue":"IaLOcU","dropStart":"kE84I2","dropOver":"Ft3Uej","dropArea":"RgCV-i","dropCaption":"AFIjyA","iconBlue":"IaLOcU"};
 
 function DropSpot(props) {
     const getInfoText = typeof props.infoText === 'string'
@@ -5095,9 +5178,9 @@ function DropSpot(props) {
     return React.createElement(DropSpot$1, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
 }
 
-var css$3 = {"uui-typography":"_4YOQC3","hero-header":"_6L0-1h","promo-header":"g-yA3O","uui-critical":"qmMIXE","uui-info":"QpmsM2","uui-success":"dBpVRh","uui-warning":"D-iHug","uui-highlight":"_1HEJb-","uui-typography-size-12":"en6UVK","uui-typography-size-14":"_82lZx5","uui-typography-size-16":"ePkYlx","root":"p8AX8h","file-name":"_1M1otj","default-color":"s22H6-","doc-color":"Kuut4t","xls-color":"IcrZLJ","pdf-color":"_8NU--y","movie-color":"gwsTeN","img-color":"_2zsgjm","mov-color":"SyOBX9","error-block":"w13L7e","icons-block":"ZRKAlG","uuiTypography":"_4YOQC3","heroHeader":"_6L0-1h","promoHeader":"g-yA3O","uuiCritical":"qmMIXE","uuiInfo":"QpmsM2","uuiSuccess":"dBpVRh","uuiWarning":"D-iHug","uuiHighlight":"_1HEJb-","uuiTypographySize12":"en6UVK","uuiTypographySize14":"_82lZx5","uuiTypographySize16":"ePkYlx","fileName":"_1M1otj","defaultColor":"s22H6-","docColor":"Kuut4t","xlsColor":"IcrZLJ","pdfColor":"_8NU--y","movieColor":"gwsTeN","imgColor":"_2zsgjm","movColor":"SyOBX9","errorBlock":"w13L7e","iconsBlock":"ZRKAlG"};
+var css$3 = {"uui-typography":"_3xAshD","hero-header":"Omt8rO","promo-header":"PiAdgp","uui-critical":"lWPNa2","uui-info":"S0vyWP","uui-success":"DTReHq","uui-warning":"P647AL","uui-highlight":"sSvzSv","uui-typography-size-12":"E1MJ56","uui-typography-size-14":"IEfu0E","uui-typography-size-16":"_1K2uA-","root":"YQNwD6","file-name":"-yYOzJ","default-color":"jHC0Rs","doc-color":"n-5d-G","xls-color":"bOzUTp","pdf-color":"LNlZpp","movie-color":"ZsJeDN","img-color":"_31P70J","mov-color":"lnvT5F","error-block":"SlvlhR","icons-block":"VDiSmQ","uuiTypography":"_3xAshD","heroHeader":"Omt8rO","promoHeader":"PiAdgp","uuiCritical":"lWPNa2","uuiInfo":"S0vyWP","uuiSuccess":"DTReHq","uuiWarning":"P647AL","uuiHighlight":"sSvzSv","uuiTypographySize12":"E1MJ56","uuiTypographySize14":"IEfu0E","uuiTypographySize16":"_1K2uA-","fileName":"-yYOzJ","defaultColor":"jHC0Rs","docColor":"n-5d-G","xlsColor":"bOzUTp","pdfColor":"LNlZpp","movieColor":"ZsJeDN","imgColor":"_31P70J","movColor":"lnvT5F","errorBlock":"SlvlhR","iconsBlock":"VDiSmQ"};
 
-var css$2 = {"root":"_0vTI6H"};
+var css$2 = {"root":"xRHHnc"};
 
 const SvgCircleProgress = /* @__PURE__ */React.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
@@ -5222,7 +5305,7 @@ const getErrorPageConfig = () => ({
     },
 });
 
-var css$1 = {"container":"FfPath"};
+var css$1 = {"container":"MIS038"};
 
 const ErrorPage = (props) => {
     const isMobileScreen = isMobile();
@@ -5233,7 +5316,7 @@ const ErrorPage = (props) => {
             React__default.createElement("div", { className: "uui-error-subtitle" }, props.subtitle))));
 };
 
-var css = {"recovery-spinner":"XcGgZy","recovery-message":"_2uQJ4Z","modal-blocker":"L3B00D","modalFadeIn":"Xtv6rT","recoverySpinner":"XcGgZy","recoveryMessage":"_2uQJ4Z","modalBlocker":"L3B00D"};
+var css = {"recovery-spinner":"ghTwsA","recovery-message":"Y9mSeI","modal-blocker":"lUmm5Y","modalFadeIn":"-smeL9","recoverySpinner":"ghTwsA","recoveryMessage":"Y9mSeI","modalBlocker":"lUmm5Y"};
 
 function ErrorHandler(props) {
     const { uuiNotifications, uuiModals, uuiApi } = useUuiContext();