@epam/uui 5.13.3-beta.3 → 5.13.3-rc.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import * as uuiComponents from '@epam/uui-components';
-import { Clickable, IconContainer, RadioInput as RadioInput$1, TextInput as TextInput$1, ControlGroup as ControlGroup$1, NumericInput as NumericInput$1, TextArea as TextArea$1, Dropdown as Dropdown$1, Anchor as Anchor$1, 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, FlexRow as FlexRow$1, FlexSpacer, Text as Text$1, FlexCell as FlexCell$1, VPanel, ScrollBars as ScrollBars$1, AvatarStack as AvatarStack$1, Spinner as Spinner$1, Paginator as Paginator$1, DragHandle, Blocker as Blocker$1, ModalBlocker as ModalBlocker$1, ModalWindow as ModalWindow$1, Snackbar as Snackbar$1, InputAddon as InputAddon$1, Slider as Slider$1, Calendar as Calendar$1, YearSelection, MonthSelection, Day, uuiDaySelection, PickerBodyBase, DataPickerRow as DataPickerRow$1, Avatar, usePickerModal, handleDataSourceKeyboard, PickerToggler as PickerToggler$1, usePickerInput, usePickerList, DataTableCell as DataTableCell$1, DataTableRow as DataTableRow$1, DataTableCellContainer, DataTableHeaderCell as DataTableHeaderCell$1, DataTableHeaderRow as DataTableHeaderRow$1, AdaptivePanel, useColumnsConfiguration, Accordion as Accordion$1, DataTableSelectionProvider, DataTableFocusProvider, Burger as Burger$1, Button as Button$1, DropSpot as DropSpot$1, UploadFileToggler, ErrorCatch } from '@epam/uui-components';
 export { Avatar, DataTableCellContainer, FlexSpacer, IconContainer } from '@epam/uui-components';
-import { withMods, devLogger, uuiElement, cx as cx$1, uuiMarkers, IEditableDebouncer, UuiContext, uuiMod, 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 { 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 * as React from 'react';
 import React__default, { forwardRef, useContext, useRef, useState, useEffect, useReducer, useImperativeHandle, useCallback, useMemo, Fragment } from 'react';
 import cx from 'classnames';
@@ -63,7 +63,7 @@ var ForwardRef$P = /*#__PURE__*/forwardRef(SvgNotificationDoneOutline);
 
 var _path$O;
 function _extends$O() { return _extends$O = 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$O.apply(null, arguments); }
-var SvgContentMinusOutline = function SvgContentMinusOutline(props, ref) {
+var SvgActionSearchOutline = function SvgActionSearchOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$O({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -71,14 +71,16 @@ var SvgContentMinusOutline = function SvgContentMinusOutline(props, ref) {
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$O || (_path$O = /*#__PURE__*/React.createElement("path", {
-    d: "M19 10.5H5v3h14v-3z"
+    fillRule: "evenodd",
+    d: "M17.32 15.906 21.414 20 20 21.414l-4.094-4.094a8 8 0 1 1 1.414-1.414zM11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12z",
+    clipRule: "evenodd"
   })));
 };
-var ForwardRef$O = /*#__PURE__*/forwardRef(SvgContentMinusOutline);
+var ForwardRef$O = /*#__PURE__*/forwardRef(SvgActionSearchOutline);
 
 var _path$N;
 function _extends$N() { return _extends$N = 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$N.apply(null, arguments); }
-var SvgActionSearchOutline = function SvgActionSearchOutline(props, ref) {
+var SvgActionCalendarFill = function SvgActionCalendarFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$N({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -86,16 +88,14 @@ var SvgActionSearchOutline = function SvgActionSearchOutline(props, ref) {
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$N || (_path$N = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M17.32 15.906 21.414 20 20 21.414l-4.094-4.094a8 8 0 1 1 1.414-1.414zM11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12z",
-    clipRule: "evenodd"
+    d: "M5 22a1.93 1.93 0 0 1-1.413-.587A1.928 1.928 0 0 1 3 20V6c0-.55.196-1.02.587-1.412A1.927 1.927 0 0 1 5 4h1V2h2v2h8V2h2v2h1c.55 0 1.021.196 1.413.588.391.391.587.862.587 1.412v14a1.93 1.93 0 0 1-.587 1.413A1.928 1.928 0 0 1 19 22H5zm0-2h14V10H5v10z"
   })));
 };
-var ForwardRef$N = /*#__PURE__*/forwardRef(SvgActionSearchOutline);
+var ForwardRef$N = /*#__PURE__*/forwardRef(SvgActionCalendarFill);
 
 var _path$M;
 function _extends$M() { return _extends$M = 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$M.apply(null, arguments); }
-var SvgActionCalendarFill = function SvgActionCalendarFill(props, ref) {
+var SvgNotificationInfoOutline = function SvgNotificationInfoOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$M({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -103,14 +103,14 @@ var SvgActionCalendarFill = function SvgActionCalendarFill(props, ref) {
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$M || (_path$M = /*#__PURE__*/React.createElement("path", {
-    d: "M5 22a1.93 1.93 0 0 1-1.413-.587A1.928 1.928 0 0 1 3 20V6c0-.55.196-1.02.587-1.412A1.927 1.927 0 0 1 5 4h1V2h2v2h8V2h2v2h1c.55 0 1.021.196 1.413.588.391.391.587.862.587 1.412v14a1.93 1.93 0 0 1-.587 1.413A1.928 1.928 0 0 1 19 22H5zm0-2h14V10H5v10z"
+    d: "M11 17h2v-6h-2v6zm1-8a.968.968 0 0 0 .713-.288A.967.967 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.967.967 0 0 0-.712.287A.968.968 0 0 0 11 8c0 .283.096.52.288.712A.965.965 0 0 0 12 9zm0 13a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20z"
   })));
 };
-var ForwardRef$M = /*#__PURE__*/forwardRef(SvgActionCalendarFill);
+var ForwardRef$M = /*#__PURE__*/forwardRef(SvgNotificationInfoOutline);
 
 var _path$L;
 function _extends$L() { return _extends$L = 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$L.apply(null, arguments); }
-var SvgNotificationInfoOutline = function SvgNotificationInfoOutline(props, ref) {
+var SvgFileFileWordFill = function SvgFileFileWordFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$L({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -118,14 +118,16 @@ var SvgNotificationInfoOutline = function SvgNotificationInfoOutline(props, ref)
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$L || (_path$L = /*#__PURE__*/React.createElement("path", {
-    d: "M11 17h2v-6h-2v6zm1-8a.968.968 0 0 0 .713-.288A.967.967 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.967.967 0 0 0-.712.287A.968.968 0 0 0 11 8c0 .283.096.52.288.712A.965.965 0 0 0 12 9zm0 13a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20z"
+    fillRule: "evenodd",
+    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm1.2 18h-1.4L12 13.2 10.2 20H8.8l-2.2-9h1.5l1.4 6.8 1.8-6.8h1.3l1.8 6.8 1.4-6.8h1.5l-2.1 9zM13 9V3.5L18.5 9H13z",
+    clipRule: "evenodd"
   })));
 };
-var ForwardRef$L = /*#__PURE__*/forwardRef(SvgNotificationInfoOutline);
+var ForwardRef$L = /*#__PURE__*/forwardRef(SvgFileFileWordFill);
 
 var _path$K;
 function _extends$K() { return _extends$K = 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$K.apply(null, arguments); }
-var SvgNotificationInfoFill = function SvgNotificationInfoFill(props, ref) {
+var SvgFileFileExcelFill = function SvgFileFileExcelFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$K({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -133,154 +135,33 @@ var SvgNotificationInfoFill = function SvgNotificationInfoFill(props, ref) {
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$K || (_path$K = /*#__PURE__*/React.createElement("path", {
-    d: "M11 17h2v-6h-2v6zm1-8a.968.968 0 0 0 .713-.288A.967.967 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.967.967 0 0 0-.712.287A.968.968 0 0 0 11 8c0 .283.096.52.288.712A.965.965 0 0 0 12 9zm0 13a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22z"
+    fillRule: "evenodd",
+    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm1.8 18H14l-2-3.4-2 3.4H8.2l2.9-4.5L8.2 11H10l2 3.4 2-3.4h1.8l-2.9 4.5 2.9 4.5zM13 9V3.5L18.5 9H13z",
+    clipRule: "evenodd"
   })));
 };
-var ForwardRef$K = /*#__PURE__*/forwardRef(SvgNotificationInfoFill);
+var ForwardRef$K = /*#__PURE__*/forwardRef(SvgFileFileExcelFill);
 
-var _path$J, _path2$5, _path3, _path4, _path5, _path6, _g, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14, _path15, _path16, _path17, _path18, _path19, _path20, _path21, _path22, _path23, _path24, _defs;
+var _path$J;
 function _extends$J() { return _extends$J = 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$J.apply(null, arguments); }
-var SvgEmptyTable = function SvgEmptyTable(props, ref) {
+var SvgFileFilePdfFill = function SvgFileFilePdfFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$J({
-    width: 232,
-    height: 180,
-    viewBox: "0 0 232 180",
-    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
     ref: ref
-  }, props), /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#hihzs09apabs5bic_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"
-  })), _path2$5 || (_path2$5 = /*#__PURE__*/React.createElement("path", {
-    d: "m58.069 136.51-.654 4.238-1.27-5.38a58.934 58.934 0 0 0-11.462-4.965l-.083 5.636-2.545-6.393a55.094 55.094 0 0 0-13.655-1.854l.704 6.178-3.356-6.108c-4.151.183-8.256.946-12.195 2.268l2.33 3.525s-2.173-1.597-4.084-2.896a40.951 40.951 0 0 0-10.833 6.285 85.492 85.492 0 0 0 12.575 10.527c2.482-.637 5.127-1.279 5.127-1.279l-3.261 2.537a69.366 69.366 0 0 0 13.283 6.865c2.346-1.353 5.416-3.269 5.416-3.269l-3.554 3.931a42.226 42.226 0 0 0 15.45 2.359l4.259-4.213-1.697 4.001c7.002-.848 14.144-3.902 20.95-10.344-1.621-3.869-5.768-8.073-11.445-11.649Z",
-    fill: "#9BDEFF"
-  })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M.557 136.978a.413.413 0 0 1 .475-.342l68.549 11.118a.414.414 0 0 1-.133.817L.9 137.453a.415.415 0 0 1-.342-.475Z",
-    fill: "#fff"
-  })), _path4 || (_path4 = /*#__PURE__*/React.createElement("path", {
-    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"
-  })), _path5 || (_path5 = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    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: "hihzs00imdqhvkqlk_b",
-    style: {
-      maskType: "alpha"
-    },
-    maskUnits: "userSpaceOnUse",
-    x: 81,
-    y: 22,
-    width: 100,
-    height: 104
-  }, _path6 || (_path6 = /*#__PURE__*/React.createElement("path", {
-    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(#hihzs00imdqhvkqlk_b)",
+  }, props), _path$J || (_path$J = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
+    d: "M13 9h5.5L13 3.5V9zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm4.1 9.4c-.02.04-.29 1.76-2.1 4.69 0 0-3.5 1.82-2.67 3.18.67 1.08 2.32-.04 3.74-2.68 0 0 1.82-.64 4.24-.82 0 0 3.86 1.73 4.39-.11.52-1.86-3.06-1.44-3.7-1.25 0 0-2-1.35-2.5-3.21 0 0 1.14-3.95-.61-3.9-1.75.05-1.09 3.13-.79 4.1zm.81 1.04c.03.01.47 1.21 1.89 2.46 0 0-2.33.46-3.39.9 0 0 1-1.73 1.5-3.36zm3.93 2.72c.58-.16 2.33.15 2.26.48-.06.33-2.26-.48-2.26-.48zM7.77 17c-.53 1.24-1.44 2-1.67 2-.23 0 .7-1.6 1.67-2zm3.14-6.93c0-.07-.36-2.2 0-2.15.54.08 0 2.08 0 2.15z",
     clipRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M69.817 99.247a.414.414 0 0 1 .585-.003l50.88 50.483a.414.414 0 0 1-.583.588l-50.88-50.483a.414.414 0 0 1-.002-.585ZM72.802 28.407a.414.414 0 0 1 .553.192l63.6 131.172a.413.413 0 1 1-.745.361L72.61 28.96a.414.414 0 0 1 .192-.553Z",
-    fill: "#fff"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M142.576 6.515a.415.415 0 0 1 .087.58L60.185 118.817a.413.413 0 1 1-.665-.491L141.997 6.603a.414.414 0 0 1 .579-.088ZM197.977 60.314c.181.14.214.4.075.58l-76.734 99.311a.414.414 0 0 1-.655-.506l76.734-99.31a.413.413 0 0 1 .58-.075ZM192.316 43.44a.413.413 0 0 1-.103.576L60.089 135.878a.414.414 0 0 1-.473-.68L191.74 43.336a.414.414 0 0 1 .576.104Z",
-    fill: "#fff"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M91.966 11.532a.414.414 0 0 1 .585-.021l129.252 120a.414.414 0 0 1-.563.606l-129.252-120a.414.414 0 0 1-.022-.585ZM75.232 2.769a.414.414 0 0 1 .568.143l93.554 156.828a.414.414 0 1 1-.711.424L75.089 3.336a.414.414 0 0 1 .143-.567ZM125.643.329a.414.414 0 0 1 .584.041l71.81 82.759a.413.413 0 1 1-.625.542L125.602.913a.414.414 0 0 1 .041-.584Z",
-    fill: "#fff"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M67.271 75.369a.414.414 0 0 1 .547-.209l156.745 70.345a.413.413 0 1 1-.339.755L67.479 75.916a.414.414 0 0 1-.208-.547Z",
-    fill: "#fff"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M159.279 8.938a.414.414 0 0 1 .265.522L101.278 187.39a.413.413 0 1 1-.787-.258l58.266-177.93a.414.414 0 0 1 .522-.265Z",
-    fill: "#fff"
-  }), /*#__PURE__*/React.createElement("path", {
-    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"
-  }))), _path7 || (_path7 = /*#__PURE__*/React.createElement("path", {
-    d: "M180.287 30.828H81.39v-3.724a4.966 4.966 0 0 1 4.966-4.966H175.3a4.963 4.963 0 0 1 4.986 4.965v3.725Z",
-    fill: "#fff"
-  })), _path8 || (_path8 = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M177.05 22.893a4.548 4.548 0 0 0-1.748-.341H86.356a4.552 4.552 0 0 0-4.552 4.552v3.31h98.069v-3.31a4.55 4.55 0 0 0-2.823-4.211Zm-1.75-1.169a5.375 5.375 0 0 1 4.989 3.316c.272.654.412 1.355.412 2.064v3.724a.414.414 0 0 1-.414.413H81.39a.414.414 0 0 1-.413-.413v-3.724a5.38 5.38 0 0 1 5.379-5.38H175.3Z",
-    fill: "#1D1E26"
-  })), _path9 || (_path9 = /*#__PURE__*/React.createElement("path", {
-    d: "M87.324 28.217a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6ZM93.597 28.217a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6ZM99.866 28.217a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6Z",
-    fill: "#1D1E26"
-  })), _path10 || (_path10 = /*#__PURE__*/React.createElement("path", {
-    d: "M151.71 47.806H63.614a4.986 4.986 0 0 0-4.986 4.986v93.062a4.986 4.986 0 0 0 4.986 4.986h88.096a4.986 4.986 0 0 0 4.987-4.986V52.792a4.987 4.987 0 0 0-4.987-4.986Z",
-    fill: "#fff"
-  })), _path11 || (_path11 = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M63.614 48.22a4.572 4.572 0 0 0-4.572 4.572v93.062a4.572 4.572 0 0 0 4.572 4.572h88.096a4.572 4.572 0 0 0 4.573-4.572V52.792a4.572 4.572 0 0 0-4.573-4.573H63.614Zm-5.4 4.572a5.4 5.4 0 0 1 5.4-5.4h88.096a5.4 5.4 0 0 1 5.4 5.4v93.062a5.4 5.4 0 0 1-5.4 5.4H63.614a5.4 5.4 0 0 1-5.4-5.4V52.792Z",
-    fill: "#1D1E26"
-  })), _path12 || (_path12 = /*#__PURE__*/React.createElement("path", {
-    d: "M157.11 56.081H58.214v-3.724a4.986 4.986 0 0 1 4.986-4.965h88.924a4.988 4.988 0 0 1 4.986 4.965v3.724Z",
-    fill: "#008ACE"
-  })), _path13 || (_path13 = /*#__PURE__*/React.createElement("path", {
-    d: "M64.566 53.474a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6ZM70.835 53.474a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6ZM77.103 53.474a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6Z",
-    fill: "#1D1E26"
-  })), _path14 || (_path14 = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M48.968 36.067a.414.414 0 0 1 .585.018l7.005 7.448a.414.414 0 1 1-.603.567l-7.005-7.448a.414.414 0 0 1 .018-.585ZM46.99 44.047a.414.414 0 0 1 .554-.188l6.269 3.104a.414.414 0 0 1-.367.742l-6.27-3.104a.414.414 0 0 1-.187-.554ZM183.97 9.366a.414.414 0 0 1 .213.545l-2.896 6.62a.414.414 0 0 1-.759-.331l2.897-6.621a.414.414 0 0 1 .545-.213ZM192.373 9.866a.415.415 0 0 1 0 .585l-8.276 8.276a.414.414 0 1 1-.585-.585l8.275-8.276a.415.415 0 0 1 .586 0ZM192.464 19.108a.413.413 0 0 1-.23.538l-6.207 2.483a.414.414 0 0 1-.308-.768l6.207-2.483a.414.414 0 0 1 .538.23ZM182.977 54.848c.228 0 .413.185.413.414v58.345a.414.414 0 1 1-.827 0V55.262c0-.229.185-.414.414-.414Z",
-    fill: "#1D1E26"
-  })), _path15 || (_path15 = /*#__PURE__*/React.createElement("path", {
-    d: "M133.371 157.945c23.196 0 42-18.804 42-42s-18.804-42-42-42-42 18.804-42 42 18.804 42 42 42Z",
-    fill: "#008ACE"
-  })), _path16 || (_path16 = /*#__PURE__*/React.createElement("path", {
-    d: "M133.371 149.669c18.625 0 33.724-15.099 33.724-33.724 0-18.625-15.099-33.724-33.724-33.724-18.625 0-33.724 15.099-33.724 33.724 0 18.625 15.099 33.724 33.724 33.724Z",
-    fill: "#fff"
-  })), _path17 || (_path17 = /*#__PURE__*/React.createElement("path", {
-    d: "M117.312 113.565a3.807 3.807 0 1 0 0-7.614 3.807 3.807 0 0 0 0 7.614ZM149.435 113.565a3.806 3.806 0 1 0 0-7.612 3.806 3.806 0 0 0 0 7.612Z",
-    fill: "#1D1E26"
-  })), _path18 || (_path18 = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M133.38 123.952c-4.592 0-8.525 2.259-10.468 5.423a.827.827 0 1 1-1.41-.866c2.27-3.697 6.762-6.212 11.878-6.212 5.108 0 9.646 2.485 11.882 6.22a.827.827 0 1 1-1.42.85c-1.902-3.176-5.863-5.415-10.462-5.415Z",
-    fill: "#1D1E26"
-  })), _path19 || (_path19 = /*#__PURE__*/React.createElement("path", {
-    d: "m170.965 137.356-7.822 9.777 1.668 1.334 7.822-9.777-1.668-1.334Z",
-    fill: "#1D1E26"
-  })), _path20 || (_path20 = /*#__PURE__*/React.createElement("path", {
-    d: "M200.774 163.345c.579 2.143-3.331 6.852-5.553 6.939-7.035.277-28.73-23.913-28.73-23.913l4.44-5.553s28.122 16.142 29.843 22.527Z",
-    fill: "#9BDEFF"
-  })), _path21 || (_path21 = /*#__PURE__*/React.createElement("path", {
-    d: "M204.424 178.378a6.223 6.223 0 0 0 6.223-6.224 6.224 6.224 0 1 0-6.223 6.224Z",
-    fill: "#9BDEFF"
-  })), _path22 || (_path22 = /*#__PURE__*/React.createElement("path", {
-    d: "M199.586 168.269a6.173 6.173 0 0 1 3.311-2.131l-2.123-1.697c-.464 2.069-2.959 4.995-4.837 5.69l2.296 1.837a6.173 6.173 0 0 1 1.353-3.699Z",
-    fill: "#1D1E26"
-  })), _path23 || (_path23 = /*#__PURE__*/React.createElement("path", {
-    d: "m72.357 138.314-3.5 2.955 2.722-5.317a67.379 67.379 0 0 0-5.958-12.509l-4.014 4.514 2.38-7.076a63.412 63.412 0 0 0-9.932-11.611l-3.724 5.549 1.54-7.448a50.152 50.152 0 0 0-11.628-7.179l-.567 4.605s-.675-2.896-1.333-5.38a44.62 44.62 0 0 0-13.315-2.896 96.722 96.722 0 0 0 2.983 17.856c2.483 1.311 5.119 2.751 5.119 2.751l-4.461-.347a79.474 79.474 0 0 0 6.091 15.385c2.897.637 6.745 1.353 6.745 1.353l-5.677.55c2.871 4.965 6.492 9.6 11.069 13.349l6.45-.269-4.191 1.99c6.356 4.49 14.37 7.3 24.48 7.105 1.398-4.332.902-10.816-1.279-17.93Z",
-    fill: "#008ACE"
-  })), _path24 || (_path24 = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    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: "hihzs09apabs5bic_a"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#fff",
-    transform: "translate(.552)",
-    d: "M0 0h230.897v180H0z"
-  })))));
+  })));
 };
-var ForwardRef$J = /*#__PURE__*/forwardRef(SvgEmptyTable);
+var ForwardRef$J = /*#__PURE__*/forwardRef(SvgFileFilePdfFill);
 
 var _path$I;
 function _extends$I() { return _extends$I = 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$I.apply(null, arguments); }
-var SvgTableSortAscOutline = function SvgTableSortAscOutline(props, ref) {
+var SvgFileFileImageFill = function SvgFileFileImageFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$I({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -288,14 +169,16 @@ var SvgTableSortAscOutline = function SvgTableSortAscOutline(props, ref) {
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$I || (_path$I = /*#__PURE__*/React.createElement("path", {
-    d: "M11 21V6.825L9.4 8.4 8 7l4-4 4 4-1.4 1.4L13 6.825V21h-2z"
+    fillRule: "evenodd",
+    d: "M13 9h5.5L13 3.5V9zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2zm0 18h12v-8l-4 4-2-2-6 6zM8 9a2 2 0 1 0 0 4 2 2 0 0 0 0-4z",
+    clipRule: "evenodd"
   })));
 };
-var ForwardRef$I = /*#__PURE__*/forwardRef(SvgTableSortAscOutline);
+var ForwardRef$I = /*#__PURE__*/forwardRef(SvgFileFileImageFill);
 
-var _path$H;
+var _path$H, _path2$5;
 function _extends$H() { return _extends$H = 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$H.apply(null, arguments); }
-var SvgTableSortDescOutline = function SvgTableSortDescOutline(props, ref) {
+var SvgFileFileVideoFill = function SvgFileFileVideoFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$H({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -303,14 +186,18 @@ var SvgTableSortDescOutline = function SvgTableSortDescOutline(props, ref) {
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$H || (_path$H = /*#__PURE__*/React.createElement("path", {
-    d: "M13 3v14.175l1.6-1.575L16 17l-4 4-4-4 1.4-1.4 1.6 1.575V3h2z"
+    d: "M14.992 14 9.5 17.138v-6.276L14.992 14z"
+  })), _path2$5 || (_path2$5 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M4 4c0-1.11.89-2 2-2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4zm9-.5V9h5.5L13 3.5zM8.5 9.138v9.724L17.008 14 8.5 9.138z",
+    clipRule: "evenodd"
   })));
 };
-var ForwardRef$H = /*#__PURE__*/forwardRef(SvgTableSortDescOutline);
+var ForwardRef$H = /*#__PURE__*/forwardRef(SvgFileFileVideoFill);
 
 var _path$G;
 function _extends$G() { return _extends$G = 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$G.apply(null, arguments); }
-var SvgActionDragIndicatorOutline = function SvgActionDragIndicatorOutline(props, ref) {
+var SvgFileFileTableFill = function SvgFileFileTableFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$G({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -318,14 +205,16 @@ var SvgActionDragIndicatorOutline = function SvgActionDragIndicatorOutline(props
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$G || (_path$G = /*#__PURE__*/React.createElement("path", {
-    d: "M9 20c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 7 18c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 9 16c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413s-.196 1.021-.587 1.413A1.928 1.928 0 0 1 9 20zm6 0c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 13 18c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 15 16c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413s-.196 1.021-.587 1.413A1.928 1.928 0 0 1 15 20zm-6-6c-.55 0-1.02-.196-1.412-.588A1.923 1.923 0 0 1 7 12c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 9 10c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413s-.196 1.02-.587 1.412A1.927 1.927 0 0 1 9 14zm6 0c-.55 0-1.02-.196-1.412-.588A1.923 1.923 0 0 1 13 12c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 15 10c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413s-.196 1.02-.587 1.412A1.927 1.927 0 0 1 15 14zM9 8c-.55 0-1.02-.196-1.412-.588A1.923 1.923 0 0 1 7 6c0-.55.196-1.02.588-1.412A1.923 1.923 0 0 1 9 4c.55 0 1.021.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.927 1.927 0 0 1 9 8zm6 0c-.55 0-1.02-.196-1.412-.588A1.923 1.923 0 0 1 13 6c0-.55.196-1.02.588-1.412A1.923 1.923 0 0 1 15 4c.55 0 1.021.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.927 1.927 0 0 1 15 8z"
+    fillRule: "evenodd",
+    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-4 17H7v-2h3v2zm0-3H7v-2h3v2zm0-3H7v-2h3v2zm4 6h-3v-2h3v2zm0-3h-3v-2h3v2zm0-3h-3v-2h3v2zm-1-4V3.5L18.5 9H13z",
+    clipRule: "evenodd"
   })));
 };
-var ForwardRef$G = /*#__PURE__*/forwardRef(SvgActionDragIndicatorOutline);
+var ForwardRef$G = /*#__PURE__*/forwardRef(SvgFileFileTableFill);
 
 var _path$F;
 function _extends$F() { return _extends$F = 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$F.apply(null, arguments); }
-var SvgNavigationMoreVertOutline = function SvgNavigationMoreVertOutline(props, ref) {
+var SvgFileFileTextFill = function SvgFileFileTextFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$F({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -334,15 +223,15 @@ var SvgNavigationMoreVertOutline = function SvgNavigationMoreVertOutline(props,
     ref: ref
   }, props), _path$F || (_path$F = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z",
+    d: "M13 9h5.5L13 3.5V9zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2zm9 16v-2H6v2h9zm3-4v-2H6v2h12z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$F = /*#__PURE__*/forwardRef(SvgNavigationMoreVertOutline);
+var ForwardRef$F = /*#__PURE__*/forwardRef(SvgFileFileTextFill);
 
 var _path$E;
 function _extends$E() { return _extends$E = 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$E.apply(null, arguments); }
-var SvgNavigationRefreshOutline = function SvgNavigationRefreshOutline(props, ref) {
+var SvgFileFileEmlFill = function SvgFileFileEmlFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$E({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -350,582 +239,205 @@ var SvgNavigationRefreshOutline = function SvgNavigationRefreshOutline(props, re
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$E || (_path$E = /*#__PURE__*/React.createElement("path", {
-    d: "M12 20c-2.233 0-4.125-.775-5.675-2.325C4.775 16.125 4 14.233 4 12c0-2.233.775-4.125 2.325-5.675C7.875 4.775 9.767 4 12 4c1.15 0 2.25.238 3.3.713A7.617 7.617 0 0 1 18 6.75V4h2v7h-7V9h4.2a5.837 5.837 0 0 0-2.187-2.2A5.93 5.93 0 0 0 12 6c-1.667 0-3.083.583-4.25 1.75C6.583 8.917 6 10.333 6 12c0 1.667.583 3.083 1.75 4.25C8.917 17.417 10.333 18 12 18a5.863 5.863 0 0 0 3.475-1.1A5.81 5.81 0 0 0 17.65 14h2.1c-.467 1.767-1.417 3.208-2.85 4.325S13.833 20 12 20z"
-  })));
-};
-var ForwardRef$E = /*#__PURE__*/forwardRef(SvgNavigationRefreshOutline);
-
-var _path$D;
-function _extends$D() { return _extends$D = 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$D.apply(null, arguments); }
-var SvgActionLockFill = function SvgActionLockFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$D({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$D || (_path$D = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M12 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM7 9V7a5 5 0 0 1 10 0v2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V11a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 1 0-6 0v2z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$D = /*#__PURE__*/forwardRef(SvgActionLockFill);
-
-var _path$C, _path2$4;
-function _extends$C() { return _extends$C = 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$C.apply(null, arguments); }
-var SvgTableGroupColumnLeftFill = function SvgTableGroupColumnLeftFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$C({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$C || (_path$C = /*#__PURE__*/React.createElement("path", {
-    d: "M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6V3H5z"
-  })), _path2$4 || (_path2$4 = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M13 21V3h6a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-6zm2-16h4v14h-4V5z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$C = /*#__PURE__*/forwardRef(SvgTableGroupColumnLeftFill);
-
-var _path$B, _path2$3;
-function _extends$B() { return _extends$B = 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$B.apply(null, arguments); }
-var SvgTableGroupColumnRightFill = function SvgTableGroupColumnRightFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$B({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$B || (_path$B = /*#__PURE__*/React.createElement("path", {
-    d: "M13 3h6a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-6V3z"
-  })), _path2$3 || (_path2$3 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
-    d: "M9 5H5v14h4V5zM5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6V3H5z",
+    d: "M4 4c0-1.11.89-2 2-2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4zm9-.5V9h5.5L13 3.5zM7 18v-4.732l5 3.333 5-3.333V18a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1zm5-2.6 4.688-3.126A.997.997 0 0 0 16 12H8a.997.997 0 0 0-.688.274L12 15.399z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$B = /*#__PURE__*/forwardRef(SvgTableGroupColumnRightFill);
-
-var _path$A;
-function _extends$A() { return _extends$A = 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$A.apply(null, arguments); }
-var SvgTableSwapOutline = function SvgTableSwapOutline(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$A({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$A || (_path$A = /*#__PURE__*/React.createElement("path", {
-    d: "M7 6.825V20h2V6.825L10.6 8.4 12 7 8 3 4 7l1.4 1.4L7 6.825zm10 10.35V4h-2v13.175L13.4 15.6 12 17l4 4 4-4-1.4-1.4-1.6 1.575z"
-  })));
-};
-var ForwardRef$A = /*#__PURE__*/forwardRef(SvgTableSwapOutline);
+var ForwardRef$E = /*#__PURE__*/forwardRef(SvgFileFileEmlFill);
 
-var _path$z;
-function _extends$z() { return _extends$z = 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$z.apply(null, arguments); }
-var SvgContentFiltrationFill = function SvgContentFiltrationFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$z({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$z || (_path$z = /*#__PURE__*/React.createElement("path", {
-    d: "M14 13v8l-4-2v-6L2.95 4h18.1L14 13z"
-  })));
-};
-var ForwardRef$z = /*#__PURE__*/forwardRef(SvgContentFiltrationFill);
-
-var _path$y;
-function _extends$y() { return _extends$y = 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$y.apply(null, arguments); }
-var SvgNavigationChevronUpOutline = function SvgNavigationChevronUpOutline(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$y({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$y || (_path$y = /*#__PURE__*/React.createElement("path", {
-    d: "M18.586 15.914 20 14.5l-8-8-8 8 1.414 1.414L12 9.328l6.586 6.586z"
-  })));
-};
-var ForwardRef$y = /*#__PURE__*/forwardRef(SvgNavigationChevronUpOutline);
-
-var _path$x;
-function _extends$x() { return _extends$x = 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$x.apply(null, arguments); }
-var SvgNavigationCollapseAllOutline = function SvgNavigationCollapseAllOutline(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$x({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$x || (_path$x = /*#__PURE__*/React.createElement("path", {
-    d: "M16.5 4.414 15.086 3 12 6.086 8.914 3 7.5 4.414l4.5 4.5 4.5-4.5zM9 13v-2h6v2H9zm6.086 8 1.414-1.414-4.5-4.5-4.5 4.5L8.914 21 12 17.914 15.086 21z"
-  })));
-};
-var ForwardRef$x = /*#__PURE__*/forwardRef(SvgNavigationCollapseAllOutline);
-
-var _path$w;
-function _extends$w() { return _extends$w = 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$w.apply(null, arguments); }
-var SvgNavigationExpandAllOutline = function SvgNavigationExpandAllOutline(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$w({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$w || (_path$w = /*#__PURE__*/React.createElement("path", {
-    d: "m16.5 7.5-1.414 1.414L12 5.828 8.914 8.914 7.5 7.5 12 3l4.5 4.5zM9 13v-2h6v2H9zm6.086 2.086L16.5 16.5 12 21l-4.5-4.5 1.414-1.414L12 18.17l3.086-3.085z"
-  })));
-};
-var ForwardRef$w = /*#__PURE__*/forwardRef(SvgNavigationExpandAllOutline);
-
-var _path$v;
-function _extends$v() { return _extends$v = 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$v.apply(null, arguments); }
-var SvgActionSettingsFill = function SvgActionSettingsFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$v({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
-    d: "m9.25 22-.4-3.2a3.771 3.771 0 0 1-.612-.3 8.194 8.194 0 0 1-.563-.375L4.7 19.375l-2.75-4.75 2.575-1.95a2.39 2.39 0 0 1-.025-.338v-.675c0-.108.009-.22.025-.337L1.95 9.375l2.75-4.75 2.975 1.25c.184-.133.375-.258.575-.375.2-.117.4-.217.6-.3l.4-3.2h5.5l.4 3.2c.217.083.421.183.613.3.191.117.379.242.562.375l2.975-1.25 2.75 4.75-2.575 1.95c.017.117.025.229.025.337v.675c0 .109-.017.221-.05.338l2.575 1.95-2.75 4.75-2.95-1.25a6.826 6.826 0 0 1-.575.375c-.2.117-.4.217-.6.3l-.4 3.2h-5.5zm2.8-6.5c.967 0 1.792-.342 2.475-1.025A3.372 3.372 0 0 0 15.55 12c0-.967-.341-1.792-1.025-2.475A3.372 3.372 0 0 0 12.05 8.5c-.983 0-1.813.342-2.488 1.025A3.394 3.394 0 0 0 8.55 12c0 .967.338 1.792 1.012 2.475.676.683 1.505 1.025 2.488 1.025z"
-  })));
-};
-var ForwardRef$v = /*#__PURE__*/forwardRef(SvgActionSettingsFill);
-
-var _path$u;
-function _extends$u() { return _extends$u = 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$u.apply(null, arguments); }
-var SvgNavigationChevronLeftOutline = function SvgNavigationChevronLeftOutline(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$u({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
-    d: "M15.914 5.414 14.5 4l-8 8 8 8 1.414-1.414L9.328 12l6.586-6.586z"
-  })));
-};
-var ForwardRef$u = /*#__PURE__*/forwardRef(SvgNavigationChevronLeftOutline);
-
-var _path$t;
-function _extends$t() { return _extends$t = 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$t.apply(null, arguments); }
-var SvgNavigationChevronRightOutline = function SvgNavigationChevronRightOutline(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$t({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$t || (_path$t = /*#__PURE__*/React.createElement("path", {
-    d: "M8.086 18.586 9.5 20l8-8-8-8-1.414 1.414L14.672 12l-6.586 6.586z"
-  })));
-};
-var ForwardRef$t = /*#__PURE__*/forwardRef(SvgNavigationChevronRightOutline);
-
-var _path$s;
-function _extends$s() { return _extends$s = 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$s.apply(null, arguments); }
-var SvgActionAddOutline = function SvgActionAddOutline(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$s({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
-    d: "M13.286 3h-2.572v7.714H3v2.572h7.714V21h2.572v-7.714H21v-2.572h-7.714V3z"
-  })));
-};
-var ForwardRef$s = /*#__PURE__*/forwardRef(SvgActionAddOutline);
-
-var _path$r;
-function _extends$r() { return _extends$r = 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$r.apply(null, arguments); }
-var SvgNotificationDoneFill = function SvgNotificationDoneFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$r({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
-    d: "m2 12 3.077-3.2 4.615 4.8L18.923 4 22 7.2 9.692 20 2 12z"
-  })));
-};
-var ForwardRef$r = /*#__PURE__*/forwardRef(SvgNotificationDoneFill);
-
-var _path$q;
-function _extends$q() { return _extends$q = 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$q.apply(null, arguments); }
-var SvgRadioDotFill = function SvgRadioDotFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$q({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$q || (_path$q = /*#__PURE__*/React.createElement("path", {
-    d: "M12 19a7 7 0 1 0 0-14 7 7 0 0 0 0 14z"
-  })));
-};
-var ForwardRef$q = /*#__PURE__*/forwardRef(SvgRadioDotFill);
-
-var _path$p;
-function _extends$p() { return _extends$p = 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$p.apply(null, arguments); }
-var SvgNotificationHelpFill = function SvgNotificationHelpFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$p({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$p || (_path$p = /*#__PURE__*/React.createElement("path", {
-    d: "M11.95 18c.35 0 .646-.121.888-.363.241-.241.362-.537.362-.887s-.12-.646-.362-.887a1.208 1.208 0 0 0-.888-.363c-.35 0-.646.121-.888.363a1.206 1.206 0 0 0-.362.887c0 .35.12.646.362.887.242.242.538.363.888.363zm-.9-3.85h1.85c0-.55.063-.983.188-1.3.125-.317.479-.75 1.062-1.3a7.483 7.483 0 0 0 1.025-1.238c.25-.391.375-.862.375-1.412 0-.933-.342-1.65-1.025-2.15-.683-.5-1.492-.75-2.425-.75-.95 0-1.72.25-2.312.75-.592.5-1.005 1.1-1.238 1.8l1.65.65c.083-.3.271-.625.563-.975.291-.35.737-.525 1.337-.525.533 0 .933.146 1.2.437.267.292.4.613.4.963 0 .333-.1.646-.3.937-.2.292-.45.563-.75.813-.733.65-1.183 1.142-1.35 1.475-.167.333-.25.942-.25 1.825zM12 22a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22z"
-  })));
-};
-var ForwardRef$p = /*#__PURE__*/forwardRef(SvgNotificationHelpFill);
-
-var _path$o;
-function _extends$o() { return _extends$o = 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$o.apply(null, arguments); }
-var SvgNotificationCheckFill = function SvgNotificationCheckFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$o({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$o || (_path$o = /*#__PURE__*/React.createElement("path", {
-    d: "m10.6 16.6 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4 4.25 4.25zM12 22a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22z"
-  })));
-};
-var ForwardRef$o = /*#__PURE__*/forwardRef(SvgNotificationCheckFill);
-
-var _path$n;
-function _extends$n() { return _extends$n = 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$n.apply(null, arguments); }
-var SvgNotificationWarningFill = function SvgNotificationWarningFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$n({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
-    d: "M1 21 12 2l11 19H1zm11-3a.968.968 0 0 0 .713-.288A.967.967 0 0 0 13 17a.967.967 0 0 0-.287-.712A.968.968 0 0 0 12 16a.965.965 0 0 0-.712.288A.965.965 0 0 0 11 17c0 .283.096.52.288.712A.965.965 0 0 0 12 18zm-1-3h2v-5h-2v5z"
-  })));
-};
-var ForwardRef$n = /*#__PURE__*/forwardRef(SvgNotificationWarningFill);
-
-var _path$m;
-function _extends$m() { return _extends$m = 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$m.apply(null, arguments); }
-var SvgNotificationErrorFill = function SvgNotificationErrorFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$m({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$m || (_path$m = /*#__PURE__*/React.createElement("path", {
-    d: "M12 17a.968.968 0 0 0 .713-.288A.967.967 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.967.967 0 0 0-.712.287A.968.968 0 0 0 11 16c0 .283.096.52.288.712A.965.965 0 0 0 12 17zm-1-4h2V7h-2v6zm1 9a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22z"
-  })));
-};
-var ForwardRef$m = /*#__PURE__*/forwardRef(SvgNotificationErrorFill);
-
-var _path$l;
-function _extends$l() { return _extends$l = 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$l.apply(null, arguments); }
-var SvgFileFileWordFill = function SvgFileFileWordFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$l({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm1.2 18h-1.4L12 13.2 10.2 20H8.8l-2.2-9h1.5l1.4 6.8 1.8-6.8h1.3l1.8 6.8 1.4-6.8h1.5l-2.1 9zM13 9V3.5L18.5 9H13z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$l = /*#__PURE__*/forwardRef(SvgFileFileWordFill);
-
-var _path$k;
-function _extends$k() { return _extends$k = 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$k.apply(null, arguments); }
-var SvgFileFileExcelFill = function SvgFileFileExcelFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$k({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$k || (_path$k = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm1.8 18H14l-2-3.4-2 3.4H8.2l2.9-4.5L8.2 11H10l2 3.4 2-3.4h1.8l-2.9 4.5 2.9 4.5zM13 9V3.5L18.5 9H13z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$k = /*#__PURE__*/forwardRef(SvgFileFileExcelFill);
-
-var _path$j;
-function _extends$j() { return _extends$j = 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$j.apply(null, arguments); }
-var SvgFileFilePdfFill = function SvgFileFilePdfFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$j({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M13 9h5.5L13 3.5V9zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm4.1 9.4c-.02.04-.29 1.76-2.1 4.69 0 0-3.5 1.82-2.67 3.18.67 1.08 2.32-.04 3.74-2.68 0 0 1.82-.64 4.24-.82 0 0 3.86 1.73 4.39-.11.52-1.86-3.06-1.44-3.7-1.25 0 0-2-1.35-2.5-3.21 0 0 1.14-3.95-.61-3.9-1.75.05-1.09 3.13-.79 4.1zm.81 1.04c.03.01.47 1.21 1.89 2.46 0 0-2.33.46-3.39.9 0 0 1-1.73 1.5-3.36zm3.93 2.72c.58-.16 2.33.15 2.26.48-.06.33-2.26-.48-2.26-.48zM7.77 17c-.53 1.24-1.44 2-1.67 2-.23 0 .7-1.6 1.67-2zm3.14-6.93c0-.07-.36-2.2 0-2.15.54.08 0 2.08 0 2.15z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$j = /*#__PURE__*/forwardRef(SvgFileFilePdfFill);
-
-var _path$i;
-function _extends$i() { return _extends$i = 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$i.apply(null, arguments); }
-var SvgFileFileImageFill = function SvgFileFileImageFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$i({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M13 9h5.5L13 3.5V9zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2zm0 18h12v-8l-4 4-2-2-6 6zM8 9a2 2 0 1 0 0 4 2 2 0 0 0 0-4z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$i = /*#__PURE__*/forwardRef(SvgFileFileImageFill);
-
-var _path$h, _path2$2;
-function _extends$h() { return _extends$h = 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$h.apply(null, arguments); }
-var SvgFileFileVideoFill = function SvgFileFileVideoFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$h({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
-    d: "M14.992 14 9.5 17.138v-6.276L14.992 14z"
-  })), _path2$2 || (_path2$2 = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M4 4c0-1.11.89-2 2-2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4zm9-.5V9h5.5L13 3.5zM8.5 9.138v9.724L17.008 14 8.5 9.138z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$h = /*#__PURE__*/forwardRef(SvgFileFileVideoFill);
-
-var _path$g;
-function _extends$g() { return _extends$g = 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$g.apply(null, arguments); }
-var SvgFileFileTableFill = function SvgFileFileTableFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$g({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-4 17H7v-2h3v2zm0-3H7v-2h3v2zm0-3H7v-2h3v2zm4 6h-3v-2h3v2zm0-3h-3v-2h3v2zm0-3h-3v-2h3v2zm-1-4V3.5L18.5 9H13z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$g = /*#__PURE__*/forwardRef(SvgFileFileTableFill);
-
-var _path$f;
-function _extends$f() { return _extends$f = 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$f.apply(null, arguments); }
-var SvgFileFileTextFill = function SvgFileFileTextFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$f({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M13 9h5.5L13 3.5V9zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2zm9 16v-2H6v2h9zm3-4v-2H6v2h12z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$f = /*#__PURE__*/forwardRef(SvgFileFileTextFill);
-
-var _path$e;
-function _extends$e() { return _extends$e = 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$e.apply(null, arguments); }
-var SvgFileFileEmlFill = function SvgFileFileEmlFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$e({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M4 4c0-1.11.89-2 2-2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4zm9-.5V9h5.5L13 3.5zM7 18v-4.732l5 3.333 5-3.333V18a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1zm5-2.6 4.688-3.126A.997.997 0 0 0 16 12H8a.997.997 0 0 0-.688.274L12 15.399z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$e = /*#__PURE__*/forwardRef(SvgFileFileEmlFill);
-
-var _path$d;
-function _extends$d() { return _extends$d = 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$d.apply(null, arguments); }
+var _path$D;
+function _extends$D() { return _extends$D = 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$D.apply(null, arguments); }
 var SvgFileFileFill = function SvgFileFileFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$d({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
-    d: "M6 22c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 4 20V4c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 6 2h8l6 6v12a1.93 1.93 0 0 1-.587 1.413A1.928 1.928 0 0 1 18 22H6zm7-13h5l-5-5v5z"
-  })));
-};
-var ForwardRef$d = /*#__PURE__*/forwardRef(SvgFileFileFill);
-
-var _path$c;
-function _extends$c() { return _extends$c = 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$c.apply(null, arguments); }
-var SvgStarFilled = function SvgStarFilled(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$c({
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    ref: ref
-  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M8.917 8.268 12.01 2l3.093 6.268 6.917 1.005-5.005 4.878 1.182 6.889-6.187-3.252-6.186 3.252 1.181-6.889L2 9.273z"
-  })));
-};
-var ForwardRef$c = /*#__PURE__*/forwardRef(SvgStarFilled);
-
-var _path$b, _path2$1;
-function _extends$b() { return _extends$b = 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$b.apply(null, arguments); }
-var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
-    width: 66,
-    height: 67,
-    viewBox: "0 0 66 67",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ref: ref
-  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
-    d: "M0 33.5C0 15.275 14.775.5 33 .5s33 14.775 33 33-14.775 33-33 33-33-14.775-33-33Z",
-    fill: "#EBEDF5"
-  })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "m42.31 40.335 7.165 7.165L47 49.975l-7.165-7.165a13.94 13.94 0 0 1-8.585 2.94c-7.732 0-14-6.268-14-14s6.268-14 14-14 14 6.268 14 14a13.94 13.94 0 0 1-2.94 8.585ZM31.25 42.25c5.799 0 10.5-4.701 10.5-10.5s-4.701-10.5-10.5-10.5-10.5 4.701-10.5 10.5 4.701 10.5 10.5 10.5Z",
-    fill: "#6C6F80"
-  })));
-};
-var ForwardRef$b = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
-
-const accordionSettings = {
-    icons: {
-        dropdownIcon: ForwardRef$Q,
-    },
-};
-const alertSettings = {
-    icons: {
-        closeIcon: ForwardRef$R,
-        infoIcon: ForwardRef$K,
-        successIcon: ForwardRef$o,
-        warningIcon: ForwardRef$n,
-        errorIcon: ForwardRef$m,
-    },
-    sizes: {
-        default: '48',
-        actionMap: {
-            36: '24',
-            48: '30',
-        },
-    },
-};
-const badgeSettings = {
-    icons: {
-        dropdownIcon: ForwardRef$Q,
-    },
-    sizes: {
-        default: '36',
-        countIndicatorMap: {
-            18: '12',
-            24: '18',
-            30: '18',
-            36: '18',
-            42: '24',
-            48: '24',
-        },
-    },
+  return /*#__PURE__*/React.createElement("svg", _extends$D({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$D || (_path$D = /*#__PURE__*/React.createElement("path", {
+    d: "M6 22c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 4 20V4c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 6 2h8l6 6v12a1.93 1.93 0 0 1-.587 1.413A1.928 1.928 0 0 1 18 22H6zm7-13h5l-5-5v5z"
+  })));
 };
-const buttonSettings = {
-    icons: {
-        clearIcon: ForwardRef$R,
-        dropdownIcon: ForwardRef$Q,
-    },
-    sizes: {
-        default: '36',
-    },
+var ForwardRef$D = /*#__PURE__*/forwardRef(SvgFileFileFill);
+
+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,
 };
-const checkboxSettings = {
-    icons: {
-        checkIcon: ForwardRef$P,
-        indeterminateIcon: ForwardRef$O,
-    },
-    sizes: {
-        default: '18',
-    },
+const systemIcons = {
+    clear: ForwardRef$R,
+    foldingArrow: ForwardRef$Q,
+    accept: ForwardRef$P,
+    search: ForwardRef$O,
+    calendar: ForwardRef$N,
+    info: ForwardRef$M,
 };
-const countIndicatorSettings = {
+
+const settings = {
     sizes: {
-        default: '24',
-    },
-};
-const dataTableSettings = {
-    icons: {
-        emptyTable: ForwardRef$J,
-        header: {
-            configIcon: ForwardRef$v,
-            ascSortIcon: ForwardRef$I,
-            descSortIcon: ForwardRef$H,
-            defaultSortIcon: ForwardRef$A,
-            filterIcon: ForwardRef$z,
-            dropdownIcon: ForwardRef$Q,
-            openedDropdownIcon: ForwardRef$y,
-            foldIcon: ForwardRef$x,
-            unfoldIcon: ForwardRef$w,
+        defaults: {
+            alert: '48',
+            badge: '36',
+            button: '36',
+            checkbox: '18',
+            countIndicator: '24',
+            flexRow: '36',
+            filtersPanel: '36',
+            linkButton: '36',
+            numericInput: '36',
+            radioInput: '18',
+            richTextView: '14',
+            switch: '18',
+            tabButton: '48',
+            tag: '36',
+            text: '36',
+            textArea: '36',
+            textInput: '36',
+            rangeDatePicker: '36',
+            datePicker: '36',
+            labeledInput: '36',
+            statusIndicator: '24',
+            paginator: '30',
+            rating: '18',
         },
-        body: {
-            foldingIcon: ForwardRef$Q,
+        alert: {
+            action: {
+                36: '24',
+                48: '30',
+            },
         },
-        columnsConfigurationModal: {
-            dragIndicator: ForwardRef$G,
-            lockIcon: ForwardRef$D,
-            pinLeftIcon: ForwardRef$C,
-            pinRightIcon: ForwardRef$B,
-            collapsedIcon: ForwardRef$t,
-            expandedIcon: ForwardRef$Q,
-            menuIcon: ForwardRef$F,
-            resetIcon: ForwardRef$E,
+        notificationCard: {
+            action: '30',
         },
-    },
-    sizes: {
-        header: {
-            row: '36',
-            iconMap: {
+        tag: {
+            countIndicator: {
+                18: '12',
+                24: '18',
+                30: '18',
                 36: '18',
-                48: '18',
-                60: '18',
+                42: '24',
+                48: '24',
             },
         },
-        body: {
-            row: '36',
-            checkboxMap: {
+        pickerInput: {
+            toggler: {
+                defaults: {
+                    size: '36',
+                    tag: '36',
+                },
+                tag: {
+                    24: '18',
+                    30: '18',
+                    36: '24',
+                    42: '30',
+                    48: '36',
+                    60: '42',
+                },
+            },
+            body: {
+                dropdown: {
+                    height: 300,
+                    width: 360,
+                    padding: '12',
+                    row: {
+                        default: '36',
+                        cell: {
+                            padding: '24',
+                            text: {
+                                24: '24',
+                                30: '30',
+                                36: '36',
+                                42: '42',
+                                48: '48',
+                                60: '48',
+                            },
+                            icon: {
+                                24: '12',
+                                30: '18',
+                                36: '18',
+                                42: '24',
+                                48: '24',
+                                60: '24',
+                            },
+                            isBoldSelectionIcon: {
+                                24: true,
+                            },
+                            item: {
+                                default: '36',
+                                verticalPadding: {
+                                    24: '3',
+                                    30: '6',
+                                    36: '9',
+                                    42: '6',
+                                    48: '9',
+                                },
+                                avatar: {
+                                    rest: {
+                                        24: '18',
+                                        30: '24',
+                                        36: '30',
+                                        42: '36',
+                                        48: '36', // no design
+                                    },
+                                    multiline: {
+                                        24: '30',
+                                        30: '30',
+                                        36: '36',
+                                        42: '42',
+                                        48: '48', // no design
+                                    },
+                                },
+                            },
+                        },
+                    },
+                    footer: {
+                        switch: {
+                            24: '12',
+                            30: '18',
+                            36: '18',
+                            42: '24',
+                            48: '24',
+                        },
+                        linkButton: {
+                            24: '24',
+                            30: '30',
+                            36: '36',
+                            42: '42',
+                            48: '48',
+                        },
+                    },
+                },
+                mobile: {
+                    header: {
+                        titleSize: '48',
+                    },
+                    footer: {
+                        linkButton: '48',
+                    },
+                    row: '48',
+                    searchInput: '48',
+                },
+                modal: {
+                    row: '36',
+                    padding: '24',
+                },
+            },
+        },
+        rowAddons: {
+            defaults: {
+                icon: '18',
+                indentUnit: 24,
+                indentWidth: 18,
+            },
+            checkbox: {
                 24: '12',
                 30: '18',
                 36: '18',
@@ -933,7 +445,7 @@ const dataTableSettings = {
                 48: '18',
                 60: '18',
             },
-            iconMap: {
+            icon: {
                 24: '12',
                 30: '18',
                 36: '18',
@@ -941,7 +453,7 @@ const dataTableSettings = {
                 48: '24',
                 60: '24',
             },
-            indentUnitMap: {
+            indentUnit: {
                 24: 6,
                 30: 12,
                 36: 12,
@@ -949,7 +461,7 @@ const dataTableSettings = {
                 48: 24,
                 60: 24,
             },
-            indentWidthMap: {
+            indentWidth: {
                 24: 12,
                 30: 18,
                 36: 18,
@@ -958,321 +470,132 @@ const dataTableSettings = {
                 60: 24,
             },
         },
-        columnsConfigurationModal: {
-            columnRow: '30',
-            countIndicator: '18',
-            menuButton: '30',
-            searchInput: '30',
-        },
-    },
-};
-const dropdownMenuSettings = {
-    icons: {
-        acceptIcon: ForwardRef$P,
-        dropdownIcon: ForwardRef$Q,
-    },
-};
-const datePickerSettings = {
-    icons: {
-        body: {
-            prevIcon: ForwardRef$u,
-            nextIcon: ForwardRef$t,
-        },
-        input: {
-            calendarIcon: ForwardRef$M,
+        text: {
+            18: { lineHeight: 12, fontSize: 10 },
+            24: { lineHeight: 18, fontSize: 12 },
+            30: { lineHeight: 18, fontSize: 14 },
+            36: { lineHeight: 18, fontSize: 14 },
+            42: { lineHeight: 24, fontSize: 16 },
+            48: { lineHeight: 24, fontSize: 16 },
+            60: { lineHeight: 30, fontSize: 24 },
         },
-    },
-    sizes: {
-        body: '36',
-        input: '36',
-    },
-};
-const fileCardSettings = {
-    icons: {
-        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 flexRowSettings = {
-    sizes: {
-        default: '36',
-    },
-};
-const filtersPanelSettings = {
-    icons: {
-        addFilterIcon: ForwardRef$s,
-        itemDropdownIcon: ForwardRef$Q,
-    },
-    sizes: {
-        default: '36',
-    },
-};
-const iconButtonSettings = {
-    icons: {
-        dropdownIcon: ForwardRef$Q,
-    },
-};
-const labeledInputSettings = {
-    icons: {
-        infoIcon: ForwardRef$L,
-        fillInfoIcon: ForwardRef$K,
-    },
-    sizes: {
-        default: '36',
-    },
-};
-const linkButtonSettings = {
-    icons: {
-        dropdownIcon: ForwardRef$Q,
-    },
-    sizes: {
-        default: '36',
-    },
-    weight: 'semibold',
-};
-const modalSettings = {
-    icons: {
-        closeIcon: ForwardRef$R,
-    },
-};
-const notificationCardSettings = {
-    icons: {
-        closeIcon: ForwardRef$R,
-        hintIcon: ForwardRef$p,
-        successIcon: ForwardRef$o,
-        warningIcon: ForwardRef$n,
-        errorIcon: ForwardRef$m,
-    },
-    sizes: {
-        action: '30',
-    },
-};
-const numericInputSettings = {
-    icons: {
-        arrowIcon: ForwardRef$Q,
-    },
-    sizes: {
-        default: '36',
-    },
-};
-const paginatorSettings = {
-    icons: {
-        leftArrowIcon: ForwardRef$u,
-        rightArrowIcon: ForwardRef$t,
-    },
-    sizes: {
-        default: '36',
-    },
-};
-const pickerInputSettings = {
-    icons: {
-        toggler: {
-            clearIcon: ForwardRef$R,
-            dropdownIcon: ForwardRef$Q,
+        filtersPanel: {
+            pickerInput: {
+                body: {
+                    default: '36',
+                },
+            },
         },
-        body: {
-            selectIcon: (size) => size < '30' ? ForwardRef$r : ForwardRef$P,
-            pickerBodyMobileHeaderCloseIcon: ForwardRef$R,
-            modalNotFoundSearchIcon: ForwardRef$b,
+        labeledInput: {
+            fillIcon: ['24', '30'],
         },
-    },
-    sizes: {
-        toggler: {
-            default: '36',
-            tag: '36',
-            tagMap: {
+        badge: {
+            countIndicator: {
+                18: '12',
                 24: '18',
                 30: '18',
-                36: '24',
-                42: '30',
-                48: '36',
+                36: '18',
+                42: '24',
+                48: '24',
             },
         },
-        body: {
-            maxHeight: 300,
-            minWidth: 360,
-            padding: '12',
-            row: '36',
-            itemAvatarMap: {
-                24: '18',
-                30: '24',
-                36: '30',
-                42: '36',
-                48: '36',
+        dataTable: {
+            header: {
+                row: {
+                    default: '36',
+                    cell: {
+                        defaults: {
+                            size: '36',
+                            resizeMarker: '12',
+                            padding: '12',
+                            paddingEdge: '24',
+                        },
+                        checkbox: {
+                            36: '18',
+                            48: '18',
+                            60: '18',
+                        },
+                        columnCaption: {
+                            fontSize: '14',
+                            fontWeight: '400',
+                            size: '18',
+                            uppercase: '12',
+                        },
+                        iconSize: {
+                            36: '18',
+                            48: '18',
+                            60: '18',
+                        },
+                        truncate: ['48'],
+                    },
+                    groupCell: {
+                        defaults: {
+                            size: '36',
+                            padding: '12',
+                            paddingEdge: '24',
+                        },
+                        columnCaption: {
+                            fontSize: '14',
+                            fontWeight: '400',
+                            size: '18',
+                            uppercase: '12',
+                        },
+                        iconSize: {
+                            36: '18',
+                            48: '18',
+                            60: '18',
+                        },
+                        truncate: ['48'],
+                    },
+                },
             },
-            itemAvatarMultilineMap: {
-                24: '30',
-                30: '30',
-                36: '36',
-                42: '42',
-                48: '48',
+            body: {
+                row: {
+                    default: '36',
+                    cell: {
+                        defaults: {
+                            size: '36',
+                            padding: '12',
+                            paddingEdge: '24',
+                        },
+                        text: {
+                            18: '18',
+                            24: '24',
+                            30: '30',
+                            36: '36',
+                            42: '42',
+                            48: '48',
+                            60: '48',
+                        },
+                    },
+                },
             },
-            itemVerticalPaddingMap: {
-                24: '3',
-                30: '6',
-                36: '9',
-                42: '6',
-                48: '9',
+            columnsConfigurationModal: {
+                columnRow: '30',
+                countIndicator: '18',
+                subgroupIcon: '18',
+                search: '30',
+                width: 560,
             },
-            selectIconMap: {
-                24: '12',
-                30: '18',
-                36: '18',
-                42: '24',
-                48: '24',
+        },
+        modal: {
+            window: {
+                defaults: {
+                    width: 420,
+                },
             },
-            footerSwitchMap: {
-                24: '12',
-                30: '18',
+        },
+        tabButton: {
+            countIndicator: {
                 36: '18',
-                42: '24',
-                48: '24',
+                48: '18',
+                60: '18',
             },
-            mobileFooterLinkButton: '48',
-            mobileRow: '48',
-            mobileSearchInput: '48',
-        },
-    },
-};
-const radioInputSettings = {
-    icons: {
-        dotIcon: ForwardRef$q,
-    },
-    sizes: {
-        default: '18',
-    },
-};
-const rangeDatePickerSettings = {
-    icons: {
-        input: {
-            calendarIcon: ForwardRef$M,
-        },
-    },
-    sizes: {
-        default: '36',
-        preset: '24',
-    },
-};
-const ratingSettings = {
-    icons: {
-        filledRatingIcon: ForwardRef$c,
-        emptyRatingIcon: ForwardRef$c,
-    },
-    sizes: {
-        default: 18,
-    },
-};
-const richTextViewSettings = {
-    sizes: {
-        default: '14',
-    },
-};
-const statusIndicatorSettings = {
-    sizes: {
-        default: '24',
-    },
-};
-const switchSettings = {
-    sizes: {
-        default: '18',
-    },
-};
-const tabButtonSettings = {
-    icons: {
-        clearIcon: ForwardRef$R,
-        dropdownIcon: ForwardRef$Q,
-    },
-    sizes: {
-        default: '48',
-        countIndicatorMap: {
-            36: '18',
-            48: '18',
-            60: '18',
-        },
-    },
-};
-const tagSettings = {
-    icons: {
-        clearIcon: ForwardRef$R,
-        dropdownIcon: ForwardRef$Q,
-    },
-    sizes: {
-        default: '36',
-        countIndicatorMap: {
-            18: '12',
-            24: '18',
-            30: '18',
-            36: '18',
-            42: '24',
-            48: '24',
         },
     },
 };
-const textSettings = {
-    sizes: {
-        default: '36',
-    },
-};
-const textAreaSettings = {
-    sizes: {
-        default: '36',
-    },
-};
-const textInputSettings = {
-    icons: {
-        acceptIcon: ForwardRef$P,
-        clearIcon: ForwardRef$R,
-        dropdownIcon: ForwardRef$Q,
-        searchIcon: ForwardRef$N,
-    },
-    sizes: {
-        default: '36',
-    },
-};
-const settings = {
-    accordion: accordionSettings,
-    alert: alertSettings,
-    badge: badgeSettings,
-    button: buttonSettings,
-    checkbox: checkboxSettings,
-    countIndicator: countIndicatorSettings,
-    dataTable: dataTableSettings,
-    datePicker: datePickerSettings,
-    dropdownMenu: dropdownMenuSettings,
-    flexRow: flexRowSettings,
-    fileCard: fileCardSettings,
-    filtersPanel: filtersPanelSettings,
-    iconButton: iconButtonSettings,
-    labeledInput: labeledInputSettings,
-    linkButton: linkButtonSettings,
-    modal: modalSettings,
-    notificationCard: notificationCardSettings,
-    numericInput: numericInputSettings,
-    paginator: paginatorSettings,
-    pickerInput: pickerInputSettings,
-    radioInput: radioInputSettings,
-    rangeDatePicker: rangeDatePickerSettings,
-    rating: ratingSettings,
-    richTextView: richTextViewSettings,
-    statusIndicator: statusIndicatorSettings,
-    switch: switchSettings,
-    tabButton: tabButtonSettings,
-    tag: tagSettings,
-    text: textSettings,
-    textArea: textAreaSettings,
-    textInput: textInputSettings,
-};
 
-var css$1y = {"root":"awP5pM"};
+var css$1y = {"root":"ONwMpi"};
 
 function applyButtonMods(mods) {
     return [
@@ -1280,17 +603,17 @@ function applyButtonMods(mods) {
         'uui-button',
         `uui-fill-${mods.fill || 'solid'}`,
         `uui-color-${mods.color || 'primary'}`,
-        `uui-size-${mods.size || settings.button.sizes.default}`,
+        `uui-size-${mods.size || settings.sizes.defaults.button}`,
     ];
 }
 const Button = /* @__PURE__ */withMods(uuiComponents.Button, applyButtonMods, () => {
     return {
-        dropdownIcon: settings.button.icons.dropdownIcon,
-        clearIcon: settings.button.icons.clearIcon,
+        dropdownIcon: systemIcons.foldingArrow,
+        clearIcon: systemIcons.clear,
     };
 });
 
-var css$1x = {"root":"JxSmqm"};
+var css$1x = {"root":"mE0AcZ"};
 
 function applyIconButtonMods(props) {
     return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1x.root];
@@ -1306,7 +629,7 @@ const IconButton = /* @__PURE__ */withMods(uuiComponents.IconButton, applyIconBu
         });
     }
     return {
-        dropdownIcon: props.dropdownIcon || settings.iconButton.icons.dropdownIcon,
+        dropdownIcon: props.dropdownIcon || systemIcons.foldingArrow,
     };
 });
 
@@ -1327,9 +650,10 @@ 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":"Lpiag7"};
+var css$1w = {"root":"ftBCxH"};
 
 const DEFAULT_COLOR = 'primary';
+const DEFAULT_WEIGHT = 'semibold';
 const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
     if (process.env.NODE_ENV !== "production" && props.color === 'contrast') {
         devLogger.warnAboutDeprecatedPropValue({
@@ -1343,13 +667,13 @@ const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
     const rootStyles = [
         'uui-link_button',
         css$1w.root,
-        `uui-size-${props.size || settings.linkButton.sizes.default}`,
+        `uui-size-${props.size || settings.sizes.defaults.linkButton}`,
         ...getIconClass(props),
         `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.weight}`);
-    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.linkButton.icons.dropdownIcon;
+    const captionStyles = cx(uuiElement.caption, props.underline && `uui-underline-${props.underline}`, `uui-link-button-weight-${props.weight || DEFAULT_WEIGHT}`);
+    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : systemIcons.foldingArrow;
     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 })),
         props.caption && (React.createElement("div", { className: captionStyles }, props.caption)),
@@ -1357,30 +681,30 @@ const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         props.isDropdown && (React.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1v = {"root":"s72WHZ"};
+var css$1v = {"root":"Udyiom"};
 
 const CountIndicator = /* @__PURE__ */forwardRef((props, ref) => {
     return (React__default.createElement("div", { ref: ref, className: cx([
             css$1v.root,
             'uui-count_indicator',
-            `uui-size-${props.size || settings.countIndicator.sizes.default}`,
+            `uui-size-${props.size || settings.sizes.defaults.countIndicator}`,
             props.color && `uui-color-${props.color}`,
             props.cx,
         ]) }, props.caption));
 });
 
-var css$1u = {"root":"EzKpTr","withNotify":"_99iQ3J"};
+var css$1u = {"root":"-O-GyB","withNotify":"M9NRoy"};
 
 const TabButton = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const styles = [
         css$1u.root,
         'uui-tab-button',
-        `uui-size-${props.size || settings.tabButton.sizes.default}`,
+        `uui-size-${props.size || settings.sizes.defaults.tabButton}`,
         ...getIconClass(props),
         props.cx,
     ];
-    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.tabButton.icons.dropdownIcon;
-    const ClearIcon = props.clearIcon ? props.clearIcon : settings.tabButton.icons.clearIcon;
+    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : systemIcons.foldingArrow;
+    const ClearIcon = props.clearIcon ? props.clearIcon : systemIcons.clear;
     return (React__default.createElement(Clickable, { ...props, rawProps: {
             role: 'tab',
             'aria-haspopup': props.isDropdown,
@@ -1392,54 +716,86 @@ const TabButton = /* @__PURE__ */React__default.forwardRef((props, ref) => {
             props.caption,
             props.withNotify && React__default.createElement("div", { className: css$1u.withNotify }))),
         props.icon && props.iconPosition === 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
-        props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { color: "neutral", size: settings.tabButton.sizes.countIndicatorMap[props.size || settings.tabButton.sizes.default], caption: props.count })),
+        props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { color: "neutral", size: settings.sizes.tabButton.countIndicator[props.size || settings.sizes.defaults.tabButton], caption: props.count })),
         props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen })),
         props.onClear && !props.isDisabled && (React__default.createElement(IconContainer, { cx: uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
 });
 
-var css$1t = {"root":"ssspX1"};
+var css$1t = {"root":"OHlQiv"};
 
 function applyVerticalTabButtonMods() {
     return [css$1t.root, 'uui-vertical-tab-button'];
 }
 const VerticalTabButton = /* @__PURE__ */withMods(TabButton, applyVerticalTabButtonMods);
 
-var css$1s = {"root":"IQgGDV","mode-cell":"LGxhPa","modeCell":"LGxhPa"};
+var _path$C;
+function _extends$C() { return _extends$C = 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$C.apply(null, arguments); }
+var SvgContentMinusOutline = function SvgContentMinusOutline(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$C({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$C || (_path$C = /*#__PURE__*/React.createElement("path", {
+    d: "M19 10.5H5v3h14v-3z"
+  })));
+};
+var ForwardRef$C = /*#__PURE__*/forwardRef(SvgContentMinusOutline);
+
+var css$1s = {"root":"LfgQiY","mode-cell":"-M703n","modeCell":"-M703n"};
 
 function applyCheckboxMods(mods) {
     return [
         css$1s.root,
-        `uui-size-${mods.size || settings.checkbox.sizes.default}`,
+        `uui-size-${mods.size || settings.sizes.defaults.checkbox}`,
         css$1s['mode-' + (mods.mode || 'form')],
         'uui-color-primary',
     ];
 }
 const applyUUICheckboxProps = (props) => {
+    const defaultIcon = ForwardRef$P;
+    const defaultIndeterminateIcon = ForwardRef$C;
     return {
-        icon: props.icon ? props.icon : settings.checkbox.icons.checkIcon,
-        indeterminateIcon: props.indeterminateIcon ? props.indeterminateIcon : settings.checkbox.icons.indeterminateIcon,
+        icon: props.icon ? props.icon : defaultIcon,
+        indeterminateIcon: props.indeterminateIcon ? props.indeterminateIcon : defaultIndeterminateIcon,
     };
 };
 const Checkbox = /* @__PURE__ */withMods(uuiComponents.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$1r = {"root":"sOStEk"};
+var _path$B;
+function _extends$B() { return _extends$B = 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$B.apply(null, arguments); }
+var SvgRadioDotFill = function SvgRadioDotFill(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$B({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$B || (_path$B = /*#__PURE__*/React.createElement("path", {
+    d: "M12 19a7 7 0 1 0 0-14 7 7 0 0 0 0 14z"
+  })));
+};
+var ForwardRef$B = /*#__PURE__*/forwardRef(SvgRadioDotFill);
+
+var css$1r = {"root":"FHkXx7"};
 
 function applyRadioInputMods(mods) {
     return [
         css$1r.root,
-        `uui-size-${mods.size || settings.radioInput.sizes.default}`,
+        `uui-size-${mods.size || settings.sizes.defaults.radioInput}`,
         'uui-radio-input-container',
         'uui-color-primary',
     ];
 }
-const RadioInput = /* @__PURE__ */withMods(RadioInput$1, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : settings.radioInput.icons.dotIcon }));
+const RadioInput = /* @__PURE__ */withMods(RadioInput$1, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : ForwardRef$B }));
 
-var css$1q = {"root":"vRJLPh"};
+var css$1q = {"root":"Pr-yuV"};
 
 function applySwitchMods(mods) {
     return [
         css$1q.root,
-        `uui-size-${mods.size || settings.switch.sizes.default}`,
+        `uui-size-${mods.size || settings.sizes.defaults.switch}`,
         'uui-color-primary',
     ];
 }
@@ -1458,20 +814,20 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var textInputCss = {"root":"jul3uf","mode-form":"jQtxr-","modeForm":"jQtxr-","mode-inline":"Mq4rOK","modeInline":"Mq4rOK","mode-cell":"g6m5i1","modeCell":"g6m5i1"};
+var textInputCss = {"root":"fuqk1R","mode-form":"_5YShjc","modeForm":"_5YShjc","mode-inline":"fT2q-y","modeInline":"fT2q-y","mode-cell":"TftuG0","modeCell":"TftuG0"};
 
 const DEFAULT_MODE$3 = EditMode.FORM;
 function applyTextInputMods(mods) {
     return [
         textInputCss.root,
-        `uui-size-${mods.size || settings.textInput.sizes.default}`,
+        `uui-size-${mods.size || settings.sizes.defaults.textInput}`,
         textInputCss['mode-' + (mods.mode || DEFAULT_MODE$3)],
     ];
 }
 const TextInput = /* @__PURE__ */withMods(TextInput$1, applyTextInputMods, () => ({
-    acceptIcon: settings.textInput.icons.acceptIcon,
-    cancelIcon: settings.textInput.icons.clearIcon,
-    dropdownIcon: settings.textInput.icons.dropdownIcon,
+    acceptIcon: systemIcons.accept,
+    cancelIcon: systemIcons.clear,
+    dropdownIcon: systemIcons.foldingArrow,
 }));
 const SearchInput = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     // analytics events are sending in IEditableDebouncer, so we need to avoid sending events in TextInput
@@ -1479,11 +835,11 @@ const SearchInput = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     delete textInputProps.getValueChangeAnalyticsEvent;
     return (React__default.createElement(IEditableDebouncer, { ...props, render: (iEditable) => {
             const defaultOnCancel = () => iEditable.onValueChange('');
-            return (React__default.createElement(TextInput, { icon: settings.textInput.icons.searchIcon, onCancel: props.onCancel ?? defaultOnCancel, type: "search", inputMode: "search", ref: ref, ...textInputProps, ...iEditable }));
+            return (React__default.createElement(TextInput, { icon: systemIcons.search, onCancel: props.onCancel ?? defaultOnCancel, type: "search", inputMode: "search", ref: ref, ...textInputProps, ...iEditable }));
         } }));
 });
 
-var css$1p = {"root":"eNp662"};
+var css$1p = {"root":"LWNmIs"};
 
 const ControlGroup = /* @__PURE__ */withMods(ControlGroup$1, () => [css$1p.root, 'uui-control-group']);
 
@@ -1499,34 +855,34 @@ function MultiSwitchComponent(props, ref) {
 }
 const MultiSwitch = /* @__PURE__ */React.forwardRef(MultiSwitchComponent);
 
-var css$1o = {"root":"GsDYI8","mode-form":"SPkFDj","modeForm":"SPkFDj","mode-cell":"soEUdr","modeCell":"soEUdr"};
+var css$1o = {"root":"_3Lne8p","mode-form":"XDtT7N","modeForm":"XDtT7N","mode-cell":"J9iGzK","modeCell":"J9iGzK"};
 
 const DEFAULT_MODE$2 = EditMode.FORM;
 function applyNumericInputMods(mods) {
     return [
         textInputCss.root,
         css$1o.root,
-        `uui-size-${mods.size || settings.numericInput.sizes.default}`,
+        `uui-size-${mods.size || settings.sizes.defaults.numericInput}`,
         textInputCss['mode-' + (mods.mode || DEFAULT_MODE$2)],
     ];
 }
 const NumericInput = /* @__PURE__ */withMods(NumericInput$1, applyNumericInputMods, (props) => {
     return {
-        upIcon: settings.numericInput.icons.arrowIcon,
-        downIcon: settings.numericInput.icons.arrowIcon,
+        upIcon: systemIcons.foldingArrow,
+        downIcon: systemIcons.foldingArrow,
         align: props.align ?? (props.mode === 'cell' ? 'right' : 'left'),
         disableArrows: props.disableArrows ?? props.mode === 'cell',
     };
 });
 
-var css$1n = {"root":"ULpBJv","mode-form":"IskIg-","modeForm":"IskIg-","mode-cell":"_5a24-T","modeCell":"_5a24-T","mode-inline":"DDa1dg","modeInline":"DDa1dg"};
+var css$1n = {"root":"-Q3OAF","mode-form":"XocBRU","modeForm":"XocBRU","mode-cell":"dWmwXh","modeCell":"dWmwXh","mode-inline":"E43d1k","modeInline":"E43d1k"};
 
 const DEFAULT_MODE$1 = EditMode.FORM;
 function applyTextAreaMods(mods) {
     return [
         css$1n.root,
         'uui-textarea',
-        'uui-size-' + (mods.size || settings.textArea.sizes.default),
+        'uui-size-' + (mods.size || settings.sizes.defaults.textArea),
         css$1n['mode-' + (mods.mode || DEFAULT_MODE$1)],
     ];
 }
@@ -1560,25 +916,85 @@ function TREE_SHAKEABLE_INIT$1() {
     };
 }
 
-var css$1m = {"root":"d3bD1t","main-path":"R6HSjq","mainPath":"R6HSjq","content-wrapper":"AZBvLq","contentWrapper":"AZBvLq","content":"_0O-4bs","action-wrapper":"moutMG","actionWrapper":"moutMG","icon-wrapper":"mwy3Bo","iconWrapper":"mwy3Bo","icon":"oqCCLj","close-icon":"fDJqDu","closeIcon":"fDJqDu"};
+var _path$A;
+function _extends$A() { return _extends$A = 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$A.apply(null, arguments); }
+var SvgNotificationCheckFill = function SvgNotificationCheckFill(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$A({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$A || (_path$A = /*#__PURE__*/React.createElement("path", {
+    d: "m10.6 16.6 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4 4.25 4.25zM12 22a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22z"
+  })));
+};
+var ForwardRef$A = /*#__PURE__*/forwardRef(SvgNotificationCheckFill);
+
+var _path$z;
+function _extends$z() { return _extends$z = 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$z.apply(null, arguments); }
+var SvgNotificationWarningFill = function SvgNotificationWarningFill(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$z({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$z || (_path$z = /*#__PURE__*/React.createElement("path", {
+    d: "M1 21 12 2l11 19H1zm11-3a.968.968 0 0 0 .713-.288A.967.967 0 0 0 13 17a.967.967 0 0 0-.287-.712A.968.968 0 0 0 12 16a.965.965 0 0 0-.712.288A.965.965 0 0 0 11 17c0 .283.096.52.288.712A.965.965 0 0 0 12 18zm-1-3h2v-5h-2v5z"
+  })));
+};
+var ForwardRef$z = /*#__PURE__*/forwardRef(SvgNotificationWarningFill);
+
+var _path$y;
+function _extends$y() { return _extends$y = 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$y.apply(null, arguments); }
+var SvgNotificationErrorFill = function SvgNotificationErrorFill(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$y({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$y || (_path$y = /*#__PURE__*/React.createElement("path", {
+    d: "M12 17a.968.968 0 0 0 .713-.288A.967.967 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.967.967 0 0 0-.712.287A.968.968 0 0 0 11 16c0 .283.096.52.288.712A.965.965 0 0 0 12 17zm-1-4h2V7h-2v6zm1 9a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22z"
+  })));
+};
+var ForwardRef$y = /*#__PURE__*/forwardRef(SvgNotificationErrorFill);
+
+var _path$x;
+function _extends$x() { return _extends$x = 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$x.apply(null, arguments); }
+var SvgNotificationInfoFill = function SvgNotificationInfoFill(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$x({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$x || (_path$x = /*#__PURE__*/React.createElement("path", {
+    d: "M11 17h2v-6h-2v6zm1-8a.968.968 0 0 0 .713-.288A.967.967 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.967.967 0 0 0-.712.287A.968.968 0 0 0 11 8c0 .283.096.52.288.712A.965.965 0 0 0 12 9zm0 13a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22z"
+  })));
+};
+var ForwardRef$x = /*#__PURE__*/forwardRef(SvgNotificationInfoFill);
+
+var css$1m = {"root":"oXU-At","main-path":"wkp469","mainPath":"wkp469","content-wrapper":"OjClvP","contentWrapper":"OjClvP","content":"T5wjNQ","action-wrapper":"H13oQC","actionWrapper":"H13oQC","icon-wrapper":"_4e2Y1d","iconWrapper":"_4e2Y1d","icon":"pCTOJL","close-icon":"BJh2m6","closeIcon":"BJh2m6"};
 
-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 },
+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.sizes.defaults.alert}`), ...props.rawProps },
     React.createElement("div", { className: css$1m.mainPath },
         React.createElement("div", { className: css$1m.contentWrapper },
             props.icon && (React.createElement("div", { className: css$1m.iconWrapper },
                 React.createElement(IconContainer, { icon: props.icon, cx: css$1m.icon }))),
             React.createElement("div", { className: css$1m.content },
                 props.children,
-                props.actions && (React.createElement("div", { className: css$1m.actionWrapper }, props.actions.map((action) => (React.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$1m.actionLink, size: settings.alert.sizes.actionMap[props.size || settings.alert.sizes.default] }))))))),
-        props.onClose && React.createElement(IconButton, { icon: settings.alert.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$1m.closeIcon })))));
-const WarningAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, { icon: settings.alert.icons.warningIcon, color: "warning", ref: ref, ...props }));
-const SuccessAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, { icon: settings.alert.icons.successIcon, color: "success", ref: ref, ...props }));
-const HintAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, { icon: settings.alert.icons.infoIcon, color: "info", ref: ref, ...props }));
-const ErrorAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, { icon: settings.alert.icons.errorIcon, color: "error", ref: ref, ...props }));
+                props.actions && (React.createElement("div", { className: css$1m.actionWrapper }, props.actions.map((action) => (React.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$1m.actionLink, size: settings.sizes.alert.action[props.size || settings.sizes.defaults.alert] }))))))),
+        props.onClose && React.createElement(IconButton, { icon: ForwardRef$R, color: "neutral", onClick: props.onClose, cx: css$1m.closeIcon })))));
+const WarningAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, { icon: ForwardRef$z, color: "warning", ref: ref, ...props }));
+const SuccessAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, { icon: ForwardRef$A, color: "success", ref: ref, ...props }));
+const HintAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, { icon: ForwardRef$x, color: "info", ref: ref, ...props }));
+const ErrorAlert = /* @__PURE__ */React.forwardRef((props, ref) => React.createElement(Alert, { icon: ForwardRef$y, color: "error", ref: ref, ...props }));
 
 const Dropdown = /* @__PURE__ */withMods(Dropdown$1);
 
-var css$1l = {"root":"SGMXU7"};
+var css$1l = {"root":"KONO6-"};
 
 function applyDropdownContainerMods(mods) {
     return [
@@ -1589,7 +1005,7 @@ function applyDropdownContainerMods(mods) {
 }
 const DropdownContainer = /* @__PURE__ */withMods(uuiComponents.DropdownContainer, applyDropdownContainerMods);
 
-var css$1k = {"submenu-root-item-rtl":"TkI-Uq","submenuRootItemRtl":"TkI-Uq","icon-after":"dYGwfs","iconAfter":"dYGwfs","submenu-root-item":"_2gk59K","submenuRootItem":"_2gk59K","icon-check":"Ej5i0R","iconCheck":"Ej5i0R","splitter-root":"B7aJtY","splitterRoot":"B7aJtY","splitter":"V8a-QD","header-root":"_6t3hRN","headerRoot":"_6t3hRN","item-root":"dgnjr9","itemRoot":"dgnjr9","icon":"ox505Y","link":"gInx0P","indent":"dcsYcf","selected-mark":"HvrPR6","selectedMark":"HvrPR6"};
+var css$1k = {"submenu-root-item-rtl":"-yN4U9","submenuRootItemRtl":"-yN4U9","icon-after":"FiC-7H","iconAfter":"FiC-7H","submenu-root-item":"RdBetY","submenuRootItem":"RdBetY","icon-check":"mRkc1F","iconCheck":"mRkc1F","splitter-root":"ODmVuq","splitterRoot":"ODmVuq","splitter":"ZL311Q","header-root":"ZnC2GX","headerRoot":"ZnC2GX","item-root":"_9t-3dL","itemRoot":"_9t-3dL","icon":"ekOe0m","link":"UK0cB3","indent":"uVq9Oi","selected-mark":"rJ8W1a","selectedMark":"rJ8W1a"};
 
 var IDropdownControlKeys;
 (function (IDropdownControlKeys) {
@@ -1636,7 +1052,7 @@ const DropdownMenuButton = /* @__PURE__ */React__default.forwardRef((props, ref)
     const handleClick = (event) => {
         if (isDisabled || !onClick)
             return;
-        !isEventTargetInsideClickable(event) && onClick(event);
+        onClick(event);
         context.uuiAnalytics.sendEvent(props.clickAnalyticsEvent);
     };
     const handleOpenDropdown = (event) => {
@@ -1663,12 +1079,16 @@ 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, (!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 },
+    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 },
         getMenuButtonContent(),
         isSelected && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(FlexSpacer, null),
-            React__default.createElement(IconContainer, { icon: settings.dropdownMenu.icons.acceptIcon, cx: css$1k.selectedMark })))));
+            React__default.createElement(IconContainer, { icon: systemIcons.accept, cx: css$1k.selectedMark })))));
 });
 function DropdownMenuSplitter(props) {
     return (React__default.createElement("div", { className: cx$1(props.cx, css$1k.splitterRoot) },
@@ -1696,7 +1116,7 @@ function DropdownSubMenu(props) {
         },
     ];
     const isRtl = getDir() === 'rtl';
-    return (React__default.createElement(Dropdown$1, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: isRtl ? 'left-start' : 'right-start', modifiers: subMenuModifiers, renderBody: (dropdownProps) => !props.isDisabled && (React__default.createElement(DropdownMenuBody, { closeOnKey: IDropdownControlKeys.LEFT_ARROW, ...props, ...dropdownProps })), renderTarget: ({ toggleDropdownOpening, ...targetProps }) => (React__default.createElement(DropdownMenuButton, { cx: cx$1(isRtl ? css$1k.submenuRootItemRtl : css$1k.submenuRootItem), icon: settings.dropdownMenu.icons.dropdownIcon, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening, ...props, ...targetProps })) }));
+    return (React__default.createElement(Dropdown$1, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: isRtl ? 'left-start' : 'right-start', modifiers: subMenuModifiers, renderBody: (dropdownProps) => !props.isDisabled && (React__default.createElement(DropdownMenuBody, { closeOnKey: IDropdownControlKeys.LEFT_ARROW, ...props, ...dropdownProps })), renderTarget: ({ toggleDropdownOpening, ...targetProps }) => (React__default.createElement(DropdownMenuButton, { cx: cx$1(isRtl ? css$1k.submenuRootItemRtl : css$1k.submenuRootItem), icon: systemIcons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening, ...props, ...targetProps })) }));
 }
 function DropdownMenuSwitchButton(props) {
     const context = useContext(UuiContext);
@@ -1712,14 +1132,14 @@ function DropdownMenuSwitchButton(props) {
             onHandleValueChange(!isSelected);
         }
     };
-    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 },
+    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 } },
         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":"PoLle3","mode-block":"ykrbz5","modeBlock":"ykrbz5","mode-inline":"pTyiOn","modeInline":"pTyiOn","padding-0":"adRwN8","padding0":"adRwN8","padding-6":"wEMEVP","padding6":"wEMEVP","padding-12":"U1wsJl","padding12":"U1wsJl","padding-18":"HBr0Ox","padding18":"HBr0Ox"};
+var css$1j = {"root":"pYHJWO","mode-block":"b8gqmM","modeBlock":"b8gqmM","mode-inline":"OD6N41","modeInline":"OD6N41","padding-0":"u4yrLi","padding0":"u4yrLi","padding-6":"mRx-Dq","padding6":"mRx-Dq","padding-12":"_4mdTtt","padding12":"_4mdTtt","padding-18":"pCJTri","padding18":"pCJTri"};
 
 function applyAccordionMods(mods) {
     return [
@@ -1729,55 +1149,34 @@ function applyAccordionMods(mods) {
     ];
 }
 const Accordion = /* @__PURE__ */withMods(uuiComponents.Accordion, applyAccordionMods, (mods) => ({
-    dropdownIcon: mods.dropdownIcon !== null && settings.accordion.icons.dropdownIcon,
+    dropdownIcon: mods.dropdownIcon !== null && systemIcons.foldingArrow,
 }));
 
-var css$1i = {"root":"hDDpme","align-items":"L9JZLn","alignItems":"L9JZLn","justify-content":"_8Hx6UR","justifyContent":"_8Hx6UR","border-top":"R65MLD","borderTop":"R65MLD","border-bottom":"vLaBfn","borderBottom":"vLaBfn","top-shadow":"-gHZfD","topShadow":"-gHZfD","padding":"Vh4wVx","margin":"ZyIAvf","vPadding":"_3oJh9s","column-gap":"wfnYvT","columnGap":"wfnYvT","row-gap":"lkHE1A","rowGap":"lkHE1A","spacing":"H2zeV8","uui-bg-surface-main":"oUJsjA","uuiBgSurfaceMain":"oUJsjA"};
+var css$1i = {"root":"_06nnLL","border-top":"ebFH31","borderTop":"ebFH31","border-bottom":"_4Pc7J5","borderBottom":"_4Pc7J5","top-shadow":"h8YUds","topShadow":"h8YUds","padding-6":"NaZ6Wv","padding6":"NaZ6Wv","padding-12":"un2SH9","padding12":"un2SH9","padding-18":"vN0g0e","padding18":"vN0g0e","padding-24":"Xpj2Lz","padding24":"Xpj2Lz","margin-24":"_9Xdiru","margin24":"_9Xdiru","margin-12":"nVOvma","margin12":"nVOvma","vPadding-12":"UmX-nx","vPadding12":"UmX-nx","vPadding-18":"e9Sp45","vPadding18":"e9Sp45","vPadding-24":"_1eYlic","vPadding24":"_1eYlic","vPadding-36":"_90S6b1","vPadding36":"_90S6b1","vPadding-48":"s7iZ-L","vPadding48":"s7iZ-L","spacing-6":"reEmMA","spacing6":"reEmMA","spacing-12":"GuHqek","spacing12":"GuHqek","spacing-18":"b3oxbR","spacing18":"b3oxbR","uui-surface-main":"_1KtJp7","uuiSurfaceMain":"_1KtJp7"};
 
 const FlexCell = /* @__PURE__ */withMods(FlexCell$1, () => [css$1i.flexCell]);
 
-const FlexRow = /* @__PURE__ */forwardRef((props, ref) => {
+const FlexRow = /* @__PURE__ */withMods(FlexRow$1, (props) => {
     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.');
         }
     }
-    const classNames = cx$1([
+    return [
         css$1i.root,
-        'uui-flex-row',
-        props.onClick && uuiMarkers.clickable,
-        props.cx,
-        props.size !== null && 'uui-size-' + (props.size || settings.flexRow.sizes.default),
-        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.size !== null && 'uui-size-' + (props.size || settings.sizes.defaults.flexRow),
+        props.padding && css$1i['padding-' + props.padding],
+        props.vPadding && css$1i['vPadding-' + props.vPadding],
+        props.margin && css$1i['margin-' + props.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.background && css$1i[`uui-bg-${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));
+        props.spacing && css$1i['spacing-' + props.spacing],
+        props.background && css$1i[`uui-${props.background}`],
+    ];
 });
 
-var css$1h = {"root":"_0ne5iy","margin-24":"ZmXcoV","margin24":"ZmXcoV","padding-12":"afomuz","padding12":"afomuz","padding-24":"aB2jhr","padding24":"aB2jhr","shadow":"EiSpuF","uui-surface-main":"M5HDFM","uuiSurfaceMain":"M5HDFM"};
+var css$1h = {"root":"Qvw8Lt","margin-24":"q6nB1N","margin24":"q6nB1N","padding-12":"VHVEr1","padding12":"VHVEr1","padding-24":"u2rA4v","padding24":"u2rA4v","shadow":"EnVRp4","uui-surface-main":"_2plXwp","uuiSurfaceMain":"_2plXwp"};
 
 const Panel = /* @__PURE__ */withMods(VPanel, (props) => [
     'uui-panel',
@@ -1787,7 +1186,7 @@ const Panel = /* @__PURE__ */withMods(VPanel, (props) => [
     props.background && css$1h[`uui-${props.background}`],
 ]);
 
-var css$1g = {"root":"e4GW-Z"};
+var css$1g = {"root":"h7gSgH"};
 
 function applyTooltipMods(mods) {
     return [
@@ -1797,24 +1196,21 @@ function applyTooltipMods(mods) {
 }
 const Tooltip = /* @__PURE__ */withMods(uuiComponents.Tooltip, applyTooltipMods);
 
-var css$1f = {"root":"TUpaUl"};
+var css$1f = {"root":"tbkdLD"};
 
 function applyLabeledInputMods(mods) {
     return [
         'uui-labeled-input',
         css$1f.root,
-        'uui-size-' + (mods.size || settings.labeledInput.sizes.default),
+        'uui-size-' + (mods.size || settings.sizes.defaults.labeledInput),
     ];
 }
-function applyLabeledInputProps(props) {
-    return ({
-        Tooltip: props.Tooltip || Tooltip,
-        infoIcon: props.infoIcon || props.size <= '30' ? settings.labeledInput.icons.fillInfoIcon : settings.labeledInput.icons.infoIcon,
-    });
-}
-const LabeledInput = /* @__PURE__ */withMods(uuiComponents.LabeledInput, applyLabeledInputMods, applyLabeledInputProps);
+const LabeledInput = /* @__PURE__ */withMods(uuiComponents.LabeledInput, applyLabeledInputMods, (props) => ({
+    Tooltip: props.Tooltip || Tooltip,
+    infoIcon: props.infoIcon || (settings.sizes.labeledInput.fillIcon.includes(props.size) ? ForwardRef$x : ForwardRef$M),
+}));
 
-var css$1e = {"root":"aaJb3n"};
+var css$1e = {"root":"NNaX-q"};
 
 function RadioGroup(props) {
     const direction = props.direction || 'vertical';
@@ -1829,7 +1225,7 @@ function RadioGroup(props) {
     })));
 }
 
-var css$1d = {"root":"_1nLtJT"};
+var css$1d = {"root":"_0OXyc8"};
 
 function applyScrollBarsMods() {
     return [
@@ -1838,27 +1234,27 @@ function applyScrollBarsMods() {
 }
 const ScrollBars = /* @__PURE__ */withMods(ScrollBars$1, applyScrollBarsMods);
 
-var css$1c = {"scroll-container":"_5oa1ld","scrollContainer":"_5oa1ld","list-container":"hW74e0","listContainer":"hW74e0"};
+var css$1c = {"scroll-container":"kmMez3","scrollContainer":"kmMez3","list-container":"PviiMC","listContainer":"PviiMC"};
 
-var css$1b = {"root":"_9CZEkU"};
+var css$1b = {"root":"eq7TjD"};
 
 const AvatarStack = /* @__PURE__ */withMods(AvatarStack$1, () => [css$1b.root]);
 
-var css$1a = {"root":"_0YCd3-"};
+var css$1a = {"root":"ubVIta"};
 
 const DEFAULT_FILL = 'solid';
 function applyBadgeMods(mods) {
     return [
         'uui-badge',
         css$1a.root,
-        `uui-size-${mods.size || settings.badge.sizes.default}`,
+        `uui-size-${mods.size || settings.sizes.defaults.badge}`,
         `uui-fill-${mods.fill || DEFAULT_FILL}`,
         `uui-color-${mods.color || 'info'}`,
     ];
 }
 const Badge = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const styles = [applyBadgeMods(props), props.cx];
-    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.badge.icons.dropdownIcon;
+    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : systemIcons.foldingArrow;
     return (React__default.createElement(Clickable, { ...props, rawProps: {
             'aria-haspopup': props.isDropdown,
             'aria-expanded': props.isOpen,
@@ -1867,17 +1263,17 @@ const Badge = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         (props.indicator && props.fill === 'outline') && (React__default.createElement("div", { className: "uui-indicator" })),
         props.icon && props.iconPosition !== 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         props.caption && (React__default.createElement("div", { className: uuiElement.caption }, props.caption)),
-        props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { key: "count-indicator", color: null, size: settings.badge.sizes.countIndicatorMap[props.size || settings.badge.sizes.default], caption: props.count })),
+        props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { key: "count-indicator", color: null, size: settings.sizes.badge.countIndicator[props.size || settings.sizes.defaults.badge], caption: props.count })),
         props.icon && props.iconPosition === 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$19 = {"root":"cvyidi"};
+var css$19 = {"root":"-k4kiw"};
 
 function applyTagMods(props) {
     return [
         css$19.root,
-        `uui-size-${props.size || settings.tag.sizes.default}`,
+        `uui-size-${props.size || settings.sizes.defaults.tag}`,
         `uui-color-${props.color || 'neutral'}`,
         `uui-fill-${props.fill || 'solid'}`,
         'uui-tag',
@@ -1885,8 +1281,8 @@ function applyTagMods(props) {
 }
 const Tag = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const styles = [applyTagMods(props), props.cx];
-    const ClearIcon = props.clearIcon ? props.clearIcon : settings.tag.icons.clearIcon;
-    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.tag.icons.dropdownIcon;
+    const ClearIcon = props.clearIcon ? props.clearIcon : systemIcons.clear;
+    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : systemIcons.foldingArrow;
     return (React__default.createElement(Clickable, { ...props, rawProps: {
             'aria-haspopup': props.isDropdown,
             'aria-expanded': props.isOpen,
@@ -1894,44 +1290,74 @@ const Tag = /* @__PURE__ */React__default.forwardRef((props, ref) => {
         }, cx: styles, ref: ref },
         props.icon && props.iconPosition !== 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         props.caption && (React__default.createElement("div", { className: uuiElement.caption }, props.caption)),
-        props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { color: (!props.color || props.color === 'neutral') ? 'white' : props.color, size: settings.tag.sizes.countIndicatorMap[(props.size || settings.tag.sizes.default)], caption: props.count })),
+        props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { color: (!props.color || props.color === 'neutral') ? 'white' : props.color, size: settings.sizes.tag.countIndicator[(props.size || settings.sizes.defaults.tag)], caption: props.count })),
         props.icon && props.iconPosition === 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen })),
         props.onClear && !props.isDisabled && (React__default.createElement(IconContainer, { cx: uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
 });
 
-var css$18 = {"root":"r2rWOS","uui-spinner":"Srb4XM","uuiSpinner":"Srb4XM"};
+var css$18 = {"root":"qmx-Z-","uui-spinner":"_06zJA5","uuiSpinner":"_06zJA5"};
 
 function applySpinnerMods() {
     return [css$18.root, 'uui-spinner'];
 }
 const Spinner = /* @__PURE__ */withMods(Spinner$1, applySpinnerMods);
 
-var css$17 = {"root":"tqPiSm","page":"ZmPsi9","spacer":"RxL2ED","mode-ghost":"_05BbLl","modeGhost":"_05BbLl"};
+var _path$w;
+function _extends$w() { return _extends$w = 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$w.apply(null, arguments); }
+var SvgNavigationChevronLeftOutline = function SvgNavigationChevronLeftOutline(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$w({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$w || (_path$w = /*#__PURE__*/React.createElement("path", {
+    d: "M15.914 5.414 14.5 4l-8 8 8 8 1.414-1.414L9.328 12l6.586-6.586z"
+  })));
+};
+var ForwardRef$w = /*#__PURE__*/forwardRef(SvgNavigationChevronLeftOutline);
+
+var _path$v;
+function _extends$v() { return _extends$v = 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$v.apply(null, arguments); }
+var SvgNavigationChevronRightOutline = function SvgNavigationChevronRightOutline(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$v({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
+    d: "M8.086 18.586 9.5 20l8-8-8-8-1.414 1.414L14.672 12l-6.586 6.586z"
+  })));
+};
+var ForwardRef$v = /*#__PURE__*/forwardRef(SvgNavigationChevronRightOutline);
+
+var css$17 = {"root":"_6bIo3e","page":"dv7b83","spacer":"jurJRk","mode-ghost":"dTMMr3","modeGhost":"dTMMr3"};
 
 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 },
-        React__default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.leftArrowIcon, onClick: params.goToPrev, isDisabled: params.isFirst || props.isDisabled, fill: "outline", color: "secondary" }),
+    const renderPaginator = (params) => (React__default.createElement("nav", { role: "navigation", className: cx(css$17.root, 'uui-paginator', `uui-size-${props.size || settings.sizes.defaults.paginator}`), ...params.rawProps },
+        React__default.createElement(Button, { size: props.size || settings.sizes.defaults.paginator, icon: ForwardRef$w, onClick: params.goToPrev, isDisabled: params.isFirst || props.isDisabled, fill: "outline", color: "secondary" }),
         params.pages.map((page, index) => {
             if (page.type === 'spacer') {
-                return (React__default.createElement(Button, { cx: cx(css$17.spacer, css$17.page), size: props.size || settings.paginator.sizes.default, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1, isDisabled: props.isDisabled }));
+                return (React__default.createElement(Button, { cx: cx(css$17.spacer, css$17.page), size: props.size || settings.sizes.defaults.paginator, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1, isDisabled: props.isDisabled }));
             }
             else {
-                return (React__default.createElement(Button, { cx: cx(css$17[`mode-${!page.isActive && 'ghost'}`], css$17.page), size: props.size || settings.paginator.sizes.default, key: page.pageNumber, caption: page.pageNumber, onClick: () => page.onClick?.(), rawProps: { 'aria-current': page.isActive }, fill: (page.isActive && 'outline') || 'ghost', color: "primary", isDisabled: props.isDisabled }));
+                return (React__default.createElement(Button, { cx: cx(css$17[`mode-${!page.isActive && 'ghost'}`], css$17.page), size: props.size || settings.sizes.defaults.paginator, key: page.pageNumber, caption: page.pageNumber, onClick: () => page.onClick?.(), rawProps: { 'aria-current': page.isActive }, fill: (page.isActive && 'outline') || 'ghost', color: "primary", isDisabled: props.isDisabled }));
             }
         }),
-        React__default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.rightArrowIcon, onClick: params.goToNext, isDisabled: params.isLast || props.isDisabled, fill: "outline", color: "secondary" })));
+        React__default.createElement(Button, { size: props.size || settings.sizes.defaults.paginator, icon: ForwardRef$v, onClick: params.goToNext, isDisabled: params.isLast || props.isDisabled, fill: "outline", color: "secondary" })));
     return React__default.createElement(Paginator$1, { ...props, render: renderPaginator });
 }
 
-var css$16 = {"root":"zq6GmJ","progress-bar":"BXCQfI","progressBar":"BXCQfI","progressBar-indeterminate":"V3VUTD","progressBarIndeterminate":"V3VUTD","size-12":"p8qoLb","size12":"p8qoLb","size-18":"vRR621","size18":"vRR621","size-24":"D-iux-","size24":"D-iux-"};
+var css$16 = {"root":"M4-P0O","progress-bar":"_490FHk","progressBar":"_490FHk","progressBar-indeterminate":"_21wtnY","progressBarIndeterminate":"_21wtnY","size-12":"DWxqwz","size12":"DWxqwz","size-18":"ucyWf-","size18":"ucyWf-","size-24":"fasxJ5","size24":"fasxJ5"};
 
 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":"Z1Q0zd","striped":"tdpQ5R","animate-stripes":"qul-ez","animateStripes":"qul-ez","size-12":"_3sjTu-","size12":"_3sjTu-","size-18":"cIWmzN","size18":"cIWmzN","size-24":"feUJ9-","size24":"feUJ9-"};
+var css$15 = {"root":"ETybpW","striped":"VzJobp","animate-stripes":"l4m6hP","animateStripes":"l4m6hP","size-12":"BdrKJU","size12":"BdrKJU","size-18":"_9-QiAV","size18":"_9-QiAV","size-24":"cyk9VN","size24":"cyk9VN"};
 
 const DEFAULT_SIZE = '12';
 function applyProgressBarMods(mods) {
@@ -1946,19 +1372,19 @@ const ProgressBar = /* @__PURE__ */withMods(uuiComponents.ProgressBar, applyProg
     hideLabel: props.hideLabel || props.striped,
 }));
 
-var css$14 = {"root":"ayAV9P"};
+var css$14 = {"root":"_46BVfa"};
 
 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":"tvo-Qy"};
+var css$13 = {"root":"wwuE5N"};
 
 const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
     return (React__default.createElement("div", { ref: ref, className: cx([
             css$13.root,
-            `uui-size-${props.size || settings.statusIndicator.sizes.default}`,
+            `uui-size-${props.size || settings.sizes.defaults.statusIndicator}`,
             'uui-status_indicator',
             `uui-color-${props.color || 'neutral'}`,
             `uui-fill-${props.fill || 'solid'}`,
@@ -1968,28 +1394,28 @@ const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
         React__default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
 });
 
-var css$12 = {"drag-handle":"npPLGz","dragHandle":"npPLGz","icon-container":"g40Inq","iconContainer":"g40Inq"};
+var css$12 = {"drag-handle":"fgPdf4","dragHandle":"fgPdf4","icon-container":"Wfc45a","iconContainer":"Wfc45a"};
 
 function DataRowAddons(props) {
     const row = props.rowProps;
     const getIndent = () => {
-        return (row.indent - 1) * settings.dataTable.sizes.body.indentUnitMap[props.size || settings.dataTable.sizes.body.row];
+        return (row.indent - 1) * (settings.sizes.rowAddons.indentUnit[props.size] || settings.sizes.rowAddons.defaults.indentUnit);
     };
     const getWidth = () => {
-        return settings.dataTable.sizes.body.indentWidthMap[props.size || settings.dataTable.sizes.body.row];
+        return settings.sizes.rowAddons.indentWidth[props.size] || settings.sizes.rowAddons.defaults.indentWidth;
     };
     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.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?.checkbox?.isVisible && (React__default.createElement(Checkbox, { key: "cb", cx: "uui-dr_addons-checkbox", tabIndex: props.tabIndex, size: settings.sizes.rowAddons.checkbox[props.size], value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => 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.dataTable.icons.body.foldingIcon, cx: [
+            }, key: "icon", icon: ForwardRef$Q, cx: [
                 uuiElement.foldingArrow, uuiMarkers.clickable, css$12.iconContainer,
-            ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), size: settings.dataTable.sizes.body.iconMap[props.size || settings.dataTable.sizes.body.row] }))))));
+            ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), size: settings.sizes.rowAddons.icon[props.size] || settings.sizes.rowAddons.defaults.icon }))))));
 }
 
-var css$11 = {"root":"f6bX9r"};
+var css$11 = {"root":"UAZdQJ"};
 
 const Blocker = /* @__PURE__ */withMods(Blocker$1, () => [css$11.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__default.createElement(Spinner, null)) }));
 
@@ -2035,7 +1461,7 @@ const VirtualListView = /* @__PURE__ */React.forwardRef((props, ref) => {
         React.createElement(Blocker, { isEnabled: props.isLoading })));
 });
 
-var css$10 = {"root":"_99-x5m"};
+var css$10 = {"root":"Nvwpad"};
 
 function CheckboxGroup(props) {
     const currentValue = props.value || [];
@@ -2057,13 +1483,13 @@ function CheckboxGroup(props) {
     })));
 }
 
-var css$$ = {"root":"_1y7VQP","modal-blocker":"QWBCcS","modalBlocker":"QWBCcS","animateModalBlocker":"xXsHpY","modal":"eX24cg","modal-footer":"qeM8fT","modalFooter":"qeM8fT","border-top":"CvsnLC","borderTop":"CvsnLC","modal-header":"RRUSx4","modalHeader":"RRUSx4","border-bottom":"AZ2k2C","borderBottom":"AZ2k2C"};
+var css$$ = {"root":"LzIFiN","modal-blocker":"d9czWi","modalBlocker":"d9czWi","animateModalBlocker":"EIvRP-","modal":"OnIeq4","modal-footer":"A9NwAu","modalFooter":"A9NwAu","modal-header":"xfUuw8","modalHeader":"xfUuw8"};
 
 const ModalBlocker = /* @__PURE__ */withMods(ModalBlocker$1, () => [css$$.modalBlocker]);
 const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$$.root, css$$.modal], (props) => {
-    const width = props.width;
+    const width = props.width || settings.sizes.modal.window.defaults.width;
     const height = props.height || 'auto';
-    const maxHeight = isMobile() ? 'var(--uui-modals-mobile-max-height)' : (props.maxHeight || 'var(--uui-modals-max-height)');
+    const maxHeight = isMobile() ? '100dvh' : (props.maxHeight || '80dvh');
     return {
         style: {
             ...props.style,
@@ -2073,20 +1499,24 @@ const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$$.root, cs
         },
     };
 });
-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 ModalHeader extends React__default.Component {
+    render() {
+        return (React__default.createElement(FlexRow, { padding: this.props.padding || '24', size: null, vPadding: "36", borderBottom: this.props.borderBottom, cx: [css$$.root, css$$.modalHeader, this.props.cx], columnGap: "12", rawProps: this.props.rawProps },
+            this.props.title && (React__default.createElement("div", { className: cx('uui-modal-title', 'uui-typography') }, this.props.title)),
+            this.props.children,
+            this.props.onClose && React__default.createElement(FlexSpacer, null),
+            this.props.onClose && (React__default.createElement(FlexCell, { shrink: 0, width: "auto" },
+                React__default.createElement(IconButton, { rawProps: { 'aria-label': 'Close modal' }, icon: ForwardRef$R, onClick: this.props.onClose })))));
+    }
 }
-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));
+class ModalFooter extends React__default.Component {
+    render() {
+        return (React__default.createElement(FlexRow, { columnGap: this.props.columnGap || '12', cx: [
+                css$$.root,
+                css$$.modalFooter,
+                this.props.cx,
+            ], borderTop: this.props.borderTop, padding: this.props.padding || '24', vPadding: this.props.vPadding || '24', rawProps: this.props.rawProps }, this.props.children));
+    }
 }
 
 const TREE_SHAKEABLE_INIT = () => ({
@@ -2247,7 +1677,22 @@ const TREE_SHAKEABLE_INIT = () => ({
 });
 const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
 
-var css$_ = {"root":"_9WzCeB","icon-wrapper":"TgSLMq","iconWrapper":"TgSLMq","action-wrapper":"g1mtAi","actionWrapper":"g1mtAi","action-link":"_2N7xXw","actionLink":"_2N7xXw","close-icon":"DUST4F","closeIcon":"DUST4F","main-path":"ljud2t","mainPath":"ljud2t","content":"_6s0Qi6","close-wrapper":"DspxhS","closeWrapper":"DspxhS","notification-wrapper":"IFgLnw","notificationWrapper":"IFgLnw","clear-button":"mIzzUU","clearButton":"mIzzUU"};
+var _path$u;
+function _extends$u() { return _extends$u = 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$u.apply(null, arguments); }
+var SvgNotificationHelpFill = function SvgNotificationHelpFill(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$u({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
+    d: "M11.95 18c.35 0 .646-.121.888-.363.241-.241.362-.537.362-.887s-.12-.646-.362-.887a1.208 1.208 0 0 0-.888-.363c-.35 0-.646.121-.888.363a1.206 1.206 0 0 0-.362.887c0 .35.12.646.362.887.242.242.538.363.888.363zm-.9-3.85h1.85c0-.55.063-.983.188-1.3.125-.317.479-.75 1.062-1.3a7.483 7.483 0 0 0 1.025-1.238c.25-.391.375-.862.375-1.412 0-.933-.342-1.65-1.025-2.15-.683-.5-1.492-.75-2.425-.75-.95 0-1.72.25-2.312.75-.592.5-1.005 1.1-1.238 1.8l1.65.65c.083-.3.271-.625.563-.975.291-.35.737-.525 1.337-.525.533 0 .933.146 1.2.437.267.292.4.613.4.963 0 .333-.1.646-.3.937-.2.292-.45.563-.75.813-.733.65-1.183 1.142-1.35 1.475-.167.333-.25.942-.25 1.825zM12 22a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22z"
+  })));
+};
+var ForwardRef$u = /*#__PURE__*/forwardRef(SvgNotificationHelpFill);
+
+var css$_ = {"root":"DUBgDz","icon-wrapper":"G8rvY3","iconWrapper":"G8rvY3","action-wrapper":"jIP--6","actionWrapper":"jIP--6","action-link":"E3p6K4","actionLink":"E3p6K4","close-icon":"WBCha8","closeIcon":"WBCha8","main-path":"_79iJvH","mainPath":"_79iJvH","content":"thNgmV","close-wrapper":"F0m-7e","closeWrapper":"F0m-7e","notification-wrapper":"_0VLmt6","notificationWrapper":"_0VLmt6","clear-button":"Qcz5pN","clearButton":"Qcz5pN"};
 
 const NotificationCard = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const notificationCardNode = React__default.useRef(null);
@@ -2266,21 +1711,21 @@ const NotificationCard = /* @__PURE__ */React__default.forwardRef((props, ref) =
                 React__default.createElement(IconContainer, { size: 24, icon: props.icon }))),
             React__default.createElement("div", { className: css$_.content },
                 props.children,
-                props.actions && (React__default.createElement("div", { className: css$_.actionWrapper }, props.actions.map((action) => (React__default.createElement(LinkButton, { key: action.name, caption: action.name, onClick: action.action, cx: css$_.actionLink, size: settings.notificationCard.sizes.action, rawProps: action.rawProps })))))),
+                props.actions && (React__default.createElement("div", { className: css$_.actionWrapper }, props.actions.map((action) => (React__default.createElement(LinkButton, { key: action.name, caption: action.name, onClick: action.action, cx: css$_.actionLink, size: settings.sizes.notificationCard.action, rawProps: action.rawProps })))))),
             props.onClose && (React__default.createElement("div", { className: css$_.closeWrapper },
-                React__default.createElement(IconButton, { icon: settings.notificationCard.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$_.closeIcon }))))));
+                React__default.createElement(IconButton, { icon: ForwardRef$R, color: "neutral", onClick: props.onClose, cx: css$_.closeIcon }))))));
 });
-const WarningNotification = /* @__PURE__ */React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, { icon: settings.notificationCard.icons.warningIcon, color: "warning", ...props, ref: ref, cx: props.cx })));
-const SuccessNotification = /* @__PURE__ */React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, { icon: settings.notificationCard.icons.successIcon, color: "success", ...props, ref: ref, cx: props.cx })));
-const HintNotification = /* @__PURE__ */React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, { icon: settings.notificationCard.icons.hintIcon, color: "info", ...props, ref: ref, cx: props.cx })));
-const ErrorNotification = /* @__PURE__ */React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, { icon: settings.notificationCard.icons.errorIcon, color: "error", ...props, ref: ref, cx: props.cx })));
+const WarningNotification = /* @__PURE__ */React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, { icon: ForwardRef$z, color: "warning", ...props, ref: ref, cx: props.cx })));
+const SuccessNotification = /* @__PURE__ */React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, { icon: ForwardRef$A, color: "success", ...props, ref: ref, cx: props.cx })));
+const HintNotification = /* @__PURE__ */React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, { icon: ForwardRef$u, color: "info", ...props, ref: ref, cx: props.cx })));
+const ErrorNotification = /* @__PURE__ */React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, { icon: ForwardRef$y, color: "error", ...props, ref: ref, cx: props.cx })));
 function ClearNotification() {
     const uuiCtx = useUuiContext();
     return (React__default.createElement("div", { className: cx(css$_.notificationWrapper, css$_.clearButton) },
         React__default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
 }
 
-var css$Z = {"footer":"kEskDQ"};
+var css$Z = {"footer":"_7eeblS"};
 
 class ConfirmationModal extends React.Component {
     render() {
@@ -2322,7 +1767,7 @@ function useReliableForceUpdate() {
     return red[1];
 }
 
-var css$Y = {"root":"Sqj9Cl","timepicker-input":"uV9iei","timepickerInput":"uV9iei","ltr-always":"HBEWuo","ltrAlways":"HBEWuo"};
+var css$Y = {"root":"_6Hn-lr","timepicker-input":"u6uKrB","timepickerInput":"u6uKrB","ltr-always":"rEXUhQ","ltrAlways":"rEXUhQ"};
 
 const uuiTimePicker = {
     container: 'uui-timepicker-container',
@@ -2505,7 +1950,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, 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 || '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 }));
     };
     const renderBody = (bodyProps) => {
         const { forwardedRef, onValueChange, ...timePickerBodyProps } = props;
@@ -2515,7 +1960,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":"_2uWyMG"};
+var css$X = {"root":"myjuUj"};
 
 function applyInputAddonMods() {
     return [
@@ -2524,29 +1969,43 @@ function applyInputAddonMods() {
 }
 const InputAddon = /* @__PURE__ */withMods(InputAddon$1, applyInputAddonMods);
 
-var css$W = {"root":"SVa3Tz"};
+var css$W = {"root":"e-7MGJ"};
 
 function applySliderMods() {
     return [css$W.root, 'uui-color-neutral'];
 }
 const Slider = /* @__PURE__ */withMods(Slider$1, applySliderMods);
 
-var css$V = {"root":"fgUwnB","tooltip":"lAqLO5"};
+var _path$t;
+function _extends$t() { return _extends$t = 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$t.apply(null, arguments); }
+var SvgStarFilled = function SvgStarFilled(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$t({
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    ref: ref
+  }, props), _path$t || (_path$t = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M8.917 8.268 12.01 2l3.093 6.268 6.917 1.005-5.005 4.878 1.182 6.889-6.187-3.252-6.186 3.252 1.181-6.889L2 9.273z"
+  })));
+};
+var ForwardRef$t = /*#__PURE__*/forwardRef(SvgStarFilled);
+
+var css$V = {"root":"HXEl4-","tooltip":"_1EnEDH"};
 
 function applyRatingMods(mods) {
     return [
         css$V.root,
-        `uui-size-${mods.size || settings.rating.sizes.default}`,
+        `uui-size-${mods.size || settings.sizes.defaults.rating}`,
     ];
 }
 const Rating = /* @__PURE__ */withMods(uuiComponents.Rating, applyRatingMods, (props) => ({
-    filledStarIcon: props.icon || settings.rating.icons.filledRatingIcon,
-    emptyStarIcon: props.icon || settings.rating.icons.emptyRatingIcon,
+    filledStarIcon: props.icon || ForwardRef$t,
+    emptyStarIcon: props.icon || ForwardRef$t,
     Tooltip,
 }));
 
-var css$U = {"root":"GX-a6M","container":"_32F36q"};
-
 const defaultFormat = 'MMM D, YYYY';
 const valueFormat = 'YYYY-MM-DD';
 const supportedDateFormats = (format) => {
@@ -2674,6 +2133,8 @@ const getNextYearsList = (currentDate) => {
     return currentDate.add(16, 'year');
 };
 
+var css$U = {"root":"_4ypA5X","container":"N7dFbL"};
+
 const uuiHeader = {
     container: 'uui-datepicker-header-container',
     headerNav: 'uui-datepicker-header-nav',
@@ -2751,19 +2212,19 @@ function DatePickerHeader({ navIconLeft, navIconRight, value: { month, view }, o
     const disableNext = view === 'YEAR_SELECTION' && !isYearWithinSoberRange(getNextYearsList(month));
     return (React.createElement("div", { className: cx(css$U.root, uuiHeader.container, cx) },
         React.createElement("header", { className: uuiHeader.headerNav },
-            React.createElement(Button, { icon: navIconLeft || settings.datePicker.icons.body.prevIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconLeft, onClick: !isDisabled && (() => onLeftNavigationArrow()), isDisabled: disablePrev }),
+            React.createElement(Button, { icon: navIconLeft || ForwardRef$w, color: "secondary", fill: "ghost", cx: uuiHeader.navIconLeft, onClick: !isDisabled && (() => onLeftNavigationArrow()), isDisabled: disablePrev }),
             React.createElement(Button, { caption: title, fill: "ghost", cx: uuiHeader.navTitle, onClick: !isDisabled && (() => onCaptionClick(view)) }),
-            React.createElement(Button, { icon: navIconRight || settings.datePicker.icons.body.nextIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
+            React.createElement(Button, { icon: navIconRight || ForwardRef$v, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
 }
 
-var css$T = {"root":"PjIbYF"};
+var css$T = {"root":"e5YrEL"};
 
 function applyDateSelectionMods() {
-    return [css$T.root, `uui-size-${settings.datePicker.sizes.body}`];
+    return [css$T.root, `uui-size-${settings.sizes.defaults.datePicker}`];
 }
 const Calendar = /* @__PURE__ */withMods(Calendar$1, applyDateSelectionMods);
 
-var css$S = {"root":"UdBjKm"};
+var css$S = {"root":"_9uVXrx"};
 
 const uuiDatePickerBody = {
     wrapper: 'uui-datepicker-body-wrapper',
@@ -2806,7 +2267,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.body}`, classes), ...rawProps },
+    return (React__default.createElement("div", { ref: ref, className: cx$1(uuiDatePickerBodyBase.container, `uui-size-${settings.sizes.defaults.datePicker}`, classes), ...rawProps },
         React__default.createElement("div", { className: cx$1(css$S.root, uuiDatePickerBody.wrapper) },
             React__default.createElement(DatePickerHeader, { value: {
                     view,
@@ -2824,7 +2285,7 @@ const modifiers$1 = [{
         options: { offset: [0, 6] },
     }];
 function DatePickerComponent(props, ref) {
-    const { format = defaultFormat, value, size = settings.datePicker.sizes.input } = props;
+    const { format = defaultFormat, value, size = settings.sizes.defaults.datePicker } = props;
     const context = useUuiContext();
     const [inputValue, setInputValue] = useState(toCustomDateFormat(value, format));
     const [isBodyOpen, setBodyIsOpen] = useState(false);
@@ -2864,7 +2325,7 @@ function DatePickerComponent(props, ref) {
     };
     const renderInput = (renderProps) => {
         const allowClear = !props.disableClear && !!inputValue;
-        return (React__default.createElement(TextInput, { ...renderProps, isDropdown: false, cx: cx$1(props.inputCx, isBodyOpen && uuiMod.focus), icon: props.mode !== EditMode.CELL ? settings.datePicker.icons.input.calendarIcon : undefined, iconPosition: props.iconPosition || 'left', placeholder: props.placeholder ? props.placeholder : format, size: size, value: inputValue || undefined, onValueChange: (v) => {
+        return (React__default.createElement(TextInput, { ...renderProps, isDropdown: false, cx: cx$1(props.inputCx, isBodyOpen && uuiMod.focus), icon: props.mode !== EditMode.CELL && systemIcons.calendar ? systemIcons.calendar : undefined, iconPosition: props.iconPosition || 'left', placeholder: props.placeholder ? props.placeholder : format, size: size, value: inputValue || undefined, onValueChange: (v) => {
                 setInputValue(v || '');
             }, onCancel: allowClear ? () => {
                 if (!props.disableClear && !!inputValue) {
@@ -2889,7 +2350,7 @@ function DatePickerComponent(props, ref) {
 }
 const DatePicker = /* @__PURE__ */React__default.forwardRef(DatePickerComponent);
 
-var css$R = {"date-input":"DURnM8","dateInput":"DURnM8","root":"R-qh-Q","separator":"BndbGF","mode-form":"D5wLo8","modeForm":"D5wLo8","mode-cell":"nXx-Ek","modeCell":"nXx-Ek"};
+var css$R = {"date-input":"dH4gVV","dateInput":"dH4gVV","root":"neyXnD","separator":"_3X9vC5","mode-form":"_4qNoZE","modeForm":"_4qNoZE","mode-cell":"UQA4Uy","modeCell":"UQA4Uy"};
 
 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));
@@ -2932,15 +2393,15 @@ const RangeDatePickerInput = /* @__PURE__ */forwardRef(({ isDisabled, isInvalid,
     const clearAllowed = !disableClear && inputValue.from && inputValue.to;
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    React__default.createElement("div", { ref: ref, className: cx$1(`uui-size-${size || settings.rangeDatePicker.sizes.default}`, 'uui-range-date-picker', classes, css$R.root, isDisabled && uuiMod.disabled, isReadonly && uuiMod.readonly, isInvalid && uuiMod.invalid, inFocus && uuiMod.focus), onKeyDown: onKeyDown },
-        React__default.createElement(TextInput, { icon: settings.rangeDatePicker.icons.input.calendarIcon, cx: cx$1(css$R.dateInput, inFocus === 'from' && uuiMod.focus), size: size || settings.rangeDatePicker.sizes.default, placeholder: getPlaceholder ? getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: inputValue.from || undefined, onValueChange: (v) => onInputChange(v || '', 'from'), onFocus: (event) => handleFocus(event, 'from'), onBlur: (event) => handleBlur(event, 'from'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.from, onClick: onClick, onKeyDown: onInputKeyDown, id: id }),
+    React__default.createElement("div", { ref: ref, className: cx$1(`uui-size-${size || settings.sizes.defaults.rangeDatePicker}`, 'uui-range-date-picker', classes, css$R.root, isDisabled && uuiMod.disabled, isReadonly && uuiMod.readonly, isInvalid && uuiMod.invalid, inFocus && uuiMod.focus), onKeyDown: onKeyDown },
+        React__default.createElement(TextInput, { icon: systemIcons.calendar, cx: cx$1(css$R.dateInput, inFocus === 'from' && uuiMod.focus), size: size || settings.sizes.defaults.rangeDatePicker, placeholder: getPlaceholder ? getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: inputValue.from || undefined, onValueChange: (v) => onInputChange(v || '', 'from'), onFocus: (event) => handleFocus(event, 'from'), onBlur: (event) => handleBlur(event, 'from'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.from, onClick: onClick, onKeyDown: onInputKeyDown, id: id }),
         React__default.createElement("div", { className: css$R.separator }),
-        React__default.createElement(TextInput, { cx: cx$1(css$R.dateInput, inFocus === 'to' && uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.rangeDatePicker.sizes.default, value: inputValue.to || undefined, onCancel: clearAllowed ? () => {
+        React__default.createElement(TextInput, { cx: cx$1(css$R.dateInput, inFocus === 'to' && uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.sizes.defaults.rangeDatePicker, value: inputValue.to || undefined, onCancel: clearAllowed ? () => {
                 onValueChange(defaultRangeValue);
             } : undefined, onValueChange: (v) => onInputChange(v || '', 'to'), onFocus: (e) => handleFocus(e, 'to'), onBlur: (e) => handleBlur(e, 'to'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.to, onClick: onClick, onKeyDown: onInputKeyDown })));
 });
 
-var css$Q = {"root":"lrl0-E"};
+var css$Q = {"root":"zMRxgH"};
 
 const uuiPresets = {
     container: 'uui-presets-container',
@@ -2957,10 +2418,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: settings.rangeDatePicker.sizes.preset })))));
+        getPresets(props.presets).map((item) => (React.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: "24" })))));
 }
 
-var css$P = {"root":"BGSCF7","container":"yt4Idw","day-selection":"tVEJ5p","daySelection":"tVEJ5p","from-picker":"qnW9bd","fromPicker":"qnW9bd","to-picker":"_7-dzjU","toPicker":"_7-dzjU","bodes-wrapper":"_1D0ExM","bodesWrapper":"_1D0ExM","blocker":"fA6u3k"};
+var css$P = {"root":"XClPqD","container":"DXc3kH","day-selection":"H-8t1O","daySelection":"H-8t1O","from-picker":"TjrvVl","fromPicker":"TjrvVl","to-picker":"MEo-Ze","toPicker":"MEo-Ze","bodes-wrapper":"BUuU4W","bodesWrapper":"BUuU4W","blocker":"_1-bM21"};
 
 const uuiRangeDatePickerBody = {
     inRange: 'uui-range-datepicker-in-range',
@@ -3135,14 +2596,14 @@ 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":"oidfRs","dropdownContainer":"oidfRs"};
+var css$O = {"dropdown-container":"GHL5ok","dropdownContainer":"GHL5ok"};
 
 const modifiers = [{
         name: 'offset',
         options: { offset: [0, 6] },
     }];
 function RangeDatePickerComponent(props, ref) {
-    const { value: _value, format = defaultFormat, size = settings.rangeDatePicker.sizes.default } = props;
+    const { value: _value, format = defaultFormat, size = settings.sizes.defaults.rangeDatePicker } = props;
     const value = _value || defaultRangeValue; // also handles null in comparison to default value
     const context = useUuiContext();
     const [isOpen, setIsOpen] = useState(false);
@@ -3203,7 +2664,7 @@ function RangeDatePickerComponent(props, ref) {
 }
 const RangeDatePicker = /* @__PURE__ */React__default.forwardRef(RangeDatePickerComponent);
 
-var css$N = {"root":"zc0M0J","blocker":"-bo9Zv","marker":"tz7dP6","top":"bMkxz8","bottom":"_84nrEU","left":"_70gZ8A","right":"jd006S","inside":"NL36P1"};
+var css$N = {"root":"_5yiDsR","blocker":"sgn9Xa","marker":"fQ8q-G","top":"-lQHdP","bottom":"_3Y606X","left":"HSDxed","right":"_58AYsU","inside":"nqm8Df"};
 
 function DropMarker(props) {
     return props.isDndInProgress
@@ -3218,13 +2679,13 @@ function DropMarker(props) {
         : null;
 }
 
-var css$M = {"root":"IWoGEJ","line-height":"lpJ321","lineHeight":"lpJ321","font-size":"L6IZn6","fontSize":"L6IZn6"};
+var css$M = {"root":"Zl7Ux5","line-height":"RsQtVA","lineHeight":"RsQtVA","font-size":"_44skul","fontSize":"_44skul"};
 
 function applyTextMods(mods) {
     return [
         css$M.root,
         'uui-text',
-        `uui-size-${mods.size || settings.text.sizes.default}`,
+        `uui-size-${mods.size || settings.sizes.defaults.text}`,
         (mods.size !== 'none' || mods.lineHeight) && css$M.lineHeight,
         (mods.size !== 'none' || mods.fontSize) && css$M.fontSize,
         `uui-color-${mods.color || 'primary'}`,
@@ -3245,7 +2706,7 @@ const Text = /* @__PURE__ */withMods(uuiComponents.Text, applyTextMods, (props)
     };
 });
 
-var css$L = {"root":"VvXIiX","loading-word":"Qfq928","loadingWord":"Qfq928","animated-loading":"GVtB4u","animatedLoading":"GVtB4u","skeleton_loading":"tnteZP","skeletonLoading":"tnteZP"};
+var css$L = {"root":"KhCAsw","loading-word":"WlCzEg","loadingWord":"WlCzEg","animated-loading":"K-JiKe","animatedLoading":"K-JiKe","skeleton_loading":"_25l87O","skeletonLoading":"_25l87O"};
 
 const TextPlaceholder = (props) => {
     const pattern = '&nbsp;';
@@ -3262,16 +2723,16 @@ const TextPlaceholder = (props) => {
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
-const RichTextView = /* @__PURE__ */withMods(uuiComponents.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || settings.richTextView.sizes.default}`]);
+const RichTextView = /* @__PURE__ */withMods(uuiComponents.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || settings.sizes.defaults.richTextView}`]);
 
-var css$K = {"modal":"xBnXGY","search-wrapper":"Ve6pkd","searchWrapper":"Ve6pkd","no-data":"PiXmYh","noData":"PiXmYh","type-search-to-load-size-24":"_-8gi9q","typeSearchToLoadSize24":"_-8gi9q"};
+var css$K = {"modal":"n8vGj1","search-wrapper":"OhLspV","searchWrapper":"OhLspV","no-data":"gHwm-T","noData":"gHwm-T","type-search-to-load-size-24":"zYWjFU","typeSearchToLoadSize24":"zYWjFU"};
 
 class DataPickerBody extends PickerBodyBase {
     constructor() {
         super(...arguments);
         this.lens = Lens.onEditableComponent(this);
         this.searchLens = this.lens.prop('search').default('');
-        this.getSearchSize = () => (isMobile() ? settings.pickerInput.sizes.body.mobileSearchInput : this.props.searchSize);
+        this.getSearchSize = () => (isMobile() ? settings.sizes.pickerInput.body.mobile.searchInput : this.props.searchSize);
     }
     renderEmpty() {
         const search = this.searchLens.get();
@@ -3305,7 +2766,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: cx$1(css$K.searchWrapper, 'uui-picker_input-body-search') },
+            this.showSearch() && (React__default.createElement("div", { key: "search", className: css$K.searchWrapper },
                 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
@@ -3315,11 +2776,11 @@ class DataPickerBody extends PickerBodyBase {
     }
 }
 
-var css$J = {"footer":"OqB-vX"};
+var css$J = {"footer":"e-K07I"};
 
 function DataPickerFooterImpl(props) {
     const { search, clearSelection, view, showSelected, selectionMode, isSearchTooShort, } = props;
-    const size = isMobile() ? settings.pickerInput.sizes.body.mobileFooterLinkButton : props.size;
+    const size = isMobile() ? settings.sizes.pickerInput.body.mobile.footer.linkButton : props.size;
     const hasSelection = view.getSelectedRowsCount() > 0;
     const rowsCount = view.getListProps().rowsCount;
     const isSinglePicker = selectionMode === 'single';
@@ -3331,7 +2792,7 @@ function DataPickerFooterImpl(props) {
     const showClear = !props.disableClear && (isSinglePicker ? true : (!view.selectAll || hasSelection));
     return !hideFooter && (React__default.createElement(FlexRow, { cx: css$J.footer },
         !isSinglePicker && !isSearchTooShort && ( // Show this switch only for multi mode and when some rows rendered
-        React__default.createElement(Switch, { size: settings.pickerInput.sizes.body.footerSwitchMap[props.size], value: showSelected.value, isDisabled: !hasSelection, onValueChange: showSelected.onValueChange, label: i18n.pickerInput.showOnlySelectedLabel })),
+        React__default.createElement(Switch, { size: settings.sizes.pickerInput.body.dropdown.footer.switch[props.size], value: showSelected.value, isDisabled: !hasSelection, onValueChange: showSelected.onValueChange, label: i18n.pickerInput.showOnlySelectedLabel })),
         React__default.createElement(FlexSpacer, null),
         React__default.createElement(FlexCell, { width: "auto", alignSelf: "center" },
             view.selectAll && !hasSelection && (React__default.createElement(LinkButton, { key: "SelectAll/ClearAll" // We use the same key for these buttons, because we need to leave focus on it after click, so we need to react doesn't remount it.
@@ -3341,17 +2802,32 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = /* @__PURE__ */React__default.memo(DataPickerFooterImpl);
 
-var css$I = {"header":"qge2Qe","title":"lxuETQ","close":"ujyJge"};
+var css$I = {"header":"AvnO9I","title":"sPzeaz","close":"n0VTEH"};
 
 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, '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 })));
+    return (React__default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: css$I.header },
+        React__default.createElement(Text, { size: settings.sizes.pickerInput.body.mobile.header.titleSize, cx: css$I.title }, title),
+        React__default.createElement(IconButton, { icon: ForwardRef$R, onClick: () => props.close?.(), cx: css$I.close })));
 };
 const DataPickerHeader = /* @__PURE__ */React__default.memo(DataPickerHeaderImpl);
 
-var css$H = {"root":"_0Ax7m-","align-widgets-top":"jZZyFE","alignWidgetsTop":"jZZyFE","align-widgets-center":"jaLlpZ","alignWidgetsCenter":"jaLlpZ","icon-container":"UBv39O","iconContainer":"UBv39O","loading-cell":"_8g8Mdz","loadingCell":"_8g8Mdz","content-wrapper":"J8YC07","contentWrapper":"J8YC07","render-item":"BMmAvB","renderItem":"BMmAvB","icon-wrapper":"ROo9vq","iconWrapper":"ROo9vq","icon-default":"_02ehah","iconDefault":"_02ehah","selected-mark":"_84nLGl","selectedMark":"_84nLGl"};
+var _path$s;
+function _extends$s() { return _extends$s = 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$s.apply(null, arguments); }
+var SvgNotificationDoneFill = function SvgNotificationDoneFill(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$s({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
+    d: "m2 12 3.077-3.2 4.615 4.8L18.923 4 22 7.2 9.692 20 2 12z"
+  })));
+};
+var ForwardRef$s = /*#__PURE__*/forwardRef(SvgNotificationDoneFill);
+
+var css$H = {"root":"nKLrRT","align-widgets-top":"txq341","alignWidgetsTop":"txq341","align-widgets-center":"eK8pfv","alignWidgetsCenter":"eK8pfv","icon-container":"fyNjQn","iconContainer":"fyNjQn","loading-cell":"RHcDAE","loadingCell":"RHcDAE","content-wrapper":"HxQFPQ","contentWrapper":"HxQFPQ","render-item":"c8DwSP","renderItem":"c8DwSP","icon-wrapper":"CzaRce","iconWrapper":"CzaRce","icon-default":"e8li5c","iconDefault":"e8li5c","selected-mark":"LY-FnE","selectedMark":"LY-FnE"};
 
 function DataPickerCell(props) {
     const ref = React.useRef();
@@ -3359,21 +2835,18 @@ 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: props.size, cx: css$H.loadingCell },
+        React.createElement(Text, { key: "t", size: settings.sizes.pickerInput.body.dropdown.row.cell.text[props.size], cx: css$H.loadingCell },
             React.createElement(TextPlaceholder, null)));
     }
     else if (props.rowProps.isUnknown) {
-        content = (React.createElement(Text, { key: "t", size: props.size }, "Unknown"));
+        content = (React.createElement(Text, { key: "t", size: settings.sizes.pickerInput.body.dropdown.row.cell.text[props.size] }, "Unknown"));
     }
     else {
-        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, '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
+            (props.rowProps.isChildrenSelected || props.rowProps.isSelected) && (React.createElement("div", { className: cx$1(css$H.iconWrapper, uuiMod.selected) },
+                React.createElement(IconContainer, { size: settings.sizes.pickerInput.body.dropdown.row.cell.icon[props.size], icon: settings.sizes.pickerInput.body.dropdown.row.cell.isBoldSelectionIcon[props.size] ? ForwardRef$s : ForwardRef$P, cx: props.rowProps.isChildrenSelected ? css$H.iconDefault : css$H.selectedMark, rawProps: { 'aria-label': props.rowProps.isChildrenSelected
                             ? 'Child is selected'
                             : 'Selected' } })))));
     }
@@ -3381,32 +2854,31 @@ 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-horizontal-padding': `${props.padding}px`,
+            '--uui-data_picker_cell-horizontal-padding': `${props.padding}px`,
         } },
         React.createElement(DataRowAddons, { size: props.size, ...props, tabIndex: -1 }),
         getWrappedContent()));
 }
 
-var css$G = {"picker-row":"_-7yLBq","pickerRow":"_-7yLBq"};
+var css$G = {"picker-row":"KBS1EC","pickerRow":"KBS1EC"};
 
 class DataPickerRow extends React.Component {
     constructor() {
         super(...arguments);
         this.renderContent = () => {
-            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 }));
+            return (React.createElement(DataPickerCell, { key: "name", size: this.props.size || settings.sizes.pickerInput.body.dropdown.row.default, padding: this.props.padding || settings.sizes.pickerInput.body.dropdown.row.cell.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, 'uui-picker_input-row', this.props.cx], renderContent: this.renderContent }));
+        return (React.createElement(DataPickerRow$1, { ...this.props, cx: [css$G.pickerRow, this.props.cx], renderContent: this.renderContent }));
     }
 }
 
-var css$F = {"done":"_5sMTvQ","container":"srxWmv"};
+var css$F = {"done":"IekJsd","container":"Rcq7v3"};
 
 const PickerBodyMobileView = (props) => {
     const isMobileView = isMobile();
@@ -3415,8 +2887,32 @@ const PickerBodyMobileView = (props) => {
     return (React__default.createElement(DropdownContainer, { ...props, maxWidth: maxWidth, maxHeight: maxHeight, cx: [css$F.container, props.cx], autoFocus: true },
         isMobileView && React__default.createElement(DataPickerHeader, { title: props.title, close: props.onClose }),
         props.children,
-        isMobileView && (React__default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => props.onClose?.(), cx: css$F.done, size: settings.pickerInput.sizes.body.mobileFooterLinkButton }))));
+        isMobileView && React__default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => props.onClose?.(), cx: css$F.done, size: settings.sizes.pickerInput.body.mobile.footer.linkButton })));
+};
+
+var _path$r, _path2$4;
+function _extends$r() { return _extends$r = 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$r.apply(null, arguments); }
+var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$r({
+    width: 66,
+    height: 67,
+    viewBox: "0 0 66 67",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ref: ref
+  }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
+    d: "M0 33.5C0 15.275 14.775.5 33 .5s33 14.775 33 33-14.775 33-33 33-33-14.775-33-33Z",
+    fill: "#EBEDF5"
+  })), _path2$4 || (_path2$4 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "m42.31 40.335 7.165 7.165L47 49.975l-7.165-7.165a13.94 13.94 0 0 1-8.585 2.94c-7.732 0-14-6.268-14-14s6.268-14 14-14 14 6.268 14 14a13.94 13.94 0 0 1-2.94 8.585ZM31.25 42.25c5.799 0 10.5-4.701 10.5-10.5s-4.701-10.5-10.5-10.5-10.5 4.701-10.5 10.5 4.701 10.5 10.5 10.5Z",
+    fill: "#6C6F80"
+  })));
 };
+var ForwardRef$r = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
+
+var css$E = {"sub-header-wrapper":"AS2n5F","subHeaderWrapper":"AS2n5F","switch":"_9gGPnt","no-found-modal-container":"lREtGV","noFoundModalContainer":"lREtGV","no-found-modal-container-icon":"JV9rT6","noFoundModalContainerIcon":"JV9rT6","no-found-modal-container-text":"Jt0R6a","noFoundModalContainerText":"Jt0R6a"};
 
 const mergeHighlightRanges = (ranges) => {
     const mergedRanges = [];
@@ -3483,29 +2979,27 @@ const getHighlightedSearchMatches = (str, search) => {
     return getDecoratedText(str, ranges);
 };
 
-var css$E = {"root":"I5sj1P","column-gap":"SWgiqg","columnGap":"SWgiqg","title":"LaN2Pn","subtitle":"BfZ-nV","disabled":"QPg4KD","multiline":"_0VdjFT"};
+var css$D = {"root":"-i2COf","column-gap":"Y-K4tS","columnGap":"Y-K4tS","multiline":"ySpF-g","text":"DBa0dX"};
 
 function PickerItem(props) {
-    const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, } = props;
-    const itemSize = size || settings.pickerInput.sizes.body.row;
+    const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, cx, } = props;
+    const itemSize = size || settings.sizes.pickerInput.body.dropdown.row.cell.item.default;
     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-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) })),
+    return (React.createElement(FlexCell, { width: "auto", cx: [css$D.root, 'uui-typography', cx] },
+        React.createElement(FlexRow, { size: itemSize, cx: [isMultiline && css$D.multiline, css$D.columnGap], rawProps: { style: { '--uui-picker_item-vertical-padding': `${settings.sizes.pickerInput.body.dropdown.row.cell.item.verticalPadding[itemSize]}px` } } },
+            avatarUrl && (React.createElement(Avatar, { isLoading: isLoading, img: avatarUrl, size: getAvatarSize(itemSize, isMultiline).toString() })),
             icon && React.createElement(IconContainer, { icon: icon }),
             React.createElement(FlexCell, { width: "auto" },
-                title && (React.createElement("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))))));
+                title && (React.createElement(Text, { size: itemSize, cx: css$D.text, color: isDisabled ? 'disabled' : 'primary' }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : title)),
+                subtitle && (React.createElement(Text, { size: itemSize, color: isDisabled ? 'disabled' : 'secondary', cx: css$D.text }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : subtitle))))));
 }
 function getAvatarSize(size, isMultiline) {
-    return settings.pickerInput.sizes.body[isMultiline ? 'itemAvatarMultilineMap' : 'itemAvatarMap'][size];
+    return settings.sizes.pickerInput.body.dropdown.row.cell.item.avatar[isMultiline ? 'multiline' : 'rest'][size];
 }
 
-var css$D = {"sub-header-wrapper":"gLSs7P","subHeaderWrapper":"gLSs7P","switch":"zIAB3-","no-found-modal-container":"_3p7Zmr","noFoundModalContainer":"_3p7Zmr","no-found-modal-container-icon":"-z6qsU","noFoundModalContainerIcon":"-z6qsU","no-found-modal-container-text":"BhrbAM","noFoundModalContainerText":"BhrbAM"};
-
 function PickerModal(props) {
     const { view, selection, dataSourceStateLens, dataSourceState, getDataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = usePickerModal(props);
     const getSubtitle = ({ path }, { search }) => {
@@ -3518,10 +3012,10 @@ function PickerModal(props) {
     };
     const renderItem = (item, rowProps, dsState) => {
         const { flattenSearchResults } = view.getConfig();
-        return (React__default.createElement(PickerItem, { title: getName(item), dataSourceState: dsState, ...(flattenSearchResults ? { subtitle: getSubtitle(rowProps, dataSourceState) } : {}), ...rowProps }));
+        return (React__default.createElement(PickerItem, { title: getName(item), size: "36", 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", renderItem: (item, itemProps) => renderItem(item, itemProps, dataSourceState) }));
+        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) }));
     };
     const renderFooter = () => {
         const hasSelection = view.getSelectedRowsCount() > 0;
@@ -3534,17 +3028,17 @@ function PickerModal(props) {
             React__default.createElement(Button, { color: "primary", caption: i18n.pickerModal.selectButton, onClick: () => props.success(selection) })));
     };
     const renderNotFound = () => {
-        return props.renderNotFound ? (props.renderNotFound({ search: dataSourceState.search, onClose: () => props.success(null) })) : (React__default.createElement("div", { className: css$D.noFoundModalContainer },
-            React__default.createElement(IconContainer, { cx: css$D.noFoundModalContainerIcon, icon: settings.pickerInput.icons.body.modalNotFoundSearchIcon }),
-            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)));
+        return props.renderNotFound ? (props.renderNotFound({ search: dataSourceState.search, onClose: () => props.success(null) })) : (React__default.createElement("div", { className: css$E.noFoundModalContainer },
+            React__default.createElement(IconContainer, { cx: css$E.noFoundModalContainerIcon, icon: ForwardRef$r }),
+            React__default.createElement(Text, { cx: css$E.noFoundModalContainerText, fontWeight: "600", fontSize: "16", lineHeight: "24", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsMessage),
+            React__default.createElement(Text, { cx: css$E.noFoundModalContainerText, fontSize: "12", lineHeight: "18", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsSubTitle)));
     };
     const dataRows = getRows();
     const rows = dataRows.map((row) => renderRow(row));
     return (React__default.createElement(ModalBlocker, { ...props },
         React__default.createElement(ModalWindow, { width: 600, height: 700 },
             React__default.createElement(ModalHeader, { title: props.caption || i18n.pickerModal.headerTitle, onClose: () => props.abort() }),
-            React__default.createElement(FlexCell, { cx: css$D.subHeaderWrapper },
+            React__default.createElement(FlexCell, { cx: css$E.subHeaderWrapper },
                 React__default.createElement(FlexRow, { vPadding: "24" },
                     React__default.createElement(SearchInput, { ...dataSourceStateLens.prop('search').toProps(), onKeyDown: (e) => handleDataSourceKeyboard({
                             value: getDataSourceState(),
@@ -3553,19 +3047,19 @@ 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: settings.pickerInput.sizes.body.footerSwitchMap[settings.pickerInput.sizes.body.row], ...getFooterProps().showSelected, isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" })),
+                !isSingleSelect() && (React__default.createElement(Switch, { cx: css$E.switch, size: "18", ...getFooterProps().showSelected, isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" })),
                 props.renderFilter && React__default.createElement(FlexCell, { grow: 2 }, props.renderFilter(dataSourceStateLens.prop('filter').toProps()))),
             React__default.createElement(DataPickerBody, { ...getListProps(), value: getDataSourceState(), onValueChange: handleDataSourceValueChange, search: dataSourceStateLens.prop('search').toProps(), showSearch: false, rows: rows, renderNotFound: renderNotFound, editMode: "modal" }),
-            React__default.createElement(ModalFooter, null, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
+            React__default.createElement(ModalFooter, { padding: "24", vPadding: "24" }, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$C = {"tooltip":"ftnP7b"};
+var css$C = {"tooltip":"BOQQ3r"};
 
 const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     const tagProps = {
         ...props,
         tabIndex: -1,
-        size: settings.pickerInput.sizes.toggler.tagMap[props.size],
+        size: settings.sizes.pickerInput.toggler.tag[props.size],
         caption: props.rowProps?.isLoading ? React.createElement(TextPlaceholder, null) : props.caption,
     };
     if (props.isCollapsed) {
@@ -3578,26 +3072,26 @@ const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     }
 });
 
-var css$B = {"root":"VkXKZY","mode-form":"TDjzHH","modeForm":"TDjzHH","mode-cell":"RMf-90","modeCell":"RMf-90","mode-inline":"OyqFsL","modeInline":"OyqFsL"};
+var css$B = {"root":"P7wOy2","mode-form":"KwYUq0","modeForm":"KwYUq0","mode-cell":"CJ7owm","modeCell":"CJ7owm","mode-inline":"_9pji1F","modeInline":"_9pji1F"};
 
 const defaultMode = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
     return [
         css$B.root,
         'uui-picker_toggler',
-        `uui-size-${mods.size || settings.pickerInput.sizes.toggler.default}`,
+        `uui-size-${mods.size || settings.sizes.pickerInput.toggler.defaults.size}`,
         css$B['mode-' + (mods.mode || defaultMode)],
     ];
 }
 function PickerTogglerComponent(props, ref) {
     const renderItem = (itemProps) => {
-        const itemPropsWithSize = { ...itemProps, size: props.size || settings.pickerInput.sizes.toggler.tag };
+        const itemPropsWithSize = { ...itemProps, size: (props.size || settings.sizes.pickerInput.toggler.defaults.tag) };
         if (!!props.renderItem) {
             return props.renderItem(itemPropsWithSize);
         }
         return (React.createElement(PickerTogglerTag, { ...itemPropsWithSize, getName: props.getName }));
     };
-    return (React.createElement(PickerToggler$1, { ...props, ref: ref, cx: [applyPickerTogglerMods(props), props.cx], renderItem: renderItem, getName: props.getName, cancelIcon: settings.pickerInput.icons.toggler.clearIcon, dropdownIcon: settings.pickerInput.icons.toggler.dropdownIcon }));
+    return (React.createElement(PickerToggler$1, { ...props, ref: ref, cx: [applyPickerTogglerMods(props), props.cx], renderItem: renderItem, getName: props.getName, cancelIcon: systemIcons.clear, dropdownIcon: systemIcons.foldingArrow }));
 }
 const PickerToggler = /* @__PURE__ */React.forwardRef(PickerTogglerComponent);
 
@@ -3637,15 +3131,15 @@ function PickerInputComponent({ highlightSearchMatches = true, ...props }, ref)
     };
     const renderFooter = () => {
         const footerProps = getFooterProps();
-        return props.renderFooter
-            ? props.renderFooter(footerProps)
-            : React__default.createElement(DataPickerFooter, { ...footerProps, size: props.size || settings.pickerInput.sizes.body.row });
+        return props.renderFooter ? props.renderFooter(footerProps) : React__default.createElement(DataPickerFooter, { ...footerProps, size: props.size });
     };
     const getRowSize = () => {
         if (isMobile()) {
-            return settings.pickerInput.sizes.body.mobileRow;
+            return settings.sizes.pickerInput.body.mobile.row;
         }
-        return props.size || settings.pickerInput.sizes.body.row;
+        return props.editMode === 'modal'
+            ? settings.sizes.pickerInput.body.modal.row
+            : (props.size || settings.sizes.pickerInput.body.dropdown.row.default);
     };
     const getSubtitle = ({ path }, { search }) => {
         if (!search)
@@ -3660,13 +3154,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 === 'dropdown' ? settings.pickerInput.sizes.body.padding : undefined, 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 === 'modal' ? settings.sizes.pickerInput.body.modal.padding : settings.sizes.pickerInput.body.dropdown.padding), 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, 'uui-picker_input-body-wrapper'], onKeyDown: bodyProps.onKeyDown, width: bodyProps.togglerWidth > minBodyWidth ? bodyProps.togglerWidth : minBodyWidth, focusLock: getSearchPosition() === 'body' },
+        const bodyHeight = isMobile() ? document.documentElement.clientHeight : props.dropdownHeight || settings.sizes.pickerInput.body.dropdown.height;
+        const minBodyWidth = props.minBodyWidth || settings.sizes.pickerInput.body.dropdown.width;
+        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' },
             React__default.createElement(DataPickerBody, { ...bodyProps, rows: renderedDataRows, maxHeight: bodyHeight, searchSize: props.size, editMode: "dropdown", selectionMode: props.selectionMode }),
             renderFooter()));
     };
@@ -3679,9 +3173,9 @@ function PickerInputComponent({ highlightSearchMatches = true, ...props }, ref)
 }
 const PickerInput = /* @__PURE__ */React__default.forwardRef(PickerInputComponent);
 
-var css$A = {"row":"OK2Ict"};
+var css$A = {"row":"Wc5NHy"};
 
-function PickerListItem(props) {
+function PickerListRow(props) {
     let label;
     if (props.isLoading) {
         label = React__default.createElement(TextPlaceholder, { wordsCount: 2 });
@@ -3699,12 +3193,12 @@ 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":"jDsUht"};
+var css$z = {"root":"pWxSdA"};
 
 function PickerList(props) {
-    const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, dataSourceState, getModalTogglerCaption, } = usePickerList(props);
-    const defaultRenderRow = (row) => {
-        return React__default.createElement(PickerListItem, { getName: (item) => getName(item), ...row, key: row.rowKey });
+    const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, getModalTogglerCaption, } = usePickerList(props);
+    const defaultListRenderRow = (row) => {
+        return React__default.createElement(PickerListRow, { getName: (item) => getName(item), ...row, key: row.rowKey });
     };
     const handleShowPicker = () => {
         context.uuiModals
@@ -3721,11 +3215,11 @@ function PickerList(props) {
     const rows = buildRowsList();
     const showPicker = viewProps.totalCount == null || viewProps.totalCount > getMaxDefaultItems();
     const renderToggler = props.renderModalToggler || defaultRenderToggler;
-    const renderRow = props.renderRow || defaultRenderRow;
+    const renderRow = props.renderListRow || defaultListRenderRow;
     return (React__default.createElement("div", { className: cx('uui-picker-list', css$z.root) },
         !rows.length
             && (props.noOptionsMessage || (React__default.createElement(Text, { color: "secondary", size: props.size }, "No options available"))),
-        rows.map((row) => renderRow({ ...row, isDisabled: props.isDisabled }, dataSourceState)),
+        rows.map((row) => renderRow({ ...row, isDisabled: props.isDisabled })),
         showPicker
             && renderToggler({
                 onClick: handleShowPicker,
@@ -3734,7 +3228,7 @@ function PickerList(props) {
             }, selectedRows)));
 }
 
-var css$y = {"root":"aIYzaw","wrapper":"gcUj4X","align-widgets-top":"fUyWNC","alignWidgetsTop":"fUyWNC","align-widgets-center":"k9LDZq","alignWidgetsCenter":"k9LDZq"};
+var css$y = {"root":"KPVU9N","wrapper":"PebLR2","align-widgets-top":"W-UlXF","alignWidgetsTop":"W-UlXF","align-widgets-center":"mmz4Ap","alignWidgetsCenter":"mmz4Ap"};
 
 function DataTableCell(initialProps) {
     const props = { ...initialProps };
@@ -3742,48 +3236,48 @@ function DataTableCell(initialProps) {
         props.addons = React.createElement(DataRowAddons, { size: props.size, ...props });
     }
     props.renderPlaceholder = props.renderPlaceholder
-        || (() => (React.createElement(Text, { key: "t", size: props.size },
+        || (() => (React.createElement(Text, { key: "t", size: settings.sizes.dataTable.body.row.cell.text[props.size] },
             React.createElement(TextPlaceholder, { isNotAnimated: true }))));
     props.renderUnknown = props.renderUnknown
-        || (() => (React.createElement(Text, { key: "t", size: props.size }, "Unknown")));
+        || (() => (React.createElement(Text, { key: "t", size: settings.sizes.dataTable.body.row.cell.text[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 'var(--uui-dt-cell-padding)';
+            return settings.sizes.dataTable.body.row.cell.defaults.padding;
         if (isEditable && !isLoading)
-            return '0px';
+            return '0';
         if (columnsGap)
-            return isFirstColumn ? `${columnsGap}px` : `${+columnsGap / 2}px`;
-        return `var(--uui-dt-cell-padding${isFirstColumn ? '-edge' : ''})`;
+            return isFirstColumn ? columnsGap : +columnsGap / 2;
+        return isFirstColumn ? settings.sizes.dataTable.body.row.cell.defaults.paddingEdge : settings.sizes.dataTable.body.row.cell.defaults.padding;
     };
     const getRightPadding = () => {
         const { rowProps: { isLoading }, columnsGap, isLastColumn } = props;
         if (isEditable && !isLoading)
-            return '0px';
+            return '0';
         if (columnsGap)
-            return isLastColumn ? `${columnsGap}px` : `${+columnsGap / 2}px`;
-        return `var(--uui-dt-cell-padding${isLastColumn ? '-edge' : ''})`;
+            return isLastColumn ? columnsGap : +columnsGap / 2;
+        return isLastColumn ? settings.sizes.dataTable.body.row.cell.defaults.paddingEdge : settings.sizes.dataTable.body.row.cell.defaults.padding;
     };
     props.cx = [
         'data-table-cell',
         css$y.root,
         props.cx,
-        'uui-size-' + (props.size || settings.dataTable.sizes.body.row),
+        'uui-size-' + (props.size || settings.sizes.dataTable.body.row.cell.defaults.size),
         props.isFirstColumn && 'uui-dt-first-column',
         props.isLastColumn && 'uui-dt-last-column',
         css$y[`align-widgets-${props.alignActions || 'top'}`],
         (props.border || isEditable) && 'uui-dt-vertical-cell-border',
     ];
     props.style = {
-        '--uui-dt-cell-padding-start': getLeftPadding(),
-        '--uui-dt-cell-padding-end': getRightPadding(),
+        '--uui-dt-cell-padding-start': `${getLeftPadding()}px`,
+        '--uui-dt-cell-padding-end': `${getRightPadding()}px`,
     };
     return React.createElement(DataTableCell$1, { ...props });
 }
 
-var css$x = {"root":"fXHeaf"};
+var css$x = {"root":"xQrb9K"};
 
 // 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.
@@ -3795,18 +3289,48 @@ 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.row}`,
+        css$x.root, 'uui-dt-vars', borderBottom && 'uui-dt-row-border', `uui-size-${size || settings.sizes.dataTable.body.row.default}`,
     ];
 }, () => propsMods);
 
-var css$w = {"sorting-panel-container":"jLlsQM","sortingPanelContainer":"jLlsQM"};
+var css$w = {"sorting-panel-container":"_1eDK5T","sortingPanelContainer":"_1eDK5T"};
+
+var _path$q;
+function _extends$q() { return _extends$q = 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$q.apply(null, arguments); }
+var SvgTableSortAscOutline = function SvgTableSortAscOutline(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$q({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$q || (_path$q = /*#__PURE__*/React.createElement("path", {
+    d: "M11 21V6.825L9.4 8.4 8 7l4-4 4 4-1.4 1.4L13 6.825V21h-2z"
+  })));
+};
+var ForwardRef$q = /*#__PURE__*/forwardRef(SvgTableSortAscOutline);
+
+var _path$p;
+function _extends$p() { return _extends$p = 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$p.apply(null, arguments); }
+var SvgTableSortDescOutline = function SvgTableSortDescOutline(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$p({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$p || (_path$p = /*#__PURE__*/React.createElement("path", {
+    d: "M13 3v14.175l1.6-1.575L16 17l-4 4-4-4 1.4-1.4 1.6 1.575V3h2z"
+  })));
+};
+var ForwardRef$p = /*#__PURE__*/forwardRef(SvgTableSortDescOutline);
 
 const SortingPanelImpl = ({ sortDirection, onSort }) => {
     const sortAsc = useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
     const sortDesc = useCallback(() => onSort(sortDirection === 'desc' ? undefined : 'desc'), [onSort]);
     return (React__default.createElement(FlexCell, { cx: cx$1(css$w.sortingPanelContainer, 'uui-dropdownMenu-body') },
-        React__default.createElement(DropdownMenuButton, { isActive: sortDirection === 'asc', caption: i18n.pickerFilterHeader.sortAscending, icon: settings.dataTable.icons.header.ascSortIcon, onClick: sortAsc }),
-        React__default.createElement(DropdownMenuButton, { isActive: sortDirection === 'desc', caption: i18n.pickerFilterHeader.sortDescending, icon: settings.dataTable.icons.header.descSortIcon, onClick: sortDesc })));
+        React__default.createElement(DropdownMenuButton, { isActive: sortDirection === 'asc', caption: i18n.pickerFilterHeader.sortAscending, icon: ForwardRef$q, onClick: sortAsc }),
+        React__default.createElement(DropdownMenuButton, { isActive: sortDirection === 'desc', caption: i18n.pickerFilterHeader.sortDescending, icon: ForwardRef$p, onClick: sortDesc })));
 };
 const SortingPanel = /* @__PURE__ */React__default.memo(SortingPanelImpl);
 
@@ -3824,7 +3348,82 @@ const ColumnHeaderDropdownImpl = (props) => {
 };
 const ColumnHeaderDropdown = /* @__PURE__ */React__default.memo(ColumnHeaderDropdownImpl);
 
-var css$v = {"root":"_8L1LS9","caption-wrapper":"J7QfJ1","captionWrapper":"J7QfJ1","sort-icon":"ZPiq2G","sortIcon":"ZPiq2G","dropdown-icon":"YIixne","dropdownIcon":"YIixne","infoIcon":"eTO-Lk","resizable":"TCsdTl","align-right":"cEHvdg","alignRight":"cEHvdg","align-center":"_-1Zqgv","alignCenter":"_-1Zqgv","caption":"HqbX-a","truncate":"_1RtLUE","upper-case":"Ye3NcQ","upperCase":"Ye3NcQ","checkbox":"CTIWSM","icon":"_2pJSGL","fold-all-icon":"_9saIAM","foldAllIcon":"_9saIAM","cell-tooltip":"HAKQFg","cellTooltip":"HAKQFg","resizing-marker":"e-tZ85","resizingMarker":"e-tZ85","pinned-right":"jawzpO","pinnedRight":"jawzpO","draggable":"KzkzRl","ghost":"ThUGZg","is-dragged-out":"_1VPLGZ","isDraggedOut":"_1VPLGZ","dnd-marker-left":"l9NkGw","dndMarkerLeft":"l9NkGw","dnd-marker-right":"_9K1HWo","dndMarkerRight":"_9K1HWo","cell-tooltip-wrapper":"CNZcTl","cellTooltipWrapper":"CNZcTl","cell-tooltip-text":"qwIjIm","cellTooltipText":"qwIjIm","tooltip-caption":"KJ2Cry","tooltipCaption":"KJ2Cry","tooltip-info":"JPf6Ps","tooltipInfo":"JPf6Ps"};
+var _path$o;
+function _extends$o() { return _extends$o = 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$o.apply(null, arguments); }
+var SvgTableSwapOutline = function SvgTableSwapOutline(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$o({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$o || (_path$o = /*#__PURE__*/React.createElement("path", {
+    d: "M7 6.825V20h2V6.825L10.6 8.4 12 7 8 3 4 7l1.4 1.4L7 6.825zm10 10.35V4h-2v13.175L13.4 15.6 12 17l4 4 4-4-1.4-1.4-1.6 1.575z"
+  })));
+};
+var ForwardRef$o = /*#__PURE__*/forwardRef(SvgTableSwapOutline);
+
+var _path$n;
+function _extends$n() { return _extends$n = 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$n.apply(null, arguments); }
+var SvgContentFiltrationFill = function SvgContentFiltrationFill(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$n({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
+    d: "M14 13v8l-4-2v-6L2.95 4h18.1L14 13z"
+  })));
+};
+var ForwardRef$n = /*#__PURE__*/forwardRef(SvgContentFiltrationFill);
+
+var _path$m;
+function _extends$m() { return _extends$m = 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$m.apply(null, arguments); }
+var SvgNavigationChevronUpOutline = function SvgNavigationChevronUpOutline(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$m({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$m || (_path$m = /*#__PURE__*/React.createElement("path", {
+    d: "M18.586 15.914 20 14.5l-8-8-8 8 1.414 1.414L12 9.328l6.586 6.586z"
+  })));
+};
+var ForwardRef$m = /*#__PURE__*/forwardRef(SvgNavigationChevronUpOutline);
+
+var _path$l;
+function _extends$l() { return _extends$l = 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$l.apply(null, arguments); }
+var SvgNavigationCollapseAllOutline = function SvgNavigationCollapseAllOutline(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$l({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
+    d: "M16.5 4.414 15.086 3 12 6.086 8.914 3 7.5 4.414l4.5 4.5 4.5-4.5zM9 13v-2h6v2H9zm6.086 8 1.414-1.414-4.5-4.5-4.5 4.5L8.914 21 12 17.914 15.086 21z"
+  })));
+};
+var ForwardRef$l = /*#__PURE__*/forwardRef(SvgNavigationCollapseAllOutline);
+
+var _path$k;
+function _extends$k() { return _extends$k = 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$k.apply(null, arguments); }
+var SvgNavigationExpandAllOutline = function SvgNavigationExpandAllOutline(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$k({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$k || (_path$k = /*#__PURE__*/React.createElement("path", {
+    d: "m16.5 7.5-1.414 1.414L12 5.828 8.914 8.914 7.5 7.5 12 3l4.5 4.5zM9 13v-2h6v2H9zm6.086 2.086L16.5 16.5 12 21l-4.5-4.5 1.414-1.414L12 18.17l3.086-3.085z"
+  })));
+};
+var ForwardRef$k = /*#__PURE__*/forwardRef(SvgNavigationExpandAllOutline);
+
+var css$v = {"root":"-qPWIf","caption-wrapper":"zWxjT8","captionWrapper":"zWxjT8","sort-icon":"iTW1hy","sortIcon":"iTW1hy","dropdown-icon":"pU4nuA","dropdownIcon":"pU4nuA","infoIcon":"_8UofpF","resizable":"_5NAwqM","align-right":"sL9EB9","alignRight":"sL9EB9","align-center":"K54Ke2","alignCenter":"K54Ke2","caption":"e93oo1","truncate":"uGFkY-","checkbox":"sG17hV","icon":"VOxXr3","fold-all-icon":"rMxdCO","foldAllIcon":"rMxdCO","cell-tooltip":"zRIOT5","cellTooltip":"zRIOT5","upper-case":"Rfkegk","upperCase":"Rfkegk","resizing-marker":"wk4UxN","resizingMarker":"wk4UxN","pinned-right":"_02pqhV","pinnedRight":"_02pqhV","draggable":"S-r-Rm","ghost":"hGlhps","is-dragged-out":"ORCRTM","isDraggedOut":"ORCRTM","dnd-marker-left":"pcKSRm","dndMarkerLeft":"pcKSRm","dnd-marker-right":"_6sX2H2","dndMarkerRight":"_6sX2H2","cell-tooltip-wrapper":"BiQsVh","cellTooltipWrapper":"BiQsVh","cell-tooltip-text":"jBE0jn","cellTooltipText":"jBE0jn","tooltip-caption":"nuPmjF","tooltipCaption":"nuPmjF","tooltip-info":"FpzGDH","tooltipInfo":"FpzGDH"};
 
 class DataTableHeaderCell extends React.Component {
     constructor() {
@@ -3837,23 +3436,22 @@ 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 = cx$1([
+            const captionCx = [
                 css$v.caption,
                 this.props.textCase === 'upper' && css$v.upperCase,
                 uuiDataTableHeaderCell.uuiTableHeaderCaption,
-                'uui-typography-inline',
-                this.props.size >= '48' && css$v.truncate,
-            ]);
+                settings.sizes.dataTable.header.row.cell.truncate.includes(this.props.size) && 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("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'] }))));
+                    React.createElement(Text, { key: "text", fontSize: settings.sizes.dataTable.header.row.cell.columnCaption[this.props.textCase === 'upper' ? 'uppercase' : 'fontSize'], size: settings.sizes.dataTable.header.row.cell.columnCaption.size, cx: captionCx }, this.props.column.caption)),
+                this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React.createElement(IconButton, { key: "sort", cx: cx$1(css$v.icon, css$v.sortIcon, this.props.sortDirection && css$v.sortIconActive, uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: this.props.sortDirection ? 'neutral' : 'secondary', icon: this.props.sortDirection === 'desc' ? ForwardRef$p : this.props.sortDirection === 'asc' ? ForwardRef$q : ForwardRef$o })),
+                this.props.isFilterActive && (React.createElement(IconButton, { key: "filter", cx: cx$1(css$v.icon, !this.props.sortDirection && css$v.filterIcon, uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "neutral", icon: ForwardRef$n })),
+                this.props.column.renderFilter && (React.createElement(IconButton, { key: "dropdown", cx: cx$1(css$v.icon, css$v.dropdownIcon, uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), color: "secondary", icon: this.state.isDropdownOpen ? ForwardRef$m : ForwardRef$Q }))));
         };
         this.renderHeaderCheckbox = () => {
             if (this.props.selectAll && this.props.isFirstColumn) {
-                return (React.createElement(Checkbox, { size: settings.dataTable.sizes.body.checkboxMap[this.props.size], ...this.props.selectAll, cx: cx$1(css$v.checkbox, uuiDataTableHeaderCell.uuiTableHeaderCheckbox) }));
+                return (React.createElement(Checkbox, { size: settings.sizes.dataTable.header.row.cell.checkbox[this.props.size], ...this.props.selectAll, cx: cx$1(css$v.checkbox, uuiDataTableHeaderCell.uuiTableHeaderCheckbox) }));
             }
         };
         this.renderFoldAllIcon = () => {
@@ -3861,7 +3459,7 @@ class DataTableHeaderCell extends React.Component {
                 return (React.createElement(Tooltip, { content: this.props.areAllFolded
                         ? i18n.tables.columnHeader.expandAllTooltip
                         : i18n.tables.columnHeader.collapseAllTooltip },
-                    React.createElement(IconButton, { color: "secondary", cx: cx$1(css$v.icon, css$v.foldAllIcon, uuiDataTableHeaderCell.uuiTableHeaderFoldAllIcon), icon: settings.dataTable.icons.header[this.props.areAllFolded ? 'unfoldIcon' : 'foldIcon'], onClick: this.props.onFoldAll, rawProps: {
+                    React.createElement(IconButton, { color: "secondary", cx: cx$1(css$v.icon, css$v.foldAllIcon, uuiDataTableHeaderCell.uuiTableHeaderFoldAllIcon), icon: this.props.areAllFolded ? ForwardRef$k : ForwardRef$l, onClick: this.props.onFoldAll, rawProps: {
                             'aria-label': this.props.areAllFolded ? 'Expand All' : 'Collapse All',
                             'aria-expanded': !!this.props.areAllFolded,
                         } })));
@@ -3873,32 +3471,32 @@ class DataTableHeaderCell extends React.Component {
         this.getLeftPadding = () => {
             const { columnsGap, isFirstColumn } = this.props;
             if (columnsGap)
-                return isFirstColumn ? `${columnsGap}px` : `${+columnsGap / 2}px`;
-            return `var(--uui-dt-header-cell-padding${isFirstColumn ? '-edge' : ''})`;
+                return isFirstColumn ? columnsGap : +columnsGap / 2;
+            return isFirstColumn ? settings.sizes.dataTable.header.row.cell.defaults.paddingEdge : settings.sizes.dataTable.header.row.cell.defaults.padding;
         };
         this.getRightPadding = () => {
             const { columnsGap, isLastColumn } = this.props;
             if (columnsGap)
-                return isLastColumn ? `${columnsGap}px` : `${+columnsGap / 2}px`;
-            return `var(--uui-dt-header-cell-padding${isLastColumn ? '-edge' : ''})`;
+                return isLastColumn ? columnsGap : +columnsGap / 2;
+            return isLastColumn ? settings.sizes.dataTable.header.row.cell.defaults.paddingEdge : settings.sizes.dataTable.header.row.cell.defaults.padding;
         };
         this.getResizingMarkerWidth = () => {
             const { columnsGap } = this.props;
-            return columnsGap ? `${+columnsGap / 2}px` : 'var(--uui-resize-marker-width)';
+            return columnsGap ? +columnsGap / 2 : settings.sizes.dataTable.header.row.cell.defaults.resizeMarker;
         };
         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.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(),
+                '--uui-dt-header-cell-icon-size': `${settings.sizes.dataTable.header.row.cell.iconSize[this.props.size || settings.sizes.dataTable.header.row.cell.defaults.size]}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`,
             };
             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.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: {
+                }, cx: cx$1(uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiMarkers.clickable, css$v.root, `uui-size-${this.props.size || settings.sizes.dataTable.header.row.cell.defaults.size}`, this.props.isFirstColumn && 'uui-dt-header-first-column', this.props.isLastColumn && 'uui-dt-header-last-column', this.props.column.fix && css$v['pinned-' + this.props.column.fix], isResizable && css$v.resizable, props.isDraggable && css$v.draggable, props.isDragGhost && css$v.ghost, props.isDraggedOut && css$v.isDraggedOut, props.isDndInProgress && css$v['dnd-marker-' + props.position]), onClick: onClickEvent, rawProps: {
                     role: 'columnheader',
                     'aria-sort': this.props.sortDirection === 'asc' ? 'ascending' : this.props.sortDirection ? 'descending' : 'none',
                     ...props.eventHandlers,
@@ -3918,32 +3516,66 @@ class DataTableHeaderCell extends React.Component {
     }
 }
 
-var css$u = {"root":"zn6hVZ","caption-wrapper":"tTy6zq","captionWrapper":"tTy6zq","align-center":"nTOw5l","alignCenter":"nTOw5l","caption":"hHE7VS","truncate":"jCeEZy","upper-case":"_4NNxCo","upperCase":"_4NNxCo","group-cell-tooltip":"b7WmTB","groupCellTooltip":"b7WmTB","group-cell-tooltip-wrapper":"y78zha","groupCellTooltipWrapper":"y78zha","group-cell-tooltip-text":"pPFgvI","groupCellTooltipText":"pPFgvI","tooltip-caption":"TaCIOS","tooltipCaption":"TaCIOS","tooltip-info":"_4AifQg","tooltipInfo":"_4AifQg"};
+var _path$j;
+function _extends$j() { return _extends$j = 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$j.apply(null, arguments); }
+var SvgActionSettingsFill = function SvgActionSettingsFill(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$j({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
+    d: "m9.25 22-.4-3.2a3.771 3.771 0 0 1-.612-.3 8.194 8.194 0 0 1-.563-.375L4.7 19.375l-2.75-4.75 2.575-1.95a2.39 2.39 0 0 1-.025-.338v-.675c0-.108.009-.22.025-.337L1.95 9.375l2.75-4.75 2.975 1.25c.184-.133.375-.258.575-.375.2-.117.4-.217.6-.3l.4-3.2h5.5l.4 3.2c.217.083.421.183.613.3.191.117.379.242.562.375l2.975-1.25 2.75 4.75-2.575 1.95c.017.117.025.229.025.337v.675c0 .109-.017.221-.05.338l2.575 1.95-2.75 4.75-2.95-1.25a6.826 6.826 0 0 1-.575.375c-.2.117-.4.217-.6.3l-.4 3.2h-5.5zm2.8-6.5c.967 0 1.792-.342 2.475-1.025A3.372 3.372 0 0 0 15.55 12c0-.967-.341-1.792-1.025-2.475A3.372 3.372 0 0 0 12.05 8.5c-.983 0-1.813.342-2.488 1.025A3.394 3.394 0 0 0 8.55 12c0 .967.338 1.792 1.012 2.475.676.683 1.505 1.025 2.488 1.025z"
+  })));
+};
+var ForwardRef$j = /*#__PURE__*/forwardRef(SvgActionSettingsFill);
+
+var css$u = {"root":"j8INbi"};
+
+var css$t = {"root":"JXPagk","caption-wrapper":"Nj7-uX","captionWrapper":"Nj7-uX","align-center":"_0f5-tV","alignCenter":"_0f5-tV","caption":"Nthg7g","truncate":"aQwD9s","group-cell-tooltip":"eGuSTX","groupCellTooltip":"eGuSTX","upper-case":"IIZQsl","upperCase":"IIZQsl","group-cell-tooltip-wrapper":"yzjufS","groupCellTooltipWrapper":"yzjufS","group-cell-tooltip-text":"Kfu1rh","groupCellTooltipText":"Kfu1rh","tooltip-caption":"rWKM7y","tooltipCaption":"rWKM7y","tooltip-info":"JtC1YE","tooltipInfo":"JtC1YE"};
 
 class DataTableHeaderGroupCell extends React.Component {
     constructor() {
         super(...arguments);
-        this.getTooltipContent = (column) => (React.createElement("div", { className: cx$1(css$u.groupCellTooltipWrapper, uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCaptionTooltip) },
-            React.createElement(Text, { cx: [css$u.groupCellTooltipText, css$u.tooltipCaption] }, column.caption),
-            column.info && (React.createElement(Text, { cx: [css$u.groupCellTooltipText, css$u.tooltipInfo] }, column.info))));
+        this.getTooltipContent = (column) => (React.createElement("div", { className: cx$1(css$t.groupCellTooltipWrapper, uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCaptionTooltip) },
+            React.createElement(Text, { cx: [css$t.groupCellTooltipText, css$t.tooltipCaption] }, column.caption),
+            column.info && (React.createElement(Text, { cx: [css$t.groupCellTooltipText, css$t.tooltipInfo] }, column.info))));
         this.getColumnCaption = () => {
             const renderTooltip = this.props.group.renderTooltip || this.getTooltipContent;
-            const captionCx = 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("div", { key: "text", className: captionCx }, this.props.group.caption))));
+            const captionCx = [
+                css$t.caption,
+                this.props.textCase === 'upper' && css$t.upperCase,
+                uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCaption,
+                settings.sizes.dataTable.header.row.groupCell.truncate.includes(this.props.size) && css$t.truncate,
+            ];
+            return (React.createElement("div", { className: cx$1(css$t.captionWrapper, css$t['align-' + this.props.group.textAlign], uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCaptionWrapper) },
+                React.createElement(Tooltip, { placement: "top", color: "inverted", content: renderTooltip(this.props.group), cx: css$t.groupCellTooltip, openDelay: 600 },
+                    React.createElement(Text, { key: "text", fontSize: settings.sizes.dataTable.header.row.groupCell.columnCaption[this.props.textCase === 'upper' ? 'uppercase' : 'fontSize'], size: settings.sizes.dataTable.header.row.groupCell.columnCaption.size, cx: captionCx }, this.props.group.caption))));
         };
         this.getLeftPadding = () => {
             const { columnsGap, isFirstCell } = this.props;
             if (columnsGap)
-                return isFirstCell ? `${columnsGap}px` : `${+columnsGap / 2}px`;
-            return `var(--uui-dt-header-group-cell-padding${isFirstCell ? '-edge' : ''})`;
+                return isFirstCell ? columnsGap : +columnsGap / 2;
+            return isFirstCell ? settings.sizes.dataTable.header.row.groupCell.defaults.paddingEdge : settings.sizes.dataTable.header.row.groupCell.defaults.padding;
         };
         this.getRightPadding = () => {
             const { columnsGap, isLastCell } = this.props;
             if (columnsGap)
-                return isLastCell ? `${columnsGap}px` : `${+columnsGap / 2}px`;
-            return `var(--uui-dt-header-group-cell-padding${isLastCell ? '-edge' : ''})`;
+                return isLastCell ? columnsGap : +columnsGap / 2;
+            return isLastCell ? settings.sizes.dataTable.header.row.groupCell.defaults.paddingEdge : settings.sizes.dataTable.header.row.groupCell.defaults.padding;
+        };
+        this.renderCellContent = (props) => {
+            const computeStyles = {
+                '--uui-dt-header-group-cell-padding-start': `${this.getLeftPadding()}px`,
+                '--uui-dt-header-group-cell-padding-end': `${this.getRightPadding()}px`,
+            };
+            return (React.createElement(DataTableCellContainer, { column: this.props.group, ref: (ref) => {
+                    props.ref(ref);
+                }, cx: cx$1(uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCell, css$t.root, `uui-size-${this.props.size || settings.sizes.dataTable.header.row.groupCell.defaults.size}`, this.props.isFirstCell && 'uui-dt-header-first-column', this.props.isLastCell && 'uui-dt-header-last-column'), rawProps: {
+                    role: 'columnheader',
+                    ...props.eventHandlers,
+                }, style: computeStyles }, this.getColumnCaption()));
         };
     }
     render() {
@@ -3951,19 +3583,17 @@ class DataTableHeaderGroupCell extends React.Component {
             return this.props.group.renderHeaderCell(this.props);
         }
         const computeStyles = {
-            '--uui-dt-header-group-cell-padding-start': this.getLeftPadding(),
-            '--uui-dt-header-group-cell-padding-end': this.getRightPadding(),
+            '--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, 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()));
+        return (React.createElement(DataTableCellContainer, { column: this.props.group, cx: cx$1(uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCell, css$t.root, `uui-size-${this.props.size || settings.sizes.dataTable.header.row.groupCell.defaults.size}`, this.props.isFirstCell && 'uui-dt-header-first-column', this.props.isLastCell && 'uui-dt-header-last-column'), rawProps: { role: 'columnheader' }, style: computeStyles }, this.getColumnCaption()));
     }
 }
 
-var css$t = {"root":"mfiUjP"};
-
-const DataTableHeaderRow = /* @__PURE__ */withMods(DataTableHeaderRow$1, () => [css$t.root, 'uui-dt-vars'], (mods) => ({
+const DataTableHeaderRow = /* @__PURE__ */withMods(DataTableHeaderRow$1, () => [css$u.root, 'uui-dt-vars'], (mods) => ({
     renderCell: (props) => (React.createElement(DataTableHeaderCell, { ...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.iconMap[mods.size || settings.dataTable.sizes.header.row]}`], color: "neutral", icon: settings.dataTable.icons.header.configIcon })),
+    renderConfigButton: () => (React.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: ['config-icon', `uui-size-${settings.sizes.dataTable.header.row.cell.iconSize[mods.size || settings.sizes.dataTable.header.row.default]}`], color: "neutral", icon: ForwardRef$j })),
 }));
 
 const UUI_FILTERS_PANEL_ADD_BUTTON = 'uui-filters-panel-add-button';
@@ -3971,14 +3601,15 @@ 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":"i6BCTf","title-wrapper":"VA0IIo","titleWrapper":"VA0IIo","title":"OQCvOt","text-wrapper":"eCkHeI","textWrapper":"eCkHeI","selection":"Oy9Ix-","postfix":"EdA6Ga","selected":"rlDmse"};
+var css$s = {"root":"uYvCRM","title-wrapper":"eHTSDd","titleWrapper":"eHTSDd","title":"_3wpWsB","text-wrapper":"ZmZzWj","textWrapper":"ZmZzWj","selection":"_4M016R","postfix":"_06NoXz","selected":"gFn5NU"};
 
+const defaultSize = '36';
 const FilterPanelItemToggler = /* @__PURE__ */React.forwardRef((props, ref) => {
     const togglerPickerOpened = (e) => {
         if (props.isDisabled)
             return;
         e.preventDefault();
-        !isEventTargetInsideClickable(e) && props.onClick?.();
+        props.onClick?.();
     };
     const onKeyDownHandler = (e) => {
         if (props.isDisabled)
@@ -3996,13 +3627,18 @@ 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("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 },
+    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 },
             React.createElement(Text, { size: props.size, cx: css$s.title }, getTitle),
             props.selection && (React.createElement("div", { className: css$s.textWrapper },
                 getSelectionText(),
                 props.postfix && (React.createElement(Text, { color: "primary", size: props.size, cx: css$s.postfix }, props.postfix))))),
-        !props.isDisabled && React.createElement(IconContainer, { icon: settings.filtersPanel.icons.itemDropdownIcon, flipY: props.isOpen, cx: "uui-icon-dropdown" })));
+        !props.isDisabled && React.createElement(IconContainer, { icon: systemIcons.foldingArrow, flipY: props.isOpen, cx: "uui-icon-dropdown" })));
 });
 
 const pickerHeight = 300;
@@ -4029,7 +3665,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.pickerInput.sizes.body.row, ...rowProps }));
+        return (React.createElement(PickerItem, { title: getName(item), highlightSearchMatches: highlightSearchMatches, ...(flattenSearchResults ? { subtitle: getSubtitle(rowProps, dsState) } : {}), dataSourceState: dsState, size: settings.sizes.filtersPanel.pickerInput.body.default, ...rowProps }));
     };
     const onSelect = (row) => {
         handleDataSourceValueChange((currentDataSourceState) => ({ ...currentDataSourceState, search: '', selectedId: row.id }));
@@ -4038,20 +3674,18 @@ 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.pickerInput.sizes.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.sizes.filtersPanel.pickerInput.body.default, 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.pickerInput.sizes.body.row });
+        return props.renderFooter ? props.renderFooter(footerProps) : React.createElement(DataPickerFooter, { ...footerProps, size: settings.sizes.filtersPanel.pickerInput.body.default });
     };
     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.pickerInput.sizes.body.row, editMode: "dropdown" }),
+            React.createElement(DataPickerBody, { ...bodyProps, selectionMode: props.selectionMode, rows: renderedDataRows, maxHeight: maxHeight, maxWidth: maxWidth, searchSize: settings.sizes.filtersPanel.pickerInput.body.default, editMode: "dropdown" }),
             renderFooter()));
     };
     const rows = getRows();
@@ -4139,7 +3773,7 @@ function FilterRangeDatePickerBody(props) {
                 React__default.createElement(LinkButton, { isDisabled: !value.from && !value.to, caption: i18n.pickerModal.clearAllButton, onClick: () => onValueChange(defaultRangeValue) })))));
 }
 
-var css$r = {"container":"_692-s6"};
+var css$r = {"container":"WgX7HC"};
 
 function FilterNumericBody(props) {
     const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
@@ -4220,22 +3854,22 @@ function FilterItemBody(props) {
     }
 }
 
-var _path$a;
-function _extends$a() { return _extends$a = 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$a.apply(null, arguments); }
+var _path$i;
+function _extends$i() { return _extends$i = 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$i.apply(null, arguments); }
 var SvgActionDeleteOutline = function SvgActionDeleteOutline(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$a({
+  return /*#__PURE__*/React.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
     d: "M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3H9zM7 6h10v13H7V6zm2 2v9h2V8H9zm4 0v9h2V8h-2z"
   })));
 };
-var ForwardRef$a = /*#__PURE__*/forwardRef(SvgActionDeleteOutline);
+var ForwardRef$i = /*#__PURE__*/forwardRef(SvgActionDeleteOutline);
 
-var css$q = {"header":"qnkG-E","removeButton":"LUacje","with-search":"_0UOInd","withSearch":"_0UOInd"};
+var css$q = {"header":"hm52GA","removeButton":"_1qM-60","with-search":"sx1K3G","withSearch":"sx1K3G"};
 
 function useView(props, value) {
     const forceUpdate = useForceUpdate();
@@ -4324,7 +3958,7 @@ function FiltersToolbarItemImpl(props) {
     };
     const renderHeader = (hideTitle) => (React__default.createElement("div", { className: cx(css$q.header, isPickersType && (props.showSearch ?? css$q.withSearch)) },
         props.predicates ? (React__default.createElement(MultiSwitch, { items: props.predicates.map((i) => ({ id: i.predicate, caption: i.name })), value: predicate, onValueChange: changePredicate, size: "24" })) : (!hideTitle && (React__default.createElement(Text, { color: "secondary", size: "24", fontSize: "14" }, props.title))),
-        !props?.isAlwaysVisible && (React__default.createElement(LinkButton, { cx: css$q.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: "24", icon: ForwardRef$a }))));
+        !props?.isAlwaysVisible && (React__default.createElement(LinkButton, { cx: css$q.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: "24", icon: ForwardRef$i }))));
     const renderBody = (dropdownProps) => {
         const hideHeaderTitle = isPickersType && isMobileScreen;
         return isPickersType ? (React__default.createElement(PickerBodyMobileView, { ...dropdownProps, cx: UUI_FILTERS_PANEL_ITEM_BODY, title: props.title, width: 360, onClose: () => isOpenChange(false) },
@@ -4413,6 +4047,21 @@ function FiltersToolbarItemImpl(props) {
 }
 const FiltersPanelItem = /* @__PURE__ */React__default.memo(FiltersToolbarItemImpl);
 
+var _path$h;
+function _extends$h() { return _extends$h = 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$h.apply(null, arguments); }
+var SvgActionAddOutline = function SvgActionAddOutline(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$h({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
+    d: "M13.286 3h-2.572v7.714H3v2.572h7.714V21h2.572v-7.714H21v-2.572h-7.714V3z"
+  })));
+};
+var ForwardRef$h = /*#__PURE__*/forwardRef(SvgActionAddOutline);
+
 const normalizeFilterWithPredicates = (filter) => {
     if (!filter) {
         return {};
@@ -4452,7 +4101,7 @@ const normalizeFilterWithPredicates = (filter) => {
     return result;
 };
 function FiltersToolbarImpl(props) {
-    const { filters, tableState, setTableState, size = (settings.filtersPanel.sizes.default) } = props;
+    const { filters, tableState, setTableState, size = settings.sizes.defaults.filtersPanel } = props;
     const [newFilterId, setNewFilterId] = useState(null);
     const pickerInputRef = useRef(null);
     const dataSource = useArrayDataSource({
@@ -4512,7 +4161,7 @@ function FiltersToolbarImpl(props) {
         return orderBy(selectedFilters, (f) => tableState.filtersConfig?.[f.field]?.order);
     }, [filters, tableState.filtersConfig]);
     const renderAddFilterToggler = useCallback((togglerProps) => {
-        return (React__default.createElement(Button, { size: size, onClick: togglerProps.onClick, ref: togglerProps.ref, caption: i18n.filterToolbar.addCaption, icon: settings.filtersPanel.icons.addFilterIcon, iconPosition: "left", fill: "ghost", color: "primary", cx: UUI_FILTERS_PANEL_ADD_BUTTON }));
+        return (React__default.createElement(Button, { size: size, onClick: togglerProps.onClick, ref: togglerProps.ref, caption: i18n.filterToolbar.addCaption, icon: ForwardRef$h, iconPosition: "left", fill: "ghost", color: "primary", cx: UUI_FILTERS_PANEL_ADD_BUTTON }));
     }, []);
     const getRowOptions = useCallback((item) => ({
         isDisabled: item.isAlwaysVisible,
@@ -4541,88 +4190,120 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = /* @__PURE__ */React__default.memo(FiltersToolbarImpl);
 
-var css$p = {"divider":"prGwLv","dropdownDeleteIcon":"LOTUYi","presetsWrapper":"IfSNdh","addPresetContainer":"_0hPW6Y","dropContainer":"K67JCC"};
+var css$p = {"divider":"rrZMUl","dropdownDeleteIcon":"_3P4k8Z","presetsWrapper":"dbCskh","addPresetContainer":"FFG-f1","dropContainer":"_62-Nr1"};
+
+var _path$g;
+function _extends$g() { return _extends$g = 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$g.apply(null, arguments); }
+var SvgNavigationMoreVertOutline = function SvgNavigationMoreVertOutline(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$g({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$g = /*#__PURE__*/forwardRef(SvgNavigationMoreVertOutline);
+
+var _path$f;
+function _extends$f() { return _extends$f = 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$f.apply(null, arguments); }
+var SvgNavigationRefreshOutline = function SvgNavigationRefreshOutline(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$f({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
+    d: "M12 20c-2.233 0-4.125-.775-5.675-2.325C4.775 16.125 4 14.233 4 12c0-2.233.775-4.125 2.325-5.675C7.875 4.775 9.767 4 12 4c1.15 0 2.25.238 3.3.713A7.617 7.617 0 0 1 18 6.75V4h2v7h-7V9h4.2a5.837 5.837 0 0 0-2.187-2.2A5.93 5.93 0 0 0 12 6c-1.667 0-3.083.583-4.25 1.75C6.583 8.917 6 10.333 6 12c0 1.667.583 3.083 1.75 4.25C8.917 17.417 10.333 18 12 18a5.863 5.863 0 0 0 3.475-1.1A5.81 5.81 0 0 0 17.65 14h2.1c-.467 1.767-1.417 3.208-2.85 4.325S13.833 20 12 20z"
+  })));
+};
+var ForwardRef$f = /*#__PURE__*/forwardRef(SvgNavigationRefreshOutline);
 
-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); }
+var _path$e;
+function _extends$e() { return _extends$e = 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$e.apply(null, arguments); }
 var SvgActionSaveOutline = function SvgActionSaveOutline(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$9({
+  return /*#__PURE__*/React.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
     d: "M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm2 16H5V5h11.17L19 7.83V19zm-7-7c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zM6 6h9v4H6V6z"
   })));
 };
-var ForwardRef$9 = /*#__PURE__*/forwardRef(SvgActionSaveOutline);
+var ForwardRef$e = /*#__PURE__*/forwardRef(SvgActionSaveOutline);
 
-var _path$8;
-function _extends$8() { return _extends$8 = 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$8.apply(null, arguments); }
+var _path$d;
+function _extends$d() { return _extends$d = 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$d.apply(null, arguments); }
 var SvgContentEditUndoOutline = function SvgContentEditUndoOutline(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$8({
+  return /*#__PURE__*/React.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
     d: "M22.5 15a8.71 8.71 0 0 0-.712-3.513 9.158 9.158 0 0 0-1.926-2.85 9.152 9.152 0 0 0-2.85-1.925A8.709 8.709 0 0 0 13.5 6a8.71 8.71 0 0 0-3.513.712 9.167 9.167 0 0 0-2.85 1.925 9.154 9.154 0 0 0-1.924 2.85A8.705 8.705 0 0 0 4.5 15v.15L2.95 13.6 1.5 15l4 4 4-4-1.45-1.4-1.55 1.55V15c0-1.95.679-3.604 2.037-4.962C9.896 8.679 11.55 8 13.5 8c1.95 0 3.604.68 4.962 2.038C19.821 11.396 20.5 13.05 20.5 15h2z"
   })));
 };
-var ForwardRef$8 = /*#__PURE__*/forwardRef(SvgContentEditUndoOutline);
+var ForwardRef$d = /*#__PURE__*/forwardRef(SvgContentEditUndoOutline);
 
-var _path$7;
-function _extends$7() { return _extends$7 = 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$7.apply(null, arguments); }
+var _path$c;
+function _extends$c() { return _extends$c = 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$c.apply(null, arguments); }
 var SvgActionCopyContentOutline = function SvgActionCopyContentOutline(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$7({
+  return /*#__PURE__*/React.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M19 19H9V9h10M9 7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H9zm5-4H5a2 2 0 0 0-2 2v9h2V5h9V3z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$7 = /*#__PURE__*/forwardRef(SvgActionCopyContentOutline);
+var ForwardRef$c = /*#__PURE__*/forwardRef(SvgActionCopyContentOutline);
 
-var _path$6;
-function _extends$6() { return _extends$6 = 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$6.apply(null, arguments); }
+var _path$b;
+function _extends$b() { return _extends$b = 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$b.apply(null, arguments); }
 var SvgContentEditFill = function SvgContentEditFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$6({
+  return /*#__PURE__*/React.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
     d: "m19.3 8.925-4.25-4.2 1.4-1.4a1.92 1.92 0 0 1 1.413-.575 1.92 1.92 0 0 1 1.412.575l1.4 1.4c.383.383.583.846.6 1.388a1.806 1.806 0 0 1-.55 1.387L19.3 8.925zM17.85 10.4 7.25 21H3v-4.25l10.6-10.6 4.25 4.25z"
   })));
 };
-var ForwardRef$6 = /*#__PURE__*/forwardRef(SvgContentEditFill);
+var ForwardRef$b = /*#__PURE__*/forwardRef(SvgContentEditFill);
 
-var _path$5, _path2;
-function _extends$5() { return _extends$5 = 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$5.apply(null, arguments); }
+var _path$a, _path2$3;
+function _extends$a() { return _extends$a = 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$a.apply(null, arguments); }
 var SvgContentLinkOutline = function SvgContentLinkOutline(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$5({
+  return /*#__PURE__*/React.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
     d: "M12 4.93A5 5 0 0 1 19.07 12l-1.06 1.06c.12-.85.022-1.725-.295-2.534a3 3 0 0 0-4.302-4.182l-2.828 2.828a3 3 0 0 0-.07 4.17l.07.073-1.415 1.414a5 5 0 0 1 0-7.071L12 4.929z"
-  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+  })), _path2$3 || (_path2$3 = /*#__PURE__*/React.createElement("path", {
     d: "m4.93 12 .989-.99a5.018 5.018 0 0 0 .297 2.54 3 3 0 0 0 4.37 4.107l2.829-2.828a3 3 0 0 0-.828-4.83l1.464-1.463a5 5 0 0 1 .778 7.707L12 19.071a5 5 0 0 1-7.07-7.07z"
   })));
 };
-var ForwardRef$5 = /*#__PURE__*/forwardRef(SvgContentLinkOutline);
+var ForwardRef$a = /*#__PURE__*/forwardRef(SvgContentLinkOutline);
 
-var css$o = {"delete-button":"o8YS6H","deleteButton":"o8YS6H","tab-button":"wRkAHt","tabButton":"wRkAHt","targetOpen":"_7bHcaa"};
+var css$o = {"delete-button":"SAWSYe","deleteButton":"SAWSYe","tab-button":"Y2Ht6n","tabButton":"Y2Ht6n","targetOpen":"u-TFk9"};
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = useUuiContext();
@@ -4670,26 +4351,26 @@ function PresetActionsDropdown(props) {
         const isRenameAvailable = props.preset.id === props.activePresetId && !isReadonlyPreset;
         return (React__default.createElement(DropdownMenuBody, { ...dropdownProps },
             isPresetChanged && (React__default.createElement(React__default.Fragment, null,
-                !isReadonlyPreset && (React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-save-in-current`, icon: ForwardRef$E, caption: "Save in current", onClick: () => { dropdownProps.onClose(); saveInCurrentHandler(); } })),
-                React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-save-as-new`, icon: ForwardRef$9, caption: "Save as new", 
+                !isReadonlyPreset && (React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-save-in-current`, icon: ForwardRef$f, caption: "Save in current", onClick: () => { dropdownProps.onClose(); saveInCurrentHandler(); } })),
+                React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-save-as-new`, icon: ForwardRef$e, caption: "Save as new", 
                     // We add setTimeout to call addPreset after dropdown will be closed, since dropdown has focus lock, and it broke autofocus on add new preset input
                     onClick: () => { dropdownProps.onClose(); setTimeout(() => props.addPreset(), 0); } }),
-                React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-discard`, icon: ForwardRef$8, caption: "Discard all changes", onClick: () => { dropdownProps.onClose(); discardAllChangesHandler(); } }),
+                React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-discard`, icon: ForwardRef$d, caption: "Discard all changes", onClick: () => { dropdownProps.onClose(); discardAllChangesHandler(); } }),
                 React__default.createElement(DropdownMenuSplitter, { key: "discard-splitter" }))),
-            isRenameAvailable && (React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-rename`, icon: ForwardRef$6, caption: "Rename", onClick: props.renamePreset })),
-            React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-duplicate`, icon: ForwardRef$7, caption: "Duplicate", onClick: () => { dropdownProps.onClose(); duplicateHandler(); } }),
-            React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-copyLink`, icon: ForwardRef$5, caption: "Copy Link", onClick: copyUrlToClipboard }),
+            isRenameAvailable && (React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-rename`, icon: ForwardRef$b, caption: "Rename", onClick: props.renamePreset })),
+            React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-duplicate`, icon: ForwardRef$c, caption: "Duplicate", onClick: () => { dropdownProps.onClose(); duplicateHandler(); } }),
+            React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-copyLink`, icon: ForwardRef$a, caption: "Copy Link", onClick: copyUrlToClipboard }),
             !isReadonlyPreset && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(DropdownMenuSplitter, { key: "delete-splitter" }),
-                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$a, caption: "Delete", cx: css$o.deleteButton, onClick: deleteHandler })))));
+                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$i, caption: "Delete", cx: css$o.deleteButton, onClick: deleteHandler })))));
     };
     const renderTarget = useCallback((dropdownProps) => {
-        return (React__default.createElement(IconButton, { cx: [css$o.tabButton, dropdownProps.isOpen && css$o.targetOpen], color: props.preset.id === props.activePresetId ? 'primary' : 'neutral', ...dropdownProps, icon: ForwardRef$F, size: "18" }));
+        return (React__default.createElement(IconButton, { cx: [css$o.tabButton, dropdownProps.isOpen && css$o.targetOpen], color: props.preset.id === props.activePresetId ? 'primary' : 'neutral', ...dropdownProps, icon: ForwardRef$g, size: "18" }));
     }, []);
     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":"roiTux","presetInputCell":"roiTux","preset-input":"XcHHFT","presetInput":"XcHHFT"};
+var css$n = {"preset-input-cell":"lYiRnX","presetInputCell":"lYiRnX","preset-input":"_78GF2l","presetInput":"_78GF2l"};
 
 const UUI_PRESETS_PANEL_ADD_BUTTON = 'uui-presets-panel-add-button';
 const UUI_PRESETS_PANEL_MORE_BUTTON = 'uui-presets-panel-more-button';
@@ -4721,7 +4402,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":"ntfGig","activePreset":"_8Hv-Bt"};
+var css$m = {"preset":"yi-2dc","activePreset":"B-Ib2k"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = useState(false);
@@ -4746,22 +4427,22 @@ function Preset(props) {
     return (React__default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$m.preset, isPresetActive && css$m.activePreset, UUI_PRESETS_PANEL_PRESET], size: "60", withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: PresetActionsDropdownComponent, iconPosition: "right", isLinkActive: isPresetActive }))));
 }
 
-var _path$4;
-function _extends$4() { return _extends$4 = 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$4.apply(null, arguments); }
+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); }
 var SvgActionDeleteForeverFill = function SvgActionDeleteForeverFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
+  return /*#__PURE__*/React.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M7 21c-1.1 0-2-.9-2-2V8h14v11c0 1.1-.9 2-2 2H7zm8-17h5v2H4V4h5V3h6v1zM9.4 18.5l2.6-2.6 2.6 2.6 1.4-1.4-2.6-2.6 2.6-2.6-1.4-1.4-2.6 2.6-2.6-2.6L8 11.9l2.6 2.6L8 17.1l1.4 1.4z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$4 = /*#__PURE__*/forwardRef(SvgActionDeleteForeverFill);
+var ForwardRef$9 = /*#__PURE__*/forwardRef(SvgActionDeleteForeverFill);
 
 function PresetsPanel(props) {
     const [isAddingPreset, setIsAddingPreset] = useState(false);
@@ -4776,7 +4457,7 @@ function PresetsPanel(props) {
         return React__default.createElement(Preset, { key: preset.id, preset: preset, addPreset: setAddingPreset, ...presetApi });
     };
     const renderAddPresetButton = useCallback(() => {
-        return (React__default.createElement("div", { key: "addingPresetBlock", className: css$p.addPresetContainer }, !isAddingPreset ? (React__default.createElement(Button, { cx: UUI_PRESETS_PANEL_ADD_BUTTON, onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: ForwardRef$s, iconPosition: "left", fill: "ghost", color: "primary" })) : (React__default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
+        return (React__default.createElement("div", { key: "addingPresetBlock", className: css$p.addPresetContainer }, !isAddingPreset ? (React__default.createElement(Button, { cx: UUI_PRESETS_PANEL_ADD_BUTTON, onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: ForwardRef$h, iconPosition: "left", fill: "ghost", color: "primary" })) : (React__default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
     }, [isAddingPreset]);
     const onPresetDropdownSelect = (preset) => {
         props.choosePreset(preset.preset);
@@ -4785,7 +4466,7 @@ function PresetsPanel(props) {
         return (React__default.createElement(Dropdown, { key: "more", renderTarget: (props) => (React__default.createElement(FlexRow, null,
                 React__default.createElement("div", { className: css$p.divider }),
                 React__default.createElement(Button, { cx: UUI_PRESETS_PANEL_MORE_BUTTON, fill: "ghost", color: "secondary", caption: `${hiddenItems?.length || ''} more`, ...props }))), renderBody: (propsBody) => (React__default.createElement(DropdownMenuBody, { minWidth: 230, maxHeight: 300, ...propsBody },
-                React__default.createElement(ScrollBars, null, hiddenItems.map((hiddenItem) => (React__default.createElement(DropdownMenuButton, { key: hiddenItem.preset.id, onClick: () => onPresetDropdownSelect(hiddenItem), caption: hiddenItem.preset.name, icon: !hiddenItem.preset.isReadonly && ForwardRef$4, iconPosition: "right", cx: css$p.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
+                React__default.createElement(ScrollBars, null, hiddenItems.map((hiddenItem) => (React__default.createElement(DropdownMenuButton, { key: hiddenItem.preset.id, onClick: () => onPresetDropdownSelect(hiddenItem), caption: hiddenItem.preset.name, icon: !hiddenItem.preset.isReadonly && ForwardRef$9, iconPosition: "right", cx: css$p.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
     };
     const getPresetPriority = (preset, index) => {
         return preset.id === props.activePresetId ? 100499 : 1000 - index;
@@ -4847,7 +4528,62 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var css$l = {"unpin-icon":"tGNlnq","unpinIcon":"tGNlnq","pin-toggler-icon":"ZdLH6i","pinTogglerIcon":"ZdLH6i"};
+var _path$8;
+function _extends$8() { return _extends$8 = 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$8.apply(null, arguments); }
+var SvgActionLockFill = function SvgActionLockFill(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$8({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M12 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM7 9V7a5 5 0 0 1 10 0v2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V11a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 1 0-6 0v2z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$8 = /*#__PURE__*/forwardRef(SvgActionLockFill);
+
+var _path$7, _path2$2;
+function _extends$7() { return _extends$7 = 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$7.apply(null, arguments); }
+var SvgTableGroupColumnLeftFill = function SvgTableGroupColumnLeftFill(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$7({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
+    d: "M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6V3H5z"
+  })), _path2$2 || (_path2$2 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M13 21V3h6a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-6zm2-16h4v14h-4V5z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$7 = /*#__PURE__*/forwardRef(SvgTableGroupColumnLeftFill);
+
+var _path$6, _path2$1;
+function _extends$6() { return _extends$6 = 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$6.apply(null, arguments); }
+var SvgTableGroupColumnRightFill = function SvgTableGroupColumnRightFill(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
+    d: "M13 3h6a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-6V3z"
+  })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M9 5H5v14h4V5zM5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6V3H5z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$6 = /*#__PURE__*/forwardRef(SvgTableGroupColumnRightFill);
+
+var css$l = {"unpin-icon":"ysWut0","unpinIcon":"ysWut0","pin-toggler-icon":"Rh0XSv","pinTogglerIcon":"Rh0XSv"};
 
 function PinIconButton(props) {
     const i18nLocal = i18n.tables.columnsConfigurationModal;
@@ -4865,23 +4601,23 @@ function PinIconButton(props) {
     else {
         pinUnpinNode = (React.createElement(React.Fragment, null,
             React.createElement(Tooltip, { content: i18nLocal.pinColumnToTheLeftButton, placement: "bottom", color: "inverted" },
-                React.createElement(IconButton, { cx: css$l.pinTogglerIcon, icon: settings.dataTable.icons.columnsConfigurationModal.pinLeftIcon, onClick: () => onTogglePin('left'), isDisabled: isPinnedAlways })),
+                React.createElement(IconButton, { cx: css$l.pinTogglerIcon, icon: ForwardRef$7, onClick: () => onTogglePin('left'), isDisabled: isPinnedAlways })),
             React.createElement(Tooltip, { content: i18nLocal.pinColumnToTheRightButton, placement: "bottom", color: "inverted" },
-                React.createElement(IconButton, { cx: css$l.pinTogglerIcon, icon: settings.dataTable.icons.columnsConfigurationModal.pinRightIcon, onClick: () => onTogglePin('right'), isDisabled: isPinnedAlways }))));
+                React.createElement(IconButton, { cx: css$l.pinTogglerIcon, icon: ForwardRef$6, onClick: () => onTogglePin('right'), isDisabled: isPinnedAlways }))));
     }
     return pinUnpinNode;
 }
 function getUnpinIcon(params) {
     const { isPinnedAlways, pinPosition } = params;
     if (isPinnedAlways) {
-        return settings.dataTable.icons.columnsConfigurationModal.lockIcon;
+        return ForwardRef$8;
     }
     switch (pinPosition) {
         case 'left': {
-            return settings.dataTable.icons.columnsConfigurationModal.pinLeftIcon;
+            return ForwardRef$7;
         }
         case 'right': {
-            return settings.dataTable.icons.columnsConfigurationModal.pinRightIcon;
+            return ForwardRef$6;
         }
         default: {
             return;
@@ -4889,7 +4625,24 @@ function getUnpinIcon(params) {
     }
 }
 
-var css$k = {"row-wrapper":"V7peDD","rowWrapper":"V7peDD","pin-icon-button":"OAFnjS","pinIconButton":"OAFnjS","not-pinned":"DrChAu","notPinned":"DrChAu","checkbox":"qq7YSj","drag-handle":"Wo0Rcj","dragHandle":"Wo0Rcj","dnd-disabled":"V7iUrK","dndDisabled":"V7iUrK"};
+var _path$5;
+function _extends$5() { return _extends$5 = 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$5.apply(null, arguments); }
+var SvgActionDragIndicator18 = function SvgActionDragIndicator18(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M8 13.5c0 .825-.675 1.5-1.5 1.5S5 14.325 5 13.5 5.675 12 6.5 12s1.5.675 1.5 1.5zm-1.5-6C5.675 7.5 5 8.175 5 9s.675 1.5 1.5 1.5S8 9.825 8 9s-.675-1.5-1.5-1.5zm0-4.5C5.675 3 5 3.675 5 4.5S5.675 6 6.5 6 8 5.325 8 4.5 7.325 3 6.5 3zm5 3c.825 0 1.5-.675 1.5-1.5S12.325 3 11.5 3 10 3.675 10 4.5 10.675 6 11.5 6zm0 1.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S13 9.825 13 9s-.675-1.5-1.5-1.5zm0 4.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$5 = /*#__PURE__*/forwardRef(SvgActionDragIndicator18);
+
+var css$k = {"row-wrapper":"_9LPYoM","rowWrapper":"_9LPYoM","pin-icon-button":"DMtst-","pinIconButton":"DMtst-","not-pinned":"L0h6Av","notPinned":"L0h6Av","checkbox":"_3lw6ta","drag-handle":"zdwvaO","dragHandle":"zdwvaO","dnd-disabled":"ddJFmc","dndDisabled":"ddJFmc"};
 
 const ColumnRow = /* @__PURE__ */React.memo(function ColumnRow(props) {
     const { column } = props;
@@ -4902,8 +4655,8 @@ const ColumnRow = /* @__PURE__ */React.memo(function ColumnRow(props) {
         const wrapperClasses = cx$1(css$k.rowWrapper, !isPinned && css$k.notPinned, dndActorParams.isDragGhost && uuiDndState.dragGhost, 'uui-dt-columns-config-row');
         const { onTouchStart, onPointerDown, ...restEventHandlers } = dndActorParams.eventHandlers;
         const { ref, ...dndActorPropsWithoutRef } = dndActorParams;
-        return (React.createElement(FlexRow, { size: settings.dataTable.sizes.columnsConfigurationModal.columnRow, cx: wrapperClasses, ref: dndActorParams.ref, rawProps: { ...restEventHandlers }, alignItems: "top" },
-            React.createElement(DragHandle, { dragHandleIcon: settings.dataTable.icons.columnsConfigurationModal.dragIndicator, rawProps: { onTouchStart, onPointerDown }, isDisabled: !isDndAllowed, cx: cx$1(css$k.dragHandle, !isDndAllowed && css$k.dndDisabled) }),
+        return (React.createElement(FlexRow, { size: settings.sizes.dataTable.columnsConfigurationModal.columnRow, cx: wrapperClasses, ref: dndActorParams.ref, rawProps: { ...restEventHandlers }, alignItems: "top" },
+            React.createElement(DragHandle, { dragHandleIcon: ForwardRef$5, rawProps: { onTouchStart, onPointerDown }, isDisabled: !isDndAllowed, cx: cx$1(css$k.dragHandle, !isDndAllowed && css$k.dndDisabled) }),
             React.createElement(Checkbox, { key: column.key, label: props.renderItem ? props.renderItem(props.column) : column.caption, value: isVisible, onValueChange: toggleVisibility, isReadonly: column.isAlwaysVisible || column.isLocked, cx: css$k.checkbox }),
             React.createElement(FlexRow, { size: null, cx: css$k.pinIconButton },
                 React.createElement(PinIconButton, { pinPosition: pinPosition, canUnpin: !isPinnedAlways, onTogglePin: togglePin })),
@@ -4912,11 +4665,11 @@ 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":"ezH1dP","main-panel":"H1zXXq","mainPanel":"H1zXXq","group":"gcRA2i","group-title":"_0f-S-I","groupTitle":"_0f-S-I","group-items":"x2dGzg","groupItems":"x2dGzg","no-data":"J7KE8Y","noData":"J7KE8Y","no-data-title":"_8GkiY-","noDataTitle":"_8GkiY-","no-data-sub-title":"pQv98D","noDataSubTitle":"pQv98D","h-divider":"FqJouG","hDivider":"FqJouG","search-area":"ZO2J7U","searchArea":"ZO2J7U","subgroup-accordion":"imNgkR","subgroupAccordion":"imNgkR","subgroup":"ZB4OCu","subgroup-title":"PaNCjj","subgroupTitle":"PaNCjj"};
+var css$j = {"root":"_34usSb","main-panel":"tFE07k","mainPanel":"tFE07k","group":"TNQxZQ","group-title":"ZmdI-4","groupTitle":"ZmdI-4","group-items":"w2bVG-","groupItems":"w2bVG-","no-data":"WZ4Mdd","noData":"WZ4Mdd","no-data-title":"_-7iFgQ","noDataTitle":"_-7iFgQ","no-data-sub-title":"z3dKfW","noDataSubTitle":"z3dKfW","h-divider":"MgAQE6","hDivider":"MgAQE6","search-area":"qHlqOe","searchArea":"qHlqOe","subgroup-accordion":"lVhHDG","subgroupAccordion":"lVhHDG","subgroup":"n33Vcd","subgroup-title":"tT74NN","subgroupTitle":"tT74NN"};
 
 const renderGroupTitle = (title, amount) => (React.createElement(FlexRow, { cx: css$j.group },
     React.createElement(Text, { size: "none", cx: css$j.groupTitle }, title),
-    React.createElement(CountIndicator, { caption: amount, color: "neutral", size: settings.dataTable.sizes.columnsConfigurationModal.countIndicator }),
+    React.createElement(CountIndicator, { caption: amount, color: "neutral", size: settings.sizes.dataTable.columnsConfigurationModal.countIndicator }),
     React.createElement(FlexSpacer, null)));
 function ColumnsConfigurationModal(props) {
     const i18n$1 = i18n.tables.columnsConfigurationModal;
@@ -4961,13 +4714,13 @@ 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, 'uui-columns-config-modal'], height: "95dvh", maxHeight: "95dvh" },
+        React.createElement(ModalWindow, { cx: css$j.root, height: "95dvh", maxHeight: "95dvh", width: settings.sizes.dataTable.columnsConfigurationModal.width },
             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 }),
+                React.createElement(SearchInput, { size: settings.sizes.dataTable.columnsConfigurationModal.search, value: searchValue, onValueChange: setSearchValue, placeholder: i18n$1.searchPlaceholder }),
                 React.createElement(Dropdown, { closeOnTargetClick: true, renderBody: () => (React.createElement(DropdownMenuBody, { minWidth: 100 },
                         React.createElement(DropdownMenuButton, { caption: i18n$1.clearAllButton, onClick: uncheckAll }),
-                        React.createElement(DropdownMenuButton, { caption: i18n$1.selectAllButton, onClick: checkAll }))), renderTarget: (props) => (React.createElement(Button, { ...props, fill: "none", icon: settings.dataTable.icons.columnsConfigurationModal.menuIcon, size: settings.dataTable.sizes.columnsConfigurationModal.menuButton, color: "secondary", isDropdown: false })) })),
+                        React.createElement(DropdownMenuButton, { caption: i18n$1.selectAllButton, onClick: checkAll }))), renderTarget: (props) => (React.createElement(Button, { ...props, fill: "none", icon: ForwardRef$g, size: settings.sizes.dataTable.columnsConfigurationModal.search, color: "secondary", isDropdown: false })) })),
             React.createElement(Panel, { background: "surface-main", cx: css$j.mainPanel },
                 React.createElement(ScrollBars, null,
                     renderVisible(),
@@ -4976,7 +4729,7 @@ function ColumnsConfigurationModal(props) {
                         React.createElement(Text, { cx: css$j.noDataTitle }, i18n$1.noResultsFound.title),
                         React.createElement(Text, { cx: css$j.noDataSubTitle }, i18n$1.noResultsFound.subTitle))))),
             React.createElement(ModalFooter, { borderTop: true },
-                React.createElement(LinkButton, { icon: settings.dataTable.icons.columnsConfigurationModal.resetIcon, caption: i18n$1.resetToDefaultButton, onClick: reset }),
+                React.createElement(LinkButton, { icon: ForwardRef$f, caption: i18n$1.resetToDefaultButton, onClick: reset }),
                 React.createElement(FlexSpacer, null),
                 React.createElement(Button, { fill: "none", color: "secondary", caption: i18n$1.cancelButton, onClick: close }),
                 !hasAnySelectedColumns ? (React.createElement(Tooltip, { content: i18n$1.enableAtLeastOneColumnMessage, placement: "top-end", color: "critical" }, applyButton)) : (applyButton)))));
@@ -4986,12 +4739,12 @@ function SubGroup(props) {
     const { title, items, renderItem } = props;
     const isCollapsible = !!title;
     if (items.length) {
-        const content = (React.createElement(FlexRow, { cx: css$j.groupItems, size: settings.dataTable.sizes.columnsConfigurationModal.columnRow }, items.map((c) => (React.createElement(ColumnRow, { column: c, key: c.key, renderItem: renderItem })))));
+        const content = (React.createElement(FlexRow, { cx: css$j.groupItems, size: settings.sizes.dataTable.columnsConfigurationModal.columnRow }, items.map((c) => (React.createElement(ColumnRow, { column: c, key: c.key, renderItem: renderItem })))));
         if (isCollapsible) {
             const renderTitle = (isOpened) => {
-                const toggleIcon = settings.dataTable.icons.columnsConfigurationModal[isOpened ? 'expandedIcon' : 'collapsedIcon'];
+                const toggleIcon = isOpened ? ForwardRef$Q : ForwardRef$v;
                 return (React.createElement(FlexRow, { cx: cx$1(css$j.subgroup) },
-                    React.createElement(IconContainer, { icon: toggleIcon }),
+                    React.createElement(IconContainer, { size: settings.sizes.dataTable.columnsConfigurationModal.subgroupIcon, 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));
@@ -5001,6 +4754,8 @@ function SubGroup(props) {
     return null;
 }
 
+var css$i = {"listContainer":"dNolJx","header":"HvUXWk","group":"_9sfer-","stickyHeader":"gEt26-"};
+
 const getChildrenAndRest = (row, rows) => {
     const firstNotChildIndex = rows.findIndex((other) => other.depth < row.depth || (row.depth === other.depth && other.isPinned));
     if (firstNotChildIndex === -1) {
@@ -5014,8 +4769,6 @@ const getChildrenAndRest = (row, rows) => {
     return [children, rest];
 };
 
-var css$i = {"listContainer":"J7o6iI","header":"ISwhuM","group":"Bh8cBx","stickyHeader":"OtRXBK"};
-
 function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
     const rowRef = useRef();
     const childrenPinnedTop = row.isPinned ? (top + (rowRef.current?.clientHeight ?? 0)) : top;
@@ -5054,7 +4807,147 @@ function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, r
             React__default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
 }
 
-var css$h = {"root":"KR-qVQ","sticky-header":"_83SwV-","stickyHeader":"_83SwV-","no-results":"od9FT-","noResults":"od9FT-","icon":"xhBq-S","title":"ptq5gZ"};
+var _path$4, _path2, _path3, _path4, _path5, _path6, _g, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14, _path15, _path16, _path17, _path18, _path19, _path20, _path21, _path22, _path23, _path24, _defs;
+function _extends$4() { return _extends$4 = 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$4.apply(null, arguments); }
+var SvgEmptyTable = function SvgEmptyTable(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
+    width: 232,
+    height: 180,
+    viewBox: "0 0 232 180",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ref: ref
+  }, props), /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#hhlv34u68tyvn02z_a)"
+  }, _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+    d: "M150.585 1.535C49.483-11.495 27.481 61.805 45.725 97.481c10.581 20.69-39.64 70.792 17.744 81.468 27.538 5.123 36-13.341 62.433-10.655 35.4 3.6 148.167-4.73 88.349-78.915-31.713-39.335 1.026-79.506-63.666-87.844Z",
+    fill: "#F5F6FA"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    d: "m58.069 136.51-.654 4.238-1.27-5.38a58.934 58.934 0 0 0-11.462-4.965l-.083 5.636-2.545-6.393a55.094 55.094 0 0 0-13.655-1.854l.704 6.178-3.356-6.108c-4.151.183-8.256.946-12.195 2.268l2.33 3.525s-2.173-1.597-4.084-2.896a40.951 40.951 0 0 0-10.833 6.285 85.492 85.492 0 0 0 12.575 10.527c2.482-.637 5.127-1.279 5.127-1.279l-3.261 2.537a69.366 69.366 0 0 0 13.283 6.865c2.346-1.353 5.416-3.269 5.416-3.269l-3.554 3.931a42.226 42.226 0 0 0 15.45 2.359l4.259-4.213-1.697 4.001c7.002-.848 14.144-3.902 20.95-10.344-1.621-3.869-5.768-8.073-11.445-11.649Z",
+    fill: "#9BDEFF"
+  })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M.557 136.978a.413.413 0 0 1 .475-.342l68.549 11.118a.414.414 0 0 1-.133.817L.9 137.453a.415.415 0 0 1-.342-.475Z",
+    fill: "#fff"
+  })), _path4 || (_path4 = /*#__PURE__*/React.createElement("path", {
+    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"
+  })), _path5 || (_path5 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    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: "hhlv3430y8ih0mnts_b",
+    style: {
+      maskType: "alpha"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: 81,
+    y: 22,
+    width: 100,
+    height: 104
+  }, _path6 || (_path6 = /*#__PURE__*/React.createElement("path", {
+    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(#hhlv3430y8ih0mnts_b)",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M69.817 99.247a.414.414 0 0 1 .585-.003l50.88 50.483a.414.414 0 0 1-.583.588l-50.88-50.483a.414.414 0 0 1-.002-.585ZM72.802 28.407a.414.414 0 0 1 .553.192l63.6 131.172a.413.413 0 1 1-.745.361L72.61 28.96a.414.414 0 0 1 .192-.553Z",
+    fill: "#fff"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M142.576 6.515a.415.415 0 0 1 .087.58L60.185 118.817a.413.413 0 1 1-.665-.491L141.997 6.603a.414.414 0 0 1 .579-.088ZM197.977 60.314c.181.14.214.4.075.58l-76.734 99.311a.414.414 0 0 1-.655-.506l76.734-99.31a.413.413 0 0 1 .58-.075ZM192.316 43.44a.413.413 0 0 1-.103.576L60.089 135.878a.414.414 0 0 1-.473-.68L191.74 43.336a.414.414 0 0 1 .576.104Z",
+    fill: "#fff"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M91.966 11.532a.414.414 0 0 1 .585-.021l129.252 120a.414.414 0 0 1-.563.606l-129.252-120a.414.414 0 0 1-.022-.585ZM75.232 2.769a.414.414 0 0 1 .568.143l93.554 156.828a.414.414 0 1 1-.711.424L75.089 3.336a.414.414 0 0 1 .143-.567ZM125.643.329a.414.414 0 0 1 .584.041l71.81 82.759a.413.413 0 1 1-.625.542L125.602.913a.414.414 0 0 1 .041-.584Z",
+    fill: "#fff"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M67.271 75.369a.414.414 0 0 1 .547-.209l156.745 70.345a.413.413 0 1 1-.339.755L67.479 75.916a.414.414 0 0 1-.208-.547Z",
+    fill: "#fff"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M159.279 8.938a.414.414 0 0 1 .265.522L101.278 187.39a.413.413 0 1 1-.787-.258l58.266-177.93a.414.414 0 0 1 .522-.265Z",
+    fill: "#fff"
+  }), /*#__PURE__*/React.createElement("path", {
+    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"
+  }))), _path7 || (_path7 = /*#__PURE__*/React.createElement("path", {
+    d: "M180.287 30.828H81.39v-3.724a4.966 4.966 0 0 1 4.966-4.966H175.3a4.963 4.963 0 0 1 4.986 4.965v3.725Z",
+    fill: "#fff"
+  })), _path8 || (_path8 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M177.05 22.893a4.548 4.548 0 0 0-1.748-.341H86.356a4.552 4.552 0 0 0-4.552 4.552v3.31h98.069v-3.31a4.55 4.55 0 0 0-2.823-4.211Zm-1.75-1.169a5.375 5.375 0 0 1 4.989 3.316c.272.654.412 1.355.412 2.064v3.724a.414.414 0 0 1-.414.413H81.39a.414.414 0 0 1-.413-.413v-3.724a5.38 5.38 0 0 1 5.379-5.38H175.3Z",
+    fill: "#1D1E26"
+  })), _path9 || (_path9 = /*#__PURE__*/React.createElement("path", {
+    d: "M87.324 28.217a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6ZM93.597 28.217a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6ZM99.866 28.217a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6Z",
+    fill: "#1D1E26"
+  })), _path10 || (_path10 = /*#__PURE__*/React.createElement("path", {
+    d: "M151.71 47.806H63.614a4.986 4.986 0 0 0-4.986 4.986v93.062a4.986 4.986 0 0 0 4.986 4.986h88.096a4.986 4.986 0 0 0 4.987-4.986V52.792a4.987 4.987 0 0 0-4.987-4.986Z",
+    fill: "#fff"
+  })), _path11 || (_path11 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M63.614 48.22a4.572 4.572 0 0 0-4.572 4.572v93.062a4.572 4.572 0 0 0 4.572 4.572h88.096a4.572 4.572 0 0 0 4.573-4.572V52.792a4.572 4.572 0 0 0-4.573-4.573H63.614Zm-5.4 4.572a5.4 5.4 0 0 1 5.4-5.4h88.096a5.4 5.4 0 0 1 5.4 5.4v93.062a5.4 5.4 0 0 1-5.4 5.4H63.614a5.4 5.4 0 0 1-5.4-5.4V52.792Z",
+    fill: "#1D1E26"
+  })), _path12 || (_path12 = /*#__PURE__*/React.createElement("path", {
+    d: "M157.11 56.081H58.214v-3.724a4.986 4.986 0 0 1 4.986-4.965h88.924a4.988 4.988 0 0 1 4.986 4.965v3.724Z",
+    fill: "#008ACE"
+  })), _path13 || (_path13 = /*#__PURE__*/React.createElement("path", {
+    d: "M64.566 53.474a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6ZM70.835 53.474a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6ZM77.103 53.474a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6Z",
+    fill: "#1D1E26"
+  })), _path14 || (_path14 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M48.968 36.067a.414.414 0 0 1 .585.018l7.005 7.448a.414.414 0 1 1-.603.567l-7.005-7.448a.414.414 0 0 1 .018-.585ZM46.99 44.047a.414.414 0 0 1 .554-.188l6.269 3.104a.414.414 0 0 1-.367.742l-6.27-3.104a.414.414 0 0 1-.187-.554ZM183.97 9.366a.414.414 0 0 1 .213.545l-2.896 6.62a.414.414 0 0 1-.759-.331l2.897-6.621a.414.414 0 0 1 .545-.213ZM192.373 9.866a.415.415 0 0 1 0 .585l-8.276 8.276a.414.414 0 1 1-.585-.585l8.275-8.276a.415.415 0 0 1 .586 0ZM192.464 19.108a.413.413 0 0 1-.23.538l-6.207 2.483a.414.414 0 0 1-.308-.768l6.207-2.483a.414.414 0 0 1 .538.23ZM182.977 54.848c.228 0 .413.185.413.414v58.345a.414.414 0 1 1-.827 0V55.262c0-.229.185-.414.414-.414Z",
+    fill: "#1D1E26"
+  })), _path15 || (_path15 = /*#__PURE__*/React.createElement("path", {
+    d: "M133.371 157.945c23.196 0 42-18.804 42-42s-18.804-42-42-42-42 18.804-42 42 18.804 42 42 42Z",
+    fill: "#008ACE"
+  })), _path16 || (_path16 = /*#__PURE__*/React.createElement("path", {
+    d: "M133.371 149.669c18.625 0 33.724-15.099 33.724-33.724 0-18.625-15.099-33.724-33.724-33.724-18.625 0-33.724 15.099-33.724 33.724 0 18.625 15.099 33.724 33.724 33.724Z",
+    fill: "#fff"
+  })), _path17 || (_path17 = /*#__PURE__*/React.createElement("path", {
+    d: "M117.312 113.565a3.807 3.807 0 1 0 0-7.614 3.807 3.807 0 0 0 0 7.614ZM149.435 113.565a3.806 3.806 0 1 0 0-7.612 3.806 3.806 0 0 0 0 7.612Z",
+    fill: "#1D1E26"
+  })), _path18 || (_path18 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M133.38 123.952c-4.592 0-8.525 2.259-10.468 5.423a.827.827 0 1 1-1.41-.866c2.27-3.697 6.762-6.212 11.878-6.212 5.108 0 9.646 2.485 11.882 6.22a.827.827 0 1 1-1.42.85c-1.902-3.176-5.863-5.415-10.462-5.415Z",
+    fill: "#1D1E26"
+  })), _path19 || (_path19 = /*#__PURE__*/React.createElement("path", {
+    d: "m170.965 137.356-7.822 9.777 1.668 1.334 7.822-9.777-1.668-1.334Z",
+    fill: "#1D1E26"
+  })), _path20 || (_path20 = /*#__PURE__*/React.createElement("path", {
+    d: "M200.774 163.345c.579 2.143-3.331 6.852-5.553 6.939-7.035.277-28.73-23.913-28.73-23.913l4.44-5.553s28.122 16.142 29.843 22.527Z",
+    fill: "#9BDEFF"
+  })), _path21 || (_path21 = /*#__PURE__*/React.createElement("path", {
+    d: "M204.424 178.378a6.223 6.223 0 0 0 6.223-6.224 6.224 6.224 0 1 0-6.223 6.224Z",
+    fill: "#9BDEFF"
+  })), _path22 || (_path22 = /*#__PURE__*/React.createElement("path", {
+    d: "M199.586 168.269a6.173 6.173 0 0 1 3.311-2.131l-2.123-1.697c-.464 2.069-2.959 4.995-4.837 5.69l2.296 1.837a6.173 6.173 0 0 1 1.353-3.699Z",
+    fill: "#1D1E26"
+  })), _path23 || (_path23 = /*#__PURE__*/React.createElement("path", {
+    d: "m72.357 138.314-3.5 2.955 2.722-5.317a67.379 67.379 0 0 0-5.958-12.509l-4.014 4.514 2.38-7.076a63.412 63.412 0 0 0-9.932-11.611l-3.724 5.549 1.54-7.448a50.152 50.152 0 0 0-11.628-7.179l-.567 4.605s-.675-2.896-1.333-5.38a44.62 44.62 0 0 0-13.315-2.896 96.722 96.722 0 0 0 2.983 17.856c2.483 1.311 5.119 2.751 5.119 2.751l-4.461-.347a79.474 79.474 0 0 0 6.091 15.385c2.897.637 6.745 1.353 6.745 1.353l-5.677.55c2.871 4.965 6.492 9.6 11.069 13.349l6.45-.269-4.191 1.99c6.356 4.49 14.37 7.3 24.48 7.105 1.398-4.332.902-10.816-1.279-17.93Z",
+    fill: "#008ACE"
+  })), _path24 || (_path24 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    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: "hhlv34u68tyvn02z_a"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    transform: "translate(.552)",
+    d: "M0 0h230.897v180H0z"
+  })))));
+};
+var ForwardRef$4 = /*#__PURE__*/forwardRef(SvgEmptyTable);
+
+var css$h = {"root":"SFW5QM","sticky-header":"TRWsOr","stickyHeader":"TRWsOr","no-results":"waW0l7","noResults":"waW0l7","icon":"isJ5qq","title":"sMIN7t"};
 
 function DataTable(props) {
     const { uuiModals } = useUuiContext();
@@ -5062,13 +4955,13 @@ 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.row, columnsGap: props.columnsGap, borderBottom: props.border, ...rowProps, key: rowProps.rowKey, cx: css$h.cell }));
+        return (React.createElement(DataTableRow, { size: props.size || settings.sizes.dataTable.body.row.default, 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 ?? [];
     const renderNoResultsBlock = React.useCallback(() => {
         return (React.createElement("div", { className: css$h.noResults }, props.renderNoResultsBlock ? (props.renderNoResultsBlock?.()) : (React.createElement(React.Fragment, null,
-            React.createElement(IconContainer, { cx: css$h.icon, icon: settings.dataTable.icons.emptyTable }),
+            React.createElement(IconContainer, { cx: css$h.icon, icon: ForwardRef$4 }),
             React.createElement(Text, { cx: css$h.title, fontSize: "24", lineHeight: "30", color: "primary", fontWeight: "600" }, i18n.tables.noResultsBlock.title),
             React.createElement(Text, { fontSize: "16", lineHeight: "24", color: "primary" }, i18n.tables.noResultsBlock.message)))));
     }, [props.renderNoResultsBlock]);
@@ -5087,7 +4980,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.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(DataTableHeaderRow, { columns: columns, columnGroups: props.columnGroups, onConfigButtonClick: props.showColumnsConfig && onConfigurationButtonClick, selectAll: props.selectAll, size: props.headerSize || settings.sizes.dataTable.header.row.default, textCase: props.headerTextCase, allowColumnsReordering: props.allowColumnsReordering, allowColumnsResizing: props.allowColumnsResizing, showFoldAll: props.showFoldAll, value: { ...props.value, columnsConfig: config }, onValueChange: props.onValueChange, columnsGap: props.columnsGap }),
             React.createElement("div", { className: cx$1(uuiScrollShadows.top, {
                     [uuiScrollShadows.topVisible]: scrollShadows.verticalTop,
                 }) })),
@@ -5103,9 +4996,9 @@ function DataTable(props) {
                 } }))));
 }
 
-var css$g = {"root":"P18vme"};
+var css$g = {"root":"_4X2Q75"};
 
-var css$f = {"root":"_0qb63-","burger-content":"eCieSN","burgerContent":"eCieSN"};
+var css$f = {"root":"TsvX05","burger-content":"_2lytht","burgerContent":"_2lytht"};
 
 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); }
@@ -5148,7 +5041,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
 };
 var ForwardRef$2 = /*#__PURE__*/forwardRef(SvgNavigationArrowDownOutline);
 
-var css$e = {"root":"_8RheDr","button-primary":"_4Ha7rB","buttonPrimary":"_4Ha7rB","button-secondary":"OPx-IS","buttonSecondary":"OPx-IS","hasIcon":"O0NilE","dropdown":"pSd8jr"};
+var css$e = {"root":"mKTtlw","button-primary":"Z6AQay","buttonPrimary":"Z6AQay","button-secondary":"_8wVmR9","buttonSecondary":"_8wVmR9","hasIcon":"_2hwIFt","dropdown":"tja-v1"};
 
 const BurgerButton = /* @__PURE__ */withMods(Button$1, (props) => [
     css$e.root,
@@ -5159,13 +5052,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":"YSPNv0","searchInput":"YSPNv0"};
+var css$d = {"search-input":"ZmvXKA","searchInput":"ZmvXKA"};
 
 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 }));
+    return (React.createElement(TextInput$1, { cx: cx(css$d.searchInput, 'uui-main_menu-burger-search'), iconPosition: "left", icon: ForwardRef$O, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$R }));
 }
 
-var css$c = {"root":"_6SG5mP","group-header":"hD78uI","groupHeader":"hD78uI","group-name":"rgf4KP","groupName":"rgf4KP","line":"BX4Qw3"};
+var css$c = {"root":"p-qyR-","group-header":"R0Ldu5","groupHeader":"R0Ldu5","group-name":"VMJaVC","groupName":"VMJaVC","line":"oiQyxP"};
 
 function BurgerGroupHeader(props) {
     return (React.createElement("div", { className: cx(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
@@ -5173,7 +5066,7 @@ function BurgerGroupHeader(props) {
         React.createElement("span", { className: css$c.groupName }, props.caption)));
 }
 
-var css$b = {"root":"_5XKwn-","type-primary":"KGy1WU","typePrimary":"KGy1WU","type-secondary":"LEtu0N","typeSecondary":"LEtu0N"};
+var css$b = {"root":"_2gPlAZ","type-primary":"_2i74T5","typePrimary":"_2i74T5","type-secondary":"lGbLz1","typeSecondary":"lGbLz1"};
 
 const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { type, ...clickableProps } = props;
@@ -5195,7 +5088,7 @@ const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         props.isDropdown && (React.createElement(IconContainer, { icon: ForwardRef$Q, flipY: props.isOpen }))));
 });
 
-var css$a = {"dropdown-body":"V6hOxG","dropdownBody":"V6hOxG"};
+var css$a = {"dropdown-body":"Z2j47i","dropdownBody":"Z2j47i"};
 
 class MainMenuDropdown extends React.Component {
     render() {
@@ -5253,12 +5146,12 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
 };
 var ForwardRef$1 = /*#__PURE__*/forwardRef(SvgNavigationGlobalMenuOutlineOutline);
 
-var css$9 = {"global-menu-btn":"_3L1qFB","globalMenuBtn":"_3L1qFB","global-menu-icon":"EZHZmN","globalMenuIcon":"EZHZmN"};
+var css$9 = {"global-menu-btn":"wNUZop","globalMenuBtn":"wNUZop","global-menu-icon":"JNzjPq","globalMenuIcon":"JNzjPq"};
 
 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":"dCKis-","open":"HTe9ly","folding-arrow":"T5YGT-","foldingArrow":"T5YGT-"};
+var css$8 = {"container":"cRJ-ai","open":"VKzsYJ","folding-arrow":"_8yChxM","foldingArrow":"_8yChxM"};
 
 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 }),
@@ -5266,15 +5159,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":"_2Wc6jW","searchInput":"_2Wc6jW"};
+var css$7 = {"search-input":"WMhNvn","searchInput":"WMhNvn"};
 
-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 })) })));
+const MainMenuSearch = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement(IEditableDebouncer, { ...props, render: (iEditable) => (React.createElement(TextInput$1, { iconPosition: "left", icon: ForwardRef$O, 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":"IE9haA"};
+var css$6 = {"container":"p811VD"};
 
 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":"s1vbNs"};
+var css$5 = {"root":"dO7-tb"};
 
 const Anchor = /* @__PURE__ */withMods(Anchor$1, () => [css$5.root]);
 
@@ -5332,7 +5225,7 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgFileCloudUploadFill);
 
-var css$4 = {"root":"JjGMb7","drop-start":"jUtlka","dropStart":"jUtlka","drop-over":"ShKCZx","dropOver":"ShKCZx","link":"VI9VM4","drop-area":"iiEpup","dropArea":"iiEpup","drop-caption":"ZgFeTf","dropCaption":"ZgFeTf","icon-blue":"AYR3jt","iconBlue":"AYR3jt"};
+var css$4 = {"root":"wiBpBK","drop-start":"LRtNmY","dropStart":"LRtNmY","drop-over":"_-0fVrd","dropOver":"_-0fVrd","link":"QPedgC","drop-area":"FmarRc","dropArea":"FmarRc","drop-caption":"jtcgFR","dropCaption":"jtcgFR","icon-blue":"Y-VxcI","iconBlue":"Y-VxcI"};
 
 function DropSpot(props) {
     const getInfoText = typeof props.infoText === 'string'
@@ -5350,19 +5243,19 @@ function DropSpot(props) {
     return React.createElement(DropSpot$1, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
 }
 
-var css$3 = {"root":"NP0CYL"};
+var css$3 = {"root":"nD-H3Z","file-name":"unuYec","fileName":"unuYec","default-color":"_9nUO79","defaultColor":"_9nUO79","doc-color":"UaW9F0","docColor":"UaW9F0","xls-color":"M5K7qY","xlsColor":"M5K7qY","pdf-color":"bz0M3f","pdfColor":"bz0M3f","movie-color":"Gd5ynl","movieColor":"Gd5ynl","img-color":"znYdGw","imgColor":"znYdGw","mov-color":"Wz4lRA","movColor":"Wz4lRA","error-block":"dzn5Px","errorBlock":"dzn5Px","icons-block":"i4ZRyZ","iconsBlock":"i4ZRyZ"};
+
+var css$2 = {"root":"PhHXD-"};
 
 const SvgCircleProgress = /* @__PURE__ */React.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
     const insetRadius = props.size / 2 - 3;
     const circumference = insetRadius * Math.PI;
-    return (React.createElement("svg", { className: css$3.root, width: props.size, height: props.size, ref: ref, ...props.rawProps },
+    return (React.createElement("svg", { className: css$2.root, width: props.size, height: props.size, ref: ref, ...props.rawProps },
         React.createElement("circle", { strokeDasharray: circumference, strokeDashoffset: circumference - (props.progress / 100) * circumference, strokeWidth: insetRadius, fill: "transparent", r: insetRadius / 2, cx: props.size / 2, cy: props.size / 2 }),
         React.createElement("circle", { strokeWidth: 1, fill: "transparent", r: outsetRadius, cx: props.size / 2, cy: props.size / 2 })));
 });
 
-var css$2 = {"root":"xb24V-","file-name":"m--7Lz","fileName":"m--7Lz","default-color":"_3c-e7e","defaultColor":"_3c-e7e","doc-color":"_8Tc-t1","docColor":"_8Tc-t1","xls-color":"Dx8ECz","xlsColor":"Dx8ECz","pdf-color":"R5QGjo","pdfColor":"R5QGjo","movie-color":"_6TiB5E","movieColor":"_6TiB5E","img-color":"OIxd-g","imgColor":"OIxd-g","mov-color":"_7JwPwn","movColor":"_7JwPwn","error-block":"SeZuGz","errorBlock":"SeZuGz","icons-block":"H-ibQd","iconsBlock":"H-ibQd"};
-
 const FileCard = /* @__PURE__ */React.forwardRef((props, ref) => {
     const [isLoadingShow, setIsLoadingShow] = React.useState(true);
     const { file } = props;
@@ -5370,36 +5263,36 @@ const FileCard = /* @__PURE__ */React.forwardRef((props, ref) => {
         switch (extension) {
             case 'doc':
             case 'docx':
-                return React.createElement(IconContainer, { size: 24, icon: settings.fileCard.icons.docIcon, cx: css$2.docColor });
+                return React.createElement(IconContainer, { size: 24, icon: fileIcons.docIcon, cx: css$3.docColor });
             case 'xls':
             case 'xlsx':
-                return React.createElement(IconContainer, { size: 24, icon: settings.fileCard.icons.exelIcon, cx: css$2.xlsColor });
+                return React.createElement(IconContainer, { size: 24, icon: fileIcons.exelIcon, cx: css$3.xlsColor });
             case 'pdf':
-                return React.createElement(IconContainer, { size: 24, icon: settings.fileCard.icons.pdfIcon, cx: css$2.pdfColor });
+                return React.createElement(IconContainer, { size: 24, icon: fileIcons.pdfIcon, cx: css$3.pdfColor });
             case 'gif':
             case 'jpg':
             case 'jpeg':
             case 'svg':
             case 'png':
             case 'webp':
-                return React.createElement(IconContainer, { size: 24, icon: settings.fileCard.icons.imgIcon, cx: css$2.imgColor });
+                return React.createElement(IconContainer, { size: 24, icon: fileIcons.imgIcon, cx: css$3.imgColor });
             case 'avi':
             case 'mov':
             case 'mp4':
             case 'wmw':
             case 'mkv':
-                return React.createElement(IconContainer, { size: 24, icon: settings.fileCard.icons.videoIcon, cx: css$2.movColor });
+                return React.createElement(IconContainer, { size: 24, icon: fileIcons.videoIcon, cx: css$3.movColor });
             case 'csv':
             case 'xml':
-                return React.createElement(IconContainer, { size: 24, icon: settings.fileCard.icons.tableIcon, cx: css$2.defaultColor });
+                return React.createElement(IconContainer, { size: 24, icon: fileIcons.tableIcon, cx: css$3.defaultColor });
             case 'rtf':
             case 'txt':
-                return React.createElement(IconContainer, { size: 24, icon: settings.fileCard.icons.textIcon, cx: css$2.defaultColor });
+                return React.createElement(IconContainer, { size: 24, icon: fileIcons.textIcon, cx: css$3.defaultColor });
             case 'eml':
             case 'emlx':
-                return React.createElement(IconContainer, { size: 24, icon: settings.fileCard.icons.mailIcon, cx: css$2.defaultColor });
+                return React.createElement(IconContainer, { size: 24, icon: fileIcons.mailIcon, cx: css$3.defaultColor });
             default:
-                return React.createElement(IconContainer, { size: 24, icon: settings.fileCard.icons.fileIcon, cx: css$2.defaultColor });
+                return React.createElement(IconContainer, { size: 24, icon: fileIcons.fileIcon, cx: css$3.defaultColor });
         }
     };
     const { cx: componentCx, width, file: { progress, size, name, extension, error, abortXHR, }, onClick, } = props;
@@ -5416,10 +5309,10 @@ const FileCard = /* @__PURE__ */React.forwardRef((props, ref) => {
         setIsLoadingShow(() => false);
     };
     const renderErrorContent = () => (React.createElement(Tooltip, { content: file.error.message, placement: "bottom-start" },
-        React.createElement("div", { className: css$2.errorBlock },
-            React.createElement(IconContainer, { icon: settings.fileCard.icons.errorIcon, size: 12 }),
+        React.createElement("div", { className: css$3.errorBlock },
+            React.createElement(IconContainer, { icon: ForwardRef$y, size: 12 }),
             i18n.fileCard.failedUploadErrorMessage)));
-    const renderSuccessfulContent = () => (React.createElement(Text, { size: "none", fontSize: "14", lineHeight: "18", color: "tertiary" },
+    const renderSuccessfulContent = () => (React.createElement(Text, { size: "18", fontSize: "14", lineHeight: "18", color: "tertiary" },
         fileExtension && `${fileExtension.toUpperCase()}, `,
         isLoading && formatBytes((size / 100) * progress, 2, false) + i18n.fileCard.fileSizeProgress,
         formatBytes(size)));
@@ -5427,15 +5320,15 @@ const FileCard = /* @__PURE__ */React.forwardRef((props, ref) => {
         progress && progress < 100 && abortXHR();
         onClick();
     };
-    return (React.createElement(FlexCell, { ref: ref, cx: cx$1(css$2.root, 'uui-file_card', (isLoading || error?.isError) && uuiMod.loading, componentCx, error?.isError && uuiMod.error), minWidth: width, width: !width ? '100%' : undefined },
+    return (React.createElement(FlexCell, { ref: ref, cx: cx$1(css$3.root, 'uui-file_card', (isLoading || error?.isError) && uuiMod.loading, componentCx, error?.isError && uuiMod.error), minWidth: width, width: !width ? '100%' : undefined },
         React.createElement(FlexRow, { alignItems: "top", columnGap: "6" },
             fileExtension && getIcon(fileExtension),
             React.createElement(FlexCell, { width: "100%" },
-                React.createElement(Text, { size: "none", fontSize: "14", lineHeight: "18", color: (progress < 100 || error?.isError) ? 'tertiary' : 'primary', cx: css$2.fileName }, fileName),
+                React.createElement(Text, { size: "18", fontSize: "14", lineHeight: "18", color: (progress < 100 || error?.isError) ? 'tertiary' : 'primary', cx: css$3.fileName }, fileName),
                 error?.isError ? renderErrorContent() : renderSuccessfulContent()),
-            React.createElement("div", { className: cx$1(css$2.iconsBlock), onMouseEnter: mouseEnterHandler, onMouseLeave: mouseLeaveHandler },
+            React.createElement("div", { className: cx$1(css$3.iconsBlock), onMouseEnter: mouseEnterHandler, onMouseLeave: mouseLeaveHandler },
                 isLoadingShow && isLoading && React.createElement(SvgCircleProgress, { progress: progress, size: 18 }),
-                isCrossShow && React.createElement(IconButton, { icon: settings.fileCard.icons.closeIcon, onClick: removeHandler })))));
+                isCrossShow && React.createElement(IconButton, { icon: ForwardRef$R, onClick: removeHandler })))));
 });
 
 const getRecoveryMessageConfig = () => ({
@@ -5480,7 +5373,7 @@ const getErrorPageConfig = () => ({
     },
 });
 
-var css$1 = {"container":"YAiK-l"};
+var css$1 = {"container":"_3xPq9N"};
 
 const ErrorPage = (props) => {
     const isMobileScreen = isMobile();
@@ -5492,7 +5385,7 @@ const ErrorPage = (props) => {
             props?.supportLink && React__default.createElement("div", { className: "uui-error-support-link" }, props?.supportLink))));
 };
 
-var css = {"recovery-spinner":"_8P6YFH","recoverySpinner":"_8P6YFH","recovery-message":"m-MAeC","recoveryMessage":"m-MAeC","modal-blocker":"PEhmlO","modalBlocker":"PEhmlO","modalFadeIn":"nKapqu"};
+var css = {"recovery-spinner":"-dl2zQ","recoverySpinner":"-dl2zQ","recovery-message":"-PEZGp","recoveryMessage":"-PEZGp","modal-blocker":"u19foY","modalBlocker":"u19foY","modalFadeIn":"_1HM822"};
 
 function ErrorHandler(props) {
     const { uuiNotifications, uuiModals, uuiApi } = useUuiContext();
@@ -5543,5 +5436,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, getErrorPageConfig, getHighlightRanges, getHighlightedSearchMatches, getRecoveryMessageConfig, i18n, propsMods, rangeDatePickerPresets, renderCell, renderDropMarkers, settings, useColumnsWithFilters, useForm, uuiDatePickerBody, uuiRangeDatePickerBody, uuiTimePicker };
+export { Accordion, Alert, Anchor, AvatarStack, Badge, Blocker, Burger, BurgerButton, BurgerGroupHeader, BurgerSearch, Button, Calendar, Checkbox, CheckboxGroup, ClearNotification, ColumnHeaderDropdown, ColumnsConfigurationModal, ConfirmationModal, ControlGroup, CountIndicator, DataPickerBody, DataPickerFooter, 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, PickerListRow, PickerModal, PickerToggler, PickerTogglerTag, PresetsPanel, ProgressBar, RadioGroup, RadioInput, RangeDatePicker, RangeDatePickerBody, RangeDatePickerInput, Rating, RichTextView, ScrollBars, SearchInput, Slider, Snackbar, Spinner, StatusIndicator, SuccessAlert, SuccessNotification, SvgCircleProgress, Switch, TabButton, Tag, Text, TextArea, TextInput, TextPlaceholder, TimePicker, TimePickerBody, 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