@epam/uui 5.0.1 → 5.1.1

package/index.esm.js

@@ -1,359 +1,335 @@
-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, DatePickerBody as DatePickerBody$1, BaseDatePicker, Calendar as Calendar$1, RangeDatePickerBody as RangeDatePickerBody$1, 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, MainMenu as MainMenu$1, Burger as Burger$1 } from '@epam/uui-components';
+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, 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 { 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 * 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 updateLocale from 'dayjs/plugin/updateLocale.js';
+import isoWeek from 'dayjs/plugin/isoWeek.js';
 import sortBy from 'lodash.sortby';
 
-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 _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 SvgBtnCross12 = function SvgBtnCross12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$15({
+  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$12 || (_path$12 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$11 || (_path$11 = /*#__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$15 = /*#__PURE__*/forwardRef(SvgBtnCross12);
+var ForwardRef$14 = /*#__PURE__*/forwardRef(SvgBtnCross12);
 
-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$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 SvgBtnCross18 = function SvgBtnCross18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$14({
+  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$11 || (_path$11 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$10 || (_path$10 = /*#__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$14 = /*#__PURE__*/forwardRef(SvgBtnCross18);
+var ForwardRef$13 = /*#__PURE__*/forwardRef(SvgBtnCross18);
 
-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$$;
+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 SvgBtnCross24 = function SvgBtnCross24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$13({
+  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$10 || (_path$10 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$$ || (_path$$ = /*#__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$13 = /*#__PURE__*/forwardRef(SvgBtnCross24);
+var ForwardRef$12 = /*#__PURE__*/forwardRef(SvgBtnCross24);
 
-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$_;
+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 SvgFoldingArrow12 = function SvgFoldingArrow12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$12({
+  return /*#__PURE__*/React.createElement("svg", _extends$11({
     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$_ || (_path$_ = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M8.295 4.295 6 6.585l-2.295-2.29L3 5l3 3 3-3z"
   })));
 };
-var ForwardRef$12 = /*#__PURE__*/forwardRef(SvgFoldingArrow12);
+var ForwardRef$11 = /*#__PURE__*/forwardRef(SvgFoldingArrow12);
 
-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$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 SvgFoldingArrow18 = function SvgFoldingArrow18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$11({
+  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$_ || (_path$_ = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$Z || (_path$Z = /*#__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$11 = /*#__PURE__*/forwardRef(SvgFoldingArrow18);
+var ForwardRef$10 = /*#__PURE__*/forwardRef(SvgFoldingArrow18);
 
-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$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 SvgFoldingArrow24 = function SvgFoldingArrow24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$10({
+  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$Z || (_path$Z = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$Y || (_path$Y = /*#__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$10 = /*#__PURE__*/forwardRef(SvgFoldingArrow24);
+var ForwardRef$$ = /*#__PURE__*/forwardRef(SvgFoldingArrow24);
 
-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$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 SvgAccept12 = function SvgAccept12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$$({
+  return /*#__PURE__*/React.createElement("svg", _extends$_({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$Y || (_path$Y = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$X || (_path$X = /*#__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$_ = /*#__PURE__*/forwardRef(SvgAccept12);
 
-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$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 SvgAccept18 = function SvgAccept18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$_({
+  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$X || (_path$X = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$W || (_path$W = /*#__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$_ = /*#__PURE__*/forwardRef(SvgAccept18);
+var ForwardRef$Z = /*#__PURE__*/forwardRef(SvgAccept18);
 
-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$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 SvgAccept24 = function SvgAccept24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$Z({
+  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$W || (_path$W = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$V || (_path$V = /*#__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$Z = /*#__PURE__*/forwardRef(SvgAccept24);
+var ForwardRef$Y = /*#__PURE__*/forwardRef(SvgAccept24);
 
-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$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 SvgSearch12 = function SvgSearch12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$Y({
+  return /*#__PURE__*/React.createElement("svg", _extends$X({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$V || (_path$V = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$U || (_path$U = /*#__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$Y = /*#__PURE__*/forwardRef(SvgSearch12);
+var ForwardRef$X = /*#__PURE__*/forwardRef(SvgSearch12);
 
-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$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 SvgSearch18 = function SvgSearch18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$X({
+  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$U || (_path$U = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$T || (_path$T = /*#__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$X = /*#__PURE__*/forwardRef(SvgSearch18);
+var ForwardRef$W = /*#__PURE__*/forwardRef(SvgSearch18);
 
-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$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 SvgSearch24 = function SvgSearch24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$W({
+  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$T || (_path$T = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$S || (_path$S = /*#__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$W = /*#__PURE__*/forwardRef(SvgSearch24);
+var ForwardRef$V = /*#__PURE__*/forwardRef(SvgSearch24);
 
-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$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 SvgCalendar12 = function SvgCalendar12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$V({
+  return /*#__PURE__*/React.createElement("svg", _extends$U({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$S || (_path$S = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$R || (_path$R = /*#__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$V = /*#__PURE__*/forwardRef(SvgCalendar12);
+var ForwardRef$U = /*#__PURE__*/forwardRef(SvgCalendar12);
 
-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$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 SvgCalendar18 = function SvgCalendar18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$U({
+  return /*#__PURE__*/React.createElement("svg", _extends$T({
     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$Q || (_path$Q = /*#__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$U = /*#__PURE__*/forwardRef(SvgCalendar18);
+var ForwardRef$T = /*#__PURE__*/forwardRef(SvgCalendar18);
 
-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$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 SvgCalendar24 = function SvgCalendar24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$T({
+  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$Q || (_path$Q = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$P || (_path$P = /*#__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$T = /*#__PURE__*/forwardRef(SvgCalendar24);
+var ForwardRef$S = /*#__PURE__*/forwardRef(SvgCalendar24);
 
-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$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 SvgInfo12 = function SvgInfo12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$S({
+  return /*#__PURE__*/React.createElement("svg", _extends$R({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$P || (_path$P = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$O || (_path$O = /*#__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$S = /*#__PURE__*/forwardRef(SvgInfo12);
+var ForwardRef$R = /*#__PURE__*/forwardRef(SvgInfo12);
 
-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$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 SvgInfo18 = function SvgInfo18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$R({
+  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$O || (_path$O = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$N || (_path$N = /*#__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$R = /*#__PURE__*/forwardRef(SvgInfo18);
+var ForwardRef$Q = /*#__PURE__*/forwardRef(SvgInfo18);
 
-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$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 SvgInfo24 = function SvgInfo24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$Q({
+  return /*#__PURE__*/React.createElement("svg", _extends$P({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$N || (_path$N = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$M || (_path$M = /*#__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$Q = /*#__PURE__*/forwardRef(SvgInfo24);
+var ForwardRef$P = /*#__PURE__*/forwardRef(SvgInfo24);
 
-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$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 SvgHelpFill10 = function SvgHelpFill10(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$P({
+  return /*#__PURE__*/React.createElement("svg", _extends$O({
     width: 10,
     height: 10,
     viewBox: "0 0 10 10",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$M || (_path$M = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$L || (_path$L = /*#__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$P = /*#__PURE__*/forwardRef(SvgHelpFill10);
+var ForwardRef$O = /*#__PURE__*/forwardRef(SvgHelpFill10);
 
-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$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 SvgHelpFill16 = function SvgHelpFill16(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$O({
+  return /*#__PURE__*/React.createElement("svg", _extends$N({
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$L || (_path$L = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$K || (_path$K = /*#__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$O = /*#__PURE__*/forwardRef(SvgHelpFill16);
+var ForwardRef$N = /*#__PURE__*/forwardRef(SvgHelpFill16);
 
 const systemIcons = {
     18: {
-        clear: ForwardRef$15,
-        foldingArrow: ForwardRef$12,
-        accept: ForwardRef$$,
-        search: ForwardRef$Y,
-        calendar: ForwardRef$V,
-        info: ForwardRef$S,
-        help: ForwardRef$P,
-    },
-    24: {
-        clear: ForwardRef$15,
-        foldingArrow: ForwardRef$12,
-        accept: ForwardRef$$,
-        search: ForwardRef$Y,
-        calendar: ForwardRef$V,
-        info: ForwardRef$S,
-        help: ForwardRef$P,
-    },
-    30: {
-        clear: ForwardRef$14,
-        foldingArrow: ForwardRef$11,
-        accept: ForwardRef$_,
-        search: ForwardRef$X,
-        calendar: ForwardRef$U,
-        info: ForwardRef$R,
-        help: ForwardRef$P,
-    },
-    36: {
         clear: ForwardRef$14,
         foldingArrow: ForwardRef$11,
         accept: ForwardRef$_,
@@ -362,7 +338,7 @@ const systemIcons = {
         info: ForwardRef$R,
         help: ForwardRef$O,
     },
-    42: {
+    24: {
         clear: ForwardRef$14,
         foldingArrow: ForwardRef$11,
         accept: ForwardRef$_,
@@ -371,7 +347,7 @@ const systemIcons = {
         info: ForwardRef$R,
         help: ForwardRef$O,
     },
-    48: {
+    30: {
         clear: ForwardRef$13,
         foldingArrow: ForwardRef$10,
         accept: ForwardRef$Z,
@@ -380,27 +356,54 @@ const systemIcons = {
         info: ForwardRef$Q,
         help: ForwardRef$O,
     },
-    60: {
+    36: {
         clear: ForwardRef$13,
         foldingArrow: ForwardRef$10,
         accept: ForwardRef$Z,
         search: ForwardRef$W,
         calendar: ForwardRef$T,
         info: ForwardRef$Q,
-        help: ForwardRef$O,
+        help: ForwardRef$N,
+    },
+    42: {
+        clear: ForwardRef$13,
+        foldingArrow: ForwardRef$10,
+        accept: ForwardRef$Z,
+        search: ForwardRef$W,
+        calendar: ForwardRef$T,
+        info: ForwardRef$Q,
+        help: ForwardRef$N,
+    },
+    48: {
+        clear: ForwardRef$12,
+        foldingArrow: ForwardRef$$,
+        accept: ForwardRef$Y,
+        search: ForwardRef$V,
+        calendar: ForwardRef$S,
+        info: ForwardRef$P,
+        help: ForwardRef$N,
+    },
+    60: {
+        clear: ForwardRef$12,
+        foldingArrow: ForwardRef$$,
+        accept: ForwardRef$Y,
+        search: ForwardRef$V,
+        calendar: ForwardRef$S,
+        info: ForwardRef$P,
+        help: ForwardRef$N,
     },
     none: {
-        clear: ForwardRef$14,
-        foldingArrow: ForwardRef$11,
-        accept: ForwardRef$_,
-        search: ForwardRef$X,
-        calendar: ForwardRef$U,
-        info: ForwardRef$R,
-        help: ForwardRef$O,
+        clear: ForwardRef$13,
+        foldingArrow: ForwardRef$10,
+        accept: ForwardRef$Z,
+        search: ForwardRef$W,
+        calendar: ForwardRef$T,
+        info: ForwardRef$Q,
+        help: ForwardRef$N,
     },
 };
 
-var buttonCss = {"root":"Button-module_root__4Qa5o","mode-solid":"Button-module_mode-solid__bzLPQ","mode-outline":"Button-module_mode-outline__QArEu","mode-none":"Button-module_mode-none__McQO-","mode-ghost":"Button-module_mode-ghost__Giwma","size-18":"Button-module_size-18__2FQcO","size-24":"Button-module_size-24__bHlC2","size-30":"Button-module_size-30__FmOt4","size-36":"Button-module_size-36__eBT-M","size-42":"Button-module_size-42__KHTm0","size-48":"Button-module_size-48__zeJhh","modeSolid":"Button-module_mode-solid__bzLPQ","modeOutline":"Button-module_mode-outline__QArEu","modeNone":"Button-module_mode-none__McQO-","modeGhost":"Button-module_mode-ghost__Giwma","size18":"Button-module_size-18__2FQcO","size24":"Button-module_size-24__bHlC2","size30":"Button-module_size-30__FmOt4","size36":"Button-module_size-36__eBT-M","size42":"Button-module_size-42__KHTm0","size48":"Button-module_size-48__zeJhh"};
+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"};
 
 const allButtonColors = [
     'accent', 'primary', 'secondary', 'negative',
@@ -419,17 +422,17 @@ const Button = withMods(Button$1, applyButtonMods, (props) => ({
     clearIcon: systemIcons[props.size || defaultSize$a].clear,
 }));
 
-var css$13 = {"root":"IconButton-module_root__M67sa"};
+var css$18 = {"root":"PJgbfC"};
 
 const allIconColors = [
     'info', 'success', 'warning', 'error', 'secondary', 'default',
 ];
 function applyIconButtonMods(mods) {
-    return [`icon-button-${mods.color || 'default'}`, css$13.root];
+    return [`icon-button-${mods.color || 'default'}`, css$18.root];
 }
 const IconButton = withMods(IconButton$1, applyIconButtonMods);
 
-var css$12 = {"root":"LinkButton-module_root__HlbHi","size-18":"LinkButton-module_size-18__LxiaK","size-24":"LinkButton-module_size-24__xcElR","size-30":"LinkButton-module_size-30__rZ9BD","size-36":"LinkButton-module_size-36__WD3lo","size-42":"LinkButton-module_size-42__iMihL","size-48":"LinkButton-module_size-48__8OfbW","size18":"LinkButton-module_size-18__LxiaK","size24":"LinkButton-module_size-24__xcElR","size30":"LinkButton-module_size-30__rZ9BD","size36":"LinkButton-module_size-36__WD3lo","size42":"LinkButton-module_size-42__iMihL","size48":"LinkButton-module_size-48__8OfbW"};
+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"};
 
 function getIconClass(props) {
     const classList = {
@@ -452,8 +455,8 @@ const defaultSize$9 = '36';
 const allLinkButtonColors = ['primary', 'secondary', 'contrast'];
 function applyLinkButtonMods(mods) {
     return [
-        css$12.root,
-        css$12['size-' + (mods.size || defaultSize$9)],
+        css$17.root,
+        css$17['size-' + (mods.size || defaultSize$9)],
         ...getIconClass(mods),
         `link-button-${mods.color || 'primary'}`,
     ];
@@ -463,23 +466,23 @@ const LinkButton = withMods(Button$1, applyLinkButtonMods, (props) => ({
     clearIcon: systemIcons[props.size || defaultSize$9].clear,
 }));
 
-var css$11 = {"root":"TabButton-module_root__8Z4AH","uui-notification":"TabButton-module_uui-notification__M4BZU","size-36":"TabButton-module_size-36__RA4lK","size-48":"TabButton-module_size-48__tiKgN","size-60":"TabButton-module_size-60__IcM0r","uuiNotification":"TabButton-module_uui-notification__M4BZU","size36":"TabButton-module_size-36__RA4lK","size48":"TabButton-module_size-48__tiKgN","size60":"TabButton-module_size-60__IcM0r"};
+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"};
 
 function applyTabButtonMods(mods) {
     return [
-        css$11.root,
+        css$16.root,
         'informer-default',
-        css$11['size-' + (mods.size || '48')],
-        mods.withNotify && css$11.uuiNotification,
+        css$16['size-' + (mods.size || '48')],
+        mods.withNotify && css$16.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$10 = {"root":"VerticalTabButton-module_root__vL7Lg"};
+var css$15 = {"root":"_6UuXuZ"};
 
 function applyVerticalTabButtonMods() {
-    return [css$10.root];
+    return [css$15.root];
 }
 const VerticalTabButton = withMods(TabButton, applyVerticalTabButtonMods);
 
@@ -515,89 +518,89 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-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$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 SvgCheck12 = function SvgCheck12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$N({
+  return /*#__PURE__*/React.createElement("svg", _extends$M({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$K || (_path$K = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$J || (_path$J = /*#__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$N = /*#__PURE__*/forwardRef(SvgCheck12);
+var ForwardRef$M = /*#__PURE__*/forwardRef(SvgCheck12);
 
-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$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 SvgCheck18 = function SvgCheck18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$M({
+  return /*#__PURE__*/React.createElement("svg", _extends$L({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$J || (_path$J = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$I || (_path$I = /*#__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$M = /*#__PURE__*/forwardRef(SvgCheck18);
+var ForwardRef$L = /*#__PURE__*/forwardRef(SvgCheck18);
 
-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$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 SvgPartlySelect12 = function SvgPartlySelect12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$L({
+  return /*#__PURE__*/React.createElement("svg", _extends$K({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$I || (_path$I = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$H || (_path$H = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M9 5v2H3V5z"
   })));
 };
-var ForwardRef$L = /*#__PURE__*/forwardRef(SvgPartlySelect12);
+var ForwardRef$K = /*#__PURE__*/forwardRef(SvgPartlySelect12);
 
-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$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 SvgPartlySelect18 = function SvgPartlySelect18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$K({
+  return /*#__PURE__*/React.createElement("svg", _extends$J({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$H || (_path$H = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$G || (_path$G = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M14 8v2H4V8z"
   })));
 };
-var ForwardRef$K = /*#__PURE__*/forwardRef(SvgPartlySelect18);
+var ForwardRef$J = /*#__PURE__*/forwardRef(SvgPartlySelect18);
 
-var css$$ = {"root":"Checkbox-module_root__EazHx","size-18":"Checkbox-module_size-18__IUFwO","size-12":"Checkbox-module_size-12__xKb3K","mode-cell":"Checkbox-module_mode-cell__O3Zfg","size18":"Checkbox-module_size-18__IUFwO","size12":"Checkbox-module_size-12__xKb3K","modeCell":"Checkbox-module_mode-cell__O3Zfg"};
+var css$14 = {"root":"f9KDxU","size-18":"_0HLNAf","size-12":"Mj9CmD","mode-cell":"o4uXIT","size18":"_0HLNAf","size12":"Mj9CmD","modeCell":"o4uXIT"};
 
 function applyCheckboxMods(mods) {
     return [
-        css$$.root, css$$['size-' + (mods.size || '18')], css$$['mode-' + (mods.mode || 'form')],
+        css$14.root, css$14['size-' + (mods.size || '18')], css$14['mode-' + (mods.mode || 'form')],
     ];
 }
 const applyUUICheckboxProps = (props) => ({
-    icon: props.size === '12' ? ForwardRef$N : ForwardRef$M,
-    indeterminateIcon: props.size === '12' ? ForwardRef$L : ForwardRef$K,
+    icon: props.size === '12' ? ForwardRef$M : ForwardRef$L,
+    indeterminateIcon: props.size === '12' ? ForwardRef$K : ForwardRef$J,
 });
 const Checkbox = withMods(Checkbox$1, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$_ = {"root":"RadioInput-module_root__bRFVI","size-18":"RadioInput-module_size-18__UYM5r","size-12":"RadioInput-module_size-12__oYoyV","size18":"RadioInput-module_size-18__UYM5r","size12":"RadioInput-module_size-12__oYoyV"};
+var css$13 = {"root":"EREKhe","size-18":"_4Qft9T","size-12":"ICBM98","size18":"_4Qft9T","size12":"ICBM98"};
 
 var _circle;
-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); }
+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 SvgRadioPoint = function SvgRadioPoint(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$J({
+  return /*#__PURE__*/React.createElement("svg", _extends$I({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
@@ -609,18 +612,18 @@ var SvgRadioPoint = function SvgRadioPoint(props, ref) {
     r: 6
   })));
 };
-var ForwardRef$J = /*#__PURE__*/forwardRef(SvgRadioPoint);
+var ForwardRef$I = /*#__PURE__*/forwardRef(SvgRadioPoint);
 
 function applyRadioInputMods(mods) {
-    return [css$_.root, css$_['size-' + (mods.size || '18')]];
+    return [css$13.root, css$13['size-' + (mods.size || '18')]];
 }
-const RadioInput = withMods(RadioInput$1, applyRadioInputMods, () => ({ icon: ForwardRef$J }));
+const RadioInput = withMods(RadioInput$1, applyRadioInputMods, () => ({ icon: ForwardRef$I }));
 
-var css$Z = {"root":"Switch-module_root__-uM9q","size-12":"Switch-module_size-12__3txg-","size-18":"Switch-module_size-18__RiCkg","size-24":"Switch-module_size-24__XRE9d","size12":"Switch-module_size-12__3txg-","size18":"Switch-module_size-18__RiCkg","size24":"Switch-module_size-24__XRE9d"};
+var css$12 = {"root":"-AtOII","size-12":"IWvYBg","size-18":"MHLJ05","size-24":"Wh1fv6","size12":"IWvYBg","size18":"MHLJ05","size24":"Wh1fv6"};
 
 function applySwitchMods(mods) {
     return [
-        'switch-vars', css$Z.root, css$Z['size-' + (mods.size || '18')],
+        'switch-vars', css$12.root, css$12['size-' + (mods.size || '18')],
     ];
 }
 const Switch = withMods(Switch$1, applySwitchMods);
@@ -639,7 +642,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 function __rest(s, e) {
@@ -662,9 +665,14 @@ function __awaiter(thisArg, _arguments, P, generator) {
         function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
-var textInputCss = {"root":"TextInput-module_root__6QJUJ","mode-form":"TextInput-module_mode-form__91FyF","mode-inline":"TextInput-module_mode-inline__vzefw","mode-cell":"TextInput-module_mode-cell__PBof4","size-24":"TextInput-module_size-24__l0haT","size-30":"TextInput-module_size-30__-wR15","size-36":"TextInput-module_size-36__KTftJ","size-42":"TextInput-module_size-42__0U0O7","size-48":"TextInput-module_size-48__IMJgv","modeForm":"TextInput-module_mode-form__91FyF","modeInline":"TextInput-module_mode-inline__vzefw","modeCell":"TextInput-module_mode-cell__PBof4","size24":"TextInput-module_size-24__l0haT","size30":"TextInput-module_size-30__-wR15","size36":"TextInput-module_size-36__KTftJ","size42":"TextInput-module_size-42__0U0O7","size48":"TextInput-module_size-48__IMJgv"};
+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"};
 
 const defaultSize$8 = '36';
 const defaultMode$4 = EditMode.FORM;
@@ -693,131 +701,131 @@ const SearchInput = React__default.forwardRef((props, ref) => {
                 : undefined, type: "search", inputMode: "search", ref: ref }, textInputProps, iEditable))) })));
 });
 
-var css$Y = {"root":"Accordion-module_root__ZEuSB","mode-block":"Accordion-module_mode-block__bs5F0","mode-inline":"Accordion-module_mode-inline__xhedZ","padding-0":"Accordion-module_padding-0__DiVjX","padding-6":"Accordion-module_padding-6__Vvfdz","padding-12":"Accordion-module_padding-12__BtS2A","padding-18":"Accordion-module_padding-18__WdS0b","modeBlock":"Accordion-module_mode-block__bs5F0","modeInline":"Accordion-module_mode-inline__xhedZ","padding0":"Accordion-module_padding-0__DiVjX","padding6":"Accordion-module_padding-6__Vvfdz","padding12":"Accordion-module_padding-12__BtS2A","padding18":"Accordion-module_padding-18__WdS0b"};
+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"};
 
 function applyAccordionMods(mods) {
     return [
-        css$Y.root, css$Y['mode-' + (mods.mode || 'block')], mods.padding && css$Y['padding-' + mods.padding],
+        css$11.root, css$11['mode-' + (mods.mode || 'block')], mods.padding && css$11['padding-' + mods.padding],
     ];
 }
 const Accordion = withMods(Accordion$1, applyAccordionMods, (mods) => ({
     dropdownIcon: mods.dropdownIcon !== null && systemIcons[mods.mode === 'block' ? '60' : '30'].foldingArrow,
 }));
 
-var css$X = {"root":"ControlGroup-module_root__DmQxW"};
+var css$10 = {"root":"ZkXdC8"};
 
-const ControlGroup = withMods(ControlGroup$1, () => [css$X.root]);
+const ControlGroup = withMods(ControlGroup$1, () => [css$10.root]);
 
-var css$W = {"root":"FlexRow-module_root__mHK4u","border-bottom":"FlexRow-module_border-bottom__6xvNn","top-shadow":"FlexRow-module_top-shadow__LW4XM","size-24":"FlexRow-module_size-24__VFGkf","size-30":"FlexRow-module_size-30__ivyen","size-36":"FlexRow-module_size-36__KmXJ6","size-42":"FlexRow-module_size-42__YbRt-","size-48":"FlexRow-module_size-48__g1UXf","padding-6":"FlexRow-module_padding-6__N--3z","padding-12":"FlexRow-module_padding-12__KYt01","padding-18":"FlexRow-module_padding-18__PXf5c","padding-24":"FlexRow-module_padding-24__-T3nu","margin-24":"FlexRow-module_margin-24__lU0ET","margin-12":"FlexRow-module_margin-12__IRWHk","vPadding-12":"FlexRow-module_vPadding-12__Vp8iK","vPadding-18":"FlexRow-module_vPadding-18__CV5Qv","vPadding-24":"FlexRow-module_vPadding-24__6PiHV","vPadding-36":"FlexRow-module_vPadding-36__o0gq8","vPadding-48":"FlexRow-module_vPadding-48__qvhV-","spacing-6":"FlexRow-module_spacing-6__NmXEo","spacing-12":"FlexRow-module_spacing-12__QkuEd","spacing-18":"FlexRow-module_spacing-18__YPHeH","borderBottom":"FlexRow-module_border-bottom__6xvNn","topShadow":"FlexRow-module_top-shadow__LW4XM","size24":"FlexRow-module_size-24__VFGkf","size30":"FlexRow-module_size-30__ivyen","size36":"FlexRow-module_size-36__KmXJ6","size42":"FlexRow-module_size-42__YbRt-","size48":"FlexRow-module_size-48__g1UXf","padding6":"FlexRow-module_padding-6__N--3z","padding12":"FlexRow-module_padding-12__KYt01","padding18":"FlexRow-module_padding-18__PXf5c","padding24":"FlexRow-module_padding-24__-T3nu","margin24":"FlexRow-module_margin-24__lU0ET","margin12":"FlexRow-module_margin-12__IRWHk","vPadding12":"FlexRow-module_vPadding-12__Vp8iK","vPadding18":"FlexRow-module_vPadding-18__CV5Qv","vPadding24":"FlexRow-module_vPadding-24__6PiHV","vPadding36":"FlexRow-module_vPadding-36__o0gq8","vPadding48":"FlexRow-module_vPadding-48__qvhV-","spacing6":"FlexRow-module_spacing-6__NmXEo","spacing12":"FlexRow-module_spacing-12__QkuEd","spacing18":"FlexRow-module_spacing-18__YPHeH"};
+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"};
 
-const FlexCell = withMods(FlexCell$1, (props) => [css$W.flexCell]);
+const FlexCell = withMods(FlexCell$1, () => [css$$.flexCell]);
 
 const FlexRow = withMods(FlexRow$1, (props) => {
     return [
-        css$W.root, props.size !== null && css$W['size-' + (props.size || '36')], props.padding && css$W['padding-' + props.padding], props.vPadding && css$W['vPadding-' + props.vPadding], props.margin && css$W['margin-' + props.margin], props.topShadow && css$W.topShadow, props.borderBottom && css$W.borderBottom, props.spacing && css$W['spacing-' + props.spacing],
+        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],
     ];
 });
 
-var css$V = {"root":"Panel-module_root__D-h8X","margin-24":"Panel-module_margin-24__oQkRN","padding-12":"Panel-module_padding-12__9KnUY","padding-24":"Panel-module_padding-24__YQgfT","shadow":"Panel-module_shadow__4fT6L","margin24":"Panel-module_margin-24__oQkRN","padding12":"Panel-module_padding-12__9KnUY","padding24":"Panel-module_padding-24__YQgfT"};
+var css$_ = {"root":"_75cfoV","margin-24":"r8-hwl","padding-12":"NNNuW5","padding-24":"vHd6oa","shadow":"pVQN-r","margin24":"r8-hwl","padding12":"NNNuW5","padding24":"vHd6oa"};
 
 const Panel = withMods(VPanel, (props) => [
-    'uui-panel', css$V.root, props.shadow && css$V.shadow, props.margin && css$V['margin-' + props.margin],
+    'uui-panel', css$_.root, props.shadow && css$_.shadow, props.margin && css$_['margin-' + props.margin],
 ]);
 
-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 _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 SvgNotificationCheckCircleFill24 = function SvgNotificationCheckCircleFill24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$I({
+  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$G || (_path$G = /*#__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 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
   })));
 };
-var ForwardRef$I = /*#__PURE__*/forwardRef(SvgNotificationCheckCircleFill24);
+var ForwardRef$H = /*#__PURE__*/forwardRef(SvgNotificationCheckCircleFill24);
 
-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$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 SvgNotificationWarningFill24 = function SvgNotificationWarningFill24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$H({
+  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$F || (_path$F = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$E || (_path$E = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
   })));
 };
-var ForwardRef$H = /*#__PURE__*/forwardRef(SvgNotificationWarningFill24);
+var ForwardRef$G = /*#__PURE__*/forwardRef(SvgNotificationWarningFill24);
 
-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$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 SvgNotificationErrorFill24 = function SvgNotificationErrorFill24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$G({
+  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$E || (_path$E = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$D || (_path$D = /*#__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$G = /*#__PURE__*/forwardRef(SvgNotificationErrorFill24);
+var ForwardRef$F = /*#__PURE__*/forwardRef(SvgNotificationErrorFill24);
 
-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$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 SvgNotificationHelpFill24 = function SvgNotificationHelpFill24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$F({
+  return /*#__PURE__*/React.createElement("svg", _extends$E({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$D || (_path$D = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$C || (_path$C = /*#__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$F = /*#__PURE__*/forwardRef(SvgNotificationHelpFill24);
+var ForwardRef$E = /*#__PURE__*/forwardRef(SvgNotificationHelpFill24);
 
-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$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 SvgNavigationClose24$1 = function SvgNavigationClose24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$E({
+  return /*#__PURE__*/React.createElement("svg", _extends$D({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$C || (_path$C = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$B || (_path$B = /*#__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$E = /*#__PURE__*/forwardRef(SvgNavigationClose24$1);
+var ForwardRef$D = /*#__PURE__*/forwardRef(SvgNavigationClose24$1);
 
-var css$U = {"root":"Alert-module_root__vWIgd","icon-wrapper":"Alert-module_icon-wrapper__eCMNq","alert-wrapper":"Alert-module_alert-wrapper__aSltE","action-wrapper":"Alert-module_action-wrapper__fzVI-","action-icon":"Alert-module_action-icon__PUBtv","action-link":"Alert-module_action-link__S0nRl","close-icon":"Alert-module_close-icon__vtbPn","main-path":"Alert-module_main-path__pW0Ya","content":"Alert-module_content__F-yZG","iconWrapper":"Alert-module_icon-wrapper__eCMNq","alertWrapper":"Alert-module_alert-wrapper__aSltE","actionWrapper":"Alert-module_action-wrapper__fzVI-","actionIcon":"Alert-module_action-icon__PUBtv","actionLink":"Alert-module_action-link__S0nRl","closeIcon":"Alert-module_close-icon__vtbPn","mainPath":"Alert-module_main-path__pW0Ya"};
+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"};
 
-const Alert = React.forwardRef((props, ref) => (React.createElement("div", Object.assign({ role: "alert", ref: ref, className: cx(css$U.alertWrapper, `alert-${props.color || 'default'}`, css$U.root, props.cx) }, props.rawProps),
-    React.createElement("div", { className: css$U.mainPath },
-        props.icon && (React.createElement("div", { className: css$U.iconWrapper },
-            React.createElement(IconContainer, { icon: props.icon, cx: css$U.actionIcon }))),
-        React.createElement("div", { className: css$U.content },
+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 },
             props.children,
-            props.actions && (React.createElement("div", { className: css$U.actionWrapper }, props.actions.map((action) => (React.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$U.actionLink, size: "30" })))))),
-        props.onClose && React.createElement(IconButton, { icon: ForwardRef$E, color: "default", onClick: props.onClose, cx: css$U.closeIcon })))));
-const WarningAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$H, color: "warning", ref: ref }, props)));
-const SuccessAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$I, color: "success", ref: ref }, props)));
-const HintAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$F, color: "info", ref: ref }, props)));
-const ErrorAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$G, color: "error", ref: ref }, props)));
+            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() {
@@ -825,16 +833,16 @@ class Dropdown extends React.Component {
     }
 }
 
-var css$T = {"root":"DropdownContainer-module_root__mFFyf"};
+var css$Y = {"root":"_8ToT4D"};
 
 function applyDropdownContainerMods(mods) {
     return [
-        css$T.root, mods.vPadding && `vPadding-${mods.vPadding}`, mods.padding && `padding-${mods.padding}`,
+        css$Y.root, mods.vPadding && `vPadding-${mods.vPadding}`, mods.padding && `padding-${mods.padding}`,
     ];
 }
 const DropdownContainer = withMods(DropdownContainer$1, applyDropdownContainerMods);
 
-var css$S = {"menuRoot":"DropdownMenu-module_menuRoot__DcQwM","bodyRoot":"DropdownMenu-module_bodyRoot__4rx-A","submenuRootItem":"DropdownMenu-module_submenuRootItem__wZojf","iconAfter":"DropdownMenu-module_iconAfter__w4DLS","iconCheck":"DropdownMenu-module_iconCheck__7xO2Q","splitterRoot":"DropdownMenu-module_splitterRoot__ZLjVG","splitter":"DropdownMenu-module_splitter__5OKDD","headerRoot":"DropdownMenu-module_headerRoot__W4lYd","itemRoot":"DropdownMenu-module_itemRoot__rS7Eo","icon":"DropdownMenu-module_icon__IN6EW","link":"DropdownMenu-module_link__bmFZI"};
+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"};
 
 const icons = systemIcons['36'];
 var IDropdownControlKeys;
@@ -873,10 +881,10 @@ function DropdownMenuContainer(props) {
             props.onClose();
         }
     };
-    return (React__default.createElement(FocusLock, { as: "menu", className: css$S.menuRoot, returnFocus: true, autoFocus: false, ref: menuRef, lockProps: { onKeyDown: handleArrowKeys, tabIndex: -1 } },
+    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 } }))));
 }
-const DropdownMenuBody = withMods(DropdownMenuContainer, () => [css$S.bodyRoot], ({ style }) => ({ style }));
+const DropdownMenuBody = withMods(DropdownMenuContainer, () => [css$X.bodyRoot], ({ style }) => ({ style }));
 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;
@@ -897,37 +905,52 @@ 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$S.icon, iconPosition === 'right' ? css$S.iconAfter : css$S.iconBefore) }));
+        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) }));
         return (React__default.createElement(React__default.Fragment, null,
             isIconBefore && iconElement,
-            React__default.createElement(Text$1, { cx: css$S.caption }, caption),
+            React__default.createElement(Text$1, { cx: css$X.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$S.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened);
-    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$S.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$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: {
             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$S.selectedCheckmark })));
+        isSelected && React__default.createElement(IconContainer, { icon: icons.accept, cx: css$X.selectedCheckmark })));
 });
 DropdownMenuButton.displayName = 'DropdownMenuButton';
 function DropdownMenuSplitter(props) {
-    return (React__default.createElement("div", { className: cx$1(props.cx, css$S.splitterRoot) },
-        React__default.createElement("hr", { className: css$S.splitter })));
+    return (React__default.createElement("div", { className: cx$1(props.cx, css$X.splitterRoot) },
+        React__default.createElement("hr", { className: css$X.splitter })));
 }
 function DropdownMenuHeader(props) {
-    return (React__default.createElement("div", { className: cx$1(props.cx, css$S.headerRoot) },
-        React__default.createElement("span", { className: css$S.header }, props.caption)));
+    return (React__default.createElement("div", { className: cx$1(props.cx, css$X.headerRoot) },
+        React__default.createElement("span", { className: css$X.header }, props.caption)));
 }
 function DropdownSubMenu(props) {
-    return (React__default.createElement(Dropdown$1, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: "right-start", renderBody: (dropdownProps) => React__default.createElement(DropdownMenuBody, Object.assign({ closeOnKey: IDropdownControlKeys.LEFT_ARROW }, props, dropdownProps)), renderTarget: (_a) => {
+    const subMenuModifiers = [
+        {
+            name: 'offset',
+            options: {
+                offset: ({ placement }) => {
+                    if (placement === 'right-start') {
+                        return [-6, 0];
+                    }
+                    else {
+                        return [6, 0];
+                    }
+                },
+            },
+        },
+    ];
+    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$S.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
+            return (React__default.createElement(DropdownMenuButton, Object.assign({ cx: cx$1(css$X.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
         } }));
 }
 function DropdownMenuSwitchButton(props) {
@@ -944,16 +967,16 @@ function DropdownMenuSwitchButton(props) {
             onHandleValueChange(!isSelected);
         }
     };
-    return (React__default.createElement(FlexRow$1, { cx: cx$1(props.cx, css$S.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$S.iconBefore }),
-        React__default.createElement(Text$1, { cx: css$S.caption }, caption),
+    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),
         React__default.createElement(FlexSpacer, null),
         React__default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
 }
 
-var css$R = {"root":"Text-module_root__9-pr8"};
+var css$W = {"root":"_4R-was"};
 
-var css$Q = {"line-height-12":"text-layout-module_line-height-12__QQGU-","line-height-18":"text-layout-module_line-height-18__16R3r","line-height-24":"text-layout-module_line-height-24__vI-6P","line-height-30":"text-layout-module_line-height-30__aou0J","font-size-10":"text-layout-module_font-size-10__OLPOz","font-size-12":"text-layout-module_font-size-12__r4xmU","font-size-14":"text-layout-module_font-size-14__XWFeT","font-size-16":"text-layout-module_font-size-16__nEgRV","font-size-18":"text-layout-module_font-size-18__yDUSx","font-size-24":"text-layout-module_font-size-24__QHPEa","v-padding-2":"text-layout-module_v-padding-2__UBv9q","v-padding-3":"text-layout-module_v-padding-3__ZvxzI","v-padding-5":"text-layout-module_v-padding-5__e8AxV","v-padding-6":"text-layout-module_v-padding-6__ZiW3Z","v-padding-8":"text-layout-module_v-padding-8__F0NW1","v-padding-9":"text-layout-module_v-padding-9__iZBVm","v-padding-11":"text-layout-module_v-padding-11__fJ5I9","v-padding-12":"text-layout-module_v-padding-12__Wbxua","v-padding-14":"text-layout-module_v-padding-14__TARL2","v-padding-15":"text-layout-module_v-padding-15__t4xTz","v-padding-17":"text-layout-module_v-padding-17__mVG58","v-padding-18":"text-layout-module_v-padding-18__b4Zdk","v-padding-23":"text-layout-module_v-padding-23__BqIm6","v-padding-24":"text-layout-module_v-padding-24__LM1Rg","lineHeight12":"text-layout-module_line-height-12__QQGU-","lineHeight18":"text-layout-module_line-height-18__16R3r","lineHeight24":"text-layout-module_line-height-24__vI-6P","lineHeight30":"text-layout-module_line-height-30__aou0J","fontSize10":"text-layout-module_font-size-10__OLPOz","fontSize12":"text-layout-module_font-size-12__r4xmU","fontSize14":"text-layout-module_font-size-14__XWFeT","fontSize16":"text-layout-module_font-size-16__nEgRV","fontSize18":"text-layout-module_font-size-18__yDUSx","fontSize24":"text-layout-module_font-size-24__QHPEa","vPadding2":"text-layout-module_v-padding-2__UBv9q","vPadding3":"text-layout-module_v-padding-3__ZvxzI","vPadding5":"text-layout-module_v-padding-5__e8AxV","vPadding6":"text-layout-module_v-padding-6__ZiW3Z","vPadding8":"text-layout-module_v-padding-8__F0NW1","vPadding9":"text-layout-module_v-padding-9__iZBVm","vPadding11":"text-layout-module_v-padding-11__fJ5I9","vPadding12":"text-layout-module_v-padding-12__Wbxua","vPadding14":"text-layout-module_v-padding-14__TARL2","vPadding15":"text-layout-module_v-padding-15__t4xTz","vPadding17":"text-layout-module_v-padding-17__mVG58","vPadding18":"text-layout-module_v-padding-18__b4Zdk","vPadding23":"text-layout-module_v-padding-23__BqIm6","vPadding24":"text-layout-module_v-padding-24__LM1Rg"};
+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"};
 
 const defaultTextSettings = {
     18: { lineHeight: 12, fontSize: 10 },
@@ -966,7 +989,7 @@ const defaultTextSettings = {
 };
 function getTextClasses(props, border) {
     if (props.size === 'none') {
-        return [css$Q['line-height-' + props.lineHeight], css$Q['font-size-' + props.fontSize]];
+        return [css$V['line-height-' + props.lineHeight], css$V['font-size-' + props.fontSize]];
     }
     const setting = {
         size: props.size,
@@ -975,7 +998,7 @@ function getTextClasses(props, border) {
     };
     const vPadding = (+setting.size - +setting.lineHeight - (border ? 2 : 0)) / 2;
     return [
-        css$Q['line-height-' + setting.lineHeight], css$Q['font-size-' + setting.fontSize], css$Q['v-padding-' + vPadding],
+        css$V['line-height-' + setting.lineHeight], css$V['font-size-' + setting.fontSize], css$V['v-padding-' + vPadding],
     ];
 }
 
@@ -988,12 +1011,12 @@ function applyTextMods(mods) {
     return [
         `uui-font-${mods.font || 'regular'}`,
         `uui-text-${mods.color || 'primary'}`,
-        css$R.root,
+        css$W.root,
     ].concat(textClasses);
 }
 const Text = withMods(Text$1, applyTextMods);
 
-var css$P = {"container":"TextPlaceholder-module_container__QQMhe","loading-word":"TextPlaceholder-module_loading-word__Yg5pq","animated-loading":"TextPlaceholder-module_animated-loading__3LZwE","skeleton_loading":"TextPlaceholder-module_skeleton_loading__jXXBE","loadingWord":"TextPlaceholder-module_loading-word__Yg5pq","animatedLoading":"TextPlaceholder-module_animated-loading__3LZwE","skeletonLoading":"TextPlaceholder-module_skeleton_loading__jXXBE"};
+var css$U = {"container":"rl2ylZ","loading-word":"aDyVY7","animated-loading":"w-Csef","skeleton_loading":"ouebvS","loadingWord":"aDyVY7","animatedLoading":"w-Csef","skeletonLoading":"ouebvS"};
 
 const TextPlaceholder = (props) => {
     const pattern = '&nbsp;';
@@ -1005,35 +1028,35 @@ const TextPlaceholder = (props) => {
         }
         return words;
     }, [props.wordsCount]);
-    return (React.createElement("div", Object.assign({ "aria-busy": true, className: css$P.container }, props.rawProps), text.map((it, index) => (React.createElement("span", { key: index, className: cx([
-            props.cx, css$P.loadingWord, !props.isNotAnimated && css$P.animatedLoading,
+    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,
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
-var style = {"typography-16":"RichTextView-module_typography-16__DrhKc","typography-14":"RichTextView-module_typography-14__1oY8c","typography-12":"RichTextView-module_typography-12__4jZjv","typography-uui":"RichTextView-module_typography-uui__neFbE","typography16":"RichTextView-module_typography-16__DrhKc","typography14":"RichTextView-module_typography-14__1oY8c","typography12":"RichTextView-module_typography-12__4jZjv","typographyUui":"RichTextView-module_typography-uui__neFbE"};
+var style = {"typography-16":"_0ufxpM","typography-14":"_5WJ0MW","typography-12":"DOpYmb","typography-uui":"q8DmOv","typography16":"_0ufxpM","typography14":"_5WJ0MW","typography12":"DOpYmb","typographyUui":"q8DmOv"};
 
 const RichTextView = withMods(RichTextView$1, (mods) => [style.typographyUui, style['typography-' + (mods.size || '14')]]);
 
-var css$O = {"modal-blocker":"Modals-module_modal-blocker__Lwee9","animateModalBlocker":"Modals-module_animateModalBlocker__CY-CF","modal":"Modals-module_modal__JUe8A","modal-footer":"Modals-module_modal-footer__SsHtf","border-top":"Modals-module_border-top__1yL5h","modal-header":"Modals-module_modal-header__FNwre","modalBlocker":"Modals-module_modal-blocker__Lwee9","modalFooter":"Modals-module_modal-footer__SsHtf","borderTop":"Modals-module_border-top__1yL5h","modalHeader":"Modals-module_modal-header__FNwre"};
+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"};
 
-const ModalBlocker = withMods(ModalBlocker$1, () => [css$O.modalBlocker]);
-const ModalWindow = withMods(ModalWindow$1, () => [css$O.modal], (props) => ({
+const ModalBlocker = withMods(ModalBlocker$1, () => [css$T.modalBlocker]);
+const ModalWindow = withMods(ModalWindow$1, () => [css$T.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$O.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$T.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$E, onClick: this.props.onClose })))));
+                React.createElement(IconButton, { icon: ForwardRef$D, onClick: this.props.onClose })))));
     }
 }
 class ModalFooter extends React.Component {
     render() {
         return (React.createElement(FlexRow, { spacing: this.props.spacing || '12', cx: [
-                css$O.modalFooter, this.props.borderTop && css$O.borderTop, this.props.cx,
+                css$T.modalFooter, this.props.borderTop && css$T.borderTop, this.props.cx,
             ], padding: this.props.padding || '24', vPadding: this.props.vPadding || '24', rawProps: this.props.rawProps }, this.props.children));
     }
 }
@@ -1121,23 +1144,23 @@ const i18n = Object.assign(Object.assign({}, i18n$1), { dataPickerBody: {
         saveButton: 'Save',
     } });
 
-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$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 SvgCross = function SvgCross(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$D({
+  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$B || (_path$B = /*#__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 12z"
   })));
 };
-var ForwardRef$D = /*#__PURE__*/forwardRef(SvgCross);
+var ForwardRef$C = /*#__PURE__*/forwardRef(SvgCross);
 
-var css$N = {"root":"NotificationCard-module_root__jT-mn","icon-wrapper":"NotificationCard-module_icon-wrapper__89tan","action-wrapper":"NotificationCard-module_action-wrapper__6Z1Zy","action-link":"NotificationCard-module_action-link__O0HeC","close-icon":"NotificationCard-module_close-icon__DTQiT","main-path":"NotificationCard-module_main-path__npnav","content":"NotificationCard-module_content__-vDj4","clear-button":"NotificationCard-module_clear-button__BjWZo","close-wrapper":"NotificationCard-module_close-wrapper__x3PkP","iconWrapper":"NotificationCard-module_icon-wrapper__89tan","actionWrapper":"NotificationCard-module_action-wrapper__6Z1Zy","actionLink":"NotificationCard-module_action-link__O0HeC","closeIcon":"NotificationCard-module_close-icon__DTQiT","mainPath":"NotificationCard-module_main-path__npnav","clearButton":"NotificationCard-module_clear-button__BjWZo","closeWrapper":"NotificationCard-module_close-wrapper__x3PkP"};
+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"};
 
 const NotificationCard = React__default.forwardRef((props, ref) => {
     const notificationCardNode = React__default.useRef(null);
@@ -1152,34 +1175,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$N.root, props.cx), ref: notificationCardNode }, props.rawProps),
-        React__default.createElement("div", { className: css$N.mainPath },
-            props.icon && (React__default.createElement("div", { className: css$N.iconWrapper },
-                React__default.createElement(IconContainer, { icon: props.icon, cx: css$N.actionIcon }))),
-            React__default.createElement("div", { className: css$N.content },
+    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 },
                 props.children,
-                props.actions && (React__default.createElement("div", { className: css$N.actionWrapper }, props.actions.map((action) => (React__default.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$N.actionLink, size: "36", rawProps: action.rawProps })))))),
-            props.onClose && (React__default.createElement("div", { className: css$N.closeWrapper },
-                React__default.createElement(IconButton, { icon: ForwardRef$D, color: "default", onClick: props.onClose, cx: css$N.closeIcon }))))));
+                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 }))))));
 });
-const WarningNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$H, color: "warning" }, props, { ref: ref, cx: props.cx }))));
-const SuccessNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$I, color: "success" }, props, { ref: ref, cx: props.cx }))));
-const HintNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$F, color: "info" }, props, { ref: ref, cx: props.cx }))));
-const ErrorNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$G, color: "error" }, props, { ref: ref, cx: props.cx }))));
+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 }))));
 class ClearNotification extends React__default.Component {
     render() {
-        return (React__default.createElement("div", { className: cx(css$N.notificationWrapper, css$N.clearButton) },
+        return (React__default.createElement("div", { className: cx(css$S.notificationWrapper, css$S.clearButton) },
             React__default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => this.context.uuiNotifications.clearAll() })));
     }
 }
 ClearNotification.contextType = UuiContext;
 
-var css$M = {"root":"Tooltip-module_root__UVOiW"};
+var css$R = {"root":"_957aEn"};
 
 function applyTooltipMods(mods) {
     return [
         `tooltip-${mods.color || 'default'}`,
-        css$M.root,
+        css$R.root,
     ];
 }
 const Tooltip = withMods(Tooltip$1, applyTooltipMods);
@@ -1201,20 +1224,20 @@ class ConfirmationModal extends React.Component {
     }
 }
 
-var css$L = {"root":"LabeledInput-module_root__4Fdte","size-24":"LabeledInput-module_size-24__9ztf2","size-30":"LabeledInput-module_size-30__IKTGK","size-36":"LabeledInput-module_size-36__iyjYl","size-42":"LabeledInput-module_size-42__b51JI","size-48":"LabeledInput-module_size-48__j7ojN","size24":"LabeledInput-module_size-24__9ztf2","size30":"LabeledInput-module_size-30__IKTGK","size36":"LabeledInput-module_size-36__iyjYl","size42":"LabeledInput-module_size-42__b51JI","size48":"LabeledInput-module_size-48__j7ojN"};
+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"};
 
 const defaultSize$7 = '36';
 function applyLabeledInputMods(mods) {
-    return [css$L.root, css$L['size-' + (mods.size || defaultSize$7)]];
+    return [css$Q.root, css$Q['size-' + (mods.size || defaultSize$7)]];
 }
 const LabeledInput = withMods(LabeledInput$1, applyLabeledInputMods, (props) => ({
     Tooltip,
     infoIcon: systemIcons[props.size || defaultSize$7].help,
 }));
 
-var css$K = {"root":"RadioGroup-module_root__JuoNU"};
+var css$P = {"root":"EqKe8Q"};
 
-const RadioGroup = withMods(RadioGroup$1, () => [css$K.root], () => ({ RadioInput }));
+const RadioGroup = withMods(RadioGroup$1, () => [css$P.root], () => ({ RadioInput }));
 
 function applyScrollBarsMods() {
     return [
@@ -1225,33 +1248,33 @@ const ScrollBars = withMods(ScrollBars$1, applyScrollBarsMods);
 
 const VirtualList = VirtualList$1;
 
-var css$J = {"root":"Blocker-module_root__agFVC"};
+var css$O = {"root":"SiQkg5"};
 
-var css$I = {"root":"Spinner-module_root__f6Xhd","uui-spinner":"Spinner-module_uui-spinner__FaqMR","uuiSpinner":"Spinner-module_uui-spinner__FaqMR"};
+var css$N = {"root":"eqwqy3","uui-spinner":"bBunG9","uuiSpinner":"bBunG9"};
 
 function applySpinnerMods() {
-    return [css$I.root];
+    return [css$N.root];
 }
 const Spinner = withMods(Spinner$1, applySpinnerMods);
 
-const Blocker = withMods(Blocker$1, () => [css$J.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__default.createElement(Spinner, null)) }));
+const Blocker = withMods(Blocker$1, () => [css$O.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__default.createElement(Spinner, null)) }));
 
-var css$H = {"root":"CheckboxGroup-module_root__-ZgVR"};
+var css$M = {"root":"IgOq-b"};
 
-const CheckboxGroup = withMods(CheckboxGroup$1, () => [css$H.root], () => ({ CheckboxInput: Checkbox }));
+const CheckboxGroup = withMods(CheckboxGroup$1, () => [css$M.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$G = {"root":"NumericInput-module_root__LaCbz","size-24":"NumericInput-module_size-24__2wCl2","size-30":"NumericInput-module_size-30__KKIjs","size-36":"NumericInput-module_size-36__zZyD8","size-42":"NumericInput-module_size-42__57zoL","size-48":"NumericInput-module_size-48__CyphK","mode-form":"NumericInput-module_mode-form__efp9H","mode-cell":"NumericInput-module_mode-cell__zBYG8","size24":"NumericInput-module_size-24__2wCl2","size30":"NumericInput-module_size-30__KKIjs","size36":"NumericInput-module_size-36__zZyD8","size42":"NumericInput-module_size-42__57zoL","size48":"NumericInput-module_size-48__CyphK","modeForm":"NumericInput-module_mode-form__efp9H","modeCell":"NumericInput-module_mode-cell__zBYG8"};
+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"};
 
 const defaultSize$6 = '36';
 const defaultMode$3 = EditMode.FORM;
 function applyNumericInputMods(mods) {
     return [
-        textInputCss.root, css$G.root, css$G['size-' + (mods.size || defaultSize$6)], textInputCss['size-' + (mods.size || defaultSize$6)], textInputCss['mode-' + (mods.mode || defaultMode$3)],
+        textInputCss.root, css$L.root, css$L['size-' + (mods.size || defaultSize$6)], textInputCss['size-' + (mods.size || defaultSize$6)], textInputCss['mode-' + (mods.mode || defaultMode$3)],
     ];
 }
 const NumericInput = withMods(NumericInput$1, applyNumericInputMods, (props) => {
@@ -1264,13 +1287,13 @@ const NumericInput = withMods(NumericInput$1, applyNumericInputMods, (props) =>
     });
 });
 
-var css$F = {"root":"TextArea-module_root__ZxqP5","mode-form":"TextArea-module_mode-form__Ga1yd","mode-cell":"TextArea-module_mode-cell__0XUCG","mode-inline":"TextArea-module_mode-inline__6z5qh","size-24":"TextArea-module_size-24__MU1XV","size-30":"TextArea-module_size-30__BO2Wu","size-36":"TextArea-module_size-36__FnzVT","size-42":"TextArea-module_size-42__PBASB","size-48":"TextArea-module_size-48__RRL-P","modeForm":"TextArea-module_mode-form__Ga1yd","modeCell":"TextArea-module_mode-cell__0XUCG","modeInline":"TextArea-module_mode-inline__6z5qh","size24":"TextArea-module_size-24__MU1XV","size30":"TextArea-module_size-30__BO2Wu","size36":"TextArea-module_size-36__FnzVT","size42":"TextArea-module_size-42__PBASB","size48":"TextArea-module_size-48__RRL-P"};
+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"};
 
 const defaultSize$5 = '36';
 const defaultMode$2 = EditMode.FORM;
 function applyTextAreaMods(mods) {
     return [
-        css$F.root, css$F['size-' + (mods.size || defaultSize$5)], css$F['mode-' + (mods.mode || defaultMode$2)],
+        css$K.root, css$K['size-' + (mods.size || defaultSize$5)], css$K['mode-' + (mods.mode || defaultMode$2)],
     ];
 }
 const TextArea = withMods(TextArea$1, applyTextAreaMods, (props) => ({
@@ -1278,14 +1301,162 @@ const TextArea = withMods(TextArea$1, applyTextAreaMods, (props) => ({
     maxLength: props.mode === EditMode.CELL ? undefined : props.maxLength,
 }));
 
-var css$E = {"root":"DatePicker-module_root__n83qL"};
+var css$J = {"container":"X3dVi9"};
+
+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); }
+var SvgNavigationChevronLeft18 = function SvgNavigationChevronLeft18(props, ref) {
+  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$z || (_path$z = /*#__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 _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 SvgNavigationChevronRight18 = function SvgNavigationChevronRight18(props, ref) {
+  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$y || (_path$y = /*#__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);
+
+const uuiHeader = {
+    container: 'uui-datepickerheader-container',
+    header: 'uui-datepickerheader-header',
+    navTitle: 'uui-datepickerheader-nav-title',
+    navIconRight: 'uui-datepickerheader-nav-icon-right',
+    navIconLeft: 'uui-datepickerheader-nav-icon-left',
+};
+function DatePickerHeader(props) {
+    var _a, _b;
+    const getPrevMonthFromCurrent = (currentDate) => {
+        return currentDate.subtract(1, 'month');
+    };
+    const getNextMonthFromCurrent = (currentDate) => {
+        return currentDate.add(1, 'month');
+    };
+    const getPrevYearFromCurrent = (currentDate) => {
+        return currentDate.subtract(1, 'year');
+    };
+    const getNextYearFromCurrent = (currentDate) => {
+        return currentDate.add(1, 'year');
+    };
+    const getPrevListYearFromCurrent = (currentDate) => {
+        return currentDate.subtract(16, 'year');
+    };
+    const getNextListYearFromCurrent = (currentDate) => {
+        return currentDate.add(16, 'year');
+    };
+    const onLeftNavigationArrow = () => {
+        switch (props.value.view) {
+            case 'DAY_SELECTION':
+                props.onValueChange(Object.assign(Object.assign({}, props.value), { displayedDate: getPrevMonthFromCurrent(props.value.displayedDate) }));
+                break;
+            case 'MONTH_SELECTION':
+                props.onValueChange(Object.assign(Object.assign({}, props.value), { displayedDate: getPrevYearFromCurrent(props.value.displayedDate) }));
+                break;
+            case 'YEAR_SELECTION':
+                props.onValueChange(Object.assign(Object.assign({}, props.value), { displayedDate: getPrevListYearFromCurrent(props.value.displayedDate) }));
+                break;
+        }
+    };
+    const onRightNavigationArrow = () => {
+        switch (props.value.view) {
+            case 'DAY_SELECTION':
+                props.onValueChange(Object.assign(Object.assign({}, props.value), { displayedDate: getNextMonthFromCurrent(props.value.displayedDate) }));
+                break;
+            case 'MONTH_SELECTION':
+                props.onValueChange(Object.assign(Object.assign({}, props.value), { displayedDate: getNextYearFromCurrent(props.value.displayedDate) }));
+                break;
+            case 'YEAR_SELECTION':
+                props.onValueChange(Object.assign(Object.assign({}, props.value), { displayedDate: getNextListYearFromCurrent(props.value.displayedDate) }));
+                break;
+        }
+    };
+    const onCaptionClick = (view) => {
+        let nextView;
+        switch (view) {
+            case 'DAY_SELECTION':
+                nextView = 'MONTH_SELECTION';
+                break;
+            case 'MONTH_SELECTION':
+                nextView = 'YEAR_SELECTION';
+                break;
+            case 'YEAR_SELECTION':
+                nextView = 'DAY_SELECTION';
+                break;
+        }
+        props.onValueChange(Object.assign(Object.assign({}, props.value), { view: nextView }));
+    };
+    const title = React.useMemo(() => {
+        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) },
+        React.createElement("header", { className: uuiHeader.header },
+            React.createElement(Button, { icon: ForwardRef$B, 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() }))));
+}
+
+var css$I = {"root":"mB6uW5"};
 
-var calendarCss = {"root":"Calendar-module_root__ldDAb"};
+function applyDateSelectionMods() {
+    return [css$I.root];
+}
+const Calendar = withMods(Calendar$1, applyDateSelectionMods);
 
-function applyDatePickerBodyMods() {
-    return [css$E.root, calendarCss.root];
+dayjs.extend(updateLocale);
+const uuiDatePickerBody = {
+    wrapper: 'uui-datepickerBody-wrapper',
+    separator: 'uui-datepickerBody-separator',
+};
+class DatePickerBody extends DatePickerBodyBase {
+    constructor(props) {
+        super(props);
+        this.onDayClick = (day) => {
+            if (!this.props.filter || this.props.filter(day)) {
+                this.props.setSelectedDate(day.format(valueFormat));
+            }
+            this.props.changeIsOpen && this.props.changeIsOpen(false);
+        };
+        this.getView = () => {
+            var _a;
+            switch ((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.view) {
+                case 'MONTH_SELECTION':
+                    return (React.createElement(MonthSelection, { selectedDate: dayjs(this.props.value.selectedDate), value: this.props.value.displayedDate, onValueChange: this.onMonthClick }));
+                case 'YEAR_SELECTION':
+                    return (React.createElement(YearSelection, { selectedDate: dayjs(this.props.value.selectedDate), value: this.props.value.displayedDate, onValueChange: this.onYearClick }));
+                case 'DAY_SELECTION':
+                    return (React.createElement(Calendar, { value: dayjs(this.props.value.selectedDate), onValueChange: this.onDayClick, displayedDate: this.props.value.displayedDate, filter: this.props.filter, getDayCX: this.props.getDayCX, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday }));
+            }
+        };
+        this.renderDatePicker = () => {
+            return (React.createElement("div", { className: cx$1(uuiDatePickerBody.wrapper, this.props.cx) },
+                React.createElement(DatePickerHeader, { value: this.props.value, onValueChange: (newValue) => this.props.setDisplayedDateAndView(newValue.displayedDate, newValue.view) }),
+                this.getView()));
+        };
+        dayjs.locale('en');
+        dayjs.updateLocale(i18n$2.datePicker.locale, { weekStart: 1 });
+    }
 }
-const DatePickerBody = withMods(DatePickerBody$1, applyDatePickerBodyMods, () => ({ navIconLeft: ForwardRef$11, navIconRight: ForwardRef$11 }));
 
 const defaultMode$1 = EditMode.FORM;
 class DatePicker extends BaseDatePicker {
@@ -1293,6 +1464,17 @@ class DatePicker extends BaseDatePicker {
         super(...arguments);
         this.renderInput = (props) => {
             var _a;
+            if (process.env.NODE_ENV !== "production") {
+                if (this.props.size === '48') {
+                    devLogger.warnAboutDeprecatedPropValue({
+                        component: 'DatePicker',
+                        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, isDropdown: false, cx: cx$1(this.props.inputCx, this.state.isOpen && uuiMod.focus), icon: this.props.mode !== EditMode.CELL && systemIcons[this.props.size || '36'].calendar, iconPosition: this.props.iconPosition || 'left', placeholder: this.props.placeholder ? this.props.placeholder : this.getFormat(), size: this.props.size || '36', value: this.state.inputValue, onValueChange: this.handleInputChange, onCancel: this.props.disableClear || !this.state.inputValue ? undefined : this.handleCancel, isInvalid: this.props.isInvalid, isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, tabIndex: this.props.isReadonly || this.props.isDisabled ? -1 : 0, onFocus: this.handleFocus, onBlur: this.handleBlur, mode: this.props.mode || defaultMode$1, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.input })));
         };
     }
@@ -1304,26 +1486,175 @@ class DatePicker extends BaseDatePicker {
     }
 }
 
-function applyDateSelectionMods() {
-    return [calendarCss.root];
-}
-const Calendar = withMods(Calendar$1, applyDateSelectionMods);
+var css$H = {"root":"-K5IC3"};
 
-var rangeCss = {"root":"RangeDatePickerBody-module_root__9hfbE"};
+function applyCalendarPresetsMods() {
+    return [css$H.root];
+}
+const CalendarPresets = withMods(CalendarPresets$1, applyCalendarPresetsMods, () => ({}));
 
-var calendarPresetsCss = {"root":"CalendarPresets-module_root__wSJa2"};
+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"};
 
-function applyRangeDatePickerBodyMods() {
-    return [
-        css$E.root, rangeCss.root, calendarCss.root, calendarPresetsCss.root,
-    ];
+dayjs.extend(isoWeek);
+function weekCount(displayedDate) {
+    let days = [];
+    const dayOfLastWeekInPrevMonth = displayedDate.subtract(1, 'month').endOf('month').day();
+    days = days.concat(new Array(dayOfLastWeekInPrevMonth).fill(undefined));
+    // get days of current month
+    days = days.concat(new Array(displayedDate.endOf('month').date()).fill(undefined));
+    return arrayToMatrix(days, 7).length;
+}
+const uuiRangeDatePickerBody = {
+    inRange: 'uui-range-datepicker-in-range',
+    firstDayInRangeWrapper: 'uui-range-datepicker-first-day-in-range-wrapper',
+    lastDayInRangeWrapper: 'uui-range-datepicker-last-day-in-range-wrapper',
+    separator: 'uui-range-datepicker-separator',
+};
+const rangeDatePickerPresets = {
+    today: {
+        name: 'Today',
+        getRange: () => ({ from: dayjs().toString(), to: undefined, order: 1 }),
+    },
+    thisWeek: {
+        name: 'This Week',
+        getRange: () => ({ from: dayjs().startOf('isoWeek').toString(), to: dayjs().endOf('isoWeek').toString(), order: 2 }),
+    },
+    lastWeek: {
+        name: 'Last Week',
+        getRange: () => ({ from: dayjs().startOf('isoWeek').subtract(1, 'week').toString(), to: dayjs().endOf('isoWeek').subtract(1, 'week').toString(), order: 3 }),
+    },
+    thisMonth: {
+        name: 'This Month',
+        getRange: () => ({ from: dayjs().startOf('month').toString(), to: dayjs().endOf('month').toString(), order: 4 }),
+    },
+    lastMonth: {
+        name: 'Last Month',
+        getRange: () => ({ from: dayjs().startOf('month').subtract(1, 'month').toString(), to: dayjs().subtract(1, 'month').endOf('month').toString(), order: 5 }),
+    },
+    last3Month: {
+        name: 'Last 3 Months',
+        getRange: () => ({ from: dayjs().startOf('month').subtract(3, 'month').toString(), to: dayjs().subtract(1, 'month').endOf('month').toString(), order: 5 }),
+    },
+    thisYear: {
+        name: 'This Year',
+        getRange: () => ({ from: dayjs().startOf('year').toString(), to: dayjs().endOf('year').toString(), order: 7 }),
+    },
+    lastYear: {
+        name: 'Last Year',
+        getRange: () => ({ from: dayjs().startOf('year').subtract(1, 'year').toString(), to: dayjs().subtract(1, 'year').endOf('year').toString(), order: 8 }),
+    },
+};
+class RangeDatePickerBody extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            activePart: null,
+        };
+        this.getDayCX = (day) => {
+            var _a, _b;
+            const dayValue = day.valueOf();
+            const fromValue = ((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.selectedDate.from) ? dayjs(this.props.value.selectedDate.from).valueOf() : null;
+            const toValue = ((_b = this.props.value) === null || _b === void 0 ? void 0 : _b.selectedDate.to) ? dayjs(this.props.value.selectedDate.to).valueOf() : null;
+            const inRange = dayValue >= fromValue && dayValue <= toValue && fromValue !== toValue && fromValue && toValue;
+            const isFirst = dayValue === fromValue;
+            const isLast = dayValue === toValue;
+            return [
+                inRange && uuiRangeDatePickerBody.inRange,
+                isFirst && uuiRangeDatePickerBody.firstDayInRangeWrapper,
+                !inRange && isFirst && uuiRangeDatePickerBody.lastDayInRangeWrapper,
+                isLast && uuiRangeDatePickerBody.lastDayInRangeWrapper,
+                !inRange && isLast && uuiRangeDatePickerBody.firstDayInRangeWrapper,
+                (dayValue === fromValue || dayValue === toValue) && uuiDaySelection.selectedDay,
+            ];
+        };
+        this.getFromValue = () => {
+            var _a;
+            return Object.assign(Object.assign({}, this.props.value), { view: this.state.activePart === 'from' ? this.props.value.view : 'DAY_SELECTION', selectedDate: (_a = this.props.value) === null || _a === void 0 ? void 0 : _a.selectedDate.from });
+        };
+        this.getToValue = () => {
+            if (!this.props.value)
+                return;
+            return Object.assign(Object.assign({}, this.props.value), { view: this.state.activePart === 'to' ? this.props.value.view : 'DAY_SELECTION', displayedDate: this.props.value.displayedDate.add(1, 'month'), selectedDate: this.props.value.selectedDate.to });
+        };
+        this.renderPresets = () => {
+            return (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: uuiRangeDatePickerBody.separator }),
+                React.createElement(CalendarPresets, { forwardedRef: this.props.forwardedRef, onPresetSet: (presetVal) => {
+                        this.props.onValueChange({
+                            view: 'DAY_SELECTION',
+                            selectedDate: { from: dayjs(presetVal.from).format(valueFormat), to: dayjs(presetVal.to).format(valueFormat) },
+                            displayedDate: dayjs(presetVal.from),
+                        });
+                        this.props.changeIsOpen(false);
+                    }, presets: this.props.presets })));
+        };
+        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" },
+                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 }),
+                            ((_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 }))),
+                        this.props.presets && this.renderPresets()),
+                    this.props.renderFooter && this.props.renderFooter())));
+        };
+    }
+    getRange(selectedDate) {
+        const newRange = { from: null, to: null };
+        const currentRange = this.props.value.selectedDate;
+        if (!this.props.filter || this.props.filter(dayjs(selectedDate))) {
+            if (this.props.focusPart === 'from') {
+                if (dayjs(selectedDate).valueOf() <= dayjs(currentRange.to).valueOf()) {
+                    newRange.from = selectedDate;
+                    newRange.to = currentRange.to;
+                }
+                else {
+                    newRange.from = selectedDate;
+                    newRange.to = null;
+                }
+            }
+            if (this.props.focusPart === 'to') {
+                if (!currentRange.from) {
+                    newRange.to = selectedDate;
+                }
+                else if (dayjs(selectedDate).valueOf() >= dayjs(currentRange.from).valueOf()) {
+                    newRange.from = currentRange.from;
+                    newRange.to = selectedDate;
+                }
+                else {
+                    newRange.from = selectedDate;
+                    newRange.to = null;
+                }
+            }
+        }
+        return newRange;
+    }
+    setSelectedDate(selectedDate) {
+        const range = this.getRange(selectedDate);
+        this.props.onValueChange(Object.assign(Object.assign({}, this.props.value), { selectedDate: range }));
+        if (range.from && range.to && this.props.focusPart === 'to') {
+            this.props.changeIsOpen(false);
+        }
+    }
+    setDisplayedDateAndView(displayedDate, view, part) {
+        this.setState({ activePart: part });
+        this.props.onValueChange({
+            selectedDate: this.props.value.selectedDate,
+            displayedDate: part === 'from' ? displayedDate : displayedDate.subtract(1, 'month'),
+            view: view,
+        });
+    }
+    render() {
+        return (React.createElement("div", Object.assign({ className: cx$1(css$G.root, uuiDatePickerBodyBase.container, this.props.cx) }, this.props.rawProps), this.renderDatePicker()));
+    }
 }
-const RangeDatePickerBody = withMods(RangeDatePickerBody$1, applyRangeDatePickerBodyMods, () => ({
-    navIconLeft: ForwardRef$11,
-    navIconRight: ForwardRef$11,
-}));
 
-var css$D = {"dropdown-container":"RangeDatePicker-module_dropdown-container__EFIZT","container":"RangeDatePicker-module_container__H7FRF","button-group":"RangeDatePicker-module_button-group__Stksa","date-input":"RangeDatePicker-module_date-input__as2iX","size-24":"RangeDatePicker-module_size-24__yXj-X","size-30":"RangeDatePicker-module_size-30__4sP-J","size-36":"RangeDatePicker-module_size-36__j5YP2","size-42":"RangeDatePicker-module_size-42__nGrsk","size-48":"RangeDatePicker-module_size-48__WKbFa","date-input-group":"RangeDatePicker-module_date-input-group__lJSYu","separator":"RangeDatePicker-module_separator__OZtZc","mode-form":"RangeDatePicker-module_mode-form__KkODO","mode-cell":"RangeDatePicker-module_mode-cell__YvZw5","dropdownContainer":"RangeDatePicker-module_dropdown-container__EFIZT","buttonGroup":"RangeDatePicker-module_button-group__Stksa","dateInput":"RangeDatePicker-module_date-input__as2iX","size24":"RangeDatePicker-module_size-24__yXj-X","size30":"RangeDatePicker-module_size-30__4sP-J","size36":"RangeDatePicker-module_size-36__j5YP2","size42":"RangeDatePicker-module_size-42__nGrsk","size48":"RangeDatePicker-module_size-48__WKbFa","dateInputGroup":"RangeDatePicker-module_date-input-group__lJSYu","modeForm":"RangeDatePicker-module_mode-form__KkODO","modeCell":"RangeDatePicker-module_mode-cell__YvZw5"};
+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"};
 
 const defaultValue = { from: null, to: null };
 class RangeDatePicker extends BaseRangeDatePicker {
@@ -1331,35 +1662,46 @@ class RangeDatePicker extends BaseRangeDatePicker {
         super(...arguments);
         this.renderInput = (props) => {
             var _a, _b;
-            return (React.createElement("div", { className: cx(this.props.inputCx, css$D.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$D.dateInput, css$D['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$D.separator }),
-                React.createElement(TextInput, { cx: cx(css$D.dateInput, css$D['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 })));
+            if (process.env.NODE_ENV !== "production") {
+                if (this.props.size === '48') {
+                    devLogger.warnAboutDeprecatedPropValue({
+                        component: 'RangeDatePicker',
+                        propName: 'size',
+                        propValue: this.props.size,
+                        propValueUseInstead: '42',
+                        condition: () => ['48'].indexOf(this.props.size) !== -1,
+                    });
+                }
+            }
+            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 })));
         };
     }
     renderBody(props) {
         var _a;
-        return (React.createElement(DropdownContainer, Object.assign({}, props, { cx: cx(css$D.dropdownContainer) }),
+        return (React.createElement(DropdownContainer, Object.assign({}, props, { cx: cx(css$F.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$C = {"blocker":"DropMarker-module_blocker__sFMsF","marker":"DropMarker-module_marker__WOsjE","top":"DropMarker-module_top__dGv3h","bottom":"DropMarker-module_bottom__vlan6","left":"DropMarker-module_left__mKt8q","right":"DropMarker-module_right__OP21L","inside":"DropMarker-module_inside__g6Q5c"};
+var css$E = {"blocker":"UP8Z6M","marker":"rg5TRj","top":"YIyHSI","bottom":"-Z1eDb","left":"mzhzuK","right":"_8p8pbV","inside":"ZUW7Os"};
 
 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$C.blocker }),
+            this.props.enableBlocker && React.createElement("div", { className: css$E.blocker }),
             React.createElement("div", { className: cx([
-                    css$C.marker, css$C[this.props.position],
+                    css$E.marker, css$E[this.props.position],
                     (_a = this.props) === null || _a === void 0 ? void 0 : _a.cx,
                 ]) }))) : null;
     }
 }
 
-var css$B = {"body":"DataPickerBody-module_body__CMMVY","modal":"DataPickerBody-module_modal__JRYQ-","search-wrapper":"DataPickerBody-module_search-wrapper__W8zQV","checkbox":"DataPickerBody-module_checkbox__e63-h","no-found-size-24":"DataPickerBody-module_no-found-size-24__wCw8P","no-found-size-30":"DataPickerBody-module_no-found-size-30__6mOIm","no-found-size-36":"DataPickerBody-module_no-found-size-36__Jr9Ns","no-found-size-42":"DataPickerBody-module_no-found-size-42__4QTkU","searchWrapper":"DataPickerBody-module_search-wrapper__W8zQV","noFoundSize24":"DataPickerBody-module_no-found-size-24__wCw8P","noFoundSize30":"DataPickerBody-module_no-found-size-30__6mOIm","noFoundSize36":"DataPickerBody-module_no-found-size-36__Jr9Ns","noFoundSize42":"DataPickerBody-module_no-found-size-42__4QTkU"};
+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"};
 
 class DataPickerBody extends PickerBodyBase {
     constructor() {
@@ -1371,16 +1713,16 @@ class DataPickerBody extends PickerBodyBase {
         if (this.props.renderNotFound) {
             return this.props.renderNotFound();
         }
-        return (React__default.createElement(FlexCell$1, { cx: css$B[`no-found-size-${this.props.searchSize || 36}`], grow: 1, textAlign: "center" },
+        return (React__default.createElement(FlexCell$1, { cx: css$D[`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$B.searchWrapper },
+            this.showSearch() && (React__default.createElement("div", { key: "search", className: css$D.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$B.body, css$B[this.props.editMode], css$B[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$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()))));
     }
 }
 
@@ -1403,7 +1745,9 @@ function DataPickerFooterImpl(props) {
         if (!e.shiftKey && e.key === 'Tab')
             e.preventDefault();
     };
-    return (React__default.createElement(FlexRow, { padding: "12" },
+    // show always for multi picker and for single only in case if search not disabled.
+    const shouldShowFooter = isSinglePicker ? !props.disableClear : true;
+    return shouldShowFooter && (React__default.createElement(FlexRow, { padding: "12" },
         !isSinglePicker && (React__default.createElement(Switch, { size: switchSize, value: showSelected.value, isDisabled: !hasSelection, onValueChange: showSelected.onValueChange, label: i18n.pickerInput.showOnlySelectedLabel })),
         React__default.createElement(FlexSpacer, null),
         React__default.createElement(FlexCell, { width: "auto", alignSelf: "center" },
@@ -1412,37 +1756,37 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = React__default.memo(DataPickerFooterImpl);
 
-var css$A = {"header":"DataPickerHeader-module_header__TkXlz","close":"DataPickerHeader-module_close__Tiy0j"};
+var css$C = {"header":"ZyxGTe","close":"_1d324m"};
 
-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$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 SvgNavigationClose24 = function SvgNavigationClose24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$C({
+  return /*#__PURE__*/React.createElement("svg", _extends$z({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$A || (_path$A = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$x || (_path$x = /*#__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$C = /*#__PURE__*/forwardRef(SvgNavigationClose24);
+var ForwardRef$z = /*#__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$A.header },
+    return (React__default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: css$C.header },
         React__default.createElement(Text, { size: "48", font: "semibold" }, title),
-        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$A.close })));
+        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 })));
 };
 const DataPickerHeader = React__default.memo(DataPickerHeaderImpl);
 
 var _defs$1, _use;
-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); }
+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 SvgTreeFoldingArrow = function SvgTreeFoldingArrow(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$B({
+  return /*#__PURE__*/React.createElement("svg", _extends$y({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
@@ -1460,19 +1804,19 @@ var SvgTreeFoldingArrow = function SvgTreeFoldingArrow(props, ref) {
     fillRule: "evenodd"
   })));
 };
-var ForwardRef$B = /*#__PURE__*/forwardRef(SvgTreeFoldingArrow);
+var ForwardRef$y = /*#__PURE__*/forwardRef(SvgTreeFoldingArrow);
 
-var css$z = {"cell":"DataTableCell-module_cell__9v8pk","wrapper":"DataTableCell-module_wrapper__u7ey2","align-widgets-top":"DataTableCell-module_align-widgets-top__-ZRCt","size-24":"DataTableCell-module_size-24__kAlRh","folding-arrow":"DataTableCell-module_folding-arrow__M3UXW","size-30":"DataTableCell-module_size-30__gy4mJ","size-36":"DataTableCell-module_size-36__t3pLn","size-42":"DataTableCell-module_size-42__IXd3P","size-48":"DataTableCell-module_size-48__jCi7Y","size-60":"DataTableCell-module_size-60__O0Mmg","align-widgets-center":"DataTableCell-module_align-widgets-center__l51gX","padding-12":"DataTableCell-module_padding-12__xRP39","padding-24":"DataTableCell-module_padding-24__0aJJb","padding-left-12":"DataTableCell-module_padding-left-12__XINwI","padding-left-24":"DataTableCell-module_padding-left-24__79hBi","padding-right-24":"DataTableCell-module_padding-right-24__BA0Z0","drag-handle":"DataTableCell-module_drag-handle__NiIxM","checkbox":"DataTableCell-module_checkbox__CAENf","indent":"DataTableCell-module_indent__qWJ5l","folding-arrow-12":"DataTableCell-module_folding-arrow-12__YGg1P","folding-arrow-18":"DataTableCell-module_folding-arrow-18__E0R4O","icon-container":"DataTableCell-module_icon-container__IcTL1","alignWidgetsTop":"DataTableCell-module_align-widgets-top__-ZRCt","size24":"DataTableCell-module_size-24__kAlRh","foldingArrow":"DataTableCell-module_folding-arrow__M3UXW","size30":"DataTableCell-module_size-30__gy4mJ","size36":"DataTableCell-module_size-36__t3pLn","size42":"DataTableCell-module_size-42__IXd3P","size48":"DataTableCell-module_size-48__jCi7Y","size60":"DataTableCell-module_size-60__O0Mmg","alignWidgetsCenter":"DataTableCell-module_align-widgets-center__l51gX","padding12":"DataTableCell-module_padding-12__xRP39","padding24":"DataTableCell-module_padding-24__0aJJb","paddingLeft12":"DataTableCell-module_padding-left-12__XINwI","paddingLeft24":"DataTableCell-module_padding-left-24__79hBi","paddingRight24":"DataTableCell-module_padding-right-24__BA0Z0","dragHandle":"DataTableCell-module_drag-handle__NiIxM","foldingArrow12":"DataTableCell-module_folding-arrow-12__YGg1P","foldingArrow18":"DataTableCell-module_folding-arrow-18__E0R4O","iconContainer":"DataTableCell-module_icon-container__IcTL1"};
+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"};
 
 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$z.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$z.checkbox, tabIndex: props.tabIndex, size: additionalItemSize, value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => row.onCheck(row), isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
-        row.indent > 0 && (React.createElement("div", { key: "fold", className: css$z.indent, style: { marginLeft: (row.indent - 1) * 24 } }, row.isFoldable && (React.createElement(IconContainer, { key: "icon", icon: ForwardRef$B, cx: [
-                css$z.foldingArrow, css$z[`folding-arrow-${additionalItemSize}`], uuiMarkers.clickable, css$z.iconContainer,
+        ((_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,
             ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row) }))))));
 }
 function DataTableCell(props) {
@@ -1490,18 +1834,18 @@ function DataTableCell(props) {
     props.cx = [
         'data-table-cell',
         props.cx,
-        css$z.cell,
-        css$z['size-' + (props.size || '36')],
-        css$z[`padding-${props.padding || (isEditable && !props.rowProps.isLoading && '0') || '12'}`],
-        props.isFirstColumn && css$z[`padding-left-${props.padding || '24'}`],
-        props.isLastColumn && css$z['padding-right-24'],
-        css$z[`align-widgets-${props.alignActions || 'top'}`],
+        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'}`],
         (props.border || isEditable) && 'uui-dt-vertical-cell-border',
     ];
     return React.createElement(DataTableCell$1, Object.assign({}, props));
 }
 
-var css$y = {"root":"DataTableRow-module_root__ZEmTg","size-24":"DataTableRow-module_size-24__K9BAN","size-30":"DataTableRow-module_size-30__4Jqif","size-36":"DataTableRow-module_size-36__8Z9CM","size-48":"DataTableRow-module_size-48__hFy9V","size-60":"DataTableRow-module_size-60__JmXZx","size24":"DataTableRow-module_size-24__K9BAN","size30":"DataTableRow-module_size-30__4Jqif","size36":"DataTableRow-module_size-36__8Z9CM","size48":"DataTableRow-module_size-48__hFy9V","size60":"DataTableRow-module_size-60__JmXZx"};
+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"};
 
 // 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.
@@ -1513,154 +1857,137 @@ const renderDropMarkers = (props) => React.createElement(DropMarker, Object.assi
 const propsMods = { renderCell, renderDropMarkers };
 const DataTableRow = withMods(DataTableRow$1, ({ borderBottom = true, size }) => {
     return [
-        css$y.root, borderBottom && 'uui-dt-row-border', css$y['size-' + (size || '36')],
+        css$A.root, borderBottom && 'uui-dt-row-border', css$A['size-' + (size || '36')],
     ];
 }, () => propsMods);
 
-var css$x = {"header-cell":"DataTableHeaderRow-module_header-cell__-GovH","config-icon":"DataTableHeaderRow-module_config-icon__7pmnq","headerCell":"DataTableHeaderRow-module_header-cell__-GovH","configIcon":"DataTableHeaderRow-module_config-icon__7pmnq"};
+var css$z = {"header-cell":"_8imNSh","config-icon":"HkGVuX","headerCell":"_8imNSh","configIcon":"HkGVuX"};
 
-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 _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 SvgActionSettings18 = function SvgActionSettings18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$A({
+  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$z || (_path$z = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$w || (_path$w = /*#__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$A = /*#__PURE__*/forwardRef(SvgActionSettings18);
+var ForwardRef$x = /*#__PURE__*/forwardRef(SvgActionSettings18);
 
-const DataTableHeaderRow = withMods(DataTableHeaderRow$1, (mods) => [css$x.root], (mods) => ({
+const DataTableHeaderRow = withMods(DataTableHeaderRow$1, (mods) => [css$z.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$x.configIcon, color: "default", icon: ForwardRef$A }),
+    renderConfigButton: () => React.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: css$z.configIcon, color: "default", icon: ForwardRef$x }),
 }));
 
-var css$w = {"cell":"DataTableHeaderCell-module_cell__AGrCC","sort-icon":"DataTableHeaderCell-module_sort-icon__cDeMX","dropdown-icon":"DataTableHeaderCell-module_dropdown-icon__anyqy","infoIcon":"DataTableHeaderCell-module_infoIcon__ztuKT","resizable":"DataTableHeaderCell-module_resizable__KE4Ta","size-24":"DataTableHeaderCell-module_size-24__xl3Bc","size-30":"DataTableHeaderCell-module_size-30__eNSl8","size-36":"DataTableHeaderCell-module_size-36__uF7G7","size-42":"DataTableHeaderCell-module_size-42__cyLfW","size-48":"DataTableHeaderCell-module_size-48__fgE-c","padding-left-24":"DataTableHeaderCell-module_padding-left-24__y2KH8","padding-right-24":"DataTableHeaderCell-module_padding-right-24__-XKyz","caption":"DataTableHeaderCell-module_caption__ZOlWT","checkbox":"DataTableHeaderCell-module_checkbox__Mm1wC","icon":"DataTableHeaderCell-module_icon__liZ4c","icon-cell":"DataTableHeaderCell-module_icon-cell__9AUCT","align-right":"DataTableHeaderCell-module_align-right__Hzx-a","align-center":"DataTableHeaderCell-module_align-center__Lfdr4","tooltip-wrapper":"DataTableHeaderCell-module_tooltip-wrapper__ulCpX","cell-tooltip":"DataTableHeaderCell-module_cell-tooltip__JHAxY","upper-case":"DataTableHeaderCell-module_upper-case__AdtWJ","font-size-14":"DataTableHeaderCell-module_font-size-14__RSTks","resize-mark":"DataTableHeaderCell-module_resize-mark__NBp0G","draggable":"DataTableHeaderCell-module_draggable__hz5pE","ghost":"DataTableHeaderCell-module_ghost__-iISU","is-dragged-out":"DataTableHeaderCell-module_is-dragged-out__Qicd4","dnd-marker-left":"DataTableHeaderCell-module_dnd-marker-left__tZ1iw","dnd-marker-right":"DataTableHeaderCell-module_dnd-marker-right__nT0Cc","sortIcon":"DataTableHeaderCell-module_sort-icon__cDeMX","dropdownIcon":"DataTableHeaderCell-module_dropdown-icon__anyqy","size24":"DataTableHeaderCell-module_size-24__xl3Bc","size30":"DataTableHeaderCell-module_size-30__eNSl8","size36":"DataTableHeaderCell-module_size-36__uF7G7","size42":"DataTableHeaderCell-module_size-42__cyLfW","size48":"DataTableHeaderCell-module_size-48__fgE-c","paddingLeft24":"DataTableHeaderCell-module_padding-left-24__y2KH8","paddingRight24":"DataTableHeaderCell-module_padding-right-24__-XKyz","iconCell":"DataTableHeaderCell-module_icon-cell__9AUCT","alignRight":"DataTableHeaderCell-module_align-right__Hzx-a","alignCenter":"DataTableHeaderCell-module_align-center__Lfdr4","tooltipWrapper":"DataTableHeaderCell-module_tooltip-wrapper__ulCpX","cellTooltip":"DataTableHeaderCell-module_cell-tooltip__JHAxY","upperCase":"DataTableHeaderCell-module_upper-case__AdtWJ","fontSize14":"DataTableHeaderCell-module_font-size-14__RSTks","resizeMark":"DataTableHeaderCell-module_resize-mark__NBp0G","isDraggedOut":"DataTableHeaderCell-module_is-dragged-out__Qicd4","dndMarkerLeft":"DataTableHeaderCell-module_dnd-marker-left__tZ1iw","dndMarkerRight":"DataTableHeaderCell-module_dnd-marker-right__nT0Cc"};
+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 _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 _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 SvgTableSwap18 = function SvgTableSwap18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$z({
+  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$y || (_path$y = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M6 1 2 5h3v7h2V5h3L6 1zm7 12V6h-2v7H8l4 4 4-4h-3z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$z = /*#__PURE__*/forwardRef(SvgTableSwap18);
+var ForwardRef$w = /*#__PURE__*/forwardRef(SvgTableSwap18);
 
-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 _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 SvgTableSortAsc18 = function SvgTableSortAsc18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$y({
+  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$x || (_path$x = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M10 6v10H8V6H5l4-4 4 4h-3z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$y = /*#__PURE__*/forwardRef(SvgTableSortAsc18);
+var ForwardRef$v = /*#__PURE__*/forwardRef(SvgTableSortAsc18);
 
-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$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 SvgTableSortDesc18 = function SvgTableSortDesc18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$x({
+  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$w || (_path$w = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M10 12V2H8v10H5l4 4 4-4h-3z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$x = /*#__PURE__*/forwardRef(SvgTableSortDesc18);
+var ForwardRef$u = /*#__PURE__*/forwardRef(SvgTableSortDesc18);
 
-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$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 SvgContentFiltration18 = function SvgContentFiltration18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$w({
+  return /*#__PURE__*/React.createElement("svg", _extends$t({
     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$s || (_path$s = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "m8 14 2 2v-5H8v3zM2 3v2h14V3H2zm6 8h2l6-6H2l6 6z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$w = /*#__PURE__*/forwardRef(SvgContentFiltration18);
+var ForwardRef$t = /*#__PURE__*/forwardRef(SvgContentFiltration18);
 
-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$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 SvgNavigationChevronDown18 = function SvgNavigationChevronDown18(props, ref) {
-  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$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$v = /*#__PURE__*/forwardRef(SvgNavigationChevronDown18);
-
-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$u({
+  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$t || (_path$t = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__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",
+    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$u = /*#__PURE__*/forwardRef(SvgNavigationChevronUp18);
+var ForwardRef$s = /*#__PURE__*/forwardRef(SvgNavigationChevronDown18);
 
-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 SvgNotificationInfoOutline18 = function SvgNotificationInfoOutline18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$t({
+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 SvgNavigationChevronUp18 = function SvgNavigationChevronUp18(props, ref) {
+  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$s || (_path$s = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__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",
+    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$t = /*#__PURE__*/forwardRef(SvgNotificationInfoOutline18);
+var ForwardRef$r = /*#__PURE__*/forwardRef(SvgNavigationChevronUp18);
 
 class DataTableHeaderCell extends React.Component {
     constructor() {
@@ -1670,25 +1997,29 @@ class DataTableHeaderCell extends React.Component {
         };
         this.getTextStyle = () => {
             if (this.props.textCase === 'upper')
-                return css$w.upperCase;
-            return css$w['font-size-14'];
+                return css$y.upperCase;
+            return css$y['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.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 })))));
         };
-        this.getColumnCaption = () => (React.createElement("div", { className: css$w.tooltipWrapper },
-            React.createElement(Tooltip, { trigger: "hover", placement: "bottom-start", renderContent: !this.state.isDropdownOpen && this.props.column.info ? () => this.props.column.info : null, color: "default", cx: css$w.cellTooltip, offset: [-12, 12] },
-                React.createElement("div", { className: cx$1(css$w.iconCell, css$w['align-' + this.props.column.textAlign], uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
-                    React.createElement(Text, { key: "text", lineHeight: "30", fontSize: "14", size: "30", cx: cx$1(css$w.caption, this.getTextStyle(), uuiDataTableHeaderCell.uuiTableHeaderCaption) }, this.props.column.caption),
-                    this.props.column.info && (React.createElement(IconButton, { key: "info", cx: cx$1(css$w.icon, css$w.infoIcon, this.props.sortDirection && css$w.sortIconActive, uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: "secondary", icon: ForwardRef$t })),
-                    this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React.createElement(IconButton, { key: "sort", cx: cx$1(css$w.icon, css$w.sortIcon, this.props.sortDirection && css$w.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$w.icon, !this.props.sortDirection && css$w.filterIcon, uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "default", icon: ForwardRef$w })),
-                    this.props.column.renderFilter && (React.createElement(IconButton, { key: "dropdown", cx: cx$1(css$w.icon, css$w.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$w.checkbox, uuiDataTableHeaderCell.uuiTableHeaderCheckbox) })));
-        this.renderResizeMark = (props) => React.createElement("div", { onMouseDown: props.onResizeStart, className: cx$1(css$w.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$y.checkbox, uuiDataTableHeaderCell.uuiTableHeaderCheckbox) })));
+        this.renderResizeMark = (props) => React.createElement("div", { onMouseDown: props.onResizeStart, className: cx$1(css$y.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$w.cell, css$w['size-' + (this.props.size || '36')], this.props.isFirstColumn && css$w['padding-left-24'], this.props.isLastColumn && css$w['padding-right-24'], this.props.column.cx, this.props.allowColumnsResizing && css$w.resizable, props.isDraggable && css$w.draggable, props.isDragGhost && css$w.ghost, props.isDraggedOut && css$w.isDraggedOut, props.isDndInProgress && css$w['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$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) }),
             this.renderHeaderCheckbox(),
             this.getColumnCaption(),
             this.props.allowColumnsResizing && this.renderResizeMark(props)));
@@ -1725,10 +2056,10 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var _path$r, _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$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$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 SvgEmptyTable = function SvgEmptyTable(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$s({
+  return /*#__PURE__*/React.createElement("svg", _extends$q({
     width: 232,
     height: 180,
     viewBox: "0 0 232 180",
@@ -1737,7 +2068,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     ref: ref
   }, props), /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#a)"
-  }, _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
+  }, _path$p || (_path$p = /*#__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", {
@@ -1863,9 +2194,9 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M0 0h230.897v180H0z"
   })))));
 };
-var ForwardRef$s = /*#__PURE__*/forwardRef(SvgEmptyTable);
+var ForwardRef$q = /*#__PURE__*/forwardRef(SvgEmptyTable);
 
-var css$v = {"sticky-header":"DataTable-module_sticky-header__g-Ods","listContainer":"DataTable-module_listContainer__yR0QP","table":"DataTable-module_table__UPgfH","no-results":"DataTable-module_no-results__0TI-p","no-results-icon":"DataTable-module_no-results-icon__w-p5I","no-results-title":"DataTable-module_no-results-title__QIMfi","stickyHeader":"DataTable-module_sticky-header__g-Ods","noResults":"DataTable-module_no-results__0TI-p","noResultsIcon":"DataTable-module_no-results-icon__w-p5I","noResultsTitle":"DataTable-module_no-results-title__QIMfi"};
+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"};
 
 function DataTable(props) {
     var _a;
@@ -1879,123 +2210,126 @@ 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$v.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$v.noResultsIcon, icon: ForwardRef$s }),
-            React.createElement(Text, { cx: css$v.noResultsTitle, fontSize: "24", lineHeight: "30", color: "primary", font: "semibold" }, i18n.tables.noResultsBlock.title),
+        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),
             React.createElement(Text, { fontSize: "16", lineHeight: "24", font: "regular", color: "primary" }, i18n.tables.noResultsBlock.message)))));
     }, [props.renderNoResultsBlock]);
     const onConfigurationButtonClick = React.useCallback(() => {
+        const configProps = { columns: props.columns, columnsConfig: Object.assign({}, config), defaultConfig };
         uuiModals
             .show((modalProps) => {
-            return (React.createElement(ColumnsConfigurationModal, Object.assign({}, modalProps, { columns: props.columns, columnsConfig: config, defaultConfig: defaultConfig })));
+            return (props.renderColumnsConfigurationModal
+                ? props.renderColumnsConfigurationModal(Object.assign(Object.assign({}, configProps), modalProps))
+                : (React.createElement(ColumnsConfigurationModal, Object.assign({}, modalProps, { columns: props.columns, columnsConfig: config, defaultConfig: defaultConfig }))));
         })
             .then((columnsConfig) => props.onValueChange(Object.assign(Object.assign({}, props.value), { columnsConfig })))
             .catch(() => null);
     }, [
-        props.columns, config, defaultConfig, props.value, props.onValueChange,
+        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$v.stickyHeader },
+        React.createElement("div", { className: css$x.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$v.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+        props.exactRowsCount !== 0 ? (React.createElement("div", { className: css$x.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$v.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$x.table), rawProps: {
                 role: 'table',
                 'aria-colcount': columns.length,
                 'aria-rowcount': props.rowsCount,
             } })));
 }
 
-var styles$1 = {"main-panel":"ColumnsConfigurationModal-module_main-panel__4w6PV","group-title":"ColumnsConfigurationModal-module_group-title__YQ24j","group-title-text":"ColumnsConfigurationModal-module_group-title-text__Uu-cT","group-title-badge":"ColumnsConfigurationModal-module_group-title-badge__7PUJ9","group-items":"ColumnsConfigurationModal-module_group-items__gni54","no-data":"ColumnsConfigurationModal-module_no-data__chQEC","h-divider":"ColumnsConfigurationModal-module_h-divider__5NbQX","search-area":"ColumnsConfigurationModal-module_search-area__8lhwH","mainPanel":"ColumnsConfigurationModal-module_main-panel__4w6PV","groupTitle":"ColumnsConfigurationModal-module_group-title__YQ24j","groupTitleText":"ColumnsConfigurationModal-module_group-title-text__Uu-cT","groupTitleBadge":"ColumnsConfigurationModal-module_group-title-badge__7PUJ9","groupItems":"ColumnsConfigurationModal-module_group-items__gni54","noData":"ColumnsConfigurationModal-module_no-data__chQEC","hDivider":"ColumnsConfigurationModal-module_h-divider__5NbQX","searchArea":"ColumnsConfigurationModal-module_search-area__8lhwH"};
+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 _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$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 SvgNavigationMoreVert18 = function SvgNavigationMoreVert18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$r({
+  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$q || (_path$q = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$o || (_path$o = /*#__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$r = /*#__PURE__*/forwardRef(SvgNavigationMoreVert18);
+var ForwardRef$p = /*#__PURE__*/forwardRef(SvgNavigationMoreVert18);
 
-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 _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 SvgActionUpdate18 = function SvgActionUpdate18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$q({
+  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$p || (_path$p = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__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$q = /*#__PURE__*/forwardRef(SvgActionUpdate18);
+var ForwardRef$o = /*#__PURE__*/forwardRef(SvgActionUpdate18);
 
-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$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 SvgActionLockFill18 = function SvgActionLockFill18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$p({
+  return /*#__PURE__*/React.createElement("svg", _extends$n({
     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$m || (_path$m = /*#__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$p = /*#__PURE__*/forwardRef(SvgActionLockFill18);
+var ForwardRef$n = /*#__PURE__*/forwardRef(SvgActionLockFill18);
 
-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$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 SvgActionPinOn18 = function SvgActionPinOn18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$o({
+  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$n || (_path$n = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M12 9V3h1V2H5v1h1v6l-2 1v1h4v5h2v-5h4v-1l-2-1z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$o = /*#__PURE__*/forwardRef(SvgActionPinOn18);
+var ForwardRef$m = /*#__PURE__*/forwardRef(SvgActionPinOn18);
 
-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$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 SvgActionPinOff18 = function SvgActionPinOff18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$n({
+  return /*#__PURE__*/React.createElement("svg", _extends$l({
     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$k || (_path$k = /*#__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$n = /*#__PURE__*/forwardRef(SvgActionPinOff18);
+var ForwardRef$l = /*#__PURE__*/forwardRef(SvgActionPinOff18);
 
 const i18nLocal = i18n.tables.columnsConfigurationModal;
 function PinIconButton(props) {
@@ -2010,12 +2344,12 @@ function PinIconButton(props) {
     }, [isPinned, isPinnedAlways]);
     const pinIcon = useMemo(() => {
         if (isPinnedAlways) {
-            return ForwardRef$p;
+            return ForwardRef$n;
         }
         if (isPinned) {
-            return isHovered ? ForwardRef$n : ForwardRef$o;
+            return isHovered ? ForwardRef$l : ForwardRef$m;
         }
-        return ForwardRef$o;
+        return ForwardRef$m;
     }, [
         isPinnedAlways, isHovered, isPinned,
     ]);
@@ -2025,7 +2359,7 @@ function PinIconButton(props) {
             React.createElement(IconButton, { icon: pinIcon, onClick: pinClickHandler, isDisabled: isPinnedAlways, color: isPinned ? 'info' : undefined }))));
 }
 
-var styles = {"row-wrapper":"ColumnRow-module_row-wrapper__J7zw-","not-pinned":"ColumnRow-module_not-pinned__xHoL6","pin-icon-button":"ColumnRow-module_pin-icon-button__jlBrT","drag-handle":"ColumnRow-module_drag-handle__hdFZA","dnd-disabled":"ColumnRow-module_dnd-disabled__n7mQR","rowWrapper":"ColumnRow-module_row-wrapper__J7zw-","notPinned":"ColumnRow-module_not-pinned__xHoL6","pinIconButton":"ColumnRow-module_pin-icon-button__jlBrT","dragHandle":"ColumnRow-module_drag-handle__hdFZA","dndDisabled":"ColumnRow-module_dnd-disabled__n7mQR"};
+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"};
 
 const ColumnRow = React.memo(function ColumnRow(props) {
     const { column } = props;
@@ -2041,7 +2375,7 @@ const ColumnRow = React.memo(function ColumnRow(props) {
         return (React.createElement(FlexRow, Object.assign({ size: "30", cx: wrapperClasses }, wrapperAttrs),
             React.createElement(FlexRow, { size: "30", spacing: "6", cx: styles.title },
                 React.createElement(DragHandle, { rawProps: dragHandleRawProps, isDisabled: !isDndAllowed, cx: cx$1(styles.dragHandle, !isDndAllowed && styles.dndDisabled) }),
-                React.createElement(Checkbox, { key: column.key, label: column.caption, value: isVisible, onValueChange: toggleVisibility, isDisabled: column.isAlwaysVisible })),
+                React.createElement(Checkbox, { key: column.key, label: props.renderItem ? props.renderItem(props.column) : column.caption, value: isVisible, onValueChange: toggleVisibility, isDisabled: column.isAlwaysVisible })),
             React.createElement(FlexSpacer, null),
             React.createElement(FlexRow, { size: "30", cx: styles.pinIconButton },
                 React.createElement(PinIconButton, { id: column.key, isPinned: !!isPinned, canUnpin: !isPinnedAlways, onTogglePin: togglePin })),
@@ -2060,6 +2394,7 @@ function ColumnsConfigurationModal(props) {
         initialColumnsConfig,
         columns,
         defaultConfig,
+        getSearchFields: props.getSearchFields,
     });
     const apply = useCallback(() => modalProps.success(columnsConfig), [columnsConfig, modalProps]);
     const close = useCallback(() => modalProps.abort(), [modalProps]);
@@ -2073,9 +2408,9 @@ function ColumnsConfigurationModal(props) {
         const hasDivider = !!(amountPinned && amountUnPinned);
         return (React.createElement(React.Fragment, null,
             renderGroupTitle(i18n$1.displayedSectionTitle, amountPinned + amountUnPinned),
-            !!amountPinned && (React.createElement(FlexRow, { cx: styles$1.groupItems, size: "30" }, groupedColumns.displayedPinned.map((c) => (React.createElement(ColumnRow, { column: c, key: c.key }))))),
+            !!amountPinned && (React.createElement(FlexRow, { cx: styles$1.groupItems, size: "30" }, groupedColumns.displayedPinned.map((c) => (React.createElement(ColumnRow, { column: c, key: c.key, renderItem: props.renderItem }))))),
             hasDivider && React.createElement("div", { className: styles$1.hDivider }),
-            !!amountUnPinned && (React.createElement(FlexRow, { cx: styles$1.groupItems, size: "30" }, groupedColumns.displayedUnpinned.map((c) => (React.createElement(ColumnRow, { column: c, key: c.key })))))));
+            !!amountUnPinned && (React.createElement(FlexRow, { cx: styles$1.groupItems, size: "30" }, groupedColumns.displayedUnpinned.map((c) => (React.createElement(ColumnRow, { column: c, key: c.key, renderItem: props.renderItem })))))));
     };
     const renderHidden = () => {
         const amountHidden = groupedColumns.hidden.length;
@@ -2084,10 +2419,10 @@ function ColumnsConfigurationModal(props) {
         }
         return (React.createElement(React.Fragment, null,
             renderGroupTitle(i18n$1.hiddenSectionTitle, amountHidden),
-            React.createElement(FlexRow, { cx: styles$1.groupItems, size: "30" }, groupedColumns.hidden.map((c) => (React.createElement(ColumnRow, { column: c, key: c.key }))))));
+            React.createElement(FlexRow, { cx: styles$1.groupItems, size: "30" }, groupedColumns.hidden.map((c) => (React.createElement(ColumnRow, { column: c, key: c.key, renderItem: props.renderItem }))))));
     };
     const noVisibleColumns = useMemo(() => !groupedColumns.displayedPinned.length && !groupedColumns.displayedUnpinned.length, [groupedColumns.displayedPinned, groupedColumns.displayedUnpinned]);
-    const applyButton = React.createElement(Button, { caption: i18n$1.applyButton, isDisabled: noVisibleColumns, color: "accent", onClick: apply });
+    const applyButton = React.createElement(Button, { caption: i18n$1.applyButton, isDisabled: noVisibleColumns, color: "primary", onClick: apply });
     return (React.createElement(ModalBlocker, Object.assign({}, modalProps),
         React.createElement(ModalWindow, { height: 700 },
             React.createElement(ModalHeader, { title: i18n$1.configureColumnsTitle, onClose: close }),
@@ -2095,7 +2430,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$r, 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$p, size: "30", color: "secondary", isDropdown: false })) })),
             React.createElement(Panel, { cx: styles$1.mainPanel },
                 React.createElement(ScrollBars, null,
                     renderVisible(),
@@ -2104,22 +2439,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$q, caption: i18n$1.resetToDefaultButton, onClick: reset }),
+                React.createElement(LinkButton, { icon: ForwardRef$o, 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$u = {"panel":"ColumnHeaderDropdown-module_panel__8EgfJ"};
+var css$w = {"panel":"E0IYu9"};
 
-var css$t = {"sorting-panel-container":"SortingPanel-module_sorting-panel-container__4L-8V","sort-active":"SortingPanel-module_sort-active__yoB0U","sortingPanelContainer":"SortingPanel-module_sorting-panel-container__4L-8V","sortActive":"SortingPanel-module_sort-active__yoB0U"};
+var css$v = {"sorting-panel-container":"WeS65g","sort-active":"DwaTcF","sortingPanelContainer":"WeS65g","sortActive":"DwaTcF"};
 
 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$t.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 })));
+    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 })));
 };
 const SortingPanel = React__default.memo(SortingPanelImpl);
 
@@ -2134,63 +2469,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$u.panel },
+    return (React__default.createElement(Dropdown$1, { renderTarget: props.renderTarget, renderBody: (dropdownProps) => (React__default.createElement(Panel, { style: style, shadow: true, cx: css$w.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$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$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 SvgNotificationDone24 = function SvgNotificationDone24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$m({
+  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$l || (_path$l = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__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$m = /*#__PURE__*/forwardRef(SvgNotificationDone24);
+var ForwardRef$k = /*#__PURE__*/forwardRef(SvgNotificationDone24);
 
-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$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 SvgNotificationDone18 = function SvgNotificationDone18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$l({
+  return /*#__PURE__*/React.createElement("svg", _extends$j({
     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$i || (_path$i = /*#__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$l = /*#__PURE__*/forwardRef(SvgNotificationDone18);
+var ForwardRef$j = /*#__PURE__*/forwardRef(SvgNotificationDone18);
 
-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$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 SvgNotificationDone12 = function SvgNotificationDone12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$k({
+  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$j || (_path$j = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__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$k = /*#__PURE__*/forwardRef(SvgNotificationDone12);
+var ForwardRef$i = /*#__PURE__*/forwardRef(SvgNotificationDone12);
 
-var css$s = {"render-item":"DataPickerRow-module_render-item__Xg-KM","icon-wrapper":"DataPickerRow-module_icon-wrapper__2iHGZ","picker-row":"DataPickerRow-module_picker-row__dKixb","icon-default":"DataPickerRow-module_icon-default__gW-Xp","icon-primary":"DataPickerRow-module_icon-primary__QfDbw","renderItem":"DataPickerRow-module_render-item__Xg-KM","iconWrapper":"DataPickerRow-module_icon-wrapper__2iHGZ","pickerRow":"DataPickerRow-module_picker-row__dKixb","iconDefault":"DataPickerRow-module_icon-default__gW-Xp","iconPrimary":"DataPickerRow-module_icon-primary__QfDbw"};
+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"};
 
 class DataPickerRow extends React.Component {
     constructor() {
@@ -2198,37 +2533,37 @@ class DataPickerRow extends React.Component {
         this.getIcon = (size) => {
             switch (size) {
                 case '24':
-                    return ForwardRef$k;
+                    return ForwardRef$i;
                 case '30':
-                    return ForwardRef$l;
+                    return ForwardRef$j;
                 case '36':
-                    return ForwardRef$l;
+                    return ForwardRef$j;
                 case '42':
-                    return ForwardRef$m;
+                    return ForwardRef$k;
                 default:
-                    return ForwardRef$l;
+                    return ForwardRef$j;
             }
         };
         this.column = {
             key: 'name',
             grow: 1,
             width: 0,
-            render: (item, rowProps) => (React.createElement("div", { key: rowProps.id, className: css$s.renderItem },
+            render: (item, rowProps) => (React.createElement("div", { key: rowProps.id, className: css$u.renderItem },
                 this.props.renderItem(item, rowProps),
                 React.createElement(FlexSpacer, null),
-                (rowProps.isChildrenSelected || rowProps.isSelected) && (React.createElement("div", { className: css$s.iconWrapper },
-                    React.createElement(IconContainer, { icon: this.getIcon(this.props.size), cx: rowProps.isChildrenSelected ? css$s.iconDefault : css$s.iconPrimary }))))),
+                (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 }))))),
         };
         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$s.pickerRow, this.props.cx], renderContent: this.renderContent }));
+        return React.createElement(DataPickerRow$1, Object.assign({}, this.props, { cx: [css$u.pickerRow, this.props.cx], renderContent: this.renderContent }));
     }
 }
 
-var css$r = {"done":"MobileDropdownWrapper-module_done__8Ywqd"};
+var css$t = {"done":"qrDRvV"};
 
 const MobileDropdownWrapper = (props) => {
     const isVisible = isMobile();
@@ -2236,22 +2571,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$r.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$t.done, size: "48" })));
 };
 
-var css$q = {"sub-header-wrapper":"PickerModal-module_sub-header-wrapper__PVjxt","switch":"PickerModal-module_switch__4ZWZ-","no-found-modal-container":"PickerModal-module_no-found-modal-container__zufRW","no-found-modal-container-icon":"PickerModal-module_no-found-modal-container-icon__RXBf4","no-found-modal-container-text":"PickerModal-module_no-found-modal-container-text__TgKzv","subHeaderWrapper":"PickerModal-module_sub-header-wrapper__PVjxt","$switch$":"PickerModal-module_switch__4ZWZ-","noFoundModalContainer":"PickerModal-module_no-found-modal-container__zufRW","noFoundModalContainerIcon":"PickerModal-module_no-found-modal-container-icon__RXBf4","noFoundModalContainerText":"PickerModal-module_no-found-modal-container-text__TgKzv"};
+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 _path$i, _path2;
-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$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 SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$j({
+  return /*#__PURE__*/React.createElement("svg", _extends$h({
     width: 66,
     height: 67,
     viewBox: "0 0 66 67",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__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", {
@@ -2261,16 +2596,16 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
     fill: "#6C6F80"
   })));
 };
-var ForwardRef$j = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
+var ForwardRef$h = /*#__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$q.noFoundModalContainer },
-                React.createElement(IconContainer, { cx: css$q.noFoundModalContainerIcon, icon: ForwardRef$j }),
-                React.createElement(Text, { cx: css$q.noFoundModalContainerText, font: "semibold", fontSize: "16", lineHeight: "24", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsMessage),
-                React.createElement(Text, { cx: css$q.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$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)));
         };
     }
     renderRow(rowProps) {
@@ -2292,7 +2627,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$q.subHeaderWrapper },
+                React.createElement(FlexCell, { cx: css$s.subHeaderWrapper },
                     React.createElement(FlexRow, { vPadding: "24" },
                         React.createElement(SearchInput, Object.assign({}, this.lens.prop('dataSourceState').prop('search').toProps(), { onKeyDown: (e) => handleDataSourceKeyboard({
                                 value: this.getDataSourceState(),
@@ -2301,7 +2636,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$q.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$s.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()))));
@@ -2320,11 +2655,11 @@ class PickerModal extends React.Component {
 
 const Avatar = withMods(Avatar$1, () => []);
 
-var css$p = {"root":"AvatarStack-module_root__OBrBf"};
+var css$r = {"root":"-oBec6"};
 
-const AvatarStack = withMods(AvatarStack$1, () => [css$p.root]);
+const AvatarStack = withMods(AvatarStack$1, () => [css$r.root]);
 
-var css$o = {"root":"Badge-module_root__-W-nq","size-18":"Badge-module_size-18__lYaxv","fill-transparent":"Badge-module_fill-transparent__AMwvE","size-24":"Badge-module_size-24__44rND","size-30":"Badge-module_size-30__FLG32","size-36":"Badge-module_size-36__AN62X","size-42":"Badge-module_size-42__hJg-A","size-48":"Badge-module_size-48__vx-wE","fill-solid":"Badge-module_fill-solid__SdEDe","fill-semitransparent":"Badge-module_fill-semitransparent__iHuV1","size18":"Badge-module_size-18__lYaxv","fillTransparent":"Badge-module_fill-transparent__AMwvE","size24":"Badge-module_size-24__44rND","size30":"Badge-module_size-30__FLG32","size36":"Badge-module_size-36__AN62X","size42":"Badge-module_size-42__hJg-A","size48":"Badge-module_size-48__vx-wE","fillSolid":"Badge-module_fill-solid__SdEDe","fillSemitransparent":"Badge-module_fill-semitransparent__iHuV1"};
+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 mapSize$1 = {
@@ -2337,7 +2672,7 @@ const mapSize$1 = {
 };
 function applyBadgeMods(mods) {
     return [
-        css$o.root, buttonCss.root, css$o['size-' + (mods.size || defaultSize$4)], css$o['fill-' + (mods.fill || 'solid')], mods.color && `badge-${mods.color}`,
+        css$q.root, buttonCss.root, css$q['size-' + (mods.size || defaultSize$4)], css$q['fill-' + (mods.fill || 'solid')], mods.color && `badge-${mods.color}`,
     ];
 }
 const Badge = withMods(Button$1, applyBadgeMods, (props) => ({
@@ -2346,7 +2681,7 @@ const Badge = withMods(Button$1, applyBadgeMods, (props) => ({
     countPosition: 'left',
 }));
 
-var css$n = {"root":"Tag-module_root__sO4Qq","size-18":"Tag-module_size-18__nCuL7","size-24":"Tag-module_size-24__b0V4K","size-30":"Tag-module_size-30__YNtmt","size-36":"Tag-module_size-36__M-nVf","size-42":"Tag-module_size-42__IBxvV","size-48":"Tag-module_size-48__ksVx2","size18":"Tag-module_size-18__nCuL7","size24":"Tag-module_size-24__b0V4K","size30":"Tag-module_size-30__YNtmt","size36":"Tag-module_size-36__M-nVf","size42":"Tag-module_size-42__IBxvV","size48":"Tag-module_size-48__ksVx2"};
+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"};
 
 const defaultSize$3 = '36';
 const mapSize = {
@@ -2358,98 +2693,64 @@ const mapSize = {
     18: '18',
 };
 function applyTagMods(mods) {
-    return [css$n['size-' + (mods.size || defaultSize$3)], css$n.root];
+    return [css$p['size-' + (mods.size || defaultSize$3)], css$p.root];
 }
 const Tag = withMods(Button$1, applyTagMods, (props) => ({
     dropdownIcon: systemIcons[mapSize[props.size] || defaultSize$3].foldingArrow,
     clearIcon: systemIcons[mapSize[props.size] || defaultSize$3].clear,
 }));
 
-var css$m = {"root":"Paginator-module_root__d1jwS","spacer":"Paginator-module_spacer__8AhYN","mode-ghost":"Paginator-module_mode-ghost__-NfIp","size-24":"Paginator-module_size-24__zPh-d","size-30":"Paginator-module_size-30__R4PVg","navigation-size-24":"Paginator-module_navigation-size-24__gxUQ8","navigation-size-30":"Paginator-module_navigation-size-30__ZRsLp","modeGhost":"Paginator-module_mode-ghost__-NfIp","size24":"Paginator-module_size-24__zPh-d","size30":"Paginator-module_size-30__R4PVg","navigationSize24":"Paginator-module_navigation-size-24__gxUQ8","navigationSize30":"Paginator-module_navigation-size-30__ZRsLp"};
+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 _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$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 SvgNavigationChevronLeft12 = function SvgNavigationChevronLeft12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$i({
+  return /*#__PURE__*/React.createElement("svg", _extends$g({
     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$f || (_path$f = /*#__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$i = /*#__PURE__*/forwardRef(SvgNavigationChevronLeft12);
+var ForwardRef$g = /*#__PURE__*/forwardRef(SvgNavigationChevronLeft12);
 
-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 _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 SvgNavigationChevronRight12 = function SvgNavigationChevronRight12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$h({
+  return /*#__PURE__*/React.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$g || (_path$g = /*#__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$h = /*#__PURE__*/forwardRef(SvgNavigationChevronRight12);
-
-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 SvgNavigationChevronLeft18 = function SvgNavigationChevronLeft18(props, ref) {
-  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$f || (_path$f = /*#__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$g = /*#__PURE__*/forwardRef(SvgNavigationChevronLeft18);
-
-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 SvgNavigationChevronRight18 = function SvgNavigationChevronRight18(props, ref) {
-  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$e || (_path$e = /*#__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",
+    d: "m5 3-.705.705L6.585 6l-2.29 2.295L5 9l3-3-3-3z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$f = /*#__PURE__*/forwardRef(SvgNavigationChevronRight18);
+var ForwardRef$f = /*#__PURE__*/forwardRef(SvgNavigationChevronRight12);
 
 function Paginator(props) {
     const renderPaginator = (params) => {
         var _a, _b;
-        return (React__default.createElement("nav", Object.assign({ role: "navigation", className: css$m.root }, params.rawProps),
-            React__default.createElement(Button, { cx: css$m[`navigation-size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$g : ForwardRef$i, onClick: params.goToPrev, isDisabled: params.isFirst, mode: "outline", color: "secondary" }),
+        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" }),
             params.pages.map((page, index) => {
                 var _a, _b;
                 if (page.type === 'spacer') {
-                    return (React__default.createElement(Button, { cx: cx(css$m[`size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], css$m.spacer), size: params.size, key: `${index}_spacer`, caption: "...", mode: "ghost", color: "secondary", tabIndex: -1 }));
+                    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 }));
                 }
                 else {
-                    return (React__default.createElement(Button, { cx: cx(css$m[`size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], css$m[`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$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" }));
                 }
             }),
-            React__default.createElement(Button, { cx: css$m[`navigation-size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$f : ForwardRef$h, onClick: params.goToNext, isDisabled: params.isLast, mode: "outline", color: "secondary" })));
+            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" })));
     };
     return React__default.createElement(Paginator$1, Object.assign({}, props, { render: renderPaginator }));
 }
@@ -2457,15 +2758,15 @@ function Paginator(props) {
 const MAX_ITEMS = 100;
 const getMaxItems = (maxItems) => maxItems || maxItems === 0 ? maxItems : MAX_ITEMS;
 
-var css$l = {"root":"PickerToggler-module_root__oOCiN","mode-form":"PickerToggler-module_mode-form__YzMbU","mode-cell":"PickerToggler-module_mode-cell__HGJh8","mode-inline":"PickerToggler-module_mode-inline__3ONdn","size-24":"PickerToggler-module_size-24__l1vGj","size-30":"PickerToggler-module_size-30__pzxTr","size-36":"PickerToggler-module_size-36__SsqyI","size-42":"PickerToggler-module_size-42__tunwu","size-48":"PickerToggler-module_size-48__PM7zq","modeForm":"PickerToggler-module_mode-form__YzMbU","modeCell":"PickerToggler-module_mode-cell__HGJh8","modeInline":"PickerToggler-module_mode-inline__3ONdn","size24":"PickerToggler-module_size-24__l1vGj","size30":"PickerToggler-module_size-30__pzxTr","size36":"PickerToggler-module_size-36__SsqyI","size42":"PickerToggler-module_size-42__tunwu","size48":"PickerToggler-module_size-48__PM7zq"};
+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"};
 
 const defaultSize$2 = '36';
 const defaultMode = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
     return [
-        css$l.root,
-        css$l['size-' + (mods.size || defaultSize$2)],
-        css$l['mode-' + (mods.mode || defaultMode)],
+        css$n.root,
+        css$n['size-' + (mods.size || defaultSize$2)],
+        css$n['mode-' + (mods.mode || defaultMode)],
     ];
 }
 function PickerTogglerComponent(props, ref) {
@@ -2507,7 +2808,74 @@ function PickerTogglerComponent(props, ref) {
 }
 const PickerToggler = React.forwardRef(PickerTogglerComponent);
 
-var css$k = {"root":"PickerItem-module_root__PI16F","multiline-vertical-padding-24":"PickerItem-module_multiline-vertical-padding-24__sCN7p","multiline-vertical-padding-30":"PickerItem-module_multiline-vertical-padding-30__v2LUR","multiline-vertical-padding-36":"PickerItem-module_multiline-vertical-padding-36__65t4o","multiline-vertical-padding-42":"PickerItem-module_multiline-vertical-padding-42__Wt0JN","multiline-vertical-padding-48":"PickerItem-module_multiline-vertical-padding-48__oSirV","text":"PickerItem-module_text__S0Ejg","multilineVerticalPadding24":"PickerItem-module_multiline-vertical-padding-24__sCN7p","multilineVerticalPadding30":"PickerItem-module_multiline-vertical-padding-30__v2LUR","multilineVerticalPadding36":"PickerItem-module_multiline-vertical-padding-36__65t4o","multilineVerticalPadding42":"PickerItem-module_multiline-vertical-padding-42__Wt0JN","multilineVerticalPadding48":"PickerItem-module_multiline-vertical-padding-48__oSirV"};
+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$l = {"highlighted-text":"KiHlg-","highlightedText":"KiHlg-"};
+
+const mergeHighlightRanges = (ranges) => {
+    const mergedRanges = [];
+    ranges.forEach((range) => {
+        if (!mergedRanges.length) {
+            mergedRanges.push(Object.assign(Object.assign({}, range), { isHighlighted: true }));
+        }
+        const lastRange = mergedRanges[mergedRanges.length - 1];
+        if (range.from >= lastRange.from && range.from <= lastRange.to && range.to > lastRange.to) {
+            lastRange.to = range.to;
+        }
+        if (lastRange.to < range.from) {
+            mergedRanges.push(Object.assign(Object.assign({}, range), { isHighlighted: true }));
+        }
+    });
+    return mergedRanges;
+};
+const addNotHighlightedRanges = (ranges, str) => {
+    const allRanges = [];
+    ranges.forEach((range, index) => {
+        if (index === 0 && range.from !== 0) {
+            allRanges.push({ from: 0, to: range.from, isHighlighted: false });
+        }
+        const prevRange = ranges[index - 1];
+        if (prevRange && prevRange.to < range.from) {
+            allRanges.push({ from: prevRange.to, to: range.from, isHighlighted: false });
+        }
+        allRanges.push(range);
+        const lastIndex = ranges.length - 1;
+        if (index === lastIndex && range.to < str.length) {
+            allRanges.push({ from: range.to, to: str.length, isHighlighted: false });
+        }
+    });
+    return allRanges;
+};
+const getHighlightRanges = (str, search) => {
+    const words = search
+        .split(' ')
+        .filter(Boolean)
+        .map((word) => word.trim().replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')) // esape regex characters inside the string
+        .map((word) => new RegExp(word, 'ig'));
+    const matches = words.flatMap((word) => [...str.matchAll(word)]);
+    const ranges = matches
+        .map((match) => ({ from: match.index, to: match[0].length + match.index, isHighlighted: true }))
+        .sort((range1, range2) => range1.from - range2.from);
+    if (!ranges) {
+        return [];
+    }
+    const mergedRanges = mergeHighlightRanges(ranges);
+    return addNotHighlightedRanges(mergedRanges, str);
+};
+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));
+});
+const getHighlightedSearchMatches = (str, search) => {
+    if (!search || !str) {
+        return str;
+    }
+    const ranges = getHighlightRanges(str, search);
+    if (!ranges.length) {
+        return str;
+    }
+    return getDecoratedText(str, ranges);
+};
 
 const defaultSize$1 = '36';
 class PickerItem extends React.Component {
@@ -2518,20 +2886,27 @@ class PickerItem extends React.Component {
         };
     }
     render() {
-        const { size, avatarUrl, title, subtitle, isLoading, isDisabled, icon, } = this.props;
+        var _a;
+        const { size, avatarUrl, isLoading, isDisabled, icon, highlightSearchMatches, } = this.props;
         const itemSize = size && size !== 'none' ? size : defaultSize$1;
-        const isMultiline = !!(title && subtitle);
-        return (React.createElement(FlexCell, { width: "auto", cx: css$k.root },
-            React.createElement(FlexRow, { size: itemSize, cx: isMultiline && css$k[`multiline-vertical-padding-${itemSize}`], spacing: "12" },
+        const isMultiline = !!(this.props.title && this.props.subtitle);
+        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" },
                 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$k.text, color: isDisabled ? 'disabled' : 'primary' }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : title)),
-                    subtitle && (React.createElement(Text, { size: itemSize, color: isDisabled ? 'disabled' : 'secondary', cx: css$k.text }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : subtitle))))));
+                    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))))));
     }
 }
+PickerItem.defaultProps = {
+    highlightSearchMatches: true,
+};
 
-var css$j = {"panel":"PickerInput-module_panel__0xY7f","footer-wrapper":"PickerInput-module_footer-wrapper__mdFUK","footer-size-24":"PickerInput-module_footer-size-24__sI3ji","footer-size-30":"PickerInput-module_footer-size-30__kEoD6","footer-size-36":"PickerInput-module_footer-size-36__Q2x7r","footer-size-42":"PickerInput-module_footer-size-42__1BKAo","footer-size-48":"PickerInput-module_footer-size-48__vHArx","footerWrapper":"PickerInput-module_footer-wrapper__mdFUK","footerSize24":"PickerInput-module_footer-size-24__sI3ji","footerSize30":"PickerInput-module_footer-size-30__kEoD6","footerSize36":"PickerInput-module_footer-size-36__Q2x7r","footerSize42":"PickerInput-module_footer-size-42__1BKAo","footerSize48":"PickerInput-module_footer-size-48__vHArx"};
+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"};
 
 const pickerHeight$1 = 300;
 const pickerWidth$1 = 360;
@@ -2539,7 +2914,8 @@ class PickerInput extends PickerInputBase {
     constructor() {
         super(...arguments);
         this.renderItem = (item, rowProps) => {
-            return React__default.createElement(PickerItem, Object.assign({ title: this.getName(item), size: this.getRowSize() }, rowProps));
+            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)));
         };
         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 })));
@@ -2582,7 +2958,7 @@ class PickerInput extends PickerInputBase {
         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$j.panel, uuiMarkers.lockFocus, this.props.bodyCx,
+                css$k.panel, uuiMarkers.lockFocus, this.props.bodyCx,
             ] },
             React__default.createElement(MobileDropdownWrapper, { title: this.props.entityName, close: () => {
                     this.returnFocusToInput();
@@ -2598,7 +2974,7 @@ class PickerInput extends PickerInputBase {
     }
 }
 
-var css$i = {"row":"PickerListItem-module_row__SAtT7"};
+var css$j = {"row":"X01tFd"};
 
 class PickerListItem extends React__default.Component {
     render() {
@@ -2616,7 +2992,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$i.row }, component);
+        return React__default.createElement("div", { className: css$j.row }, component);
     }
 }
 
@@ -2659,22 +3035,7 @@ class PickerList extends PickerListBase {
 }
 PickerList.contextType = UuiContext;
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-var dayjs_min = {exports: {}};
-
-(function (module, exports) {
-	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",f="month",h="quarter",c="year",d="date",$="Invalid Date",l=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_")},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},g={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,f),s=n-i<0,u=e.clone().add(r+(s?-1:1),f);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:f,y:c,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:h}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},D="en",v={};v[D]=M;var p=function(t){return t instanceof _},S=function(t,e,n){var r;if(!t)return D;if("string"==typeof t)v[t]&&(r=t),e&&(v[t]=e,r=t);else {var i=t.name;v[i]=t,r=i;}return !n&&r&&(D=r),r||!n&&D},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},O=g;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t);}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match(l);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return O},m.isValid=function(){return !(this.$d.toString()===$)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,h=O.p(t),$=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},l=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,g="set"+(this.$u?"UTC":"");switch(h){case c:return r?$(1,0):$(31,11);case f:return r?$(1,M):$(0,M+1);case o:var D=this.$locale().weekStart||0,v=(y<D?y+7:y)-D;return $(r?m-v:m+(6-v),M);case a:case d:return l(g+"Hours",0);case u:return l(g+"Minutes",1);case s:return l(g+"Seconds",2);case i:return l(g+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),h="set"+(this.$u?"UTC":""),$=(n={},n[a]=h+"Date",n[d]=h+"Date",n[f]=h+"Month",n[c]=h+"FullYear",n[u]=h+"Hours",n[s]=h+"Minutes",n[i]=h+"Seconds",n[r]=h+"Milliseconds",n)[o],l=o===a?this.$D+(e-this.$W):e;if(o===f||o===c){var y=this.clone().set(d,1);y.$d[$](l),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else $&&this.$d[$](l);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,h){var d,$=this;r=Number(r);var l=O.p(h),y=function(t){var e=w($);return O.w(e.date(e.date()+Math.round(t*r)),$)};if(l===f)return this.set(f,this.$M+r);if(l===c)return this.set(c,this.$y+r);if(l===a)return y(1);if(l===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[l]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||$;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,f=n.months,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].substr(0,s)},c=function(t){return O.s(s%12||12,t,"0")},d=n.meridiem||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r},l={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:O.s(a+1,2,"0"),MMM:h(n.monthsShort,a,f,3),MMMM:h(f,a),D:this.$D,DD:O.s(this.$D,2,"0"),d:String(this.$W),dd:h(n.weekdaysMin,this.$W,o,2),ddd:h(n.weekdaysShort,this.$W,o,3),dddd:o[this.$W],H:String(s),HH:O.s(s,2,"0"),h:c(1),hh:c(2),a:d(s,u,!0),A:d(s,u,!1),m:String(u),mm:O.s(u,2,"0"),s:String(this.$s),ss:O.s(this.$s,2,"0"),SSS:O.s(this.$ms,3,"0"),Z:i};return r.replace(y,(function(t,e){return e||l[t]||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,$){var l,y=O.p(d),M=w(r),m=(M.utcOffset()-this.utcOffset())*e,g=this-M,D=O.m(this,M);return D=(l={},l[c]=D/12,l[f]=D,l[h]=D/3,l[o]=(g-m)/6048e5,l[a]=(g-m)/864e5,l[u]=g/n,l[s]=g/e,l[i]=g/t,l)[y]||g,$?D:O.a(D)},m.daysInMonth=function(){return this.endOf(f).$D},m.$locale=function(){return v[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),b=_.prototype;return w.prototype=b,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",f],["$y",c],["$D",d]].forEach((function(t){b[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),w.extend=function(t,e){return t.$i||(t(e,_,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=v[D],w.Ls=v,w.p={},w})); 
-} (dayjs_min));
-
-var dayjs_minExports = dayjs_min.exports;
-var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
-
-var css$h = {"root":"FilterPanelItemToggler-module_root__6HJLW","title-wrapper":"FilterPanelItemToggler-module_title-wrapper__07dD8","title":"FilterPanelItemToggler-module_title__JaXtY","text-wrapper":"FilterPanelItemToggler-module_text-wrapper__kRoKs","selection":"FilterPanelItemToggler-module_selection__K9tGx","postfix":"FilterPanelItemToggler-module_postfix__MpS3n","selected":"FilterPanelItemToggler-module_selected__FEPzr","titleWrapper":"FilterPanelItemToggler-module_title-wrapper__07dD8","textWrapper":"FilterPanelItemToggler-module_text-wrapper__kRoKs"};
+var css$i = {"root":"Jyw9gm","title-wrapper":"GtHTwK","title":"YFB6-x","text-wrapper":"LKBWJP","selection":"_9HMfaW","postfix":"RbBwvf","selected":"_1vAzM7","titleWrapper":"GtHTwK","textWrapper":"LKBWJP"};
 
 const defaultSize = '36';
 const FilterPanelItemToggler = React.forwardRef((props, ref) => {
@@ -2686,15 +3047,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),
+        (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$h.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$h.titleWrapper },
-            React.createElement(Text, { size: props.size, cx: css$h.title }, getTitle),
-            props.selection && (React.createElement("div", { className: css$h.textWrapper },
-                React.createElement(Text, { color: "brand", size: props.size, cx: css$h.selection }, props.selection),
-                props.postfix && (React.createElement(Text, { color: "brand", size: props.size, cx: css$h.postfix }, props.postfix))))),
+        }, 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 },
+                getSelectionText(),
+                props.postfix && (React.createElement(Text, { color: "brand", size: props.size, cx: css$i.postfix }, props.postfix))))),
         !props.isDisabled && React.createElement(IconContainer, { icon: systemIcons[props.size || defaultSize].foldingArrow, flipY: props.isOpen, cx: "uui-icon-dropdown" })));
 });
 
@@ -2774,12 +3138,16 @@ class FilterDatePickerBody extends BaseDatePicker {
     }
 }
 
-var css$g = {"date-input":"FilterRangeDatePickerBody-module_date-input__YCsN4","size-24":"FilterRangeDatePickerBody-module_size-24__I99Uu","size-30":"FilterRangeDatePickerBody-module_size-30__6sPTt","size-36":"FilterRangeDatePickerBody-module_size-36__EvRIl","size-42":"FilterRangeDatePickerBody-module_size-42__lBWnp","size-48":"FilterRangeDatePickerBody-module_size-48__YnYMk","date-input-group":"FilterRangeDatePickerBody-module_date-input-group__k-U24","separator":"FilterRangeDatePickerBody-module_separator__wydiQ","mode-form":"FilterRangeDatePickerBody-module_mode-form__uTlrw","mode-cell":"FilterRangeDatePickerBody-module_mode-cell__vPfe2","dateInput":"FilterRangeDatePickerBody-module_date-input__YCsN4","size24":"FilterRangeDatePickerBody-module_size-24__I99Uu","size30":"FilterRangeDatePickerBody-module_size-30__6sPTt","size36":"FilterRangeDatePickerBody-module_size-36__EvRIl","size42":"FilterRangeDatePickerBody-module_size-42__lBWnp","size48":"FilterRangeDatePickerBody-module_size-48__YnYMk","dateInputGroup":"FilterRangeDatePickerBody-module_date-input-group__k-U24","modeForm":"FilterRangeDatePickerBody-module_mode-form__uTlrw","modeCell":"FilterRangeDatePickerBody-module_mode-cell__vPfe2"};
+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"};
 
 class FilterRangeDatePickerBody extends BaseRangeDatePicker {
     constructor() {
         super(...arguments);
         this.state = Object.assign(Object.assign({}, super.getInitialState()), { inFocus: 'from' });
+        this.changeIsOpen = (open) => {
+            this.toggleOpening(open);
+            this.props.onClose();
+        };
         this.renderInput = () => {
             return null;
         };
@@ -2787,13 +3155,13 @@ class FilterRangeDatePickerBody extends BaseRangeDatePicker {
     renderBody() {
         return (React.createElement(React.Fragment, null,
             React.createElement(FlexRow, { borderBottom: true },
-                React.createElement(RangeDatePickerBody, { value: this.getValue(), onValueChange: this.onRangeChange, filter: this.props.filter, focusPart: this.state.inFocus, changeIsOpen: this.toggleOpening, presets: this.props.presets })),
+                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$g.dateInputGroup, this.state.inFocus && uuiMod.focus) },
-                        React.createElement(TextInput, { icon: systemIcons['30'].calendar, cx: cx(css$g.dateInput, css$g['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$g.separator }),
-                        React.createElement(TextInput, { cx: cx(css$g.dateInput, css$g['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$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(FlexSpacer, null),
                     React.createElement(LinkButton, { isDisabled: !this.state.inputValue.from && !this.state.inputValue.to, caption: i18n.pickerModal.clearAllButton, onClick: this.handleCancel })))));
     }
@@ -2802,6 +3170,8 @@ class FilterRangeDatePickerBody extends BaseRangeDatePicker {
     }
 }
 
+var css$g = {"container":"F1W-1y"};
+
 function FilterNumericBody(props) {
     var _a, _b;
     const isInRangePredicate = (props === null || props === void 0 ? void 0 : props.selectedPredicate) === 'inRange' || (props === null || props === void 0 ? void 0 : props.selectedPredicate) === 'notInRange';
@@ -2844,7 +3214,7 @@ function FilterNumericBody(props) {
     if (isInRangePredicate) {
         const value = props.value;
         return (React__default.createElement("div", null,
-            React__default.createElement(FlexRow, { padding: "12", vPadding: "24", alignItems: "center", spacing: "12", borderBottom: true, rawProps: { style: { paddingTop: '3px' } } },
+            React__default.createElement(FlexRow, { padding: "12", alignItems: "center", spacing: "12", borderBottom: true, cx: css$g.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%" },
@@ -2852,7 +3222,7 @@ function FilterNumericBody(props) {
             renderFooter()));
     }
     return (React__default.createElement("div", null,
-        React__default.createElement(FlexRow, { padding: "12", vPadding: "24", alignItems: "center", borderBottom: true, rawProps: { style: { paddingTop: '3px' } } },
+        React__default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$g.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()));
@@ -2889,9 +3259,10 @@ var SvgActionDeleteforever12 = function SvgActionDeleteforever12(props, ref) {
 };
 var ForwardRef$e = /*#__PURE__*/forwardRef(SvgActionDeleteforever12);
 
-var css$f = {"header":"FiltersPanelItem-module_header__hqSIh","removeButton":"FiltersPanelItem-module_removeButton__dWD-9","with-search":"FiltersPanelItem-module_with-search__sPAwy","panel":"FiltersPanelItem-module_panel__EfHsL","withSearch":"FiltersPanelItem-module_with-search__sPAwy"};
+var css$f = {"header":"jRIFsI","removeButton":"mLf7Zx","with-search":"mSZHMj","panel":"sKiDnb","withSearch":"mSZHMj"};
 
 function FiltersToolbarItemImpl(props) {
+    const { maxCount = 2 } = props;
     const isPickersType = (props === null || props === void 0 ? void 0 : props.type) === 'multiPicker' || (props === null || props === void 0 ? void 0 : props.type) === 'singlePicker';
     const isMobileScreen = isMobile();
     const popperModifiers = useMemo(() => {
@@ -2996,44 +3367,43 @@ function FiltersToolbarItemImpl(props) {
         switch (props.type) {
             case 'multiPicker': {
                 const view = props.dataSource.getView({}, forceUpdate);
-                const postfix = (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) > 2 ? ` +${(currentValue.length - 2).toString()} ${i18n.filterToolbar.pickerInput.itemsPlaceholder}` : null;
                 let isLoading = false;
                 const selection = currentValue
-                    ? currentValue === null || currentValue === void 0 ? void 0 : currentValue.slice(0, 2).map((i) => {
+                    ? currentValue === null || currentValue === void 0 ? void 0 : currentValue.slice(0, maxCount).map((i) => {
                         const item = view.getById(i, null);
                         isLoading = item.isLoading;
                         return getPickerItemName(item, props);
                     })
-                    : [currentValue];
-                const selectionText = isLoading ? selection : selection.join(', ');
-                return { selection: selectionText, postfix };
+                    : currentValue;
+                const postfix = (!isLoading && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) > maxCount) ? ` +${(currentValue.length - maxCount).toString()} ${i18n.filterToolbar.pickerInput.itemsPlaceholder}` : null;
+                return { selection, postfix };
             }
             case 'numeric': {
                 const isRangePredicate = predicate === 'inRange' || predicate === 'notInRange';
                 const decimalFormat = (val) => getSeparatedValue(val, { maximumFractionDigits: 2 });
                 if ((isRangePredicate && !currentValue) || (!isRangePredicate && !currentValue && currentValue !== 0)) {
-                    return { selection: currentValue };
+                    return { selection: undefined };
                 }
                 const selection = isRangePredicate
                     ? `${!(currentValue === null || currentValue === void 0 ? void 0 : currentValue.from) && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.from) !== 0 ? 'Min' : decimalFormat(currentValue === null || currentValue === void 0 ? void 0 : currentValue.from)} - ${!(currentValue === null || currentValue === void 0 ? void 0 : currentValue.to) && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.to) !== 0 ? 'Max' : decimalFormat(currentValue === null || currentValue === void 0 ? void 0 : currentValue.to)}`
                     : `${!currentValue && currentValue !== 0 ? 'ALL' : decimalFormat(currentValue)}`;
-                return { selection };
+                return { selection: [selection] };
             }
             case 'singlePicker': {
                 const view = props.dataSource.getView({}, forceUpdate);
                 if (currentValue === null || currentValue === undefined) {
-                    return { selection: currentValue };
+                    return { selection: undefined };
                 }
                 const item = view.getById(currentValue, null);
                 const selection = getPickerItemName(item, props);
-                return { selection };
+                return { selection: [selection] };
             }
             case 'datePicker': {
-                return { selection: currentValue ? dayjs(currentValue).format(props.format || defaultFormat) : i18n.filterToolbar.datePicker.placeholder };
+                return { selection: currentValue ? [dayjs(currentValue).format(props.format || defaultFormat)] : currentValue };
             }
             case 'rangeDatePicker': {
                 if (!currentValue || (!currentValue.from && !currentValue.to)) {
-                    return { selection: i18n.filterToolbar.rangeDatePicker.emptyPickerPlaceholder };
+                    return { selection: undefined };
                 }
                 const currentValueFrom = (currentValue === null || currentValue === void 0 ? void 0 : currentValue.from)
                     ? dayjs(currentValue === null || currentValue === void 0 ? void 0 : currentValue.from).format(props.format || defaultFormat)
@@ -3042,7 +3412,7 @@ function FiltersToolbarItemImpl(props) {
                     ? dayjs(currentValue === null || currentValue === void 0 ? void 0 : currentValue.to).format(props.format || defaultFormat)
                     : i18n.filterToolbar.rangeDatePicker.emptyPlaceholderTo;
                 const selection = `${currentValueFrom} - ${currentValueTo}`;
-                return { selection };
+                return { selection: [selection] };
             }
         }
     };
@@ -3179,9 +3549,9 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = React__default.memo(FiltersToolbarImpl);
 
-var css$e = {"divider":"PresetsPanel-module_divider__vk5zN","dropdownDeleteIcon":"PresetsPanel-module_dropdownDeleteIcon__nYd89","presetsWrapper":"PresetsPanel-module_presetsWrapper__cxER2","addPresetContainer":"PresetsPanel-module_addPresetContainer__3vzJU","dropContainer":"PresetsPanel-module_dropContainer__ao-Zt"};
+var css$e = {"divider":"MDnNWz","dropdownDeleteIcon":"Vd3PlN","presetsWrapper":"jYiW9G","addPresetContainer":"xLidLo","dropContainer":"tFbLLz"};
 
-var css$d = {"preset-dropdown-panel":"PresetActionsDropdown-module_preset-dropdown-panel__7QqJq","delete-row":"PresetActionsDropdown-module_delete-row__Akkel","delete-button":"PresetActionsDropdown-module_delete-button__PUypn","targetOpen":"PresetActionsDropdown-module_targetOpen__d1eob","presetDropdownPanel":"PresetActionsDropdown-module_preset-dropdown-panel__7QqJq","deleteRow":"PresetActionsDropdown-module_delete-row__Akkel","deleteButton":"PresetActionsDropdown-module_delete-button__PUypn"};
+var css$d = {"preset-dropdown-panel":"c2EfyR","delete-row":"Flkvfl","delete-button":"OKERxk","targetOpen":"W5YKAD","presetDropdownPanel":"c2EfyR","deleteRow":"Flkvfl","deleteButton":"OKERxk"};
 
 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); }
@@ -3321,7 +3691,7 @@ function PresetActionsDropdown(props) {
         return (React__default.createElement(Panel, { shadow: true, cx: css$d.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$q, caption: "Save in current", onClick: saveInCurrentHandler }))),
+                    React__default.createElement(DropdownMenuButton, { icon: ForwardRef$o, 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(FlexRow, { key: `${props.preset.id}-discard`, borderBottom: true },
@@ -3336,12 +3706,12 @@ function PresetActionsDropdown(props) {
                 React__default.createElement(DropdownMenuButton, { icon: ForwardRef$7, caption: "Delete", cx: css$d.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$r })));
+        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(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", modifiers: [{ name: 'offset', options: { offset: [0, 22] } }] }));
 }
 
-var css$c = {"preset-input-cell":"PresetInput-module_preset-input-cell__k9GyV","preset-input":"PresetInput-module_preset-input__pGJx6","presetInputCell":"PresetInput-module_preset-input-cell__k9GyV","presetInput":"PresetInput-module_preset-input__pGJx6"};
+var css$c = {"preset-input-cell":"vUxmY-","preset-input":"Q2zG4D","presetInputCell":"vUxmY-","presetInput":"Q2zG4D"};
 
 function PresetInput(props) {
     var _a;
@@ -3366,7 +3736,7 @@ function PresetInput(props) {
         React__default.createElement(TextInput, { cx: css$c.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50 })));
 }
 
-var css$b = {"preset":"Preset-module_preset__5zjTb","activePreset":"Preset-module_activePreset__XgJWT"};
+var css$b = {"preset":"LkHKYv","activePreset":"X5qfz4"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = useState(false);
@@ -3454,19 +3824,13 @@ const defaultPredicates = {
     rangeDatePicker: [{ predicate: 'inRange', name: 'In Range', isDefault: true }, { predicate: 'notInRange', name: 'Not in Range' }],
 };
 
-var css$a = {"root":"MainMenu-module_root__NqMvR"};
+var css$a = {"root":"ku9N6M"};
 
-function applyMainMenuMods() {
-    return [css$a.root];
-}
-const MainMenu = withMods(MainMenu$1, applyMainMenuMods, () => ({
-    Burger,
-    MainMenuDropdown,
-}));
+var css$9 = {"root":"_1Eu1XE","burger-content":"HArkk-","burgerContent":"HArkk-"};
 
 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 SvgGlobalMenu = function SvgGlobalMenu(props, ref) {
+var SvgBurger = function SvgBurger(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$5({
     width: 60,
     height: 60,
@@ -3474,62 +3838,39 @@ var SvgGlobalMenu = function SvgGlobalMenu(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), _path$4 || (_path$4 = /*#__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"
+    d: "M8 9.2h8v.8H8zM8 14h6v.8H8zm0-2.4h8v.8H8z"
   })));
 };
-var ForwardRef$5 = /*#__PURE__*/forwardRef(SvgGlobalMenu);
-
-var css$9 = {"global-menu-btn":"GlobalMenu-module_global-menu-btn__VNGyq","globalMenuIcon":"GlobalMenu-module_globalMenuIcon__BTMLp","globalMenuBtn":"GlobalMenu-module_global-menu-btn__VNGyq"};
-
-const GlobalMenu = React.forwardRef((props, ref) => (React.createElement("button", Object.assign({ ref: ref, id: "global_menu_toggle", className: cx(css$9.globalMenuBtn, props.cx) }, props.rawProps),
-    React.createElement(IconContainer, { icon: ForwardRef$5, cx: css$9.globalMenuIcon }))));
-
-var css$8 = {"root":"Burger-module_root__RyM45","burger-content":"Burger-module_burger-content__bbDNZ","burgerContent":"Burger-module_burger-content__bbDNZ"};
+var ForwardRef$5 = /*#__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 SvgBurger = function SvgBurger(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
-    width: 60,
-    height: 60,
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    ref: ref
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
-    d: "M8 9.2h8v.8H8zM8 14h6v.8H8zm0-2.4h8v.8H8z"
-  })));
-};
-var ForwardRef$4 = /*#__PURE__*/forwardRef(SvgBurger);
-
-var _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 SvgBurgerClose = function SvgBurgerClose(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
     width: 60,
     height: 60,
     viewBox: "0 0 60 60",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__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$3 = /*#__PURE__*/forwardRef(SvgBurgerClose);
+var ForwardRef$4 = /*#__PURE__*/forwardRef(SvgBurgerClose);
 
 function applyBurgerMods() {
-    return [css$8.root];
+    return [css$9.root];
 }
 const Burger = withMods(Burger$1, applyBurgerMods, () => ({
-    burgerIcon: ForwardRef$4,
-    crossIcon: ForwardRef$3,
-    burgerContentCx: css$8.burgerContent,
+    burgerIcon: ForwardRef$5,
+    crossIcon: ForwardRef$4,
+    burgerContentCx: css$9.burgerContent,
 }));
 
-var _g, _path$1;
-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 _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 SvgTriangle = function SvgTriangle(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
     width: 12,
     height: 24,
     viewBox: "0 0 12 24",
@@ -3546,21 +3887,21 @@ var SvgTriangle = function SvgTriangle(props, ref) {
     cx: 12,
     cy: 302.65,
     r: 18
-  }))), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+  }))), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
     d: "m5 14-4-4h8z"
   })));
 };
-var ForwardRef$2 = /*#__PURE__*/forwardRef(SvgTriangle);
+var ForwardRef$3 = /*#__PURE__*/forwardRef(SvgTriangle);
 
-var css$7 = {"root":"BurgerButton-module_root__t2JTr","button-primary":"BurgerButton-module_button-primary__Sqw6q","button-secondary":"BurgerButton-module_button-secondary__H4Hed","hasIcon":"BurgerButton-module_hasIcon__6lpPh","dropdown":"BurgerButton-module_dropdown__6OWuB","buttonPrimary":"BurgerButton-module_button-primary__Sqw6q","buttonSecondary":"BurgerButton-module_button-secondary__H4Hed"};
+var css$8 = {"root":"zAjemh","button-primary":"pzY3LX","button-secondary":"c5TsnA","hasIcon":"_9gEwVf","dropdown":"TfhNho","buttonPrimary":"pzY3LX","buttonSecondary":"c5TsnA"};
 
 const BurgerButton = withMods(Button$1, (props) => [
-    css$7.root, css$7['button-' + (props.type || 'primary')], css$7['indent-' + (props.indentLevel || 0)], props.isDropdown && css$7.dropdown, props.icon && css$7.hasIcon,
-], () => ({ dropdownIcon: ForwardRef$2, dropdownIconPosition: 'left', role: 'menuitem' }));
+    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' }));
 
-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); }
+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 SvgMenuInputCancel = function SvgMenuInputCancel(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 24,
@@ -3602,67 +3943,48 @@ var SvgMenuInputCancel = function SvgMenuInputCancel(props, ref) {
     transform: "matrix(3.77953 0 0 3.77953 -369 -648.52)"
   })));
 };
-var ForwardRef$1 = /*#__PURE__*/forwardRef(SvgMenuInputCancel);
+var ForwardRef$2 = /*#__PURE__*/forwardRef(SvgMenuInputCancel);
 
-var css$6 = {"search-input":"BurgerSearch-module_search-input__ot3xM","searchInput":"BurgerSearch-module_search-input__ot3xM"};
+var css$7 = {"search-input":"-A2C1p","searchInput":"-A2C1p"};
 
 function BurgerSearch(props) {
-    return (React.createElement(TextInput$1, { cx: css$6.searchInput, iconPosition: "left", icon: ForwardRef$X, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$1, autoFocus: true }));
+    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 }));
 }
 
-var css$5 = {"group-header":"BurgerGroupHeader-module_group-header__RPFIE","group-name":"BurgerGroupHeader-module_group-name__9SbW-","line":"BurgerGroupHeader-module_line__i1Bu-","groupHeader":"BurgerGroupHeader-module_group-header__RPFIE","groupName":"BurgerGroupHeader-module_group-name__9SbW-"};
+var css$6 = {"group-header":"mbhWD6","group-name":"EZhmB1","line":"iHRlJA","groupHeader":"mbhWD6","groupName":"EZhmB1"};
 
 function BurgerGroupHeader(props) {
-    return (React.createElement("div", { className: css$5.groupHeader },
-        React.createElement("hr", { className: css$5.line }),
-        React.createElement("span", { className: css$5.groupName }, props.caption)));
+    return (React.createElement("div", { className: css$6.groupHeader },
+        React.createElement("hr", { className: css$6.line }),
+        React.createElement("span", { className: css$6.groupName }, props.caption)));
 }
 
-var css$4 = {"container":"MainMenuAvatar-module_container__cen9B","open":"MainMenuAvatar-module_open__hjS1f"};
-
-const MainMenuAvatar = React.forwardRef((props, ref) => (React.createElement("button", { ref: ref, className: cx(css$4.container, props.isDropdown && css$4.dropdown, props.isOpen && css$4.open, props.onClick && uuiMarkers.clickable, props.cx), onClick: props.onClick },
-    React.createElement(Avatar$1, { size: "36", img: props.avatarUrl }),
-    props.icon && React.createElement(IconContainer, { icon: props.icon }),
-    props.isDropdown && (React.createElement("div", null,
-        React.createElement(IconContainer, { icon: ForwardRef$11, flipY: props.isOpen }))))));
-
-var css$3 = {"search-input":"MainMenuSearch-module_search-input__AdkL1","searchInput":"MainMenuSearch-module_search-input__AdkL1"};
-
-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$X, cancelIcon: ((_a = props.value) === null || _a === void 0 ? void 0 : _a.length) > 0 && ForwardRef$1 }, props, iEditable, { ref: ref, cx: cx$1(css$3.searchInput, props.cx) }, props.rawProps)));
-    } }))));
-
-var css$2 = {"container":"MainMenuIcon-module_container__6NlKF"};
-
-const MainMenuIcon = React.forwardRef((props, ref) => (React.createElement(IconButton, Object.assign({ ref: ref, icon: props.icon, cx: cx$1(props.cx, css$2.container) }, props))));
+var css$5 = {"root":"C4i0f0","type-primary":"AKRoaq","type-secondary":"KN8snq","typePrimary":"AKRoaq","typeSecondary":"KN8snq"};
 
-var css$1 = {"root":"MainMenuButton-module_root__pJ8X7","type-primary":"MainMenuButton-module_type-primary__8AIyW","type-secondary":"MainMenuButton-module_type-secondary__uxvwJ","typePrimary":"MainMenuButton-module_type-primary__8AIyW","typeSecondary":"MainMenuButton-module_type-secondary__uxvwJ"};
-
-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$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 SvgChevronDown24 = function SvgChevronDown24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
     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$1 || (_path$1 = /*#__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(SvgChevronDown24);
+var ForwardRef$1 = /*#__PURE__*/forwardRef(SvgChevronDown24);
 
-const MainMenuButton = withMods(Button$1, (mods) => [css$1.root, css$1['type-' + (mods.type || 'primary')]], () => ({ dropdownIcon: ForwardRef, role: 'menuitem' }));
+const MainMenuButton = withMods(Button$1, (mods) => [css$5.root, css$5['type-' + (mods.type || 'primary')]], () => ({ dropdownIcon: ForwardRef$1, role: 'menuitem' }));
 
-var css = {"dropdown-body":"MainMenuDropdown-module_dropdown-body__H16cM","dropdownBody":"MainMenuDropdown-module_dropdown-body__H16cM"};
+var css$4 = {"dropdown-body":"_5zLnDY","dropdownBody":"_5zLnDY"};
 
 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.dropdownBody) }, this.props.renderBody
+                return (React.createElement("div", { className: cx(css$4.dropdownBody) }, this.props.renderBody
                     ? this.props.renderBody(Object.assign({}, props))
                     : React.Children.map(this.props.children, (item) => {
                         if (!item)
@@ -3678,6 +4000,54 @@ class MainMenuDropdown extends React.Component {
     }
 }
 
+function applyMainMenuMods() {
+    return [css$a.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 SvgGlobalMenu = function SvgGlobalMenu(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    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", {
+    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 css$3 = {"global-menu-btn":"pGVKpY","globalMenuIcon":"kFSfJV","globalMenuBtn":"pGVKpY"};
+
+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 }))));
+
+var css$2 = {"container":"A9BIcJ","open":"_2aEPP4"};
+
+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 }),
+    props.icon && React.createElement(IconContainer, { icon: props.icon }),
+    props.isDropdown && (React.createElement("div", null,
+        React.createElement(IconContainer, { icon: ForwardRef$10, flipY: props.isOpen }))))));
+
+var css$1 = {"search-input":"wKYV3p","searchInput":"wKYV3p"};
+
+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)));
+    } }))));
+
+var css = {"container":"_1mnOEM"};
+
+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 Anchor = Anchor$1;
 
 function Form(props) {
@@ -3717,5 +4087,5 @@ 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, applyDatePickerBodyMods, applyDateSelectionMods, applyNumericInputMods, applyRangeDatePickerBodyMods, applySpinnerMods, applySwitchMods, applyTagMods, applyTextAreaMods, applyTextInputMods, defaultPredicates, getTextClasses, i18n, propsMods, renderCell, renderDropMarkers, useColumnsWithFilters, useForm };
+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 };
 //# sourceMappingURL=index.esm.js.map