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

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

@@ -1898,7 +1898,7 @@
     }
     return target;
   }
-  function ownKeys$X(object, enumerableOnly) {
+  function ownKeys$W(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -1911,12 +1911,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$X(target, source) {
+  function _object_spread_props$W(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$X(Object(source)).forEach(function(key) {
+      ownKeys$W(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -1971,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$X(_object_spread$16({}, data), {
+      return useStyles2(trueReactPlatformHelpers.isNotEmpty(data) ? _object_spread_props$W(_object_spread$16({}, data), {
         theme: cleanStyles(data.theme)
       }) : data);
     };
@@ -7671,7 +7671,7 @@
     }
     return target;
   }
-  function ownKeys$W(object, enumerableOnly) {
+  function ownKeys$V(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -7684,12 +7684,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$W(target, source) {
+  function _object_spread_props$V(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$W(Object(source)).forEach(function(key) {
+      ownKeys$V(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -7721,19 +7721,19 @@
           }, 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$W(_object_spread$13({}, rect), {
+          return /* @__PURE__ */ React.createElement("rect", _object_spread_props$V(_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$W(_object_spread$13({}, circle), {
+          return /* @__PURE__ */ React.createElement("circle", _object_spread_props$V(_object_spread$13({}, circle), {
             key: index
           }));
         })
       ]
     });
   };
-  var useStyles$X = createThemedStyles("Icon", {
+  var useStyles$W = createThemedStyles("Icon", {
     root: {
       display: "flex",
       alignItems: "center"
@@ -7767,7 +7767,7 @@
     }
     return target;
   }
-  function ownKeys$V(object, enumerableOnly) {
+  function ownKeys$U(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -7780,12 +7780,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$V(target, source) {
+  function _object_spread_props$U(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$V(Object(source)).forEach(function(key) {
+      ownKeys$U(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -7793,10 +7793,10 @@
   }
   var Icon = function(param) {
     var type = param.type, data = param.data, testId = param.testId, tweakStyles = param.tweakStyles;
-    var classes = useStyles$X({
+    var classes = useStyles$W({
       theme: tweakStyles
     });
-    return /* @__PURE__ */ jsx("div", _object_spread_props$V(_object_spread$12({
+    return /* @__PURE__ */ jsx("div", _object_spread_props$U(_object_spread$12({
       className: classes.root
     }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)), {
       children: isComplexIcon(type) ? /* @__PURE__ */ jsx(ComplexIconBoilerplate, {
@@ -7812,7 +7812,7 @@
     }) : icon;
   };
   var DEFAULT_OFFSET = 6;
-  var useStyles$W = createThemedStyles("WithPopup", {
+  var useStyles$V = createThemedStyles("WithPopup", {
     trigger: {
       width: "fit-content"
     },
@@ -7924,7 +7924,7 @@
     }
     return target;
   }
-  function ownKeys$U(object, enumerableOnly) {
+  function ownKeys$T(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -7937,12 +7937,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$U(target, source) {
+  function _object_spread_props$T(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$U(Object(source)).forEach(function(key) {
+      ownKeys$T(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -7969,7 +7969,7 @@
   }
   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, _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({
+    var classes = useStyles$V({
       theme: tweakStyles
     });
     var _useState = _sliced_to_array$m(React.useState(false), 2), isOpen = _useState[0], setIsOpen = _useState[1];
@@ -8042,14 +8042,14 @@
     var _obj2;
     return /* @__PURE__ */ jsxs(Fragment, {
       children: [
-        isTriggerWrapped ? /* @__PURE__ */ jsx("div", _object_spread_props$U(_object_spread$11({
+        isTriggerWrapped ? /* @__PURE__ */ jsx("div", _object_spread_props$T(_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 ? refs.reference.current : void 0,
-          children: /* @__PURE__ */ jsx("div", _object_spread_props$U(_object_spread$11({
+          children: /* @__PURE__ */ jsx("div", _object_spread_props$T(_object_spread$11({
             style: floatingStyles,
             className: classes.popup,
             ref: refs.setFloating
@@ -8068,7 +8068,7 @@
   var ITEM_HORIZONTAL_PADDING = 16;
   var ICON_SIZE$1 = 20;
   var ICON_GAP = 12;
-  var useStyles$V = createThemedStyles("ListItem", {
+  var useStyles$U = createThemedStyles("ListItem", {
     root: {
       display: "flex",
       alignItems: "center",
@@ -8135,7 +8135,7 @@
     }
     return target;
   }
-  function ownKeys$T(object, enumerableOnly) {
+  function ownKeys$S(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -8148,12 +8148,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$T(target, source) {
+  function _object_spread_props$S(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$T(Object(source)).forEach(function(key) {
+      ownKeys$S(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -8161,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$V({
+    var classes = useStyles$U({
       theme: tweakStyles
     });
     var _obj2;
@@ -8170,9 +8170,9 @@
         shouldDrawSpacerAbove && /* @__PURE__ */ jsx("div", {
           className: classes.spacer
         }),
-        /* @__PURE__ */ jsxs("div", _object_spread_props$T(_object_spread$10({
+        /* @__PURE__ */ jsxs("div", _object_spread_props$S(_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), {
+        }, trueReactPlatformHelpers.addClickHandler(onClick, !isDisabled), trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(_object_spread_props$S(_object_spread$10({}, data), {
           disabled: isDisabled ? true : void 0
         }))), {
           children: [
@@ -8198,7 +8198,7 @@
       ]
     });
   };
-  var useStyles$U = createThemedStyles("List", {
+  var useStyles$T = createThemedStyles("List", {
     root: {
       minWidth: 180,
       backgroundColor: colors.CLASSIC_WHITE,
@@ -8247,7 +8247,7 @@
     }
     return target;
   }
-  function ownKeys$S(object, enumerableOnly) {
+  function ownKeys$R(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -8260,12 +8260,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$S(target, source) {
+  function _object_spread_props$R(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$S(Object(source)).forEach(function(key) {
+      ownKeys$R(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -8273,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$U({
+    var classes = useStyles$T({
       theme: tweakStyles
     });
     var handleItemClick = function(event, param2) {
@@ -8283,11 +8283,11 @@
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
       }
     };
-    return /* @__PURE__ */ jsx("div", _object_spread_props$S(_object_spread$$({
+    return /* @__PURE__ */ jsx("div", _object_spread_props$R(_object_spread$$({
       className: classes.root
     }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)), {
       children: items.map(function(item, i) {
-        var itemProps = _object_spread_props$S(_object_spread$$({
+        var itemProps = _object_spread_props$R(_object_spread$$({
           testId: trueReactPlatformHelpers.getTestId(testId, "item-".concat(i))
         }, item), {
           shouldDrawSpacerAbove: item.shouldDrawSpacerAbove && i !== 0,
@@ -8305,7 +8305,7 @@
             shouldRenderInBody: false,
             trigger: function(param2) {
               var triggerProps = param2.triggerProps;
-              return /* @__PURE__ */ jsx(ListItem, _object_spread_props$S(_object_spread$$({}, itemProps), {
+              return /* @__PURE__ */ jsx(ListItem, _object_spread_props$R(_object_spread$$({}, itemProps), {
                 isFocused: triggerProps.isActive
               }));
             },
@@ -8350,7 +8350,7 @@
     }
     return target;
   }
-  var useStyles$T = createThemedStyles("AccountInfo", _object_spread$_({
+  var useStyles$S = createThemedStyles("AccountInfo", _object_spread$_({
     root: {
       display: "flex"
     },
@@ -8463,7 +8463,7 @@
     }
     return target;
   }
-  function ownKeys$R(object, enumerableOnly) {
+  function ownKeys$Q(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -8476,12 +8476,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$R(target, source) {
+  function _object_spread_props$Q(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$R(Object(source)).forEach(function(key) {
+      ownKeys$Q(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -8505,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$T({
+    var classes = useStyles$S({
       theme: tweakStyles
     });
     var tweakListStyles = useTweakStyles({
@@ -8525,7 +8525,7 @@
     useOnClickOutsideWithRef(dropdownRef, function() {
       return setIsMenuOpen(false);
     }, nameRef);
-    return /* @__PURE__ */ jsxs("div", _object_spread_props$R(_object_spread$Z({
+    return /* @__PURE__ */ jsxs("div", _object_spread_props$Q(_object_spread$Z({
       className: classes.root
     }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)), {
       children: [
@@ -8575,7 +8575,7 @@
       ]
     }));
   };
-  var useStyles$S = createThemedStyles("AddButton", {
+  var useStyles$R = createThemedStyles("AddButton", {
     root: {
       display: "flex",
       alignItems: "center",
@@ -8629,7 +8629,7 @@
     }
     return target;
   }
-  function ownKeys$Q(object, enumerableOnly) {
+  function ownKeys$P(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -8642,12 +8642,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$Q(target, source) {
+  function _object_spread_props$P(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$Q(Object(source)).forEach(function(key) {
+      ownKeys$P(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -8655,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$S({
+    var classes = useStyles$R({
       theme: tweakStyles
     });
-    return /* @__PURE__ */ jsxs("button", _object_spread_props$Q(_object_spread$Y({
+    return /* @__PURE__ */ jsxs("button", _object_spread_props$P(_object_spread$Y({
       type,
       className: clsx(classes.root, isDisabled && classes.disabled, isFullWidth && classes.fullWidth),
       onClick: !isDisabled ? onClick : void 0,
@@ -8677,7 +8677,7 @@
       ]
     }));
   };
-  var useStyles$R = createThemedStyles("DotsPreloader", {
+  var useStyles$Q = createThemedStyles("DotsPreloader", {
     root: {
       display: "flex",
       gap: 4,
@@ -8723,7 +8723,7 @@
   });
   var DotsPreloader = function(param) {
     var tweakStyles = param.tweakStyles;
-    var classes = useStyles$R({
+    var classes = useStyles$Q({
       theme: tweakStyles
     });
     return /* @__PURE__ */ jsx("div", {
@@ -8789,7 +8789,7 @@
       ]
     });
   };
-  var useStyles$Q = createThemedStyles("SvgPreloader", {
+  var useStyles$P = createThemedStyles("SvgPreloader", {
     root: {
       display: "flex",
       width: "100%",
@@ -8799,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$Q({
+    var classes = useStyles$P({
       theme: tweakStyles
     });
     var theme = React.useContext(ThemeContext).theme;
@@ -8813,7 +8813,7 @@
       }
     }) : /* @__PURE__ */ jsx(PreloaderIcon, {});
   };
-  var useStyles$P = createThemedStyles("ThemedPreloader", {
+  var useStyles$O = createThemedStyles("ThemedPreloader", {
     root: {
       display: "flex"
     },
@@ -8852,7 +8852,7 @@
     }
     return target;
   }
-  function ownKeys$P(object, enumerableOnly) {
+  function ownKeys$O(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -8865,12 +8865,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$P(target, source) {
+  function _object_spread_props$O(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$P(Object(source)).forEach(function(key) {
+      ownKeys$O(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -8878,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$P({
+    var classes = useStyles$O({
       theme: tweakStyles
     });
     var tweakDotsPreloaderStyles = useTweakStyles({
@@ -8891,7 +8891,7 @@
       className: "tweakSvgPreloader",
       currentComponentName: "ThemedPreloader"
     });
-    return /* @__PURE__ */ jsx("div", _object_spread_props$P(_object_spread$X({
+    return /* @__PURE__ */ jsx("div", _object_spread_props$O(_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, {
@@ -8902,7 +8902,7 @@
       })
     }));
   };
-  var useStyles$O = createThemedStyles("Button", {
+  var useStyles$N = createThemedStyles("Button", {
     root: {
       display: "flex",
       justifyContent: "center",
@@ -9101,7 +9101,7 @@
     }
     return target;
   }
-  function ownKeys$O(object, enumerableOnly) {
+  function ownKeys$N(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -9114,12 +9114,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$O(target, source) {
+  function _object_spread_props$N(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$O(Object(source)).forEach(function(key) {
+      ownKeys$N(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -9176,7 +9176,7 @@
       "iconPosition",
       "preloaderType"
     ]);
-    var classes = useStyles$O({
+    var classes = useStyles$N({
       theme: tweakStyles
     });
     var tweakPreloaderStyles = useTweakStyles({
@@ -9189,7 +9189,7 @@
     var hasChildren = trueReactPlatformHelpers.isReactNodeNotEmpty(children);
     var hasNoAction = isDisabled || isLoading;
     var _obj2, _obj1;
-    return /* @__PURE__ */ jsxs("button", _object_spread_props$O(_object_spread$W({
+    return /* @__PURE__ */ jsxs("button", _object_spread_props$N(_object_spread$W({
       ref,
       type,
       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)),
@@ -9221,7 +9221,7 @@
       ]
     }));
   });
-  var useStyles$N = createThemedStyles("Checkbox", {
+  var useStyles$M = createThemedStyles("Checkbox", {
     root: {
       cursor: "pointer",
       display: "flex",
@@ -9287,7 +9287,7 @@
     }
     return target;
   }
-  function ownKeys$N(object, enumerableOnly) {
+  function ownKeys$M(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -9300,12 +9300,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$N(target, source) {
+  function _object_spread_props$M(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$N(Object(source)).forEach(function(key) {
+      ownKeys$M(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -9313,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$N({
+    var classes = useStyles$M({
       theme: tweakStyles
     });
     var hasAction = !isDisabled && !isReadonly;
@@ -9325,7 +9325,7 @@
       }, event);
     };
     var _obj2;
-    return /* @__PURE__ */ jsxs("label", _object_spread_props$N(_object_spread$V({
+    return /* @__PURE__ */ jsxs("label", _object_spread_props$M(_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: [
@@ -9352,7 +9352,7 @@
       ]
     }));
   }
-  var useStyles$M = createThemedStyles("CloseButton", {
+  var useStyles$L = createThemedStyles("CloseButton", {
     root: {
       width: 40,
       height: 40,
@@ -9406,7 +9406,7 @@
     }
     return target;
   }
-  function ownKeys$M(object, enumerableOnly) {
+  function ownKeys$L(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -9419,12 +9419,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$M(target, source) {
+  function _object_spread_props$L(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$M(Object(source)).forEach(function(key) {
+      ownKeys$L(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -9432,10 +9432,10 @@
   }
   var CloseButton = function(param) {
     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({
+    var classes = useStyles$L({
       theme: tweakStyles
     });
-    return /* @__PURE__ */ jsx("button", _object_spread_props$M(_object_spread$U({
+    return /* @__PURE__ */ jsx("button", _object_spread_props$L(_object_spread$U({
       type: "button",
       className: classes.root,
       onClick: onClose
@@ -9445,7 +9445,7 @@
       })
     }));
   };
-  var useStyles$L = createThemedStyles({
+  var useStyles$K = createThemedStyles({
     root: {
       display: "flex",
       flexWrap: "wrap"
@@ -9538,7 +9538,7 @@
       return _array_like_to_array$k(o, minLen);
   }
   var Colors = function() {
-    var classes = useStyles$L();
+    var classes = useStyles$K();
     var theme = React.useContext(ThemeContext).theme;
     var _theme_colors = theme.colors, colors2 = _theme_colors === void 0 ? {} : _theme_colors;
     return /* @__PURE__ */ jsx("div", {
@@ -9568,7 +9568,7 @@
       })
     });
   };
-  var useStyles$K = createThemedStyles("CssBaseline", {
+  var useStyles$J = createThemedStyles("CssBaseline", {
     "@global html, body": {
       fontFamily: "Arial, sans-serif",
       color: colors.FONT_MAIN,
@@ -9607,18 +9607,19 @@
   }
   var CssBaseline = function(param) {
     var data = param.data, testId = param.testId, tweakStyles = param.tweakStyles;
-    var classes = useStyles$K({
+    var classes = useStyles$J({
       theme: tweakStyles
     });
     return /* @__PURE__ */ jsx("div", _object_spread$T({
       className: classes.root
     }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)));
   };
-  var useStyles$J = createThemedStyles("ControlGroup", {
-    root: {
+  var useStyles$I = createThemedStyles("WithMessages", {
+    withMessages: {
       display: "flex",
       flexDirection: "column",
-      width: "100%"
+      width: "100%",
+      position: "relative"
     },
     error: {
       color: "red"
@@ -9675,7 +9676,7 @@
     }
     return target;
   }
-  function ownKeys$L(object, enumerableOnly) {
+  function ownKeys$K(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -9688,44 +9689,44 @@
     }
     return keys2;
   }
-  function _object_spread_props$L(target, source) {
+  function _object_spread_props$K(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$L(Object(source)).forEach(function(key) {
+      ownKeys$K(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({
+  var WithMessages = /* @__PURE__ */ React.forwardRef(function(param, ref) {
+    var children = param.children, infoMessage = param.infoMessage, errorMessage = param.errorMessage, controlsDirection = param.controlsDirection, tweakStyles = param.tweakStyles, testId = param.testId, data = param.data;
+    var classes = useStyles$I({
       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({
+    return /* @__PURE__ */ jsxs("div", _object_spread_props$K(_object_spread$S({
       ref,
-      className: classes.root,
+      className: classes.withMessages,
       "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)),
+          className: clsx(classes.children, (_obj2 = {}, _define_property$U(_obj2, classes.horizontal, controlsDirection === "horizontal"), _define_property$U(_obj2, classes.vertical, controlsDirection === "vertical"), _obj2)),
           children
         }),
         (shouldShowError || shouldShowInfo) && /* @__PURE__ */ jsxs("div", {
           className: classes.message,
           children: [
-            shouldShowError && /* @__PURE__ */ jsx("div", _object_spread_props$L(_object_spread$S({
+            shouldShowError && /* @__PURE__ */ jsx("div", _object_spread_props$K(_object_spread$S({
               className: classes.error
             }, trueReactPlatformHelpers.addDataTestId(testId, "error")), {
               children: errorMessage
             })),
-            shouldShowInfo && /* @__PURE__ */ jsx("div", _object_spread_props$L(_object_spread$S({
+            shouldShowInfo && /* @__PURE__ */ jsx("div", _object_spread_props$K(_object_spread$S({
               className: classes.info
             }, trueReactPlatformHelpers.addDataTestId(testId, "info")), {
               children: infoMessage
@@ -9735,9 +9736,9 @@
       ]
     }));
   });
-  var CONTROL$1 = dimensions.CONTROL, Z_INDEX$2 = dimensions.Z_INDEX;
-  var useStyles$I = createThemedStyles("ControlWrapper", {
-    root: {
+  var CONTROL$1 = dimensions.CONTROL, Z_INDEX$1 = dimensions.Z_INDEX;
+  var useStyles$H = createThemedStyles("ControlWrapper", {
+    controlWrapper: {
       "--control-height": "".concat(CONTROL$1.HEIGHT - 2, "px"),
       // borders
       "--control-padding": "".concat(CONTROL$1.PADDING, "px"),
@@ -9758,12 +9759,12 @@
       zIndex: 0
     },
     invalid: {
-      zIndex: Z_INDEX$2.CONTROL_INVALID
+      zIndex: Z_INDEX$1.CONTROL_INVALID
     },
     disabled: {},
     focused: {
       position: "relative",
-      zIndex: Z_INDEX$2.CONTROL_FOCUS
+      zIndex: Z_INDEX$1.CONTROL_FOCUS
     },
     withValue: {},
     loading: {},
@@ -9915,7 +9916,7 @@
     }
     return target;
   }
-  function ownKeys$K(object, enumerableOnly) {
+  function ownKeys$J(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -9928,12 +9929,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$K(target, source) {
+  function _object_spread_props$J(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$K(Object(source)).forEach(function(key) {
+      ownKeys$J(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -9941,7 +9942,7 @@
   }
   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({
+    var classes = useStyles$H({
       theme: tweakStyles
     });
     var hasEndIcon = !isLoading && trueReactPlatformHelpers.isReactNodeNotEmpty(icon);
@@ -9953,8 +9954,8 @@
       currentComponentName: "ControlWrapper"
     });
     var _obj2, _obj1, _obj22;
-    return /* @__PURE__ */ jsxs("div", _object_spread_props$K(_object_spread$R({
-      className: clsx(classes.root, trueReactPlatformHelpers.isNotEmpty(groupPlacement) && [
+    return /* @__PURE__ */ jsxs("div", _object_spread_props$J(_object_spread$R({
+      className: clsx(classes.controlWrapper, 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)), {
@@ -9970,7 +9971,7 @@
             hasControls && /* @__PURE__ */ jsxs("div", {
               className: classes.controls,
               children: [
-                hasClearButton && /* @__PURE__ */ jsx("div", _object_spread_props$K(_object_spread$R({
+                hasClearButton && /* @__PURE__ */ jsx("div", _object_spread_props$J(_object_spread$R({
                   className: clsx(classes.icon, classes.clearIcon, classes.activeIcon)
                 }, trueReactPlatformHelpers.addClickHandler(onClear), trueReactPlatformHelpers.addDataTestId(testId, "clear")), {
                   children: /* @__PURE__ */ jsx("div", {
@@ -9980,7 +9981,7 @@
                     })
                   })
                 })),
-                hasEndIcon && /* @__PURE__ */ jsx("div", _object_spread_props$K(_object_spread$R({
+                hasEndIcon && /* @__PURE__ */ jsx("div", _object_spread_props$J(_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", {
@@ -9988,7 +9989,7 @@
                     children: renderIcon(icon)
                   })
                 })),
-                isLoading && /* @__PURE__ */ jsx("div", _object_spread_props$K(_object_spread$R({
+                isLoading && /* @__PURE__ */ jsx("div", _object_spread_props$J(_object_spread$R({
                   className: clsx(classes.icon, classes.loader)
                 }, trueReactPlatformHelpers.addDataTestId(testId, "loading")), {
                   children: /* @__PURE__ */ jsx("div", {
@@ -10006,7 +10007,7 @@
     }));
   };
   var PADDING_WITH_UNITS = 8;
-  var useStyles$H = createThemedStyles("Input", {
+  var useStyles$G = createThemedStyles("Input", {
     inputContent: {
       height: "var(--control-height)",
       padding: [
@@ -10062,12 +10063,14 @@
       }
     },
     withLabel: {},
+    withValue: {},
     fakeValue: {
       extend: "inputContent",
       visibility: "hidden",
       maxWidth: "100%",
       overflow: "hidden",
-      minWidth: 8
+      minWidth: 8,
+      whiteSpace: "nowrap"
     },
     units: {
       alignSelf: "center",
@@ -10176,7 +10179,7 @@
     }
     return target;
   }
-  function ownKeys$J(object, enumerableOnly) {
+  function ownKeys$I(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -10189,12 +10192,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$J(target, source) {
+  function _object_spread_props$I(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$J(Object(source)).forEach(function(key) {
+      ownKeys$I(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -10382,7 +10385,7 @@
       "shouldAlwaysShowPlaceholder",
       "beforeMaskedStateChange"
     ]);
-    var classes = useStyles$H({
+    var classes = useStyles$G({
       theme: tweakStyles
     });
     var tweakControlWrapperStyles = useTweakStyles({
@@ -10447,7 +10450,7 @@
     ]);
     var _obj2;
     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)),
+      className: clsx(classes.input, (_obj2 = {}, _define_property$S(_obj2, classes.withUnits, hasUnits), _define_property$S(_obj2, classes.withValue, hasValue), _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,
@@ -10495,7 +10498,7 @@
         })
       ]
     });
-    return /* @__PURE__ */ jsx(ControlWrapper, _object_spread_props$J(_object_spread$Q({
+    return /* @__PURE__ */ jsx(ControlWrapper, _object_spread_props$I(_object_spread$Q({
       label,
       isDisabled,
       isFocused: hasFocus,
@@ -10539,7 +10542,7 @@
     }
     return target;
   }
-  function ownKeys$I(object, enumerableOnly) {
+  function ownKeys$H(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -10552,12 +10555,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$I(target, source) {
+  function _object_spread_props$H(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$I(Object(source)).forEach(function(key) {
+      ownKeys$H(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -10603,16 +10606,16 @@
       "testId",
       "tweakStyles"
     ]);
-    var tweakControlGroupStyles = useTweakStyles({
+    var tweakWithMessagesStyles = useTweakStyles({
       tweakStyles,
-      className: "tweakControlGroup"
+      className: "tweakWithMessages"
     });
-    return /* @__PURE__ */ jsx(ControlGroup, {
+    return /* @__PURE__ */ jsx(WithMessages, {
       errorMessage,
       infoMessage,
       testId,
-      tweakStyles: tweakControlGroupStyles,
-      children: /* @__PURE__ */ jsx(InputBase, _object_spread_props$I(_object_spread$P({}, inputProps), {
+      tweakStyles: tweakWithMessagesStyles,
+      children: /* @__PURE__ */ jsx(InputBase, _object_spread_props$H(_object_spread$P({}, inputProps), {
         ref,
         testId,
         tweakStyles,
@@ -10622,7 +10625,7 @@
   });
   var EMPTY_DATE_INPUT_VALUE = "__.__.____";
   var EMPTY_DATE_RANGE_INPUT_VALUE = "".concat(EMPTY_DATE_INPUT_VALUE, " - ").concat(EMPTY_DATE_INPUT_VALUE);
-  var useStyles$G = createThemedStyles("DateInput", {
+  var useStyles$F = createThemedStyles("DateInput", {
     root: {
       width: "100%",
       height: "100%",
@@ -10658,7 +10661,7 @@
     }
     return target;
   }
-  function ownKeys$H(object, enumerableOnly) {
+  function ownKeys$G(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -10671,12 +10674,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$H(target, source) {
+  function _object_spread_props$G(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$H(Object(source)).forEach(function(key) {
+      ownKeys$G(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -10728,7 +10731,7 @@
       "onClick",
       "onChange"
     ]);
-    var classes = useStyles$G({
+    var classes = useStyles$F({
       theme: tweakStyles
     });
     var tweakInputStyles = useTweakStyles({
@@ -10755,11 +10758,11 @@
       }
       onChange === null || onChange === void 0 ? void 0 : onChange(event, value);
     };
-    return /* @__PURE__ */ jsx("div", _object_spread_props$H(_object_spread$O({
+    return /* @__PURE__ */ jsx("div", _object_spread_props$G(_object_spread$O({
       className: clsx(classes.root, className),
       onClick
     }, addDataAttributes(data)), {
-      children: /* @__PURE__ */ jsx(Input, _object_spread_props$H(_object_spread$O({}, inputProps), {
+      children: /* @__PURE__ */ jsx(Input, _object_spread_props$G(_object_spread$O({}, inputProps), {
         ref,
         value: isRange ? "".concat(startDate).concat(endDate) : date,
         mask: mask !== null && mask !== void 0 ? mask : isRange ? "99.99.9999 - 99.99.9999" : "99.99.9999",
@@ -10771,33 +10774,21 @@
     }));
   });
   const reactDatepicker = "";
-  var Z_INDEX$1 = dimensions.Z_INDEX;
-  var useStyles$F = createThemedStyles("SearchInput", {
-    root: {
-      position: "relative"
-    },
-    icon: {
-      display: "flex",
-      alignItems: "center",
-      position: "absolute",
-      left: 12,
-      height: "100%",
-      width: 20,
-      color: colors.GREY_ACTIVE,
-      zIndex: Z_INDEX$1.CONTROL_FOCUS + 1
-    }
-  });
   var inputStyles$4 = {
     tweakControlWrapper: {
-      root: {
-        borderColor: "transparent",
-        borderRadius: 18,
-        paddingLeft: 0,
-        transitionProperty: "background-color, border-color"
+      endIcon: {
+        position: "absolute",
+        width: 40,
+        left: 0,
+        "&:last-child": {
+          paddingRight: 0
+        },
+        "&:not($activeIcon)": {
+          pointerEvents: "none"
+        }
       },
-      focused: {
-        backgroundColor: colors.CLASSIC_WHITE,
-        borderColor: colors.BORDER_MAIN
+      controlWrapper: {
+        borderColor: "transparent"
       }
     },
     inputContent: {
@@ -10833,30 +10824,6 @@
     }
     return target;
   }
-  function ownKeys$G(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$G(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys$G(Object(source)).forEach(function(key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-    return target;
-  }
   function _object_without_properties$f(source, excluded) {
     if (source == null)
       return {};
@@ -10890,42 +10857,30 @@
     return target;
   }
   var SearchInput = function(_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, [
+    var _param_isClearable = _param.isClearable, isClearable = _param_isClearable === void 0 ? true : _param_isClearable, placeholder = _param.placeholder, value = _param.value, testId = _param.testId, tweakStyles = _param.tweakStyles;
+    _param.data;
+    var props = _object_without_properties$f(_param, [
       "isClearable",
-      "tweakStyles",
       "placeholder",
       "value",
       "testId",
+      "tweakStyles",
       "data"
     ]);
-    var classes = useStyles$F({
-      theme: tweakStyles
-    });
     var tweakInputStyles = useTweakStyles({
       innerStyles: inputStyles$4,
       tweakStyles,
       className: "tweakInput",
       currentComponentName: "SearchInput"
     });
-    return /* @__PURE__ */ jsxs("div", _object_spread_props$G(_object_spread$N({
-      className: classes.root
-    }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)), {
-      children: [
-        /* @__PURE__ */ jsx("div", {
-          className: classes.icon,
-          children: /* @__PURE__ */ jsx(Icon, {
-            type: "search"
-          })
-        }),
-        /* @__PURE__ */ jsx(Input, _object_spread$N({
-          value,
-          placeholder,
-          isClearable,
-          testId: trueReactPlatformHelpers.getTestId(testId, "input"),
-          tweakStyles: tweakInputStyles
-        }, props))
-      ]
-    }));
+    return /* @__PURE__ */ jsx(Input, _object_spread$N({
+      value,
+      placeholder,
+      icon: "search",
+      isClearable,
+      testId: trueReactPlatformHelpers.getTestId(testId, "input"),
+      tweakStyles: tweakInputStyles
+    }, props));
   };
   var ScrollIntoViewIfNeededDefaultElementType = "div";
   var ScrollIntoViewIfNeededDefaultProps = {
@@ -11561,6 +11516,11 @@
     inputContent: {
       paddingRight: 32
     },
+    input: {
+      "&[readonly]": {
+        cursor: "pointer"
+      }
+    },
     tweakControlWrapper: {
       controls: {
         paddingRight: 40
@@ -11923,9 +11883,9 @@
     ]);
     var hasSearchInputInList = optionsMode !== "normal" && shouldRenderSearchInputInList;
     var hasReadonlyInput = isReadonly || optionsMode === "normal" || shouldRenderSearchInputInList;
-    var tweakControlGroupStyles = useTweakStyles({
+    var tweakWithMessagesStyles = useTweakStyles({
       tweakStyles,
-      className: "tweakControlGroup",
+      className: "tweakWithMessages",
       currentComponentName: "Select"
     });
     var tweakInputStyles = useTweakStyles({
@@ -12017,22 +11977,10 @@
       convertValueToId,
       convertValueToString
     ]);
-    var getDropdownOffset = function() {
-      var _input_current_parentElement2;
-      if (trueReactPlatformHelpers.isEmpty(input.current)) {
-        return 0;
-      }
-      var _input_current_parentElement_offsetHeight;
-      return (_input_current_parentElement_offsetHeight = (_input_current_parentElement2 = input.current.parentElement) === null || _input_current_parentElement2 === void 0 ? void 0 : _input_current_parentElement2.offsetHeight) !== null && _input_current_parentElement_offsetHeight !== void 0 ? _input_current_parentElement_offsetHeight : 0;
-    };
     var closeList = React.useCallback(function() {
       setIsListOpen(false);
       setSearchValue("");
       setShouldShowDefaultOption(true);
-      if (!(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.shouldUsePopper)) {
-        var _root_current;
-        (_root_current = root2.current) === null || _root_current === void 0 ? void 0 : _root_current.style.removeProperty("--dropdown-offset");
-      }
     }, [
       dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.shouldUsePopper
     ]);
@@ -12044,15 +11992,8 @@
       onBlur
     ]);
     var handleListOpen = function() {
-      if (isReadonly) {
-        return;
-      }
-      if (!isListOpen) {
+      if (!isReadonly && !isListOpen) {
         setIsListOpen(true);
-        if (!(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.shouldUsePopper)) {
-          var _root_current;
-          (_root_current = root2.current) === null || _root_current === void 0 ? void 0 : _root_current.style.setProperty("--dropdown-offset", "".concat(getDropdownOffset(), "px"));
-        }
       }
     };
     var handleFocus = function(event) {
@@ -12348,10 +12289,10 @@
         })
       ]
     }) : void 0;
-    return /* @__PURE__ */ jsx(ControlGroup, {
+    return /* @__PURE__ */ jsx(WithMessages, {
       errorMessage,
       infoMessage,
-      tweakStyles: tweakControlGroupStyles,
+      tweakStyles: tweakWithMessagesStyles,
       children: /* @__PURE__ */ jsxs("div", {
         className: classes.root,
         onKeyDown: handleKeyDown,
@@ -12428,7 +12369,7 @@
     },
     tweakInput: {
       tweakControlWrapper: {
-        root: {
+        controlWrapper: {
           "--control-height": "35px",
           border: "none"
         }
@@ -15422,7 +15363,7 @@
   var searchInputStyles$2 = {
     tweakInput: {
       tweakControlWrapper: {
-        root: {
+        controlWrapper: {
           "--control-height": "40px",
           backgroundColor: "transparent",
           border: "none"
@@ -16382,7 +16323,7 @@
   var searchInputStyles$1 = {
     tweakInput: {
       tweakControlWrapper: {
-        root: {
+        controlWrapper: {
           "--control-height": "40px",
           backgroundColor: "transparent",
           border: "none"
@@ -18969,7 +18910,7 @@
   var searchInputStyles = {
     tweakInput: {
       tweakControlWrapper: {
-        root: {
+        controlWrapper: {
           "--control-height": "".concat(FILTER_HEIGHT - 2, "px"),
           backgroundColor: "transparent",
           border: "none",
@@ -28451,7 +28392,7 @@
   });
   var inputStyles$1 = {
     tweakControlWrapper: {
-      root: {
+      controlWrapper: {
         border: "none",
         height: "calc(var(--control-height) - 2px)"
       }
@@ -28726,7 +28667,7 @@
   });
   var inputStyles = {
     tweakControlWrapper: {
-      root: {
+      controlWrapper: {
         paddingLeft: COUNTRY_SELECT_WIDTH
       },
       label: {
@@ -30377,11 +30318,14 @@
         margin: 0
       }
     }),
+    wrapper: {
+      width: "100%"
+    },
     autoSized: {
       display: "grid",
       gridTemplateRows: "minmax(0, 100%)",
       "& > $textarea, &::after": {
-        gridArea: "1 / 2"
+        gridArea: "1 / 1"
       },
       "&::after": {
         extend: "textarea",
@@ -30582,9 +30526,9 @@
     var classes = useStyles$4({
       theme: tweakStyles
     });
-    var tweakControlGroupStyles = useTweakStyles({
+    var tweakWithMessagesStyles = useTweakStyles({
       tweakStyles,
-      className: "tweakControlGroup",
+      className: "tweakWithMessages",
       currentComponentName: "TextArea"
     });
     var tweakControlWrapperStyles = useTweakStyles({
@@ -30609,10 +30553,10 @@
       setFocused(false);
       onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     };
-    return /* @__PURE__ */ jsxs(ControlGroup, {
+    return /* @__PURE__ */ jsxs(WithMessages, {
       errorMessage,
       infoMessage,
-      tweakStyles: tweakControlGroupStyles,
+      tweakStyles: tweakWithMessagesStyles,
       children: [
         /* @__PURE__ */ jsx(ControlWrapper, _object_spread_props$5(_object_spread$5({
           label,
@@ -30623,8 +30567,9 @@
           isFullWidth: true,
           testId
         }, controlProps), {
-          children: /* @__PURE__ */ jsx("div", _object_spread_props$5(_object_spread$5({}, isAutoSized && {
-            className: classes.autoSized,
+          children: /* @__PURE__ */ jsx("div", _object_spread_props$5(_object_spread$5({
+            className: clsx(classes.wrapper, _define_property$5({}, classes.autoSized, isAutoSized))
+          }, isAutoSized && {
             "data-value": value
           }), {
             children: /* @__PURE__ */ jsx("textarea", _object_spread$5({
@@ -31487,7 +31432,6 @@
   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;
@@ -31544,6 +31488,7 @@
   exports2.ThemedPreloader = ThemedPreloader;
   exports2.Toaster = Toaster;
   exports2.Tooltip = Tooltip;
+  exports2.WithMessages = WithMessages;
   exports2.WithPopup = WithPopup;
   exports2.WithTooltip = WithTooltip;
   exports2.addDataAttributes = addDataAttributes;