@epam/uui 5.2.0-rc.2 → 5.2.0-rc.3

package/index.js

@@ -7,9 +7,10 @@ var dayjs = require('dayjs');
 var customParseFormat = require('dayjs/plugin/customParseFormat.js');
 var updateLocale = require('dayjs/plugin/updateLocale.js');
 var cx = require('classnames');
-var FocusLock = require('react-focus-lock');
+var localeData = require('dayjs/plugin/localeData');
 var sortBy = require('lodash.sortby');
 var isoWeek = require('dayjs/plugin/isoWeek.js');
+var FocusLock = require('react-focus-lock');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -36,14 +37,15 @@ var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
 var customParseFormat__default = /*#__PURE__*/_interopDefault(customParseFormat);
 var updateLocale__default = /*#__PURE__*/_interopDefault(updateLocale);
 var cx__default = /*#__PURE__*/_interopDefault(cx);
-var FocusLock__default = /*#__PURE__*/_interopDefault(FocusLock);
+var localeData__default = /*#__PURE__*/_interopDefault(localeData);
 var sortBy__default = /*#__PURE__*/_interopDefault(sortBy);
 var isoWeek__default = /*#__PURE__*/_interopDefault(isoWeek);
+var FocusLock__default = /*#__PURE__*/_interopDefault(FocusLock);
 
 var _path$1d;
-function _extends$1g() { _extends$1g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1g.apply(this, arguments); }
+function _extends$1f() { _extends$1f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1f.apply(this, arguments); }
 var SvgBtnCross12 = function SvgBtnCross12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1g({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
@@ -54,12 +56,12 @@ var SvgBtnCross12 = function SvgBtnCross12(props, ref) {
     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$1g = /*#__PURE__*/React.forwardRef(SvgBtnCross12);
+var ForwardRef$1f = /*#__PURE__*/React.forwardRef(SvgBtnCross12);
 
 var _path$1c;
-function _extends$1f() { _extends$1f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1f.apply(this, arguments); }
+function _extends$1e() { _extends$1e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1e.apply(this, arguments); }
 var SvgBtnCross18 = function SvgBtnCross18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1f({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
@@ -70,12 +72,12 @@ var SvgBtnCross18 = function SvgBtnCross18(props, ref) {
     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$1f = /*#__PURE__*/React.forwardRef(SvgBtnCross18);
+var ForwardRef$1e = /*#__PURE__*/React.forwardRef(SvgBtnCross18);
 
 var _path$1b;
-function _extends$1e() { _extends$1e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1e.apply(this, arguments); }
+function _extends$1d() { _extends$1d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1d.apply(this, arguments); }
 var SvgBtnCross24 = function SvgBtnCross24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1e({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -86,12 +88,12 @@ var SvgBtnCross24 = function SvgBtnCross24(props, ref) {
     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$1e = /*#__PURE__*/React.forwardRef(SvgBtnCross24);
+var ForwardRef$1d = /*#__PURE__*/React.forwardRef(SvgBtnCross24);
 
 var _path$1a;
-function _extends$1d() { _extends$1d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1d.apply(this, arguments); }
+function _extends$1c() { _extends$1c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1c.apply(this, arguments); }
 var SvgFoldingArrow12 = function SvgFoldingArrow12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1d({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
@@ -102,12 +104,12 @@ var SvgFoldingArrow12 = function SvgFoldingArrow12(props, ref) {
     d: "M8.295 4.295 6 6.585l-2.295-2.29L3 5l3 3 3-3z"
   })));
 };
-var ForwardRef$1d = /*#__PURE__*/React.forwardRef(SvgFoldingArrow12);
+var ForwardRef$1c = /*#__PURE__*/React.forwardRef(SvgFoldingArrow12);
 
 var _path$19;
-function _extends$1c() { _extends$1c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1c.apply(this, arguments); }
+function _extends$1b() { _extends$1b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1b.apply(this, arguments); }
 var SvgFoldingArrow18 = function SvgFoldingArrow18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1c({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1b({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
@@ -118,12 +120,12 @@ var SvgFoldingArrow18 = function SvgFoldingArrow18(props, ref) {
     d: "M12.443 6.442 9 9.877 5.558 6.442 4.5 7.5 9 12l4.5-4.5z"
   })));
 };
-var ForwardRef$1c = /*#__PURE__*/React.forwardRef(SvgFoldingArrow18);
+var ForwardRef$1b = /*#__PURE__*/React.forwardRef(SvgFoldingArrow18);
 
 var _path$18;
-function _extends$1b() { _extends$1b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1b.apply(this, arguments); }
+function _extends$1a() { _extends$1a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1a.apply(this, arguments); }
 var SvgFoldingArrow24 = function SvgFoldingArrow24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1b({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1a({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -134,12 +136,12 @@ var SvgFoldingArrow24 = function SvgFoldingArrow24(props, ref) {
     d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
   })));
 };
-var ForwardRef$1b = /*#__PURE__*/React.forwardRef(SvgFoldingArrow24);
+var ForwardRef$1a = /*#__PURE__*/React.forwardRef(SvgFoldingArrow24);
 
 var _path$17;
-function _extends$1a() { _extends$1a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1a.apply(this, arguments); }
+function _extends$19() { _extends$19 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$19.apply(this, arguments); }
 var SvgAccept12 = function SvgAccept12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1a({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$19({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
@@ -150,12 +152,12 @@ var SvgAccept12 = function SvgAccept12(props, ref) {
     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$1a = /*#__PURE__*/React.forwardRef(SvgAccept12);
+var ForwardRef$19 = /*#__PURE__*/React.forwardRef(SvgAccept12);
 
 var _path$16;
-function _extends$19() { _extends$19 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$19.apply(this, arguments); }
+function _extends$18() { _extends$18 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$18.apply(this, arguments); }
 var SvgAccept18 = function SvgAccept18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$19({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$18({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
@@ -166,12 +168,12 @@ var SvgAccept18 = function SvgAccept18(props, ref) {
     d: "M7.136 11.91 4.034 8.776 3 9.821 7.136 14 16 5.045 14.966 4z"
   })));
 };
-var ForwardRef$19 = /*#__PURE__*/React.forwardRef(SvgAccept18);
+var ForwardRef$18 = /*#__PURE__*/React.forwardRef(SvgAccept18);
 
 var _path$15;
-function _extends$18() { _extends$18 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$18.apply(this, arguments); }
+function _extends$17() { _extends$17 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$17.apply(this, arguments); }
 var SvgAccept24 = function SvgAccept24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$18({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$17({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -182,12 +184,12 @@ var SvgAccept24 = function SvgAccept24(props, ref) {
     d: "m9.727 16.075-4.295-4.388L4 13.149 9.727 19 22 6.463 20.568 5z"
   })));
 };
-var ForwardRef$18 = /*#__PURE__*/React.forwardRef(SvgAccept24);
+var ForwardRef$17 = /*#__PURE__*/React.forwardRef(SvgAccept24);
 
 var _path$14;
-function _extends$17() { _extends$17 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$17.apply(this, arguments); }
+function _extends$16() { _extends$16 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$16.apply(this, arguments); }
 var SvgSearch12 = function SvgSearch12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$17({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$16({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
@@ -198,12 +200,12 @@ var SvgSearch12 = function SvgSearch12(props, ref) {
     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$17 = /*#__PURE__*/React.forwardRef(SvgSearch12);
+var ForwardRef$16 = /*#__PURE__*/React.forwardRef(SvgSearch12);
 
 var _path$13;
-function _extends$16() { _extends$16 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$16.apply(this, arguments); }
+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 SvgSearch18 = function SvgSearch18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$16({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$15({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
@@ -214,12 +216,12 @@ var SvgSearch18 = function SvgSearch18(props, ref) {
     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$16 = /*#__PURE__*/React.forwardRef(SvgSearch18);
+var ForwardRef$15 = /*#__PURE__*/React.forwardRef(SvgSearch18);
 
 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); }
+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 SvgSearch24 = function SvgSearch24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$15({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$14({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -230,12 +232,12 @@ var SvgSearch24 = function SvgSearch24(props, ref) {
     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$15 = /*#__PURE__*/React.forwardRef(SvgSearch24);
+var ForwardRef$14 = /*#__PURE__*/React.forwardRef(SvgSearch24);
 
 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); }
+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 SvgCalendar12 = function SvgCalendar12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$14({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$13({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
@@ -246,12 +248,12 @@ var SvgCalendar12 = function SvgCalendar12(props, ref) {
     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$14 = /*#__PURE__*/React.forwardRef(SvgCalendar12);
+var ForwardRef$13 = /*#__PURE__*/React.forwardRef(SvgCalendar12);
 
 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); }
+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 SvgCalendar18 = function SvgCalendar18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$13({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$12({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
@@ -262,12 +264,12 @@ var SvgCalendar18 = function SvgCalendar18(props, ref) {
     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$13 = /*#__PURE__*/React.forwardRef(SvgCalendar18);
+var ForwardRef$12 = /*#__PURE__*/React.forwardRef(SvgCalendar18);
 
 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); }
+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 SvgCalendar24 = function SvgCalendar24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$12({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$11({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -278,12 +280,12 @@ var SvgCalendar24 = function SvgCalendar24(props, ref) {
     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$12 = /*#__PURE__*/React.forwardRef(SvgCalendar24);
+var ForwardRef$11 = /*#__PURE__*/React.forwardRef(SvgCalendar24);
 
 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); }
+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 SvgInfo12 = function SvgInfo12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$11({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$10({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
@@ -294,12 +296,12 @@ var SvgInfo12 = function SvgInfo12(props, ref) {
     fillRule: "evenodd"
   })));
 };
-var ForwardRef$11 = /*#__PURE__*/React.forwardRef(SvgInfo12);
+var ForwardRef$10 = /*#__PURE__*/React.forwardRef(SvgInfo12);
 
 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); }
+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 SvgInfo18 = function SvgInfo18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$10({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$$({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
@@ -310,12 +312,12 @@ var SvgInfo18 = function SvgInfo18(props, ref) {
     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$10 = /*#__PURE__*/React.forwardRef(SvgInfo18);
+var ForwardRef$$ = /*#__PURE__*/React.forwardRef(SvgInfo18);
 
 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); }
+function _extends$_() { _extends$_ = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$_.apply(this, arguments); }
 var SvgInfo24 = function SvgInfo24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$$({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$_({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -326,12 +328,12 @@ var SvgInfo24 = function SvgInfo24(props, ref) {
     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$$ = /*#__PURE__*/React.forwardRef(SvgInfo24);
+var ForwardRef$_ = /*#__PURE__*/React.forwardRef(SvgInfo24);
 
 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); }
+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 SvgHelpFill10 = function SvgHelpFill10(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$_({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$Z({
     width: 10,
     height: 10,
     viewBox: "0 0 10 10",
@@ -341,12 +343,12 @@ var SvgHelpFill10 = function SvgHelpFill10(props, ref) {
     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$_ = /*#__PURE__*/React.forwardRef(SvgHelpFill10);
+var ForwardRef$Z = /*#__PURE__*/React.forwardRef(SvgHelpFill10);
 
 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); }
+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 SvgHelpFill16 = function SvgHelpFill16(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$Z({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$Y({
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
@@ -356,12 +358,12 @@ var SvgHelpFill16 = function SvgHelpFill16(props, ref) {
     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$Z = /*#__PURE__*/React.forwardRef(SvgHelpFill16);
+var ForwardRef$Y = /*#__PURE__*/React.forwardRef(SvgHelpFill16);
 
 var _path$V;
-function _extends$Y() { _extends$Y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Y.apply(this, arguments); }
+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 SvgFileFileWord24 = function SvgFileFileWord24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$Y({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$X({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -373,12 +375,12 @@ var SvgFileFileWord24 = function SvgFileFileWord24(props, ref) {
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$Y = /*#__PURE__*/React.forwardRef(SvgFileFileWord24);
+var ForwardRef$X = /*#__PURE__*/React.forwardRef(SvgFileFileWord24);
 
 var _path$U;
-function _extends$X() { _extends$X = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$X.apply(this, arguments); }
+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 SvgFileFileExcel24 = function SvgFileFileExcel24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$X({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$W({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -390,12 +392,12 @@ var SvgFileFileExcel24 = function SvgFileFileExcel24(props, ref) {
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$X = /*#__PURE__*/React.forwardRef(SvgFileFileExcel24);
+var ForwardRef$W = /*#__PURE__*/React.forwardRef(SvgFileFileExcel24);
 
 var _path$T;
-function _extends$W() { _extends$W = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$W.apply(this, arguments); }
+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 SvgFileFilePdf24 = function SvgFileFilePdf24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$W({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$V({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -407,12 +409,12 @@ var SvgFileFilePdf24 = function SvgFileFilePdf24(props, ref) {
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$W = /*#__PURE__*/React.forwardRef(SvgFileFilePdf24);
+var ForwardRef$V = /*#__PURE__*/React.forwardRef(SvgFileFilePdf24);
 
 var _path$S;
-function _extends$V() { _extends$V = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$V.apply(this, arguments); }
+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 SvgFileFileImage24 = function SvgFileFileImage24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$V({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$U({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -424,12 +426,12 @@ var SvgFileFileImage24 = function SvgFileFileImage24(props, ref) {
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$V = /*#__PURE__*/React.forwardRef(SvgFileFileImage24);
+var ForwardRef$U = /*#__PURE__*/React.forwardRef(SvgFileFileImage24);
 
 var _path$R, _path2$2;
-function _extends$U() { _extends$U = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$U.apply(this, arguments); }
+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 SvgFileFileVideo24 = function SvgFileFileVideo24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$U({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$T({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -443,12 +445,12 @@ var SvgFileFileVideo24 = function SvgFileFileVideo24(props, ref) {
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$U = /*#__PURE__*/React.forwardRef(SvgFileFileVideo24);
+var ForwardRef$T = /*#__PURE__*/React.forwardRef(SvgFileFileVideo24);
 
 var _path$Q;
-function _extends$T() { _extends$T = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$T.apply(this, arguments); }
+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 SvgFileFileTable24 = function SvgFileFileTable24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$T({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$S({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -460,12 +462,12 @@ var SvgFileFileTable24 = function SvgFileFileTable24(props, ref) {
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$T = /*#__PURE__*/React.forwardRef(SvgFileFileTable24);
+var ForwardRef$S = /*#__PURE__*/React.forwardRef(SvgFileFileTable24);
 
 var _path$P;
-function _extends$S() { _extends$S = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$S.apply(this, arguments); }
+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 SvgFileFileText24 = function SvgFileFileText24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$S({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$R({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -477,12 +479,12 @@ var SvgFileFileText24 = function SvgFileFileText24(props, ref) {
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$S = /*#__PURE__*/React.forwardRef(SvgFileFileText24);
+var ForwardRef$R = /*#__PURE__*/React.forwardRef(SvgFileFileText24);
 
 var _path$O;
-function _extends$R() { _extends$R = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$R.apply(this, arguments); }
+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 SvgFileFileEml24 = function SvgFileFileEml24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$R({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$Q({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -494,12 +496,12 @@ var SvgFileFileEml24 = function SvgFileFileEml24(props, ref) {
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$R = /*#__PURE__*/React.forwardRef(SvgFileFileEml24);
+var ForwardRef$Q = /*#__PURE__*/React.forwardRef(SvgFileFileEml24);
 
 var _path$N;
-function _extends$Q() { _extends$Q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Q.apply(this, arguments); }
+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 SvgFileFile24 = function SvgFileFile24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$Q({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$P({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -511,48 +513,21 @@ var SvgFileFile24 = function SvgFileFile24(props, ref) {
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$Q = /*#__PURE__*/React.forwardRef(SvgFileFile24);
+var ForwardRef$P = /*#__PURE__*/React.forwardRef(SvgFileFile24);
 
 const fileIcons = {
-    docIcon: ForwardRef$Y,
-    exelIcon: ForwardRef$X,
-    pdfIcon: ForwardRef$W,
-    imgIcon: ForwardRef$V,
-    videoIcon: ForwardRef$U,
-    tableIcon: ForwardRef$T,
-    textIcon: ForwardRef$S,
-    mailIcon: ForwardRef$R,
-    fileIcon: ForwardRef$Q,
+    docIcon: ForwardRef$X,
+    exelIcon: ForwardRef$W,
+    pdfIcon: ForwardRef$V,
+    imgIcon: ForwardRef$U,
+    videoIcon: ForwardRef$T,
+    tableIcon: ForwardRef$S,
+    textIcon: ForwardRef$R,
+    mailIcon: ForwardRef$Q,
+    fileIcon: ForwardRef$P,
 };
 const systemIcons = {
     18: {
-        clear: ForwardRef$1g,
-        foldingArrow: ForwardRef$1d,
-        accept: ForwardRef$1a,
-        search: ForwardRef$17,
-        calendar: ForwardRef$14,
-        info: ForwardRef$11,
-        help: ForwardRef$_,
-    },
-    24: {
-        clear: ForwardRef$1g,
-        foldingArrow: ForwardRef$1d,
-        accept: ForwardRef$1a,
-        search: ForwardRef$17,
-        calendar: ForwardRef$14,
-        info: ForwardRef$11,
-        help: ForwardRef$_,
-    },
-    30: {
-        clear: ForwardRef$1f,
-        foldingArrow: ForwardRef$1c,
-        accept: ForwardRef$19,
-        search: ForwardRef$16,
-        calendar: ForwardRef$13,
-        info: ForwardRef$10,
-        help: ForwardRef$_,
-    },
-    36: {
         clear: ForwardRef$1f,
         foldingArrow: ForwardRef$1c,
         accept: ForwardRef$19,
@@ -561,7 +536,7 @@ const systemIcons = {
         info: ForwardRef$10,
         help: ForwardRef$Z,
     },
-    42: {
+    24: {
         clear: ForwardRef$1f,
         foldingArrow: ForwardRef$1c,
         accept: ForwardRef$19,
@@ -570,7 +545,7 @@ const systemIcons = {
         info: ForwardRef$10,
         help: ForwardRef$Z,
     },
-    48: {
+    30: {
         clear: ForwardRef$1e,
         foldingArrow: ForwardRef$1b,
         accept: ForwardRef$18,
@@ -579,39 +554,66 @@ const systemIcons = {
         info: ForwardRef$$,
         help: ForwardRef$Z,
     },
-    60: {
+    36: {
         clear: ForwardRef$1e,
         foldingArrow: ForwardRef$1b,
         accept: ForwardRef$18,
         search: ForwardRef$15,
         calendar: ForwardRef$12,
         info: ForwardRef$$,
-        help: ForwardRef$Z,
+        help: ForwardRef$Y,
+    },
+    42: {
+        clear: ForwardRef$1e,
+        foldingArrow: ForwardRef$1b,
+        accept: ForwardRef$18,
+        search: ForwardRef$15,
+        calendar: ForwardRef$12,
+        info: ForwardRef$$,
+        help: ForwardRef$Y,
+    },
+    48: {
+        clear: ForwardRef$1d,
+        foldingArrow: ForwardRef$1a,
+        accept: ForwardRef$17,
+        search: ForwardRef$14,
+        calendar: ForwardRef$11,
+        info: ForwardRef$_,
+        help: ForwardRef$Y,
+    },
+    60: {
+        clear: ForwardRef$1d,
+        foldingArrow: ForwardRef$1a,
+        accept: ForwardRef$17,
+        search: ForwardRef$14,
+        calendar: ForwardRef$11,
+        info: ForwardRef$_,
+        help: ForwardRef$Y,
     },
     none: {
-        clear: ForwardRef$1f,
-        foldingArrow: ForwardRef$1c,
-        accept: ForwardRef$19,
-        search: ForwardRef$16,
-        calendar: ForwardRef$13,
-        info: ForwardRef$10,
-        help: ForwardRef$Z,
+        clear: ForwardRef$1e,
+        foldingArrow: ForwardRef$1b,
+        accept: ForwardRef$18,
+        search: ForwardRef$15,
+        calendar: ForwardRef$12,
+        info: ForwardRef$$,
+        help: ForwardRef$Y,
     },
 };
 
-var css$1h = {"root":"_5ynll0","size-18":"S9AhMl","size-24":"kK2z52","size-30":"H-FMj9","size-36":"_62G7eb","size-42":"-VelrW","size-48":"Oo-AvP","size18":"S9AhMl","size24":"kK2z52","size30":"H-FMj9","size36":"_62G7eb","size42":"-VelrW","size48":"Oo-AvP"};
+var css$1l = {"root":"_8xDYat","size-18":"CUnR2U","size-24":"n-QNUz","size-30":"WJXZhd","size-36":"GYxQn3","size-42":"JrC7Ne","size-48":"mkEgLj","size18":"CUnR2U","size24":"n-QNUz","size30":"WJXZhd","size36":"GYxQn3","size42":"JrC7Ne","size48":"mkEgLj"};
 
 const allButtonColors = [
-    'accent', 'primary', 'secondary', 'negative',
+    'accent', 'primary', 'secondary', 'critical',
 ];
 const defaultSize$b = '36';
 function applyButtonMods(mods) {
     return [
-        css$1h.root,
+        css$1l.root,
         'uui-button',
         `uui-fill-${mods.fill || 'solid'}`,
         `uui-color-${mods.color || 'primary'}`,
-        css$1h[`size-${mods.size || defaultSize$b}`],
+        css$1l[`size-${mods.size || defaultSize$b}`],
     ];
 }
 const Button = uuiCore.withMods(uuiComponents.Button, applyButtonMods, (props) => ({
@@ -619,17 +621,17 @@ const Button = uuiCore.withMods(uuiComponents.Button, applyButtonMods, (props) =
     clearIcon: systemIcons[props.size || defaultSize$b].clear,
 }));
 
-var css$1g = {"root":"_9Zz54b"};
+var css$1k = {"root":"B5z-iP"};
 
 const allIconColors = [
-    'info', 'success', 'warning', 'error', 'secondary', 'default',
+    'info', 'success', 'warning', 'error', 'secondary', 'neutral',
 ];
 function applyIconButtonMods(mods) {
-    return ['uui-icon_button', `uui-color-${mods.color || 'default'}`, css$1g.root]; // TODO: default - wrong naming need fix it
+    return ['uui-icon_button', `uui-color-${mods.color || 'neutral'}`, css$1k.root];
 }
 const IconButton = uuiCore.withMods(uuiComponents.IconButton, applyIconButtonMods);
 
-var css$1f = {"root":"gC3wbA","size-18":"jzAs3k","size-24":"NtOTSq","size-30":"FfH7BZ","size-36":"s3jmXc","size-42":"_1mjjie","size-48":"m9AVGl","size18":"jzAs3k","size24":"NtOTSq","size30":"FfH7BZ","size36":"s3jmXc","size42":"_1mjjie","size48":"m9AVGl"};
+var css$1j = {"root":"mWCYfr","size-18":"JGq-lV","size-24":"xKhXMC","size-30":"YBQ-6X","size-36":"jGDPvD","size-42":"lIQCww","size-48":"PgKsfV","size18":"JGq-lV","size24":"xKhXMC","size30":"YBQ-6X","size36":"jGDPvD","size42":"lIQCww","size48":"PgKsfV"};
 
 function getIconClass(props) {
     const classList = {
@@ -653,8 +655,8 @@ const allLinkButtonColors = ['primary', 'secondary', 'contrast'];
 function applyLinkButtonMods(mods) {
     return [
         'uui-link_button',
-        css$1f.root,
-        css$1f['size-' + (mods.size || defaultSize$a)],
+        css$1j.root,
+        css$1j['size-' + (mods.size || defaultSize$a)],
         ...getIconClass(mods),
         `uui-color-${mods.color || 'primary'}`,
     ];
@@ -664,24 +666,23 @@ const LinkButton = uuiCore.withMods(uuiComponents.Button, applyLinkButtonMods, (
     clearIcon: systemIcons[props.size || defaultSize$a].clear,
 }));
 
-var css$1e = {"root":"k0JRPN","uui-notification":"UKdWBG","size-36":"gSNopp","size-48":"BCH4uY","size-60":"W6sYZf","uuiNotification":"UKdWBG","size36":"gSNopp","size48":"BCH4uY","size60":"W6sYZf"};
+var css$1i = {"root":"qRkalt","withNotify":"PZj3JN","size-36":"UKYRFQ","size-48":"_33MZE0","size-60":"Onrb-Z","size36":"UKYRFQ","size48":"_33MZE0","size60":"Onrb-Z"};
 
 function applyTabButtonMods(mods) {
     return [
-        css$1e.root,
+        css$1i.root,
         'uui-tab-button',
-        'informer-default',
-        css$1e['size-' + (mods.size || '48')],
-        mods.withNotify && css$1e.uuiNotification,
+        css$1i['size-' + (mods.size || '48')],
+        mods.withNotify && css$1i.withNotify,
         ...getIconClass(mods),
     ];
 }
 const TabButton = uuiCore.withMods(uuiComponents.Button, 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$1d = {"root":"VaKh8F"};
+var css$1h = {"root":"P-Xm-d"};
 
 function applyVerticalTabButtonMods() {
-    return [css$1d.root];
+    return [css$1h.root];
 }
 const VerticalTabButton = uuiCore.withMods(TabButton, applyVerticalTabButtonMods);
 
@@ -698,11 +699,8 @@ const allRowSizes = [
 const allSemanticColors = [
     'info', 'success', 'warning', 'error',
 ];
-const allButtonSemanticColors = [
-    'accent', 'primary', 'secondary', 'negative',
-];
 const allEpamBadgeSemanticColors = [
-    'info', 'success', 'warning', 'error', 'default',
+    'info', 'success', 'warning', 'error', 'neutral',
 ];
 const allTextSizes = [
     '18', '24', '30', '36', '48',
@@ -718,9 +716,9 @@ exports.EditMode = void 0;
 })(exports.EditMode || (exports.EditMode = {}));
 
 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); }
+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 SvgCheck12 = function SvgCheck12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$P({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$O({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
@@ -731,12 +729,12 @@ var SvgCheck12 = function SvgCheck12(props, ref) {
     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$P = /*#__PURE__*/React.forwardRef(SvgCheck12);
+var ForwardRef$O = /*#__PURE__*/React.forwardRef(SvgCheck12);
 
 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); }
+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 SvgCheck18 = function SvgCheck18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$O({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$N({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
@@ -747,12 +745,12 @@ var SvgCheck18 = function SvgCheck18(props, ref) {
     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$O = /*#__PURE__*/React.forwardRef(SvgCheck18);
+var ForwardRef$N = /*#__PURE__*/React.forwardRef(SvgCheck18);
 
 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); }
+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 SvgPartlySelect12 = function SvgPartlySelect12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$N({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$M({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
@@ -763,12 +761,12 @@ var SvgPartlySelect12 = function SvgPartlySelect12(props, ref) {
     d: "M9 5v2H3V5z"
   })));
 };
-var ForwardRef$N = /*#__PURE__*/React.forwardRef(SvgPartlySelect12);
+var ForwardRef$M = /*#__PURE__*/React.forwardRef(SvgPartlySelect12);
 
 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); }
+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 SvgPartlySelect18 = function SvgPartlySelect18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$M({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$L({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
@@ -779,30 +777,30 @@ var SvgPartlySelect18 = function SvgPartlySelect18(props, ref) {
     d: "M14 8v2H4V8z"
   })));
 };
-var ForwardRef$M = /*#__PURE__*/React.forwardRef(SvgPartlySelect18);
+var ForwardRef$L = /*#__PURE__*/React.forwardRef(SvgPartlySelect18);
 
-var css$1c = {"root":"osARZp","size-18":"_3dlYIr","size-12":"WpmORg","mode-cell":"FlP6ld","size18":"_3dlYIr","size12":"WpmORg","modeCell":"FlP6ld"};
+var css$1g = {"root":"mCn1wd","size-18":"-pnsU7","size-12":"_3NAUAF","mode-cell":"s8ghIq","size18":"-pnsU7","size12":"_3NAUAF","modeCell":"s8ghIq"};
 
 function applyCheckboxMods(mods) {
     return [
-        css$1c.root,
-        css$1c['size-' + (mods.size || '18')],
-        css$1c['mode-' + (mods.mode || 'form')],
+        css$1g.root,
+        css$1g['size-' + (mods.size || '18')],
+        css$1g['mode-' + (mods.mode || 'form')],
         'uui-color-primary',
     ];
 }
 const applyUUICheckboxProps = (props) => ({
-    icon: props.size === '12' ? ForwardRef$P : ForwardRef$O,
-    indeterminateIcon: props.size === '12' ? ForwardRef$N : ForwardRef$M,
+    icon: props.size === '12' ? ForwardRef$O : ForwardRef$N,
+    indeterminateIcon: props.size === '12' ? ForwardRef$M : ForwardRef$L,
 });
 const Checkbox = uuiCore.withMods(uuiComponents.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$1b = {"root":"a6WcBR","size-18":"RBeS-N","size-12":"ewcmHD","size18":"RBeS-N","size12":"ewcmHD"};
+var css$1f = {"root":"NDw01S","size-18":"Z7qS3J","size-12":"ylYjgF","size18":"Z7qS3J","size12":"ylYjgF"};
 
 var _circle;
-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); }
+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 SvgRadioPoint = function SvgRadioPoint(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$L({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$K({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
@@ -814,18 +812,18 @@ var SvgRadioPoint = function SvgRadioPoint(props, ref) {
     r: 6
   })));
 };
-var ForwardRef$L = /*#__PURE__*/React.forwardRef(SvgRadioPoint);
+var ForwardRef$K = /*#__PURE__*/React.forwardRef(SvgRadioPoint);
 
 function applyRadioInputMods(mods) {
-    return [css$1b.root, css$1b['size-' + (mods.size || '18')], 'uui-color-primary'];
+    return [css$1f.root, css$1f['size-' + (mods.size || '18')], 'uui-color-primary'];
 }
-const RadioInput = uuiCore.withMods(uuiComponents.RadioInput, applyRadioInputMods, () => ({ icon: ForwardRef$L }));
+const RadioInput = uuiCore.withMods(uuiComponents.RadioInput, applyRadioInputMods, () => ({ icon: ForwardRef$K }));
 
-var css$1a = {"root":"Z3Ox-1","size-12":"KOM9YM","size-18":"stcLau","size-24":"FOuJ-r","size12":"KOM9YM","size18":"stcLau","size24":"FOuJ-r"};
+var css$1e = {"root":"yswhAi","size-12":"AKebHP","size-18":"SyOckL","size-24":"_1aUprk","size12":"AKebHP","size18":"SyOckL","size24":"_1aUprk"};
 
 function applySwitchMods(mods) {
     return [
-        css$1a.root, css$1a['size-' + (mods.size || '18')], 'uui-color-primary',
+        css$1e.root, css$1e['size-' + (mods.size || '18')], 'uui-color-primary',
     ];
 }
 const Switch = uuiCore.withMods(uuiComponents.Switch, applySwitchMods);
@@ -874,7 +872,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var textInputCss = {"root":"hWnarL","mode-form":"_98brw2","mode-inline":"AjPeqR","mode-cell":"v0dVs3","size-24":"zIuAyF","size-30":"OWPPDy","size-36":"GNeSss","size-42":"zQ-a46","size-48":"In98Fu","modeForm":"_98brw2","modeInline":"AjPeqR","modeCell":"v0dVs3","size24":"zIuAyF","size30":"OWPPDy","size36":"GNeSss","size42":"zQ-a46","size48":"In98Fu"};
+var textInputCss = {"root":"pQN2Hb","mode-form":"jYbWAN","mode-inline":"a15a6A","mode-cell":"iTNCzd","size-24":"LtSJwc","size-30":"V3DpDv","size-36":"G3kf7f","size-42":"_9yiRif","size-48":"LKb2a0","modeForm":"jYbWAN","modeInline":"a15a6A","modeCell":"iTNCzd","size24":"LtSJwc","size30":"V3DpDv","size36":"G3kf7f","size42":"_9yiRif","size48":"LKb2a0"};
 
 const defaultSize$9 = '36';
 const defaultMode$5 = exports.EditMode.FORM;
@@ -903,22 +901,22 @@ const SearchInput = React__namespace.default.forwardRef((props, ref) => {
                 : undefined, type: "search", inputMode: "search", ref: ref }, textInputProps, iEditable))) })));
 });
 
-var css$19 = {"root":"_3uyeRg"};
+var css$1d = {"root":"XFGIxV"};
 
-const ControlGroup = uuiCore.withMods(uuiComponents.ControlGroup, () => [css$19.root]);
+const ControlGroup = uuiCore.withMods(uuiComponents.ControlGroup, () => [css$1d.root]);
 
 function MultiSwitchComponent(props, ref) {
     return (React__namespace.createElement(ControlGroup, { ref: ref, rawProps: Object.assign(Object.assign({}, props.rawProps), { role: 'tablist' }) }, props.items.map((item, index) => (React__namespace.createElement(Button, Object.assign({}, props, item, { isDisabled: props.isDisabled, key: index + '-' + item.id, onClick: () => props.onValueChange(item.id), fill: 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__namespace.forwardRef(MultiSwitchComponent);
 
-var css$18 = {"root":"DPv5eI","size-24":"_7mkkpb","size-30":"Itf4Rm","size-36":"xV-JJn","size-42":"bvWhtW","size-48":"Xbgr16","mode-form":"G2POqw","mode-cell":"sM226V","size24":"_7mkkpb","size30":"Itf4Rm","size36":"xV-JJn","size42":"bvWhtW","size48":"Xbgr16","modeForm":"G2POqw","modeCell":"sM226V"};
+var css$1c = {"root":"_2Bn2t-","size-24":"FvOkQz","size-30":"yrVy9l","size-36":"RLTuCt","size-42":"N1Rcf4","size-48":"WExutP","mode-form":"Ozo4-p","mode-cell":"yYTf-L","size24":"FvOkQz","size30":"yrVy9l","size36":"RLTuCt","size42":"N1Rcf4","size48":"WExutP","modeForm":"Ozo4-p","modeCell":"yYTf-L"};
 
 const defaultSize$8 = '36';
 const defaultMode$4 = exports.EditMode.FORM;
 function applyNumericInputMods(mods) {
     return [
-        textInputCss.root, css$18.root, css$18['size-' + (mods.size || defaultSize$8)], textInputCss['size-' + (mods.size || defaultSize$8)], textInputCss['mode-' + (mods.mode || defaultMode$4)],
+        textInputCss.root, css$1c.root, css$1c['size-' + (mods.size || defaultSize$8)], textInputCss['size-' + (mods.size || defaultSize$8)], textInputCss['mode-' + (mods.mode || defaultMode$4)],
     ];
 }
 const NumericInput = uuiCore.withMods(uuiComponents.NumericInput, applyNumericInputMods, (props) => {
@@ -931,13 +929,13 @@ const NumericInput = uuiCore.withMods(uuiComponents.NumericInput, applyNumericIn
     });
 });
 
-var css$17 = {"root":"Hb55pe","mode-form":"GjQvcd","mode-cell":"HlinVr","mode-inline":"Ngm2FY","size-24":"EWp2DA","size-30":"_0FtNQX","size-36":"lFpDEP","size-42":"WPcvpP","size-48":"SLjLGx","modeForm":"GjQvcd","modeCell":"HlinVr","modeInline":"Ngm2FY","size24":"EWp2DA","size30":"_0FtNQX","size36":"lFpDEP","size42":"WPcvpP","size48":"SLjLGx"};
+var css$1b = {"root":"bkrhfN","mode-form":"UAONtW","mode-cell":"yBW8Xe","mode-inline":"Uhf64E","size-24":"_4TYlSr","size-30":"SUQKWW","size-36":"JqlVkG","size-42":"aQfEdH","size-48":"Wa2cTq","modeForm":"UAONtW","modeCell":"yBW8Xe","modeInline":"Uhf64E","size24":"_4TYlSr","size30":"SUQKWW","size36":"JqlVkG","size42":"aQfEdH","size48":"Wa2cTq"};
 
 const defaultSize$7 = '36';
 const defaultMode$3 = exports.EditMode.FORM;
 function applyTextAreaMods(mods) {
     return [
-        css$17.root, css$17['size-' + (mods.size || defaultSize$7)], css$17['mode-' + (mods.mode || defaultMode$3)],
+        css$1b.root, css$1b['size-' + (mods.size || defaultSize$7)], css$1b['mode-' + (mods.mode || defaultMode$3)],
     ];
 }
 const TextArea = uuiCore.withMods(uuiComponents.TextArea, applyTextAreaMods, (props) => ({
@@ -945,18 +943,20 @@ const TextArea = uuiCore.withMods(uuiComponents.TextArea, applyTextAreaMods, (pr
     maxLength: props.mode === exports.EditMode.CELL ? undefined : props.maxLength,
 }));
 
-var css$16 = {"root":"_6Mz11K"};
+var css$1a = {"root":"Bts3XB"};
 
 function applyDropdownContainerMods(mods) {
     return [
-        css$16.root, mods.vPadding && `vPadding-${mods.vPadding}`, mods.padding && `padding-${mods.padding}`,
+        css$1a.root,
+        mods.vPadding && `vPadding-${mods.vPadding}`,
+        mods.padding && `padding-${mods.padding}`,
     ];
 }
 const DropdownContainer = uuiCore.withMods(uuiComponents.DropdownContainer, applyDropdownContainerMods);
 
-var css$15 = {"root":"AWJEEE","icon":"XLw6DC","date-input":"GSeQev","dateInput":"GSeQev"};
+var css$19 = {"root":"jThuOL","icon":"_0eoPvM","date-input":"wz-piV","dateInput":"wz-piV"};
 
-const TimePickerBody = uuiCore.withMods(uuiComponents.TimePickerBody, () => [css$15.root], () => ({ addIcon: ForwardRef$1c, subtractIcon: ForwardRef$1c }));
+const TimePickerBody = uuiCore.withMods(uuiComponents.TimePickerBody, () => [css$19.root], () => ({ addIcon: ForwardRef$1b, subtractIcon: ForwardRef$1b }));
 
 dayjs__default.default.extend(customParseFormat__default.default);
 const defaultMode$2 = exports.EditMode.FORM;
@@ -976,22 +976,31 @@ class TimePicker extends uuiComponents.BaseTimePicker {
                     });
                 }
             }
-            return (React__namespace.default.createElement(TextInput, Object.assign({}, props, { onClick: null, size: this.props.size || '36', isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, isInvalid: this.props.isInvalid, cx: [css$15.dateInput, this.props.inputCx], value: this.state.value, onValueChange: this.handleInputChange, onCancel: this.onClear, onFocus: this.handleFocus, onBlur: this.handleBlur, isDropdown: false, placeholder: this.props.placeholder ? this.props.placeholder : this.getFormat(), mode: this.props.mode || defaultMode$2, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.input })));
+            return (React__namespace.default.createElement(TextInput, Object.assign({}, props, { onClick: null, size: this.props.size || '36', isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, isInvalid: this.props.isInvalid, cx: [css$19.root, css$19.dateInput, this.props.inputCx], value: this.state.value, onValueChange: this.handleInputChange, onCancel: this.onClear, onFocus: this.handleFocus, onBlur: this.handleBlur, isDropdown: false, placeholder: this.props.placeholder ? this.props.placeholder : this.getFormat(), mode: this.props.mode || defaultMode$2, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.input })));
         };
         this.renderBody = (props) => {
             var _a;
-            return (!this.props.isDisabled && !this.props.isReadonly && (React__namespace.default.createElement(DropdownContainer, Object.assign({}, props),
+            return (!this.props.isDisabled && !this.props.isReadonly && (React__namespace.default.createElement(DropdownContainer, Object.assign({}, props, { focusLock: false }),
                 React__namespace.default.createElement(TimePickerBody, Object.assign({}, this.props, { value: this.props.value !== null ? this.props.value : { hours: null, minutes: null }, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.body, cx: this.props.bodyCx })))));
         };
     }
 }
 
-var css$14 = {"container":"gW40VX"};
+var css$18 = {"root":"_5Rd7CG"};
+
+function applyInputAddonMods() {
+    return [
+        css$18.root,
+    ];
+}
+const InputAddon = uuiCore.withMods(uuiComponents.InputAddon, applyInputAddonMods);
+
+var css$17 = {"container":"YgfwCr"};
 
 var _path$I;
-function _extends$K() { _extends$K = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$K.apply(this, arguments); }
+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 SvgNavigationChevronLeft18 = function SvgNavigationChevronLeft18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$K({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$J({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
@@ -1003,12 +1012,12 @@ var SvgNavigationChevronLeft18 = function SvgNavigationChevronLeft18(props, ref)
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$K = /*#__PURE__*/React.forwardRef(SvgNavigationChevronLeft18);
+var ForwardRef$J = /*#__PURE__*/React.forwardRef(SvgNavigationChevronLeft18);
 
 var _path$H;
-function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); }
+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 SvgNavigationChevronRight18 = function SvgNavigationChevronRight18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$J({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$I({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
@@ -1020,8 +1029,9 @@ var SvgNavigationChevronRight18 = function SvgNavigationChevronRight18(props, re
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$J = /*#__PURE__*/React.forwardRef(SvgNavigationChevronRight18);
+var ForwardRef$I = /*#__PURE__*/React.forwardRef(SvgNavigationChevronRight18);
 
+dayjs__default.default.extend(localeData__default.default);
 const uuiHeader = {
     container: 'uui-datepickerheader-container',
     header: 'uui-datepickerheader-header',
@@ -1094,20 +1104,22 @@ function DatePickerHeader(props) {
         var _a, _b, _c;
         return `${((_a = props.value) === null || _a === void 0 ? void 0 : _a.view) !== 'MONTH_SELECTION' ? dayjs__default.default.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__namespace.createElement("div", { className: cx__default.default(css$14.container, uuiHeader.container, props.cx) },
+    return (React__namespace.createElement("div", { className: cx__default.default(css$17.container, uuiHeader.container, props.cx) },
         React__namespace.createElement("header", { className: uuiHeader.header },
-            React__namespace.createElement(Button, { icon: ForwardRef$K, color: "secondary", fill: "ghost", cx: uuiHeader.navIconLeft, onClick: () => onLeftNavigationArrow() }),
+            React__namespace.createElement(Button, { icon: props.navIconLeft || ForwardRef$J, color: "secondary", fill: "ghost", cx: uuiHeader.navIconLeft, onClick: () => onLeftNavigationArrow() }),
             React__namespace.createElement(Button, { caption: title, fill: "ghost", cx: uuiHeader.navTitle, onClick: () => onCaptionClick(props.value.view) }),
-            React__namespace.createElement(Button, { icon: ForwardRef$J, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: () => onRightNavigationArrow() }))));
+            React__namespace.createElement(Button, { icon: props.navIconRight || ForwardRef$I, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: () => onRightNavigationArrow() }))));
 }
 
-var css$13 = {"root":"ExtSYB"};
+var css$16 = {"root":"F9Yc8K"};
 
 function applyDateSelectionMods() {
-    return [css$13.root];
+    return [css$16.root];
 }
 const Calendar = uuiCore.withMods(uuiComponents.Calendar, applyDateSelectionMods);
 
+var css$15 = {"root":"OWohPB"};
+
 dayjs__default.default.extend(updateLocale__default.default);
 const uuiDatePickerBody = {
     wrapper: 'uui-datepickerBody-wrapper',
@@ -1133,8 +1145,8 @@ class DatePickerBody extends uuiComponents.DatePickerBodyBase {
                     return (React__namespace.createElement(Calendar, { value: dayjs__default.default(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__namespace.createElement("div", { className: uuiCore.cx(uuiDatePickerBody.wrapper, this.props.cx) },
+        this.renderBody = () => {
+            return (React__namespace.createElement("div", { className: uuiCore.cx(css$15.root, uuiDatePickerBody.wrapper, this.props.cx) },
                 React__namespace.createElement(DatePickerHeader, { value: this.props.value, onValueChange: (newValue) => this.props.setDisplayedDateAndView(newValue.displayedDate, newValue.view) }),
                 this.getView()));
         };
@@ -1144,9 +1156,9 @@ class DatePickerBody extends uuiComponents.DatePickerBodyBase {
 }
 
 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); }
+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__namespace.createElement("svg", _extends$I({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -1157,12 +1169,12 @@ var SvgNotificationCheckCircleFill24 = function SvgNotificationCheckCircleFill24
     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__*/React.forwardRef(SvgNotificationCheckCircleFill24);
+var ForwardRef$H = /*#__PURE__*/React.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); }
+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__namespace.createElement("svg", _extends$H({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -1173,12 +1185,12 @@ var SvgNotificationWarningFill24 = function SvgNotificationWarningFill24(props,
     d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
   })));
 };
-var ForwardRef$H = /*#__PURE__*/React.forwardRef(SvgNotificationWarningFill24);
+var ForwardRef$G = /*#__PURE__*/React.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); }
+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__namespace.createElement("svg", _extends$G({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -1189,12 +1201,12 @@ var SvgNotificationErrorFill24 = function SvgNotificationErrorFill24(props, ref)
     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__*/React.forwardRef(SvgNotificationErrorFill24);
+var ForwardRef$F = /*#__PURE__*/React.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); }
+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__namespace.createElement("svg", _extends$F({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -1205,12 +1217,12 @@ var SvgNotificationHelpFill24 = function SvgNotificationHelpFill24(props, ref) {
     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__*/React.forwardRef(SvgNotificationHelpFill24);
+var ForwardRef$E = /*#__PURE__*/React.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); }
+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__namespace.createElement("svg", _extends$E({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -1221,28 +1233,28 @@ var SvgNavigationClose24$1 = function SvgNavigationClose24(props, ref) {
     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__*/React.forwardRef(SvgNavigationClose24$1);
+var ForwardRef$D = /*#__PURE__*/React.forwardRef(SvgNavigationClose24$1);
 
-var css$12 = {"root":"fHQEfn","icon-wrapper":"Te1C6p","alert-wrapper":"QZMybO","size-48":"pWUPAv","size-36":"Q608u9","action-wrapper":"x6mdaF","action-icon":"RSTk3V","action-link":"ck75ps","close-icon":"J-vxVp","main-path":"uURsb8","content":"khvWyj","iconWrapper":"Te1C6p","alertWrapper":"QZMybO","size48":"pWUPAv","size36":"Q608u9","actionWrapper":"x6mdaF","actionIcon":"RSTk3V","actionLink":"ck75ps","closeIcon":"J-vxVp","mainPath":"uURsb8"};
+var css$14 = {"root":"_0ZIked","icon-wrapper":"_323APP","alert-wrapper":"UKzorq","size-48":"jDI03w","size-36":"kUk8dq","action-wrapper":"qb8FPn","action-icon":"RmKnuG","action-link":"ZSsfts","close-icon":"kdwLKQ","main-path":"L-dHhV","content":"hYii3z","iconWrapper":"_323APP","alertWrapper":"UKzorq","size48":"jDI03w","size36":"kUk8dq","actionWrapper":"qb8FPn","actionIcon":"RmKnuG","actionLink":"ZSsfts","closeIcon":"kdwLKQ","mainPath":"L-dHhV"};
 
-const Alert = React__namespace.forwardRef((props, ref) => (React__namespace.createElement("div", Object.assign({ role: "alert", ref: ref, className: cx__default.default('uui-alert', css$12.alertWrapper, `uui-color-${props.color || 'default'}`, css$12.root, props.cx, (props.size === '36' ? css$12.size36 : css$12.size48)) }, props.rawProps),
-    React__namespace.createElement("div", { className: css$12.mainPath },
-        props.icon && (React__namespace.createElement("div", { className: css$12.iconWrapper },
-            React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon, cx: css$12.actionIcon }))),
-        React__namespace.createElement("div", { className: css$12.content },
+const Alert = React__namespace.forwardRef((props, ref) => (React__namespace.createElement("div", Object.assign({ role: "alert", ref: ref, className: cx__default.default('uui-alert', css$14.root, css$14.alertWrapper, props.color && `uui-color-${props.color}`, props.cx, (props.size === '36' ? css$14.size36 : css$14.size48)) }, props.rawProps),
+    React__namespace.createElement("div", { className: css$14.mainPath },
+        props.icon && (React__namespace.createElement("div", { className: css$14.iconWrapper },
+            React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon, cx: css$14.actionIcon }))),
+        React__namespace.createElement("div", { className: css$14.content },
             props.children,
-            props.actions && (React__namespace.createElement("div", { className: css$12.actionWrapper }, props.actions.map((action) => (React__namespace.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$12.actionLink, size: (props === null || props === void 0 ? void 0 : props.size) === '36' ? '24' : '30' })))))),
-        props.onClose && React__namespace.createElement(IconButton, { icon: ForwardRef$E, color: "default", onClick: props.onClose, cx: css$12.closeIcon })))));
-const WarningAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$H, color: "warning", ref: ref }, props)));
-const SuccessAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$I, color: "success", ref: ref }, props)));
-const HintAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$F, color: "info", ref: ref }, props)));
-const ErrorAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$G, color: "error", ref: ref }, props)));
+            props.actions && (React__namespace.createElement("div", { className: css$14.actionWrapper }, props.actions.map((action) => (React__namespace.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$14.actionLink, size: (props === null || props === void 0 ? void 0 : props.size) === '36' ? '24' : '30' })))))),
+        props.onClose && React__namespace.createElement(IconButton, { icon: ForwardRef$D, color: "neutral", onClick: props.onClose, cx: css$14.closeIcon })))));
+const WarningAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$G, color: "warning", ref: ref }, props)));
+const SuccessAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$H, color: "success", ref: ref }, props)));
+const HintAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$E, color: "info", ref: ref }, props)));
+const ErrorAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$F, color: "error", ref: ref }, props)));
 
 function Dropdown(props) {
     return React__namespace.createElement(uuiComponents.Dropdown, Object.assign({}, props));
 }
 
-var css$11 = {"menuRoot":"SfJVGZ","bodyRoot":"oR1SiY","submenuRootItem":"qA9qFE","iconAfter":"ExdedZ","iconCheck":"_6d8c6p","splitterRoot":"_4O1X0i","splitter":"w8913l","headerRoot":"n65e39","itemRoot":"sqAitH","icon":"UVWv3G","link":"vMWfj0"};
+var css$13 = {"root":"TVXlr1","bodyRoot":"auaShj","submenuRootItem":"HJUFix","iconAfter":"TeH-fd","iconCheck":"adTvjR","splitterRoot":"dO6TV1","splitter":"El14RE","headerRoot":"_5poaht","itemRoot":"_0S-9Mc","icon":"W8Gmap","link":"_2gs-va","indent":"vYWB98"};
 
 const icons = systemIcons['36'];
 exports.IDropdownControlKeys = void 0;
@@ -1256,12 +1268,8 @@ exports.IDropdownControlKeys = void 0;
 })(exports.IDropdownControlKeys || (exports.IDropdownControlKeys = {}));
 function DropdownMenuContainer(props) {
     const menuRef = React.useRef(null);
-    const [currentlyFocused, setFocused] = React.useState(-1);
+    const [currentlyFocused, setFocused] = React.useState(0);
     const menuItems = menuRef.current ? Array.from(menuRef.current.querySelectorAll(`[role="menuitem"]:not(.${uuiCore.uuiMod.disabled})`)) : [];
-    React.useEffect(() => {
-        var _a;
-        (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [menuRef.current]);
     const changeFocus = (nextFocusedIndex) => {
         if (menuItems.length > 0) {
             setFocused(nextFocusedIndex);
@@ -1269,7 +1277,6 @@ function DropdownMenuContainer(props) {
         }
     };
     const handleArrowKeys = (e) => {
-        e.stopPropagation();
         const lastMenuItemsIndex = menuItems.length - 1;
         if (e.key === exports.IDropdownControlKeys.UP_ARROW) {
             changeFocus(currentlyFocused > 0 ? currentlyFocused - 1 : lastMenuItemsIndex);
@@ -1278,15 +1285,15 @@ function DropdownMenuContainer(props) {
             changeFocus(currentlyFocused < lastMenuItemsIndex ? currentlyFocused + 1 : 0);
         }
         else if (e.key === props.closeOnKey && props.onClose) {
+            e.stopPropagation();
             props.onClose();
         }
     };
-    return (React__namespace.default.createElement(FocusLock__default.default, { as: "menu", className: css$11.menuRoot, returnFocus: true, autoFocus: false, ref: menuRef, lockProps: { onKeyDown: handleArrowKeys, tabIndex: -1 } },
-        React__namespace.default.createElement(uuiComponents.DropdownContainer, Object.assign({}, props, { rawProps: Object.assign(Object.assign({}, props.rawProps), { tabIndex: -1 }) }))));
+    return (React__namespace.default.createElement(DropdownContainer, Object.assign({}, props, { rawProps: Object.assign(Object.assign({}, props.rawProps), { role: 'menu' }), ref: menuRef, lockProps: { onKeyDown: handleArrowKeys }, cx: css$13.root })));
 }
-const DropdownMenuBody = uuiCore.withMods(DropdownMenuContainer, () => [css$11.bodyRoot], (props) => {
+const DropdownMenuBody = uuiCore.withMods(DropdownMenuContainer, () => [css$13.bodyRoot], (props) => {
     const dropdownRawProps = props.minWidth ? Object.assign(Object.assign({}, props.rawProps), { style: { minWidth: `${props.minWidth}px` } }) : null;
-    return (Object.assign(Object.assign({}, props), { rawProps: dropdownRawProps || props.rawProps }));
+    return (Object.assign(Object.assign({ closeOnKey: exports.IDropdownControlKeys.ESCAPE }, props), { rawProps: dropdownRawProps || props.rawProps }));
 });
 const DropdownMenuButton = React__namespace.default.forwardRef((props, ref) => {
     const context = React.useContext(uuiCore.UuiContext);
@@ -1308,32 +1315,32 @@ const DropdownMenuButton = React__namespace.default.forwardRef((props, ref) => {
     const getMenuButtonContent = () => {
         const isIconBefore = Boolean(icon && iconPosition !== 'right');
         const isIconAfter = Boolean(icon && iconPosition === 'right');
-        const iconElement = (React__namespace.default.createElement(IconButton, { icon: icon, color: isActive ? 'info' : 'default', onClick: onIconClick, cx: uuiCore.cx(css$11.icon, iconPosition === 'right' ? css$11.iconAfter : css$11.iconBefore) }));
+        const iconElement = (React__namespace.default.createElement(IconButton, { icon: icon, color: isActive ? 'info' : 'neutral', onClick: onIconClick, cx: uuiCore.cx(css$13.root, css$13.icon, iconPosition === 'right' ? css$13.iconAfter : css$13.iconBefore) }));
         return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
             isIconBefore && iconElement,
-            React__namespace.default.createElement(uuiComponents.Text, { cx: css$11.caption }, caption),
+            React__namespace.default.createElement(uuiComponents.Text, { cx: props.indent && css$13.indent }, caption),
             isIconAfter && (React__namespace.default.createElement(React__namespace.default.Fragment, null,
                 React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
                 iconElement))));
     };
     const isAnchor = Boolean(link || href);
-    const itemClassNames = uuiCore.cx(props.cx, css$11.itemRoot, isDisabled && uuiCore.uuiMod.disabled, isActive && uuiCore.uuiMod.active, isOpen && uuiCore.uuiMod.opened);
-    return isAnchor ? (React__namespace.default.createElement(uuiComponents.Anchor, { cx: uuiCore.cx(css$11.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isDisabled: isDisabled, forwardedRef: ref, target: target }, getMenuButtonContent())) : (React__namespace.default.createElement(uuiComponents.FlexRow, { rawProps: {
+    const itemClassNames = uuiCore.cx(css$13.root, props.cx, css$13.itemRoot, isDisabled && uuiCore.uuiMod.disabled, isActive && uuiCore.uuiMod.active, isOpen && uuiCore.uuiMod.opened);
+    return isAnchor ? (React__namespace.default.createElement(uuiComponents.Anchor, { cx: uuiCore.cx(css$13.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isDisabled: isDisabled, forwardedRef: ref, target: target }, getMenuButtonContent())) : (React__namespace.default.createElement(uuiComponents.FlexRow, { rawProps: {
             tabIndex: isDisabled ? -1 : 0,
             role: 'menuitem',
             onKeyDown: isDisabled ? null : handleOpenDropdown,
         }, cx: itemClassNames, onClick: handleClick, ref: ref },
         getMenuButtonContent(),
-        isSelected && React__namespace.default.createElement(uuiComponents.IconContainer, { icon: icons.accept, cx: css$11.selectedCheckmark })));
+        isSelected && React__namespace.default.createElement(uuiComponents.IconContainer, { icon: icons.accept, cx: uuiCore.cx(css$13.root, css$13.selectedCheckmark) })));
 });
 DropdownMenuButton.displayName = 'DropdownMenuButton';
 function DropdownMenuSplitter(props) {
-    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$11.splitterRoot) },
-        React__namespace.default.createElement("hr", { className: css$11.splitter })));
+    return (React__namespace.default.createElement("div", { className: uuiCore.cx(css$13.root, props.cx, css$13.splitterRoot) },
+        React__namespace.default.createElement("hr", { className: css$13.splitter })));
 }
 function DropdownMenuHeader(props) {
-    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$11.headerRoot) },
-        React__namespace.default.createElement("span", { className: css$11.header }, props.caption)));
+    return (React__namespace.default.createElement("div", { className: uuiCore.cx('uui-dropdown-menu-header', css$13.root, props.cx, css$13.headerRoot) },
+        React__namespace.default.createElement("span", { className: css$13.header }, props.caption)));
 }
 function DropdownSubMenu(props) {
     const subMenuModifiers = [
@@ -1353,7 +1360,7 @@ function DropdownSubMenu(props) {
     ];
     return (React__namespace.default.createElement(uuiComponents.Dropdown, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: "right-start", modifiers: subMenuModifiers, renderBody: (dropdownProps) => React__namespace.default.createElement(DropdownMenuBody, Object.assign({ closeOnKey: exports.IDropdownControlKeys.LEFT_ARROW }, props, dropdownProps)), renderTarget: (_a) => {
             var { toggleDropdownOpening } = _a, targetProps = __rest(_a, ["toggleDropdownOpening"]);
-            return (React__namespace.default.createElement(DropdownMenuButton, Object.assign({ cx: uuiCore.cx(css$11.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
+            return (React__namespace.default.createElement(DropdownMenuButton, Object.assign({ cx: uuiCore.cx(css$13.root, css$13.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
         } }));
 }
 function DropdownMenuSwitchButton(props) {
@@ -1370,91 +1377,41 @@ function DropdownMenuSwitchButton(props) {
             onHandleValueChange(!isSelected);
         }
     };
-    return (React__namespace.default.createElement(uuiComponents.FlexRow, { cx: uuiCore.cx(props.cx, css$11.itemRoot, isDisabled && uuiCore.uuiMod.disabled), onClick: () => onHandleValueChange(!isSelected), rawProps: { role: 'menuitem', onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 } },
-        icon && React__namespace.default.createElement(uuiComponents.IconContainer, { icon: icon, cx: css$11.iconBefore }),
-        React__namespace.default.createElement(uuiComponents.Text, { cx: css$11.caption }, caption),
+    return (React__namespace.default.createElement(uuiComponents.FlexRow, { cx: uuiCore.cx(props.cx, css$13.itemRoot, isDisabled && uuiCore.uuiMod.disabled), onClick: () => onHandleValueChange(!isSelected), rawProps: { role: 'menuitem', onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 } },
+        icon && React__namespace.default.createElement(uuiComponents.IconContainer, { icon: icon, cx: css$13.iconBefore }),
+        React__namespace.default.createElement(uuiComponents.Text, null, caption),
         React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
         React__namespace.default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
 }
 
-var css$10 = {"root":"CqfjsH","mode-block":"ylTpvI","mode-inline":"k8jLFB","padding-0":"tXGWyJ","padding-6":"D3AlOj","padding-12":"dFjZhY","padding-18":"xZpueL","modeBlock":"ylTpvI","modeInline":"k8jLFB","padding0":"tXGWyJ","padding6":"D3AlOj","padding12":"dFjZhY","padding18":"xZpueL"};
-
-function applyAccordionMods(mods) {
-    return [
-        css$10.root, css$10['mode-' + (mods.mode || 'block')], mods.padding && css$10['padding-' + mods.padding],
-    ];
-}
-const Accordion = uuiCore.withMods(uuiComponents.Accordion, applyAccordionMods, (mods) => ({
-    dropdownIcon: mods.dropdownIcon !== null && systemIcons[mods.mode === 'block' ? '60' : '30'].foldingArrow,
-}));
-
-var css$$ = {"root":"YsrMh8","border-bottom":"KBB1Ug","top-shadow":"xxSec4","size-24":"vPFb39","size-30":"j6EIQm","size-36":"dtRUyP","size-42":"xPgcHL","size-48":"F2FDct","padding-6":"xNlhoY","padding-12":"_0hgVzu","padding-18":"_5NvBco","padding-24":"I6qbop","margin-24":"Km5CY2","margin-12":"_4VF5Je","vPadding-12":"cPv0xO","vPadding-18":"T7pKFg","vPadding-24":"qZ4Sf7","vPadding-36":"en0CFJ","vPadding-48":"t1vFJ-","spacing-6":"stIxgh","spacing-12":"Ji-yIq","spacing-18":"HVK8rN","borderBottom":"KBB1Ug","topShadow":"xxSec4","size24":"vPFb39","size30":"j6EIQm","size36":"dtRUyP","size42":"xPgcHL","size48":"F2FDct","padding6":"xNlhoY","padding12":"_0hgVzu","padding18":"_5NvBco","padding24":"I6qbop","margin24":"Km5CY2","margin12":"_4VF5Je","vPadding12":"cPv0xO","vPadding18":"T7pKFg","vPadding24":"qZ4Sf7","vPadding36":"en0CFJ","vPadding48":"t1vFJ-","spacing6":"stIxgh","spacing12":"Ji-yIq","spacing18":"HVK8rN"};
+var css$12 = {"root":"_87SQ78","border-bottom":"BhVolQ","top-shadow":"K6-qyf","size-24":"T-kMsQ","size-30":"QGrds7","size-36":"pLLgQF","size-42":"pudUNn","size-48":"wR8tBZ","padding-6":"g-NAEE","padding-12":"oYgCBs","padding-18":"mfjWD5","padding-24":"wiwVol","margin-24":"AAGZg-","margin-12":"urWP2V","vPadding-12":"xofbOt","vPadding-18":"SYjpZo","vPadding-24":"B634oC","vPadding-36":"mZSSVi","vPadding-48":"wo4cdC","spacing-6":"qEPx8a","spacing-12":"rWF6qe","spacing-18":"_86V2ct","borderBottom":"BhVolQ","topShadow":"K6-qyf","size24":"T-kMsQ","size30":"QGrds7","size36":"pLLgQF","size42":"pudUNn","size48":"wR8tBZ","padding6":"g-NAEE","padding12":"oYgCBs","padding18":"mfjWD5","padding24":"wiwVol","margin24":"AAGZg-","margin12":"urWP2V","vPadding12":"xofbOt","vPadding18":"SYjpZo","vPadding24":"B634oC","vPadding36":"mZSSVi","vPadding48":"wo4cdC","spacing6":"qEPx8a","spacing12":"rWF6qe","spacing18":"_86V2ct"};
 
-const FlexCell = uuiCore.withMods(uuiComponents.FlexCell, () => [css$$.flexCell]);
+const FlexCell = uuiCore.withMods(uuiComponents.FlexCell, () => [css$12.flexCell]);
 
 const FlexRow = uuiCore.withMods(uuiComponents.FlexRow, (props) => {
     return [
-        css$$.root, props.size !== null && css$$['size-' + (props.size || '36')], props.padding && css$$['padding-' + props.padding], props.vPadding && css$$['vPadding-' + props.vPadding], props.margin && css$$['margin-' + props.margin], props.topShadow && css$$.topShadow, props.borderBottom && css$$.borderBottom, props.spacing && css$$['spacing-' + props.spacing],
+        css$12.root,
+        props.size !== null && css$12['size-' + (props.size || '36')],
+        props.padding && css$12['padding-' + props.padding],
+        props.vPadding && css$12['vPadding-' + props.vPadding],
+        props.margin && css$12['margin-' + props.margin],
+        props.topShadow && css$12.topShadow,
+        props.borderBottom && css$12.borderBottom,
+        props.spacing && css$12['spacing-' + props.spacing],
+        props.background && `uui-color-${props.background}`,
     ];
 });
 
-var css$_ = {"root":"UGVIhh","margin-24":"vgsryX","padding-12":"jHdjS-","padding-24":"UJFY7a","shadow":"-nWVfu","margin24":"vgsryX","padding12":"jHdjS-","padding24":"UJFY7a"};
+var css$11 = {"root":"yB0V5j","margin-24":"IBu-rl","padding-12":"LokTzm","padding-24":"O2-rmI","shadow":"B3SHKr","margin24":"IBu-rl","padding12":"LokTzm","padding24":"O2-rmI"};
 
 const Panel = uuiCore.withMods(uuiComponents.VPanel, (props) => [
-    'uui-panel', css$_.root, props.shadow && css$_.shadow, props.margin && css$_['margin-' + props.margin],
+    'uui-panel',
+    css$11.root,
+    props.shadow && css$11.shadow,
+    props.margin && css$11['margin-' + props.margin],
+    props.background && `uui-color-${props.background}`,
 ]);
 
-var css$Z = {"root":"nS0zaK"};
-
-function applyTooltipMods(mods) {
-    return [
-        `tooltip-${mods.color || 'contrast'}`,
-        css$Z.root,
-    ];
-}
-const Tooltip = uuiCore.withMods(uuiComponents.Tooltip, applyTooltipMods);
-
-var css$Y = {"root":"FEpBfY","size-24":"_8BweCF","size-30":"mBezly","size-36":"bIdcUp","size-42":"c08VRt","size-48":"h0xqcR","size24":"_8BweCF","size30":"mBezly","size36":"bIdcUp","size42":"c08VRt","size48":"h0xqcR"};
-
-const defaultSize$6 = '36';
-function applyLabeledInputMods(mods) {
-    return [css$Y.root, css$Y['size-' + (mods.size || defaultSize$6)]];
-}
-const LabeledInput = uuiCore.withMods(uuiComponents.LabeledInput, applyLabeledInputMods, (props) => ({
-    Tooltip,
-    infoIcon: systemIcons[props.size || defaultSize$6].help,
-}));
-
-var css$X = {"root":"dw56tA"};
-
-const RadioGroup = uuiCore.withMods(uuiComponents.RadioGroup, () => [css$X.root], () => ({ RadioInput }));
-
-function applyScrollBarsMods() {
-    return [
-        'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
-    ];
-}
-const ScrollBars = uuiCore.withMods(uuiComponents.ScrollBars, applyScrollBarsMods);
-
-const VirtualList = uuiComponents.VirtualList;
-
-var css$W = {"root":"UsK-Rt"};
-
-var css$V = {"root":"v6o0PL","uui-spinner":"li5HgG","uuiSpinner":"li5HgG"};
-
-function applySpinnerMods() {
-    return [css$V.root];
-}
-const Spinner = uuiCore.withMods(uuiComponents.Spinner, applySpinnerMods);
-
-const Blocker = uuiCore.withMods(uuiComponents.Blocker, () => [css$W.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__namespace.default.createElement(Spinner, null)) }));
-
-var css$U = {"root":"_2Wisvp"};
-
-const CheckboxGroup = uuiCore.withMods(uuiComponents.CheckboxGroup, () => [css$U.root], () => ({ CheckboxInput: Checkbox }));
-
-var css$T = {"root":"fqA3Q1"};
-
 const i18n = Object.assign(Object.assign({}, uuiCore.i18n), { dataPickerBody: {
         searchPlaceholder: 'Search',
         noRecordsMessage: 'No records found',
@@ -1544,28 +1501,96 @@ const i18n = Object.assign(Object.assign({}, uuiCore.i18n), { dataPickerBody: {
         fileSizeProgress: ' of ',
     } });
 
-var css$S = {"body":"m6yapY","modal":"uNYPN0","search-wrapper":"HvLRBk","checkbox":"_60kyyK","no-found-size-24":"D0gT-C","no-found-size-30":"rrz2uL","no-found-size-36":"VjXfUD","no-found-size-42":"DBTllg","searchWrapper":"HvLRBk","noFoundSize24":"D0gT-C","noFoundSize30":"rrz2uL","noFoundSize36":"VjXfUD","noFoundSize42":"DBTllg"};
+var css$10 = {"root":"C9bQDt","mode-block":"LaxMjY","mode-inline":"tyY8xQ","padding-0":"Vxj-Lh","padding-6":"UeinoS","padding-12":"p6NmAi","padding-18":"JEJGBM","modeBlock":"LaxMjY","modeInline":"tyY8xQ","padding0":"Vxj-Lh","padding6":"UeinoS","padding12":"p6NmAi","padding18":"JEJGBM"};
+
+function applyAccordionMods(mods) {
+    return [
+        css$10.root,
+        css$10['mode-' + (mods.mode || 'block')],
+        mods.padding && css$10['padding-' + mods.padding],
+    ];
+}
+const Accordion = uuiCore.withMods(uuiComponents.Accordion, applyAccordionMods, (mods) => ({
+    dropdownIcon: mods.dropdownIcon !== null && systemIcons[mods.mode === 'block' ? '60' : '30'].foldingArrow,
+}));
+
+var css$$ = {"root":"SCw5ha"};
+
+function applyTooltipMods(mods) {
+    return [
+        css$$.root,
+        `uui-color-${mods.color || 'contrast'}`,
+    ];
+}
+const Tooltip = uuiCore.withMods(uuiComponents.Tooltip, applyTooltipMods);
+
+var css$_ = {"root":"XUfJWg","size-24":"DaZNiN","size-30":"Cl4T2h","size-36":"kAT-fR","size-42":"NlegI9","size-48":"KTodID","size24":"DaZNiN","size30":"Cl4T2h","size36":"kAT-fR","size42":"NlegI9","size48":"KTodID"};
+
+const defaultSize$6 = '36';
+function applyLabeledInputMods(mods) {
+    return [css$_.root, css$_['size-' + (mods.size || defaultSize$6)]];
+}
+const LabeledInput = uuiCore.withMods(uuiComponents.LabeledInput, applyLabeledInputMods, (props) => ({
+    Tooltip,
+    infoIcon: systemIcons[props.size || defaultSize$6].help,
+}));
+
+var css$Z = {"root":"QYIUDV"};
+
+const RadioGroup = uuiCore.withMods(uuiComponents.RadioGroup, () => [css$Z.root], () => ({ RadioInput }));
+
+function applyScrollBarsMods() {
+    return [
+        'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
+    ];
+}
+const ScrollBars = uuiCore.withMods(uuiComponents.ScrollBars, applyScrollBarsMods);
+
+const VirtualList = uuiComponents.VirtualList;
+
+var css$Y = {"root":"i3VYZA"};
+
+var css$X = {"root":"suOYKL","uui-spinner":"o-7gN5","uuiSpinner":"o-7gN5"};
+
+function applySpinnerMods() {
+    return [css$X.root, 'uui-spinner'];
+}
+const Spinner = uuiCore.withMods(uuiComponents.Spinner, applySpinnerMods);
+
+const Blocker = uuiCore.withMods(uuiComponents.Blocker, () => [css$Y.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__namespace.default.createElement(Spinner, null)) }));
+
+var css$W = {"root":"u6NUSh"};
+
+const CheckboxGroup = uuiCore.withMods(uuiComponents.CheckboxGroup, () => [css$W.root], () => ({ CheckboxInput: Checkbox }));
+
+var css$V = {"body":"VIlCPT","modal":"o5-RsD","search-wrapper":"U12jeR","checkbox":"KLKorc","no-found-size-24":"o7DpqL","no-found-size-30":"guJA44","no-found-size-36":"Z6kmkG","no-found-size-42":"_4pLSof","searchWrapper":"U12jeR","noFoundSize24":"o7DpqL","noFoundSize30":"guJA44","noFoundSize36":"Z6kmkG","noFoundSize42":"_4pLSof"};
 
 class DataPickerBody extends uuiComponents.PickerBodyBase {
     constructor() {
         super(...arguments);
         this.lens = uuiCore.Lens.onEditableComponent(this);
         this.searchLens = this.lens.prop('search');
+        this.renderRowsContainer = ({ listContainerRef, estimatedHeight, offsetY }) => {
+            return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
+                React__namespace.default.createElement("div", { className: css$V.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+                    React__namespace.default.createElement("div", { ref: listContainerRef, role: "listbox", style: { marginTop: offsetY } }, this.props.rows)),
+                React__namespace.default.createElement(Blocker, { isEnabled: this.props.isReloading })));
+        };
     }
     renderNotFound() {
         if (this.props.renderNotFound) {
             return this.props.renderNotFound();
         }
-        return (React__namespace.default.createElement(uuiComponents.FlexCell, { cx: css$S[`no-found-size-${this.props.searchSize || 36}`], grow: 1, textAlign: "center" },
+        return (React__namespace.default.createElement(uuiComponents.FlexCell, { cx: css$V[`no-found-size-${this.props.searchSize || 36}`], grow: 1, textAlign: "center" },
             React__namespace.default.createElement(Text, { size: this.props.searchSize || '36' }, i18n.dataPickerBody.noRecordsMessage)));
     }
     render() {
         const searchSize = uuiCore.isMobile() ? '48' : this.props.searchSize || '36';
         return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
-            this.showSearch() && (React__namespace.default.createElement("div", { key: "search", className: css$S.searchWrapper },
+            this.showSearch() && (React__namespace.default.createElement("div", { key: "search", className: css$V.searchWrapper },
                 React__namespace.default.createElement(uuiComponents.FlexCell, { grow: 1 },
-                    React__namespace.default.createElement(SearchInput, Object.assign({ ref: this.searchRef, placeholder: i18n.dataPickerBody.searchPlaceholder }, this.searchLens.toProps(), { onKeyDown: this.searchKeyDown, size: searchSize }))))),
-            React__namespace.default.createElement(FlexRow, { key: "body", cx: uuiCore.cx(css$S.body, css$S[this.props.editMode], css$S[this.props.selectionMode]), rawProps: { style: { maxHeight: this.props.maxHeight } } }, this.props.rowsCount > 0 ? (React__namespace.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__namespace.default.createElement(SearchInput, Object.assign({ ref: this.searchRef, placeholder: i18n.dataPickerBody.searchPlaceholder }, this.searchLens.toProps(), { onKeyDown: this.searchKeyDown, size: searchSize, debounceDelay: this.props.searchDebounceDelay }))))),
+            React__namespace.default.createElement(FlexRow, { key: "body", cx: uuiCore.cx(css$V.body, css$V[this.props.editMode], css$V[this.props.selectionMode]), rawProps: { style: { maxHeight: this.props.maxHeight } } }, this.props.rowsCount > 0 ? (React__namespace.default.createElement(VirtualList, Object.assign({}, this.lens.toProps(), { renderRows: this.renderRowsContainer, rawProps: this.props.rawProps, rowsCount: this.props.rowsCount, disableScroll: this.props.isReloading }))) : (this.renderNotFound()))));
     }
 }
 
@@ -1584,27 +1609,27 @@ function DataPickerFooterImpl(props) {
     const clearAllText = i18n.pickerInput.clearSelectionButton;
     const clearSingleText = i18n.pickerInput.clearSelectionButtonSingle;
     const selectAllText = i18n.pickerInput.selectAllButton;
-    const handleKeyDown = (e) => {
-        if (!e.shiftKey && e.key === 'Tab')
-            e.preventDefault();
-    };
     // show always for multi picker and for single only in case if search not disabled.
     const shouldShowFooter = isSinglePicker ? !props.disableClear : true;
     return shouldShowFooter && (React__namespace.default.createElement(FlexRow, { padding: "12" },
         !isSinglePicker && (React__namespace.default.createElement(Switch, { size: switchSize, value: showSelected.value, isDisabled: !hasSelection, onValueChange: showSelected.onValueChange, label: i18n.pickerInput.showOnlySelectedLabel })),
         React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
         React__namespace.default.createElement(FlexCell, { width: "auto", alignSelf: "center" },
-            view.selectAll && (React__namespace.default.createElement(LinkButton, { size: size, caption: hasSelection ? clearAllText : selectAllText, onClick: hasSelection ? clearSelection : () => view.selectAll.onValueChange(true), rawProps: { onKeyDown: handleKeyDown } })),
-            !view.selectAll && (React__namespace.default.createElement(LinkButton, { isDisabled: !hasSelection, size: size, caption: isSinglePicker ? clearSingleText : clearAllText, onClick: clearSelection, rawProps: { onKeyDown: handleKeyDown } })))));
+            view.selectAll && (React__namespace.default.createElement(LinkButton, { size: size, caption: hasSelection ? clearAllText : selectAllText, onClick: hasSelection ? clearSelection : () => view.selectAll.onValueChange(true), rawProps: {
+                    'aria-label': hasSelection ? clearAllText : selectAllText,
+                } })),
+            !view.selectAll && (React__namespace.default.createElement(LinkButton, { isDisabled: !hasSelection, size: size, caption: isSinglePicker ? clearSingleText : clearAllText, onClick: clearSelection, rawProps: {
+                    'aria-label': isSinglePicker ? clearSingleText : clearAllText,
+                } })))));
 }
 const DataPickerFooter = React__namespace.default.memo(DataPickerFooterImpl);
 
-var css$R = {"header":"I9nM79","close":"_8MiiNK"};
+var css$U = {"header":"_2SP8Gr","close":"-lAnPH"};
 
 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); }
+function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
 var SvgNavigationClose24 = function SvgNavigationClose24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -1616,50 +1641,47 @@ var SvgNavigationClose24 = function SvgNavigationClose24(props, ref) {
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$D = /*#__PURE__*/React.forwardRef(SvgNavigationClose24);
+var ForwardRef$C = /*#__PURE__*/React.forwardRef(SvgNavigationClose24);
 
 const DataPickerHeaderImpl = (props) => {
     const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
-    return (React__namespace.default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: css$R.header },
+    return (React__namespace.default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: css$U.header },
         React__namespace.default.createElement(Text, { size: "48", font: "semibold" }, title),
-        React__namespace.default.createElement(IconButton, { icon: ForwardRef$D, onClick: () => { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$R.close })));
+        React__namespace.default.createElement(IconButton, { icon: ForwardRef$C, onClick: () => { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$U.close })));
 };
 const DataPickerHeader = React__namespace.default.memo(DataPickerHeaderImpl);
 
-var _defs$1, _use;
-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 SvgTreeFoldingArrow = function SvgTreeFoldingArrow(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
+var _path$A;
+function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
+var SvgNavigationChevronDown18 = function SvgNavigationChevronDown18(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
+    xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
     ref: ref
-  }, props), _defs$1 || (_defs$1 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("path", {
-    id: "a",
-    d: "M6.056 6.998a.997.997 0 0 1-.769-.29L.293 1.712a1 1 0 0 1 0-1.414L.299.293a1 1 0 0 1 1.414 0L6 4.58 10.288.293c.39-.39 1.023-.39 1.42.006a1 1 0 0 1 0 1.414L6.712 6.707a.993.993 0 0 1-.657.291z"
-  }))), _use || (_use = /*#__PURE__*/React__namespace.createElement("use", {
-    width: "100%",
-    height: "100%",
-    xlinkHref: "#a",
-    transform: "translate(3.893 6.02) scale(.8512)",
-    fillRule: "evenodd"
+  }, props), _path$A || (_path$A = /*#__PURE__*/React__namespace.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$C = /*#__PURE__*/React.forwardRef(SvgTreeFoldingArrow);
+var ForwardRef$B = /*#__PURE__*/React.forwardRef(SvgNavigationChevronDown18);
 
-var css$Q = {"cell":"zSKKCw","wrapper":"BnAODd","align-widgets-top":"JZk-WT","size-24":"OStCoS","folding-arrow":"loOEKu","size-30":"_0zzYtQ","size-36":"hIcguP","size-42":"vbF5vN","size-48":"kEOdj3","size-60":"PIcvgX","align-widgets-center":"xCZq9O","padding-12":"DmhGQt","padding-24":"D45Geu","padding-left-12":"mRsAMF","padding-left-24":"weBjep","padding-right-24":"_65AZjC","drag-handle":"Q4BsZF","checkbox":"nDi96m","indent":"Zgflpj","folding-arrow-12":"asffmw","folding-arrow-18":"UCfYsG","icon-container":"X9j-kn","alignWidgetsTop":"JZk-WT","size24":"OStCoS","foldingArrow":"loOEKu","size30":"_0zzYtQ","size36":"hIcguP","size42":"vbF5vN","size48":"kEOdj3","size60":"PIcvgX","alignWidgetsCenter":"xCZq9O","padding12":"DmhGQt","padding24":"D45Geu","paddingLeft12":"mRsAMF","paddingLeft24":"weBjep","paddingRight24":"_65AZjC","dragHandle":"Q4BsZF","foldingArrow12":"asffmw","foldingArrow18":"UCfYsG","iconContainer":"X9j-kn"};
+var css$T = {"cell":"a-eia1","wrapper":"eddJ44","align-widgets-top":"Oxz1nk","size-24":"y7gUwL","folding-arrow":"ZRqECH","size-30":"uIhcWZ","size-36":"_2gou0C","size-42":"n62SC4","size-48":"SE4GaK","size-60":"y5hmTO","align-widgets-center":"_64q22J","padding-12":"iY5j5b","padding-24":"iQXegu","padding-left-12":"_8l6OHX","padding-left-24":"-e717L","padding-right-24":"EeClT9","drag-handle":"yrnuz7","checkbox":"mDtBQB","indent":"g1ocIN","folding-arrow-12":"OOUtlG","folding-arrow-18":"w4x0nL","icon-container":"yCNIse","loading-cell":"PJ4AtR","alignWidgetsTop":"Oxz1nk","size24":"y7gUwL","foldingArrow":"ZRqECH","size30":"uIhcWZ","size36":"_2gou0C","size42":"n62SC4","size48":"SE4GaK","size60":"y5hmTO","alignWidgetsCenter":"_64q22J","padding12":"iY5j5b","padding24":"iQXegu","paddingLeft12":"_8l6OHX","paddingLeft24":"-e717L","paddingRight24":"EeClT9","dragHandle":"yrnuz7","foldingArrow12":"OOUtlG","foldingArrow18":"w4x0nL","iconContainer":"yCNIse","loadingCell":"PJ4AtR"};
 
 function DataTableRowAddons(props) {
     var _a, _b;
     const row = props.rowProps;
     const additionalItemSize = +props.size < 30 ? '12' : '18';
     return (React__namespace.createElement(React__namespace.Fragment, null,
-        ((_a = row.dnd) === null || _a === void 0 ? void 0 : _a.srcData) && React__namespace.createElement(uuiComponents.DragHandle, { key: "dh", cx: css$Q.dragHandle }),
-        ((_b = row === null || row === void 0 ? void 0 : row.checkbox) === null || _b === void 0 ? void 0 : _b.isVisible) && (React__namespace.createElement(Checkbox, { key: "cb", cx: css$Q.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__namespace.createElement("div", { key: "fold", className: css$Q.indent, style: { marginLeft: (row.indent - 1) * 24 } }, row.isFoldable && (React__namespace.createElement(uuiComponents.IconContainer, { key: "icon", icon: ForwardRef$C, cx: [
-                css$Q.foldingArrow, css$Q[`folding-arrow-${additionalItemSize}`], uuiCore.uuiMarkers.clickable, css$Q.iconContainer,
+        ((_a = row.dnd) === null || _a === void 0 ? void 0 : _a.srcData) && React__namespace.createElement(uuiComponents.DragHandle, { key: "dh", cx: css$T.dragHandle }),
+        ((_b = row === null || row === void 0 ? void 0 : row.checkbox) === null || _b === void 0 ? void 0 : _b.isVisible) && (React__namespace.createElement(Checkbox, { key: "cb", cx: css$T.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__namespace.createElement("div", { key: "fold", className: css$T.indent, style: { marginLeft: (row.indent - 1) * 24 } }, row.isFoldable && (React__namespace.createElement(uuiComponents.IconContainer, { rawProps: {
+                'aria-label': row.isFolded ? 'Unfold' : 'Fold',
+                role: 'button',
+            }, key: "icon", icon: ForwardRef$B, cx: [
+                css$T.foldingArrow, css$T[`folding-arrow-${additionalItemSize}`], uuiCore.uuiMarkers.clickable, css$T.iconContainer,
             ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row) }))))));
 }
 function DataTableCell(props) {
@@ -1668,7 +1690,9 @@ function DataTableCell(props) {
         props.addons = React__namespace.createElement(DataTableRowAddons, Object.assign({}, props));
     }
     props.renderPlaceholder = props.renderPlaceholder
-        || (() => (React__namespace.createElement(Text, { key: "t", size: props.size !== '60' ? props.size : '48' },
+        || (() => (
+        // remove `css.loadingCell` after` removing `margin: 0 3px 3px 0` from `TextPlaceholder` `loadingWord` class styles.
+        React__namespace.createElement(Text, { key: "t", size: props.size !== '60' ? props.size : '48', cx: css$T.loadingCell },
             React__namespace.createElement(TextPlaceholder, null))));
     props.renderUnknown = props.renderUnknown
         || (() => (React__namespace.createElement(Text, { key: "t", size: props.size !== '60' ? props.size : '48' }, "Unknown")));
@@ -1678,67 +1702,67 @@ function DataTableCell(props) {
         'uui-dt-vars',
         'data-table-cell',
         props.cx,
-        css$Q.cell,
-        css$Q['size-' + (props.size || '36')],
-        css$Q[`padding-${props.padding || (isEditable && !props.rowProps.isLoading && '0') || '12'}`],
-        props.isFirstColumn && css$Q[`padding-left-${props.padding || (isEditable && !props.rowProps.isLoading && '12') || '24'}`],
-        props.isLastColumn && css$Q['padding-right-24'],
-        css$Q[`align-widgets-${props.alignActions || 'top'}`],
+        css$T.cell,
+        css$T['size-' + (props.size || '36')],
+        css$T[`padding-${props.padding || (isEditable && !props.rowProps.isLoading && '0') || '12'}`],
+        props.isFirstColumn && css$T[`padding-left-${props.padding || (isEditable && !props.rowProps.isLoading && '12') || '24'}`],
+        props.isLastColumn && css$T['padding-right-24'],
+        css$T[`align-widgets-${props.alignActions || 'top'}`],
         (props.border || isEditable) && 'uui-dt-vertical-cell-border',
     ];
     return React__namespace.createElement(uuiComponents.DataTableCell, Object.assign({}, props));
 }
 
-var _path$A;
-function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
+var _path$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 SvgNotificationDone24 = function SvgNotificationDone24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$A || (_path$A = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$z || (_path$z = /*#__PURE__*/React__namespace.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$B = /*#__PURE__*/React.forwardRef(SvgNotificationDone24);
+var ForwardRef$A = /*#__PURE__*/React.forwardRef(SvgNotificationDone24);
 
-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$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 SvgNotificationDone18 = function SvgNotificationDone18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
     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__namespace.createElement("path", {
+  }, props), _path$y || (_path$y = /*#__PURE__*/React__namespace.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$A = /*#__PURE__*/React.forwardRef(SvgNotificationDone18);
+var ForwardRef$z = /*#__PURE__*/React.forwardRef(SvgNotificationDone18);
 
-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$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 SvgNotificationDone12 = function SvgNotificationDone12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
     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__namespace.createElement("path", {
+  }, props), _path$x || (_path$x = /*#__PURE__*/React__namespace.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$z = /*#__PURE__*/React.forwardRef(SvgNotificationDone12);
+var ForwardRef$y = /*#__PURE__*/React.forwardRef(SvgNotificationDone12);
 
-var css$P = {"render-item":"BTKtJ5","icon-wrapper":"_7dZqfe","picker-row":"Jbc86-","icon-default":"Zon5Cg","icon-primary":"fgLvcX","renderItem":"BTKtJ5","iconWrapper":"_7dZqfe","pickerRow":"Jbc86-","iconDefault":"Zon5Cg","iconPrimary":"fgLvcX"};
+var css$S = {"render-item":"wreqOo","icon-wrapper":"IsbXkM","picker-row":"pitB9v","icon-default":"CAn8HC","icon-primary":"_4--nkQ","renderItem":"wreqOo","iconWrapper":"IsbXkM","pickerRow":"pitB9v","iconDefault":"CAn8HC","iconPrimary":"_4--nkQ"};
 
 class DataPickerRow extends React__namespace.Component {
     constructor() {
@@ -1746,60 +1770,59 @@ class DataPickerRow extends React__namespace.Component {
         this.getIcon = (size) => {
             switch (size) {
                 case '24':
-                    return ForwardRef$z;
+                    return ForwardRef$y;
                 case '30':
-                    return ForwardRef$A;
+                    return ForwardRef$z;
                 case '36':
-                    return ForwardRef$A;
+                    return ForwardRef$z;
                 case '42':
-                    return ForwardRef$B;
-                default:
                     return ForwardRef$A;
+                default:
+                    return ForwardRef$z;
             }
         };
         this.column = {
             key: 'name',
             grow: 1,
             width: 0,
-            render: (item, rowProps) => (React__namespace.createElement("div", { key: rowProps.id, className: css$P.renderItem },
+            render: (item, rowProps) => (React__namespace.createElement("div", { key: rowProps.id, className: css$S.renderItem },
                 this.props.renderItem(item, rowProps),
                 React__namespace.createElement(uuiComponents.FlexSpacer, null),
-                (rowProps.isChildrenSelected || rowProps.isSelected) && (React__namespace.createElement("div", { className: css$P.iconWrapper },
-                    React__namespace.createElement(uuiComponents.IconContainer, { icon: this.getIcon(this.props.size), cx: rowProps.isChildrenSelected ? css$P.iconDefault : css$P.iconPrimary }))))),
+                (rowProps.isChildrenSelected || rowProps.isSelected) && (React__namespace.createElement("div", { className: css$S.iconWrapper },
+                    React__namespace.createElement(uuiComponents.IconContainer, { icon: this.getIcon(this.props.size), cx: rowProps.isChildrenSelected ? css$S.iconDefault : css$S.iconPrimary, rawProps: { 'aria-label': rowProps.isChildrenSelected
+                                ? 'Child is selected'
+                                : 'Selected' } }))))),
         };
         this.renderContent = () => {
             return (React__namespace.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__namespace.createElement(uuiComponents.DataPickerRow, Object.assign({}, this.props, { cx: [css$P.pickerRow, this.props.cx], renderContent: this.renderContent }));
+        return React__namespace.createElement(uuiComponents.DataPickerRow, Object.assign({}, this.props, { cx: [css$S.pickerRow, this.props.cx], renderContent: this.renderContent }));
     }
 }
 
-var css$O = {"done":"cOrsY0"};
+var css$R = {"done":"_1f5JI6","container":"lMBOdO"};
 
 const MobileDropdownWrapper = (props) => {
-    const isVisible = uuiCore.isMobile();
-    uuiCore.useAppMobileHeight();
-    return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
-        isVisible && React__namespace.default.createElement(DataPickerHeader, { title: props.title, close: props.close }),
+    const isMobileView = uuiCore.isMobile();
+    return (React__namespace.default.createElement(DropdownContainer, Object.assign({}, props, { cx: [css$R.container, props.cx], rawProps: props.rawProps, onKeyDown: props.onKeyDown, focusLock: props.focusLock, width: props.width }),
+        isMobileView && React__namespace.default.createElement(DataPickerHeader, { title: props.title, close: props.onClose }),
         props.children,
-        isVisible && React__namespace.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$O.done, size: "48" })));
+        isMobileView && React__namespace.default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => { var _a; return (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$R.done, size: "48" })));
 };
 
-var css$N = {"sub-header-wrapper":"yA2k-w","switch":"_4IxSOl","no-found-modal-container":"F3oJMz","no-found-modal-container-icon":"lw3Ud2","no-found-modal-container-text":"G4mosa","subHeaderWrapper":"yA2k-w","$switch$":"_4IxSOl","noFoundModalContainer":"F3oJMz","noFoundModalContainerIcon":"lw3Ud2","noFoundModalContainerText":"G4mosa"};
-
-var _path$x, _path2$1;
-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$w, _path2$1;
+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 SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
     width: 66,
     height: 67,
     viewBox: "0 0 66 67",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M0 33.5C0 15.275 14.775.5 33 .5s33 14.775 33 33-14.775 33-33 33-33-14.775-33-33Z",
     fill: "#EBEDF5"
   })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -1809,68 +1832,54 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
     fill: "#6C6F80"
   })));
 };
-var ForwardRef$y = /*#__PURE__*/React.forwardRef(SvgSearchWithBackground);
+var ForwardRef$x = /*#__PURE__*/React.forwardRef(SvgSearchWithBackground);
 
-class PickerModalImpl extends uuiComponents.PickerModalBase {
-    constructor() {
-        super(...arguments);
-        this.renderNotFound = () => {
-            return this.props.renderNotFound ? (this.props.renderNotFound({ search: this.state.dataSourceState.search, onClose: () => this.props.success(null) })) : (React__namespace.createElement("div", { className: css$N.noFoundModalContainer },
-                React__namespace.createElement(uuiComponents.IconContainer, { cx: css$N.noFoundModalContainerIcon, icon: ForwardRef$y }),
-                React__namespace.createElement(Text, { cx: css$N.noFoundModalContainerText, font: "semibold", fontSize: "16", lineHeight: "24", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsMessage),
-                React__namespace.createElement(Text, { cx: css$N.noFoundModalContainerText, fontSize: "12", lineHeight: "18", font: "regular", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsSubTitle)));
-        };
-    }
-    renderRow(rowProps) {
-        return this.props.renderRow ? (this.props.renderRow(rowProps, this.state.dataSourceState)) : (React__namespace.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, borderBottom: "none", padding: "24", size: "36", renderItem: (i) => React__namespace.createElement(Text, { size: "36" }, rowProps.isLoading ? React__namespace.createElement(TextPlaceholder, { wordsCount: 2 }) : this.getName(i)) })));
-    }
-    renderFooter() {
-        const view = this.getView();
-        const hasSelection = view.getSelectedRowsCount() > 0;
-        return (React__namespace.createElement(React__namespace.Fragment, null,
-            view.selectAll && (React__namespace.createElement(LinkButton, { caption: hasSelection ? i18n.pickerModal.clearAllButton : i18n.pickerModal.selectAllButton, onClick: hasSelection ? () => this.clearSelection() : () => view.selectAll.onValueChange(true) })),
-            React__namespace.createElement(uuiComponents.FlexSpacer, null),
-            React__namespace.createElement(Button, { fill: "outline", color: "secondary", caption: i18n.pickerModal.cancelButton, onClick: () => this.props.abort() }),
-            React__namespace.createElement(Button, { color: "accent", caption: i18n.pickerModal.selectButton, onClick: () => this.props.success(null) })));
-    }
-    render() {
-        const view = this.getView();
-        const dataRows = this.getRows();
-        const rows = dataRows.map((props) => this.renderRow(props));
-        return (React__namespace.createElement(ModalBlocker, Object.assign({}, this.props),
-            React__namespace.createElement(ModalWindow, { width: 600, height: 700 },
-                React__namespace.createElement(ModalHeader, { title: this.props.caption || i18n.pickerModal.headerTitle, onClose: () => this.props.abort() }),
-                React__namespace.createElement(FlexCell, { cx: css$N.subHeaderWrapper },
-                    React__namespace.createElement(FlexRow, { vPadding: "24" },
-                        React__namespace.createElement(SearchInput, Object.assign({}, this.lens.prop('dataSourceState').prop('search').toProps(), { onKeyDown: (e) => uuiComponents.handleDataSourceKeyboard({
-                                value: this.getDataSourceState(),
-                                onValueChange: this.handleDataSourceValueChange,
-                                listView: view,
-                                rows: dataRows,
-                                editMode: 'modal',
-                            }, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder }))),
-                    !this.isSingleSelect() && (React__namespace.createElement(Switch, Object.assign({ cx: css$N.switch, size: "18" }, this.stateLens.prop('showSelected').toProps(), { isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" }))),
-                    this.props.renderFilter && React__namespace.createElement(FlexCell, { grow: 2 }, this.props.renderFilter(this.lens.prop('dataSourceState').prop('filter').toProps()))),
-                React__namespace.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__namespace.createElement(ModalFooter, { padding: "24", vPadding: "24" }, this.props.renderFooter ? this.props.renderFooter(this.getFooterProps()) : this.renderFooter()))));
-    }
-}
-class PickerModal extends React__namespace.Component {
-    constructor() {
-        super(...arguments);
-        this.state = { selection: this.props.initialValue };
-        this.lens = uuiCore.Lens.onState(this);
-    }
-    render() {
-        return React__namespace.createElement(PickerModalImpl, Object.assign({}, this.props, this.lens.prop('selection').toProps(), { success: () => this.props.success(this.state.selection) }));
-    }
+var css$Q = {"sub-header-wrapper":"Upn5eX","switch":"JgdYX7","no-found-modal-container":"mdYviJ","no-found-modal-container-icon":"kwBGjR","no-found-modal-container-text":"DfNAQX","subHeaderWrapper":"Upn5eX","$switch$":"JgdYX7","noFoundModalContainer":"mdYviJ","noFoundModalContainerIcon":"kwBGjR","noFoundModalContainerText":"DfNAQX"};
+
+function PickerModal(props) {
+    const { view, selection, dataSourceStateLens, showSelectedLens, dataSourceState, getDataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = uuiComponents.usePickerModal(props);
+    const renderRow = (rowProps) => {
+        return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React__namespace.default.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, borderBottom: "none", padding: "24", size: "36", renderItem: (i) => React__namespace.default.createElement(Text, { size: "36" }, rowProps.isLoading ? React__namespace.default.createElement(TextPlaceholder, { wordsCount: 2 }) : getName(i)) })));
+    };
+    const renderFooter = () => {
+        const hasSelection = view.getSelectedRowsCount() > 0;
+        return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
+            view.selectAll && (React__namespace.default.createElement(LinkButton, { caption: hasSelection ? i18n.pickerModal.clearAllButton : i18n.pickerModal.selectAllButton, onClick: hasSelection ? () => clearSelection() : () => view.selectAll.onValueChange(true) })),
+            React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
+            React__namespace.default.createElement(Button, { fill: "outline", color: "secondary", caption: i18n.pickerModal.cancelButton, onClick: () => props.abort() }),
+            React__namespace.default.createElement(Button, { color: "accent", caption: i18n.pickerModal.selectButton, onClick: () => props.success(selection) })));
+    };
+    const renderNotFound = () => {
+        return props.renderNotFound ? (props.renderNotFound({ search: dataSourceState.search, onClose: () => props.success(null) })) : (React__namespace.default.createElement("div", { className: css$Q.noFoundModalContainer },
+            React__namespace.default.createElement(uuiComponents.IconContainer, { cx: css$Q.noFoundModalContainerIcon, icon: ForwardRef$x }),
+            React__namespace.default.createElement(Text, { cx: css$Q.noFoundModalContainerText, font: "semibold", fontSize: "16", lineHeight: "24", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsMessage),
+            React__namespace.default.createElement(Text, { cx: css$Q.noFoundModalContainerText, fontSize: "12", lineHeight: "18", font: "regular", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsSubTitle)));
+    };
+    const dataRows = getRows();
+    const rows = dataRows.map((row) => renderRow(row));
+    return (React__namespace.default.createElement(ModalBlocker, Object.assign({}, props),
+        React__namespace.default.createElement(ModalWindow, { width: 600, height: 700 },
+            React__namespace.default.createElement(ModalHeader, { title: props.caption || i18n.pickerModal.headerTitle, onClose: () => props.abort() }),
+            React__namespace.default.createElement(FlexCell, { cx: css$Q.subHeaderWrapper },
+                React__namespace.default.createElement(FlexRow, { vPadding: "24" },
+                    React__namespace.default.createElement(SearchInput, Object.assign({}, dataSourceStateLens.prop('search').toProps(), { onKeyDown: (e) => uuiComponents.handleDataSourceKeyboard({
+                            value: getDataSourceState(),
+                            onValueChange: handleDataSourceValueChange,
+                            listView: view,
+                            rows: dataRows,
+                            searchPosition: 'body',
+                        }, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder }))),
+                !isSingleSelect() && (React__namespace.default.createElement(Switch, Object.assign({ cx: css$Q.switch, size: "18" }, showSelectedLens.toProps(), { isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" }))),
+                props.renderFilter && React__namespace.default.createElement(FlexCell, { grow: 2 }, props.renderFilter(dataSourceStateLens.prop('filter').toProps()))),
+            React__namespace.default.createElement(DataPickerBody, Object.assign({}, getListProps(), { value: getDataSourceState(), onValueChange: handleDataSourceValueChange, search: dataSourceStateLens.prop('search').toProps(), showSearch: false, rows: rows, renderNotFound: renderNotFound, editMode: "modal" })),
+            React__namespace.default.createElement(ModalFooter, { padding: "24", vPadding: "24" }, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$M = {"root":"UjfrDv"};
+var css$P = {"root":"Cqz3Ry"};
 
-const AvatarStack = uuiCore.withMods(uuiComponents.AvatarStack, () => [css$M.root]);
+const AvatarStack = uuiCore.withMods(uuiComponents.AvatarStack, () => [css$P.root]);
 
-var css$L = {"root":"_-5k1Ns","size-18":"rGLsAP","size-24":"X5jgWo","size-30":"iHh0kM","size-36":"E4u6mo","size-42":"l9dryK","size-48":"Y-VPhr","size18":"rGLsAP","size24":"X5jgWo","size30":"iHh0kM","size36":"E4u6mo","size42":"l9dryK","size48":"Y-VPhr"};
+var css$O = {"root":"_8j2Pdp","size-18":"qMV7zC","size-24":"R2OFMy","size-30":"BgaLX3","size-36":"qLi8c3","size-42":"ydCAMA","size-48":"xn-v4s","size18":"qMV7zC","size24":"R2OFMy","size30":"BgaLX3","size36":"qLi8c3","size42":"ydCAMA","size48":"xn-v4s"};
 
 const defaultSize$5 = '36';
 const mapSize$1 = {
@@ -1884,8 +1893,8 @@ const mapSize$1 = {
 function applyBadgeMods(mods) {
     return [
         'uui-badge',
-        css$L.root,
-        css$L['size-' + (mods.size || defaultSize$5)],
+        css$O.root,
+        css$O['size-' + (mods.size || defaultSize$5)],
         `fill-${mods.fill || 'solid'}`,
         mods.color && `uui-color-${mods.color}`,
     ];
@@ -1896,7 +1905,7 @@ const Badge = uuiCore.withMods(uuiComponents.Button, applyBadgeMods, (props) =>
     countPosition: 'left',
 }));
 
-var css$K = {"root":"_3JBx9a","size-18":"_95Zccq","size-24":"aKgepU","size-30":"iYdvbC","size-36":"NRE3wn","size-42":"yqn3hq","size-48":"dWJeP8","size18":"_95Zccq","size24":"aKgepU","size30":"iYdvbC","size36":"NRE3wn","size42":"yqn3hq","size48":"dWJeP8"};
+var css$N = {"root":"MS24E-","size-18":"WT3Ivg","size-24":"gGgt8L","size-30":"gY40BV","size-36":"xcA7Nm","size-42":"-PGvxx","size-48":"cpmfsB","size18":"WT3Ivg","size24":"gGgt8L","size30":"gY40BV","size36":"xcA7Nm","size42":"-PGvxx","size48":"cpmfsB"};
 
 const defaultSize$4 = '36';
 const mapSize = {
@@ -1908,107 +1917,120 @@ const mapSize = {
     18: '18',
 };
 function applyTagMods(mods) {
-    return [css$K['size-' + (mods.size || defaultSize$4)], css$K.root];
+    return [css$N['size-' + (mods.size || defaultSize$4)], css$N.root, 'uui-color-gray', 'uui-tag'];
 }
 const Tag = uuiCore.withMods(uuiComponents.Button, applyTagMods, (props) => ({
     dropdownIcon: systemIcons[mapSize[props.size] || defaultSize$4].foldingArrow,
     clearIcon: systemIcons[mapSize[props.size] || defaultSize$4].clear,
 }));
 
-var css$J = {"root":"dgDVq7","spacer":"VCkNTO","mode-ghost":"LyhnzN","size-24":"Hhg4Yg","size-30":"Scjc1g","navigation-size-24":"JGifsX","navigation-size-30":"_8HjIjv","modeGhost":"LyhnzN","size24":"Hhg4Yg","size30":"Scjc1g","navigationSize24":"JGifsX","navigationSize30":"_8HjIjv"};
+var css$M = {"root":"A1e7MR","spacer":"ioSBM8","mode-ghost":"NhTAvE","size-24":"QRazxp","size-30":"un047X","navigation-size-24":"LWOBKR","navigation-size-30":"k3cF4G","modeGhost":"NhTAvE","size24":"QRazxp","size30":"un047X","navigationSize24":"LWOBKR","navigationSize30":"k3cF4G"};
 
-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$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 SvgNavigationChevronLeft12 = function SvgNavigationChevronLeft12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.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$x = /*#__PURE__*/React.forwardRef(SvgNavigationChevronLeft12);
+var ForwardRef$w = /*#__PURE__*/React.forwardRef(SvgNavigationChevronLeft12);
 
-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$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 SvgNavigationChevronRight12 = function SvgNavigationChevronRight12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
     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__namespace.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "m5 3-.705.705L6.585 6l-2.29 2.295L5 9l3-3-3-3z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$w = /*#__PURE__*/React.forwardRef(SvgNavigationChevronRight12);
+var ForwardRef$v = /*#__PURE__*/React.forwardRef(SvgNavigationChevronRight12);
 
 function Paginator(props) {
     const renderPaginator = (params) => {
         var _a, _b;
-        return (React__namespace.default.createElement("nav", Object.assign({ role: "navigation", className: css$J.root }, params.rawProps),
-            React__namespace.default.createElement(Button, { cx: css$J[`navigation-size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$K : ForwardRef$x, onClick: params.goToPrev, isDisabled: params.isFirst, fill: "outline", color: "secondary" }),
+        return (React__namespace.default.createElement("nav", Object.assign({ role: "navigation", className: cx__default.default(css$M.root, 'uui-paginator') }, params.rawProps),
+            React__namespace.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$J : ForwardRef$w, onClick: params.goToPrev, isDisabled: params.isFirst, fill: "outline", color: "secondary" }),
             params.pages.map((page, index) => {
                 var _a, _b;
                 if (page.type === 'spacer') {
-                    return (React__namespace.default.createElement(Button, { cx: cx__default.default(css$J[`size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], css$J.spacer), size: params.size, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1 }));
+                    return (React__namespace.default.createElement(Button, { cx: cx__default.default(css$M[`size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], css$M.spacer), size: params.size, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1 }));
                 }
                 else {
-                    return (React__namespace.default.createElement(Button, { cx: cx__default.default(css$J[`size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], css$J[`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 }, fill: (page.isActive && 'outline') || 'ghost', color: "primary" }));
+                    return (React__namespace.default.createElement(Button, { cx: cx__default.default(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 }, fill: (page.isActive && 'outline') || 'ghost', color: "primary" }));
                 }
             }),
-            React__namespace.default.createElement(Button, { cx: css$J[`navigation-size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$J : ForwardRef$w, onClick: params.goToNext, isDisabled: params.isLast, fill: "outline", color: "secondary" })));
+            React__namespace.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$I : ForwardRef$v, onClick: params.goToNext, isDisabled: params.isLast, fill: "outline", color: "secondary" })));
     };
     return React__namespace.default.createElement(uuiComponents.Paginator, Object.assign({}, props, { render: renderPaginator }));
 }
 
-var css$I = {"root":"VfmepX","bar":"isqewK","progressBar-indeterminate":"Wg7Cpk","size-12":"-lPV5R","size-18":"QBUG2I","size-24":"lJppgr","progressBarIndeterminate":"Wg7Cpk","size12":"-lPV5R","size18":"QBUG2I","size24":"lJppgr"};
+var css$L = {"root":"ad-0f4","bar":"tnbgJt","progressBar-indeterminate":"_1hGUFm","size-12":"_0qMUN9","size-18":"Ri5BiU","size-24":"abPz-b","progressBarIndeterminate":"_1hGUFm","size12":"_0qMUN9","size18":"Ri5BiU","size24":"abPz-b"};
 
 const IndeterminateBar = React__namespace.forwardRef((props, ref) => {
-    return (React__namespace.createElement("div", { ref: ref, className: cx__default.default(props.cx, css$I.root, css$I[`size-${props.size || 12}`]) },
-        React__namespace.createElement("div", { className: cx__default.default(css$I.bar) })));
+    return (React__namespace.createElement("div", { ref: ref, className: cx__default.default('uui-indeterminate_bar', props.cx, css$L.root, css$L[`size-${props.size || 12}`]) },
+        React__namespace.createElement("div", { className: cx__default.default(css$L.bar) })));
 });
 
-var css$H = {"root":"CFGCsO","striped":"_2VtLi3","animate-stripes":"zbhUli","size-12":"_2YiwSS","size-18":"ULVGlI","size-24":"Uz0mrC","animateStripes":"zbhUli","size12":"_2YiwSS","size18":"ULVGlI","size24":"Uz0mrC"};
+var css$K = {"root":"euBBqd","striped":"_6Fl2Mx","animate-stripes":"Ixlc0M","size-12":"p3DSUZ","size-18":"yf8gLh","size-24":"Zhpq7s","animateStripes":"Ixlc0M","size12":"p3DSUZ","size18":"yf8gLh","size24":"Zhpq7s"};
 
 const defaultSize$3 = '12';
 function applyProgressBarMods(mods) {
     const size = mods.size || defaultSize$3;
     return [
-        css$H.root, css$H[`size-${size}`], mods.striped && css$H.striped,
+        css$K.root,
+        css$K[`size-${size}`],
+        mods.striped && css$K.striped,
     ];
 }
 const ProgressBar = uuiCore.withMods(uuiComponents.ProgressBar, applyProgressBarMods, (props) => ({
     hideLabel: props.hideLabel || props.striped,
 }));
 
-var css$G = {"root":"_58X3Ct"};
+var css$J = {"root":"-UOWB4"};
 
 const IndicatorBar = React__namespace.forwardRef((props, ref) => {
     const { progress } = props;
-    return progress || progress === 0 ? (React__namespace.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx__default.default(css$G.root, props.cx), hideLabel: true })) : (React__namespace.createElement(IndeterminateBar, { ref: ref, cx: cx__default.default(css$G.root, props.cx) }));
+    return progress || progress === 0 ? (React__namespace.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx__default.default(css$J.root, props.cx), hideLabel: true })) : (React__namespace.createElement(IndeterminateBar, { ref: ref, cx: cx__default.default(css$J.root, props.cx) }));
+});
+
+var css$I = {"root":"dxRv9o"};
+
+const Informer = React.forwardRef((props, ref) => {
+    return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
+            css$I.root,
+            'uui-informer',
+            `size-${props.size || 24}`,
+            props.color && `uui-color-${props.color}`,
+        ]) }, props.caption));
 });
 
 const MAX_ITEMS = 100;
 const getMaxItems = (maxItems) => maxItems || maxItems === 0 ? maxItems : MAX_ITEMS;
 
-var css$F = {"root":"xI7zD6","mode-form":"GlOAgX","mode-cell":"Gjyr9F","mode-inline":"EHSytE","size-24":"yf0mTG","size-30":"_1-dzc-","size-36":"YKAYPj","size-42":"_2fLXX7","size-48":"CmFchS","modeForm":"GlOAgX","modeCell":"Gjyr9F","modeInline":"EHSytE","size24":"yf0mTG","size30":"_1-dzc-","size36":"YKAYPj","size42":"_2fLXX7","size48":"CmFchS"};
+var css$H = {"root":"F5hGJf","mode-form":"V5eEqK","mode-cell":"zELSkF","mode-inline":"IGw6sX","size-24":"GKVBns","size-30":"pc2fqF","size-36":"N-tzNJ","size-42":"r9535-","size-48":"JPC2so","modeForm":"V5eEqK","modeCell":"zELSkF","modeInline":"IGw6sX","size24":"GKVBns","size30":"pc2fqF","size36":"N-tzNJ","size42":"r9535-","size48":"JPC2so"};
 
 const defaultSize$2 = '36';
 const defaultMode$1 = exports.EditMode.FORM;
 function applyPickerTogglerMods(mods) {
     return [
-        css$F.root,
-        css$F['size-' + (mods.size || defaultSize$2)],
-        css$F['mode-' + (mods.mode || defaultMode$1)],
+        css$H.root,
+        css$H['size-' + (mods.size || defaultSize$2)],
+        css$H['mode-' + (mods.mode || defaultMode$1)],
     ];
 }
 function PickerTogglerComponent(props, ref) {
@@ -2050,9 +2072,9 @@ function PickerTogglerComponent(props, ref) {
 }
 const PickerToggler = React__namespace.forwardRef(PickerTogglerComponent);
 
-var css$E = {"root":"xlF0-S","multiline-vertical-padding-24":"h5kLI6","multiline-vertical-padding-30":"ucBAtU","multiline-vertical-padding-36":"eRHptB","multiline-vertical-padding-42":"SJMeyt","multiline-vertical-padding-48":"C6NZT6","text":"EKBwYy","multilineVerticalPadding24":"h5kLI6","multilineVerticalPadding30":"ucBAtU","multilineVerticalPadding36":"eRHptB","multilineVerticalPadding42":"SJMeyt","multilineVerticalPadding48":"C6NZT6"};
+var css$G = {"root":"_4GLlvh","multiline":"e3jyq6","vertical-padding-24":"SSL5TO","vertical-padding-30":"vqVKRN","vertical-padding-36":"M34pb-","vertical-padding-42":"NcUTrY","vertical-padding-48":"tgBzru","text":"R7W1kt","verticalPadding24":"SSL5TO","verticalPadding30":"vqVKRN","verticalPadding36":"M34pb-","verticalPadding42":"NcUTrY","verticalPadding48":"tgBzru"};
 
-var css$D = {"highlighted-text":"BDPloQ","highlightedText":"BDPloQ"};
+var css$F = {"highlighted-text":"lab3ga","highlightedText":"lab3ga"};
 
 const mergeHighlightRanges = (ranges) => {
     const mergedRanges = [];
@@ -2106,7 +2128,7 @@ const getHighlightRanges = (str, search) => {
 };
 const getDecoratedText = (str, ranges) => ranges.map((range, index) => {
     const rangeStr = str.substring(range.from, range.to);
-    return (React__namespace.default.createElement("span", Object.assign({ key: `${rangeStr}-${index}` }, (range.isHighlighted ? { className: css$D.highlightedText } : {})), rangeStr));
+    return (React__namespace.default.createElement("span", Object.assign({ key: `${rangeStr}-${index}` }, (range.isHighlighted ? { className: css$F.highlightedText } : {})), rangeStr));
 });
 const getHighlightedSearchMatches = (str, search) => {
     if (!search || !str) {
@@ -2129,155 +2151,142 @@ class PickerItem extends React__namespace.Component {
     }
     render() {
         var _a;
-        const { size, avatarUrl, isLoading, isDisabled, icon, highlightSearchMatches, } = this.props;
+        const { size, avatarUrl, isLoading, isDisabled, icon, highlightSearchMatches, cx, } = this.props;
         const itemSize = size && size !== 'none' ? size : defaultSize$1;
         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__namespace.createElement(FlexCell, { width: "auto", cx: css$E.root },
-            React__namespace.createElement(FlexRow, { size: itemSize, cx: isMultiline && css$E[`multiline-vertical-padding-${itemSize}`], spacing: "12" },
+        return (React__namespace.createElement(FlexCell, { width: "auto", cx: [css$G.root, cx] },
+            React__namespace.createElement(FlexRow, { size: itemSize, cx: isMultiline && [css$G.multiline, css$G[`vertical-padding-${itemSize}`]], spacing: "12" },
                 avatarUrl && React__namespace.createElement(uuiComponents.Avatar, { isLoading: isLoading, img: avatarUrl, size: this.getAvatarSize(itemSize, isMultiline).toString() }),
                 icon && React__namespace.createElement(uuiComponents.IconContainer, { icon: icon }),
                 React__namespace.createElement(FlexCell, { width: "auto" },
-                    title && (React__namespace.createElement(Text, { size: itemSize, cx: css$E.text, color: isDisabled ? 'disabled' : 'primary' }, isLoading ? React__namespace.createElement(TextPlaceholder, { wordsCount: 2 }) : title)),
-                    subtitle && (React__namespace.createElement(Text, { size: itemSize, color: isDisabled ? 'disabled' : 'secondary', cx: css$E.text }, isLoading ? React__namespace.createElement(TextPlaceholder, { wordsCount: 2 }) : subtitle))))));
+                    title && (React__namespace.createElement(Text, { size: itemSize, cx: css$G.text, color: isDisabled ? 'disabled' : 'primary' }, isLoading ? React__namespace.createElement(TextPlaceholder, { wordsCount: 2 }) : title)),
+                    subtitle && (React__namespace.createElement(Text, { size: itemSize, color: isDisabled ? 'disabled' : 'secondary', cx: css$G.text }, isLoading ? React__namespace.createElement(TextPlaceholder, { wordsCount: 2 }) : subtitle))))));
     }
 }
 PickerItem.defaultProps = {
     highlightSearchMatches: true,
 };
 
-var css$C = {"panel":"VL6iPh","footer-wrapper":"_1BCTnu","footer-size-24":"s0Bi7i","footer-size-30":"wJtiGo","footer-size-36":"M5slYb","footer-size-42":"IXqJ3P","footer-size-48":"zajMwC","footerWrapper":"_1BCTnu","footerSize24":"s0Bi7i","footerSize30":"wJtiGo","footerSize36":"M5slYb","footerSize42":"IXqJ3P","footerSize48":"zajMwC"};
+var css$E = {"root":"gIgYz4","panel":"TOIMEd","footer-wrapper":"SwI3Ho","footer-size-24":"_9vxEUn","footer-size-30":"_2hIbhR","footer-size-36":"JAprH4","footer-size-42":"U7jDmC","footer-size-48":"Gqr4HA","footerWrapper":"SwI3Ho","footerSize24":"_9vxEUn","footerSize30":"_2hIbhR","footerSize36":"JAprH4","footerSize42":"U7jDmC","footerSize48":"Gqr4HA"};
 
 const pickerHeight$1 = 300;
-const pickerWidth$1 = 360;
-class PickerInput extends uuiComponents.PickerInputBase {
-    constructor() {
-        super(...arguments);
-        this.renderItem = (item, rowProps, dataSourceState) => {
-            var _a;
-            return (React__namespace.default.createElement(PickerItem, Object.assign({ title: this.getName(item), size: this.getRowSize(), dataSourceState: dataSourceState, highlightSearchMatches: (_a = this.props.highlightSearchMatches) !== null && _a !== void 0 ? _a : true }, rowProps)));
-        };
-        this.renderRow = (rowProps, dataSourceState) => {
-            return this.props.renderRow ? (this.props.renderRow(rowProps, dataSourceState)) : (React__namespace.default.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, borderBottom: "none", size: this.getRowSize(), padding: this.props.editMode === 'modal' ? '24' : '12', renderItem: (item, itemProps) => this.renderItem(item, itemProps, dataSourceState) })));
-        };
-    }
-    toggleModalOpening() {
-        const _a = this.props, { renderFooter, rawProps } = _a, restProps = __rest(_a, ["renderFooter", "rawProps"]);
-        this.context.uuiModals
-            .show((props) => (React__namespace.default.createElement(PickerModal, Object.assign({}, restProps, { rawProps: rawProps === null || rawProps === void 0 ? void 0 : rawProps.body }, props, { caption: this.getPlaceholder(), initialValue: this.props.value, renderRow: this.renderRow, selectionMode: this.props.selectionMode, valueType: this.props.valueType }))))
+const pickerWidth = 360;
+function PickerInput(_a) {
+    var { highlightSearchMatches = true } = _a, props = __rest(_a, ["highlightSearchMatches"]);
+    const toggleModalOpening = () => {
+        const { renderFooter, rawProps } = props, restProps = __rest(props, ["renderFooter", "rawProps"]);
+        context.uuiModals
+            .show((modalProps) => (React__namespace.default.createElement(PickerModal, Object.assign({}, restProps, { rawProps: rawProps === null || rawProps === void 0 ? void 0 : rawProps.body }, modalProps, { caption: getPlaceholder(), initialValue: props.value, renderRow: renderRow, selectionMode: props.selectionMode, valueType: props.valueType }))))
             .then((newSelection) => {
-            this.handleSelectionValueChange(newSelection);
-            this.returnFocusToInput();
+            handleSelectionValueChange(newSelection);
         })
-            .catch(() => {
-            this.returnFocusToInput();
-        });
-    }
-    getRowSize() {
+            .catch(() => { });
+    };
+    const { context, popperModifiers, getName, getPlaceholder, handleSelectionValueChange, getTogglerProps, getRows, handleTogglerSearchChange, toggleBodyOpening, dataSourceState, getFooterProps, getPickerBodyProps, getListProps, shouldShowBody, getSearchPosition, } = uuiComponents.usePickerInput(Object.assign(Object.assign({}, props), { toggleModalOpening }));
+    const getTogglerMods = () => {
+        return {
+            size: props.size,
+            mode: props.mode ? props.mode : exports.EditMode.FORM,
+        };
+    };
+    const renderTarget = (targetProps) => {
+        const renderTargetFn = props.renderToggler || ((props) => React__namespace.default.createElement(PickerToggler, Object.assign({}, props)));
+        return (React__namespace.default.createElement(uuiCore.IEditableDebouncer, { value: targetProps.value, onValueChange: handleTogglerSearchChange, debounceDelay: props.searchDebounceDelay, render: (editableProps) => renderTargetFn(Object.assign(Object.assign(Object.assign({}, getTogglerMods()), targetProps), editableProps)) }));
+    };
+    const renderFooter = () => {
+        const footerProps = getFooterProps();
+        return props.renderFooter ? props.renderFooter(footerProps) : React__namespace.default.createElement(DataPickerFooter, Object.assign({}, footerProps, { size: props.size }));
+    };
+    const getRowSize = () => {
         if (uuiCore.isMobile()) {
             return '48';
         }
-        return this.props.editMode === 'modal' ? '36' : this.props.size;
-    }
-    getTogglerMods() {
-        return {
-            size: this.props.size,
-            mode: this.props.mode ? this.props.mode : exports.EditMode.FORM,
-        };
-    }
-    renderFooter() {
-        const footerProps = this.getFooterProps();
-        return this.props.renderFooter ? (this.props.renderFooter(footerProps)) : (React__namespace.default.createElement(DataPickerFooter, Object.assign({}, footerProps, { size: this.props.size })));
-    }
-    renderTarget(targetProps) {
-        const renderTarget = this.props.renderToggler || ((props) => React__namespace.default.createElement(PickerToggler, Object.assign({}, props)));
-        return (React__namespace.default.createElement(uuiCore.IEditableDebouncer, { value: targetProps.value, onValueChange: this.handleTogglerSearchChange, render: (editableProps) => renderTarget(Object.assign(Object.assign(Object.assign({}, this.getTogglerMods()), targetProps), editableProps)) }));
-    }
-    renderBody(props, rows) {
-        const renderedDataRows = rows.map((row) => this.renderRow(row, this.state.dataSourceState));
-        const maxHeight = uuiCore.isMobile() ? document.documentElement.clientHeight : this.props.dropdownHeight || pickerHeight$1;
-        const minBodyWidth = uuiCore.isMobile() ? document.documentElement.clientWidth : this.props.minBodyWidth || pickerWidth$1;
-        return (React__namespace.default.createElement(Panel, { style: { width: props.togglerWidth > minBodyWidth ? props.togglerWidth : minBodyWidth }, rawProps: { tabIndex: -1 }, cx: [
-                css$C.panel, uuiCore.uuiMarkers.lockFocus, this.props.bodyCx,
-            ] },
-            React__namespace.default.createElement(MobileDropdownWrapper, { title: this.props.entityName, close: () => {
-                    this.returnFocusToInput();
-                    this.toggleBodyOpening(false);
-                } },
-                React__namespace.default.createElement(DataPickerBody, Object.assign({}, props, { rows: renderedDataRows, maxHeight: maxHeight, searchSize: this.props.size, editMode: "dropdown", selectionMode: this.props.selectionMode, renderNotFound: this.props.renderNotFound
-                        ? () => this.props.renderNotFound({
-                            search: this.state.dataSourceState.search,
-                            onClose: () => this.toggleBodyOpening(false),
-                        })
-                        : undefined })),
-                this.renderFooter())));
-    }
+        return props.editMode === 'modal' ? '36' : props.size;
+    };
+    const renderItem = (item, rowProps, dsState) => {
+        return (React__namespace.default.createElement(PickerItem, Object.assign({ title: getName(item), size: getRowSize(), dataSourceState: dsState, highlightSearchMatches: highlightSearchMatches }, rowProps)));
+    };
+    const renderRow = (rowProps, dsState) => {
+        return props.renderRow ? (props.renderRow(rowProps, dsState)) : (React__namespace.default.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, borderBottom: "none", size: getRowSize(), padding: props.editMode === 'modal' ? '24' : '12', renderItem: (item, itemProps) => renderItem(item, itemProps, dsState) })));
+    };
+    const renderBody = (bodyProps, rows) => {
+        const renderedDataRows = rows.map((row) => renderRow(row, dataSourceState));
+        const bodyHeight = uuiCore.isMobile() ? document.documentElement.clientHeight : props.dropdownHeight || pickerHeight$1;
+        const minBodyWidth = props.minBodyWidth || pickerWidth;
+        return (React__namespace.default.createElement(MobileDropdownWrapper, { title: props.entityName, onClose: () => toggleBodyOpening(false), cx: [css$E.panel, css$E.root, props.bodyCx], onKeyDown: bodyProps.onKeyDown, width: bodyProps.togglerWidth > minBodyWidth ? bodyProps.togglerWidth : minBodyWidth, focusLock: getSearchPosition() === 'body' },
+            React__namespace.default.createElement(DataPickerBody, Object.assign({}, bodyProps, { rows: renderedDataRows, maxHeight: bodyHeight, searchSize: props.size, editMode: "dropdown", selectionMode: props.selectionMode, renderNotFound: props.renderNotFound
+                    ? () => props.renderNotFound({
+                        search: dataSourceState.search,
+                        onClose: () => toggleBodyOpening(false),
+                    })
+                    : undefined })),
+            renderFooter()));
+    };
+    const rows = getRows();
+    return (React__namespace.default.createElement(Dropdown, { renderTarget: (dropdownProps) => {
+            const targetProps = getTogglerProps(rows);
+            return renderTarget(Object.assign(Object.assign({}, dropdownProps), targetProps));
+        }, renderBody: (bodyProps) => renderBody(Object.assign(Object.assign(Object.assign({}, bodyProps), getPickerBodyProps(rows)), getListProps()), rows), value: shouldShowBody(), onValueChange: !props.isDisabled && toggleBodyOpening, placement: props.dropdownPlacement, modifiers: popperModifiers, closeBodyOnTogglerHidden: !uuiCore.isMobile(), portalTarget: props.portalTarget }));
 }
 
-var css$B = {"row":"Jbx9o4"};
+var css$D = {"row":"JzCThO"};
 
-class PickerListItem extends React__namespace.default.Component {
-    render() {
-        let label;
-        if (this.props.isLoading) {
-            label = React__namespace.default.createElement(TextPlaceholder, { wordsCount: 2 });
-        }
-        else {
-            label = this.props.getName(this.props.value);
-        }
-        let component;
-        if (this.props.checkbox) {
-            component = (React__namespace.default.createElement(Checkbox, Object.assign({}, this.props.checkbox, { isDisabled: this.props.isLoading || this.props.checkbox.isDisabled || this.props.isDisabled, label: label, value: this.props.isChecked, onValueChange: () => this.props.onCheck(this.props) })));
-        }
-        else {
-            component = (React__namespace.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__namespace.default.createElement("div", { className: css$B.row }, component);
+function PickerListItem(props) {
+    var _a;
+    let label;
+    if (props.isLoading) {
+        label = React__namespace.default.createElement(TextPlaceholder, { wordsCount: 2 });
     }
-}
-
-class PickerList extends uuiComponents.PickerListBase {
-    constructor() {
-        super(...arguments);
-        this.sessionStartTime = new Date().getTime();
-        this.renderRow = (row) => {
-            return React__namespace.default.createElement(PickerListItem, Object.assign({ getName: (item) => this.getName(item) }, row, { key: row.rowKey }));
-        };
-        this.handleShowPicker = () => {
-            this.context.uuiModals
-                .show((props) => (React__namespace.default.createElement(PickerModal, Object.assign({}, props, this.props, { caption: this.props.placeholder || `Please select ${this.getEntityName() ? this.getEntityName() : ''}`, initialValue: this.props.value, selectionMode: this.props.selectionMode, valueType: this.props.valueType }))))
-                .then((value) => {
-                this.appendLastSelected([...this.getSelectedIdsArray(value)]);
-                this.props.onValueChange(value);
-            });
-        };
-        this.defaultRenderToggler = (props) => React__namespace.default.createElement(LinkButton, Object.assign({ caption: "Show all" }, props));
+    else {
+        label = props.getName(props.value);
     }
-    render() {
-        const view = this.getView();
-        const viewProps = view.getListProps();
-        const selectedRows = view.getSelectedRows();
-        const rows = this.buildRowsList();
-        const showPicker = viewProps.totalCount == null || viewProps.totalCount > this.getMaxDefaultItems();
-        const renderToggler = this.props.renderModalToggler || this.defaultRenderToggler;
-        const renderRow = this.props.renderRow || this.renderRow;
-        return (React__namespace.default.createElement("div", null,
-            !rows.length
-                && (this.props.noOptionsMessage || (React__namespace.default.createElement(Text, { color: "secondary", size: this.props.size }, "No options available"))),
-            rows.map((row) => renderRow(Object.assign(Object.assign({}, row), { isDisabled: this.props.isDisabled }), this.state.dataSourceState)),
-            showPicker
-                && renderToggler({
-                    onClick: this.handleShowPicker,
-                    caption: this.getModalTogglerCaption(viewProps.totalCount, view.getSelectedRowsCount()),
-                    isDisabled: this.props.isDisabled,
-                }, selectedRows)));
+    let component;
+    if (props.checkbox) {
+        component = (React__namespace.default.createElement(Checkbox, Object.assign({}, props.checkbox, { isDisabled: props.isLoading || props.checkbox.isDisabled || props.isDisabled, label: label, value: props.isChecked, onValueChange: () => props.onCheck(props) })));
     }
+    else {
+        component = (React__namespace.default.createElement(RadioInput, { label: label, value: props.isSelected, isDisabled: props.isLoading || !props.isSelectable || props.isDisabled, onValueChange: () => props.onSelect(props) }));
+    }
+    return (React__namespace.default.createElement("div", Object.assign({ role: "option", "aria-selected": props.isSelectable ? props.isSelected : undefined, "aria-busy": props.isLoading, "aria-posinset": props.index + 1 }, (((_a = props.checkbox) === null || _a === void 0 ? void 0 : _a.isVisible) && { 'aria-checked': props.isChecked }), { className: css$D.row }), component));
+}
+
+function PickerList(props) {
+    const { context, view, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, dataSourceState, getModalTogglerCaption, } = uuiComponents.usePickerList(props);
+    const defaultRenderRow = (row) => {
+        return React__namespace.default.createElement(PickerListItem, Object.assign({ getName: (item) => getName(item) }, row, { key: row.rowKey }));
+    };
+    const handleShowPicker = () => {
+        context.uuiModals
+            .show((modalProps) => (React__namespace.default.createElement(PickerModal, Object.assign({}, modalProps, props, { caption: props.placeholder || `Please select ${getEntityName() ? getEntityName() : ''}`, initialValue: props.value, selectionMode: props.selectionMode, valueType: props.valueType }))))
+            .then((value) => {
+            appendLastSelected([...getSelectedIdsArray(value)]);
+            props.onValueChange(value);
+        })
+            .catch(() => { });
+    };
+    const defaultRenderToggler = (props) => React__namespace.default.createElement(LinkButton, Object.assign({ caption: "Show all" }, props));
+    const viewProps = view.getListProps();
+    const selectedRows = view.getSelectedRows();
+    const rows = buildRowsList();
+    const showPicker = viewProps.totalCount == null || viewProps.totalCount > getMaxDefaultItems();
+    const renderToggler = props.renderModalToggler || defaultRenderToggler;
+    const renderRow = props.renderRow || defaultRenderRow;
+    return (React__namespace.default.createElement("div", null,
+        !rows.length
+            && (props.noOptionsMessage || (React__namespace.default.createElement(Text, { color: "secondary", size: props.size }, "No options available"))),
+        rows.map((row) => renderRow(Object.assign(Object.assign({}, row), { isDisabled: props.isDisabled }), dataSourceState)),
+        showPicker
+            && renderToggler({
+                onClick: handleShowPicker,
+                caption: getModalTogglerCaption(viewProps.totalCount, view.getSelectedRowsCount()),
+                isDisabled: props.isDisabled,
+            }, selectedRows)));
 }
-PickerList.contextType = uuiCore.UuiContext;
 
-var css$A = {"root":"Lc3twb","title-wrapper":"GisRn8","title":"i-0KcV","text-wrapper":"_9KjqUc","selection":"ODafNU","postfix":"MV4eFb","selected":"nyPiDK","titleWrapper":"GisRn8","textWrapper":"_9KjqUc"};
+var css$C = {"root":"g6tAWY","title-wrapper":"-edJIm","title":"mfJCw2","text-wrapper":"Pk5ore","selection":"ovY5oj","postfix":"_0ve-Av","selected":"_6aC-2l","titleWrapper":"-edJIm","textWrapper":"Pk5ore"};
 
 const defaultSize = '36';
 const FilterPanelItemToggler = React__namespace.forwardRef((props, ref) => {
@@ -2302,64 +2311,51 @@ const FilterPanelItemToggler = React__namespace.forwardRef((props, ref) => {
     };
     const getTitle = props.predicateName ? `${props.title} ${props.predicateName}` : `${props.title}${props.selection ? ':' : ''}`;
     const getSelectionText = () => props.selection.map((i, index) => (React__namespace.createElement(React__namespace.Fragment, { key: `${i}${index}` },
-        React__namespace.createElement(Text, { color: "brand", size: props.size, cx: css$A.selection }, i),
+        React__namespace.createElement(Text, { color: "brand", size: props.size, cx: css$C.selection }, i),
         (props.postfix || index !== props.selection.length - 1) && React__namespace.createElement("span", null, ",\u00A0"))));
     return (React__namespace.createElement(uuiComponents.FlexRow, Object.assign({}, props, { rawProps: {
             style: { maxWidth: `${props.maxWidth ? props.maxWidth + 'px' : 'auto'}` },
             role: 'button',
             tabIndex: props.isDisabled ? -1 : 0,
             onKeyDown: onKeyDownHandler,
-        }, cx: cx__default.default(css$A.root, uuiCore.uuiElement.inputBox, uuiCore.uuiMarkers.clickable, props.isOpen && uuiCore.uuiMod.opened, ['size-' + (props.size || defaultSize)], props.cx), onClick: togglerPickerOpened, ref: ref }),
-        React__namespace.createElement(uuiComponents.FlexRow, { cx: css$A.titleWrapper },
-            React__namespace.createElement(Text, { size: props.size, cx: css$A.title }, getTitle),
-            props.selection && (React__namespace.createElement("div", { className: css$A.textWrapper },
+        }, cx: cx__default.default(css$C.root, uuiCore.uuiElement.inputBox, uuiCore.uuiMarkers.clickable, props.isOpen && uuiCore.uuiMod.opened, ['size-' + (props.size || defaultSize)], props.cx), onClick: togglerPickerOpened, ref: ref }),
+        React__namespace.createElement(uuiComponents.FlexRow, { cx: css$C.titleWrapper },
+            React__namespace.createElement(Text, { size: props.size, cx: css$C.title }, getTitle),
+            props.selection && (React__namespace.createElement("div", { className: css$C.textWrapper },
                 getSelectionText(),
-                props.postfix && (React__namespace.createElement(Text, { color: "brand", size: props.size, cx: css$A.postfix }, props.postfix))))),
+                props.postfix && (React__namespace.createElement(Text, { color: "brand", size: props.size, cx: css$C.postfix }, props.postfix))))),
         !props.isDisabled && React__namespace.createElement(uuiComponents.IconContainer, { icon: systemIcons[props.size || defaultSize].foldingArrow, flipY: props.isOpen, cx: "uui-icon-dropdown" })));
 });
 
 const pickerHeight = 300;
-const pickerWidth = 360;
-class FilterPickerBody extends uuiComponents.PickerInputBase {
-    constructor() {
-        super(...arguments);
-        this.renderItem = (item, rowProps) => {
-            return React__namespace.createElement(PickerItem, Object.assign({ title: this.getName(item), size: "36" }, rowProps));
-        };
-        this.onSelect = (row) => {
-            this.props.onClose();
-            this.handleDataSourceValueChange(Object.assign(Object.assign({}, this.state.dataSourceState), { search: '', selectedId: row.id }));
-        };
-        this.renderRow = (rowProps) => {
-            if (rowProps.isSelectable && this.isSingleSelect() && this.props.editMode !== 'modal') {
-                rowProps.onSelect = this.onSelect;
-            }
-            return this.props.renderRow ? (this.props.renderRow(rowProps, this.state.dataSourceState)) : (React__namespace.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, borderBottom: "none", size: "36", padding: "12", renderItem: this.renderItem })));
-        };
-        this.renderFooter = () => {
-            return React__namespace.createElement(DataPickerFooter, Object.assign({}, this.getFooterProps(), { size: "36" }));
-        };
-    }
-    shouldShowBody() {
-        return this.props.isOpen;
-    }
-    toggleModalOpening() { }
-    renderTarget() {
-        return React__namespace.createElement("div", null);
-    }
-    renderBody(props, rows) {
-        const renderedDataRows = rows.map((props) => this.renderRow(props));
-        const maxHeight = uuiCore.isMobile() ? document.documentElement.clientHeight : this.props.dropdownHeight || pickerHeight;
-        const minBodyWidth = uuiCore.isMobile() ? document.documentElement.clientWidth : this.props.minBodyWidth || pickerWidth;
-        return (React__namespace.createElement(Panel, { style: { width: minBodyWidth }, rawProps: { tabIndex: -1 }, cx: [uuiCore.uuiMarkers.lockFocus] },
-            React__namespace.createElement(DataPickerBody, Object.assign({}, props, { selectionMode: this.props.selectionMode, rows: renderedDataRows, maxHeight: maxHeight, searchSize: "36", editMode: "dropdown" })),
-            this.renderFooter()));
-    }
-    render() {
-        var _a;
-        const rows = this.getRows();
-        return this.renderBody(Object.assign(Object.assign(Object.assign({}, this.getPickerBodyProps(rows)), this.getListProps()), { showSearch: (_a = this.props.showSearch) !== null && _a !== void 0 ? _a : true }), rows);
-    }
+function FilterPickerBody(props) {
+    const shouldShowBody = () => props.isOpen;
+    const { getName, isSingleSelect, getRows, dataSourceState, getFooterProps, getPickerBodyProps, getListProps, handleDataSourceValueChange, } = uuiComponents.usePickerInput(Object.assign(Object.assign({}, props), { shouldShowBody }));
+    const renderItem = (item, rowProps) => {
+        return React__namespace.createElement(PickerItem, Object.assign({ title: getName(item), size: "36" }, rowProps));
+    };
+    const onSelect = (row) => {
+        props.onClose();
+        handleDataSourceValueChange(Object.assign(Object.assign({}, dataSourceState), { search: '', selectedId: row.id }));
+    };
+    const renderRow = (rowProps) => {
+        if (rowProps.isSelectable && isSingleSelect() && props.editMode !== 'modal') {
+            rowProps.onSelect = onSelect;
+        }
+        return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React__namespace.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, borderBottom: "none", size: "36", padding: "12", renderItem: renderItem })));
+    };
+    const renderFooter = () => {
+        return React__namespace.createElement(DataPickerFooter, Object.assign({}, getFooterProps(), { size: "36" }));
+    };
+    const renderBody = (bodyProps, rows) => {
+        const renderedDataRows = rows.map((props) => renderRow(props));
+        const maxHeight = uuiCore.isMobile() ? document.documentElement.clientHeight : props.dropdownHeight || pickerHeight;
+        return (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement(DataPickerBody, Object.assign({}, bodyProps, { selectionMode: props.selectionMode, rows: renderedDataRows, maxHeight: maxHeight, searchSize: "36", editMode: "dropdown", showSearch: true })),
+            renderFooter()));
+    };
+    const rows = getRows();
+    return renderBody(Object.assign(Object.assign({}, getPickerBodyProps(rows)), getListProps()), rows);
 }
 
 class FilterDatePickerBody extends uuiComponents.BaseDatePicker {
@@ -2394,7 +2390,7 @@ class FilterDatePickerBody extends uuiComponents.BaseDatePicker {
     }
 }
 
-var css$z = {"date-input":"siEqHn","size-24":"QKD91V","size-30":"KFS7hU","size-36":"SFhkyc","size-42":"sk8WPj","size-48":"ZnokTV","date-input-group":"uF-ASR","separator":"LWmJvv","mode-form":"mmcT5K","mode-cell":"IMK3L6","dateInput":"siEqHn","size24":"QKD91V","size30":"KFS7hU","size36":"SFhkyc","size42":"sk8WPj","size48":"ZnokTV","dateInputGroup":"uF-ASR","modeForm":"mmcT5K","modeCell":"IMK3L6"};
+var css$B = {"date-input":"SlwlbE","size-24":"r1WHjP","size-30":"K4VED0","size-36":"KiyeGh","size-42":"N1ESEP","size-48":"z8YGjp","date-input-group":"sdetab","separator":"eTnvAg","mode-form":"rcbUqG","mode-cell":"_4-nrq9","dateInput":"SlwlbE","size24":"r1WHjP","size30":"K4VED0","size36":"KiyeGh","size42":"N1ESEP","size48":"z8YGjp","dateInputGroup":"sdetab","modeForm":"rcbUqG","modeCell":"_4-nrq9"};
 
 class FilterRangeDatePickerBody extends uuiComponents.BaseRangeDatePicker {
     constructor() {
@@ -2414,10 +2410,10 @@ class FilterRangeDatePickerBody extends uuiComponents.BaseRangeDatePicker {
                 React__namespace.createElement(RangeDatePickerBody, { value: this.getValue(), onValueChange: this.onRangeChange, filter: this.props.filter, focusPart: this.state.inFocus, changeIsOpen: this.changeIsOpen, presets: this.props.presets })),
             React__namespace.createElement(FlexCell, { alignSelf: "stretch" },
                 React__namespace.createElement(FlexRow, { padding: "24", vPadding: "12" },
-                    React__namespace.createElement("div", { className: cx__default.default(css$z.dateInputGroup, this.state.inFocus && uuiCore.uuiMod.focus) },
-                        React__namespace.createElement(TextInput, { icon: systemIcons['30'].calendar, cx: cx__default.default(css$z.dateInput, css$z['size-30'], this.state.inFocus === 'from' && uuiCore.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__namespace.createElement("div", { className: css$z.separator }),
-                        React__namespace.createElement(TextInput, { cx: cx__default.default(css$z.dateInput, css$z['size-30'], this.state.inFocus === 'to' && uuiCore.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__namespace.createElement("div", { className: cx__default.default(css$B.dateInputGroup, this.state.inFocus && uuiCore.uuiMod.focus) },
+                        React__namespace.createElement(TextInput, { icon: systemIcons['30'].calendar, cx: cx__default.default(css$B.dateInput, css$B['size-30'], this.state.inFocus === 'from' && uuiCore.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__namespace.createElement("div", { className: css$B.separator }),
+                        React__namespace.createElement(TextInput, { cx: cx__default.default(css$B.dateInput, css$B['size-30'], this.state.inFocus === 'to' && uuiCore.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__namespace.createElement(uuiComponents.FlexSpacer, null),
                     React__namespace.createElement(LinkButton, { isDisabled: !this.state.inputValue.from && !this.state.inputValue.to, caption: i18n.pickerModal.clearAllButton, onClick: this.handleCancel })))));
     }
@@ -2426,7 +2422,7 @@ class FilterRangeDatePickerBody extends uuiComponents.BaseRangeDatePicker {
     }
 }
 
-var css$y = {"container":"r7YNbl"};
+var css$A = {"container":"eb-CfJ"};
 
 function FilterNumericBody(props) {
     var _a, _b;
@@ -2470,7 +2466,7 @@ function FilterNumericBody(props) {
     if (isInRangePredicate) {
         const value = props.value;
         return (React__namespace.default.createElement("div", null,
-            React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", spacing: "12", borderBottom: true, cx: css$y.container },
+            React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", spacing: "12", borderBottom: true, cx: css$A.container },
                 React__namespace.default.createElement(FlexCell, { width: "100%" },
                     React__namespace.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__namespace.default.createElement(FlexCell, { width: "100%" },
@@ -2478,7 +2474,7 @@ function FilterNumericBody(props) {
             renderFooter()));
     }
     return (React__namespace.default.createElement("div", null,
-        React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$y.container },
+        React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$A.container },
             React__namespace.default.createElement(FlexCell, { width: 130 },
                 React__namespace.default.createElement(NumericInput, { value: typeof props.value === 'number' ? props.value : null, onValueChange: props.onValueChange, size: "36", placeholder: "Enter a number", formatOptions: { maximumFractionDigits: 2 } }))),
         renderFooter()));
@@ -2501,23 +2497,23 @@ function FilterItemBody(props) {
     }
 }
 
-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$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 SvgActionDeleteforever12 = function SvgActionDeleteforever12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M14 6v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6h10zm-3-4 1 1h3v2H3V3h3l1-1h4zm-.24 12.1L9 12.36 7.24 14.1l-1.16-1.16 1.74-1.76-1.78-1.8 1.2-1.18L9 10l1.76-1.8 1.18 1.18-1.76 1.8 1.76 1.76-1.18 1.16z"
   })));
 };
-var ForwardRef$v = /*#__PURE__*/React.forwardRef(SvgActionDeleteforever12);
+var ForwardRef$u = /*#__PURE__*/React.forwardRef(SvgActionDeleteforever12);
 
-var css$x = {"header":"jZJTSs","removeButton":"qB2MYV","with-search":"_5UZ7MM","panel":"t3-8u0","withSearch":"_5UZ7MM"};
+var css$z = {"root":"_--ae2T","header":"I-B3Zr","removeButton":"XHG7rl","with-search":"fVy-Ml","withSearch":"fVy-Ml"};
 
 function FiltersToolbarItemImpl(props) {
     const { maxCount = 2 } = props;
@@ -2593,18 +2589,17 @@ function FiltersToolbarItemImpl(props) {
     };
     const renderHeader = (hideTitle) => {
         var _a;
-        return (React__namespace.default.createElement("div", { className: cx__default.default(css$x.header, isPickersType && ((_a = props.showSearch) !== null && _a !== void 0 ? _a : css$x.withSearch)) },
+        return (React__namespace.default.createElement("div", { className: cx__default.default(css$z.header, isPickersType && ((_a = props.showSearch) !== null && _a !== void 0 ? _a : css$z.withSearch)) },
             props.predicates ? (React__namespace.default.createElement(MultiSwitch, { items: props.predicates.map((i) => ({ id: i.predicate, caption: i.name })), value: predicate, onValueChange: changePredicate, size: "24" })) : (!hideTitle && (React__namespace.default.createElement(Text, { color: "secondary", size: "24", fontSize: "14" }, props.title))),
-            !(props === null || props === void 0 ? void 0 : props.isAlwaysVisible) && (React__namespace.default.createElement(LinkButton, { cx: css$x.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: "24", icon: ForwardRef$v }))));
+            !(props === null || props === void 0 ? void 0 : props.isAlwaysVisible) && (React__namespace.default.createElement(LinkButton, { cx: css$z.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: "24", icon: ForwardRef$u }))));
     };
     const renderBody = (dropdownProps) => {
         const hideHeaderTitle = isPickersType && isMobileScreen;
-        return (React__namespace.default.createElement(DropdownContainer, Object.assign({}, dropdownProps),
-            React__namespace.default.createElement(Panel, { cx: css$x.panel }, isPickersType ? (React__namespace.default.createElement(MobileDropdownWrapper, { title: props.title, close: () => isOpenChange(false) },
-                renderHeader(hideHeaderTitle),
-                React__namespace.default.createElement(FilterItemBody, Object.assign({}, props, dropdownProps, { selectedPredicate: predicate, value: getValue(), onValueChange: onValueChange })))) : (React__namespace.default.createElement(React__namespace.default.Fragment, null,
-                renderHeader(hideHeaderTitle),
-                React__namespace.default.createElement(FilterItemBody, Object.assign({}, props, dropdownProps, { selectedPredicate: predicate, value: getValue(), onValueChange: onValueChange })))))));
+        return isPickersType ? (React__namespace.default.createElement(MobileDropdownWrapper, Object.assign({}, dropdownProps, { cx: css$z.root, title: props.title, width: 360, onClose: () => isOpenChange(false) }),
+            renderHeader(hideHeaderTitle),
+            React__namespace.default.createElement(FilterItemBody, Object.assign({}, props, dropdownProps, { selectedPredicate: predicate, value: getValue(), onValueChange: onValueChange })))) : (React__namespace.default.createElement(DropdownContainer, Object.assign({}, dropdownProps),
+            renderHeader(hideHeaderTitle),
+            React__namespace.default.createElement(FilterItemBody, Object.assign({}, props, dropdownProps, { selectedPredicate: predicate, value: getValue(), onValueChange: onValueChange }))));
     };
     const getValue = () => {
         var _a;
@@ -2683,20 +2678,20 @@ function FiltersToolbarItemImpl(props) {
 }
 const FiltersPanelItem = React__namespace.default.memo(FiltersToolbarItemImpl);
 
-var _path$t;
-function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
+var _path$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 SvgActionAdd18 = function SvgActionAdd18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     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__namespace.createElement("path", {
+  }, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M10 2H8v6H2v2h6v6h2v-6h6V8h-6V2z"
   })));
 };
-var ForwardRef$u = /*#__PURE__*/React.forwardRef(SvgActionAdd18);
+var ForwardRef$t = /*#__PURE__*/React.forwardRef(SvgActionAdd18);
 
 const normalizeFilterWithPredicates = (filter) => {
     if (!filter) {
@@ -2787,7 +2782,7 @@ function FiltersToolbarImpl(props) {
     }, [filters, tableState.filtersConfig]);
     const renderAddFilterToggler = React.useCallback((togglerProps) => {
         var _a;
-        return (React__namespace.default.createElement(Button, { size: (_a = props.size) !== null && _a !== void 0 ? _a : '36', onClick: togglerProps.onClick, ref: togglerProps.ref, caption: i18n.filterToolbar.addCaption, icon: ForwardRef$u, iconPosition: "left", fill: "ghost", color: "primary" }));
+        return (React__namespace.default.createElement(Button, { size: (_a = props.size) !== null && _a !== void 0 ? _a : '36', onClick: togglerProps.onClick, ref: togglerProps.ref, caption: i18n.filterToolbar.addCaption, icon: ForwardRef$t, iconPosition: "left", fill: "ghost", color: "primary" }));
     }, []);
     const getRowOptions = React.useCallback((item) => ({
         isDisabled: item.isAlwaysVisible,
@@ -2814,30 +2809,13 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = React__namespace.default.memo(FiltersToolbarImpl);
 
-var css$w = {"divider":"UEO8x5","dropdownDeleteIcon":"OuJeUl","presetsWrapper":"av683i","addPresetContainer":"PLAmtz","dropContainer":"YFniCM"};
+var css$y = {"divider":"B95GQr","dropdownDeleteIcon":"_2pUECw","presetsWrapper":"_6o3yWT","addPresetContainer":"jReawz","dropContainer":"duOJxw"};
 
-var css$v = {"preset-dropdown-panel":"W-1aql","delete-row":"zCaHXp","delete-button":"hauuGK","targetOpen":"-pILry","presetDropdownPanel":"W-1aql","deleteRow":"zCaHXp","deleteButton":"hauuGK"};
-
-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 SvgNavigationMoreVert18 = function SvgNavigationMoreVert18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
-    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__namespace.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$t = /*#__PURE__*/React.forwardRef(SvgNavigationMoreVert18);
+var css$x = {"preset-dropdown-panel":"SjXSIv","delete-row":"Wroi25","delete-button":"_1xaMO8","targetOpen":"WCMpar","presetDropdownPanel":"SjXSIv","deleteRow":"Wroi25","deleteButton":"_1xaMO8"};
 
 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 SvgActionUpdate18 = function SvgActionUpdate18(props, ref) {
+var SvgNavigationMoreVert18 = function SvgNavigationMoreVert18(props, ref) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
@@ -2846,15 +2824,15 @@ var SvgActionUpdate18 = function SvgActionUpdate18(props, ref) {
     ref: ref
   }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.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",
+    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$s = /*#__PURE__*/React.forwardRef(SvgActionUpdate18);
+var ForwardRef$s = /*#__PURE__*/React.forwardRef(SvgNavigationMoreVert18);
 
 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 SvgSaveOutline18 = function SvgSaveOutline18(props, ref) {
+var SvgActionUpdate18 = function SvgActionUpdate18(props, ref) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
@@ -2862,14 +2840,16 @@ var SvgSaveOutline18 = function SvgSaveOutline18(props, ref) {
     viewBox: "0 0 18 18",
     ref: ref
   }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M12.75 2.25h-9a1.5 1.5 0 0 0-1.5 1.5v10.5a1.5 1.5 0 0 0 1.5 1.5h10.5c.825 0 1.5-.675 1.5-1.5v-9l-3-3zm1.5 12H3.75V3.75h8.377l2.123 2.122v8.378zM9 9a2.247 2.247 0 0 0-2.25 2.25A2.247 2.247 0 0 0 9 13.5a2.247 2.247 0 0 0 2.25-2.25A2.247 2.247 0 0 0 9 9zM4.5 4.5h6.75v3H4.5v-3z"
+    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$r = /*#__PURE__*/React.forwardRef(SvgSaveOutline18);
+var ForwardRef$r = /*#__PURE__*/React.forwardRef(SvgActionUpdate18);
 
 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 SvgContentEditUndo18 = function SvgContentEditUndo18(props, ref) {
+var SvgSaveOutline18 = function SvgSaveOutline18(props, ref) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
@@ -2877,16 +2857,14 @@ var SvgContentEditUndo18 = function SvgContentEditUndo18(props, ref) {
     viewBox: "0 0 18 18",
     ref: ref
   }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    d: "M9.375 6A7.848 7.848 0 0 0 4.2 7.95l-2.7-2.7V12h6.75L5.535 9.285a5.965 5.965 0 0 1 3.84-1.41 6.009 6.009 0 0 1 5.7 4.125l1.777-.585C15.81 8.273 12.862 6 9.375 6z",
-    clipRule: "evenodd"
+    d: "M12.75 2.25h-9a1.5 1.5 0 0 0-1.5 1.5v10.5a1.5 1.5 0 0 0 1.5 1.5h10.5c.825 0 1.5-.675 1.5-1.5v-9l-3-3zm1.5 12H3.75V3.75h8.377l2.123 2.122v8.378zM9 9a2.247 2.247 0 0 0-2.25 2.25A2.247 2.247 0 0 0 9 13.5a2.247 2.247 0 0 0 2.25-2.25A2.247 2.247 0 0 0 9 9zM4.5 4.5h6.75v3H4.5v-3z"
   })));
 };
-var ForwardRef$q = /*#__PURE__*/React.forwardRef(SvgContentEditUndo18);
+var ForwardRef$q = /*#__PURE__*/React.forwardRef(SvgSaveOutline18);
 
 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 SvgActionCopyContent18 = function SvgActionCopyContent18(props, ref) {
+var SvgContentEditUndo18 = function SvgContentEditUndo18(props, ref) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
@@ -2895,15 +2873,15 @@ var SvgActionCopyContent18 = function SvgActionCopyContent18(props, ref) {
     ref: ref
   }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
-    d: "M3 1h8v2H3v8H1V3a2 2 0 0 1 2-2zm2 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7zm10 8H7V7h8v8z",
+    d: "M9.375 6A7.848 7.848 0 0 0 4.2 7.95l-2.7-2.7V12h6.75L5.535 9.285a5.965 5.965 0 0 1 3.84-1.41 6.009 6.009 0 0 1 5.7 4.125l1.777-.585C15.81 8.273 12.862 6 9.375 6z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$p = /*#__PURE__*/React.forwardRef(SvgActionCopyContent18);
+var ForwardRef$p = /*#__PURE__*/React.forwardRef(SvgContentEditUndo18);
 
 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 SvgContentEdit18 = function SvgContentEdit18(props, ref) {
+var SvgActionCopyContent18 = function SvgActionCopyContent18(props, ref) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
@@ -2912,15 +2890,15 @@ var SvgContentEdit18 = function SvgContentEdit18(props, ref) {
     ref: ref
   }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
-    d: "M2.25 12.94v2.812h2.813l8.294-8.295-2.812-2.813L2.25 12.94zm13.283-7.658a.747.747 0 0 0 0-1.058L13.777 2.47a.747.747 0 0 0-1.058 0l-1.373 1.373 2.813 2.812 1.373-1.372z",
+    d: "M3 1h8v2H3v8H1V3a2 2 0 0 1 2-2zm2 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7zm10 8H7V7h8v8z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$o = /*#__PURE__*/React.forwardRef(SvgContentEdit18);
+var ForwardRef$o = /*#__PURE__*/React.forwardRef(SvgActionCopyContent18);
 
 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 SvgContentLink18 = function SvgContentLink18(props, ref) {
+var SvgContentEdit18 = function SvgContentEdit18(props, ref) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
@@ -2929,15 +2907,15 @@ var SvgContentLink18 = function SvgContentLink18(props, ref) {
     ref: ref
   }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
-    d: "M7.943 10.057a.73.73 0 0 1 0 1.066.756.756 0 0 1-1.065 0 3.753 3.753 0 0 1 0-5.303l2.655-2.655a3.753 3.753 0 0 1 5.302 0 3.753 3.753 0 0 1 0 5.302l-1.118 1.118a5.18 5.18 0 0 0-.3-1.815l.353-.36a2.236 2.236 0 0 0 0-3.18 2.236 2.236 0 0 0-3.18 0L7.943 6.877a2.236 2.236 0 0 0 0 3.18zm2.114-3.18a.756.756 0 0 1 1.066 0 3.753 3.753 0 0 1 0 5.303l-2.655 2.655a3.753 3.753 0 0 1-5.303 0 3.753 3.753 0 0 1 0-5.303l1.118-1.117a5.25 5.25 0 0 0 .3 1.823l-.353.352a2.236 2.236 0 0 0 0 3.18 2.236 2.236 0 0 0 3.18 0l2.647-2.647a2.236 2.236 0 0 0 0-3.18.73.73 0 0 1 0-1.066z",
+    d: "M2.25 12.94v2.812h2.813l8.294-8.295-2.812-2.813L2.25 12.94zm13.283-7.658a.747.747 0 0 0 0-1.058L13.777 2.47a.747.747 0 0 0-1.058 0l-1.373 1.373 2.813 2.812 1.373-1.372z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$n = /*#__PURE__*/React.forwardRef(SvgContentLink18);
+var ForwardRef$n = /*#__PURE__*/React.forwardRef(SvgContentEdit18);
 
 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 SvgActionDeleteforever18 = function SvgActionDeleteforever18(props, ref) {
+var SvgContentLink18 = function SvgContentLink18(props, ref) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
@@ -2945,12 +2923,29 @@ var SvgActionDeleteforever18 = function SvgActionDeleteforever18(props, ref) {
     viewBox: "0 0 18 18",
     ref: ref
   }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M7.943 10.057a.73.73 0 0 1 0 1.066.756.756 0 0 1-1.065 0 3.753 3.753 0 0 1 0-5.303l2.655-2.655a3.753 3.753 0 0 1 5.302 0 3.753 3.753 0 0 1 0 5.302l-1.118 1.118a5.18 5.18 0 0 0-.3-1.815l.353-.36a2.236 2.236 0 0 0 0-3.18 2.236 2.236 0 0 0-3.18 0L7.943 6.877a2.236 2.236 0 0 0 0 3.18zm2.114-3.18a.756.756 0 0 1 1.066 0 3.753 3.753 0 0 1 0 5.303l-2.655 2.655a3.753 3.753 0 0 1-5.303 0 3.753 3.753 0 0 1 0-5.303l1.118-1.117a5.25 5.25 0 0 0 .3 1.823l-.353.352a2.236 2.236 0 0 0 0 3.18 2.236 2.236 0 0 0 3.18 0l2.647-2.647a2.236 2.236 0 0 0 0-3.18.73.73 0 0 1 0-1.066z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$m = /*#__PURE__*/React.forwardRef(SvgContentLink18);
+
+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 SvgActionDeleteforever18 = function SvgActionDeleteforever18(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+    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__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M7 2h4l1 1h3v2H3V3h3l1-1zM4 6h10v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6zm6.76 8.1L9 12.36 7.24 14.1l-1.16-1.16 1.74-1.76-1.78-1.8 1.2-1.18L9 10l1.76-1.8 1.18 1.18-1.76 1.8 1.76 1.76-1.18 1.16z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$m = /*#__PURE__*/React.forwardRef(SvgActionDeleteforever18);
+var ForwardRef$l = /*#__PURE__*/React.forwardRef(SvgActionDeleteforever18);
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = uuiCore.useUuiContext();
@@ -2987,30 +2982,30 @@ function PresetActionsDropdown(props) {
     ]);
     const renderBody = () => {
         const isReadonlyPreset = props.preset.isReadonly;
-        return (React__namespace.default.createElement(Panel, { shadow: true, cx: css$v.presetDropdownPanel },
+        return (React__namespace.default.createElement(Panel, { background: "surface", shadow: true, cx: css$x.presetDropdownPanel },
             props.activePresetId === props.preset.id && props.hasPresetChanged(props.preset) && (React__namespace.default.createElement(React__namespace.default.Fragment, null,
                 !isReadonlyPreset && (React__namespace.default.createElement(FlexRow, { key: `${props.preset.id}-save-in-current` },
-                    React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$s, caption: "Save in current", onClick: saveInCurrentHandler }))),
+                    React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$r, caption: "Save in current", onClick: saveInCurrentHandler }))),
                 React__namespace.default.createElement(FlexRow, { key: `${props.preset.id}-save-as-new` },
-                    React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$r, caption: "Save as new", onClick: props.addPreset })),
+                    React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$q, caption: "Save as new", onClick: props.addPreset })),
                 React__namespace.default.createElement(FlexRow, { key: `${props.preset.id}-discard`, borderBottom: true },
-                    React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$q, caption: "Discard all changes", onClick: discardAllChangesHandler })))),
+                    React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$p, caption: "Discard all changes", onClick: discardAllChangesHandler })))),
             props.preset.id === props.activePresetId && !isReadonlyPreset && (React__namespace.default.createElement(FlexRow, { key: `${props.preset.id}-rename` },
-                React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$o, caption: "Rename", onClick: props.renamePreset }))),
+                React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$n, caption: "Rename", onClick: props.renamePreset }))),
             React__namespace.default.createElement(FlexRow, { key: `${props.preset.id}-duplicate` },
-                React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$p, caption: "Duplicate", onClick: duplicateHandler })),
+                React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$o, caption: "Duplicate", onClick: duplicateHandler })),
             React__namespace.default.createElement(FlexRow, { borderBottom: true, key: `${props.preset.id}-copyLink` },
-                React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$n, caption: "Copy Link", onClick: copyUrlToClipboard })),
-            !isReadonlyPreset && (React__namespace.default.createElement(FlexRow, { key: `${props.preset.id}-delete`, cx: css$v.deleteRow },
-                React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$m, caption: "Delete", cx: css$v.deleteButton, onClick: deleteHandler })))));
+                React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$m, caption: "Copy Link", onClick: copyUrlToClipboard })),
+            !isReadonlyPreset && (React__namespace.default.createElement(FlexRow, { key: `${props.preset.id}-delete`, cx: css$x.deleteRow },
+                React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$l, caption: "Delete", cx: css$x.deleteButton, onClick: deleteHandler })))));
     };
     const renderTarget = React.useCallback((dropdownProps) => {
-        return (React__namespace.default.createElement(IconButton, Object.assign({ cx: dropdownProps.isOpen && css$v.targetOpen, color: props.preset.id === props.activePresetId ? 'info' : 'default' }, dropdownProps, { icon: ForwardRef$t })));
+        return (React__namespace.default.createElement(IconButton, Object.assign({ cx: dropdownProps.isOpen && css$x.targetOpen, color: props.preset.id === props.activePresetId ? 'info' : 'neutral' }, dropdownProps, { icon: ForwardRef$s })));
     }, []);
     return (React__namespace.default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", modifiers: [{ name: 'offset', options: { offset: [0, 22] } }] }));
 }
 
-var css$u = {"preset-input-cell":"qxmGQM","preset-input":"_6wWYNJ","presetInputCell":"qxmGQM","presetInput":"_6wWYNJ"};
+var css$w = {"preset-input-cell":"DAkrrp","preset-input":"-pvSxv","presetInputCell":"DAkrrp","presetInput":"-pvSxv"};
 
 function PresetInput(props) {
     var _a;
@@ -3031,11 +3026,11 @@ function PresetInput(props) {
         }
         props.onCancel();
     }, [presetCaption.length, props.onCancel]);
-    return (React__namespace.default.createElement(FlexCell, { cx: css$u.presetInputCell, minWidth: 180 },
-        React__namespace.default.createElement(TextInput, { cx: css$u.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50 })));
+    return (React__namespace.default.createElement(FlexCell, { cx: css$w.presetInputCell, minWidth: 180 },
+        React__namespace.default.createElement(TextInput, { cx: css$w.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50 })));
 }
 
-var css$t = {"preset":"_38xI-e","activePreset":"LDGoAV"};
+var css$v = {"preset":"GjqrSR","activePreset":"ZPPWsj"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = React.useState(false);
@@ -3053,23 +3048,23 @@ function Preset(props) {
         return props.updatePreset(newPreset);
     }, [props.preset]);
     const isPresetActive = props.activePresetId === props.preset.id;
-    return (React__namespace.default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__namespace.default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__namespace.default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$t.preset, isPresetActive && css$t.activePreset], size: "60", withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: () => React__namespace.default.createElement(PresetActionsDropdown, Object.assign({ renamePreset: setPresetForRename }, props)), iconPosition: "right", isLinkActive: isPresetActive }))));
+    return (React__namespace.default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__namespace.default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__namespace.default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$v.preset, isPresetActive && css$v.activePreset], size: "60", withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: () => React__namespace.default.createElement(PresetActionsDropdown, Object.assign({ renamePreset: setPresetForRename }, props)), iconPosition: "right", isLinkActive: isPresetActive }))));
 }
 
-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$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 SvgContentPlusBold18 = function SvgContentPlusBold18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
     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__namespace.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M10.5 3h-3v4.5H3v3h4.5V15h3v-4.5H15v-3h-4.5V3z"
   })));
 };
-var ForwardRef$l = /*#__PURE__*/React.forwardRef(SvgContentPlusBold18);
+var ForwardRef$k = /*#__PURE__*/React.forwardRef(SvgContentPlusBold18);
 
 function PresetsPanel(props) {
     const [isAddingPreset, setIsAddingPreset] = React.useState(false);
@@ -3084,16 +3079,16 @@ function PresetsPanel(props) {
         return React__namespace.default.createElement(Preset, Object.assign({ key: preset.id, preset: preset, addPreset: setAddingPreset }, presetApi));
     };
     const renderAddPresetButton = React.useCallback(() => {
-        return (React__namespace.default.createElement("div", { key: "addingPresetBlock", className: css$w.addPresetContainer }, !isAddingPreset ? (React__namespace.default.createElement(Button, { size: "36", onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: ForwardRef$l, iconPosition: "left", fill: "ghost", color: "primary" })) : (React__namespace.default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
+        return (React__namespace.default.createElement("div", { key: "addingPresetBlock", className: css$y.addPresetContainer }, !isAddingPreset ? (React__namespace.default.createElement(Button, { size: "36", onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: ForwardRef$k, iconPosition: "left", fill: "ghost", color: "primary" })) : (React__namespace.default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
     }, [isAddingPreset]);
     const onPresetDropdownSelect = (preset) => {
         props.choosePreset(preset.preset);
     };
     const renderMoreButtonDropdown = (item, hiddenItems) => {
         return (React__namespace.default.createElement(Dropdown, { key: "more", renderTarget: (props) => (React__namespace.default.createElement(FlexRow, null,
-                React__namespace.default.createElement("div", { className: css$w.divider }),
-                React__namespace.default.createElement(Button, Object.assign({ fill: "ghost", color: "secondary", caption: `${(hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.length) || ''} more` }, props)))), renderBody: () => (React__namespace.default.createElement(DropdownContainer, { cx: uuiCore.cx(css$w.dropContainer), width: 230 },
-                React__namespace.default.createElement(uuiComponents.ScrollBars, null, hiddenItems.map((hiddenItem) => (React__namespace.default.createElement(DropdownMenuButton, { key: hiddenItem.preset.id, onClick: () => onPresetDropdownSelect(hiddenItem), caption: hiddenItem.preset.name, icon: !hiddenItem.preset.isReadonly && ForwardRef$m, iconPosition: "right", cx: css$w.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
+                React__namespace.default.createElement("div", { className: css$y.divider }),
+                React__namespace.default.createElement(Button, Object.assign({ fill: "ghost", color: "secondary", caption: `${(hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.length) || ''} more` }, props)))), renderBody: (propsBody) => (React__namespace.default.createElement(DropdownContainer, Object.assign({ cx: uuiCore.cx(css$y.dropContainer), width: 230 }, propsBody),
+                React__namespace.default.createElement(uuiComponents.ScrollBars, null, hiddenItems.map((hiddenItem) => (React__namespace.default.createElement(DropdownMenuButton, { key: hiddenItem.preset.id, onClick: () => onPresetDropdownSelect(hiddenItem), caption: hiddenItem.preset.name, icon: !hiddenItem.preset.isReadonly && ForwardRef$l, iconPosition: "right", cx: css$y.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
     };
     const getPresetPriority = (preset, index) => {
         return preset.id === props.activePresetId ? 100499 : 1000 - index;
@@ -3111,7 +3106,7 @@ function PresetsPanel(props) {
         ];
     };
     return (React__namespace.default.createElement(FlexCell, { grow: 1, minWidth: 310, rawProps: props.rawProps },
-        React__namespace.default.createElement(FlexRow, { size: null, spacing: "12", cx: css$w.presetsWrapper },
+        React__namespace.default.createElement(FlexRow, { size: null, spacing: "12", cx: css$y.presetsWrapper },
             React__namespace.default.createElement(uuiComponents.AdaptivePanel, { items: getPanelItems() }))));
 }
 
@@ -3149,7 +3144,7 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var css$s = {"line-height-12":"mD-DmK","line-height-18":"_2QYXWl","line-height-24":"mSerP9","line-height-30":"zBBXL-","font-size-10":"fy2mqS","font-size-12":"uAImK-","font-size-14":"_7m0RYD","font-size-16":"_1z-8Jy","font-size-18":"MNxnAk","font-size-24":"zxKzOf","v-padding-2":"_3sj4zE","v-padding-3":"fvUIPc","v-padding-5":"c4494d","v-padding-6":"j98gti","v-padding-8":"eCaGtG","v-padding-9":"eUZO5R","v-padding-11":"dDxCeH","v-padding-12":"OIqffZ","v-padding-14":"um7LQL","v-padding-15":"zTy9hQ","v-padding-17":"bmbOqd","v-padding-18":"GOQA06","v-padding-23":"m0Xyxp","v-padding-24":"_4mS8-T","lineHeight12":"mD-DmK","lineHeight18":"_2QYXWl","lineHeight24":"mSerP9","lineHeight30":"zBBXL-","fontSize10":"fy2mqS","fontSize12":"uAImK-","fontSize14":"_7m0RYD","fontSize16":"_1z-8Jy","fontSize18":"MNxnAk","fontSize24":"zxKzOf","vPadding2":"_3sj4zE","vPadding3":"fvUIPc","vPadding5":"c4494d","vPadding6":"j98gti","vPadding8":"eCaGtG","vPadding9":"eUZO5R","vPadding11":"dDxCeH","vPadding12":"OIqffZ","vPadding14":"um7LQL","vPadding15":"zTy9hQ","vPadding17":"bmbOqd","vPadding18":"GOQA06","vPadding23":"m0Xyxp","vPadding24":"_4mS8-T"};
+var css$u = {"line-height-12":"gnqeJP","line-height-18":"_0HeJOH","line-height-24":"z17ViQ","line-height-30":"PPpLg-","font-size-10":"JgKxV2","font-size-12":"rvvp2r","font-size-14":"br99be","font-size-16":"AAZdm3","font-size-18":"piDdw-","font-size-24":"ElLMBx","v-padding-2":"_7SkLfV","v-padding-3":"b7eiDk","v-padding-5":"dFlWDe","v-padding-6":"_5BDNpB","v-padding-8":"wo-A43","v-padding-9":"Ls2EKS","v-padding-11":"H8vl9-","v-padding-12":"xC1pJD","v-padding-14":"ss3TWa","v-padding-15":"Ya76--","v-padding-17":"GfKFnD","v-padding-18":"jnpobl","v-padding-23":"MTOI1d","v-padding-24":"OKY02H","lineHeight12":"gnqeJP","lineHeight18":"_0HeJOH","lineHeight24":"z17ViQ","lineHeight30":"PPpLg-","fontSize10":"JgKxV2","fontSize12":"rvvp2r","fontSize14":"br99be","fontSize16":"AAZdm3","fontSize18":"piDdw-","fontSize24":"ElLMBx","vPadding2":"_7SkLfV","vPadding3":"b7eiDk","vPadding5":"dFlWDe","vPadding6":"_5BDNpB","vPadding8":"wo-A43","vPadding9":"Ls2EKS","vPadding11":"H8vl9-","vPadding12":"xC1pJD","vPadding14":"ss3TWa","vPadding15":"Ya76--","vPadding17":"GfKFnD","vPadding18":"jnpobl","vPadding23":"MTOI1d","vPadding24":"OKY02H"};
 
 const defaultTextSettings = {
     18: { lineHeight: 12, fontSize: 10 },
@@ -3162,7 +3157,7 @@ const defaultTextSettings = {
 };
 function getTextClasses(props, border) {
     if (props.size === 'none') {
-        return [css$s['line-height-' + props.lineHeight], css$s['font-size-' + props.fontSize]];
+        return [css$u['line-height-' + props.lineHeight], css$u['font-size-' + props.fontSize]];
     }
     const setting = {
         size: props.size,
@@ -3171,10 +3166,12 @@ function getTextClasses(props, border) {
     };
     const vPadding = (+setting.size - +setting.lineHeight - (border ? 2 : 0)) / 2;
     return [
-        css$s['line-height-' + setting.lineHeight], css$s['font-size-' + setting.fontSize], css$s['v-padding-' + vPadding],
+        css$u['line-height-' + setting.lineHeight], css$u['font-size-' + setting.fontSize], css$u['v-padding-' + vPadding],
     ];
 }
 
+var css$t = {"root":"KPE1S0"};
+
 const allTextColors = ['info', 'warning', 'error', 'success', 'brand', 'primary', 'secondary', 'disabled', 'contrast', 'white'];
 function applyTextMods(mods) {
     const textClasses = getTextClasses({
@@ -3183,7 +3180,7 @@ function applyTextMods(mods) {
         fontSize: mods.fontSize,
     }, false);
     return [
-        css$T.root,
+        css$t.root,
         'uui-text',
         `uui-font-${mods.font || 'regular'}`,
         `uui-color-${mods.color || 'primary'}`,
@@ -3191,7 +3188,7 @@ function applyTextMods(mods) {
 }
 const Text = uuiCore.withMods(uuiComponents.Text, applyTextMods);
 
-var css$r = {"root":"BPCsED","loading-word":"Crp14x","animated-loading":"M7qCA1","skeleton_loading":"lm9PTM","loadingWord":"Crp14x","animatedLoading":"M7qCA1","skeletonLoading":"lm9PTM"};
+var css$s = {"root":"_7AQCfe","loading-word":"YIb4i7","animated-loading":"CkgQRN","skeleton_loading":"_4yi-7n","loadingWord":"YIb4i7","animatedLoading":"CkgQRN","skeletonLoading":"_4yi-7n"};
 
 const TextPlaceholder = (props) => {
     const pattern = '&nbsp;';
@@ -3203,56 +3200,59 @@ const TextPlaceholder = (props) => {
         }
         return words;
     }, [props.wordsCount]);
-    return (React__namespace.createElement("div", Object.assign({ "aria-busy": true, className: css$r.root }, props.rawProps), text.map((it, index) => (React__namespace.createElement("span", { key: index, className: cx__default.default([
-            props.cx, css$r.loadingWord, !props.isNotAnimated && css$r.animatedLoading,
+    return (React__namespace.createElement("div", Object.assign({ "aria-busy": true, className: css$s.root }, props.rawProps), text.map((it, index) => (React__namespace.createElement("span", { key: index, className: cx__default.default([
+            props.cx, css$s.loadingWord, !props.isNotAnimated && css$s.animatedLoading,
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
-var style = {"typography-16":"XcDmAh","typography-14":"JRebeP","typography-12":"X-Dshb","typography-uui":"c-P7ZZ","typography16":"XcDmAh","typography14":"JRebeP","typography12":"X-Dshb","typographyUui":"c-P7ZZ"};
+var style = {"typography-16":"baqGMN","typography-14":"kYwine","typography-12":"LK33w5","typography-uui":"thGQKK","typography16":"baqGMN","typography14":"kYwine","typography12":"LK33w5","typographyUui":"thGQKK"};
 
 const RichTextView = uuiCore.withMods(uuiComponents.RichTextView, (mods) => [style.typographyUui, style['typography-' + (mods.size || '14')]]);
 
-var css$q = {"modal-blocker":"xNQp-e","animateModalBlocker":"PQfcDA","modal":"NAGHnD","modal-footer":"rz6hez","border-top":"AtKl0U","modal-header":"ITVRj-","modalBlocker":"xNQp-e","modalFooter":"rz6hez","borderTop":"AtKl0U","modalHeader":"ITVRj-"};
+var css$r = {"root":"e34c9h","modal-blocker":"PU3pdT","animateModalBlocker":"FKW2w-","modal":"ooxJvl","modal-footer":"j5BDA4","border-top":"O-IL2R","modal-header":"_88B-pu","modalBlocker":"PU3pdT","modalFooter":"j5BDA4","borderTop":"O-IL2R","modalHeader":"_88B-pu"};
 
-const ModalBlocker = uuiCore.withMods(uuiComponents.ModalBlocker, () => [css$q.modalBlocker]);
-const ModalWindow = uuiCore.withMods(uuiComponents.ModalWindow, () => [css$q.modal], (props) => ({
+const ModalBlocker = uuiCore.withMods(uuiComponents.ModalBlocker, () => [css$r.modalBlocker]);
+const ModalWindow = uuiCore.withMods(uuiComponents.ModalWindow, () => [css$r.root, css$r.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__namespace.Component {
     render() {
-        return (React__namespace.createElement(FlexRow, { padding: this.props.padding || '24', vPadding: "12", borderBottom: this.props.borderBottom, cx: [css$q.modalHeader, this.props.cx], spacing: "12", rawProps: this.props.rawProps },
+        return (React__namespace.createElement(FlexRow, { padding: this.props.padding || '24', vPadding: "12", borderBottom: this.props.borderBottom, cx: [css$r.root, css$r.modalHeader, this.props.cx], spacing: "12", rawProps: this.props.rawProps },
             this.props.title && (React__namespace.createElement(Text, { size: "48", fontSize: "18", font: "semibold" }, this.props.title)),
             this.props.children,
             this.props.onClose && React__namespace.createElement(uuiComponents.FlexSpacer, null),
             this.props.onClose && (React__namespace.createElement(FlexCell, { shrink: 0, width: "auto" },
-                React__namespace.createElement(IconButton, { icon: ForwardRef$E, onClick: this.props.onClose })))));
+                React__namespace.createElement(IconButton, { rawProps: { 'aria-label': 'Close modal' }, icon: ForwardRef$D, onClick: this.props.onClose })))));
     }
 }
 class ModalFooter extends React__namespace.Component {
     render() {
         return (React__namespace.createElement(FlexRow, { spacing: this.props.spacing || '12', cx: [
-                css$q.modalFooter, this.props.borderTop && css$q.borderTop, this.props.cx,
+                css$r.root,
+                css$r.modalFooter,
+                this.props.borderTop && css$r.borderTop,
+                this.props.cx,
             ], padding: this.props.padding || '24', vPadding: this.props.vPadding || '24', rawProps: this.props.rawProps }, this.props.children));
     }
 }
 
-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$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 SvgCross = function SvgCross(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.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$k = /*#__PURE__*/React.forwardRef(SvgCross);
+var ForwardRef$j = /*#__PURE__*/React.forwardRef(SvgCross);
 
-var css$p = {"root":"pCXiv4","icon-wrapper":"vH-GMH","action-wrapper":"TrN3M4","action-link":"B6ngXi","close-icon":"Yt3CXa","main-path":"Q5CLyt","content":"SYYXq6","clear-button":"CT0ILR","close-wrapper":"SZLITI","iconWrapper":"vH-GMH","actionWrapper":"TrN3M4","actionLink":"B6ngXi","closeIcon":"Yt3CXa","mainPath":"Q5CLyt","clearButton":"CT0ILR","closeWrapper":"SZLITI"};
+var css$q = {"root":"_2wFC-r","icon-wrapper":"FTaOnv","action-wrapper":"KE9vxb","action-link":"I0ZjlW","close-icon":"jlecMO","main-path":"ZhsbwQ","content":"O5KPzs","clear-button":"jcBccY","close-wrapper":"cIIH5i","iconWrapper":"FTaOnv","actionWrapper":"KE9vxb","actionLink":"I0ZjlW","closeIcon":"jlecMO","mainPath":"ZhsbwQ","clearButton":"jcBccY","closeWrapper":"cIIH5i"};
 
 const NotificationCard = React__namespace.default.forwardRef((props, ref) => {
     const notificationCardNode = React__namespace.default.useRef(null);
@@ -3267,23 +3267,23 @@ const NotificationCard = React__namespace.default.forwardRef((props, ref) => {
             (_b = notificationCardNode.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', props.refreshTimer);
         };
     }, []);
-    return (React__namespace.default.createElement("div", Object.assign({ role: "alert", className: cx__default.default('uui-notification_card', props.color && `uui-color-${props.color}`, css$p.root, props.cx), ref: notificationCardNode }, props.rawProps),
-        React__namespace.default.createElement("div", { className: css$p.mainPath },
-            props.icon && (React__namespace.default.createElement("div", { className: css$p.iconWrapper },
-                React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, cx: css$p.actionIcon }))),
-            React__namespace.default.createElement("div", { className: css$p.content },
+    return (React__namespace.default.createElement("div", Object.assign({ role: "alert", className: cx__default.default('uui-notification_card', props.color && `uui-color-${props.color}`, css$q.root, props.cx), ref: notificationCardNode }, props.rawProps),
+        React__namespace.default.createElement("div", { className: css$q.mainPath },
+            props.icon && (React__namespace.default.createElement("div", { className: css$q.iconWrapper },
+                React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, cx: css$q.actionIcon }))),
+            React__namespace.default.createElement("div", { className: css$q.content },
                 props.children,
-                props.actions && (React__namespace.default.createElement("div", { className: css$p.actionWrapper }, props.actions.map((action) => (React__namespace.default.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$p.actionLink, size: "36", rawProps: action.rawProps })))))),
-            props.onClose && (React__namespace.default.createElement("div", { className: css$p.closeWrapper },
-                React__namespace.default.createElement(IconButton, { icon: ForwardRef$k, color: "default", onClick: props.onClose, cx: css$p.closeIcon }))))));
+                props.actions && (React__namespace.default.createElement("div", { className: css$q.actionWrapper }, props.actions.map((action) => (React__namespace.default.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$q.actionLink, size: "36", rawProps: action.rawProps })))))),
+            props.onClose && (React__namespace.default.createElement("div", { className: css$q.closeWrapper },
+                React__namespace.default.createElement(IconButton, { icon: ForwardRef$j, color: "neutral", onClick: props.onClose, cx: css$q.closeIcon }))))));
 });
-const WarningNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$H, color: "warning" }, props, { ref: ref, cx: props.cx }))));
-const SuccessNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$I, color: "success" }, props, { ref: ref, cx: props.cx }))));
-const HintNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$F, color: "info" }, props, { ref: ref, cx: props.cx }))));
-const ErrorNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$G, color: "error" }, props, { ref: ref, cx: props.cx }))));
+const WarningNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$G, color: "warning" }, props, { ref: ref, cx: props.cx }))));
+const SuccessNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$H, color: "success" }, props, { ref: ref, cx: props.cx }))));
+const HintNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$E, color: "info" }, props, { ref: ref, cx: props.cx }))));
+const ErrorNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$F, color: "error" }, props, { ref: ref, cx: props.cx }))));
 class ClearNotification extends React__namespace.default.Component {
     render() {
-        return (React__namespace.default.createElement("div", { className: cx__default.default(css$p.notificationWrapper, css$p.clearButton) },
+        return (React__namespace.default.createElement("div", { className: cx__default.default(css$q.notificationWrapper, css$q.clearButton) },
             React__namespace.default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => this.context.uuiNotifications.clearAll() })));
     }
 }
@@ -3293,7 +3293,7 @@ class ConfirmationModal extends React__namespace.Component {
     render() {
         let bodyContent;
         if (this.props.bodyContent) {
-            bodyContent = React__namespace.createElement(Panel, { margin: "24" }, this.props.bodyContent);
+            bodyContent = React__namespace.createElement(Panel, { background: "surface", margin: "24" }, this.props.bodyContent);
         }
         return (React__namespace.createElement(ModalBlocker, Object.assign({}, this.props),
             React__namespace.createElement(ModalWindow, { width: 420 },
@@ -3328,20 +3328,20 @@ class DatePicker extends uuiComponents.BaseDatePicker {
     }
     renderBody(props) {
         var _a, _b, _c;
-        return (React__namespace.default.createElement(DropdownContainer, Object.assign({}, props),
+        return (React__namespace.default.createElement(DropdownContainer, Object.assign({}, props, { focusLock: false }),
             React__namespace.default.createElement(DatePickerBody, { cx: uuiCore.cx(this.props.bodyCx), filter: this.props.filter, value: this.getValue(), setSelectedDate: this.setSelectedDate, setDisplayedDateAndView: this.setDisplayedDateAndView, changeIsOpen: this.onToggle, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.body }), (_c = (_b = this.props).renderFooter) === null || _c === void 0 ? void 0 :
             _c.call(_b)));
     }
 }
 
-var css$o = {"root":"aVhaQT"};
+var css$p = {"root":"_8x08oa"};
 
 function applyCalendarPresetsMods() {
-    return [css$o.root];
+    return [css$p.root];
 }
 const CalendarPresets = uuiCore.withMods(uuiComponents.CalendarPresets, applyCalendarPresetsMods, () => ({}));
 
-var css$n = {"root":"J24ofS","container":"K356qe","day-selection":"CBx8ti","from-picker":"VwsIlC","to-picker":"SdXbfe","bodes-wrapper":"_1SSpDE","blocker":"V6UilZ","daySelection":"CBx8ti","fromPicker":"VwsIlC","toPicker":"SdXbfe","bodesWrapper":"_1SSpDE"};
+var css$o = {"root":"_7aHaaq","container":"_1tEewG","day-selection":"s4B1Su","from-picker":"_3Acw2X","to-picker":"ZxJ3Lm","bodes-wrapper":"jKftgh","blocker":"jQiH5d","daySelection":"s4B1Su","fromPicker":"_3Acw2X","toPicker":"ZxJ3Lm","bodesWrapper":"jKftgh"};
 
 dayjs__default.default.extend(isoWeek__default.default);
 function weekCount(displayedDate) {
@@ -3438,16 +3438,16 @@ class RangeDatePickerBody extends React__namespace.Component {
         };
         this.renderDatePicker = () => {
             var _a, _b;
-            return (React__namespace.createElement(FlexRow, { cx: [((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.view) === 'DAY_SELECTION' && css$n.daySelection, css$n.container], alignItems: "top" },
+            return (React__namespace.createElement(FlexRow, { cx: [((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.view) === 'DAY_SELECTION' && css$o.daySelection, css$o.container], alignItems: "top" },
                 React__namespace.createElement(FlexCell, { width: "auto" },
                     React__namespace.createElement(FlexRow, null,
-                        React__namespace.createElement(FlexRow, { cx: css$n.bodesWrapper, alignItems: "top" },
-                            React__namespace.createElement(DatePickerBody, { cx: uuiCore.cx(css$n.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__namespace.createElement(DatePickerBody, { cx: uuiCore.cx(css$n.toPicker), setSelectedDate: (nv) => this.setSelectedDate(nv), value: this.getToValue(), setDisplayedDateAndView: (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'to'), getDayCX: this.getDayCX, filter: this.props.filter, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday }),
+                        React__namespace.createElement(FlexRow, { cx: css$o.bodesWrapper, alignItems: "top" },
+                            React__namespace.createElement(DatePickerBody, { cx: uuiCore.cx(css$o.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__namespace.createElement(DatePickerBody, { cx: uuiCore.cx(css$o.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__namespace.createElement("div", { style: {
                                     left: this.state.activePart === 'from' && '50%',
                                     right: this.state.activePart === 'to' && '50%',
-                                }, className: css$n.blocker }))),
+                                }, className: css$o.blocker }))),
                         this.props.presets && this.renderPresets()),
                     this.props.renderFooter && this.props.renderFooter())));
         };
@@ -3498,11 +3498,11 @@ class RangeDatePickerBody extends React__namespace.Component {
         });
     }
     render() {
-        return (React__namespace.createElement("div", Object.assign({ className: uuiCore.cx(css$n.root, uuiComponents.uuiDatePickerBodyBase.container, this.props.cx) }, this.props.rawProps), this.renderDatePicker()));
+        return (React__namespace.createElement("div", Object.assign({ className: uuiCore.cx(css$o.root, uuiComponents.uuiDatePickerBodyBase.container, this.props.cx) }, this.props.rawProps), this.renderDatePicker()));
     }
 }
 
-var css$m = {"dropdown-container":"dhymYA","container":"wF8-Tp","button-group":"yB9sHY","date-input":"PmHtZ-","size-24":"RnZN3J","size-30":"UyMsvV","size-36":"Dszt05","size-42":"nHX49-","size-48":"_1ujJlj","date-input-group":"heduuN","separator":"-M6hA6","mode-form":"H7DxgE","mode-cell":"CCvtEH","dropdownContainer":"dhymYA","buttonGroup":"yB9sHY","dateInput":"PmHtZ-","size24":"RnZN3J","size30":"UyMsvV","size36":"Dszt05","size42":"nHX49-","size48":"_1ujJlj","dateInputGroup":"heduuN","modeForm":"H7DxgE","modeCell":"CCvtEH"};
+var css$n = {"dropdown-container":"e6lJqh","date-input":"YX63WL","size-24":"Ok7zil","size-30":"yMd82T","size-36":"JdfbIS","size-42":"qm7zcz","size-48":"yKgMLW","date-input-group":"Cbq1lZ","separator":"wIBvHc","mode-form":"qWi-Xx","mode-cell":"_4U6p4Q","dropdownContainer":"e6lJqh","dateInput":"YX63WL","size24":"Ok7zil","size30":"yMd82T","size36":"JdfbIS","size42":"qm7zcz","size48":"yKgMLW","dateInputGroup":"Cbq1lZ","modeForm":"qWi-Xx","modeCell":"_4U6p4Q"};
 
 const defaultValue = { from: null, to: null };
 class RangeDatePicker extends uuiComponents.BaseRangeDatePicker {
@@ -3521,35 +3521,36 @@ class RangeDatePicker extends uuiComponents.BaseRangeDatePicker {
                     });
                 }
             }
-            return (React__namespace.createElement("div", { className: cx__default.default(this.props.inputCx, css$m.dateInputGroup, this.props.isDisabled && uuiCore.uuiMod.disabled, this.props.isReadonly && uuiCore.uuiMod.readonly, this.props.isInvalid && uuiCore.uuiMod.invalid, this.state.inFocus && uuiCore.uuiMod.focus), onClick: !this.props.isDisabled && props.onClick, onBlur: this.handleWrapperBlur, ref: props.ref },
-                React__namespace.createElement(TextInput, { icon: systemIcons[this.props.size || '36'].calendar, cx: cx__default.default(css$m.dateInput, css$m['size-' + (this.props.size || 36)], this.state.inFocus === 'from' && uuiCore.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__namespace.createElement("div", { className: css$m.separator }),
-                React__namespace.createElement(TextInput, { cx: cx__default.default(css$m.dateInput, css$m['size-' + (this.props.size || 36)], this.state.inFocus === 'to' && uuiCore.uuiMod.focus), placeholder: this.props.getPlaceholder ? this.props.getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: this.props.size || '36', value: this.state.inputValue.to, onCancel: this.props.disableClear ? null : this.state.inputValue.from && this.state.inputValue.to && this.handleCancel, onValueChange: this.getChangeHandler('to'), isInvalid: this.props.isInvalid, isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, onFocus: (e) => this.handleFocus(e, 'to'), onBlur: (e) => this.handleBlur(e, 'to'), isDropdown: false, rawProps: (_b = this.props.rawProps) === null || _b === void 0 ? void 0 : _b.to })));
+            return (React__namespace.createElement("div", { className: cx__default.default(this.props.inputCx, css$n.dateInputGroup, this.props.isDisabled && uuiCore.uuiMod.disabled, this.props.isReadonly && uuiCore.uuiMod.readonly, this.props.isInvalid && uuiCore.uuiMod.invalid, this.state.inFocus && uuiCore.uuiMod.focus), onClick: !this.props.isDisabled && props.onClick, onBlur: this.handleWrapperBlur, ref: props.ref },
+                React__namespace.createElement(TextInput, { icon: systemIcons[this.props.size || '36'].calendar, cx: cx__default.default(css$n.dateInput, css$n['size-' + (this.props.size || 36)], this.state.inFocus === 'from' && uuiCore.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__namespace.createElement("div", { className: css$n.separator }),
+                React__namespace.createElement(TextInput, { cx: cx__default.default(css$n.dateInput, css$n['size-' + (this.props.size || 36)], this.state.inFocus === 'to' && uuiCore.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__namespace.createElement(DropdownContainer, Object.assign({}, props, { cx: cx__default.default(css$m.dropdownContainer) }),
+        return (React__namespace.createElement(DropdownContainer, Object.assign({}, props, { cx: cx__default.default(css$n.dropdownContainer), focusLock: false }),
             React__namespace.createElement(FlexRow, null,
                 React__namespace.createElement(RangeDatePickerBody, { cx: cx__default.default(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$l = {"blocker":"jwsQao","marker":"X9feU3","top":"ERI2ck","bottom":"Y0L5K5","left":"aY-aN4","right":"_6eqhiy","inside":"jRan0v"};
+var css$m = {"root":"bZ0nVT","blocker":"qHkRPS","marker":"Qc-vcX","top":"m8OMc-","bottom":"_9Ly0iF","left":"VhmxkW","right":"_5U6Z3S","inside":"cm9htT"};
 
 function DropMarker(props) {
     return props.isDndInProgress
         ? (React__namespace.createElement(React__namespace.Fragment, null,
-            props.enableBlocker && React__namespace.createElement("div", { className: css$l.blocker }),
+            props.enableBlocker && React__namespace.createElement("div", { className: css$m.blocker }),
             React__namespace.createElement("div", { className: cx__default.default([
-                    css$l.marker,
-                    css$l[props.position],
+                    css$m.root,
+                    css$m.marker,
+                    css$m[props.position],
                     props === null || props === void 0 ? void 0 : props.cx,
                 ]) })))
         : null;
 }
 
-var css$k = {"root":"DxeoCE","size-24":"_0op7oQ","size-30":"VsMSo0","size-36":"-ioU0j","size-48":"yPS-CM","size-60":"luSckc","size24":"_0op7oQ","size30":"VsMSo0","size36":"-ioU0j","size48":"yPS-CM","size60":"luSckc"};
+var css$l = {"root":"nyMs2x","size-24":"chkSyn","size-30":"YfZfvb","size-36":"f168Bn","size-48":"f9wik7","size-60":"_7DwaIp","size24":"chkSyn","size30":"YfZfvb","size36":"f168Bn","size48":"f9wik7","size60":"_7DwaIp"};
 
 // 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.
@@ -3561,54 +3562,54 @@ const renderDropMarkers = (props) => React__namespace.createElement(DropMarker,
 const propsMods = { renderCell, renderDropMarkers };
 const DataTableRow = uuiCore.withMods(uuiComponents.DataTableRow, ({ borderBottom = true, size }) => {
     return [
-        css$k.root, 'uui-dt-vars', borderBottom && 'uui-dt-row-border', css$k['size-' + (size || '36')],
+        css$l.root, 'uui-dt-vars', borderBottom && 'uui-dt-row-border', css$l['size-' + (size || '36')],
     ];
 }, () => propsMods);
 
-var css$j = {"panel":"TTNmJf"};
+var css$k = {"panel":"r1fr9O"};
 
-var css$i = {"sorting-panel-container":"AMBqQt","sort-active":"oXsW9B","sortingPanelContainer":"AMBqQt","sortActive":"oXsW9B"};
+var css$j = {"sorting-panel-container":"g1Vwar","sort-active":"_1qQ-VD","sortingPanelContainer":"g1Vwar","sortActive":"_1qQ-VD"};
 
-var _path$i;
-function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
+var _path$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 SvgTableSortAsc18 = function SvgTableSortAsc18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M10 6v10H8V6H5l4-4 4 4h-3z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$j = /*#__PURE__*/React.forwardRef(SvgTableSortAsc18);
+var ForwardRef$i = /*#__PURE__*/React.forwardRef(SvgTableSortAsc18);
 
-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$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 SvgTableSortDesc18 = function SvgTableSortDesc18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M10 12V2H8v10H5l4 4 4-4h-3z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$i = /*#__PURE__*/React.forwardRef(SvgTableSortDesc18);
+var ForwardRef$h = /*#__PURE__*/React.forwardRef(SvgTableSortDesc18);
 
 const SortingPanelImpl = ({ sortDirection, onSort }) => {
     const sortAsc = React.useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
     const sortDesc = React.useCallback(() => onSort(sortDirection === 'desc' ? undefined : 'desc'), [onSort]);
-    return (React__namespace.default.createElement(FlexCell, { cx: css$i.sortingPanelContainer },
-        React__namespace.default.createElement(DropdownMenuButton, { isActive: sortDirection === 'asc', caption: i18n.pickerFilterHeader.sortAscending, icon: ForwardRef$j, onClick: sortAsc }),
-        React__namespace.default.createElement(DropdownMenuButton, { isActive: sortDirection === 'desc', caption: i18n.pickerFilterHeader.sortDescending, icon: ForwardRef$i, onClick: sortDesc })));
+    return (React__namespace.default.createElement(FlexCell, { cx: css$j.sortingPanelContainer },
+        React__namespace.default.createElement(DropdownMenuButton, { isActive: sortDirection === 'asc', caption: i18n.pickerFilterHeader.sortAscending, icon: ForwardRef$i, onClick: sortAsc }),
+        React__namespace.default.createElement(DropdownMenuButton, { isActive: sortDirection === 'desc', caption: i18n.pickerFilterHeader.sortDescending, icon: ForwardRef$h, onClick: sortDesc })));
 };
 const SortingPanel = React__namespace.default.memo(SortingPanelImpl);
 
@@ -3623,35 +3624,18 @@ const ColumnHeaderDropdownImpl = (props) => {
         width: uuiCore.isMobile() ? document.documentElement.clientWidth : undefined,
     }), []);
     const closeDropdown = React.useCallback(() => props.onOpenChange(false), [props.onOpenChange]);
-    return (React__namespace.default.createElement(uuiComponents.Dropdown, { renderTarget: props.renderTarget, renderBody: (dropdownProps) => (React__namespace.default.createElement(Panel, { style: style, shadow: true, cx: css$j.panel },
-            React__namespace.default.createElement(MobileDropdownWrapper, { title: props.title, close: closeDropdown },
+    return (React__namespace.default.createElement(uuiComponents.Dropdown, { renderTarget: props.renderTarget, renderBody: (dropdownProps) => (React__namespace.default.createElement(Panel, { background: "surface", style: style, shadow: true, cx: css$k.panel },
+            React__namespace.default.createElement(MobileDropdownWrapper, { title: props.title, onClose: closeDropdown },
                 props.isSortable && React__namespace.default.createElement(SortingPanel, { sortDirection: props.sortDirection, onSort: props.onSort }),
                 props.renderFilter(dropdownProps)))), modifiers: popperModifiers, value: props.isOpen, onValueChange: props.onOpenChange }));
 };
 const ColumnHeaderDropdown = React__namespace.default.memo(ColumnHeaderDropdownImpl);
 
-var css$h = {"cell":"ObDsF3","sort-icon":"AanQJs","dropdown-icon":"_7F5Jzy","infoIcon":"EVX3Ps","resizable":"GcXBIU","size-24":"mEORwK","size-30":"wbaoeX","size-36":"_5-uFMM","size-42":"QswDOA","size-48":"MPVr-A","padding-left-24":"_5T1goW","padding-right-24":"q6eHvr","caption":"JsWB6d","checkbox":"f8CObp","icon":"FlHcs8","icon-cell":"vWZfxa","align-right":"_9WbqYS","align-center":"_4tbcvd","tooltip-wrapper":"R7a1gN","cell-tooltip":"lgrBLl","upper-case":"_0Izu4P","font-size-14":"-k717Q","resize-mark":"_0-CyGK","draggable":"C0swlt","ghost":"UTwCKm","is-dragged-out":"_6u5u3K","dnd-marker-left":"_9neCJF","dnd-marker-right":"-p5fzW","cell-tooltip-wrapper":"N0SQz9","cell-tooltip-text":"uC9SPM","sortIcon":"AanQJs","dropdownIcon":"_7F5Jzy","size24":"mEORwK","size30":"wbaoeX","size36":"_5-uFMM","size42":"QswDOA","size48":"MPVr-A","paddingLeft24":"_5T1goW","paddingRight24":"q6eHvr","iconCell":"vWZfxa","alignRight":"_9WbqYS","alignCenter":"_4tbcvd","tooltipWrapper":"R7a1gN","cellTooltip":"lgrBLl","upperCase":"_0Izu4P","fontSize14":"-k717Q","resizeMark":"_0-CyGK","isDraggedOut":"_6u5u3K","dndMarkerLeft":"_9neCJF","dndMarkerRight":"-p5fzW","cellTooltipWrapper":"N0SQz9","cellTooltipText":"uC9SPM"};
-
-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 SvgTableSwap18 = function SvgTableSwap18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 18,
-    height: 18,
-    viewBox: "0 0 18 18",
-    ref: ref
-  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    d: "M6 1 2 5h3v7h2V5h3L6 1zm7 12V6h-2v7H8l4 4 4-4h-3z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$h = /*#__PURE__*/React.forwardRef(SvgTableSwap18);
+var css$i = {"cell":"sJGH-C","sort-icon":"IujieB","dropdown-icon":"Gdb2Ci","infoIcon":"_3dxJZF","resizable":"Yyktb3","size-24":"fbKv6z","size-30":"zSSLS6","size-36":"qxVrMF","size-42":"fg39WD","size-48":"nwGPW0","padding-left-24":"_1ysUy-","padding-right-24":"X8x-O3","caption":"OXgK3-","checkbox":"_2yRY17","icon":"MKD8Qj","icon-cell":"_8vQMUZ","align-right":"Q4Yf-h","align-center":"BaKrBD","tooltip-wrapper":"YjcaTy","cell-tooltip":"_6kLiLR","upper-case":"Wr7wSp","font-size-14":"_2-qUIj","resize-mark":"EZjb6D","draggable":"laEVXa","ghost":"fzPGE-","is-dragged-out":"SE5Cr4","dnd-marker-left":"pmeURy","dnd-marker-right":"WqHnF1","cell-tooltip-wrapper":"Nv9lns","cell-tooltip-text":"m-JwZw","sortIcon":"IujieB","dropdownIcon":"Gdb2Ci","size24":"fbKv6z","size30":"zSSLS6","size36":"qxVrMF","size42":"fg39WD","size48":"nwGPW0","paddingLeft24":"_1ysUy-","paddingRight24":"X8x-O3","iconCell":"_8vQMUZ","alignRight":"Q4Yf-h","alignCenter":"BaKrBD","tooltipWrapper":"YjcaTy","cellTooltip":"_6kLiLR","upperCase":"Wr7wSp","fontSize14":"_2-qUIj","resizeMark":"EZjb6D","isDraggedOut":"SE5Cr4","dndMarkerLeft":"pmeURy","dndMarkerRight":"WqHnF1","cellTooltipWrapper":"Nv9lns","cellTooltipText":"m-JwZw"};
 
 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 SvgContentFiltration18 = function SvgContentFiltration18(props, ref) {
+var SvgTableSwap18 = function SvgTableSwap18(props, ref) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
@@ -3660,15 +3644,15 @@ var SvgContentFiltration18 = function SvgContentFiltration18(props, ref) {
     ref: ref
   }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
-    d: "m8 14 2 2v-5H8v3zM2 3v2h14V3H2zm6 8h2l6-6H2l6 6z",
+    d: "M6 1 2 5h3v7h2V5h3L6 1zm7 12V6h-2v7H8l4 4 4-4h-3z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$g = /*#__PURE__*/React.forwardRef(SvgContentFiltration18);
+var ForwardRef$g = /*#__PURE__*/React.forwardRef(SvgTableSwap18);
 
 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 SvgNavigationChevronDown18 = function SvgNavigationChevronDown18(props, ref) {
+var SvgContentFiltration18 = function SvgContentFiltration18(props, ref) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
@@ -3677,11 +3661,11 @@ var SvgNavigationChevronDown18 = function SvgNavigationChevronDown18(props, ref)
     ref: ref
   }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.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",
+    d: "m8 14 2 2v-5H8v3zM2 3v2h14V3H2zm6 8h2l6-6H2l6 6z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$f = /*#__PURE__*/React.forwardRef(SvgNavigationChevronDown18);
+var ForwardRef$f = /*#__PURE__*/React.forwardRef(SvgContentFiltration18);
 
 var _path$d;
 function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
@@ -3708,29 +3692,29 @@ class DataTableHeaderCell extends React__namespace.Component {
         };
         this.getTextStyle = () => {
             if (this.props.textCase === 'upper')
-                return css$h.upperCase;
-            return css$h['font-size-14'];
+                return css$i.upperCase;
+            return css$i['font-size-14'];
         };
-        this.getTooltipContent = () => (React__namespace.createElement("div", { className: css$h.cellTooltipWrapper },
-            React__namespace.createElement(Text, { fontSize: "14", color: "contrast", font: "semibold", cx: css$h.cellTooltipText }, this.props.column.caption),
-            this.props.column.info && React__namespace.createElement(Text, { fontSize: "12", color: "contrast", cx: css$h.cellTooltipText }, this.props.column.info)));
+        this.getTooltipContent = () => (React__namespace.createElement("div", { className: css$i.cellTooltipWrapper },
+            React__namespace.createElement(Text, { fontSize: "14", color: "contrast", font: "semibold", cx: css$i.cellTooltipText }, this.props.column.caption),
+            this.props.column.info && React__namespace.createElement(Text, { fontSize: "12", color: "contrast", cx: css$i.cellTooltipText }, this.props.column.info)));
         this.getColumnCaption = () => {
-            return (React__namespace.createElement("div", { className: css$h.tooltipWrapper },
-                React__namespace.createElement("div", { className: uuiCore.cx(css$h.iconCell, css$h['align-' + this.props.column.textAlign], uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
-                    React__namespace.createElement(Tooltip, { placement: "top", color: "contrast", renderContent: this.getTooltipContent, cx: css$h.cellTooltip, openDelay: 600 },
-                        React__namespace.createElement(Text, { key: "text", lineHeight: "30", fontSize: "14", size: "30", cx: uuiCore.cx(css$h.caption, this.getTextStyle(), uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaption) }, this.props.column.caption)),
-                    this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React__namespace.createElement(IconButton, { key: "sort", cx: uuiCore.cx(css$h.icon, css$h.sortIcon, this.props.sortDirection && css$h.sortIconActive, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: this.props.sortDirection ? 'default' : 'secondary', icon: this.props.sortDirection === 'desc' ? ForwardRef$i : this.props.sortDirection === 'asc' ? ForwardRef$j : ForwardRef$h })),
-                    this.props.isFilterActive && (React__namespace.createElement(IconButton, { key: "filter", cx: uuiCore.cx(css$h.icon, !this.props.sortDirection && css$h.filterIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "default", icon: ForwardRef$g })),
-                    this.props.column.renderFilter && (React__namespace.createElement(IconButton, { key: "dropdown", cx: uuiCore.cx(css$h.icon, css$h.dropdownIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), color: "secondary", icon: this.state.isDropdownOpen ? ForwardRef$e : ForwardRef$f })))));
+            return (React__namespace.createElement("div", { className: css$i.tooltipWrapper },
+                React__namespace.createElement("div", { className: uuiCore.cx(css$i.iconCell, css$i['align-' + this.props.column.textAlign], uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
+                    React__namespace.createElement(Tooltip, { placement: "top", color: "contrast", renderContent: this.getTooltipContent, cx: css$i.cellTooltip, openDelay: 600 },
+                        React__namespace.createElement(Text, { key: "text", lineHeight: "30", fontSize: "14", size: "30", cx: uuiCore.cx(css$i.caption, this.getTextStyle(), uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaption) }, this.props.column.caption)),
+                    this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React__namespace.createElement(IconButton, { key: "sort", cx: uuiCore.cx(css$i.icon, css$i.sortIcon, this.props.sortDirection && css$i.sortIconActive, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: this.props.sortDirection ? 'neutral' : 'secondary', icon: this.props.sortDirection === 'desc' ? ForwardRef$h : this.props.sortDirection === 'asc' ? ForwardRef$i : ForwardRef$g })),
+                    this.props.isFilterActive && (React__namespace.createElement(IconButton, { key: "filter", cx: uuiCore.cx(css$i.icon, !this.props.sortDirection && css$i.filterIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "neutral", icon: ForwardRef$f })),
+                    this.props.column.renderFilter && (React__namespace.createElement(IconButton, { key: "dropdown", cx: uuiCore.cx(css$i.icon, css$i.dropdownIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), color: "secondary", icon: this.state.isDropdownOpen ? ForwardRef$e : ForwardRef$B })))));
         };
         this.renderHeaderCheckbox = () => this.props.selectAll
-            && this.props.isFirstColumn && (React__namespace.createElement(Checkbox, Object.assign({ size: +this.props.size < 36 ? '12' : '18' }, this.props.selectAll, { cx: uuiCore.cx(css$h.checkbox, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCheckbox) })));
-        this.renderResizeMark = (props) => React__namespace.createElement("div", { onMouseDown: props.onResizeStart, className: uuiCore.cx(css$h.resizeMark, uuiCore.uuiMarkers.draggable) });
+            && this.props.isFirstColumn && (React__namespace.createElement(Checkbox, Object.assign({ size: +this.props.size < 36 ? '12' : '18' }, this.props.selectAll, { cx: uuiCore.cx(css$i.checkbox, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCheckbox) })));
+        this.renderResizeMark = (props) => React__namespace.createElement("div", { onMouseDown: props.onResizeStart, className: uuiCore.cx(css$i.resizeMark, uuiCore.uuiMarkers.draggable) });
         this.renderCellContent = (props, dropdownProps) => (React__namespace.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: uuiCore.cx(uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiCore.uuiMarkers.clickable, css$h.cell, css$h['size-' + (this.props.size || '36')], this.props.isFirstColumn && css$h['padding-left-24'], this.props.isLastColumn && css$h['padding-right-24'], this.props.column.cx, this.props.allowColumnsResizing && css$h.resizable, props.isDraggable && css$h.draggable, props.isDragGhost && css$h.ghost, props.isDraggedOut && css$h.isDraggedOut, props.isDndInProgress && css$h['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: uuiCore.cx(uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiCore.uuiMarkers.clickable, css$i.cell, css$i['size-' + (this.props.size || '36')], this.props.isFirstColumn && css$i['padding-left-24'], this.props.isLastColumn && css$i['padding-right-24'], this.props.column.cx, this.props.allowColumnsResizing && css$i.resizable, props.isDraggable && css$i.draggable, props.isDragGhost && css$i.ghost, props.isDraggedOut && css$i.isDraggedOut, props.isDndInProgress && css$i['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)));
@@ -3741,7 +3725,7 @@ class DataTableHeaderCell extends React__namespace.Component {
     }
 }
 
-var css$g = {"header-cell":"vNr2Y8","config-icon":"H8remB","headerCell":"vNr2Y8","configIcon":"H8remB"};
+var css$h = {"header-cell":"M2DtlP","config-icon":"Wc-ikU","headerCell":"M2DtlP","configIcon":"Wc-ikU"};
 
 var _path$c;
 function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
@@ -3760,12 +3744,12 @@ var SvgActionSettings18 = function SvgActionSettings18(props, ref) {
 };
 var ForwardRef$d = /*#__PURE__*/React.forwardRef(SvgActionSettings18);
 
-const DataTableHeaderRow = uuiCore.withMods(uuiComponents.DataTableHeaderRow, () => [css$g.root, 'uui-dt-vars'], (mods) => ({
+const DataTableHeaderRow = uuiCore.withMods(uuiComponents.DataTableHeaderRow, () => [css$h.root, 'uui-dt-vars'], (mods) => ({
     renderCell: (props) => React__namespace.createElement(DataTableHeaderCell, Object.assign({}, props, { size: mods.size, textCase: mods.textCase || 'normal', key: props.column.key })),
-    renderConfigButton: () => React__namespace.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: css$g.configIcon, color: "default", icon: ForwardRef$d }),
+    renderConfigButton: () => React__namespace.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: css$h.configIcon, color: "neutral", icon: ForwardRef$d }),
 }));
 
-var styles$1 = {"main-panel":"qIfDMm","group-title":"_6uzMRe","group-title-text":"p1d8It","group-title-badge":"c7vr9B","group-items":"gV9cPj","no-data":"_5U4zdg","h-divider":"Ylz-Xm","search-area":"xs9sEE","mainPanel":"qIfDMm","groupTitle":"_6uzMRe","groupTitleText":"p1d8It","groupTitleBadge":"c7vr9B","groupItems":"gV9cPj","noData":"_5U4zdg","hDivider":"Ylz-Xm","searchArea":"xs9sEE"};
+var styles$1 = {"main-panel":"ndBPUQ","group-title":"OYT8FZ","group-title-text":"wCAT-Y","group-title-badge":"sLrPLB","group-items":"AXxS5h","no-data":"Ns7EiE","h-divider":"aVxHy2","search-area":"_6BP6Bs","mainPanel":"ndBPUQ","groupTitle":"OYT8FZ","groupTitleText":"wCAT-Y","groupTitleBadge":"sLrPLB","groupItems":"AXxS5h","noData":"Ns7EiE","hDivider":"aVxHy2","searchArea":"_6BP6Bs"};
 
 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); }
@@ -3844,7 +3828,7 @@ function PinIconButton(props) {
             React__namespace.createElement(IconButton, { icon: pinIcon, onClick: pinClickHandler, isDisabled: isPinnedAlways, color: isPinned ? 'info' : undefined }))));
 }
 
-var styles = {"row-wrapper":"mwQi8O","not-pinned":"_4d6pfM","pin-icon-button":"r2xfPn","drag-handle":"j6IPe3","dnd-disabled":"OiYTDL","rowWrapper":"mwQi8O","notPinned":"_4d6pfM","pinIconButton":"r2xfPn","dragHandle":"j6IPe3","dndDisabled":"OiYTDL"};
+var styles = {"row-wrapper":"_3Cmguf","not-pinned":"BCDWws","pin-icon-button":"lREqHf","checkbox":"_3Fmb5g","drag-handle":"_5bTbKF","dnd-disabled":"WDJFCm","rowWrapper":"_3Cmguf","notPinned":"BCDWws","pinIconButton":"lREqHf","dragHandle":"_5bTbKF","dndDisabled":"WDJFCm"};
 
 const ColumnRow = React__namespace.memo(function ColumnRow(props) {
     const { column } = props;
@@ -3857,21 +3841,20 @@ const ColumnRow = React__namespace.memo(function ColumnRow(props) {
         const _a = dndActorParams.eventHandlers, { onTouchStart, onPointerDown } = _a, restEventHandlers = __rest(_a, ["onTouchStart", "onPointerDown"]);
         const wrapperAttrs = Object.assign(Object.assign({}, (isDndAllowed ? { ref: dndActorParams.ref } : {})), (isDndAllowed ? { rawProps: Object.assign({}, restEventHandlers) } : {}));
         const dragHandleRawProps = Object.assign({}, (isDndAllowed ? { onTouchStart, onPointerDown } : {}));
+        const dndActorPropsWithoutRef = __rest(dndActorParams, ["ref"]);
         return (React__namespace.createElement(FlexRow, Object.assign({ size: "30", cx: wrapperClasses }, wrapperAttrs),
-            React__namespace.createElement(FlexRow, { size: "30", spacing: "6", cx: styles.title },
-                React__namespace.createElement(uuiComponents.DragHandle, { rawProps: dragHandleRawProps, isDisabled: !isDndAllowed, cx: uuiCore.cx(styles.dragHandle, !isDndAllowed && styles.dndDisabled) }),
-                React__namespace.createElement(Checkbox, { key: column.key, label: props.renderItem ? props.renderItem(props.column) : column.caption, value: isVisible, onValueChange: toggleVisibility, isDisabled: column.isAlwaysVisible })),
-            React__namespace.createElement(uuiComponents.FlexSpacer, null),
+            React__namespace.createElement(uuiComponents.DragHandle, { rawProps: dragHandleRawProps, isDisabled: !isDndAllowed, cx: uuiCore.cx(styles.dragHandle, !isDndAllowed && styles.dndDisabled) }),
+            React__namespace.createElement(Checkbox, { key: column.key, label: props.renderItem ? props.renderItem(props.column) : column.caption, value: isVisible, onValueChange: toggleVisibility, isDisabled: column.isAlwaysVisible, cx: styles.checkbox }),
             React__namespace.createElement(FlexRow, { size: "30", cx: styles.pinIconButton },
                 React__namespace.createElement(PinIconButton, { id: column.key, isPinned: !!isPinned, canUnpin: !isPinnedAlways, onTogglePin: togglePin })),
-            React__namespace.createElement(DropMarker, Object.assign({}, dndActorParams))));
+            React__namespace.createElement(DropMarker, Object.assign({}, dndActorPropsWithoutRef))));
     };
     return (React__namespace.createElement(uuiCore.DndActor, { key: column.key, srcData: data, dstData: data, canAcceptDrop: onCanAcceptDrop, onDrop: onDrop, render: renderContent }));
 });
 
 const renderGroupTitle = (title, amount) => (React__namespace.createElement(FlexRow, { size: "24", padding: "24", spacing: "6", cx: styles$1.groupTitle },
     React__namespace.createElement(Text, { cx: styles$1.groupTitleText, font: "semibold", lineHeight: "24", fontSize: "14" }, title),
-    React__namespace.createElement(Badge, { cx: styles$1.groupTitleBadge, caption: amount, color: "default", size: "18" })));
+    React__namespace.createElement(Badge, { cx: styles$1.groupTitleBadge, caption: amount, color: "neutral", size: "18" })));
 function ColumnsConfigurationModal(props) {
     const i18n$1 = i18n.tables.columnsConfigurationModal;
     const { columns, columnsConfig: initialColumnsConfig, defaultConfig } = props, modalProps = __rest(props, ["columns", "columnsConfig", "defaultConfig"]);
@@ -3913,10 +3896,10 @@ function ColumnsConfigurationModal(props) {
             React__namespace.createElement(ModalHeader, { title: i18n$1.configureColumnsTitle, onClose: close }),
             React__namespace.createElement(FlexRow, { padding: "24", borderBottom: true, spacing: "12", cx: styles$1.searchArea },
                 React__namespace.createElement(SearchInput, { size: "30", value: searchValue, onValueChange: setSearchValue, placeholder: i18n$1.searchPlaceholder }),
-                React__namespace.createElement(Dropdown, { closeOnTargetClick: true, renderBody: () => (React__namespace.createElement(Panel, { shadow: true },
+                React__namespace.createElement(Dropdown, { closeOnTargetClick: true, renderBody: () => (React__namespace.createElement(Panel, { background: "surface", shadow: true },
                         React__namespace.createElement(DropdownMenuButton, { caption: i18n$1.clearAllButton, onClick: uncheckAll }),
-                        React__namespace.createElement(DropdownMenuButton, { caption: i18n$1.selectAllButton, onClick: checkAll }))), renderTarget: (props) => React__namespace.createElement(Button, Object.assign({}, props, { fill: "none", icon: ForwardRef$t, size: "30", color: "secondary", isDropdown: false })) })),
-            React__namespace.createElement(Panel, { cx: styles$1.mainPanel },
+                        React__namespace.createElement(DropdownMenuButton, { caption: i18n$1.selectAllButton, onClick: checkAll }))), renderTarget: (props) => React__namespace.createElement(Button, Object.assign({}, props, { fill: "none", icon: ForwardRef$s, size: "30", color: "secondary", isDropdown: false })) })),
+            React__namespace.createElement(Panel, { background: "surface", cx: styles$1.mainPanel },
                 React__namespace.createElement(ScrollBars, null,
                     renderVisible(),
                     renderHidden(),
@@ -3924,12 +3907,67 @@ function ColumnsConfigurationModal(props) {
                         React__namespace.createElement(Text, { fontSize: "24", lineHeight: "30", color: "primary", font: "semibold" }, i18n$1.noResultsFound.text),
                         React__namespace.createElement(Text, { fontSize: "16", lineHeight: "24", font: "regular", color: "primary" }, i18n$1.noResultsFound.subText))))),
             React__namespace.createElement(ModalFooter, { borderTop: true },
-                React__namespace.createElement(LinkButton, { icon: ForwardRef$s, caption: i18n$1.resetToDefaultButton, onClick: reset }),
+                React__namespace.createElement(LinkButton, { icon: ForwardRef$r, caption: i18n$1.resetToDefaultButton, onClick: reset }),
                 React__namespace.createElement(uuiComponents.FlexSpacer, null),
                 React__namespace.createElement(Button, { fill: "none", color: "secondary", caption: i18n$1.cancelButton, onClick: close }),
                 noVisibleColumns ? (React__namespace.createElement(Tooltip, { content: i18n$1.enableAtLeastOneColumnMessage, placement: "top-end", color: "critical" }, applyButton)) : (applyButton)))));
 }
 
+var css$g = {"listContainer":"AyNuAd","header":"_6fSx6A","group":"HcUve7","stickyHeader":"QAVdcT"};
+
+const getChildrenAndRest = (row, rows) => {
+    const firstNotChildIndex = rows.findIndex((other) => other.depth < row.depth || (row.depth === other.depth && other.isPinned));
+    if (firstNotChildIndex === -1) {
+        return [rows, []];
+    }
+    if (firstNotChildIndex === 0) {
+        return [[], rows];
+    }
+    const children = rows.slice(0, firstNotChildIndex);
+    const rest = rows.slice(firstNotChildIndex, rows.length);
+    return [children, rest];
+};
+
+function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
+    var _a, _b;
+    const rowRef = React.useRef();
+    const childrenPinnedTop = row.isPinned ? (top + ((_b = (_a = rowRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0)) : top;
+    return (React__namespace.default.createElement("div", { className: css$g.group, key: row.rowKey },
+        React__namespace.default.createElement("div", { className: row.isPinned ? css$g.stickyHeader : css$g.header, 
+            // Gaps between pinned parents should be removed by -1 from top height.
+            // Otherwise, sometimes top value is rounded top.
+            style: { zIndex: row.depth + 10, top: top - 1 }, ref: rowRef }, renderRow(row)),
+        childRows.length > 0 && (React__namespace.default.createElement("div", null,
+            React__namespace.default.createElement(DataRowsGroups, { rows: childRows, renderRow: renderRow, top: childrenPinnedTop })))));
+}
+const renderRows = (rows, renderRow, top) => {
+    if (!rows.length)
+        return [];
+    const [row, ...rest] = rows;
+    if (!rest.length) {
+        return [renderRow(row)];
+    }
+    const [next] = rest;
+    if (next.depth <= row.depth && !row.isPinned) {
+        return [renderRow(row)].concat(renderRows(rest, renderRow, top));
+    }
+    const [children, otherRows] = getChildrenAndRest(row, rest);
+    const group = (React__namespace.default.createElement(DataRowsGroup, { row: row, childRows: children, renderRow: renderRow, top: top, key: row.rowKey }));
+    return [group].concat(renderRows(otherRows, renderRow, top));
+};
+function DataRowsGroups({ rows, renderRow, top = 1, }) {
+    const rowsWithGroups = renderRows(rows, renderRow, top);
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return (React__namespace.default.createElement(React__namespace.default.Fragment, null, rowsWithGroups));
+}
+
+function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, renderRow, headerRef, }) {
+    var _a;
+    return (React__namespace.default.createElement("div", { className: css$g.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+        React__namespace.default.createElement("div", { ref: listContainerRef, role: "rowgroup", style: { marginTop: offsetY } },
+            React__namespace.default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: (_a = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight }))));
+}
+
 var _path$8, _path2, _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$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
 var SvgEmptyTable = function SvgEmptyTable(props, ref) {
@@ -3941,7 +3979,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#a)"
+    clipPath: "url(#4izetwbaxv8azmeb_a)"
   }, _path$8 || (_path$8 = /*#__PURE__*/React__namespace.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"
@@ -3962,7 +4000,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M86.786 22.982c-2.55 0-4.965 2.07-4.965 4.552V120.6c0 2.484 2.4 4.572 4.965 4.572h88.101c2.582 0 4.986-2.089 4.986-4.572V27.534c0-2.464-2.418-4.552-4.986-4.552h-88.1Zm-5.793 4.552c0-3.022 2.874-5.38 5.793-5.38h88.101c2.935 0 5.814 2.374 5.814 5.38V120.6c0 3.021-2.86 5.4-5.814 5.4h-88.1c-2.94 0-5.794-2.381-5.794-5.4V27.534Z",
     fill: "#1D1E26"
   })), /*#__PURE__*/React__namespace.createElement("mask", {
-    id: "b",
+    id: "4izetwhgipvq72oc6_b",
     style: {
       maskType: "alpha"
     },
@@ -3975,7 +4013,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M174.887 125.586h-88.1c-2.752 0-5.38-2.234-5.38-4.986V27.534c0-2.752 2.644-4.966 5.38-4.966h88.1c2.752 0 5.4 2.23 5.4 4.966V120.6c0 2.752-2.632 4.986-5.4 4.986Z",
     fill: "#9BDEFF"
   }))), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
-    mask: "url(#b)",
+    mask: "url(#4izetwhgipvq72oc6_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -4061,7 +4099,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M24.73 96.184a.414.414 0 0 1 .581.06l48.646 59.751a.413.413 0 1 1-.642.523L24.67 96.766a.414.414 0 0 1 .06-.582Z",
     fill: "#fff"
   }))), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "a"
+    id: "4izetwbaxv8azmeb_a"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
@@ -4070,18 +4108,19 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
 };
 var ForwardRef$9 = /*#__PURE__*/React.forwardRef(SvgEmptyTable);
 
-var css$f = {"sticky-header":"K0vkM6","listContainer":"_-28Lpg","table":"SqpKyg","no-results":"_9I3EOw","no-results-icon":"A-G25u","no-results-title":"YWGtna","stickyHeader":"K0vkM6","noResults":"_9I3EOw","noResultsIcon":"A-G25u","noResultsTitle":"YWGtna"};
+var css$f = {"sticky-header":"UK-0j4","table":"xj5vlU","no-results":"Q-qmRZ","no-results-icon":"jKQzRl","no-results-title":"fkjUTM","stickyHeader":"UK-0j4","noResults":"Q-qmRZ","noResultsIcon":"jKQzRl","noResultsTitle":"fkjUTM"};
 
 function DataTable(props) {
     var _a;
     const { uuiModals } = uuiCore.useUuiContext();
+    const headerRef = React__namespace.useRef();
     const columnsWithFilters = useColumnsWithFilters(props.columns, props.filters);
     const { columns, config, defaultConfig } = uuiCore.useColumnsConfig(columnsWithFilters, (_a = props.value) === null || _a === void 0 ? void 0 : _a.columnsConfig);
-    const renderRow = React__namespace.useCallback((rowProps) => {
-        return React__namespace.createElement(DataTableRow, Object.assign({ key: rowProps.rowKey, size: props.size, borderBottom: props.border }, rowProps));
+    const defaultRenderRow = React__namespace.useCallback((rowProps) => {
+        return React__namespace.createElement(DataTableRow, Object.assign({ key: rowProps.rowKey, size: props.size, borderBottom: props.border }, rowProps, { cx: css$f.cell }));
     }, []);
+    const renderRow = (row) => { var _a; return ((_a = props.renderRow) !== null && _a !== void 0 ? _a : defaultRenderRow)(Object.assign(Object.assign({}, row), { columns })); };
     const rows = props.getRows();
-    const renderedRows = rows.map((row) => (props.renderRow || renderRow)(Object.assign(Object.assign({}, row), { columns })));
     const renderNoResultsBlock = React__namespace.useCallback(() => {
         var _a;
         return (React__namespace.createElement("div", { className: css$f.noResults }, props.renderNoResultsBlock ? ((_a = props.renderNoResultsBlock) === null || _a === void 0 ? void 0 : _a.call(props)) : (React__namespace.createElement(React__namespace.Fragment, null,
@@ -4102,27 +4141,27 @@ function DataTable(props) {
     }, [
         props.columns, config, defaultConfig, props.value, props.onValueChange, props.renderColumnsConfigurationModal,
     ]);
-    const renderRowsContainer = React__namespace.useCallback(({ listContainerRef, estimatedHeight, offsetY, scrollShadows, }) => (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement("div", { className: css$f.stickyHeader },
-            React__namespace.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 }),
+    const renderRowsContainer = React__namespace.useCallback(({ listContainerRef, estimatedHeight, offsetY, scrollShadows }) => (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement("div", { className: css$f.stickyHeader, ref: headerRef },
+            React__namespace.createElement(DataTableHeaderRow, { columns: columns, onConfigButtonClick: props.showColumnsConfig && onConfigurationButtonClick, selectAll: props.selectAll, size: props.size, textCase: props.headerTextCase, allowColumnsReordering: props.allowColumnsReordering, allowColumnsResizing: props.allowColumnsResizing, value: Object.assign(Object.assign({}, props.value), { columnsConfig: config }), onValueChange: props.onValueChange }),
             React__namespace.createElement("div", { className: uuiCore.cx(uuiCore.uuiScrollShadows.top, {
                     [uuiCore.uuiScrollShadows.topVisible]: scrollShadows.verticalTop,
                 }) })),
-        props.exactRowsCount !== 0 ? (React__namespace.createElement("div", { className: css$f.listContainer, style: { minHeight: `${estimatedHeight}px` } },
-            React__namespace.createElement("div", { ref: listContainerRef, role: "rowgroup", style: { marginTop: offsetY }, children: renderedRows }))) : (renderNoResultsBlock === null || renderNoResultsBlock === void 0 ? void 0 : renderNoResultsBlock()))), [
+        props.exactRowsCount !== 0 ? (React__namespace.createElement(DataRowsContainer, { headerRef: headerRef, listContainerRef: listContainerRef, estimatedHeight: estimatedHeight, offsetY: offsetY, scrollShadows: scrollShadows, renderRow: renderRow, rows: rows })) : (renderNoResultsBlock === null || renderNoResultsBlock === void 0 ? void 0 : renderNoResultsBlock()),
+        React__namespace.createElement(Blocker, { isEnabled: props.isReloading }))), [
         props, columns, rows, renderNoResultsBlock, onConfigurationButtonClick,
     ]);
     return (React__namespace.createElement(uuiComponents.DataTableSelectionProvider, { onCopy: props.onCopy, rows: rows, columns: columns },
-        React__namespace.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rows: renderedRows, rowsCount: props.rowsCount, renderRows: renderRowsContainer, cx: uuiCore.cx(css$f.table, 'uui-dt-vars'), rawProps: {
+        React__namespace.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rowsCount: props.rowsCount, renderRows: renderRowsContainer, cx: uuiCore.cx(css$f.table, 'uui-dt-vars'), disableScroll: props.isReloading, rowsSelector: "[role=row]", rawProps: {
                 role: 'table',
                 'aria-colcount': columns.length,
                 'aria-rowcount': props.rowsCount,
             } })));
 }
 
-var css$e = {"root":"p0VUFk"};
+var css$e = {"root":"sZ-aKk"};
 
-var css$d = {"root":"suX4PW","burger-content":"kHsiSV","burgerContent":"kHsiSV"};
+var css$d = {"root":"qvMp4-","burger-content":"QZJCef","burgerContent":"QZJCef"};
 
 var _path$7;
 function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
@@ -4189,11 +4228,11 @@ var SvgTriangle = function SvgTriangle(props, ref) {
 };
 var ForwardRef$6 = /*#__PURE__*/React.forwardRef(SvgTriangle);
 
-var css$c = {"root":"AwE-CS","button-primary":"_3sYdoj","button-secondary":"_6ET3Wk","hasIcon":"ah4lib","dropdown":"TvLWd7","buttonPrimary":"_3sYdoj","buttonSecondary":"_6ET3Wk"};
+var css$c = {"root":"ZLGe1w","button-primary":"ar9z3T","button-secondary":"nx0Dd1","hasIcon":"BxYBvl","dropdown":"n8EaG6","buttonPrimary":"ar9z3T","buttonSecondary":"nx0Dd1"};
 
 const BurgerButton = uuiCore.withMods(uuiComponents.Button, (props) => [
     css$c.root,
-    'uui-mainMenu-burger-button',
+    'uui-main_menu-burger-button',
     css$c['button-' + (props.type || 'primary')],
     css$c['indent-' + (props.indentLevel || 0)],
     props.isDropdown && css$c.dropdown,
@@ -4246,13 +4285,13 @@ var SvgMenuInputCancel = function SvgMenuInputCancel(props, ref) {
 };
 var ForwardRef$5 = /*#__PURE__*/React.forwardRef(SvgMenuInputCancel);
 
-var css$b = {"search-input":"lyeTOe","searchInput":"lyeTOe"};
+var css$b = {"search-input":"wej8gI","searchInput":"wej8gI"};
 
 function BurgerSearch(props) {
-    return (React__namespace.createElement(uuiComponents.TextInput, { cx: cx__default.default(css$b.searchInput, 'uui-mainMenu-burger-search'), iconPosition: "left", icon: ForwardRef$16, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$5, autoFocus: true }));
+    return (React__namespace.createElement(uuiComponents.TextInput, { cx: cx__default.default(css$b.searchInput, 'uui-main_menu-burger-search'), iconPosition: "left", icon: ForwardRef$15, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$5 }));
 }
 
-var css$a = {"root":"-u-EL3","group-header":"_7JIND-","group-name":"_6SXBWX","line":"aPyBLE","groupHeader":"_7JIND-","groupName":"_6SXBWX"};
+var css$a = {"root":"mpQabO","group-header":"JWOBGZ","group-name":"crVrf-","line":"rLH9si","groupHeader":"JWOBGZ","groupName":"crVrf-"};
 
 function BurgerGroupHeader(props) {
     return (React__namespace.createElement("div", { className: cx__default.default(css$a.root, css$a.groupHeader, 'uui-burger-group-header') },
@@ -4260,7 +4299,7 @@ function BurgerGroupHeader(props) {
         React__namespace.createElement("span", { className: css$a.groupName }, props.caption)));
 }
 
-var css$9 = {"root":"McOdbD","type-primary":"dWzR5D","type-secondary":"YTrEiP","typePrimary":"dWzR5D","typeSecondary":"YTrEiP"};
+var css$9 = {"root":"Q31ipb","type-primary":"_0-RgQ-","type-secondary":"HwgUAz","typePrimary":"_0-RgQ-","typeSecondary":"HwgUAz"};
 
 var _path$4;
 function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
@@ -4280,23 +4319,29 @@ var ForwardRef$4 = /*#__PURE__*/React.forwardRef(SvgChevronDown24);
 
 const MainMenuButton = uuiCore.withMods(uuiComponents.Button, (mods) => [css$9.root, css$9['type-' + (mods.type || 'primary')]], () => ({ dropdownIcon: ForwardRef$4, role: 'menuitem' }));
 
-var css$8 = {"dropdown-body":"xs9wI1","dropdownBody":"xs9wI1"};
+var css$8 = {"dropdown-body":"_2ACwI-","dropdownBody":"_2ACwI-"};
 
 class MainMenuDropdown extends React__namespace.Component {
     render() {
         return (React__namespace.createElement(uuiComponents.Dropdown, { renderTarget: (props) => (React__namespace.createElement(MainMenuButton, Object.assign({ caption: this.props.caption }, props, { rawProps: this.props.rawProps, isLinkActive: this.props.isLinkActive, isDropdown: true }))), renderBody: (props) => {
-                return (React__namespace.createElement("div", { className: cx__default.default(css$8.dropdownBody, 'uui-mainMenu-dropdown') }, this.props.renderBody
-                    ? this.props.renderBody(Object.assign({}, props))
-                    : React__namespace.Children.map(this.props.children, (item) => {
-                        if (!item)
-                            return item;
-                        return React__namespace.createElement(item.type, Object.assign(Object.assign({}, item.props), { onClick: item.props.onClick
-                                ? () => {
-                                    item.props.onClick();
-                                    props.onClose();
-                                }
-                                : null }));
-                    })));
+                const handleEscape = (e) => {
+                    if (e.key === 'Escape' && props.isOpen) {
+                        props.onClose();
+                    }
+                };
+                return (React__namespace.createElement(FocusLock__default.default, { returnFocus: true, persistentFocus: true, lockProps: { onKeyDown: handleEscape } },
+                    React__namespace.createElement("div", { className: cx__default.default(css$8.dropdownBody, 'uui-main_menu-dropdown') }, this.props.renderBody
+                        ? this.props.renderBody(Object.assign({}, props))
+                        : React__namespace.Children.map(this.props.children, (item) => {
+                            if (!item)
+                                return item;
+                            return React__namespace.createElement(item.type, Object.assign(Object.assign({}, item.props), { onClick: item.props.onClick
+                                    ? () => {
+                                        item.props.onClick();
+                                        props.onClose();
+                                    }
+                                    : null }));
+                        }))));
             }, placement: "bottom-start" }));
     }
 }
@@ -4304,7 +4349,7 @@ class MainMenuDropdown extends React__namespace.Component {
 function applyMainMenuMods() {
     return [
         css$e.root,
-        'uui-mainMenu',
+        'uui-main_menu',
     ];
 }
 const MainMenu = uuiCore.withMods(uuiComponents.MainMenu, applyMainMenuMods, () => ({
@@ -4328,31 +4373,31 @@ var SvgGlobalMenu = function SvgGlobalMenu(props, ref) {
 };
 var ForwardRef$3 = /*#__PURE__*/React.forwardRef(SvgGlobalMenu);
 
-var css$7 = {"global-menu-btn":"gZfSCc","globalMenuIcon":"HwESPD","globalMenuBtn":"gZfSCc"};
+var css$7 = {"global-menu-btn":"fD1CWC","globalMenuIcon":"_248sm-","globalMenuBtn":"fD1CWC"};
 
 const GlobalMenu = React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", Object.assign({ ref: ref, id: "global_menu_toggle", className: cx__default.default(css$7.globalMenuBtn, props.cx) }, props.rawProps),
     React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef$3, cx: css$7.globalMenuIcon }))));
 
-var css$6 = {"container":"B8mnp1","open":"M8-MWO"};
+var css$6 = {"container":"zaRJhv","open":"B0Vf-s"};
 
 const MainMenuAvatar = React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", { ref: ref, className: cx__default.default(css$6.container, props.isDropdown && css$6.dropdown, props.isOpen && css$6.open, props.onClick && uuiCore.uuiMarkers.clickable, props.cx), onClick: props.onClick },
     React__namespace.createElement(uuiComponents.Avatar, { size: "36", img: props.avatarUrl }),
     props.icon && React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon }),
     props.isDropdown && (React__namespace.createElement("div", null,
-        React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef$1c, flipY: props.isOpen }))))));
+        React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef$1b, flipY: props.isOpen }))))));
 
-var css$5 = {"search-input":"an3mFX","searchInput":"an3mFX"};
+var css$5 = {"search-input":"i6FH-a","searchInput":"i6FH-a"};
 
 const MainMenuSearch = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(uuiCore.IEditableDebouncer, Object.assign({}, props, { render: (iEditable) => {
         var _a;
-        return (React__namespace.createElement(uuiComponents.TextInput, Object.assign({ iconPosition: "left", icon: ForwardRef$16, cancelIcon: ((_a = props.value) === null || _a === void 0 ? void 0 : _a.length) > 0 && ForwardRef$5 }, props, iEditable, { ref: ref, cx: uuiCore.cx(css$5.searchInput, props.cx) }, props.rawProps)));
+        return (React__namespace.createElement(uuiComponents.TextInput, Object.assign({ iconPosition: "left", icon: ForwardRef$15, cancelIcon: ((_a = props.value) === null || _a === void 0 ? void 0 : _a.length) > 0 && ForwardRef$5 }, props, iEditable, { ref: ref, cx: uuiCore.cx(css$5.searchInput, props.cx) }, props.rawProps)));
     } }))));
 
-var css$4 = {"container":"tI7e-P"};
+var css$4 = {"container":"U-cezM"};
 
 const MainMenuIcon = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(IconButton, Object.assign({ ref: ref, icon: props.icon, cx: uuiCore.cx(props.cx, css$4.container) }, props))));
 
-var css$3 = {"root":"D3DC2Q"};
+var css$3 = {"root":"Q0jtOk"};
 
 const Anchor = uuiCore.withMods(uuiComponents.Anchor, () => [css$3.root]);
 
@@ -4409,7 +4454,7 @@ var SvgShape = function SvgShape(props, ref) {
 };
 var ForwardRef$2 = /*#__PURE__*/React.forwardRef(SvgShape);
 
-var css$2 = {"root":"_--PFMd","drop-start":"zze7Mv","drop-over":"LxZBXE","link":"ddZ4RQ","drop-area":"hjWKjo","icon-blue":"_-6m2Wy","dropStart":"zze7Mv","dropOver":"LxZBXE","dropArea":"hjWKjo","iconBlue":"_-6m2Wy"};
+var css$2 = {"root":"czb8eW","drop-start":"WapaHZ","drop-over":"Vd3m5d","link":"cRXq0R","drop-area":"FJXA3j","icon-blue":"Ohqm6b","dropStart":"WapaHZ","dropOver":"Vd3m5d","dropArea":"FJXA3j","iconBlue":"Ohqm6b"};
 
 class DropSpot extends React__namespace.Component {
     constructor() {
@@ -4433,17 +4478,17 @@ class DropSpot extends React__namespace.Component {
     }
 }
 
-var css$1 = {"file-card-wrapper":"KC8IOs","file-name":"vwp-Z3","error-card-wrapper":"VP3CSR","default-color":"MVyxyX","doc-color":"xYuF1G","xls-color":"VgX-rW","pdf-color":"d6KEYJ","movie-color":"bAKTu8","img-color":"ZHKlud","drop-start":"zXBsiL","error-block":"FXrwD8","icons-block":"pb1gRW","fileCardWrapper":"KC8IOs","fileName":"vwp-Z3","errorCardWrapper":"VP3CSR","defaultColor":"MVyxyX","docColor":"xYuF1G","xlsColor":"VgX-rW","pdfColor":"d6KEYJ","movieColor":"bAKTu8","imgColor":"ZHKlud","dropStart":"zXBsiL","errorBlock":"FXrwD8","iconsBlock":"pb1gRW"};
+var css$1 = {"root":"uoIALi","file-card-wrapper":"_4hID-4","file-name":"L2FYye","error-card-wrapper":"dQWmp1","default-color":"yshbvi","doc-color":"WQXcU-","xls-color":"kfeHRw","pdf-color":"luEP1W","mov-color":"oSLb2S","img-color":"LlHfZ0","movie-color":"lAjr0i","error-block":"ZZh9Df","icons-block":"sYd3q-","fileCardWrapper":"_4hID-4","fileName":"L2FYye","errorCardWrapper":"dQWmp1","defaultColor":"yshbvi","docColor":"WQXcU-","xlsColor":"kfeHRw","pdfColor":"luEP1W","movColor":"oSLb2S","imgColor":"LlHfZ0","movieColor":"lAjr0i","errorBlock":"ZZh9Df","iconsBlock":"sYd3q-"};
 
-var css = {"root":"YAu6r3"};
+var css = {"root":"B93Ai5"};
 
 const SvgCircleProgress = React__namespace.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
     const insetRadius = props.size / 2 - 3;
     const circumference = insetRadius * Math.PI;
     return (React__namespace.createElement("svg", Object.assign({ className: css.root, width: props.size, height: props.size, ref: ref }, props.rawProps),
-        React__namespace.createElement("circle", { stroke: "#ACAFBF", strokeDasharray: circumference, strokeDashoffset: circumference - (props.progress / 100) * circumference, strokeWidth: insetRadius, fill: "transparent", r: insetRadius / 2, cx: props.size / 2, cy: props.size / 2 }),
-        React__namespace.createElement("circle", { stroke: "#ACAFBF", strokeWidth: 1, fill: "transparent", r: outsetRadius, cx: props.size / 2, cy: props.size / 2 })));
+        React__namespace.createElement("circle", { strokeDasharray: circumference, strokeDashoffset: circumference - (props.progress / 100) * circumference, strokeWidth: insetRadius, fill: "transparent", r: insetRadius / 2, cx: props.size / 2, cy: props.size / 2 }),
+        React__namespace.createElement("circle", { strokeWidth: 1, fill: "transparent", r: outsetRadius, cx: props.size / 2, cy: props.size / 2 })));
 });
 
 var _path$1;
@@ -4504,7 +4549,7 @@ const FileCard = React__namespace.forwardRef((props, ref) => {
             case 'mp4':
             case 'wmw':
             case 'mkv':
-                return React__namespace.createElement(uuiComponents.IconContainer, { size: 24, icon: fileIcons.videoIcon, cx: css$1.movieColor });
+                return React__namespace.createElement(uuiComponents.IconContainer, { size: 24, icon: fileIcons.videoIcon, cx: css$1.movColor });
             case 'csv':
             case 'xml':
                 return React__namespace.createElement(uuiComponents.IconContainer, { size: 24, icon: fileIcons.tableIcon, cx: css$1.defaultColor });
@@ -4543,7 +4588,7 @@ const FileCard = React__namespace.forwardRef((props, ref) => {
         progress && progress < 100 && abortXHR();
         onClick();
     };
-    return (React__namespace.createElement(FlexCell, { ref: ref, cx: uuiCore.cx(css$1.fileCardWrapper, (isLoading || (error === null || error === void 0 ? void 0 : error.isError)) && uuiCore.uuiMod.loading, componentCx, (error === null || error === void 0 ? void 0 : error.isError) && css$1.errorCardWrapper), minWidth: width, width: !width ? '100%' : undefined },
+    return (React__namespace.createElement(FlexCell, { ref: ref, cx: uuiCore.cx(css$1.root, css$1.fileCardWrapper, (isLoading || (error === null || error === void 0 ? void 0 : error.isError)) && uuiCore.uuiMod.loading, componentCx, (error === null || error === void 0 ? void 0 : error.isError) && css$1.errorCardWrapper), minWidth: width, width: !width ? '100%' : undefined },
         React__namespace.createElement(FlexRow, { cx: css$1.fileCardRow, size: "36", alignItems: "top", spacing: "6" },
             fileExtension && getIcon(fileExtension),
             React__namespace.createElement(FlexCell, { width: "100%" },
@@ -4589,6 +4634,7 @@ exports.DataPickerBody = DataPickerBody;
 exports.DataPickerFooter = DataPickerFooter;
 exports.DataPickerHeader = DataPickerHeader;
 exports.DataPickerRow = DataPickerRow;
+exports.DataRowsContainer = DataRowsContainer;
 exports.DataTable = DataTable;
 exports.DataTableCell = DataTableCell;
 exports.DataTableHeaderCell = DataTableHeaderCell;
@@ -4620,6 +4666,8 @@ exports.HintNotification = HintNotification;
 exports.IconButton = IconButton;
 exports.IndeterminateBar = IndeterminateBar;
 exports.IndicatorBar = IndicatorBar;
+exports.Informer = Informer;
+exports.InputAddon = InputAddon;
 exports.LabeledInput = LabeledInput;
 exports.LinkButton = LinkButton;
 exports.MainMenu = MainMenu;
@@ -4643,7 +4691,6 @@ exports.PickerItem = PickerItem;
 exports.PickerList = PickerList;
 exports.PickerListItem = PickerListItem;
 exports.PickerModal = PickerModal;
-exports.PickerModalImpl = PickerModalImpl;
 exports.PickerToggler = PickerToggler;
 exports.PresetsPanel = PresetsPanel;
 exports.ProgressBar = ProgressBar;
@@ -4673,7 +4720,6 @@ exports.WarningAlert = WarningAlert;
 exports.WarningNotification = WarningNotification;
 exports.allButtonColors = allButtonColors;
 exports.allButtonFills = allButtonFills;
-exports.allButtonSemanticColors = allButtonSemanticColors;
 exports.allEpamBadgeSemanticColors = allEpamBadgeSemanticColors;
 exports.allFillStyles = allFillStyles;
 exports.allFontStyles = allFontStyles;
@@ -4688,6 +4734,7 @@ exports.applyBadgeMods = applyBadgeMods;
 exports.applyButtonMods = applyButtonMods;
 exports.applyCheckboxMods = applyCheckboxMods;
 exports.applyDateSelectionMods = applyDateSelectionMods;
+exports.applyInputAddonMods = applyInputAddonMods;
 exports.applyNumericInputMods = applyNumericInputMods;
 exports.applyProgressBarMods = applyProgressBarMods;
 exports.applySpinnerMods = applySpinnerMods;