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

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

@@ -1,15 +1,15 @@
-import { jsx as a, jsxs as f } from "react/jsx-runtime";
+import { jsx as a, jsxs as C } from "react/jsx-runtime";
 import "./button-base-BcnVjgNa.js";
-import { createContext as B, useContext as w, useRef as uo, useEffect as F, useState as D, useId as S } from "react";
+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 mo, i as xo, d as x, k as U, s as Co } from "./listbox-z26X2kKG.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 fo } from "./icons/chevron-down.js";
-import { c as ho, S as go } from "./search-input-P7uo0pIh.js";
-import { A as Eo } from "./anchor-positioning-BE1BAJzc.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 c } from "./index-YtxCR-9e.js";
-import { isWidthAtOrAbove as Io, isWidthBelow as Oo } from "./utils/breakpoints.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";
@@ -27,15 +27,15 @@ function yo({
       "aria-label": o,
       hasNoPadding: !0,
       iconLeft: /* @__PURE__ */ a(Y, {}),
-      onClick: (r) => {
-        t?.(r), mo(e);
+      onClick: (c) => {
+        t?.(c), Co(e);
       },
       size: "small",
       variant: "tertiary"
     }
   );
 }
-function V(o) {
+function N(o) {
   const e = typeof o == "string" ? document.getElementById(o) : o;
   if (!e) {
     const t = typeof o == "string" ? `with ID "${o}"` : "(passed by reference)";
@@ -47,48 +47,48 @@ function V(o) {
   }
   e.close();
 }
-const N = {
+const M = {
   AUTO: "auto",
   ALWAYS: "always",
   NEVER: "never"
 };
-function Ao(o) {
+function Lo(o) {
   if (o.defaultPrevented || !o.isTrusted)
     return;
-  const e = Po(o.target);
+  const e = Bo(o.target);
   if (!e)
     return;
   const { closeOnSelection: t } = o.currentTarget.dataset;
-  if (t !== N.NEVER) {
-    if (t === N.ALWAYS) {
-      V(o.currentTarget);
+  if (t !== M.NEVER) {
+    if (t === M.ALWAYS) {
+      N(o.currentTarget);
       return;
     }
-    if (t === N.AUTO) {
+    if (t === M.AUTO) {
       const { listboxId: n } = e.dataset, s = n ? document.getElementById(n) : null;
-      vo(s) && V(o.currentTarget);
+      Do(s) && N(o.currentTarget);
     }
   }
 }
-function Lo(o) {
+function Po(o) {
   !("closedBy" in HTMLDialogElement.prototype) && o.target === o.currentTarget && o.currentTarget.close();
 }
-function Po(o) {
+function Bo(o) {
   return o instanceof HTMLElement ? o.closest('[role="option"]') : null;
 }
-function vo(o) {
+function Do(o) {
   return "ariaMultiSelectable" in Element.prototype ? o?.ariaMultiSelectable === "false" : o?.getAttribute("aria-multiselectable") === "false";
 }
-function Bo(o) {
+function vo(o) {
   const { preserveSearchOnClose: e } = o.currentTarget.dataset;
   if (e === "true")
     return;
   const t = o.currentTarget.querySelector("input");
-  t instanceof HTMLInputElement && ho(t);
+  t instanceof HTMLInputElement && go(t);
 }
-const $ = B(null);
+const $ = D(null);
 function K() {
-  const o = w($);
+  const o = v($);
   if (!o)
     throw new Error("useComboboxPopupDialogContext requires a ComboboxPopupDialog ancestor");
   return o;
@@ -118,79 +118,79 @@ function wo() {
     }
   ) });
 }
-const Do = "el-combobox-popup-dialog", To = /* @__PURE__ */ c("div")({
+const ko = "el-combobox-popup-dialog", To = /* @__PURE__ */ r("div")({
   name: "ElComboboxPopupDialogHeader",
   class: "el-combobox-popup-dialog-header",
   propsAsIs: !1
-}), ko = /* @__PURE__ */ c("div")({
+}), Mo = /* @__PURE__ */ r("div")({
   name: "ElComboboxPopupDialogListboxContainer",
   class: "el-combobox-popup-dialog-listbox-container",
   propsAsIs: !1
-}), j = "calc(anchor-size(width) + 2 * var(--combobox-popup-padding))", Mo = "calc(anchor(left) - var(--combobox-popup-padding))", No = "calc(anchor(top) - var(--combobox-popup-padding))";
-function g({
+}), 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({
   "aria-labelledby": o,
   children: e,
   className: t,
   closeOnSelection: n = "auto",
   id: s,
-  maxHeight: r,
+  maxHeight: c,
   maxWidth: l = j,
   minWidth: p = j,
   onClose: u,
   onClick: d,
   preserveSearchOnClose: m = !1,
-  search: h,
-  style: P,
-  variant: C = "auto",
-  ...O
+  search: g,
+  style: h,
+  variant: f = "auto",
+  ...A
 }) {
-  const v = X(Io("SM")), M = C === "popover" || C === "auto" && v, _ = C === "drawer" || C === "auto" && !v, bo = (E) => {
-    u?.(E), h && Bo(E);
-  }, po = (E) => {
-    d?.(E), Ao(E), Lo(E);
+  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);
   };
   return /* @__PURE__ */ a(
     "dialog",
     {
-      ...O,
+      ...A,
       "aria-labelledby": o,
-      className: G(Do, t),
+      className: G(ko, t),
       closedby: "any",
       "data-close-on-selection": n,
       "data-preserve-search-on-close": m,
-      "data-variant": C,
+      "data-variant": f,
       id: s,
-      onClose: bo,
-      onClick: po,
-      style: { ...P, maxHeight: r },
-      children: /* @__PURE__ */ f($.Provider, { value: { variant: C }, children: [
-        M && /* @__PURE__ */ a(
-          Eo,
+      onClose: po,
+      onClick: uo,
+      style: { ...h, maxHeight: c },
+      children: /* @__PURE__ */ C($.Provider, { value: { variant: f }, children: [
+        T && /* @__PURE__ */ a(
+          Io,
           {
             anchorElementId: o,
-            left: Mo,
+            left: No,
             maxWidth: l,
             minWidth: p,
             positionedElementId: s,
             positionTryFallbacks: "flip-block, flip-inline",
-            top: No
+            top: Vo
           }
         ),
-        (h || _) && /* @__PURE__ */ f(To, { children: [
-          h,
+        (g || _) && /* @__PURE__ */ C(To, { children: [
+          g,
           _ && /* @__PURE__ */ a(wo, {})
         ] }),
-        /* @__PURE__ */ a(ko, { children: e })
+        /* @__PURE__ */ a(Mo, { children: e })
       ] })
     }
   );
 }
-g.Context = $;
-g.useContext = K;
-g.open = z;
-g.close = V;
-function Vo(o, e) {
-  const t = uo(e);
+I.Context = $;
+I.useContext = K;
+I.open = z;
+I.close = N;
+function Ho(o, e) {
+  const t = mo(e);
   F(
     function() {
       t.current = e;
@@ -200,22 +200,22 @@ function Vo(o, e) {
     function() {
       const s = document.getElementById(o);
       if (s instanceof HTMLElement) {
-        const r = new AbortController();
+        const c = new AbortController();
         return s.addEventListener("toggle", (l) => t.current(l), {
-          signal: r.signal
-        }), () => r.abort();
+          signal: c.signal
+        }), () => c.abort();
       }
     },
     [o]
   );
 }
-function Ho(o) {
-  const [e, t] = D(!1);
-  return Vo(o, (n) => {
+function $o(o) {
+  const [e, t] = V(!1);
+  return Ho(o, (n) => {
     t(n.newState === "open");
   }), e;
 }
-function $o({
+function zo({
   "aria-label": o = "Open popup",
   "aria-controls": e,
   onClick: t,
@@ -228,9 +228,9 @@ function $o({
       "aria-controls": e,
       "aria-label": o,
       hasNoPadding: !0,
-      iconLeft: /* @__PURE__ */ a(fo, {}),
-      onClick: (r) => {
-        t?.(r), z(e);
+      iconLeft: /* @__PURE__ */ a(ho, {}),
+      onClick: (c) => {
+        t?.(c), z(e);
       },
       size: "small",
       tabIndex: -1,
@@ -238,23 +238,23 @@ function $o({
     }
   );
 }
-const zo = /* @__PURE__ */ c("div")({
+const qo = /* @__PURE__ */ r("div")({
   name: "ElComboboxButtonContainer",
   class: "el-combobox-button-container",
   propsAsIs: !1
-}), qo = /* @__PURE__ */ c("button")({
+}), Ro = /* @__PURE__ */ r("button")({
   name: "ElComboboxButton",
   class: "el-combobox-button",
   propsAsIs: !1
-}), Ro = /* @__PURE__ */ c("span")({
+}), Wo = /* @__PURE__ */ r("span")({
   name: "ElComboboxButtonIconContainer",
   class: "el-combobox-button-icon-container",
   propsAsIs: !1
-}), Wo = /* @__PURE__ */ c("span")({
+}), _o = /* @__PURE__ */ r("span")({
   name: "ElComboboxButtonLabelContainer",
   class: "el-combobox-button-label-container",
   propsAsIs: !1
-}), _o = /* @__PURE__ */ c("span")({
+}), Fo = /* @__PURE__ */ r("span")({
   name: "ElComboboxButtonActionContainer",
   class: "el-combobox-button-action-container",
   propsAsIs: !1
@@ -265,139 +265,213 @@ function y({
   "aria-expanded": t,
   children: n,
   className: s,
-  id: r,
+  id: c,
   leadingIcon: l,
   placeholder: p = "Select an option",
-  showValidity: u,
-  size: d = "medium",
-  style: m,
-  ...h
+  size: u = "medium",
+  style: d,
+  ...m
 }) {
   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__ */ f(zo, { className: s, "data-size": d, style: m, children: [
-      /* @__PURE__ */ f(
-        qo,
+    /* @__PURE__ */ C(qo, { className: s, "data-size": u, style: d, children: [
+      /* @__PURE__ */ C(
+        Ro,
         {
-          ...h,
+          ...m,
           "aria-autocomplete": "list",
           "aria-controls": e,
           "aria-expanded": t,
           "aria-haspopup": "dialog",
-          "data-placeholder-shown": !n || n === p,
-          "data-show-validity": !!u,
-          id: r,
+          "aria-placeholder": p,
+          id: c,
           role: "combobox",
           type: "button",
           children: [
-            l && /* @__PURE__ */ a(Ro, { children: l }),
-            /* @__PURE__ */ a(Wo, { children: n ?? p })
+            l && /* @__PURE__ */ a(Wo, { children: l }),
+            /* @__PURE__ */ a(_o, { "aria-hidden": !!!n, "data-placeholder": p, children: n })
           ]
         }
       ),
-      o && /* @__PURE__ */ a(_o, { children: o })
+      o && /* @__PURE__ */ a(Fo, { children: o })
     ] })
   );
 }
 y.ClearButton = yo;
-y.OpenPopupButton = $o;
-const q = B(null);
-function A() {
-  const o = w(q);
+y.OpenPopupButton = zo;
+const jo = /* @__PURE__ */ r("div")({
+  name: "ElComboboxCard",
+  class: "el-combobox-card",
+  propsAsIs: !1
+}), Uo = /* @__PURE__ */ r("button")({
+  name: "ElComboboxCardButton",
+  class: "el-combobox-card-button",
+  propsAsIs: !1
+}), Yo = /* @__PURE__ */ r("span")({
+  name: "ElComboboxCardActionContainer",
+  class: "el-combobox-card-action-container",
+  propsAsIs: !1
+});
+function Go({
+  action: o,
+  "aria-controls": e,
+  "aria-disabled": t = !0,
+  "aria-expanded": n,
+  children: s,
+  className: c,
+  id: l,
+  onClick: p,
+  size: u = "medium",
+  style: d,
+  ...m
+}) {
+  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__ */ a(
+        Uo,
+        {
+          ...m,
+          "aria-autocomplete": "list",
+          "aria-controls": e,
+          "aria-disabled": t,
+          "aria-expanded": n,
+          "aria-haspopup": "dialog",
+          id: l,
+          onClick: (h) => {
+            if (h.currentTarget.getAttribute("aria-disabled") === "true") {
+              h.stopPropagation(), h.preventDefault();
+              return;
+            }
+            p?.(h);
+          },
+          role: "combobox",
+          type: "button",
+          children: s
+        }
+      ),
+      o && /* @__PURE__ */ a(Yo, { children: o })
+    ] })
+  );
+}
+const Xo = /* @__PURE__ */ r("span")({
+  name: "ElComboboxCardDefaultContent",
+  class: "el-combobox-card-default-content",
+  propsAsIs: !1
+}), Jo = /* @__PURE__ */ r("span")({
+  name: "ElComboboxCardDefaultContentLabel",
+  class: "el-combobox-card-default-content-label",
+  propsAsIs: !1
+}), Ko = /* @__PURE__ */ r("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 })
+  ] });
+}
+Q.displayName = "Combobox.CardDefaultContent";
+const q = D(null);
+function L() {
+  const o = v(q);
   if (!o)
     throw new Error("useComboboxContext requires a Combobox ancestor");
   return o;
 }
-const Q = B([]);
-function T() {
-  return w(Q);
+const Z = D([]);
+function w() {
+  return v(Z);
 }
-const Fo = /* @__PURE__ */ c("div")({
+const Qo = /* @__PURE__ */ r("div")({
   name: "ElComboboxListbox",
   class: "el-combobox-listbox",
   propsAsIs: !1
-}), jo = /* @__PURE__ */ c("div")({
+}), Zo = /* @__PURE__ */ r("div")({
   name: "ElComboboxListboxPlaceholder",
   class: "el-combobox-listbox-placeholder",
   propsAsIs: !1
 });
-function Z({ children: o, size: e = "medium", ...t }) {
-  return xo() === "native" ? null : /* @__PURE__ */ a(jo, { ...t, "aria-live": "polite", "data-size": e, role: "status", children: o });
+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 });
 }
-Z.displayName = "Combobox.ListboxPlaceholder";
-const Uo = /* @__PURE__ */ c("div")({
+oo.displayName = "Combobox.ListboxPlaceholder";
+const oe = /* @__PURE__ */ r("div")({
   name: "ElComboboxOptgroup",
   class: "el-combobox-optgroup",
   propsAsIs: !1
-}), Yo = /* @__PURE__ */ c("div")({
+}), ee = /* @__PURE__ */ r("div")({
   name: "ElComboboxOptgroupLabelContainer",
   class: "el-combobox-optgroup-label-container",
   propsAsIs: !1
 });
-function Go({ "aria-label": o, children: e, label: t, ...n }) {
+function te({ "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__ */ f(Uo, { ...n, "aria-label": o, "aria-labelledby": o ? void 0 : s, role: "group", children: [
-      t && /* @__PURE__ */ a(Yo, { id: s, children: t }),
+    /* @__PURE__ */ C(oe, { ...n, "aria-label": o, "aria-labelledby": o ? void 0 : s, role: "group", children: [
+      t && /* @__PURE__ */ a(ee, { id: s, children: t }),
       e
     ] })
   );
 }
-function oo(o) {
-  return /* @__PURE__ */ a(x.Optgroup, { as: Go, ...o });
-}
-oo.displayName = "Combobox.Optgroup";
 function eo(o) {
+  return /* @__PURE__ */ a(x.Optgroup, { as: te, ...o });
+}
+eo.displayName = "Combobox.Optgroup";
+function to(o) {
   return "ariaLabelledByElements" in Element.prototype ? o.ariaLabelledByElements?.at(0)?.textContent ?? o.textContent : document.getElementById(o.getAttribute("aria-labelledby"))?.textContent ?? o.textContent;
 }
-const Xo = /* @__PURE__ */ c("button")({
+const ne = /* @__PURE__ */ r("button")({
   name: "ElComboboxOption",
   class: "el-combobox-option",
   propsAsIs: !1
-}), Jo = /* @__PURE__ */ c("span")({
+}), ae = /* @__PURE__ */ r("span")({
   name: "ElComboboxOptionCheckIconContainer",
   class: "el-combobox-option-check-icon-container",
   propsAsIs: !1
-}), Ko = /* @__PURE__ */ c("span")({
+}), se = /* @__PURE__ */ r("span")({
   name: "ElComboboxOptionLabel",
   class: "el-combobox-option-label",
   propsAsIs: !1
-}), to = /* @__PURE__ */ c("span")({
+}), no = /* @__PURE__ */ r("span")({
   name: "ElComboboxOptionTextContainer",
   class: "el-combobox-option-text-container",
   propsAsIs: !1
-}), no = /* @__PURE__ */ c("span")({
+}), ao = /* @__PURE__ */ r("span")({
   name: "ElComboboxOptionBadgeContainer",
   class: "el-combobox-option-badge-container",
   propsAsIs: !1
-}), Qo = /* @__PURE__ */ c("span")({
+}), ie = /* @__PURE__ */ r("span")({
   name: "ElComboboxOptionAdditionalInfoContainer",
   class: "el-combobox-option-additional-info-container",
   propsAsIs: !1
-}), Zo = /* @__PURE__ */ c("span")({
+}), le = /* @__PURE__ */ r("span")({
   name: "ElComboboxOptionAdditionalInfo",
   class: "el-combobox-option-additional-info",
   propsAsIs: !1
-}), oe = /* @__PURE__ */ c("span")({
+}), re = /* @__PURE__ */ r("span")({
   name: "ElComboboxOptionAdditionalInfoIconContainer",
   class: "el-combobox-option-additional-info-icon-container",
   propsAsIs: !1
 });
-function ao({ badge: o, children: e, icon: t, ...n }) {
-  return /* @__PURE__ */ f(Zo, { ...n, children: [
-    t && /* @__PURE__ */ a(oe, { children: t }),
-    /* @__PURE__ */ a(to, { children: e }),
-    o && /* @__PURE__ */ a(no, { children: o })
+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 })
   ] });
 }
-ao.displayName = "Combobox.OptionAdditionalInfo";
-function L({ badge: o, children: e, additionalInfo: t, size: n = "medium", ...s }) {
-  const r = S(), l = S(), p = S(), u = [o && r, t && p].filter((d) => !!d).join(" ") || void 0;
-  return /* @__PURE__ */ f(
-    Xo,
+so.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,
     {
       ...s,
       "aria-labelledby": l,
@@ -406,61 +480,62 @@ function L({ badge: o, children: e, additionalInfo: t, size: n = "medium", ...s
       role: "option",
       type: "button",
       children: [
-        /* @__PURE__ */ a(Jo, { "aria-hidden": !0, children: /* @__PURE__ */ a(So, {}) }),
-        /* @__PURE__ */ f(Ko, { children: [
-          /* @__PURE__ */ a(to, { id: l, children: e }),
-          o && /* @__PURE__ */ a(no, { id: r, children: o })
+        /* @__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 })
         ] }),
-        t && /* @__PURE__ */ a(Qo, { id: p, children: t })
+        t && /* @__PURE__ */ a(ie, { id: p, children: t })
       ]
     }
   );
 }
-L.getOptionLabel = eo;
-L.AdditionalInfo = ao;
-function I(o) {
-  const { size: e } = A();
-  return /* @__PURE__ */ a(x.Option, { as: L, ...o, size: e === "small" ? "medium" : e });
+P.getOptionLabel = to;
+P.AdditionalInfo = so;
+function O(o) {
+  const { size: e } = L();
+  return /* @__PURE__ */ a(x.Option, { as: P, ...o, size: e === "small" ? "medium" : e });
 }
-I.displayName = "Combobox.Option";
-I.getLabel = L.getOptionLabel;
-I.AdditionalInfo = L.AdditionalInfo;
+O.displayName = "Combobox.Option";
+O.getLabel = P.getOptionLabel;
+O.AdditionalInfo = P.AdditionalInfo;
 function b({ defaultValue: o, ...e }) {
-  const n = T().map((u) => u.value), { disabled: s, listboxId: r, multiple: l, required: p } = A();
+  const n = w().map((u) => u.value), { disabled: s, listboxId: c, multiple: l, required: p } = L();
   return /* @__PURE__ */ a(
     x,
     {
       ...e,
-      as: Fo,
+      as: Qo,
       "aria-disabled": s,
       "aria-multiselectable": l,
       "aria-orientation": "vertical",
       "aria-required": p,
       defaultValue: o ?? n,
-      id: r,
+      id: c,
       selectionFollowsFocus: !1
     }
   );
 }
 b.displayName = "Combobox.Listbox";
 b.Divider = x.Divider;
-b.Optgroup = oo;
-b.Option = I;
-b.OptionAdditionalInfo = I.AdditionalInfo;
-b.Placeholder = Z;
+b.Optgroup = eo;
+b.Option = O;
+b.OptionAdditionalInfo = O.AdditionalInfo;
+b.Placeholder = oo;
 b.clearValue = x.clearValue;
-b.getOptionLabel = I.getLabel;
+b.getOptionLabel = O.getLabel;
 b.getSelectedOptions = x.getSelectedOptions;
 b.getValue = x.getValue;
 b.setOptionSelectedState = x.setOptionSelectedState;
+b.useState = x.useState;
 function k(o) {
-  const { comboboxId: e, popupId: t } = A();
-  return /* @__PURE__ */ a(g, { ...o, "aria-labelledby": e, id: t, children: o.children });
+  const { comboboxId: e, popupId: t } = L();
+  return /* @__PURE__ */ a(I, { ...o, "aria-labelledby": e, id: t, children: o.children });
 }
 k.displayName = "Combobox.Popup";
-k.show = g.open;
-k.hide = g.close;
-function ee({
+k.show = I.open;
+k.hide = I.close;
+function ce({
   isXSBreakpoint: o,
   popupVariant: e
 }) {
@@ -473,52 +548,53 @@ function ee({
       return o ? "borderless" : "default";
   }
 }
-function so(o) {
-  const { variant: e } = K(), t = X(Oo("SM")), n = ee({ isXSBreakpoint: t, popupVariant: e });
-  return /* @__PURE__ */ a(go, { ...o, type: "text", variant: n });
+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 });
 }
-so.displayName = "Combobox.SearchInput";
+io.displayName = "Combobox.SearchInput";
 function R(o, e = []) {
-  const [t, n] = D(() => e);
-  return U(o, (s, r) => {
+  const [t, n] = V(() => e);
+  return U(o, (s, c) => {
     n((l) => {
-      const p = l.filter((d) => r.includes(d.value)), u = s.filter((d) => !l.some((m) => m.value === d.value)).map((d) => ({
-        label: eo(d),
+      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),
         value: d.value
       }));
       return [...p, ...u];
     });
   }), t;
 }
-function te({
-  defaultOptions: o,
-  listboxId: e
+function be({
+  children: o,
+  defaultOptions: e,
+  listboxId: t
 }) {
-  const t = T();
-  return R(e, o ?? t).at(0)?.label;
+  const n = w(), s = R(t, e ?? n);
+  return o?.(s) ?? s.at(0)?.label;
 }
-const io = B(null);
-function ne() {
-  const o = w(io);
+const lo = D(null);
+function pe() {
+  const o = v(lo);
   if (!o)
     throw new Error("useComboboxSelectionChipsContext requires a ComboboxSelectionChips ancestor");
   return o;
 }
-function lo({ children: o, value: e, ...t }) {
-  const n = ne();
+function ro({ children: o, value: e, ...t }) {
+  const n = pe();
   return /* @__PURE__ */ a(
     J.Item,
     {
       ...t,
       "aria-controls": n.listboxId,
       "aria-label": `Remove ${o}`,
-      onClick: () => Co(n.listboxId, e, () => !1),
+      onClick: () => fo(n.listboxId, e, () => !1),
       value: e,
       children: o
     }
   );
 }
-const ae = "el-combobox-selection-chips";
+const ue = "el-combobox-selection-chips";
 function W({
   children: o,
   className: e,
@@ -526,23 +602,23 @@ function W({
   listboxId: n,
   ...s
 }) {
-  const r = T(), l = R(n, t ?? r), p = o?.(l) ?? l.map((u) => /* @__PURE__ */ a(lo, { value: u.value, children: u.label }, u.value));
-  return l.length > 0 && /* @__PURE__ */ a(J, { ...s, className: G(ae, e), variant: "selection", children: /* @__PURE__ */ a(io.Provider, { value: { listboxId: n }, children: p }) });
+  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 }) });
 }
-W.Item = lo;
-const se = /* @__PURE__ */ c("div")({
+W.Item = ro;
+const de = /* @__PURE__ */ r("div")({
   name: "ElCombobox",
   class: "el-combobox",
   propsAsIs: !1
 });
-function ro(o) {
+function co(o) {
   return `${o}-listbox`;
 }
-function co(o) {
+function bo(o) {
   return `${o}-popup`;
 }
-function ie({ onClick: o } = {}) {
-  const { ariaDescribedBy: e, ariaErrorMessage: t, ariaInvalid: n, comboboxId: s, disabled: r, popupId: l, required: p } = A(), u = Ho(l);
+function me({ onClick: o } = {}) {
+  const { ariaDescribedBy: e, ariaErrorMessage: t, ariaInvalid: n, comboboxId: s, disabled: c, popupId: l, required: p } = L(), u = $o(l);
   return {
     "aria-controls": l,
     "aria-describedby": e,
@@ -552,38 +628,36 @@ function ie({ onClick: o } = {}) {
     // 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,
-    disabled: r,
+    disabled: c,
     id: s,
     onClick: (m) => {
       o?.(m), z(l);
-    }
+    },
+    role: "combobox"
   };
 }
-function le(o) {
-  const [e, t] = D(!1);
+function Ce(o) {
+  const [e, t] = V(!1);
   return U(o, (n, s) => {
     t(s.length > 0);
   }), e;
 }
-function re(o) {
-  return D(o);
-}
 function i({
   "aria-describedby": o,
   "aria-errormessage": e,
   "aria-invalid": t,
   children: n,
   disabled: s = !1,
-  id: r,
+  id: c,
   maxWidth: l,
   multiple: p = !1,
   required: u = !1,
   showValidity: d = !1,
   size: m = "medium",
-  style: h,
-  ...P
+  style: g,
+  ...h
 }) {
-  const C = S(), O = r ?? C, v = ro(O), M = co(O);
+  const f = S(), A = c ?? f, B = co(A), T = bo(A);
   return /* @__PURE__ */ a(
     q.Provider,
     {
@@ -591,23 +665,25 @@ function i({
         ariaDescribedBy: o,
         ariaErrorMessage: e,
         ariaInvalid: t,
-        comboboxId: O,
+        comboboxId: A,
         disabled: s,
-        listboxId: v,
+        listboxId: B,
         multiple: p,
-        popupId: M,
+        popupId: T,
         required: u,
         size: m
       },
-      children: /* @__PURE__ */ a(se, { ...P, "data-show-validity": d, style: { "--combobox-max-width": l, ...h }, children: n })
+      children: /* @__PURE__ */ a(de, { ...h, "data-show-validity": d, style: { "--combobox-max-width": l, ...g }, children: n })
     }
   );
 }
 i.getOptionLabel = b.getOptionLabel;
 i.getListboxValue = x.getValue;
-i.getListboxId = ro;
-i.getPopupId = co;
+i.getListboxId = co;
+i.getPopupId = bo;
 i.Button = y;
+i.Card = Go;
+i.CardDefaultContent = Q;
 i.ClearButton = y.ClearButton;
 i.Divider = b.Divider;
 i.Listbox = b;
@@ -617,74 +693,81 @@ i.Optgroup = b.Optgroup;
 i.Option = b.Option;
 i.OptionAdditionalInfo = b.OptionAdditionalInfo;
 i.Popup = k;
-i.SearchInput = so;
-i.SelectedContent = te;
+i.SearchInput = io;
+i.SelectedContent = be;
 i.SelectionChips = W;
 i.SelectionChipsItem = W.Item;
 i.Context = q;
-i.DefaultOptionsContext = Q;
-i.useButton = ie;
-i.useContext = A;
-i.useDefaultOptionsContext = T;
-i.useHasSelection = le;
+i.DefaultOptionsContext = Z;
+i.useButton = me;
+i.useContext = L;
+i.useDefaultOptionsContext = w;
+i.useHasSelection = Ce;
 i.useSelectedOptions = R;
-i.useState = re;
+i.useState = b.useState;
 export {
-  ie as $,
-  Ko as A,
-  to as B,
+  Vo as $,
+  te as A,
+  oe as B,
   y as C,
-  no as D,
-  zo as E,
-  Qo as F,
-  Zo as G,
-  oe as H,
-  N as I,
-  Ao as J,
-  Lo as K,
-  Po as L,
-  Bo as M,
-  V as N,
-  $ as O,
-  K as P,
-  z as Q,
-  j as R,
-  Mo as S,
-  No as T,
-  g as U,
-  Do as V,
-  To as W,
-  ko as X,
-  Vo as Y,
-  Ho as Z,
-  se as _,
+  ee as D,
+  qo as E,
+  to 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,
-  le as a0,
-  R as a1,
-  re as a2,
-  $o as b,
-  qo as c,
-  Ro as d,
-  Wo as e,
-  _o as f,
-  i as g,
-  k as h,
-  q as i,
-  ro as j,
-  co as k,
-  b as l,
-  Z as m,
-  oo as n,
-  I as o,
-  Fo as p,
-  jo as q,
-  Go as r,
-  Uo as s,
-  Yo as t,
-  A as u,
-  eo as v,
-  L as w,
-  ao as x,
-  Xo as y,
-  Jo as z
+  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,
+  i as o,
+  k as p,
+  q,
+  co as r,
+  bo as s,
+  b as t,
+  L as u,
+  oo as v,
+  eo as w,
+  O as x,
+  Qo as y,
+  Zo as z
 };