@epam/uui 6.0.0-beta.0 → 6.0.0

package/index.esm.js

@@ -1,10 +1,11 @@
 import * as uuiComponents from '@epam/uui-components';
-import { Spinner as Spinner$1, Clickable, IconContainer, RadioInput as RadioInput$1, TextInput as TextInput$1, ControlGroup as ControlGroup$1, NumericInput as NumericInput$1, TextArea as TextArea$1, Dropdown as Dropdown$1, Anchor as Anchor$1, FlexSpacer, Text as Text$1, FlexCell as FlexCell$1, VPanel, ScrollBars as ScrollBars$1, 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, AvatarStack as AvatarStack$1, Paginator as Paginator$1, DragHandle, Avatar, usePickerModal, handleDataSourceKeyboard, PickerToggler as PickerToggler$1, usePickerInput, usePickerList, DataTableCell as DataTableCell$1, DataTableRow as DataTableRow$1, DataTableCellContainer, DataTableHeaderCell as DataTableHeaderCell$1, DataTableHeaderRow as DataTableHeaderRow$1, useShowSelected, usePickerApi, 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 { Spinner as Spinner$1, Clickable, IconContainer, RadioInput as RadioInput$1, TextInput as TextInput$1, ControlGroup as ControlGroup$1, NumericInput as NumericInput$1, TextArea as TextArea$1, Dropdown as Dropdown$1, InputAddon as InputAddon$1, Slider as Slider$1, Anchor as Anchor$1, FlexSpacer, Text as Text$1, FlexCell as FlexCell$1, VPanel, ScrollBars as ScrollBars$1, Blocker as Blocker$1, ModalBlocker as ModalBlocker$1, ModalWindow as ModalWindow$1, Snackbar as Snackbar$1, Calendar as Calendar$1, YearSelection, MonthSelection, Day, uuiDaySelection, AvatarStack as AvatarStack$1, Paginator as Paginator$1, DragHandle, Avatar, usePickerModal, handleDataSourceKeyboard, PickerToggler as PickerToggler$1, usePickerInput, usePickerList, DataTableCell as DataTableCell$1, DataTableRow as DataTableRow$1, DataTableCellContainer, DataTableHeaderCell as DataTableHeaderCell$1, DataTableHeaderRow as DataTableHeaderRow$1, useShowSelected, usePickerApi, AdaptivePanel, useColumnsConfiguration, Accordion as Accordion$1, DataTableSelectionProvider, DataTableFocusProvider, Burger as Burger$1, Button as Button$1, DropSpot as DropSpot$1, UploadFileToggler, ErrorCatch } from '@epam/uui-components';
 export { Avatar, DataTableCellContainer, FlexSpacer, IconContainer } from '@epam/uui-components';
-import { withMods, devLogger, uuiElement, cx as cx$1, uuiMarkers, IEditableDebouncer, UuiContext, uuiMod, getDir, isEventTargetInsideClickable, directionMode, useVirtualList, useScrollShadows, isMobile, i18n as i18n$1, useUuiContext, isFocusReceiverInsideFocusLock, usePrevious, mobilePopperModifier, uuiDataTableHeaderCell, uuiDataTableHeaderGroupCell, 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, isFocusReceiverInsideFocusLock, UuiContext, uuiMod, getDir, isEventTargetInsideClickable, directionMode, useVirtualList, useScrollShadows, isMobile, i18n as i18n$1, useUuiContext, usePrevious, mobilePositioning, uuiDataTableHeaderCell, uuiDataTableHeaderGroupCell, 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, useMemo, useImperativeHandle, useCallback, Fragment } from 'react';
+import React__default, { forwardRef, useState, useEffect, useContext, useRef, useReducer, useMemo, useImperativeHandle, useCallback, Fragment } from 'react';
 import cx from 'classnames';
+import { offset } from '@floating-ui/react';
 import dayjs from 'dayjs';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
@@ -17,24 +18,9 @@ import isoWeek from 'dayjs/plugin/isoWeek.js';
 import isEqual from 'react-fast-compare';
 import FocusLock, { MoveFocusInside } from 'react-focus-lock';
 
-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 SvgNavigationCloseOutline = function SvgNavigationCloseOutline(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: "M6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19z"
-  })));
-};
-var ForwardRef$R = /*#__PURE__*/forwardRef(SvgNavigationCloseOutline);
-
 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 SvgNavigationChevronDownOutline = function SvgNavigationChevronDownOutline(props, ref) {
+var SvgNavigationCloseOutline = function SvgNavigationCloseOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$Q({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -42,14 +28,14 @@ var SvgNavigationChevronDownOutline = function SvgNavigationChevronDownOutline(p
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$Q || (_path$Q = /*#__PURE__*/React.createElement("path", {
-    d: "M5.414 8.086 4 9.5l8 8 8-8-1.414-1.414L12 14.672 5.414 8.086z"
+    d: "M6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19z"
   })));
 };
-var ForwardRef$Q = /*#__PURE__*/forwardRef(SvgNavigationChevronDownOutline);
+var ForwardRef$Q = /*#__PURE__*/forwardRef(SvgNavigationCloseOutline);
 
 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 SvgNotificationDoneOutline = function SvgNotificationDoneOutline(props, ref) {
+var SvgNavigationChevronDownOutline = function SvgNavigationChevronDownOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$P({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -57,14 +43,14 @@ var SvgNotificationDoneOutline = function SvgNotificationDoneOutline(props, ref)
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$P || (_path$P = /*#__PURE__*/React.createElement("path", {
-    d: "m20.503 7.4-1.778-1.78-9.175 9.176-4.275-4.275L3.496 12.3l6.054 6.053L20.503 7.4z"
+    d: "M5.414 8.086 4 9.5l8 8 8-8-1.414-1.414L12 14.672 5.414 8.086z"
   })));
 };
-var ForwardRef$P = /*#__PURE__*/forwardRef(SvgNotificationDoneOutline);
+var ForwardRef$P = /*#__PURE__*/forwardRef(SvgNavigationChevronDownOutline);
 
 var _path$O;
 function _extends$O() { return _extends$O = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$O.apply(null, arguments); }
-var SvgContentMinusOutline = function SvgContentMinusOutline(props, ref) {
+var SvgNotificationDoneOutline = function SvgNotificationDoneOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$O({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -72,14 +58,14 @@ var SvgContentMinusOutline = function SvgContentMinusOutline(props, ref) {
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$O || (_path$O = /*#__PURE__*/React.createElement("path", {
-    d: "M19 10.5H5v3h14v-3z"
+    d: "m20.503 7.4-1.778-1.78-9.175 9.176-4.275-4.275L3.496 12.3l6.054 6.053L20.503 7.4z"
   })));
 };
-var ForwardRef$O = /*#__PURE__*/forwardRef(SvgContentMinusOutline);
+var ForwardRef$O = /*#__PURE__*/forwardRef(SvgNotificationDoneOutline);
 
 var _path$N;
 function _extends$N() { return _extends$N = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$N.apply(null, arguments); }
-var SvgActionSearchOutline = function SvgActionSearchOutline(props, ref) {
+var SvgContentMinusOutline = function SvgContentMinusOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$N({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -87,16 +73,14 @@ var SvgActionSearchOutline = function SvgActionSearchOutline(props, ref) {
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$N || (_path$N = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M17.32 15.906 21.414 20 20 21.414l-4.094-4.094a8 8 0 1 1 1.414-1.414zM11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12z",
-    clipRule: "evenodd"
+    d: "M19 10.5H5v3h14v-3z"
   })));
 };
-var ForwardRef$N = /*#__PURE__*/forwardRef(SvgActionSearchOutline);
+var ForwardRef$N = /*#__PURE__*/forwardRef(SvgContentMinusOutline);
 
 var _path$M;
 function _extends$M() { return _extends$M = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$M.apply(null, arguments); }
-var SvgActionCalendarFill = function SvgActionCalendarFill(props, ref) {
+var SvgActionSearchOutline = function SvgActionSearchOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$M({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -104,14 +88,16 @@ var SvgActionCalendarFill = function SvgActionCalendarFill(props, ref) {
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$M || (_path$M = /*#__PURE__*/React.createElement("path", {
-    d: "M5 22a1.93 1.93 0 0 1-1.413-.587A1.928 1.928 0 0 1 3 20V6c0-.55.196-1.02.587-1.412A1.927 1.927 0 0 1 5 4h1V2h2v2h8V2h2v2h1c.55 0 1.021.196 1.413.588.391.391.587.862.587 1.412v14a1.93 1.93 0 0 1-.587 1.413A1.928 1.928 0 0 1 19 22H5zm0-2h14V10H5v10z"
+    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$M = /*#__PURE__*/forwardRef(SvgActionCalendarFill);
+var ForwardRef$M = /*#__PURE__*/forwardRef(SvgActionSearchOutline);
 
 var _path$L;
 function _extends$L() { return _extends$L = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$L.apply(null, arguments); }
-var SvgNotificationInfoOutline = function SvgNotificationInfoOutline(props, ref) {
+var SvgActionCalendarFill = function SvgActionCalendarFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$L({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -119,14 +105,14 @@ var SvgNotificationInfoOutline = function SvgNotificationInfoOutline(props, ref)
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$L || (_path$L = /*#__PURE__*/React.createElement("path", {
-    d: "M11 17h2v-6h-2v6zm1-8a.968.968 0 0 0 .713-.288A.967.967 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.967.967 0 0 0-.712.287A.968.968 0 0 0 11 8c0 .283.096.52.288.712A.965.965 0 0 0 12 9zm0 13a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20z"
+    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$L = /*#__PURE__*/forwardRef(SvgNotificationInfoOutline);
+var ForwardRef$L = /*#__PURE__*/forwardRef(SvgActionCalendarFill);
 
 var _path$K;
 function _extends$K() { return _extends$K = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$K.apply(null, arguments); }
-var SvgNotificationInfoFill = function SvgNotificationInfoFill(props, ref) {
+var SvgNotificationInfoOutline = function SvgNotificationInfoOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$K({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -134,15 +120,30 @@ var SvgNotificationInfoFill = function SvgNotificationInfoFill(props, ref) {
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$K || (_path$K = /*#__PURE__*/React.createElement("path", {
-    d: "M11 17h2v-6h-2v6zm1-8a.968.968 0 0 0 .713-.288A.967.967 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.967.967 0 0 0-.712.287A.968.968 0 0 0 11 8c0 .283.096.52.288.712A.965.965 0 0 0 12 9zm0 13a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2a9.74 9.74 0 0 1 3.9.787 10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22z"
+    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$K = /*#__PURE__*/forwardRef(SvgNotificationInfoFill);
+var ForwardRef$K = /*#__PURE__*/forwardRef(SvgNotificationInfoOutline);
 
-var _path$J, _path2$5, _path3, _path4, _path5, _path6, _g, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14, _path15, _path16, _path17, _path18, _path19, _path20, _path21, _path22, _path23, _path24, _defs;
+var _path$J;
 function _extends$J() { return _extends$J = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$J.apply(null, arguments); }
-var SvgEmptyTable = function SvgEmptyTable(props, ref) {
+var SvgNotificationInfoFill = function SvgNotificationInfoFill(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: "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$J = /*#__PURE__*/forwardRef(SvgNotificationInfoFill);
+
+var _path$I, _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$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 SvgEmptyTable = function SvgEmptyTable(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$I({
     width: 232,
     height: 180,
     viewBox: "0 0 232 180",
@@ -150,8 +151,8 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#76ecserzoh40k2udo_a)"
-  }, _path$J || (_path$J = /*#__PURE__*/React.createElement("path", {
+    clipPath: "url(#txfob38xw8cwpktwv_a)"
+  }, _path$I || (_path$I = /*#__PURE__*/React.createElement("path", {
     d: "M150.585 1.535C49.483-11.495 27.481 61.805 45.725 97.481c10.581 20.69-39.64 70.792 17.744 81.468 27.538 5.123 36-13.341 62.433-10.655 35.4 3.6 148.167-4.73 88.349-78.915-31.713-39.335 1.026-79.506-63.666-87.844Z",
     fill: "#F5F6FA"
   })), _path2$5 || (_path2$5 = /*#__PURE__*/React.createElement("path", {
@@ -171,7 +172,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M86.786 22.982c-2.55 0-4.965 2.07-4.965 4.552V120.6c0 2.484 2.4 4.572 4.965 4.572h88.101c2.582 0 4.986-2.089 4.986-4.572V27.534c0-2.464-2.418-4.552-4.986-4.552h-88.1Zm-5.793 4.552c0-3.022 2.874-5.38 5.793-5.38h88.101c2.935 0 5.814 2.374 5.814 5.38V120.6c0 3.021-2.86 5.4-5.814 5.4h-88.1c-2.94 0-5.794-2.381-5.794-5.4V27.534Z",
     fill: "#1D1E26"
   })), /*#__PURE__*/React.createElement("mask", {
-    id: "76ecselj3vmmhmqap_b",
+    id: "txfob35m68v1v8fjk_b",
     style: {
       maskType: "alpha"
     },
@@ -184,7 +185,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M174.887 125.586h-88.1c-2.752 0-5.38-2.234-5.38-4.986V27.534c0-2.752 2.644-4.966 5.38-4.966h88.1c2.752 0 5.4 2.23 5.4 4.966V120.6c0 2.752-2.632 4.986-5.4 4.986Z",
     fill: "#9BDEFF"
   }))), _g || (_g = /*#__PURE__*/React.createElement("g", {
-    mask: "url(#76ecselj3vmmhmqap_b)",
+    mask: "url(#txfob35m68v1v8fjk_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
@@ -270,33 +271,18 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M24.73 96.184a.414.414 0 0 1 .581.06l48.646 59.751a.413.413 0 1 1-.642.523L24.67 96.766a.414.414 0 0 1 .06-.582Z",
     fill: "#fff"
   }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "76ecserzoh40k2udo_a"
+    id: "txfob38xw8cwpktwv_a"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
     d: "M0 0h230.897v180H0z"
   })))));
 };
-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 SvgTableSortAscOutline = function SvgTableSortAscOutline(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", {
-    d: "M11 21V6.825L9.4 8.4 8 7l4-4 4 4-1.4 1.4L13 6.825V21h-2z"
-  })));
-};
-var ForwardRef$I = /*#__PURE__*/forwardRef(SvgTableSortAscOutline);
+var ForwardRef$I = /*#__PURE__*/forwardRef(SvgEmptyTable);
 
 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 SvgTableSortDescOutline = function SvgTableSortDescOutline(props, ref) {
+var SvgTableSortAscOutline = function SvgTableSortAscOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$H({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -304,14 +290,14 @@ var SvgTableSortDescOutline = function SvgTableSortDescOutline(props, ref) {
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$H || (_path$H = /*#__PURE__*/React.createElement("path", {
-    d: "M13 3v14.175l1.6-1.575L16 17l-4 4-4-4 1.4-1.4 1.6 1.575V3h2z"
+    d: "M11 21V6.825L9.4 8.4 8 7l4-4 4 4-1.4 1.4L13 6.825V21h-2z"
   })));
 };
-var ForwardRef$H = /*#__PURE__*/forwardRef(SvgTableSortDescOutline);
+var ForwardRef$H = /*#__PURE__*/forwardRef(SvgTableSortAscOutline);
 
 var _path$G;
 function _extends$G() { return _extends$G = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$G.apply(null, arguments); }
-var SvgActionDragIndicatorOutline = function SvgActionDragIndicatorOutline(props, ref) {
+var SvgTableSortDescOutline = function SvgTableSortDescOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$G({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -319,14 +305,14 @@ var SvgActionDragIndicatorOutline = function SvgActionDragIndicatorOutline(props
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$G || (_path$G = /*#__PURE__*/React.createElement("path", {
-    d: "M9 20c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 7 18c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 9 16c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413s-.196 1.021-.587 1.413A1.928 1.928 0 0 1 9 20zm6 0c-.55 0-1.02-.196-1.412-.587A1.927 1.927 0 0 1 13 18c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 15 16c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413s-.196 1.021-.587 1.413A1.928 1.928 0 0 1 15 20zm-6-6c-.55 0-1.02-.196-1.412-.588A1.923 1.923 0 0 1 7 12c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 9 10c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413s-.196 1.02-.587 1.412A1.927 1.927 0 0 1 9 14zm6 0c-.55 0-1.02-.196-1.412-.588A1.923 1.923 0 0 1 13 12c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 15 10c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413s-.196 1.02-.587 1.412A1.927 1.927 0 0 1 15 14zM9 8c-.55 0-1.02-.196-1.412-.588A1.923 1.923 0 0 1 7 6c0-.55.196-1.02.588-1.412A1.923 1.923 0 0 1 9 4c.55 0 1.021.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.927 1.927 0 0 1 9 8zm6 0c-.55 0-1.02-.196-1.412-.588A1.923 1.923 0 0 1 13 6c0-.55.196-1.02.588-1.412A1.923 1.923 0 0 1 15 4c.55 0 1.021.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.927 1.927 0 0 1 15 8z"
+    d: "M13 3v14.175l1.6-1.575L16 17l-4 4-4-4 1.4-1.4 1.6 1.575V3h2z"
   })));
 };
-var ForwardRef$G = /*#__PURE__*/forwardRef(SvgActionDragIndicatorOutline);
+var ForwardRef$G = /*#__PURE__*/forwardRef(SvgTableSortDescOutline);
 
 var _path$F;
 function _extends$F() { return _extends$F = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$F.apply(null, arguments); }
-var SvgNavigationMoreVertOutline = function SvgNavigationMoreVertOutline(props, ref) {
+var SvgActionDragIndicatorOutline = function SvgActionDragIndicatorOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$F({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -334,16 +320,14 @@ var SvgNavigationMoreVertOutline = function SvgNavigationMoreVertOutline(props,
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$F || (_path$F = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z",
-    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$F = /*#__PURE__*/forwardRef(SvgNavigationMoreVertOutline);
+var ForwardRef$F = /*#__PURE__*/forwardRef(SvgActionDragIndicatorOutline);
 
 var _path$E;
 function _extends$E() { return _extends$E = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$E.apply(null, arguments); }
-var SvgNavigationRefreshOutline = function SvgNavigationRefreshOutline(props, ref) {
+var SvgNavigationMoreVertOutline = function SvgNavigationMoreVertOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$E({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -351,14 +335,16 @@ var SvgNavigationRefreshOutline = function SvgNavigationRefreshOutline(props, re
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$E || (_path$E = /*#__PURE__*/React.createElement("path", {
-    d: "M12 20c-2.233 0-4.125-.775-5.675-2.325C4.775 16.125 4 14.233 4 12c0-2.233.775-4.125 2.325-5.675C7.875 4.775 9.767 4 12 4c1.15 0 2.25.238 3.3.713A7.617 7.617 0 0 1 18 6.75V4h2v7h-7V9h4.2a5.837 5.837 0 0 0-2.187-2.2A5.93 5.93 0 0 0 12 6c-1.667 0-3.083.583-4.25 1.75C6.583 8.917 6 10.333 6 12c0 1.667.583 3.083 1.75 4.25C8.917 17.417 10.333 18 12 18a5.863 5.863 0 0 0 3.475-1.1A5.81 5.81 0 0 0 17.65 14h2.1c-.467 1.767-1.417 3.208-2.85 4.325S13.833 20 12 20z"
+    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$E = /*#__PURE__*/forwardRef(SvgNavigationRefreshOutline);
+var ForwardRef$E = /*#__PURE__*/forwardRef(SvgNavigationMoreVertOutline);
 
 var _path$D;
 function _extends$D() { return _extends$D = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$D.apply(null, arguments); }
-var SvgActionLockFill = function SvgActionLockFill(props, ref) {
+var SvgNavigationRefreshOutline = function SvgNavigationRefreshOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$D({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -366,16 +352,14 @@ var SvgActionLockFill = function SvgActionLockFill(props, ref) {
     viewBox: "0 0 24 24",
     ref: ref
   }, props), _path$D || (_path$D = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M12 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM7 9V7a5 5 0 0 1 10 0v2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V11a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 1 0-6 0v2z",
-    clipRule: "evenodd"
+    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$D = /*#__PURE__*/forwardRef(SvgActionLockFill);
+var ForwardRef$D = /*#__PURE__*/forwardRef(SvgNavigationRefreshOutline);
 
-var _path$C, _path2$4;
+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 SvgTableGroupColumnLeftFill = function SvgTableGroupColumnLeftFill(props, ref) {
+var SvgActionLockFill = function SvgActionLockFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$C({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -383,18 +367,16 @@ var SvgTableGroupColumnLeftFill = function SvgTableGroupColumnLeftFill(props, re
     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",
+    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$C = /*#__PURE__*/forwardRef(SvgTableGroupColumnLeftFill);
+var ForwardRef$C = /*#__PURE__*/forwardRef(SvgActionLockFill);
 
-var _path$B, _path2$3;
+var _path$B, _path2$4;
 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) {
+var SvgTableGroupColumnLeftFill = function SvgTableGroupColumnLeftFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$B({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -402,18 +384,18 @@ var SvgTableGroupColumnRightFill = function SvgTableGroupColumnRightFill(props,
     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", {
+    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: "M9 5H5v14h4V5zM5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6V3H5z",
+    d: "M13 21V3h6a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-6zm2-16h4v14h-4V5z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$B = /*#__PURE__*/forwardRef(SvgTableGroupColumnRightFill);
+var ForwardRef$B = /*#__PURE__*/forwardRef(SvgTableGroupColumnLeftFill);
 
-var _path$A;
+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 SvgTableSwapOutline = function SvgTableSwapOutline(props, ref) {
+var SvgTableGroupColumnRightFill = function SvgTableGroupColumnRightFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$A({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -421,14 +403,18 @@ var SvgTableSwapOutline = function SvgTableSwapOutline(props, ref) {
     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"
+    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"
   })));
 };
-var ForwardRef$A = /*#__PURE__*/forwardRef(SvgTableSwapOutline);
+var ForwardRef$A = /*#__PURE__*/forwardRef(SvgTableGroupColumnRightFill);
 
 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) {
+var SvgTableSwapOutline = function SvgTableSwapOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$z({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -436,14 +422,14 @@ var SvgContentFiltrationFill = function SvgContentFiltrationFill(props, ref) {
     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"
+    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$z = /*#__PURE__*/forwardRef(SvgContentFiltrationFill);
+var ForwardRef$z = /*#__PURE__*/forwardRef(SvgTableSwapOutline);
 
 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) {
+var SvgContentFiltrationFill = function SvgContentFiltrationFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$y({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -451,14 +437,14 @@ var SvgNavigationChevronUpOutline = function SvgNavigationChevronUpOutline(props
     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"
+    d: "M14 13v8l-4-2v-6L2.95 4h18.1L14 13z"
   })));
 };
-var ForwardRef$y = /*#__PURE__*/forwardRef(SvgNavigationChevronUpOutline);
+var ForwardRef$y = /*#__PURE__*/forwardRef(SvgContentFiltrationFill);
 
 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) {
+var SvgNavigationChevronUpOutline = function SvgNavigationChevronUpOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$x({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -466,14 +452,14 @@ var SvgNavigationCollapseAllOutline = function SvgNavigationCollapseAllOutline(p
     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"
+    d: "M18.586 15.914 20 14.5l-8-8-8 8 1.414 1.414L12 9.328l6.586 6.586z"
   })));
 };
-var ForwardRef$x = /*#__PURE__*/forwardRef(SvgNavigationCollapseAllOutline);
+var ForwardRef$x = /*#__PURE__*/forwardRef(SvgNavigationChevronUpOutline);
 
 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) {
+var SvgNavigationCollapseAllOutline = function SvgNavigationCollapseAllOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$w({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -481,14 +467,14 @@ var SvgNavigationExpandAllOutline = function SvgNavigationExpandAllOutline(props
     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"
+    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$w = /*#__PURE__*/forwardRef(SvgNavigationExpandAllOutline);
+var ForwardRef$w = /*#__PURE__*/forwardRef(SvgNavigationCollapseAllOutline);
 
 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) {
+var SvgNavigationExpandAllOutline = function SvgNavigationExpandAllOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$v({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -496,14 +482,14 @@ var SvgActionSettingsFill = function SvgActionSettingsFill(props, ref) {
     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"
+    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$v = /*#__PURE__*/forwardRef(SvgActionSettingsFill);
+var ForwardRef$v = /*#__PURE__*/forwardRef(SvgNavigationExpandAllOutline);
 
 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) {
+var SvgActionSettingsFill = function SvgActionSettingsFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -511,14 +497,14 @@ var SvgNavigationChevronLeftOutline = function SvgNavigationChevronLeftOutline(p
     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"
+    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$u = /*#__PURE__*/forwardRef(SvgNavigationChevronLeftOutline);
+var ForwardRef$u = /*#__PURE__*/forwardRef(SvgActionSettingsFill);
 
 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) {
+var SvgNavigationChevronLeftOutline = function SvgNavigationChevronLeftOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$t({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -526,14 +512,14 @@ var SvgNavigationChevronRightOutline = function SvgNavigationChevronRightOutline
     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"
+    d: "M15.914 5.414 14.5 4l-8 8 8 8 1.414-1.414L9.328 12l6.586-6.586z"
   })));
 };
-var ForwardRef$t = /*#__PURE__*/forwardRef(SvgNavigationChevronRightOutline);
+var ForwardRef$t = /*#__PURE__*/forwardRef(SvgNavigationChevronLeftOutline);
 
 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) {
+var SvgNavigationChevronRightOutline = function SvgNavigationChevronRightOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -541,14 +527,14 @@ var SvgActionAddOutline = function SvgActionAddOutline(props, ref) {
     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"
+    d: "M8.086 18.586 9.5 20l8-8-8-8-1.414 1.414L14.672 12l-6.586 6.586z"
   })));
 };
-var ForwardRef$s = /*#__PURE__*/forwardRef(SvgActionAddOutline);
+var ForwardRef$s = /*#__PURE__*/forwardRef(SvgNavigationChevronRightOutline);
 
 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) {
+var SvgActionAddOutline = function SvgActionAddOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -556,14 +542,14 @@ var SvgNotificationDoneFill = function SvgNotificationDoneFill(props, ref) {
     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"
+    d: "M13.286 3h-2.572v7.714H3v2.572h7.714V21h2.572v-7.714H21v-2.572h-7.714V3z"
   })));
 };
-var ForwardRef$r = /*#__PURE__*/forwardRef(SvgNotificationDoneFill);
+var ForwardRef$r = /*#__PURE__*/forwardRef(SvgActionAddOutline);
 
 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) {
+var SvgNotificationDoneFill = function SvgNotificationDoneFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -571,14 +557,14 @@ var SvgRadioDotFill = function SvgRadioDotFill(props, ref) {
     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"
+    d: "m2 12 3.077-3.2 4.615 4.8L18.923 4 22 7.2 9.692 20 2 12z"
   })));
 };
-var ForwardRef$q = /*#__PURE__*/forwardRef(SvgRadioDotFill);
+var ForwardRef$q = /*#__PURE__*/forwardRef(SvgNotificationDoneFill);
 
 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) {
+var SvgRadioDotFill = function SvgRadioDotFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -586,14 +572,14 @@ var SvgNotificationHelpFill = function SvgNotificationHelpFill(props, ref) {
     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"
+    d: "M12 19a7 7 0 1 0 0-14 7 7 0 0 0 0 14z"
   })));
 };
-var ForwardRef$p = /*#__PURE__*/forwardRef(SvgNotificationHelpFill);
+var ForwardRef$p = /*#__PURE__*/forwardRef(SvgRadioDotFill);
 
 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) {
+var SvgNotificationHelpFill = function SvgNotificationHelpFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -601,14 +587,14 @@ var SvgNotificationCheckFill = function SvgNotificationCheckFill(props, ref) {
     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"
+    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$o = /*#__PURE__*/forwardRef(SvgNotificationCheckFill);
+var ForwardRef$o = /*#__PURE__*/forwardRef(SvgNotificationHelpFill);
 
 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) {
+var SvgNotificationCheckFill = function SvgNotificationCheckFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -616,14 +602,14 @@ var SvgNotificationWarningFill = function SvgNotificationWarningFill(props, ref)
     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"
+    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$n = /*#__PURE__*/forwardRef(SvgNotificationWarningFill);
+var ForwardRef$n = /*#__PURE__*/forwardRef(SvgNotificationCheckFill);
 
 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) {
+var SvgNotificationWarningFill = function SvgNotificationWarningFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -631,14 +617,14 @@ var SvgNotificationErrorFill = function SvgNotificationErrorFill(props, ref) {
     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"
+    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$m = /*#__PURE__*/forwardRef(SvgNotificationErrorFill);
+var ForwardRef$m = /*#__PURE__*/forwardRef(SvgNotificationWarningFill);
 
 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 SvgNotificationErrorFill = function SvgNotificationErrorFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -646,16 +632,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: "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$l = /*#__PURE__*/forwardRef(SvgFileFileWordFill);
+var ForwardRef$l = /*#__PURE__*/forwardRef(SvgNotificationErrorFill);
 
 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 SvgActionDeleteOutline = function SvgActionDeleteOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -663,16 +647,14 @@ 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: "M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3H9zM7 6h10v13H7V6zm2 2v9h2V8H9zm4 0v9h2V8h-2z"
   })));
 };
-var ForwardRef$k = /*#__PURE__*/forwardRef(SvgFileFileExcelFill);
+var ForwardRef$k = /*#__PURE__*/forwardRef(SvgActionDeleteOutline);
 
-var _path$j;
+var _path$j, _path2$2;
 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 SvgContentLinkOutline = function SvgContentLinkOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -680,16 +662,16 @@ var SvgFileFilePdfFill = function SvgFileFilePdfFill(props, ref) {
     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"
+    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$2 || (_path2$2 = /*#__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$j = /*#__PURE__*/forwardRef(SvgFileFilePdfFill);
+var ForwardRef$j = /*#__PURE__*/forwardRef(SvgContentLinkOutline);
 
 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 SvgContentEditFill = function SvgContentEditFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -697,16 +679,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: "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$i = /*#__PURE__*/forwardRef(SvgFileFileImageFill);
+var ForwardRef$i = /*#__PURE__*/forwardRef(SvgContentEditFill);
 
-var _path$h, _path2$2;
+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 SvgActionCopyContentOutline = function SvgActionCopyContentOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -714,18 +694,16 @@ 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$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",
+    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$h = /*#__PURE__*/forwardRef(SvgFileFileVideoFill);
+var ForwardRef$h = /*#__PURE__*/forwardRef(SvgActionCopyContentOutline);
 
 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 SvgContentEditUndoOutline = function SvgContentEditUndoOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -733,16 +711,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: "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$g = /*#__PURE__*/forwardRef(SvgFileFileTableFill);
+var ForwardRef$g = /*#__PURE__*/forwardRef(SvgContentEditUndoOutline);
 
 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 SvgActionSaveOutline = function SvgActionSaveOutline(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -750,16 +726,14 @@ var SvgFileFileTextFill = function SvgFileFileTextFill(props, ref) {
     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"
+    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$f = /*#__PURE__*/forwardRef(SvgFileFileTextFill);
+var ForwardRef$f = /*#__PURE__*/forwardRef(SvgActionSaveOutline);
 
 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 SvgFileFileWordFill = function SvgFileFileWordFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -768,15 +742,15 @@ var SvgFileFileEmlFill = function SvgFileFileEmlFill(props, ref) {
     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",
+    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$e = /*#__PURE__*/forwardRef(SvgFileFileEmlFill);
+var ForwardRef$e = /*#__PURE__*/forwardRef(SvgFileFileWordFill);
 
 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 SvgFileFileExcelFill = function SvgFileFileExcelFill(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -784,57 +758,178 @@ 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: "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$d = /*#__PURE__*/forwardRef(SvgFileFileFill);
+var ForwardRef$d = /*#__PURE__*/forwardRef(SvgFileFileExcelFill);
 
 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) {
+var SvgFileFilePdfFill = function SvgFileFilePdfFill(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",
-    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"
+    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$c = /*#__PURE__*/forwardRef(SvgStarFilled);
+var ForwardRef$c = /*#__PURE__*/forwardRef(SvgFileFilePdfFill);
 
-var _path$b, _path2$1;
+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 SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
+var SvgFileFileImageFill = function SvgFileFileImageFill(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",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
     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"
+    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$b = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
-
-var css$1x = {"root":"o65iiy","uui-spinner":"cKmTUv","uuiSpinner":"cKmTUv"};
-
-function applySpinnerMods() {
-    return [css$1x.root, 'uui-spinner'];
-}
-const Spinner = /* @__PURE__ */withMods(Spinner$1, applySpinnerMods);
-
-var css$1w = {"root":"TR3v0t","loading-word":"RuHgJ8","loadingWord":"RuHgJ8","animated-loading":"d-o3c6","animatedLoading":"d-o3c6","skeleton_loading":"w4-eSW","skeletonLoading":"w4-eSW"};
+var ForwardRef$b = /*#__PURE__*/forwardRef(SvgFileFileImageFill);
+
+var _path$a, _path2$1;
+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 SvgFileFileVideoFill = function SvgFileFileVideoFill(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: "M14.992 14 9.5 17.138v-6.276L14.992 14z"
+  })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M4 4c0-1.11.89-2 2-2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4zm9-.5V9h5.5L13 3.5zM8.5 9.138v9.724L17.008 14 8.5 9.138z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$a = /*#__PURE__*/forwardRef(SvgFileFileVideoFill);
+
+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 SvgFileFileTableFill = function SvgFileFileTableFill(props, ref) {
+  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$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-4 17H7v-2h3v2zm0-3H7v-2h3v2zm0-3H7v-2h3v2zm4 6h-3v-2h3v2zm0-3h-3v-2h3v2zm0-3h-3v-2h3v2zm-1-4V3.5L18.5 9H13z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$9 = /*#__PURE__*/forwardRef(SvgFileFileTableFill);
+
+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 SvgFileFileTextFill = function SvgFileFileTextFill(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: "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$8 = /*#__PURE__*/forwardRef(SvgFileFileTextFill);
+
+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 SvgFileFileEmlFill = function SvgFileFileEmlFill(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", {
+    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$7 = /*#__PURE__*/forwardRef(SvgFileFileEmlFill);
+
+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 SvgFileFileFill = function SvgFileFileFill(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: "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$6 = /*#__PURE__*/forwardRef(SvgFileFileFill);
+
+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 SvgStarFilled = function SvgStarFilled(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    ref: ref
+  }, props), _path$5 || (_path$5 = /*#__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$5 = /*#__PURE__*/forwardRef(SvgStarFilled);
+
+var _path$4, _path2;
+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 SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
+    width: 66,
+    height: 67,
+    viewBox: "0 0 66 67",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ref: ref
+  }, props), _path$4 || (_path$4 = /*#__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 || (_path2 = /*#__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$4 = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
+
+var css$1w = {"root":"KrlGIY","uui-spinner":"_1yVbMT","uuiSpinner":"_1yVbMT"};
+
+function applySpinnerMods() {
+    return [css$1w.root, 'uui-spinner'];
+}
+const Spinner = /* @__PURE__ */withMods(Spinner$1, applySpinnerMods);
+
+var css$1v = {"root":"bGD-GQ","loading-word":"N6nWnh","loadingWord":"N6nWnh","animated-loading":"Xhd6bU","animatedLoading":"Xhd6bU","skeleton_loading":"_5qKpS8","skeletonLoading":"_5qKpS8"};
 
 const TextPlaceholder = (props) => {
     const pattern = '&nbsp;';
@@ -846,23 +941,50 @@ const TextPlaceholder = (props) => {
         }
         return words;
     }, [props.wordsCount]);
-    return (React.createElement("div", { "aria-busy": true, className: cx(css$1w.root, 'uui-text-placeholder'), ...props.rawProps }, text.map((it, index) => (React.createElement("span", { key: index, className: cx([
-            props.cx, css$1w.loadingWord, !props.isNotAnimated && css$1w.animatedLoading,
+    return (React.createElement("div", { "aria-busy": true, className: cx(css$1v.root, 'uui-text-placeholder'), ...props.rawProps }, text.map((it, index) => (React.createElement("span", { key: index, className: cx([
+            props.cx, css$1v.loadingWord, !props.isNotAnimated && css$1v.animatedLoading,
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
+var css$1u = {"root":"gFX4Wt","line-height":"qfPSAi","lineHeight":"qfPSAi","font-size":"v7CQxB","fontSize":"v7CQxB"};
+
+function applyTextMods(mods) {
+    return [
+        css$1u.root,
+        'uui-text',
+        `uui-size-${mods.size || settings.text.sizes.default}`,
+        (mods.size !== 'none' || mods.lineHeight) && css$1u.lineHeight,
+        (mods.size !== 'none' || mods.fontSize) && css$1u.fontSize,
+        `uui-color-${mods.color || 'primary'}`,
+        `uui-font-weight-${mods.fontWeight || '400'}`,
+        `uui-font-style-${mods.fontStyle || 'normal'}`,
+        'uui-typography-inline',
+    ];
+}
+const Text = /* @__PURE__ */withMods(uuiComponents.Text, applyTextMods, (props) => {
+    const style = props?.rawProps?.style || {};
+    props.fontSize && (style['--uui-text-font-size'] = `${props.fontSize}px`);
+    props.lineHeight && (style['--uui-text-line-height'] = `${props.lineHeight}px`);
+    return {
+        rawProps: {
+            ...props?.rawProps,
+            style: style,
+        },
+    };
+});
+
 const accordionSettings = {
     icons: {
-        dropdownIcon: ForwardRef$Q,
+        dropdownIcon: ForwardRef$P,
     },
 };
 const alertSettings = {
     icons: {
-        closeIcon: ForwardRef$R,
-        infoIcon: ForwardRef$K,
-        successIcon: ForwardRef$o,
-        warningIcon: ForwardRef$n,
-        errorIcon: ForwardRef$m,
+        closeIcon: ForwardRef$Q,
+        infoIcon: ForwardRef$J,
+        successIcon: ForwardRef$n,
+        warningIcon: ForwardRef$m,
+        errorIcon: ForwardRef$l,
     },
     sizes: {
         default: '48',
@@ -874,7 +996,7 @@ const alertSettings = {
 };
 const badgeSettings = {
     icons: {
-        dropdownIcon: ForwardRef$Q,
+        dropdownIcon: ForwardRef$P,
     },
     sizes: {
         default: '36',
@@ -890,8 +1012,8 @@ const badgeSettings = {
 };
 const buttonSettings = {
     icons: {
-        clearIcon: ForwardRef$R,
-        dropdownIcon: ForwardRef$Q,
+        clearIcon: ForwardRef$Q,
+        dropdownIcon: ForwardRef$P,
     },
     sizes: {
         default: '36',
@@ -899,8 +1021,8 @@ const buttonSettings = {
 };
 const checkboxSettings = {
     icons: {
-        checkIcon: ForwardRef$P,
-        indeterminateIcon: ForwardRef$O,
+        checkIcon: ForwardRef$O,
+        indeterminateIcon: ForwardRef$N,
     },
     sizes: {
         default: '18',
@@ -912,32 +1034,33 @@ const countIndicatorSettings = {
     },
 };
 const dataTableSettings = {
-    renderPlaceholder: () => React__default.createElement(TextPlaceholder, { isNotAnimated: true }),
+    renderPlaceholder: (props) => React__default.createElement(Text, { size: props.rowSize },
+        React__default.createElement(TextPlaceholder, null)),
     icons: {
-        emptyTable: ForwardRef$J,
+        emptyTable: ForwardRef$I,
         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,
+            configIcon: ForwardRef$u,
+            ascSortIcon: ForwardRef$H,
+            descSortIcon: ForwardRef$G,
+            defaultSortIcon: ForwardRef$z,
+            filterIcon: ForwardRef$y,
+            dropdownIcon: ForwardRef$P,
+            openedDropdownIcon: ForwardRef$x,
+            foldIcon: ForwardRef$w,
+            unfoldIcon: ForwardRef$v,
         },
         body: {
-            foldingIcon: ForwardRef$Q,
+            foldingIcon: ForwardRef$P,
         },
         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,
+            dragIndicator: ForwardRef$F,
+            lockIcon: ForwardRef$C,
+            pinLeftIcon: ForwardRef$B,
+            pinRightIcon: ForwardRef$A,
+            collapsedIcon: ForwardRef$s,
+            expandedIcon: ForwardRef$P,
+            menuIcon: ForwardRef$E,
+            resetIcon: ForwardRef$D,
         },
     },
     sizes: {
@@ -994,18 +1117,18 @@ const dataTableSettings = {
 };
 const dropdownMenuSettings = {
     icons: {
-        acceptIcon: ForwardRef$P,
-        dropdownIcon: ForwardRef$Q,
+        acceptIcon: ForwardRef$O,
+        dropdownIcon: ForwardRef$P,
     },
 };
 const datePickerSettings = {
     icons: {
         body: {
-            prevIcon: ForwardRef$u,
-            nextIcon: ForwardRef$t,
+            prevIcon: ForwardRef$t,
+            nextIcon: ForwardRef$s,
         },
         input: {
-            calendarIcon: ForwardRef$M,
+            calendarIcon: ForwardRef$L,
         },
     },
     sizes: {
@@ -1015,17 +1138,17 @@ const datePickerSettings = {
 };
 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,
+        docIcon: ForwardRef$e,
+        exelIcon: ForwardRef$d,
+        pdfIcon: ForwardRef$c,
+        imgIcon: ForwardRef$b,
+        videoIcon: ForwardRef$a,
+        tableIcon: ForwardRef$9,
+        textIcon: ForwardRef$8,
+        mailIcon: ForwardRef$7,
+        fileIcon: ForwardRef$6,
+        closeIcon: ForwardRef$Q,
+        errorIcon: ForwardRef$l,
     },
 };
 const flexRowSettings = {
@@ -1034,23 +1157,31 @@ const flexRowSettings = {
     },
 };
 const filtersPanelSettings = {
+    renderPlaceholder: () => React__default.createElement(TextPlaceholder, null),
     icons: {
-        addFilterIcon: ForwardRef$s,
-        itemDropdownIcon: ForwardRef$Q,
+        addFilterIcon: ForwardRef$r,
+        itemDropdownIcon: ForwardRef$P,
+        pickerBodyRemoveIcon: ForwardRef$k,
     },
     sizes: {
         default: '36',
+        footerLinkButton: '36',
+        mobileFooterLinkButton: '48',
+        pickerBodyMultiSwitch: '24',
+        pickerBodyLinkButton: '24',
+        pickerBodyMinWidth: 360,
+        rangeDatePickerInput: '30',
     },
 };
 const iconButtonSettings = {
     icons: {
-        dropdownIcon: ForwardRef$Q,
+        dropdownIcon: ForwardRef$P,
     },
 };
 const labeledInputSettings = {
     icons: {
-        infoIcon: ForwardRef$L,
-        fillInfoIcon: ForwardRef$K,
+        infoIcon: ForwardRef$K,
+        fillInfoIcon: ForwardRef$J,
     },
     sizes: {
         default: '36',
@@ -1058,7 +1189,7 @@ const labeledInputSettings = {
 };
 const linkButtonSettings = {
     icons: {
-        dropdownIcon: ForwardRef$Q,
+        dropdownIcon: ForwardRef$P,
     },
     sizes: {
         default: '36',
@@ -1067,24 +1198,25 @@ const linkButtonSettings = {
 };
 const modalSettings = {
     icons: {
-        closeIcon: ForwardRef$R,
+        closeIcon: ForwardRef$Q,
     },
 };
 const notificationCardSettings = {
     icons: {
-        closeIcon: ForwardRef$R,
-        hintIcon: ForwardRef$p,
-        successIcon: ForwardRef$o,
-        warningIcon: ForwardRef$n,
-        errorIcon: ForwardRef$m,
+        closeIcon: ForwardRef$Q,
+        hintIcon: ForwardRef$o,
+        successIcon: ForwardRef$n,
+        warningIcon: ForwardRef$m,
+        errorIcon: ForwardRef$l,
     },
     sizes: {
         action: '30',
+        icon: 24,
     },
 };
 const numericInputSettings = {
     icons: {
-        arrowIcon: ForwardRef$Q,
+        arrowIcon: ForwardRef$P,
     },
     sizes: {
         default: '36',
@@ -1092,24 +1224,25 @@ const numericInputSettings = {
 };
 const paginatorSettings = {
     icons: {
-        leftArrowIcon: ForwardRef$u,
-        rightArrowIcon: ForwardRef$t,
+        leftArrowIcon: ForwardRef$t,
+        rightArrowIcon: ForwardRef$s,
     },
     sizes: {
-        default: '36',
+        default: '30',
     },
 };
 const pickerInputSettings = {
-    renderPlaceholder: () => React__default.createElement(TextPlaceholder, null),
+    renderPlaceholder: (props) => React__default.createElement(Text, { size: props.rowSize },
+        React__default.createElement(TextPlaceholder, null)),
     icons: {
         toggler: {
-            clearIcon: ForwardRef$R,
-            dropdownIcon: ForwardRef$Q,
+            clearIcon: ForwardRef$Q,
+            dropdownIcon: ForwardRef$P,
         },
         body: {
-            selectIcon: (size) => size < '30' ? ForwardRef$r : ForwardRef$P,
-            pickerBodyMobileHeaderCloseIcon: ForwardRef$R,
-            modalNotFoundSearchIcon: ForwardRef$b,
+            selectIcon: (size) => size < '30' ? ForwardRef$q : ForwardRef$O,
+            pickerBodyMobileHeaderCloseIcon: ForwardRef$Q,
+            modalNotFoundSearchIcon: ForwardRef$4,
         },
     },
     sizes: {
@@ -1166,12 +1299,32 @@ const pickerInputSettings = {
             mobileFooterLinkButton: '48',
             mobileRow: '48',
             mobileSearchInput: '48',
+            getSearchSize: ({ pickerSize }) => {
+                return pickerSize;
+            },
         },
     },
 };
+const presetsPanelSettings = {
+    icons: {
+        addIcon: ForwardRef$r,
+        copyIcon: ForwardRef$h,
+        copyLinkIcon: ForwardRef$j,
+        deleteIcon: ForwardRef$k,
+        discardChangesIcon: ForwardRef$g,
+        menuIcon: ForwardRef$E,
+        renameIcon: ForwardRef$i,
+        saveAsNewIcon: ForwardRef$f,
+        saveInCurrentIcon: ForwardRef$D,
+    },
+    sizes: {
+        tabButton: '60',
+        dropdownTargetIconButton: '18',
+    },
+};
 const radioInputSettings = {
     icons: {
-        dotIcon: ForwardRef$q,
+        dotIcon: ForwardRef$p,
     },
     sizes: {
         default: '18',
@@ -1180,7 +1333,7 @@ const radioInputSettings = {
 const rangeDatePickerSettings = {
     icons: {
         input: {
-            calendarIcon: ForwardRef$M,
+            calendarIcon: ForwardRef$L,
         },
     },
     sizes: {
@@ -1190,8 +1343,8 @@ const rangeDatePickerSettings = {
 };
 const ratingSettings = {
     icons: {
-        filledRatingIcon: ForwardRef$c,
-        emptyRatingIcon: ForwardRef$c,
+        filledRatingIcon: ForwardRef$5,
+        emptyRatingIcon: ForwardRef$5,
     },
     sizes: {
         default: 18,
@@ -1214,8 +1367,8 @@ const switchSettings = {
 };
 const tabButtonSettings = {
     icons: {
-        clearIcon: ForwardRef$R,
-        dropdownIcon: ForwardRef$Q,
+        clearIcon: ForwardRef$Q,
+        dropdownIcon: ForwardRef$P,
     },
     sizes: {
         default: '48',
@@ -1228,8 +1381,8 @@ const tabButtonSettings = {
 };
 const tagSettings = {
     icons: {
-        clearIcon: ForwardRef$R,
-        dropdownIcon: ForwardRef$Q,
+        clearIcon: ForwardRef$Q,
+        dropdownIcon: ForwardRef$P,
     },
     sizes: {
         default: '36',
@@ -1255,10 +1408,10 @@ const textAreaSettings = {
 };
 const textInputSettings = {
     icons: {
-        acceptIcon: ForwardRef$P,
-        clearIcon: ForwardRef$R,
-        dropdownIcon: ForwardRef$Q,
-        searchIcon: ForwardRef$N,
+        acceptIcon: ForwardRef$O,
+        clearIcon: ForwardRef$Q,
+        dropdownIcon: ForwardRef$P,
+        searchIcon: ForwardRef$M,
     },
     sizes: {
         default: '36',
@@ -1289,6 +1442,7 @@ const settings = {
     numericInput: numericInputSettings,
     paginator: paginatorSettings,
     pickerInput: pickerInputSettings,
+    presetsPanel: presetsPanelSettings,
     radioInput: radioInputSettings,
     rangeDatePicker: rangeDatePickerSettings,
     rating: ratingSettings,
@@ -1302,11 +1456,11 @@ const settings = {
     textInput: textInputSettings,
 };
 
-var css$1v = {"root":"CojBcc"};
+var css$1t = {"root":"sNVX-Q"};
 
 function applyButtonMods(mods) {
     return [
-        css$1v.root,
+        css$1t.root,
         'uui-button',
         `uui-fill-${mods.fill || 'solid'}`,
         `uui-color-${mods.color || 'primary'}`,
@@ -1320,10 +1474,10 @@ const Button = /* @__PURE__ */withMods(uuiComponents.Button, applyButtonMods, ()
     };
 });
 
-var css$1u = {"root":"cO1Xge"};
+var css$1s = {"root":"snx1hd"};
 
 function applyIconButtonMods(props) {
-    return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1u.root];
+    return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1s.root];
 }
 const IconButton = /* @__PURE__ */withMods(uuiComponents.IconButton, applyIconButtonMods, (props) => {
     const isDeprecated = ['info', 'success', 'error', 'warning'].includes(props.color);
@@ -1357,10 +1511,10 @@ function getIconClass(props) {
     return [classList['has-left-icon'] ? 'uui-has-left-icon' : 'uui-no-left-icon', classList['has-right-icon'] ? 'uui-has-right-icon' : 'uui-no-right-icon'];
 }
 
-var css$1t = {"root":"vfbRDA"};
+var css$1r = {"root":"vujsVT"};
 
 const DEFAULT_COLOR = 'primary';
-function LinkButton(props) {
+const LinkButton = /* @__PURE__ */React.forwardRef((props, ref) => {
     if (process.env.NODE_ENV !== "production" && props.color === 'contrast') {
         devLogger.warnAboutDeprecatedPropValue({
             component: 'LinkButton',
@@ -1372,7 +1526,7 @@ function LinkButton(props) {
     }
     const rootStyles = [
         'uui-link_button',
-        css$1t.root,
+        css$1r.root,
         `uui-size-${props.size || settings.linkButton.sizes.default}`,
         ...getIconClass(props),
         `uui-color-${props.color || DEFAULT_COLOR}`,
@@ -1380,30 +1534,30 @@ function LinkButton(props) {
     ];
     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: props.ref },
+    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)),
         props.icon && props.iconPosition === 'right' && (React.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         props.isDropdown && (React.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
-}
+});
 
-var css$1s = {"root":"OAHbkk"};
+var css$1q = {"root":"_7naoX7"};
 
-function CountIndicator(props) {
-    return (React__default.createElement("div", { ref: props.ref, className: cx([
-            css$1s.root,
+const CountIndicator = /* @__PURE__ */forwardRef((props, ref) => {
+    return (React__default.createElement("div", { ref: ref, className: cx([
+            css$1q.root,
             'uui-count_indicator',
             `uui-size-${props.size || settings.countIndicator.sizes.default}`,
             props.color && `uui-color-${props.color}`,
             props.cx,
         ]) }, props.caption));
-}
+});
 
-var css$1r = {"root":"jULXuE","withNotify":"eUB7yd"};
+var css$1p = {"root":"bSDKiN","withNotify":"pf2JLA"};
 
-function TabButton(props) {
+const TabButton = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const styles = [
-        css$1r.root,
+        css$1p.root,
         'uui-tab-button',
         `uui-size-${props.size || settings.tabButton.sizes.default}`,
         ...getIconClass(props),
@@ -1416,31 +1570,31 @@ function TabButton(props) {
             'aria-haspopup': props.isDropdown,
             'aria-expanded': props.isOpen,
             ...props.rawProps,
-        }, cx: styles, ref: props.ref },
+        }, cx: styles, ref: ref },
         props.icon && props.iconPosition !== 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         (props.caption || props.withNotify) && (React__default.createElement("div", { className: cx$1(uuiElement.caption) },
             props.caption,
-            props.withNotify && React__default.createElement("div", { className: css$1r.withNotify }))),
+            props.withNotify && React__default.createElement("div", { className: css$1p.withNotify }))),
         props.icon && props.iconPosition === 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { color: "neutral", size: settings.tabButton.sizes.countIndicatorMap[props.size || settings.tabButton.sizes.default], caption: props.count })),
         props.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$1q = {"root":"P8Qd1-"};
+var css$1o = {"root":"_6ZqbsU"};
 
 function applyVerticalTabButtonMods() {
-    return [css$1q.root, 'uui-vertical-tab-button'];
+    return [css$1o.root, 'uui-vertical-tab-button'];
 }
 const VerticalTabButton = /* @__PURE__ */withMods(TabButton, applyVerticalTabButtonMods);
 
-var css$1p = {"root":"UzH8Ry","mode-cell":"pIJx7e","modeCell":"pIJx7e"};
+var css$1n = {"root":"L96JmR"};
 
 function applyCheckboxMods(mods) {
     return [
-        css$1p.root,
+        css$1n.root,
         `uui-size-${mods.size || settings.checkbox.sizes.default}`,
-        css$1p['mode-' + (mods.mode || 'form')],
+        'uui-control-mode-' + (mods.mode || 'form'),
         'uui-color-primary',
     ];
 }
@@ -1452,11 +1606,11 @@ const applyUUICheckboxProps = (props) => {
 };
 const Checkbox = /* @__PURE__ */withMods(uuiComponents.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$1o = {"root":"m7HxIA"};
+var css$1m = {"root":"xZ0xea"};
 
 function applyRadioInputMods(mods) {
     return [
-        css$1o.root,
+        css$1m.root,
         `uui-size-${mods.size || settings.radioInput.sizes.default}`,
         'uui-radio-input-container',
         'uui-color-primary',
@@ -1464,11 +1618,11 @@ function applyRadioInputMods(mods) {
 }
 const RadioInput = /* @__PURE__ */withMods(RadioInput$1, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : settings.radioInput.icons.dotIcon }));
 
-var css$1n = {"root":"_06JWNy"};
+var css$1l = {"root":"_2nI57L"};
 
 function applySwitchMods(mods) {
     return [
-        css$1n.root,
+        css$1l.root,
         `uui-size-${mods.size || settings.switch.sizes.default}`,
         'uui-color-primary',
     ];
@@ -1488,14 +1642,14 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var textInputCss = {"root":"eFmtOS","mode-form":"S1GjWl","modeForm":"S1GjWl","mode-inline":"HdgPib","modeInline":"HdgPib","mode-cell":"YhGkMI","modeCell":"YhGkMI"};
+var textInputCss = {"root":"_1ExOjk"};
 
 const DEFAULT_MODE$3 = EditMode.FORM;
 function applyTextInputMods(mods) {
     return [
         textInputCss.root,
         `uui-size-${mods.size || settings.textInput.sizes.default}`,
-        textInputCss['mode-' + (mods.mode || DEFAULT_MODE$3)],
+        'uui-control-mode-' + (mods.mode || DEFAULT_MODE$3),
     ];
 }
 const TextInput = /* @__PURE__ */withMods(TextInput$1, applyTextInputMods, () => ({
@@ -1503,42 +1657,41 @@ const TextInput = /* @__PURE__ */withMods(TextInput$1, applyTextInputMods, () =>
     cancelIcon: settings.textInput.icons.clearIcon,
     dropdownIcon: settings.textInput.icons.dropdownIcon,
 }));
-const SearchInput = (props) => {
+const SearchInput = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     // analytics events are sending in IEditableDebouncer, so we need to avoid sending events in TextInput
     const { ...textInputProps } = props;
     delete textInputProps.getValueChangeAnalyticsEvent;
     return (React__default.createElement(IEditableDebouncer, { ...props, render: (iEditable) => {
             const defaultOnCancel = () => iEditable.onValueChange('');
-            return (React__default.createElement(TextInput, { icon: settings.textInput.icons.searchIcon, onCancel: props.onCancel ?? defaultOnCancel, type: "search", inputMode: "search", ref: props.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$1m = {"root":"-hLJE-"};
+var css$1k = {"root":"LTYAUq"};
 
-const ControlGroup = /* @__PURE__ */withMods(ControlGroup$1, () => [css$1m.root, 'uui-control-group']);
+const ControlGroup = /* @__PURE__ */withMods(ControlGroup$1, () => [css$1k.root, 'uui-control-group']);
 
-function MultiSwitchComponent(props) {
-    const { ref, ...restProps } = props;
-    return (React.createElement(ControlGroup, { ref: props.ref, rawProps: {
+function MultiSwitchComponent(props, ref) {
+    return (React.createElement(ControlGroup, { ref: ref, rawProps: {
             ...props.rawProps,
             role: 'tablist',
             'aria-invalid': props.isInvalid,
             'aria-required': props.isRequired,
             'aria-disabled': props.isDisabled,
             'aria-readonly': props.isReadonly,
-        } }, props.items.map((item, index) => (React.createElement(Button, { ...restProps, ...item, isDisabled: props.isDisabled, key: index + '-' + item.id, onClick: !props.isReadonly && (() => props.onValueChange(item.id)), fill: props.value === item.id ? 'solid' : 'outline', color: props.color, size: props.size, rawProps: { 'aria-current': props.value === item.id, role: 'tab' } })))));
+        } }, props.items.map((item, index) => (React.createElement(Button, { ...props, ...item, isDisabled: props.isDisabled, key: index + '-' + item.id, onClick: !props.isReadonly && (() => props.onValueChange(item.id)), fill: props.value === item.id ? 'solid' : 'outline', color: props.color, size: props.size, rawProps: { 'aria-current': props.value === item.id, role: 'tab' } })))));
 }
-const MultiSwitch = MultiSwitchComponent;
+const MultiSwitch = /* @__PURE__ */React.forwardRef(MultiSwitchComponent);
 
-var css$1l = {"root":"kGfZOl","mode-form":"_1VhtSw","modeForm":"_1VhtSw","mode-cell":"AuNTQo","modeCell":"AuNTQo"};
+var css$1j = {"root":"Y9szTH"};
 
 const DEFAULT_MODE$2 = EditMode.FORM;
 function applyNumericInputMods(mods) {
     return [
         textInputCss.root,
-        css$1l.root,
+        css$1j.root,
         `uui-size-${mods.size || settings.numericInput.sizes.default}`,
-        textInputCss['mode-' + (mods.mode || DEFAULT_MODE$2)],
+        'uui-control-mode-' + (mods.mode || DEFAULT_MODE$2),
     ];
 }
 const NumericInput = /* @__PURE__ */withMods(NumericInput$1, applyNumericInputMods, (props) => {
@@ -1550,15 +1703,15 @@ const NumericInput = /* @__PURE__ */withMods(NumericInput$1, applyNumericInputMo
     };
 });
 
-var css$1k = {"root":"B5ms-0","mode-form":"fd0B19","modeForm":"fd0B19","mode-cell":"bHwZtD","modeCell":"bHwZtD","mode-inline":"rrXboO","modeInline":"rrXboO"};
+var css$1i = {"root":"agv5YV"};
 
 const DEFAULT_MODE$1 = EditMode.FORM;
 function applyTextAreaMods(mods) {
     return [
-        css$1k.root,
+        css$1i.root,
         'uui-textarea',
         'uui-size-' + (mods.size || settings.textArea.sizes.default),
-        css$1k['mode-' + (mods.mode || DEFAULT_MODE$1)],
+        'uui-control-mode-' + (mods.mode || DEFAULT_MODE$1),
     ];
 }
 const TextArea = /* @__PURE__ */withMods(TextArea$1, applyTextAreaMods, (props) => {
@@ -1591,244 +1744,228 @@ function TREE_SHAKEABLE_INIT$1() {
     };
 }
 
-var css$1j = {"root":"VQLOnO","main-path":"kA-wtA","mainPath":"kA-wtA","content-wrapper":"FYmnm7","contentWrapper":"FYmnm7","content":"JowmPF","action-wrapper":"UdR52E","actionWrapper":"UdR52E","icon-wrapper":"uVSouk","iconWrapper":"uVSouk","icon":"_1Yavn3","close-icon":"gb8UD9","closeIcon":"gb8UD9"};
-
-function Alert(props) {
-    return (React.createElement("div", { role: "alert", ref: props.ref, className: cx('uui-alert', css$1j.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
-        React.createElement("div", { className: css$1j.mainPath },
-            React.createElement("div", { className: css$1j.contentWrapper },
-                props.icon && (React.createElement("div", { className: css$1j.iconWrapper },
-                    React.createElement(IconContainer, { icon: props.icon, cx: css$1j.icon }))),
-                React.createElement("div", { className: css$1j.content },
-                    props.children,
-                    props.actions && (React.createElement("div", { className: css$1j.actionWrapper }, props.actions.map((action) => (React.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$1j.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$1j.closeIcon }))));
-}
-function WarningAlert(props) {
-    return React.createElement(Alert, { icon: settings.alert.icons.warningIcon, color: "warning", ...props });
-}
-function SuccessAlert(props) {
-    return React.createElement(Alert, { icon: settings.alert.icons.successIcon, color: "success", ...props });
-}
-function HintAlert(props) {
-    return React.createElement(Alert, { icon: settings.alert.icons.infoIcon, color: "info", ...props });
-}
-function ErrorAlert(props) {
-    return React.createElement(Alert, { icon: settings.alert.icons.errorIcon, color: "error", ...props });
-}
-
-const Dropdown = /* @__PURE__ */withMods(Dropdown$1);
-
-var css$1i = {"root":"jwQC8a"};
+var css$1h = {"root":"Z1r3vI"};
 
 function applyDropdownContainerMods(mods) {
     return [
-        css$1i.root,
+        css$1h.root,
         mods.vPadding && `vPadding-${mods.vPadding}`,
         mods.padding && `padding-${mods.padding}`,
     ];
 }
 const DropdownContainer = /* @__PURE__ */withMods(uuiComponents.DropdownContainer, applyDropdownContainerMods);
 
-var css$1h = {"submenu-root-item-rtl":"n1KrVj","submenuRootItemRtl":"n1KrVj","icon-after":"_367hv-","iconAfter":"_367hv-","submenu-root-item":"sjpCSS","submenuRootItem":"sjpCSS","icon-check":"hkMd-2","iconCheck":"hkMd-2","splitter-root":"I4Q7Gk","splitterRoot":"I4Q7Gk","splitter":"c8Q5MW","header-root":"Vaqwwh","headerRoot":"Vaqwwh","item-root":"Q4JdG0","itemRoot":"Q4JdG0","icon":"KUK-qI","link":"D-ZVrx","indent":"B-gmX-","selected-mark":"DtMGTt","selectedMark":"DtMGTt"};
+var css$1g = {"root":"dcDMzu","timepicker-input":"tOz3ku","timepickerInput":"tOz3ku","ltr-always":"btn2Yu","ltrAlways":"btn2Yu"};
 
-var IDropdownControlKeys;
-(function (IDropdownControlKeys) {
-    IDropdownControlKeys["ENTER"] = "Enter";
-    IDropdownControlKeys["ESCAPE"] = "Escape";
-    IDropdownControlKeys["LEFT_ARROW"] = "ArrowLeft";
-    IDropdownControlKeys["RIGHT_ARROW"] = "ArrowRight";
-    IDropdownControlKeys["UP_ARROW"] = "ArrowUp";
-    IDropdownControlKeys["DOWN_ARROW"] = "ArrowDown";
-})(IDropdownControlKeys || (IDropdownControlKeys = {}));
-function DropdownMenuContainer(props) {
-    const menuRef = useRef(null);
-    const [currentlyFocused, setFocused] = useState(0);
-    const menuItems = menuRef.current ? Array.from(menuRef.current.querySelectorAll(`[role="menuitem"]:not(.${uuiMod.disabled})`)) : [];
-    const changeFocus = (nextFocusedIndex) => {
-        if (menuItems.length > 0) {
-            setFocused(nextFocusedIndex);
-            menuItems[nextFocusedIndex].focus();
-        }
-    };
-    const handleArrowKeys = (e) => {
-        const lastMenuItemsIndex = menuItems.length - 1;
-        if (e.key === IDropdownControlKeys.UP_ARROW) {
-            changeFocus(currentlyFocused > 0 ? currentlyFocused - 1 : lastMenuItemsIndex);
-            e.preventDefault();
-        }
-        else if (e.key === IDropdownControlKeys.DOWN_ARROW) {
-            changeFocus(currentlyFocused < lastMenuItemsIndex ? currentlyFocused + 1 : 0);
-            e.preventDefault();
-        }
-        else if (e.key === props.closeOnKey && props.onClose) {
-            e.stopPropagation();
-            props.onClose();
-        }
+const uuiTimePicker = {
+    container: 'uui-timepicker-container',
+    iconUp: 'uui-timepicker-icon-up',
+    iconDown: 'uui-timepicker-icon-down',
+    input: 'uui-timepicker-input',
+    elementContainer: 'uui-timepicker-item',
+};
+const MIN_MINUTES = 0;
+const MAX_MINUTES = 59;
+const FORMAT_12H = 12;
+function TimePickerBody(props) {
+    const MIN_HOURS = props.format === FORMAT_12H ? 1 : 0;
+    const MAX_HOURS = props.format || FORMAT_12H;
+    const setValue = (newTime) => {
+        props.onValueChange({ hours: newTime.hour(), minutes: newTime.minute() });
     };
-    return (React__default.createElement(DropdownContainer, { ...props, rawProps: { ...props.rawProps, role: 'menu' }, ref: menuRef, width: props.minWidth, lockProps: { onKeyDown: handleArrowKeys }, cx: [props.cx] }));
-}
-const DropdownMenuBody = /* @__PURE__ */withMods(DropdownMenuContainer, () => ['uui-dropdownMenu-body'], (props) => {
-    return ({ closeOnKey: IDropdownControlKeys.ESCAPE, ...props });
-});
-function DropdownMenuButton(props) {
-    const context = useContext(UuiContext);
-    const { icon, iconPosition, onIconClick, caption, isDisabled, isSelected, isActive, link, href, onClick, toggleDropdownOpening, isDropdown, isOpen, target, } = props;
-    const handleClick = (event) => {
-        if (isDisabled || !onClick)
-            return;
-        !isEventTargetInsideClickable(event) && onClick(event);
-        context.uuiAnalytics.sendEvent(props.clickAnalyticsEvent);
+    const onHoursChange = (newHours) => {
+        setValue(uuiDayjs.dayjs().set(props.value).hour(newHours));
     };
-    const handleOpenDropdown = (event) => {
-        if (event.key === IDropdownControlKeys.RIGHT_ARROW && isDropdown) {
-            toggleDropdownOpening(true);
-        }
-        else if (event.key === IDropdownControlKeys.ENTER && onClick) {
-            onClick(event);
-            // Fix bug when click event is triggered after Enter key.
-            // Tricky case when modal window is opened from dropdown menu and click on modal header cross is triggered, that leads to modal close.
-            // https://github.com/epam/UUI/issues/2754
-            event.preventDefault();
-        }
+    const onMinutesChange = (newMinutes) => {
+        setValue(uuiDayjs.dayjs().set(props.value).minute(newMinutes));
     };
-    const getMenuButtonContent = () => {
-        const isIconBefore = Boolean(icon && iconPosition !== 'right');
-        const isIconAfter = Boolean(icon && iconPosition === 'right');
-        const iconElement = (React__default.createElement(IconButton, { icon: icon, color: isActive ? 'primary' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: cx$1(css$1h.icon, iconPosition === 'right' ? css$1h.iconAfter : css$1h.iconBefore) }));
-        return (React__default.createElement(React__default.Fragment, null,
-            isIconBefore && iconElement,
-            React__default.createElement(Text$1, { cx: props.indent && css$1h.indent }, caption),
-            isIconAfter && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(FlexSpacer, null),
-                iconElement))));
+    const onTimeTypeChange = () => {
+        setValue(uuiDayjs.dayjs().set(props.value).add(12, 'h'));
     };
-    const isAnchor = Boolean(link || href);
-    const itemClassNames = cx$1(props.cx, css$1h.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$1h.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: props.ref },
-        getMenuButtonContent(),
-        isSelected && (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(FlexSpacer, null),
-            React__default.createElement(IconContainer, { icon: settings.dropdownMenu.icons.acceptIcon, cx: css$1h.selectedMark })))));
-}
-function DropdownMenuSplitter(props) {
-    return (React__default.createElement("div", { className: cx$1(props.cx, css$1h.splitterRoot) },
-        React__default.createElement("hr", { className: css$1h.splitter })));
-}
-function DropdownMenuHeader(props) {
-    return (React__default.createElement("div", { className: cx$1('uui-dropdown-menu-header', props.cx, css$1h.headerRoot) },
-        React__default.createElement("span", { className: css$1h.header }, props.caption)));
-}
-function DropdownSubMenu(props) {
-    const subMenuModifiers = [
-        {
-            name: 'offset',
-            options: {
-                offset: ({ placement }) => {
-                    if (placement === 'right-start'
-                        || placement === 'left-start') {
-                        return [-6, 0];
-                    }
-                    else {
-                        return [6, 0];
-                    }
-                },
-            },
-        },
-    ];
-    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$1h.submenuRootItemRtl : css$1h.submenuRootItem), icon: settings.dropdownMenu.icons.dropdownIcon, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening, ...props, ...targetProps })) }));
+    const handleMinutesUpClick = () => {
+        const minutesStep = props.minutesStep || 5;
+        const value = uuiDayjs.dayjs().set(props.value);
+        const minutesToAdd = minutesStep - (value.minute() % minutesStep);
+        onMinutesChange(value.add(minutesToAdd, 'm').minute());
+    };
+    const handleMinutesDownClick = () => {
+        const minutesStep = props.minutesStep || 5;
+        const value = uuiDayjs.dayjs().set(props.value);
+        const minutesToSubtract = value.minute() % minutesStep === 0 ? minutesStep : value.minute() % minutesStep;
+        onMinutesChange(value.subtract(minutesToSubtract, 'm').minute());
+    };
+    return (React.createElement("div", { className: cx$1(css$1g.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef, ...props.rawProps },
+        React.createElement("div", { className: css$1g.ltrAlways },
+            React.createElement("div", { className: uuiTimePicker.elementContainer },
+                React.createElement(IconContainer, { size: 18, rawProps: { 'aria-label': 'Increment hours' }, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: () => onHoursChange(uuiDayjs.dayjs().set(props.value).add(1, 'h').hour()) }),
+                React.createElement(NumericInput$1, { cx: uuiTimePicker.input, onValueChange: onHoursChange, value: +(uuiDayjs.dayjs()
+                        .set(props.value)
+                        .format(MAX_HOURS === FORMAT_12H ? 'hh' : 'HH')), min: MIN_HOURS, max: MAX_HOURS }),
+                React.createElement(IconContainer, { size: 18, rawProps: { 'aria-label': 'Decrement hours' }, cx: uuiTimePicker.iconDown, icon: ForwardRef$P, onClick: () => onHoursChange(uuiDayjs.dayjs().set(props.value).subtract(1, 'h').hour()) })),
+            React.createElement("div", { className: uuiTimePicker.elementContainer },
+                React.createElement(IconContainer, { size: 18, rawProps: { 'aria-label': 'Increment minutes' }, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: handleMinutesUpClick }),
+                React.createElement(NumericInput$1, { cx: uuiTimePicker.input, onValueChange: onMinutesChange, value: +uuiDayjs.dayjs().set(props.value).format('m'), min: MIN_MINUTES, max: MAX_MINUTES }),
+                React.createElement(IconContainer, { size: 18, rawProps: { 'aria-label': 'Decrement minutes' }, cx: uuiTimePicker.iconDown, icon: ForwardRef$P, onClick: handleMinutesDownClick }))),
+        MAX_HOURS === FORMAT_12H && (React.createElement("div", { className: uuiTimePicker.elementContainer },
+            React.createElement(IconContainer, { size: 18, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: onTimeTypeChange }),
+            React.createElement(TextInput$1, { cx: uuiTimePicker.input, onValueChange: () => {
+                }, isReadonly: true, value: uuiDayjs.dayjs().set(props.value).format('A') }),
+            React.createElement(IconContainer, { size: 18, cx: uuiTimePicker.iconDown, icon: ForwardRef$P, onClick: onTimeTypeChange })))));
 }
-function DropdownMenuSwitchButton(props) {
-    const context = useContext(UuiContext);
-    const { icon, caption, isDisabled, isSelected, onValueChange, } = props;
-    const onHandleValueChange = (value) => {
-        if (isDisabled || !onValueChange)
-            return;
-        onValueChange(value);
-        context.uuiAnalytics.sendEvent(props.clickAnalyticsEvent);
+
+const getMeridian = (newValue, format) => {
+    if (format === 'hh:mm A') {
+        if (newValue.toLowerCase().includes('p') && newValue.toLowerCase().includes('a')) {
+            return newValue.toLowerCase().indexOf('p') < newValue.toLowerCase().indexOf('a') ? 'PM' : 'AM';
+        }
+        return newValue.toLowerCase().includes('p') ? 'PM' : 'AM';
+    }
+    return false;
+};
+const parseTimeNumbers = (value, separator) => {
+    let hours, minutes;
+    const timeNumbers = value.replace(/\D/gi, '');
+    switch (separator) {
+        case 0:
+            hours = 0;
+            minutes = parseInt(timeNumbers.trim().slice(0, 2));
+            break;
+        case 1:
+            hours = parseInt(timeNumbers.slice(0, 1));
+            minutes = parseInt(timeNumbers.slice(1, 3));
+            break;
+        default:
+            hours = parseInt(timeNumbers.slice(0, 2));
+            minutes = parseInt(timeNumbers.slice(2, 4));
+    }
+    return { hours, minutes };
+};
+const formatTime = (hours, minutes, meridian, format) => {
+    const normalizeHours = (h) => Number.isNaN(h) ? '00' : h.toString().padStart(2, '0');
+    const normalizeMinutes = (m) => Number.isNaN(m) ? '00' : m.toString().padStart(2, '0');
+    if (meridian && normalizeHours(hours) === '00' && normalizeMinutes(minutes) === '00') {
+        return '';
+    }
+    let hoursResult = Number.parseInt(normalizeHours(hours));
+    let meridianResult = meridian;
+    if ((format === 'hh:mm A') && hoursResult > 12) {
+        hoursResult -= 12;
+        meridianResult = 'PM';
+    }
+    if ((format === 'hh:mm A') && hoursResult === 0) {
+        hoursResult = 12;
+    }
+    const time = `${normalizeHours(hoursResult)}:${normalizeMinutes(minutes)}`;
+    return meridianResult ? time.concat(` ${meridianResult}`) : time;
+};
+
+const DEFAULT_MODE = EditMode.FORM;
+const valueToTimeString = (value, format) => {
+    if (value === null)
+        return null;
+    return uuiDayjs.dayjs()
+        .set(value)
+        .format(format === 24 ? 'HH:mm' : 'hh:mm A');
+};
+function TimePickerComponent(props, ref) {
+    const [state, setState] = useState({
+        isOpen: false,
+        value: valueToTimeString(props.value, props.format),
+        inputValue: valueToTimeString(props.value, props.format),
+    });
+    useEffect(() => {
+        if (valueToTimeString(props.value, props.format) !== state.value) {
+            const stringValue = valueToTimeString(props.value, props.format);
+            setState((prevState) => ({
+                ...prevState,
+                value: stringValue,
+                inputValue: stringValue,
+            }));
+        }
+    }, [props.value, props.format]);
+    const getFormat = () => props.format === 24 ? 'HH:mm' : 'hh:mm A';
+    const isTimeValid = (newValue) => uuiDayjs.dayjs(newValue, getFormat(), true).isValid();
+    const formatStringTimeToObject = (stringTime) => {
+        if (stringTime) {
+            const value = uuiDayjs.dayjs(stringTime, getFormat(), true);
+            return { hours: value.hour(), minutes: value.minute() };
+        }
+        return { hours: null, minutes: null };
     };
-    const handleKeySelect = (e) => {
-        if (e.key === IDropdownControlKeys.ENTER) {
-            onHandleValueChange(!isSelected);
+    const onClear = () => {
+        props.onValueChange(null);
+    };
+    const onToggle = (value) => {
+        setState((prevState) => ({ ...prevState, isOpen: value }));
+    };
+    const saveTime = (newTime) => {
+        setState((prevState) => ({ ...prevState, inputValue: newTime }));
+        props.onValueChange(formatStringTimeToObject(newTime));
+    };
+    const getTimeFromInputValue = (newValue) => {
+        const trimmedNewValue = newValue.trimStart();
+        const separator = trimmedNewValue.search(/\D/);
+        const meridian = getMeridian(trimmedNewValue, getFormat());
+        const { hours, minutes } = parseTimeNumbers(trimmedNewValue, separator);
+        return formatTime(hours, minutes, meridian, getFormat());
+    };
+    const handleBodyValueChange = (newValue) => {
+        const inputValue = valueToTimeString(newValue, props.format);
+        saveTime(inputValue);
+    };
+    const handleFocus = (e) => {
+        onToggle(true);
+        props.onFocus?.(e);
+    };
+    const handleInputChange = (newValue) => {
+        setState((prevState) => ({ ...prevState, inputValue: newValue }));
+        if (newValue) {
+            const result = getTimeFromInputValue(newValue);
+            if (isTimeValid(result)) {
+                setState((prevState) => ({ ...prevState, value: result }));
+            }
         }
     };
-    return (React__default.createElement("div", { className: cx$1(props.cx, css$1h.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$1h.iconBefore }),
-        React__default.createElement(Text$1, null, caption),
-        React__default.createElement(FlexSpacer, null),
-        React__default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
+    const handleBlur = (e) => {
+        if (isFocusReceiverInsideFocusLock(e))
+            return;
+        onToggle(false);
+        props.onBlur?.(e);
+        if (state.value === '' || state.inputValue === '') {
+            props.onValueChange(null);
+            setState((prevState) => ({ ...prevState, value: null, inputValue: null }));
+        }
+        state.value && state.inputValue && saveTime(state.value);
+    };
+    const renderInput = (inputProps) => {
+        return (React__default.createElement(TextInput, { ...inputProps, onClick: null, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$1g.root, css$1g.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;
+        return (!props.isDisabled && !props.isReadonly && (React__default.createElement(DropdownContainer, { ...bodyProps, focusLock: false },
+            React__default.createElement(TimePickerBody, { ...timePickerBodyProps, onValueChange: handleBodyValueChange, value: formatStringTimeToObject(state.value), rawProps: props.rawProps?.body, cx: props.bodyCx }))));
+    };
+    return (React__default.createElement(Dropdown$1, { 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, middleware: [offset(6)], ref: ref }));
 }
+const TimePicker = /* @__PURE__ */React__default.forwardRef(TimePickerComponent);
 
-var css$1g = {"root":"_4031V-","mode-block":"HsUHc4","modeBlock":"HsUHc4","mode-inline":"_0Nq-pU","modeInline":"_0Nq-pU","padding-0":"zBTzve","padding0":"zBTzve","padding-6":"Gg1jty","padding6":"Gg1jty","padding-12":"Eg2AzJ","padding12":"Eg2AzJ","padding-18":"a4b7J4","padding18":"a4b7J4"};
+var css$1f = {"root":"-Qs-hw"};
 
-function applyAccordionMods(mods) {
+function applyInputAddonMods() {
     return [
-        css$1g.root,
-        css$1g[`mode-${mods.mode || 'block'}`],
-        mods.padding && css$1g['padding-' + mods.padding],
+        css$1f.root,
     ];
 }
-const Accordion = /* @__PURE__ */withMods(uuiComponents.Accordion, applyAccordionMods, (mods) => ({
-    dropdownIcon: mods.dropdownIcon !== null && settings.accordion.icons.dropdownIcon,
-}));
-
-var css$1f = {"root":"JM65gt","align-items":"_8N-gf1","alignItems":"_8N-gf1","justify-content":"FzlziJ","justifyContent":"FzlziJ","border-top":"G-Jrm2","borderTop":"G-Jrm2","border-bottom":"fvLekY","borderBottom":"fvLekY","top-shadow":"Da78j2","topShadow":"Da78j2","padding":"QdPLyi","margin":"cBfAR0","vPadding":"jZ0Sxz","column-gap":"jfHu3S","columnGap":"jfHu3S","row-gap":"D--o7K","rowGap":"D--o7K","spacing":"kl4fPc"};
-
-const FlexCell = /* @__PURE__ */withMods(FlexCell$1, () => [css$1f.flexCell]);
-
-const FlexRow = (props) => {
-    if (process.env.NODE_ENV !== "production") {
-        if (props.spacing) {
-            devLogger.warn('[FlexRow]: The `spacing` property is deprecated and will be removed in future versions. Please use `columnGap` instead.');
-        }
-    }
-    const classNames = cx$1([
-        css$1f.root,
-        'uui-flex-row',
-        props.onClick && uuiMarkers.clickable,
-        props.cx,
-        props.size !== null && 'uui-size-' + (props.size || settings.flexRow.sizes.default),
-        props.alignItems && css$1f.alignItems,
-        props.justifyContent && css$1f.justifyContent,
-        props.padding && css$1f.padding,
-        props.vPadding && css$1f.vPadding,
-        props.margin && css$1f.margin,
-        props.topShadow && css$1f.topShadow,
-        props.borderBottom && css$1f.borderBottom,
-        props.borderTop && css$1f.borderTop,
-        props.columnGap && css$1f.columnGap,
-        props.rowGap && css$1f.rowGap,
-        props.spacing && css$1f.spacing,
-        props.background && `uui-flex-row-bg-${props.background}`,
-    ]);
-    const style = {
-        ...(props.alignItems && { '--uui-flex-row-align-items': props.alignItems }),
-        ...(props.justifyContent && { '--uui-flex-row-justify-content': props.justifyContent }),
-        ...(props.columnGap && { '--uui-flex-row-column-gap': `${props.columnGap}px` }),
-        ...(props.rowGap && { '--uui-flex-row-row-gap': `${props.rowGap}px` }),
-        ...(props.padding && { '--uui-flex-row-padding': `${props.padding}px` }),
-        ...(props.vPadding && { '--uui-flex-row-v-padding': `${props.vPadding}px` }),
-        ...(props.margin && { '--uui-flex-row-margin': `${props.margin}px` }),
-        ...(props.spacing && { '--uui-flex-row-spacing': `${props.spacing}px` }),
-    };
-    return (React__default.createElement("div", { ref: props.ref, onClick: props.onClick ? (e) => !isEventTargetInsideClickable(e) && props.onClick(e) : undefined, className: classNames, ...props.rawProps, style: {
-            ...style,
-            ...props.rawProps?.style,
-        } }, props.children));
-};
+const InputAddon = /* @__PURE__ */withMods(InputAddon$1, applyInputAddonMods);
 
-var css$1e = {"root":"JwHxws","margin-24":"_8PHM2V","margin24":"_8PHM2V","padding-12":"s2vOpU","padding12":"s2vOpU","padding-24":"UXux-J","padding24":"UXux-J","shadow":"JKNCJ8","uui-surface-main":"O83qLc","uuiSurfaceMain":"O83qLc"};
+var css$1e = {"root":"wzwGIX"};
 
-const Panel = /* @__PURE__ */withMods(VPanel, (props) => [
-    'uui-panel',
-    css$1e.root,
-    props.shadow && css$1e.shadow,
-    props.margin && css$1e['margin-' + props.margin],
-    props.background && css$1e[`uui-${props.background}`],
-]);
+function applySliderMods() {
+    return [css$1e.root, 'uui-color-neutral'];
+}
+const Slider = /* @__PURE__ */withMods(Slider$1, applySliderMods);
 
-var css$1d = {"root":"_0VsEIx"};
+var css$1d = {"root":"Q6V5UZ"};
 
 function applyTooltipMods(mods) {
     return [
@@ -1838,54 +1975,286 @@ function applyTooltipMods(mods) {
 }
 const Tooltip = /* @__PURE__ */withMods(uuiComponents.Tooltip, applyTooltipMods);
 
-var css$1c = {"root":"IYl9JX"};
+var css$1c = {"root":"RNE4V1","tooltip":"KV2D7y"};
 
-function applyLabeledInputMods(mods) {
+function applyRatingMods(mods) {
     return [
-        'uui-labeled-input',
         css$1c.root,
-        'uui-size-' + (mods.size || settings.labeledInput.sizes.default),
+        `uui-size-${mods.size || settings.rating.sizes.default}`,
     ];
 }
-function applyLabeledInputProps(props) {
-    return ({
-        Tooltip: props.Tooltip || Tooltip,
-        infoIcon: props.infoIcon || props.size <= '30' ? settings.labeledInput.icons.fillInfoIcon : settings.labeledInput.icons.infoIcon,
-    });
-}
-const LabeledInput = /* @__PURE__ */withMods(uuiComponents.LabeledInput, applyLabeledInputMods, applyLabeledInputProps);
+const Rating = /* @__PURE__ */withMods(uuiComponents.Rating, applyRatingMods, (props) => ({
+    filledStarIcon: props.icon || settings.rating.icons.filledRatingIcon,
+    emptyStarIcon: props.icon || settings.rating.icons.emptyRatingIcon,
+    Tooltip,
+}));
 
-var css$1b = {"root":"iBeqTH"};
+var css$1b = {"root":"cAdztP","main-path":"DlQzC6","mainPath":"DlQzC6","content-wrapper":"dJ98Is","contentWrapper":"dJ98Is","content":"PciAFj","action-wrapper":"_25jmXl","actionWrapper":"_25jmXl","icon-wrapper":"_3iAoc0","iconWrapper":"_3iAoc0","icon":"fgyh5z","close-icon":"I-25O0","closeIcon":"I-25O0"};
 
-function RadioGroup(props) {
-    const direction = props.direction || 'vertical';
-    const handleChange = (newVal) => {
-        if (newVal !== props.value) {
-            props.onValueChange(newVal);
-        }
+const Alert = /* @__PURE__ */React.forwardRef((props, ref) => (React.createElement("div", { role: "alert", ref: ref, className: cx('uui-alert', css$1b.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
+    React.createElement("div", { className: css$1b.mainPath },
+        React.createElement("div", { className: css$1b.contentWrapper },
+            props.icon && (React.createElement("div", { className: css$1b.iconWrapper },
+                React.createElement(IconContainer, { icon: props.icon, cx: css$1b.icon }))),
+            React.createElement("div", { className: css$1b.content },
+                props.children,
+                props.actions && (React.createElement("div", { className: css$1b.actionWrapper }, props.actions.map((action) => (React.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$1b.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$1b.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$1a = {"submenu-root-item-rtl":"aRvO-8","submenuRootItemRtl":"aRvO-8","icon-after":"_06yT1L","iconAfter":"_06yT1L","submenu-root-item":"E0hRcl","submenuRootItem":"E0hRcl","icon-check":"EzSb-v","iconCheck":"EzSb-v","splitter-root":"_139keK","splitterRoot":"_139keK","splitter":"_1nTqcA","header-root":"G4nPex","headerRoot":"G4nPex","item-root":"W-agQv","itemRoot":"W-agQv","icon":"i1F7Pz","link":"w3Q-Pk","indent":"rDwhrG","selected-mark":"RV0K5R","selectedMark":"RV0K5R"};
+
+var IDropdownControlKeys;
+(function (IDropdownControlKeys) {
+    IDropdownControlKeys["ENTER"] = "Enter";
+    IDropdownControlKeys["ESCAPE"] = "Escape";
+    IDropdownControlKeys["LEFT_ARROW"] = "ArrowLeft";
+    IDropdownControlKeys["RIGHT_ARROW"] = "ArrowRight";
+    IDropdownControlKeys["UP_ARROW"] = "ArrowUp";
+    IDropdownControlKeys["DOWN_ARROW"] = "ArrowDown";
+})(IDropdownControlKeys || (IDropdownControlKeys = {}));
+function DropdownMenuContainer(props) {
+    const menuRef = useRef(null);
+    const [currentlyFocused, setFocused] = useState(0);
+    const menuItems = menuRef.current ? Array.from(menuRef.current.querySelectorAll(`[role="menuitem"]:not(.${uuiMod.disabled})`)) : [];
+    const changeFocus = (nextFocusedIndex) => {
+        if (menuItems.length > 0) {
+            setFocused(nextFocusedIndex);
+            menuItems[nextFocusedIndex].focus();
+        }
     };
-    return (React.createElement("fieldset", { ref: props.forwardedRef, className: cx$1(css$1b.root, directionMode[direction], props.cx), onFocus: props.onFocus, onBlur: props.onBlur, ...props.rawProps }, props.items.map((i) => {
+    const handleArrowKeys = (e) => {
+        const lastMenuItemsIndex = menuItems.length - 1;
+        if (e.key === IDropdownControlKeys.UP_ARROW) {
+            changeFocus(currentlyFocused > 0 ? currentlyFocused - 1 : lastMenuItemsIndex);
+            e.preventDefault();
+        }
+        else if (e.key === IDropdownControlKeys.DOWN_ARROW) {
+            changeFocus(currentlyFocused < lastMenuItemsIndex ? currentlyFocused + 1 : 0);
+            e.preventDefault();
+        }
+        else if (e.key === props.closeOnKey && props.onClose) {
+            e.stopPropagation();
+            props.onClose();
+        }
+    };
+    return (React__default.createElement(DropdownContainer, { ...props, rawProps: { ...props.rawProps, role: 'menu' }, ref: menuRef, width: props.minWidth, lockProps: { onKeyDown: handleArrowKeys }, cx: [props.cx] }));
+}
+const DropdownMenuBody = /* @__PURE__ */withMods(DropdownMenuContainer, () => ['uui-dropdownMenu-body'], (props) => {
+    return ({ closeOnKey: IDropdownControlKeys.ESCAPE, ...props });
+});
+const DropdownMenuButton = /* @__PURE__ */React__default.forwardRef((props, ref) => {
+    const context = useContext(UuiContext);
+    const { icon, iconPosition, onIconClick, caption, isDisabled, isSelected, isActive, link, href, onClick, toggleDropdownOpening, isDropdown, isOpen, target, } = props;
+    const handleClick = (event) => {
+        if (isDisabled || !onClick)
+            return;
+        !isEventTargetInsideClickable(event) && onClick(event);
+        context.uuiAnalytics.sendEvent(props.clickAnalyticsEvent);
+    };
+    const handleOpenDropdown = (event) => {
+        if (event.key === IDropdownControlKeys.RIGHT_ARROW && isDropdown) {
+            toggleDropdownOpening(true);
+        }
+        else if (event.key === IDropdownControlKeys.ENTER && onClick) {
+            onClick(event);
+            // Fix bug when click event is triggered after Enter key.
+            // Tricky case when modal window is opened from dropdown menu and click on modal header cross is triggered, that leads to modal close.
+            // https://github.com/epam/UUI/issues/2754
+            event.preventDefault();
+        }
+    };
+    const getMenuButtonContent = () => {
+        const isIconBefore = Boolean(icon && iconPosition !== 'right');
+        const isIconAfter = Boolean(icon && iconPosition === 'right');
+        const iconElement = (React__default.createElement(IconButton, { icon: icon, color: isActive ? 'primary' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: cx$1(css$1a.icon, iconPosition === 'right' ? css$1a.iconAfter : css$1a.iconBefore) }));
+        return (React__default.createElement(React__default.Fragment, null,
+            isIconBefore && iconElement,
+            React__default.createElement(Text$1, { cx: props.indent && css$1a.indent }, caption),
+            isIconAfter && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(FlexSpacer, null),
+                iconElement))));
+    };
+    const isAnchor = Boolean(link || href);
+    const itemClassNames = cx$1(props.cx, css$1a.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$1a.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: settings.dropdownMenu.icons.acceptIcon, cx: css$1a.selectedMark })))));
+});
+function DropdownMenuSplitter(props) {
+    return (React__default.createElement("div", { className: cx$1(props.cx, css$1a.splitterRoot) },
+        React__default.createElement("hr", { className: css$1a.splitter })));
+}
+function DropdownMenuHeader(props) {
+    return (React__default.createElement("div", { className: cx$1('uui-dropdown-menu-header', props.cx, css$1a.headerRoot) },
+        React__default.createElement("span", { className: css$1a.header }, props.caption)));
+}
+function DropdownSubMenu(props) {
+    const subMenuMiddleware = [
+        offset(({ placement }) => {
+            if (placement === 'right-start'
+                || placement === 'left-start') {
+                return { crossAxis: -6, mainAxis: 0 };
+            }
+            else {
+                return { crossAxis: 6, mainAxis: 0 };
+            }
+        }),
+    ];
+    const isRtl = getDir() === 'rtl';
+    return (React__default.createElement(Dropdown$1, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: isRtl ? 'left-start' : 'right-start', middleware: subMenuMiddleware, renderBody: (dropdownProps) => !props.isDisabled && (React__default.createElement(DropdownMenuBody, { closeOnKey: IDropdownControlKeys.LEFT_ARROW, ...props, ...dropdownProps })), renderTarget: ({ toggleDropdownOpening, ...targetProps }) => (React__default.createElement(DropdownMenuButton, { cx: cx$1(isRtl ? css$1a.submenuRootItemRtl : css$1a.submenuRootItem), icon: settings.dropdownMenu.icons.dropdownIcon, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening, ...props, ...targetProps })) }));
+}
+function DropdownMenuSwitchButton(props) {
+    const context = useContext(UuiContext);
+    const { icon, caption, isDisabled, isSelected, onValueChange, } = props;
+    const onHandleValueChange = (value) => {
+        if (isDisabled || !onValueChange)
+            return;
+        onValueChange(value);
+        context.uuiAnalytics.sendEvent(props.clickAnalyticsEvent);
+    };
+    const handleKeySelect = (e) => {
+        if (e.key === IDropdownControlKeys.ENTER) {
+            onHandleValueChange(!isSelected);
+        }
+    };
+    return (React__default.createElement("div", { className: cx$1(props.cx, css$1a.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$1a.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$19 = {"root":"CCc9gw","mode-block":"Bkcc-G","modeBlock":"Bkcc-G","mode-inline":"Jtl12P","modeInline":"Jtl12P","padding-0":"zSG8Il","padding0":"zSG8Il","padding-6":"_2d1u8h","padding6":"_2d1u8h","padding-12":"neXdbO","padding12":"neXdbO","padding-18":"Tn-3Zn","padding18":"Tn-3Zn"};
+
+function applyAccordionMods(mods) {
+    return [
+        css$19.root,
+        css$19[`mode-${mods.mode || 'block'}`],
+        mods.padding && css$19['padding-' + mods.padding],
+    ];
+}
+const Accordion = /* @__PURE__ */withMods(uuiComponents.Accordion, applyAccordionMods, (mods) => ({
+    dropdownIcon: mods.dropdownIcon !== null && settings.accordion.icons.dropdownIcon,
+}));
+
+var css$18 = {"root":"cRWxDA","align-items":"IvAmIC","alignItems":"IvAmIC","justify-content":"kMSo7G","justifyContent":"kMSo7G","border-top":"_26cBkD","borderTop":"_26cBkD","border-bottom":"Li5WNL","borderBottom":"Li5WNL","top-shadow":"sySsda","topShadow":"sySsda","padding":"O-dMSH","margin":"P9winJ","vPadding":"NKEcmF","column-gap":"NHY-ph","columnGap":"NHY-ph","row-gap":"C-prDe","rowGap":"C-prDe","spacing":"DBMTTU"};
+
+const FlexCell = /* @__PURE__ */withMods(FlexCell$1, () => [css$18.flexCell]);
+
+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.');
+        }
+    }
+    const classNames = cx$1([
+        css$18.root,
+        'uui-flex-row',
+        props.onClick && uuiMarkers.clickable,
+        props.cx,
+        props.size !== null && 'uui-size-' + (props.size || settings.flexRow.sizes.default),
+        props.alignItems && css$18.alignItems,
+        props.justifyContent && css$18.justifyContent,
+        props.padding && css$18.padding,
+        props.vPadding && css$18.vPadding,
+        props.margin && css$18.margin,
+        props.topShadow && css$18.topShadow,
+        props.borderBottom && css$18.borderBottom,
+        props.borderTop && css$18.borderTop,
+        props.columnGap && css$18.columnGap,
+        props.rowGap && css$18.rowGap,
+        props.spacing && css$18.spacing,
+        props.background && `uui-flex-row-bg-${props.background}`,
+    ]);
+    let alignItemsValue = props.alignItems;
+    if (alignItemsValue === 'top') {
+        alignItemsValue = 'flex-start';
+    }
+    else if (alignItemsValue === 'bottom') {
+        alignItemsValue = 'flex-end';
+    }
+    const style = {
+        ...(props.alignItems && { '--uui-flex-row-align-items': alignItemsValue }),
+        ...(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$17 = {"root":"QDCD1o","margin-24":"SCtP5-","margin24":"SCtP5-","padding-12":"JxH4qP","padding12":"JxH4qP","padding-24":"O7dv0D","padding24":"O7dv0D","shadow":"VWQI14","uui-surface-main":"-ZVzRB","uuiSurfaceMain":"-ZVzRB"};
+
+const Panel = /* @__PURE__ */withMods(VPanel, (props) => [
+    'uui-panel',
+    css$17.root,
+    props.shadow && css$17.shadow,
+    props.margin && css$17['margin-' + props.margin],
+    props.background && css$17[`uui-${props.background}`],
+]);
+
+var css$16 = {"root":"wDmY08"};
+
+function applyLabeledInputMods(mods) {
+    return [
+        'uui-labeled-input',
+        css$16.root,
+        'uui-size-' + (mods.size || settings.labeledInput.sizes.default),
+    ];
+}
+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$15 = {"root":"niE-g9"};
+
+function RadioGroup(props) {
+    const direction = props.direction || 'vertical';
+    const handleChange = (newVal) => {
+        if (newVal !== props.value) {
+            props.onValueChange(newVal);
+        }
+    };
+    return (React.createElement("fieldset", { ref: props.forwardedRef, className: cx$1(css$15.root, directionMode[direction], props.cx), onFocus: props.onFocus, onBlur: props.onBlur, ...props.rawProps }, props.items.map((i) => {
         const { id, name, renderName, ...restItemProps } = i;
         return (React.createElement(RadioInput, { name: props.name, renderLabel: i.renderName ? i.renderName : () => i.name, value: props.value === i.id, onValueChange: () => handleChange(i.id), isDisabled: props.isDisabled || i.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, isRequired: props.isRequired, key: i.id.toString(), size: props.size || i.size, ...restItemProps }));
     })));
 }
 
-var css$1a = {"root":"UaaPoP"};
+var css$14 = {"root":"ntqwkx"};
 
 function applyScrollBarsMods() {
     return [
-        css$1a.root, 'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
+        css$14.root, 'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
     ];
 }
 const ScrollBars = /* @__PURE__ */withMods(ScrollBars$1, applyScrollBarsMods);
 
-var css$19 = {"scroll-container":"LzM8T6","scrollContainer":"LzM8T6","list-container":"ZRnD3s","listContainer":"ZRnD3s"};
+var css$13 = {"scroll-container":"_-9Y7E0","scrollContainer":"_-9Y7E0","list-container":"fy0GML","listContainer":"fy0GML"};
 
-var css$18 = {"root":"jcg1R1"};
+var css$12 = {"root":"_1FYUlF"};
 
-const Blocker = /* @__PURE__ */withMods(Blocker$1, () => [css$18.root], () => ({ renderSpinner: settings.blocker.renderSpinner }));
+const Blocker = /* @__PURE__ */withMods(Blocker$1, () => [css$12.root], () => ({ renderSpinner: settings.blocker.renderSpinner }));
 
-function VirtualList(props) {
+const VirtualList = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef, } = useVirtualList({
         value: props.value,
         onValueChange: props.onValueChange,
@@ -1893,11 +2262,11 @@ function VirtualList(props) {
         rowsCount: props.rowsCount,
         rowsSelector: props.rowsSelector,
     });
-    React.useImperativeHandle(props.ref, () => scrollContainerRef.current, [scrollContainerRef.current]);
+    React.useImperativeHandle(ref, () => scrollContainerRef.current, [scrollContainerRef.current]);
     const scrollShadows = useScrollShadows({ root: scrollContainerRef.current });
     const renderRows = () => props.renderRows?.({
         listContainerRef, estimatedHeight, offsetY, scrollShadows,
-    }) || (React.createElement("div", { className: css$19.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+    }) || (React.createElement("div", { className: css$13.listContainer, style: { minHeight: `${estimatedHeight}px` } },
         React.createElement("div", { ref: listContainerRef, role: props.role, style: { marginTop: offsetY } }, props.rows)));
     const renderView = ({ style }) => (React.createElement(VirtualListView, { isLoading: props.isLoading, style: style, rawProps: props.rawProps }));
     const scrollBarsRef = React.useCallback((scrollbars) => {
@@ -1905,14 +2274,14 @@ function VirtualList(props) {
             return;
         scrollContainerRef.current = scrollbars.container.firstChild;
     }, []);
-    return (React.createElement(ScrollBars, { cx: cx$1(css$19.scrollContainer, props.cx, {
+    return (React.createElement(ScrollBars, { cx: cx$1(css$13.scrollContainer, props.cx, {
             [uuiMarkers.scrolledLeft]: scrollShadows.horizontalLeft,
             [uuiMarkers.scrolledRight]: scrollShadows.horizontalRight,
             [uuiMarkers.scrolledTop]: scrollShadows.verticalTop,
             [uuiMarkers.scrolledBottom]: scrollShadows.verticalBottom,
         }), onScroll: handleScroll, renderView: renderView, ref: scrollBarsRef }, renderRows()));
-}
-function VirtualListView(props) {
+});
+const VirtualListView = /* @__PURE__ */React.forwardRef((props, ref) => {
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { ...props.rawProps, style: {
                 ...props.style,
@@ -1923,11 +2292,11 @@ function VirtualListView(props) {
                 overflow: props.isLoading ? 'hidden' : 'scroll',
                 marginRight: props.isLoading ? 0 : props.style.marginRight,
                 marginBottom: props.isLoading ? 0 : props.style.marginBottom,
-            }, ref: props.ref }, props.children),
+            }, ref: ref }, props.children),
         React.createElement(Blocker, { isEnabled: props.isLoading })));
-}
+});
 
-var css$17 = {"root":"T6bYm3"};
+var css$11 = {"root":"j-cpN0"};
 
 function CheckboxGroup(props) {
     const currentValue = props.value || [];
@@ -1943,16 +2312,16 @@ function CheckboxGroup(props) {
         }
         props.onValueChange(newSelection);
     };
-    return (React.createElement("fieldset", { ref: props.forwardedRef, className: cx$1(css$17.root, directionMode[direction], props.cx), ...props.rawProps }, props.items.map((i) => {
+    return (React.createElement("fieldset", { ref: props.forwardedRef, className: cx$1(css$11.root, directionMode[direction], props.cx), ...props.rawProps }, props.items.map((i) => {
         const { id, name, renderName, ...restItemProps } = i;
         return (React.createElement(Checkbox, { renderLabel: i.renderName ? i.renderName : () => i.name, value: currentValue.indexOf(i.id) !== -1, onValueChange: (selected) => handleChange(selected, i.id), isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, isRequired: props.isRequired, key: i.id.toString(), size: props.size || i.size, ...restItemProps }));
     })));
 }
 
-var css$16 = {"root":"govZ0Y","modal-blocker":"_7L-kVC","modalBlocker":"_7L-kVC","animateModalBlocker":"_7zwcdi","modal":"UF3K9n","modal-footer":"beIP1q","modalFooter":"beIP1q","border-top":"HUHuXb","borderTop":"HUHuXb","modal-header":"ZtqOy8","modalHeader":"ZtqOy8","border-bottom":"_04jo5Z","borderBottom":"_04jo5Z"};
+var css$10 = {"root":"i8gqnK","modal-blocker":"Jcpes1","modalBlocker":"Jcpes1","animateModalBlocker":"F0WKM3","modal":"o1Glc3","modal-footer":"_7XJSuQ","modalFooter":"_7XJSuQ","border-top":"Dc9N9a","borderTop":"Dc9N9a","modal-header":"lcl6hl","modalHeader":"lcl6hl","border-bottom":"Z89dC1","borderBottom":"Z89dC1"};
 
-const ModalBlocker = /* @__PURE__ */withMods(ModalBlocker$1, () => [css$16.modalBlocker]);
-const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$16.root, css$16.modal], (props) => {
+const ModalBlocker = /* @__PURE__ */withMods(ModalBlocker$1, () => [css$10.modalBlocker]);
+const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$10.root, css$10.modal], (props) => {
     const width = props.width;
     const height = props.height || 'auto';
     const maxHeight = isMobile() ? 'var(--uui-modals-mobile-max-height)' : (props.maxHeight || 'var(--uui-modals-max-height)');
@@ -1966,7 +2335,7 @@ const ModalWindow = /* @__PURE__ */withMods(ModalWindow$1, () => [css$16.root, c
     };
 });
 function ModalHeader(props) {
-    return (React__default.createElement("div", { className: cx(css$16.root, css$16.modalHeader, 'uui-modal-header', props.borderBottom && css$16.borderBottom, props.cx), ...props.rawProps, style: {
+    return (React__default.createElement("div", { className: cx(css$10.root, css$10.modalHeader, 'uui-modal-header', props.borderBottom && css$10.borderBottom, props.cx), ...props.rawProps, style: {
             ...props.rawProps?.style,
         } },
         props.title && (React__default.createElement("div", { className: cx('uui-modal-title', 'uui-typography') }, props.title)),
@@ -1976,7 +2345,7 @@ function ModalHeader(props) {
             React__default.createElement(IconButton, { rawProps: { 'aria-label': 'Close modal' }, icon: settings.modal.icons.closeIcon, onClick: props.onClose })))));
 }
 function ModalFooter(props) {
-    return (React__default.createElement("div", { className: cx(css$16.root, css$16.modalFooter, 'uui-modal-footer', props.borderTop && css$16.borderTop, props.cx), ...props.rawProps, style: {
+    return (React__default.createElement("div", { className: cx(css$10.root, css$10.modalFooter, 'uui-modal-footer', props.borderTop && css$10.borderTop, props.cx), ...props.rawProps, style: {
             ...props.rawProps?.style,
         } }, props.children));
 }
@@ -2019,8 +2388,8 @@ const TREE_SHAKEABLE_INIT = () => ({
         },
     },
     rangeDatePicker: {
-        pickerPlaceholderFrom: 'From:',
-        pickerPlaceholderTo: 'To:',
+        pickerPlaceholderFrom: 'From',
+        pickerPlaceholderTo: 'To',
     },
     tables: {
         noResultsBlock: {
@@ -2110,342 +2479,111 @@ const TREE_SHAKEABLE_INIT = () => ({
             serviceUnavailable: {
                 title: 'The page request was canceled, because it took too long to complete',
                 subtitle: 'Sorry for the inconvenience, we’ll get it fixed.',
-            },
-            default: {
-                title: 'Something went wrong',
-                subtitle: 'Sorry for the inconvenience, we’ll get it fixed.',
-            },
-        },
-        recoveryMessageConfig: {
-            'auth-lost': {
-                title: 'Your session has expired.',
-                subtitle: 'Attempting to log you in.',
-            },
-            'connection-lost': {
-                title: 'Network connection down',
-                subtitle: 'Please check your network connection.',
-            },
-            maintenance: {
-                title: 'Server maintenance',
-                subtitle: 'We apologize for the inconvenience. Our site is currently under maintenance. Will come back as soon as possible.',
-            },
-            'server-overload': {
-                title: 'Server overloaded',
-                subtitle: 'We are trying to recover. Please wait.',
-            },
-        },
-        supportMessage: undefined,
-    },
-});
-const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
-
-var css$15 = {"root":"LWd33D","icon-wrapper":"_7410h6","iconWrapper":"_7410h6","action-wrapper":"KePmij","actionWrapper":"KePmij","action-link":"kSCKcP","actionLink":"kSCKcP","close-icon":"_81pEY-","closeIcon":"_81pEY-","main-path":"m7cPrZ","mainPath":"m7cPrZ","content":"R3Yufl","close-wrapper":"_2GVdxe","closeWrapper":"_2GVdxe","notification-wrapper":"Dkus1N","notificationWrapper":"Dkus1N","clear-button":"T73uyD","clearButton":"T73uyD"};
-
-function NotificationCard(props) {
-    const notificationCardNode = React__default.useRef(null);
-    React__default.useImperativeHandle(props.ref, () => notificationCardNode.current, [notificationCardNode.current]);
-    React__default.useLayoutEffect(() => {
-        notificationCardNode.current?.addEventListener('mouseenter', props.clearTimer);
-        notificationCardNode.current?.addEventListener('mouseleave', props.refreshTimer);
-        return () => {
-            notificationCardNode.current?.removeEventListener('mouseenter', props.clearTimer);
-            notificationCardNode.current?.removeEventListener('mouseleave', props.refreshTimer);
-        };
-    }, []);
-    return (React__default.createElement("div", { role: "alert", className: cx('uui-notification_card', props.color && `uui-color-${props.color}`, css$15.root, props.cx), ref: notificationCardNode, ...props.rawProps },
-        React__default.createElement("div", { className: css$15.mainPath },
-            props.icon && (React__default.createElement("div", { className: css$15.iconWrapper },
-                React__default.createElement(IconContainer, { size: 24, icon: props.icon }))),
-            React__default.createElement("div", { className: css$15.content },
-                props.children,
-                props.actions && (React__default.createElement("div", { className: css$15.actionWrapper }, props.actions.map((action) => (React__default.createElement(LinkButton, { key: action.name, caption: action.name, onClick: action.action, cx: css$15.actionLink, size: settings.notificationCard.sizes.action, rawProps: action.rawProps })))))),
-            props.onClose && (React__default.createElement("div", { className: css$15.closeWrapper },
-                React__default.createElement(IconButton, { icon: settings.notificationCard.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$15.closeIcon }))))));
-}
-function WarningNotification(props) {
-    return React__default.createElement(NotificationCard, { icon: settings.notificationCard.icons.warningIcon, color: "warning", ...props });
-}
-function SuccessNotification(props) {
-    return React__default.createElement(NotificationCard, { icon: settings.notificationCard.icons.successIcon, color: "success", ...props });
-}
-function HintNotification(props) {
-    return React__default.createElement(NotificationCard, { icon: settings.notificationCard.icons.hintIcon, color: "info", ...props });
-}
-function ErrorNotification(props) {
-    return React__default.createElement(NotificationCard, { icon: settings.notificationCard.icons.errorIcon, color: "error", ...props });
-}
-function ClearNotification() {
-    const uuiCtx = useUuiContext();
-    return (React__default.createElement("div", { className: cx(css$15.notificationWrapper, css$15.clearButton) },
-        React__default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
-}
-
-var css$14 = {"footer":"HBtgYa"};
-
-class ConfirmationModal extends React.Component {
-    render() {
-        let bodyContent;
-        if (this.props.bodyContent) {
-            bodyContent = React.createElement(Panel, { background: "surface-main", margin: "24" }, this.props.bodyContent);
-        }
-        return (React.createElement(ModalBlocker, { ...this.props },
-            React.createElement(ModalWindow, { width: 420 },
-                React.createElement(ModalHeader, { borderBottom: true, title: this.props.caption, onClose: () => this.props.abort() }),
-                React.createElement(ScrollBars, null, bodyContent),
-                React.createElement(ModalFooter, { cx: css$14.footer },
-                    this.props.hideCancelButton || (React.createElement(Button, { caption: i18n.form.modals.discardButton, onClick: () => this.props.success(false), fill: "outline", color: "secondary" })),
-                    React.createElement(Button, { caption: i18n.form.modals.saveButton, onClick: () => this.props.success(true), color: "primary" })))));
-    }
-}
-
-function Snackbar(props) {
-    const uuiCtx = useUuiContext();
-    const forceUpdate = useReliableForceUpdate();
-    useEffect(() => uuiCtx.uuiNotifications.subscribe(() => forceUpdate()), []);
-    let items = uuiCtx.uuiNotifications.getNotifications().slice().reverse();
-    // add button for clear notification list
-    if (items.length > 1) {
-        const clearOperation = {
-            component: ClearNotification,
-            props: { id: 111555, key: 'clearNotification' },
-            config: { position: items[0].config.position, duration: 'forever' },
-        };
-        items = [clearOperation].concat(items);
-    }
-    return React.createElement(Snackbar$1, { forwardedRef: props.forwardedRef, notifications: items });
-}
-/**
- *  https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
- */
-function useReliableForceUpdate() {
-    const red = useReducer((x) => x + 1, 0);
-    return red[1];
-}
-
-var css$13 = {"root":"RBLD5u","timepicker-input":"_5umJxG","timepickerInput":"_5umJxG","ltr-always":"D1xa9a","ltrAlways":"D1xa9a"};
-
-const uuiTimePicker = {
-    container: 'uui-timepicker-container',
-    iconUp: 'uui-timepicker-icon-up',
-    iconDown: 'uui-timepicker-icon-down',
-    input: 'uui-timepicker-input',
-    elementContainer: 'uui-timepicker-item',
-};
-const MIN_MINUTES = 0;
-const MAX_MINUTES = 59;
-const FORMAT_12H = 12;
-function TimePickerBody(props) {
-    const MIN_HOURS = props.format === FORMAT_12H ? 1 : 0;
-    const MAX_HOURS = props.format || FORMAT_12H;
-    const setValue = (newTime) => {
-        props.onValueChange({ hours: newTime.hour(), minutes: newTime.minute() });
-    };
-    const onHoursChange = (newHours) => {
-        setValue(uuiDayjs.dayjs().set(props.value).hour(newHours));
-    };
-    const onMinutesChange = (newMinutes) => {
-        setValue(uuiDayjs.dayjs().set(props.value).minute(newMinutes));
-    };
-    const onTimeTypeChange = () => {
-        setValue(uuiDayjs.dayjs().set(props.value).add(12, 'h'));
-    };
-    const handleMinutesUpClick = () => {
-        const minutesStep = props.minutesStep || 5;
-        const value = uuiDayjs.dayjs().set(props.value);
-        const minutesToAdd = minutesStep - (value.minute() % minutesStep);
-        onMinutesChange(value.add(minutesToAdd, 'm').minute());
-    };
-    const handleMinutesDownClick = () => {
-        const minutesStep = props.minutesStep || 5;
-        const value = uuiDayjs.dayjs().set(props.value);
-        const minutesToSubtract = value.minute() % minutesStep === 0 ? minutesStep : value.minute() % minutesStep;
-        onMinutesChange(value.subtract(minutesToSubtract, 'm').minute());
-    };
-    return (React.createElement("div", { className: cx$1(css$13.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef, ...props.rawProps },
-        React.createElement("div", { className: css$13.ltrAlways },
-            React.createElement("div", { className: uuiTimePicker.elementContainer },
-                React.createElement(IconContainer, { size: 18, rawProps: { 'aria-label': 'Increment hours' }, cx: uuiTimePicker.iconUp, icon: ForwardRef$Q, onClick: () => onHoursChange(uuiDayjs.dayjs().set(props.value).add(1, 'h').hour()) }),
-                React.createElement(NumericInput$1, { cx: uuiTimePicker.input, onValueChange: onHoursChange, value: +(uuiDayjs.dayjs()
-                        .set(props.value)
-                        .format(MAX_HOURS === FORMAT_12H ? 'hh' : 'HH')), min: MIN_HOURS, max: MAX_HOURS }),
-                React.createElement(IconContainer, { size: 18, rawProps: { 'aria-label': 'Decrement hours' }, cx: uuiTimePicker.iconDown, icon: ForwardRef$Q, onClick: () => onHoursChange(uuiDayjs.dayjs().set(props.value).subtract(1, 'h').hour()) })),
-            React.createElement("div", { className: uuiTimePicker.elementContainer },
-                React.createElement(IconContainer, { size: 18, rawProps: { 'aria-label': 'Increment minutes' }, cx: uuiTimePicker.iconUp, icon: ForwardRef$Q, onClick: handleMinutesUpClick }),
-                React.createElement(NumericInput$1, { cx: uuiTimePicker.input, onValueChange: onMinutesChange, value: +uuiDayjs.dayjs().set(props.value).format('m'), min: MIN_MINUTES, max: MAX_MINUTES }),
-                React.createElement(IconContainer, { size: 18, rawProps: { 'aria-label': 'Decrement minutes' }, cx: uuiTimePicker.iconDown, icon: ForwardRef$Q, onClick: handleMinutesDownClick }))),
-        MAX_HOURS === FORMAT_12H && (React.createElement("div", { className: uuiTimePicker.elementContainer },
-            React.createElement(IconContainer, { size: 18, cx: uuiTimePicker.iconUp, icon: ForwardRef$Q, onClick: onTimeTypeChange }),
-            React.createElement(TextInput$1, { cx: uuiTimePicker.input, onValueChange: () => {
-                }, isReadonly: true, value: uuiDayjs.dayjs().set(props.value).format('A') }),
-            React.createElement(IconContainer, { size: 18, cx: uuiTimePicker.iconDown, icon: ForwardRef$Q, onClick: onTimeTypeChange })))));
-}
-
-const getMeridian = (newValue, format) => {
-    if (format === 'hh:mm A') {
-        if (newValue.toLowerCase().includes('p') && newValue.toLowerCase().includes('a')) {
-            return newValue.toLowerCase().indexOf('p') < newValue.toLowerCase().indexOf('a') ? 'PM' : 'AM';
-        }
-        return newValue.toLowerCase().includes('p') ? 'PM' : 'AM';
-    }
-    return false;
-};
-const parseTimeNumbers = (value, separator) => {
-    let hours, minutes;
-    const timeNumbers = value.replace(/\D/gi, '');
-    switch (separator) {
-        case 0:
-            hours = 0;
-            minutes = parseInt(timeNumbers.trim().slice(0, 2));
-            break;
-        case 1:
-            hours = parseInt(timeNumbers.slice(0, 1));
-            minutes = parseInt(timeNumbers.slice(1, 3));
-            break;
-        default:
-            hours = parseInt(timeNumbers.slice(0, 2));
-            minutes = parseInt(timeNumbers.slice(2, 4));
-    }
-    return { hours, minutes };
-};
-const formatTime = (hours, minutes, meridian, format) => {
-    const normalizeHours = (h) => Number.isNaN(h) ? '00' : h.toString().padStart(2, '0');
-    const normalizeMinutes = (m) => Number.isNaN(m) ? '00' : m.toString().padStart(2, '0');
-    if (meridian && normalizeHours(hours) === '00' && normalizeMinutes(minutes) === '00') {
-        return '';
-    }
-    let hoursResult = Number.parseInt(normalizeHours(hours));
-    let meridianResult = meridian;
-    if ((format === 'hh:mm A') && hoursResult > 12) {
-        hoursResult -= 12;
-        meridianResult = 'PM';
-    }
-    if ((format === 'hh:mm A') && hoursResult === 0) {
-        hoursResult = 12;
-    }
-    const time = `${normalizeHours(hoursResult)}:${normalizeMinutes(minutes)}`;
-    return meridianResult ? time.concat(` ${meridianResult}`) : time;
-};
-
-const DEFAULT_MODE = EditMode.FORM;
-const valueToTimeString = (value, format) => {
-    if (value === null)
-        return null;
-    return uuiDayjs.dayjs()
-        .set(value)
-        .format(format === 24 ? 'HH:mm' : 'hh:mm A');
-};
-function TimePicker(props) {
-    const [state, setState] = useState({
-        isOpen: false,
-        value: valueToTimeString(props.value, props.format),
-        inputValue: valueToTimeString(props.value, props.format),
-    });
-    useEffect(() => {
-        if (valueToTimeString(props.value, props.format) !== state.value) {
-            const stringValue = valueToTimeString(props.value, props.format);
-            setState((prevState) => ({
-                ...prevState,
-                value: stringValue,
-                inputValue: stringValue,
-            }));
-        }
-    }, [props.value, props.format]);
-    const getFormat = () => props.format === 24 ? 'HH:mm' : 'hh:mm A';
-    const isTimeValid = (newValue) => uuiDayjs.dayjs(newValue, getFormat(), true).isValid();
-    const formatStringTimeToObject = (stringTime) => {
-        if (stringTime) {
-            const value = uuiDayjs.dayjs(stringTime, getFormat(), true);
-            return { hours: value.hour(), minutes: value.minute() };
-        }
-        return { hours: null, minutes: null };
-    };
-    const onClear = () => {
-        props.onValueChange(null);
-    };
-    const onToggle = (value) => {
-        setState((prevState) => ({ ...prevState, isOpen: value }));
-    };
-    const saveTime = (newTime) => {
-        setState((prevState) => ({ ...prevState, inputValue: newTime }));
-        props.onValueChange(formatStringTimeToObject(newTime));
-    };
-    const getTimeFromInputValue = (newValue) => {
-        const trimmedNewValue = newValue.trimStart();
-        const separator = trimmedNewValue.search(/\D/);
-        const meridian = getMeridian(trimmedNewValue, getFormat());
-        const { hours, minutes } = parseTimeNumbers(trimmedNewValue, separator);
-        return formatTime(hours, minutes, meridian, getFormat());
-    };
-    const handleBodyValueChange = (newValue) => {
-        const inputValue = valueToTimeString(newValue, props.format);
-        saveTime(inputValue);
-    };
-    const handleFocus = (e) => {
-        onToggle(true);
-        props.onFocus?.(e);
-    };
-    const handleInputChange = (newValue) => {
-        setState((prevState) => ({ ...prevState, inputValue: newValue }));
-        if (newValue) {
-            const result = getTimeFromInputValue(newValue);
-            if (isTimeValid(result)) {
-                setState((prevState) => ({ ...prevState, value: result }));
-            }
-        }
-    };
-    const handleBlur = (e) => {
-        if (isFocusReceiverInsideFocusLock(e))
-            return;
-        onToggle(false);
-        props.onBlur?.(e);
-        if (state.value === '' || state.inputValue === '') {
-            props.onValueChange(null);
-            setState((prevState) => ({ ...prevState, value: null, inputValue: null }));
-        }
-        state.value && state.inputValue && saveTime(state.value);
-    };
-    const renderInput = (inputProps) => {
-        return (React__default.createElement(TextInput, { ...inputProps, onClick: null, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$13.root, css$13.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;
-        return (!props.isDisabled && !props.isReadonly && (React__default.createElement(DropdownContainer, { ...bodyProps, focusLock: false },
-            React__default.createElement(TimePickerBody, { ...timePickerBodyProps, onValueChange: handleBodyValueChange, value: formatStringTimeToObject(state.value), rawProps: props.rawProps?.body, cx: props.bodyCx }))));
-    };
-    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 }));
-}
+            },
+            default: {
+                title: 'Something went wrong',
+                subtitle: 'Sorry for the inconvenience, we’ll get it fixed.',
+            },
+        },
+        recoveryMessageConfig: {
+            'auth-lost': {
+                title: 'Your session has expired.',
+                subtitle: 'Attempting to log you in.',
+            },
+            'connection-lost': {
+                title: 'Network connection down',
+                subtitle: 'Please check your network connection.',
+            },
+            maintenance: {
+                title: 'Server maintenance',
+                subtitle: 'We apologize for the inconvenience. Our site is currently under maintenance. Will come back as soon as possible.',
+            },
+            'server-overload': {
+                title: 'Server overloaded',
+                subtitle: 'We are trying to recover. Please wait.',
+            },
+        },
+        supportMessage: undefined,
+    },
+});
+const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
 
-var css$12 = {"root":"X0Y92Q"};
+var css$$ = {"root":"fSxkn0","icon-wrapper":"UenU7z","iconWrapper":"UenU7z","action-wrapper":"EHEDgo","actionWrapper":"EHEDgo","close-icon":"c-aiaH","closeIcon":"c-aiaH","main-path":"F-S0NE","mainPath":"F-S0NE","content":"VMj878","close-wrapper":"-xR7xI","closeWrapper":"-xR7xI","clear-notifications":"u2DFRz","clearNotifications":"u2DFRz"};
 
-function applyInputAddonMods() {
-    return [
-        css$12.root,
-    ];
+const NotificationCard = /* @__PURE__ */React__default.forwardRef((props, ref) => {
+    const notificationCardNode = React__default.useRef(null);
+    React__default.useImperativeHandle(ref, () => notificationCardNode.current, [notificationCardNode.current]);
+    React__default.useLayoutEffect(() => {
+        notificationCardNode.current?.addEventListener('mouseenter', props.clearTimer);
+        notificationCardNode.current?.addEventListener('mouseleave', props.refreshTimer);
+        return () => {
+            notificationCardNode.current?.removeEventListener('mouseenter', props.clearTimer);
+            notificationCardNode.current?.removeEventListener('mouseleave', props.refreshTimer);
+        };
+    }, []);
+    return (React__default.createElement("div", { role: "alert", className: cx('uui-notification_card', props.color && `uui-color-${props.color}`, css$$.root, props.cx), ref: notificationCardNode, ...props.rawProps },
+        React__default.createElement("div", { className: css$$.mainPath },
+            props.icon && (React__default.createElement("div", { className: css$$.iconWrapper },
+                React__default.createElement(IconContainer, { size: settings.notificationCard.sizes.icon, icon: props.icon }))),
+            React__default.createElement("div", { className: css$$.content },
+                props.children,
+                props.actions && (React__default.createElement("div", { className: css$$.actionWrapper }, props.actions.map((action) => (React__default.createElement(LinkButton, { key: action.name, caption: action.name, onClick: action.action, cx: css$$.actionLink, size: settings.notificationCard.sizes.action, rawProps: action.rawProps })))))),
+            props.onClose && (React__default.createElement("div", { className: cx(css$$.closeWrapper, 'uui-notification_card-close_icon') },
+                React__default.createElement(IconButton, { icon: settings.notificationCard.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$$.closeIcon }))))));
+});
+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$$.clearNotifications, 'uui-clear-notifications') },
+        React__default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
 }
-const InputAddon = /* @__PURE__ */withMods(InputAddon$1, applyInputAddonMods);
 
-var css$11 = {"root":"iD57sF"};
+var css$_ = {"footer":"gCFkrn"};
 
-function applySliderMods() {
-    return [css$11.root, 'uui-color-neutral'];
+class ConfirmationModal extends React.Component {
+    render() {
+        let bodyContent;
+        if (this.props.bodyContent) {
+            bodyContent = React.createElement(Panel, { background: "surface-main", margin: "24" }, this.props.bodyContent);
+        }
+        return (React.createElement(ModalBlocker, { ...this.props },
+            React.createElement(ModalWindow, { width: 420 },
+                React.createElement(ModalHeader, { borderBottom: true, title: this.props.caption, onClose: () => this.props.abort() }),
+                React.createElement(ScrollBars, null, bodyContent),
+                React.createElement(ModalFooter, { cx: css$_.footer },
+                    this.props.hideCancelButton || (React.createElement(Button, { caption: i18n.form.modals.discardButton, onClick: () => this.props.success(false), fill: "outline", color: "secondary" })),
+                    React.createElement(Button, { caption: i18n.form.modals.saveButton, onClick: () => this.props.success(true), color: "primary" })))));
+    }
 }
-const Slider = /* @__PURE__ */withMods(Slider$1, applySliderMods);
-
-var css$10 = {"root":"hTytAz","tooltip":"_18y6p7"};
 
-function applyRatingMods(mods) {
-    return [
-        css$10.root,
-        `uui-size-${mods.size || settings.rating.sizes.default}`,
-    ];
+function Snackbar(props) {
+    const uuiCtx = useUuiContext();
+    const forceUpdate = useReliableForceUpdate();
+    useEffect(() => uuiCtx.uuiNotifications.subscribe(() => forceUpdate()), []);
+    let items = uuiCtx.uuiNotifications.getNotifications().slice().reverse();
+    // add button for clear notification list
+    if (items.length > 1) {
+        const clearOperation = {
+            component: ClearNotification,
+            props: { id: 111555, key: 'clearNotification' },
+            config: { position: items[0].config.position, duration: 'forever' },
+        };
+        items = [clearOperation].concat(items);
+    }
+    return React.createElement(Snackbar$1, { forwardedRef: props.forwardedRef, notifications: items });
+}
+/**
+ *  https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
+ */
+function useReliableForceUpdate() {
+    const red = useReducer((x) => x + 1, 0);
+    return red[1];
 }
-const Rating = /* @__PURE__ */withMods(uuiComponents.Rating, applyRatingMods, (props) => ({
-    filledStarIcon: props.icon || settings.rating.icons.filledRatingIcon,
-    emptyStarIcon: props.icon || settings.rating.icons.emptyRatingIcon,
-    Tooltip,
-}));
 
-var css$$ = {"root":"vbRqtV","container":"w4sipE"};
+var css$Z = {"root":"X-RGW3","container":"_48v7X-"};
 
 const defaultFormat = 'MMM D, YYYY';
 const valueFormat = 'YYYY-MM-DD';
@@ -2478,7 +2616,7 @@ const getMonthOnOpen = (selectedDate, focus) => {
 };
 const isValidDate = (input, format, filter) => {
     const parsedDate = uuiDayjs.dayjs(input, supportedDateFormats(format), true);
-    return parsedDate.isValid() ?? filter?.(parsedDate) ?? true;
+    return filter ? parsedDate.isValid() && filter(parsedDate) : parsedDate.isValid();
 };
 const isValidRange = (range) => {
     const from = uuiDayjs.dayjs(range.from);
@@ -2649,26 +2787,27 @@ function DatePickerHeader({ navIconLeft, navIconRight, value: { month, view }, o
     }, [view, month]);
     const disablePrev = view === 'YEAR_SELECTION' && !isYearWithinSoberRange(getPrevYearsList(month));
     const disableNext = view === 'YEAR_SELECTION' && !isYearWithinSoberRange(getNextYearsList(month));
-    return (React.createElement("div", { className: cx(css$$.root, uuiHeader.container, cx) },
+    return (React.createElement("div", { className: cx(css$Z.root, uuiHeader.container, cx) },
         React.createElement("header", { className: uuiHeader.headerNav },
             React.createElement(Button, { icon: navIconLeft || settings.datePicker.icons.body.prevIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconLeft, onClick: !isDisabled && (() => onLeftNavigationArrow()), isDisabled: disablePrev }),
             React.createElement(Button, { caption: title, fill: "ghost", cx: uuiHeader.navTitle, onClick: !isDisabled && (() => onCaptionClick(view)) }),
             React.createElement(Button, { icon: navIconRight || settings.datePicker.icons.body.nextIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
 }
 
-var css$_ = {"root":"iNKa6n"};
+var css$Y = {"root":"_4IHPMT"};
 
 function applyDateSelectionMods() {
-    return [css$_.root, `uui-size-${settings.datePicker.sizes.body}`];
+    return [css$Y.root, `uui-size-${settings.datePicker.sizes.body}`];
 }
 const Calendar = /* @__PURE__ */withMods(Calendar$1, applyDateSelectionMods);
 
-var css$Z = {"root":"H4u7oB"};
+var css$X = {"root":"_23lowj"};
 
 const uuiDatePickerBody = {
     wrapper: 'uui-datepicker-body-wrapper',
 };
-function DatePickerBody(props) {
+const DatePickerBody = /* @__PURE__ */forwardRef(DatePickerBodyComp);
+function DatePickerBodyComp(props, ref) {
     const { value, onValueChange } = props;
     const [month, setMonth] = useState(getNewMonth(value));
     const [view, setView] = useState('DAY_SELECTION');
@@ -2677,10 +2816,11 @@ function DatePickerBody(props) {
         setMonth(getNewMonth(value));
         setView('DAY_SELECTION');
     }, [value, setMonth]);
-    return (React__default.createElement(StatelessDatePickerBody, { ref: props.ref, ...props, month: month, view: view, onValueChange: onValueChange, onMonthChange: (m) => setMonth(m), onViewChange: (v) => setView(v) }));
+    return (React__default.createElement(StatelessDatePickerBody, { ref: ref, ...props, month: month, view: view, onValueChange: onValueChange, onMonthChange: (m) => setMonth(m), onViewChange: (v) => setView(v) }));
 }
-function StatelessDatePickerBody({ renderDay, isHoliday, cx: classes, filter, rawProps, value, month, view, onValueChange, onMonthChange, onViewChange, isDisabled, ref, }) {
-    const selectedDate = uuiDayjs.dayjs(value);
+const StatelessDatePickerBody = /* @__PURE__ */forwardRef(StatelessDatePickerBodyComp);
+function StatelessDatePickerBodyComp({ renderDay, isHoliday, cx: classes, filter, rawProps, value, month, view, onValueChange, onMonthChange, onViewChange, isDisabled, }, ref) {
+    const selectedDate = useMemo(() => uuiDayjs.dayjs(value), [value]);
     const onMonthClick = (newDate) => {
         onMonthChange(newDate);
         onViewChange('DAY_SELECTION');
@@ -2705,7 +2845,7 @@ function StatelessDatePickerBody({ renderDay, isHoliday, cx: classes, filter, ra
         }
     };
     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$Z.root, uuiDatePickerBody.wrapper) },
+        React__default.createElement("div", { className: cx$1(css$X.root, uuiDatePickerBody.wrapper) },
             React__default.createElement(DatePickerHeader, { value: {
                     view,
                     month,
@@ -2717,11 +2857,7 @@ function StatelessDatePickerBody({ renderDay, isHoliday, cx: classes, filter, ra
 }
 
 const defaultMode$1 = EditMode.FORM;
-const modifiers$1 = [{
-        name: 'offset',
-        options: { offset: [0, 6] },
-    }];
-function DatePicker(props) {
+function DatePickerComponent(props, ref) {
     const { format = defaultFormat, value, size = settings.datePicker.sizes.input } = props;
     const context = useUuiContext();
     const [inputValue, setInputValue] = useState(toCustomDateFormat(value, format));
@@ -2772,23 +2908,22 @@ function DatePicker(props) {
                 props.onFocus?.(e);
             }, onKeyDown: onInputKeyDown, onBlur: onBlur, mode: props.mode || defaultMode$1, rawProps: props.rawProps?.input, id: props.id }));
     };
-    const renderBody = (renderProps) => {
+    const renderBody = useMemo(() => (renderProps) => {
         return (React__default.createElement(DropdownContainer, { ...renderProps },
             React__default.createElement(DatePickerBody, { value: value, onValueChange: onBodyValueChange, cx: cx$1(props.bodyCx), filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay, rawProps: props.rawProps?.body }),
             props.renderFooter?.()));
-    };
-    return (React__default.createElement(Dropdown$1, { value: isBodyOpen, modifiers: modifiers$1, placement: props.placement, forwardedRef: props.ref, onValueChange: (v) => {
+    }, [value, onBodyValueChange]);
+    return (React__default.createElement(Dropdown$1, { value: isBodyOpen, middleware: [offset(6)], placement: props.placement, ref: ref, onValueChange: (v) => {
             setBodyIsOpen(v);
         }, renderTarget: (renderProps) => {
             return props.renderTarget?.(renderProps) || renderInput(renderProps);
-        }, renderBody: (renderProps) => {
-            return renderBody(renderProps);
-        } }));
+        }, renderBody: renderBody }));
 }
+const DatePicker = /* @__PURE__ */React__default.forwardRef(DatePickerComponent);
 
-var css$Y = {"date-input":"rRLUZW","dateInput":"rRLUZW","root":"JlN6JB","separator":"EaO2hj","mode-form":"hUDPgy","modeForm":"hUDPgy","mode-cell":"oGnJKo","modeCell":"oGnJKo"};
+var css$W = {"date-input":"Q8q0Ss","dateInput":"Q8q0Ss","root":"mvH4f-","separator":"Uq3HWm"};
 
-function RangeDatePickerInput({ isDisabled, isInvalid, isReadonly, size, disableClear, rawProps, value, inFocus, format, onValueChange, onFocusInput, onBlurInput, onClick, getPlaceholder, filter, onKeyDown, id, cx: classes, ref, }) {
+const RangeDatePickerInput = /* @__PURE__ */forwardRef(({ isDisabled, isInvalid, isReadonly, size, disableClear, rawProps, value, inFocus, format, onValueChange, onFocusInput, onBlurInput, onClick, getPlaceholder, filter, onKeyDown, id, cx: classes, }, ref) => {
     const [inputValue, setInputValue] = useState(toCustomDateRangeFormat(value, format));
     useEffect(() => {
         setInputValue(toCustomDateRangeFormat(value, format));
@@ -2805,7 +2940,8 @@ function RangeDatePickerInput({ isDisabled, isInvalid, isReadonly, size, disable
     const handleBlur = (event, inputType) => {
         onBlurInput?.(event, inputType);
         const selectedDate = toValueDateRangeFormat(inputValue, format);
-        if (isValidRange(selectedDate) && (!filter || filter(uuiDayjs.dayjs(selectedDate[inputType])))) {
+        const isDateDisabled = filter?.(uuiDayjs.dayjs(selectedDate[inputType])) === false;
+        if (isValidRange(selectedDate) && !isDateDisabled) {
             setInputValue(toCustomDateRangeFormat(selectedDate, format));
             onValueChange(selectedDate);
         }
@@ -2829,15 +2965,15 @@ function RangeDatePickerInput({ isDisabled, isInvalid, isReadonly, size, disable
     const clearAllowed = !disableClear && inputValue.from && inputValue.to;
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    React__default.createElement("div", { ref: ref, className: cx$1(`uui-size-${size || settings.rangeDatePicker.sizes.default}`, 'uui-range-date-picker', classes, css$Y.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$Y.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$Y.separator }),
-        React__default.createElement(TextInput, { cx: cx$1(css$Y.dateInput, inFocus === 'to' && uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.rangeDatePicker.sizes.default, value: inputValue.to || undefined, onCancel: clearAllowed ? () => {
+    React__default.createElement("div", { ref: ref, className: cx$1(`uui-size-${size || settings.rangeDatePicker.sizes.default}`, 'uui-range-date-picker', classes, css$W.root, isDisabled && uuiMod.disabled, isReadonly && uuiMod.readonly, isInvalid && uuiMod.invalid, inFocus && uuiMod.focus), onKeyDown: onKeyDown },
+        React__default.createElement(TextInput, { icon: settings.rangeDatePicker.icons.input.calendarIcon, cx: cx$1(css$W.dateInput, inFocus === 'from' && uuiMod.focus), size: size || settings.rangeDatePicker.sizes.default, placeholder: getPlaceholder ? getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: inputValue.from || undefined, onValueChange: (v) => onInputChange(v || '', 'from'), onFocus: (event) => handleFocus(event, 'from'), onBlur: (event) => handleBlur(event, 'from'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.from, onClick: onClick, onKeyDown: onInputKeyDown, id: id }),
+        React__default.createElement("div", { className: css$W.separator }),
+        React__default.createElement(TextInput, { cx: cx$1(css$W.dateInput, inFocus === 'to' && uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.rangeDatePicker.sizes.default, value: inputValue.to || undefined, onCancel: clearAllowed ? () => {
                 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$X = {"root":"_1RkI1P"};
+var css$V = {"root":"GtXyEC"};
 
 const uuiPresets = {
     container: 'uui-presets-container',
@@ -2852,12 +2988,12 @@ const getPresets = (presets) => {
     })).sort((a, b) => a.order - b.order);
 };
 function CalendarPresets(props) {
-    return (React.createElement("div", { ref: props.forwardedRef, className: cx$1(uuiPresets.container, css$X.root, props.cx), ...props.rawProps },
+    return (React.createElement("div", { ref: props.forwardedRef, className: cx$1(uuiPresets.container, css$V.root, props.cx), ...props.rawProps },
         React.createElement("div", { className: uuiPresets.header }, "Presets"),
         getPresets(props.presets).map((item) => (React.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: settings.rangeDatePicker.sizes.preset })))));
 }
 
-var css$W = {"root":"umYbe9","container":"XTvLd-","day-selection":"EhEjtj","daySelection":"EhEjtj","from-picker":"qxRZ5N","fromPicker":"qxRZ5N","to-picker":"SZ9qjw","toPicker":"SZ9qjw","bodes-wrapper":"MIYcCT","bodesWrapper":"MIYcCT","blocker":"jSt6sC"};
+var css$U = {"root":"jZwb3R","container":"e1r54U","day-selection":"APIBxI","daySelection":"APIBxI","from-picker":"F8WuqH","fromPicker":"F8WuqH","to-picker":"lu3NDE","toPicker":"lu3NDE","bodes-wrapper":"_3aSDER","bodesWrapper":"_3aSDER","blocker":"mQ2qog"};
 
 const uuiRangeDatePickerBody = {
     inRange: 'uui-range-datepicker-in-range',
@@ -2931,7 +3067,8 @@ const rangeDatePickerPresets = {
         }),
     },
 };
-function RangeDatePickerBody(props) {
+const RangeDatePickerBody = /* @__PURE__ */forwardRef(RangeDatePickerBodyComp);
+function RangeDatePickerBodyComp(props, ref) {
     const { value: _value, filter } = props;
     const { selectedDate: _selectedDate, inFocus, } = _value;
     const selectedDate = _selectedDate || defaultRangeValue; // also handles null in comparison to default value
@@ -2997,21 +3134,21 @@ function RangeDatePickerBody(props) {
                     });
                 }, presets: presets })));
     };
-    return (React__default.createElement("div", { ref: props.ref, className: cx$1(css$W.root, uuiDatePickerBodyBase.container, props.cx), ...props.rawProps },
-        React__default.createElement(FlexRow, { cx: [view === 'DAY_SELECTION' && css$W.daySelection, css$W.container], alignItems: "top" },
+    return (React__default.createElement("div", { ref: ref, className: cx(css$U.root, uuiDatePickerBodyBase.container, props.cx), ...props.rawProps },
+        React__default.createElement(FlexRow, { cx: [view === 'DAY_SELECTION' && css$U.daySelection, css$U.container], alignItems: "top" },
             React__default.createElement(FlexCell, { width: "auto" },
                 React__default.createElement(FlexRow, null,
-                    React__default.createElement(FlexRow, { cx: css$W.bodesWrapper, alignItems: "top" },
-                        React__default.createElement(StatelessDatePickerBody, { key: "date-picker-body-left", cx: cx$1(css$W.fromPicker), ...from, onValueChange: (v) => onBodyValueChange(v, 'from'), onMonthChange: (m) => {
+                    React__default.createElement(FlexRow, { cx: css$U.bodesWrapper, alignItems: "top" },
+                        React__default.createElement(StatelessDatePickerBody, { key: "date-picker-body-left", cx: cx(css$U.fromPicker), ...from, onValueChange: (v) => onBodyValueChange(v, 'from'), onMonthChange: (m) => {
                                 setMonth(m);
                             }, onViewChange: (v) => setView(v), filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay || renderDay, isDisabled: view !== 'DAY_SELECTION' && activeMonth === 'to' }),
-                        React__default.createElement(StatelessDatePickerBody, { key: "date-picker-body-right", cx: cx$1(css$W.toPicker), ...to, onValueChange: (v) => onBodyValueChange(v, 'to'), onMonthChange: (m) => {
+                        React__default.createElement(StatelessDatePickerBody, { key: "date-picker-body-right", cx: cx(css$U.toPicker), ...to, onValueChange: (v) => onBodyValueChange(v, 'to'), onMonthChange: (m) => {
                                 setMonth(m.subtract(1, 'month'));
                             }, onViewChange: (v) => setView(v), filter: props.filter, renderDay: props.renderDay || renderDay, isHoliday: props.isHoliday, isDisabled: view !== 'DAY_SELECTION' && activeMonth === 'from' }),
                         view !== 'DAY_SELECTION' && (React__default.createElement("div", { style: {
                                 left: activeMonth === 'from' ? '50%' : undefined,
                                 right: activeMonth === 'to' ? '50%' : undefined,
-                            }, className: css$W.blocker }))),
+                            }, className: css$U.blocker }))),
                     props.presets && renderPresets(props.presets)),
                 props.renderFooter && props.renderFooter()))));
 }
@@ -3028,22 +3165,19 @@ const getDayCX = (day, selectedDate) => {
         && fromValue !== toValue;
     const isFirst = dayValue === fromValue;
     const isLast = dayValue === toValue;
-    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)];
+    return [cx(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$V = {"dropdown-container":"IP5lIG","dropdownContainer":"IP5lIG"};
+var css$T = {"dropdown-container":"gzoUNo","dropdownContainer":"gzoUNo"};
 
-const modifiers = [{
-        name: 'offset',
-        options: { offset: [0, 6] },
-    }];
-function RangeDatePicker(props) {
+function RangeDatePickerComponent(props, ref) {
     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);
     const [inFocus, setInFocus] = useState(null);
     const targetRef = React__default.useRef(null);
+    useImperativeHandle(ref, () => targetRef.current);
     const onValueChange = (newValue) => {
         const fromChanged = value?.from !== newValue?.from;
         const toChanged = value?.to !== newValue?.to;
@@ -3060,7 +3194,10 @@ function RangeDatePicker(props) {
         props.onOpenChange?.(newIsOpen);
         if (!inFocus && newIsOpen) {
             setInFocus('from');
-            targetRef.current.querySelector('.uui-input').focus();
+            if (targetRef.current) {
+                const inputElement = targetRef.current.querySelector('.uui-input');
+                inputElement?.focus();
+            }
         }
     };
     const onBodyValueChange = (newValue) => {
@@ -3075,7 +3212,7 @@ function RangeDatePicker(props) {
         }
     };
     const renderBody = (renderProps) => {
-        return (React__default.createElement(DropdownContainer, { ...renderProps, cx: cx(css$V.dropdownContainer), shards: [targetRef], returnFocus: true },
+        return (React__default.createElement(DropdownContainer, { ...renderProps, cx: cx(css$T.dropdownContainer), shards: [targetRef], returnFocus: true },
             React__default.createElement(FlexRow, null,
                 React__default.createElement(RangeDatePickerBody, { cx: cx(props.bodyCx), value: {
                         selectedDate: _value,
@@ -3091,105 +3228,79 @@ function RangeDatePicker(props) {
         }
     };
     return (React__default.createElement(Dropdown$1, { renderTarget: (renderProps) => {
-            return props.renderTarget?.(renderProps) || (React__default.createElement(RangeDatePickerInput, { id: props.id, ref: (node) => { renderProps.ref(node); targetRef.current = node; }, cx: props.inputCx, onClick: () => renderProps.toggleDropdownOpening(true), isDisabled: props.isDisabled, isInvalid: props.isInvalid, isReadonly: props.isReadonly, size: size, getPlaceholder: props.getPlaceholder, disableClear: props.disableClear, rawProps: props.rawProps, inFocus: inFocus, value: value, format: format, onValueChange: onValueChange, onFocusInput: (e, type) => {
+            return props.renderTarget?.(renderProps) || (React__default.createElement(RangeDatePickerInput, { id: props.id, ref: (node) => { renderProps.ref(node); targetRef.current = node; }, cx: props.inputCx, onClick: () => renderProps.toggleDropdownOpening(true), isDisabled: props.isDisabled, isInvalid: props.isInvalid, isReadonly: props.isReadonly, size: size, getPlaceholder: props.getPlaceholder, disableClear: props.disableClear, rawProps: props.rawProps, inFocus: inFocus, value: value, format: format, filter: props.filter, onValueChange: onValueChange, onFocusInput: (e, type) => {
                     props.onFocus?.(e, type);
                     setInFocus(type);
                 }, onBlurInput: (e, type) => { props.onBlur?.(e, type); !isOpen && setInFocus(null); }, onKeyDown: handleEscape }));
-        }, renderBody: (renderProps) => renderBody(renderProps), onValueChange: (v) => onOpenChange(v), value: isOpen, modifiers: modifiers, placement: props.placement, forwardedRef: props.ref }));
+        }, renderBody: (renderProps) => renderBody(renderProps), onValueChange: (v) => onOpenChange(v), value: isOpen, middleware: [offset(6)], placement: props.placement, ref: ref }));
 }
+const RangeDatePicker = /* @__PURE__ */React__default.forwardRef(RangeDatePickerComponent);
 
-var css$U = {"root":"j0UZmP","blocker":"E2-Ywt","marker":"ktyYct","top":"EMZlfh","bottom":"Fig1y8","left":"rtZF9D","right":"u1y-qf","inside":"QJkJJI"};
+var css$S = {"root":"_4c7JOn","blocker":"JAb23-","marker":"pJfFTh","top":"Z2P4Zo","bottom":"sN7Hx-","left":"Iwg-dq","right":"D-MBtZ","inside":"XY1--j"};
 
 function DropMarker(props) {
     return props.isDndInProgress
         ? (React.createElement(React.Fragment, null,
-            props.enableBlocker && React.createElement("div", { className: css$U.blocker }),
+            props.enableBlocker && React.createElement("div", { className: css$S.blocker }),
             React.createElement("div", { className: cx([
-                    css$U.root,
-                    css$U.marker,
-                    css$U[props.position],
+                    css$S.root,
+                    css$S.marker,
+                    css$S[props.position],
                     props?.cx,
                 ]) })))
         : null;
 }
 
-var css$T = {"root":"_6TpRRQ","line-height":"bFyoXD","lineHeight":"bFyoXD","font-size":"VQiYxl","fontSize":"VQiYxl"};
-
-function applyTextMods(mods) {
-    return [
-        css$T.root,
-        'uui-text',
-        `uui-size-${mods.size || settings.text.sizes.default}`,
-        (mods.size !== 'none' || mods.lineHeight) && css$T.lineHeight,
-        (mods.size !== 'none' || mods.fontSize) && css$T.fontSize,
-        `uui-color-${mods.color || 'primary'}`,
-        `uui-font-weight-${mods.fontWeight || '400'}`,
-        `uui-font-style-${mods.fontStyle || 'normal'}`,
-        'uui-typography-inline',
-    ];
-}
-const Text = /* @__PURE__ */withMods(uuiComponents.Text, applyTextMods, (props) => {
-    const style = props?.rawProps?.style || {};
-    props.fontSize && (style['--uui-text-font-size'] = `${props.fontSize}px`);
-    props.lineHeight && (style['--uui-text-line-height'] = `${props.lineHeight}px`);
-    return {
-        rawProps: {
-            ...props?.rawProps,
-            style: style,
-        },
-    };
-});
-
 const RichTextView = /* @__PURE__ */withMods(uuiComponents.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || settings.richTextView.sizes.default}`]);
 
-var css$S = {"modal":"Q0Gdw4","search-wrapper":"BL49IO","searchWrapper":"BL49IO","no-data":"_8Flb-H","noData":"_8Flb-H"};
+var css$R = {"search-wrapper":"_6j47Bn","searchWrapper":"_6j47Bn","no-data":"_6P5Rga","noData":"_6P5Rga"};
 
-var css$R = {"picker-row":"xpSU4T","pickerRow":"xpSU4T","align-widgets-top":"tVv2Sy","alignWidgetsTop":"tVv2Sy","align-widgets-center":"D-jSU1","alignWidgetsCenter":"D-jSU1","row-content":"dnS1h9","rowContent":"dnS1h9","icon-container":"_1CKSIv","iconContainer":"_1CKSIv","content-wrapper":"_5B3PRs","contentWrapper":"_5B3PRs","icon-wrapper":"-xU9u7","iconWrapper":"-xU9u7","icon-default":"_36-kU-","iconDefault":"_36-kU-","selected-mark":"sJqJKY","selectedMark":"sJqJKY"};
+var css$Q = {"picker-row":"eHNJHq","pickerRow":"eHNJHq","align-widgets-top":"_0Q2a8U","alignWidgetsTop":"_0Q2a8U","row-content":"i2lfPW","rowContent":"i2lfPW","align-widgets-center":"cP9WJW","alignWidgetsCenter":"cP9WJW","icon-container":"RQJpkz","iconContainer":"RQJpkz","content-wrapper":"F3DQyn","contentWrapper":"F3DQyn","icon-wrapper":"_0UUWIU","iconWrapper":"_0UUWIU","icon-default":"BGtMG0","iconDefault":"BGtMG0","selected-mark":"_33CGdB","selectedMark":"_33CGdB"};
 
-var css$Q = {"root":"yBr46o"};
+var css$P = {"root":"ahmsHl"};
 
-const AvatarStack = /* @__PURE__ */withMods(AvatarStack$1, () => [css$Q.root]);
+const AvatarStack = /* @__PURE__ */withMods(AvatarStack$1, () => [css$P.root]);
 
-var css$P = {"root":"VBEl5n"};
+var css$O = {"root":"_2F1ZHd"};
 
 const DEFAULT_FILL = 'solid';
 function applyBadgeMods(mods) {
     return [
         'uui-badge',
-        css$P.root,
+        css$O.root,
         `uui-size-${mods.size || settings.badge.sizes.default}`,
         `uui-fill-${mods.fill || DEFAULT_FILL}`,
         `uui-color-${mods.color || 'info'}`,
     ];
 }
-const Badge = (props) => {
+const Badge = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const styles = [applyBadgeMods(props), props.cx];
     const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.badge.icons.dropdownIcon;
     return (React__default.createElement(Clickable, { ...props, rawProps: {
             'aria-haspopup': props.isDropdown,
             'aria-expanded': props.isOpen,
             ...props.rawProps,
-        }, cx: styles, ref: props.ref },
+        }, cx: styles, ref: ref },
         (props.indicator && props.fill === 'outline') && (React__default.createElement("div", { className: "uui-indicator" })),
         props.icon && props.iconPosition !== 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         props.caption && (React__default.createElement("div", { className: uuiElement.caption }, props.caption)),
         props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { key: "count-indicator", color: null, size: settings.badge.sizes.countIndicatorMap[props.size || settings.badge.sizes.default], caption: props.count })),
         props.icon && props.iconPosition === 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         props.isDropdown && (React__default.createElement(IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
-};
+});
 
-var css$O = {"root":"-yIbhf"};
+var css$N = {"root":"_6qjKPt"};
 
 function applyTagMods(props) {
     return [
-        css$O.root,
+        css$N.root,
         `uui-size-${props.size || settings.tag.sizes.default}`,
         `uui-color-${props.color || 'neutral'}`,
         `uui-fill-${props.fill || 'solid'}`,
         'uui-tag',
     ];
 }
-function Tag(props) {
+const Tag = /* @__PURE__ */React__default.forwardRef((props, ref) => {
     const styles = [applyTagMods(props), props.cx];
     const ClearIcon = props.clearIcon ? props.clearIcon : settings.tag.icons.clearIcon;
     const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : settings.tag.icons.dropdownIcon;
@@ -3197,66 +3308,66 @@ function Tag(props) {
             'aria-haspopup': props.isDropdown,
             'aria-expanded': props.isOpen,
             ...props.rawProps,
-        }, cx: styles, ref: props.ref },
+        }, cx: styles, ref: ref },
         props.icon && props.iconPosition !== 'right' && (React__default.createElement(IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         props.caption && (React__default.createElement("div", { className: uuiElement.caption }, props.caption)),
         props.count !== undefined && props.count !== null && (React__default.createElement(CountIndicator, { color: (!props.color || props.color === 'neutral') ? 'white' : props.color, size: settings.tag.sizes.countIndicatorMap[(props.size || settings.tag.sizes.default)], caption: props.count })),
         props.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$N = {"root":"lH39Er","page":"BuzZlX","spacer":"QWExM3","mode-ghost":"_3-Xmiz","modeGhost":"_3-Xmiz"};
+var css$M = {"root":"_3W7nxe","page":"mV4I9O","spacer":"jsXJ2f","mode-ghost":"_9y3rMJ","modeGhost":"_9y3rMJ"};
 
 function Paginator(props) {
-    const renderPaginator = (params) => (React__default.createElement("nav", { role: "navigation", className: cx(css$N.root, 'uui-paginator', `uui-size-${props.size || settings.paginator.sizes.default}`), ...params.rawProps },
+    const renderPaginator = (params) => (React__default.createElement("nav", { role: "navigation", className: cx(css$M.root, 'uui-paginator', `uui-size-${props.size || settings.paginator.sizes.default}`), ...params.rawProps },
         React__default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.leftArrowIcon, onClick: params.goToPrev, isDisabled: params.isFirst || props.isDisabled, fill: "outline", color: "secondary" }),
         params.pages.map((page, index) => {
             if (page.type === 'spacer') {
-                return (React__default.createElement(Button, { cx: cx(css$N.spacer, css$N.page), size: props.size || settings.paginator.sizes.default, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1, isDisabled: props.isDisabled }));
+                return (React__default.createElement(Button, { cx: cx(css$M.spacer, css$M.page), size: props.size || settings.paginator.sizes.default, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1, isDisabled: props.isDisabled }));
             }
             else {
-                return (React__default.createElement(Button, { cx: cx(css$N[`mode-${!page.isActive && 'ghost'}`], css$N.page), size: props.size || settings.paginator.sizes.default, key: page.pageNumber, caption: page.pageNumber, onClick: () => page.onClick?.(), rawProps: { 'aria-current': page.isActive }, fill: (page.isActive && 'outline') || 'ghost', color: "primary", isDisabled: props.isDisabled }));
+                return (React__default.createElement(Button, { cx: cx(css$M[`mode-${!page.isActive && 'ghost'}`], css$M.page), size: props.size || settings.paginator.sizes.default, key: page.pageNumber, caption: page.pageNumber, onClick: () => page.onClick?.(), rawProps: { 'aria-current': page.isActive }, fill: (page.isActive && 'outline') || 'ghost', color: "primary", isDisabled: props.isDisabled }));
             }
         }),
         React__default.createElement(Button, { size: props.size || settings.paginator.sizes.default, icon: settings.paginator.icons.rightArrowIcon, onClick: params.goToNext, isDisabled: params.isLast || props.isDisabled, fill: "outline", color: "secondary" })));
     return React__default.createElement(Paginator$1, { ...props, render: renderPaginator });
 }
 
-var css$M = {"root":"-XB0b6","progress-bar":"Xst3kq","progressBar":"Xst3kq","progressBar-indeterminate":"AOYlg4","progressBarIndeterminate":"AOYlg4","size-12":"slML9A","size12":"slML9A","size-18":"kvuEp3","size18":"kvuEp3","size-24":"_48Bf-F","size24":"_48Bf-F"};
+var css$L = {"root":"KPJEdf","progress-bar":"FNKr6C","progressBar":"FNKr6C","progressBar-indeterminate":"Qutt6-","progressBarIndeterminate":"Qutt6-","size-12":"GhXq6g","size12":"GhXq6g","size-18":"_0i56mG","size18":"_0i56mG","size-24":"zxuSDK","size24":"zxuSDK"};
 
-const IndeterminateBar = (props) => {
-    return (React.createElement("div", { ref: props.ref, className: cx('uui-indeterminate_bar', props.cx, css$M.root, css$M[`size-${props.size || 12}`]) },
-        React.createElement("div", { className: cx(css$M.progressBar) })));
-};
+const IndeterminateBar = /* @__PURE__ */React.forwardRef((props, ref) => {
+    return (React.createElement("div", { ref: ref, className: cx('uui-indeterminate_bar', props.cx, css$L.root, css$L[`size-${props.size || 12}`]) },
+        React.createElement("div", { className: cx(css$L.progressBar) })));
+});
 
-var css$L = {"root":"iJ6Y3l","striped":"-GFUDh","animate-stripes":"e9b8XM","animateStripes":"e9b8XM","size-12":"_22hT0b","size12":"_22hT0b","size-18":"_2RiBMG","size18":"_2RiBMG","size-24":"b81ADo","size24":"b81ADo"};
+var css$K = {"root":"tMBqIl","striped":"g4xn20","animate-stripes":"ehJluS","animateStripes":"ehJluS","size-12":"f6KT8d","size12":"f6KT8d","size-18":"cIpi4Z","size18":"cIpi4Z","size-24":"_72D0n9","size24":"_72D0n9"};
 
 const DEFAULT_SIZE = '12';
 function applyProgressBarMods(mods) {
     const size = mods.size || DEFAULT_SIZE;
     return [
-        css$L.root,
-        css$L[`size-${size}`],
-        mods.striped && css$L.striped,
+        css$K.root,
+        css$K[`size-${size}`],
+        mods.striped && css$K.striped,
     ];
 }
 const ProgressBar = /* @__PURE__ */withMods(uuiComponents.ProgressBar, applyProgressBarMods, (props) => ({
     hideLabel: props.hideLabel || props.striped,
 }));
 
-var css$K = {"root":"aJuq-E"};
+var css$J = {"root":"OnHsTk"};
 
-const IndicatorBar = (props) => {
+const IndicatorBar = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { progress } = props;
-    return progress || progress === 0 ? (React.createElement(ProgressBar, { ref: props.ref, progress: progress, cx: cx(css$K.root, props.cx), hideLabel: true })) : (React.createElement(IndeterminateBar, { ref: props.ref, cx: cx(css$K.root, props.cx) }));
-};
+    return progress || progress === 0 ? (React.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx(css$J.root, props.cx), hideLabel: true })) : (React.createElement(IndeterminateBar, { ref: ref, cx: cx(css$J.root, props.cx) }));
+});
 
-var css$J = {"root":"YzawEd"};
+var css$I = {"root":"vD2hUv"};
 
-function StatusIndicator(props) {
-    return (React__default.createElement("div", { ref: props.ref, className: cx([
-            css$J.root,
+const StatusIndicator = /* @__PURE__ */forwardRef((props, ref) => {
+    return (React__default.createElement("div", { ref: ref, className: cx([
+            css$I.root,
             `uui-size-${props.size || settings.statusIndicator.sizes.default}`,
             'uui-status_indicator',
             `uui-color-${props.color || 'neutral'}`,
@@ -3265,9 +3376,9 @@ function StatusIndicator(props) {
         ]) },
         React__default.createElement("div", { className: "uui-status_indicator-dot" }),
         React__default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
-}
+});
 
-var css$I = {"drag-handle":"aqYWns","dragHandle":"aqYWns","icon-container":"CpAZ7v","iconContainer":"CpAZ7v"};
+var css$H = {"drag-handle":"PfxNaP","dragHandle":"PfxNaP","icon-container":"iaRpBx","iconContainer":"iaRpBx"};
 
 function DataRowAddons(props) {
     const row = props.rowProps;
@@ -3278,13 +3389,13 @@ function DataRowAddons(props) {
         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$I.dragHandle, rawProps: { ...props.eventHandlers } }),
+        row.dnd?.srcData && React__default.createElement(DragHandle, { key: "dh", cx: css$H.dragHandle, rawProps: { ...props.eventHandlers } }),
         row?.checkbox?.isVisible && (React__default.createElement(Checkbox, { key: "cb", cx: "uui-dr_addons-checkbox", tabIndex: props.tabIndex, size: settings.dataTable.sizes.body.checkboxMap[props.size], value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => row.onCheck?.(row), isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
         row.indent > 0 && (React__default.createElement("div", { key: "fold", className: cx('uui-dr_addons-indent', `uui-size-${props.size || settings.dataTable.sizes.body.row}`), style: { marginInlineStart: getIndent(), width: getWidth() } }, row.isFoldable && (React__default.createElement(IconContainer, { rawProps: {
                 'aria-label': row.isFolded ? 'Unfold' : 'Fold',
                 role: 'button',
             }, key: "icon", icon: settings.dataTable.icons.body.foldingIcon, cx: [
-                uuiElement.foldingArrow, uuiMarkers.clickable, css$I.iconContainer,
+                uuiElement.foldingArrow, uuiMarkers.clickable, css$H.iconContainer,
             ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), size: settings.dataTable.sizes.body.iconMap[props.size || settings.dataTable.sizes.body.row] }))))));
 }
 
@@ -3353,7 +3464,7 @@ const getHighlightedSearchMatches = (str, search) => {
     return getDecoratedText(str, ranges);
 };
 
-var css$H = {"root":"RYy1UD","column-gap":"JPJnro","columnGap":"JPJnro","title":"Sf9VZA","subtitle":"KtWK1e","disabled":"B3O-Uh","multiline":"qCObo4"};
+var css$G = {"root":"Hm6nb8","column-gap":"AMFarF","columnGap":"AMFarF","title":"VczrFK","subtitle":"_3TAmU7","disabled":"_0fzdOH","multiline":"-Lm1NM"};
 
 function PickerItem(props) {
     const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, } = props;
@@ -3362,13 +3473,13 @@ function PickerItem(props) {
     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$H.root, 'uui-picker_input-item', 'uui-typography', props.cx] },
-        React.createElement(FlexRow, { size: itemSize, cx: [isMultiline && css$H.multiline, css$H.columnGap], rawProps: { style: { '--uui-picker_item-vertical-padding': `${settings.pickerInput.sizes.body.itemVerticalPaddingMap[itemSize]}px` } } },
+    return (React.createElement(FlexCell, { width: "auto", cx: [css$G.root, 'uui-picker_input-item', 'uui-typography', props.cx] },
+        React.createElement(FlexRow, { size: itemSize, cx: [isMultiline && css$G.multiline, css$G.columnGap], rawProps: { style: { '--uui-picker_item-vertical-padding': `${settings.pickerInput.sizes.body.itemVerticalPaddingMap[itemSize]}px` } } },
             avatarUrl && (React.createElement(Avatar, { isLoading: isLoading, img: avatarUrl, size: getAvatarSize(itemSize, isMultiline) })),
             icon && React.createElement(IconContainer, { icon: icon }),
             React.createElement(FlexCell, { width: "auto" },
-                title && (React.createElement("div", { className: cx(css$H.title, isDisabled && css$H.disabled, `uui-size-${itemSize}`) }, title)),
-                subtitle && (React.createElement("div", { className: cx(css$H.subtitle, isDisabled && css$H.disabled, `uui-size-${itemSize}`) }, subtitle))))));
+                title && (React.createElement("div", { className: cx(css$G.title, isDisabled && css$G.disabled, `uui-size-${itemSize}`) }, title)),
+                subtitle && (React.createElement("div", { className: cx(css$G.subtitle, isDisabled && css$G.disabled, `uui-size-${itemSize}`) }, subtitle))))));
 }
 function getAvatarSize(size, isMultiline) {
     return settings.pickerInput.sizes.body[isMultiline ? 'itemAvatarMultilineMap' : 'itemAvatarMap'][size];
@@ -3404,7 +3515,7 @@ function DataPickerRow(props) {
     const renderContent = () => {
         let content;
         if (props.isLoading) {
-            content = (React.createElement(Text, { size: props.size }, settings.pickerInput.renderPlaceholder()));
+            content = settings.pickerInput.renderPlaceholder({ rowSize: props.size });
         }
         else if (props.isUnknown) {
             content = (React.createElement(Text, { size: props.size }, "Unknown"));
@@ -3416,19 +3527,19 @@ function DataPickerRow(props) {
             content = (React.createElement(React.Fragment, null,
                 renderRowItem(props.value, props),
                 React.createElement(FlexSpacer, null),
-                (props.isChildrenSelected || props.isSelected) && (React.createElement("div", { className: cx$1(css$R.iconWrapper, 'uui-picker_input-row-select_icon', uuiMod.selected) },
-                    React.createElement(IconContainer, { size: settings.pickerInput.sizes.body.selectIconMap[props.size], icon: SelectIcon, cx: props.isChildrenSelected ? css$R.iconDefault : css$R.selectedMark, rawProps: { 'aria-label': props.isChildrenSelected
+                (props.isChildrenSelected || props.isSelected) && (React.createElement("div", { className: cx$1(css$Q.iconWrapper, 'uui-picker_input-row-select_icon', uuiMod.selected) },
+                    React.createElement(IconContainer, { size: settings.pickerInput.sizes.body.selectIconMap[props.size], icon: SelectIcon, cx: props.isChildrenSelected ? css$Q.iconDefault : css$Q.selectedMark, rawProps: { 'aria-label': props.isChildrenSelected
                                 ? 'Child is selected'
                                 : 'Selected' } })))));
         }
-        return (React.createElement(FlexCell, { grow: 1, width: 0, minWidth: 0, cx: css$R.rowContent },
+        return (React.createElement(FlexCell, { grow: 1, width: 0, minWidth: 0, cx: css$Q.rowContent },
             React.createElement(DataRowAddons, { size: props.size, rowProps: props, tabIndex: -1 }),
-            React.createElement("div", { className: css$R.contentWrapper }, content)));
+            React.createElement("div", { className: css$Q.contentWrapper }, content)));
     };
     const clickHandler = props.onClick || props.onSelect || props.onFold || props.onCheck;
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    React.createElement("div", { onClick: clickHandler && ((e) => !isEventTargetInsideClickable(e) && clickHandler(props)), role: "option", "aria-busy": props.isLoading, "aria-posinset": props.index + 1, "aria-checked": props.checkbox?.isVisible ? props.isChecked : null, "aria-selected": props.isSelectable ? props.isSelected : null, ref: rowNode, className: cx$1(css$R.pickerRow, 'uui-picker_input-row', props.size && `uui-size-${props.size || settings.pickerInput.sizes.body.row}`, css$R[`align-widgets-${props.alignActions || 'top'}`], clickHandler && props.isFocused && uuiMod.focus, clickHandler && uuiMarkers.clickable, props.cx), style: props.padding && {
+    React.createElement("div", { onClick: clickHandler && ((e) => !isEventTargetInsideClickable(e) && clickHandler(props)), role: "option", "aria-busy": props.isLoading, "aria-posinset": props.index + 1, "aria-checked": props.checkbox?.isVisible ? props.isChecked : null, "aria-selected": props.isSelectable ? props.isSelected : null, ref: rowNode, className: cx$1(css$Q.pickerRow, 'uui-picker_input-row', props.size && `uui-size-${props.size || settings.pickerInput.sizes.body.row}`, css$Q[`align-widgets-${props.alignActions || 'top'}`], clickHandler && props.isFocused && uuiMod.focus, clickHandler && uuiMarkers.clickable, props.cx), style: props.padding && {
             '--uui-data_picker-horizontal-padding': `${props.padding}px`,
         }, ...props.rawProps }, renderContent()));
 }
@@ -3456,7 +3567,7 @@ function DataPickerBody({ highlightSearchMatches = true, ...props }) {
             });
         }
         if (props.minCharsToSearch && search.length < props.minCharsToSearch) {
-            return (React__default.createElement(FlexCell$1, { cx: css$S.noData, grow: 1, textAlign: "center" },
+            return (React__default.createElement(FlexCell$1, { cx: css$R.noData, grow: 1, textAlign: "center" },
                 React__default.createElement(Text, { size: props.searchSize }, i18n.dataPickerBody.typeSearchToLoadMessage)));
         }
         if (props.rows.length === 0) {
@@ -3469,7 +3580,7 @@ function DataPickerBody({ highlightSearchMatches = true, ...props }) {
                     search: search,
                 });
             }
-            return (React__default.createElement(FlexCell$1, { cx: css$S.noData, grow: 1, textAlign: "center" },
+            return (React__default.createElement(FlexCell$1, { cx: css$R.noData, grow: 1, textAlign: "center" },
                 React__default.createElement(Text, { size: props.searchSize }, i18n.dataPickerBody.noRecordsMessage)));
         }
     };
@@ -3483,10 +3594,12 @@ function DataPickerBody({ highlightSearchMatches = true, ...props }) {
         const pickerRowProps = { ...row, getName: props.getName };
         return props.renderRow ? (props.renderRow(pickerRowProps, dsState)) : (React__default.createElement(DataPickerRow, { ...pickerRowProps, key: row.rowKey, size: getRowSize(), flattenSearchResults: props.flattenSearchResults, highlightSearchMatches: highlightSearchMatches, dataSourceState: dsState, getName: props.getName }));
     };
-    const searchSize = isMobile() ? settings.pickerInput.sizes.body.mobileSearchInput : props.searchSize;
+    const searchSize = isMobile()
+        ? settings.pickerInput.sizes.body.mobileSearchInput
+        : settings.pickerInput.sizes.body.getSearchSize({ pickerSize: props.searchSize });
     const renderedDataRows = useMemo(() => props.rows.map((row) => renderRow(row, props.value)), [props.rows, props.value]);
     return (React__default.createElement(React__default.Fragment, null,
-        showSearch && (React__default.createElement("div", { key: "search", className: cx$1(css$S.searchWrapper, 'uui-picker_input-body-search') },
+        showSearch && (React__default.createElement("div", { key: "search", className: cx$1(css$R.searchWrapper, 'uui-picker_input-body-search') },
             React__default.createElement(FlexCell$1, { grow: 1 },
                 React__default.createElement(MoveFocusInside, null,
                     React__default.createElement(SearchInput, { placeholder: i18n.dataPickerBody.searchPlaceholder, value: props.value.search, onValueChange: (newVal) => props.onValueChange({ ...props.value, search: newVal }), onKeyDown: searchKeyDown, size: searchSize, debounceDelay: props.searchDebounceDelay, rawProps: { dir: 'auto' } }))))),
@@ -3500,8 +3613,6 @@ function DataPickerBody({ highlightSearchMatches = true, ...props }) {
             }, rowsCount: props.rowsCount, isLoading: props.isReloading })))));
 }
 
-var css$G = {"footer":"IlTacl"};
-
 function DataPickerFooterImpl(props) {
     const { search, clearSelection, view, showSelected, selectionMode, isSearchTooShort, } = props;
     const size = isMobile() ? settings.pickerInput.sizes.body.mobileFooterLinkButton : props.size;
@@ -3514,7 +3625,7 @@ function DataPickerFooterImpl(props) {
     const isSearching = search?.length;
     const hideFooter = (rowsCount === 0 && !hasSelection) || isSearching || (isSinglePicker && props.disableClear);
     const showClear = !props.disableClear && (isSinglePicker ? true : (!view.selectAll || hasSelection));
-    return !hideFooter && (React__default.createElement(FlexRow, { cx: css$G.footer },
+    return !hideFooter && (React__default.createElement(FlexRow, { cx: cx('uui-picker_input-footer', props.cx) },
         !isSinglePicker && !isSearchTooShort && ( // Show this switch only for multi mode and when some rows rendered
         React__default.createElement(Switch, { size: settings.pickerInput.sizes.body.footerSwitchMap[props.size], value: showSelected.value, isDisabled: !hasSelection, onValueChange: showSelected.onValueChange, label: i18n.pickerInput.showOnlySelectedLabel })),
         React__default.createElement(FlexSpacer, null),
@@ -3526,7 +3637,7 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = /* @__PURE__ */React__default.memo(DataPickerFooterImpl);
 
-var css$F = {"header":"rQX3CU","title":"_3-n5Ay","close":"AMVtUG"};
+var css$F = {"header":"f7-dx0","title":"yrX23S","close":"RUm097"};
 
 const DataPickerMobileHeaderImpl = (props) => {
     const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
@@ -3536,7 +3647,7 @@ const DataPickerMobileHeaderImpl = (props) => {
 };
 const DataPickerMobileHeader = /* @__PURE__ */React__default.memo(DataPickerMobileHeaderImpl);
 
-var css$E = {"done":"Gr5f0z","container":"_5xfPWN"};
+var css$E = {"done":"_9FEu8H","container":"_50sIrr"};
 
 const PickerBodyMobileView = (props) => {
     const isMobileView = isMobile();
@@ -3548,7 +3659,7 @@ const PickerBodyMobileView = (props) => {
         isMobileView && (React__default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => props.onClose?.(), cx: css$E.done, size: settings.pickerInput.sizes.body.mobileFooterLinkButton }))));
 };
 
-var css$D = {"sub-header-wrapper":"X5pz9p","subHeaderWrapper":"X5pz9p","switch":"YeTtgM","no-found-modal-container":"hO7Pbc","noFoundModalContainer":"hO7Pbc","no-found-modal-container-icon":"lGLcJA","noFoundModalContainerIcon":"lGLcJA","no-found-modal-container-text":"q-ggGx","noFoundModalContainerText":"q-ggGx","body":"teVPB4"};
+var css$D = {"sub-header-wrapper":"LDCtsP","subHeaderWrapper":"LDCtsP","switch":"QBWeKc","no-found-modal-container":"_14uFKy","noFoundModalContainer":"_14uFKy","no-found-modal-container-icon":"U4lMME","noFoundModalContainerIcon":"U4lMME","no-found-modal-container-text":"HdHqvp","noFoundModalContainerText":"HdHqvp","body":"fLG-ly"};
 
 function PickerModal(props) {
     const { view, selection, dataSourceStateLens, dataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = usePickerModal(props);
@@ -3590,9 +3701,9 @@ function PickerModal(props) {
             React__default.createElement(ModalFooter, null, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$C = {"tooltip":"GTxa2T"};
+var css$C = {"tooltip":"_8UzCOz"};
 
-function PickerTogglerTag(props) {
+const PickerTogglerTag = /* @__PURE__ */React.forwardRef((props, ref) => {
     const tagProps = {
         ...props,
         tabIndex: -1,
@@ -3602,14 +3713,14 @@ function PickerTogglerTag(props) {
     if (props.isCollapsed) {
         const collapsedRows = props.collapsedRows.map((row) => props.getName(row.value)).join(', ');
         return (React.createElement(Tooltip, { key: "selected", content: collapsedRows, closeDelay: 150, closeOnMouseLeave: "boundary", cx: css$C.tooltip },
-            React.createElement(Tag, { ref: props.ref, rawProps: { role: 'option' }, ...tagProps })));
+            React.createElement(Tag, { ref: ref, rawProps: { role: 'option' }, ...tagProps })));
     }
     else {
-        return React.createElement(Tag, { ref: props.ref, rawProps: { role: 'option' }, ...tagProps });
+        return React.createElement(Tag, { ref: ref, rawProps: { role: 'option' }, ...tagProps });
     }
-}
+});
 
-var css$B = {"root":"yM0tKa","mode-form":"_8A2Utc","modeForm":"_8A2Utc","mode-cell":"EZ7-ka","modeCell":"EZ7-ka","mode-inline":"-l-a0H","modeInline":"-l-a0H"};
+var css$B = {"root":"vCucHI"};
 
 const defaultMode = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
@@ -3617,10 +3728,10 @@ function applyPickerTogglerMods(mods) {
         css$B.root,
         'uui-picker_toggler',
         `uui-size-${mods.size || settings.pickerInput.sizes.toggler.default}`,
-        css$B['mode-' + (mods.mode || defaultMode)],
+        'uui-control-mode-' + (mods.mode || defaultMode),
     ];
 }
-function PickerToggler(props) {
+function PickerTogglerComponent(props, ref) {
     const renderItem = (itemProps) => {
         const itemPropsWithSize = { ...itemProps, size: props.size || settings.pickerInput.sizes.toggler.tag };
         if (!!props.renderItem) {
@@ -3628,17 +3739,13 @@ function PickerToggler(props) {
         }
         return (React.createElement(PickerTogglerTag, { ...itemPropsWithSize, key: itemProps.isCollapsed ? 'collapsed_tag' : itemProps.rowProps?.id, getName: props.getName }));
     };
-    return (React.createElement(PickerToggler$1, { ...props, ref: props.ref, cx: [applyPickerTogglerMods(props), props.cx], renderItem: renderItem, getName: props.getName, cancelIcon: settings.pickerInput.icons.toggler.clearIcon, dropdownIcon: settings.pickerInput.icons.toggler.dropdownIcon }));
+    return (React.createElement(PickerToggler$1, { ...props, ref: ref, cx: [applyPickerTogglerMods(props), props.cx], renderItem: renderItem, getName: props.getName, cancelIcon: settings.pickerInput.icons.toggler.clearIcon, dropdownIcon: settings.pickerInput.icons.toggler.dropdownIcon }));
 }
+const PickerToggler = /* @__PURE__ */React.forwardRef(PickerTogglerComponent);
 
-function PickerInput(props) {
+function PickerInputComponent(props, ref) {
     const context = useContext(UuiContext);
-    const popperModifiers = useMemo(() => [
-        {
-            name: 'offset',
-            options: { offset: [0, 6] },
-        }, mobilePopperModifier,
-    ], []);
+    const middleware = useMemo(() => [offset(6), mobilePositioning], []);
     const toggleModalOpening = () => {
         const { renderFooter, rawProps, ...restProps } = props;
         context.uuiModals
@@ -3649,13 +3756,13 @@ function PickerInput(props) {
             .catch(() => { });
     };
     const { view, getName, getPlaceholder, handleSelectionValueChange, getTogglerProps, getRows, handleTogglerSearchChange, toggleBodyOpening, dataSourceState, handleDataSourceValueChange, getFooterProps, getListProps, shouldShowBody, getSearchPosition, closePickerBody, openPickerBody, handlePickerInputKeyboard, } = usePickerInput({ ...props, toggleModalOpening });
-    const dropdownRef = useRef(null);
-    useImperativeHandle(props.ref, () => {
-        if (dropdownRef.current) {
-            dropdownRef.current.closePickerBody = closePickerBody;
-            dropdownRef.current.openPickerBody = openPickerBody;
+    const togglerRef = useRef(null);
+    useImperativeHandle(ref, () => {
+        if (togglerRef.current) {
+            togglerRef.current.closePickerBody = closePickerBody;
+            togglerRef.current.openPickerBody = openPickerBody;
         }
-        return dropdownRef.current;
+        return togglerRef.current;
     }, [closePickerBody, openPickerBody]);
     const getTogglerMods = () => {
         return {
@@ -3691,10 +3798,11 @@ function PickerInput(props) {
     return (React__default.createElement(Dropdown, { renderTarget: (dropdownProps) => {
             const targetProps = getTogglerProps();
             return renderTarget({ ...dropdownProps, ...targetProps, renderItem });
-        }, renderBody: (bodyProps) => renderBody(bodyProps), value: shouldShowBody(), onValueChange: !props.isDisabled && toggleBodyOpening, placement: props.dropdownPlacement, modifiers: popperModifiers, closeBodyOnTogglerHidden: !isMobile(), portalTarget: props.portalTarget, ref: dropdownRef }));
+        }, renderBody: (bodyProps) => renderBody(bodyProps), value: shouldShowBody(), onValueChange: !props.isDisabled && toggleBodyOpening, placement: props.dropdownPlacement, middleware: middleware, closeBodyOnTogglerHidden: !isMobile(), portalTarget: props.portalTarget, ref: togglerRef }));
 }
+const PickerInput = /* @__PURE__ */React__default.forwardRef(PickerInputComponent);
 
-var css$A = {"row":"aljes2"};
+var css$A = {"row":"M-bQcH"};
 
 function PickerListRow(props) {
     let label;
@@ -3714,7 +3822,7 @@ function PickerListRow(props) {
     return (React__default.createElement("div", { role: "option", "aria-selected": props.isSelectable ? props.isSelected : undefined, "aria-busy": props.isLoading, "aria-posinset": props.index + 1, ...(props.checkbox?.isVisible && { 'aria-checked': props.isChecked }), className: css$A.row }, component));
 }
 
-var css$z = {"root":"QUfFOW"};
+var css$z = {"root":"WaE1B8"};
 
 function PickerList(props) {
     const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, getModalTogglerCaption, } = usePickerList(props);
@@ -3749,7 +3857,7 @@ function PickerList(props) {
             }, selectedRows)));
 }
 
-var css$y = {"root":"de3t65","wrapper":"_3uaV6e","align-widgets-top":"kpDxhu","alignWidgetsTop":"kpDxhu","align-widgets-center":"_4N3n0T","alignWidgetsCenter":"_4N3n0T"};
+var css$y = {"root":"zMzt-0","wrapper":"U25qgs","align-widgets-top":"uxTf-f","alignWidgetsTop":"uxTf-f","align-widgets-center":"ycZxKt","alignWidgetsCenter":"ycZxKt"};
 
 function DataTableCell(initialProps) {
     const props = { ...initialProps };
@@ -3757,7 +3865,7 @@ function DataTableCell(initialProps) {
         props.addons = React.createElement(DataRowAddons, { size: props.size, ...props });
     }
     props.renderPlaceholder = props.renderPlaceholder
-        || (() => (React.createElement(Text, { key: "t", size: props.size }, settings.dataTable.renderPlaceholder())));
+        || (() => settings.dataTable.renderPlaceholder({ rowSize: props.size }));
     props.renderUnknown = props.renderUnknown
         || (() => (React.createElement(Text, { key: "t", size: props.size }, "Unknown")));
     props.renderTooltip = (tooltipProps) => React.createElement(Tooltip, { color: "critical", ...tooltipProps });
@@ -3789,6 +3897,8 @@ function DataTableCell(initialProps) {
         props.isLastColumn && 'uui-dt-last-column',
         css$y[`align-widgets-${props.alignActions || 'top'}`],
         (props.border || isEditable) && 'uui-dt-vertical-cell-border',
+        props.isDisabled && uuiMod.disabled,
+        props.isReadonly && uuiMod.readonly,
     ];
     props.style = {
         '--uui-dt-cell-padding-start': getLeftPadding(),
@@ -3797,7 +3907,7 @@ function DataTableCell(initialProps) {
     return React.createElement(DataTableCell$1, { ...props });
 }
 
-var css$x = {"root":"q0jsTv"};
+var css$x = {"root":"pejHwc"};
 
 // 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.
@@ -3813,7 +3923,7 @@ const DataTableRow = /* @__PURE__ */withMods(DataTableRow$1, ({ borderBottom = t
     ];
 }, () => propsMods);
 
-var css$w = {"sorting-panel-container":"mdTHCP","sortingPanelContainer":"mdTHCP"};
+var css$w = {"sorting-panel-container":"rfUNKD","sortingPanelContainer":"rfUNKD"};
 
 const SortingPanelImpl = ({ sortDirection, onSort }) => {
     const sortAsc = useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
@@ -3825,20 +3935,15 @@ const SortingPanelImpl = ({ sortDirection, onSort }) => {
 const SortingPanel = /* @__PURE__ */React__default.memo(SortingPanelImpl);
 
 const ColumnHeaderDropdownImpl = (props) => {
-    const popperModifiers = useMemo(() => [
-        {
-            name: 'offset',
-            options: { offset: [0, 1] },
-        }, mobilePopperModifier,
-    ], []);
+    const middleware = useMemo(() => [offset(1), mobilePositioning], []);
     const closeDropdown = useCallback(() => props.onOpenChange(false), [props.onOpenChange]);
     return (React__default.createElement(Dropdown$1, { renderTarget: props.renderTarget, renderBody: (dropdownProps) => (React__default.createElement(PickerBodyMobileView, { width: 280, maxWidth: "auto", title: props.title, onClose: closeDropdown },
             props.isSortable && React__default.createElement(SortingPanel, { sortDirection: props.sortDirection, onSort: props.onSort }),
-            props.renderFilter(dropdownProps))), modifiers: popperModifiers, value: props.isOpen, onValueChange: props.onOpenChange }));
+            props.renderFilter(dropdownProps))), middleware: middleware, value: props.isOpen, onValueChange: props.onOpenChange }));
 };
 const ColumnHeaderDropdown = /* @__PURE__ */React__default.memo(ColumnHeaderDropdownImpl);
 
-var css$v = {"root":"L92p9F","caption-wrapper":"uuOirc","captionWrapper":"uuOirc","sort-icon":"QXJ5dc","sortIcon":"QXJ5dc","dropdown-icon":"G0kXyV","dropdownIcon":"G0kXyV","infoIcon":"_5KJcPd","resizable":"WnlWPL","align-right":"pT06XI","alignRight":"pT06XI","align-center":"g2Bq3F","alignCenter":"g2Bq3F","caption":"_9iTmla","truncate":"tAEROV","upper-case":"GBYpun","upperCase":"GBYpun","checkbox":"seHmU0","icon":"Fmh7W-","fold-all-icon":"iyqYaa","foldAllIcon":"iyqYaa","cell-tooltip":"xIf7XQ","cellTooltip":"xIf7XQ","resizing-marker":"CNESRM","resizingMarker":"CNESRM","pinned-right":"S8pEoo","pinnedRight":"S8pEoo","draggable":"_7MZUUp","ghost":"R4wbmm","is-dragged-out":"bxMCO5","isDraggedOut":"bxMCO5","dnd-marker-left":"navFLx","dndMarkerLeft":"navFLx","dnd-marker-right":"umE-vS","dndMarkerRight":"umE-vS","cell-tooltip-wrapper":"F5cUMy","cellTooltipWrapper":"F5cUMy","cell-tooltip-text":"wMWuXI","cellTooltipText":"wMWuXI","tooltip-caption":"zUgvM6","tooltipCaption":"zUgvM6","tooltip-info":"s8FwJv","tooltipInfo":"s8FwJv"};
+var css$v = {"root":"SE6cDe","caption-wrapper":"JRp0yv","captionWrapper":"JRp0yv","sort-icon":"T10qBu","sortIcon":"T10qBu","dropdown-icon":"ncfjoy","dropdownIcon":"ncfjoy","infoIcon":"ERMqpZ","resizable":"_17Iedm","align-right":"NAFMFq","alignRight":"NAFMFq","align-center":"TSZBq8","alignCenter":"TSZBq8","caption":"ParSzD","truncate":"_6QJV1w","upper-case":"WS1muv","upperCase":"WS1muv","checkbox":"ywh4mN","icon":"Ef6xCz","fold-all-icon":"FUMrwm","foldAllIcon":"FUMrwm","cell-tooltip":"WygTQS","cellTooltip":"WygTQS","resizing-marker":"xyis9k","resizingMarker":"xyis9k","pinned-right":"lTLc9m","pinnedRight":"lTLc9m","draggable":"nKiHfH","ghost":"TWWail","is-dragged-out":"XA3zlw","isDraggedOut":"XA3zlw","dnd-marker-left":"sueTk3","dndMarkerLeft":"sueTk3","dnd-marker-right":"MxDW-E","dndMarkerRight":"MxDW-E","cell-tooltip-wrapper":"nvrbCu","cellTooltipWrapper":"nvrbCu","cell-tooltip-text":"TU9NSt","cellTooltipText":"TU9NSt","tooltip-caption":"-MGBu2","tooltipCaption":"-MGBu2","tooltip-info":"YMWYES","tooltipInfo":"YMWYES"};
 
 class DataTableHeaderCell extends React.Component {
     constructor() {
@@ -3859,7 +3964,7 @@ class DataTableHeaderCell extends React.Component {
                 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(Tooltip, { placement: "top", color: "inverted", content: renderTooltip(this.props.column), cx: [css$v.cellTooltip, 'uui-dt-header-tooltip'], openDelay: 600 },
                     React.createElement("div", { key: "text", className: captionCx }, this.props.column.caption)),
                 this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React.createElement(IconButton, { key: "sort", cx: cx$1(css$v.icon, css$v.sortIcon, this.props.sortDirection && css$v.sortIconActive, uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: this.props.sortDirection ? 'neutral' : 'secondary', icon: settings.dataTable.icons.header[this.props.sortDirection === 'desc' ? 'descSortIcon' : this.props.sortDirection === 'asc' ? 'ascSortIcon' : 'defaultSortIcon'] })),
                 this.props.isFilterActive && (React.createElement(IconButton, { key: "filter", cx: cx$1(css$v.icon, !this.props.sortDirection && css$v.filterIcon, uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "neutral", icon: settings.dataTable.icons.header.filterIcon })),
@@ -3932,7 +4037,7 @@ class DataTableHeaderCell extends React.Component {
     }
 }
 
-var css$u = {"root":"_91cIYT","caption-wrapper":"_94poJt","captionWrapper":"_94poJt","align-center":"bHc-qg","alignCenter":"bHc-qg","caption":"tFrk6a","truncate":"ePO6h9","upper-case":"SWaZUl","upperCase":"SWaZUl","group-cell-tooltip":"TFE--A","groupCellTooltip":"TFE--A","group-cell-tooltip-wrapper":"BUeqDu","groupCellTooltipWrapper":"BUeqDu","group-cell-tooltip-text":"qBWpQu","groupCellTooltipText":"qBWpQu","tooltip-caption":"sLC37y","tooltipCaption":"sLC37y","tooltip-info":"_6wi-uR","tooltipInfo":"_6wi-uR"};
+var css$u = {"root":"_4OHIEr","caption-wrapper":"p7FEdW","captionWrapper":"p7FEdW","align-center":"P2i7HJ","alignCenter":"P2i7HJ","caption":"bbJBrt","truncate":"KnAWxt","upper-case":"yl-sBs","upperCase":"yl-sBs","group-cell-tooltip":"KR5tKk","groupCellTooltip":"KR5tKk","group-cell-tooltip-wrapper":"sPV0jU","groupCellTooltipWrapper":"sPV0jU","group-cell-tooltip-text":"LTRjMZ","groupCellTooltipText":"LTRjMZ","tooltip-caption":"UX6YmQ","tooltipCaption":"UX6YmQ","tooltip-info":"f4hIiQ","tooltipInfo":"f4hIiQ"};
 
 class DataTableHeaderGroupCell extends React.Component {
     constructor() {
@@ -3972,7 +4077,7 @@ class DataTableHeaderGroupCell extends React.Component {
     }
 }
 
-var css$t = {"root":"lXhjZY"};
+var css$t = {"root":"_8NLfUR"};
 
 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 })),
@@ -3984,10 +4089,14 @@ const UUI_FILTERS_PANEL_ADD_BUTTON = 'uui-filters-panel-add-button';
 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';
+const UUI_FILTERS_PANEL_ITEM_TOGGLER_TITLE = 'uui-filters-panel-item-toggler-title';
+const UUI_FILTERS_PANEL_ITEM_TOGGLER_SELECTION = 'uui-filters-panel-item-toggler-selection';
+const UUI_FILTERS_PANEL_ITEM_TOGGLER_POSTFIX = 'uui-filters-panel-item-toggler-postfix';
+const UUI_FILTERS_PANEL_BODY_FOOTER = 'uui-filters-panel-item-footer';
 
-var css$s = {"root":"_6XGMo2","title-wrapper":"_--l7Ag","titleWrapper":"_--l7Ag","title":"KJDYwu","text-wrapper":"ySSinV","textWrapper":"ySSinV","selection":"JyACUy","postfix":"dT9Cvz","selected":"_2p6su0"};
+var css$s = {"root":"VD8Kme","title-wrapper":"zGDT-0","titleWrapper":"zGDT-0","title":"gXsDSb","text-wrapper":"_21-5gF","textWrapper":"_21-5gF","selection":"JlCpMV","postfix":"HefdF6","selected":"_2n0VU5"};
 
-function FilterPanelItemToggler(props) {
+const FilterPanelItemToggler = /* @__PURE__ */React.forwardRef((props, ref) => {
     const togglerPickerOpened = (e) => {
         if (props.isDisabled)
             return;
@@ -4008,16 +4117,16 @@ function FilterPanelItemToggler(props) {
     };
     const getTitle = props.predicateName ? `${props.title} ${props.predicateName}` : `${props.title}${props.selection ? ':' : ''}`;
     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),
+        React.createElement("div", { className: cx(css$s.selection, UUI_FILTERS_PANEL_ITEM_TOGGLER_SELECTION) }, i),
         (props.postfix || index !== props.selection.length - 1) && React.createElement("span", null, ",\u00A0"))));
-    return (React.createElement("div", { style: { maxWidth: `${props.maxWidth ? props.maxWidth + 'px' : 'auto'}` }, role: "button", tabIndex: props.isDisabled ? -1 : 0, onKeyDown: onKeyDownHandler, className: cx(UUI_FILTERS_PANEL_ITEM_TOGGLER, css$s.root, uuiElement.inputBox, uuiMarkers.clickable, props.isOpen && uuiMod.opened, `uui-size-${props.size || settings.pickerInput.sizes.toggler.default}`, props.cx), onClick: togglerPickerOpened, ref: props.ref },
+    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, props.selection?.length > 0 && uuiMarkers.hasValue, `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),
+            React.createElement("div", { className: cx(css$s.title, UUI_FILTERS_PANEL_ITEM_TOGGLER_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.postfix && (React.createElement("div", { className: cx(css$s.postfix, UUI_FILTERS_PANEL_ITEM_TOGGLER_POSTFIX) }, props.postfix))))),
         !props.isDisabled && React.createElement(IconContainer, { icon: settings.filtersPanel.icons.itemDropdownIcon, flipY: props.isOpen, cx: "uui-icon-dropdown" })));
-}
+});
 
 const pickerHeight = 300;
 function FilterPickerBody({ highlightSearchMatches = true, ...restProps }) {
@@ -4053,7 +4162,7 @@ function FilterPickerBody({ highlightSearchMatches = true, ...restProps }) {
         };
         return props.renderFooter
             ? props.renderFooter(footerProps)
-            : React.createElement(DataPickerFooter, { ...footerProps, size: settings.pickerInput.sizes.body.row });
+            : React.createElement(DataPickerFooter, { ...footerProps, cx: UUI_FILTERS_PANEL_BODY_FOOTER, size: settings.pickerInput.sizes.body.row });
     };
     const renderBody = () => {
         const rows = view.getVisibleRows();
@@ -4144,7 +4253,7 @@ function FilterRangeDatePickerBody(props) {
                 }, onValueChange: onBodyValueChange, filter: props.filter, presets: props.presets })),
         React__default.createElement(FlexCell, { alignSelf: "stretch" },
             React__default.createElement(FlexRow, { padding: "24", vPadding: "12" },
-                React__default.createElement(RangeDatePickerInput, { size: "30", disableClear: props.disableClear, inFocus: inFocus, format: format, value: value, onValueChange: onValueChange, onFocusInput: (event, inputType) => {
+                React__default.createElement(RangeDatePickerInput, { size: settings.filtersPanel.sizes.rangeDatePickerInput, disableClear: props.disableClear, inFocus: inFocus, format: format, value: value, onValueChange: onValueChange, onFocusInput: (event, inputType) => {
                         if (props.onFocus) {
                             props.onFocus(event, inputType);
                         }
@@ -4154,7 +4263,7 @@ function FilterRangeDatePickerBody(props) {
                 React__default.createElement(LinkButton, { isDisabled: !value.from && !value.to, caption: i18n.pickerModal.clearAllButton, onClick: () => onValueChange(defaultRangeValue) })))));
 }
 
-var css$r = {"container":"wAoLm1"};
+var css$r = {"container":"mJGwgK"};
 
 function FilterNumericBody(props) {
     const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
@@ -4183,7 +4292,6 @@ function FilterNumericBody(props) {
         }
     };
     const renderFooter = () => {
-        const size = isMobile() ? '48' : '36';
         const clearSelection = () => {
             if (isInRangePredicate) {
                 props.onValueChange({
@@ -4199,22 +4307,22 @@ function FilterNumericBody(props) {
         return (React__default.createElement(FlexRow, { padding: "12" },
             React__default.createElement(FlexSpacer, null),
             React__default.createElement(FlexCell, { width: "auto", alignSelf: "center" },
-                React__default.createElement(LinkButton, { isDisabled: isClearDisabled, size: size, caption: i18n.pickerInput.clearSelectionButtonSingle, onClick: clearSelection }))));
+                React__default.createElement(LinkButton, { isDisabled: isClearDisabled, size: settings.filtersPanel.sizes[isMobile() ? 'mobileFooterLinkButton' : 'footerLinkButton'], caption: i18n.pickerInput.clearSelectionButtonSingle, onClick: clearSelection }))));
     };
     if (isInRangePredicate) {
         const value = props.value;
         return (React__default.createElement("div", null,
-            React__default.createElement(FlexRow, { padding: "12", alignItems: "center", spacing: "12", borderBottom: true, cx: css$r.container },
+            React__default.createElement(FlexRow, { padding: "12", alignItems: "center", columnGap: "12", borderBottom: true, cx: css$r.container },
                 React__default.createElement(FlexCell, { width: "100%" },
-                    React__default.createElement(NumericInput, { value: value?.from ?? null, onValueChange: rangeValueHandler('from'), placeholder: "Min", formatOptions: { maximumFractionDigits: 2 } })),
+                    React__default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: value?.from ?? null, onValueChange: rangeValueHandler('from'), placeholder: "Min", formatOptions: { maximumFractionDigits: 2 } })),
                 React__default.createElement(FlexCell, { width: "100%" },
-                    React__default.createElement(NumericInput, { value: value?.to ?? null, onValueChange: rangeValueHandler('to'), placeholder: "Max", formatOptions: { maximumFractionDigits: 2 }, isInvalid: isWrongRange(value?.from, value?.to) }))),
+                    React__default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: value?.to ?? null, onValueChange: rangeValueHandler('to'), placeholder: "Max", formatOptions: { maximumFractionDigits: 2 }, isInvalid: isWrongRange(value?.from, value?.to) }))),
             renderFooter()));
     }
     return (React__default.createElement("div", null,
         React__default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$r.container },
             React__default.createElement(FlexCell, { width: 130 },
-                React__default.createElement(NumericInput, { value: typeof props.value === 'number' ? props.value : null, onValueChange: props.onValueChange, placeholder: "Enter a number", formatOptions: { maximumFractionDigits: 2 } }))),
+                React__default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: typeof props.value === 'number' ? props.value : null, onValueChange: props.onValueChange, placeholder: "Enter a number", formatOptions: { maximumFractionDigits: 2 } }))),
         renderFooter()));
 }
 
@@ -4235,22 +4343,7 @@ function FilterItemBody(props) {
     }
 }
 
-var _path$a;
-function _extends$a() { return _extends$a = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$a.apply(null, arguments); }
-var SvgActionDeleteOutline = function SvgActionDeleteOutline(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: "M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3H9zM7 6h10v13H7V6zm2 2v9h2V8H9zm4 0v9h2V8h-2z"
-  })));
-};
-var ForwardRef$a = /*#__PURE__*/forwardRef(SvgActionDeleteOutline);
-
-var css$q = {"header":"jtnc4A","removeButton":"ybDfYZ","with-search":"QvmbLe","withSearch":"QvmbLe"};
+var css$q = {"body":"DyMDKq","header":"W5bcyn","title":"ZWfTNb","removeButton":"_5wGPK5","with-search":"DwSdtq","withSearch":"DwSdtq"};
 
 function useView(props, value) {
     const forceUpdate = useForceUpdate();
@@ -4271,25 +4364,16 @@ function FiltersToolbarItemImpl(props) {
     const { maxCount = 2 } = props;
     const isPickersType = props?.type === 'multiPicker' || props?.type === 'singlePicker';
     const isMobileScreen = isMobile();
-    const popperModifiers = useMemo(() => {
-        const modifiers = [
-            {
-                name: 'offset',
-                options: { offset: isPickersType && isMobileScreen ? [0, 0] : [0, 6] },
-            },
+    const floatingMiddleware = useMemo(() => {
+        const middleware = [
+            offset(() => {
+                return isPickersType && isMobileScreen ? 0 : 6;
+            }),
         ];
         if (isPickersType && isMobileScreen) {
-            modifiers.push({
-                name: 'resetTransform',
-                enabled: true,
-                phase: 'beforeWrite',
-                requires: ['computeStyles'],
-                fn: ({ state }) => {
-                    state.styles.popper.transform = '';
-                },
-            });
+            middleware.push(mobilePositioning);
         }
-        return modifiers;
+        return middleware;
     }, [isPickersType]);
     const getDefaultPredicate = () => {
         if (!props.predicates) {
@@ -4338,13 +4422,13 @@ function FiltersToolbarItemImpl(props) {
         setPredicate(val);
     };
     const renderHeader = (hideTitle) => (React__default.createElement("div", { className: cx(css$q.header, isPickersType && (props.showSearch ?? css$q.withSearch)) },
-        props.predicates ? (React__default.createElement(MultiSwitch, { items: props.predicates.map((i) => ({ id: i.predicate, caption: i.name })), value: predicate, onValueChange: changePredicate, size: "24" })) : (!hideTitle && (React__default.createElement(Text, { color: "secondary", size: "24", fontSize: "14" }, props.title))),
-        !props?.isAlwaysVisible && (React__default.createElement(LinkButton, { cx: css$q.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: "24", icon: ForwardRef$a }))));
+        props.predicates ? (React__default.createElement(MultiSwitch, { items: props.predicates.map((i) => ({ id: i.predicate, caption: i.name })), value: predicate, onValueChange: changePredicate, size: settings.filtersPanel.sizes.pickerBodyMultiSwitch })) : (!hideTitle && (React__default.createElement("div", { className: css$q.title }, props.title))),
+        !props?.isAlwaysVisible && (React__default.createElement(LinkButton, { cx: css$q.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: settings.filtersPanel.sizes.pickerBodyLinkButton, icon: settings.filtersPanel.icons.pickerBodyRemoveIcon }))));
     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) },
+        return isPickersType ? (React__default.createElement(PickerBodyMobileView, { ...dropdownProps, cx: [css$q.body, UUI_FILTERS_PANEL_ITEM_BODY], title: props.title, width: settings.filtersPanel.sizes.pickerBodyMinWidth, onClose: () => isOpenChange(false) },
             renderHeader(hideHeaderTitle),
-            React__default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(), onValueChange: onValueChange }))) : (React__default.createElement(DropdownContainer, { cx: UUI_FILTERS_PANEL_ITEM_BODY, ...dropdownProps },
+            React__default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(), onValueChange: onValueChange }))) : (React__default.createElement(DropdownContainer, { cx: [css$q.body, UUI_FILTERS_PANEL_ITEM_BODY], ...dropdownProps },
             renderHeader(hideHeaderTitle),
             React__default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(), onValueChange: onValueChange })));
     };
@@ -4353,7 +4437,7 @@ function FiltersToolbarItemImpl(props) {
     };
     const getPickerItemName = (item, config) => {
         if (item.isLoading) {
-            return React__default.createElement(TextPlaceholder, null);
+            return settings.filtersPanel.renderPlaceholder();
         }
         if (item.isUnknown) {
             return 'Unknown';
@@ -4424,7 +4508,7 @@ function FiltersToolbarItemImpl(props) {
         return props.type === 'datePicker' || props.type === 'rangeDatePicker' ? null : 300;
     };
     const renderTarget = (dropdownProps) => (React__default.createElement(FilterPanelItemToggler, { ...dropdownProps, ...getTogglerValue(), title: props.title, predicateName: props.value ? predicateName : null, maxWidth: getTogglerWidth(), size: props.size }));
-    return (React__default.createElement(Dropdown$1, { renderTarget: renderTarget, renderBody: renderBody, closeBodyOnTogglerHidden: !isMobile(), value: isOpen, onValueChange: isOpenChange, modifiers: popperModifiers }));
+    return (React__default.createElement(Dropdown$1, { renderTarget: renderTarget, renderBody: renderBody, closeBodyOnTogglerHidden: !isMobile(), value: isOpen, onValueChange: isOpenChange, middleware: floatingMiddleware }));
 }
 const FiltersPanelItem = /* @__PURE__ */React__default.memo(FiltersToolbarItemImpl);
 
@@ -4556,88 +4640,7 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = /* @__PURE__ */React__default.memo(FiltersToolbarImpl);
 
-var css$p = {"divider":"-R9lFS","dropdownDeleteIcon":"bps3Ov","presetsWrapper":"MeBz6K","addPresetContainer":"_613Qa1","dropContainer":"VqI9Hn"};
-
-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$9({
-    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", {
-    d: "M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm2 16H5V5h11.17L19 7.83V19zm-7-7c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zM6 6h9v4H6V6z"
-  })));
-};
-var ForwardRef$9 = /*#__PURE__*/forwardRef(SvgActionSaveOutline);
-
-var _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$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", {
-    d: "M22.5 15a8.71 8.71 0 0 0-.712-3.513 9.158 9.158 0 0 0-1.926-2.85 9.152 9.152 0 0 0-2.85-1.925A8.709 8.709 0 0 0 13.5 6a8.71 8.71 0 0 0-3.513.712 9.167 9.167 0 0 0-2.85 1.925 9.154 9.154 0 0 0-1.924 2.85A8.705 8.705 0 0 0 4.5 15v.15L2.95 13.6 1.5 15l4 4 4-4-1.45-1.4-1.55 1.55V15c0-1.95.679-3.604 2.037-4.962C9.896 8.679 11.55 8 13.5 8c1.95 0 3.604.68 4.962 2.038C19.821 11.396 20.5 13.05 20.5 15h2z"
-  })));
-};
-var ForwardRef$8 = /*#__PURE__*/forwardRef(SvgContentEditUndoOutline);
-
-var _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$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", {
-    fillRule: "evenodd",
-    d: "M19 19H9V9h10M9 7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H9zm5-4H5a2 2 0 0 0-2 2v9h2V5h9V3z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$7 = /*#__PURE__*/forwardRef(SvgActionCopyContentOutline);
-
-var _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$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: "m19.3 8.925-4.25-4.2 1.4-1.4a1.92 1.92 0 0 1 1.413-.575 1.92 1.92 0 0 1 1.412.575l1.4 1.4c.383.383.583.846.6 1.388a1.806 1.806 0 0 1-.55 1.387L19.3 8.925zM17.85 10.4 7.25 21H3v-4.25l10.6-10.6 4.25 4.25z"
-  })));
-};
-var ForwardRef$6 = /*#__PURE__*/forwardRef(SvgContentEditFill);
-
-var _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$5({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
-    d: "M12 4.93A5 5 0 0 1 19.07 12l-1.06 1.06c.12-.85.022-1.725-.295-2.534a3 3 0 0 0-4.302-4.182l-2.828 2.828a3 3 0 0 0-.07 4.17l.07.073-1.415 1.414a5 5 0 0 1 0-7.071L12 4.929z"
-  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
-    d: "m4.93 12 .989-.99a5.018 5.018 0 0 0 .297 2.54 3 3 0 0 0 4.37 4.107l2.829-2.828a3 3 0 0 0-.828-4.83l1.464-1.463a5 5 0 0 1 .778 7.707L12 19.071a5 5 0 0 1-7.07-7.07z"
-  })));
-};
-var ForwardRef$5 = /*#__PURE__*/forwardRef(SvgContentLinkOutline);
-
-var css$o = {"delete-button":"jT0xBT","deleteButton":"jT0xBT","tab-button":"wil-YJ","tabButton":"wil-YJ","targetOpen":"Z3tbgq"};
+var css$p = {"delete-button":"Om--Ji","deleteButton":"Om--Ji","tab-button":"SsB9JS","tabButton":"SsB9JS","targetOpen":"HqHuXA"};
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = useUuiContext();
@@ -4662,7 +4665,7 @@ function PresetActionsDropdown(props) {
     const successNotificationHandler = useCallback((text) => {
         uuiNotifications
             .show((props) => (React__default.createElement(SuccessNotification, { ...props },
-            React__default.createElement(Text, { size: "36", fontSize: "14" }, text))), { duration: 3 })
+            React__default.createElement("div", { className: "uui-presets-panel-notification-text" }, text))), { duration: 3 })
             .catch(() => null);
     }, []);
     const saveInCurrentHandler = useCallback(() => {
@@ -4685,32 +4688,32 @@ function PresetActionsDropdown(props) {
         const isRenameAvailable = props.preset.id === props.activePresetId && !isReadonlyPreset;
         return (React__default.createElement(DropdownMenuBody, { ...dropdownProps },
             isPresetChanged && (React__default.createElement(React__default.Fragment, null,
-                !isReadonlyPreset && (React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-save-in-current`, icon: ForwardRef$E, caption: "Save in current", onClick: () => { dropdownProps.onClose(); saveInCurrentHandler(); } })),
-                React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-save-as-new`, icon: ForwardRef$9, caption: "Save as new", 
+                !isReadonlyPreset && (React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-save-in-current`, icon: settings.presetsPanel.icons.saveInCurrentIcon, caption: "Save in current", onClick: () => { dropdownProps.onClose(); saveInCurrentHandler(); } })),
+                React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-save-as-new`, icon: settings.presetsPanel.icons.saveAsNewIcon, caption: "Save as new", 
                     // We add setTimeout to call addPreset after dropdown will be closed, since dropdown has focus lock, and it broke autofocus on add new preset input
                     onClick: () => { dropdownProps.onClose(); setTimeout(() => props.addPreset(), 0); } }),
-                React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-discard`, icon: ForwardRef$8, caption: "Discard all changes", onClick: () => { dropdownProps.onClose(); discardAllChangesHandler(); } }),
+                React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-discard`, icon: settings.presetsPanel.icons.discardChangesIcon, caption: "Discard all changes", onClick: () => { dropdownProps.onClose(); discardAllChangesHandler(); } }),
                 React__default.createElement(DropdownMenuSplitter, { key: "discard-splitter" }))),
-            isRenameAvailable && (React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-rename`, icon: ForwardRef$6, caption: "Rename", onClick: props.renamePreset })),
-            React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-duplicate`, icon: ForwardRef$7, caption: "Duplicate", onClick: () => { dropdownProps.onClose(); duplicateHandler(); } }),
-            React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-copyLink`, icon: ForwardRef$5, caption: "Copy Link", onClick: copyUrlToClipboard }),
+            isRenameAvailable && (React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-rename`, icon: settings.presetsPanel.icons.renameIcon, caption: "Rename", onClick: props.renamePreset })),
+            React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-duplicate`, icon: settings.presetsPanel.icons.copyIcon, caption: "Duplicate", onClick: () => { dropdownProps.onClose(); duplicateHandler(); } }),
+            React__default.createElement(DropdownMenuButton, { key: `${props.preset.id}-copyLink`, icon: settings.presetsPanel.icons.copyLinkIcon, caption: "Copy Link", onClick: copyUrlToClipboard }),
             !isReadonlyPreset && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(DropdownMenuSplitter, { key: "delete-splitter" }),
-                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$a, caption: "Delete", cx: css$o.deleteButton, onClick: deleteHandler })))));
+                React__default.createElement(DropdownMenuButton, { icon: settings.presetsPanel.icons.deleteIcon, caption: "Delete", cx: css$p.deleteButton, onClick: deleteHandler })))));
     };
     const renderTarget = useCallback((dropdownProps) => {
-        return (React__default.createElement(IconButton, { cx: [css$o.tabButton, dropdownProps.isOpen && css$o.targetOpen], color: props.preset.id === props.activePresetId ? 'primary' : 'neutral', ...dropdownProps, icon: ForwardRef$F, size: "18" }));
+        return (React__default.createElement(IconButton, { cx: [css$p.tabButton, dropdownProps.isOpen && css$p.targetOpen], color: props.preset.id === props.activePresetId ? 'primary' : 'neutral', ...dropdownProps, icon: settings.presetsPanel.icons.menuIcon, size: settings.presetsPanel.sizes.dropdownTargetIconButton }));
     }, []);
-    return (React__default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", modifiers: [{ name: 'offset', options: { offset: [0, 22] } }] }));
+    return (React__default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", middleware: [offset(22)] }));
 }
 
-var css$n = {"preset-input-cell":"I8DifD","presetInputCell":"I8DifD","preset-input":"_9Eu-d9","presetInput":"_9Eu-d9"};
-
 const UUI_PRESETS_PANEL_ADD_BUTTON = 'uui-presets-panel-add-button';
 const UUI_PRESETS_PANEL_MORE_BUTTON = 'uui-presets-panel-more-button';
 const UUI_PRESETS_PANEL_INPUT = 'uui-presets-panel-input';
 const UUI_PRESETS_PANEL_PRESET = 'uui-presets-panel-preset';
 
+var css$o = {"preset-input-cell":"LqTEj-","presetInputCell":"LqTEj-","preset-input":"IEY9d8","presetInput":"IEY9d8"};
+
 function PresetInput(props) {
     const [presetCaption, setPresetCaption] = useState(props.preset?.name || '');
     const [readonly, setReadonly] = useState(false);
@@ -4732,11 +4735,11 @@ function PresetInput(props) {
         }
         props.onCancel();
     }, [presetCaption.length, props.onCancel]);
-    return (React__default.createElement(FlexCell, { cx: [css$n.presetInputCell, UUI_PRESETS_PANEL_INPUT], minWidth: 180 },
-        React__default.createElement(TextInput, { cx: css$n.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50, isReadonly: readonly })));
+    return (React__default.createElement(FlexCell, { cx: [css$o.presetInputCell, UUI_PRESETS_PANEL_INPUT], minWidth: 180 },
+        React__default.createElement(TextInput, { cx: css$o.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50, isReadonly: readonly })));
 }
 
-var css$m = {"preset":"JaGzMQ","activePreset":"iN3qwd"};
+var css$n = {"preset":"dSgbDC","activePreset":"_0hJTxx"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = useState(false);
@@ -4758,25 +4761,10 @@ function Preset(props) {
     }, [props.preset]);
     const isPresetActive = props.activePresetId === props.preset.id;
     const PresetActionsDropdownComponent = useCallback(() => React__default.createElement(PresetActionsDropdown, { renamePreset: setPresetForRename, ...props }), [props.preset, props.tableState, props.activePresetId]);
-    return (React__default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$m.preset, isPresetActive && css$m.activePreset, UUI_PRESETS_PANEL_PRESET], size: "60", withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: PresetActionsDropdownComponent, iconPosition: "right", isLinkActive: isPresetActive }))));
+    return (React__default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$n.preset, isPresetActive && css$n.activePreset, UUI_PRESETS_PANEL_PRESET], size: settings.presetsPanel.sizes.tabButton, withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: PresetActionsDropdownComponent, iconPosition: "right", isLinkActive: isPresetActive }))));
 }
 
-var _path$4;
-function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
-var SvgActionDeleteForeverFill = function SvgActionDeleteForeverFill(props, ref) {
-  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$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$4 = /*#__PURE__*/forwardRef(SvgActionDeleteForeverFill);
+var css$m = {"divider":"fttSWb","dropdownDeleteIcon":"zZJv4Y","presetsWrapper":"GZEBGn","addPresetContainer":"Nmm76C","dropContainer":"q4aU6h"};
 
 function PresetsPanel(props) {
     const [isAddingPreset, setIsAddingPreset] = useState(false);
@@ -4791,16 +4779,16 @@ function PresetsPanel(props) {
         return React__default.createElement(Preset, { key: preset.id, preset: preset, addPreset: setAddingPreset, ...presetApi });
     };
     const renderAddPresetButton = useCallback(() => {
-        return (React__default.createElement("div", { key: "addingPresetBlock", className: css$p.addPresetContainer }, !isAddingPreset ? (React__default.createElement(Button, { cx: UUI_PRESETS_PANEL_ADD_BUTTON, onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: ForwardRef$s, iconPosition: "left", fill: "ghost", color: "primary" })) : (React__default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
+        return (React__default.createElement("div", { key: "addingPresetBlock", className: css$m.addPresetContainer }, !isAddingPreset ? (React__default.createElement(Button, { cx: UUI_PRESETS_PANEL_ADD_BUTTON, onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: settings.presetsPanel.icons.addIcon, iconPosition: "left", fill: "ghost", color: "primary" })) : (React__default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
     }, [isAddingPreset]);
     const onPresetDropdownSelect = (preset) => {
         props.choosePreset(preset.preset);
     };
     const renderMoreButtonDropdown = (item, hiddenItems) => {
         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("div", { className: css$m.divider }),
                 React__default.createElement(Button, { cx: UUI_PRESETS_PANEL_MORE_BUTTON, fill: "ghost", color: "secondary", caption: `${hiddenItems?.length || ''} more`, ...props }))), renderBody: (propsBody) => (React__default.createElement(DropdownMenuBody, { minWidth: 230, maxHeight: 300, ...propsBody },
-                React__default.createElement(ScrollBars, null, hiddenItems.map((hiddenItem) => (React__default.createElement(DropdownMenuButton, { key: hiddenItem.preset.id, onClick: () => onPresetDropdownSelect(hiddenItem), caption: hiddenItem.preset.name, icon: !hiddenItem.preset.isReadonly && ForwardRef$4, iconPosition: "right", cx: css$p.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
+                React__default.createElement(ScrollBars, null, hiddenItems.map((hiddenItem) => (React__default.createElement(DropdownMenuButton, { key: hiddenItem.preset.id, onClick: () => onPresetDropdownSelect(hiddenItem), caption: hiddenItem.preset.name, icon: !hiddenItem.preset.isReadonly && settings.presetsPanel.icons.deleteIcon, iconPosition: "right", cx: css$m.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
     };
     const getPresetPriority = (preset, index) => {
         return preset.id === props.activePresetId ? 100499 : 1000 - index;
@@ -4821,7 +4809,7 @@ function PresetsPanel(props) {
         ];
     };
     return (React__default.createElement(FlexCell, { grow: 1, minWidth: 310, rawProps: props.rawProps },
-        React__default.createElement(FlexRow, { size: null, columnGap: "12", cx: css$p.presetsWrapper },
+        React__default.createElement(FlexRow, { size: null, columnGap: "12", cx: css$m.presetsWrapper },
             React__default.createElement(AdaptivePanel, { items: getPanelItems() }))));
 }
 
@@ -4862,7 +4850,7 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var css$l = {"unpin-icon":"oofhJb","unpinIcon":"oofhJb","pin-toggler-icon":"X0-Tuf","pinTogglerIcon":"X0-Tuf"};
+var css$l = {"unpin-icon":"szd22F","unpinIcon":"szd22F","pin-toggler-icon":"XPRJIi","pinTogglerIcon":"XPRJIi"};
 
 function PinIconButton(props) {
     const i18nLocal = i18n.tables.columnsConfigurationModal;
@@ -4904,7 +4892,7 @@ function getUnpinIcon(params) {
     }
 }
 
-var css$k = {"row-wrapper":"w5qtg8","rowWrapper":"w5qtg8","pin-icon-button":"Zo9soQ","pinIconButton":"Zo9soQ","not-pinned":"YcqIZu","notPinned":"YcqIZu","checkbox":"NyZLxU","drag-handle":"F8TzZX","dragHandle":"F8TzZX","dnd-disabled":"RScuwh","dndDisabled":"RScuwh"};
+var css$k = {"row-wrapper":"mIBZo3","rowWrapper":"mIBZo3","pin-icon-button":"ThZEuU","pinIconButton":"ThZEuU","not-pinned":"deHVzI","notPinned":"deHVzI","checkbox":"xSuFSR","drag-handle":"Kso0bU","dragHandle":"Kso0bU","dnd-disabled":"RfInx3","dndDisabled":"RfInx3"};
 
 const ColumnRow = /* @__PURE__ */React.memo(function ColumnRow(props) {
     const { column } = props;
@@ -4927,7 +4915,7 @@ const ColumnRow = /* @__PURE__ */React.memo(function ColumnRow(props) {
     return (React.createElement(DndActor, { key: column.key, srcData: isDndAllowed && data, dstData: data, canAcceptDrop: onCanAcceptDrop, onDrop: onDrop, render: renderContent }));
 });
 
-var css$j = {"root":"GEQceO","main-panel":"BGx004","mainPanel":"BGx004","group":"DcNwEg","group-title":"MrvCSq","groupTitle":"MrvCSq","group-items":"Teynei","groupItems":"Teynei","no-data":"-tU1lE","noData":"-tU1lE","no-data-title":"M8asrt","noDataTitle":"M8asrt","no-data-sub-title":"EYwkqz","noDataSubTitle":"EYwkqz","h-divider":"isIZHB","hDivider":"isIZHB","search-area":"BiWPsM","searchArea":"BiWPsM","subgroup-accordion":"smVDMX","subgroupAccordion":"smVDMX","subgroup":"octPB6","subgroup-title":"WxDA84","subgroupTitle":"WxDA84"};
+var css$j = {"root":"tUbGSg","main-panel":"MSKPOC","mainPanel":"MSKPOC","group":"x7xTZ7","group-title":"w-7cin","groupTitle":"w-7cin","group-items":"HM4qF3","groupItems":"HM4qF3","no-data":"mI5lov","noData":"mI5lov","no-data-title":"JJV3zu","noDataTitle":"JJV3zu","no-data-sub-title":"MiGrzM","noDataSubTitle":"MiGrzM","h-divider":"cChCeQ","hDivider":"cChCeQ","search-area":"_4UNdmg","searchArea":"_4UNdmg","subgroup-accordion":"Mn6vO-","subgroupAccordion":"Mn6vO-","subgroup":"U1V7Wz","subgroup-title":"uYprup","subgroupTitle":"uYprup"};
 
 const renderGroupTitle = (title, amount) => (React.createElement(FlexRow, { cx: css$j.group },
     React.createElement(Text, { size: "none", cx: css$j.groupTitle }, title),
@@ -5029,7 +5017,7 @@ const getChildrenAndRest = (row, rows) => {
     return [children, rest];
 };
 
-var css$i = {"listContainer":"oqRtor","header":"ZqHKqu","group":"b19kv2","stickyHeader":"y5Ak1W"};
+var css$i = {"listContainer":"ywXG8F","header":"-O-kKZ","group":"IKQmwO","stickyHeader":"fUTAt0"};
 
 function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
     const rowRef = useRef(undefined);
@@ -5064,12 +5052,12 @@ function DataRowsGroups({ rows, renderRow, top = 1, }) {
 }
 
 function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, renderRow, headerRef, }) {
-    return (React__default.createElement("div", { className: css$i.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+    return (React__default.createElement("div", { className: cx(css$i.listContainer, 'uui-dt-data_row_container'), style: { minHeight: `${estimatedHeight}px` } },
         React__default.createElement("div", { ref: listContainerRef, role: "rowgroup", style: { marginTop: offsetY } },
             React__default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
 }
 
-var css$h = {"root":"FUCRN9","sticky-header":"ZQM9pH","stickyHeader":"ZQM9pH","no-results":"_3LuXji","noResults":"_3LuXji","icon":"_2cIYuH","title":"cotYw7"};
+var css$h = {"root":"bcdGKb","sticky-header":"_4Q-Hy-","stickyHeader":"_4Q-Hy-","no-results":"Eg-Wh-","noResults":"Eg-Wh-","icon":"L8ubRp","title":"gqN8dw"};
 
 function DataTable(props) {
     const { uuiModals } = useUuiContext();
@@ -5101,7 +5089,7 @@ function DataTable(props) {
         props.columns, config, defaultConfig, props.value, props.onValueChange, props.renderColumnsConfigurationModal,
     ]);
     const renderRowsContainer = React.useCallback(({ listContainerRef, estimatedHeight, offsetY, scrollShadows }) => (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: css$h.stickyHeader, ref: headerRef },
+        React.createElement("div", { className: cx$1(css$h.stickyHeader, 'uui-dt-sticky_header'), ref: headerRef },
             React.createElement(DataTableHeaderRow, { columns: columns, columnGroups: props.columnGroups, onConfigButtonClick: props.showColumnsConfig && onConfigurationButtonClick, selectAll: props.selectAll, size: props.headerSize || settings.dataTable.sizes.header.row, textCase: props.headerTextCase, allowColumnsReordering: props.allowColumnsReordering, allowColumnsResizing: props.allowColumnsResizing, showFoldAll: props.showFoldAll, value: { ...props.value, columnsConfig: config }, onValueChange: props.onValueChange, columnsGap: props.columnsGap }),
             React.createElement("div", { className: cx$1(uuiScrollShadows.top, {
                     [uuiScrollShadows.topVisible]: scrollShadows.verticalTop,
@@ -5111,16 +5099,16 @@ function DataTable(props) {
     ]);
     return (React.createElement(DataTableSelectionProvider, { onCopy: props.onCopy, rows: rows, columns: columns },
         React.createElement(DataTableFocusProvider, { dataTableFocusManager: props.dataTableFocusManager },
-            React.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rowsCount: props.rowsCount, renderRows: renderRowsContainer, cx: cx$1(css$h.root, 'uui-dt-vars'), isLoading: props.isReloading, rowsSelector: "[role=row]", rawProps: {
+            React.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rowsCount: props.rowsCount, renderRows: renderRowsContainer, cx: cx$1(css$h.root, 'uui-dt-vars', 'uui-data_table'), isLoading: props.isReloading, rowsSelector: "[role=row]", rawProps: {
                     role: 'table',
                     'aria-colcount': columns.length,
                     'aria-rowcount': props.rowsCount,
                 } }))));
 }
 
-var css$g = {"root":"-LxdRE"};
+var css$g = {"root":"aAtnur"};
 
-var css$f = {"root":"jsVsOT","burger-content":"lO8pNv","burgerContent":"lO8pNv"};
+var css$f = {"root":"_1EY-8s","burger-content":"_4VU5Cn","burgerContent":"_4VU5Cn"};
 
 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); }
@@ -5142,7 +5130,7 @@ function applyBurgerMods() {
 }
 const Burger = /* @__PURE__ */withMods(Burger$1, applyBurgerMods, () => ({
     burgerIcon: ForwardRef$3,
-    crossIcon: ForwardRef$R,
+    crossIcon: ForwardRef$Q,
     burgerContentCx: css$f.burgerContent,
 }));
 
@@ -5163,7 +5151,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
 };
 var ForwardRef$2 = /*#__PURE__*/forwardRef(SvgNavigationArrowDownOutline);
 
-var css$e = {"root":"CbTRCs","button-primary":"xEGgDk","buttonPrimary":"xEGgDk","button-secondary":"e8xHVZ","buttonSecondary":"e8xHVZ","hasIcon":"H0R1lR","dropdown":"tmrscA"};
+var css$e = {"root":"gWtc0k","button-primary":"SKsQ2h","buttonPrimary":"SKsQ2h","button-secondary":"_3rTI7P","buttonSecondary":"_3rTI7P","hasIcon":"h7l049","dropdown":"zRDQzy"};
 
 const BurgerButton = /* @__PURE__ */withMods(Button$1, (props) => [
     css$e.root,
@@ -5174,13 +5162,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":"uvSB8Y","searchInput":"uvSB8Y"};
+var css$d = {"search-input":"-Ty7sl","searchInput":"-Ty7sl"};
 
 function BurgerSearch(props) {
-    return (React.createElement(TextInput$1, { cx: cx(css$d.searchInput, 'uui-main_menu-burger-search'), iconPosition: "left", icon: ForwardRef$N, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$R }));
+    return (React.createElement(TextInput$1, { cx: cx(css$d.searchInput, 'uui-main_menu-burger-search'), iconPosition: "left", icon: ForwardRef$M, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$Q }));
 }
 
-var css$c = {"root":"yM25Ct","group-header":"JwWXaz","groupHeader":"JwWXaz","group-name":"VSLEhD","groupName":"VSLEhD","line":"m-1XYE"};
+var css$c = {"root":"rCzT9s","group-header":"L4-RfE","groupHeader":"L4-RfE","group-name":"bb6DZS","groupName":"bb6DZS","line":"szPD8C"};
 
 function BurgerGroupHeader(props) {
     return (React.createElement("div", { className: cx(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
@@ -5188,9 +5176,9 @@ function BurgerGroupHeader(props) {
         React.createElement("span", { className: css$c.groupName }, props.caption)));
 }
 
-var css$b = {"root":"ntLckT","type-primary":"oH4lhE","typePrimary":"oH4lhE","type-secondary":"mZSdS9","typeSecondary":"mZSdS9"};
+var css$b = {"root":"CfcaXT","type-primary":"_4P0wBR","typePrimary":"_4P0wBR","type-secondary":"viH5vB","typeSecondary":"viH5vB"};
 
-function MainMenuButton(props) {
+const MainMenuButton = /* @__PURE__ */React.forwardRef((props, ref) => {
     const { type, ...clickableProps } = props;
     return (React.createElement(Clickable, { ...clickableProps, rawProps: {
             'aria-expanded': props.isOpen,
@@ -5202,15 +5190,15 @@ function MainMenuButton(props) {
             css$b.root,
             css$b['type-' + (type || 'primary')],
             props.cx,
-        ], ref: props.ref },
+        ], ref: ref },
         props.icon && props.iconPosition !== 'right' && (React.createElement(IconContainer, { icon: props.icon, onClick: props.onIconClick })),
         props.caption && (React.createElement("div", { className: uuiElement.caption }, props.caption)),
         props.count !== undefined && props.count !== null && (React.createElement(CountIndicator, { caption: props.count, color: "neutral", size: "18" })),
         props.icon && props.iconPosition === 'right' && (React.createElement(IconContainer, { icon: props.icon, onClick: props.onIconClick })),
-        props.isDropdown && (React.createElement(IconContainer, { icon: ForwardRef$Q, flipY: props.isOpen }))));
-}
+        props.isDropdown && (React.createElement(IconContainer, { icon: ForwardRef$P, flipY: props.isOpen }))));
+});
 
-var css$a = {"dropdown-body":"wyrMWC","dropdownBody":"wyrMWC"};
+var css$a = {"dropdown-body":"wNcr-b","dropdownBody":"wNcr-b"};
 
 class MainMenuDropdown extends React.Component {
     render() {
@@ -5268,36 +5256,28 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
 };
 var ForwardRef$1 = /*#__PURE__*/forwardRef(SvgNavigationGlobalMenuOutlineOutline);
 
-var css$9 = {"global-menu-btn":"XByv5T","globalMenuBtn":"XByv5T","global-menu-icon":"dnTOyF","globalMenuIcon":"dnTOyF"};
+var css$9 = {"global-menu-btn":"SDnwCK","globalMenuBtn":"SDnwCK","global-menu-icon":"_2W0mJg","globalMenuIcon":"_2W0mJg"};
 
-function GlobalMenu(props) {
-    return (React.createElement("button", { ref: props.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 })));
-}
+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":"FzHBdk","open":"_7mgFgL","folding-arrow":"e18bfS","foldingArrow":"e18bfS"};
+var css$8 = {"container":"gLCJ9b","open":"Dr96sB","folding-arrow":"IB-JXS","foldingArrow":"IB-JXS"};
 
-function MainMenuAvatar(props) {
-    return (React.createElement("button", { ref: props.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 }),
-        props.icon && React.createElement(IconContainer, { icon: props.icon }),
-        props.isDropdown && (React.createElement("div", null,
-            React.createElement(IconContainer, { size: 18, icon: ForwardRef$Q, flipY: props.isOpen, cx: css$8.foldingArrow })))));
-}
+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 }),
+    props.icon && React.createElement(IconContainer, { icon: props.icon }),
+    props.isDropdown && (React.createElement("div", null,
+        React.createElement(IconContainer, { size: 18, icon: ForwardRef$P, flipY: props.isOpen, cx: css$8.foldingArrow }))))));
 
-var css$7 = {"search-input":"_-5zlL-","searchInput":"_-5zlL-"};
+var css$7 = {"search-input":"h3CY4g","searchInput":"h3CY4g"};
 
-function MainMenuSearch(props) {
-    return (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: props.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$M, cancelIcon: props.value?.length > 0 && ForwardRef$Q, ...props, ...iEditable, ref: ref, cx: cx$1(css$7.searchInput, props.cx), ...props.rawProps })) })));
 
-var css$6 = {"container":"q-g9Hx"};
+var css$6 = {"container":"I8laSB"};
 
-function MainMenuIcon(props) {
-    return (React.createElement(IconButton, { ref: props.ref, icon: props.icon, cx: cx$1(props.cx, css$6.container), ...props }));
-}
+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":"wFruY1"};
+var css$5 = {"root":"biJGVR"};
 
 const Anchor = /* @__PURE__ */withMods(Anchor$1, () => [css$5.root]);
 
@@ -5355,7 +5335,7 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
 };
 var ForwardRef = /*#__PURE__*/forwardRef(SvgFileCloudUploadFill);
 
-var css$4 = {"root":"_8pdRuk","drop-start":"_5jiZjP","dropStart":"_5jiZjP","drop-over":"Fnbco3","dropOver":"Fnbco3","link":"voocqf","drop-area":"-q75oD","dropArea":"-q75oD","drop-caption":"DWX564","dropCaption":"DWX564","icon-blue":"HDgQp3","iconBlue":"HDgQp3"};
+var css$4 = {"root":"yyIM8S","drop-start":"znu7gG","dropStart":"znu7gG","drop-over":"gMAXRt","dropOver":"gMAXRt","link":"ThKjW0","drop-area":"_7BdsEH","dropArea":"_7BdsEH","drop-caption":"iY-HO6","dropCaption":"iY-HO6","icon-blue":"kpmwIX","iconBlue":"kpmwIX"};
 
 function DropSpot(props) {
     const getInfoText = typeof props.infoText === 'string'
@@ -5373,20 +5353,20 @@ function DropSpot(props) {
     return React.createElement(DropSpot$1, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
 }
 
-var css$3 = {"root":"t-HEeJ"};
+var css$3 = {"root":"_9qEHiJ"};
 
-function SvgCircleProgress(props) {
+const SvgCircleProgress = /* @__PURE__ */React.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
     const insetRadius = props.size / 2 - 3;
     const circumference = insetRadius * Math.PI;
-    return (React.createElement("svg", { className: css$3.root, width: props.size, height: props.size, ref: props.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":"_5c-2Pd","file-name":"m-A5QH","fileName":"m-A5QH","default-color":"TQx2S1","defaultColor":"TQx2S1","doc-color":"_8xC0qt","docColor":"_8xC0qt","xls-color":"StTMwM","xlsColor":"StTMwM","pdf-color":"sBcf8F","pdfColor":"sBcf8F","movie-color":"jGt5xD","movieColor":"jGt5xD","img-color":"y8OI-s","imgColor":"y8OI-s","mov-color":"NBd7wo","movColor":"NBd7wo","error-block":"oqfh4G","errorBlock":"oqfh4G","icons-block":"_-8N7kD","iconsBlock":"_-8N7kD"};
+var css$2 = {"root":"B2IEnw","file-name":"OzjFmA","fileName":"OzjFmA","default-color":"H0d0YN","defaultColor":"H0d0YN","doc-color":"Xuvp8z","docColor":"Xuvp8z","xls-color":"MCSCxt","xlsColor":"MCSCxt","pdf-color":"uYYi9I","pdfColor":"uYYi9I","movie-color":"TE5jHY","movieColor":"TE5jHY","img-color":"VO-oP9","imgColor":"VO-oP9","mov-color":"DghY2P","movColor":"DghY2P","error-block":"zsxxGf","errorBlock":"zsxxGf","icons-block":"QFWQwD","iconsBlock":"QFWQwD"};
 
-function FileCard(props) {
+const FileCard = /* @__PURE__ */React.forwardRef((props, ref) => {
     const [isLoadingShow, setIsLoadingShow] = React.useState(true);
     const { file } = props;
     const getIcon = (extension) => {
@@ -5450,7 +5430,7 @@ function FileCard(props) {
         progress && progress < 100 && abortXHR();
         onClick();
     };
-    return (React.createElement(FlexCell, { ref: props.ref, cx: cx$1(css$2.root, 'uui-file_card', (isLoading || error?.isError) && uuiMod.loading, componentCx, error?.isError && uuiMod.error), minWidth: width, width: !width ? '100%' : undefined },
+    return (React.createElement(FlexCell, { ref: ref, cx: cx$1(css$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%" },
@@ -5459,7 +5439,7 @@ function FileCard(props) {
             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: settings.fileCard.icons.closeIcon, onClick: removeHandler })))));
-}
+});
 
 const getRecoveryMessageConfig = () => ({
     'auth-lost': i18n.errorHandler.recoveryMessageConfig['auth-lost'],
@@ -5503,7 +5483,7 @@ const getErrorPageConfig = () => ({
     },
 });
 
-var css$1 = {"container":"_6C31tf"};
+var css$1 = {"container":"Wu9rDe"};
 
 const ErrorPage = (props) => {
     const isMobileScreen = isMobile();
@@ -5515,7 +5495,7 @@ const ErrorPage = (props) => {
             props?.supportLink && React__default.createElement("div", { className: "uui-error-support-link" }, props?.supportLink))));
 };
 
-var css = {"recovery-spinner":"Ln9pNV","recoverySpinner":"Ln9pNV","recovery-message":"rM0A7v","recoveryMessage":"rM0A7v","modal-blocker":"GKK2u-","modalBlocker":"GKK2u-","modalFadeIn":"TPav5H"};
+var css = {"recovery-spinner":"vCz217","recoverySpinner":"vCz217","recovery-message":"gUalvZ","recoveryMessage":"gUalvZ","modal-blocker":"uohsvF","modalBlocker":"uohsvF","modalFadeIn":"Nm27Kc"};
 
 function ErrorHandler(props) {
     const { uuiNotifications, uuiModals, uuiApi } = useUuiContext();
@@ -5566,5 +5546,5 @@ function ErrorHandler(props) {
         errorType === 'recovery' && renderRecoveryBlocker(errorInfo)));
 }
 
-export { Accordion, Alert, Anchor, AvatarStack, Badge, Blocker, Burger, BurgerButton, BurgerGroupHeader, BurgerSearch, Button, Calendar, Checkbox, CheckboxGroup, ClearNotification, ColumnHeaderDropdown, ColumnsConfigurationModal, ConfirmationModal, ControlGroup, CountIndicator, DataPickerBody, DataPickerFooter, DataPickerMobileHeader, DataPickerRow, DataRowAddons, DataRowsContainer, DataTable, DataTableCell, DataTableHeaderCell, DataTableHeaderRow, DataTableRow, DatePicker, DatePickerBody, DropMarker, DropSpot, Dropdown, DropdownContainer, DropdownMenuBody, DropdownMenuButton, DropdownMenuHeader, DropdownMenuSplitter, DropdownMenuSwitchButton, DropdownSubMenu, ErrorAlert, ErrorHandler, ErrorNotification, ErrorPage, FileCard, FilterItemBody, FilterPickerBody, FiltersPanel, FlexCell, FlexRow, Form, GlobalMenu, HintAlert, HintNotification, IDropdownControlKeys, IconButton, IndeterminateBar, IndicatorBar, InputAddon, LabeledInput, LinkButton, MainMenu, MainMenuAvatar, MainMenuButton, MainMenuDropdown, MainMenuIcon, MainMenuSearch, ModalBlocker, ModalFooter, ModalHeader, ModalWindow, MultiSwitch, NotificationCard, NumericInput, Paginator, Panel, PickerBodyMobileView, PickerInput, PickerItem, PickerList, PickerListRow, PickerModal, PickerToggler, PickerTogglerTag, PresetsPanel, ProgressBar, RadioGroup, RadioInput, RangeDatePicker, RangeDatePickerBody, RangeDatePickerInput, Rating, RichTextView, ScrollBars, SearchInput, Slider, Snackbar, Spinner, StatusIndicator, SuccessAlert, SuccessNotification, SvgCircleProgress, Switch, TabButton, Tag, Text, TextArea, TextInput, TextPlaceholder, TimePicker, TimePickerBody, Tooltip, VerticalTabButton, VirtualList, WarningAlert, WarningNotification, applyDateSelectionMods, defaultPredicates, getErrorPageConfig, getHighlightRanges, getHighlightedSearchMatches, getRecoveryMessageConfig, i18n, propsMods, rangeDatePickerPresets, renderCell, renderDropMarkers, settings, useColumnsWithFilters, useForm, uuiDatePickerBody, uuiRangeDatePickerBody, uuiTimePicker };
+export { Accordion, Alert, Anchor, AvatarStack, Badge, Blocker, Burger, BurgerButton, BurgerGroupHeader, BurgerSearch, Button, Calendar, Checkbox, CheckboxGroup, ClearNotification, ColumnHeaderDropdown, ColumnsConfigurationModal, ConfirmationModal, ControlGroup, CountIndicator, DataPickerBody, DataPickerFooter, DataPickerMobileHeader, DataPickerRow, DataRowAddons, DataRowsContainer, DataTable, DataTableCell, DataTableHeaderCell, DataTableHeaderRow, DataTableRow, DatePicker, DatePickerBody, DatePickerComponent, DropMarker, DropSpot, Dropdown, DropdownContainer, DropdownMenuBody, DropdownMenuButton, DropdownMenuHeader, DropdownMenuSplitter, DropdownMenuSwitchButton, DropdownSubMenu, ErrorAlert, ErrorHandler, ErrorNotification, ErrorPage, FileCard, FilterItemBody, FilterPickerBody, FiltersPanel, FlexCell, FlexRow, Form, GlobalMenu, HintAlert, HintNotification, IDropdownControlKeys, IconButton, IndeterminateBar, IndicatorBar, InputAddon, LabeledInput, LinkButton, MainMenu, MainMenuAvatar, MainMenuButton, MainMenuDropdown, MainMenuIcon, MainMenuSearch, ModalBlocker, ModalFooter, ModalHeader, ModalWindow, MultiSwitch, NotificationCard, NumericInput, Paginator, Panel, PickerBodyMobileView, PickerInput, PickerItem, PickerList, PickerListRow, PickerModal, PickerToggler, PickerTogglerTag, PresetsPanel, ProgressBar, RadioGroup, RadioInput, RangeDatePicker, RangeDatePickerBody, RangeDatePickerInput, Rating, RichTextView, ScrollBars, SearchInput, Slider, Snackbar, Spinner, StatusIndicator, SuccessAlert, SuccessNotification, SvgCircleProgress, Switch, TabButton, Tag, Text, TextArea, TextInput, TextPlaceholder, TimePicker, TimePickerBody, TimePickerComponent, 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