@epam/ai-dial-ui-kit 0.14.0-dev.40 → 0.14.0-dev.41

package/dist/components/New/InteractiveTooltip/InteractiveTooltip.js

@@ -0,0 +1,101 @@
+import { jsx as s, jsxs as L, Fragment as j } from "react/jsx-runtime";
+import { useFloating as w, autoUpdate as D, offset as H, flip as U, shift as G, useHover as Y, safePolygon as k, useFocus as q, useDismiss as z, useInteractions as B, useMergeRefs as m, FloatingPortal as J, FloatingFocusManager as K } from "@floating-ui/react";
+import { useState as Q, useRef as W, useMemo as u, isValidElement as X, cloneElement as Z } from "react";
+import { useThemeScope as $ } from "../ThemeScope/ThemeScope.js";
+import { useIsMobileScreen as ee } from "../../../hooks/use-is-mobile-screen.js";
+import { TooltipPlacement as oe } from "../../../types/tooltip.js";
+import { mergeClasses as d } from "../../../utils/merge-classes.js";
+import { INTERACTIVE_TOOLTIP_GAP as te, INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY as se, interactiveTooltipClassName as ne } from "./constants.js";
+const ue = ({
+  content: a,
+  placement: g = oe.Right,
+  children: e,
+  asChild: R = !1,
+  hideTooltip: T = !1,
+  initialOpen: h = !1,
+  open: n,
+  onOpenChange: F,
+  triggerClassName: r,
+  contentClassName: E
+}) => {
+  const P = ee(), I = $(), [O, C] = Q(h), i = n ?? O, v = F ?? C, { refs: t, floatingStyles: N, context: o } = w({
+    placement: g,
+    open: i,
+    onOpenChange: v,
+    whileElementsMounted: D,
+    middleware: [
+      H(te),
+      /* No `fallbackAxisSideDirection`: a panel placed to the right should
+       flip to the left when it does not fit, not drop to the perpendicular
+       top/bottom axis, which reads as the panel landing in the wrong place.*/
+      U({ padding: 5 }),
+      G({ padding: 5 })
+    ]
+  }), M = Y(o, {
+    enabled: n == null,
+    /* Lets the pointer cross the gap between the trigger and the panel
+       without closing it, so it can actually be reached and used. */
+    handleClose: k(),
+    delay: { open: se, close: 0 }
+  }), _ = q(o, { enabled: n == null }), x = z(o), { getReferenceProps: c, getFloatingProps: S } = B([
+    M,
+    _,
+    x
+  ]), V = W(null), b = m(
+    u(() => [t.setFloating, V], [t.setFloating])
+  ), f = R && X(e), l = f ? e.props?.ref : null, p = m(
+    u(
+      () => [t.setReference, ...l ? [l] : []],
+      [t.setReference, l]
+    )
+  ), y = !T && !P && !!a, A = f ? Z(
+    e,
+    c({
+      ...e.props,
+      ref: p,
+      className: d(
+        e.props.className,
+        r
+      ) || void 0
+    })
+  ) : /* @__PURE__ */ s(
+    "span",
+    {
+      ref: p,
+      ...c(),
+      className: r ?? "text-start",
+      children: e
+    }
+  );
+  return /* @__PURE__ */ L(j, { children: [
+    A,
+    i && y && /* @__PURE__ */ s(J, { id: "interactive-tooltip-portal", children: /* @__PURE__ */ s(
+      K,
+      {
+        context: o,
+        modal: !1,
+        initialFocus: -1,
+        returnFocus: !1,
+        order: ["reference", "content"],
+        children: /* @__PURE__ */ s(
+          "div",
+          {
+            ref: b,
+            "data-placement": o.placement,
+            style: N,
+            ...S(),
+            className: d(
+              ne,
+              I,
+              E
+            ),
+            children: a
+          }
+        )
+      }
+    ) })
+  ] });
+};
+export {
+  ue as InteractiveTooltip
+};

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

@@ -0,0 +1,6 @@
+const t = 8, a = 400, T = "z-[54] max-w-[320px] rounded-xl bg-layer-0 p-4 dial-small-text text-primary shadow-md";
+export {
+  t as INTERACTIVE_TOOLTIP_GAP,
+  a as INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY,
+  T as interactiveTooltipClassName
+};

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

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