@epam/uui 5.13.2-rc.0 → 5.13.3-beta.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';
+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, 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, getDir, 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 { withMods, devLogger, uuiElement, cx as cx$1, uuiMarkers, IEditableDebouncer, UuiContext, uuiMod, getDir, isEventTargetInsideClickable, 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';
@@ -149,7 +149,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#bx7xymqaor0hb2xlf_a)"
+    clipPath: "url(#7iyl3cwgzxp868o8h_a)"
   }, _path$J || (_path$J = /*#__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"
@@ -170,7 +170,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: "bx7xymg6ad8hy0w6p_b",
+    id: "7iyl3cyil2nzap39m_b",
     style: {
       maskType: "alpha"
     },
@@ -183,7 +183,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(#bx7xymg6ad8hy0w6p_b)",
+    mask: "url(#7iyl3cyil2nzap39m_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
@@ -269,7 +269,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: "bx7xymqaor0hb2xlf_a"
+    id: "7iyl3cwgzxp868o8h_a"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
@@ -826,32 +826,12 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
 };
 var ForwardRef$b = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
 
-const fileIcons = {
-    docIcon: ForwardRef$l,
-    exelIcon: ForwardRef$k,
-    pdfIcon: ForwardRef$j,
-    imgIcon: ForwardRef$i,
-    videoIcon: ForwardRef$h,
-    tableIcon: ForwardRef$g,
-    textIcon: ForwardRef$f,
-    mailIcon: ForwardRef$e,
-    fileIcon: ForwardRef$d,
-    closeIcon: ForwardRef$R,
-    errorIcon: ForwardRef$m,
-};
 const accordionSettings = {
     icons: {
         dropdownIcon: ForwardRef$Q,
     },
 };
 const alertSettings = {
-    sizes: {
-        default: '48',
-        actionMap: {
-            36: '24',
-            48: '30',
-        },
-    },
     icons: {
         closeIcon: ForwardRef$R,
         infoIcon: ForwardRef$K,
@@ -859,6 +839,13 @@ const alertSettings = {
         warningIcon: ForwardRef$n,
         errorIcon: ForwardRef$m,
     },
+    sizes: {
+        default: '48',
+        actionMap: {
+            36: '24',
+            48: '30',
+        },
+    },
 };
 const badgeSettings = {
     icons: {
@@ -913,6 +900,9 @@ const dataTableSettings = {
             foldIcon: ForwardRef$x,
             unfoldIcon: ForwardRef$w,
         },
+        body: {
+            foldingIcon: ForwardRef$Q,
+        },
         columnsConfigurationModal: {
             dragIndicator: ForwardRef$G,
             lockIcon: ForwardRef$D,
@@ -926,54 +916,53 @@ const dataTableSettings = {
     },
     sizes: {
         header: {
-            defaultRow: '36',
-            defaultCell: '36',
-            defaultResizeMarker: '12',
-            defaultCellPadding: '12',
-            defaultCellPaddingEdge: '24',
-            defaultGroupCell: '36',
-            defaultGroupCellPadding: '12',
-            defaultGroupCellPaddingEdge: '24',
-            cellCheckboxMap: {
+            row: '36',
+            iconMap: {
                 36: '18',
                 48: '18',
                 60: '18',
             },
-            cellIconMap: {
+        },
+        body: {
+            row: '36',
+            checkboxMap: {
+                24: '12',
+                30: '18',
                 36: '18',
+                42: '18',
                 48: '18',
                 60: '18',
             },
-            captionFontSize: '14',
-            captionFontWeight: '400',
-            captionSize: '18',
-            captionUppercase: '12',
-            groupCellCaptionFontSize: '14',
-            groupCellCaptionFontWeight: '400',
-            groupCellCaptionSize: '18',
-            groupCellCaptionUppercase: '12',
-        },
-        body: {
-            defaultRow: '36',
-            defaultCell: '36',
-            defaultCellPadding: '12',
-            defaultCellPaddingEdge: '24',
-            cellTextMap: {
-                24: '24',
-                30: '30',
-                36: '36',
-                42: '42',
-                48: '48',
-                60: '48',
+            iconMap: {
+                24: '12',
+                30: '18',
+                36: '18',
+                42: '24',
+                48: '24',
+                60: '24',
+            },
+            indentUnitMap: {
+                24: 6,
+                30: 12,
+                36: 12,
+                42: 24,
+                48: 24,
+                60: 24,
+            },
+            indentWidthMap: {
+                24: 12,
+                30: 18,
+                36: 18,
+                42: 24,
+                48: 24,
+                60: 24,
             },
         },
         columnsConfigurationModal: {
             columnRow: '30',
             countIndicator: '18',
-            subgroupIcon: '18',
             menuButton: '30',
             searchInput: '30',
-            width: 560,
         },
     },
 };
@@ -994,7 +983,8 @@ const datePickerSettings = {
         },
     },
     sizes: {
-        default: '36',
+        body: '36',
+        input: '36',
     },
 };
 const fileCardSettings = {
@@ -1024,14 +1014,6 @@ const filtersPanelSettings = {
     },
     sizes: {
         default: '36',
-        pickerInput: {
-            body: {
-                searchInput: '36',
-                row: '36',
-                rowItem: '36',
-                footer: '36',
-            },
-        },
     },
 };
 const iconButtonSettings = {
@@ -1054,22 +1036,13 @@ const linkButtonSettings = {
     },
     sizes: {
         default: '36',
-        defaultWeight: 'semibold',
     },
+    weight: 'semibold',
 };
 const modalSettings = {
     icons: {
         closeIcon: ForwardRef$R,
     },
-    sizes: {
-        defaultWidth: 420,
-        defaultMaxHeight: '80dvh',
-        defaultMobileMaxHeight: '100dvh',
-        defaultHeaderPadding: '24',
-        defaultFooterColumnGap: '12',
-        defaultFooterPadding: '24',
-        defaultFooterVPadding: '24',
-    },
 };
 const notificationCardSettings = {
     icons: {
@@ -1107,8 +1080,7 @@ const pickerInputSettings = {
             dropdownIcon: ForwardRef$Q,
         },
         body: {
-            selectIcon: ForwardRef$P,
-            boldSelectIcon: ForwardRef$r,
+            selectIcon: (size) => size < '30' ? ForwardRef$r : ForwardRef$P,
             pickerBodyMobileHeaderCloseIcon: ForwardRef$R,
             modalNotFoundSearchIcon: ForwardRef$b,
         },
@@ -1116,7 +1088,7 @@ const pickerInputSettings = {
     sizes: {
         toggler: {
             default: '36',
-            defaultTag: '36',
+            tag: '36',
             tagMap: {
                 24: '18',
                 30: '18',
@@ -1129,8 +1101,7 @@ const pickerInputSettings = {
             maxHeight: 300,
             minWidth: 360,
             padding: '12',
-            defaultRow: '36',
-            defaultItem: '36',
+            row: '36',
             itemAvatarMap: {
                 24: '18',
                 30: '24',
@@ -1152,25 +1123,13 @@ const pickerInputSettings = {
                 42: '6',
                 48: '9',
             },
-            cellIsBoldSelectionIcon: {
-                24: true,
-            },
-            cellTextMap: {
-                24: '24',
-                30: '30',
-                36: '36',
-                42: '42',
-                48: '48',
-            },
-            cellIconMap: {
+            selectIconMap: {
                 24: '12',
                 30: '18',
                 36: '18',
                 42: '24',
                 48: '24',
             },
-            cellPadding: '24',
-            defaultFooter: '36',
             footerSwitchMap: {
                 24: '12',
                 30: '18',
@@ -1178,12 +1137,9 @@ const pickerInputSettings = {
                 42: '24',
                 48: '24',
             },
-            mobileHeaderTitleSize: '48',
             mobileFooterLinkButton: '48',
             mobileRow: '48',
             mobileSearchInput: '48',
-            modalRow: '36',
-            modalPadding: '24',
         },
     },
 };
@@ -1203,6 +1159,7 @@ const rangeDatePickerSettings = {
     },
     sizes: {
         default: '36',
+        preset: '24',
     },
 };
 const ratingSettings = {
@@ -1219,48 +1176,6 @@ const richTextViewSettings = {
         default: '14',
     },
 };
-const rowAddonsSettings = {
-    icons: {
-        foldingIcon: ForwardRef$Q,
-    },
-    sizes: {
-        defaultIcon: '18',
-        defaultIndentUnit: 24,
-        defaultIndentWidth: 18,
-        checkboxMap: {
-            24: '12',
-            30: '18',
-            36: '18',
-            42: '18',
-            48: '18',
-            60: '18',
-        },
-        iconMap: {
-            24: '12',
-            30: '18',
-            36: '18',
-            42: '24',
-            48: '24',
-            60: '24',
-        },
-        indentUnitMap: {
-            24: 6,
-            30: 12,
-            36: 12,
-            42: 24,
-            48: 24,
-            60: 24,
-        },
-        indentWidthMap: {
-            24: 12,
-            30: 18,
-            36: 18,
-            42: 24,
-            48: 24,
-            60: 24,
-        },
-    },
-};
 const statusIndicatorSettings = {
     sizes: {
         default: '24',
@@ -1348,7 +1263,6 @@ const settings = {
     rangeDatePicker: rangeDatePickerSettings,
     rating: ratingSettings,
     richTextView: richTextViewSettings,
-    rowAddons: rowAddonsSettings,
     statusIndicator: statusIndicatorSettings,
     switch: switchSettings,
     tabButton: tabButtonSettings,
@@ -1358,7 +1272,7 @@ const settings = {
     textInput: textInputSettings,
 };
 
-var css$1y = {"root":"d-vtb7"};
+var css$1y = {"root":"RXQhYs"};
 
 function applyButtonMods(mods) {
     return [
@@ -1376,7 +1290,7 @@ const Button = /* @__PURE__ */withMods(uuiComponents.Button, applyButtonMods, ()
     };
 });
 
-var css$1x = {"root":"NEjHvz"};
+var css$1x = {"root":"woHPv3"};
 
 function applyIconButtonMods(props) {
     return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1x.root];
@@ -1413,7 +1327,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$1w = {"root":"Y-9s1L"};
+var css$1w = {"root":"ZTC43J"};
 
 const DEFAULT_COLOR = 'primary';
 const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
@@ -1434,7 +1348,7 @@ const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         `uui-color-${props.color || DEFAULT_COLOR}`,
         props.cx,
     ];
-    const captionStyles = cx(uuiElement.caption, props.underline && `uui-underline-${props.underline}`, `uui-link-button-weight-${props.weight || settings.linkButton.sizes.defaultWeight}`);
+    const captionStyles = cx(uuiElement.caption, props.underline && `uui-underline-${props.underline}`, `uui-link-button-weight-${props.weight || settings.linkButton.weight}`);
     const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.linkButton.icons.dropdownIcon;
     return (React.createElement(Clickable, { ...props, type: "button", cx: rootStyles, ref: ref },
         props.icon && props.iconPosition !== 'right' && (React.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
@@ -1443,7 +1357,7 @@ const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         props.isDropdown && (React.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1v = {"root":"_4b-Y4f"};
+var css$1v = {"root":"_1frMjM"};
 
 const CountIndicator = /* @__PURE__ */forwardRef((props, ref) => {
     return (React__default.createElement("div", { ref: ref, className: cx([
@@ -1455,7 +1369,7 @@ const CountIndicator = /* @__PURE__ */forwardRef((props, ref) => {
         ]) }, props.caption));
 });
 
-var css$1u = {"root":"QwgtNI","withNotify":"kmXrqU"};
+var css$1u = {"root":"_1VahVv","withNotify":"_8kfEZv"};
 
 const TabButton = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const styles = [
@@ -1483,14 +1397,14 @@ const TabButton = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         props.onClear && !props.isDisabled && (React__default.createElement(IconContainer, { cx: uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
 });
 
-var css$1t = {"root":"duYBoK"};
+var css$1t = {"root":"IUef9N"};
 
 function applyVerticalTabButtonMods() {
     return [css$1t.root, 'uui-vertical-tab-button'];
 }
 const VerticalTabButton = /* @__PURE__ */withMods(TabButton, applyVerticalTabButtonMods);
 
-var css$1s = {"root":"vi8-KJ","mode-cell":"c2YyvB","modeCell":"c2YyvB"};
+var css$1s = {"root":"Bp2UHf","mode-cell":"_1Uqtfw","modeCell":"_1Uqtfw"};
 
 function applyCheckboxMods(mods) {
     return [
@@ -1508,7 +1422,7 @@ const applyUUICheckboxProps = (props) => {
 };
 const Checkbox = /* @__PURE__ */withMods(uuiComponents.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$1r = {"root":"_2e9UJQ"};
+var css$1r = {"root":"_-5DmoE"};
 
 function applyRadioInputMods(mods) {
     return [
@@ -1520,7 +1434,7 @@ function applyRadioInputMods(mods) {
 }
 const RadioInput = /* @__PURE__ */withMods(RadioInput$1, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : settings.radioInput.icons.dotIcon }));
 
-var css$1q = {"root":"jwSD61"};
+var css$1q = {"root":"AjuVtG"};
 
 function applySwitchMods(mods) {
     return [
@@ -1544,7 +1458,7 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var textInputCss = {"root":"xhpwcN","mode-form":"gn91Dj","modeForm":"gn91Dj","mode-inline":"niekkE","modeInline":"niekkE","mode-cell":"EQ0J1q","modeCell":"EQ0J1q"};
+var textInputCss = {"root":"TTfjgk","mode-form":"Qk2o3L","modeForm":"Qk2o3L","mode-inline":"dm1GgI","modeInline":"dm1GgI","mode-cell":"Fl6bK4","modeCell":"Fl6bK4"};
 
 const DEFAULT_MODE$3 = EditMode.FORM;
 function applyTextInputMods(mods) {
@@ -1569,7 +1483,7 @@ const SearchInput = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         } }));
 });
 
-var css$1p = {"root":"cO-Wk7"};
+var css$1p = {"root":"ZwTYx-"};
 
 const ControlGroup = /* @__PURE__ */withMods(ControlGroup$1, () => [css$1p.root, 'uui-control-group']);
 
@@ -1585,7 +1499,7 @@ function MultiSwitchComponent(props, ref) {
 }
 const MultiSwitch = /* @__PURE__ */React.forwardRef(MultiSwitchComponent);
 
-var css$1o = {"root":"OeiA-z","mode-form":"wVjIe5","modeForm":"wVjIe5","mode-cell":"-aUjVU","modeCell":"-aUjVU"};
+var css$1o = {"root":"xoKFNg","mode-form":"_1cPmVG","modeForm":"_1cPmVG","mode-cell":"w5ilFU","modeCell":"w5ilFU"};
 
 const DEFAULT_MODE$2 = EditMode.FORM;
 function applyNumericInputMods(mods) {
@@ -1605,7 +1519,7 @@ const NumericInput = /* @__PURE__ */withMods(NumericInput$1, applyNumericInputMo
     };
 });
 
-var css$1n = {"root":"_3Wa1M2","mode-form":"TC0tXV","modeForm":"TC0tXV","mode-cell":"rtq1U8","modeCell":"rtq1U8","mode-inline":"DTfoE8","modeInline":"DTfoE8"};
+var css$1n = {"root":"jPjqE0","mode-form":"LIym9b","modeForm":"LIym9b","mode-cell":"P-JaPM","modeCell":"P-JaPM","mode-inline":"a2Oscb","modeInline":"a2Oscb"};
 
 const DEFAULT_MODE$1 = EditMode.FORM;
 function applyTextAreaMods(mods) {
@@ -1646,7 +1560,7 @@ function TREE_SHAKEABLE_INIT$1() {
     };
 }
 
-var css$1m = {"root":"VtKLf9","main-path":"_3fUaYd","mainPath":"_3fUaYd","content-wrapper":"XQwD-4","contentWrapper":"XQwD-4","content":"YxjJ-A","action-wrapper":"PC4lfh","actionWrapper":"PC4lfh","icon-wrapper":"j7T0Dt","iconWrapper":"j7T0Dt","icon":"sPXMNQ","close-icon":"_3s0v2Y","closeIcon":"_3s0v2Y"};
+var css$1m = {"root":"ECudEW","main-path":"DlNW0B","mainPath":"DlNW0B","content-wrapper":"FPYnTZ","contentWrapper":"FPYnTZ","content":"kobPhA","action-wrapper":"hcEtUS","actionWrapper":"hcEtUS","icon-wrapper":"U11IQC","iconWrapper":"U11IQC","icon":"_40URZK","close-icon":"QuRrST","closeIcon":"QuRrST"};
 
 const Alert = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("div", { role: "alert", ref: ref, className: cx('uui-alert', css$1m.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
     React.createElement("div", { className: css$1m.mainPath },
@@ -1664,7 +1578,7 @@ const ErrorAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createE
 
 const Dropdown = /* @__PURE__ */withMods(Dropdown$1);
 
-var css$1l = {"root":"SPnwej"};
+var css$1l = {"root":"CZcvSG"};
 
 function applyDropdownContainerMods(mods) {
     return [
@@ -1675,7 +1589,7 @@ function applyDropdownContainerMods(mods) {
 }
 const DropdownContainer = /* @__PURE__ */withMods(uuiComponents.DropdownContainer, applyDropdownContainerMods);
 
-var css$1k = {"submenu-root-item-rtl":"x82ltF","submenuRootItemRtl":"x82ltF","icon-after":"-MxcoL","iconAfter":"-MxcoL","submenu-root-item":"NyPR1f","submenuRootItem":"NyPR1f","icon-check":"ESimiz","iconCheck":"ESimiz","splitter-root":"bISovD","splitterRoot":"bISovD","splitter":"Jz38ZD","header-root":"UX-fSE","headerRoot":"UX-fSE","item-root":"yRCQfp","itemRoot":"yRCQfp","icon":"qUolpc","link":"PbM3Tj","indent":"tbRZrm","selected-mark":"VEte4G","selectedMark":"VEte4G"};
+var css$1k = {"submenu-root-item-rtl":"ui-EyN","submenuRootItemRtl":"ui-EyN","icon-after":"udGQs2","iconAfter":"udGQs2","submenu-root-item":"hjiEZ1","submenuRootItem":"hjiEZ1","icon-check":"UjWDqA","iconCheck":"UjWDqA","splitter-root":"XQTxvz","splitterRoot":"XQTxvz","splitter":"TOPnX4","header-root":"LkLeGU","headerRoot":"LkLeGU","item-root":"THqDab","itemRoot":"THqDab","icon":"ya3pbi","link":"SwUT5A","indent":"cKzxGp","selected-mark":"_3XpN6G","selectedMark":"_3XpN6G"};
 
 var IDropdownControlKeys;
 (function (IDropdownControlKeys) {
@@ -1722,7 +1636,7 @@ const DropdownMenuButton = /* @__PURE__ */React__default.forwardRef((props, ref)
     const handleClick = (event) => {
         if (isDisabled || !onClick)
             return;
-        onClick(event);
+        !isEventTargetInsideClickable(event) && onClick(event);
         context.uuiAnalytics.sendEvent(props.clickAnalyticsEvent);
     };
     const handleOpenDropdown = (event) => {
@@ -1749,12 +1663,8 @@ const DropdownMenuButton = /* @__PURE__ */React__default.forwardRef((props, ref)
                 iconElement))));
     };
     const isAnchor = Boolean(link || href);
-    const itemClassNames = cx$1(props.cx, css$1k.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened);
-    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$1k.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,
-        }, cx: itemClassNames, onClick: handleClick, ref: ref },
+    const itemClassNames = cx$1(props.cx, css$1k.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened, (!isDisabled && onClick) && uuiMarkers.clickable);
+    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$1k.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isLinkActive: isActive, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref },
         getMenuButtonContent(),
         isSelected && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(FlexSpacer, null),
@@ -1802,14 +1712,14 @@ function DropdownMenuSwitchButton(props) {
             onHandleValueChange(!isSelected);
         }
     };
-    return (React__default.createElement(FlexRow$1, { cx: cx$1(props.cx, css$1k.itemRoot, isDisabled && uuiMod.disabled), onClick: () => onHandleValueChange(!isSelected), rawProps: { role: 'menuitem', onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 } },
+    return (React__default.createElement("div", { className: cx$1(props.cx, css$1k.itemRoot, isDisabled && uuiMod.disabled, (!isDisabled || onValueChange) && uuiMarkers.clickable), onClick: () => onHandleValueChange(!isSelected), role: "menuitem", onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 },
         icon && React__default.createElement(IconContainer, { icon: icon, cx: css$1k.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$1j = {"root":"n4Qxi1","mode-block":"_5E0En6","modeBlock":"_5E0En6","mode-inline":"DXmCyy","modeInline":"DXmCyy","padding-0":"_9pkYkk","padding0":"_9pkYkk","padding-6":"k-pX-X","padding6":"k-pX-X","padding-12":"sb0Ctd","padding12":"sb0Ctd","padding-18":"tK6Rsv","padding18":"tK6Rsv"};
+var css$1j = {"root":"_3131M7","mode-block":"Ywu26i","modeBlock":"Ywu26i","mode-inline":"_9JcrPO","modeInline":"_9JcrPO","padding-0":"_9hrhzr","padding0":"_9hrhzr","padding-6":"lfXkkY","padding6":"lfXkkY","padding-12":"Dv6x4U","padding12":"Dv6x4U","padding-18":"ZH9YIu","padding18":"ZH9YIu"};
 
 function applyAccordionMods(mods) {
     return [
@@ -1822,31 +1732,52 @@ const Accordion = /* @__PURE__ */withMods(uuiComponents.Accordion, applyAccordio
     dropdownIcon: mods.dropdownIcon !== null && settings.accordion.icons.dropdownIcon,
 }));
 
-var css$1i = {"root":"p3SoMF","border-top":"r2rl2H","borderTop":"r2rl2H","border-bottom":"P5sZcb","borderBottom":"P5sZcb","top-shadow":"urNkpU","topShadow":"urNkpU","padding-6":"_68obJF","padding6":"_68obJF","padding-12":"JaeZBO","padding12":"JaeZBO","padding-18":"_22bpfQ","padding18":"_22bpfQ","padding-24":"qo3lI-","padding24":"qo3lI-","margin-24":"szsB9d","margin24":"szsB9d","margin-12":"_35EtG0","margin12":"_35EtG0","vPadding-12":"PF1fJe","vPadding12":"PF1fJe","vPadding-18":"_79yHKt","vPadding18":"_79yHKt","vPadding-24":"e8K1l7","vPadding24":"e8K1l7","vPadding-36":"g3ecEa","vPadding36":"g3ecEa","vPadding-48":"AMABAP","vPadding48":"AMABAP","spacing-6":"IJHJxy","spacing6":"IJHJxy","spacing-12":"pgG52G","spacing12":"pgG52G","spacing-18":"HPlRa3","spacing18":"HPlRa3","uui-surface-main":"_-8YYsY","uuiSurfaceMain":"_-8YYsY"};
+var css$1i = {"root":"ffZ20N","align-items":"bCkRwS","alignItems":"bCkRwS","justify-content":"Hq1Sgc","justifyContent":"Hq1Sgc","border-top":"RM3135","borderTop":"RM3135","border-bottom":"U6UsgT","borderBottom":"U6UsgT","top-shadow":"kOa8dh","topShadow":"kOa8dh","padding":"G1JmsP","margin":"l7a1LW","vPadding":"zhL16N","column-gap":"OwjWXm","columnGap":"OwjWXm","row-gap":"LHmp2K","rowGap":"LHmp2K","spacing-6":"UQtxZt","spacing6":"UQtxZt","spacing-12":"Ok5Ksq","spacing12":"Ok5Ksq","spacing-18":"_2QT6CJ","spacing18":"_2QT6CJ","uui-surface-main":"xKVdX7","uuiSurfaceMain":"xKVdX7"};
 
 const FlexCell = /* @__PURE__ */withMods(FlexCell$1, () => [css$1i.flexCell]);
 
-const FlexRow = /* @__PURE__ */withMods(FlexRow$1, (props) => {
+const FlexRow = /* @__PURE__ */forwardRef((props, ref) => {
     if (process.env.NODE_ENV !== "production") {
         if (props.spacing) {
             devLogger.warn('[FlexRow]: The `spacing` property is deprecated and will be removed in future versions. Please use `columnGap` instead.');
         }
     }
-    return [
+    const classNames = cx$1([
         css$1i.root,
+        'uui-flex-row',
+        props.onClick && uuiMarkers.clickable,
+        props.cx,
         props.size !== null && 'uui-size-' + (props.size || settings.flexRow.sizes.default),
-        props.padding && css$1i['padding-' + props.padding],
-        props.vPadding && css$1i['vPadding-' + props.vPadding],
-        props.margin && css$1i['margin-' + props.margin],
+        props.alignItems && css$1i.alignItems,
+        props.justifyContent && css$1i.justifyContent,
+        props.padding && css$1i.padding,
+        props.vPadding && css$1i.vPadding,
+        props.margin && css$1i.margin,
         props.topShadow && css$1i.topShadow,
         props.borderBottom && css$1i.borderBottom,
         props.borderTop && css$1i.borderTop,
+        props.columnGap && css$1i.columnGap,
+        props.rowGap && css$1i.rowGap,
         props.spacing && css$1i['spacing-' + props.spacing],
         props.background && css$1i[`uui-${props.background}`],
-    ];
+    ]);
+    const style = {
+        ...(props.alignItems && { '--uui-flex-row-align-items': props.alignItems }),
+        ...(props.justifyContent && { '--uui-flex-row-justify-content': props.justifyContent }),
+        ...(props.columnGap && { '--uui-flex-row-column-gap': `${props.columnGap}px` }),
+        ...(props.rowGap && { '--uui-flex-row-row-gap': `${props.rowGap}px` }),
+        ...(props.padding && { '--uui-flex-row-padding': `${props.padding}px` }),
+        ...(props.vPadding && { '--uui-flex-row-v-padding': `${props.vPadding}px` }),
+        ...(props.margin && { '--uui-flex-row-margin': `${props.margin}px` }),
+        ...(props.spacing && { '--uui-flex-row-spacing': `${props.spacing}px` }),
+    };
+    return (React__default.createElement("div", { ref: ref, onClick: props.onClick ? (e) => !isEventTargetInsideClickable(e) && props.onClick(e) : undefined, className: classNames, ...props.rawProps, style: {
+            ...style,
+            ...props.rawProps?.style,
+        } }, props.children));
 });
 
-var css$1h = {"root":"wTl4-z","margin-24":"_9gWLqd","margin24":"_9gWLqd","padding-12":"oQPlAf","padding12":"oQPlAf","padding-24":"MjNo7N","padding24":"MjNo7N","shadow":"F9srRs","uui-surface-main":"ISvApt","uuiSurfaceMain":"ISvApt"};
+var css$1h = {"root":"iQNfWC","margin-24":"Qxkdz-","margin24":"Qxkdz-","padding-12":"Jb6NWH","padding12":"Jb6NWH","padding-24":"x9Bc-Q","padding24":"x9Bc-Q","shadow":"SV6nO9","uui-surface-main":"zKARob","uuiSurfaceMain":"zKARob"};
 
 const Panel = /* @__PURE__ */withMods(VPanel, (props) => [
     'uui-panel',
@@ -1856,7 +1787,7 @@ const Panel = /* @__PURE__ */withMods(VPanel, (props) => [
     props.background && css$1h[`uui-${props.background}`],
 ]);
 
-var css$1g = {"root":"GCj2tU"};
+var css$1g = {"root":"H2dbpX"};
 
 function applyTooltipMods(mods) {
     return [
@@ -1866,7 +1797,7 @@ function applyTooltipMods(mods) {
 }
 const Tooltip = /* @__PURE__ */withMods(uuiComponents.Tooltip, applyTooltipMods);
 
-var css$1f = {"root":"mm3dGl"};
+var css$1f = {"root":"k-D3Zk"};
 
 function applyLabeledInputMods(mods) {
     return [
@@ -1883,7 +1814,7 @@ function applyLabeledInputProps(props) {
 }
 const LabeledInput = /* @__PURE__ */withMods(uuiComponents.LabeledInput, applyLabeledInputMods, applyLabeledInputProps);
 
-var css$1e = {"root":"MnJkgX"};
+var css$1e = {"root":"Mx3kFA"};
 
 function RadioGroup(props) {
     const direction = props.direction || 'vertical';
@@ -1898,7 +1829,7 @@ function RadioGroup(props) {
     })));
 }
 
-var css$1d = {"root":"LY2aVp"};
+var css$1d = {"root":"W9MadD"};
 
 function applyScrollBarsMods() {
     return [
@@ -1907,13 +1838,13 @@ function applyScrollBarsMods() {
 }
 const ScrollBars = /* @__PURE__ */withMods(ScrollBars$1, applyScrollBarsMods);
 
-var css$1c = {"scroll-container":"-U300R","scrollContainer":"-U300R","list-container":"W87Nlo","listContainer":"W87Nlo"};
+var css$1c = {"scroll-container":"r5ymgV","scrollContainer":"r5ymgV","list-container":"vL7G2y","listContainer":"vL7G2y"};
 
-var css$1b = {"root":"_717rdm"};
+var css$1b = {"root":"eaMei5"};
 
 const AvatarStack = /* @__PURE__ */withMods(AvatarStack$1, () => [css$1b.root]);
 
-var css$1a = {"root":"HKEOZi"};
+var css$1a = {"root":"QXWo5S"};
 
 const DEFAULT_FILL = 'solid';
 function applyBadgeMods(mods) {
@@ -1941,7 +1872,7 @@ const Badge = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$19 = {"root":"yOJ9YT"};
+var css$19 = {"root":"_4g5FnY"};
 
 function applyTagMods(props) {
     return [
@@ -1969,14 +1900,14 @@ 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$18 = {"root":"pcqep3","uui-spinner":"K6pzxh","uuiSpinner":"K6pzxh"};
+var css$18 = {"root":"m3Q71r","uui-spinner":"YQGQbP","uuiSpinner":"YQGQbP"};
 
 function applySpinnerMods() {
     return [css$18.root, 'uui-spinner'];
 }
 const Spinner = /* @__PURE__ */withMods(Spinner$1, applySpinnerMods);
 
-var css$17 = {"root":"HIxlcB","page":"NsgjMs","spacer":"FN3yqz","mode-ghost":"qHnrzC","modeGhost":"qHnrzC"};
+var css$17 = {"root":"QHjscC","page":"i166cN","spacer":"u4UqQ0","mode-ghost":"-Anqsg","modeGhost":"-Anqsg"};
 
 function Paginator(props) {
     const renderPaginator = (params) => (React__default.createElement("nav", { role: "navigation", className: cx(css$17.root, 'uui-paginator', `uui-size-${props.size || settings.paginator.sizes.default}`), ...params.rawProps },
@@ -1993,14 +1924,14 @@ function Paginator(props) {
     return React__default.createElement(Paginator$1, { ...props, render: renderPaginator });
 }
 
-var css$16 = {"root":"ajyNiA","progress-bar":"_1BPSjb","progressBar":"_1BPSjb","progressBar-indeterminate":"MMO-kI","progressBarIndeterminate":"MMO-kI","size-12":"GinR4e","size12":"GinR4e","size-18":"ANdiFI","size18":"ANdiFI","size-24":"vc-KJr","size24":"vc-KJr"};
+var css$16 = {"root":"BDU2eY","progress-bar":"hOToff","progressBar":"hOToff","progressBar-indeterminate":"sPfRR7","progressBarIndeterminate":"sPfRR7","size-12":"t7OHC3","size12":"t7OHC3","size-18":"bvnal8","size18":"bvnal8","size-24":"TrVxth","size24":"TrVxth"};
 
 const IndeterminateBar = /* @__PURE__ */React.forwardRef((props, ref) => {
     return (React.createElement("div", { ref: ref, className: cx('uui-indeterminate_bar', props.cx, css$16.root, css$16[`size-${props.size || 12}`]) },
         React.createElement("div", { className: cx(css$16.progressBar) })));
 });
 
-var css$15 = {"root":"s7CpNb","striped":"HPv5f6","animate-stripes":"_5jar3B","animateStripes":"_5jar3B","size-12":"kDHoQC","size12":"kDHoQC","size-18":"YQ-Vpc","size18":"YQ-Vpc","size-24":"oWjJzE","size24":"oWjJzE"};
+var css$15 = {"root":"dqdMXf","striped":"yGqFBD","animate-stripes":"VxZzCk","animateStripes":"VxZzCk","size-12":"lyDISV","size12":"lyDISV","size-18":"RAYBZS","size18":"RAYBZS","size-24":"isJe0O","size24":"isJe0O"};
 
 const DEFAULT_SIZE = '12';
 function applyProgressBarMods(mods) {
@@ -2015,14 +1946,14 @@ const ProgressBar = /* @__PURE__ */withMods(uuiComponents.ProgressBar, applyProg
     hideLabel: props.hideLabel || props.striped,
 }));
 
-var css$14 = {"root":"k2stgl"};
+var css$14 = {"root":"_9QHUEc"};
 
 const IndicatorBar = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { progress } = props;
     return progress || progress === 0 ? (React.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx(css$14.root, props.cx), hideLabel: true })) : (React.createElement(IndeterminateBar, { ref: ref, cx: cx(css$14.root, props.cx) }));
 });
 
-var css$13 = {"root":"A3-5Xl"};
+var css$13 = {"root":"RhPrcv"};
 
 const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
     return (React__default.createElement("div", { ref: ref, className: cx([
@@ -2037,28 +1968,28 @@ const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
         React__default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
 });
 
-var css$12 = {"drag-handle":"lotg-I","dragHandle":"lotg-I","icon-container":"Yvm1XE","iconContainer":"Yvm1XE"};
+var css$12 = {"drag-handle":"wXEeDT","dragHandle":"wXEeDT","icon-container":"W-9nPm","iconContainer":"W-9nPm"};
 
 function DataRowAddons(props) {
     const row = props.rowProps;
     const getIndent = () => {
-        return (row.indent - 1) * ((settings.rowAddons.sizes.indentUnitMap[props.size] || settings.rowAddons.sizes.defaultIndentUnit));
+        return (row.indent - 1) * settings.dataTable.sizes.body.indentUnitMap[props.size || settings.dataTable.sizes.body.row];
     };
     const getWidth = () => {
-        return settings.rowAddons.sizes.indentWidthMap[props.size] || settings.rowAddons.sizes.defaultIndentWidth;
+        return settings.dataTable.sizes.body.indentWidthMap[props.size || settings.dataTable.sizes.body.row];
     };
     return (React__default.createElement(React__default.Fragment, null,
         row.dnd?.srcData && React__default.createElement(DragHandle, { key: "dh", cx: css$12.dragHandle, rawProps: { ...props.eventHandlers } }),
-        row?.checkbox?.isVisible && (React__default.createElement(Checkbox, { key: "cb", cx: "uui-dr_addons-checkbox", tabIndex: props.tabIndex, size: settings.rowAddons.sizes.checkboxMap[props.size], value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => row.onCheck?.(row), isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
+        row?.checkbox?.isVisible && (React__default.createElement(Checkbox, { key: "cb", cx: "uui-dr_addons-checkbox", tabIndex: props.tabIndex, size: settings.dataTable.sizes.body.checkboxMap[props.size], value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => row.onCheck?.(row), isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
         row.indent > 0 && (React__default.createElement("div", { key: "fold", className: cx('uui-dr_addons-indent', `uui-size-${props.size}`), style: { marginInlineStart: getIndent(), width: getWidth() } }, row.isFoldable && (React__default.createElement(IconContainer, { rawProps: {
                 'aria-label': row.isFolded ? 'Unfold' : 'Fold',
                 role: 'button',
-            }, key: "icon", icon: settings.rowAddons.icons.foldingIcon, cx: [
+            }, key: "icon", icon: settings.dataTable.icons.body.foldingIcon, cx: [
                 uuiElement.foldingArrow, uuiMarkers.clickable, css$12.iconContainer,
-            ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), size: settings.rowAddons.sizes.iconMap[props.size] || settings.rowAddons.sizes.defaultIcon }))))));
+            ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), size: settings.dataTable.sizes.body.iconMap[props.size || settings.dataTable.sizes.body.row] }))))));
 }
 
-var css$11 = {"root":"m18-QY"};
+var css$11 = {"root":"Mms63k"};
 
 const Blocker = /* @__PURE__ */withMods(Blocker$1, () => [css$11.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__default.createElement(Spinner, null)) }));
 
@@ -2104,7 +2035,7 @@ const VirtualListView = /* @__PURE__ */React.forwardRef((props, ref) => {
         React.createElement(Blocker, { isEnabled: props.isLoading })));
 });
 
-var css$10 = {"root":"yC5weY"};
+var css$10 = {"root":"W1mzAl"};
 
 function CheckboxGroup(props) {
     const currentValue = props.value || [];
@@ -2126,13 +2057,13 @@ function CheckboxGroup(props) {
     })));
 }
 
-var css$$ = {"root":"Sfup8x","modal-blocker":"tSYcBd","modalBlocker":"tSYcBd","animateModalBlocker":"x9G-Ii","modal":"XqcKfk","modal-footer":"I-fL53","modalFooter":"I-fL53","modal-header":"Ue4kPK","modalHeader":"Ue4kPK"};
+var css$$ = {"root":"GRkPdT","modal-blocker":"Dn6N0O","modalBlocker":"Dn6N0O","animateModalBlocker":"b-0qN-","modal":"OOTMbW","modal-footer":"Ar97Yc","modalFooter":"Ar97Yc","border-top":"EH-yIV","borderTop":"EH-yIV","modal-header":"EmrRnf","modalHeader":"EmrRnf","border-bottom":"vib-sC","borderBottom":"vib-sC"};
 
 const ModalBlocker = /* @__PURE__ */withMods(ModalBlocker$1, () => [css$$.modalBlocker]);
 const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$$.root, css$$.modal], (props) => {
-    const width = props.width || settings.modal.sizes.defaultWidth;
+    const width = props.width;
     const height = props.height || 'auto';
-    const maxHeight = isMobile() ? settings.modal.sizes.defaultMobileMaxHeight : (props.maxHeight || settings.modal.sizes.defaultMaxHeight);
+    const maxHeight = isMobile() ? 'var(--uui-modals-mobile-max-height)' : (props.maxHeight || 'var(--uui-modals-max-height)');
     return {
         style: {
             ...props.style,
@@ -2142,24 +2073,20 @@ const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$$.root, cs
         },
     };
 });
-class ModalHeader extends React__default.Component {
-    render() {
-        return (React__default.createElement(FlexRow, { padding: this.props.padding || settings.modal.sizes.defaultHeaderPadding, 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" },
-                React__default.createElement(IconButton, { rawProps: { 'aria-label': 'Close modal' }, icon: settings.modal.icons.closeIcon, onClick: this.props.onClose })))));
-    }
+function ModalHeader(props) {
+    return (React__default.createElement("div", { className: cx(css$$.root, css$$.modalHeader, 'uui-modal-header', props.borderBottom && css$$.borderBottom, props.cx), ...props.rawProps, style: {
+            ...props.rawProps?.style,
+        } },
+        props.title && (React__default.createElement("div", { className: cx('uui-modal-title', 'uui-typography') }, props.title)),
+        props.children,
+        props.onClose && React__default.createElement(FlexSpacer, null),
+        props.onClose && (React__default.createElement(FlexCell, { shrink: 0, width: "auto" },
+            React__default.createElement(IconButton, { rawProps: { 'aria-label': 'Close modal' }, icon: settings.modal.icons.closeIcon, onClick: props.onClose })))));
 }
-class ModalFooter extends React__default.Component {
-    render() {
-        return (React__default.createElement(FlexRow, { columnGap: this.props.columnGap || settings.modal.sizes.defaultFooterColumnGap, cx: [
-                css$$.root,
-                css$$.modalFooter,
-                this.props.cx,
-            ], borderTop: this.props.borderTop, padding: this.props.padding || settings.modal.sizes.defaultFooterPadding, vPadding: this.props.vPadding || settings.modal.sizes.defaultFooterVPadding, rawProps: this.props.rawProps }, this.props.children));
-    }
+function ModalFooter(props) {
+    return (React__default.createElement("div", { className: cx(css$$.root, css$$.modalFooter, 'uui-modal-footer', props.borderTop && css$$.borderTop, props.cx), ...props.rawProps, style: {
+            ...props.rawProps?.style,
+        } }, props.children));
 }
 
 const TREE_SHAKEABLE_INIT = () => ({
@@ -2320,7 +2247,7 @@ const TREE_SHAKEABLE_INIT = () => ({
 });
 const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
 
-var css$_ = {"root":"_9-ko9Y","icon-wrapper":"y4sy76","iconWrapper":"y4sy76","action-wrapper":"nKQVFJ","actionWrapper":"nKQVFJ","action-link":"MwyLMN","actionLink":"MwyLMN","close-icon":"kx2nVN","closeIcon":"kx2nVN","main-path":"Eao98a","mainPath":"Eao98a","content":"ZWD1Nk","close-wrapper":"lMhXTP","closeWrapper":"lMhXTP","notification-wrapper":"tRxpGL","notificationWrapper":"tRxpGL","clear-button":"mjnpje","clearButton":"mjnpje"};
+var css$_ = {"root":"_7N5KwP","icon-wrapper":"yCygaA","iconWrapper":"yCygaA","action-wrapper":"_2lQY38","actionWrapper":"_2lQY38","action-link":"_5NAquj","actionLink":"_5NAquj","close-icon":"wxwEAy","closeIcon":"wxwEAy","main-path":"fR2Tsm","mainPath":"fR2Tsm","content":"yAkzZT","close-wrapper":"_7HeorE","closeWrapper":"_7HeorE","notification-wrapper":"Ikr3nk","notificationWrapper":"Ikr3nk","clear-button":"A39vAF","clearButton":"A39vAF"};
 
 const NotificationCard = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const notificationCardNode = React__default.useRef(null);
@@ -2353,7 +2280,7 @@ function ClearNotification() {
         React__default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
 }
 
-var css$Z = {"footer":"FyE3N0"};
+var css$Z = {"footer":"UKxrTp"};
 
 class ConfirmationModal extends React.Component {
     render() {
@@ -2395,7 +2322,7 @@ function useReliableForceUpdate() {
     return red[1];
 }
 
-var css$Y = {"root":"_2dVB2V","timepicker-input":"ZYWMFF","timepickerInput":"ZYWMFF","ltr-always":"Hs6h1u","ltrAlways":"Hs6h1u"};
+var css$Y = {"root":"_8qbP70","timepicker-input":"_8iI9Xz","timepickerInput":"_8iI9Xz","ltr-always":"GoqxMW","ltrAlways":"GoqxMW"};
 
 const uuiTimePicker = {
     container: 'uui-timepicker-container',
@@ -2578,7 +2505,7 @@ function TimePicker(props) {
         state.value && state.inputValue && saveTime(state.value);
     };
     const renderInput = (inputProps) => {
-        return (React__default.createElement(TextInput, { ...inputProps, onClick: null, size: props.size || '36', isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$Y.root, css$Y.timepickerInput, props.inputCx], value: state.inputValue, onValueChange: handleInputChange, onCancel: !props.disableClear && onClear, onFocus: handleFocus, onBlur: handleBlur, isDropdown: false, placeholder: props.placeholder ? props.placeholder : getFormat(), mode: props.mode || DEFAULT_MODE, rawProps: props.rawProps?.input }));
+        return (React__default.createElement(TextInput, { ...inputProps, onClick: null, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$Y.root, css$Y.timepickerInput, props.inputCx], value: state.inputValue, onValueChange: handleInputChange, onCancel: !props.disableClear && onClear, onFocus: handleFocus, onBlur: handleBlur, isDropdown: false, placeholder: props.placeholder ? props.placeholder : getFormat(), mode: props.mode || DEFAULT_MODE, rawProps: props.rawProps?.input }));
     };
     const renderBody = (bodyProps) => {
         const { forwardedRef, onValueChange, ...timePickerBodyProps } = props;
@@ -2588,7 +2515,7 @@ 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$X = {"root":"DZishw"};
+var css$X = {"root":"_0EvB8b"};
 
 function applyInputAddonMods() {
     return [
@@ -2597,14 +2524,14 @@ function applyInputAddonMods() {
 }
 const InputAddon = /* @__PURE__ */withMods(InputAddon$1, applyInputAddonMods);
 
-var css$W = {"root":"_5Fsm0K"};
+var css$W = {"root":"_1p7ere"};
 
 function applySliderMods() {
     return [css$W.root, 'uui-color-neutral'];
 }
 const Slider = /* @__PURE__ */withMods(Slider$1, applySliderMods);
 
-var css$V = {"root":"lVOxig","tooltip":"O-t7iN"};
+var css$V = {"root":"nRNd81","tooltip":"_8FGpYj"};
 
 function applyRatingMods(mods) {
     return [
@@ -2618,7 +2545,7 @@ const Rating = /* @__PURE__ */withMods(uuiComponents.Rating, applyRatingMods, (p
     Tooltip,
 }));
 
-var css$U = {"root":"ipMd9b","container":"iqcoau"};
+var css$U = {"root":"-VD0hh","container":"_34S4zn"};
 
 const defaultFormat = 'MMM D, YYYY';
 const valueFormat = 'YYYY-MM-DD';
@@ -2829,14 +2756,14 @@ function DatePickerHeader({ navIconLeft, navIconRight, value: { month, view }, o
             React.createElement(Button, { icon: navIconRight || settings.datePicker.icons.body.nextIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
 }
 
-var css$T = {"root":"_23f3UL"};
+var css$T = {"root":"z6vmNs"};
 
 function applyDateSelectionMods() {
-    return [css$T.root, `uui-size-${settings.datePicker.sizes.default}`];
+    return [css$T.root, `uui-size-${settings.datePicker.sizes.body}`];
 }
 const Calendar = /* @__PURE__ */withMods(Calendar$1, applyDateSelectionMods);
 
-var css$S = {"root":"_3e-Sgw"};
+var css$S = {"root":"PPpSD-"};
 
 const uuiDatePickerBody = {
     wrapper: 'uui-datepicker-body-wrapper',
@@ -2879,7 +2806,7 @@ function StatelessDatePickerBodyComp({ renderDay, isHoliday, cx: classes, filter
                 return (React__default.createElement(Calendar, { value: selectedDate, month: month, onValueChange: onDayClick, filter: filter, renderDay: renderDay, isHoliday: isHoliday, isDisabled: isDisabled }));
         }
     };
-    return (React__default.createElement("div", { ref: ref, className: cx$1(uuiDatePickerBodyBase.container, `uui-size-${settings.datePicker.sizes.default}`, classes), ...rawProps },
+    return (React__default.createElement("div", { ref: ref, className: cx$1(uuiDatePickerBodyBase.container, `uui-size-${settings.datePicker.sizes.body}`, classes), ...rawProps },
         React__default.createElement("div", { className: cx$1(css$S.root, uuiDatePickerBody.wrapper) },
             React__default.createElement(DatePickerHeader, { value: {
                     view,
@@ -2897,7 +2824,7 @@ const modifiers$1 = [{
         options: { offset: [0, 6] },
     }];
 function DatePickerComponent(props, ref) {
-    const { format = defaultFormat, value, size = settings.datePicker.sizes.default } = props;
+    const { format = defaultFormat, value, size = settings.datePicker.sizes.input } = props;
     const context = useUuiContext();
     const [inputValue, setInputValue] = useState(toCustomDateFormat(value, format));
     const [isBodyOpen, setBodyIsOpen] = useState(false);
@@ -2962,7 +2889,7 @@ function DatePickerComponent(props, ref) {
 }
 const DatePicker = /* @__PURE__ */React__default.forwardRef(DatePickerComponent);
 
-var css$R = {"date-input":"SERvmi","dateInput":"SERvmi","root":"VvllfY","separator":"GWz6af","mode-form":"Uy7VHR","modeForm":"Uy7VHR","mode-cell":"EhP6KC","modeCell":"EhP6KC"};
+var css$R = {"date-input":"KWy5Nx","dateInput":"KWy5Nx","root":"fVggm-","separator":"_-4EA4L","mode-form":"-HscNy","modeForm":"-HscNy","mode-cell":"_97hdBQ","modeCell":"_97hdBQ"};
 
 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));
@@ -3013,7 +2940,7 @@ const RangeDatePickerInput = /* @__PURE__ */forwardRef(({ isDisabled, isInvalid,
             } : undefined, onValueChange: (v) => onInputChange(v || '', 'to'), onFocus: (e) => handleFocus(e, 'to'), onBlur: (e) => handleBlur(e, 'to'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.to, onClick: onClick, onKeyDown: onInputKeyDown })));
 });
 
-var css$Q = {"root":"CKbaau"};
+var css$Q = {"root":"bP7mL2"};
 
 const uuiPresets = {
     container: 'uui-presets-container',
@@ -3030,10 +2957,10 @@ const getPresets = (presets) => {
 function CalendarPresets(props) {
     return (React.createElement("div", { 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" })))));
+        getPresets(props.presets).map((item) => (React.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: settings.rangeDatePicker.sizes.preset })))));
 }
 
-var css$P = {"root":"VECXau","container":"yCgn5l","day-selection":"fDXy9w","daySelection":"fDXy9w","from-picker":"CTUZIq","fromPicker":"CTUZIq","to-picker":"v5f7nd","toPicker":"v5f7nd","bodes-wrapper":"nhrnEK","bodesWrapper":"nhrnEK","blocker":"TmBmuf"};
+var css$P = {"root":"jGbeTV","container":"ss46Jz","day-selection":"tUz2eZ","daySelection":"tUz2eZ","from-picker":"odWWTO","fromPicker":"odWWTO","to-picker":"ntFt-0","toPicker":"ntFt-0","bodes-wrapper":"cJUS8X","bodesWrapper":"cJUS8X","blocker":"OQEZcA"};
 
 const uuiRangeDatePickerBody = {
     inRange: 'uui-range-datepicker-in-range',
@@ -3208,7 +3135,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$O = {"dropdown-container":"jhmh6P","dropdownContainer":"jhmh6P"};
+var css$O = {"dropdown-container":"fse70v","dropdownContainer":"fse70v"};
 
 const modifiers = [{
         name: 'offset',
@@ -3276,7 +3203,7 @@ function RangeDatePickerComponent(props, ref) {
 }
 const RangeDatePicker = /* @__PURE__ */React__default.forwardRef(RangeDatePickerComponent);
 
-var css$N = {"root":"E1l659","blocker":"VAWa-s","marker":"PBCWhO","top":"M7upTS","bottom":"fs7iju","left":"LVoO26","right":"_0udNUy","inside":"_8FypR-"};
+var css$N = {"root":"fcgGKr","blocker":"LYayiw","marker":"G9kt3a","top":"e9ZTvp","bottom":"yFKRaN","left":"_767gzT","right":"tahKuC","inside":"_1SbJ5P"};
 
 function DropMarker(props) {
     return props.isDndInProgress
@@ -3291,7 +3218,7 @@ function DropMarker(props) {
         : null;
 }
 
-var css$M = {"root":"_6tWjqu","line-height":"CdQO7I","lineHeight":"CdQO7I","font-size":"r0gvz-","fontSize":"r0gvz-"};
+var css$M = {"root":"bVIUSn","line-height":"PiBSoi","lineHeight":"PiBSoi","font-size":"TJ-U2T","fontSize":"TJ-U2T"};
 
 function applyTextMods(mods) {
     return [
@@ -3318,7 +3245,7 @@ const Text = /* @__PURE__ */withMods(uuiComponents.Text, applyTextMods, (props)
     };
 });
 
-var css$L = {"root":"R-d9ct","loading-word":"WhQZFc","loadingWord":"WhQZFc","animated-loading":"JD3G0e","animatedLoading":"JD3G0e","skeleton_loading":"MIKvmD","skeletonLoading":"MIKvmD"};
+var css$L = {"root":"WQ5Q7s","loading-word":"q5IqY3","loadingWord":"q5IqY3","animated-loading":"_0EMt40","animatedLoading":"_0EMt40","skeleton_loading":"kjLWZu","skeletonLoading":"kjLWZu"};
 
 const TextPlaceholder = (props) => {
     const pattern = '&nbsp;';
@@ -3337,7 +3264,7 @@ const TextPlaceholder = (props) => {
 
 const RichTextView = /* @__PURE__ */withMods(uuiComponents.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || settings.richTextView.sizes.default}`]);
 
-var css$K = {"modal":"_3Lcmn6","search-wrapper":"I-k3xo","searchWrapper":"I-k3xo","no-data":"WhA8QV","noData":"WhA8QV","type-search-to-load-size-24":"V2n0vK","typeSearchToLoadSize24":"V2n0vK"};
+var css$K = {"modal":"arlA04","search-wrapper":"xgAUF4","searchWrapper":"xgAUF4","no-data":"-bZWnM","noData":"-bZWnM","type-search-to-load-size-24":"F4k1w2","typeSearchToLoadSize24":"F4k1w2"};
 
 class DataPickerBody extends PickerBodyBase {
     constructor() {
@@ -3378,7 +3305,7 @@ class DataPickerBody extends PickerBodyBase {
     render() {
         const searchSize = this.getSearchSize();
         return (React__default.createElement(React__default.Fragment, null,
-            this.showSearch() && (React__default.createElement("div", { key: "search", className: css$K.searchWrapper },
+            this.showSearch() && (React__default.createElement("div", { key: "search", className: cx$1(css$K.searchWrapper, 'uui-picker_input-body-search') },
                 React__default.createElement(FlexCell$1, { grow: 1 },
                     React__default.createElement(SearchInput, { 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$K[this.props.editMode], css$K[this.props.selectionMode]), rawProps: { style: { maxHeight: this.props.maxHeight, maxWidth: this.props.maxWidth } } }, this.props.rows.length === 0 && this.props.value.topIndex === 0
@@ -3388,7 +3315,7 @@ class DataPickerBody extends PickerBodyBase {
     }
 }
 
-var css$J = {"footer":"_2T8yQQ"};
+var css$J = {"footer":"wPqX4O"};
 
 function DataPickerFooterImpl(props) {
     const { search, clearSelection, view, showSelected, selectionMode, isSearchTooShort, } = props;
@@ -3414,17 +3341,17 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = /* @__PURE__ */React__default.memo(DataPickerFooterImpl);
 
-var css$I = {"header":"BvOTfY","title":"_74pmbP","close":"GCdOJZ"};
+var css$I = {"header":"tB-Mcy","title":"KQr7OH","close":"Q3MCTf"};
 
 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$I.header },
-        React__default.createElement(Text, { size: settings.pickerInput.sizes.body.mobileHeaderTitleSize, cx: css$I.title }, title),
+    return (React__default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: [css$I.header, 'uui-picker_input-body-header'] },
+        React__default.createElement("div", { className: css$I.title }, title),
         React__default.createElement(IconButton, { icon: settings.pickerInput.icons.body.pickerBodyMobileHeaderCloseIcon, onClick: () => props.close?.(), cx: css$I.close })));
 };
 const DataPickerHeader = /* @__PURE__ */React__default.memo(DataPickerHeaderImpl);
 
-var css$H = {"root":"zkAT-O","align-widgets-top":"tBqpnh","alignWidgetsTop":"tBqpnh","align-widgets-center":"_9s0Max","alignWidgetsCenter":"_9s0Max","icon-container":"D2XBBH","iconContainer":"D2XBBH","loading-cell":"hKN5Xl","loadingCell":"hKN5Xl","content-wrapper":"jFO-Uj","contentWrapper":"jFO-Uj","render-item":"Cv43tE","renderItem":"Cv43tE","icon-wrapper":"KDQHv0","iconWrapper":"KDQHv0","icon-default":"_7-zlnP","iconDefault":"_7-zlnP","selected-mark":"cnOS1G","selectedMark":"cnOS1G"};
+var css$H = {"root":"HhcgUX","align-widgets-top":"hK-9oZ","alignWidgetsTop":"hK-9oZ","align-widgets-center":"JXYBxf","alignWidgetsCenter":"JXYBxf","icon-container":"qOnYvL","iconContainer":"qOnYvL","loading-cell":"ib9OA2","loadingCell":"ib9OA2","content-wrapper":"xpyHIX","contentWrapper":"xpyHIX","render-item":"UYZW4D","renderItem":"UYZW4D","icon-wrapper":"_5K3S-K","iconWrapper":"_5K3S-K","icon-default":"_5itHyi","iconDefault":"_5itHyi","selected-mark":"uMkwgi","selectedMark":"uMkwgi"};
 
 function DataPickerCell(props) {
     const ref = React.useRef();
@@ -3432,21 +3359,21 @@ 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.pickerInput.sizes.body.cellTextMap[props.size], cx: css$H.loadingCell },
+        React.createElement(Text, { key: "t", size: props.size, cx: css$H.loadingCell },
             React.createElement(TextPlaceholder, null)));
     }
     else if (props.rowProps.isUnknown) {
-        content = (React.createElement(Text, { key: "t", size: settings.pickerInput.sizes.body.cellTextMap[props.size] }, "Unknown"));
+        content = (React.createElement(Text, { key: "t", size: props.size }, "Unknown"));
     }
     else {
-        const SelectIcon = settings.pickerInput.sizes.body.cellIsBoldSelectionIcon[props.size]
-            ? settings.pickerInput.icons.body.boldSelectIcon
-            : settings.pickerInput.icons.body.selectIcon;
+        const SelectIcon = (typeof settings.pickerInput.icons.body.selectIcon === 'function'
+            ? settings.pickerInput.icons.body.selectIcon(props.size)
+            : settings.pickerInput.icons.body.selectIcon);
         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$H.iconWrapper, uuiMod.selected) },
-                React.createElement(IconContainer, { size: settings.pickerInput.sizes.body.cellIconMap[props.size], icon: SelectIcon, cx: props.rowProps.isChildrenSelected ? css$H.iconDefault : css$H.selectedMark, rawProps: { 'aria-label': props.rowProps.isChildrenSelected
+            (props.rowProps.isChildrenSelected || props.rowProps.isSelected) && (React.createElement("div", { className: cx$1(css$H.iconWrapper, 'uui-picker_input-cell-select_icon', uuiMod.selected) },
+                React.createElement(IconContainer, { size: settings.pickerInput.sizes.body.selectIconMap[props.size], icon: SelectIcon, cx: props.rowProps.isChildrenSelected ? css$H.iconDefault : css$H.selectedMark, rawProps: { 'aria-label': props.rowProps.isChildrenSelected
                             ? 'Child is selected'
                             : 'Selected' } })))));
     }
@@ -3454,31 +3381,32 @@ function DataPickerCell(props) {
     return (React.createElement(FlexCell, { ref: ref, grow: 1, width: 0, minWidth: 0, rawProps: { role: 'cell' }, cx: [
             css$H.root,
             props.cx,
+            'uui-picker_input-cell',
             'data-picker-cell',
             props.size && `uui-size-${props.size}`,
             css$H[`align-widgets-${props.alignActions || 'top'}`],
         ], style: props.padding && {
-            '--uui-data_picker_cell-horizontal-padding': `${props.padding}px`,
+            '--uui-data_picker-horizontal-padding': `${props.padding}px`,
         } },
         React.createElement(DataRowAddons, { size: props.size, ...props, tabIndex: -1 }),
         getWrappedContent()));
 }
 
-var css$G = {"picker-row":"u-nkyZ","pickerRow":"u-nkyZ"};
+var css$G = {"picker-row":"xRksz9","pickerRow":"xRksz9"};
 
 class DataPickerRow extends React.Component {
     constructor() {
         super(...arguments);
         this.renderContent = () => {
-            return (React.createElement(DataPickerCell, { key: "name", size: this.props.size || settings.pickerInput.sizes.body.defaultRow, padding: this.props.padding || settings.pickerInput.sizes.body.cellPadding, rowProps: this.props, alignActions: this.props.alignActions || 'top', renderItem: this.props.renderItem }));
+            return (React.createElement(DataPickerCell, { key: "name", size: this.props.size || settings.pickerInput.sizes.body.row, padding: this.props.padding, rowProps: this.props, alignActions: this.props.alignActions || 'top', renderItem: this.props.renderItem }));
         };
     }
     render() {
-        return (React.createElement(DataPickerRow$1, { ...this.props, cx: [css$G.pickerRow, this.props.cx], renderContent: this.renderContent }));
+        return (React.createElement(DataPickerRow$1, { ...this.props, cx: [css$G.pickerRow, 'uui-picker_input-row', this.props.cx], renderContent: this.renderContent }));
     }
 }
 
-var css$F = {"done":"W5aI5h","container":"gI8IXt"};
+var css$F = {"done":"Hp6d9O","container":"W4n9iR"};
 
 const PickerBodyMobileView = (props) => {
     const isMobileView = isMobile();
@@ -3555,28 +3483,28 @@ const getHighlightedSearchMatches = (str, search) => {
     return getDecoratedText(str, ranges);
 };
 
-var css$E = {"root":"JTgVHZ","column-gap":"UkBcbE","columnGap":"UkBcbE","multiline":"QepdmC","text":"aouOqI"};
+var css$E = {"root":"rCIvMT","column-gap":"ILldhK","columnGap":"ILldhK","title":"magf6q","subtitle":"_17ltOR","disabled":"AofeyH","multiline":"U314R-"};
 
 function PickerItem(props) {
-    const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, cx, } = props;
-    const itemSize = size || settings.pickerInput.sizes.body.defaultItem;
+    const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, } = props;
+    const itemSize = size || settings.pickerInput.sizes.body.row;
     const isMultiline = !!(props.title && props.subtitle);
     const { search } = props.dataSourceState ?? {};
     const title = highlightSearchMatches ? getHighlightedSearchMatches(props.title, search) : props.title;
     const subtitle = highlightSearchMatches ? getHighlightedSearchMatches(props.subtitle, search) : props.subtitle;
-    return (React.createElement(FlexCell, { width: "auto", cx: [css$E.root, 'uui-typography', cx] },
+    return (React.createElement(FlexCell, { width: "auto", cx: [css$E.root, 'uui-picker_input-item', 'uui-typography', props.cx] },
         React.createElement(FlexRow, { size: itemSize, cx: [isMultiline && css$E.multiline, css$E.columnGap], rawProps: { style: { '--uui-picker_item-vertical-padding': `${settings.pickerInput.sizes.body.itemVerticalPaddingMap[itemSize]}px` } } },
             avatarUrl && (React.createElement(Avatar, { isLoading: isLoading, img: avatarUrl, size: getAvatarSize(itemSize, isMultiline) })),
             icon && React.createElement(IconContainer, { icon: icon }),
             React.createElement(FlexCell, { width: "auto" },
-                title && (React.createElement(Text, { size: itemSize, cx: css$E.text, color: isDisabled ? 'disabled' : 'primary' }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : title)),
-                subtitle && (React.createElement(Text, { size: itemSize, color: isDisabled ? 'disabled' : 'secondary', cx: css$E.text }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : subtitle))))));
+                title && (React.createElement("div", { className: cx(css$E.title, isDisabled && css$E.disabled, `uui-size-${itemSize}`) }, title)),
+                subtitle && (React.createElement("div", { className: cx(css$E.subtitle, isDisabled && css$E.disabled, `uui-size-${itemSize}`) }, subtitle))))));
 }
 function getAvatarSize(size, isMultiline) {
     return settings.pickerInput.sizes.body[isMultiline ? 'itemAvatarMultilineMap' : 'itemAvatarMap'][size];
 }
 
-var css$D = {"sub-header-wrapper":"PpiwMN","subHeaderWrapper":"PpiwMN","switch":"A3CG2M","no-found-modal-container":"GMSmpZ","noFoundModalContainer":"GMSmpZ","no-found-modal-container-icon":"XH-IeQ","noFoundModalContainerIcon":"XH-IeQ","no-found-modal-container-text":"-MjKgw","noFoundModalContainerText":"-MjKgw"};
+var css$D = {"sub-header-wrapper":"P3mvgh","subHeaderWrapper":"P3mvgh","switch":"Qqybbp","no-found-modal-container":"e14vwO","noFoundModalContainer":"e14vwO","no-found-modal-container-icon":"Fvl7ZH","noFoundModalContainerIcon":"Fvl7ZH","no-found-modal-container-text":"NrgMHA","noFoundModalContainerText":"NrgMHA"};
 
 function PickerModal(props) {
     const { view, selection, dataSourceStateLens, dataSourceState, getDataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = usePickerModal(props);
@@ -3590,10 +3518,10 @@ function PickerModal(props) {
     };
     const renderItem = (item, rowProps, dsState) => {
         const { flattenSearchResults } = view.getConfig();
-        return (React__default.createElement(PickerItem, { title: getName(item), size: "36", dataSourceState: dsState, ...(flattenSearchResults ? { subtitle: getSubtitle(rowProps, dataSourceState) } : {}), ...rowProps }));
+        return (React__default.createElement(PickerItem, { title: getName(item), dataSourceState: dsState, ...(flattenSearchResults ? { subtitle: getSubtitle(rowProps, dataSourceState) } : {}), ...rowProps }));
     };
     const renderRow = (rowProps) => {
-        return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React__default.createElement(DataPickerRow, { ...rowProps, key: rowProps.rowKey, padding: "24", size: "36", renderItem: (item, itemProps) => renderItem(item, itemProps, dataSourceState) }));
+        return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React__default.createElement(DataPickerRow, { ...rowProps, key: rowProps.rowKey, padding: "24", renderItem: (item, itemProps) => renderItem(item, itemProps, dataSourceState) }));
     };
     const renderFooter = () => {
         const hasSelection = view.getSelectedRowsCount() > 0;
@@ -3608,8 +3536,8 @@ function PickerModal(props) {
     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: settings.pickerInput.icons.body.modalNotFoundSearchIcon }),
-            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)));
+            React__default.createElement(Text, { cx: css$D.noFoundModalContainerText, fontWeight: "600", fontSize: "16", lineHeight: "24", color: "primary" }, i18n.dataPickerBody.noRecordsMessage),
+            React__default.createElement(Text, { cx: css$D.noFoundModalContainerText, fontSize: "12", lineHeight: "18", color: "primary" }, i18n.dataPickerBody.noRecordsSubTitle)));
     };
     const dataRows = getRows();
     const rows = dataRows.map((row) => renderRow(row));
@@ -3625,13 +3553,13 @@ function PickerModal(props) {
                             rows: dataRows,
                             searchPosition: 'body',
                         }, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder, rawProps: { dir: 'auto' } })),
-                !isSingleSelect() && (React__default.createElement(Switch, { cx: css$D.switch, size: "18", ...getFooterProps().showSelected, isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" })),
+                !isSingleSelect() && (React__default.createElement(Switch, { cx: css$D.switch, size: settings.pickerInput.sizes.body.footerSwitchMap[settings.pickerInput.sizes.body.row], ...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, { ...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()))));
+            React__default.createElement(ModalFooter, null, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$C = {"tooltip":"uQ8leb"};
+var css$C = {"tooltip":"W13Z6-"};
 
 const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     const tagProps = {
@@ -3650,7 +3578,7 @@ const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     }
 });
 
-var css$B = {"root":"iw-4c8","mode-form":"_5C2Lfe","modeForm":"_5C2Lfe","mode-cell":"QuWc-c","modeCell":"QuWc-c","mode-inline":"CFv0jv","modeInline":"CFv0jv"};
+var css$B = {"root":"rCoQlF","mode-form":"K6TUt-","modeForm":"K6TUt-","mode-cell":"NUa-OE","modeCell":"NUa-OE","mode-inline":"_2x-uYn","modeInline":"_2x-uYn"};
 
 const defaultMode = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
@@ -3663,7 +3591,7 @@ function applyPickerTogglerMods(mods) {
 }
 function PickerTogglerComponent(props, ref) {
     const renderItem = (itemProps) => {
-        const itemPropsWithSize = { ...itemProps, size: props.size || settings.pickerInput.sizes.toggler.defaultTag };
+        const itemPropsWithSize = { ...itemProps, size: props.size || settings.pickerInput.sizes.toggler.tag };
         if (!!props.renderItem) {
             return props.renderItem(itemPropsWithSize);
         }
@@ -3711,15 +3639,13 @@ function PickerInputComponent({ highlightSearchMatches = true, ...props }, ref)
         const footerProps = getFooterProps();
         return props.renderFooter
             ? props.renderFooter(footerProps)
-            : React__default.createElement(DataPickerFooter, { ...footerProps, size: props.size || settings.pickerInput.sizes.body.defaultFooter });
+            : React__default.createElement(DataPickerFooter, { ...footerProps, size: props.size || settings.pickerInput.sizes.body.row });
     };
     const getRowSize = () => {
         if (isMobile()) {
             return settings.pickerInput.sizes.body.mobileRow;
         }
-        return props.editMode === 'modal'
-            ? settings.pickerInput.sizes.body.modalRow
-            : (props.size || settings.pickerInput.sizes.body.defaultRow);
+        return props.size || settings.pickerInput.sizes.body.row;
     };
     const getSubtitle = ({ path }, { search }) => {
         if (!search)
@@ -3734,13 +3660,13 @@ function PickerInputComponent({ highlightSearchMatches = true, ...props }, ref)
         return (React__default.createElement(PickerItem, { title: getName(item), size: getRowSize(), dataSourceState: dsState, highlightSearchMatches: highlightSearchMatches, ...(flattenSearchResults ? { subtitle: getSubtitle(rowProps, dataSourceState) } : {}), ...rowProps }));
     };
     const renderRow = (rowProps, dsState) => {
-        return props.renderRow ? (props.renderRow(rowProps, dsState)) : (React__default.createElement(DataPickerRow, { ...rowProps, key: rowProps.rowKey, size: getRowSize(), padding: props.editMode === 'modal' ? settings.pickerInput.sizes.body.modalPadding : settings.pickerInput.sizes.body.padding, renderItem: (item, itemProps) => renderRowItem(item, itemProps, dsState) }));
+        return props.renderRow ? (props.renderRow(rowProps, dsState)) : (React__default.createElement(DataPickerRow, { ...rowProps, key: rowProps.rowKey, size: getRowSize(), padding: props.editMode === 'dropdown' ? settings.pickerInput.sizes.body.padding : undefined, renderItem: (item, itemProps) => renderRowItem(item, itemProps, dsState) }));
     };
     const renderBody = (bodyProps, rows) => {
         const renderedDataRows = rows.map((row) => renderRow(row, dataSourceState));
         const bodyHeight = isMobile() ? document.documentElement.clientHeight : props.dropdownHeight || settings.pickerInput.sizes.body.maxHeight;
         const minBodyWidth = props.minBodyWidth || settings.pickerInput.sizes.body.minWidth;
-        return (React__default.createElement(PickerBodyMobileView, { title: props.entityName, onClose: () => toggleBodyOpening(false), cx: [props.bodyCx], onKeyDown: bodyProps.onKeyDown, width: bodyProps.togglerWidth > minBodyWidth ? bodyProps.togglerWidth : minBodyWidth, focusLock: getSearchPosition() === 'body' },
+        return (React__default.createElement(PickerBodyMobileView, { title: props.entityName, onClose: () => toggleBodyOpening(false), cx: [props.bodyCx, 'uui-picker_input-body-wrapper'], onKeyDown: bodyProps.onKeyDown, width: bodyProps.togglerWidth > minBodyWidth ? bodyProps.togglerWidth : minBodyWidth, focusLock: getSearchPosition() === 'body' },
             React__default.createElement(DataPickerBody, { ...bodyProps, rows: renderedDataRows, maxHeight: bodyHeight, searchSize: props.size, editMode: "dropdown", selectionMode: props.selectionMode }),
             renderFooter()));
     };
@@ -3753,7 +3679,7 @@ function PickerInputComponent({ highlightSearchMatches = true, ...props }, ref)
 }
 const PickerInput = /* @__PURE__ */React__default.forwardRef(PickerInputComponent);
 
-var css$A = {"row":"VBYHkQ"};
+var css$A = {"row":"mDnKOK"};
 
 function PickerListItem(props) {
     let label;
@@ -3773,7 +3699,7 @@ function PickerListItem(props) {
     return (React__default.createElement("div", { role: "option", "aria-selected": props.isSelectable ? props.isSelected : undefined, "aria-busy": props.isLoading, "aria-posinset": props.index + 1, ...(props.checkbox?.isVisible && { 'aria-checked': props.isChecked }), className: css$A.row }, component));
 }
 
-var css$z = {"root":"mn-68G"};
+var css$z = {"root":"A7Wa-A"};
 
 function PickerList(props) {
     const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, dataSourceState, getModalTogglerCaption, } = usePickerList(props);
@@ -3808,7 +3734,7 @@ function PickerList(props) {
             }, selectedRows)));
 }
 
-var css$y = {"root":"yjPYqi","wrapper":"znOeIe","align-widgets-top":"uiBscQ","alignWidgetsTop":"uiBscQ","align-widgets-center":"_6d7CV1","alignWidgetsCenter":"_6d7CV1"};
+var css$y = {"root":"_1XdjbN","wrapper":"qzABZz","align-widgets-top":"_1Dc-ud","alignWidgetsTop":"_1Dc-ud","align-widgets-center":"ARkF0y","alignWidgetsCenter":"ARkF0y"};
 
 function DataTableCell(initialProps) {
     const props = { ...initialProps };
@@ -3816,48 +3742,48 @@ function DataTableCell(initialProps) {
         props.addons = React.createElement(DataRowAddons, { size: props.size, ...props });
     }
     props.renderPlaceholder = props.renderPlaceholder
-        || (() => (React.createElement(Text, { key: "t", size: settings.dataTable.sizes.body.cellTextMap[props.size] },
+        || (() => (React.createElement(Text, { key: "t", size: props.size },
             React.createElement(TextPlaceholder, { isNotAnimated: true }))));
     props.renderUnknown = props.renderUnknown
-        || (() => (React.createElement(Text, { key: "t", size: settings.dataTable.sizes.body.cellTextMap[props.size] }, "Unknown")));
+        || (() => (React.createElement(Text, { key: "t", size: props.size }, "Unknown")));
     props.renderTooltip = (tooltipProps) => React.createElement(Tooltip, { color: "critical", ...tooltipProps });
     const isEditable = !!props.onValueChange;
     const getLeftPadding = () => {
         const { rowProps: { isLoading }, columnsGap, isFirstColumn } = props;
         if (isFirstColumn && isEditable && !isLoading)
-            return settings.dataTable.sizes.body.defaultCellPadding;
+            return 'var(--uui-dt-cell-padding)';
         if (isEditable && !isLoading)
-            return '0';
+            return '0px';
         if (columnsGap)
-            return isFirstColumn ? columnsGap : +columnsGap / 2;
-        return isFirstColumn ? settings.dataTable.sizes.body.defaultCellPaddingEdge : settings.dataTable.sizes.body.defaultCellPadding;
+            return isFirstColumn ? `${columnsGap}px` : `${+columnsGap / 2}px`;
+        return `var(--uui-dt-cell-padding${isFirstColumn ? '-edge' : ''})`;
     };
     const getRightPadding = () => {
         const { rowProps: { isLoading }, columnsGap, isLastColumn } = props;
         if (isEditable && !isLoading)
-            return '0';
+            return '0px';
         if (columnsGap)
-            return isLastColumn ? columnsGap : +columnsGap / 2;
-        return isLastColumn ? settings.dataTable.sizes.body.defaultCellPaddingEdge : settings.dataTable.sizes.body.defaultCellPadding;
+            return isLastColumn ? `${columnsGap}px` : `${+columnsGap / 2}px`;
+        return `var(--uui-dt-cell-padding${isLastColumn ? '-edge' : ''})`;
     };
     props.cx = [
         'data-table-cell',
         css$y.root,
         props.cx,
-        'uui-size-' + (props.size || settings.dataTable.sizes.body.defaultCell),
+        'uui-size-' + (props.size || settings.dataTable.sizes.body.row),
         props.isFirstColumn && 'uui-dt-first-column',
         props.isLastColumn && 'uui-dt-last-column',
         css$y[`align-widgets-${props.alignActions || 'top'}`],
         (props.border || isEditable) && 'uui-dt-vertical-cell-border',
     ];
     props.style = {
-        '--uui-dt-cell-padding-start': `${getLeftPadding()}px`,
-        '--uui-dt-cell-padding-end': `${getRightPadding()}px`,
+        '--uui-dt-cell-padding-start': getLeftPadding(),
+        '--uui-dt-cell-padding-end': getRightPadding(),
     };
     return React.createElement(DataTableCell$1, { ...props });
 }
 
-var css$x = {"root":"_3kfjJ2"};
+var css$x = {"root":"u8eQGK"};
 
 // 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.
@@ -3869,11 +3795,11 @@ const renderDropMarkers = ({ ref, ...props }) => React.createElement(DropMarker,
 const propsMods = { renderCell, renderDropMarkers };
 const DataTableRow = /* @__PURE__ */withMods(DataTableRow$1, ({ borderBottom = true, size }) => {
     return [
-        css$x.root, 'uui-dt-vars', borderBottom && 'uui-dt-row-border', `uui-size-${size || settings.dataTable.sizes.body.defaultRow}`,
+        css$x.root, 'uui-dt-vars', borderBottom && 'uui-dt-row-border', `uui-size-${size || settings.dataTable.sizes.body.row}`,
     ];
 }, () => propsMods);
 
-var css$w = {"sorting-panel-container":"EaTxQB","sortingPanelContainer":"EaTxQB"};
+var css$w = {"sorting-panel-container":"C87L3Z","sortingPanelContainer":"C87L3Z"};
 
 const SortingPanelImpl = ({ sortDirection, onSort }) => {
     const sortAsc = useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
@@ -3898,7 +3824,7 @@ const ColumnHeaderDropdownImpl = (props) => {
 };
 const ColumnHeaderDropdown = /* @__PURE__ */React__default.memo(ColumnHeaderDropdownImpl);
 
-var css$v = {"root":"nGV5We","caption-wrapper":"XtZKmg","captionWrapper":"XtZKmg","sort-icon":"B6qvae","sortIcon":"B6qvae","dropdown-icon":"pbj0lG","dropdownIcon":"pbj0lG","infoIcon":"EdBf1y","resizable":"ZSBoOb","align-right":"e80-HN","alignRight":"e80-HN","align-center":"XFR3t0","alignCenter":"XFR3t0","caption":"_5nTIUl","truncate":"mJvLDD","checkbox":"Cp1qOg","icon":"meOEAd","fold-all-icon":"_2wlRnI","foldAllIcon":"_2wlRnI","cell-tooltip":"A-waSW","cellTooltip":"A-waSW","upper-case":"_0ru6DK","upperCase":"_0ru6DK","resizing-marker":"_4bT4HB","resizingMarker":"_4bT4HB","pinned-right":"QZbIyA","pinnedRight":"QZbIyA","draggable":"_2ucOBE","ghost":"Vf3dAf","is-dragged-out":"GsBooV","isDraggedOut":"GsBooV","dnd-marker-left":"_3rdPlR","dndMarkerLeft":"_3rdPlR","dnd-marker-right":"YuyePp","dndMarkerRight":"YuyePp","cell-tooltip-wrapper":"GyaXSv","cellTooltipWrapper":"GyaXSv","cell-tooltip-text":"fK4yAa","cellTooltipText":"fK4yAa","tooltip-caption":"_2-6cFI","tooltipCaption":"_2-6cFI","tooltip-info":"_5FXT7m","tooltipInfo":"_5FXT7m"};
+var css$v = {"root":"nNFVjv","caption-wrapper":"npggj0","captionWrapper":"npggj0","sort-icon":"GUsQeW","sortIcon":"GUsQeW","dropdown-icon":"DJqWZt","dropdownIcon":"DJqWZt","infoIcon":"_2lxre3","resizable":"D0sOqj","align-right":"T69CmV","alignRight":"T69CmV","align-center":"_2wpxL-","alignCenter":"_2wpxL-","caption":"_53eWUr","truncate":"fOr1cr","upper-case":"-f1SyF","upperCase":"-f1SyF","checkbox":"kjRHKF","icon":"xFUjYH","fold-all-icon":"Kv11HJ","foldAllIcon":"Kv11HJ","cell-tooltip":"_6J-M-f","cellTooltip":"_6J-M-f","resizing-marker":"SlqAyw","resizingMarker":"SlqAyw","pinned-right":"pVdQnj","pinnedRight":"pVdQnj","draggable":"Uu4dPC","ghost":"A9Vqiq","is-dragged-out":"SbCP43","isDraggedOut":"SbCP43","dnd-marker-left":"_2Kato0","dndMarkerLeft":"_2Kato0","dnd-marker-right":"mpFa3g","dndMarkerRight":"mpFa3g","cell-tooltip-wrapper":"R17D1Q","cellTooltipWrapper":"R17D1Q","cell-tooltip-text":"_4Rswgk","cellTooltipText":"_4Rswgk","tooltip-caption":"_3Atr3M","tooltipCaption":"_3Atr3M","tooltip-info":"ZLOO7Q","tooltipInfo":"ZLOO7Q"};
 
 class DataTableHeaderCell extends React.Component {
     constructor() {
@@ -3911,22 +3837,23 @@ class DataTableHeaderCell extends React.Component {
             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 = [
+            const captionCx = cx$1([
                 css$v.caption,
                 this.props.textCase === 'upper' && css$v.upperCase,
                 uuiDataTableHeaderCell.uuiTableHeaderCaption,
+                'uui-typography-inline',
                 this.props.size >= '48' && css$v.truncate,
-            ];
+            ]);
             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.dataTable.sizes.header[this.props.textCase === 'upper' ? 'captionUppercase' : 'captionFontSize'], size: settings.dataTable.sizes.header.captionSize, cx: captionCx }, this.props.column.caption)),
+                    React.createElement("div", { key: "text", className: captionCx }, this.props.column.caption)),
                 this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React.createElement(IconButton, { key: "sort", cx: cx$1(css$v.icon, css$v.sortIcon, this.props.sortDirection && css$v.sortIconActive, uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: this.props.sortDirection ? 'neutral' : 'secondary', icon: settings.dataTable.icons.header[this.props.sortDirection === 'desc' ? 'descSortIcon' : this.props.sortDirection === 'asc' ? 'ascSortIcon' : 'defaultSortIcon'] })),
                 this.props.isFilterActive && (React.createElement(IconButton, { key: "filter", cx: cx$1(css$v.icon, !this.props.sortDirection && css$v.filterIcon, uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "neutral", icon: settings.dataTable.icons.header.filterIcon })),
                 this.props.column.renderFilter && (React.createElement(IconButton, { key: "dropdown", cx: cx$1(css$v.icon, css$v.dropdownIcon, uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), color: "secondary", icon: settings.dataTable.icons.header[this.state.isDropdownOpen ? 'openedDropdownIcon' : 'dropdownIcon'] }))));
         };
         this.renderHeaderCheckbox = () => {
             if (this.props.selectAll && this.props.isFirstColumn) {
-                return (React.createElement(Checkbox, { size: settings.dataTable.sizes.header.cellCheckboxMap[this.props.size], ...this.props.selectAll, cx: cx$1(css$v.checkbox, uuiDataTableHeaderCell.uuiTableHeaderCheckbox) }));
+                return (React.createElement(Checkbox, { size: settings.dataTable.sizes.body.checkboxMap[this.props.size], ...this.props.selectAll, cx: cx$1(css$v.checkbox, uuiDataTableHeaderCell.uuiTableHeaderCheckbox) }));
             }
         };
         this.renderFoldAllIcon = () => {
@@ -3946,32 +3873,32 @@ class DataTableHeaderCell extends React.Component {
         this.getLeftPadding = () => {
             const { columnsGap, isFirstColumn } = this.props;
             if (columnsGap)
-                return isFirstColumn ? columnsGap : +columnsGap / 2;
-            return isFirstColumn ? settings.dataTable.sizes.header.defaultCellPaddingEdge : settings.dataTable.sizes.header.defaultCellPadding;
+                return isFirstColumn ? `${columnsGap}px` : `${+columnsGap / 2}px`;
+            return `var(--uui-dt-header-cell-padding${isFirstColumn ? '-edge' : ''})`;
         };
         this.getRightPadding = () => {
             const { columnsGap, isLastColumn } = this.props;
             if (columnsGap)
-                return isLastColumn ? columnsGap : +columnsGap / 2;
-            return isLastColumn ? settings.dataTable.sizes.header.defaultCellPaddingEdge : settings.dataTable.sizes.header.defaultCellPadding;
+                return isLastColumn ? `${columnsGap}px` : `${+columnsGap / 2}px`;
+            return `var(--uui-dt-header-cell-padding${isLastColumn ? '-edge' : ''})`;
         };
         this.getResizingMarkerWidth = () => {
             const { columnsGap } = this.props;
-            return columnsGap ? +columnsGap / 2 : settings.dataTable.sizes.header.defaultResizeMarker;
+            return columnsGap ? `${+columnsGap / 2}px` : 'var(--uui-resize-marker-width)';
         };
         this.renderCellContent = (props, dropdownProps) => {
             const isResizable = this.props.column.allowResizing ?? this.props.allowColumnsResizing;
             const onClickEvent = !props.isResizing && (!this.props.column.renderFilter ? props.toggleSort : dropdownProps?.onClick);
             const computeStyles = {
-                '--uui-dt-header-cell-icon-size': `${settings.dataTable.sizes.header.cellIconMap[this.props.size || settings.dataTable.sizes.header.defaultCell]}px`,
-                '--uui-dt-header-cell-padding-start': `${this.getLeftPadding()}px`,
-                '--uui-dt-header-cell-padding-end': `${this.getRightPadding()}px`,
-                '--uui-dt-header-cell-resizing-marker-width': `${this.getResizingMarkerWidth()}px`,
+                '--uui-dt-header-cell-icon-size': `${settings.dataTable.sizes.header.iconMap[this.props.size || settings.dataTable.sizes.header.row]}px`,
+                '--uui-dt-header-cell-padding-start': this.getLeftPadding(),
+                '--uui-dt-header-cell-padding-end': this.getRightPadding(),
+                '--uui-dt-header-cell-resizing-marker-width': this.getResizingMarkerWidth(),
             };
             return (React.createElement(DataTableCellContainer, { column: this.props.column, ref: (ref) => {
                     props.ref(ref);
                     dropdownProps?.ref?.(ref);
-                }, cx: cx$1(uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiMarkers.clickable, css$v.root, `uui-size-${this.props.size || settings.dataTable.sizes.header.defaultCell}`, 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: {
+                }, cx: cx$1(uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiMarkers.clickable, css$v.root, `uui-size-${this.props.size || settings.dataTable.sizes.header.row}`, 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: {
                     role: 'columnheader',
                     'aria-sort': this.props.sortDirection === 'asc' ? 'ascending' : this.props.sortDirection ? 'descending' : 'none',
                     ...props.eventHandlers,
@@ -3991,7 +3918,7 @@ class DataTableHeaderCell extends React.Component {
     }
 }
 
-var css$u = {"root":"GR-Gt5","caption-wrapper":"zidsL6","captionWrapper":"zidsL6","align-center":"OxNrzI","alignCenter":"OxNrzI","caption":"_4nza43","truncate":"JRbAiP","group-cell-tooltip":"poKrOq","groupCellTooltip":"poKrOq","upper-case":"bIO6Ce","upperCase":"bIO6Ce","group-cell-tooltip-wrapper":"oCtpMt","groupCellTooltipWrapper":"oCtpMt","group-cell-tooltip-text":"hyKahy","groupCellTooltipText":"hyKahy","tooltip-caption":"-iZXd2","tooltipCaption":"-iZXd2","tooltip-info":"_0yeZNQ","tooltipInfo":"_0yeZNQ"};
+var css$u = {"root":"nnmUsE","caption-wrapper":"NWIalo","captionWrapper":"NWIalo","align-center":"UH7NoV","alignCenter":"UH7NoV","caption":"yYFm7f","truncate":"Q2DOnW","upper-case":"X2Dsm3","upperCase":"X2Dsm3","group-cell-tooltip":"v66jw-","groupCellTooltip":"v66jw-","group-cell-tooltip-wrapper":"_9vdvGJ","groupCellTooltipWrapper":"_9vdvGJ","group-cell-tooltip-text":"jFcg5i","groupCellTooltipText":"jFcg5i","tooltip-caption":"Xp-SPL","tooltipCaption":"Xp-SPL","tooltip-info":"_8B8Zji","tooltipInfo":"_8B8Zji"};
 
 class DataTableHeaderGroupCell extends React.Component {
     constructor() {
@@ -4001,39 +3928,22 @@ class DataTableHeaderGroupCell extends React.Component {
             column.info && (React.createElement(Text, { cx: [css$u.groupCellTooltipText, css$u.tooltipInfo] }, column.info))));
         this.getColumnCaption = () => {
             const renderTooltip = this.props.group.renderTooltip || this.getTooltipContent;
-            const captionCx = [
-                css$u.caption,
-                this.props.textCase === 'upper' && css$u.upperCase,
-                uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCaption,
-                this.props.size >= '48' && css$u.truncate,
-            ];
+            const captionCx = cx$1(css$u.caption, this.props.textCase === 'upper' && css$u.upperCase, uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCaption, 'uui-typography-inline', this.props.size >= '48' && css$u.truncate);
             return (React.createElement("div", { className: cx$1(css$u.captionWrapper, css$u['align-' + this.props.group.textAlign], uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCaptionWrapper) },
                 React.createElement(Tooltip, { placement: "top", color: "inverted", content: renderTooltip(this.props.group), cx: css$u.groupCellTooltip, openDelay: 600 },
-                    React.createElement(Text, { key: "text", fontSize: settings.dataTable.sizes.header[this.props.textCase === 'upper' ? 'groupCellCaptionUppercase' : 'groupCellCaptionFontSize'], size: settings.dataTable.sizes.header.groupCellCaptionSize, cx: captionCx }, this.props.group.caption))));
+                    React.createElement("div", { key: "text", className: captionCx }, this.props.group.caption))));
         };
         this.getLeftPadding = () => {
             const { columnsGap, isFirstCell } = this.props;
             if (columnsGap)
-                return isFirstCell ? columnsGap : +columnsGap / 2;
-            return isFirstCell ? settings.dataTable.sizes.header.defaultGroupCellPaddingEdge : settings.dataTable.sizes.header.defaultGroupCellPadding;
+                return isFirstCell ? `${columnsGap}px` : `${+columnsGap / 2}px`;
+            return `var(--uui-dt-header-group-cell-padding${isFirstCell ? '-edge' : ''})`;
         };
         this.getRightPadding = () => {
             const { columnsGap, isLastCell } = this.props;
             if (columnsGap)
-                return isLastCell ? columnsGap : +columnsGap / 2;
-            return isLastCell ? settings.dataTable.sizes.header.defaultGroupCellPaddingEdge : settings.dataTable.sizes.header.defaultGroupCellPadding;
-        };
-        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$u.root, `uui-size-${this.props.size || settings.dataTable.sizes.header.defaultGroupCell}`, this.props.isFirstCell && 'uui-dt-header-first-column', this.props.isLastCell && 'uui-dt-header-last-column'), rawProps: {
-                    role: 'columnheader',
-                    ...props.eventHandlers,
-                }, style: computeStyles }, this.getColumnCaption()));
+                return isLastCell ? `${columnsGap}px` : `${+columnsGap / 2}px`;
+            return `var(--uui-dt-header-group-cell-padding${isLastCell ? '-edge' : ''})`;
         };
     }
     render() {
@@ -4041,19 +3951,19 @@ class DataTableHeaderGroupCell extends React.Component {
             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`,
+            '--uui-dt-header-group-cell-padding-start': this.getLeftPadding(),
+            '--uui-dt-header-group-cell-padding-end': this.getRightPadding(),
         };
-        return (React.createElement(DataTableCellContainer, { column: this.props.group, cx: cx$1(uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCell, css$u.root, `uui-size-${this.props.size || settings.dataTable.sizes.header.defaultGroupCell}`, this.props.isFirstCell && 'uui-dt-header-first-column', this.props.isLastCell && 'uui-dt-header-last-column'), rawProps: { role: 'columnheader' }, style: computeStyles }, this.getColumnCaption()));
+        return (React.createElement(DataTableCellContainer, { column: this.props.group, cx: cx$1(uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCell, css$u.root, `uui-size-${this.props.size || settings.dataTable.sizes.header.row}`, this.props.isFirstCell && 'uui-dt-header-first-column', this.props.isLastCell && 'uui-dt-header-last-column'), rawProps: { role: 'columnheader' }, style: computeStyles }, this.getColumnCaption()));
     }
 }
 
-var css$t = {"root":"LAc08w"};
+var css$t = {"root":"C98oWG"};
 
 const DataTableHeaderRow = /* @__PURE__ */withMods(DataTableHeaderRow$1, () => [css$t.root, 'uui-dt-vars'], (mods) => ({
     renderCell: (props) => (React.createElement(DataTableHeaderCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.column.key, columnsGap: mods.columnsGap })),
     renderGroupCell: (props) => (React.createElement(DataTableHeaderGroupCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.key, columnsGap: mods.columnsGap })),
-    renderConfigButton: () => (React.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: ['config-icon', `uui-size-${settings.dataTable.sizes.header.cellIconMap[mods.size || settings.dataTable.sizes.header.defaultRow]}`], color: "neutral", icon: settings.dataTable.icons.header.configIcon })),
+    renderConfigButton: () => (React.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: ['config-icon', `uui-size-${settings.dataTable.sizes.header.iconMap[mods.size || settings.dataTable.sizes.header.row]}`], color: "neutral", icon: settings.dataTable.icons.header.configIcon })),
 }));
 
 const UUI_FILTERS_PANEL_ADD_BUTTON = 'uui-filters-panel-add-button';
@@ -4061,15 +3971,14 @@ 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 = {"root":"_4-TTAQ","title-wrapper":"_5dHCg6","titleWrapper":"_5dHCg6","title":"xkKgNe","text-wrapper":"_5vgl3Q","textWrapper":"_5vgl3Q","selection":"_7buSnJ","postfix":"wqjXGW","selected":"RpYvo9"};
+var css$s = {"root":"NYRimP","title-wrapper":"ySAYFb","titleWrapper":"ySAYFb","title":"cZP9sj","text-wrapper":"_5PBzw7","textWrapper":"_5PBzw7","selection":"_7LpIPy","postfix":"_9hXPWM","selected":"_-2c0e0"};
 
-const defaultSize = '36';
 const FilterPanelItemToggler = /* @__PURE__ */React.forwardRef((props, ref) => {
     const togglerPickerOpened = (e) => {
         if (props.isDisabled)
             return;
         e.preventDefault();
-        props.onClick?.();
+        !isEventTargetInsideClickable(e) && props.onClick?.();
     };
     const onKeyDownHandler = (e) => {
         if (props.isDisabled)
@@ -4087,13 +3996,8 @@ const FilterPanelItemToggler = /* @__PURE__ */React.forwardRef((props, ref) => {
     const getSelectionText = () => props.selection.map((i, index) => (React.createElement(React.Fragment, { key: `${i}${index}` },
         React.createElement(Text, { color: "primary", size: props.size, cx: css$s.selection }, i),
         (props.postfix || index !== props.selection.length - 1) && React.createElement("span", null, ",\u00A0"))));
-    return (React.createElement(FlexRow$1, { ...props, rawProps: {
-            style: { maxWidth: `${props.maxWidth ? props.maxWidth + 'px' : 'auto'}` },
-            role: 'button',
-            tabIndex: props.isDisabled ? -1 : 0,
-            onKeyDown: onKeyDownHandler,
-        }, cx: cx(UUI_FILTERS_PANEL_ITEM_TOGGLER, css$s.root, uuiElement.inputBox, uuiMarkers.clickable, props.isOpen && uuiMod.opened, `uui-size-${props.size || defaultSize}`, props.cx), onClick: togglerPickerOpened, ref: ref },
-        React.createElement(FlexRow$1, { cx: css$s.titleWrapper },
+    return (React.createElement("div", { style: { maxWidth: `${props.maxWidth ? props.maxWidth + 'px' : 'auto'}` }, role: "button", tabIndex: props.isDisabled ? -1 : 0, onKeyDown: onKeyDownHandler, className: cx(UUI_FILTERS_PANEL_ITEM_TOGGLER, css$s.root, uuiElement.inputBox, uuiMarkers.clickable, props.isOpen && uuiMod.opened, `uui-size-${props.size || settings.pickerInput.sizes.toggler.default}`, props.cx), onClick: togglerPickerOpened, ref: ref },
+        React.createElement("div", { className: css$s.titleWrapper },
             React.createElement(Text, { size: props.size, cx: css$s.title }, getTitle),
             props.selection && (React.createElement("div", { className: css$s.textWrapper },
                 getSelectionText(),
@@ -4125,7 +4029,7 @@ function FilterPickerBody({ highlightSearchMatches = true, ...restProps }) {
     };
     const renderItem = (item, rowProps, dsState) => {
         const { flattenSearchResults } = view.getConfig();
-        return (React.createElement(PickerItem, { title: getName(item), highlightSearchMatches: highlightSearchMatches, ...(flattenSearchResults ? { subtitle: getSubtitle(rowProps, dsState) } : {}), dataSourceState: dsState, size: settings.filtersPanel.sizes.pickerInput.body.rowItem, ...rowProps }));
+        return (React.createElement(PickerItem, { title: getName(item), highlightSearchMatches: highlightSearchMatches, ...(flattenSearchResults ? { subtitle: getSubtitle(rowProps, dsState) } : {}), dataSourceState: dsState, size: settings.pickerInput.sizes.body.row, ...rowProps }));
     };
     const onSelect = (row) => {
         handleDataSourceValueChange((currentDataSourceState) => ({ ...currentDataSourceState, search: '', selectedId: row.id }));
@@ -4134,20 +4038,20 @@ function FilterPickerBody({ highlightSearchMatches = true, ...restProps }) {
         if (rowProps.isSelectable && isSingleSelect() && props.editMode !== 'modal') {
             rowProps.onSelect = onSelect;
         }
-        return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React.createElement(DataPickerRow, { ...rowProps, key: rowProps.rowKey, size: settings.filtersPanel.sizes.pickerInput.body.row, padding: "12", renderItem: (item, itemProps) => renderItem(item, itemProps, dsState) }));
+        return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React.createElement(DataPickerRow, { ...rowProps, key: rowProps.rowKey, size: settings.pickerInput.sizes.body.row, padding: "12", renderItem: (item, itemProps) => renderItem(item, itemProps, dsState) }));
     };
     const renderFooter = () => {
         const footerProps = getFooterProps();
         return props.renderFooter
             ? props.renderFooter(footerProps)
-            : React.createElement(DataPickerFooter, { ...footerProps, size: settings.filtersPanel.sizes.pickerInput.body.footer });
+            : React.createElement(DataPickerFooter, { ...footerProps, size: settings.pickerInput.sizes.body.row });
     };
     const renderBody = (bodyProps, rows) => {
         const renderedDataRows = rows.map((props) => renderRow(props, dataSourceState));
         const maxHeight = isMobile() ? document.documentElement.clientHeight : props.maxBodyHeight || pickerHeight;
         const maxWidth = isMobile() ? undefined : 360;
         return (React.createElement(React.Fragment, null,
-            React.createElement(DataPickerBody, { ...bodyProps, selectionMode: props.selectionMode, rows: renderedDataRows, maxHeight: maxHeight, maxWidth: maxWidth, searchSize: settings.filtersPanel.sizes.pickerInput.body.searchInput, editMode: "dropdown" }),
+            React.createElement(DataPickerBody, { ...bodyProps, selectionMode: props.selectionMode, rows: renderedDataRows, maxHeight: maxHeight, maxWidth: maxWidth, searchSize: settings.pickerInput.sizes.body.row, editMode: "dropdown" }),
             renderFooter()));
     };
     const rows = getRows();
@@ -4235,7 +4139,7 @@ function FilterRangeDatePickerBody(props) {
                 React__default.createElement(LinkButton, { isDisabled: !value.from && !value.to, caption: i18n.pickerModal.clearAllButton, onClick: () => onValueChange(defaultRangeValue) })))));
 }
 
-var css$r = {"container":"_9cFCcM"};
+var css$r = {"container":"LYED6-"};
 
 function FilterNumericBody(props) {
     const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
@@ -4331,7 +4235,7 @@ var SvgActionDeleteOutline = function SvgActionDeleteOutline(props, ref) {
 };
 var ForwardRef$a = /*#__PURE__*/forwardRef(SvgActionDeleteOutline);
 
-var css$q = {"header":"kEMYyV","removeButton":"MNKO4D","with-search":"zov3Cp","withSearch":"zov3Cp"};
+var css$q = {"header":"_8mXhHb","removeButton":"fZWPWN","with-search":"lNmlG0","withSearch":"lNmlG0"};
 
 function useView(props, value) {
     const forceUpdate = useForceUpdate();
@@ -4637,7 +4541,7 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = /* @__PURE__ */React__default.memo(FiltersToolbarImpl);
 
-var css$p = {"divider":"Zydt7Y","dropdownDeleteIcon":"v9tW-G","presetsWrapper":"fh6hFx","addPresetContainer":"xNCudj","dropContainer":"D59x8G"};
+var css$p = {"divider":"lBbzQ8","dropdownDeleteIcon":"E5oIkk","presetsWrapper":"V6NsQW","addPresetContainer":"_503g45","dropContainer":"BV2WsR"};
 
 var _path$9;
 function _extends$9() { return _extends$9 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$9.apply(null, arguments); }
@@ -4718,7 +4622,7 @@ var SvgContentLinkOutline = function SvgContentLinkOutline(props, ref) {
 };
 var ForwardRef$5 = /*#__PURE__*/forwardRef(SvgContentLinkOutline);
 
-var css$o = {"delete-button":"IL5D3N","deleteButton":"IL5D3N","tab-button":"YQTYfl","tabButton":"YQTYfl","targetOpen":"t2R77m"};
+var css$o = {"delete-button":"xZYW9E","deleteButton":"xZYW9E","tab-button":"hVsgXZ","tabButton":"hVsgXZ","targetOpen":"q1eNVX"};
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = useUuiContext();
@@ -4785,7 +4689,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":"HRpjMj","presetInputCell":"HRpjMj","preset-input":"qZHWNY","presetInput":"qZHWNY"};
+var css$n = {"preset-input-cell":"w-ePv9","presetInputCell":"w-ePv9","preset-input":"AeWdDT","presetInput":"AeWdDT"};
 
 const UUI_PRESETS_PANEL_ADD_BUTTON = 'uui-presets-panel-add-button';
 const UUI_PRESETS_PANEL_MORE_BUTTON = 'uui-presets-panel-more-button';
@@ -4817,7 +4721,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":"UNn3-z","activePreset":"_4sWE3X"};
+var css$m = {"preset":"G6Iay0","activePreset":"gJKgZt"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = useState(false);
@@ -4943,7 +4847,7 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var css$l = {"unpin-icon":"vhOhyL","unpinIcon":"vhOhyL","pin-toggler-icon":"NHCZXo","pinTogglerIcon":"NHCZXo"};
+var css$l = {"unpin-icon":"IrmUQG","unpinIcon":"IrmUQG","pin-toggler-icon":"nmshk7","pinTogglerIcon":"nmshk7"};
 
 function PinIconButton(props) {
     const i18nLocal = i18n.tables.columnsConfigurationModal;
@@ -4985,7 +4889,7 @@ function getUnpinIcon(params) {
     }
 }
 
-var css$k = {"row-wrapper":"ZC1pIB","rowWrapper":"ZC1pIB","pin-icon-button":"_5wpIYf","pinIconButton":"_5wpIYf","not-pinned":"AMJFRE","notPinned":"AMJFRE","checkbox":"-hrr9u","drag-handle":"MZzGEf","dragHandle":"MZzGEf","dnd-disabled":"W2i6zu","dndDisabled":"W2i6zu"};
+var css$k = {"row-wrapper":"_1rj5tZ","rowWrapper":"_1rj5tZ","pin-icon-button":"YodOs9","pinIconButton":"YodOs9","not-pinned":"RqM0Rf","notPinned":"RqM0Rf","checkbox":"z6YCxf","drag-handle":"W8UDFx","dragHandle":"W8UDFx","dnd-disabled":"ikrVB6","dndDisabled":"ikrVB6"};
 
 const ColumnRow = /* @__PURE__ */React.memo(function ColumnRow(props) {
     const { column } = props;
@@ -5008,7 +4912,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 = {"root":"Wh76Zc","main-panel":"oJYp9R","mainPanel":"oJYp9R","group":"mWeg2x","group-title":"EFhdsz","groupTitle":"EFhdsz","group-items":"MVZ73D","groupItems":"MVZ73D","no-data":"mNP6av","noData":"mNP6av","no-data-title":"calT1B","noDataTitle":"calT1B","no-data-sub-title":"BsTl1I","noDataSubTitle":"BsTl1I","h-divider":"T-1Fiu","hDivider":"T-1Fiu","search-area":"A3kOG5","searchArea":"A3kOG5","subgroup-accordion":"aCKxpA","subgroupAccordion":"aCKxpA","subgroup":"mbgIvd","subgroup-title":"N9CAvG","subgroupTitle":"N9CAvG"};
+var css$j = {"root":"kVvcH5","main-panel":"qLv3jz","mainPanel":"qLv3jz","group":"yErj-z","group-title":"bW8MDX","groupTitle":"bW8MDX","group-items":"IS-Re2","groupItems":"IS-Re2","no-data":"_2-IT-t","noData":"_2-IT-t","no-data-title":"vjzuPi","noDataTitle":"vjzuPi","no-data-sub-title":"sRjdAU","noDataSubTitle":"sRjdAU","h-divider":"_3INRzj","hDivider":"_3INRzj","search-area":"vDbecE","searchArea":"vDbecE","subgroup-accordion":"l38dBE","subgroupAccordion":"l38dBE","subgroup":"cA6uH-","subgroup-title":"wksQ0I","subgroupTitle":"wksQ0I"};
 
 const renderGroupTitle = (title, amount) => (React.createElement(FlexRow, { cx: css$j.group },
     React.createElement(Text, { size: "none", cx: css$j.groupTitle }, title),
@@ -5057,7 +4961,7 @@ function ColumnsConfigurationModal(props) {
     };
     const applyButton = React.createElement(Button, { caption: i18n$1.applyButton, isDisabled: !hasAnySelectedColumns, color: "primary", onClick: apply });
     return (React.createElement(ModalBlocker, { ...modalProps },
-        React.createElement(ModalWindow, { cx: css$j.root, height: "95dvh", maxHeight: "95dvh", width: settings.dataTable.sizes.columnsConfigurationModal.width },
+        React.createElement(ModalWindow, { cx: [css$j.root, 'uui-columns-config-modal'], height: "95dvh", maxHeight: "95dvh" },
             React.createElement(ModalHeader, { title: i18n$1.configureColumnsTitle, onClose: close }),
             React.createElement(FlexRow, { borderBottom: true, cx: css$j.searchArea },
                 React.createElement(SearchInput, { size: settings.dataTable.sizes.columnsConfigurationModal.searchInput, value: searchValue, onValueChange: setSearchValue, placeholder: i18n$1.searchPlaceholder }),
@@ -5087,7 +4991,7 @@ function SubGroup(props) {
             const renderTitle = (isOpened) => {
                 const toggleIcon = settings.dataTable.icons.columnsConfigurationModal[isOpened ? 'expandedIcon' : 'collapsedIcon'];
                 return (React.createElement(FlexRow, { cx: cx$1(css$j.subgroup) },
-                    React.createElement(IconContainer, { size: settings.dataTable.sizes.columnsConfigurationModal.subgroupIcon, icon: toggleIcon }),
+                    React.createElement(IconContainer, { icon: toggleIcon }),
                     React.createElement(Text, { size: "none", color: "tertiary", cx: css$j.subgroupTitle }, title)));
             };
             return (React.createElement(Accordion$1, { value: isExpanded, onValueChange: setIsExpanded, renderTitle: renderTitle, cx: css$j.subgroupAccordion }, content));
@@ -5110,7 +5014,7 @@ const getChildrenAndRest = (row, rows) => {
     return [children, rest];
 };
 
-var css$i = {"listContainer":"RA6UbP","header":"cvTF-t","group":"OU4QQA","stickyHeader":"bBSS0x"};
+var css$i = {"listContainer":"KJP3gv","header":"VfM8gG","group":"zTB6i5","stickyHeader":"a61iPD"};
 
 function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
     const rowRef = useRef();
@@ -5150,7 +5054,7 @@ function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, r
             React__default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
 }
 
-var css$h = {"root":"aSH4Bk","sticky-header":"k8lJ07","stickyHeader":"k8lJ07","no-results":"Jx4-eV","noResults":"Jx4-eV","icon":"S88CWT","title":"R89Pm8"};
+var css$h = {"root":"_6E9HFf","sticky-header":"_9ubGQc","stickyHeader":"_9ubGQc","no-results":"grgolE","noResults":"grgolE","icon":"_2uZhhK","title":"NV1qei"};
 
 function DataTable(props) {
     const { uuiModals } = useUuiContext();
@@ -5158,7 +5062,7 @@ function DataTable(props) {
     const columnsWithFilters = useColumnsWithFilters(props.columns, props.filters);
     const { columns, config, defaultConfig } = useColumnsConfig(columnsWithFilters, props.value?.columnsConfig);
     const defaultRenderRow = React.useCallback((rowProps) => {
-        return (React.createElement(DataTableRow, { size: props.size || settings.dataTable.sizes.body.defaultRow, columnsGap: props.columnsGap, borderBottom: props.border, ...rowProps, key: rowProps.rowKey, cx: css$h.cell }));
+        return (React.createElement(DataTableRow, { size: props.size || settings.dataTable.sizes.body.row, columnsGap: props.columnsGap, borderBottom: props.border, ...rowProps, key: rowProps.rowKey, cx: css$h.cell }));
     }, []);
     const renderRow = (row) => (props.renderRow ?? defaultRenderRow)({ ...row, columns });
     const rows = props.getRows?.() ?? props.rows ?? [];
@@ -5183,7 +5087,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, columnGroups: props.columnGroups, onConfigButtonClick: props.showColumnsConfig && onConfigurationButtonClick, selectAll: props.selectAll, size: props.headerSize || settings.dataTable.sizes.header.defaultRow, textCase: props.headerTextCase, allowColumnsReordering: props.allowColumnsReordering, allowColumnsResizing: props.allowColumnsResizing, showFoldAll: props.showFoldAll, value: { ...props.value, columnsConfig: config }, onValueChange: props.onValueChange, columnsGap: props.columnsGap }),
+            React.createElement(DataTableHeaderRow, { columns: columns, columnGroups: props.columnGroups, onConfigButtonClick: props.showColumnsConfig && onConfigurationButtonClick, selectAll: props.selectAll, size: props.headerSize || settings.dataTable.sizes.header.row, textCase: props.headerTextCase, allowColumnsReordering: props.allowColumnsReordering, allowColumnsResizing: props.allowColumnsResizing, showFoldAll: props.showFoldAll, value: { ...props.value, columnsConfig: config }, onValueChange: props.onValueChange, columnsGap: props.columnsGap }),
             React.createElement("div", { className: cx$1(uuiScrollShadows.top, {
                     [uuiScrollShadows.topVisible]: scrollShadows.verticalTop,
                 }) })),
@@ -5199,9 +5103,9 @@ function DataTable(props) {
                 } }))));
 }
 
-var css$g = {"root":"a2VPjY"};
+var css$g = {"root":"eyuIWs"};
 
-var css$f = {"root":"-DwxTl","burger-content":"pTOuuJ","burgerContent":"pTOuuJ"};
+var css$f = {"root":"_5s9s3y","burger-content":"rhUFAS","burgerContent":"rhUFAS"};
 
 var _path$3;
 function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
@@ -5244,7 +5148,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
 };
 var ForwardRef$2 = /*#__PURE__*/forwardRef(SvgNavigationArrowDownOutline);
 
-var css$e = {"root":"sOZLeJ","button-primary":"LAS5hC","buttonPrimary":"LAS5hC","button-secondary":"H2BEcr","buttonSecondary":"H2BEcr","hasIcon":"-BnKQc","dropdown":"BQFur-"};
+var css$e = {"root":"X58g1v","button-primary":"d-6JeT","buttonPrimary":"d-6JeT","button-secondary":"-oJcZ6","buttonSecondary":"-oJcZ6","hasIcon":"i66-xf","dropdown":"tjmIEw"};
 
 const BurgerButton = /* @__PURE__ */withMods(Button$1, (props) => [
     css$e.root,
@@ -5255,13 +5159,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":"_1jP03B","searchInput":"_1jP03B"};
+var css$d = {"search-input":"GOtX43","searchInput":"GOtX43"};
 
 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$R }));
 }
 
-var css$c = {"root":"akLzdR","group-header":"TVrMPz","groupHeader":"TVrMPz","group-name":"KPcrEo","groupName":"KPcrEo","line":"_369njl"};
+var css$c = {"root":"_04H4yf","group-header":"UVFmhV","groupHeader":"UVFmhV","group-name":"Y--4xz","groupName":"Y--4xz","line":"Q89LRX"};
 
 function BurgerGroupHeader(props) {
     return (React.createElement("div", { className: cx(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
@@ -5269,7 +5173,7 @@ function BurgerGroupHeader(props) {
         React.createElement("span", { className: css$c.groupName }, props.caption)));
 }
 
-var css$b = {"root":"z0rrqG","type-primary":"_-23vmZ","typePrimary":"_-23vmZ","type-secondary":"CKUDIJ","typeSecondary":"CKUDIJ"};
+var css$b = {"root":"_3Pd-XE","type-primary":"_6tR5d9","typePrimary":"_6tR5d9","type-secondary":"LG9fZp","typeSecondary":"LG9fZp"};
 
 const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { type, ...clickableProps } = props;
@@ -5291,7 +5195,7 @@ const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         props.isDropdown && (React.createElement(IconContainer, { icon: ForwardRef$Q, flipY: props.isOpen }))));
 });
 
-var css$a = {"dropdown-body":"JAwx6Z","dropdownBody":"JAwx6Z"};
+var css$a = {"dropdown-body":"WcWjiR","dropdownBody":"WcWjiR"};
 
 class MainMenuDropdown extends React.Component {
     render() {
@@ -5349,12 +5253,12 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
 };
 var ForwardRef$1 = /*#__PURE__*/forwardRef(SvgNavigationGlobalMenuOutlineOutline);
 
-var css$9 = {"global-menu-btn":"r1-gpT","globalMenuBtn":"r1-gpT","global-menu-icon":"fV84DJ","globalMenuIcon":"fV84DJ"};
+var css$9 = {"global-menu-btn":"lLYBJD","globalMenuBtn":"lLYBJD","global-menu-icon":"Ldpuo0","globalMenuIcon":"Ldpuo0"};
 
 const GlobalMenu = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("button", { ref: ref, id: "global_menu_toggle", className: cx(css$9.globalMenuBtn, props.cx), ...props.rawProps },
     React.createElement(IconContainer, { size: 36, icon: ForwardRef$1, cx: css$9.globalMenuIcon }))));
 
-var css$8 = {"container":"oYH7w9","open":"UzfID-","folding-arrow":"mS0HxC","foldingArrow":"mS0HxC"};
+var css$8 = {"container":"zabDar","open":"Wz1fKA","folding-arrow":"qsOfLC","foldingArrow":"qsOfLC"};
 
 const MainMenuAvatar = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("button", { ref: ref, className: cx(css$8.container, props.isDropdown && css$8.dropdown, props.isOpen && css$8.open, props.onClick && uuiMarkers.clickable, props.cx), onClick: props.onClick, ...props.rawProps },
     React.createElement(Avatar, { size: "36", img: props.avatarUrl }),
@@ -5362,15 +5266,15 @@ const MainMenuAvatar = /* @__PURE__ */React.forwardRef((props, ref) => (React.cr
     props.isDropdown && (React.createElement("div", null,
         React.createElement(IconContainer, { size: 18, icon: ForwardRef$Q, flipY: props.isOpen, cx: css$8.foldingArrow }))))));
 
-var css$7 = {"search-input":"ddCIhJ","searchInput":"ddCIhJ"};
+var css$7 = {"search-input":"JoH-wf","searchInput":"JoH-wf"};
 
 const MainMenuSearch = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement(IEditableDebouncer, { ...props, render: (iEditable) => (React.createElement(TextInput$1, { iconPosition: "left", icon: ForwardRef$N, cancelIcon: props.value?.length > 0 && ForwardRef$R, ...props, ...iEditable, ref: ref, cx: cx$1(css$7.searchInput, props.cx), ...props.rawProps })) })));
 
-var css$6 = {"container":"EmQgH6"};
+var css$6 = {"container":"_6zb1UE"};
 
 const MainMenuIcon = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement(IconButton, { ref: ref, icon: props.icon, cx: cx$1(props.cx, css$6.container), ...props })));
 
-var css$5 = {"root":"Vo0gnh"};
+var css$5 = {"root":"BW6Dfu"};
 
 const Anchor = /* @__PURE__ */withMods(Anchor$1, () => [css$5.root]);
 
@@ -5428,7 +5332,7 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgFileCloudUploadFill);
 
-var css$4 = {"root":"XQhZb0","drop-start":"DF41Ui","dropStart":"DF41Ui","drop-over":"DJBlJv","dropOver":"DJBlJv","link":"X--gLn","drop-area":"eASNOa","dropArea":"eASNOa","drop-caption":"NqH7qk","dropCaption":"NqH7qk","icon-blue":"azbwTy","iconBlue":"azbwTy"};
+var css$4 = {"root":"rceAX-","drop-start":"LUqc6A","dropStart":"LUqc6A","drop-over":"OQGg54","dropOver":"OQGg54","link":"_5IhcO0","drop-area":"GqhtNH","dropArea":"GqhtNH","drop-caption":"NWLsrW","dropCaption":"NWLsrW","icon-blue":"kZsHiK","iconBlue":"kZsHiK"};
 
 function DropSpot(props) {
     const getInfoText = typeof props.infoText === 'string'
@@ -5446,7 +5350,7 @@ function DropSpot(props) {
     return React.createElement(DropSpot$1, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
 }
 
-var css$3 = {"root":"RJ8vpw"};
+var css$3 = {"root":"FsGteO"};
 
 const SvgCircleProgress = /* @__PURE__ */React.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
@@ -5457,7 +5361,7 @@ const SvgCircleProgress = /* @__PURE__ */React.forwardRef((props, ref) => {
         React.createElement("circle", { strokeWidth: 1, fill: "transparent", r: outsetRadius, cx: props.size / 2, cy: props.size / 2 })));
 });
 
-var css$2 = {"root":"AE3yh0","file-name":"cLg4vL","fileName":"cLg4vL","default-color":"_8b83gk","defaultColor":"_8b83gk","doc-color":"_6kjFLz","docColor":"_6kjFLz","xls-color":"xngFtw","xlsColor":"xngFtw","pdf-color":"CZz5ky","pdfColor":"CZz5ky","movie-color":"YN8MFh","movieColor":"YN8MFh","img-color":"dr0XFS","imgColor":"dr0XFS","mov-color":"UCPMyh","movColor":"UCPMyh","error-block":"_8VNSKN","errorBlock":"_8VNSKN","icons-block":"rokHlV","iconsBlock":"rokHlV"};
+var css$2 = {"root":"e9aoDJ","file-name":"wwWw79","fileName":"wwWw79","default-color":"pqs8p3","defaultColor":"pqs8p3","doc-color":"zULxOB","docColor":"zULxOB","xls-color":"fCe9BZ","xlsColor":"fCe9BZ","pdf-color":"HU72eK","pdfColor":"HU72eK","movie-color":"vjy2z5","movieColor":"vjy2z5","img-color":"va3grO","imgColor":"va3grO","mov-color":"_1XyXJY","movColor":"_1XyXJY","error-block":"lFDyRF","errorBlock":"lFDyRF","icons-block":"DG9-Pt","iconsBlock":"DG9-Pt"};
 
 const FileCard = /* @__PURE__ */React.forwardRef((props, ref) => {
     const [isLoadingShow, setIsLoadingShow] = React.useState(true);
@@ -5515,7 +5419,7 @@ const FileCard = /* @__PURE__ */React.forwardRef((props, ref) => {
         React.createElement("div", { className: css$2.errorBlock },
             React.createElement(IconContainer, { icon: settings.fileCard.icons.errorIcon, size: 12 }),
             i18n.fileCard.failedUploadErrorMessage)));
-    const renderSuccessfulContent = () => (React.createElement(Text, { size: "18", fontSize: "14", lineHeight: "18", color: "tertiary" },
+    const renderSuccessfulContent = () => (React.createElement(Text, { size: "none", fontSize: "14", lineHeight: "18", color: "tertiary" },
         fileExtension && `${fileExtension.toUpperCase()}, `,
         isLoading && formatBytes((size / 100) * progress, 2, false) + i18n.fileCard.fileSizeProgress,
         formatBytes(size)));
@@ -5527,7 +5431,7 @@ const FileCard = /* @__PURE__ */React.forwardRef((props, ref) => {
         React.createElement(FlexRow, { alignItems: "top", columnGap: "6" },
             fileExtension && getIcon(fileExtension),
             React.createElement(FlexCell, { width: "100%" },
-                React.createElement(Text, { size: "18", fontSize: "14", lineHeight: "18", color: (progress < 100 || error?.isError) ? 'tertiary' : 'primary', cx: css$2.fileName }, fileName),
+                React.createElement(Text, { size: "none", fontSize: "14", lineHeight: "18", color: (progress < 100 || error?.isError) ? 'tertiary' : 'primary', cx: css$2.fileName }, fileName),
                 error?.isError ? renderErrorContent() : renderSuccessfulContent()),
             React.createElement("div", { className: cx$1(css$2.iconsBlock), onMouseEnter: mouseEnterHandler, onMouseLeave: mouseLeaveHandler },
                 isLoadingShow && isLoading && React.createElement(SvgCircleProgress, { progress: progress, size: 18 }),
@@ -5576,7 +5480,7 @@ const getErrorPageConfig = () => ({
     },
 });
 
-var css$1 = {"container":"ocFUlp"};
+var css$1 = {"container":"xLxjz3"};
 
 const ErrorPage = (props) => {
     const isMobileScreen = isMobile();
@@ -5588,7 +5492,7 @@ const ErrorPage = (props) => {
             props?.supportLink && React__default.createElement("div", { className: "uui-error-support-link" }, props?.supportLink))));
 };
 
-var css = {"recovery-spinner":"Gzt5ws","recoverySpinner":"Gzt5ws","recovery-message":"pU12Nu","recoveryMessage":"pU12Nu","modal-blocker":"XewWBa","modalBlocker":"XewWBa","modalFadeIn":"TwhGIO"};
+var css = {"recovery-spinner":"Bw4cMJ","recoverySpinner":"Bw4cMJ","recovery-message":"YL7Wdk","recoveryMessage":"YL7Wdk","modal-blocker":"_4F3Xr-","modalBlocker":"_4F3Xr-","modalFadeIn":"rbUe28"};
 
 function ErrorHandler(props) {
     const { uuiNotifications, uuiModals, uuiApi } = useUuiContext();
@@ -5639,5 +5543,5 @@ function ErrorHandler(props) {
         errorType === 'recovery' && renderRecoveryBlocker(errorInfo)));
 }
 
-export { Accordion, Alert, Anchor, AvatarStack, Badge, Blocker, Burger, BurgerButton, BurgerGroupHeader, BurgerSearch, Button, Calendar, Checkbox, CheckboxGroup, ClearNotification, ColumnHeaderDropdown, ColumnsConfigurationModal, ConfirmationModal, ControlGroup, CountIndicator, DataPickerBody, DataPickerCell, DataPickerFooter, DataPickerHeader, DataPickerRow, DataRowAddons, DataRowsContainer, DataTable, DataTableCell, DataTableHeaderCell, DataTableHeaderRow, DataTableRow, DatePicker, DatePickerBody, DatePickerComponent, DropMarker, DropSpot, Dropdown, DropdownContainer, DropdownMenuBody, DropdownMenuButton, DropdownMenuHeader, DropdownMenuSplitter, DropdownMenuSwitchButton, DropdownSubMenu, ErrorAlert, ErrorHandler, ErrorNotification, ErrorPage, FileCard, FilterItemBody, FilterPickerBody, FiltersPanel, FlexCell, FlexRow, Form, GlobalMenu, HintAlert, HintNotification, IDropdownControlKeys, IconButton, IndeterminateBar, IndicatorBar, InputAddon, LabeledInput, LinkButton, MainMenu, MainMenuAvatar, MainMenuButton, MainMenuDropdown, MainMenuIcon, MainMenuSearch, ModalBlocker, ModalFooter, ModalHeader, ModalWindow, MultiSwitch, NotificationCard, NumericInput, Paginator, Panel, PickerBodyMobileView, PickerInput, PickerItem, PickerList, PickerListItem, PickerModal, PickerToggler, PickerTogglerTag, PresetsPanel, ProgressBar, RadioGroup, RadioInput, RangeDatePicker, RangeDatePickerBody, RangeDatePickerInput, Rating, RichTextView, ScrollBars, SearchInput, Slider, Snackbar, Spinner, StatusIndicator, SuccessAlert, SuccessNotification, SvgCircleProgress, Switch, TabButton, Tag, Text, TextArea, TextInput, TextPlaceholder, TimePicker, TimePickerBody, Tooltip, VerticalTabButton, VirtualList, WarningAlert, WarningNotification, applyDateSelectionMods, defaultPredicates, fileIcons, getErrorPageConfig, getHighlightRanges, getHighlightedSearchMatches, getRecoveryMessageConfig, i18n, propsMods, rangeDatePickerPresets, renderCell, renderDropMarkers, settings, useColumnsWithFilters, useForm, uuiDatePickerBody, uuiRangeDatePickerBody, uuiTimePicker };
+export { Accordion, Alert, Anchor, AvatarStack, Badge, Blocker, Burger, BurgerButton, BurgerGroupHeader, BurgerSearch, Button, Calendar, Checkbox, CheckboxGroup, ClearNotification, ColumnHeaderDropdown, ColumnsConfigurationModal, ConfirmationModal, ControlGroup, CountIndicator, DataPickerBody, DataPickerCell, DataPickerFooter, DataPickerHeader, DataPickerRow, DataRowAddons, DataRowsContainer, DataTable, DataTableCell, DataTableHeaderCell, DataTableHeaderRow, DataTableRow, DatePicker, DatePickerBody, DatePickerComponent, DropMarker, DropSpot, Dropdown, DropdownContainer, DropdownMenuBody, DropdownMenuButton, DropdownMenuHeader, DropdownMenuSplitter, DropdownMenuSwitchButton, DropdownSubMenu, ErrorAlert, ErrorHandler, ErrorNotification, ErrorPage, FileCard, FilterItemBody, FilterPickerBody, FiltersPanel, FlexCell, FlexRow, Form, GlobalMenu, HintAlert, HintNotification, IDropdownControlKeys, IconButton, IndeterminateBar, IndicatorBar, InputAddon, LabeledInput, LinkButton, MainMenu, MainMenuAvatar, MainMenuButton, MainMenuDropdown, MainMenuIcon, MainMenuSearch, ModalBlocker, ModalFooter, ModalHeader, ModalWindow, MultiSwitch, NotificationCard, NumericInput, Paginator, Panel, PickerBodyMobileView, PickerInput, PickerItem, PickerList, PickerListItem, PickerModal, PickerToggler, PickerTogglerTag, PresetsPanel, ProgressBar, RadioGroup, RadioInput, RangeDatePicker, RangeDatePickerBody, RangeDatePickerInput, Rating, RichTextView, ScrollBars, SearchInput, Slider, Snackbar, Spinner, StatusIndicator, SuccessAlert, SuccessNotification, SvgCircleProgress, Switch, TabButton, Tag, Text, TextArea, TextInput, TextPlaceholder, TimePicker, TimePickerBody, Tooltip, VerticalTabButton, VirtualList, WarningAlert, WarningNotification, applyDateSelectionMods, defaultPredicates, getErrorPageConfig, getHighlightRanges, getHighlightedSearchMatches, getRecoveryMessageConfig, i18n, propsMods, rangeDatePickerPresets, renderCell, renderDropMarkers, settings, useColumnsWithFilters, useForm, uuiDatePickerBody, uuiRangeDatePickerBody, uuiTimePicker };
 //# sourceMappingURL=index.esm.js.map