@versaur/react 1.0.14 → 1.0.15

package/dist/{drawer-DRv9k7lp.js → drawer-BjNHPqBr.js}

@@ -3,9 +3,9 @@ import { drawerStyles as L } from "@versaur/core/blocks";
 import { overlayPartsStyles as i } from "@versaur/core/utils";
 import { XIcon as j } from "@versaur/icons";
 import F, { useRef as H, useEffect as n, useCallback as A, createContext as I, forwardRef as u, useContext as P } from "react";
-import { u as S, B as M } from "./helpers-DTL6qrTe.js";
+import { u as S, B as M } from "./helpers-D23F5WBX.js";
 import { c as D } from "./cx-B9vmfsc1.js";
-import { O as X, c as q, a as z } from "./overlay-parts-CFeD8VN0.js";
+import { O as X, a as q, b as z } from "./overlay-parts-BtD-Qj_k.js";
 const y = F.forwardRef(
   ({ isOpen: e, onOpenChange: t, children: a, onClick: s, ...d }, l) => {
     const m = H(null), c = l || m;

package/dist/forms.js

@@ -1,25 +1,25 @@
-import { jsx as s, jsxs as g } from "react/jsx-runtime";
-import { labelStyles as Oe, helperTextStyles as Se, errorTextStyles as ke, textInputStyles as G, textAreaStyles as K, selectStyles as _, radioStyles as T, checkboxStyles as j, radioGroupStyles as X, checkboxGroupStyles as J, chipInputStyles as M, comboboxInputStyles as v } from "@versaur/core/forms";
-import { forwardRef as f, useId as A, createContext as P, useContext as Q, useState as D, useEffect as $, useCallback as L, useRef as Be } from "react";
-import { u as N, c as Re } from "./helpers-DTL6qrTe.js";
-import { c as y } from "./cx-B9vmfsc1.js";
-import { ChevronDownIcon as Ae, CheckIcon as Ge, XIcon as De } from "@versaur/icons";
-import { D as U } from "./drawer-DRv9k7lp.js";
+import { jsx as s, jsxs as y } from "react/jsx-runtime";
+import { labelStyles as Se, helperTextStyles as ke, errorTextStyles as Be, textInputStyles as D, textAreaStyles as K, selectStyles as _, radioStyles as j, checkboxStyles as L, radioGroupStyles as J, checkboxGroupStyles as U, chipInputStyles as M, comboboxInputStyles as v } from "@versaur/core/forms";
+import { forwardRef as f, useId as A, createContext as Q, useContext as F, useState as $, useEffect as E, useCallback as P, useRef as Re } from "react";
+import { u as N, c as Ae, F as Ge } from "./helpers-D23F5WBX.js";
+import { c as g } from "./cx-B9vmfsc1.js";
+import { ChevronDownIcon as De, CheckIcon as $e } from "@versaur/icons";
+import { D as W } from "./drawer-BjNHPqBr.js";
 const k = f(
   ({ required: e = !1, disabled: c = !1, children: i, className: a, ...n }, t) => {
     const o = N({
       disabled: c,
       required: e
     });
-    return /* @__PURE__ */ s("label", { ref: t, className: y(Oe.label, a), ...o, ...n, children: i });
+    return /* @__PURE__ */ s("label", { ref: t, className: g(Se.label, a), ...o, ...n, children: i });
   }
 );
 k.displayName = "Label";
-const B = f(({ children: e, className: c, ...i }, a) => /* @__PURE__ */ s("p", { ref: a, className: y(Se.helper, c), ...i, children: e }));
+const B = f(({ children: e, className: c, ...i }, a) => /* @__PURE__ */ s("p", { ref: a, className: g(ke.helper, c), ...i, children: e }));
 B.displayName = "HelperText";
-const R = f(({ children: e, className: c, ...i }, a) => /* @__PURE__ */ s("p", { ref: a, className: y(ke.error, c), role: "alert", "aria-live": "polite", ...i, children: e }));
+const R = f(({ children: e, className: c, ...i }, a) => /* @__PURE__ */ s("p", { ref: a, className: g(Be.error, c), role: "alert", "aria-live": "polite", ...i, children: e }));
 R.displayName = "ErrorText";
-const $e = f(
+const Ee = f(
   ({
     label: e,
     helper: c,
@@ -40,17 +40,17 @@ const $e = f(
       invalid: !!i,
       readOnly: t
     });
-    return /* @__PURE__ */ g("div", { className: y(G.field, d), children: [
+    return /* @__PURE__ */ y("div", { className: g(D.field, d), children: [
       e && /* @__PURE__ */ s(k, { htmlFor: m, required: a, disabled: n, children: e }),
-      /* @__PURE__ */ g("div", { className: G.wrapper, ...I, children: [
-        o && /* @__PURE__ */ s("span", { className: G["left-icon"], children: o }),
+      /* @__PURE__ */ y("div", { className: D.wrapper, ...I, children: [
+        o && /* @__PURE__ */ s("span", { className: D["left-icon"], children: o }),
         /* @__PURE__ */ s(
           "input",
           {
             ref: h,
             id: m,
             type: "text",
-            className: G.input,
+            className: D.input,
             disabled: n,
             readOnly: t,
             required: a,
@@ -60,15 +60,15 @@ const $e = f(
             ...u
           }
         ),
-        r && /* @__PURE__ */ s("span", { className: G["right-icon"], children: r })
+        r && /* @__PURE__ */ s("span", { className: D["right-icon"], children: r })
       ] }),
       i && /* @__PURE__ */ s(R, { id: x, children: i }),
       !i && c && /* @__PURE__ */ s(B, { id: p, children: c })
     ] });
   }
 );
-$e.displayName = "TextInput";
-const Ee = f(
+Ee.displayName = "TextInput";
+const Te = f(
   ({
     label: e,
     helper: c,
@@ -94,7 +94,7 @@ const Ee = f(
       "--_min-rows-count": r,
       ...l && { "--_max-rows-count": l }
     };
-    return /* @__PURE__ */ g("div", { className: y(K.field, u), children: [
+    return /* @__PURE__ */ y("div", { className: g(K.field, u), children: [
       e && /* @__PURE__ */ s(k, { htmlFor: p, required: a, disabled: n, children: e }),
       /* @__PURE__ */ s(
         "textarea",
@@ -118,9 +118,9 @@ const Ee = f(
     ] });
   }
 );
-Ee.displayName = "TextArea";
-const W = f(({ children: e, ...c }, i) => /* @__PURE__ */ s("option", { ref: i, ...c, children: e }));
-W.displayName = "Select.Option";
+Te.displayName = "TextArea";
+const X = f(({ children: e, ...c }, i) => /* @__PURE__ */ s("option", { ref: i, ...c, children: e }));
+X.displayName = "Select.Option";
 const Y = f(
   ({ label: e, children: c, ...i }, a) => /* @__PURE__ */ s("optgroup", { ref: a, label: e, ...i, children: c })
 );
@@ -142,9 +142,9 @@ const Z = f(
       disabled: n,
       invalid: !!i
     });
-    return /* @__PURE__ */ g("div", { className: y(_.field, l), children: [
+    return /* @__PURE__ */ y("div", { className: g(_.field, l), children: [
       e && /* @__PURE__ */ s(k, { htmlFor: b, required: a, disabled: n, children: e }),
-      /* @__PURE__ */ g(
+      /* @__PURE__ */ y(
         "select",
         {
           ref: u,
@@ -170,17 +170,17 @@ const Z = f(
 );
 Z.displayName = "Select";
 const q = Z;
-q.Option = W;
+q.Option = X;
 q.OptionGroup = Y;
 const ee = f(
   ({ disabled: e = !1, children: c, className: i, ...a }, n) => {
     const t = N({
       disabled: e
     });
-    return /* @__PURE__ */ g("label", { className: y(T.radio, i), ...t, children: [
-      /* @__PURE__ */ s("input", { ref: n, type: "radio", className: T.input, disabled: e, ...a }),
-      /* @__PURE__ */ s("span", { className: T.indicator }),
-      c && /* @__PURE__ */ s("span", { className: T.label, children: c })
+    return /* @__PURE__ */ y("label", { className: g(j.radio, i), ...t, children: [
+      /* @__PURE__ */ s("input", { ref: n, type: "radio", className: j.input, disabled: e, ...a }),
+      /* @__PURE__ */ s("span", { className: j.indicator }),
+      c && /* @__PURE__ */ s("span", { className: j.label, children: c })
     ] });
   }
 );
@@ -191,28 +191,28 @@ const te = f(
       disabled: e,
       required: c
     });
-    return /* @__PURE__ */ g("label", { className: y(j.checkbox, a), ...o, children: [
+    return /* @__PURE__ */ y("label", { className: g(L.checkbox, a), ...o, children: [
       /* @__PURE__ */ s(
         "input",
         {
           ref: t,
           type: "checkbox",
-          className: j.input,
+          className: L.input,
           disabled: e,
           required: c,
           "aria-required": c || void 0,
           ...n
         }
       ),
-      /* @__PURE__ */ s("span", { className: j.indicator }),
-      i && /* @__PURE__ */ s("span", { className: j.label, "data-required": c || void 0, children: i })
+      /* @__PURE__ */ s("span", { className: L.indicator }),
+      i && /* @__PURE__ */ s("span", { className: L.label, "data-required": c || void 0, children: i })
     ] });
   }
 );
 te.displayName = "Checkbox";
-const oe = P(void 0);
-function Te() {
-  const e = Q(oe);
+const oe = Q(void 0);
+function je() {
+  const e = F(oe);
   if (!e)
     throw new Error("RadioGroup.Option must be used within RadioGroup");
   return e;
@@ -237,12 +237,12 @@ const ne = f(
     }, O = N({
       disabled: r
     });
-    return /* @__PURE__ */ g("div", { ref: b, className: y(X.field, u), ...O, ...h, children: [
+    return /* @__PURE__ */ y("div", { ref: b, className: g(J.field, u), ...O, ...h, children: [
       a && /* @__PURE__ */ s(k, { required: o, disabled: r, children: a }),
       /* @__PURE__ */ s(oe.Provider, { value: { disabled: r, name: i, onChange: w, value: e }, children: /* @__PURE__ */ s(
         "div",
         {
-          className: X.options,
+          className: J.options,
           "data-direction": l,
           role: "radiogroup",
           "aria-describedby": I || void 0,
@@ -258,7 +258,7 @@ const ne = f(
 ne.displayName = "RadioGroup";
 const ie = f(
   ({ value: e, children: c, disabled: i, ...a }, n) => {
-    const t = Te(), o = t.value === e, r = t.disabled || i, l = () => {
+    const t = je(), o = t.value === e, r = t.disabled || i, l = () => {
       r || t.onChange(e);
     };
     return /* @__PURE__ */ s(
@@ -277,11 +277,11 @@ const ie = f(
   }
 );
 ie.displayName = "RadioGroup.Option";
-const Xe = Object.assign(ne, {
+const Ue = Object.assign(ne, {
   Option: ie
-}), se = P(void 0);
-function je() {
-  const e = Q(se);
+}), se = Q(void 0);
+function Le() {
+  const e = F(se);
   if (!e)
     throw new Error("CheckboxGroup.Option must be used within CheckboxGroup");
   return e;
@@ -306,12 +306,12 @@ const ae = f(
     }, O = N({
       disabled: r
     });
-    return /* @__PURE__ */ g("div", { ref: b, className: y(J.field, u), ...O, ...h, children: [
+    return /* @__PURE__ */ y("div", { ref: b, className: g(U.field, u), ...O, ...h, children: [
       a && /* @__PURE__ */ s(k, { required: o, disabled: r, children: a }),
       /* @__PURE__ */ s(se.Provider, { value: { disabled: r, name: i, onChange: w, value: e }, children: /* @__PURE__ */ s(
         "div",
         {
-          className: J.options,
+          className: U.options,
           "data-direction": l,
           role: "group",
           "aria-describedby": I || void 0,
@@ -327,7 +327,7 @@ const ae = f(
 ae.displayName = "CheckboxGroup";
 const ce = f(
   ({ value: e, children: c, disabled: i, ...a }, n) => {
-    const t = je(), o = t.value.includes(e), r = t.disabled || i, l = () => {
+    const t = Le(), o = t.value.includes(e), r = t.disabled || i, l = () => {
       if (!r) {
         const d = o ? t.value.filter((u) => u !== e) : [...t.value, e];
         t.onChange(d);
@@ -349,11 +349,11 @@ const ce = f(
   }
 );
 ce.displayName = "CheckboxGroup.Option";
-const Je = Object.assign(ae, {
+const We = Object.assign(ae, {
   Option: ce
-}), re = P(void 0);
-function Le() {
-  const e = Q(re);
+}), re = Q(void 0);
+function Pe() {
+  const e = F(re);
   if (!e)
     throw new Error("ChipInput.Option must be used within ChipInput");
   return e;
@@ -377,10 +377,10 @@ const le = f(
   }, p) => {
     const x = A(), C = m.id || x, I = t ? `${C}-helper` : void 0, w = o ? `${C}-error` : void 0, O = [I, w].filter(Boolean).join(" "), S = (z) => {
       l || c(z);
-    }, V = N({
+    }, G = N({
       invalid: !!o
-    }), F = i ? "group" : "radiogroup";
-    return /* @__PURE__ */ g("div", { ref: p, className: y(M.field, b), ...V, ...m, children: [
+    }), V = i ? "group" : "radiogroup";
+    return /* @__PURE__ */ y("div", { ref: p, className: g(M.field, b), ...G, ...m, children: [
       n && /* @__PURE__ */ s(k, { required: r, disabled: l, children: n }),
       /* @__PURE__ */ s(
         re.Provider,
@@ -398,7 +398,7 @@ const le = f(
               className: M.options,
               "data-gap": d,
               "data-wrap": u,
-              role: F,
+              role: V,
               "aria-describedby": O || void 0,
               "aria-invalid": o ? "true" : void 0,
               children: h
@@ -414,7 +414,7 @@ const le = f(
 le.displayName = "ChipInput";
 const de = f(
   ({ value: e, children: c, disabled: i, iconLeft: a, iconRight: n, ...t }, o) => {
-    const r = Le(), l = r.disabled || i, d = !!(a || n);
+    const r = Pe(), l = r.disabled || i, d = !!(a || n);
     let u = !1;
     r.multiple ? u = Array.isArray(r.value) && r.value.includes(e) : u = r.value === e;
     const h = () => {
@@ -429,7 +429,7 @@ const de = f(
       selected: u,
       ...d && { "has-icon": !0 }
     });
-    return /* @__PURE__ */ g(
+    return /* @__PURE__ */ y(
       "button",
       {
         ref: o,
@@ -450,19 +450,19 @@ const de = f(
   }
 );
 de.displayName = "ChipInput.Option";
-const Ue = Object.assign(le, {
+const Xe = Object.assign(le, {
   Option: de
-}), pe = P(void 0);
-function E() {
-  const e = Q(pe);
+}), pe = Q(void 0);
+function T() {
+  const e = F(pe);
   if (!e)
     throw new Error("ComboboxInput subcomponents must be used within ComboboxInput");
   return e;
 }
 const ue = f(
   ({ children: e, className: c, ...i }, a) => {
-    const n = E();
-    return /* @__PURE__ */ s(U, { open: n.isOpen, onOpenChange: (t) => !t && n.closeListbox(), placement: "right", children: /* @__PURE__ */ s(U.Body, { children: /* @__PURE__ */ g("div", { className: v["drawer-container"], children: [
+    const n = T();
+    return /* @__PURE__ */ s(W, { open: n.isOpen, onOpenChange: (t) => !t && n.closeListbox(), placement: "right", children: /* @__PURE__ */ s(W.Body, { children: /* @__PURE__ */ y("div", { className: v["drawer-container"], children: [
       /* @__PURE__ */ s("div", { className: v["drawer-input-wrapper"], children: /* @__PURE__ */ s(
         "input",
         {
@@ -483,7 +483,7 @@ const ue = f(
           ref: a,
           role: "listbox",
           "aria-multiselectable": "true",
-          className: y(v["drawer-listbox"], c),
+          className: g(v["drawer-listbox"], c),
           ...i,
           children: e
         }
@@ -492,21 +492,21 @@ const ue = f(
   }
 );
 ue.displayName = "ComboboxInput.Drawer";
-function Pe(e) {
-  const [c, i] = D(e), [a, n] = D(!1), [t, o] = D(() => /* @__PURE__ */ new Map());
-  $(() => {
+function Qe(e) {
+  const [c, i] = $(e), [a, n] = $(!1), [t, o] = $(() => /* @__PURE__ */ new Map());
+  E(() => {
     i(e);
   }, [e]);
-  const r = L(() => {
+  const r = P(() => {
     n((h) => !h);
-  }, []), l = L(() => {
+  }, []), l = P(() => {
     n(!1);
-  }, []), d = L((h, b) => {
+  }, []), d = P((h, b) => {
     o((m) => {
       const p = new Map(m);
       return p.set(h, b), p;
     });
-  }, []), u = L((h) => {
+  }, []), u = P((h) => {
     o((b) => {
       const m = new Map(b);
       return m.delete(h), m;
@@ -523,9 +523,9 @@ function Pe(e) {
     unregisterOption: u
   };
 }
-function Qe(e, c) {
-  const [i, a] = D("bottom"), n = Be(null);
-  return $(() => {
+function Fe(e, c) {
+  const [i, a] = $("bottom"), n = Re(null);
+  return E(() => {
     if (c !== "popup" || !e) return;
     const t = n.current;
     if (!t) return;
@@ -535,7 +535,7 @@ function Qe(e, c) {
       const l = r.getBoundingClientRect(), d = t.getBoundingClientRect(), u = {
         width: d.width,
         height: d.height
-      }, h = Re(
+      }, h = Ae(
         l,
         u,
         100,
@@ -547,8 +547,8 @@ function Qe(e, c) {
 }
 const he = f(
   ({ children: e, className: c, ...i }, a) => {
-    const n = E(), { internalRef: t, placement: o } = Qe(n.isOpen, n.variant);
-    $(() => {
+    const n = T(), { internalRef: t, placement: o } = Fe(n.isOpen, n.variant);
+    E(() => {
       const l = t.current;
       if (!l) return;
       const d = () => {
@@ -565,14 +565,14 @@ const he = f(
         },
         role: "listbox",
         "aria-multiselectable": "true",
-        className: y(v.listbox, c),
+        className: g(v.listbox, c),
         popover: "auto",
         ...r,
         style: {
           positionAnchor: n.anchorName
         },
         ...i,
-        children: /* @__PURE__ */ g("div", { className: v["listbox-inner"], children: [
+        children: /* @__PURE__ */ y("div", { className: v["listbox-inner"], children: [
           /* @__PURE__ */ s("div", { className: v["drawer-input-wrapper"], children: /* @__PURE__ */ s(
             "input",
             {
@@ -609,57 +609,58 @@ const me = f(
     className: u,
     ...h
   }, b) => {
-    const m = A(), p = h.id || m, x = o ? `${p}-helper` : void 0, C = r ? `${p}-error` : void 0, I = [x, C].filter(Boolean).join(" "), w = `--combobox-anchor-${p.replace(/[^a-z0-9-]/gi, "")}`, {
-      internalValue: O,
-      setInternalValue: S,
+    const m = A(), p = h.id || m, x = `${p}-button`, C = o ? `${p}-helper` : void 0, I = r ? `${p}-error` : void 0, w = [C, I].filter(Boolean).join(" "), O = `--combobox-anchor-${p.replace(/[^a-z0-9-]/gi, "")}`, {
+      internalValue: S,
+      setInternalValue: G,
       isOpen: V,
-      toggleOpen: F,
-      closeListbox: z,
+      toggleOpen: z,
+      closeListbox: Ce,
       optionRegistry: ve,
-      registerOption: Ce,
-      unregisterOption: ge
-    } = Pe(e), [ye, Ne] = D("");
-    $(() => {
-      S(e);
-    }, [e, S]);
-    const Ie = (H) => {
-      a || (S(H), c(H));
-    }, we = N({
+      registerOption: ge,
+      unregisterOption: ye
+    } = Qe(e), [Ne, Ie] = $("");
+    E(() => {
+      G(e);
+    }, [e, G]);
+    const we = (H) => {
+      a || (G(H), c(H));
+    }, Oe = N({
       invalid: !!(r || n),
       disabled: a
     });
-    return /* @__PURE__ */ g("div", { ref: b, className: y(v.field, u), ...we, ...h, children: [
-      t && /* @__PURE__ */ s(k, { required: l, disabled: a, children: t }),
+    return /* @__PURE__ */ y("div", { ref: b, className: g(v.field, u), ...Oe, ...h, children: [
+      t && /* @__PURE__ */ s(k, { required: l, disabled: a, htmlFor: x, children: t }),
       /* @__PURE__ */ s(
         pe.Provider,
         {
           value: {
-            value: O,
-            onChange: Ie,
+            value: S,
+            onChange: we,
             isOpen: V,
-            toggleOpen: F,
-            closeListbox: z,
+            toggleOpen: z,
+            closeListbox: Ce,
             variant: i,
-            anchorName: w,
+            anchorName: O,
+            buttonId: x,
             optionRegistry: ve,
-            registerOption: Ce,
-            unregisterOption: ge,
+            registerOption: ge,
+            unregisterOption: ye,
             disabled: a,
-            searchQuery: ye,
-            setSearchQuery: Ne
+            searchQuery: Ne,
+            setSearchQuery: Ie
           },
-          children: /* @__PURE__ */ s("div", { className: v.root, "aria-describedby": I || void 0, children: d })
+          children: /* @__PURE__ */ s("div", { className: v.root, "aria-describedby": w || void 0, children: d })
         }
       ),
-      r && /* @__PURE__ */ s(R, { id: C, children: r }),
-      !r && o && /* @__PURE__ */ s(B, { id: x, children: o })
+      r && /* @__PURE__ */ s(R, { id: I, children: r }),
+      !r && o && S.length === 0 && /* @__PURE__ */ s(B, { id: C, children: o })
     ] });
   }
 );
 me.displayName = "ComboboxInput";
 const be = f(
   ({ children: e, className: c, iconLeft: i, iconRight: a, ...n }, t) => {
-    const o = E(), r = o.value.length === 0, l = N({
+    const o = T(), r = o.value.length === 0, l = N({
       open: o.isOpen,
       disabled: o.disabled,
       "has-left-icon": !!i,
@@ -667,12 +668,13 @@ const be = f(
     }), d = {
       anchorName: o.anchorName
     }, u = e || (r ? "Select" : `${o.value.length} selected`);
-    return /* @__PURE__ */ g(
+    return /* @__PURE__ */ y(
       "button",
       {
         ref: t,
+        id: o.buttonId,
         type: "button",
-        className: y(v.button, c),
+        className: g(v.button, c),
         onClick: () => !o.disabled && o.toggleOpen(),
         disabled: o.disabled,
         "aria-expanded": o.isOpen,
@@ -683,7 +685,7 @@ const be = f(
         children: [
           i && /* @__PURE__ */ s("span", { className: v["left-icon"], children: i }),
           /* @__PURE__ */ s("span", { className: v["button-content"], ...r && { "data-placeholder": "" }, children: u }),
-          a ? /* @__PURE__ */ s("span", { className: v["right-icon"], children: a }) : /* @__PURE__ */ s("span", { className: v["right-icon"], "data-chevron": !0, children: /* @__PURE__ */ s(Ae, {}) })
+          a ? /* @__PURE__ */ s("span", { className: v["right-icon"], children: a }) : /* @__PURE__ */ s("span", { className: v["right-icon"], "data-chevron": !0, children: /* @__PURE__ */ s(De, {}) })
         ]
       }
     );
@@ -692,21 +694,21 @@ const be = f(
 be.displayName = "ComboboxInput.Button";
 const xe = f(
   ({ value: e, children: c, disabled: i = !1, className: a, ...n }, t) => {
-    const o = E(), r = o.disabled || i, l = o.value.includes(e), d = typeof c == "string" ? c : String(e), u = !o.searchQuery || d.toLowerCase().includes(o.searchQuery.toLowerCase()) || e.toLowerCase().includes(o.searchQuery.toLowerCase());
-    $(() => (o.registerOption(e, d), () => o.unregisterOption(e)), [e, d, o.registerOption, o.unregisterOption]);
+    const o = T(), r = o.disabled || i, l = o.value.includes(e), d = typeof c == "string" ? c : String(e), u = !o.searchQuery || d.toLowerCase().includes(o.searchQuery.toLowerCase()) || e.toLowerCase().includes(o.searchQuery.toLowerCase());
+    E(() => (o.registerOption(e, d), () => o.unregisterOption(e)), [e, d, o.registerOption, o.unregisterOption]);
     const h = () => {
       if (r) return;
       const p = l ? o.value.filter((x) => x !== e) : [...o.value, e];
       o.onChange(p);
     }, b = (p) => {
       (p.key === "Enter" || p.key === " ") && (p.preventDefault(), h());
-    }, m = N({ selected: l, disabled: r });
-    return u ? /* @__PURE__ */ g(
+    }, m = N({ active: l, disabled: r });
+    return u ? /* @__PURE__ */ y(
       "li",
       {
         ref: t,
         role: "option",
-        className: y(v.option, a),
+        className: g(v.option, a),
         onClick: h,
         onKeyDown: b,
         "aria-selected": l,
@@ -714,7 +716,7 @@ const xe = f(
         ...m,
         ...n,
         children: [
-          /* @__PURE__ */ s("span", { className: v["option-check"], children: /* @__PURE__ */ s(Ge, { width: "1em", height: "1em" }) }),
+          /* @__PURE__ */ s("span", { className: v["option-check"], children: /* @__PURE__ */ s($e, { width: "1em", height: "1em" }) }),
           /* @__PURE__ */ s("span", { children: c })
         ]
       }
@@ -724,32 +726,27 @@ const xe = f(
 xe.displayName = "ComboboxInput.Option";
 const fe = f(
   ({ className: e, ...c }, i) => {
-    const a = E();
+    const a = T();
     if (a.value.length === 0) return null;
     const n = (t) => {
       a.onChange(a.value.filter((o) => o !== t));
     };
-    return /* @__PURE__ */ s("div", { ref: i, className: y(v.chips, e), role: "group", ...c, children: a.value.map((t) => {
+    return /* @__PURE__ */ s("div", { ref: i, className: g(v.chips, e), role: "group", ...c, children: a.value.map((t) => {
       const o = a.optionRegistry.get(t) ?? t;
-      return /* @__PURE__ */ g("div", { className: v.chip, ...N({ disabled: a.disabled }), children: [
-        /* @__PURE__ */ s("span", { children: o }),
-        /* @__PURE__ */ s(
-          "button",
-          {
-            type: "button",
-            className: v["chip-remove"],
-            onClick: () => n(t),
-            disabled: a.disabled,
-            "aria-label": `Remove ${o}`,
-            children: /* @__PURE__ */ s(De, { width: "1em", height: "1em" })
-          }
-        )
-      ] }, t);
+      return /* @__PURE__ */ s(
+        Ge,
+        {
+          disabled: a.disabled,
+          onClick: () => n(t),
+          children: o
+        },
+        t
+      );
     }) });
   }
 );
 fe.displayName = "ComboboxInput.SelectionChips";
-const We = Object.assign(me, {
+const Ye = Object.assign(me, {
   Button: be,
   Listbox: he,
   Drawer: ue,
@@ -758,15 +755,15 @@ const We = Object.assign(me, {
 });
 export {
   te as Checkbox,
-  Je as CheckboxGroup,
-  Ue as ChipInput,
-  We as ComboboxInput,
+  We as CheckboxGroup,
+  Xe as ChipInput,
+  Ye as ComboboxInput,
   R as ErrorText,
   B as HelperText,
   k as Label,
   ee as Radio,
-  Xe as RadioGroup,
+  Ue as RadioGroup,
   q as Select,
-  Ee as TextArea,
-  $e as TextInput
+  Te as TextArea,
+  Ee as TextInput
 };