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

package/dist/true-react-common-ui-kit.umd.cjs

@@ -964,7 +964,17 @@
     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() {
@@ -1035,11 +1045,9 @@
       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,
@@ -1862,7 +1870,7 @@
     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,
@@ -1875,7 +1883,7 @@
     }
     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);
@@ -1885,12 +1893,12 @@
         }));
       }
       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);
@@ -1903,12 +1911,12 @@
     }
     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));
       });
     }
@@ -1963,7 +1971,7 @@
       return trueReactPlatformHelpers.mergeStyles(styles, trueReactPlatformHelpers.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(trueReactPlatformHelpers.isNotEmpty(data) ? _object_spread_props$U(_object_spread$13({}, data), {
+      return useStyles2(trueReactPlatformHelpers.isNotEmpty(data) ? _object_spread_props$X(_object_spread$16({}, data), {
         theme: cleanStyles(data.theme)
       }) : data);
     };
@@ -6497,7 +6505,7 @@
     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,
@@ -6517,7 +6525,7 @@
   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);
@@ -6527,7 +6535,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$14(target, key, source[key]);
+        _define_property$17(target, key, source[key]);
       });
     }
     return target;
@@ -6583,7 +6591,7 @@
           },
           {
             name: "flip",
-            options: _object_spread$12({
+            options: _object_spread$15({
               fallbackPlacements: canBeFlipped ? [
                 "bottom-start",
                 "top-start"
@@ -6732,7 +6740,7 @@
     "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,
@@ -6745,7 +6753,7 @@
     }
     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);
@@ -6755,7 +6763,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$13(target, key, source[key]);
+        _define_property$16(target, key, source[key]);
       });
     }
     return target;
@@ -6764,7 +6772,7 @@
     var type = param.type;
     var theme = React.useContext(ThemeContext).theme;
     var icons = React.useMemo(function() {
-      return _object_spread$11({}, complexIcons, theme.complexIcons);
+      return _object_spread$14({}, complexIcons, theme.complexIcons);
     }, []);
     var ComplexIcon = icons[type];
     return /* @__PURE__ */ jsx("div", {
@@ -7635,7 +7643,7 @@
       ]
     }
   });
-  function _define_property$12(obj, key, value) {
+  function _define_property$15(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -7648,7 +7656,7 @@
     }
     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);
@@ -7658,12 +7666,12 @@
         }));
       }
       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);
@@ -7676,12 +7684,12 @@
     }
     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));
       });
     }
@@ -7692,7 +7700,7 @@
     var _icon_paths, _icon_rects, _icon_circles;
     var theme = React.useContext(ThemeContext).theme;
     var icons = React.useMemo(function() {
-      return _object_spread$10({}, iconsList, theme.icons);
+      return _object_spread$13({}, iconsList, theme.icons);
     }, []);
     var icon = icons[type];
     var _icon_viewBox;
@@ -7705,7 +7713,7 @@
       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",
@@ -7713,25 +7721,25 @@
           }, path), index);
         }),
         (_icon_rects = icon.rects) === null || _icon_rects === void 0 ? void 0 : _icon_rects.map(function(rect, index) {
-          return /* @__PURE__ */ React.createElement("rect", _object_spread_props$T(_object_spread$10({}, rect), {
+          return /* @__PURE__ */ React.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__ */ React.createElement("circle", _object_spread_props$T(_object_spread$10({}, circle), {
+          return /* @__PURE__ */ React.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,
@@ -7744,7 +7752,7 @@
     }
     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);
@@ -7754,12 +7762,12 @@
         }));
       }
       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);
@@ -7772,12 +7780,12 @@
     }
     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));
       });
     }
@@ -7785,10 +7793,10 @@
   }
   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
     }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)), {
       children: isComplexIcon(type) ? /* @__PURE__ */ jsx(ComplexIconBoilerplate, {
@@ -7804,15 +7812,7 @@
     }) : icon;
   };
   var DEFAULT_OFFSET = 6;
-  var minWidthRelativeToTrigger = react.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"
     },
@@ -7827,7 +7827,6 @@
       zIndex: 5,
       outline: "none"
     },
-    arrow: {},
     animationEnd: {},
     animationStart: {},
     "dropdown-initial": {
@@ -7859,7 +7858,7 @@
     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,
@@ -7910,7 +7909,7 @@
   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);
@@ -7920,12 +7919,12 @@
         }));
       }
       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);
@@ -7938,12 +7937,12 @@
     }
     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));
       });
     }
@@ -7969,12 +7968,11 @@
       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(React.useState(false), 2), isOpen = _useState[0], setIsOpen = _useState[1];
-    var arrowRef = React.useRef(null);
     var handleToggle = function(isActive, event) {
       event === null || event === void 0 ? void 0 : event.stopPropagation();
       if (!isDisabled) {
@@ -7991,13 +7989,8 @@
         react.offset(popupOffset),
         canBeFlipped && react.flip({
           fallbackAxisSideDirection: "start"
-        }),
-        isMinWidthSameAsTrigger && minWidthRelativeToTrigger
-      ].concat(_to_consumable_array$7(middlewares), [
-        shouldShowArrow && react.arrow({
-          element: arrowRef
         })
-      ]),
+      ].concat(_to_consumable_array$7(middlewares)),
       whileElementsMounted: react.autoUpdate,
       placement,
       onOpenChange: handleToggle
@@ -8031,17 +8024,17 @@
         close: 500
       }
     }), isMounted = _useTransitionStatus.isMounted, status = _useTransitionStatus.status;
-    var referenceProps = getReferenceProps(_object_spread$_({
+    var referenceProps = getReferenceProps(_object_spread$11({
       ref: refs.setReference
     }, shouldStopPropagation && {
       onClick: trueReactPlatformHelpers.stopPropagation
     }));
     var triggerElement = trueReactPlatformHelpers.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))
@@ -8049,31 +8042,23 @@
     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, trueReactPlatformHelpers.addDataAttributes(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, trueReactPlatformHelpers.addDataTestId(testId), trueReactPlatformHelpers.addDataAttributes(data)), {
           children: triggerElement
         })) : triggerElement,
         isMounted && /* @__PURE__ */ jsx(react.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(), trueReactPlatformHelpers.addDataAttributes(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(react.FloatingArrow, _object_spread_props$R(_object_spread$_({}, arrowProps), {
-                  ref: arrowRef,
-                  context,
-                  className: classes.arrow
-                })),
-                trueReactPlatformHelpers.applyAction(children, {
-                  floatingContext: context,
-                  onClose: handleClose
-                })
-              ]
+              children: trueReactPlatformHelpers.applyAction(children, {
+                onClose: handleClose
+              })
             })
           }))
         })
@@ -8083,7 +8068,7 @@
   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",
@@ -8122,7 +8107,7 @@
       flexGrow: 1
     }
   });
-  function _define_property$$(obj, key, value) {
+  function _define_property$12(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -8135,7 +8120,7 @@
     }
     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);
@@ -8145,12 +8130,12 @@
         }));
       }
       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);
@@ -8163,12 +8148,12 @@
     }
     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));
       });
     }
@@ -8176,7 +8161,7 @@
   }
   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;
@@ -8185,9 +8170,9 @@
         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))
-        }, trueReactPlatformHelpers.addClickHandler(onClick, !isDisabled), trueReactPlatformHelpers.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))
+        }, trueReactPlatformHelpers.addClickHandler(onClick, !isDisabled), trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(_object_spread_props$T(_object_spread$10({}, data), {
           disabled: isDisabled ? true : void 0
         }))), {
           children: [
@@ -8213,7 +8198,7 @@
       ]
     });
   };
-  var useStyles$S = createThemedStyles("List", {
+  var useStyles$U = createThemedStyles("List", {
     root: {
       minWidth: 180,
       backgroundColor: colors.CLASSIC_WHITE,
@@ -8229,12 +8214,12 @@
       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,
@@ -8247,7 +8232,7 @@
     }
     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);
@@ -8257,12 +8242,12 @@
         }));
       }
       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);
@@ -8275,12 +8260,12 @@
     }
     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));
       });
     }
@@ -8288,7 +8273,7 @@
   }
   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) {
@@ -8298,11 +8283,11 @@
         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
     }, trueReactPlatformHelpers.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: trueReactPlatformHelpers.getTestId(testId, "item-".concat(i))
         }, item), {
           shouldDrawSpacerAbove: item.shouldDrawSpacerAbove && i !== 0,
@@ -8314,13 +8299,13 @@
         return /* @__PURE__ */ jsx(React.Fragment, {
           children: trueReactPlatformHelpers.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
               }));
             },
@@ -8331,13 +8316,13 @@
                 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,
@@ -8350,7 +8335,7 @@
     }
     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);
@@ -8360,12 +8345,12 @@
         }));
       }
       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"
     },
@@ -8419,7 +8404,7 @@
     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,
@@ -8463,7 +8448,7 @@
   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);
@@ -8473,12 +8458,12 @@
         }));
       }
       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);
@@ -8491,12 +8476,12 @@
     }
     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));
       });
     }
@@ -8520,7 +8505,7 @@
   }
   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({
@@ -8540,7 +8525,7 @@
     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
     }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)), {
       children: [
@@ -8590,7 +8575,7 @@
       ]
     }));
   };
-  var useStyles$Q = createThemedStyles("AddButton", {
+  var useStyles$S = createThemedStyles("AddButton", {
     root: {
       display: "flex",
       alignItems: "center",
@@ -8616,7 +8601,7 @@
       width: "100%"
     }
   });
-  function _define_property$X(obj, key, value) {
+  function _define_property$_(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -8629,7 +8614,7 @@
     }
     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);
@@ -8639,12 +8624,12 @@
         }));
       }
       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);
@@ -8657,12 +8642,12 @@
     }
     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));
       });
     }
@@ -8670,10 +8655,10 @@
   }
   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,
@@ -8692,7 +8677,7 @@
       ]
     }));
   };
-  var useStyles$P = createThemedStyles("DotsPreloader", {
+  var useStyles$R = createThemedStyles("DotsPreloader", {
     root: {
       display: "flex",
       gap: 4,
@@ -8738,7 +8723,7 @@
   });
   var DotsPreloader = function(param) {
     var tweakStyles = param.tweakStyles;
-    var classes = useStyles$P({
+    var classes = useStyles$R({
       theme: tweakStyles
     });
     return /* @__PURE__ */ jsx("div", {
@@ -8804,7 +8789,7 @@
       ]
     });
   };
-  var useStyles$O = createThemedStyles("SvgPreloader", {
+  var useStyles$Q = createThemedStyles("SvgPreloader", {
     root: {
       display: "flex",
       width: "100%",
@@ -8814,7 +8799,7 @@
   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 = React.useContext(ThemeContext).theme;
@@ -8828,7 +8813,7 @@
       }
     }) : /* @__PURE__ */ jsx(PreloaderIcon, {});
   };
-  var useStyles$N = createThemedStyles("ThemedPreloader", {
+  var useStyles$P = createThemedStyles("ThemedPreloader", {
     root: {
       display: "flex"
     },
@@ -8839,7 +8824,7 @@
       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,
@@ -8852,7 +8837,7 @@
     }
     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);
@@ -8862,12 +8847,12 @@
         }));
       }
       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);
@@ -8880,12 +8865,12 @@
     }
     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));
       });
     }
@@ -8893,7 +8878,7 @@
   }
   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({
@@ -8906,8 +8891,8 @@
       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))
     }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)), {
       children: type === "dots" ? /* @__PURE__ */ jsx(DotsPreloader, {
         tweakStyles: tweakDotsPreloaderStyles
@@ -8917,7 +8902,7 @@
       })
     }));
   };
-  var useStyles$M = createThemedStyles("Button", {
+  var useStyles$O = createThemedStyles("Button", {
     root: {
       display: "flex",
       justifyContent: "center",
@@ -9088,7 +9073,7 @@
   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,
@@ -9101,7 +9086,7 @@
     }
     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);
@@ -9111,12 +9096,12 @@
         }));
       }
       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);
@@ -9129,21 +9114,21 @@
     }
     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);
@@ -9158,7 +9143,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$h(source, excluded) {
+  function _object_without_properties_loose$j(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -9173,7 +9158,7 @@
     return target;
   }
   var Button = /* @__PURE__ */ React.forwardRef(function(_param, ref) {
-    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$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",
@@ -9191,7 +9176,7 @@
       "iconPosition",
       "preloaderType"
     ]);
-    var classes = useStyles$M({
+    var classes = useStyles$O({
       theme: tweakStyles
     });
     var tweakPreloaderStyles = useTweakStyles({
@@ -9204,16 +9189,16 @@
     var hasChildren = trueReactPlatformHelpers.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[size], 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, trueReactPlatformHelpers.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,
@@ -9236,7 +9221,7 @@
       ]
     }));
   });
-  var useStyles$L = createThemedStyles("Checkbox", {
+  var useStyles$N = createThemedStyles("Checkbox", {
     root: {
       cursor: "pointer",
       display: "flex",
@@ -9274,7 +9259,7 @@
       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,
@@ -9287,7 +9272,7 @@
     }
     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);
@@ -9297,12 +9282,12 @@
         }));
       }
       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);
@@ -9315,12 +9300,12 @@
     }
     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));
       });
     }
@@ -9328,7 +9313,7 @@
   }
   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;
@@ -9340,11 +9325,11 @@
       }, 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))
     }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)), {
       children: [
-        /* @__PURE__ */ jsx("input", _object_spread$S({
+        /* @__PURE__ */ jsx("input", _object_spread$V({
           className: classes.input,
           type: "checkbox",
           checked: isSelected,
@@ -9367,7 +9352,7 @@
       ]
     }));
   }
-  var useStyles$K = createThemedStyles("CloseButton", {
+  var useStyles$M = createThemedStyles("CloseButton", {
     root: {
       width: 40,
       height: 40,
@@ -9393,7 +9378,7 @@
       }
     }
   });
-  function _define_property$T(obj, key, value) {
+  function _define_property$W(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -9406,7 +9391,7 @@
     }
     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);
@@ -9416,12 +9401,12 @@
         }));
       }
       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);
@@ -9434,33 +9419,33 @@
     }
     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
     }, trueReactPlatformHelpers.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"
@@ -9553,7 +9538,7 @@
       return _array_like_to_array$k(o, minLen);
   }
   var Colors = function() {
-    var classes = useStyles$J();
+    var classes = useStyles$L();
     var theme = React.useContext(ThemeContext).theme;
     var _theme_colors = theme.colors, colors2 = _theme_colors === void 0 ? {} : _theme_colors;
     return /* @__PURE__ */ jsx("div", {
@@ -9583,7 +9568,7 @@
       })
     });
   };
-  var useStyles$I = createThemedStyles("CssBaseline", {
+  var useStyles$K = createThemedStyles("CssBaseline", {
     "@global html, body": {
       fontFamily: "Arial, sans-serif",
       color: colors.FONT_MAIN,
@@ -9592,7 +9577,7 @@
     },
     root: {}
   });
-  function _define_property$S(obj, key, value) {
+  function _define_property$V(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -9605,7 +9590,7 @@
     }
     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);
@@ -9615,296 +9600,482 @@
         }));
       }
       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
     }, trueReactPlatformHelpers.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__ */ React.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 = trueReactPlatformHelpers.isReactNodeNotEmpty(errorMessage);
+    var shouldShowInfo = trueReactPlatformHelpers.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
+    }, trueReactPlatformHelpers.addDataAttributes(data, testId)), {
+      children: [
+        trueReactPlatformHelpers.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
+            }, trueReactPlatformHelpers.addDataTestId(testId, "error")), {
+              children: errorMessage
+            })),
+            shouldShowInfo && /* @__PURE__ */ jsx("div", _object_spread_props$L(_object_spread$S({
+              className: classes.info
+            }, trueReactPlatformHelpers.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 && trueReactPlatformHelpers.isReactNodeNotEmpty(icon);
+    var hasClearButton = !isDisabled && !isLoading && hasValue && trueReactPlatformHelpers.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, trueReactPlatformHelpers.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))
+    }, trueReactPlatformHelpers.addDataAttributes(data, testId)), {
+      children: [
+        trueReactPlatformHelpers.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)
+                }, trueReactPlatformHelpers.addClickHandler(onClear), trueReactPlatformHelpers.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 && trueReactPlatformHelpers.isNotEmpty(onIconClick)), _define_property$T(_obj22, classes.customIcon, !trueReactPlatformHelpers.isString(icon)), _obj22))
+                }, trueReactPlatformHelpers.addClickHandler(onIconClick, !isDisabled), trueReactPlatformHelpers.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)
+                }, trueReactPlatformHelpers.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)
@@ -9946,7 +10117,7 @@
       });
     };
   }
-  function _define_property$R(obj, key, value) {
+  function _define_property$S(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -9990,7 +10161,7 @@
   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);
@@ -10000,12 +10171,12 @@
         }));
       }
       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);
@@ -10018,21 +10189,21 @@
     }
     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);
@@ -10047,7 +10218,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$g(source, excluded) {
+  function _object_without_properties_loose$i(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -10179,38 +10350,32 @@
       };
     }
   }
-  var Input = /* @__PURE__ */ React.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__ */ React.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",
@@ -10220,13 +10385,27 @@
     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(React.useState(false), 2), isFocused = _useState[0], setFocused = _useState[1];
+    var _useState1 = _sliced_to_array$j(React.useState(), 2), unitsWidth = _useState1[0], setUnitsWidth = _useState1[1];
     var inputRef = React.useRef(null);
+    var mergedRef = trueReactPlatformHelpers.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 = trueReactPlatformHelpers.isNotEmpty(value) && value !== "";
+    var hasUnits = trueReactPlatformHelpers.isReactNodeNotEmpty(units);
+    var hasPlaceholder = (!trueReactPlatformHelpers.isReactNodeNotEmpty(label) || hasFocus || shouldAlwaysShowPlaceholder) && trueReactPlatformHelpers.isStringNotEmpty(placeholder);
     var handleChange = function(event) {
       onChange(event.currentTarget.value, event);
     };
@@ -10238,9 +10417,9 @@
       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:
@@ -10250,114 +10429,195 @@
               ];
             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 = trueReactPlatformHelpers.isReactNodeNotEmpty(label);
-    var isLabelActive = hasFocus && !isReadonly || hasValue || shouldAlwaysShowPlaceholder;
-    var hasPlaceholder = (!hasLabel || isLabelActive) && trueReactPlatformHelpers.isStringNotEmpty(placeholder);
-    var shouldShowUnits = (hasValue || isFocused && !hasPlaceholder) && hasUnits;
+    var unitsRef = React.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, trueReactPlatformHelpers.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, trueReactPlatformHelpers.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
+    }, trueReactPlatformHelpers.addDataTestId(testId, "input"));
+    React.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: [
+        trueReactPlatformHelpers.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__ */ React.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"
-                  })
-                }),
-                trueReactPlatformHelpers.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)
-                })
-              ]
-            })
-          ]
-        })),
-        trueReactPlatformHelpers.isStringNotEmpty(infoMessage) && /* @__PURE__ */ jsx("div", {
-          className: classes.info,
-          children: infoMessage
-        }),
-        trueReactPlatformHelpers.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 = "__.__.____";
@@ -10422,10 +10682,10 @@
     }
     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);
@@ -10440,7 +10700,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$f(source, excluded) {
+  function _object_without_properties_loose$g(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -10455,7 +10715,7 @@
     return target;
   }
   var DateInput = /* @__PURE__ */ React.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",
@@ -10511,7 +10771,7 @@
     }));
   });
   const reactDatepicker = "";
-  var LEFT_PADDING = 44;
+  var Z_INDEX$1 = dimensions.Z_INDEX;
   var useStyles$F = createThemedStyles("SearchInput", {
     root: {
       position: "relative"
@@ -10523,33 +10783,26 @@
       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) {
@@ -10604,10 +10857,10 @@
     }
     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);
@@ -10622,7 +10875,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$e(source, excluded) {
+  function _object_without_properties_loose$f(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -10637,12 +10890,13 @@
     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
@@ -10655,23 +10909,20 @@
     });
     return /* @__PURE__ */ jsxs("div", _object_spread_props$G(_object_spread$N({
       className: classes.root
-    }, trueReactPlatformHelpers.addDataAttributes(data, testId)), {
+    }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)), {
       children: [
-        /* @__PURE__ */ jsx("div", _object_spread_props$G(_object_spread$N({
-          className: clsx(classes.icon, _define_property$P({}, classes.iconClickable, trueReactPlatformHelpers.isNotEmpty(onSearchIconClick)))
-        }, trueReactPlatformHelpers.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: trueReactPlatformHelpers.getTestId(testId, "input"),
-          tweakStyles: tweakInputStyles,
-          hasFloatingLabel: false,
-          label: props.placeholder
+          tweakStyles: tweakInputStyles
         }, props))
       ]
     }));
@@ -10761,10 +11012,10 @@
     }
     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);
@@ -10779,7 +11030,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$d(source, excluded) {
+  function _object_without_properties_loose$e(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -10882,7 +11133,7 @@
           _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",
@@ -11244,6 +11495,7 @@
       return trueReactPlatformHelpers.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%",
@@ -11263,7 +11515,8 @@
     },
     withoutPopper: {
       position: "absolute",
-      top: "calc(var(--dropdown-offset, 100%) + 6px)"
+      top: "100%",
+      paddingTop: 4
     },
     listWrapperInBody: {
       minWidth: "auto",
@@ -11273,16 +11526,17 @@
     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": {
@@ -11295,21 +11549,27 @@
       }
     },
     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 = {
@@ -11317,16 +11577,8 @@
       cursor: "pointer"
     }
   };
-  var multiSelectInputBaseStyles = {
-    inputIcon: {
-      "&:not($loading)": {
-        width: "auto"
-      }
-    }
-  };
   var readonlyInputStyles = trueReactPlatformHelpers.mergeStyles(baseInputStyles, readonlyInputBaseStyles);
-  var multiSelectInputStyles = trueReactPlatformHelpers.mergeStyles(baseInputStyles, multiSelectInputBaseStyles);
-  var readonlyMultiSelectStyles = trueReactPlatformHelpers.mergeStyles(baseInputStyles, readonlyInputBaseStyles, multiSelectInputBaseStyles);
+  var readonlyMultiSelectStyles = trueReactPlatformHelpers.mergeStyles(baseInputStyles, readonlyInputBaseStyles);
   var getInputStyles = function(param) {
     var hasReadonlyInput = param.hasReadonlyInput, isMultiSelect = param.isMultiSelect;
     if (hasReadonlyInput && isMultiSelect) {
@@ -11335,21 +11587,8 @@
     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;
@@ -11484,10 +11723,10 @@
     }
     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);
@@ -11502,7 +11741,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$c(source, excluded) {
+  function _object_without_properties_loose$d(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -11639,7 +11878,7 @@
   }
   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",
@@ -11661,7 +11900,7 @@
       "dropdownIcon",
       "shouldScrollToList",
       "searchInput",
-      "iconType",
+      "icon",
       "onChange",
       "onFocus",
       "onBlur",
@@ -11672,16 +11911,23 @@
       "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,
@@ -11692,7 +11938,6 @@
       currentComponentName: "Select"
     });
     var tweakSearchInputStyles = useTweakStyles({
-      innerStyles: searchInputStyles$3,
       tweakStyles,
       className: "tweakSearchInput",
       currentComponentName: "Select"
@@ -11774,7 +12019,7 @@
     ]);
     var getDropdownOffset = function() {
       var _input_current_parentElement2;
-      if (trueReactPlatformHelpers.isEmpty(input.current) || inputProps.errorPosition === "top") {
+      if (trueReactPlatformHelpers.isEmpty(input.current)) {
         return 0;
       }
       var _input_current_parentElement_offsetHeight;
@@ -12086,7 +12331,8 @@
         onToggleCheckbox: handleToggleOptionCheckbox
       })
     }));
-    var multiSelectCounterWithIcon = shouldShowMultiSelectCounter || trueReactPlatformHelpers.isNotEmpty(iconType) ? /* @__PURE__ */ jsxs(Fragment, {
+    var multiSelectCounterWithIcon = shouldShowMultiSelectCounter || trueReactPlatformHelpers.isNotEmpty(icon) ? /* @__PURE__ */ jsxs("div", {
+      className: classes.iconWrapper,
       children: [
         shouldShowMultiSelectCounter && /* @__PURE__ */ jsxs("div", {
           className: classes.counter,
@@ -12096,59 +12342,62 @@
             ")"
           ]
         }),
-        trueReactPlatformHelpers.isNotEmpty(iconType) && /* @__PURE__ */ jsx("div", {
+        trueReactPlatformHelpers.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(reactOverlays.Portal, {
+            container: shouldRenderInBody ? document.body : inputWrapper.current,
+            children: /* @__PURE__ */ jsx(Fragment, {
+              children: listEl
             })
-          ]
-        }),
-        shouldUsePopper ? /* @__PURE__ */ jsx(reactOverlays.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,
@@ -12160,26 +12409,6 @@
       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",
@@ -12197,22 +12426,16 @@
         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"
       }
     }
   };
@@ -12235,47 +12458,25 @@
     return /* @__PURE__ */ jsxs("div", {
       className: classes.header,
       children: [
-        /* @__PURE__ */ jsxs("div", {
-          className: classes.select,
-          children: [
-            /* @__PURE__ */ jsx("div", {
-              className: classes.selectValue,
-              children: months[dateFns.getMonth(date)]
-            }),
-            /* @__PURE__ */ jsx("div", {
-              className: classes.selectControl,
-              children: /* @__PURE__ */ jsx(Select, {
-                value: months[dateFns.getMonth(date)],
-                options: months,
-                dropdownIcon: "chevron-down-small",
-                tweakStyles: tweakSelectStyles,
-                onChange: function(value) {
-                  return changeMonth(months.indexOf(value));
-                }
-              })
-            })
-          ]
+        /* @__PURE__ */ jsx(Select, {
+          value: months[dateFns.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: dateFns.getYear(date)
-            }),
-            /* @__PURE__ */ jsx("div", {
-              className: classes.selectControl,
-              children: /* @__PURE__ */ jsx(Select, {
-                value: dateFns.getYear(date),
-                options: years,
-                dropdownIcon: "chevron-down-small",
-                tweakStyles: tweakSelectStyles,
-                onChange: function(value) {
-                  return changeYear(value);
-                }
-              })
-            })
-          ]
+        /* @__PURE__ */ jsx(Select, {
+          value: dateFns.getYear(date),
+          options: years,
+          dropdownIcon: "chevron-down-small",
+          isAutoSized: true,
+          tweakStyles: tweakSelectStyles,
+          onChange: function(value) {
+            return changeYear(value);
+          }
         }),
         /* @__PURE__ */ jsxs("div", {
           className: classes.buttons,
@@ -12444,10 +12645,10 @@
     }
     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);
@@ -12462,7 +12663,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$b(source, excluded) {
+  function _object_without_properties_loose$c(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -12493,7 +12694,7 @@
       return _array_like_to_array$h(o, minLen);
   }
   var DatePicker = /* @__PURE__ */ React.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",
@@ -12569,7 +12770,7 @@
       isDisabled,
       isClearable,
       isActive: isOpen,
-      iconType: isClearable && hasDateInputValue ? void 0 : "calendar",
+      icon: isClearable && hasDateInputValue ? void 0 : "calendar",
       tweakStyles: tweakDateInputStyles
     }), isRange ? {
       startDate: startDateValue,
@@ -13311,10 +13512,10 @@
     }
     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);
@@ -13329,7 +13530,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$a(source, excluded) {
+  function _object_without_properties_loose$b(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -13344,7 +13545,7 @@
     return target;
   }
   var IconButton = /* @__PURE__ */ React.forwardRef(function(_param, ref) {
-    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$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",
@@ -14268,10 +14469,10 @@
     }
     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);
@@ -14286,7 +14487,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$9(source, excluded) {
+  function _object_without_properties_loose$a(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -14419,7 +14620,7 @@
     }
   }
   var NumberInput = /* @__PURE__ */ React.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",
@@ -14900,11 +15101,13 @@
     input: {
       minWidth: 120
     },
-    icon: {
-      padding: 0,
-      width: 24,
-      "&:last-child": {
-        paddingRight: 0
+    tweakControlWrapper: {
+      icon: {
+        padding: 0,
+        width: 24,
+        "&:last-child": {
+          paddingRight: 0
+        }
       }
     }
   };
@@ -15020,7 +15223,6 @@
                   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,
@@ -15045,7 +15247,6 @@
                   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,
@@ -15220,10 +15421,12 @@
   });
   var searchInputStyles$2 = {
     tweakInput: {
-      inputWrapper: {
-        backgroundColor: "transparent",
-        border: "none",
-        height: 40
+      tweakControlWrapper: {
+        root: {
+          "--control-height": "40px",
+          backgroundColor: "transparent",
+          border: "none"
+        }
       }
     }
   };
@@ -16178,10 +16381,12 @@
   });
   var searchInputStyles$1 = {
     tweakInput: {
-      inputWrapper: {
-        backgroundColor: "transparent",
-        border: "none",
-        height: 40
+      tweakControlWrapper: {
+        root: {
+          "--control-height": "40px",
+          backgroundColor: "transparent",
+          border: "none"
+        }
       }
     }
   };
@@ -18203,7 +18408,6 @@
                 locale: dateLocale,
                 onChangeDate: handleChangeFrom,
                 tweakStyles: tweakStartDatePickerStyles,
-                border: "bottom",
                 testId: trueReactPlatformHelpers.getTestId(testId, "from"),
                 isClearable
               }, startPickerProps))
@@ -18218,7 +18422,6 @@
                 locale: dateLocale,
                 onChangeDate: handleChangeTo,
                 tweakStyles: tweakEndDatePickerStyles,
-                border: "bottom",
                 testId: trueReactPlatformHelpers.getTestId(testId, "to"),
                 isClearable
               }, endPickerProps))
@@ -18765,16 +18968,17 @@
   });
   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"
+        }
       }
     }
   };
@@ -18898,7 +19102,7 @@
       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
     });
@@ -18964,7 +19168,6 @@
           },
           testId: testId !== void 0 ? "".concat(testId, "-input") : void 0,
           maxLength,
-          isAutoSizeable,
           isDisabled
         }),
         /* @__PURE__ */ jsxs("div", {
@@ -26048,10 +26251,10 @@
     }
     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);
@@ -26066,7 +26269,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$8(source, excluded) {
+  function _object_without_properties_loose$9(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -26081,7 +26284,7 @@
     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",
@@ -26424,10 +26627,10 @@
     }
     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);
@@ -26442,7 +26645,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$7(source, excluded) {
+  function _object_without_properties_loose$8(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -26457,7 +26660,7 @@
     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",
@@ -26690,11 +26893,11 @@
       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,
@@ -26731,12 +26934,12 @@
   });
   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) {
@@ -26791,10 +26994,10 @@
     }
     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);
@@ -26809,7 +27012,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$6(source, excluded) {
+  function _object_without_properties_loose$7(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -26824,7 +27027,7 @@
     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",
@@ -27272,10 +27475,10 @@
     }
     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);
@@ -27290,7 +27493,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$5(source, excluded) {
+  function _object_without_properties_loose$6(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -27321,7 +27524,7 @@
       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, 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$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",
@@ -28166,7 +28369,7 @@
     },
     searchContainer: {
       width: "100%",
-      height: dimensions.CONTROL_HEIGHT,
+      height: dimensions.CONTROL.HEIGHT,
       display: "flex",
       alignItems: "center",
       boxSizing: "border-box",
@@ -28247,9 +28450,11 @@
     }
   });
   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,
@@ -28463,14 +28668,15 @@
     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",
@@ -28481,7 +28687,7 @@
       ],
       transition: "border-color 0.2s ease-in",
       cursor: "pointer",
-      zIndex: 2
+      zIndex: dimensions.Z_INDEX.CONTROL_FOCUS + 1
     },
     disabledCountrySelect: {
       cursor: "default"
@@ -28513,17 +28719,19 @@
     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) {
@@ -28620,10 +28828,10 @@
     }
     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);
@@ -28638,7 +28846,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$4(source, excluded) {
+  function _object_without_properties_loose$5(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -28669,7 +28877,7 @@
       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",
@@ -29498,10 +29706,10 @@
     }
     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);
@@ -29516,7 +29724,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$3(source, excluded) {
+  function _object_without_properties_loose$4(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -29633,7 +29841,7 @@
     }
   }
   var SmartInput = /* @__PURE__ */ React.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",
@@ -30138,49 +30346,28 @@
     }
     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
       },
@@ -30190,107 +30377,38 @@
         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;
@@ -30385,6 +30503,38 @@
     }
     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();
   }
@@ -30402,93 +30552,107 @@
       return _array_like_to_array(o, minLen);
   }
   var DEFAULT_VALUE = "";
-  var TextArea = /* @__PURE__ */ React.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__ */ React.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(React.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 = trueReactPlatformHelpers.isReactNodeNotEmpty(label);
+    var hasPlaceholder = (!hasLabel || hasFocus || shouldAlwaysShowPlaceholder) && trueReactPlatformHelpers.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 = trueReactPlatformHelpers.isReactNodeNotEmpty(label);
-    var hasPlaceholder = (!hasLabel || hasFocus || shouldAlwaysShowPlaceholder) && trueReactPlatformHelpers.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
-    }, trueReactPlatformHelpers.addDataTestId(testId));
-    var hasInfoMessage = trueReactPlatformHelpers.isStringNotEmpty(infoMessage);
-    var hasErrorMessage = trueReactPlatformHelpers.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
+            }, trueReactPlatformHelpers.addDataAttributes(data, testId, "control")))
+          }))
+        })),
+        hasCounter && trueReactPlatformHelpers.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 && trueReactPlatformHelpers.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: {
@@ -31197,11 +31361,6 @@
       }
     }));
   };
-  var withPopupStyles = {
-    popup: {
-      zIndex: 9999
-    }
-  };
   function _define_property(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
@@ -31287,7 +31446,7 @@
     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",
@@ -31295,29 +31454,22 @@
       "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 || !trueReactPlatformHelpers.isReactNodeNotEmpty(tooltipText),
       isTriggerWrapped: true,
+      isDisabled: isDisabled || !trueReactPlatformHelpers.isReactNodeNotEmpty(tooltipText),
       tweakStyles: tweakWithPopupStyles
     }, restProps), {
       children: /* @__PURE__ */ jsx(Tooltip, {
@@ -31335,6 +31487,8 @@
   exports2.Checkbox = Checkbox;
   exports2.CloseButton = CloseButton;
   exports2.Colors = Colors;
+  exports2.ControlGroup = ControlGroup;
+  exports2.ControlWrapper = ControlWrapper;
   exports2.CssBaseline = CssBaseline;
   exports2.DEFAULT_PHONE_MASK = DEFAULT_PHONE_MASK;
   exports2.DateInput = DateInput;
@@ -31360,6 +31514,7 @@
   exports2.IconButton = IconButton;
   exports2.IncrementInput = IncrementInput;
   exports2.Input = Input;
+  exports2.InputBase = InputBase;
   exports2.List = List;
   exports2.ListItem = ListItem;
   exports2.Modal = Modal;