@epam/uui 5.1.1 → 5.1.2

package/index.esm.js

@@ -1,438 +1,605 @@
-import { Button as Button$1, IconButton as IconButton$1, Checkbox as Checkbox$1, RadioInput as RadioInput$1, Switch as Switch$1, TextInput as TextInput$1, Accordion as Accordion$1, ControlGroup as ControlGroup$1, FlexCell as FlexCell$1, FlexRow as FlexRow$1, VPanel, IconContainer, Dropdown as Dropdown$1, DropdownContainer as DropdownContainer$1, Anchor as Anchor$1, Text as Text$1, FlexSpacer, RichTextView as RichTextView$1, ModalBlocker as ModalBlocker$1, ModalWindow as ModalWindow$1, Tooltip as Tooltip$1, LabeledInput as LabeledInput$1, RadioGroup as RadioGroup$1, ScrollBars as ScrollBars$1, VirtualList as VirtualList$1, Spinner as Spinner$1, Blocker as Blocker$1, CheckboxGroup as CheckboxGroup$1, NumericInput as NumericInput$1, TextArea as TextArea$1, Calendar as Calendar$1, DatePickerBodyBase, valueFormat, YearSelection, MonthSelection, i18n as i18n$2, BaseDatePicker, CalendarPresets as CalendarPresets$1, uuiDaySelection, uuiDatePickerBodyBase, BaseRangeDatePicker, PickerBodyBase, DataTableCell as DataTableCell$1, DragHandle, DataTableRow as DataTableRow$1, DataTableHeaderRow as DataTableHeaderRow$1, DataTableHeaderCell as DataTableHeaderCell$1, DataTableSelectionProvider, useColumnsConfiguration, DataPickerRow as DataPickerRow$1, PickerModalBase, handleDataSourceKeyboard, Avatar as Avatar$1, AvatarStack as AvatarStack$1, Paginator as Paginator$1, PickerToggler as PickerToggler$1, PickerInputBase, PickerListBase, AdaptivePanel, Burger as Burger$1, MainMenu as MainMenu$1 } from '@epam/uui-components';
-export { FlexSpacer, IconContainer } from '@epam/uui-components';
-import { withMods, IEditableDebouncer, UuiContext, cx as cx$1, uuiMod, i18n as i18n$1, devLogger, arrayToMatrix, Lens, isMobile, uuiMarkers, uuiDataTableHeaderCell, useUuiContext, useColumnsConfig, uuiScrollShadows, DndActor, mobilePopperModifier, useAppMobileHeight, uuiElement, useForceUpdate, getSeparatedValue, useArrayDataSource, getOrderBetween, Form as Form$1, useForm as useForm$1 } from '@epam/uui-core';
+import { Button as Button$1, IconButton as IconButton$1, Checkbox as Checkbox$1, RadioInput as RadioInput$1, Switch as Switch$1, TextInput as TextInput$1, Accordion as Accordion$1, ControlGroup as ControlGroup$1, FlexCell as FlexCell$1, FlexRow as FlexRow$1, VPanel, IconContainer, Dropdown as Dropdown$1, DropdownContainer as DropdownContainer$1, Anchor as Anchor$1, Text as Text$1, FlexSpacer, RichTextView as RichTextView$1, ModalBlocker as ModalBlocker$1, ModalWindow as ModalWindow$1, Tooltip as Tooltip$1, LabeledInput as LabeledInput$1, RadioGroup as RadioGroup$1, ScrollBars as ScrollBars$1, VirtualList as VirtualList$1, Spinner as Spinner$1, Blocker as Blocker$1, CheckboxGroup as CheckboxGroup$1, NumericInput as NumericInput$1, TextArea as TextArea$1, TimePickerBody as TimePickerBody$1, BaseTimePicker, Calendar as Calendar$1, DatePickerBodyBase, valueFormat, YearSelection, MonthSelection, i18n as i18n$2, BaseDatePicker, CalendarPresets as CalendarPresets$1, uuiDaySelection, uuiDatePickerBodyBase, BaseRangeDatePicker, PickerBodyBase, DataTableCell as DataTableCell$1, DragHandle, DataTableRow as DataTableRow$1, DataTableHeaderRow as DataTableHeaderRow$1, DataTableHeaderCell as DataTableHeaderCell$1, DataTableSelectionProvider, useColumnsConfiguration, DataPickerRow as DataPickerRow$1, PickerModalBase, handleDataSourceKeyboard, AvatarStack as AvatarStack$1, Paginator as Paginator$1, ProgressBar as ProgressBar$1, PickerToggler as PickerToggler$1, Avatar, PickerInputBase, PickerListBase, AdaptivePanel, Burger as Burger$1, MainMenu as MainMenu$1, UploadFileToggler, DropSpot as DropSpot$1 } from '@epam/uui-components';
+export { Avatar, FlexSpacer, IconContainer } from '@epam/uui-components';
+import { withMods, IEditableDebouncer, UuiContext, cx as cx$1, uuiMod, i18n as i18n$1, devLogger, arrayToMatrix, Lens, isMobile, uuiMarkers, uuiDataTableHeaderCell, useUuiContext, useColumnsConfig, uuiScrollShadows, DndActor, mobilePopperModifier, useAppMobileHeight, uuiElement, useForceUpdate, getSeparatedValue, useArrayDataSource, getOrderBetween, Form as Form$1, useForm as useForm$1, formatBytes } from '@epam/uui-core';
 import * as React from 'react';
 import React__default, { forwardRef, useContext, useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import cx from 'classnames';
 import FocusLock from 'react-focus-lock';
 import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat.js';
 import updateLocale from 'dayjs/plugin/updateLocale.js';
 import isoWeek from 'dayjs/plugin/isoWeek.js';
 import sortBy from 'lodash.sortby';
 
-var _path$11;
-function _extends$14() { _extends$14 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$14.apply(this, arguments); }
+var _path$1d;
+function _extends$1g() { _extends$1g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1g.apply(this, arguments); }
 var SvgBtnCross12 = function SvgBtnCross12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$14({
+  return /*#__PURE__*/React.createElement("svg", _extends$1g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$11 || (_path$11 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1d || (_path$1d = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M9.5 3.205 8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6z"
   })));
 };
-var ForwardRef$14 = /*#__PURE__*/forwardRef(SvgBtnCross12);
+var ForwardRef$1g = /*#__PURE__*/forwardRef(SvgBtnCross12);
 
-var _path$10;
-function _extends$13() { _extends$13 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$13.apply(this, arguments); }
+var _path$1c;
+function _extends$1f() { _extends$1f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1f.apply(this, arguments); }
 var SvgBtnCross18 = function SvgBtnCross18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$13({
+  return /*#__PURE__*/React.createElement("svg", _extends$1f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$10 || (_path$10 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1c || (_path$1c = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M14.25 4.808 13.193 3.75 9 7.942 4.808 3.75 3.75 4.808 7.942 9 3.75 13.193l1.058 1.057L9 10.057l4.193 4.193 1.057-1.057L10.057 9z"
   })));
 };
-var ForwardRef$13 = /*#__PURE__*/forwardRef(SvgBtnCross18);
+var ForwardRef$1f = /*#__PURE__*/forwardRef(SvgBtnCross18);
 
-var _path$$;
-function _extends$12() { _extends$12 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$12.apply(this, arguments); }
+var _path$1b;
+function _extends$1e() { _extends$1e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1e.apply(this, arguments); }
 var SvgBtnCross24 = function SvgBtnCross24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$12({
+  return /*#__PURE__*/React.createElement("svg", _extends$1e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$$ || (_path$$ = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1b || (_path$1b = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
   })));
 };
-var ForwardRef$12 = /*#__PURE__*/forwardRef(SvgBtnCross24);
+var ForwardRef$1e = /*#__PURE__*/forwardRef(SvgBtnCross24);
 
-var _path$_;
-function _extends$11() { _extends$11 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$11.apply(this, arguments); }
+var _path$1a;
+function _extends$1d() { _extends$1d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1d.apply(this, arguments); }
 var SvgFoldingArrow12 = function SvgFoldingArrow12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$11({
+  return /*#__PURE__*/React.createElement("svg", _extends$1d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$_ || (_path$_ = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1a || (_path$1a = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M8.295 4.295 6 6.585l-2.295-2.29L3 5l3 3 3-3z"
   })));
 };
-var ForwardRef$11 = /*#__PURE__*/forwardRef(SvgFoldingArrow12);
+var ForwardRef$1d = /*#__PURE__*/forwardRef(SvgFoldingArrow12);
 
-var _path$Z;
-function _extends$10() { _extends$10 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$10.apply(this, arguments); }
+var _path$19;
+function _extends$1c() { _extends$1c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1c.apply(this, arguments); }
 var SvgFoldingArrow18 = function SvgFoldingArrow18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$10({
+  return /*#__PURE__*/React.createElement("svg", _extends$1c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$Z || (_path$Z = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$19 || (_path$19 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M12.443 6.442 9 9.877 5.558 6.442 4.5 7.5 9 12l4.5-4.5z"
   })));
 };
-var ForwardRef$10 = /*#__PURE__*/forwardRef(SvgFoldingArrow18);
+var ForwardRef$1c = /*#__PURE__*/forwardRef(SvgFoldingArrow18);
 
-var _path$Y;
-function _extends$$() { _extends$$ = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$$.apply(this, arguments); }
+var _path$18;
+function _extends$1b() { _extends$1b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1b.apply(this, arguments); }
 var SvgFoldingArrow24 = function SvgFoldingArrow24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$$({
+  return /*#__PURE__*/React.createElement("svg", _extends$1b({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$Y || (_path$Y = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$18 || (_path$18 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
   })));
 };
-var ForwardRef$$ = /*#__PURE__*/forwardRef(SvgFoldingArrow24);
+var ForwardRef$1b = /*#__PURE__*/forwardRef(SvgFoldingArrow24);
 
-var _path$X;
-function _extends$_() { _extends$_ = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$_.apply(this, arguments); }
+var _path$17;
+function _extends$1a() { _extends$1a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1a.apply(this, arguments); }
 var SvgAccept12 = function SvgAccept12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$_({
+  return /*#__PURE__*/React.createElement("svg", _extends$1a({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$X || (_path$X = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$17 || (_path$17 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M4.846 6.8 9.462 2 11 3.6 4.846 10l-.77-.8L1 6l1.538-1.6 2.308 2.4z"
   })));
 };
-var ForwardRef$_ = /*#__PURE__*/forwardRef(SvgAccept12);
+var ForwardRef$1a = /*#__PURE__*/forwardRef(SvgAccept12);
 
-var _path$W;
-function _extends$Z() { _extends$Z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Z.apply(this, arguments); }
+var _path$16;
+function _extends$19() { _extends$19 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$19.apply(this, arguments); }
 var SvgAccept18 = function SvgAccept18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$Z({
+  return /*#__PURE__*/React.createElement("svg", _extends$19({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$W || (_path$W = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$16 || (_path$16 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M7.136 11.91 4.034 8.776 3 9.821 7.136 14 16 5.045 14.966 4z"
   })));
 };
-var ForwardRef$Z = /*#__PURE__*/forwardRef(SvgAccept18);
+var ForwardRef$19 = /*#__PURE__*/forwardRef(SvgAccept18);
 
-var _path$V;
-function _extends$Y() { _extends$Y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Y.apply(this, arguments); }
+var _path$15;
+function _extends$18() { _extends$18 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$18.apply(this, arguments); }
 var SvgAccept24 = function SvgAccept24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$Y({
+  return /*#__PURE__*/React.createElement("svg", _extends$18({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$V || (_path$V = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$15 || (_path$15 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "m9.727 16.075-4.295-4.388L4 13.149 9.727 19 22 6.463 20.568 5z"
   })));
 };
-var ForwardRef$Y = /*#__PURE__*/forwardRef(SvgAccept24);
+var ForwardRef$18 = /*#__PURE__*/forwardRef(SvgAccept24);
 
-var _path$U;
-function _extends$X() { _extends$X = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$X.apply(this, arguments); }
+var _path$14;
+function _extends$17() { _extends$17 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$17.apply(this, arguments); }
 var SvgSearch12 = function SvgSearch12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$X({
+  return /*#__PURE__*/React.createElement("svg", _extends$17({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$U || (_path$U = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$14 || (_path$14 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M9.016 8.309 10.707 10l-.707.707-1.691-1.691a4.5 4.5 0 1 1 .707-.707zM5.5 9a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"
   })));
 };
-var ForwardRef$X = /*#__PURE__*/forwardRef(SvgSearch12);
+var ForwardRef$17 = /*#__PURE__*/forwardRef(SvgSearch12);
 
-var _path$T;
-function _extends$W() { _extends$W = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$W.apply(this, arguments); }
+var _path$13;
+function _extends$16() { _extends$16 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$16.apply(this, arguments); }
 var SvgSearch18 = function SvgSearch18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$W({
+  return /*#__PURE__*/React.createElement("svg", _extends$16({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$T || (_path$T = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$13 || (_path$13 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M13.749 12.335 16.414 15 15 16.414l-2.665-2.665a6.5 6.5 0 1 1 1.414-1.414zM8.5 13a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9z"
   })));
 };
-var ForwardRef$W = /*#__PURE__*/forwardRef(SvgSearch18);
+var ForwardRef$16 = /*#__PURE__*/forwardRef(SvgSearch18);
 
-var _path$S;
-function _extends$V() { _extends$V = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$V.apply(this, arguments); }
+var _path$12;
+function _extends$15() { _extends$15 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$15.apply(this, arguments); }
 var SvgSearch24 = function SvgSearch24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$V({
+  return /*#__PURE__*/React.createElement("svg", _extends$15({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$S || (_path$S = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$12 || (_path$12 = /*#__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"
   })));
 };
-var ForwardRef$V = /*#__PURE__*/forwardRef(SvgSearch24);
+var ForwardRef$15 = /*#__PURE__*/forwardRef(SvgSearch24);
 
-var _path$R;
-function _extends$U() { _extends$U = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$U.apply(this, arguments); }
+var _path$11;
+function _extends$14() { _extends$14 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$14.apply(this, arguments); }
 var SvgCalendar12 = function SvgCalendar12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$U({
+  return /*#__PURE__*/React.createElement("svg", _extends$14({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$R || (_path$R = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$11 || (_path$11 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M10 2H9V1H8v1H4V1H3v1H2c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 8H2V4h8v6z"
   })));
 };
-var ForwardRef$U = /*#__PURE__*/forwardRef(SvgCalendar12);
+var ForwardRef$14 = /*#__PURE__*/forwardRef(SvgCalendar12);
 
-var _path$Q;
-function _extends$T() { _extends$T = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$T.apply(this, arguments); }
+var _path$10;
+function _extends$13() { _extends$13 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$13.apply(this, arguments); }
 var SvgCalendar18 = function SvgCalendar18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$T({
+  return /*#__PURE__*/React.createElement("svg", _extends$13({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$Q || (_path$Q = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$10 || (_path$10 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M14 3V1h-2v2H6V1H4v2C3 3 2 4 2 5v10c0 1 1 2 2 2h10c1 0 2-1 2-2V5c0-1-1-2-2-2zm0 12-10 .048V7h10v8z"
   })));
 };
-var ForwardRef$T = /*#__PURE__*/forwardRef(SvgCalendar18);
+var ForwardRef$13 = /*#__PURE__*/forwardRef(SvgCalendar18);
 
-var _path$P;
-function _extends$S() { _extends$S = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$S.apply(this, arguments); }
+var _path$$;
+function _extends$12() { _extends$12 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$12.apply(this, arguments); }
 var SvgCalendar24 = function SvgCalendar24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$S({
+  return /*#__PURE__*/React.createElement("svg", _extends$12({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$P || (_path$P = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$$ || (_path$$ = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"
   })));
 };
-var ForwardRef$S = /*#__PURE__*/forwardRef(SvgCalendar24);
+var ForwardRef$12 = /*#__PURE__*/forwardRef(SvgCalendar24);
 
-var _path$O;
-function _extends$R() { _extends$R = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$R.apply(this, arguments); }
+var _path$_;
+function _extends$11() { _extends$11 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$11.apply(this, arguments); }
 var SvgInfo12 = function SvgInfo12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$R({
+  return /*#__PURE__*/React.createElement("svg", _extends$11({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$O || (_path$O = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$_ || (_path$_ = /*#__PURE__*/React.createElement("path", {
     d: "M6 1C3.24 1 1 3.24 1 6s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm1 8H5V5h2zm0-5c-.471.471-1.529.471-2 0s-.471-1.529 0-2 1.529-.471 2 0 .471 1.529 0 2z",
     fillRule: "evenodd"
   })));
 };
-var ForwardRef$R = /*#__PURE__*/forwardRef(SvgInfo12);
+var ForwardRef$11 = /*#__PURE__*/forwardRef(SvgInfo12);
 
-var _path$N;
-function _extends$Q() { _extends$Q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Q.apply(this, arguments); }
+var _path$Z;
+function _extends$10() { _extends$10 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$10.apply(this, arguments); }
 var SvgInfo18 = function SvgInfo18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$Q({
+  return /*#__PURE__*/React.createElement("svg", _extends$10({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$N || (_path$N = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$Z || (_path$Z = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M8 13h2V8H8v5zM9 1C4.584 1 1 4.584 1 9s3.584 8 8 8 8-3.584 8-8-3.584-8-8-8zm0 15c-3.859 0-7-3.141-7-7s3.141-7 7-7 7 3.141 7 7-3.141 7-7 7zM8 7h2V5H8v2z"
   })));
 };
-var ForwardRef$Q = /*#__PURE__*/forwardRef(SvgInfo18);
+var ForwardRef$10 = /*#__PURE__*/forwardRef(SvgInfo18);
 
-var _path$M;
-function _extends$P() { _extends$P = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$P.apply(this, arguments); }
+var _path$Y;
+function _extends$$() { _extends$$ = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$$.apply(this, arguments); }
 var SvgInfo24 = function SvgInfo24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$P({
+  return /*#__PURE__*/React.createElement("svg", _extends$$({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$M || (_path$M = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$Y || (_path$Y = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"
   })));
 };
-var ForwardRef$P = /*#__PURE__*/forwardRef(SvgInfo24);
+var ForwardRef$$ = /*#__PURE__*/forwardRef(SvgInfo24);
 
-var _path$L;
-function _extends$O() { _extends$O = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$O.apply(this, arguments); }
+var _path$X;
+function _extends$_() { _extends$_ = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$_.apply(this, arguments); }
 var SvgHelpFill10 = function SvgHelpFill10(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$O({
+  return /*#__PURE__*/React.createElement("svg", _extends$_({
     width: 10,
     height: 10,
     viewBox: "0 0 10 10",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$L || (_path$L = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$X || (_path$X = /*#__PURE__*/React.createElement("path", {
     d: "M5 0C2.24 0 0 2.24 0 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5Zm.5 7.5h-1v-3h1v3Zm0-4h-1v-1h1v1Z"
   })));
 };
-var ForwardRef$O = /*#__PURE__*/forwardRef(SvgHelpFill10);
+var ForwardRef$_ = /*#__PURE__*/forwardRef(SvgHelpFill10);
 
-var _path$K;
-function _extends$N() { _extends$N = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$N.apply(this, arguments); }
+var _path$W;
+function _extends$Z() { _extends$Z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Z.apply(this, arguments); }
 var SvgHelpFill16 = function SvgHelpFill16(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$N({
+  return /*#__PURE__*/React.createElement("svg", _extends$Z({
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$K || (_path$K = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$W || (_path$W = /*#__PURE__*/React.createElement("path", {
     d: "M7 12h2V7H7v5ZM8 0C3.584 0 0 3.584 0 8s3.584 8 8 8 8-3.584 8-8-3.584-8-8-8Zm0 15c-3.859 0-7-3.141-7-7s3.141-7 7-7 7 3.141 7 7-3.141 7-7 7ZM7 6h2V4H7v2Z"
   })));
 };
-var ForwardRef$N = /*#__PURE__*/forwardRef(SvgHelpFill16);
+var ForwardRef$Z = /*#__PURE__*/forwardRef(SvgHelpFill16);
 
+var _path$V;
+function _extends$Y() { _extends$Y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Y.apply(this, arguments); }
+var SvgFileFileWord24 = function SvgFileFileWord24(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$Y({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$V || (_path$V = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm1.2 18h-1.4L12 13.2 10.2 20H8.8l-2.2-9h1.5l1.4 6.8 1.8-6.8h1.3l1.8 6.8 1.4-6.8h1.5l-2.1 9zM13 9V3.5L18.5 9H13z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$Y = /*#__PURE__*/forwardRef(SvgFileFileWord24);
+
+var _path$U;
+function _extends$X() { _extends$X = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$X.apply(this, arguments); }
+var SvgFileFileExcel24 = function SvgFileFileExcel24(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$X({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$U || (_path$U = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm1.8 18H14l-2-3.4-2 3.4H8.2l2.9-4.5L8.2 11H10l2 3.4 2-3.4h1.8l-2.9 4.5 2.9 4.5zM13 9V3.5L18.5 9H13z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$X = /*#__PURE__*/forwardRef(SvgFileFileExcel24);
+
+var _path$T;
+function _extends$W() { _extends$W = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$W.apply(this, arguments); }
+var SvgFileFilePdf24 = function SvgFileFilePdf24(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$W({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$T || (_path$T = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M13 9h5.5L13 3.5V9zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm4.1 9.4c-.02.04-.29 1.76-2.1 4.69 0 0-3.5 1.82-2.67 3.18.67 1.08 2.32-.04 3.74-2.68 0 0 1.82-.64 4.24-.82 0 0 3.86 1.73 4.39-.11.52-1.86-3.06-1.44-3.7-1.25 0 0-2-1.35-2.5-3.21 0 0 1.14-3.95-.61-3.9-1.75.05-1.09 3.13-.79 4.1zm.81 1.04c.03.01.47 1.21 1.89 2.46 0 0-2.33.46-3.39.9 0 0 1-1.73 1.5-3.36zm3.93 2.72c.58-.16 2.33.15 2.26.48-.06.33-2.26-.48-2.26-.48zM7.77 17c-.53 1.24-1.44 2-1.67 2-.23 0 .7-1.6 1.67-2zm3.14-6.93c0-.07-.36-2.2 0-2.15.54.08 0 2.08 0 2.15z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$W = /*#__PURE__*/forwardRef(SvgFileFilePdf24);
+
+var _path$S;
+function _extends$V() { _extends$V = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$V.apply(this, arguments); }
+var SvgFileFileImage24 = function SvgFileFileImage24(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$V({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$S || (_path$S = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M13 9h5.5L13 3.5V9zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2zm0 18h12v-8l-4 4-2-2-6 6zM8 9a2 2 0 1 0 0 4 2 2 0 0 0 0-4z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$V = /*#__PURE__*/forwardRef(SvgFileFileImage24);
+
+var _path$R, _path2$2;
+function _extends$U() { _extends$U = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$U.apply(this, arguments); }
+var SvgFileFileVideo24 = function SvgFileFileVideo24(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$U({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$R || (_path$R = /*#__PURE__*/React.createElement("path", {
+    d: "M14.992 14 9.5 17.138v-6.276L14.992 14z"
+  })), _path2$2 || (_path2$2 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M4 4c0-1.11.89-2 2-2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4zm9-.5V9h5.5L13 3.5zM8.5 9.138v9.724L17.008 14 8.5 9.138z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$U = /*#__PURE__*/forwardRef(SvgFileFileVideo24);
+
+var _path$Q;
+function _extends$T() { _extends$T = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$T.apply(this, arguments); }
+var SvgFileFileTable24 = function SvgFileFileTable24(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$T({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$Q || (_path$Q = /*#__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$T = /*#__PURE__*/forwardRef(SvgFileFileTable24);
+
+var _path$P;
+function _extends$S() { _extends$S = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$S.apply(this, arguments); }
+var SvgFileFileText24 = function SvgFileFileText24(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$S({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$P || (_path$P = /*#__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$S = /*#__PURE__*/forwardRef(SvgFileFileText24);
+
+var _path$O;
+function _extends$R() { _extends$R = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$R.apply(this, arguments); }
+var SvgFileFileEml24 = function SvgFileFileEml24(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$O || (_path$O = /*#__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$R = /*#__PURE__*/forwardRef(SvgFileFileEml24);
+
+var _path$N;
+function _extends$Q() { _extends$Q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Q.apply(this, arguments); }
+var SvgFileFile24 = function SvgFileFile24(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$Q({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$N || (_path$N = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M13 9V3.5L18.5 9H13zM6 2c-1.11 0-2 .89-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6H6z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$Q = /*#__PURE__*/forwardRef(SvgFileFile24);
+
+const fileIcons = {
+    docIcon: ForwardRef$Y,
+    exelIcon: ForwardRef$X,
+    pdfIcon: ForwardRef$W,
+    imgIcon: ForwardRef$V,
+    videoIcon: ForwardRef$U,
+    tableIcon: ForwardRef$T,
+    textIcon: ForwardRef$S,
+    mailIcon: ForwardRef$R,
+    fileIcon: ForwardRef$Q,
+};
 const systemIcons = {
     18: {
-        clear: ForwardRef$14,
-        foldingArrow: ForwardRef$11,
-        accept: ForwardRef$_,
-        search: ForwardRef$X,
-        calendar: ForwardRef$U,
-        info: ForwardRef$R,
-        help: ForwardRef$O,
+        clear: ForwardRef$1g,
+        foldingArrow: ForwardRef$1d,
+        accept: ForwardRef$1a,
+        search: ForwardRef$17,
+        calendar: ForwardRef$14,
+        info: ForwardRef$11,
+        help: ForwardRef$_,
     },
     24: {
-        clear: ForwardRef$14,
-        foldingArrow: ForwardRef$11,
-        accept: ForwardRef$_,
-        search: ForwardRef$X,
-        calendar: ForwardRef$U,
-        info: ForwardRef$R,
-        help: ForwardRef$O,
+        clear: ForwardRef$1g,
+        foldingArrow: ForwardRef$1d,
+        accept: ForwardRef$1a,
+        search: ForwardRef$17,
+        calendar: ForwardRef$14,
+        info: ForwardRef$11,
+        help: ForwardRef$_,
     },
     30: {
-        clear: ForwardRef$13,
-        foldingArrow: ForwardRef$10,
-        accept: ForwardRef$Z,
-        search: ForwardRef$W,
-        calendar: ForwardRef$T,
-        info: ForwardRef$Q,
-        help: ForwardRef$O,
+        clear: ForwardRef$1f,
+        foldingArrow: ForwardRef$1c,
+        accept: ForwardRef$19,
+        search: ForwardRef$16,
+        calendar: ForwardRef$13,
+        info: ForwardRef$10,
+        help: ForwardRef$_,
     },
     36: {
-        clear: ForwardRef$13,
-        foldingArrow: ForwardRef$10,
-        accept: ForwardRef$Z,
-        search: ForwardRef$W,
-        calendar: ForwardRef$T,
-        info: ForwardRef$Q,
-        help: ForwardRef$N,
+        clear: ForwardRef$1f,
+        foldingArrow: ForwardRef$1c,
+        accept: ForwardRef$19,
+        search: ForwardRef$16,
+        calendar: ForwardRef$13,
+        info: ForwardRef$10,
+        help: ForwardRef$Z,
     },
     42: {
-        clear: ForwardRef$13,
-        foldingArrow: ForwardRef$10,
-        accept: ForwardRef$Z,
-        search: ForwardRef$W,
-        calendar: ForwardRef$T,
-        info: ForwardRef$Q,
-        help: ForwardRef$N,
+        clear: ForwardRef$1f,
+        foldingArrow: ForwardRef$1c,
+        accept: ForwardRef$19,
+        search: ForwardRef$16,
+        calendar: ForwardRef$13,
+        info: ForwardRef$10,
+        help: ForwardRef$Z,
     },
     48: {
-        clear: ForwardRef$12,
-        foldingArrow: ForwardRef$$,
-        accept: ForwardRef$Y,
-        search: ForwardRef$V,
-        calendar: ForwardRef$S,
-        info: ForwardRef$P,
-        help: ForwardRef$N,
+        clear: ForwardRef$1e,
+        foldingArrow: ForwardRef$1b,
+        accept: ForwardRef$18,
+        search: ForwardRef$15,
+        calendar: ForwardRef$12,
+        info: ForwardRef$$,
+        help: ForwardRef$Z,
     },
     60: {
-        clear: ForwardRef$12,
-        foldingArrow: ForwardRef$$,
-        accept: ForwardRef$Y,
-        search: ForwardRef$V,
-        calendar: ForwardRef$S,
-        info: ForwardRef$P,
-        help: ForwardRef$N,
+        clear: ForwardRef$1e,
+        foldingArrow: ForwardRef$1b,
+        accept: ForwardRef$18,
+        search: ForwardRef$15,
+        calendar: ForwardRef$12,
+        info: ForwardRef$$,
+        help: ForwardRef$Z,
     },
     none: {
-        clear: ForwardRef$13,
-        foldingArrow: ForwardRef$10,
-        accept: ForwardRef$Z,
-        search: ForwardRef$W,
-        calendar: ForwardRef$T,
-        info: ForwardRef$Q,
-        help: ForwardRef$N,
+        clear: ForwardRef$1f,
+        foldingArrow: ForwardRef$1c,
+        accept: ForwardRef$19,
+        search: ForwardRef$16,
+        calendar: ForwardRef$13,
+        info: ForwardRef$10,
+        help: ForwardRef$Z,
     },
 };
 
-var buttonCss = {"root":"_8VqrY8","mode-solid":"J0cSO1","mode-outline":"c3go-D","mode-none":"_4E3SpU","mode-ghost":"_20eYu6","size-18":"FbC1rL","size-24":"whlLZ1","size-30":"I5D9TX","size-36":"_6VRMC8","size-42":"dvQ3Dz","size-48":"QCfqGx","modeSolid":"J0cSO1","modeOutline":"c3go-D","modeNone":"_4E3SpU","modeGhost":"_20eYu6","size18":"FbC1rL","size24":"whlLZ1","size30":"I5D9TX","size36":"_6VRMC8","size42":"dvQ3Dz","size48":"QCfqGx"};
+var buttonCss = {"root":"JpCjIx","mode-solid":"_6zPtGA","mode-outline":"_2iO51B","mode-none":"RmMn0j","mode-ghost":"cxjoxx","size-18":"JB5Jx5","size-24":"C9A1e2","size-30":"aJuQ21","size-36":"Wo6J8N","size-42":"U7M3F1","size-48":"ScYtFQ","modeSolid":"_6zPtGA","modeOutline":"_2iO51B","modeNone":"RmMn0j","modeGhost":"cxjoxx","size18":"JB5Jx5","size24":"C9A1e2","size30":"aJuQ21","size36":"Wo6J8N","size42":"U7M3F1","size48":"ScYtFQ"};
 
 const allButtonColors = [
     'accent', 'primary', 'secondary', 'negative',
 ];
-const defaultSize$a = '36';
+const defaultSize$b = '36';
 function applyButtonMods(mods) {
     return [
         `button-${mods.color || 'primary'}`,
         buttonCss.root,
-        buttonCss[`size-${mods.size || defaultSize$a}`],
+        buttonCss[`size-${mods.size || defaultSize$b}`],
         buttonCss[`mode-${mods.mode || 'solid'}`],
     ];
 }
 const Button = withMods(Button$1, applyButtonMods, (props) => ({
-    dropdownIcon: systemIcons[props.size || defaultSize$a].foldingArrow,
-    clearIcon: systemIcons[props.size || defaultSize$a].clear,
+    dropdownIcon: systemIcons[props.size || defaultSize$b].foldingArrow,
+    clearIcon: systemIcons[props.size || defaultSize$b].clear,
 }));
 
-var css$18 = {"root":"PJgbfC"};
+var css$1f = {"root":"giWQpD"};
 
 const allIconColors = [
     'info', 'success', 'warning', 'error', 'secondary', 'default',
 ];
 function applyIconButtonMods(mods) {
-    return [`icon-button-${mods.color || 'default'}`, css$18.root];
+    return [`icon-button-${mods.color || 'default'}`, css$1f.root];
 }
 const IconButton = withMods(IconButton$1, applyIconButtonMods);
 
-var css$17 = {"root":"wdtlHa","size-18":"Y3e51Y","size-24":"VRtARV","size-30":"_9Wqcrk","size-36":"p6AnYX","size-42":"P7GjFG","size-48":"FxlIWP","size18":"Y3e51Y","size24":"VRtARV","size30":"_9Wqcrk","size36":"p6AnYX","size42":"P7GjFG","size48":"FxlIWP"};
+var css$1e = {"root":"s0ftcp","size-18":"_9JQnmi","size-24":"d61e91","size-30":"_44PB4Z","size-36":"JJjj95","size-42":"_0NDftp","size-48":"y4rInX","size18":"_9JQnmi","size24":"d61e91","size30":"_44PB4Z","size36":"JJjj95","size42":"_0NDftp","size48":"y4rInX"};
 
 function getIconClass(props) {
     const classList = {
@@ -451,38 +618,38 @@ 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'];
 }
 
-const defaultSize$9 = '36';
+const defaultSize$a = '36';
 const allLinkButtonColors = ['primary', 'secondary', 'contrast'];
 function applyLinkButtonMods(mods) {
     return [
-        css$17.root,
-        css$17['size-' + (mods.size || defaultSize$9)],
+        css$1e.root,
+        css$1e['size-' + (mods.size || defaultSize$a)],
         ...getIconClass(mods),
         `link-button-${mods.color || 'primary'}`,
     ];
 }
 const LinkButton = withMods(Button$1, applyLinkButtonMods, (props) => ({
-    dropdownIcon: systemIcons[props.size || defaultSize$9].foldingArrow,
-    clearIcon: systemIcons[props.size || defaultSize$9].clear,
+    dropdownIcon: systemIcons[props.size || defaultSize$a].foldingArrow,
+    clearIcon: systemIcons[props.size || defaultSize$a].clear,
 }));
 
-var css$16 = {"root":"wkx91-","uui-notification":"GltTci","size-36":"NX0-h3","size-48":"yo-Gjm","size-60":"_8Nc4Zp","uuiNotification":"GltTci","size36":"NX0-h3","size48":"yo-Gjm","size60":"_8Nc4Zp"};
+var css$1d = {"root":"wX3mtt","uui-notification":"B-0tjJ","size-36":"IEjWBy","size-48":"_7mTdFf","size-60":"KvYjMj","uuiNotification":"B-0tjJ","size36":"IEjWBy","size48":"_7mTdFf","size60":"KvYjMj"};
 
 function applyTabButtonMods(mods) {
     return [
-        css$16.root,
+        css$1d.root,
         'informer-default',
-        css$16['size-' + (mods.size || '48')],
-        mods.withNotify && css$16.uuiNotification,
+        css$1d['size-' + (mods.size || '48')],
+        mods.withNotify && css$1d.uuiNotification,
         ...getIconClass(mods),
     ];
 }
 const TabButton = withMods(Button$1, applyTabButtonMods, (props) => (Object.assign(Object.assign({ dropdownIcon: systemIcons['36'].foldingArrow, clearIcon: systemIcons['36'].clear, countPosition: 'right' }, props), { rawProps: Object.assign({ role: 'tab' }, props.rawProps) })));
 
-var css$15 = {"root":"_6UuXuZ"};
+var css$1c = {"root":"_1SW4ST"};
 
 function applyVerticalTabButtonMods() {
-    return [css$15.root];
+    return [css$1c.root];
 }
 const VerticalTabButton = withMods(TabButton, applyVerticalTabButtonMods);
 
@@ -518,89 +685,89 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var _path$J;
-function _extends$M() { _extends$M = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$M.apply(this, arguments); }
+var _path$M;
+function _extends$P() { _extends$P = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$P.apply(this, arguments); }
 var SvgCheck12 = function SvgCheck12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$M({
+  return /*#__PURE__*/React.createElement("svg", _extends$P({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$J || (_path$J = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$M || (_path$M = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M9.491 3.449 10.51 4.55 5.663 9.024 2.487 6.047l1.026-1.094L5.67 6.975z"
   })));
 };
-var ForwardRef$M = /*#__PURE__*/forwardRef(SvgCheck12);
+var ForwardRef$P = /*#__PURE__*/forwardRef(SvgCheck12);
 
-var _path$I;
-function _extends$L() { _extends$L = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$L.apply(this, arguments); }
+var _path$L;
+function _extends$O() { _extends$O = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$O.apply(this, arguments); }
 var SvgCheck18 = function SvgCheck18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$L({
+  return /*#__PURE__*/React.createElement("svg", _extends$O({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$I || (_path$I = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$L || (_path$L = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "m14.247 4.341 1.506 1.318-7.704 8.804-4.756-4.756 1.414-1.414 3.244 3.243z"
   })));
 };
-var ForwardRef$L = /*#__PURE__*/forwardRef(SvgCheck18);
+var ForwardRef$O = /*#__PURE__*/forwardRef(SvgCheck18);
 
-var _path$H;
-function _extends$K() { _extends$K = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$K.apply(this, arguments); }
+var _path$K;
+function _extends$N() { _extends$N = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$N.apply(this, arguments); }
 var SvgPartlySelect12 = function SvgPartlySelect12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$K({
+  return /*#__PURE__*/React.createElement("svg", _extends$N({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$H || (_path$H = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$K || (_path$K = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M9 5v2H3V5z"
   })));
 };
-var ForwardRef$K = /*#__PURE__*/forwardRef(SvgPartlySelect12);
+var ForwardRef$N = /*#__PURE__*/forwardRef(SvgPartlySelect12);
 
-var _path$G;
-function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); }
+var _path$J;
+function _extends$M() { _extends$M = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$M.apply(this, arguments); }
 var SvgPartlySelect18 = function SvgPartlySelect18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$J({
+  return /*#__PURE__*/React.createElement("svg", _extends$M({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$G || (_path$G = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$J || (_path$J = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M14 8v2H4V8z"
   })));
 };
-var ForwardRef$J = /*#__PURE__*/forwardRef(SvgPartlySelect18);
+var ForwardRef$M = /*#__PURE__*/forwardRef(SvgPartlySelect18);
 
-var css$14 = {"root":"f9KDxU","size-18":"_0HLNAf","size-12":"Mj9CmD","mode-cell":"o4uXIT","size18":"_0HLNAf","size12":"Mj9CmD","modeCell":"o4uXIT"};
+var css$1b = {"root":"baA0Wz","size-18":"hiLHlQ","size-12":"_0NnqIh","mode-cell":"hUTZ5y","size18":"hiLHlQ","size12":"_0NnqIh","modeCell":"hUTZ5y"};
 
 function applyCheckboxMods(mods) {
     return [
-        css$14.root, css$14['size-' + (mods.size || '18')], css$14['mode-' + (mods.mode || 'form')],
+        css$1b.root, css$1b['size-' + (mods.size || '18')], css$1b['mode-' + (mods.mode || 'form')],
     ];
 }
 const applyUUICheckboxProps = (props) => ({
-    icon: props.size === '12' ? ForwardRef$M : ForwardRef$L,
-    indeterminateIcon: props.size === '12' ? ForwardRef$K : ForwardRef$J,
+    icon: props.size === '12' ? ForwardRef$P : ForwardRef$O,
+    indeterminateIcon: props.size === '12' ? ForwardRef$N : ForwardRef$M,
 });
 const Checkbox = withMods(Checkbox$1, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$13 = {"root":"EREKhe","size-18":"_4Qft9T","size-12":"ICBM98","size18":"_4Qft9T","size12":"ICBM98"};
+var css$1a = {"root":"_4hMA0v","size-18":"H7DUm-","size-12":"CtuRyE","size18":"H7DUm-","size12":"CtuRyE"};
 
 var _circle;
-function _extends$I() { _extends$I = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$I.apply(this, arguments); }
+function _extends$L() { _extends$L = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$L.apply(this, arguments); }
 var SvgRadioPoint = function SvgRadioPoint(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$I({
+  return /*#__PURE__*/React.createElement("svg", _extends$L({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
@@ -612,18 +779,18 @@ var SvgRadioPoint = function SvgRadioPoint(props, ref) {
     r: 6
   })));
 };
-var ForwardRef$I = /*#__PURE__*/forwardRef(SvgRadioPoint);
+var ForwardRef$L = /*#__PURE__*/forwardRef(SvgRadioPoint);
 
 function applyRadioInputMods(mods) {
-    return [css$13.root, css$13['size-' + (mods.size || '18')]];
+    return [css$1a.root, css$1a['size-' + (mods.size || '18')]];
 }
-const RadioInput = withMods(RadioInput$1, applyRadioInputMods, () => ({ icon: ForwardRef$I }));
+const RadioInput = withMods(RadioInput$1, applyRadioInputMods, () => ({ icon: ForwardRef$L }));
 
-var css$12 = {"root":"-AtOII","size-12":"IWvYBg","size-18":"MHLJ05","size-24":"Wh1fv6","size12":"IWvYBg","size18":"MHLJ05","size24":"Wh1fv6"};
+var css$19 = {"root":"VIVWeQ","size-12":"WS-uRX","size-18":"HtuPUi","size-24":"s91x8j","size12":"WS-uRX","size18":"HtuPUi","size24":"s91x8j"};
 
 function applySwitchMods(mods) {
     return [
-        'switch-vars', css$12.root, css$12['size-' + (mods.size || '18')],
+        'switch-vars', css$19.root, css$19['size-' + (mods.size || '18')],
     ];
 }
 const Switch = withMods(Switch$1, applySwitchMods);
@@ -672,27 +839,27 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var textInputCss = {"root":"GJMm1R","mode-form":"_5hAkUR","mode-inline":"-tI-P6","mode-cell":"ytSYhn","size-24":"W3XcQE","size-30":"uIDEjj","size-36":"rUoG4e","size-42":"V2ntbp","size-48":"LLcDun","modeForm":"_5hAkUR","modeInline":"-tI-P6","modeCell":"ytSYhn","size24":"W3XcQE","size30":"uIDEjj","size36":"rUoG4e","size42":"V2ntbp","size48":"LLcDun"};
+var textInputCss = {"root":"slUBds","mode-form":"UHDI6n","mode-inline":"arzjEf","mode-cell":"-RznVL","size-24":"_8uJHzA","size-30":"_1WE5Xa","size-36":"UKT-u-","size-42":"SStKiT","size-48":"EsV6QA","modeForm":"UHDI6n","modeInline":"arzjEf","modeCell":"-RznVL","size24":"_8uJHzA","size30":"_1WE5Xa","size36":"UKT-u-","size42":"SStKiT","size48":"EsV6QA"};
 
-const defaultSize$8 = '36';
-const defaultMode$4 = EditMode.FORM;
+const defaultSize$9 = '36';
+const defaultMode$5 = EditMode.FORM;
 function applyTextInputMods(mods) {
     return [
         textInputCss.root,
-        textInputCss['size-' + (mods.size || defaultSize$8)],
-        textInputCss['mode-' + (mods.mode || defaultMode$4)],
+        textInputCss['size-' + (mods.size || defaultSize$9)],
+        textInputCss['mode-' + (mods.mode || defaultMode$5)],
     ];
 }
 const TextInput = withMods(TextInput$1, applyTextInputMods, (props) => ({
-    acceptIcon: systemIcons[props.size || defaultSize$8].accept,
-    cancelIcon: systemIcons[props.size || defaultSize$8].clear,
-    dropdownIcon: systemIcons[props.size || defaultSize$8].foldingArrow,
+    acceptIcon: systemIcons[props.size || defaultSize$9].accept,
+    cancelIcon: systemIcons[props.size || defaultSize$9].clear,
+    dropdownIcon: systemIcons[props.size || defaultSize$9].foldingArrow,
 }));
 const SearchInput = React__default.forwardRef((props, ref) => {
     // analytics events are sending in IEditableDebouncer, so we need to avoid sending events in TextInput
     const textInputProps = __rest(props, []);
     delete textInputProps.getValueChangeAnalyticsEvent;
-    return (React__default.createElement(IEditableDebouncer, Object.assign({}, props, { render: (iEditable) => (React__default.createElement(TextInput, Object.assign({ icon: systemIcons[props.size || defaultSize$8].search, onCancel: !!props.value
+    return (React__default.createElement(IEditableDebouncer, Object.assign({}, props, { render: (iEditable) => (React__default.createElement(TextInput, Object.assign({ icon: systemIcons[props.size || defaultSize$9].search, onCancel: !!props.value
                 // In a lot of places, it is required to check if a clicked element is a part of some other element.
                 // Usually, those are global click event handlers. To allow that logic to work correctly, it is necessary
                 // to execute the `disappearing` of the cross (setState execution) after the event will pass through all the handlers.
@@ -701,148 +868,146 @@ const SearchInput = React__default.forwardRef((props, ref) => {
                 : undefined, type: "search", inputMode: "search", ref: ref }, textInputProps, iEditable))) })));
 });
 
-var css$11 = {"root":"wlkpfY","mode-block":"ATY7Dj","mode-inline":"V1-OSv","padding-0":"NFsyZK","padding-6":"oX47lN","padding-12":"qBguVf","padding-18":"vKbCmJ","modeBlock":"ATY7Dj","modeInline":"V1-OSv","padding0":"NFsyZK","padding6":"oX47lN","padding12":"qBguVf","padding18":"vKbCmJ"};
+var css$18 = {"root":"-X-Q7f","mode-block":"D-I42-","mode-inline":"UoGiMh","padding-0":"TNWXdT","padding-6":"A9n-64","padding-12":"yIv3jm","padding-18":"SItbyr","modeBlock":"D-I42-","modeInline":"UoGiMh","padding0":"TNWXdT","padding6":"A9n-64","padding12":"yIv3jm","padding18":"SItbyr"};
 
 function applyAccordionMods(mods) {
     return [
-        css$11.root, css$11['mode-' + (mods.mode || 'block')], mods.padding && css$11['padding-' + mods.padding],
+        css$18.root, css$18['mode-' + (mods.mode || 'block')], mods.padding && css$18['padding-' + mods.padding],
     ];
 }
 const Accordion = withMods(Accordion$1, applyAccordionMods, (mods) => ({
     dropdownIcon: mods.dropdownIcon !== null && systemIcons[mods.mode === 'block' ? '60' : '30'].foldingArrow,
 }));
 
-var css$10 = {"root":"ZkXdC8"};
+var css$17 = {"root":"C3NXQZ"};
 
-const ControlGroup = withMods(ControlGroup$1, () => [css$10.root]);
+const ControlGroup = withMods(ControlGroup$1, () => [css$17.root]);
 
-var css$$ = {"root":"L9F42D","border-bottom":"_25OoIr","top-shadow":"bh7Vna","size-24":"avN-Wf","size-30":"_4a50jF","size-36":"YWwn1y","size-42":"I8-1--","size-48":"KI98J8","padding-6":"C6dO4l","padding-12":"Djwgqi","padding-18":"_7VZNrQ","padding-24":"_4xpFC5","margin-24":"P2cS7N","margin-12":"ks2Ges","vPadding-12":"FCxO4c","vPadding-18":"_4BOCW7","vPadding-24":"uovHLQ","vPadding-36":"x6G5tk","vPadding-48":"_91Mta0","spacing-6":"U6ze-i","spacing-12":"ip2W5s","spacing-18":"WXYMwg","borderBottom":"_25OoIr","topShadow":"bh7Vna","size24":"avN-Wf","size30":"_4a50jF","size36":"YWwn1y","size42":"I8-1--","size48":"KI98J8","padding6":"C6dO4l","padding12":"Djwgqi","padding18":"_7VZNrQ","padding24":"_4xpFC5","margin24":"P2cS7N","margin12":"ks2Ges","vPadding12":"FCxO4c","vPadding18":"_4BOCW7","vPadding24":"uovHLQ","vPadding36":"x6G5tk","vPadding48":"_91Mta0","spacing6":"U6ze-i","spacing12":"ip2W5s","spacing18":"WXYMwg"};
+var css$16 = {"root":"_7ca-Ly","border-bottom":"_9KsWn-","top-shadow":"-oulnc","size-24":"mfFQ3a","size-30":"wREiMJ","size-36":"CGRGmy","size-42":"GjjwCh","size-48":"VqUOS5","padding-6":"y02lUT","padding-12":"vtypkA","padding-18":"h7jOCo","padding-24":"HBf3Lo","margin-24":"zXe0U0","margin-12":"JqoxCt","vPadding-12":"Gwg-bG","vPadding-18":"_0nuDXM","vPadding-24":"_7WJi29","vPadding-36":"arWoNk","vPadding-48":"AzL3Zs","spacing-6":"GJilJA","spacing-12":"VOexu-","spacing-18":"_3frBj5","borderBottom":"_9KsWn-","topShadow":"-oulnc","size24":"mfFQ3a","size30":"wREiMJ","size36":"CGRGmy","size42":"GjjwCh","size48":"VqUOS5","padding6":"y02lUT","padding12":"vtypkA","padding18":"h7jOCo","padding24":"HBf3Lo","margin24":"zXe0U0","margin12":"JqoxCt","vPadding12":"Gwg-bG","vPadding18":"_0nuDXM","vPadding24":"_7WJi29","vPadding36":"arWoNk","vPadding48":"AzL3Zs","spacing6":"GJilJA","spacing12":"VOexu-","spacing18":"_3frBj5"};
 
-const FlexCell = withMods(FlexCell$1, () => [css$$.flexCell]);
+const FlexCell = withMods(FlexCell$1, () => [css$16.flexCell]);
 
 const FlexRow = withMods(FlexRow$1, (props) => {
     return [
-        css$$.root, props.size !== null && css$$['size-' + (props.size || '36')], props.padding && css$$['padding-' + props.padding], props.vPadding && css$$['vPadding-' + props.vPadding], props.margin && css$$['margin-' + props.margin], props.topShadow && css$$.topShadow, props.borderBottom && css$$.borderBottom, props.spacing && css$$['spacing-' + props.spacing],
+        css$16.root, props.size !== null && css$16['size-' + (props.size || '36')], props.padding && css$16['padding-' + props.padding], props.vPadding && css$16['vPadding-' + props.vPadding], props.margin && css$16['margin-' + props.margin], props.topShadow && css$16.topShadow, props.borderBottom && css$16.borderBottom, props.spacing && css$16['spacing-' + props.spacing],
     ];
 });
 
-var css$_ = {"root":"_75cfoV","margin-24":"r8-hwl","padding-12":"NNNuW5","padding-24":"vHd6oa","shadow":"pVQN-r","margin24":"r8-hwl","padding12":"NNNuW5","padding24":"vHd6oa"};
+var css$15 = {"root":"sjWL23","margin-24":"efp-Af","padding-12":"gws-Rx","padding-24":"pa0dcm","shadow":"dGv-Sn","margin24":"efp-Af","padding12":"gws-Rx","padding24":"pa0dcm"};
 
 const Panel = withMods(VPanel, (props) => [
-    'uui-panel', css$_.root, props.shadow && css$_.shadow, props.margin && css$_['margin-' + props.margin],
+    'uui-panel', css$15.root, props.shadow && css$15.shadow, props.margin && css$15['margin-' + props.margin],
 ]);
 
-var _path$F;
-function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); }
+var _path$I;
+function _extends$K() { _extends$K = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$K.apply(this, arguments); }
 var SvgNotificationCheckCircleFill24 = function SvgNotificationCheckCircleFill24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$H({
+  return /*#__PURE__*/React.createElement("svg", _extends$K({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$F || (_path$F = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$I || (_path$I = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
   })));
 };
-var ForwardRef$H = /*#__PURE__*/forwardRef(SvgNotificationCheckCircleFill24);
+var ForwardRef$K = /*#__PURE__*/forwardRef(SvgNotificationCheckCircleFill24);
 
-var _path$E;
-function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); }
+var _path$H;
+function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); }
 var SvgNotificationWarningFill24 = function SvgNotificationWarningFill24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$G({
+  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$E || (_path$E = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$H || (_path$H = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
   })));
 };
-var ForwardRef$G = /*#__PURE__*/forwardRef(SvgNotificationWarningFill24);
+var ForwardRef$J = /*#__PURE__*/forwardRef(SvgNotificationWarningFill24);
 
-var _path$D;
-function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); }
+var _path$G;
+function _extends$I() { _extends$I = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$I.apply(this, arguments); }
 var SvgNotificationErrorFill24 = function SvgNotificationErrorFill24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$F({
+  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$D || (_path$D = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$G || (_path$G = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
   })));
 };
-var ForwardRef$F = /*#__PURE__*/forwardRef(SvgNotificationErrorFill24);
+var ForwardRef$I = /*#__PURE__*/forwardRef(SvgNotificationErrorFill24);
 
-var _path$C;
-function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); }
+var _path$F;
+function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); }
 var SvgNotificationHelpFill24 = function SvgNotificationHelpFill24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$E({
+  return /*#__PURE__*/React.createElement("svg", _extends$H({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$C || (_path$C = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$F || (_path$F = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
   })));
 };
-var ForwardRef$E = /*#__PURE__*/forwardRef(SvgNotificationHelpFill24);
+var ForwardRef$H = /*#__PURE__*/forwardRef(SvgNotificationHelpFill24);
 
-var _path$B;
-function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
+var _path$E;
+function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); }
 var SvgNavigationClose24$1 = function SvgNavigationClose24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$D({
+  return /*#__PURE__*/React.createElement("svg", _extends$G({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$B || (_path$B = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$E || (_path$E = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
   })));
 };
-var ForwardRef$D = /*#__PURE__*/forwardRef(SvgNavigationClose24$1);
+var ForwardRef$G = /*#__PURE__*/forwardRef(SvgNavigationClose24$1);
 
-var css$Z = {"root":"_2Thw1n","icon-wrapper":"z2bOw3","alert-wrapper":"_2NMEeW","action-wrapper":"_57O3WA","action-icon":"mlOF-K","action-link":"Tu366D","close-icon":"UXPlmR","main-path":"zyVGqR","content":"yvHLqF","iconWrapper":"z2bOw3","alertWrapper":"_2NMEeW","actionWrapper":"_57O3WA","actionIcon":"mlOF-K","actionLink":"Tu366D","closeIcon":"UXPlmR","mainPath":"zyVGqR"};
+var css$14 = {"root":"kYZwRS","icon-wrapper":"vpV-T-","alert-wrapper":"zpfsSG","size-48":"xZvwu3","size-36":"_2hahC2","action-wrapper":"A6fRpa","action-icon":"pG8FcU","action-link":"NodnNt","close-icon":"_4qAY1G","main-path":"-hhMYh","content":"_8-v5x4","iconWrapper":"vpV-T-","alertWrapper":"zpfsSG","size48":"xZvwu3","size36":"_2hahC2","actionWrapper":"A6fRpa","actionIcon":"pG8FcU","actionLink":"NodnNt","closeIcon":"_4qAY1G","mainPath":"-hhMYh"};
 
-const Alert = React.forwardRef((props, ref) => (React.createElement("div", Object.assign({ role: "alert", ref: ref, className: cx(css$Z.alertWrapper, `alert-${props.color || 'default'}`, css$Z.root, props.cx) }, props.rawProps),
-    React.createElement("div", { className: css$Z.mainPath },
-        props.icon && (React.createElement("div", { className: css$Z.iconWrapper },
-            React.createElement(IconContainer, { icon: props.icon, cx: css$Z.actionIcon }))),
-        React.createElement("div", { className: css$Z.content },
+const Alert = React.forwardRef((props, ref) => (React.createElement("div", Object.assign({ role: "alert", ref: ref, className: cx(css$14.alertWrapper, `alert-${props.color || 'default'}`, css$14.root, props.cx, (props.size === '36' ? css$14.size36 : css$14.size48)) }, props.rawProps),
+    React.createElement("div", { className: css$14.mainPath },
+        props.icon && (React.createElement("div", { className: css$14.iconWrapper },
+            React.createElement(IconContainer, { icon: props.icon, cx: css$14.actionIcon }))),
+        React.createElement("div", { className: css$14.content },
             props.children,
-            props.actions && (React.createElement("div", { className: css$Z.actionWrapper }, props.actions.map((action) => (React.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$Z.actionLink, size: "30" })))))),
-        props.onClose && React.createElement(IconButton, { icon: ForwardRef$D, color: "default", onClick: props.onClose, cx: css$Z.closeIcon })))));
-const WarningAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$G, color: "warning", ref: ref }, props)));
-const SuccessAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$H, color: "success", ref: ref }, props)));
-const HintAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$E, color: "info", ref: ref }, props)));
-const ErrorAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$F, color: "error", ref: ref }, props)));
-
-class Dropdown extends React.Component {
-    render() {
-        return React.createElement(Dropdown$1, Object.assign({}, this.props));
-    }
+            props.actions && (React.createElement("div", { className: css$14.actionWrapper }, props.actions.map((action) => (React.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$14.actionLink, size: (props === null || props === void 0 ? void 0 : props.size) === '36' ? '24' : '30' })))))),
+        props.onClose && React.createElement(IconButton, { icon: ForwardRef$G, color: "default", onClick: props.onClose, cx: css$14.closeIcon })))));
+const WarningAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$J, color: "warning", ref: ref }, props)));
+const SuccessAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$K, color: "success", ref: ref }, props)));
+const HintAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$H, color: "info", ref: ref }, props)));
+const ErrorAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$I, color: "error", ref: ref }, props)));
+
+function Dropdown(props) {
+    return React.createElement(Dropdown$1, Object.assign({}, props));
 }
 
-var css$Y = {"root":"_8ToT4D"};
+var css$13 = {"root":"JsYEG6"};
 
 function applyDropdownContainerMods(mods) {
     return [
-        css$Y.root, mods.vPadding && `vPadding-${mods.vPadding}`, mods.padding && `padding-${mods.padding}`,
+        css$13.root, mods.vPadding && `vPadding-${mods.vPadding}`, mods.padding && `padding-${mods.padding}`,
     ];
 }
 const DropdownContainer = withMods(DropdownContainer$1, applyDropdownContainerMods);
 
-var css$X = {"menuRoot":"x3hIV3","bodyRoot":"KJMqO-","submenuRootItem":"FVZ2LP","iconAfter":"ANYUZ-","iconCheck":"SlyqHl","splitterRoot":"LkAzjS","splitter":"b90dig","headerRoot":"o-WYzo","itemRoot":"REJPky","icon":"mRdW9l","link":"f3N9tu"};
+var css$12 = {"menuRoot":"HSAfTU","bodyRoot":"_-3ktfd","submenuRootItem":"CUtbSR","iconAfter":"GieBi2","iconCheck":"_3TgRS9","splitterRoot":"vgjPzd","splitter":"rYP1DH","headerRoot":"g-sb-u","itemRoot":"_3XpNAE","icon":"QDl-ES","link":"ssSji6"};
 
 const icons = systemIcons['36'];
 var IDropdownControlKeys;
@@ -881,10 +1046,13 @@ function DropdownMenuContainer(props) {
             props.onClose();
         }
     };
-    return (React__default.createElement(FocusLock, { as: "menu", className: css$X.menuRoot, returnFocus: true, autoFocus: false, ref: menuRef, lockProps: { onKeyDown: handleArrowKeys, tabIndex: -1 } },
-        React__default.createElement(DropdownContainer$1, Object.assign({}, props, { rawProps: { tabIndex: -1 } }))));
+    return (React__default.createElement(FocusLock, { as: "menu", className: css$12.menuRoot, returnFocus: true, autoFocus: false, ref: menuRef, lockProps: { onKeyDown: handleArrowKeys, tabIndex: -1 } },
+        React__default.createElement(DropdownContainer$1, Object.assign({}, props, { rawProps: Object.assign(Object.assign({}, props.rawProps), { tabIndex: -1 }) }))));
 }
-const DropdownMenuBody = withMods(DropdownMenuContainer, () => [css$X.bodyRoot], ({ style }) => ({ style }));
+const DropdownMenuBody = withMods(DropdownMenuContainer, () => [css$12.bodyRoot], (props) => {
+    const dropdownRawProps = props.minWidth ? Object.assign(Object.assign({}, props.rawProps), { style: { minWidth: `${props.minWidth}px` } }) : null;
+    return (Object.assign(Object.assign({}, props), { rawProps: dropdownRawProps || props.rawProps }));
+});
 const DropdownMenuButton = 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;
@@ -905,32 +1073,32 @@ const DropdownMenuButton = React__default.forwardRef((props, ref) => {
     const getMenuButtonContent = () => {
         const isIconBefore = Boolean(icon && iconPosition !== 'right');
         const isIconAfter = Boolean(icon && iconPosition === 'right');
-        const iconElement = (React__default.createElement(IconButton, { icon: icon, color: isActive ? 'info' : 'default', onClick: onIconClick, cx: cx$1(css$X.icon, iconPosition === 'right' ? css$X.iconAfter : css$X.iconBefore) }));
+        const iconElement = (React__default.createElement(IconButton, { icon: icon, color: isActive ? 'info' : 'default', onClick: onIconClick, cx: cx$1(css$12.icon, iconPosition === 'right' ? css$12.iconAfter : css$12.iconBefore) }));
         return (React__default.createElement(React__default.Fragment, null,
             isIconBefore && iconElement,
-            React__default.createElement(Text$1, { cx: css$X.caption }, caption),
+            React__default.createElement(Text$1, { cx: css$12.caption }, 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$X.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened);
-    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$X.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isDisabled: isDisabled, forwardedRef: ref, target: target }, getMenuButtonContent())) : (React__default.createElement(FlexRow$1, { rawProps: {
+    const itemClassNames = cx$1(props.cx, css$12.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened);
+    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$12.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isDisabled: isDisabled, forwardedRef: ref, target: target }, getMenuButtonContent())) : (React__default.createElement(FlexRow$1, { rawProps: {
             tabIndex: isDisabled ? -1 : 0,
             role: 'menuitem',
             onKeyDown: isDisabled ? null : handleOpenDropdown,
         }, cx: itemClassNames, onClick: handleClick, ref: ref },
         getMenuButtonContent(),
-        isSelected && React__default.createElement(IconContainer, { icon: icons.accept, cx: css$X.selectedCheckmark })));
+        isSelected && React__default.createElement(IconContainer, { icon: icons.accept, cx: css$12.selectedCheckmark })));
 });
 DropdownMenuButton.displayName = 'DropdownMenuButton';
 function DropdownMenuSplitter(props) {
-    return (React__default.createElement("div", { className: cx$1(props.cx, css$X.splitterRoot) },
-        React__default.createElement("hr", { className: css$X.splitter })));
+    return (React__default.createElement("div", { className: cx$1(props.cx, css$12.splitterRoot) },
+        React__default.createElement("hr", { className: css$12.splitter })));
 }
 function DropdownMenuHeader(props) {
-    return (React__default.createElement("div", { className: cx$1(props.cx, css$X.headerRoot) },
-        React__default.createElement("span", { className: css$X.header }, props.caption)));
+    return (React__default.createElement("div", { className: cx$1(props.cx, css$12.headerRoot) },
+        React__default.createElement("span", { className: css$12.header }, props.caption)));
 }
 function DropdownSubMenu(props) {
     const subMenuModifiers = [
@@ -950,7 +1118,7 @@ function DropdownSubMenu(props) {
     ];
     return (React__default.createElement(Dropdown$1, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: "right-start", modifiers: subMenuModifiers, renderBody: (dropdownProps) => React__default.createElement(DropdownMenuBody, Object.assign({ closeOnKey: IDropdownControlKeys.LEFT_ARROW }, props, dropdownProps)), renderTarget: (_a) => {
             var { toggleDropdownOpening } = _a, targetProps = __rest(_a, ["toggleDropdownOpening"]);
-            return (React__default.createElement(DropdownMenuButton, Object.assign({ cx: cx$1(css$X.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
+            return (React__default.createElement(DropdownMenuButton, Object.assign({ cx: cx$1(css$12.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
         } }));
 }
 function DropdownMenuSwitchButton(props) {
@@ -967,16 +1135,16 @@ function DropdownMenuSwitchButton(props) {
             onHandleValueChange(!isSelected);
         }
     };
-    return (React__default.createElement(FlexRow$1, { cx: cx$1(props.cx, css$X.itemRoot, isDisabled && uuiMod.disabled), onClick: () => onHandleValueChange(!isSelected), rawProps: { role: 'menuitem', onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 } },
-        icon && React__default.createElement(IconContainer, { icon: icon, cx: css$X.iconBefore }),
-        React__default.createElement(Text$1, { cx: css$X.caption }, caption),
+    return (React__default.createElement(FlexRow$1, { cx: cx$1(props.cx, css$12.itemRoot, isDisabled && uuiMod.disabled), onClick: () => onHandleValueChange(!isSelected), rawProps: { role: 'menuitem', onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 } },
+        icon && React__default.createElement(IconContainer, { icon: icon, cx: css$12.iconBefore }),
+        React__default.createElement(Text$1, { cx: css$12.caption }, caption),
         React__default.createElement(FlexSpacer, null),
         React__default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
 }
 
-var css$W = {"root":"_4R-was"};
+var css$11 = {"root":"zwZPGx"};
 
-var css$V = {"line-height-12":"c0gZxd","line-height-18":"_9yC5Xy","line-height-24":"fCRI8r","line-height-30":"cB-KTw","font-size-10":"_5hgTXq","font-size-12":"ehPTyN","font-size-14":"A14tMj","font-size-16":"j84TsK","font-size-18":"oru0vD","font-size-24":"lzjAGG","v-padding-2":"vfRjQs","v-padding-3":"eBe-9I","v-padding-5":"K1iwm5","v-padding-6":"-jVtMF","v-padding-8":"ubhaOD","v-padding-9":"QQK4gd","v-padding-11":"bxpPyC","v-padding-12":"E4XFxU","v-padding-14":"k2CYTE","v-padding-15":"iDnA47","v-padding-17":"_1Ixion","v-padding-18":"_0VchC1","v-padding-23":"iCrk4G","v-padding-24":"NxnczC","lineHeight12":"c0gZxd","lineHeight18":"_9yC5Xy","lineHeight24":"fCRI8r","lineHeight30":"cB-KTw","fontSize10":"_5hgTXq","fontSize12":"ehPTyN","fontSize14":"A14tMj","fontSize16":"j84TsK","fontSize18":"oru0vD","fontSize24":"lzjAGG","vPadding2":"vfRjQs","vPadding3":"eBe-9I","vPadding5":"K1iwm5","vPadding6":"-jVtMF","vPadding8":"ubhaOD","vPadding9":"QQK4gd","vPadding11":"bxpPyC","vPadding12":"E4XFxU","vPadding14":"k2CYTE","vPadding15":"iDnA47","vPadding17":"_1Ixion","vPadding18":"_0VchC1","vPadding23":"iCrk4G","vPadding24":"NxnczC"};
+var css$10 = {"line-height-12":"ni57Lf","line-height-18":"OKAXVF","line-height-24":"X56Fq1","line-height-30":"iguoae","font-size-10":"MBBlV9","font-size-12":"X5ywlk","font-size-14":"Uj8gPI","font-size-16":"O8clvg","font-size-18":"zaLxMj","font-size-24":"e-NP4l","v-padding-2":"b8zuNm","v-padding-3":"EEvOeD","v-padding-5":"U8Zpo2","v-padding-6":"wAKImI","v-padding-8":"_8AGks2","v-padding-9":"nkV7Jb","v-padding-11":"DrXT7C","v-padding-12":"Rjqv66","v-padding-14":"EznPYs","v-padding-15":"IHV3J-","v-padding-17":"IdHeYU","v-padding-18":"v-ToBK","v-padding-23":"neQIsZ","v-padding-24":"vGpKKb","lineHeight12":"ni57Lf","lineHeight18":"OKAXVF","lineHeight24":"X56Fq1","lineHeight30":"iguoae","fontSize10":"MBBlV9","fontSize12":"X5ywlk","fontSize14":"Uj8gPI","fontSize16":"O8clvg","fontSize18":"zaLxMj","fontSize24":"e-NP4l","vPadding2":"b8zuNm","vPadding3":"EEvOeD","vPadding5":"U8Zpo2","vPadding6":"wAKImI","vPadding8":"_8AGks2","vPadding9":"nkV7Jb","vPadding11":"DrXT7C","vPadding12":"Rjqv66","vPadding14":"EznPYs","vPadding15":"IHV3J-","vPadding17":"IdHeYU","vPadding18":"v-ToBK","vPadding23":"neQIsZ","vPadding24":"vGpKKb"};
 
 const defaultTextSettings = {
     18: { lineHeight: 12, fontSize: 10 },
@@ -989,7 +1157,7 @@ const defaultTextSettings = {
 };
 function getTextClasses(props, border) {
     if (props.size === 'none') {
-        return [css$V['line-height-' + props.lineHeight], css$V['font-size-' + props.fontSize]];
+        return [css$10['line-height-' + props.lineHeight], css$10['font-size-' + props.fontSize]];
     }
     const setting = {
         size: props.size,
@@ -998,7 +1166,7 @@ function getTextClasses(props, border) {
     };
     const vPadding = (+setting.size - +setting.lineHeight - (border ? 2 : 0)) / 2;
     return [
-        css$V['line-height-' + setting.lineHeight], css$V['font-size-' + setting.fontSize], css$V['v-padding-' + vPadding],
+        css$10['line-height-' + setting.lineHeight], css$10['font-size-' + setting.fontSize], css$10['v-padding-' + vPadding],
     ];
 }
 
@@ -1011,12 +1179,12 @@ function applyTextMods(mods) {
     return [
         `uui-font-${mods.font || 'regular'}`,
         `uui-text-${mods.color || 'primary'}`,
-        css$W.root,
+        css$11.root,
     ].concat(textClasses);
 }
 const Text = withMods(Text$1, applyTextMods);
 
-var css$U = {"container":"rl2ylZ","loading-word":"aDyVY7","animated-loading":"w-Csef","skeleton_loading":"ouebvS","loadingWord":"aDyVY7","animatedLoading":"w-Csef","skeletonLoading":"ouebvS"};
+var css$$ = {"container":"iG1OfX","loading-word":"HIfL66","animated-loading":"wUUw4e","skeleton_loading":"_3EKg7P","loadingWord":"HIfL66","animatedLoading":"wUUw4e","skeletonLoading":"_3EKg7P"};
 
 const TextPlaceholder = (props) => {
     const pattern = '&nbsp;';
@@ -1028,35 +1196,35 @@ const TextPlaceholder = (props) => {
         }
         return words;
     }, [props.wordsCount]);
-    return (React.createElement("div", Object.assign({ "aria-busy": true, className: css$U.container }, props.rawProps), text.map((it, index) => (React.createElement("span", { key: index, className: cx([
-            props.cx, css$U.loadingWord, !props.isNotAnimated && css$U.animatedLoading,
+    return (React.createElement("div", Object.assign({ "aria-busy": true, className: css$$.container }, props.rawProps), text.map((it, index) => (React.createElement("span", { key: index, className: cx([
+            props.cx, css$$.loadingWord, !props.isNotAnimated && css$$.animatedLoading,
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
-var style = {"typography-16":"_0ufxpM","typography-14":"_5WJ0MW","typography-12":"DOpYmb","typography-uui":"q8DmOv","typography16":"_0ufxpM","typography14":"_5WJ0MW","typography12":"DOpYmb","typographyUui":"q8DmOv"};
+var style = {"typography-16":"Qdaj0q","typography-14":"chm54T","typography-12":"PF6KKb","typography-uui":"_1nitLC","typography16":"Qdaj0q","typography14":"chm54T","typography12":"PF6KKb","typographyUui":"_1nitLC"};
 
 const RichTextView = withMods(RichTextView$1, (mods) => [style.typographyUui, style['typography-' + (mods.size || '14')]]);
 
-var css$T = {"modal-blocker":"qknKYi","animateModalBlocker":"kCacrK","modal":"WL50aU","modal-footer":"gS78hC","border-top":"_12mkcR","modal-header":"_1EggyR","modalBlocker":"qknKYi","modalFooter":"gS78hC","borderTop":"_12mkcR","modalHeader":"_1EggyR"};
+var css$_ = {"modal-blocker":"aW0rqf","animateModalBlocker":"dGOTvr","modal":"XsznXQ","modal-footer":"yRTRMA","border-top":"Qd2p01","modal-header":"Rx8Vt6","modalBlocker":"aW0rqf","modalFooter":"yRTRMA","borderTop":"Qd2p01","modalHeader":"Rx8Vt6"};
 
-const ModalBlocker = withMods(ModalBlocker$1, () => [css$T.modalBlocker]);
-const ModalWindow = withMods(ModalWindow$1, () => [css$T.modal], (props) => ({
+const ModalBlocker = withMods(ModalBlocker$1, () => [css$_.modalBlocker]);
+const ModalWindow = withMods(ModalWindow$1, () => [css$_.modal], (props) => ({
     style: Object.assign(Object.assign({}, props.style), { width: `${props.width || 420}px`, height: props.height ? `${props.height}px` : 'auto' }),
 }));
 class ModalHeader extends React.Component {
     render() {
-        return (React.createElement(FlexRow, { padding: this.props.padding || '24', vPadding: "12", borderBottom: this.props.borderBottom, cx: [css$T.modalHeader, this.props.cx], spacing: "12", rawProps: this.props.rawProps },
+        return (React.createElement(FlexRow, { padding: this.props.padding || '24', vPadding: "12", borderBottom: this.props.borderBottom, cx: [css$_.modalHeader, this.props.cx], spacing: "12", rawProps: this.props.rawProps },
             this.props.title && (React.createElement(Text, { size: "48", fontSize: "18", font: "semibold" }, this.props.title)),
             this.props.children,
             this.props.onClose && React.createElement(FlexSpacer, null),
             this.props.onClose && (React.createElement(FlexCell, { shrink: 0, width: "auto" },
-                React.createElement(IconButton, { icon: ForwardRef$D, onClick: this.props.onClose })))));
+                React.createElement(IconButton, { icon: ForwardRef$G, onClick: this.props.onClose })))));
     }
 }
 class ModalFooter extends React.Component {
     render() {
         return (React.createElement(FlexRow, { spacing: this.props.spacing || '12', cx: [
-                css$T.modalFooter, this.props.borderTop && css$T.borderTop, this.props.cx,
+                css$_.modalFooter, this.props.borderTop && css$_.borderTop, this.props.cx,
             ], padding: this.props.padding || '24', vPadding: this.props.vPadding || '24', rawProps: this.props.rawProps }, this.props.children));
     }
 }
@@ -1142,25 +1310,31 @@ const i18n = Object.assign(Object.assign({}, i18n$1), { dataPickerBody: {
     }, confirmationModal: {
         discardButton: 'Discard',
         saveButton: 'Save',
+    }, fileUpload: {
+        labelStart: 'Drop files to attach or',
+        browse: 'browse',
+        labelEnd: 'your local files',
+    }, fileCard: {
+        fileSizeProgress: ' of ',
     } });
 
-var _path$A;
-function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
+var _path$D;
+function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); }
 var SvgCross = function SvgCross(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$C({
+  return /*#__PURE__*/React.createElement("svg", _extends$F({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$A || (_path$A = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$D || (_path$D = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
   })));
 };
-var ForwardRef$C = /*#__PURE__*/forwardRef(SvgCross);
+var ForwardRef$F = /*#__PURE__*/forwardRef(SvgCross);
 
-var css$S = {"root":"IVcab3","icon-wrapper":"m2lJiF","action-wrapper":"M6Ap5E","action-link":"EHclP4","close-icon":"ZkJ1l3","main-path":"zaU1iM","content":"oLOWJH","clear-button":"YioTpr","close-wrapper":"TM2PsZ","iconWrapper":"m2lJiF","actionWrapper":"M6Ap5E","actionLink":"EHclP4","closeIcon":"ZkJ1l3","mainPath":"zaU1iM","clearButton":"YioTpr","closeWrapper":"TM2PsZ"};
+var css$Z = {"root":"rpGnfP","icon-wrapper":"r4DgYr","action-wrapper":"gAQvA1","action-link":"uZeR-j","close-icon":"_19x-BM","main-path":"_8LQdhP","content":"z-2e1V","clear-button":"nIyLZr","close-wrapper":"kkwwXm","iconWrapper":"r4DgYr","actionWrapper":"gAQvA1","actionLink":"uZeR-j","closeIcon":"_19x-BM","mainPath":"_8LQdhP","clearButton":"nIyLZr","closeWrapper":"kkwwXm"};
 
 const NotificationCard = React__default.forwardRef((props, ref) => {
     const notificationCardNode = React__default.useRef(null);
@@ -1175,34 +1349,34 @@ const NotificationCard = React__default.forwardRef((props, ref) => {
             (_b = notificationCardNode.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', props.refreshTimer);
         };
     }, []);
-    return (React__default.createElement("div", Object.assign({ role: "alert", className: cx(props.color && `notification-card-${props.color}`, css$S.root, props.cx), ref: notificationCardNode }, props.rawProps),
-        React__default.createElement("div", { className: css$S.mainPath },
-            props.icon && (React__default.createElement("div", { className: css$S.iconWrapper },
-                React__default.createElement(IconContainer, { icon: props.icon, cx: css$S.actionIcon }))),
-            React__default.createElement("div", { className: css$S.content },
+    return (React__default.createElement("div", Object.assign({ role: "alert", className: cx(props.color && `notification-card-${props.color}`, css$Z.root, props.cx), ref: notificationCardNode }, props.rawProps),
+        React__default.createElement("div", { className: css$Z.mainPath },
+            props.icon && (React__default.createElement("div", { className: css$Z.iconWrapper },
+                React__default.createElement(IconContainer, { icon: props.icon, cx: css$Z.actionIcon }))),
+            React__default.createElement("div", { className: css$Z.content },
                 props.children,
-                props.actions && (React__default.createElement("div", { className: css$S.actionWrapper }, props.actions.map((action) => (React__default.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$S.actionLink, size: "36", rawProps: action.rawProps })))))),
-            props.onClose && (React__default.createElement("div", { className: css$S.closeWrapper },
-                React__default.createElement(IconButton, { icon: ForwardRef$C, color: "default", onClick: props.onClose, cx: css$S.closeIcon }))))));
+                props.actions && (React__default.createElement("div", { className: css$Z.actionWrapper }, props.actions.map((action) => (React__default.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$Z.actionLink, size: "36", rawProps: action.rawProps })))))),
+            props.onClose && (React__default.createElement("div", { className: css$Z.closeWrapper },
+                React__default.createElement(IconButton, { icon: ForwardRef$F, color: "default", onClick: props.onClose, cx: css$Z.closeIcon }))))));
 });
-const WarningNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$G, color: "warning" }, props, { ref: ref, cx: props.cx }))));
-const SuccessNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$H, color: "success" }, props, { ref: ref, cx: props.cx }))));
-const HintNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$E, color: "info" }, props, { ref: ref, cx: props.cx }))));
-const ErrorNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$F, color: "error" }, props, { ref: ref, cx: props.cx }))));
+const WarningNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$J, color: "warning" }, props, { ref: ref, cx: props.cx }))));
+const SuccessNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$K, color: "success" }, props, { ref: ref, cx: props.cx }))));
+const HintNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$H, color: "info" }, props, { ref: ref, cx: props.cx }))));
+const ErrorNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$I, color: "error" }, props, { ref: ref, cx: props.cx }))));
 class ClearNotification extends React__default.Component {
     render() {
-        return (React__default.createElement("div", { className: cx(css$S.notificationWrapper, css$S.clearButton) },
+        return (React__default.createElement("div", { className: cx(css$Z.notificationWrapper, css$Z.clearButton) },
             React__default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => this.context.uuiNotifications.clearAll() })));
     }
 }
 ClearNotification.contextType = UuiContext;
 
-var css$R = {"root":"_957aEn"};
+var css$Y = {"root":"XQwwjX"};
 
 function applyTooltipMods(mods) {
     return [
         `tooltip-${mods.color || 'default'}`,
-        css$R.root,
+        css$Y.root,
     ];
 }
 const Tooltip = withMods(Tooltip$1, applyTooltipMods);
@@ -1224,20 +1398,20 @@ class ConfirmationModal extends React.Component {
     }
 }
 
-var css$Q = {"root":"wGE9K-","size-24":"UFFThX","size-30":"A5Mgow","size-36":"r8Zg1Z","size-42":"vfPkkz","size-48":"_2nwLin","size24":"UFFThX","size30":"A5Mgow","size36":"r8Zg1Z","size42":"vfPkkz","size48":"_2nwLin"};
+var css$X = {"root":"hnQiDB","size-24":"BSBZYf","size-30":"kNgPYC","size-36":"khsr2J","size-42":"I1zp45","size-48":"_2Mpbqo","size24":"BSBZYf","size30":"kNgPYC","size36":"khsr2J","size42":"I1zp45","size48":"_2Mpbqo"};
 
-const defaultSize$7 = '36';
+const defaultSize$8 = '36';
 function applyLabeledInputMods(mods) {
-    return [css$Q.root, css$Q['size-' + (mods.size || defaultSize$7)]];
+    return [css$X.root, css$X['size-' + (mods.size || defaultSize$8)]];
 }
 const LabeledInput = withMods(LabeledInput$1, applyLabeledInputMods, (props) => ({
     Tooltip,
-    infoIcon: systemIcons[props.size || defaultSize$7].help,
+    infoIcon: systemIcons[props.size || defaultSize$8].help,
 }));
 
-var css$P = {"root":"EqKe8Q"};
+var css$W = {"root":"dxHTdg"};
 
-const RadioGroup = withMods(RadioGroup$1, () => [css$P.root], () => ({ RadioInput }));
+const RadioGroup = withMods(RadioGroup$1, () => [css$W.root], () => ({ RadioInput }));
 
 function applyScrollBarsMods() {
     return [
@@ -1248,52 +1422,52 @@ const ScrollBars = withMods(ScrollBars$1, applyScrollBarsMods);
 
 const VirtualList = VirtualList$1;
 
-var css$O = {"root":"SiQkg5"};
+var css$V = {"root":"SvYA1O"};
 
-var css$N = {"root":"eqwqy3","uui-spinner":"bBunG9","uuiSpinner":"bBunG9"};
+var css$U = {"root":"cDGW7J","uui-spinner":"rvG-Sp","uuiSpinner":"rvG-Sp"};
 
 function applySpinnerMods() {
-    return [css$N.root];
+    return [css$U.root];
 }
 const Spinner = withMods(Spinner$1, applySpinnerMods);
 
-const Blocker = withMods(Blocker$1, () => [css$O.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__default.createElement(Spinner, null)) }));
+const Blocker = withMods(Blocker$1, () => [css$V.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__default.createElement(Spinner, null)) }));
 
-var css$M = {"root":"IgOq-b"};
+var css$T = {"root":"-B-Xr8"};
 
-const CheckboxGroup = withMods(CheckboxGroup$1, () => [css$M.root], () => ({ CheckboxInput: Checkbox }));
+const CheckboxGroup = withMods(CheckboxGroup$1, () => [css$T.root], () => ({ CheckboxInput: Checkbox }));
 
 function MultiSwitchComponent(props, ref) {
     return (React.createElement(ControlGroup, { ref: ref, rawProps: Object.assign(Object.assign({}, props.rawProps), { role: 'tablist' }) }, props.items.map((item, index) => (React.createElement(Button, Object.assign({}, props, item, { isDisabled: props.isDisabled, key: index + '-' + item.id, onClick: () => props.onValueChange(item.id), mode: props.value === item.id ? 'solid' : 'outline', color: props.color === 'secondary' && props.value === item.id ? 'primary' : props.color || 'primary', size: props.size, rawProps: { 'aria-current': props.value === item.id, role: 'tab' } }))))));
 }
 const MultiSwitch = React.forwardRef(MultiSwitchComponent);
 
-var css$L = {"root":"tQgnC2","size-24":"_4Ilrzi","size-30":"QzjOsY","size-36":"emuo91","size-42":"aQmhD6","size-48":"TiP4l4","mode-form":"jABptA","mode-cell":"CNrdLy","size24":"_4Ilrzi","size30":"QzjOsY","size36":"emuo91","size42":"aQmhD6","size48":"TiP4l4","modeForm":"jABptA","modeCell":"CNrdLy"};
+var css$S = {"root":"U8iw3K","size-24":"oVJifS","size-30":"uO4zgx","size-36":"VcaOox","size-42":"Rpn9NB","size-48":"muWu8a","mode-form":"bRR9Oh","mode-cell":"CNh9Ev","size24":"oVJifS","size30":"uO4zgx","size36":"VcaOox","size42":"Rpn9NB","size48":"muWu8a","modeForm":"bRR9Oh","modeCell":"CNh9Ev"};
 
-const defaultSize$6 = '36';
-const defaultMode$3 = EditMode.FORM;
+const defaultSize$7 = '36';
+const defaultMode$4 = EditMode.FORM;
 function applyNumericInputMods(mods) {
     return [
-        textInputCss.root, css$L.root, css$L['size-' + (mods.size || defaultSize$6)], textInputCss['size-' + (mods.size || defaultSize$6)], textInputCss['mode-' + (mods.mode || defaultMode$3)],
+        textInputCss.root, css$S.root, css$S['size-' + (mods.size || defaultSize$7)], textInputCss['size-' + (mods.size || defaultSize$7)], textInputCss['mode-' + (mods.mode || defaultMode$4)],
     ];
 }
 const NumericInput = withMods(NumericInput$1, applyNumericInputMods, (props) => {
     var _a, _b;
     return ({
-        upIcon: systemIcons[props.size || defaultSize$6].foldingArrow,
-        downIcon: systemIcons[props.size || defaultSize$6].foldingArrow,
+        upIcon: systemIcons[props.size || defaultSize$7].foldingArrow,
+        downIcon: systemIcons[props.size || defaultSize$7].foldingArrow,
         align: (_a = props.align) !== null && _a !== void 0 ? _a : (props.mode === 'cell' ? 'right' : 'left'),
         disableArrows: (_b = props.disableArrows) !== null && _b !== void 0 ? _b : props.mode === 'cell',
     });
 });
 
-var css$K = {"root":"IrfUNO","mode-form":"QHi0PB","mode-cell":"BQVvZp","mode-inline":"tzDpCJ","size-24":"_2f-59F","size-30":"IuLOXr","size-36":"BAiEhK","size-42":"ykcDF8","size-48":"uiljYH","modeForm":"QHi0PB","modeCell":"BQVvZp","modeInline":"tzDpCJ","size24":"_2f-59F","size30":"IuLOXr","size36":"BAiEhK","size42":"ykcDF8","size48":"uiljYH"};
+var css$R = {"root":"kXYEPr","mode-form":"fLJC6H","mode-cell":"lMQ2mu","mode-inline":"VHhy-f","size-24":"h9zsJB","size-30":"rUsP1s","size-36":"g4-X-X","size-42":"fskKPB","size-48":"DiULaA","modeForm":"fLJC6H","modeCell":"lMQ2mu","modeInline":"VHhy-f","size24":"h9zsJB","size30":"rUsP1s","size36":"g4-X-X","size42":"fskKPB","size48":"DiULaA"};
 
-const defaultSize$5 = '36';
-const defaultMode$2 = EditMode.FORM;
+const defaultSize$6 = '36';
+const defaultMode$3 = EditMode.FORM;
 function applyTextAreaMods(mods) {
     return [
-        css$K.root, css$K['size-' + (mods.size || defaultSize$5)], css$K['mode-' + (mods.mode || defaultMode$2)],
+        css$R.root, css$R['size-' + (mods.size || defaultSize$6)], css$R['mode-' + (mods.mode || defaultMode$3)],
     ];
 }
 const TextArea = withMods(TextArea$1, applyTextAreaMods, (props) => ({
@@ -1301,41 +1475,73 @@ const TextArea = withMods(TextArea$1, applyTextAreaMods, (props) => ({
     maxLength: props.mode === EditMode.CELL ? undefined : props.maxLength,
 }));
 
-var css$J = {"container":"X3dVi9"};
+var css$Q = {"root":"zUdkJF","icon":"agign7","date-input":"t4kTxW","dateInput":"t4kTxW"};
 
-var _path$z;
-function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
+const TimePickerBody = withMods(TimePickerBody$1, () => [css$Q.root], () => ({ addIcon: ForwardRef$1c, subtractIcon: ForwardRef$1c }));
+
+dayjs.extend(customParseFormat);
+const defaultMode$2 = EditMode.FORM;
+class TimePicker extends BaseTimePicker {
+    constructor() {
+        super(...arguments);
+        this.renderInput = (props) => {
+            var _a;
+            if (process.env.NODE_ENV !== "production") {
+                if (this.props.size === '48') {
+                    devLogger.warnAboutDeprecatedPropValue({
+                        component: 'TimePicker',
+                        propName: 'size',
+                        propValue: this.props.size,
+                        propValueUseInstead: '42',
+                        condition: () => ['48'].indexOf(this.props.size) !== -1,
+                    });
+                }
+            }
+            return (React__default.createElement(TextInput, Object.assign({}, props, { onClick: null, size: this.props.size || '36', isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, isInvalid: this.props.isInvalid, cx: [css$Q.dateInput, this.props.inputCx], value: this.state.value, onValueChange: this.handleInputChange, onCancel: this.onClear, onFocus: this.handleFocus, onBlur: this.handleBlur, isDropdown: false, placeholder: this.props.placeholder ? this.props.placeholder : this.getFormat(), mode: this.props.mode || defaultMode$2, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.input })));
+        };
+        this.renderBody = (props) => {
+            var _a;
+            return (!this.props.isDisabled && !this.props.isReadonly && (React__default.createElement(DropdownContainer, Object.assign({}, props),
+                React__default.createElement(TimePickerBody, Object.assign({}, this.props, { value: this.props.value !== null ? this.props.value : { hours: null, minutes: null }, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.body, cx: this.props.bodyCx })))));
+        };
+    }
+}
+
+var css$P = {"container":"CVsFmG"};
+
+var _path$C;
+function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); }
 var SvgNavigationChevronLeft18 = function SvgNavigationChevronLeft18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$B({
+  return /*#__PURE__*/React.createElement("svg", _extends$E({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$z || (_path$z = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$C || (_path$C = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M11.557 5.558 10.5 4.5 6 9l4.5 4.5 1.057-1.057L8.123 9l3.434-3.442z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$B = /*#__PURE__*/forwardRef(SvgNavigationChevronLeft18);
+var ForwardRef$E = /*#__PURE__*/forwardRef(SvgNavigationChevronLeft18);
 
-var _path$y;
-function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
+var _path$B;
+function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
 var SvgNavigationChevronRight18 = function SvgNavigationChevronRight18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$A({
+  return /*#__PURE__*/React.createElement("svg", _extends$D({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$y || (_path$y = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$B || (_path$B = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M7.5 4.5 6.442 5.558 9.877 9l-3.435 3.443L7.5 13.5 12 9 7.5 4.5z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$A = /*#__PURE__*/forwardRef(SvgNavigationChevronRight18);
+var ForwardRef$D = /*#__PURE__*/forwardRef(SvgNavigationChevronRight18);
 
 const uuiHeader = {
     container: 'uui-datepickerheader-container',
@@ -1409,17 +1615,17 @@ function DatePickerHeader(props) {
         var _a, _b, _c;
         return `${((_a = props.value) === null || _a === void 0 ? void 0 : _a.view) !== 'MONTH_SELECTION' ? dayjs.months()[(_b = props.value) === null || _b === void 0 ? void 0 : _b.displayedDate.month()] : ''} ${(_c = props.value) === null || _c === void 0 ? void 0 : _c.displayedDate.year()}`;
     }, [(_a = props.value) === null || _a === void 0 ? void 0 : _a.view, (_b = props.value) === null || _b === void 0 ? void 0 : _b.displayedDate]);
-    return (React.createElement("div", { className: cx(css$J.container, uuiHeader.container, props.cx) },
+    return (React.createElement("div", { className: cx(css$P.container, uuiHeader.container, props.cx) },
         React.createElement("header", { className: uuiHeader.header },
-            React.createElement(Button, { icon: ForwardRef$B, color: "secondary", mode: "ghost", cx: uuiHeader.navIconLeft, onClick: () => onLeftNavigationArrow() }),
+            React.createElement(Button, { icon: ForwardRef$E, color: "secondary", mode: "ghost", cx: uuiHeader.navIconLeft, onClick: () => onLeftNavigationArrow() }),
             React.createElement(Button, { caption: title, mode: "ghost", cx: uuiHeader.navTitle, onClick: () => onCaptionClick(props.value.view) }),
-            React.createElement(Button, { icon: ForwardRef$A, color: "secondary", mode: "ghost", cx: uuiHeader.navIconRight, onClick: () => onRightNavigationArrow() }))));
+            React.createElement(Button, { icon: ForwardRef$D, color: "secondary", mode: "ghost", cx: uuiHeader.navIconRight, onClick: () => onRightNavigationArrow() }))));
 }
 
-var css$I = {"root":"mB6uW5"};
+var css$O = {"root":"_1rVzHM"};
 
 function applyDateSelectionMods() {
-    return [css$I.root];
+    return [css$O.root];
 }
 const Calendar = withMods(Calendar$1, applyDateSelectionMods);
 
@@ -1486,14 +1692,14 @@ class DatePicker extends BaseDatePicker {
     }
 }
 
-var css$H = {"root":"-K5IC3"};
+var css$N = {"root":"S5Fe-D"};
 
 function applyCalendarPresetsMods() {
-    return [css$H.root];
+    return [css$N.root];
 }
 const CalendarPresets = withMods(CalendarPresets$1, applyCalendarPresetsMods, () => ({}));
 
-var css$G = {"root":"Lbu--e","container":"AFrppk","day-selection":"lVzx5V","from-picker":"_3QR6wl","to-picker":"T7G-b1","bodes-wrapper":"R94tJn","blocker":"_7UCNa0","daySelection":"lVzx5V","fromPicker":"_3QR6wl","toPicker":"T7G-b1","bodesWrapper":"R94tJn"};
+var css$M = {"root":"vgnT35","container":"_29eBA1","day-selection":"_74vqZj","from-picker":"LvdvgA","to-picker":"z-8JRJ","bodes-wrapper":"_2CJiuD","blocker":"JncIpE","daySelection":"_74vqZj","fromPicker":"LvdvgA","toPicker":"z-8JRJ","bodesWrapper":"_2CJiuD"};
 
 dayjs.extend(isoWeek);
 function weekCount(displayedDate) {
@@ -1590,16 +1796,16 @@ class RangeDatePickerBody extends React.Component {
         };
         this.renderDatePicker = () => {
             var _a, _b;
-            return (React.createElement(FlexRow, { cx: [((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.view) === 'DAY_SELECTION' && css$G.daySelection, css$G.container], alignItems: "top" },
+            return (React.createElement(FlexRow, { cx: [((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.view) === 'DAY_SELECTION' && css$M.daySelection, css$M.container], alignItems: "top" },
                 React.createElement(FlexCell, { width: "auto" },
                     React.createElement(FlexRow, null,
-                        React.createElement(FlexRow, { cx: css$G.bodesWrapper, alignItems: "top" },
-                            React.createElement(DatePickerBody, { cx: cx$1(css$G.fromPicker), setSelectedDate: (nv) => this.setSelectedDate(nv), value: this.getFromValue(), setDisplayedDateAndView: (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'from'), getDayCX: this.getDayCX, filter: this.props.filter, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday }),
-                            React.createElement(DatePickerBody, { cx: cx$1(css$G.toPicker), setSelectedDate: (nv) => this.setSelectedDate(nv), value: this.getToValue(), setDisplayedDateAndView: (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'to'), getDayCX: this.getDayCX, filter: this.props.filter, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday }),
+                        React.createElement(FlexRow, { cx: css$M.bodesWrapper, alignItems: "top" },
+                            React.createElement(DatePickerBody, { cx: cx$1(css$M.fromPicker), setSelectedDate: (nv) => this.setSelectedDate(nv), value: this.getFromValue(), setDisplayedDateAndView: (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'from'), getDayCX: this.getDayCX, filter: this.props.filter, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday }),
+                            React.createElement(DatePickerBody, { cx: cx$1(css$M.toPicker), setSelectedDate: (nv) => this.setSelectedDate(nv), value: this.getToValue(), setDisplayedDateAndView: (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'to'), getDayCX: this.getDayCX, filter: this.props.filter, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday }),
                             ((_b = this.props.value) === null || _b === void 0 ? void 0 : _b.view) !== 'DAY_SELECTION' && (React.createElement("div", { style: {
                                     left: this.state.activePart === 'from' && '50%',
                                     right: this.state.activePart === 'to' && '50%',
-                                }, className: css$G.blocker }))),
+                                }, className: css$M.blocker }))),
                         this.props.presets && this.renderPresets()),
                     this.props.renderFooter && this.props.renderFooter())));
         };
@@ -1650,11 +1856,11 @@ class RangeDatePickerBody extends React.Component {
         });
     }
     render() {
-        return (React.createElement("div", Object.assign({ className: cx$1(css$G.root, uuiDatePickerBodyBase.container, this.props.cx) }, this.props.rawProps), this.renderDatePicker()));
+        return (React.createElement("div", Object.assign({ className: cx$1(css$M.root, uuiDatePickerBodyBase.container, this.props.cx) }, this.props.rawProps), this.renderDatePicker()));
     }
 }
 
-var css$F = {"dropdown-container":"xd3Nzu","container":"dRyWIe","button-group":"_6TH8dH","date-input":"xCZg80","size-24":"HH3ooz","size-30":"BHJ5CH","size-36":"Ijc-pg","size-42":"yRgDf3","size-48":"XSq2vh","date-input-group":"gTuQ6v","separator":"QhkaPo","mode-form":"cn0SP5","mode-cell":"ZyaB6g","dropdownContainer":"xd3Nzu","buttonGroup":"_6TH8dH","dateInput":"xCZg80","size24":"HH3ooz","size30":"BHJ5CH","size36":"Ijc-pg","size42":"yRgDf3","size48":"XSq2vh","dateInputGroup":"gTuQ6v","modeForm":"cn0SP5","modeCell":"ZyaB6g"};
+var css$L = {"dropdown-container":"P8hvx7","container":"g-rgzG","button-group":"b4GmUr","date-input":"_2-2M9Y","size-24":"QRGYz9","size-30":"e-W-m3","size-36":"rEeNQJ","size-42":"bA52OF","size-48":"e8L-h-","date-input-group":"tqVphe","separator":"-qvoWt","mode-form":"zypaqY","mode-cell":"JOr0-p","dropdownContainer":"P8hvx7","buttonGroup":"b4GmUr","dateInput":"_2-2M9Y","size24":"QRGYz9","size30":"e-W-m3","size36":"rEeNQJ","size42":"bA52OF","size48":"e8L-h-","dateInputGroup":"tqVphe","modeForm":"zypaqY","modeCell":"JOr0-p"};
 
 const defaultValue = { from: null, to: null };
 class RangeDatePicker extends BaseRangeDatePicker {
@@ -1673,35 +1879,35 @@ class RangeDatePicker extends BaseRangeDatePicker {
                     });
                 }
             }
-            return (React.createElement("div", { className: cx(this.props.inputCx, css$F.dateInputGroup, this.props.isDisabled && uuiMod.disabled, this.props.isReadonly && uuiMod.readonly, this.props.isInvalid && uuiMod.invalid, this.state.inFocus && uuiMod.focus), onClick: !this.props.isDisabled && props.onClick, onBlur: this.handleWrapperBlur, ref: props.ref },
-                React.createElement(TextInput, { icon: systemIcons[this.props.size || '36'].calendar, cx: cx(css$F.dateInput, css$F['size-' + (this.props.size || 36)], this.state.inFocus === 'from' && uuiMod.focus), size: this.props.size || '36', placeholder: this.props.getPlaceholder ? this.props.getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: this.state.inputValue.from, onValueChange: this.getChangeHandler('from'), isInvalid: this.props.isInvalid, isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, onFocus: (event) => this.handleFocus(event, 'from'), onBlur: (event) => this.handleBlur(event, 'from'), isDropdown: false, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.from }),
-                React.createElement("div", { className: css$F.separator }),
-                React.createElement(TextInput, { cx: cx(css$F.dateInput, css$F['size-' + (this.props.size || 36)], this.state.inFocus === 'to' && uuiMod.focus), placeholder: this.props.getPlaceholder ? this.props.getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: this.props.size || '36', value: this.state.inputValue.to, onCancel: this.props.disableClear ? null : this.state.inputValue.from && this.state.inputValue.to && this.handleCancel, onValueChange: this.getChangeHandler('to'), isInvalid: this.props.isInvalid, isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, onFocus: (e) => this.handleFocus(e, 'to'), onBlur: (e) => this.handleBlur(e, 'to'), isDropdown: false, rawProps: (_b = this.props.rawProps) === null || _b === void 0 ? void 0 : _b.to })));
+            return (React.createElement("div", { className: cx(this.props.inputCx, css$L.dateInputGroup, this.props.isDisabled && uuiMod.disabled, this.props.isReadonly && uuiMod.readonly, this.props.isInvalid && uuiMod.invalid, this.state.inFocus && uuiMod.focus), onClick: !this.props.isDisabled && props.onClick, onBlur: this.handleWrapperBlur, ref: props.ref },
+                React.createElement(TextInput, { icon: systemIcons[this.props.size || '36'].calendar, cx: cx(css$L.dateInput, css$L['size-' + (this.props.size || 36)], this.state.inFocus === 'from' && uuiMod.focus), size: this.props.size || '36', placeholder: this.props.getPlaceholder ? this.props.getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: this.state.inputValue.from, onValueChange: this.getChangeHandler('from'), isInvalid: this.props.isInvalid, isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, onFocus: (event) => this.handleFocus(event, 'from'), onBlur: (event) => this.handleBlur(event, 'from'), isDropdown: false, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.from }),
+                React.createElement("div", { className: css$L.separator }),
+                React.createElement(TextInput, { cx: cx(css$L.dateInput, css$L['size-' + (this.props.size || 36)], this.state.inFocus === 'to' && uuiMod.focus), placeholder: this.props.getPlaceholder ? this.props.getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: this.props.size || '36', value: this.state.inputValue.to, onCancel: this.props.disableClear ? null : this.state.inputValue.from && this.state.inputValue.to && this.handleCancel, onValueChange: this.getChangeHandler('to'), isInvalid: this.props.isInvalid, isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, onFocus: (e) => this.handleFocus(e, 'to'), onBlur: (e) => this.handleBlur(e, 'to'), isDropdown: false, rawProps: (_b = this.props.rawProps) === null || _b === void 0 ? void 0 : _b.to })));
         };
     }
     renderBody(props) {
         var _a;
-        return (React.createElement(DropdownContainer, Object.assign({}, props, { cx: cx(css$F.dropdownContainer) }),
+        return (React.createElement(DropdownContainer, Object.assign({}, props, { cx: cx(css$L.dropdownContainer) }),
             React.createElement(FlexRow, null,
                 React.createElement(RangeDatePickerBody, { cx: cx(this.props.bodyCx), value: this.getValue(), onValueChange: this.onRangeChange, filter: this.props.filter, changeIsOpen: this.toggleOpening, presets: this.props.presets, focusPart: this.state.inFocus, renderDay: this.props.renderDay, renderFooter: this.props.renderFooter && (() => this.props.renderFooter(this.props.value || defaultValue)), isHoliday: this.props.isHoliday, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.body }))));
     }
 }
 
-var css$E = {"blocker":"UP8Z6M","marker":"rg5TRj","top":"YIyHSI","bottom":"-Z1eDb","left":"mzhzuK","right":"_8p8pbV","inside":"ZUW7Os"};
+var css$K = {"blocker":"yjIUuA","marker":"trtrnO","top":"zdHyhf","bottom":"Aj4N3E","left":"c1bjoW","right":"Oynlxu","inside":"Q3ai4v"};
 
-class DropMarker extends React.Component {
-    render() {
-        var _a;
-        return this.props.isDndInProgress ? (React.createElement(React.Fragment, null,
-            this.props.enableBlocker && React.createElement("div", { className: css$E.blocker }),
+function DropMarker(props) {
+    return props.isDndInProgress
+        ? (React.createElement(React.Fragment, null,
+            props.enableBlocker && React.createElement("div", { className: css$K.blocker }),
             React.createElement("div", { className: cx([
-                    css$E.marker, css$E[this.props.position],
-                    (_a = this.props) === null || _a === void 0 ? void 0 : _a.cx,
-                ]) }))) : null;
-    }
+                    css$K.marker,
+                    css$K[props.position],
+                    props === null || props === void 0 ? void 0 : props.cx,
+                ]) })))
+        : null;
 }
 
-var css$D = {"body":"lUcfam","modal":"fX2fPJ","search-wrapper":"rfnkkA","checkbox":"mmvkpI","no-found-size-24":"hjx-jK","no-found-size-30":"Ym5Eaq","no-found-size-36":"yTv8gk","no-found-size-42":"WHsYmz","searchWrapper":"rfnkkA","noFoundSize24":"hjx-jK","noFoundSize30":"Ym5Eaq","noFoundSize36":"yTv8gk","noFoundSize42":"WHsYmz"};
+var css$J = {"body":"kdmBdv","modal":"_6H5O3-","search-wrapper":"GILTWW","checkbox":"UdfrGY","no-found-size-24":"ss9d1z","no-found-size-30":"FWqJss","no-found-size-36":"OTZTdB","no-found-size-42":"A3LN9Y","searchWrapper":"GILTWW","noFoundSize24":"ss9d1z","noFoundSize30":"FWqJss","noFoundSize36":"OTZTdB","noFoundSize42":"A3LN9Y"};
 
 class DataPickerBody extends PickerBodyBase {
     constructor() {
@@ -1713,16 +1919,16 @@ class DataPickerBody extends PickerBodyBase {
         if (this.props.renderNotFound) {
             return this.props.renderNotFound();
         }
-        return (React__default.createElement(FlexCell$1, { cx: css$D[`no-found-size-${this.props.searchSize || 36}`], grow: 1, textAlign: "center" },
+        return (React__default.createElement(FlexCell$1, { cx: css$J[`no-found-size-${this.props.searchSize || 36}`], grow: 1, textAlign: "center" },
             React__default.createElement(Text, { size: this.props.searchSize || '36' }, i18n.dataPickerBody.noRecordsMessage)));
     }
     render() {
         const searchSize = isMobile() ? '48' : this.props.searchSize || '36';
         return (React__default.createElement(React__default.Fragment, null,
-            this.showSearch() && (React__default.createElement("div", { key: "search", className: css$D.searchWrapper },
+            this.showSearch() && (React__default.createElement("div", { key: "search", className: css$J.searchWrapper },
                 React__default.createElement(FlexCell$1, { grow: 1 },
                     React__default.createElement(SearchInput, Object.assign({ ref: this.searchRef, placeholder: i18n.dataPickerBody.searchPlaceholder }, this.searchLens.toProps(), { onKeyDown: this.searchKeyDown, size: searchSize }))))),
-            React__default.createElement(FlexRow, { key: "body", cx: cx$1(css$D.body, css$D[this.props.editMode], css$D[this.props.selectionMode]), rawProps: { style: { maxHeight: this.props.maxHeight } } }, this.props.rowsCount > 0 ? (React__default.createElement(VirtualList, Object.assign({}, this.lens.toProps(), { rows: this.props.rows, role: "listbox", rawProps: this.props.rawProps, rowsCount: this.props.rowsCount }))) : (this.renderNotFound()))));
+            React__default.createElement(FlexRow, { key: "body", cx: cx$1(css$J.body, css$J[this.props.editMode], css$J[this.props.selectionMode]), rawProps: { style: { maxHeight: this.props.maxHeight } } }, this.props.rowsCount > 0 ? (React__default.createElement(VirtualList, Object.assign({}, this.lens.toProps(), { rows: this.props.rows, role: "listbox", rawProps: this.props.rawProps, rowsCount: this.props.rowsCount }))) : (this.renderNotFound()))));
     }
 }
 
@@ -1756,37 +1962,37 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = React__default.memo(DataPickerFooterImpl);
 
-var css$C = {"header":"ZyxGTe","close":"_1d324m"};
+var css$I = {"header":"vn-nHs","close":"OMq2PW"};
 
-var _path$x;
-function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
+var _path$A;
+function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
 var SvgNavigationClose24 = function SvgNavigationClose24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$z({
+  return /*#__PURE__*/React.createElement("svg", _extends$C({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$x || (_path$x = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$A || (_path$A = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$z = /*#__PURE__*/forwardRef(SvgNavigationClose24);
+var ForwardRef$C = /*#__PURE__*/forwardRef(SvgNavigationClose24);
 
 const DataPickerHeaderImpl = (props) => {
     const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
-    return (React__default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: css$C.header },
+    return (React__default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: css$I.header },
         React__default.createElement(Text, { size: "48", font: "semibold" }, title),
-        React__default.createElement(IconButton, { icon: ForwardRef$z, onClick: () => { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$C.close })));
+        React__default.createElement(IconButton, { icon: ForwardRef$C, onClick: () => { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$I.close })));
 };
 const DataPickerHeader = React__default.memo(DataPickerHeaderImpl);
 
 var _defs$1, _use;
-function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
+function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
 var SvgTreeFoldingArrow = function SvgTreeFoldingArrow(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$y({
+  return /*#__PURE__*/React.createElement("svg", _extends$B({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
@@ -1804,19 +2010,19 @@ var SvgTreeFoldingArrow = function SvgTreeFoldingArrow(props, ref) {
     fillRule: "evenodd"
   })));
 };
-var ForwardRef$y = /*#__PURE__*/forwardRef(SvgTreeFoldingArrow);
+var ForwardRef$B = /*#__PURE__*/forwardRef(SvgTreeFoldingArrow);
 
-var css$B = {"cell":"_023AAv","wrapper":"RCSxqf","align-widgets-top":"_-6LpN6","size-24":"_1ztRBP","folding-arrow":"VmbxQO","size-30":"pnsuEY","size-36":"_2kN36N","size-42":"yHxowC","size-48":"O1ApU-","size-60":"_5l6Vtc","align-widgets-center":"_2Jro9f","padding-12":"U7a9TS","padding-24":"QE8d2v","padding-left-12":"mQSH4K","padding-left-24":"r7Z0Xg","padding-right-24":"_1t-9-p","drag-handle":"qwiR9M","checkbox":"V9SAs8","indent":"TNF-T9","folding-arrow-12":"_4-Ub0b","folding-arrow-18":"JnzNaZ","icon-container":"fILYrH","alignWidgetsTop":"_-6LpN6","size24":"_1ztRBP","foldingArrow":"VmbxQO","size30":"pnsuEY","size36":"_2kN36N","size42":"yHxowC","size48":"O1ApU-","size60":"_5l6Vtc","alignWidgetsCenter":"_2Jro9f","padding12":"U7a9TS","padding24":"QE8d2v","paddingLeft12":"mQSH4K","paddingLeft24":"r7Z0Xg","paddingRight24":"_1t-9-p","dragHandle":"qwiR9M","foldingArrow12":"_4-Ub0b","foldingArrow18":"JnzNaZ","iconContainer":"fILYrH"};
+var css$H = {"cell":"LRUyLU","wrapper":"L64u-x","align-widgets-top":"kto44L","size-24":"jNfOwt","folding-arrow":"wly04y","size-30":"ioPNlr","size-36":"_3zFe4p","size-42":"r-3jor","size-48":"bqWV5K","size-60":"V1rsmP","align-widgets-center":"PkBqPA","padding-12":"EfPQH-","padding-24":"ptW8dD","padding-left-12":"_5KAgZv","padding-left-24":"fqGCFt","padding-right-24":"_8yKMp8","drag-handle":"muvtVr","checkbox":"r9WPQG","indent":"xytGRh","folding-arrow-12":"eLfIsA","folding-arrow-18":"SEDGj1","icon-container":"wf6npx","alignWidgetsTop":"kto44L","size24":"jNfOwt","foldingArrow":"wly04y","size30":"ioPNlr","size36":"_3zFe4p","size42":"r-3jor","size48":"bqWV5K","size60":"V1rsmP","alignWidgetsCenter":"PkBqPA","padding12":"EfPQH-","padding24":"ptW8dD","paddingLeft12":"_5KAgZv","paddingLeft24":"fqGCFt","paddingRight24":"_8yKMp8","dragHandle":"muvtVr","foldingArrow12":"eLfIsA","foldingArrow18":"SEDGj1","iconContainer":"wf6npx"};
 
 function DataTableRowAddons(props) {
     var _a, _b;
     const row = props.rowProps;
     const additionalItemSize = +props.size < 30 ? '12' : '18';
     return (React.createElement(React.Fragment, null,
-        ((_a = row.dnd) === null || _a === void 0 ? void 0 : _a.srcData) && React.createElement(DragHandle, { key: "dh", cx: css$B.dragHandle }),
-        ((_b = row === null || row === void 0 ? void 0 : row.checkbox) === null || _b === void 0 ? void 0 : _b.isVisible) && (React.createElement(Checkbox, { key: "cb", cx: css$B.checkbox, tabIndex: props.tabIndex, size: additionalItemSize, value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => { var _a; return (_a = row.onCheck) === null || _a === void 0 ? void 0 : _a.call(row, row); }, isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
-        row.indent > 0 && (React.createElement("div", { key: "fold", className: css$B.indent, style: { marginLeft: (row.indent - 1) * 24 } }, row.isFoldable && (React.createElement(IconContainer, { key: "icon", icon: ForwardRef$y, cx: [
-                css$B.foldingArrow, css$B[`folding-arrow-${additionalItemSize}`], uuiMarkers.clickable, css$B.iconContainer,
+        ((_a = row.dnd) === null || _a === void 0 ? void 0 : _a.srcData) && React.createElement(DragHandle, { key: "dh", cx: css$H.dragHandle }),
+        ((_b = row === null || row === void 0 ? void 0 : row.checkbox) === null || _b === void 0 ? void 0 : _b.isVisible) && (React.createElement(Checkbox, { key: "cb", cx: css$H.checkbox, tabIndex: props.tabIndex, size: additionalItemSize, value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => { var _a; return (_a = row.onCheck) === null || _a === void 0 ? void 0 : _a.call(row, row); }, isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
+        row.indent > 0 && (React.createElement("div", { key: "fold", className: css$H.indent, style: { marginLeft: (row.indent - 1) * 24 } }, row.isFoldable && (React.createElement(IconContainer, { key: "icon", icon: ForwardRef$B, cx: [
+                css$H.foldingArrow, css$H[`folding-arrow-${additionalItemSize}`], uuiMarkers.clickable, css$H.iconContainer,
             ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row) }))))));
 }
 function DataTableCell(props) {
@@ -1834,18 +2040,18 @@ function DataTableCell(props) {
     props.cx = [
         'data-table-cell',
         props.cx,
-        css$B.cell,
-        css$B['size-' + (props.size || '36')],
-        css$B[`padding-${props.padding || (isEditable && !props.rowProps.isLoading && '0') || '12'}`],
-        props.isFirstColumn && css$B[`padding-left-${props.padding || '24'}`],
-        props.isLastColumn && css$B['padding-right-24'],
-        css$B[`align-widgets-${props.alignActions || 'top'}`],
+        css$H.cell,
+        css$H['size-' + (props.size || '36')],
+        css$H[`padding-${props.padding || (isEditable && !props.rowProps.isLoading && '0') || '12'}`],
+        props.isFirstColumn && css$H[`padding-left-${props.padding || (isEditable && !props.rowProps.isLoading && '12') || '24'}`],
+        props.isLastColumn && css$H['padding-right-24'],
+        css$H[`align-widgets-${props.alignActions || 'top'}`],
         (props.border || isEditable) && 'uui-dt-vertical-cell-border',
     ];
     return React.createElement(DataTableCell$1, Object.assign({}, props));
 }
 
-var css$A = {"root":"SdWcGc","size-24":"_7wE5FN","size-30":"BZ1I3d","size-36":"s4E5In","size-48":"FFft6M","size-60":"j9QghM","size24":"_7wE5FN","size30":"BZ1I3d","size36":"s4E5In","size48":"FFft6M","size60":"j9QghM"};
+var css$G = {"root":"S40yph","size-24":"_5pj1iP","size-30":"usSUJj","size-36":"O0TPr6","size-48":"rsdNNq","size-60":"YkEOBb","size24":"_5pj1iP","size30":"usSUJj","size36":"O0TPr6","size48":"rsdNNq","size60":"YkEOBb"};
 
 // 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.
@@ -1857,137 +2063,137 @@ const renderDropMarkers = (props) => React.createElement(DropMarker, Object.assi
 const propsMods = { renderCell, renderDropMarkers };
 const DataTableRow = withMods(DataTableRow$1, ({ borderBottom = true, size }) => {
     return [
-        css$A.root, borderBottom && 'uui-dt-row-border', css$A['size-' + (size || '36')],
+        css$G.root, borderBottom && 'uui-dt-row-border', css$G['size-' + (size || '36')],
     ];
 }, () => propsMods);
 
-var css$z = {"header-cell":"_8imNSh","config-icon":"HkGVuX","headerCell":"_8imNSh","configIcon":"HkGVuX"};
+var css$F = {"header-cell":"rlOCKc","config-icon":"B7I0Fe","headerCell":"rlOCKc","configIcon":"B7I0Fe"};
 
-var _path$w;
-function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
+var _path$z;
+function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
 var SvgActionSettings18 = function SvgActionSettings18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$x({
+  return /*#__PURE__*/React.createElement("svg", _extends$A({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$w || (_path$w = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$z || (_path$z = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M3 9.093a6.083 6.083 0 0 1 0-.186L1.55 7.271a1 1 0 0 1-.118-1.163l1.28-2.216a1 1 0 0 1 1.066-.48l2.14.439a3.81 3.81 0 0 1 .163-.094l.691-2.073A1 1 0 0 1 7.721 1h2.558a1 1 0 0 1 .949.684l.69 2.073c.056.03.11.061.163.094l2.141-.439a1 1 0 0 1 1.067.48l1.279 2.216a1 1 0 0 1-.118 1.163L15 8.907a5.72 5.72 0 0 1 0 .186l1.45 1.636a1 1 0 0 1 .118 1.163l-1.28 2.216a1 1 0 0 1-1.066.48l-2.14-.438a6.215 6.215 0 0 1-.163.093l-.691 2.073a1 1 0 0 1-.949.684H7.721a1 1 0 0 1-.949-.684l-.69-2.073a6.105 6.105 0 0 1-.163-.094l-2.141.439a1 1 0 0 1-1.067-.48l-1.279-2.216a1 1 0 0 1 .118-1.163L3 9.093zM9 12a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$x = /*#__PURE__*/forwardRef(SvgActionSettings18);
+var ForwardRef$A = /*#__PURE__*/forwardRef(SvgActionSettings18);
 
-const DataTableHeaderRow = withMods(DataTableHeaderRow$1, (mods) => [css$z.root], (mods) => ({
+const DataTableHeaderRow = withMods(DataTableHeaderRow$1, () => [css$F.root], (mods) => ({
     renderCell: (props) => React.createElement(DataTableHeaderCell, Object.assign({}, props, { size: mods.size, textCase: mods.textCase || 'normal', key: props.column.key })),
-    renderConfigButton: () => React.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: css$z.configIcon, color: "default", icon: ForwardRef$x }),
+    renderConfigButton: () => React.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: css$F.configIcon, color: "default", icon: ForwardRef$A }),
 }));
 
-var css$y = {"cell":"f92Voj","sort-icon":"kBIPQT","dropdown-icon":"_4wL5h7","infoIcon":"_3kv0Ou","resizable":"OguAeu","size-24":"KCxb1v","size-30":"hXpCGG","size-36":"cMn8B0","size-42":"cKF4V4","size-48":"_9Ubrx9","padding-left-24":"es13AN","padding-right-24":"quoVOM","caption":"x6aUj3","checkbox":"_6z6hrg","icon":"vhIt7R","icon-cell":"heHNOs","align-right":"TwQ966","align-center":"MuWmhp","tooltip-wrapper":"v3eKuR","cell-tooltip":"iRlzGR","upper-case":"bRr-hu","font-size-14":"OFWDew","resize-mark":"p5FF1E","draggable":"_4TWRQh","ghost":"wz7OqY","is-dragged-out":"wTwyO9","dnd-marker-left":"DGkPT4","dnd-marker-right":"_0zb6Vt","cell-tooltip-wrapper":"XTKaNv","cell-tooltip-text":"Vbyba2","sortIcon":"kBIPQT","dropdownIcon":"_4wL5h7","size24":"KCxb1v","size30":"hXpCGG","size36":"cMn8B0","size42":"cKF4V4","size48":"_9Ubrx9","paddingLeft24":"es13AN","paddingRight24":"quoVOM","iconCell":"heHNOs","alignRight":"TwQ966","alignCenter":"MuWmhp","tooltipWrapper":"v3eKuR","cellTooltip":"iRlzGR","upperCase":"bRr-hu","fontSize14":"OFWDew","resizeMark":"p5FF1E","isDraggedOut":"wTwyO9","dndMarkerLeft":"DGkPT4","dndMarkerRight":"_0zb6Vt","cellTooltipWrapper":"XTKaNv","cellTooltipText":"Vbyba2"};
+var css$E = {"cell":"DF-Vsz","sort-icon":"l4IOvb","dropdown-icon":"PWI4uz","infoIcon":"DD45AD","resizable":"ZUiCk0","size-24":"SEb7MX","size-30":"PYODSm","size-36":"ntfb-w","size-42":"jNJ6w5","size-48":"Qf1PqB","padding-left-24":"_8KrTNj","padding-right-24":"MimAfu","caption":"vGtIVj","checkbox":"_6vDzvE","icon":"sIkwLb","icon-cell":"_8aWUyJ","align-right":"gWhw4c","align-center":"tm0EBf","tooltip-wrapper":"P5CsnT","cell-tooltip":"Qnbu-P","upper-case":"hESSRh","font-size-14":"hz8RvU","resize-mark":"brEAnP","draggable":"I2yo9H","ghost":"yCoBOI","is-dragged-out":"sybWkA","dnd-marker-left":"DLabjo","dnd-marker-right":"Cz5-3v","cell-tooltip-wrapper":"-FME4L","cell-tooltip-text":"OVpd1a","sortIcon":"l4IOvb","dropdownIcon":"PWI4uz","size24":"SEb7MX","size30":"PYODSm","size36":"ntfb-w","size42":"jNJ6w5","size48":"Qf1PqB","paddingLeft24":"_8KrTNj","paddingRight24":"MimAfu","iconCell":"_8aWUyJ","alignRight":"gWhw4c","alignCenter":"tm0EBf","tooltipWrapper":"P5CsnT","cellTooltip":"Qnbu-P","upperCase":"hESSRh","fontSize14":"hz8RvU","resizeMark":"brEAnP","isDraggedOut":"sybWkA","dndMarkerLeft":"DLabjo","dndMarkerRight":"Cz5-3v","cellTooltipWrapper":"-FME4L","cellTooltipText":"OVpd1a"};
 
-var _path$v;
-function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
+var _path$y;
+function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
 var SvgTableSwap18 = function SvgTableSwap18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$w({
+  return /*#__PURE__*/React.createElement("svg", _extends$z({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$y || (_path$y = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M6 1 2 5h3v7h2V5h3L6 1zm7 12V6h-2v7H8l4 4 4-4h-3z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$w = /*#__PURE__*/forwardRef(SvgTableSwap18);
+var ForwardRef$z = /*#__PURE__*/forwardRef(SvgTableSwap18);
 
-var _path$u;
-function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
+var _path$x;
+function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
 var SvgTableSortAsc18 = function SvgTableSortAsc18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$v({
+  return /*#__PURE__*/React.createElement("svg", _extends$y({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$x || (_path$x = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M10 6v10H8V6H5l4-4 4 4h-3z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$v = /*#__PURE__*/forwardRef(SvgTableSortAsc18);
+var ForwardRef$y = /*#__PURE__*/forwardRef(SvgTableSortAsc18);
 
-var _path$t;
-function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
+var _path$w;
+function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
 var SvgTableSortDesc18 = function SvgTableSortDesc18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$u({
+  return /*#__PURE__*/React.createElement("svg", _extends$x({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$t || (_path$t = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$w || (_path$w = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M10 12V2H8v10H5l4 4 4-4h-3z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$u = /*#__PURE__*/forwardRef(SvgTableSortDesc18);
+var ForwardRef$x = /*#__PURE__*/forwardRef(SvgTableSortDesc18);
 
-var _path$s;
-function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
+var _path$v;
+function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
 var SvgContentFiltration18 = function SvgContentFiltration18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$t({
+  return /*#__PURE__*/React.createElement("svg", _extends$w({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "m8 14 2 2v-5H8v3zM2 3v2h14V3H2zm6 8h2l6-6H2l6 6z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$t = /*#__PURE__*/forwardRef(SvgContentFiltration18);
+var ForwardRef$w = /*#__PURE__*/forwardRef(SvgContentFiltration18);
 
-var _path$r;
-function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
+var _path$u;
+function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
 var SvgNavigationChevronDown18 = function SvgNavigationChevronDown18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$s({
+  return /*#__PURE__*/React.createElement("svg", _extends$v({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M12.443 6.442 9 9.877 5.558 6.442 4.5 7.5 9 12l4.5-4.5-1.057-1.058z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$s = /*#__PURE__*/forwardRef(SvgNavigationChevronDown18);
+var ForwardRef$v = /*#__PURE__*/forwardRef(SvgNavigationChevronDown18);
 
-var _path$q;
-function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
+var _path$t;
+function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
 var SvgNavigationChevronUp18 = function SvgNavigationChevronUp18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$r({
+  return /*#__PURE__*/React.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$q || (_path$q = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "m9 6-4.5 4.5 1.058 1.057L9 8.123l3.443 3.434L13.5 10.5 9 6z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$r = /*#__PURE__*/forwardRef(SvgNavigationChevronUp18);
+var ForwardRef$u = /*#__PURE__*/forwardRef(SvgNavigationChevronUp18);
 
 class DataTableHeaderCell extends React.Component {
     constructor() {
@@ -1997,29 +2203,29 @@ class DataTableHeaderCell extends React.Component {
         };
         this.getTextStyle = () => {
             if (this.props.textCase === 'upper')
-                return css$y.upperCase;
-            return css$y['font-size-14'];
+                return css$E.upperCase;
+            return css$E['font-size-14'];
         };
-        this.getTooltipContent = () => (React.createElement("div", { className: css$y.cellTooltipWrapper },
-            React.createElement(Text, { fontSize: "14", color: "contrast", font: "semibold", cx: css$y.cellTooltipText }, this.props.column.caption),
-            this.props.column.info && React.createElement(Text, { fontSize: "12", color: "contrast", cx: css$y.cellTooltipText }, this.props.column.info)));
+        this.getTooltipContent = () => (React.createElement("div", { className: css$E.cellTooltipWrapper },
+            React.createElement(Text, { fontSize: "14", color: "contrast", font: "semibold", cx: css$E.cellTooltipText }, this.props.column.caption),
+            this.props.column.info && React.createElement(Text, { fontSize: "12", color: "contrast", cx: css$E.cellTooltipText }, this.props.column.info)));
         this.getColumnCaption = () => {
-            return (React.createElement("div", { className: css$y.tooltipWrapper },
-                React.createElement("div", { className: cx$1(css$y.iconCell, css$y['align-' + this.props.column.textAlign], uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
-                    React.createElement(Tooltip, { placement: "top", color: "contrast", renderContent: this.getTooltipContent, cx: css$y.cellTooltip, openDelay: 600 },
-                        React.createElement(Text, { key: "text", lineHeight: "30", fontSize: "14", size: "30", cx: cx$1(css$y.caption, this.getTextStyle(), uuiDataTableHeaderCell.uuiTableHeaderCaption) }, this.props.column.caption)),
-                    this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React.createElement(IconButton, { key: "sort", cx: cx$1(css$y.icon, css$y.sortIcon, this.props.sortDirection && css$y.sortIconActive, uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: this.props.sortDirection ? 'default' : 'secondary', icon: this.props.sortDirection === 'desc' ? ForwardRef$u : this.props.sortDirection === 'asc' ? ForwardRef$v : ForwardRef$w })),
-                    this.props.isFilterActive && (React.createElement(IconButton, { key: "filter", cx: cx$1(css$y.icon, !this.props.sortDirection && css$y.filterIcon, uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "default", icon: ForwardRef$t })),
-                    this.props.column.renderFilter && (React.createElement(IconButton, { key: "dropdown", cx: cx$1(css$y.icon, css$y.dropdownIcon, uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), color: "secondary", icon: this.state.isDropdownOpen ? ForwardRef$r : ForwardRef$s })))));
+            return (React.createElement("div", { className: css$E.tooltipWrapper },
+                React.createElement("div", { className: cx$1(css$E.iconCell, css$E['align-' + this.props.column.textAlign], uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
+                    React.createElement(Tooltip, { placement: "top", color: "contrast", renderContent: this.getTooltipContent, cx: css$E.cellTooltip, openDelay: 600 },
+                        React.createElement(Text, { key: "text", lineHeight: "30", fontSize: "14", size: "30", cx: cx$1(css$E.caption, this.getTextStyle(), uuiDataTableHeaderCell.uuiTableHeaderCaption) }, this.props.column.caption)),
+                    this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React.createElement(IconButton, { key: "sort", cx: cx$1(css$E.icon, css$E.sortIcon, this.props.sortDirection && css$E.sortIconActive, uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: this.props.sortDirection ? 'default' : 'secondary', icon: this.props.sortDirection === 'desc' ? ForwardRef$x : this.props.sortDirection === 'asc' ? ForwardRef$y : ForwardRef$z })),
+                    this.props.isFilterActive && (React.createElement(IconButton, { key: "filter", cx: cx$1(css$E.icon, !this.props.sortDirection && css$E.filterIcon, uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "default", icon: ForwardRef$w })),
+                    this.props.column.renderFilter && (React.createElement(IconButton, { key: "dropdown", cx: cx$1(css$E.icon, css$E.dropdownIcon, uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), color: "secondary", icon: this.state.isDropdownOpen ? ForwardRef$u : ForwardRef$v })))));
         };
         this.renderHeaderCheckbox = () => this.props.selectAll
-            && this.props.isFirstColumn && (React.createElement(Checkbox, Object.assign({ size: +this.props.size < 36 ? '12' : '18' }, this.props.selectAll, { cx: cx$1(css$y.checkbox, uuiDataTableHeaderCell.uuiTableHeaderCheckbox) })));
-        this.renderResizeMark = (props) => React.createElement("div", { onMouseDown: props.onResizeStart, className: cx$1(css$y.resizeMark, uuiMarkers.draggable) });
+            && this.props.isFirstColumn && (React.createElement(Checkbox, Object.assign({ size: +this.props.size < 36 ? '12' : '18' }, this.props.selectAll, { cx: cx$1(css$E.checkbox, uuiDataTableHeaderCell.uuiTableHeaderCheckbox) })));
+        this.renderResizeMark = (props) => React.createElement("div", { onMouseDown: props.onResizeStart, className: cx$1(css$E.resizeMark, uuiMarkers.draggable) });
         this.renderCellContent = (props, dropdownProps) => (React.createElement(FlexCell, Object.assign({}, this.props.column, { minWidth: this.props.column.width, ref: (ref) => {
                 var _a;
                 props.ref(ref);
                 (_a = dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.ref) === null || _a === void 0 ? void 0 : _a.call(dropdownProps, ref);
-            }, cx: cx$1(uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiMarkers.clickable, css$y.cell, css$y['size-' + (this.props.size || '36')], this.props.isFirstColumn && css$y['padding-left-24'], this.props.isLastColumn && css$y['padding-right-24'], this.props.column.cx, this.props.allowColumnsResizing && css$y.resizable, props.isDraggable && css$y.draggable, props.isDragGhost && css$y.ghost, props.isDraggedOut && css$y.isDraggedOut, props.isDndInProgress && css$y['dnd-marker-' + props.position]), onClick: !this.props.column.renderFilter ? props.toggleSort : dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.onClick, rawProps: Object.assign({ role: 'columnheader', 'aria-sort': this.props.sortDirection === 'asc' ? 'ascending' : this.props.sortDirection ? 'descending' : 'none' }, props.eventHandlers) }),
+            }, cx: cx$1(uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiMarkers.clickable, css$E.cell, css$E['size-' + (this.props.size || '36')], this.props.isFirstColumn && css$E['padding-left-24'], this.props.isLastColumn && css$E['padding-right-24'], this.props.column.cx, this.props.allowColumnsResizing && css$E.resizable, props.isDraggable && css$E.draggable, props.isDragGhost && css$E.ghost, props.isDraggedOut && css$E.isDraggedOut, props.isDndInProgress && css$E['dnd-marker-' + props.position]), onClick: !this.props.column.renderFilter ? props.toggleSort : dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.onClick, rawProps: Object.assign({ role: 'columnheader', 'aria-sort': this.props.sortDirection === 'asc' ? 'ascending' : this.props.sortDirection ? 'descending' : 'none' }, props.eventHandlers) }),
             this.renderHeaderCheckbox(),
             this.getColumnCaption(),
             this.props.allowColumnsResizing && this.renderResizeMark(props)));
@@ -2056,10 +2262,10 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var _path$p, _path2$1, _path3, _path4, _path5, _path6, _g$1, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14, _path15, _path16, _path17, _path18, _path19, _path20, _path21, _path22, _path23, _path24, _defs;
-function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
+var _path$s, _path2$1, _path3, _path4, _path5, _path6, _g$1, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14, _path15, _path16, _path17, _path18, _path19, _path20, _path21, _path22, _path23, _path24, _defs;
+function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
 var SvgEmptyTable = function SvgEmptyTable(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$q({
+  return /*#__PURE__*/React.createElement("svg", _extends$t({
     width: 232,
     height: 180,
     viewBox: "0 0 232 180",
@@ -2068,7 +2274,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     ref: ref
   }, props), /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#a)"
-  }, _path$p || (_path$p = /*#__PURE__*/React.createElement("path", {
+  }, _path$s || (_path$s = /*#__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$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
@@ -2194,9 +2400,9 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M0 0h230.897v180H0z"
   })))));
 };
-var ForwardRef$q = /*#__PURE__*/forwardRef(SvgEmptyTable);
+var ForwardRef$t = /*#__PURE__*/forwardRef(SvgEmptyTable);
 
-var css$x = {"sticky-header":"SfowPg","listContainer":"pV82s6","table":"RRaqCW","no-results":"_8g-jNr","no-results-icon":"NLktk6","no-results-title":"JcfJwP","stickyHeader":"SfowPg","noResults":"_8g-jNr","noResultsIcon":"NLktk6","noResultsTitle":"JcfJwP"};
+var css$D = {"sticky-header":"vFzD-l","listContainer":"nZrRM-","table":"kADCE-","no-results":"KCdr2X","no-results-icon":"eMnr02","no-results-title":"_0cZiHG","stickyHeader":"vFzD-l","noResults":"KCdr2X","noResultsIcon":"eMnr02","noResultsTitle":"_0cZiHG"};
 
 function DataTable(props) {
     var _a;
@@ -2210,9 +2416,9 @@ function DataTable(props) {
     const renderedRows = rows.map((row) => (props.renderRow || renderRow)(Object.assign(Object.assign({}, row), { columns })));
     const renderNoResultsBlock = React.useCallback(() => {
         var _a;
-        return (React.createElement("div", { className: css$x.noResults }, props.renderNoResultsBlock ? ((_a = props.renderNoResultsBlock) === null || _a === void 0 ? void 0 : _a.call(props)) : (React.createElement(React.Fragment, null,
-            React.createElement(IconContainer, { cx: css$x.noResultsIcon, icon: ForwardRef$q }),
-            React.createElement(Text, { cx: css$x.noResultsTitle, fontSize: "24", lineHeight: "30", color: "primary", font: "semibold" }, i18n.tables.noResultsBlock.title),
+        return (React.createElement("div", { className: css$D.noResults }, props.renderNoResultsBlock ? ((_a = props.renderNoResultsBlock) === null || _a === void 0 ? void 0 : _a.call(props)) : (React.createElement(React.Fragment, null,
+            React.createElement(IconContainer, { cx: css$D.noResultsIcon, icon: ForwardRef$t }),
+            React.createElement(Text, { cx: css$D.noResultsTitle, fontSize: "24", lineHeight: "30", color: "primary", font: "semibold" }, i18n.tables.noResultsBlock.title),
             React.createElement(Text, { fontSize: "16", lineHeight: "24", font: "regular", color: "primary" }, i18n.tables.noResultsBlock.message)))));
     }, [props.renderNoResultsBlock]);
     const onConfigurationButtonClick = React.useCallback(() => {
@@ -2229,107 +2435,107 @@ 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$x.stickyHeader },
+        React.createElement("div", { className: css$D.stickyHeader },
             React.createElement(DataTableHeaderRow, { columns: columns, onConfigButtonClick: props.showColumnsConfig && onConfigurationButtonClick, selectAll: props.selectAll, size: props.size, textCase: props.headerTextCase, allowColumnsReordering: props.allowColumnsReordering, allowColumnsResizing: props.allowColumnsResizing, value: props.value, onValueChange: props.onValueChange }),
             React.createElement("div", { className: cx$1(uuiScrollShadows.top, {
                     [uuiScrollShadows.topVisible]: scrollShadows.verticalTop,
                 }) })),
-        props.exactRowsCount !== 0 ? (React.createElement("div", { className: css$x.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+        props.exactRowsCount !== 0 ? (React.createElement("div", { className: css$D.listContainer, style: { minHeight: `${estimatedHeight}px` } },
             React.createElement("div", { ref: listContainerRef, role: "rowgroup", style: { marginTop: offsetY }, children: renderedRows }))) : (renderNoResultsBlock === null || renderNoResultsBlock === void 0 ? void 0 : renderNoResultsBlock()))), [
         props, columns, rows, renderNoResultsBlock, onConfigurationButtonClick,
     ]);
     return (React.createElement(DataTableSelectionProvider, { onCopy: props.onCopy, rows: rows, columns: columns },
-        React.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rows: renderedRows, rowsCount: props.rowsCount, renderRows: renderRowsContainer, cx: cx$1(css$x.table), rawProps: {
+        React.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rows: renderedRows, rowsCount: props.rowsCount, renderRows: renderRowsContainer, cx: cx$1(css$D.table), rawProps: {
                 role: 'table',
                 'aria-colcount': columns.length,
                 'aria-rowcount': props.rowsCount,
             } })));
 }
 
-var styles$1 = {"main-panel":"eWnYjN","group-title":"aHgXng","group-title-text":"QeY1fs","group-title-badge":"IGW7hZ","group-items":"_1cIeIe","no-data":"GfP7QX","h-divider":"Kfk6Sg","search-area":"_8EBvHT","mainPanel":"eWnYjN","groupTitle":"aHgXng","groupTitleText":"QeY1fs","groupTitleBadge":"IGW7hZ","groupItems":"_1cIeIe","noData":"GfP7QX","hDivider":"Kfk6Sg","searchArea":"_8EBvHT"};
+var styles$1 = {"main-panel":"F3PNdW","group-title":"ih8r1t","group-title-text":"_4KbiKh","group-title-badge":"l3tzL8","group-items":"K5pUMA","no-data":"PYJ-FM","h-divider":"UGBbqc","search-area":"XMkpLh","mainPanel":"F3PNdW","groupTitle":"ih8r1t","groupTitleText":"_4KbiKh","groupTitleBadge":"l3tzL8","groupItems":"K5pUMA","noData":"PYJ-FM","hDivider":"UGBbqc","searchArea":"XMkpLh"};
 
-var _path$o;
-function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
+var _path$r;
+function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
 var SvgNavigationMoreVert18 = function SvgNavigationMoreVert18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$p({
+  return /*#__PURE__*/React.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$o || (_path$o = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M9 6c.825 0 1.5-.675 1.5-1.5S9.825 3 9 3s-1.5.675-1.5 1.5S8.175 6 9 6zm0 1.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5S9.825 7.5 9 7.5zM9 12c-.825 0-1.5.675-1.5 1.5S8.175 15 9 15s1.5-.675 1.5-1.5S9.825 12 9 12z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$p = /*#__PURE__*/forwardRef(SvgNavigationMoreVert18);
+var ForwardRef$s = /*#__PURE__*/forwardRef(SvgNavigationMoreVert18);
 
-var _path$n;
-function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
+var _path$q;
+function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
 var SvgActionUpdate18 = function SvgActionUpdate18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$o({
+  return /*#__PURE__*/React.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M8.007 2A7.004 7.004 0 0 0 1 9a7.004 7.004 0 0 0 11.732 5.16l-1.497-1.347A4.999 4.999 0 0 1 3 9c0-2.763 2.237-5 5-5 2.762 0 5 2.237 5 5h2c0-3.864-3.129-7-6.993-7zM11 9l3 3 3-3h-6z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$o = /*#__PURE__*/forwardRef(SvgActionUpdate18);
+var ForwardRef$r = /*#__PURE__*/forwardRef(SvgActionUpdate18);
 
-var _path$m;
-function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
+var _path$p;
+function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
 var SvgActionLockFill18 = function SvgActionLockFill18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$n({
+  return /*#__PURE__*/React.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$m || (_path$m = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$p || (_path$p = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M5 7V5a4 4 0 1 1 8 0v2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2zm2 0h4V5a2 2 0 1 0-4 0v2zm2 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$n = /*#__PURE__*/forwardRef(SvgActionLockFill18);
+var ForwardRef$q = /*#__PURE__*/forwardRef(SvgActionLockFill18);
 
-var _path$l;
-function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
+var _path$o;
+function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
 var SvgActionPinOn18 = function SvgActionPinOn18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$m({
+  return /*#__PURE__*/React.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$o || (_path$o = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M12 9V3h1V2H5v1h1v6l-2 1v1h4v5h2v-5h4v-1l-2-1z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$m = /*#__PURE__*/forwardRef(SvgActionPinOn18);
+var ForwardRef$p = /*#__PURE__*/forwardRef(SvgActionPinOn18);
 
-var _path$k;
-function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
+var _path$n;
+function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
 var SvgActionPinOff18 = function SvgActionPinOff18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$l({
+  return /*#__PURE__*/React.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$k || (_path$k = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
     d: "M6 4.586 12.414 11H14v-1l-2-1V3h1V2H5v1h1v1.586zM10 16v-4.586l3.743 3.743.707-.707L3.136 3.136l-.707.707L6 7.414V9l-2 1v1h4v5h2z"
   })));
 };
-var ForwardRef$l = /*#__PURE__*/forwardRef(SvgActionPinOff18);
+var ForwardRef$o = /*#__PURE__*/forwardRef(SvgActionPinOff18);
 
 const i18nLocal = i18n.tables.columnsConfigurationModal;
 function PinIconButton(props) {
@@ -2344,12 +2550,12 @@ function PinIconButton(props) {
     }, [isPinned, isPinnedAlways]);
     const pinIcon = useMemo(() => {
         if (isPinnedAlways) {
-            return ForwardRef$n;
+            return ForwardRef$q;
         }
         if (isPinned) {
-            return isHovered ? ForwardRef$l : ForwardRef$m;
+            return isHovered ? ForwardRef$o : ForwardRef$p;
         }
-        return ForwardRef$m;
+        return ForwardRef$p;
     }, [
         isPinnedAlways, isHovered, isPinned,
     ]);
@@ -2359,7 +2565,7 @@ function PinIconButton(props) {
             React.createElement(IconButton, { icon: pinIcon, onClick: pinClickHandler, isDisabled: isPinnedAlways, color: isPinned ? 'info' : undefined }))));
 }
 
-var styles = {"row-wrapper":"DnKOH2","not-pinned":"W4fKas","pin-icon-button":"_9ZZSqT","drag-handle":"ISEnyP","dnd-disabled":"X8lBii","rowWrapper":"DnKOH2","notPinned":"W4fKas","pinIconButton":"_9ZZSqT","dragHandle":"ISEnyP","dndDisabled":"X8lBii"};
+var styles = {"row-wrapper":"_65bIkl","not-pinned":"JGNbxn","pin-icon-button":"nEzEDM","drag-handle":"hNKRL6","dnd-disabled":"LdmK4o","rowWrapper":"_65bIkl","notPinned":"JGNbxn","pinIconButton":"nEzEDM","dragHandle":"hNKRL6","dndDisabled":"LdmK4o"};
 
 const ColumnRow = React.memo(function ColumnRow(props) {
     const { column } = props;
@@ -2430,7 +2636,7 @@ function ColumnsConfigurationModal(props) {
                 React.createElement(SearchInput, { size: "30", value: searchValue, onValueChange: setSearchValue, placeholder: i18n$1.searchPlaceholder }),
                 React.createElement(Dropdown, { closeOnTargetClick: true, renderBody: () => (React.createElement(Panel, { shadow: true },
                         React.createElement(DropdownMenuButton, { caption: i18n$1.clearAllButton, onClick: uncheckAll }),
-                        React.createElement(DropdownMenuButton, { caption: i18n$1.selectAllButton, onClick: checkAll }))), renderTarget: (props) => React.createElement(Button, Object.assign({}, props, { mode: "none", icon: ForwardRef$p, size: "30", color: "secondary", isDropdown: false })) })),
+                        React.createElement(DropdownMenuButton, { caption: i18n$1.selectAllButton, onClick: checkAll }))), renderTarget: (props) => React.createElement(Button, Object.assign({}, props, { mode: "none", icon: ForwardRef$s, size: "30", color: "secondary", isDropdown: false })) })),
             React.createElement(Panel, { cx: styles$1.mainPanel },
                 React.createElement(ScrollBars, null,
                     renderVisible(),
@@ -2439,22 +2645,22 @@ function ColumnsConfigurationModal(props) {
                         React.createElement(Text, { fontSize: "24", lineHeight: "30", color: "primary", font: "semibold" }, i18n$1.noResultsFound.text),
                         React.createElement(Text, { fontSize: "16", lineHeight: "24", font: "regular", color: "primary" }, i18n$1.noResultsFound.subText))))),
             React.createElement(ModalFooter, { borderTop: true },
-                React.createElement(LinkButton, { icon: ForwardRef$o, caption: i18n$1.resetToDefaultButton, onClick: reset }),
+                React.createElement(LinkButton, { icon: ForwardRef$r, caption: i18n$1.resetToDefaultButton, onClick: reset }),
                 React.createElement(FlexSpacer, null),
                 React.createElement(Button, { mode: "none", color: "secondary", caption: i18n$1.cancelButton, onClick: close }),
                 noVisibleColumns ? (React.createElement(Tooltip, { content: i18n$1.enableAtLeastOneColumnMessage, placement: "top-end", color: "critical" }, applyButton)) : (applyButton)))));
 }
 
-var css$w = {"panel":"E0IYu9"};
+var css$C = {"panel":"gUwBYI"};
 
-var css$v = {"sorting-panel-container":"WeS65g","sort-active":"DwaTcF","sortingPanelContainer":"WeS65g","sortActive":"DwaTcF"};
+var css$B = {"sorting-panel-container":"UFNhPW","sort-active":"nA1ZnC","sortingPanelContainer":"UFNhPW","sortActive":"nA1ZnC"};
 
 const SortingPanelImpl = ({ sortDirection, onSort }) => {
     const sortAsc = useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
     const sortDesc = useCallback(() => onSort(sortDirection === 'desc' ? undefined : 'desc'), [onSort]);
-    return (React__default.createElement(FlexCell, { cx: css$v.sortingPanelContainer },
-        React__default.createElement(DropdownMenuButton, { isActive: sortDirection === 'asc', caption: i18n.pickerFilterHeader.sortAscending, icon: ForwardRef$v, onClick: sortAsc }),
-        React__default.createElement(DropdownMenuButton, { isActive: sortDirection === 'desc', caption: i18n.pickerFilterHeader.sortDescending, icon: ForwardRef$u, onClick: sortDesc })));
+    return (React__default.createElement(FlexCell, { cx: css$B.sortingPanelContainer },
+        React__default.createElement(DropdownMenuButton, { isActive: sortDirection === 'asc', caption: i18n.pickerFilterHeader.sortAscending, icon: ForwardRef$y, onClick: sortAsc }),
+        React__default.createElement(DropdownMenuButton, { isActive: sortDirection === 'desc', caption: i18n.pickerFilterHeader.sortDescending, icon: ForwardRef$x, onClick: sortDesc })));
 };
 const SortingPanel = React__default.memo(SortingPanelImpl);
 
@@ -2469,63 +2675,63 @@ const ColumnHeaderDropdownImpl = (props) => {
         width: isMobile() ? document.documentElement.clientWidth : undefined,
     }), []);
     const closeDropdown = useCallback(() => props.onOpenChange(false), [props.onOpenChange]);
-    return (React__default.createElement(Dropdown$1, { renderTarget: props.renderTarget, renderBody: (dropdownProps) => (React__default.createElement(Panel, { style: style, shadow: true, cx: css$w.panel },
+    return (React__default.createElement(Dropdown$1, { renderTarget: props.renderTarget, renderBody: (dropdownProps) => (React__default.createElement(Panel, { style: style, shadow: true, cx: css$C.panel },
             React__default.createElement(MobileDropdownWrapper, { title: props.title, close: closeDropdown },
                 props.isSortable && React__default.createElement(SortingPanel, { sortDirection: props.sortDirection, onSort: props.onSort }),
                 props.renderFilter(dropdownProps)))), modifiers: popperModifiers, value: props.isOpen, onValueChange: props.onOpenChange }));
 };
 const ColumnHeaderDropdown = React__default.memo(ColumnHeaderDropdownImpl);
 
-var _path$j;
-function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+var _path$m;
+function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
 var SvgNotificationDone24 = function SvgNotificationDone24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$k({
+  return /*#__PURE__*/React.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$m || (_path$m = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "m9.727 16.075-4.295-4.388L4 13.149 9.727 19 22 6.463 20.568 5 9.728 16.075z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$k = /*#__PURE__*/forwardRef(SvgNotificationDone24);
+var ForwardRef$n = /*#__PURE__*/forwardRef(SvgNotificationDone24);
 
-var _path$i;
-function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
+var _path$l;
+function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
 var SvgNotificationDone18 = function SvgNotificationDone18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$j({
+  return /*#__PURE__*/React.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M7.136 11.91 4.034 8.776 3 9.821 7.136 14 16 5.045 14.966 4l-7.83 7.91z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$j = /*#__PURE__*/forwardRef(SvgNotificationDone18);
+var ForwardRef$m = /*#__PURE__*/forwardRef(SvgNotificationDone18);
 
-var _path$h;
-function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
+var _path$k;
+function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
 var SvgNotificationDone12 = function SvgNotificationDone12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$i({
+  return /*#__PURE__*/React.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__PURE__*/React.createElement("path", {
     d: "M11 3.6 9.462 2 4.846 6.8 2.538 4.4 1 6l3.846 4L11 3.6z"
   })));
 };
-var ForwardRef$i = /*#__PURE__*/forwardRef(SvgNotificationDone12);
+var ForwardRef$l = /*#__PURE__*/forwardRef(SvgNotificationDone12);
 
-var css$u = {"render-item":"W0hH7J","icon-wrapper":"X0WXAb","picker-row":"RIFFkg","icon-default":"wJMIKA","icon-primary":"nmVr5l","renderItem":"W0hH7J","iconWrapper":"X0WXAb","pickerRow":"RIFFkg","iconDefault":"wJMIKA","iconPrimary":"nmVr5l"};
+var css$A = {"render-item":"_56ou4X","icon-wrapper":"Re5fdX","picker-row":"MhcFu0","icon-default":"MnTBQq","icon-primary":"F6B77G","renderItem":"_56ou4X","iconWrapper":"Re5fdX","pickerRow":"MhcFu0","iconDefault":"MnTBQq","iconPrimary":"F6B77G"};
 
 class DataPickerRow extends React.Component {
     constructor() {
@@ -2533,37 +2739,37 @@ class DataPickerRow extends React.Component {
         this.getIcon = (size) => {
             switch (size) {
                 case '24':
-                    return ForwardRef$i;
+                    return ForwardRef$l;
                 case '30':
-                    return ForwardRef$j;
+                    return ForwardRef$m;
                 case '36':
-                    return ForwardRef$j;
+                    return ForwardRef$m;
                 case '42':
-                    return ForwardRef$k;
+                    return ForwardRef$n;
                 default:
-                    return ForwardRef$j;
+                    return ForwardRef$m;
             }
         };
         this.column = {
             key: 'name',
             grow: 1,
             width: 0,
-            render: (item, rowProps) => (React.createElement("div", { key: rowProps.id, className: css$u.renderItem },
+            render: (item, rowProps) => (React.createElement("div", { key: rowProps.id, className: css$A.renderItem },
                 this.props.renderItem(item, rowProps),
                 React.createElement(FlexSpacer, null),
-                (rowProps.isChildrenSelected || rowProps.isSelected) && (React.createElement("div", { className: css$u.iconWrapper },
-                    React.createElement(IconContainer, { icon: this.getIcon(this.props.size), cx: rowProps.isChildrenSelected ? css$u.iconDefault : css$u.iconPrimary }))))),
+                (rowProps.isChildrenSelected || rowProps.isSelected) && (React.createElement("div", { className: css$A.iconWrapper },
+                    React.createElement(IconContainer, { icon: this.getIcon(this.props.size), cx: rowProps.isChildrenSelected ? css$A.iconDefault : css$A.iconPrimary }))))),
         };
         this.renderContent = () => {
             return (React.createElement(DataTableCell, { key: "name", size: this.props.size || '36', padding: this.props.padding || '24', isFirstColumn: true, isLastColumn: false, tabIndex: -1, column: this.column, rowProps: this.props, alignActions: this.props.alignActions || 'top' }));
         };
     }
     render() {
-        return React.createElement(DataPickerRow$1, Object.assign({}, this.props, { cx: [css$u.pickerRow, this.props.cx], renderContent: this.renderContent }));
+        return React.createElement(DataPickerRow$1, Object.assign({}, this.props, { cx: [css$A.pickerRow, this.props.cx], renderContent: this.renderContent }));
     }
 }
 
-var css$t = {"done":"qrDRvV"};
+var css$z = {"done":"EHimj8"};
 
 const MobileDropdownWrapper = (props) => {
     const isVisible = isMobile();
@@ -2571,22 +2777,22 @@ const MobileDropdownWrapper = (props) => {
     return (React__default.createElement(React__default.Fragment, null,
         isVisible && React__default.createElement(DataPickerHeader, { title: props.title, close: props.close }),
         props.children,
-        isVisible && React__default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$t.done, size: "48" })));
+        isVisible && React__default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$z.done, size: "48" })));
 };
 
-var css$s = {"sub-header-wrapper":"WSzC03","switch":"hV5Nfj","no-found-modal-container":"YElJZE","no-found-modal-container-icon":"lQ7S2x","no-found-modal-container-text":"_60wOtJ","subHeaderWrapper":"WSzC03","$switch$":"hV5Nfj","noFoundModalContainer":"YElJZE","noFoundModalContainerIcon":"lQ7S2x","noFoundModalContainerText":"_60wOtJ"};
+var css$y = {"sub-header-wrapper":"JMiMXn","switch":"RPpi5V","no-found-modal-container":"K5hYpI","no-found-modal-container-icon":"DU1y-5","no-found-modal-container-text":"RmyHHB","subHeaderWrapper":"JMiMXn","$switch$":"RPpi5V","noFoundModalContainer":"K5hYpI","noFoundModalContainerIcon":"DU1y-5","noFoundModalContainerText":"RmyHHB"};
 
-var _path$g, _path2;
-function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
+var _path$j, _path2;
+function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
 var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$h({
+  return /*#__PURE__*/React.createElement("svg", _extends$k({
     width: 66,
     height: 67,
     viewBox: "0 0 66 67",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__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", {
@@ -2596,16 +2802,16 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
     fill: "#6C6F80"
   })));
 };
-var ForwardRef$h = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
+var ForwardRef$k = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
 
 class PickerModalImpl extends PickerModalBase {
     constructor() {
         super(...arguments);
         this.renderNotFound = () => {
-            return this.props.renderNotFound ? (this.props.renderNotFound({ search: this.state.dataSourceState.search, onClose: () => this.props.success(null) })) : (React.createElement("div", { className: css$s.noFoundModalContainer },
-                React.createElement(IconContainer, { cx: css$s.noFoundModalContainerIcon, icon: ForwardRef$h }),
-                React.createElement(Text, { cx: css$s.noFoundModalContainerText, font: "semibold", fontSize: "16", lineHeight: "24", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsMessage),
-                React.createElement(Text, { cx: css$s.noFoundModalContainerText, fontSize: "12", lineHeight: "18", font: "regular", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsSubTitle)));
+            return this.props.renderNotFound ? (this.props.renderNotFound({ search: this.state.dataSourceState.search, onClose: () => this.props.success(null) })) : (React.createElement("div", { className: css$y.noFoundModalContainer },
+                React.createElement(IconContainer, { cx: css$y.noFoundModalContainerIcon, icon: ForwardRef$k }),
+                React.createElement(Text, { cx: css$y.noFoundModalContainerText, font: "semibold", fontSize: "16", lineHeight: "24", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsMessage),
+                React.createElement(Text, { cx: css$y.noFoundModalContainerText, fontSize: "12", lineHeight: "18", font: "regular", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsSubTitle)));
         };
     }
     renderRow(rowProps) {
@@ -2627,7 +2833,7 @@ class PickerModalImpl extends PickerModalBase {
         return (React.createElement(ModalBlocker, Object.assign({}, this.props),
             React.createElement(ModalWindow, { width: 600, height: 700 },
                 React.createElement(ModalHeader, { title: this.props.caption || i18n.pickerModal.headerTitle, onClose: () => this.props.abort() }),
-                React.createElement(FlexCell, { cx: css$s.subHeaderWrapper },
+                React.createElement(FlexCell, { cx: css$y.subHeaderWrapper },
                     React.createElement(FlexRow, { vPadding: "24" },
                         React.createElement(SearchInput, Object.assign({}, this.lens.prop('dataSourceState').prop('search').toProps(), { onKeyDown: (e) => handleDataSourceKeyboard({
                                 value: this.getDataSourceState(),
@@ -2636,7 +2842,7 @@ class PickerModalImpl extends PickerModalBase {
                                 rows: dataRows,
                                 editMode: 'modal',
                             }, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder }))),
-                    !this.isSingleSelect() && (React.createElement(Switch, Object.assign({ cx: css$s.switch, size: "18" }, this.stateLens.prop('showSelected').toProps(), { isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" }))),
+                    !this.isSingleSelect() && (React.createElement(Switch, Object.assign({ cx: css$y.switch, size: "18" }, this.stateLens.prop('showSelected').toProps(), { isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" }))),
                     this.props.renderFilter && React.createElement(FlexCell, { grow: 2 }, this.props.renderFilter(this.lens.prop('dataSourceState').prop('filter').toProps()))),
                 React.createElement(DataPickerBody, Object.assign({}, this.getListProps(), { value: this.getDataSourceState(), onValueChange: this.handleDataSourceValueChange, search: this.lens.prop('dataSourceState').prop('search').toProps(), showSearch: false, rows: rows, renderNotFound: this.renderNotFound, editMode: "modal" })),
                 React.createElement(ModalFooter, { padding: "24", vPadding: "24" }, this.props.renderFooter ? this.props.renderFooter(this.getFooterProps()) : this.renderFooter()))));
@@ -2653,15 +2859,13 @@ class PickerModal extends React.Component {
     }
 }
 
-const Avatar = withMods(Avatar$1, () => []);
+var css$x = {"root":"z4Dbyq"};
 
-var css$r = {"root":"-oBec6"};
+const AvatarStack = withMods(AvatarStack$1, () => [css$x.root]);
 
-const AvatarStack = withMods(AvatarStack$1, () => [css$r.root]);
+var css$w = {"root":"_1FBEfc","size-18":"t-IUle","fill-transparent":"f36amx","size-24":"c9iy7G","size-30":"GbOmEC","size-36":"ZnULvM","size-42":"KMj-pL","size-48":"XjSM2L","fill-solid":"QI6Bun","fill-semitransparent":"EjXYjy","size18":"t-IUle","fillTransparent":"f36amx","size24":"c9iy7G","size30":"GbOmEC","size36":"ZnULvM","size42":"KMj-pL","size48":"XjSM2L","fillSolid":"QI6Bun","fillSemitransparent":"EjXYjy"};
 
-var css$q = {"root":"wKHFhx","size-18":"w7pXyW","fill-transparent":"fOo0lm","size-24":"CF-nIu","size-30":"_3oRQvj","size-36":"H-8uEN","size-42":"bBOuDW","size-48":"-Jy2kB","fill-solid":"Y-bw-4","fill-semitransparent":"peZYl3","size18":"w7pXyW","fillTransparent":"fOo0lm","size24":"CF-nIu","size30":"_3oRQvj","size36":"H-8uEN","size42":"bBOuDW","size48":"-Jy2kB","fillSolid":"Y-bw-4","fillSemitransparent":"peZYl3"};
-
-const defaultSize$4 = '36';
+const defaultSize$5 = '36';
 const mapSize$1 = {
     48: '48',
     42: '48',
@@ -2672,18 +2876,18 @@ const mapSize$1 = {
 };
 function applyBadgeMods(mods) {
     return [
-        css$q.root, buttonCss.root, css$q['size-' + (mods.size || defaultSize$4)], css$q['fill-' + (mods.fill || 'solid')], mods.color && `badge-${mods.color}`,
+        css$w.root, buttonCss.root, css$w['size-' + (mods.size || defaultSize$5)], css$w['fill-' + (mods.fill || 'solid')], mods.color && `badge-${mods.color}`,
     ];
 }
 const Badge = withMods(Button$1, applyBadgeMods, (props) => ({
-    dropdownIcon: systemIcons[(props.size && mapSize$1[props.size]) || defaultSize$4].foldingArrow,
-    clearIcon: systemIcons[(props.size && mapSize$1[props.size]) || defaultSize$4].clear,
+    dropdownIcon: systemIcons[(props.size && mapSize$1[props.size]) || defaultSize$5].foldingArrow,
+    clearIcon: systemIcons[(props.size && mapSize$1[props.size]) || defaultSize$5].clear,
     countPosition: 'left',
 }));
 
-var css$p = {"root":"_0eseTq","size-18":"Jea6b6","size-24":"pwZKr3","size-30":"_2xnIcj","size-36":"F7WEm0","size-42":"Y6mEiq","size-48":"KfgBys","size18":"Jea6b6","size24":"pwZKr3","size30":"_2xnIcj","size36":"F7WEm0","size42":"Y6mEiq","size48":"KfgBys"};
+var css$v = {"root":"_6HuxB7","size-18":"DS8ggE","size-24":"-Fnhxw","size-30":"yOOCMO","size-36":"icvkNq","size-42":"Zh6WvR","size-48":"zZ4jPz","size18":"DS8ggE","size24":"-Fnhxw","size30":"yOOCMO","size36":"icvkNq","size42":"Zh6WvR","size48":"zZ4jPz"};
 
-const defaultSize$3 = '36';
+const defaultSize$4 = '36';
 const mapSize = {
     48: '48',
     42: '48',
@@ -2693,80 +2897,107 @@ const mapSize = {
     18: '18',
 };
 function applyTagMods(mods) {
-    return [css$p['size-' + (mods.size || defaultSize$3)], css$p.root];
+    return [css$v['size-' + (mods.size || defaultSize$4)], css$v.root];
 }
 const Tag = withMods(Button$1, applyTagMods, (props) => ({
-    dropdownIcon: systemIcons[mapSize[props.size] || defaultSize$3].foldingArrow,
-    clearIcon: systemIcons[mapSize[props.size] || defaultSize$3].clear,
+    dropdownIcon: systemIcons[mapSize[props.size] || defaultSize$4].foldingArrow,
+    clearIcon: systemIcons[mapSize[props.size] || defaultSize$4].clear,
 }));
 
-var css$o = {"root":"AaOTyQ","spacer":"bpm7Wm","mode-ghost":"fWp85D","size-24":"HI-Bqs","size-30":"WLF8lF","navigation-size-24":"x82Xz-","navigation-size-30":"_0sElWb","modeGhost":"fWp85D","size24":"HI-Bqs","size30":"WLF8lF","navigationSize24":"x82Xz-","navigationSize30":"_0sElWb"};
+var css$u = {"root":"Mpnawn","spacer":"hojYcI","mode-ghost":"_5NHMxE","size-24":"HZvvRi","size-30":"o-ZWuo","navigation-size-24":"B4z-Of","navigation-size-30":"zgm7Cn","modeGhost":"_5NHMxE","size24":"HZvvRi","size30":"o-ZWuo","navigationSize24":"B4z-Of","navigationSize30":"zgm7Cn"};
 
-var _path$f;
-function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
+var _path$i;
+function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
 var SvgNavigationChevronLeft12 = function SvgNavigationChevronLeft12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$g({
+  return /*#__PURE__*/React.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M7.705 3.705 7 3 4 6l3 3 .705-.705L5.415 6l2.29-2.295z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$g = /*#__PURE__*/forwardRef(SvgNavigationChevronLeft12);
+var ForwardRef$j = /*#__PURE__*/forwardRef(SvgNavigationChevronLeft12);
 
-var _path$e;
-function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
+var _path$h;
+function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
 var SvgNavigationChevronRight12 = function SvgNavigationChevronRight12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$f({
+  return /*#__PURE__*/React.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "m5 3-.705.705L6.585 6l-2.29 2.295L5 9l3-3-3-3z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$f = /*#__PURE__*/forwardRef(SvgNavigationChevronRight12);
+var ForwardRef$i = /*#__PURE__*/forwardRef(SvgNavigationChevronRight12);
 
 function Paginator(props) {
     const renderPaginator = (params) => {
         var _a, _b;
-        return (React__default.createElement("nav", Object.assign({ role: "navigation", className: css$o.root }, params.rawProps),
-            React__default.createElement(Button, { cx: css$o[`navigation-size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$B : ForwardRef$g, onClick: params.goToPrev, isDisabled: params.isFirst, mode: "outline", color: "secondary" }),
+        return (React__default.createElement("nav", Object.assign({ role: "navigation", className: css$u.root }, params.rawProps),
+            React__default.createElement(Button, { cx: css$u[`navigation-size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$E : ForwardRef$j, onClick: params.goToPrev, isDisabled: params.isFirst, mode: "outline", color: "secondary" }),
             params.pages.map((page, index) => {
                 var _a, _b;
                 if (page.type === 'spacer') {
-                    return (React__default.createElement(Button, { cx: cx(css$o[`size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], css$o.spacer), size: params.size, key: `${index}_spacer`, caption: "...", mode: "ghost", color: "secondary", tabIndex: -1 }));
+                    return (React__default.createElement(Button, { cx: cx(css$u[`size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], css$u.spacer), size: params.size, key: `${index}_spacer`, caption: "...", mode: "ghost", color: "secondary", tabIndex: -1 }));
                 }
                 else {
-                    return (React__default.createElement(Button, { cx: cx(css$o[`size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], css$o[`mode-${!page.isActive && 'ghost'}`]), size: params.size, key: page.pageNumber, caption: page.pageNumber, onClick: () => { var _a; return (_a = page.onClick) === null || _a === void 0 ? void 0 : _a.call(page); }, rawProps: { 'aria-current': page.isActive }, mode: (page.isActive && 'outline') || 'ghost', color: "primary" }));
+                    return (React__default.createElement(Button, { cx: cx(css$u[`size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], css$u[`mode-${!page.isActive && 'ghost'}`]), size: params.size, key: page.pageNumber, caption: page.pageNumber, onClick: () => { var _a; return (_a = page.onClick) === null || _a === void 0 ? void 0 : _a.call(page); }, rawProps: { 'aria-current': page.isActive }, mode: (page.isActive && 'outline') || 'ghost', color: "primary" }));
                 }
             }),
-            React__default.createElement(Button, { cx: css$o[`navigation-size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$A : ForwardRef$f, onClick: params.goToNext, isDisabled: params.isLast, mode: "outline", color: "secondary" })));
+            React__default.createElement(Button, { cx: css$u[`navigation-size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$D : ForwardRef$i, onClick: params.goToNext, isDisabled: params.isLast, mode: "outline", color: "secondary" })));
     };
     return React__default.createElement(Paginator$1, Object.assign({}, props, { render: renderPaginator }));
 }
 
+var css$t = {"root":"t6WzSC","bar":"ulp-n5","progressBar-indeterminate":"MPKS7f","size-12":"_7D-K6l","size-18":"VWcgP3","size-24":"liF52i","progressBarIndeterminate":"MPKS7f","size12":"_7D-K6l","size18":"VWcgP3","size24":"liF52i"};
+
+const IndeterminateBar = React.forwardRef((props, ref) => {
+    return (React.createElement("div", { ref: ref, className: cx(props.cx, css$t.root, css$t[`size-${props.size || 12}`]) },
+        React.createElement("div", { className: cx(css$t.bar) })));
+});
+
+var css$s = {"root":"zUlI3h","striped":"h2rHhO","animate-stripes":"DzdN2w","size-12":"-sUknj","size-18":"_16Qq1-","size-24":"y16li0","animateStripes":"DzdN2w","size12":"-sUknj","size18":"_16Qq1-","size24":"y16li0"};
+
+const defaultSize$3 = '12';
+function applyProgressBarMods(mods) {
+    const size = mods.size || defaultSize$3;
+    return [
+        css$s.root, css$s[`size-${size}`], mods.striped && css$s.striped,
+    ];
+}
+const ProgressBar = withMods(ProgressBar$1, applyProgressBarMods, (props) => ({
+    hideLabel: props.hideLabel || props.striped,
+}));
+
+var css$r = {"root":"Vi6Ju1"};
+
+const IndicatorBar = React.forwardRef((props, ref) => {
+    const { progress } = props;
+    return progress || progress === 0 ? (React.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx(css$r.root, props.cx), hideLabel: true })) : (React.createElement(IndeterminateBar, { ref: ref, cx: cx(css$r.root, props.cx) }));
+});
+
 const MAX_ITEMS = 100;
 const getMaxItems = (maxItems) => maxItems || maxItems === 0 ? maxItems : MAX_ITEMS;
 
-var css$n = {"root":"zaJcLR","mode-form":"GLv2id","mode-cell":"UrsZiK","mode-inline":"_4jlNsY","size-24":"g10eQ4","size-30":"nIVbgv","size-36":"_2TAIms","size-42":"miafml","size-48":"gZvySS","modeForm":"GLv2id","modeCell":"UrsZiK","modeInline":"_4jlNsY","size24":"g10eQ4","size30":"nIVbgv","size36":"_2TAIms","size42":"miafml","size48":"gZvySS"};
+var css$q = {"root":"qQ7FKw","mode-form":"zr5wm3","mode-cell":"etnhg2","mode-inline":"TvzUCi","size-24":"affBl8","size-30":"MqRln3","size-36":"IM-Eoj","size-42":"zmeU03","size-48":"Hrsxyt","modeForm":"zr5wm3","modeCell":"etnhg2","modeInline":"TvzUCi","size24":"affBl8","size30":"MqRln3","size36":"IM-Eoj","size42":"zmeU03","size48":"Hrsxyt"};
 
 const defaultSize$2 = '36';
 const defaultMode = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
     return [
-        css$n.root,
-        css$n['size-' + (mods.size || defaultSize$2)],
-        css$n['mode-' + (mods.mode || defaultMode)],
+        css$q.root,
+        css$q['size-' + (mods.size || defaultSize$2)],
+        css$q['mode-' + (mods.mode || defaultMode)],
     ];
 }
 function PickerTogglerComponent(props, ref) {
@@ -2808,9 +3039,9 @@ function PickerTogglerComponent(props, ref) {
 }
 const PickerToggler = React.forwardRef(PickerTogglerComponent);
 
-var css$m = {"root":"_5a2qra","multiline-vertical-padding-24":"QXral7","multiline-vertical-padding-30":"p9YtXn","multiline-vertical-padding-36":"FzKiHJ","multiline-vertical-padding-42":"xO59zQ","multiline-vertical-padding-48":"e0XRIj","text":"_5Q1Rll","multilineVerticalPadding24":"QXral7","multilineVerticalPadding30":"p9YtXn","multilineVerticalPadding36":"FzKiHJ","multilineVerticalPadding42":"xO59zQ","multilineVerticalPadding48":"e0XRIj"};
+var css$p = {"root":"-zvg1U","multiline-vertical-padding-24":"Mrj-92","multiline-vertical-padding-30":"plUjft","multiline-vertical-padding-36":"Gl9iaP","multiline-vertical-padding-42":"Y7Xu7a","multiline-vertical-padding-48":"Wg99y2","text":"r2RRzX","multilineVerticalPadding24":"Mrj-92","multilineVerticalPadding30":"plUjft","multilineVerticalPadding36":"Gl9iaP","multilineVerticalPadding42":"Y7Xu7a","multilineVerticalPadding48":"Wg99y2"};
 
-var css$l = {"highlighted-text":"KiHlg-","highlightedText":"KiHlg-"};
+var css$o = {"highlighted-text":"HiwlPt","highlightedText":"HiwlPt"};
 
 const mergeHighlightRanges = (ranges) => {
     const mergedRanges = [];
@@ -2864,7 +3095,7 @@ const getHighlightRanges = (str, search) => {
 };
 const getDecoratedText = (str, ranges) => ranges.map((range, index) => {
     const rangeStr = str.substring(range.from, range.to);
-    return (React__default.createElement("span", Object.assign({ key: `${rangeStr}-${index}` }, (range.isHighlighted ? { className: css$l.highlightedText } : {})), rangeStr));
+    return (React__default.createElement("span", Object.assign({ key: `${rangeStr}-${index}` }, (range.isHighlighted ? { className: css$o.highlightedText } : {})), rangeStr));
 });
 const getHighlightedSearchMatches = (str, search) => {
     if (!search || !str) {
@@ -2893,32 +3124,32 @@ class PickerItem extends React.Component {
         const { search } = (_a = this.props.dataSourceState) !== null && _a !== void 0 ? _a : {};
         const title = highlightSearchMatches ? getHighlightedSearchMatches(this.props.title, search) : this.props.title;
         const subtitle = highlightSearchMatches ? getHighlightedSearchMatches(this.props.subtitle, search) : this.props.subtitle;
-        return (React.createElement(FlexCell, { width: "auto", cx: css$m.root },
-            React.createElement(FlexRow, { size: itemSize, cx: isMultiline && css$m[`multiline-vertical-padding-${itemSize}`], spacing: "12" },
+        return (React.createElement(FlexCell, { width: "auto", cx: css$p.root },
+            React.createElement(FlexRow, { size: itemSize, cx: isMultiline && css$p[`multiline-vertical-padding-${itemSize}`], spacing: "12" },
                 avatarUrl && React.createElement(Avatar, { isLoading: isLoading, img: avatarUrl, size: this.getAvatarSize(itemSize, isMultiline).toString() }),
                 icon && React.createElement(IconContainer, { icon: icon }),
                 React.createElement(FlexCell, { width: "auto" },
-                    title && (React.createElement(Text, { size: itemSize, cx: css$m.text, color: isDisabled ? 'disabled' : 'primary' }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : title)),
-                    subtitle && (React.createElement(Text, { size: itemSize, color: isDisabled ? 'disabled' : 'secondary', cx: css$m.text }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : subtitle))))));
+                    title && (React.createElement(Text, { size: itemSize, cx: css$p.text, color: isDisabled ? 'disabled' : 'primary' }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : title)),
+                    subtitle && (React.createElement(Text, { size: itemSize, color: isDisabled ? 'disabled' : 'secondary', cx: css$p.text }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : subtitle))))));
     }
 }
 PickerItem.defaultProps = {
     highlightSearchMatches: true,
 };
 
-var css$k = {"panel":"_76eV3F","footer-wrapper":"dLVX7n","footer-size-24":"ghdfL3","footer-size-30":"RkfP11","footer-size-36":"om-lU1","footer-size-42":"mDl19f","footer-size-48":"iM5hB5","footerWrapper":"dLVX7n","footerSize24":"ghdfL3","footerSize30":"RkfP11","footerSize36":"om-lU1","footerSize42":"mDl19f","footerSize48":"iM5hB5"};
+var css$n = {"panel":"FT2NtQ","footer-wrapper":"L4gtXD","footer-size-24":"x3AzbF","footer-size-30":"tACjUC","footer-size-36":"_0tMFf4","footer-size-42":"O2K2ZN","footer-size-48":"ClAiY1","footerWrapper":"L4gtXD","footerSize24":"x3AzbF","footerSize30":"tACjUC","footerSize36":"_0tMFf4","footerSize42":"O2K2ZN","footerSize48":"ClAiY1"};
 
 const pickerHeight$1 = 300;
 const pickerWidth$1 = 360;
 class PickerInput extends PickerInputBase {
     constructor() {
         super(...arguments);
-        this.renderItem = (item, rowProps) => {
+        this.renderItem = (item, rowProps, dataSourceState) => {
             var _a;
-            return (React__default.createElement(PickerItem, Object.assign({ title: this.getName(item), size: this.getRowSize(), dataSourceState: this.state.dataSourceState, highlightSearchMatches: (_a = this.props.highlightSearchMatches) !== null && _a !== void 0 ? _a : true }, rowProps)));
+            return (React__default.createElement(PickerItem, Object.assign({ title: this.getName(item), size: this.getRowSize(), dataSourceState: dataSourceState, highlightSearchMatches: (_a = this.props.highlightSearchMatches) !== null && _a !== void 0 ? _a : true }, rowProps)));
         };
-        this.renderRow = (rowProps) => {
-            return this.props.renderRow ? (this.props.renderRow(rowProps, this.state.dataSourceState)) : (React__default.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, borderBottom: "none", size: this.getRowSize(), padding: this.props.editMode === 'modal' ? '24' : '12', renderItem: this.renderItem })));
+        this.renderRow = (rowProps, dataSourceState) => {
+            return this.props.renderRow ? (this.props.renderRow(rowProps, dataSourceState)) : (React__default.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, borderBottom: "none", size: this.getRowSize(), padding: this.props.editMode === 'modal' ? '24' : '12', renderItem: (item, itemProps) => this.renderItem(item, itemProps, dataSourceState) })));
         };
     }
     toggleModalOpening() {
@@ -2954,11 +3185,11 @@ class PickerInput extends PickerInputBase {
         return (React__default.createElement(IEditableDebouncer, { value: targetProps.value, onValueChange: this.handleTogglerSearchChange, render: (editableProps) => renderTarget(Object.assign(Object.assign(Object.assign({}, this.getTogglerMods()), targetProps), editableProps)) }));
     }
     renderBody(props, rows) {
-        const renderedDataRows = rows.map((row) => this.renderRow(row));
+        const renderedDataRows = rows.map((row) => this.renderRow(row, this.state.dataSourceState));
         const maxHeight = isMobile() ? document.documentElement.clientHeight : this.props.dropdownHeight || pickerHeight$1;
         const minBodyWidth = isMobile() ? document.documentElement.clientWidth : this.props.minBodyWidth || pickerWidth$1;
         return (React__default.createElement(Panel, { style: { width: props.togglerWidth > minBodyWidth ? props.togglerWidth : minBodyWidth }, rawProps: { tabIndex: -1 }, cx: [
-                css$k.panel, uuiMarkers.lockFocus, this.props.bodyCx,
+                css$n.panel, uuiMarkers.lockFocus, this.props.bodyCx,
             ] },
             React__default.createElement(MobileDropdownWrapper, { title: this.props.entityName, close: () => {
                     this.returnFocusToInput();
@@ -2974,7 +3205,7 @@ class PickerInput extends PickerInputBase {
     }
 }
 
-var css$j = {"row":"X01tFd"};
+var css$m = {"row":"G7YTz-"};
 
 class PickerListItem extends React__default.Component {
     render() {
@@ -2992,7 +3223,7 @@ class PickerListItem extends React__default.Component {
         else {
             component = (React__default.createElement(RadioInput, { label: label, value: this.props.isSelected, isDisabled: this.props.isLoading || !this.props.isSelectable || this.props.isDisabled, onValueChange: () => this.props.onSelect(this.props) }));
         }
-        return React__default.createElement("div", { className: css$j.row }, component);
+        return React__default.createElement("div", { className: css$m.row }, component);
     }
 }
 
@@ -3035,7 +3266,7 @@ class PickerList extends PickerListBase {
 }
 PickerList.contextType = UuiContext;
 
-var css$i = {"root":"Jyw9gm","title-wrapper":"GtHTwK","title":"YFB6-x","text-wrapper":"LKBWJP","selection":"_9HMfaW","postfix":"RbBwvf","selected":"_1vAzM7","titleWrapper":"GtHTwK","textWrapper":"LKBWJP"};
+var css$l = {"root":"c2cy1v","title-wrapper":"kBoro-","title":"rfO--J","text-wrapper":"_85-yoK","selection":"tK92h7","postfix":"kVA3p9","selected":"bcbN0k","titleWrapper":"kBoro-","textWrapper":"_85-yoK"};
 
 const defaultSize = '36';
 const FilterPanelItemToggler = React.forwardRef((props, ref) => {
@@ -3047,18 +3278,18 @@ const FilterPanelItemToggler = React.forwardRef((props, ref) => {
         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
     };
     const getTitle = props.predicateName ? `${props.title} ${props.predicateName}` : `${props.title}${props.selection ? ':' : ''}`;
-    const getSelectionText = () => props.selection.map((i, index) => (React.createElement(React.Fragment, null,
-        React.createElement(Text, { key: index, color: "brand", size: props.size, cx: css$i.selection }, i),
+    const getSelectionText = () => props.selection.map((i, index) => (React.createElement(React.Fragment, { key: `${i}${index}` },
+        React.createElement(Text, { color: "brand", size: props.size, cx: css$l.selection }, i),
         (props.postfix || index !== props.selection.length - 1) && React.createElement("span", null, ",\u00A0"))));
     return (React.createElement(FlexRow$1, Object.assign({}, props, { rawProps: {
             style: { maxWidth: `${props.maxWidth ? props.maxWidth + 'px' : 'auto'}` },
             role: 'button',
-        }, cx: cx(css$i.root, uuiElement.inputBox, uuiMarkers.clickable, props.isOpen && uuiMod.opened, ['size-' + (props.size || defaultSize)], props.cx), onClick: togglerPickerOpened, ref: ref }),
-        React.createElement(FlexRow$1, { cx: css$i.titleWrapper },
-            React.createElement(Text, { size: props.size, cx: css$i.title }, getTitle),
-            props.selection && (React.createElement("div", { className: css$i.textWrapper },
+        }, cx: cx(css$l.root, uuiElement.inputBox, uuiMarkers.clickable, props.isOpen && uuiMod.opened, ['size-' + (props.size || defaultSize)], props.cx), onClick: togglerPickerOpened, ref: ref }),
+        React.createElement(FlexRow$1, { cx: css$l.titleWrapper },
+            React.createElement(Text, { size: props.size, cx: css$l.title }, getTitle),
+            props.selection && (React.createElement("div", { className: css$l.textWrapper },
                 getSelectionText(),
-                props.postfix && (React.createElement(Text, { color: "brand", size: props.size, cx: css$i.postfix }, props.postfix))))),
+                props.postfix && (React.createElement(Text, { color: "brand", size: props.size, cx: css$l.postfix }, props.postfix))))),
         !props.isDisabled && React.createElement(IconContainer, { icon: systemIcons[props.size || defaultSize].foldingArrow, flipY: props.isOpen, cx: "uui-icon-dropdown" })));
 });
 
@@ -3087,8 +3318,8 @@ class FilterPickerBody extends PickerInputBase {
     shouldShowBody() {
         return this.props.isOpen;
     }
-    toggleModalOpening(opened) { }
-    renderTarget(targetProps) {
+    toggleModalOpening() { }
+    renderTarget() {
         return React.createElement("div", null);
     }
     renderBody(props, rows) {
@@ -3138,7 +3369,7 @@ class FilterDatePickerBody extends BaseDatePicker {
     }
 }
 
-var css$h = {"date-input":"-ecBzI","size-24":"pwnnti","size-30":"q-fs4F","size-36":"ylkDl9","size-42":"_3sNjn6","size-48":"y9Ec40","date-input-group":"xgM-N-","separator":"G4xUC5","mode-form":"OcfLDo","mode-cell":"MEBVvi","dateInput":"-ecBzI","size24":"pwnnti","size30":"q-fs4F","size36":"ylkDl9","size42":"_3sNjn6","size48":"y9Ec40","dateInputGroup":"xgM-N-","modeForm":"OcfLDo","modeCell":"MEBVvi"};
+var css$k = {"date-input":"lNWbGU","size-24":"VjyrWh","size-30":"Z4-Jjm","size-36":"Qaim8R","size-42":"_5rwbck","size-48":"_62rB7g","date-input-group":"jTYQnC","separator":"M9g5Yl","mode-form":"mByNg-","mode-cell":"p5qr-K","dateInput":"lNWbGU","size24":"VjyrWh","size30":"Z4-Jjm","size36":"Qaim8R","size42":"_5rwbck","size48":"_62rB7g","dateInputGroup":"jTYQnC","modeForm":"mByNg-","modeCell":"p5qr-K"};
 
 class FilterRangeDatePickerBody extends BaseRangeDatePicker {
     constructor() {
@@ -3158,10 +3389,10 @@ class FilterRangeDatePickerBody extends BaseRangeDatePicker {
                 React.createElement(RangeDatePickerBody, { value: this.getValue(), onValueChange: this.onRangeChange, filter: this.props.filter, focusPart: this.state.inFocus, changeIsOpen: this.changeIsOpen, presets: this.props.presets })),
             React.createElement(FlexCell, { alignSelf: "stretch" },
                 React.createElement(FlexRow, { padding: "24", vPadding: "12" },
-                    React.createElement("div", { className: cx(css$h.dateInputGroup, this.state.inFocus && uuiMod.focus) },
-                        React.createElement(TextInput, { icon: systemIcons['30'].calendar, cx: cx(css$h.dateInput, css$h['size-30'], this.state.inFocus === 'from' && uuiMod.focus), size: "30", placeholder: i18n.rangeDatePicker.pickerPlaceholderFrom, value: this.state.inputValue.from, onValueChange: this.getChangeHandler('from'), onFocus: (event) => this.handleFocus(event, 'from'), onBlur: (event) => this.handleBlur(event, 'from') }),
-                        React.createElement("div", { className: css$h.separator }),
-                        React.createElement(TextInput, { cx: cx(css$h.dateInput, css$h['size-30'], this.state.inFocus === 'to' && uuiMod.focus), placeholder: i18n.rangeDatePicker.pickerPlaceholderTo, size: "30", value: this.state.inputValue.to, onCancel: this.state.inputValue.from && this.state.inputValue.to && this.handleCancel, onValueChange: this.getChangeHandler('to'), onFocus: (event) => this.handleFocus(event, 'to'), onBlur: (event) => this.handleBlur(event, 'to') })),
+                    React.createElement("div", { className: cx(css$k.dateInputGroup, this.state.inFocus && uuiMod.focus) },
+                        React.createElement(TextInput, { icon: systemIcons['30'].calendar, cx: cx(css$k.dateInput, css$k['size-30'], this.state.inFocus === 'from' && uuiMod.focus), size: "30", placeholder: i18n.rangeDatePicker.pickerPlaceholderFrom, value: this.state.inputValue.from, onValueChange: this.getChangeHandler('from'), onFocus: (event) => this.handleFocus(event, 'from'), onBlur: (event) => this.handleBlur(event, 'from') }),
+                        React.createElement("div", { className: css$k.separator }),
+                        React.createElement(TextInput, { cx: cx(css$k.dateInput, css$k['size-30'], this.state.inFocus === 'to' && uuiMod.focus), placeholder: i18n.rangeDatePicker.pickerPlaceholderTo, size: "30", value: this.state.inputValue.to, onCancel: this.state.inputValue.from && this.state.inputValue.to && this.handleCancel, onValueChange: this.getChangeHandler('to'), onFocus: (event) => this.handleFocus(event, 'to'), onBlur: (event) => this.handleBlur(event, 'to') })),
                     React.createElement(FlexSpacer, null),
                     React.createElement(LinkButton, { isDisabled: !this.state.inputValue.from && !this.state.inputValue.to, caption: i18n.pickerModal.clearAllButton, onClick: this.handleCancel })))));
     }
@@ -3170,7 +3401,7 @@ class FilterRangeDatePickerBody extends BaseRangeDatePicker {
     }
 }
 
-var css$g = {"container":"F1W-1y"};
+var css$j = {"container":"pQ20ri"};
 
 function FilterNumericBody(props) {
     var _a, _b;
@@ -3214,7 +3445,7 @@ function FilterNumericBody(props) {
     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$g.container },
+            React__default.createElement(FlexRow, { padding: "12", alignItems: "center", spacing: "12", borderBottom: true, cx: css$j.container },
                 React__default.createElement(FlexCell, { width: "100%" },
                     React__default.createElement(NumericInput, { value: (_a = value === null || value === void 0 ? void 0 : value.from) !== null && _a !== void 0 ? _a : null, onValueChange: rangeValueHandler('from'), size: "36", placeholder: "Min", formatOptions: { maximumFractionDigits: 2 } })),
                 React__default.createElement(FlexCell, { width: "100%" },
@@ -3222,7 +3453,7 @@ function FilterNumericBody(props) {
             renderFooter()));
     }
     return (React__default.createElement("div", null,
-        React__default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$g.container },
+        React__default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$j.container },
             React__default.createElement(FlexCell, { width: 130 },
                 React__default.createElement(NumericInput, { value: typeof props.value === 'number' ? props.value : null, onValueChange: props.onValueChange, size: "36", placeholder: "Enter a number", formatOptions: { maximumFractionDigits: 2 } }))),
         renderFooter()));
@@ -3243,23 +3474,23 @@ function FilterItemBody(props) {
     }
 }
 
-var _path$d;
-function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
+var _path$g;
+function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
 var SvgActionDeleteforever12 = function SvgActionDeleteforever12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$e({
+  return /*#__PURE__*/React.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M14 6v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6h10zm-3-4 1 1h3v2H3V3h3l1-1h4zm-.24 12.1L9 12.36 7.24 14.1l-1.16-1.16 1.74-1.76-1.78-1.8 1.2-1.18L9 10l1.76-1.8 1.18 1.18-1.76 1.8 1.76 1.76-1.18 1.16z"
   })));
 };
-var ForwardRef$e = /*#__PURE__*/forwardRef(SvgActionDeleteforever12);
+var ForwardRef$h = /*#__PURE__*/forwardRef(SvgActionDeleteforever12);
 
-var css$f = {"header":"jRIFsI","removeButton":"mLf7Zx","with-search":"mSZHMj","panel":"sKiDnb","withSearch":"mSZHMj"};
+var css$i = {"header":"_6pBAif","removeButton":"hboOJO","with-search":"_21QAp0","panel":"_5HB-ra","withSearch":"_21QAp0"};
 
 function FiltersToolbarItemImpl(props) {
     const { maxCount = 2 } = props;
@@ -3335,14 +3566,14 @@ function FiltersToolbarItemImpl(props) {
     };
     const renderHeader = (hideTitle) => {
         var _a;
-        return (React__default.createElement("div", { className: cx(css$f.header, isPickersType && ((_a = props.showSearch) !== null && _a !== void 0 ? _a : css$f.withSearch)) },
+        return (React__default.createElement("div", { className: cx(css$i.header, isPickersType && ((_a = props.showSearch) !== null && _a !== void 0 ? _a : css$i.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 === null || props === void 0 ? void 0 : props.isAlwaysVisible) && (React__default.createElement(LinkButton, { cx: css$f.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: "24", icon: ForwardRef$e }))));
+            !(props === null || props === void 0 ? void 0 : props.isAlwaysVisible) && (React__default.createElement(LinkButton, { cx: css$i.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: "24", icon: ForwardRef$h }))));
     };
     const renderBody = (dropdownProps) => {
         const hideHeaderTitle = isPickersType && isMobileScreen;
         return (React__default.createElement(DropdownContainer, Object.assign({}, dropdownProps),
-            React__default.createElement(Panel, { cx: css$f.panel }, isPickersType ? (React__default.createElement(MobileDropdownWrapper, { title: props.title, close: () => isOpenChange(false) },
+            React__default.createElement(Panel, { cx: css$i.panel }, isPickersType ? (React__default.createElement(MobileDropdownWrapper, { title: props.title, close: () => isOpenChange(false) },
                 renderHeader(hideHeaderTitle),
                 React__default.createElement(FilterItemBody, Object.assign({}, props, dropdownProps, { selectedPredicate: predicate, value: getValue(), onValueChange: onValueChange })))) : (React__default.createElement(React__default.Fragment, null,
                 renderHeader(hideHeaderTitle),
@@ -3421,20 +3652,20 @@ function FiltersToolbarItemImpl(props) {
 }
 const FiltersPanelItem = React__default.memo(FiltersToolbarItemImpl);
 
-var _path$c;
-function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
+var _path$f;
+function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
 var SvgActionAdd18 = function SvgActionAdd18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$d({
+  return /*#__PURE__*/React.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
     d: "M10 2H8v6H2v2h6v6h2v-6h6V8h-6V2z"
   })));
 };
-var ForwardRef$d = /*#__PURE__*/forwardRef(SvgActionAdd18);
+var ForwardRef$g = /*#__PURE__*/forwardRef(SvgActionAdd18);
 
 const normalizeFilterWithPredicates = (filter) => {
     if (!filter) {
@@ -3486,12 +3717,15 @@ function FiltersToolbarImpl(props) {
         const newConfig = {};
         const newFilter = {};
         const sortedOrders = tableState.filtersConfig && sortBy(tableState.filtersConfig, (f) => f === null || f === void 0 ? void 0 : f.order);
-        let order = (sortedOrders === null || sortedOrders === void 0 ? void 0 : sortedOrders.length) ? (_a = sortedOrders[sortedOrders.length - 1]) === null || _a === void 0 ? void 0 : _a.order : null;
+        let lastItemOrder = (sortedOrders === null || sortedOrders === void 0 ? void 0 : sortedOrders.length) ? (_a = sortedOrders[sortedOrders.length - 1]) === null || _a === void 0 ? void 0 : _a.order : null;
         updatedFilters.forEach((filter) => {
             var _a, _b;
-            const newOrder = ((_b = (_a = tableState === null || tableState === void 0 ? void 0 : tableState.filtersConfig) === null || _a === void 0 ? void 0 : _a[filter === null || filter === void 0 ? void 0 : filter.field]) === null || _b === void 0 ? void 0 : _b.order) || getOrderBetween(order, null);
-            order = newOrder;
-            newConfig[filter.field] = { isVisible: true, order: newOrder };
+            let order = (_b = (_a = tableState === null || tableState === void 0 ? void 0 : tableState.filtersConfig) === null || _a === void 0 ? void 0 : _a[filter === null || filter === void 0 ? void 0 : filter.field]) === null || _b === void 0 ? void 0 : _b.order;
+            if (!order) {
+                order = getOrderBetween(lastItemOrder, null);
+                lastItemOrder = order;
+            }
+            newConfig[filter.field] = { isVisible: true, order: order };
             // Remove unselected filters from filter object
             if (tableState.filter) {
                 newFilter[filter.field] = tableState.filter[filter.field];
@@ -3522,7 +3756,7 @@ function FiltersToolbarImpl(props) {
     }, [filters, tableState.filtersConfig]);
     const renderAddFilterToggler = useCallback((togglerProps) => {
         var _a;
-        return (React__default.createElement(Button, { size: (_a = props.size) !== null && _a !== void 0 ? _a : '36', onClick: togglerProps.onClick, ref: togglerProps.ref, caption: i18n.filterToolbar.addCaption, icon: ForwardRef$d, iconPosition: "left", mode: "ghost", color: "primary" }));
+        return (React__default.createElement(Button, { size: (_a = props.size) !== null && _a !== void 0 ? _a : '36', onClick: togglerProps.onClick, ref: togglerProps.ref, caption: i18n.filterToolbar.addCaption, icon: ForwardRef$g, iconPosition: "left", mode: "ghost", color: "primary" }));
     }, []);
     const getRowOptions = useCallback((item) => ({
         isDisabled: item.isAlwaysVisible,
@@ -3543,115 +3777,115 @@ function FiltersToolbarImpl(props) {
                 React__default.createElement(FiltersPanelItem, Object.assign({}, f, { value: (_a = tableState.filter) === null || _a === void 0 ? void 0 : _a[f.field], onValueChange: handleFilterChange, key: f.field, autoFocus: newFilterId === f.field, removeFilter: removeFilter, size: props.size }))));
         }),
         !isAllFiltersAlwaysVisible && (React__default.createElement(PickerInput, { dataSource: dataSource, value: selectedFilters, onValueChange: onFiltersChange, selectionMode: "multi", valueType: "entity", key: newFilterId, renderRow: (props) => (React__default.createElement(DataPickerRow, Object.assign({}, props, { padding: "12", key: props.key, onCheck: (row) => {
-                    props.onCheck(row);
+                    props.onCheck && props.onCheck(row);
                     !row.isChecked && setNewFilterId(row.value.field);
                 }, renderItem: (item, rowProps) => React__default.createElement(PickerItem, Object.assign({}, rowProps, { title: item.title })) }))), getName: (i) => i.title, renderToggler: renderAddFilterToggler, emptyValue: [], getRowOptions: getRowOptions, fixedBodyPosition: true, size: props.size }))));
 }
 const FiltersPanel = React__default.memo(FiltersToolbarImpl);
 
-var css$e = {"divider":"MDnNWz","dropdownDeleteIcon":"Vd3PlN","presetsWrapper":"jYiW9G","addPresetContainer":"xLidLo","dropContainer":"tFbLLz"};
+var css$h = {"divider":"IPfn-9","dropdownDeleteIcon":"ZxuLG3","presetsWrapper":"el2heb","addPresetContainer":"tOi9F8","dropContainer":"-B6u8a"};
 
-var css$d = {"preset-dropdown-panel":"c2EfyR","delete-row":"Flkvfl","delete-button":"OKERxk","targetOpen":"W5YKAD","presetDropdownPanel":"c2EfyR","deleteRow":"Flkvfl","deleteButton":"OKERxk"};
+var css$g = {"preset-dropdown-panel":"Y0Hc-T","delete-row":"-f9ec-","delete-button":"_1NmOzC","targetOpen":"FlxGib","presetDropdownPanel":"Y0Hc-T","deleteRow":"-f9ec-","deleteButton":"_1NmOzC"};
 
-var _path$b;
-function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
+var _path$e;
+function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
 var SvgSaveOutline18 = function SvgSaveOutline18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$c({
+  return /*#__PURE__*/React.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
     d: "M12.75 2.25h-9a1.5 1.5 0 0 0-1.5 1.5v10.5a1.5 1.5 0 0 0 1.5 1.5h10.5c.825 0 1.5-.675 1.5-1.5v-9l-3-3zm1.5 12H3.75V3.75h8.377l2.123 2.122v8.378zM9 9a2.247 2.247 0 0 0-2.25 2.25A2.247 2.247 0 0 0 9 13.5a2.247 2.247 0 0 0 2.25-2.25A2.247 2.247 0 0 0 9 9zM4.5 4.5h6.75v3H4.5v-3z"
   })));
 };
-var ForwardRef$c = /*#__PURE__*/forwardRef(SvgSaveOutline18);
+var ForwardRef$f = /*#__PURE__*/forwardRef(SvgSaveOutline18);
 
-var _path$a;
-function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
+var _path$d;
+function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
 var SvgContentEditUndo18 = function SvgContentEditUndo18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
+  return /*#__PURE__*/React.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M9.375 6A7.848 7.848 0 0 0 4.2 7.95l-2.7-2.7V12h6.75L5.535 9.285a5.965 5.965 0 0 1 3.84-1.41 6.009 6.009 0 0 1 5.7 4.125l1.777-.585C15.81 8.273 12.862 6 9.375 6z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$b = /*#__PURE__*/forwardRef(SvgContentEditUndo18);
+var ForwardRef$e = /*#__PURE__*/forwardRef(SvgContentEditUndo18);
 
-var _path$9;
-function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
+var _path$c;
+function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
 var SvgActionCopyContent18 = function SvgActionCopyContent18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$a({
+  return /*#__PURE__*/React.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M3 1h8v2H3v8H1V3a2 2 0 0 1 2-2zm2 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7zm10 8H7V7h8v8z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$a = /*#__PURE__*/forwardRef(SvgActionCopyContent18);
+var ForwardRef$d = /*#__PURE__*/forwardRef(SvgActionCopyContent18);
 
-var _path$8;
-function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
+var _path$b;
+function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
 var SvgContentEdit18 = function SvgContentEdit18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$9({
+  return /*#__PURE__*/React.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M2.25 12.94v2.812h2.813l8.294-8.295-2.812-2.813L2.25 12.94zm13.283-7.658a.747.747 0 0 0 0-1.058L13.777 2.47a.747.747 0 0 0-1.058 0l-1.373 1.373 2.813 2.812 1.373-1.372z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$9 = /*#__PURE__*/forwardRef(SvgContentEdit18);
+var ForwardRef$c = /*#__PURE__*/forwardRef(SvgContentEdit18);
 
-var _path$7;
-function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+var _path$a;
+function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
 var SvgContentLink18 = function SvgContentLink18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$8({
+  return /*#__PURE__*/React.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M7.943 10.057a.73.73 0 0 1 0 1.066.756.756 0 0 1-1.065 0 3.753 3.753 0 0 1 0-5.303l2.655-2.655a3.753 3.753 0 0 1 5.302 0 3.753 3.753 0 0 1 0 5.302l-1.118 1.118a5.18 5.18 0 0 0-.3-1.815l.353-.36a2.236 2.236 0 0 0 0-3.18 2.236 2.236 0 0 0-3.18 0L7.943 6.877a2.236 2.236 0 0 0 0 3.18zm2.114-3.18a.756.756 0 0 1 1.066 0 3.753 3.753 0 0 1 0 5.303l-2.655 2.655a3.753 3.753 0 0 1-5.303 0 3.753 3.753 0 0 1 0-5.303l1.118-1.117a5.25 5.25 0 0 0 .3 1.823l-.353.352a2.236 2.236 0 0 0 0 3.18 2.236 2.236 0 0 0 3.18 0l2.647-2.647a2.236 2.236 0 0 0 0-3.18.73.73 0 0 1 0-1.066z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$8 = /*#__PURE__*/forwardRef(SvgContentLink18);
+var ForwardRef$b = /*#__PURE__*/forwardRef(SvgContentLink18);
 
-var _path$6;
-function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+var _path$9;
+function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
 var SvgActionDeleteforever18 = function SvgActionDeleteforever18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$7({
+  return /*#__PURE__*/React.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M7 2h4l1 1h3v2H3V3h3l1-1zM4 6h10v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6zm6.76 8.1L9 12.36 7.24 14.1l-1.16-1.16 1.74-1.76-1.78-1.8 1.2-1.18L9 10l1.76-1.8 1.18 1.18-1.76 1.8 1.76 1.76-1.18 1.16z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$7 = /*#__PURE__*/forwardRef(SvgActionDeleteforever18);
+var ForwardRef$a = /*#__PURE__*/forwardRef(SvgActionDeleteforever18);
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = useUuiContext();
@@ -3688,30 +3922,30 @@ function PresetActionsDropdown(props) {
     ]);
     const renderBody = () => {
         const isReadonlyPreset = props.preset.isReadonly;
-        return (React__default.createElement(Panel, { shadow: true, cx: css$d.presetDropdownPanel },
+        return (React__default.createElement(Panel, { shadow: true, cx: css$g.presetDropdownPanel },
             props.activePresetId === props.preset.id && props.hasPresetChanged(props.preset) && (React__default.createElement(React__default.Fragment, null,
                 !isReadonlyPreset && (React__default.createElement(FlexRow, { key: `${props.preset.id}-save-in-current` },
-                    React__default.createElement(DropdownMenuButton, { icon: ForwardRef$o, caption: "Save in current", onClick: saveInCurrentHandler }))),
+                    React__default.createElement(DropdownMenuButton, { icon: ForwardRef$r, caption: "Save in current", onClick: saveInCurrentHandler }))),
                 React__default.createElement(FlexRow, { key: `${props.preset.id}-save-as-new` },
-                    React__default.createElement(DropdownMenuButton, { icon: ForwardRef$c, caption: "Save as new", onClick: props.addPreset })),
+                    React__default.createElement(DropdownMenuButton, { icon: ForwardRef$f, caption: "Save as new", onClick: props.addPreset })),
                 React__default.createElement(FlexRow, { key: `${props.preset.id}-discard`, borderBottom: true },
-                    React__default.createElement(DropdownMenuButton, { icon: ForwardRef$b, caption: "Discard all changes", onClick: discardAllChangesHandler })))),
+                    React__default.createElement(DropdownMenuButton, { icon: ForwardRef$e, caption: "Discard all changes", onClick: discardAllChangesHandler })))),
             props.preset.id === props.activePresetId && !isReadonlyPreset && (React__default.createElement(FlexRow, { key: `${props.preset.id}-rename` },
-                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$9, caption: "Rename", onClick: props.renamePreset }))),
+                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$c, caption: "Rename", onClick: props.renamePreset }))),
             React__default.createElement(FlexRow, { key: `${props.preset.id}-duplicate` },
-                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$a, caption: "Duplicate", onClick: duplicateHandler })),
+                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$d, caption: "Duplicate", onClick: duplicateHandler })),
             React__default.createElement(FlexRow, { borderBottom: true, key: `${props.preset.id}-copyLink` },
-                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$8, caption: "Copy Link", onClick: copyUrlToClipboard })),
-            !isReadonlyPreset && (React__default.createElement(FlexRow, { key: `${props.preset.id}-delete`, cx: css$d.deleteRow },
-                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$7, caption: "Delete", cx: css$d.deleteButton, onClick: deleteHandler })))));
+                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$b, caption: "Copy Link", onClick: copyUrlToClipboard })),
+            !isReadonlyPreset && (React__default.createElement(FlexRow, { key: `${props.preset.id}-delete`, cx: css$g.deleteRow },
+                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$a, caption: "Delete", cx: css$g.deleteButton, onClick: deleteHandler })))));
     };
     const renderTarget = useCallback((dropdownProps) => {
-        return (React__default.createElement(IconButton, Object.assign({ cx: dropdownProps.isOpen && css$d.targetOpen, color: props.preset.id === props.activePresetId ? 'info' : 'default' }, dropdownProps, { icon: ForwardRef$p })));
+        return (React__default.createElement(IconButton, Object.assign({ cx: dropdownProps.isOpen && css$g.targetOpen, color: props.preset.id === props.activePresetId ? 'info' : 'default' }, dropdownProps, { icon: ForwardRef$s })));
     }, []);
     return (React__default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", modifiers: [{ name: 'offset', options: { offset: [0, 22] } }] }));
 }
 
-var css$c = {"preset-input-cell":"vUxmY-","preset-input":"Q2zG4D","presetInputCell":"vUxmY-","presetInput":"Q2zG4D"};
+var css$f = {"preset-input-cell":"lcD93R","preset-input":"gpVVel","presetInputCell":"lcD93R","presetInput":"gpVVel"};
 
 function PresetInput(props) {
     var _a;
@@ -3732,11 +3966,11 @@ function PresetInput(props) {
         }
         props.onCancel();
     }, [presetCaption.length, props.onCancel]);
-    return (React__default.createElement(FlexCell, { cx: css$c.presetInputCell, minWidth: 180 },
-        React__default.createElement(TextInput, { cx: css$c.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50 })));
+    return (React__default.createElement(FlexCell, { cx: css$f.presetInputCell, minWidth: 180 },
+        React__default.createElement(TextInput, { cx: css$f.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50 })));
 }
 
-var css$b = {"preset":"LkHKYv","activePreset":"X5qfz4"};
+var css$e = {"preset":"HI94V9","activePreset":"QjOQF8"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = useState(false);
@@ -3754,23 +3988,23 @@ function Preset(props) {
         return props.updatePreset(newPreset);
     }, [props.preset]);
     const isPresetActive = props.activePresetId === props.preset.id;
-    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$b.preset, isPresetActive && css$b.activePreset], size: "60", withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: () => React__default.createElement(PresetActionsDropdown, Object.assign({ renamePreset: setPresetForRename }, props)), 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$e.preset, isPresetActive && css$e.activePreset], size: "60", withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: () => React__default.createElement(PresetActionsDropdown, Object.assign({ renamePreset: setPresetForRename }, props)), iconPosition: "right", isLinkActive: isPresetActive }))));
 }
 
-var _path$5;
-function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+var _path$8;
+function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
 var SvgContentPlusBold18 = function SvgContentPlusBold18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$6({
+  return /*#__PURE__*/React.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
     d: "M10.5 3h-3v4.5H3v3h4.5V15h3v-4.5H15v-3h-4.5V3z"
   })));
 };
-var ForwardRef$6 = /*#__PURE__*/forwardRef(SvgContentPlusBold18);
+var ForwardRef$9 = /*#__PURE__*/forwardRef(SvgContentPlusBold18);
 
 function PresetsPanel(props) {
     const [isAddingPreset, setIsAddingPreset] = useState(false);
@@ -3785,16 +4019,16 @@ function PresetsPanel(props) {
         return React__default.createElement(Preset, Object.assign({ key: preset.id, preset: preset, addPreset: setAddingPreset }, presetApi));
     };
     const renderAddPresetButton = useCallback(() => {
-        return (React__default.createElement("div", { key: "addingPresetBlock", className: css$e.addPresetContainer }, !isAddingPreset ? (React__default.createElement(Button, { size: "36", onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: ForwardRef$6, iconPosition: "left", mode: "ghost", color: "primary" })) : (React__default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
+        return (React__default.createElement("div", { key: "addingPresetBlock", className: css$h.addPresetContainer }, !isAddingPreset ? (React__default.createElement(Button, { size: "36", onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: ForwardRef$9, iconPosition: "left", mode: "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$e.divider }),
-                React__default.createElement(Button, Object.assign({ mode: "ghost", color: "secondary", caption: `${(hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.length) || ''} more` }, props)))), renderBody: () => (React__default.createElement(DropdownContainer, { cx: cx$1(css$e.dropContainer), width: 230 },
-                React__default.createElement(ScrollBars$1, null, hiddenItems.map((hiddenItem) => (React__default.createElement(DropdownMenuButton, { key: hiddenItem.preset.id, onClick: () => onPresetDropdownSelect(hiddenItem), caption: hiddenItem.preset.name, icon: !hiddenItem.preset.isReadonly && ForwardRef$7, iconPosition: "right", cx: css$e.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
+                React__default.createElement("div", { className: css$h.divider }),
+                React__default.createElement(Button, Object.assign({ mode: "ghost", color: "secondary", caption: `${(hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.length) || ''} more` }, props)))), renderBody: () => (React__default.createElement(DropdownContainer, { cx: cx$1(css$h.dropContainer), width: 230 },
+                React__default.createElement(ScrollBars$1, null, hiddenItems.map((hiddenItem) => (React__default.createElement(DropdownMenuButton, { key: hiddenItem.preset.id, onClick: () => onPresetDropdownSelect(hiddenItem), caption: hiddenItem.preset.name, icon: !hiddenItem.preset.isReadonly && ForwardRef$a, iconPosition: "right", cx: css$h.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
     };
     const getPresetPriority = (preset, index) => {
         return preset.id === props.activePresetId ? 100499 : 1000 - index;
@@ -3812,7 +4046,7 @@ function PresetsPanel(props) {
         ];
     };
     return (React__default.createElement(FlexCell, { grow: 1, minWidth: 310, rawProps: props.rawProps },
-        React__default.createElement(FlexRow, { size: null, spacing: "12", cx: css$e.presetsWrapper },
+        React__default.createElement(FlexRow, { size: null, spacing: "12", cx: css$h.presetsWrapper },
             React__default.createElement(AdaptivePanel, { items: getPanelItems() }))));
 }
 
@@ -3824,53 +4058,53 @@ const defaultPredicates = {
     rangeDatePicker: [{ predicate: 'inRange', name: 'In Range', isDefault: true }, { predicate: 'notInRange', name: 'Not in Range' }],
 };
 
-var css$a = {"root":"ku9N6M"};
+var css$d = {"root":"gIPtez"};
 
-var css$9 = {"root":"_1Eu1XE","burger-content":"HArkk-","burgerContent":"HArkk-"};
+var css$c = {"root":"yd2SbJ","burger-content":"rVcvLb","burgerContent":"rVcvLb"};
 
-var _path$4;
-function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+var _path$7;
+function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
 var SvgBurger = function SvgBurger(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$5({
+  return /*#__PURE__*/React.createElement("svg", _extends$8({
     width: 60,
     height: 60,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
     d: "M8 9.2h8v.8H8zM8 14h6v.8H8zm0-2.4h8v.8H8z"
   })));
 };
-var ForwardRef$5 = /*#__PURE__*/forwardRef(SvgBurger);
+var ForwardRef$8 = /*#__PURE__*/forwardRef(SvgBurger);
 
-var _path$3;
-function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+var _path$6;
+function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
 var SvgBurgerClose = function SvgBurgerClose(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
+  return /*#__PURE__*/React.createElement("svg", _extends$7({
     width: 60,
     height: 60,
     viewBox: "0 0 60 60",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
     d: "M38.543 20 40 21.457 31.456 30 40 38.543 38.543 40 30 31.456 21.457 40 20 38.543 28.543 30 20 21.457 21.457 20 30 28.543 38.543 20Z"
   })));
 };
-var ForwardRef$4 = /*#__PURE__*/forwardRef(SvgBurgerClose);
+var ForwardRef$7 = /*#__PURE__*/forwardRef(SvgBurgerClose);
 
 function applyBurgerMods() {
-    return [css$9.root];
+    return [css$c.root];
 }
 const Burger = withMods(Burger$1, applyBurgerMods, () => ({
-    burgerIcon: ForwardRef$5,
-    crossIcon: ForwardRef$4,
-    burgerContentCx: css$9.burgerContent,
+    burgerIcon: ForwardRef$8,
+    crossIcon: ForwardRef$7,
+    burgerContentCx: css$c.burgerContent,
 }));
 
-var _g, _path$2;
-function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+var _g, _path$5;
+function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
 var SvgTriangle = function SvgTriangle(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
     width: 12,
     height: 24,
     viewBox: "0 0 12 24",
@@ -3887,21 +4121,21 @@ var SvgTriangle = function SvgTriangle(props, ref) {
     cx: 12,
     cy: 302.65,
     r: 18
-  }))), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+  }))), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
     d: "m5 14-4-4h8z"
   })));
 };
-var ForwardRef$3 = /*#__PURE__*/forwardRef(SvgTriangle);
+var ForwardRef$6 = /*#__PURE__*/forwardRef(SvgTriangle);
 
-var css$8 = {"root":"zAjemh","button-primary":"pzY3LX","button-secondary":"c5TsnA","hasIcon":"_9gEwVf","dropdown":"TfhNho","buttonPrimary":"pzY3LX","buttonSecondary":"c5TsnA"};
+var css$b = {"root":"Mv0r1d","button-primary":"keuKOs","button-secondary":"P-WHea","hasIcon":"lvQy56","dropdown":"CmXs-J","buttonPrimary":"keuKOs","buttonSecondary":"P-WHea"};
 
 const BurgerButton = withMods(Button$1, (props) => [
-    css$8.root, css$8['button-' + (props.type || 'primary')], css$8['indent-' + (props.indentLevel || 0)], props.isDropdown && css$8.dropdown, props.icon && css$8.hasIcon,
-], () => ({ dropdownIcon: ForwardRef$3, dropdownIconPosition: 'left', role: 'menuitem' }));
+    css$b.root, css$b['button-' + (props.type || 'primary')], css$b['indent-' + (props.indentLevel || 0)], props.isDropdown && css$b.dropdown, props.icon && css$b.hasIcon,
+], () => ({ dropdownIcon: ForwardRef$6, dropdownIconPosition: 'left', role: 'menuitem' }));
 
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
 var SvgMenuInputCancel = function SvgMenuInputCancel(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 24,
@@ -3943,48 +4177,48 @@ var SvgMenuInputCancel = function SvgMenuInputCancel(props, ref) {
     transform: "matrix(3.77953 0 0 3.77953 -369 -648.52)"
   })));
 };
-var ForwardRef$2 = /*#__PURE__*/forwardRef(SvgMenuInputCancel);
+var ForwardRef$5 = /*#__PURE__*/forwardRef(SvgMenuInputCancel);
 
-var css$7 = {"search-input":"-A2C1p","searchInput":"-A2C1p"};
+var css$a = {"search-input":"QGDn6F","searchInput":"QGDn6F"};
 
 function BurgerSearch(props) {
-    return (React.createElement(TextInput$1, { cx: css$7.searchInput, iconPosition: "left", icon: ForwardRef$W, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$2, autoFocus: true }));
+    return (React.createElement(TextInput$1, { cx: css$a.searchInput, iconPosition: "left", icon: ForwardRef$16, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$5, autoFocus: true }));
 }
 
-var css$6 = {"group-header":"mbhWD6","group-name":"EZhmB1","line":"iHRlJA","groupHeader":"mbhWD6","groupName":"EZhmB1"};
+var css$9 = {"group-header":"qbGYe-","group-name":"FsBdAN","line":"_8XQPVz","groupHeader":"qbGYe-","groupName":"FsBdAN"};
 
 function BurgerGroupHeader(props) {
-    return (React.createElement("div", { className: css$6.groupHeader },
-        React.createElement("hr", { className: css$6.line }),
-        React.createElement("span", { className: css$6.groupName }, props.caption)));
+    return (React.createElement("div", { className: css$9.groupHeader },
+        React.createElement("hr", { className: css$9.line }),
+        React.createElement("span", { className: css$9.groupName }, props.caption)));
 }
 
-var css$5 = {"root":"C4i0f0","type-primary":"AKRoaq","type-secondary":"KN8snq","typePrimary":"AKRoaq","typeSecondary":"KN8snq"};
+var css$8 = {"root":"E4xLyU","type-primary":"tyk2y8","type-secondary":"s5MHGc","typePrimary":"tyk2y8","typeSecondary":"s5MHGc"};
 
-var _path$1;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var _path$4;
+function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
 var SvgChevronDown24 = function SvgChevronDown24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
+  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$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
   })));
 };
-var ForwardRef$1 = /*#__PURE__*/forwardRef(SvgChevronDown24);
+var ForwardRef$4 = /*#__PURE__*/forwardRef(SvgChevronDown24);
 
-const MainMenuButton = withMods(Button$1, (mods) => [css$5.root, css$5['type-' + (mods.type || 'primary')]], () => ({ dropdownIcon: ForwardRef$1, role: 'menuitem' }));
+const MainMenuButton = withMods(Button$1, (mods) => [css$8.root, css$8['type-' + (mods.type || 'primary')]], () => ({ dropdownIcon: ForwardRef$4, role: 'menuitem' }));
 
-var css$4 = {"dropdown-body":"_5zLnDY","dropdownBody":"_5zLnDY"};
+var css$7 = {"dropdown-body":"_6NH12l","dropdownBody":"_6NH12l"};
 
 class MainMenuDropdown extends React.Component {
     render() {
         return (React.createElement(Dropdown$1, { renderTarget: (props) => (React.createElement(MainMenuButton, Object.assign({ caption: this.props.caption }, props, { rawProps: this.props.rawProps, isLinkActive: this.props.isLinkActive, isDropdown: true }))), renderBody: (props) => {
-                return (React.createElement("div", { className: cx(css$4.dropdownBody) }, this.props.renderBody
+                return (React.createElement("div", { className: cx(css$7.dropdownBody) }, this.props.renderBody
                     ? this.props.renderBody(Object.assign({}, props))
                     : React.Children.map(this.props.children, (item) => {
                         if (!item)
@@ -4001,52 +4235,52 @@ class MainMenuDropdown extends React.Component {
 }
 
 function applyMainMenuMods() {
-    return [css$a.root];
+    return [css$d.root];
 }
 const MainMenu = withMods(MainMenu$1, applyMainMenuMods, () => ({
     Burger,
     MainMenuDropdown,
 }));
 
-var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _path$3;
+function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 var SvgGlobalMenu = function SvgGlobalMenu(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
     width: 60,
     height: 60,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
     className: "cls-2",
     d: "M12 11.2a.8.8 0 1 1-.8.8.8.8 0 0 1 .8-.8zm3.2 0a.8.8 0 1 1-.8.8.802.802 0 0 1 .8-.8zm-6.4 0a.8.8 0 1 1-.8.8.8.8 0 0 1 .8-.8zM12 7.6a.8.8 0 1 1-.8.8.8.8 0 0 1 .8-.8zm3.2 0a.8.8 0 1 1-.8.8.802.802 0 0 1 .8-.8zm-6.4 0a.8.8 0 1 1-.8.8.8.8 0 0 1 .8-.8zm3.2 7.2a.8.8 0 1 1-.8.8.8.8 0 0 1 .8-.8zm3.2 0a.8.8 0 1 1-.8.8.802.802 0 0 1 .8-.8zm-6.4 0a.8.8 0 1 1-.8.8.8.8 0 0 1 .8-.8z"
   })));
 };
-var ForwardRef = /*#__PURE__*/forwardRef(SvgGlobalMenu);
+var ForwardRef$3 = /*#__PURE__*/forwardRef(SvgGlobalMenu);
 
-var css$3 = {"global-menu-btn":"pGVKpY","globalMenuIcon":"kFSfJV","globalMenuBtn":"pGVKpY"};
+var css$6 = {"global-menu-btn":"ChI1fJ","globalMenuIcon":"BZO4dh","globalMenuBtn":"ChI1fJ"};
 
-const GlobalMenu = React.forwardRef((props, ref) => (React.createElement("button", Object.assign({ ref: ref, id: "global_menu_toggle", className: cx(css$3.globalMenuBtn, props.cx) }, props.rawProps),
-    React.createElement(IconContainer, { icon: ForwardRef, cx: css$3.globalMenuIcon }))));
+const GlobalMenu = React.forwardRef((props, ref) => (React.createElement("button", Object.assign({ ref: ref, id: "global_menu_toggle", className: cx(css$6.globalMenuBtn, props.cx) }, props.rawProps),
+    React.createElement(IconContainer, { icon: ForwardRef$3, cx: css$6.globalMenuIcon }))));
 
-var css$2 = {"container":"A9BIcJ","open":"_2aEPP4"};
+var css$5 = {"container":"ccuCSB","open":"lJvtgj"};
 
-const MainMenuAvatar = React.forwardRef((props, ref) => (React.createElement("button", { ref: ref, className: cx(css$2.container, props.isDropdown && css$2.dropdown, props.isOpen && css$2.open, props.onClick && uuiMarkers.clickable, props.cx), onClick: props.onClick },
-    React.createElement(Avatar$1, { size: "36", img: props.avatarUrl }),
+const MainMenuAvatar = React.forwardRef((props, ref) => (React.createElement("button", { ref: ref, className: cx(css$5.container, props.isDropdown && css$5.dropdown, props.isOpen && css$5.open, props.onClick && uuiMarkers.clickable, props.cx), onClick: props.onClick },
+    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, { icon: ForwardRef$10, flipY: props.isOpen }))))));
+        React.createElement(IconContainer, { icon: ForwardRef$1c, flipY: props.isOpen }))))));
 
-var css$1 = {"search-input":"wKYV3p","searchInput":"wKYV3p"};
+var css$4 = {"search-input":"DSs6ii","searchInput":"DSs6ii"};
 
 const MainMenuSearch = React.forwardRef((props, ref) => (React.createElement(IEditableDebouncer, Object.assign({}, props, { render: (iEditable) => {
         var _a;
-        return (React.createElement(TextInput$1, Object.assign({ iconPosition: "left", icon: ForwardRef$W, cancelIcon: ((_a = props.value) === null || _a === void 0 ? void 0 : _a.length) > 0 && ForwardRef$2 }, props, iEditable, { ref: ref, cx: cx$1(css$1.searchInput, props.cx) }, props.rawProps)));
+        return (React.createElement(TextInput$1, Object.assign({ iconPosition: "left", icon: ForwardRef$16, cancelIcon: ((_a = props.value) === null || _a === void 0 ? void 0 : _a.length) > 0 && ForwardRef$5 }, props, iEditable, { ref: ref, cx: cx$1(css$4.searchInput, props.cx) }, props.rawProps)));
     } }))));
 
-var css = {"container":"_1mnOEM"};
+var css$3 = {"container":"_4LQfTc"};
 
-const MainMenuIcon = React.forwardRef((props, ref) => (React.createElement(IconButton, Object.assign({ ref: ref, icon: props.icon, cx: cx$1(props.cx, css.container) }, props))));
+const MainMenuIcon = React.forwardRef((props, ref) => (React.createElement(IconButton, Object.assign({ ref: ref, icon: props.icon, cx: cx$1(props.cx, css$3.container) }, props))));
 
 const Anchor = Anchor$1;
 
@@ -4087,5 +4321,166 @@ function useForm(props) {
     return useForm$1(Object.assign({ beforeLeave, loadUnsavedChanges }, props));
 }
 
-export { Accordion, Alert, Anchor, Avatar, AvatarStack, Badge, Blocker, Burger, BurgerButton, BurgerGroupHeader, BurgerSearch, Button, Calendar, Checkbox, CheckboxGroup, ClearNotification, ColumnHeaderDropdown, ColumnsConfigurationModal, ConfirmationModal, ControlGroup, DataPickerBody, DataPickerFooter, DataPickerHeader, DataPickerRow, DataTable, DataTableCell, DataTableHeaderCell, DataTableHeaderRow, DataTableRow, DatePicker, DatePickerBody, DropMarker, Dropdown, DropdownContainer, DropdownMenuBody, DropdownMenuButton, DropdownMenuHeader, DropdownMenuSplitter, DropdownMenuSwitchButton, DropdownSubMenu, EditMode, ErrorAlert, ErrorNotification, FilterItemBody, FiltersPanel, FlexCell, FlexRow, Form, GlobalMenu, HintAlert, HintNotification, IDropdownControlKeys, IconButton, LabeledInput, LinkButton, MainMenu, MainMenuAvatar, MainMenuButton, MainMenuDropdown, MainMenuIcon, MainMenuSearch, MobileDropdownWrapper, ModalBlocker, ModalFooter, ModalHeader, ModalWindow, MultiSwitch, NotificationCard, NumericInput, Paginator, Panel, PickerInput, PickerItem, PickerList, PickerListItem, PickerModal, PickerModalImpl, PickerToggler, PresetsPanel, RadioGroup, RadioInput, RangeDatePicker, RangeDatePickerBody, RichTextView, ScrollBars, SearchInput, Spinner, SuccessAlert, SuccessNotification, Switch, TabButton, Tag, Text, TextArea, TextInput, TextPlaceholder, Tooltip, VerticalTabButton, VirtualList, WarningAlert, WarningNotification, allButtonColors, allButtonModes, allButtonSemanticColors, allEpamBadgeSemanticColors, allFillStyles, allFontStyles, allIconColors, allLinkButtonColors, allRowSizes, allSemanticColors, allSizes, allTextSizes, applyBadgeMods, applyButtonMods, applyCheckboxMods, applyDateSelectionMods, applyNumericInputMods, applySpinnerMods, applySwitchMods, applyTagMods, applyTextAreaMods, applyTextInputMods, defaultPredicates, getHighlightRanges, getHighlightedSearchMatches, getTextClasses, i18n, propsMods, rangeDatePickerPresets, renderCell, renderDropMarkers, useColumnsWithFilters, useForm, uuiDatePickerBody, weekCount };
+var _path$2;
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+var SvgShape = function SvgShape(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
+    width: 24,
+    height: 16,
+    viewBox: "0 0 24 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    ref: ref
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M14 9v4h-4V9H7l5-5 5 5m2.35-2.97A7.49 7.49 0 0 0 12 0C9.11 0 6.6 1.64 5.35 4.03A6.004 6.004 0 0 0 6 16h13a5 5 0 0 0 5-5c0-2.64-2.05-4.78-4.65-4.97Z"
+  })));
+};
+var ForwardRef$2 = /*#__PURE__*/forwardRef(SvgShape);
+
+var css$2 = {"root":"_2pCCt-","drop-start":"_0XBGTR","drop-over":"peenec","link":"zRIV9q","drop-area":"iyyNCh","icon-blue":"TgQueo","dropStart":"_0XBGTR","dropOver":"peenec","dropArea":"iyyNCh","iconBlue":"TgQueo"};
+
+class DropSpot extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.renderAttachmentArea = (props) => {
+            return (React.createElement("div", Object.assign({ className: cx$1(css$2.root, this.props.cx, props.isDragStart && css$2.dropStart, props.isDraggingOver && css$2.dropOver) }, this.props.rawProps),
+                React.createElement("div", Object.assign({}, props.eventHandlers, { className: css$2.dropArea }),
+                    React.createElement(FlexRow, { size: "24" },
+                        React.createElement(IconContainer, { icon: ForwardRef$2, cx: css$2.iconBlue }),
+                        React.createElement(Text, { lineHeight: "24", size: "24", fontSize: "14" },
+                            ' ',
+                            i18n.fileUpload.labelStart,
+                            ' '),
+                        React.createElement(UploadFileToggler, { onFilesAdded: this.props.onUploadFiles, render: (props) => (React.createElement(RichTextView, null,
+                                React.createElement(Anchor, Object.assign({}, props, { cx: css$2.link }), i18n.fileUpload.browse))), accept: this.props.accept, single: this.props.single })),
+                    this.props.infoText && (React.createElement(Text, { lineHeight: "24", size: "24", fontSize: "14", color: "secondary" }, this.props.infoText)))));
+        };
+    }
+    render() {
+        return React.createElement(DropSpot$1, { render: this.renderAttachmentArea, onFilesDropped: this.props.onUploadFiles });
+    }
+}
+
+var css$1 = {"file-card-wrapper":"bE97s2","file-name":"ASYPzV","error-card-wrapper":"z5inuX","default-color":"dHKLtd","doc-color":"dnlzBX","xls-color":"C0PI3u","pdf-color":"_6AUSsu","movie-color":"H5gdtM","img-color":"zJT9cj","drop-start":"G5n9ns","error-block":"HuDnuX","icons-block":"DfFKra","fileCardWrapper":"bE97s2","fileName":"ASYPzV","errorCardWrapper":"z5inuX","defaultColor":"dHKLtd","docColor":"dnlzBX","xlsColor":"C0PI3u","pdfColor":"_6AUSsu","movieColor":"H5gdtM","imgColor":"zJT9cj","dropStart":"G5n9ns","errorBlock":"HuDnuX","iconsBlock":"DfFKra"};
+
+var css = {"root":"pT9Xbm"};
+
+const SvgCircleProgress = 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", Object.assign({ className: css.root, width: props.size, height: props.size, ref: ref }, props.rawProps),
+        React.createElement("circle", { stroke: "#ACAFBF", 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", { stroke: "#ACAFBF", strokeWidth: 1, fill: "transparent", r: outsetRadius, cx: props.size / 2, cy: props.size / 2 })));
+});
+
+var _path$1;
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var SvgNavigationClose18 = function SvgNavigationClose18(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M14.25 4.808 13.193 3.75 9 7.942 4.808 3.75 3.75 4.808 7.942 9 3.75 13.193l1.058 1.057L9 10.057l4.193 4.193 1.057-1.057L10.057 9l4.193-4.192z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$1 = /*#__PURE__*/forwardRef(SvgNavigationClose18);
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgNotificationErrorFill10 = function SvgNotificationErrorFill10(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
+  })));
+};
+var ForwardRef = /*#__PURE__*/forwardRef(SvgNotificationErrorFill10);
+
+const FileCard = React.forwardRef((props, ref) => {
+    const [isLoadingShow, setIsLoadingShow] = React.useState(true);
+    const { file } = props;
+    const getIcon = (extension) => {
+        switch (extension) {
+            case 'doc':
+            case 'docx':
+                return React.createElement(IconContainer, { size: 24, icon: fileIcons.docIcon, cx: css$1.docColor });
+            case 'xls':
+            case 'xlsx':
+                return React.createElement(IconContainer, { size: 24, icon: fileIcons.exelIcon, cx: css$1.xlsColor });
+            case 'pdf':
+                return React.createElement(IconContainer, { size: 24, icon: fileIcons.pdfIcon, cx: css$1.pdfColor });
+            case 'gif':
+            case 'jpg':
+            case 'jpeg':
+            case 'svg':
+            case 'png':
+            case 'webp':
+                return React.createElement(IconContainer, { size: 24, icon: fileIcons.imgIcon, cx: css$1.imgColor });
+            case 'avi':
+            case 'mov':
+            case 'mp4':
+            case 'wmw':
+            case 'mkv':
+                return React.createElement(IconContainer, { size: 24, icon: fileIcons.videoIcon, cx: css$1.movieColor });
+            case 'csv':
+            case 'xml':
+                return React.createElement(IconContainer, { size: 24, icon: fileIcons.tableIcon, cx: css$1.defaultColor });
+            case 'rtf':
+            case 'txt':
+                return React.createElement(IconContainer, { size: 24, icon: fileIcons.textIcon, cx: css$1.defaultColor });
+            case 'eml':
+            case 'emlx':
+                return React.createElement(IconContainer, { size: 24, icon: fileIcons.mailIcon, cx: css$1.defaultColor });
+            default:
+                return React.createElement(IconContainer, { size: 24, icon: fileIcons.fileIcon, cx: css$1.defaultColor });
+        }
+    };
+    const { cx: componentCx, width, file: { progress, size, name, extension, error, abortXHR, }, onClick, } = props;
+    const fileExtension = extension || (name === null || name === void 0 ? void 0 : name.split('.').pop());
+    const fileName = name === null || name === void 0 ? void 0 : name.split('.').slice(0, -1).join('');
+    const isLoading = progress < 100;
+    const isCrossShow = ((!isLoadingShow && isLoading) || !isLoading) && onClick;
+    const mouseLeaveHandler = (e) => {
+        e.stopPropagation();
+        setIsLoadingShow(() => true);
+    };
+    const mouseEnterHandler = (e) => {
+        e.stopPropagation();
+        setIsLoadingShow(() => false);
+    };
+    const renderErrorContent = () => (React.createElement(Tooltip, { content: file.error.message, placement: "bottom-start" },
+        React.createElement("div", { className: css$1.errorBlock },
+            React.createElement(ForwardRef, null),
+            "Upload failed")));
+    const renderSuccessfulContent = () => (React.createElement(Text, { size: "18", fontSize: "14", lineHeight: "18", color: "secondary" },
+        fileExtension && `${fileExtension.toUpperCase()}, `,
+        isLoading && formatBytes((size / 100) * progress, 2, false) + i18n.fileCard.fileSizeProgress,
+        formatBytes(size)));
+    const removeHandler = () => {
+        progress && progress < 100 && abortXHR();
+        onClick();
+    };
+    return (React.createElement(FlexCell, { ref: ref, cx: cx$1(css$1.fileCardWrapper, (isLoading || (error === null || error === void 0 ? void 0 : error.isError)) && uuiMod.loading, componentCx, (error === null || error === void 0 ? void 0 : error.isError) && css$1.errorCardWrapper), minWidth: width, width: !width ? '100%' : undefined },
+        React.createElement(FlexRow, { cx: css$1.fileCardRow, size: "36", alignItems: "top", spacing: "6" },
+            fileExtension && getIcon(fileExtension),
+            React.createElement(FlexCell, { width: "100%" },
+                React.createElement(Text, { size: "18", fontSize: "14", lineHeight: "18", color: progress < 100 ? 'secondary' : 'primary', cx: css$1.fileName }, fileName),
+                (error === null || error === void 0 ? void 0 : error.isError) ? renderErrorContent() : renderSuccessfulContent()),
+            React.createElement("div", { className: cx$1(css$1.iconsBlock), onMouseEnter: mouseEnterHandler, onMouseLeave: mouseLeaveHandler },
+                isLoadingShow && isLoading && React.createElement(SvgCircleProgress, { progress: progress, size: 18 }),
+                isCrossShow && React.createElement(IconButton, { icon: ForwardRef$1, onClick: removeHandler })))));
+});
+
+export { Accordion, Alert, Anchor, AvatarStack, Badge, Blocker, Burger, BurgerButton, BurgerGroupHeader, BurgerSearch, Button, Calendar, Checkbox, CheckboxGroup, ClearNotification, ColumnHeaderDropdown, ColumnsConfigurationModal, ConfirmationModal, ControlGroup, DataPickerBody, DataPickerFooter, DataPickerHeader, DataPickerRow, DataTable, DataTableCell, DataTableHeaderCell, DataTableHeaderRow, DataTableRow, DatePicker, DatePickerBody, DropMarker, DropSpot, Dropdown, DropdownContainer, DropdownMenuBody, DropdownMenuButton, DropdownMenuHeader, DropdownMenuSplitter, DropdownMenuSwitchButton, DropdownSubMenu, EditMode, ErrorAlert, ErrorNotification, FileCard, FilterItemBody, FiltersPanel, FlexCell, FlexRow, Form, GlobalMenu, HintAlert, HintNotification, IDropdownControlKeys, IconButton, IndeterminateBar, IndicatorBar, LabeledInput, LinkButton, MainMenu, MainMenuAvatar, MainMenuButton, MainMenuDropdown, MainMenuIcon, MainMenuSearch, MobileDropdownWrapper, ModalBlocker, ModalFooter, ModalHeader, ModalWindow, MultiSwitch, NotificationCard, NumericInput, Paginator, Panel, PickerInput, PickerItem, PickerList, PickerListItem, PickerModal, PickerModalImpl, PickerToggler, PresetsPanel, ProgressBar, RadioGroup, RadioInput, RangeDatePicker, RangeDatePickerBody, RichTextView, ScrollBars, SearchInput, Spinner, SuccessAlert, SuccessNotification, SvgCircleProgress, Switch, TabButton, Tag, Text, TextArea, TextInput, TextPlaceholder, TimePicker, Tooltip, VerticalTabButton, VirtualList, WarningAlert, WarningNotification, allButtonColors, allButtonModes, allButtonSemanticColors, allEpamBadgeSemanticColors, allFillStyles, allFontStyles, allIconColors, allLinkButtonColors, allRowSizes, allSemanticColors, allSizes, allTextSizes, applyBadgeMods, applyButtonMods, applyCheckboxMods, applyDateSelectionMods, applyNumericInputMods, applyProgressBarMods, applySpinnerMods, applySwitchMods, applyTagMods, applyTextAreaMods, applyTextInputMods, defaultPredicates, getHighlightRanges, getHighlightedSearchMatches, getTextClasses, i18n, propsMods, rangeDatePickerPresets, renderCell, renderDropMarkers, useColumnsWithFilters, useForm, uuiDatePickerBody, weekCount };
 //# sourceMappingURL=index.esm.js.map