@epam/uui 5.1.2-alpha.0 → 5.1.2

package/index.js

@@ -6,6 +6,7 @@ var React = require('react');
 var cx = require('classnames');
 var FocusLock = require('react-focus-lock');
 var dayjs = require('dayjs');
+var customParseFormat = require('dayjs/plugin/customParseFormat.js');
 var updateLocale = require('dayjs/plugin/updateLocale.js');
 var isoWeek = require('dayjs/plugin/isoWeek.js');
 var sortBy = require('lodash.sortby');
@@ -34,433 +35,600 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var cx__default = /*#__PURE__*/_interopDefault(cx);
 var FocusLock__default = /*#__PURE__*/_interopDefault(FocusLock);
 var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
+var customParseFormat__default = /*#__PURE__*/_interopDefault(customParseFormat);
 var updateLocale__default = /*#__PURE__*/_interopDefault(updateLocale);
 var isoWeek__default = /*#__PURE__*/_interopDefault(isoWeek);
 var sortBy__default = /*#__PURE__*/_interopDefault(sortBy);
 
-var _path$11;
-function _extends$14() { _extends$14 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$14.apply(this, arguments); }
+var _path$1d;
+function _extends$1g() { _extends$1g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1g.apply(this, arguments); }
 var SvgBtnCross12 = function SvgBtnCross12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$14({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$11 || (_path$11 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$1d || (_path$1d = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M9.5 3.205 8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6z"
   })));
 };
-var ForwardRef$14 = /*#__PURE__*/React.forwardRef(SvgBtnCross12);
+var ForwardRef$1g = /*#__PURE__*/React.forwardRef(SvgBtnCross12);
 
-var _path$10;
-function _extends$13() { _extends$13 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$13.apply(this, arguments); }
+var _path$1c;
+function _extends$1f() { _extends$1f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1f.apply(this, arguments); }
 var SvgBtnCross18 = function SvgBtnCross18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$13({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$10 || (_path$10 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$1c || (_path$1c = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M14.25 4.808 13.193 3.75 9 7.942 4.808 3.75 3.75 4.808 7.942 9 3.75 13.193l1.058 1.057L9 10.057l4.193 4.193 1.057-1.057L10.057 9z"
   })));
 };
-var ForwardRef$13 = /*#__PURE__*/React.forwardRef(SvgBtnCross18);
+var ForwardRef$1f = /*#__PURE__*/React.forwardRef(SvgBtnCross18);
 
-var _path$$;
-function _extends$12() { _extends$12 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$12.apply(this, arguments); }
+var _path$1b;
+function _extends$1e() { _extends$1e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1e.apply(this, arguments); }
 var SvgBtnCross24 = function SvgBtnCross24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$12({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$$ || (_path$$ = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$1b || (_path$1b = /*#__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$12 = /*#__PURE__*/React.forwardRef(SvgBtnCross24);
+var ForwardRef$1e = /*#__PURE__*/React.forwardRef(SvgBtnCross24);
 
-var _path$_;
-function _extends$11() { _extends$11 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$11.apply(this, arguments); }
+var _path$1a;
+function _extends$1d() { _extends$1d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1d.apply(this, arguments); }
 var SvgFoldingArrow12 = function SvgFoldingArrow12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$11({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$_ || (_path$_ = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$1a || (_path$1a = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M8.295 4.295 6 6.585l-2.295-2.29L3 5l3 3 3-3z"
   })));
 };
-var ForwardRef$11 = /*#__PURE__*/React.forwardRef(SvgFoldingArrow12);
+var ForwardRef$1d = /*#__PURE__*/React.forwardRef(SvgFoldingArrow12);
 
-var _path$Z;
-function _extends$10() { _extends$10 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$10.apply(this, arguments); }
+var _path$19;
+function _extends$1c() { _extends$1c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1c.apply(this, arguments); }
 var SvgFoldingArrow18 = function SvgFoldingArrow18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$10({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$Z || (_path$Z = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$19 || (_path$19 = /*#__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.5z"
   })));
 };
-var ForwardRef$10 = /*#__PURE__*/React.forwardRef(SvgFoldingArrow18);
+var ForwardRef$1c = /*#__PURE__*/React.forwardRef(SvgFoldingArrow18);
 
-var _path$Y;
-function _extends$$() { _extends$$ = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$$.apply(this, arguments); }
+var _path$18;
+function _extends$1b() { _extends$1b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1b.apply(this, arguments); }
 var SvgFoldingArrow24 = function SvgFoldingArrow24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$$({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1b({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$Y || (_path$Y = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$18 || (_path$18 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
   })));
 };
-var ForwardRef$$ = /*#__PURE__*/React.forwardRef(SvgFoldingArrow24);
+var ForwardRef$1b = /*#__PURE__*/React.forwardRef(SvgFoldingArrow24);
 
-var _path$X;
-function _extends$_() { _extends$_ = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$_.apply(this, arguments); }
+var _path$17;
+function _extends$1a() { _extends$1a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1a.apply(this, arguments); }
 var SvgAccept12 = function SvgAccept12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$_({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1a({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$X || (_path$X = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$17 || (_path$17 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M4.846 6.8 9.462 2 11 3.6 4.846 10l-.77-.8L1 6l1.538-1.6 2.308 2.4z"
   })));
 };
-var ForwardRef$_ = /*#__PURE__*/React.forwardRef(SvgAccept12);
+var ForwardRef$1a = /*#__PURE__*/React.forwardRef(SvgAccept12);
 
-var _path$W;
-function _extends$Z() { _extends$Z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Z.apply(this, arguments); }
+var _path$16;
+function _extends$19() { _extends$19 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$19.apply(this, arguments); }
 var SvgAccept18 = function SvgAccept18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$Z({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$19({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$W || (_path$W = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$16 || (_path$16 = /*#__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 4z"
   })));
 };
-var ForwardRef$Z = /*#__PURE__*/React.forwardRef(SvgAccept18);
+var ForwardRef$19 = /*#__PURE__*/React.forwardRef(SvgAccept18);
 
-var _path$V;
-function _extends$Y() { _extends$Y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Y.apply(this, arguments); }
+var _path$15;
+function _extends$18() { _extends$18 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$18.apply(this, arguments); }
 var SvgAccept24 = function SvgAccept24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$Y({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$18({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$V || (_path$V = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$15 || (_path$15 = /*#__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 5z"
   })));
 };
-var ForwardRef$Y = /*#__PURE__*/React.forwardRef(SvgAccept24);
+var ForwardRef$18 = /*#__PURE__*/React.forwardRef(SvgAccept24);
 
-var _path$U;
-function _extends$X() { _extends$X = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$X.apply(this, arguments); }
+var _path$14;
+function _extends$17() { _extends$17 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$17.apply(this, arguments); }
 var SvgSearch12 = function SvgSearch12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$X({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$17({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$U || (_path$U = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$14 || (_path$14 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M9.016 8.309 10.707 10l-.707.707-1.691-1.691a4.5 4.5 0 1 1 .707-.707zM5.5 9a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"
   })));
 };
-var ForwardRef$X = /*#__PURE__*/React.forwardRef(SvgSearch12);
+var ForwardRef$17 = /*#__PURE__*/React.forwardRef(SvgSearch12);
 
-var _path$T;
-function _extends$W() { _extends$W = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$W.apply(this, arguments); }
+var _path$13;
+function _extends$16() { _extends$16 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$16.apply(this, arguments); }
 var SvgSearch18 = function SvgSearch18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$W({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$16({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$T || (_path$T = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$13 || (_path$13 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M13.749 12.335 16.414 15 15 16.414l-2.665-2.665a6.5 6.5 0 1 1 1.414-1.414zM8.5 13a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9z"
   })));
 };
-var ForwardRef$W = /*#__PURE__*/React.forwardRef(SvgSearch18);
+var ForwardRef$16 = /*#__PURE__*/React.forwardRef(SvgSearch18);
 
-var _path$S;
-function _extends$V() { _extends$V = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$V.apply(this, arguments); }
+var _path$12;
+function _extends$15() { _extends$15 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$15.apply(this, arguments); }
 var SvgSearch24 = function SvgSearch24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$V({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$15({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$S || (_path$S = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$12 || (_path$12 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M17.32 15.906 21.414 20 20 21.414l-4.094-4.094a8 8 0 1 1 1.414-1.414zM11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"
   })));
 };
-var ForwardRef$V = /*#__PURE__*/React.forwardRef(SvgSearch24);
+var ForwardRef$15 = /*#__PURE__*/React.forwardRef(SvgSearch24);
 
-var _path$R;
-function _extends$U() { _extends$U = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$U.apply(this, arguments); }
+var _path$11;
+function _extends$14() { _extends$14 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$14.apply(this, arguments); }
 var SvgCalendar12 = function SvgCalendar12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$U({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$14({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$R || (_path$R = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$11 || (_path$11 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M10 2H9V1H8v1H4V1H3v1H2c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 8H2V4h8v6z"
   })));
 };
-var ForwardRef$U = /*#__PURE__*/React.forwardRef(SvgCalendar12);
+var ForwardRef$14 = /*#__PURE__*/React.forwardRef(SvgCalendar12);
 
-var _path$Q;
-function _extends$T() { _extends$T = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$T.apply(this, arguments); }
+var _path$10;
+function _extends$13() { _extends$13 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$13.apply(this, arguments); }
 var SvgCalendar18 = function SvgCalendar18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$T({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$13({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$Q || (_path$Q = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$10 || (_path$10 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M14 3V1h-2v2H6V1H4v2C3 3 2 4 2 5v10c0 1 1 2 2 2h10c1 0 2-1 2-2V5c0-1-1-2-2-2zm0 12-10 .048V7h10v8z"
   })));
 };
-var ForwardRef$T = /*#__PURE__*/React.forwardRef(SvgCalendar18);
+var ForwardRef$13 = /*#__PURE__*/React.forwardRef(SvgCalendar18);
 
-var _path$P;
-function _extends$S() { _extends$S = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$S.apply(this, arguments); }
+var _path$$;
+function _extends$12() { _extends$12 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$12.apply(this, arguments); }
 var SvgCalendar24 = function SvgCalendar24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$S({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$12({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$P || (_path$P = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$$ || (_path$$ = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"
   })));
 };
-var ForwardRef$S = /*#__PURE__*/React.forwardRef(SvgCalendar24);
+var ForwardRef$12 = /*#__PURE__*/React.forwardRef(SvgCalendar24);
 
-var _path$O;
-function _extends$R() { _extends$R = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$R.apply(this, arguments); }
+var _path$_;
+function _extends$11() { _extends$11 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$11.apply(this, arguments); }
 var SvgInfo12 = function SvgInfo12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$R({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$11({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$O || (_path$O = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$_ || (_path$_ = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M6 1C3.24 1 1 3.24 1 6s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm1 8H5V5h2zm0-5c-.471.471-1.529.471-2 0s-.471-1.529 0-2 1.529-.471 2 0 .471 1.529 0 2z",
     fillRule: "evenodd"
   })));
 };
-var ForwardRef$R = /*#__PURE__*/React.forwardRef(SvgInfo12);
+var ForwardRef$11 = /*#__PURE__*/React.forwardRef(SvgInfo12);
 
-var _path$N;
-function _extends$Q() { _extends$Q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Q.apply(this, arguments); }
+var _path$Z;
+function _extends$10() { _extends$10 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$10.apply(this, arguments); }
 var SvgInfo18 = function SvgInfo18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$Q({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$10({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$N || (_path$N = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$Z || (_path$Z = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M8 13h2V8H8v5zM9 1C4.584 1 1 4.584 1 9s3.584 8 8 8 8-3.584 8-8-3.584-8-8-8zm0 15c-3.859 0-7-3.141-7-7s3.141-7 7-7 7 3.141 7 7-3.141 7-7 7zM8 7h2V5H8v2z"
   })));
 };
-var ForwardRef$Q = /*#__PURE__*/React.forwardRef(SvgInfo18);
+var ForwardRef$10 = /*#__PURE__*/React.forwardRef(SvgInfo18);
 
-var _path$M;
-function _extends$P() { _extends$P = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$P.apply(this, arguments); }
+var _path$Y;
+function _extends$$() { _extends$$ = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$$.apply(this, arguments); }
 var SvgInfo24 = function SvgInfo24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$P({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$$({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$M || (_path$M = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$Y || (_path$Y = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"
   })));
 };
-var ForwardRef$P = /*#__PURE__*/React.forwardRef(SvgInfo24);
+var ForwardRef$$ = /*#__PURE__*/React.forwardRef(SvgInfo24);
 
-var _path$L;
-function _extends$O() { _extends$O = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$O.apply(this, arguments); }
+var _path$X;
+function _extends$_() { _extends$_ = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$_.apply(this, arguments); }
 var SvgHelpFill10 = function SvgHelpFill10(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$O({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$_({
     width: 10,
     height: 10,
     viewBox: "0 0 10 10",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$L || (_path$L = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$X || (_path$X = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M5 0C2.24 0 0 2.24 0 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5Zm.5 7.5h-1v-3h1v3Zm0-4h-1v-1h1v1Z"
   })));
 };
-var ForwardRef$O = /*#__PURE__*/React.forwardRef(SvgHelpFill10);
+var ForwardRef$_ = /*#__PURE__*/React.forwardRef(SvgHelpFill10);
 
-var _path$K;
-function _extends$N() { _extends$N = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$N.apply(this, arguments); }
+var _path$W;
+function _extends$Z() { _extends$Z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Z.apply(this, arguments); }
 var SvgHelpFill16 = function SvgHelpFill16(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$N({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$Z({
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$K || (_path$K = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$W || (_path$W = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M7 12h2V7H7v5ZM8 0C3.584 0 0 3.584 0 8s3.584 8 8 8 8-3.584 8-8-3.584-8-8-8Zm0 15c-3.859 0-7-3.141-7-7s3.141-7 7-7 7 3.141 7 7-3.141 7-7 7ZM7 6h2V4H7v2Z"
   })));
 };
-var ForwardRef$N = /*#__PURE__*/React.forwardRef(SvgHelpFill16);
+var ForwardRef$Z = /*#__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); }
+var SvgFileFileWord24 = function SvgFileFileWord24(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$Y({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$V || (_path$V = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm1.2 18h-1.4L12 13.2 10.2 20H8.8l-2.2-9h1.5l1.4 6.8 1.8-6.8h1.3l1.8 6.8 1.4-6.8h1.5l-2.1 9zM13 9V3.5L18.5 9H13z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$Y = /*#__PURE__*/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); }
+var SvgFileFileExcel24 = function SvgFileFileExcel24(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$X({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$U || (_path$U = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm1.8 18H14l-2-3.4-2 3.4H8.2l2.9-4.5L8.2 11H10l2 3.4 2-3.4h1.8l-2.9 4.5 2.9 4.5zM13 9V3.5L18.5 9H13z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$X = /*#__PURE__*/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); }
+var SvgFileFilePdf24 = function SvgFileFilePdf24(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$W({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$T || (_path$T = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M13 9h5.5L13 3.5V9zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm4.1 9.4c-.02.04-.29 1.76-2.1 4.69 0 0-3.5 1.82-2.67 3.18.67 1.08 2.32-.04 3.74-2.68 0 0 1.82-.64 4.24-.82 0 0 3.86 1.73 4.39-.11.52-1.86-3.06-1.44-3.7-1.25 0 0-2-1.35-2.5-3.21 0 0 1.14-3.95-.61-3.9-1.75.05-1.09 3.13-.79 4.1zm.81 1.04c.03.01.47 1.21 1.89 2.46 0 0-2.33.46-3.39.9 0 0 1-1.73 1.5-3.36zm3.93 2.72c.58-.16 2.33.15 2.26.48-.06.33-2.26-.48-2.26-.48zM7.77 17c-.53 1.24-1.44 2-1.67 2-.23 0 .7-1.6 1.67-2zm3.14-6.93c0-.07-.36-2.2 0-2.15.54.08 0 2.08 0 2.15z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$W = /*#__PURE__*/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); }
+var SvgFileFileImage24 = function SvgFileFileImage24(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$V({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$S || (_path$S = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M13 9h5.5L13 3.5V9zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2zm0 18h12v-8l-4 4-2-2-6 6zM8 9a2 2 0 1 0 0 4 2 2 0 0 0 0-4z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$V = /*#__PURE__*/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); }
+var SvgFileFileVideo24 = function SvgFileFileVideo24(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$U({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$R || (_path$R = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M14.992 14 9.5 17.138v-6.276L14.992 14z"
+  })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M4 4c0-1.11.89-2 2-2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4zm9-.5V9h5.5L13 3.5zM8.5 9.138v9.724L17.008 14 8.5 9.138z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$U = /*#__PURE__*/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); }
+var SvgFileFileTable24 = function SvgFileFileTable24(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$T({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$Q || (_path$Q = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-4 17H7v-2h3v2zm0-3H7v-2h3v2zm0-3H7v-2h3v2zm4 6h-3v-2h3v2zm0-3h-3v-2h3v2zm0-3h-3v-2h3v2zm-1-4V3.5L18.5 9H13z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$T = /*#__PURE__*/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); }
+var SvgFileFileText24 = function SvgFileFileText24(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$S({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$P || (_path$P = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M13 9h5.5L13 3.5V9zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2zm9 16v-2H6v2h9zm3-4v-2H6v2h12z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$S = /*#__PURE__*/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); }
+var SvgFileFileEml24 = function SvgFileFileEml24(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$R({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$O || (_path$O = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M4 4c0-1.11.89-2 2-2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4zm9-.5V9h5.5L13 3.5zM7 18v-4.732l5 3.333 5-3.333V18a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1zm5-2.6 4.688-3.126A.997.997 0 0 0 16 12H8a.997.997 0 0 0-.688.274L12 15.399z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$R = /*#__PURE__*/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); }
+var SvgFileFile24 = function SvgFileFile24(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$Q({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$N || (_path$N = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M13 9V3.5L18.5 9H13zM6 2c-1.11 0-2 .89-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6H6z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$Q = /*#__PURE__*/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,
+};
 const systemIcons = {
     18: {
-        clear: ForwardRef$14,
-        foldingArrow: ForwardRef$11,
-        accept: ForwardRef$_,
-        search: ForwardRef$X,
-        calendar: ForwardRef$U,
-        info: ForwardRef$R,
-        help: ForwardRef$O,
+        clear: ForwardRef$1g,
+        foldingArrow: ForwardRef$1d,
+        accept: ForwardRef$1a,
+        search: ForwardRef$17,
+        calendar: ForwardRef$14,
+        info: ForwardRef$11,
+        help: ForwardRef$_,
     },
     24: {
-        clear: ForwardRef$14,
-        foldingArrow: ForwardRef$11,
-        accept: ForwardRef$_,
-        search: ForwardRef$X,
-        calendar: ForwardRef$U,
-        info: ForwardRef$R,
-        help: ForwardRef$O,
+        clear: ForwardRef$1g,
+        foldingArrow: ForwardRef$1d,
+        accept: ForwardRef$1a,
+        search: ForwardRef$17,
+        calendar: ForwardRef$14,
+        info: ForwardRef$11,
+        help: ForwardRef$_,
     },
     30: {
-        clear: ForwardRef$13,
-        foldingArrow: ForwardRef$10,
-        accept: ForwardRef$Z,
-        search: ForwardRef$W,
-        calendar: ForwardRef$T,
-        info: ForwardRef$Q,
-        help: ForwardRef$O,
+        clear: ForwardRef$1f,
+        foldingArrow: ForwardRef$1c,
+        accept: ForwardRef$19,
+        search: ForwardRef$16,
+        calendar: ForwardRef$13,
+        info: ForwardRef$10,
+        help: ForwardRef$_,
     },
     36: {
-        clear: ForwardRef$13,
-        foldingArrow: ForwardRef$10,
-        accept: ForwardRef$Z,
-        search: ForwardRef$W,
-        calendar: ForwardRef$T,
-        info: ForwardRef$Q,
-        help: ForwardRef$N,
+        clear: ForwardRef$1f,
+        foldingArrow: ForwardRef$1c,
+        accept: ForwardRef$19,
+        search: ForwardRef$16,
+        calendar: ForwardRef$13,
+        info: ForwardRef$10,
+        help: ForwardRef$Z,
     },
     42: {
-        clear: ForwardRef$13,
-        foldingArrow: ForwardRef$10,
-        accept: ForwardRef$Z,
-        search: ForwardRef$W,
-        calendar: ForwardRef$T,
-        info: ForwardRef$Q,
-        help: ForwardRef$N,
+        clear: ForwardRef$1f,
+        foldingArrow: ForwardRef$1c,
+        accept: ForwardRef$19,
+        search: ForwardRef$16,
+        calendar: ForwardRef$13,
+        info: ForwardRef$10,
+        help: ForwardRef$Z,
     },
     48: {
-        clear: ForwardRef$12,
-        foldingArrow: ForwardRef$$,
-        accept: ForwardRef$Y,
-        search: ForwardRef$V,
-        calendar: ForwardRef$S,
-        info: ForwardRef$P,
-        help: ForwardRef$N,
+        clear: ForwardRef$1e,
+        foldingArrow: ForwardRef$1b,
+        accept: ForwardRef$18,
+        search: ForwardRef$15,
+        calendar: ForwardRef$12,
+        info: ForwardRef$$,
+        help: ForwardRef$Z,
     },
     60: {
-        clear: ForwardRef$12,
-        foldingArrow: ForwardRef$$,
-        accept: ForwardRef$Y,
-        search: ForwardRef$V,
-        calendar: ForwardRef$S,
-        info: ForwardRef$P,
-        help: ForwardRef$N,
+        clear: ForwardRef$1e,
+        foldingArrow: ForwardRef$1b,
+        accept: ForwardRef$18,
+        search: ForwardRef$15,
+        calendar: ForwardRef$12,
+        info: ForwardRef$$,
+        help: ForwardRef$Z,
     },
     none: {
-        clear: ForwardRef$13,
-        foldingArrow: ForwardRef$10,
-        accept: ForwardRef$Z,
-        search: ForwardRef$W,
-        calendar: ForwardRef$T,
-        info: ForwardRef$Q,
-        help: ForwardRef$N,
+        clear: ForwardRef$1f,
+        foldingArrow: ForwardRef$1c,
+        accept: ForwardRef$19,
+        search: ForwardRef$16,
+        calendar: ForwardRef$13,
+        info: ForwardRef$10,
+        help: ForwardRef$Z,
     },
 };
 
-var buttonCss = {"root":"_4fJioJ","mode-solid":"S40r60","mode-outline":"eyXiiV","mode-none":"DVI8HL","mode-ghost":"g5Tukw","size-18":"WRnz4G","size-24":"_8-U3oD","size-30":"_2ohT0e","size-36":"SS9cWQ","size-42":"FlAuvO","size-48":"EPzMwa","modeSolid":"S40r60","modeOutline":"eyXiiV","modeNone":"DVI8HL","modeGhost":"g5Tukw","size18":"WRnz4G","size24":"_8-U3oD","size30":"_2ohT0e","size36":"SS9cWQ","size42":"FlAuvO","size48":"EPzMwa"};
+var buttonCss = {"root":"JpCjIx","mode-solid":"_6zPtGA","mode-outline":"_2iO51B","mode-none":"RmMn0j","mode-ghost":"cxjoxx","size-18":"JB5Jx5","size-24":"C9A1e2","size-30":"aJuQ21","size-36":"Wo6J8N","size-42":"U7M3F1","size-48":"ScYtFQ","modeSolid":"_6zPtGA","modeOutline":"_2iO51B","modeNone":"RmMn0j","modeGhost":"cxjoxx","size18":"JB5Jx5","size24":"C9A1e2","size30":"aJuQ21","size36":"Wo6J8N","size42":"U7M3F1","size48":"ScYtFQ"};
 
 const allButtonColors = [
     'accent', 'primary', 'secondary', 'negative',
 ];
-const defaultSize$a = '36';
+const defaultSize$b = '36';
 function applyButtonMods(mods) {
     return [
         `button-${mods.color || 'primary'}`,
         buttonCss.root,
-        buttonCss[`size-${mods.size || defaultSize$a}`],
+        buttonCss[`size-${mods.size || defaultSize$b}`],
         buttonCss[`mode-${mods.mode || 'solid'}`],
     ];
 }
 const Button = uuiCore.withMods(uuiComponents.Button, applyButtonMods, (props) => ({
-    dropdownIcon: systemIcons[props.size || defaultSize$a].foldingArrow,
-    clearIcon: systemIcons[props.size || defaultSize$a].clear,
+    dropdownIcon: systemIcons[props.size || defaultSize$b].foldingArrow,
+    clearIcon: systemIcons[props.size || defaultSize$b].clear,
 }));
 
-var css$18 = {"root":"fGQpaf"};
+var css$1f = {"root":"giWQpD"};
 
 const allIconColors = [
     'info', 'success', 'warning', 'error', 'secondary', 'default',
 ];
 function applyIconButtonMods(mods) {
-    return [`icon-button-${mods.color || 'default'}`, css$18.root];
+    return [`icon-button-${mods.color || 'default'}`, css$1f.root];
 }
 const IconButton = uuiCore.withMods(uuiComponents.IconButton, applyIconButtonMods);
 
-var css$17 = {"root":"UXGuJ4","size-18":"_6L5wx3","size-24":"dpCf4P","size-30":"Cjq9tB","size-36":"vs4S6u","size-42":"PnAX3x","size-48":"Vh3cz7","size18":"_6L5wx3","size24":"dpCf4P","size30":"Cjq9tB","size36":"vs4S6u","size42":"PnAX3x","size48":"Vh3cz7"};
+var css$1e = {"root":"s0ftcp","size-18":"_9JQnmi","size-24":"d61e91","size-30":"_44PB4Z","size-36":"JJjj95","size-42":"_0NDftp","size-48":"y4rInX","size18":"_9JQnmi","size24":"d61e91","size30":"_44PB4Z","size36":"JJjj95","size42":"_0NDftp","size48":"y4rInX"};
 
 function getIconClass(props) {
     const classList = {
@@ -479,38 +647,38 @@ function getIconClass(props) {
     return [classList['has-left-icon'] ? 'uui-has-left-icon' : 'uui-no-left-icon', classList['has-right-icon'] ? 'uui-has-right-icon' : 'uui-no-right-icon'];
 }
 
-const defaultSize$9 = '36';
+const defaultSize$a = '36';
 const allLinkButtonColors = ['primary', 'secondary', 'contrast'];
 function applyLinkButtonMods(mods) {
     return [
-        css$17.root,
-        css$17['size-' + (mods.size || defaultSize$9)],
+        css$1e.root,
+        css$1e['size-' + (mods.size || defaultSize$a)],
         ...getIconClass(mods),
         `link-button-${mods.color || 'primary'}`,
     ];
 }
 const LinkButton = uuiCore.withMods(uuiComponents.Button, applyLinkButtonMods, (props) => ({
-    dropdownIcon: systemIcons[props.size || defaultSize$9].foldingArrow,
-    clearIcon: systemIcons[props.size || defaultSize$9].clear,
+    dropdownIcon: systemIcons[props.size || defaultSize$a].foldingArrow,
+    clearIcon: systemIcons[props.size || defaultSize$a].clear,
 }));
 
-var css$16 = {"root":"hw0iV8","uui-notification":"DkTsaR","size-36":"_3RSI6q","size-48":"m88q-d","size-60":"_5m7qeO","uuiNotification":"DkTsaR","size36":"_3RSI6q","size48":"m88q-d","size60":"_5m7qeO"};
+var css$1d = {"root":"wX3mtt","uui-notification":"B-0tjJ","size-36":"IEjWBy","size-48":"_7mTdFf","size-60":"KvYjMj","uuiNotification":"B-0tjJ","size36":"IEjWBy","size48":"_7mTdFf","size60":"KvYjMj"};
 
 function applyTabButtonMods(mods) {
     return [
-        css$16.root,
+        css$1d.root,
         'informer-default',
-        css$16['size-' + (mods.size || '48')],
-        mods.withNotify && css$16.uuiNotification,
+        css$1d['size-' + (mods.size || '48')],
+        mods.withNotify && css$1d.uuiNotification,
         ...getIconClass(mods),
     ];
 }
 const TabButton = 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$15 = {"root":"-dO-yr"};
+var css$1c = {"root":"_1SW4ST"};
 
 function applyVerticalTabButtonMods() {
-    return [css$15.root];
+    return [css$1c.root];
 }
 const VerticalTabButton = uuiCore.withMods(TabButton, applyVerticalTabButtonMods);
 
@@ -546,89 +714,89 @@ exports.EditMode = void 0;
     EditMode["INLINE"] = "inline";
 })(exports.EditMode || (exports.EditMode = {}));
 
-var _path$J;
-function _extends$M() { _extends$M = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$M.apply(this, arguments); }
+var _path$M;
+function _extends$P() { _extends$P = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$P.apply(this, arguments); }
 var SvgCheck12 = function SvgCheck12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$M({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$P({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$J || (_path$J = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$M || (_path$M = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M9.491 3.449 10.51 4.55 5.663 9.024 2.487 6.047l1.026-1.094L5.67 6.975z"
   })));
 };
-var ForwardRef$M = /*#__PURE__*/React.forwardRef(SvgCheck12);
+var ForwardRef$P = /*#__PURE__*/React.forwardRef(SvgCheck12);
 
-var _path$I;
-function _extends$L() { _extends$L = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$L.apply(this, arguments); }
+var _path$L;
+function _extends$O() { _extends$O = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$O.apply(this, arguments); }
 var SvgCheck18 = function SvgCheck18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$L({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$O({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$I || (_path$I = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$L || (_path$L = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "m14.247 4.341 1.506 1.318-7.704 8.804-4.756-4.756 1.414-1.414 3.244 3.243z"
   })));
 };
-var ForwardRef$L = /*#__PURE__*/React.forwardRef(SvgCheck18);
+var ForwardRef$O = /*#__PURE__*/React.forwardRef(SvgCheck18);
 
-var _path$H;
-function _extends$K() { _extends$K = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$K.apply(this, arguments); }
+var _path$K;
+function _extends$N() { _extends$N = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$N.apply(this, arguments); }
 var SvgPartlySelect12 = function SvgPartlySelect12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$K({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$N({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$H || (_path$H = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$K || (_path$K = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M9 5v2H3V5z"
   })));
 };
-var ForwardRef$K = /*#__PURE__*/React.forwardRef(SvgPartlySelect12);
+var ForwardRef$N = /*#__PURE__*/React.forwardRef(SvgPartlySelect12);
 
-var _path$G;
-function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); }
+var _path$J;
+function _extends$M() { _extends$M = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$M.apply(this, arguments); }
 var SvgPartlySelect18 = function SvgPartlySelect18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$J({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$M({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$G || (_path$G = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$J || (_path$J = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M14 8v2H4V8z"
   })));
 };
-var ForwardRef$J = /*#__PURE__*/React.forwardRef(SvgPartlySelect18);
+var ForwardRef$M = /*#__PURE__*/React.forwardRef(SvgPartlySelect18);
 
-var css$14 = {"root":"JqNkTD","size-18":"_1cuAHB","size-12":"iJ-OQ6","mode-cell":"dvBpX1","size18":"_1cuAHB","size12":"iJ-OQ6","modeCell":"dvBpX1"};
+var css$1b = {"root":"baA0Wz","size-18":"hiLHlQ","size-12":"_0NnqIh","mode-cell":"hUTZ5y","size18":"hiLHlQ","size12":"_0NnqIh","modeCell":"hUTZ5y"};
 
 function applyCheckboxMods(mods) {
     return [
-        css$14.root, css$14['size-' + (mods.size || '18')], css$14['mode-' + (mods.mode || 'form')],
+        css$1b.root, css$1b['size-' + (mods.size || '18')], css$1b['mode-' + (mods.mode || 'form')],
     ];
 }
 const applyUUICheckboxProps = (props) => ({
-    icon: props.size === '12' ? ForwardRef$M : ForwardRef$L,
-    indeterminateIcon: props.size === '12' ? ForwardRef$K : ForwardRef$J,
+    icon: props.size === '12' ? ForwardRef$P : ForwardRef$O,
+    indeterminateIcon: props.size === '12' ? ForwardRef$N : ForwardRef$M,
 });
 const Checkbox = uuiCore.withMods(uuiComponents.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$13 = {"root":"aSc4qt","size-18":"tI82BE","size-12":"xR8yMt","size18":"tI82BE","size12":"xR8yMt"};
+var css$1a = {"root":"_4hMA0v","size-18":"H7DUm-","size-12":"CtuRyE","size18":"H7DUm-","size12":"CtuRyE"};
 
 var _circle;
-function _extends$I() { _extends$I = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$I.apply(this, arguments); }
+function _extends$L() { _extends$L = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$L.apply(this, arguments); }
 var SvgRadioPoint = function SvgRadioPoint(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$I({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$L({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
@@ -640,18 +808,18 @@ var SvgRadioPoint = function SvgRadioPoint(props, ref) {
     r: 6
   })));
 };
-var ForwardRef$I = /*#__PURE__*/React.forwardRef(SvgRadioPoint);
+var ForwardRef$L = /*#__PURE__*/React.forwardRef(SvgRadioPoint);
 
 function applyRadioInputMods(mods) {
-    return [css$13.root, css$13['size-' + (mods.size || '18')]];
+    return [css$1a.root, css$1a['size-' + (mods.size || '18')]];
 }
-const RadioInput = uuiCore.withMods(uuiComponents.RadioInput, applyRadioInputMods, () => ({ icon: ForwardRef$I }));
+const RadioInput = uuiCore.withMods(uuiComponents.RadioInput, applyRadioInputMods, () => ({ icon: ForwardRef$L }));
 
-var css$12 = {"root":"AazXmN","size-12":"_7eHYtR","size-18":"_10xnlM","size-24":"DvvJPD","size12":"_7eHYtR","size18":"_10xnlM","size24":"DvvJPD"};
+var css$19 = {"root":"VIVWeQ","size-12":"WS-uRX","size-18":"HtuPUi","size-24":"s91x8j","size12":"WS-uRX","size18":"HtuPUi","size24":"s91x8j"};
 
 function applySwitchMods(mods) {
     return [
-        'switch-vars', css$12.root, css$12['size-' + (mods.size || '18')],
+        'switch-vars', css$19.root, css$19['size-' + (mods.size || '18')],
     ];
 }
 const Switch = uuiCore.withMods(uuiComponents.Switch, applySwitchMods);
@@ -700,27 +868,27 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var textInputCss = {"root":"_7tFalJ","mode-form":"lQDf73","mode-inline":"UcBsxR","mode-cell":"n7DuZl","size-24":"HklOsu","size-30":"_-2yes0","size-36":"Bjwrip","size-42":"GBgUAa","size-48":"Bn4SmK","modeForm":"lQDf73","modeInline":"UcBsxR","modeCell":"n7DuZl","size24":"HklOsu","size30":"_-2yes0","size36":"Bjwrip","size42":"GBgUAa","size48":"Bn4SmK"};
+var textInputCss = {"root":"slUBds","mode-form":"UHDI6n","mode-inline":"arzjEf","mode-cell":"-RznVL","size-24":"_8uJHzA","size-30":"_1WE5Xa","size-36":"UKT-u-","size-42":"SStKiT","size-48":"EsV6QA","modeForm":"UHDI6n","modeInline":"arzjEf","modeCell":"-RznVL","size24":"_8uJHzA","size30":"_1WE5Xa","size36":"UKT-u-","size42":"SStKiT","size48":"EsV6QA"};
 
-const defaultSize$8 = '36';
-const defaultMode$4 = exports.EditMode.FORM;
+const defaultSize$9 = '36';
+const defaultMode$5 = exports.EditMode.FORM;
 function applyTextInputMods(mods) {
     return [
         textInputCss.root,
-        textInputCss['size-' + (mods.size || defaultSize$8)],
-        textInputCss['mode-' + (mods.mode || defaultMode$4)],
+        textInputCss['size-' + (mods.size || defaultSize$9)],
+        textInputCss['mode-' + (mods.mode || defaultMode$5)],
     ];
 }
 const TextInput = uuiCore.withMods(uuiComponents.TextInput, applyTextInputMods, (props) => ({
-    acceptIcon: systemIcons[props.size || defaultSize$8].accept,
-    cancelIcon: systemIcons[props.size || defaultSize$8].clear,
-    dropdownIcon: systemIcons[props.size || defaultSize$8].foldingArrow,
+    acceptIcon: systemIcons[props.size || defaultSize$9].accept,
+    cancelIcon: systemIcons[props.size || defaultSize$9].clear,
+    dropdownIcon: systemIcons[props.size || defaultSize$9].foldingArrow,
 }));
 const SearchInput = React__namespace.default.forwardRef((props, ref) => {
     // analytics events are sending in IEditableDebouncer, so we need to avoid sending events in TextInput
     const textInputProps = __rest(props, []);
     delete textInputProps.getValueChangeAnalyticsEvent;
-    return (React__namespace.default.createElement(uuiCore.IEditableDebouncer, Object.assign({}, props, { render: (iEditable) => (React__namespace.default.createElement(TextInput, Object.assign({ icon: systemIcons[props.size || defaultSize$8].search, onCancel: !!props.value
+    return (React__namespace.default.createElement(uuiCore.IEditableDebouncer, Object.assign({}, props, { render: (iEditable) => (React__namespace.default.createElement(TextInput, Object.assign({ icon: systemIcons[props.size || defaultSize$9].search, onCancel: !!props.value
                 // In a lot of places, it is required to check if a clicked element is a part of some other element.
                 // Usually, those are global click event handlers. To allow that logic to work correctly, it is necessary
                 // to execute the `disappearing` of the cross (setState execution) after the event will pass through all the handlers.
@@ -729,148 +897,146 @@ const SearchInput = React__namespace.default.forwardRef((props, ref) => {
                 : undefined, type: "search", inputMode: "search", ref: ref }, textInputProps, iEditable))) })));
 });
 
-var css$11 = {"root":"V6yD9w","mode-block":"-URH3-","mode-inline":"LjBfCF","padding-0":"JulrA7","padding-6":"ug1rMO","padding-12":"lcGRRX","padding-18":"_7Brba8","modeBlock":"-URH3-","modeInline":"LjBfCF","padding0":"JulrA7","padding6":"ug1rMO","padding12":"lcGRRX","padding18":"_7Brba8"};
+var css$18 = {"root":"-X-Q7f","mode-block":"D-I42-","mode-inline":"UoGiMh","padding-0":"TNWXdT","padding-6":"A9n-64","padding-12":"yIv3jm","padding-18":"SItbyr","modeBlock":"D-I42-","modeInline":"UoGiMh","padding0":"TNWXdT","padding6":"A9n-64","padding12":"yIv3jm","padding18":"SItbyr"};
 
 function applyAccordionMods(mods) {
     return [
-        css$11.root, css$11['mode-' + (mods.mode || 'block')], mods.padding && css$11['padding-' + mods.padding],
+        css$18.root, css$18['mode-' + (mods.mode || 'block')], mods.padding && css$18['padding-' + mods.padding],
     ];
 }
 const Accordion = uuiCore.withMods(uuiComponents.Accordion, applyAccordionMods, (mods) => ({
     dropdownIcon: mods.dropdownIcon !== null && systemIcons[mods.mode === 'block' ? '60' : '30'].foldingArrow,
 }));
 
-var css$10 = {"root":"HHbWN-"};
+var css$17 = {"root":"C3NXQZ"};
 
-const ControlGroup = uuiCore.withMods(uuiComponents.ControlGroup, () => [css$10.root]);
+const ControlGroup = uuiCore.withMods(uuiComponents.ControlGroup, () => [css$17.root]);
 
-var css$$ = {"root":"iudrn-","border-bottom":"uoE0AB","top-shadow":"mW2zbw","size-24":"Fm5eOn","size-30":"AJS-l2","size-36":"_6WWBFy","size-42":"xX4Smz","size-48":"q7cyn-","padding-6":"onBRxT","padding-12":"BzYw2c","padding-18":"-Dnwd3","padding-24":"jW68Qw","margin-24":"_4mv8KH","margin-12":"CXkR-a","vPadding-12":"HUIRvu","vPadding-18":"b-frUC","vPadding-24":"Nu1b5F","vPadding-36":"Rb6he-","vPadding-48":"-SEwDG","spacing-6":"H8TGKl","spacing-12":"iq4HIh","spacing-18":"l3kNa-","borderBottom":"uoE0AB","topShadow":"mW2zbw","size24":"Fm5eOn","size30":"AJS-l2","size36":"_6WWBFy","size42":"xX4Smz","size48":"q7cyn-","padding6":"onBRxT","padding12":"BzYw2c","padding18":"-Dnwd3","padding24":"jW68Qw","margin24":"_4mv8KH","margin12":"CXkR-a","vPadding12":"HUIRvu","vPadding18":"b-frUC","vPadding24":"Nu1b5F","vPadding36":"Rb6he-","vPadding48":"-SEwDG","spacing6":"H8TGKl","spacing12":"iq4HIh","spacing18":"l3kNa-"};
+var css$16 = {"root":"_7ca-Ly","border-bottom":"_9KsWn-","top-shadow":"-oulnc","size-24":"mfFQ3a","size-30":"wREiMJ","size-36":"CGRGmy","size-42":"GjjwCh","size-48":"VqUOS5","padding-6":"y02lUT","padding-12":"vtypkA","padding-18":"h7jOCo","padding-24":"HBf3Lo","margin-24":"zXe0U0","margin-12":"JqoxCt","vPadding-12":"Gwg-bG","vPadding-18":"_0nuDXM","vPadding-24":"_7WJi29","vPadding-36":"arWoNk","vPadding-48":"AzL3Zs","spacing-6":"GJilJA","spacing-12":"VOexu-","spacing-18":"_3frBj5","borderBottom":"_9KsWn-","topShadow":"-oulnc","size24":"mfFQ3a","size30":"wREiMJ","size36":"CGRGmy","size42":"GjjwCh","size48":"VqUOS5","padding6":"y02lUT","padding12":"vtypkA","padding18":"h7jOCo","padding24":"HBf3Lo","margin24":"zXe0U0","margin12":"JqoxCt","vPadding12":"Gwg-bG","vPadding18":"_0nuDXM","vPadding24":"_7WJi29","vPadding36":"arWoNk","vPadding48":"AzL3Zs","spacing6":"GJilJA","spacing12":"VOexu-","spacing18":"_3frBj5"};
 
-const FlexCell = uuiCore.withMods(uuiComponents.FlexCell, () => [css$$.flexCell]);
+const FlexCell = uuiCore.withMods(uuiComponents.FlexCell, () => [css$16.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$16.root, props.size !== null && css$16['size-' + (props.size || '36')], props.padding && css$16['padding-' + props.padding], props.vPadding && css$16['vPadding-' + props.vPadding], props.margin && css$16['margin-' + props.margin], props.topShadow && css$16.topShadow, props.borderBottom && css$16.borderBottom, props.spacing && css$16['spacing-' + props.spacing],
     ];
 });
 
-var css$_ = {"root":"UkNKhg","margin-24":"DwSoXt","padding-12":"BndJnk","padding-24":"lNy9ra","shadow":"_1iiiOQ","margin24":"DwSoXt","padding12":"BndJnk","padding24":"lNy9ra"};
+var css$15 = {"root":"sjWL23","margin-24":"efp-Af","padding-12":"gws-Rx","padding-24":"pa0dcm","shadow":"dGv-Sn","margin24":"efp-Af","padding12":"gws-Rx","padding24":"pa0dcm"};
 
 const Panel = uuiCore.withMods(uuiComponents.VPanel, (props) => [
-    'uui-panel', css$_.root, props.shadow && css$_.shadow, props.margin && css$_['margin-' + props.margin],
+    'uui-panel', css$15.root, props.shadow && css$15.shadow, props.margin && css$15['margin-' + props.margin],
 ]);
 
-var _path$F;
-function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); }
+var _path$I;
+function _extends$K() { _extends$K = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$K.apply(this, arguments); }
 var SvgNotificationCheckCircleFill24 = function SvgNotificationCheckCircleFill24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$K({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$F || (_path$F = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$I || (_path$I = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
   })));
 };
-var ForwardRef$H = /*#__PURE__*/React.forwardRef(SvgNotificationCheckCircleFill24);
+var ForwardRef$K = /*#__PURE__*/React.forwardRef(SvgNotificationCheckCircleFill24);
 
-var _path$E;
-function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); }
+var _path$H;
+function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); }
 var SvgNotificationWarningFill24 = function SvgNotificationWarningFill24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
+  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$E || (_path$E = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$H || (_path$H = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
   })));
 };
-var ForwardRef$G = /*#__PURE__*/React.forwardRef(SvgNotificationWarningFill24);
+var ForwardRef$J = /*#__PURE__*/React.forwardRef(SvgNotificationWarningFill24);
 
-var _path$D;
-function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); }
+var _path$G;
+function _extends$I() { _extends$I = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$I.apply(this, arguments); }
 var SvgNotificationErrorFill24 = function SvgNotificationErrorFill24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$I({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$D || (_path$D = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$G || (_path$G = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
   })));
 };
-var ForwardRef$F = /*#__PURE__*/React.forwardRef(SvgNotificationErrorFill24);
+var ForwardRef$I = /*#__PURE__*/React.forwardRef(SvgNotificationErrorFill24);
 
-var _path$C;
-function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); }
+var _path$F;
+function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); }
 var SvgNotificationHelpFill24 = function SvgNotificationHelpFill24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$C || (_path$C = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$F || (_path$F = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
   })));
 };
-var ForwardRef$E = /*#__PURE__*/React.forwardRef(SvgNotificationHelpFill24);
+var ForwardRef$H = /*#__PURE__*/React.forwardRef(SvgNotificationHelpFill24);
 
-var _path$B;
-function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
+var _path$E;
+function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); }
 var SvgNavigationClose24$1 = function SvgNavigationClose24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$B || (_path$B = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$E || (_path$E = /*#__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$D = /*#__PURE__*/React.forwardRef(SvgNavigationClose24$1);
+var ForwardRef$G = /*#__PURE__*/React.forwardRef(SvgNavigationClose24$1);
 
-var css$Z = {"root":"IhkNkR","icon-wrapper":"UoiR5M","alert-wrapper":"lSmwjX","action-wrapper":"_4q8Sy9","action-icon":"vOOA55","action-link":"ZlNLEM","close-icon":"K4Mdeq","main-path":"TNbAcz","content":"M4HsGM","iconWrapper":"UoiR5M","alertWrapper":"lSmwjX","actionWrapper":"_4q8Sy9","actionIcon":"vOOA55","actionLink":"ZlNLEM","closeIcon":"K4Mdeq","mainPath":"TNbAcz"};
+var css$14 = {"root":"kYZwRS","icon-wrapper":"vpV-T-","alert-wrapper":"zpfsSG","size-48":"xZvwu3","size-36":"_2hahC2","action-wrapper":"A6fRpa","action-icon":"pG8FcU","action-link":"NodnNt","close-icon":"_4qAY1G","main-path":"-hhMYh","content":"_8-v5x4","iconWrapper":"vpV-T-","alertWrapper":"zpfsSG","size48":"xZvwu3","size36":"_2hahC2","actionWrapper":"A6fRpa","actionIcon":"pG8FcU","actionLink":"NodnNt","closeIcon":"_4qAY1G","mainPath":"-hhMYh"};
 
-const Alert = React__namespace.forwardRef((props, ref) => (React__namespace.createElement("div", Object.assign({ role: "alert", ref: ref, className: cx__default.default(css$Z.alertWrapper, `alert-${props.color || 'default'}`, css$Z.root, props.cx) }, props.rawProps),
-    React__namespace.createElement("div", { className: css$Z.mainPath },
-        props.icon && (React__namespace.createElement("div", { className: css$Z.iconWrapper },
-            React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon, cx: css$Z.actionIcon }))),
-        React__namespace.createElement("div", { className: css$Z.content },
+const Alert = React__namespace.forwardRef((props, ref) => (React__namespace.createElement("div", Object.assign({ role: "alert", ref: ref, className: cx__default.default(css$14.alertWrapper, `alert-${props.color || 'default'}`, css$14.root, 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$Z.actionWrapper }, props.actions.map((action) => (React__namespace.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$Z.actionLink, size: "30" })))))),
-        props.onClose && React__namespace.createElement(IconButton, { icon: ForwardRef$D, color: "default", onClick: props.onClose, cx: css$Z.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)));
-
-class Dropdown extends React__namespace.Component {
-    render() {
-        return React__namespace.createElement(uuiComponents.Dropdown, Object.assign({}, this.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$G, color: "default", onClick: props.onClose, cx: css$14.closeIcon })))));
+const WarningAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$J, color: "warning", ref: ref }, props)));
+const SuccessAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$K, color: "success", ref: ref }, props)));
+const HintAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$H, color: "info", ref: ref }, props)));
+const ErrorAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$I, color: "error", ref: ref }, props)));
+
+function Dropdown(props) {
+    return React__namespace.createElement(uuiComponents.Dropdown, Object.assign({}, props));
 }
 
-var css$Y = {"root":"aUMHt3"};
+var css$13 = {"root":"JsYEG6"};
 
 function applyDropdownContainerMods(mods) {
     return [
-        css$Y.root, mods.vPadding && `vPadding-${mods.vPadding}`, mods.padding && `padding-${mods.padding}`,
+        css$13.root, mods.vPadding && `vPadding-${mods.vPadding}`, mods.padding && `padding-${mods.padding}`,
     ];
 }
 const DropdownContainer = uuiCore.withMods(uuiComponents.DropdownContainer, applyDropdownContainerMods);
 
-var css$X = {"menuRoot":"_0IwDzf","bodyRoot":"XjCPl1","submenuRootItem":"u3Ezje","iconAfter":"UaTTQ2","iconCheck":"_0ysbqM","splitterRoot":"VCe5tb","splitter":"avDZi2","headerRoot":"zXAgLP","itemRoot":"_3WQgDQ","icon":"HGBeO9","link":"ZbsS9t"};
+var css$12 = {"menuRoot":"HSAfTU","bodyRoot":"_-3ktfd","submenuRootItem":"CUtbSR","iconAfter":"GieBi2","iconCheck":"_3TgRS9","splitterRoot":"vgjPzd","splitter":"rYP1DH","headerRoot":"g-sb-u","itemRoot":"_3XpNAE","icon":"QDl-ES","link":"ssSji6"};
 
 const icons = systemIcons['36'];
 exports.IDropdownControlKeys = void 0;
@@ -909,10 +1075,13 @@ function DropdownMenuContainer(props) {
             props.onClose();
         }
     };
-    return (React__namespace.default.createElement(FocusLock__default.default, { as: "menu", className: css$X.menuRoot, returnFocus: true, autoFocus: false, ref: menuRef, lockProps: { onKeyDown: handleArrowKeys, tabIndex: -1 } },
-        React__namespace.default.createElement(uuiComponents.DropdownContainer, Object.assign({}, props, { rawProps: { tabIndex: -1 } }))));
+    return (React__namespace.default.createElement(FocusLock__default.default, { as: "menu", className: css$12.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 }) }))));
 }
-const DropdownMenuBody = uuiCore.withMods(DropdownMenuContainer, () => [css$X.bodyRoot], ({ style }) => ({ style }));
+const DropdownMenuBody = uuiCore.withMods(DropdownMenuContainer, () => [css$12.bodyRoot], (props) => {
+    const dropdownRawProps = props.minWidth ? Object.assign(Object.assign({}, props.rawProps), { style: { minWidth: `${props.minWidth}px` } }) : null;
+    return (Object.assign(Object.assign({}, props), { rawProps: dropdownRawProps || props.rawProps }));
+});
 const DropdownMenuButton = React__namespace.default.forwardRef((props, ref) => {
     const context = React.useContext(uuiCore.UuiContext);
     const { icon, iconPosition, onIconClick, caption, isDisabled, isSelected, isActive, link, href, onClick, toggleDropdownOpening, isDropdown, isOpen, target, } = props;
@@ -933,32 +1102,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$X.icon, iconPosition === 'right' ? css$X.iconAfter : css$X.iconBefore) }));
+        const iconElement = (React__namespace.default.createElement(IconButton, { icon: icon, color: isActive ? 'info' : 'default', onClick: onIconClick, cx: uuiCore.cx(css$12.icon, iconPosition === 'right' ? css$12.iconAfter : css$12.iconBefore) }));
         return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
             isIconBefore && iconElement,
-            React__namespace.default.createElement(uuiComponents.Text, { cx: css$X.caption }, caption),
+            React__namespace.default.createElement(uuiComponents.Text, { cx: css$12.caption }, 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$X.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$X.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(props.cx, css$12.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$12.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$X.selectedCheckmark })));
+        isSelected && React__namespace.default.createElement(uuiComponents.IconContainer, { icon: icons.accept, cx: css$12.selectedCheckmark })));
 });
 DropdownMenuButton.displayName = 'DropdownMenuButton';
 function DropdownMenuSplitter(props) {
-    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$X.splitterRoot) },
-        React__namespace.default.createElement("hr", { className: css$X.splitter })));
+    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$12.splitterRoot) },
+        React__namespace.default.createElement("hr", { className: css$12.splitter })));
 }
 function DropdownMenuHeader(props) {
-    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$X.headerRoot) },
-        React__namespace.default.createElement("span", { className: css$X.header }, props.caption)));
+    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$12.headerRoot) },
+        React__namespace.default.createElement("span", { className: css$12.header }, props.caption)));
 }
 function DropdownSubMenu(props) {
     const subMenuModifiers = [
@@ -978,7 +1147,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$X.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
+            return (React__namespace.default.createElement(DropdownMenuButton, Object.assign({ cx: uuiCore.cx(css$12.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
         } }));
 }
 function DropdownMenuSwitchButton(props) {
@@ -995,16 +1164,16 @@ function DropdownMenuSwitchButton(props) {
             onHandleValueChange(!isSelected);
         }
     };
-    return (React__namespace.default.createElement(uuiComponents.FlexRow, { cx: uuiCore.cx(props.cx, css$X.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$X.iconBefore }),
-        React__namespace.default.createElement(uuiComponents.Text, { cx: css$X.caption }, caption),
+    return (React__namespace.default.createElement(uuiComponents.FlexRow, { cx: uuiCore.cx(props.cx, css$12.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$12.iconBefore }),
+        React__namespace.default.createElement(uuiComponents.Text, { cx: css$12.caption }, caption),
         React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
         React__namespace.default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
 }
 
-var css$W = {"root":"vVtKEo"};
+var css$11 = {"root":"zwZPGx"};
 
-var css$V = {"line-height-12":"xCWCE1","line-height-18":"g4wYac","line-height-24":"_83NK7e","line-height-30":"zLQkOu","font-size-10":"Ge49ZO","font-size-12":"t1EBii","font-size-14":"AWS33M","font-size-16":"-OjYrJ","font-size-18":"OhlZKI","font-size-24":"-Cb7Xh","v-padding-2":"fpf7Rc","v-padding-3":"MrmJzl","v-padding-5":"YcJ7OG","v-padding-6":"ygu-aa","v-padding-8":"k1875J","v-padding-9":"OxP681","v-padding-11":"-Tv7qg","v-padding-12":"Hsl4TY","v-padding-14":"rZV7Pf","v-padding-15":"MpPK9h","v-padding-17":"BRTVsV","v-padding-18":"OEyrSE","v-padding-23":"HkvkfQ","v-padding-24":"PtN2x3","lineHeight12":"xCWCE1","lineHeight18":"g4wYac","lineHeight24":"_83NK7e","lineHeight30":"zLQkOu","fontSize10":"Ge49ZO","fontSize12":"t1EBii","fontSize14":"AWS33M","fontSize16":"-OjYrJ","fontSize18":"OhlZKI","fontSize24":"-Cb7Xh","vPadding2":"fpf7Rc","vPadding3":"MrmJzl","vPadding5":"YcJ7OG","vPadding6":"ygu-aa","vPadding8":"k1875J","vPadding9":"OxP681","vPadding11":"-Tv7qg","vPadding12":"Hsl4TY","vPadding14":"rZV7Pf","vPadding15":"MpPK9h","vPadding17":"BRTVsV","vPadding18":"OEyrSE","vPadding23":"HkvkfQ","vPadding24":"PtN2x3"};
+var css$10 = {"line-height-12":"ni57Lf","line-height-18":"OKAXVF","line-height-24":"X56Fq1","line-height-30":"iguoae","font-size-10":"MBBlV9","font-size-12":"X5ywlk","font-size-14":"Uj8gPI","font-size-16":"O8clvg","font-size-18":"zaLxMj","font-size-24":"e-NP4l","v-padding-2":"b8zuNm","v-padding-3":"EEvOeD","v-padding-5":"U8Zpo2","v-padding-6":"wAKImI","v-padding-8":"_8AGks2","v-padding-9":"nkV7Jb","v-padding-11":"DrXT7C","v-padding-12":"Rjqv66","v-padding-14":"EznPYs","v-padding-15":"IHV3J-","v-padding-17":"IdHeYU","v-padding-18":"v-ToBK","v-padding-23":"neQIsZ","v-padding-24":"vGpKKb","lineHeight12":"ni57Lf","lineHeight18":"OKAXVF","lineHeight24":"X56Fq1","lineHeight30":"iguoae","fontSize10":"MBBlV9","fontSize12":"X5ywlk","fontSize14":"Uj8gPI","fontSize16":"O8clvg","fontSize18":"zaLxMj","fontSize24":"e-NP4l","vPadding2":"b8zuNm","vPadding3":"EEvOeD","vPadding5":"U8Zpo2","vPadding6":"wAKImI","vPadding8":"_8AGks2","vPadding9":"nkV7Jb","vPadding11":"DrXT7C","vPadding12":"Rjqv66","vPadding14":"EznPYs","vPadding15":"IHV3J-","vPadding17":"IdHeYU","vPadding18":"v-ToBK","vPadding23":"neQIsZ","vPadding24":"vGpKKb"};
 
 const defaultTextSettings = {
     18: { lineHeight: 12, fontSize: 10 },
@@ -1017,7 +1186,7 @@ const defaultTextSettings = {
 };
 function getTextClasses(props, border) {
     if (props.size === 'none') {
-        return [css$V['line-height-' + props.lineHeight], css$V['font-size-' + props.fontSize]];
+        return [css$10['line-height-' + props.lineHeight], css$10['font-size-' + props.fontSize]];
     }
     const setting = {
         size: props.size,
@@ -1026,7 +1195,7 @@ function getTextClasses(props, border) {
     };
     const vPadding = (+setting.size - +setting.lineHeight - (border ? 2 : 0)) / 2;
     return [
-        css$V['line-height-' + setting.lineHeight], css$V['font-size-' + setting.fontSize], css$V['v-padding-' + vPadding],
+        css$10['line-height-' + setting.lineHeight], css$10['font-size-' + setting.fontSize], css$10['v-padding-' + vPadding],
     ];
 }
 
@@ -1039,12 +1208,12 @@ function applyTextMods(mods) {
     return [
         `uui-font-${mods.font || 'regular'}`,
         `uui-text-${mods.color || 'primary'}`,
-        css$W.root,
+        css$11.root,
     ].concat(textClasses);
 }
 const Text = uuiCore.withMods(uuiComponents.Text, applyTextMods);
 
-var css$U = {"container":"-ItGBf","loading-word":"X8Hxee","animated-loading":"gZa-57","skeleton_loading":"FnnKz2","loadingWord":"X8Hxee","animatedLoading":"gZa-57","skeletonLoading":"FnnKz2"};
+var css$$ = {"container":"iG1OfX","loading-word":"HIfL66","animated-loading":"wUUw4e","skeleton_loading":"_3EKg7P","loadingWord":"HIfL66","animatedLoading":"wUUw4e","skeletonLoading":"_3EKg7P"};
 
 const TextPlaceholder = (props) => {
     const pattern = '&nbsp;';
@@ -1056,35 +1225,35 @@ const TextPlaceholder = (props) => {
         }
         return words;
     }, [props.wordsCount]);
-    return (React__namespace.createElement("div", Object.assign({ "aria-busy": true, className: css$U.container }, props.rawProps), text.map((it, index) => (React__namespace.createElement("span", { key: index, className: cx__default.default([
-            props.cx, css$U.loadingWord, !props.isNotAnimated && css$U.animatedLoading,
+    return (React__namespace.createElement("div", Object.assign({ "aria-busy": true, className: css$$.container }, props.rawProps), text.map((it, index) => (React__namespace.createElement("span", { key: index, className: cx__default.default([
+            props.cx, css$$.loadingWord, !props.isNotAnimated && css$$.animatedLoading,
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
-var style = {"typography-16":"NFDYIg","typography-14":"zOWEaK","typography-12":"EkZCnq","typography-uui":"q2bNH2","typography16":"NFDYIg","typography14":"zOWEaK","typography12":"EkZCnq","typographyUui":"q2bNH2"};
+var style = {"typography-16":"Qdaj0q","typography-14":"chm54T","typography-12":"PF6KKb","typography-uui":"_1nitLC","typography16":"Qdaj0q","typography14":"chm54T","typography12":"PF6KKb","typographyUui":"_1nitLC"};
 
 const RichTextView = uuiCore.withMods(uuiComponents.RichTextView, (mods) => [style.typographyUui, style['typography-' + (mods.size || '14')]]);
 
-var css$T = {"modal-blocker":"_9zNAJB","animateModalBlocker":"B0v-Y-","modal":"Vmbad3","modal-footer":"N9ejK8","border-top":"-Zp9Su","modal-header":"FVirmU","modalBlocker":"_9zNAJB","modalFooter":"N9ejK8","borderTop":"-Zp9Su","modalHeader":"FVirmU"};
+var css$_ = {"modal-blocker":"aW0rqf","animateModalBlocker":"dGOTvr","modal":"XsznXQ","modal-footer":"yRTRMA","border-top":"Qd2p01","modal-header":"Rx8Vt6","modalBlocker":"aW0rqf","modalFooter":"yRTRMA","borderTop":"Qd2p01","modalHeader":"Rx8Vt6"};
 
-const ModalBlocker = uuiCore.withMods(uuiComponents.ModalBlocker, () => [css$T.modalBlocker]);
-const ModalWindow = uuiCore.withMods(uuiComponents.ModalWindow, () => [css$T.modal], (props) => ({
+const ModalBlocker = uuiCore.withMods(uuiComponents.ModalBlocker, () => [css$_.modalBlocker]);
+const ModalWindow = uuiCore.withMods(uuiComponents.ModalWindow, () => [css$_.modal], (props) => ({
     style: Object.assign(Object.assign({}, props.style), { width: `${props.width || 420}px`, height: props.height ? `${props.height}px` : 'auto' }),
 }));
 class ModalHeader extends React__namespace.Component {
     render() {
-        return (React__namespace.createElement(FlexRow, { padding: this.props.padding || '24', vPadding: "12", borderBottom: this.props.borderBottom, cx: [css$T.modalHeader, this.props.cx], spacing: "12", rawProps: this.props.rawProps },
+        return (React__namespace.createElement(FlexRow, { padding: this.props.padding || '24', vPadding: "12", borderBottom: this.props.borderBottom, cx: [css$_.modalHeader, this.props.cx], spacing: "12", rawProps: this.props.rawProps },
             this.props.title && (React__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$D, onClick: this.props.onClose })))));
+                React__namespace.createElement(IconButton, { icon: ForwardRef$G, onClick: this.props.onClose })))));
     }
 }
 class ModalFooter extends React__namespace.Component {
     render() {
         return (React__namespace.createElement(FlexRow, { spacing: this.props.spacing || '12', cx: [
-                css$T.modalFooter, this.props.borderTop && css$T.borderTop, this.props.cx,
+                css$_.modalFooter, this.props.borderTop && css$_.borderTop, this.props.cx,
             ], padding: this.props.padding || '24', vPadding: this.props.vPadding || '24', rawProps: this.props.rawProps }, this.props.children));
     }
 }
@@ -1170,25 +1339,31 @@ const i18n = Object.assign(Object.assign({}, uuiCore.i18n), { dataPickerBody: {
     }, confirmationModal: {
         discardButton: 'Discard',
         saveButton: 'Save',
+    }, fileUpload: {
+        labelStart: 'Drop files to attach or',
+        browse: 'browse',
+        labelEnd: 'your local files',
+    }, fileCard: {
+        fileSizeProgress: ' of ',
     } });
 
-var _path$A;
-function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
+var _path$D;
+function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); }
 var SvgCross = function SvgCross(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$A || (_path$A = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$D || (_path$D = /*#__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$C = /*#__PURE__*/React.forwardRef(SvgCross);
+var ForwardRef$F = /*#__PURE__*/React.forwardRef(SvgCross);
 
-var css$S = {"root":"mRHl5Z","icon-wrapper":"D5UKRC","action-wrapper":"dza-Ft","action-link":"qg3GfZ","close-icon":"L1132n","main-path":"t8f-rU","content":"l30KES","clear-button":"tYZX2z","close-wrapper":"_7Zqo3I","iconWrapper":"D5UKRC","actionWrapper":"dza-Ft","actionLink":"qg3GfZ","closeIcon":"L1132n","mainPath":"t8f-rU","clearButton":"tYZX2z","closeWrapper":"_7Zqo3I"};
+var css$Z = {"root":"rpGnfP","icon-wrapper":"r4DgYr","action-wrapper":"gAQvA1","action-link":"uZeR-j","close-icon":"_19x-BM","main-path":"_8LQdhP","content":"z-2e1V","clear-button":"nIyLZr","close-wrapper":"kkwwXm","iconWrapper":"r4DgYr","actionWrapper":"gAQvA1","actionLink":"uZeR-j","closeIcon":"_19x-BM","mainPath":"_8LQdhP","clearButton":"nIyLZr","closeWrapper":"kkwwXm"};
 
 const NotificationCard = React__namespace.default.forwardRef((props, ref) => {
     const notificationCardNode = React__namespace.default.useRef(null);
@@ -1203,34 +1378,34 @@ 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(props.color && `notification-card-${props.color}`, css$S.root, props.cx), ref: notificationCardNode }, props.rawProps),
-        React__namespace.default.createElement("div", { className: css$S.mainPath },
-            props.icon && (React__namespace.default.createElement("div", { className: css$S.iconWrapper },
-                React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, cx: css$S.actionIcon }))),
-            React__namespace.default.createElement("div", { className: css$S.content },
+    return (React__namespace.default.createElement("div", Object.assign({ role: "alert", className: cx__default.default(props.color && `notification-card-${props.color}`, css$Z.root, props.cx), ref: notificationCardNode }, props.rawProps),
+        React__namespace.default.createElement("div", { className: css$Z.mainPath },
+            props.icon && (React__namespace.default.createElement("div", { className: css$Z.iconWrapper },
+                React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, cx: css$Z.actionIcon }))),
+            React__namespace.default.createElement("div", { className: css$Z.content },
                 props.children,
-                props.actions && (React__namespace.default.createElement("div", { className: css$S.actionWrapper }, props.actions.map((action) => (React__namespace.default.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$S.actionLink, size: "36", rawProps: action.rawProps })))))),
-            props.onClose && (React__namespace.default.createElement("div", { className: css$S.closeWrapper },
-                React__namespace.default.createElement(IconButton, { icon: ForwardRef$C, color: "default", onClick: props.onClose, cx: css$S.closeIcon }))))));
+                props.actions && (React__namespace.default.createElement("div", { className: css$Z.actionWrapper }, props.actions.map((action) => (React__namespace.default.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$Z.actionLink, size: "36", rawProps: action.rawProps })))))),
+            props.onClose && (React__namespace.default.createElement("div", { className: css$Z.closeWrapper },
+                React__namespace.default.createElement(IconButton, { icon: ForwardRef$F, color: "default", onClick: props.onClose, cx: css$Z.closeIcon }))))));
 });
-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 }))));
+const WarningNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$J, 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$K, 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$H, 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$I, 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$S.notificationWrapper, css$S.clearButton) },
+        return (React__namespace.default.createElement("div", { className: cx__default.default(css$Z.notificationWrapper, css$Z.clearButton) },
             React__namespace.default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => this.context.uuiNotifications.clearAll() })));
     }
 }
 ClearNotification.contextType = uuiCore.UuiContext;
 
-var css$R = {"root":"feq4iP"};
+var css$Y = {"root":"XQwwjX"};
 
 function applyTooltipMods(mods) {
     return [
         `tooltip-${mods.color || 'default'}`,
-        css$R.root,
+        css$Y.root,
     ];
 }
 const Tooltip = uuiCore.withMods(uuiComponents.Tooltip, applyTooltipMods);
@@ -1252,20 +1427,20 @@ class ConfirmationModal extends React__namespace.Component {
     }
 }
 
-var css$Q = {"root":"_3nhIwH","size-24":"aL6J8t","size-30":"_6r6WUl","size-36":"qwrVsx","size-42":"_4ybWxg","size-48":"_3E27KS","size24":"aL6J8t","size30":"_6r6WUl","size36":"qwrVsx","size42":"_4ybWxg","size48":"_3E27KS"};
+var css$X = {"root":"hnQiDB","size-24":"BSBZYf","size-30":"kNgPYC","size-36":"khsr2J","size-42":"I1zp45","size-48":"_2Mpbqo","size24":"BSBZYf","size30":"kNgPYC","size36":"khsr2J","size42":"I1zp45","size48":"_2Mpbqo"};
 
-const defaultSize$7 = '36';
+const defaultSize$8 = '36';
 function applyLabeledInputMods(mods) {
-    return [css$Q.root, css$Q['size-' + (mods.size || defaultSize$7)]];
+    return [css$X.root, css$X['size-' + (mods.size || defaultSize$8)]];
 }
 const LabeledInput = uuiCore.withMods(uuiComponents.LabeledInput, applyLabeledInputMods, (props) => ({
     Tooltip,
-    infoIcon: systemIcons[props.size || defaultSize$7].help,
+    infoIcon: systemIcons[props.size || defaultSize$8].help,
 }));
 
-var css$P = {"root":"RLVvqa"};
+var css$W = {"root":"dxHTdg"};
 
-const RadioGroup = uuiCore.withMods(uuiComponents.RadioGroup, () => [css$P.root], () => ({ RadioInput }));
+const RadioGroup = uuiCore.withMods(uuiComponents.RadioGroup, () => [css$W.root], () => ({ RadioInput }));
 
 function applyScrollBarsMods() {
     return [
@@ -1276,52 +1451,52 @@ const ScrollBars = uuiCore.withMods(uuiComponents.ScrollBars, applyScrollBarsMod
 
 const VirtualList = uuiComponents.VirtualList;
 
-var css$O = {"root":"_4hvZK1"};
+var css$V = {"root":"SvYA1O"};
 
-var css$N = {"root":"DV4yMs","uui-spinner":"wQa-gr","uuiSpinner":"wQa-gr"};
+var css$U = {"root":"cDGW7J","uui-spinner":"rvG-Sp","uuiSpinner":"rvG-Sp"};
 
 function applySpinnerMods() {
-    return [css$N.root];
+    return [css$U.root];
 }
 const Spinner = uuiCore.withMods(uuiComponents.Spinner, applySpinnerMods);
 
-const Blocker = uuiCore.withMods(uuiComponents.Blocker, () => [css$O.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__namespace.default.createElement(Spinner, null)) }));
+const Blocker = uuiCore.withMods(uuiComponents.Blocker, () => [css$V.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__namespace.default.createElement(Spinner, null)) }));
 
-var css$M = {"root":"Mk-du2"};
+var css$T = {"root":"-B-Xr8"};
 
-const CheckboxGroup = uuiCore.withMods(uuiComponents.CheckboxGroup, () => [css$M.root], () => ({ CheckboxInput: Checkbox }));
+const CheckboxGroup = uuiCore.withMods(uuiComponents.CheckboxGroup, () => [css$T.root], () => ({ CheckboxInput: Checkbox }));
 
 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), mode: props.value === item.id ? 'solid' : 'outline', color: props.color === 'secondary' && props.value === item.id ? 'primary' : props.color || 'primary', size: props.size, rawProps: { 'aria-current': props.value === item.id, role: 'tab' } }))))));
 }
 const MultiSwitch = React__namespace.forwardRef(MultiSwitchComponent);
 
-var css$L = {"root":"a0oGuf","size-24":"IfCy4f","size-30":"X5Bncv","size-36":"QmKm27","size-42":"lec6B4","size-48":"BDLUmj","mode-form":"SuUy3B","mode-cell":"Ur4Nhe","size24":"IfCy4f","size30":"X5Bncv","size36":"QmKm27","size42":"lec6B4","size48":"BDLUmj","modeForm":"SuUy3B","modeCell":"Ur4Nhe"};
+var css$S = {"root":"U8iw3K","size-24":"oVJifS","size-30":"uO4zgx","size-36":"VcaOox","size-42":"Rpn9NB","size-48":"muWu8a","mode-form":"bRR9Oh","mode-cell":"CNh9Ev","size24":"oVJifS","size30":"uO4zgx","size36":"VcaOox","size42":"Rpn9NB","size48":"muWu8a","modeForm":"bRR9Oh","modeCell":"CNh9Ev"};
 
-const defaultSize$6 = '36';
-const defaultMode$3 = exports.EditMode.FORM;
+const defaultSize$7 = '36';
+const defaultMode$4 = exports.EditMode.FORM;
 function applyNumericInputMods(mods) {
     return [
-        textInputCss.root, css$L.root, css$L['size-' + (mods.size || defaultSize$6)], textInputCss['size-' + (mods.size || defaultSize$6)], textInputCss['mode-' + (mods.mode || defaultMode$3)],
+        textInputCss.root, css$S.root, css$S['size-' + (mods.size || defaultSize$7)], textInputCss['size-' + (mods.size || defaultSize$7)], textInputCss['mode-' + (mods.mode || defaultMode$4)],
     ];
 }
 const NumericInput = uuiCore.withMods(uuiComponents.NumericInput, applyNumericInputMods, (props) => {
     var _a, _b;
     return ({
-        upIcon: systemIcons[props.size || defaultSize$6].foldingArrow,
-        downIcon: systemIcons[props.size || defaultSize$6].foldingArrow,
+        upIcon: systemIcons[props.size || defaultSize$7].foldingArrow,
+        downIcon: systemIcons[props.size || defaultSize$7].foldingArrow,
         align: (_a = props.align) !== null && _a !== void 0 ? _a : (props.mode === 'cell' ? 'right' : 'left'),
         disableArrows: (_b = props.disableArrows) !== null && _b !== void 0 ? _b : props.mode === 'cell',
     });
 });
 
-var css$K = {"root":"HM3m07","mode-form":"pdBu4o","mode-cell":"-Alcy2","mode-inline":"an-YXi","size-24":"_31pIs0","size-30":"A2OLVu","size-36":"woronH","size-42":"iohRi0","size-48":"lFxJ-d","modeForm":"pdBu4o","modeCell":"-Alcy2","modeInline":"an-YXi","size24":"_31pIs0","size30":"A2OLVu","size36":"woronH","size42":"iohRi0","size48":"lFxJ-d"};
+var css$R = {"root":"kXYEPr","mode-form":"fLJC6H","mode-cell":"lMQ2mu","mode-inline":"VHhy-f","size-24":"h9zsJB","size-30":"rUsP1s","size-36":"g4-X-X","size-42":"fskKPB","size-48":"DiULaA","modeForm":"fLJC6H","modeCell":"lMQ2mu","modeInline":"VHhy-f","size24":"h9zsJB","size30":"rUsP1s","size36":"g4-X-X","size42":"fskKPB","size48":"DiULaA"};
 
-const defaultSize$5 = '36';
-const defaultMode$2 = exports.EditMode.FORM;
+const defaultSize$6 = '36';
+const defaultMode$3 = exports.EditMode.FORM;
 function applyTextAreaMods(mods) {
     return [
-        css$K.root, css$K['size-' + (mods.size || defaultSize$5)], css$K['mode-' + (mods.mode || defaultMode$2)],
+        css$R.root, css$R['size-' + (mods.size || defaultSize$6)], css$R['mode-' + (mods.mode || defaultMode$3)],
     ];
 }
 const TextArea = uuiCore.withMods(uuiComponents.TextArea, applyTextAreaMods, (props) => ({
@@ -1329,41 +1504,73 @@ const TextArea = uuiCore.withMods(uuiComponents.TextArea, applyTextAreaMods, (pr
     maxLength: props.mode === exports.EditMode.CELL ? undefined : props.maxLength,
 }));
 
-var css$J = {"container":"nopCwI"};
+var css$Q = {"root":"zUdkJF","icon":"agign7","date-input":"t4kTxW","dateInput":"t4kTxW"};
 
-var _path$z;
-function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
+const TimePickerBody = uuiCore.withMods(uuiComponents.TimePickerBody, () => [css$Q.root], () => ({ addIcon: ForwardRef$1c, subtractIcon: ForwardRef$1c }));
+
+dayjs__default.default.extend(customParseFormat__default.default);
+const defaultMode$2 = exports.EditMode.FORM;
+class TimePicker extends uuiComponents.BaseTimePicker {
+    constructor() {
+        super(...arguments);
+        this.renderInput = (props) => {
+            var _a;
+            if (process.env.NODE_ENV !== "production") {
+                if (this.props.size === '48') {
+                    uuiCore.devLogger.warnAboutDeprecatedPropValue({
+                        component: 'TimePicker',
+                        propName: 'size',
+                        propValue: this.props.size,
+                        propValueUseInstead: '42',
+                        condition: () => ['48'].indexOf(this.props.size) !== -1,
+                    });
+                }
+            }
+            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$Q.dateInput, this.props.inputCx], value: this.state.value, onValueChange: this.handleInputChange, onCancel: this.onClear, onFocus: this.handleFocus, onBlur: this.handleBlur, isDropdown: false, placeholder: this.props.placeholder ? this.props.placeholder : this.getFormat(), mode: this.props.mode || defaultMode$2, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.input })));
+        };
+        this.renderBody = (props) => {
+            var _a;
+            return (!this.props.isDisabled && !this.props.isReadonly && (React__namespace.default.createElement(DropdownContainer, Object.assign({}, props),
+                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$P = {"container":"CVsFmG"};
+
+var _path$C;
+function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); }
 var SvgNavigationChevronLeft18 = function SvgNavigationChevronLeft18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$z || (_path$z = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$C || (_path$C = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M11.557 5.558 10.5 4.5 6 9l4.5 4.5 1.057-1.057L8.123 9l3.434-3.442z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$B = /*#__PURE__*/React.forwardRef(SvgNavigationChevronLeft18);
+var ForwardRef$E = /*#__PURE__*/React.forwardRef(SvgNavigationChevronLeft18);
 
-var _path$y;
-function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
+var _path$B;
+function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
 var SvgNavigationChevronRight18 = function SvgNavigationChevronRight18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$y || (_path$y = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$B || (_path$B = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M7.5 4.5 6.442 5.558 9.877 9l-3.435 3.443L7.5 13.5 12 9 7.5 4.5z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$A = /*#__PURE__*/React.forwardRef(SvgNavigationChevronRight18);
+var ForwardRef$D = /*#__PURE__*/React.forwardRef(SvgNavigationChevronRight18);
 
 const uuiHeader = {
     container: 'uui-datepickerheader-container',
@@ -1437,17 +1644,17 @@ 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$J.container, uuiHeader.container, props.cx) },
+    return (React__namespace.createElement("div", { className: cx__default.default(css$P.container, uuiHeader.container, props.cx) },
         React__namespace.createElement("header", { className: uuiHeader.header },
-            React__namespace.createElement(Button, { icon: ForwardRef$B, color: "secondary", mode: "ghost", cx: uuiHeader.navIconLeft, onClick: () => onLeftNavigationArrow() }),
+            React__namespace.createElement(Button, { icon: ForwardRef$E, color: "secondary", mode: "ghost", cx: uuiHeader.navIconLeft, onClick: () => onLeftNavigationArrow() }),
             React__namespace.createElement(Button, { caption: title, mode: "ghost", cx: uuiHeader.navTitle, onClick: () => onCaptionClick(props.value.view) }),
-            React__namespace.createElement(Button, { icon: ForwardRef$A, color: "secondary", mode: "ghost", cx: uuiHeader.navIconRight, onClick: () => onRightNavigationArrow() }))));
+            React__namespace.createElement(Button, { icon: ForwardRef$D, color: "secondary", mode: "ghost", cx: uuiHeader.navIconRight, onClick: () => onRightNavigationArrow() }))));
 }
 
-var css$I = {"root":"w2hCHl"};
+var css$O = {"root":"_1rVzHM"};
 
 function applyDateSelectionMods() {
-    return [css$I.root];
+    return [css$O.root];
 }
 const Calendar = uuiCore.withMods(uuiComponents.Calendar, applyDateSelectionMods);
 
@@ -1514,14 +1721,14 @@ class DatePicker extends uuiComponents.BaseDatePicker {
     }
 }
 
-var css$H = {"root":"rTcsX1"};
+var css$N = {"root":"S5Fe-D"};
 
 function applyCalendarPresetsMods() {
-    return [css$H.root];
+    return [css$N.root];
 }
 const CalendarPresets = uuiCore.withMods(uuiComponents.CalendarPresets, applyCalendarPresetsMods, () => ({}));
 
-var css$G = {"root":"D-Vrlv","container":"cJUBnX","day-selection":"PEa3hs","from-picker":"Uq8mPE","to-picker":"uYVuJF","bodes-wrapper":"gT2-w9","blocker":"h9KlD3","daySelection":"PEa3hs","fromPicker":"Uq8mPE","toPicker":"uYVuJF","bodesWrapper":"gT2-w9"};
+var css$M = {"root":"vgnT35","container":"_29eBA1","day-selection":"_74vqZj","from-picker":"LvdvgA","to-picker":"z-8JRJ","bodes-wrapper":"_2CJiuD","blocker":"JncIpE","daySelection":"_74vqZj","fromPicker":"LvdvgA","toPicker":"z-8JRJ","bodesWrapper":"_2CJiuD"};
 
 dayjs__default.default.extend(isoWeek__default.default);
 function weekCount(displayedDate) {
@@ -1618,16 +1825,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$G.daySelection, css$G.container], alignItems: "top" },
+            return (React__namespace.createElement(FlexRow, { cx: [((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.view) === 'DAY_SELECTION' && css$M.daySelection, css$M.container], alignItems: "top" },
                 React__namespace.createElement(FlexCell, { width: "auto" },
                     React__namespace.createElement(FlexRow, null,
-                        React__namespace.createElement(FlexRow, { cx: css$G.bodesWrapper, alignItems: "top" },
-                            React__namespace.createElement(DatePickerBody, { cx: uuiCore.cx(css$G.fromPicker), setSelectedDate: (nv) => this.setSelectedDate(nv), value: this.getFromValue(), setDisplayedDateAndView: (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'from'), getDayCX: this.getDayCX, filter: this.props.filter, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday }),
-                            React__namespace.createElement(DatePickerBody, { cx: uuiCore.cx(css$G.toPicker), setSelectedDate: (nv) => this.setSelectedDate(nv), value: this.getToValue(), setDisplayedDateAndView: (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'to'), getDayCX: this.getDayCX, filter: this.props.filter, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday }),
+                        React__namespace.createElement(FlexRow, { cx: css$M.bodesWrapper, alignItems: "top" },
+                            React__namespace.createElement(DatePickerBody, { cx: uuiCore.cx(css$M.fromPicker), setSelectedDate: (nv) => this.setSelectedDate(nv), value: this.getFromValue(), setDisplayedDateAndView: (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'from'), getDayCX: this.getDayCX, filter: this.props.filter, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday }),
+                            React__namespace.createElement(DatePickerBody, { cx: uuiCore.cx(css$M.toPicker), setSelectedDate: (nv) => this.setSelectedDate(nv), value: this.getToValue(), setDisplayedDateAndView: (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'to'), getDayCX: this.getDayCX, filter: this.props.filter, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday }),
                             ((_b = this.props.value) === null || _b === void 0 ? void 0 : _b.view) !== 'DAY_SELECTION' && (React__namespace.createElement("div", { style: {
                                     left: this.state.activePart === 'from' && '50%',
                                     right: this.state.activePart === 'to' && '50%',
-                                }, className: css$G.blocker }))),
+                                }, className: css$M.blocker }))),
                         this.props.presets && this.renderPresets()),
                     this.props.renderFooter && this.props.renderFooter())));
         };
@@ -1678,11 +1885,11 @@ class RangeDatePickerBody extends React__namespace.Component {
         });
     }
     render() {
-        return (React__namespace.createElement("div", Object.assign({ className: uuiCore.cx(css$G.root, uuiComponents.uuiDatePickerBodyBase.container, this.props.cx) }, this.props.rawProps), this.renderDatePicker()));
+        return (React__namespace.createElement("div", Object.assign({ className: uuiCore.cx(css$M.root, uuiComponents.uuiDatePickerBodyBase.container, this.props.cx) }, this.props.rawProps), this.renderDatePicker()));
     }
 }
 
-var css$F = {"dropdown-container":"w--e3e","container":"sk7oh8","button-group":"bD9LpB","date-input":"CFLGP6","size-24":"iOaoAu","size-30":"UaRawf","size-36":"XAWEW1","size-42":"hXtSQk","size-48":"Ds7vmh","date-input-group":"gTt7GR","separator":"_9uBt6l","mode-form":"-GVDwS","mode-cell":"_2QuYbD","dropdownContainer":"w--e3e","buttonGroup":"bD9LpB","dateInput":"CFLGP6","size24":"iOaoAu","size30":"UaRawf","size36":"XAWEW1","size42":"hXtSQk","size48":"Ds7vmh","dateInputGroup":"gTt7GR","modeForm":"-GVDwS","modeCell":"_2QuYbD"};
+var css$L = {"dropdown-container":"P8hvx7","container":"g-rgzG","button-group":"b4GmUr","date-input":"_2-2M9Y","size-24":"QRGYz9","size-30":"e-W-m3","size-36":"rEeNQJ","size-42":"bA52OF","size-48":"e8L-h-","date-input-group":"tqVphe","separator":"-qvoWt","mode-form":"zypaqY","mode-cell":"JOr0-p","dropdownContainer":"P8hvx7","buttonGroup":"b4GmUr","dateInput":"_2-2M9Y","size24":"QRGYz9","size30":"e-W-m3","size36":"rEeNQJ","size42":"bA52OF","size48":"e8L-h-","dateInputGroup":"tqVphe","modeForm":"zypaqY","modeCell":"JOr0-p"};
 
 const defaultValue = { from: null, to: null };
 class RangeDatePicker extends uuiComponents.BaseRangeDatePicker {
@@ -1701,35 +1908,35 @@ class RangeDatePicker extends uuiComponents.BaseRangeDatePicker {
                     });
                 }
             }
-            return (React__namespace.createElement("div", { className: cx__default.default(this.props.inputCx, css$F.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$F.dateInput, css$F['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$F.separator }),
-                React__namespace.createElement(TextInput, { cx: cx__default.default(css$F.dateInput, css$F['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$L.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$L.dateInput, css$L['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$L.separator }),
+                React__namespace.createElement(TextInput, { cx: cx__default.default(css$L.dateInput, css$L['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$F.dropdownContainer) }),
+        return (React__namespace.createElement(DropdownContainer, Object.assign({}, props, { cx: cx__default.default(css$L.dropdownContainer) }),
             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$E = {"blocker":"dC3FuC","marker":"_2YT-Eg","top":"hg0MN7","bottom":"ovUM-g","left":"UzXWgI","right":"I7LDef","inside":"Gkfvu5"};
+var css$K = {"blocker":"yjIUuA","marker":"trtrnO","top":"zdHyhf","bottom":"Aj4N3E","left":"c1bjoW","right":"Oynlxu","inside":"Q3ai4v"};
 
-class DropMarker extends React__namespace.Component {
-    render() {
-        var _a;
-        return this.props.isDndInProgress ? (React__namespace.createElement(React__namespace.Fragment, null,
-            this.props.enableBlocker && React__namespace.createElement("div", { className: css$E.blocker }),
+function DropMarker(props) {
+    return props.isDndInProgress
+        ? (React__namespace.createElement(React__namespace.Fragment, null,
+            props.enableBlocker && React__namespace.createElement("div", { className: css$K.blocker }),
             React__namespace.createElement("div", { className: cx__default.default([
-                    css$E.marker, css$E[this.props.position],
-                    (_a = this.props) === null || _a === void 0 ? void 0 : _a.cx,
-                ]) }))) : null;
-    }
+                    css$K.marker,
+                    css$K[props.position],
+                    props === null || props === void 0 ? void 0 : props.cx,
+                ]) })))
+        : null;
 }
 
-var css$D = {"body":"uq0uOT","modal":"p2FBxs","search-wrapper":"jQ91Dg","checkbox":"jy3JlD","no-found-size-24":"IJzh3I","no-found-size-30":"_4kYA24","no-found-size-36":"aoM-7A","no-found-size-42":"nf9FvM","searchWrapper":"jQ91Dg","noFoundSize24":"IJzh3I","noFoundSize30":"_4kYA24","noFoundSize36":"aoM-7A","noFoundSize42":"nf9FvM"};
+var css$J = {"body":"kdmBdv","modal":"_6H5O3-","search-wrapper":"GILTWW","checkbox":"UdfrGY","no-found-size-24":"ss9d1z","no-found-size-30":"FWqJss","no-found-size-36":"OTZTdB","no-found-size-42":"A3LN9Y","searchWrapper":"GILTWW","noFoundSize24":"ss9d1z","noFoundSize30":"FWqJss","noFoundSize36":"OTZTdB","noFoundSize42":"A3LN9Y"};
 
 class DataPickerBody extends uuiComponents.PickerBodyBase {
     constructor() {
@@ -1741,16 +1948,16 @@ class DataPickerBody extends uuiComponents.PickerBodyBase {
         if (this.props.renderNotFound) {
             return this.props.renderNotFound();
         }
-        return (React__namespace.default.createElement(uuiComponents.FlexCell, { cx: css$D[`no-found-size-${this.props.searchSize || 36}`], grow: 1, textAlign: "center" },
+        return (React__namespace.default.createElement(uuiComponents.FlexCell, { cx: css$J[`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$D.searchWrapper },
+            this.showSearch() && (React__namespace.default.createElement("div", { key: "search", className: css$J.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$D.body, css$D[this.props.editMode], css$D[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(FlexRow, { key: "body", cx: uuiCore.cx(css$J.body, css$J[this.props.editMode], css$J[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()))));
     }
 }
 
@@ -1784,37 +1991,37 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = React__namespace.default.memo(DataPickerFooterImpl);
 
-var css$C = {"header":"CDKXtt","close":"sGZQR6"};
+var css$I = {"header":"vn-nHs","close":"OMq2PW"};
 
-var _path$x;
-function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
+var _path$A;
+function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
 var SvgNavigationClose24 = function SvgNavigationClose24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$A || (_path$A = /*#__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 12 19 6.41z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$z = /*#__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$C.header },
+    return (React__namespace.default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: css$I.header },
         React__namespace.default.createElement(Text, { size: "48", font: "semibold" }, title),
-        React__namespace.default.createElement(IconButton, { icon: ForwardRef$z, onClick: () => { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$C.close })));
+        React__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$I.close })));
 };
 const DataPickerHeader = React__namespace.default.memo(DataPickerHeaderImpl);
 
 var _defs$1, _use;
-function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
+function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
 var SvgTreeFoldingArrow = function SvgTreeFoldingArrow(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
@@ -1832,19 +2039,19 @@ var SvgTreeFoldingArrow = function SvgTreeFoldingArrow(props, ref) {
     fillRule: "evenodd"
   })));
 };
-var ForwardRef$y = /*#__PURE__*/React.forwardRef(SvgTreeFoldingArrow);
+var ForwardRef$B = /*#__PURE__*/React.forwardRef(SvgTreeFoldingArrow);
 
-var css$B = {"cell":"tqAqfi","wrapper":"E1760N","align-widgets-top":"Q2z69u","size-24":"rMjDJJ","folding-arrow":"_7TPBka","size-30":"sC3Kia","size-36":"jQPYeR","size-42":"C7BHfW","size-48":"_7S6JwL","size-60":"_94-Pz6","align-widgets-center":"ZCIevD","padding-12":"kPOq1r","padding-24":"C1PDIV","padding-left-12":"jlkkrJ","padding-left-24":"S24VNo","padding-right-24":"_7BgoWB","drag-handle":"Z10hL6","checkbox":"QKegLt","indent":"_2rZylT","folding-arrow-12":"_1Od2fR","folding-arrow-18":"Yo1emg","icon-container":"UqRRfs","alignWidgetsTop":"Q2z69u","size24":"rMjDJJ","foldingArrow":"_7TPBka","size30":"sC3Kia","size36":"jQPYeR","size42":"C7BHfW","size48":"_7S6JwL","size60":"_94-Pz6","alignWidgetsCenter":"ZCIevD","padding12":"kPOq1r","padding24":"C1PDIV","paddingLeft12":"jlkkrJ","paddingLeft24":"S24VNo","paddingRight24":"_7BgoWB","dragHandle":"Z10hL6","foldingArrow12":"_1Od2fR","foldingArrow18":"Yo1emg","iconContainer":"UqRRfs"};
+var css$H = {"cell":"LRUyLU","wrapper":"L64u-x","align-widgets-top":"kto44L","size-24":"jNfOwt","folding-arrow":"wly04y","size-30":"ioPNlr","size-36":"_3zFe4p","size-42":"r-3jor","size-48":"bqWV5K","size-60":"V1rsmP","align-widgets-center":"PkBqPA","padding-12":"EfPQH-","padding-24":"ptW8dD","padding-left-12":"_5KAgZv","padding-left-24":"fqGCFt","padding-right-24":"_8yKMp8","drag-handle":"muvtVr","checkbox":"r9WPQG","indent":"xytGRh","folding-arrow-12":"eLfIsA","folding-arrow-18":"SEDGj1","icon-container":"wf6npx","alignWidgetsTop":"kto44L","size24":"jNfOwt","foldingArrow":"wly04y","size30":"ioPNlr","size36":"_3zFe4p","size42":"r-3jor","size48":"bqWV5K","size60":"V1rsmP","alignWidgetsCenter":"PkBqPA","padding12":"EfPQH-","padding24":"ptW8dD","paddingLeft12":"_5KAgZv","paddingLeft24":"fqGCFt","paddingRight24":"_8yKMp8","dragHandle":"muvtVr","foldingArrow12":"eLfIsA","foldingArrow18":"SEDGj1","iconContainer":"wf6npx"};
 
 function DataTableRowAddons(props) {
     var _a, _b;
     const row = props.rowProps;
     const additionalItemSize = +props.size < 30 ? '12' : '18';
     return (React__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$B.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$B.checkbox, tabIndex: props.tabIndex, size: additionalItemSize, value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => { var _a; return (_a = row.onCheck) === null || _a === void 0 ? void 0 : _a.call(row, row); }, isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
-        row.indent > 0 && (React__namespace.createElement("div", { key: "fold", className: css$B.indent, style: { marginLeft: (row.indent - 1) * 24 } }, row.isFoldable && (React__namespace.createElement(uuiComponents.IconContainer, { key: "icon", icon: ForwardRef$y, cx: [
-                css$B.foldingArrow, css$B[`folding-arrow-${additionalItemSize}`], uuiCore.uuiMarkers.clickable, css$B.iconContainer,
+        ((_a = row.dnd) === null || _a === void 0 ? void 0 : _a.srcData) && React__namespace.createElement(uuiComponents.DragHandle, { key: "dh", cx: css$H.dragHandle }),
+        ((_b = row === null || row === void 0 ? void 0 : row.checkbox) === null || _b === void 0 ? void 0 : _b.isVisible) && (React__namespace.createElement(Checkbox, { key: "cb", cx: css$H.checkbox, tabIndex: props.tabIndex, size: additionalItemSize, value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => { var _a; return (_a = row.onCheck) === null || _a === void 0 ? void 0 : _a.call(row, row); }, isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
+        row.indent > 0 && (React__namespace.createElement("div", { key: "fold", className: css$H.indent, style: { marginLeft: (row.indent - 1) * 24 } }, row.isFoldable && (React__namespace.createElement(uuiComponents.IconContainer, { key: "icon", icon: ForwardRef$B, cx: [
+                css$H.foldingArrow, css$H[`folding-arrow-${additionalItemSize}`], uuiCore.uuiMarkers.clickable, css$H.iconContainer,
             ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row) }))))));
 }
 function DataTableCell(props) {
@@ -1862,18 +2069,18 @@ function DataTableCell(props) {
     props.cx = [
         'data-table-cell',
         props.cx,
-        css$B.cell,
-        css$B['size-' + (props.size || '36')],
-        css$B[`padding-${props.padding || (isEditable && !props.rowProps.isLoading && '0') || '12'}`],
-        props.isFirstColumn && css$B[`padding-left-${props.padding || '24'}`],
-        props.isLastColumn && css$B['padding-right-24'],
-        css$B[`align-widgets-${props.alignActions || 'top'}`],
+        css$H.cell,
+        css$H['size-' + (props.size || '36')],
+        css$H[`padding-${props.padding || (isEditable && !props.rowProps.isLoading && '0') || '12'}`],
+        props.isFirstColumn && css$H[`padding-left-${props.padding || (isEditable && !props.rowProps.isLoading && '12') || '24'}`],
+        props.isLastColumn && css$H['padding-right-24'],
+        css$H[`align-widgets-${props.alignActions || 'top'}`],
         (props.border || isEditable) && 'uui-dt-vertical-cell-border',
     ];
     return React__namespace.createElement(uuiComponents.DataTableCell, Object.assign({}, props));
 }
 
-var css$A = {"root":"fb2ihd","size-24":"z-iTGw","size-30":"VCzpAz","size-36":"-R2j8g","size-48":"yotvwY","size-60":"xy-O8J","size24":"z-iTGw","size30":"VCzpAz","size36":"-R2j8g","size48":"yotvwY","size60":"xy-O8J"};
+var css$G = {"root":"S40yph","size-24":"_5pj1iP","size-30":"usSUJj","size-36":"O0TPr6","size-48":"rsdNNq","size-60":"YkEOBb","size24":"_5pj1iP","size30":"usSUJj","size36":"O0TPr6","size48":"rsdNNq","size60":"YkEOBb"};
 
 // Here we define a single instance of the renderCell function to make DataTableRow#shouldComponentUpdate work.
 // As we need our mods to style the cell properly, we extract them from DataTableCellProps.rowProps, which is a hack, but it's reliable enough.
@@ -1885,137 +2092,137 @@ const renderDropMarkers = (props) => React__namespace.createElement(DropMarker,
 const propsMods = { renderCell, renderDropMarkers };
 const DataTableRow = uuiCore.withMods(uuiComponents.DataTableRow, ({ borderBottom = true, size }) => {
     return [
-        css$A.root, borderBottom && 'uui-dt-row-border', css$A['size-' + (size || '36')],
+        css$G.root, borderBottom && 'uui-dt-row-border', css$G['size-' + (size || '36')],
     ];
 }, () => propsMods);
 
-var css$z = {"header-cell":"g6CMu5","config-icon":"QAzGVb","headerCell":"g6CMu5","configIcon":"QAzGVb"};
+var css$F = {"header-cell":"rlOCKc","config-icon":"B7I0Fe","headerCell":"rlOCKc","configIcon":"B7I0Fe"};
 
-var _path$w;
-function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
+var _path$z;
+function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
 var SvgActionSettings18 = function SvgActionSettings18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$z || (_path$z = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M3 9.093a6.083 6.083 0 0 1 0-.186L1.55 7.271a1 1 0 0 1-.118-1.163l1.28-2.216a1 1 0 0 1 1.066-.48l2.14.439a3.81 3.81 0 0 1 .163-.094l.691-2.073A1 1 0 0 1 7.721 1h2.558a1 1 0 0 1 .949.684l.69 2.073c.056.03.11.061.163.094l2.141-.439a1 1 0 0 1 1.067.48l1.279 2.216a1 1 0 0 1-.118 1.163L15 8.907a5.72 5.72 0 0 1 0 .186l1.45 1.636a1 1 0 0 1 .118 1.163l-1.28 2.216a1 1 0 0 1-1.066.48l-2.14-.438a6.215 6.215 0 0 1-.163.093l-.691 2.073a1 1 0 0 1-.949.684H7.721a1 1 0 0 1-.949-.684l-.69-2.073a6.105 6.105 0 0 1-.163-.094l-2.141.439a1 1 0 0 1-1.067-.48l-1.279-2.216a1 1 0 0 1 .118-1.163L3 9.093zM9 12a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$x = /*#__PURE__*/React.forwardRef(SvgActionSettings18);
+var ForwardRef$A = /*#__PURE__*/React.forwardRef(SvgActionSettings18);
 
-const DataTableHeaderRow = uuiCore.withMods(uuiComponents.DataTableHeaderRow, () => [css$z.root], (mods) => ({
+const DataTableHeaderRow = uuiCore.withMods(uuiComponents.DataTableHeaderRow, () => [css$F.root], (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$z.configIcon, color: "default", icon: ForwardRef$x }),
+    renderConfigButton: () => React__namespace.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: css$F.configIcon, color: "default", icon: ForwardRef$A }),
 }));
 
-var css$y = {"cell":"hHIRg7","sort-icon":"CQI7gI","dropdown-icon":"DKkbGc","infoIcon":"ADTljJ","resizable":"-rmKiX","size-24":"mqi6MF","size-30":"K5o3l0","size-36":"kdQInh","size-42":"zzCSLc","size-48":"wFoUcB","padding-left-24":"_1FbHeh","padding-right-24":"_2v2hgZ","caption":"sqm2Eb","checkbox":"XMjsec","icon":"OKh2sH","icon-cell":"qU-t3-","align-right":"AY1DSj","align-center":"MRlJaG","tooltip-wrapper":"Ycz1mF","cell-tooltip":"g4NQw5","upper-case":"OjIbb1","font-size-14":"DCiOb8","resize-mark":"zh0cba","draggable":"Ixvc8Q","ghost":"OoZk9e","is-dragged-out":"CH5UvB","dnd-marker-left":"TU-Q0M","dnd-marker-right":"xllBbg","cell-tooltip-wrapper":"mG9mHW","cell-tooltip-text":"mIfpev","sortIcon":"CQI7gI","dropdownIcon":"DKkbGc","size24":"mqi6MF","size30":"K5o3l0","size36":"kdQInh","size42":"zzCSLc","size48":"wFoUcB","paddingLeft24":"_1FbHeh","paddingRight24":"_2v2hgZ","iconCell":"qU-t3-","alignRight":"AY1DSj","alignCenter":"MRlJaG","tooltipWrapper":"Ycz1mF","cellTooltip":"g4NQw5","upperCase":"OjIbb1","fontSize14":"DCiOb8","resizeMark":"zh0cba","isDraggedOut":"CH5UvB","dndMarkerLeft":"TU-Q0M","dndMarkerRight":"xllBbg","cellTooltipWrapper":"mG9mHW","cellTooltipText":"mIfpev"};
+var css$E = {"cell":"DF-Vsz","sort-icon":"l4IOvb","dropdown-icon":"PWI4uz","infoIcon":"DD45AD","resizable":"ZUiCk0","size-24":"SEb7MX","size-30":"PYODSm","size-36":"ntfb-w","size-42":"jNJ6w5","size-48":"Qf1PqB","padding-left-24":"_8KrTNj","padding-right-24":"MimAfu","caption":"vGtIVj","checkbox":"_6vDzvE","icon":"sIkwLb","icon-cell":"_8aWUyJ","align-right":"gWhw4c","align-center":"tm0EBf","tooltip-wrapper":"P5CsnT","cell-tooltip":"Qnbu-P","upper-case":"hESSRh","font-size-14":"hz8RvU","resize-mark":"brEAnP","draggable":"I2yo9H","ghost":"yCoBOI","is-dragged-out":"sybWkA","dnd-marker-left":"DLabjo","dnd-marker-right":"Cz5-3v","cell-tooltip-wrapper":"-FME4L","cell-tooltip-text":"OVpd1a","sortIcon":"l4IOvb","dropdownIcon":"PWI4uz","size24":"SEb7MX","size30":"PYODSm","size36":"ntfb-w","size42":"jNJ6w5","size48":"Qf1PqB","paddingLeft24":"_8KrTNj","paddingRight24":"MimAfu","iconCell":"_8aWUyJ","alignRight":"gWhw4c","alignCenter":"tm0EBf","tooltipWrapper":"P5CsnT","cellTooltip":"Qnbu-P","upperCase":"hESSRh","fontSize14":"hz8RvU","resizeMark":"brEAnP","isDraggedOut":"sybWkA","dndMarkerLeft":"DLabjo","dndMarkerRight":"Cz5-3v","cellTooltipWrapper":"-FME4L","cellTooltipText":"OVpd1a"};
 
-var _path$v;
-function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
+var _path$y;
+function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
 var SvgTableSwap18 = function SvgTableSwap18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
+  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$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$y || (_path$y = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M6 1 2 5h3v7h2V5h3L6 1zm7 12V6h-2v7H8l4 4 4-4h-3z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$w = /*#__PURE__*/React.forwardRef(SvgTableSwap18);
+var ForwardRef$z = /*#__PURE__*/React.forwardRef(SvgTableSwap18);
 
-var _path$u;
-function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
+var _path$x;
+function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
 var SvgTableSortAsc18 = function SvgTableSortAsc18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M10 6v10H8V6H5l4-4 4 4h-3z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$v = /*#__PURE__*/React.forwardRef(SvgTableSortAsc18);
+var ForwardRef$y = /*#__PURE__*/React.forwardRef(SvgTableSortAsc18);
 
-var _path$t;
-function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
+var _path$w;
+function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
 var SvgTableSortDesc18 = function SvgTableSortDesc18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M10 12V2H8v10H5l4 4 4-4h-3z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$u = /*#__PURE__*/React.forwardRef(SvgTableSortDesc18);
+var ForwardRef$x = /*#__PURE__*/React.forwardRef(SvgTableSortDesc18);
 
-var _path$s;
-function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
+var _path$v;
+function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
 var SvgContentFiltration18 = function SvgContentFiltration18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "m8 14 2 2v-5H8v3zM2 3v2h14V3H2zm6 8h2l6-6H2l6 6z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$t = /*#__PURE__*/React.forwardRef(SvgContentFiltration18);
+var ForwardRef$w = /*#__PURE__*/React.forwardRef(SvgContentFiltration18);
 
-var _path$r;
-function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
+var _path$u;
+function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
 var SvgNavigationChevronDown18 = function SvgNavigationChevronDown18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__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$s = /*#__PURE__*/React.forwardRef(SvgNavigationChevronDown18);
+var ForwardRef$v = /*#__PURE__*/React.forwardRef(SvgNavigationChevronDown18);
 
-var _path$q;
-function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
+var _path$t;
+function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
 var SvgNavigationChevronUp18 = function SvgNavigationChevronUp18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "m9 6-4.5 4.5 1.058 1.057L9 8.123l3.443 3.434L13.5 10.5 9 6z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$r = /*#__PURE__*/React.forwardRef(SvgNavigationChevronUp18);
+var ForwardRef$u = /*#__PURE__*/React.forwardRef(SvgNavigationChevronUp18);
 
 class DataTableHeaderCell extends React__namespace.Component {
     constructor() {
@@ -2025,29 +2232,29 @@ class DataTableHeaderCell extends React__namespace.Component {
         };
         this.getTextStyle = () => {
             if (this.props.textCase === 'upper')
-                return css$y.upperCase;
-            return css$y['font-size-14'];
+                return css$E.upperCase;
+            return css$E['font-size-14'];
         };
-        this.getTooltipContent = () => (React__namespace.createElement("div", { className: css$y.cellTooltipWrapper },
-            React__namespace.createElement(Text, { fontSize: "14", color: "contrast", font: "semibold", cx: css$y.cellTooltipText }, this.props.column.caption),
-            this.props.column.info && React__namespace.createElement(Text, { fontSize: "12", color: "contrast", cx: css$y.cellTooltipText }, this.props.column.info)));
+        this.getTooltipContent = () => (React__namespace.createElement("div", { className: css$E.cellTooltipWrapper },
+            React__namespace.createElement(Text, { fontSize: "14", color: "contrast", font: "semibold", cx: css$E.cellTooltipText }, this.props.column.caption),
+            this.props.column.info && React__namespace.createElement(Text, { fontSize: "12", color: "contrast", cx: css$E.cellTooltipText }, this.props.column.info)));
         this.getColumnCaption = () => {
-            return (React__namespace.createElement("div", { className: css$y.tooltipWrapper },
-                React__namespace.createElement("div", { className: uuiCore.cx(css$y.iconCell, css$y['align-' + this.props.column.textAlign], uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
-                    React__namespace.createElement(Tooltip, { placement: "top", color: "contrast", renderContent: this.getTooltipContent, cx: css$y.cellTooltip, openDelay: 600 },
-                        React__namespace.createElement(Text, { key: "text", lineHeight: "30", fontSize: "14", size: "30", cx: uuiCore.cx(css$y.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$y.icon, css$y.sortIcon, this.props.sortDirection && css$y.sortIconActive, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: this.props.sortDirection ? 'default' : 'secondary', icon: this.props.sortDirection === 'desc' ? ForwardRef$u : this.props.sortDirection === 'asc' ? ForwardRef$v : ForwardRef$w })),
-                    this.props.isFilterActive && (React__namespace.createElement(IconButton, { key: "filter", cx: uuiCore.cx(css$y.icon, !this.props.sortDirection && css$y.filterIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "default", icon: ForwardRef$t })),
-                    this.props.column.renderFilter && (React__namespace.createElement(IconButton, { key: "dropdown", cx: uuiCore.cx(css$y.icon, css$y.dropdownIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), color: "secondary", icon: this.state.isDropdownOpen ? ForwardRef$r : ForwardRef$s })))));
+            return (React__namespace.createElement("div", { className: css$E.tooltipWrapper },
+                React__namespace.createElement("div", { className: uuiCore.cx(css$E.iconCell, css$E['align-' + this.props.column.textAlign], uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
+                    React__namespace.createElement(Tooltip, { placement: "top", color: "contrast", renderContent: this.getTooltipContent, cx: css$E.cellTooltip, openDelay: 600 },
+                        React__namespace.createElement(Text, { key: "text", lineHeight: "30", fontSize: "14", size: "30", cx: uuiCore.cx(css$E.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$E.icon, css$E.sortIcon, this.props.sortDirection && css$E.sortIconActive, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: this.props.sortDirection ? 'default' : 'secondary', icon: this.props.sortDirection === 'desc' ? ForwardRef$x : this.props.sortDirection === 'asc' ? ForwardRef$y : ForwardRef$z })),
+                    this.props.isFilterActive && (React__namespace.createElement(IconButton, { key: "filter", cx: uuiCore.cx(css$E.icon, !this.props.sortDirection && css$E.filterIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "default", icon: ForwardRef$w })),
+                    this.props.column.renderFilter && (React__namespace.createElement(IconButton, { key: "dropdown", cx: uuiCore.cx(css$E.icon, css$E.dropdownIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), color: "secondary", icon: this.state.isDropdownOpen ? ForwardRef$u : ForwardRef$v })))));
         };
         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$y.checkbox, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCheckbox) })));
-        this.renderResizeMark = (props) => React__namespace.createElement("div", { onMouseDown: props.onResizeStart, className: uuiCore.cx(css$y.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$E.checkbox, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCheckbox) })));
+        this.renderResizeMark = (props) => React__namespace.createElement("div", { onMouseDown: props.onResizeStart, className: uuiCore.cx(css$E.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$y.cell, css$y['size-' + (this.props.size || '36')], this.props.isFirstColumn && css$y['padding-left-24'], this.props.isLastColumn && css$y['padding-right-24'], this.props.column.cx, this.props.allowColumnsResizing && css$y.resizable, props.isDraggable && css$y.draggable, props.isDragGhost && css$y.ghost, props.isDraggedOut && css$y.isDraggedOut, props.isDndInProgress && css$y['dnd-marker-' + props.position]), onClick: !this.props.column.renderFilter ? props.toggleSort : dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.onClick, rawProps: Object.assign({ role: 'columnheader', 'aria-sort': this.props.sortDirection === 'asc' ? 'ascending' : this.props.sortDirection ? 'descending' : 'none' }, props.eventHandlers) }),
+            }, cx: uuiCore.cx(uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiCore.uuiMarkers.clickable, css$E.cell, css$E['size-' + (this.props.size || '36')], this.props.isFirstColumn && css$E['padding-left-24'], this.props.isLastColumn && css$E['padding-right-24'], this.props.column.cx, this.props.allowColumnsResizing && css$E.resizable, props.isDraggable && css$E.draggable, props.isDragGhost && css$E.ghost, props.isDraggedOut && css$E.isDraggedOut, props.isDndInProgress && css$E['dnd-marker-' + props.position]), onClick: !this.props.column.renderFilter ? props.toggleSort : dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.onClick, rawProps: Object.assign({ role: 'columnheader', 'aria-sort': this.props.sortDirection === 'asc' ? 'ascending' : this.props.sortDirection ? 'descending' : 'none' }, props.eventHandlers) }),
             this.renderHeaderCheckbox(),
             this.getColumnCaption(),
             this.props.allowColumnsResizing && this.renderResizeMark(props)));
@@ -2084,10 +2291,10 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var _path$p, _path2$1, _path3, _path4, _path5, _path6, _g$1, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14, _path15, _path16, _path17, _path18, _path19, _path20, _path21, _path22, _path23, _path24, _defs;
-function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
+var _path$s, _path2$1, _path3, _path4, _path5, _path6, _g$1, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14, _path15, _path16, _path17, _path18, _path19, _path20, _path21, _path22, _path23, _path24, _defs;
+function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
 var SvgEmptyTable = function SvgEmptyTable(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     width: 232,
     height: 180,
     viewBox: "0 0 232 180",
@@ -2096,7 +2303,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     ref: ref
   }, props), /*#__PURE__*/React__namespace.createElement("g", {
     clipPath: "url(#a)"
-  }, _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
+  }, _path$s || (_path$s = /*#__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"
   })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -2222,9 +2429,9 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M0 0h230.897v180H0z"
   })))));
 };
-var ForwardRef$q = /*#__PURE__*/React.forwardRef(SvgEmptyTable);
+var ForwardRef$t = /*#__PURE__*/React.forwardRef(SvgEmptyTable);
 
-var css$x = {"sticky-header":"VL-0eK","listContainer":"_587nR1","table":"LnNYhH","no-results":"vtJsxI","no-results-icon":"cdNV5l","no-results-title":"Jhu6ty","stickyHeader":"VL-0eK","noResults":"vtJsxI","noResultsIcon":"cdNV5l","noResultsTitle":"Jhu6ty"};
+var css$D = {"sticky-header":"vFzD-l","listContainer":"nZrRM-","table":"kADCE-","no-results":"KCdr2X","no-results-icon":"eMnr02","no-results-title":"_0cZiHG","stickyHeader":"vFzD-l","noResults":"KCdr2X","noResultsIcon":"eMnr02","noResultsTitle":"_0cZiHG"};
 
 function DataTable(props) {
     var _a;
@@ -2238,9 +2445,9 @@ function DataTable(props) {
     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$x.noResults }, props.renderNoResultsBlock ? ((_a = props.renderNoResultsBlock) === null || _a === void 0 ? void 0 : _a.call(props)) : (React__namespace.createElement(React__namespace.Fragment, null,
-            React__namespace.createElement(uuiComponents.IconContainer, { cx: css$x.noResultsIcon, icon: ForwardRef$q }),
-            React__namespace.createElement(Text, { cx: css$x.noResultsTitle, fontSize: "24", lineHeight: "30", color: "primary", font: "semibold" }, i18n.tables.noResultsBlock.title),
+        return (React__namespace.createElement("div", { className: css$D.noResults }, props.renderNoResultsBlock ? ((_a = props.renderNoResultsBlock) === null || _a === void 0 ? void 0 : _a.call(props)) : (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement(uuiComponents.IconContainer, { cx: css$D.noResultsIcon, icon: ForwardRef$t }),
+            React__namespace.createElement(Text, { cx: css$D.noResultsTitle, fontSize: "24", lineHeight: "30", color: "primary", font: "semibold" }, i18n.tables.noResultsBlock.title),
             React__namespace.createElement(Text, { fontSize: "16", lineHeight: "24", font: "regular", color: "primary" }, i18n.tables.noResultsBlock.message)))));
     }, [props.renderNoResultsBlock]);
     const onConfigurationButtonClick = React__namespace.useCallback(() => {
@@ -2257,107 +2464,107 @@ 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$x.stickyHeader },
+        React__namespace.createElement("div", { className: css$D.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 }),
             React__namespace.createElement("div", { className: uuiCore.cx(uuiCore.uuiScrollShadows.top, {
                     [uuiCore.uuiScrollShadows.topVisible]: scrollShadows.verticalTop,
                 }) })),
-        props.exactRowsCount !== 0 ? (React__namespace.createElement("div", { className: css$x.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+        props.exactRowsCount !== 0 ? (React__namespace.createElement("div", { className: css$D.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, 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$x.table), rawProps: {
+        React__namespace.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rows: renderedRows, rowsCount: props.rowsCount, renderRows: renderRowsContainer, cx: uuiCore.cx(css$D.table), rawProps: {
                 role: 'table',
                 'aria-colcount': columns.length,
                 'aria-rowcount': props.rowsCount,
             } })));
 }
 
-var styles$1 = {"main-panel":"zUX5v-","group-title":"gHaChT","group-title-text":"_8-d1Fl","group-title-badge":"OE-LsD","group-items":"OOyTx-","no-data":"POyfdU","h-divider":"CH5GrH","search-area":"mZpfzi","mainPanel":"zUX5v-","groupTitle":"gHaChT","groupTitleText":"_8-d1Fl","groupTitleBadge":"OE-LsD","groupItems":"OOyTx-","noData":"POyfdU","hDivider":"CH5GrH","searchArea":"mZpfzi"};
+var styles$1 = {"main-panel":"F3PNdW","group-title":"ih8r1t","group-title-text":"_4KbiKh","group-title-badge":"l3tzL8","group-items":"K5pUMA","no-data":"PYJ-FM","h-divider":"UGBbqc","search-area":"XMkpLh","mainPanel":"F3PNdW","groupTitle":"ih8r1t","groupTitleText":"_4KbiKh","groupTitleBadge":"l3tzL8","groupItems":"K5pUMA","noData":"PYJ-FM","hDivider":"UGBbqc","searchArea":"XMkpLh"};
 
-var _path$o;
-function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
+var _path$r;
+function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
 var SvgNavigationMoreVert18 = function SvgNavigationMoreVert18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__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$p = /*#__PURE__*/React.forwardRef(SvgNavigationMoreVert18);
+var ForwardRef$s = /*#__PURE__*/React.forwardRef(SvgNavigationMoreVert18);
 
-var _path$n;
-function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
+var _path$q;
+function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
 var SvgActionUpdate18 = function SvgActionUpdate18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__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",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$o = /*#__PURE__*/React.forwardRef(SvgActionUpdate18);
+var ForwardRef$r = /*#__PURE__*/React.forwardRef(SvgActionUpdate18);
 
-var _path$m;
-function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
+var _path$p;
+function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
 var SvgActionLockFill18 = function SvgActionLockFill18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M5 7V5a4 4 0 1 1 8 0v2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2zm2 0h4V5a2 2 0 1 0-4 0v2zm2 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$n = /*#__PURE__*/React.forwardRef(SvgActionLockFill18);
+var ForwardRef$q = /*#__PURE__*/React.forwardRef(SvgActionLockFill18);
 
-var _path$l;
-function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
+var _path$o;
+function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
 var SvgActionPinOn18 = function SvgActionPinOn18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M12 9V3h1V2H5v1h1v6l-2 1v1h4v5h2v-5h4v-1l-2-1z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$m = /*#__PURE__*/React.forwardRef(SvgActionPinOn18);
+var ForwardRef$p = /*#__PURE__*/React.forwardRef(SvgActionPinOn18);
 
-var _path$k;
-function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
+var _path$n;
+function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
 var SvgActionPinOff18 = function SvgActionPinOff18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M6 4.586 12.414 11H14v-1l-2-1V3h1V2H5v1h1v1.586zM10 16v-4.586l3.743 3.743.707-.707L3.136 3.136l-.707.707L6 7.414V9l-2 1v1h4v5h2z"
   })));
 };
-var ForwardRef$l = /*#__PURE__*/React.forwardRef(SvgActionPinOff18);
+var ForwardRef$o = /*#__PURE__*/React.forwardRef(SvgActionPinOff18);
 
 const i18nLocal = i18n.tables.columnsConfigurationModal;
 function PinIconButton(props) {
@@ -2372,12 +2579,12 @@ function PinIconButton(props) {
     }, [isPinned, isPinnedAlways]);
     const pinIcon = React.useMemo(() => {
         if (isPinnedAlways) {
-            return ForwardRef$n;
+            return ForwardRef$q;
         }
         if (isPinned) {
-            return isHovered ? ForwardRef$l : ForwardRef$m;
+            return isHovered ? ForwardRef$o : ForwardRef$p;
         }
-        return ForwardRef$m;
+        return ForwardRef$p;
     }, [
         isPinnedAlways, isHovered, isPinned,
     ]);
@@ -2387,7 +2594,7 @@ function PinIconButton(props) {
             React__namespace.createElement(IconButton, { icon: pinIcon, onClick: pinClickHandler, isDisabled: isPinnedAlways, color: isPinned ? 'info' : undefined }))));
 }
 
-var styles = {"row-wrapper":"_4Cx-GQ","not-pinned":"_0Sg6VE","pin-icon-button":"VeYp-c","drag-handle":"l4q8M0","dnd-disabled":"xGPfc7","rowWrapper":"_4Cx-GQ","notPinned":"_0Sg6VE","pinIconButton":"VeYp-c","dragHandle":"l4q8M0","dndDisabled":"xGPfc7"};
+var styles = {"row-wrapper":"_65bIkl","not-pinned":"JGNbxn","pin-icon-button":"nEzEDM","drag-handle":"hNKRL6","dnd-disabled":"LdmK4o","rowWrapper":"_65bIkl","notPinned":"JGNbxn","pinIconButton":"nEzEDM","dragHandle":"hNKRL6","dndDisabled":"LdmK4o"};
 
 const ColumnRow = React__namespace.memo(function ColumnRow(props) {
     const { column } = props;
@@ -2458,7 +2665,7 @@ function ColumnsConfigurationModal(props) {
                 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(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, { mode: "none", icon: ForwardRef$p, size: "30", color: "secondary", isDropdown: false })) })),
+                        React__namespace.createElement(DropdownMenuButton, { caption: i18n$1.selectAllButton, onClick: checkAll }))), renderTarget: (props) => React__namespace.createElement(Button, Object.assign({}, props, { mode: "none", icon: ForwardRef$s, size: "30", color: "secondary", isDropdown: false })) })),
             React__namespace.createElement(Panel, { cx: styles$1.mainPanel },
                 React__namespace.createElement(ScrollBars, null,
                     renderVisible(),
@@ -2467,22 +2674,22 @@ 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$o, 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, { mode: "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$w = {"panel":"DGd1K6"};
+var css$C = {"panel":"gUwBYI"};
 
-var css$v = {"sorting-panel-container":"iq6R2c","sort-active":"_6YLwSW","sortingPanelContainer":"iq6R2c","sortActive":"_6YLwSW"};
+var css$B = {"sorting-panel-container":"UFNhPW","sort-active":"nA1ZnC","sortingPanelContainer":"UFNhPW","sortActive":"nA1ZnC"};
 
 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$v.sortingPanelContainer },
-        React__namespace.default.createElement(DropdownMenuButton, { isActive: sortDirection === 'asc', caption: i18n.pickerFilterHeader.sortAscending, icon: ForwardRef$v, onClick: sortAsc }),
-        React__namespace.default.createElement(DropdownMenuButton, { isActive: sortDirection === 'desc', caption: i18n.pickerFilterHeader.sortDescending, icon: ForwardRef$u, onClick: sortDesc })));
+    return (React__namespace.default.createElement(FlexCell, { cx: css$B.sortingPanelContainer },
+        React__namespace.default.createElement(DropdownMenuButton, { isActive: sortDirection === 'asc', caption: i18n.pickerFilterHeader.sortAscending, icon: ForwardRef$y, onClick: sortAsc }),
+        React__namespace.default.createElement(DropdownMenuButton, { isActive: sortDirection === 'desc', caption: i18n.pickerFilterHeader.sortDescending, icon: ForwardRef$x, onClick: sortDesc })));
 };
 const SortingPanel = React__namespace.default.memo(SortingPanelImpl);
 
@@ -2497,63 +2704,63 @@ 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$w.panel },
+    return (React__namespace.default.createElement(uuiComponents.Dropdown, { renderTarget: props.renderTarget, renderBody: (dropdownProps) => (React__namespace.default.createElement(Panel, { style: style, shadow: true, cx: css$C.panel },
             React__namespace.default.createElement(MobileDropdownWrapper, { title: props.title, close: 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 _path$j;
-function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+var _path$m;
+function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
 var SvgNotificationDone24 = function SvgNotificationDone24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$m || (_path$m = /*#__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$k = /*#__PURE__*/React.forwardRef(SvgNotificationDone24);
+var ForwardRef$n = /*#__PURE__*/React.forwardRef(SvgNotificationDone24);
 
-var _path$i;
-function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
+var _path$l;
+function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
 var SvgNotificationDone18 = function SvgNotificationDone18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__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$j = /*#__PURE__*/React.forwardRef(SvgNotificationDone18);
+var ForwardRef$m = /*#__PURE__*/React.forwardRef(SvgNotificationDone18);
 
-var _path$h;
-function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
+var _path$k;
+function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
 var SvgNotificationDone12 = function SvgNotificationDone12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__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$i = /*#__PURE__*/React.forwardRef(SvgNotificationDone12);
+var ForwardRef$l = /*#__PURE__*/React.forwardRef(SvgNotificationDone12);
 
-var css$u = {"render-item":"W4PdFC","icon-wrapper":"K883JD","picker-row":"Ih7-WV","icon-default":"_2iAJUp","icon-primary":"dhTk9b","renderItem":"W4PdFC","iconWrapper":"K883JD","pickerRow":"Ih7-WV","iconDefault":"_2iAJUp","iconPrimary":"dhTk9b"};
+var css$A = {"render-item":"_56ou4X","icon-wrapper":"Re5fdX","picker-row":"MhcFu0","icon-default":"MnTBQq","icon-primary":"F6B77G","renderItem":"_56ou4X","iconWrapper":"Re5fdX","pickerRow":"MhcFu0","iconDefault":"MnTBQq","iconPrimary":"F6B77G"};
 
 class DataPickerRow extends React__namespace.Component {
     constructor() {
@@ -2561,37 +2768,37 @@ class DataPickerRow extends React__namespace.Component {
         this.getIcon = (size) => {
             switch (size) {
                 case '24':
-                    return ForwardRef$i;
+                    return ForwardRef$l;
                 case '30':
-                    return ForwardRef$j;
+                    return ForwardRef$m;
                 case '36':
-                    return ForwardRef$j;
+                    return ForwardRef$m;
                 case '42':
-                    return ForwardRef$k;
+                    return ForwardRef$n;
                 default:
-                    return ForwardRef$j;
+                    return ForwardRef$m;
             }
         };
         this.column = {
             key: 'name',
             grow: 1,
             width: 0,
-            render: (item, rowProps) => (React__namespace.createElement("div", { key: rowProps.id, className: css$u.renderItem },
+            render: (item, rowProps) => (React__namespace.createElement("div", { key: rowProps.id, className: css$A.renderItem },
                 this.props.renderItem(item, rowProps),
                 React__namespace.createElement(uuiComponents.FlexSpacer, null),
-                (rowProps.isChildrenSelected || rowProps.isSelected) && (React__namespace.createElement("div", { className: css$u.iconWrapper },
-                    React__namespace.createElement(uuiComponents.IconContainer, { icon: this.getIcon(this.props.size), cx: rowProps.isChildrenSelected ? css$u.iconDefault : css$u.iconPrimary }))))),
+                (rowProps.isChildrenSelected || rowProps.isSelected) && (React__namespace.createElement("div", { className: css$A.iconWrapper },
+                    React__namespace.createElement(uuiComponents.IconContainer, { icon: this.getIcon(this.props.size), cx: rowProps.isChildrenSelected ? css$A.iconDefault : css$A.iconPrimary }))))),
         };
         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$u.pickerRow, this.props.cx], renderContent: this.renderContent }));
+        return React__namespace.createElement(uuiComponents.DataPickerRow, Object.assign({}, this.props, { cx: [css$A.pickerRow, this.props.cx], renderContent: this.renderContent }));
     }
 }
 
-var css$t = {"done":"-q1cRj"};
+var css$z = {"done":"EHimj8"};
 
 const MobileDropdownWrapper = (props) => {
     const isVisible = uuiCore.isMobile();
@@ -2599,22 +2806,22 @@ const MobileDropdownWrapper = (props) => {
     return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
         isVisible && React__namespace.default.createElement(DataPickerHeader, { title: props.title, close: props.close }),
         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$t.done, size: "48" })));
+        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$z.done, size: "48" })));
 };
 
-var css$s = {"sub-header-wrapper":"cy3T0L","switch":"Vs2XjI","no-found-modal-container":"NohGhO","no-found-modal-container-icon":"_0furH-","no-found-modal-container-text":"wpy72v","subHeaderWrapper":"cy3T0L","$switch$":"Vs2XjI","noFoundModalContainer":"NohGhO","noFoundModalContainerIcon":"_0furH-","noFoundModalContainerText":"wpy72v"};
+var css$y = {"sub-header-wrapper":"JMiMXn","switch":"RPpi5V","no-found-modal-container":"K5hYpI","no-found-modal-container-icon":"DU1y-5","no-found-modal-container-text":"RmyHHB","subHeaderWrapper":"JMiMXn","$switch$":"RPpi5V","noFoundModalContainer":"K5hYpI","noFoundModalContainerIcon":"DU1y-5","noFoundModalContainerText":"RmyHHB"};
 
-var _path$g, _path2;
-function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
+var _path$j, _path2;
+function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
 var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
     width: 66,
     height: 67,
     viewBox: "0 0 66 67",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__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 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -2624,16 +2831,16 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
     fill: "#6C6F80"
   })));
 };
-var ForwardRef$h = /*#__PURE__*/React.forwardRef(SvgSearchWithBackground);
+var ForwardRef$k = /*#__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$s.noFoundModalContainer },
-                React__namespace.createElement(uuiComponents.IconContainer, { cx: css$s.noFoundModalContainerIcon, icon: ForwardRef$h }),
-                React__namespace.createElement(Text, { cx: css$s.noFoundModalContainerText, font: "semibold", fontSize: "16", lineHeight: "24", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsMessage),
-                React__namespace.createElement(Text, { cx: css$s.noFoundModalContainerText, fontSize: "12", lineHeight: "18", font: "regular", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsSubTitle)));
+            return this.props.renderNotFound ? (this.props.renderNotFound({ search: this.state.dataSourceState.search, onClose: () => this.props.success(null) })) : (React__namespace.createElement("div", { className: css$y.noFoundModalContainer },
+                React__namespace.createElement(uuiComponents.IconContainer, { cx: css$y.noFoundModalContainerIcon, icon: ForwardRef$k }),
+                React__namespace.createElement(Text, { cx: css$y.noFoundModalContainerText, font: "semibold", fontSize: "16", lineHeight: "24", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsMessage),
+                React__namespace.createElement(Text, { cx: css$y.noFoundModalContainerText, fontSize: "12", lineHeight: "18", font: "regular", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsSubTitle)));
         };
     }
     renderRow(rowProps) {
@@ -2655,7 +2862,7 @@ class PickerModalImpl extends uuiComponents.PickerModalBase {
         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$s.subHeaderWrapper },
+                React__namespace.createElement(FlexCell, { cx: css$y.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(),
@@ -2664,7 +2871,7 @@ class PickerModalImpl extends uuiComponents.PickerModalBase {
                                 rows: dataRows,
                                 editMode: 'modal',
                             }, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder }))),
-                    !this.isSingleSelect() && (React__namespace.createElement(Switch, Object.assign({ cx: css$s.switch, size: "18" }, this.stateLens.prop('showSelected').toProps(), { isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" }))),
+                    !this.isSingleSelect() && (React__namespace.createElement(Switch, Object.assign({ cx: css$y.switch, size: "18" }, this.stateLens.prop('showSelected').toProps(), { isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" }))),
                     this.props.renderFilter && React__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()))));
@@ -2681,13 +2888,13 @@ class PickerModal extends React__namespace.Component {
     }
 }
 
-var css$r = {"root":"Puf22E"};
+var css$x = {"root":"z4Dbyq"};
 
-const AvatarStack = uuiCore.withMods(uuiComponents.AvatarStack, () => [css$r.root]);
+const AvatarStack = uuiCore.withMods(uuiComponents.AvatarStack, () => [css$x.root]);
 
-var css$q = {"root":"RYmnOy","size-18":"W5TuKF","fill-transparent":"h-1m-6","size-24":"ojlLD-","size-30":"_0-A4Vc","size-36":"zfEf8e","size-42":"Qehq-3","size-48":"laiIwj","fill-solid":"PRAPps","fill-semitransparent":"tnO6Di","size18":"W5TuKF","fillTransparent":"h-1m-6","size24":"ojlLD-","size30":"_0-A4Vc","size36":"zfEf8e","size42":"Qehq-3","size48":"laiIwj","fillSolid":"PRAPps","fillSemitransparent":"tnO6Di"};
+var css$w = {"root":"_1FBEfc","size-18":"t-IUle","fill-transparent":"f36amx","size-24":"c9iy7G","size-30":"GbOmEC","size-36":"ZnULvM","size-42":"KMj-pL","size-48":"XjSM2L","fill-solid":"QI6Bun","fill-semitransparent":"EjXYjy","size18":"t-IUle","fillTransparent":"f36amx","size24":"c9iy7G","size30":"GbOmEC","size36":"ZnULvM","size42":"KMj-pL","size48":"XjSM2L","fillSolid":"QI6Bun","fillSemitransparent":"EjXYjy"};
 
-const defaultSize$4 = '36';
+const defaultSize$5 = '36';
 const mapSize$1 = {
     48: '48',
     42: '48',
@@ -2698,18 +2905,18 @@ const mapSize$1 = {
 };
 function applyBadgeMods(mods) {
     return [
-        css$q.root, buttonCss.root, css$q['size-' + (mods.size || defaultSize$4)], css$q['fill-' + (mods.fill || 'solid')], mods.color && `badge-${mods.color}`,
+        css$w.root, buttonCss.root, css$w['size-' + (mods.size || defaultSize$5)], css$w['fill-' + (mods.fill || 'solid')], mods.color && `badge-${mods.color}`,
     ];
 }
 const Badge = uuiCore.withMods(uuiComponents.Button, applyBadgeMods, (props) => ({
-    dropdownIcon: systemIcons[(props.size && mapSize$1[props.size]) || defaultSize$4].foldingArrow,
-    clearIcon: systemIcons[(props.size && mapSize$1[props.size]) || defaultSize$4].clear,
+    dropdownIcon: systemIcons[(props.size && mapSize$1[props.size]) || defaultSize$5].foldingArrow,
+    clearIcon: systemIcons[(props.size && mapSize$1[props.size]) || defaultSize$5].clear,
     countPosition: 'left',
 }));
 
-var css$p = {"root":"ZM6OYB","size-18":"iexIQA","size-24":"wuVFsv","size-30":"Q2FsvU","size-36":"_8wH4Qx","size-42":"PyywA4","size-48":"L9G3AM","size18":"iexIQA","size24":"wuVFsv","size30":"Q2FsvU","size36":"_8wH4Qx","size42":"PyywA4","size48":"L9G3AM"};
+var css$v = {"root":"_6HuxB7","size-18":"DS8ggE","size-24":"-Fnhxw","size-30":"yOOCMO","size-36":"icvkNq","size-42":"Zh6WvR","size-48":"zZ4jPz","size18":"DS8ggE","size24":"-Fnhxw","size30":"yOOCMO","size36":"icvkNq","size42":"Zh6WvR","size48":"zZ4jPz"};
 
-const defaultSize$3 = '36';
+const defaultSize$4 = '36';
 const mapSize = {
     48: '48',
     42: '48',
@@ -2719,80 +2926,107 @@ const mapSize = {
     18: '18',
 };
 function applyTagMods(mods) {
-    return [css$p['size-' + (mods.size || defaultSize$3)], css$p.root];
+    return [css$v['size-' + (mods.size || defaultSize$4)], css$v.root];
 }
 const Tag = uuiCore.withMods(uuiComponents.Button, applyTagMods, (props) => ({
-    dropdownIcon: systemIcons[mapSize[props.size] || defaultSize$3].foldingArrow,
-    clearIcon: systemIcons[mapSize[props.size] || defaultSize$3].clear,
+    dropdownIcon: systemIcons[mapSize[props.size] || defaultSize$4].foldingArrow,
+    clearIcon: systemIcons[mapSize[props.size] || defaultSize$4].clear,
 }));
 
-var css$o = {"root":"hGId8P","spacer":"wb-bGJ","mode-ghost":"_8j2peT","size-24":"nGVoyP","size-30":"_8socU6","navigation-size-24":"WNKiJi","navigation-size-30":"kipHEg","modeGhost":"_8j2peT","size24":"nGVoyP","size30":"_8socU6","navigationSize24":"WNKiJi","navigationSize30":"kipHEg"};
+var css$u = {"root":"Mpnawn","spacer":"hojYcI","mode-ghost":"_5NHMxE","size-24":"HZvvRi","size-30":"o-ZWuo","navigation-size-24":"B4z-Of","navigation-size-30":"zgm7Cn","modeGhost":"_5NHMxE","size24":"HZvvRi","size30":"o-ZWuo","navigationSize24":"B4z-Of","navigationSize30":"zgm7Cn"};
 
-var _path$f;
-function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
+var _path$i;
+function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
 var SvgNavigationChevronLeft12 = function SvgNavigationChevronLeft12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__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$g = /*#__PURE__*/React.forwardRef(SvgNavigationChevronLeft12);
+var ForwardRef$j = /*#__PURE__*/React.forwardRef(SvgNavigationChevronLeft12);
 
-var _path$e;
-function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
+var _path$h;
+function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
 var SvgNavigationChevronRight12 = function SvgNavigationChevronRight12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__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$f = /*#__PURE__*/React.forwardRef(SvgNavigationChevronRight12);
+var ForwardRef$i = /*#__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$o.root }, params.rawProps),
-            React__namespace.default.createElement(Button, { cx: css$o[`navigation-size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$B : ForwardRef$g, onClick: params.goToPrev, isDisabled: params.isFirst, mode: "outline", color: "secondary" }),
+        return (React__namespace.default.createElement("nav", Object.assign({ role: "navigation", className: css$u.root }, params.rawProps),
+            React__namespace.default.createElement(Button, { cx: css$u[`navigation-size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$E : ForwardRef$j, onClick: params.goToPrev, isDisabled: params.isFirst, mode: "outline", color: "secondary" }),
             params.pages.map((page, index) => {
                 var _a, _b;
                 if (page.type === 'spacer') {
-                    return (React__namespace.default.createElement(Button, { cx: cx__default.default(css$o[`size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], css$o.spacer), size: params.size, key: `${index}_spacer`, caption: "...", mode: "ghost", color: "secondary", tabIndex: -1 }));
+                    return (React__namespace.default.createElement(Button, { cx: cx__default.default(css$u[`size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], css$u.spacer), size: params.size, key: `${index}_spacer`, caption: "...", mode: "ghost", color: "secondary", tabIndex: -1 }));
                 }
                 else {
-                    return (React__namespace.default.createElement(Button, { cx: cx__default.default(css$o[`size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], css$o[`mode-${!page.isActive && 'ghost'}`]), size: params.size, key: page.pageNumber, caption: page.pageNumber, onClick: () => { var _a; return (_a = page.onClick) === null || _a === void 0 ? void 0 : _a.call(page); }, rawProps: { 'aria-current': page.isActive }, mode: (page.isActive && 'outline') || 'ghost', color: "primary" }));
+                    return (React__namespace.default.createElement(Button, { cx: cx__default.default(css$u[`size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], css$u[`mode-${!page.isActive && 'ghost'}`]), size: params.size, key: page.pageNumber, caption: page.pageNumber, onClick: () => { var _a; return (_a = page.onClick) === null || _a === void 0 ? void 0 : _a.call(page); }, rawProps: { 'aria-current': page.isActive }, mode: (page.isActive && 'outline') || 'ghost', color: "primary" }));
                 }
             }),
-            React__namespace.default.createElement(Button, { cx: css$o[`navigation-size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$A : ForwardRef$f, onClick: params.goToNext, isDisabled: params.isLast, mode: "outline", color: "secondary" })));
+            React__namespace.default.createElement(Button, { cx: css$u[`navigation-size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$D : ForwardRef$i, onClick: params.goToNext, isDisabled: params.isLast, mode: "outline", color: "secondary" })));
     };
     return React__namespace.default.createElement(uuiComponents.Paginator, Object.assign({}, props, { render: renderPaginator }));
 }
 
+var css$t = {"root":"t6WzSC","bar":"ulp-n5","progressBar-indeterminate":"MPKS7f","size-12":"_7D-K6l","size-18":"VWcgP3","size-24":"liF52i","progressBarIndeterminate":"MPKS7f","size12":"_7D-K6l","size18":"VWcgP3","size24":"liF52i"};
+
+const IndeterminateBar = React__namespace.forwardRef((props, ref) => {
+    return (React__namespace.createElement("div", { ref: ref, className: cx__default.default(props.cx, css$t.root, css$t[`size-${props.size || 12}`]) },
+        React__namespace.createElement("div", { className: cx__default.default(css$t.bar) })));
+});
+
+var css$s = {"root":"zUlI3h","striped":"h2rHhO","animate-stripes":"DzdN2w","size-12":"-sUknj","size-18":"_16Qq1-","size-24":"y16li0","animateStripes":"DzdN2w","size12":"-sUknj","size18":"_16Qq1-","size24":"y16li0"};
+
+const defaultSize$3 = '12';
+function applyProgressBarMods(mods) {
+    const size = mods.size || defaultSize$3;
+    return [
+        css$s.root, css$s[`size-${size}`], mods.striped && css$s.striped,
+    ];
+}
+const ProgressBar = uuiCore.withMods(uuiComponents.ProgressBar, applyProgressBarMods, (props) => ({
+    hideLabel: props.hideLabel || props.striped,
+}));
+
+var css$r = {"root":"Vi6Ju1"};
+
+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$r.root, props.cx), hideLabel: true })) : (React__namespace.createElement(IndeterminateBar, { ref: ref, cx: cx__default.default(css$r.root, props.cx) }));
+});
+
 const MAX_ITEMS = 100;
 const getMaxItems = (maxItems) => maxItems || maxItems === 0 ? maxItems : MAX_ITEMS;
 
-var css$n = {"root":"RSYEne","mode-form":"RVyaLe","mode-cell":"PVDQso","mode-inline":"U-95ym","size-24":"Ms8-LQ","size-30":"-M-3I3","size-36":"PpM-u3","size-42":"-VI-rR","size-48":"JEPdPy","modeForm":"RVyaLe","modeCell":"PVDQso","modeInline":"U-95ym","size24":"Ms8-LQ","size30":"-M-3I3","size36":"PpM-u3","size42":"-VI-rR","size48":"JEPdPy"};
+var css$q = {"root":"qQ7FKw","mode-form":"zr5wm3","mode-cell":"etnhg2","mode-inline":"TvzUCi","size-24":"affBl8","size-30":"MqRln3","size-36":"IM-Eoj","size-42":"zmeU03","size-48":"Hrsxyt","modeForm":"zr5wm3","modeCell":"etnhg2","modeInline":"TvzUCi","size24":"affBl8","size30":"MqRln3","size36":"IM-Eoj","size42":"zmeU03","size48":"Hrsxyt"};
 
 const defaultSize$2 = '36';
 const defaultMode = exports.EditMode.FORM;
 function applyPickerTogglerMods(mods) {
     return [
-        css$n.root,
-        css$n['size-' + (mods.size || defaultSize$2)],
-        css$n['mode-' + (mods.mode || defaultMode)],
+        css$q.root,
+        css$q['size-' + (mods.size || defaultSize$2)],
+        css$q['mode-' + (mods.mode || defaultMode)],
     ];
 }
 function PickerTogglerComponent(props, ref) {
@@ -2834,9 +3068,9 @@ function PickerTogglerComponent(props, ref) {
 }
 const PickerToggler = React__namespace.forwardRef(PickerTogglerComponent);
 
-var css$m = {"root":"-td799","multiline-vertical-padding-24":"-N4cgw","multiline-vertical-padding-30":"gzHKny","multiline-vertical-padding-36":"_7HNFgM","multiline-vertical-padding-42":"eQxMUf","multiline-vertical-padding-48":"w1azza","text":"QgEgxq","multilineVerticalPadding24":"-N4cgw","multilineVerticalPadding30":"gzHKny","multilineVerticalPadding36":"_7HNFgM","multilineVerticalPadding42":"eQxMUf","multilineVerticalPadding48":"w1azza"};
+var css$p = {"root":"-zvg1U","multiline-vertical-padding-24":"Mrj-92","multiline-vertical-padding-30":"plUjft","multiline-vertical-padding-36":"Gl9iaP","multiline-vertical-padding-42":"Y7Xu7a","multiline-vertical-padding-48":"Wg99y2","text":"r2RRzX","multilineVerticalPadding24":"Mrj-92","multilineVerticalPadding30":"plUjft","multilineVerticalPadding36":"Gl9iaP","multilineVerticalPadding42":"Y7Xu7a","multilineVerticalPadding48":"Wg99y2"};
 
-var css$l = {"highlighted-text":"OGXYHj","highlightedText":"OGXYHj"};
+var css$o = {"highlighted-text":"HiwlPt","highlightedText":"HiwlPt"};
 
 const mergeHighlightRanges = (ranges) => {
     const mergedRanges = [];
@@ -2890,7 +3124,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$l.highlightedText } : {})), rangeStr));
+    return (React__namespace.default.createElement("span", Object.assign({ key: `${rangeStr}-${index}` }, (range.isHighlighted ? { className: css$o.highlightedText } : {})), rangeStr));
 });
 const getHighlightedSearchMatches = (str, search) => {
     if (!search || !str) {
@@ -2919,32 +3153,32 @@ class PickerItem extends React__namespace.Component {
         const { search } = (_a = this.props.dataSourceState) !== null && _a !== void 0 ? _a : {};
         const title = highlightSearchMatches ? getHighlightedSearchMatches(this.props.title, search) : this.props.title;
         const subtitle = highlightSearchMatches ? getHighlightedSearchMatches(this.props.subtitle, search) : this.props.subtitle;
-        return (React__namespace.createElement(FlexCell, { width: "auto", cx: css$m.root },
-            React__namespace.createElement(FlexRow, { size: itemSize, cx: isMultiline && css$m[`multiline-vertical-padding-${itemSize}`], spacing: "12" },
+        return (React__namespace.createElement(FlexCell, { width: "auto", cx: css$p.root },
+            React__namespace.createElement(FlexRow, { size: itemSize, cx: isMultiline && css$p[`multiline-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$m.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$m.text }, isLoading ? React__namespace.createElement(TextPlaceholder, { wordsCount: 2 }) : subtitle))))));
+                    title && (React__namespace.createElement(Text, { size: itemSize, cx: css$p.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$p.text }, isLoading ? React__namespace.createElement(TextPlaceholder, { wordsCount: 2 }) : subtitle))))));
     }
 }
 PickerItem.defaultProps = {
     highlightSearchMatches: true,
 };
 
-var css$k = {"panel":"l2T6vH","footer-wrapper":"v8UxJ-","footer-size-24":"F3FkhH","footer-size-30":"uRXZCd","footer-size-36":"_7jCvTW","footer-size-42":"v-zBBJ","footer-size-48":"WBIq7j","footerWrapper":"v8UxJ-","footerSize24":"F3FkhH","footerSize30":"uRXZCd","footerSize36":"_7jCvTW","footerSize42":"v-zBBJ","footerSize48":"WBIq7j"};
+var css$n = {"panel":"FT2NtQ","footer-wrapper":"L4gtXD","footer-size-24":"x3AzbF","footer-size-30":"tACjUC","footer-size-36":"_0tMFf4","footer-size-42":"O2K2ZN","footer-size-48":"ClAiY1","footerWrapper":"L4gtXD","footerSize24":"x3AzbF","footerSize30":"tACjUC","footerSize36":"_0tMFf4","footerSize42":"O2K2ZN","footerSize48":"ClAiY1"};
 
 const pickerHeight$1 = 300;
 const pickerWidth$1 = 360;
 class PickerInput extends uuiComponents.PickerInputBase {
     constructor() {
         super(...arguments);
-        this.renderItem = (item, rowProps) => {
+        this.renderItem = (item, rowProps, dataSourceState) => {
             var _a;
-            return (React__namespace.default.createElement(PickerItem, Object.assign({ title: this.getName(item), size: this.getRowSize(), dataSourceState: this.state.dataSourceState, highlightSearchMatches: (_a = this.props.highlightSearchMatches) !== null && _a !== void 0 ? _a : true }, rowProps)));
+            return (React__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) => {
-            return this.props.renderRow ? (this.props.renderRow(rowProps, this.state.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: this.renderItem })));
+        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() {
@@ -2980,11 +3214,11 @@ class PickerInput extends uuiComponents.PickerInputBase {
         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));
+        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$k.panel, uuiCore.uuiMarkers.lockFocus, this.props.bodyCx,
+                css$n.panel, uuiCore.uuiMarkers.lockFocus, this.props.bodyCx,
             ] },
             React__namespace.default.createElement(MobileDropdownWrapper, { title: this.props.entityName, close: () => {
                     this.returnFocusToInput();
@@ -3000,7 +3234,7 @@ class PickerInput extends uuiComponents.PickerInputBase {
     }
 }
 
-var css$j = {"row":"-M1x0D"};
+var css$m = {"row":"G7YTz-"};
 
 class PickerListItem extends React__namespace.default.Component {
     render() {
@@ -3018,7 +3252,7 @@ class PickerListItem extends React__namespace.default.Component {
         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$j.row }, component);
+        return React__namespace.default.createElement("div", { className: css$m.row }, component);
     }
 }
 
@@ -3061,7 +3295,7 @@ class PickerList extends uuiComponents.PickerListBase {
 }
 PickerList.contextType = uuiCore.UuiContext;
 
-var css$i = {"root":"_70vH7g","title-wrapper":"FiVv18","title":"x0YqqN","text-wrapper":"dQhM3m","selection":"Quw87o","postfix":"BqWl4e","selected":"PCQ7O2","titleWrapper":"FiVv18","textWrapper":"dQhM3m"};
+var css$l = {"root":"c2cy1v","title-wrapper":"kBoro-","title":"rfO--J","text-wrapper":"_85-yoK","selection":"tK92h7","postfix":"kVA3p9","selected":"bcbN0k","titleWrapper":"kBoro-","textWrapper":"_85-yoK"};
 
 const defaultSize = '36';
 const FilterPanelItemToggler = React__namespace.forwardRef((props, ref) => {
@@ -3073,18 +3307,18 @@ const FilterPanelItemToggler = React__namespace.forwardRef((props, ref) => {
         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
     };
     const getTitle = props.predicateName ? `${props.title} ${props.predicateName}` : `${props.title}${props.selection ? ':' : ''}`;
-    const getSelectionText = () => props.selection.map((i, index) => (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement(Text, { key: index, color: "brand", size: props.size, cx: css$i.selection }, i),
+    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$l.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',
-        }, cx: cx__default.default(css$i.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$i.titleWrapper },
-            React__namespace.createElement(Text, { size: props.size, cx: css$i.title }, getTitle),
-            props.selection && (React__namespace.createElement("div", { className: css$i.textWrapper },
+        }, cx: cx__default.default(css$l.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$l.titleWrapper },
+            React__namespace.createElement(Text, { size: props.size, cx: css$l.title }, getTitle),
+            props.selection && (React__namespace.createElement("div", { className: css$l.textWrapper },
                 getSelectionText(),
-                props.postfix && (React__namespace.createElement(Text, { color: "brand", size: props.size, cx: css$i.postfix }, props.postfix))))),
+                props.postfix && (React__namespace.createElement(Text, { color: "brand", size: props.size, cx: css$l.postfix }, props.postfix))))),
         !props.isDisabled && React__namespace.createElement(uuiComponents.IconContainer, { icon: systemIcons[props.size || defaultSize].foldingArrow, flipY: props.isOpen, cx: "uui-icon-dropdown" })));
 });
 
@@ -3164,7 +3398,7 @@ class FilterDatePickerBody extends uuiComponents.BaseDatePicker {
     }
 }
 
-var css$h = {"date-input":"OjVwOI","size-24":"oQtwp-","size-30":"HdadDh","size-36":"_2S-SJ3","size-42":"Pm7hGH","size-48":"_98Lzcz","date-input-group":"oVDujI","separator":"-t-wLk","mode-form":"ennPb3","mode-cell":"Gmvqe9","dateInput":"OjVwOI","size24":"oQtwp-","size30":"HdadDh","size36":"_2S-SJ3","size42":"Pm7hGH","size48":"_98Lzcz","dateInputGroup":"oVDujI","modeForm":"ennPb3","modeCell":"Gmvqe9"};
+var css$k = {"date-input":"lNWbGU","size-24":"VjyrWh","size-30":"Z4-Jjm","size-36":"Qaim8R","size-42":"_5rwbck","size-48":"_62rB7g","date-input-group":"jTYQnC","separator":"M9g5Yl","mode-form":"mByNg-","mode-cell":"p5qr-K","dateInput":"lNWbGU","size24":"VjyrWh","size30":"Z4-Jjm","size36":"Qaim8R","size42":"_5rwbck","size48":"_62rB7g","dateInputGroup":"jTYQnC","modeForm":"mByNg-","modeCell":"p5qr-K"};
 
 class FilterRangeDatePickerBody extends uuiComponents.BaseRangeDatePicker {
     constructor() {
@@ -3184,10 +3418,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$h.dateInputGroup, this.state.inFocus && uuiCore.uuiMod.focus) },
-                        React__namespace.createElement(TextInput, { icon: systemIcons['30'].calendar, cx: cx__default.default(css$h.dateInput, css$h['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$h.separator }),
-                        React__namespace.createElement(TextInput, { cx: cx__default.default(css$h.dateInput, css$h['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$k.dateInputGroup, this.state.inFocus && uuiCore.uuiMod.focus) },
+                        React__namespace.createElement(TextInput, { icon: systemIcons['30'].calendar, cx: cx__default.default(css$k.dateInput, css$k['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$k.separator }),
+                        React__namespace.createElement(TextInput, { cx: cx__default.default(css$k.dateInput, css$k['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 })))));
     }
@@ -3196,7 +3430,7 @@ class FilterRangeDatePickerBody extends uuiComponents.BaseRangeDatePicker {
     }
 }
 
-var css$g = {"container":"MXF5zK"};
+var css$j = {"container":"pQ20ri"};
 
 function FilterNumericBody(props) {
     var _a, _b;
@@ -3240,7 +3474,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$g.container },
+            React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", spacing: "12", borderBottom: true, cx: css$j.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%" },
@@ -3248,7 +3482,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$g.container },
+        React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$j.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()));
@@ -3269,23 +3503,23 @@ function FilterItemBody(props) {
     }
 }
 
-var _path$d;
-function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
+var _path$g;
+function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
 var SvgActionDeleteforever12 = function SvgActionDeleteforever12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__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$e = /*#__PURE__*/React.forwardRef(SvgActionDeleteforever12);
+var ForwardRef$h = /*#__PURE__*/React.forwardRef(SvgActionDeleteforever12);
 
-var css$f = {"header":"tcyUSr","removeButton":"Rx6D7U","with-search":"LKiCTs","panel":"PrybsA","withSearch":"LKiCTs"};
+var css$i = {"header":"_6pBAif","removeButton":"hboOJO","with-search":"_21QAp0","panel":"_5HB-ra","withSearch":"_21QAp0"};
 
 function FiltersToolbarItemImpl(props) {
     const { maxCount = 2 } = props;
@@ -3361,14 +3595,14 @@ function FiltersToolbarItemImpl(props) {
     };
     const renderHeader = (hideTitle) => {
         var _a;
-        return (React__namespace.default.createElement("div", { className: cx__default.default(css$f.header, isPickersType && ((_a = props.showSearch) !== null && _a !== void 0 ? _a : css$f.withSearch)) },
+        return (React__namespace.default.createElement("div", { className: cx__default.default(css$i.header, isPickersType && ((_a = props.showSearch) !== null && _a !== void 0 ? _a : css$i.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$f.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: "24", icon: ForwardRef$e }))));
+            !(props === null || props === void 0 ? void 0 : props.isAlwaysVisible) && (React__namespace.default.createElement(LinkButton, { cx: css$i.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: "24", icon: ForwardRef$h }))));
     };
     const renderBody = (dropdownProps) => {
         const hideHeaderTitle = isPickersType && isMobileScreen;
         return (React__namespace.default.createElement(DropdownContainer, Object.assign({}, dropdownProps),
-            React__namespace.default.createElement(Panel, { cx: css$f.panel }, isPickersType ? (React__namespace.default.createElement(MobileDropdownWrapper, { title: props.title, close: () => isOpenChange(false) },
+            React__namespace.default.createElement(Panel, { cx: css$i.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),
@@ -3447,20 +3681,20 @@ function FiltersToolbarItemImpl(props) {
 }
 const FiltersPanelItem = React__namespace.default.memo(FiltersToolbarItemImpl);
 
-var _path$c;
-function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
+var _path$f;
+function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
 var SvgActionAdd18 = function SvgActionAdd18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M10 2H8v6H2v2h6v6h2v-6h6V8h-6V2z"
   })));
 };
-var ForwardRef$d = /*#__PURE__*/React.forwardRef(SvgActionAdd18);
+var ForwardRef$g = /*#__PURE__*/React.forwardRef(SvgActionAdd18);
 
 const normalizeFilterWithPredicates = (filter) => {
     if (!filter) {
@@ -3512,12 +3746,15 @@ function FiltersToolbarImpl(props) {
         const newConfig = {};
         const newFilter = {};
         const sortedOrders = tableState.filtersConfig && sortBy__default.default(tableState.filtersConfig, (f) => f === null || f === void 0 ? void 0 : f.order);
-        let order = (sortedOrders === null || sortedOrders === void 0 ? void 0 : sortedOrders.length) ? (_a = sortedOrders[sortedOrders.length - 1]) === null || _a === void 0 ? void 0 : _a.order : null;
+        let lastItemOrder = (sortedOrders === null || sortedOrders === void 0 ? void 0 : sortedOrders.length) ? (_a = sortedOrders[sortedOrders.length - 1]) === null || _a === void 0 ? void 0 : _a.order : null;
         updatedFilters.forEach((filter) => {
             var _a, _b;
-            const newOrder = ((_b = (_a = tableState === null || tableState === void 0 ? void 0 : tableState.filtersConfig) === null || _a === void 0 ? void 0 : _a[filter === null || filter === void 0 ? void 0 : filter.field]) === null || _b === void 0 ? void 0 : _b.order) || uuiCore.getOrderBetween(order, null);
-            order = newOrder;
-            newConfig[filter.field] = { isVisible: true, order: newOrder };
+            let order = (_b = (_a = tableState === null || tableState === void 0 ? void 0 : tableState.filtersConfig) === null || _a === void 0 ? void 0 : _a[filter === null || filter === void 0 ? void 0 : filter.field]) === null || _b === void 0 ? void 0 : _b.order;
+            if (!order) {
+                order = uuiCore.getOrderBetween(lastItemOrder, null);
+                lastItemOrder = order;
+            }
+            newConfig[filter.field] = { isVisible: true, order: order };
             // Remove unselected filters from filter object
             if (tableState.filter) {
                 newFilter[filter.field] = tableState.filter[filter.field];
@@ -3548,7 +3785,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$d, iconPosition: "left", mode: "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$g, iconPosition: "left", mode: "ghost", color: "primary" }));
     }, []);
     const getRowOptions = React.useCallback((item) => ({
         isDisabled: item.isAlwaysVisible,
@@ -3569,115 +3806,115 @@ function FiltersToolbarImpl(props) {
                 React__namespace.default.createElement(FiltersPanelItem, Object.assign({}, f, { value: (_a = tableState.filter) === null || _a === void 0 ? void 0 : _a[f.field], onValueChange: handleFilterChange, key: f.field, autoFocus: newFilterId === f.field, removeFilter: removeFilter, size: props.size }))));
         }),
         !isAllFiltersAlwaysVisible && (React__namespace.default.createElement(PickerInput, { dataSource: dataSource, value: selectedFilters, onValueChange: onFiltersChange, selectionMode: "multi", valueType: "entity", key: newFilterId, renderRow: (props) => (React__namespace.default.createElement(DataPickerRow, Object.assign({}, props, { padding: "12", key: props.key, onCheck: (row) => {
-                    props.onCheck(row);
+                    props.onCheck && props.onCheck(row);
                     !row.isChecked && setNewFilterId(row.value.field);
                 }, renderItem: (item, rowProps) => React__namespace.default.createElement(PickerItem, Object.assign({}, rowProps, { title: item.title })) }))), getName: (i) => i.title, renderToggler: renderAddFilterToggler, emptyValue: [], getRowOptions: getRowOptions, fixedBodyPosition: true, size: props.size }))));
 }
 const FiltersPanel = React__namespace.default.memo(FiltersToolbarImpl);
 
-var css$e = {"divider":"_7t1tI8","dropdownDeleteIcon":"_5J-Qyv","presetsWrapper":"NZFJ8-","addPresetContainer":"_09fsvg","dropContainer":"_4MPsb4"};
+var css$h = {"divider":"IPfn-9","dropdownDeleteIcon":"ZxuLG3","presetsWrapper":"el2heb","addPresetContainer":"tOi9F8","dropContainer":"-B6u8a"};
 
-var css$d = {"preset-dropdown-panel":"QA8IMg","delete-row":"hSm-GZ","delete-button":"d0v5cn","targetOpen":"AFYSf7","presetDropdownPanel":"QA8IMg","deleteRow":"hSm-GZ","deleteButton":"d0v5cn"};
+var css$g = {"preset-dropdown-panel":"Y0Hc-T","delete-row":"-f9ec-","delete-button":"_1NmOzC","targetOpen":"FlxGib","presetDropdownPanel":"Y0Hc-T","deleteRow":"-f9ec-","deleteButton":"_1NmOzC"};
 
-var _path$b;
-function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
+var _path$e;
+function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
 var SvgSaveOutline18 = function SvgSaveOutline18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$e || (_path$e = /*#__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"
   })));
 };
-var ForwardRef$c = /*#__PURE__*/React.forwardRef(SvgSaveOutline18);
+var ForwardRef$f = /*#__PURE__*/React.forwardRef(SvgSaveOutline18);
 
-var _path$a;
-function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
+var _path$d;
+function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
 var SvgContentEditUndo18 = function SvgContentEditUndo18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__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"
   })));
 };
-var ForwardRef$b = /*#__PURE__*/React.forwardRef(SvgContentEditUndo18);
+var ForwardRef$e = /*#__PURE__*/React.forwardRef(SvgContentEditUndo18);
 
-var _path$9;
-function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
+var _path$c;
+function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
 var SvgActionCopyContent18 = function SvgActionCopyContent18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__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",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$a = /*#__PURE__*/React.forwardRef(SvgActionCopyContent18);
+var ForwardRef$d = /*#__PURE__*/React.forwardRef(SvgActionCopyContent18);
 
-var _path$8;
-function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
+var _path$b;
+function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
 var SvgContentEdit18 = function SvgContentEdit18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__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",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$9 = /*#__PURE__*/React.forwardRef(SvgContentEdit18);
+var ForwardRef$c = /*#__PURE__*/React.forwardRef(SvgContentEdit18);
 
-var _path$7;
-function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+var _path$a;
+function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
 var SvgContentLink18 = function SvgContentLink18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__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$8 = /*#__PURE__*/React.forwardRef(SvgContentLink18);
+var ForwardRef$b = /*#__PURE__*/React.forwardRef(SvgContentLink18);
 
-var _path$6;
-function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+var _path$9;
+function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
 var SvgActionDeleteforever18 = function SvgActionDeleteforever18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$9 || (_path$9 = /*#__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$7 = /*#__PURE__*/React.forwardRef(SvgActionDeleteforever18);
+var ForwardRef$a = /*#__PURE__*/React.forwardRef(SvgActionDeleteforever18);
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = uuiCore.useUuiContext();
@@ -3714,30 +3951,30 @@ function PresetActionsDropdown(props) {
     ]);
     const renderBody = () => {
         const isReadonlyPreset = props.preset.isReadonly;
-        return (React__namespace.default.createElement(Panel, { shadow: true, cx: css$d.presetDropdownPanel },
+        return (React__namespace.default.createElement(Panel, { shadow: true, cx: css$g.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$o, 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$c, caption: "Save as new", onClick: props.addPreset })),
+                    React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$f, 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$b, caption: "Discard all changes", onClick: discardAllChangesHandler })))),
+                    React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$e, 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$9, caption: "Rename", onClick: props.renamePreset }))),
+                React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$c, caption: "Rename", onClick: props.renamePreset }))),
             React__namespace.default.createElement(FlexRow, { key: `${props.preset.id}-duplicate` },
-                React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$a, caption: "Duplicate", onClick: duplicateHandler })),
+                React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$d, caption: "Duplicate", onClick: duplicateHandler })),
             React__namespace.default.createElement(FlexRow, { borderBottom: true, key: `${props.preset.id}-copyLink` },
-                React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$8, caption: "Copy Link", onClick: copyUrlToClipboard })),
-            !isReadonlyPreset && (React__namespace.default.createElement(FlexRow, { key: `${props.preset.id}-delete`, cx: css$d.deleteRow },
-                React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$7, caption: "Delete", cx: css$d.deleteButton, onClick: deleteHandler })))));
+                React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$b, caption: "Copy Link", onClick: copyUrlToClipboard })),
+            !isReadonlyPreset && (React__namespace.default.createElement(FlexRow, { key: `${props.preset.id}-delete`, cx: css$g.deleteRow },
+                React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$a, caption: "Delete", cx: css$g.deleteButton, onClick: deleteHandler })))));
     };
     const renderTarget = React.useCallback((dropdownProps) => {
-        return (React__namespace.default.createElement(IconButton, Object.assign({ cx: dropdownProps.isOpen && css$d.targetOpen, color: props.preset.id === props.activePresetId ? 'info' : 'default' }, dropdownProps, { icon: ForwardRef$p })));
+        return (React__namespace.default.createElement(IconButton, Object.assign({ cx: dropdownProps.isOpen && css$g.targetOpen, color: props.preset.id === props.activePresetId ? 'info' : 'default' }, dropdownProps, { icon: ForwardRef$s })));
     }, []);
     return (React__namespace.default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", modifiers: [{ name: 'offset', options: { offset: [0, 22] } }] }));
 }
 
-var css$c = {"preset-input-cell":"_0Psc29","preset-input":"J1FR-l","presetInputCell":"_0Psc29","presetInput":"J1FR-l"};
+var css$f = {"preset-input-cell":"lcD93R","preset-input":"gpVVel","presetInputCell":"lcD93R","presetInput":"gpVVel"};
 
 function PresetInput(props) {
     var _a;
@@ -3758,11 +3995,11 @@ function PresetInput(props) {
         }
         props.onCancel();
     }, [presetCaption.length, props.onCancel]);
-    return (React__namespace.default.createElement(FlexCell, { cx: css$c.presetInputCell, minWidth: 180 },
-        React__namespace.default.createElement(TextInput, { cx: css$c.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50 })));
+    return (React__namespace.default.createElement(FlexCell, { cx: css$f.presetInputCell, minWidth: 180 },
+        React__namespace.default.createElement(TextInput, { cx: css$f.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50 })));
 }
 
-var css$b = {"preset":"dplCFA","activePreset":"h0knbT"};
+var css$e = {"preset":"HI94V9","activePreset":"QjOQF8"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = React.useState(false);
@@ -3780,23 +4017,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$b.preset, isPresetActive && css$b.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$e.preset, isPresetActive && css$e.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$5;
-function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+var _path$8;
+function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
 var SvgContentPlusBold18 = function SvgContentPlusBold18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M10.5 3h-3v4.5H3v3h4.5V15h3v-4.5H15v-3h-4.5V3z"
   })));
 };
-var ForwardRef$6 = /*#__PURE__*/React.forwardRef(SvgContentPlusBold18);
+var ForwardRef$9 = /*#__PURE__*/React.forwardRef(SvgContentPlusBold18);
 
 function PresetsPanel(props) {
     const [isAddingPreset, setIsAddingPreset] = React.useState(false);
@@ -3811,16 +4048,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$e.addPresetContainer }, !isAddingPreset ? (React__namespace.default.createElement(Button, { size: "36", onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: ForwardRef$6, iconPosition: "left", mode: "ghost", color: "primary" })) : (React__namespace.default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
+        return (React__namespace.default.createElement("div", { key: "addingPresetBlock", className: css$h.addPresetContainer }, !isAddingPreset ? (React__namespace.default.createElement(Button, { size: "36", onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: ForwardRef$9, iconPosition: "left", mode: "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$e.divider }),
-                React__namespace.default.createElement(Button, Object.assign({ mode: "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$e.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$7, iconPosition: "right", cx: css$e.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
+                React__namespace.default.createElement("div", { className: css$h.divider }),
+                React__namespace.default.createElement(Button, Object.assign({ mode: "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$h.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$a, iconPosition: "right", cx: css$h.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
     };
     const getPresetPriority = (preset, index) => {
         return preset.id === props.activePresetId ? 100499 : 1000 - index;
@@ -3838,7 +4075,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$e.presetsWrapper },
+        React__namespace.default.createElement(FlexRow, { size: null, spacing: "12", cx: css$h.presetsWrapper },
             React__namespace.default.createElement(uuiComponents.AdaptivePanel, { items: getPanelItems() }))));
 }
 
@@ -3850,53 +4087,53 @@ const defaultPredicates = {
     rangeDatePicker: [{ predicate: 'inRange', name: 'In Range', isDefault: true }, { predicate: 'notInRange', name: 'Not in Range' }],
 };
 
-var css$a = {"root":"_6fVUfR"};
+var css$d = {"root":"gIPtez"};
 
-var css$9 = {"root":"JIJRW-","burger-content":"d6Hx-O","burgerContent":"d6Hx-O"};
+var css$c = {"root":"yd2SbJ","burger-content":"rVcvLb","burgerContent":"rVcvLb"};
 
-var _path$4;
-function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+var _path$7;
+function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
 var SvgBurger = function SvgBurger(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     width: 60,
     height: 60,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M8 9.2h8v.8H8zM8 14h6v.8H8zm0-2.4h8v.8H8z"
   })));
 };
-var ForwardRef$5 = /*#__PURE__*/React.forwardRef(SvgBurger);
+var ForwardRef$8 = /*#__PURE__*/React.forwardRef(SvgBurger);
 
-var _path$3;
-function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+var _path$6;
+function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
 var SvgBurgerClose = function SvgBurgerClose(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
     width: 60,
     height: 60,
     viewBox: "0 0 60 60",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M38.543 20 40 21.457 31.456 30 40 38.543 38.543 40 30 31.456 21.457 40 20 38.543 28.543 30 20 21.457 21.457 20 30 28.543 38.543 20Z"
   })));
 };
-var ForwardRef$4 = /*#__PURE__*/React.forwardRef(SvgBurgerClose);
+var ForwardRef$7 = /*#__PURE__*/React.forwardRef(SvgBurgerClose);
 
 function applyBurgerMods() {
-    return [css$9.root];
+    return [css$c.root];
 }
 const Burger = uuiCore.withMods(uuiComponents.Burger, applyBurgerMods, () => ({
-    burgerIcon: ForwardRef$5,
-    crossIcon: ForwardRef$4,
-    burgerContentCx: css$9.burgerContent,
+    burgerIcon: ForwardRef$8,
+    crossIcon: ForwardRef$7,
+    burgerContentCx: css$c.burgerContent,
 }));
 
-var _g, _path$2;
-function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+var _g, _path$5;
+function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
 var SvgTriangle = function SvgTriangle(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
     width: 12,
     height: 24,
     viewBox: "0 0 12 24",
@@ -3913,21 +4150,21 @@ var SvgTriangle = function SvgTriangle(props, ref) {
     cx: 12,
     cy: 302.65,
     r: 18
-  }))), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+  }))), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "m5 14-4-4h8z"
   })));
 };
-var ForwardRef$3 = /*#__PURE__*/React.forwardRef(SvgTriangle);
+var ForwardRef$6 = /*#__PURE__*/React.forwardRef(SvgTriangle);
 
-var css$8 = {"root":"yweEn-","button-primary":"Ro4M7t","button-secondary":"GxQidf","hasIcon":"xy8aVk","dropdown":"PZDXDj","buttonPrimary":"Ro4M7t","buttonSecondary":"GxQidf"};
+var css$b = {"root":"Mv0r1d","button-primary":"keuKOs","button-secondary":"P-WHea","hasIcon":"lvQy56","dropdown":"CmXs-J","buttonPrimary":"keuKOs","buttonSecondary":"P-WHea"};
 
 const BurgerButton = uuiCore.withMods(uuiComponents.Button, (props) => [
-    css$8.root, css$8['button-' + (props.type || 'primary')], css$8['indent-' + (props.indentLevel || 0)], props.isDropdown && css$8.dropdown, props.icon && css$8.hasIcon,
-], () => ({ dropdownIcon: ForwardRef$3, dropdownIconPosition: 'left', role: 'menuitem' }));
+    css$b.root, css$b['button-' + (props.type || 'primary')], css$b['indent-' + (props.indentLevel || 0)], props.isDropdown && css$b.dropdown, props.icon && css$b.hasIcon,
+], () => ({ dropdownIcon: ForwardRef$6, dropdownIconPosition: 'left', role: 'menuitem' }));
 
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
 var SvgMenuInputCancel = function SvgMenuInputCancel(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 24,
@@ -3969,48 +4206,48 @@ var SvgMenuInputCancel = function SvgMenuInputCancel(props, ref) {
     transform: "matrix(3.77953 0 0 3.77953 -369 -648.52)"
   })));
 };
-var ForwardRef$2 = /*#__PURE__*/React.forwardRef(SvgMenuInputCancel);
+var ForwardRef$5 = /*#__PURE__*/React.forwardRef(SvgMenuInputCancel);
 
-var css$7 = {"search-input":"w-86Qb","searchInput":"w-86Qb"};
+var css$a = {"search-input":"QGDn6F","searchInput":"QGDn6F"};
 
 function BurgerSearch(props) {
-    return (React__namespace.createElement(uuiComponents.TextInput, { cx: css$7.searchInput, iconPosition: "left", icon: ForwardRef$W, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$2, autoFocus: true }));
+    return (React__namespace.createElement(uuiComponents.TextInput, { cx: css$a.searchInput, iconPosition: "left", icon: ForwardRef$16, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$5, autoFocus: true }));
 }
 
-var css$6 = {"group-header":"_51PMuu","group-name":"W53-sE","line":"IzKb98","groupHeader":"_51PMuu","groupName":"W53-sE"};
+var css$9 = {"group-header":"qbGYe-","group-name":"FsBdAN","line":"_8XQPVz","groupHeader":"qbGYe-","groupName":"FsBdAN"};
 
 function BurgerGroupHeader(props) {
-    return (React__namespace.createElement("div", { className: css$6.groupHeader },
-        React__namespace.createElement("hr", { className: css$6.line }),
-        React__namespace.createElement("span", { className: css$6.groupName }, props.caption)));
+    return (React__namespace.createElement("div", { className: css$9.groupHeader },
+        React__namespace.createElement("hr", { className: css$9.line }),
+        React__namespace.createElement("span", { className: css$9.groupName }, props.caption)));
 }
 
-var css$5 = {"root":"_1r-a2Z","type-primary":"_7HJL1-","type-secondary":"DQwuhl","typePrimary":"_7HJL1-","typeSecondary":"DQwuhl"};
+var css$8 = {"root":"E4xLyU","type-primary":"tyk2y8","type-secondary":"s5MHGc","typePrimary":"tyk2y8","typeSecondary":"s5MHGc"};
 
-var _path$1;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var _path$4;
+function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
 var SvgChevronDown24 = function SvgChevronDown24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
   })));
 };
-var ForwardRef$1 = /*#__PURE__*/React.forwardRef(SvgChevronDown24);
+var ForwardRef$4 = /*#__PURE__*/React.forwardRef(SvgChevronDown24);
 
-const MainMenuButton = uuiCore.withMods(uuiComponents.Button, (mods) => [css$5.root, css$5['type-' + (mods.type || 'primary')]], () => ({ dropdownIcon: ForwardRef$1, role: 'menuitem' }));
+const MainMenuButton = uuiCore.withMods(uuiComponents.Button, (mods) => [css$8.root, css$8['type-' + (mods.type || 'primary')]], () => ({ dropdownIcon: ForwardRef$4, role: 'menuitem' }));
 
-var css$4 = {"dropdown-body":"V5j1ND","dropdownBody":"V5j1ND"};
+var css$7 = {"dropdown-body":"_6NH12l","dropdownBody":"_6NH12l"};
 
 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$4.dropdownBody) }, this.props.renderBody
+                return (React__namespace.createElement("div", { className: cx__default.default(css$7.dropdownBody) }, this.props.renderBody
                     ? this.props.renderBody(Object.assign({}, props))
                     : React__namespace.Children.map(this.props.children, (item) => {
                         if (!item)
@@ -4027,52 +4264,52 @@ class MainMenuDropdown extends React__namespace.Component {
 }
 
 function applyMainMenuMods() {
-    return [css$a.root];
+    return [css$d.root];
 }
 const MainMenu = uuiCore.withMods(uuiComponents.MainMenu, applyMainMenuMods, () => ({
     Burger,
     MainMenuDropdown,
 }));
 
-var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _path$3;
+function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 var SvgGlobalMenu = function SvgGlobalMenu(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     width: 60,
     height: 60,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
     className: "cls-2",
     d: "M12 11.2a.8.8 0 1 1-.8.8.8.8 0 0 1 .8-.8zm3.2 0a.8.8 0 1 1-.8.8.802.802 0 0 1 .8-.8zm-6.4 0a.8.8 0 1 1-.8.8.8.8 0 0 1 .8-.8zM12 7.6a.8.8 0 1 1-.8.8.8.8 0 0 1 .8-.8zm3.2 0a.8.8 0 1 1-.8.8.802.802 0 0 1 .8-.8zm-6.4 0a.8.8 0 1 1-.8.8.8.8 0 0 1 .8-.8zm3.2 7.2a.8.8 0 1 1-.8.8.8.8 0 0 1 .8-.8zm3.2 0a.8.8 0 1 1-.8.8.802.802 0 0 1 .8-.8zm-6.4 0a.8.8 0 1 1-.8.8.8.8 0 0 1 .8-.8z"
   })));
 };
-var ForwardRef = /*#__PURE__*/React.forwardRef(SvgGlobalMenu);
+var ForwardRef$3 = /*#__PURE__*/React.forwardRef(SvgGlobalMenu);
 
-var css$3 = {"global-menu-btn":"AkqsXG","globalMenuIcon":"pEacmy","globalMenuBtn":"AkqsXG"};
+var css$6 = {"global-menu-btn":"ChI1fJ","globalMenuIcon":"BZO4dh","globalMenuBtn":"ChI1fJ"};
 
-const GlobalMenu = React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", Object.assign({ ref: ref, id: "global_menu_toggle", className: cx__default.default(css$3.globalMenuBtn, props.cx) }, props.rawProps),
-    React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef, cx: css$3.globalMenuIcon }))));
+const GlobalMenu = React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", Object.assign({ ref: ref, id: "global_menu_toggle", className: cx__default.default(css$6.globalMenuBtn, props.cx) }, props.rawProps),
+    React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef$3, cx: css$6.globalMenuIcon }))));
 
-var css$2 = {"container":"ifXzab","open":"TwukNz"};
+var css$5 = {"container":"ccuCSB","open":"lJvtgj"};
 
-const MainMenuAvatar = React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", { ref: ref, className: cx__default.default(css$2.container, props.isDropdown && css$2.dropdown, props.isOpen && css$2.open, props.onClick && uuiCore.uuiMarkers.clickable, props.cx), onClick: props.onClick },
+const MainMenuAvatar = React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", { ref: ref, className: cx__default.default(css$5.container, props.isDropdown && css$5.dropdown, props.isOpen && css$5.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$10, flipY: props.isOpen }))))));
+        React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef$1c, flipY: props.isOpen }))))));
 
-var css$1 = {"search-input":"xsLOWd","searchInput":"xsLOWd"};
+var css$4 = {"search-input":"DSs6ii","searchInput":"DSs6ii"};
 
 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$W, cancelIcon: ((_a = props.value) === null || _a === void 0 ? void 0 : _a.length) > 0 && ForwardRef$2 }, props, iEditable, { ref: ref, cx: uuiCore.cx(css$1.searchInput, props.cx) }, props.rawProps)));
+        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$4.searchInput, props.cx) }, props.rawProps)));
     } }))));
 
-var css = {"container":"yrIMIP"};
+var css$3 = {"container":"_4LQfTc"};
 
-const MainMenuIcon = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(IconButton, Object.assign({ ref: ref, icon: props.icon, cx: uuiCore.cx(props.cx, css.container) }, props))));
+const MainMenuIcon = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(IconButton, Object.assign({ ref: ref, icon: props.icon, cx: uuiCore.cx(props.cx, css$3.container) }, props))));
 
 const Anchor = uuiComponents.Anchor;
 
@@ -4113,6 +4350,167 @@ function useForm(props) {
     return uuiCore.useForm(Object.assign({ beforeLeave, loadUnsavedChanges }, props));
 }
 
+var _path$2;
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+var SvgShape = function SvgShape(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+    width: 24,
+    height: 16,
+    viewBox: "0 0 24 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    ref: ref
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M14 9v4h-4V9H7l5-5 5 5m2.35-2.97A7.49 7.49 0 0 0 12 0C9.11 0 6.6 1.64 5.35 4.03A6.004 6.004 0 0 0 6 16h13a5 5 0 0 0 5-5c0-2.64-2.05-4.78-4.65-4.97Z"
+  })));
+};
+var ForwardRef$2 = /*#__PURE__*/React.forwardRef(SvgShape);
+
+var css$2 = {"root":"_2pCCt-","drop-start":"_0XBGTR","drop-over":"peenec","link":"zRIV9q","drop-area":"iyyNCh","icon-blue":"TgQueo","dropStart":"_0XBGTR","dropOver":"peenec","dropArea":"iyyNCh","iconBlue":"TgQueo"};
+
+class DropSpot extends React__namespace.Component {
+    constructor() {
+        super(...arguments);
+        this.renderAttachmentArea = (props) => {
+            return (React__namespace.createElement("div", Object.assign({ className: uuiCore.cx(css$2.root, this.props.cx, props.isDragStart && css$2.dropStart, props.isDraggingOver && css$2.dropOver) }, this.props.rawProps),
+                React__namespace.createElement("div", Object.assign({}, props.eventHandlers, { className: css$2.dropArea }),
+                    React__namespace.createElement(FlexRow, { size: "24" },
+                        React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef$2, cx: css$2.iconBlue }),
+                        React__namespace.createElement(Text, { lineHeight: "24", size: "24", fontSize: "14" },
+                            ' ',
+                            i18n.fileUpload.labelStart,
+                            ' '),
+                        React__namespace.createElement(uuiComponents.UploadFileToggler, { onFilesAdded: this.props.onUploadFiles, render: (props) => (React__namespace.createElement(RichTextView, null,
+                                React__namespace.createElement(Anchor, Object.assign({}, props, { cx: css$2.link }), i18n.fileUpload.browse))), accept: this.props.accept, single: this.props.single })),
+                    this.props.infoText && (React__namespace.createElement(Text, { lineHeight: "24", size: "24", fontSize: "14", color: "secondary" }, this.props.infoText)))));
+        };
+    }
+    render() {
+        return React__namespace.createElement(uuiComponents.DropSpot, { render: this.renderAttachmentArea, onFilesDropped: this.props.onUploadFiles });
+    }
+}
+
+var css$1 = {"file-card-wrapper":"bE97s2","file-name":"ASYPzV","error-card-wrapper":"z5inuX","default-color":"dHKLtd","doc-color":"dnlzBX","xls-color":"C0PI3u","pdf-color":"_6AUSsu","movie-color":"H5gdtM","img-color":"zJT9cj","drop-start":"G5n9ns","error-block":"HuDnuX","icons-block":"DfFKra","fileCardWrapper":"bE97s2","fileName":"ASYPzV","errorCardWrapper":"z5inuX","defaultColor":"dHKLtd","docColor":"dnlzBX","xlsColor":"C0PI3u","pdfColor":"_6AUSsu","movieColor":"H5gdtM","imgColor":"zJT9cj","dropStart":"G5n9ns","errorBlock":"HuDnuX","iconsBlock":"DfFKra"};
+
+var css = {"root":"pT9Xbm"};
+
+const SvgCircleProgress = React__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 })));
+});
+
+var _path$1;
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var SvgNavigationClose18 = function SvgNavigationClose18(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M14.25 4.808 13.193 3.75 9 7.942 4.808 3.75 3.75 4.808 7.942 9 3.75 13.193l1.058 1.057L9 10.057l4.193 4.193 1.057-1.057L10.057 9l4.193-4.192z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$1 = /*#__PURE__*/React.forwardRef(SvgNavigationClose18);
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgNotificationErrorFill10 = function SvgNotificationErrorFill10(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
+  })));
+};
+var ForwardRef = /*#__PURE__*/React.forwardRef(SvgNotificationErrorFill10);
+
+const FileCard = React__namespace.forwardRef((props, ref) => {
+    const [isLoadingShow, setIsLoadingShow] = React__namespace.useState(true);
+    const { file } = props;
+    const getIcon = (extension) => {
+        switch (extension) {
+            case 'doc':
+            case 'docx':
+                return React__namespace.createElement(uuiComponents.IconContainer, { size: 24, icon: fileIcons.docIcon, cx: css$1.docColor });
+            case 'xls':
+            case 'xlsx':
+                return React__namespace.createElement(uuiComponents.IconContainer, { size: 24, icon: fileIcons.exelIcon, cx: css$1.xlsColor });
+            case 'pdf':
+                return React__namespace.createElement(uuiComponents.IconContainer, { size: 24, icon: fileIcons.pdfIcon, cx: css$1.pdfColor });
+            case 'gif':
+            case 'jpg':
+            case 'jpeg':
+            case 'svg':
+            case 'png':
+            case 'webp':
+                return React__namespace.createElement(uuiComponents.IconContainer, { size: 24, icon: fileIcons.imgIcon, cx: css$1.imgColor });
+            case 'avi':
+            case 'mov':
+            case 'mp4':
+            case 'wmw':
+            case 'mkv':
+                return React__namespace.createElement(uuiComponents.IconContainer, { size: 24, icon: fileIcons.videoIcon, cx: css$1.movieColor });
+            case 'csv':
+            case 'xml':
+                return React__namespace.createElement(uuiComponents.IconContainer, { size: 24, icon: fileIcons.tableIcon, cx: css$1.defaultColor });
+            case 'rtf':
+            case 'txt':
+                return React__namespace.createElement(uuiComponents.IconContainer, { size: 24, icon: fileIcons.textIcon, cx: css$1.defaultColor });
+            case 'eml':
+            case 'emlx':
+                return React__namespace.createElement(uuiComponents.IconContainer, { size: 24, icon: fileIcons.mailIcon, cx: css$1.defaultColor });
+            default:
+                return React__namespace.createElement(uuiComponents.IconContainer, { size: 24, icon: fileIcons.fileIcon, cx: css$1.defaultColor });
+        }
+    };
+    const { cx: componentCx, width, file: { progress, size, name, extension, error, abortXHR, }, onClick, } = props;
+    const fileExtension = extension || (name === null || name === void 0 ? void 0 : name.split('.').pop());
+    const fileName = name === null || name === void 0 ? void 0 : name.split('.').slice(0, -1).join('');
+    const isLoading = progress < 100;
+    const isCrossShow = ((!isLoadingShow && isLoading) || !isLoading) && onClick;
+    const mouseLeaveHandler = (e) => {
+        e.stopPropagation();
+        setIsLoadingShow(() => true);
+    };
+    const mouseEnterHandler = (e) => {
+        e.stopPropagation();
+        setIsLoadingShow(() => false);
+    };
+    const renderErrorContent = () => (React__namespace.createElement(Tooltip, { content: file.error.message, placement: "bottom-start" },
+        React__namespace.createElement("div", { className: css$1.errorBlock },
+            React__namespace.createElement(ForwardRef, null),
+            "Upload failed")));
+    const renderSuccessfulContent = () => (React__namespace.createElement(Text, { size: "18", fontSize: "14", lineHeight: "18", color: "secondary" },
+        fileExtension && `${fileExtension.toUpperCase()}, `,
+        isLoading && uuiCore.formatBytes((size / 100) * progress, 2, false) + i18n.fileCard.fileSizeProgress,
+        uuiCore.formatBytes(size)));
+    const removeHandler = () => {
+        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 },
+        React__namespace.createElement(FlexRow, { cx: css$1.fileCardRow, size: "36", alignItems: "top", spacing: "6" },
+            fileExtension && getIcon(fileExtension),
+            React__namespace.createElement(FlexCell, { width: "100%" },
+                React__namespace.createElement(Text, { size: "18", fontSize: "14", lineHeight: "18", color: progress < 100 ? 'secondary' : 'primary', cx: css$1.fileName }, fileName),
+                (error === null || error === void 0 ? void 0 : error.isError) ? renderErrorContent() : renderSuccessfulContent()),
+            React__namespace.createElement("div", { className: uuiCore.cx(css$1.iconsBlock), onMouseEnter: mouseEnterHandler, onMouseLeave: mouseLeaveHandler },
+                isLoadingShow && isLoading && React__namespace.createElement(SvgCircleProgress, { progress: progress, size: 18 }),
+                isCrossShow && React__namespace.createElement(IconButton, { icon: ForwardRef$1, onClick: removeHandler })))));
+});
+
 Object.defineProperty(exports, 'Avatar', {
     enumerable: true,
     get: function () { return uuiComponents.Avatar; }
@@ -4156,6 +4554,7 @@ exports.DataTableRow = DataTableRow;
 exports.DatePicker = DatePicker;
 exports.DatePickerBody = DatePickerBody;
 exports.DropMarker = DropMarker;
+exports.DropSpot = DropSpot;
 exports.Dropdown = Dropdown;
 exports.DropdownContainer = DropdownContainer;
 exports.DropdownMenuBody = DropdownMenuBody;
@@ -4166,6 +4565,7 @@ exports.DropdownMenuSwitchButton = DropdownMenuSwitchButton;
 exports.DropdownSubMenu = DropdownSubMenu;
 exports.ErrorAlert = ErrorAlert;
 exports.ErrorNotification = ErrorNotification;
+exports.FileCard = FileCard;
 exports.FilterItemBody = FilterItemBody;
 exports.FiltersPanel = FiltersPanel;
 exports.FlexCell = FlexCell;
@@ -4175,6 +4575,8 @@ exports.GlobalMenu = GlobalMenu;
 exports.HintAlert = HintAlert;
 exports.HintNotification = HintNotification;
 exports.IconButton = IconButton;
+exports.IndeterminateBar = IndeterminateBar;
+exports.IndicatorBar = IndicatorBar;
 exports.LabeledInput = LabeledInput;
 exports.LinkButton = LinkButton;
 exports.MainMenu = MainMenu;
@@ -4201,6 +4603,7 @@ exports.PickerModal = PickerModal;
 exports.PickerModalImpl = PickerModalImpl;
 exports.PickerToggler = PickerToggler;
 exports.PresetsPanel = PresetsPanel;
+exports.ProgressBar = ProgressBar;
 exports.RadioGroup = RadioGroup;
 exports.RadioInput = RadioInput;
 exports.RangeDatePicker = RangeDatePicker;
@@ -4211,6 +4614,7 @@ exports.SearchInput = SearchInput;
 exports.Spinner = Spinner;
 exports.SuccessAlert = SuccessAlert;
 exports.SuccessNotification = SuccessNotification;
+exports.SvgCircleProgress = SvgCircleProgress;
 exports.Switch = Switch;
 exports.TabButton = TabButton;
 exports.Tag = Tag;
@@ -4218,6 +4622,7 @@ exports.Text = Text;
 exports.TextArea = TextArea;
 exports.TextInput = TextInput;
 exports.TextPlaceholder = TextPlaceholder;
+exports.TimePicker = TimePicker;
 exports.Tooltip = Tooltip;
 exports.VerticalTabButton = VerticalTabButton;
 exports.VirtualList = VirtualList;
@@ -4240,6 +4645,7 @@ exports.applyButtonMods = applyButtonMods;
 exports.applyCheckboxMods = applyCheckboxMods;
 exports.applyDateSelectionMods = applyDateSelectionMods;
 exports.applyNumericInputMods = applyNumericInputMods;
+exports.applyProgressBarMods = applyProgressBarMods;
 exports.applySpinnerMods = applySpinnerMods;
 exports.applySwitchMods = applySwitchMods;
 exports.applyTagMods = applyTagMods;