@epam/uui 5.13.2 → 5.13.3-beta.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import * as uuiComponents from '@epam/uui-components';
-import { Clickable, IconContainer, RadioInput as RadioInput$1, TextInput as TextInput$1, ControlGroup as ControlGroup$1, NumericInput as NumericInput$1, TextArea as TextArea$1, Dropdown as Dropdown$1, Anchor as Anchor$1, FlexRow as FlexRow$1, FlexSpacer, Text as Text$1, FlexCell as FlexCell$1, VPanel, ScrollBars as ScrollBars$1, AvatarStack as AvatarStack$1, Spinner as Spinner$1, Paginator as Paginator$1, DragHandle, Blocker as Blocker$1, ModalBlocker as ModalBlocker$1, ModalWindow as ModalWindow$1, Snackbar as Snackbar$1, InputAddon as InputAddon$1, Slider as Slider$1, Calendar as Calendar$1, YearSelection, MonthSelection, Day, uuiDaySelection, PickerBodyBase, DataPickerRow as DataPickerRow$1, Avatar, usePickerModal, handleDataSourceKeyboard, PickerToggler as PickerToggler$1, usePickerInput, usePickerList, DataTableCell as DataTableCell$1, DataTableRow as DataTableRow$1, DataTableCellContainer, DataTableHeaderCell as DataTableHeaderCell$1, DataTableHeaderRow as DataTableHeaderRow$1, AdaptivePanel, useColumnsConfiguration, Accordion as Accordion$1, DataTableSelectionProvider, DataTableFocusProvider, Burger as Burger$1, Button as Button$1, DropSpot as DropSpot$1, UploadFileToggler, ErrorCatch } from '@epam/uui-components';
+import { Clickable, IconContainer, RadioInput as RadioInput$1, TextInput as TextInput$1, ControlGroup as ControlGroup$1, NumericInput as NumericInput$1, TextArea as TextArea$1, Dropdown as Dropdown$1, Anchor as Anchor$1, FlexSpacer, Text as Text$1, FlexCell as FlexCell$1, VPanel, ScrollBars as ScrollBars$1, AvatarStack as AvatarStack$1, Spinner as Spinner$1, Paginator as Paginator$1, DragHandle, Blocker as Blocker$1, ModalBlocker as ModalBlocker$1, ModalWindow as ModalWindow$1, Snackbar as Snackbar$1, InputAddon as InputAddon$1, Slider as Slider$1, Calendar as Calendar$1, YearSelection, MonthSelection, Day, uuiDaySelection, PickerBodyBase, DataPickerRow as DataPickerRow$1, Avatar, usePickerModal, handleDataSourceKeyboard, PickerToggler as PickerToggler$1, usePickerInput, usePickerList, DataTableCell as DataTableCell$1, DataTableRow as DataTableRow$1, DataTableCellContainer, DataTableHeaderCell as DataTableHeaderCell$1, DataTableHeaderRow as DataTableHeaderRow$1, AdaptivePanel, useColumnsConfiguration, Accordion as Accordion$1, DataTableSelectionProvider, DataTableFocusProvider, Burger as Burger$1, Button as Button$1, DropSpot as DropSpot$1, UploadFileToggler, ErrorCatch } from '@epam/uui-components';
 export { Avatar, DataTableCellContainer, FlexSpacer, IconContainer } from '@epam/uui-components';
-import { withMods, devLogger, uuiElement, cx as cx$1, uuiMarkers, IEditableDebouncer, UuiContext, uuiMod, getDir, directionMode, useVirtualList, useScrollShadows, isMobile, i18n as i18n$1, useUuiContext, isFocusReceiverInsideFocusLock, Lens, mobilePopperModifier, uuiDataTableHeaderCell, uuiDataTableHeaderGroupCell, usePrevious, useForceUpdate, getSeparatedValue, useArrayDataSource, orderBy, getOrderBetween, DndActor, uuiDndState, useColumnsConfig, uuiScrollShadows, Form as Form$1, useForm as useForm$1, formatBytes, useUuiError } from '@epam/uui-core';
+import { withMods, devLogger, uuiElement, cx as cx$1, uuiMarkers, IEditableDebouncer, UuiContext, uuiMod, getDir, isEventTargetInsideClickable, directionMode, useVirtualList, useScrollShadows, isMobile, i18n as i18n$1, useUuiContext, isFocusReceiverInsideFocusLock, Lens, mobilePopperModifier, uuiDataTableHeaderCell, uuiDataTableHeaderGroupCell, usePrevious, useForceUpdate, getSeparatedValue, useArrayDataSource, orderBy, getOrderBetween, DndActor, uuiDndState, useColumnsConfig, uuiScrollShadows, Form as Form$1, useForm as useForm$1, formatBytes, useUuiError } from '@epam/uui-core';
 import * as React from 'react';
 import React__default, { forwardRef, useContext, useRef, useState, useEffect, useReducer, useImperativeHandle, useCallback, useMemo, Fragment } from 'react';
 import cx from 'classnames';
@@ -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 SvgActionSearchOutline = function SvgActionSearchOutline(props, ref) {
+var SvgContentMinusOutline = function SvgContentMinusOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$O({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -71,16 +71,14 @@ var SvgActionSearchOutline = function SvgActionSearchOutline(props, ref) {
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$O || (_path$O = /*#__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: "M19 10.5H5v3h14v-3z"
   })));
 };
-var ForwardRef$O = /*#__PURE__*/forwardRef(SvgActionSearchOutline);
+var ForwardRef$O = /*#__PURE__*/forwardRef(SvgContentMinusOutline);
 
 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 SvgActionCalendarFill = function SvgActionCalendarFill(props, ref) {
+var SvgActionSearchOutline = function SvgActionSearchOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$N({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -88,14 +86,16 @@ var SvgActionCalendarFill = function SvgActionCalendarFill(props, ref) {
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$N || (_path$N = /*#__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"
+    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$N = /*#__PURE__*/forwardRef(SvgActionCalendarFill);
+var ForwardRef$N = /*#__PURE__*/forwardRef(SvgActionSearchOutline);
 
 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 SvgNotificationInfoOutline = function SvgNotificationInfoOutline(props, ref) {
+var SvgActionCalendarFill = function SvgActionCalendarFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$M({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -103,14 +103,14 @@ var SvgNotificationInfoOutline = function SvgNotificationInfoOutline(props, ref)
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$M || (_path$M = /*#__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"
+    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$M = /*#__PURE__*/forwardRef(SvgNotificationInfoOutline);
+var ForwardRef$M = /*#__PURE__*/forwardRef(SvgActionCalendarFill);
 
 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) {
+var SvgNotificationInfoOutline = function SvgNotificationInfoOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$L({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -118,16 +118,14 @@ var SvgFileFileWordFill = function SvgFileFileWordFill(props, ref) {
     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"
+    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$L = /*#__PURE__*/forwardRef(SvgFileFileWordFill);
+var ForwardRef$L = /*#__PURE__*/forwardRef(SvgNotificationInfoOutline);
 
 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) {
+var SvgNotificationInfoFill = function SvgNotificationInfoFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$K({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -135,33 +133,154 @@ var SvgFileFileExcelFill = function SvgFileFileExcelFill(props, ref) {
     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"
+    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$K = /*#__PURE__*/forwardRef(SvgFileFileExcelFill);
+var ForwardRef$K = /*#__PURE__*/forwardRef(SvgNotificationInfoFill);
 
-var _path$J;
+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;
 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) {
+var SvgEmptyTable = function SvgEmptyTable(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), _path$J || (_path$J = /*#__PURE__*/React.createElement("path", {
+  }, props), /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#7iyl3cwgzxp868o8h_a)"
+  }, _path$J || (_path$J = /*#__PURE__*/React.createElement("path", {
+    d: "M150.585 1.535C49.483-11.495 27.481 61.805 45.725 97.481c10.581 20.69-39.64 70.792 17.744 81.468 27.538 5.123 36-13.341 62.433-10.655 35.4 3.6 148.167-4.73 88.349-78.915-31.713-39.335 1.026-79.506-63.666-87.844Z",
+    fill: "#F5F6FA"
+  })), _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: "7iyl3cyil2nzap39m_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(#7iyl3cyil2nzap39m_b)",
     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: "7iyl3cwgzxp868o8h_a"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    transform: "translate(.552)",
+    d: "M0 0h230.897v180H0z"
+  })))));
 };
-var ForwardRef$J = /*#__PURE__*/forwardRef(SvgFileFilePdfFill);
+var ForwardRef$J = /*#__PURE__*/forwardRef(SvgEmptyTable);
 
 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) {
+var SvgTableSortAscOutline = function SvgTableSortAscOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$I({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -169,16 +288,14 @@ var SvgFileFileImageFill = function SvgFileFileImageFill(props, ref) {
     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"
+    d: "M11 21V6.825L9.4 8.4 8 7l4-4 4 4-1.4 1.4L13 6.825V21h-2z"
   })));
 };
-var ForwardRef$I = /*#__PURE__*/forwardRef(SvgFileFileImageFill);
+var ForwardRef$I = /*#__PURE__*/forwardRef(SvgTableSortAscOutline);
 
-var _path$H, _path2$5;
+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 SvgFileFileVideoFill = function SvgFileFileVideoFill(props, ref) {
+var SvgTableSortDescOutline = function SvgTableSortDescOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$H({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -186,18 +303,14 @@ var SvgFileFileVideoFill = function SvgFileFileVideoFill(props, ref) {
     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$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"
+    d: "M13 3v14.175l1.6-1.575L16 17l-4 4-4-4 1.4-1.4 1.6 1.575V3h2z"
   })));
 };
-var ForwardRef$H = /*#__PURE__*/forwardRef(SvgFileFileVideoFill);
+var ForwardRef$H = /*#__PURE__*/forwardRef(SvgTableSortDescOutline);
 
 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) {
+var SvgActionDragIndicatorOutline = function SvgActionDragIndicatorOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$G({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -205,16 +318,14 @@ var SvgFileFileTableFill = function SvgFileFileTableFill(props, ref) {
     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"
+    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"
   })));
 };
-var ForwardRef$G = /*#__PURE__*/forwardRef(SvgFileFileTableFill);
+var ForwardRef$G = /*#__PURE__*/forwardRef(SvgActionDragIndicatorOutline);
 
 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) {
+var SvgNavigationMoreVertOutline = function SvgNavigationMoreVertOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$F({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -223,15 +334,15 @@ var SvgFileFileTextFill = function SvgFileFileTextFill(props, ref) {
     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",
+    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$F = /*#__PURE__*/forwardRef(SvgFileFileTextFill);
+var ForwardRef$F = /*#__PURE__*/forwardRef(SvgNavigationMoreVertOutline);
 
 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) {
+var SvgNavigationRefreshOutline = function SvgNavigationRefreshOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$E({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -239,16 +350,14 @@ var SvgFileFileEmlFill = function SvgFileFileEmlFill(props, ref) {
     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"
+    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(SvgFileFileEmlFill);
+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 SvgFileFileFill = function SvgFileFileFill(props, ref) {
+var SvgActionLockFill = function SvgActionLockFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$D({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -256,188 +365,567 @@ var SvgFileFileFill = function SvgFileFileFill(props, ref) {
     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"
+    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$D = /*#__PURE__*/forwardRef(SvgFileFileFill);
+var ForwardRef$C = /*#__PURE__*/forwardRef(SvgTableGroupColumnLeftFill);
 
-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,
+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",
+    clipRule: "evenodd"
+  })));
 };
-const systemIcons = {
-    clear: ForwardRef$R,
-    foldingArrow: ForwardRef$Q,
-    accept: ForwardRef$P,
-    search: ForwardRef$O,
-    calendar: ForwardRef$N,
-    info: ForwardRef$M,
+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);
 
-const settings = {
-    sizes: {
-        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',
-        },
-        alert: {
-            action: {
-                36: '24',
-                48: '30',
-            },
-        },
-        notificationCard: {
-            action: '30',
-        },
-        tag: {
-            countIndicator: {
-                18: '12',
-                24: '18',
-                30: '18',
-                36: '18',
-                42: '24',
-                48: '24',
-            },
+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 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',
+        },
+    },
+};
+const buttonSettings = {
+    icons: {
+        clearIcon: ForwardRef$R,
+        dropdownIcon: ForwardRef$Q,
+    },
+    sizes: {
+        default: '36',
+    },
+};
+const checkboxSettings = {
+    icons: {
+        checkIcon: ForwardRef$P,
+        indeterminateIcon: ForwardRef$O,
+    },
+    sizes: {
+        default: '18',
+    },
+};
+const countIndicatorSettings = {
+    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,
         },
-        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',
-                },
-            },
+        body: {
+            foldingIcon: ForwardRef$Q,
+        },
+        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,
         },
-        rowAddons: {
-            defaults: {
-                icon: '18',
-                indentUnit: 24,
-                indentWidth: 18,
+    },
+    sizes: {
+        header: {
+            row: '36',
+            iconMap: {
+                36: '18',
+                48: '18',
+                60: '18',
             },
-            checkbox: {
+        },
+        body: {
+            row: '36',
+            checkboxMap: {
                 24: '12',
                 30: '18',
                 36: '18',
@@ -445,7 +933,7 @@ const settings = {
                 48: '18',
                 60: '18',
             },
-            icon: {
+            iconMap: {
                 24: '12',
                 30: '18',
                 36: '18',
@@ -453,7 +941,7 @@ const settings = {
                 48: '24',
                 60: '24',
             },
-            indentUnit: {
+            indentUnitMap: {
                 24: 6,
                 30: 12,
                 36: 12,
@@ -461,7 +949,7 @@ const settings = {
                 48: 24,
                 60: 24,
             },
-            indentWidth: {
+            indentWidthMap: {
                 24: 12,
                 30: 18,
                 36: 18,
@@ -470,132 +958,321 @@ const settings = {
                 60: 24,
             },
         },
-        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 },
+        columnsConfigurationModal: {
+            columnRow: '30',
+            countIndicator: '18',
+            menuButton: '30',
+            searchInput: '30',
         },
-        filtersPanel: {
-            pickerInput: {
-                body: {
-                    default: '36',
-                },
-            },
+    },
+};
+const dropdownMenuSettings = {
+    icons: {
+        acceptIcon: ForwardRef$P,
+        dropdownIcon: ForwardRef$Q,
+    },
+};
+const datePickerSettings = {
+    icons: {
+        body: {
+            prevIcon: ForwardRef$u,
+            nextIcon: ForwardRef$t,
+        },
+        input: {
+            calendarIcon: ForwardRef$M,
+        },
+    },
+    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,
         },
-        labeledInput: {
-            fillIcon: ['24', '30'],
+        body: {
+            selectIcon: (size) => size < '30' ? ForwardRef$r : ForwardRef$P,
+            pickerBodyMobileHeaderCloseIcon: ForwardRef$R,
+            modalNotFoundSearchIcon: ForwardRef$b,
         },
-        badge: {
-            countIndicator: {
-                18: '12',
+    },
+    sizes: {
+        toggler: {
+            default: '36',
+            tag: '36',
+            tagMap: {
                 24: '18',
                 30: '18',
-                36: '18',
-                42: '24',
-                48: '24',
+                36: '24',
+                42: '30',
+                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'],
-                    },
-                },
+        body: {
+            maxHeight: 300,
+            minWidth: 360,
+            padding: '12',
+            row: '36',
+            itemAvatarMap: {
+                24: '18',
+                30: '24',
+                36: '30',
+                42: '36',
+                48: '36',
             },
-            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',
-                        },
-                    },
-                },
+            itemAvatarMultilineMap: {
+                24: '30',
+                30: '30',
+                36: '36',
+                42: '42',
+                48: '48',
             },
-            columnsConfigurationModal: {
-                columnRow: '30',
-                countIndicator: '18',
-                subgroupIcon: '18',
-                search: '30',
-                width: 560,
+            itemVerticalPaddingMap: {
+                24: '3',
+                30: '6',
+                36: '9',
+                42: '6',
+                48: '9',
             },
-        },
-        modal: {
-            window: {
-                defaults: {
-                    width: 420,
-                },
+            selectIconMap: {
+                24: '12',
+                30: '18',
+                36: '18',
+                42: '24',
+                48: '24',
             },
-        },
-        tabButton: {
-            countIndicator: {
+            footerSwitchMap: {
+                24: '12',
+                30: '18',
                 36: '18',
-                48: '18',
-                60: '18',
+                42: '24',
+                48: '24',
             },
+            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":"QSR4oU"};
+var css$1y = {"root":"RXQhYs"};
 
 function applyButtonMods(mods) {
     return [
@@ -603,17 +1280,17 @@ function applyButtonMods(mods) {
         'uui-button',
         `uui-fill-${mods.fill || 'solid'}`,
         `uui-color-${mods.color || 'primary'}`,
-        `uui-size-${mods.size || settings.sizes.defaults.button}`,
+        `uui-size-${mods.size || settings.button.sizes.default}`,
     ];
 }
 const Button = /* @__PURE__ */withMods(uuiComponents.Button, applyButtonMods, () => {
     return {
-        dropdownIcon: systemIcons.foldingArrow,
-        clearIcon: systemIcons.clear,
+        dropdownIcon: settings.button.icons.dropdownIcon,
+        clearIcon: settings.button.icons.clearIcon,
     };
 });
 
-var css$1x = {"root":"jvnTri"};
+var css$1x = {"root":"woHPv3"};
 
 function applyIconButtonMods(props) {
     return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1x.root];
@@ -629,7 +1306,7 @@ const IconButton = /* @__PURE__ */withMods(uuiComponents.IconButton, applyIconBu
         });
     }
     return {
-        dropdownIcon: props.dropdownIcon || systemIcons.foldingArrow,
+        dropdownIcon: props.dropdownIcon || settings.iconButton.icons.dropdownIcon,
     };
 });
 
@@ -650,10 +1327,9 @@ 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":"YBF7SX"};
+var css$1w = {"root":"ZTC43J"};
 
 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({
@@ -667,13 +1343,13 @@ const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
     const rootStyles = [
         'uui-link_button',
         css$1w.root,
-        `uui-size-${props.size || settings.sizes.defaults.linkButton}`,
+        `uui-size-${props.size || settings.linkButton.sizes.default}`,
         ...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 || DEFAULT_WEIGHT}`);
-    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : systemIcons.foldingArrow;
+    const captionStyles = cx(uuiElement.caption, props.underline && `uui-underline-${props.underline}`, `uui-link-button-weight-${props.weight || settings.linkButton.weight}`);
+    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.linkButton.icons.dropdownIcon;
     return (React.createElement(Clickable, { ...props, type: "button", cx: rootStyles, ref: ref },
         props.icon && props.iconPosition !== 'right' && (React.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         props.caption && (React.createElement("div", { className: captionStyles }, props.caption)),
@@ -681,30 +1357,30 @@ const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         props.isDropdown && (React.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1v = {"root":"pF3LLf"};
+var css$1v = {"root":"_1frMjM"};
 
 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.sizes.defaults.countIndicator}`,
+            `uui-size-${props.size || settings.countIndicator.sizes.default}`,
             props.color && `uui-color-${props.color}`,
             props.cx,
         ]) }, props.caption));
 });
 
-var css$1u = {"root":"hjs03n","withNotify":"K6ac8E"};
+var css$1u = {"root":"_1VahVv","withNotify":"_8kfEZv"};
 
 const TabButton = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const styles = [
         css$1u.root,
         'uui-tab-button',
-        `uui-size-${props.size || settings.sizes.defaults.tabButton}`,
+        `uui-size-${props.size || settings.tabButton.sizes.default}`,
         ...getIconClass(props),
         props.cx,
     ];
-    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : systemIcons.foldingArrow;
-    const ClearIcon = props.clearIcon ? props.clearIcon : systemIcons.clear;
+    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.tabButton.icons.dropdownIcon;
+    const ClearIcon = props.clearIcon ? props.clearIcon : settings.tabButton.icons.clearIcon;
     return (React__default.createElement(Clickable, { ...props, rawProps: {
             role: 'tab',
             'aria-haspopup': props.isDropdown,
@@ -716,86 +1392,54 @@ 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.sizes.tabButton.countIndicator[props.size || settings.sizes.defaults.tabButton], caption: props.count })),
+        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.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":"CQJU-T"};
+var css$1t = {"root":"IUef9N"};
 
 function applyVerticalTabButtonMods() {
     return [css$1t.root, 'uui-vertical-tab-button'];
 }
 const VerticalTabButton = /* @__PURE__ */withMods(TabButton, applyVerticalTabButtonMods);
 
-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":"a8I78W","mode-cell":"dNAMTo","modeCell":"dNAMTo"};
+var css$1s = {"root":"Bp2UHf","mode-cell":"_1Uqtfw","modeCell":"_1Uqtfw"};
 
 function applyCheckboxMods(mods) {
     return [
         css$1s.root,
-        `uui-size-${mods.size || settings.sizes.defaults.checkbox}`,
+        `uui-size-${mods.size || settings.checkbox.sizes.default}`,
         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 : defaultIcon,
-        indeterminateIcon: props.indeterminateIcon ? props.indeterminateIcon : defaultIndeterminateIcon,
+        icon: props.icon ? props.icon : settings.checkbox.icons.checkIcon,
+        indeterminateIcon: props.indeterminateIcon ? props.indeterminateIcon : settings.checkbox.icons.indeterminateIcon,
     };
 };
 const Checkbox = /* @__PURE__ */withMods(uuiComponents.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-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":"R64O52"};
+var css$1r = {"root":"_-5DmoE"};
 
 function applyRadioInputMods(mods) {
     return [
         css$1r.root,
-        `uui-size-${mods.size || settings.sizes.defaults.radioInput}`,
+        `uui-size-${mods.size || settings.radioInput.sizes.default}`,
         'uui-radio-input-container',
         'uui-color-primary',
     ];
 }
-const RadioInput = /* @__PURE__ */withMods(RadioInput$1, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : ForwardRef$B }));
+const RadioInput = /* @__PURE__ */withMods(RadioInput$1, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : settings.radioInput.icons.dotIcon }));
 
-var css$1q = {"root":"Dvdp8D"};
+var css$1q = {"root":"AjuVtG"};
 
 function applySwitchMods(mods) {
     return [
         css$1q.root,
-        `uui-size-${mods.size || settings.sizes.defaults.switch}`,
+        `uui-size-${mods.size || settings.switch.sizes.default}`,
         'uui-color-primary',
     ];
 }
@@ -814,20 +1458,20 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var textInputCss = {"root":"to97Tw","mode-form":"MNm67V","modeForm":"MNm67V","mode-inline":"A-SFpg","modeInline":"A-SFpg","mode-cell":"LR8puL","modeCell":"LR8puL"};
+var textInputCss = {"root":"TTfjgk","mode-form":"Qk2o3L","modeForm":"Qk2o3L","mode-inline":"dm1GgI","modeInline":"dm1GgI","mode-cell":"Fl6bK4","modeCell":"Fl6bK4"};
 
 const DEFAULT_MODE$3 = EditMode.FORM;
 function applyTextInputMods(mods) {
     return [
         textInputCss.root,
-        `uui-size-${mods.size || settings.sizes.defaults.textInput}`,
+        `uui-size-${mods.size || settings.textInput.sizes.default}`,
         textInputCss['mode-' + (mods.mode || DEFAULT_MODE$3)],
     ];
 }
 const TextInput = /* @__PURE__ */withMods(TextInput$1, applyTextInputMods, () => ({
-    acceptIcon: systemIcons.accept,
-    cancelIcon: systemIcons.clear,
-    dropdownIcon: systemIcons.foldingArrow,
+    acceptIcon: settings.textInput.icons.acceptIcon,
+    cancelIcon: settings.textInput.icons.clearIcon,
+    dropdownIcon: settings.textInput.icons.dropdownIcon,
 }));
 const SearchInput = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     // analytics events are sending in IEditableDebouncer, so we need to avoid sending events in TextInput
@@ -835,11 +1479,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: systemIcons.search, onCancel: props.onCancel ?? defaultOnCancel, type: "search", inputMode: "search", ref: ref, ...textInputProps, ...iEditable }));
+            return (React__default.createElement(TextInput, { icon: settings.textInput.icons.searchIcon, onCancel: props.onCancel ?? defaultOnCancel, type: "search", inputMode: "search", ref: ref, ...textInputProps, ...iEditable }));
         } }));
 });
 
-var css$1p = {"root":"V-JlZM"};
+var css$1p = {"root":"ZwTYx-"};
 
 const ControlGroup = /* @__PURE__ */withMods(ControlGroup$1, () => [css$1p.root, 'uui-control-group']);
 
@@ -855,34 +1499,34 @@ function MultiSwitchComponent(props, ref) {
 }
 const MultiSwitch = /* @__PURE__ */React.forwardRef(MultiSwitchComponent);
 
-var css$1o = {"root":"Jm2ZIs","mode-form":"AV6TUg","modeForm":"AV6TUg","mode-cell":"PmNN5C","modeCell":"PmNN5C"};
+var css$1o = {"root":"xoKFNg","mode-form":"_1cPmVG","modeForm":"_1cPmVG","mode-cell":"w5ilFU","modeCell":"w5ilFU"};
 
 const DEFAULT_MODE$2 = EditMode.FORM;
 function applyNumericInputMods(mods) {
     return [
         textInputCss.root,
         css$1o.root,
-        `uui-size-${mods.size || settings.sizes.defaults.numericInput}`,
+        `uui-size-${mods.size || settings.numericInput.sizes.default}`,
         textInputCss['mode-' + (mods.mode || DEFAULT_MODE$2)],
     ];
 }
 const NumericInput = /* @__PURE__ */withMods(NumericInput$1, applyNumericInputMods, (props) => {
     return {
-        upIcon: systemIcons.foldingArrow,
-        downIcon: systemIcons.foldingArrow,
+        upIcon: settings.numericInput.icons.arrowIcon,
+        downIcon: settings.numericInput.icons.arrowIcon,
         align: props.align ?? (props.mode === 'cell' ? 'right' : 'left'),
         disableArrows: props.disableArrows ?? props.mode === 'cell',
     };
 });
 
-var css$1n = {"root":"V7sKOK","mode-form":"Bx-XHz","modeForm":"Bx-XHz","mode-cell":"XjgkM4","modeCell":"XjgkM4","mode-inline":"G93570","modeInline":"G93570"};
+var css$1n = {"root":"jPjqE0","mode-form":"LIym9b","modeForm":"LIym9b","mode-cell":"P-JaPM","modeCell":"P-JaPM","mode-inline":"a2Oscb","modeInline":"a2Oscb"};
 
 const DEFAULT_MODE$1 = EditMode.FORM;
 function applyTextAreaMods(mods) {
     return [
         css$1n.root,
         'uui-textarea',
-        'uui-size-' + (mods.size || settings.sizes.defaults.textArea),
+        'uui-size-' + (mods.size || settings.textArea.sizes.default),
         css$1n['mode-' + (mods.mode || DEFAULT_MODE$1)],
     ];
 }
@@ -916,85 +1560,25 @@ function TREE_SHAKEABLE_INIT$1() {
     };
 }
 
-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":"VrQhCb","main-path":"d-ygX3","mainPath":"d-ygX3","content-wrapper":"v9g4lL","contentWrapper":"v9g4lL","content":"h3I1E9","action-wrapper":"GiryMB","actionWrapper":"GiryMB","icon-wrapper":"_3ij4QT","iconWrapper":"_3ij4QT","icon":"FI-A5A","close-icon":"dC9pjw","closeIcon":"dC9pjw"};
+var css$1m = {"root":"ECudEW","main-path":"DlNW0B","mainPath":"DlNW0B","content-wrapper":"FPYnTZ","contentWrapper":"FPYnTZ","content":"kobPhA","action-wrapper":"hcEtUS","actionWrapper":"hcEtUS","icon-wrapper":"U11IQC","iconWrapper":"U11IQC","icon":"_40URZK","close-icon":"QuRrST","closeIcon":"QuRrST"};
 
-const Alert = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("div", { role: "alert", ref: ref, className: cx('uui-alert', css$1m.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.sizes.defaults.alert}`), ...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.alert.sizes.default}`), ...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.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 }));
+                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 }));
 
 const Dropdown = /* @__PURE__ */withMods(Dropdown$1);
 
-var css$1l = {"root":"gisgJG"};
+var css$1l = {"root":"CZcvSG"};
 
 function applyDropdownContainerMods(mods) {
     return [
@@ -1005,7 +1589,7 @@ function applyDropdownContainerMods(mods) {
 }
 const DropdownContainer = /* @__PURE__ */withMods(uuiComponents.DropdownContainer, applyDropdownContainerMods);
 
-var css$1k = {"submenu-root-item-rtl":"sXS-va","submenuRootItemRtl":"sXS-va","icon-after":"_8TOGsB","iconAfter":"_8TOGsB","submenu-root-item":"SjLiLV","submenuRootItem":"SjLiLV","icon-check":"B-iZ9Y","iconCheck":"B-iZ9Y","splitter-root":"ck4OnD","splitterRoot":"ck4OnD","splitter":"ZneSX-","header-root":"r92v0P","headerRoot":"r92v0P","item-root":"NJ0wVW","itemRoot":"NJ0wVW","icon":"t-k27O","link":"m0MntC","indent":"yhP0wW","selected-mark":"yJSMGY","selectedMark":"yJSMGY"};
+var css$1k = {"submenu-root-item-rtl":"ui-EyN","submenuRootItemRtl":"ui-EyN","icon-after":"udGQs2","iconAfter":"udGQs2","submenu-root-item":"hjiEZ1","submenuRootItem":"hjiEZ1","icon-check":"UjWDqA","iconCheck":"UjWDqA","splitter-root":"XQTxvz","splitterRoot":"XQTxvz","splitter":"TOPnX4","header-root":"LkLeGU","headerRoot":"LkLeGU","item-root":"THqDab","itemRoot":"THqDab","icon":"ya3pbi","link":"SwUT5A","indent":"cKzxGp","selected-mark":"_3XpN6G","selectedMark":"_3XpN6G"};
 
 var IDropdownControlKeys;
 (function (IDropdownControlKeys) {
@@ -1052,7 +1636,7 @@ const DropdownMenuButton = /* @__PURE__ */React__default.forwardRef((props, ref)
     const handleClick = (event) => {
         if (isDisabled || !onClick)
             return;
-        onClick(event);
+        !isEventTargetInsideClickable(event) && onClick(event);
         context.uuiAnalytics.sendEvent(props.clickAnalyticsEvent);
     };
     const handleOpenDropdown = (event) => {
@@ -1079,16 +1663,12 @@ const DropdownMenuButton = /* @__PURE__ */React__default.forwardRef((props, ref)
                 iconElement))));
     };
     const isAnchor = Boolean(link || href);
-    const itemClassNames = cx$1(props.cx, css$1k.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened);
-    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$1k.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isLinkActive: isActive, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__default.createElement(FlexRow$1, { rawProps: {
-            tabIndex: isDisabled ? -1 : 0,
-            role: 'menuitem',
-            onKeyDown: isDisabled ? null : handleOpenDropdown,
-        }, cx: itemClassNames, onClick: handleClick, ref: ref },
+    const itemClassNames = cx$1(props.cx, css$1k.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened, (!isDisabled && onClick) && uuiMarkers.clickable);
+    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$1k.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isLinkActive: isActive, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref },
         getMenuButtonContent(),
         isSelected && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(FlexSpacer, null),
-            React__default.createElement(IconContainer, { icon: systemIcons.accept, cx: css$1k.selectedMark })))));
+            React__default.createElement(IconContainer, { icon: settings.dropdownMenu.icons.acceptIcon, cx: css$1k.selectedMark })))));
 });
 function DropdownMenuSplitter(props) {
     return (React__default.createElement("div", { className: cx$1(props.cx, css$1k.splitterRoot) },
@@ -1116,7 +1696,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: systemIcons.foldingArrow, 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: settings.dropdownMenu.icons.dropdownIcon, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening, ...props, ...targetProps })) }));
 }
 function DropdownMenuSwitchButton(props) {
     const context = useContext(UuiContext);
@@ -1132,14 +1712,14 @@ function DropdownMenuSwitchButton(props) {
             onHandleValueChange(!isSelected);
         }
     };
-    return (React__default.createElement(FlexRow$1, { cx: cx$1(props.cx, css$1k.itemRoot, isDisabled && uuiMod.disabled), onClick: () => onHandleValueChange(!isSelected), rawProps: { role: 'menuitem', onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 } },
+    return (React__default.createElement("div", { className: cx$1(props.cx, css$1k.itemRoot, isDisabled && uuiMod.disabled, (!isDisabled || onValueChange) && uuiMarkers.clickable), onClick: () => onHandleValueChange(!isSelected), role: "menuitem", onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 },
         icon && React__default.createElement(IconContainer, { icon: icon, cx: css$1k.iconBefore }),
         React__default.createElement(Text$1, null, caption),
         React__default.createElement(FlexSpacer, null),
         React__default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
 }
 
-var css$1j = {"root":"m8V6uo","mode-block":"mYtYTr","modeBlock":"mYtYTr","mode-inline":"ItOdRc","modeInline":"ItOdRc","padding-0":"_3ylD68","padding0":"_3ylD68","padding-6":"voQfuf","padding6":"voQfuf","padding-12":"G2mP1y","padding12":"G2mP1y","padding-18":"HO9eM6","padding18":"HO9eM6"};
+var css$1j = {"root":"_3131M7","mode-block":"Ywu26i","modeBlock":"Ywu26i","mode-inline":"_9JcrPO","modeInline":"_9JcrPO","padding-0":"_9hrhzr","padding0":"_9hrhzr","padding-6":"lfXkkY","padding6":"lfXkkY","padding-12":"Dv6x4U","padding12":"Dv6x4U","padding-18":"ZH9YIu","padding18":"ZH9YIu"};
 
 function applyAccordionMods(mods) {
     return [
@@ -1149,34 +1729,55 @@ function applyAccordionMods(mods) {
     ];
 }
 const Accordion = /* @__PURE__ */withMods(uuiComponents.Accordion, applyAccordionMods, (mods) => ({
-    dropdownIcon: mods.dropdownIcon !== null && systemIcons.foldingArrow,
+    dropdownIcon: mods.dropdownIcon !== null && settings.accordion.icons.dropdownIcon,
 }));
 
-var css$1i = {"root":"XC8PvU","border-top":"u26Rwf","borderTop":"u26Rwf","border-bottom":"TnFBOj","borderBottom":"TnFBOj","top-shadow":"f0Js4k","topShadow":"f0Js4k","padding-6":"a--H3F","padding6":"a--H3F","padding-12":"lvGN-M","padding12":"lvGN-M","padding-18":"PlQ2Kw","padding18":"PlQ2Kw","padding-24":"pLJ7jw","padding24":"pLJ7jw","margin-24":"gBC3G1","margin24":"gBC3G1","margin-12":"rDld9P","margin12":"rDld9P","vPadding-12":"a3Df7U","vPadding12":"a3Df7U","vPadding-18":"vgwMCi","vPadding18":"vgwMCi","vPadding-24":"HtjLwg","vPadding24":"HtjLwg","vPadding-36":"IqVT27","vPadding36":"IqVT27","vPadding-48":"Paj9iV","vPadding48":"Paj9iV","spacing-6":"M0dJd5","spacing6":"M0dJd5","spacing-12":"IPjL3K","spacing12":"IPjL3K","spacing-18":"fEYmEx","spacing18":"fEYmEx","uui-surface-main":"jT3V3U","uuiSurfaceMain":"jT3V3U"};
+var css$1i = {"root":"ffZ20N","align-items":"bCkRwS","alignItems":"bCkRwS","justify-content":"Hq1Sgc","justifyContent":"Hq1Sgc","border-top":"RM3135","borderTop":"RM3135","border-bottom":"U6UsgT","borderBottom":"U6UsgT","top-shadow":"kOa8dh","topShadow":"kOa8dh","padding":"G1JmsP","margin":"l7a1LW","vPadding":"zhL16N","column-gap":"OwjWXm","columnGap":"OwjWXm","row-gap":"LHmp2K","rowGap":"LHmp2K","spacing-6":"UQtxZt","spacing6":"UQtxZt","spacing-12":"Ok5Ksq","spacing12":"Ok5Ksq","spacing-18":"_2QT6CJ","spacing18":"_2QT6CJ","uui-surface-main":"xKVdX7","uuiSurfaceMain":"xKVdX7"};
 
 const FlexCell = /* @__PURE__ */withMods(FlexCell$1, () => [css$1i.flexCell]);
 
-const FlexRow = /* @__PURE__ */withMods(FlexRow$1, (props) => {
+const FlexRow = /* @__PURE__ */forwardRef((props, ref) => {
     if (process.env.NODE_ENV !== "production") {
         if (props.spacing) {
             devLogger.warn('[FlexRow]: The `spacing` property is deprecated and will be removed in future versions. Please use `columnGap` instead.');
         }
     }
-    return [
+    const classNames = cx$1([
         css$1i.root,
-        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],
+        '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.topShadow && css$1i.topShadow,
         props.borderBottom && css$1i.borderBottom,
         props.borderTop && css$1i.borderTop,
+        props.columnGap && css$1i.columnGap,
+        props.rowGap && css$1i.rowGap,
         props.spacing && css$1i['spacing-' + props.spacing],
         props.background && css$1i[`uui-${props.background}`],
-    ];
+    ]);
+    const style = {
+        ...(props.alignItems && { '--uui-flex-row-align-items': props.alignItems }),
+        ...(props.justifyContent && { '--uui-flex-row-justify-content': props.justifyContent }),
+        ...(props.columnGap && { '--uui-flex-row-column-gap': `${props.columnGap}px` }),
+        ...(props.rowGap && { '--uui-flex-row-row-gap': `${props.rowGap}px` }),
+        ...(props.padding && { '--uui-flex-row-padding': `${props.padding}px` }),
+        ...(props.vPadding && { '--uui-flex-row-v-padding': `${props.vPadding}px` }),
+        ...(props.margin && { '--uui-flex-row-margin': `${props.margin}px` }),
+        ...(props.spacing && { '--uui-flex-row-spacing': `${props.spacing}px` }),
+    };
+    return (React__default.createElement("div", { ref: ref, onClick: props.onClick ? (e) => !isEventTargetInsideClickable(e) && props.onClick(e) : undefined, className: classNames, ...props.rawProps, style: {
+            ...style,
+            ...props.rawProps?.style,
+        } }, props.children));
 });
 
-var css$1h = {"root":"-OtOdq","margin-24":"b9QkOx","margin24":"b9QkOx","padding-12":"ostEg6","padding12":"ostEg6","padding-24":"_9Q7mcx","padding24":"_9Q7mcx","shadow":"pvlA-X","uui-surface-main":"bL019v","uuiSurfaceMain":"bL019v"};
+var css$1h = {"root":"iQNfWC","margin-24":"Qxkdz-","margin24":"Qxkdz-","padding-12":"Jb6NWH","padding12":"Jb6NWH","padding-24":"x9Bc-Q","padding24":"x9Bc-Q","shadow":"SV6nO9","uui-surface-main":"zKARob","uuiSurfaceMain":"zKARob"};
 
 const Panel = /* @__PURE__ */withMods(VPanel, (props) => [
     'uui-panel',
@@ -1186,7 +1787,7 @@ const Panel = /* @__PURE__ */withMods(VPanel, (props) => [
     props.background && css$1h[`uui-${props.background}`],
 ]);
 
-var css$1g = {"root":"G2Zset"};
+var css$1g = {"root":"H2dbpX"};
 
 function applyTooltipMods(mods) {
     return [
@@ -1196,21 +1797,24 @@ function applyTooltipMods(mods) {
 }
 const Tooltip = /* @__PURE__ */withMods(uuiComponents.Tooltip, applyTooltipMods);
 
-var css$1f = {"root":"NxERgG"};
+var css$1f = {"root":"k-D3Zk"};
 
 function applyLabeledInputMods(mods) {
     return [
         'uui-labeled-input',
         css$1f.root,
-        'uui-size-' + (mods.size || settings.sizes.defaults.labeledInput),
+        'uui-size-' + (mods.size || settings.labeledInput.sizes.default),
     ];
 }
-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),
-}));
+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);
 
-var css$1e = {"root":"broC2K"};
+var css$1e = {"root":"Mx3kFA"};
 
 function RadioGroup(props) {
     const direction = props.direction || 'vertical';
@@ -1225,7 +1829,7 @@ function RadioGroup(props) {
     })));
 }
 
-var css$1d = {"root":"e8lYUP"};
+var css$1d = {"root":"W9MadD"};
 
 function applyScrollBarsMods() {
     return [
@@ -1234,27 +1838,27 @@ function applyScrollBarsMods() {
 }
 const ScrollBars = /* @__PURE__ */withMods(ScrollBars$1, applyScrollBarsMods);
 
-var css$1c = {"scroll-container":"f61LEC","scrollContainer":"f61LEC","list-container":"lFVAeX","listContainer":"lFVAeX"};
+var css$1c = {"scroll-container":"r5ymgV","scrollContainer":"r5ymgV","list-container":"vL7G2y","listContainer":"vL7G2y"};
 
-var css$1b = {"root":"PVtRPG"};
+var css$1b = {"root":"eaMei5"};
 
 const AvatarStack = /* @__PURE__ */withMods(AvatarStack$1, () => [css$1b.root]);
 
-var css$1a = {"root":"d4vdZj"};
+var css$1a = {"root":"QXWo5S"};
 
 const DEFAULT_FILL = 'solid';
 function applyBadgeMods(mods) {
     return [
         'uui-badge',
         css$1a.root,
-        `uui-size-${mods.size || settings.sizes.defaults.badge}`,
+        `uui-size-${mods.size || settings.badge.sizes.default}`,
         `uui-fill-${mods.fill || DEFAULT_FILL}`,
         `uui-color-${mods.color || 'info'}`,
     ];
 }
 const Badge = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const styles = [applyBadgeMods(props), props.cx];
-    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : systemIcons.foldingArrow;
+    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.badge.icons.dropdownIcon;
     return (React__default.createElement(Clickable, { ...props, rawProps: {
             'aria-haspopup': props.isDropdown,
             'aria-expanded': props.isOpen,
@@ -1263,17 +1867,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.sizes.badge.countIndicator[props.size || settings.sizes.defaults.badge], caption: props.count })),
+        props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { key: "count-indicator", color: null, size: settings.badge.sizes.countIndicatorMap[props.size || settings.badge.sizes.default], caption: props.count })),
         props.icon && props.iconPosition === 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$19 = {"root":"wQBQLF"};
+var css$19 = {"root":"_4g5FnY"};
 
 function applyTagMods(props) {
     return [
         css$19.root,
-        `uui-size-${props.size || settings.sizes.defaults.tag}`,
+        `uui-size-${props.size || settings.tag.sizes.default}`,
         `uui-color-${props.color || 'neutral'}`,
         `uui-fill-${props.fill || 'solid'}`,
         'uui-tag',
@@ -1281,83 +1885,53 @@ function applyTagMods(props) {
 }
 const Tag = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const styles = [applyTagMods(props), props.cx];
-    const ClearIcon = props.clearIcon ? props.clearIcon : systemIcons.clear;
-    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : systemIcons.foldingArrow;
+    const ClearIcon = props.clearIcon ? props.clearIcon : settings.tag.icons.clearIcon;
+    const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.tag.icons.dropdownIcon;
     return (React__default.createElement(Clickable, { ...props, rawProps: {
             'aria-haspopup': props.isDropdown,
             'aria-expanded': props.isOpen,
             ...props.rawProps,
         }, cx: styles, ref: ref },
         props.icon && props.iconPosition !== 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
-        props.caption && (React__default.createElement("div", { className: uuiElement.caption }, props.caption)),
-        props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { color: (!props.color || props.color === 'neutral') ? 'white' : props.color, size: settings.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":"Yefd2r","uui-spinner":"-ll9YV","uuiSpinner":"-ll9YV"};
-
-function applySpinnerMods() {
-    return [css$18.root, 'uui-spinner'];
-}
-const Spinner = /* @__PURE__ */withMods(Spinner$1, applySpinnerMods);
-
-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);
+        props.caption && (React__default.createElement("div", { className: uuiElement.caption }, props.caption)),
+        props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { color: (!props.color || props.color === 'neutral') ? 'white' : props.color, size: settings.tag.sizes.countIndicatorMap[(props.size || settings.tag.sizes.default)], caption: props.count })),
+        props.icon && props.iconPosition === 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
+        props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen })),
+        props.onClear && !props.isDisabled && (React__default.createElement(IconContainer, { cx: uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
+});
 
-var _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$18 = {"root":"m3Q71r","uui-spinner":"YQGQbP","uuiSpinner":"YQGQbP"};
+
+function applySpinnerMods() {
+    return [css$18.root, 'uui-spinner'];
+}
+const Spinner = /* @__PURE__ */withMods(Spinner$1, applySpinnerMods);
 
-var css$17 = {"root":"LxKlHO","page":"c-zdDL","spacer":"xiT7NH","mode-ghost":"TOn93Q","modeGhost":"TOn93Q"};
+var css$17 = {"root":"QHjscC","page":"i166cN","spacer":"u4UqQ0","mode-ghost":"-Anqsg","modeGhost":"-Anqsg"};
 
 function Paginator(props) {
-    const renderPaginator = (params) => (React__default.createElement("nav", { role: "navigation", className: cx(css$17.root, 'uui-paginator', `uui-size-${props.size || settings.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" }),
+    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" }),
         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.sizes.defaults.paginator, 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.paginator.sizes.default, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1, isDisabled: props.isDisabled }));
             }
             else {
-                return (React__default.createElement(Button, { cx: cx(css$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 }));
+                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 }));
             }
         }),
-        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" })));
+        React__default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.rightArrowIcon, onClick: params.goToNext, isDisabled: params.isLast || props.isDisabled, fill: "outline", color: "secondary" })));
     return React__default.createElement(Paginator$1, { ...props, render: renderPaginator });
 }
 
-var css$16 = {"root":"_5I5Y1R","progress-bar":"yGkT-C","progressBar":"yGkT-C","progressBar-indeterminate":"h6q4P8","progressBarIndeterminate":"h6q4P8","size-12":"nGsY0z","size12":"nGsY0z","size-18":"-kKH2p","size18":"-kKH2p","size-24":"b5tw8r","size24":"b5tw8r"};
+var css$16 = {"root":"BDU2eY","progress-bar":"hOToff","progressBar":"hOToff","progressBar-indeterminate":"sPfRR7","progressBarIndeterminate":"sPfRR7","size-12":"t7OHC3","size12":"t7OHC3","size-18":"bvnal8","size18":"bvnal8","size-24":"TrVxth","size24":"TrVxth"};
 
 const IndeterminateBar = /* @__PURE__ */React.forwardRef((props, ref) => {
     return (React.createElement("div", { ref: ref, className: cx('uui-indeterminate_bar', props.cx, css$16.root, css$16[`size-${props.size || 12}`]) },
         React.createElement("div", { className: cx(css$16.progressBar) })));
 });
 
-var css$15 = {"root":"p9d4oA","striped":"t8wDLx","animate-stripes":"A9qV3D","animateStripes":"A9qV3D","size-12":"_-25wvu","size12":"_-25wvu","size-18":"TZxHUV","size18":"TZxHUV","size-24":"D9j8pp","size24":"D9j8pp"};
+var css$15 = {"root":"dqdMXf","striped":"yGqFBD","animate-stripes":"VxZzCk","animateStripes":"VxZzCk","size-12":"lyDISV","size12":"lyDISV","size-18":"RAYBZS","size18":"RAYBZS","size-24":"isJe0O","size24":"isJe0O"};
 
 const DEFAULT_SIZE = '12';
 function applyProgressBarMods(mods) {
@@ -1372,19 +1946,19 @@ const ProgressBar = /* @__PURE__ */withMods(uuiComponents.ProgressBar, applyProg
     hideLabel: props.hideLabel || props.striped,
 }));
 
-var css$14 = {"root":"_7uCHwz"};
+var css$14 = {"root":"_9QHUEc"};
 
 const IndicatorBar = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { progress } = props;
     return progress || progress === 0 ? (React.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx(css$14.root, props.cx), hideLabel: true })) : (React.createElement(IndeterminateBar, { ref: ref, cx: cx(css$14.root, props.cx) }));
 });
 
-var css$13 = {"root":"jfgUlc"};
+var css$13 = {"root":"RhPrcv"};
 
 const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
     return (React__default.createElement("div", { ref: ref, className: cx([
             css$13.root,
-            `uui-size-${props.size || settings.sizes.defaults.statusIndicator}`,
+            `uui-size-${props.size || settings.statusIndicator.sizes.default}`,
             'uui-status_indicator',
             `uui-color-${props.color || 'neutral'}`,
             `uui-fill-${props.fill || 'solid'}`,
@@ -1394,28 +1968,28 @@ const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
         React__default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
 });
 
-var css$12 = {"drag-handle":"O-JuLw","dragHandle":"O-JuLw","icon-container":"KQ-hGd","iconContainer":"KQ-hGd"};
+var css$12 = {"drag-handle":"wXEeDT","dragHandle":"wXEeDT","icon-container":"W-9nPm","iconContainer":"W-9nPm"};
 
 function DataRowAddons(props) {
     const row = props.rowProps;
     const getIndent = () => {
-        return (row.indent - 1) * (settings.sizes.rowAddons.indentUnit[props.size] || settings.sizes.rowAddons.defaults.indentUnit);
+        return (row.indent - 1) * settings.dataTable.sizes.body.indentUnitMap[props.size || settings.dataTable.sizes.body.row];
     };
     const getWidth = () => {
-        return settings.sizes.rowAddons.indentWidth[props.size] || settings.sizes.rowAddons.defaults.indentWidth;
+        return settings.dataTable.sizes.body.indentWidthMap[props.size || settings.dataTable.sizes.body.row];
     };
     return (React__default.createElement(React__default.Fragment, null,
         row.dnd?.srcData && React__default.createElement(DragHandle, { key: "dh", cx: css$12.dragHandle, rawProps: { ...props.eventHandlers } }),
-        row?.checkbox?.isVisible && (React__default.createElement(Checkbox, { key: "cb", cx: "uui-dr_addons-checkbox", tabIndex: props.tabIndex, size: settings.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?.checkbox?.isVisible && (React__default.createElement(Checkbox, { key: "cb", cx: "uui-dr_addons-checkbox", tabIndex: props.tabIndex, size: settings.dataTable.sizes.body.checkboxMap[props.size], value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => row.onCheck?.(row), isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
         row.indent > 0 && (React__default.createElement("div", { key: "fold", className: cx('uui-dr_addons-indent', `uui-size-${props.size}`), style: { marginInlineStart: getIndent(), width: getWidth() } }, row.isFoldable && (React__default.createElement(IconContainer, { rawProps: {
                 'aria-label': row.isFolded ? 'Unfold' : 'Fold',
                 role: 'button',
-            }, key: "icon", icon: ForwardRef$Q, cx: [
+            }, key: "icon", icon: settings.dataTable.icons.body.foldingIcon, cx: [
                 uuiElement.foldingArrow, uuiMarkers.clickable, css$12.iconContainer,
-            ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), size: settings.sizes.rowAddons.icon[props.size] || settings.sizes.rowAddons.defaults.icon }))))));
+            ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), size: settings.dataTable.sizes.body.iconMap[props.size || settings.dataTable.sizes.body.row] }))))));
 }
 
-var css$11 = {"root":"eRrnjQ"};
+var css$11 = {"root":"Mms63k"};
 
 const Blocker = /* @__PURE__ */withMods(Blocker$1, () => [css$11.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__default.createElement(Spinner, null)) }));
 
@@ -1461,7 +2035,7 @@ const VirtualListView = /* @__PURE__ */React.forwardRef((props, ref) => {
         React.createElement(Blocker, { isEnabled: props.isLoading })));
 });
 
-var css$10 = {"root":"Z40E8g"};
+var css$10 = {"root":"W1mzAl"};
 
 function CheckboxGroup(props) {
     const currentValue = props.value || [];
@@ -1483,13 +2057,13 @@ function CheckboxGroup(props) {
     })));
 }
 
-var css$$ = {"root":"kB1xeP","modal-blocker":"YbhskA","modalBlocker":"YbhskA","animateModalBlocker":"ISlK9F","modal":"_-2IL6X","modal-footer":"c09T35","modalFooter":"c09T35","modal-header":"G-OC40","modalHeader":"G-OC40"};
+var css$$ = {"root":"GRkPdT","modal-blocker":"Dn6N0O","modalBlocker":"Dn6N0O","animateModalBlocker":"b-0qN-","modal":"OOTMbW","modal-footer":"Ar97Yc","modalFooter":"Ar97Yc","border-top":"EH-yIV","borderTop":"EH-yIV","modal-header":"EmrRnf","modalHeader":"EmrRnf","border-bottom":"vib-sC","borderBottom":"vib-sC"};
 
 const ModalBlocker = /* @__PURE__ */withMods(ModalBlocker$1, () => [css$$.modalBlocker]);
 const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$$.root, css$$.modal], (props) => {
-    const width = props.width || settings.sizes.modal.window.defaults.width;
+    const width = props.width;
     const height = props.height || 'auto';
-    const maxHeight = isMobile() ? '100dvh' : (props.maxHeight || '80dvh');
+    const maxHeight = isMobile() ? 'var(--uui-modals-mobile-max-height)' : (props.maxHeight || 'var(--uui-modals-max-height)');
     return {
         style: {
             ...props.style,
@@ -1499,24 +2073,20 @@ const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$$.root, cs
         },
     };
 });
-class ModalHeader extends React__default.Component {
-    render() {
-        return (React__default.createElement(FlexRow, { padding: this.props.padding || '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 ModalHeader(props) {
+    return (React__default.createElement("div", { className: cx(css$$.root, css$$.modalHeader, 'uui-modal-header', props.borderBottom && css$$.borderBottom, props.cx), ...props.rawProps, style: {
+            ...props.rawProps?.style,
+        } },
+        props.title && (React__default.createElement("div", { className: cx('uui-modal-title', 'uui-typography') }, props.title)),
+        props.children,
+        props.onClose && React__default.createElement(FlexSpacer, null),
+        props.onClose && (React__default.createElement(FlexCell, { shrink: 0, width: "auto" },
+            React__default.createElement(IconButton, { rawProps: { 'aria-label': 'Close modal' }, icon: settings.modal.icons.closeIcon, onClick: props.onClose })))));
 }
-class ModalFooter extends React__default.Component {
-    render() {
-        return (React__default.createElement(FlexRow, { columnGap: this.props.columnGap || '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));
-    }
+function ModalFooter(props) {
+    return (React__default.createElement("div", { className: cx(css$$.root, css$$.modalFooter, 'uui-modal-footer', props.borderTop && css$$.borderTop, props.cx), ...props.rawProps, style: {
+            ...props.rawProps?.style,
+        } }, props.children));
 }
 
 const TREE_SHAKEABLE_INIT = () => ({
@@ -1677,22 +2247,7 @@ const TREE_SHAKEABLE_INIT = () => ({
 });
 const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
 
-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":"gsox9r","icon-wrapper":"yiiLqg","iconWrapper":"yiiLqg","action-wrapper":"EAKV7X","actionWrapper":"EAKV7X","action-link":"Xxa0Nj","actionLink":"Xxa0Nj","close-icon":"gtT9lQ","closeIcon":"gtT9lQ","main-path":"_9Glotl","mainPath":"_9Glotl","content":"itsRD7","close-wrapper":"_7F4SlE","closeWrapper":"_7F4SlE","notification-wrapper":"_7u3jhc","notificationWrapper":"_7u3jhc","clear-button":"rhM1wT","clearButton":"rhM1wT"};
+var css$_ = {"root":"_7N5KwP","icon-wrapper":"yCygaA","iconWrapper":"yCygaA","action-wrapper":"_2lQY38","actionWrapper":"_2lQY38","action-link":"_5NAquj","actionLink":"_5NAquj","close-icon":"wxwEAy","closeIcon":"wxwEAy","main-path":"fR2Tsm","mainPath":"fR2Tsm","content":"yAkzZT","close-wrapper":"_7HeorE","closeWrapper":"_7HeorE","notification-wrapper":"Ikr3nk","notificationWrapper":"Ikr3nk","clear-button":"A39vAF","clearButton":"A39vAF"};
 
 const NotificationCard = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const notificationCardNode = React__default.useRef(null);
@@ -1711,21 +2266,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.sizes.notificationCard.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.notificationCard.sizes.action, rawProps: action.rawProps })))))),
             props.onClose && (React__default.createElement("div", { className: css$_.closeWrapper },
-                React__default.createElement(IconButton, { icon: ForwardRef$R, color: "neutral", onClick: props.onClose, cx: css$_.closeIcon }))))));
+                React__default.createElement(IconButton, { icon: settings.notificationCard.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$_.closeIcon }))))));
 });
-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 })));
+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 })));
 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":"BcYdsk"};
+var css$Z = {"footer":"UKxrTp"};
 
 class ConfirmationModal extends React.Component {
     render() {
@@ -1767,7 +2322,7 @@ function useReliableForceUpdate() {
     return red[1];
 }
 
-var css$Y = {"root":"gtRd5k","timepicker-input":"DrIt0T","timepickerInput":"DrIt0T","ltr-always":"iTe8mJ","ltrAlways":"iTe8mJ"};
+var css$Y = {"root":"_8qbP70","timepicker-input":"_8iI9Xz","timepickerInput":"_8iI9Xz","ltr-always":"GoqxMW","ltrAlways":"GoqxMW"};
 
 const uuiTimePicker = {
     container: 'uui-timepicker-container',
@@ -1950,7 +2505,7 @@ function TimePicker(props) {
         state.value && state.inputValue && saveTime(state.value);
     };
     const renderInput = (inputProps) => {
-        return (React__default.createElement(TextInput, { ...inputProps, onClick: null, size: props.size || '36', isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$Y.root, css$Y.timepickerInput, props.inputCx], value: state.inputValue, onValueChange: handleInputChange, onCancel: !props.disableClear && onClear, onFocus: handleFocus, onBlur: handleBlur, isDropdown: false, placeholder: props.placeholder ? props.placeholder : getFormat(), mode: props.mode || DEFAULT_MODE, rawProps: props.rawProps?.input }));
+        return (React__default.createElement(TextInput, { ...inputProps, onClick: null, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$Y.root, css$Y.timepickerInput, props.inputCx], value: state.inputValue, onValueChange: handleInputChange, onCancel: !props.disableClear && onClear, onFocus: handleFocus, onBlur: handleBlur, isDropdown: false, placeholder: props.placeholder ? props.placeholder : getFormat(), mode: props.mode || DEFAULT_MODE, rawProps: props.rawProps?.input }));
     };
     const renderBody = (bodyProps) => {
         const { forwardedRef, onValueChange, ...timePickerBodyProps } = props;
@@ -1960,7 +2515,7 @@ function TimePicker(props) {
     return (React__default.createElement(Dropdown, { renderTarget: (targetProps) => (props.renderTarget ? props.renderTarget(targetProps) : renderInput(targetProps)), renderBody: (bodyProps) => !props.isDisabled && !props.isReadonly && renderBody(bodyProps), onValueChange: !props.isDisabled && !props.isReadonly ? onToggle : null, value: state.isOpen, modifiers: [{ name: 'offset', options: { offset: [0, 6] } }], forwardedRef: props.forwardedRef }));
 }
 
-var css$X = {"root":"Ff-Md8"};
+var css$X = {"root":"_0EvB8b"};
 
 function applyInputAddonMods() {
     return [
@@ -1969,43 +2524,29 @@ function applyInputAddonMods() {
 }
 const InputAddon = /* @__PURE__ */withMods(InputAddon$1, applyInputAddonMods);
 
-var css$W = {"root":"MLN6Wr"};
+var css$W = {"root":"_1p7ere"};
 
 function applySliderMods() {
     return [css$W.root, 'uui-color-neutral'];
 }
 const Slider = /* @__PURE__ */withMods(Slider$1, applySliderMods);
 
-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":"Xp4Y-1","tooltip":"MkecJN"};
+var css$V = {"root":"nRNd81","tooltip":"_8FGpYj"};
 
 function applyRatingMods(mods) {
     return [
         css$V.root,
-        `uui-size-${mods.size || settings.sizes.defaults.rating}`,
+        `uui-size-${mods.size || settings.rating.sizes.default}`,
     ];
 }
 const Rating = /* @__PURE__ */withMods(uuiComponents.Rating, applyRatingMods, (props) => ({
-    filledStarIcon: props.icon || ForwardRef$t,
-    emptyStarIcon: props.icon || ForwardRef$t,
+    filledStarIcon: props.icon || settings.rating.icons.filledRatingIcon,
+    emptyStarIcon: props.icon || settings.rating.icons.emptyRatingIcon,
     Tooltip,
 }));
 
+var css$U = {"root":"-VD0hh","container":"_34S4zn"};
+
 const defaultFormat = 'MMM D, YYYY';
 const valueFormat = 'YYYY-MM-DD';
 const supportedDateFormats = (format) => {
@@ -2133,8 +2674,6 @@ const getNextYearsList = (currentDate) => {
     return currentDate.add(16, 'year');
 };
 
-var css$U = {"root":"_600tri","container":"rBv322"};
-
 const uuiHeader = {
     container: 'uui-datepicker-header-container',
     headerNav: 'uui-datepicker-header-nav',
@@ -2212,19 +2751,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 || ForwardRef$w, color: "secondary", fill: "ghost", cx: uuiHeader.navIconLeft, onClick: !isDisabled && (() => onLeftNavigationArrow()), isDisabled: disablePrev }),
+            React.createElement(Button, { icon: navIconLeft || settings.datePicker.icons.body.prevIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconLeft, onClick: !isDisabled && (() => onLeftNavigationArrow()), isDisabled: disablePrev }),
             React.createElement(Button, { caption: title, fill: "ghost", cx: uuiHeader.navTitle, onClick: !isDisabled && (() => onCaptionClick(view)) }),
-            React.createElement(Button, { icon: navIconRight || ForwardRef$v, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
+            React.createElement(Button, { icon: navIconRight || settings.datePicker.icons.body.nextIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
 }
 
-var css$T = {"root":"_27nU7X"};
+var css$T = {"root":"z6vmNs"};
 
 function applyDateSelectionMods() {
-    return [css$T.root, `uui-size-${settings.sizes.defaults.datePicker}`];
+    return [css$T.root, `uui-size-${settings.datePicker.sizes.body}`];
 }
 const Calendar = /* @__PURE__ */withMods(Calendar$1, applyDateSelectionMods);
 
-var css$S = {"root":"najTvH"};
+var css$S = {"root":"PPpSD-"};
 
 const uuiDatePickerBody = {
     wrapper: 'uui-datepicker-body-wrapper',
@@ -2267,7 +2806,7 @@ function StatelessDatePickerBodyComp({ renderDay, isHoliday, cx: classes, filter
                 return (React__default.createElement(Calendar, { value: selectedDate, month: month, onValueChange: onDayClick, filter: filter, renderDay: renderDay, isHoliday: isHoliday, isDisabled: isDisabled }));
         }
     };
-    return (React__default.createElement("div", { ref: ref, className: cx$1(uuiDatePickerBodyBase.container, `uui-size-${settings.sizes.defaults.datePicker}`, classes), ...rawProps },
+    return (React__default.createElement("div", { ref: ref, className: cx$1(uuiDatePickerBodyBase.container, `uui-size-${settings.datePicker.sizes.body}`, classes), ...rawProps },
         React__default.createElement("div", { className: cx$1(css$S.root, uuiDatePickerBody.wrapper) },
             React__default.createElement(DatePickerHeader, { value: {
                     view,
@@ -2285,7 +2824,7 @@ const modifiers$1 = [{
         options: { offset: [0, 6] },
     }];
 function DatePickerComponent(props, ref) {
-    const { format = defaultFormat, value, size = settings.sizes.defaults.datePicker } = props;
+    const { format = defaultFormat, value, size = settings.datePicker.sizes.input } = props;
     const context = useUuiContext();
     const [inputValue, setInputValue] = useState(toCustomDateFormat(value, format));
     const [isBodyOpen, setBodyIsOpen] = useState(false);
@@ -2325,7 +2864,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 && systemIcons.calendar ? systemIcons.calendar : 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 ? settings.datePicker.icons.input.calendarIcon : 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) {
@@ -2350,7 +2889,7 @@ function DatePickerComponent(props, ref) {
 }
 const DatePicker = /* @__PURE__ */React__default.forwardRef(DatePickerComponent);
 
-var css$R = {"date-input":"rsM8Mm","dateInput":"rsM8Mm","root":"_1UPLtY","separator":"ZVsvRD","mode-form":"P66vMX","modeForm":"P66vMX","mode-cell":"_3AeBts","modeCell":"_3AeBts"};
+var css$R = {"date-input":"KWy5Nx","dateInput":"KWy5Nx","root":"fVggm-","separator":"_-4EA4L","mode-form":"-HscNy","modeForm":"-HscNy","mode-cell":"_97hdBQ","modeCell":"_97hdBQ"};
 
 const RangeDatePickerInput = /* @__PURE__ */forwardRef(({ isDisabled, isInvalid, isReadonly, size, disableClear, rawProps, value, inFocus, format, onValueChange, onFocusInput, onBlurInput, onClick, getPlaceholder, filter, onKeyDown, id, cx: classes, }, ref) => {
     const [inputValue, setInputValue] = useState(toCustomDateRangeFormat(value, format));
@@ -2393,15 +2932,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.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", { 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", { className: css$R.separator }),
-        React__default.createElement(TextInput, { cx: cx$1(css$R.dateInput, inFocus === 'to' && uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.sizes.defaults.rangeDatePicker, value: inputValue.to || undefined, onCancel: clearAllowed ? () => {
+        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 ? () => {
                 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":"RRWJNF"};
+var css$Q = {"root":"bP7mL2"};
 
 const uuiPresets = {
     container: 'uui-presets-container',
@@ -2418,10 +2957,10 @@ const getPresets = (presets) => {
 function CalendarPresets(props) {
     return (React.createElement("div", { ref: props.forwardedRef, className: cx$1(uuiPresets.container, css$Q.root, props.cx), ...props.rawProps },
         React.createElement("div", { className: uuiPresets.header }, "Presets"),
-        getPresets(props.presets).map((item) => (React.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: "24" })))));
+        getPresets(props.presets).map((item) => (React.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: settings.rangeDatePicker.sizes.preset })))));
 }
 
-var css$P = {"root":"lsZRKd","container":"TUeaKh","day-selection":"_65yCc9","daySelection":"_65yCc9","from-picker":"OQcWfb","fromPicker":"OQcWfb","to-picker":"_8u5qpd","toPicker":"_8u5qpd","bodes-wrapper":"Pt0ZoG","bodesWrapper":"Pt0ZoG","blocker":"OoIGjt"};
+var css$P = {"root":"jGbeTV","container":"ss46Jz","day-selection":"tUz2eZ","daySelection":"tUz2eZ","from-picker":"odWWTO","fromPicker":"odWWTO","to-picker":"ntFt-0","toPicker":"ntFt-0","bodes-wrapper":"cJUS8X","bodesWrapper":"cJUS8X","blocker":"OQEZcA"};
 
 const uuiRangeDatePickerBody = {
     inRange: 'uui-range-datepicker-in-range',
@@ -2596,14 +3135,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":"PDOh3y","dropdownContainer":"PDOh3y"};
+var css$O = {"dropdown-container":"fse70v","dropdownContainer":"fse70v"};
 
 const modifiers = [{
         name: 'offset',
         options: { offset: [0, 6] },
     }];
 function RangeDatePickerComponent(props, ref) {
-    const { value: _value, format = defaultFormat, size = settings.sizes.defaults.rangeDatePicker } = props;
+    const { value: _value, format = defaultFormat, size = settings.rangeDatePicker.sizes.default } = props;
     const value = _value || defaultRangeValue; // also handles null in comparison to default value
     const context = useUuiContext();
     const [isOpen, setIsOpen] = useState(false);
@@ -2664,7 +3203,7 @@ function RangeDatePickerComponent(props, ref) {
 }
 const RangeDatePicker = /* @__PURE__ */React__default.forwardRef(RangeDatePickerComponent);
 
-var css$N = {"root":"L1jcOY","blocker":"i8iQOX","marker":"_6b7v2O","top":"N7QsMo","bottom":"YDlIp2","left":"NlnW7E","right":"AtQaSJ","inside":"ko-aqq"};
+var css$N = {"root":"fcgGKr","blocker":"LYayiw","marker":"G9kt3a","top":"e9ZTvp","bottom":"yFKRaN","left":"_767gzT","right":"tahKuC","inside":"_1SbJ5P"};
 
 function DropMarker(props) {
     return props.isDndInProgress
@@ -2679,13 +3218,13 @@ function DropMarker(props) {
         : null;
 }
 
-var css$M = {"root":"_7EnJI-","line-height":"YsJL0i","lineHeight":"YsJL0i","font-size":"uHcJve","fontSize":"uHcJve"};
+var css$M = {"root":"bVIUSn","line-height":"PiBSoi","lineHeight":"PiBSoi","font-size":"TJ-U2T","fontSize":"TJ-U2T"};
 
 function applyTextMods(mods) {
     return [
         css$M.root,
         'uui-text',
-        `uui-size-${mods.size || settings.sizes.defaults.text}`,
+        `uui-size-${mods.size || settings.text.sizes.default}`,
         (mods.size !== 'none' || mods.lineHeight) && css$M.lineHeight,
         (mods.size !== 'none' || mods.fontSize) && css$M.fontSize,
         `uui-color-${mods.color || 'primary'}`,
@@ -2706,7 +3245,7 @@ const Text = /* @__PURE__ */withMods(uuiComponents.Text, applyTextMods, (props)
     };
 });
 
-var css$L = {"root":"-DD56p","loading-word":"Xd3rfs","loadingWord":"Xd3rfs","animated-loading":"QY43Je","animatedLoading":"QY43Je","skeleton_loading":"-bIPQ5","skeletonLoading":"-bIPQ5"};
+var css$L = {"root":"WQ5Q7s","loading-word":"q5IqY3","loadingWord":"q5IqY3","animated-loading":"_0EMt40","animatedLoading":"_0EMt40","skeleton_loading":"kjLWZu","skeletonLoading":"kjLWZu"};
 
 const TextPlaceholder = (props) => {
     const pattern = '&nbsp;';
@@ -2723,16 +3262,16 @@ const TextPlaceholder = (props) => {
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
-const RichTextView = /* @__PURE__ */withMods(uuiComponents.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || settings.sizes.defaults.richTextView}`]);
+const RichTextView = /* @__PURE__ */withMods(uuiComponents.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || settings.richTextView.sizes.default}`]);
 
-var css$K = {"modal":"_91AJIK","search-wrapper":"T-8-RB","searchWrapper":"T-8-RB","no-data":"BbzuTl","noData":"BbzuTl","type-search-to-load-size-24":"_4XQM2X","typeSearchToLoadSize24":"_4XQM2X"};
+var css$K = {"modal":"arlA04","search-wrapper":"xgAUF4","searchWrapper":"xgAUF4","no-data":"-bZWnM","noData":"-bZWnM","type-search-to-load-size-24":"F4k1w2","typeSearchToLoadSize24":"F4k1w2"};
 
 class DataPickerBody extends PickerBodyBase {
     constructor() {
         super(...arguments);
         this.lens = Lens.onEditableComponent(this);
         this.searchLens = this.lens.prop('search').default('');
-        this.getSearchSize = () => (isMobile() ? settings.sizes.pickerInput.body.mobile.searchInput : this.props.searchSize);
+        this.getSearchSize = () => (isMobile() ? settings.pickerInput.sizes.body.mobileSearchInput : this.props.searchSize);
     }
     renderEmpty() {
         const search = this.searchLens.get();
@@ -2766,7 +3305,7 @@ class DataPickerBody extends PickerBodyBase {
     render() {
         const searchSize = this.getSearchSize();
         return (React__default.createElement(React__default.Fragment, null,
-            this.showSearch() && (React__default.createElement("div", { key: "search", className: css$K.searchWrapper },
+            this.showSearch() && (React__default.createElement("div", { key: "search", className: cx$1(css$K.searchWrapper, 'uui-picker_input-body-search') },
                 React__default.createElement(FlexCell$1, { grow: 1 },
                     React__default.createElement(SearchInput, { ref: this.searchRef, placeholder: i18n.dataPickerBody.searchPlaceholder, ...this.searchLens.toProps(), onKeyDown: this.searchKeyDown, size: searchSize, debounceDelay: this.props.searchDebounceDelay, rawProps: { dir: 'auto' } })))),
             React__default.createElement(FlexRow, { key: "body", cx: cx$1('uui-picker_input-body', css$K[this.props.editMode], css$K[this.props.selectionMode]), rawProps: { style: { maxHeight: this.props.maxHeight, maxWidth: this.props.maxWidth } } }, this.props.rows.length === 0 && this.props.value.topIndex === 0
@@ -2776,11 +3315,11 @@ class DataPickerBody extends PickerBodyBase {
     }
 }
 
-var css$J = {"footer":"Lcs8CI"};
+var css$J = {"footer":"wPqX4O"};
 
 function DataPickerFooterImpl(props) {
     const { search, clearSelection, view, showSelected, selectionMode, isSearchTooShort, } = props;
-    const size = isMobile() ? settings.sizes.pickerInput.body.mobile.footer.linkButton : props.size;
+    const size = isMobile() ? settings.pickerInput.sizes.body.mobileFooterLinkButton : props.size;
     const hasSelection = view.getSelectedRowsCount() > 0;
     const rowsCount = view.getListProps().rowsCount;
     const isSinglePicker = selectionMode === 'single';
@@ -2792,7 +3331,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.sizes.pickerInput.body.dropdown.footer.switch[props.size], value: showSelected.value, isDisabled: !hasSelection, onValueChange: showSelected.onValueChange, label: i18n.pickerInput.showOnlySelectedLabel })),
+        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(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.
@@ -2802,32 +3341,17 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = /* @__PURE__ */React__default.memo(DataPickerFooterImpl);
 
-var css$I = {"header":"_1STOx4","title":"_1jQJh0","close":"H6NdRG"};
+var css$I = {"header":"tB-Mcy","title":"KQr7OH","close":"Q3MCTf"};
 
 const DataPickerHeaderImpl = (props) => {
     const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
-    return (React__default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: css$I.header },
-        React__default.createElement(Text, { size: settings.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 })));
+    return (React__default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: [css$I.header, 'uui-picker_input-body-header'] },
+        React__default.createElement("div", { className: css$I.title }, title),
+        React__default.createElement(IconButton, { icon: settings.pickerInput.icons.body.pickerBodyMobileHeaderCloseIcon, onClick: () => props.close?.(), cx: css$I.close })));
 };
 const DataPickerHeader = /* @__PURE__ */React__default.memo(DataPickerHeaderImpl);
 
-var _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":"_1h6hYa","align-widgets-top":"MhDDlA","alignWidgetsTop":"MhDDlA","align-widgets-center":"xec-wJ","alignWidgetsCenter":"xec-wJ","icon-container":"DGsFai","iconContainer":"DGsFai","loading-cell":"pTiZui","loadingCell":"pTiZui","content-wrapper":"ejVFVc","contentWrapper":"ejVFVc","render-item":"Smm29D","renderItem":"Smm29D","icon-wrapper":"dJZulN","iconWrapper":"dJZulN","icon-default":"fgAwJs","iconDefault":"fgAwJs","selected-mark":"Cwy1BO","selectedMark":"Cwy1BO"};
+var css$H = {"root":"HhcgUX","align-widgets-top":"hK-9oZ","alignWidgetsTop":"hK-9oZ","align-widgets-center":"JXYBxf","alignWidgetsCenter":"JXYBxf","icon-container":"qOnYvL","iconContainer":"qOnYvL","loading-cell":"ib9OA2","loadingCell":"ib9OA2","content-wrapper":"xpyHIX","contentWrapper":"xpyHIX","render-item":"UYZW4D","renderItem":"UYZW4D","icon-wrapper":"_5K3S-K","iconWrapper":"_5K3S-K","icon-default":"_5itHyi","iconDefault":"_5itHyi","selected-mark":"uMkwgi","selectedMark":"uMkwgi"};
 
 function DataPickerCell(props) {
     const ref = React.useRef();
@@ -2835,18 +3359,21 @@ function DataPickerCell(props) {
     if (props.rowProps.isLoading) {
         content = (
         // remove `css.loadingCell` after` removing `margin: 0 3px 3px 0` from `TextPlaceholder` `loadingWord` class styles.
-        React.createElement(Text, { key: "t", size: settings.sizes.pickerInput.body.dropdown.row.cell.text[props.size], cx: css$H.loadingCell },
+        React.createElement(Text, { key: "t", size: props.size, cx: css$H.loadingCell },
             React.createElement(TextPlaceholder, null)));
     }
     else if (props.rowProps.isUnknown) {
-        content = (React.createElement(Text, { key: "t", size: settings.sizes.pickerInput.body.dropdown.row.cell.text[props.size] }, "Unknown"));
+        content = (React.createElement(Text, { key: "t", size: 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, 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
+            (props.rowProps.isChildrenSelected || props.rowProps.isSelected) && (React.createElement("div", { className: cx$1(css$H.iconWrapper, 'uui-picker_input-cell-select_icon', uuiMod.selected) },
+                React.createElement(IconContainer, { size: settings.pickerInput.sizes.body.selectIconMap[props.size], icon: SelectIcon, cx: props.rowProps.isChildrenSelected ? css$H.iconDefault : css$H.selectedMark, rawProps: { 'aria-label': props.rowProps.isChildrenSelected
                             ? 'Child is selected'
                             : 'Selected' } })))));
     }
@@ -2854,31 +3381,32 @@ function DataPickerCell(props) {
     return (React.createElement(FlexCell, { ref: ref, grow: 1, width: 0, minWidth: 0, rawProps: { role: 'cell' }, cx: [
             css$H.root,
             props.cx,
+            'uui-picker_input-cell',
             'data-picker-cell',
             props.size && `uui-size-${props.size}`,
             css$H[`align-widgets-${props.alignActions || 'top'}`],
         ], style: props.padding && {
-            '--uui-data_picker_cell-horizontal-padding': `${props.padding}px`,
+            '--uui-data_picker-horizontal-padding': `${props.padding}px`,
         } },
         React.createElement(DataRowAddons, { size: props.size, ...props, tabIndex: -1 }),
         getWrappedContent()));
 }
 
-var css$G = {"picker-row":"HAX13Y","pickerRow":"HAX13Y"};
+var css$G = {"picker-row":"xRksz9","pickerRow":"xRksz9"};
 
 class DataPickerRow extends React.Component {
     constructor() {
         super(...arguments);
         this.renderContent = () => {
-            return (React.createElement(DataPickerCell, { key: "name", size: this.props.size || settings.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 }));
+            return (React.createElement(DataPickerCell, { key: "name", size: this.props.size || settings.pickerInput.sizes.body.row, padding: this.props.padding, rowProps: this.props, alignActions: this.props.alignActions || 'top', renderItem: this.props.renderItem }));
         };
     }
     render() {
-        return (React.createElement(DataPickerRow$1, { ...this.props, cx: [css$G.pickerRow, this.props.cx], renderContent: this.renderContent }));
+        return (React.createElement(DataPickerRow$1, { ...this.props, cx: [css$G.pickerRow, 'uui-picker_input-row', this.props.cx], renderContent: this.renderContent }));
     }
 }
 
-var css$F = {"done":"_3oLJh5","container":"Fk2HoJ"};
+var css$F = {"done":"Hp6d9O","container":"W4n9iR"};
 
 const PickerBodyMobileView = (props) => {
     const isMobileView = isMobile();
@@ -2887,32 +3415,8 @@ 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.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"
-  })));
+        isMobileView && (React__default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => props.onClose?.(), cx: css$F.done, size: settings.pickerInput.sizes.body.mobileFooterLinkButton }))));
 };
-var ForwardRef$r = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
-
-var css$E = {"sub-header-wrapper":"EKHfcq","subHeaderWrapper":"EKHfcq","switch":"sbjyKx","no-found-modal-container":"_1rk25I","noFoundModalContainer":"_1rk25I","no-found-modal-container-icon":"GU5nBI","noFoundModalContainerIcon":"GU5nBI","no-found-modal-container-text":"QX9EXW","noFoundModalContainerText":"QX9EXW"};
 
 const mergeHighlightRanges = (ranges) => {
     const mergedRanges = [];
@@ -2979,27 +3483,29 @@ const getHighlightedSearchMatches = (str, search) => {
     return getDecoratedText(str, ranges);
 };
 
-var css$D = {"root":"rmIAMV","column-gap":"HHUTCl","columnGap":"HHUTCl","multiline":"FaX4it","text":"NGUfFT"};
+var css$E = {"root":"rCIvMT","column-gap":"ILldhK","columnGap":"ILldhK","title":"magf6q","subtitle":"_17ltOR","disabled":"AofeyH","multiline":"U314R-"};
 
 function PickerItem(props) {
-    const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, cx, } = props;
-    const itemSize = size || settings.sizes.pickerInput.body.dropdown.row.cell.item.default;
+    const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, } = props;
+    const itemSize = size || settings.pickerInput.sizes.body.row;
     const isMultiline = !!(props.title && props.subtitle);
     const { search } = props.dataSourceState ?? {};
     const title = highlightSearchMatches ? getHighlightedSearchMatches(props.title, search) : props.title;
     const subtitle = highlightSearchMatches ? getHighlightedSearchMatches(props.subtitle, search) : props.subtitle;
-    return (React.createElement(FlexCell, { width: "auto", cx: [css$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() })),
+    return (React.createElement(FlexCell, { width: "auto", cx: [css$E.root, 'uui-picker_input-item', 'uui-typography', props.cx] },
+        React.createElement(FlexRow, { size: itemSize, cx: [isMultiline && css$E.multiline, css$E.columnGap], rawProps: { style: { '--uui-picker_item-vertical-padding': `${settings.pickerInput.sizes.body.itemVerticalPaddingMap[itemSize]}px` } } },
+            avatarUrl && (React.createElement(Avatar, { isLoading: isLoading, img: avatarUrl, size: getAvatarSize(itemSize, isMultiline) })),
             icon && React.createElement(IconContainer, { icon: icon }),
             React.createElement(FlexCell, { width: "auto" },
-                title && (React.createElement(Text, { size: itemSize, cx: css$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))))));
+                title && (React.createElement("div", { className: cx(css$E.title, isDisabled && css$E.disabled, `uui-size-${itemSize}`) }, title)),
+                subtitle && (React.createElement("div", { className: cx(css$E.subtitle, isDisabled && css$E.disabled, `uui-size-${itemSize}`) }, subtitle))))));
 }
 function getAvatarSize(size, isMultiline) {
-    return settings.sizes.pickerInput.body.dropdown.row.cell.item.avatar[isMultiline ? 'multiline' : 'rest'][size];
+    return settings.pickerInput.sizes.body[isMultiline ? 'itemAvatarMultilineMap' : 'itemAvatarMap'][size];
 }
 
+var css$D = {"sub-header-wrapper":"P3mvgh","subHeaderWrapper":"P3mvgh","switch":"Qqybbp","no-found-modal-container":"e14vwO","noFoundModalContainer":"e14vwO","no-found-modal-container-icon":"Fvl7ZH","noFoundModalContainerIcon":"Fvl7ZH","no-found-modal-container-text":"NrgMHA","noFoundModalContainerText":"NrgMHA"};
+
 function PickerModal(props) {
     const { view, selection, dataSourceStateLens, dataSourceState, getDataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = usePickerModal(props);
     const getSubtitle = ({ path }, { search }) => {
@@ -3012,10 +3518,10 @@ function PickerModal(props) {
     };
     const renderItem = (item, rowProps, dsState) => {
         const { flattenSearchResults } = view.getConfig();
-        return (React__default.createElement(PickerItem, { title: getName(item), size: "36", dataSourceState: dsState, ...(flattenSearchResults ? { subtitle: getSubtitle(rowProps, dataSourceState) } : {}), ...rowProps }));
+        return (React__default.createElement(PickerItem, { title: getName(item), dataSourceState: dsState, ...(flattenSearchResults ? { subtitle: getSubtitle(rowProps, dataSourceState) } : {}), ...rowProps }));
     };
     const renderRow = (rowProps) => {
-        return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React__default.createElement(DataPickerRow, { ...rowProps, key: rowProps.rowKey, padding: "24", size: "36", renderItem: (item, itemProps) => renderItem(item, itemProps, dataSourceState) }));
+        return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React__default.createElement(DataPickerRow, { ...rowProps, key: rowProps.rowKey, padding: "24", renderItem: (item, itemProps) => renderItem(item, itemProps, dataSourceState) }));
     };
     const renderFooter = () => {
         const hasSelection = view.getSelectedRowsCount() > 0;
@@ -3028,17 +3534,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$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)));
+        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)));
     };
     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$E.subHeaderWrapper },
+            React__default.createElement(FlexCell, { cx: css$D.subHeaderWrapper },
                 React__default.createElement(FlexRow, { vPadding: "24" },
                     React__default.createElement(SearchInput, { ...dataSourceStateLens.prop('search').toProps(), onKeyDown: (e) => handleDataSourceKeyboard({
                             value: getDataSourceState(),
@@ -3047,19 +3553,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$E.switch, size: "18", ...getFooterProps().showSelected, isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" })),
+                !isSingleSelect() && (React__default.createElement(Switch, { cx: css$D.switch, size: settings.pickerInput.sizes.body.footerSwitchMap[settings.pickerInput.sizes.body.row], ...getFooterProps().showSelected, isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" })),
                 props.renderFilter && React__default.createElement(FlexCell, { grow: 2 }, props.renderFilter(dataSourceStateLens.prop('filter').toProps()))),
             React__default.createElement(DataPickerBody, { ...getListProps(), value: getDataSourceState(), onValueChange: handleDataSourceValueChange, search: dataSourceStateLens.prop('search').toProps(), showSearch: false, rows: rows, renderNotFound: renderNotFound, editMode: "modal" }),
-            React__default.createElement(ModalFooter, { padding: "24", vPadding: "24" }, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
+            React__default.createElement(ModalFooter, null, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$C = {"tooltip":"c0UAS6"};
+var css$C = {"tooltip":"W13Z6-"};
 
 const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     const tagProps = {
         ...props,
         tabIndex: -1,
-        size: settings.sizes.pickerInput.toggler.tag[props.size],
+        size: settings.pickerInput.sizes.toggler.tagMap[props.size],
         caption: props.rowProps?.isLoading ? React.createElement(TextPlaceholder, null) : props.caption,
     };
     if (props.isCollapsed) {
@@ -3072,26 +3578,26 @@ const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     }
 });
 
-var css$B = {"root":"Oa-UbH","mode-form":"idn1FV","modeForm":"idn1FV","mode-cell":"LjCQg3","modeCell":"LjCQg3","mode-inline":"trQ9zS","modeInline":"trQ9zS"};
+var css$B = {"root":"rCoQlF","mode-form":"K6TUt-","modeForm":"K6TUt-","mode-cell":"NUa-OE","modeCell":"NUa-OE","mode-inline":"_2x-uYn","modeInline":"_2x-uYn"};
 
 const defaultMode = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
     return [
         css$B.root,
         'uui-picker_toggler',
-        `uui-size-${mods.size || settings.sizes.pickerInput.toggler.defaults.size}`,
+        `uui-size-${mods.size || settings.pickerInput.sizes.toggler.default}`,
         css$B['mode-' + (mods.mode || defaultMode)],
     ];
 }
 function PickerTogglerComponent(props, ref) {
     const renderItem = (itemProps) => {
-        const itemPropsWithSize = { ...itemProps, size: (props.size || settings.sizes.pickerInput.toggler.defaults.tag) };
+        const itemPropsWithSize = { ...itemProps, size: props.size || settings.pickerInput.sizes.toggler.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: systemIcons.clear, dropdownIcon: systemIcons.foldingArrow }));
+    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 }));
 }
 const PickerToggler = /* @__PURE__ */React.forwardRef(PickerTogglerComponent);
 
@@ -3131,15 +3637,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 });
+        return props.renderFooter
+            ? props.renderFooter(footerProps)
+            : React__default.createElement(DataPickerFooter, { ...footerProps, size: props.size || settings.pickerInput.sizes.body.row });
     };
     const getRowSize = () => {
         if (isMobile()) {
-            return settings.sizes.pickerInput.body.mobile.row;
+            return settings.pickerInput.sizes.body.mobileRow;
         }
-        return props.editMode === 'modal'
-            ? settings.sizes.pickerInput.body.modal.row
-            : (props.size || settings.sizes.pickerInput.body.dropdown.row.default);
+        return props.size || settings.pickerInput.sizes.body.row;
     };
     const getSubtitle = ({ path }, { search }) => {
         if (!search)
@@ -3154,13 +3660,13 @@ function PickerInputComponent({ highlightSearchMatches = true, ...props }, ref)
         return (React__default.createElement(PickerItem, { title: getName(item), size: getRowSize(), dataSourceState: dsState, highlightSearchMatches: highlightSearchMatches, ...(flattenSearchResults ? { subtitle: getSubtitle(rowProps, dataSourceState) } : {}), ...rowProps }));
     };
     const renderRow = (rowProps, dsState) => {
-        return props.renderRow ? (props.renderRow(rowProps, dsState)) : (React__default.createElement(DataPickerRow, { ...rowProps, key: rowProps.rowKey, size: getRowSize(), padding: (props.editMode === 'modal' ? settings.sizes.pickerInput.body.modal.padding : settings.sizes.pickerInput.body.dropdown.padding), renderItem: (item, itemProps) => renderRowItem(item, itemProps, dsState) }));
+        return props.renderRow ? (props.renderRow(rowProps, dsState)) : (React__default.createElement(DataPickerRow, { ...rowProps, key: rowProps.rowKey, size: getRowSize(), padding: props.editMode === 'dropdown' ? settings.pickerInput.sizes.body.padding : undefined, renderItem: (item, itemProps) => renderRowItem(item, itemProps, dsState) }));
     };
     const renderBody = (bodyProps, rows) => {
         const renderedDataRows = rows.map((row) => renderRow(row, dataSourceState));
-        const bodyHeight = isMobile() ? document.documentElement.clientHeight : props.dropdownHeight || settings.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' },
+        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' },
             React__default.createElement(DataPickerBody, { ...bodyProps, rows: renderedDataRows, maxHeight: bodyHeight, searchSize: props.size, editMode: "dropdown", selectionMode: props.selectionMode }),
             renderFooter()));
     };
@@ -3173,7 +3679,7 @@ function PickerInputComponent({ highlightSearchMatches = true, ...props }, ref)
 }
 const PickerInput = /* @__PURE__ */React__default.forwardRef(PickerInputComponent);
 
-var css$A = {"row":"G0qSEo"};
+var css$A = {"row":"mDnKOK"};
 
 function PickerListItem(props) {
     let label;
@@ -3193,7 +3699,7 @@ function PickerListItem(props) {
     return (React__default.createElement("div", { role: "option", "aria-selected": props.isSelectable ? props.isSelected : undefined, "aria-busy": props.isLoading, "aria-posinset": props.index + 1, ...(props.checkbox?.isVisible && { 'aria-checked': props.isChecked }), className: css$A.row }, component));
 }
 
-var css$z = {"root":"hadufp"};
+var css$z = {"root":"A7Wa-A"};
 
 function PickerList(props) {
     const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, dataSourceState, getModalTogglerCaption, } = usePickerList(props);
@@ -3228,7 +3734,7 @@ function PickerList(props) {
             }, selectedRows)));
 }
 
-var css$y = {"root":"J2oNjb","wrapper":"fnLIqq","align-widgets-top":"mjxRPp","alignWidgetsTop":"mjxRPp","align-widgets-center":"gTcLPA","alignWidgetsCenter":"gTcLPA"};
+var css$y = {"root":"_1XdjbN","wrapper":"qzABZz","align-widgets-top":"_1Dc-ud","alignWidgetsTop":"_1Dc-ud","align-widgets-center":"ARkF0y","alignWidgetsCenter":"ARkF0y"};
 
 function DataTableCell(initialProps) {
     const props = { ...initialProps };
@@ -3236,48 +3742,48 @@ function DataTableCell(initialProps) {
         props.addons = React.createElement(DataRowAddons, { size: props.size, ...props });
     }
     props.renderPlaceholder = props.renderPlaceholder
-        || (() => (React.createElement(Text, { key: "t", size: settings.sizes.dataTable.body.row.cell.text[props.size] },
+        || (() => (React.createElement(Text, { key: "t", size: props.size },
             React.createElement(TextPlaceholder, { isNotAnimated: true }))));
     props.renderUnknown = props.renderUnknown
-        || (() => (React.createElement(Text, { key: "t", size: settings.sizes.dataTable.body.row.cell.text[props.size] }, "Unknown")));
+        || (() => (React.createElement(Text, { key: "t", size: props.size }, "Unknown")));
     props.renderTooltip = (tooltipProps) => React.createElement(Tooltip, { color: "critical", ...tooltipProps });
     const isEditable = !!props.onValueChange;
     const getLeftPadding = () => {
         const { rowProps: { isLoading }, columnsGap, isFirstColumn } = props;
         if (isFirstColumn && isEditable && !isLoading)
-            return settings.sizes.dataTable.body.row.cell.defaults.padding;
+            return 'var(--uui-dt-cell-padding)';
         if (isEditable && !isLoading)
-            return '0';
+            return '0px';
         if (columnsGap)
-            return isFirstColumn ? columnsGap : +columnsGap / 2;
-        return isFirstColumn ? settings.sizes.dataTable.body.row.cell.defaults.paddingEdge : settings.sizes.dataTable.body.row.cell.defaults.padding;
+            return isFirstColumn ? `${columnsGap}px` : `${+columnsGap / 2}px`;
+        return `var(--uui-dt-cell-padding${isFirstColumn ? '-edge' : ''})`;
     };
     const getRightPadding = () => {
         const { rowProps: { isLoading }, columnsGap, isLastColumn } = props;
         if (isEditable && !isLoading)
-            return '0';
+            return '0px';
         if (columnsGap)
-            return isLastColumn ? columnsGap : +columnsGap / 2;
-        return isLastColumn ? settings.sizes.dataTable.body.row.cell.defaults.paddingEdge : settings.sizes.dataTable.body.row.cell.defaults.padding;
+            return isLastColumn ? `${columnsGap}px` : `${+columnsGap / 2}px`;
+        return `var(--uui-dt-cell-padding${isLastColumn ? '-edge' : ''})`;
     };
     props.cx = [
         'data-table-cell',
         css$y.root,
         props.cx,
-        'uui-size-' + (props.size || settings.sizes.dataTable.body.row.cell.defaults.size),
+        'uui-size-' + (props.size || settings.dataTable.sizes.body.row),
         props.isFirstColumn && 'uui-dt-first-column',
         props.isLastColumn && 'uui-dt-last-column',
         css$y[`align-widgets-${props.alignActions || 'top'}`],
         (props.border || isEditable) && 'uui-dt-vertical-cell-border',
     ];
     props.style = {
-        '--uui-dt-cell-padding-start': `${getLeftPadding()}px`,
-        '--uui-dt-cell-padding-end': `${getRightPadding()}px`,
+        '--uui-dt-cell-padding-start': getLeftPadding(),
+        '--uui-dt-cell-padding-end': getRightPadding(),
     };
     return React.createElement(DataTableCell$1, { ...props });
 }
 
-var css$x = {"root":"hZZdB8"};
+var css$x = {"root":"u8eQGK"};
 
 // Here we define a single instance of the renderCell function to make DataTableRow#shouldComponentUpdate work.
 // As we need our mods to style the cell properly, we extract them from DataTableCellProps.rowProps, which is a hack, but it's reliable enough.
@@ -3289,48 +3795,18 @@ 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.sizes.dataTable.body.row.default}`,
+        css$x.root, 'uui-dt-vars', borderBottom && 'uui-dt-row-border', `uui-size-${size || settings.dataTable.sizes.body.row}`,
     ];
 }, () => propsMods);
 
-var css$w = {"sorting-panel-container":"WKx2Kn","sortingPanelContainer":"WKx2Kn"};
-
-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);
+var css$w = {"sorting-panel-container":"C87L3Z","sortingPanelContainer":"C87L3Z"};
 
 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: ForwardRef$q, onClick: sortAsc }),
-        React__default.createElement(DropdownMenuButton, { isActive: sortDirection === 'desc', caption: i18n.pickerFilterHeader.sortDescending, icon: ForwardRef$p, onClick: sortDesc })));
+        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 })));
 };
 const SortingPanel = /* @__PURE__ */React__default.memo(SortingPanelImpl);
 
@@ -3348,82 +3824,7 @@ const ColumnHeaderDropdownImpl = (props) => {
 };
 const ColumnHeaderDropdown = /* @__PURE__ */React__default.memo(ColumnHeaderDropdownImpl);
 
-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":"_7Vfg2P","caption-wrapper":"KQoiQt","captionWrapper":"KQoiQt","sort-icon":"msyKMt","sortIcon":"msyKMt","dropdown-icon":"_6UHrRy","dropdownIcon":"_6UHrRy","infoIcon":"segMLZ","resizable":"oSnigd","align-right":"sdCB39","alignRight":"sdCB39","align-center":"szENV8","alignCenter":"szENV8","caption":"_94V2Oy","truncate":"_1FIucA","checkbox":"I3VulH","icon":"l-rwIs","fold-all-icon":"Wj6vzc","foldAllIcon":"Wj6vzc","cell-tooltip":"uVPbhK","cellTooltip":"uVPbhK","upper-case":"-MDYrj","upperCase":"-MDYrj","resizing-marker":"_5NA14B","resizingMarker":"_5NA14B","pinned-right":"mibPoD","pinnedRight":"mibPoD","draggable":"XbYbAo","ghost":"NsX2ub","is-dragged-out":"_9IkSo6","isDraggedOut":"_9IkSo6","dnd-marker-left":"_9jkea0","dndMarkerLeft":"_9jkea0","dnd-marker-right":"NUkqZ5","dndMarkerRight":"NUkqZ5","cell-tooltip-wrapper":"NwrDBI","cellTooltipWrapper":"NwrDBI","cell-tooltip-text":"-zMpPT","cellTooltipText":"-zMpPT","tooltip-caption":"_7c9W7N","tooltipCaption":"_7c9W7N","tooltip-info":"bruX73","tooltipInfo":"bruX73"};
+var css$v = {"root":"nNFVjv","caption-wrapper":"npggj0","captionWrapper":"npggj0","sort-icon":"GUsQeW","sortIcon":"GUsQeW","dropdown-icon":"DJqWZt","dropdownIcon":"DJqWZt","infoIcon":"_2lxre3","resizable":"D0sOqj","align-right":"T69CmV","alignRight":"T69CmV","align-center":"_2wpxL-","alignCenter":"_2wpxL-","caption":"_53eWUr","truncate":"fOr1cr","upper-case":"-f1SyF","upperCase":"-f1SyF","checkbox":"kjRHKF","icon":"xFUjYH","fold-all-icon":"Kv11HJ","foldAllIcon":"Kv11HJ","cell-tooltip":"_6J-M-f","cellTooltip":"_6J-M-f","resizing-marker":"SlqAyw","resizingMarker":"SlqAyw","pinned-right":"pVdQnj","pinnedRight":"pVdQnj","draggable":"Uu4dPC","ghost":"A9Vqiq","is-dragged-out":"SbCP43","isDraggedOut":"SbCP43","dnd-marker-left":"_2Kato0","dndMarkerLeft":"_2Kato0","dnd-marker-right":"mpFa3g","dndMarkerRight":"mpFa3g","cell-tooltip-wrapper":"R17D1Q","cellTooltipWrapper":"R17D1Q","cell-tooltip-text":"_4Rswgk","cellTooltipText":"_4Rswgk","tooltip-caption":"_3Atr3M","tooltipCaption":"_3Atr3M","tooltip-info":"ZLOO7Q","tooltipInfo":"ZLOO7Q"};
 
 class DataTableHeaderCell extends React.Component {
     constructor() {
@@ -3436,22 +3837,23 @@ class DataTableHeaderCell extends React.Component {
             column.info && (React.createElement(Text, { cx: [css$v.cellTooltipText, css$v.tooltipInfo] }, column.info))));
         this.getColumnCaption = () => {
             const renderTooltip = this.props.column.renderTooltip || this.getTooltipContent;
-            const captionCx = [
+            const captionCx = cx$1([
                 css$v.caption,
                 this.props.textCase === 'upper' && css$v.upperCase,
                 uuiDataTableHeaderCell.uuiTableHeaderCaption,
-                settings.sizes.dataTable.header.row.cell.truncate.includes(this.props.size) && css$v.truncate,
-            ];
+                'uui-typography-inline',
+                this.props.size >= '48' && css$v.truncate,
+            ]);
             return (React.createElement("div", { className: cx$1(css$v.captionWrapper, css$v['align-' + this.props.column.textAlign], uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
                 React.createElement(Tooltip, { placement: "top", color: "inverted", content: renderTooltip(this.props.column), cx: css$v.cellTooltip, openDelay: 600 },
-                    React.createElement(Text, { key: "text", fontSize: settings.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 }))));
+                    React.createElement("div", { key: "text", className: captionCx }, this.props.column.caption)),
+                this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React.createElement(IconButton, { key: "sort", cx: cx$1(css$v.icon, css$v.sortIcon, this.props.sortDirection && css$v.sortIconActive, uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: this.props.sortDirection ? 'neutral' : 'secondary', icon: settings.dataTable.icons.header[this.props.sortDirection === 'desc' ? 'descSortIcon' : this.props.sortDirection === 'asc' ? 'ascSortIcon' : 'defaultSortIcon'] })),
+                this.props.isFilterActive && (React.createElement(IconButton, { key: "filter", cx: cx$1(css$v.icon, !this.props.sortDirection && css$v.filterIcon, uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "neutral", icon: settings.dataTable.icons.header.filterIcon })),
+                this.props.column.renderFilter && (React.createElement(IconButton, { key: "dropdown", cx: cx$1(css$v.icon, css$v.dropdownIcon, uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), color: "secondary", icon: settings.dataTable.icons.header[this.state.isDropdownOpen ? 'openedDropdownIcon' : 'dropdownIcon'] }))));
         };
         this.renderHeaderCheckbox = () => {
             if (this.props.selectAll && this.props.isFirstColumn) {
-                return (React.createElement(Checkbox, { size: settings.sizes.dataTable.header.row.cell.checkbox[this.props.size], ...this.props.selectAll, cx: cx$1(css$v.checkbox, uuiDataTableHeaderCell.uuiTableHeaderCheckbox) }));
+                return (React.createElement(Checkbox, { size: settings.dataTable.sizes.body.checkboxMap[this.props.size], ...this.props.selectAll, cx: cx$1(css$v.checkbox, uuiDataTableHeaderCell.uuiTableHeaderCheckbox) }));
             }
         };
         this.renderFoldAllIcon = () => {
@@ -3459,7 +3861,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: this.props.areAllFolded ? ForwardRef$k : ForwardRef$l, onClick: this.props.onFoldAll, rawProps: {
+                    React.createElement(IconButton, { color: "secondary", cx: cx$1(css$v.icon, css$v.foldAllIcon, uuiDataTableHeaderCell.uuiTableHeaderFoldAllIcon), icon: settings.dataTable.icons.header[this.props.areAllFolded ? 'unfoldIcon' : 'foldIcon'], onClick: this.props.onFoldAll, rawProps: {
                             'aria-label': this.props.areAllFolded ? 'Expand All' : 'Collapse All',
                             'aria-expanded': !!this.props.areAllFolded,
                         } })));
@@ -3471,32 +3873,32 @@ class DataTableHeaderCell extends React.Component {
         this.getLeftPadding = () => {
             const { columnsGap, isFirstColumn } = this.props;
             if (columnsGap)
-                return isFirstColumn ? columnsGap : +columnsGap / 2;
-            return isFirstColumn ? settings.sizes.dataTable.header.row.cell.defaults.paddingEdge : settings.sizes.dataTable.header.row.cell.defaults.padding;
+                return isFirstColumn ? `${columnsGap}px` : `${+columnsGap / 2}px`;
+            return `var(--uui-dt-header-cell-padding${isFirstColumn ? '-edge' : ''})`;
         };
         this.getRightPadding = () => {
             const { columnsGap, isLastColumn } = this.props;
             if (columnsGap)
-                return isLastColumn ? columnsGap : +columnsGap / 2;
-            return isLastColumn ? settings.sizes.dataTable.header.row.cell.defaults.paddingEdge : settings.sizes.dataTable.header.row.cell.defaults.padding;
+                return isLastColumn ? `${columnsGap}px` : `${+columnsGap / 2}px`;
+            return `var(--uui-dt-header-cell-padding${isLastColumn ? '-edge' : ''})`;
         };
         this.getResizingMarkerWidth = () => {
             const { columnsGap } = this.props;
-            return columnsGap ? +columnsGap / 2 : settings.sizes.dataTable.header.row.cell.defaults.resizeMarker;
+            return columnsGap ? `${+columnsGap / 2}px` : 'var(--uui-resize-marker-width)';
         };
         this.renderCellContent = (props, dropdownProps) => {
             const isResizable = this.props.column.allowResizing ?? this.props.allowColumnsResizing;
             const onClickEvent = !props.isResizing && (!this.props.column.renderFilter ? props.toggleSort : dropdownProps?.onClick);
             const computeStyles = {
-                '--uui-dt-header-cell-icon-size': `${settings.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`,
+                '--uui-dt-header-cell-icon-size': `${settings.dataTable.sizes.header.iconMap[this.props.size || settings.dataTable.sizes.header.row]}px`,
+                '--uui-dt-header-cell-padding-start': this.getLeftPadding(),
+                '--uui-dt-header-cell-padding-end': this.getRightPadding(),
+                '--uui-dt-header-cell-resizing-marker-width': this.getResizingMarkerWidth(),
             };
             return (React.createElement(DataTableCellContainer, { column: this.props.column, ref: (ref) => {
                     props.ref(ref);
                     dropdownProps?.ref?.(ref);
-                }, cx: cx$1(uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiMarkers.clickable, css$v.root, `uui-size-${this.props.size || settings.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: {
+                }, cx: cx$1(uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiMarkers.clickable, css$v.root, `uui-size-${this.props.size || settings.dataTable.sizes.header.row}`, this.props.isFirstColumn && 'uui-dt-header-first-column', this.props.isLastColumn && 'uui-dt-header-last-column', this.props.column.fix && css$v['pinned-' + this.props.column.fix], isResizable && css$v.resizable, props.isDraggable && css$v.draggable, props.isDragGhost && css$v.ghost, props.isDraggedOut && css$v.isDraggedOut, props.isDndInProgress && css$v['dnd-marker-' + props.position]), onClick: onClickEvent, rawProps: {
                     role: 'columnheader',
                     'aria-sort': this.props.sortDirection === 'asc' ? 'ascending' : this.props.sortDirection ? 'descending' : 'none',
                     ...props.eventHandlers,
@@ -3516,66 +3918,32 @@ class DataTableHeaderCell extends React.Component {
     }
 }
 
-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":"_7G-aol"};
-
-var css$t = {"root":"orSNlT","caption-wrapper":"Mvvde7","captionWrapper":"Mvvde7","align-center":"xh7e4K","alignCenter":"xh7e4K","caption":"MibKUx","truncate":"gc499d","group-cell-tooltip":"y53S0v","groupCellTooltip":"y53S0v","upper-case":"lGTyaD","upperCase":"lGTyaD","group-cell-tooltip-wrapper":"fE8qGT","groupCellTooltipWrapper":"fE8qGT","group-cell-tooltip-text":"rgdXwu","groupCellTooltipText":"rgdXwu","tooltip-caption":"_6Thokg","tooltipCaption":"_6Thokg","tooltip-info":"fFlp-1","tooltipInfo":"fFlp-1"};
+var css$u = {"root":"nnmUsE","caption-wrapper":"NWIalo","captionWrapper":"NWIalo","align-center":"UH7NoV","alignCenter":"UH7NoV","caption":"yYFm7f","truncate":"Q2DOnW","upper-case":"X2Dsm3","upperCase":"X2Dsm3","group-cell-tooltip":"v66jw-","groupCellTooltip":"v66jw-","group-cell-tooltip-wrapper":"_9vdvGJ","groupCellTooltipWrapper":"_9vdvGJ","group-cell-tooltip-text":"jFcg5i","groupCellTooltipText":"jFcg5i","tooltip-caption":"Xp-SPL","tooltipCaption":"Xp-SPL","tooltip-info":"_8B8Zji","tooltipInfo":"_8B8Zji"};
 
 class DataTableHeaderGroupCell extends React.Component {
     constructor() {
         super(...arguments);
-        this.getTooltipContent = (column) => (React.createElement("div", { className: cx$1(css$t.groupCellTooltipWrapper, uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCaptionTooltip) },
-            React.createElement(Text, { cx: [css$t.groupCellTooltipText, css$t.tooltipCaption] }, column.caption),
-            column.info && (React.createElement(Text, { cx: [css$t.groupCellTooltipText, css$t.tooltipInfo] }, column.info))));
+        this.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.getColumnCaption = () => {
             const renderTooltip = this.props.group.renderTooltip || this.getTooltipContent;
-            const captionCx = [
-                css$t.caption,
-                this.props.textCase === 'upper' && css$t.upperCase,
-                uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCaption,
-                settings.sizes.dataTable.header.row.groupCell.truncate.includes(this.props.size) && css$t.truncate,
-            ];
-            return (React.createElement("div", { className: cx$1(css$t.captionWrapper, css$t['align-' + this.props.group.textAlign], uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCaptionWrapper) },
-                React.createElement(Tooltip, { placement: "top", color: "inverted", content: renderTooltip(this.props.group), cx: css$t.groupCellTooltip, openDelay: 600 },
-                    React.createElement(Text, { key: "text", fontSize: settings.sizes.dataTable.header.row.groupCell.columnCaption[this.props.textCase === 'upper' ? 'uppercase' : 'fontSize'], size: settings.sizes.dataTable.header.row.groupCell.columnCaption.size, cx: captionCx }, this.props.group.caption))));
+            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))));
         };
         this.getLeftPadding = () => {
             const { columnsGap, isFirstCell } = this.props;
             if (columnsGap)
-                return isFirstCell ? columnsGap : +columnsGap / 2;
-            return isFirstCell ? settings.sizes.dataTable.header.row.groupCell.defaults.paddingEdge : settings.sizes.dataTable.header.row.groupCell.defaults.padding;
+                return isFirstCell ? `${columnsGap}px` : `${+columnsGap / 2}px`;
+            return `var(--uui-dt-header-group-cell-padding${isFirstCell ? '-edge' : ''})`;
         };
         this.getRightPadding = () => {
             const { columnsGap, isLastCell } = this.props;
             if (columnsGap)
-                return isLastCell ? columnsGap : +columnsGap / 2;
-            return isLastCell ? settings.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()));
+                return isLastCell ? `${columnsGap}px` : `${+columnsGap / 2}px`;
+            return `var(--uui-dt-header-group-cell-padding${isLastCell ? '-edge' : ''})`;
         };
     }
     render() {
@@ -3583,17 +3951,19 @@ class DataTableHeaderGroupCell extends React.Component {
             return this.props.group.renderHeaderCell(this.props);
         }
         const computeStyles = {
-            '--uui-dt-header-group-cell-padding-start': `${this.getLeftPadding()}px`,
-            '--uui-dt-header-group-cell-padding-end': `${this.getRightPadding()}px`,
+            '--uui-dt-header-group-cell-padding-start': this.getLeftPadding(),
+            '--uui-dt-header-group-cell-padding-end': this.getRightPadding(),
         };
-        return (React.createElement(DataTableCellContainer, { column: this.props.group, cx: cx$1(uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCell, css$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()));
+        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()));
     }
 }
 
-const DataTableHeaderRow = /* @__PURE__ */withMods(DataTableHeaderRow$1, () => [css$u.root, 'uui-dt-vars'], (mods) => ({
+var css$t = {"root":"C98oWG"};
+
+const DataTableHeaderRow = /* @__PURE__ */withMods(DataTableHeaderRow$1, () => [css$t.root, 'uui-dt-vars'], (mods) => ({
     renderCell: (props) => (React.createElement(DataTableHeaderCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.column.key, columnsGap: mods.columnsGap })),
     renderGroupCell: (props) => (React.createElement(DataTableHeaderGroupCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.key, columnsGap: mods.columnsGap })),
-    renderConfigButton: () => (React.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: ['config-icon', `uui-size-${settings.sizes.dataTable.header.row.cell.iconSize[mods.size || settings.sizes.dataTable.header.row.default]}`], color: "neutral", icon: ForwardRef$j })),
+    renderConfigButton: () => (React.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: ['config-icon', `uui-size-${settings.dataTable.sizes.header.iconMap[mods.size || settings.dataTable.sizes.header.row]}`], color: "neutral", icon: settings.dataTable.icons.header.configIcon })),
 }));
 
 const UUI_FILTERS_PANEL_ADD_BUTTON = 'uui-filters-panel-add-button';
@@ -3601,15 +3971,14 @@ const UUI_FILTERS_PANEL_ADD_BUTTON_BODY = 'uui-filters-panel-add-button-body';
 const UUI_FILTERS_PANEL_ITEM_BODY = 'uui-filters-panel-item-body';
 const UUI_FILTERS_PANEL_ITEM_TOGGLER = 'uui-filters-panel-item-toggler';
 
-var css$s = {"root":"C64e-b","title-wrapper":"pEQgEO","titleWrapper":"pEQgEO","title":"-P0wVc","text-wrapper":"gUG2Hi","textWrapper":"gUG2Hi","selection":"Rp1B8x","postfix":"Ux1Zbe","selected":"ZcDAkC"};
+var css$s = {"root":"NYRimP","title-wrapper":"ySAYFb","titleWrapper":"ySAYFb","title":"cZP9sj","text-wrapper":"_5PBzw7","textWrapper":"_5PBzw7","selection":"_7LpIPy","postfix":"_9hXPWM","selected":"_-2c0e0"};
 
-const defaultSize = '36';
 const FilterPanelItemToggler = /* @__PURE__ */React.forwardRef((props, ref) => {
     const togglerPickerOpened = (e) => {
         if (props.isDisabled)
             return;
         e.preventDefault();
-        props.onClick?.();
+        !isEventTargetInsideClickable(e) && props.onClick?.();
     };
     const onKeyDownHandler = (e) => {
         if (props.isDisabled)
@@ -3627,18 +3996,13 @@ const FilterPanelItemToggler = /* @__PURE__ */React.forwardRef((props, ref) => {
     const getSelectionText = () => props.selection.map((i, index) => (React.createElement(React.Fragment, { key: `${i}${index}` },
         React.createElement(Text, { color: "primary", size: props.size, cx: css$s.selection }, i),
         (props.postfix || index !== props.selection.length - 1) && React.createElement("span", null, ",\u00A0"))));
-    return (React.createElement(FlexRow$1, { ...props, rawProps: {
-            style: { maxWidth: `${props.maxWidth ? props.maxWidth + 'px' : 'auto'}` },
-            role: 'button',
-            tabIndex: props.isDisabled ? -1 : 0,
-            onKeyDown: onKeyDownHandler,
-        }, cx: cx(UUI_FILTERS_PANEL_ITEM_TOGGLER, css$s.root, uuiElement.inputBox, uuiMarkers.clickable, props.isOpen && uuiMod.opened, `uui-size-${props.size || defaultSize}`, props.cx), onClick: togglerPickerOpened, ref: ref },
-        React.createElement(FlexRow$1, { cx: css$s.titleWrapper },
+    return (React.createElement("div", { style: { maxWidth: `${props.maxWidth ? props.maxWidth + 'px' : 'auto'}` }, role: "button", tabIndex: props.isDisabled ? -1 : 0, onKeyDown: onKeyDownHandler, className: cx(UUI_FILTERS_PANEL_ITEM_TOGGLER, css$s.root, uuiElement.inputBox, uuiMarkers.clickable, props.isOpen && uuiMod.opened, `uui-size-${props.size || settings.pickerInput.sizes.toggler.default}`, props.cx), onClick: togglerPickerOpened, ref: ref },
+        React.createElement("div", { className: css$s.titleWrapper },
             React.createElement(Text, { size: props.size, cx: css$s.title }, getTitle),
             props.selection && (React.createElement("div", { className: css$s.textWrapper },
                 getSelectionText(),
                 props.postfix && (React.createElement(Text, { color: "primary", size: props.size, cx: css$s.postfix }, props.postfix))))),
-        !props.isDisabled && React.createElement(IconContainer, { icon: systemIcons.foldingArrow, flipY: props.isOpen, cx: "uui-icon-dropdown" })));
+        !props.isDisabled && React.createElement(IconContainer, { icon: settings.filtersPanel.icons.itemDropdownIcon, flipY: props.isOpen, cx: "uui-icon-dropdown" })));
 });
 
 const pickerHeight = 300;
@@ -3665,7 +4029,7 @@ function FilterPickerBody({ highlightSearchMatches = true, ...restProps }) {
     };
     const renderItem = (item, rowProps, dsState) => {
         const { flattenSearchResults } = view.getConfig();
-        return (React.createElement(PickerItem, { title: getName(item), highlightSearchMatches: highlightSearchMatches, ...(flattenSearchResults ? { subtitle: getSubtitle(rowProps, dsState) } : {}), dataSourceState: dsState, size: settings.sizes.filtersPanel.pickerInput.body.default, ...rowProps }));
+        return (React.createElement(PickerItem, { title: getName(item), highlightSearchMatches: highlightSearchMatches, ...(flattenSearchResults ? { subtitle: getSubtitle(rowProps, dsState) } : {}), dataSourceState: dsState, size: settings.pickerInput.sizes.body.row, ...rowProps }));
     };
     const onSelect = (row) => {
         handleDataSourceValueChange((currentDataSourceState) => ({ ...currentDataSourceState, search: '', selectedId: row.id }));
@@ -3674,18 +4038,20 @@ function FilterPickerBody({ highlightSearchMatches = true, ...restProps }) {
         if (rowProps.isSelectable && isSingleSelect() && props.editMode !== 'modal') {
             rowProps.onSelect = onSelect;
         }
-        return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React.createElement(DataPickerRow, { ...rowProps, key: rowProps.rowKey, size: settings.sizes.filtersPanel.pickerInput.body.default, padding: "12", renderItem: (item, itemProps) => renderItem(item, itemProps, dsState) }));
+        return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React.createElement(DataPickerRow, { ...rowProps, key: rowProps.rowKey, size: settings.pickerInput.sizes.body.row, padding: "12", renderItem: (item, itemProps) => renderItem(item, itemProps, dsState) }));
     };
     const renderFooter = () => {
         const footerProps = getFooterProps();
-        return props.renderFooter ? props.renderFooter(footerProps) : React.createElement(DataPickerFooter, { ...footerProps, size: settings.sizes.filtersPanel.pickerInput.body.default });
+        return props.renderFooter
+            ? props.renderFooter(footerProps)
+            : React.createElement(DataPickerFooter, { ...footerProps, size: settings.pickerInput.sizes.body.row });
     };
     const renderBody = (bodyProps, rows) => {
         const renderedDataRows = rows.map((props) => renderRow(props, dataSourceState));
         const maxHeight = isMobile() ? document.documentElement.clientHeight : props.maxBodyHeight || pickerHeight;
         const maxWidth = isMobile() ? undefined : 360;
         return (React.createElement(React.Fragment, null,
-            React.createElement(DataPickerBody, { ...bodyProps, selectionMode: props.selectionMode, rows: renderedDataRows, maxHeight: maxHeight, maxWidth: maxWidth, searchSize: settings.sizes.filtersPanel.pickerInput.body.default, editMode: "dropdown" }),
+            React.createElement(DataPickerBody, { ...bodyProps, selectionMode: props.selectionMode, rows: renderedDataRows, maxHeight: maxHeight, maxWidth: maxWidth, searchSize: settings.pickerInput.sizes.body.row, editMode: "dropdown" }),
             renderFooter()));
     };
     const rows = getRows();
@@ -3773,7 +4139,7 @@ function FilterRangeDatePickerBody(props) {
                 React__default.createElement(LinkButton, { isDisabled: !value.from && !value.to, caption: i18n.pickerModal.clearAllButton, onClick: () => onValueChange(defaultRangeValue) })))));
 }
 
-var css$r = {"container":"_83NsYD"};
+var css$r = {"container":"LYED6-"};
 
 function FilterNumericBody(props) {
     const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
@@ -3854,22 +4220,22 @@ function FilterItemBody(props) {
     }
 }
 
-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 _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 SvgActionDeleteOutline = function SvgActionDeleteOutline(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$i({
+  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$i || (_path$i = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__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$i = /*#__PURE__*/forwardRef(SvgActionDeleteOutline);
+var ForwardRef$a = /*#__PURE__*/forwardRef(SvgActionDeleteOutline);
 
-var css$q = {"header":"_2zDeM3","removeButton":"U-4ZU3","with-search":"YNVaVJ","withSearch":"YNVaVJ"};
+var css$q = {"header":"_8mXhHb","removeButton":"fZWPWN","with-search":"lNmlG0","withSearch":"lNmlG0"};
 
 function useView(props, value) {
     const forceUpdate = useForceUpdate();
@@ -3958,7 +4324,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$i }))));
+        !props?.isAlwaysVisible && (React__default.createElement(LinkButton, { cx: css$q.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: "24", icon: ForwardRef$a }))));
     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) },
@@ -4047,21 +4413,6 @@ 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 {};
@@ -4101,7 +4452,7 @@ const normalizeFilterWithPredicates = (filter) => {
     return result;
 };
 function FiltersToolbarImpl(props) {
-    const { filters, tableState, setTableState, size = settings.sizes.defaults.filtersPanel } = props;
+    const { filters, tableState, setTableState, size = (settings.filtersPanel.sizes.default) } = props;
     const [newFilterId, setNewFilterId] = useState(null);
     const pickerInputRef = useRef(null);
     const dataSource = useArrayDataSource({
@@ -4161,7 +4512,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: ForwardRef$h, 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: settings.filtersPanel.icons.addFilterIcon, iconPosition: "left", fill: "ghost", color: "primary", cx: UUI_FILTERS_PANEL_ADD_BUTTON }));
     }, []);
     const getRowOptions = useCallback((item) => ({
         isDisabled: item.isAlwaysVisible,
@@ -4186,124 +4537,92 @@ function FiltersToolbarImpl(props) {
         !isAllFiltersAlwaysVisible && (React__default.createElement(PickerInput, { dataSource: dataSource, value: selectedFilters, onValueChange: onFiltersChange, selectionMode: "multi", valueType: "entity", renderRow: (props) => (React__default.createElement(DataPickerRow, { ...props, padding: "12", key: props.key, onCheck: (row) => {
                     props.onCheck && props.onCheck(row);
                     setNewFilterId(row.value.field);
-                }, renderItem: (item, rowProps) => React__default.createElement(PickerItem, { ...rowProps, title: item.title }) })), getName: (i) => i.title, renderToggler: renderAddFilterToggler, emptyValue: [], getRowOptions: getRowOptions, fixedBodyPosition: true, size: size, bodyCx: UUI_FILTERS_PANEL_ADD_BUTTON_BODY, ref: pickerInputRef }))));
-}
-const FiltersPanel = /* @__PURE__ */React__default.memo(FiltersToolbarImpl);
-
-var css$p = {"divider":"Yk71gJ","dropdownDeleteIcon":"YOVnyc","presetsWrapper":"vP8Ge5","addPresetContainer":"ssnA78","dropContainer":"aiUq04"};
-
-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);
+                }, renderItem: (item, rowProps) => React__default.createElement(PickerItem, { ...rowProps, title: item.title }) })), getName: (i) => i.title, renderToggler: renderAddFilterToggler, emptyValue: [], getRowOptions: getRowOptions, fixedBodyPosition: true, size: size, bodyCx: UUI_FILTERS_PANEL_ADD_BUTTON_BODY, ref: pickerInputRef }))));
+}
+const FiltersPanel = /* @__PURE__ */React__default.memo(FiltersToolbarImpl);
 
-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 css$p = {"divider":"lBbzQ8","dropdownDeleteIcon":"E5oIkk","presetsWrapper":"V6NsQW","addPresetContainer":"_503g45","dropContainer":"BV2WsR"};
 
-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 _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 SvgActionSaveOutline = function SvgActionSaveOutline(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$e({
+  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$e || (_path$e = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$9 || (_path$9 = /*#__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$e = /*#__PURE__*/forwardRef(SvgActionSaveOutline);
+var ForwardRef$9 = /*#__PURE__*/forwardRef(SvgActionSaveOutline);
 
-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$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 SvgContentEditUndoOutline = function SvgContentEditUndoOutline(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$d({
+  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$d || (_path$d = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__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$d = /*#__PURE__*/forwardRef(SvgContentEditUndoOutline);
+var ForwardRef$8 = /*#__PURE__*/forwardRef(SvgContentEditUndoOutline);
 
-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 _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 SvgActionCopyContentOutline = function SvgActionCopyContentOutline(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$c({
+  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$c || (_path$c = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__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$c = /*#__PURE__*/forwardRef(SvgActionCopyContentOutline);
+var ForwardRef$7 = /*#__PURE__*/forwardRef(SvgActionCopyContentOutline);
 
-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 _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 SvgContentEditFill = function SvgContentEditFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
+  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$b || (_path$b = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$6 || (_path$6 = /*#__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$b = /*#__PURE__*/forwardRef(SvgContentEditFill);
+var ForwardRef$6 = /*#__PURE__*/forwardRef(SvgContentEditFill);
 
-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 _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 SvgContentLinkOutline = function SvgContentLinkOutline(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$a({
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
     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$5 || (_path$5 = /*#__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$3 || (_path2$3 = /*#__PURE__*/React.createElement("path", {
+  })), _path2 || (_path2 = /*#__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$a = /*#__PURE__*/forwardRef(SvgContentLinkOutline);
+var ForwardRef$5 = /*#__PURE__*/forwardRef(SvgContentLinkOutline);
 
-var css$o = {"delete-button":"bSgP-j","deleteButton":"bSgP-j","tab-button":"aRGW-T","tabButton":"aRGW-T","targetOpen":"FCtTUh"};
+var css$o = {"delete-button":"xZYW9E","deleteButton":"xZYW9E","tab-button":"hVsgXZ","tabButton":"hVsgXZ","targetOpen":"q1eNVX"};
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = useUuiContext();
@@ -4351,26 +4670,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$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", 
+                !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", 
                     // 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$d, caption: "Discard all changes", onClick: () => { dropdownProps.onClose(); discardAllChangesHandler(); } }),
+                React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-discard`, icon: ForwardRef$8, 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$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 }),
+            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 }),
             !isReadonlyPreset && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(DropdownMenuSplitter, { key: "delete-splitter" }),
-                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$i, caption: "Delete", cx: css$o.deleteButton, onClick: deleteHandler })))));
+                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$a, 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$g, 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$F, 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":"aRpkq5","presetInputCell":"aRpkq5","preset-input":"W1Pjj5","presetInput":"W1Pjj5"};
+var css$n = {"preset-input-cell":"w-ePv9","presetInputCell":"w-ePv9","preset-input":"AeWdDT","presetInput":"AeWdDT"};
 
 const UUI_PRESETS_PANEL_ADD_BUTTON = 'uui-presets-panel-add-button';
 const UUI_PRESETS_PANEL_MORE_BUTTON = 'uui-presets-panel-more-button';
@@ -4402,7 +4721,7 @@ function PresetInput(props) {
         React__default.createElement(TextInput, { cx: css$n.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50, isReadonly: readonly })));
 }
 
-var css$m = {"preset":"pqIPK6","activePreset":"EqjkKT"};
+var css$m = {"preset":"G6Iay0","activePreset":"gJKgZt"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = useState(false);
@@ -4427,22 +4746,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$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$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 SvgActionDeleteForeverFill = function SvgActionDeleteForeverFill(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$9({
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
     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$4 || (_path$4 = /*#__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$9 = /*#__PURE__*/forwardRef(SvgActionDeleteForeverFill);
+var ForwardRef$4 = /*#__PURE__*/forwardRef(SvgActionDeleteForeverFill);
 
 function PresetsPanel(props) {
     const [isAddingPreset, setIsAddingPreset] = useState(false);
@@ -4457,7 +4776,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$h, 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$s, iconPosition: "left", fill: "ghost", color: "primary" })) : (React__default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
     }, [isAddingPreset]);
     const onPresetDropdownSelect = (preset) => {
         props.choosePreset(preset.preset);
@@ -4466,7 +4785,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$9, 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$4, 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;
@@ -4528,62 +4847,7 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-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":"_85FnOD","unpinIcon":"_85FnOD","pin-toggler-icon":"_96FQli","pinTogglerIcon":"_96FQli"};
+var css$l = {"unpin-icon":"IrmUQG","unpinIcon":"IrmUQG","pin-toggler-icon":"nmshk7","pinTogglerIcon":"nmshk7"};
 
 function PinIconButton(props) {
     const i18nLocal = i18n.tables.columnsConfigurationModal;
@@ -4601,23 +4865,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: ForwardRef$7, onClick: () => onTogglePin('left'), isDisabled: isPinnedAlways })),
+                React.createElement(IconButton, { cx: css$l.pinTogglerIcon, icon: settings.dataTable.icons.columnsConfigurationModal.pinLeftIcon, onClick: () => onTogglePin('left'), isDisabled: isPinnedAlways })),
             React.createElement(Tooltip, { content: i18nLocal.pinColumnToTheRightButton, placement: "bottom", color: "inverted" },
-                React.createElement(IconButton, { cx: css$l.pinTogglerIcon, icon: ForwardRef$6, onClick: () => onTogglePin('right'), isDisabled: isPinnedAlways }))));
+                React.createElement(IconButton, { cx: css$l.pinTogglerIcon, icon: settings.dataTable.icons.columnsConfigurationModal.pinRightIcon, onClick: () => onTogglePin('right'), isDisabled: isPinnedAlways }))));
     }
     return pinUnpinNode;
 }
 function getUnpinIcon(params) {
     const { isPinnedAlways, pinPosition } = params;
     if (isPinnedAlways) {
-        return ForwardRef$8;
+        return settings.dataTable.icons.columnsConfigurationModal.lockIcon;
     }
     switch (pinPosition) {
         case 'left': {
-            return ForwardRef$7;
+            return settings.dataTable.icons.columnsConfigurationModal.pinLeftIcon;
         }
         case 'right': {
-            return ForwardRef$6;
+            return settings.dataTable.icons.columnsConfigurationModal.pinRightIcon;
         }
         default: {
             return;
@@ -4625,24 +4889,7 @@ function getUnpinIcon(params) {
     }
 }
 
-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":"qnxzLP","rowWrapper":"qnxzLP","pin-icon-button":"SC8GS4","pinIconButton":"SC8GS4","not-pinned":"g46j1h","notPinned":"g46j1h","checkbox":"ugUK-4","drag-handle":"HXYO-8","dragHandle":"HXYO-8","dnd-disabled":"_5CvVv0","dndDisabled":"_5CvVv0"};
+var css$k = {"row-wrapper":"_1rj5tZ","rowWrapper":"_1rj5tZ","pin-icon-button":"YodOs9","pinIconButton":"YodOs9","not-pinned":"RqM0Rf","notPinned":"RqM0Rf","checkbox":"z6YCxf","drag-handle":"W8UDFx","dragHandle":"W8UDFx","dnd-disabled":"ikrVB6","dndDisabled":"ikrVB6"};
 
 const ColumnRow = /* @__PURE__ */React.memo(function ColumnRow(props) {
     const { column } = props;
@@ -4655,8 +4902,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.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) }),
+        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) }),
             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 })),
@@ -4665,11 +4912,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":"gCav-U","main-panel":"_0fXcOs","mainPanel":"_0fXcOs","group":"_43jszA","group-title":"_1eHeYN","groupTitle":"_1eHeYN","group-items":"qrrLNn","groupItems":"qrrLNn","no-data":"ZJZyaF","noData":"ZJZyaF","no-data-title":"KzZir7","noDataTitle":"KzZir7","no-data-sub-title":"_6r36vR","noDataSubTitle":"_6r36vR","h-divider":"_490NyC","hDivider":"_490NyC","search-area":"XG-TEp","searchArea":"XG-TEp","subgroup-accordion":"kxwucb","subgroupAccordion":"kxwucb","subgroup":"O7kjf2","subgroup-title":"ioJahS","subgroupTitle":"ioJahS"};
+var css$j = {"root":"kVvcH5","main-panel":"qLv3jz","mainPanel":"qLv3jz","group":"yErj-z","group-title":"bW8MDX","groupTitle":"bW8MDX","group-items":"IS-Re2","groupItems":"IS-Re2","no-data":"_2-IT-t","noData":"_2-IT-t","no-data-title":"vjzuPi","noDataTitle":"vjzuPi","no-data-sub-title":"sRjdAU","noDataSubTitle":"sRjdAU","h-divider":"_3INRzj","hDivider":"_3INRzj","search-area":"vDbecE","searchArea":"vDbecE","subgroup-accordion":"l38dBE","subgroupAccordion":"l38dBE","subgroup":"cA6uH-","subgroup-title":"wksQ0I","subgroupTitle":"wksQ0I"};
 
 const renderGroupTitle = (title, amount) => (React.createElement(FlexRow, { cx: css$j.group },
     React.createElement(Text, { size: "none", cx: css$j.groupTitle }, title),
-    React.createElement(CountIndicator, { caption: amount, color: "neutral", size: settings.sizes.dataTable.columnsConfigurationModal.countIndicator }),
+    React.createElement(CountIndicator, { caption: amount, color: "neutral", size: settings.dataTable.sizes.columnsConfigurationModal.countIndicator }),
     React.createElement(FlexSpacer, null)));
 function ColumnsConfigurationModal(props) {
     const i18n$1 = i18n.tables.columnsConfigurationModal;
@@ -4714,13 +4961,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, height: "95dvh", maxHeight: "95dvh", width: settings.sizes.dataTable.columnsConfigurationModal.width },
+        React.createElement(ModalWindow, { cx: [css$j.root, 'uui-columns-config-modal'], height: "95dvh", maxHeight: "95dvh" },
             React.createElement(ModalHeader, { title: i18n$1.configureColumnsTitle, onClose: close }),
             React.createElement(FlexRow, { borderBottom: true, cx: css$j.searchArea },
-                React.createElement(SearchInput, { size: settings.sizes.dataTable.columnsConfigurationModal.search, value: searchValue, onValueChange: setSearchValue, placeholder: i18n$1.searchPlaceholder }),
+                React.createElement(SearchInput, { size: settings.dataTable.sizes.columnsConfigurationModal.searchInput, 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: ForwardRef$g, size: settings.sizes.dataTable.columnsConfigurationModal.search, color: "secondary", isDropdown: false })) })),
+                        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(Panel, { background: "surface-main", cx: css$j.mainPanel },
                 React.createElement(ScrollBars, null,
                     renderVisible(),
@@ -4729,7 +4976,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: ForwardRef$f, caption: i18n$1.resetToDefaultButton, onClick: reset }),
+                React.createElement(LinkButton, { icon: settings.dataTable.icons.columnsConfigurationModal.resetIcon, 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)))));
@@ -4739,12 +4986,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.sizes.dataTable.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.dataTable.sizes.columnsConfigurationModal.columnRow }, items.map((c) => (React.createElement(ColumnRow, { column: c, key: c.key, renderItem: renderItem })))));
         if (isCollapsible) {
             const renderTitle = (isOpened) => {
-                const toggleIcon = isOpened ? ForwardRef$Q : ForwardRef$v;
+                const toggleIcon = settings.dataTable.icons.columnsConfigurationModal[isOpened ? 'expandedIcon' : 'collapsedIcon'];
                 return (React.createElement(FlexRow, { cx: cx$1(css$j.subgroup) },
-                    React.createElement(IconContainer, { size: settings.sizes.dataTable.columnsConfigurationModal.subgroupIcon, icon: toggleIcon }),
+                    React.createElement(IconContainer, { icon: toggleIcon }),
                     React.createElement(Text, { size: "none", color: "tertiary", cx: css$j.subgroupTitle }, title)));
             };
             return (React.createElement(Accordion$1, { value: isExpanded, onValueChange: setIsExpanded, renderTitle: renderTitle, cx: css$j.subgroupAccordion }, content));
@@ -4754,8 +5001,6 @@ function SubGroup(props) {
     return null;
 }
 
-var css$i = {"listContainer":"TAGA8J","header":"ZRooRZ","group":"zlLPEf","stickyHeader":"Ip-fvE"};
-
 const getChildrenAndRest = (row, rows) => {
     const firstNotChildIndex = rows.findIndex((other) => other.depth < row.depth || (row.depth === other.depth && other.isPinned));
     if (firstNotChildIndex === -1) {
@@ -4769,6 +5014,8 @@ const getChildrenAndRest = (row, rows) => {
     return [children, rest];
 };
 
+var css$i = {"listContainer":"KJP3gv","header":"VfM8gG","group":"zTB6i5","stickyHeader":"a61iPD"};
+
 function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
     const rowRef = useRef();
     const childrenPinnedTop = row.isPinned ? (top + (rowRef.current?.clientHeight ?? 0)) : top;
@@ -4807,147 +5054,7 @@ function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, r
             React__default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
 }
 
-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(#upoqav6dlx0k3kfhr_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: "upoqavaqvlvzl1j0o_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(#upoqavaqvlvzl1j0o_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: "upoqav6dlx0k3kfhr_a"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "#fff",
-    transform: "translate(.552)",
-    d: "M0 0h230.897v180H0z"
-  })))));
-};
-var ForwardRef$4 = /*#__PURE__*/forwardRef(SvgEmptyTable);
-
-var css$h = {"root":"-Wsx-o","sticky-header":"VVVx-t","stickyHeader":"VVVx-t","no-results":"q05n7h","noResults":"q05n7h","icon":"th6CT5","title":"InW1ks"};
+var css$h = {"root":"_6E9HFf","sticky-header":"_9ubGQc","stickyHeader":"_9ubGQc","no-results":"grgolE","noResults":"grgolE","icon":"_2uZhhK","title":"NV1qei"};
 
 function DataTable(props) {
     const { uuiModals } = useUuiContext();
@@ -4955,13 +5062,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.sizes.dataTable.body.row.default, columnsGap: props.columnsGap, borderBottom: props.border, ...rowProps, key: rowProps.rowKey, cx: css$h.cell }));
+        return (React.createElement(DataTableRow, { size: props.size || settings.dataTable.sizes.body.row, columnsGap: props.columnsGap, borderBottom: props.border, ...rowProps, key: rowProps.rowKey, cx: css$h.cell }));
     }, []);
     const renderRow = (row) => (props.renderRow ?? defaultRenderRow)({ ...row, columns });
     const rows = props.getRows?.() ?? props.rows ?? [];
     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: ForwardRef$4 }),
+            React.createElement(IconContainer, { cx: css$h.icon, icon: settings.dataTable.icons.emptyTable }),
             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]);
@@ -4980,7 +5087,7 @@ function DataTable(props) {
     ]);
     const renderRowsContainer = React.useCallback(({ listContainerRef, estimatedHeight, offsetY, scrollShadows }) => (React.createElement(React.Fragment, null,
         React.createElement("div", { className: css$h.stickyHeader, ref: headerRef },
-            React.createElement(DataTableHeaderRow, { columns: columns, columnGroups: props.columnGroups, onConfigButtonClick: props.showColumnsConfig && onConfigurationButtonClick, selectAll: props.selectAll, size: props.headerSize || settings.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(DataTableHeaderRow, { columns: columns, columnGroups: props.columnGroups, onConfigButtonClick: props.showColumnsConfig && onConfigurationButtonClick, selectAll: props.selectAll, size: props.headerSize || settings.dataTable.sizes.header.row, textCase: props.headerTextCase, allowColumnsReordering: props.allowColumnsReordering, allowColumnsResizing: props.allowColumnsResizing, showFoldAll: props.showFoldAll, value: { ...props.value, columnsConfig: config }, onValueChange: props.onValueChange, columnsGap: props.columnsGap }),
             React.createElement("div", { className: cx$1(uuiScrollShadows.top, {
                     [uuiScrollShadows.topVisible]: scrollShadows.verticalTop,
                 }) })),
@@ -4996,9 +5103,9 @@ function DataTable(props) {
                 } }))));
 }
 
-var css$g = {"root":"Fv8a0i"};
+var css$g = {"root":"eyuIWs"};
 
-var css$f = {"root":"_3M1cyW","burger-content":"JhJ70o","burgerContent":"JhJ70o"};
+var css$f = {"root":"_5s9s3y","burger-content":"rhUFAS","burgerContent":"rhUFAS"};
 
 var _path$3;
 function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
@@ -5041,7 +5148,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
 };
 var ForwardRef$2 = /*#__PURE__*/forwardRef(SvgNavigationArrowDownOutline);
 
-var css$e = {"root":"V-PEkP","button-primary":"R-ZpjN","buttonPrimary":"R-ZpjN","button-secondary":"S5F1bc","buttonSecondary":"S5F1bc","hasIcon":"pMNLn9","dropdown":"M-r24o"};
+var css$e = {"root":"X58g1v","button-primary":"d-6JeT","buttonPrimary":"d-6JeT","button-secondary":"-oJcZ6","buttonSecondary":"-oJcZ6","hasIcon":"i66-xf","dropdown":"tjmIEw"};
 
 const BurgerButton = /* @__PURE__ */withMods(Button$1, (props) => [
     css$e.root,
@@ -5052,13 +5159,13 @@ const BurgerButton = /* @__PURE__ */withMods(Button$1, (props) => [
     props.icon && css$e.hasIcon,
 ], () => ({ dropdownIcon: ForwardRef$2, dropdownIconPosition: 'left', role: 'menuitem' }));
 
-var css$d = {"search-input":"dSu2-S","searchInput":"dSu2-S"};
+var css$d = {"search-input":"GOtX43","searchInput":"GOtX43"};
 
 function BurgerSearch(props) {
-    return (React.createElement(TextInput$1, { cx: cx(css$d.searchInput, 'uui-main_menu-burger-search'), iconPosition: "left", icon: ForwardRef$O, 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$N, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$R }));
 }
 
-var css$c = {"root":"aouls7","group-header":"_5oJ6QY","groupHeader":"_5oJ6QY","group-name":"uxEDJz","groupName":"uxEDJz","line":"D2M3zb"};
+var css$c = {"root":"_04H4yf","group-header":"UVFmhV","groupHeader":"UVFmhV","group-name":"Y--4xz","groupName":"Y--4xz","line":"Q89LRX"};
 
 function BurgerGroupHeader(props) {
     return (React.createElement("div", { className: cx(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
@@ -5066,7 +5173,7 @@ function BurgerGroupHeader(props) {
         React.createElement("span", { className: css$c.groupName }, props.caption)));
 }
 
-var css$b = {"root":"rNt2eI","type-primary":"HxHWoa","typePrimary":"HxHWoa","type-secondary":"SRXvwy","typeSecondary":"SRXvwy"};
+var css$b = {"root":"_3Pd-XE","type-primary":"_6tR5d9","typePrimary":"_6tR5d9","type-secondary":"LG9fZp","typeSecondary":"LG9fZp"};
 
 const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { type, ...clickableProps } = props;
@@ -5088,7 +5195,7 @@ const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
         props.isDropdown && (React.createElement(IconContainer, { icon: ForwardRef$Q, flipY: props.isOpen }))));
 });
 
-var css$a = {"dropdown-body":"OlG0t6","dropdownBody":"OlG0t6"};
+var css$a = {"dropdown-body":"WcWjiR","dropdownBody":"WcWjiR"};
 
 class MainMenuDropdown extends React.Component {
     render() {
@@ -5146,12 +5253,12 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
 };
 var ForwardRef$1 = /*#__PURE__*/forwardRef(SvgNavigationGlobalMenuOutlineOutline);
 
-var css$9 = {"global-menu-btn":"TcKBbH","globalMenuBtn":"TcKBbH","global-menu-icon":"k2dxyB","globalMenuIcon":"k2dxyB"};
+var css$9 = {"global-menu-btn":"lLYBJD","globalMenuBtn":"lLYBJD","global-menu-icon":"Ldpuo0","globalMenuIcon":"Ldpuo0"};
 
 const GlobalMenu = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("button", { ref: ref, id: "global_menu_toggle", className: cx(css$9.globalMenuBtn, props.cx), ...props.rawProps },
     React.createElement(IconContainer, { size: 36, icon: ForwardRef$1, cx: css$9.globalMenuIcon }))));
 
-var css$8 = {"container":"krCV6I","open":"SOaoRN","folding-arrow":"bFHzHw","foldingArrow":"bFHzHw"};
+var css$8 = {"container":"zabDar","open":"Wz1fKA","folding-arrow":"qsOfLC","foldingArrow":"qsOfLC"};
 
 const MainMenuAvatar = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("button", { ref: ref, className: cx(css$8.container, props.isDropdown && css$8.dropdown, props.isOpen && css$8.open, props.onClick && uuiMarkers.clickable, props.cx), onClick: props.onClick, ...props.rawProps },
     React.createElement(Avatar, { size: "36", img: props.avatarUrl }),
@@ -5159,15 +5266,15 @@ const MainMenuAvatar = /* @__PURE__ */React.forwardRef((props, ref) => (React.cr
     props.isDropdown && (React.createElement("div", null,
         React.createElement(IconContainer, { size: 18, icon: ForwardRef$Q, flipY: props.isOpen, cx: css$8.foldingArrow }))))));
 
-var css$7 = {"search-input":"f-2w7y","searchInput":"f-2w7y"};
+var css$7 = {"search-input":"JoH-wf","searchInput":"JoH-wf"};
 
-const MainMenuSearch = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement(IEditableDebouncer, { ...props, render: (iEditable) => (React.createElement(TextInput$1, { iconPosition: "left", icon: ForwardRef$O, 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$N, cancelIcon: props.value?.length > 0 && ForwardRef$R, ...props, ...iEditable, ref: ref, cx: cx$1(css$7.searchInput, props.cx), ...props.rawProps })) })));
 
-var css$6 = {"container":"FS1ziC"};
+var css$6 = {"container":"_6zb1UE"};
 
 const MainMenuIcon = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement(IconButton, { ref: ref, icon: props.icon, cx: cx$1(props.cx, css$6.container), ...props })));
 
-var css$5 = {"root":"Y9V9YU"};
+var css$5 = {"root":"BW6Dfu"};
 
 const Anchor = /* @__PURE__ */withMods(Anchor$1, () => [css$5.root]);
 
@@ -5225,7 +5332,7 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgFileCloudUploadFill);
 
-var css$4 = {"root":"NH-gIi","drop-start":"Uu6HFG","dropStart":"Uu6HFG","drop-over":"KuV25T","dropOver":"KuV25T","link":"Lcy7g5","drop-area":"ZJU9Pi","dropArea":"ZJU9Pi","drop-caption":"kcZjcC","dropCaption":"kcZjcC","icon-blue":"JiJAim","iconBlue":"JiJAim"};
+var css$4 = {"root":"rceAX-","drop-start":"LUqc6A","dropStart":"LUqc6A","drop-over":"OQGg54","dropOver":"OQGg54","link":"_5IhcO0","drop-area":"GqhtNH","dropArea":"GqhtNH","drop-caption":"NWLsrW","dropCaption":"NWLsrW","icon-blue":"kZsHiK","iconBlue":"kZsHiK"};
 
 function DropSpot(props) {
     const getInfoText = typeof props.infoText === 'string'
@@ -5243,19 +5350,19 @@ function DropSpot(props) {
     return React.createElement(DropSpot$1, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
 }
 
-var css$3 = {"root":"_4GU78u","file-name":"fdnQFO","fileName":"fdnQFO","default-color":"BQRZDm","defaultColor":"BQRZDm","doc-color":"yZFCfs","docColor":"yZFCfs","xls-color":"EYCqa-","xlsColor":"EYCqa-","pdf-color":"_5KxLS5","pdfColor":"_5KxLS5","movie-color":"eK5RDd","movieColor":"eK5RDd","img-color":"bZAjoj","imgColor":"bZAjoj","mov-color":"hA3Fz7","movColor":"hA3Fz7","error-block":"g7Vrkd","errorBlock":"g7Vrkd","icons-block":"h0sflS","iconsBlock":"h0sflS"};
-
-var css$2 = {"root":"_6Q0-FW"};
+var css$3 = {"root":"FsGteO"};
 
 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$2.root, width: props.size, height: props.size, ref: ref, ...props.rawProps },
+    return (React.createElement("svg", { className: css$3.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":"e9aoDJ","file-name":"wwWw79","fileName":"wwWw79","default-color":"pqs8p3","defaultColor":"pqs8p3","doc-color":"zULxOB","docColor":"zULxOB","xls-color":"fCe9BZ","xlsColor":"fCe9BZ","pdf-color":"HU72eK","pdfColor":"HU72eK","movie-color":"vjy2z5","movieColor":"vjy2z5","img-color":"va3grO","imgColor":"va3grO","mov-color":"_1XyXJY","movColor":"_1XyXJY","error-block":"lFDyRF","errorBlock":"lFDyRF","icons-block":"DG9-Pt","iconsBlock":"DG9-Pt"};
+
 const FileCard = /* @__PURE__ */React.forwardRef((props, ref) => {
     const [isLoadingShow, setIsLoadingShow] = React.useState(true);
     const { file } = props;
@@ -5263,36 +5370,36 @@ const FileCard = /* @__PURE__ */React.forwardRef((props, ref) => {
         switch (extension) {
             case 'doc':
             case 'docx':
-                return React.createElement(IconContainer, { size: 24, icon: fileIcons.docIcon, cx: css$3.docColor });
+                return React.createElement(IconContainer, { size: 24, icon: settings.fileCard.icons.docIcon, cx: css$2.docColor });
             case 'xls':
             case 'xlsx':
-                return React.createElement(IconContainer, { size: 24, icon: fileIcons.exelIcon, cx: css$3.xlsColor });
+                return React.createElement(IconContainer, { size: 24, icon: settings.fileCard.icons.exelIcon, cx: css$2.xlsColor });
             case 'pdf':
-                return React.createElement(IconContainer, { size: 24, icon: fileIcons.pdfIcon, cx: css$3.pdfColor });
+                return React.createElement(IconContainer, { size: 24, icon: settings.fileCard.icons.pdfIcon, cx: css$2.pdfColor });
             case 'gif':
             case 'jpg':
             case 'jpeg':
             case 'svg':
             case 'png':
             case 'webp':
-                return React.createElement(IconContainer, { size: 24, icon: fileIcons.imgIcon, cx: css$3.imgColor });
+                return React.createElement(IconContainer, { size: 24, icon: settings.fileCard.icons.imgIcon, cx: css$2.imgColor });
             case 'avi':
             case 'mov':
             case 'mp4':
             case 'wmw':
             case 'mkv':
-                return React.createElement(IconContainer, { size: 24, icon: fileIcons.videoIcon, cx: css$3.movColor });
+                return React.createElement(IconContainer, { size: 24, icon: settings.fileCard.icons.videoIcon, cx: css$2.movColor });
             case 'csv':
             case 'xml':
-                return React.createElement(IconContainer, { size: 24, icon: fileIcons.tableIcon, cx: css$3.defaultColor });
+                return React.createElement(IconContainer, { size: 24, icon: settings.fileCard.icons.tableIcon, cx: css$2.defaultColor });
             case 'rtf':
             case 'txt':
-                return React.createElement(IconContainer, { size: 24, icon: fileIcons.textIcon, cx: css$3.defaultColor });
+                return React.createElement(IconContainer, { size: 24, icon: settings.fileCard.icons.textIcon, cx: css$2.defaultColor });
             case 'eml':
             case 'emlx':
-                return React.createElement(IconContainer, { size: 24, icon: fileIcons.mailIcon, cx: css$3.defaultColor });
+                return React.createElement(IconContainer, { size: 24, icon: settings.fileCard.icons.mailIcon, cx: css$2.defaultColor });
             default:
-                return React.createElement(IconContainer, { size: 24, icon: fileIcons.fileIcon, cx: css$3.defaultColor });
+                return React.createElement(IconContainer, { size: 24, icon: settings.fileCard.icons.fileIcon, cx: css$2.defaultColor });
         }
     };
     const { cx: componentCx, width, file: { progress, size, name, extension, error, abortXHR, }, onClick, } = props;
@@ -5309,10 +5416,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$3.errorBlock },
-            React.createElement(IconContainer, { icon: ForwardRef$y, size: 12 }),
+        React.createElement("div", { className: css$2.errorBlock },
+            React.createElement(IconContainer, { icon: settings.fileCard.icons.errorIcon, size: 12 }),
             i18n.fileCard.failedUploadErrorMessage)));
-    const renderSuccessfulContent = () => (React.createElement(Text, { size: "18", fontSize: "14", lineHeight: "18", color: "tertiary" },
+    const renderSuccessfulContent = () => (React.createElement(Text, { size: "none", fontSize: "14", lineHeight: "18", color: "tertiary" },
         fileExtension && `${fileExtension.toUpperCase()}, `,
         isLoading && formatBytes((size / 100) * progress, 2, false) + i18n.fileCard.fileSizeProgress,
         formatBytes(size)));
@@ -5320,15 +5427,15 @@ const FileCard = /* @__PURE__ */React.forwardRef((props, ref) => {
         progress && progress < 100 && abortXHR();
         onClick();
     };
-    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 },
+    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 },
         React.createElement(FlexRow, { alignItems: "top", columnGap: "6" },
             fileExtension && getIcon(fileExtension),
             React.createElement(FlexCell, { width: "100%" },
-                React.createElement(Text, { size: "18", fontSize: "14", lineHeight: "18", color: (progress < 100 || error?.isError) ? 'tertiary' : 'primary', cx: css$3.fileName }, fileName),
+                React.createElement(Text, { size: "none", fontSize: "14", lineHeight: "18", color: (progress < 100 || error?.isError) ? 'tertiary' : 'primary', cx: css$2.fileName }, fileName),
                 error?.isError ? renderErrorContent() : renderSuccessfulContent()),
-            React.createElement("div", { className: cx$1(css$3.iconsBlock), onMouseEnter: mouseEnterHandler, onMouseLeave: mouseLeaveHandler },
+            React.createElement("div", { className: cx$1(css$2.iconsBlock), onMouseEnter: mouseEnterHandler, onMouseLeave: mouseLeaveHandler },
                 isLoadingShow && isLoading && React.createElement(SvgCircleProgress, { progress: progress, size: 18 }),
-                isCrossShow && React.createElement(IconButton, { icon: ForwardRef$R, onClick: removeHandler })))));
+                isCrossShow && React.createElement(IconButton, { icon: settings.fileCard.icons.closeIcon, onClick: removeHandler })))));
 });
 
 const getRecoveryMessageConfig = () => ({
@@ -5373,7 +5480,7 @@ const getErrorPageConfig = () => ({
     },
 });
 
-var css$1 = {"container":"kzzEgD"};
+var css$1 = {"container":"xLxjz3"};
 
 const ErrorPage = (props) => {
     const isMobileScreen = isMobile();
@@ -5385,7 +5492,7 @@ const ErrorPage = (props) => {
             props?.supportLink && React__default.createElement("div", { className: "uui-error-support-link" }, props?.supportLink))));
 };
 
-var css = {"recovery-spinner":"BAsWwf","recoverySpinner":"BAsWwf","recovery-message":"k-WYea","recoveryMessage":"k-WYea","modal-blocker":"U4zMV9","modalBlocker":"U4zMV9","modalFadeIn":"x2hKDO"};
+var css = {"recovery-spinner":"Bw4cMJ","recoverySpinner":"Bw4cMJ","recovery-message":"YL7Wdk","recoveryMessage":"YL7Wdk","modal-blocker":"_4F3Xr-","modalBlocker":"_4F3Xr-","modalFadeIn":"rbUe28"};
 
 function ErrorHandler(props) {
     const { uuiNotifications, uuiModals, uuiApi } = useUuiContext();
@@ -5436,5 +5543,5 @@ function ErrorHandler(props) {
         errorType === 'recovery' && renderRecoveryBlocker(errorInfo)));
 }
 
-export { Accordion, Alert, Anchor, AvatarStack, Badge, Blocker, Burger, BurgerButton, BurgerGroupHeader, BurgerSearch, Button, Calendar, Checkbox, CheckboxGroup, ClearNotification, ColumnHeaderDropdown, ColumnsConfigurationModal, ConfirmationModal, ControlGroup, CountIndicator, DataPickerBody, 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, DataPickerCell, DataPickerFooter, DataPickerHeader, DataPickerRow, DataRowAddons, DataRowsContainer, DataTable, DataTableCell, DataTableHeaderCell, DataTableHeaderRow, DataTableRow, DatePicker, DatePickerBody, DatePickerComponent, DropMarker, DropSpot, Dropdown, DropdownContainer, DropdownMenuBody, DropdownMenuButton, DropdownMenuHeader, DropdownMenuSplitter, DropdownMenuSwitchButton, DropdownSubMenu, ErrorAlert, ErrorHandler, ErrorNotification, ErrorPage, FileCard, FilterItemBody, FilterPickerBody, FiltersPanel, FlexCell, FlexRow, Form, GlobalMenu, HintAlert, HintNotification, IDropdownControlKeys, IconButton, IndeterminateBar, IndicatorBar, InputAddon, LabeledInput, LinkButton, MainMenu, MainMenuAvatar, MainMenuButton, MainMenuDropdown, MainMenuIcon, MainMenuSearch, ModalBlocker, ModalFooter, ModalHeader, ModalWindow, MultiSwitch, NotificationCard, NumericInput, Paginator, Panel, PickerBodyMobileView, PickerInput, PickerItem, PickerList, PickerListItem, PickerModal, PickerToggler, PickerTogglerTag, PresetsPanel, ProgressBar, RadioGroup, RadioInput, RangeDatePicker, RangeDatePickerBody, RangeDatePickerInput, Rating, RichTextView, ScrollBars, SearchInput, Slider, Snackbar, Spinner, StatusIndicator, SuccessAlert, SuccessNotification, SvgCircleProgress, Switch, TabButton, Tag, Text, TextArea, TextInput, TextPlaceholder, TimePicker, TimePickerBody, Tooltip, VerticalTabButton, VirtualList, WarningAlert, WarningNotification, applyDateSelectionMods, defaultPredicates, getErrorPageConfig, getHighlightRanges, getHighlightedSearchMatches, getRecoveryMessageConfig, i18n, propsMods, rangeDatePickerPresets, renderCell, renderDropMarkers, settings, useColumnsWithFilters, useForm, uuiDatePickerBody, uuiRangeDatePickerBody, uuiTimePicker };
 //# sourceMappingURL=index.esm.js.map