@epam/uui 4.10.0 → 4.11.0-alpha.0

package/index.js

@@ -30,428 +30,429 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var FocusLock__default = /*#__PURE__*/_interopDefault(FocusLock);
 var cx__default = /*#__PURE__*/_interopDefault(cx);
 
-var _path$y;
-function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
+var _path$M;
+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 SvgBtnCross12 = function SvgBtnCross12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$O({
     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$M || (_path$M = /*#__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$A = /*#__PURE__*/React.forwardRef(SvgBtnCross12);
+var ForwardRef$O = /*#__PURE__*/React.forwardRef(SvgBtnCross12);
 
-var _path$x;
-function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
+var _path$L;
+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 SvgBtnCross18 = function SvgBtnCross18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
+  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$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$L || (_path$L = /*#__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$z = /*#__PURE__*/React.forwardRef(SvgBtnCross18);
+var ForwardRef$N = /*#__PURE__*/React.forwardRef(SvgBtnCross18);
 
-var _path$w;
-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$K;
+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 SvgBtnCross24 = function SvgBtnCross24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$M({
     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$K || (_path$K = /*#__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$y = /*#__PURE__*/React.forwardRef(SvgBtnCross24);
+var ForwardRef$M = /*#__PURE__*/React.forwardRef(SvgBtnCross24);
 
-var _path$v;
-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$J;
+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 SvgFoldingArrow12 = function SvgFoldingArrow12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$L({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$J || (_path$J = /*#__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$x = /*#__PURE__*/React.forwardRef(SvgFoldingArrow12);
+var ForwardRef$L = /*#__PURE__*/React.forwardRef(SvgFoldingArrow12);
 
-var _path$u;
-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$I;
+function _extends$K() { _extends$K = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$K.apply(this, arguments); }
 var SvgFoldingArrow18 = function SvgFoldingArrow18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$K({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$I || (_path$I = /*#__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$w = /*#__PURE__*/React.forwardRef(SvgFoldingArrow18);
+var ForwardRef$K = /*#__PURE__*/React.forwardRef(SvgFoldingArrow18);
 
-var _path$t;
-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$H;
+function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); }
 var SvgFoldingArrow24 = function SvgFoldingArrow24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$J({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$H || (_path$H = /*#__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$v = /*#__PURE__*/React.forwardRef(SvgFoldingArrow24);
+var ForwardRef$J = /*#__PURE__*/React.forwardRef(SvgFoldingArrow24);
 
-var _path$s;
-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$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 SvgAccept12 = function SvgAccept12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
+  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$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$G || (_path$G = /*#__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$u = /*#__PURE__*/React.forwardRef(SvgAccept12);
+var ForwardRef$I = /*#__PURE__*/React.forwardRef(SvgAccept12);
 
-var _path$r;
-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$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 SvgAccept18 = function SvgAccept18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$H({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$F || (_path$F = /*#__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$t = /*#__PURE__*/React.forwardRef(SvgAccept18);
+var ForwardRef$H = /*#__PURE__*/React.forwardRef(SvgAccept18);
 
-var _path$q;
-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$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 SvgAccept24 = function SvgAccept24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
+  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$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$E || (_path$E = /*#__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$s = /*#__PURE__*/React.forwardRef(SvgAccept24);
+var ForwardRef$G = /*#__PURE__*/React.forwardRef(SvgAccept24);
 
-var _path$p;
-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$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 SvgSearch12 = function SvgSearch12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+  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$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$D || (_path$D = /*#__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$r = /*#__PURE__*/React.forwardRef(SvgSearch12);
+var ForwardRef$F = /*#__PURE__*/React.forwardRef(SvgSearch12);
 
-var _path$o;
-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$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 SvgSearch18 = function SvgSearch18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$E({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$C || (_path$C = /*#__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$q = /*#__PURE__*/React.forwardRef(SvgSearch18);
+var ForwardRef$E = /*#__PURE__*/React.forwardRef(SvgSearch18);
 
-var _path$n;
-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$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 SvgSearch24 = function SvgSearch24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+  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$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$B || (_path$B = /*#__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$p = /*#__PURE__*/React.forwardRef(SvgSearch24);
+var ForwardRef$D = /*#__PURE__*/React.forwardRef(SvgSearch24);
 
-var _path$m;
-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$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 SvgCalendar12 = function SvgCalendar12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$A || (_path$A = /*#__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$o = /*#__PURE__*/React.forwardRef(SvgCalendar12);
+var ForwardRef$C = /*#__PURE__*/React.forwardRef(SvgCalendar12);
 
-var _path$l;
-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$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 SvgCalendar18 = function SvgCalendar18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
+  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$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$z || (_path$z = /*#__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$n = /*#__PURE__*/React.forwardRef(SvgCalendar18);
+var ForwardRef$B = /*#__PURE__*/React.forwardRef(SvgCalendar18);
 
-var _path$k;
-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$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 SvgCalendar24 = function SvgCalendar24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$y || (_path$y = /*#__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$m = /*#__PURE__*/React.forwardRef(SvgCalendar24);
+var ForwardRef$A = /*#__PURE__*/React.forwardRef(SvgCalendar24);
 
-var _path$j;
-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$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 SvgInfo12 = function SvgInfo12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$x || (_path$x = /*#__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$l = /*#__PURE__*/React.forwardRef(SvgInfo12);
+var ForwardRef$z = /*#__PURE__*/React.forwardRef(SvgInfo12);
 
-var _path$i;
-function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+var _path$w;
+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 SvgInfo18 = function SvgInfo18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$w || (_path$w = /*#__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$k = /*#__PURE__*/React.forwardRef(SvgInfo18);
+var ForwardRef$y = /*#__PURE__*/React.forwardRef(SvgInfo18);
 
-var _path$h;
-function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
+var _path$v;
+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 SvgInfo24 = function SvgInfo24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$v || (_path$v = /*#__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$j = /*#__PURE__*/React.forwardRef(SvgInfo24);
+var ForwardRef$x = /*#__PURE__*/React.forwardRef(SvgInfo24);
 
-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$u;
+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 SvgHelpFill10 = function SvgHelpFill10(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
     width: 10,
     height: 10,
     viewBox: "0 0 10 10",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__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$i = /*#__PURE__*/React.forwardRef(SvgHelpFill10);
+var ForwardRef$w = /*#__PURE__*/React.forwardRef(SvgHelpFill10);
 
-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$t;
+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 SvgHelpFill16 = function SvgHelpFill16(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
     width: 16,
     height: 16,
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__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$h = /*#__PURE__*/React.forwardRef(SvgHelpFill16);
+var ForwardRef$v = /*#__PURE__*/React.forwardRef(SvgHelpFill16);
 
 const systemIcons = {
     '18': {
-        clear: ForwardRef$A,
-        foldingArrow: ForwardRef$x,
-        accept: ForwardRef$u,
-        search: ForwardRef$r,
-        calendar: ForwardRef$o,
-        info: ForwardRef$l,
-        help: ForwardRef$i,
+        clear: ForwardRef$O,
+        foldingArrow: ForwardRef$L,
+        accept: ForwardRef$I,
+        search: ForwardRef$F,
+        calendar: ForwardRef$C,
+        info: ForwardRef$z,
+        help: ForwardRef$w,
     },
     '24': {
-        clear: ForwardRef$A,
-        foldingArrow: ForwardRef$x,
-        accept: ForwardRef$u,
-        search: ForwardRef$r,
-        calendar: ForwardRef$o,
-        info: ForwardRef$l,
-        help: ForwardRef$i,
+        clear: ForwardRef$O,
+        foldingArrow: ForwardRef$L,
+        accept: ForwardRef$I,
+        search: ForwardRef$F,
+        calendar: ForwardRef$C,
+        info: ForwardRef$z,
+        help: ForwardRef$w,
     },
     '30': {
-        clear: ForwardRef$z,
-        foldingArrow: ForwardRef$w,
-        accept: ForwardRef$t,
-        search: ForwardRef$q,
-        calendar: ForwardRef$n,
-        info: ForwardRef$k,
-        help: ForwardRef$i,
+        clear: ForwardRef$N,
+        foldingArrow: ForwardRef$K,
+        accept: ForwardRef$H,
+        search: ForwardRef$E,
+        calendar: ForwardRef$B,
+        info: ForwardRef$y,
+        help: ForwardRef$w,
     },
     '36': {
-        clear: ForwardRef$z,
-        foldingArrow: ForwardRef$w,
-        accept: ForwardRef$t,
-        search: ForwardRef$q,
-        calendar: ForwardRef$n,
-        info: ForwardRef$k,
-        help: ForwardRef$h,
+        clear: ForwardRef$N,
+        foldingArrow: ForwardRef$K,
+        accept: ForwardRef$H,
+        search: ForwardRef$E,
+        calendar: ForwardRef$B,
+        info: ForwardRef$y,
+        help: ForwardRef$v,
     },
     '42': {
-        clear: ForwardRef$z,
-        foldingArrow: ForwardRef$w,
-        accept: ForwardRef$t,
-        search: ForwardRef$q,
-        calendar: ForwardRef$n,
-        info: ForwardRef$k,
-        help: ForwardRef$h,
+        clear: ForwardRef$N,
+        foldingArrow: ForwardRef$K,
+        accept: ForwardRef$H,
+        search: ForwardRef$E,
+        calendar: ForwardRef$B,
+        info: ForwardRef$y,
+        help: ForwardRef$v,
     },
     '48': {
-        clear: ForwardRef$y,
-        foldingArrow: ForwardRef$v,
-        accept: ForwardRef$s,
-        search: ForwardRef$p,
-        calendar: ForwardRef$m,
-        info: ForwardRef$j,
-        help: ForwardRef$h,
+        clear: ForwardRef$M,
+        foldingArrow: ForwardRef$J,
+        accept: ForwardRef$G,
+        search: ForwardRef$D,
+        calendar: ForwardRef$A,
+        info: ForwardRef$x,
+        help: ForwardRef$v,
     },
     '60': {
-        clear: ForwardRef$y,
-        foldingArrow: ForwardRef$v,
-        accept: ForwardRef$s,
-        search: ForwardRef$p,
-        calendar: ForwardRef$m,
-        info: ForwardRef$j,
-        help: ForwardRef$h,
+        clear: ForwardRef$M,
+        foldingArrow: ForwardRef$J,
+        accept: ForwardRef$G,
+        search: ForwardRef$D,
+        calendar: ForwardRef$A,
+        info: ForwardRef$x,
+        help: ForwardRef$v,
     },
     'none': {
-        clear: ForwardRef$z,
-        foldingArrow: ForwardRef$w,
-        accept: ForwardRef$t,
-        search: ForwardRef$q,
-        calendar: ForwardRef$n,
-        info: ForwardRef$k,
-        help: ForwardRef$h,
+        clear: ForwardRef$N,
+        foldingArrow: ForwardRef$K,
+        accept: ForwardRef$H,
+        search: ForwardRef$E,
+        calendar: ForwardRef$B,
+        info: ForwardRef$y,
+        help: ForwardRef$v,
     },
 };
 
-var buttonCss = {"root":"Button_root__jHWil","mode-solid":"Button_mode-solid__k0sQj","mode-outline":"Button_mode-outline__52pAv","mode-none":"Button_mode-none__udZIB","mode-ghost":"Button_mode-ghost__Vyie6","size-24":"Button_size-24__lDCao","size-30":"Button_size-30__fekoc","size-36":"Button_size-36__tBTXR","size-42":"Button_size-42__CZ7Vs","size-48":"Button_size-48__lF8e-","modeSolid":"Button_mode-solid__k0sQj","modeOutline":"Button_mode-outline__52pAv","modeNone":"Button_mode-none__udZIB","modeGhost":"Button_mode-ghost__Vyie6","size24":"Button_size-24__lDCao","size30":"Button_size-30__fekoc","size36":"Button_size-36__tBTXR","size42":"Button_size-42__CZ7Vs","size48":"Button_size-48__lF8e-"};
+var buttonCss = {"root":"Button_root__uIzk9","mode-solid":"Button_mode-solid__zr23o","mode-outline":"Button_mode-outline__e9LiF","mode-none":"Button_mode-none__j8rJ3","mode-ghost":"Button_mode-ghost__c8QtK","size-24":"Button_size-24__8SJZp","size-30":"Button_size-30__z1sFR","size-36":"Button_size-36__7ldWy","size-42":"Button_size-42__h3Y-0","size-48":"Button_size-48__VaI4-","modeSolid":"Button_mode-solid__zr23o","modeOutline":"Button_mode-outline__e9LiF","modeNone":"Button_mode-none__j8rJ3","modeGhost":"Button_mode-ghost__c8QtK","size24":"Button_size-24__8SJZp","size30":"Button_size-30__z1sFR","size36":"Button_size-36__7ldWy","size42":"Button_size-42__h3Y-0","size48":"Button_size-48__VaI4-"};
 
 const allButtonColors = ['accent', 'primary', 'secondary', 'negative'];
-const defaultSize$7 = '36';
+const defaultSize$9 = '36';
 function applyButtonMods(mods) {
     return [
-        'button-vars',
-        `button-color-${mods.color || 'primary'}`,
+        `button-${mods.color || 'primary'}`,
         buttonCss.root,
-        buttonCss[`size-${mods.size || defaultSize$7}`],
+        buttonCss[`size-${mods.size || defaultSize$9}`],
         buttonCss[`mode-${mods.mode || 'solid'}`],
     ];
 }
 const Button = uuiCore.withMods(uuiComponents.Button, applyButtonMods, (props) => ({
-    dropdownIcon: systemIcons[props.size || defaultSize$7].foldingArrow,
-    clearIcon: systemIcons[props.size || defaultSize$7].clear,
+    dropdownIcon: systemIcons[props.size || defaultSize$9].foldingArrow,
+    clearIcon: systemIcons[props.size || defaultSize$9].clear,
 }));
 
-var css$B = {"root":"IconButton_root__c1hRd"};
+var css$I = {"root":"IconButton_root__c1hRd"};
 
 const allIconColors = ['info', 'success', 'warning', 'error', 'secondary', 'default'];
 function applyIconButtonMods(mods) {
     return [
-        `icon-button-color-${mods.color || 'default'}`,
-        css$B.root,
+        `icon-button-${mods.color || 'default'}`,
+        css$I.root,
     ];
 }
 const IconButton = uuiCore.withMods(uuiComponents.IconButton, applyIconButtonMods);
 
+var css$H = {"root":"LinkButton_root__SWC7c","size-18":"LinkButton_size-18__XI44N","size-24":"LinkButton_size-24__yj-DG","size-30":"LinkButton_size-30__sKZ9H","size-36":"LinkButton_size-36__HIbgO","size-42":"LinkButton_size-42__apHCj","size-48":"LinkButton_size-48__7zgFe","size18":"LinkButton_size-18__XI44N","size24":"LinkButton_size-24__yj-DG","size30":"LinkButton_size-30__sKZ9H","size36":"LinkButton_size-36__HIbgO","size42":"LinkButton_size-42__apHCj","size48":"LinkButton_size-48__7zgFe"};
+
 function getIconClass(props) {
     let classList = {
         'has-left-icon': false,
@@ -472,128 +473,139 @@ function getIconClass(props) {
     ];
 }
 
-var css$A = {"root":"LinkButton_root__SWC7c","size-18":"LinkButton_size-18__XI44N","size-24":"LinkButton_size-24__yj-DG","size-30":"LinkButton_size-30__sKZ9H","size-36":"LinkButton_size-36__HIbgO","size-42":"LinkButton_size-42__apHCj","size-48":"LinkButton_size-48__7zgFe","size18":"LinkButton_size-18__XI44N","size24":"LinkButton_size-24__yj-DG","size30":"LinkButton_size-30__sKZ9H","size36":"LinkButton_size-36__HIbgO","size42":"LinkButton_size-42__apHCj","size48":"LinkButton_size-48__7zgFe"};
-
-const defaultSize$6 = '36';
+const defaultSize$8 = '36';
 function applyLinkButtonMods(mods) {
     return [
-        'link-button-vars',
-        css$A.root,
-        css$A['size-' + (mods.size || defaultSize$6)],
+        css$H.root,
+        css$H['size-' + (mods.size || defaultSize$8)],
         ...getIconClass(mods),
     ];
 }
 const LinkButton = uuiCore.withMods(uuiComponents.Button, applyLinkButtonMods, (props) => ({
-    dropdownIcon: systemIcons[props.size || defaultSize$6].foldingArrow,
-    clearIcon: systemIcons[props.size || defaultSize$6].clear,
+    dropdownIcon: systemIcons[props.size || defaultSize$8].foldingArrow,
+    clearIcon: systemIcons[props.size || defaultSize$8].clear,
 }));
 
-var css$z = {"root":"TabButton_root__WwWmb","uui-notification":"TabButton_uui-notification__kS3SP","size-36":"TabButton_size-36__GqZ6d","size-48":"TabButton_size-48__SPXAO","size-60":"TabButton_size-60__lPhOn","uuiNotification":"TabButton_uui-notification__kS3SP","size36":"TabButton_size-36__GqZ6d","size48":"TabButton_size-48__SPXAO","size60":"TabButton_size-60__lPhOn"};
+var css$G = {"root":"TabButton_root__WwWmb","uui-notification":"TabButton_uui-notification__kS3SP","size-36":"TabButton_size-36__GqZ6d","size-48":"TabButton_size-48__SPXAO","size-60":"TabButton_size-60__lPhOn","uuiNotification":"TabButton_uui-notification__kS3SP","size36":"TabButton_size-36__GqZ6d","size48":"TabButton_size-48__SPXAO","size60":"TabButton_size-60__lPhOn"};
 
 function applyTabButtonMods(mods) {
     return [
-        'tab-button-vars',
-        css$z.root,
-        css$z['size-' + (mods.size || '48')],
-        mods.withNotify && css$z.uuiNotification,
+        css$G.root,
+        css$G['size-' + (mods.size || '48')],
+        mods.withNotify && css$G.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$y = {"root":"VerticalTabButton_root__LInYW"};
+var css$F = {"root":"VerticalTabButton_root__LInYW"};
 
 function applyVerticalTabButtonMods() {
     return [
-        css$y.root,
+        css$F.root,
     ];
 }
 const VerticalTabButton = uuiCore.withMods(TabButton, applyVerticalTabButtonMods);
 
-var css$x = {"root":"Checkbox_root__-oMf6","size-18":"Checkbox_size-18__BzbEk","size-12":"Checkbox_size-12__ASr3R","size18":"Checkbox_size-18__BzbEk","size12":"Checkbox_size-12__ASr3R"};
+const allButtonModes = ['solid', 'outline', 'ghost', 'none'];
+const allSizes = ['24', '30', '36', '42', '48'];
+const allRowSizes = [null, '24', '30', '36', '42', '48'];
+const allEpamSemanticColors = ['accent', 'primary', 'secondary', 'negative'];
+const allEpamBadgeSemanticColors = ['info', 'success', 'warning', 'error', 'default'];
+const allTextSizes = ['18', '24', '30', '36', '48'];
+const allFontStyles = ['regular', 'semibold', 'italic', 'primary', 'promo'];
+exports.EditMode = void 0;
+(function (EditMode) {
+    EditMode["FORM"] = "form";
+    EditMode["CELL"] = "cell";
+    EditMode["INLINE"] = "inline";
+})(exports.EditMode || (exports.EditMode = {}));
 
-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$s;
+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 SvgCheck12 = function SvgCheck12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$s || (_path$s = /*#__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$g = /*#__PURE__*/React.forwardRef(SvgCheck12);
+var ForwardRef$u = /*#__PURE__*/React.forwardRef(SvgCheck12);
 
-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$r;
+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 SvgCheck18 = function SvgCheck18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__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$f = /*#__PURE__*/React.forwardRef(SvgCheck18);
+var ForwardRef$t = /*#__PURE__*/React.forwardRef(SvgCheck18);
 
-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$q;
+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 SvgPartlySelect12 = function SvgPartlySelect12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M9 5v2H3V5z"
   })));
 };
-var ForwardRef$e = /*#__PURE__*/React.forwardRef(SvgPartlySelect12);
+var ForwardRef$s = /*#__PURE__*/React.forwardRef(SvgPartlySelect12);
 
-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$p;
+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 SvgPartlySelect18 = function SvgPartlySelect18(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M14 8v2H4V8z"
   })));
 };
-var ForwardRef$d = /*#__PURE__*/React.forwardRef(SvgPartlySelect18);
+var ForwardRef$r = /*#__PURE__*/React.forwardRef(SvgPartlySelect18);
+
+var css$E = {"root":"Checkbox_root__-oMf6","size-18":"Checkbox_size-18__BzbEk","size-12":"Checkbox_size-12__ASr3R","mode-cell":"Checkbox_mode-cell__qVdJV","size18":"Checkbox_size-18__BzbEk","size12":"Checkbox_size-12__ASr3R","modeCell":"Checkbox_mode-cell__qVdJV"};
 
 function applyCheckboxMods(mods) {
     return [
-        'checkbox-vars',
-        css$x.root,
-        css$x['size-' + (mods.size || '18')],
+        css$E.root,
+        css$E['size-' + (mods.size || '18')],
+        css$E['mode-' + (mods.mode || 'form')],
     ];
 }
-const Checkbox = uuiCore.withMods(uuiComponents.Checkbox, applyCheckboxMods, (props) => ({
-    icon: (props.size === '12') ? ForwardRef$g : ForwardRef$f,
-    indeterminateIcon: (props.size === '12') ? ForwardRef$e : ForwardRef$d,
-}));
+const applyUUICheckboxProps = (props) => ({
+    icon: (props.size === '12') ? ForwardRef$u : ForwardRef$t,
+    indeterminateIcon: (props.size === '12') ? ForwardRef$s : ForwardRef$r,
+});
+const Checkbox = uuiCore.withMods(uuiComponents.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$w = {"root":"RadioInput_root__wxJgt","size-18":"RadioInput_size-18__csI3z","size-12":"RadioInput_size-12__2lBQH","size18":"RadioInput_size-18__csI3z","size12":"RadioInput_size-12__2lBQH"};
+var css$D = {"root":"RadioInput_root__wxJgt","size-18":"RadioInput_size-18__csI3z","size-12":"RadioInput_size-12__2lBQH","size18":"RadioInput_size-18__csI3z","size12":"RadioInput_size-12__2lBQH"};
 
 var _circle;
-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); }
+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 SvgRadioPoint = function SvgRadioPoint(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
@@ -605,121 +617,131 @@ var SvgRadioPoint = function SvgRadioPoint(props, ref) {
     r: 6
   })));
 };
-var ForwardRef$c = /*#__PURE__*/React.forwardRef(SvgRadioPoint);
+var ForwardRef$q = /*#__PURE__*/React.forwardRef(SvgRadioPoint);
 
 function applyRadioInputMods(mods) {
     return [
-        'radio-input-vars',
-        css$w.root,
-        css$w['size-' + (mods.size || '18')],
+        css$D.root,
+        css$D['size-' + (mods.size || '18')],
     ];
 }
-const RadioInput = uuiCore.withMods(uuiComponents.RadioInput, applyRadioInputMods, () => ({ icon: ForwardRef$c }));
+const RadioInput = uuiCore.withMods(uuiComponents.RadioInput, applyRadioInputMods, () => ({ icon: ForwardRef$q }));
 
-var css$v = {"root":"Switch_root__q-6Iy","size-12":"Switch_size-12__7-pqh","size-18":"Switch_size-18__l3E-E","size-24":"Switch_size-24__DmaSh","size12":"Switch_size-12__7-pqh","size18":"Switch_size-18__l3E-E","size24":"Switch_size-24__DmaSh"};
+var css$C = {"root":"Switch_root__q-6Iy","size-12":"Switch_size-12__7-pqh","size-18":"Switch_size-18__l3E-E","size-24":"Switch_size-24__DmaSh","size12":"Switch_size-12__7-pqh","size18":"Switch_size-18__l3E-E","size24":"Switch_size-24__DmaSh"};
 
 function applySwitchMods(mods) {
     return [
         'switch-vars',
-        css$v.root,
-        css$v['size-' + (mods.size || '18')],
+        css$C.root,
+        css$C['size-' + (mods.size || '18')],
     ];
 }
 const Switch = uuiCore.withMods(uuiComponents.Switch, applySwitchMods);
 
-const allButtonModes = ['solid', 'outline', 'ghost', 'none'];
-const allSizes = ['24', '30', '36', '42', '48'];
-const allRowSizes = [null, '24', '30', '36', '42', '48'];
-const allEpamSemanticColors = ['accent', 'primary', 'secondary', 'negative'];
-const allTextSizes = ['18', '24', '30', '36', '48'];
-const allFontStyles = ['regular', 'semibold', 'italic', 'primary', 'promo'];
-exports.EditMode = void 0;
-(function (EditMode) {
-    EditMode["FORM"] = "form";
-    EditMode["CELL"] = "cell";
-})(exports.EditMode || (exports.EditMode = {}));
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+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.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
 
-var css$u = {"root":"TextInput_root__UKzkT","mode-form":"TextInput_mode-form__JsK1y","mode-cell":"TextInput_mode-cell__H2C-f","size-24":"TextInput_size-24__buGZm","size-30":"TextInput_size-30__G0e43","size-36":"TextInput_size-36__bOehk","size-42":"TextInput_size-42__5Gdbv","size-48":"TextInput_size-48__Eb1Xy","modeForm":"TextInput_mode-form__JsK1y","modeCell":"TextInput_mode-cell__H2C-f","size24":"TextInput_size-24__buGZm","size30":"TextInput_size-30__G0e43","size36":"TextInput_size-36__bOehk","size42":"TextInput_size-42__5Gdbv","size48":"TextInput_size-48__Eb1Xy"};
+var textInputCss = {"root":"TextInput_root__UKzkT","mode-form":"TextInput_mode-form__JsK1y","mode-cell":"TextInput_mode-cell__H2C-f","size-24":"TextInput_size-24__buGZm","size-30":"TextInput_size-30__G0e43","size-36":"TextInput_size-36__bOehk","size-42":"TextInput_size-42__5Gdbv","size-48":"TextInput_size-48__Eb1Xy","modeForm":"TextInput_mode-form__JsK1y","modeCell":"TextInput_mode-cell__H2C-f","size24":"TextInput_size-24__buGZm","size30":"TextInput_size-30__G0e43","size36":"TextInput_size-36__bOehk","size42":"TextInput_size-42__5Gdbv","size48":"TextInput_size-48__Eb1Xy"};
 
-const defaultSize$5 = '36';
-const defaultMode$1 = exports.EditMode.FORM;
+const defaultSize$7 = '36';
+const defaultMode$4 = exports.EditMode.FORM;
 function applyTextInputMods(mods) {
     return [
-        'text-input-vars',
-        css$u.root,
-        css$u['size-' + (mods.size || defaultSize$5)],
-        css$u['mode-' + (mods.mode || defaultMode$1)],
+        textInputCss.root,
+        textInputCss['size-' + (mods.size || defaultSize$7)],
+        textInputCss['mode-' + (mods.mode || defaultMode$4)],
     ];
 }
 const TextInput = uuiCore.withMods(uuiComponents.TextInput, applyTextInputMods, (props) => ({
-    acceptIcon: systemIcons[props.size || defaultSize$5].accept,
-    cancelIcon: systemIcons[props.size || defaultSize$5].clear,
-    dropdownIcon: systemIcons[props.size || defaultSize$5].foldingArrow,
+    acceptIcon: systemIcons[props.size || defaultSize$7].accept,
+    cancelIcon: systemIcons[props.size || defaultSize$7].clear,
+    dropdownIcon: systemIcons[props.size || defaultSize$7].foldingArrow,
 }));
-class SearchInput extends React__namespace.default.Component {
-    render() {
-        // analytics events are sending in IEditableDebouncer, so we need to avoid sending events in TextInput
-        const textInputProps = Object.assign({}, this.props);
-        delete textInputProps.getValueChangeAnalyticsEvent;
-        return React__namespace.default.createElement(uuiCore.IEditableDebouncer, Object.assign({}, this.props, { render: (iEditable => React__namespace.default.createElement(TextInput, Object.assign({ icon: systemIcons[this.props.size || defaultSize$5].search, onCancel: !!this.props.value ? (() => iEditable.onValueChange('')) : undefined, type: "search", inputMode: "search" }, textInputProps, iEditable))) }));
-    }
-}
+const SearchInput = React__namespace.default.forwardRef((props, ref) => {
+    // analytics events are sending in IEditableDebouncer, so we need to avoid sending events in TextInput
+    const textInputProps = __rest(props, []);
+    delete textInputProps.getValueChangeAnalyticsEvent;
+    return (React__namespace.default.createElement(uuiCore.IEditableDebouncer, Object.assign({}, props, { render: iEditable => (React__namespace.default.createElement(TextInput, Object.assign({ icon: systemIcons[props.size || defaultSize$7].search, onCancel: !!props.value ? (() => iEditable.onValueChange('')) : undefined, type: "search", inputMode: "search", ref: ref }, textInputProps, iEditable))) })));
+});
 
-var css$t = {"root":"Accordion_root__fTEyW","mode-block":"Accordion_mode-block__WJ0h9","mode-inline":"Accordion_mode-inline__2zs0-","padding-0":"Accordion_padding-0__GQG7C","padding-6":"Accordion_padding-6__0FFj5","padding-12":"Accordion_padding-12__Bl9rW","padding-18":"Accordion_padding-18__XQdL-","modeBlock":"Accordion_mode-block__WJ0h9","modeInline":"Accordion_mode-inline__2zs0-","padding0":"Accordion_padding-0__GQG7C","padding6":"Accordion_padding-6__0FFj5","padding12":"Accordion_padding-12__Bl9rW","padding18":"Accordion_padding-18__XQdL-"};
+var css$B = {"root":"Accordion_root__fTEyW","mode-block":"Accordion_mode-block__WJ0h9","mode-inline":"Accordion_mode-inline__2zs0-","padding-0":"Accordion_padding-0__GQG7C","padding-6":"Accordion_padding-6__0FFj5","padding-12":"Accordion_padding-12__Bl9rW","padding-18":"Accordion_padding-18__XQdL-","modeBlock":"Accordion_mode-block__WJ0h9","modeInline":"Accordion_mode-inline__2zs0-","padding0":"Accordion_padding-0__GQG7C","padding6":"Accordion_padding-6__0FFj5","padding12":"Accordion_padding-12__Bl9rW","padding18":"Accordion_padding-18__XQdL-"};
 
 function applyAccordionMods(mods) {
     return [
         'accordion-vars',
-        css$t.root,
-        css$t['mode-' + (mods.mode || 'block')],
-        mods.padding && css$t['padding-' + mods.padding],
+        css$B.root,
+        css$B['mode-' + (mods.mode || 'block')],
+        mods.padding && css$B['padding-' + mods.padding],
     ];
 }
 const Accordion = uuiCore.withMods(uuiComponents.Accordion, applyAccordionMods, (mods) => ({
     dropdownIcon: mods.dropdownIcon !== null && systemIcons[mods.mode === 'block' ? '60' : '30'].foldingArrow,
 }));
 
-var css$s = {"root":"ControlGroup_root__wOZ9-"};
+var css$A = {"root":"ControlGroup_root__wOZ9-"};
 
-const ControlGroup = uuiCore.withMods(uuiComponents.ControlGroup, () => [css$s.root]);
+const ControlGroup = uuiCore.withMods(uuiComponents.ControlGroup, () => [css$A.root]);
 
-var css$r = {"root":"FlexRow_root__8pevZ","top-shadow":"FlexRow_top-shadow__yLJfa","size-24":"FlexRow_size-24__UC-Ra","size-30":"FlexRow_size-30__KKsZ5","size-36":"FlexRow_size-36__oVCZp","size-42":"FlexRow_size-42__n5Pxh","size-48":"FlexRow_size-48__N-bVM","padding-6":"FlexRow_padding-6__TyXUB","padding-12":"FlexRow_padding-12__NiZVt","padding-18":"FlexRow_padding-18__f-DJ9","padding-24":"FlexRow_padding-24__aVQje","margin-24":"FlexRow_margin-24__W8cmr","margin-12":"FlexRow_margin-12__Tt04l","vPadding-12":"FlexRow_vPadding-12__f3sn6","vPadding-18":"FlexRow_vPadding-18__7Ljl4","vPadding-24":"FlexRow_vPadding-24__nJLBC","vPadding-36":"FlexRow_vPadding-36__7E6EY","vPadding-48":"FlexRow_vPadding-48__zzaPF","spacing-6":"FlexRow_spacing-6__l7a8O","spacing-12":"FlexRow_spacing-12__8ToPe","spacing-18":"FlexRow_spacing-18__QdC3L","border-bottom":"FlexRow_border-bottom__5L1Xk","topShadow":"FlexRow_top-shadow__yLJfa","size24":"FlexRow_size-24__UC-Ra","size30":"FlexRow_size-30__KKsZ5","size36":"FlexRow_size-36__oVCZp","size42":"FlexRow_size-42__n5Pxh","size48":"FlexRow_size-48__N-bVM","padding6":"FlexRow_padding-6__TyXUB","padding12":"FlexRow_padding-12__NiZVt","padding18":"FlexRow_padding-18__f-DJ9","padding24":"FlexRow_padding-24__aVQje","margin24":"FlexRow_margin-24__W8cmr","margin12":"FlexRow_margin-12__Tt04l","vPadding12":"FlexRow_vPadding-12__f3sn6","vPadding18":"FlexRow_vPadding-18__7Ljl4","vPadding24":"FlexRow_vPadding-24__nJLBC","vPadding36":"FlexRow_vPadding-36__7E6EY","vPadding48":"FlexRow_vPadding-48__zzaPF","spacing6":"FlexRow_spacing-6__l7a8O","spacing12":"FlexRow_spacing-12__8ToPe","spacing18":"FlexRow_spacing-18__QdC3L","borderBottom":"FlexRow_border-bottom__5L1Xk"};
+var css$z = {"root":"FlexRow_root__8pevZ","top-shadow":"FlexRow_top-shadow__yLJfa","size-24":"FlexRow_size-24__UC-Ra","size-30":"FlexRow_size-30__KKsZ5","size-36":"FlexRow_size-36__oVCZp","size-42":"FlexRow_size-42__n5Pxh","size-48":"FlexRow_size-48__N-bVM","padding-6":"FlexRow_padding-6__TyXUB","padding-12":"FlexRow_padding-12__NiZVt","padding-18":"FlexRow_padding-18__f-DJ9","padding-24":"FlexRow_padding-24__aVQje","margin-24":"FlexRow_margin-24__W8cmr","margin-12":"FlexRow_margin-12__Tt04l","vPadding-12":"FlexRow_vPadding-12__f3sn6","vPadding-18":"FlexRow_vPadding-18__7Ljl4","vPadding-24":"FlexRow_vPadding-24__nJLBC","vPadding-36":"FlexRow_vPadding-36__7E6EY","vPadding-48":"FlexRow_vPadding-48__zzaPF","spacing-6":"FlexRow_spacing-6__l7a8O","spacing-12":"FlexRow_spacing-12__8ToPe","spacing-18":"FlexRow_spacing-18__QdC3L","border-bottom":"FlexRow_border-bottom__5L1Xk","topShadow":"FlexRow_top-shadow__yLJfa","size24":"FlexRow_size-24__UC-Ra","size30":"FlexRow_size-30__KKsZ5","size36":"FlexRow_size-36__oVCZp","size42":"FlexRow_size-42__n5Pxh","size48":"FlexRow_size-48__N-bVM","padding6":"FlexRow_padding-6__TyXUB","padding12":"FlexRow_padding-12__NiZVt","padding18":"FlexRow_padding-18__f-DJ9","padding24":"FlexRow_padding-24__aVQje","margin24":"FlexRow_margin-24__W8cmr","margin12":"FlexRow_margin-12__Tt04l","vPadding12":"FlexRow_vPadding-12__f3sn6","vPadding18":"FlexRow_vPadding-18__7Ljl4","vPadding24":"FlexRow_vPadding-24__nJLBC","vPadding36":"FlexRow_vPadding-36__7E6EY","vPadding48":"FlexRow_vPadding-48__zzaPF","spacing6":"FlexRow_spacing-6__l7a8O","spacing12":"FlexRow_spacing-12__8ToPe","spacing18":"FlexRow_spacing-18__QdC3L","borderBottom":"FlexRow_border-bottom__5L1Xk"};
 
 const FlexCell = uuiCore.withMods(uuiComponents.FlexCell, props => [
-    css$r.flexCell,
+    css$z.flexCell,
 ]);
 
 const FlexRow = uuiCore.withMods(uuiComponents.FlexRow, props => {
     return [
-        css$r.root,
-        props.size !== null && css$r['size-' + (props.size || '36')],
-        props.padding && css$r['padding-' + props.padding],
-        props.vPadding && css$r['vPadding-' + props.vPadding],
-        props.margin && css$r['margin-' + props.margin],
-        props.topShadow && css$r.topShadow,
-        props.borderBottom && css$r['border-bottom'],
-        props.spacing && css$r['spacing-' + props.spacing],
+        css$z.root,
+        props.size !== null && css$z['size-' + (props.size || '36')],
+        props.padding && css$z['padding-' + props.padding],
+        props.vPadding && css$z['vPadding-' + props.vPadding],
+        props.margin && css$z['margin-' + props.margin],
+        props.topShadow && css$z.topShadow,
+        props.borderBottom && css$z['border-bottom'],
+        props.spacing && css$z['spacing-' + props.spacing],
     ];
 });
 
 const FlexSpacer = uuiComponents.FlexSpacer;
 
-var css$q = {"root":"Panel_root__Ue9u5","background":"Panel_background__thbKB","margin-24":"Panel_margin-24__EZfwq","padding-12":"Panel_padding-12__zmnQV","padding-24":"Panel_padding-24__mOtka","shadow":"Panel_shadow__lMI9N","margin24":"Panel_margin-24__EZfwq","padding12":"Panel_padding-12__zmnQV","padding24":"Panel_padding-24__mOtka"};
+var css$y = {"root":"Panel_root__Ue9u5","margin-24":"Panel_margin-24__EZfwq","padding-12":"Panel_padding-12__zmnQV","padding-24":"Panel_padding-24__mOtka","shadow":"Panel_shadow__lMI9N","margin24":"Panel_margin-24__EZfwq","padding12":"Panel_padding-12__zmnQV","padding24":"Panel_padding-24__mOtka"};
 
 const Panel = uuiCore.withMods(uuiComponents.VPanel, props => [
-    'panel-vars',
-    css$q.root,
-    props.shadow && css$q.shadow,
-    props.background && css$q.background,
-    props.margin && css$q['margin-' + props.margin],
+    'uui-panel',
+    css$y.root,
+    props.shadow && css$y.shadow,
+    props.margin && css$y['margin-' + props.margin],
 ]);
 
-var css$p = {"root":"IconContainer_root__yjHAs"};
+var css$x = {"root":"IconContainer_root__yjHAs"};
 
 function applyIconContainerMods(mods) {
     return [
         `icon-container-color-${mods.color || 'default'}`,
-        css$p.root,
+        css$x.root,
     ];
 }
 const IconContainer = uuiCore.withMods(uuiComponents.IconContainer, applyIconContainerMods, () => ({ tabIndex: 0 }));
@@ -730,27 +752,28 @@ class Dropdown extends React__namespace.Component {
     }
 }
 
-var css$o = {"root":"DropdownContainer_root__0tHS6"};
+var css$w = {"root":"DropdownContainer_root__0tHS6"};
 
 function applyDropdownContainerMods(mods) {
     return [
         'dropdown-container-vars',
-        css$o.root,
+        css$w.root,
     ];
 }
 const DropdownContainer = uuiCore.withMods(uuiComponents.DropdownContainer, applyDropdownContainerMods);
 
-var css$n = {"menuRoot":"DropdownMenu_menuRoot__gRW4S","bodyRoot":"DropdownMenu_bodyRoot__hAgqI","submenuRootItem":"DropdownMenu_submenuRootItem__52Bxy","iconAfter":"DropdownMenu_iconAfter__Hbijr","iconCheck":"DropdownMenu_iconCheck__TtmI6","splitterRoot":"DropdownMenu_splitterRoot__mJGU2","splitter":"DropdownMenu_splitter__7AuFo","headerRoot":"DropdownMenu_headerRoot__iEVUM","itemRoot":"DropdownMenu_itemRoot__mBMPU","icon":"DropdownMenu_icon__YE2-L","link":"DropdownMenu_link__pgNjs"};
+var css$v = {"menuRoot":"DropdownMenu_menuRoot__gRW4S","bodyRoot":"DropdownMenu_bodyRoot__hAgqI","submenuRootItem":"DropdownMenu_submenuRootItem__52Bxy","iconAfter":"DropdownMenu_iconAfter__Hbijr","iconCheck":"DropdownMenu_iconCheck__TtmI6","splitterRoot":"DropdownMenu_splitterRoot__mJGU2","splitter":"DropdownMenu_splitter__7AuFo","headerRoot":"DropdownMenu_headerRoot__iEVUM","itemRoot":"DropdownMenu_itemRoot__mBMPU","icon":"DropdownMenu_icon__YE2-L","link":"DropdownMenu_link__pgNjs"};
 
 const icons = systemIcons['36'];
-const DropdownControlKeys = {
-    ENTER: 'Enter',
-    ESCAPE: 'Escape',
-    LEFT_ARROW: 'ArrowLeft',
-    RIGHT_ARROW: 'ArrowRight',
-    UP_ARROW: 'ArrowUp',
-    DOWN_ARROW: 'ArrowDown',
-};
+exports.IDropdownControlKeys = void 0;
+(function (IDropdownControlKeys) {
+    IDropdownControlKeys["ENTER"] = "Enter";
+    IDropdownControlKeys["ESCAPE"] = "Escape";
+    IDropdownControlKeys["LEFT_ARROW"] = "ArrowLeft";
+    IDropdownControlKeys["RIGHT_ARROW"] = "ArrowRight";
+    IDropdownControlKeys["UP_ARROW"] = "ArrowUp";
+    IDropdownControlKeys["DOWN_ARROW"] = "ArrowDown";
+})(exports.IDropdownControlKeys || (exports.IDropdownControlKeys = {}));
 const DropdownMenuContainer = (props) => {
     const menuRef = React.useRef(null);
     const [currentlyFocused, setFocused] = React.useState(-1);
@@ -768,23 +791,23 @@ const DropdownMenuContainer = (props) => {
     const handleArrowKeys = (e) => {
         e.stopPropagation();
         const lastMenuItemsIndex = menuItems.length - 1;
-        if (e.key === DropdownControlKeys.UP_ARROW) {
+        if (e.key === exports.IDropdownControlKeys.UP_ARROW) {
             changeFocus(currentlyFocused > 0 ? currentlyFocused - 1 : lastMenuItemsIndex);
         }
-        else if (e.key === DropdownControlKeys.DOWN_ARROW) {
+        else if (e.key === exports.IDropdownControlKeys.DOWN_ARROW) {
             changeFocus(currentlyFocused < lastMenuItemsIndex ? currentlyFocused + 1 : 0);
         }
         else if (e.key === props.closeOnKey && props.onClose) {
             props.onClose();
         }
     };
-    return (React__namespace.default.createElement(FocusLock__default.default, { as: "menu", className: css$n.menuRoot, returnFocus: true, autoFocus: false, ref: menuRef, lockProps: { onKeyDown: handleArrowKeys, tabIndex: -1 } },
+    return (React__namespace.default.createElement(FocusLock__default.default, { as: "menu", className: css$v.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$n.bodyRoot], ({ style }) => ({ style }));
-const DropdownMenuButton = (props) => {
+const DropdownMenuBody = uuiCore.withMods(DropdownMenuContainer, () => [css$v.bodyRoot], ({ style }) => ({ style }));
+const DropdownMenuButton = React__namespace.default.forwardRef((props, ref) => {
     const context = React.useContext(uuiCore.UuiContext);
-    const { icon, iconPosition, caption, isDisabled, isSelected, link, href, onClick, toggleDropdownOpening, isDropdown, target, } = props;
+    const { icon, iconPosition, onIconClick, caption, isDisabled, isSelected, isActive, link, href, onClick, toggleDropdownOpening, isDropdown, isOpen, target, } = props;
     const handleClick = (event) => {
         if (isDisabled || !onClick)
             return;
@@ -792,39 +815,44 @@ const DropdownMenuButton = (props) => {
         context.uuiAnalytics.sendEvent(props.clickAnalyticsEvent);
     };
     const handleOpenDropdown = (event) => {
-        if (event.key === DropdownControlKeys.RIGHT_ARROW && isDropdown) {
+        if (event.key === exports.IDropdownControlKeys.RIGHT_ARROW && isDropdown) {
             toggleDropdownOpening(true);
         }
-        else if (event.key === DropdownControlKeys.ENTER && onClick) {
+        else if (event.key === exports.IDropdownControlKeys.ENTER && onClick) {
             onClick(event);
         }
     };
     const getMenuButtonContent = () => {
         const isIconBefore = Boolean(icon && iconPosition !== "right");
         const isIconAfter = Boolean(icon && iconPosition === "right");
-        const iconElement = React__namespace.default.createElement(uuiComponents.IconContainer, { icon: icon, cx: uuiCore.cx(css$n.icon, iconPosition === "right" ? css$n.iconAfter : css$n.iconBefore) });
+        const iconElement = React__namespace.default.createElement(IconButton, { icon: icon, color: isActive ? 'info' : 'default', onClick: onIconClick, cx: uuiCore.cx(css$v.icon, iconPosition === "right" ? css$v.iconAfter : css$v.iconBefore) });
         return React__namespace.default.createElement(React__namespace.default.Fragment, null,
             isIconBefore && iconElement,
-            React__namespace.default.createElement(uuiComponents.Text, { cx: css$n.caption }, caption),
+            React__namespace.default.createElement(uuiComponents.Text, { cx: css$v.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$n.itemRoot, isDisabled && uuiCore.uuiMod.disabled, isSelected && uuiCore.uuiMod.selected);
-    return isAnchor ? (React__namespace.default.createElement(uuiComponents.Anchor, { cx: uuiCore.cx(css$n.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__namespace.default.createElement(uuiComponents.FlexRow, { rawProps: {
+    const itemClassNames = uuiCore.cx(props.cx, css$v.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$v.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 }, getMenuButtonContent()));
-};
+        }, cx: itemClassNames, onClick: handleClick, ref: ref },
+        getMenuButtonContent(),
+        isSelected && React__namespace.default.createElement(uuiComponents.IconContainer, { icon: icons.accept, cx: css$v.selectedCheckmark })));
+});
 DropdownMenuButton.displayName = 'DropdownMenuButton';
-const DropdownMenuSplitter = (props) => (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$n.splitterRoot) },
-    React__namespace.default.createElement("hr", { className: css$n.splitter })));
-const DropdownMenuHeader = (props) => (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$n.headerRoot) },
-    React__namespace.default.createElement("span", { className: css$n.header }, props.caption)));
+const DropdownMenuSplitter = (props) => (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$v.splitterRoot) },
+    React__namespace.default.createElement("hr", { className: css$v.splitter })));
+const DropdownMenuHeader = (props) => (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$v.headerRoot) },
+    React__namespace.default.createElement("span", { className: css$v.header }, props.caption)));
 const DropdownSubMenu = (props) => {
-    return (React__namespace.default.createElement(uuiComponents.Dropdown, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", placement: "right-start", renderBody: (props) => (React__namespace.default.createElement(DropdownMenuBody, Object.assign({ closeOnKey: DropdownControlKeys.LEFT_ARROW }, props))), renderTarget: ({ toggleDropdownOpening }) => (React__namespace.default.createElement(DropdownMenuButton, Object.assign({ cx: uuiCore.cx(css$n.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props))) }));
+    return (React__namespace.default.createElement(uuiComponents.Dropdown, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", placement: "right-start", 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$v.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
+        } }));
 };
 const DropdownMenuSwitchButton = (props) => {
     const context = React.useContext(uuiCore.UuiContext);
@@ -836,20 +864,20 @@ const DropdownMenuSwitchButton = (props) => {
         context.uuiAnalytics.sendEvent(props.clickAnalyticsEvent);
     };
     const handleKeySelect = (e) => {
-        if (e.key === DropdownControlKeys.ENTER) {
+        if (e.key === exports.IDropdownControlKeys.ENTER) {
             onHandleValueChange(!isSelected);
         }
     };
-    return (React__namespace.default.createElement(uuiComponents.FlexRow, { cx: uuiCore.cx(props.cx, css$n.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$n.iconBefore }),
-        React__namespace.default.createElement(uuiComponents.Text, { cx: css$n.caption }, caption),
+    return (React__namespace.default.createElement(uuiComponents.FlexRow, { cx: uuiCore.cx(props.cx, css$v.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$v.iconBefore }),
+        React__namespace.default.createElement(uuiComponents.Text, { cx: css$v.caption }, caption),
         React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
         React__namespace.default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
 };
 
-var css$m = {"root":"Text_root__iUAW9"};
+var css$u = {"root":"Text_root__iUAW9"};
 
-var css$l = {"line-height-12":"text-layout_line-height-12__-fXrz","line-height-18":"text-layout_line-height-18__kfeYe","line-height-24":"text-layout_line-height-24__VmJFi","line-height-30":"text-layout_line-height-30__C4k89","font-size-10":"text-layout_font-size-10__U-DE-","font-size-12":"text-layout_font-size-12__1WdLm","font-size-14":"text-layout_font-size-14__5I7px","font-size-16":"text-layout_font-size-16__loUuU","font-size-18":"text-layout_font-size-18__PvhrF","font-size-24":"text-layout_font-size-24__JsYUV","v-padding-2":"text-layout_v-padding-2__-bGuG","v-padding-3":"text-layout_v-padding-3__ImU4D","v-padding-5":"text-layout_v-padding-5__el2DC","v-padding-6":"text-layout_v-padding-6__4QshS","v-padding-8":"text-layout_v-padding-8__CKQZ6","v-padding-9":"text-layout_v-padding-9__8cSJ-","v-padding-11":"text-layout_v-padding-11__kJwOK","v-padding-12":"text-layout_v-padding-12__J6PjS","v-padding-14":"text-layout_v-padding-14__TgJs7","v-padding-15":"text-layout_v-padding-15__kVl-D","v-padding-17":"text-layout_v-padding-17__065AA","v-padding-18":"text-layout_v-padding-18__hxDYP","v-padding-23":"text-layout_v-padding-23__44pE2","v-padding-24":"text-layout_v-padding-24__gxRAs","lineHeight12":"text-layout_line-height-12__-fXrz","lineHeight18":"text-layout_line-height-18__kfeYe","lineHeight24":"text-layout_line-height-24__VmJFi","lineHeight30":"text-layout_line-height-30__C4k89","fontSize10":"text-layout_font-size-10__U-DE-","fontSize12":"text-layout_font-size-12__1WdLm","fontSize14":"text-layout_font-size-14__5I7px","fontSize16":"text-layout_font-size-16__loUuU","fontSize18":"text-layout_font-size-18__PvhrF","fontSize24":"text-layout_font-size-24__JsYUV","vPadding2":"text-layout_v-padding-2__-bGuG","vPadding3":"text-layout_v-padding-3__ImU4D","vPadding5":"text-layout_v-padding-5__el2DC","vPadding6":"text-layout_v-padding-6__4QshS","vPadding8":"text-layout_v-padding-8__CKQZ6","vPadding9":"text-layout_v-padding-9__8cSJ-","vPadding11":"text-layout_v-padding-11__kJwOK","vPadding12":"text-layout_v-padding-12__J6PjS","vPadding14":"text-layout_v-padding-14__TgJs7","vPadding15":"text-layout_v-padding-15__kVl-D","vPadding17":"text-layout_v-padding-17__065AA","vPadding18":"text-layout_v-padding-18__hxDYP","vPadding23":"text-layout_v-padding-23__44pE2","vPadding24":"text-layout_v-padding-24__gxRAs"};
+var css$t = {"line-height-12":"text-layout_line-height-12__-fXrz","line-height-18":"text-layout_line-height-18__kfeYe","line-height-24":"text-layout_line-height-24__VmJFi","line-height-30":"text-layout_line-height-30__C4k89","font-size-10":"text-layout_font-size-10__U-DE-","font-size-12":"text-layout_font-size-12__1WdLm","font-size-14":"text-layout_font-size-14__5I7px","font-size-16":"text-layout_font-size-16__loUuU","font-size-18":"text-layout_font-size-18__PvhrF","font-size-24":"text-layout_font-size-24__JsYUV","v-padding-2":"text-layout_v-padding-2__-bGuG","v-padding-3":"text-layout_v-padding-3__ImU4D","v-padding-5":"text-layout_v-padding-5__el2DC","v-padding-6":"text-layout_v-padding-6__4QshS","v-padding-8":"text-layout_v-padding-8__CKQZ6","v-padding-9":"text-layout_v-padding-9__8cSJ-","v-padding-11":"text-layout_v-padding-11__kJwOK","v-padding-12":"text-layout_v-padding-12__J6PjS","v-padding-14":"text-layout_v-padding-14__TgJs7","v-padding-15":"text-layout_v-padding-15__kVl-D","v-padding-17":"text-layout_v-padding-17__065AA","v-padding-18":"text-layout_v-padding-18__hxDYP","v-padding-23":"text-layout_v-padding-23__44pE2","v-padding-24":"text-layout_v-padding-24__gxRAs","lineHeight12":"text-layout_line-height-12__-fXrz","lineHeight18":"text-layout_line-height-18__kfeYe","lineHeight24":"text-layout_line-height-24__VmJFi","lineHeight30":"text-layout_line-height-30__C4k89","fontSize10":"text-layout_font-size-10__U-DE-","fontSize12":"text-layout_font-size-12__1WdLm","fontSize14":"text-layout_font-size-14__5I7px","fontSize16":"text-layout_font-size-16__loUuU","fontSize18":"text-layout_font-size-18__PvhrF","fontSize24":"text-layout_font-size-24__JsYUV","vPadding2":"text-layout_v-padding-2__-bGuG","vPadding3":"text-layout_v-padding-3__ImU4D","vPadding5":"text-layout_v-padding-5__el2DC","vPadding6":"text-layout_v-padding-6__4QshS","vPadding8":"text-layout_v-padding-8__CKQZ6","vPadding9":"text-layout_v-padding-9__8cSJ-","vPadding11":"text-layout_v-padding-11__kJwOK","vPadding12":"text-layout_v-padding-12__J6PjS","vPadding14":"text-layout_v-padding-14__TgJs7","vPadding15":"text-layout_v-padding-15__kVl-D","vPadding17":"text-layout_v-padding-17__065AA","vPadding18":"text-layout_v-padding-18__hxDYP","vPadding23":"text-layout_v-padding-23__44pE2","vPadding24":"text-layout_v-padding-24__gxRAs"};
 
 const defaultTextSettings = {
     18: { lineHeight: 12, fontSize: 10 },
@@ -863,8 +891,8 @@ const defaultTextSettings = {
 function getTextClasses(props, border) {
     if (props.size === 'none') {
         return [
-            css$l['line-height-' + props.lineHeight],
-            css$l['font-size-' + props.fontSize],
+            css$t['line-height-' + props.lineHeight],
+            css$t['font-size-' + props.fontSize],
         ];
     }
     const setting = {
@@ -874,9 +902,9 @@ function getTextClasses(props, border) {
     };
     const vPadding = (+setting.size - +setting.lineHeight - (border ? 2 : 0)) / 2;
     return [
-        css$l['line-height-' + setting.lineHeight],
-        css$l['font-size-' + setting.fontSize],
-        css$l['v-padding-' + vPadding],
+        css$t['line-height-' + setting.lineHeight],
+        css$t['font-size-' + setting.fontSize],
+        css$t['v-padding-' + vPadding],
     ];
 }
 
@@ -889,12 +917,12 @@ function applyTextMods(mods) {
     return [
         `font-${mods.font || 'regular'}`,
         `text-color-${mods.color || 'primary'}`,
-        css$m.root,
+        css$u.root,
     ].concat(textClasses);
 }
 const Text = uuiCore.withMods(uuiComponents.Text, applyTextMods);
 
-var css$k = {"container":"TextPlaceholder_container__Jn60D","loading-word":"TextPlaceholder_loading-word__22WpS","animated-loading":"TextPlaceholder_animated-loading__ao75r","skeleton_loading":"TextPlaceholder_skeleton_loading__NzV8h","loadingWord":"TextPlaceholder_loading-word__22WpS","animatedLoading":"TextPlaceholder_animated-loading__ao75r","skeletonLoading":"TextPlaceholder_skeleton_loading__NzV8h"};
+var css$s = {"container":"TextPlaceholder_container__Jn60D","loading-word":"TextPlaceholder_loading-word__22WpS","animated-loading":"TextPlaceholder_animated-loading__ao75r","skeleton_loading":"TextPlaceholder_skeleton_loading__NzV8h","loadingWord":"TextPlaceholder_loading-word__22WpS","animatedLoading":"TextPlaceholder_animated-loading__ao75r","skeletonLoading":"TextPlaceholder_skeleton_loading__NzV8h"};
 
 const TextPlaceholder = (props) => {
     const pattern = `0`;
@@ -906,37 +934,36 @@ const TextPlaceholder = (props) => {
         }
         return words;
     }, [props.wordsCount]);
-    return (React__namespace.createElement("div", { "aria-busy": true, className: css$k.container }, text.map((it, index) => (React__namespace.createElement("span", { key: index, className: cx__default.default([
+    return (React__namespace.createElement("div", { "aria-busy": true, className: css$s.container }, text.map((it, index) => (React__namespace.createElement("span", { key: index, className: cx__default.default([
             'text-placeholder-vars',
-            css$k.loadingWord,
-            !props.isNotAnimated && css$k.animatedLoading,
+            css$s.loadingWord,
+            !props.isNotAnimated && css$s.animatedLoading,
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
-var _path$a;
-function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
+var _path$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 SvgNavigationClose24$1 = function SvgNavigationClose24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+  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$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$o || (_path$o = /*#__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$b = /*#__PURE__*/React.forwardRef(SvgNavigationClose24$1);
+var ForwardRef$p = /*#__PURE__*/React.forwardRef(SvgNavigationClose24$1);
 
-var css$j = {"modal-blocker":"Modals_modal-blocker__nCAZ7","animateModalBlocker":"Modals_animateModalBlocker__S-4dL","blocker-overlay":"Modals_blocker-overlay__1uHVd","modal":"Modals_modal__m41wI","modal-footer":"Modals_modal-footer__gg-90","border-top":"Modals_border-top__cfzhv","modal-header":"Modals_modal-header__8aswP","modalBlocker":"Modals_modal-blocker__nCAZ7","blockerOverlay":"Modals_blocker-overlay__1uHVd","modalFooter":"Modals_modal-footer__gg-90","borderTop":"Modals_border-top__cfzhv","modalHeader":"Modals_modal-header__8aswP"};
+var css$r = {"modal-blocker":"Modals_modal-blocker__nCAZ7","animateModalBlocker":"Modals_animateModalBlocker__S-4dL","blocker-overlay":"Modals_blocker-overlay__1uHVd","modal":"Modals_modal__m41wI","modal-footer":"Modals_modal-footer__gg-90","border-top":"Modals_border-top__cfzhv","modal-header":"Modals_modal-header__8aswP","modalBlocker":"Modals_modal-blocker__nCAZ7","blockerOverlay":"Modals_blocker-overlay__1uHVd","modalFooter":"Modals_modal-footer__gg-90","borderTop":"Modals_border-top__cfzhv","modalHeader":"Modals_modal-header__8aswP"};
 
 const ModalBlocker = uuiCore.withMods(uuiComponents.ModalBlocker, mods => [
-    'modals-vars',
-    css$j.modalBlocker,
-    mods.overlay && css$j['blocker-overlay'],
+    css$r.modalBlocker,
+    mods.overlay && css$r['blocker-overlay'],
 ]);
-const ModalWindow = uuiCore.withMods(uuiComponents.ModalWindow, () => ['modals-vars', css$j.modal], props => ({ rawProps: {
+const ModalWindow = uuiCore.withMods(uuiComponents.ModalWindow, () => [css$r.modal], props => ({ rawProps: {
         style: {
             width: `${props.width || 480}px`,
             height: props.height ? `${props.height}px` : '',
@@ -945,17 +972,17 @@ const ModalWindow = uuiCore.withMods(uuiComponents.ModalWindow, () => ['modals-v
 }));
 class ModalHeader extends React__namespace.Component {
     render() {
-        return (React__namespace.createElement(FlexRow, { padding: this.props.padding || '24', vPadding: '12', borderBottom: true, cx: ['modals-vars', css$j.modalHeader, this.props.cx], spacing: '12', rawProps: this.props.rawProps },
+        return (React__namespace.createElement(FlexRow, { padding: this.props.padding || '24', vPadding: '12', borderBottom: this.props.borderBottom, cx: [css$r.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(FlexSpacer, null),
             this.props.onClose && React__namespace.createElement(FlexCell, { shrink: 0, width: 'auto' },
-                React__namespace.createElement(IconButton, { icon: ForwardRef$b, onClick: this.props.onClose }))));
+                React__namespace.createElement(IconButton, { icon: ForwardRef$p, onClick: this.props.onClose }))));
     }
 }
 class ModalFooter extends React__namespace.Component {
     render() {
-        return (React__namespace.createElement(FlexRow, { spacing: this.props.spacing || '12', cx: ['modals-vars', css$j.modalFooter, this.props.borderTop && css$j.borderTop, this.props.cx], padding: this.props.padding || '24', vPadding: this.props.vPadding || '24', rawProps: this.props.rawProps }, this.props.children));
+        return (React__namespace.createElement(FlexRow, { spacing: this.props.spacing || '12', cx: [css$r.modalFooter, this.props.borderTop && css$r.borderTop, this.props.cx], padding: this.props.padding || '24', vPadding: this.props.vPadding || '24', rawProps: this.props.rawProps }, this.props.children));
     }
 }
 
@@ -963,6 +990,7 @@ const i18n = {
     dataPickerBody: {
         searchPlaceholder: 'Search',
         noRecordsMessage: 'No records found',
+        noRecordsSubTitle: 'Check your spelling, or search for a different keyword',
     },
     pickerModal: {
         headerTitle: 'Please select',
@@ -975,6 +1003,7 @@ const i18n = {
     pickerInput: {
         showOnlySelectedLabel: 'Show only selected',
         clearSelectionButton: 'CLEAR ALL',
+        clearSelectionButtonSingle: 'CLEAR',
         selectAllButton: 'SELECT ALL',
     },
     notificationCard: {
@@ -996,101 +1025,139 @@ const i18n = {
         pickerPlaceholderTo: 'To:',
     },
     tables: {
+        noResultsBlock: {
+            title: 'No results found',
+            message: 'We can’t find any item matching your request',
+        },
         columnsConfigurationModal: {
             applyButton: 'Apply',
-            checkAllButton: 'CHECK ALL',
-            uncheckAllButton: 'UNCHECK ALL',
+            cancelButton: 'Cancel',
+            selectAllButton: 'Select all',
+            clearAllButton: 'Clear all',
+            checkAllButton: 'Check All',
+            uncheckAllButton: 'Uncheck All',
             configureColumnsTitle: 'Configure columns',
             resetToDefaultButton: 'Reset to Default',
+            displayedSectionTitle: 'Displayed in table',
+            hiddenSectionTitle: 'Hidden in table',
+            searchPlaceholder: 'Search by column name',
+            noResultsFound: {
+                text: 'No results found',
+                subText: 'We can’t find any item matching your request',
+            },
+            enableAtLeastOneColumnMessage: 'Please enable at least one column',
+            pinColumnButton: "Pin column",
+            unPinColumnButton: "Unpin column",
+            lockedColumnPinButton: "You cannot unpin this column",
         },
     },
     pickerFilterHeader: {
         sortAscending: 'Sort Ascending',
         sortDescending: 'Sort Descending',
     },
+    filterToolbar: {
+        addCaption: 'Add filter',
+        datePicker: {
+            placeholder: 'Select date',
+            removeCaption: 'REMOVE FILTER',
+            clearCaption: 'CLEAR',
+        },
+        rangeDatePicker: {
+            emptyPickerPlaceholder: 'Select period',
+            emptyPlaceholderFrom: 'Select From',
+            emptyPlaceholderTo: 'Select To',
+        },
+        pickerInput: {
+            itemsPlaceholder: 'items',
+            emptyValueCaption: 'ALL',
+        },
+    },
+    presetPanel: {
+        addCaption: 'Add Preset',
+    },
 };
 
-var _path$9;
-function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
+var _path$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 SvgNotificationCheckCircleFill24 = function SvgNotificationCheckCircleFill24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__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$a = /*#__PURE__*/React.forwardRef(SvgNotificationCheckCircleFill24);
+var ForwardRef$o = /*#__PURE__*/React.forwardRef(SvgNotificationCheckCircleFill24);
 
-var _path$8;
-function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
+var _path$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 SvgNotificationWarningFill24 = function SvgNotificationWarningFill24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
   })));
 };
-var ForwardRef$9 = /*#__PURE__*/React.forwardRef(SvgNotificationWarningFill24);
+var ForwardRef$n = /*#__PURE__*/React.forwardRef(SvgNotificationWarningFill24);
 
-var _path$7;
-function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+var _path$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 SvgNotificationErrorFill24 = function SvgNotificationErrorFill24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__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$8 = /*#__PURE__*/React.forwardRef(SvgNotificationErrorFill24);
+var ForwardRef$m = /*#__PURE__*/React.forwardRef(SvgNotificationErrorFill24);
 
-var _path$6;
-function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+var _path$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 SvgNotificationHelpFill24 = function SvgNotificationHelpFill24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__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$7 = /*#__PURE__*/React.forwardRef(SvgNotificationHelpFill24);
+var ForwardRef$l = /*#__PURE__*/React.forwardRef(SvgNotificationHelpFill24);
 
-var _path$5;
-function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+var _path$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 SvgCross = function SvgCross(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
+  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$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__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$6 = /*#__PURE__*/React.forwardRef(SvgCross);
+var ForwardRef$k = /*#__PURE__*/React.forwardRef(SvgCross);
 
-var css$i = {"root":"NotificationCard_root__HP4NM","icon-wrapper":"NotificationCard_icon-wrapper__FZUAl","notification-wrapper":"NotificationCard_notification-wrapper__L-YsE","action-wrapper":"NotificationCard_action-wrapper__MahuR","action-link":"NotificationCard_action-link__DXfp7","close-icon":"NotificationCard_close-icon__p0MvI","main-path":"NotificationCard_main-path__yWH2j","content":"NotificationCard_content__O4mCt","clear-button":"NotificationCard_clear-button__-RzMj","close-wrapper":"NotificationCard_close-wrapper__BVl8x","iconWrapper":"NotificationCard_icon-wrapper__FZUAl","notificationWrapper":"NotificationCard_notification-wrapper__L-YsE","actionWrapper":"NotificationCard_action-wrapper__MahuR","actionLink":"NotificationCard_action-link__DXfp7","closeIcon":"NotificationCard_close-icon__p0MvI","mainPath":"NotificationCard_main-path__yWH2j","clearButton":"NotificationCard_clear-button__-RzMj","closeWrapper":"NotificationCard_close-wrapper__BVl8x"};
+var css$q = {"root":"NotificationCard_root__HP4NM","icon-wrapper":"NotificationCard_icon-wrapper__FZUAl","notification-wrapper":"NotificationCard_notification-wrapper__L-YsE","action-wrapper":"NotificationCard_action-wrapper__MahuR","action-link":"NotificationCard_action-link__DXfp7","close-icon":"NotificationCard_close-icon__p0MvI","main-path":"NotificationCard_main-path__yWH2j","content":"NotificationCard_content__O4mCt","clear-button":"NotificationCard_clear-button__-RzMj","close-wrapper":"NotificationCard_close-wrapper__BVl8x","iconWrapper":"NotificationCard_icon-wrapper__FZUAl","notificationWrapper":"NotificationCard_notification-wrapper__L-YsE","actionWrapper":"NotificationCard_action-wrapper__MahuR","actionLink":"NotificationCard_action-link__DXfp7","closeIcon":"NotificationCard_close-icon__p0MvI","mainPath":"NotificationCard_main-path__yWH2j","clearButton":"NotificationCard_clear-button__-RzMj","closeWrapper":"NotificationCard_close-wrapper__BVl8x"};
 
 class NotificationCard extends React__namespace.default.Component {
     constructor() {
@@ -1108,75 +1175,201 @@ class NotificationCard extends React__namespace.default.Component {
         (_b = this.notificationCardNode) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.props.refreshTimer);
     }
     render() {
-        return (React__namespace.default.createElement("div", { role: 'alert', className: cx__default.default(css$i.notificationWrapper, 'notification-card-vars', `notification-card-color-${this.props.color}`, css$i.root, this.props.cx), ref: (el) => this.notificationCardNode = el },
-            React__namespace.default.createElement("div", { className: css$i.mainPath },
-                this.props.icon && React__namespace.default.createElement("div", { className: css$i.iconWrapper },
-                    React__namespace.default.createElement(uuiComponents.IconContainer, { icon: this.props.icon, cx: css$i.actionIcon })),
-                React__namespace.default.createElement("div", { className: css$i.content },
+        return (React__namespace.default.createElement("div", { role: 'alert', className: cx__default.default(css$q.notificationWrapper, 'notification-card-vars', `notification-card-color-${this.props.color}`, css$q.root, this.props.cx), ref: (el) => this.notificationCardNode = el },
+            React__namespace.default.createElement("div", { className: css$q.mainPath },
+                this.props.icon && React__namespace.default.createElement("div", { className: css$q.iconWrapper },
+                    React__namespace.default.createElement(uuiComponents.IconContainer, { icon: this.props.icon, cx: css$q.actionIcon })),
+                React__namespace.default.createElement("div", { className: css$q.content },
                     this.props.children,
-                    this.props.actions && React__namespace.default.createElement("div", { className: css$i.actionWrapper }, this.props.actions.map((action) => {
-                        return React__namespace.default.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$i.actionLink, size: '36' });
+                    this.props.actions && React__namespace.default.createElement("div", { className: css$q.actionWrapper }, this.props.actions.map((action) => {
+                        return React__namespace.default.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$q.actionLink, size: '36' });
                     }))),
-                this.props.onClose && React__namespace.default.createElement("div", { className: css$i.closeWrapper },
-                    React__namespace.default.createElement(IconButton, { icon: ForwardRef$6, color: 'default', onClick: this.props.onClose, cx: css$i.closeIcon })))));
+                this.props.onClose && React__namespace.default.createElement("div", { className: css$q.closeWrapper },
+                    React__namespace.default.createElement(IconButton, { icon: ForwardRef$k, color: 'default', onClick: this.props.onClose, cx: css$q.closeIcon })))));
     }
 }
-const WarningNotification = (props) => React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$9, color: 'warning' }, props, { cx: cx__default.default(props.cx) }));
-const SuccessNotification = (props) => React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$a, color: 'success' }, props, { cx: cx__default.default(props.cx) }));
-const HintNotification = (props) => React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$7, color: 'info' }, props, { cx: cx__default.default(props.cx) }));
-const ErrorNotification = (props) => React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$8, color: 'error' }, props, { cx: cx__default.default(props.cx) }));
+const WarningNotification = (props) => React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$n, color: 'warning' }, props, { cx: cx__default.default(props.cx) }));
+const SuccessNotification = (props) => React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$o, color: 'success' }, props, { cx: cx__default.default(props.cx) }));
+const HintNotification = (props) => React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$l, color: 'info' }, props, { cx: cx__default.default(props.cx) }));
+const ErrorNotification = (props) => React__namespace.default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$m, color: 'error' }, props, { cx: cx__default.default(props.cx) }));
 class ClearNotification extends React__namespace.default.Component {
     render() {
-        return React__namespace.default.createElement("div", { className: cx__default.default(css$i.notificationWrapper, css$i.clearButton) },
+        return React__namespace.default.createElement("div", { className: cx__default.default(css$q.notificationWrapper, css$q.clearButton) },
             React__namespace.default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => this.context.uuiNotifications.clearAll() }));
     }
 }
 ClearNotification.contextType = uuiCore.UuiContext;
 
-var css$h = {"root":"Tooltip_root__zZwnu"};
+var css$p = {"root":"Tooltip_root__zZwnu"};
 
 function applyTooltipMods(mods) {
     return [
-        'tooltip-vars',
-        css$h.root,
+        `tooltip-${mods.color}`,
+        css$p.root,
     ];
 }
 const Tooltip = uuiCore.withMods(uuiComponents.Tooltip, applyTooltipMods);
 
-var css$g = {"root":"LabeledInput_root__xDC2q","size-24":"LabeledInput_size-24__0LWBQ","size-30":"LabeledInput_size-30__KDnLe","size-36":"LabeledInput_size-36__4qHf7","size-42":"LabeledInput_size-42__zo6a7","size-48":"LabeledInput_size-48__3NqJt","size24":"LabeledInput_size-24__0LWBQ","size30":"LabeledInput_size-30__KDnLe","size36":"LabeledInput_size-36__4qHf7","size42":"LabeledInput_size-42__zo6a7","size48":"LabeledInput_size-48__3NqJt"};
+var css$o = {"root":"LabeledInput_root__xDC2q","size-24":"LabeledInput_size-24__0LWBQ","size-30":"LabeledInput_size-30__KDnLe","size-36":"LabeledInput_size-36__4qHf7","size-42":"LabeledInput_size-42__zo6a7","size-48":"LabeledInput_size-48__3NqJt","size24":"LabeledInput_size-24__0LWBQ","size30":"LabeledInput_size-30__KDnLe","size36":"LabeledInput_size-36__4qHf7","size42":"LabeledInput_size-42__zo6a7","size48":"LabeledInput_size-48__3NqJt"};
 
-const defaultSize$4 = '36';
+const defaultSize$6 = '36';
 function applyLabeledInputMods(mods) {
     return [
-        'labeled-input-vars',
-        css$g.root,
-        css$g['size-' + (mods.size || defaultSize$4)],
+        css$o.root,
+        css$o['size-' + (mods.size || defaultSize$6)],
     ];
 }
 const LabeledInput = uuiCore.withMods(uuiComponents.LabeledInput, applyLabeledInputMods, (props) => ({
     Tooltip,
-    infoIcon: systemIcons[props.size || defaultSize$4].help,
+    infoIcon: systemIcons[props.size || defaultSize$6].help,
 }));
 
-var css$f = {"root":"RadioGroup_root__uLWIn"};
+var css$n = {"root":"RadioGroup_root__uLWIn"};
 
-const RadioGroup = uuiCore.withMods(uuiComponents.RadioGroup, () => [css$f.root], () => ({ RadioInput }));
+const RadioGroup = uuiCore.withMods(uuiComponents.RadioGroup, () => [css$n.root], () => ({ RadioInput }));
 
 function applyScrollBarsMods() {
     return [
-        'scroll-bars-vars',
+        'uui-scroll-bars',
+        'uui-shadow-top',
+        'uui-shadow-bottom',
     ];
 }
 const ScrollBars = uuiCore.withMods(uuiComponents.ScrollBars, applyScrollBarsMods);
 
-function applyVirtualListMods() {
+const VirtualList = uuiComponents.VirtualList;
+
+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$m = {"root":"NumericInput_root__vElno","size-24":"NumericInput_size-24__9pSyj","size-30":"NumericInput_size-30__kfXj0","size-36":"NumericInput_size-36__tYgRe","size-42":"NumericInput_size-42__RoV0p","size-48":"NumericInput_size-48__wyaYa","mode-form":"NumericInput_mode-form__2EKWT","mode-cell":"NumericInput_mode-cell__oJI4L","size24":"NumericInput_size-24__9pSyj","size30":"NumericInput_size-30__kfXj0","size36":"NumericInput_size-36__tYgRe","size42":"NumericInput_size-42__RoV0p","size48":"NumericInput_size-48__wyaYa","modeForm":"NumericInput_mode-form__2EKWT","modeCell":"NumericInput_mode-cell__oJI4L"};
+
+const defaultSize$5 = "36";
+const defaultMode$3 = exports.EditMode.FORM;
+function applyNumericInputMods(mods) {
+    return [
+        textInputCss.root,
+        css$m.root,
+        css$m["size-" + (mods.size || defaultSize$5)],
+        textInputCss["size-" + (mods.size || defaultSize$5)],
+        textInputCss["mode-" + (mods.mode || defaultMode$3)],
+    ];
+}
+const NumericInput = uuiCore.withMods(uuiComponents.NumericInput, applyNumericInputMods, (props) => {
+    var _a, _b;
+    return ({
+        upIcon: systemIcons[props.size || defaultSize$5].foldingArrow,
+        downIcon: systemIcons[props.size || defaultSize$5].foldingArrow,
+        align: (_a = props.align) !== null && _a !== void 0 ? _a : (props.mode === "cell" ? "right" : "left"),
+        disableArrows: (_b = props.disableArrows) !== null && _b !== void 0 ? _b : props.mode === "cell",
+    });
+});
+
+var css$l = {"root":"TextArea_root__rb0Et","mode-form":"TextArea_mode-form__1DZlL","mode-cell":"TextArea_mode-cell__KthXC","mode-inline":"TextArea_mode-inline__dZEPS","size-24":"TextArea_size-24__-1cgl","size-30":"TextArea_size-30__B2Zjq","size-36":"TextArea_size-36__r2jj6","size-42":"TextArea_size-42__G6PPY","size-48":"TextArea_size-48__1yQdt","modeForm":"TextArea_mode-form__1DZlL","modeCell":"TextArea_mode-cell__KthXC","modeInline":"TextArea_mode-inline__dZEPS","size24":"TextArea_size-24__-1cgl","size30":"TextArea_size-30__B2Zjq","size36":"TextArea_size-36__r2jj6","size42":"TextArea_size-42__G6PPY","size48":"TextArea_size-48__1yQdt"};
+
+const defaultSize$4 = '36';
+const defaultMode$2 = exports.EditMode.FORM;
+function applyTextAreaMods(mods) {
+    return [
+        css$l.root,
+        css$l['size-' + (mods.size || defaultSize$4)],
+        css$l['mode-' + (mods.mode || defaultMode$2)],
+    ];
+}
+const TextArea = uuiCore.withMods(uuiComponents.TextArea, applyTextAreaMods, props => ({
+    autoSize: props.mode === exports.EditMode.CELL ? true : props.autoSize,
+    maxLength: props.mode === exports.EditMode.CELL ? undefined : props.maxLength,
+}));
+
+var css$k = {"root":"DatePicker_root__kqFyh"};
+
+var calendarCss = {"root":"Calendar_root__Vh71D"};
+
+function applyDatePickerBodyMods() {
+    return [
+        css$k.root,
+        calendarCss.root,
+    ];
+}
+const DatePickerBody = uuiCore.withMods(uuiComponents.DatePickerBody, applyDatePickerBodyMods, () => ({ navIconLeft: ForwardRef$K, navIconRight: ForwardRef$K }));
+
+const defaultMode$1 = exports.EditMode.FORM;
+class DatePicker extends uuiComponents.BaseDatePicker {
+    constructor() {
+        super(...arguments);
+        this.renderInput = (props) => {
+            var _a;
+            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 })));
+        };
+    }
+    renderBody(props) {
+        var _a, _b, _c;
+        return React__namespace.default.createElement(DropdownContainer, Object.assign({}, props),
+            React__namespace.default.createElement(DatePickerBody, { cx: uuiCore.cx(this.props.bodyCx), filter: this.props.filter, value: this.getValue(), setSelectedDate: this.setSelectedDate, setDisplayedDateAndView: this.setDisplayedDateAndView, changeIsOpen: this.onToggle, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.body }), (_c = (_b = this.props).renderFooter) === null || _c === void 0 ? void 0 :
+            _c.call(_b));
+    }
+}
+
+function applyDateSelectionMods() {
     return [
-        'scroll-bars-vars',
+        calendarCss.root,
     ];
 }
-const VirtualList = uuiCore.withMods(uuiComponents.VirtualList, applyVirtualListMods);
+const Calendar = uuiCore.withMods(uuiComponents.Calendar, applyDateSelectionMods);
+
+var css$j = {"dropdown-container":"RangeDatePicker_dropdown-container__GJh6o","container":"RangeDatePicker_container__Kz2FS","button-group":"RangeDatePicker_button-group__a-twv","counter":"RangeDatePicker_counter__rNj2e","date-input":"RangeDatePicker_date-input__2aXJj","size-24":"RangeDatePicker_size-24__64v-x","size-30":"RangeDatePicker_size-30__7OPWW","size-36":"RangeDatePicker_size-36__urHhS","size-42":"RangeDatePicker_size-42__VMCut","size-48":"RangeDatePicker_size-48__YHcLe","date-input-group":"RangeDatePicker_date-input-group__CGdCd","separator":"RangeDatePicker_separator__qmCk8","mode-form":"RangeDatePicker_mode-form__o0e0M","mode-cell":"RangeDatePicker_mode-cell__neiVz","dropdownContainer":"RangeDatePicker_dropdown-container__GJh6o","buttonGroup":"RangeDatePicker_button-group__a-twv","dateInput":"RangeDatePicker_date-input__2aXJj","size24":"RangeDatePicker_size-24__64v-x","size30":"RangeDatePicker_size-30__7OPWW","size36":"RangeDatePicker_size-36__urHhS","size42":"RangeDatePicker_size-42__VMCut","size48":"RangeDatePicker_size-48__YHcLe","dateInputGroup":"RangeDatePicker_date-input-group__CGdCd","modeForm":"RangeDatePicker_mode-form__o0e0M","modeCell":"RangeDatePicker_mode-cell__neiVz"};
+
+const defaultValue = { from: null, to: null };
+class RangeDatePicker extends uuiComponents.BaseRangeDatePicker {
+    constructor() {
+        super(...arguments);
+        this.renderInput = (props) => {
+            var _a, _b;
+            return (React__namespace.createElement("div", { className: cx__default.default(this.props.inputCx, css$j.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(this.props.bodyCx, css$j.dateInput, css$j['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$j.separator }),
+                React__namespace.createElement(TextInput, { cx: cx__default.default(this.props.bodyCx, css$j.dateInput, css$j['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$j.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 rangeCss = {"root":"RangeDatePickerBody_root__CCVfb"};
 
-var css$e = {"body":"DataPickerBody_body__9Atow","modal":"DataPickerBody_modal__zvOE2","search":"DataPickerBody_search__mqXFa","checkbox":"DataPickerBody_checkbox__EFs7y","search-wrapper":"DataPickerBody_search-wrapper__UeG2b","search-size-24":"DataPickerBody_search-size-24__WfozU","search-size-30":"DataPickerBody_search-size-30__cziAV","search-size-36":"DataPickerBody_search-size-36__gx2sy","search-size-42":"DataPickerBody_search-size-42__Q-zy9","no-found-size-24":"DataPickerBody_no-found-size-24__4RC9-","no-found-size-30":"DataPickerBody_no-found-size-30__M8eYW","no-found-size-36":"DataPickerBody_no-found-size-36__jr82u","no-found-size-42":"DataPickerBody_no-found-size-42__9WVA5","searchWrapper":"DataPickerBody_search-wrapper__UeG2b","searchSize24":"DataPickerBody_search-size-24__WfozU","searchSize30":"DataPickerBody_search-size-30__cziAV","searchSize36":"DataPickerBody_search-size-36__gx2sy","searchSize42":"DataPickerBody_search-size-42__Q-zy9","noFoundSize24":"DataPickerBody_no-found-size-24__4RC9-","noFoundSize30":"DataPickerBody_no-found-size-30__M8eYW","noFoundSize36":"DataPickerBody_no-found-size-36__jr82u","noFoundSize42":"DataPickerBody_no-found-size-42__9WVA5"};
+var calendarPresetsCss = {"root":"CalendarPresets_root__5O668"};
+
+function applyRangeDatePickerBodyMods() {
+    return [
+        css$k.root,
+        rangeCss.root,
+        calendarCss.root,
+        calendarPresetsCss.root,
+    ];
+}
+const RangeDatePickerBody = uuiCore.withMods(uuiComponents.RangeDatePickerBody, applyRangeDatePickerBodyMods, () => ({ navIconLeft: ForwardRef$K, navIconRight: ForwardRef$K }));
+
+var css$i = {"blocker":"DropMarker_blocker__x-t-D","marker":"DropMarker_marker__5weO4","top":"DropMarker_top__a-UDx","bottom":"DropMarker_bottom__kUP91","left":"DropMarker_left__w5JwO","right":"DropMarker_right__zAmSs","inside":"DropMarker_inside__SfmMo"};
+
+class DropMarker extends React__namespace.Component {
+    render() {
+        return this.props.isDndInProgress ? React__namespace.createElement(React__namespace.Fragment, null,
+            this.props.enableBlocker && React__namespace.createElement("div", { className: css$i.blocker }),
+            React__namespace.createElement("div", { className: cx__default.default({
+                    [css$i.marker]: true,
+                    [css$i[this.props.position]]: true,
+                    [this.props.cx]: !!this.props.cx,
+                }) })) : null;
+    }
+}
+
+var css$h = {"body":"DataPickerBody_body__9Atow","multi":"DataPickerBody_multi__sToHj","modal":"DataPickerBody_modal__zvOE2","search-wrapper":"DataPickerBody_search-wrapper__UeG2b","checkbox":"DataPickerBody_checkbox__EFs7y","no-found-size-24":"DataPickerBody_no-found-size-24__4RC9-","no-found-size-30":"DataPickerBody_no-found-size-30__M8eYW","no-found-size-36":"DataPickerBody_no-found-size-36__jr82u","no-found-size-42":"DataPickerBody_no-found-size-42__9WVA5","searchWrapper":"DataPickerBody_search-wrapper__UeG2b","noFoundSize24":"DataPickerBody_no-found-size-24__4RC9-","noFoundSize30":"DataPickerBody_no-found-size-30__M8eYW","noFoundSize36":"DataPickerBody_no-found-size-36__jr82u","noFoundSize42":"DataPickerBody_no-found-size-42__9WVA5"};
 
 class DataPickerBody extends uuiComponents.PickerBodyBase {
     constructor() {
@@ -1184,29 +1377,25 @@ class DataPickerBody extends uuiComponents.PickerBodyBase {
         this.lens = uuiCore.Lens.onEditableComponent(this);
         this.searchLens = this.lens.prop('search');
     }
-    renderNoFound() {
+    renderNotFound() {
         if (this.props.renderNotFound) {
             return this.props.renderNotFound();
         }
-        return React__namespace.default.createElement(uuiComponents.FlexCell, { cx: css$e[`no-found-size-${this.props.searchSize || 36}`], grow: 1, textAlign: 'center' },
+        return React__namespace.default.createElement(uuiComponents.FlexCell, { cx: css$h[`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() {
-        this.props.value;
         const searchSize = uuiCore.isMobile() ? '48' : (this.props.searchSize || '36');
-        const searchClass = uuiCore.cx(css$e.searchWrapper, css$e[`search-size-${searchSize}`]);
         return React__namespace.default.createElement(React__namespace.default.Fragment, null,
-            this.showSearch() && (React__namespace.default.createElement("div", { key: 'search', className: searchClass },
+            this.showSearch() && (React__namespace.default.createElement("div", { key: 'search', className: css$h.searchWrapper },
                 React__namespace.default.createElement(uuiComponents.FlexCell, { grow: 1 },
-                    React__namespace.default.createElement(SearchInput, Object.assign({ cx: css$e.search, placeholder: i18n.dataPickerBody.searchPlaceholder }, this.searchLens.toProps(), { onKeyDown: this.searchKeyDown, size: searchSize }))))),
-            React__namespace.default.createElement(FlexRow, { key: 'body', cx: uuiCore.cx(css$e.body, css$e[this.props.editMode]), 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.renderNoFound()));
+                    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$h.body, css$h[this.props.editMode], css$h[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()));
     }
 }
 
-var css$d = {"footer-wrapper":"DataPickerFooter_footer-wrapper__Us28N","footerWrapper":"DataPickerFooter_footer-wrapper__Us28N"};
-
 const switchSizes = {
     '24': '12',
     '36': '18',
@@ -1222,7 +1411,7 @@ const DataPickerFooterImpl = (props) => {
         if (!e.shiftKey && e.key === 'Tab')
             e.preventDefault();
     };
-    return (React__namespace.default.createElement(FlexRow, { padding: '12', cx: cx__default.default(css$d.footerWrapper) },
+    return (React__namespace.default.createElement(FlexRow, { padding: '12' },
         !props.hideShowOnlySelected && React__namespace.default.createElement(Switch, { size: switchSize, value: showSelected.value, isDisabled: !hasSelection, onValueChange: showSelected.onValueChange, label: i18n.pickerInput.showOnlySelectedLabel }),
         React__namespace.default.createElement(FlexSpacer, null),
         view.selectAll && (React__namespace.default.createElement(FlexCell, { width: 'auto', alignSelf: 'center' },
@@ -1234,44 +1423,44 @@ const DataPickerFooterImpl = (props) => {
 };
 const DataPickerFooter = React__namespace.default.memo(DataPickerFooterImpl);
 
-var css$c = {"header":"DataPickerHeader_header__UDMhr","close":"DataPickerHeader_close__30pW6"};
+var css$g = {"header":"DataPickerHeader_header__UDMhr","close":"DataPickerHeader_close__30pW6"};
 
-var _path$4;
-function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+var _path$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 SvgNavigationClose24 = function SvgNavigationClose24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$5 = /*#__PURE__*/React.forwardRef(SvgNavigationClose24);
+var ForwardRef$j = /*#__PURE__*/React.forwardRef(SvgNavigationClose24);
 
 const DataPickerHeaderImpl = props => {
     const title = props.title ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
-    return (React__namespace.default.createElement(FlexRow, { alignItems: 'center', borderBottom: true, size: "48", cx: css$c.header },
+    return (React__namespace.default.createElement(FlexRow, { alignItems: 'center', borderBottom: true, size: "48", cx: css$g.header },
         React__namespace.default.createElement(Text, { font: 'semibold' }, title),
-        React__namespace.default.createElement(IconButton, { icon: ForwardRef$5, onClick: () => { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$c.close })));
+        React__namespace.default.createElement(IconButton, { icon: ForwardRef$j, onClick: () => { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$g.close })));
 };
 const DataPickerHeader = React__namespace.default.memo(DataPickerHeaderImpl);
 
-var _defs, _use;
-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 _defs$1, _use;
+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 SvgTreeFoldingArrow = function SvgTreeFoldingArrow(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     ref: ref
-  }, props), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _defs$1 || (_defs$1 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("path", {
     id: "a",
     d: "M6.056 6.998a.997.997 0 0 1-.769-.29L.293 1.712a1 1 0 0 1 0-1.414L.299.293a1 1 0 0 1 1.414 0L6 4.58 10.288.293c.39-.39 1.023-.39 1.42.006a1 1 0 0 1 0 1.414L6.712 6.707a.993.993 0 0 1-.657.291z"
   }))), _use || (_use = /*#__PURE__*/React__namespace.createElement("use", {
@@ -1282,173 +1471,703 @@ var SvgTreeFoldingArrow = function SvgTreeFoldingArrow(props, ref) {
     fillRule: "evenodd"
   })));
 };
-var ForwardRef$4 = /*#__PURE__*/React.forwardRef(SvgTreeFoldingArrow);
+var ForwardRef$i = /*#__PURE__*/React.forwardRef(SvgTreeFoldingArrow);
+
+var css$f = {"cell":"DataTableCell_cell__VgHTT","wrapper":"DataTableCell_wrapper__6hBNx","align-widgets-top":"DataTableCell_align-widgets-top__7LNVl","size-24":"DataTableCell_size-24__g6m7O","folding-arrow":"DataTableCell_folding-arrow__6iI4s","size-30":"DataTableCell_size-30__hpjkm","size-36":"DataTableCell_size-36__8qiBq","size-42":"DataTableCell_size-42__jJMhr","size-48":"DataTableCell_size-48__XXrAx","size-60":"DataTableCell_size-60__0XLPh","align-widgets-center":"DataTableCell_align-widgets-center__VXHNb","padding-12":"DataTableCell_padding-12__xvGe5","padding-24":"DataTableCell_padding-24__r322g","padding-left-12":"DataTableCell_padding-left-12__g6QSx","padding-left-24":"DataTableCell_padding-left-24__vm-bI","padding-right-24":"DataTableCell_padding-right-24__CjNWh","drag-handle":"DataTableCell_drag-handle__Ge7UM","checkbox":"DataTableCell_checkbox__sY2kh","indent":"DataTableCell_indent__lcZWO","folding-arrow-12":"DataTableCell_folding-arrow-12__mVKaH","folding-arrow-18":"DataTableCell_folding-arrow-18__hiEIW","alignWidgetsTop":"DataTableCell_align-widgets-top__7LNVl","size24":"DataTableCell_size-24__g6m7O","foldingArrow":"DataTableCell_folding-arrow__6iI4s","size30":"DataTableCell_size-30__hpjkm","size36":"DataTableCell_size-36__8qiBq","size42":"DataTableCell_size-42__jJMhr","size48":"DataTableCell_size-48__XXrAx","size60":"DataTableCell_size-60__0XLPh","alignWidgetsCenter":"DataTableCell_align-widgets-center__VXHNb","padding12":"DataTableCell_padding-12__xvGe5","padding24":"DataTableCell_padding-24__r322g","paddingLeft12":"DataTableCell_padding-left-12__g6QSx","paddingLeft24":"DataTableCell_padding-left-24__vm-bI","paddingRight24":"DataTableCell_padding-right-24__CjNWh","dragHandle":"DataTableCell_drag-handle__Ge7UM","foldingArrow12":"DataTableCell_folding-arrow-12__mVKaH","foldingArrow18":"DataTableCell_folding-arrow-18__hiEIW"};
+
+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$f.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$f.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$f.indent, style: { marginLeft: (row.indent - 1) * 24 } }, row.isFoldable &&
+            React__namespace.createElement(IconContainer, { key: 'icon', icon: ForwardRef$i, cx: [css$f.foldingArrow, css$f[`folding-arrow-${additionalItemSize}`], uuiCore.uuiMarkers.clickable], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), color: 'default' }))));
+}
+function DataTableCell(props) {
+    var _a;
+    props = Object.assign({}, props);
+    if (props.isFirstColumn) {
+        props.addons = React__namespace.createElement(DataTableRowAddons, Object.assign({}, props));
+    }
+    props.renderPlaceholder = props.renderPlaceholder || (() => (React__namespace.createElement(Text, { key: 't', size: props.size != '60' ? props.size : '48' },
+        React__namespace.createElement(TextPlaceholder, null))));
+    props.renderTooltip = (tooltipProps) => React__namespace.createElement(Tooltip, Object.assign({ color: 'critical' }, tooltipProps));
+    const isEditable = !!props.onValueChange;
+    props.border = (_a = props.border) !== null && _a !== void 0 ? _a : (isEditable ? true : null);
+    props.cx = [
+        'data-table-cell',
+        props.cx,
+        css$f.cell,
+        css$f['size-' + (props.size || '36')],
+        css$f[`padding-${props.padding || ((isEditable && !props.rowProps.isLoading) && '0') || '12'}`],
+        props.isFirstColumn && css$f[`padding-left-${props.padding || '24'}`],
+        props.isLastColumn && css$f['padding-right-24'],
+        css$f[`align-widgets-${props.alignActions || 'top'}`],
+        props.background && `background-${props.background}`,
+        props.border && 'uui-dt-cell-border',
+    ];
+    return React__namespace.createElement(uuiComponents.DataTableCell, Object.assign({}, props));
+}
+
+var css$e = {"root":"DataTableRow_root__ThnfZ","size-24":"DataTableRow_size-24__mjGKU","size-30":"DataTableRow_size-30__Kb8nP","size-36":"DataTableRow_size-36__dolOJ","size-48":"DataTableRow_size-48__DpAQX","size-60":"DataTableRow_size-60__k0ZKS","background-white":"DataTableRow_background-white__GKFMn","size24":"DataTableRow_size-24__mjGKU","size30":"DataTableRow_size-30__Kb8nP","size36":"DataTableRow_size-36__dolOJ","size48":"DataTableRow_size-48__DpAQX","size60":"DataTableRow_size-60__k0ZKS","backgroundWhite":"DataTableRow_background-white__GKFMn"};
+
+// 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.
+const renderCell = (props) => {
+    const mods = props.rowProps;
+    return React__namespace.createElement(DataTableCell, Object.assign({ size: mods.size }, props));
+};
+const renderDropMarkers = (props) => React__namespace.createElement(DropMarker, Object.assign({}, props, { enableBlocker: true }));
+const propsMods = { renderCell, renderDropMarkers };
+const DataTableRow = uuiCore.withMods(uuiComponents.DataTableRow, ({ borderBottom = true, background, size }) => {
+    return [
+        css$e.root,
+        borderBottom && 'uui-dt-row-border',
+        css$e['size-' + (size || '36')],
+        css$e['background-' + (background || 'default')],
+    ];
+}, () => propsMods);
 
-var css$b = {"cell":"DataTableCell_cell__VgHTT","wrapper":"DataTableCell_wrapper__6hBNx","align-widgets-top":"DataTableCell_align-widgets-top__7LNVl","size-24":"DataTableCell_size-24__g6m7O","folding-arrow":"DataTableCell_folding-arrow__6iI4s","size-30":"DataTableCell_size-30__hpjkm","size-36":"DataTableCell_size-36__8qiBq","size-42":"DataTableCell_size-42__jJMhr","size-48":"DataTableCell_size-48__XXrAx","size-60":"DataTableCell_size-60__0XLPh","align-widgets-center":"DataTableCell_align-widgets-center__VXHNb","padding-12":"DataTableCell_padding-12__xvGe5","padding-24":"DataTableCell_padding-24__r322g","padding-left-12":"DataTableCell_padding-left-12__g6QSx","padding-left-24":"DataTableCell_padding-left-24__vm-bI","padding-right-24":"DataTableCell_padding-right-24__CjNWh","drag-handle":"DataTableCell_drag-handle__Ge7UM","checkbox":"DataTableCell_checkbox__sY2kh","indent":"DataTableCell_indent__lcZWO","folding-arrow-12":"DataTableCell_folding-arrow-12__mVKaH","folding-arrow-18":"DataTableCell_folding-arrow-18__hiEIW","alignWidgetsTop":"DataTableCell_align-widgets-top__7LNVl","size24":"DataTableCell_size-24__g6m7O","foldingArrow":"DataTableCell_folding-arrow__6iI4s","size30":"DataTableCell_size-30__hpjkm","size36":"DataTableCell_size-36__8qiBq","size42":"DataTableCell_size-42__jJMhr","size48":"DataTableCell_size-48__XXrAx","size60":"DataTableCell_size-60__0XLPh","alignWidgetsCenter":"DataTableCell_align-widgets-center__VXHNb","padding12":"DataTableCell_padding-12__xvGe5","padding24":"DataTableCell_padding-24__r322g","paddingLeft12":"DataTableCell_padding-left-12__g6QSx","paddingLeft24":"DataTableCell_padding-left-24__vm-bI","paddingRight24":"DataTableCell_padding-right-24__CjNWh","dragHandle":"DataTableCell_drag-handle__Ge7UM","foldingArrow12":"DataTableCell_folding-arrow-12__mVKaH","foldingArrow18":"DataTableCell_folding-arrow-18__hiEIW"};
+var css$d = {"header-cell":"DataTableHeaderRow_header-cell__KtC6r","config-icon":"DataTableHeaderRow_config-icon__w0uLR","headerCell":"DataTableHeaderRow_header-cell__KtC6r","configIcon":"DataTableHeaderRow_config-icon__w0uLR"};
 
-class DataTableCell extends React__namespace.Component {
+var _path$h;
+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 SvgActionSettings18 = function SvgActionSettings18(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$h || (_path$h = /*#__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$h = /*#__PURE__*/React.forwardRef(SvgActionSettings18);
+
+const DataTableHeaderRow = uuiCore.withMods(uuiComponents.DataTableHeaderRow, mods => [css$d.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$d.configIcon, color: 'default', icon: ForwardRef$h }),
+}));
+
+var css$c = {"cell":"DataTableHeaderCell_cell__8JnbB","sort-icon":"DataTableHeaderCell_sort-icon__Wi-rh","dropdown-icon":"DataTableHeaderCell_dropdown-icon__-vO3u","infoIcon":"DataTableHeaderCell_infoIcon__1Ang4","resizable":"DataTableHeaderCell_resizable__sNvwo","size-24":"DataTableHeaderCell_size-24__ntP26","size-30":"DataTableHeaderCell_size-30__znptx","size-36":"DataTableHeaderCell_size-36__m5DC6","size-42":"DataTableHeaderCell_size-42__YX4yM","size-48":"DataTableHeaderCell_size-48__YCyCX","padding-left-24":"DataTableHeaderCell_padding-left-24__sZhuC","padding-right-24":"DataTableHeaderCell_padding-right-24__5Ne7M","caption":"DataTableHeaderCell_caption__pF7VF","checkbox":"DataTableHeaderCell_checkbox__sg2V-","icon":"DataTableHeaderCell_icon__XDYeh","icon-cell":"DataTableHeaderCell_icon-cell__t-wBF","align-right":"DataTableHeaderCell_align-right__JzZ-h","align-center":"DataTableHeaderCell_align-center__BegNE","tooltip-wrapper":"DataTableHeaderCell_tooltip-wrapper__ILECw","cell-tooltip":"DataTableHeaderCell_cell-tooltip__XAI4G","upper-case":"DataTableHeaderCell_upper-case__YCQ24","font-size-14":"DataTableHeaderCell_font-size-14__3JeGt","resize-mark":"DataTableHeaderCell_resize-mark__Vlv3w","draggable":"DataTableHeaderCell_draggable__c0dne","ghost":"DataTableHeaderCell_ghost__Yjb5B","is-dragged-out":"DataTableHeaderCell_is-dragged-out__HzBd6","dnd-marker-left":"DataTableHeaderCell_dnd-marker-left__0pkPC","dnd-marker-right":"DataTableHeaderCell_dnd-marker-right__1i9gh","sortIcon":"DataTableHeaderCell_sort-icon__Wi-rh","dropdownIcon":"DataTableHeaderCell_dropdown-icon__-vO3u","size24":"DataTableHeaderCell_size-24__ntP26","size30":"DataTableHeaderCell_size-30__znptx","size36":"DataTableHeaderCell_size-36__m5DC6","size42":"DataTableHeaderCell_size-42__YX4yM","size48":"DataTableHeaderCell_size-48__YCyCX","paddingLeft24":"DataTableHeaderCell_padding-left-24__sZhuC","paddingRight24":"DataTableHeaderCell_padding-right-24__5Ne7M","iconCell":"DataTableHeaderCell_icon-cell__t-wBF","alignRight":"DataTableHeaderCell_align-right__JzZ-h","alignCenter":"DataTableHeaderCell_align-center__BegNE","tooltipWrapper":"DataTableHeaderCell_tooltip-wrapper__ILECw","cellTooltip":"DataTableHeaderCell_cell-tooltip__XAI4G","upperCase":"DataTableHeaderCell_upper-case__YCQ24","fontSize14":"DataTableHeaderCell_font-size-14__3JeGt","resizeMark":"DataTableHeaderCell_resize-mark__Vlv3w","isDraggedOut":"DataTableHeaderCell_is-dragged-out__HzBd6","dndMarkerLeft":"DataTableHeaderCell_dnd-marker-left__0pkPC","dndMarkerRight":"DataTableHeaderCell_dnd-marker-right__1i9gh"};
+
+var _path$g;
+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 SvgTableSwap18 = function SvgTableSwap18(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$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M6 1 2 5h3v7h2V5h3L6 1zm7 12V6h-2v7H8l4 4 4-4h-3z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$g = /*#__PURE__*/React.forwardRef(SvgTableSwap18);
+
+var _path$f;
+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 SvgTableSortAsc18 = function SvgTableSortAsc18(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$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M10 6v10H8V6H5l4-4 4 4h-3z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$f = /*#__PURE__*/React.forwardRef(SvgTableSortAsc18);
+
+var _path$e;
+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 SvgTableSortDesc18 = function SvgTableSortDesc18(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M10 12V2H8v10H5l4 4 4-4h-3z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$e = /*#__PURE__*/React.forwardRef(SvgTableSortDesc18);
+
+var _path$d;
+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 SvgContentFiltration18 = function SvgContentFiltration18(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "m8 14 2 2v-5H8v3zM2 3v2h14V3H2zm6 8h2l6-6H2l6 6z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$d = /*#__PURE__*/React.forwardRef(SvgContentFiltration18);
+
+var _path$c;
+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 SvgNavigationChevronDown18 = function SvgNavigationChevronDown18(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M12.443 6.442 9 9.877 5.558 6.442 4.5 7.5 9 12l4.5-4.5-1.057-1.058z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$c = /*#__PURE__*/React.forwardRef(SvgNavigationChevronDown18);
+
+var _path$b;
+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 SvgNavigationChevronUp18 = function SvgNavigationChevronUp18(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$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "m9 6-4.5 4.5 1.058 1.057L9 8.123l3.443 3.434L13.5 10.5 9 6z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$b = /*#__PURE__*/React.forwardRef(SvgNavigationChevronUp18);
+
+var _path$a;
+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 SvgNotificationInfoOutline18 = function SvgNotificationInfoOutline18(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$a || (_path$a = /*#__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",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$a = /*#__PURE__*/React.forwardRef(SvgNotificationInfoOutline18);
+
+class DataTableHeaderCell extends React__namespace.Component {
     constructor() {
-        var _a, _b, _c;
         super(...arguments);
-        this.hasDepsWidgets = !!(((_b = (_a = this.props.rowProps) === null || _a === void 0 ? void 0 : _a.checkbox) === null || _b === void 0 ? void 0 : _b.isVisible) || ((_c = this.props.rowProps) === null || _c === void 0 ? void 0 : _c.indent));
-        this.isDraggable = () => { var _a, _b; return !!((_b = (_a = this.props.rowProps) === null || _a === void 0 ? void 0 : _a.dnd) === null || _b === void 0 ? void 0 : _b.srcData); };
-        this.getContent = () => {
-            var _a;
-            const row = this.props.rowProps;
-            const additionalItemSize = +this.props.size < 30 ? '12' : '18';
-            const cellContent = row.isLoading
-                ? React__namespace.createElement(Text, { size: this.props.size != '60' ? this.props.size : '48' },
-                    React__namespace.createElement(TextPlaceholder, null))
-                : this.props.column.render(this.props.rowProps.value, this.props.rowProps);
-            return (React__namespace.createElement(React__namespace.Fragment, null,
-                this.props.isFirstColumn && this.isDraggable() && React__namespace.createElement(uuiComponents.DragHandle, { cx: css$b.dragHandle }),
-                this.props.isFirstColumn && ((_a = row === null || row === void 0 ? void 0 : row.checkbox) === null || _a === void 0 ? void 0 : _a.isVisible) && React__namespace.createElement(Checkbox, { key: 'cb', cx: css$b.checkbox, tabIndex: this.props.tabIndex, size: additionalItemSize, value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => row.onCheck(row), isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid }),
-                this.props.isFirstColumn && 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$4, cx: [css$b.foldingArrow, css$b[`folding-arrow-${additionalItemSize}`], uuiCore.uuiMarkers.clickable], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row) }))),
-                cellContent));
+        this.state = {
+            isDropdownOpen: null,
         };
+        this.getTextStyle = () => {
+            if (this.props.textCase === 'upper')
+                return css$c.upperCase;
+            return css$c['font-size-14'];
+        };
+        this.getColumnCaption = () => (React__namespace.createElement("div", { className: css$c.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$c.cellTooltip, offset: [-12, 12] },
+                React__namespace.createElement("div", { className: uuiCore.cx(css$c.iconCell, css$c['align-' + this.props.column.textAlign], uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
+                    React__namespace.createElement(Text, { key: "text", lineHeight: "30", fontSize: "14", size: "30", cx: uuiCore.cx(css$c.caption, this.getTextStyle(), uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaption) }, this.props.column.caption),
+                    this.props.column.info && (React__namespace.createElement(IconButton, { key: "info", cx: uuiCore.cx(css$c.icon, css$c.infoIcon, this.props.sortDirection && css$c.sortIconActive, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: 'secondary', icon: ForwardRef$a })),
+                    this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React__namespace.createElement(IconButton, { key: "sort", cx: uuiCore.cx(css$c.icon, css$c.sortIcon, this.props.sortDirection && css$c.sortIconActive, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: this.props.sortDirection ? 'default' : 'secondary', icon: this.props.sortDirection === 'desc' ? ForwardRef$e : this.props.sortDirection === 'asc' ? ForwardRef$f : ForwardRef$g })),
+                    this.props.isFilterActive && (React__namespace.createElement(IconButton, { key: "filter", cx: uuiCore.cx(css$c.icon, !this.props.sortDirection && css$c.filterIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "default", icon: ForwardRef$d })),
+                    this.props.column.renderFilter && (React__namespace.createElement(IconButton, { key: "dropdown", cx: uuiCore.cx(css$c.icon, css$c.dropdownIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), color: "secondary", icon: this.state.isDropdownOpen ? ForwardRef$b : ForwardRef$c }))))));
+        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$c.checkbox, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCheckbox) })));
+        this.renderResizeMark = (props) => (React__namespace.createElement("div", { onMouseDown: props.onResizeStart, className: uuiCore.cx(css$c.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$c.cell, css$c['size-' + (this.props.size || '36')], this.props.isFirstColumn && css$c[`padding-left-24`], this.props.isLastColumn && css$c['padding-right-24'], this.props.column.cx, this.props.allowColumnsResizing && css$c.resizable, props.isDraggable && css$c.draggable, props.isDragGhost && css$c.ghost, props.isDraggedOut && css$c.isDraggedOut, props.isDndInProgress && css$c['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)));
+        this.renderCellWithFilter = (props) => (React__namespace.createElement(ColumnHeaderDropdown, { isOpen: this.state.isDropdownOpen, isSortable: this.props.column.isSortable, renderTarget: dropdownProps => this.renderCellContent(props, dropdownProps), renderFilter: this.props.renderFilter, onSort: this.props.onSort, sortDirection: this.props.sortDirection, onOpenChange: isDropdownOpen => this.setState({ isDropdownOpen }), title: this.props.column.caption }));
     }
     render() {
-        return (React__namespace.createElement(FlexCell, Object.assign({}, this.props.column, { rawProps: { role: 'cell' }, cx: uuiCore.cx(css$b.cell, this.props.isFirstColumn && this.hasDepsWidgets && css$b.wrapper, css$b['size-' + (this.props.size || '36')], css$b[`padding-${this.props.padding || '12'}`], this.props.isFirstColumn && css$b[`padding-left-${this.props.padding || '24'}`], this.props.isLastColumn && css$b['padding-right-24'], this.props.column.cx, css$b[`align-widgets-${this.props.alignActions || 'top'}`]) }), this.getContent()));
+        return (React__namespace.createElement(uuiComponents.DataTableHeaderCell, Object.assign({}, this.props, { renderCellContent: this.props.column.renderFilter
+                ? this.renderCellWithFilter
+                : this.renderCellContent })));
     }
 }
 
-var _path$3;
-function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-var SvgNavigationMoreVert12 = function SvgNavigationMoreVert12(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+var _path$9, _path2$1, _path3, _path4, _path5, _path6, _g, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14, _path15, _path16, _path17, _path18, _path19, _path20, _path21, _path22, _path23, _path24, _defs;
+function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
+var SvgEmptyTable = function SvgEmptyTable(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
+    width: 232,
+    height: 180,
+    viewBox: "0 0 232 180",
+    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#a)"
+  }, _path$9 || (_path$9 = /*#__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", {
+    d: "m58.069 136.51-.654 4.238-1.27-5.38a58.934 58.934 0 0 0-11.462-4.965l-.083 5.636-2.545-6.393a55.094 55.094 0 0 0-13.655-1.854l.704 6.178-3.356-6.108c-4.151.183-8.256.946-12.195 2.268l2.33 3.525s-2.173-1.597-4.084-2.896a40.951 40.951 0 0 0-10.833 6.285 85.492 85.492 0 0 0 12.575 10.527c2.482-.637 5.127-1.279 5.127-1.279l-3.261 2.537a69.366 69.366 0 0 0 13.283 6.865c2.346-1.353 5.416-3.269 5.416-3.269l-3.554 3.931a42.226 42.226 0 0 0 15.45 2.359l4.259-4.213-1.697 4.001c7.002-.848 14.144-3.902 20.95-10.344-1.621-3.869-5.768-8.073-11.445-11.649Z",
+    fill: "#9BDEFF"
+  })), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M.557 136.978a.413.413 0 0 1 .475-.342l68.549 11.118a.414.414 0 0 1-.133.817L.9 137.453a.415.415 0 0 1-.342-.475Z",
+    fill: "#fff"
+  })), _path4 || (_path4 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M174.887 125.586h-88.1c-2.752 0-5.38-2.234-5.38-4.986V27.534c0-2.752 2.644-4.966 5.38-4.966h88.1c2.752 0 5.4 2.23 5.4 4.966V120.6c0 2.752-2.632 4.986-5.4 4.986Z",
+    fill: "#9BDEFF"
+  })), _path5 || (_path5 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M86.786 22.982c-2.55 0-4.965 2.07-4.965 4.552V120.6c0 2.484 2.4 4.572 4.965 4.572h88.101c2.582 0 4.986-2.089 4.986-4.572V27.534c0-2.464-2.418-4.552-4.986-4.552h-88.1Zm-5.793 4.552c0-3.022 2.874-5.38 5.793-5.38h88.101c2.935 0 5.814 2.374 5.814 5.38V120.6c0 3.021-2.86 5.4-5.814 5.4h-88.1c-2.94 0-5.794-2.381-5.794-5.4V27.534Z",
+    fill: "#1D1E26"
+  })), /*#__PURE__*/React__namespace.createElement("mask", {
+    id: "b",
+    style: {
+      maskType: "alpha"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: 81,
+    y: 22,
+    width: 100,
+    height: 104
+  }, _path6 || (_path6 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M174.887 125.586h-88.1c-2.752 0-5.38-2.234-5.38-4.986V27.534c0-2.752 2.644-4.966 5.38-4.966h88.1c2.752 0 5.4 2.23 5.4 4.966V120.6c0 2.752-2.632 4.986-5.4 4.986Z",
+    fill: "#9BDEFF"
+  }))), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
+    mask: "url(#b)",
     fillRule: "evenodd",
-    d: "M6 4c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1zm0 1c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm0 3c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z",
     clipRule: "evenodd"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M69.817 99.247a.414.414 0 0 1 .585-.003l50.88 50.483a.414.414 0 0 1-.583.588l-50.88-50.483a.414.414 0 0 1-.002-.585ZM72.802 28.407a.414.414 0 0 1 .553.192l63.6 131.172a.413.413 0 1 1-.745.361L72.61 28.96a.414.414 0 0 1 .192-.553Z",
+    fill: "#fff"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M142.576 6.515a.415.415 0 0 1 .087.58L60.185 118.817a.413.413 0 1 1-.665-.491L141.997 6.603a.414.414 0 0 1 .579-.088ZM197.977 60.314c.181.14.214.4.075.58l-76.734 99.311a.414.414 0 0 1-.655-.506l76.734-99.31a.413.413 0 0 1 .58-.075ZM192.316 43.44a.413.413 0 0 1-.103.576L60.089 135.878a.414.414 0 0 1-.473-.68L191.74 43.336a.414.414 0 0 1 .576.104Z",
+    fill: "#fff"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M91.966 11.532a.414.414 0 0 1 .585-.021l129.252 120a.414.414 0 0 1-.563.606l-129.252-120a.414.414 0 0 1-.022-.585ZM75.232 2.769a.414.414 0 0 1 .568.143l93.554 156.828a.414.414 0 1 1-.711.424L75.089 3.336a.414.414 0 0 1 .143-.567ZM125.643.329a.414.414 0 0 1 .584.041l71.81 82.759a.413.413 0 1 1-.625.542L125.602.913a.414.414 0 0 1 .041-.584Z",
+    fill: "#fff"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M67.271 75.369a.414.414 0 0 1 .547-.209l156.745 70.345a.413.413 0 1 1-.339.755L67.479 75.916a.414.414 0 0 1-.208-.547Z",
+    fill: "#fff"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M159.279 8.938a.414.414 0 0 1 .265.522L101.278 187.39a.413.413 0 1 1-.787-.258l58.266-177.93a.414.414 0 0 1 .522-.265Z",
+    fill: "#fff"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M86.786 22.982c-2.55 0-4.965 2.07-4.965 4.552V120.6c0 2.484 2.4 4.572 4.965 4.572h88.101c2.582 0 4.986-2.089 4.986-4.572V27.534c0-2.464-2.418-4.552-4.986-4.552h-88.1Zm-5.793 4.552c0-3.022 2.874-5.38 5.793-5.38h88.101c2.935 0 5.814 2.374 5.814 5.38V120.6c0 3.021-2.86 5.4-5.814 5.4h-88.1c-2.94 0-5.794-2.381-5.794-5.4V27.534Z",
+    fill: "#1D1E26"
+  }))), _path7 || (_path7 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M180.287 30.828H81.39v-3.724a4.966 4.966 0 0 1 4.966-4.966H175.3a4.963 4.963 0 0 1 4.986 4.965v3.725Z",
+    fill: "#fff"
+  })), _path8 || (_path8 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M177.05 22.893a4.548 4.548 0 0 0-1.748-.341H86.356a4.552 4.552 0 0 0-4.552 4.552v3.31h98.069v-3.31a4.55 4.55 0 0 0-2.823-4.211Zm-1.75-1.169a5.375 5.375 0 0 1 4.989 3.316c.272.654.412 1.355.412 2.064v3.724a.414.414 0 0 1-.414.413H81.39a.414.414 0 0 1-.413-.413v-3.724a5.38 5.38 0 0 1 5.379-5.38H175.3Z",
+    fill: "#1D1E26"
+  })), _path9 || (_path9 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M87.324 28.217a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6ZM93.597 28.217a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6ZM99.866 28.217a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6Z",
+    fill: "#1D1E26"
+  })), _path10 || (_path10 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M151.71 47.806H63.614a4.986 4.986 0 0 0-4.986 4.986v93.062a4.986 4.986 0 0 0 4.986 4.986h88.096a4.986 4.986 0 0 0 4.987-4.986V52.792a4.987 4.987 0 0 0-4.987-4.986Z",
+    fill: "#fff"
+  })), _path11 || (_path11 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M63.614 48.22a4.572 4.572 0 0 0-4.572 4.572v93.062a4.572 4.572 0 0 0 4.572 4.572h88.096a4.572 4.572 0 0 0 4.573-4.572V52.792a4.572 4.572 0 0 0-4.573-4.573H63.614Zm-5.4 4.572a5.4 5.4 0 0 1 5.4-5.4h88.096a5.4 5.4 0 0 1 5.4 5.4v93.062a5.4 5.4 0 0 1-5.4 5.4H63.614a5.4 5.4 0 0 1-5.4-5.4V52.792Z",
+    fill: "#1D1E26"
+  })), _path12 || (_path12 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M157.11 56.081H58.214v-3.724a4.986 4.986 0 0 1 4.986-4.965h88.924a4.988 4.988 0 0 1 4.986 4.965v3.724Z",
+    fill: "#008ACE"
+  })), _path13 || (_path13 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M64.566 53.474a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6ZM70.835 53.474a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6ZM77.103 53.474a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6Z",
+    fill: "#1D1E26"
+  })), _path14 || (_path14 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M48.968 36.067a.414.414 0 0 1 .585.018l7.005 7.448a.414.414 0 1 1-.603.567l-7.005-7.448a.414.414 0 0 1 .018-.585ZM46.99 44.047a.414.414 0 0 1 .554-.188l6.269 3.104a.414.414 0 0 1-.367.742l-6.27-3.104a.414.414 0 0 1-.187-.554ZM183.97 9.366a.414.414 0 0 1 .213.545l-2.896 6.62a.414.414 0 0 1-.759-.331l2.897-6.621a.414.414 0 0 1 .545-.213ZM192.373 9.866a.415.415 0 0 1 0 .585l-8.276 8.276a.414.414 0 1 1-.585-.585l8.275-8.276a.415.415 0 0 1 .586 0ZM192.464 19.108a.413.413 0 0 1-.23.538l-6.207 2.483a.414.414 0 0 1-.308-.768l6.207-2.483a.414.414 0 0 1 .538.23ZM182.977 54.848c.228 0 .413.185.413.414v58.345a.414.414 0 1 1-.827 0V55.262c0-.229.185-.414.414-.414Z",
+    fill: "#1D1E26"
+  })), _path15 || (_path15 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M133.371 157.945c23.196 0 42-18.804 42-42s-18.804-42-42-42-42 18.804-42 42 18.804 42 42 42Z",
+    fill: "#008ACE"
+  })), _path16 || (_path16 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M133.371 149.669c18.625 0 33.724-15.099 33.724-33.724 0-18.625-15.099-33.724-33.724-33.724-18.625 0-33.724 15.099-33.724 33.724 0 18.625 15.099 33.724 33.724 33.724Z",
+    fill: "#fff"
+  })), _path17 || (_path17 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M117.312 113.565a3.807 3.807 0 1 0 0-7.614 3.807 3.807 0 0 0 0 7.614ZM149.435 113.565a3.806 3.806 0 1 0 0-7.612 3.806 3.806 0 0 0 0 7.612Z",
+    fill: "#1D1E26"
+  })), _path18 || (_path18 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M133.38 123.952c-4.592 0-8.525 2.259-10.468 5.423a.827.827 0 1 1-1.41-.866c2.27-3.697 6.762-6.212 11.878-6.212 5.108 0 9.646 2.485 11.882 6.22a.827.827 0 1 1-1.42.85c-1.902-3.176-5.863-5.415-10.462-5.415Z",
+    fill: "#1D1E26"
+  })), _path19 || (_path19 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "m170.965 137.356-7.822 9.777 1.668 1.334 7.822-9.777-1.668-1.334Z",
+    fill: "#1D1E26"
+  })), _path20 || (_path20 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M200.774 163.345c.579 2.143-3.331 6.852-5.553 6.939-7.035.277-28.73-23.913-28.73-23.913l4.44-5.553s28.122 16.142 29.843 22.527Z",
+    fill: "#9BDEFF"
+  })), _path21 || (_path21 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M204.424 178.378a6.223 6.223 0 0 0 6.223-6.224 6.224 6.224 0 1 0-6.223 6.224Z",
+    fill: "#9BDEFF"
+  })), _path22 || (_path22 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M199.586 168.269a6.173 6.173 0 0 1 3.311-2.131l-2.123-1.697c-.464 2.069-2.959 4.995-4.837 5.69l2.296 1.837a6.173 6.173 0 0 1 1.353-3.699Z",
+    fill: "#1D1E26"
+  })), _path23 || (_path23 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "m72.357 138.314-3.5 2.955 2.722-5.317a67.379 67.379 0 0 0-5.958-12.509l-4.014 4.514 2.38-7.076a63.412 63.412 0 0 0-9.932-11.611l-3.724 5.549 1.54-7.448a50.152 50.152 0 0 0-11.628-7.179l-.567 4.605s-.675-2.896-1.333-5.38a44.62 44.62 0 0 0-13.315-2.896 96.722 96.722 0 0 0 2.983 17.856c2.483 1.311 5.119 2.751 5.119 2.751l-4.461-.347a79.474 79.474 0 0 0 6.091 15.385c2.897.637 6.745 1.353 6.745 1.353l-5.677.55c2.871 4.965 6.492 9.6 11.069 13.349l6.45-.269-4.191 1.99c6.356 4.49 14.37 7.3 24.48 7.105 1.398-4.332.902-10.816-1.279-17.93Z",
+    fill: "#008ACE"
+  })), _path24 || (_path24 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M24.73 96.184a.414.414 0 0 1 .581.06l48.646 59.751a.413.413 0 1 1-.642.523L24.67 96.766a.414.414 0 0 1 .06-.582Z",
+    fill: "#fff"
+  }))), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "a"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#fff",
+    transform: "translate(.552)",
+    d: "M0 0h230.897v180H0z"
+  })))));
+};
+var ForwardRef$9 = /*#__PURE__*/React.forwardRef(SvgEmptyTable);
+
+var css$b = {"sticky-header":"DataTable_sticky-header__Dt-br","listContainer":"DataTable_listContainer__MJ2d9","table":"DataTable_table__n--u-","no-results":"DataTable_no-results__8wzS9","no-results-icon":"DataTable_no-results-icon__-nnhq","no-results-title":"DataTable_no-results-title__MM7z0","stickyHeader":"DataTable_sticky-header__Dt-br","noResults":"DataTable_no-results__8wzS9","noResultsIcon":"DataTable_no-results-icon__-nnhq","noResultsTitle":"DataTable_no-results-title__MM7z0"};
+
+function DataTable(props) {
+    var _a;
+    const { uuiModals } = uuiCore.useUuiContext();
+    const columnsWithFilters = uuiComponents.useColumnsWithFilters(props.columns, props.filters);
+    const { columns, config, defaultConfig } = uuiCore.useColumnsConfig(columnsWithFilters, (_a = props.value) === null || _a === void 0 ? void 0 : _a.columnsConfig);
+    const renderRow = React__namespace.useCallback((rowProps) => {
+        return React__namespace.createElement(DataTableRow, Object.assign({ key: rowProps.rowKey, size: props.size, borderBottom: props.border }, rowProps));
+    }, []);
+    const rows = props.getRows();
+    const renderedRows = rows.map(row => (props.renderRow || renderRow)(Object.assign(Object.assign({}, row), { columns })));
+    const renderNoResultsBlock = React__namespace.useCallback(() => {
+        var _a;
+        return (React__namespace.createElement("div", { className: css$b.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$b.noResultsIcon, icon: ForwardRef$9 }),
+                React__namespace.createElement(Text, { cx: css$b.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(() => {
+        uuiModals.show(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]);
+    const renderRowsContainer = React__namespace.useCallback(({ listContainerRef, estimatedHeight, offsetY, scrollShadows }) => (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement("div", { className: css$b.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$b.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$b.table), rawProps: {
+                role: 'table',
+                'aria-colcount': columns.length,
+                'aria-rowcount': props.rowsCount,
+            } })));
+}
+
+var styles$1 = {"main-panel":"ColumnsConfigurationModal_main-panel__hCrXd","group-title":"ColumnsConfigurationModal_group-title__UtJIu","group-title-text":"ColumnsConfigurationModal_group-title-text__3hOPf","group-title-badge":"ColumnsConfigurationModal_group-title-badge__4agZV","group-items":"ColumnsConfigurationModal_group-items__g1FUY","no-data":"ColumnsConfigurationModal_no-data__CzFcf","h-divider":"ColumnsConfigurationModal_h-divider__W9MsK","search-area":"ColumnsConfigurationModal_search-area__FGWyb","mainPanel":"ColumnsConfigurationModal_main-panel__hCrXd","groupTitle":"ColumnsConfigurationModal_group-title__UtJIu","groupTitleText":"ColumnsConfigurationModal_group-title-text__3hOPf","groupTitleBadge":"ColumnsConfigurationModal_group-title-badge__4agZV","groupItems":"ColumnsConfigurationModal_group-items__g1FUY","noData":"ColumnsConfigurationModal_no-data__CzFcf","hDivider":"ColumnsConfigurationModal_h-divider__W9MsK","searchArea":"ColumnsConfigurationModal_search-area__FGWyb"};
+
+var _path$8;
+function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+var SvgNavigationMoreVert18 = function SvgNavigationMoreVert18(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
+    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$8 = /*#__PURE__*/React.forwardRef(SvgNavigationMoreVert18);
+
+var _path$7;
+function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+var SvgActionUpdate18 = function SvgActionUpdate18(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
+    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$7 = /*#__PURE__*/React.forwardRef(SvgActionUpdate18);
+
+var _path$6;
+function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+var SvgActionLockFill18 = function SvgActionLockFill18(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
+    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$6 = /*#__PURE__*/React.forwardRef(SvgActionLockFill18);
+
+var _path$5;
+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 SvgActionPinOn18 = function SvgActionPinOn18(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M12 9V3h1V2H5v1h1v6l-2 1v1h4v5h2v-5h4v-1l-2-1z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$5 = /*#__PURE__*/React.forwardRef(SvgActionPinOn18);
+
+var _path$4;
+function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+var SvgActionPinOff18 = function SvgActionPinOff18(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$4 || (_path$4 = /*#__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$3 = /*#__PURE__*/React.forwardRef(SvgNavigationMoreVert12);
+var ForwardRef$4 = /*#__PURE__*/React.forwardRef(SvgActionPinOff18);
+
+const i18nLocal$1 = i18n.tables.columnsConfigurationModal;
+function PinIconButton(props) {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const { id, onTogglePin, isPinned, canUnpin } = props;
+    const isPinnedAlways = isPinned && !canUnpin;
+    const tooltipText = React.useMemo(() => {
+        if (isPinned) {
+            return isPinnedAlways ? i18nLocal$1.lockedColumnPinButton : i18nLocal$1.unPinColumnButton;
+        }
+        return i18nLocal$1.pinColumnButton;
+    }, [isPinned, isPinnedAlways]);
+    const pinIcon = React.useMemo(() => {
+        if (isPinnedAlways) {
+            return ForwardRef$6;
+        }
+        if (isPinned) {
+            return isHovered ? ForwardRef$4 : ForwardRef$5;
+        }
+        return ForwardRef$5;
+    }, [isPinnedAlways, isHovered, isPinned]);
+    const pinClickHandler = isPinnedAlways ? undefined : () => onTogglePin(id);
+    return (React__namespace.createElement("span", { onMouseOver: () => setIsHovered(true), onMouseOut: () => setIsHovered(false) },
+        React__namespace.createElement(Tooltip, { content: tooltipText, placement: "bottom" },
+            React__namespace.createElement(IconButton, { icon: pinIcon, onClick: pinClickHandler, isDisabled: isPinnedAlways, color: isPinned ? 'info' : undefined }))));
+}
 
-var css$a = {"container":"Preset_container__HvhQn","target":"Preset_target__D4gqY","panel":"Preset_panel__-ioWh","divider":"Preset_divider__-GhDA","input":"Preset_input__-YNCn","notification":"Preset_notification__jRpMr"};
+var styles = {"row-wrapper":"ColumnRow_row-wrapper__XJiWz","not-pinned":"ColumnRow_not-pinned__I-gDy","pin-icon-button":"ColumnRow_pin-icon-button__YTlTW","drag-handle":"ColumnRow_drag-handle__S4faK","dnd-disabled":"ColumnRow_dnd-disabled__HqbOB","rowWrapper":"ColumnRow_row-wrapper__XJiWz","notPinned":"ColumnRow_not-pinned__I-gDy","pinIconButton":"ColumnRow_pin-icon-button__YTlTW","dragHandle":"ColumnRow_drag-handle__S4faK","dndDisabled":"ColumnRow_dnd-disabled__HqbOB"};
+
+const ColumnRow = React__namespace.memo(function ColumnRow(props) {
+    const { column } = props;
+    const { toggleVisibility, togglePin, onCanAcceptDrop, onDrop, columnConfig, isDndAllowed, isPinnedAlways } = column;
+    const { isVisible, fix } = columnConfig;
+    const isPinned = fix || isPinnedAlways;
+    const data = { column, columnConfig };
+    const renderContent = (dndActorParams) => {
+        const wrapperClasses = uuiCore.cx(styles.rowWrapper, !isPinned && styles.notPinned, ...(isDndAllowed ? dndActorParams.classNames : []));
+        const _a = dndActorParams.eventHandlers, { onTouchStart, onPointerDown } = _a, restEventHandlers = __rest(_a, ["onTouchStart", "onPointerDown"]);
+        const wrapperAttrs = Object.assign(Object.assign({}, (isDndAllowed ? { ref: dndActorParams.ref } : {})), (isDndAllowed ? { rawProps: Object.assign({}, restEventHandlers) } : {}));
+        const dragHandleRawProps = Object.assign({}, (isDndAllowed ? { onTouchStart, onPointerDown } : {}));
+        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(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 })),
+            React__namespace.createElement(DropMarker, Object.assign({}, dndActorParams))));
+    };
+    return (React__namespace.createElement(uuiCore.DndActor, { key: column.key, srcData: data, dstData: data, canAcceptDrop: onCanAcceptDrop, onDrop: onDrop, render: renderContent }));
+});
 
-const Preset = ({ preset, isActive, hasChanged, choosePreset, duplicatePreset, deletePreset, updatePreset, }) => {
-    const [isRenaming, setIsRenaming] = React.useState(false);
-    const [renamingValue, setRenamingValue] = React.useState("");
-    const handleChoose = React.useCallback(() => choosePreset(preset), [preset, choosePreset]);
-    const handleUpdate = React.useCallback(() => updatePreset(preset), [preset, updatePreset]);
-    const acceptRenaming = React.useCallback(() => {
-        if (renamingValue) {
-            const newPreset = Object.assign(Object.assign({}, preset), { name: renamingValue });
-            updatePreset(newPreset);
+const i18nLocal = i18n.tables.columnsConfigurationModal;
+const renderGroupTitle = (title, amount) => React__namespace.createElement(FlexRow, { size: "24", padding: "24", spacing: "6", cx: styles$1.groupTitle },
+    React__namespace.createElement(Text, { cx: styles$1.groupTitleText, font: "semibold", lineHeight: "24", fontSize: "14" }, title),
+    React__namespace.createElement(Badge, { cx: styles$1.groupTitleBadge, caption: amount, color: 'info', size: "18" }));
+function ColumnsConfigurationModal(props) {
+    const { columns, columnsConfig: initialColumnsConfig, defaultConfig } = props, modalProps = __rest(props, ["columns", "columnsConfig", "defaultConfig"]);
+    const { groupedColumns, searchValue, columnsConfig, reset, checkAll, uncheckAll, setSearchValue, } = uuiComponents.useColumnsConfiguration({ initialColumnsConfig, columns, defaultConfig });
+    const apply = React.useCallback(() => modalProps.success(columnsConfig), [columnsConfig, modalProps]);
+    const close = React.useCallback(() => modalProps.abort(), [modalProps]);
+    const isNoData = React.useMemo(() => Object.values(groupedColumns).every(v => !v.length), [groupedColumns]);
+    const renderVisible = () => {
+        const amountPinned = groupedColumns.displayedPinned.length;
+        const amountUnPinned = groupedColumns.displayedUnpinned.length;
+        if (!amountPinned && !amountUnPinned) {
+            return null;
         }
-        setIsRenaming(false);
-    }, [renamingValue, updatePreset]);
-    const renderBody = React.useCallback((props) => {
-        const handleDuplicate = () => {
-            duplicatePreset(preset);
-            props.onClose();
-        };
-        const startRenaming = () => {
-            setIsRenaming(true);
-            setRenamingValue(preset.name);
-            props.onClose();
-        };
-        const handleDelete = () => {
-            deletePreset(preset);
-            props.onClose();
-        };
-        const update = () => {
-            handleUpdate();
-            props.onClose();
-        };
-        const choose = () => {
-            choosePreset(preset);
-            props.onClose();
-        };
-        return (React__namespace.default.createElement(DropdownMenuBody, Object.assign({}, props),
-            React__namespace.default.createElement(DropdownMenuButton, { caption: 'Duplicate', onClick: handleDuplicate }),
-            React__namespace.default.createElement(DropdownMenuButton, { caption: 'Rename', onClick: startRenaming }),
-            React__namespace.default.createElement(DropdownMenuButton, { caption: 'Update', onClick: update, isDisabled: !hasChanged }),
-            React__namespace.default.createElement(DropdownMenuButton, { caption: 'Delete', onClick: handleDelete }),
-            React__namespace.default.createElement(DropdownMenuSplitter, null),
-            React__namespace.default.createElement(DropdownMenuButton, { caption: 'Discard all changes', onClick: choose, isDisabled: !hasChanged })));
-    }, [preset, duplicatePreset, deletePreset, isActive, choosePreset, hasChanged]);
-    const renderTarget = React.useCallback((props) => {
-        return (React__namespace.default.createElement(Button, Object.assign({}, props, { icon: ForwardRef$3, size: '24', isDropdown: false, mode: isActive ? 'solid' : 'outline', cx: [css$a.target, hasChanged && css$a.notification] })));
-    }, [preset, isActive, hasChanged]);
-    return (React__namespace.default.createElement(React__namespace.default.Fragment, null, isRenaming
-        ? (React__namespace.default.createElement(TextInput, { value: renamingValue, onValueChange: setRenamingValue, size: '24', onAccept: acceptRenaming, onBlur: acceptRenaming, cx: css$a.input, autoFocus: true }))
-        : (React__namespace.default.createElement(ControlGroup, { cx: css$a.container },
-            React__namespace.default.createElement(Button, { key: preset.id, size: '24', caption: preset.name, mode: isActive ? 'solid' : 'outline', onClick: isActive ? null : handleChoose }),
-            !preset.isReadonly && (React__namespace.default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: 'bottom-end' }))))));
-};
-
-var css$9 = {"row":"Presets_row__Sgwiy"};
-
-const PresetsImpl = ({ tableState, presets, createNewPreset, activePresetId, hasPresetChanged, choosePreset, duplicatePreset, deletePreset, updatePreset }) => {
-    const newPresetTitle = "New preset";
-    const saveNewPreset = React.useCallback(() => {
-        createNewPreset(newPresetTitle);
-    }, [createNewPreset, newPresetTitle]);
-    const activePreset = presets.find(p => p.id === activePresetId);
-    const hasActivePresetChanged = React.useMemo(() => {
-        return hasPresetChanged(activePreset);
-    }, [activePreset, tableState.filter]);
-    return (React__namespace.default.createElement(FlexRow, { spacing: "6", size: "48", padding: "18", cx: css$9.row },
-        presets.map(preset => (React__namespace.default.createElement(Preset, { preset: preset, isActive: preset.id === activePresetId, hasChanged: preset.id === activePresetId && hasActivePresetChanged, choosePreset: choosePreset, duplicatePreset: duplicatePreset, deletePreset: deletePreset, updatePreset: updatePreset, key: preset.id }))),
-        hasActivePresetChanged && (React__namespace.default.createElement(Button, { caption: `Save as ${newPresetTitle}`, onClick: saveNewPreset, color: 'accent', mode: 'solid', size: '24' }))));
-};
-const Presets = React__namespace.default.memo(PresetsImpl);
+        const hasDivider = !!(amountPinned && amountUnPinned);
+        return (React__namespace.createElement(React__namespace.Fragment, null,
+            renderGroupTitle(i18nLocal.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 }))),
+            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 })))));
+    };
+    const renderHidden = () => {
+        const amountHidden = groupedColumns.hidden.length;
+        if (!amountHidden) {
+            return null;
+        }
+        return (React__namespace.createElement(React__namespace.Fragment, null,
+            renderGroupTitle(i18nLocal.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 })))));
+    };
+    const noVisibleColumns = React.useMemo(() => !groupedColumns.displayedPinned.length && !groupedColumns.displayedUnpinned.length, [groupedColumns.displayedPinned, groupedColumns.displayedUnpinned]);
+    const applyButton = React__namespace.createElement(Button, { caption: i18nLocal.applyButton, isDisabled: noVisibleColumns, color: "accent", onClick: apply });
+    return (React__namespace.createElement(ModalBlocker, Object.assign({ overlay: true }, modalProps),
+        React__namespace.createElement(ModalWindow, { height: 700 },
+            React__namespace.createElement(ModalHeader, { title: i18nLocal.configureColumnsTitle, onClose: close }),
+            React__namespace.createElement(FlexRow, { padding: "24", borderBottom: true, spacing: "12", cx: styles$1.searchArea },
+                React__namespace.createElement(SearchInput, { size: "30", value: searchValue, onValueChange: setSearchValue, placeholder: i18nLocal.searchPlaceholder }),
+                React__namespace.createElement(Dropdown, { closeOnTargetClick: true, renderBody: () => React__namespace.createElement(Panel, { shadow: true },
+                        React__namespace.createElement(DropdownMenuButton, { caption: i18nLocal.clearAllButton, onClick: uncheckAll }),
+                        React__namespace.createElement(DropdownMenuButton, { caption: i18nLocal.selectAllButton, onClick: checkAll })), renderTarget: props => React__namespace.createElement(Button, Object.assign({}, props, { mode: "none", icon: ForwardRef$8, size: "30", color: "secondary", isDropdown: false })) })),
+            React__namespace.createElement(Panel, { cx: styles$1.mainPanel },
+                React__namespace.createElement(ScrollBars, null,
+                    renderVisible(),
+                    renderHidden(),
+                    isNoData && (React__namespace.createElement(FlexRow, { cx: styles$1.noData },
+                        React__namespace.createElement(Text, { fontSize: '24', lineHeight: '30', color: 'primary', font: 'semibold' }, i18nLocal.noResultsFound.text),
+                        React__namespace.createElement(Text, { fontSize: '16', lineHeight: '24', font: 'regular', color: 'primary' }, i18nLocal.noResultsFound.subText))))),
+            React__namespace.createElement(ModalFooter, { borderTop: true },
+                React__namespace.createElement(LinkButton, { icon: ForwardRef$7, caption: i18nLocal.resetToDefaultButton, onClick: reset }),
+                React__namespace.createElement(FlexSpacer, null),
+                React__namespace.createElement(Button, { mode: "ghost", color: "secondary", caption: i18nLocal.cancelButton, onClick: close }),
+                noVisibleColumns
+                    ? (React__namespace.createElement(Tooltip, { content: i18nLocal.enableAtLeastOneColumnMessage, placement: 'top-end', color: 'contrast' }, applyButton))
+                    : applyButton))));
+}
 
-var _path$2;
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+var css$a = {"panel":"ColumnHeaderDropdown_panel__52aQo"};
+
+var css$9 = {"sorting-panel-container":"SortingPanel_sorting-panel-container__DH1x6","sort-active":"SortingPanel_sort-active__KNhjc","sortingPanelContainer":"SortingPanel_sorting-panel-container__DH1x6","sortActive":"SortingPanel_sort-active__KNhjc"};
+
+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$9.sortingPanelContainer },
+        React__namespace.default.createElement(DropdownMenuButton, { isActive: sortDirection === 'asc', caption: i18n.pickerFilterHeader.sortAscending, icon: ForwardRef$f, onClick: sortAsc }),
+        React__namespace.default.createElement(DropdownMenuButton, { isActive: sortDirection === 'desc', caption: i18n.pickerFilterHeader.sortDescending, icon: ForwardRef$e, onClick: sortDesc })));
+};
+const SortingPanel = React__namespace.default.memo(SortingPanelImpl);
+
+const ColumnHeaderDropdownImpl = props => {
+    const popperModifiers = React.useMemo(() => [
+        {
+            name: 'offset',
+            options: { offset: [0, 1] },
+        },
+        uuiCore.mobilePopperModifier,
+    ], []);
+    const style = React.useMemo(() => ({
+        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$a.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$3;
+function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 var SvgNotificationDone24 = function SvgNotificationDone24(props, ref) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__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$2 = /*#__PURE__*/React.forwardRef(SvgNotificationDone24);
+var ForwardRef$3 = /*#__PURE__*/React.forwardRef(SvgNotificationDone24);
 
-var _path$1;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var _path$2;
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 var SvgNotificationDone18 = function SvgNotificationDone18(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: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__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$1 = /*#__PURE__*/React.forwardRef(SvgNotificationDone18);
+var ForwardRef$2 = /*#__PURE__*/React.forwardRef(SvgNotificationDone18);
 
-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 SvgNotificationDone12 = function SvgNotificationDone12(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: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$1 || (_path$1 = /*#__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 = /*#__PURE__*/React.forwardRef(SvgNotificationDone12);
+var ForwardRef$1 = /*#__PURE__*/React.forwardRef(SvgNotificationDone12);
 
 var css$8 = {"render-item":"DataPickerRow_render-item__YsRTQ","icon-wrapper":"DataPickerRow_icon-wrapper__Pwg6e","picker-row":"DataPickerRow_picker-row__yZk93","renderItem":"DataPickerRow_render-item__YsRTQ","iconWrapper":"DataPickerRow_icon-wrapper__Pwg6e","pickerRow":"DataPickerRow_picker-row__yZk93"};
 
@@ -1457,11 +2176,11 @@ class DataPickerRow extends React__namespace.Component {
         super(...arguments);
         this.getIcon = (size) => {
             switch (size) {
-                case '24': return ForwardRef;
-                case '30': return ForwardRef$1;
-                case '36': return ForwardRef$1;
-                case '42': return ForwardRef$2;
-                default: return ForwardRef$1;
+                case '24': return ForwardRef$1;
+                case '30': return ForwardRef$2;
+                case '36': return ForwardRef$2;
+                case '42': return ForwardRef$3;
+                default: return ForwardRef$2;
             }
         };
         this.column = {
@@ -1494,36 +2213,42 @@ const MobileDropdownWrapper = props => {
         isVisible && (React__namespace.default.createElement(LinkButton, { caption: 'DONE', onClick: () => { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$7.done, size: '48' }))));
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-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.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
 var css$6 = {"sub-header-wrapper":"PickerModal_sub-header-wrapper__ArWps","switch":"PickerModal_switch__l1-Vd","subHeaderWrapper":"PickerModal_sub-header-wrapper__ArWps","$switch$":"PickerModal_switch__l1-Vd"};
 
+var _path, _path2;
+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 SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: 66,
+    height: 67,
+    viewBox: "0 0 66 67",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ref: ref
+  }, props), _path || (_path = /*#__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", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "m42.31 40.335 7.165 7.165L47 49.975l-7.165-7.165a13.94 13.94 0 0 1-8.585 2.94c-7.732 0-14-6.268-14-14s6.268-14 14-14 14 6.268 14 14a13.94 13.94 0 0 1-2.94 8.585ZM31.25 42.25c5.799 0 10.5-4.701 10.5-10.5s-4.701-10.5-10.5-10.5-10.5 4.701-10.5 10.5 4.701 10.5 10.5 10.5Z",
+    fill: "#6C6F80"
+  })));
+};
+var ForwardRef = /*#__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$6.noFoundModalContainer },
+                    React__namespace.createElement(uuiComponents.IconContainer, { cx: css$6.noFoundModalContainerIcon, icon: ForwardRef }),
+                    React__namespace.createElement(Text, { cx: css$6.noFoundModalContainerText, font: 'semibold', fontSize: '16', lineHeight: '24', color: 'primary', size: '36' }, i18n.dataPickerBody.noRecordsMessage),
+                    React__namespace.createElement(Text, { cx: css$6.noFoundModalContainerText, fontSize: '12', lineHeight: '18', font: 'regular', color: 'primary', size: '36' }, i18n.dataPickerBody.noRecordsSubTitle));
+        };
+    }
     renderRow(rowProps) {
         return this.props.renderRow ? this.props.renderRow(rowProps) : (React__namespace.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, borderBottom: 'none', padding: '24', size: '36', renderItem: (i) => React__namespace.createElement(Text, { size: '36' }, rowProps.isLoading ? React__namespace.createElement(TextPlaceholder, { wordsCount: 2 }) : this.getName(i)) })));
     }
@@ -1541,9 +2266,9 @@ class PickerModalImpl extends uuiComponents.PickerModalBase {
         const dataRows = this.getRows();
         const selectedDataRows = view.getSelectedRows();
         const rows = dataRows.map(props => this.renderRow(props));
-        return (React__namespace.createElement(ModalBlocker, Object.assign({}, this.props),
+        return (React__namespace.createElement(ModalBlocker, Object.assign({ overlay: true }, this.props),
             React__namespace.createElement(ModalWindow, { width: 600, height: 700 },
-                React__namespace.createElement(ModalHeader, { borderBottom: true, title: this.props.caption || i18n.pickerModal.headerTitle, onClose: () => this.props.abort() }),
+                React__namespace.createElement(ModalHeader, { title: this.props.caption || i18n.pickerModal.headerTitle, onClose: () => this.props.abort() }),
                 React__namespace.createElement(FlexCell, { cx: css$6.subHeaderWrapper },
                     React__namespace.createElement(FlexRow, { vPadding: '24' },
                         React__namespace.createElement(SearchInput, Object.assign({}, this.lens.prop('dataSourceState').prop('search').toProps(), { onKeyDown: (e) => uuiComponents.handleDataSourceKeyboard({
@@ -1555,11 +2280,8 @@ class PickerModalImpl extends uuiComponents.PickerModalBase {
                             }, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder }))),
                     !this.isSingleSelect() && React__namespace.createElement(Switch, Object.assign({ cx: css$6.switch, size: '18' }, this.stateLens.prop('showSelected').toProps(), { isDisabled: selectedDataRows.length < 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.props.renderNotFound && (() => this.props.renderNotFound({
-                        search: this.state.dataSourceState.search,
-                        onClose: () => this.props.success(selectedDataRows),
-                    })), editMode: 'modal' })),
-                React__namespace.createElement(ModalFooter, { borderTop: true, padding: '24', vPadding: '24' }, this.props.renderFooter
+                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(selectedDataRows)))));
     }
@@ -1577,7 +2299,7 @@ class PickerModal extends React__namespace.Component {
 
 const Avatar = uuiCore.withMods(uuiComponents.Avatar, () => []);
 
-var css$5 = {"root":"Badge_root__wIzSP","size-18":"Badge_size-18__-VlZJ","fill-transparent":"Badge_fill-transparent__za27N","size-24":"Badge_size-24__WZsqd","size-30":"Badge_size-30__oGbuk","size-36":"Badge_size-36__MMdK5","size-42":"Badge_size-42__MOPTB","size-48":"Badge_size-48__FEYnJ","fill-solid":"Badge_fill-solid__ptnEO","size18":"Badge_size-18__-VlZJ","fillTransparent":"Badge_fill-transparent__za27N","size24":"Badge_size-24__WZsqd","size30":"Badge_size-30__oGbuk","size36":"Badge_size-36__MMdK5","size42":"Badge_size-42__MOPTB","size48":"Badge_size-48__FEYnJ","fillSolid":"Badge_fill-solid__ptnEO"};
+var css$5 = {"root":"Badge_root__wIzSP","size-18":"Badge_size-18__-VlZJ","fill-transparent":"Badge_fill-transparent__za27N","size-24":"Badge_size-24__WZsqd","size-30":"Badge_size-30__oGbuk","size-36":"Badge_size-36__MMdK5","size-42":"Badge_size-42__MOPTB","size-48":"Badge_size-48__FEYnJ","fill-solid":"Badge_fill-solid__ptnEO","fill-semitransparent":"Badge_fill-semitransparent__Nd9RN","size18":"Badge_size-18__-VlZJ","fillTransparent":"Badge_fill-transparent__za27N","size24":"Badge_size-24__WZsqd","size30":"Badge_size-30__oGbuk","size36":"Badge_size-36__MMdK5","size42":"Badge_size-42__MOPTB","size48":"Badge_size-48__FEYnJ","fillSolid":"Badge_fill-solid__ptnEO","fillSemitransparent":"Badge_fill-semitransparent__Nd9RN"};
 
 const defaultSize$3 = '36';
 const mapSize$1 = {
@@ -1590,11 +2312,11 @@ const mapSize$1 = {
 };
 function applyBadgeMods(mods) {
     return [
-        `badge-color-${(mods.color || 'info')}`,
+        css$5.root,
         buttonCss.root,
         css$5['size-' + (mods.size || defaultSize$3)],
         css$5['fill-' + (mods.fill || 'solid')],
-        css$5.root,
+        mods.color && `badge-${(mods.color)}`,
     ];
 }
 const Badge = uuiCore.withMods(uuiComponents.Button, applyBadgeMods, (props) => ({
@@ -1616,8 +2338,6 @@ const mapSize = {
 };
 function applyTagMods(mods) {
     return [
-        buttonCss.root,
-        'tag-vars',
         css$4['size-' + (mods.size || defaultSize$2)],
         css$4.root,
     ];
@@ -1633,7 +2353,6 @@ const defaultSize$1 = '36';
 const defaultMode = exports.EditMode.FORM;
 function applyPickerTogglerMods(mods) {
     return [
-        'picker-toggler-vars',
         css$3.root,
         css$3['size-' + (mods.size || defaultSize$1)],
         css$3['mode-' + (mods.mode || defaultMode)],
@@ -1669,8 +2388,9 @@ function PickerTogglerComponent(props, ref) {
     };
     const renderItem = (row) => {
         var _a;
-        return (React__namespace.createElement(Tag, { key: row.id, caption: getCaption(row), tabIndex: -1, size: props.size ? getPickerTogglerButtonSize(props.size) : '30', onClear: e => {
-                row.onCheck && row.onCheck(row);
+        return (React__namespace.createElement(Tag, { key: row.rowKey, caption: getCaption(row), tabIndex: -1, size: props.size ? getPickerTogglerButtonSize(props.size) : '30', onClear: e => {
+                var _a;
+                (_a = row.onCheck) === null || _a === void 0 ? void 0 : _a.call(row, row);
                 e.stopPropagation();
             }, isDisabled: props.isDisabled || props.isReadonly || ((_a = row === null || row === void 0 ? void 0 : row.checkbox) === null || _a === void 0 ? void 0 : _a.isDisabled) }));
     };
@@ -1678,7 +2398,7 @@ function PickerTogglerComponent(props, ref) {
 }
 const PickerToggler = React__namespace.forwardRef(PickerTogglerComponent);
 
-var css$2 = {"root":"PickerItem_root__m-i2g","multiline-vertical-padding-24":"PickerItem_multiline-vertical-padding-24__ivzzQ","multiline-vertical-padding-30":"PickerItem_multiline-vertical-padding-30__tBEW-","multiline-vertical-padding-36":"PickerItem_multiline-vertical-padding-36__NpueM","multiline-vertical-padding-42":"PickerItem_multiline-vertical-padding-42__UjLpR","multiline-vertical-padding-48":"PickerItem_multiline-vertical-padding-48__65Jdv","multilineVerticalPadding24":"PickerItem_multiline-vertical-padding-24__ivzzQ","multilineVerticalPadding30":"PickerItem_multiline-vertical-padding-30__tBEW-","multilineVerticalPadding36":"PickerItem_multiline-vertical-padding-36__NpueM","multilineVerticalPadding42":"PickerItem_multiline-vertical-padding-42__UjLpR","multilineVerticalPadding48":"PickerItem_multiline-vertical-padding-48__65Jdv"};
+var css$2 = {"root":"PickerItem_root__m-i2g","multiline-vertical-padding-24":"PickerItem_multiline-vertical-padding-24__ivzzQ","multiline-vertical-padding-30":"PickerItem_multiline-vertical-padding-30__tBEW-","multiline-vertical-padding-36":"PickerItem_multiline-vertical-padding-36__NpueM","multiline-vertical-padding-42":"PickerItem_multiline-vertical-padding-42__UjLpR","multiline-vertical-padding-48":"PickerItem_multiline-vertical-padding-48__65Jdv","text":"PickerItem_text__k9Jsu","multilineVerticalPadding24":"PickerItem_multiline-vertical-padding-24__ivzzQ","multilineVerticalPadding30":"PickerItem_multiline-vertical-padding-30__tBEW-","multilineVerticalPadding36":"PickerItem_multiline-vertical-padding-36__NpueM","multilineVerticalPadding42":"PickerItem_multiline-vertical-padding-42__UjLpR","multilineVerticalPadding48":"PickerItem_multiline-vertical-padding-48__65Jdv"};
 
 const defaultSize = '36';
 class PickerItem extends React__namespace.Component {
@@ -1689,12 +2409,13 @@ class PickerItem extends React__namespace.Component {
         };
     }
     render() {
-        const { size, avatarUrl, title, subtitle, isLoading, isDisabled } = this.props;
+        const { size, avatarUrl, title, subtitle, isLoading, isDisabled, icon } = this.props;
         const itemSize = size && size !== 'none' ? size : defaultSize;
         const isMultiline = !!(title && subtitle);
         return (React__namespace.createElement(FlexCell, { width: 'auto', cx: css$2.root },
             React__namespace.createElement(FlexRow, { size: itemSize, cx: isMultiline && css$2[`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$2.text, color: isDisabled ? 'disabled' : 'primary' }, isLoading ? React__namespace.createElement(TextPlaceholder, { wordsCount: 2 }) : title),
                     subtitle && React__namespace.createElement(Text, { size: itemSize, color: 'disabled', cx: css$2.text }, isLoading ? React__namespace.createElement(TextPlaceholder, { wordsCount: 2 }) : subtitle)))));
@@ -1712,14 +2433,19 @@ class PickerInput extends uuiComponents.PickerInputBase {
             return React__namespace.default.createElement(PickerItem, Object.assign({ title: this.getName(item), size: this.getRowSize() }, rowProps));
         };
         this.renderRow = (rowProps) => {
-            return this.props.renderRow ? this.props.renderRow(rowProps) : (React__namespace.default.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, borderBottom: 'none', size: this.getRowSize(), rawProps: { 'aria-selected': rowProps.isSelectable && rowProps.isSelected, role: 'option' }, padding: this.props.editMode === 'modal' ? '24' : '12', renderItem: this.renderItem })));
+            return this.props.renderRow ? this.props.renderRow(rowProps) : (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 })));
         };
     }
     toggleModalOpening(opened) {
-        const _a = this.props, restProps = __rest(_a, ["renderFooter"]);
-        this.context.uuiModals.show(props => React__namespace.default.createElement(PickerModal, Object.assign({}, restProps, props, { caption: this.getPlaceholder(), initialValue: this.props.value, renderRow: this.renderRow, selectionMode: this.props.selectionMode, valueType: this.props.valueType })))
-            .then(newSelection => this.handleSelectionValueChange(newSelection))
-            .catch(() => null);
+        const _a = this.props, { renderFooter, rawProps } = _a, restProps = __rest(_a, ["renderFooter", "rawProps"]);
+        this.context.uuiModals.show(props => React__namespace.default.createElement(PickerModal, Object.assign({}, restProps, { rawProps: rawProps === null || rawProps === void 0 ? void 0 : rawProps.body }, props, { caption: this.getPlaceholder(), initialValue: this.props.value, renderRow: this.renderRow, selectionMode: this.props.selectionMode, valueType: this.props.valueType })))
+            .then(newSelection => {
+            this.handleSelectionValueChange(newSelection);
+            this.returnFocusToInput();
+        })
+            .catch(() => {
+            this.returnFocusToInput();
+        });
     }
     getRowSize() {
         return uuiCore.isMobile()
@@ -1748,9 +2474,16 @@ class PickerInput extends uuiComponents.PickerInputBase {
         const renderedDataRows = rows.map((props) => this.renderRow(props));
         const maxHeight = uuiCore.isMobile() ? document.documentElement.clientHeight : (this.props.dropdownHeight || pickerHeight);
         const minBodyWidth = uuiCore.isMobile() ? document.documentElement.clientWidth : (this.props.minBodyWidth || pickerWidth);
-        return (React__namespace.default.createElement(Panel, { shadow: true, style: { width: props.togglerWidth > minBodyWidth ? props.togglerWidth : minBodyWidth }, rawProps: { tabIndex: -1 }, cx: [css$1.panel, uuiCore.uuiMarkers.lockFocus], background: true },
-            React__namespace.default.createElement(MobileDropdownWrapper, { title: this.props.entityName, close: () => this.toggleBodyOpening(false) },
-                React__namespace.default.createElement(DataPickerBody, Object.assign({}, props, { rows: renderedDataRows, maxHeight: maxHeight, searchSize: this.props.size, editMode: 'dropdown' })),
+        return (React__namespace.default.createElement(Panel, { shadow: true, style: { width: props.togglerWidth > minBodyWidth ? props.togglerWidth : minBodyWidth }, rawProps: { tabIndex: -1 }, cx: [css$1.panel, uuiCore.uuiMarkers.lockFocus] },
+            React__namespace.default.createElement(MobileDropdownWrapper, { title: this.props.entityName, close: () => {
+                    this.returnFocusToInput();
+                    this.toggleBodyOpening(false);
+                } },
+                React__namespace.default.createElement(DataPickerBody, Object.assign({}, props, { rows: renderedDataRows, maxHeight: maxHeight, searchSize: this.props.size, editMode: 'dropdown', selectionMode: this.props.selectionMode, renderNotFound: this.props.renderNotFound ?
+                        () => this.props.renderNotFound({
+                            search: this.state.dataSourceState.search,
+                            onClose: () => this.toggleBodyOpening(false),
+                        }) : undefined })),
                 !this.isSingleSelect() && this.renderFooter())));
     }
 }
@@ -1819,17 +2552,26 @@ exports.Accordion = Accordion;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.Button = Button;
+exports.Calendar = Calendar;
 exports.Checkbox = Checkbox;
 exports.ClearNotification = ClearNotification;
+exports.ColumnHeaderDropdown = ColumnHeaderDropdown;
+exports.ColumnsConfigurationModal = ColumnsConfigurationModal;
 exports.ControlGroup = ControlGroup;
 exports.DataPickerBody = DataPickerBody;
 exports.DataPickerFooter = DataPickerFooter;
 exports.DataPickerHeader = DataPickerHeader;
 exports.DataPickerRow = DataPickerRow;
+exports.DataTable = DataTable;
 exports.DataTableCell = DataTableCell;
+exports.DataTableHeaderCell = DataTableHeaderCell;
+exports.DataTableHeaderRow = DataTableHeaderRow;
+exports.DataTableRow = DataTableRow;
+exports.DatePicker = DatePicker;
+exports.DatePickerBody = DatePickerBody;
+exports.DropMarker = DropMarker;
 exports.Dropdown = Dropdown;
 exports.DropdownContainer = DropdownContainer;
-exports.DropdownControlKeys = DropdownControlKeys;
 exports.DropdownMenuBody = DropdownMenuBody;
 exports.DropdownMenuButton = DropdownMenuButton;
 exports.DropdownMenuHeader = DropdownMenuHeader;
@@ -1850,7 +2592,9 @@ exports.ModalBlocker = ModalBlocker;
 exports.ModalFooter = ModalFooter;
 exports.ModalHeader = ModalHeader;
 exports.ModalWindow = ModalWindow;
+exports.MultiSwitch = MultiSwitch;
 exports.NotificationCard = NotificationCard;
+exports.NumericInput = NumericInput;
 exports.Panel = Panel;
 exports.PickerInput = PickerInput;
 exports.PickerItem = PickerItem;
@@ -1859,10 +2603,10 @@ exports.PickerListItem = PickerListItem;
 exports.PickerModal = PickerModal;
 exports.PickerModalImpl = PickerModalImpl;
 exports.PickerToggler = PickerToggler;
-exports.Preset = Preset;
-exports.Presets = Presets;
 exports.RadioGroup = RadioGroup;
 exports.RadioInput = RadioInput;
+exports.RangeDatePicker = RangeDatePicker;
+exports.RangeDatePickerBody = RangeDatePickerBody;
 exports.ScrollBars = ScrollBars;
 exports.SearchInput = SearchInput;
 exports.SuccessNotification = SuccessNotification;
@@ -1870,6 +2614,7 @@ exports.Switch = Switch;
 exports.TabButton = TabButton;
 exports.Tag = Tag;
 exports.Text = Text;
+exports.TextArea = TextArea;
 exports.TextInput = TextInput;
 exports.TextPlaceholder = TextPlaceholder;
 exports.Tooltip = Tooltip;
@@ -1878,6 +2623,7 @@ exports.VirtualList = VirtualList;
 exports.WarningNotification = WarningNotification;
 exports.allButtonColors = allButtonColors;
 exports.allButtonModes = allButtonModes;
+exports.allEpamBadgeSemanticColors = allEpamBadgeSemanticColors;
 exports.allEpamSemanticColors = allEpamSemanticColors;
 exports.allFontStyles = allFontStyles;
 exports.allIconColors = allIconColors;
@@ -1887,10 +2633,18 @@ exports.allTextSizes = allTextSizes;
 exports.applyBadgeMods = applyBadgeMods;
 exports.applyButtonMods = applyButtonMods;
 exports.applyCheckboxMods = applyCheckboxMods;
+exports.applyDatePickerBodyMods = applyDatePickerBodyMods;
+exports.applyDateSelectionMods = applyDateSelectionMods;
 exports.applyIconContainerMods = applyIconContainerMods;
+exports.applyNumericInputMods = applyNumericInputMods;
+exports.applyRangeDatePickerBodyMods = applyRangeDatePickerBodyMods;
 exports.applySwitchMods = applySwitchMods;
 exports.applyTagMods = applyTagMods;
+exports.applyTextAreaMods = applyTextAreaMods;
 exports.applyTextInputMods = applyTextInputMods;
+exports.propsMods = propsMods;
+exports.renderCell = renderCell;
+exports.renderDropMarkers = renderDropMarkers;
 Object.keys(uuiCore).forEach(function (k) {
     if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
         enumerable: true,