@epam/uui 5.0.1 → 5.1.1

package/index.js

@@ -5,6 +5,9 @@ var uuiCore = require('@epam/uui-core');
 var React = require('react');
 var cx = require('classnames');
 var FocusLock = require('react-focus-lock');
+var dayjs = require('dayjs');
+var updateLocale = require('dayjs/plugin/updateLocale.js');
+var isoWeek = require('dayjs/plugin/isoWeek.js');
 var sortBy = require('lodash.sortby');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -30,355 +33,331 @@ function _interopNamespace(e) {
 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 updateLocale__default = /*#__PURE__*/_interopDefault(updateLocale);
+var isoWeek__default = /*#__PURE__*/_interopDefault(isoWeek);
 var sortBy__default = /*#__PURE__*/_interopDefault(sortBy);
 
-var _path$12;
-function _extends$15() { _extends$15 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$15.apply(this, arguments); }
+var _path$11;
+function _extends$14() { _extends$14 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$14.apply(this, arguments); }
 var SvgBtnCross12 = function SvgBtnCross12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$15({
+  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$12 || (_path$12 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$11 || (_path$11 = /*#__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$15 = /*#__PURE__*/React.forwardRef(SvgBtnCross12);
+var ForwardRef$14 = /*#__PURE__*/React.forwardRef(SvgBtnCross12);
 
-var _path$11;
-function _extends$14() { _extends$14 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$14.apply(this, arguments); }
+var _path$10;
+function _extends$13() { _extends$13 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$13.apply(this, arguments); }
 var SvgBtnCross18 = function SvgBtnCross18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$14({
+  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$11 || (_path$11 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$10 || (_path$10 = /*#__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$14 = /*#__PURE__*/React.forwardRef(SvgBtnCross18);
+var ForwardRef$13 = /*#__PURE__*/React.forwardRef(SvgBtnCross18);
 
-var _path$10;
-function _extends$13() { _extends$13 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$13.apply(this, arguments); }
+var _path$$;
+function _extends$12() { _extends$12 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$12.apply(this, arguments); }
 var SvgBtnCross24 = function SvgBtnCross24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$13({
+  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$10 || (_path$10 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$$ || (_path$$ = /*#__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$13 = /*#__PURE__*/React.forwardRef(SvgBtnCross24);
+var ForwardRef$12 = /*#__PURE__*/React.forwardRef(SvgBtnCross24);
 
-var _path$$;
-function _extends$12() { _extends$12 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$12.apply(this, arguments); }
+var _path$_;
+function _extends$11() { _extends$11 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$11.apply(this, arguments); }
 var SvgFoldingArrow12 = function SvgFoldingArrow12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$12({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$11({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$$ || (_path$$ = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$_ || (_path$_ = /*#__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$12 = /*#__PURE__*/React.forwardRef(SvgFoldingArrow12);
+var ForwardRef$11 = /*#__PURE__*/React.forwardRef(SvgFoldingArrow12);
 
-var _path$_;
-function _extends$11() { _extends$11 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$11.apply(this, arguments); }
+var _path$Z;
+function _extends$10() { _extends$10 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$10.apply(this, arguments); }
 var SvgFoldingArrow18 = function SvgFoldingArrow18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$11({
+  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$_ || (_path$_ = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$Z || (_path$Z = /*#__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$11 = /*#__PURE__*/React.forwardRef(SvgFoldingArrow18);
+var ForwardRef$10 = /*#__PURE__*/React.forwardRef(SvgFoldingArrow18);
 
-var _path$Z;
-function _extends$10() { _extends$10 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$10.apply(this, arguments); }
+var _path$Y;
+function _extends$$() { _extends$$ = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$$.apply(this, arguments); }
 var SvgFoldingArrow24 = function SvgFoldingArrow24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$10({
+  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$Z || (_path$Z = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$Y || (_path$Y = /*#__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$10 = /*#__PURE__*/React.forwardRef(SvgFoldingArrow24);
+var ForwardRef$$ = /*#__PURE__*/React.forwardRef(SvgFoldingArrow24);
 
-var _path$Y;
-function _extends$$() { _extends$$ = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$$.apply(this, arguments); }
+var _path$X;
+function _extends$_() { _extends$_ = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$_.apply(this, arguments); }
 var SvgAccept12 = function SvgAccept12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$$({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$_({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$Y || (_path$Y = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$X || (_path$X = /*#__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$_ = /*#__PURE__*/React.forwardRef(SvgAccept12);
 
-var _path$X;
-function _extends$_() { _extends$_ = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$_.apply(this, arguments); }
+var _path$W;
+function _extends$Z() { _extends$Z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Z.apply(this, arguments); }
 var SvgAccept18 = function SvgAccept18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$_({
+  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$X || (_path$X = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$W || (_path$W = /*#__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$_ = /*#__PURE__*/React.forwardRef(SvgAccept18);
+var ForwardRef$Z = /*#__PURE__*/React.forwardRef(SvgAccept18);
 
-var _path$W;
-function _extends$Z() { _extends$Z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Z.apply(this, arguments); }
+var _path$V;
+function _extends$Y() { _extends$Y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Y.apply(this, arguments); }
 var SvgAccept24 = function SvgAccept24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$Z({
+  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$W || (_path$W = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$V || (_path$V = /*#__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$Z = /*#__PURE__*/React.forwardRef(SvgAccept24);
+var ForwardRef$Y = /*#__PURE__*/React.forwardRef(SvgAccept24);
 
-var _path$V;
-function _extends$Y() { _extends$Y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Y.apply(this, arguments); }
+var _path$U;
+function _extends$X() { _extends$X = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$X.apply(this, arguments); }
 var SvgSearch12 = function SvgSearch12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$Y({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$X({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$V || (_path$V = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$U || (_path$U = /*#__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$Y = /*#__PURE__*/React.forwardRef(SvgSearch12);
+var ForwardRef$X = /*#__PURE__*/React.forwardRef(SvgSearch12);
 
-var _path$U;
-function _extends$X() { _extends$X = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$X.apply(this, arguments); }
+var _path$T;
+function _extends$W() { _extends$W = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$W.apply(this, arguments); }
 var SvgSearch18 = function SvgSearch18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$X({
+  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$U || (_path$U = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$T || (_path$T = /*#__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$X = /*#__PURE__*/React.forwardRef(SvgSearch18);
+var ForwardRef$W = /*#__PURE__*/React.forwardRef(SvgSearch18);
 
-var _path$T;
-function _extends$W() { _extends$W = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$W.apply(this, arguments); }
+var _path$S;
+function _extends$V() { _extends$V = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$V.apply(this, arguments); }
 var SvgSearch24 = function SvgSearch24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$W({
+  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$T || (_path$T = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$S || (_path$S = /*#__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$W = /*#__PURE__*/React.forwardRef(SvgSearch24);
+var ForwardRef$V = /*#__PURE__*/React.forwardRef(SvgSearch24);
 
-var _path$S;
-function _extends$V() { _extends$V = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$V.apply(this, arguments); }
+var _path$R;
+function _extends$U() { _extends$U = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$U.apply(this, arguments); }
 var SvgCalendar12 = function SvgCalendar12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$V({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$U({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$S || (_path$S = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$R || (_path$R = /*#__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$V = /*#__PURE__*/React.forwardRef(SvgCalendar12);
+var ForwardRef$U = /*#__PURE__*/React.forwardRef(SvgCalendar12);
 
-var _path$R;
-function _extends$U() { _extends$U = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$U.apply(this, arguments); }
+var _path$Q;
+function _extends$T() { _extends$T = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$T.apply(this, arguments); }
 var SvgCalendar18 = function SvgCalendar18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$U({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$T({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$R || (_path$R = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$Q || (_path$Q = /*#__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$U = /*#__PURE__*/React.forwardRef(SvgCalendar18);
+var ForwardRef$T = /*#__PURE__*/React.forwardRef(SvgCalendar18);
 
-var _path$Q;
-function _extends$T() { _extends$T = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$T.apply(this, arguments); }
+var _path$P;
+function _extends$S() { _extends$S = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$S.apply(this, arguments); }
 var SvgCalendar24 = function SvgCalendar24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$T({
+  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$Q || (_path$Q = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$P || (_path$P = /*#__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$T = /*#__PURE__*/React.forwardRef(SvgCalendar24);
+var ForwardRef$S = /*#__PURE__*/React.forwardRef(SvgCalendar24);
 
-var _path$P;
-function _extends$S() { _extends$S = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$S.apply(this, arguments); }
+var _path$O;
+function _extends$R() { _extends$R = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$R.apply(this, arguments); }
 var SvgInfo12 = function SvgInfo12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$S({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$R({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$P || (_path$P = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$O || (_path$O = /*#__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$S = /*#__PURE__*/React.forwardRef(SvgInfo12);
+var ForwardRef$R = /*#__PURE__*/React.forwardRef(SvgInfo12);
 
-var _path$O;
-function _extends$R() { _extends$R = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$R.apply(this, arguments); }
+var _path$N;
+function _extends$Q() { _extends$Q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Q.apply(this, arguments); }
 var SvgInfo18 = function SvgInfo18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$R({
+  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$O || (_path$O = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$N || (_path$N = /*#__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$R = /*#__PURE__*/React.forwardRef(SvgInfo18);
+var ForwardRef$Q = /*#__PURE__*/React.forwardRef(SvgInfo18);
 
-var _path$N;
-function _extends$Q() { _extends$Q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$Q.apply(this, arguments); }
+var _path$M;
+function _extends$P() { _extends$P = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$P.apply(this, arguments); }
 var SvgInfo24 = function SvgInfo24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$Q({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$P({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$N || (_path$N = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$M || (_path$M = /*#__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$Q = /*#__PURE__*/React.forwardRef(SvgInfo24);
+var ForwardRef$P = /*#__PURE__*/React.forwardRef(SvgInfo24);
 
-var _path$M;
-function _extends$P() { _extends$P = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$P.apply(this, arguments); }
+var _path$L;
+function _extends$O() { _extends$O = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$O.apply(this, arguments); }
 var SvgHelpFill10 = function SvgHelpFill10(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$P({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$O({
     width: 10,
     height: 10,
     viewBox: "0 0 10 10",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$M || (_path$M = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$L || (_path$L = /*#__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$P = /*#__PURE__*/React.forwardRef(SvgHelpFill10);
+var ForwardRef$O = /*#__PURE__*/React.forwardRef(SvgHelpFill10);
 
-var _path$L;
-function _extends$O() { _extends$O = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$O.apply(this, arguments); }
+var _path$K;
+function _extends$N() { _extends$N = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$N.apply(this, arguments); }
 var SvgHelpFill16 = function SvgHelpFill16(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$O({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$N({
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$L || (_path$L = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$K || (_path$K = /*#__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$O = /*#__PURE__*/React.forwardRef(SvgHelpFill16);
+var ForwardRef$N = /*#__PURE__*/React.forwardRef(SvgHelpFill16);
 
 const systemIcons = {
     18: {
-        clear: ForwardRef$15,
-        foldingArrow: ForwardRef$12,
-        accept: ForwardRef$$,
-        search: ForwardRef$Y,
-        calendar: ForwardRef$V,
-        info: ForwardRef$S,
-        help: ForwardRef$P,
-    },
-    24: {
-        clear: ForwardRef$15,
-        foldingArrow: ForwardRef$12,
-        accept: ForwardRef$$,
-        search: ForwardRef$Y,
-        calendar: ForwardRef$V,
-        info: ForwardRef$S,
-        help: ForwardRef$P,
-    },
-    30: {
-        clear: ForwardRef$14,
-        foldingArrow: ForwardRef$11,
-        accept: ForwardRef$_,
-        search: ForwardRef$X,
-        calendar: ForwardRef$U,
-        info: ForwardRef$R,
-        help: ForwardRef$P,
-    },
-    36: {
         clear: ForwardRef$14,
         foldingArrow: ForwardRef$11,
         accept: ForwardRef$_,
@@ -387,7 +366,7 @@ const systemIcons = {
         info: ForwardRef$R,
         help: ForwardRef$O,
     },
-    42: {
+    24: {
         clear: ForwardRef$14,
         foldingArrow: ForwardRef$11,
         accept: ForwardRef$_,
@@ -396,7 +375,7 @@ const systemIcons = {
         info: ForwardRef$R,
         help: ForwardRef$O,
     },
-    48: {
+    30: {
         clear: ForwardRef$13,
         foldingArrow: ForwardRef$10,
         accept: ForwardRef$Z,
@@ -405,27 +384,54 @@ const systemIcons = {
         info: ForwardRef$Q,
         help: ForwardRef$O,
     },
-    60: {
+    36: {
         clear: ForwardRef$13,
         foldingArrow: ForwardRef$10,
         accept: ForwardRef$Z,
         search: ForwardRef$W,
         calendar: ForwardRef$T,
         info: ForwardRef$Q,
-        help: ForwardRef$O,
+        help: ForwardRef$N,
+    },
+    42: {
+        clear: ForwardRef$13,
+        foldingArrow: ForwardRef$10,
+        accept: ForwardRef$Z,
+        search: ForwardRef$W,
+        calendar: ForwardRef$T,
+        info: ForwardRef$Q,
+        help: ForwardRef$N,
+    },
+    48: {
+        clear: ForwardRef$12,
+        foldingArrow: ForwardRef$$,
+        accept: ForwardRef$Y,
+        search: ForwardRef$V,
+        calendar: ForwardRef$S,
+        info: ForwardRef$P,
+        help: ForwardRef$N,
+    },
+    60: {
+        clear: ForwardRef$12,
+        foldingArrow: ForwardRef$$,
+        accept: ForwardRef$Y,
+        search: ForwardRef$V,
+        calendar: ForwardRef$S,
+        info: ForwardRef$P,
+        help: ForwardRef$N,
     },
     none: {
-        clear: ForwardRef$14,
-        foldingArrow: ForwardRef$11,
-        accept: ForwardRef$_,
-        search: ForwardRef$X,
-        calendar: ForwardRef$U,
-        info: ForwardRef$R,
-        help: ForwardRef$O,
+        clear: ForwardRef$13,
+        foldingArrow: ForwardRef$10,
+        accept: ForwardRef$Z,
+        search: ForwardRef$W,
+        calendar: ForwardRef$T,
+        info: ForwardRef$Q,
+        help: ForwardRef$N,
     },
 };
 
-var buttonCss = {"root":"Button-module_root__4Qa5o","mode-solid":"Button-module_mode-solid__bzLPQ","mode-outline":"Button-module_mode-outline__QArEu","mode-none":"Button-module_mode-none__McQO-","mode-ghost":"Button-module_mode-ghost__Giwma","size-18":"Button-module_size-18__2FQcO","size-24":"Button-module_size-24__bHlC2","size-30":"Button-module_size-30__FmOt4","size-36":"Button-module_size-36__eBT-M","size-42":"Button-module_size-42__KHTm0","size-48":"Button-module_size-48__zeJhh","modeSolid":"Button-module_mode-solid__bzLPQ","modeOutline":"Button-module_mode-outline__QArEu","modeNone":"Button-module_mode-none__McQO-","modeGhost":"Button-module_mode-ghost__Giwma","size18":"Button-module_size-18__2FQcO","size24":"Button-module_size-24__bHlC2","size30":"Button-module_size-30__FmOt4","size36":"Button-module_size-36__eBT-M","size42":"Button-module_size-42__KHTm0","size48":"Button-module_size-48__zeJhh"};
+var buttonCss = {"root":"_8VqrY8","mode-solid":"J0cSO1","mode-outline":"c3go-D","mode-none":"_4E3SpU","mode-ghost":"_20eYu6","size-18":"FbC1rL","size-24":"whlLZ1","size-30":"I5D9TX","size-36":"_6VRMC8","size-42":"dvQ3Dz","size-48":"QCfqGx","modeSolid":"J0cSO1","modeOutline":"c3go-D","modeNone":"_4E3SpU","modeGhost":"_20eYu6","size18":"FbC1rL","size24":"whlLZ1","size30":"I5D9TX","size36":"_6VRMC8","size42":"dvQ3Dz","size48":"QCfqGx"};
 
 const allButtonColors = [
     'accent', 'primary', 'secondary', 'negative',
@@ -444,17 +450,17 @@ const Button = uuiCore.withMods(uuiComponents.Button, applyButtonMods, (props) =
     clearIcon: systemIcons[props.size || defaultSize$a].clear,
 }));
 
-var css$13 = {"root":"IconButton-module_root__M67sa"};
+var css$18 = {"root":"PJgbfC"};
 
 const allIconColors = [
     'info', 'success', 'warning', 'error', 'secondary', 'default',
 ];
 function applyIconButtonMods(mods) {
-    return [`icon-button-${mods.color || 'default'}`, css$13.root];
+    return [`icon-button-${mods.color || 'default'}`, css$18.root];
 }
 const IconButton = uuiCore.withMods(uuiComponents.IconButton, applyIconButtonMods);
 
-var css$12 = {"root":"LinkButton-module_root__HlbHi","size-18":"LinkButton-module_size-18__LxiaK","size-24":"LinkButton-module_size-24__xcElR","size-30":"LinkButton-module_size-30__rZ9BD","size-36":"LinkButton-module_size-36__WD3lo","size-42":"LinkButton-module_size-42__iMihL","size-48":"LinkButton-module_size-48__8OfbW","size18":"LinkButton-module_size-18__LxiaK","size24":"LinkButton-module_size-24__xcElR","size30":"LinkButton-module_size-30__rZ9BD","size36":"LinkButton-module_size-36__WD3lo","size42":"LinkButton-module_size-42__iMihL","size48":"LinkButton-module_size-48__8OfbW"};
+var css$17 = {"root":"wdtlHa","size-18":"Y3e51Y","size-24":"VRtARV","size-30":"_9Wqcrk","size-36":"p6AnYX","size-42":"P7GjFG","size-48":"FxlIWP","size18":"Y3e51Y","size24":"VRtARV","size30":"_9Wqcrk","size36":"p6AnYX","size42":"P7GjFG","size48":"FxlIWP"};
 
 function getIconClass(props) {
     const classList = {
@@ -477,8 +483,8 @@ const defaultSize$9 = '36';
 const allLinkButtonColors = ['primary', 'secondary', 'contrast'];
 function applyLinkButtonMods(mods) {
     return [
-        css$12.root,
-        css$12['size-' + (mods.size || defaultSize$9)],
+        css$17.root,
+        css$17['size-' + (mods.size || defaultSize$9)],
         ...getIconClass(mods),
         `link-button-${mods.color || 'primary'}`,
     ];
@@ -488,23 +494,23 @@ const LinkButton = uuiCore.withMods(uuiComponents.Button, applyLinkButtonMods, (
     clearIcon: systemIcons[props.size || defaultSize$9].clear,
 }));
 
-var css$11 = {"root":"TabButton-module_root__8Z4AH","uui-notification":"TabButton-module_uui-notification__M4BZU","size-36":"TabButton-module_size-36__RA4lK","size-48":"TabButton-module_size-48__tiKgN","size-60":"TabButton-module_size-60__IcM0r","uuiNotification":"TabButton-module_uui-notification__M4BZU","size36":"TabButton-module_size-36__RA4lK","size48":"TabButton-module_size-48__tiKgN","size60":"TabButton-module_size-60__IcM0r"};
+var css$16 = {"root":"wkx91-","uui-notification":"GltTci","size-36":"NX0-h3","size-48":"yo-Gjm","size-60":"_8Nc4Zp","uuiNotification":"GltTci","size36":"NX0-h3","size48":"yo-Gjm","size60":"_8Nc4Zp"};
 
 function applyTabButtonMods(mods) {
     return [
-        css$11.root,
+        css$16.root,
         'informer-default',
-        css$11['size-' + (mods.size || '48')],
-        mods.withNotify && css$11.uuiNotification,
+        css$16['size-' + (mods.size || '48')],
+        mods.withNotify && css$16.uuiNotification,
         ...getIconClass(mods),
     ];
 }
 const TabButton = 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$10 = {"root":"VerticalTabButton-module_root__vL7Lg"};
+var css$15 = {"root":"_6UuXuZ"};
 
 function applyVerticalTabButtonMods() {
-    return [css$10.root];
+    return [css$15.root];
 }
 const VerticalTabButton = uuiCore.withMods(TabButton, applyVerticalTabButtonMods);
 
@@ -540,89 +546,89 @@ exports.EditMode = void 0;
     EditMode["INLINE"] = "inline";
 })(exports.EditMode || (exports.EditMode = {}));
 
-var _path$K;
-function _extends$N() { _extends$N = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$N.apply(this, arguments); }
+var _path$J;
+function _extends$M() { _extends$M = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$M.apply(this, arguments); }
 var SvgCheck12 = function SvgCheck12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$N({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$M({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$K || (_path$K = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$J || (_path$J = /*#__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$N = /*#__PURE__*/React.forwardRef(SvgCheck12);
+var ForwardRef$M = /*#__PURE__*/React.forwardRef(SvgCheck12);
 
-var _path$J;
-function _extends$M() { _extends$M = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$M.apply(this, arguments); }
+var _path$I;
+function _extends$L() { _extends$L = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$L.apply(this, arguments); }
 var SvgCheck18 = function SvgCheck18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$M({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$L({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$J || (_path$J = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$I || (_path$I = /*#__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$M = /*#__PURE__*/React.forwardRef(SvgCheck18);
+var ForwardRef$L = /*#__PURE__*/React.forwardRef(SvgCheck18);
 
-var _path$I;
-function _extends$L() { _extends$L = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$L.apply(this, arguments); }
+var _path$H;
+function _extends$K() { _extends$K = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$K.apply(this, arguments); }
 var SvgPartlySelect12 = function SvgPartlySelect12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$L({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$K({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$I || (_path$I = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$H || (_path$H = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M9 5v2H3V5z"
   })));
 };
-var ForwardRef$L = /*#__PURE__*/React.forwardRef(SvgPartlySelect12);
+var ForwardRef$K = /*#__PURE__*/React.forwardRef(SvgPartlySelect12);
 
-var _path$H;
-function _extends$K() { _extends$K = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$K.apply(this, arguments); }
+var _path$G;
+function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); }
 var SvgPartlySelect18 = function SvgPartlySelect18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$K({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$J({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$H || (_path$H = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$G || (_path$G = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M14 8v2H4V8z"
   })));
 };
-var ForwardRef$K = /*#__PURE__*/React.forwardRef(SvgPartlySelect18);
+var ForwardRef$J = /*#__PURE__*/React.forwardRef(SvgPartlySelect18);
 
-var css$$ = {"root":"Checkbox-module_root__EazHx","size-18":"Checkbox-module_size-18__IUFwO","size-12":"Checkbox-module_size-12__xKb3K","mode-cell":"Checkbox-module_mode-cell__O3Zfg","size18":"Checkbox-module_size-18__IUFwO","size12":"Checkbox-module_size-12__xKb3K","modeCell":"Checkbox-module_mode-cell__O3Zfg"};
+var css$14 = {"root":"f9KDxU","size-18":"_0HLNAf","size-12":"Mj9CmD","mode-cell":"o4uXIT","size18":"_0HLNAf","size12":"Mj9CmD","modeCell":"o4uXIT"};
 
 function applyCheckboxMods(mods) {
     return [
-        css$$.root, css$$['size-' + (mods.size || '18')], css$$['mode-' + (mods.mode || 'form')],
+        css$14.root, css$14['size-' + (mods.size || '18')], css$14['mode-' + (mods.mode || 'form')],
     ];
 }
 const applyUUICheckboxProps = (props) => ({
-    icon: props.size === '12' ? ForwardRef$N : ForwardRef$M,
-    indeterminateIcon: props.size === '12' ? ForwardRef$L : ForwardRef$K,
+    icon: props.size === '12' ? ForwardRef$M : ForwardRef$L,
+    indeterminateIcon: props.size === '12' ? ForwardRef$K : ForwardRef$J,
 });
 const Checkbox = uuiCore.withMods(uuiComponents.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$_ = {"root":"RadioInput-module_root__bRFVI","size-18":"RadioInput-module_size-18__UYM5r","size-12":"RadioInput-module_size-12__oYoyV","size18":"RadioInput-module_size-18__UYM5r","size12":"RadioInput-module_size-12__oYoyV"};
+var css$13 = {"root":"EREKhe","size-18":"_4Qft9T","size-12":"ICBM98","size18":"_4Qft9T","size12":"ICBM98"};
 
 var _circle;
-function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); }
+function _extends$I() { _extends$I = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$I.apply(this, arguments); }
 var SvgRadioPoint = function SvgRadioPoint(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$J({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$I({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
@@ -634,18 +640,18 @@ var SvgRadioPoint = function SvgRadioPoint(props, ref) {
     r: 6
   })));
 };
-var ForwardRef$J = /*#__PURE__*/React.forwardRef(SvgRadioPoint);
+var ForwardRef$I = /*#__PURE__*/React.forwardRef(SvgRadioPoint);
 
 function applyRadioInputMods(mods) {
-    return [css$_.root, css$_['size-' + (mods.size || '18')]];
+    return [css$13.root, css$13['size-' + (mods.size || '18')]];
 }
-const RadioInput = uuiCore.withMods(uuiComponents.RadioInput, applyRadioInputMods, () => ({ icon: ForwardRef$J }));
+const RadioInput = uuiCore.withMods(uuiComponents.RadioInput, applyRadioInputMods, () => ({ icon: ForwardRef$I }));
 
-var css$Z = {"root":"Switch-module_root__-uM9q","size-12":"Switch-module_size-12__3txg-","size-18":"Switch-module_size-18__RiCkg","size-24":"Switch-module_size-24__XRE9d","size12":"Switch-module_size-12__3txg-","size18":"Switch-module_size-18__RiCkg","size24":"Switch-module_size-24__XRE9d"};
+var css$12 = {"root":"-AtOII","size-12":"IWvYBg","size-18":"MHLJ05","size-24":"Wh1fv6","size12":"IWvYBg","size18":"MHLJ05","size24":"Wh1fv6"};
 
 function applySwitchMods(mods) {
     return [
-        'switch-vars', css$Z.root, css$Z['size-' + (mods.size || '18')],
+        'switch-vars', css$12.root, css$12['size-' + (mods.size || '18')],
     ];
 }
 const Switch = uuiCore.withMods(uuiComponents.Switch, applySwitchMods);
@@ -664,7 +670,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 function __rest(s, e) {
@@ -687,9 +693,14 @@ function __awaiter(thisArg, _arguments, P, generator) {
         function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
-var textInputCss = {"root":"TextInput-module_root__6QJUJ","mode-form":"TextInput-module_mode-form__91FyF","mode-inline":"TextInput-module_mode-inline__vzefw","mode-cell":"TextInput-module_mode-cell__PBof4","size-24":"TextInput-module_size-24__l0haT","size-30":"TextInput-module_size-30__-wR15","size-36":"TextInput-module_size-36__KTftJ","size-42":"TextInput-module_size-42__0U0O7","size-48":"TextInput-module_size-48__IMJgv","modeForm":"TextInput-module_mode-form__91FyF","modeInline":"TextInput-module_mode-inline__vzefw","modeCell":"TextInput-module_mode-cell__PBof4","size24":"TextInput-module_size-24__l0haT","size30":"TextInput-module_size-30__-wR15","size36":"TextInput-module_size-36__KTftJ","size42":"TextInput-module_size-42__0U0O7","size48":"TextInput-module_size-48__IMJgv"};
+var textInputCss = {"root":"GJMm1R","mode-form":"_5hAkUR","mode-inline":"-tI-P6","mode-cell":"ytSYhn","size-24":"W3XcQE","size-30":"uIDEjj","size-36":"rUoG4e","size-42":"V2ntbp","size-48":"LLcDun","modeForm":"_5hAkUR","modeInline":"-tI-P6","modeCell":"ytSYhn","size24":"W3XcQE","size30":"uIDEjj","size36":"rUoG4e","size42":"V2ntbp","size48":"LLcDun"};
 
 const defaultSize$8 = '36';
 const defaultMode$4 = exports.EditMode.FORM;
@@ -718,131 +729,131 @@ const SearchInput = React__namespace.default.forwardRef((props, ref) => {
                 : undefined, type: "search", inputMode: "search", ref: ref }, textInputProps, iEditable))) })));
 });
 
-var css$Y = {"root":"Accordion-module_root__ZEuSB","mode-block":"Accordion-module_mode-block__bs5F0","mode-inline":"Accordion-module_mode-inline__xhedZ","padding-0":"Accordion-module_padding-0__DiVjX","padding-6":"Accordion-module_padding-6__Vvfdz","padding-12":"Accordion-module_padding-12__BtS2A","padding-18":"Accordion-module_padding-18__WdS0b","modeBlock":"Accordion-module_mode-block__bs5F0","modeInline":"Accordion-module_mode-inline__xhedZ","padding0":"Accordion-module_padding-0__DiVjX","padding6":"Accordion-module_padding-6__Vvfdz","padding12":"Accordion-module_padding-12__BtS2A","padding18":"Accordion-module_padding-18__WdS0b"};
+var css$11 = {"root":"wlkpfY","mode-block":"ATY7Dj","mode-inline":"V1-OSv","padding-0":"NFsyZK","padding-6":"oX47lN","padding-12":"qBguVf","padding-18":"vKbCmJ","modeBlock":"ATY7Dj","modeInline":"V1-OSv","padding0":"NFsyZK","padding6":"oX47lN","padding12":"qBguVf","padding18":"vKbCmJ"};
 
 function applyAccordionMods(mods) {
     return [
-        css$Y.root, css$Y['mode-' + (mods.mode || 'block')], mods.padding && css$Y['padding-' + mods.padding],
+        css$11.root, css$11['mode-' + (mods.mode || 'block')], mods.padding && css$11['padding-' + mods.padding],
     ];
 }
 const Accordion = uuiCore.withMods(uuiComponents.Accordion, applyAccordionMods, (mods) => ({
     dropdownIcon: mods.dropdownIcon !== null && systemIcons[mods.mode === 'block' ? '60' : '30'].foldingArrow,
 }));
 
-var css$X = {"root":"ControlGroup-module_root__DmQxW"};
+var css$10 = {"root":"ZkXdC8"};
 
-const ControlGroup = uuiCore.withMods(uuiComponents.ControlGroup, () => [css$X.root]);
+const ControlGroup = uuiCore.withMods(uuiComponents.ControlGroup, () => [css$10.root]);
 
-var css$W = {"root":"FlexRow-module_root__mHK4u","border-bottom":"FlexRow-module_border-bottom__6xvNn","top-shadow":"FlexRow-module_top-shadow__LW4XM","size-24":"FlexRow-module_size-24__VFGkf","size-30":"FlexRow-module_size-30__ivyen","size-36":"FlexRow-module_size-36__KmXJ6","size-42":"FlexRow-module_size-42__YbRt-","size-48":"FlexRow-module_size-48__g1UXf","padding-6":"FlexRow-module_padding-6__N--3z","padding-12":"FlexRow-module_padding-12__KYt01","padding-18":"FlexRow-module_padding-18__PXf5c","padding-24":"FlexRow-module_padding-24__-T3nu","margin-24":"FlexRow-module_margin-24__lU0ET","margin-12":"FlexRow-module_margin-12__IRWHk","vPadding-12":"FlexRow-module_vPadding-12__Vp8iK","vPadding-18":"FlexRow-module_vPadding-18__CV5Qv","vPadding-24":"FlexRow-module_vPadding-24__6PiHV","vPadding-36":"FlexRow-module_vPadding-36__o0gq8","vPadding-48":"FlexRow-module_vPadding-48__qvhV-","spacing-6":"FlexRow-module_spacing-6__NmXEo","spacing-12":"FlexRow-module_spacing-12__QkuEd","spacing-18":"FlexRow-module_spacing-18__YPHeH","borderBottom":"FlexRow-module_border-bottom__6xvNn","topShadow":"FlexRow-module_top-shadow__LW4XM","size24":"FlexRow-module_size-24__VFGkf","size30":"FlexRow-module_size-30__ivyen","size36":"FlexRow-module_size-36__KmXJ6","size42":"FlexRow-module_size-42__YbRt-","size48":"FlexRow-module_size-48__g1UXf","padding6":"FlexRow-module_padding-6__N--3z","padding12":"FlexRow-module_padding-12__KYt01","padding18":"FlexRow-module_padding-18__PXf5c","padding24":"FlexRow-module_padding-24__-T3nu","margin24":"FlexRow-module_margin-24__lU0ET","margin12":"FlexRow-module_margin-12__IRWHk","vPadding12":"FlexRow-module_vPadding-12__Vp8iK","vPadding18":"FlexRow-module_vPadding-18__CV5Qv","vPadding24":"FlexRow-module_vPadding-24__6PiHV","vPadding36":"FlexRow-module_vPadding-36__o0gq8","vPadding48":"FlexRow-module_vPadding-48__qvhV-","spacing6":"FlexRow-module_spacing-6__NmXEo","spacing12":"FlexRow-module_spacing-12__QkuEd","spacing18":"FlexRow-module_spacing-18__YPHeH"};
+var css$$ = {"root":"L9F42D","border-bottom":"_25OoIr","top-shadow":"bh7Vna","size-24":"avN-Wf","size-30":"_4a50jF","size-36":"YWwn1y","size-42":"I8-1--","size-48":"KI98J8","padding-6":"C6dO4l","padding-12":"Djwgqi","padding-18":"_7VZNrQ","padding-24":"_4xpFC5","margin-24":"P2cS7N","margin-12":"ks2Ges","vPadding-12":"FCxO4c","vPadding-18":"_4BOCW7","vPadding-24":"uovHLQ","vPadding-36":"x6G5tk","vPadding-48":"_91Mta0","spacing-6":"U6ze-i","spacing-12":"ip2W5s","spacing-18":"WXYMwg","borderBottom":"_25OoIr","topShadow":"bh7Vna","size24":"avN-Wf","size30":"_4a50jF","size36":"YWwn1y","size42":"I8-1--","size48":"KI98J8","padding6":"C6dO4l","padding12":"Djwgqi","padding18":"_7VZNrQ","padding24":"_4xpFC5","margin24":"P2cS7N","margin12":"ks2Ges","vPadding12":"FCxO4c","vPadding18":"_4BOCW7","vPadding24":"uovHLQ","vPadding36":"x6G5tk","vPadding48":"_91Mta0","spacing6":"U6ze-i","spacing12":"ip2W5s","spacing18":"WXYMwg"};
 
-const FlexCell = uuiCore.withMods(uuiComponents.FlexCell, (props) => [css$W.flexCell]);
+const FlexCell = uuiCore.withMods(uuiComponents.FlexCell, () => [css$$.flexCell]);
 
 const FlexRow = uuiCore.withMods(uuiComponents.FlexRow, (props) => {
     return [
-        css$W.root, props.size !== null && css$W['size-' + (props.size || '36')], props.padding && css$W['padding-' + props.padding], props.vPadding && css$W['vPadding-' + props.vPadding], props.margin && css$W['margin-' + props.margin], props.topShadow && css$W.topShadow, props.borderBottom && css$W.borderBottom, props.spacing && css$W['spacing-' + props.spacing],
+        css$$.root, props.size !== null && css$$['size-' + (props.size || '36')], props.padding && css$$['padding-' + props.padding], props.vPadding && css$$['vPadding-' + props.vPadding], props.margin && css$$['margin-' + props.margin], props.topShadow && css$$.topShadow, props.borderBottom && css$$.borderBottom, props.spacing && css$$['spacing-' + props.spacing],
     ];
 });
 
-var css$V = {"root":"Panel-module_root__D-h8X","margin-24":"Panel-module_margin-24__oQkRN","padding-12":"Panel-module_padding-12__9KnUY","padding-24":"Panel-module_padding-24__YQgfT","shadow":"Panel-module_shadow__4fT6L","margin24":"Panel-module_margin-24__oQkRN","padding12":"Panel-module_padding-12__9KnUY","padding24":"Panel-module_padding-24__YQgfT"};
+var css$_ = {"root":"_75cfoV","margin-24":"r8-hwl","padding-12":"NNNuW5","padding-24":"vHd6oa","shadow":"pVQN-r","margin24":"r8-hwl","padding12":"NNNuW5","padding24":"vHd6oa"};
 
 const Panel = uuiCore.withMods(uuiComponents.VPanel, (props) => [
-    'uui-panel', css$V.root, props.shadow && css$V.shadow, props.margin && css$V['margin-' + props.margin],
+    'uui-panel', css$_.root, props.shadow && css$_.shadow, props.margin && css$_['margin-' + props.margin],
 ]);
 
-var _path$G;
-function _extends$I() { _extends$I = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$I.apply(this, arguments); }
+var _path$F;
+function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); }
 var SvgNotificationCheckCircleFill24 = function SvgNotificationCheckCircleFill24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$I({
+  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$G || (_path$G = /*#__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 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
   })));
 };
-var ForwardRef$I = /*#__PURE__*/React.forwardRef(SvgNotificationCheckCircleFill24);
+var ForwardRef$H = /*#__PURE__*/React.forwardRef(SvgNotificationCheckCircleFill24);
 
-var _path$F;
-function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); }
+var _path$E;
+function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); }
 var SvgNotificationWarningFill24 = function SvgNotificationWarningFill24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
+  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$F || (_path$F = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$E || (_path$E = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
   })));
 };
-var ForwardRef$H = /*#__PURE__*/React.forwardRef(SvgNotificationWarningFill24);
+var ForwardRef$G = /*#__PURE__*/React.forwardRef(SvgNotificationWarningFill24);
 
-var _path$E;
-function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); }
+var _path$D;
+function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); }
 var SvgNotificationErrorFill24 = function SvgNotificationErrorFill24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
+  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$E || (_path$E = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$D || (_path$D = /*#__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$G = /*#__PURE__*/React.forwardRef(SvgNotificationErrorFill24);
+var ForwardRef$F = /*#__PURE__*/React.forwardRef(SvgNotificationErrorFill24);
 
-var _path$D;
-function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); }
+var _path$C;
+function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); }
 var SvgNotificationHelpFill24 = function SvgNotificationHelpFill24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$F({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$D || (_path$D = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$C || (_path$C = /*#__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$F = /*#__PURE__*/React.forwardRef(SvgNotificationHelpFill24);
+var ForwardRef$E = /*#__PURE__*/React.forwardRef(SvgNotificationHelpFill24);
 
-var _path$C;
-function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); }
+var _path$B;
+function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
 var SvgNavigationClose24$1 = function SvgNavigationClose24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$C || (_path$C = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$B || (_path$B = /*#__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$E = /*#__PURE__*/React.forwardRef(SvgNavigationClose24$1);
+var ForwardRef$D = /*#__PURE__*/React.forwardRef(SvgNavigationClose24$1);
 
-var css$U = {"root":"Alert-module_root__vWIgd","icon-wrapper":"Alert-module_icon-wrapper__eCMNq","alert-wrapper":"Alert-module_alert-wrapper__aSltE","action-wrapper":"Alert-module_action-wrapper__fzVI-","action-icon":"Alert-module_action-icon__PUBtv","action-link":"Alert-module_action-link__S0nRl","close-icon":"Alert-module_close-icon__vtbPn","main-path":"Alert-module_main-path__pW0Ya","content":"Alert-module_content__F-yZG","iconWrapper":"Alert-module_icon-wrapper__eCMNq","alertWrapper":"Alert-module_alert-wrapper__aSltE","actionWrapper":"Alert-module_action-wrapper__fzVI-","actionIcon":"Alert-module_action-icon__PUBtv","actionLink":"Alert-module_action-link__S0nRl","closeIcon":"Alert-module_close-icon__vtbPn","mainPath":"Alert-module_main-path__pW0Ya"};
+var css$Z = {"root":"_2Thw1n","icon-wrapper":"z2bOw3","alert-wrapper":"_2NMEeW","action-wrapper":"_57O3WA","action-icon":"mlOF-K","action-link":"Tu366D","close-icon":"UXPlmR","main-path":"zyVGqR","content":"yvHLqF","iconWrapper":"z2bOw3","alertWrapper":"_2NMEeW","actionWrapper":"_57O3WA","actionIcon":"mlOF-K","actionLink":"Tu366D","closeIcon":"UXPlmR","mainPath":"zyVGqR"};
 
-const Alert = React__namespace.forwardRef((props, ref) => (React__namespace.createElement("div", Object.assign({ role: "alert", ref: ref, className: cx__default.default(css$U.alertWrapper, `alert-${props.color || 'default'}`, css$U.root, props.cx) }, props.rawProps),
-    React__namespace.createElement("div", { className: css$U.mainPath },
-        props.icon && (React__namespace.createElement("div", { className: css$U.iconWrapper },
-            React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon, cx: css$U.actionIcon }))),
-        React__namespace.createElement("div", { className: css$U.content },
+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 },
             props.children,
-            props.actions && (React__namespace.createElement("div", { className: css$U.actionWrapper }, props.actions.map((action) => (React__namespace.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$U.actionLink, size: "30" })))))),
-        props.onClose && React__namespace.createElement(IconButton, { icon: ForwardRef$E, color: "default", onClick: props.onClose, cx: css$U.closeIcon })))));
-const WarningAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$H, color: "warning", ref: ref }, props)));
-const SuccessAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$I, color: "success", ref: ref }, props)));
-const HintAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$F, color: "info", ref: ref }, props)));
-const ErrorAlert = React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, Object.assign({ icon: ForwardRef$G, color: "error", ref: ref }, props)));
+            props.actions && (React__namespace.createElement("div", { className: css$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() {
@@ -850,16 +861,16 @@ class Dropdown extends React__namespace.Component {
     }
 }
 
-var css$T = {"root":"DropdownContainer-module_root__mFFyf"};
+var css$Y = {"root":"_8ToT4D"};
 
 function applyDropdownContainerMods(mods) {
     return [
-        css$T.root, mods.vPadding && `vPadding-${mods.vPadding}`, mods.padding && `padding-${mods.padding}`,
+        css$Y.root, mods.vPadding && `vPadding-${mods.vPadding}`, mods.padding && `padding-${mods.padding}`,
     ];
 }
 const DropdownContainer = uuiCore.withMods(uuiComponents.DropdownContainer, applyDropdownContainerMods);
 
-var css$S = {"menuRoot":"DropdownMenu-module_menuRoot__DcQwM","bodyRoot":"DropdownMenu-module_bodyRoot__4rx-A","submenuRootItem":"DropdownMenu-module_submenuRootItem__wZojf","iconAfter":"DropdownMenu-module_iconAfter__w4DLS","iconCheck":"DropdownMenu-module_iconCheck__7xO2Q","splitterRoot":"DropdownMenu-module_splitterRoot__ZLjVG","splitter":"DropdownMenu-module_splitter__5OKDD","headerRoot":"DropdownMenu-module_headerRoot__W4lYd","itemRoot":"DropdownMenu-module_itemRoot__rS7Eo","icon":"DropdownMenu-module_icon__IN6EW","link":"DropdownMenu-module_link__bmFZI"};
+var css$X = {"menuRoot":"x3hIV3","bodyRoot":"KJMqO-","submenuRootItem":"FVZ2LP","iconAfter":"ANYUZ-","iconCheck":"SlyqHl","splitterRoot":"LkAzjS","splitter":"b90dig","headerRoot":"o-WYzo","itemRoot":"REJPky","icon":"mRdW9l","link":"f3N9tu"};
 
 const icons = systemIcons['36'];
 exports.IDropdownControlKeys = void 0;
@@ -898,10 +909,10 @@ function DropdownMenuContainer(props) {
             props.onClose();
         }
     };
-    return (React__namespace.default.createElement(FocusLock__default.default, { as: "menu", className: css$S.menuRoot, returnFocus: true, autoFocus: false, ref: menuRef, lockProps: { onKeyDown: handleArrowKeys, tabIndex: -1 } },
+    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 } }))));
 }
-const DropdownMenuBody = uuiCore.withMods(DropdownMenuContainer, () => [css$S.bodyRoot], ({ style }) => ({ style }));
+const DropdownMenuBody = uuiCore.withMods(DropdownMenuContainer, () => [css$X.bodyRoot], ({ style }) => ({ style }));
 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;
@@ -922,37 +933,52 @@ 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$S.icon, iconPosition === 'right' ? css$S.iconAfter : css$S.iconBefore) }));
+        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) }));
         return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
             isIconBefore && iconElement,
-            React__namespace.default.createElement(uuiComponents.Text, { cx: css$S.caption }, caption),
+            React__namespace.default.createElement(uuiComponents.Text, { cx: css$X.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$S.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$S.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$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: {
             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$S.selectedCheckmark })));
+        isSelected && React__namespace.default.createElement(uuiComponents.IconContainer, { icon: icons.accept, cx: css$X.selectedCheckmark })));
 });
 DropdownMenuButton.displayName = 'DropdownMenuButton';
 function DropdownMenuSplitter(props) {
-    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$S.splitterRoot) },
-        React__namespace.default.createElement("hr", { className: css$S.splitter })));
+    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$X.splitterRoot) },
+        React__namespace.default.createElement("hr", { className: css$X.splitter })));
 }
 function DropdownMenuHeader(props) {
-    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$S.headerRoot) },
-        React__namespace.default.createElement("span", { className: css$S.header }, props.caption)));
+    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)));
 }
 function DropdownSubMenu(props) {
-    return (React__namespace.default.createElement(uuiComponents.Dropdown, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: "right-start", renderBody: (dropdownProps) => React__namespace.default.createElement(DropdownMenuBody, Object.assign({ closeOnKey: exports.IDropdownControlKeys.LEFT_ARROW }, props, dropdownProps)), renderTarget: (_a) => {
+    const subMenuModifiers = [
+        {
+            name: 'offset',
+            options: {
+                offset: ({ placement }) => {
+                    if (placement === 'right-start') {
+                        return [-6, 0];
+                    }
+                    else {
+                        return [6, 0];
+                    }
+                },
+            },
+        },
+    ];
+    return (React__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$S.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
+            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)));
         } }));
 }
 function DropdownMenuSwitchButton(props) {
@@ -969,16 +995,16 @@ function DropdownMenuSwitchButton(props) {
             onHandleValueChange(!isSelected);
         }
     };
-    return (React__namespace.default.createElement(uuiComponents.FlexRow, { cx: uuiCore.cx(props.cx, css$S.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$S.iconBefore }),
-        React__namespace.default.createElement(uuiComponents.Text, { cx: css$S.caption }, caption),
+    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),
         React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
         React__namespace.default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
 }
 
-var css$R = {"root":"Text-module_root__9-pr8"};
+var css$W = {"root":"_4R-was"};
 
-var css$Q = {"line-height-12":"text-layout-module_line-height-12__QQGU-","line-height-18":"text-layout-module_line-height-18__16R3r","line-height-24":"text-layout-module_line-height-24__vI-6P","line-height-30":"text-layout-module_line-height-30__aou0J","font-size-10":"text-layout-module_font-size-10__OLPOz","font-size-12":"text-layout-module_font-size-12__r4xmU","font-size-14":"text-layout-module_font-size-14__XWFeT","font-size-16":"text-layout-module_font-size-16__nEgRV","font-size-18":"text-layout-module_font-size-18__yDUSx","font-size-24":"text-layout-module_font-size-24__QHPEa","v-padding-2":"text-layout-module_v-padding-2__UBv9q","v-padding-3":"text-layout-module_v-padding-3__ZvxzI","v-padding-5":"text-layout-module_v-padding-5__e8AxV","v-padding-6":"text-layout-module_v-padding-6__ZiW3Z","v-padding-8":"text-layout-module_v-padding-8__F0NW1","v-padding-9":"text-layout-module_v-padding-9__iZBVm","v-padding-11":"text-layout-module_v-padding-11__fJ5I9","v-padding-12":"text-layout-module_v-padding-12__Wbxua","v-padding-14":"text-layout-module_v-padding-14__TARL2","v-padding-15":"text-layout-module_v-padding-15__t4xTz","v-padding-17":"text-layout-module_v-padding-17__mVG58","v-padding-18":"text-layout-module_v-padding-18__b4Zdk","v-padding-23":"text-layout-module_v-padding-23__BqIm6","v-padding-24":"text-layout-module_v-padding-24__LM1Rg","lineHeight12":"text-layout-module_line-height-12__QQGU-","lineHeight18":"text-layout-module_line-height-18__16R3r","lineHeight24":"text-layout-module_line-height-24__vI-6P","lineHeight30":"text-layout-module_line-height-30__aou0J","fontSize10":"text-layout-module_font-size-10__OLPOz","fontSize12":"text-layout-module_font-size-12__r4xmU","fontSize14":"text-layout-module_font-size-14__XWFeT","fontSize16":"text-layout-module_font-size-16__nEgRV","fontSize18":"text-layout-module_font-size-18__yDUSx","fontSize24":"text-layout-module_font-size-24__QHPEa","vPadding2":"text-layout-module_v-padding-2__UBv9q","vPadding3":"text-layout-module_v-padding-3__ZvxzI","vPadding5":"text-layout-module_v-padding-5__e8AxV","vPadding6":"text-layout-module_v-padding-6__ZiW3Z","vPadding8":"text-layout-module_v-padding-8__F0NW1","vPadding9":"text-layout-module_v-padding-9__iZBVm","vPadding11":"text-layout-module_v-padding-11__fJ5I9","vPadding12":"text-layout-module_v-padding-12__Wbxua","vPadding14":"text-layout-module_v-padding-14__TARL2","vPadding15":"text-layout-module_v-padding-15__t4xTz","vPadding17":"text-layout-module_v-padding-17__mVG58","vPadding18":"text-layout-module_v-padding-18__b4Zdk","vPadding23":"text-layout-module_v-padding-23__BqIm6","vPadding24":"text-layout-module_v-padding-24__LM1Rg"};
+var css$V = {"line-height-12":"c0gZxd","line-height-18":"_9yC5Xy","line-height-24":"fCRI8r","line-height-30":"cB-KTw","font-size-10":"_5hgTXq","font-size-12":"ehPTyN","font-size-14":"A14tMj","font-size-16":"j84TsK","font-size-18":"oru0vD","font-size-24":"lzjAGG","v-padding-2":"vfRjQs","v-padding-3":"eBe-9I","v-padding-5":"K1iwm5","v-padding-6":"-jVtMF","v-padding-8":"ubhaOD","v-padding-9":"QQK4gd","v-padding-11":"bxpPyC","v-padding-12":"E4XFxU","v-padding-14":"k2CYTE","v-padding-15":"iDnA47","v-padding-17":"_1Ixion","v-padding-18":"_0VchC1","v-padding-23":"iCrk4G","v-padding-24":"NxnczC","lineHeight12":"c0gZxd","lineHeight18":"_9yC5Xy","lineHeight24":"fCRI8r","lineHeight30":"cB-KTw","fontSize10":"_5hgTXq","fontSize12":"ehPTyN","fontSize14":"A14tMj","fontSize16":"j84TsK","fontSize18":"oru0vD","fontSize24":"lzjAGG","vPadding2":"vfRjQs","vPadding3":"eBe-9I","vPadding5":"K1iwm5","vPadding6":"-jVtMF","vPadding8":"ubhaOD","vPadding9":"QQK4gd","vPadding11":"bxpPyC","vPadding12":"E4XFxU","vPadding14":"k2CYTE","vPadding15":"iDnA47","vPadding17":"_1Ixion","vPadding18":"_0VchC1","vPadding23":"iCrk4G","vPadding24":"NxnczC"};
 
 const defaultTextSettings = {
     18: { lineHeight: 12, fontSize: 10 },
@@ -991,7 +1017,7 @@ const defaultTextSettings = {
 };
 function getTextClasses(props, border) {
     if (props.size === 'none') {
-        return [css$Q['line-height-' + props.lineHeight], css$Q['font-size-' + props.fontSize]];
+        return [css$V['line-height-' + props.lineHeight], css$V['font-size-' + props.fontSize]];
     }
     const setting = {
         size: props.size,
@@ -1000,7 +1026,7 @@ function getTextClasses(props, border) {
     };
     const vPadding = (+setting.size - +setting.lineHeight - (border ? 2 : 0)) / 2;
     return [
-        css$Q['line-height-' + setting.lineHeight], css$Q['font-size-' + setting.fontSize], css$Q['v-padding-' + vPadding],
+        css$V['line-height-' + setting.lineHeight], css$V['font-size-' + setting.fontSize], css$V['v-padding-' + vPadding],
     ];
 }
 
@@ -1013,12 +1039,12 @@ function applyTextMods(mods) {
     return [
         `uui-font-${mods.font || 'regular'}`,
         `uui-text-${mods.color || 'primary'}`,
-        css$R.root,
+        css$W.root,
     ].concat(textClasses);
 }
 const Text = uuiCore.withMods(uuiComponents.Text, applyTextMods);
 
-var css$P = {"container":"TextPlaceholder-module_container__QQMhe","loading-word":"TextPlaceholder-module_loading-word__Yg5pq","animated-loading":"TextPlaceholder-module_animated-loading__3LZwE","skeleton_loading":"TextPlaceholder-module_skeleton_loading__jXXBE","loadingWord":"TextPlaceholder-module_loading-word__Yg5pq","animatedLoading":"TextPlaceholder-module_animated-loading__3LZwE","skeletonLoading":"TextPlaceholder-module_skeleton_loading__jXXBE"};
+var css$U = {"container":"rl2ylZ","loading-word":"aDyVY7","animated-loading":"w-Csef","skeleton_loading":"ouebvS","loadingWord":"aDyVY7","animatedLoading":"w-Csef","skeletonLoading":"ouebvS"};
 
 const TextPlaceholder = (props) => {
     const pattern = '&nbsp;';
@@ -1030,35 +1056,35 @@ const TextPlaceholder = (props) => {
         }
         return words;
     }, [props.wordsCount]);
-    return (React__namespace.createElement("div", Object.assign({ "aria-busy": true, className: css$P.container }, props.rawProps), text.map((it, index) => (React__namespace.createElement("span", { key: index, className: cx__default.default([
-            props.cx, css$P.loadingWord, !props.isNotAnimated && css$P.animatedLoading,
+    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,
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
-var style = {"typography-16":"RichTextView-module_typography-16__DrhKc","typography-14":"RichTextView-module_typography-14__1oY8c","typography-12":"RichTextView-module_typography-12__4jZjv","typography-uui":"RichTextView-module_typography-uui__neFbE","typography16":"RichTextView-module_typography-16__DrhKc","typography14":"RichTextView-module_typography-14__1oY8c","typography12":"RichTextView-module_typography-12__4jZjv","typographyUui":"RichTextView-module_typography-uui__neFbE"};
+var style = {"typography-16":"_0ufxpM","typography-14":"_5WJ0MW","typography-12":"DOpYmb","typography-uui":"q8DmOv","typography16":"_0ufxpM","typography14":"_5WJ0MW","typography12":"DOpYmb","typographyUui":"q8DmOv"};
 
 const RichTextView = uuiCore.withMods(uuiComponents.RichTextView, (mods) => [style.typographyUui, style['typography-' + (mods.size || '14')]]);
 
-var css$O = {"modal-blocker":"Modals-module_modal-blocker__Lwee9","animateModalBlocker":"Modals-module_animateModalBlocker__CY-CF","modal":"Modals-module_modal__JUe8A","modal-footer":"Modals-module_modal-footer__SsHtf","border-top":"Modals-module_border-top__1yL5h","modal-header":"Modals-module_modal-header__FNwre","modalBlocker":"Modals-module_modal-blocker__Lwee9","modalFooter":"Modals-module_modal-footer__SsHtf","borderTop":"Modals-module_border-top__1yL5h","modalHeader":"Modals-module_modal-header__FNwre"};
+var css$T = {"modal-blocker":"qknKYi","animateModalBlocker":"kCacrK","modal":"WL50aU","modal-footer":"gS78hC","border-top":"_12mkcR","modal-header":"_1EggyR","modalBlocker":"qknKYi","modalFooter":"gS78hC","borderTop":"_12mkcR","modalHeader":"_1EggyR"};
 
-const ModalBlocker = uuiCore.withMods(uuiComponents.ModalBlocker, () => [css$O.modalBlocker]);
-const ModalWindow = uuiCore.withMods(uuiComponents.ModalWindow, () => [css$O.modal], (props) => ({
+const ModalBlocker = uuiCore.withMods(uuiComponents.ModalBlocker, () => [css$T.modalBlocker]);
+const ModalWindow = uuiCore.withMods(uuiComponents.ModalWindow, () => [css$T.modal], (props) => ({
     style: Object.assign(Object.assign({}, props.style), { width: `${props.width || 420}px`, height: props.height ? `${props.height}px` : 'auto' }),
 }));
 class ModalHeader extends React__namespace.Component {
     render() {
-        return (React__namespace.createElement(FlexRow, { padding: this.props.padding || '24', vPadding: "12", borderBottom: this.props.borderBottom, cx: [css$O.modalHeader, this.props.cx], spacing: "12", rawProps: this.props.rawProps },
+        return (React__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 },
             this.props.title && (React__namespace.createElement(Text, { size: "48", fontSize: "18", font: "semibold" }, this.props.title)),
             this.props.children,
             this.props.onClose && React__namespace.createElement(uuiComponents.FlexSpacer, null),
             this.props.onClose && (React__namespace.createElement(FlexCell, { shrink: 0, width: "auto" },
-                React__namespace.createElement(IconButton, { icon: ForwardRef$E, onClick: this.props.onClose })))));
+                React__namespace.createElement(IconButton, { icon: ForwardRef$D, onClick: this.props.onClose })))));
     }
 }
 class ModalFooter extends React__namespace.Component {
     render() {
         return (React__namespace.createElement(FlexRow, { spacing: this.props.spacing || '12', cx: [
-                css$O.modalFooter, this.props.borderTop && css$O.borderTop, this.props.cx,
+                css$T.modalFooter, this.props.borderTop && css$T.borderTop, this.props.cx,
             ], padding: this.props.padding || '24', vPadding: this.props.vPadding || '24', rawProps: this.props.rawProps }, this.props.children));
     }
 }
@@ -1146,23 +1172,23 @@ const i18n = Object.assign(Object.assign({}, uuiCore.i18n), { dataPickerBody: {
         saveButton: 'Save',
     } });
 
-var _path$B;
-function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
+var _path$A;
+function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
 var SvgCross = function SvgCross(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
+  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$B || (_path$B = /*#__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 12z"
   })));
 };
-var ForwardRef$D = /*#__PURE__*/React.forwardRef(SvgCross);
+var ForwardRef$C = /*#__PURE__*/React.forwardRef(SvgCross);
 
-var css$N = {"root":"NotificationCard-module_root__jT-mn","icon-wrapper":"NotificationCard-module_icon-wrapper__89tan","action-wrapper":"NotificationCard-module_action-wrapper__6Z1Zy","action-link":"NotificationCard-module_action-link__O0HeC","close-icon":"NotificationCard-module_close-icon__DTQiT","main-path":"NotificationCard-module_main-path__npnav","content":"NotificationCard-module_content__-vDj4","clear-button":"NotificationCard-module_clear-button__BjWZo","close-wrapper":"NotificationCard-module_close-wrapper__x3PkP","iconWrapper":"NotificationCard-module_icon-wrapper__89tan","actionWrapper":"NotificationCard-module_action-wrapper__6Z1Zy","actionLink":"NotificationCard-module_action-link__O0HeC","closeIcon":"NotificationCard-module_close-icon__DTQiT","mainPath":"NotificationCard-module_main-path__npnav","clearButton":"NotificationCard-module_clear-button__BjWZo","closeWrapper":"NotificationCard-module_close-wrapper__x3PkP"};
+var css$S = {"root":"IVcab3","icon-wrapper":"m2lJiF","action-wrapper":"M6Ap5E","action-link":"EHclP4","close-icon":"ZkJ1l3","main-path":"zaU1iM","content":"oLOWJH","clear-button":"YioTpr","close-wrapper":"TM2PsZ","iconWrapper":"m2lJiF","actionWrapper":"M6Ap5E","actionLink":"EHclP4","closeIcon":"ZkJ1l3","mainPath":"zaU1iM","clearButton":"YioTpr","closeWrapper":"TM2PsZ"};
 
 const NotificationCard = React__namespace.default.forwardRef((props, ref) => {
     const notificationCardNode = React__namespace.default.useRef(null);
@@ -1177,34 +1203,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$N.root, props.cx), ref: notificationCardNode }, props.rawProps),
-        React__namespace.default.createElement("div", { className: css$N.mainPath },
-            props.icon && (React__namespace.default.createElement("div", { className: css$N.iconWrapper },
-                React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, cx: css$N.actionIcon }))),
-            React__namespace.default.createElement("div", { className: css$N.content },
+    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 },
                 props.children,
-                props.actions && (React__namespace.default.createElement("div", { className: css$N.actionWrapper }, props.actions.map((action) => (React__namespace.default.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$N.actionLink, size: "36", rawProps: action.rawProps })))))),
-            props.onClose && (React__namespace.default.createElement("div", { className: css$N.closeWrapper },
-                React__namespace.default.createElement(IconButton, { icon: ForwardRef$D, color: "default", onClick: props.onClose, cx: css$N.closeIcon }))))));
+                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 }))))));
 });
-const WarningNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$H, color: "warning" }, props, { ref: ref, cx: props.cx }))));
-const SuccessNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$I, color: "success" }, props, { ref: ref, cx: props.cx }))));
-const HintNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$F, color: "info" }, props, { ref: ref, cx: props.cx }))));
-const ErrorNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$G, color: "error" }, props, { ref: ref, cx: props.cx }))));
+const WarningNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$G, color: "warning" }, props, { ref: ref, cx: props.cx }))));
+const SuccessNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$H, color: "success" }, props, { ref: ref, cx: props.cx }))));
+const HintNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$E, color: "info" }, props, { ref: ref, cx: props.cx }))));
+const ErrorNotification = React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$F, color: "error" }, props, { ref: ref, cx: props.cx }))));
 class ClearNotification extends React__namespace.default.Component {
     render() {
-        return (React__namespace.default.createElement("div", { className: cx__default.default(css$N.notificationWrapper, css$N.clearButton) },
+        return (React__namespace.default.createElement("div", { className: cx__default.default(css$S.notificationWrapper, css$S.clearButton) },
             React__namespace.default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => this.context.uuiNotifications.clearAll() })));
     }
 }
 ClearNotification.contextType = uuiCore.UuiContext;
 
-var css$M = {"root":"Tooltip-module_root__UVOiW"};
+var css$R = {"root":"_957aEn"};
 
 function applyTooltipMods(mods) {
     return [
         `tooltip-${mods.color || 'default'}`,
-        css$M.root,
+        css$R.root,
     ];
 }
 const Tooltip = uuiCore.withMods(uuiComponents.Tooltip, applyTooltipMods);
@@ -1226,20 +1252,20 @@ class ConfirmationModal extends React__namespace.Component {
     }
 }
 
-var css$L = {"root":"LabeledInput-module_root__4Fdte","size-24":"LabeledInput-module_size-24__9ztf2","size-30":"LabeledInput-module_size-30__IKTGK","size-36":"LabeledInput-module_size-36__iyjYl","size-42":"LabeledInput-module_size-42__b51JI","size-48":"LabeledInput-module_size-48__j7ojN","size24":"LabeledInput-module_size-24__9ztf2","size30":"LabeledInput-module_size-30__IKTGK","size36":"LabeledInput-module_size-36__iyjYl","size42":"LabeledInput-module_size-42__b51JI","size48":"LabeledInput-module_size-48__j7ojN"};
+var css$Q = {"root":"wGE9K-","size-24":"UFFThX","size-30":"A5Mgow","size-36":"r8Zg1Z","size-42":"vfPkkz","size-48":"_2nwLin","size24":"UFFThX","size30":"A5Mgow","size36":"r8Zg1Z","size42":"vfPkkz","size48":"_2nwLin"};
 
 const defaultSize$7 = '36';
 function applyLabeledInputMods(mods) {
-    return [css$L.root, css$L['size-' + (mods.size || defaultSize$7)]];
+    return [css$Q.root, css$Q['size-' + (mods.size || defaultSize$7)]];
 }
 const LabeledInput = uuiCore.withMods(uuiComponents.LabeledInput, applyLabeledInputMods, (props) => ({
     Tooltip,
     infoIcon: systemIcons[props.size || defaultSize$7].help,
 }));
 
-var css$K = {"root":"RadioGroup-module_root__JuoNU"};
+var css$P = {"root":"EqKe8Q"};
 
-const RadioGroup = uuiCore.withMods(uuiComponents.RadioGroup, () => [css$K.root], () => ({ RadioInput }));
+const RadioGroup = uuiCore.withMods(uuiComponents.RadioGroup, () => [css$P.root], () => ({ RadioInput }));
 
 function applyScrollBarsMods() {
     return [
@@ -1250,33 +1276,33 @@ const ScrollBars = uuiCore.withMods(uuiComponents.ScrollBars, applyScrollBarsMod
 
 const VirtualList = uuiComponents.VirtualList;
 
-var css$J = {"root":"Blocker-module_root__agFVC"};
+var css$O = {"root":"SiQkg5"};
 
-var css$I = {"root":"Spinner-module_root__f6Xhd","uui-spinner":"Spinner-module_uui-spinner__FaqMR","uuiSpinner":"Spinner-module_uui-spinner__FaqMR"};
+var css$N = {"root":"eqwqy3","uui-spinner":"bBunG9","uuiSpinner":"bBunG9"};
 
 function applySpinnerMods() {
-    return [css$I.root];
+    return [css$N.root];
 }
 const Spinner = uuiCore.withMods(uuiComponents.Spinner, applySpinnerMods);
 
-const Blocker = uuiCore.withMods(uuiComponents.Blocker, () => [css$J.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__namespace.default.createElement(Spinner, null)) }));
+const Blocker = uuiCore.withMods(uuiComponents.Blocker, () => [css$O.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__namespace.default.createElement(Spinner, null)) }));
 
-var css$H = {"root":"CheckboxGroup-module_root__-ZgVR"};
+var css$M = {"root":"IgOq-b"};
 
-const CheckboxGroup = uuiCore.withMods(uuiComponents.CheckboxGroup, () => [css$H.root], () => ({ CheckboxInput: Checkbox }));
+const CheckboxGroup = uuiCore.withMods(uuiComponents.CheckboxGroup, () => [css$M.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$G = {"root":"NumericInput-module_root__LaCbz","size-24":"NumericInput-module_size-24__2wCl2","size-30":"NumericInput-module_size-30__KKIjs","size-36":"NumericInput-module_size-36__zZyD8","size-42":"NumericInput-module_size-42__57zoL","size-48":"NumericInput-module_size-48__CyphK","mode-form":"NumericInput-module_mode-form__efp9H","mode-cell":"NumericInput-module_mode-cell__zBYG8","size24":"NumericInput-module_size-24__2wCl2","size30":"NumericInput-module_size-30__KKIjs","size36":"NumericInput-module_size-36__zZyD8","size42":"NumericInput-module_size-42__57zoL","size48":"NumericInput-module_size-48__CyphK","modeForm":"NumericInput-module_mode-form__efp9H","modeCell":"NumericInput-module_mode-cell__zBYG8"};
+var css$L = {"root":"tQgnC2","size-24":"_4Ilrzi","size-30":"QzjOsY","size-36":"emuo91","size-42":"aQmhD6","size-48":"TiP4l4","mode-form":"jABptA","mode-cell":"CNrdLy","size24":"_4Ilrzi","size30":"QzjOsY","size36":"emuo91","size42":"aQmhD6","size48":"TiP4l4","modeForm":"jABptA","modeCell":"CNrdLy"};
 
 const defaultSize$6 = '36';
 const defaultMode$3 = exports.EditMode.FORM;
 function applyNumericInputMods(mods) {
     return [
-        textInputCss.root, css$G.root, css$G['size-' + (mods.size || defaultSize$6)], textInputCss['size-' + (mods.size || defaultSize$6)], textInputCss['mode-' + (mods.mode || defaultMode$3)],
+        textInputCss.root, css$L.root, css$L['size-' + (mods.size || defaultSize$6)], textInputCss['size-' + (mods.size || defaultSize$6)], textInputCss['mode-' + (mods.mode || defaultMode$3)],
     ];
 }
 const NumericInput = uuiCore.withMods(uuiComponents.NumericInput, applyNumericInputMods, (props) => {
@@ -1289,13 +1315,13 @@ const NumericInput = uuiCore.withMods(uuiComponents.NumericInput, applyNumericIn
     });
 });
 
-var css$F = {"root":"TextArea-module_root__ZxqP5","mode-form":"TextArea-module_mode-form__Ga1yd","mode-cell":"TextArea-module_mode-cell__0XUCG","mode-inline":"TextArea-module_mode-inline__6z5qh","size-24":"TextArea-module_size-24__MU1XV","size-30":"TextArea-module_size-30__BO2Wu","size-36":"TextArea-module_size-36__FnzVT","size-42":"TextArea-module_size-42__PBASB","size-48":"TextArea-module_size-48__RRL-P","modeForm":"TextArea-module_mode-form__Ga1yd","modeCell":"TextArea-module_mode-cell__0XUCG","modeInline":"TextArea-module_mode-inline__6z5qh","size24":"TextArea-module_size-24__MU1XV","size30":"TextArea-module_size-30__BO2Wu","size36":"TextArea-module_size-36__FnzVT","size42":"TextArea-module_size-42__PBASB","size48":"TextArea-module_size-48__RRL-P"};
+var css$K = {"root":"IrfUNO","mode-form":"QHi0PB","mode-cell":"BQVvZp","mode-inline":"tzDpCJ","size-24":"_2f-59F","size-30":"IuLOXr","size-36":"BAiEhK","size-42":"ykcDF8","size-48":"uiljYH","modeForm":"QHi0PB","modeCell":"BQVvZp","modeInline":"tzDpCJ","size24":"_2f-59F","size30":"IuLOXr","size36":"BAiEhK","size42":"ykcDF8","size48":"uiljYH"};
 
 const defaultSize$5 = '36';
 const defaultMode$2 = exports.EditMode.FORM;
 function applyTextAreaMods(mods) {
     return [
-        css$F.root, css$F['size-' + (mods.size || defaultSize$5)], css$F['mode-' + (mods.mode || defaultMode$2)],
+        css$K.root, css$K['size-' + (mods.size || defaultSize$5)], css$K['mode-' + (mods.mode || defaultMode$2)],
     ];
 }
 const TextArea = uuiCore.withMods(uuiComponents.TextArea, applyTextAreaMods, (props) => ({
@@ -1303,14 +1329,162 @@ const TextArea = uuiCore.withMods(uuiComponents.TextArea, applyTextAreaMods, (pr
     maxLength: props.mode === exports.EditMode.CELL ? undefined : props.maxLength,
 }));
 
-var css$E = {"root":"DatePicker-module_root__n83qL"};
+var css$J = {"container":"X3dVi9"};
+
+var _path$z;
+function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
+var SvgNavigationChevronLeft18 = function SvgNavigationChevronLeft18(props, ref) {
+  return /*#__PURE__*/React__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$z || (_path$z = /*#__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 _path$y;
+function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
+var SvgNavigationChevronRight18 = function SvgNavigationChevronRight18(props, ref) {
+  return /*#__PURE__*/React__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$y || (_path$y = /*#__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);
+
+const uuiHeader = {
+    container: 'uui-datepickerheader-container',
+    header: 'uui-datepickerheader-header',
+    navTitle: 'uui-datepickerheader-nav-title',
+    navIconRight: 'uui-datepickerheader-nav-icon-right',
+    navIconLeft: 'uui-datepickerheader-nav-icon-left',
+};
+function DatePickerHeader(props) {
+    var _a, _b;
+    const getPrevMonthFromCurrent = (currentDate) => {
+        return currentDate.subtract(1, 'month');
+    };
+    const getNextMonthFromCurrent = (currentDate) => {
+        return currentDate.add(1, 'month');
+    };
+    const getPrevYearFromCurrent = (currentDate) => {
+        return currentDate.subtract(1, 'year');
+    };
+    const getNextYearFromCurrent = (currentDate) => {
+        return currentDate.add(1, 'year');
+    };
+    const getPrevListYearFromCurrent = (currentDate) => {
+        return currentDate.subtract(16, 'year');
+    };
+    const getNextListYearFromCurrent = (currentDate) => {
+        return currentDate.add(16, 'year');
+    };
+    const onLeftNavigationArrow = () => {
+        switch (props.value.view) {
+            case 'DAY_SELECTION':
+                props.onValueChange(Object.assign(Object.assign({}, props.value), { displayedDate: getPrevMonthFromCurrent(props.value.displayedDate) }));
+                break;
+            case 'MONTH_SELECTION':
+                props.onValueChange(Object.assign(Object.assign({}, props.value), { displayedDate: getPrevYearFromCurrent(props.value.displayedDate) }));
+                break;
+            case 'YEAR_SELECTION':
+                props.onValueChange(Object.assign(Object.assign({}, props.value), { displayedDate: getPrevListYearFromCurrent(props.value.displayedDate) }));
+                break;
+        }
+    };
+    const onRightNavigationArrow = () => {
+        switch (props.value.view) {
+            case 'DAY_SELECTION':
+                props.onValueChange(Object.assign(Object.assign({}, props.value), { displayedDate: getNextMonthFromCurrent(props.value.displayedDate) }));
+                break;
+            case 'MONTH_SELECTION':
+                props.onValueChange(Object.assign(Object.assign({}, props.value), { displayedDate: getNextYearFromCurrent(props.value.displayedDate) }));
+                break;
+            case 'YEAR_SELECTION':
+                props.onValueChange(Object.assign(Object.assign({}, props.value), { displayedDate: getNextListYearFromCurrent(props.value.displayedDate) }));
+                break;
+        }
+    };
+    const onCaptionClick = (view) => {
+        let nextView;
+        switch (view) {
+            case 'DAY_SELECTION':
+                nextView = 'MONTH_SELECTION';
+                break;
+            case 'MONTH_SELECTION':
+                nextView = 'YEAR_SELECTION';
+                break;
+            case 'YEAR_SELECTION':
+                nextView = 'DAY_SELECTION';
+                break;
+        }
+        props.onValueChange(Object.assign(Object.assign({}, props.value), { view: nextView }));
+    };
+    const title = React__namespace.useMemo(() => {
+        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) },
+        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, { 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() }))));
+}
+
+var css$I = {"root":"mB6uW5"};
 
-var calendarCss = {"root":"Calendar-module_root__ldDAb"};
+function applyDateSelectionMods() {
+    return [css$I.root];
+}
+const Calendar = uuiCore.withMods(uuiComponents.Calendar, applyDateSelectionMods);
 
-function applyDatePickerBodyMods() {
-    return [css$E.root, calendarCss.root];
+dayjs__default.default.extend(updateLocale__default.default);
+const uuiDatePickerBody = {
+    wrapper: 'uui-datepickerBody-wrapper',
+    separator: 'uui-datepickerBody-separator',
+};
+class DatePickerBody extends uuiComponents.DatePickerBodyBase {
+    constructor(props) {
+        super(props);
+        this.onDayClick = (day) => {
+            if (!this.props.filter || this.props.filter(day)) {
+                this.props.setSelectedDate(day.format(uuiComponents.valueFormat));
+            }
+            this.props.changeIsOpen && this.props.changeIsOpen(false);
+        };
+        this.getView = () => {
+            var _a;
+            switch ((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.view) {
+                case 'MONTH_SELECTION':
+                    return (React__namespace.createElement(uuiComponents.MonthSelection, { selectedDate: dayjs__default.default(this.props.value.selectedDate), value: this.props.value.displayedDate, onValueChange: this.onMonthClick }));
+                case 'YEAR_SELECTION':
+                    return (React__namespace.createElement(uuiComponents.YearSelection, { selectedDate: dayjs__default.default(this.props.value.selectedDate), value: this.props.value.displayedDate, onValueChange: this.onYearClick }));
+                case 'DAY_SELECTION':
+                    return (React__namespace.createElement(Calendar, { value: dayjs__default.default(this.props.value.selectedDate), onValueChange: this.onDayClick, displayedDate: this.props.value.displayedDate, filter: this.props.filter, getDayCX: this.props.getDayCX, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday }));
+            }
+        };
+        this.renderDatePicker = () => {
+            return (React__namespace.createElement("div", { className: uuiCore.cx(uuiDatePickerBody.wrapper, this.props.cx) },
+                React__namespace.createElement(DatePickerHeader, { value: this.props.value, onValueChange: (newValue) => this.props.setDisplayedDateAndView(newValue.displayedDate, newValue.view) }),
+                this.getView()));
+        };
+        dayjs__default.default.locale('en');
+        dayjs__default.default.updateLocale(uuiComponents.i18n.datePicker.locale, { weekStart: 1 });
+    }
 }
-const DatePickerBody = uuiCore.withMods(uuiComponents.DatePickerBody, applyDatePickerBodyMods, () => ({ navIconLeft: ForwardRef$11, navIconRight: ForwardRef$11 }));
 
 const defaultMode$1 = exports.EditMode.FORM;
 class DatePicker extends uuiComponents.BaseDatePicker {
@@ -1318,6 +1492,17 @@ class DatePicker extends uuiComponents.BaseDatePicker {
         super(...arguments);
         this.renderInput = (props) => {
             var _a;
+            if (process.env.NODE_ENV !== "production") {
+                if (this.props.size === '48') {
+                    uuiCore.devLogger.warnAboutDeprecatedPropValue({
+                        component: 'DatePicker',
+                        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, isDropdown: false, cx: uuiCore.cx(this.props.inputCx, this.state.isOpen && uuiCore.uuiMod.focus), icon: this.props.mode !== exports.EditMode.CELL && systemIcons[this.props.size || '36'].calendar, iconPosition: this.props.iconPosition || 'left', placeholder: this.props.placeholder ? this.props.placeholder : this.getFormat(), size: this.props.size || '36', value: this.state.inputValue, onValueChange: this.handleInputChange, onCancel: this.props.disableClear || !this.state.inputValue ? undefined : this.handleCancel, isInvalid: this.props.isInvalid, isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, tabIndex: this.props.isReadonly || this.props.isDisabled ? -1 : 0, onFocus: this.handleFocus, onBlur: this.handleBlur, mode: this.props.mode || defaultMode$1, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.input })));
         };
     }
@@ -1329,26 +1514,175 @@ class DatePicker extends uuiComponents.BaseDatePicker {
     }
 }
 
-function applyDateSelectionMods() {
-    return [calendarCss.root];
-}
-const Calendar = uuiCore.withMods(uuiComponents.Calendar, applyDateSelectionMods);
-
-var rangeCss = {"root":"RangeDatePickerBody-module_root__9hfbE"};
+var css$H = {"root":"-K5IC3"};
 
-var calendarPresetsCss = {"root":"CalendarPresets-module_root__wSJa2"};
-
-function applyRangeDatePickerBodyMods() {
-    return [
-        css$E.root, rangeCss.root, calendarCss.root, calendarPresetsCss.root,
-    ];
+function applyCalendarPresetsMods() {
+    return [css$H.root];
+}
+const CalendarPresets = uuiCore.withMods(uuiComponents.CalendarPresets, applyCalendarPresetsMods, () => ({}));
+
+var css$G = {"root":"Lbu--e","container":"AFrppk","day-selection":"lVzx5V","from-picker":"_3QR6wl","to-picker":"T7G-b1","bodes-wrapper":"R94tJn","blocker":"_7UCNa0","daySelection":"lVzx5V","fromPicker":"_3QR6wl","toPicker":"T7G-b1","bodesWrapper":"R94tJn"};
+
+dayjs__default.default.extend(isoWeek__default.default);
+function weekCount(displayedDate) {
+    let days = [];
+    const dayOfLastWeekInPrevMonth = displayedDate.subtract(1, 'month').endOf('month').day();
+    days = days.concat(new Array(dayOfLastWeekInPrevMonth).fill(undefined));
+    // get days of current month
+    days = days.concat(new Array(displayedDate.endOf('month').date()).fill(undefined));
+    return uuiCore.arrayToMatrix(days, 7).length;
+}
+const uuiRangeDatePickerBody = {
+    inRange: 'uui-range-datepicker-in-range',
+    firstDayInRangeWrapper: 'uui-range-datepicker-first-day-in-range-wrapper',
+    lastDayInRangeWrapper: 'uui-range-datepicker-last-day-in-range-wrapper',
+    separator: 'uui-range-datepicker-separator',
+};
+const rangeDatePickerPresets = {
+    today: {
+        name: 'Today',
+        getRange: () => ({ from: dayjs__default.default().toString(), to: undefined, order: 1 }),
+    },
+    thisWeek: {
+        name: 'This Week',
+        getRange: () => ({ from: dayjs__default.default().startOf('isoWeek').toString(), to: dayjs__default.default().endOf('isoWeek').toString(), order: 2 }),
+    },
+    lastWeek: {
+        name: 'Last Week',
+        getRange: () => ({ from: dayjs__default.default().startOf('isoWeek').subtract(1, 'week').toString(), to: dayjs__default.default().endOf('isoWeek').subtract(1, 'week').toString(), order: 3 }),
+    },
+    thisMonth: {
+        name: 'This Month',
+        getRange: () => ({ from: dayjs__default.default().startOf('month').toString(), to: dayjs__default.default().endOf('month').toString(), order: 4 }),
+    },
+    lastMonth: {
+        name: 'Last Month',
+        getRange: () => ({ from: dayjs__default.default().startOf('month').subtract(1, 'month').toString(), to: dayjs__default.default().subtract(1, 'month').endOf('month').toString(), order: 5 }),
+    },
+    last3Month: {
+        name: 'Last 3 Months',
+        getRange: () => ({ from: dayjs__default.default().startOf('month').subtract(3, 'month').toString(), to: dayjs__default.default().subtract(1, 'month').endOf('month').toString(), order: 5 }),
+    },
+    thisYear: {
+        name: 'This Year',
+        getRange: () => ({ from: dayjs__default.default().startOf('year').toString(), to: dayjs__default.default().endOf('year').toString(), order: 7 }),
+    },
+    lastYear: {
+        name: 'Last Year',
+        getRange: () => ({ from: dayjs__default.default().startOf('year').subtract(1, 'year').toString(), to: dayjs__default.default().subtract(1, 'year').endOf('year').toString(), order: 8 }),
+    },
+};
+class RangeDatePickerBody extends React__namespace.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            activePart: null,
+        };
+        this.getDayCX = (day) => {
+            var _a, _b;
+            const dayValue = day.valueOf();
+            const fromValue = ((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.selectedDate.from) ? dayjs__default.default(this.props.value.selectedDate.from).valueOf() : null;
+            const toValue = ((_b = this.props.value) === null || _b === void 0 ? void 0 : _b.selectedDate.to) ? dayjs__default.default(this.props.value.selectedDate.to).valueOf() : null;
+            const inRange = dayValue >= fromValue && dayValue <= toValue && fromValue !== toValue && fromValue && toValue;
+            const isFirst = dayValue === fromValue;
+            const isLast = dayValue === toValue;
+            return [
+                inRange && uuiRangeDatePickerBody.inRange,
+                isFirst && uuiRangeDatePickerBody.firstDayInRangeWrapper,
+                !inRange && isFirst && uuiRangeDatePickerBody.lastDayInRangeWrapper,
+                isLast && uuiRangeDatePickerBody.lastDayInRangeWrapper,
+                !inRange && isLast && uuiRangeDatePickerBody.firstDayInRangeWrapper,
+                (dayValue === fromValue || dayValue === toValue) && uuiComponents.uuiDaySelection.selectedDay,
+            ];
+        };
+        this.getFromValue = () => {
+            var _a;
+            return Object.assign(Object.assign({}, this.props.value), { view: this.state.activePart === 'from' ? this.props.value.view : 'DAY_SELECTION', selectedDate: (_a = this.props.value) === null || _a === void 0 ? void 0 : _a.selectedDate.from });
+        };
+        this.getToValue = () => {
+            if (!this.props.value)
+                return;
+            return Object.assign(Object.assign({}, this.props.value), { view: this.state.activePart === 'to' ? this.props.value.view : 'DAY_SELECTION', displayedDate: this.props.value.displayedDate.add(1, 'month'), selectedDate: this.props.value.selectedDate.to });
+        };
+        this.renderPresets = () => {
+            return (React__namespace.createElement(React__namespace.Fragment, null,
+                React__namespace.createElement("div", { className: uuiRangeDatePickerBody.separator }),
+                React__namespace.createElement(CalendarPresets, { forwardedRef: this.props.forwardedRef, onPresetSet: (presetVal) => {
+                        this.props.onValueChange({
+                            view: 'DAY_SELECTION',
+                            selectedDate: { from: dayjs__default.default(presetVal.from).format(uuiComponents.valueFormat), to: dayjs__default.default(presetVal.to).format(uuiComponents.valueFormat) },
+                            displayedDate: dayjs__default.default(presetVal.from),
+                        });
+                        this.props.changeIsOpen(false);
+                    }, presets: this.props.presets })));
+        };
+        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" },
+                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 }),
+                            ((_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 }))),
+                        this.props.presets && this.renderPresets()),
+                    this.props.renderFooter && this.props.renderFooter())));
+        };
+    }
+    getRange(selectedDate) {
+        const newRange = { from: null, to: null };
+        const currentRange = this.props.value.selectedDate;
+        if (!this.props.filter || this.props.filter(dayjs__default.default(selectedDate))) {
+            if (this.props.focusPart === 'from') {
+                if (dayjs__default.default(selectedDate).valueOf() <= dayjs__default.default(currentRange.to).valueOf()) {
+                    newRange.from = selectedDate;
+                    newRange.to = currentRange.to;
+                }
+                else {
+                    newRange.from = selectedDate;
+                    newRange.to = null;
+                }
+            }
+            if (this.props.focusPart === 'to') {
+                if (!currentRange.from) {
+                    newRange.to = selectedDate;
+                }
+                else if (dayjs__default.default(selectedDate).valueOf() >= dayjs__default.default(currentRange.from).valueOf()) {
+                    newRange.from = currentRange.from;
+                    newRange.to = selectedDate;
+                }
+                else {
+                    newRange.from = selectedDate;
+                    newRange.to = null;
+                }
+            }
+        }
+        return newRange;
+    }
+    setSelectedDate(selectedDate) {
+        const range = this.getRange(selectedDate);
+        this.props.onValueChange(Object.assign(Object.assign({}, this.props.value), { selectedDate: range }));
+        if (range.from && range.to && this.props.focusPart === 'to') {
+            this.props.changeIsOpen(false);
+        }
+    }
+    setDisplayedDateAndView(displayedDate, view, part) {
+        this.setState({ activePart: part });
+        this.props.onValueChange({
+            selectedDate: this.props.value.selectedDate,
+            displayedDate: part === 'from' ? displayedDate : displayedDate.subtract(1, 'month'),
+            view: view,
+        });
+    }
+    render() {
+        return (React__namespace.createElement("div", Object.assign({ className: uuiCore.cx(css$G.root, uuiComponents.uuiDatePickerBodyBase.container, this.props.cx) }, this.props.rawProps), this.renderDatePicker()));
+    }
 }
-const RangeDatePickerBody = uuiCore.withMods(uuiComponents.RangeDatePickerBody, applyRangeDatePickerBodyMods, () => ({
-    navIconLeft: ForwardRef$11,
-    navIconRight: ForwardRef$11,
-}));
 
-var css$D = {"dropdown-container":"RangeDatePicker-module_dropdown-container__EFIZT","container":"RangeDatePicker-module_container__H7FRF","button-group":"RangeDatePicker-module_button-group__Stksa","date-input":"RangeDatePicker-module_date-input__as2iX","size-24":"RangeDatePicker-module_size-24__yXj-X","size-30":"RangeDatePicker-module_size-30__4sP-J","size-36":"RangeDatePicker-module_size-36__j5YP2","size-42":"RangeDatePicker-module_size-42__nGrsk","size-48":"RangeDatePicker-module_size-48__WKbFa","date-input-group":"RangeDatePicker-module_date-input-group__lJSYu","separator":"RangeDatePicker-module_separator__OZtZc","mode-form":"RangeDatePicker-module_mode-form__KkODO","mode-cell":"RangeDatePicker-module_mode-cell__YvZw5","dropdownContainer":"RangeDatePicker-module_dropdown-container__EFIZT","buttonGroup":"RangeDatePicker-module_button-group__Stksa","dateInput":"RangeDatePicker-module_date-input__as2iX","size24":"RangeDatePicker-module_size-24__yXj-X","size30":"RangeDatePicker-module_size-30__4sP-J","size36":"RangeDatePicker-module_size-36__j5YP2","size42":"RangeDatePicker-module_size-42__nGrsk","size48":"RangeDatePicker-module_size-48__WKbFa","dateInputGroup":"RangeDatePicker-module_date-input-group__lJSYu","modeForm":"RangeDatePicker-module_mode-form__KkODO","modeCell":"RangeDatePicker-module_mode-cell__YvZw5"};
+var css$F = {"dropdown-container":"xd3Nzu","container":"dRyWIe","button-group":"_6TH8dH","date-input":"xCZg80","size-24":"HH3ooz","size-30":"BHJ5CH","size-36":"Ijc-pg","size-42":"yRgDf3","size-48":"XSq2vh","date-input-group":"gTuQ6v","separator":"QhkaPo","mode-form":"cn0SP5","mode-cell":"ZyaB6g","dropdownContainer":"xd3Nzu","buttonGroup":"_6TH8dH","dateInput":"xCZg80","size24":"HH3ooz","size30":"BHJ5CH","size36":"Ijc-pg","size42":"yRgDf3","size48":"XSq2vh","dateInputGroup":"gTuQ6v","modeForm":"cn0SP5","modeCell":"ZyaB6g"};
 
 const defaultValue = { from: null, to: null };
 class RangeDatePicker extends uuiComponents.BaseRangeDatePicker {
@@ -1356,35 +1690,46 @@ class RangeDatePicker extends uuiComponents.BaseRangeDatePicker {
         super(...arguments);
         this.renderInput = (props) => {
             var _a, _b;
-            return (React__namespace.createElement("div", { className: cx__default.default(this.props.inputCx, css$D.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$D.dateInput, css$D['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$D.separator }),
-                React__namespace.createElement(TextInput, { cx: cx__default.default(css$D.dateInput, css$D['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 })));
+            if (process.env.NODE_ENV !== "production") {
+                if (this.props.size === '48') {
+                    uuiCore.devLogger.warnAboutDeprecatedPropValue({
+                        component: 'RangeDatePicker',
+                        propName: 'size',
+                        propValue: this.props.size,
+                        propValueUseInstead: '42',
+                        condition: () => ['48'].indexOf(this.props.size) !== -1,
+                    });
+                }
+            }
+            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 })));
         };
     }
     renderBody(props) {
         var _a;
-        return (React__namespace.createElement(DropdownContainer, Object.assign({}, props, { cx: cx__default.default(css$D.dropdownContainer) }),
+        return (React__namespace.createElement(DropdownContainer, Object.assign({}, props, { cx: cx__default.default(css$F.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$C = {"blocker":"DropMarker-module_blocker__sFMsF","marker":"DropMarker-module_marker__WOsjE","top":"DropMarker-module_top__dGv3h","bottom":"DropMarker-module_bottom__vlan6","left":"DropMarker-module_left__mKt8q","right":"DropMarker-module_right__OP21L","inside":"DropMarker-module_inside__g6Q5c"};
+var css$E = {"blocker":"UP8Z6M","marker":"rg5TRj","top":"YIyHSI","bottom":"-Z1eDb","left":"mzhzuK","right":"_8p8pbV","inside":"ZUW7Os"};
 
 class DropMarker extends React__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$C.blocker }),
+            this.props.enableBlocker && React__namespace.createElement("div", { className: css$E.blocker }),
             React__namespace.createElement("div", { className: cx__default.default([
-                    css$C.marker, css$C[this.props.position],
+                    css$E.marker, css$E[this.props.position],
                     (_a = this.props) === null || _a === void 0 ? void 0 : _a.cx,
                 ]) }))) : null;
     }
 }
 
-var css$B = {"body":"DataPickerBody-module_body__CMMVY","modal":"DataPickerBody-module_modal__JRYQ-","search-wrapper":"DataPickerBody-module_search-wrapper__W8zQV","checkbox":"DataPickerBody-module_checkbox__e63-h","no-found-size-24":"DataPickerBody-module_no-found-size-24__wCw8P","no-found-size-30":"DataPickerBody-module_no-found-size-30__6mOIm","no-found-size-36":"DataPickerBody-module_no-found-size-36__Jr9Ns","no-found-size-42":"DataPickerBody-module_no-found-size-42__4QTkU","searchWrapper":"DataPickerBody-module_search-wrapper__W8zQV","noFoundSize24":"DataPickerBody-module_no-found-size-24__wCw8P","noFoundSize30":"DataPickerBody-module_no-found-size-30__6mOIm","noFoundSize36":"DataPickerBody-module_no-found-size-36__Jr9Ns","noFoundSize42":"DataPickerBody-module_no-found-size-42__4QTkU"};
+var css$D = {"body":"lUcfam","modal":"fX2fPJ","search-wrapper":"rfnkkA","checkbox":"mmvkpI","no-found-size-24":"hjx-jK","no-found-size-30":"Ym5Eaq","no-found-size-36":"yTv8gk","no-found-size-42":"WHsYmz","searchWrapper":"rfnkkA","noFoundSize24":"hjx-jK","noFoundSize30":"Ym5Eaq","noFoundSize36":"yTv8gk","noFoundSize42":"WHsYmz"};
 
 class DataPickerBody extends uuiComponents.PickerBodyBase {
     constructor() {
@@ -1396,16 +1741,16 @@ class DataPickerBody extends uuiComponents.PickerBodyBase {
         if (this.props.renderNotFound) {
             return this.props.renderNotFound();
         }
-        return (React__namespace.default.createElement(uuiComponents.FlexCell, { cx: css$B[`no-found-size-${this.props.searchSize || 36}`], grow: 1, textAlign: "center" },
+        return (React__namespace.default.createElement(uuiComponents.FlexCell, { cx: css$D[`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$B.searchWrapper },
+            this.showSearch() && (React__namespace.default.createElement("div", { key: "search", className: css$D.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$B.body, css$B[this.props.editMode], css$B[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$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()))));
     }
 }
 
@@ -1428,7 +1773,9 @@ function DataPickerFooterImpl(props) {
         if (!e.shiftKey && e.key === 'Tab')
             e.preventDefault();
     };
-    return (React__namespace.default.createElement(FlexRow, { padding: "12" },
+    // show always for multi picker and for single only in case if search not disabled.
+    const shouldShowFooter = isSinglePicker ? !props.disableClear : true;
+    return shouldShowFooter && (React__namespace.default.createElement(FlexRow, { padding: "12" },
         !isSinglePicker && (React__namespace.default.createElement(Switch, { size: switchSize, value: showSelected.value, isDisabled: !hasSelection, onValueChange: showSelected.onValueChange, label: i18n.pickerInput.showOnlySelectedLabel })),
         React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
         React__namespace.default.createElement(FlexCell, { width: "auto", alignSelf: "center" },
@@ -1437,37 +1784,37 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = React__namespace.default.memo(DataPickerFooterImpl);
 
-var css$A = {"header":"DataPickerHeader-module_header__TkXlz","close":"DataPickerHeader-module_close__Tiy0j"};
+var css$C = {"header":"ZyxGTe","close":"_1d324m"};
 
-var _path$A;
-function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
+var _path$x;
+function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
 var SvgNavigationClose24 = function SvgNavigationClose24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$A || (_path$A = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$x || (_path$x = /*#__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$C = /*#__PURE__*/React.forwardRef(SvgNavigationClose24);
+var ForwardRef$z = /*#__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$A.header },
+    return (React__namespace.default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: css$C.header },
         React__namespace.default.createElement(Text, { size: "48", font: "semibold" }, title),
-        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$A.close })));
+        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 })));
 };
 const DataPickerHeader = React__namespace.default.memo(DataPickerHeaderImpl);
 
 var _defs$1, _use;
-function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
+function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
 var SvgTreeFoldingArrow = function SvgTreeFoldingArrow(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
@@ -1485,19 +1832,19 @@ var SvgTreeFoldingArrow = function SvgTreeFoldingArrow(props, ref) {
     fillRule: "evenodd"
   })));
 };
-var ForwardRef$B = /*#__PURE__*/React.forwardRef(SvgTreeFoldingArrow);
+var ForwardRef$y = /*#__PURE__*/React.forwardRef(SvgTreeFoldingArrow);
 
-var css$z = {"cell":"DataTableCell-module_cell__9v8pk","wrapper":"DataTableCell-module_wrapper__u7ey2","align-widgets-top":"DataTableCell-module_align-widgets-top__-ZRCt","size-24":"DataTableCell-module_size-24__kAlRh","folding-arrow":"DataTableCell-module_folding-arrow__M3UXW","size-30":"DataTableCell-module_size-30__gy4mJ","size-36":"DataTableCell-module_size-36__t3pLn","size-42":"DataTableCell-module_size-42__IXd3P","size-48":"DataTableCell-module_size-48__jCi7Y","size-60":"DataTableCell-module_size-60__O0Mmg","align-widgets-center":"DataTableCell-module_align-widgets-center__l51gX","padding-12":"DataTableCell-module_padding-12__xRP39","padding-24":"DataTableCell-module_padding-24__0aJJb","padding-left-12":"DataTableCell-module_padding-left-12__XINwI","padding-left-24":"DataTableCell-module_padding-left-24__79hBi","padding-right-24":"DataTableCell-module_padding-right-24__BA0Z0","drag-handle":"DataTableCell-module_drag-handle__NiIxM","checkbox":"DataTableCell-module_checkbox__CAENf","indent":"DataTableCell-module_indent__qWJ5l","folding-arrow-12":"DataTableCell-module_folding-arrow-12__YGg1P","folding-arrow-18":"DataTableCell-module_folding-arrow-18__E0R4O","icon-container":"DataTableCell-module_icon-container__IcTL1","alignWidgetsTop":"DataTableCell-module_align-widgets-top__-ZRCt","size24":"DataTableCell-module_size-24__kAlRh","foldingArrow":"DataTableCell-module_folding-arrow__M3UXW","size30":"DataTableCell-module_size-30__gy4mJ","size36":"DataTableCell-module_size-36__t3pLn","size42":"DataTableCell-module_size-42__IXd3P","size48":"DataTableCell-module_size-48__jCi7Y","size60":"DataTableCell-module_size-60__O0Mmg","alignWidgetsCenter":"DataTableCell-module_align-widgets-center__l51gX","padding12":"DataTableCell-module_padding-12__xRP39","padding24":"DataTableCell-module_padding-24__0aJJb","paddingLeft12":"DataTableCell-module_padding-left-12__XINwI","paddingLeft24":"DataTableCell-module_padding-left-24__79hBi","paddingRight24":"DataTableCell-module_padding-right-24__BA0Z0","dragHandle":"DataTableCell-module_drag-handle__NiIxM","foldingArrow12":"DataTableCell-module_folding-arrow-12__YGg1P","foldingArrow18":"DataTableCell-module_folding-arrow-18__E0R4O","iconContainer":"DataTableCell-module_icon-container__IcTL1"};
+var css$B = {"cell":"_023AAv","wrapper":"RCSxqf","align-widgets-top":"_-6LpN6","size-24":"_1ztRBP","folding-arrow":"VmbxQO","size-30":"pnsuEY","size-36":"_2kN36N","size-42":"yHxowC","size-48":"O1ApU-","size-60":"_5l6Vtc","align-widgets-center":"_2Jro9f","padding-12":"U7a9TS","padding-24":"QE8d2v","padding-left-12":"mQSH4K","padding-left-24":"r7Z0Xg","padding-right-24":"_1t-9-p","drag-handle":"qwiR9M","checkbox":"V9SAs8","indent":"TNF-T9","folding-arrow-12":"_4-Ub0b","folding-arrow-18":"JnzNaZ","icon-container":"fILYrH","alignWidgetsTop":"_-6LpN6","size24":"_1ztRBP","foldingArrow":"VmbxQO","size30":"pnsuEY","size36":"_2kN36N","size42":"yHxowC","size48":"O1ApU-","size60":"_5l6Vtc","alignWidgetsCenter":"_2Jro9f","padding12":"U7a9TS","padding24":"QE8d2v","paddingLeft12":"mQSH4K","paddingLeft24":"r7Z0Xg","paddingRight24":"_1t-9-p","dragHandle":"qwiR9M","foldingArrow12":"_4-Ub0b","foldingArrow18":"JnzNaZ","iconContainer":"fILYrH"};
 
 function DataTableRowAddons(props) {
     var _a, _b;
     const row = props.rowProps;
     const additionalItemSize = +props.size < 30 ? '12' : '18';
     return (React__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$z.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$z.checkbox, tabIndex: props.tabIndex, size: additionalItemSize, value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => row.onCheck(row), isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
-        row.indent > 0 && (React__namespace.createElement("div", { key: "fold", className: css$z.indent, style: { marginLeft: (row.indent - 1) * 24 } }, row.isFoldable && (React__namespace.createElement(uuiComponents.IconContainer, { key: "icon", icon: ForwardRef$B, cx: [
-                css$z.foldingArrow, css$z[`folding-arrow-${additionalItemSize}`], uuiCore.uuiMarkers.clickable, css$z.iconContainer,
+        ((_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,
             ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row) }))))));
 }
 function DataTableCell(props) {
@@ -1515,18 +1862,18 @@ function DataTableCell(props) {
     props.cx = [
         'data-table-cell',
         props.cx,
-        css$z.cell,
-        css$z['size-' + (props.size || '36')],
-        css$z[`padding-${props.padding || (isEditable && !props.rowProps.isLoading && '0') || '12'}`],
-        props.isFirstColumn && css$z[`padding-left-${props.padding || '24'}`],
-        props.isLastColumn && css$z['padding-right-24'],
-        css$z[`align-widgets-${props.alignActions || 'top'}`],
+        css$B.cell,
+        css$B['size-' + (props.size || '36')],
+        css$B[`padding-${props.padding || (isEditable && !props.rowProps.isLoading && '0') || '12'}`],
+        props.isFirstColumn && css$B[`padding-left-${props.padding || '24'}`],
+        props.isLastColumn && css$B['padding-right-24'],
+        css$B[`align-widgets-${props.alignActions || 'top'}`],
         (props.border || isEditable) && 'uui-dt-vertical-cell-border',
     ];
     return React__namespace.createElement(uuiComponents.DataTableCell, Object.assign({}, props));
 }
 
-var css$y = {"root":"DataTableRow-module_root__ZEmTg","size-24":"DataTableRow-module_size-24__K9BAN","size-30":"DataTableRow-module_size-30__4Jqif","size-36":"DataTableRow-module_size-36__8Z9CM","size-48":"DataTableRow-module_size-48__hFy9V","size-60":"DataTableRow-module_size-60__JmXZx","size24":"DataTableRow-module_size-24__K9BAN","size30":"DataTableRow-module_size-30__4Jqif","size36":"DataTableRow-module_size-36__8Z9CM","size48":"DataTableRow-module_size-48__hFy9V","size60":"DataTableRow-module_size-60__JmXZx"};
+var css$A = {"root":"SdWcGc","size-24":"_7wE5FN","size-30":"BZ1I3d","size-36":"s4E5In","size-48":"FFft6M","size-60":"j9QghM","size24":"_7wE5FN","size30":"BZ1I3d","size36":"s4E5In","size48":"FFft6M","size60":"j9QghM"};
 
 // Here we define a single instance of the renderCell function to make DataTableRow#shouldComponentUpdate work.
 // As we need our mods to style the cell properly, we extract them from DataTableCellProps.rowProps, which is a hack, but it's reliable enough.
@@ -1538,154 +1885,137 @@ const renderDropMarkers = (props) => React__namespace.createElement(DropMarker,
 const propsMods = { renderCell, renderDropMarkers };
 const DataTableRow = uuiCore.withMods(uuiComponents.DataTableRow, ({ borderBottom = true, size }) => {
     return [
-        css$y.root, borderBottom && 'uui-dt-row-border', css$y['size-' + (size || '36')],
+        css$A.root, borderBottom && 'uui-dt-row-border', css$A['size-' + (size || '36')],
     ];
 }, () => propsMods);
 
-var css$x = {"header-cell":"DataTableHeaderRow-module_header-cell__-GovH","config-icon":"DataTableHeaderRow-module_config-icon__7pmnq","headerCell":"DataTableHeaderRow-module_header-cell__-GovH","configIcon":"DataTableHeaderRow-module_config-icon__7pmnq"};
+var css$z = {"header-cell":"_8imNSh","config-icon":"HkGVuX","headerCell":"_8imNSh","configIcon":"HkGVuX"};
 
-var _path$z;
-function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
+var _path$w;
+function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
 var SvgActionSettings18 = function SvgActionSettings18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
+  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$z || (_path$z = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$w || (_path$w = /*#__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$A = /*#__PURE__*/React.forwardRef(SvgActionSettings18);
+var ForwardRef$x = /*#__PURE__*/React.forwardRef(SvgActionSettings18);
 
-const DataTableHeaderRow = uuiCore.withMods(uuiComponents.DataTableHeaderRow, (mods) => [css$x.root], (mods) => ({
+const DataTableHeaderRow = uuiCore.withMods(uuiComponents.DataTableHeaderRow, (mods) => [css$z.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$x.configIcon, color: "default", icon: ForwardRef$A }),
+    renderConfigButton: () => React__namespace.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: css$z.configIcon, color: "default", icon: ForwardRef$x }),
 }));
 
-var css$w = {"cell":"DataTableHeaderCell-module_cell__AGrCC","sort-icon":"DataTableHeaderCell-module_sort-icon__cDeMX","dropdown-icon":"DataTableHeaderCell-module_dropdown-icon__anyqy","infoIcon":"DataTableHeaderCell-module_infoIcon__ztuKT","resizable":"DataTableHeaderCell-module_resizable__KE4Ta","size-24":"DataTableHeaderCell-module_size-24__xl3Bc","size-30":"DataTableHeaderCell-module_size-30__eNSl8","size-36":"DataTableHeaderCell-module_size-36__uF7G7","size-42":"DataTableHeaderCell-module_size-42__cyLfW","size-48":"DataTableHeaderCell-module_size-48__fgE-c","padding-left-24":"DataTableHeaderCell-module_padding-left-24__y2KH8","padding-right-24":"DataTableHeaderCell-module_padding-right-24__-XKyz","caption":"DataTableHeaderCell-module_caption__ZOlWT","checkbox":"DataTableHeaderCell-module_checkbox__Mm1wC","icon":"DataTableHeaderCell-module_icon__liZ4c","icon-cell":"DataTableHeaderCell-module_icon-cell__9AUCT","align-right":"DataTableHeaderCell-module_align-right__Hzx-a","align-center":"DataTableHeaderCell-module_align-center__Lfdr4","tooltip-wrapper":"DataTableHeaderCell-module_tooltip-wrapper__ulCpX","cell-tooltip":"DataTableHeaderCell-module_cell-tooltip__JHAxY","upper-case":"DataTableHeaderCell-module_upper-case__AdtWJ","font-size-14":"DataTableHeaderCell-module_font-size-14__RSTks","resize-mark":"DataTableHeaderCell-module_resize-mark__NBp0G","draggable":"DataTableHeaderCell-module_draggable__hz5pE","ghost":"DataTableHeaderCell-module_ghost__-iISU","is-dragged-out":"DataTableHeaderCell-module_is-dragged-out__Qicd4","dnd-marker-left":"DataTableHeaderCell-module_dnd-marker-left__tZ1iw","dnd-marker-right":"DataTableHeaderCell-module_dnd-marker-right__nT0Cc","sortIcon":"DataTableHeaderCell-module_sort-icon__cDeMX","dropdownIcon":"DataTableHeaderCell-module_dropdown-icon__anyqy","size24":"DataTableHeaderCell-module_size-24__xl3Bc","size30":"DataTableHeaderCell-module_size-30__eNSl8","size36":"DataTableHeaderCell-module_size-36__uF7G7","size42":"DataTableHeaderCell-module_size-42__cyLfW","size48":"DataTableHeaderCell-module_size-48__fgE-c","paddingLeft24":"DataTableHeaderCell-module_padding-left-24__y2KH8","paddingRight24":"DataTableHeaderCell-module_padding-right-24__-XKyz","iconCell":"DataTableHeaderCell-module_icon-cell__9AUCT","alignRight":"DataTableHeaderCell-module_align-right__Hzx-a","alignCenter":"DataTableHeaderCell-module_align-center__Lfdr4","tooltipWrapper":"DataTableHeaderCell-module_tooltip-wrapper__ulCpX","cellTooltip":"DataTableHeaderCell-module_cell-tooltip__JHAxY","upperCase":"DataTableHeaderCell-module_upper-case__AdtWJ","fontSize14":"DataTableHeaderCell-module_font-size-14__RSTks","resizeMark":"DataTableHeaderCell-module_resize-mark__NBp0G","isDraggedOut":"DataTableHeaderCell-module_is-dragged-out__Qicd4","dndMarkerLeft":"DataTableHeaderCell-module_dnd-marker-left__tZ1iw","dndMarkerRight":"DataTableHeaderCell-module_dnd-marker-right__nT0Cc"};
+var css$y = {"cell":"f92Voj","sort-icon":"kBIPQT","dropdown-icon":"_4wL5h7","infoIcon":"_3kv0Ou","resizable":"OguAeu","size-24":"KCxb1v","size-30":"hXpCGG","size-36":"cMn8B0","size-42":"cKF4V4","size-48":"_9Ubrx9","padding-left-24":"es13AN","padding-right-24":"quoVOM","caption":"x6aUj3","checkbox":"_6z6hrg","icon":"vhIt7R","icon-cell":"heHNOs","align-right":"TwQ966","align-center":"MuWmhp","tooltip-wrapper":"v3eKuR","cell-tooltip":"iRlzGR","upper-case":"bRr-hu","font-size-14":"OFWDew","resize-mark":"p5FF1E","draggable":"_4TWRQh","ghost":"wz7OqY","is-dragged-out":"wTwyO9","dnd-marker-left":"DGkPT4","dnd-marker-right":"_0zb6Vt","cell-tooltip-wrapper":"XTKaNv","cell-tooltip-text":"Vbyba2","sortIcon":"kBIPQT","dropdownIcon":"_4wL5h7","size24":"KCxb1v","size30":"hXpCGG","size36":"cMn8B0","size42":"cKF4V4","size48":"_9Ubrx9","paddingLeft24":"es13AN","paddingRight24":"quoVOM","iconCell":"heHNOs","alignRight":"TwQ966","alignCenter":"MuWmhp","tooltipWrapper":"v3eKuR","cellTooltip":"iRlzGR","upperCase":"bRr-hu","fontSize14":"OFWDew","resizeMark":"p5FF1E","isDraggedOut":"wTwyO9","dndMarkerLeft":"DGkPT4","dndMarkerRight":"_0zb6Vt","cellTooltipWrapper":"XTKaNv","cellTooltipText":"Vbyba2"};
 
-var _path$y;
-function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
+var _path$v;
+function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
 var SvgTableSwap18 = function SvgTableSwap18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
+  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$y || (_path$y = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M6 1 2 5h3v7h2V5h3L6 1zm7 12V6h-2v7H8l4 4 4-4h-3z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$z = /*#__PURE__*/React.forwardRef(SvgTableSwap18);
+var ForwardRef$w = /*#__PURE__*/React.forwardRef(SvgTableSwap18);
 
-var _path$x;
-function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
+var _path$u;
+function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
 var SvgTableSortAsc18 = function SvgTableSortAsc18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
+  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$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M10 6v10H8V6H5l4-4 4 4h-3z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$y = /*#__PURE__*/React.forwardRef(SvgTableSortAsc18);
+var ForwardRef$v = /*#__PURE__*/React.forwardRef(SvgTableSortAsc18);
 
-var _path$w;
-function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
+var _path$t;
+function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
 var SvgTableSortDesc18 = function SvgTableSortDesc18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
+  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$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M10 12V2H8v10H5l4 4 4-4h-3z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$x = /*#__PURE__*/React.forwardRef(SvgTableSortDesc18);
+var ForwardRef$u = /*#__PURE__*/React.forwardRef(SvgTableSortDesc18);
 
-var _path$v;
-function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
+var _path$s;
+function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
 var SvgContentFiltration18 = function SvgContentFiltration18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "m8 14 2 2v-5H8v3zM2 3v2h14V3H2zm6 8h2l6-6H2l6 6z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$w = /*#__PURE__*/React.forwardRef(SvgContentFiltration18);
+var ForwardRef$t = /*#__PURE__*/React.forwardRef(SvgContentFiltration18);
 
-var _path$u;
-function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
+var _path$r;
+function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
 var SvgNavigationChevronDown18 = function SvgNavigationChevronDown18(props, ref) {
-  return /*#__PURE__*/React__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$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$v = /*#__PURE__*/React.forwardRef(SvgNavigationChevronDown18);
-
-var _path$t;
-function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
-var SvgNavigationChevronUp18 = function SvgNavigationChevronUp18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
+  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$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__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",
+    d: "M12.443 6.442 9 9.877 5.558 6.442 4.5 7.5 9 12l4.5-4.5-1.057-1.058z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$u = /*#__PURE__*/React.forwardRef(SvgNavigationChevronUp18);
+var ForwardRef$s = /*#__PURE__*/React.forwardRef(SvgNavigationChevronDown18);
 
-var _path$s;
-function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
-var SvgNotificationInfoOutline18 = function SvgNotificationInfoOutline18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
+var _path$q;
+function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
+var SvgNavigationChevronUp18 = function SvgNavigationChevronUp18(props, ref) {
+  return /*#__PURE__*/React__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$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__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",
+    d: "m9 6-4.5 4.5 1.058 1.057L9 8.123l3.443 3.434L13.5 10.5 9 6z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$t = /*#__PURE__*/React.forwardRef(SvgNotificationInfoOutline18);
+var ForwardRef$r = /*#__PURE__*/React.forwardRef(SvgNavigationChevronUp18);
 
 class DataTableHeaderCell extends React__namespace.Component {
     constructor() {
@@ -1695,25 +2025,29 @@ class DataTableHeaderCell extends React__namespace.Component {
         };
         this.getTextStyle = () => {
             if (this.props.textCase === 'upper')
-                return css$w.upperCase;
-            return css$w['font-size-14'];
+                return css$y.upperCase;
+            return css$y['font-size-14'];
+        };
+        this.getTooltipContent = () => (React__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.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 })))));
         };
-        this.getColumnCaption = () => (React__namespace.createElement("div", { className: css$w.tooltipWrapper },
-            React__namespace.createElement(Tooltip, { trigger: "hover", placement: "bottom-start", renderContent: !this.state.isDropdownOpen && this.props.column.info ? () => this.props.column.info : null, color: "default", cx: css$w.cellTooltip, offset: [-12, 12] },
-                React__namespace.createElement("div", { className: uuiCore.cx(css$w.iconCell, css$w['align-' + this.props.column.textAlign], uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
-                    React__namespace.createElement(Text, { key: "text", lineHeight: "30", fontSize: "14", size: "30", cx: uuiCore.cx(css$w.caption, this.getTextStyle(), uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaption) }, this.props.column.caption),
-                    this.props.column.info && (React__namespace.createElement(IconButton, { key: "info", cx: uuiCore.cx(css$w.icon, css$w.infoIcon, this.props.sortDirection && css$w.sortIconActive, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: "secondary", icon: ForwardRef$t })),
-                    this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React__namespace.createElement(IconButton, { key: "sort", cx: uuiCore.cx(css$w.icon, css$w.sortIcon, this.props.sortDirection && css$w.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$w.icon, !this.props.sortDirection && css$w.filterIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "default", icon: ForwardRef$w })),
-                    this.props.column.renderFilter && (React__namespace.createElement(IconButton, { key: "dropdown", cx: uuiCore.cx(css$w.icon, css$w.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$w.checkbox, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCheckbox) })));
-        this.renderResizeMark = (props) => React__namespace.createElement("div", { onMouseDown: props.onResizeStart, className: uuiCore.cx(css$w.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$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.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$w.cell, css$w['size-' + (this.props.size || '36')], this.props.isFirstColumn && css$w['padding-left-24'], this.props.isLastColumn && css$w['padding-right-24'], this.props.column.cx, this.props.allowColumnsResizing && css$w.resizable, props.isDraggable && css$w.draggable, props.isDragGhost && css$w.ghost, props.isDraggedOut && css$w.isDraggedOut, props.isDndInProgress && css$w['dnd-marker-' + props.position]), onClick: !this.props.column.renderFilter ? props.toggleSort : dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.onClick, rawProps: Object.assign({ role: 'columnheader', 'aria-sort': this.props.sortDirection === 'asc' ? 'ascending' : this.props.sortDirection ? 'descending' : 'none' }, props.eventHandlers) }),
+            }, cx: 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) }),
             this.renderHeaderCheckbox(),
             this.getColumnCaption(),
             this.props.allowColumnsResizing && this.renderResizeMark(props)));
@@ -1750,10 +2084,10 @@ const useColumnsWithFilters = (initialColumns, filters) => {
     return columns;
 };
 
-var _path$r, _path2$1, _path3, _path4, _path5, _path6, _g$1, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14, _path15, _path16, _path17, _path18, _path19, _path20, _path21, _path22, _path23, _path24, _defs;
-function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
+var _path$p, _path2$1, _path3, _path4, _path5, _path6, _g$1, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14, _path15, _path16, _path17, _path18, _path19, _path20, _path21, _path22, _path23, _path24, _defs;
+function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
 var SvgEmptyTable = function SvgEmptyTable(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     width: 232,
     height: 180,
     viewBox: "0 0 232 180",
@@ -1762,7 +2096,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     ref: ref
   }, props), /*#__PURE__*/React__namespace.createElement("g", {
     clipPath: "url(#a)"
-  }, _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
+  }, _path$p || (_path$p = /*#__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", {
@@ -1888,9 +2222,9 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M0 0h230.897v180H0z"
   })))));
 };
-var ForwardRef$s = /*#__PURE__*/React.forwardRef(SvgEmptyTable);
+var ForwardRef$q = /*#__PURE__*/React.forwardRef(SvgEmptyTable);
 
-var css$v = {"sticky-header":"DataTable-module_sticky-header__g-Ods","listContainer":"DataTable-module_listContainer__yR0QP","table":"DataTable-module_table__UPgfH","no-results":"DataTable-module_no-results__0TI-p","no-results-icon":"DataTable-module_no-results-icon__w-p5I","no-results-title":"DataTable-module_no-results-title__QIMfi","stickyHeader":"DataTable-module_sticky-header__g-Ods","noResults":"DataTable-module_no-results__0TI-p","noResultsIcon":"DataTable-module_no-results-icon__w-p5I","noResultsTitle":"DataTable-module_no-results-title__QIMfi"};
+var css$x = {"sticky-header":"SfowPg","listContainer":"pV82s6","table":"RRaqCW","no-results":"_8g-jNr","no-results-icon":"NLktk6","no-results-title":"JcfJwP","stickyHeader":"SfowPg","noResults":"_8g-jNr","noResultsIcon":"NLktk6","noResultsTitle":"JcfJwP"};
 
 function DataTable(props) {
     var _a;
@@ -1904,123 +2238,126 @@ 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$v.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$v.noResultsIcon, icon: ForwardRef$s }),
-            React__namespace.createElement(Text, { cx: css$v.noResultsTitle, fontSize: "24", lineHeight: "30", color: "primary", font: "semibold" }, i18n.tables.noResultsBlock.title),
+        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),
             React__namespace.createElement(Text, { fontSize: "16", lineHeight: "24", font: "regular", color: "primary" }, i18n.tables.noResultsBlock.message)))));
     }, [props.renderNoResultsBlock]);
     const onConfigurationButtonClick = React__namespace.useCallback(() => {
+        const configProps = { columns: props.columns, columnsConfig: Object.assign({}, config), defaultConfig };
         uuiModals
             .show((modalProps) => {
-            return (React__namespace.createElement(ColumnsConfigurationModal, Object.assign({}, modalProps, { columns: props.columns, columnsConfig: config, defaultConfig: defaultConfig })));
+            return (props.renderColumnsConfigurationModal
+                ? props.renderColumnsConfigurationModal(Object.assign(Object.assign({}, configProps), modalProps))
+                : (React__namespace.createElement(ColumnsConfigurationModal, Object.assign({}, modalProps, { columns: props.columns, columnsConfig: config, defaultConfig: defaultConfig }))));
         })
             .then((columnsConfig) => props.onValueChange(Object.assign(Object.assign({}, props.value), { columnsConfig })))
             .catch(() => null);
     }, [
-        props.columns, config, defaultConfig, props.value, props.onValueChange,
+        props.columns, config, defaultConfig, props.value, props.onValueChange, props.renderColumnsConfigurationModal,
     ]);
     const renderRowsContainer = React__namespace.useCallback(({ listContainerRef, estimatedHeight, offsetY, scrollShadows, }) => (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement("div", { className: css$v.stickyHeader },
+        React__namespace.createElement("div", { className: css$x.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$v.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+        props.exactRowsCount !== 0 ? (React__namespace.createElement("div", { className: css$x.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$v.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$x.table), rawProps: {
                 role: 'table',
                 'aria-colcount': columns.length,
                 'aria-rowcount': props.rowsCount,
             } })));
 }
 
-var styles$1 = {"main-panel":"ColumnsConfigurationModal-module_main-panel__4w6PV","group-title":"ColumnsConfigurationModal-module_group-title__YQ24j","group-title-text":"ColumnsConfigurationModal-module_group-title-text__Uu-cT","group-title-badge":"ColumnsConfigurationModal-module_group-title-badge__7PUJ9","group-items":"ColumnsConfigurationModal-module_group-items__gni54","no-data":"ColumnsConfigurationModal-module_no-data__chQEC","h-divider":"ColumnsConfigurationModal-module_h-divider__5NbQX","search-area":"ColumnsConfigurationModal-module_search-area__8lhwH","mainPanel":"ColumnsConfigurationModal-module_main-panel__4w6PV","groupTitle":"ColumnsConfigurationModal-module_group-title__YQ24j","groupTitleText":"ColumnsConfigurationModal-module_group-title-text__Uu-cT","groupTitleBadge":"ColumnsConfigurationModal-module_group-title-badge__7PUJ9","groupItems":"ColumnsConfigurationModal-module_group-items__gni54","noData":"ColumnsConfigurationModal-module_no-data__chQEC","hDivider":"ColumnsConfigurationModal-module_h-divider__5NbQX","searchArea":"ColumnsConfigurationModal-module_search-area__8lhwH"};
+var styles$1 = {"main-panel":"eWnYjN","group-title":"aHgXng","group-title-text":"QeY1fs","group-title-badge":"IGW7hZ","group-items":"_1cIeIe","no-data":"GfP7QX","h-divider":"Kfk6Sg","search-area":"_8EBvHT","mainPanel":"eWnYjN","groupTitle":"aHgXng","groupTitleText":"QeY1fs","groupTitleBadge":"IGW7hZ","groupItems":"_1cIeIe","noData":"GfP7QX","hDivider":"Kfk6Sg","searchArea":"_8EBvHT"};
 
-var _path$q;
-function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
+var _path$o;
+function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
 var SvgNavigationMoreVert18 = function SvgNavigationMoreVert18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+  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$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$o || (_path$o = /*#__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$r = /*#__PURE__*/React.forwardRef(SvgNavigationMoreVert18);
+var ForwardRef$p = /*#__PURE__*/React.forwardRef(SvgNavigationMoreVert18);
 
-var _path$p;
-function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
+var _path$n;
+function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
 var SvgActionUpdate18 = function SvgActionUpdate18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+  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$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__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$q = /*#__PURE__*/React.forwardRef(SvgActionUpdate18);
+var ForwardRef$o = /*#__PURE__*/React.forwardRef(SvgActionUpdate18);
 
-var _path$o;
-function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
+var _path$m;
+function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
 var SvgActionLockFill18 = function SvgActionLockFill18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$m || (_path$m = /*#__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$p = /*#__PURE__*/React.forwardRef(SvgActionLockFill18);
+var ForwardRef$n = /*#__PURE__*/React.forwardRef(SvgActionLockFill18);
 
-var _path$n;
-function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
+var _path$l;
+function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
 var SvgActionPinOn18 = function SvgActionPinOn18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+  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$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M12 9V3h1V2H5v1h1v6l-2 1v1h4v5h2v-5h4v-1l-2-1z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$o = /*#__PURE__*/React.forwardRef(SvgActionPinOn18);
+var ForwardRef$m = /*#__PURE__*/React.forwardRef(SvgActionPinOn18);
 
-var _path$m;
-function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
+var _path$k;
+function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
 var SvgActionPinOff18 = function SvgActionPinOff18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__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$n = /*#__PURE__*/React.forwardRef(SvgActionPinOff18);
+var ForwardRef$l = /*#__PURE__*/React.forwardRef(SvgActionPinOff18);
 
 const i18nLocal = i18n.tables.columnsConfigurationModal;
 function PinIconButton(props) {
@@ -2035,12 +2372,12 @@ function PinIconButton(props) {
     }, [isPinned, isPinnedAlways]);
     const pinIcon = React.useMemo(() => {
         if (isPinnedAlways) {
-            return ForwardRef$p;
+            return ForwardRef$n;
         }
         if (isPinned) {
-            return isHovered ? ForwardRef$n : ForwardRef$o;
+            return isHovered ? ForwardRef$l : ForwardRef$m;
         }
-        return ForwardRef$o;
+        return ForwardRef$m;
     }, [
         isPinnedAlways, isHovered, isPinned,
     ]);
@@ -2050,7 +2387,7 @@ function PinIconButton(props) {
             React__namespace.createElement(IconButton, { icon: pinIcon, onClick: pinClickHandler, isDisabled: isPinnedAlways, color: isPinned ? 'info' : undefined }))));
 }
 
-var styles = {"row-wrapper":"ColumnRow-module_row-wrapper__J7zw-","not-pinned":"ColumnRow-module_not-pinned__xHoL6","pin-icon-button":"ColumnRow-module_pin-icon-button__jlBrT","drag-handle":"ColumnRow-module_drag-handle__hdFZA","dnd-disabled":"ColumnRow-module_dnd-disabled__n7mQR","rowWrapper":"ColumnRow-module_row-wrapper__J7zw-","notPinned":"ColumnRow-module_not-pinned__xHoL6","pinIconButton":"ColumnRow-module_pin-icon-button__jlBrT","dragHandle":"ColumnRow-module_drag-handle__hdFZA","dndDisabled":"ColumnRow-module_dnd-disabled__n7mQR"};
+var styles = {"row-wrapper":"DnKOH2","not-pinned":"W4fKas","pin-icon-button":"_9ZZSqT","drag-handle":"ISEnyP","dnd-disabled":"X8lBii","rowWrapper":"DnKOH2","notPinned":"W4fKas","pinIconButton":"_9ZZSqT","dragHandle":"ISEnyP","dndDisabled":"X8lBii"};
 
 const ColumnRow = React__namespace.memo(function ColumnRow(props) {
     const { column } = props;
@@ -2066,7 +2403,7 @@ const ColumnRow = React__namespace.memo(function ColumnRow(props) {
         return (React__namespace.createElement(FlexRow, Object.assign({ size: "30", cx: wrapperClasses }, wrapperAttrs),
             React__namespace.createElement(FlexRow, { size: "30", spacing: "6", cx: styles.title },
                 React__namespace.createElement(uuiComponents.DragHandle, { rawProps: dragHandleRawProps, isDisabled: !isDndAllowed, cx: uuiCore.cx(styles.dragHandle, !isDndAllowed && styles.dndDisabled) }),
-                React__namespace.createElement(Checkbox, { key: column.key, label: column.caption, value: isVisible, onValueChange: toggleVisibility, isDisabled: column.isAlwaysVisible })),
+                React__namespace.createElement(Checkbox, { key: column.key, label: props.renderItem ? props.renderItem(props.column) : column.caption, value: isVisible, onValueChange: toggleVisibility, isDisabled: column.isAlwaysVisible })),
             React__namespace.createElement(uuiComponents.FlexSpacer, null),
             React__namespace.createElement(FlexRow, { size: "30", cx: styles.pinIconButton },
                 React__namespace.createElement(PinIconButton, { id: column.key, isPinned: !!isPinned, canUnpin: !isPinnedAlways, onTogglePin: togglePin })),
@@ -2085,6 +2422,7 @@ function ColumnsConfigurationModal(props) {
         initialColumnsConfig,
         columns,
         defaultConfig,
+        getSearchFields: props.getSearchFields,
     });
     const apply = React.useCallback(() => modalProps.success(columnsConfig), [columnsConfig, modalProps]);
     const close = React.useCallback(() => modalProps.abort(), [modalProps]);
@@ -2098,9 +2436,9 @@ function ColumnsConfigurationModal(props) {
         const hasDivider = !!(amountPinned && amountUnPinned);
         return (React__namespace.createElement(React__namespace.Fragment, null,
             renderGroupTitle(i18n$1.displayedSectionTitle, amountPinned + amountUnPinned),
-            !!amountPinned && (React__namespace.createElement(FlexRow, { cx: styles$1.groupItems, size: "30" }, groupedColumns.displayedPinned.map((c) => (React__namespace.createElement(ColumnRow, { column: c, key: c.key }))))),
+            !!amountPinned && (React__namespace.createElement(FlexRow, { cx: styles$1.groupItems, size: "30" }, groupedColumns.displayedPinned.map((c) => (React__namespace.createElement(ColumnRow, { column: c, key: c.key, renderItem: props.renderItem }))))),
             hasDivider && React__namespace.createElement("div", { className: styles$1.hDivider }),
-            !!amountUnPinned && (React__namespace.createElement(FlexRow, { cx: styles$1.groupItems, size: "30" }, groupedColumns.displayedUnpinned.map((c) => (React__namespace.createElement(ColumnRow, { column: c, key: c.key })))))));
+            !!amountUnPinned && (React__namespace.createElement(FlexRow, { cx: styles$1.groupItems, size: "30" }, groupedColumns.displayedUnpinned.map((c) => (React__namespace.createElement(ColumnRow, { column: c, key: c.key, renderItem: props.renderItem })))))));
     };
     const renderHidden = () => {
         const amountHidden = groupedColumns.hidden.length;
@@ -2109,10 +2447,10 @@ function ColumnsConfigurationModal(props) {
         }
         return (React__namespace.createElement(React__namespace.Fragment, null,
             renderGroupTitle(i18n$1.hiddenSectionTitle, amountHidden),
-            React__namespace.createElement(FlexRow, { cx: styles$1.groupItems, size: "30" }, groupedColumns.hidden.map((c) => (React__namespace.createElement(ColumnRow, { column: c, key: c.key }))))));
+            React__namespace.createElement(FlexRow, { cx: styles$1.groupItems, size: "30" }, groupedColumns.hidden.map((c) => (React__namespace.createElement(ColumnRow, { column: c, key: c.key, renderItem: props.renderItem }))))));
     };
     const noVisibleColumns = React.useMemo(() => !groupedColumns.displayedPinned.length && !groupedColumns.displayedUnpinned.length, [groupedColumns.displayedPinned, groupedColumns.displayedUnpinned]);
-    const applyButton = React__namespace.createElement(Button, { caption: i18n$1.applyButton, isDisabled: noVisibleColumns, color: "accent", onClick: apply });
+    const applyButton = React__namespace.createElement(Button, { caption: i18n$1.applyButton, isDisabled: noVisibleColumns, color: "primary", onClick: apply });
     return (React__namespace.createElement(ModalBlocker, Object.assign({}, modalProps),
         React__namespace.createElement(ModalWindow, { height: 700 },
             React__namespace.createElement(ModalHeader, { title: i18n$1.configureColumnsTitle, onClose: close }),
@@ -2120,7 +2458,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$r, 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$p, size: "30", color: "secondary", isDropdown: false })) })),
             React__namespace.createElement(Panel, { cx: styles$1.mainPanel },
                 React__namespace.createElement(ScrollBars, null,
                     renderVisible(),
@@ -2129,22 +2467,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$q, caption: i18n$1.resetToDefaultButton, onClick: reset }),
+                React__namespace.createElement(LinkButton, { icon: ForwardRef$o, 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$u = {"panel":"ColumnHeaderDropdown-module_panel__8EgfJ"};
+var css$w = {"panel":"E0IYu9"};
 
-var css$t = {"sorting-panel-container":"SortingPanel-module_sorting-panel-container__4L-8V","sort-active":"SortingPanel-module_sort-active__yoB0U","sortingPanelContainer":"SortingPanel-module_sorting-panel-container__4L-8V","sortActive":"SortingPanel-module_sort-active__yoB0U"};
+var css$v = {"sorting-panel-container":"WeS65g","sort-active":"DwaTcF","sortingPanelContainer":"WeS65g","sortActive":"DwaTcF"};
 
 const SortingPanelImpl = ({ sortDirection, onSort }) => {
     const sortAsc = 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$t.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 })));
+    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 })));
 };
 const SortingPanel = React__namespace.default.memo(SortingPanelImpl);
 
@@ -2159,63 +2497,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$u.panel },
+    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 },
             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$l;
-function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
+var _path$j;
+function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
 var SvgNotificationDone24 = function SvgNotificationDone24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+  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$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__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$m = /*#__PURE__*/React.forwardRef(SvgNotificationDone24);
+var ForwardRef$k = /*#__PURE__*/React.forwardRef(SvgNotificationDone24);
 
-var _path$k;
-function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
+var _path$i;
+function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
 var SvgNotificationDone18 = function SvgNotificationDone18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__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$l = /*#__PURE__*/React.forwardRef(SvgNotificationDone18);
+var ForwardRef$j = /*#__PURE__*/React.forwardRef(SvgNotificationDone18);
 
-var _path$j;
-function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+var _path$h;
+function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
 var SvgNotificationDone12 = function SvgNotificationDone12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+  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$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__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$k = /*#__PURE__*/React.forwardRef(SvgNotificationDone12);
+var ForwardRef$i = /*#__PURE__*/React.forwardRef(SvgNotificationDone12);
 
-var css$s = {"render-item":"DataPickerRow-module_render-item__Xg-KM","icon-wrapper":"DataPickerRow-module_icon-wrapper__2iHGZ","picker-row":"DataPickerRow-module_picker-row__dKixb","icon-default":"DataPickerRow-module_icon-default__gW-Xp","icon-primary":"DataPickerRow-module_icon-primary__QfDbw","renderItem":"DataPickerRow-module_render-item__Xg-KM","iconWrapper":"DataPickerRow-module_icon-wrapper__2iHGZ","pickerRow":"DataPickerRow-module_picker-row__dKixb","iconDefault":"DataPickerRow-module_icon-default__gW-Xp","iconPrimary":"DataPickerRow-module_icon-primary__QfDbw"};
+var css$u = {"render-item":"W0hH7J","icon-wrapper":"X0WXAb","picker-row":"RIFFkg","icon-default":"wJMIKA","icon-primary":"nmVr5l","renderItem":"W0hH7J","iconWrapper":"X0WXAb","pickerRow":"RIFFkg","iconDefault":"wJMIKA","iconPrimary":"nmVr5l"};
 
 class DataPickerRow extends React__namespace.Component {
     constructor() {
@@ -2223,37 +2561,37 @@ class DataPickerRow extends React__namespace.Component {
         this.getIcon = (size) => {
             switch (size) {
                 case '24':
-                    return ForwardRef$k;
+                    return ForwardRef$i;
                 case '30':
-                    return ForwardRef$l;
+                    return ForwardRef$j;
                 case '36':
-                    return ForwardRef$l;
+                    return ForwardRef$j;
                 case '42':
-                    return ForwardRef$m;
+                    return ForwardRef$k;
                 default:
-                    return ForwardRef$l;
+                    return ForwardRef$j;
             }
         };
         this.column = {
             key: 'name',
             grow: 1,
             width: 0,
-            render: (item, rowProps) => (React__namespace.createElement("div", { key: rowProps.id, className: css$s.renderItem },
+            render: (item, rowProps) => (React__namespace.createElement("div", { key: rowProps.id, className: css$u.renderItem },
                 this.props.renderItem(item, rowProps),
                 React__namespace.createElement(uuiComponents.FlexSpacer, null),
-                (rowProps.isChildrenSelected || rowProps.isSelected) && (React__namespace.createElement("div", { className: css$s.iconWrapper },
-                    React__namespace.createElement(uuiComponents.IconContainer, { icon: this.getIcon(this.props.size), cx: rowProps.isChildrenSelected ? css$s.iconDefault : css$s.iconPrimary }))))),
+                (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 }))))),
         };
         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$s.pickerRow, this.props.cx], renderContent: this.renderContent }));
+        return React__namespace.createElement(uuiComponents.DataPickerRow, Object.assign({}, this.props, { cx: [css$u.pickerRow, this.props.cx], renderContent: this.renderContent }));
     }
 }
 
-var css$r = {"done":"MobileDropdownWrapper-module_done__8Ywqd"};
+var css$t = {"done":"qrDRvV"};
 
 const MobileDropdownWrapper = (props) => {
     const isVisible = uuiCore.isMobile();
@@ -2261,22 +2599,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$r.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$t.done, size: "48" })));
 };
 
-var css$q = {"sub-header-wrapper":"PickerModal-module_sub-header-wrapper__PVjxt","switch":"PickerModal-module_switch__4ZWZ-","no-found-modal-container":"PickerModal-module_no-found-modal-container__zufRW","no-found-modal-container-icon":"PickerModal-module_no-found-modal-container-icon__RXBf4","no-found-modal-container-text":"PickerModal-module_no-found-modal-container-text__TgKzv","subHeaderWrapper":"PickerModal-module_sub-header-wrapper__PVjxt","$switch$":"PickerModal-module_switch__4ZWZ-","noFoundModalContainer":"PickerModal-module_no-found-modal-container__zufRW","noFoundModalContainerIcon":"PickerModal-module_no-found-modal-container-icon__RXBf4","noFoundModalContainerText":"PickerModal-module_no-found-modal-container-text__TgKzv"};
+var css$s = {"sub-header-wrapper":"WSzC03","switch":"hV5Nfj","no-found-modal-container":"YElJZE","no-found-modal-container-icon":"lQ7S2x","no-found-modal-container-text":"_60wOtJ","subHeaderWrapper":"WSzC03","$switch$":"hV5Nfj","noFoundModalContainer":"YElJZE","noFoundModalContainerIcon":"lQ7S2x","noFoundModalContainerText":"_60wOtJ"};
 
-var _path$i, _path2;
-function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
+var _path$g, _path2;
+function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
 var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     width: 66,
     height: 67,
     viewBox: "0 0 66 67",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__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", {
@@ -2286,16 +2624,16 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
     fill: "#6C6F80"
   })));
 };
-var ForwardRef$j = /*#__PURE__*/React.forwardRef(SvgSearchWithBackground);
+var ForwardRef$h = /*#__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$q.noFoundModalContainer },
-                React__namespace.createElement(uuiComponents.IconContainer, { cx: css$q.noFoundModalContainerIcon, icon: ForwardRef$j }),
-                React__namespace.createElement(Text, { cx: css$q.noFoundModalContainerText, font: "semibold", fontSize: "16", lineHeight: "24", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsMessage),
-                React__namespace.createElement(Text, { cx: css$q.noFoundModalContainerText, fontSize: "12", lineHeight: "18", font: "regular", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsSubTitle)));
+            return this.props.renderNotFound ? (this.props.renderNotFound({ search: this.state.dataSourceState.search, onClose: () => this.props.success(null) })) : (React__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)));
         };
     }
     renderRow(rowProps) {
@@ -2317,7 +2655,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$q.subHeaderWrapper },
+                React__namespace.createElement(FlexCell, { cx: css$s.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(),
@@ -2326,7 +2664,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$q.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$s.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()))));
@@ -2345,11 +2683,11 @@ class PickerModal extends React__namespace.Component {
 
 const Avatar = uuiCore.withMods(uuiComponents.Avatar, () => []);
 
-var css$p = {"root":"AvatarStack-module_root__OBrBf"};
+var css$r = {"root":"-oBec6"};
 
-const AvatarStack = uuiCore.withMods(uuiComponents.AvatarStack, () => [css$p.root]);
+const AvatarStack = uuiCore.withMods(uuiComponents.AvatarStack, () => [css$r.root]);
 
-var css$o = {"root":"Badge-module_root__-W-nq","size-18":"Badge-module_size-18__lYaxv","fill-transparent":"Badge-module_fill-transparent__AMwvE","size-24":"Badge-module_size-24__44rND","size-30":"Badge-module_size-30__FLG32","size-36":"Badge-module_size-36__AN62X","size-42":"Badge-module_size-42__hJg-A","size-48":"Badge-module_size-48__vx-wE","fill-solid":"Badge-module_fill-solid__SdEDe","fill-semitransparent":"Badge-module_fill-semitransparent__iHuV1","size18":"Badge-module_size-18__lYaxv","fillTransparent":"Badge-module_fill-transparent__AMwvE","size24":"Badge-module_size-24__44rND","size30":"Badge-module_size-30__FLG32","size36":"Badge-module_size-36__AN62X","size42":"Badge-module_size-42__hJg-A","size48":"Badge-module_size-48__vx-wE","fillSolid":"Badge-module_fill-solid__SdEDe","fillSemitransparent":"Badge-module_fill-semitransparent__iHuV1"};
+var css$q = {"root":"wKHFhx","size-18":"w7pXyW","fill-transparent":"fOo0lm","size-24":"CF-nIu","size-30":"_3oRQvj","size-36":"H-8uEN","size-42":"bBOuDW","size-48":"-Jy2kB","fill-solid":"Y-bw-4","fill-semitransparent":"peZYl3","size18":"w7pXyW","fillTransparent":"fOo0lm","size24":"CF-nIu","size30":"_3oRQvj","size36":"H-8uEN","size42":"bBOuDW","size48":"-Jy2kB","fillSolid":"Y-bw-4","fillSemitransparent":"peZYl3"};
 
 const defaultSize$4 = '36';
 const mapSize$1 = {
@@ -2362,7 +2700,7 @@ const mapSize$1 = {
 };
 function applyBadgeMods(mods) {
     return [
-        css$o.root, buttonCss.root, css$o['size-' + (mods.size || defaultSize$4)], css$o['fill-' + (mods.fill || 'solid')], mods.color && `badge-${mods.color}`,
+        css$q.root, buttonCss.root, css$q['size-' + (mods.size || defaultSize$4)], css$q['fill-' + (mods.fill || 'solid')], mods.color && `badge-${mods.color}`,
     ];
 }
 const Badge = uuiCore.withMods(uuiComponents.Button, applyBadgeMods, (props) => ({
@@ -2371,7 +2709,7 @@ const Badge = uuiCore.withMods(uuiComponents.Button, applyBadgeMods, (props) =>
     countPosition: 'left',
 }));
 
-var css$n = {"root":"Tag-module_root__sO4Qq","size-18":"Tag-module_size-18__nCuL7","size-24":"Tag-module_size-24__b0V4K","size-30":"Tag-module_size-30__YNtmt","size-36":"Tag-module_size-36__M-nVf","size-42":"Tag-module_size-42__IBxvV","size-48":"Tag-module_size-48__ksVx2","size18":"Tag-module_size-18__nCuL7","size24":"Tag-module_size-24__b0V4K","size30":"Tag-module_size-30__YNtmt","size36":"Tag-module_size-36__M-nVf","size42":"Tag-module_size-42__IBxvV","size48":"Tag-module_size-48__ksVx2"};
+var css$p = {"root":"_0eseTq","size-18":"Jea6b6","size-24":"pwZKr3","size-30":"_2xnIcj","size-36":"F7WEm0","size-42":"Y6mEiq","size-48":"KfgBys","size18":"Jea6b6","size24":"pwZKr3","size30":"_2xnIcj","size36":"F7WEm0","size42":"Y6mEiq","size48":"KfgBys"};
 
 const defaultSize$3 = '36';
 const mapSize = {
@@ -2383,98 +2721,64 @@ const mapSize = {
     18: '18',
 };
 function applyTagMods(mods) {
-    return [css$n['size-' + (mods.size || defaultSize$3)], css$n.root];
+    return [css$p['size-' + (mods.size || defaultSize$3)], css$p.root];
 }
 const Tag = uuiCore.withMods(uuiComponents.Button, applyTagMods, (props) => ({
     dropdownIcon: systemIcons[mapSize[props.size] || defaultSize$3].foldingArrow,
     clearIcon: systemIcons[mapSize[props.size] || defaultSize$3].clear,
 }));
 
-var css$m = {"root":"Paginator-module_root__d1jwS","spacer":"Paginator-module_spacer__8AhYN","mode-ghost":"Paginator-module_mode-ghost__-NfIp","size-24":"Paginator-module_size-24__zPh-d","size-30":"Paginator-module_size-30__R4PVg","navigation-size-24":"Paginator-module_navigation-size-24__gxUQ8","navigation-size-30":"Paginator-module_navigation-size-30__ZRsLp","modeGhost":"Paginator-module_mode-ghost__-NfIp","size24":"Paginator-module_size-24__zPh-d","size30":"Paginator-module_size-30__R4PVg","navigationSize24":"Paginator-module_navigation-size-24__gxUQ8","navigationSize30":"Paginator-module_navigation-size-30__ZRsLp"};
+var css$o = {"root":"AaOTyQ","spacer":"bpm7Wm","mode-ghost":"fWp85D","size-24":"HI-Bqs","size-30":"WLF8lF","navigation-size-24":"x82Xz-","navigation-size-30":"_0sElWb","modeGhost":"fWp85D","size24":"HI-Bqs","size30":"WLF8lF","navigationSize24":"x82Xz-","navigationSize30":"_0sElWb"};
 
-var _path$h;
-function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
+var _path$f;
+function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
 var SvgNavigationChevronLeft12 = function SvgNavigationChevronLeft12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__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$i = /*#__PURE__*/React.forwardRef(SvgNavigationChevronLeft12);
+var ForwardRef$g = /*#__PURE__*/React.forwardRef(SvgNavigationChevronLeft12);
 
-var _path$g;
-function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
+var _path$e;
+function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
 var SvgNavigationChevronRight12 = function SvgNavigationChevronRight12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    d: "m5 3-.705.705L6.585 6l-2.29 2.295L5 9l3-3-3-3z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$h = /*#__PURE__*/React.forwardRef(SvgNavigationChevronRight12);
-
-var _path$f;
-function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
-var SvgNavigationChevronLeft18 = function SvgNavigationChevronLeft18(props, ref) {
-  return /*#__PURE__*/React__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$f || (_path$f = /*#__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$g = /*#__PURE__*/React.forwardRef(SvgNavigationChevronLeft18);
-
-var _path$e;
-function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
-var SvgNavigationChevronRight18 = function SvgNavigationChevronRight18(props, ref) {
-  return /*#__PURE__*/React__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$e || (_path$e = /*#__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",
+    d: "m5 3-.705.705L6.585 6l-2.29 2.295L5 9l3-3-3-3z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$f = /*#__PURE__*/React.forwardRef(SvgNavigationChevronRight18);
+var ForwardRef$f = /*#__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$m.root }, params.rawProps),
-            React__namespace.default.createElement(Button, { cx: css$m[`navigation-size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$g : ForwardRef$i, onClick: params.goToPrev, isDisabled: params.isFirst, mode: "outline", color: "secondary" }),
+        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" }),
             params.pages.map((page, index) => {
                 var _a, _b;
                 if (page.type === 'spacer') {
-                    return (React__namespace.default.createElement(Button, { cx: cx__default.default(css$m[`size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], css$m.spacer), size: params.size, key: `${index}_spacer`, caption: "...", mode: "ghost", color: "secondary", tabIndex: -1 }));
+                    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 }));
                 }
                 else {
-                    return (React__namespace.default.createElement(Button, { cx: cx__default.default(css$m[`size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], css$m[`mode-${!page.isActive && 'ghost'}`]), size: params.size, key: page.pageNumber, caption: page.pageNumber, onClick: () => { var _a; return (_a = page.onClick) === null || _a === void 0 ? void 0 : _a.call(page); }, rawProps: { 'aria-current': page.isActive }, mode: (page.isActive && 'outline') || 'ghost', color: "primary" }));
+                    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" }));
                 }
             }),
-            React__namespace.default.createElement(Button, { cx: css$m[`navigation-size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$f : ForwardRef$h, onClick: params.goToNext, isDisabled: params.isLast, mode: "outline", color: "secondary" })));
+            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" })));
     };
     return React__namespace.default.createElement(uuiComponents.Paginator, Object.assign({}, props, { render: renderPaginator }));
 }
@@ -2482,15 +2786,15 @@ function Paginator(props) {
 const MAX_ITEMS = 100;
 const getMaxItems = (maxItems) => maxItems || maxItems === 0 ? maxItems : MAX_ITEMS;
 
-var css$l = {"root":"PickerToggler-module_root__oOCiN","mode-form":"PickerToggler-module_mode-form__YzMbU","mode-cell":"PickerToggler-module_mode-cell__HGJh8","mode-inline":"PickerToggler-module_mode-inline__3ONdn","size-24":"PickerToggler-module_size-24__l1vGj","size-30":"PickerToggler-module_size-30__pzxTr","size-36":"PickerToggler-module_size-36__SsqyI","size-42":"PickerToggler-module_size-42__tunwu","size-48":"PickerToggler-module_size-48__PM7zq","modeForm":"PickerToggler-module_mode-form__YzMbU","modeCell":"PickerToggler-module_mode-cell__HGJh8","modeInline":"PickerToggler-module_mode-inline__3ONdn","size24":"PickerToggler-module_size-24__l1vGj","size30":"PickerToggler-module_size-30__pzxTr","size36":"PickerToggler-module_size-36__SsqyI","size42":"PickerToggler-module_size-42__tunwu","size48":"PickerToggler-module_size-48__PM7zq"};
+var css$n = {"root":"zaJcLR","mode-form":"GLv2id","mode-cell":"UrsZiK","mode-inline":"_4jlNsY","size-24":"g10eQ4","size-30":"nIVbgv","size-36":"_2TAIms","size-42":"miafml","size-48":"gZvySS","modeForm":"GLv2id","modeCell":"UrsZiK","modeInline":"_4jlNsY","size24":"g10eQ4","size30":"nIVbgv","size36":"_2TAIms","size42":"miafml","size48":"gZvySS"};
 
 const defaultSize$2 = '36';
 const defaultMode = exports.EditMode.FORM;
 function applyPickerTogglerMods(mods) {
     return [
-        css$l.root,
-        css$l['size-' + (mods.size || defaultSize$2)],
-        css$l['mode-' + (mods.mode || defaultMode)],
+        css$n.root,
+        css$n['size-' + (mods.size || defaultSize$2)],
+        css$n['mode-' + (mods.mode || defaultMode)],
     ];
 }
 function PickerTogglerComponent(props, ref) {
@@ -2532,7 +2836,74 @@ function PickerTogglerComponent(props, ref) {
 }
 const PickerToggler = React__namespace.forwardRef(PickerTogglerComponent);
 
-var css$k = {"root":"PickerItem-module_root__PI16F","multiline-vertical-padding-24":"PickerItem-module_multiline-vertical-padding-24__sCN7p","multiline-vertical-padding-30":"PickerItem-module_multiline-vertical-padding-30__v2LUR","multiline-vertical-padding-36":"PickerItem-module_multiline-vertical-padding-36__65t4o","multiline-vertical-padding-42":"PickerItem-module_multiline-vertical-padding-42__Wt0JN","multiline-vertical-padding-48":"PickerItem-module_multiline-vertical-padding-48__oSirV","text":"PickerItem-module_text__S0Ejg","multilineVerticalPadding24":"PickerItem-module_multiline-vertical-padding-24__sCN7p","multilineVerticalPadding30":"PickerItem-module_multiline-vertical-padding-30__v2LUR","multilineVerticalPadding36":"PickerItem-module_multiline-vertical-padding-36__65t4o","multilineVerticalPadding42":"PickerItem-module_multiline-vertical-padding-42__Wt0JN","multilineVerticalPadding48":"PickerItem-module_multiline-vertical-padding-48__oSirV"};
+var css$m = {"root":"_5a2qra","multiline-vertical-padding-24":"QXral7","multiline-vertical-padding-30":"p9YtXn","multiline-vertical-padding-36":"FzKiHJ","multiline-vertical-padding-42":"xO59zQ","multiline-vertical-padding-48":"e0XRIj","text":"_5Q1Rll","multilineVerticalPadding24":"QXral7","multilineVerticalPadding30":"p9YtXn","multilineVerticalPadding36":"FzKiHJ","multilineVerticalPadding42":"xO59zQ","multilineVerticalPadding48":"e0XRIj"};
+
+var css$l = {"highlighted-text":"KiHlg-","highlightedText":"KiHlg-"};
+
+const mergeHighlightRanges = (ranges) => {
+    const mergedRanges = [];
+    ranges.forEach((range) => {
+        if (!mergedRanges.length) {
+            mergedRanges.push(Object.assign(Object.assign({}, range), { isHighlighted: true }));
+        }
+        const lastRange = mergedRanges[mergedRanges.length - 1];
+        if (range.from >= lastRange.from && range.from <= lastRange.to && range.to > lastRange.to) {
+            lastRange.to = range.to;
+        }
+        if (lastRange.to < range.from) {
+            mergedRanges.push(Object.assign(Object.assign({}, range), { isHighlighted: true }));
+        }
+    });
+    return mergedRanges;
+};
+const addNotHighlightedRanges = (ranges, str) => {
+    const allRanges = [];
+    ranges.forEach((range, index) => {
+        if (index === 0 && range.from !== 0) {
+            allRanges.push({ from: 0, to: range.from, isHighlighted: false });
+        }
+        const prevRange = ranges[index - 1];
+        if (prevRange && prevRange.to < range.from) {
+            allRanges.push({ from: prevRange.to, to: range.from, isHighlighted: false });
+        }
+        allRanges.push(range);
+        const lastIndex = ranges.length - 1;
+        if (index === lastIndex && range.to < str.length) {
+            allRanges.push({ from: range.to, to: str.length, isHighlighted: false });
+        }
+    });
+    return allRanges;
+};
+const getHighlightRanges = (str, search) => {
+    const words = search
+        .split(' ')
+        .filter(Boolean)
+        .map((word) => word.trim().replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')) // esape regex characters inside the string
+        .map((word) => new RegExp(word, 'ig'));
+    const matches = words.flatMap((word) => [...str.matchAll(word)]);
+    const ranges = matches
+        .map((match) => ({ from: match.index, to: match[0].length + match.index, isHighlighted: true }))
+        .sort((range1, range2) => range1.from - range2.from);
+    if (!ranges) {
+        return [];
+    }
+    const mergedRanges = mergeHighlightRanges(ranges);
+    return addNotHighlightedRanges(mergedRanges, str);
+};
+const getDecoratedText = (str, ranges) => ranges.map((range, index) => {
+    const rangeStr = str.substring(range.from, range.to);
+    return (React__namespace.default.createElement("span", Object.assign({ key: `${rangeStr}-${index}` }, (range.isHighlighted ? { className: css$l.highlightedText } : {})), rangeStr));
+});
+const getHighlightedSearchMatches = (str, search) => {
+    if (!search || !str) {
+        return str;
+    }
+    const ranges = getHighlightRanges(str, search);
+    if (!ranges.length) {
+        return str;
+    }
+    return getDecoratedText(str, ranges);
+};
 
 const defaultSize$1 = '36';
 class PickerItem extends React__namespace.Component {
@@ -2543,20 +2914,27 @@ class PickerItem extends React__namespace.Component {
         };
     }
     render() {
-        const { size, avatarUrl, title, subtitle, isLoading, isDisabled, icon, } = this.props;
+        var _a;
+        const { size, avatarUrl, isLoading, isDisabled, icon, highlightSearchMatches, } = this.props;
         const itemSize = size && size !== 'none' ? size : defaultSize$1;
-        const isMultiline = !!(title && subtitle);
-        return (React__namespace.createElement(FlexCell, { width: "auto", cx: css$k.root },
-            React__namespace.createElement(FlexRow, { size: itemSize, cx: isMultiline && css$k[`multiline-vertical-padding-${itemSize}`], spacing: "12" },
+        const isMultiline = !!(this.props.title && this.props.subtitle);
+        const { search } = (_a = this.props.dataSourceState) !== null && _a !== void 0 ? _a : {};
+        const title = highlightSearchMatches ? getHighlightedSearchMatches(this.props.title, search) : this.props.title;
+        const subtitle = highlightSearchMatches ? getHighlightedSearchMatches(this.props.subtitle, search) : this.props.subtitle;
+        return (React__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" },
                 avatarUrl && React__namespace.createElement(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$k.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$k.text }, isLoading ? React__namespace.createElement(TextPlaceholder, { wordsCount: 2 }) : subtitle))))));
+                    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))))));
     }
 }
+PickerItem.defaultProps = {
+    highlightSearchMatches: true,
+};
 
-var css$j = {"panel":"PickerInput-module_panel__0xY7f","footer-wrapper":"PickerInput-module_footer-wrapper__mdFUK","footer-size-24":"PickerInput-module_footer-size-24__sI3ji","footer-size-30":"PickerInput-module_footer-size-30__kEoD6","footer-size-36":"PickerInput-module_footer-size-36__Q2x7r","footer-size-42":"PickerInput-module_footer-size-42__1BKAo","footer-size-48":"PickerInput-module_footer-size-48__vHArx","footerWrapper":"PickerInput-module_footer-wrapper__mdFUK","footerSize24":"PickerInput-module_footer-size-24__sI3ji","footerSize30":"PickerInput-module_footer-size-30__kEoD6","footerSize36":"PickerInput-module_footer-size-36__Q2x7r","footerSize42":"PickerInput-module_footer-size-42__1BKAo","footerSize48":"PickerInput-module_footer-size-48__vHArx"};
+var css$k = {"panel":"_76eV3F","footer-wrapper":"dLVX7n","footer-size-24":"ghdfL3","footer-size-30":"RkfP11","footer-size-36":"om-lU1","footer-size-42":"mDl19f","footer-size-48":"iM5hB5","footerWrapper":"dLVX7n","footerSize24":"ghdfL3","footerSize30":"RkfP11","footerSize36":"om-lU1","footerSize42":"mDl19f","footerSize48":"iM5hB5"};
 
 const pickerHeight$1 = 300;
 const pickerWidth$1 = 360;
@@ -2564,7 +2942,8 @@ class PickerInput extends uuiComponents.PickerInputBase {
     constructor() {
         super(...arguments);
         this.renderItem = (item, rowProps) => {
-            return React__namespace.default.createElement(PickerItem, Object.assign({ title: this.getName(item), size: this.getRowSize() }, rowProps));
+            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)));
         };
         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 })));
@@ -2607,7 +2986,7 @@ class PickerInput extends uuiComponents.PickerInputBase {
         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$j.panel, uuiCore.uuiMarkers.lockFocus, this.props.bodyCx,
+                css$k.panel, uuiCore.uuiMarkers.lockFocus, this.props.bodyCx,
             ] },
             React__namespace.default.createElement(MobileDropdownWrapper, { title: this.props.entityName, close: () => {
                     this.returnFocusToInput();
@@ -2623,7 +3002,7 @@ class PickerInput extends uuiComponents.PickerInputBase {
     }
 }
 
-var css$i = {"row":"PickerListItem-module_row__SAtT7"};
+var css$j = {"row":"X01tFd"};
 
 class PickerListItem extends React__namespace.default.Component {
     render() {
@@ -2641,7 +3020,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$i.row }, component);
+        return React__namespace.default.createElement("div", { className: css$j.row }, component);
     }
 }
 
@@ -2684,22 +3063,7 @@ class PickerList extends uuiComponents.PickerListBase {
 }
 PickerList.contextType = uuiCore.UuiContext;
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-var dayjs_min = {exports: {}};
-
-(function (module, exports) {
-	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",f="month",h="quarter",c="year",d="date",$="Invalid Date",l=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_")},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},g={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,f),s=n-i<0,u=e.clone().add(r+(s?-1:1),f);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:f,y:c,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:h}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},D="en",v={};v[D]=M;var p=function(t){return t instanceof _},S=function(t,e,n){var r;if(!t)return D;if("string"==typeof t)v[t]&&(r=t),e&&(v[t]=e,r=t);else {var i=t.name;v[i]=t,r=i;}return !n&&r&&(D=r),r||!n&&D},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},O=g;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t);}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match(l);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return O},m.isValid=function(){return !(this.$d.toString()===$)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,h=O.p(t),$=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},l=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,g="set"+(this.$u?"UTC":"");switch(h){case c:return r?$(1,0):$(31,11);case f:return r?$(1,M):$(0,M+1);case o:var D=this.$locale().weekStart||0,v=(y<D?y+7:y)-D;return $(r?m-v:m+(6-v),M);case a:case d:return l(g+"Hours",0);case u:return l(g+"Minutes",1);case s:return l(g+"Seconds",2);case i:return l(g+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),h="set"+(this.$u?"UTC":""),$=(n={},n[a]=h+"Date",n[d]=h+"Date",n[f]=h+"Month",n[c]=h+"FullYear",n[u]=h+"Hours",n[s]=h+"Minutes",n[i]=h+"Seconds",n[r]=h+"Milliseconds",n)[o],l=o===a?this.$D+(e-this.$W):e;if(o===f||o===c){var y=this.clone().set(d,1);y.$d[$](l),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else $&&this.$d[$](l);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,h){var d,$=this;r=Number(r);var l=O.p(h),y=function(t){var e=w($);return O.w(e.date(e.date()+Math.round(t*r)),$)};if(l===f)return this.set(f,this.$M+r);if(l===c)return this.set(c,this.$y+r);if(l===a)return y(1);if(l===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[l]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||$;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,f=n.months,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].substr(0,s)},c=function(t){return O.s(s%12||12,t,"0")},d=n.meridiem||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r},l={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:O.s(a+1,2,"0"),MMM:h(n.monthsShort,a,f,3),MMMM:h(f,a),D:this.$D,DD:O.s(this.$D,2,"0"),d:String(this.$W),dd:h(n.weekdaysMin,this.$W,o,2),ddd:h(n.weekdaysShort,this.$W,o,3),dddd:o[this.$W],H:String(s),HH:O.s(s,2,"0"),h:c(1),hh:c(2),a:d(s,u,!0),A:d(s,u,!1),m:String(u),mm:O.s(u,2,"0"),s:String(this.$s),ss:O.s(this.$s,2,"0"),SSS:O.s(this.$ms,3,"0"),Z:i};return r.replace(y,(function(t,e){return e||l[t]||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,$){var l,y=O.p(d),M=w(r),m=(M.utcOffset()-this.utcOffset())*e,g=this-M,D=O.m(this,M);return D=(l={},l[c]=D/12,l[f]=D,l[h]=D/3,l[o]=(g-m)/6048e5,l[a]=(g-m)/864e5,l[u]=g/n,l[s]=g/e,l[i]=g/t,l)[y]||g,$?D:O.a(D)},m.daysInMonth=function(){return this.endOf(f).$D},m.$locale=function(){return v[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),b=_.prototype;return w.prototype=b,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",f],["$y",c],["$D",d]].forEach((function(t){b[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),w.extend=function(t,e){return t.$i||(t(e,_,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=v[D],w.Ls=v,w.p={},w})); 
-} (dayjs_min));
-
-var dayjs_minExports = dayjs_min.exports;
-var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
-
-var css$h = {"root":"FilterPanelItemToggler-module_root__6HJLW","title-wrapper":"FilterPanelItemToggler-module_title-wrapper__07dD8","title":"FilterPanelItemToggler-module_title__JaXtY","text-wrapper":"FilterPanelItemToggler-module_text-wrapper__kRoKs","selection":"FilterPanelItemToggler-module_selection__K9tGx","postfix":"FilterPanelItemToggler-module_postfix__MpS3n","selected":"FilterPanelItemToggler-module_selected__FEPzr","titleWrapper":"FilterPanelItemToggler-module_title-wrapper__07dD8","textWrapper":"FilterPanelItemToggler-module_text-wrapper__kRoKs"};
+var css$i = {"root":"Jyw9gm","title-wrapper":"GtHTwK","title":"YFB6-x","text-wrapper":"LKBWJP","selection":"_9HMfaW","postfix":"RbBwvf","selected":"_1vAzM7","titleWrapper":"GtHTwK","textWrapper":"LKBWJP"};
 
 const defaultSize = '36';
 const FilterPanelItemToggler = React__namespace.forwardRef((props, ref) => {
@@ -2711,15 +3075,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),
+        (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$h.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$h.titleWrapper },
-            React__namespace.createElement(Text, { size: props.size, cx: css$h.title }, getTitle),
-            props.selection && (React__namespace.createElement("div", { className: css$h.textWrapper },
-                React__namespace.createElement(Text, { color: "brand", size: props.size, cx: css$h.selection }, props.selection),
-                props.postfix && (React__namespace.createElement(Text, { color: "brand", size: props.size, cx: css$h.postfix }, props.postfix))))),
+        }, 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 },
+                getSelectionText(),
+                props.postfix && (React__namespace.createElement(Text, { color: "brand", size: props.size, cx: css$i.postfix }, props.postfix))))),
         !props.isDisabled && React__namespace.createElement(uuiComponents.IconContainer, { icon: systemIcons[props.size || defaultSize].foldingArrow, flipY: props.isOpen, cx: "uui-icon-dropdown" })));
 });
 
@@ -2790,7 +3157,7 @@ class FilterDatePickerBody extends uuiComponents.BaseDatePicker {
                 React__namespace.default.createElement(DatePickerBody, { filter: this.props.filter, value: this.getValue(), setSelectedDate: this.setSelectedDate, setDisplayedDateAndView: this.setDisplayedDateAndView, changeIsOpen: this.onToggleHandler, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.body })),
             React__namespace.default.createElement(FlexCell, { alignSelf: "stretch" },
                 React__namespace.default.createElement(FlexRow, { padding: "24", vPadding: "12" },
-                    React__namespace.default.createElement(Text, null, this.state.selectedDate ? dayjs(this.state.selectedDate).format('MMM DD, YYYY') : ''),
+                    React__namespace.default.createElement(Text, null, this.state.selectedDate ? dayjs__default.default(this.state.selectedDate).format('MMM DD, YYYY') : ''),
                     React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
                     React__namespace.default.createElement(LinkButton, { isDisabled: !this.state.selectedDate, caption: i18n.filterToolbar.datePicker.clearCaption, onClick: this.handleCancel })))));
     }
@@ -2799,12 +3166,16 @@ class FilterDatePickerBody extends uuiComponents.BaseDatePicker {
     }
 }
 
-var css$g = {"date-input":"FilterRangeDatePickerBody-module_date-input__YCsN4","size-24":"FilterRangeDatePickerBody-module_size-24__I99Uu","size-30":"FilterRangeDatePickerBody-module_size-30__6sPTt","size-36":"FilterRangeDatePickerBody-module_size-36__EvRIl","size-42":"FilterRangeDatePickerBody-module_size-42__lBWnp","size-48":"FilterRangeDatePickerBody-module_size-48__YnYMk","date-input-group":"FilterRangeDatePickerBody-module_date-input-group__k-U24","separator":"FilterRangeDatePickerBody-module_separator__wydiQ","mode-form":"FilterRangeDatePickerBody-module_mode-form__uTlrw","mode-cell":"FilterRangeDatePickerBody-module_mode-cell__vPfe2","dateInput":"FilterRangeDatePickerBody-module_date-input__YCsN4","size24":"FilterRangeDatePickerBody-module_size-24__I99Uu","size30":"FilterRangeDatePickerBody-module_size-30__6sPTt","size36":"FilterRangeDatePickerBody-module_size-36__EvRIl","size42":"FilterRangeDatePickerBody-module_size-42__lBWnp","size48":"FilterRangeDatePickerBody-module_size-48__YnYMk","dateInputGroup":"FilterRangeDatePickerBody-module_date-input-group__k-U24","modeForm":"FilterRangeDatePickerBody-module_mode-form__uTlrw","modeCell":"FilterRangeDatePickerBody-module_mode-cell__vPfe2"};
+var css$h = {"date-input":"-ecBzI","size-24":"pwnnti","size-30":"q-fs4F","size-36":"ylkDl9","size-42":"_3sNjn6","size-48":"y9Ec40","date-input-group":"xgM-N-","separator":"G4xUC5","mode-form":"OcfLDo","mode-cell":"MEBVvi","dateInput":"-ecBzI","size24":"pwnnti","size30":"q-fs4F","size36":"ylkDl9","size42":"_3sNjn6","size48":"y9Ec40","dateInputGroup":"xgM-N-","modeForm":"OcfLDo","modeCell":"MEBVvi"};
 
 class FilterRangeDatePickerBody extends uuiComponents.BaseRangeDatePicker {
     constructor() {
         super(...arguments);
         this.state = Object.assign(Object.assign({}, super.getInitialState()), { inFocus: 'from' });
+        this.changeIsOpen = (open) => {
+            this.toggleOpening(open);
+            this.props.onClose();
+        };
         this.renderInput = () => {
             return null;
         };
@@ -2812,13 +3183,13 @@ class FilterRangeDatePickerBody extends uuiComponents.BaseRangeDatePicker {
     renderBody() {
         return (React__namespace.createElement(React__namespace.Fragment, null,
             React__namespace.createElement(FlexRow, { borderBottom: true },
-                React__namespace.createElement(RangeDatePickerBody, { value: this.getValue(), onValueChange: this.onRangeChange, filter: this.props.filter, focusPart: this.state.inFocus, changeIsOpen: this.toggleOpening, presets: this.props.presets })),
+                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$g.dateInputGroup, this.state.inFocus && uuiCore.uuiMod.focus) },
-                        React__namespace.createElement(TextInput, { icon: systemIcons['30'].calendar, cx: cx__default.default(css$g.dateInput, css$g['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$g.separator }),
-                        React__namespace.createElement(TextInput, { cx: cx__default.default(css$g.dateInput, css$g['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$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(uuiComponents.FlexSpacer, null),
                     React__namespace.createElement(LinkButton, { isDisabled: !this.state.inputValue.from && !this.state.inputValue.to, caption: i18n.pickerModal.clearAllButton, onClick: this.handleCancel })))));
     }
@@ -2827,6 +3198,8 @@ class FilterRangeDatePickerBody extends uuiComponents.BaseRangeDatePicker {
     }
 }
 
+var css$g = {"container":"F1W-1y"};
+
 function FilterNumericBody(props) {
     var _a, _b;
     const isInRangePredicate = (props === null || props === void 0 ? void 0 : props.selectedPredicate) === 'inRange' || (props === null || props === void 0 ? void 0 : props.selectedPredicate) === 'notInRange';
@@ -2869,7 +3242,7 @@ function FilterNumericBody(props) {
     if (isInRangePredicate) {
         const value = props.value;
         return (React__namespace.default.createElement("div", null,
-            React__namespace.default.createElement(FlexRow, { padding: "12", vPadding: "24", alignItems: "center", spacing: "12", borderBottom: true, rawProps: { style: { paddingTop: '3px' } } },
+            React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", spacing: "12", borderBottom: true, cx: css$g.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%" },
@@ -2877,7 +3250,7 @@ function FilterNumericBody(props) {
             renderFooter()));
     }
     return (React__namespace.default.createElement("div", null,
-        React__namespace.default.createElement(FlexRow, { padding: "12", vPadding: "24", alignItems: "center", borderBottom: true, rawProps: { style: { paddingTop: '3px' } } },
+        React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$g.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()));
@@ -2914,9 +3287,10 @@ var SvgActionDeleteforever12 = function SvgActionDeleteforever12(props, ref) {
 };
 var ForwardRef$e = /*#__PURE__*/React.forwardRef(SvgActionDeleteforever12);
 
-var css$f = {"header":"FiltersPanelItem-module_header__hqSIh","removeButton":"FiltersPanelItem-module_removeButton__dWD-9","with-search":"FiltersPanelItem-module_with-search__sPAwy","panel":"FiltersPanelItem-module_panel__EfHsL","withSearch":"FiltersPanelItem-module_with-search__sPAwy"};
+var css$f = {"header":"jRIFsI","removeButton":"mLf7Zx","with-search":"mSZHMj","panel":"sKiDnb","withSearch":"mSZHMj"};
 
 function FiltersToolbarItemImpl(props) {
+    const { maxCount = 2 } = props;
     const isPickersType = (props === null || props === void 0 ? void 0 : props.type) === 'multiPicker' || (props === null || props === void 0 ? void 0 : props.type) === 'singlePicker';
     const isMobileScreen = uuiCore.isMobile();
     const popperModifiers = React.useMemo(() => {
@@ -3021,53 +3395,52 @@ function FiltersToolbarItemImpl(props) {
         switch (props.type) {
             case 'multiPicker': {
                 const view = props.dataSource.getView({}, forceUpdate);
-                const postfix = (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) > 2 ? ` +${(currentValue.length - 2).toString()} ${i18n.filterToolbar.pickerInput.itemsPlaceholder}` : null;
                 let isLoading = false;
                 const selection = currentValue
-                    ? currentValue === null || currentValue === void 0 ? void 0 : currentValue.slice(0, 2).map((i) => {
+                    ? currentValue === null || currentValue === void 0 ? void 0 : currentValue.slice(0, maxCount).map((i) => {
                         const item = view.getById(i, null);
                         isLoading = item.isLoading;
                         return getPickerItemName(item, props);
                     })
-                    : [currentValue];
-                const selectionText = isLoading ? selection : selection.join(', ');
-                return { selection: selectionText, postfix };
+                    : currentValue;
+                const postfix = (!isLoading && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) > maxCount) ? ` +${(currentValue.length - maxCount).toString()} ${i18n.filterToolbar.pickerInput.itemsPlaceholder}` : null;
+                return { selection, postfix };
             }
             case 'numeric': {
                 const isRangePredicate = predicate === 'inRange' || predicate === 'notInRange';
                 const decimalFormat = (val) => uuiCore.getSeparatedValue(val, { maximumFractionDigits: 2 });
                 if ((isRangePredicate && !currentValue) || (!isRangePredicate && !currentValue && currentValue !== 0)) {
-                    return { selection: currentValue };
+                    return { selection: undefined };
                 }
                 const selection = isRangePredicate
                     ? `${!(currentValue === null || currentValue === void 0 ? void 0 : currentValue.from) && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.from) !== 0 ? 'Min' : decimalFormat(currentValue === null || currentValue === void 0 ? void 0 : currentValue.from)} - ${!(currentValue === null || currentValue === void 0 ? void 0 : currentValue.to) && (currentValue === null || currentValue === void 0 ? void 0 : currentValue.to) !== 0 ? 'Max' : decimalFormat(currentValue === null || currentValue === void 0 ? void 0 : currentValue.to)}`
                     : `${!currentValue && currentValue !== 0 ? 'ALL' : decimalFormat(currentValue)}`;
-                return { selection };
+                return { selection: [selection] };
             }
             case 'singlePicker': {
                 const view = props.dataSource.getView({}, forceUpdate);
                 if (currentValue === null || currentValue === undefined) {
-                    return { selection: currentValue };
+                    return { selection: undefined };
                 }
                 const item = view.getById(currentValue, null);
                 const selection = getPickerItemName(item, props);
-                return { selection };
+                return { selection: [selection] };
             }
             case 'datePicker': {
-                return { selection: currentValue ? dayjs(currentValue).format(props.format || defaultFormat) : i18n.filterToolbar.datePicker.placeholder };
+                return { selection: currentValue ? [dayjs__default.default(currentValue).format(props.format || defaultFormat)] : currentValue };
             }
             case 'rangeDatePicker': {
                 if (!currentValue || (!currentValue.from && !currentValue.to)) {
-                    return { selection: i18n.filterToolbar.rangeDatePicker.emptyPickerPlaceholder };
+                    return { selection: undefined };
                 }
                 const currentValueFrom = (currentValue === null || currentValue === void 0 ? void 0 : currentValue.from)
-                    ? dayjs(currentValue === null || currentValue === void 0 ? void 0 : currentValue.from).format(props.format || defaultFormat)
+                    ? dayjs__default.default(currentValue === null || currentValue === void 0 ? void 0 : currentValue.from).format(props.format || defaultFormat)
                     : i18n.filterToolbar.rangeDatePicker.emptyPlaceholderFrom;
                 const currentValueTo = (currentValue === null || currentValue === void 0 ? void 0 : currentValue.to)
-                    ? dayjs(currentValue === null || currentValue === void 0 ? void 0 : currentValue.to).format(props.format || defaultFormat)
+                    ? dayjs__default.default(currentValue === null || currentValue === void 0 ? void 0 : currentValue.to).format(props.format || defaultFormat)
                     : i18n.filterToolbar.rangeDatePicker.emptyPlaceholderTo;
                 const selection = `${currentValueFrom} - ${currentValueTo}`;
-                return { selection };
+                return { selection: [selection] };
             }
         }
     };
@@ -3204,9 +3577,9 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = React__namespace.default.memo(FiltersToolbarImpl);
 
-var css$e = {"divider":"PresetsPanel-module_divider__vk5zN","dropdownDeleteIcon":"PresetsPanel-module_dropdownDeleteIcon__nYd89","presetsWrapper":"PresetsPanel-module_presetsWrapper__cxER2","addPresetContainer":"PresetsPanel-module_addPresetContainer__3vzJU","dropContainer":"PresetsPanel-module_dropContainer__ao-Zt"};
+var css$e = {"divider":"MDnNWz","dropdownDeleteIcon":"Vd3PlN","presetsWrapper":"jYiW9G","addPresetContainer":"xLidLo","dropContainer":"tFbLLz"};
 
-var css$d = {"preset-dropdown-panel":"PresetActionsDropdown-module_preset-dropdown-panel__7QqJq","delete-row":"PresetActionsDropdown-module_delete-row__Akkel","delete-button":"PresetActionsDropdown-module_delete-button__PUypn","targetOpen":"PresetActionsDropdown-module_targetOpen__d1eob","presetDropdownPanel":"PresetActionsDropdown-module_preset-dropdown-panel__7QqJq","deleteRow":"PresetActionsDropdown-module_delete-row__Akkel","deleteButton":"PresetActionsDropdown-module_delete-button__PUypn"};
+var css$d = {"preset-dropdown-panel":"c2EfyR","delete-row":"Flkvfl","delete-button":"OKERxk","targetOpen":"W5YKAD","presetDropdownPanel":"c2EfyR","deleteRow":"Flkvfl","deleteButton":"OKERxk"};
 
 var _path$b;
 function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
@@ -3346,7 +3719,7 @@ function PresetActionsDropdown(props) {
         return (React__namespace.default.createElement(Panel, { shadow: true, cx: css$d.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$q, caption: "Save in current", onClick: saveInCurrentHandler }))),
+                    React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$o, 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(FlexRow, { key: `${props.preset.id}-discard`, borderBottom: true },
@@ -3361,12 +3734,12 @@ function PresetActionsDropdown(props) {
                 React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$7, caption: "Delete", cx: css$d.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$r })));
+        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(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", modifiers: [{ name: 'offset', options: { offset: [0, 22] } }] }));
 }
 
-var css$c = {"preset-input-cell":"PresetInput-module_preset-input-cell__k9GyV","preset-input":"PresetInput-module_preset-input__pGJx6","presetInputCell":"PresetInput-module_preset-input-cell__k9GyV","presetInput":"PresetInput-module_preset-input__pGJx6"};
+var css$c = {"preset-input-cell":"vUxmY-","preset-input":"Q2zG4D","presetInputCell":"vUxmY-","presetInput":"Q2zG4D"};
 
 function PresetInput(props) {
     var _a;
@@ -3391,7 +3764,7 @@ function PresetInput(props) {
         React__namespace.default.createElement(TextInput, { cx: css$c.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50 })));
 }
 
-var css$b = {"preset":"Preset-module_preset__5zjTb","activePreset":"Preset-module_activePreset__XgJWT"};
+var css$b = {"preset":"LkHKYv","activePreset":"X5qfz4"};
 
 function Preset(props) {
     const [isRenamePreset, setIsRenamePreset] = React.useState(false);
@@ -3479,19 +3852,13 @@ const defaultPredicates = {
     rangeDatePicker: [{ predicate: 'inRange', name: 'In Range', isDefault: true }, { predicate: 'notInRange', name: 'Not in Range' }],
 };
 
-var css$a = {"root":"MainMenu-module_root__NqMvR"};
+var css$a = {"root":"ku9N6M"};
 
-function applyMainMenuMods() {
-    return [css$a.root];
-}
-const MainMenu = uuiCore.withMods(uuiComponents.MainMenu, applyMainMenuMods, () => ({
-    Burger,
-    MainMenuDropdown,
-}));
+var css$9 = {"root":"_1Eu1XE","burger-content":"HArkk-","burgerContent":"HArkk-"};
 
 var _path$4;
 function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
-var SvgGlobalMenu = function SvgGlobalMenu(props, ref) {
+var SvgBurger = function SvgBurger(props, ref) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     width: 60,
     height: 60,
@@ -3499,62 +3866,39 @@ var SvgGlobalMenu = function SvgGlobalMenu(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), _path$4 || (_path$4 = /*#__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"
+    d: "M8 9.2h8v.8H8zM8 14h6v.8H8zm0-2.4h8v.8H8z"
   })));
 };
-var ForwardRef$5 = /*#__PURE__*/React.forwardRef(SvgGlobalMenu);
-
-var css$9 = {"global-menu-btn":"GlobalMenu-module_global-menu-btn__VNGyq","globalMenuIcon":"GlobalMenu-module_globalMenuIcon__BTMLp","globalMenuBtn":"GlobalMenu-module_global-menu-btn__VNGyq"};
-
-const GlobalMenu = React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", Object.assign({ ref: ref, id: "global_menu_toggle", className: cx__default.default(css$9.globalMenuBtn, props.cx) }, props.rawProps),
-    React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef$5, cx: css$9.globalMenuIcon }))));
-
-var css$8 = {"root":"Burger-module_root__RyM45","burger-content":"Burger-module_burger-content__bbDNZ","burgerContent":"Burger-module_burger-content__bbDNZ"};
+var ForwardRef$5 = /*#__PURE__*/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 SvgBurger = function SvgBurger(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
-    width: 60,
-    height: 60,
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    ref: ref
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M8 9.2h8v.8H8zM8 14h6v.8H8zm0-2.4h8v.8H8z"
-  })));
-};
-var ForwardRef$4 = /*#__PURE__*/React.forwardRef(SvgBurger);
-
-var _path$2;
-function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 var SvgBurgerClose = function SvgBurgerClose(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     width: 60,
     height: 60,
     viewBox: "0 0 60 60",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__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$3 = /*#__PURE__*/React.forwardRef(SvgBurgerClose);
+var ForwardRef$4 = /*#__PURE__*/React.forwardRef(SvgBurgerClose);
 
 function applyBurgerMods() {
-    return [css$8.root];
+    return [css$9.root];
 }
 const Burger = uuiCore.withMods(uuiComponents.Burger, applyBurgerMods, () => ({
-    burgerIcon: ForwardRef$4,
-    crossIcon: ForwardRef$3,
-    burgerContentCx: css$8.burgerContent,
+    burgerIcon: ForwardRef$5,
+    crossIcon: ForwardRef$4,
+    burgerContentCx: css$9.burgerContent,
 }));
 
-var _g, _path$1;
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+var _g, _path$2;
+function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 var SvgTriangle = function SvgTriangle(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     width: 12,
     height: 24,
     viewBox: "0 0 12 24",
@@ -3571,21 +3915,21 @@ var SvgTriangle = function SvgTriangle(props, ref) {
     cx: 12,
     cy: 302.65,
     r: 18
-  }))), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+  }))), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "m5 14-4-4h8z"
   })));
 };
-var ForwardRef$2 = /*#__PURE__*/React.forwardRef(SvgTriangle);
+var ForwardRef$3 = /*#__PURE__*/React.forwardRef(SvgTriangle);
 
-var css$7 = {"root":"BurgerButton-module_root__t2JTr","button-primary":"BurgerButton-module_button-primary__Sqw6q","button-secondary":"BurgerButton-module_button-secondary__H4Hed","hasIcon":"BurgerButton-module_hasIcon__6lpPh","dropdown":"BurgerButton-module_dropdown__6OWuB","buttonPrimary":"BurgerButton-module_button-primary__Sqw6q","buttonSecondary":"BurgerButton-module_button-secondary__H4Hed"};
+var css$8 = {"root":"zAjemh","button-primary":"pzY3LX","button-secondary":"c5TsnA","hasIcon":"_9gEwVf","dropdown":"TfhNho","buttonPrimary":"pzY3LX","buttonSecondary":"c5TsnA"};
 
 const BurgerButton = uuiCore.withMods(uuiComponents.Button, (props) => [
-    css$7.root, css$7['button-' + (props.type || 'primary')], css$7['indent-' + (props.indentLevel || 0)], props.isDropdown && css$7.dropdown, props.icon && css$7.hasIcon,
-], () => ({ dropdownIcon: ForwardRef$2, dropdownIconPosition: 'left', role: 'menuitem' }));
+    css$8.root, css$8['button-' + (props.type || 'primary')], css$8['indent-' + (props.indentLevel || 0)], props.isDropdown && css$8.dropdown, props.icon && css$8.hasIcon,
+], () => ({ dropdownIcon: ForwardRef$3, dropdownIconPosition: 'left', role: 'menuitem' }));
 
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 var SvgMenuInputCancel = function SvgMenuInputCancel(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 24,
@@ -3627,67 +3971,48 @@ var SvgMenuInputCancel = function SvgMenuInputCancel(props, ref) {
     transform: "matrix(3.77953 0 0 3.77953 -369 -648.52)"
   })));
 };
-var ForwardRef$1 = /*#__PURE__*/React.forwardRef(SvgMenuInputCancel);
+var ForwardRef$2 = /*#__PURE__*/React.forwardRef(SvgMenuInputCancel);
 
-var css$6 = {"search-input":"BurgerSearch-module_search-input__ot3xM","searchInput":"BurgerSearch-module_search-input__ot3xM"};
+var css$7 = {"search-input":"-A2C1p","searchInput":"-A2C1p"};
 
 function BurgerSearch(props) {
-    return (React__namespace.createElement(uuiComponents.TextInput, { cx: css$6.searchInput, iconPosition: "left", icon: ForwardRef$X, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$1, autoFocus: true }));
+    return (React__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 }));
 }
 
-var css$5 = {"group-header":"BurgerGroupHeader-module_group-header__RPFIE","group-name":"BurgerGroupHeader-module_group-name__9SbW-","line":"BurgerGroupHeader-module_line__i1Bu-","groupHeader":"BurgerGroupHeader-module_group-header__RPFIE","groupName":"BurgerGroupHeader-module_group-name__9SbW-"};
+var css$6 = {"group-header":"mbhWD6","group-name":"EZhmB1","line":"iHRlJA","groupHeader":"mbhWD6","groupName":"EZhmB1"};
 
 function BurgerGroupHeader(props) {
-    return (React__namespace.createElement("div", { className: css$5.groupHeader },
-        React__namespace.createElement("hr", { className: css$5.line }),
-        React__namespace.createElement("span", { className: css$5.groupName }, props.caption)));
+    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)));
 }
 
-var css$4 = {"container":"MainMenuAvatar-module_container__cen9B","open":"MainMenuAvatar-module_open__hjS1f"};
-
-const MainMenuAvatar = React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", { ref: ref, className: cx__default.default(css$4.container, props.isDropdown && css$4.dropdown, props.isOpen && css$4.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$11, flipY: props.isOpen }))))));
-
-var css$3 = {"search-input":"MainMenuSearch-module_search-input__AdkL1","searchInput":"MainMenuSearch-module_search-input__AdkL1"};
-
-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$X, cancelIcon: ((_a = props.value) === null || _a === void 0 ? void 0 : _a.length) > 0 && ForwardRef$1 }, props, iEditable, { ref: ref, cx: uuiCore.cx(css$3.searchInput, props.cx) }, props.rawProps)));
-    } }))));
-
-var css$2 = {"container":"MainMenuIcon-module_container__6NlKF"};
-
-const MainMenuIcon = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(IconButton, Object.assign({ ref: ref, icon: props.icon, cx: uuiCore.cx(props.cx, css$2.container) }, props))));
+var css$5 = {"root":"C4i0f0","type-primary":"AKRoaq","type-secondary":"KN8snq","typePrimary":"AKRoaq","typeSecondary":"KN8snq"};
 
-var css$1 = {"root":"MainMenuButton-module_root__pJ8X7","type-primary":"MainMenuButton-module_type-primary__8AIyW","type-secondary":"MainMenuButton-module_type-secondary__uxvwJ","typePrimary":"MainMenuButton-module_type-primary__8AIyW","typeSecondary":"MainMenuButton-module_type-secondary__uxvwJ"};
-
-var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _path$1;
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 var SvgChevronDown24 = function SvgChevronDown24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$1 || (_path$1 = /*#__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(SvgChevronDown24);
+var ForwardRef$1 = /*#__PURE__*/React.forwardRef(SvgChevronDown24);
 
-const MainMenuButton = uuiCore.withMods(uuiComponents.Button, (mods) => [css$1.root, css$1['type-' + (mods.type || 'primary')]], () => ({ dropdownIcon: ForwardRef, role: 'menuitem' }));
+const MainMenuButton = uuiCore.withMods(uuiComponents.Button, (mods) => [css$5.root, css$5['type-' + (mods.type || 'primary')]], () => ({ dropdownIcon: ForwardRef$1, role: 'menuitem' }));
 
-var css = {"dropdown-body":"MainMenuDropdown-module_dropdown-body__H16cM","dropdownBody":"MainMenuDropdown-module_dropdown-body__H16cM"};
+var css$4 = {"dropdown-body":"_5zLnDY","dropdownBody":"_5zLnDY"};
 
 class MainMenuDropdown extends React__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.dropdownBody) }, this.props.renderBody
+                return (React__namespace.createElement("div", { className: cx__default.default(css$4.dropdownBody) }, this.props.renderBody
                     ? this.props.renderBody(Object.assign({}, props))
                     : React__namespace.Children.map(this.props.children, (item) => {
                         if (!item)
@@ -3703,6 +4028,54 @@ class MainMenuDropdown extends React__namespace.Component {
     }
 }
 
+function applyMainMenuMods() {
+    return [css$a.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 SvgGlobalMenu = function SvgGlobalMenu(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: 60,
+    height: 60,
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    ref: ref
+  }, props), _path || (_path = /*#__PURE__*/React__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 css$3 = {"global-menu-btn":"pGVKpY","globalMenuIcon":"kFSfJV","globalMenuBtn":"pGVKpY"};
+
+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 }))));
+
+var css$2 = {"container":"A9BIcJ","open":"_2aEPP4"};
+
+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 },
+    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 }))))));
+
+var css$1 = {"search-input":"wKYV3p","searchInput":"wKYV3p"};
+
+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)));
+    } }))));
+
+var css = {"container":"_1mnOEM"};
+
+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 Anchor = uuiComponents.Anchor;
 
 function Form(props) {
@@ -3864,21 +4237,24 @@ exports.allTextSizes = allTextSizes;
 exports.applyBadgeMods = applyBadgeMods;
 exports.applyButtonMods = applyButtonMods;
 exports.applyCheckboxMods = applyCheckboxMods;
-exports.applyDatePickerBodyMods = applyDatePickerBodyMods;
 exports.applyDateSelectionMods = applyDateSelectionMods;
 exports.applyNumericInputMods = applyNumericInputMods;
-exports.applyRangeDatePickerBodyMods = applyRangeDatePickerBodyMods;
 exports.applySpinnerMods = applySpinnerMods;
 exports.applySwitchMods = applySwitchMods;
 exports.applyTagMods = applyTagMods;
 exports.applyTextAreaMods = applyTextAreaMods;
 exports.applyTextInputMods = applyTextInputMods;
 exports.defaultPredicates = defaultPredicates;
+exports.getHighlightRanges = getHighlightRanges;
+exports.getHighlightedSearchMatches = getHighlightedSearchMatches;
 exports.getTextClasses = getTextClasses;
 exports.i18n = i18n;
 exports.propsMods = propsMods;
+exports.rangeDatePickerPresets = rangeDatePickerPresets;
 exports.renderCell = renderCell;
 exports.renderDropMarkers = renderDropMarkers;
 exports.useColumnsWithFilters = useColumnsWithFilters;
 exports.useForm = useForm;
+exports.uuiDatePickerBody = uuiDatePickerBody;
+exports.weekCount = weekCount;
 //# sourceMappingURL=index.js.map