@versaur/react 1.0.7 → 1.0.8

package/dist/forms.js

@@ -1,578 +1,475 @@
-import { jsx as n, jsxs as I } from "react/jsx-runtime";
-import { labelStyles as ae, helperTextStyles as se, errorTextStyles as de, textInputStyles as $, textAreaStyles as P, selectStyles as H, radioStyles as M, checkboxStyles as T, radioGroupStyles as A, checkboxGroupStyles as j, chipSingleInputStyles as F, chipMultipleInputStyles as L } from "@versaur/core/forms";
-import { forwardRef as b, useId as O, createContext as E, useContext as D } from "react";
-import { u as y } from "./use-data-attrs-iPFyfiKN.js";
-import { c as x } from "./cx-B9vmfsc1.js";
-const k = b(
-  ({ required: e = !1, disabled: o = !1, children: t, className: s, ...a }, i) => {
-    const c = y({
-      disabled: o,
+import { jsx as i, jsxs as C } from "react/jsx-runtime";
+import { labelStyles as ie, helperTextStyles as ae, errorTextStyles as se, textInputStyles as w, textAreaStyles as D, selectStyles as F, radioStyles as R, checkboxStyles as $, radioGroupStyles as P, checkboxGroupStyles as V, chipInputStyles as j } from "@versaur/core/forms";
+import { forwardRef as v, useId as S, createContext as T, useContext as E } from "react";
+import { u as I } from "./use-data-attrs-iPFyfiKN.js";
+import { c as b } from "./cx-B9vmfsc1.js";
+const k = v(
+  ({ required: e = !1, disabled: n = !1, children: t, className: d, ...a }, o) => {
+    const c = I({
+      disabled: n,
       required: e
     });
-    return /* @__PURE__ */ n("label", { ref: i, className: x(ae.label, s), ...c, ...a, children: t });
+    return /* @__PURE__ */ i("label", { ref: o, className: b(ie.label, d), ...c, ...a, children: t });
   }
 );
 k.displayName = "Label";
-const B = b(({ children: e, className: o, ...t }, s) => /* @__PURE__ */ n("p", { ref: s, className: x(se.helper, o), ...t, children: e }));
+const B = v(({ children: e, className: n, ...t }, d) => /* @__PURE__ */ i("p", { ref: d, className: b(ae.helper, n), ...t, children: e }));
 B.displayName = "HelperText";
-const G = b(({ children: e, className: o, ...t }, s) => /* @__PURE__ */ n("p", { ref: s, className: x(de.error, o), role: "alert", "aria-live": "polite", ...t, children: e }));
-G.displayName = "ErrorText";
-const ce = b(
+const O = v(({ children: e, className: n, ...t }, d) => /* @__PURE__ */ i("p", { ref: d, className: b(se.error, n), role: "alert", "aria-live": "polite", ...t, children: e }));
+O.displayName = "ErrorText";
+const de = v(
   ({
     label: e,
-    helper: o,
+    helper: n,
     error: t,
-    required: s = !1,
+    required: d = !1,
     disabled: a = !1,
-    readOnly: i = !1,
+    readOnly: o = !1,
     leftIcon: c,
-    rightIcon: d,
+    rightIcon: s,
     id: l,
-    className: r,
-    ...u
-  }, v) => {
-    const h = O(), m = l || h, p = o ? `${m}-helper` : void 0, f = t ? `${m}-error` : void 0, C = [p, f].filter(Boolean).join(" "), N = y({
+    className: f,
+    ...p
+  }, x) => {
+    const m = S(), u = l || m, r = n ? `${u}-helper` : void 0, h = t ? `${u}-error` : void 0, y = [r, h].filter(Boolean).join(" "), N = I({
       disabled: a,
       hasLeftIcon: !!c,
-      hasRightIcon: !!d,
+      hasRightIcon: !!s,
       invalid: !!t,
-      readOnly: i
+      readOnly: o
     });
-    return /* @__PURE__ */ I("div", { className: x($.field, r), children: [
-      e && /* @__PURE__ */ n(k, { htmlFor: m, required: s, disabled: a, children: e }),
-      /* @__PURE__ */ I("div", { className: $.wrapper, ...N, children: [
-        c && /* @__PURE__ */ n("span", { className: $["left-icon"], children: c }),
-        /* @__PURE__ */ n(
+    return /* @__PURE__ */ C("div", { className: b(w.field, f), children: [
+      e && /* @__PURE__ */ i(k, { htmlFor: u, required: d, disabled: a, children: e }),
+      /* @__PURE__ */ C("div", { className: w.wrapper, ...N, children: [
+        c && /* @__PURE__ */ i("span", { className: w["left-icon"], children: c }),
+        /* @__PURE__ */ i(
           "input",
           {
-            ref: v,
-            id: m,
+            ref: x,
+            id: u,
             type: "text",
-            className: $.input,
+            className: w.input,
             disabled: a,
-            readOnly: i,
-            required: s,
+            readOnly: o,
+            required: d,
             "aria-invalid": t ? "true" : void 0,
             "aria-disabled": a ? "true" : void 0,
-            "aria-describedby": C || void 0,
-            ...u
+            "aria-describedby": y || void 0,
+            ...p
           }
         ),
-        d && /* @__PURE__ */ n("span", { className: $["right-icon"], children: d })
+        s && /* @__PURE__ */ i("span", { className: w["right-icon"], children: s })
       ] }),
-      t && /* @__PURE__ */ n(G, { id: f, children: t }),
-      !t && o && /* @__PURE__ */ n(B, { id: p, children: o })
+      t && /* @__PURE__ */ i(O, { id: h, children: t }),
+      !t && n && /* @__PURE__ */ i(B, { id: r, children: n })
     ] });
   }
 );
-ce.displayName = "TextInput";
-const le = b(
+de.displayName = "TextInput";
+const ce = v(
   ({
     label: e,
-    helper: o,
+    helper: n,
     error: t,
-    required: s = !1,
+    required: d = !1,
     disabled: a = !1,
-    readOnly: i = !1,
+    readOnly: o = !1,
     resizable: c = !0,
-    minRows: d = 3,
+    minRows: s = 3,
     maxRows: l,
-    id: r,
-    className: u,
-    ...v
-  }, h) => {
-    const m = O(), p = r || m, f = o ? `${p}-helper` : void 0, C = t ? `${p}-error` : void 0, N = [f, C].filter(Boolean).join(" "), g = y({
+    id: f,
+    className: p,
+    ...x
+  }, m) => {
+    const u = S(), r = f || u, h = n ? `${r}-helper` : void 0, y = t ? `${r}-error` : void 0, N = [h, y].filter(Boolean).join(" "), g = I({
       disabled: a,
       invalid: !!t,
-      readOnly: i,
+      readOnly: o,
       resizable: c ? "true" : "false",
       minRows: "true",
       ...l && { maxRows: "true" }
-    }), S = {
-      "--_min-rows-count": d,
+    }), G = {
+      "--_min-rows-count": s,
       ...l && { "--_max-rows-count": l }
     };
-    return /* @__PURE__ */ I("div", { className: x(P.field, u), children: [
-      e && /* @__PURE__ */ n(k, { htmlFor: p, required: s, disabled: a, children: e }),
-      /* @__PURE__ */ n(
+    return /* @__PURE__ */ C("div", { className: b(D.field, p), children: [
+      e && /* @__PURE__ */ i(k, { htmlFor: r, required: d, disabled: a, children: e }),
+      /* @__PURE__ */ i(
         "textarea",
         {
-          ref: h,
-          id: p,
-          className: P.textarea,
+          ref: m,
+          id: r,
+          className: D.textarea,
           disabled: a,
-          readOnly: i,
-          required: s,
-          style: S,
+          readOnly: o,
+          required: d,
+          style: G,
           "aria-invalid": t ? "true" : void 0,
           "aria-disabled": a ? "true" : void 0,
           "aria-describedby": N || void 0,
           ...g,
-          ...v
+          ...x
         }
       ),
-      t && /* @__PURE__ */ n(G, { id: C, children: t }),
-      !t && o && /* @__PURE__ */ n(B, { id: f, children: o })
+      t && /* @__PURE__ */ i(O, { id: y, children: t }),
+      !t && n && /* @__PURE__ */ i(B, { id: h, children: n })
     ] });
   }
 );
-le.displayName = "TextArea";
-const V = b(({ children: e, ...o }, t) => /* @__PURE__ */ n("option", { ref: t, ...o, children: e }));
-V.displayName = "Select.Option";
-const _ = b(
-  ({ label: e, children: o, ...t }, s) => /* @__PURE__ */ n("optgroup", { ref: s, label: e, ...t, children: o })
+ce.displayName = "TextArea";
+const H = v(({ children: e, ...n }, t) => /* @__PURE__ */ i("option", { ref: t, ...n, children: e }));
+H.displayName = "Select.Option";
+const L = v(
+  ({ label: e, children: n, ...t }, d) => /* @__PURE__ */ i("optgroup", { ref: d, label: e, ...t, children: n })
 );
-_.displayName = "Select.OptionGroup";
-const z = b(
+L.displayName = "Select.OptionGroup";
+const _ = v(
   ({
     label: e,
-    helper: o,
+    helper: n,
     error: t,
-    required: s = !1,
+    required: d = !1,
     disabled: a = !1,
-    placeholder: i,
+    placeholder: o,
     children: c,
-    id: d,
+    id: s,
     className: l,
-    ...r
-  }, u) => {
-    const v = O(), h = d || v, m = o ? `${h}-helper` : void 0, p = t ? `${h}-error` : void 0, f = [m, p].filter(Boolean).join(" "), C = y({
+    ...f
+  }, p) => {
+    const x = S(), m = s || x, u = n ? `${m}-helper` : void 0, r = t ? `${m}-error` : void 0, h = [u, r].filter(Boolean).join(" "), y = I({
       disabled: a,
       invalid: !!t
     });
-    return /* @__PURE__ */ I("div", { className: x(H.field, l), children: [
-      e && /* @__PURE__ */ n(k, { htmlFor: h, required: s, disabled: a, children: e }),
-      /* @__PURE__ */ I(
+    return /* @__PURE__ */ C("div", { className: b(F.field, l), children: [
+      e && /* @__PURE__ */ i(k, { htmlFor: m, required: d, disabled: a, children: e }),
+      /* @__PURE__ */ C(
         "select",
         {
-          ref: u,
-          id: h,
-          className: H.select,
+          ref: p,
+          id: m,
+          className: F.select,
           disabled: a,
-          required: s,
+          required: d,
           "aria-invalid": t ? "true" : void 0,
           "aria-disabled": a ? "true" : void 0,
-          "aria-describedby": f || void 0,
-          ...C,
-          ...r,
+          "aria-describedby": h || void 0,
+          ...y,
+          ...f,
           children: [
-            i && /* @__PURE__ */ n("option", { value: "", disabled: !0, children: i }),
+            o && /* @__PURE__ */ i("option", { value: "", disabled: !0, children: o }),
             c
           ]
         }
       ),
-      t && /* @__PURE__ */ n(G, { id: p, children: t }),
-      !t && o && /* @__PURE__ */ n(B, { id: m, children: o })
+      t && /* @__PURE__ */ i(O, { id: r, children: t }),
+      !t && n && /* @__PURE__ */ i(B, { id: u, children: n })
     ] });
   }
 );
-z.displayName = "Select";
-const J = z;
-J.Option = V;
-J.OptionGroup = _;
-const re = b(
-  ({ variant: e = "outline", size: o = "medium", invalid: t = !1, disabled: s = !1, children: a, className: i, ...c }, d) => {
-    const l = y({
-      disabled: s,
-      invalid: t,
-      size: o,
-      variant: e
+_.displayName = "Select";
+const z = _;
+z.Option = H;
+z.OptionGroup = L;
+const J = v(
+  ({ disabled: e = !1, children: n, className: t, ...d }, a) => {
+    const o = I({
+      disabled: e
     });
-    return /* @__PURE__ */ I("label", { className: x(M.radio, i), ...l, children: [
-      /* @__PURE__ */ n(
+    return /* @__PURE__ */ C("label", { className: b(R.radio, t), ...o, children: [
+      /* @__PURE__ */ i(
         "input",
         {
-          ref: d,
+          ref: a,
           type: "radio",
-          className: M.input,
-          disabled: s,
-          "aria-invalid": t || void 0,
-          ...c
+          className: R.input,
+          disabled: e,
+          ...d
         }
       ),
-      /* @__PURE__ */ n("span", { className: M.indicator }),
-      a && /* @__PURE__ */ n("span", { className: M.label, children: a })
+      /* @__PURE__ */ i("span", { className: R.indicator }),
+      n && /* @__PURE__ */ i("span", { className: R.label, children: n })
     ] });
   }
 );
-re.displayName = "Radio";
-const pe = b(
-  ({ invalid: e = !1, disabled: o = !1, required: t = !1, children: s, className: a, ...i }, c) => {
-    const d = y({
-      disabled: o,
-      invalid: e,
-      required: t
+J.displayName = "Radio";
+const K = v(
+  ({ disabled: e = !1, required: n = !1, children: t, className: d, ...a }, o) => {
+    const c = I({
+      disabled: e,
+      required: n
     });
-    return /* @__PURE__ */ I("label", { className: x(T.checkbox, a), ...d, children: [
-      /* @__PURE__ */ n(
+    return /* @__PURE__ */ C("label", { className: b($.checkbox, d), ...c, children: [
+      /* @__PURE__ */ i(
         "input",
         {
-          ref: c,
+          ref: o,
           type: "checkbox",
-          className: T.input,
-          disabled: o,
-          required: t,
-          "aria-invalid": e || void 0,
-          "aria-required": t || void 0,
-          ...i
+          className: $.input,
+          disabled: e,
+          required: n,
+          "aria-required": n || void 0,
+          ...a
         }
       ),
-      /* @__PURE__ */ n("span", { className: T.indicator }),
-      s && /* @__PURE__ */ n("span", { className: T.label, "data-required": t || void 0, children: s })
+      /* @__PURE__ */ i("span", { className: $.indicator }),
+      t && /* @__PURE__ */ i("span", { className: $.label, "data-required": n || void 0, children: t })
     ] });
   }
 );
-pe.displayName = "Checkbox";
-const K = E(void 0);
-function ue() {
-  const e = D(K);
+K.displayName = "Checkbox";
+const M = T(void 0);
+function le() {
+  const e = E(M);
   if (!e)
     throw new Error("RadioGroup.Option must be used within RadioGroup");
   return e;
 }
-const Q = b(
+const Q = v(
   ({
     value: e,
-    onChange: o,
+    onChange: n,
     name: t,
-    variant: s = "outline",
-    size: a = "medium",
-    label: i,
-    helper: c,
-    error: d,
-    required: l = !1,
-    disabled: r = !1,
-    direction: u = "column",
-    children: v,
-    className: h,
-    ...m
-  }, p) => {
-    const f = O(), C = m.id || f, N = c ? `${C}-helper` : void 0, g = d ? `${C}-error` : void 0, S = [N, g].filter(Boolean).join(" "), w = (oe) => {
-      !r && o && o(oe);
-    }, R = y({
-      disabled: r,
-      invalid: !!d,
-      size: a === "medium" ? void 0 : a,
-      variant: a === "medium" ? s : void 0
+    label: d,
+    helper: a,
+    error: o,
+    required: c = !1,
+    disabled: s = !1,
+    direction: l = "column",
+    children: f,
+    className: p,
+    ...x
+  }, m) => {
+    const u = S(), r = x.id || u, h = a ? `${r}-helper` : void 0, y = o ? `${r}-error` : void 0, N = [h, y].filter(Boolean).join(" "), g = (A) => {
+      !s && n && n(A);
+    }, G = I({
+      disabled: s
     });
-    return /* @__PURE__ */ I("div", { ref: p, className: x(A.field, h), ...R, ...m, children: [
-      i && /* @__PURE__ */ n(k, { required: l, disabled: r, children: i }),
-      /* @__PURE__ */ n(K.Provider, { value: { disabled: r, name: t, onChange: w, value: e }, children: /* @__PURE__ */ n(
+    return /* @__PURE__ */ C("div", { ref: m, className: b(P.field, p), ...G, ...x, children: [
+      d && /* @__PURE__ */ i(k, { required: c, disabled: s, children: d }),
+      /* @__PURE__ */ i(M.Provider, { value: { disabled: s, name: t, onChange: g, value: e }, children: /* @__PURE__ */ i(
         "div",
         {
-          className: A.options,
-          "data-direction": u,
+          className: P.options,
+          "data-direction": l,
           role: "radiogroup",
-          "aria-describedby": S || void 0,
-          "aria-invalid": d ? "true" : void 0,
-          children: v
+          "aria-describedby": N || void 0,
+          "aria-invalid": o ? "true" : void 0,
+          children: f
         }
       ) }),
-      d && /* @__PURE__ */ n(G, { id: g, children: d }),
-      !d && c && /* @__PURE__ */ n(B, { id: N, children: c })
+      o && /* @__PURE__ */ i(O, { id: y, children: o }),
+      !o && a && /* @__PURE__ */ i(B, { id: h, children: a })
     ] });
   }
 );
 Q.displayName = "RadioGroup";
-const U = b(
-  ({ value: e, children: o, disabled: t, className: s, ...a }, i) => {
-    const c = ue(), d = c.value === e, l = c.disabled || t, r = () => {
-      l || c.onChange(e);
+const U = v(
+  ({ value: e, children: n, disabled: t, ...d }, a) => {
+    const o = le(), c = o.value === e, s = o.disabled || t, l = () => {
+      s || o.onChange(e);
     };
-    return /* @__PURE__ */ I("label", { className: x(A.option, s), children: [
-      /* @__PURE__ */ n(
-        "input",
-        {
-          ref: i,
-          type: "radio",
-          name: c.name,
-          value: e,
-          checked: d,
-          disabled: l,
-          onChange: r,
-          className: A.input,
-          ...a
-        }
-      ),
-      /* @__PURE__ */ n("span", { className: A.indicator }),
-      o && /* @__PURE__ */ n("span", { className: A.optionLabel, children: o })
-    ] });
+    return /* @__PURE__ */ i(
+      J,
+      {
+        ref: a,
+        name: o.name,
+        value: e,
+        checked: c,
+        disabled: s,
+        onChange: l,
+        ...d,
+        children: n
+      }
+    );
   }
 );
 U.displayName = "RadioGroup.Option";
-const Ie = Object.assign(Q, {
+const xe = Object.assign(Q, {
   Option: U
-}), W = E(void 0);
-function he() {
-  const e = D(W);
+}), W = T(void 0);
+function re() {
+  const e = E(W);
   if (!e)
     throw new Error("CheckboxGroup.Option must be used within CheckboxGroup");
   return e;
 }
-const X = b(
+const X = v(
   ({
     value: e,
-    onChange: o,
+    onChange: n,
     name: t,
-    label: s,
+    label: d,
     helper: a,
-    error: i,
+    error: o,
     required: c = !1,
-    disabled: d = !1,
+    disabled: s = !1,
     direction: l = "column",
-    children: r,
-    className: u,
-    ...v
-  }, h) => {
-    const m = O(), p = v.id || m, f = a ? `${p}-helper` : void 0, C = i ? `${p}-error` : void 0, N = [f, C].filter(Boolean).join(" "), g = (w) => {
-      !d && o && o(w);
-    }, S = y({
-      disabled: d,
-      invalid: !!i
+    children: f,
+    className: p,
+    ...x
+  }, m) => {
+    const u = S(), r = x.id || u, h = a ? `${r}-helper` : void 0, y = o ? `${r}-error` : void 0, N = [h, y].filter(Boolean).join(" "), g = (A) => {
+      !s && n && n(A);
+    }, G = I({
+      disabled: s
     });
-    return /* @__PURE__ */ I("div", { ref: h, className: x(j.field, u), ...S, ...v, children: [
-      s && /* @__PURE__ */ n(k, { required: c, disabled: d, children: s }),
-      /* @__PURE__ */ n(W.Provider, { value: { disabled: d, name: t, onChange: g, value: e }, children: /* @__PURE__ */ n(
+    return /* @__PURE__ */ C("div", { ref: m, className: b(V.field, p), ...G, ...x, children: [
+      d && /* @__PURE__ */ i(k, { required: c, disabled: s, children: d }),
+      /* @__PURE__ */ i(W.Provider, { value: { disabled: s, name: t, onChange: g, value: e }, children: /* @__PURE__ */ i(
         "div",
         {
-          className: j.options,
+          className: V.options,
           "data-direction": l,
           role: "group",
           "aria-describedby": N || void 0,
-          "aria-invalid": i ? "true" : void 0,
-          children: r
+          "aria-invalid": o ? "true" : void 0,
+          children: f
         }
       ) }),
-      i && /* @__PURE__ */ n(G, { id: C, children: i }),
-      !i && a && /* @__PURE__ */ n(B, { id: f, children: a })
+      o && /* @__PURE__ */ i(O, { id: y, children: o }),
+      !o && a && /* @__PURE__ */ i(B, { id: h, children: a })
     ] });
   }
 );
 X.displayName = "CheckboxGroup";
-const Y = b(
-  ({ value: e, children: o, disabled: t, required: s = !1, className: a, ...i }, c) => {
-    const d = O(), l = he(), r = l.value.includes(e), u = l.disabled || t, v = () => {
-      if (!u) {
-        const m = r ? l.value.filter((p) => p !== e) : [...l.value, e];
-        l.onChange(m);
+const Y = v(
+  ({ value: e, children: n, disabled: t, ...d }, a) => {
+    const o = re(), c = o.value.includes(e), s = o.disabled || t, l = () => {
+      if (!s) {
+        const f = c ? o.value.filter((p) => p !== e) : [...o.value, e];
+        o.onChange(f);
       }
-    }, h = y({
-      disabled: u,
-      required: s
-    });
-    return /* @__PURE__ */ I("label", { className: x(j.option, a), ...h, children: [
-      /* @__PURE__ */ n(
-        "input",
-        {
-          ref: c,
-          type: "checkbox",
-          name: l.name,
-          value: e,
-          checked: r,
-          disabled: u,
-          required: s,
-          onChange: v,
-          className: j.input,
-          "aria-required": s || void 0,
-          ...i,
-          id: d
-        }
-      ),
-      /* @__PURE__ */ n("span", { className: j.indicator }),
-      o && /* @__PURE__ */ n(k, { required: s, disabled: u, htmlFor: d, children: o })
-    ] });
+    };
+    return /* @__PURE__ */ i(
+      K,
+      {
+        ref: a,
+        name: o.name,
+        value: e,
+        checked: c,
+        disabled: s,
+        onChange: l,
+        ...d,
+        children: n
+      }
+    );
   }
 );
 Y.displayName = "CheckboxGroup.Option";
 const ye = Object.assign(X, {
   Option: Y
-}), Z = E(void 0);
-function me() {
-  const e = D(Z);
+}), Z = T(void 0);
+function pe() {
+  const e = E(Z);
   if (!e)
-    throw new Error("ChipSingleInput.Option must be used within ChipSingleInput");
+    throw new Error("ChipInput.Option must be used within ChipInput");
   return e;
 }
-const q = b(
+const q = v(
   ({
     value: e,
-    onChange: o,
-    name: t,
-    label: s,
-    helper: a,
-    error: i,
-    required: c = !1,
-    disabled: d = !1,
-    gap: l = "2",
-    wrap: r = !0,
-    children: u,
-    className: v,
-    ...h
-  }, m) => {
-    const p = O(), f = h.id || p, C = a ? `${f}-helper` : void 0, N = i ? `${f}-error` : void 0, g = [C, N].filter(Boolean).join(" "), S = (R) => {
-      !d && o && o(R);
-    }, w = y({
-      invalid: !!i
-    });
-    return /* @__PURE__ */ I("div", { ref: m, className: x(F.field, v), ...w, ...h, children: [
-      s && /* @__PURE__ */ n(k, { required: c, disabled: d, children: s }),
-      /* @__PURE__ */ n(
+    onChange: n,
+    multiple: t = !1,
+    name: d,
+    label: a,
+    helper: o,
+    error: c,
+    required: s = !1,
+    disabled: l = !1,
+    gap: f = "2",
+    wrap: p = !0,
+    children: x,
+    className: m,
+    ...u
+  }, r) => {
+    const h = S(), y = u.id || h, N = o ? `${y}-helper` : void 0, g = c ? `${y}-error` : void 0, G = [N, g].filter(Boolean).join(" "), A = (ne) => {
+      l || n(ne);
+    }, te = I({
+      invalid: !!c
+    }), oe = t ? "group" : "radiogroup";
+    return /* @__PURE__ */ C("div", { ref: r, className: b(j.field, m), ...te, ...u, children: [
+      a && /* @__PURE__ */ i(k, { required: s, disabled: l, children: a }),
+      /* @__PURE__ */ i(
         Z.Provider,
         {
           value: {
-            disabled: d,
-            name: t,
-            onChange: S,
+            disabled: l,
+            multiple: t,
+            name: d,
+            onChange: A,
             value: e
           },
-          children: /* @__PURE__ */ n(
+          children: /* @__PURE__ */ i(
             "div",
             {
-              className: F.options,
-              "data-gap": l,
-              "data-wrap": r,
-              role: "radiogroup",
-              "aria-describedby": g || void 0,
-              "aria-invalid": i ? "true" : void 0,
-              children: u
+              className: j.options,
+              "data-gap": f,
+              "data-wrap": p,
+              role: oe,
+              "aria-describedby": G || void 0,
+              "aria-invalid": c ? "true" : void 0,
+              children: x
             }
           )
         }
       ),
-      i && /* @__PURE__ */ n(G, { id: N, children: i }),
-      !i && a && /* @__PURE__ */ n(B, { id: C, children: a })
+      c && /* @__PURE__ */ i(O, { id: g, children: c }),
+      !c && o && /* @__PURE__ */ i(B, { id: N, children: o })
     ] });
   }
 );
-q.displayName = "ChipSingleInput";
-const ee = b(
-  ({ value: e, children: o, disabled: t, ...s }, a) => {
-    const i = me(), c = i.value === e, d = i.disabled || t, l = () => {
-      !d && i.onChange && i.onChange(e);
-    }, r = y({
-      disabled: d,
-      selected: c
+q.displayName = "ChipInput";
+const ee = v(
+  ({ value: e, children: n, disabled: t, iconLeft: d, iconRight: a, ...o }, c) => {
+    const s = pe(), l = s.disabled || t, f = !!(d || a);
+    let p = !1;
+    s.multiple ? p = Array.isArray(s.value) && s.value.includes(e) : p = s.value === e;
+    const x = () => {
+      if (!l)
+        if (s.multiple) {
+          const u = Array.isArray(s.value) ? s.value : [], r = p ? u.filter((h) => h !== e) : [...u, e];
+          s.onChange(r);
+        } else
+          s.onChange(e);
+    }, m = I({
+      disabled: l,
+      selected: p,
+      ...f && { "has-icon": !0 }
     });
-    return /* @__PURE__ */ n(
+    return /* @__PURE__ */ C(
       "button",
       {
-        ref: a,
+        ref: c,
         type: "button",
-        className: F.option,
-        onClick: l,
-        disabled: d,
-        "aria-pressed": c,
-        ...r,
-        ...s,
-        children: o
+        className: j.option,
+        onClick: x,
+        disabled: l,
+        "aria-pressed": p,
+        ...m,
+        ...o,
+        children: [
+          d,
+          n,
+          a
+        ]
       }
     );
   }
 );
-ee.displayName = "ChipSingleInput.Option";
-const ge = Object.assign(q, {
+ee.displayName = "ChipInput.Option";
+const Ce = Object.assign(q, {
   Option: ee
-}), te = E(void 0);
-function ve() {
-  const e = D(te);
-  if (!e)
-    throw new Error("ChipMultipleInput.Option must be used within ChipMultipleInput");
-  return e;
-}
-const ie = b(
-  ({
-    value: e,
-    onChange: o,
-    name: t,
-    label: s,
-    helper: a,
-    error: i,
-    required: c = !1,
-    disabled: d = !1,
-    gap: l = "2",
-    wrap: r = !0,
-    children: u,
-    className: v,
-    ...h
-  }, m) => {
-    const p = O(), f = h.id || p, C = a ? `${f}-helper` : void 0, N = i ? `${f}-error` : void 0, g = [C, N].filter(Boolean).join(" "), S = (R) => {
-      !d && o && o(R);
-    }, w = y({
-      invalid: !!i
-    });
-    return /* @__PURE__ */ I("div", { ref: m, className: x(L.field, v), ...w, ...h, children: [
-      s && /* @__PURE__ */ n(k, { required: c, disabled: d, children: s }),
-      /* @__PURE__ */ n(
-        te.Provider,
-        {
-          value: {
-            disabled: d,
-            name: t,
-            onChange: S,
-            value: e
-          },
-          children: /* @__PURE__ */ n(
-            "div",
-            {
-              className: L.options,
-              "data-gap": l,
-              "data-wrap": r,
-              role: "group",
-              "aria-describedby": g || void 0,
-              "aria-invalid": i ? "true" : void 0,
-              children: u
-            }
-          )
-        }
-      ),
-      i && /* @__PURE__ */ n(G, { id: N, children: i }),
-      !i && a && /* @__PURE__ */ n(B, { id: C, children: a })
-    ] });
-  }
-);
-ie.displayName = "ChipMultipleInput";
-const ne = b(
-  ({ value: e, children: o, disabled: t, ...s }, a) => {
-    const i = ve(), c = i.value.includes(e), d = i.disabled || t, l = () => {
-      if (!d && i.onChange) {
-        const u = c ? i.value.filter((v) => v !== e) : [...i.value, e];
-        i.onChange(u);
-      }
-    }, r = y({
-      disabled: d,
-      selected: c
-    });
-    return /* @__PURE__ */ n(
-      "button",
-      {
-        ref: a,
-        type: "button",
-        className: L.option,
-        onClick: l,
-        disabled: d,
-        "aria-pressed": c,
-        ...r,
-        ...s,
-        children: o
-      }
-    );
-  }
-);
-ne.displayName = "ChipMultipleInput.Option";
-const Se = Object.assign(ie, {
-  Option: ne
 });
 export {
-  pe as Checkbox,
+  K as Checkbox,
   ye as CheckboxGroup,
-  Se as ChipMultipleInput,
-  ge as ChipSingleInput,
-  G as ErrorText,
+  Ce as ChipInput,
+  O as ErrorText,
   B as HelperText,
   k as Label,
-  re as Radio,
-  Ie as RadioGroup,
-  J as Select,
-  le as TextArea,
-  ce as TextInput
+  J as Radio,
+  xe as RadioGroup,
+  z as Select,
+  ce as TextArea,
+  de as TextInput
 };