@reapit/elements 5.0.0-beta.63 → 5.0.0-beta.64

package/dist/js/{combobox-BIr0IlJH.js → combobox-CZZ5mxom.js}

@@ -1,41 +1,42 @@
-import { jsx as a, jsxs as C } from "react/jsx-runtime";
+import { jsx as a, jsxs as x } from "react/jsx-runtime";
 import "./button-base-BcnVjgNa.js";
-import { createContext as D, useContext as v, useRef as mo, useEffect as F, useState as V, useId as S } from "react";
-import { B as H } from "./button-DB4XETG9.js";
-import { c as Co, i as xo, d as x, k as U, s as fo } from "./listbox-BBRIGXRu.js";
-import { CloseIcon as Y } from "./icons/close.js";
-import { ChevronDownIcon as ho } from "./icons/chevron-down.js";
-import { c as go, S as Eo } from "./search-input-BIATSynI.js";
-import { A as Io } from "./anchor-positioning-CVXI9jJO.js";
-import { c as G } from "./index-BsMVp4qF.js";
-import { s as r } from "./index-YtxCR-9e.js";
-import { isWidthAtOrAbove as Oo, isWidthBelow as Ao } from "./utils/breakpoints.js";
-import { u as X } from "./use-match-media-3UiitAUD.js";
-import { CheckIcon as So } from "./icons/check.js";
-import { C as J } from "./chip-group-Bbc7ODc9.js";
-function yo({
+import { createContext as v, useContext as w, useRef as xo, useEffect as j, useState as H, useId as S } from "react";
+import { B as $ } from "./button-DB4XETG9.js";
+import { c as fo, i as ho, d as f, k as Y, s as go } from "./listbox-BBRIGXRu.js";
+import { CloseIcon as G } from "./icons/close.js";
+import { ChevronDownIcon as Eo } from "./icons/chevron-down.js";
+import { c as Io, S as Oo } from "./search-input-BIATSynI.js";
+import { A as Ao } from "./anchor-positioning-CVXI9jJO.js";
+import { c as X } from "./index-BsMVp4qF.js";
+import { s as l } from "./index-YtxCR-9e.js";
+import { isWidthAtOrAbove as So, isWidthBelow as yo } from "./utils/breakpoints.js";
+import { r as Lo, v as Po } from "./drawer-CN1TJt10.js";
+import { u as J } from "./use-match-media-3UiitAUD.js";
+import { CheckIcon as Bo } from "./icons/check.js";
+import { C as K } from "./chip-group-Bbc7ODc9.js";
+function Do({
   "aria-label": o = "Clear selection",
   "aria-controls": e,
   onClick: t,
   ...n
 }) {
   return /* @__PURE__ */ a(
-    H,
+    $,
     {
       ...n,
       "aria-controls": e,
       "aria-label": o,
       hasNoPadding: !0,
-      iconLeft: /* @__PURE__ */ a(Y, {}),
-      onClick: (c) => {
-        t?.(c), Co(e);
+      iconLeft: /* @__PURE__ */ a(G, {}),
+      onClick: (r) => {
+        t?.(r), fo(e);
       },
       size: "small",
       variant: "tertiary"
     }
   );
 }
-function N(o) {
+function V(o) {
   const e = typeof o == "string" ? document.getElementById(o) : o;
   if (!e) {
     const t = typeof o == "string" ? `with ID "${o}"` : "(passed by reference)";
@@ -47,53 +48,53 @@ function N(o) {
   }
   e.close();
 }
-const M = {
+const N = {
   AUTO: "auto",
   ALWAYS: "always",
   NEVER: "never"
 };
-function Lo(o) {
+function vo(o) {
   if (o.defaultPrevented || !o.isTrusted)
     return;
-  const e = Bo(o.target);
+  const e = ko(o.target);
   if (!e)
     return;
   const { closeOnSelection: t } = o.currentTarget.dataset;
-  if (t !== M.NEVER) {
-    if (t === M.ALWAYS) {
-      N(o.currentTarget);
+  if (t !== N.NEVER) {
+    if (t === N.ALWAYS) {
+      V(o.currentTarget);
       return;
     }
-    if (t === M.AUTO) {
+    if (t === N.AUTO) {
       const { listboxId: n } = e.dataset, s = n ? document.getElementById(n) : null;
-      Do(s) && N(o.currentTarget);
+      To(s) && V(o.currentTarget);
     }
   }
 }
-function Po(o) {
+function wo(o) {
   !("closedBy" in HTMLDialogElement.prototype) && o.target === o.currentTarget && o.currentTarget.close();
 }
-function Bo(o) {
+function ko(o) {
   return o instanceof HTMLElement ? o.closest('[role="option"]') : null;
 }
-function Do(o) {
+function To(o) {
   return "ariaMultiSelectable" in Element.prototype ? o?.ariaMultiSelectable === "false" : o?.getAttribute("aria-multiselectable") === "false";
 }
-function vo(o) {
+function Mo(o) {
   const { preserveSearchOnClose: e } = o.currentTarget.dataset;
   if (e === "true")
     return;
   const t = o.currentTarget.querySelector("input");
-  t instanceof HTMLInputElement && go(t);
+  t instanceof HTMLInputElement && Io(t);
 }
-const $ = D(null);
-function K() {
-  const o = v($);
+const z = v(null);
+function Q() {
+  const o = w(z);
   if (!o)
     throw new Error("useComboboxPopupDialogContext requires a ComboboxPopupDialog ancestor");
   return o;
 }
-function z(o) {
+function q(o) {
   const e = typeof o == "string" ? document.getElementById(o) : o;
   if (!e) {
     const t = typeof o == "string" ? `with ID "${o}"` : "(passed by reference)";
@@ -105,132 +106,134 @@ function z(o) {
   }
   e.showModal();
 }
-function wo() {
+function No() {
   return /* @__PURE__ */ a("form", { role: "none", children: /* @__PURE__ */ a(
-    H,
+    $,
     {
       "aria-label": "Close",
       formMethod: "dialog",
-      iconLeft: /* @__PURE__ */ a(Y, { "aria-hidden": !0 }),
+      iconLeft: /* @__PURE__ */ a(G, { "aria-hidden": !0 }),
       size: "large",
       type: "submit",
       variant: "tertiary"
     }
   ) });
 }
-const ko = "el-combobox-popup-dialog", To = /* @__PURE__ */ r("div")({
+const Vo = "el-combobox-popup-dialog", Ho = /* @__PURE__ */ l("div")({
   name: "ElComboboxPopupDialogHeader",
   class: "el-combobox-popup-dialog-header",
   propsAsIs: !1
-}), Mo = /* @__PURE__ */ r("div")({
+}), $o = /* @__PURE__ */ l("div")({
   name: "ElComboboxPopupDialogListboxContainer",
   class: "el-combobox-popup-dialog-listbox-container",
   propsAsIs: !1
-}), j = "calc(anchor-size(width) + 2 * var(--combobox-popup-padding))", No = "calc(anchor(left) - var(--combobox-popup-padding))", Vo = "calc(anchor(top) - var(--combobox-popup-padding))";
-function I({
+}), U = "calc(anchor-size(width) + 2 * var(--combobox-popup-padding))", zo = "calc(anchor(left) - var(--combobox-popup-padding))", qo = "calc(anchor(top) - var(--combobox-popup-padding))";
+function E({
   "aria-labelledby": o,
   children: e,
   className: t,
   closeOnSelection: n = "auto",
   id: s,
-  maxHeight: c,
-  maxWidth: l = j,
-  minWidth: p = j,
-  onClose: u,
-  onClick: d,
-  preserveSearchOnClose: m = !1,
-  search: g,
-  style: h,
-  variant: f = "auto",
+  maxHeight: r,
+  maxWidth: c = U,
+  minWidth: b = U,
+  onCancel: u,
+  onClose: d,
+  onClick: m,
+  preserveSearchOnClose: h = !1,
+  search: C,
+  style: B,
+  variant: g = "auto",
   ...A
 }) {
-  const B = X(Oo("SM")), T = f === "popover" || f === "auto" && B, _ = f === "drawer" || f === "auto" && !B, po = (E) => {
-    u?.(E), E.stopPropagation(), g && vo(E);
-  }, uo = (E) => {
-    d?.(E), Lo(E), Po(E);
+  const D = J(So("SM")), M = g === "popover" || g === "auto" && D, F = g === "drawer" || g === "auto" && !D, uo = Lo("any", u), mo = Po((I) => {
+    d?.(I), C && Mo(I);
+  }), Co = (I) => {
+    m?.(I), vo(I), wo(I);
   };
   return /* @__PURE__ */ a(
     "dialog",
     {
       ...A,
       "aria-labelledby": o,
-      className: G(ko, t),
+      className: X(Vo, t),
       closedby: "any",
       "data-close-on-selection": n,
-      "data-preserve-search-on-close": m,
-      "data-variant": f,
+      "data-preserve-search-on-close": h,
+      "data-variant": g,
       id: s,
-      onClose: po,
-      onClick: uo,
-      style: { ...h, maxHeight: c },
-      children: /* @__PURE__ */ C($.Provider, { value: { variant: f }, children: [
-        T && /* @__PURE__ */ a(
-          Io,
+      onCancel: uo,
+      onClose: mo,
+      onClick: Co,
+      style: { ...B, maxHeight: r },
+      children: /* @__PURE__ */ x(z.Provider, { value: { variant: g }, children: [
+        M && /* @__PURE__ */ a(
+          Ao,
           {
             anchorElementId: o,
-            left: No,
-            maxWidth: l,
-            minWidth: p,
+            left: zo,
+            maxWidth: c,
+            minWidth: b,
             positionedElementId: s,
             positionTryFallbacks: "flip-block, flip-inline",
-            top: Vo
+            top: qo
           }
         ),
-        (g || _) && /* @__PURE__ */ C(To, { children: [
-          g,
-          _ && /* @__PURE__ */ a(wo, {})
+        (C || F) && /* @__PURE__ */ x(Ho, { children: [
+          C,
+          F && /* @__PURE__ */ a(No, {})
         ] }),
-        /* @__PURE__ */ a(Mo, { children: e })
+        /* @__PURE__ */ a($o, { children: e })
       ] })
     }
   );
 }
-I.Context = $;
-I.useContext = K;
-I.open = z;
-I.close = N;
-function Ho(o, e) {
-  const t = mo(e);
-  F(
+E.Context = z;
+E.useContext = Q;
+E.open = q;
+E.close = V;
+function Ro(o, e) {
+  const t = xo(e);
+  j(
     function() {
       t.current = e;
     },
     [e]
-  ), F(
+  ), j(
     function() {
       const s = document.getElementById(o);
       if (s instanceof HTMLElement) {
-        const c = new AbortController();
-        return s.addEventListener("toggle", (l) => t.current(l), {
-          signal: c.signal
-        }), () => c.abort();
+        const r = new AbortController();
+        return s.addEventListener("toggle", (c) => t.current(c), {
+          signal: r.signal
+        }), () => r.abort();
       }
     },
     [o]
   );
 }
-function $o(o) {
-  const [e, t] = V(!1);
-  return Ho(o, (n) => {
+function Wo(o) {
+  const [e, t] = H(!1);
+  return Ro(o, (n) => {
     t(n.newState === "open");
   }), e;
 }
-function zo({
+function _o({
   "aria-label": o = "Open popup",
   "aria-controls": e,
   onClick: t,
   ...n
 }) {
   return /* @__PURE__ */ a(
-    H,
+    $,
     {
       ...n,
       "aria-controls": e,
       "aria-label": o,
       hasNoPadding: !0,
-      iconLeft: /* @__PURE__ */ a(ho, {}),
-      onClick: (c) => {
-        t?.(c), z(e);
+      iconLeft: /* @__PURE__ */ a(Eo, {}),
+      onClick: (r) => {
+        t?.(r), q(e);
       },
       size: "small",
       tabIndex: -1,
@@ -238,23 +241,23 @@ function zo({
     }
   );
 }
-const qo = /* @__PURE__ */ r("div")({
+const Fo = /* @__PURE__ */ l("div")({
   name: "ElComboboxButtonContainer",
   class: "el-combobox-button-container",
   propsAsIs: !1
-}), Ro = /* @__PURE__ */ r("button")({
+}), jo = /* @__PURE__ */ l("button")({
   name: "ElComboboxButton",
   class: "el-combobox-button",
   propsAsIs: !1
-}), Wo = /* @__PURE__ */ r("span")({
+}), Uo = /* @__PURE__ */ l("span")({
   name: "ElComboboxButtonIconContainer",
   class: "el-combobox-button-icon-container",
   propsAsIs: !1
-}), _o = /* @__PURE__ */ r("span")({
+}), Yo = /* @__PURE__ */ l("span")({
   name: "ElComboboxButtonLabelContainer",
   class: "el-combobox-button-label-container",
   propsAsIs: !1
-}), Fo = /* @__PURE__ */ r("span")({
+}), Go = /* @__PURE__ */ l("span")({
   name: "ElComboboxButtonActionContainer",
   class: "el-combobox-button-action-container",
   propsAsIs: !1
@@ -265,63 +268,63 @@ function y({
   "aria-expanded": t,
   children: n,
   className: s,
-  id: c,
-  leadingIcon: l,
-  placeholder: p = "Select an option",
+  id: r,
+  leadingIcon: c,
+  placeholder: b = "Select an option",
   size: u = "medium",
   style: d,
   ...m
 }) {
+  const h = !!n;
   return (
     // Applies consumer class names and inline styles to the container, not the button.
     // Minimizes easy override of button styles critical to component function.
-    /* @__PURE__ */ C(qo, { className: s, "data-size": u, style: d, children: [
-      /* @__PURE__ */ C(
-        Ro,
+    /* @__PURE__ */ x(Fo, { className: s, "data-size": u, style: d, children: [
+      /* @__PURE__ */ x(
+        jo,
         {
           ...m,
           "aria-autocomplete": "list",
           "aria-controls": e,
           "aria-expanded": t,
           "aria-haspopup": "dialog",
-          "aria-placeholder": p,
-          id: c,
+          id: r,
           role: "combobox",
           type: "button",
           children: [
-            l && /* @__PURE__ */ a(Wo, { children: l }),
-            /* @__PURE__ */ a(_o, { "aria-hidden": !!!n, "data-placeholder": p, children: n })
+            c && /* @__PURE__ */ a(Uo, { children: c }),
+            /* @__PURE__ */ a(Yo, { "data-has-selection": h, "data-placeholder": b, children: h ? n : b })
           ]
         }
       ),
-      o && /* @__PURE__ */ a(Fo, { children: o })
+      o && /* @__PURE__ */ a(Go, { children: o })
     ] })
   );
 }
-y.ClearButton = yo;
-y.OpenPopupButton = zo;
-const jo = /* @__PURE__ */ r("div")({
+y.ClearButton = Do;
+y.OpenPopupButton = _o;
+const Xo = /* @__PURE__ */ l("div")({
   name: "ElComboboxCard",
   class: "el-combobox-card",
   propsAsIs: !1
-}), Uo = /* @__PURE__ */ r("button")({
+}), Jo = /* @__PURE__ */ l("button")({
   name: "ElComboboxCardButton",
   class: "el-combobox-card-button",
   propsAsIs: !1
-}), Yo = /* @__PURE__ */ r("span")({
+}), Ko = /* @__PURE__ */ l("span")({
   name: "ElComboboxCardActionContainer",
   class: "el-combobox-card-action-container",
   propsAsIs: !1
 });
-function Go({
+function Qo({
   action: o,
   "aria-controls": e,
   "aria-disabled": t = !0,
   "aria-expanded": n,
   children: s,
-  className: c,
-  id: l,
-  onClick: p,
+  className: r,
+  id: c,
+  onClick: b,
   size: u = "medium",
   style: d,
   ...m
@@ -329,9 +332,9 @@ function Go({
   return (
     // Applies consumer class names and inline styles to the container, not the button.
     // Minimizes easy override of button styles critical to component function.
-    /* @__PURE__ */ C(jo, { className: c, "data-size": u, style: d, children: [
+    /* @__PURE__ */ x(Xo, { className: r, "data-size": u, style: d, children: [
       /* @__PURE__ */ a(
-        Uo,
+        Jo,
         {
           ...m,
           "aria-autocomplete": "list",
@@ -339,203 +342,203 @@ function Go({
           "aria-disabled": t,
           "aria-expanded": n,
           "aria-haspopup": "dialog",
-          id: l,
-          onClick: (h) => {
-            if (h.currentTarget.getAttribute("aria-disabled") === "true") {
-              h.stopPropagation(), h.preventDefault();
+          id: c,
+          onClick: (C) => {
+            if (C.currentTarget.getAttribute("aria-disabled") === "true") {
+              C.stopPropagation(), C.preventDefault();
               return;
             }
-            p?.(h);
+            b?.(C);
           },
           role: "combobox",
           type: "button",
           children: s
         }
       ),
-      o && /* @__PURE__ */ a(Yo, { children: o })
+      o && /* @__PURE__ */ a(Ko, { children: o })
     ] })
   );
 }
-const Xo = /* @__PURE__ */ r("span")({
+const Zo = /* @__PURE__ */ l("span")({
   name: "ElComboboxCardDefaultContent",
   class: "el-combobox-card-default-content",
   propsAsIs: !1
-}), Jo = /* @__PURE__ */ r("span")({
+}), oe = /* @__PURE__ */ l("span")({
   name: "ElComboboxCardDefaultContentLabel",
   class: "el-combobox-card-default-content-label",
   propsAsIs: !1
-}), Ko = /* @__PURE__ */ r("span")({
+}), ee = /* @__PURE__ */ l("span")({
   name: "ElComboboxCardDefaultContentAdditionalInfo",
   class: "el-combobox-card-default-content-additional-info",
   propsAsIs: !1
 });
-function Q({ additionalInfo: o, children: e, ...t }) {
-  return /* @__PURE__ */ C(Xo, { ...t, children: [
-    /* @__PURE__ */ a(Jo, { children: e }),
-    /* @__PURE__ */ a(Ko, { children: o })
+function Z({ additionalInfo: o, children: e, ...t }) {
+  return /* @__PURE__ */ x(Zo, { ...t, children: [
+    /* @__PURE__ */ a(oe, { children: e }),
+    /* @__PURE__ */ a(ee, { children: o })
   ] });
 }
-Q.displayName = "Combobox.CardDefaultContent";
-const q = D(null);
+Z.displayName = "Combobox.CardDefaultContent";
+const R = v(null);
 function L() {
-  const o = v(q);
+  const o = w(R);
   if (!o)
     throw new Error("useComboboxContext requires a Combobox ancestor");
   return o;
 }
-const Z = D([]);
-function w() {
-  return v(Z);
+const oo = v([]);
+function k() {
+  return w(oo);
 }
-const Qo = /* @__PURE__ */ r("div")({
+const te = /* @__PURE__ */ l("div")({
   name: "ElComboboxListbox",
   class: "el-combobox-listbox",
   propsAsIs: !1
-}), Zo = /* @__PURE__ */ r("div")({
+}), ne = /* @__PURE__ */ l("div")({
   name: "ElComboboxListboxPlaceholder",
   class: "el-combobox-listbox-placeholder",
   propsAsIs: !1
 });
-function oo({ children: o, size: e = "medium", ...t }) {
-  return xo() === "native" ? null : /* @__PURE__ */ a(Zo, { ...t, "aria-live": "polite", "data-size": e, role: "status", children: o });
+function eo({ children: o, size: e = "medium", ...t }) {
+  return ho() === "native" ? null : /* @__PURE__ */ a(ne, { ...t, "aria-live": "polite", "data-size": e, role: "status", children: o });
 }
-oo.displayName = "Combobox.ListboxPlaceholder";
-const oe = /* @__PURE__ */ r("div")({
+eo.displayName = "Combobox.ListboxPlaceholder";
+const ae = /* @__PURE__ */ l("div")({
   name: "ElComboboxOptgroup",
   class: "el-combobox-optgroup",
   propsAsIs: !1
-}), ee = /* @__PURE__ */ r("div")({
+}), se = /* @__PURE__ */ l("div")({
   name: "ElComboboxOptgroupLabelContainer",
   class: "el-combobox-optgroup-label-container",
   propsAsIs: !1
 });
-function te({ "aria-label": o, children: e, label: t, ...n }) {
+function ie({ "aria-label": o, children: e, label: t, ...n }) {
   const s = S();
   return (
     // NOTE: Omit aria-labelledby when aria-label is provided. The aria-labelledby attribute takes
     // precedence over aria-label. See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label#:~:text=aria%2Dlabelledby%20will%20take%20precedence%20over%20aria%2Dlabel%20if%20both%20are%20applied
-    /* @__PURE__ */ C(oe, { ...n, "aria-label": o, "aria-labelledby": o ? void 0 : s, role: "group", children: [
-      t && /* @__PURE__ */ a(ee, { id: s, children: t }),
+    /* @__PURE__ */ x(ae, { ...n, "aria-label": o, "aria-labelledby": o ? void 0 : s, role: "group", children: [
+      t && /* @__PURE__ */ a(se, { id: s, children: t }),
       e
     ] })
   );
 }
-function eo(o) {
-  return /* @__PURE__ */ a(x.Optgroup, { as: te, ...o });
-}
-eo.displayName = "Combobox.Optgroup";
 function to(o) {
+  return /* @__PURE__ */ a(f.Optgroup, { as: ie, ...o });
+}
+to.displayName = "Combobox.Optgroup";
+function no(o) {
   return "ariaLabelledByElements" in Element.prototype ? o.ariaLabelledByElements?.at(0)?.textContent ?? o.textContent : document.getElementById(o.getAttribute("aria-labelledby"))?.textContent ?? o.textContent;
 }
-const ne = /* @__PURE__ */ r("button")({
+const le = /* @__PURE__ */ l("button")({
   name: "ElComboboxOption",
   class: "el-combobox-option",
   propsAsIs: !1
-}), ae = /* @__PURE__ */ r("span")({
+}), re = /* @__PURE__ */ l("span")({
   name: "ElComboboxOptionCheckIconContainer",
   class: "el-combobox-option-check-icon-container",
   propsAsIs: !1
-}), se = /* @__PURE__ */ r("span")({
+}), ce = /* @__PURE__ */ l("span")({
   name: "ElComboboxOptionLabel",
   class: "el-combobox-option-label",
   propsAsIs: !1
-}), no = /* @__PURE__ */ r("span")({
+}), ao = /* @__PURE__ */ l("span")({
   name: "ElComboboxOptionTextContainer",
   class: "el-combobox-option-text-container",
   propsAsIs: !1
-}), ao = /* @__PURE__ */ r("span")({
+}), so = /* @__PURE__ */ l("span")({
   name: "ElComboboxOptionBadgeContainer",
   class: "el-combobox-option-badge-container",
   propsAsIs: !1
-}), ie = /* @__PURE__ */ r("span")({
+}), be = /* @__PURE__ */ l("span")({
   name: "ElComboboxOptionAdditionalInfoContainer",
   class: "el-combobox-option-additional-info-container",
   propsAsIs: !1
-}), le = /* @__PURE__ */ r("span")({
+}), pe = /* @__PURE__ */ l("span")({
   name: "ElComboboxOptionAdditionalInfo",
   class: "el-combobox-option-additional-info",
   propsAsIs: !1
-}), re = /* @__PURE__ */ r("span")({
+}), ue = /* @__PURE__ */ l("span")({
   name: "ElComboboxOptionAdditionalInfoIconContainer",
   class: "el-combobox-option-additional-info-icon-container",
   propsAsIs: !1
 });
-function so({ badge: o, children: e, icon: t, ...n }) {
-  return /* @__PURE__ */ C(le, { ...n, children: [
-    t && /* @__PURE__ */ a(re, { children: t }),
-    /* @__PURE__ */ a(no, { children: e }),
-    o && /* @__PURE__ */ a(ao, { children: o })
+function io({ badge: o, children: e, icon: t, ...n }) {
+  return /* @__PURE__ */ x(pe, { ...n, children: [
+    t && /* @__PURE__ */ a(ue, { children: t }),
+    /* @__PURE__ */ a(ao, { children: e }),
+    o && /* @__PURE__ */ a(so, { children: o })
   ] });
 }
-so.displayName = "Combobox.OptionAdditionalInfo";
+io.displayName = "Combobox.OptionAdditionalInfo";
 function P({ badge: o, children: e, additionalInfo: t, size: n = "medium", ...s }) {
-  const c = S(), l = S(), p = S(), u = [o && c, t && p].filter((d) => !!d).join(" ") || void 0;
-  return /* @__PURE__ */ C(
-    ne,
+  const r = S(), c = S(), b = S(), u = [o && r, t && b].filter((d) => !!d).join(" ") || void 0;
+  return /* @__PURE__ */ x(
+    le,
     {
       ...s,
-      "aria-labelledby": l,
+      "aria-labelledby": c,
       "aria-details": u,
       "data-size": n,
       role: "option",
       type: "button",
       children: [
-        /* @__PURE__ */ a(ae, { "aria-hidden": !0, children: /* @__PURE__ */ a(So, {}) }),
-        /* @__PURE__ */ C(se, { children: [
-          /* @__PURE__ */ a(no, { id: l, children: e }),
-          o && /* @__PURE__ */ a(ao, { id: c, children: o })
+        /* @__PURE__ */ a(re, { "aria-hidden": !0, children: /* @__PURE__ */ a(Bo, {}) }),
+        /* @__PURE__ */ x(ce, { children: [
+          /* @__PURE__ */ a(ao, { id: c, children: e }),
+          o && /* @__PURE__ */ a(so, { id: r, children: o })
         ] }),
-        t && /* @__PURE__ */ a(ie, { id: p, children: t })
+        t && /* @__PURE__ */ a(be, { id: b, children: t })
       ]
     }
   );
 }
-P.getOptionLabel = to;
-P.AdditionalInfo = so;
+P.getOptionLabel = no;
+P.AdditionalInfo = io;
 function O(o) {
   const { size: e } = L();
-  return /* @__PURE__ */ a(x.Option, { as: P, ...o, size: e === "small" ? "medium" : e });
+  return /* @__PURE__ */ a(f.Option, { as: P, ...o, size: e === "small" ? "medium" : e });
 }
 O.displayName = "Combobox.Option";
 O.getLabel = P.getOptionLabel;
 O.AdditionalInfo = P.AdditionalInfo;
-function b({ defaultValue: o, ...e }) {
-  const n = w().map((u) => u.value), { disabled: s, listboxId: c, multiple: l, required: p } = L();
+function p({ defaultValue: o, ...e }) {
+  const n = k().map((u) => u.value), { disabled: s, listboxId: r, multiple: c, required: b } = L();
   return /* @__PURE__ */ a(
-    x,
+    f,
     {
       ...e,
-      as: Qo,
+      as: te,
       "aria-disabled": s,
-      "aria-multiselectable": l,
+      "aria-multiselectable": c,
       "aria-orientation": "vertical",
-      "aria-required": p,
+      "aria-required": b,
       defaultValue: o ?? n,
-      id: c,
+      id: r,
       selectionFollowsFocus: !1
     }
   );
 }
-b.displayName = "Combobox.Listbox";
-b.Divider = x.Divider;
-b.Optgroup = eo;
-b.Option = O;
-b.OptionAdditionalInfo = O.AdditionalInfo;
-b.Placeholder = oo;
-b.clearValue = x.clearValue;
-b.getOptionLabel = O.getLabel;
-b.getSelectedOptions = x.getSelectedOptions;
-b.getValue = x.getValue;
-b.setOptionSelectedState = x.setOptionSelectedState;
-b.useState = x.useState;
-function k(o) {
+p.displayName = "Combobox.Listbox";
+p.Divider = f.Divider;
+p.Optgroup = to;
+p.Option = O;
+p.OptionAdditionalInfo = O.AdditionalInfo;
+p.Placeholder = eo;
+p.clearValue = f.clearValue;
+p.getOptionLabel = O.getLabel;
+p.getSelectedOptions = f.getSelectedOptions;
+p.getValue = f.getValue;
+p.setOptionSelectedState = f.setOptionSelectedState;
+p.useState = f.useState;
+function T(o) {
   const { comboboxId: e, popupId: t } = L();
-  return /* @__PURE__ */ a(I, { ...o, "aria-labelledby": e, id: t, children: o.children });
+  return /* @__PURE__ */ a(E, { ...o, "aria-labelledby": e, id: t, children: o.children });
 }
-k.displayName = "Combobox.Popup";
-k.show = I.open;
-k.hide = I.close;
-function ce({
+T.displayName = "Combobox.Popup";
+T.show = E.open;
+T.hide = E.close;
+function de({
   isXSBreakpoint: o,
   popupVariant: e
 }) {
@@ -548,97 +551,98 @@ function ce({
       return o ? "borderless" : "default";
   }
 }
-function io(o) {
-  const { variant: e } = K(), t = X(Ao("SM")), n = ce({ isXSBreakpoint: t, popupVariant: e });
-  return /* @__PURE__ */ a(Eo, { ...o, type: "text", variant: n });
-}
-io.displayName = "Combobox.SearchInput";
-function R(o, e = []) {
-  const [t, n] = V(() => e);
-  return U(o, (s, c) => {
-    n((l) => {
-      const p = l.filter((d) => c.includes(d.value)), u = s.filter((d) => !l.some((m) => m.value === d.value)).map((d) => ({
-        label: to(d),
+function lo(o) {
+  const { variant: e } = Q(), t = J(yo("SM")), n = de({ isXSBreakpoint: t, popupVariant: e });
+  return /* @__PURE__ */ a(Oo, { ...o, type: "text", variant: n });
+}
+lo.displayName = "Combobox.SearchInput";
+function W(o, e = []) {
+  const [t, n] = H(() => e);
+  return Y(o, (s, r) => {
+    n((c) => {
+      const b = c.filter((d) => r.includes(d.value)), u = s.filter((d) => !c.some((m) => m.value === d.value)).map((d) => ({
+        label: no(d),
         value: d.value
       }));
-      return [...p, ...u];
+      return [...b, ...u];
     });
   }), t;
 }
-function be({
+function me({
   children: o,
   defaultOptions: e,
   listboxId: t
 }) {
-  const n = w(), s = R(t, e ?? n);
+  const n = k(), s = W(t, e ?? n);
   return o?.(s) ?? s.at(0)?.label;
 }
-const lo = D(null);
-function pe() {
-  const o = v(lo);
+const ro = v(null);
+function Ce() {
+  const o = w(ro);
   if (!o)
     throw new Error("useComboboxSelectionChipsContext requires a ComboboxSelectionChips ancestor");
   return o;
 }
-function ro({ children: o, value: e, ...t }) {
-  const n = pe();
+function co({ children: o, value: e, ...t }) {
+  const n = Ce();
   return /* @__PURE__ */ a(
-    J.Item,
+    K.Item,
     {
       ...t,
       "aria-controls": n.listboxId,
       "aria-label": `Remove ${o}`,
-      onClick: () => fo(n.listboxId, e, () => !1),
+      onClick: () => go(n.listboxId, e, () => !1),
       value: e,
       children: o
     }
   );
 }
-const ue = "el-combobox-selection-chips";
-function W({
+const xe = "el-combobox-selection-chips";
+function _({
   children: o,
   className: e,
   defaultOptions: t,
   listboxId: n,
   ...s
 }) {
-  const c = w(), l = R(n, t ?? c), p = o?.(l) ?? l.map((u) => /* @__PURE__ */ a(ro, { value: u.value, children: u.label }, u.value));
-  return l.length > 0 && /* @__PURE__ */ a(J, { ...s, className: G(ue, e), variant: "selection", children: /* @__PURE__ */ a(lo.Provider, { value: { listboxId: n }, children: p }) });
+  const r = k(), c = W(n, t ?? r), b = o?.(c) ?? c.map((u) => /* @__PURE__ */ a(co, { value: u.value, children: u.label }, u.value));
+  return c.length > 0 && /* @__PURE__ */ a(K, { ...s, className: X(xe, e), variant: "selection", children: /* @__PURE__ */ a(ro.Provider, { value: { listboxId: n }, children: b }) });
 }
-W.Item = ro;
-const de = /* @__PURE__ */ r("div")({
+_.Item = co;
+const fe = /* @__PURE__ */ l("div")({
   name: "ElCombobox",
   class: "el-combobox",
   propsAsIs: !1
 });
-function co(o) {
+function bo(o) {
   return `${o}-listbox`;
 }
-function bo(o) {
+function po(o) {
   return `${o}-popup`;
 }
-function me({ onClick: o } = {}) {
-  const { ariaDescribedBy: e, ariaErrorMessage: t, ariaInvalid: n, comboboxId: s, disabled: c, popupId: l, required: p } = L(), u = $o(l);
+function he({ onClick: o } = {}) {
+  const { ariaDescribedBy: e, ariaErrorMessage: t, ariaInvalid: n, ariaLabelledBy: s, comboboxId: r, disabled: c, popupId: b, required: u } = L(), d = Wo(b);
   return {
-    "aria-controls": l,
+    "aria-controls": b,
     "aria-describedby": e,
     "aria-errormessage": t,
-    "aria-expanded": u,
+    "aria-expanded": d,
     "aria-invalid": n,
+    "aria-labelledby": s,
     // We use aria-required to indicate a value for the _combobox_ is required.
     // See https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
-    "aria-required": p,
+    "aria-required": u,
     disabled: c,
-    id: s,
-    onClick: (m) => {
-      o?.(m), z(l);
+    id: r,
+    onClick: (h) => {
+      o?.(h), q(b);
     },
     role: "combobox"
   };
 }
-function Ce(o) {
-  const [e, t] = V(!1);
-  return U(o, (n, s) => {
+function ge(o) {
+  const [e, t] = H(!1);
+  return Y(o, (n, s) => {
     t(s.length > 0);
   }), e;
 }
@@ -646,128 +650,130 @@ function i({
   "aria-describedby": o,
   "aria-errormessage": e,
   "aria-invalid": t,
-  children: n,
-  disabled: s = !1,
+  "aria-labelledby": n,
+  children: s,
+  disabled: r = !1,
   id: c,
-  maxWidth: l,
-  multiple: p = !1,
-  required: u = !1,
-  showValidity: d = !1,
-  size: m = "medium",
-  style: g,
-  ...h
+  maxWidth: b,
+  multiple: u = !1,
+  required: d = !1,
+  showValidity: m = !1,
+  size: h = "medium",
+  style: C,
+  ...B
 }) {
-  const f = S(), A = c ?? f, B = co(A), T = bo(A);
+  const g = S(), A = c ?? g, D = bo(A), M = po(A);
   return /* @__PURE__ */ a(
-    q.Provider,
+    R.Provider,
     {
       value: {
         ariaDescribedBy: o,
         ariaErrorMessage: e,
         ariaInvalid: t,
+        ariaLabelledBy: n,
         comboboxId: A,
-        disabled: s,
-        listboxId: B,
-        multiple: p,
-        popupId: T,
-        required: u,
-        size: m
+        disabled: r,
+        listboxId: D,
+        multiple: u,
+        popupId: M,
+        required: d,
+        size: h
       },
-      children: /* @__PURE__ */ a(de, { ...h, "data-show-validity": d, style: { "--combobox-max-width": l, ...g }, children: n })
+      children: /* @__PURE__ */ a(fe, { ...B, "data-show-validity": m, style: { "--combobox-max-width": b, ...C }, children: s })
     }
   );
 }
-i.getOptionLabel = b.getOptionLabel;
-i.getListboxValue = x.getValue;
-i.getListboxId = co;
-i.getPopupId = bo;
+i.getOptionLabel = p.getOptionLabel;
+i.getListboxValue = f.getValue;
+i.getListboxId = bo;
+i.getPopupId = po;
 i.Button = y;
-i.Card = Go;
-i.CardDefaultContent = Q;
+i.Card = Qo;
+i.CardDefaultContent = Z;
 i.ClearButton = y.ClearButton;
-i.Divider = b.Divider;
-i.Listbox = b;
-i.ListboxPlaceholder = b.Placeholder;
+i.Divider = p.Divider;
+i.Listbox = p;
+i.ListboxPlaceholder = p.Placeholder;
 i.OpenPopupButton = y.OpenPopupButton;
-i.Optgroup = b.Optgroup;
-i.Option = b.Option;
-i.OptionAdditionalInfo = b.OptionAdditionalInfo;
-i.Popup = k;
-i.SearchInput = io;
-i.SelectedContent = be;
-i.SelectionChips = W;
-i.SelectionChipsItem = W.Item;
-i.Context = q;
-i.DefaultOptionsContext = Z;
-i.useButton = me;
+i.Optgroup = p.Optgroup;
+i.Option = p.Option;
+i.OptionAdditionalInfo = p.OptionAdditionalInfo;
+i.Popup = T;
+i.SearchInput = lo;
+i.SelectedContent = me;
+i.SelectionChips = _;
+i.SelectionChipsItem = _.Item;
+i.Context = R;
+i.DefaultOptionsContext = oo;
+i.useButton = he;
 i.useContext = L;
-i.useDefaultOptionsContext = w;
-i.useHasSelection = Ce;
-i.useSelectedOptions = R;
-i.useState = b.useState;
+i.useDefaultOptionsContext = k;
+i.useHasSelection = ge;
+i.useSelectedOptions = W;
+i.useState = p.useState;
 export {
-  Vo as $,
-  te as A,
-  oe as B,
+  qo as $,
+  ie as A,
+  ae as B,
   y as C,
-  ee as D,
-  qo as E,
-  to as F,
+  se as D,
+  Fo as E,
+  no as F,
   P as G,
-  so as H,
-  ne as I,
-  ae as J,
-  se as K,
-  no as L,
-  ao as M,
-  ie as N,
-  le as O,
-  re as P,
-  M as Q,
-  Lo as R,
-  Po as S,
-  Bo as T,
-  vo as U,
-  N as V,
-  $ as W,
-  K as X,
-  z as Y,
-  j as Z,
-  No as _,
-  yo as a,
-  I as a0,
-  ko as a1,
-  To as a2,
-  Mo as a3,
-  Ho as a4,
-  $o as a5,
-  de as a6,
-  me as a7,
-  Ce as a8,
-  R as a9,
-  zo as b,
-  Ro as c,
-  Wo as d,
-  _o as e,
-  Fo as f,
-  Go as g,
-  jo as h,
-  Uo as i,
-  Yo as j,
-  Q as k,
-  Xo as l,
-  Jo as m,
-  Ko as n,
+  io as H,
+  le as I,
+  re as J,
+  ce as K,
+  ao as L,
+  so as M,
+  be as N,
+  pe as O,
+  ue as P,
+  N as Q,
+  vo as R,
+  wo as S,
+  ko as T,
+  Mo as U,
+  V,
+  z as W,
+  Q as X,
+  q as Y,
+  U as Z,
+  zo as _,
+  Do as a,
+  E as a0,
+  Vo as a1,
+  Ho as a2,
+  $o as a3,
+  Ro as a4,
+  Wo as a5,
+  fe as a6,
+  he as a7,
+  ge as a8,
+  W as a9,
+  _o as b,
+  jo as c,
+  Uo as d,
+  Yo as e,
+  Go as f,
+  Qo as g,
+  Xo as h,
+  Jo as i,
+  Ko as j,
+  Z as k,
+  Zo as l,
+  oe as m,
+  ee as n,
   i as o,
-  k as p,
-  q,
-  co as r,
-  bo as s,
-  b as t,
+  T as p,
+  R as q,
+  bo as r,
+  po as s,
+  p as t,
   L as u,
-  oo as v,
-  eo as w,
+  eo as v,
+  to as w,
   O as x,
-  Qo as y,
-  Zo as z
+  te as y,
+  ne as z
 };