@mattermost/compass-ui 0.1.0-alpha.26 → 0.1.0-alpha.28

package/dist/components/combobox/Combobox.js

@@ -1,55 +1,57 @@
-import { jsxs as M, jsx as l } from "react/jsx-runtime";
-import { forwardRef as Mr, useId as Er, useRef as O, useCallback as d, useState as E, useMemo as I, useEffect as de } from "react";
-import __Ir from "@mattermost/compass-icons/components/chevron-down.js";const Ir=__Ir&&__Ir.default?__Ir.default:__Ir;
-import __Vr from "@mattermost/compass-icons/components/close-circle.js";const Vr=__Vr&&__Vr.default?__Vr.default:__Vr;
-import __Rr from "@mattermost/compass-icons/components/plus.js";const Rr=__Rr&&__Rr.default?__Rr.default:__Rr;
-import Sr from "../chip/Chip.js";
-import Tr from "../chip/ChipGroup.js";
-import me, { IconSlotContext as Lr } from "../icon/Icon.js";
-import Te from "../menu-item/MenuItem.js";
-import Cr, { PopoverMenuScroll as Fr } from "../popover-menu/PopoverMenu.js";
-import zr from "../spinner/Spinner.js";
-import Hr from "../team-avatar/TeamAvatar.js";
-import $r from "../user-avatar/UserAvatar.js";
-import { useAnchoredPopupPortal as Or } from "../../hooks/use-anchored-popup-portal.js";
-import { useOutsideClose as jr } from "../../hooks/use-outside-close.js";
-import { usePopoverTransition as Ur } from "../../hooks/use-popover-transition.js";
-import { mergeMenuItemProps as qr } from "../../utils/menuItemProps.js";
-import { mergeClassNames as Gr } from "../../utils/props.js";
-import { toKebab as Kr } from "../../utils/string.js";
-import o from "./Combobox.module.scss.js";
-const Le = 280, Qr = {
+import { jsxs as M, jsx as o } from "react/jsx-runtime";
+import { forwardRef as Sr, useId as Fr, useRef as O, useCallback as d, useState as I, useMemo as E, useEffect as me } from "react";
+import __Lr from "@mattermost/compass-icons/components/chevron-down.js";const Lr=__Lr&&__Lr.default?__Lr.default:__Lr;
+import __Tr from "@mattermost/compass-icons/components/close-circle.js";const Tr=__Tr&&__Tr.default?__Tr.default:__Tr;
+import __Cr from "@mattermost/compass-icons/components/plus.js";const Cr=__Cr&&__Cr.default?__Cr.default:__Cr;
+import $r from "../chip/Chip.js";
+import zr from "../chip/ChipGroup.js";
+import be, { IconSlotContext as Hr } from "../icon/Icon.js";
+import { mergeFieldDescribedBy as Or, hasFieldMessage as jr, isFieldInvalid as Ur } from "../field/fieldDescribedBy.js";
+import qr from "../field-message/FieldMessage.js";
+import $e from "../menu-item/MenuItem.js";
+import Gr, { PopoverMenuScroll as Kr } from "../popover-menu/PopoverMenu.js";
+import Qr from "../spinner/Spinner.js";
+import Xr from "../team-avatar/TeamAvatar.js";
+import Zr from "../user-avatar/UserAvatar.js";
+import { useAnchoredPopupPortal as Wr } from "../../hooks/use-anchored-popup-portal.js";
+import { useOutsideClose as Yr } from "../../hooks/use-outside-close.js";
+import { usePopoverTransition as Jr } from "../../hooks/use-popover-transition.js";
+import { mergeMenuItemProps as Pr } from "../../utils/menuItemProps.js";
+import { mergeClassNames as Br } from "../../utils/props.js";
+import { toKebab as en } from "../../utils/string.js";
+import l from "./Combobox.module.scss.js";
+const ze = 280, rn = {
   small: "small",
   medium: "medium",
   large: "large"
-}, Xr = {
+}, nn = {
   small: "12",
   medium: "16",
   large: "16"
 };
-function Zr(n) {
+function tn(n) {
   return typeof n == "string" ? `${n} selections` : "Selected";
 }
-function Wr(n) {
+function an(n) {
   return `Create "${n}"`;
 }
-function W(n) {
+function Y(n) {
   return n.kind === "option" && n.option.disabled === !0;
 }
-function Yr(n, v) {
+function on(n, v) {
   return v ? n.label.toLowerCase().includes(v.toLowerCase()) : !0;
 }
-function Jr(n) {
+function ln(n) {
   return n == null ? null : Array.isArray(n) ? n[0] ?? null : n === "" ? null : n;
 }
-function Pr(n) {
+function sn(n) {
   return n == null ? [] : Array.isArray(n) ? n : n === "" ? [] : [n];
 }
-function Br(n) {
+function cn(n) {
   if (n.leadingVisual != null) return n.leadingVisual;
   if (n.leadingAvatar != null)
-    return /* @__PURE__ */ l(
-      $r,
+    return /* @__PURE__ */ o(
+      Zr,
       {
         src: n.leadingAvatar.src,
         alt: n.leadingAvatar.alt,
@@ -57,8 +59,8 @@ function Br(n) {
       }
     );
   if (n.leadingTeamAvatar != null)
-    return /* @__PURE__ */ l(
-      Hr,
+    return /* @__PURE__ */ o(
+      Xr,
       {
         src: n.leadingTeamAvatar.src,
         initials: n.leadingTeamAvatar.initials ?? (n.leadingTeamAvatar.src ? void 0 : Array.from(n.label).slice(0, 2).join("")),
@@ -68,119 +70,121 @@ function Br(n) {
       }
     );
 }
-const pn = Mr(function({
+const Sn = Sr(function({
   options: v,
-  menuItemProps: Ce,
+  menuItemProps: He,
   multiple: t = !1,
-  value: be,
-  defaultValue: ve,
+  value: ve,
+  defaultValue: he,
   onChange: j,
-  inputValue: Y,
-  defaultInputValue: Fe = "",
+  inputValue: J,
+  defaultInputValue: Oe = "",
   onInputChange: u,
-  label: N,
-  placeholder: ze,
-  leadingIcon: J,
-  size: P = "medium",
-  invalid: he = !1,
+  label: D,
+  placeholder: je,
+  leadingIcon: P,
+  size: B = "medium",
+  invalid: Ue = !1,
+  message: ee,
+  messageTone: xe,
   disabled: _ = !1,
   filter: U = !0,
-  emptyMessage: He = "No results",
-  loading: xe = !1,
-  loadingMessage: $e = "Loading…",
+  emptyMessage: qe = "No results",
+  loading: ge = !1,
+  loadingMessage: Ge = "Loading…",
   selectedOptions: A,
   creatable: V = !1,
-  onCreateOption: B,
-  formatCreateLabel: Oe = Wr,
-  clearable: je = !1,
-  openOnFocus: Ue = !1,
-  submitOnEnter: qe = !0,
-  clearLabel: Ge = "Clear",
+  onCreateOption: re,
+  formatCreateLabel: Ke = an,
+  clearable: Qe = !1,
+  openOnFocus: Xe = !1,
+  submitOnEnter: Ze = !0,
+  clearLabel: We = "Clear",
   clearButtonProps: m,
-  selectionsLabel: Ke,
-  listboxLabel: Qe = "Options",
-  className: Xe = "",
-  id: Ze,
-  "aria-label": ge,
-  "aria-describedby": We,
-  required: Ye = !1,
-  onFocus: ee,
-  onBlur: re,
-  onKeyDown: ne,
-  portalContainer: Je = null,
-  zIndex: Pe,
-  ...Be
+  selectionsLabel: Ye,
+  listboxLabel: Je = "Options",
+  className: Pe = "",
+  id: Be,
+  "aria-label": _e,
+  "aria-describedby": er,
+  required: rr = !1,
+  onFocus: ne,
+  onBlur: te,
+  onKeyDown: ae,
+  portalContainer: nr = null,
+  zIndex: tr,
+  ...ar
 }, R) {
-  const er = Er(), te = Ze ?? er, S = `${te}-listbox`, ae = O(null), _e = O(null), D = O(null), rr = d(
+  const or = Fr(), q = Be ?? or, S = `${q}-listbox`, oe = O(null), ye = O(null), w = O(null), lr = d(
     (e) => {
-      D.current = e, typeof R == "function" ? R(e) : R && (R.current = e);
+      w.current = e, typeof R == "function" ? R(e) : R && (R.current = e);
     },
     [R]
-  ), le = be !== void 0, [nr, tr] = E(() => ve !== void 0 ? ve : t ? [] : null), oe = le ? be : nr, h = t ? null : Jr(oe), i = I(
-    () => t ? Pr(oe) : [],
-    [t, oe]
-  ), b = Y !== void 0, [ie, T] = E(Fe), [c, ye] = E(!1), [ar, pe] = E(!1), [x, y] = E(-1), q = O(!1), L = O(null), ke = d(
+  ), le = ve !== void 0, [ir, sr] = I(() => he !== void 0 ? he : t ? [] : null), ie = le ? ve : ir, h = t ? null : ln(ie), i = E(
+    () => t ? sn(ie) : [],
+    [t, ie]
+  ), b = J !== void 0, [se, F] = I(Oe), [c, pe] = I(!1), [cr, ke] = I(!1), [x, y] = I(-1), G = O(!1), L = O(null), Ae = d(
     (e) => {
-      e !== x && (q.current = !0, y(e));
+      e !== x && (G.current = !0, y(e));
     },
     [x]
-  ), [G, C] = E(null), K = d(
+  ), [K, T] = I(null), Q = d(
     (e) => v.find((r) => r.value === e) ?? (A == null ? void 0 : A.find((r) => r.value === e)) ?? (V ? { value: e, label: e } : void 0),
     [v, A, V]
-  ), Q = I(
-    () => h == null ? void 0 : K(h),
-    [K, h]
-  ), se = b ? Y : t ? ie : G !== null ? G : (Q == null ? void 0 : Q.label) ?? ie, ce = b ? Y : t ? ie : G !== null ? G : "", F = d(
+  ), X = E(
+    () => h == null ? void 0 : Q(h),
+    [Q, h]
+  ), ce = b ? J : t ? se : K !== null ? K : (X == null ? void 0 : X.label) ?? se, ue = b ? J : t ? se : K !== null ? K : "", C = d(
     (e) => {
-      b || (T(e), t || C(e)), u == null || u(e);
+      b || (F(e), t || T(e)), u == null || u(e);
     },
     [b, t, u]
   ), g = d(
     (e) => {
-      le || tr(e), j == null || j(e);
+      le || sr(e), j == null || j(e);
     },
     [le, j]
-  ), Ae = I(() => {
+  ), we = E(() => {
     if (U === !1) return v;
-    const e = typeof U == "function" ? U : Yr;
-    return v.filter((r) => e(r, ce));
-  }, [v, U, ce]), z = V ? ce.trim() : "", De = I(() => {
-    if (z === "") return !1;
-    const e = z.toLowerCase(), r = (k) => k.toLowerCase() === e;
+    const e = typeof U == "function" ? U : on;
+    return v.filter((r) => e(r, ue));
+  }, [v, U, ue]), $ = V ? ue.trim() : "", De = E(() => {
+    if ($ === "") return !1;
+    const e = $.toLowerCase(), r = (k) => k.toLowerCase() === e;
     return [...v, ...A ?? []].some((k) => r(k.label) || r(k.value)) ? !1 : !(t ? i : h != null ? [h] : []).some(r);
   }, [
-    z,
+    $,
     v,
     A,
     t,
     i,
     h
-  ]), s = I(
+  ]), s = E(
     () => [
-      ...Ae.map((e) => ({ kind: "option", option: e })),
-      ...De ? [{ kind: "create", inputValue: z }] : []
+      ...we.map((e) => ({ kind: "option", option: e })),
+      ...De ? [{ kind: "create", inputValue: $ }] : []
     ],
-    [Ae, De, z]
-  ), w = d(
+    [we, De, $]
+  ), N = d(
     (e) => e.kind === "option" ? `${S}-option-${e.option.value}` : `${S}-create`,
     [S]
-  ), { mounted: Ne, visible: lr } = Ur(c), {
-    placement: or,
-    maxHeight: ir,
-    style: sr,
-    portalRef: we,
-    renderPortal: cr
-  } = Or(_e, Ne, {
-    preferredHeight: Le,
-    maxHeightCap: Le,
-    portalContainer: Je,
-    zIndex: Pe
+  ), { mounted: Ne, visible: ur } = Jr(c), {
+    placement: fr,
+    maxHeight: dr,
+    style: mr,
+    portalRef: Me,
+    renderPortal: br
+  } = Wr(ye, Ne, {
+    preferredHeight: ze,
+    maxHeightCap: ze,
+    portalContainer: nr,
+    zIndex: tr
   }), p = d(() => {
-    ye(!1), y(-1), !t && !b && (C(null), T(""));
-  }, [t, b]), H = d(() => {
-    _ || ye(!0);
+    pe(!1), y(-1), !t && !b && (T(null), F(""));
+  }, [t, b]), z = d(() => {
+    _ || pe(!0);
   }, [_]);
-  jr(ae, c, p, we), de(() => {
+  Yr(oe, c, p, Me), me(() => {
     c && y((e) => {
       if (s.length === 0) return -1;
       if (e >= 0 && e < s.length) return e;
@@ -190,127 +194,127 @@ const pn = Mr(function({
       return r >= 0 ? r : 0;
     });
   }, [c, s, t, i, h]);
-  const ur = d(
+  const vr = d(
     (e) => t ? i.includes(e) : h === e,
     [t, i, h]
-  ), ue = d(
+  ), fe = d(
     (e) => {
       var r;
       if (!e.disabled) {
         if (t) {
           const a = i.includes(e.value) ? i.filter((f) => f !== e.value) : [...i, e.value];
-          g(a), F(""), p(), (r = D.current) == null || r.focus();
+          g(a), C(""), p(), (r = w.current) == null || r.focus();
           return;
         }
-        g(e.value), b ? u == null || u(e.label) : (T(""), C(null)), p();
+        g(e.value), b ? u == null || u(e.label) : (F(""), T(null)), p();
       }
     },
     [
       t,
       i,
       g,
-      F,
+      C,
       b,
       u,
       p
     ]
-  ), fe = d(
+  ), de = d(
     (e) => {
       var r;
-      if (B ? B(e) : g(t ? [...i, e] : e), t) {
-        F(""), p(), (r = D.current) == null || r.focus();
+      if (re ? re(e) : g(t ? [...i, e] : e), t) {
+        C(""), p(), (r = w.current) == null || r.focus();
         return;
       }
-      b ? u == null || u(e) : (T(""), C(null)), p();
+      b ? u == null || u(e) : (F(""), T(null)), p();
     },
     [
-      B,
+      re,
       t,
       i,
       g,
-      F,
+      C,
       b,
       u,
       p
     ]
-  ), fr = d(
+  ), hr = d(
     (e) => {
-      e.kind === "create" ? fe(e.inputValue) : ue(e.option);
+      e.kind === "create" ? de(e.inputValue) : fe(e.option);
     },
-    [fe, ue]
-  ), Me = d(() => {
+    [de, fe]
+  ), Ie = d(() => {
     var e;
-    g(null), b ? u == null || u("") : (T(""), C(null)), (e = D.current) == null || e.focus();
+    g(null), b ? u == null || u("") : (F(""), T(null)), (e = w.current) == null || e.focus();
   }, [g, b, u]), Ee = d(
     (e) => {
       t && g(i.filter((r) => r !== e));
     },
     [t, i, g]
-  ), Ie = d(
+  ), Ve = d(
     (e) => {
-      q.current = !1;
-      const r = s.map((a, f) => ({ row: a, i: f })).filter(({ row: a }) => !W(a));
+      G.current = !1;
+      const r = s.map((a, f) => ({ row: a, i: f })).filter(({ row: a }) => !Y(a));
       if (r.length === 0) {
         y(-1);
         return;
       }
       y((a) => {
-        const f = r.findIndex(({ i: Z }) => Z === a), k = f < 0 ? e > 0 ? 0 : r.length - 1 : (f + e + r.length) % r.length;
+        const f = r.findIndex(({ i: W }) => W === a), k = f < 0 ? e > 0 ? 0 : r.length - 1 : (f + e + r.length) % r.length;
         return r[k].i;
       });
     },
     [s]
   );
-  de(() => {
+  me(() => {
     var r, a;
     if (!c || x < 0) return;
-    if (q.current) {
-      q.current = !1;
+    if (G.current) {
+      G.current = !1;
       return;
     }
     const e = s[x];
-    e && ((a = (r = document.getElementById(w(e))) == null ? void 0 : r.scrollIntoView) == null || a.call(r, { block: "nearest" }));
-  }, [c, x, s, w]);
-  const dr = (e) => {
-    $();
+    e && ((a = (r = document.getElementById(N(e))) == null ? void 0 : r.scrollIntoView) == null || a.call(r, { block: "nearest" }));
+  }, [c, x, s, N]);
+  const xr = (e) => {
+    H();
     const r = e.target.value;
-    F(r), c || H(), y(0);
-  }, $ = () => {
+    C(r), c || z(), y(0);
+  }, H = () => {
     L.current !== null && (cancelAnimationFrame(L.current), L.current = null);
   };
-  de(() => $, []);
-  const mr = () => {
-    pe(!0), Ue && H(), !t && !b && Q && ($(), L.current = requestAnimationFrame(() => {
+  me(() => H, []);
+  const gr = () => {
+    ke(!0), Xe && z(), !t && !b && X && (H(), L.current = requestAnimationFrame(() => {
       var e;
-      L.current = null, (e = D.current) == null || e.select();
+      L.current = null, (e = w.current) == null || e.select();
     }));
-  }, Ve = (e) => {
+  }, Re = (e) => {
     var a;
     const r = e.relatedTarget;
-    r && ((a = ae.current) != null && a.contains(r)) || ($(), pe(!1));
-  }, br = (e) => {
+    r && ((a = oe.current) != null && a.contains(r)) || (H(), ke(!1));
+  }, _r = (e) => {
     if (!_)
-      switch ($(), e.key) {
+      switch (H(), e.key) {
         case "ArrowDown":
-          e.preventDefault(), c ? Ie(1) : H();
+          e.preventDefault(), c ? Ve(1) : z();
           break;
         case "ArrowUp":
           if (e.preventDefault(), c)
-            Ie(-1);
+            Ve(-1);
           else {
             for (let r = s.length - 1; r >= 0; r--)
-              if (!W(s[r])) {
+              if (!Y(s[r])) {
                 y(r);
                 break;
               }
-            H();
+            z();
           }
           break;
         case "Home":
           c && s.length > 0 && (e.preventDefault(), y(
             Math.max(
               0,
-              s.findIndex((r) => !W(r))
+              s.findIndex((r) => !Y(r))
             )
           ));
           break;
@@ -318,7 +322,7 @@ const pn = Mr(function({
           if (c && s.length > 0) {
             e.preventDefault();
             for (let r = s.length - 1; r >= 0; r--)
-              if (!W(s[r])) {
+              if (!Y(s[r])) {
                 y(r);
                 break;
               }
@@ -326,32 +330,32 @@ const pn = Mr(function({
           break;
         case "Enter":
           if (e.nativeEvent.isComposing || e.keyCode === 229) break;
-          (c || !qe) && (e.preventDefault(), e.stopPropagation()), c && x >= 0 && s[x] && fr(s[x]);
+          (c || !Ze) && (e.preventDefault(), e.stopPropagation()), c && x >= 0 && s[x] && hr(s[x]);
           break;
         case "Escape":
           c && (e.preventDefault(), e.stopPropagation(), p());
           break;
         case "Backspace":
-          t && se === "" && i.length > 0 && (e.preventDefault(), Ee(i[i.length - 1]));
+          t && ce === "" && i.length > 0 && (e.preventDefault(), Ee(i[i.length - 1]));
           break;
         case "Tab":
           p();
           break;
       }
-  }, vr = (e) => {
-    mr(), ee == null || ee(e);
-  }, hr = (e) => {
-    Ve(e), re == null || re(e);
-  }, xr = (e) => {
-    br(e), ne == null || ne(e);
-  }, gr = (e) => {
+  }, yr = (e) => {
+    gr(), ne == null || ne(e);
+  }, pr = (e) => {
+    Re(e), te == null || te(e);
+  }, kr = (e) => {
+    _r(e), ae == null || ae(e);
+  }, Ar = (e) => {
     var r;
-    _ || e.target.closest("[data-chip], [data-combobox-clear]") || (e.target !== D.current && (e.preventDefault(), (r = D.current) == null || r.focus()), c || H());
-  }, _r = (e) => {
+    _ || e.target.closest("[data-chip], [data-combobox-clear]") || (e.target !== w.current && (e.preventDefault(), (r = w.current) == null || r.focus()), c || z());
+  }, wr = (e) => {
     e.target.closest(
       'input, textarea, select, [contenteditable="true"]'
     ) || e.preventDefault();
-  }, Re = t ? i.length > 0 : h != null && h !== "", yr = se.length > 0, pr = je && !t && Re && !_, kr = ar || c || Re || yr, Se = x >= 0 ? s[x] : void 0, Ar = Se != null ? w(Se) : void 0, X = I(() => {
+  }, Se = t ? i.length > 0 : h != null && h !== "", Dr = ce.length > 0, Nr = Qe && !t && Se && !_, Mr = cr || c || Se || Dr, Fe = x >= 0 ? s[x] : void 0, Ir = Fe != null ? N(Fe) : void 0, Z = E(() => {
     if (!t) return [];
     if (A == null) {
       const e = v.filter((a) => i.includes(a.value));
@@ -362,45 +366,45 @@ const pn = Mr(function({
         ...i.filter((a) => !r.has(a)).map((a) => ({ value: a, label: a }))
       ];
     }
-    return i.map(K).filter((e) => e != null);
+    return i.map(Q).filter((e) => e != null);
   }, [
     t,
     A,
     v,
     i,
     V,
-    K
-  ]), Dr = o[`combobox--size-${Kr(P)}`], Nr = t && X.length > 0, wr = [
-    o.combobox,
-    Dr,
-    he ? o["combobox--invalid"] : "",
-    N != null && kr ? o["combobox--label-floated"] : "",
-    J != null ? o["combobox--has-leading-icon"] : "",
-    Nr ? o["combobox--has-chips"] : "",
-    c ? o["combobox--open"] : "",
-    _ ? o["combobox--disabled"] : "",
-    Xe
+    Q
+  ]), Er = l[`combobox--size-${en(B)}`], Vr = t && Z.length > 0, Le = Ur(Ue, ee, xe), Te = jr(ee), Ce = Te ? `${q}-message` : void 0, Rr = [
+    l.combobox,
+    Er,
+    Le ? l["combobox--invalid"] : "",
+    D != null && Mr ? l["combobox--label-floated"] : "",
+    P != null ? l["combobox--has-leading-icon"] : "",
+    Vr ? l["combobox--has-chips"] : "",
+    c ? l["combobox--open"] : "",
+    _ ? l["combobox--disabled"] : "",
+    Pe
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ M("div", { className: wr, ref: ae, children: [
-    /* @__PURE__ */ M("div", { className: o.combobox__wrapper, ref: _e, children: [
-      N != null && /* @__PURE__ */ l("label", { className: o.combobox__label, htmlFor: te, children: N }),
+  return /* @__PURE__ */ M("div", { className: Rr, ref: oe, children: [
+    /* @__PURE__ */ M("div", { className: l.combobox__wrapper, ref: ye, children: [
+      D != null && /* @__PURE__ */ o("label", { className: l.combobox__label, htmlFor: q, children: D }),
       /* @__PURE__ */ M(
         "div",
         {
-          className: o.combobox__inner,
-          onMouseDown: gr,
+          className: l.combobox__inner,
+          onMouseDown: Ar,
           children: [
-            J != null && /* @__PURE__ */ l("span", { className: o["combobox__leading-icon"], "aria-hidden": !0, children: /* @__PURE__ */ l(Lr.Provider, { value: { size: "16" }, children: J }) }),
-            /* @__PURE__ */ M("div", { className: o.combobox__value, children: [
-              t && X.length > 0 && /* @__PURE__ */ l(
-                Tr,
+            P != null && /* @__PURE__ */ o("span", { className: l["combobox__leading-icon"], "aria-hidden": !0, children: /* @__PURE__ */ o(Hr.Provider, { value: { size: "16" }, children: P }) }),
+            /* @__PURE__ */ M("div", { className: l.combobox__value, children: [
+              t && Z.length > 0 && /* @__PURE__ */ o(
+                zr,
                 {
-                  "aria-label": Ke ?? Zr(N),
+                  "aria-label": Ye ?? tn(D),
                   disabled: _,
-                  children: X.map((e) => /* @__PURE__ */ l(
-                    Sr,
+                  children: Z.map((e) => /* @__PURE__ */ o(
+                    $r,
                     {
-                      size: Qr[P],
+                      size: rn[B],
                       leadingAvatar: e.leadingAvatar,
                       leadingIcon: e.leadingAvatar == null ? e.leadingVisual : void 0,
                       onRemove: _ ? void 0 : (r) => {
@@ -412,135 +416,148 @@ const pn = Mr(function({
                   ))
                 }
               ),
-              /* @__PURE__ */ l(
+              /* @__PURE__ */ o(
                 "input",
                 {
-                  ...Be,
-                  ref: rr,
-                  id: te,
-                  className: o.combobox__control,
+                  ...ar,
+                  ref: lr,
+                  id: q,
+                  className: l.combobox__control,
                   type: "text",
                   role: "combobox",
                   autoComplete: "off",
                   spellCheck: !1,
                   disabled: _,
-                  placeholder: t && X.length > 0 ? void 0 : ze,
-                  value: se,
-                  "aria-label": ge,
-                  "aria-describedby": We || void 0,
-                  "aria-required": Ye ? !0 : void 0,
-                  "aria-invalid": he ? !0 : void 0,
+                  placeholder: t && Z.length > 0 ? void 0 : je,
+                  value: ce,
+                  "aria-label": _e,
+                  "aria-describedby": Or(
+                    er,
+                    Ce,
+                    void 0
+                  ),
+                  "aria-required": rr ? !0 : void 0,
+                  "aria-invalid": Le ? !0 : void 0,
                   "aria-expanded": c,
                   "aria-controls": S,
                   "aria-autocomplete": "list",
-                  "aria-activedescendant": Ar,
-                  "aria-busy": xe || void 0,
-                  onChange: dr,
-                  onFocus: vr,
-                  onBlur: hr,
-                  onKeyDown: xr
+                  "aria-activedescendant": Ir,
+                  "aria-busy": ge || void 0,
+                  onChange: xr,
+                  onFocus: yr,
+                  onBlur: pr,
+                  onKeyDown: kr
                 }
               )
             ] }),
-            pr && /* @__PURE__ */ l(
+            Nr && /* @__PURE__ */ o(
               "button",
               {
                 ...m,
                 type: "button",
-                className: Gr(
-                  o.combobox__clear,
+                className: Br(
+                  l.combobox__clear,
                   m == null ? void 0 : m.className
                 ),
-                "aria-label": Ge,
+                "aria-label": We,
                 "data-combobox-clear": "",
-                onClick: Me,
+                onClick: Ie,
                 onKeyDown: (e) => {
                   var r;
-                  e.key === "Enter" && (e.preventDefault(), e.stopPropagation(), Me()), (r = m == null ? void 0 : m.onKeyDown) == null || r.call(m, e);
+                  e.key === "Enter" && (e.preventDefault(), e.stopPropagation(), Ie()), (r = m == null ? void 0 : m.onKeyDown) == null || r.call(m, e);
                 },
                 onBlur: (e) => {
                   var r;
-                  (r = m == null ? void 0 : m.onBlur) == null || r.call(m, e), Ve(e);
+                  (r = m == null ? void 0 : m.onBlur) == null || r.call(m, e), Re(e);
                 },
-                children: /* @__PURE__ */ l(me, { size: Xr[P], glyph: /* @__PURE__ */ l(Vr, {}) })
+                children: /* @__PURE__ */ o(be, { size: nn[B], glyph: /* @__PURE__ */ o(Tr, {}) })
               }
             ),
-            /* @__PURE__ */ l("span", { className: o["combobox__trailing-icon"], "aria-hidden": !0, children: /* @__PURE__ */ l(me, { size: "12", glyph: /* @__PURE__ */ l(Ir, {}) }) })
+            /* @__PURE__ */ o("span", { className: l["combobox__trailing-icon"], "aria-hidden": !0, children: /* @__PURE__ */ o(be, { size: "12", glyph: /* @__PURE__ */ o(Lr, {}) }) })
           ]
         }
       )
     ] }),
-    Ne && cr(
+    Te && /* @__PURE__ */ o(
+      qr,
+      {
+        id: Ce,
+        className: l.combobox__message,
+        message: ee,
+        tone: xe ?? "error"
+      }
+    ),
+    Ne && br(
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- keeps focus on the input for presses anywhere in the menu
-      /* @__PURE__ */ l(
+      /* @__PURE__ */ o(
         "div",
         {
-          ref: we,
+          ref: Me,
           className: [
-            o.combobox__popup,
-            or === "above" ? o["combobox__popup--above"] : "",
-            lr ? o["combobox__popup--visible"] : ""
+            l.combobox__popup,
+            fr === "above" ? l["combobox__popup--above"] : "",
+            ur ? l["combobox__popup--visible"] : ""
           ].filter(Boolean).join(" "),
-          style: sr,
-          onMouseDown: _r,
-          children: /* @__PURE__ */ l(Cr, { className: o.combobox__menu, children: /* @__PURE__ */ M(Fr, { maxHeight: ir, children: [
-            s.length > 0 && /* @__PURE__ */ l(
+          style: mr,
+          onMouseDown: wr,
+          children: /* @__PURE__ */ o(Gr, { className: l.combobox__menu, children: /* @__PURE__ */ M(Kr, { maxHeight: dr, children: [
+            s.length > 0 && /* @__PURE__ */ o(
               "ul",
               {
                 id: S,
-                className: o.combobox__list,
+                className: l.combobox__list,
                 role: "listbox",
                 "aria-multiselectable": t || void 0,
-                "aria-label": typeof N == "string" ? N : ge ?? Qe,
+                "aria-label": typeof D == "string" ? D : _e ?? Je,
                 children: s.map((e, r) => {
                   const a = r === x;
                   if (e.kind === "create")
-                    return /* @__PURE__ */ l(
+                    return /* @__PURE__ */ o(
                       "li",
                       {
-                        className: o.combobox__option,
+                        className: l.combobox__option,
                         role: "presentation",
-                        children: /* @__PURE__ */ l(
-                          Te,
+                        children: /* @__PURE__ */ o(
+                          $e,
                           {
-                            id: w(e),
+                            id: N(e),
                             role: "option",
-                            label: Oe(e.inputValue),
-                            leadingVisual: /* @__PURE__ */ l(me, { glyph: /* @__PURE__ */ l(Rr, {}) }),
+                            label: Ke(e.inputValue),
+                            leadingVisual: /* @__PURE__ */ o(be, { glyph: /* @__PURE__ */ o(Cr, {}) }),
                             active: a,
                             "aria-selected": !1,
-                            onMouseEnter: () => ke(r),
-                            onClick: () => fe(e.inputValue)
+                            onMouseEnter: () => Ae(r),
+                            onClick: () => de(e.inputValue)
                           }
                         )
                       },
-                      w(e)
+                      N(e)
                     );
-                  const { option: f } = e, k = ur(f.value), Z = Br(f);
-                  return /* @__PURE__ */ l(
+                  const { option: f } = e, k = vr(f.value), W = cn(f);
+                  return /* @__PURE__ */ o(
                     "li",
                     {
-                      className: o.combobox__option,
+                      className: l.combobox__option,
                       role: "presentation",
-                      children: /* @__PURE__ */ l(
-                        Te,
+                      children: /* @__PURE__ */ o(
+                        $e,
                         {
-                          ...qr(
-                            Ce,
+                          ...Pr(
+                            He,
                             f.menuItemProps
                           ),
-                          id: w(e),
+                          id: N(e),
                           role: "option",
                           label: f.label,
                           secondaryLabel: f.secondaryLabel,
-                          leadingElement: Z != null,
-                          leadingVisual: Z,
+                          leadingElement: W != null,
+                          leadingVisual: W,
                           trailingElement: k,
                           active: a,
                           disabled: f.disabled,
                           "aria-selected": k,
-                          onMouseEnter: () => ke(r),
-                          onClick: () => ue(f)
+                          onMouseEnter: () => Ae(r),
+                          onClick: () => fe(f)
                         }
                       )
                     },
@@ -549,10 +566,10 @@ const pn = Mr(function({
                 })
               }
             ),
-            xe ? /* @__PURE__ */ M("div", { className: o.combobox__loading, role: "status", children: [
-              /* @__PURE__ */ l(zr, { size: "16", "aria-hidden": !0 }),
-              /* @__PURE__ */ l("span", { children: $e })
-            ] }) : s.length === 0 && /* @__PURE__ */ l("p", { className: o.combobox__empty, children: He })
+            ge ? /* @__PURE__ */ M("div", { className: l.combobox__loading, role: "status", children: [
+              /* @__PURE__ */ o(Qr, { size: "16", "aria-hidden": !0 }),
+              /* @__PURE__ */ o("span", { children: Ge })
+            ] }) : s.length === 0 && /* @__PURE__ */ o("p", { className: l.combobox__empty, children: qe })
           ] }) })
         }
       )
@@ -560,6 +577,6 @@ const pn = Mr(function({
   ] });
 });
 export {
-  pn as default
+  Sn as default
 };
 //# sourceMappingURL=Combobox.js.map