@true-engineering/true-react-common-ui-kit 4.0.0-alpha1 → 4.0.0-alpha3

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

@@ -4,7 +4,7 @@ import { mergeStyles, isNotEmpty, isArrayNotEmpty, isEmpty, isString, isStringNo
 import { CSSTransition } from "react-transition-group";
 import clsx from "clsx";
 import hexToRgba from "hex-to-rgba";
-import { useFloating, offset as offset$2, flip as flip$2, autoUpdate, useHover, safePolygon, useFocus, useClick, useDismiss, useInteractions, useTransitionStatus, FloatingPortal } from "@floating-ui/react";
+import { size, useFloating, offset as offset$2, flip as flip$2, arrow as arrow$2, autoUpdate, useHover, safePolygon, useFocus, useClick, useDismiss, useInteractions, useTransitionStatus, FloatingPortal, FloatingArrow } from "@floating-ui/react";
 import InputMask from "react-input-mask";
 import { getYear, getMonth, format, parse, isSameDay, isValid, isAfter, isBefore, startOfMonth, endOfMonth, sub, startOfYear, endOfYear } from "date-fns";
 import { Portal } from "react-overlays";
@@ -1057,9 +1057,11 @@ var helpers = {
     overflow: "auto",
     // Chromium
     "@supports selector(::-webkit-scrollbar)": {
+      "--webkit-scrollbar-width": "10px",
+      "--webkit-scrollbar-height": "10px",
       "&::-webkit-scrollbar": {
-        height: 10,
-        width: 10,
+        width: "var(--webkit-scrollbar-width)",
+        height: "var(--webkit-scrollbar-height)",
         "&-thumb": {
           width: 6,
           minHeight: 30,
@@ -1396,9 +1398,9 @@ function mapCacheHas(key) {
   return getMapData(this, key).has(key);
 }
 function mapCacheSet(key, value) {
-  var data = getMapData(this, key), size = data.size;
+  var data = getMapData(this, key), size2 = data.size;
   data.set(key, value);
-  this.size += data.size == size ? 0 : 1;
+  this.size += data.size == size2 ? 0 : 1;
   return this;
 }
 function MapCache(entries) {
@@ -1910,7 +1912,7 @@ function _object_spread$16(target) {
   }
   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);
@@ -1923,12 +1925,12 @@ function ownKeys$X(object, enumerableOnly) {
   }
   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));
     });
   }
@@ -1983,7 +1985,7 @@ function createThemedStyles() {
     return mergeStyles(styles, isNotEmpty(componentName) ? theme === null || theme === void 0 ? void 0 : (_theme_components = theme.components) === null || _theme_components === void 0 ? void 0 : _theme_components[componentName] : void 0, tweakStyles);
   });
   return function(data) {
-    return useStyles2(isNotEmpty(data) ? _object_spread_props$X(_object_spread$16({}, data), {
+    return useStyles2(isNotEmpty(data) ? _object_spread_props$W(_object_spread$16({}, data), {
       theme: cleanStyles(data.theme)
     }) : data);
   };
@@ -7683,7 +7685,7 @@ function _object_spread$13(target) {
   }
   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);
@@ -7696,12 +7698,12 @@ function ownKeys$W(object, enumerableOnly) {
   }
   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));
     });
   }
@@ -7733,19 +7735,19 @@ var IconBoilerplate = function(param) {
         }, path), index);
       }),
       (_icon_rects = icon.rects) === null || _icon_rects === void 0 ? void 0 : _icon_rects.map(function(rect, index) {
-        return /* @__PURE__ */ createElement("rect", _object_spread_props$W(_object_spread$13({}, rect), {
+        return /* @__PURE__ */ 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__ */ createElement("circle", _object_spread_props$W(_object_spread$13({}, circle), {
+        return /* @__PURE__ */ 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"
@@ -7779,7 +7781,7 @@ function _object_spread$12(target) {
   }
   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);
@@ -7792,12 +7794,12 @@ function ownKeys$V(object, enumerableOnly) {
   }
   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));
     });
   }
@@ -7805,10 +7807,10 @@ function _object_spread_props$V(target, source) {
 }
 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
   }, addDataTestId(testId), addDataAttributes(data)), {
     children: isComplexIcon(type) ? /* @__PURE__ */ jsx(ComplexIconBoilerplate, {
@@ -7824,7 +7826,15 @@ var renderIcon = function(icon) {
   }) : icon;
 };
 var DEFAULT_OFFSET = 6;
-var useStyles$W = createThemedStyles("WithPopup", {
+var minWidthRelativeToTrigger = size({
+  apply: function apply2(param) {
+    var rects = param.rects, elements = param.elements;
+    Object.assign(elements.floating.style, {
+      minWidth: "".concat(rects.reference.width, "px")
+    });
+  }
+});
+var useStyles$V = createThemedStyles("WithPopup", {
   trigger: {
     width: "fit-content"
   },
@@ -7839,6 +7849,7 @@ var useStyles$W = createThemedStyles("WithPopup", {
     zIndex: 5,
     outline: "none"
   },
+  arrow: {},
   animationEnd: {},
   animationStart: {},
   "dropdown-initial": {
@@ -7936,7 +7947,7 @@ function _object_spread$11(target) {
   }
   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);
@@ -7949,12 +7960,12 @@ function ownKeys$U(object, enumerableOnly) {
   }
   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));
     });
   }
@@ -7980,11 +7991,12 @@ function _unsupported_iterable_to_array$m(o, minLen) {
     return _array_like_to_array$m(o, minLen);
 }
 var WithPopup = function(param) {
-  var trigger = param.trigger, children = param.children, _param_middlewares = param.middlewares, middlewares = _param_middlewares === void 0 ? [] : _param_middlewares, _param_eventType = param.eventType, eventType = _param_eventType === void 0 ? "click" : _param_eventType, _param_placement = param.placement, placement = _param_placement === void 0 ? eventType === "click" ? "bottom-end" : "top" : _param_placement, _param_hoverDelay = param.hoverDelay, hoverDelay = _param_hoverDelay === void 0 ? 0 : _param_hoverDelay, _param_popupOffset = param.popupOffset, popupOffset = _param_popupOffset === void 0 ? DEFAULT_OFFSET : _param_popupOffset, _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 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$V({
     theme: tweakStyles
   });
   var _useState = _sliced_to_array$m(useState(false), 2), isOpen = _useState[0], setIsOpen = _useState[1];
+  var arrowRef = useRef(null);
   var handleToggle = function(isActive, event) {
     event === null || event === void 0 ? void 0 : event.stopPropagation();
     if (!isDisabled) {
@@ -8001,8 +8013,13 @@ var WithPopup = function(param) {
       offset$2(popupOffset),
       canBeFlipped && flip$2({
         fallbackAxisSideDirection: "start"
+      }),
+      isMinWidthSameAsTrigger && minWidthRelativeToTrigger
+    ].concat(_to_consumable_array$7(middlewares), [
+      shouldShowArrow && arrow$2({
+        element: arrowRef
       })
-    ].concat(_to_consumable_array$7(middlewares)),
+    ]),
     whileElementsMounted: autoUpdate,
     placement,
     onOpenChange: handleToggle
@@ -8054,23 +8071,31 @@ var WithPopup = function(param) {
   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, addDataTestId(testId), addDataAttributes$1(data)), {
+      }, referenceProps, addDataAttributes$1(data, testId)), {
         children: triggerElement
       })) : triggerElement,
       isMounted && /* @__PURE__ */ jsx(FloatingPortal, {
-        root: !shouldRenderInBody ? refs.reference.current : void 0,
-        children: /* @__PURE__ */ jsx("div", _object_spread_props$U(_object_spread$11({
+        root: shouldRenderInBody ? document.body : refs.reference.current,
+        children: /* @__PURE__ */ jsx("div", _object_spread_props$T(_object_spread$11({
+          ref: refs.setFloating,
           style: floatingStyles,
-          className: classes.popup,
-          ref: refs.setFloating
-        }, getFloatingProps()), {
-          children: /* @__PURE__ */ jsx("div", {
+          className: classes.popup
+        }, getFloatingProps(), addDataAttributes$1(popupData)), {
+          children: /* @__PURE__ */ jsxs("div", {
             className: classes["dropdown-".concat(status)],
-            children: applyAction(children, {
-              onClose: handleClose
-            })
+            children: [
+              shouldShowArrow && /* @__PURE__ */ jsx(FloatingArrow, _object_spread_props$T(_object_spread$11({}, arrowProps), {
+                ref: arrowRef,
+                context,
+                className: classes.arrow
+              })),
+              applyAction(children, {
+                floatingContext: context,
+                onClose: handleClose
+              })
+            ]
           })
         }))
       })
@@ -8080,7 +8105,7 @@ var WithPopup = function(param) {
 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",
@@ -8147,7 +8172,7 @@ function _object_spread$10(target) {
   }
   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);
@@ -8160,12 +8185,12 @@ function ownKeys$T(object, enumerableOnly) {
   }
   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));
     });
   }
@@ -8173,7 +8198,7 @@ function _object_spread_props$T(target, source) {
 }
 var ListItem = function(param) {
   var icon = param.icon, item = param.item, nestedItems = param.nestedItems, isDisabled = param.disabled, isFocused = param.isFocused, shouldDrawSpacerAbove = param.shouldDrawSpacerAbove, shouldDrawSpacerBelow = param.shouldDrawSpacerBelow, testId = param.testId, tweakStyles = param.tweakStyles, _param_view = param.view, view = _param_view === void 0 ? "default" : _param_view, withIconGap = param.withIconGap, data = param.data, onClick = param.onClick;
-  var classes = useStyles$V({
+  var classes = useStyles$U({
     theme: tweakStyles
   });
   var _obj2;
@@ -8182,9 +8207,9 @@ var ListItem = function(param) {
       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))
-      }, addClickHandler(onClick, !isDisabled), addDataTestId(testId), addDataAttributes(_object_spread_props$T(_object_spread$10({}, data), {
+      }, addClickHandler(onClick, !isDisabled), addDataTestId(testId), addDataAttributes(_object_spread_props$S(_object_spread$10({}, data), {
         disabled: isDisabled ? true : void 0
       }))), {
         children: [
@@ -8210,7 +8235,7 @@ var ListItem = function(param) {
     ]
   });
 };
-var useStyles$U = createThemedStyles("List", {
+var useStyles$T = createThemedStyles("List", {
   root: {
     minWidth: 180,
     backgroundColor: colors.CLASSIC_WHITE,
@@ -8226,7 +8251,7 @@ var useStyles$U = createThemedStyles("List", {
     paddingLeft: 4
   }
 });
-var withPopupStyles = {
+var withPopupStyles$1 = {
   trigger: {
     width: "100%"
   }
@@ -8259,7 +8284,7 @@ function _object_spread$$(target) {
   }
   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);
@@ -8272,12 +8297,12 @@ function ownKeys$S(object, enumerableOnly) {
   }
   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));
     });
   }
@@ -8285,7 +8310,7 @@ function _object_spread_props$S(target, source) {
 }
 var List = function(param) {
   var items = param.items, testId = param.testId, data = param.data, tweakStyles = param.tweakStyles, onClick = param.onClick;
-  var classes = useStyles$U({
+  var classes = useStyles$T({
     theme: tweakStyles
   });
   var handleItemClick = function(event, param2) {
@@ -8295,11 +8320,11 @@ var List = function(param) {
       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
   }, 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: getTestId(testId, "item-".concat(i))
       }, item), {
         shouldDrawSpacerAbove: item.shouldDrawSpacerAbove && i !== 0,
@@ -8311,13 +8336,13 @@ var List = function(param) {
       return /* @__PURE__ */ jsx(Fragment$1, {
         children: isArrayNotEmpty(item.nestedItems) ? /* @__PURE__ */ jsx(WithPopup, {
           eventType: "hover",
-          tweakStyles: withPopupStyles,
+          tweakStyles: withPopupStyles$1,
           placement: "right-start",
           popupOffset: 0,
           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
             }));
           },
@@ -8362,7 +8387,7 @@ function _object_spread$_(target) {
   }
   return target;
 }
-var useStyles$T = createThemedStyles("AccountInfo", _object_spread$_({
+var useStyles$S = createThemedStyles("AccountInfo", _object_spread$_({
   root: {
     display: "flex"
   },
@@ -8475,7 +8500,7 @@ function _object_spread$Z(target) {
   }
   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);
@@ -8488,12 +8513,12 @@ function ownKeys$R(object, enumerableOnly) {
   }
   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));
     });
   }
@@ -8517,7 +8542,7 @@ function _unsupported_iterable_to_array$l(o, minLen) {
 }
 var AccountInfo = function(param) {
   var data = param.data, testId = param.testId, avatar = param.avatar, tweakStyles = param.tweakStyles, accountName = param.accountName, options = param.options;
-  var classes = useStyles$T({
+  var classes = useStyles$S({
     theme: tweakStyles
   });
   var tweakListStyles = useTweakStyles({
@@ -8537,7 +8562,7 @@ var AccountInfo = function(param) {
   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
   }, addDataTestId(testId), addDataAttributes(data)), {
     children: [
@@ -8587,7 +8612,7 @@ var AccountInfo = function(param) {
     ]
   }));
 };
-var useStyles$S = createThemedStyles("AddButton", {
+var useStyles$R = createThemedStyles("AddButton", {
   root: {
     display: "flex",
     alignItems: "center",
@@ -8641,7 +8666,7 @@ function _object_spread$Y(target) {
   }
   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);
@@ -8654,12 +8679,12 @@ function ownKeys$Q(object, enumerableOnly) {
   }
   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));
     });
   }
@@ -8667,10 +8692,10 @@ function _object_spread_props$Q(target, source) {
 }
 var AddButton = function(param) {
   var text = param.text, _param_type = param.type, type = _param_type === void 0 ? "button" : _param_type, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, onClick = param.onClick, _param_isFullWidth = param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? false : _param_isFullWidth, data = param.data, testId = param.testId, tweakStyles = param.tweakStyles;
-  var classes = useStyles$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,
@@ -8689,7 +8714,7 @@ var AddButton = function(param) {
     ]
   }));
 };
-var useStyles$R = createThemedStyles("DotsPreloader", {
+var useStyles$Q = createThemedStyles("DotsPreloader", {
   root: {
     display: "flex",
     gap: 4,
@@ -8735,7 +8760,7 @@ var useStyles$R = createThemedStyles("DotsPreloader", {
 });
 var DotsPreloader = function(param) {
   var tweakStyles = param.tweakStyles;
-  var classes = useStyles$R({
+  var classes = useStyles$Q({
     theme: tweakStyles
   });
   return /* @__PURE__ */ jsx("div", {
@@ -8801,7 +8826,7 @@ var DefaultPreloader = function() {
     ]
   });
 };
-var useStyles$Q = createThemedStyles("SvgPreloader", {
+var useStyles$P = createThemedStyles("SvgPreloader", {
   root: {
     display: "flex",
     width: "100%",
@@ -8811,7 +8836,7 @@ var useStyles$Q = createThemedStyles("SvgPreloader", {
 var SvgPreloader = function(param) {
   var _param_type = param.type, type = _param_type === void 0 ? "default" : _param_type, tweakStyles = param.tweakStyles;
   var _theme_preloaders;
-  var classes = useStyles$Q({
+  var classes = useStyles$P({
     theme: tweakStyles
   });
   var theme = useContext(ThemeContext).theme;
@@ -8825,7 +8850,7 @@ var SvgPreloader = function(param) {
     }
   }) : /* @__PURE__ */ jsx(PreloaderIcon, {});
 };
-var useStyles$P = createThemedStyles("ThemedPreloader", {
+var useStyles$O = createThemedStyles("ThemedPreloader", {
   root: {
     display: "flex"
   },
@@ -8864,7 +8889,7 @@ function _object_spread$X(target) {
   }
   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);
@@ -8877,12 +8902,12 @@ function ownKeys$P(object, enumerableOnly) {
   }
   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));
     });
   }
@@ -8890,7 +8915,7 @@ function _object_spread_props$P(target, source) {
 }
 var ThemedPreloader = function(param) {
   var _param_type = param.type, type = _param_type === void 0 ? "default" : _param_type, _param_useCurrentColor = param.useCurrentColor, useCurrentColor = _param_useCurrentColor === void 0 ? false : _param_useCurrentColor, data = param.data, testId = param.testId, tweakStyles = param.tweakStyles;
-  var classes = useStyles$P({
+  var classes = useStyles$O({
     theme: tweakStyles
   });
   var tweakDotsPreloaderStyles = useTweakStyles({
@@ -8903,7 +8928,7 @@ var ThemedPreloader = function(param) {
     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))
   }, addDataTestId(testId), addDataAttributes(data)), {
     children: type === "dots" ? /* @__PURE__ */ jsx(DotsPreloader, {
@@ -8914,7 +8939,7 @@ var ThemedPreloader = function(param) {
     })
   }));
 };
-var useStyles$O = createThemedStyles("Button", {
+var useStyles$N = createThemedStyles("Button", {
   root: {
     display: "flex",
     justifyContent: "center",
@@ -9082,8 +9107,8 @@ var dotsPreloaderStyles = {
     }
   }
 };
-var getPreloaderStyles = function(size) {
-  return size === "s" || size === "m" ? dotsPreloaderStyles : void 0;
+var getPreloaderStyles = function(size2) {
+  return size2 === "s" || size2 === "m" ? dotsPreloaderStyles : void 0;
 };
 function _define_property$Y(obj, key, value) {
   if (key in obj) {
@@ -9113,7 +9138,7 @@ function _object_spread$W(target) {
   }
   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);
@@ -9126,12 +9151,12 @@ function ownKeys$O(object, enumerableOnly) {
   }
   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));
     });
   }
@@ -9170,7 +9195,7 @@ function _object_without_properties_loose$j(source, excluded) {
   return target;
 }
 var Button = /* @__PURE__ */ forwardRef(function(_param, ref) {
-  var _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, children = _param.children, _param_size = _param.size, 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, [
+  var _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, children = _param.children, _param_size = _param.size, size2 = _param_size === void 0 ? "l" : _param_size, _param_view = _param.view, view = _param_view === void 0 ? "primary" : _param_view, _param_isFullWidth = _param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? false : _param_isFullWidth, _param_isInline = _param.isInline, isInline = _param_isInline === void 0 ? false : _param_isInline, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_shouldSkipTabNavigation = _param.shouldSkipTabNavigation, shouldSkipTabNavigation = _param_shouldSkipTabNavigation === void 0 ? false : _param_shouldSkipTabNavigation, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, icon = _param.icon, _param_iconPosition = _param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_preloaderType = _param.preloaderType, preloaderType = _param_preloaderType === void 0 ? "dots" : _param_preloaderType, interactions = _object_without_properties$j(_param, [
     "type",
     "children",
     "size",
@@ -9188,11 +9213,11 @@ var Button = /* @__PURE__ */ forwardRef(function(_param, ref) {
     "iconPosition",
     "preloaderType"
   ]);
-  var classes = useStyles$O({
+  var classes = useStyles$N({
     theme: tweakStyles
   });
   var tweakPreloaderStyles = useTweakStyles({
-    innerStyles: getPreloaderStyles(size),
+    innerStyles: getPreloaderStyles(size2),
     tweakStyles,
     className: "tweakPreloader",
     currentComponentName: "Button"
@@ -9201,10 +9226,10 @@ var Button = /* @__PURE__ */ forwardRef(function(_param, ref) {
   var hasChildren = isReactNodeNotEmpty(children);
   var hasNoAction = isDisabled || isLoading;
   var _obj2, _obj1;
-  return /* @__PURE__ */ jsxs("button", _object_spread_props$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)),
+    className: clsx(classes.root, classes[size2], classes[view], (_obj2 = {}, _define_property$Y(_obj2, classes.disabled, isDisabled), _define_property$Y(_obj2, classes.fullWidth, isFullWidth), _define_property$Y(_obj2, classes.inline, isInline), _define_property$Y(_obj2, classes.active, isActive), _define_property$Y(_obj2, classes.loading, isLoading), _define_property$Y(_obj2, classes.onlyIcon, hasIcon && !hasChildren), _obj2)),
     tabIndex: shouldSkipTabNavigation ? -1 : void 0,
     disabled: hasNoAction
   }, interactions, addDataTestId(testId), addDataAttributes(data)), {
@@ -9233,7 +9258,7 @@ var Button = /* @__PURE__ */ forwardRef(function(_param, ref) {
     ]
   }));
 });
-var useStyles$N = createThemedStyles("Checkbox", {
+var useStyles$M = createThemedStyles("Checkbox", {
   root: {
     cursor: "pointer",
     display: "flex",
@@ -9299,7 +9324,7 @@ function _object_spread$V(target) {
   }
   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);
@@ -9312,12 +9337,12 @@ function ownKeys$N(object, enumerableOnly) {
   }
   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));
     });
   }
@@ -9325,7 +9350,7 @@ function _object_spread_props$N(target, source) {
 }
 function Checkbox(param) {
   var value = param.value, children = param.children, _param_isChecked = param.isChecked, isChecked = _param_isChecked === void 0 ? false : _param_isChecked, _param_isSemiChecked = param.isSemiChecked, isSemiChecked = _param_isSemiChecked === void 0 ? false : _param_isSemiChecked, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isReadonly = param.isReadonly, isReadonly = _param_isReadonly === void 0 ? false : _param_isReadonly, _param_labelPosition = param.labelPosition, labelPosition = _param_labelPosition === void 0 ? "right" : _param_labelPosition, data = param.data, testId = param.testId, tweakStyles = param.tweakStyles, onSelect = param.onSelect;
-  var classes = useStyles$N({
+  var classes = useStyles$M({
     theme: tweakStyles
   });
   var hasAction = !isDisabled && !isReadonly;
@@ -9337,7 +9362,7 @@ function Checkbox(param) {
     }, 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))
   }, addDataTestId(testId), addDataAttributes(data)), {
     children: [
@@ -9364,7 +9389,7 @@ function Checkbox(param) {
     ]
   }));
 }
-var useStyles$M = createThemedStyles("CloseButton", {
+var useStyles$L = createThemedStyles("CloseButton", {
   root: {
     width: 40,
     height: 40,
@@ -9418,7 +9443,7 @@ function _object_spread$U(target) {
   }
   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);
@@ -9431,12 +9456,12 @@ function ownKeys$M(object, enumerableOnly) {
   }
   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));
     });
   }
@@ -9444,10 +9469,10 @@ function _object_spread_props$M(target, source) {
 }
 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
@@ -9457,7 +9482,7 @@ var CloseButton = function(param) {
     })
   }));
 };
-var useStyles$L = createThemedStyles({
+var useStyles$K = createThemedStyles({
   root: {
     display: "flex",
     flexWrap: "wrap"
@@ -9550,7 +9575,7 @@ function _unsupported_iterable_to_array$k(o, minLen) {
     return _array_like_to_array$k(o, minLen);
 }
 var Colors = function() {
-  var classes = useStyles$L();
+  var classes = useStyles$K();
   var theme = useContext(ThemeContext).theme;
   var _theme_colors = theme.colors, colors2 = _theme_colors === void 0 ? {} : _theme_colors;
   return /* @__PURE__ */ jsx("div", {
@@ -9580,7 +9605,7 @@ var Colors = function() {
     })
   });
 };
-var useStyles$K = createThemedStyles("CssBaseline", {
+var useStyles$J = createThemedStyles("CssBaseline", {
   "@global html, body": {
     fontFamily: "Arial, sans-serif",
     color: colors.FONT_MAIN,
@@ -9619,14 +9644,14 @@ function _object_spread$T(target) {
 }
 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
   }, addDataTestId(testId), addDataAttributes(data)));
 };
-var useStyles$J = createThemedStyles("WithMessages", {
+var useStyles$I = createThemedStyles("WithMessages", {
   withMessages: {
     display: "flex",
     flexDirection: "column",
@@ -9688,7 +9713,7 @@ function _object_spread$S(target) {
   }
   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);
@@ -9701,12 +9726,12 @@ function ownKeys$L(object, enumerableOnly) {
   }
   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));
     });
   }
@@ -9714,13 +9739,13 @@ function _object_spread_props$L(target, source) {
 }
 var WithMessages = /* @__PURE__ */ 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$J({
+  var classes = useStyles$I({
     theme: tweakStyles
   });
   var shouldShowError = isReactNodeNotEmpty(errorMessage);
   var shouldShowInfo = 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.withMessages,
     "data-invalid": shouldShowError ? true : void 0
@@ -9733,12 +9758,12 @@ var WithMessages = /* @__PURE__ */ forwardRef(function(param, ref) {
       (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
           }, 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
           }, addDataTestId(testId, "info")), {
             children: infoMessage
@@ -9748,8 +9773,8 @@ var WithMessages = /* @__PURE__ */ forwardRef(function(param, ref) {
     ]
   }));
 });
-var CONTROL$1 = dimensions.CONTROL, Z_INDEX$2 = dimensions.Z_INDEX;
-var useStyles$I = createThemedStyles("ControlWrapper", {
+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
@@ -9771,12 +9796,12 @@ var useStyles$I = createThemedStyles("ControlWrapper", {
     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: {},
@@ -9928,7 +9953,7 @@ function _object_spread$R(target) {
   }
   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);
@@ -9941,12 +9966,12 @@ function ownKeys$K(object, enumerableOnly) {
   }
   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));
     });
   }
@@ -9954,7 +9979,7 @@ function _object_spread_props$K(target, source) {
 }
 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 && isReactNodeNotEmpty(icon);
@@ -9966,7 +9991,7 @@ var ControlWrapper = function(param) {
     currentComponentName: "ControlWrapper"
   });
   var _obj2, _obj1, _obj22;
-  return /* @__PURE__ */ jsxs("div", _object_spread_props$K(_object_spread$R({
+  return /* @__PURE__ */ jsxs("div", _object_spread_props$J(_object_spread$R({
     className: clsx(classes.controlWrapper, 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))
@@ -9983,7 +10008,7 @@ var ControlWrapper = function(param) {
           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)
               }, addClickHandler(onClear), addDataTestId(testId, "clear")), {
                 children: /* @__PURE__ */ jsx("div", {
@@ -9993,7 +10018,7 @@ var ControlWrapper = function(param) {
                   })
                 })
               })),
-              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 && isNotEmpty(onIconClick)), _define_property$T(_obj22, classes.customIcon, !isString(icon)), _obj22))
               }, addClickHandler(onIconClick, !isDisabled), addDataTestId(testId, "icon")), {
                 children: /* @__PURE__ */ jsx("div", {
@@ -10001,7 +10026,7 @@ var ControlWrapper = function(param) {
                   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)
               }, addDataTestId(testId, "loading")), {
                 children: /* @__PURE__ */ jsx("div", {
@@ -10019,7 +10044,7 @@ var ControlWrapper = function(param) {
   }));
 };
 var PADDING_WITH_UNITS = 8;
-var useStyles$H = createThemedStyles("Input", {
+var useStyles$G = createThemedStyles("Input", {
   inputContent: {
     height: "var(--control-height)",
     padding: [
@@ -10191,7 +10216,7 @@ function _object_spread$Q(target) {
   }
   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);
@@ -10204,12 +10229,12 @@ function ownKeys$J(object, enumerableOnly) {
   }
   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));
     });
   }
@@ -10397,7 +10422,7 @@ var InputBase = /* @__PURE__ */ forwardRef(function(_param, ref) {
     "shouldAlwaysShowPlaceholder",
     "beforeMaskedStateChange"
   ]);
-  var classes = useStyles$H({
+  var classes = useStyles$G({
     theme: tweakStyles
   });
   var tweakControlWrapperStyles = useTweakStyles({
@@ -10510,7 +10535,7 @@ var InputBase = /* @__PURE__ */ forwardRef(function(_param, ref) {
       })
     ]
   });
-  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,
@@ -10554,7 +10579,7 @@ function _object_spread$P(target) {
   }
   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);
@@ -10567,12 +10592,12 @@ function ownKeys$I(object, enumerableOnly) {
   }
   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));
     });
   }
@@ -10627,7 +10652,7 @@ var Input = /* @__PURE__ */ forwardRef(function(_param, ref) {
     infoMessage,
     testId,
     tweakStyles: tweakWithMessagesStyles,
-    children: /* @__PURE__ */ jsx(InputBase, _object_spread_props$I(_object_spread$P({}, inputProps), {
+    children: /* @__PURE__ */ jsx(InputBase, _object_spread_props$H(_object_spread$P({}, inputProps), {
       ref,
       testId,
       tweakStyles,
@@ -10637,7 +10662,7 @@ var Input = /* @__PURE__ */ forwardRef(function(_param, ref) {
 });
 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%",
@@ -10673,7 +10698,7 @@ function _object_spread$O(target) {
   }
   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);
@@ -10686,12 +10711,12 @@ function ownKeys$H(object, enumerableOnly) {
   }
   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));
     });
   }
@@ -10743,7 +10768,7 @@ var DateInput = /* @__PURE__ */ forwardRef(function(_param, ref) {
     "onClick",
     "onChange"
   ]);
-  var classes = useStyles$G({
+  var classes = useStyles$F({
     theme: tweakStyles
   });
   var tweakInputStyles = useTweakStyles({
@@ -10770,11 +10795,11 @@ var DateInput = /* @__PURE__ */ forwardRef(function(_param, ref) {
     }
     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",
@@ -10786,33 +10811,21 @@ var DateInput = /* @__PURE__ */ forwardRef(function(_param, ref) {
   }));
 });
 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: {
-    controlWrapper: {
-      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: {
@@ -10848,30 +10861,6 @@ function _object_spread$N(target) {
   }
   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 {};
@@ -10905,42 +10894,30 @@ function _object_without_properties_loose$f(source, excluded) {
   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
-  }, 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: getTestId(testId, "input"),
-        tweakStyles: tweakInputStyles
-      }, props))
-    ]
-  }));
+  return /* @__PURE__ */ jsx(Input, _object_spread$N({
+    value,
+    placeholder,
+    icon: "search",
+    isClearable,
+    testId: getTestId(testId, "input"),
+    tweakStyles: tweakInputStyles
+  }, props));
 };
 var ScrollIntoViewIfNeededDefaultElementType = "div";
 var ScrollIntoViewIfNeededDefaultProps = {
@@ -13546,7 +13523,7 @@ function _object_without_properties_loose$b(source, excluded) {
   return target;
 }
 var IconButton = /* @__PURE__ */ 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$b(_param, [
+  var icon = _param.icon, _param_size = _param.size, size2 = _param_size === void 0 ? "m" : _param_size, _param_view = _param.view, view = _param_view === void 0 ? "cancel-light" : _param_view, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, testId = _param.testId, tweakStyles = _param.tweakStyles, data = _param.data, onClick = _param.onClick, restProps = _object_without_properties$b(_param, [
     "icon",
     "size",
     "view",
@@ -13566,7 +13543,7 @@ var IconButton = /* @__PURE__ */ forwardRef(function(_param, ref) {
   var _obj2;
   return /* @__PURE__ */ jsx("button", _object_spread_props$z(_object_spread$E({
     ref,
-    className: clsx(classes.root, classes[view], classes[size], (_obj2 = {}, _define_property$G(_obj2, classes.disabled, isDisabled), _define_property$G(_obj2, classes.active, isActive), _define_property$G(_obj2, classes.loading, isLoading), _obj2)),
+    className: clsx(classes.root, classes[view], classes[size2], (_obj2 = {}, _define_property$G(_obj2, classes.disabled, isDisabled), _define_property$G(_obj2, classes.active, isActive), _define_property$G(_obj2, classes.loading, isLoading), _obj2)),
     type,
     disabled: isDisabled,
     onClick: hasNoAction ? void 0 : onClick
@@ -14124,7 +14101,7 @@ var FileItem = function(param) {
     event.stopPropagation();
     onRemove === null || onRemove === void 0 ? void 0 : onRemove(event);
   };
-  var name = fileInfo.name, size = fileInfo.size;
+  var name = fileInfo.name, size2 = fileInfo.size;
   var hasRemoveButton = isFunction$1(onRemove);
   return /* @__PURE__ */ jsxs("div", {
     className: classes.root,
@@ -14153,9 +14130,9 @@ var FileItem = function(param) {
                 className: classes.metadata,
                 children: [
                   metadata,
-                  shouldShowSize && isNotEmpty(size) && /* @__PURE__ */ jsx("div", {
+                  shouldShowSize && isNotEmpty(size2) && /* @__PURE__ */ jsx("div", {
                     className: classes.fileSize,
-                    children: filesize(size)
+                    children: filesize(size2)
                   })
                 ]
               })
@@ -27525,7 +27502,7 @@ function _unsupported_iterable_to_array$6(o, minLen) {
     return _array_like_to_array$6(o, minLen);
 }
 var Modal = function(_param) {
-  var data = _param.data, tweakStyles = _param.tweakStyles, title = _param.title, _param_size = _param.size, 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, [
+  var data = _param.data, tweakStyles = _param.tweakStyles, title = _param.title, _param_size = _param.size, size2 = _param_size === void 0 ? "l" : _param_size, _param_isFooterSticky = _param.isFooterSticky, isFooterSticky = _param_isFooterSticky === void 0 ? false : _param_isFooterSticky, footer = _param.footer, buttons = _param.buttons, _param_buttonsAlign = _param.buttonsAlign, buttonsAlign = _param_buttonsAlign === void 0 ? "right" : _param_buttonsAlign, _param_hasCloseButton = _param.hasCloseButton, hasCloseButton = _param_hasCloseButton === void 0 ? true : _param_hasCloseButton, _param_hasOverlay = _param.hasOverlay, hasOverlay = _param_hasOverlay === void 0 ? true : _param_hasOverlay, _param_isOpen = _param.isOpen, isOpen = _param_isOpen === void 0 ? false : _param_isOpen, _param_position = _param.position, position = _param_position === void 0 ? "center" : _param_position, children = _param.children, zIndex = _param.zIndex, testId = _param.testId, _param_shouldCloseOnOverlayClick = _param.shouldCloseOnOverlayClick, shouldCloseOnOverlayClick = _param_shouldCloseOnOverlayClick === void 0 ? true : _param_shouldCloseOnOverlayClick, _param_shouldCloseOnEsc = _param.shouldCloseOnEsc, shouldCloseOnEsc = _param_shouldCloseOnEsc === void 0 ? true : _param_shouldCloseOnEsc, _param_shouldBlockScroll = _param.shouldBlockScroll, shouldBlockScroll = _param_shouldBlockScroll === void 0 ? true : _param_shouldBlockScroll, _param_timeout = _param.timeout, timeout = _param_timeout === void 0 ? 150 : _param_timeout, _param_unmountOnExit = _param.unmountOnExit, unmountOnExit = _param_unmountOnExit === void 0 ? true : _param_unmountOnExit, onClose = _param.onClose, restProps = _object_without_properties$6(_param, [
     "data",
     "tweakStyles",
     "title",
@@ -27617,7 +27594,7 @@ var Modal = function(_param) {
         enabled: shouldBlockScroll,
         forwardProps: true,
         children: /* @__PURE__ */ jsx("div", _object_spread_props$h(_object_spread$i({
-          className: clsx(classes.root, classes[size], (_obj2 = {}, _define_property$j(_obj2, classes.overlay, position !== "static" && hasOverlay), _define_property$j(_obj2, classes.sideBar, position === "left" || position === "right"), _define_property$j(_obj2, classes.fixedPosition, position !== "static"), _obj2)),
+          className: clsx(classes.root, classes[size2], (_obj2 = {}, _define_property$j(_obj2, classes.overlay, position !== "static" && hasOverlay), _define_property$j(_obj2, classes.sideBar, position === "left" || position === "right"), _define_property$j(_obj2, classes.fixedPosition, position !== "static"), _obj2)),
           style: {
             zIndex
           }
@@ -28285,7 +28262,7 @@ function _object_spread_props$e(target, source) {
   return target;
 }
 var Notification = function(param) {
-  var children = param.children, type = param.type, _param_isFullWidth = param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? true : _param_isFullWidth, text = param.text, title = param.title, testId = param.testId, _param_size = param.size, size = _param_size === void 0 ? "s" : _param_size, data = param.data, icon = param.icon, tweakStyles = param.tweakStyles;
+  var children = param.children, type = param.type, _param_isFullWidth = param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? true : _param_isFullWidth, text = param.text, title = param.title, testId = param.testId, _param_size = param.size, size2 = _param_size === void 0 ? "s" : _param_size, data = param.data, icon = param.icon, tweakStyles = param.tweakStyles;
   var classes = useStyles$b({
     theme: tweakStyles
   });
@@ -28295,7 +28272,7 @@ var Notification = function(param) {
   var hasIcon = isReactNodeNotEmpty(icon) || isDefaultType;
   var _obj2;
   return /* @__PURE__ */ jsxs("div", _object_spread_props$e(_object_spread$f({
-    className: clsx(classes.root, classes[size], classes[type], (_obj2 = {}, _define_property$g(_obj2, classes.inline, !isFullWidth), _define_property$g(_obj2, classes.withTitle, hasTitle), _define_property$g(_obj2, classes.withText, hasText), _obj2))
+    className: clsx(classes.root, classes[size2], classes[type], (_obj2 = {}, _define_property$g(_obj2, classes.inline, !isFullWidth), _define_property$g(_obj2, classes.withTitle, hasTitle), _define_property$g(_obj2, classes.withText, hasText), _obj2))
   }, addDataTestId(testId), addDataAttributes(data)), {
     children: [
       hasIcon && /* @__PURE__ */ jsx("div", {
@@ -29408,7 +29385,7 @@ function _unsupported_iterable_to_array$1(o, minLen) {
     return _array_like_to_array$1(o, minLen);
 }
 function Selector(param) {
-  var options = param.options, value = param.value, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isRequired = param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_hasSameOptionsWidth = param.hasSameOptionsWidth, hasSameOptionsWidth = _param_hasSameOptionsWidth === void 0 ? true : _param_hasSameOptionsWidth, _param_iconPosition = param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_size = param.size, size = _param_size === void 0 ? "l" : _param_size, testId = param.testId, data = param.data, tweakStyles = param.tweakStyles, onChange = param.onChange;
+  var options = param.options, value = param.value, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isRequired = param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_hasSameOptionsWidth = param.hasSameOptionsWidth, hasSameOptionsWidth = _param_hasSameOptionsWidth === void 0 ? true : _param_hasSameOptionsWidth, _param_iconPosition = param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_size = param.size, size2 = _param_size === void 0 ? "l" : _param_size, testId = param.testId, data = param.data, tweakStyles = param.tweakStyles, onChange = param.onChange;
   var classes = useStyles$7({
     theme: tweakStyles
   });
@@ -29428,7 +29405,7 @@ function Selector(param) {
     setElementsData(_to_consumable_array(listEl.querySelectorAll(".".concat(classes.optionWrapper))));
   }, [
     options,
-    size
+    size2
   ]);
   var activeElementData = isNotEmpty(value) ? elementsData[optionsValues.indexOf(value)] : void 0;
   var _obj2;
@@ -29452,7 +29429,7 @@ function Selector(param) {
         }, addDataTestId(testId)), {
           children: /* @__PURE__ */ jsxs("button", _object_spread_props$b(_object_spread$b({
             type: "button",
-            className: clsx(classes.option, classes[size], (_obj3 = {}, _define_property$b(_obj3, classes.active, isActiveOption), _define_property$b(_obj3, classes.disabled, isDisabledOption), _obj3)),
+            className: clsx(classes.option, classes[size2], (_obj3 = {}, _define_property$b(_obj3, classes.active, isActiveOption), _define_property$b(_obj3, classes.disabled, isDisabledOption), _obj3)),
             disabled: isDisabledOption,
             onClick: !isDisabledOption ? function() {
               return onChange(option.value);
@@ -30126,12 +30103,12 @@ function _object_spread_props$8(target, source) {
   return target;
 }
 var Status = function(param) {
-  var children = param.children, color = param.color, _param_size = param.size, size = _param_size === void 0 ? "s" : _param_size, icon = param.icon, _param_iconPosition = param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "right" : _param_iconPosition, badge = param.badge, tweakStyles = param.tweakStyles, testId = param.testId, data = param.data;
+  var children = param.children, color = param.color, _param_size = param.size, size2 = _param_size === void 0 ? "s" : _param_size, icon = param.icon, _param_iconPosition = param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "right" : _param_iconPosition, badge = param.badge, tweakStyles = param.tweakStyles, testId = param.testId, data = param.data;
   var classes = useStyles$6({
     theme: tweakStyles
   });
   return /* @__PURE__ */ jsxs("span", _object_spread_props$8(_object_spread$8({
-    className: clsx(classes.root, classes[size], classes[color])
+    className: clsx(classes.root, classes[size2], classes[color])
   }, addDataTestId(testId), addDataAttributes(data)), {
     children: [
       isReactNodeNotEmpty(children) && /* @__PURE__ */ jsx("span", {
@@ -30846,7 +30823,7 @@ function _object_without_properties_loose$2(source, excluded) {
   return target;
 }
 var TextButton = /* @__PURE__ */ forwardRef(function(_param, ref) {
-  var children = _param.children, icon = _param.icon, _param_view = _param.view, view = _param_view === void 0 ? "primary" : _param_view, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isBold = _param.isBold, isBold = _param_isBold === void 0 ? false : _param_isBold, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_hasCircleUnderIcon = _param.hasCircleUnderIcon, hasCircleUnderIcon = _param_hasCircleUnderIcon === void 0 ? false : _param_hasCircleUnderIcon, _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, _param_iconPosition = _param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_preloaderType = _param.preloaderType, preloaderType = _param_preloaderType === void 0 ? "dots" : _param_preloaderType, _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, testId = _param.testId, tweakStyles = _param.tweakStyles, data = _param.data, onClick = _param.onClick, restProps = _object_without_properties$2(_param, [
+  var children = _param.children, icon = _param.icon, _param_view = _param.view, view = _param_view === void 0 ? "primary" : _param_view, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isBold = _param.isBold, isBold = _param_isBold === void 0 ? false : _param_isBold, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_hasCircleUnderIcon = _param.hasCircleUnderIcon, hasCircleUnderIcon = _param_hasCircleUnderIcon === void 0 ? false : _param_hasCircleUnderIcon, _param_size = _param.size, size2 = _param_size === void 0 ? "l" : _param_size, _param_iconPosition = _param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_preloaderType = _param.preloaderType, preloaderType = _param_preloaderType === void 0 ? "dots" : _param_preloaderType, _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, testId = _param.testId, tweakStyles = _param.tweakStyles, data = _param.data, onClick = _param.onClick, restProps = _object_without_properties$2(_param, [
     "children",
     "icon",
     "view",
@@ -30878,7 +30855,7 @@ var TextButton = /* @__PURE__ */ forwardRef(function(_param, ref) {
   return /* @__PURE__ */ jsxs("button", _object_spread_props$4(_object_spread$4({
     ref,
     type,
-    className: clsx(classes.root, classes[size], classes[view], (_obj2 = {}, _define_property$4(_obj2, classes.bold, isBold), _define_property$4(_obj2, classes.loading, isLoading), _define_property$4(_obj2, classes.active, isActive), _define_property$4(_obj2, classes.disabled, isDisabled), _obj2)),
+    className: clsx(classes.root, classes[size2], classes[view], (_obj2 = {}, _define_property$4(_obj2, classes.bold, isBold), _define_property$4(_obj2, classes.loading, isLoading), _define_property$4(_obj2, classes.active, isActive), _define_property$4(_obj2, classes.disabled, isDisabled), _obj2)),
     disabled: hasNoAction,
     onClick: !hasNoAction ? onClick : void 0
   }, restProps, addDataTestId(testId), addDataAttributes(data)), {
@@ -31366,6 +31343,11 @@ var NewMoreMenu = function(_param) {
     }
   }));
 };
+var withPopupStyles = {
+  popup: {
+    zIndex: 9999
+  }
+};
 function _define_property(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -31451,7 +31433,7 @@ function _object_without_properties_loose(source, excluded) {
   return target;
 }
 var WithTooltip = function(_param) {
-  var children = _param.children, _param_eventType = _param.eventType, eventType = _param_eventType === void 0 ? "hover" : _param_eventType, _param_placement = _param.placement, placement = _param_placement === void 0 ? "top" : _param_placement, tooltipText = _param.tooltipText, _param_tooltipView = _param.tooltipView, tooltipView = _param_tooltipView === void 0 ? "tooltip" : _param_tooltipView, _param_tooltipType = _param.tooltipType, tooltipType = _param_tooltipType === void 0 ? "info" : _param_tooltipType, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, 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, popupData = _param.popupData, tweakStyles = _param.tweakStyles, restProps = _object_without_properties(_param, [
     "children",
     "eventType",
     "placement",
@@ -31459,22 +31441,29 @@ var WithTooltip = function(_param) {
     "tooltipView",
     "tooltipType",
     "isDisabled",
+    "popupData",
     "tweakStyles"
   ]);
   var tweakWithPopupStyles = useTweakStyles({
+    innerStyles: withPopupStyles,
     tweakStyles,
-    className: "tweakWithPopup"
+    className: "tweakWithPopup",
+    currentComponentName: "WithTooltip"
   });
   var tweakTooltipStyles = useTweakStyles({
     tweakStyles,
-    className: "tweakTooltip"
+    className: "tweakTooltip",
+    currentComponentName: "WithTooltip"
   });
   return /* @__PURE__ */ jsx(WithPopup, _object_spread_props(_object_spread({
     trigger: children,
     placement,
     eventType,
-    isTriggerWrapped: true,
+    popupData: _object_spread_props(_object_spread({}, popupData), {
+      tooltipView
+    }),
     isDisabled: isDisabled || !isReactNodeNotEmpty(tooltipText),
+    isTriggerWrapped: true,
     tweakStyles: tweakWithPopupStyles
   }, restProps), {
     children: /* @__PURE__ */ jsx(Tooltip, {