@true-engineering/true-react-common-ui-kit 3.45.1 → 4.0.0-alpha0

package/dist/true-react-common-ui-kit.js

@@ -4,7 +4,7 @@ import { mergeStyles, isNotEmpty, isArrayNotEmpty, isEmpty, isString, isStringNo
 import { CSSTransition } from "react-transition-group";
 import clsx from "clsx";
 import hexToRgba from "hex-to-rgba";
-import { size, useFloating, offset as offset$2, flip as flip$2, arrow as arrow$2, autoUpdate, useHover, safePolygon, useFocus, useClick, useDismiss, useInteractions, useTransitionStatus, FloatingPortal, FloatingArrow } from "@floating-ui/react";
+import { useFloating, offset as offset$2, flip as flip$2, autoUpdate, useHover, safePolygon, useFocus, useClick, useDismiss, useInteractions, useTransitionStatus, FloatingPortal } from "@floating-ui/react";
 import InputMask from "react-input-mask";
 import { getYear, getMonth, format, parse, isSameDay, isValid, isAfter, isBefore, startOfMonth, endOfMonth, sub, startOfYear, endOfYear } from "date-fns";
 import { Portal } from "react-overlays";
@@ -976,7 +976,17 @@ var dimensions = {
   BORDER_RADIUS_STD: 8,
   BORDER_RADIUS_SMALL: 6,
   BORDER_RADIUS_EXTRA_SMALL: 4,
-  CONTROL_HEIGHT: 48
+  CONTROL: {
+    HEIGHT: 48,
+    PADDING: 16,
+    ICON_SIZE: 24,
+    ICON_INNER_SIZE: 24,
+    ICON_GAP: 8
+  },
+  Z_INDEX: {
+    CONTROL_INVALID: 1,
+    CONTROL_FOCUS: 2
+  }
 };
 var helpers = {
   withAngle: function() {
@@ -1047,11 +1057,9 @@ var helpers = {
     overflow: "auto",
     // Chromium
     "@supports selector(::-webkit-scrollbar)": {
-      "--webkit-scrollbar-width": "10px",
-      "--webkit-scrollbar-height": "10px",
       "&::-webkit-scrollbar": {
-        width: "var(--webkit-scrollbar-width)",
-        height: "var(--webkit-scrollbar-height)",
+        height: 10,
+        width: 10,
         "&-thumb": {
           width: 6,
           minHeight: 30,
@@ -1388,9 +1396,9 @@ function mapCacheHas(key) {
   return getMapData(this, key).has(key);
 }
 function mapCacheSet(key, value) {
-  var data = getMapData(this, key), size2 = data.size;
+  var data = getMapData(this, key), size = data.size;
   data.set(key, value);
-  this.size += data.size == size2 ? 0 : 1;
+  this.size += data.size == size ? 0 : 1;
   return this;
 }
 function MapCache(entries) {
@@ -1874,7 +1882,7 @@ var merge = createAssigner(function(object, source, srcIndex) {
   baseMerge(object, source, srcIndex);
 });
 const merge$1 = merge;
-function _define_property$15(obj, key, value) {
+function _define_property$18(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -1887,7 +1895,7 @@ function _define_property$15(obj, key, value) {
   }
   return obj;
 }
-function _object_spread$13(target) {
+function _object_spread$16(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -1897,12 +1905,12 @@ function _object_spread$13(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$15(target, key, source[key]);
+      _define_property$18(target, key, source[key]);
     });
   }
   return target;
 }
-function ownKeys$U(object, enumerableOnly) {
+function ownKeys$X(object, enumerableOnly) {
   var keys2 = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -1915,12 +1923,12 @@ function ownKeys$U(object, enumerableOnly) {
   }
   return keys2;
 }
-function _object_spread_props$U(target, source) {
+function _object_spread_props$X(target, source) {
   source = source != null ? source : {};
   if (Object.getOwnPropertyDescriptors) {
     Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
   } else {
-    ownKeys$U(Object(source)).forEach(function(key) {
+    ownKeys$X(Object(source)).forEach(function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -1975,7 +1983,7 @@ function createThemedStyles() {
     return mergeStyles(styles, isNotEmpty(componentName) ? theme === null || theme === void 0 ? void 0 : (_theme_components = theme.components) === null || _theme_components === void 0 ? void 0 : _theme_components[componentName] : void 0, tweakStyles);
   });
   return function(data) {
-    return useStyles2(isNotEmpty(data) ? _object_spread_props$U(_object_spread$13({}, data), {
+    return useStyles2(isNotEmpty(data) ? _object_spread_props$X(_object_spread$16({}, data), {
       theme: cleanStyles(data.theme)
     }) : data);
   };
@@ -6509,7 +6517,7 @@ function _array_without_holes$8(arr) {
   if (Array.isArray(arr))
     return _array_like_to_array$n(arr);
 }
-function _define_property$14(obj, key, value) {
+function _define_property$17(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -6529,7 +6537,7 @@ function _iterable_to_array$8(iter) {
 function _non_iterable_spread$8() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$12(target) {
+function _object_spread$15(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -6539,7 +6547,7 @@ function _object_spread$12(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$14(target, key, source[key]);
+      _define_property$17(target, key, source[key]);
     });
   }
   return target;
@@ -6595,7 +6603,7 @@ var useDropdown = function(param) {
         },
         {
           name: "flip",
-          options: _object_spread$12({
+          options: _object_spread$15({
             fallbackPlacements: canBeFlipped ? [
               "bottom-start",
               "top-start"
@@ -6744,7 +6752,7 @@ var complexIcons = {
   "file-xml": fileXml,
   "file-zip": fileZip
 };
-function _define_property$13(obj, key, value) {
+function _define_property$16(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -6757,7 +6765,7 @@ function _define_property$13(obj, key, value) {
   }
   return obj;
 }
-function _object_spread$11(target) {
+function _object_spread$14(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -6767,7 +6775,7 @@ function _object_spread$11(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$13(target, key, source[key]);
+      _define_property$16(target, key, source[key]);
     });
   }
   return target;
@@ -6776,7 +6784,7 @@ var ComplexIconBoilerplate = function(param) {
   var type = param.type;
   var theme = useContext(ThemeContext).theme;
   var icons = useMemo(function() {
-    return _object_spread$11({}, complexIcons, theme.complexIcons);
+    return _object_spread$14({}, complexIcons, theme.complexIcons);
   }, []);
   var ComplexIcon = icons[type];
   return /* @__PURE__ */ jsx("div", {
@@ -7647,7 +7655,7 @@ var iconsList = checkIcons({
     ]
   }
 });
-function _define_property$12(obj, key, value) {
+function _define_property$15(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -7660,7 +7668,7 @@ function _define_property$12(obj, key, value) {
   }
   return obj;
 }
-function _object_spread$10(target) {
+function _object_spread$13(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -7670,12 +7678,12 @@ function _object_spread$10(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$12(target, key, source[key]);
+      _define_property$15(target, key, source[key]);
     });
   }
   return target;
 }
-function ownKeys$T(object, enumerableOnly) {
+function ownKeys$W(object, enumerableOnly) {
   var keys2 = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -7688,12 +7696,12 @@ function ownKeys$T(object, enumerableOnly) {
   }
   return keys2;
 }
-function _object_spread_props$T(target, source) {
+function _object_spread_props$W(target, source) {
   source = source != null ? source : {};
   if (Object.getOwnPropertyDescriptors) {
     Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
   } else {
-    ownKeys$T(Object(source)).forEach(function(key) {
+    ownKeys$W(Object(source)).forEach(function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -7704,7 +7712,7 @@ var IconBoilerplate = function(param) {
   var _icon_paths, _icon_rects, _icon_circles;
   var theme = useContext(ThemeContext).theme;
   var icons = useMemo(function() {
-    return _object_spread$10({}, iconsList, theme.icons);
+    return _object_spread$13({}, iconsList, theme.icons);
   }, []);
   var icon = icons[type];
   var _icon_viewBox;
@@ -7717,7 +7725,7 @@ var IconBoilerplate = function(param) {
     children: [
       (_icon_paths = icon.paths) === null || _icon_paths === void 0 ? void 0 : _icon_paths.map(function(path, index) {
         var _path_fill, _path_stroke;
-        return jsx("path", _object_spread$10({
+        return jsx("path", _object_spread$13({
           fillRule: "evenodd",
           clipRule: "evenodd",
           fill: (_path_fill = path.fill) !== null && _path_fill !== void 0 ? _path_fill : "currentColor",
@@ -7725,25 +7733,25 @@ var IconBoilerplate = function(param) {
         }, path), index);
       }),
       (_icon_rects = icon.rects) === null || _icon_rects === void 0 ? void 0 : _icon_rects.map(function(rect, index) {
-        return /* @__PURE__ */ createElement("rect", _object_spread_props$T(_object_spread$10({}, rect), {
+        return /* @__PURE__ */ createElement("rect", _object_spread_props$W(_object_spread$13({}, rect), {
           key: index
         }));
       }),
       (_icon_circles = icon.circles) === null || _icon_circles === void 0 ? void 0 : _icon_circles.map(function(circle, index) {
-        return /* @__PURE__ */ createElement("circle", _object_spread_props$T(_object_spread$10({}, circle), {
+        return /* @__PURE__ */ createElement("circle", _object_spread_props$W(_object_spread$13({}, circle), {
           key: index
         }));
       })
     ]
   });
 };
-var useStyles$V = createThemedStyles("Icon", {
+var useStyles$X = createThemedStyles("Icon", {
   root: {
     display: "flex",
     alignItems: "center"
   }
 });
-function _define_property$11(obj, key, value) {
+function _define_property$14(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -7756,7 +7764,7 @@ function _define_property$11(obj, key, value) {
   }
   return obj;
 }
-function _object_spread$$(target) {
+function _object_spread$12(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -7766,12 +7774,12 @@ function _object_spread$$(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$11(target, key, source[key]);
+      _define_property$14(target, key, source[key]);
     });
   }
   return target;
 }
-function ownKeys$S(object, enumerableOnly) {
+function ownKeys$V(object, enumerableOnly) {
   var keys2 = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -7784,12 +7792,12 @@ function ownKeys$S(object, enumerableOnly) {
   }
   return keys2;
 }
-function _object_spread_props$S(target, source) {
+function _object_spread_props$V(target, source) {
   source = source != null ? source : {};
   if (Object.getOwnPropertyDescriptors) {
     Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
   } else {
-    ownKeys$S(Object(source)).forEach(function(key) {
+    ownKeys$V(Object(source)).forEach(function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -7797,10 +7805,10 @@ function _object_spread_props$S(target, source) {
 }
 var Icon = function(param) {
   var type = param.type, data = param.data, testId = param.testId, tweakStyles = param.tweakStyles;
-  var classes = useStyles$V({
+  var classes = useStyles$X({
     theme: tweakStyles
   });
-  return /* @__PURE__ */ jsx("div", _object_spread_props$S(_object_spread$$({
+  return /* @__PURE__ */ jsx("div", _object_spread_props$V(_object_spread$12({
     className: classes.root
   }, addDataTestId(testId), addDataAttributes(data)), {
     children: isComplexIcon(type) ? /* @__PURE__ */ jsx(ComplexIconBoilerplate, {
@@ -7816,15 +7824,7 @@ var renderIcon = function(icon) {
   }) : icon;
 };
 var DEFAULT_OFFSET = 6;
-var minWidthRelativeToTrigger = size({
-  apply: function apply2(param) {
-    var rects = param.rects, elements = param.elements;
-    Object.assign(elements.floating.style, {
-      minWidth: "".concat(rects.reference.width, "px")
-    });
-  }
-});
-var useStyles$U = createThemedStyles("WithPopup", {
+var useStyles$W = createThemedStyles("WithPopup", {
   trigger: {
     width: "fit-content"
   },
@@ -7839,7 +7839,6 @@ var useStyles$U = createThemedStyles("WithPopup", {
     zIndex: 5,
     outline: "none"
   },
-  arrow: {},
   animationEnd: {},
   animationStart: {},
   "dropdown-initial": {
@@ -7871,7 +7870,7 @@ function _array_without_holes$7(arr) {
   if (Array.isArray(arr))
     return _array_like_to_array$m(arr);
 }
-function _define_property$10(obj, key, value) {
+function _define_property$13(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -7922,7 +7921,7 @@ function _non_iterable_rest$m() {
 function _non_iterable_spread$7() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$_(target) {
+function _object_spread$11(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -7932,12 +7931,12 @@ function _object_spread$_(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$10(target, key, source[key]);
+      _define_property$13(target, key, source[key]);
     });
   }
   return target;
 }
-function ownKeys$R(object, enumerableOnly) {
+function ownKeys$U(object, enumerableOnly) {
   var keys2 = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -7950,12 +7949,12 @@ function ownKeys$R(object, enumerableOnly) {
   }
   return keys2;
 }
-function _object_spread_props$R(target, source) {
+function _object_spread_props$U(target, source) {
   source = source != null ? source : {};
   if (Object.getOwnPropertyDescriptors) {
     Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
   } else {
-    ownKeys$R(Object(source)).forEach(function(key) {
+    ownKeys$U(Object(source)).forEach(function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -7981,12 +7980,11 @@ function _unsupported_iterable_to_array$m(o, minLen) {
     return _array_like_to_array$m(o, minLen);
 }
 var WithPopup = function(param) {
-  var trigger = param.trigger, children = param.children, _param_middlewares = param.middlewares, middlewares = _param_middlewares === void 0 ? [] : _param_middlewares, _param_eventType = param.eventType, eventType = _param_eventType === void 0 ? "click" : _param_eventType, _param_placement = param.placement, placement = _param_placement === void 0 ? eventType === "click" ? "bottom-end" : "top" : _param_placement, _param_hoverDelay = param.hoverDelay, hoverDelay = _param_hoverDelay === void 0 ? 0 : _param_hoverDelay, _param_popupOffset = param.popupOffset, popupOffset = _param_popupOffset === void 0 ? DEFAULT_OFFSET : _param_popupOffset, arrowProps = param.arrowProps, popupData = param.popupData, _param_shouldStopPropagation = param.shouldStopPropagation, shouldStopPropagation = _param_shouldStopPropagation === void 0 ? eventType === "click" : _param_shouldStopPropagation, _param_shouldHideOnScroll = param.shouldHideOnScroll, shouldHideOnScroll = _param_shouldHideOnScroll === void 0 ? false : _param_shouldHideOnScroll, _param_shouldRenderInBody = param.shouldRenderInBody, shouldRenderInBody = _param_shouldRenderInBody === void 0 ? true : _param_shouldRenderInBody, _param_canBeFlipped = param.canBeFlipped, canBeFlipped = _param_canBeFlipped === void 0 ? true : _param_canBeFlipped, _param_isTriggerWrapped = param.isTriggerWrapped, isTriggerWrapped = _param_isTriggerWrapped === void 0 ? eventType === "hover" : _param_isTriggerWrapped, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_shouldShowArrow = param.shouldShowArrow, shouldShowArrow = _param_shouldShowArrow === void 0 ? false : _param_shouldShowArrow, _param_isMinWidthSameAsTrigger = param.isMinWidthSameAsTrigger, isMinWidthSameAsTrigger = _param_isMinWidthSameAsTrigger === void 0 ? false : _param_isMinWidthSameAsTrigger, tweakStyles = param.tweakStyles, data = param.data, testId = param.testId, onToggle = param.onToggle;
-  var classes = useStyles$U({
+  var trigger = param.trigger, children = param.children, _param_middlewares = param.middlewares, middlewares = _param_middlewares === void 0 ? [] : _param_middlewares, _param_eventType = param.eventType, eventType = _param_eventType === void 0 ? "click" : _param_eventType, _param_placement = param.placement, placement = _param_placement === void 0 ? eventType === "click" ? "bottom-end" : "top" : _param_placement, _param_hoverDelay = param.hoverDelay, hoverDelay = _param_hoverDelay === void 0 ? 0 : _param_hoverDelay, _param_popupOffset = param.popupOffset, popupOffset = _param_popupOffset === void 0 ? DEFAULT_OFFSET : _param_popupOffset, _param_shouldStopPropagation = param.shouldStopPropagation, shouldStopPropagation = _param_shouldStopPropagation === void 0 ? true : _param_shouldStopPropagation, _param_shouldHideOnScroll = param.shouldHideOnScroll, shouldHideOnScroll = _param_shouldHideOnScroll === void 0 ? false : _param_shouldHideOnScroll, _param_shouldRenderInBody = param.shouldRenderInBody, shouldRenderInBody = _param_shouldRenderInBody === void 0 ? true : _param_shouldRenderInBody, _param_canBeFlipped = param.canBeFlipped, canBeFlipped = _param_canBeFlipped === void 0 ? true : _param_canBeFlipped, _param_isTriggerWrapped = param.isTriggerWrapped, isTriggerWrapped = _param_isTriggerWrapped === void 0 ? eventType === "hover" : _param_isTriggerWrapped, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, tweakStyles = param.tweakStyles, data = param.data, testId = param.testId, onToggle = param.onToggle;
+  var classes = useStyles$W({
     theme: tweakStyles
   });
   var _useState = _sliced_to_array$m(useState(false), 2), isOpen = _useState[0], setIsOpen = _useState[1];
-  var arrowRef = useRef(null);
   var handleToggle = function(isActive, event) {
     event === null || event === void 0 ? void 0 : event.stopPropagation();
     if (!isDisabled) {
@@ -8003,13 +8001,8 @@ var WithPopup = function(param) {
       offset$2(popupOffset),
       canBeFlipped && flip$2({
         fallbackAxisSideDirection: "start"
-      }),
-      isMinWidthSameAsTrigger && minWidthRelativeToTrigger
-    ].concat(_to_consumable_array$7(middlewares), [
-      shouldShowArrow && arrow$2({
-        element: arrowRef
       })
-    ]),
+    ].concat(_to_consumable_array$7(middlewares)),
     whileElementsMounted: autoUpdate,
     placement,
     onOpenChange: handleToggle
@@ -8043,17 +8036,17 @@ var WithPopup = function(param) {
       close: 500
     }
   }), isMounted = _useTransitionStatus.isMounted, status = _useTransitionStatus.status;
-  var referenceProps = getReferenceProps(_object_spread$_({
+  var referenceProps = getReferenceProps(_object_spread$11({
     ref: refs.setReference
   }, shouldStopPropagation && {
     onClick: stopPropagation
   }));
   var triggerElement = applyAction(trigger, {
     referenceProps: !isTriggerWrapped ? referenceProps : void 0,
-    triggerProps: _object_spread$_({
+    triggerProps: _object_spread$11({
       isActive: isOpen,
       isDisabled
-    }, !isTriggerWrapped && _object_spread$_({
+    }, !isTriggerWrapped && _object_spread$11({
       data,
       testId
     }, referenceProps))
@@ -8061,31 +8054,23 @@ var WithPopup = function(param) {
   var _obj2;
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      isTriggerWrapped ? /* @__PURE__ */ jsx("div", _object_spread_props$R(_object_spread$_({
-        className: clsx(classes.trigger, (_obj2 = {}, _define_property$10(_obj2, classes.clickable, eventType === "click"), _define_property$10(_obj2, classes.disabled, isDisabled), _define_property$10(_obj2, classes.active, isOpen), _obj2))
-      }, referenceProps, addDataAttributes$1(data, testId)), {
+      isTriggerWrapped ? /* @__PURE__ */ jsx("div", _object_spread_props$U(_object_spread$11({
+        className: clsx(classes.trigger, (_obj2 = {}, _define_property$13(_obj2, classes.clickable, eventType === "click"), _define_property$13(_obj2, classes.disabled, isDisabled), _define_property$13(_obj2, classes.active, isOpen), _obj2))
+      }, referenceProps, addDataTestId(testId), addDataAttributes$1(data)), {
         children: triggerElement
       })) : triggerElement,
       isMounted && /* @__PURE__ */ jsx(FloatingPortal, {
-        root: shouldRenderInBody ? document.body : refs.reference.current,
-        children: /* @__PURE__ */ jsx("div", _object_spread_props$R(_object_spread$_({
-          ref: refs.setFloating,
+        root: !shouldRenderInBody ? refs.reference.current : void 0,
+        children: /* @__PURE__ */ jsx("div", _object_spread_props$U(_object_spread$11({
           style: floatingStyles,
-          className: classes.popup
-        }, getFloatingProps(), addDataAttributes$1(popupData)), {
-          children: /* @__PURE__ */ jsxs("div", {
+          className: classes.popup,
+          ref: refs.setFloating
+        }, getFloatingProps()), {
+          children: /* @__PURE__ */ jsx("div", {
             className: classes["dropdown-".concat(status)],
-            children: [
-              shouldShowArrow && /* @__PURE__ */ jsx(FloatingArrow, _object_spread_props$R(_object_spread$_({}, arrowProps), {
-                ref: arrowRef,
-                context,
-                className: classes.arrow
-              })),
-              applyAction(children, {
-                floatingContext: context,
-                onClose: handleClose
-              })
-            ]
+            children: applyAction(children, {
+              onClose: handleClose
+            })
           })
         }))
       })
@@ -8095,7 +8080,7 @@ var WithPopup = function(param) {
 var ITEM_HORIZONTAL_PADDING = 16;
 var ICON_SIZE$1 = 20;
 var ICON_GAP = 12;
-var useStyles$T = createThemedStyles("ListItem", {
+var useStyles$V = createThemedStyles("ListItem", {
   root: {
     display: "flex",
     alignItems: "center",
@@ -8134,7 +8119,7 @@ var useStyles$T = createThemedStyles("ListItem", {
     flexGrow: 1
   }
 });
-function _define_property$$(obj, key, value) {
+function _define_property$12(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -8147,7 +8132,7 @@ function _define_property$$(obj, key, value) {
   }
   return obj;
 }
-function _object_spread$Z(target) {
+function _object_spread$10(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -8157,12 +8142,12 @@ function _object_spread$Z(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$$(target, key, source[key]);
+      _define_property$12(target, key, source[key]);
     });
   }
   return target;
 }
-function ownKeys$Q(object, enumerableOnly) {
+function ownKeys$T(object, enumerableOnly) {
   var keys2 = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -8175,12 +8160,12 @@ function ownKeys$Q(object, enumerableOnly) {
   }
   return keys2;
 }
-function _object_spread_props$Q(target, source) {
+function _object_spread_props$T(target, source) {
   source = source != null ? source : {};
   if (Object.getOwnPropertyDescriptors) {
     Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
   } else {
-    ownKeys$Q(Object(source)).forEach(function(key) {
+    ownKeys$T(Object(source)).forEach(function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -8188,7 +8173,7 @@ function _object_spread_props$Q(target, source) {
 }
 var ListItem = function(param) {
   var icon = param.icon, item = param.item, nestedItems = param.nestedItems, isDisabled = param.disabled, isFocused = param.isFocused, shouldDrawSpacerAbove = param.shouldDrawSpacerAbove, shouldDrawSpacerBelow = param.shouldDrawSpacerBelow, testId = param.testId, tweakStyles = param.tweakStyles, _param_view = param.view, view = _param_view === void 0 ? "default" : _param_view, withIconGap = param.withIconGap, data = param.data, onClick = param.onClick;
-  var classes = useStyles$T({
+  var classes = useStyles$V({
     theme: tweakStyles
   });
   var _obj2;
@@ -8197,9 +8182,9 @@ var ListItem = function(param) {
       shouldDrawSpacerAbove && /* @__PURE__ */ jsx("div", {
         className: classes.spacer
       }),
-      /* @__PURE__ */ jsxs("div", _object_spread_props$Q(_object_spread$Z({
-        className: clsx(classes.root, classes[view], (_obj2 = {}, _define_property$$(_obj2, classes.disabledItem, isDisabled), _define_property$$(_obj2, classes.withIconGap, withIconGap), _define_property$$(_obj2, classes.focused, isFocused), _obj2))
-      }, addClickHandler(onClick, !isDisabled), addDataTestId(testId), addDataAttributes(_object_spread_props$Q(_object_spread$Z({}, data), {
+      /* @__PURE__ */ jsxs("div", _object_spread_props$T(_object_spread$10({
+        className: clsx(classes.root, classes[view], (_obj2 = {}, _define_property$12(_obj2, classes.disabledItem, isDisabled), _define_property$12(_obj2, classes.withIconGap, withIconGap), _define_property$12(_obj2, classes.focused, isFocused), _obj2))
+      }, addClickHandler(onClick, !isDisabled), addDataTestId(testId), addDataAttributes(_object_spread_props$T(_object_spread$10({}, data), {
         disabled: isDisabled ? true : void 0
       }))), {
         children: [
@@ -8225,7 +8210,7 @@ var ListItem = function(param) {
     ]
   });
 };
-var useStyles$S = createThemedStyles("List", {
+var useStyles$U = createThemedStyles("List", {
   root: {
     minWidth: 180,
     backgroundColor: colors.CLASSIC_WHITE,
@@ -8241,12 +8226,12 @@ var useStyles$S = createThemedStyles("List", {
     paddingLeft: 4
   }
 });
-var withPopupStyles$1 = {
+var withPopupStyles = {
   trigger: {
     width: "100%"
   }
 };
-function _define_property$_(obj, key, value) {
+function _define_property$11(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -8259,7 +8244,7 @@ function _define_property$_(obj, key, value) {
   }
   return obj;
 }
-function _object_spread$Y(target) {
+function _object_spread$$(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -8269,12 +8254,12 @@ function _object_spread$Y(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$_(target, key, source[key]);
+      _define_property$11(target, key, source[key]);
     });
   }
   return target;
 }
-function ownKeys$P(object, enumerableOnly) {
+function ownKeys$S(object, enumerableOnly) {
   var keys2 = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -8287,12 +8272,12 @@ function ownKeys$P(object, enumerableOnly) {
   }
   return keys2;
 }
-function _object_spread_props$P(target, source) {
+function _object_spread_props$S(target, source) {
   source = source != null ? source : {};
   if (Object.getOwnPropertyDescriptors) {
     Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
   } else {
-    ownKeys$P(Object(source)).forEach(function(key) {
+    ownKeys$S(Object(source)).forEach(function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -8300,7 +8285,7 @@ function _object_spread_props$P(target, source) {
 }
 var List = function(param) {
   var items = param.items, testId = param.testId, data = param.data, tweakStyles = param.tweakStyles, onClick = param.onClick;
-  var classes = useStyles$S({
+  var classes = useStyles$U({
     theme: tweakStyles
   });
   var handleItemClick = function(event, param2) {
@@ -8310,11 +8295,11 @@ var List = function(param) {
       onClick === null || onClick === void 0 ? void 0 : onClick(event);
     }
   };
-  return /* @__PURE__ */ jsx("div", _object_spread_props$P(_object_spread$Y({
+  return /* @__PURE__ */ jsx("div", _object_spread_props$S(_object_spread$$({
     className: classes.root
   }, addDataTestId(testId), addDataAttributes(data)), {
     children: items.map(function(item, i) {
-      var itemProps = _object_spread_props$P(_object_spread$Y({
+      var itemProps = _object_spread_props$S(_object_spread$$({
         testId: getTestId(testId, "item-".concat(i))
       }, item), {
         shouldDrawSpacerAbove: item.shouldDrawSpacerAbove && i !== 0,
@@ -8326,13 +8311,13 @@ var List = function(param) {
       return /* @__PURE__ */ jsx(Fragment$1, {
         children: isArrayNotEmpty(item.nestedItems) ? /* @__PURE__ */ jsx(WithPopup, {
           eventType: "hover",
-          tweakStyles: withPopupStyles$1,
+          tweakStyles: withPopupStyles,
           placement: "right-start",
           popupOffset: 0,
           shouldRenderInBody: false,
           trigger: function(param2) {
             var triggerProps = param2.triggerProps;
-            return /* @__PURE__ */ jsx(ListItem, _object_spread_props$P(_object_spread$Y({}, itemProps), {
+            return /* @__PURE__ */ jsx(ListItem, _object_spread_props$S(_object_spread$$({}, itemProps), {
               isFocused: triggerProps.isActive
             }));
           },
@@ -8343,13 +8328,13 @@ var List = function(param) {
               onClick
             })
           })
-        }) : /* @__PURE__ */ jsx(ListItem, _object_spread$Y({}, itemProps))
+        }) : /* @__PURE__ */ jsx(ListItem, _object_spread$$({}, itemProps))
       }, i);
     })
   }));
 };
 var ANIMATION_TIMEOUT = 150;
-function _define_property$Z(obj, key, value) {
+function _define_property$10(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -8362,7 +8347,7 @@ function _define_property$Z(obj, key, value) {
   }
   return obj;
 }
-function _object_spread$X(target) {
+function _object_spread$_(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -8372,12 +8357,12 @@ function _object_spread$X(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$Z(target, key, source[key]);
+      _define_property$10(target, key, source[key]);
     });
   }
   return target;
 }
-var useStyles$R = createThemedStyles("AccountInfo", _object_spread$X({
+var useStyles$T = createThemedStyles("AccountInfo", _object_spread$_({
   root: {
     display: "flex"
   },
@@ -8431,7 +8416,7 @@ function _array_with_holes$l(arr) {
   if (Array.isArray(arr))
     return arr;
 }
-function _define_property$Y(obj, key, value) {
+function _define_property$$(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -8475,7 +8460,7 @@ function _iterable_to_array_limit$l(arr, i) {
 function _non_iterable_rest$l() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$W(target) {
+function _object_spread$Z(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -8485,12 +8470,12 @@ function _object_spread$W(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$Y(target, key, source[key]);
+      _define_property$$(target, key, source[key]);
     });
   }
   return target;
 }
-function ownKeys$O(object, enumerableOnly) {
+function ownKeys$R(object, enumerableOnly) {
   var keys2 = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -8503,12 +8488,12 @@ function ownKeys$O(object, enumerableOnly) {
   }
   return keys2;
 }
-function _object_spread_props$O(target, source) {
+function _object_spread_props$R(target, source) {
   source = source != null ? source : {};
   if (Object.getOwnPropertyDescriptors) {
     Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
   } else {
-    ownKeys$O(Object(source)).forEach(function(key) {
+    ownKeys$R(Object(source)).forEach(function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -8532,7 +8517,7 @@ function _unsupported_iterable_to_array$l(o, minLen) {
 }
 var AccountInfo = function(param) {
   var data = param.data, testId = param.testId, avatar = param.avatar, tweakStyles = param.tweakStyles, accountName = param.accountName, options = param.options;
-  var classes = useStyles$R({
+  var classes = useStyles$T({
     theme: tweakStyles
   });
   var tweakListStyles = useTweakStyles({
@@ -8552,7 +8537,7 @@ var AccountInfo = function(param) {
   useOnClickOutsideWithRef(dropdownRef, function() {
     return setIsMenuOpen(false);
   }, nameRef);
-  return /* @__PURE__ */ jsxs("div", _object_spread_props$O(_object_spread$W({
+  return /* @__PURE__ */ jsxs("div", _object_spread_props$R(_object_spread$Z({
     className: classes.root
   }, addDataTestId(testId), addDataAttributes(data)), {
     children: [
@@ -8602,7 +8587,7 @@ var AccountInfo = function(param) {
     ]
   }));
 };
-var useStyles$Q = createThemedStyles("AddButton", {
+var useStyles$S = createThemedStyles("AddButton", {
   root: {
     display: "flex",
     alignItems: "center",
@@ -8628,7 +8613,7 @@ var useStyles$Q = createThemedStyles("AddButton", {
     width: "100%"
   }
 });
-function _define_property$X(obj, key, value) {
+function _define_property$_(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -8641,7 +8626,7 @@ function _define_property$X(obj, key, value) {
   }
   return obj;
 }
-function _object_spread$V(target) {
+function _object_spread$Y(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -8651,12 +8636,12 @@ function _object_spread$V(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$X(target, key, source[key]);
+      _define_property$_(target, key, source[key]);
     });
   }
   return target;
 }
-function ownKeys$N(object, enumerableOnly) {
+function ownKeys$Q(object, enumerableOnly) {
   var keys2 = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -8669,12 +8654,12 @@ function ownKeys$N(object, enumerableOnly) {
   }
   return keys2;
 }
-function _object_spread_props$N(target, source) {
+function _object_spread_props$Q(target, source) {
   source = source != null ? source : {};
   if (Object.getOwnPropertyDescriptors) {
     Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
   } else {
-    ownKeys$N(Object(source)).forEach(function(key) {
+    ownKeys$Q(Object(source)).forEach(function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -8682,10 +8667,10 @@ function _object_spread_props$N(target, source) {
 }
 var AddButton = function(param) {
   var text = param.text, _param_type = param.type, type = _param_type === void 0 ? "button" : _param_type, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, onClick = param.onClick, _param_isFullWidth = param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? false : _param_isFullWidth, data = param.data, testId = param.testId, tweakStyles = param.tweakStyles;
-  var classes = useStyles$Q({
+  var classes = useStyles$S({
     theme: tweakStyles
   });
-  return /* @__PURE__ */ jsxs("button", _object_spread_props$N(_object_spread$V({
+  return /* @__PURE__ */ jsxs("button", _object_spread_props$Q(_object_spread$Y({
     type,
     className: clsx(classes.root, isDisabled && classes.disabled, isFullWidth && classes.fullWidth),
     onClick: !isDisabled ? onClick : void 0,
@@ -8704,7 +8689,7 @@ var AddButton = function(param) {
     ]
   }));
 };
-var useStyles$P = createThemedStyles("DotsPreloader", {
+var useStyles$R = createThemedStyles("DotsPreloader", {
   root: {
     display: "flex",
     gap: 4,
@@ -8750,7 +8735,7 @@ var useStyles$P = createThemedStyles("DotsPreloader", {
 });
 var DotsPreloader = function(param) {
   var tweakStyles = param.tweakStyles;
-  var classes = useStyles$P({
+  var classes = useStyles$R({
     theme: tweakStyles
   });
   return /* @__PURE__ */ jsx("div", {
@@ -8816,7 +8801,7 @@ var DefaultPreloader = function() {
     ]
   });
 };
-var useStyles$O = createThemedStyles("SvgPreloader", {
+var useStyles$Q = createThemedStyles("SvgPreloader", {
   root: {
     display: "flex",
     width: "100%",
@@ -8826,7 +8811,7 @@ var useStyles$O = createThemedStyles("SvgPreloader", {
 var SvgPreloader = function(param) {
   var _param_type = param.type, type = _param_type === void 0 ? "default" : _param_type, tweakStyles = param.tweakStyles;
   var _theme_preloaders;
-  var classes = useStyles$O({
+  var classes = useStyles$Q({
     theme: tweakStyles
   });
   var theme = useContext(ThemeContext).theme;
@@ -8840,7 +8825,7 @@ var SvgPreloader = function(param) {
     }
   }) : /* @__PURE__ */ jsx(PreloaderIcon, {});
 };
-var useStyles$N = createThemedStyles("ThemedPreloader", {
+var useStyles$P = createThemedStyles("ThemedPreloader", {
   root: {
     display: "flex"
   },
@@ -8851,7 +8836,7 @@ var useStyles$N = createThemedStyles("ThemedPreloader", {
     color: "currentColor"
   }
 });
-function _define_property$W(obj, key, value) {
+function _define_property$Z(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -8864,7 +8849,7 @@ function _define_property$W(obj, key, value) {
   }
   return obj;
 }
-function _object_spread$U(target) {
+function _object_spread$X(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -8874,12 +8859,12 @@ function _object_spread$U(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$W(target, key, source[key]);
+      _define_property$Z(target, key, source[key]);
     });
   }
   return target;
 }
-function ownKeys$M(object, enumerableOnly) {
+function ownKeys$P(object, enumerableOnly) {
   var keys2 = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -8892,12 +8877,12 @@ function ownKeys$M(object, enumerableOnly) {
   }
   return keys2;
 }
-function _object_spread_props$M(target, source) {
+function _object_spread_props$P(target, source) {
   source = source != null ? source : {};
   if (Object.getOwnPropertyDescriptors) {
     Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
   } else {
-    ownKeys$M(Object(source)).forEach(function(key) {
+    ownKeys$P(Object(source)).forEach(function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -8905,7 +8890,7 @@ function _object_spread_props$M(target, source) {
 }
 var ThemedPreloader = function(param) {
   var _param_type = param.type, type = _param_type === void 0 ? "default" : _param_type, _param_useCurrentColor = param.useCurrentColor, useCurrentColor = _param_useCurrentColor === void 0 ? false : _param_useCurrentColor, data = param.data, testId = param.testId, tweakStyles = param.tweakStyles;
-  var classes = useStyles$N({
+  var classes = useStyles$P({
     theme: tweakStyles
   });
   var tweakDotsPreloaderStyles = useTweakStyles({
@@ -8918,8 +8903,8 @@ var ThemedPreloader = function(param) {
     className: "tweakSvgPreloader",
     currentComponentName: "ThemedPreloader"
   });
-  return /* @__PURE__ */ jsx("div", _object_spread_props$M(_object_spread$U({
-    className: clsx(classes.root, classes[type], _define_property$W({}, classes.currentColor, useCurrentColor))
+  return /* @__PURE__ */ jsx("div", _object_spread_props$P(_object_spread$X({
+    className: clsx(classes.root, classes[type], _define_property$Z({}, classes.currentColor, useCurrentColor))
   }, addDataTestId(testId), addDataAttributes(data)), {
     children: type === "dots" ? /* @__PURE__ */ jsx(DotsPreloader, {
       tweakStyles: tweakDotsPreloaderStyles
@@ -8929,7 +8914,7 @@ var ThemedPreloader = function(param) {
     })
   }));
 };
-var useStyles$M = createThemedStyles("Button", {
+var useStyles$O = createThemedStyles("Button", {
   root: {
     display: "flex",
     justifyContent: "center",
@@ -9097,10 +9082,10 @@ var dotsPreloaderStyles = {
     }
   }
 };
-var getPreloaderStyles = function(size2) {
-  return size2 === "s" || size2 === "m" ? dotsPreloaderStyles : void 0;
+var getPreloaderStyles = function(size) {
+  return size === "s" || size === "m" ? dotsPreloaderStyles : void 0;
 };
-function _define_property$V(obj, key, value) {
+function _define_property$Y(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -9113,7 +9098,7 @@ function _define_property$V(obj, key, value) {
   }
   return obj;
 }
-function _object_spread$T(target) {
+function _object_spread$W(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -9123,12 +9108,12 @@ function _object_spread$T(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$V(target, key, source[key]);
+      _define_property$Y(target, key, source[key]);
     });
   }
   return target;
 }
-function ownKeys$L(object, enumerableOnly) {
+function ownKeys$O(object, enumerableOnly) {
   var keys2 = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -9141,21 +9126,21 @@ function ownKeys$L(object, enumerableOnly) {
   }
   return keys2;
 }
-function _object_spread_props$L(target, source) {
+function _object_spread_props$O(target, source) {
   source = source != null ? source : {};
   if (Object.getOwnPropertyDescriptors) {
     Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
   } else {
-    ownKeys$L(Object(source)).forEach(function(key) {
+    ownKeys$O(Object(source)).forEach(function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
   return target;
 }
-function _object_without_properties$h(source, excluded) {
+function _object_without_properties$j(source, excluded) {
   if (source == null)
     return {};
-  var target = _object_without_properties_loose$h(source, excluded);
+  var target = _object_without_properties_loose$j(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -9170,7 +9155,7 @@ function _object_without_properties$h(source, excluded) {
   }
   return target;
 }
-function _object_without_properties_loose$h(source, excluded) {
+function _object_without_properties_loose$j(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -9185,7 +9170,7 @@ function _object_without_properties_loose$h(source, excluded) {
   return target;
 }
 var Button = /* @__PURE__ */ forwardRef(function(_param, ref) {
-  var _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, children = _param.children, _param_size = _param.size, size2 = _param_size === void 0 ? "l" : _param_size, _param_view = _param.view, view = _param_view === void 0 ? "primary" : _param_view, _param_isFullWidth = _param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? false : _param_isFullWidth, _param_isInline = _param.isInline, isInline = _param_isInline === void 0 ? false : _param_isInline, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_shouldSkipTabNavigation = _param.shouldSkipTabNavigation, shouldSkipTabNavigation = _param_shouldSkipTabNavigation === void 0 ? false : _param_shouldSkipTabNavigation, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, icon = _param.icon, _param_iconPosition = _param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_preloaderType = _param.preloaderType, preloaderType = _param_preloaderType === void 0 ? "dots" : _param_preloaderType, interactions = _object_without_properties$h(_param, [
+  var _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, children = _param.children, _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, _param_view = _param.view, view = _param_view === void 0 ? "primary" : _param_view, _param_isFullWidth = _param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? false : _param_isFullWidth, _param_isInline = _param.isInline, isInline = _param_isInline === void 0 ? false : _param_isInline, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_shouldSkipTabNavigation = _param.shouldSkipTabNavigation, shouldSkipTabNavigation = _param_shouldSkipTabNavigation === void 0 ? false : _param_shouldSkipTabNavigation, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, icon = _param.icon, _param_iconPosition = _param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_preloaderType = _param.preloaderType, preloaderType = _param_preloaderType === void 0 ? "dots" : _param_preloaderType, interactions = _object_without_properties$j(_param, [
     "type",
     "children",
     "size",
@@ -9203,11 +9188,11 @@ var Button = /* @__PURE__ */ forwardRef(function(_param, ref) {
     "iconPosition",
     "preloaderType"
   ]);
-  var classes = useStyles$M({
+  var classes = useStyles$O({
     theme: tweakStyles
   });
   var tweakPreloaderStyles = useTweakStyles({
-    innerStyles: getPreloaderStyles(size2),
+    innerStyles: getPreloaderStyles(size),
     tweakStyles,
     className: "tweakPreloader",
     currentComponentName: "Button"
@@ -9216,16 +9201,16 @@ var Button = /* @__PURE__ */ forwardRef(function(_param, ref) {
   var hasChildren = isReactNodeNotEmpty(children);
   var hasNoAction = isDisabled || isLoading;
   var _obj2, _obj1;
-  return /* @__PURE__ */ jsxs("button", _object_spread_props$L(_object_spread$T({
+  return /* @__PURE__ */ jsxs("button", _object_spread_props$O(_object_spread$W({
     ref,
     type,
-    className: clsx(classes.root, classes[size2], classes[view], (_obj2 = {}, _define_property$V(_obj2, classes.disabled, isDisabled), _define_property$V(_obj2, classes.fullWidth, isFullWidth), _define_property$V(_obj2, classes.inline, isInline), _define_property$V(_obj2, classes.active, isActive), _define_property$V(_obj2, classes.loading, isLoading), _define_property$V(_obj2, classes.onlyIcon, hasIcon && !hasChildren), _obj2)),
+    className: clsx(classes.root, classes[size], classes[view], (_obj2 = {}, _define_property$Y(_obj2, classes.disabled, isDisabled), _define_property$Y(_obj2, classes.fullWidth, isFullWidth), _define_property$Y(_obj2, classes.inline, isInline), _define_property$Y(_obj2, classes.active, isActive), _define_property$Y(_obj2, classes.loading, isLoading), _define_property$Y(_obj2, classes.onlyIcon, hasIcon && !hasChildren), _obj2)),
     tabIndex: shouldSkipTabNavigation ? -1 : void 0,
     disabled: hasNoAction
   }, interactions, addDataTestId(testId), addDataAttributes(data)), {
     children: [
       /* @__PURE__ */ jsxs("span", {
-        className: clsx(classes.content, (_obj1 = {}, _define_property$V(_obj1, classes.iconFromRight, hasChildren && hasIcon && iconPosition === "right"), _define_property$V(_obj1, classes.iconFromLeft, hasChildren && hasIcon && iconPosition === "left"), _obj1)),
+        className: clsx(classes.content, (_obj1 = {}, _define_property$Y(_obj1, classes.iconFromRight, hasChildren && hasIcon && iconPosition === "right"), _define_property$Y(_obj1, classes.iconFromLeft, hasChildren && hasIcon && iconPosition === "left"), _obj1)),
         children: [
           hasIcon && /* @__PURE__ */ jsx("span", {
             className: classes.icon,
@@ -9248,7 +9233,7 @@ var Button = /* @__PURE__ */ forwardRef(function(_param, ref) {
     ]
   }));
 });
-var useStyles$L = createThemedStyles("Checkbox", {
+var useStyles$N = createThemedStyles("Checkbox", {
   root: {
     cursor: "pointer",
     display: "flex",
@@ -9286,7 +9271,7 @@ var useStyles$L = createThemedStyles("Checkbox", {
     flexDirection: "row-reverse"
   }
 });
-function _define_property$U(obj, key, value) {
+function _define_property$X(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -9299,7 +9284,7 @@ function _define_property$U(obj, key, value) {
   }
   return obj;
 }
-function _object_spread$S(target) {
+function _object_spread$V(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -9309,12 +9294,12 @@ function _object_spread$S(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$U(target, key, source[key]);
+      _define_property$X(target, key, source[key]);
     });
   }
   return target;
 }
-function ownKeys$K(object, enumerableOnly) {
+function ownKeys$N(object, enumerableOnly) {
   var keys2 = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -9327,12 +9312,12 @@ function ownKeys$K(object, enumerableOnly) {
   }
   return keys2;
 }
-function _object_spread_props$K(target, source) {
+function _object_spread_props$N(target, source) {
   source = source != null ? source : {};
   if (Object.getOwnPropertyDescriptors) {
     Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
   } else {
-    ownKeys$K(Object(source)).forEach(function(key) {
+    ownKeys$N(Object(source)).forEach(function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -9340,7 +9325,7 @@ function _object_spread_props$K(target, source) {
 }
 function Checkbox(param) {
   var value = param.value, children = param.children, _param_isChecked = param.isChecked, isChecked = _param_isChecked === void 0 ? false : _param_isChecked, _param_isSemiChecked = param.isSemiChecked, isSemiChecked = _param_isSemiChecked === void 0 ? false : _param_isSemiChecked, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isReadonly = param.isReadonly, isReadonly = _param_isReadonly === void 0 ? false : _param_isReadonly, _param_labelPosition = param.labelPosition, labelPosition = _param_labelPosition === void 0 ? "right" : _param_labelPosition, data = param.data, testId = param.testId, tweakStyles = param.tweakStyles, onSelect = param.onSelect;
-  var classes = useStyles$L({
+  var classes = useStyles$N({
     theme: tweakStyles
   });
   var hasAction = !isDisabled && !isReadonly;
@@ -9352,11 +9337,11 @@ function Checkbox(param) {
     }, event);
   };
   var _obj2;
-  return /* @__PURE__ */ jsxs("label", _object_spread_props$K(_object_spread$S({
-    className: clsx(classes.root, (_obj2 = {}, _define_property$U(_obj2, classes.checked, isSelected), _define_property$U(_obj2, classes.invalid, isInvalid), _define_property$U(_obj2, classes.disabled, isDisabled), _define_property$U(_obj2, classes.labelPositionLeft, labelPosition === "left"), _obj2))
+  return /* @__PURE__ */ jsxs("label", _object_spread_props$N(_object_spread$V({
+    className: clsx(classes.root, (_obj2 = {}, _define_property$X(_obj2, classes.checked, isSelected), _define_property$X(_obj2, classes.invalid, isInvalid), _define_property$X(_obj2, classes.disabled, isDisabled), _define_property$X(_obj2, classes.labelPositionLeft, labelPosition === "left"), _obj2))
   }, addDataTestId(testId), addDataAttributes(data)), {
     children: [
-      /* @__PURE__ */ jsx("input", _object_spread$S({
+      /* @__PURE__ */ jsx("input", _object_spread$V({
         className: classes.input,
         type: "checkbox",
         checked: isSelected,
@@ -9379,7 +9364,7 @@ function Checkbox(param) {
     ]
   }));
 }
-var useStyles$K = createThemedStyles("CloseButton", {
+var useStyles$M = createThemedStyles("CloseButton", {
   root: {
     width: 40,
     height: 40,
@@ -9405,7 +9390,7 @@ var useStyles$K = createThemedStyles("CloseButton", {
     }
   }
 });
-function _define_property$T(obj, key, value) {
+function _define_property$W(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -9418,7 +9403,7 @@ function _define_property$T(obj, key, value) {
   }
   return obj;
 }
-function _object_spread$R(target) {
+function _object_spread$U(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -9428,12 +9413,12 @@ function _object_spread$R(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$T(target, key, source[key]);
+      _define_property$W(target, key, source[key]);
     });
   }
   return target;
 }
-function ownKeys$J(object, enumerableOnly) {
+function ownKeys$M(object, enumerableOnly) {
   var keys2 = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -9446,33 +9431,33 @@ function ownKeys$J(object, enumerableOnly) {
   }
   return keys2;
 }
-function _object_spread_props$J(target, source) {
+function _object_spread_props$M(target, source) {
   source = source != null ? source : {};
   if (Object.getOwnPropertyDescriptors) {
     Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
   } else {
-    ownKeys$J(Object(source)).forEach(function(key) {
+    ownKeys$M(Object(source)).forEach(function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
   return target;
 }
 var CloseButton = function(param) {
-  var tweakStyles = param.tweakStyles, testId = param.testId, data = param.data, _param_iconType = param.iconType, iconType = _param_iconType === void 0 ? "close" : _param_iconType, onClose = param.onClose;
-  var classes = useStyles$K({
+  var tweakStyles = param.tweakStyles, testId = param.testId, data = param.data, _param_icon = param.icon, icon = _param_icon === void 0 ? "close" : _param_icon, onClose = param.onClose;
+  var classes = useStyles$M({
     theme: tweakStyles
   });
-  return /* @__PURE__ */ jsx("button", _object_spread_props$J(_object_spread$R({
+  return /* @__PURE__ */ jsx("button", _object_spread_props$M(_object_spread$U({
     type: "button",
     className: classes.root,
     onClick: onClose
   }, addDataTestId(testId), addDataAttributes(data)), {
     children: /* @__PURE__ */ jsx(Icon, {
-      type: iconType
+      type: icon
     })
   }));
 };
-var useStyles$J = createThemedStyles({
+var useStyles$L = createThemedStyles({
   root: {
     display: "flex",
     flexWrap: "wrap"
@@ -9565,7 +9550,7 @@ function _unsupported_iterable_to_array$k(o, minLen) {
     return _array_like_to_array$k(o, minLen);
 }
 var Colors = function() {
-  var classes = useStyles$J();
+  var classes = useStyles$L();
   var theme = useContext(ThemeContext).theme;
   var _theme_colors = theme.colors, colors2 = _theme_colors === void 0 ? {} : _theme_colors;
   return /* @__PURE__ */ jsx("div", {
@@ -9595,7 +9580,7 @@ var Colors = function() {
     })
   });
 };
-var useStyles$I = createThemedStyles("CssBaseline", {
+var useStyles$K = createThemedStyles("CssBaseline", {
   "@global html, body": {
     fontFamily: "Arial, sans-serif",
     color: colors.FONT_MAIN,
@@ -9604,7 +9589,7 @@ var useStyles$I = createThemedStyles("CssBaseline", {
   },
   root: {}
 });
-function _define_property$S(obj, key, value) {
+function _define_property$V(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -9617,7 +9602,7 @@ function _define_property$S(obj, key, value) {
   }
   return obj;
 }
-function _object_spread$Q(target) {
+function _object_spread$T(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -9627,296 +9612,482 @@ function _object_spread$Q(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$S(target, key, source[key]);
+      _define_property$V(target, key, source[key]);
     });
   }
   return target;
 }
 var CssBaseline = function(param) {
   var data = param.data, testId = param.testId, tweakStyles = param.tweakStyles;
-  var classes = useStyles$I({
+  var classes = useStyles$K({
     theme: tweakStyles
   });
-  return /* @__PURE__ */ jsx("div", _object_spread$Q({
+  return /* @__PURE__ */ jsx("div", _object_spread$T({
     className: classes.root
   }, addDataTestId(testId), addDataAttributes(data)));
 };
-var DEFAULT_SIZE = 6;
-var PADDING_X$1 = 12;
-var AUTOSIZE_MAX_WIDTH = 480;
-var useStyles$H = createThemedStyles("Input", {
+var useStyles$J = createThemedStyles("ControlGroup", {
   root: {
-    width: "100%",
-    boxSizing: "border-box",
-    position: "relative"
-  },
-  inputWrapper: {
     display: "flex",
-    width: "100%",
-    height: dimensions.CONTROL_HEIGHT,
-    boxSizing: "border-box",
-    transition: animations.defaultTransition,
-    transitionProperty: "border-color",
-    backgroundColor: "white",
-    position: "relative"
+    flexDirection: "column",
+    width: "100%"
   },
-  inputContent: {
-    fontSize: 16,
-    fontFamily: "inherit",
-    padding: [
-      0,
-      PADDING_X$1
-    ]
+  error: {
+    color: "red"
   },
-  input: {
-    extend: "inputContent",
-    width: "100%",
-    height: "100%",
-    outline: "none",
-    boxSizing: "border-box",
-    outlineStyle: "none",
-    transition: animations.defaultTransition,
-    transitionProperty: "background-color",
-    border: "none",
-    background: "none",
-    "&::placeholder": {
-      opacity: 1
-    },
-    MozAppearance: "textfield",
-    "&::-webkit-inner-spin-button,&::-webkit-outer-spin-button": {
-      WebkitAppearance: "none",
-      margin: 0
-    }
+  info: {
+    color: "gray"
   },
-  autosize: {
-    display: "inline-grid",
-    verticalAlign: "top",
-    alignItems: "center",
-    justifyContent: "start",
-    "&::after, input": {
-      width: "auto",
-      minWidth: "1em",
-      gridArea: "1 / 2",
-      font: "inherit",
-      justifySelf: "stretch"
-    },
-    "&::after": {
-      maxWidth: AUTOSIZE_MAX_WIDTH,
-      content: 'attr(data-value) " "',
-      visibility: "hidden",
-      whiteSpace: "pre-wrap"
+  horizontal: {
+    display: "flex",
+    "& > *": {
+      flexGrow: 1,
+      "&:not(:first-child)": {
+        marginLeft: -1
+      }
     }
   },
-  focused: {
-    position: "relative",
-    zIndex: 1
-  },
-  unitsWrapper: {
-    extend: "inputContent",
-    position: "absolute",
-    left: 0,
-    height: "100%",
-    boxSizing: "border-box",
+  vertical: {
     display: "flex",
-    alignItems: "center",
-    pointerEvents: "none"
+    flexDirection: "column",
+    "& > *:not(:first-child)": {
+      marginTop: -1
+    }
   },
-  fakeValue: {
-    visibility: "hidden"
-  },
-  units: {
-    paddingLeft: 4
+  message: {
+    fontSize: 12
   },
-  withFloatingLabel: {
-    paddingTop: 18
+  children: {}
+});
+function _define_property$U(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _object_spread$S(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    var ownKeys2 = Object.keys(source);
+    if (typeof Object.getOwnPropertySymbols === "function") {
+      ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+      }));
+    }
+    ownKeys2.forEach(function(key) {
+      _define_property$U(target, key, source[key]);
+    });
+  }
+  return target;
+}
+function ownKeys$L(object, enumerableOnly) {
+  var keys2 = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) {
+      symbols = symbols.filter(function(sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+    keys2.push.apply(keys2, symbols);
+  }
+  return keys2;
+}
+function _object_spread_props$L(target, source) {
+  source = source != null ? source : {};
+  if (Object.getOwnPropertyDescriptors) {
+    Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+  } else {
+    ownKeys$L(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+var ControlGroup = /* @__PURE__ */ forwardRef(function(param, ref) {
+  var children = param.children, infoMessage = param.infoMessage, errorMessage = param.errorMessage, direction = param.direction, tweakStyles = param.tweakStyles, testId = param.testId, data = param.data;
+  var classes = useStyles$J({
+    theme: tweakStyles
+  });
+  var shouldShowError = isReactNodeNotEmpty(errorMessage);
+  var shouldShowInfo = isReactNodeNotEmpty(infoMessage) && !shouldShowError;
+  var _obj2;
+  return /* @__PURE__ */ jsxs("div", _object_spread_props$L(_object_spread$S({
+    ref,
+    className: classes.root,
+    "data-invalid": shouldShowError ? true : void 0
+  }, addDataAttributes$1(data, testId)), {
+    children: [
+      isReactNodeNotEmpty(children) && /* @__PURE__ */ jsx("div", {
+        className: clsx(classes.children, (_obj2 = {}, _define_property$U(_obj2, classes.horizontal, direction === "horizontal"), _define_property$U(_obj2, classes.vertical, direction === "vertical"), _obj2)),
+        children
+      }),
+      (shouldShowError || shouldShowInfo) && /* @__PURE__ */ jsxs("div", {
+        className: classes.message,
+        children: [
+          shouldShowError && /* @__PURE__ */ jsx("div", _object_spread_props$L(_object_spread$S({
+            className: classes.error
+          }, addDataTestId(testId, "error")), {
+            children: errorMessage
+          })),
+          shouldShowInfo && /* @__PURE__ */ jsx("div", _object_spread_props$L(_object_spread$S({
+            className: classes.info
+          }, addDataTestId(testId, "info")), {
+            children: infoMessage
+          }))
+        ]
+      })
+    ]
+  }));
+});
+var CONTROL$1 = dimensions.CONTROL, Z_INDEX$2 = dimensions.Z_INDEX;
+var useStyles$I = createThemedStyles("ControlWrapper", {
+  root: {
+    "--control-height": "".concat(CONTROL$1.HEIGHT - 2, "px"),
+    // borders
+    "--control-padding": "".concat(CONTROL$1.PADDING, "px"),
+    "--icon-size": "".concat(CONTROL$1.ICON_SIZE, "px"),
+    "--icon-inner-size": "".concat(CONTROL$1.ICON_INNER_SIZE, "px"),
+    "--icon-gap": "".concat(CONTROL$1.ICON_GAP, "px"),
+    display: "flex",
+    width: "100%",
+    backgroundColor: "white",
+    position: "relative",
+    border: [
+      "solid",
+      1,
+      "gray"
+    ],
+    borderRadius: 8,
+    boxSizing: "border-box",
+    zIndex: 0
   },
-  floatingLabelWithoutPadding: {
-    paddingTop: 18,
-    paddingLeft: 0
+  invalid: {
+    zIndex: Z_INDEX$2.CONTROL_INVALID
   },
-  floating: {},
-  activeLabel: {
-    display: "none",
-    "&$floating": {
-      display: "block",
-      transform: "scale(0.75) translateY(-120%)"
-    }
+  disabled: {},
+  focused: {
+    position: "relative",
+    zIndex: Z_INDEX$2.CONTROL_FOCUS
   },
-  required: {
-    "&:before": {
-      content: '""',
-      position: "absolute",
-      left: -12,
-      top: "50%",
-      transform: "translate(0, -50%)",
-      width: 6,
-      height: 6,
-      borderRadius: "50%"
-    }
+  withValue: {},
+  loading: {},
+  minContent: {
+    width: "min-content"
   },
   label: {
     position: "absolute",
     pointerEvents: "none",
-    left: PADDING_X$1,
+    left: "var(--control-padding)",
     top: "50%",
     transformOrigin: "top left",
     transform: "translateY(-50%)",
     transition: animations.defaultTransition,
     transitionProperty: "transform, color",
-    fontSize: 16
-  },
-  floatingWithoutPadding: {
-    left: 0
+    fontSize: 16,
+    zIndex: 1
   },
+  activeLabel: {},
   requiredLabel: {
     "&:after": {
       content: '""',
+      display: "block",
       position: "absolute",
+      top: 0,
       right: -8,
-      top: 4,
-      transform: "translate(0, -50%)",
       width: 6,
       height: 6,
-      borderRadius: "50%"
+      borderRadius: "50%",
+      backgroundColor: "orange"
     }
   },
-  activeIcon: {
-    cursor: "pointer"
+  disabledLabel: {},
+  wrapper: {
+    display: "flex",
+    flexGrow: 1,
+    minWidth: 0,
+    // Нужно для селекта
+    textAlign: "left"
   },
-  "border-top": {
-    borderRadius: 0,
-    borderWidth: [
-      1,
-      0,
-      0,
-      0
-    ]
+  controls: {
+    display: "flex",
+    marginLeft: "auto",
+    flexShrink: 0
   },
-  "border-bottom": {
-    borderRadius: 0,
-    borderWidth: [
-      0,
-      0,
-      1,
-      0
-    ]
+  icon: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: "var(--icon-size)",
+    width: "var(--icon-size)",
+    height: "100%",
+    flexShrink: 0,
+    cursor: "default",
+    "&:last-child": {
+      paddingRight: 6
+    }
   },
-  "border-left": {
-    borderRadius: 0,
-    borderWidth: [
-      0,
-      0,
-      0,
-      1
-    ]
+  iconInner: {
+    width: "var(--icon-inner-size)"
   },
-  "border-right": {
-    borderRadius: 0,
-    borderWidth: [
-      0,
-      1,
-      0,
-      0
-    ]
+  customIcon: {
+    width: "unset",
+    "& $iconInner": {
+      width: "unset"
+    }
+  },
+  endIcon: {},
+  activeIcon: {
+    cursor: "pointer",
+    outline: "none"
   },
-  top: {
+  clearIcon: {
+    "& $iconInner": {
+      width: "var(--icon-inner-size)"
+    }
+  },
+  loader: {
+    "& $iconInner": {
+      width: "var(--icon-inner-size)"
+    }
+  },
+  /* groupPositions */
+  "placement-top": {
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0
   },
-  bottom: {
+  "placement-bottom": {
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0
   },
-  "top-left": {
+  "placement-top-left": {
     borderTopRightRadius: 0,
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0
   },
-  "top-right": {
+  "placement-top-right": {
     borderTopLeftRadius: 0,
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0
   },
-  "bottom-left": {
+  "placement-bottom-left": {
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0
   },
-  "bottom-right": {
+  "placement-bottom-right": {
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,
     borderBottomLeftRadius: 0
   },
-  left: {
+  "placement-left": {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0
   },
-  right: {
+  "placement-right": {
     borderTopLeftRadius: 0,
     borderBottomLeftRadius: 0
   },
-  middle: {
+  "placement-middle": {
     borderRadius: 0
-  },
-  controls: {
-    display: "flex",
-    gridArea: "1 / 3"
-  },
-  icon: {
-    display: "flex",
-    alignItems: "center",
+  }
+});
+function _define_property$T(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _object_spread$R(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    var ownKeys2 = Object.keys(source);
+    if (typeof Object.getOwnPropertySymbols === "function") {
+      ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+      }));
+    }
+    ownKeys2.forEach(function(key) {
+      _define_property$T(target, key, source[key]);
+    });
+  }
+  return target;
+}
+function ownKeys$K(object, enumerableOnly) {
+  var keys2 = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) {
+      symbols = symbols.filter(function(sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+    keys2.push.apply(keys2, symbols);
+  }
+  return keys2;
+}
+function _object_spread_props$K(target, source) {
+  source = source != null ? source : {};
+  if (Object.getOwnPropertyDescriptors) {
+    Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+  } else {
+    ownKeys$K(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+var ControlWrapper = function(param) {
+  var label = param.label, icon = param.icon, groupPlacement = param.groupPlacement, isInvalid = param.isInvalid, isFocused = param.isFocused, isRequired = param.isRequired, isLoading = param.isLoading, isFullWidth = param.isFullWidth, isDisabled = param.isDisabled, hasValue = param.hasValue, testId = param.testId, children = param.children, tweakStyles = param.tweakStyles, data = param.data, onIconClick = param.onIconClick, onClear = param.onClear;
+  var classes = useStyles$I({
+    theme: tweakStyles
+  });
+  var hasEndIcon = !isLoading && isReactNodeNotEmpty(icon);
+  var hasClearButton = !isDisabled && !isLoading && hasValue && isNotEmpty(onClear);
+  var hasControls = hasEndIcon || hasClearButton || isLoading;
+  var tweakPreloaderStyles = useTweakStyles({
+    tweakStyles,
+    className: "tweakPreloader",
+    currentComponentName: "ControlWrapper"
+  });
+  var _obj2, _obj1, _obj22;
+  return /* @__PURE__ */ jsxs("div", _object_spread_props$K(_object_spread$R({
+    className: clsx(classes.root, isNotEmpty(groupPlacement) && [
+      classes["placement-".concat(groupPlacement)]
+    ], (_obj2 = {}, _define_property$T(_obj2, classes.invalid, isInvalid), _define_property$T(_obj2, classes.focused, isFocused), _define_property$T(_obj2, classes.withValue, hasValue), _define_property$T(_obj2, classes.disabled, isDisabled), _define_property$T(_obj2, classes.loading, isLoading), _define_property$T(_obj2, classes.minContent, !isFullWidth), _obj2))
+  }, addDataAttributes$1(data, testId)), {
+    children: [
+      isReactNodeNotEmpty(label) && /* @__PURE__ */ jsx("div", {
+        className: clsx(classes.label, (_obj1 = {}, _define_property$T(_obj1, classes.requiredLabel, isRequired), _define_property$T(_obj1, classes.disabledLabel, isDisabled), _define_property$T(_obj1, classes.activeLabel, isFocused || hasValue), _obj1)),
+        children: label
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: classes.wrapper,
+        children: [
+          children,
+          hasControls && /* @__PURE__ */ jsxs("div", {
+            className: classes.controls,
+            children: [
+              hasClearButton && /* @__PURE__ */ jsx("div", _object_spread_props$K(_object_spread$R({
+                className: clsx(classes.icon, classes.clearIcon, classes.activeIcon)
+              }, addClickHandler(onClear), addDataTestId(testId, "clear")), {
+                children: /* @__PURE__ */ jsx("div", {
+                  className: classes.iconInner,
+                  children: /* @__PURE__ */ jsx(Icon, {
+                    type: "close"
+                  })
+                })
+              })),
+              hasEndIcon && /* @__PURE__ */ jsx("div", _object_spread_props$K(_object_spread$R({
+                className: clsx(classes.icon, classes.endIcon, (_obj22 = {}, _define_property$T(_obj22, classes.activeIcon, !isDisabled && isNotEmpty(onIconClick)), _define_property$T(_obj22, classes.customIcon, !isString(icon)), _obj22))
+              }, addClickHandler(onIconClick, !isDisabled), addDataTestId(testId, "icon")), {
+                children: /* @__PURE__ */ jsx("div", {
+                  className: classes.iconInner,
+                  children: renderIcon(icon)
+                })
+              })),
+              isLoading && /* @__PURE__ */ jsx("div", _object_spread_props$K(_object_spread$R({
+                className: clsx(classes.icon, classes.loader)
+              }, addDataTestId(testId, "loading")), {
+                children: /* @__PURE__ */ jsx("div", {
+                  className: classes.iconInner,
+                  children: /* @__PURE__ */ jsx(ThemedPreloader, {
+                    tweakStyles: tweakPreloaderStyles
+                  })
+                })
+              }))
+            ]
+          })
+        ]
+      })
+    ]
+  }));
+};
+var PADDING_WITH_UNITS = 8;
+var useStyles$H = createThemedStyles("Input", {
+  inputContent: {
+    height: "var(--control-height)",
     padding: [
       0,
-      4
+      "var(--control-padding)"
     ],
-    width: 20,
-    transition: animations.defaultTransition,
-    transitionProperty: "color",
-    boxSizing: "content-box",
-    "&:last-child": {
-      paddingRight: 8
+    fontSize: 16,
+    fontFamily: "inherit"
+  },
+  input: {
+    extend: "inputContent",
+    width: "100%",
+    outline: "none",
+    outlineStyle: "none",
+    boxSizing: "border-box",
+    border: "none",
+    background: "none",
+    color: "black",
+    "&[readonly]": {
+      cursor: "default"
+    },
+    "&::placeholder": {
+      opacity: 1
     },
-    "& + $units": {
-      marginLeft: 4
+    "&::-webkit-date-and-time-value": {
+      textAlign: "left"
+    },
+    MozAppearance: "textfield",
+    "&::-webkit-inner-spin-button,&::-webkit-outer-spin-button,&::-webkit-calendar-picker-indicator": {
+      display: "none",
+      WebkitAppearance: "none",
+      margin: 0
     }
   },
-  clearIcon: {
-    extend: "icon"
-  },
-  inputIcon: {
-    extend: "icon"
-  },
-  withIcons: {
-    paddingRight: 4
+  autoSizeWrapper: {
+    position: "relative",
+    display: "flex",
+    minWidth: 0,
+    zIndex: 0,
+    flexGrow: 1
   },
-  withControls: {},
-  invalid: {},
-  disabled: {},
-  invalidLabel: {},
-  error: {
-    fontSize: 12
+  autoSized: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    height: "100%"
   },
-  info: {
-    fontSize: 12,
-    paddingTop: 4,
-    paddingLeft: 13
+  withUnits: {
+    extend: "autoSized",
+    paddingRight: "calc(".concat(PADDING_WITH_UNITS, "px + var(--units-width) - 1px)"),
+    "& + $fakeValue": {
+      paddingRight: PADDING_WITH_UNITS
+    }
   },
-  "error-top": {
-    position: "absolute",
-    top: -18,
-    left: -1,
-    padding: [
-      4,
-      8
-    ],
-    zIndex: 1
+  withLabel: {},
+  fakeValue: {
+    extend: "inputContent",
+    visibility: "hidden",
+    maxWidth: "100%",
+    overflow: "hidden",
+    minWidth: 8
   },
-  "error-bottom": {
-    paddingTop: 4,
-    paddingLeft: 13
+  units: {
+    alignSelf: "center",
+    paddingRight: "var(--control-padding)"
   },
-  loading: {},
-  withUnits: {}
+  focusedInput: {},
+  disabledInput: {},
+  invalidInput: {}
 });
 function _array_like_to_array$j(arr, len) {
   if (len == null || len > arr.length)
@@ -9958,7 +10129,7 @@ function _async_to_generator$5(fn3) {
     });
   };
 }
-function _define_property$R(obj, key, value) {
+function _define_property$S(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -10002,7 +10173,7 @@ function _iterable_to_array_limit$j(arr, i) {
 function _non_iterable_rest$j() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$P(target) {
+function _object_spread$Q(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
     var ownKeys2 = Object.keys(source);
@@ -10012,12 +10183,12 @@ function _object_spread$P(target) {
       }));
     }
     ownKeys2.forEach(function(key) {
-      _define_property$R(target, key, source[key]);
+      _define_property$S(target, key, source[key]);
     });
   }
   return target;
 }
-function ownKeys$I(object, enumerableOnly) {
+function ownKeys$J(object, enumerableOnly) {
   var keys2 = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -10030,21 +10201,21 @@ function ownKeys$I(object, enumerableOnly) {
   }
   return keys2;
 }
-function _object_spread_props$I(target, source) {
+function _object_spread_props$J(target, source) {
   source = source != null ? source : {};
   if (Object.getOwnPropertyDescriptors) {
     Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
   } else {
-    ownKeys$I(Object(source)).forEach(function(key) {
+    ownKeys$J(Object(source)).forEach(function(key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
   return target;
 }
-function _object_without_properties$g(source, excluded) {
+function _object_without_properties$i(source, excluded) {
   if (source == null)
     return {};
-  var target = _object_without_properties_loose$g(source, excluded);
+  var target = _object_without_properties_loose$i(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -10059,7 +10230,7 @@ function _object_without_properties$g(source, excluded) {
   }
   return target;
 }
-function _object_without_properties_loose$g(source, excluded) {
+function _object_without_properties_loose$i(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -10191,38 +10362,32 @@ function _ts_generator$5(thisArg, body) {
     };
   }
 }
-var Input = /* @__PURE__ */ forwardRef(function(_param, ref) {
-  var _param_value = _param.value, value = _param_value === void 0 ? "" : _param_value, label = _param.label, placeholder = _param.placeholder, _param_type = _param.type, type = _param_type === void 0 ? "text" : _param_type, isDisabled = _param.isDisabled, _param_isReadonly = _param.isReadonly, isReadonly = _param_isReadonly === void 0 ? false : _param_isReadonly, _param_hasFloatingLabel = _param.hasFloatingLabel, hasFloatingLabel = _param_hasFloatingLabel === void 0 ? true : _param_hasFloatingLabel, _param_isInvalid = _param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isClearable = _param.isClearable, isClearable = _param_isClearable === void 0 ? false : _param_isClearable, infoMessage = _param.infoMessage, errorMessage = _param.errorMessage, _param_errorPosition = _param.errorPosition, errorPosition = _param_errorPosition === void 0 ? "bottom" : _param_errorPosition, inlineStyle = _param.inlineStyle, border = _param.border, _param_isRequired = _param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_isAutoSizeable = _param.isAutoSizeable, isAutoSizeable = _param_isAutoSizeable === void 0 ? false : _param_isAutoSizeable, _param_defaultSize = _param.defaultSize, defaultSize = _param_defaultSize === void 0 ? DEFAULT_SIZE : _param_defaultSize, iconType = _param.iconType, hasRequiredLabel = _param.hasRequiredLabel, data = _param.data, tweakStyles = _param.tweakStyles, _param_shouldFocusOnMount = _param.shouldFocusOnMount, shouldFocusOnMount = _param_shouldFocusOnMount === void 0 ? false : _param_shouldFocusOnMount, units = _param.units, testId = _param.testId, onChange = _param.onChange, onFocus = _param.onFocus, onBlur = _param.onBlur, onIconClick = _param.onIconClick, mask = _param.mask, maskPlaceholder = _param.maskPlaceholder, alwaysShowMask = _param.alwaysShowMask, _param_shouldAlwaysShowPlaceholder = _param.shouldAlwaysShowPlaceholder, shouldAlwaysShowPlaceholder = _param_shouldAlwaysShowPlaceholder === void 0 ? false : _param_shouldAlwaysShowPlaceholder, beforeMaskedStateChange = _param.beforeMaskedStateChange, inputProps = _object_without_properties$g(_param, [
+var InputBase = /* @__PURE__ */ forwardRef(function(_param, ref) {
+  var _param_value = _param.value, value = _param_value === void 0 ? "" : _param_value, placeholder = _param.placeholder, label = _param.label, _param_type = _param.type, type = _param_type === void 0 ? "text" : _param_type, isDisabled = _param.isDisabled, autoComplete = _param.autoComplete, initialInputMode = _param.inputMode, isReadonly = _param.isReadonly, isInvalid = _param.isInvalid, isActive = _param.isActive, isClearable = _param.isClearable, isAutoSized = _param.isAutoSized, name = _param.name, tweakStyles = _param.tweakStyles, maxLength = _param.maxLength, shouldFocusOnMount = _param.shouldFocusOnMount, units = _param.units, testId = _param.testId, tabIndex = _param.tabIndex, onChange = _param.onChange, onPaste = _param.onPaste, onFocus = _param.onFocus, onBlur = _param.onBlur, onKeyDown = _param.onKeyDown, mask = _param.mask, maskPlaceholder = _param.maskPlaceholder, alwaysShowMask = _param.alwaysShowMask, shouldAlwaysShowPlaceholder = _param.shouldAlwaysShowPlaceholder, beforeMaskedStateChange = _param.beforeMaskedStateChange, controlProps = _object_without_properties$i(_param, [
     "value",
-    "label",
     "placeholder",
+    "label",
     "type",
     "isDisabled",
+    "autoComplete",
+    "inputMode",
     "isReadonly",
-    "hasFloatingLabel",
     "isInvalid",
     "isActive",
     "isClearable",
-    "infoMessage",
-    "errorMessage",
-    "errorPosition",
-    "inlineStyle",
-    "border",
-    "isRequired",
-    "isLoading",
-    "isAutoSizeable",
-    "defaultSize",
-    "iconType",
-    "hasRequiredLabel",
-    "data",
+    "isAutoSized",
+    "name",
     "tweakStyles",
+    "maxLength",
     "shouldFocusOnMount",
     "units",
     "testId",
+    "tabIndex",
     "onChange",
+    "onPaste",
     "onFocus",
     "onBlur",
-    "onIconClick",
+    "onKeyDown",
     "mask",
     "maskPlaceholder",
     "alwaysShowMask",
@@ -10232,13 +10397,27 @@ var Input = /* @__PURE__ */ forwardRef(function(_param, ref) {
   var classes = useStyles$H({
     theme: tweakStyles
   });
-  var tweakPreloaderStyles = useTweakStyles({
+  var tweakControlWrapperStyles = useTweakStyles({
     tweakStyles,
-    className: "tweakPreloader",
+    className: "tweakControlWrapper",
     currentComponentName: "Input"
   });
   var _useState = _sliced_to_array$j(useState(false), 2), isFocused = _useState[0], setFocused = _useState[1];
+  var _useState1 = _sliced_to_array$j(useState(), 2), unitsWidth = _useState1[0], setUnitsWidth = _useState1[1];
   var inputRef = useRef(null);
+  var mergedRef = mergeRefs([
+    ref,
+    inputRef
+  ]);
+  var inputMode = initialInputMode !== null && initialInputMode !== void 0 ? initialInputMode : [
+    "email",
+    "tel",
+    "url"
+  ].includes(type) ? type : void 0;
+  var hasFocus = isFocused || isActive;
+  var hasValue = isNotEmpty(value) && value !== "";
+  var hasUnits = isReactNodeNotEmpty(units);
+  var hasPlaceholder = (!isReactNodeNotEmpty(label) || hasFocus || shouldAlwaysShowPlaceholder) && isStringNotEmpty(placeholder);
   var handleChange = function(event) {
     onChange(event.currentTarget.value, event);
   };
@@ -10250,9 +10429,9 @@ var Input = /* @__PURE__ */ forwardRef(function(_param, ref) {
     setFocused(false);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   };
-  var handleOnInputClear = function() {
+  var handleInputClear = function() {
     var _ref = _async_to_generator$5(function(event) {
-      var _input_current, input;
+      var _inputRef_current;
       return _ts_generator$5(this, function(_state) {
         switch (_state.label) {
           case 0:
@@ -10262,114 +10441,195 @@ var Input = /* @__PURE__ */ forwardRef(function(_param, ref) {
             ];
           case 1:
             _state.sent();
-            input = ref !== null && ref !== void 0 ? ref : inputRef;
-            (_input_current = input.current) === null || _input_current === void 0 ? void 0 : _input_current.focus();
+            (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
             return [
               2
             ];
         }
       });
     });
-    return function handleOnInputClear2(event) {
+    return function handleInputClear2(event) {
       return _ref.apply(this, arguments);
     };
   }();
-  var hasFocus = isFocused || isActive;
-  var hasClearIcon = isClearable && value.length > 0;
-  var hasControls = hasClearIcon || iconType !== void 0 || isLoading;
-  var hasValue = value !== void 0 && value !== "";
-  var hasUnits = units !== void 0 && units !== "";
-  var hasLabel = isReactNodeNotEmpty(label);
-  var isLabelActive = hasFocus && !isReadonly || hasValue || shouldAlwaysShowPlaceholder;
-  var hasPlaceholder = (!hasLabel || isLabelActive) && isStringNotEmpty(placeholder);
-  var shouldShowUnits = (hasValue || isFocused && !hasPlaceholder) && hasUnits;
+  var unitsRef = useCallback(function(node) {
+    setUnitsWidth(node === null || node === void 0 ? void 0 : node.clientWidth);
+  }, [
+    units
+  ]);
   var _obj2;
-  var props = _object_spread_props$I(_object_spread$P({}, inputProps, addDataTestId(testId)), {
-    className: clsx(classes.input, (_obj2 = {}, _define_property$R(_obj2, classes.withFloatingLabel, hasFloatingLabel && hasLabel), _define_property$R(_obj2, classes.withIcons, hasControls), _define_property$R(_obj2, classes.withControls, hasControls), _define_property$R(_obj2, classes.withUnits, shouldShowUnits), _define_property$R(_obj2, classes.floatingLabelWithoutPadding, hasFloatingLabel && hasLabel && border === "bottom"), _obj2)),
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onChange: handleChange,
+  var props = _object_spread$Q({
+    className: clsx(classes.input, (_obj2 = {}, _define_property$S(_obj2, classes.withUnits, hasUnits), _define_property$S(_obj2, classes.withLabel, isReactNodeNotEmpty(label)), _define_property$S(_obj2, classes.autoSized, isAutoSized), _define_property$S(_obj2, classes.focusedInput, isFocused), _define_property$S(_obj2, classes.disabledInput, isDisabled), _define_property$S(_obj2, classes.invalidInput, isInvalid), _obj2)),
+    style: hasUnits && hasValue ? {
+      "--units-width": "".concat(unitsWidth, "px")
+    } : void 0,
     value,
     type,
+    autoComplete,
+    inputMode,
     disabled: isDisabled,
     placeholder: hasPlaceholder ? placeholder : void 0,
-    autoFocus: shouldFocusOnMount,
+    name,
+    maxLength,
     readOnly: isReadonly,
-    size: isAutoSizeable ? defaultSize : void 0
+    tabIndex,
+    onKeyDown,
+    onPaste,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onChange: handleChange
+  }, addDataTestId(testId, "input"));
+  useEffect(function() {
+    if (shouldFocusOnMount) {
+      var _inputRef_current;
+      (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+    }
+  }, []);
+  var inputContent = /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      isNotEmpty(mask) ? /* @__PURE__ */ jsx(InputMask, _object_spread$Q({
+        ref: mergedRef,
+        mask,
+        maskPlaceholder,
+        alwaysShowMask,
+        beforeMaskedStateChange
+      }, props)) : /* @__PURE__ */ jsx("input", _object_spread$Q({
+        ref: mergedRef
+      }, props)),
+      (hasUnits || isAutoSized) && /* @__PURE__ */ jsx("div", {
+        className: classes.fakeValue,
+        children: value
+      }),
+      hasUnits && hasValue && /* @__PURE__ */ jsx("div", {
+        className: classes.units,
+        ref: unitsRef,
+        children: units
+      })
+    ]
+  });
+  return /* @__PURE__ */ jsx(ControlWrapper, _object_spread_props$J(_object_spread$Q({
+    label,
+    isDisabled,
+    isFocused: hasFocus,
+    isInvalid,
+    hasValue: hasValue || hasPlaceholder,
+    isFullWidth: !isAutoSized,
+    tweakStyles: tweakControlWrapperStyles,
+    onClear: isClearable && hasValue ? handleInputClear : void 0
+  }, controlProps), {
+    children: hasUnits || isAutoSized ? /* @__PURE__ */ jsx("div", {
+      className: classes.autoSizeWrapper,
+      children: inputContent
+    }) : inputContent
+  }));
+});
+function _define_property$R(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _object_spread$P(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    var ownKeys2 = Object.keys(source);
+    if (typeof Object.getOwnPropertySymbols === "function") {
+      ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+      }));
+    }
+    ownKeys2.forEach(function(key) {
+      _define_property$R(target, key, source[key]);
+    });
+  }
+  return target;
+}
+function ownKeys$I(object, enumerableOnly) {
+  var keys2 = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) {
+      symbols = symbols.filter(function(sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+    keys2.push.apply(keys2, symbols);
+  }
+  return keys2;
+}
+function _object_spread_props$I(target, source) {
+  source = source != null ? source : {};
+  if (Object.getOwnPropertyDescriptors) {
+    Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+  } else {
+    ownKeys$I(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+function _object_without_properties$h(source, excluded) {
+  if (source == null)
+    return {};
+  var target = _object_without_properties_loose$h(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0)
+        continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key))
+        continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _object_without_properties_loose$h(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0)
+      continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+var Input = /* @__PURE__ */ forwardRef(function(_param, ref) {
+  var infoMessage = _param.infoMessage, errorMessage = _param.errorMessage, isInvalid = _param.isInvalid, testId = _param.testId, tweakStyles = _param.tweakStyles, inputProps = _object_without_properties$h(_param, [
+    "infoMessage",
+    "errorMessage",
+    "isInvalid",
+    "testId",
+    "tweakStyles"
+  ]);
+  var tweakControlGroupStyles = useTweakStyles({
+    tweakStyles,
+    className: "tweakControlGroup"
   });
-  var _obj1, _obj22;
-  return /* @__PURE__ */ jsxs("div", {
-    className: classes.root,
-    children: [
-      /* @__PURE__ */ jsxs("div", _object_spread_props$I(_object_spread$P({
-        className: clsx(classes.inputWrapper, (_obj1 = {}, _define_property$R(_obj1, classes.required, isRequired && !hasRequiredLabel), _define_property$R(_obj1, classes.invalid, isInvalid), _define_property$R(_obj1, classes.focused, hasFocus), _define_property$R(_obj1, classes.disabled, isDisabled), _define_property$R(_obj1, classes.autosize, isAutoSizeable), _obj1), inlineStyle !== void 0 && classes[inlineStyle], border !== void 0 && classes["border-".concat(border)]),
-        "data-value": isAutoSizeable ? value : void 0
-      }, addDataAttributes(data)), {
-        children: [
-          mask === void 0 ? /* @__PURE__ */ jsx("input", _object_spread$P({
-            ref: ref !== null && ref !== void 0 ? ref : inputRef
-          }, props)) : /* @__PURE__ */ jsx(InputMask, _object_spread$P({
-            ref: ref !== null && ref !== void 0 ? ref : inputRef,
-            mask,
-            maskPlaceholder,
-            alwaysShowMask,
-            beforeMaskedStateChange
-          }, props)),
-          hasLabel && /* @__PURE__ */ jsx("span", {
-            className: clsx(classes.label, (_obj22 = {}, _define_property$R(_obj22, classes.invalidLabel, isInvalid), _define_property$R(_obj22, classes.requiredLabel, hasRequiredLabel && !isRequired), _define_property$R(_obj22, classes.activeLabel, isLabelActive), _define_property$R(_obj22, classes.floating, hasFloatingLabel), // Обсуждаемо, сделал так, потому что не хочется создавать новую пропсу, на каждый чих в стилях
-            _define_property$R(_obj22, classes.floatingWithoutPadding, hasFloatingLabel && border === "bottom"), _obj22)),
-            children: label
-          }),
-          shouldShowUnits && /* @__PURE__ */ jsxs("div", {
-            className: clsx(classes.unitsWrapper, _define_property$R({}, classes.withFloatingLabel, hasFloatingLabel && hasLabel)),
-            children: [
-              /* @__PURE__ */ jsx("span", {
-                className: classes.fakeValue,
-                children: value
-              }),
-              /* @__PURE__ */ jsx("span", {
-                className: classes.units,
-                children: units
-              })
-            ]
-          }),
-          hasControls && /* @__PURE__ */ jsxs("div", {
-            className: classes.controls,
-            children: [
-              isLoading && /* @__PURE__ */ jsx("div", {
-                className: clsx(classes.inputIcon, classes.loading),
-                children: /* @__PURE__ */ jsx(ThemedPreloader, {
-                  tweakStyles: tweakPreloaderStyles
-                })
-              }),
-              !isDisabled && hasClearIcon && /* @__PURE__ */ jsx("div", {
-                className: clsx(classes.clearIcon, classes.activeIcon),
-                onMouseDown: function(event) {
-                  return event.preventDefault();
-                },
-                onClick: handleOnInputClear,
-                children: /* @__PURE__ */ jsx(Icon, {
-                  type: "close"
-                })
-              }),
-              isReactNodeNotEmpty(iconType) && /* @__PURE__ */ jsx("div", {
-                className: clsx(classes.inputIcon, _define_property$R({}, classes.activeIcon, !isDisabled && onIconClick !== void 0)),
-                onClick: !isDisabled ? onIconClick : void 0,
-                children: renderIcon(iconType)
-              })
-            ]
-          })
-        ]
-      })),
-      isStringNotEmpty(infoMessage) && /* @__PURE__ */ jsx("div", {
-        className: classes.info,
-        children: infoMessage
-      }),
-      isStringNotEmpty(errorMessage) && /* @__PURE__ */ jsx("div", {
-        className: clsx(classes.error, classes["error-".concat(errorPosition)]),
-        children: errorMessage
-      })
-    ]
+  return /* @__PURE__ */ jsx(ControlGroup, {
+    errorMessage,
+    infoMessage,
+    testId,
+    tweakStyles: tweakControlGroupStyles,
+    children: /* @__PURE__ */ jsx(InputBase, _object_spread_props$I(_object_spread$P({}, inputProps), {
+      ref,
+      testId,
+      tweakStyles,
+      isInvalid
+    }))
   });
 });
 var EMPTY_DATE_INPUT_VALUE = "__.__.____";
@@ -10434,10 +10694,10 @@ function _object_spread_props$H(target, source) {
   }
   return target;
 }
-function _object_without_properties$f(source, excluded) {
+function _object_without_properties$g(source, excluded) {
   if (source == null)
     return {};
-  var target = _object_without_properties_loose$f(source, excluded);
+  var target = _object_without_properties_loose$g(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -10452,7 +10712,7 @@ function _object_without_properties$f(source, excluded) {
   }
   return target;
 }
-function _object_without_properties_loose$f(source, excluded) {
+function _object_without_properties_loose$g(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -10467,7 +10727,7 @@ function _object_without_properties_loose$f(source, excluded) {
   return target;
 }
 var DateInput = /* @__PURE__ */ forwardRef(function(_param, ref) {
-  var date = _param.date, _param_startDate = _param.startDate, startDate = _param_startDate === void 0 ? "" : _param_startDate, _param_endDate = _param.endDate, endDate = _param_endDate === void 0 ? "" : _param_endDate, mask = _param.mask, className = _param.className, placeholder = _param.placeholder, data = _param.data, _param_isRange = _param.isRange, isRange = _param_isRange === void 0 ? false : _param_isRange, tweakStyles = _param.tweakStyles, onClick = _param.onClick, onChange = _param.onChange, inputProps = _object_without_properties$f(_param, [
+  var date = _param.date, _param_startDate = _param.startDate, startDate = _param_startDate === void 0 ? "" : _param_startDate, _param_endDate = _param.endDate, endDate = _param_endDate === void 0 ? "" : _param_endDate, mask = _param.mask, className = _param.className, placeholder = _param.placeholder, data = _param.data, _param_isRange = _param.isRange, isRange = _param_isRange === void 0 ? false : _param_isRange, tweakStyles = _param.tweakStyles, onClick = _param.onClick, onChange = _param.onChange, inputProps = _object_without_properties$g(_param, [
     "date",
     "startDate",
     "endDate",
@@ -10523,7 +10783,7 @@ var DateInput = /* @__PURE__ */ forwardRef(function(_param, ref) {
   }));
 });
 const reactDatepicker = "";
-var LEFT_PADDING = 44;
+var Z_INDEX$1 = dimensions.Z_INDEX;
 var useStyles$F = createThemedStyles("SearchInput", {
   root: {
     position: "relative"
@@ -10535,33 +10795,26 @@ var useStyles$F = createThemedStyles("SearchInput", {
     left: 12,
     height: "100%",
     width: 20,
-    zIndex: 2,
-    color: colors.GREY_ACTIVE
-  },
-  iconClickable: {
-    cursor: "pointer"
+    color: colors.GREY_ACTIVE,
+    zIndex: Z_INDEX$1.CONTROL_FOCUS + 1
   }
 });
 var inputStyles$4 = {
-  inputWrapper: {
-    height: 35,
-    borderColor: "transparent",
-    backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
-    borderRadius: 18,
-    paddingLeft: LEFT_PADDING,
-    transitionProperty: "background-color, border-color"
-  },
-  focused: {
-    backgroundColor: colors.CLASSIC_WHITE,
-    borderColor: colors.BORDER_MAIN
+  tweakControlWrapper: {
+    root: {
+      borderColor: "transparent",
+      borderRadius: 18,
+      paddingLeft: 0,
+      transitionProperty: "background-color, border-color"
+    },
+    focused: {
+      backgroundColor: colors.CLASSIC_WHITE,
+      borderColor: colors.BORDER_MAIN
+    }
   },
-  input: {
+  inputContent: {
     fontSize: 14,
-    paddingLeft: 0
-  },
-  label: {
-    left: LEFT_PADDING,
-    fontSize: 14
+    paddingLeft: 44
   }
 };
 function _define_property$P(obj, key, value) {
@@ -10616,10 +10869,10 @@ function _object_spread_props$G(target, source) {
   }
   return target;
 }
-function _object_without_properties$e(source, excluded) {
+function _object_without_properties$f(source, excluded) {
   if (source == null)
     return {};
-  var target = _object_without_properties_loose$e(source, excluded);
+  var target = _object_without_properties_loose$f(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -10634,7 +10887,7 @@ function _object_without_properties$e(source, excluded) {
   }
   return target;
 }
-function _object_without_properties_loose$e(source, excluded) {
+function _object_without_properties_loose$f(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -10649,12 +10902,13 @@ function _object_without_properties_loose$e(source, excluded) {
   return target;
 }
 var SearchInput = function(_param) {
-  var _param_isClearable = _param.isClearable, isClearable = _param_isClearable === void 0 ? true : _param_isClearable, tweakStyles = _param.tweakStyles, testId = _param.testId, data = _param.data, onSearchIconClick = _param.onSearchIconClick, props = _object_without_properties$e(_param, [
+  var _param_isClearable = _param.isClearable, isClearable = _param_isClearable === void 0 ? true : _param_isClearable, tweakStyles = _param.tweakStyles, placeholder = _param.placeholder, value = _param.value, testId = _param.testId, data = _param.data, props = _object_without_properties$f(_param, [
     "isClearable",
     "tweakStyles",
+    "placeholder",
+    "value",
     "testId",
-    "data",
-    "onSearchIconClick"
+    "data"
   ]);
   var classes = useStyles$F({
     theme: tweakStyles
@@ -10667,23 +10921,20 @@ var SearchInput = function(_param) {
   });
   return /* @__PURE__ */ jsxs("div", _object_spread_props$G(_object_spread$N({
     className: classes.root
-  }, addDataAttributes$1(data, testId)), {
+  }, addDataTestId(testId), addDataAttributes(data)), {
     children: [
-      /* @__PURE__ */ jsx("div", _object_spread_props$G(_object_spread$N({
-        className: clsx(classes.icon, _define_property$P({}, classes.iconClickable, isNotEmpty(onSearchIconClick)))
-      }, addClickHandler(onSearchIconClick)), {
+      /* @__PURE__ */ jsx("div", {
+        className: classes.icon,
         children: /* @__PURE__ */ jsx(Icon, {
           type: "search"
         })
-      })),
+      }),
       /* @__PURE__ */ jsx(Input, _object_spread$N({
-        inputMode: "search",
+        value,
+        placeholder,
         isClearable,
-        isActive: props.value !== "" && props.value !== void 0,
         testId: getTestId(testId, "input"),
-        tweakStyles: tweakInputStyles,
-        hasFloatingLabel: false,
-        label: props.placeholder
+        tweakStyles: tweakInputStyles
       }, props))
     ]
   }));
@@ -10773,10 +11024,10 @@ function _object_spread$M(target) {
   }
   return target;
 }
-function _object_without_properties$d(source, excluded) {
+function _object_without_properties$e(source, excluded) {
   if (source == null)
     return {};
-  var target = _object_without_properties_loose$d(source, excluded);
+  var target = _object_without_properties_loose$e(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -10791,7 +11042,7 @@ function _object_without_properties$d(source, excluded) {
   }
   return target;
 }
-function _object_without_properties_loose$d(source, excluded) {
+function _object_without_properties_loose$e(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -10894,7 +11145,7 @@ var ScrollIntoViewIfNeeded = /* @__PURE__ */ function(PureComponent2) {
         _this_props.active;
         var elementType = _this_props.elementType, children = _this_props.children;
         _this_props.options;
-        var wrapperProps = _object_without_properties$d(_this_props, [
+        var wrapperProps = _object_without_properties$e(_this_props, [
           "active",
           "elementType",
           "children",
@@ -11256,6 +11507,7 @@ var getDefaultConvertToIdFunction = function(convertValueToString) {
     return isNotEmpty(value === null || value === void 0 ? void 0 : value.id) ? String(value.id) : convertValueToString(value);
   };
 };
+var CONTROL = dimensions.CONTROL, Z_INDEX = dimensions.Z_INDEX;
 var useStyles$D = createThemedStyles("Select", {
   root: {
     width: "100%",
@@ -11275,7 +11527,8 @@ var useStyles$D = createThemedStyles("Select", {
   },
   withoutPopper: {
     position: "absolute",
-    top: "calc(var(--dropdown-offset, 100%) + 6px)"
+    top: "100%",
+    paddingTop: 4
   },
   listWrapperInBody: {
     minWidth: "auto",
@@ -11285,16 +11538,17 @@ var useStyles$D = createThemedStyles("Select", {
   arrow: {
     position: "absolute",
     right: 12,
-    top: 14,
+    top: "50%",
     width: 20,
     height: 20,
     cursor: "pointer",
-    zIndex: 1,
+    transform: "translateY(-50%)",
     transition: animations.defaultTransition,
-    transitionProperty: "transform"
+    transitionProperty: "transform",
+    zIndex: Z_INDEX.CONTROL_FOCUS + 1
   },
   activeArrow: {
-    transform: "rotate(180deg)"
+    transform: "translateY(-50%) rotate(180deg)"
   },
   disabled: {
     "& $arrow": {
@@ -11307,21 +11561,27 @@ var useStyles$D = createThemedStyles("Select", {
     }
   },
   icon: {
-    width: 16,
-    height: 16
+    width: CONTROL.ICON_INNER_SIZE,
+    height: CONTROL.ICON_INNER_SIZE
+  },
+  iconWrapper: {
+    display: "flex",
+    alignItems: "center"
   }
 });
 var baseInputStyles = {
-  input: {
+  inputContent: {
     paddingRight: 32
   },
-  disabled: {
-    "& $input": {
-      cursor: "default"
+  tweakControlWrapper: {
+    controls: {
+      paddingRight: 40
+    },
+    icon: {
+      "&:last-child": {
+        paddingRight: 0
+      }
     }
-  },
-  controls: {
-    paddingRight: 32
   }
 };
 var readonlyInputBaseStyles = {
@@ -11329,16 +11589,8 @@ var readonlyInputBaseStyles = {
     cursor: "pointer"
   }
 };
-var multiSelectInputBaseStyles = {
-  inputIcon: {
-    "&:not($loading)": {
-      width: "auto"
-    }
-  }
-};
 var readonlyInputStyles = mergeStyles(baseInputStyles, readonlyInputBaseStyles);
-var multiSelectInputStyles = mergeStyles(baseInputStyles, multiSelectInputBaseStyles);
-var readonlyMultiSelectStyles = mergeStyles(baseInputStyles, readonlyInputBaseStyles, multiSelectInputBaseStyles);
+var readonlyMultiSelectStyles = mergeStyles(baseInputStyles, readonlyInputBaseStyles);
 var getInputStyles = function(param) {
   var hasReadonlyInput = param.hasReadonlyInput, isMultiSelect = param.isMultiSelect;
   if (hasReadonlyInput && isMultiSelect) {
@@ -11347,21 +11599,8 @@ var getInputStyles = function(param) {
   if (hasReadonlyInput && !isMultiSelect) {
     return readonlyInputStyles;
   }
-  if (!hasReadonlyInput && isMultiSelect) {
-    return multiSelectInputStyles;
-  }
   return baseInputStyles;
 };
-var searchInputStyles$3 = {
-  tweakInput: {
-    inputWrapper: {
-      height: 48,
-      borderRadius: 0,
-      border: "none",
-      backgroundColor: "transparent"
-    }
-  }
-};
 function _array_like_to_array$i(arr, len) {
   if (len == null || len > arr.length)
     len = arr.length;
@@ -11496,10 +11735,10 @@ function _object_spread_props$D(target, source) {
   }
   return target;
 }
-function _object_without_properties$c(source, excluded) {
+function _object_without_properties$d(source, excluded) {
   if (source == null)
     return {};
-  var target = _object_without_properties_loose$c(source, excluded);
+  var target = _object_without_properties_loose$d(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -11514,7 +11753,7 @@ function _object_without_properties$c(source, excluded) {
   }
   return target;
 }
-function _object_without_properties_loose$c(source, excluded) {
+function _object_without_properties_loose$d(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -11651,7 +11890,7 @@ function _ts_generator$4(thisArg, body) {
 }
 function Select(props) {
   var _input_current;
-  var options = props.options, isMultiSelect = props.isMultiSelect, value = props.value, header = props.header, footer = props.footer, defaultOptionLabel = props.defaultOptionLabel, allOptionsLabel = props.allOptionsLabel, _props_debounceTime = props.debounceTime, debounceTime = _props_debounceTime === void 0 ? 400 : _props_debounceTime, _props_optionsMode = props.optionsMode, optionsMode = _props_optionsMode === void 0 ? "normal" : _props_optionsMode, noMatchesLabel = props.noMatchesLabel, loadingLabel = props.loadingLabel, tweakStyles = props.tweakStyles, testId = props.testId, isActive = props.isActive, isReadonly = props.isReadonly, isDisabled = props.isDisabled, dropdownOptions = props.dropdownOptions, _props_minSymbolsCountToOpenList = props.minSymbolsCountToOpenList, minSymbolsCountToOpenList = _props_minSymbolsCountToOpenList === void 0 ? 0 : _props_minSymbolsCountToOpenList, _props_dropdownIcon = props.dropdownIcon, dropdownIcon = _props_dropdownIcon === void 0 ? "chevron-down" : _props_dropdownIcon, _props_shouldScrollToList = props.shouldScrollToList, shouldScrollToList = _props_shouldScrollToList === void 0 ? true : _props_shouldScrollToList, searchInput = props.searchInput, iconType = props.iconType, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onType = props.onType, onOpen = props.onOpen, _props_isOptionDisabled = props.isOptionDisabled, isOptionDisabled = _props_isOptionDisabled === void 0 ? defaultIsOptionDisabled : _props_isOptionDisabled, _props_compareValuesOnChange = props.compareValuesOnChange, compareValuesOnChange = _props_compareValuesOnChange === void 0 ? defaultCompareFunction : _props_compareValuesOnChange, _props_convertValueToString = props.convertValueToString, convertValueToString = _props_convertValueToString === void 0 ? defaultConvertFunction$2 : _props_convertValueToString, convertValueToId = props.convertValueToId, convertValueToReactNode = props.convertValueToReactNode, optionsFilter = props.optionsFilter, inputProps = _object_without_properties$c(props, [
+  var options = props.options, isMultiSelect = props.isMultiSelect, value = props.value, header = props.header, footer = props.footer, defaultOptionLabel = props.defaultOptionLabel, allOptionsLabel = props.allOptionsLabel, _props_debounceTime = props.debounceTime, debounceTime = _props_debounceTime === void 0 ? 400 : _props_debounceTime, _props_optionsMode = props.optionsMode, optionsMode = _props_optionsMode === void 0 ? "normal" : _props_optionsMode, noMatchesLabel = props.noMatchesLabel, loadingLabel = props.loadingLabel, tweakStyles = props.tweakStyles, testId = props.testId, isActive = props.isActive, isReadonly = props.isReadonly, isDisabled = props.isDisabled, dropdownOptions = props.dropdownOptions, _props_minSymbolsCountToOpenList = props.minSymbolsCountToOpenList, minSymbolsCountToOpenList = _props_minSymbolsCountToOpenList === void 0 ? 0 : _props_minSymbolsCountToOpenList, _props_dropdownIcon = props.dropdownIcon, dropdownIcon = _props_dropdownIcon === void 0 ? "chevron-down" : _props_dropdownIcon, _props_shouldScrollToList = props.shouldScrollToList, shouldScrollToList = _props_shouldScrollToList === void 0 ? true : _props_shouldScrollToList, searchInput = props.searchInput, icon = props.icon, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onType = props.onType, onOpen = props.onOpen, _props_isOptionDisabled = props.isOptionDisabled, isOptionDisabled = _props_isOptionDisabled === void 0 ? defaultIsOptionDisabled : _props_isOptionDisabled, _props_compareValuesOnChange = props.compareValuesOnChange, compareValuesOnChange = _props_compareValuesOnChange === void 0 ? defaultCompareFunction : _props_compareValuesOnChange, _props_convertValueToString = props.convertValueToString, convertValueToString = _props_convertValueToString === void 0 ? defaultConvertFunction$2 : _props_convertValueToString, convertValueToId = props.convertValueToId, convertValueToReactNode = props.convertValueToReactNode, optionsFilter = props.optionsFilter, infoMessage = props.infoMessage, errorMessage = props.errorMessage, inputProps = _object_without_properties$d(props, [
     "options",
     "isMultiSelect",
     "value",
@@ -11673,7 +11912,7 @@ function Select(props) {
     "dropdownIcon",
     "shouldScrollToList",
     "searchInput",
-    "iconType",
+    "icon",
     "onChange",
     "onFocus",
     "onBlur",
@@ -11684,16 +11923,23 @@ function Select(props) {
     "convertValueToString",
     "convertValueToId",
     "convertValueToReactNode",
-    "optionsFilter"
+    "optionsFilter",
+    "infoMessage",
+    "errorMessage"
   ]);
   var classes = useStyles$D({
     theme: tweakStyles
   });
-  var _ref = searchInput !== null && searchInput !== void 0 ? searchInput : {}, tmp = _ref.shouldRenderInList, shouldRenderSearchInputInList = tmp === void 0 ? false : tmp, searchInputProps = _object_without_properties$c(_ref, [
+  var _ref = searchInput !== null && searchInput !== void 0 ? searchInput : {}, tmp = _ref.shouldRenderInList, shouldRenderSearchInputInList = tmp === void 0 ? false : tmp, searchInputProps = _object_without_properties$d(_ref, [
     "shouldRenderInList"
   ]);
   var hasSearchInputInList = optionsMode !== "normal" && shouldRenderSearchInputInList;
   var hasReadonlyInput = isReadonly || optionsMode === "normal" || shouldRenderSearchInputInList;
+  var tweakControlGroupStyles = useTweakStyles({
+    tweakStyles,
+    className: "tweakControlGroup",
+    currentComponentName: "Select"
+  });
   var tweakInputStyles = useTweakStyles({
     innerStyles: getInputStyles({
       hasReadonlyInput,
@@ -11704,7 +11950,6 @@ function Select(props) {
     currentComponentName: "Select"
   });
   var tweakSearchInputStyles = useTweakStyles({
-    innerStyles: searchInputStyles$3,
     tweakStyles,
     className: "tweakSearchInput",
     currentComponentName: "Select"
@@ -11786,7 +12031,7 @@ function Select(props) {
   ]);
   var getDropdownOffset = function() {
     var _input_current_parentElement2;
-    if (isEmpty(input.current) || inputProps.errorPosition === "top") {
+    if (isEmpty(input.current)) {
       return 0;
     }
     var _input_current_parentElement_offsetHeight;
@@ -12098,7 +12343,8 @@ function Select(props) {
       onToggleCheckbox: handleToggleOptionCheckbox
     })
   }));
-  var multiSelectCounterWithIcon = shouldShowMultiSelectCounter || isNotEmpty(iconType) ? /* @__PURE__ */ jsxs(Fragment, {
+  var multiSelectCounterWithIcon = shouldShowMultiSelectCounter || isNotEmpty(icon) ? /* @__PURE__ */ jsxs("div", {
+    className: classes.iconWrapper,
     children: [
       shouldShowMultiSelectCounter && /* @__PURE__ */ jsxs("div", {
         className: classes.counter,
@@ -12108,59 +12354,62 @@ function Select(props) {
           ")"
         ]
       }),
-      isNotEmpty(iconType) && /* @__PURE__ */ jsx("div", {
+      isNotEmpty(icon) && /* @__PURE__ */ jsx("div", {
         className: classes.icon,
-        children: renderIcon(iconType)
+        children: renderIcon(icon)
       })
     ]
   }) : void 0;
-  return /* @__PURE__ */ jsxs("div", {
-    className: classes.root,
-    onKeyDown: handleKeyDown,
-    ref: root2,
-    children: [
-      /* @__PURE__ */ jsxs("div", {
-        className: clsx(classes.inputWrapper, isDisabled && classes.disabled),
-        onClick: isDisabled || isReadonly ? void 0 : handleOnClick,
-        ref: inputWrapper,
-        children: [
-          /* @__PURE__ */ jsx(Input, _object_spread$I({
-            value: searchValue !== "" && !shouldRenderSearchInputInList ? searchValue : showedStringValue,
-            onChange: handleInputChange,
-            isActive: isListOpen || isActive,
-            isReadonly: hasReadonlyInput,
-            onFocus: handleFocus,
-            onBlur: handleBlur,
-            isDisabled,
-            ref: input,
-            isLoading: areOptionsLoading,
-            tweakStyles: tweakInputStyles,
-            testId,
-            iconType: isMultiSelect ? multiSelectCounterWithIcon : iconType
-          }, inputProps)),
-          /* @__PURE__ */ jsx("div", {
-            onMouseDown: function(event) {
-              event.preventDefault();
-            },
-            onClick: onArrowClick,
-            className: clsx(classes.arrow, isOpen && classes.activeArrow),
-            children: renderIcon(dropdownIcon)
+  return /* @__PURE__ */ jsx(ControlGroup, {
+    errorMessage,
+    infoMessage,
+    tweakStyles: tweakControlGroupStyles,
+    children: /* @__PURE__ */ jsxs("div", {
+      className: classes.root,
+      onKeyDown: handleKeyDown,
+      ref: root2,
+      children: [
+        /* @__PURE__ */ jsxs("div", {
+          className: clsx(classes.inputWrapper, isDisabled && classes.disabled),
+          onClick: isDisabled || isReadonly ? void 0 : handleOnClick,
+          ref: inputWrapper,
+          children: [
+            /* @__PURE__ */ jsx(InputBase, _object_spread$I({
+              value: searchValue !== "" && !shouldRenderSearchInputInList ? searchValue : showedStringValue,
+              onChange: handleInputChange,
+              isActive: isListOpen || isActive,
+              isReadonly: hasReadonlyInput,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              isDisabled,
+              ref: input,
+              isLoading: areOptionsLoading,
+              tweakStyles: tweakInputStyles,
+              testId,
+              icon: isMultiSelect ? multiSelectCounterWithIcon : icon
+            }, inputProps)),
+            /* @__PURE__ */ jsx("div", {
+              onMouseDown: function(event) {
+                event.preventDefault();
+              },
+              onClick: onArrowClick,
+              className: clsx(classes.arrow, isOpen && classes.activeArrow),
+              children: renderIcon(dropdownIcon)
+            })
+          ]
+        }),
+        shouldUsePopper ? /* @__PURE__ */ jsx(Portal, {
+          container: shouldRenderInBody ? document.body : inputWrapper.current,
+          children: /* @__PURE__ */ jsx(Fragment, {
+            children: listEl
           })
-        ]
-      }),
-      shouldUsePopper ? /* @__PURE__ */ jsx(Portal, {
-        container: shouldRenderInBody ? document.body : inputWrapper.current,
-        children: /* @__PURE__ */ jsx(Fragment, {
-          children: listEl
+        }) : /* @__PURE__ */ jsx(Fragment, {
+          children: isOpen && listEl
         })
-      }) : /* @__PURE__ */ jsx(Fragment, {
-        children: isOpen && listEl
-      })
-    ]
+      ]
+    })
   });
 }
-var SELECT_PADDING_LEFT = 12;
-var SELECT_PADDING_RIGHT = 24;
 var useStyles$C = createThemedStyles("DatePickerHeader", {
   btn: {
     width: 36,
@@ -12172,26 +12421,6 @@ var useStyles$C = createThemedStyles("DatePickerHeader", {
     cursor: "pointer",
     marginLeft: 8
   },
-  select: {
-    height: 35,
-    fontSize: 16,
-    position: "relative"
-  },
-  selectValue: {
-    fontSize: 16,
-    fontWeight: "bold",
-    color: "transparent",
-    pointerEvents: "none",
-    paddingLeft: SELECT_PADDING_LEFT,
-    paddingRight: SELECT_PADDING_RIGHT
-  },
-  selectControl: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%"
-  },
   header: {
     margin: 6,
     display: "flex",
@@ -12209,22 +12438,16 @@ var selectStyles$1 = {
       minHeight: 35
     }
   },
-  arrow: {
-    right: 0,
-    top: 9,
-    width: 16,
-    height: 16
-  },
   tweakInput: {
-    inputWrapper: {
-      height: 35,
-      border: "none"
+    tweakControlWrapper: {
+      root: {
+        "--control-height": "35px",
+        border: "none"
+      }
     },
-    input: {
+    inputContent: {
       fontSize: 16,
-      fontWeight: "bold",
-      paddingRight: SELECT_PADDING_RIGHT - 8,
-      paddingLeft: SELECT_PADDING_LEFT
+      fontWeight: "bold"
     }
   }
 };
@@ -12247,47 +12470,25 @@ var DatePickerHeader = function(param) {
   return /* @__PURE__ */ jsxs("div", {
     className: classes.header,
     children: [
-      /* @__PURE__ */ jsxs("div", {
-        className: classes.select,
-        children: [
-          /* @__PURE__ */ jsx("div", {
-            className: classes.selectValue,
-            children: months[getMonth(date)]
-          }),
-          /* @__PURE__ */ jsx("div", {
-            className: classes.selectControl,
-            children: /* @__PURE__ */ jsx(Select, {
-              value: months[getMonth(date)],
-              options: months,
-              dropdownIcon: "chevron-down-small",
-              tweakStyles: tweakSelectStyles,
-              onChange: function(value) {
-                return changeMonth(months.indexOf(value));
-              }
-            })
-          })
-        ]
+      /* @__PURE__ */ jsx(Select, {
+        value: months[getMonth(date)],
+        options: months,
+        dropdownIcon: "chevron-down-small",
+        isAutoSized: true,
+        tweakStyles: tweakSelectStyles,
+        onChange: function(value) {
+          return changeMonth(months.indexOf(value));
+        }
       }),
-      /* @__PURE__ */ jsxs("div", {
-        className: classes.select,
-        children: [
-          /* @__PURE__ */ jsx("div", {
-            className: classes.selectValue,
-            children: getYear(date)
-          }),
-          /* @__PURE__ */ jsx("div", {
-            className: classes.selectControl,
-            children: /* @__PURE__ */ jsx(Select, {
-              value: getYear(date),
-              options: years,
-              dropdownIcon: "chevron-down-small",
-              tweakStyles: tweakSelectStyles,
-              onChange: function(value) {
-                return changeYear(value);
-              }
-            })
-          })
-        ]
+      /* @__PURE__ */ jsx(Select, {
+        value: getYear(date),
+        options: years,
+        dropdownIcon: "chevron-down-small",
+        isAutoSized: true,
+        tweakStyles: tweakSelectStyles,
+        onChange: function(value) {
+          return changeYear(value);
+        }
       }),
       /* @__PURE__ */ jsxs("div", {
         className: classes.buttons,
@@ -12456,10 +12657,10 @@ function _object_spread_props$C(target, source) {
   }
   return target;
 }
-function _object_without_properties$b(source, excluded) {
+function _object_without_properties$c(source, excluded) {
   if (source == null)
     return {};
-  var target = _object_without_properties_loose$b(source, excluded);
+  var target = _object_without_properties_loose$c(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -12474,7 +12675,7 @@ function _object_without_properties$b(source, excluded) {
   }
   return target;
 }
-function _object_without_properties_loose$b(source, excluded) {
+function _object_without_properties_loose$c(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -12505,7 +12706,7 @@ function _unsupported_iterable_to_array$h(o, minLen) {
     return _array_like_to_array$h(o, minLen);
 }
 var DatePicker = /* @__PURE__ */ forwardRef(function(_param, ref) {
-  var data = _param.data, _param_selectedDate = _param.selectedDate, selectedDate = _param_selectedDate === void 0 ? null : _param_selectedDate, minDate = _param.minDate, maxDate = _param.maxDate, _param_endDate = _param.endDate, endDate = _param_endDate === void 0 ? null : _param_endDate, _param_startDate = _param.startDate, startDate = _param_startDate === void 0 ? null : _param_startDate, locale2 = _param.locale, months = _param.months, _param_calendarStartDay = _param.calendarStartDay, calendarStartDay = _param_calendarStartDay === void 0 ? 1 : _param_calendarStartDay, _param_dateFormat = _param.dateFormat, dateFormat = _param_dateFormat === void 0 ? DEFAULT_DATE_FORMAT$2 : _param_dateFormat, monthsShown = _param.monthsShown, placeholder = _param.placeholder, _param_isRange = _param.isRange, isRange = _param_isRange === void 0 ? false : _param_isRange, _param_isInline = _param.isInline, isInline = _param_isInline === void 0 ? false : _param_isInline, isDisabled = _param.isDisabled, isClearable = _param.isClearable, strictParsing = _param.strictParsing, fixedHeight = _param.fixedHeight, excludeScrollbar = _param.excludeScrollbar, focusSelectedMonth = _param.focusSelectedMonth, disabledKeyboardNavigation = _param.disabledKeyboardNavigation, _param_shouldRenderPopperInBody = _param.shouldRenderPopperInBody, shouldRenderPopperInBody = _param_shouldRenderPopperInBody === void 0 ? false : _param_shouldRenderPopperInBody, _param_allowSameDay = _param.allowSameDay, allowSameDay = _param_allowSameDay === void 0 ? false : _param_allowSameDay, shouldCloseOnSelect = _param.shouldCloseOnSelect, showPreviousMonths = _param.showPreviousMonths, preventOpenOnFocus = _param.preventOpenOnFocus, popperModifiers = _param.popperModifiers, popperPlacement = _param.popperPlacement, todayButton = _param.todayButton, highlightDates = _param.highlightDates, calendarContainer = _param.calendarContainer, dayClassName = _param.dayClassName, tmp = _param.customInput, CustomInput = tmp === void 0 ? DateInput : tmp, customInputRef = _param.customInputRef, renderCustomHeader = _param.renderCustomHeader, filterDate = _param.filterDate, onYearChange = _param.onYearChange, onMonthChange = _param.onMonthChange, onCalendarOpen = _param.onCalendarOpen, onCalendarClose = _param.onCalendarClose, onChangeDate = _param.onChangeDate, onChangeRange = _param.onChangeRange, onBlur = _param.onBlur, onFocus = _param.onFocus, onKeyDown = _param.onKeyDown, tweakStyles = _param.tweakStyles, inputProps = _object_without_properties$b(_param, [
+  var data = _param.data, _param_selectedDate = _param.selectedDate, selectedDate = _param_selectedDate === void 0 ? null : _param_selectedDate, minDate = _param.minDate, maxDate = _param.maxDate, _param_endDate = _param.endDate, endDate = _param_endDate === void 0 ? null : _param_endDate, _param_startDate = _param.startDate, startDate = _param_startDate === void 0 ? null : _param_startDate, locale2 = _param.locale, months = _param.months, _param_calendarStartDay = _param.calendarStartDay, calendarStartDay = _param_calendarStartDay === void 0 ? 1 : _param_calendarStartDay, _param_dateFormat = _param.dateFormat, dateFormat = _param_dateFormat === void 0 ? DEFAULT_DATE_FORMAT$2 : _param_dateFormat, monthsShown = _param.monthsShown, placeholder = _param.placeholder, _param_isRange = _param.isRange, isRange = _param_isRange === void 0 ? false : _param_isRange, _param_isInline = _param.isInline, isInline = _param_isInline === void 0 ? false : _param_isInline, isDisabled = _param.isDisabled, isClearable = _param.isClearable, strictParsing = _param.strictParsing, fixedHeight = _param.fixedHeight, excludeScrollbar = _param.excludeScrollbar, focusSelectedMonth = _param.focusSelectedMonth, disabledKeyboardNavigation = _param.disabledKeyboardNavigation, _param_shouldRenderPopperInBody = _param.shouldRenderPopperInBody, shouldRenderPopperInBody = _param_shouldRenderPopperInBody === void 0 ? false : _param_shouldRenderPopperInBody, _param_allowSameDay = _param.allowSameDay, allowSameDay = _param_allowSameDay === void 0 ? false : _param_allowSameDay, shouldCloseOnSelect = _param.shouldCloseOnSelect, showPreviousMonths = _param.showPreviousMonths, preventOpenOnFocus = _param.preventOpenOnFocus, popperModifiers = _param.popperModifiers, popperPlacement = _param.popperPlacement, todayButton = _param.todayButton, highlightDates = _param.highlightDates, calendarContainer = _param.calendarContainer, dayClassName = _param.dayClassName, tmp = _param.customInput, CustomInput = tmp === void 0 ? DateInput : tmp, customInputRef = _param.customInputRef, renderCustomHeader = _param.renderCustomHeader, filterDate = _param.filterDate, onYearChange = _param.onYearChange, onMonthChange = _param.onMonthChange, onCalendarOpen = _param.onCalendarOpen, onCalendarClose = _param.onCalendarClose, onChangeDate = _param.onChangeDate, onChangeRange = _param.onChangeRange, onBlur = _param.onBlur, onFocus = _param.onFocus, onKeyDown = _param.onKeyDown, tweakStyles = _param.tweakStyles, inputProps = _object_without_properties$c(_param, [
     "data",
     "selectedDate",
     "minDate",
@@ -12581,7 +12782,7 @@ var DatePicker = /* @__PURE__ */ forwardRef(function(_param, ref) {
     isDisabled,
     isClearable,
     isActive: isOpen,
-    iconType: isClearable && hasDateInputValue ? void 0 : "calendar",
+    icon: isClearable && hasDateInputValue ? void 0 : "calendar",
     tweakStyles: tweakDateInputStyles
   }), isRange ? {
     startDate: startDateValue,
@@ -13323,10 +13524,10 @@ function _object_spread_props$z(target, source) {
   }
   return target;
 }
-function _object_without_properties$a(source, excluded) {
+function _object_without_properties$b(source, excluded) {
   if (source == null)
     return {};
-  var target = _object_without_properties_loose$a(source, excluded);
+  var target = _object_without_properties_loose$b(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -13341,7 +13542,7 @@ function _object_without_properties$a(source, excluded) {
   }
   return target;
 }
-function _object_without_properties_loose$a(source, excluded) {
+function _object_without_properties_loose$b(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -13356,7 +13557,7 @@ function _object_without_properties_loose$a(source, excluded) {
   return target;
 }
 var IconButton = /* @__PURE__ */ forwardRef(function(_param, ref) {
-  var icon = _param.icon, _param_size = _param.size, size2 = _param_size === void 0 ? "m" : _param_size, _param_view = _param.view, view = _param_view === void 0 ? "cancel-light" : _param_view, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, testId = _param.testId, tweakStyles = _param.tweakStyles, data = _param.data, onClick = _param.onClick, restProps = _object_without_properties$a(_param, [
+  var icon = _param.icon, _param_size = _param.size, size = _param_size === void 0 ? "m" : _param_size, _param_view = _param.view, view = _param_view === void 0 ? "cancel-light" : _param_view, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, testId = _param.testId, tweakStyles = _param.tweakStyles, data = _param.data, onClick = _param.onClick, restProps = _object_without_properties$b(_param, [
     "icon",
     "size",
     "view",
@@ -13376,7 +13577,7 @@ var IconButton = /* @__PURE__ */ forwardRef(function(_param, ref) {
   var _obj2;
   return /* @__PURE__ */ jsx("button", _object_spread_props$z(_object_spread$E({
     ref,
-    className: clsx(classes.root, classes[view], classes[size2], (_obj2 = {}, _define_property$G(_obj2, classes.disabled, isDisabled), _define_property$G(_obj2, classes.active, isActive), _define_property$G(_obj2, classes.loading, isLoading), _obj2)),
+    className: clsx(classes.root, classes[view], classes[size], (_obj2 = {}, _define_property$G(_obj2, classes.disabled, isDisabled), _define_property$G(_obj2, classes.active, isActive), _define_property$G(_obj2, classes.loading, isLoading), _obj2)),
     type,
     disabled: isDisabled,
     onClick: hasNoAction ? void 0 : onClick
@@ -13934,7 +14135,7 @@ var FileItem = function(param) {
     event.stopPropagation();
     onRemove === null || onRemove === void 0 ? void 0 : onRemove(event);
   };
-  var name = fileInfo.name, size2 = fileInfo.size;
+  var name = fileInfo.name, size = fileInfo.size;
   var hasRemoveButton = isFunction$1(onRemove);
   return /* @__PURE__ */ jsxs("div", {
     className: classes.root,
@@ -13963,9 +14164,9 @@ var FileItem = function(param) {
                 className: classes.metadata,
                 children: [
                   metadata,
-                  shouldShowSize && isNotEmpty(size2) && /* @__PURE__ */ jsx("div", {
+                  shouldShowSize && isNotEmpty(size) && /* @__PURE__ */ jsx("div", {
                     className: classes.fileSize,
-                    children: filesize(size2)
+                    children: filesize(size)
                   })
                 ]
               })
@@ -14280,10 +14481,10 @@ function _object_spread$A(target) {
   }
   return target;
 }
-function _object_without_properties$9(source, excluded) {
+function _object_without_properties$a(source, excluded) {
   if (source == null)
     return {};
-  var target = _object_without_properties_loose$9(source, excluded);
+  var target = _object_without_properties_loose$a(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -14298,7 +14499,7 @@ function _object_without_properties$9(source, excluded) {
   }
   return target;
 }
-function _object_without_properties_loose$9(source, excluded) {
+function _object_without_properties_loose$a(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -14431,7 +14632,7 @@ function _ts_generator$3(thisArg, body) {
   }
 }
 var NumberInput = /* @__PURE__ */ forwardRef(function(_param, ref) {
-  var value = _param.value, _param_canBeFloat = _param.canBeFloat, canBeFloat = _param_canBeFloat === void 0 ? false : _param_canBeFloat, _param_canBeNegative = _param.canBeNegative, canBeNegative = _param_canBeNegative === void 0 ? false : _param_canBeNegative, defaultValue = _param.defaultValue, _param_precision = _param.precision, precision = _param_precision === void 0 ? 3 : _param_precision, _param_intPartPrecision = _param.intPartPrecision, intPartPrecision = _param_intPartPrecision === void 0 ? 7 : _param_intPartPrecision, onChange = _param.onChange, onBlur = _param.onBlur, min2 = _param.min, max2 = _param.max, props = _object_without_properties$9(_param, [
+  var value = _param.value, _param_canBeFloat = _param.canBeFloat, canBeFloat = _param_canBeFloat === void 0 ? false : _param_canBeFloat, _param_canBeNegative = _param.canBeNegative, canBeNegative = _param_canBeNegative === void 0 ? false : _param_canBeNegative, defaultValue = _param.defaultValue, _param_precision = _param.precision, precision = _param_precision === void 0 ? 3 : _param_precision, _param_intPartPrecision = _param.intPartPrecision, intPartPrecision = _param_intPartPrecision === void 0 ? 7 : _param_intPartPrecision, onChange = _param.onChange, onBlur = _param.onBlur, min2 = _param.min, max2 = _param.max, props = _object_without_properties$a(_param, [
     "value",
     "canBeFloat",
     "canBeNegative",
@@ -14912,11 +15113,13 @@ var inputStyles$3 = {
   input: {
     minWidth: 120
   },
-  icon: {
-    padding: 0,
-    width: 24,
-    "&:last-child": {
-      paddingRight: 0
+  tweakControlWrapper: {
+    icon: {
+      padding: 0,
+      width: 24,
+      "&:last-child": {
+        paddingRight: 0
+      }
     }
   }
 };
@@ -15032,7 +15235,6 @@ var FilterInterval = function(param) {
                 onChange: handleFromChange,
                 value: value === null || value === void 0 ? void 0 : value[0],
                 label: withFieldNameInLabel ? "".concat(labelName, " ").concat(translates.from.toLocaleLowerCase()) : translates.from,
-                border: "bottom",
                 canBeFloat,
                 isClearable: true,
                 min: fromInput === null || fromInput === void 0 ? void 0 : fromInput.min,
@@ -15057,7 +15259,6 @@ var FilterInterval = function(param) {
                 onChange: handleToChange,
                 value: value === null || value === void 0 ? void 0 : value[1],
                 label: withFieldNameInLabel ? "".concat(labelName, " ").concat(translates.to.toLocaleLowerCase()) : translates.to,
-                border: "bottom",
                 canBeFloat,
                 isClearable: true,
                 min: toInput === null || toInput === void 0 ? void 0 : toInput.min,
@@ -15232,10 +15433,12 @@ var useStyles$s = createThemedStyles("MultiSelectList", {
 });
 var searchInputStyles$2 = {
   tweakInput: {
-    inputWrapper: {
-      backgroundColor: "transparent",
-      border: "none",
-      height: 40
+    tweakControlWrapper: {
+      root: {
+        "--control-height": "40px",
+        backgroundColor: "transparent",
+        border: "none"
+      }
     }
   }
 };
@@ -16190,10 +16393,12 @@ var useStyles$r = createThemedStyles("FilterSelect", {
 });
 var searchInputStyles$1 = {
   tweakInput: {
-    inputWrapper: {
-      backgroundColor: "transparent",
-      border: "none",
-      height: 40
+    tweakControlWrapper: {
+      root: {
+        "--control-height": "40px",
+        backgroundColor: "transparent",
+        border: "none"
+      }
     }
   }
 };
@@ -18215,7 +18420,6 @@ var FilterWithDates = function(param) {
               locale: dateLocale,
               onChangeDate: handleChangeFrom,
               tweakStyles: tweakStartDatePickerStyles,
-              border: "bottom",
               testId: getTestId(testId, "from"),
               isClearable
             }, startPickerProps))
@@ -18230,7 +18434,6 @@ var FilterWithDates = function(param) {
               locale: dateLocale,
               onChangeDate: handleChangeTo,
               tweakStyles: tweakEndDatePickerStyles,
-              border: "bottom",
               testId: getTestId(testId, "to"),
               isClearable
             }, endPickerProps))
@@ -18777,16 +18980,17 @@ var useStyles$o = createThemedStyles("FiltersPaneSearch", {
 });
 var searchInputStyles = {
   tweakInput: {
-    inputWrapper: {
-      backgroundColor: "transparent",
-      border: "none",
-      height: FILTER_HEIGHT - 2,
-      fontSize: 14,
-      minWidth: 140
-    },
-    focused: {
-      backgroundColor: "transparent",
-      border: "none"
+    tweakControlWrapper: {
+      root: {
+        "--control-height": "".concat(FILTER_HEIGHT - 2, "px"),
+        backgroundColor: "transparent",
+        border: "none",
+        minWidth: 140
+      },
+      focused: {
+        backgroundColor: "transparent",
+        border: "none"
+      }
     }
   }
 };
@@ -18910,7 +19114,7 @@ function _unsupported_iterable_to_array$8(o, minLen) {
     return _array_like_to_array$8(o, minLen);
 }
 function FiltersPaneSearch(param) {
-  var value = param.value, _param_fields = param.fields, fields = _param_fields === void 0 ? [] : _param_fields, field = param.field, onChange = param.onChange, localeKey = param.localeKey, locale2 = param.locale, getValueId = param.getValueId, getValueView = param.getValueView, getValueString = param.getValueString, hasClearSelectButton = param.hasClearSelectButton, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isSelectSearchEnabled = param.isSelectSearchEnabled, isSelectSearchEnabled = _param_isSelectSearchEnabled === void 0 ? true : _param_isSelectSearchEnabled, _param_isAutoSizeable = param.isAutoSizeable, isAutoSizeable = _param_isAutoSizeable === void 0 ? true : _param_isAutoSizeable, maxLength = param.maxLength, data = param.data, tweakStyles = param.tweakStyles, testId = param.testId;
+  var value = param.value, _param_fields = param.fields, fields = _param_fields === void 0 ? [] : _param_fields, field = param.field, onChange = param.onChange, localeKey = param.localeKey, locale2 = param.locale, getValueId = param.getValueId, getValueView = param.getValueView, getValueString = param.getValueString, hasClearSelectButton = param.hasClearSelectButton, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isSelectSearchEnabled = param.isSelectSearchEnabled, isSelectSearchEnabled = _param_isSelectSearchEnabled === void 0 ? true : _param_isSelectSearchEnabled, maxLength = param.maxLength, data = param.data, tweakStyles = param.tweakStyles, testId = param.testId;
   var classes = useStyles$o({
     theme: tweakStyles
   });
@@ -18976,7 +19180,6 @@ function FiltersPaneSearch(param) {
         },
         testId: testId !== void 0 ? "".concat(testId, "-input") : void 0,
         maxLength,
-        isAutoSizeable,
         isDisabled
       }),
       /* @__PURE__ */ jsxs("div", {
@@ -26060,10 +26263,10 @@ function _object_spread_props$l(target, source) {
   }
   return target;
 }
-function _object_without_properties$8(source, excluded) {
+function _object_without_properties$9(source, excluded) {
   if (source == null)
     return {};
-  var target = _object_without_properties_loose$8(source, excluded);
+  var target = _object_without_properties_loose$9(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -26078,7 +26281,7 @@ function _object_without_properties$8(source, excluded) {
   }
   return target;
 }
-function _object_without_properties_loose$8(source, excluded) {
+function _object_without_properties_loose$9(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -26093,7 +26296,7 @@ function _object_without_properties_loose$8(source, excluded) {
   return target;
 }
 function FlexibleTableCell(_param) {
-  var row = _param.row, columnName = _param.columnName, config = _param.config, renderMode = _param.renderMode, isSecond = _param.isSecond, isOldSticky = _param.isSticky, isLoading = _param.isLoading, tweakStyles = _param.tweakStyles, valueComponentProps = _object_without_properties$8(_param, [
+  var row = _param.row, columnName = _param.columnName, config = _param.config, renderMode = _param.renderMode, isSecond = _param.isSecond, isOldSticky = _param.isSticky, isLoading = _param.isLoading, tweakStyles = _param.tweakStyles, valueComponentProps = _object_without_properties$9(_param, [
     "row",
     "columnName",
     "config",
@@ -26436,10 +26639,10 @@ function _object_spread_props$j(target, source) {
   }
   return target;
 }
-function _object_without_properties$7(source, excluded) {
+function _object_without_properties$8(source, excluded) {
   if (source == null)
     return {};
-  var target = _object_without_properties_loose$7(source, excluded);
+  var target = _object_without_properties_loose$8(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -26454,7 +26657,7 @@ function _object_without_properties$7(source, excluded) {
   }
   return target;
 }
-function _object_without_properties_loose$7(source, excluded) {
+function _object_without_properties_loose$8(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -26469,7 +26672,7 @@ function _object_without_properties_loose$7(source, excluded) {
   return target;
 }
 function FlexibleTable(_param) {
-  var content = _param.content, headerContent = _param.headerContent, config = _param.config, enabledColumns = _param.enabledColumns, activeRows = _param.activeRows, uniqueField = _param.uniqueField, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_isFirstColumnSticky = _param.isFirstColumnSticky, isFirstColumnSticky = _param_isFirstColumnSticky === void 0 ? false : _param_isFirstColumnSticky, _param_isHorizontallyScrollable = _param.isHorizontallyScrollable, isHorizontallyScrollable = _param_isHorizontallyScrollable === void 0 ? false : _param_isHorizontallyScrollable, _param_isRowFocusable = _param.isRowFocusable, isRowFocusable = _param_isRowFocusable === void 0 ? false : _param_isRowFocusable, infinityScrollConfig = _param.infinityScrollConfig, _param_renderMode = _param.renderMode, renderMode = _param_renderMode === void 0 ? "table" : _param_renderMode, refForScroll = _param.refForScroll, nothingFoundContent = _param.nothingFoundContent, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, _param_shouldRenderHeader = _param.shouldRenderHeader, shouldRenderHeader = _param_shouldRenderHeader === void 0 ? true : _param_shouldRenderHeader, onHeadClick = _param.onHeadClick, restProps = _object_without_properties$7(_param, [
+  var content = _param.content, headerContent = _param.headerContent, config = _param.config, enabledColumns = _param.enabledColumns, activeRows = _param.activeRows, uniqueField = _param.uniqueField, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_isFirstColumnSticky = _param.isFirstColumnSticky, isFirstColumnSticky = _param_isFirstColumnSticky === void 0 ? false : _param_isFirstColumnSticky, _param_isHorizontallyScrollable = _param.isHorizontallyScrollable, isHorizontallyScrollable = _param_isHorizontallyScrollable === void 0 ? false : _param_isHorizontallyScrollable, _param_isRowFocusable = _param.isRowFocusable, isRowFocusable = _param_isRowFocusable === void 0 ? false : _param_isRowFocusable, infinityScrollConfig = _param.infinityScrollConfig, _param_renderMode = _param.renderMode, renderMode = _param_renderMode === void 0 ? "table" : _param_renderMode, refForScroll = _param.refForScroll, nothingFoundContent = _param.nothingFoundContent, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, _param_shouldRenderHeader = _param.shouldRenderHeader, shouldRenderHeader = _param_shouldRenderHeader === void 0 ? true : _param_shouldRenderHeader, onHeadClick = _param.onHeadClick, restProps = _object_without_properties$8(_param, [
     "content",
     "headerContent",
     "config",
@@ -26702,11 +26905,11 @@ var useStyles$g = createThemedStyles("IncrementInput", {
     right: BUTTONS_GAP,
     top: BUTTONS_GAP,
     bottom: BUTTONS_GAP,
-    zIndex: 1
+    zIndex: dimensions.Z_INDEX.CONTROL_FOCUS + 1
   },
   button: {
     width: "100%",
-    height: (dimensions.CONTROL_HEIGHT - 5) / 2,
+    height: (dimensions.CONTROL.HEIGHT - 5) / 2,
     border: "none",
     outline: "none",
     backgroundColor: colors.GREY_BACKGROUND,
@@ -26743,12 +26946,12 @@ var useStyles$g = createThemedStyles("IncrementInput", {
 });
 var inputStyles$2 = {
   input: {
-    "&:not($withControls)": {
+    paddingRight: BUTTONS_WIDTH + BUTTONS_GAP
+  },
+  tweakControlWrapper: {
+    controls: {
       paddingRight: BUTTONS_WIDTH + BUTTONS_GAP
     }
-  },
-  controls: {
-    paddingRight: BUTTONS_WIDTH + BUTTONS_GAP
   }
 };
 function _define_property$k(obj, key, value) {
@@ -26803,10 +27006,10 @@ function _object_spread_props$i(target, source) {
   }
   return target;
 }
-function _object_without_properties$6(source, excluded) {
+function _object_without_properties$7(source, excluded) {
   if (source == null)
     return {};
-  var target = _object_without_properties_loose$6(source, excluded);
+  var target = _object_without_properties_loose$7(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -26821,7 +27024,7 @@ function _object_without_properties$6(source, excluded) {
   }
   return target;
 }
-function _object_without_properties_loose$6(source, excluded) {
+function _object_without_properties_loose$7(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -26836,7 +27039,7 @@ function _object_without_properties_loose$6(source, excluded) {
   return target;
 }
 var IncrementInput = function(_param) {
-  var value = _param.value, onChange = _param.onChange, min2 = _param.min, max2 = _param.max, _param_step = _param.step, step = _param_step === void 0 ? 1 : _param_step, intPartPrecision = _param.intPartPrecision, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, isDisabled = _param.isDisabled, isReadonly = _param.isReadonly, isInvalid = _param.isInvalid, props = _object_without_properties$6(_param, [
+  var value = _param.value, onChange = _param.onChange, min2 = _param.min, max2 = _param.max, _param_step = _param.step, step = _param_step === void 0 ? 1 : _param_step, intPartPrecision = _param.intPartPrecision, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, isDisabled = _param.isDisabled, isReadonly = _param.isReadonly, isInvalid = _param.isInvalid, props = _object_without_properties$7(_param, [
     "value",
     "onChange",
     "min",
@@ -27284,10 +27487,10 @@ function _object_spread_props$h(target, source) {
   }
   return target;
 }
-function _object_without_properties$5(source, excluded) {
+function _object_without_properties$6(source, excluded) {
   if (source == null)
     return {};
-  var target = _object_without_properties_loose$5(source, excluded);
+  var target = _object_without_properties_loose$6(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -27302,7 +27505,7 @@ function _object_without_properties$5(source, excluded) {
   }
   return target;
 }
-function _object_without_properties_loose$5(source, excluded) {
+function _object_without_properties_loose$6(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -27333,7 +27536,7 @@ function _unsupported_iterable_to_array$6(o, minLen) {
     return _array_like_to_array$6(o, minLen);
 }
 var Modal = function(_param) {
-  var data = _param.data, tweakStyles = _param.tweakStyles, title = _param.title, _param_size = _param.size, size2 = _param_size === void 0 ? "l" : _param_size, _param_isFooterSticky = _param.isFooterSticky, isFooterSticky = _param_isFooterSticky === void 0 ? false : _param_isFooterSticky, footer = _param.footer, buttons = _param.buttons, _param_buttonsAlign = _param.buttonsAlign, buttonsAlign = _param_buttonsAlign === void 0 ? "right" : _param_buttonsAlign, _param_hasCloseButton = _param.hasCloseButton, hasCloseButton = _param_hasCloseButton === void 0 ? true : _param_hasCloseButton, _param_hasOverlay = _param.hasOverlay, hasOverlay = _param_hasOverlay === void 0 ? true : _param_hasOverlay, _param_isOpen = _param.isOpen, isOpen = _param_isOpen === void 0 ? false : _param_isOpen, _param_position = _param.position, position = _param_position === void 0 ? "center" : _param_position, children = _param.children, zIndex = _param.zIndex, testId = _param.testId, _param_shouldCloseOnOverlayClick = _param.shouldCloseOnOverlayClick, shouldCloseOnOverlayClick = _param_shouldCloseOnOverlayClick === void 0 ? true : _param_shouldCloseOnOverlayClick, _param_shouldCloseOnEsc = _param.shouldCloseOnEsc, shouldCloseOnEsc = _param_shouldCloseOnEsc === void 0 ? true : _param_shouldCloseOnEsc, _param_shouldBlockScroll = _param.shouldBlockScroll, shouldBlockScroll = _param_shouldBlockScroll === void 0 ? true : _param_shouldBlockScroll, _param_timeout = _param.timeout, timeout = _param_timeout === void 0 ? 150 : _param_timeout, _param_unmountOnExit = _param.unmountOnExit, unmountOnExit = _param_unmountOnExit === void 0 ? true : _param_unmountOnExit, onClose = _param.onClose, restProps = _object_without_properties$5(_param, [
+  var data = _param.data, tweakStyles = _param.tweakStyles, title = _param.title, _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, _param_isFooterSticky = _param.isFooterSticky, isFooterSticky = _param_isFooterSticky === void 0 ? false : _param_isFooterSticky, footer = _param.footer, buttons = _param.buttons, _param_buttonsAlign = _param.buttonsAlign, buttonsAlign = _param_buttonsAlign === void 0 ? "right" : _param_buttonsAlign, _param_hasCloseButton = _param.hasCloseButton, hasCloseButton = _param_hasCloseButton === void 0 ? true : _param_hasCloseButton, _param_hasOverlay = _param.hasOverlay, hasOverlay = _param_hasOverlay === void 0 ? true : _param_hasOverlay, _param_isOpen = _param.isOpen, isOpen = _param_isOpen === void 0 ? false : _param_isOpen, _param_position = _param.position, position = _param_position === void 0 ? "center" : _param_position, children = _param.children, zIndex = _param.zIndex, testId = _param.testId, _param_shouldCloseOnOverlayClick = _param.shouldCloseOnOverlayClick, shouldCloseOnOverlayClick = _param_shouldCloseOnOverlayClick === void 0 ? true : _param_shouldCloseOnOverlayClick, _param_shouldCloseOnEsc = _param.shouldCloseOnEsc, shouldCloseOnEsc = _param_shouldCloseOnEsc === void 0 ? true : _param_shouldCloseOnEsc, _param_shouldBlockScroll = _param.shouldBlockScroll, shouldBlockScroll = _param_shouldBlockScroll === void 0 ? true : _param_shouldBlockScroll, _param_timeout = _param.timeout, timeout = _param_timeout === void 0 ? 150 : _param_timeout, _param_unmountOnExit = _param.unmountOnExit, unmountOnExit = _param_unmountOnExit === void 0 ? true : _param_unmountOnExit, onClose = _param.onClose, restProps = _object_without_properties$6(_param, [
     "data",
     "tweakStyles",
     "title",
@@ -27425,7 +27628,7 @@ var Modal = function(_param) {
         enabled: shouldBlockScroll,
         forwardProps: true,
         children: /* @__PURE__ */ jsx("div", _object_spread_props$h(_object_spread$i({
-          className: clsx(classes.root, classes[size2], (_obj2 = {}, _define_property$j(_obj2, classes.overlay, position !== "static" && hasOverlay), _define_property$j(_obj2, classes.sideBar, position === "left" || position === "right"), _define_property$j(_obj2, classes.fixedPosition, position !== "static"), _obj2)),
+          className: clsx(classes.root, classes[size], (_obj2 = {}, _define_property$j(_obj2, classes.overlay, position !== "static" && hasOverlay), _define_property$j(_obj2, classes.sideBar, position === "left" || position === "right"), _define_property$j(_obj2, classes.fixedPosition, position !== "static"), _obj2)),
           style: {
             zIndex
           }
@@ -28093,7 +28296,7 @@ function _object_spread_props$e(target, source) {
   return target;
 }
 var Notification = function(param) {
-  var children = param.children, type = param.type, _param_isFullWidth = param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? true : _param_isFullWidth, text = param.text, title = param.title, testId = param.testId, _param_size = param.size, size2 = _param_size === void 0 ? "s" : _param_size, data = param.data, icon = param.icon, tweakStyles = param.tweakStyles;
+  var children = param.children, type = param.type, _param_isFullWidth = param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? true : _param_isFullWidth, text = param.text, title = param.title, testId = param.testId, _param_size = param.size, size = _param_size === void 0 ? "s" : _param_size, data = param.data, icon = param.icon, tweakStyles = param.tweakStyles;
   var classes = useStyles$b({
     theme: tweakStyles
   });
@@ -28103,7 +28306,7 @@ var Notification = function(param) {
   var hasIcon = isReactNodeNotEmpty(icon) || isDefaultType;
   var _obj2;
   return /* @__PURE__ */ jsxs("div", _object_spread_props$e(_object_spread$f({
-    className: clsx(classes.root, classes[size2], classes[type], (_obj2 = {}, _define_property$g(_obj2, classes.inline, !isFullWidth), _define_property$g(_obj2, classes.withTitle, hasTitle), _define_property$g(_obj2, classes.withText, hasText), _obj2))
+    className: clsx(classes.root, classes[size], classes[type], (_obj2 = {}, _define_property$g(_obj2, classes.inline, !isFullWidth), _define_property$g(_obj2, classes.withTitle, hasTitle), _define_property$g(_obj2, classes.withText, hasText), _obj2))
   }, addDataTestId(testId), addDataAttributes(data)), {
     children: [
       hasIcon && /* @__PURE__ */ jsx("div", {
@@ -28178,7 +28381,7 @@ var useStyles$a = createThemedStyles("PhoneInputCountryList", {
   },
   searchContainer: {
     width: "100%",
-    height: dimensions.CONTROL_HEIGHT,
+    height: dimensions.CONTROL.HEIGHT,
     display: "flex",
     alignItems: "center",
     boxSizing: "border-box",
@@ -28259,9 +28462,11 @@ var useStyles$a = createThemedStyles("PhoneInputCountryList", {
   }
 });
 var inputStyles$1 = {
-  inputWrapper: {
-    border: "none",
-    height: "calc(var(--control-height) - 2px)"
+  tweakControlWrapper: {
+    root: {
+      border: "none",
+      height: "calc(var(--control-height) - 2px)"
+    }
   },
   input: {
     fontSize: 14,
@@ -28475,14 +28680,15 @@ var useStyles$9 = createThemedStyles("PhoneInput", {
   root: {
     width: "100%",
     position: "relative",
-    boxSizing: "border-box"
+    boxSizing: "border-box",
+    zIndex: 0
   },
   countrySelectContainer: {
     position: "absolute",
     left: 1,
     top: 1,
     width: COUNTRY_SELECT_WIDTH,
-    height: dimensions.CONTROL_HEIGHT - 2,
+    height: dimensions.CONTROL.HEIGHT - 2,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -28493,7 +28699,7 @@ var useStyles$9 = createThemedStyles("PhoneInput", {
     ],
     transition: "border-color 0.2s ease-in",
     cursor: "pointer",
-    zIndex: 2
+    zIndex: dimensions.Z_INDEX.CONTROL_FOCUS + 1
   },
   disabledCountrySelect: {
     cursor: "default"
@@ -28525,17 +28731,19 @@ var useStyles$9 = createThemedStyles("PhoneInput", {
   flagListContainer: {
     position: "absolute",
     width: "100%",
-    top: dimensions.CONTROL_HEIGHT + 6,
+    top: dimensions.CONTROL.HEIGHT + 6,
     left: -1,
     zIndex: 3
   }
 });
 var inputStyles = {
-  inputWrapper: {
-    paddingLeft: COUNTRY_SELECT_WIDTH
-  },
-  label: {
-    marginLeft: COUNTRY_SELECT_WIDTH
+  tweakControlWrapper: {
+    root: {
+      paddingLeft: COUNTRY_SELECT_WIDTH
+    },
+    label: {
+      marginLeft: COUNTRY_SELECT_WIDTH
+    }
   }
 };
 function _array_like_to_array$2(arr, len) {
@@ -28632,10 +28840,10 @@ function _object_spread_props$d(target, source) {
   }
   return target;
 }
-function _object_without_properties$4(source, excluded) {
+function _object_without_properties$5(source, excluded) {
   if (source == null)
     return {};
-  var target = _object_without_properties_loose$4(source, excluded);
+  var target = _object_without_properties_loose$5(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -28650,7 +28858,7 @@ function _object_without_properties$4(source, excluded) {
   }
   return target;
 }
-function _object_without_properties_loose$4(source, excluded) {
+function _object_without_properties_loose$5(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -28681,7 +28889,7 @@ function _unsupported_iterable_to_array$2(o, minLen) {
     return _array_like_to_array$2(o, minLen);
 }
 var PhoneInput = function(_param) {
-  var _param_locale = _param.locale, locale2 = _param_locale === void 0 ? "ru" : _param_locale, _param_value = _param.value, value = _param_value === void 0 ? DEFAULT_VALUE$1 : _param_value, onChange = _param.onChange, data = _param.data, testId = _param.testId, isDisabled = _param.isDisabled, isInvalid = _param.isInvalid, isActive = _param.isActive, tweakStyles = _param.tweakStyles, _param_codeSearchPlaceholder = _param.codeSearchPlaceholder, codeSearchPlaceholder = _param_codeSearchPlaceholder === void 0 ? "Поиск" : _param_codeSearchPlaceholder, _param_noMatchesLabel = _param.noMatchesLabel, noMatchesLabel = _param_noMatchesLabel === void 0 ? "Ничего не найдено" : _param_noMatchesLabel, inputProps = _object_without_properties$4(_param, [
+  var _param_locale = _param.locale, locale2 = _param_locale === void 0 ? "ru" : _param_locale, _param_value = _param.value, value = _param_value === void 0 ? DEFAULT_VALUE$1 : _param_value, onChange = _param.onChange, data = _param.data, testId = _param.testId, isDisabled = _param.isDisabled, isInvalid = _param.isInvalid, isActive = _param.isActive, tweakStyles = _param.tweakStyles, _param_codeSearchPlaceholder = _param.codeSearchPlaceholder, codeSearchPlaceholder = _param_codeSearchPlaceholder === void 0 ? "Поиск" : _param_codeSearchPlaceholder, _param_noMatchesLabel = _param.noMatchesLabel, noMatchesLabel = _param_noMatchesLabel === void 0 ? "Ничего не найдено" : _param_noMatchesLabel, inputProps = _object_without_properties$5(_param, [
     "locale",
     "value",
     "onChange",
@@ -29211,7 +29419,7 @@ function _unsupported_iterable_to_array$1(o, minLen) {
     return _array_like_to_array$1(o, minLen);
 }
 function Selector(param) {
-  var options = param.options, value = param.value, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isRequired = param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_hasSameOptionsWidth = param.hasSameOptionsWidth, hasSameOptionsWidth = _param_hasSameOptionsWidth === void 0 ? true : _param_hasSameOptionsWidth, _param_iconPosition = param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_size = param.size, size2 = _param_size === void 0 ? "l" : _param_size, testId = param.testId, data = param.data, tweakStyles = param.tweakStyles, onChange = param.onChange;
+  var options = param.options, value = param.value, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isRequired = param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_hasSameOptionsWidth = param.hasSameOptionsWidth, hasSameOptionsWidth = _param_hasSameOptionsWidth === void 0 ? true : _param_hasSameOptionsWidth, _param_iconPosition = param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_size = param.size, size = _param_size === void 0 ? "l" : _param_size, testId = param.testId, data = param.data, tweakStyles = param.tweakStyles, onChange = param.onChange;
   var classes = useStyles$7({
     theme: tweakStyles
   });
@@ -29231,7 +29439,7 @@ function Selector(param) {
     setElementsData(_to_consumable_array(listEl.querySelectorAll(".".concat(classes.optionWrapper))));
   }, [
     options,
-    size2
+    size
   ]);
   var activeElementData = isNotEmpty(value) ? elementsData[optionsValues.indexOf(value)] : void 0;
   var _obj2;
@@ -29255,7 +29463,7 @@ function Selector(param) {
         }, addDataTestId(testId)), {
           children: /* @__PURE__ */ jsxs("button", _object_spread_props$b(_object_spread$b({
             type: "button",
-            className: clsx(classes.option, classes[size2], (_obj3 = {}, _define_property$b(_obj3, classes.active, isActiveOption), _define_property$b(_obj3, classes.disabled, isDisabledOption), _obj3)),
+            className: clsx(classes.option, classes[size], (_obj3 = {}, _define_property$b(_obj3, classes.active, isActiveOption), _define_property$b(_obj3, classes.disabled, isDisabledOption), _obj3)),
             disabled: isDisabledOption,
             onClick: !isDisabledOption ? function() {
               return onChange(option.value);
@@ -29510,10 +29718,10 @@ function _object_spread_props$9(target, source) {
   }
   return target;
 }
-function _object_without_properties$3(source, excluded) {
+function _object_without_properties$4(source, excluded) {
   if (source == null)
     return {};
-  var target = _object_without_properties_loose$3(source, excluded);
+  var target = _object_without_properties_loose$4(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -29528,7 +29736,7 @@ function _object_without_properties$3(source, excluded) {
   }
   return target;
 }
-function _object_without_properties_loose$3(source, excluded) {
+function _object_without_properties_loose$4(source, excluded) {
   if (source == null)
     return {};
   var target = {};
@@ -29645,7 +29853,7 @@ function _ts_generator(thisArg, body) {
   }
 }
 var SmartInput = /* @__PURE__ */ forwardRef(function(_param, ref) {
-  var _param_value = _param.value, value = _param_value === void 0 ? "" : _param_value, _param_smartType = _param.smartType, smartType = _param_smartType === void 0 ? "default" : _param_smartType, regExp = _param.regExp, maxLength = _param.maxLength, _param_isUpperCase = _param.isUpperCase, isUpperCase = _param_isUpperCase === void 0 ? false : _param_isUpperCase, _param_isTransliterationEnabled = _param.isTransliterationEnabled, isTransliterationEnabled = _param_isTransliterationEnabled === void 0 ? true : _param_isTransliterationEnabled, onChange = _param.onChange, rest = _object_without_properties$3(_param, [
+  var _param_value = _param.value, value = _param_value === void 0 ? "" : _param_value, _param_smartType = _param.smartType, smartType = _param_smartType === void 0 ? "default" : _param_smartType, regExp = _param.regExp, maxLength = _param.maxLength, _param_isUpperCase = _param.isUpperCase, isUpperCase = _param_isUpperCase === void 0 ? false : _param_isUpperCase, _param_isTransliterationEnabled = _param.isTransliterationEnabled, isTransliterationEnabled = _param_isTransliterationEnabled === void 0 ? true : _param_isTransliterationEnabled, onChange = _param.onChange, rest = _object_without_properties$4(_param, [
     "value",
     "smartType",
     "regExp",
@@ -29929,12 +30137,12 @@ function _object_spread_props$8(target, source) {
   return target;
 }
 var Status = function(param) {
-  var children = param.children, color = param.color, _param_size = param.size, size2 = _param_size === void 0 ? "s" : _param_size, icon = param.icon, _param_iconPosition = param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "right" : _param_iconPosition, badge = param.badge, tweakStyles = param.tweakStyles, testId = param.testId, data = param.data;
+  var children = param.children, color = param.color, _param_size = param.size, size = _param_size === void 0 ? "s" : _param_size, icon = param.icon, _param_iconPosition = param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "right" : _param_iconPosition, badge = param.badge, tweakStyles = param.tweakStyles, testId = param.testId, data = param.data;
   var classes = useStyles$6({
     theme: tweakStyles
   });
   return /* @__PURE__ */ jsxs("span", _object_spread_props$8(_object_spread$8({
-    className: clsx(classes.root, classes[size2], classes[color])
+    className: clsx(classes.root, classes[size], classes[color])
   }, addDataTestId(testId), addDataAttributes(data)), {
     children: [
       isReactNodeNotEmpty(children) && /* @__PURE__ */ jsx("span", {
@@ -30150,49 +30358,28 @@ function _object_spread_props$6(target, source) {
   }
   return target;
 }
-var PADDING_X = 12;
 var useStyles$4 = createThemedStyles("TextArea", {
-  root: {
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    flexDirection: "column"
-  },
-  wrapper: {
-    display: "flex",
-    position: "relative",
-    width: "100%",
-    flexGrow: 1,
-    boxSizing: "border-box",
-    transition: animations.defaultTransition,
-    transitionProperty: "border-color",
-    backgroundColor: "white",
-    border: [
-      "solid",
-      1,
-      "lightgray"
-    ]
-  },
   textarea: _object_spread_props$6(_object_spread$6({}, helpers.withScrollBar), {
     width: "100%",
     height: "100%",
-    outline: "none",
-    outlineStyle: "none",
     fontFamily: "inherit",
     fontSize: 16,
     padding: [
       14,
-      PADDING_X,
-      8
+      0,
+      8,
+      "var(--control-padding)"
     ],
-    scrollPadding: "14px 0 8px",
+    scrollPadding: "14px 0 8px var(--control-padding)",
+    scrollbarGutter: "stable",
+    boxSizing: "border-box",
+    outline: "none",
+    outlineStyle: "none",
     transition: animations.defaultTransition,
     transitionProperty: "background-color",
     border: "none",
     resize: "none",
-    "&:disabled": {
-      extend: "disabled"
-    },
+    background: "transparent",
     "&::placeholder": {
       opacity: 1
     },
@@ -30202,107 +30389,38 @@ var useStyles$4 = createThemedStyles("TextArea", {
       margin: 0
     }
   }),
-  autosize: {
-    display: "inline-grid",
+  autoSized: {
+    display: "grid",
     gridTemplateRows: "minmax(0, 100%)",
     "& > $textarea, &::after": {
-      gridArea: "1 / 1 / 2 / 2"
+      gridArea: "1 / 2"
     },
     "&::after": {
       extend: "textarea",
       content: 'attr(data-value) " "',
+      // Без пробела ломается!
       overflowWrap: "break-word",
       whiteSpace: "pre-wrap",
-      visibility: "hidden",
-      scrollbarGutter: "stable"
-    }
-  },
-  focused: {
-    position: "relative",
-    zIndex: 1
-  },
-  withFloatingLabel: {
-    "& $textarea, &::after": {
-      paddingTop: 24,
-      scrollPaddingTop: "24px"
-    }
-  },
-  floating: {},
-  activeLabel: {
-    display: "none",
-    "&$floating": {
-      display: "block",
-      transform: "scale(0.75) translateY(-120%)"
-    }
-  },
-  required: {
-    "&:before": {
-      content: '""',
-      position: "absolute",
-      left: -12,
-      top: 20,
-      width: 6,
-      height: 6,
-      borderRadius: "50%",
-      backgroundColor: "red"
-    }
-  },
-  disabled: {},
-  label: {
-    position: "absolute",
-    pointerEvents: "none",
-    left: PADDING_X,
-    top: PADDING_X * 2,
-    transformOrigin: "top left",
-    transform: "translateY(-50%)",
-    transition: animations.defaultTransition,
-    transitionProperty: "transform, color",
-    fontSize: 16
-  },
-  invalid: {
-    borderColor: "red"
-  },
-  invalidLabel: {},
-  error: {
-    fontSize: 12,
-    paddingTop: 4,
-    paddingLeft: 13,
-    color: "red"
-  },
-  requiredLabel: {
-    "&:after": {
-      content: '""',
-      position: "absolute",
-      right: -8,
-      top: 4,
-      transform: "translate(0, -50%)",
-      width: 6,
-      height: 6,
-      borderRadius: "50%",
-      backgroundColor: "red"
+      visibility: "hidden"
     }
   },
   symbolsCount: {
-    display: "block",
     textAlign: "right",
     marginTop: 4,
     fontSize: 12,
     marginLeft: "auto",
-    paddingLeft: 32,
-    whiteSpace: "nowrap"
+    whiteSpace: "nowrap",
+    pointerEvents: "none"
   },
   symbolsCountError: {
     color: "red"
-  },
-  footer: {
-    display: "flex"
-  },
-  info: {
-    fontSize: 12,
-    paddingTop: 4,
-    paddingLeft: 13
   }
 });
+var controlWrapperStyles = {
+  label: {
+    top: 16
+  }
+};
 function _array_like_to_array(arr, len) {
   if (len == null || len > arr.length)
     len = arr.length;
@@ -30397,6 +30515,38 @@ function _object_spread_props$5(target, source) {
   }
   return target;
 }
+function _object_without_properties$3(source, excluded) {
+  if (source == null)
+    return {};
+  var target = _object_without_properties_loose$3(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0)
+        continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key))
+        continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _object_without_properties_loose$3(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0)
+      continue;
+    target[key] = source[key];
+  }
+  return target;
+}
 function _sliced_to_array(arr, i) {
   return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
 }
@@ -30414,93 +30564,107 @@ function _unsupported_iterable_to_array(o, minLen) {
     return _array_like_to_array(o, minLen);
 }
 var DEFAULT_VALUE = "";
-var TextArea = /* @__PURE__ */ forwardRef(function(param, ref) {
-  var _param_value = param.value, value = _param_value === void 0 ? DEFAULT_VALUE : _param_value, label = param.label, placeholder = param.placeholder, isDisabled = param.isDisabled, _param_hasFloatingLabel = param.hasFloatingLabel, hasFloatingLabel = _param_hasFloatingLabel === void 0 ? true : _param_hasFloatingLabel, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, infoMessage = param.infoMessage, errorMessage = param.errorMessage, _param_isRequired = param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, name = param.name, _param_hasRequiredLabel = param.hasRequiredLabel, hasRequiredLabel = _param_hasRequiredLabel === void 0 ? false : _param_hasRequiredLabel, _param_shouldFocusOnMount = param.shouldFocusOnMount, shouldFocusOnMount = _param_shouldFocusOnMount === void 0 ? false : _param_shouldFocusOnMount, _param_hasCounter = param.hasCounter, hasCounter = _param_hasCounter === void 0 ? true : _param_hasCounter, _param_shouldTrimAfterMaxLength = param.shouldTrimAfterMaxLength, shouldTrimAfterMaxLength = _param_shouldTrimAfterMaxLength === void 0 ? false : _param_shouldTrimAfterMaxLength, _param_isAutoSizeable = param.isAutoSizeable, isAutoSizeable = _param_isAutoSizeable === void 0 ? true : _param_isAutoSizeable, _param_shouldAlwaysShowPlaceholder = param.shouldAlwaysShowPlaceholder, shouldAlwaysShowPlaceholder = _param_shouldAlwaysShowPlaceholder === void 0 ? false : _param_shouldAlwaysShowPlaceholder, maxLength = param.maxLength, rows = param.rows, testId = param.testId, data = param.data, tweakStyles = param.tweakStyles, onChange = param.onChange, onPaste = param.onPaste, onFocus = param.onFocus, onBlur = param.onBlur;
+var TextArea = /* @__PURE__ */ forwardRef(function(_param, ref) {
+  var _param_value = _param.value, value = _param_value === void 0 ? DEFAULT_VALUE : _param_value, label = _param.label, placeholder = _param.placeholder, infoMessage = _param.infoMessage, errorMessage = _param.errorMessage, name = _param.name;
+  _param.shouldFocusOnMount;
+  var _param_hasCounter = _param.hasCounter, hasCounter = _param_hasCounter === void 0 ? true : _param_hasCounter, shouldTrimAfterMaxLength = _param.shouldTrimAfterMaxLength, _param_isAutoSized = _param.isAutoSized, isAutoSized = _param_isAutoSized === void 0 ? true : _param_isAutoSized, shouldAlwaysShowPlaceholder = _param.shouldAlwaysShowPlaceholder, isDisabled = _param.isDisabled, isActive = _param.isActive, maxLength = _param.maxLength, rows = _param.rows, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, onChange = _param.onChange, onPaste = _param.onPaste, onFocus = _param.onFocus, onBlur = _param.onBlur, controlProps = _object_without_properties$3(_param, [
+    "value",
+    "label",
+    "placeholder",
+    "infoMessage",
+    "errorMessage",
+    "name",
+    "shouldFocusOnMount",
+    "hasCounter",
+    "shouldTrimAfterMaxLength",
+    "isAutoSized",
+    "shouldAlwaysShowPlaceholder",
+    "isDisabled",
+    "isActive",
+    "maxLength",
+    "rows",
+    "data",
+    "testId",
+    "tweakStyles",
+    "onChange",
+    "onPaste",
+    "onFocus",
+    "onBlur"
+  ]);
   var classes = useStyles$4({
     theme: tweakStyles
   });
+  var tweakControlGroupStyles = useTweakStyles({
+    tweakStyles,
+    className: "tweakControlGroup",
+    currentComponentName: "TextArea"
+  });
+  var tweakControlWrapperStyles = useTweakStyles({
+    innerStyles: controlWrapperStyles,
+    tweakStyles,
+    className: "tweakControlWrapper",
+    currentComponentName: "TextArea"
+  });
   var _useState = _sliced_to_array(useState(false), 2), isFocused = _useState[0], setFocused = _useState[1];
-  var handleOnChange = function(event) {
-    var rawValue = event.currentTarget.value;
-    var newValue = shouldTrimAfterMaxLength && maxLength !== void 0 ? trimStringToMaxLength(rawValue, maxLength) : rawValue;
-    onChange(newValue, event);
+  var hasFocus = isFocused || isActive;
+  var hasValue = value !== void 0 && value !== "";
+  var hasLabel = isReactNodeNotEmpty(label);
+  var hasPlaceholder = (!hasLabel || hasFocus || shouldAlwaysShowPlaceholder) && isStringNotEmpty(placeholder);
+  var handleChange = function(event) {
+    onChange(event.currentTarget.value, event);
   };
-  var handleOnFocus = function(event) {
+  var handleFocus = function(event) {
     setFocused(true);
-    if (onFocus !== void 0) {
-      onFocus(event);
-    }
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
   };
-  var handleOnBlur = function(event) {
+  var handleBlur = function(event) {
     setFocused(false);
-    if (onBlur !== void 0) {
-      onBlur(event);
-    }
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   };
-  var hasFocus = isFocused || isActive;
-  var hasValue = value !== void 0 && value !== "";
-  var hasLabel = isReactNodeNotEmpty(label);
-  var hasPlaceholder = (!hasLabel || hasFocus || shouldAlwaysShowPlaceholder) && isStringNotEmpty(placeholder);
-  var props = _object_spread$5({
-    className: classes.textarea,
-    onFocus: handleOnFocus,
-    onBlur: handleOnBlur,
-    onChange: handleOnChange,
-    value,
-    onPaste,
-    disabled: isDisabled,
-    placeholder: hasPlaceholder ? placeholder : void 0,
-    name,
-    autoFocus: shouldFocusOnMount,
-    rows
-  }, addDataTestId(testId));
-  var hasInfoMessage = isStringNotEmpty(infoMessage);
-  var hasErrorMessage = isStringNotEmpty(errorMessage);
-  var _obj2, _obj1;
-  return /* @__PURE__ */ jsxs("div", _object_spread_props$5(_object_spread$5({
-    className: classes.root
-  }, addDataAttributes(data)), {
+  return /* @__PURE__ */ jsxs(ControlGroup, {
+    errorMessage,
+    infoMessage,
+    tweakStyles: tweakControlGroupStyles,
     children: [
-      /* @__PURE__ */ jsxs("div", {
-        className: clsx(classes.wrapper, (_obj2 = {}, _define_property$5(_obj2, classes.required, isRequired && !hasRequiredLabel), _define_property$5(_obj2, classes.invalid, isInvalid), _define_property$5(_obj2, classes.focused, hasFocus), _define_property$5(_obj2, classes.disabled, isDisabled), _define_property$5(_obj2, classes.autosize, isAutoSizeable), _define_property$5(_obj2, classes.withFloatingLabel, hasFloatingLabel && hasLabel), _obj2)),
-        "data-value": isAutoSizeable ? value : void 0,
-        children: [
-          hasLabel && /* @__PURE__ */ jsx("span", {
-            className: clsx(classes.label, (_obj1 = {}, _define_property$5(_obj1, classes.invalidLabel, isInvalid), _define_property$5(_obj1, classes.requiredLabel, hasRequiredLabel && !isRequired), _define_property$5(_obj1, classes.activeLabel, hasFocus || hasValue), _define_property$5(_obj1, classes.floating, hasFloatingLabel), _obj1)),
-            children: label
-          }),
-          /* @__PURE__ */ jsx("textarea", _object_spread$5({
-            ref
-          }, props))
-        ]
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        className: classes.footer,
+      /* @__PURE__ */ jsx(ControlWrapper, _object_spread_props$5(_object_spread$5({
+        label,
+        tweakStyles: tweakControlWrapperStyles,
+        isFocused: hasFocus,
+        isDisabled,
+        hasValue,
+        isFullWidth: true,
+        testId
+      }, controlProps), {
+        children: /* @__PURE__ */ jsx("div", _object_spread_props$5(_object_spread$5({}, isAutoSized && {
+          className: classes.autoSized,
+          "data-value": value
+        }), {
+          children: /* @__PURE__ */ jsx("textarea", _object_spread$5({
+            ref,
+            className: classes.textarea,
+            value,
+            disabled: isDisabled,
+            placeholder: hasPlaceholder ? placeholder : void 0,
+            maxLength: shouldTrimAfterMaxLength ? maxLength : void 0,
+            name,
+            rows,
+            onPaste,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onChange: handleChange
+          }, addDataAttributes$1(data, testId, "control")))
+        }))
+      })),
+      hasCounter && isNotEmpty(maxLength) && /* @__PURE__ */ jsxs("span", {
+        className: clsx(classes.symbolsCount, _define_property$5({}, classes.symbolsCountError, value.length > maxLength)),
         children: [
-          hasInfoMessage && /* @__PURE__ */ jsx("div", {
-            className: classes.info,
-            children: infoMessage
-          }),
-          !hasInfoMessage && hasErrorMessage && /* @__PURE__ */ jsx("div", {
-            className: classes.error,
-            children: errorMessage
-          }),
-          hasCounter && isNotEmpty(maxLength) && /* @__PURE__ */ jsxs("span", {
-            className: clsx(classes.symbolsCount, _define_property$5({}, classes.symbolsCountError, value.length > maxLength)),
-            children: [
-              value.length,
-              " / ",
-              maxLength
-            ]
-          })
+          value.length,
+          " / ",
+          maxLength
         ]
-      }),
-      hasInfoMessage && hasErrorMessage && /* @__PURE__ */ jsx("div", {
-        className: classes.error,
-        children: errorMessage
       })
     ]
-  }));
+  });
 });
 var useStyles$3 = createThemedStyles("TextButton", {
   root: {
@@ -30689,7 +30853,7 @@ function _object_without_properties_loose$2(source, excluded) {
   return target;
 }
 var TextButton = /* @__PURE__ */ forwardRef(function(_param, ref) {
-  var children = _param.children, icon = _param.icon, _param_view = _param.view, view = _param_view === void 0 ? "primary" : _param_view, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isBold = _param.isBold, isBold = _param_isBold === void 0 ? false : _param_isBold, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_hasCircleUnderIcon = _param.hasCircleUnderIcon, hasCircleUnderIcon = _param_hasCircleUnderIcon === void 0 ? false : _param_hasCircleUnderIcon, _param_size = _param.size, size2 = _param_size === void 0 ? "l" : _param_size, _param_iconPosition = _param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_preloaderType = _param.preloaderType, preloaderType = _param_preloaderType === void 0 ? "dots" : _param_preloaderType, _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, testId = _param.testId, tweakStyles = _param.tweakStyles, data = _param.data, onClick = _param.onClick, restProps = _object_without_properties$2(_param, [
+  var children = _param.children, icon = _param.icon, _param_view = _param.view, view = _param_view === void 0 ? "primary" : _param_view, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isBold = _param.isBold, isBold = _param_isBold === void 0 ? false : _param_isBold, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_hasCircleUnderIcon = _param.hasCircleUnderIcon, hasCircleUnderIcon = _param_hasCircleUnderIcon === void 0 ? false : _param_hasCircleUnderIcon, _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, _param_iconPosition = _param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_preloaderType = _param.preloaderType, preloaderType = _param_preloaderType === void 0 ? "dots" : _param_preloaderType, _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, testId = _param.testId, tweakStyles = _param.tweakStyles, data = _param.data, onClick = _param.onClick, restProps = _object_without_properties$2(_param, [
     "children",
     "icon",
     "view",
@@ -30721,7 +30885,7 @@ var TextButton = /* @__PURE__ */ forwardRef(function(_param, ref) {
   return /* @__PURE__ */ jsxs("button", _object_spread_props$4(_object_spread$4({
     ref,
     type,
-    className: clsx(classes.root, classes[size2], classes[view], (_obj2 = {}, _define_property$4(_obj2, classes.bold, isBold), _define_property$4(_obj2, classes.loading, isLoading), _define_property$4(_obj2, classes.active, isActive), _define_property$4(_obj2, classes.disabled, isDisabled), _obj2)),
+    className: clsx(classes.root, classes[size], classes[view], (_obj2 = {}, _define_property$4(_obj2, classes.bold, isBold), _define_property$4(_obj2, classes.loading, isLoading), _define_property$4(_obj2, classes.active, isActive), _define_property$4(_obj2, classes.disabled, isDisabled), _obj2)),
     disabled: hasNoAction,
     onClick: !hasNoAction ? onClick : void 0
   }, restProps, addDataTestId(testId), addDataAttributes(data)), {
@@ -31209,11 +31373,6 @@ var NewMoreMenu = function(_param) {
     }
   }));
 };
-var withPopupStyles = {
-  popup: {
-    zIndex: 9999
-  }
-};
 function _define_property(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -31299,7 +31458,7 @@ function _object_without_properties_loose(source, excluded) {
   return target;
 }
 var WithTooltip = function(_param) {
-  var children = _param.children, _param_eventType = _param.eventType, eventType = _param_eventType === void 0 ? "hover" : _param_eventType, _param_placement = _param.placement, placement = _param_placement === void 0 ? "top" : _param_placement, tooltipText = _param.tooltipText, _param_tooltipView = _param.tooltipView, tooltipView = _param_tooltipView === void 0 ? "tooltip" : _param_tooltipView, _param_tooltipType = _param.tooltipType, tooltipType = _param_tooltipType === void 0 ? "info" : _param_tooltipType, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, popupData = _param.popupData, tweakStyles = _param.tweakStyles, restProps = _object_without_properties(_param, [
+  var children = _param.children, _param_eventType = _param.eventType, eventType = _param_eventType === void 0 ? "hover" : _param_eventType, _param_placement = _param.placement, placement = _param_placement === void 0 ? "top" : _param_placement, tooltipText = _param.tooltipText, _param_tooltipView = _param.tooltipView, tooltipView = _param_tooltipView === void 0 ? "tooltip" : _param_tooltipView, _param_tooltipType = _param.tooltipType, tooltipType = _param_tooltipType === void 0 ? "info" : _param_tooltipType, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, tweakStyles = _param.tweakStyles, restProps = _object_without_properties(_param, [
     "children",
     "eventType",
     "placement",
@@ -31307,29 +31466,22 @@ var WithTooltip = function(_param) {
     "tooltipView",
     "tooltipType",
     "isDisabled",
-    "popupData",
     "tweakStyles"
   ]);
   var tweakWithPopupStyles = useTweakStyles({
-    innerStyles: withPopupStyles,
     tweakStyles,
-    className: "tweakWithPopup",
-    currentComponentName: "WithTooltip"
+    className: "tweakWithPopup"
   });
   var tweakTooltipStyles = useTweakStyles({
     tweakStyles,
-    className: "tweakTooltip",
-    currentComponentName: "WithTooltip"
+    className: "tweakTooltip"
   });
   return /* @__PURE__ */ jsx(WithPopup, _object_spread_props(_object_spread({
     trigger: children,
     placement,
     eventType,
-    popupData: _object_spread_props(_object_spread({}, popupData), {
-      tooltipView
-    }),
-    isDisabled: isDisabled || !isReactNodeNotEmpty(tooltipText),
     isTriggerWrapped: true,
+    isDisabled: isDisabled || !isReactNodeNotEmpty(tooltipText),
     tweakStyles: tweakWithPopupStyles
   }, restProps), {
     children: /* @__PURE__ */ jsx(Tooltip, {
@@ -31348,6 +31500,8 @@ export {
   Checkbox,
   CloseButton,
   Colors,
+  ControlGroup,
+  ControlWrapper,
   CssBaseline,
   DEFAULT_PHONE_MASK,
   DateInput,
@@ -31373,6 +31527,7 @@ export {
   IconButton,
   IncrementInput,
   Input,
+  InputBase,
   List,
   ListItem,
   Modal,