visits-style 2.1.4 → 2.2.0

package/dist/index.es.js

@@ -1,18 +1,28 @@
-import h from "clsx";
-import { default as pt } from "clsx";
-import { twMerge as he } from "tailwind-merge";
-import { jsx as i, jsxs as k, Fragment as te } from "react/jsx-runtime";
-import { useMemo as c, Children as z, cloneElement as Z, forwardRef as S, useLayoutEffect as ne, useEffect as M, useState as E, useRef as F, useCallback as j, useImperativeHandle as re, startTransition as ye, createContext as xe, createElement as we, useContext as ve } from "react";
-import { useId as K, useFloating as H, autoUpdate as oe, shift as ie, flip as se, offset as le, useTransitionStyles as L, useInteractions as U, useClick as Ce, FloatingOverlay as J, useHover as Ne, useClientPoint as ke, useDismiss as Ie } from "@floating-ui/react";
-import { createPortal as Fe } from "react-dom";
-function I(e, t) {
-  return t ? he(e, t) : e;
-}
-function Te({ className: e, ...t }) {
-  const r = c(() => h("leading-none peer-disabled:opacity-70", e), [e]);
-  return /* @__PURE__ */ i("label", { className: r, ...t });
-}
-function Je({
+import U from "clsx";
+import { twMerge as be } from "tailwind-merge";
+import { jsx as i, jsxs as N, Fragment as ne } from "react/jsx-runtime";
+import { useMemo as k, createElement as re, Children as z, cloneElement as W, useLayoutEffect as oe, useEffect as L, useState as E, useRef as F, useCallback as B, useImperativeHandle as ie, forwardRef as se, startTransition as ge, createContext as me, useContext as he } from "react";
+import { useId as Z, useFloating as _, autoUpdate as le, shift as ae, flip as ue, offset as ce, useTransitionStyles as X, useInteractions as J, useClick as ye, FloatingOverlay as Q, useHover as xe, useClientPoint as we, useDismiss as ve } from "@floating-ui/react";
+import { createPortal as Ce } from "react-dom";
+function M(...e) {
+  return e.length ? U(...e) : "";
+}
+function O(e, t) {
+  return t ? be(e, t) : e;
+}
+function w({
+  as: e,
+  classList: t = [],
+  className: r,
+  ...n
+}) {
+  const s = k(() => Array.isArray(t) ? t.length ? O(M(...t), r) : r : O(M(t), r), [t, r]);
+  return re(e || "div", { className: s, ...n });
+}
+function ke(e) {
+  return /* @__PURE__ */ i(w, { as: "label", classList: ["leading-none peer-disabled:opacity-70"], ...e });
+}
+function Ke({
   label: e,
   children: t,
   required: r,
@@ -20,112 +30,121 @@ function Je({
   error: s,
   help: o,
   helpBefore: l,
-  className: u,
-  innerClass: p,
-  ...d
+  innerClass: u,
+  ...c
 }) {
-  const f = c(() => h(
+  const d = k(() => M(
     "font-medium",
     r ? 'after:content-["*"] after:text-danger after:text-sm after:pl-0.5' : ""
-  ), [r]), y = c(() => I("flex flex-col space-y-2", u), [u]);
-  return /* @__PURE__ */ k("div", { className: y, ...d, children: [
-    e ? /* @__PURE__ */ i(Te, { className: f, htmlFor: n, children: e }) : null,
+  ), [r]);
+  return /* @__PURE__ */ N(w, { classList: "flex flex-col space-y-2", ...c, children: [
+    e ? /* @__PURE__ */ i(ke, { className: d, htmlFor: n, children: e }) : null,
     o && l ? /* @__PURE__ */ i("p", { className: "text-xs text-muted pb-2", children: o }) : null,
-    /* @__PURE__ */ i("div", { className: p, children: Pe(t, !!s) }),
+    /* @__PURE__ */ i("div", { className: u, children: Ne(t, !!s) }),
     o && !l && !s ? /* @__PURE__ */ i("p", { className: "text-xs text-muted", children: o }) : null,
     s ? /* @__PURE__ */ i("p", { className: "text-xs text-danger", children: s }) : null
   ] });
 }
-function Pe(e, t) {
+function Ne(e, t) {
   const r = z.count(e);
   if (!r) return null;
   if (r === 1)
-    return Z(e, { error: t });
+    return W(e, { error: t });
   const n = z.toArray(e);
-  return n[0] = Z(n[0], { error: t }), n;
+  return n[0] = W(n[0], { error: t }), n;
 }
-function Qe({ error: e, unstyled: t, className: r, ...n }) {
-  const s = c(() => t ? r : I(h(
-    "flex rounded-md border bg-background px-3 py-2 w-full [&_input]:placeholder:text-muted",
-    "[&_input]:disabled:opacity-50 [&_input]:focus-visible:outline-none",
-    e ? "border-danger hover:border-danger-fore" : "border-input"
-  ), r), [r, e, t]);
-  return /* @__PURE__ */ i("div", { className: s, ...n });
+function Ge({ error: e, customStyle: t, ...r }) {
+  return /* @__PURE__ */ i(
+    w,
+    {
+      classList: t ? void 0 : [
+        "flex rounded-md border bg-background px-3 py-2 w-full [&_input]:placeholder:text-muted",
+        "[&_input]:disabled:opacity-50 [&_input]:focus-visible:outline-none",
+        e ? "border-danger hover:border-danger-fore" : "border-input"
+      ],
+      ...r
+    }
+  );
 }
-const Re = S(({
-  className: e,
-  type: t,
-  error: r,
-  unstyled: n,
-  ...s
-}, o) => {
-  const l = c(() => n ? e : I(h(
-    "flex rounded-md border bg-background px-3 py-2 w-full placeholder:text-muted",
-    "disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring",
-    r ? "border-danger hover:border-danger-fore" : "border-input not-disabled:hover:border-input-fore",
-    t === "file" ? "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground" : null
-  ), e), [e, t, r, n]);
-  return /* @__PURE__ */ i("input", { ref: o, type: t, className: l, ...s });
-});
-Re.displayName = "Input";
-const Ae = S(({
-  className: e,
-  error: t,
-  unstyled: r,
-  ...n
-}, s) => {
-  const o = c(() => r ? e : I(h(
-    "flex rounded-md border bg-background px-3 py-2 w-full",
-    "disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring",
-    t ? "border-danger hover:border-danger-fore" : "border-input not-disabled:hover:border-input-fore"
-  ), e), [e, t, r]);
-  return /* @__PURE__ */ i("textarea", { ref: s, className: o, ...n });
-});
-Ae.displayName = "Textarea";
-function Me() {
+function Ue({ type: e, error: t, customStyle: r, ...n }) {
+  return /* @__PURE__ */ i(
+    w,
+    {
+      as: "input",
+      type: e,
+      classList: r ? void 0 : [
+        "flex rounded-md border bg-background px-3 py-2 w-full placeholder:text-muted",
+        "disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2",
+        t ? "border-danger hover:border-danger-fore focus-visible:ring-danger" : "border-input not-disabled:hover:border-input-fore focus-visible:ring-ring",
+        e === "file" ? "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground" : null
+      ],
+      ...n
+    }
+  );
+}
+function Je({ error: e, customStyle: t, ...r }) {
+  return /* @__PURE__ */ i(
+    w,
+    {
+      as: "textarea",
+      classList: t ? void 0 : [
+        "flex rounded-md border bg-background px-3 py-2 w-full",
+        "disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring",
+        e ? "border-danger hover:border-danger-fore" : "border-input not-disabled:hover:border-input-fore"
+      ],
+      ...r
+    }
+  );
+}
+function Fe() {
   return /* @__PURE__ */ i("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", children: /* @__PURE__ */ i("rect", { width: "20", height: "3", y: "13.5", x: "4.5", fill: "currentColor", stroke: "none", rx: "2" }) });
 }
-function Ve({
+function Qe({
   checked: e,
   indeterminate: t,
-  className: r,
-  id: n,
-  name: s,
-  onChange: o,
-  value: l,
-  checkIcon: u,
-  ...p
+  id: r,
+  name: n,
+  onChange: s,
+  value: o,
+  checkIcon: l,
+  error: u,
+  ...c
 }) {
-  const d = c(() => I(h(
-    "inline-flex justify-center items-center border w-4.5 h-4.5 rounded",
-    "cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
-    e || t ? "bg-primary text-inverted disabled:text-text disabled:bg-input disabled:border-input" : "border-input not-disabled:hover:border-input-fore"
-  ), r), [e, t, r]), f = () => {
-    p.disabled || o?.(!e);
+  const d = () => {
+    c.disabled || s?.(!e);
   };
-  return /* @__PURE__ */ k(
-    "button",
+  return /* @__PURE__ */ N(
+    w,
     {
+      as: "button",
       type: "button",
       role: "checkbox",
-      id: n || s,
-      className: d,
-      onClick: f,
+      id: r || n,
+      classList: [
+        "inline-flex justify-center items-center border w-4.5 h-4.5 rounded",
+        "cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
+        {
+          "border-danger hover:border-danger-fore": u,
+          "bg-primary text-inverted disabled:text-text disabled:bg-input disabled:border-input": !u && e,
+          "border-input not-disabled:hover:border-input-fore": !u && !e
+        }
+      ],
+      onClick: d,
       "aria-checked": e,
-      ...p,
+      ...c,
       children: [
-        e ? u : null,
-        t && !e ? /* @__PURE__ */ i(Me, {}) : null,
+        e ? l : null,
+        t && !e ? /* @__PURE__ */ i(Fe, {}) : null,
         /* @__PURE__ */ i(
           "input",
           {
             type: "checkbox",
             "aria-hidden": "true",
-            name: s,
+            name: n,
             checked: e,
-            value: l,
-            onChange: f,
-            disabled: p.disabled,
+            value: o,
+            onChange: d,
+            disabled: c.disabled,
             style: { position: "absolute", pointerEvents: "none", top: 0, left: 0, width: 1, height: 1, opacity: 0 }
           }
         )
@@ -133,230 +152,247 @@ function Ve({
     }
   );
 }
-const Se = typeof window < "u" && typeof window.document < "u" && typeof window.document.createElement < "u", Q = Se ? ne : M;
-function W({ children: e, container: t, disabled: r }) {
+const Ie = typeof window < "u" && typeof window.document < "u" && typeof window.document.createElement < "u", V = Ie ? oe : L;
+function H({ children: e, container: t, disabled: r }) {
   const [n, s] = E(null);
-  return Q(() => {
+  return V(() => {
     if (!t) {
       let o = document.getElementById("visits-style-portals");
       return o || (o = document.createElement("div"), o.id = "visits-style-portals", document.body.appendChild(o)), s(o);
     }
     s(t);
-  }, [t]), r || !n ? null : Fe(e, n);
+  }, [t]), r || !n ? null : Ce(e, n);
 }
 function q(e) {
   e && (e.stopPropagation(), e.preventDefault());
 }
-const _e = { open: 150, close: 75 }, ae = S(({
-  position: e,
-  label: t,
-  children: r,
-  disabled: n,
-  offset: s = { x: 0, y: 6 },
-  onOpen: o,
-  onClose: l,
-  onManualClose: u,
-  timeout: p = _e,
-  unstyled: d,
-  zIndex: f = 9996,
-  role: y,
+const Ae = { open: 150, close: 75 };
+function Te({
+  ref: e,
+  position: t,
+  label: r,
+  children: n,
+  disabled: s,
+  offset: o = { x: 0, y: 6 },
+  onOpen: l,
+  onClose: u,
+  onManualClose: c,
+  timeout: d = Ae,
+  customStyle: g,
+  zIndex: m = 9996,
+  role: v,
   ...C
-}, N) => {
-  const [m, a] = E(!1), v = K(), g = F(o), x = F(l), { refs: w, floatingStyles: _, context: D } = H({
-    nodeId: v,
-    placement: e,
+}) {
+  const [p, a] = E(!1), x = Z(), b = F(l), h = F(u), { refs: y, floatingStyles: R, context: S } = _({
+    nodeId: x,
+    placement: t,
     middleware: [
-      ie(),
-      se({ fallbackAxisSideDirection: "end" }),
-      le({ mainAxis: s.y, crossAxis: s.x })
+      ae(),
+      ue({ fallbackAxisSideDirection: "end" }),
+      ce({ mainAxis: o.y, crossAxis: o.x })
     ],
-    open: m,
-    onOpenChange: (T) => {
-      T ? g.current?.(w.reference.current, w.floating.current) : x.current?.(w.reference.current, w.floating.current), a(T);
+    open: p,
+    onOpenChange: (I) => {
+      I ? b.current?.(y.reference.current, y.floating.current) : h.current?.(y.reference.current, y.floating.current), a(I);
     },
-    whileElementsMounted: oe
-  }), { isMounted: O, styles: Y } = L(D, {
-    duration: p,
-    initial({ side: T }) {
-      let R = "";
-      return T === "top" ? R = "translateY(5%) scale(0.95)" : T === "bottom" ? R = "translateY(-5%) scale(0.95)" : T === "left" ? R = "translateX(5%) scale(0.95)" : R = "translateX(-5%) scale(0.95)", { opacity: 0, transform: R };
+    whileElementsMounted: le
+  }), { isMounted: Y, styles: D } = X(S, {
+    duration: d,
+    initial({ side: I }) {
+      let P = "";
+      return I === "top" ? P = "translateY(5%) scale(0.95)" : I === "bottom" ? P = "translateY(-5%) scale(0.95)" : I === "left" ? P = "translateX(5%) scale(0.95)" : P = "translateX(-5%) scale(0.95)", { opacity: 0, transform: P };
     }
-  }), $ = j((T) => {
-    if (q(T), u) return u();
-    a(!1), x.current?.(w.reference.current, w.floating.current);
-  }, [u]);
-  M(() => {
-    if (n && m) return a(!1);
-  }, [n, m]), re(N, () => ({
+  }), $ = B((I) => {
+    if (q(I), c) return c();
+    a(!1), h.current?.(y.reference.current, y.floating.current);
+  }, [c]);
+  L(() => {
+    if (s && p) return a(!1);
+  }, [s, p]), ie(e, () => ({
     open: () => {
-      a(!0), g.current?.(w.reference.current, w.floating.current);
+      a(!0), b.current?.(y.reference.current, y.floating.current);
     },
     close: () => {
-      a(!1), x.current?.(w.reference.current, w.floating.current);
+      a(!1), h.current?.(y.reference.current, y.floating.current);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }), []);
-  const { getFloatingProps: B, getReferenceProps: X } = U([
-    Ce(D, { enabled: !n })
+  const { getFloatingProps: j, getReferenceProps: K } = J([
+    ye(S, { enabled: !s })
   ]);
-  return g.current = o, x.current = l, /* @__PURE__ */ k(te, { children: [
-    Z(z.only(t), X({
-      ref: w.setReference,
+  return b.current = l, h.current = u, /* @__PURE__ */ N(ne, { children: [
+    W(z.only(r), K({
+      ref: y.setReference,
       tabIndex: 0,
       role: "button",
-      "aria-expanded": m,
-      disabled: n,
+      "aria-expanded": p,
+      disabled: s,
       onClick: q
     })),
-    /* @__PURE__ */ i(W, { disabled: n || !O, children: /* @__PURE__ */ i(
-      J,
+    /* @__PURE__ */ i(H, { disabled: s || !Y, children: /* @__PURE__ */ i(
+      Q,
       {
         "data-testid": "vs-popover-shadow",
         onClick: $,
-        style: { zIndex: f },
+        style: { zIndex: m },
         autoFocus: !0,
-        children: /* @__PURE__ */ i("div", { role: y || "region", ref: w.setFloating, style: _, children: /* @__PURE__ */ i(
-          ce,
+        children: /* @__PURE__ */ i("div", { role: v || "region", ref: y.setFloating, style: R, children: /* @__PURE__ */ i(
+          Le,
           {
-            unstyled: d,
-            styles: Y,
-            ...B({ ...C, onClick: q }),
-            children: r
+            customStyle: g,
+            styles: D,
+            ...j({ ...C, onClick: q }),
+            children: n
           }
         ) })
       }
     ) })
   ] });
-});
-ae.displayName = "Popover";
-const ce = S(({
-  className: e,
-  unstyled: t,
-  styles: r,
-  style: n = {},
-  ...s
-}, o) => {
-  const l = c(() => I(h(
-    "z-20 w-auto h-auto outline-none transition-transform ease-in-out",
-    t ? null : "border border-accent rounded-md shadow-lg p-1 bg-background"
-  ), e), [e, t]);
-  return /* @__PURE__ */ i("div", { ref: o, className: l, style: { ...r, ...n }, ...s });
-});
-ce.displayName = "PopoverContent";
-function et({
+}
+function Le({ customStyle: e, styles: t, style: r = {}, ...n }) {
+  return /* @__PURE__ */ i(
+    w,
+    {
+      classList: [
+        "z-20 w-auto h-auto outline-none transition-transform ease-in-out",
+        e ? null : "border border-accent rounded-md shadow-lg p-1 bg-background"
+      ],
+      style: { ...t, ...r },
+      ...n
+    }
+  );
+}
+function Ve({
   className: e,
   placeholder: t = "",
   options: r = [],
   error: n,
-  unstyled: s,
+  customStyle: s,
   disabled: o,
   value: l,
   maxHeight: u = 408,
-  arrowIcon: p,
+  arrowIcon: c,
   closeIcon: d,
-  checkIcon: f,
-  onChange: y,
-  onClear: C,
-  renderItem: N,
-  sectionLabelStyle: m,
+  checkIcon: g,
+  onChange: m,
+  onClear: v,
+  renderItem: C,
+  sectionLabelStyle: p,
   buttonAreaStyle: a,
-  clearLabelText: v,
-  optionStyle: g,
-  ...x
+  clearLabelText: x,
+  optionStyle: b,
+  ...h
 }) {
-  const w = F(null), [_, D] = E(0), O = c(() => s ? e : I(h(
-    "flex items-center justify-between rounded-md border bg-background px-3 py-2 w-full overflow-hidden cursor-pointer",
-    "disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring",
-    n ? "border-danger hover:border-danger-fore" : "border-input not-disabled:hover:border-input-fore"
-  ), e), [e, n, s]), Y = c(() => Array.isArray(l), []), $ = j((b) => {
-    y?.(b), Y || w.current?.close();
-  }, [y, Y]), B = j((b) => Array.isArray(l) ? l.indexOf(b) > -1 : l === b, [l]), X = c(() => {
-    const b = {}, A = r.filter((P) => typeof P != "string");
-    for (let P = 0, G = A.length; P < G; P += 1) {
-      const V = A[P];
-      b[`${V.value}`] = V.label;
+  const y = F(null), [R, S] = E(0), Y = k(() => Array.isArray(l), []), D = B((f) => {
+    m?.(f), Y || y.current?.close();
+  }, [m, Y]), $ = B((f) => Array.isArray(l) ? l.indexOf(f) > -1 : l === f, [l]), j = k(() => {
+    const f = {}, T = r.filter((A) => typeof A != "string");
+    for (let A = 0, G = T.length; A < G; A += 1) {
+      const ee = T[A];
+      f[`${ee.value}`] = ee.label;
     }
-    return b;
-  }, [r]), T = c(() => {
+    return f;
+  }, [r]), K = k(() => {
     if (!l) return t;
     if (Array.isArray(l)) {
       if (!l.length) return t;
-      const b = [...l].sort(), A = [];
-      for (let P = 0, G = b.length; P < G; P += 1)
-        A[P] = X[`${b[P]}`] || "";
-      return A.filter(Boolean).join(",") || t;
+      const f = [...l].sort(), T = [];
+      for (let A = 0, G = f.length; A < G; A += 1)
+        T[A] = j[`${f[A]}`] || "";
+      return T.filter(Boolean).join(",") || t;
     }
-    return X[`${l}`] || t;
-  }, [t, l, X]), R = T === t, be = c(() => h(
-    "overflow-hidden overflow-ellipsis whitespace-nowrap",
-    R ? "text-muted" : "text-text"
-  ), [R]), me = j((b, A) => N ? typeof b == "string" ? N(b, { index: A, selected: !1, onChange: () => {
-  } }) : N(b, {
-    index: A,
-    selected: B(b.value),
-    onChange: () => $(b.value)
-  }) : typeof b == "string" ? /* @__PURE__ */ i(
-    "h5",
+    return j[`${l}`] || t;
+  }, [t, l, j]), I = k(() => l == null ? !0 : Array.isArray(l) ? !l.length : !1, [l]), P = B((f, T) => C ? typeof f == "string" ? C(f, { index: T, selected: !1, onChange: () => {
+  } }) : C(f, {
+    index: T,
+    selected: $(f.value),
+    onChange: () => D(f.value)
+  }) : typeof f == "string" ? /* @__PURE__ */ i(
+    w,
     {
-      className: h("font-normal py-1 px-2 text-muted", m),
-      children: b
+      as: "h5",
+      classList: ["font-normal py-1 px-2 text-muted"],
+      className: p,
+      children: f
     },
-    `optionheader-${A}`
+    `optionheader-${T}`
   ) : /* @__PURE__ */ i(
-    Ee,
+    Me,
     {
-      selected: B(b.value),
-      onChange: $,
-      checkIcon: f,
-      className: g,
-      ...b
+      selected: $(f.value),
+      onChange: D,
+      checkIcon: g,
+      className: b,
+      ...f
     },
-    b.label
-  ), [N, $, B, m, g, f]), ge = c(() => h(
-    "relative flex items-center pr-4 space-x-2",
-    a
-  ), [a]);
+    f.label
+  ), [C, D, $, p, b, g]);
   return /* @__PURE__ */ i(
-    ae,
+    Te,
     {
-      label: /* @__PURE__ */ k("button", { type: "button", className: O, disabled: o, ...x, children: [
-        /* @__PURE__ */ i("span", { className: be, children: T }),
-        /* @__PURE__ */ k("div", { className: ge, children: [
-          C && !R ? /* @__PURE__ */ i(
-            "div",
-            {
-              tabIndex: -1,
-              role: "button",
-              className: "size-6 p-1.5 rounded hover:bg-accent cursor-pointer",
-              "aria-label": v,
-              onKeyDown: (b) => {
-                b.key !== "Enter" && b.key !== "Space" || C();
-              },
-              onClick: (b) => {
-                b.stopPropagation(), C();
-              },
-              children: d
-            }
-          ) : null,
-          p
-        ] })
-      ] }),
-      ref: w,
-      onOpen: (b) => D(b?.getBoundingClientRect().width || 0),
+      label: /* @__PURE__ */ N(
+        w,
+        {
+          as: "button",
+          type: "button",
+          classList: s ? void 0 : [
+            "flex items-center justify-between rounded-md border bg-background px-3 py-2 w-full overflow-hidden cursor-pointer",
+            "disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring",
+            n ? "border-danger hover:border-danger-fore" : "border-input not-disabled:hover:border-input-fore"
+          ],
+          className: e,
+          disabled: o,
+          ...h,
+          children: [
+            /* @__PURE__ */ i(
+              w,
+              {
+                as: "span",
+                classList: [
+                  "overflow-hidden overflow-ellipsis whitespace-nowrap",
+                  I ? "text-muted" : "text-text"
+                ],
+                children: K
+              }
+            ),
+            /* @__PURE__ */ N(w, { classList: "relative flex items-center space-x-2", className: a, children: [
+              v && !I ? /* @__PURE__ */ i(
+                "div",
+                {
+                  tabIndex: -1,
+                  role: "button",
+                  className: "size-6 p-1.5 rounded hover:bg-accent cursor-pointer",
+                  "aria-label": x,
+                  onKeyDown: (f) => {
+                    f.key !== "Enter" && f.key !== "Space" || v();
+                  },
+                  onClick: (f) => {
+                    f.stopPropagation(), v();
+                  },
+                  children: d
+                }
+              ) : null,
+              c
+            ] })
+          ]
+        }
+      ),
+      ref: y,
+      onOpen: (f) => S(f?.getBoundingClientRect().width || 0),
       disabled: o,
       children: /* @__PURE__ */ i(
         "ul",
         {
           className: "overflow-y-auto flex flex-col",
           role: "listbox",
-          style: { minWidth: _, maxWidth: "calc(100vw - 3rem)", maxHeight: u },
-          children: r.map(me)
+          style: { minWidth: R, maxWidth: "calc(100vw - 3rem)", maxHeight: u },
+          children: r.map(P)
         }
       )
     }
   );
 }
-function Ee({
+function Me({
   className: e,
   value: t,
   label: r,
@@ -364,16 +400,14 @@ function Ee({
   checkIcon: s,
   onChange: o
 }) {
-  const l = c(() => h(
-    "flex items-center w-full hover:bg-accent rounded p-1 cursor-pointer",
-    e
-  ), [e]);
-  return /* @__PURE__ */ k(
-    "button",
+  return /* @__PURE__ */ N(
+    w,
     {
+      as: "button",
       type: "button",
       role: "option",
-      className: l,
+      classList: "flex items-center w-full hover:bg-accent rounded p-1 cursor-pointer",
+      className: e,
       "aria-selected": n,
       onClick: () => o?.(t),
       children: [
@@ -383,25 +417,27 @@ function Ee({
     }
   );
 }
-function tt({ checked: e, className: t, id: r, name: n, onChange: s, value: o, ...l }) {
-  const u = c(() => h(
-    "relative inline-flex justify-center items-center border border-input w-4.5 h-4.5 rounded-full",
-    "cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed not-disabled:hover:border-input-fore",
-    e ? "[&_i]:bg-primary disabled:[&_i]:bg-text disabled:border-input" : "",
-    t
-  ), [t, e]), p = () => {
-    l.disabled || s?.(!e);
+function et({ checked: e, className: t, id: r, name: n, onChange: s, value: o, error: l, ...u }) {
+  const c = () => {
+    u.disabled || s?.(!e);
   };
-  return /* @__PURE__ */ k(
-    "button",
+  return /* @__PURE__ */ N(
+    w,
     {
+      as: "button",
       type: "button",
       role: "radio",
       id: r || n,
-      className: u,
-      onClick: p,
+      classList: [
+        "relative inline-flex justify-center items-center border w-4.5 h-4.5 rounded-full",
+        "cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed not-disabled:hover:border-input-fore",
+        l ? "border-danger" : "border-input",
+        e ? "[&_i]:bg-primary disabled:[&_i]:bg-text disabled:border-input" : ""
+      ],
+      className: t,
+      onClick: c,
       "aria-checked": e,
-      ...l,
+      ...u,
       children: [
         /* @__PURE__ */ i(
           "i",
@@ -418,8 +454,8 @@ function tt({ checked: e, className: t, id: r, name: n, onChange: s, value: o, .
             name: n,
             checked: e,
             value: o,
-            onChange: p,
-            disabled: l.disabled,
+            onChange: c,
+            disabled: u.disabled,
             style: { position: "absolute", pointerEvents: "none", top: 0, left: 0, width: 1, height: 1, opacity: 0 }
           }
         )
@@ -427,65 +463,70 @@ function tt({ checked: e, className: t, id: r, name: n, onChange: s, value: o, .
     }
   );
 }
-const De = S(({
-  className: e,
-  checked: t,
-  onChange: r,
-  value: n,
-  id: s,
-  name: o,
-  ...l
-}, u) => {
-  const p = c(() => I(h(
-    "inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
-    "w-11",
-    t ? "bg-primary" : "bg-input"
-  ), e), [e, t]), d = c(() => I(
-    "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
-    e
-  ), [e]), f = () => {
-    l.disabled || r?.(!t);
+function tt({
+  checked: e,
+  onChange: t,
+  value: r,
+  id: n,
+  name: s,
+  error: o,
+  ref: l,
+  ...u
+}) {
+  const c = () => {
+    u.disabled || t?.(!e);
   };
-  return /* @__PURE__ */ k(
-    "button",
+  return /* @__PURE__ */ N(
+    w,
     {
+      as: "button",
       type: "button",
       role: "switch",
-      id: s || o,
-      className: p,
-      onClick: f,
-      "aria-checked": t,
-      ...l,
+      id: n || s,
+      classList: [
+        "inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+        "w-11",
+        e ? "bg-primary disabled:bg-text" : "bg-input"
+      ],
+      onClick: c,
+      "aria-checked": e,
+      "aria-invalid": o,
+      ...u,
       children: [
-        /* @__PURE__ */ i("span", { className: d, style: { transform: t ? "translateX(100%)" : "" } }),
+        /* @__PURE__ */ i(
+          "span",
+          {
+            className: "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
+            style: { transform: e ? "translateX(100%)" : "" }
+          }
+        ),
         /* @__PURE__ */ i(
           "input",
           {
-            ref: u,
+            ref: l,
             type: "checkbox",
             "aria-hidden": "true",
-            name: o,
-            checked: t,
-            value: n,
-            onChange: f,
-            disabled: l.disabled,
+            name: s,
+            checked: e,
+            value: r,
+            onChange: c,
+            disabled: u.disabled,
             style: { position: "absolute", pointerEvents: "none", top: 0, left: 0, width: 1, height: 1, opacity: 0 }
           }
         )
       ]
     }
   );
-});
-De.displayName = "Switch";
+}
 function nt({ header: e, show: t, children: r, timeout: n = 300, ...s }) {
-  const o = F(null), l = F(0), u = F(0), p = F(!0);
-  return M(() => {
+  const o = F(null), l = F(0), u = F(0), c = F(!0);
+  return L(() => {
     u.current = n;
-  }, [n]), Q(() => {
+  }, [n]), V(() => {
     if (!o.current) return;
-    if (o.current.style.overflow = "hidden", o.current.style.opacity = "1", p.current) {
-      p.current = !1, o.current.style.height = t ? "auto" : "0px", t ? window.requestAnimationFrame(() => {
+    if (o.current.style.overflow = "hidden", o.current.style.opacity = "1", c.current) {
+      c.current = !1, o.current.style.height = t ? "auto" : "0px", t ? window.requestAnimationFrame(() => {
         o.current && (l.current = o.current.offsetHeight);
       }) : (window.requestAnimationFrame(() => {
         o.current && (o.current.style.height = "auto", l.current = o.current.offsetHeight, o.current.style.height = "0px");
@@ -499,16 +540,16 @@ function nt({ header: e, show: t, children: r, timeout: n = 300, ...s }) {
         o.current && (o.current.style.height = `${t ? l.current : 0}px`, o.current.style.opacity = t ? "1" : "0");
       });
     });
-    let f;
-    const y = () => {
+    let g;
+    const m = () => {
       o.current && (t ? (o.current.style.height = "auto", o.current.style.overflow = "", o.current.style.opacity = "", window.requestAnimationFrame(() => {
         o.current && (l.current = o.current.offsetHeight);
       })) : o.current.style.height = "0px");
     };
-    return u.current === 0 ? y() : f = window.setTimeout(y, u.current), () => {
-      d.forEach(window.cancelAnimationFrame), f && window.clearTimeout(f);
+    return u.current === 0 ? m() : g = window.setTimeout(m, u.current), () => {
+      d.forEach(window.cancelAnimationFrame), g && window.clearTimeout(g);
     };
-  }, [t]), /* @__PURE__ */ k("div", { ...s, children: [
+  }, [t]), /* @__PURE__ */ N("div", { ...s, children: [
     e,
     /* @__PURE__ */ i(
       "div",
@@ -523,7 +564,7 @@ function nt({ header: e, show: t, children: r, timeout: n = 300, ...s }) {
     )
   ] });
 }
-const je = S(({
+const Re = se(({
   children: e,
   position: t = "bottom",
   label: r,
@@ -532,57 +573,57 @@ const je = S(({
   offset: o = { x: 0, y: 6 },
   clientPoint: l = !1,
   disabled: u
-}, p) => {
-  const [d, f] = E(!1), y = K(), { refs: C, floatingStyles: N, context: m } = H({
-    nodeId: y,
+}, c) => {
+  const [d, g] = E(!1), m = Z(), { refs: v, floatingStyles: C, context: p } = _({
+    nodeId: m,
     open: d,
     placement: t,
     middleware: [
-      ie(),
-      se(),
-      le({ mainAxis: o.y, crossAxis: o.x })
+      ae(),
+      ue(),
+      ce({ mainAxis: o.y, crossAxis: o.x })
     ],
-    whileElementsMounted: u ? void 0 : oe,
-    onOpenChange: f
-  }), { getReferenceProps: a, getFloatingProps: v } = U([
-    Ne(m, { enabled: !u }),
-    ke(m, { enabled: l })
-  ]), { isMounted: g, styles: x } = L(m, {
+    whileElementsMounted: u ? void 0 : le,
+    onOpenChange: g
+  }), { getReferenceProps: a, getFloatingProps: x } = J([
+    xe(p, { enabled: !u }),
+    we(p, { enabled: l })
+  ]), { isMounted: b, styles: h } = X(p, {
     duration: s,
     initial: { opacity: 0, transform: "scale(0.8)" }
   });
-  re(p, () => ({
-    floating: C.floating,
-    reference: C.reference,
-    open: () => f(!0),
-    close: () => f(!1)
-  })), M(() => {
-    u && f(!1);
+  ie(c, () => ({
+    floating: v.floating,
+    reference: v.reference,
+    open: () => g(!0),
+    close: () => g(!1)
+  })), L(() => {
+    u && g(!1);
   }, [u]);
-  const w = typeof e == "string" ? /* @__PURE__ */ i("span", { children: e }) : e;
-  return /* @__PURE__ */ k(te, { children: [
-    Z(z.only(w), {
-      ref: C.setReference,
+  const y = typeof e == "string" ? /* @__PURE__ */ i("span", { children: e }) : e;
+  return /* @__PURE__ */ N(ne, { children: [
+    W(z.only(y), {
+      ref: v.setReference,
       ...a()
     }),
-    /* @__PURE__ */ i(W, { disabled: u || !g, children: /* @__PURE__ */ i("div", { role: "tooltip", className: "z-[9999]", ref: C.setFloating, ...v({ style: N }), children: /* @__PURE__ */ i(ue, { className: n, style: x, children: r }) }) })
+    /* @__PURE__ */ i(H, { disabled: u || !b, children: /* @__PURE__ */ i("div", { role: "tooltip", className: "z-9999", ref: v.setFloating, ...x({ style: C }), children: /* @__PURE__ */ i(de, { className: n, style: h, children: r }) }) })
   ] });
 });
-je.displayName = "Tooltip";
-const ue = S(({
+Re.displayName = "Tooltip";
+const de = se(({
   className: e,
   custom: t,
   ...r
 }, n) => {
-  const s = c(() => I(h(
+  const s = k(() => O(M(
     "relative w-auto h-auto outline-none transition-transform ease-in-out whitespace-pre",
     t ? null : "border border-accent rounded shadow-md px-3 py-1 bg-background"
   ), e), [e, t]);
   return /* @__PURE__ */ i("div", { ref: n, className: s, ...r });
 });
-ue.displayName = "TooltipContent";
-function Oe({ variant: e, size: t }) {
-  return h(
+de.displayName = "TooltipContent";
+function Pe({ variant: e, size: t }) {
+  return M(
     "inline-flex items-center justify-center whitespace-nowrap transition-colors rounded-md cursor-pointer",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
     "disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-auto",
@@ -602,90 +643,89 @@ function Oe({ variant: e, size: t }) {
   );
 }
 function rt({ size: e, variant: t, className: r, ...n }) {
-  const s = c(() => h(Oe({ size: e, variant: t }), r), [e, t, r]);
+  const s = k(() => O(Pe({ size: e, variant: t }), r), [e, t, r]);
   return /* @__PURE__ */ i("button", { className: s, type: "button", ...n });
 }
+const Ee = { open: 150, close: 75 };
 function ot({
   open: e,
   children: t,
-  timeout: r = 150,
+  timeout: r = Ee,
   padding: n = "0.85rem",
   verticalAlign: s = "center",
   closeOnOverlay: o,
   closeOnEsc: l,
   onExited: u,
-  className: p,
+  className: c,
   onOpenChange: d,
-  size: f,
-  ...y
+  size: g,
+  ...m
 }) {
-  const C = F(u), N = F(!1), m = K(), { refs: a, context: v } = H({ open: e, onOpenChange: d, nodeId: m }), { getFloatingProps: g } = U([
-    Ie(v, {
+  const v = F(u), C = F(!1), p = Z(), { refs: a, context: x } = _({ open: e, onOpenChange: d, nodeId: p }), { getFloatingProps: b } = J([
+    ve(x, {
       enabled: l,
       escapeKey: l,
       outsidePress: !1
     })
-  ]), { isMounted: x, styles: w } = L(v, {
+  ]), { isMounted: h, styles: y } = X(x, {
     duration: r,
     initial: { opacity: 0, transform: "scale(0.8)" }
   });
-  M(() => {
-    N.current !== x && (N.current = x, !x && C.current?.());
-  }, [x]);
-  const _ = j(() => {
+  L(() => {
+    C.current !== h && (C.current = h, !h && v.current?.());
+  }, [h]);
+  const R = B(() => {
     o && d?.(!1);
   }, [d, o]);
-  C.current = u;
-  const D = c(() => h("grid bg-backdrop z-40 justify-items-center", {
+  v.current = u;
+  const S = k(() => M("grid bg-backdrop z-40 justify-items-center transition ease-in-out", {
     "place-items-start items-start": s === "start",
     "place-items-end": s === "end",
     "place-items-center": s === "center" || !s
-  }), [s]), O = c(() => I("transition ease-in-out", p), [p]);
-  return /* @__PURE__ */ i(W, { disabled: !x, children: /* @__PURE__ */ i(
-    J,
+  }), [s]);
+  return /* @__PURE__ */ i(H, { disabled: !h, children: /* @__PURE__ */ i(
+    Q,
     {
-      className: D,
+      className: S,
       "data-testid": "vs-dialog-overlay",
-      onClick: _,
-      style: { padding: n, opacity: w.opacity },
+      onClick: R,
+      style: { padding: n, opacity: y.opacity },
       lockScroll: !0,
       children: /* @__PURE__ */ i(
-        de,
+        Se,
         {
           ref: a.setFloating,
-          className: O,
+          className: c,
           role: "dialog",
-          size: f,
-          style: w,
+          size: g,
           onClick: q,
-          ...g({ ...y }),
+          ...b({ ...m, style: y }),
           children: t
         }
       )
     }
   ) });
 }
-const de = S(({
-  size: e,
-  className: t,
-  ...r
-}, n) => {
-  const s = c(() => h(
-    e ? "flex flex-col bg-background shadow-lg p-5 rounded" : null,
+function Se({ size: e, ...t }) {
+  return /* @__PURE__ */ i(
+    w,
     {
-      "w-full max-w-dialog-sm": e === "small",
-      "w-full max-w-dialog-md": e === "medium",
-      "w-full max-w-dialog-lg": e === "large"
-    },
-    t
-  ), [e, t]);
-  return /* @__PURE__ */ i("div", { ref: n, className: s, ...r });
-});
-de.displayName = "DialogContent";
-const $e = { open: 250, close: 150 };
+      classList: [
+        e ? "flex flex-col bg-background shadow-lg p-5 rounded" : null,
+        {
+          "w-full max-w-dialog-sm": e === "small",
+          "w-full max-w-dialog-md": e === "medium",
+          "w-full max-w-dialog-lg": e === "large"
+        }
+      ],
+      ...t
+    }
+  );
+}
+const Be = { open: 250, close: 150 };
 function it({
   open: e,
-  timeout: t = $e,
+  timeout: t = Be,
   onOpenChange: r,
   position: n = "right",
   overlay: s,
@@ -693,23 +733,23 @@ function it({
   onOpen: l,
   ...u
 }) {
-  const p = K(), d = F(!1), f = F(l), y = F(o), { refs: C, context: N } = H({ open: e, onOpenChange: r, nodeId: p }), { isMounted: m, styles: a } = L(N, {
+  const c = Z(), d = F(!1), g = F(l), m = F(o), { refs: v, context: C } = _({ open: e, onOpenChange: r, nodeId: c }), { isMounted: p, styles: a } = X(C, {
     duration: t,
     initial() {
-      let g = "translateX(75%)";
-      return n === "left" ? g = "translateX(-75%)" : n === "top" ? g = "translateY(-75%)" : n === "bottom" && (g = "translateY(75%)"), { opacity: 0, transform: g };
+      let b = "translateX(75%)";
+      return n === "left" ? b = "translateX(-75%)" : n === "top" ? b = "translateY(-75%)" : n === "bottom" && (b = "translateY(75%)"), { opacity: 0, transform: b };
     }
   });
-  M(() => {
-    if (d.current !== m) {
-      if (d.current = m, m) {
-        f.current?.();
+  L(() => {
+    if (d.current !== p) {
+      if (d.current = p, p) {
+        g.current?.();
         return;
       }
-      y.current?.();
+      m.current?.();
     }
-  }, [m]);
-  const v = c(() => h(
+  }, [p]);
+  const x = k(() => M(
     "fixed transition-transform z-30",
     {
       "top-0 right-0 h-full max-h-screen": n === "right",
@@ -718,9 +758,9 @@ function it({
       "bottom-0 left-0 right-0 w-full max-w-screen": n === "bottom"
     }
   ), [n]);
-  return y.current = o, f.current = l, /* @__PURE__ */ k(W, { disabled: !m, children: [
+  return m.current = o, g.current = l, /* @__PURE__ */ N(H, { disabled: !p, children: [
     s ? /* @__PURE__ */ i(
-      J,
+      Q,
       {
         className: "bg-backdrop",
         style: { opacity: a.opacity },
@@ -730,55 +770,55 @@ function it({
     /* @__PURE__ */ i(
       "div",
       {
-        ref: C.setFloating,
-        className: v,
+        ref: v.setFloating,
+        className: x,
         role: "dialog",
         style: a,
-        children: /* @__PURE__ */ i(Be, { ...u })
+        children: /* @__PURE__ */ i(De, { ...u })
       }
     )
   ] });
 }
-function Be({ className: e, unstyled: t, ...r }) {
-  const n = c(() => t ? e : I(h(
+function De({ className: e, customStyle: t, ...r }) {
+  const n = k(() => t ? e : O(M(
     "relative bg-background min-w-full min-h-full border border-input shadow-lg"
   ), e), [t, e]);
   return /* @__PURE__ */ i("div", { className: n, ...r });
 }
-function Xe({ size: e = 20, label: t = "Loading...", ...r }) {
-  return /* @__PURE__ */ k("div", { role: "status", ...r, children: [
-    /* @__PURE__ */ k("svg", { "aria-hidden": "true", className: "text-accent animate-spin fill-primary", width: e, height: e, viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+function $e({ size: e = 20, label: t = "Loading...", ...r }) {
+  return /* @__PURE__ */ N("div", { role: "status", ...r, children: [
+    /* @__PURE__ */ N("svg", { "aria-hidden": "true", className: "text-accent animate-spin fill-primary", width: e, height: e, viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
       /* @__PURE__ */ i("path", { d: "M100 50.6a50 50 0 1 1-100 0 50 50 0 0 1 100 0Zm-91 0a41 41 0 1 0 82 0 41 41 0 0 0-82 0Z", fill: "currentColor" }),
       /* @__PURE__ */ i("path", { d: "M94 39a4.2 4.2 0 0 0 3-5.4A50 50 0 0 0 41.7 1.3c-2.4.4-3.9 2.9-3.2 5.3a5 5 0 0 0 5.6 3.5A41 41 0 0 1 88 36 5 5 0 0 0 94 39Z", fill: "currentFill" })
     ] }),
     /* @__PURE__ */ i("span", { className: "sr-only", children: t })
   ] });
 }
-function He({ type: e, label: t, message: r }) {
-  const { icons: n } = Ye();
-  return /* @__PURE__ */ k("div", { className: "flex items-center px-4 py-3 w-80 text-sm bg-background border border-input rounded-lg shadow-md m-2", children: [
-    e ? /* @__PURE__ */ k("figure", { className: "mr-2", children: [
+function je({ type: e, label: t, message: r }) {
+  const { icons: n } = Xe();
+  return /* @__PURE__ */ N("div", { className: "flex items-center px-4 py-3 w-80 text-sm bg-background border border-input rounded-lg shadow-md m-2", children: [
+    e ? /* @__PURE__ */ N("figure", { className: "mr-2", children: [
       e === "success" && n?.success ? n.success : null,
       e === "info" && n?.info ? n.info : null,
       e === "error" && n?.error ? n.error : null,
       e === "warn" && n?.warn ? n.warn : null,
-      e === "loading" ? /* @__PURE__ */ i(Xe, { size: 20 }) : null
+      e === "loading" ? /* @__PURE__ */ i($e, { size: 20 }) : null
     ] }) : null,
-    /* @__PURE__ */ k("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ N("div", { className: "space-y-2", children: [
       /* @__PURE__ */ i("p", { className: "font-medium leading-none", children: t }),
       r ? /* @__PURE__ */ i("p", { children: r }) : null
     ] })
   ] });
 }
-function ee() {
+function te() {
 }
-class Le {
+class Oe {
   /** システムで１つしか存在しない前提とする */
-  notify = ee;
+  notify = te;
   lastId = 0;
   /** internal use only */
   subscribe = (t) => (this.notify = t, () => {
-    this.notify = ee;
+    this.notify = te;
   });
   add = (t, r = {}) => {
     this.lastId += 1;
@@ -796,8 +836,8 @@ class Le {
     this.lastId = 0;
   };
 }
-const fe = new Le();
-function We({
+const fe = new Oe();
+function _e({
   id: e,
   type: t,
   index: r,
@@ -806,155 +846,174 @@ function We({
   children: o,
   inverted: l,
   timeout: u = 250,
-  max: p = 3
+  max: c = 3
 }) {
-  const d = F(!1), [f, y] = E(!1), { context: C, refs: N } = H({ open: f, onOpenChange: y, nodeId: e }), { isMounted: m, styles: a } = L(C, {
+  const d = F(!1), [g, m] = E(!1), { context: v, refs: C } = _({ open: g, onOpenChange: m, nodeId: e }), { isMounted: p, styles: a } = X(v, {
     duration: u,
     initial: { opacity: 0, transform: `translateY(${l ? "" : "-"}50%)` }
   });
-  ne(() => {
-    y(r <= p);
-  }, [r, p]), M(() => {
-    d.current !== m && (m || fe.remove(e), d.current = m);
-  }, [m, e]), M(() => {
+  oe(() => {
+    m(r <= c);
+  }, [r, c]), L(() => {
+    d.current !== p && (p || fe.remove(e), d.current = p);
+  }, [p, e]), L(() => {
     if (!n) return;
-    const x = window.setTimeout(() => y(!1), n);
-    return () => window.clearTimeout(x);
+    const h = window.setTimeout(() => m(!1), n);
+    return () => window.clearTimeout(h);
   }, [n, e]);
-  const v = j(() => {
-    t !== "loading" && y(!1);
-  }, [t]), g = c(() => h(
+  const x = B(() => {
+    t !== "loading" && m(!1);
+  }, [t]), b = k(() => U(
     "relative flex w-fit transition-transform ease-in-out cursor-pointer",
     s
   ), [s]);
-  return m ? /* @__PURE__ */ i(
+  return p ? /* @__PURE__ */ i(
     "li",
     {
       role: "log",
       tabIndex: -1,
-      ref: N.setFloating,
-      className: g,
+      ref: C.setFloating,
+      className: b,
       style: a,
-      onClick: v,
+      onClick: x,
       children: o
     }
   ) : null;
 }
-const pe = xe({});
-function Ye() {
-  return ve(pe);
+const pe = me({});
+function Xe() {
+  return he(pe);
 }
 function st({
   className: e,
   margin: t = 16,
   position: r = "top-left",
   max: n,
-  ListItem: s = He,
+  ListItem: s = je,
   icons: o
 }) {
-  const l = c(() => {
+  const l = k(() => {
     const a = { position: "fixed" };
     return r.indexOf("top") > -1 ? a.top = t : r.indexOf("bottom") > -1 && (a.bottom = t), r.indexOf("left") > -1 ? (a.left = t, a.alignItems = "flex-start") : r.indexOf("right") > -1 ? (a.right = t, a.alignItems = "flex-end") : (a.left = "50%", a.alignItems = "center", a.transform = "translateX(-50%)"), a;
-  }, [t, r]), u = c(() => h(
+  }, [t, r]), u = k(() => U(
     "flex flex-col z-40 overflow-hidden",
     e
-  ), [e]), p = c(() => r?.startsWith("bottom") || !1, [r]), d = F(/* @__PURE__ */ new Map()), [f, y] = E([]), C = E(0)[1];
-  Q(() => fe.subscribe((a) => {
-    ye(() => {
+  ), [e]), c = k(() => r?.startsWith("bottom") || !1, [r]), d = F(/* @__PURE__ */ new Map()), [g, m] = E([]), v = E(0)[1];
+  V(() => fe.subscribe((a) => {
+    ge(() => {
       if (a.type === "add")
-        d.current.set(a.id, a.config), y((v) => [...v, a.id]);
+        d.current.set(a.id, a.config), m((x) => [...x, a.id]);
       else if (a.type === "remove") {
         if (!d.current.delete(a.id)) return;
-        y((g) => {
-          const x = new Set(g);
-          return x.has(a.id) ? (x.delete(a.id), Array.from(x)) : g;
+        m((b) => {
+          const h = new Set(b);
+          return h.has(a.id) ? (h.delete(a.id), Array.from(h)) : b;
         });
       } else if (a.type === "update") {
-        const v = d.current.get(a.id);
-        if (!v) return;
-        d.current.set(a.id, { ...v, ...a.config }), C((g) => g + 1);
+        const x = d.current.get(a.id);
+        if (!x) return;
+        d.current.set(a.id, { ...x, ...a.config }), v((b) => b + 1);
       }
     });
   }), []);
-  const N = c(() => ({ icons: o }), [o]), m = f.length;
-  return /* @__PURE__ */ i(W, { children: /* @__PURE__ */ i("ol", { className: u, style: l, "aria-live": "polite", children: /* @__PURE__ */ i(pe.Provider, { value: N, children: f.map((a, v) => {
-    const g = d.current.get(a);
-    if (!g) return null;
-    const { className: x, duration: w, ..._ } = g;
+  const C = k(() => ({ icons: o }), [o]), p = g.length;
+  return /* @__PURE__ */ i(H, { children: /* @__PURE__ */ i("ol", { className: u, style: l, "aria-live": "polite", children: /* @__PURE__ */ i(pe.Provider, { value: C, children: g.map((a, x) => {
+    const b = d.current.get(a);
+    if (!b) return null;
+    const { className: h, duration: y, ...R } = b;
     return /* @__PURE__ */ i(
-      We,
+      _e,
       {
         id: a,
-        index: m - v,
-        className: x,
-        duration: w,
-        inverted: p,
+        index: p - x,
+        className: h,
+        duration: y,
+        inverted: c,
         max: n,
-        children: we(s, _)
+        children: re(s, R)
       },
       a
     );
   }) }) }) });
 }
-function lt({ className: e, ...t }) {
-  const r = c(() => I(
-    "inline-block animate-pulse rounded-md bg-accent",
-    e
-  ), [e]);
-  return /* @__PURE__ */ i("div", { className: r, ...t });
-}
-function at({ className: e, ...t }) {
-  const r = c(() => h(
-    "flex items-center justify-center",
-    "[&_button]:rounded-none [&_:first-child]:rounded-bl [&_:first-child]:rounded-tl [&_:last-child]:rounded-br [&_:last-child]:rounded-tr",
-    "[&_:first-child]:border-r-0 [&_:last-child]:border-l-0",
-    e
-  ), [e]);
-  return /* @__PURE__ */ i("div", { role: "group", className: r, ...t });
+function lt(e) {
+  return /* @__PURE__ */ i(w, { classList: "inline-block animate-pulse rounded-md bg-accent", ...e });
 }
-function ct({ value: e, max: t, className: r, ...n }) {
-  const s = c(() => e ? Math.round(e / t * 100) : 0, [e, t]), o = c(() => I("relative overflow-hidden rounded-full bg-primary", r), [r]);
-  return /* @__PURE__ */ i("div", { role: "progressbar", className: o, "aria-valuemax": t, "aria-valuemin": 0, ...n, children: /* @__PURE__ */ i(
-    "div",
+function at(e) {
+  return /* @__PURE__ */ i(
+    w,
     {
-      className: "h-full w-full flex-1 bg-input transition-all origin-right",
-      style: { transform: `translateX(${s > 100 ? 100 : s}%)` }
+      role: "group",
+      classList: [
+        "flex items-center justify-center",
+        "[&_button]:rounded-none **:first:rounded-bl **:first:rounded-tl **:last:rounded-br **:last:rounded-tr",
+        "**:first:border-r-0 **:last:border-l-0"
+      ],
+      ...e
     }
-  ) });
+  );
 }
-function ut({ className: e, orientation: t = "horizontal", ...r }) {
-  const n = c(() => I(h(
-    "border-0 p-0 shrink-0 bg-input",
-    t === "horizontal" ? "h-[1px] w-full" : "w-[1px] h-full"
-  ), e), [e, t]);
-  return /* @__PURE__ */ i("hr", { className: n, role: "none", ...r });
+function ut({ value: e, max: t, ...r }) {
+  const n = k(() => e ? Math.min(100, Math.round(e / t * 100)) : 0, [e, t]);
+  return /* @__PURE__ */ i(
+    w,
+    {
+      role: "progressbar",
+      classList: "relative overflow-hidden rounded-full bg-primary",
+      "aria-valuemax": t,
+      "aria-valuemin": 0,
+      ...r,
+      children: /* @__PURE__ */ i(
+        w,
+        {
+          className: "h-full w-full flex-1 bg-input transition-all origin-right",
+          style: { transform: `translateX(${n}%)` }
+        }
+      )
+    }
+  );
+}
+function ct({ orientation: e = "horizontal", ...t }) {
+  return /* @__PURE__ */ i(
+    w,
+    {
+      as: "hr",
+      role: "none",
+      classList: [
+        "border-0 p-0 shrink-0 bg-input",
+        e === "horizontal" ? "h-px w-full" : "w-px h-full"
+      ],
+      ...t
+    }
+  );
 }
 export {
   nt as Accordion,
+  w as Base,
   rt as Button,
   at as ButtonGroup,
-  Ve as Checkbox,
+  Qe as Checkbox,
   ot as Dialog,
-  ut as Divider,
-  Je as FormField,
-  Te as FormLabel,
-  Re as Input,
-  Qe as InputField,
-  ae as Popover,
-  W as Portal,
-  ct as Progress,
-  tt as Radio,
-  et as Select,
+  ct as Divider,
+  Ke as FormField,
+  ke as FormLabel,
+  Ue as Input,
+  Ge as InputField,
+  Te as Popover,
+  H as Portal,
+  ut as Progress,
+  et as Radio,
+  Ve as Select,
   it as Sheet,
   lt as Skeleton,
-  Xe as Spinner,
-  De as Switch,
-  Ae as Textarea,
+  $e as Spinner,
+  tt as Switch,
+  Je as Textarea,
   st as Toast,
-  He as ToastItem,
-  je as Tooltip,
-  pt as clsx,
-  I as merge,
+  je as ToastItem,
+  Re as Tooltip,
+  M as cn,
+  O as merge,
   fe as toast,
-  Oe as varientButton
+  Pe as varientButton
 };