@epam/ai-dial-ui-kit 0.15.0-dev.5 → 0.15.0-dev.51

package/dist/components/New/Select/Select.js

@@ -1,88 +1,92 @@
-import { jsx as l, jsxs as g, Fragment as Be } from "react/jsx-runtime";
-import { IconChevronDown as _e } from "@tabler/icons-react";
-import { useId as je, useState as j, useCallback as f, useMemo as m, useEffect as Ke, useImperativeHandle as ze, Fragment as Ue } from "react";
-import { Checkbox as Ve } from "../Checkbox/Checkbox.js";
-import { Dropdown as qe } from "../Dropdown/Dropdown.js";
-import { EllipsisTooltip as Ge } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { InteractiveTooltip as He } from "../InteractiveTooltip/InteractiveTooltip.js";
-import { ErrorText as Qe, CaptionText as Re } from "../CaptionText/CaptionText.js";
-import { GhostIconButton as We } from "../IconButton/IconButtonWrappers.js";
-import { Input as ne } from "../Input/Input.js";
-import { Label as Ze } from "../Label/Label.js";
-import { DialNoDataContent as Je } from "../../NoDataContent/NoDataContent.js";
-import { DIAL_KIT_ICON_STROKE as Xe } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as re } from "../../../constants/icon.js";
-import { MenuItem as ae } from "../MenuItem/MenuItem.js";
-import { MenuItemMark as K } from "../../../types/menu-item.js";
+import { jsx as l, jsxs as g, Fragment as je } from "react/jsx-runtime";
+import { IconChevronDown as ze } from "@tabler/icons-react";
+import { useId as Ue, useState as z, useCallback as f, useMemo as m, useEffect as Ve, useImperativeHandle as qe, Fragment as Ge } from "react";
+import { Checkbox as He } from "../Checkbox/Checkbox.js";
+import { Dropdown as Qe } from "../Dropdown/Dropdown.js";
+import { EllipsisTooltip as We } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { InteractiveTooltip as Ze } from "../InteractiveTooltip/InteractiveTooltip.js";
+import { ErrorText as Je, CaptionText as Re } from "../CaptionText/CaptionText.js";
+import { GhostIconButton as Xe } from "../IconButton/IconButtonWrappers.js";
+import { Input as re } from "../Input/Input.js";
+import { Label as Ye } from "../Label/Label.js";
+import { DialNoDataContent as Pe } from "../../NoDataContent/NoDataContent.js";
+import { DIAL_KIT_ICON_STROKE as el } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as ae } from "../../../constants/icon.js";
+import { MenuItem as ie } from "../MenuItem/MenuItem.js";
+import { MenuItemMark as U } from "../../../types/menu-item.js";
 import { ElementSize as O } from "../../../types/size.js";
-import { resolveAccessibleName as ie } from "../../../utils/accessible-name.js";
+import { useIsMobileScreen as ll } from "../../../hooks/use-is-mobile-screen.js";
+import { resolveAccessibleName as oe } from "../../../utils/accessible-name.js";
 import { mergeClasses as p } from "../../../utils/merge-classes.js";
-import { MultiSelectTags as Ye } from "./MultiSelectTags.js";
-import { SelectSubMenuItem as Pe } from "./SelectSubMenuItem.js";
-import { selectFieldIconClassName as el, selectListWidthClassName as ll, selectOverlayBaseClassName as tl, selectSearchThreshold as nl, selectSearchIcon as rl, selectCloseIcon as al, selectOptionBaseClassName as il, selectOptionsScrollClassName as ol, selectEmptyStateIcon as sl } from "./constants.js";
-const Fl = ({
+import { CollapsedSelectTags as tl } from "./CollapsedSelectTags.js";
+import { MultiSelectTags as nl } from "./MultiSelectTags.js";
+import { SelectSubMenuItem as rl } from "./SelectSubMenuItem.js";
+import { selectFieldIconClassName as al, selectListWidthClassName as il, selectOverlayBaseClassName as ol, selectSearchThreshold as sl, selectSearchIcon as cl, selectCloseIcon as dl, selectOptionBaseClassName as fl, selectOptionsScrollClassName as ml, selectEmptyStateIcon as ul } from "./constants.js";
+import { DIAL_KIT_CLASS as hl } from "../../../constants/public-class-names.js";
+const zl = ({
   options: a,
   multiple: n = !1,
-  id: oe,
-  value: A,
-  defaultValue: se,
-  size: z = O.Standard,
-  prefix: U,
-  customSelectedValue: V,
-  placeholder: ce = "Select...",
-  labelProps: S,
-  error: q,
-  caption: de,
-  ariaLabel: G,
-  searchable: H = !1,
-  searchSize: fe = O.Standard,
-  searchPlaceholder: Q,
-  selectAll: me = !1,
-  invalid: ue,
-  selectAllLabel: he = "Select all",
-  selectedOptionMark: R = K.Tint,
-  emptyStateTitle: pe = "No options available",
-  emptyStateDescription: ve,
-  emptyStateIcon: be,
-  disabled: v = !1,
-  className: Ce,
+  id: se,
+  value: D,
+  defaultValue: ce,
+  size: V = O.Standard,
+  prefix: q,
+  customSelectedValue: G,
+  placeholder: de = "Select...",
+  labelProps: N,
+  error: H,
+  caption: fe,
+  ariaLabel: Q,
+  searchable: W = !1,
+  searchSize: me = O.Standard,
+  searchPlaceholder: Z,
+  selectAll: ue = !1,
+  invalid: he,
+  selectAllLabel: pe = "Select all",
+  collapseTagOverflow: be = !1,
+  selectedOptionMark: J = U.Tint,
+  emptyStateTitle: ve = "No options available",
+  emptyStateDescription: Ce,
+  emptyStateIcon: Se,
+  disabled: b = !1,
+  className: ge,
   fieldClassName: Ne,
-  listClassName: ge,
-  closable: D = !1,
-  header: x,
-  footer: I,
-  onClose: W,
-  onChange: Z,
-  dismissRef: Se,
-  onFooterClick: J,
-  open: X,
-  onOpenChange: Y,
-  onSearchQueryChange: P,
-  customMultiSelectTagsRenderer: ee
+  listClassName: Ie,
+  closable: F = !1,
+  header: I,
+  footer: x,
+  onClose: R,
+  onChange: X,
+  dismissRef: xe,
+  onFooterClick: Y,
+  open: P,
+  onOpenChange: ee,
+  onSearchQueryChange: le,
+  customMultiSelectTagsRenderer: L
 }) => {
-  const xe = je(), u = oe || xe, le = `list-${u}`, te = z === O.Small, [Ie, we] = j(!1), F = X !== void 0, d = F ? !!X : Ie, c = f(
+  const we = Ue(), u = se || we, te = `list-${u}`, ne = V === O.Small, [ye, Te] = z(!1), E = P !== void 0, d = E ? !!P : ye, c = f(
     (e) => {
-      F || we(e), Y?.(e);
+      E || Te(e), ee?.(e);
     },
-    [F, Y]
-  ), [h, ye] = j(""), L = f(
+    [E, ee]
+  ), [h, Ae] = z(""), M = f(
     (e) => {
-      e !== h && (ye(e || ""), P?.(e || ""));
+      e !== h && (Ae(e || ""), le?.(e || ""));
     },
-    [P, h]
-  ), E = A !== void 0, [Te, ke] = j(se), b = E ? A : Te, r = m(() => n ? Array.isArray(b) ? b : [] : typeof b == "string" ? [b] : [], [b, n]), w = m(() => {
+    [le, h]
+  ), $ = D !== void 0, [ke, Oe] = z(ce), v = $ ? D : ke, r = m(() => n ? Array.isArray(v) ? v : [] : typeof v == "string" ? [v] : [], [v, n]), w = m(() => {
     const e = h.trim().toLowerCase();
     return e ? a.filter((t) => t.label.toLowerCase().includes(e)) : a;
   }, [a, h]);
-  Ke(() => {
-    d || L("");
-  }, [d, L]);
+  Ve(() => {
+    d || M("");
+  }, [d, M]);
   const s = f(
     (e) => {
-      E || ke(e), Z?.(e);
+      $ || Oe(e), X?.(e);
     },
-    [E, Z]
-  ), $ = f(
+    [$, X]
+  ), _ = f(
     (e) => {
       if (n) {
         const t = new Set(r);
@@ -92,13 +96,13 @@ const Fl = ({
       s(e), c(!1);
     },
     [n, s, c, r]
-  ), M = f(
+  ), y = f(
     (e, t) => {
       if (e.stopPropagation(), !n) {
         s("");
         return;
       }
-      const k = r.filter((Me) => Me !== t);
+      const k = r.filter((Ke) => Ke !== t);
       s(k);
     },
     [n, r, s]
@@ -108,15 +112,15 @@ const Fl = ({
   ), B = m(
     () => o.filter((e) => r.includes(e.value)).length,
     [o, r]
-  ), { allSelectedInFiltered: _, someSelectedInFiltered: Oe } = m(() => {
+  ), { allSelectedInFiltered: K, someSelectedInFiltered: De } = m(() => {
     const e = o.length > 0 && B === o.length;
     return {
       allSelectedInFiltered: e,
       someSelectedInFiltered: B > 0 && !e
     };
-  }, [o, B]), Ae = f(() => {
+  }, [o, B]), Fe = f(() => {
     if (!(!n || o.length === 0))
-      if (_) {
+      if (K) {
         const e = new Set(o.map((t) => t.value));
         s(r.filter((t) => !e.has(t)));
       } else {
@@ -124,119 +128,127 @@ const Fl = ({
         o.forEach((t) => e.add(t.value)), s(Array.from(e));
       }
   }, [
-    _,
+    K,
     n,
     o,
     r,
     s
-  ]), y = r.length > 0, T = !n && y ? r[0] : void 0, i = m(
-    () => T ? a.find((e) => e.value === T) ?? a.flatMap((e) => e.children ?? []).find((e) => e.value === T) : void 0,
-    [a, T]
-  ), C = i ? U ? `${U} ${i.label}` : i.label : void 0, N = m(() => n ? y ? /* @__PURE__ */ l("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: ee?.(
+  ]), T = r.length > 0, A = !n && T ? r[0] : void 0, i = m(
+    () => A ? a.find((e) => e.value === A) ?? a.flatMap((e) => e.children ?? []).find((e) => e.value === A) : void 0,
+    [a, A]
+  ), C = i ? q ? `${q} ${i.label}` : i.label : void 0, Le = ll(), j = n && be && !L && !Le, S = m(() => n ? T ? j ? /* @__PURE__ */ l(
+    tl,
+    {
+      options: a,
+      selectedValues: r,
+      handleRemoveTag: y
+    }
+  ) : /* @__PURE__ */ l("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2", children: L?.(
     a,
     r,
-    M
+    y
   ) ?? /* @__PURE__ */ l(
-    Ye,
+    nl,
     {
       options: a,
       selectedValues: r,
-      handleRemoveTag: M
+      handleRemoveTag: y
     }
   ) }) : null : !i || !i.labelNode && !i.description ? null : /* @__PURE__ */ g("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
     /* @__PURE__ */ l(
-      Ge,
+      We,
       {
         text: i.labelNode ?? C
       }
     ),
     i.description && /* @__PURE__ */ l("span", { className: "truncate text-secondary dial-tiny-text", children: i.description })
   ] }), [
-    ee,
-    M,
+    j,
+    L,
     y,
+    T,
     n,
     a,
     C,
     r,
     i
-  ]), De = n || N ? "" : C || (V && A ? V : ""), Fe = typeof S?.label == "string" ? S.label : void 0, Le = N ? [
-    ie(G, Fe),
+  ]), Ee = n || S ? "" : C || (G && D ? G : ""), Me = typeof N?.label == "string" ? N.label : void 0, $e = S ? [
+    oe(Q, Me),
     n ? r.map((e) => a.find((t) => t.value === e)?.label ?? e).join(", ") : C
-  ].filter(Boolean).join(", ") || void 0 : ie(G);
-  ze(Se, () => ({
+  ].filter(Boolean).join(", ") || void 0 : oe(Q);
+  qe(xe, () => ({
     dismiss: () => {
       c(!1);
     }
   }));
-  const Ee = f(
+  const _e = f(
     (e) => {
-      v || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), d || c(!0));
+      b || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), d || c(!0));
     },
-    [v, d, c]
-  ), $e = () => /* @__PURE__ */ g(
+    [b, d, c]
+  ), Be = () => /* @__PURE__ */ g(
     "div",
     {
-      id: le,
+      id: te,
       role: "listbox",
       "aria-multiselectable": n || void 0,
-      className: tl,
+      className: ol,
       children: [
-        x && /* @__PURE__ */ l(Be, { children: typeof x == "function" ? x() : x }),
-        (H || D) && (a.length > nl || !!h) && /* @__PURE__ */ g("div", { className: "flex items-center gap-2 px-2 pt-2", children: [
-          H && /* @__PURE__ */ l(
-            ne,
+        I && /* @__PURE__ */ l(je, { children: typeof I == "function" ? I() : I }),
+        (W || F) && (a.length > sl || !!h) && /* @__PURE__ */ g("div", { className: "flex items-center gap-2 px-2 pt-2", children: [
+          W && /* @__PURE__ */ l(
+            re,
             {
               id: `search-${u}`,
-              size: fe,
-              placeholder: Q,
-              "aria-label": Q || "Search options",
-              onChange: (e) => L(e),
+              size: me,
+              placeholder: Z,
+              "aria-label": Z || "Search options",
+              onChange: (e) => M(e),
               value: h,
-              iconBefore: rl,
+              iconBefore: cl,
               containerClassName: "w-full"
             }
           ),
-          D && /* @__PURE__ */ l(
-            We,
+          F && /* @__PURE__ */ l(
+            Xe,
             {
               "aria-label": "Close select",
               className: "shrink-0",
               size: O.Small,
-              icon: al,
+              icon: dl,
               onClick: (e) => {
-                W?.(e), c(!1);
+                R?.(e), c(!1);
               }
             }
           )
         ] }),
-        n && me && o.length > 0 && /* @__PURE__ */ l("div", { className: p(il, "mt-2"), children: /* @__PURE__ */ l(
-          Ve,
+        n && ue && o.length > 0 && /* @__PURE__ */ l("div", { className: p(fl, "mt-2"), children: /* @__PURE__ */ l(
+          He,
           {
             id: `${u}-selectAll`,
-            labelProps: { label: he },
-            isSelected: _,
-            isIndeterminate: Oe,
-            onChange: Ae
+            labelProps: { label: pe },
+            isSelected: K,
+            isIndeterminate: De,
+            onChange: Fe
           }
         ) }),
-        /* @__PURE__ */ l("div", { role: "none", className: ol, children: w.length === 0 ? /* @__PURE__ */ l("div", { className: "px-2 py-3", children: /* @__PURE__ */ l(
-          Je,
+        /* @__PURE__ */ l("div", { role: "none", className: ml, children: w.length === 0 ? /* @__PURE__ */ l("div", { className: "px-2 py-3", children: /* @__PURE__ */ l(
+          Pe,
           {
-            icon: be ?? sl,
-            title: pe,
-            description: ve
+            icon: Se ?? ul,
+            title: ve,
+            description: Ce
           }
         ) }) : w.map((e) => {
           const t = r.includes(e.value);
           if (e.children?.length)
             return /* @__PURE__ */ l(
-              Pe,
+              rl,
               {
                 opt: e,
                 selectedValues: r,
-                mark: n ? K.Checkbox : R,
-                onSelect: $
+                mark: n ? U.Checkbox : J,
+                onSelect: _
               },
               e.value
             );
@@ -249,41 +261,41 @@ const Fl = ({
               has the whole row selecting the option.
             */
             /* @__PURE__ */ l(
-              ae,
+              ie,
               {
                 id: `${u}-${e.value}`,
                 role: "option",
                 "aria-selected": t,
                 "aria-disabled": !!e.disabled,
                 disabled: e.disabled,
-                mark: K.Checkbox,
+                mark: U.Checkbox,
                 selected: t,
                 icon: e.icon,
                 label: e.labelNode ?? e.label,
                 description: e.description,
                 rightControl: e.rightControl,
-                onClick: () => $(e.value)
+                onClick: () => _(e.value)
               }
             )
           ) : /* @__PURE__ */ l(
-            ae,
+            ie,
             {
               role: "option",
               "aria-selected": t,
               "aria-disabled": !!e.disabled,
               disabled: e.disabled,
-              mark: R,
+              mark: J,
               selected: t,
               ellipsisLabel: !0,
               icon: e.icon,
               label: e.labelNode ?? e.label,
               description: e.description,
               rightControl: e.rightControl,
-              onClick: () => !e.disabled && $(e.value)
+              onClick: () => !e.disabled && _(e.value)
             }
           );
-          return /* @__PURE__ */ l(Ue, { children: e.interactiveTooltip ? /* @__PURE__ */ l(
-            He,
+          return /* @__PURE__ */ l(Ge, { children: e.interactiveTooltip ? /* @__PURE__ */ l(
+            Ze,
             {
               asChild: !0,
               placement: e.interactiveTooltip.placement,
@@ -293,87 +305,97 @@ const Fl = ({
             }
           ) : k }, e.value);
         }) }),
-        I && /* @__PURE__ */ l(
+        x && /* @__PURE__ */ l(
           "div",
           {
             onClick: (e) => {
-              J?.(e), J && c(!1);
+              Y?.(e), Y && c(!1);
             },
-            children: typeof I == "function" ? I() : I
+            children: typeof x == "function" ? x() : x
           }
         )
       ]
     }
   );
-  return /* @__PURE__ */ g("div", { className: p("flex w-full flex-col gap-2", Ce), children: [
-    S && /* @__PURE__ */ l(Ze, { ...S, htmlFor: u }),
-    /* @__PURE__ */ g("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ l(
-        qe,
-        {
-          open: d,
-          onOpenChange: c,
-          disabled: v,
-          closable: D,
-          onClose: W,
-          placement: "bottom-start",
-          allowedPlacements: ["bottom-start", "top-start"],
-          listClassName: p(ll, ge),
-          className: "w-full",
-          renderOverlay: $e,
-          children: /* @__PURE__ */ l(
-            ne,
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: p(
+        "flex w-full flex-col gap-2",
+        ge,
+        hl.select
+      ),
+      children: [
+        N && /* @__PURE__ */ l(Ye, { ...N, htmlFor: u }),
+        /* @__PURE__ */ g("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ l(
+            Qe,
             {
-              id: u,
-              size: z,
-              disabled: v,
-              invalid: ue,
-              value: De,
-              placeholder: N ? void 0 : ce,
-              readOnly: !0,
-              iconBefore: n ? void 0 : i?.icon,
-              iconAfter: /* @__PURE__ */ l(
-                _e,
+              open: d,
+              onOpenChange: c,
+              disabled: b,
+              closable: F,
+              onClose: R,
+              placement: "bottom-start",
+              allowedPlacements: ["bottom-start", "top-start"],
+              listClassName: p(il, Ie),
+              className: "w-full",
+              renderOverlay: Be,
+              children: /* @__PURE__ */ l(
+                re,
                 {
-                  size: te ? re.SM : re.MD,
-                  stroke: Xe,
-                  "aria-hidden": "true",
+                  id: u,
+                  size: V,
+                  disabled: b,
+                  invalid: he,
+                  value: Ee,
+                  placeholder: S ? void 0 : de,
+                  readOnly: !0,
+                  iconBefore: n ? void 0 : i?.icon,
+                  iconAfter: /* @__PURE__ */ l(
+                    ze,
+                    {
+                      size: ne ? ae.SM : ae.MD,
+                      stroke: el,
+                      "aria-hidden": "true",
+                      className: p(
+                        al,
+                        d && "rotate-180"
+                      )
+                    }
+                  ),
+                  role: "combobox",
+                  "aria-haspopup": "listbox",
+                  "aria-expanded": d,
+                  "aria-controls": te,
+                  "aria-autocomplete": "none",
+                  "aria-label": $e,
+                  containerClassName: "w-full",
+                  wrapperClassName: p(
+                    !b && "cursor-pointer",
+                    n && T && !j && [
+                      "!h-auto flex-wrap py-2",
+                      ne ? "min-h-[24px]" : "min-h-[40px]"
+                    ],
+                    Ne
+                  ),
                   className: p(
-                    el,
-                    d && "rotate-180"
-                  )
+                    "cursor-pointer",
+                    S && "w-0 min-w-0 flex-none p-0"
+                  ),
+                  onKeyDown: _e,
+                  children: S
                 }
-              ),
-              role: "combobox",
-              "aria-haspopup": "listbox",
-              "aria-expanded": d,
-              "aria-controls": le,
-              "aria-autocomplete": "none",
-              "aria-label": Le,
-              containerClassName: "w-full",
-              wrapperClassName: p(
-                !v && "cursor-pointer",
-                n && y && [
-                  "!h-auto flex-wrap py-1.5",
-                  te ? "min-h-[24px]" : "min-h-[40px]"
-                ],
-                Ne
-              ),
-              className: p(
-                "cursor-pointer",
-                N && "w-0 min-w-0 flex-none p-0"
-              ),
-              onKeyDown: Ee,
-              children: N
+              )
             }
-          )
-        }
-      ),
-      /* @__PURE__ */ l(Qe, { text: q }),
-      !q && /* @__PURE__ */ l(Re, { text: de })
-    ] })
-  ] });
+          ),
+          /* @__PURE__ */ l(Je, { text: H }),
+          !H && /* @__PURE__ */ l(Re, { text: fe })
+        ] })
+      ]
+    }
+  );
 };
 export {
-  Fl as Select
+  zl as Select
 };

package/dist/components/New/Select/constants.js

@@ -1,33 +1,36 @@
 import { jsx as s } from "react/jsx-runtime";
-import { IconSearch as o, IconX as a, IconChevronRight as r } from "@tabler/icons-react";
-import c from "../../../assets/icons/no-data.svg.js";
-import { overlayItemClassName as l, overlayGap as n, overlaySubMenuClassName as i } from "../constants/overlay.js";
+import { IconSearch as a, IconX as r, IconChevronRight as c } from "@tabler/icons-react";
+import l from "../../../assets/icons/no-data.svg.js";
+import { overlayItemClassName as n, overlayListClassName as i, overlayGap as m, overlaySubMenuListClassName as h } from "../constants/overlay.js";
 import { DIAL_KIT_ICON_STROKE as t } from "../constants/icon.js";
 import { DIAL_ICON_SIZE as e } from "../../../constants/icon.js";
-import { mergeClasses as m } from "../../../utils/merge-classes.js";
-const f = m("w-full flex flex-col"), N = l, v = "!max-w-[var(--reference-width)]", x = "max-h-[344px] overflow-y-auto", y = n, M = i, O = /* @__PURE__ */ s(
-  r,
+import { mergeClasses as o } from "../../../utils/merge-classes.js";
+const N = o("w-full flex flex-col"), v = n, y = "!max-w-[var(--reference-width)]", x = o(
+  "max-h-[344px] overflow-y-auto py-1",
+  i
+), L = m, M = h, O = /* @__PURE__ */ s(
+  c,
   {
     size: e.SM,
     stroke: t,
     "aria-hidden": "true"
   }
-), w = "text-secondary transition-transform", L = 8, _ = /* @__PURE__ */ s(
-  o,
+), w = "text-secondary transition-transform", _ = 8, b = /* @__PURE__ */ s(
+  a,
   {
     size: e.MD,
     stroke: t,
     "aria-hidden": "true"
   }
-), b = /* @__PURE__ */ s(
-  a,
+), g = /* @__PURE__ */ s(
+  r,
   {
     size: e.SM,
     stroke: t,
     "aria-hidden": "true"
   }
-), g = /* @__PURE__ */ s(
-  c,
+), D = /* @__PURE__ */ s(
+  l,
   {
     width: e.LG,
     height: e.LG,
@@ -35,16 +38,16 @@ const f = m("w-full flex flex-col"), N = l, v = "!max-w-[var(--reference-width)]
   }
 );
 export {
-  b as selectCloseIcon,
-  g as selectEmptyStateIcon,
+  g as selectCloseIcon,
+  D as selectEmptyStateIcon,
   w as selectFieldIconClassName,
-  v as selectListWidthClassName,
-  N as selectOptionBaseClassName,
+  y as selectListWidthClassName,
+  v as selectOptionBaseClassName,
   x as selectOptionsScrollClassName,
-  f as selectOverlayBaseClassName,
-  _ as selectSearchIcon,
-  L as selectSearchThreshold,
+  N as selectOverlayBaseClassName,
+  b as selectSearchIcon,
+  _ as selectSearchThreshold,
   O as selectSubMenuCaretIcon,
   M as selectSubMenuClassName,
-  y as selectSubMenuGap
+  L as selectSubMenuGap
 };