@true-engineering/true-react-common-ui-kit 3.24.1 → 3.25.0

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

@@ -1,6 +1,6 @@
 import React, { createContext, useRef, useEffect, useCallback, useState, useMemo, useContext, createElement, Fragment as Fragment$1, forwardRef, createRef, PureComponent, memo } from "react";
 import { createUseStyles } from "react-jss";
-import { mergeStyles, isNotEmpty, isArrayNotEmpty, isEmpty, isString, isStringNotEmpty, mergeRefs, addDataTestId, isReactNodeNotEmpty, addClickHandler, getTestId, getSelectKeyHandler, createFilter, isFunction as isFunction$1, isObject as isObject$1, getTransition, applyAction, indexMap, isNumberInteger, hasDuplicates } from "@true-engineering/true-react-platform-helpers";
+import { mergeStyles, isNotEmpty, isArrayNotEmpty, isEmpty, isString, isStringNotEmpty, mergeRefs, addDataTestId, isReactNodeNotEmpty, addClickHandler, getTestId, getSelectKeyHandler, getArray, createFilter, isFunction as isFunction$1, isObject as isObject$1, getTransition, applyAction, indexMap, isNumberInteger, hasDuplicates } from "@true-engineering/true-react-platform-helpers";
 import { CSSTransition } from "react-transition-group";
 import clsx from "clsx";
 import hexToRgba from "hex-to-rgba";
@@ -6668,71 +6668,71 @@ var useMergedRefs = function(refs) {
     return 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,
@@ -10619,15 +10619,11 @@ var useStyles$F = createThemedStyles("SelectList", {
   withListHeader: {
     paddingTop: 0
   },
-  listHeader: {
-    "& + $list": {
-      borderTop: [
-        1,
-        "solid",
-        colors.BORDER_LIGHT
-      ]
-    }
+  withListFooter: {
+    paddingBottom: 0
   },
+  listHeader: {},
+  listFooter: {},
   list: _object_spread$K({
     height: "100%",
     maxHeight: ROW_HEIGHT$1 * 6,
@@ -10724,8 +10720,18 @@ function _object_spread_props$E(target, source) {
   return target;
 }
 var SelectListItem = function(param) {
-  var classes = param.classes, index = param.index, isSemiChecked = param.isSemiChecked, isDisabled = param.isDisabled, isActive = param.isActive, children = param.children, isFocused = param.isFocused, onOptionSelect = param.onOptionSelect, onToggleCheckbox = param.onToggleCheckbox;
-  var isMultiSelect = isNotEmpty(onToggleCheckbox);
+  var classes = param.classes, index = param.index, isSemiChecked = param.isSemiChecked, isDisabled = param.isDisabled, isActive = param.isActive, children = param.children, isFocused = param.isFocused, isMultiSelect = param.isMultiSelect, onOptionSelect = param.onOptionSelect, onToggleCheckbox = param.onToggleCheckbox;
+  var multiSelectContent = isMultiSelect && /* @__PURE__ */ jsx(Checkbox, {
+    isChecked: isActive || isSemiChecked,
+    isSemiChecked,
+    isDisabled,
+    tweakStyles: checkboxStyles$1,
+    onSelect: function(param2, event) {
+      var isSelected = param2.isSelected;
+      return onToggleCheckbox(index, isSelected, event);
+    },
+    children
+  });
   var _obj2;
   return /* @__PURE__ */ jsx(ScrollIntoViewIfNeeded, _object_spread_props$E(_object_spread$J({
     active: isFocused,
@@ -10741,17 +10747,7 @@ var SelectListItem = function(param) {
     onClick: !isDisabled && !isMultiSelect ? function(event) {
       return onOptionSelect(index, event);
     } : void 0,
-    children: isMultiSelect ? /* @__PURE__ */ jsx(Checkbox, {
-      value: index,
-      isChecked: isActive || isSemiChecked,
-      isSemiChecked,
-      isDisabled,
-      tweakStyles: checkboxStyles$1,
-      onSelect: function(v, event) {
-        return onToggleCheckbox(index, v.isSelected, event);
-      },
-      children
-    }) : children
+    children: isMultiSelect ? multiSelectContent : children
   }));
 };
 function _define_property$K(obj, key, value) {
@@ -10807,47 +10803,39 @@ function _object_spread_props$D(target, source) {
   return target;
 }
 function SelectList(param) {
-  var options = param.options, focusedIndex = param.focusedIndex, activeValue = param.activeValue, defaultOptionLabel = param.defaultOptionLabel, _param_noMatchesLabel = param.noMatchesLabel, noMatchesLabel = _param_noMatchesLabel === void 0 ? "Совпадений не найдено" : _param_noMatchesLabel, isLoading = param.isLoading, _param_loadingLabel = param.loadingLabel, loadingLabel = _param_loadingLabel === void 0 ? "Загрузка..." : _param_loadingLabel, tweakStyles = param.tweakStyles, testId = param.testId, _param_shouldScrollToList = param.shouldScrollToList, shouldScrollToList = _param_shouldScrollToList === void 0 ? true : _param_shouldScrollToList, areAllOptionsSelected = param.areAllOptionsSelected, customListHeader = param.customListHeader, isOptionDisabled = param.isOptionDisabled, allOptionsLabel = param.allOptionsLabel, onOptionSelect = param.onOptionSelect, onToggleCheckbox = param.onToggleCheckbox, convertValueToString = param.convertValueToString, _param_convertValueToReactNode = param.convertValueToReactNode, convertValueToReactNode = _param_convertValueToReactNode === void 0 ? convertValueToString : _param_convertValueToReactNode, convertValueToId = param.convertValueToId;
+  var options = param.options, focusedIndex = param.focusedIndex, activeValue = param.activeValue, defaultOptionLabel = param.defaultOptionLabel, _param_noMatchesLabel = param.noMatchesLabel, noMatchesLabel = _param_noMatchesLabel === void 0 ? "Совпадений не найдено" : _param_noMatchesLabel, isLoading = param.isLoading, _param_loadingLabel = param.loadingLabel, loadingLabel = _param_loadingLabel === void 0 ? "Загрузка..." : _param_loadingLabel, tweakStyles = param.tweakStyles, testId = param.testId, _param_shouldScrollToList = param.shouldScrollToList, shouldScrollToList = _param_shouldScrollToList === void 0 ? true : _param_shouldScrollToList, areAllOptionsSelected = param.areAllOptionsSelected, customListHeader = param.customListHeader, customListFooter = param.customListFooter, isMultiSelect = param.isMultiSelect, isOptionDisabled = param.isOptionDisabled, allOptionsLabel = param.allOptionsLabel, onOptionSelect = param.onOptionSelect, onToggleCheckbox = param.onToggleCheckbox, convertValueToString = param.convertValueToString, _param_convertValueToReactNode = param.convertValueToReactNode, convertValueToReactNode = _param_convertValueToReactNode === void 0 ? convertValueToString : _param_convertValueToReactNode, convertValueToId = param.convertValueToId;
   var classes = useStyles$F({
     theme: tweakStyles
   });
-  var isMultiSelect = isNotEmpty(onToggleCheckbox);
-  var multiSelectValue = activeValue;
-  var _multiSelectValue_length;
-  var selectedOptionsCount = (_multiSelectValue_length = multiSelectValue === null || multiSelectValue === void 0 ? void 0 : multiSelectValue.length) !== null && _multiSelectValue_length !== void 0 ? _multiSelectValue_length : 0;
-  var activeOptionsIdMap = useMemo(function() {
-    var _multiSelectValue_map;
-    return isMultiSelect ? (_multiSelectValue_map = multiSelectValue === null || multiSelectValue === void 0 ? void 0 : multiSelectValue.map(convertValueToId)) !== null && _multiSelectValue_map !== void 0 ? _multiSelectValue_map : [] : [];
-  }, [
-    isMultiSelect,
-    multiSelectValue,
-    convertValueToId
-  ]);
+  var isHeaderNotEmpty = isReactNodeNotEmpty(customListHeader);
+  var isFooterNotEmpty = isReactNodeNotEmpty(customListFooter);
   var optionsDisableMap = useMemo(function() {
-    return options.map(function(o) {
-      return isOptionDisabled(o);
-    });
+    return options.map(isOptionDisabled);
   }, [
     options,
     isOptionDisabled
   ]);
   var listOptions = useMemo(function() {
-    return options.map(function(opt, i) {
-      return convertValueToReactNode(opt, optionsDisableMap[i]);
+    return options.map(function(option, index) {
+      return convertValueToReactNode(option, optionsDisableMap[index]);
     });
   }, [
     options,
     convertValueToReactNode,
     optionsDisableMap
   ]);
-  var isActiveOption = function(item) {
-    return isMultiSelect ? activeOptionsIdMap.includes(convertValueToId(item)) : isNotEmpty(activeValue) && convertValueToId(activeValue) === convertValueToId(item);
-  };
+  var activeOptionsIds = useMemo(function() {
+    return new Set(getArray(activeValue).map(convertValueToId));
+  }, [
+    activeValue,
+    convertValueToId
+  ]);
+  var _obj2;
   return /* @__PURE__ */ jsxs(ScrollIntoViewIfNeeded, {
     active: shouldScrollToList && !isMultiSelect,
-    className: clsx(classes.root, _define_property$K({}, classes.withListHeader, isReactNodeNotEmpty(customListHeader))),
+    className: clsx(classes.root, (_obj2 = {}, _define_property$K(_obj2, classes.withListHeader, isHeaderNotEmpty), _define_property$K(_obj2, classes.withListFooter, isFooterNotEmpty), _obj2)),
     children: [
-      isReactNodeNotEmpty(customListHeader) && /* @__PURE__ */ jsx("div", {
+      isHeaderNotEmpty && /* @__PURE__ */ jsx("div", {
         className: classes.listHeader,
         children: customListHeader
       }),
@@ -10873,9 +10861,10 @@ function SelectList(param) {
             isReactNodeNotEmpty(allOptionsLabel) && /* @__PURE__ */ jsx(SelectListItem, {
               classes,
               index: ALL_OPTION_INDEX,
-              isSemiChecked: selectedOptionsCount > 0 && !areAllOptionsSelected,
+              isSemiChecked: activeOptionsIds.size > 0 && !areAllOptionsSelected,
               isActive: areAllOptionsSelected,
               isFocused: focusedIndex === ALL_OPTION_INDEX,
+              isMultiSelect,
               onOptionSelect,
               onToggleCheckbox,
               children: allOptionsLabel
@@ -10883,7 +10872,7 @@ function SelectList(param) {
             listOptions.map(function(opt, i) {
               var optionValue = options[i];
               var isFocused = focusedIndex === i;
-              var isActive = isActiveOption(optionValue);
+              var isActive = activeOptionsIds.has(convertValueToId(optionValue));
               var isDisabled = optionsDisableMap[i];
               return /* @__PURE__ */ jsx(SelectListItem, {
                 classes,
@@ -10891,6 +10880,7 @@ function SelectList(param) {
                 isDisabled,
                 isActive,
                 isFocused,
+                isMultiSelect,
                 onOptionSelect,
                 onToggleCheckbox,
                 children: opt
@@ -10902,7 +10892,11 @@ function SelectList(param) {
             })
           ]
         })
-      }))
+      })),
+      isFooterNotEmpty && /* @__PURE__ */ jsx("div", {
+        className: classes.listFooter,
+        children: customListFooter
+      })
     ]
   });
 }
@@ -10921,9 +10915,6 @@ var getDefaultConvertToIdFunction = function(convertValueToString) {
     return isNotEmpty(value === null || value === void 0 ? void 0 : value.id) ? String(value.id) : convertValueToString(value);
   };
 };
-var isMultiSelectValue = function(props, _value) {
-  return props.isMultiSelect === true;
-};
 var useStyles$E = createThemedStyles("Select", {
   root: {
     width: "100%",
@@ -10943,7 +10934,7 @@ var useStyles$E = createThemedStyles("Select", {
   },
   withoutPopper: {
     position: "absolute",
-    top: "calc(100% + 6px)"
+    top: "calc(var(--dropdown-offset, 100%) + 6px)"
   },
   listWrapperInBody: {
     minWidth: "auto",
@@ -10958,7 +10949,8 @@ var useStyles$E = createThemedStyles("Select", {
     height: 20,
     cursor: "pointer",
     zIndex: 1,
-    transition: "transform 0.1s ease"
+    transition: animations.defaultTransition,
+    transitionProperty: "transform"
   },
   activeArrow: {
     transform: "rotate(180deg)"
@@ -11317,9 +11309,13 @@ function _ts_generator$4(thisArg, body) {
   }
 }
 function Select(props) {
-  var options = props.options, value = props.value, 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, 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$b(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, 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$b(props, [
     "options",
+    "isMultiSelect",
     "value",
+    "header",
+    "footer",
     "defaultOptionLabel",
     "allOptionsLabel",
     "debounceTime",
@@ -11355,7 +11351,6 @@ function Select(props) {
     "shouldRenderInList"
   ]);
   var hasSearchInputInList = optionsMode !== "normal" && shouldRenderSearchInputInList;
-  var isMultiSelect = isMultiSelectValue(props);
   var hasReadonlyInput = isReadonly || optionsMode === "normal" || shouldRenderSearchInputInList;
   var tweakInputStyles = useTweakStyles({
     innerStyles: getInputStyles({
@@ -11384,6 +11379,7 @@ function Select(props) {
   var _useState2 = _sliced_to_array$k(useState(DEFAULT_OPTION_INDEX), 2), focusedListCellIndex = _useState2[0], setFocusedListCellIndex = _useState2[1];
   var _useState3 = _sliced_to_array$k(useState(""), 2), searchValue = _useState3[0], setSearchValue = _useState3[1];
   var _useState4 = _sliced_to_array$k(useState(true), 2), shouldShowDefaultOption = _useState4[0], setShouldShowDefaultOption = _useState4[1];
+  var root2 = useRef(null);
   var inputWrapper = useRef(null);
   var list = useRef(null);
   var input = useRef(null);
@@ -11408,8 +11404,8 @@ function Select(props) {
     optionsMode
   ]);
   var availableOptions = useMemo(function() {
-    return options.filter(function(o) {
-      return !isOptionDisabled(o);
+    return options.filter(function(option) {
+      return !isOptionDisabled(option);
     });
   }, [
     options,
@@ -11446,17 +11442,39 @@ function Select(props) {
     convertValueToId,
     convertValueToString
   ]);
-  var handleListClose = useCallback(function(event) {
+  var getDropdownOffset = function() {
+    var _input_current_parentElement2;
+    if (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 = 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
+  ]);
+  var handleListClose = useCallback(function(event) {
+    closeList();
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   }, [
+    closeList,
     onBlur
   ]);
   var handleListOpen = function() {
     if (!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) {
@@ -11479,7 +11497,7 @@ function Select(props) {
       handleListClose(event);
     }
   };
-  var handleOnChange = useCallback(function(newValue, event) {
+  var handleChange = useCallback(function(newValue, event) {
     if (!compareValuesOnChange(value, newValue)) {
       onChange(newValue, event);
     }
@@ -11489,12 +11507,12 @@ function Select(props) {
     onChange
   ]);
   var handleOptionSelect = useCallback(function(index, event) {
-    var _input_current;
-    handleOnChange(index === DEFAULT_OPTION_INDEX ? void 0 : filteredOptions[index], event);
+    var _input_current2;
+    handleChange(index === DEFAULT_OPTION_INDEX ? void 0 : filteredOptions[index], event);
     handleListClose(event);
-    (_input_current = input.current) === null || _input_current === void 0 ? void 0 : _input_current.blur();
+    (_input_current2 = input.current) === null || _input_current2 === void 0 ? void 0 : _input_current2.blur();
   }, [
-    handleOnChange,
+    handleChange,
     handleListClose,
     filteredOptions
   ]);
@@ -11503,15 +11521,15 @@ function Select(props) {
       return;
     }
     if (index === DEFAULT_OPTION_INDEX || index === ALL_OPTION_INDEX && !isSelected) {
-      handleOnChange(void 0, event);
+      handleChange(void 0, event);
       return;
     }
     if (index === ALL_OPTION_INDEX && isSelected) {
-      handleOnChange(availableOptions, event);
+      handleChange(availableOptions, event);
       return;
     }
     var option = filteredOptions[index];
-    handleOnChange(isSelected ? (
+    handleChange(isSelected ? (
       // Добавляем
       _to_consumable_array$7(value !== null && value !== void 0 ? value : []).concat([
         option
@@ -11525,7 +11543,7 @@ function Select(props) {
   }, [
     isMultiSelect,
     filteredOptions,
-    handleOnChange,
+    handleChange,
     value,
     availableOptions,
     convertToId
@@ -11585,7 +11603,7 @@ function Select(props) {
       setShouldShowDefaultOption(v === "");
     }
     if (v === "" && !hasSearchInputInList) {
-      handleOnChange(void 0, event);
+      handleChange(void 0, event);
     }
     setSearchValue(v);
   };
@@ -11609,7 +11627,8 @@ function Select(props) {
           if (indexToSelect === ALL_OPTION_INDEX) {
             isThisValueAlreadySelected = areAllOptionsSelected;
           } else {
-            var valueIdToSelect = convertToId(filteredOptions[indexToSelect]);
+            var option = filteredOptions[indexToSelect];
+            var valueIdToSelect = convertToId(option);
             var _value_some;
             isThisValueAlreadySelected = (_value_some = value === null || value === void 0 ? void 0 : value.some(function(opt) {
               return convertToId(opt) === valueIdToSelect;
@@ -11637,8 +11656,9 @@ function Select(props) {
   };
   var onArrowClick = function() {
     if (isListOpen) {
-      var _input_current;
-      (_input_current = input.current) === null || _input_current === void 0 ? void 0 : _input_current.blur();
+      var _input_current2;
+      (_input_current2 = input.current) === null || _input_current2 === void 0 ? void 0 : _input_current2.blur();
+      closeList();
     } else {
       var _input_current1;
       (_input_current1 = input.current) === null || _input_current1 === void 0 ? void 0 : _input_current1.focus();
@@ -11658,10 +11678,11 @@ function Select(props) {
     (optionsMode === "normal" || hasEnoughSymbolsToSearch)
   );
   var _ref1 = dropdownOptions !== null && dropdownOptions !== void 0 ? dropdownOptions : {}, _ref_shouldUsePopper = _ref1.shouldUsePopper, shouldUsePopper = _ref_shouldUsePopper === void 0 ? false : _ref_shouldUsePopper, _ref_shouldRenderInBody = _ref1.shouldRenderInBody, shouldRenderInBody = _ref_shouldRenderInBody === void 0 ? false : _ref_shouldRenderInBody, _ref_shouldHideOnScroll = _ref1.shouldHideOnScroll, shouldHideOnScroll = _ref_shouldHideOnScroll === void 0 ? false : _ref_shouldHideOnScroll;
+  var _input_current_parentElement;
   var popperData = useDropdown({
     isOpen,
     onDropdownClose: handleListClose,
-    referenceElement: inputWrapper.current,
+    referenceElement: (_input_current_parentElement = (_input_current = input.current) === null || _input_current === void 0 ? void 0 : _input_current.parentElement) !== null && _input_current_parentElement !== void 0 ? _input_current_parentElement : inputWrapper.current,
     dropdownElement: list.current,
     options: dropdownOptions,
     dependenciesForPositionUpdating: [
@@ -11670,10 +11691,11 @@ function Select(props) {
     ]
   });
   useEffect(function() {
-    var _optionsIndexesForNavigation_find;
-    setFocusedListCellIndex((_optionsIndexesForNavigation_find = optionsIndexesForNavigation.find(function(index) {
-      return isNotEmpty(strValue) && isNotEmpty(filteredOptions[index]) && convertToId(filteredOptions[index]) === convertToId(strValue);
-    })) !== null && _optionsIndexesForNavigation_find !== void 0 ? _optionsIndexesForNavigation_find : optionsIndexesForNavigation[0]);
+    var focusedCellIndex = isNotEmpty(strValue) ? optionsIndexesForNavigation.find(function(index) {
+      var option = filteredOptions[index];
+      return isNotEmpty(option) && convertToId(option) === convertToId(strValue);
+    }) : void 0;
+    setFocusedListCellIndex(focusedCellIndex !== null && focusedCellIndex !== void 0 ? focusedCellIndex : optionsIndexesForNavigation[0]);
   }, [
     strValue,
     filteredOptions,
@@ -11687,11 +11709,24 @@ function Select(props) {
   }, [
     isOpen
   ]);
+  var searchInputEl = hasSearchInputInList && /* @__PURE__ */ jsx(SearchInput, _object_spread$H({
+    value: searchValue,
+    onChange: handleInputChange,
+    tweakStyles: tweakSearchInputStyles,
+    placeholder: "Поиск"
+  }, searchInputProps));
+  var customHeader = (isReactNodeNotEmpty(searchInputEl) || isReactNodeNotEmpty(header)) && /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      searchInputEl,
+      header
+    ]
+  });
   var _obj2;
   var listEl = /* @__PURE__ */ jsx("div", _object_spread_props$C(_object_spread$H({
     className: clsx(classes.listWrapper, (_obj2 = {}, _define_property$J(_obj2, classes.withoutPopper, !shouldUsePopper), _define_property$J(_obj2, classes.listWrapperInBody, shouldRenderInBody), _obj2)),
     ref: list,
     style: popperData === null || popperData === void 0 ? void 0 : popperData.styles.popper,
+    tabIndex: 0,
     onBlur: handleBlur
   }, popperData === null || popperData === void 0 ? void 0 : popperData.attributes.popper), {
     children: isOpen && /* @__PURE__ */ jsx(SelectList, {
@@ -11699,12 +11734,8 @@ function Select(props) {
       defaultOptionLabel: hasDefaultOption && shouldShowDefaultOption && defaultOptionLabel,
       allOptionsLabel: shouldShowAllOption && allOptionsLabel,
       areAllOptionsSelected,
-      customListHeader: hasSearchInputInList && /* @__PURE__ */ jsx(SearchInput, _object_spread$H({
-        value: searchValue,
-        onChange: handleInputChange,
-        tweakStyles: tweakSearchInputStyles,
-        placeholder: "Поиск"
-      }, searchInputProps)),
+      customListHeader: customHeader,
+      customListFooter: footer,
       noMatchesLabel,
       focusedIndex: focusedListCellIndex,
       activeValue: value,
@@ -11712,13 +11743,14 @@ function Select(props) {
       loadingLabel,
       tweakStyles: tweakSelectListStyles,
       testId: getTestId(testId, "list"),
+      isMultiSelect,
       shouldScrollToList: shouldScrollToList && !shouldUsePopper && !shouldHideOnScroll,
       isOptionDisabled,
       convertValueToString,
       convertValueToReactNode,
       convertValueToId: convertToId,
       onOptionSelect: handleOptionSelect,
-      onToggleCheckbox: isMultiSelect ? handleToggleOptionCheckbox : void 0
+      onToggleCheckbox: handleToggleOptionCheckbox
     })
   }));
   var multiSelectCounterWithIcon = shouldShowMultiSelectCounter || isNotEmpty(iconType) ? /* @__PURE__ */ jsxs(Fragment, {
@@ -11740,6 +11772,7 @@ function Select(props) {
   return /* @__PURE__ */ jsxs("div", {
     className: classes.root,
     onKeyDown: handleKeyDown,
+    ref: root2,
     children: [
       /* @__PURE__ */ jsxs("div", {
         className: clsx(classes.inputWrapper, isDisabled && classes.disabled),