@mattermost/compass-ui 0.1.0-alpha.20 → 0.1.0-alpha.21

package/dist/components/combobox/Combobox.js

@@ -1,22 +1,23 @@
-import { jsxs as M, jsx as s } from "react/jsx-runtime";
+import { jsxs as M, jsx as l } from "react/jsx-runtime";
 import { forwardRef as vr, useId as hr, useRef as X, useCallback as d, useState as V, useMemo as R, useEffect as Me } from "react";
 import __xr from "@mattermost/compass-icons/components/chevron-down.js";const xr=__xr&&__xr.default?__xr.default:__xr;
 import ___r from "@mattermost/compass-icons/components/close-circle.js";const _r=___r&&___r.default?___r.default:___r;
-import __pr from "@mattermost/compass-icons/components/plus.js";const pr=__pr&&__pr.default?__pr.default:__pr;
-import gr from "../chip/Chip.js";
-import yr from "../chip/ChipGroup.js";
-import se, { IconSlotContext as kr } from "../icon/Icon.js";
+import __gr from "@mattermost/compass-icons/components/plus.js";const gr=__gr&&__gr.default?__gr.default:__gr;
+import yr from "../chip/Chip.js";
+import pr from "../chip/ChipGroup.js";
+import ae, { IconSlotContext as kr } from "../icon/Icon.js";
 import Ve from "../menu-item/MenuItem.js";
-import wr, { PopoverMenuScroll as Dr } from "../popover-menu/PopoverMenu.js";
-import Nr from "../spinner/Spinner.js";
-import Ar from "../user-avatar/UserAvatar.js";
-import { useAnchoredPopupPortal as Mr } from "../../hooks/use-anchored-popup-portal.js";
-import { useOutsideClose as Vr } from "../../hooks/use-outside-close.js";
-import { usePopoverTransition as Rr } from "../../hooks/use-popover-transition.js";
-import { mergeMenuItemProps as Er } from "../../utils/menuItemProps.js";
-import { mergeClassNames as Sr } from "../../utils/props.js";
-import { toKebab as Ir } from "../../utils/string.js";
-import l from "./Combobox.module.scss.js";
+import Ar, { PopoverMenuScroll as wr } from "../popover-menu/PopoverMenu.js";
+import Dr from "../spinner/Spinner.js";
+import Nr from "../team-avatar/TeamAvatar.js";
+import Mr from "../user-avatar/UserAvatar.js";
+import { useAnchoredPopupPortal as Vr } from "../../hooks/use-anchored-popup-portal.js";
+import { useOutsideClose as Rr } from "../../hooks/use-outside-close.js";
+import { usePopoverTransition as Er } from "../../hooks/use-popover-transition.js";
+import { mergeMenuItemProps as Sr } from "../../utils/menuItemProps.js";
+import { mergeClassNames as Ir } from "../../utils/props.js";
+import { toKebab as Tr } from "../../utils/string.js";
+import a from "./Combobox.module.scss.js";
 const Re = 280, Lr = {
   small: "small",
   medium: "medium",
@@ -26,257 +27,268 @@ const Re = 280, Lr = {
   medium: "16",
   large: "16"
 };
-function Cr(t) {
-  return typeof t == "string" ? `${t} selections` : "Selected";
+function zr(n) {
+  return typeof n == "string" ? `${n} selections` : "Selected";
 }
-function Hr(t) {
-  return `Create "${t}"`;
+function Cr(n) {
+  return `Create "${n}"`;
 }
-function ae(t) {
-  return t.kind === "option" && t.option.disabled === !0;
+function se(n) {
+  return n.kind === "option" && n.option.disabled === !0;
 }
-function $r(t, b) {
-  return b ? t.label.toLowerCase().includes(b.toLowerCase()) : !0;
+function Hr(n, b) {
+  return b ? n.label.toLowerCase().includes(b.toLowerCase()) : !0;
 }
-function zr(t) {
-  return t == null ? null : Array.isArray(t) ? t[0] ?? null : t === "" ? null : t;
+function $r(n) {
+  return n == null ? null : Array.isArray(n) ? n[0] ?? null : n === "" ? null : n;
 }
-function Or(t) {
-  return t == null ? [] : Array.isArray(t) ? t : t === "" ? [] : [t];
+function Or(n) {
+  return n == null ? [] : Array.isArray(n) ? n : n === "" ? [] : [n];
 }
-function Tr(t) {
-  if (t.leadingVisual != null) return t.leadingVisual;
-  if (t.leadingAvatar != null)
-    return /* @__PURE__ */ s(
-      Ar,
+function jr(n) {
+  if (n.leadingVisual != null) return n.leadingVisual;
+  if (n.leadingAvatar != null)
+    return /* @__PURE__ */ l(
+      Mr,
       {
-        src: t.leadingAvatar.src,
-        alt: t.leadingAvatar.alt,
+        src: n.leadingAvatar.src,
+        alt: n.leadingAvatar.alt,
         size: "24"
       }
     );
+  if (n.leadingTeamAvatar != null)
+    return /* @__PURE__ */ l(
+      Nr,
+      {
+        src: n.leadingTeamAvatar.src,
+        initials: n.leadingTeamAvatar.initials ?? (n.leadingTeamAvatar.src ? void 0 : Array.from(n.label).slice(0, 2).join("")),
+        alt: n.leadingTeamAvatar.alt,
+        size: "24",
+        variant: "menu"
+      }
+    );
 }
-const so = vr(function({
+const cn = vr(function({
   options: b,
   menuItemProps: Ee,
   multiple: o = !1,
   value: ie,
   defaultValue: ce,
-  onChange: z,
+  onChange: H,
   inputValue: Z,
   defaultInputValue: Se = "",
   onInputChange: u,
-  label: N,
+  label: D,
   placeholder: Ie,
   leadingIcon: q,
   size: P = "medium",
   invalid: ue = !1,
-  disabled: p = !1,
-  filter: O = !0,
-  emptyMessage: Le = "No results",
+  disabled: g = !1,
+  filter: $ = !0,
+  emptyMessage: Te = "No results",
   loading: fe = !1,
-  loadingMessage: Fe = "Loading…",
+  loadingMessage: Le = "Loading…",
   selectedOptions: k,
   creatable: E = !1,
   onCreateOption: W,
-  formatCreateLabel: Ce = Hr,
-  clearable: He = !1,
-  clearLabel: $e = "Clear",
-  clearButtonProps: g,
-  selectionsLabel: ze,
-  listboxLabel: Oe = "Options",
-  className: Te = "",
-  id: Ue,
+  formatCreateLabel: Fe = Cr,
+  clearable: ze = !1,
+  clearLabel: Ce = "Clear",
+  clearButtonProps: y,
+  selectionsLabel: He,
+  listboxLabel: $e = "Options",
+  className: Oe = "",
+  id: je,
   "aria-label": de,
-  portalContainer: je = null,
+  portalContainer: Ue = null,
   zIndex: Ke
 }, S) {
-  const Ge = hr(), Y = Ue ?? Ge, I = `${Y}-listbox`, B = X(null), me = X(null), D = X(null), Qe = d(
+  const Ge = hr(), Y = je ?? Ge, I = `${Y}-listbox`, B = X(null), me = X(null), w = X(null), Qe = d(
     (e) => {
-      D.current = e, typeof S == "function" ? S(e) : S && (S.current = e);
+      w.current = e, typeof S == "function" ? S(e) : S && (S.current = e);
     },
     [S]
-  ), J = ie !== void 0, [Xe, Ze] = V(() => ce !== void 0 ? ce : o ? [] : null), ee = J ? ie : Xe, v = o ? null : zr(ee), a = R(
+  ), J = ie !== void 0, [Xe, Ze] = V(() => ce !== void 0 ? ce : o ? [] : null), ee = J ? ie : Xe, v = o ? null : $r(ee), s = R(
     () => o ? Or(ee) : [],
     [o, ee]
-  ), m = Z !== void 0, [re, L] = V(Se), [c, be] = V(!1), [qe, ve] = V(!1), [h, w] = V(-1), T = X(!1), he = d(
+  ), m = Z !== void 0, [re, T] = V(Se), [c, be] = V(!1), [qe, ve] = V(!1), [h, A] = V(-1), O = X(!1), he = d(
     (e) => {
-      e !== h && (T.current = !0, w(e));
+      e !== h && (O.current = !0, A(e));
     },
     [h]
-  ), [U, F] = V(null), j = d(
+  ), [j, L] = V(null), U = d(
     (e) => b.find((r) => r.value === e) ?? (k == null ? void 0 : k.find((r) => r.value === e)) ?? (E ? { value: e, label: e } : void 0),
     [b, k, E]
   ), K = R(
-    () => v == null ? void 0 : j(v),
-    [j, v]
-  ), oe = m ? Z : o ? re : U !== null ? U : (K == null ? void 0 : K.label) ?? re, ne = m ? Z : o ? re : U !== null ? U : "", C = d(
+    () => v == null ? void 0 : U(v),
+    [U, v]
+  ), ne = m ? Z : o ? re : j !== null ? j : (K == null ? void 0 : K.label) ?? re, oe = m ? Z : o ? re : j !== null ? j : "", F = d(
     (e) => {
-      m || (L(e), o || F(e)), u == null || u(e);
+      m || (T(e), o || L(e)), u == null || u(e);
     },
     [m, o, u]
   ), x = d(
     (e) => {
-      J || Ze(e), z == null || z(e);
+      J || Ze(e), H == null || H(e);
     },
-    [J, z]
+    [J, H]
   ), xe = R(() => {
-    if (O === !1) return b;
-    const e = typeof O == "function" ? O : $r;
-    return b.filter((r) => e(r, ne));
-  }, [b, O, ne]), H = E ? ne.trim() : "", _e = R(() => {
-    if (H === "") return !1;
-    const e = H.toLowerCase(), r = (f) => f.toLowerCase() === e;
-    return [...b, ...k ?? []].some((f) => r(f.label) || r(f.value)) ? !1 : !(o ? a : v != null ? [v] : []).some(r);
+    if ($ === !1) return b;
+    const e = typeof $ == "function" ? $ : Hr;
+    return b.filter((r) => e(r, oe));
+  }, [b, $, oe]), z = E ? oe.trim() : "", _e = R(() => {
+    if (z === "") return !1;
+    const e = z.toLowerCase(), r = (f) => f.toLowerCase() === e;
+    return [...b, ...k ?? []].some((f) => r(f.label) || r(f.value)) ? !1 : !(o ? s : v != null ? [v] : []).some(r);
   }, [
-    H,
+    z,
     b,
     k,
     o,
-    a,
+    s,
     v
   ]), i = R(
     () => [
       ...xe.map((e) => ({ kind: "option", option: e })),
-      ..._e ? [{ kind: "create", inputValue: H }] : []
+      ..._e ? [{ kind: "create", inputValue: z }] : []
     ],
-    [xe, _e, H]
-  ), A = d(
+    [xe, _e, z]
+  ), N = d(
     (e) => e.kind === "option" ? `${I}-option-${e.option.value}` : `${I}-create`,
     [I]
-  ), { mounted: pe, visible: Pe } = Rr(c), {
+  ), { mounted: ge, visible: Pe } = Er(c), {
     placement: We,
     maxHeight: Ye,
     style: Be,
-    portalRef: ge,
+    portalRef: ye,
     renderPortal: Je
-  } = Mr(me, pe, {
+  } = Vr(me, ge, {
     preferredHeight: Re,
     maxHeightCap: Re,
-    portalContainer: je,
+    portalContainer: Ue,
     zIndex: Ke
-  }), y = d(() => {
-    be(!1), w(-1), !o && !m && (F(null), L(""));
-  }, [o, m]), $ = d(() => {
-    p || be(!0);
-  }, [p]);
-  Vr(B, c, y, ge), Me(() => {
-    c && w((e) => {
+  }), p = d(() => {
+    be(!1), A(-1), !o && !m && (L(null), T(""));
+  }, [o, m]), C = d(() => {
+    g || be(!0);
+  }, [g]);
+  Rr(B, c, p, ye), Me(() => {
+    c && A((e) => {
       if (i.length === 0) return -1;
       if (e >= 0 && e < i.length) return e;
       const r = i.findIndex(
-        (n) => n.kind === "option" && (o ? a.includes(n.option.value) : n.option.value === v)
+        (t) => t.kind === "option" && (o ? s.includes(t.option.value) : t.option.value === v)
       );
       return r >= 0 ? r : 0;
     });
-  }, [c, i, o, a, v]);
+  }, [c, i, o, s, v]);
   const er = d(
-    (e) => o ? a.includes(e) : v === e,
-    [o, a, v]
+    (e) => o ? s.includes(e) : v === e,
+    [o, s, v]
   ), te = d(
     (e) => {
       var r;
       if (!e.disabled) {
         if (o) {
-          const n = a.includes(e.value) ? a.filter((_) => _ !== e.value) : [...a, e.value];
-          x(n), C(""), y(), (r = D.current) == null || r.focus();
+          const t = s.includes(e.value) ? s.filter((_) => _ !== e.value) : [...s, e.value];
+          x(t), F(""), p(), (r = w.current) == null || r.focus();
           return;
         }
-        x(e.value), m ? u == null || u(e.label) : (L(""), F(null)), y();
+        x(e.value), m ? u == null || u(e.label) : (T(""), L(null)), p();
       }
     },
     [
       o,
-      a,
+      s,
       x,
-      C,
+      F,
       m,
       u,
-      y
+      p
     ]
   ), le = d(
     (e) => {
       var r;
-      if (W ? W(e) : x(o ? [...a, e] : e), o) {
-        C(""), y(), (r = D.current) == null || r.focus();
+      if (W ? W(e) : x(o ? [...s, e] : e), o) {
+        F(""), p(), (r = w.current) == null || r.focus();
         return;
       }
-      m ? u == null || u(e) : (L(""), F(null)), y();
+      m ? u == null || u(e) : (T(""), L(null)), p();
     },
     [
       W,
       o,
-      a,
+      s,
       x,
-      C,
+      F,
       m,
       u,
-      y
+      p
     ]
   ), rr = d(
     (e) => {
       e.kind === "create" ? le(e.inputValue) : te(e.option);
     },
     [le, te]
-  ), or = d(() => {
+  ), nr = d(() => {
     var e;
-    x(null), m ? u == null || u("") : (L(""), F(null)), (e = D.current) == null || e.focus();
-  }, [x, m, u]), ye = d(
+    x(null), m ? u == null || u("") : (T(""), L(null)), (e = w.current) == null || e.focus();
+  }, [x, m, u]), pe = d(
     (e) => {
-      o && x(a.filter((r) => r !== e));
+      o && x(s.filter((r) => r !== e));
     },
-    [o, a, x]
+    [o, s, x]
   ), ke = d(
     (e) => {
-      T.current = !1;
-      const r = i.map((n, _) => ({ row: n, i: _ })).filter(({ row: n }) => !ae(n));
+      O.current = !1;
+      const r = i.map((t, _) => ({ row: t, i: _ })).filter(({ row: t }) => !se(t));
       if (r.length === 0) {
-        w(-1);
+        A(-1);
         return;
       }
-      w((n) => {
-        const _ = r.findIndex(({ i: Q }) => Q === n), f = _ < 0 ? e > 0 ? 0 : r.length - 1 : (_ + e + r.length) % r.length;
+      A((t) => {
+        const _ = r.findIndex(({ i: Q }) => Q === t), f = _ < 0 ? e > 0 ? 0 : r.length - 1 : (_ + e + r.length) % r.length;
         return r[f].i;
       });
     },
     [i]
   );
   Me(() => {
-    var r, n;
+    var r, t;
     if (!c || h < 0) return;
-    if (T.current) {
-      T.current = !1;
+    if (O.current) {
+      O.current = !1;
       return;
     }
     const e = i[h];
-    e && ((n = (r = document.getElementById(A(e))) == null ? void 0 : r.scrollIntoView) == null || n.call(r, { block: "nearest" }));
-  }, [c, h, i, A]);
-  const nr = (e) => {
+    e && ((t = (r = document.getElementById(N(e))) == null ? void 0 : r.scrollIntoView) == null || t.call(r, { block: "nearest" }));
+  }, [c, h, i, N]);
+  const or = (e) => {
     const r = e.target.value;
-    C(r), c || $(), w(0);
+    F(r), c || C(), A(0);
   }, tr = () => {
-    ve(!0), $(), !o && !m && K && requestAnimationFrame(() => {
+    ve(!0), C(), !o && !m && K && requestAnimationFrame(() => {
       var e;
-      (e = D.current) == null || e.select();
+      (e = w.current) == null || e.select();
     });
-  }, we = (e) => {
-    var n;
+  }, Ae = (e) => {
+    var t;
     const r = e.relatedTarget;
-    r && ((n = B.current) != null && n.contains(r)) || ve(!1);
+    r && ((t = B.current) != null && t.contains(r)) || ve(!1);
   }, lr = (e) => {
-    if (!p)
+    if (!g)
       switch (e.key) {
         case "ArrowDown":
-          e.preventDefault(), c ? ke(1) : $();
+          e.preventDefault(), c ? ke(1) : C();
           break;
         case "ArrowUp":
-          e.preventDefault(), c ? ke(-1) : $();
+          e.preventDefault(), c ? ke(-1) : C();
           break;
         case "Home":
-          c && i.length > 0 && (e.preventDefault(), w(
+          c && i.length > 0 && (e.preventDefault(), A(
             Math.max(
               0,
-              i.findIndex((r) => !ae(r))
+              i.findIndex((r) => !se(r))
             )
           ));
           break;
@@ -284,8 +296,8 @@ const so = vr(function({
           if (c && i.length > 0) {
             e.preventDefault();
             for (let r = i.length - 1; r >= 0; r--)
-              if (!ae(i[r])) {
-                w(r);
+              if (!se(i[r])) {
+                A(r);
                 break;
               }
           }
@@ -294,72 +306,72 @@ const so = vr(function({
           c && h >= 0 && i[h] && (e.preventDefault(), rr(i[h]));
           break;
         case "Escape":
-          c && (e.preventDefault(), y());
+          c && (e.preventDefault(), p());
           break;
         case "Backspace":
-          o && oe === "" && a.length > 0 && (e.preventDefault(), ye(a[a.length - 1]));
+          o && ne === "" && s.length > 0 && (e.preventDefault(), pe(s[s.length - 1]));
           break;
         case "Tab":
-          y();
+          p();
           break;
       }
-  }, sr = (e) => {
+  }, ar = (e) => {
     var r;
-    p || e.target.closest("[data-chip], [data-combobox-clear]") || (e.target !== D.current && (e.preventDefault(), (r = D.current) == null || r.focus()), c || $());
-  }, De = o ? a.length > 0 : v != null && v !== "", ar = oe.length > 0, ir = He && !o && De && !p, cr = qe || c || De || ar, Ne = h >= 0 ? i[h] : void 0, ur = Ne != null ? A(Ne) : void 0, G = R(() => {
+    g || e.target.closest("[data-chip], [data-combobox-clear]") || (e.target !== w.current && (e.preventDefault(), (r = w.current) == null || r.focus()), c || C());
+  }, we = o ? s.length > 0 : v != null && v !== "", sr = ne.length > 0, ir = ze && !o && we && !g, cr = qe || c || we || sr, De = h >= 0 ? i[h] : void 0, ur = De != null ? N(De) : void 0, G = R(() => {
     if (!o) return [];
     if (k == null) {
-      const e = b.filter((n) => a.includes(n.value));
+      const e = b.filter((t) => s.includes(t.value));
       if (!E) return e;
-      const r = new Set(e.map((n) => n.value));
+      const r = new Set(e.map((t) => t.value));
       return [
         ...e,
-        ...a.filter((n) => !r.has(n)).map((n) => ({ value: n, label: n }))
+        ...s.filter((t) => !r.has(t)).map((t) => ({ value: t, label: t }))
       ];
     }
-    return a.map(j).filter((e) => e != null);
+    return s.map(U).filter((e) => e != null);
   }, [
     o,
     k,
     b,
-    a,
+    s,
     E,
-    j
-  ]), fr = l[`combobox--size-${Ir(P)}`], dr = o && G.length > 0, mr = [
-    l.combobox,
+    U
+  ]), fr = a[`combobox--size-${Tr(P)}`], dr = o && G.length > 0, mr = [
+    a.combobox,
     fr,
-    ue ? l["combobox--invalid"] : "",
-    N != null && cr ? l["combobox--label-floated"] : "",
-    q != null ? l["combobox--has-leading-icon"] : "",
-    dr ? l["combobox--has-chips"] : "",
-    c ? l["combobox--open"] : "",
-    p ? l["combobox--disabled"] : "",
-    Te
+    ue ? a["combobox--invalid"] : "",
+    D != null && cr ? a["combobox--label-floated"] : "",
+    q != null ? a["combobox--has-leading-icon"] : "",
+    dr ? a["combobox--has-chips"] : "",
+    c ? a["combobox--open"] : "",
+    g ? a["combobox--disabled"] : "",
+    Oe
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ M("div", { className: mr, ref: B, children: [
-    /* @__PURE__ */ M("div", { className: l.combobox__wrapper, ref: me, children: [
-      N != null && /* @__PURE__ */ s("label", { className: l.combobox__label, htmlFor: Y, children: N }),
+    /* @__PURE__ */ M("div", { className: a.combobox__wrapper, ref: me, children: [
+      D != null && /* @__PURE__ */ l("label", { className: a.combobox__label, htmlFor: Y, children: D }),
       /* @__PURE__ */ M(
         "div",
         {
-          className: l.combobox__inner,
-          onMouseDown: sr,
+          className: a.combobox__inner,
+          onMouseDown: ar,
           children: [
-            q != null && /* @__PURE__ */ s("span", { className: l["combobox__leading-icon"], "aria-hidden": !0, children: /* @__PURE__ */ s(kr.Provider, { value: { size: "16" }, children: q }) }),
-            /* @__PURE__ */ M("div", { className: l.combobox__value, children: [
-              o && G.length > 0 && /* @__PURE__ */ s(
-                yr,
+            q != null && /* @__PURE__ */ l("span", { className: a["combobox__leading-icon"], "aria-hidden": !0, children: /* @__PURE__ */ l(kr.Provider, { value: { size: "16" }, children: q }) }),
+            /* @__PURE__ */ M("div", { className: a.combobox__value, children: [
+              o && G.length > 0 && /* @__PURE__ */ l(
+                pr,
                 {
-                  "aria-label": ze ?? Cr(N),
-                  disabled: p,
-                  children: G.map((e) => /* @__PURE__ */ s(
-                    gr,
+                  "aria-label": He ?? zr(D),
+                  disabled: g,
+                  children: G.map((e) => /* @__PURE__ */ l(
+                    yr,
                     {
                       size: Lr[P],
                       leadingAvatar: e.leadingAvatar,
                       leadingIcon: e.leadingAvatar == null ? e.leadingVisual : void 0,
-                      onRemove: p ? void 0 : (r) => {
-                        r.stopPropagation(), ye(e.value);
+                      onRemove: g ? void 0 : (r) => {
+                        r.stopPropagation(), pe(e.value);
                       },
                       children: e.label
                     },
@@ -367,19 +379,19 @@ const so = vr(function({
                   ))
                 }
               ),
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ l(
                 "input",
                 {
                   ref: Qe,
                   id: Y,
-                  className: l.combobox__control,
+                  className: a.combobox__control,
                   type: "text",
                   role: "combobox",
                   autoComplete: "off",
                   spellCheck: !1,
-                  disabled: p,
+                  disabled: g,
                   placeholder: o && G.length > 0 ? void 0 : Ie,
-                  value: oe,
+                  value: ne,
                   "aria-label": de,
                   "aria-invalid": ue ? !0 : void 0,
                   "aria-expanded": c,
@@ -387,75 +399,75 @@ const so = vr(function({
                   "aria-autocomplete": "list",
                   "aria-activedescendant": ur,
                   "aria-busy": fe || void 0,
-                  onChange: nr,
+                  onChange: or,
                   onFocus: tr,
-                  onBlur: we,
+                  onBlur: Ae,
                   onKeyDown: lr
                 }
               )
             ] }),
-            ir && /* @__PURE__ */ s(
+            ir && /* @__PURE__ */ l(
               "button",
               {
-                ...g,
+                ...y,
                 type: "button",
-                className: Sr(
-                  l.combobox__clear,
-                  g == null ? void 0 : g.className
+                className: Ir(
+                  a.combobox__clear,
+                  y == null ? void 0 : y.className
                 ),
-                "aria-label": $e,
+                "aria-label": Ce,
                 "data-combobox-clear": "",
-                onClick: or,
+                onClick: nr,
                 onBlur: (e) => {
                   var r;
-                  (r = g == null ? void 0 : g.onBlur) == null || r.call(g, e), we(e);
+                  (r = y == null ? void 0 : y.onBlur) == null || r.call(y, e), Ae(e);
                 },
-                children: /* @__PURE__ */ s(se, { size: Fr[P], glyph: /* @__PURE__ */ s(_r, {}) })
+                children: /* @__PURE__ */ l(ae, { size: Fr[P], glyph: /* @__PURE__ */ l(_r, {}) })
               }
             ),
-            /* @__PURE__ */ s("span", { className: l["combobox__trailing-icon"], "aria-hidden": !0, children: /* @__PURE__ */ s(se, { size: "12", glyph: /* @__PURE__ */ s(xr, {}) }) })
+            /* @__PURE__ */ l("span", { className: a["combobox__trailing-icon"], "aria-hidden": !0, children: /* @__PURE__ */ l(ae, { size: "12", glyph: /* @__PURE__ */ l(xr, {}) }) })
           ]
         }
       )
     ] }),
-    pe && Je(
-      /* @__PURE__ */ s(
+    ge && Je(
+      /* @__PURE__ */ l(
         "div",
         {
-          ref: ge,
+          ref: ye,
           className: [
-            l.combobox__popup,
-            We === "above" ? l["combobox__popup--above"] : "",
-            Pe ? l["combobox__popup--visible"] : ""
+            a.combobox__popup,
+            We === "above" ? a["combobox__popup--above"] : "",
+            Pe ? a["combobox__popup--visible"] : ""
           ].filter(Boolean).join(" "),
           style: Be,
-          children: /* @__PURE__ */ s(wr, { className: l.combobox__menu, children: /* @__PURE__ */ M(Dr, { maxHeight: Ye, children: [
-            i.length > 0 && /* @__PURE__ */ s(
+          children: /* @__PURE__ */ l(Ar, { className: a.combobox__menu, children: /* @__PURE__ */ M(wr, { maxHeight: Ye, children: [
+            i.length > 0 && /* @__PURE__ */ l(
               "ul",
               {
                 id: I,
-                className: l.combobox__list,
+                className: a.combobox__list,
                 role: "listbox",
                 "aria-multiselectable": o || void 0,
-                "aria-label": typeof N == "string" ? N : de ?? Oe,
+                "aria-label": typeof D == "string" ? D : de ?? $e,
                 children: i.map((e, r) => {
-                  const n = r === h, _ = (br) => {
+                  const t = r === h, _ = (br) => {
                     br.preventDefault();
                   };
                   if (e.kind === "create")
-                    return /* @__PURE__ */ s(
+                    return /* @__PURE__ */ l(
                       "li",
                       {
-                        className: l.combobox__option,
+                        className: a.combobox__option,
                         role: "presentation",
-                        children: /* @__PURE__ */ s(
+                        children: /* @__PURE__ */ l(
                           Ve,
                           {
-                            id: A(e),
+                            id: N(e),
                             role: "option",
-                            label: Ce(e.inputValue),
-                            leadingVisual: /* @__PURE__ */ s(se, { glyph: /* @__PURE__ */ s(pr, {}) }),
-                            active: n,
+                            label: Fe(e.inputValue),
+                            leadingVisual: /* @__PURE__ */ l(ae, { glyph: /* @__PURE__ */ l(gr, {}) }),
+                            active: t,
                             "aria-selected": !1,
                             onMouseDown: _,
                             onMouseEnter: () => he(r),
@@ -463,29 +475,29 @@ const so = vr(function({
                           }
                         )
                       },
-                      A(e)
+                      N(e)
                     );
-                  const { option: f } = e, Q = er(f.value), Ae = Tr(f);
-                  return /* @__PURE__ */ s(
+                  const { option: f } = e, Q = er(f.value), Ne = jr(f);
+                  return /* @__PURE__ */ l(
                     "li",
                     {
-                      className: l.combobox__option,
+                      className: a.combobox__option,
                       role: "presentation",
-                      children: /* @__PURE__ */ s(
+                      children: /* @__PURE__ */ l(
                         Ve,
                         {
-                          ...Er(
+                          ...Sr(
                             Ee,
                             f.menuItemProps
                           ),
-                          id: A(e),
+                          id: N(e),
                           role: "option",
                           label: f.label,
                           secondaryLabel: f.secondaryLabel,
-                          leadingElement: Ae != null,
-                          leadingVisual: Ae,
+                          leadingElement: Ne != null,
+                          leadingVisual: Ne,
                           trailingElement: Q,
-                          active: n,
+                          active: t,
                           disabled: f.disabled,
                           "aria-selected": Q,
                           onMouseDown: _,
@@ -499,10 +511,10 @@ const so = vr(function({
                 })
               }
             ),
-            fe ? /* @__PURE__ */ M("div", { className: l.combobox__loading, role: "status", children: [
-              /* @__PURE__ */ s(Nr, { size: "16", "aria-hidden": !0 }),
-              /* @__PURE__ */ s("span", { children: Fe })
-            ] }) : i.length === 0 && /* @__PURE__ */ s("p", { className: l.combobox__empty, children: Le })
+            fe ? /* @__PURE__ */ M("div", { className: a.combobox__loading, role: "status", children: [
+              /* @__PURE__ */ l(Dr, { size: "16", "aria-hidden": !0 }),
+              /* @__PURE__ */ l("span", { children: Le })
+            ] }) : i.length === 0 && /* @__PURE__ */ l("p", { className: a.combobox__empty, children: Te })
           ] }) })
         }
       )
@@ -510,6 +522,6 @@ const so = vr(function({
   ] });
 });
 export {
-  so as default
+  cn as default
 };
 //# sourceMappingURL=Combobox.js.map