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

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

@@ -964,7 +964,17 @@
     BORDER_RADIUS_STD: 8,
     BORDER_RADIUS_SMALL: 6,
     BORDER_RADIUS_EXTRA_SMALL: 4,
-    CONTROL_HEIGHT: 48
+    CONTROL: {
+      HEIGHT: 48,
+      PADDING: 16,
+      ICON_SIZE: 24,
+      ICON_INNER_SIZE: 24,
+      ICON_GAP: 8
+    },
+    Z_INDEX: {
+      CONTROL_INVALID: 1,
+      CONTROL_FOCUS: 2
+    }
   };
   var helpers = {
     withAngle: function() {
@@ -1035,11 +1045,9 @@
       overflow: "auto",
       // Chromium
       "@supports selector(::-webkit-scrollbar)": {
-        "--webkit-scrollbar-width": "10px",
-        "--webkit-scrollbar-height": "10px",
         "&::-webkit-scrollbar": {
-          width: "var(--webkit-scrollbar-width)",
-          height: "var(--webkit-scrollbar-height)",
+          height: 10,
+          width: 10,
           "&-thumb": {
             width: 6,
             minHeight: 30,
@@ -1862,7 +1870,7 @@
     baseMerge(object, source, srcIndex);
   });
   const merge$1 = merge;
-  function _define_property$15(obj, key, value) {
+  function _define_property$18(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -1875,7 +1883,7 @@
     }
     return obj;
   }
-  function _object_spread$13(target) {
+  function _object_spread$16(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
       var ownKeys2 = Object.keys(source);
@@ -1885,12 +1893,12 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$15(target, key, source[key]);
+        _define_property$18(target, key, source[key]);
       });
     }
     return target;
   }
-  function ownKeys$U(object, enumerableOnly) {
+  function ownKeys$X(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -1903,12 +1911,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$U(target, source) {
+  function _object_spread_props$X(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$U(Object(source)).forEach(function(key) {
+      ownKeys$X(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -1963,7 +1971,7 @@
       return trueReactPlatformHelpers.mergeStyles(styles, trueReactPlatformHelpers.isNotEmpty(componentName) ? theme === null || theme === void 0 ? void 0 : (_theme_components = theme.components) === null || _theme_components === void 0 ? void 0 : _theme_components[componentName] : void 0, tweakStyles);
     });
     return function(data) {
-      return useStyles2(trueReactPlatformHelpers.isNotEmpty(data) ? _object_spread_props$U(_object_spread$13({}, data), {
+      return useStyles2(trueReactPlatformHelpers.isNotEmpty(data) ? _object_spread_props$X(_object_spread$16({}, data), {
         theme: cleanStyles(data.theme)
       }) : data);
     };
@@ -6497,7 +6505,7 @@
     if (Array.isArray(arr))
       return _array_like_to_array$n(arr);
   }
-  function _define_property$14(obj, key, value) {
+  function _define_property$17(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -6517,7 +6525,7 @@
   function _non_iterable_spread$8() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
-  function _object_spread$12(target) {
+  function _object_spread$15(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
       var ownKeys2 = Object.keys(source);
@@ -6527,7 +6535,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$14(target, key, source[key]);
+        _define_property$17(target, key, source[key]);
       });
     }
     return target;
@@ -6583,7 +6591,7 @@
           },
           {
             name: "flip",
-            options: _object_spread$12({
+            options: _object_spread$15({
               fallbackPlacements: canBeFlipped ? [
                 "bottom-start",
                 "top-start"
@@ -6657,71 +6665,71 @@
       return trueReactPlatformHelpers.mergeRefs(refs);
     }, refs);
   };
-  const avatarGreen = `  <svg\r
-    width="100%"\r
-    height="100%"\r
-    viewBox="0 0 32 32"\r
-    fill="none"\r
-    xmlns="http://www.w3.org/2000/svg"\r
-  >\r
-    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />\r
-    <mask\r
-      id="mask0_0_12744"\r
-      style="mask-type: 'alpha';"\r
-      maskUnits="userSpaceOnUse"\r
-      x="0"\r
-      y="0"\r
-      width="32"\r
-      height="32"\r
-    >\r
-      <circle cx="16" cy="16" r="16" fill="white" />\r
-    </mask>\r
-    <g mask="url(#mask0_0_12744)">\r
-      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />\r
-      <mask\r
-        id="mask1_0_12744"\r
-        style="mask-type: 'alpha';"\r
-        maskUnits="userSpaceOnUse"\r
-        x="3"\r
-        y="16"\r
-        width="26"\r
-        height="26"\r
-      >\r
-        <circle cx="16" cy="29" r="13" fill="white" />\r
-      </mask>\r
-      <g mask="url(#mask1_0_12744)">\r
-        <ellipse\r
-          cx="16"\r
-          cy="17.5"\r
-          rx="6"\r
-          ry="7.5"\r
-          fill="#505F79"\r
-          fill-opacity="0.204983"\r
-        />\r
-      </g>\r
-    </g>\r
-    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />\r
-    <defs>\r
-      <linearGradient\r
-        id="paint0_linear_0_12744"\r
-        x1="13.347"\r
-        y1="46.279"\r
-        x2="33.5318"\r
-        y2="30.8088"\r
-        gradientUnits="userSpaceOnUse"\r
-      >\r
-        <stop stop-color="#ABD229" />\r
-        <stop offset="1" stop-color="#9CD03F" />\r
-      </linearGradient>\r
-    </defs>\r
+  const avatarGreen = `  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
+    <mask
+      id="mask0_0_12744"
+      style="mask-type: 'alpha';"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="32"
+      height="32"
+    >
+      <circle cx="16" cy="16" r="16" fill="white" />
+    </mask>
+    <g mask="url(#mask0_0_12744)">
+      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
+      <mask
+        id="mask1_0_12744"
+        style="mask-type: 'alpha';"
+        maskUnits="userSpaceOnUse"
+        x="3"
+        y="16"
+        width="26"
+        height="26"
+      >
+        <circle cx="16" cy="29" r="13" fill="white" />
+      </mask>
+      <g mask="url(#mask1_0_12744)">
+        <ellipse
+          cx="16"
+          cy="17.5"
+          rx="6"
+          ry="7.5"
+          fill="#505F79"
+          fill-opacity="0.204983"
+        />
+      </g>
+    </g>
+    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
+    <defs>
+      <linearGradient
+        id="paint0_linear_0_12744"
+        x1="13.347"
+        y1="46.279"
+        x2="33.5318"
+        y2="30.8088"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#ABD229" />
+        <stop offset="1" stop-color="#9CD03F" />
+      </linearGradient>
+    </defs>
   </svg>`;
-  const fileExcel = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">\r\n  <rect width="20" height="20" rx="4" fill="#21A366"/>\r\n  <rect width="20" height="20" rx="4" fill="url(#paint0_linear_0_16081)" style="mix-blend-mode:overlay"/>\r\n  <path d="M8.00342 14.5244L10.0728 11.3062L12.1357 14.5244H14.4019L11.2217 9.73828L14.1162 5.21875H11.939L10.1108 8.2085L8.24463 5.21875H6.04834L8.93018 9.66846L5.75 14.5244H8.00342Z" fill="white"/>\r\n  <defs>\r\n    <linearGradient id="paint0_linear_0_16081" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">\r\n      <stop stop-color="white" stop-opacity="0.245559"/>\r\n      <stop offset="1" stop-opacity="0.498578"/>\r\n    </linearGradient>\r\n  </defs>\r\n</svg>';
-  const fileImage = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">\r\n  <rect width="20" height="20" rx="4" fill="#FF991F"/>\r\n  <rect width="20" height="20" rx="4" fill="url(#paint0_linear_0_16103)" style="mix-blend-mode:overlay"/>\r\n  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.90113 15C3.09595 15 2.62093 14.097 3.07709 13.4335L6.67606 8.19861C7.07341 7.62064 7.9268 7.62065 8.32414 8.19861L13.0001 15H3.90113Z" fill="white"/>\r\n  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.53962 15L12.7076 10.2481C13.1034 9.65434 13.9758 9.65434 14.3717 10.2481L16.5031 13.4453C16.9462 14.1099 16.4698 15 15.6711 15H9.53962Z" fill="white"/>\r\n  <path d="M16.0001 5.5C16.0001 6.32843 15.3285 7 14.5001 7C13.6717 7 13.0001 6.32843 13.0001 5.5C13.0001 4.67157 13.6717 4 14.5001 4C15.3285 4 16.0001 4.67157 16.0001 5.5Z" fill="white"/>\r\n  <defs>\r\n    <linearGradient id="paint0_linear_0_16103" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">\r\n      <stop stop-color="white" stop-opacity="0.245559"/>\r\n      <stop offset="1" stop-opacity="0.498578"/>\r\n    </linearGradient>\r\n  </defs>\r\n</svg>';
-  const fileOther = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">\r\n  <path fill-rule="evenodd" clip-rule="evenodd" d="M18 6.60751L11.392 -0.000488281L5 0.000113437C3.34315 0.000113437 2 1.34326 2 3.00011V17.0001C2 18.657 3.34315 20.0001 5 20.0001H15C16.6569 20.0001 18 18.657 18 17.0001V6.60751ZM17 8.00011L10 1.00011V6.00011C10 7.10468 10.8954 8.00011 12 8.00011H17Z" fill="#AABFFC"/>\r\n  <path fill-rule="evenodd" clip-rule="evenodd" d="M18 6.60751L11.392 -0.000488281L5 0.000113437C3.34315 0.000113437 2 1.34326 2 3.00011V17.0001C2 18.657 3.34315 20.0001 5 20.0001H15C16.6569 20.0001 18 18.657 18 17.0001V6.60751ZM17 8.00011L10 1.00011V6.00011C10 7.10468 10.8954 8.00011 12 8.00011H17Z" fill="url(#paint0_linear_0_16113)" style="mix-blend-mode:overlay"/>\r\n  <defs>\r\n    <linearGradient id="paint0_linear_0_16113" x1="-5.9615" y1="9.95168" x2="13.4572" y2="25.4862" gradientUnits="userSpaceOnUse">\r\n      <stop stop-color="white" stop-opacity="0.245559"/>\r\n      <stop offset="1" stop-opacity="0.498578"/>\r\n    </linearGradient>\r\n  </defs>\r\n</svg>';
-  const filePdf = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">\r\n  <rect width="20" height="20" rx="4" fill="#FF5630"/>\r\n  <rect width="20" height="20" rx="4" fill="url(#paint0_linear_0_16087)" style="mix-blend-mode:overlay"/>\r\n  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.55535 13.6488V11.0388H4.92535C5.65535 11.0388 5.93535 10.9988 6.27535 10.8688C6.97535 10.5988 7.36535 9.92876 7.36535 8.99876C7.36535 8.21876 7.07535 7.57876 6.57535 7.25876C6.27535 7.06876 5.82535 6.97876 5.09535 6.97876H2.98535V13.6488H4.55535ZM4.84535 9.90876H4.54535V8.10876H4.84535C5.51535 8.10876 5.75535 8.34876 5.75535 9.02876C5.75535 9.66876 5.51535 9.90876 4.84535 9.90876ZM11.6393 13.4388C11.2793 13.5988 10.9993 13.6488 10.4393 13.6488H8.21935V6.97876H10.2593C11.2393 6.97876 11.7193 7.11876 12.1093 7.52876C12.5993 8.02876 12.7693 8.71876 12.7693 10.1388C12.7693 10.9388 12.7093 11.6788 12.6093 12.1588C12.4893 12.7388 12.1193 13.2188 11.6393 13.4388ZM10.0793 12.5188H9.79935V8.10876H10.0193C10.9713 8.10876 11.1466 8.35839 11.1586 9.95112L11.1593 10.1488C11.1593 12.2088 11.0193 12.5188 10.0793 12.5188ZM15.3333 10.8188V13.6488H13.7533V6.97876H17.6033V8.23876H15.3333V9.58876H17.4433V10.8188H15.3333Z" fill="white"/>\r\n  <defs>\r\n    <linearGradient id="paint0_linear_0_16087" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">\r\n      <stop stop-color="white" stop-opacity="0.245559"/>\r\n      <stop offset="1" stop-opacity="0.498578"/>\r\n    </linearGradient>\r\n  </defs>\r\n</svg>';
-  const fileWord = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">\r\n  <rect width="20" height="20" rx="4" fill="#2C7CD3"/>\r\n  <rect width="20" height="20" rx="4" fill="url(#paint0_linear_0_16075)" style="mix-blend-mode:overlay"/>\r\n  <path d="M8.0542 14.9946L9.90137 8.0376L11.7549 14.9946H13.748L16.0078 5.68896H14.1162L12.688 12.189L11.0566 5.68896H8.82227L7.12109 12.0811L5.71826 5.68896H3.79492L6.0166 14.9946H8.0542Z" fill="white"/>\r\n  <defs>\r\n    <linearGradient id="paint0_linear_0_16075" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">\r\n      <stop stop-color="white" stop-opacity="0.245559"/>\r\n      <stop offset="1" stop-opacity="0.498578"/>\r\n    </linearGradient>\r\n  </defs>\r\n</svg>';
-  const fileXml = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">\r\n  <rect width="20" height="20" rx="4" fill="#FF991F"/>\r\n  <rect width="20" height="20" rx="4" fill="url(#paint0_linear_2163_24057)" style="mix-blend-mode:overlay"/>\r\n  <path d="M1.97561 5.99658L3.56111 9.43008L1.84961 13.0001H3.66611L4.21211 11.6771C4.40111 11.0996 4.45361 10.8791 4.49561 10.6166H4.52711C4.54811 10.8686 4.61111 11.1101 4.77911 11.5826L5.34611 13.0001H7.20461L5.49311 9.44058L7.07861 5.99658H5.28311L4.86311 7.06758C4.85261 7.08858 4.83161 7.16208 4.80011 7.25658C4.75811 7.44558 4.70561 7.63458 4.65311 7.82358C4.60061 8.02308 4.57961 8.10708 4.56911 8.23308H4.52711C4.49561 8.02308 4.43261 7.78158 4.27511 7.23558L3.82361 5.99658H1.97561Z" fill="white"/>\r\n  <path d="M7.53437 5.99658V13.0001H9.05687V9.78708L9.02537 9.34608L8.98337 8.41158C8.98337 8.33808 8.96237 8.00208 8.92037 7.47708H8.98337C9.05687 7.90758 9.10937 8.21208 9.18287 8.53758C9.24587 8.87358 9.34037 9.28308 9.44537 9.77658L10.1804 13.0001H11.3984L12.1544 9.59808C12.2909 8.98908 12.5324 7.79208 12.5744 7.47708H12.6374C12.6059 7.80258 12.5849 8.01258 12.5744 8.22258L12.5534 8.98908C12.5429 9.25158 12.5324 9.52458 12.5219 9.80808V13.0001H14.0444V5.99658H11.6714L11.2409 8.10708C11.0834 8.74758 10.8419 10.3751 10.8419 10.8161L10.7999 10.8266C10.7894 10.2911 10.5269 8.61108 10.3274 7.85508L9.92837 5.99658H7.53437Z" fill="white"/>\r\n  <path d="M14.8685 5.99658V13.0001H18.89V11.6666H16.5275V5.99658H14.8685Z" fill="white"/>\r\n  <defs>\r\n    <linearGradient id="paint0_linear_2163_24057" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">\r\n      <stop stop-color="white" stop-opacity="0.245559"/>\r\n      <stop offset="1" stop-opacity="0.498578"/>\r\n    </linearGradient>\r\n  </defs>\r\n</svg>';
-  const fileZip = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">\r\n  <g clip-path="url(#clip0_922_22603)">\r\n    <path d="M16 0H4C1.79086 0 0 1.79086 0 4V16C0 18.2091 1.79086 20 4 20H16C18.2091 20 20 18.2091 20 16V4C20 1.79086 18.2091 0 16 0Z" fill="#A1D237"/>\r\n    <path d="M16 0H4C1.79086 0 0 1.79086 0 4V16C0 18.2091 1.79086 20 4 20H16C18.2091 20 20 18.2091 20 16V4C20 1.79086 18.2091 0 16 0Z" fill="url(#paint0_linear_922_22603)" style="mix-blend-mode:overlay"/>\r\n    <path d="M8.32086 14V12.6807H6.32086C5.92513 12.6807 5.72193 12.6927 5.58289 12.7166C5.64706 12.6207 5.68984 12.5367 5.73262 12.4528C5.7861 12.3568 5.83957 12.2609 5.89305 12.1529L8.28877 7.22339V6H4.17112V7.31934H6.20321C6.39572 7.31934 6.59893 7.30735 6.69519 7.29535C6.58824 7.47526 6.49198 7.65517 6.41711 7.81109L4 12.8246V14H8.32086ZM10.4813 14V6H9.03743V14H10.4813ZM12.9519 14V10.8096H13.4439C14.2139 10.8096 14.5241 10.7616 14.877 10.6057C15.5936 10.2699 16 9.47826 16 8.38681C16 7.45127 15.6898 6.69565 15.1444 6.32384C14.8342 6.09595 14.3743 6 13.6364 6H11.508V14H12.9519ZM13.4118 9.6102H12.9519V7.1994H13.3797C13.7219 7.1994 13.9679 7.24738 14.107 7.34333C14.385 7.53523 14.5241 7.87106 14.5241 8.38681C14.5241 8.91454 14.4064 9.25037 14.1497 9.44228C13.9893 9.57421 13.8075 9.6102 13.4118 9.6102Z" fill="white"/>\r\n  </g>\r\n  <defs>\r\n    <linearGradient id="paint0_linear_922_22603" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">\r\n      <stop stop-color="white" stop-opacity="0.245559"/>\r\n      <stop offset="1" stop-opacity="0.498578"/>\r\n    </linearGradient>\r\n    <clipPath id="clip0_922_22603">\r\n      <rect width="20" height="20" fill="white"/>\r\n    </clipPath>\r\n  </defs>\r\n</svg>';
+  const fileExcel = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">\n  <rect width="20" height="20" rx="4" fill="#21A366"/>\n  <rect width="20" height="20" rx="4" fill="url(#paint0_linear_0_16081)" style="mix-blend-mode:overlay"/>\n  <path d="M8.00342 14.5244L10.0728 11.3062L12.1357 14.5244H14.4019L11.2217 9.73828L14.1162 5.21875H11.939L10.1108 8.2085L8.24463 5.21875H6.04834L8.93018 9.66846L5.75 14.5244H8.00342Z" fill="white"/>\n  <defs>\n    <linearGradient id="paint0_linear_0_16081" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">\n      <stop stop-color="white" stop-opacity="0.245559"/>\n      <stop offset="1" stop-opacity="0.498578"/>\n    </linearGradient>\n  </defs>\n</svg>';
+  const fileImage = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">\n  <rect width="20" height="20" rx="4" fill="#FF991F"/>\n  <rect width="20" height="20" rx="4" fill="url(#paint0_linear_0_16103)" style="mix-blend-mode:overlay"/>\n  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.90113 15C3.09595 15 2.62093 14.097 3.07709 13.4335L6.67606 8.19861C7.07341 7.62064 7.9268 7.62065 8.32414 8.19861L13.0001 15H3.90113Z" fill="white"/>\n  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.53962 15L12.7076 10.2481C13.1034 9.65434 13.9758 9.65434 14.3717 10.2481L16.5031 13.4453C16.9462 14.1099 16.4698 15 15.6711 15H9.53962Z" fill="white"/>\n  <path d="M16.0001 5.5C16.0001 6.32843 15.3285 7 14.5001 7C13.6717 7 13.0001 6.32843 13.0001 5.5C13.0001 4.67157 13.6717 4 14.5001 4C15.3285 4 16.0001 4.67157 16.0001 5.5Z" fill="white"/>\n  <defs>\n    <linearGradient id="paint0_linear_0_16103" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">\n      <stop stop-color="white" stop-opacity="0.245559"/>\n      <stop offset="1" stop-opacity="0.498578"/>\n    </linearGradient>\n  </defs>\n</svg>';
+  const fileOther = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">\n  <path fill-rule="evenodd" clip-rule="evenodd" d="M18 6.60751L11.392 -0.000488281L5 0.000113437C3.34315 0.000113437 2 1.34326 2 3.00011V17.0001C2 18.657 3.34315 20.0001 5 20.0001H15C16.6569 20.0001 18 18.657 18 17.0001V6.60751ZM17 8.00011L10 1.00011V6.00011C10 7.10468 10.8954 8.00011 12 8.00011H17Z" fill="#AABFFC"/>\n  <path fill-rule="evenodd" clip-rule="evenodd" d="M18 6.60751L11.392 -0.000488281L5 0.000113437C3.34315 0.000113437 2 1.34326 2 3.00011V17.0001C2 18.657 3.34315 20.0001 5 20.0001H15C16.6569 20.0001 18 18.657 18 17.0001V6.60751ZM17 8.00011L10 1.00011V6.00011C10 7.10468 10.8954 8.00011 12 8.00011H17Z" fill="url(#paint0_linear_0_16113)" style="mix-blend-mode:overlay"/>\n  <defs>\n    <linearGradient id="paint0_linear_0_16113" x1="-5.9615" y1="9.95168" x2="13.4572" y2="25.4862" gradientUnits="userSpaceOnUse">\n      <stop stop-color="white" stop-opacity="0.245559"/>\n      <stop offset="1" stop-opacity="0.498578"/>\n    </linearGradient>\n  </defs>\n</svg>';
+  const filePdf = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">\n  <rect width="20" height="20" rx="4" fill="#FF5630"/>\n  <rect width="20" height="20" rx="4" fill="url(#paint0_linear_0_16087)" style="mix-blend-mode:overlay"/>\n  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.55535 13.6488V11.0388H4.92535C5.65535 11.0388 5.93535 10.9988 6.27535 10.8688C6.97535 10.5988 7.36535 9.92876 7.36535 8.99876C7.36535 8.21876 7.07535 7.57876 6.57535 7.25876C6.27535 7.06876 5.82535 6.97876 5.09535 6.97876H2.98535V13.6488H4.55535ZM4.84535 9.90876H4.54535V8.10876H4.84535C5.51535 8.10876 5.75535 8.34876 5.75535 9.02876C5.75535 9.66876 5.51535 9.90876 4.84535 9.90876ZM11.6393 13.4388C11.2793 13.5988 10.9993 13.6488 10.4393 13.6488H8.21935V6.97876H10.2593C11.2393 6.97876 11.7193 7.11876 12.1093 7.52876C12.5993 8.02876 12.7693 8.71876 12.7693 10.1388C12.7693 10.9388 12.7093 11.6788 12.6093 12.1588C12.4893 12.7388 12.1193 13.2188 11.6393 13.4388ZM10.0793 12.5188H9.79935V8.10876H10.0193C10.9713 8.10876 11.1466 8.35839 11.1586 9.95112L11.1593 10.1488C11.1593 12.2088 11.0193 12.5188 10.0793 12.5188ZM15.3333 10.8188V13.6488H13.7533V6.97876H17.6033V8.23876H15.3333V9.58876H17.4433V10.8188H15.3333Z" fill="white"/>\n  <defs>\n    <linearGradient id="paint0_linear_0_16087" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">\n      <stop stop-color="white" stop-opacity="0.245559"/>\n      <stop offset="1" stop-opacity="0.498578"/>\n    </linearGradient>\n  </defs>\n</svg>';
+  const fileWord = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">\n  <rect width="20" height="20" rx="4" fill="#2C7CD3"/>\n  <rect width="20" height="20" rx="4" fill="url(#paint0_linear_0_16075)" style="mix-blend-mode:overlay"/>\n  <path d="M8.0542 14.9946L9.90137 8.0376L11.7549 14.9946H13.748L16.0078 5.68896H14.1162L12.688 12.189L11.0566 5.68896H8.82227L7.12109 12.0811L5.71826 5.68896H3.79492L6.0166 14.9946H8.0542Z" fill="white"/>\n  <defs>\n    <linearGradient id="paint0_linear_0_16075" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">\n      <stop stop-color="white" stop-opacity="0.245559"/>\n      <stop offset="1" stop-opacity="0.498578"/>\n    </linearGradient>\n  </defs>\n</svg>';
+  const fileXml = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">\n  <rect width="20" height="20" rx="4" fill="#FF991F"/>\n  <rect width="20" height="20" rx="4" fill="url(#paint0_linear_2163_24057)" style="mix-blend-mode:overlay"/>\n  <path d="M1.97561 5.99658L3.56111 9.43008L1.84961 13.0001H3.66611L4.21211 11.6771C4.40111 11.0996 4.45361 10.8791 4.49561 10.6166H4.52711C4.54811 10.8686 4.61111 11.1101 4.77911 11.5826L5.34611 13.0001H7.20461L5.49311 9.44058L7.07861 5.99658H5.28311L4.86311 7.06758C4.85261 7.08858 4.83161 7.16208 4.80011 7.25658C4.75811 7.44558 4.70561 7.63458 4.65311 7.82358C4.60061 8.02308 4.57961 8.10708 4.56911 8.23308H4.52711C4.49561 8.02308 4.43261 7.78158 4.27511 7.23558L3.82361 5.99658H1.97561Z" fill="white"/>\n  <path d="M7.53437 5.99658V13.0001H9.05687V9.78708L9.02537 9.34608L8.98337 8.41158C8.98337 8.33808 8.96237 8.00208 8.92037 7.47708H8.98337C9.05687 7.90758 9.10937 8.21208 9.18287 8.53758C9.24587 8.87358 9.34037 9.28308 9.44537 9.77658L10.1804 13.0001H11.3984L12.1544 9.59808C12.2909 8.98908 12.5324 7.79208 12.5744 7.47708H12.6374C12.6059 7.80258 12.5849 8.01258 12.5744 8.22258L12.5534 8.98908C12.5429 9.25158 12.5324 9.52458 12.5219 9.80808V13.0001H14.0444V5.99658H11.6714L11.2409 8.10708C11.0834 8.74758 10.8419 10.3751 10.8419 10.8161L10.7999 10.8266C10.7894 10.2911 10.5269 8.61108 10.3274 7.85508L9.92837 5.99658H7.53437Z" fill="white"/>\n  <path d="M14.8685 5.99658V13.0001H18.89V11.6666H16.5275V5.99658H14.8685Z" fill="white"/>\n  <defs>\n    <linearGradient id="paint0_linear_2163_24057" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">\n      <stop stop-color="white" stop-opacity="0.245559"/>\n      <stop offset="1" stop-opacity="0.498578"/>\n    </linearGradient>\n  </defs>\n</svg>';
+  const fileZip = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20" fill="none">\n  <g clip-path="url(#clip0_922_22603)">\n    <path d="M16 0H4C1.79086 0 0 1.79086 0 4V16C0 18.2091 1.79086 20 4 20H16C18.2091 20 20 18.2091 20 16V4C20 1.79086 18.2091 0 16 0Z" fill="#A1D237"/>\n    <path d="M16 0H4C1.79086 0 0 1.79086 0 4V16C0 18.2091 1.79086 20 4 20H16C18.2091 20 20 18.2091 20 16V4C20 1.79086 18.2091 0 16 0Z" fill="url(#paint0_linear_922_22603)" style="mix-blend-mode:overlay"/>\n    <path d="M8.32086 14V12.6807H6.32086C5.92513 12.6807 5.72193 12.6927 5.58289 12.7166C5.64706 12.6207 5.68984 12.5367 5.73262 12.4528C5.7861 12.3568 5.83957 12.2609 5.89305 12.1529L8.28877 7.22339V6H4.17112V7.31934H6.20321C6.39572 7.31934 6.59893 7.30735 6.69519 7.29535C6.58824 7.47526 6.49198 7.65517 6.41711 7.81109L4 12.8246V14H8.32086ZM10.4813 14V6H9.03743V14H10.4813ZM12.9519 14V10.8096H13.4439C14.2139 10.8096 14.5241 10.7616 14.877 10.6057C15.5936 10.2699 16 9.47826 16 8.38681C16 7.45127 15.6898 6.69565 15.1444 6.32384C14.8342 6.09595 14.3743 6 13.6364 6H11.508V14H12.9519ZM13.4118 9.6102H12.9519V7.1994H13.3797C13.7219 7.1994 13.9679 7.24738 14.107 7.34333C14.385 7.53523 14.5241 7.87106 14.5241 8.38681C14.5241 8.91454 14.4064 9.25037 14.1497 9.44228C13.9893 9.57421 13.8075 9.6102 13.4118 9.6102Z" fill="white"/>\n  </g>\n  <defs>\n    <linearGradient id="paint0_linear_922_22603" x1="-9.95187" y1="9.95187" x2="9.95187" y2="29.8556" gradientUnits="userSpaceOnUse">\n      <stop stop-color="white" stop-opacity="0.245559"/>\n      <stop offset="1" stop-opacity="0.498578"/>\n    </linearGradient>\n    <clipPath id="clip0_922_22603">\n      <rect width="20" height="20" fill="white"/>\n    </clipPath>\n  </defs>\n</svg>';
   var complexIcons = {
     avatar: avatarGreen,
     "file-excel": fileExcel,
@@ -6732,7 +6740,7 @@
     "file-xml": fileXml,
     "file-zip": fileZip
   };
-  function _define_property$13(obj, key, value) {
+  function _define_property$16(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -6745,7 +6753,7 @@
     }
     return obj;
   }
-  function _object_spread$11(target) {
+  function _object_spread$14(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
       var ownKeys2 = Object.keys(source);
@@ -6755,7 +6763,7 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$13(target, key, source[key]);
+        _define_property$16(target, key, source[key]);
       });
     }
     return target;
@@ -6764,7 +6772,7 @@
     var type = param.type;
     var theme = React.useContext(ThemeContext).theme;
     var icons = React.useMemo(function() {
-      return _object_spread$11({}, complexIcons, theme.complexIcons);
+      return _object_spread$14({}, complexIcons, theme.complexIcons);
     }, []);
     var ComplexIcon = icons[type];
     return /* @__PURE__ */ jsx("div", {
@@ -7635,7 +7643,7 @@
       ]
     }
   });
-  function _define_property$12(obj, key, value) {
+  function _define_property$15(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -7648,7 +7656,7 @@
     }
     return obj;
   }
-  function _object_spread$10(target) {
+  function _object_spread$13(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
       var ownKeys2 = Object.keys(source);
@@ -7658,12 +7666,12 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$12(target, key, source[key]);
+        _define_property$15(target, key, source[key]);
       });
     }
     return target;
   }
-  function ownKeys$T(object, enumerableOnly) {
+  function ownKeys$W(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -7676,12 +7684,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$T(target, source) {
+  function _object_spread_props$W(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$T(Object(source)).forEach(function(key) {
+      ownKeys$W(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -7692,7 +7700,7 @@
     var _icon_paths, _icon_rects, _icon_circles;
     var theme = React.useContext(ThemeContext).theme;
     var icons = React.useMemo(function() {
-      return _object_spread$10({}, iconsList, theme.icons);
+      return _object_spread$13({}, iconsList, theme.icons);
     }, []);
     var icon = icons[type];
     var _icon_viewBox;
@@ -7705,7 +7713,7 @@
       children: [
         (_icon_paths = icon.paths) === null || _icon_paths === void 0 ? void 0 : _icon_paths.map(function(path, index) {
           var _path_fill, _path_stroke;
-          return jsx("path", _object_spread$10({
+          return jsx("path", _object_spread$13({
             fillRule: "evenodd",
             clipRule: "evenodd",
             fill: (_path_fill = path.fill) !== null && _path_fill !== void 0 ? _path_fill : "currentColor",
@@ -7713,25 +7721,25 @@
           }, path), index);
         }),
         (_icon_rects = icon.rects) === null || _icon_rects === void 0 ? void 0 : _icon_rects.map(function(rect, index) {
-          return /* @__PURE__ */ React.createElement("rect", _object_spread_props$T(_object_spread$10({}, rect), {
+          return /* @__PURE__ */ React.createElement("rect", _object_spread_props$W(_object_spread$13({}, rect), {
             key: index
           }));
         }),
         (_icon_circles = icon.circles) === null || _icon_circles === void 0 ? void 0 : _icon_circles.map(function(circle, index) {
-          return /* @__PURE__ */ React.createElement("circle", _object_spread_props$T(_object_spread$10({}, circle), {
+          return /* @__PURE__ */ React.createElement("circle", _object_spread_props$W(_object_spread$13({}, circle), {
             key: index
           }));
         })
       ]
     });
   };
-  var useStyles$V = createThemedStyles("Icon", {
+  var useStyles$X = createThemedStyles("Icon", {
     root: {
       display: "flex",
       alignItems: "center"
     }
   });
-  function _define_property$11(obj, key, value) {
+  function _define_property$14(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -7744,7 +7752,7 @@
     }
     return obj;
   }
-  function _object_spread$$(target) {
+  function _object_spread$12(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
       var ownKeys2 = Object.keys(source);
@@ -7754,12 +7762,12 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$11(target, key, source[key]);
+        _define_property$14(target, key, source[key]);
       });
     }
     return target;
   }
-  function ownKeys$S(object, enumerableOnly) {
+  function ownKeys$V(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -7772,12 +7780,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$S(target, source) {
+  function _object_spread_props$V(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$S(Object(source)).forEach(function(key) {
+      ownKeys$V(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -7785,10 +7793,10 @@
   }
   var Icon = function(param) {
     var type = param.type, data = param.data, testId = param.testId, tweakStyles = param.tweakStyles;
-    var classes = useStyles$V({
+    var classes = useStyles$X({
       theme: tweakStyles
     });
-    return /* @__PURE__ */ jsx("div", _object_spread_props$S(_object_spread$$({
+    return /* @__PURE__ */ jsx("div", _object_spread_props$V(_object_spread$12({
       className: classes.root
     }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)), {
       children: isComplexIcon(type) ? /* @__PURE__ */ jsx(ComplexIconBoilerplate, {
@@ -7804,15 +7812,7 @@
     }) : icon;
   };
   var DEFAULT_OFFSET = 6;
-  var minWidthRelativeToTrigger = react.size({
-    apply: function apply2(param) {
-      var rects = param.rects, elements = param.elements;
-      Object.assign(elements.floating.style, {
-        minWidth: "".concat(rects.reference.width, "px")
-      });
-    }
-  });
-  var useStyles$U = createThemedStyles("WithPopup", {
+  var useStyles$W = createThemedStyles("WithPopup", {
     trigger: {
       width: "fit-content"
     },
@@ -7827,7 +7827,6 @@
       zIndex: 5,
       outline: "none"
     },
-    arrow: {},
     animationEnd: {},
     animationStart: {},
     "dropdown-initial": {
@@ -7859,7 +7858,7 @@
     if (Array.isArray(arr))
       return _array_like_to_array$m(arr);
   }
-  function _define_property$10(obj, key, value) {
+  function _define_property$13(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -7910,7 +7909,7 @@
   function _non_iterable_spread$7() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
-  function _object_spread$_(target) {
+  function _object_spread$11(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
       var ownKeys2 = Object.keys(source);
@@ -7920,12 +7919,12 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$10(target, key, source[key]);
+        _define_property$13(target, key, source[key]);
       });
     }
     return target;
   }
-  function ownKeys$R(object, enumerableOnly) {
+  function ownKeys$U(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -7938,12 +7937,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$R(target, source) {
+  function _object_spread_props$U(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$R(Object(source)).forEach(function(key) {
+      ownKeys$U(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -7969,12 +7968,11 @@
       return _array_like_to_array$m(o, minLen);
   }
   var WithPopup = function(param) {
-    var trigger = param.trigger, children = param.children, _param_middlewares = param.middlewares, middlewares = _param_middlewares === void 0 ? [] : _param_middlewares, _param_eventType = param.eventType, eventType = _param_eventType === void 0 ? "click" : _param_eventType, _param_placement = param.placement, placement = _param_placement === void 0 ? eventType === "click" ? "bottom-end" : "top" : _param_placement, _param_hoverDelay = param.hoverDelay, hoverDelay = _param_hoverDelay === void 0 ? 0 : _param_hoverDelay, _param_popupOffset = param.popupOffset, popupOffset = _param_popupOffset === void 0 ? DEFAULT_OFFSET : _param_popupOffset, arrowProps = param.arrowProps, popupData = param.popupData, _param_shouldStopPropagation = param.shouldStopPropagation, shouldStopPropagation = _param_shouldStopPropagation === void 0 ? eventType === "click" : _param_shouldStopPropagation, _param_shouldHideOnScroll = param.shouldHideOnScroll, shouldHideOnScroll = _param_shouldHideOnScroll === void 0 ? false : _param_shouldHideOnScroll, _param_shouldRenderInBody = param.shouldRenderInBody, shouldRenderInBody = _param_shouldRenderInBody === void 0 ? true : _param_shouldRenderInBody, _param_canBeFlipped = param.canBeFlipped, canBeFlipped = _param_canBeFlipped === void 0 ? true : _param_canBeFlipped, _param_isTriggerWrapped = param.isTriggerWrapped, isTriggerWrapped = _param_isTriggerWrapped === void 0 ? eventType === "hover" : _param_isTriggerWrapped, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_shouldShowArrow = param.shouldShowArrow, shouldShowArrow = _param_shouldShowArrow === void 0 ? false : _param_shouldShowArrow, _param_isMinWidthSameAsTrigger = param.isMinWidthSameAsTrigger, isMinWidthSameAsTrigger = _param_isMinWidthSameAsTrigger === void 0 ? false : _param_isMinWidthSameAsTrigger, tweakStyles = param.tweakStyles, data = param.data, testId = param.testId, onToggle = param.onToggle;
-    var classes = useStyles$U({
+    var trigger = param.trigger, children = param.children, _param_middlewares = param.middlewares, middlewares = _param_middlewares === void 0 ? [] : _param_middlewares, _param_eventType = param.eventType, eventType = _param_eventType === void 0 ? "click" : _param_eventType, _param_placement = param.placement, placement = _param_placement === void 0 ? eventType === "click" ? "bottom-end" : "top" : _param_placement, _param_hoverDelay = param.hoverDelay, hoverDelay = _param_hoverDelay === void 0 ? 0 : _param_hoverDelay, _param_popupOffset = param.popupOffset, popupOffset = _param_popupOffset === void 0 ? DEFAULT_OFFSET : _param_popupOffset, _param_shouldStopPropagation = param.shouldStopPropagation, shouldStopPropagation = _param_shouldStopPropagation === void 0 ? true : _param_shouldStopPropagation, _param_shouldHideOnScroll = param.shouldHideOnScroll, shouldHideOnScroll = _param_shouldHideOnScroll === void 0 ? false : _param_shouldHideOnScroll, _param_shouldRenderInBody = param.shouldRenderInBody, shouldRenderInBody = _param_shouldRenderInBody === void 0 ? true : _param_shouldRenderInBody, _param_canBeFlipped = param.canBeFlipped, canBeFlipped = _param_canBeFlipped === void 0 ? true : _param_canBeFlipped, _param_isTriggerWrapped = param.isTriggerWrapped, isTriggerWrapped = _param_isTriggerWrapped === void 0 ? eventType === "hover" : _param_isTriggerWrapped, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, tweakStyles = param.tweakStyles, data = param.data, testId = param.testId, onToggle = param.onToggle;
+    var classes = useStyles$W({
       theme: tweakStyles
     });
     var _useState = _sliced_to_array$m(React.useState(false), 2), isOpen = _useState[0], setIsOpen = _useState[1];
-    var arrowRef = React.useRef(null);
     var handleToggle = function(isActive, event) {
       event === null || event === void 0 ? void 0 : event.stopPropagation();
       if (!isDisabled) {
@@ -7991,13 +7989,8 @@
         react.offset(popupOffset),
         canBeFlipped && react.flip({
           fallbackAxisSideDirection: "start"
-        }),
-        isMinWidthSameAsTrigger && minWidthRelativeToTrigger
-      ].concat(_to_consumable_array$7(middlewares), [
-        shouldShowArrow && react.arrow({
-          element: arrowRef
         })
-      ]),
+      ].concat(_to_consumable_array$7(middlewares)),
       whileElementsMounted: react.autoUpdate,
       placement,
       onOpenChange: handleToggle
@@ -8031,17 +8024,17 @@
         close: 500
       }
     }), isMounted = _useTransitionStatus.isMounted, status = _useTransitionStatus.status;
-    var referenceProps = getReferenceProps(_object_spread$_({
+    var referenceProps = getReferenceProps(_object_spread$11({
       ref: refs.setReference
     }, shouldStopPropagation && {
       onClick: trueReactPlatformHelpers.stopPropagation
     }));
     var triggerElement = trueReactPlatformHelpers.applyAction(trigger, {
       referenceProps: !isTriggerWrapped ? referenceProps : void 0,
-      triggerProps: _object_spread$_({
+      triggerProps: _object_spread$11({
         isActive: isOpen,
         isDisabled
-      }, !isTriggerWrapped && _object_spread$_({
+      }, !isTriggerWrapped && _object_spread$11({
         data,
         testId
       }, referenceProps))
@@ -8049,31 +8042,23 @@
     var _obj2;
     return /* @__PURE__ */ jsxs(Fragment, {
       children: [
-        isTriggerWrapped ? /* @__PURE__ */ jsx("div", _object_spread_props$R(_object_spread$_({
-          className: clsx(classes.trigger, (_obj2 = {}, _define_property$10(_obj2, classes.clickable, eventType === "click"), _define_property$10(_obj2, classes.disabled, isDisabled), _define_property$10(_obj2, classes.active, isOpen), _obj2))
-        }, referenceProps, trueReactPlatformHelpers.addDataAttributes(data, testId)), {
+        isTriggerWrapped ? /* @__PURE__ */ jsx("div", _object_spread_props$U(_object_spread$11({
+          className: clsx(classes.trigger, (_obj2 = {}, _define_property$13(_obj2, classes.clickable, eventType === "click"), _define_property$13(_obj2, classes.disabled, isDisabled), _define_property$13(_obj2, classes.active, isOpen), _obj2))
+        }, referenceProps, trueReactPlatformHelpers.addDataTestId(testId), trueReactPlatformHelpers.addDataAttributes(data)), {
           children: triggerElement
         })) : triggerElement,
         isMounted && /* @__PURE__ */ jsx(react.FloatingPortal, {
-          root: shouldRenderInBody ? document.body : refs.reference.current,
-          children: /* @__PURE__ */ jsx("div", _object_spread_props$R(_object_spread$_({
-            ref: refs.setFloating,
+          root: !shouldRenderInBody ? refs.reference.current : void 0,
+          children: /* @__PURE__ */ jsx("div", _object_spread_props$U(_object_spread$11({
             style: floatingStyles,
-            className: classes.popup
-          }, getFloatingProps(), trueReactPlatformHelpers.addDataAttributes(popupData)), {
-            children: /* @__PURE__ */ jsxs("div", {
+            className: classes.popup,
+            ref: refs.setFloating
+          }, getFloatingProps()), {
+            children: /* @__PURE__ */ jsx("div", {
               className: classes["dropdown-".concat(status)],
-              children: [
-                shouldShowArrow && /* @__PURE__ */ jsx(react.FloatingArrow, _object_spread_props$R(_object_spread$_({}, arrowProps), {
-                  ref: arrowRef,
-                  context,
-                  className: classes.arrow
-                })),
-                trueReactPlatformHelpers.applyAction(children, {
-                  floatingContext: context,
-                  onClose: handleClose
-                })
-              ]
+              children: trueReactPlatformHelpers.applyAction(children, {
+                onClose: handleClose
+              })
             })
           }))
         })
@@ -8083,7 +8068,7 @@
   var ITEM_HORIZONTAL_PADDING = 16;
   var ICON_SIZE$1 = 20;
   var ICON_GAP = 12;
-  var useStyles$T = createThemedStyles("ListItem", {
+  var useStyles$V = createThemedStyles("ListItem", {
     root: {
       display: "flex",
       alignItems: "center",
@@ -8122,7 +8107,7 @@
       flexGrow: 1
     }
   });
-  function _define_property$$(obj, key, value) {
+  function _define_property$12(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -8135,7 +8120,7 @@
     }
     return obj;
   }
-  function _object_spread$Z(target) {
+  function _object_spread$10(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
       var ownKeys2 = Object.keys(source);
@@ -8145,12 +8130,12 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$$(target, key, source[key]);
+        _define_property$12(target, key, source[key]);
       });
     }
     return target;
   }
-  function ownKeys$Q(object, enumerableOnly) {
+  function ownKeys$T(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -8163,12 +8148,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$Q(target, source) {
+  function _object_spread_props$T(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$Q(Object(source)).forEach(function(key) {
+      ownKeys$T(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -8176,7 +8161,7 @@
   }
   var ListItem = function(param) {
     var icon = param.icon, item = param.item, nestedItems = param.nestedItems, isDisabled = param.disabled, isFocused = param.isFocused, shouldDrawSpacerAbove = param.shouldDrawSpacerAbove, shouldDrawSpacerBelow = param.shouldDrawSpacerBelow, testId = param.testId, tweakStyles = param.tweakStyles, _param_view = param.view, view = _param_view === void 0 ? "default" : _param_view, withIconGap = param.withIconGap, data = param.data, onClick = param.onClick;
-    var classes = useStyles$T({
+    var classes = useStyles$V({
       theme: tweakStyles
     });
     var _obj2;
@@ -8185,9 +8170,9 @@
         shouldDrawSpacerAbove && /* @__PURE__ */ jsx("div", {
           className: classes.spacer
         }),
-        /* @__PURE__ */ jsxs("div", _object_spread_props$Q(_object_spread$Z({
-          className: clsx(classes.root, classes[view], (_obj2 = {}, _define_property$$(_obj2, classes.disabledItem, isDisabled), _define_property$$(_obj2, classes.withIconGap, withIconGap), _define_property$$(_obj2, classes.focused, isFocused), _obj2))
-        }, trueReactPlatformHelpers.addClickHandler(onClick, !isDisabled), trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(_object_spread_props$Q(_object_spread$Z({}, data), {
+        /* @__PURE__ */ jsxs("div", _object_spread_props$T(_object_spread$10({
+          className: clsx(classes.root, classes[view], (_obj2 = {}, _define_property$12(_obj2, classes.disabledItem, isDisabled), _define_property$12(_obj2, classes.withIconGap, withIconGap), _define_property$12(_obj2, classes.focused, isFocused), _obj2))
+        }, trueReactPlatformHelpers.addClickHandler(onClick, !isDisabled), trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(_object_spread_props$T(_object_spread$10({}, data), {
           disabled: isDisabled ? true : void 0
         }))), {
           children: [
@@ -8213,7 +8198,7 @@
       ]
     });
   };
-  var useStyles$S = createThemedStyles("List", {
+  var useStyles$U = createThemedStyles("List", {
     root: {
       minWidth: 180,
       backgroundColor: colors.CLASSIC_WHITE,
@@ -8229,12 +8214,12 @@
       paddingLeft: 4
     }
   });
-  var withPopupStyles$1 = {
+  var withPopupStyles = {
     trigger: {
       width: "100%"
     }
   };
-  function _define_property$_(obj, key, value) {
+  function _define_property$11(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -8247,7 +8232,7 @@
     }
     return obj;
   }
-  function _object_spread$Y(target) {
+  function _object_spread$$(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
       var ownKeys2 = Object.keys(source);
@@ -8257,12 +8242,12 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$_(target, key, source[key]);
+        _define_property$11(target, key, source[key]);
       });
     }
     return target;
   }
-  function ownKeys$P(object, enumerableOnly) {
+  function ownKeys$S(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -8275,12 +8260,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$P(target, source) {
+  function _object_spread_props$S(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$P(Object(source)).forEach(function(key) {
+      ownKeys$S(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -8288,7 +8273,7 @@
   }
   var List = function(param) {
     var items = param.items, testId = param.testId, data = param.data, tweakStyles = param.tweakStyles, onClick = param.onClick;
-    var classes = useStyles$S({
+    var classes = useStyles$U({
       theme: tweakStyles
     });
     var handleItemClick = function(event, param2) {
@@ -8298,11 +8283,11 @@
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
       }
     };
-    return /* @__PURE__ */ jsx("div", _object_spread_props$P(_object_spread$Y({
+    return /* @__PURE__ */ jsx("div", _object_spread_props$S(_object_spread$$({
       className: classes.root
     }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)), {
       children: items.map(function(item, i) {
-        var itemProps = _object_spread_props$P(_object_spread$Y({
+        var itemProps = _object_spread_props$S(_object_spread$$({
           testId: trueReactPlatformHelpers.getTestId(testId, "item-".concat(i))
         }, item), {
           shouldDrawSpacerAbove: item.shouldDrawSpacerAbove && i !== 0,
@@ -8314,13 +8299,13 @@
         return /* @__PURE__ */ jsx(React.Fragment, {
           children: trueReactPlatformHelpers.isArrayNotEmpty(item.nestedItems) ? /* @__PURE__ */ jsx(WithPopup, {
             eventType: "hover",
-            tweakStyles: withPopupStyles$1,
+            tweakStyles: withPopupStyles,
             placement: "right-start",
             popupOffset: 0,
             shouldRenderInBody: false,
             trigger: function(param2) {
               var triggerProps = param2.triggerProps;
-              return /* @__PURE__ */ jsx(ListItem, _object_spread_props$P(_object_spread$Y({}, itemProps), {
+              return /* @__PURE__ */ jsx(ListItem, _object_spread_props$S(_object_spread$$({}, itemProps), {
                 isFocused: triggerProps.isActive
               }));
             },
@@ -8331,13 +8316,13 @@
                 onClick
               })
             })
-          }) : /* @__PURE__ */ jsx(ListItem, _object_spread$Y({}, itemProps))
+          }) : /* @__PURE__ */ jsx(ListItem, _object_spread$$({}, itemProps))
         }, i);
       })
     }));
   };
   var ANIMATION_TIMEOUT = 150;
-  function _define_property$Z(obj, key, value) {
+  function _define_property$10(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -8350,7 +8335,7 @@
     }
     return obj;
   }
-  function _object_spread$X(target) {
+  function _object_spread$_(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
       var ownKeys2 = Object.keys(source);
@@ -8360,12 +8345,12 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$Z(target, key, source[key]);
+        _define_property$10(target, key, source[key]);
       });
     }
     return target;
   }
-  var useStyles$R = createThemedStyles("AccountInfo", _object_spread$X({
+  var useStyles$T = createThemedStyles("AccountInfo", _object_spread$_({
     root: {
       display: "flex"
     },
@@ -8419,7 +8404,7 @@
     if (Array.isArray(arr))
       return arr;
   }
-  function _define_property$Y(obj, key, value) {
+  function _define_property$$(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -8463,7 +8448,7 @@
   function _non_iterable_rest$l() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
-  function _object_spread$W(target) {
+  function _object_spread$Z(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
       var ownKeys2 = Object.keys(source);
@@ -8473,12 +8458,12 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$Y(target, key, source[key]);
+        _define_property$$(target, key, source[key]);
       });
     }
     return target;
   }
-  function ownKeys$O(object, enumerableOnly) {
+  function ownKeys$R(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -8491,12 +8476,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$O(target, source) {
+  function _object_spread_props$R(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$O(Object(source)).forEach(function(key) {
+      ownKeys$R(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -8520,7 +8505,7 @@
   }
   var AccountInfo = function(param) {
     var data = param.data, testId = param.testId, avatar = param.avatar, tweakStyles = param.tweakStyles, accountName = param.accountName, options = param.options;
-    var classes = useStyles$R({
+    var classes = useStyles$T({
       theme: tweakStyles
     });
     var tweakListStyles = useTweakStyles({
@@ -8540,7 +8525,7 @@
     useOnClickOutsideWithRef(dropdownRef, function() {
       return setIsMenuOpen(false);
     }, nameRef);
-    return /* @__PURE__ */ jsxs("div", _object_spread_props$O(_object_spread$W({
+    return /* @__PURE__ */ jsxs("div", _object_spread_props$R(_object_spread$Z({
       className: classes.root
     }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)), {
       children: [
@@ -8590,7 +8575,7 @@
       ]
     }));
   };
-  var useStyles$Q = createThemedStyles("AddButton", {
+  var useStyles$S = createThemedStyles("AddButton", {
     root: {
       display: "flex",
       alignItems: "center",
@@ -8616,7 +8601,7 @@
       width: "100%"
     }
   });
-  function _define_property$X(obj, key, value) {
+  function _define_property$_(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -8629,7 +8614,7 @@
     }
     return obj;
   }
-  function _object_spread$V(target) {
+  function _object_spread$Y(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
       var ownKeys2 = Object.keys(source);
@@ -8639,12 +8624,12 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$X(target, key, source[key]);
+        _define_property$_(target, key, source[key]);
       });
     }
     return target;
   }
-  function ownKeys$N(object, enumerableOnly) {
+  function ownKeys$Q(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -8657,12 +8642,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$N(target, source) {
+  function _object_spread_props$Q(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$N(Object(source)).forEach(function(key) {
+      ownKeys$Q(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -8670,10 +8655,10 @@
   }
   var AddButton = function(param) {
     var text = param.text, _param_type = param.type, type = _param_type === void 0 ? "button" : _param_type, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, onClick = param.onClick, _param_isFullWidth = param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? false : _param_isFullWidth, data = param.data, testId = param.testId, tweakStyles = param.tweakStyles;
-    var classes = useStyles$Q({
+    var classes = useStyles$S({
       theme: tweakStyles
     });
-    return /* @__PURE__ */ jsxs("button", _object_spread_props$N(_object_spread$V({
+    return /* @__PURE__ */ jsxs("button", _object_spread_props$Q(_object_spread$Y({
       type,
       className: clsx(classes.root, isDisabled && classes.disabled, isFullWidth && classes.fullWidth),
       onClick: !isDisabled ? onClick : void 0,
@@ -8692,7 +8677,7 @@
       ]
     }));
   };
-  var useStyles$P = createThemedStyles("DotsPreloader", {
+  var useStyles$R = createThemedStyles("DotsPreloader", {
     root: {
       display: "flex",
       gap: 4,
@@ -8738,7 +8723,7 @@
   });
   var DotsPreloader = function(param) {
     var tweakStyles = param.tweakStyles;
-    var classes = useStyles$P({
+    var classes = useStyles$R({
       theme: tweakStyles
     });
     return /* @__PURE__ */ jsx("div", {
@@ -8804,7 +8789,7 @@
       ]
     });
   };
-  var useStyles$O = createThemedStyles("SvgPreloader", {
+  var useStyles$Q = createThemedStyles("SvgPreloader", {
     root: {
       display: "flex",
       width: "100%",
@@ -8814,7 +8799,7 @@
   var SvgPreloader = function(param) {
     var _param_type = param.type, type = _param_type === void 0 ? "default" : _param_type, tweakStyles = param.tweakStyles;
     var _theme_preloaders;
-    var classes = useStyles$O({
+    var classes = useStyles$Q({
       theme: tweakStyles
     });
     var theme = React.useContext(ThemeContext).theme;
@@ -8828,7 +8813,7 @@
       }
     }) : /* @__PURE__ */ jsx(PreloaderIcon, {});
   };
-  var useStyles$N = createThemedStyles("ThemedPreloader", {
+  var useStyles$P = createThemedStyles("ThemedPreloader", {
     root: {
       display: "flex"
     },
@@ -8839,7 +8824,7 @@
       color: "currentColor"
     }
   });
-  function _define_property$W(obj, key, value) {
+  function _define_property$Z(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -8852,7 +8837,7 @@
     }
     return obj;
   }
-  function _object_spread$U(target) {
+  function _object_spread$X(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
       var ownKeys2 = Object.keys(source);
@@ -8862,12 +8847,12 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$W(target, key, source[key]);
+        _define_property$Z(target, key, source[key]);
       });
     }
     return target;
   }
-  function ownKeys$M(object, enumerableOnly) {
+  function ownKeys$P(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -8880,12 +8865,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$M(target, source) {
+  function _object_spread_props$P(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$M(Object(source)).forEach(function(key) {
+      ownKeys$P(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -8893,7 +8878,7 @@
   }
   var ThemedPreloader = function(param) {
     var _param_type = param.type, type = _param_type === void 0 ? "default" : _param_type, _param_useCurrentColor = param.useCurrentColor, useCurrentColor = _param_useCurrentColor === void 0 ? false : _param_useCurrentColor, data = param.data, testId = param.testId, tweakStyles = param.tweakStyles;
-    var classes = useStyles$N({
+    var classes = useStyles$P({
       theme: tweakStyles
     });
     var tweakDotsPreloaderStyles = useTweakStyles({
@@ -8906,8 +8891,8 @@
       className: "tweakSvgPreloader",
       currentComponentName: "ThemedPreloader"
     });
-    return /* @__PURE__ */ jsx("div", _object_spread_props$M(_object_spread$U({
-      className: clsx(classes.root, classes[type], _define_property$W({}, classes.currentColor, useCurrentColor))
+    return /* @__PURE__ */ jsx("div", _object_spread_props$P(_object_spread$X({
+      className: clsx(classes.root, classes[type], _define_property$Z({}, classes.currentColor, useCurrentColor))
     }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)), {
       children: type === "dots" ? /* @__PURE__ */ jsx(DotsPreloader, {
         tweakStyles: tweakDotsPreloaderStyles
@@ -8917,7 +8902,7 @@
       })
     }));
   };
-  var useStyles$M = createThemedStyles("Button", {
+  var useStyles$O = createThemedStyles("Button", {
     root: {
       display: "flex",
       justifyContent: "center",
@@ -9088,7 +9073,7 @@
   var getPreloaderStyles = function(size) {
     return size === "s" || size === "m" ? dotsPreloaderStyles : void 0;
   };
-  function _define_property$V(obj, key, value) {
+  function _define_property$Y(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -9101,7 +9086,7 @@
     }
     return obj;
   }
-  function _object_spread$T(target) {
+  function _object_spread$W(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
       var ownKeys2 = Object.keys(source);
@@ -9111,12 +9096,12 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$V(target, key, source[key]);
+        _define_property$Y(target, key, source[key]);
       });
     }
     return target;
   }
-  function ownKeys$L(object, enumerableOnly) {
+  function ownKeys$O(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -9129,21 +9114,21 @@
     }
     return keys2;
   }
-  function _object_spread_props$L(target, source) {
+  function _object_spread_props$O(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$L(Object(source)).forEach(function(key) {
+      ownKeys$O(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
     return target;
   }
-  function _object_without_properties$h(source, excluded) {
+  function _object_without_properties$j(source, excluded) {
     if (source == null)
       return {};
-    var target = _object_without_properties_loose$h(source, excluded);
+    var target = _object_without_properties_loose$j(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -9158,7 +9143,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$h(source, excluded) {
+  function _object_without_properties_loose$j(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -9173,7 +9158,7 @@
     return target;
   }
   var Button = /* @__PURE__ */ React.forwardRef(function(_param, ref) {
-    var _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, children = _param.children, _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, _param_view = _param.view, view = _param_view === void 0 ? "primary" : _param_view, _param_isFullWidth = _param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? false : _param_isFullWidth, _param_isInline = _param.isInline, isInline = _param_isInline === void 0 ? false : _param_isInline, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_shouldSkipTabNavigation = _param.shouldSkipTabNavigation, shouldSkipTabNavigation = _param_shouldSkipTabNavigation === void 0 ? false : _param_shouldSkipTabNavigation, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, icon = _param.icon, _param_iconPosition = _param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_preloaderType = _param.preloaderType, preloaderType = _param_preloaderType === void 0 ? "dots" : _param_preloaderType, interactions = _object_without_properties$h(_param, [
+    var _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, children = _param.children, _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, _param_view = _param.view, view = _param_view === void 0 ? "primary" : _param_view, _param_isFullWidth = _param.isFullWidth, isFullWidth = _param_isFullWidth === void 0 ? false : _param_isFullWidth, _param_isInline = _param.isInline, isInline = _param_isInline === void 0 ? false : _param_isInline, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_shouldSkipTabNavigation = _param.shouldSkipTabNavigation, shouldSkipTabNavigation = _param_shouldSkipTabNavigation === void 0 ? false : _param_shouldSkipTabNavigation, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, icon = _param.icon, _param_iconPosition = _param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "left" : _param_iconPosition, _param_preloaderType = _param.preloaderType, preloaderType = _param_preloaderType === void 0 ? "dots" : _param_preloaderType, interactions = _object_without_properties$j(_param, [
       "type",
       "children",
       "size",
@@ -9191,7 +9176,7 @@
       "iconPosition",
       "preloaderType"
     ]);
-    var classes = useStyles$M({
+    var classes = useStyles$O({
       theme: tweakStyles
     });
     var tweakPreloaderStyles = useTweakStyles({
@@ -9204,16 +9189,16 @@
     var hasChildren = trueReactPlatformHelpers.isReactNodeNotEmpty(children);
     var hasNoAction = isDisabled || isLoading;
     var _obj2, _obj1;
-    return /* @__PURE__ */ jsxs("button", _object_spread_props$L(_object_spread$T({
+    return /* @__PURE__ */ jsxs("button", _object_spread_props$O(_object_spread$W({
       ref,
       type,
-      className: clsx(classes.root, classes[size], classes[view], (_obj2 = {}, _define_property$V(_obj2, classes.disabled, isDisabled), _define_property$V(_obj2, classes.fullWidth, isFullWidth), _define_property$V(_obj2, classes.inline, isInline), _define_property$V(_obj2, classes.active, isActive), _define_property$V(_obj2, classes.loading, isLoading), _define_property$V(_obj2, classes.onlyIcon, hasIcon && !hasChildren), _obj2)),
+      className: clsx(classes.root, classes[size], classes[view], (_obj2 = {}, _define_property$Y(_obj2, classes.disabled, isDisabled), _define_property$Y(_obj2, classes.fullWidth, isFullWidth), _define_property$Y(_obj2, classes.inline, isInline), _define_property$Y(_obj2, classes.active, isActive), _define_property$Y(_obj2, classes.loading, isLoading), _define_property$Y(_obj2, classes.onlyIcon, hasIcon && !hasChildren), _obj2)),
       tabIndex: shouldSkipTabNavigation ? -1 : void 0,
       disabled: hasNoAction
     }, interactions, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)), {
       children: [
         /* @__PURE__ */ jsxs("span", {
-          className: clsx(classes.content, (_obj1 = {}, _define_property$V(_obj1, classes.iconFromRight, hasChildren && hasIcon && iconPosition === "right"), _define_property$V(_obj1, classes.iconFromLeft, hasChildren && hasIcon && iconPosition === "left"), _obj1)),
+          className: clsx(classes.content, (_obj1 = {}, _define_property$Y(_obj1, classes.iconFromRight, hasChildren && hasIcon && iconPosition === "right"), _define_property$Y(_obj1, classes.iconFromLeft, hasChildren && hasIcon && iconPosition === "left"), _obj1)),
           children: [
             hasIcon && /* @__PURE__ */ jsx("span", {
               className: classes.icon,
@@ -9236,7 +9221,7 @@
       ]
     }));
   });
-  var useStyles$L = createThemedStyles("Checkbox", {
+  var useStyles$N = createThemedStyles("Checkbox", {
     root: {
       cursor: "pointer",
       display: "flex",
@@ -9274,7 +9259,7 @@
       flexDirection: "row-reverse"
     }
   });
-  function _define_property$U(obj, key, value) {
+  function _define_property$X(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -9287,7 +9272,7 @@
     }
     return obj;
   }
-  function _object_spread$S(target) {
+  function _object_spread$V(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
       var ownKeys2 = Object.keys(source);
@@ -9297,12 +9282,12 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$U(target, key, source[key]);
+        _define_property$X(target, key, source[key]);
       });
     }
     return target;
   }
-  function ownKeys$K(object, enumerableOnly) {
+  function ownKeys$N(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -9315,12 +9300,12 @@
     }
     return keys2;
   }
-  function _object_spread_props$K(target, source) {
+  function _object_spread_props$N(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$K(Object(source)).forEach(function(key) {
+      ownKeys$N(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
@@ -9328,7 +9313,7 @@
   }
   function Checkbox(param) {
     var value = param.value, children = param.children, _param_isChecked = param.isChecked, isChecked = _param_isChecked === void 0 ? false : _param_isChecked, _param_isSemiChecked = param.isSemiChecked, isSemiChecked = _param_isSemiChecked === void 0 ? false : _param_isSemiChecked, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isReadonly = param.isReadonly, isReadonly = _param_isReadonly === void 0 ? false : _param_isReadonly, _param_labelPosition = param.labelPosition, labelPosition = _param_labelPosition === void 0 ? "right" : _param_labelPosition, data = param.data, testId = param.testId, tweakStyles = param.tweakStyles, onSelect = param.onSelect;
-    var classes = useStyles$L({
+    var classes = useStyles$N({
       theme: tweakStyles
     });
     var hasAction = !isDisabled && !isReadonly;
@@ -9340,11 +9325,11 @@
       }, event);
     };
     var _obj2;
-    return /* @__PURE__ */ jsxs("label", _object_spread_props$K(_object_spread$S({
-      className: clsx(classes.root, (_obj2 = {}, _define_property$U(_obj2, classes.checked, isSelected), _define_property$U(_obj2, classes.invalid, isInvalid), _define_property$U(_obj2, classes.disabled, isDisabled), _define_property$U(_obj2, classes.labelPositionLeft, labelPosition === "left"), _obj2))
+    return /* @__PURE__ */ jsxs("label", _object_spread_props$N(_object_spread$V({
+      className: clsx(classes.root, (_obj2 = {}, _define_property$X(_obj2, classes.checked, isSelected), _define_property$X(_obj2, classes.invalid, isInvalid), _define_property$X(_obj2, classes.disabled, isDisabled), _define_property$X(_obj2, classes.labelPositionLeft, labelPosition === "left"), _obj2))
     }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)), {
       children: [
-        /* @__PURE__ */ jsx("input", _object_spread$S({
+        /* @__PURE__ */ jsx("input", _object_spread$V({
           className: classes.input,
           type: "checkbox",
           checked: isSelected,
@@ -9367,7 +9352,7 @@
       ]
     }));
   }
-  var useStyles$K = createThemedStyles("CloseButton", {
+  var useStyles$M = createThemedStyles("CloseButton", {
     root: {
       width: 40,
       height: 40,
@@ -9393,7 +9378,7 @@
       }
     }
   });
-  function _define_property$T(obj, key, value) {
+  function _define_property$W(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -9406,7 +9391,7 @@
     }
     return obj;
   }
-  function _object_spread$R(target) {
+  function _object_spread$U(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
       var ownKeys2 = Object.keys(source);
@@ -9416,12 +9401,12 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$T(target, key, source[key]);
+        _define_property$W(target, key, source[key]);
       });
     }
     return target;
   }
-  function ownKeys$J(object, enumerableOnly) {
+  function ownKeys$M(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -9434,33 +9419,33 @@
     }
     return keys2;
   }
-  function _object_spread_props$J(target, source) {
+  function _object_spread_props$M(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$J(Object(source)).forEach(function(key) {
+      ownKeys$M(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
     return target;
   }
   var CloseButton = function(param) {
-    var tweakStyles = param.tweakStyles, testId = param.testId, data = param.data, _param_iconType = param.iconType, iconType = _param_iconType === void 0 ? "close" : _param_iconType, onClose = param.onClose;
-    var classes = useStyles$K({
+    var tweakStyles = param.tweakStyles, testId = param.testId, data = param.data, _param_icon = param.icon, icon = _param_icon === void 0 ? "close" : _param_icon, onClose = param.onClose;
+    var classes = useStyles$M({
       theme: tweakStyles
     });
-    return /* @__PURE__ */ jsx("button", _object_spread_props$J(_object_spread$R({
+    return /* @__PURE__ */ jsx("button", _object_spread_props$M(_object_spread$U({
       type: "button",
       className: classes.root,
       onClick: onClose
     }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)), {
       children: /* @__PURE__ */ jsx(Icon, {
-        type: iconType
+        type: icon
       })
     }));
   };
-  var useStyles$J = createThemedStyles({
+  var useStyles$L = createThemedStyles({
     root: {
       display: "flex",
       flexWrap: "wrap"
@@ -9553,7 +9538,7 @@
       return _array_like_to_array$k(o, minLen);
   }
   var Colors = function() {
-    var classes = useStyles$J();
+    var classes = useStyles$L();
     var theme = React.useContext(ThemeContext).theme;
     var _theme_colors = theme.colors, colors2 = _theme_colors === void 0 ? {} : _theme_colors;
     return /* @__PURE__ */ jsx("div", {
@@ -9583,7 +9568,7 @@
       })
     });
   };
-  var useStyles$I = createThemedStyles("CssBaseline", {
+  var useStyles$K = createThemedStyles("CssBaseline", {
     "@global html, body": {
       fontFamily: "Arial, sans-serif",
       color: colors.FONT_MAIN,
@@ -9592,7 +9577,7 @@
     },
     root: {}
   });
-  function _define_property$S(obj, key, value) {
+  function _define_property$V(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -9605,7 +9590,7 @@
     }
     return obj;
   }
-  function _object_spread$Q(target) {
+  function _object_spread$T(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
       var ownKeys2 = Object.keys(source);
@@ -9615,296 +9600,485 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$S(target, key, source[key]);
+        _define_property$V(target, key, source[key]);
       });
     }
     return target;
   }
   var CssBaseline = function(param) {
     var data = param.data, testId = param.testId, tweakStyles = param.tweakStyles;
-    var classes = useStyles$I({
+    var classes = useStyles$K({
       theme: tweakStyles
     });
-    return /* @__PURE__ */ jsx("div", _object_spread$Q({
+    return /* @__PURE__ */ jsx("div", _object_spread$T({
       className: classes.root
     }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)));
   };
-  var DEFAULT_SIZE = 6;
-  var PADDING_X$1 = 12;
-  var AUTOSIZE_MAX_WIDTH = 480;
-  var useStyles$H = createThemedStyles("Input", {
-    root: {
-      width: "100%",
-      boxSizing: "border-box",
-      position: "relative"
-    },
-    inputWrapper: {
+  var useStyles$J = createThemedStyles("WithMessages", {
+    withMessages: {
       display: "flex",
+      flexDirection: "column",
       width: "100%",
-      height: dimensions.CONTROL_HEIGHT,
-      boxSizing: "border-box",
-      transition: animations.defaultTransition,
-      transitionProperty: "border-color",
-      backgroundColor: "white",
       position: "relative"
     },
-    inputContent: {
-      fontSize: 16,
-      fontFamily: "inherit",
-      padding: [
-        0,
-        PADDING_X$1
-      ]
+    error: {
+      color: "red"
     },
-    input: {
-      extend: "inputContent",
-      width: "100%",
-      height: "100%",
-      outline: "none",
-      boxSizing: "border-box",
-      outlineStyle: "none",
-      transition: animations.defaultTransition,
-      transitionProperty: "background-color",
-      border: "none",
-      background: "none",
-      "&::placeholder": {
-        opacity: 1
-      },
-      MozAppearance: "textfield",
-      "&::-webkit-inner-spin-button,&::-webkit-outer-spin-button": {
-        WebkitAppearance: "none",
-        margin: 0
-      }
+    info: {
+      color: "gray"
     },
-    autosize: {
-      display: "inline-grid",
-      verticalAlign: "top",
-      alignItems: "center",
-      justifyContent: "start",
-      "&::after, input": {
-        width: "auto",
-        minWidth: "1em",
-        gridArea: "1 / 2",
-        font: "inherit",
-        justifySelf: "stretch"
-      },
-      "&::after": {
-        maxWidth: AUTOSIZE_MAX_WIDTH,
-        content: 'attr(data-value) " "',
-        visibility: "hidden",
-        whiteSpace: "pre-wrap"
+    horizontal: {
+      display: "flex",
+      "& > *": {
+        flexGrow: 1,
+        "&:not(:first-child)": {
+          marginLeft: -1
+        }
       }
     },
-    focused: {
-      position: "relative",
-      zIndex: 1
-    },
-    unitsWrapper: {
-      extend: "inputContent",
-      position: "absolute",
-      left: 0,
-      height: "100%",
-      boxSizing: "border-box",
+    vertical: {
       display: "flex",
-      alignItems: "center",
-      pointerEvents: "none"
+      flexDirection: "column",
+      "& > *:not(:first-child)": {
+        marginTop: -1
+      }
     },
-    fakeValue: {
-      visibility: "hidden"
+    message: {
+      fontSize: 12
     },
-    units: {
-      paddingLeft: 4
-    },
-    withFloatingLabel: {
-      paddingTop: 18
+    children: {}
+  });
+  function _define_property$U(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+    return obj;
+  }
+  function _object_spread$S(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+      var ownKeys2 = Object.keys(source);
+      if (typeof Object.getOwnPropertySymbols === "function") {
+        ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+      }
+      ownKeys2.forEach(function(key) {
+        _define_property$U(target, key, source[key]);
+      });
+    }
+    return target;
+  }
+  function ownKeys$L(object, enumerableOnly) {
+    var keys2 = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      if (enumerableOnly) {
+        symbols = symbols.filter(function(sym) {
+          return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+      }
+      keys2.push.apply(keys2, symbols);
+    }
+    return keys2;
+  }
+  function _object_spread_props$L(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys$L(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+    return target;
+  }
+  var 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$J({
+      theme: tweakStyles
+    });
+    var shouldShowError = trueReactPlatformHelpers.isReactNodeNotEmpty(errorMessage);
+    var shouldShowInfo = trueReactPlatformHelpers.isReactNodeNotEmpty(infoMessage) && !shouldShowError;
+    var _obj2;
+    return /* @__PURE__ */ jsxs("div", _object_spread_props$L(_object_spread$S({
+      ref,
+      className: classes.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, 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({
+              className: classes.error
+            }, trueReactPlatformHelpers.addDataTestId(testId, "error")), {
+              children: errorMessage
+            })),
+            shouldShowInfo && /* @__PURE__ */ jsx("div", _object_spread_props$L(_object_spread$S({
+              className: classes.info
+            }, trueReactPlatformHelpers.addDataTestId(testId, "info")), {
+              children: infoMessage
+            }))
+          ]
+        })
+      ]
+    }));
+  });
+  var CONTROL$1 = dimensions.CONTROL, Z_INDEX$2 = dimensions.Z_INDEX;
+  var useStyles$I = createThemedStyles("ControlWrapper", {
+    controlWrapper: {
+      "--control-height": "".concat(CONTROL$1.HEIGHT - 2, "px"),
+      // borders
+      "--control-padding": "".concat(CONTROL$1.PADDING, "px"),
+      "--icon-size": "".concat(CONTROL$1.ICON_SIZE, "px"),
+      "--icon-inner-size": "".concat(CONTROL$1.ICON_INNER_SIZE, "px"),
+      "--icon-gap": "".concat(CONTROL$1.ICON_GAP, "px"),
+      display: "flex",
+      width: "100%",
+      backgroundColor: "white",
+      position: "relative",
+      border: [
+        "solid",
+        1,
+        "gray"
+      ],
+      borderRadius: 8,
+      boxSizing: "border-box",
+      zIndex: 0
     },
-    floatingLabelWithoutPadding: {
-      paddingTop: 18,
-      paddingLeft: 0
+    invalid: {
+      zIndex: Z_INDEX$2.CONTROL_INVALID
     },
-    floating: {},
-    activeLabel: {
-      display: "none",
-      "&$floating": {
-        display: "block",
-        transform: "scale(0.75) translateY(-120%)"
-      }
+    disabled: {},
+    focused: {
+      position: "relative",
+      zIndex: Z_INDEX$2.CONTROL_FOCUS
     },
-    required: {
-      "&:before": {
-        content: '""',
-        position: "absolute",
-        left: -12,
-        top: "50%",
-        transform: "translate(0, -50%)",
-        width: 6,
-        height: 6,
-        borderRadius: "50%"
-      }
+    withValue: {},
+    loading: {},
+    minContent: {
+      width: "min-content"
     },
     label: {
       position: "absolute",
       pointerEvents: "none",
-      left: PADDING_X$1,
+      left: "var(--control-padding)",
       top: "50%",
       transformOrigin: "top left",
       transform: "translateY(-50%)",
       transition: animations.defaultTransition,
       transitionProperty: "transform, color",
-      fontSize: 16
-    },
-    floatingWithoutPadding: {
-      left: 0
+      fontSize: 16,
+      zIndex: 1
     },
+    activeLabel: {},
     requiredLabel: {
       "&:after": {
         content: '""',
+        display: "block",
         position: "absolute",
+        top: 0,
         right: -8,
-        top: 4,
-        transform: "translate(0, -50%)",
         width: 6,
         height: 6,
-        borderRadius: "50%"
+        borderRadius: "50%",
+        backgroundColor: "orange"
       }
     },
-    activeIcon: {
-      cursor: "pointer"
+    disabledLabel: {},
+    wrapper: {
+      display: "flex",
+      flexGrow: 1,
+      minWidth: 0,
+      // Нужно для селекта
+      textAlign: "left"
     },
-    "border-top": {
-      borderRadius: 0,
-      borderWidth: [
-        1,
-        0,
-        0,
-        0
-      ]
+    controls: {
+      display: "flex",
+      marginLeft: "auto",
+      flexShrink: 0
     },
-    "border-bottom": {
-      borderRadius: 0,
-      borderWidth: [
-        0,
-        0,
-        1,
-        0
-      ]
+    icon: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      minWidth: "var(--icon-size)",
+      width: "var(--icon-size)",
+      height: "100%",
+      flexShrink: 0,
+      cursor: "default",
+      "&:last-child": {
+        paddingRight: 6
+      }
     },
-    "border-left": {
-      borderRadius: 0,
-      borderWidth: [
-        0,
-        0,
-        0,
-        1
-      ]
+    iconInner: {
+      width: "var(--icon-inner-size)"
     },
-    "border-right": {
-      borderRadius: 0,
-      borderWidth: [
-        0,
-        1,
-        0,
-        0
-      ]
+    customIcon: {
+      width: "unset",
+      "& $iconInner": {
+        width: "unset"
+      }
     },
-    top: {
+    endIcon: {},
+    activeIcon: {
+      cursor: "pointer",
+      outline: "none"
+    },
+    clearIcon: {
+      "& $iconInner": {
+        width: "var(--icon-inner-size)"
+      }
+    },
+    loader: {
+      "& $iconInner": {
+        width: "var(--icon-inner-size)"
+      }
+    },
+    /* groupPositions */
+    "placement-top": {
       borderBottomLeftRadius: 0,
       borderBottomRightRadius: 0
     },
-    bottom: {
+    "placement-bottom": {
       borderTopLeftRadius: 0,
       borderTopRightRadius: 0
     },
-    "top-left": {
+    "placement-top-left": {
       borderTopRightRadius: 0,
       borderBottomLeftRadius: 0,
       borderBottomRightRadius: 0
     },
-    "top-right": {
+    "placement-top-right": {
       borderTopLeftRadius: 0,
       borderBottomLeftRadius: 0,
       borderBottomRightRadius: 0
     },
-    "bottom-left": {
+    "placement-bottom-left": {
       borderTopLeftRadius: 0,
       borderTopRightRadius: 0,
       borderBottomRightRadius: 0
     },
-    "bottom-right": {
+    "placement-bottom-right": {
       borderTopLeftRadius: 0,
       borderTopRightRadius: 0,
       borderBottomLeftRadius: 0
     },
-    left: {
+    "placement-left": {
       borderTopRightRadius: 0,
       borderBottomRightRadius: 0
     },
-    right: {
+    "placement-right": {
       borderTopLeftRadius: 0,
       borderBottomLeftRadius: 0
     },
-    middle: {
+    "placement-middle": {
       borderRadius: 0
-    },
-    controls: {
-      display: "flex",
-      gridArea: "1 / 3"
-    },
-    icon: {
-      display: "flex",
-      alignItems: "center",
+    }
+  });
+  function _define_property$T(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+    return obj;
+  }
+  function _object_spread$R(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+      var ownKeys2 = Object.keys(source);
+      if (typeof Object.getOwnPropertySymbols === "function") {
+        ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+      }
+      ownKeys2.forEach(function(key) {
+        _define_property$T(target, key, source[key]);
+      });
+    }
+    return target;
+  }
+  function ownKeys$K(object, enumerableOnly) {
+    var keys2 = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      if (enumerableOnly) {
+        symbols = symbols.filter(function(sym) {
+          return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+      }
+      keys2.push.apply(keys2, symbols);
+    }
+    return keys2;
+  }
+  function _object_spread_props$K(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys$K(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+    return target;
+  }
+  var ControlWrapper = function(param) {
+    var label = param.label, icon = param.icon, groupPlacement = param.groupPlacement, isInvalid = param.isInvalid, isFocused = param.isFocused, isRequired = param.isRequired, isLoading = param.isLoading, isFullWidth = param.isFullWidth, isDisabled = param.isDisabled, hasValue = param.hasValue, testId = param.testId, children = param.children, tweakStyles = param.tweakStyles, data = param.data, onIconClick = param.onIconClick, onClear = param.onClear;
+    var classes = useStyles$I({
+      theme: tweakStyles
+    });
+    var hasEndIcon = !isLoading && trueReactPlatformHelpers.isReactNodeNotEmpty(icon);
+    var hasClearButton = !isDisabled && !isLoading && hasValue && trueReactPlatformHelpers.isNotEmpty(onClear);
+    var hasControls = hasEndIcon || hasClearButton || isLoading;
+    var tweakPreloaderStyles = useTweakStyles({
+      tweakStyles,
+      className: "tweakPreloader",
+      currentComponentName: "ControlWrapper"
+    });
+    var _obj2, _obj1, _obj22;
+    return /* @__PURE__ */ jsxs("div", _object_spread_props$K(_object_spread$R({
+      className: clsx(classes.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)), {
+      children: [
+        trueReactPlatformHelpers.isReactNodeNotEmpty(label) && /* @__PURE__ */ jsx("div", {
+          className: clsx(classes.label, (_obj1 = {}, _define_property$T(_obj1, classes.requiredLabel, isRequired), _define_property$T(_obj1, classes.disabledLabel, isDisabled), _define_property$T(_obj1, classes.activeLabel, isFocused || hasValue), _obj1)),
+          children: label
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          className: classes.wrapper,
+          children: [
+            children,
+            hasControls && /* @__PURE__ */ jsxs("div", {
+              className: classes.controls,
+              children: [
+                hasClearButton && /* @__PURE__ */ jsx("div", _object_spread_props$K(_object_spread$R({
+                  className: clsx(classes.icon, classes.clearIcon, classes.activeIcon)
+                }, trueReactPlatformHelpers.addClickHandler(onClear), trueReactPlatformHelpers.addDataTestId(testId, "clear")), {
+                  children: /* @__PURE__ */ jsx("div", {
+                    className: classes.iconInner,
+                    children: /* @__PURE__ */ jsx(Icon, {
+                      type: "close"
+                    })
+                  })
+                })),
+                hasEndIcon && /* @__PURE__ */ jsx("div", _object_spread_props$K(_object_spread$R({
+                  className: clsx(classes.icon, classes.endIcon, (_obj22 = {}, _define_property$T(_obj22, classes.activeIcon, !isDisabled && trueReactPlatformHelpers.isNotEmpty(onIconClick)), _define_property$T(_obj22, classes.customIcon, !trueReactPlatformHelpers.isString(icon)), _obj22))
+                }, trueReactPlatformHelpers.addClickHandler(onIconClick, !isDisabled), trueReactPlatformHelpers.addDataTestId(testId, "icon")), {
+                  children: /* @__PURE__ */ jsx("div", {
+                    className: classes.iconInner,
+                    children: renderIcon(icon)
+                  })
+                })),
+                isLoading && /* @__PURE__ */ jsx("div", _object_spread_props$K(_object_spread$R({
+                  className: clsx(classes.icon, classes.loader)
+                }, trueReactPlatformHelpers.addDataTestId(testId, "loading")), {
+                  children: /* @__PURE__ */ jsx("div", {
+                    className: classes.iconInner,
+                    children: /* @__PURE__ */ jsx(ThemedPreloader, {
+                      tweakStyles: tweakPreloaderStyles
+                    })
+                  })
+                }))
+              ]
+            })
+          ]
+        })
+      ]
+    }));
+  };
+  var PADDING_WITH_UNITS = 8;
+  var useStyles$H = createThemedStyles("Input", {
+    inputContent: {
+      height: "var(--control-height)",
       padding: [
         0,
-        4
+        "var(--control-padding)"
       ],
-      width: 20,
-      transition: animations.defaultTransition,
-      transitionProperty: "color",
-      boxSizing: "content-box",
-      "&:last-child": {
-        paddingRight: 8
+      fontSize: 16,
+      fontFamily: "inherit"
+    },
+    input: {
+      extend: "inputContent",
+      width: "100%",
+      outline: "none",
+      outlineStyle: "none",
+      boxSizing: "border-box",
+      border: "none",
+      background: "none",
+      color: "black",
+      "&[readonly]": {
+        cursor: "default"
+      },
+      "&::placeholder": {
+        opacity: 1
       },
-      "& + $units": {
-        marginLeft: 4
+      "&::-webkit-date-and-time-value": {
+        textAlign: "left"
+      },
+      MozAppearance: "textfield",
+      "&::-webkit-inner-spin-button,&::-webkit-outer-spin-button,&::-webkit-calendar-picker-indicator": {
+        display: "none",
+        WebkitAppearance: "none",
+        margin: 0
       }
     },
-    clearIcon: {
-      extend: "icon"
-    },
-    inputIcon: {
-      extend: "icon"
-    },
-    withIcons: {
-      paddingRight: 4
+    autoSizeWrapper: {
+      position: "relative",
+      display: "flex",
+      minWidth: 0,
+      zIndex: 0,
+      flexGrow: 1
     },
-    withControls: {},
-    invalid: {},
-    disabled: {},
-    invalidLabel: {},
-    error: {
-      fontSize: 12
+    autoSized: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      height: "100%"
     },
-    info: {
-      fontSize: 12,
-      paddingTop: 4,
-      paddingLeft: 13
+    withUnits: {
+      extend: "autoSized",
+      paddingRight: "calc(".concat(PADDING_WITH_UNITS, "px + var(--units-width) - 1px)"),
+      "& + $fakeValue": {
+        paddingRight: PADDING_WITH_UNITS
+      }
     },
-    "error-top": {
-      position: "absolute",
-      top: -18,
-      left: -1,
-      padding: [
-        4,
-        8
-      ],
-      zIndex: 1
+    withLabel: {},
+    withValue: {},
+    fakeValue: {
+      extend: "inputContent",
+      visibility: "hidden",
+      maxWidth: "100%",
+      overflow: "hidden",
+      minWidth: 8,
+      whiteSpace: "nowrap"
     },
-    "error-bottom": {
-      paddingTop: 4,
-      paddingLeft: 13
+    units: {
+      alignSelf: "center",
+      paddingRight: "var(--control-padding)"
     },
-    loading: {},
-    withUnits: {}
+    focusedInput: {},
+    disabledInput: {},
+    invalidInput: {}
   });
   function _array_like_to_array$j(arr, len) {
     if (len == null || len > arr.length)
@@ -9946,7 +10120,7 @@
       });
     };
   }
-  function _define_property$R(obj, key, value) {
+  function _define_property$S(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value,
@@ -9990,7 +10164,7 @@
   function _non_iterable_rest$j() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
-  function _object_spread$P(target) {
+  function _object_spread$Q(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
       var ownKeys2 = Object.keys(source);
@@ -10000,12 +10174,12 @@
         }));
       }
       ownKeys2.forEach(function(key) {
-        _define_property$R(target, key, source[key]);
+        _define_property$S(target, key, source[key]);
       });
     }
     return target;
   }
-  function ownKeys$I(object, enumerableOnly) {
+  function ownKeys$J(object, enumerableOnly) {
     var keys2 = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
@@ -10018,21 +10192,21 @@
     }
     return keys2;
   }
-  function _object_spread_props$I(target, source) {
+  function _object_spread_props$J(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
       Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-      ownKeys$I(Object(source)).forEach(function(key) {
+      ownKeys$J(Object(source)).forEach(function(key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
       });
     }
     return target;
   }
-  function _object_without_properties$g(source, excluded) {
+  function _object_without_properties$i(source, excluded) {
     if (source == null)
       return {};
-    var target = _object_without_properties_loose$g(source, excluded);
+    var target = _object_without_properties_loose$i(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -10047,7 +10221,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$g(source, excluded) {
+  function _object_without_properties_loose$i(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -10179,38 +10353,32 @@
       };
     }
   }
-  var Input = /* @__PURE__ */ React.forwardRef(function(_param, ref) {
-    var _param_value = _param.value, value = _param_value === void 0 ? "" : _param_value, label = _param.label, placeholder = _param.placeholder, _param_type = _param.type, type = _param_type === void 0 ? "text" : _param_type, isDisabled = _param.isDisabled, _param_isReadonly = _param.isReadonly, isReadonly = _param_isReadonly === void 0 ? false : _param_isReadonly, _param_hasFloatingLabel = _param.hasFloatingLabel, hasFloatingLabel = _param_hasFloatingLabel === void 0 ? true : _param_hasFloatingLabel, _param_isInvalid = _param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isClearable = _param.isClearable, isClearable = _param_isClearable === void 0 ? false : _param_isClearable, infoMessage = _param.infoMessage, errorMessage = _param.errorMessage, _param_errorPosition = _param.errorPosition, errorPosition = _param_errorPosition === void 0 ? "bottom" : _param_errorPosition, inlineStyle = _param.inlineStyle, border = _param.border, _param_isRequired = _param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_isAutoSizeable = _param.isAutoSizeable, isAutoSizeable = _param_isAutoSizeable === void 0 ? false : _param_isAutoSizeable, _param_defaultSize = _param.defaultSize, defaultSize = _param_defaultSize === void 0 ? DEFAULT_SIZE : _param_defaultSize, iconType = _param.iconType, hasRequiredLabel = _param.hasRequiredLabel, data = _param.data, tweakStyles = _param.tweakStyles, _param_shouldFocusOnMount = _param.shouldFocusOnMount, shouldFocusOnMount = _param_shouldFocusOnMount === void 0 ? false : _param_shouldFocusOnMount, units = _param.units, testId = _param.testId, onChange = _param.onChange, onFocus = _param.onFocus, onBlur = _param.onBlur, onIconClick = _param.onIconClick, mask = _param.mask, maskPlaceholder = _param.maskPlaceholder, alwaysShowMask = _param.alwaysShowMask, _param_shouldAlwaysShowPlaceholder = _param.shouldAlwaysShowPlaceholder, shouldAlwaysShowPlaceholder = _param_shouldAlwaysShowPlaceholder === void 0 ? false : _param_shouldAlwaysShowPlaceholder, beforeMaskedStateChange = _param.beforeMaskedStateChange, inputProps = _object_without_properties$g(_param, [
+  var InputBase = /* @__PURE__ */ React.forwardRef(function(_param, ref) {
+    var _param_value = _param.value, value = _param_value === void 0 ? "" : _param_value, placeholder = _param.placeholder, label = _param.label, _param_type = _param.type, type = _param_type === void 0 ? "text" : _param_type, isDisabled = _param.isDisabled, autoComplete = _param.autoComplete, initialInputMode = _param.inputMode, isReadonly = _param.isReadonly, isInvalid = _param.isInvalid, isActive = _param.isActive, isClearable = _param.isClearable, isAutoSized = _param.isAutoSized, name = _param.name, tweakStyles = _param.tweakStyles, maxLength = _param.maxLength, shouldFocusOnMount = _param.shouldFocusOnMount, units = _param.units, testId = _param.testId, tabIndex = _param.tabIndex, onChange = _param.onChange, onPaste = _param.onPaste, onFocus = _param.onFocus, onBlur = _param.onBlur, onKeyDown = _param.onKeyDown, mask = _param.mask, maskPlaceholder = _param.maskPlaceholder, alwaysShowMask = _param.alwaysShowMask, shouldAlwaysShowPlaceholder = _param.shouldAlwaysShowPlaceholder, beforeMaskedStateChange = _param.beforeMaskedStateChange, controlProps = _object_without_properties$i(_param, [
       "value",
-      "label",
       "placeholder",
+      "label",
       "type",
       "isDisabled",
+      "autoComplete",
+      "inputMode",
       "isReadonly",
-      "hasFloatingLabel",
       "isInvalid",
       "isActive",
       "isClearable",
-      "infoMessage",
-      "errorMessage",
-      "errorPosition",
-      "inlineStyle",
-      "border",
-      "isRequired",
-      "isLoading",
-      "isAutoSizeable",
-      "defaultSize",
-      "iconType",
-      "hasRequiredLabel",
-      "data",
+      "isAutoSized",
+      "name",
       "tweakStyles",
+      "maxLength",
       "shouldFocusOnMount",
       "units",
       "testId",
+      "tabIndex",
       "onChange",
+      "onPaste",
       "onFocus",
       "onBlur",
-      "onIconClick",
+      "onKeyDown",
       "mask",
       "maskPlaceholder",
       "alwaysShowMask",
@@ -10220,13 +10388,27 @@
     var classes = useStyles$H({
       theme: tweakStyles
     });
-    var tweakPreloaderStyles = useTweakStyles({
+    var tweakControlWrapperStyles = useTweakStyles({
       tweakStyles,
-      className: "tweakPreloader",
+      className: "tweakControlWrapper",
       currentComponentName: "Input"
     });
     var _useState = _sliced_to_array$j(React.useState(false), 2), isFocused = _useState[0], setFocused = _useState[1];
+    var _useState1 = _sliced_to_array$j(React.useState(), 2), unitsWidth = _useState1[0], setUnitsWidth = _useState1[1];
     var inputRef = React.useRef(null);
+    var mergedRef = trueReactPlatformHelpers.mergeRefs([
+      ref,
+      inputRef
+    ]);
+    var inputMode = initialInputMode !== null && initialInputMode !== void 0 ? initialInputMode : [
+      "email",
+      "tel",
+      "url"
+    ].includes(type) ? type : void 0;
+    var hasFocus = isFocused || isActive;
+    var hasValue = trueReactPlatformHelpers.isNotEmpty(value) && value !== "";
+    var hasUnits = trueReactPlatformHelpers.isReactNodeNotEmpty(units);
+    var hasPlaceholder = (!trueReactPlatformHelpers.isReactNodeNotEmpty(label) || hasFocus || shouldAlwaysShowPlaceholder) && trueReactPlatformHelpers.isStringNotEmpty(placeholder);
     var handleChange = function(event) {
       onChange(event.currentTarget.value, event);
     };
@@ -10238,9 +10420,9 @@
       setFocused(false);
       onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     };
-    var handleOnInputClear = function() {
+    var handleInputClear = function() {
       var _ref = _async_to_generator$5(function(event) {
-        var _input_current, input;
+        var _inputRef_current;
         return _ts_generator$5(this, function(_state) {
           switch (_state.label) {
             case 0:
@@ -10250,114 +10432,195 @@
               ];
             case 1:
               _state.sent();
-              input = ref !== null && ref !== void 0 ? ref : inputRef;
-              (_input_current = input.current) === null || _input_current === void 0 ? void 0 : _input_current.focus();
+              (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
               return [
                 2
               ];
           }
         });
       });
-      return function handleOnInputClear2(event) {
+      return function handleInputClear2(event) {
         return _ref.apply(this, arguments);
       };
     }();
-    var hasFocus = isFocused || isActive;
-    var hasClearIcon = isClearable && value.length > 0;
-    var hasControls = hasClearIcon || iconType !== void 0 || isLoading;
-    var hasValue = value !== void 0 && value !== "";
-    var hasUnits = units !== void 0 && units !== "";
-    var hasLabel = trueReactPlatformHelpers.isReactNodeNotEmpty(label);
-    var isLabelActive = hasFocus && !isReadonly || hasValue || shouldAlwaysShowPlaceholder;
-    var hasPlaceholder = (!hasLabel || isLabelActive) && trueReactPlatformHelpers.isStringNotEmpty(placeholder);
-    var shouldShowUnits = (hasValue || isFocused && !hasPlaceholder) && hasUnits;
+    var unitsRef = React.useCallback(function(node) {
+      setUnitsWidth(node === null || node === void 0 ? void 0 : node.clientWidth);
+    }, [
+      units
+    ]);
     var _obj2;
-    var props = _object_spread_props$I(_object_spread$P({}, inputProps, trueReactPlatformHelpers.addDataTestId(testId)), {
-      className: clsx(classes.input, (_obj2 = {}, _define_property$R(_obj2, classes.withFloatingLabel, hasFloatingLabel && hasLabel), _define_property$R(_obj2, classes.withIcons, hasControls), _define_property$R(_obj2, classes.withControls, hasControls), _define_property$R(_obj2, classes.withUnits, shouldShowUnits), _define_property$R(_obj2, classes.floatingLabelWithoutPadding, hasFloatingLabel && hasLabel && border === "bottom"), _obj2)),
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      onChange: handleChange,
+    var props = _object_spread$Q({
+      className: clsx(classes.input, (_obj2 = {}, _define_property$S(_obj2, classes.withUnits, hasUnits), _define_property$S(_obj2, classes.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,
       value,
       type,
+      autoComplete,
+      inputMode,
       disabled: isDisabled,
       placeholder: hasPlaceholder ? placeholder : void 0,
-      autoFocus: shouldFocusOnMount,
+      name,
+      maxLength,
       readOnly: isReadonly,
-      size: isAutoSizeable ? defaultSize : void 0
+      tabIndex,
+      onKeyDown,
+      onPaste,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onChange: handleChange
+    }, trueReactPlatformHelpers.addDataTestId(testId, "input"));
+    React.useEffect(function() {
+      if (shouldFocusOnMount) {
+        var _inputRef_current;
+        (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+      }
+    }, []);
+    var inputContent = /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        trueReactPlatformHelpers.isNotEmpty(mask) ? /* @__PURE__ */ jsx(InputMask, _object_spread$Q({
+          ref: mergedRef,
+          mask,
+          maskPlaceholder,
+          alwaysShowMask,
+          beforeMaskedStateChange
+        }, props)) : /* @__PURE__ */ jsx("input", _object_spread$Q({
+          ref: mergedRef
+        }, props)),
+        (hasUnits || isAutoSized) && /* @__PURE__ */ jsx("div", {
+          className: classes.fakeValue,
+          children: value
+        }),
+        hasUnits && hasValue && /* @__PURE__ */ jsx("div", {
+          className: classes.units,
+          ref: unitsRef,
+          children: units
+        })
+      ]
+    });
+    return /* @__PURE__ */ jsx(ControlWrapper, _object_spread_props$J(_object_spread$Q({
+      label,
+      isDisabled,
+      isFocused: hasFocus,
+      isInvalid,
+      hasValue: hasValue || hasPlaceholder,
+      isFullWidth: !isAutoSized,
+      tweakStyles: tweakControlWrapperStyles,
+      onClear: isClearable && hasValue ? handleInputClear : void 0
+    }, controlProps), {
+      children: hasUnits || isAutoSized ? /* @__PURE__ */ jsx("div", {
+        className: classes.autoSizeWrapper,
+        children: inputContent
+      }) : inputContent
+    }));
+  });
+  function _define_property$R(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+    return obj;
+  }
+  function _object_spread$P(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+      var ownKeys2 = Object.keys(source);
+      if (typeof Object.getOwnPropertySymbols === "function") {
+        ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+      }
+      ownKeys2.forEach(function(key) {
+        _define_property$R(target, key, source[key]);
+      });
+    }
+    return target;
+  }
+  function ownKeys$I(object, enumerableOnly) {
+    var keys2 = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      if (enumerableOnly) {
+        symbols = symbols.filter(function(sym) {
+          return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+      }
+      keys2.push.apply(keys2, symbols);
+    }
+    return keys2;
+  }
+  function _object_spread_props$I(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys$I(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+    return target;
+  }
+  function _object_without_properties$h(source, excluded) {
+    if (source == null)
+      return {};
+    var target = _object_without_properties_loose$h(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0)
+          continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key))
+          continue;
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  function _object_without_properties_loose$h(source, excluded) {
+    if (source == null)
+      return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0)
+        continue;
+      target[key] = source[key];
+    }
+    return target;
+  }
+  var Input = /* @__PURE__ */ React.forwardRef(function(_param, ref) {
+    var infoMessage = _param.infoMessage, errorMessage = _param.errorMessage, isInvalid = _param.isInvalid, testId = _param.testId, tweakStyles = _param.tweakStyles, inputProps = _object_without_properties$h(_param, [
+      "infoMessage",
+      "errorMessage",
+      "isInvalid",
+      "testId",
+      "tweakStyles"
+    ]);
+    var tweakWithMessagesStyles = useTweakStyles({
+      tweakStyles,
+      className: "tweakWithMessages"
     });
-    var _obj1, _obj22;
-    return /* @__PURE__ */ jsxs("div", {
-      className: classes.root,
-      children: [
-        /* @__PURE__ */ jsxs("div", _object_spread_props$I(_object_spread$P({
-          className: clsx(classes.inputWrapper, (_obj1 = {}, _define_property$R(_obj1, classes.required, isRequired && !hasRequiredLabel), _define_property$R(_obj1, classes.invalid, isInvalid), _define_property$R(_obj1, classes.focused, hasFocus), _define_property$R(_obj1, classes.disabled, isDisabled), _define_property$R(_obj1, classes.autosize, isAutoSizeable), _obj1), inlineStyle !== void 0 && classes[inlineStyle], border !== void 0 && classes["border-".concat(border)]),
-          "data-value": isAutoSizeable ? value : void 0
-        }, addDataAttributes(data)), {
-          children: [
-            mask === void 0 ? /* @__PURE__ */ jsx("input", _object_spread$P({
-              ref: ref !== null && ref !== void 0 ? ref : inputRef
-            }, props)) : /* @__PURE__ */ jsx(InputMask, _object_spread$P({
-              ref: ref !== null && ref !== void 0 ? ref : inputRef,
-              mask,
-              maskPlaceholder,
-              alwaysShowMask,
-              beforeMaskedStateChange
-            }, props)),
-            hasLabel && /* @__PURE__ */ jsx("span", {
-              className: clsx(classes.label, (_obj22 = {}, _define_property$R(_obj22, classes.invalidLabel, isInvalid), _define_property$R(_obj22, classes.requiredLabel, hasRequiredLabel && !isRequired), _define_property$R(_obj22, classes.activeLabel, isLabelActive), _define_property$R(_obj22, classes.floating, hasFloatingLabel), // Обсуждаемо, сделал так, потому что не хочется создавать новую пропсу, на каждый чих в стилях
-              _define_property$R(_obj22, classes.floatingWithoutPadding, hasFloatingLabel && border === "bottom"), _obj22)),
-              children: label
-            }),
-            shouldShowUnits && /* @__PURE__ */ jsxs("div", {
-              className: clsx(classes.unitsWrapper, _define_property$R({}, classes.withFloatingLabel, hasFloatingLabel && hasLabel)),
-              children: [
-                /* @__PURE__ */ jsx("span", {
-                  className: classes.fakeValue,
-                  children: value
-                }),
-                /* @__PURE__ */ jsx("span", {
-                  className: classes.units,
-                  children: units
-                })
-              ]
-            }),
-            hasControls && /* @__PURE__ */ jsxs("div", {
-              className: classes.controls,
-              children: [
-                isLoading && /* @__PURE__ */ jsx("div", {
-                  className: clsx(classes.inputIcon, classes.loading),
-                  children: /* @__PURE__ */ jsx(ThemedPreloader, {
-                    tweakStyles: tweakPreloaderStyles
-                  })
-                }),
-                !isDisabled && hasClearIcon && /* @__PURE__ */ jsx("div", {
-                  className: clsx(classes.clearIcon, classes.activeIcon),
-                  onMouseDown: function(event) {
-                    return event.preventDefault();
-                  },
-                  onClick: handleOnInputClear,
-                  children: /* @__PURE__ */ jsx(Icon, {
-                    type: "close"
-                  })
-                }),
-                trueReactPlatformHelpers.isReactNodeNotEmpty(iconType) && /* @__PURE__ */ jsx("div", {
-                  className: clsx(classes.inputIcon, _define_property$R({}, classes.activeIcon, !isDisabled && onIconClick !== void 0)),
-                  onClick: !isDisabled ? onIconClick : void 0,
-                  children: renderIcon(iconType)
-                })
-              ]
-            })
-          ]
-        })),
-        trueReactPlatformHelpers.isStringNotEmpty(infoMessage) && /* @__PURE__ */ jsx("div", {
-          className: classes.info,
-          children: infoMessage
-        }),
-        trueReactPlatformHelpers.isStringNotEmpty(errorMessage) && /* @__PURE__ */ jsx("div", {
-          className: clsx(classes.error, classes["error-".concat(errorPosition)]),
-          children: errorMessage
-        })
-      ]
+    return /* @__PURE__ */ jsx(WithMessages, {
+      errorMessage,
+      infoMessage,
+      testId,
+      tweakStyles: tweakWithMessagesStyles,
+      children: /* @__PURE__ */ jsx(InputBase, _object_spread_props$I(_object_spread$P({}, inputProps), {
+        ref,
+        testId,
+        tweakStyles,
+        isInvalid
+      }))
     });
   });
   var EMPTY_DATE_INPUT_VALUE = "__.__.____";
@@ -10422,10 +10685,10 @@
     }
     return target;
   }
-  function _object_without_properties$f(source, excluded) {
+  function _object_without_properties$g(source, excluded) {
     if (source == null)
       return {};
-    var target = _object_without_properties_loose$f(source, excluded);
+    var target = _object_without_properties_loose$g(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -10440,7 +10703,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$f(source, excluded) {
+  function _object_without_properties_loose$g(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -10455,7 +10718,7 @@
     return target;
   }
   var DateInput = /* @__PURE__ */ React.forwardRef(function(_param, ref) {
-    var date = _param.date, _param_startDate = _param.startDate, startDate = _param_startDate === void 0 ? "" : _param_startDate, _param_endDate = _param.endDate, endDate = _param_endDate === void 0 ? "" : _param_endDate, mask = _param.mask, className = _param.className, placeholder = _param.placeholder, data = _param.data, _param_isRange = _param.isRange, isRange = _param_isRange === void 0 ? false : _param_isRange, tweakStyles = _param.tweakStyles, onClick = _param.onClick, onChange = _param.onChange, inputProps = _object_without_properties$f(_param, [
+    var date = _param.date, _param_startDate = _param.startDate, startDate = _param_startDate === void 0 ? "" : _param_startDate, _param_endDate = _param.endDate, endDate = _param_endDate === void 0 ? "" : _param_endDate, mask = _param.mask, className = _param.className, placeholder = _param.placeholder, data = _param.data, _param_isRange = _param.isRange, isRange = _param_isRange === void 0 ? false : _param_isRange, tweakStyles = _param.tweakStyles, onClick = _param.onClick, onChange = _param.onChange, inputProps = _object_without_properties$g(_param, [
       "date",
       "startDate",
       "endDate",
@@ -10511,7 +10774,7 @@
     }));
   });
   const reactDatepicker = "";
-  var LEFT_PADDING = 44;
+  var Z_INDEX$1 = dimensions.Z_INDEX;
   var useStyles$F = createThemedStyles("SearchInput", {
     root: {
       position: "relative"
@@ -10523,33 +10786,26 @@
       left: 12,
       height: "100%",
       width: 20,
-      zIndex: 2,
-      color: colors.GREY_ACTIVE
-    },
-    iconClickable: {
-      cursor: "pointer"
+      color: colors.GREY_ACTIVE,
+      zIndex: Z_INDEX$1.CONTROL_FOCUS + 1
     }
   });
   var inputStyles$4 = {
-    inputWrapper: {
-      height: 35,
-      borderColor: "transparent",
-      backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
-      borderRadius: 18,
-      paddingLeft: LEFT_PADDING,
-      transitionProperty: "background-color, border-color"
-    },
-    focused: {
-      backgroundColor: colors.CLASSIC_WHITE,
-      borderColor: colors.BORDER_MAIN
+    tweakControlWrapper: {
+      controlWrapper: {
+        borderColor: "transparent",
+        borderRadius: 18,
+        paddingLeft: 0,
+        transitionProperty: "background-color, border-color"
+      },
+      focused: {
+        backgroundColor: colors.CLASSIC_WHITE,
+        borderColor: colors.BORDER_MAIN
+      }
     },
-    input: {
+    inputContent: {
       fontSize: 14,
-      paddingLeft: 0
-    },
-    label: {
-      left: LEFT_PADDING,
-      fontSize: 14
+      paddingLeft: 44
     }
   };
   function _define_property$P(obj, key, value) {
@@ -10604,10 +10860,10 @@
     }
     return target;
   }
-  function _object_without_properties$e(source, excluded) {
+  function _object_without_properties$f(source, excluded) {
     if (source == null)
       return {};
-    var target = _object_without_properties_loose$e(source, excluded);
+    var target = _object_without_properties_loose$f(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -10622,7 +10878,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$e(source, excluded) {
+  function _object_without_properties_loose$f(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -10637,12 +10893,13 @@
     return target;
   }
   var SearchInput = function(_param) {
-    var _param_isClearable = _param.isClearable, isClearable = _param_isClearable === void 0 ? true : _param_isClearable, tweakStyles = _param.tweakStyles, testId = _param.testId, data = _param.data, onSearchIconClick = _param.onSearchIconClick, props = _object_without_properties$e(_param, [
+    var _param_isClearable = _param.isClearable, isClearable = _param_isClearable === void 0 ? true : _param_isClearable, tweakStyles = _param.tweakStyles, placeholder = _param.placeholder, value = _param.value, testId = _param.testId, data = _param.data, props = _object_without_properties$f(_param, [
       "isClearable",
       "tweakStyles",
+      "placeholder",
+      "value",
       "testId",
-      "data",
-      "onSearchIconClick"
+      "data"
     ]);
     var classes = useStyles$F({
       theme: tweakStyles
@@ -10655,23 +10912,20 @@
     });
     return /* @__PURE__ */ jsxs("div", _object_spread_props$G(_object_spread$N({
       className: classes.root
-    }, trueReactPlatformHelpers.addDataAttributes(data, testId)), {
+    }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)), {
       children: [
-        /* @__PURE__ */ jsx("div", _object_spread_props$G(_object_spread$N({
-          className: clsx(classes.icon, _define_property$P({}, classes.iconClickable, trueReactPlatformHelpers.isNotEmpty(onSearchIconClick)))
-        }, trueReactPlatformHelpers.addClickHandler(onSearchIconClick)), {
+        /* @__PURE__ */ jsx("div", {
+          className: classes.icon,
           children: /* @__PURE__ */ jsx(Icon, {
             type: "search"
           })
-        })),
+        }),
         /* @__PURE__ */ jsx(Input, _object_spread$N({
-          inputMode: "search",
+          value,
+          placeholder,
           isClearable,
-          isActive: props.value !== "" && props.value !== void 0,
           testId: trueReactPlatformHelpers.getTestId(testId, "input"),
-          tweakStyles: tweakInputStyles,
-          hasFloatingLabel: false,
-          label: props.placeholder
+          tweakStyles: tweakInputStyles
         }, props))
       ]
     }));
@@ -10761,10 +11015,10 @@
     }
     return target;
   }
-  function _object_without_properties$d(source, excluded) {
+  function _object_without_properties$e(source, excluded) {
     if (source == null)
       return {};
-    var target = _object_without_properties_loose$d(source, excluded);
+    var target = _object_without_properties_loose$e(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -10779,7 +11033,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$d(source, excluded) {
+  function _object_without_properties_loose$e(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -10882,7 +11136,7 @@
           _this_props.active;
           var elementType = _this_props.elementType, children = _this_props.children;
           _this_props.options;
-          var wrapperProps = _object_without_properties$d(_this_props, [
+          var wrapperProps = _object_without_properties$e(_this_props, [
             "active",
             "elementType",
             "children",
@@ -11244,6 +11498,7 @@
       return trueReactPlatformHelpers.isNotEmpty(value === null || value === void 0 ? void 0 : value.id) ? String(value.id) : convertValueToString(value);
     };
   };
+  var CONTROL = dimensions.CONTROL, Z_INDEX = dimensions.Z_INDEX;
   var useStyles$D = createThemedStyles("Select", {
     root: {
       width: "100%",
@@ -11263,7 +11518,8 @@
     },
     withoutPopper: {
       position: "absolute",
-      top: "calc(var(--dropdown-offset, 100%) + 6px)"
+      top: "100%",
+      paddingTop: 4
     },
     listWrapperInBody: {
       minWidth: "auto",
@@ -11273,16 +11529,17 @@
     arrow: {
       position: "absolute",
       right: 12,
-      top: 14,
+      top: "50%",
       width: 20,
       height: 20,
       cursor: "pointer",
-      zIndex: 1,
+      transform: "translateY(-50%)",
       transition: animations.defaultTransition,
-      transitionProperty: "transform"
+      transitionProperty: "transform",
+      zIndex: Z_INDEX.CONTROL_FOCUS + 1
     },
     activeArrow: {
-      transform: "rotate(180deg)"
+      transform: "translateY(-50%) rotate(180deg)"
     },
     disabled: {
       "& $arrow": {
@@ -11295,21 +11552,32 @@
       }
     },
     icon: {
-      width: 16,
-      height: 16
+      width: CONTROL.ICON_INNER_SIZE,
+      height: CONTROL.ICON_INNER_SIZE
+    },
+    iconWrapper: {
+      display: "flex",
+      alignItems: "center"
     }
   });
   var baseInputStyles = {
-    input: {
+    inputContent: {
       paddingRight: 32
     },
-    disabled: {
-      "& $input": {
-        cursor: "default"
+    input: {
+      "&[readonly]": {
+        cursor: "pointer"
       }
     },
-    controls: {
-      paddingRight: 32
+    tweakControlWrapper: {
+      controls: {
+        paddingRight: 40
+      },
+      icon: {
+        "&:last-child": {
+          paddingRight: 0
+        }
+      }
     }
   };
   var readonlyInputBaseStyles = {
@@ -11317,16 +11585,8 @@
       cursor: "pointer"
     }
   };
-  var multiSelectInputBaseStyles = {
-    inputIcon: {
-      "&:not($loading)": {
-        width: "auto"
-      }
-    }
-  };
   var readonlyInputStyles = trueReactPlatformHelpers.mergeStyles(baseInputStyles, readonlyInputBaseStyles);
-  var multiSelectInputStyles = trueReactPlatformHelpers.mergeStyles(baseInputStyles, multiSelectInputBaseStyles);
-  var readonlyMultiSelectStyles = trueReactPlatformHelpers.mergeStyles(baseInputStyles, readonlyInputBaseStyles, multiSelectInputBaseStyles);
+  var readonlyMultiSelectStyles = trueReactPlatformHelpers.mergeStyles(baseInputStyles, readonlyInputBaseStyles);
   var getInputStyles = function(param) {
     var hasReadonlyInput = param.hasReadonlyInput, isMultiSelect = param.isMultiSelect;
     if (hasReadonlyInput && isMultiSelect) {
@@ -11335,21 +11595,8 @@
     if (hasReadonlyInput && !isMultiSelect) {
       return readonlyInputStyles;
     }
-    if (!hasReadonlyInput && isMultiSelect) {
-      return multiSelectInputStyles;
-    }
     return baseInputStyles;
   };
-  var searchInputStyles$3 = {
-    tweakInput: {
-      inputWrapper: {
-        height: 48,
-        borderRadius: 0,
-        border: "none",
-        backgroundColor: "transparent"
-      }
-    }
-  };
   function _array_like_to_array$i(arr, len) {
     if (len == null || len > arr.length)
       len = arr.length;
@@ -11484,10 +11731,10 @@
     }
     return target;
   }
-  function _object_without_properties$c(source, excluded) {
+  function _object_without_properties$d(source, excluded) {
     if (source == null)
       return {};
-    var target = _object_without_properties_loose$c(source, excluded);
+    var target = _object_without_properties_loose$d(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -11502,7 +11749,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$c(source, excluded) {
+  function _object_without_properties_loose$d(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -11639,7 +11886,7 @@
   }
   function Select(props) {
     var _input_current;
-    var options = props.options, isMultiSelect = props.isMultiSelect, value = props.value, header = props.header, footer = props.footer, defaultOptionLabel = props.defaultOptionLabel, allOptionsLabel = props.allOptionsLabel, _props_debounceTime = props.debounceTime, debounceTime = _props_debounceTime === void 0 ? 400 : _props_debounceTime, _props_optionsMode = props.optionsMode, optionsMode = _props_optionsMode === void 0 ? "normal" : _props_optionsMode, noMatchesLabel = props.noMatchesLabel, loadingLabel = props.loadingLabel, tweakStyles = props.tweakStyles, testId = props.testId, isActive = props.isActive, isReadonly = props.isReadonly, isDisabled = props.isDisabled, dropdownOptions = props.dropdownOptions, _props_minSymbolsCountToOpenList = props.minSymbolsCountToOpenList, minSymbolsCountToOpenList = _props_minSymbolsCountToOpenList === void 0 ? 0 : _props_minSymbolsCountToOpenList, _props_dropdownIcon = props.dropdownIcon, dropdownIcon = _props_dropdownIcon === void 0 ? "chevron-down" : _props_dropdownIcon, _props_shouldScrollToList = props.shouldScrollToList, shouldScrollToList = _props_shouldScrollToList === void 0 ? true : _props_shouldScrollToList, searchInput = props.searchInput, iconType = props.iconType, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onType = props.onType, onOpen = props.onOpen, _props_isOptionDisabled = props.isOptionDisabled, isOptionDisabled = _props_isOptionDisabled === void 0 ? defaultIsOptionDisabled : _props_isOptionDisabled, _props_compareValuesOnChange = props.compareValuesOnChange, compareValuesOnChange = _props_compareValuesOnChange === void 0 ? defaultCompareFunction : _props_compareValuesOnChange, _props_convertValueToString = props.convertValueToString, convertValueToString = _props_convertValueToString === void 0 ? defaultConvertFunction$2 : _props_convertValueToString, convertValueToId = props.convertValueToId, convertValueToReactNode = props.convertValueToReactNode, optionsFilter = props.optionsFilter, inputProps = _object_without_properties$c(props, [
+    var options = props.options, isMultiSelect = props.isMultiSelect, value = props.value, header = props.header, footer = props.footer, defaultOptionLabel = props.defaultOptionLabel, allOptionsLabel = props.allOptionsLabel, _props_debounceTime = props.debounceTime, debounceTime = _props_debounceTime === void 0 ? 400 : _props_debounceTime, _props_optionsMode = props.optionsMode, optionsMode = _props_optionsMode === void 0 ? "normal" : _props_optionsMode, noMatchesLabel = props.noMatchesLabel, loadingLabel = props.loadingLabel, tweakStyles = props.tweakStyles, testId = props.testId, isActive = props.isActive, isReadonly = props.isReadonly, isDisabled = props.isDisabled, dropdownOptions = props.dropdownOptions, _props_minSymbolsCountToOpenList = props.minSymbolsCountToOpenList, minSymbolsCountToOpenList = _props_minSymbolsCountToOpenList === void 0 ? 0 : _props_minSymbolsCountToOpenList, _props_dropdownIcon = props.dropdownIcon, dropdownIcon = _props_dropdownIcon === void 0 ? "chevron-down" : _props_dropdownIcon, _props_shouldScrollToList = props.shouldScrollToList, shouldScrollToList = _props_shouldScrollToList === void 0 ? true : _props_shouldScrollToList, searchInput = props.searchInput, icon = props.icon, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onType = props.onType, onOpen = props.onOpen, _props_isOptionDisabled = props.isOptionDisabled, isOptionDisabled = _props_isOptionDisabled === void 0 ? defaultIsOptionDisabled : _props_isOptionDisabled, _props_compareValuesOnChange = props.compareValuesOnChange, compareValuesOnChange = _props_compareValuesOnChange === void 0 ? defaultCompareFunction : _props_compareValuesOnChange, _props_convertValueToString = props.convertValueToString, convertValueToString = _props_convertValueToString === void 0 ? defaultConvertFunction$2 : _props_convertValueToString, convertValueToId = props.convertValueToId, convertValueToReactNode = props.convertValueToReactNode, optionsFilter = props.optionsFilter, infoMessage = props.infoMessage, errorMessage = props.errorMessage, inputProps = _object_without_properties$d(props, [
       "options",
       "isMultiSelect",
       "value",
@@ -11661,7 +11908,7 @@
       "dropdownIcon",
       "shouldScrollToList",
       "searchInput",
-      "iconType",
+      "icon",
       "onChange",
       "onFocus",
       "onBlur",
@@ -11672,16 +11919,23 @@
       "convertValueToString",
       "convertValueToId",
       "convertValueToReactNode",
-      "optionsFilter"
+      "optionsFilter",
+      "infoMessage",
+      "errorMessage"
     ]);
     var classes = useStyles$D({
       theme: tweakStyles
     });
-    var _ref = searchInput !== null && searchInput !== void 0 ? searchInput : {}, tmp = _ref.shouldRenderInList, shouldRenderSearchInputInList = tmp === void 0 ? false : tmp, searchInputProps = _object_without_properties$c(_ref, [
+    var _ref = searchInput !== null && searchInput !== void 0 ? searchInput : {}, tmp = _ref.shouldRenderInList, shouldRenderSearchInputInList = tmp === void 0 ? false : tmp, searchInputProps = _object_without_properties$d(_ref, [
       "shouldRenderInList"
     ]);
     var hasSearchInputInList = optionsMode !== "normal" && shouldRenderSearchInputInList;
     var hasReadonlyInput = isReadonly || optionsMode === "normal" || shouldRenderSearchInputInList;
+    var tweakWithMessagesStyles = useTweakStyles({
+      tweakStyles,
+      className: "tweakWithMessages",
+      currentComponentName: "Select"
+    });
     var tweakInputStyles = useTweakStyles({
       innerStyles: getInputStyles({
         hasReadonlyInput,
@@ -11692,7 +11946,6 @@
       currentComponentName: "Select"
     });
     var tweakSearchInputStyles = useTweakStyles({
-      innerStyles: searchInputStyles$3,
       tweakStyles,
       className: "tweakSearchInput",
       currentComponentName: "Select"
@@ -11772,22 +12025,10 @@
       convertValueToId,
       convertValueToString
     ]);
-    var getDropdownOffset = function() {
-      var _input_current_parentElement2;
-      if (trueReactPlatformHelpers.isEmpty(input.current) || inputProps.errorPosition === "top") {
-        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
     ]);
@@ -11799,15 +12040,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) {
@@ -12086,7 +12320,8 @@
         onToggleCheckbox: handleToggleOptionCheckbox
       })
     }));
-    var multiSelectCounterWithIcon = shouldShowMultiSelectCounter || trueReactPlatformHelpers.isNotEmpty(iconType) ? /* @__PURE__ */ jsxs(Fragment, {
+    var multiSelectCounterWithIcon = shouldShowMultiSelectCounter || trueReactPlatformHelpers.isNotEmpty(icon) ? /* @__PURE__ */ jsxs("div", {
+      className: classes.iconWrapper,
       children: [
         shouldShowMultiSelectCounter && /* @__PURE__ */ jsxs("div", {
           className: classes.counter,
@@ -12096,59 +12331,62 @@
             ")"
           ]
         }),
-        trueReactPlatformHelpers.isNotEmpty(iconType) && /* @__PURE__ */ jsx("div", {
+        trueReactPlatformHelpers.isNotEmpty(icon) && /* @__PURE__ */ jsx("div", {
           className: classes.icon,
-          children: renderIcon(iconType)
+          children: renderIcon(icon)
         })
       ]
     }) : void 0;
-    return /* @__PURE__ */ jsxs("div", {
-      className: classes.root,
-      onKeyDown: handleKeyDown,
-      ref: root2,
-      children: [
-        /* @__PURE__ */ jsxs("div", {
-          className: clsx(classes.inputWrapper, isDisabled && classes.disabled),
-          onClick: isDisabled || isReadonly ? void 0 : handleOnClick,
-          ref: inputWrapper,
-          children: [
-            /* @__PURE__ */ jsx(Input, _object_spread$I({
-              value: searchValue !== "" && !shouldRenderSearchInputInList ? searchValue : showedStringValue,
-              onChange: handleInputChange,
-              isActive: isListOpen || isActive,
-              isReadonly: hasReadonlyInput,
-              onFocus: handleFocus,
-              onBlur: handleBlur,
-              isDisabled,
-              ref: input,
-              isLoading: areOptionsLoading,
-              tweakStyles: tweakInputStyles,
-              testId,
-              iconType: isMultiSelect ? multiSelectCounterWithIcon : iconType
-            }, inputProps)),
-            /* @__PURE__ */ jsx("div", {
-              onMouseDown: function(event) {
-                event.preventDefault();
-              },
-              onClick: onArrowClick,
-              className: clsx(classes.arrow, isOpen && classes.activeArrow),
-              children: renderIcon(dropdownIcon)
+    return /* @__PURE__ */ jsx(WithMessages, {
+      errorMessage,
+      infoMessage,
+      tweakStyles: tweakWithMessagesStyles,
+      children: /* @__PURE__ */ jsxs("div", {
+        className: classes.root,
+        onKeyDown: handleKeyDown,
+        ref: root2,
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            className: clsx(classes.inputWrapper, isDisabled && classes.disabled),
+            onClick: isDisabled || isReadonly ? void 0 : handleOnClick,
+            ref: inputWrapper,
+            children: [
+              /* @__PURE__ */ jsx(InputBase, _object_spread$I({
+                value: searchValue !== "" && !shouldRenderSearchInputInList ? searchValue : showedStringValue,
+                onChange: handleInputChange,
+                isActive: isListOpen || isActive,
+                isReadonly: hasReadonlyInput,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                isDisabled,
+                ref: input,
+                isLoading: areOptionsLoading,
+                tweakStyles: tweakInputStyles,
+                testId,
+                icon: isMultiSelect ? multiSelectCounterWithIcon : icon
+              }, inputProps)),
+              /* @__PURE__ */ jsx("div", {
+                onMouseDown: function(event) {
+                  event.preventDefault();
+                },
+                onClick: onArrowClick,
+                className: clsx(classes.arrow, isOpen && classes.activeArrow),
+                children: renderIcon(dropdownIcon)
+              })
+            ]
+          }),
+          shouldUsePopper ? /* @__PURE__ */ jsx(reactOverlays.Portal, {
+            container: shouldRenderInBody ? document.body : inputWrapper.current,
+            children: /* @__PURE__ */ jsx(Fragment, {
+              children: listEl
             })
-          ]
-        }),
-        shouldUsePopper ? /* @__PURE__ */ jsx(reactOverlays.Portal, {
-          container: shouldRenderInBody ? document.body : inputWrapper.current,
-          children: /* @__PURE__ */ jsx(Fragment, {
-            children: listEl
+          }) : /* @__PURE__ */ jsx(Fragment, {
+            children: isOpen && listEl
           })
-        }) : /* @__PURE__ */ jsx(Fragment, {
-          children: isOpen && listEl
-        })
-      ]
+        ]
+      })
     });
   }
-  var SELECT_PADDING_LEFT = 12;
-  var SELECT_PADDING_RIGHT = 24;
   var useStyles$C = createThemedStyles("DatePickerHeader", {
     btn: {
       width: 36,
@@ -12160,26 +12398,6 @@
       cursor: "pointer",
       marginLeft: 8
     },
-    select: {
-      height: 35,
-      fontSize: 16,
-      position: "relative"
-    },
-    selectValue: {
-      fontSize: 16,
-      fontWeight: "bold",
-      color: "transparent",
-      pointerEvents: "none",
-      paddingLeft: SELECT_PADDING_LEFT,
-      paddingRight: SELECT_PADDING_RIGHT
-    },
-    selectControl: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      width: "100%",
-      height: "100%"
-    },
     header: {
       margin: 6,
       display: "flex",
@@ -12197,22 +12415,16 @@
         minHeight: 35
       }
     },
-    arrow: {
-      right: 0,
-      top: 9,
-      width: 16,
-      height: 16
-    },
     tweakInput: {
-      inputWrapper: {
-        height: 35,
-        border: "none"
+      tweakControlWrapper: {
+        controlWrapper: {
+          "--control-height": "35px",
+          border: "none"
+        }
       },
-      input: {
+      inputContent: {
         fontSize: 16,
-        fontWeight: "bold",
-        paddingRight: SELECT_PADDING_RIGHT - 8,
-        paddingLeft: SELECT_PADDING_LEFT
+        fontWeight: "bold"
       }
     }
   };
@@ -12235,47 +12447,25 @@
     return /* @__PURE__ */ jsxs("div", {
       className: classes.header,
       children: [
-        /* @__PURE__ */ jsxs("div", {
-          className: classes.select,
-          children: [
-            /* @__PURE__ */ jsx("div", {
-              className: classes.selectValue,
-              children: months[dateFns.getMonth(date)]
-            }),
-            /* @__PURE__ */ jsx("div", {
-              className: classes.selectControl,
-              children: /* @__PURE__ */ jsx(Select, {
-                value: months[dateFns.getMonth(date)],
-                options: months,
-                dropdownIcon: "chevron-down-small",
-                tweakStyles: tweakSelectStyles,
-                onChange: function(value) {
-                  return changeMonth(months.indexOf(value));
-                }
-              })
-            })
-          ]
+        /* @__PURE__ */ jsx(Select, {
+          value: months[dateFns.getMonth(date)],
+          options: months,
+          dropdownIcon: "chevron-down-small",
+          isAutoSized: true,
+          tweakStyles: tweakSelectStyles,
+          onChange: function(value) {
+            return changeMonth(months.indexOf(value));
+          }
         }),
-        /* @__PURE__ */ jsxs("div", {
-          className: classes.select,
-          children: [
-            /* @__PURE__ */ jsx("div", {
-              className: classes.selectValue,
-              children: dateFns.getYear(date)
-            }),
-            /* @__PURE__ */ jsx("div", {
-              className: classes.selectControl,
-              children: /* @__PURE__ */ jsx(Select, {
-                value: dateFns.getYear(date),
-                options: years,
-                dropdownIcon: "chevron-down-small",
-                tweakStyles: tweakSelectStyles,
-                onChange: function(value) {
-                  return changeYear(value);
-                }
-              })
-            })
-          ]
+        /* @__PURE__ */ jsx(Select, {
+          value: dateFns.getYear(date),
+          options: years,
+          dropdownIcon: "chevron-down-small",
+          isAutoSized: true,
+          tweakStyles: tweakSelectStyles,
+          onChange: function(value) {
+            return changeYear(value);
+          }
         }),
         /* @__PURE__ */ jsxs("div", {
           className: classes.buttons,
@@ -12444,10 +12634,10 @@
     }
     return target;
   }
-  function _object_without_properties$b(source, excluded) {
+  function _object_without_properties$c(source, excluded) {
     if (source == null)
       return {};
-    var target = _object_without_properties_loose$b(source, excluded);
+    var target = _object_without_properties_loose$c(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -12462,7 +12652,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$b(source, excluded) {
+  function _object_without_properties_loose$c(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -12493,7 +12683,7 @@
       return _array_like_to_array$h(o, minLen);
   }
   var DatePicker = /* @__PURE__ */ React.forwardRef(function(_param, ref) {
-    var data = _param.data, _param_selectedDate = _param.selectedDate, selectedDate = _param_selectedDate === void 0 ? null : _param_selectedDate, minDate = _param.minDate, maxDate = _param.maxDate, _param_endDate = _param.endDate, endDate = _param_endDate === void 0 ? null : _param_endDate, _param_startDate = _param.startDate, startDate = _param_startDate === void 0 ? null : _param_startDate, locale2 = _param.locale, months = _param.months, _param_calendarStartDay = _param.calendarStartDay, calendarStartDay = _param_calendarStartDay === void 0 ? 1 : _param_calendarStartDay, _param_dateFormat = _param.dateFormat, dateFormat = _param_dateFormat === void 0 ? DEFAULT_DATE_FORMAT$2 : _param_dateFormat, monthsShown = _param.monthsShown, placeholder = _param.placeholder, _param_isRange = _param.isRange, isRange = _param_isRange === void 0 ? false : _param_isRange, _param_isInline = _param.isInline, isInline = _param_isInline === void 0 ? false : _param_isInline, isDisabled = _param.isDisabled, isClearable = _param.isClearable, strictParsing = _param.strictParsing, fixedHeight = _param.fixedHeight, excludeScrollbar = _param.excludeScrollbar, focusSelectedMonth = _param.focusSelectedMonth, disabledKeyboardNavigation = _param.disabledKeyboardNavigation, _param_shouldRenderPopperInBody = _param.shouldRenderPopperInBody, shouldRenderPopperInBody = _param_shouldRenderPopperInBody === void 0 ? false : _param_shouldRenderPopperInBody, _param_allowSameDay = _param.allowSameDay, allowSameDay = _param_allowSameDay === void 0 ? false : _param_allowSameDay, shouldCloseOnSelect = _param.shouldCloseOnSelect, showPreviousMonths = _param.showPreviousMonths, preventOpenOnFocus = _param.preventOpenOnFocus, popperModifiers = _param.popperModifiers, popperPlacement = _param.popperPlacement, todayButton = _param.todayButton, highlightDates = _param.highlightDates, calendarContainer = _param.calendarContainer, dayClassName = _param.dayClassName, tmp = _param.customInput, CustomInput = tmp === void 0 ? DateInput : tmp, customInputRef = _param.customInputRef, renderCustomHeader = _param.renderCustomHeader, filterDate = _param.filterDate, onYearChange = _param.onYearChange, onMonthChange = _param.onMonthChange, onCalendarOpen = _param.onCalendarOpen, onCalendarClose = _param.onCalendarClose, onChangeDate = _param.onChangeDate, onChangeRange = _param.onChangeRange, onBlur = _param.onBlur, onFocus = _param.onFocus, onKeyDown = _param.onKeyDown, tweakStyles = _param.tweakStyles, inputProps = _object_without_properties$b(_param, [
+    var data = _param.data, _param_selectedDate = _param.selectedDate, selectedDate = _param_selectedDate === void 0 ? null : _param_selectedDate, minDate = _param.minDate, maxDate = _param.maxDate, _param_endDate = _param.endDate, endDate = _param_endDate === void 0 ? null : _param_endDate, _param_startDate = _param.startDate, startDate = _param_startDate === void 0 ? null : _param_startDate, locale2 = _param.locale, months = _param.months, _param_calendarStartDay = _param.calendarStartDay, calendarStartDay = _param_calendarStartDay === void 0 ? 1 : _param_calendarStartDay, _param_dateFormat = _param.dateFormat, dateFormat = _param_dateFormat === void 0 ? DEFAULT_DATE_FORMAT$2 : _param_dateFormat, monthsShown = _param.monthsShown, placeholder = _param.placeholder, _param_isRange = _param.isRange, isRange = _param_isRange === void 0 ? false : _param_isRange, _param_isInline = _param.isInline, isInline = _param_isInline === void 0 ? false : _param_isInline, isDisabled = _param.isDisabled, isClearable = _param.isClearable, strictParsing = _param.strictParsing, fixedHeight = _param.fixedHeight, excludeScrollbar = _param.excludeScrollbar, focusSelectedMonth = _param.focusSelectedMonth, disabledKeyboardNavigation = _param.disabledKeyboardNavigation, _param_shouldRenderPopperInBody = _param.shouldRenderPopperInBody, shouldRenderPopperInBody = _param_shouldRenderPopperInBody === void 0 ? false : _param_shouldRenderPopperInBody, _param_allowSameDay = _param.allowSameDay, allowSameDay = _param_allowSameDay === void 0 ? false : _param_allowSameDay, shouldCloseOnSelect = _param.shouldCloseOnSelect, showPreviousMonths = _param.showPreviousMonths, preventOpenOnFocus = _param.preventOpenOnFocus, popperModifiers = _param.popperModifiers, popperPlacement = _param.popperPlacement, todayButton = _param.todayButton, highlightDates = _param.highlightDates, calendarContainer = _param.calendarContainer, dayClassName = _param.dayClassName, tmp = _param.customInput, CustomInput = tmp === void 0 ? DateInput : tmp, customInputRef = _param.customInputRef, renderCustomHeader = _param.renderCustomHeader, filterDate = _param.filterDate, onYearChange = _param.onYearChange, onMonthChange = _param.onMonthChange, onCalendarOpen = _param.onCalendarOpen, onCalendarClose = _param.onCalendarClose, onChangeDate = _param.onChangeDate, onChangeRange = _param.onChangeRange, onBlur = _param.onBlur, onFocus = _param.onFocus, onKeyDown = _param.onKeyDown, tweakStyles = _param.tweakStyles, inputProps = _object_without_properties$c(_param, [
       "data",
       "selectedDate",
       "minDate",
@@ -12569,7 +12759,7 @@
       isDisabled,
       isClearable,
       isActive: isOpen,
-      iconType: isClearable && hasDateInputValue ? void 0 : "calendar",
+      icon: isClearable && hasDateInputValue ? void 0 : "calendar",
       tweakStyles: tweakDateInputStyles
     }), isRange ? {
       startDate: startDateValue,
@@ -13311,10 +13501,10 @@
     }
     return target;
   }
-  function _object_without_properties$a(source, excluded) {
+  function _object_without_properties$b(source, excluded) {
     if (source == null)
       return {};
-    var target = _object_without_properties_loose$a(source, excluded);
+    var target = _object_without_properties_loose$b(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -13329,7 +13519,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$a(source, excluded) {
+  function _object_without_properties_loose$b(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -13344,7 +13534,7 @@
     return target;
   }
   var IconButton = /* @__PURE__ */ React.forwardRef(function(_param, ref) {
-    var icon = _param.icon, _param_size = _param.size, size = _param_size === void 0 ? "m" : _param_size, _param_view = _param.view, view = _param_view === void 0 ? "cancel-light" : _param_view, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, testId = _param.testId, tweakStyles = _param.tweakStyles, data = _param.data, onClick = _param.onClick, restProps = _object_without_properties$a(_param, [
+    var icon = _param.icon, _param_size = _param.size, size = _param_size === void 0 ? "m" : _param_size, _param_view = _param.view, view = _param_view === void 0 ? "cancel-light" : _param_view, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isActive = _param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_type = _param.type, type = _param_type === void 0 ? "button" : _param_type, testId = _param.testId, tweakStyles = _param.tweakStyles, data = _param.data, onClick = _param.onClick, restProps = _object_without_properties$b(_param, [
       "icon",
       "size",
       "view",
@@ -14268,10 +14458,10 @@
     }
     return target;
   }
-  function _object_without_properties$9(source, excluded) {
+  function _object_without_properties$a(source, excluded) {
     if (source == null)
       return {};
-    var target = _object_without_properties_loose$9(source, excluded);
+    var target = _object_without_properties_loose$a(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -14286,7 +14476,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$9(source, excluded) {
+  function _object_without_properties_loose$a(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -14419,7 +14609,7 @@
     }
   }
   var NumberInput = /* @__PURE__ */ React.forwardRef(function(_param, ref) {
-    var value = _param.value, _param_canBeFloat = _param.canBeFloat, canBeFloat = _param_canBeFloat === void 0 ? false : _param_canBeFloat, _param_canBeNegative = _param.canBeNegative, canBeNegative = _param_canBeNegative === void 0 ? false : _param_canBeNegative, defaultValue = _param.defaultValue, _param_precision = _param.precision, precision = _param_precision === void 0 ? 3 : _param_precision, _param_intPartPrecision = _param.intPartPrecision, intPartPrecision = _param_intPartPrecision === void 0 ? 7 : _param_intPartPrecision, onChange = _param.onChange, onBlur = _param.onBlur, min2 = _param.min, max2 = _param.max, props = _object_without_properties$9(_param, [
+    var value = _param.value, _param_canBeFloat = _param.canBeFloat, canBeFloat = _param_canBeFloat === void 0 ? false : _param_canBeFloat, _param_canBeNegative = _param.canBeNegative, canBeNegative = _param_canBeNegative === void 0 ? false : _param_canBeNegative, defaultValue = _param.defaultValue, _param_precision = _param.precision, precision = _param_precision === void 0 ? 3 : _param_precision, _param_intPartPrecision = _param.intPartPrecision, intPartPrecision = _param_intPartPrecision === void 0 ? 7 : _param_intPartPrecision, onChange = _param.onChange, onBlur = _param.onBlur, min2 = _param.min, max2 = _param.max, props = _object_without_properties$a(_param, [
       "value",
       "canBeFloat",
       "canBeNegative",
@@ -14900,11 +15090,13 @@
     input: {
       minWidth: 120
     },
-    icon: {
-      padding: 0,
-      width: 24,
-      "&:last-child": {
-        paddingRight: 0
+    tweakControlWrapper: {
+      icon: {
+        padding: 0,
+        width: 24,
+        "&:last-child": {
+          paddingRight: 0
+        }
       }
     }
   };
@@ -15020,7 +15212,6 @@
                   onChange: handleFromChange,
                   value: value === null || value === void 0 ? void 0 : value[0],
                   label: withFieldNameInLabel ? "".concat(labelName, " ").concat(translates.from.toLocaleLowerCase()) : translates.from,
-                  border: "bottom",
                   canBeFloat,
                   isClearable: true,
                   min: fromInput === null || fromInput === void 0 ? void 0 : fromInput.min,
@@ -15045,7 +15236,6 @@
                   onChange: handleToChange,
                   value: value === null || value === void 0 ? void 0 : value[1],
                   label: withFieldNameInLabel ? "".concat(labelName, " ").concat(translates.to.toLocaleLowerCase()) : translates.to,
-                  border: "bottom",
                   canBeFloat,
                   isClearable: true,
                   min: toInput === null || toInput === void 0 ? void 0 : toInput.min,
@@ -15220,10 +15410,12 @@
   });
   var searchInputStyles$2 = {
     tweakInput: {
-      inputWrapper: {
-        backgroundColor: "transparent",
-        border: "none",
-        height: 40
+      tweakControlWrapper: {
+        controlWrapper: {
+          "--control-height": "40px",
+          backgroundColor: "transparent",
+          border: "none"
+        }
       }
     }
   };
@@ -16178,10 +16370,12 @@
   });
   var searchInputStyles$1 = {
     tweakInput: {
-      inputWrapper: {
-        backgroundColor: "transparent",
-        border: "none",
-        height: 40
+      tweakControlWrapper: {
+        controlWrapper: {
+          "--control-height": "40px",
+          backgroundColor: "transparent",
+          border: "none"
+        }
       }
     }
   };
@@ -18203,7 +18397,6 @@
                 locale: dateLocale,
                 onChangeDate: handleChangeFrom,
                 tweakStyles: tweakStartDatePickerStyles,
-                border: "bottom",
                 testId: trueReactPlatformHelpers.getTestId(testId, "from"),
                 isClearable
               }, startPickerProps))
@@ -18218,7 +18411,6 @@
                 locale: dateLocale,
                 onChangeDate: handleChangeTo,
                 tweakStyles: tweakEndDatePickerStyles,
-                border: "bottom",
                 testId: trueReactPlatformHelpers.getTestId(testId, "to"),
                 isClearable
               }, endPickerProps))
@@ -18765,16 +18957,17 @@
   });
   var searchInputStyles = {
     tweakInput: {
-      inputWrapper: {
-        backgroundColor: "transparent",
-        border: "none",
-        height: FILTER_HEIGHT - 2,
-        fontSize: 14,
-        minWidth: 140
-      },
-      focused: {
-        backgroundColor: "transparent",
-        border: "none"
+      tweakControlWrapper: {
+        controlWrapper: {
+          "--control-height": "".concat(FILTER_HEIGHT - 2, "px"),
+          backgroundColor: "transparent",
+          border: "none",
+          minWidth: 140
+        },
+        focused: {
+          backgroundColor: "transparent",
+          border: "none"
+        }
       }
     }
   };
@@ -18898,7 +19091,7 @@
       return _array_like_to_array$8(o, minLen);
   }
   function FiltersPaneSearch(param) {
-    var value = param.value, _param_fields = param.fields, fields = _param_fields === void 0 ? [] : _param_fields, field = param.field, onChange = param.onChange, localeKey = param.localeKey, locale2 = param.locale, getValueId = param.getValueId, getValueView = param.getValueView, getValueString = param.getValueString, hasClearSelectButton = param.hasClearSelectButton, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isSelectSearchEnabled = param.isSelectSearchEnabled, isSelectSearchEnabled = _param_isSelectSearchEnabled === void 0 ? true : _param_isSelectSearchEnabled, _param_isAutoSizeable = param.isAutoSizeable, isAutoSizeable = _param_isAutoSizeable === void 0 ? true : _param_isAutoSizeable, maxLength = param.maxLength, data = param.data, tweakStyles = param.tweakStyles, testId = param.testId;
+    var value = param.value, _param_fields = param.fields, fields = _param_fields === void 0 ? [] : _param_fields, field = param.field, onChange = param.onChange, localeKey = param.localeKey, locale2 = param.locale, getValueId = param.getValueId, getValueView = param.getValueView, getValueString = param.getValueString, hasClearSelectButton = param.hasClearSelectButton, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, _param_isSelectSearchEnabled = param.isSelectSearchEnabled, isSelectSearchEnabled = _param_isSelectSearchEnabled === void 0 ? true : _param_isSelectSearchEnabled, maxLength = param.maxLength, data = param.data, tweakStyles = param.tweakStyles, testId = param.testId;
     var classes = useStyles$o({
       theme: tweakStyles
     });
@@ -18964,7 +19157,6 @@
           },
           testId: testId !== void 0 ? "".concat(testId, "-input") : void 0,
           maxLength,
-          isAutoSizeable,
           isDisabled
         }),
         /* @__PURE__ */ jsxs("div", {
@@ -26048,10 +26240,10 @@
     }
     return target;
   }
-  function _object_without_properties$8(source, excluded) {
+  function _object_without_properties$9(source, excluded) {
     if (source == null)
       return {};
-    var target = _object_without_properties_loose$8(source, excluded);
+    var target = _object_without_properties_loose$9(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -26066,7 +26258,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$8(source, excluded) {
+  function _object_without_properties_loose$9(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -26081,7 +26273,7 @@
     return target;
   }
   function FlexibleTableCell(_param) {
-    var row = _param.row, columnName = _param.columnName, config = _param.config, renderMode = _param.renderMode, isSecond = _param.isSecond, isOldSticky = _param.isSticky, isLoading = _param.isLoading, tweakStyles = _param.tweakStyles, valueComponentProps = _object_without_properties$8(_param, [
+    var row = _param.row, columnName = _param.columnName, config = _param.config, renderMode = _param.renderMode, isSecond = _param.isSecond, isOldSticky = _param.isSticky, isLoading = _param.isLoading, tweakStyles = _param.tweakStyles, valueComponentProps = _object_without_properties$9(_param, [
       "row",
       "columnName",
       "config",
@@ -26424,10 +26616,10 @@
     }
     return target;
   }
-  function _object_without_properties$7(source, excluded) {
+  function _object_without_properties$8(source, excluded) {
     if (source == null)
       return {};
-    var target = _object_without_properties_loose$7(source, excluded);
+    var target = _object_without_properties_loose$8(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -26442,7 +26634,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$7(source, excluded) {
+  function _object_without_properties_loose$8(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -26457,7 +26649,7 @@
     return target;
   }
   function FlexibleTable(_param) {
-    var content = _param.content, headerContent = _param.headerContent, config = _param.config, enabledColumns = _param.enabledColumns, activeRows = _param.activeRows, uniqueField = _param.uniqueField, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_isFirstColumnSticky = _param.isFirstColumnSticky, isFirstColumnSticky = _param_isFirstColumnSticky === void 0 ? false : _param_isFirstColumnSticky, _param_isHorizontallyScrollable = _param.isHorizontallyScrollable, isHorizontallyScrollable = _param_isHorizontallyScrollable === void 0 ? false : _param_isHorizontallyScrollable, _param_isRowFocusable = _param.isRowFocusable, isRowFocusable = _param_isRowFocusable === void 0 ? false : _param_isRowFocusable, infinityScrollConfig = _param.infinityScrollConfig, _param_renderMode = _param.renderMode, renderMode = _param_renderMode === void 0 ? "table" : _param_renderMode, refForScroll = _param.refForScroll, nothingFoundContent = _param.nothingFoundContent, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, _param_shouldRenderHeader = _param.shouldRenderHeader, shouldRenderHeader = _param_shouldRenderHeader === void 0 ? true : _param_shouldRenderHeader, onHeadClick = _param.onHeadClick, restProps = _object_without_properties$7(_param, [
+    var content = _param.content, headerContent = _param.headerContent, config = _param.config, enabledColumns = _param.enabledColumns, activeRows = _param.activeRows, uniqueField = _param.uniqueField, _param_isLoading = _param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_isFirstColumnSticky = _param.isFirstColumnSticky, isFirstColumnSticky = _param_isFirstColumnSticky === void 0 ? false : _param_isFirstColumnSticky, _param_isHorizontallyScrollable = _param.isHorizontallyScrollable, isHorizontallyScrollable = _param_isHorizontallyScrollable === void 0 ? false : _param_isHorizontallyScrollable, _param_isRowFocusable = _param.isRowFocusable, isRowFocusable = _param_isRowFocusable === void 0 ? false : _param_isRowFocusable, infinityScrollConfig = _param.infinityScrollConfig, _param_renderMode = _param.renderMode, renderMode = _param_renderMode === void 0 ? "table" : _param_renderMode, refForScroll = _param.refForScroll, nothingFoundContent = _param.nothingFoundContent, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, _param_shouldRenderHeader = _param.shouldRenderHeader, shouldRenderHeader = _param_shouldRenderHeader === void 0 ? true : _param_shouldRenderHeader, onHeadClick = _param.onHeadClick, restProps = _object_without_properties$8(_param, [
       "content",
       "headerContent",
       "config",
@@ -26690,11 +26882,11 @@
       right: BUTTONS_GAP,
       top: BUTTONS_GAP,
       bottom: BUTTONS_GAP,
-      zIndex: 1
+      zIndex: dimensions.Z_INDEX.CONTROL_FOCUS + 1
     },
     button: {
       width: "100%",
-      height: (dimensions.CONTROL_HEIGHT - 5) / 2,
+      height: (dimensions.CONTROL.HEIGHT - 5) / 2,
       border: "none",
       outline: "none",
       backgroundColor: colors.GREY_BACKGROUND,
@@ -26731,12 +26923,12 @@
   });
   var inputStyles$2 = {
     input: {
-      "&:not($withControls)": {
+      paddingRight: BUTTONS_WIDTH + BUTTONS_GAP
+    },
+    tweakControlWrapper: {
+      controls: {
         paddingRight: BUTTONS_WIDTH + BUTTONS_GAP
       }
-    },
-    controls: {
-      paddingRight: BUTTONS_WIDTH + BUTTONS_GAP
     }
   };
   function _define_property$k(obj, key, value) {
@@ -26791,10 +26983,10 @@
     }
     return target;
   }
-  function _object_without_properties$6(source, excluded) {
+  function _object_without_properties$7(source, excluded) {
     if (source == null)
       return {};
-    var target = _object_without_properties_loose$6(source, excluded);
+    var target = _object_without_properties_loose$7(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -26809,7 +27001,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$6(source, excluded) {
+  function _object_without_properties_loose$7(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -26824,7 +27016,7 @@
     return target;
   }
   var IncrementInput = function(_param) {
-    var value = _param.value, onChange = _param.onChange, min2 = _param.min, max2 = _param.max, _param_step = _param.step, step = _param_step === void 0 ? 1 : _param_step, intPartPrecision = _param.intPartPrecision, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, isDisabled = _param.isDisabled, isReadonly = _param.isReadonly, isInvalid = _param.isInvalid, props = _object_without_properties$6(_param, [
+    var value = _param.value, onChange = _param.onChange, min2 = _param.min, max2 = _param.max, _param_step = _param.step, step = _param_step === void 0 ? 1 : _param_step, intPartPrecision = _param.intPartPrecision, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, isDisabled = _param.isDisabled, isReadonly = _param.isReadonly, isInvalid = _param.isInvalid, props = _object_without_properties$7(_param, [
       "value",
       "onChange",
       "min",
@@ -27272,10 +27464,10 @@
     }
     return target;
   }
-  function _object_without_properties$5(source, excluded) {
+  function _object_without_properties$6(source, excluded) {
     if (source == null)
       return {};
-    var target = _object_without_properties_loose$5(source, excluded);
+    var target = _object_without_properties_loose$6(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -27290,7 +27482,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$5(source, excluded) {
+  function _object_without_properties_loose$6(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -27321,7 +27513,7 @@
       return _array_like_to_array$6(o, minLen);
   }
   var Modal = function(_param) {
-    var data = _param.data, tweakStyles = _param.tweakStyles, title = _param.title, _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, _param_isFooterSticky = _param.isFooterSticky, isFooterSticky = _param_isFooterSticky === void 0 ? false : _param_isFooterSticky, footer = _param.footer, buttons = _param.buttons, _param_buttonsAlign = _param.buttonsAlign, buttonsAlign = _param_buttonsAlign === void 0 ? "right" : _param_buttonsAlign, _param_hasCloseButton = _param.hasCloseButton, hasCloseButton = _param_hasCloseButton === void 0 ? true : _param_hasCloseButton, _param_hasOverlay = _param.hasOverlay, hasOverlay = _param_hasOverlay === void 0 ? true : _param_hasOverlay, _param_isOpen = _param.isOpen, isOpen = _param_isOpen === void 0 ? false : _param_isOpen, _param_position = _param.position, position = _param_position === void 0 ? "center" : _param_position, children = _param.children, zIndex = _param.zIndex, testId = _param.testId, _param_shouldCloseOnOverlayClick = _param.shouldCloseOnOverlayClick, shouldCloseOnOverlayClick = _param_shouldCloseOnOverlayClick === void 0 ? true : _param_shouldCloseOnOverlayClick, _param_shouldCloseOnEsc = _param.shouldCloseOnEsc, shouldCloseOnEsc = _param_shouldCloseOnEsc === void 0 ? true : _param_shouldCloseOnEsc, _param_shouldBlockScroll = _param.shouldBlockScroll, shouldBlockScroll = _param_shouldBlockScroll === void 0 ? true : _param_shouldBlockScroll, _param_timeout = _param.timeout, timeout = _param_timeout === void 0 ? 150 : _param_timeout, _param_unmountOnExit = _param.unmountOnExit, unmountOnExit = _param_unmountOnExit === void 0 ? true : _param_unmountOnExit, onClose = _param.onClose, restProps = _object_without_properties$5(_param, [
+    var data = _param.data, tweakStyles = _param.tweakStyles, title = _param.title, _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, _param_isFooterSticky = _param.isFooterSticky, isFooterSticky = _param_isFooterSticky === void 0 ? false : _param_isFooterSticky, footer = _param.footer, buttons = _param.buttons, _param_buttonsAlign = _param.buttonsAlign, buttonsAlign = _param_buttonsAlign === void 0 ? "right" : _param_buttonsAlign, _param_hasCloseButton = _param.hasCloseButton, hasCloseButton = _param_hasCloseButton === void 0 ? true : _param_hasCloseButton, _param_hasOverlay = _param.hasOverlay, hasOverlay = _param_hasOverlay === void 0 ? true : _param_hasOverlay, _param_isOpen = _param.isOpen, isOpen = _param_isOpen === void 0 ? false : _param_isOpen, _param_position = _param.position, position = _param_position === void 0 ? "center" : _param_position, children = _param.children, zIndex = _param.zIndex, testId = _param.testId, _param_shouldCloseOnOverlayClick = _param.shouldCloseOnOverlayClick, shouldCloseOnOverlayClick = _param_shouldCloseOnOverlayClick === void 0 ? true : _param_shouldCloseOnOverlayClick, _param_shouldCloseOnEsc = _param.shouldCloseOnEsc, shouldCloseOnEsc = _param_shouldCloseOnEsc === void 0 ? true : _param_shouldCloseOnEsc, _param_shouldBlockScroll = _param.shouldBlockScroll, shouldBlockScroll = _param_shouldBlockScroll === void 0 ? true : _param_shouldBlockScroll, _param_timeout = _param.timeout, timeout = _param_timeout === void 0 ? 150 : _param_timeout, _param_unmountOnExit = _param.unmountOnExit, unmountOnExit = _param_unmountOnExit === void 0 ? true : _param_unmountOnExit, onClose = _param.onClose, restProps = _object_without_properties$6(_param, [
       "data",
       "tweakStyles",
       "title",
@@ -28166,7 +28358,7 @@
     },
     searchContainer: {
       width: "100%",
-      height: dimensions.CONTROL_HEIGHT,
+      height: dimensions.CONTROL.HEIGHT,
       display: "flex",
       alignItems: "center",
       boxSizing: "border-box",
@@ -28247,9 +28439,11 @@
     }
   });
   var inputStyles$1 = {
-    inputWrapper: {
-      border: "none",
-      height: "calc(var(--control-height) - 2px)"
+    tweakControlWrapper: {
+      controlWrapper: {
+        border: "none",
+        height: "calc(var(--control-height) - 2px)"
+      }
     },
     input: {
       fontSize: 14,
@@ -28463,14 +28657,15 @@
     root: {
       width: "100%",
       position: "relative",
-      boxSizing: "border-box"
+      boxSizing: "border-box",
+      zIndex: 0
     },
     countrySelectContainer: {
       position: "absolute",
       left: 1,
       top: 1,
       width: COUNTRY_SELECT_WIDTH,
-      height: dimensions.CONTROL_HEIGHT - 2,
+      height: dimensions.CONTROL.HEIGHT - 2,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -28481,7 +28676,7 @@
       ],
       transition: "border-color 0.2s ease-in",
       cursor: "pointer",
-      zIndex: 2
+      zIndex: dimensions.Z_INDEX.CONTROL_FOCUS + 1
     },
     disabledCountrySelect: {
       cursor: "default"
@@ -28513,17 +28708,19 @@
     flagListContainer: {
       position: "absolute",
       width: "100%",
-      top: dimensions.CONTROL_HEIGHT + 6,
+      top: dimensions.CONTROL.HEIGHT + 6,
       left: -1,
       zIndex: 3
     }
   });
   var inputStyles = {
-    inputWrapper: {
-      paddingLeft: COUNTRY_SELECT_WIDTH
-    },
-    label: {
-      marginLeft: COUNTRY_SELECT_WIDTH
+    tweakControlWrapper: {
+      controlWrapper: {
+        paddingLeft: COUNTRY_SELECT_WIDTH
+      },
+      label: {
+        marginLeft: COUNTRY_SELECT_WIDTH
+      }
     }
   };
   function _array_like_to_array$2(arr, len) {
@@ -28620,10 +28817,10 @@
     }
     return target;
   }
-  function _object_without_properties$4(source, excluded) {
+  function _object_without_properties$5(source, excluded) {
     if (source == null)
       return {};
-    var target = _object_without_properties_loose$4(source, excluded);
+    var target = _object_without_properties_loose$5(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -28638,7 +28835,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$4(source, excluded) {
+  function _object_without_properties_loose$5(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -28669,7 +28866,7 @@
       return _array_like_to_array$2(o, minLen);
   }
   var PhoneInput = function(_param) {
-    var _param_locale = _param.locale, locale2 = _param_locale === void 0 ? "ru" : _param_locale, _param_value = _param.value, value = _param_value === void 0 ? DEFAULT_VALUE$1 : _param_value, onChange = _param.onChange, data = _param.data, testId = _param.testId, isDisabled = _param.isDisabled, isInvalid = _param.isInvalid, isActive = _param.isActive, tweakStyles = _param.tweakStyles, _param_codeSearchPlaceholder = _param.codeSearchPlaceholder, codeSearchPlaceholder = _param_codeSearchPlaceholder === void 0 ? "Поиск" : _param_codeSearchPlaceholder, _param_noMatchesLabel = _param.noMatchesLabel, noMatchesLabel = _param_noMatchesLabel === void 0 ? "Ничего не найдено" : _param_noMatchesLabel, inputProps = _object_without_properties$4(_param, [
+    var _param_locale = _param.locale, locale2 = _param_locale === void 0 ? "ru" : _param_locale, _param_value = _param.value, value = _param_value === void 0 ? DEFAULT_VALUE$1 : _param_value, onChange = _param.onChange, data = _param.data, testId = _param.testId, isDisabled = _param.isDisabled, isInvalid = _param.isInvalid, isActive = _param.isActive, tweakStyles = _param.tweakStyles, _param_codeSearchPlaceholder = _param.codeSearchPlaceholder, codeSearchPlaceholder = _param_codeSearchPlaceholder === void 0 ? "Поиск" : _param_codeSearchPlaceholder, _param_noMatchesLabel = _param.noMatchesLabel, noMatchesLabel = _param_noMatchesLabel === void 0 ? "Ничего не найдено" : _param_noMatchesLabel, inputProps = _object_without_properties$5(_param, [
       "locale",
       "value",
       "onChange",
@@ -29498,10 +29695,10 @@
     }
     return target;
   }
-  function _object_without_properties$3(source, excluded) {
+  function _object_without_properties$4(source, excluded) {
     if (source == null)
       return {};
-    var target = _object_without_properties_loose$3(source, excluded);
+    var target = _object_without_properties_loose$4(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -29516,7 +29713,7 @@
     }
     return target;
   }
-  function _object_without_properties_loose$3(source, excluded) {
+  function _object_without_properties_loose$4(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -29633,7 +29830,7 @@
     }
   }
   var SmartInput = /* @__PURE__ */ React.forwardRef(function(_param, ref) {
-    var _param_value = _param.value, value = _param_value === void 0 ? "" : _param_value, _param_smartType = _param.smartType, smartType = _param_smartType === void 0 ? "default" : _param_smartType, regExp = _param.regExp, maxLength = _param.maxLength, _param_isUpperCase = _param.isUpperCase, isUpperCase = _param_isUpperCase === void 0 ? false : _param_isUpperCase, _param_isTransliterationEnabled = _param.isTransliterationEnabled, isTransliterationEnabled = _param_isTransliterationEnabled === void 0 ? true : _param_isTransliterationEnabled, onChange = _param.onChange, rest = _object_without_properties$3(_param, [
+    var _param_value = _param.value, value = _param_value === void 0 ? "" : _param_value, _param_smartType = _param.smartType, smartType = _param_smartType === void 0 ? "default" : _param_smartType, regExp = _param.regExp, maxLength = _param.maxLength, _param_isUpperCase = _param.isUpperCase, isUpperCase = _param_isUpperCase === void 0 ? false : _param_isUpperCase, _param_isTransliterationEnabled = _param.isTransliterationEnabled, isTransliterationEnabled = _param_isTransliterationEnabled === void 0 ? true : _param_isTransliterationEnabled, onChange = _param.onChange, rest = _object_without_properties$4(_param, [
       "value",
       "smartType",
       "regExp",
@@ -30138,49 +30335,28 @@
     }
     return target;
   }
-  var PADDING_X = 12;
   var useStyles$4 = createThemedStyles("TextArea", {
-    root: {
-      width: "100%",
-      height: "100%",
-      display: "flex",
-      flexDirection: "column"
-    },
-    wrapper: {
-      display: "flex",
-      position: "relative",
-      width: "100%",
-      flexGrow: 1,
-      boxSizing: "border-box",
-      transition: animations.defaultTransition,
-      transitionProperty: "border-color",
-      backgroundColor: "white",
-      border: [
-        "solid",
-        1,
-        "lightgray"
-      ]
-    },
     textarea: _object_spread_props$6(_object_spread$6({}, helpers.withScrollBar), {
       width: "100%",
       height: "100%",
-      outline: "none",
-      outlineStyle: "none",
       fontFamily: "inherit",
       fontSize: 16,
       padding: [
         14,
-        PADDING_X,
-        8
+        0,
+        8,
+        "var(--control-padding)"
       ],
-      scrollPadding: "14px 0 8px",
+      scrollPadding: "14px 0 8px var(--control-padding)",
+      scrollbarGutter: "stable",
+      boxSizing: "border-box",
+      outline: "none",
+      outlineStyle: "none",
       transition: animations.defaultTransition,
       transitionProperty: "background-color",
       border: "none",
       resize: "none",
-      "&:disabled": {
-        extend: "disabled"
-      },
+      background: "transparent",
       "&::placeholder": {
         opacity: 1
       },
@@ -30190,107 +30366,41 @@
         margin: 0
       }
     }),
-    autosize: {
-      display: "inline-grid",
+    wrapper: {
+      width: "100%"
+    },
+    autoSized: {
+      display: "grid",
       gridTemplateRows: "minmax(0, 100%)",
       "& > $textarea, &::after": {
-        gridArea: "1 / 1 / 2 / 2"
+        gridArea: "1 / 1"
       },
       "&::after": {
         extend: "textarea",
         content: 'attr(data-value) " "',
+        // Без пробела ломается!
         overflowWrap: "break-word",
         whiteSpace: "pre-wrap",
-        visibility: "hidden",
-        scrollbarGutter: "stable"
-      }
-    },
-    focused: {
-      position: "relative",
-      zIndex: 1
-    },
-    withFloatingLabel: {
-      "& $textarea, &::after": {
-        paddingTop: 24,
-        scrollPaddingTop: "24px"
-      }
-    },
-    floating: {},
-    activeLabel: {
-      display: "none",
-      "&$floating": {
-        display: "block",
-        transform: "scale(0.75) translateY(-120%)"
-      }
-    },
-    required: {
-      "&:before": {
-        content: '""',
-        position: "absolute",
-        left: -12,
-        top: 20,
-        width: 6,
-        height: 6,
-        borderRadius: "50%",
-        backgroundColor: "red"
-      }
-    },
-    disabled: {},
-    label: {
-      position: "absolute",
-      pointerEvents: "none",
-      left: PADDING_X,
-      top: PADDING_X * 2,
-      transformOrigin: "top left",
-      transform: "translateY(-50%)",
-      transition: animations.defaultTransition,
-      transitionProperty: "transform, color",
-      fontSize: 16
-    },
-    invalid: {
-      borderColor: "red"
-    },
-    invalidLabel: {},
-    error: {
-      fontSize: 12,
-      paddingTop: 4,
-      paddingLeft: 13,
-      color: "red"
-    },
-    requiredLabel: {
-      "&:after": {
-        content: '""',
-        position: "absolute",
-        right: -8,
-        top: 4,
-        transform: "translate(0, -50%)",
-        width: 6,
-        height: 6,
-        borderRadius: "50%",
-        backgroundColor: "red"
+        visibility: "hidden"
       }
     },
     symbolsCount: {
-      display: "block",
       textAlign: "right",
       marginTop: 4,
       fontSize: 12,
       marginLeft: "auto",
-      paddingLeft: 32,
-      whiteSpace: "nowrap"
+      whiteSpace: "nowrap",
+      pointerEvents: "none"
     },
     symbolsCountError: {
       color: "red"
-    },
-    footer: {
-      display: "flex"
-    },
-    info: {
-      fontSize: 12,
-      paddingTop: 4,
-      paddingLeft: 13
     }
   });
+  var controlWrapperStyles = {
+    label: {
+      top: 16
+    }
+  };
   function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length)
       len = arr.length;
@@ -30385,6 +30495,38 @@
     }
     return target;
   }
+  function _object_without_properties$3(source, excluded) {
+    if (source == null)
+      return {};
+    var target = _object_without_properties_loose$3(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0)
+          continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key))
+          continue;
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  function _object_without_properties_loose$3(source, excluded) {
+    if (source == null)
+      return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0)
+        continue;
+      target[key] = source[key];
+    }
+    return target;
+  }
   function _sliced_to_array(arr, i) {
     return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
   }
@@ -30402,93 +30544,108 @@
       return _array_like_to_array(o, minLen);
   }
   var DEFAULT_VALUE = "";
-  var TextArea = /* @__PURE__ */ React.forwardRef(function(param, ref) {
-    var _param_value = param.value, value = _param_value === void 0 ? DEFAULT_VALUE : _param_value, label = param.label, placeholder = param.placeholder, isDisabled = param.isDisabled, _param_hasFloatingLabel = param.hasFloatingLabel, hasFloatingLabel = _param_hasFloatingLabel === void 0 ? true : _param_hasFloatingLabel, _param_isInvalid = param.isInvalid, isInvalid = _param_isInvalid === void 0 ? false : _param_isInvalid, _param_isActive = param.isActive, isActive = _param_isActive === void 0 ? false : _param_isActive, infoMessage = param.infoMessage, errorMessage = param.errorMessage, _param_isRequired = param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, name = param.name, _param_hasRequiredLabel = param.hasRequiredLabel, hasRequiredLabel = _param_hasRequiredLabel === void 0 ? false : _param_hasRequiredLabel, _param_shouldFocusOnMount = param.shouldFocusOnMount, shouldFocusOnMount = _param_shouldFocusOnMount === void 0 ? false : _param_shouldFocusOnMount, _param_hasCounter = param.hasCounter, hasCounter = _param_hasCounter === void 0 ? true : _param_hasCounter, _param_shouldTrimAfterMaxLength = param.shouldTrimAfterMaxLength, shouldTrimAfterMaxLength = _param_shouldTrimAfterMaxLength === void 0 ? false : _param_shouldTrimAfterMaxLength, _param_isAutoSizeable = param.isAutoSizeable, isAutoSizeable = _param_isAutoSizeable === void 0 ? true : _param_isAutoSizeable, _param_shouldAlwaysShowPlaceholder = param.shouldAlwaysShowPlaceholder, shouldAlwaysShowPlaceholder = _param_shouldAlwaysShowPlaceholder === void 0 ? false : _param_shouldAlwaysShowPlaceholder, maxLength = param.maxLength, rows = param.rows, testId = param.testId, data = param.data, tweakStyles = param.tweakStyles, onChange = param.onChange, onPaste = param.onPaste, onFocus = param.onFocus, onBlur = param.onBlur;
+  var TextArea = /* @__PURE__ */ React.forwardRef(function(_param, ref) {
+    var _param_value = _param.value, value = _param_value === void 0 ? DEFAULT_VALUE : _param_value, label = _param.label, placeholder = _param.placeholder, infoMessage = _param.infoMessage, errorMessage = _param.errorMessage, name = _param.name;
+    _param.shouldFocusOnMount;
+    var _param_hasCounter = _param.hasCounter, hasCounter = _param_hasCounter === void 0 ? true : _param_hasCounter, shouldTrimAfterMaxLength = _param.shouldTrimAfterMaxLength, _param_isAutoSized = _param.isAutoSized, isAutoSized = _param_isAutoSized === void 0 ? true : _param_isAutoSized, shouldAlwaysShowPlaceholder = _param.shouldAlwaysShowPlaceholder, isDisabled = _param.isDisabled, isActive = _param.isActive, maxLength = _param.maxLength, rows = _param.rows, data = _param.data, testId = _param.testId, tweakStyles = _param.tweakStyles, onChange = _param.onChange, onPaste = _param.onPaste, onFocus = _param.onFocus, onBlur = _param.onBlur, controlProps = _object_without_properties$3(_param, [
+      "value",
+      "label",
+      "placeholder",
+      "infoMessage",
+      "errorMessage",
+      "name",
+      "shouldFocusOnMount",
+      "hasCounter",
+      "shouldTrimAfterMaxLength",
+      "isAutoSized",
+      "shouldAlwaysShowPlaceholder",
+      "isDisabled",
+      "isActive",
+      "maxLength",
+      "rows",
+      "data",
+      "testId",
+      "tweakStyles",
+      "onChange",
+      "onPaste",
+      "onFocus",
+      "onBlur"
+    ]);
     var classes = useStyles$4({
       theme: tweakStyles
     });
+    var tweakWithMessagesStyles = useTweakStyles({
+      tweakStyles,
+      className: "tweakWithMessages",
+      currentComponentName: "TextArea"
+    });
+    var tweakControlWrapperStyles = useTweakStyles({
+      innerStyles: controlWrapperStyles,
+      tweakStyles,
+      className: "tweakControlWrapper",
+      currentComponentName: "TextArea"
+    });
     var _useState = _sliced_to_array(React.useState(false), 2), isFocused = _useState[0], setFocused = _useState[1];
-    var handleOnChange = function(event) {
-      var rawValue = event.currentTarget.value;
-      var newValue = shouldTrimAfterMaxLength && maxLength !== void 0 ? trimStringToMaxLength(rawValue, maxLength) : rawValue;
-      onChange(newValue, event);
+    var hasFocus = isFocused || isActive;
+    var hasValue = value !== void 0 && value !== "";
+    var hasLabel = trueReactPlatformHelpers.isReactNodeNotEmpty(label);
+    var hasPlaceholder = (!hasLabel || hasFocus || shouldAlwaysShowPlaceholder) && trueReactPlatformHelpers.isStringNotEmpty(placeholder);
+    var handleChange = function(event) {
+      onChange(event.currentTarget.value, event);
     };
-    var handleOnFocus = function(event) {
+    var handleFocus = function(event) {
       setFocused(true);
-      if (onFocus !== void 0) {
-        onFocus(event);
-      }
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
     };
-    var handleOnBlur = function(event) {
+    var handleBlur = function(event) {
       setFocused(false);
-      if (onBlur !== void 0) {
-        onBlur(event);
-      }
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     };
-    var hasFocus = isFocused || isActive;
-    var hasValue = value !== void 0 && value !== "";
-    var hasLabel = trueReactPlatformHelpers.isReactNodeNotEmpty(label);
-    var hasPlaceholder = (!hasLabel || hasFocus || shouldAlwaysShowPlaceholder) && trueReactPlatformHelpers.isStringNotEmpty(placeholder);
-    var props = _object_spread$5({
-      className: classes.textarea,
-      onFocus: handleOnFocus,
-      onBlur: handleOnBlur,
-      onChange: handleOnChange,
-      value,
-      onPaste,
-      disabled: isDisabled,
-      placeholder: hasPlaceholder ? placeholder : void 0,
-      name,
-      autoFocus: shouldFocusOnMount,
-      rows
-    }, trueReactPlatformHelpers.addDataTestId(testId));
-    var hasInfoMessage = trueReactPlatformHelpers.isStringNotEmpty(infoMessage);
-    var hasErrorMessage = trueReactPlatformHelpers.isStringNotEmpty(errorMessage);
-    var _obj2, _obj1;
-    return /* @__PURE__ */ jsxs("div", _object_spread_props$5(_object_spread$5({
-      className: classes.root
-    }, addDataAttributes(data)), {
+    return /* @__PURE__ */ jsxs(WithMessages, {
+      errorMessage,
+      infoMessage,
+      tweakStyles: tweakWithMessagesStyles,
       children: [
-        /* @__PURE__ */ jsxs("div", {
-          className: clsx(classes.wrapper, (_obj2 = {}, _define_property$5(_obj2, classes.required, isRequired && !hasRequiredLabel), _define_property$5(_obj2, classes.invalid, isInvalid), _define_property$5(_obj2, classes.focused, hasFocus), _define_property$5(_obj2, classes.disabled, isDisabled), _define_property$5(_obj2, classes.autosize, isAutoSizeable), _define_property$5(_obj2, classes.withFloatingLabel, hasFloatingLabel && hasLabel), _obj2)),
-          "data-value": isAutoSizeable ? value : void 0,
-          children: [
-            hasLabel && /* @__PURE__ */ jsx("span", {
-              className: clsx(classes.label, (_obj1 = {}, _define_property$5(_obj1, classes.invalidLabel, isInvalid), _define_property$5(_obj1, classes.requiredLabel, hasRequiredLabel && !isRequired), _define_property$5(_obj1, classes.activeLabel, hasFocus || hasValue), _define_property$5(_obj1, classes.floating, hasFloatingLabel), _obj1)),
-              children: label
-            }),
-            /* @__PURE__ */ jsx("textarea", _object_spread$5({
-              ref
-            }, props))
-          ]
-        }),
-        /* @__PURE__ */ jsxs("div", {
-          className: classes.footer,
+        /* @__PURE__ */ jsx(ControlWrapper, _object_spread_props$5(_object_spread$5({
+          label,
+          tweakStyles: tweakControlWrapperStyles,
+          isFocused: hasFocus,
+          isDisabled,
+          hasValue,
+          isFullWidth: true,
+          testId
+        }, controlProps), {
+          children: /* @__PURE__ */ jsx("div", _object_spread_props$5(_object_spread$5({
+            className: clsx(classes.wrapper, _define_property$5({}, classes.autoSized, isAutoSized))
+          }, isAutoSized && {
+            "data-value": value
+          }), {
+            children: /* @__PURE__ */ jsx("textarea", _object_spread$5({
+              ref,
+              className: classes.textarea,
+              value,
+              disabled: isDisabled,
+              placeholder: hasPlaceholder ? placeholder : void 0,
+              maxLength: shouldTrimAfterMaxLength ? maxLength : void 0,
+              name,
+              rows,
+              onPaste,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onChange: handleChange
+            }, trueReactPlatformHelpers.addDataAttributes(data, testId, "control")))
+          }))
+        })),
+        hasCounter && trueReactPlatformHelpers.isNotEmpty(maxLength) && /* @__PURE__ */ jsxs("span", {
+          className: clsx(classes.symbolsCount, _define_property$5({}, classes.symbolsCountError, value.length > maxLength)),
           children: [
-            hasInfoMessage && /* @__PURE__ */ jsx("div", {
-              className: classes.info,
-              children: infoMessage
-            }),
-            !hasInfoMessage && hasErrorMessage && /* @__PURE__ */ jsx("div", {
-              className: classes.error,
-              children: errorMessage
-            }),
-            hasCounter && trueReactPlatformHelpers.isNotEmpty(maxLength) && /* @__PURE__ */ jsxs("span", {
-              className: clsx(classes.symbolsCount, _define_property$5({}, classes.symbolsCountError, value.length > maxLength)),
-              children: [
-                value.length,
-                " / ",
-                maxLength
-              ]
-            })
+            value.length,
+            " / ",
+            maxLength
           ]
-        }),
-        hasInfoMessage && hasErrorMessage && /* @__PURE__ */ jsx("div", {
-          className: classes.error,
-          children: errorMessage
         })
       ]
-    }));
+    });
   });
   var useStyles$3 = createThemedStyles("TextButton", {
     root: {
@@ -31197,11 +31354,6 @@
       }
     }));
   };
-  var withPopupStyles = {
-    popup: {
-      zIndex: 9999
-    }
-  };
   function _define_property(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
@@ -31287,7 +31439,7 @@
     return target;
   }
   var WithTooltip = function(_param) {
-    var children = _param.children, _param_eventType = _param.eventType, eventType = _param_eventType === void 0 ? "hover" : _param_eventType, _param_placement = _param.placement, placement = _param_placement === void 0 ? "top" : _param_placement, tooltipText = _param.tooltipText, _param_tooltipView = _param.tooltipView, tooltipView = _param_tooltipView === void 0 ? "tooltip" : _param_tooltipView, _param_tooltipType = _param.tooltipType, tooltipType = _param_tooltipType === void 0 ? "info" : _param_tooltipType, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, popupData = _param.popupData, tweakStyles = _param.tweakStyles, restProps = _object_without_properties(_param, [
+    var children = _param.children, _param_eventType = _param.eventType, eventType = _param_eventType === void 0 ? "hover" : _param_eventType, _param_placement = _param.placement, placement = _param_placement === void 0 ? "top" : _param_placement, tooltipText = _param.tooltipText, _param_tooltipView = _param.tooltipView, tooltipView = _param_tooltipView === void 0 ? "tooltip" : _param_tooltipView, _param_tooltipType = _param.tooltipType, tooltipType = _param_tooltipType === void 0 ? "info" : _param_tooltipType, _param_isDisabled = _param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, tweakStyles = _param.tweakStyles, restProps = _object_without_properties(_param, [
       "children",
       "eventType",
       "placement",
@@ -31295,29 +31447,22 @@
       "tooltipView",
       "tooltipType",
       "isDisabled",
-      "popupData",
       "tweakStyles"
     ]);
     var tweakWithPopupStyles = useTweakStyles({
-      innerStyles: withPopupStyles,
       tweakStyles,
-      className: "tweakWithPopup",
-      currentComponentName: "WithTooltip"
+      className: "tweakWithPopup"
     });
     var tweakTooltipStyles = useTweakStyles({
       tweakStyles,
-      className: "tweakTooltip",
-      currentComponentName: "WithTooltip"
+      className: "tweakTooltip"
     });
     return /* @__PURE__ */ jsx(WithPopup, _object_spread_props(_object_spread({
       trigger: children,
       placement,
       eventType,
-      popupData: _object_spread_props(_object_spread({}, popupData), {
-        tooltipView
-      }),
-      isDisabled: isDisabled || !trueReactPlatformHelpers.isReactNodeNotEmpty(tooltipText),
       isTriggerWrapped: true,
+      isDisabled: isDisabled || !trueReactPlatformHelpers.isReactNodeNotEmpty(tooltipText),
       tweakStyles: tweakWithPopupStyles
     }, restProps), {
       children: /* @__PURE__ */ jsx(Tooltip, {
@@ -31335,6 +31480,7 @@
   exports2.Checkbox = Checkbox;
   exports2.CloseButton = CloseButton;
   exports2.Colors = Colors;
+  exports2.ControlWrapper = ControlWrapper;
   exports2.CssBaseline = CssBaseline;
   exports2.DEFAULT_PHONE_MASK = DEFAULT_PHONE_MASK;
   exports2.DateInput = DateInput;
@@ -31360,6 +31506,7 @@
   exports2.IconButton = IconButton;
   exports2.IncrementInput = IncrementInput;
   exports2.Input = Input;
+  exports2.InputBase = InputBase;
   exports2.List = List;
   exports2.ListItem = ListItem;
   exports2.Modal = Modal;
@@ -31389,6 +31536,7 @@
   exports2.ThemedPreloader = ThemedPreloader;
   exports2.Toaster = Toaster;
   exports2.Tooltip = Tooltip;
+  exports2.WithMessages = WithMessages;
   exports2.WithPopup = WithPopup;
   exports2.WithTooltip = WithTooltip;
   exports2.addDataAttributes = addDataAttributes;