blunt-ui 0.3.2 → 0.3.3

package/dist/index.js

@@ -1,13 +1,13 @@
-import { jsx as s, jsxs as T } from "react/jsx-runtime";
-import e, { css as t, keyframes as _, ThemeProvider as jo } from "styled-components";
-import $o, { useId as Z, useState as N, useRef as X, useEffect as F, useContext as mo, createContext as So, forwardRef as Co, createElement as co, useCallback as R, useMemo as po } from "react";
-import { createPortal as zo, flushSync as _o } from "react-dom";
-const K = (o, r, n) => t`
+import { jsx as s, jsxs as C, Fragment as Lo } from "react/jsx-runtime";
+import i, { css as t, keyframes as L, ThemeProvider as Fo, createGlobalStyle as Bo } from "styled-components";
+import po, { useId as A, useState as M, useContext as io, createContext as ao, forwardRef as ko, createElement as to, useRef as G, useEffect as j, useCallback as V, useMemo as lo } from "react";
+import { createPortal as Co } from "react-dom";
+const H = (o, r, n) => t`
   background: ${r};
   color: ${n};
   border: ${o.brutalism.borderWidth} solid ${o.colors.neutral[900]};
   box-shadow: 2px 2px 0 ${o.colors.neutral[900]};
-`, Mo = e.span`
+`, Vo = i.span`
   display: inline-flex;
   align-items: center;
   font-weight: 700;
@@ -31,32 +31,32 @@ const K = (o, r, n) => t`
 })[o]}
 
   ${({ $variant: o, theme: r }) => r.brutalism ? {
-  primary: K(
+  primary: H(
     r,
     r.colors.primary[500],
     r.colors.primary.contrast
   ),
-  neutral: K(
+  neutral: H(
     r,
     r.colors.neutral[200],
     r.colors.neutral[900]
   ),
-  success: K(
+  success: H(
     r,
     r.colors.success[50],
     r.colors.success[500]
   ),
-  error: K(
+  error: H(
     r,
     r.colors.error[50],
     r.colors.error[500]
   ),
-  warning: K(
+  warning: H(
     r,
     r.colors.warning[50],
     r.colors.warning[500]
   ),
-  info: K(r, r.colors.info[50], r.colors.info[500])
+  info: H(r, r.colors.info[50], r.colors.info[500])
 }[o] : {
   primary: t`
         background: ${r.colors.primary[50]};
@@ -84,16 +84,16 @@ const K = (o, r, n) => t`
       `
 }[o]}
 `;
-function Vo({
+function _o({
   variant: o = "primary",
   size: r = "md",
   children: n,
-  ...i
+  ...e
 }) {
-  return /* @__PURE__ */ s(Mo, { $variant: o, $size: r, ...i, children: n });
+  return /* @__PURE__ */ s(Vo, { $variant: o, $size: r, ...e, children: n });
 }
-Vo.displayName = "Badge";
-const eo = (o, r, n) => t`
+_o.displayName = "Badge";
+const oo = (o, r, n) => t`
   background-color: ${r};
   color: ${n};
   border: ${o.brutalism.borderWidth} solid ${o.colors.neutral[900]};
@@ -106,7 +106,7 @@ const eo = (o, r, n) => t`
     transform: translate(2px, 2px);
     box-shadow: 2px 2px 0 ${o.colors.neutral[900]};
   }
-`, Ko = e.button`
+`, jo = i.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -126,17 +126,17 @@ const eo = (o, r, n) => t`
   }
 
   ${({ $variant: o, theme: r }) => r.brutalism ? {
-  primary: eo(
+  primary: oo(
     r,
     r.colors.primary[500],
     r.colors.primary.contrast
   ),
-  secondary: eo(
+  secondary: oo(
     r,
     r.colors.neutral[100],
     r.colors.neutral[900]
   ),
-  outline: eo(
+  outline: oo(
     r,
     r.colors.neutral[0],
     r.colors.neutral[900]
@@ -183,44 +183,44 @@ const eo = (o, r, n) => t`
       `
 })[o]}
 `;
-function Fo({
+function so({
   ref: o,
   as: r,
   href: n,
-  variant: i = "primary",
-  size: d = "md",
+  variant: e = "primary",
+  size: l = "md",
   isLoading: a,
   disabled: c,
-  children: u,
-  ...g
+  children: d,
+  ...p
 }) {
   return /* @__PURE__ */ s(
-    Ko,
+    jo,
     {
       ref: o,
       as: r ?? (n ? "a" : "button"),
       href: n,
-      $variant: i,
-      $size: d,
+      $variant: e,
+      $size: l,
       disabled: a || c,
-      ...g,
-      children: a ? "Loading..." : u
+      ...p,
+      children: a ? "Loading..." : d
     }
   );
 }
-Fo.displayName = "Button";
-const Ho = e.div`
+so.displayName = "Button";
+const Ao = i.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme: o }) => o.spacing[1]};
   width: ${({ $fullWidth: o }) => o ? "100%" : "auto"};
-`, Yo = e.label`
+`, Ro = i.label`
   font-size: ${({ theme: o }) => o.fontSizes.sm};
   font-weight: ${({ theme: o }) => o.brutalism ? "700" : "500"};
-`, Uo = e.span`
+`, Yo = i.span`
   font-size: ${({ theme: o }) => o.fontSizes.xs};
   color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
-`, qo = e.div`
+`, Ho = i.div`
   display: flex;
   align-items: center;
   border-radius: ${({ theme: o }) => o.radius.md};
@@ -256,10 +256,6 @@ const Ho = e.div`
   outlined: t`
         border: 2px solid ${r.colors.primary[500]};
         background-color: ${r.colors.neutral[0]};
-      `,
-  filled: t`
-        border: 1px solid transparent;
-        background-color: ${r.colors.neutral[100]};
       `
 }[o]}
 
@@ -273,7 +269,7 @@ const Ho = e.div`
   &:focus-within {
     box-shadow: ${({ theme: o }) => o.shadows.focusRing};
   }
-`, Go = e.input`
+`, Uo = i.input`
   flex: 1;
   border: none;
   outline: none;
@@ -284,11 +280,11 @@ const Ho = e.div`
     cursor: not-allowed;
     opacity: 0.6;
   }
-`, xo = e.div`
+`, fo = i.div`
   display: inline-flex;
   align-items: center;
   margin: 0 ${({ theme: o }) => o.spacing[1]};
-`, Xo = e.button`
+`, Ko = i.button`
   display: inline-flex;
   align-items: center;
   margin: 0 ${({ theme: o }) => o.spacing[1]};
@@ -302,271 +298,181 @@ const Ho = e.div`
     opacity: 0.8;
   }
 `;
-function Zo({
+function qo({
   ref: o,
   type: r = "text",
   size: n = "md",
-  variant: i = "default",
-  label: d,
+  variant: e = "default",
+  label: l,
   helperText: a,
   error: c,
-  leftElement: u,
-  rightElement: g,
-  clearable: f,
-  onClear: $,
-  fullWidth: w,
-  id: y,
-  value: b,
-  defaultValue: m,
-  onChange: W,
-  ...I
+  leftElement: d,
+  rightElement: p,
+  clearable: $,
+  onClear: g,
+  fullWidth: y,
+  id: b,
+  value: f,
+  defaultValue: x,
+  onChange: w,
+  ...S
 }) {
-  const x = Z(), P = y ?? x, O = `${P}-hint`, [D, h] = N(m ?? ""), v = b !== void 0, k = v ? b : D, B = typeof c == "string" ? c : void 0, A = !!(a || c), j = (L) => {
-    v || h(L.target.value), W?.(L);
-  }, M = () => {
-    v || h(""), $?.();
+  const T = A(), z = b ?? T, I = `${z}-hint`, [k, m] = M(x ?? ""), v = f !== void 0, D = v ? f : k, W = typeof c == "string" ? c : void 0, F = !!(a || c), O = (P) => {
+    v || m(P.target.value), w?.(P);
+  }, U = () => {
+    v || m(""), g?.();
   };
-  return /* @__PURE__ */ T(Ho, { $fullWidth: w, children: [
-    d && /* @__PURE__ */ s(Yo, { htmlFor: P, children: d }),
-    /* @__PURE__ */ T(qo, { $size: n, $variant: i, $error: !!c, children: [
-      u && /* @__PURE__ */ s(xo, { children: u }),
+  return /* @__PURE__ */ C(Ao, { $fullWidth: y, children: [
+    l && /* @__PURE__ */ s(Ro, { htmlFor: z, children: l }),
+    /* @__PURE__ */ C(Ho, { $size: n, $variant: e, $error: !!c, children: [
+      d && /* @__PURE__ */ s(fo, { children: d }),
       /* @__PURE__ */ s(
-        Go,
+        Uo,
         {
-          id: P,
+          id: z,
           ref: o,
           type: r,
-          value: k,
-          onChange: j,
-          ...I,
+          value: D,
+          onChange: O,
+          ...S,
           "aria-invalid": !!c,
-          "aria-describedby": A ? O : void 0
+          "aria-describedby": F ? I : void 0
         }
       ),
-      f && k && /* @__PURE__ */ s(
-        Xo,
+      $ && D && /* @__PURE__ */ s(
+        Ko,
         {
           type: "button",
-          onClick: M,
+          onClick: U,
           "aria-label": "Clear input",
           children: "✕"
         }
       ),
-      g && /* @__PURE__ */ s(xo, { children: g })
+      p && /* @__PURE__ */ s(fo, { children: p })
     ] }),
-    A && /* @__PURE__ */ s(Uo, { id: O, $error: !!c, children: B ?? a })
+    F && /* @__PURE__ */ s(Yo, { id: I, $error: !!c, children: W ?? a })
   ] });
 }
-Zo.displayName = "Input";
-const Jo = _`
-  from { opacity: 0; }
-  to { opacity: 1; }
-`, Qo = _`
-  from { opacity: 1; }
-  to { opacity: 0; }
-`, or = _`
-  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
-  to { opacity: 1; transform: scale(1) translateY(0); }
-`, rr = _`
-  from { opacity: 1; transform: scale(1) translateY(0); }
-  to { opacity: 0; transform: scale(0.95) translateY(-8px); }
-`, nr = e.div`
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: ${({ theme: o }) => o.zIndex.modal};
-  animation: ${({ $closing: o }) => o ? Qo : Jo} 0.15s ease
-    forwards;
-`, tr = e.div`
-  position: relative;
-  background: ${({ theme: o }) => o.colors.neutral[0]};
-  border-radius: ${({ theme: o }) => o.radius.md};
-  box-shadow: ${({ theme: o }) => o.brutalism ? `${o.brutalism.shadowOffset} ${o.brutalism.shadowOffset} 0 ${o.colors.neutral[900]}` : "0 20px 60px rgba(0,0,0,0.3)"};
-  border: ${({ theme: o }) => o.brutalism ? `${o.brutalism.borderWidth} solid ${o.colors.neutral[900]}` : "none"};
+qo.displayName = "Input";
+const Go = i.div`
   display: flex;
   flex-direction: column;
-  max-height: 90vh;
-  animation: ${({ $closing: o }) => o ? rr : or} 0.15s ease
-    forwards;
-
-  ${({ $size: o }) => o === "sm" && t`
-      width: min(400px, 90vw);
-    `}
-  ${({ $size: o }) => o === "md" && t`
-      width: min(560px, 90vw);
-    `}
-  ${({ $size: o }) => o === "lg" && t`
-      width: min(720px, 90vw);
-    `}
-  ${({ $size: o }) => o === "fullscreen" && t`
-      width: 100vw;
-      height: 100vh;
-      max-height: 100vh;
-      border-radius: 0;
-    `}
-`, sr = e.div`
+  gap: ${({ theme: o }) => o.spacing[1]};
+  width: ${({ $fullWidth: o }) => o ? "100%" : "auto"};
+`, Jo = i.label`
+  font-size: ${({ theme: o }) => o.fontSizes.sm};
+  font-weight: ${({ theme: o }) => o.brutalism ? "700" : "500"};
+`, Xo = i.span`
+  font-size: ${({ theme: o }) => o.fontSizes.xs};
+  color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
+`, Zo = i.div`
   display: flex;
-  align-items: center;
-  gap: ${({ theme: o }) => o.spacing[2]};
-  padding: ${({ theme: o }) => o.spacing[4]};
-  border-bottom: 1px solid ${({ theme: o }) => o.colors.neutral[200]};
-  flex-shrink: 0;
-`, er = e.h2`
-  flex: 1;
-  font-size: ${({ theme: o }) => o.fontSizes.lg};
-  font-weight: 600;
-  margin: 0;
-`, ir = e.button`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: auto;
-  flex-shrink: 0;
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: none;
-  cursor: pointer;
   border-radius: ${({ theme: o }) => o.radius.md};
-  font-size: 20px;
-  line-height: 1;
-  color: ${({ theme: o }) => o.colors.neutral[500]};
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
 
-  &:hover {
-    background-color: ${({ theme: o }) => o.colors.neutral[100]};
-    color: ${({ theme: o }) => o.colors.neutral[900]};
-  }
+  ${({ $size: o = "md", theme: r }) => ({
+  sm: t`
+        padding: ${r.spacing[1]} ${r.spacing[2]};
+        font-size: ${r.fontSizes.sm};
+      `,
+  md: t`
+        padding: ${r.spacing[2]} ${r.spacing[3]};
+        font-size: ${r.fontSizes.md};
+      `,
+  lg: t`
+        padding: ${r.spacing[3]} ${r.spacing[4]};
+        font-size: ${r.fontSizes.lg};
+      `
+})[o]}
 
-  &:focus-visible {
-    outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
-    outline-offset: 2px;
+  ${({ $variant: o = "default", theme: r }) => r.brutalism ? t`
+        border: ${r.brutalism.borderWidth} solid
+          ${r.colors.neutral[900]};
+        background-color: ${r.colors.neutral[0]};
+        box-shadow: 3px 3px 0 ${r.colors.neutral[900]};
+      ` : {
+  default: t`
+        border: 1px solid ${r.colors.neutral[400]};
+        background-color: ${r.colors.neutral[0]};
+      `,
+  outlined: t`
+        border: 2px solid ${r.colors.primary[500]};
+        background-color: ${r.colors.neutral[0]};
+      `
+}[o]}
+
+  ${({ $error: o, theme: r }) => o && t`
+      border-color: ${r.colors.error[500]};
+      ${r.brutalism && t`
+        box-shadow: 3px 3px 0 ${r.colors.error[500]};
+      `}
+    `}
+
+  &:focus-within {
+    box-shadow: ${({ theme: o }) => o.shadows.focusRing};
   }
-`, ar = e.div`
-  padding: ${({ theme: o }) => o.spacing[4]};
-  overflow-y: auto;
+`, Qo = i.textarea`
   flex: 1;
-`, lr = e.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: ${({ theme: o }) => o.spacing[2]};
-  padding: ${({ theme: o }) => o.spacing[4]};
-  border-top: 1px solid ${({ theme: o }) => o.colors.neutral[200]};
-  flex-shrink: 0;
-`, cr = [
-  "button:not([disabled])",
-  "input:not([disabled])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  "a[href]",
-  '[tabindex]:not([tabindex="-1"])'
-].join(", ");
-function yo(o) {
-  return Array.from(
-    o.querySelectorAll(cr)
-  );
-}
-function dr({
-  open: o,
-  onClose: r,
-  title: n,
-  children: i,
-  footer: d,
-  size: a = "md",
-  closeOnBackdrop: c = !0,
-  closeOnEscape: u = !0,
-  ariaLabelledBy: g,
-  ariaDescribedBy: f
+  border: none;
+  outline: none;
+  background: transparent;
+  font: inherit;
+  resize: vertical;
+  min-height: 80px;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+`;
+function or({
+  ref: o,
+  size: r = "md",
+  variant: n = "default",
+  label: e,
+  helperText: l,
+  error: a,
+  fullWidth: c,
+  id: d,
+  value: p,
+  defaultValue: $,
+  onChange: g,
+  ...y
 }) {
-  const $ = X(null), w = Z(), y = g ?? (n ? w : void 0), [b, m] = N(o), [W, I] = N(!1);
-  return F(() => {
-    if (o)
-      m(!0), I(!1);
-    else if (b) {
-      I(!0);
-      const x = setTimeout(() => {
-        m(!1), I(!1);
-      }, 150);
-      return () => clearTimeout(x);
-    }
-  }, [o, b]), F(() => {
-    if (!o)
-      return;
-    const x = document.body.style.overflow;
-    return document.body.style.overflow = "hidden", () => {
-      document.body.style.overflow = x;
-    };
-  }, [o]), F(() => {
-    if (!o || !$.current)
-      return;
-    const x = $.current, P = document.activeElement;
-    (yo(x)[0] ?? x).focus();
-    const D = (h) => {
-      if (h.key === "Escape" && u) {
-        r();
-        return;
-      }
-      if (h.key !== "Tab")
-        return;
-      const v = yo(x);
-      if (v.length === 0) {
-        h.preventDefault();
-        return;
-      }
-      const k = v[0], B = v[v.length - 1];
-      h.shiftKey ? document.activeElement === k && (h.preventDefault(), B.focus()) : document.activeElement === B && (h.preventDefault(), k.focus());
-    };
-    return document.addEventListener("keydown", D), () => {
-      document.removeEventListener("keydown", D), P?.focus();
-    };
-  }, [o, u, r, b]), b ? zo(
-    /* @__PURE__ */ s(
-      nr,
+  const b = A(), f = d ?? b, x = `${f}-hint`, [w, S] = M($ ?? ""), T = p !== void 0, z = T ? p : w, I = typeof a == "string" ? a : void 0, k = !!(l || a);
+  return /* @__PURE__ */ C(Go, { $fullWidth: c, children: [
+    e && /* @__PURE__ */ s(Jo, { htmlFor: f, children: e }),
+    /* @__PURE__ */ s(Zo, { $size: r, $variant: n, $error: !!a, children: /* @__PURE__ */ s(
+      Qo,
       {
-        $closing: W,
-        onClick: c ? r : void 0,
-        children: /* @__PURE__ */ T(
-          tr,
-          {
-            ref: $,
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-labelledby": y,
-            "aria-describedby": f,
-            $size: a,
-            $closing: W,
-            tabIndex: -1,
-            onClick: (x) => x.stopPropagation(),
-            children: [
-              /* @__PURE__ */ T(sr, { children: [
-                n && /* @__PURE__ */ s(er, { id: w, children: n }),
-                /* @__PURE__ */ s(ir, { onClick: r, "aria-label": "Close modal", children: "×" })
-              ] }),
-              /* @__PURE__ */ s(ar, { children: i }),
-              d && /* @__PURE__ */ s(lr, { children: d })
-            ]
-          }
-        )
+        id: f,
+        ref: o,
+        value: z,
+        onChange: (v) => {
+          T || S(v.target.value), g?.(v);
+        },
+        ...y,
+        "aria-invalid": !!a,
+        "aria-describedby": k ? x : void 0
       }
-    ),
-    document.body
-  ) : null;
+    ) }),
+    k && /* @__PURE__ */ s(Xo, { id: x, $error: !!a, children: I ?? l })
+  ] });
 }
-dr.displayName = "Modal";
-const To = (...o) => o.filter((r, n, i) => !!r && r.trim() !== "" && i.indexOf(r) === n).join(" ").trim();
-const ur = (o) => o.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-const pr = (o) => o.replace(
+or.displayName = "Textarea";
+const So = (...o) => o.filter((r, n, e) => !!r && r.trim() !== "" && e.indexOf(r) === n).join(" ").trim();
+const rr = (o) => o.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const nr = (o) => o.replace(
   /^([A-Z])|[\s-_]+(\w)/g,
-  (r, n, i) => i ? i.toUpperCase() : n.toLowerCase()
+  (r, n, e) => e ? e.toUpperCase() : n.toLowerCase()
 );
-const ho = (o) => {
-  const r = pr(o);
+const $o = (o) => {
+  const r = nr(o);
   return r.charAt(0).toUpperCase() + r.slice(1);
 };
-var io = {
+var ro = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24,
@@ -577,333 +483,116 @@ var io = {
   strokeLinecap: "round",
   strokeLinejoin: "round"
 };
-const fr = (o) => {
+const tr = (o) => {
   for (const r in o)
     if (r.startsWith("aria-") || r === "role" || r === "title")
       return !0;
   return !1;
-}, gr = So({}), br = () => mo(gr), $r = Co(
-  ({ color: o, size: r, strokeWidth: n, absoluteStrokeWidth: i, className: d = "", children: a, iconNode: c, ...u }, g) => {
+}, sr = ao({}), er = () => io(sr), ir = ko(
+  ({ color: o, size: r, strokeWidth: n, absoluteStrokeWidth: e, className: l = "", children: a, iconNode: c, ...d }, p) => {
     const {
-      size: f = 24,
-      strokeWidth: $ = 2,
-      absoluteStrokeWidth: w = !1,
-      color: y = "currentColor",
-      className: b = ""
-    } = br() ?? {}, m = i ?? w ? Number(n ?? $) * 24 / Number(r ?? f) : n ?? $;
-    return co(
+      size: $ = 24,
+      strokeWidth: g = 2,
+      absoluteStrokeWidth: y = !1,
+      color: b = "currentColor",
+      className: f = ""
+    } = er() ?? {}, x = e ?? y ? Number(n ?? g) * 24 / Number(r ?? $) : n ?? g;
+    return to(
       "svg",
       {
-        ref: g,
-        ...io,
-        width: r ?? f ?? io.width,
-        height: r ?? f ?? io.height,
-        stroke: o ?? y,
-        strokeWidth: m,
-        className: To("lucide", b, d),
-        ...!a && !fr(u) && { "aria-hidden": "true" },
-        ...u
+        ref: p,
+        ...ro,
+        width: r ?? $ ?? ro.width,
+        height: r ?? $ ?? ro.height,
+        stroke: o ?? b,
+        strokeWidth: x,
+        className: So("lucide", f, l),
+        ...!a && !tr(d) && { "aria-hidden": "true" },
+        ...d
       },
       [
-        ...c.map(([W, I]) => co(W, I)),
+        ...c.map(([w, S]) => to(w, S)),
         ...Array.isArray(a) ? a : [a]
       ]
     );
   }
 );
-const J = (o, r) => {
-  const n = Co(
-    ({ className: i, ...d }, a) => co($r, {
+const _ = (o, r) => {
+  const n = ko(
+    ({ className: e, ...l }, a) => to(ir, {
       ref: a,
       iconNode: r,
-      className: To(
-        `lucide-${ur(ho(o))}`,
+      className: So(
+        `lucide-${rr($o(o))}`,
         `lucide-${o}`,
-        i
+        e
       ),
-      ...d
+      ...l
     })
   );
-  return n.displayName = ho(o), n;
+  return n.displayName = $o(o), n;
 };
-const xr = [
+const ar = [
   ["path", { d: "M12 5v14", key: "s699le" }],
   ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
-], yr = J("arrow-down", xr);
-const hr = [
+], lr = _("arrow-down", ar);
+const cr = [
   ["path", { d: "m21 16-4 4-4-4", key: "f6ql7i" }],
   ["path", { d: "M17 20V4", key: "1ejh1v" }],
   ["path", { d: "m3 8 4-4 4 4", key: "11wl7u" }],
   ["path", { d: "M7 4v16", key: "1glfcx" }]
-], wr = J("arrow-up-down", hr);
-const vr = [
+], dr = _("arrow-up-down", cr);
+const ur = [
   ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
   ["path", { d: "M12 19V5", key: "x0mq9r" }]
-], kr = J("arrow-up", vr);
-const mr = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], Io = J("chevron-down", mr);
-const Sr = [
+], pr = _("arrow-up", ur);
+const fr = [
+  ["path", { d: "M8 2v4", key: "1cmpym" }],
+  ["path", { d: "M16 2v4", key: "4m81vk" }],
+  ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
+  ["path", { d: "M3 10h18", key: "8toen8" }]
+], $r = _("calendar", fr);
+const gr = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], zo = _("chevron-down", gr);
+const br = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]], xr = _("chevron-left", br);
+const yr = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]], hr = _("chevron-right", yr);
+const wr = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], Eo = J("x", Sr), Cr = _`
-  from { opacity: 0; transform: translateY(12px); }
-  to   { opacity: 1; transform: translateY(0); }
-`, zr = _`
-  from { opacity: 0; transform: translateY(-12px); }
-  to   { opacity: 1; transform: translateY(0); }
-`, Tr = _`
-  from { opacity: 1; }
-  to   { opacity: 0; }
-`, Ir = e.div`
-  position: fixed;
-  z-index: ${({ theme: o }) => o.zIndex.toast};
+], co = _("x", wr), mr = i.div`
+  display: inline-flex;
+  flex-direction: column;
+  gap: ${({ theme: o }) => o.spacing[1]};
+  width: ${({ $fullWidth: o }) => o ? "100%" : "auto"};
+`, vr = i.div`
+  position: relative;
   display: flex;
-  align-items: center;
-  gap: ${({ theme: o }) => o.spacing[3]};
-  min-width: 280px;
-  max-width: 400px;
-  padding: ${({ theme: o }) => `${o.spacing[3]} ${o.spacing[4]}`};
+  width: 100%;
+`, kr = i.span`
+  font-size: ${({ theme: o }) => o.fontSizes.xs};
+  color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
+`, Cr = i.select`
+  appearance: none;
+  width: 100%;
   border-radius: ${({ theme: o }) => o.radius.md};
-  animation: ${({ $closing: o, $position: r }) => o ? t`
-          ${Tr} 0.2s ease forwards
-        ` : r.startsWith("top") ? t`
-            ${zr} 0.2s ease forwards
-          ` : t`
-            ${Cr} 0.2s ease forwards
-          `};
+  cursor: pointer;
+  font: inherit;
+  color: ${({ theme: o }) => o.colors.neutral[900]};
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
 
-  ${({ $position: o, theme: r }) => ({
-  "bottom-right": t`
-        bottom: ${r.spacing[6]};
-        right: ${r.spacing[6]};
-      `,
-  "bottom-left": t`
-        bottom: ${r.spacing[6]};
-        left: ${r.spacing[6]};
+  ${({ $size: o, theme: r }) => ({
+  sm: t`
+        padding: ${r.spacing[1]} ${r.spacing[2]};
+        font-size: ${r.fontSizes.sm};
       `,
-  "top-right": t`
-        top: ${r.spacing[6]};
-        right: ${r.spacing[6]};
+  md: t`
+        padding: ${r.spacing[2]} ${r.spacing[3]};
+        font-size: ${r.fontSizes.md};
       `,
-  "top-left": t`
-        top: ${r.spacing[6]};
-        left: ${r.spacing[6]};
-      `
-})[o]}
-`, oo = (o, r, n) => t`
-  background: ${r};
-  border: ${o.brutalism.borderWidth} solid ${n};
-  box-shadow: ${o.brutalism.shadowOffset} ${o.brutalism.shadowOffset}
-    0 ${n};
-`, Er = e(Ir)`
-  ${({ $variant: o, theme: r }) => r.brutalism ? {
-  success: oo(
-    r,
-    r.colors.success[50],
-    r.colors.success[500]
-  ),
-  error: oo(
-    r,
-    r.colors.error[50],
-    r.colors.error[500]
-  ),
-  warning: oo(
-    r,
-    r.colors.warning[50],
-    r.colors.warning[500]
-  ),
-  info: oo(r, r.colors.info[50], r.colors.info[500])
-}[o] : {
-  success: t`
-        background: ${r.colors.success[50]};
-        border-left: 4px solid ${r.colors.success[500]};
-        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-      `,
-  error: t`
-        background: ${r.colors.error[50]};
-        border-left: 4px solid ${r.colors.error[500]};
-        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-      `,
-  warning: t`
-        background: ${r.colors.warning[50]};
-        border-left: 4px solid ${r.colors.warning[500]};
-        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-      `,
-  info: t`
-        background: ${r.colors.info[50]};
-        border-left: 4px solid ${r.colors.info[500]};
-        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-      `
-}[o]}
-`, Wr = e.p`
-  flex: 1;
-  margin: 0;
-  font-size: ${({ theme: o }) => o.fontSizes.sm};
-  font-weight: ${({ theme: o }) => o.brutalism ? 600 : 400};
-  line-height: 1.5;
-  color: ${({ theme: o }) => o.colors.neutral[900]};
-`, Pr = e.button`
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  border-radius: ${({ theme: o }) => o.radius.md};
-  color: ${({ theme: o }) => o.colors.neutral[500]};
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.06);
-    color: ${({ theme: o }) => o.colors.neutral[900]};
-  }
-
-  &:focus-visible {
-    outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
-    outline-offset: 2px;
-  }
-`;
-function Wo({
-  open: o,
-  onClose: r,
-  message: n,
-  variant: i = "info",
-  duration: d = 4e3,
-  position: a = "bottom-right"
-}) {
-  const [c, u] = N(o), [g, f] = N(!1);
-  return F(() => {
-    if (o)
-      u(!0), f(!1);
-    else if (c) {
-      f(!0);
-      const $ = setTimeout(() => {
-        u(!1), f(!1);
-      }, 200);
-      return () => {
-        clearTimeout($);
-      };
-    }
-  }, [o, c]), F(() => {
-    if (!o || d === 0)
-      return;
-    const $ = setTimeout(r, d);
-    return () => {
-      clearTimeout($);
-    };
-  }, [o, d, r]), c ? zo(
-    /* @__PURE__ */ T(
-      Er,
-      {
-        $position: a,
-        $variant: i,
-        $closing: g,
-        role: "alert",
-        "aria-live": "polite",
-        children: [
-          /* @__PURE__ */ s(Wr, { children: n }),
-          /* @__PURE__ */ s(Pr, { onClick: r, "aria-label": "Close notification", children: /* @__PURE__ */ s(Eo, { size: 14, strokeWidth: 2.5 }) })
-        ]
-      }
-    ),
-    document.body
-  ) : null;
-}
-Wo.displayName = "Toast";
-const Br = e.form`
-  display: flex;
-  flex-direction: column;
-  gap: ${({ theme: o }) => o.spacing[4]};
-`, Or = e.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${({ theme: o }) => o.spacing[1]};
-`, Dr = e.label`
-  font-size: ${({ theme: o }) => o.fontSizes.sm};
-  font-weight: 500;
-  color: ${({ theme: o }) => o.colors.neutral[900]};
-`, Nr = e.span`
-  color: ${({ theme: o }) => o.colors.error[500]};
-  margin-left: 2px;
-`, Lr = e.span`
-  font-size: ${({ theme: o }) => o.fontSizes.xs};
-  color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
-`;
-function Ar({ onSubmit: o, children: r, ...n }) {
-  return /* @__PURE__ */ s(
-    Br,
-    {
-      onSubmit: (i) => {
-        i.preventDefault(), o?.(i);
-      },
-      noValidate: !0,
-      ...n,
-      children: r
-    }
-  );
-}
-Ar.displayName = "Form";
-function Rr({
-  label: o,
-  error: r,
-  helperText: n,
-  required: i,
-  children: d
-}) {
-  const a = Z(), c = `${a}-hint`, u = !!(r || n), g = typeof r == "string" ? r : void 0, f = $o.isValidElement(d) ? $o.cloneElement(
-    d,
-    {
-      id: a,
-      ...u && { "aria-describedby": c },
-      ...r && { "aria-invalid": !0 }
-    }
-  ) : d;
-  return /* @__PURE__ */ T(Or, { children: [
-    o && /* @__PURE__ */ T(Dr, { htmlFor: a, children: [
-      o,
-      i && /* @__PURE__ */ s(Nr, { "aria-hidden": "true", children: " *" })
-    ] }),
-    f,
-    u && /* @__PURE__ */ s(Lr, { id: c, $error: !!r, children: g ?? n })
-  ] });
-}
-Rr.displayName = "FormField";
-const jr = e.div`
-  display: inline-flex;
-  flex-direction: column;
-  gap: ${({ theme: o }) => o.spacing[1]};
-  width: ${({ $fullWidth: o }) => o ? "100%" : "auto"};
-`, _r = e.div`
-  position: relative;
-  display: flex;
-  width: 100%;
-`, Mr = e.span`
-  font-size: ${({ theme: o }) => o.fontSizes.xs};
-  color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
-`, Vr = e.select`
-  appearance: none;
-  width: 100%;
-  border-radius: ${({ theme: o }) => o.radius.md};
-  cursor: pointer;
-  font: inherit;
-  color: ${({ theme: o }) => o.colors.neutral[900]};
-  transition:
-    border-color 0.2s,
-    box-shadow 0.2s;
-
-  ${({ $size: o, theme: r }) => ({
-  sm: t`
-        padding: ${r.spacing[1]} ${r.spacing[2]};
-        font-size: ${r.fontSizes.sm};
-      `,
-  md: t`
-        padding: ${r.spacing[2]} ${r.spacing[3]};
-        font-size: ${r.fontSizes.md};
-      `,
-  lg: t`
-        padding: ${r.spacing[3]} ${r.spacing[4]};
-        font-size: ${r.fontSizes.lg};
+  lg: t`
+        padding: ${r.spacing[3]} ${r.spacing[4]};
+        font-size: ${r.fontSizes.lg};
       `
 })[o]}
 
@@ -922,10 +611,6 @@ const jr = e.div`
   outlined: t`
         border: 2px solid ${r.colors.primary[500]};
         background-color: ${r.colors.neutral[0]};
-      `,
-  filled: t`
-        border: 1px solid transparent;
-        background-color: ${r.colors.neutral[100]};
       `
 }[o]}
 
@@ -942,7 +627,7 @@ const jr = e.div`
     cursor: not-allowed;
     opacity: 0.6;
   }
-`, Kr = e.button`
+`, Sr = i.button`
   position: absolute;
   right: ${({ theme: o }) => o.spacing[3]};
   top: 50%;
@@ -964,7 +649,7 @@ const jr = e.div`
     outline-offset: 2px;
     border-radius: 2px;
   }
-`, Fr = e.span`
+`, zr = i.span`
   position: absolute;
   right: ${({ theme: o }) => o.spacing[3]};
   top: 50%;
@@ -974,63 +659,165 @@ const jr = e.div`
   align-items: center;
   color: ${({ theme: o }) => o.colors.neutral[500]};
 `;
-function Hr({
+function Tr({
   options: o,
   placeholder: r,
   size: n = "md",
-  variant: i = "default",
-  error: d,
+  variant: e = "default",
+  error: l,
   fullWidth: a,
   clearable: c,
-  onClear: u,
-  id: g,
-  value: f,
-  defaultValue: $,
-  onChange: w,
-  ...y
+  onClear: d,
+  id: p,
+  value: $,
+  defaultValue: g,
+  onChange: y,
+  ...b
 }) {
-  const b = Z(), m = g ?? b, W = `${m}-hint`, I = typeof d == "string" ? d : void 0, [x, P] = N(
-    $ ?? ""
-  ), O = f !== void 0, D = O ? f : x, h = (B) => {
-    O || P(B.target.value), w?.(B);
+  const f = A(), x = p ?? f, w = `${x}-hint`, S = typeof l == "string" ? l : void 0, [T, z] = M(
+    g ?? ""
+  ), I = $ !== void 0, k = I ? $ : T, m = (W) => {
+    I || z(W.target.value), y?.(W);
   }, v = () => {
-    O || P(""), u?.();
-  }, k = c && !!D;
-  return /* @__PURE__ */ T(jr, { $fullWidth: a, children: [
-    /* @__PURE__ */ T(_r, { children: [
-      /* @__PURE__ */ T(
-        Vr,
+    I || z(""), d?.();
+  }, D = c && !!k;
+  return /* @__PURE__ */ C(mr, { $fullWidth: a, children: [
+    /* @__PURE__ */ C(vr, { children: [
+      /* @__PURE__ */ C(
+        Cr,
         {
-          id: m,
+          id: x,
           $size: n,
-          $variant: i,
-          $error: !!d,
-          "aria-invalid": !!d,
-          "aria-describedby": I ? W : void 0,
-          value: D,
-          onChange: h,
-          ...y,
+          $variant: e,
+          $error: !!l,
+          "aria-invalid": !!l,
+          "aria-describedby": S ? w : void 0,
+          value: k,
+          onChange: m,
+          ...b,
           children: [
             r && /* @__PURE__ */ s("option", { value: "", disabled: !0, children: r }),
-            o.map((B) => /* @__PURE__ */ s("option", { value: B.value, disabled: B.disabled, children: B.label }, B.value))
+            o.map((W) => /* @__PURE__ */ s("option", { value: W.value, disabled: W.disabled, children: W.label }, W.value))
           ]
         }
       ),
-      k ? /* @__PURE__ */ s(
-        Kr,
+      D ? /* @__PURE__ */ s(
+        Sr,
         {
           type: "button",
           onClick: v,
           "aria-label": "Clear selection",
-          children: /* @__PURE__ */ s(Eo, { size: 14 })
+          children: /* @__PURE__ */ s(co, { size: 14 })
         }
-      ) : /* @__PURE__ */ s(Fr, { "aria-hidden": "true", children: /* @__PURE__ */ s(Io, { size: 14 }) })
+      ) : /* @__PURE__ */ s(zr, { "aria-hidden": "true", children: /* @__PURE__ */ s(zo, { size: 14 }) })
     ] }),
-    I && /* @__PURE__ */ s(Mr, { id: W, $error: !0, children: I })
+    S && /* @__PURE__ */ s(kr, { id: w, $error: !0, children: S })
   ] });
 }
-Hr.displayName = "Select";
-const Yr = e.a`
+Tr.displayName = "Select";
+const go = i.span`
+  display: inline-block;
+`, Ir = i.span`
+  display: inline-block;
+  min-width: 60px;
+  padding: ${({ theme: o }) => `${o.spacing[1]} ${o.spacing[2]}`};
+  border-radius: ${({ theme: o }) => o.radius.md};
+  color: ${({ $empty: o, theme: r }) => o ? r.colors.neutral[400] : "inherit"};
+
+  ${({ theme: o }) => o.brutalism ? t`
+          border: ${o.brutalism.borderWidth} solid transparent;
+        ` : t`
+          border: 1px solid transparent;
+        `}
+
+  ${({ $disabled: o, theme: r }) => o ? t`
+          opacity: 0.5;
+        ` : t`
+          cursor: text;
+
+          &:hover {
+            ${r.brutalism ? t`
+                  border-color: ${r.colors.neutral[900]};
+                  box-shadow: ${r.brutalism.shadowOffset}
+                    ${r.brutalism.shadowOffset} 0
+                    ${r.colors.neutral[900]};
+                ` : t`
+                  border-color: ${r.colors.primary[500]};
+                  box-shadow: ${r.shadows.focusRing};
+                `}
+          }
+
+          &:focus {
+            outline: none;
+            box-shadow: ${r.shadows.focusRing};
+          }
+        `}
+`, Mr = i.input`
+  display: inline-block;
+  min-width: 60px;
+  padding: ${({ theme: o }) => `${o.spacing[1]} ${o.spacing[2]}`};
+  border-radius: ${({ theme: o }) => o.radius.md};
+  font: inherit;
+  color: inherit;
+  background: ${({ theme: o }) => o.colors.neutral[0]};
+  outline: none;
+
+  ${({ theme: o }) => o.brutalism ? t`
+          border: ${o.brutalism.borderWidth} solid
+            ${o.colors.neutral[900]};
+          box-shadow: ${o.brutalism.shadowOffset}
+            ${o.brutalism.shadowOffset} 0 ${o.colors.neutral[900]};
+        ` : t`
+          border: 1px solid ${o.colors.primary[500]};
+          box-shadow: ${o.shadows.focusRing};
+        `}
+`;
+function Dr({
+  value: o,
+  defaultValue: r = "",
+  onChange: n,
+  onSubmit: e,
+  onCancel: l,
+  placeholder: a = "Click to edit",
+  disabled: c = !1
+}) {
+  const d = o !== void 0, [p, $] = M(r), g = d ? o : p, [y, b] = M(!1), [f, x] = M(""), w = G(null), S = () => {
+    c || (x(g), b(!0), setTimeout(() => {
+      w.current?.focus(), w.current?.select();
+    }, 0));
+  }, T = () => {
+    d || $(f), n?.(f), e?.(f), b(!1);
+  }, z = () => {
+    l?.(g), b(!1);
+  }, I = (k) => {
+    k.key === "Enter" ? T() : k.key === "Escape" && z();
+  };
+  return y ? /* @__PURE__ */ s(go, { children: /* @__PURE__ */ s(
+    Mr,
+    {
+      ref: w,
+      value: f,
+      size: Math.max(f.length, a.length, 10),
+      onChange: (k) => x(k.target.value),
+      onBlur: T,
+      onKeyDown: I,
+      "aria-label": "Edit value"
+    }
+  ) }) : /* @__PURE__ */ s(go, { children: /* @__PURE__ */ s(
+    Ir,
+    {
+      role: c ? void 0 : "button",
+      tabIndex: c ? void 0 : 0,
+      $disabled: c,
+      $empty: !g,
+      onClick: S,
+      onKeyDown: (k) => k.key === "Enter" && S(),
+      children: g || a
+    }
+  ) });
+}
+Dr.displayName = "Editable";
+const Wr = i.a`
   text-decoration: underline;
   text-underline-offset: 2px;
   transition: color 0.15s;
@@ -1056,166 +843,421 @@ const Yr = e.a`
       `
 })[o]}
 `;
-function Ur({
+function To({
   variant: o = "default",
   external: r,
   children: n,
-  ...i
+  ...e
 }) {
   return /* @__PURE__ */ s(
-    Yr,
+    Wr,
     {
       $variant: o,
       ...r && { target: "_blank", rel: "noreferrer" },
-      ...i,
+      ...e,
       children: n
     }
   );
 }
-Ur.displayName = "Link";
-const qr = e.div`
-  border-radius: ${({ theme: o }) => o.radius.md};
-  background: ${({ theme: o }) => o.colors.neutral[0]};
-  overflow: hidden;
-
-  ${({ theme: o, $accentColor: r }) => o.brutalism ? t`
-          border: ${o.brutalism.borderWidth} solid
-            ${r ?? o.colors.neutral[900]};
-          box-shadow: ${o.brutalism.shadowOffset}
-            ${o.brutalism.shadowOffset} 0
-            ${r ?? o.colors.neutral[900]};
-        ` : t`
-          border: 1px solid ${r ?? o.colors.neutral[200]};
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-        `}
-`, Gr = e.button`
-  width: 100%;
+To.displayName = "Link";
+const Or = i.div`
   display: flex;
-  align-items: flex-start;
-  gap: ${({ theme: o }) => o.spacing[3]};
-  padding: ${({ theme: o }) => o.spacing[4]};
-  background: ${({ theme: o }) => o.brutalism ? o.colors.neutral[100] : o.colors.neutral[0]};
-  border: none;
-  cursor: pointer;
-  text-align: left;
-
-  &:hover {
-    background: ${({ theme: o }) => o.colors.neutral[100]};
-  }
-
-  &:focus-visible {
-    outline: 2px solid
-      ${({ theme: o, $accentColor: r }) => r ?? o.colors.primary[500]};
-    outline-offset: -2px;
-  }
-`, Xr = e.div`
-  flex: 1;
-  min-width: 0;
-`, Zr = e.span`
-  display: block;
+  flex-direction: column;
+  gap: ${({ theme: o }) => o.spacing[1]};
+`, Pr = i.span`
+  font-size: ${({ theme: o }) => o.fontSizes.xs};
+  color: ${({ theme: o }) => o.colors.neutral[500]};
+  font-weight: ${({ theme: o }) => o.brutalism ? "700" : "500"};
+`, Nr = i.span`
   font-size: ${({ theme: o }) => o.fontSizes.md};
-  font-weight: 600;
   color: ${({ theme: o }) => o.colors.neutral[900]};
-`, Jr = e.span`
-  display: block;
-  font-size: ${({ theme: o }) => o.fontSizes.sm};
-  color: ${({ theme: o }) => o.colors.neutral[500]};
-`, Qr = e.div`
+`;
+function Er({ label: o, value: r, href: n }) {
+  return /* @__PURE__ */ C(Or, { children: [
+    /* @__PURE__ */ s(Pr, { children: o }),
+    n ? /* @__PURE__ */ s(To, { href: n, external: !0, children: r }) : /* @__PURE__ */ s(Nr, { children: r ?? "—" })
+  ] });
+}
+Er.displayName = "Field";
+const Lr = L`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`, Fr = L`
+  from { opacity: 1; }
+  to { opacity: 0; }
+`, Br = L`
+  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+`, Vr = L`
+  from { opacity: 1; transform: scale(1) translateY(0); }
+  to { opacity: 0; transform: scale(0.95) translateY(-8px); }
+`, _r = i.div`
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
   display: flex;
-  flex-direction: row;
   align-items: center;
-  justify-content: space-between;
-  margin-top: ${({ theme: o }) => o.spacing[1]};
-
-  @media (max-width: 640px) {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: ${({ theme: o }) => o.spacing[2]};
-  }
-`, on = e.div`
+  justify-content: center;
+  z-index: ${({ theme: o }) => o.zIndex.modal};
+  animation: ${({ $closing: o }) => o ? Fr : Lr} 0.15s ease
+    forwards;
+`, jr = i.div`
+  position: relative;
+  background: ${({ theme: o }) => o.colors.neutral[0]};
+  border-radius: ${({ theme: o }) => o.radius.md};
+  box-shadow: ${({ theme: o }) => o.brutalism ? `${o.brutalism.shadowOffset} ${o.brutalism.shadowOffset} 0 ${o.colors.neutral[900]}` : "0 20px 60px rgba(0,0,0,0.3)"};
+  border: ${({ theme: o }) => o.brutalism ? `${o.brutalism.borderWidth} solid ${o.colors.neutral[900]}` : "none"};
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  animation: ${({ $closing: o }) => o ? Vr : Br} 0.15s ease
+    forwards;
+
+  ${({ $size: o }) => o === "sm" && t`
+      width: min(400px, 90vw);
+    `}
+  ${({ $size: o }) => o === "md" && t`
+      width: min(560px, 90vw);
+    `}
+  ${({ $size: o }) => o === "lg" && t`
+      width: min(720px, 90vw);
+    `}
+  ${({ $size: o }) => o === "fullscreen" && t`
+      width: 100vw;
+      height: 100vh;
+      max-height: 100vh;
+      border-radius: 0;
+    `}
+`, Ar = i.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: o }) => o.spacing[2]};
-`, rn = e.span`
+  padding: ${({ theme: o }) => o.spacing[4]};
+  border-bottom: 1px solid ${({ theme: o }) => o.colors.neutral[200]};
+  flex-shrink: 0;
+`, Rr = i.h2`
+  flex: 1;
+  font-size: ${({ theme: o }) => o.fontSizes.lg};
+  font-weight: 600;
+  margin: 0;
+`, Yr = i.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  margin-left: auto;
   flex-shrink: 0;
-  transition: transform 0.2s ease;
-  transform: ${({ $open: o }) => o ? "rotate(180deg)" : "rotate(0deg)"};
-  color: ${({ theme: o, $accentColor: r }) => r ?? o.colors.neutral[500]};
-`, nn = e.div`
-  display: grid;
-  grid-template-rows: ${({ $open: o }) => o ? "1fr" : "0fr"};
-  transition: grid-template-rows 0.2s ease;
-`, tn = e.div`
-  overflow: hidden;
-`, sn = e.div`
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: ${({ theme: o }) => o.radius.md};
+  font-size: 20px;
+  line-height: 1;
+  color: ${({ theme: o }) => o.colors.neutral[500]};
+
+  &:hover {
+    background-color: ${({ theme: o }) => o.colors.neutral[100]};
+    color: ${({ theme: o }) => o.colors.neutral[900]};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
+    outline-offset: 2px;
+  }
+`, Hr = i.div`
+  padding: ${({ theme: o }) => o.spacing[4]};
+  overflow-y: auto;
+  flex: 1;
+`, Ur = i.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: ${({ theme: o }) => o.spacing[2]};
   padding: ${({ theme: o }) => o.spacing[4]};
   border-top: 1px solid ${({ theme: o }) => o.colors.neutral[200]};
+  flex-shrink: 0;
+`, Kr = [
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "a[href]",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
+function bo(o) {
+  return Array.from(
+    o.querySelectorAll(Kr)
+  );
+}
+function Io({
+  open: o,
+  onClose: r,
+  title: n,
+  children: e,
+  footer: l,
+  size: a = "md",
+  closeOnBackdrop: c = !0,
+  closeOnEscape: d = !0,
+  ariaLabelledBy: p,
+  ariaDescribedBy: $
+}) {
+  const g = G(null), y = A(), b = p ?? (n ? y : void 0), [f, x] = M(o), [w, S] = M(!1);
+  return j(() => {
+    if (o)
+      x(!0), S(!1);
+    else if (f) {
+      S(!0);
+      const T = setTimeout(() => {
+        x(!1), S(!1);
+      }, 150);
+      return () => clearTimeout(T);
+    }
+  }, [o, f]), j(() => {
+    if (!o)
+      return;
+    const T = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.body.style.overflow = T;
+    };
+  }, [o]), j(() => {
+    if (!o || !g.current)
+      return;
+    const T = g.current, z = document.activeElement;
+    (bo(T)[0] ?? T).focus();
+    const k = (m) => {
+      if (m.key === "Escape" && d) {
+        r();
+        return;
+      }
+      if (m.key !== "Tab")
+        return;
+      const v = bo(T);
+      if (v.length === 0) {
+        m.preventDefault();
+        return;
+      }
+      const D = v[0], W = v[v.length - 1];
+      m.shiftKey ? document.activeElement === D && (m.preventDefault(), W.focus()) : document.activeElement === W && (m.preventDefault(), D.focus());
+    };
+    return document.addEventListener("keydown", k), () => {
+      document.removeEventListener("keydown", k), z?.focus();
+    };
+  }, [o, d, r, f]), f ? Co(
+    /* @__PURE__ */ s(
+      _r,
+      {
+        $closing: w,
+        onClick: c ? r : void 0,
+        children: /* @__PURE__ */ C(
+          jr,
+          {
+            ref: g,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": b,
+            "aria-describedby": $,
+            $size: a,
+            $closing: w,
+            tabIndex: -1,
+            onClick: (T) => T.stopPropagation(),
+            children: [
+              /* @__PURE__ */ C(Ar, { children: [
+                n && /* @__PURE__ */ s(Rr, { id: y, children: n }),
+                /* @__PURE__ */ s(Yr, { onClick: r, "aria-label": "Close modal", children: "×" })
+              ] }),
+              /* @__PURE__ */ s(Hr, { children: e }),
+              l && /* @__PURE__ */ s(Ur, { children: l })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  ) : null;
+}
+Io.displayName = "Modal";
+const qr = L`
+  from { opacity: 0; transform: translateY(12px); }
+  to   { opacity: 1; transform: translateY(0); }
+`, Gr = L`
+  from { opacity: 0; transform: translateY(-12px); }
+  to   { opacity: 1; transform: translateY(0); }
+`, Jr = L`
+  from { opacity: 1; }
+  to   { opacity: 0; }
+`, Xr = i.div`
+  position: fixed;
+  z-index: ${({ theme: o }) => o.zIndex.toast};
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: o }) => o.spacing[3]};
+  min-width: 280px;
+  max-width: 400px;
+  padding: ${({ theme: o }) => `${o.spacing[3]} ${o.spacing[4]}`};
+  border-radius: ${({ theme: o }) => o.radius.md};
+  animation: ${({ $closing: o, $position: r }) => o ? t`
+          ${Jr} 0.2s ease forwards
+        ` : r.startsWith("top") ? t`
+            ${Gr} 0.2s ease forwards
+          ` : t`
+            ${qr} 0.2s ease forwards
+          `};
+
+  ${({ $position: o, theme: r }) => ({
+  "bottom-right": t`
+        bottom: ${r.spacing[6]};
+        right: ${r.spacing[6]};
+      `,
+  "bottom-left": t`
+        bottom: ${r.spacing[6]};
+        left: ${r.spacing[6]};
+      `,
+  "top-right": t`
+        top: ${r.spacing[6]};
+        right: ${r.spacing[6]};
+      `,
+  "top-left": t`
+        top: ${r.spacing[6]};
+        left: ${r.spacing[6]};
+      `
+})[o]}
+`, J = (o, r, n) => t`
+  background: ${r};
+  border: ${o.brutalism.borderWidth} solid ${n};
+  box-shadow: ${o.brutalism.shadowOffset} ${o.brutalism.shadowOffset}
+    0 ${n};
+`, Zr = i(Xr)`
+  ${({ $variant: o, theme: r }) => r.brutalism ? {
+  success: J(
+    r,
+    r.colors.success[50],
+    r.colors.success[500]
+  ),
+  error: J(
+    r,
+    r.colors.error[50],
+    r.colors.error[500]
+  ),
+  warning: J(
+    r,
+    r.colors.warning[50],
+    r.colors.warning[500]
+  ),
+  info: J(r, r.colors.info[50], r.colors.info[500])
+}[o] : {
+  success: t`
+        background: ${r.colors.success[50]};
+        border-left: 4px solid ${r.colors.success[500]};
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+      `,
+  error: t`
+        background: ${r.colors.error[50]};
+        border-left: 4px solid ${r.colors.error[500]};
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+      `,
+  warning: t`
+        background: ${r.colors.warning[50]};
+        border-left: 4px solid ${r.colors.warning[500]};
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+      `,
+  info: t`
+        background: ${r.colors.info[50]};
+        border-left: 4px solid ${r.colors.info[500]};
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+      `
+}[o]}
+`, Qr = i.p`
+  flex: 1;
+  margin: 0;
+  font-size: ${({ theme: o }) => o.fontSizes.sm};
+  font-weight: ${({ theme: o }) => o.brutalism ? 600 : 400};
+  line-height: 1.5;
+  color: ${({ theme: o }) => o.colors.neutral[900]};
+`, on = i.button`
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: ${({ theme: o }) => o.radius.md};
+  color: ${({ theme: o }) => o.colors.neutral[500]};
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.06);
+    color: ${({ theme: o }) => o.colors.neutral[900]};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
+    outline-offset: 2px;
+  }
 `;
-function en({
-  title: o,
-  children: r,
-  defaultOpen: n = !1,
-  open: i,
-  onToggle: d,
-  subtitle: a,
-  headerActions: c,
-  accentColor: u
+function Mo({
+  open: o,
+  onClose: r,
+  message: n,
+  variant: e = "info",
+  duration: l = 4e3,
+  position: a = "bottom-right"
 }) {
-  const [g, f] = N(n), $ = Z(), w = i !== void 0, y = w ? i : g;
-  return /* @__PURE__ */ T(qr, { $accentColor: u, children: [
-    /* @__PURE__ */ T(
-      Gr,
+  const [c, d] = M(o), [p, $] = M(!1);
+  return j(() => {
+    if (o)
+      d(!0), $(!1);
+    else if (c) {
+      $(!0);
+      const g = setTimeout(() => {
+        d(!1), $(!1);
+      }, 200);
+      return () => {
+        clearTimeout(g);
+      };
+    }
+  }, [o, c]), j(() => {
+    if (!o || l === 0)
+      return;
+    const g = setTimeout(r, l);
+    return () => {
+      clearTimeout(g);
+    };
+  }, [o, l, r]), c ? Co(
+    /* @__PURE__ */ C(
+      Zr,
       {
-        type: "button",
-        $open: y,
-        $accentColor: u,
-        "aria-expanded": y,
-        "aria-controls": $,
-        onClick: () => {
-          const m = !y;
-          w || f(m), d?.(m);
-        },
+        $position: a,
+        $variant: e,
+        $closing: p,
+        role: "alert",
+        "aria-live": "polite",
         children: [
-          /* @__PURE__ */ T(Xr, { children: [
-            /* @__PURE__ */ s(Zr, { children: o }),
-            (a || c) && /* @__PURE__ */ T(Qr, { children: [
-              a && /* @__PURE__ */ s(Jr, { children: a }),
-              c && /* @__PURE__ */ s(on, { onClick: (m) => m.stopPropagation(), children: c })
-            ] })
-          ] }),
-          /* @__PURE__ */ s(
-            rn,
-            {
-              $open: y,
-              $accentColor: u,
-              "aria-hidden": "true",
-              children: /* @__PURE__ */ s(Io, { size: 18, strokeWidth: 2.5 })
-            }
-          )
+          /* @__PURE__ */ s(Qr, { children: n }),
+          /* @__PURE__ */ s(on, { onClick: r, "aria-label": "Close notification", children: /* @__PURE__ */ s(co, { size: 14, strokeWidth: 2.5 }) })
         ]
       }
     ),
-    /* @__PURE__ */ s(nn, { $open: y, children: /* @__PURE__ */ s(tn, { id: $, role: "region", "aria-label": o, children: /* @__PURE__ */ s(sn, { children: r }) }) })
-  ] });
+    document.body
+  ) : null;
 }
-en.displayName = "CollapsibleCard";
-const Po = So(null);
-function Mn({ children: o }) {
-  const [r, n] = N(null), i = R((a) => {
+Mo.displayName = "Toast";
+const Do = ao(null);
+function yt({ children: o }) {
+  const [r, n] = M(null), e = V((a) => {
     n({ ...a, id: Date.now() });
-  }, []), d = po(() => Object.assign((a) => i(a), {
-    success: (a, c) => i({ ...c, message: a, variant: "success" }),
-    error: (a, c) => i({ ...c, message: a, variant: "error" }),
-    warning: (a, c) => i({ ...c, message: a, variant: "warning" }),
-    info: (a, c) => i({ ...c, message: a, variant: "info" })
-  }), [i]);
-  return /* @__PURE__ */ T(Po.Provider, { value: { toast: d }, children: [
+  }, []), l = lo(() => Object.assign((a) => e(a), {
+    success: (a, c) => e({ ...c, message: a, variant: "success" }),
+    error: (a, c) => e({ ...c, message: a, variant: "error" }),
+    warning: (a, c) => e({ ...c, message: a, variant: "warning" }),
+    info: (a, c) => e({ ...c, message: a, variant: "info" })
+  }), [e]);
+  return /* @__PURE__ */ C(Do.Provider, { value: { toast: l }, children: [
     o,
     r && /* @__PURE__ */ s(
-      Wo,
+      Mo,
       {
         open: !0,
         onClose: () => n(null),
@@ -1228,137 +1270,376 @@ function Mn({ children: o }) {
     )
   ] });
 }
-function Vn() {
-  const o = mo(Po);
+function ht() {
+  const o = io(Do);
   if (!o)
     throw new Error("useToast must be used within a ToastProvider");
   return o;
 }
-function Kn({
+const rn = i.form`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: o }) => o.spacing[4]};
+`, nn = i.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: o }) => o.spacing[1]};
+`, tn = i.label`
+  font-size: ${({ theme: o }) => o.fontSizes.sm};
+  font-weight: 500;
+  color: ${({ theme: o }) => o.colors.neutral[900]};
+`, sn = i.span`
+  color: ${({ theme: o }) => o.colors.error[500]};
+  margin-left: 2px;
+`, en = i.span`
+  font-size: ${({ theme: o }) => o.fontSizes.xs};
+  color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
+`;
+function an({ onSubmit: o, children: r, ...n }) {
+  return /* @__PURE__ */ s(
+    rn,
+    {
+      onSubmit: (e) => {
+        e.preventDefault(), o?.(e);
+      },
+      noValidate: !0,
+      ...n,
+      children: r
+    }
+  );
+}
+an.displayName = "Form";
+function ln({
+  label: o,
+  error: r,
+  helperText: n,
+  required: e,
+  children: l
+}) {
+  const a = A(), c = `${a}-hint`, d = !!(r || n), p = typeof r == "string" ? r : void 0, $ = po.isValidElement(l) ? po.cloneElement(
+    l,
+    {
+      id: a,
+      ...d && { "aria-describedby": c },
+      ...r && { "aria-invalid": !0 }
+    }
+  ) : l;
+  return /* @__PURE__ */ C(nn, { children: [
+    o && /* @__PURE__ */ C(tn, { htmlFor: a, children: [
+      o,
+      e && /* @__PURE__ */ s(sn, { "aria-hidden": "true", children: " *" })
+    ] }),
+    $,
+    d && /* @__PURE__ */ s(en, { id: c, $error: !!r, children: p ?? n })
+  ] });
+}
+ln.displayName = "FormField";
+function wt({
   initialValues: o,
   validate: r,
   onSubmit: n,
-  onError: i
+  onError: e
 }) {
-  const [d, a] = N(o), [c, u] = N(
+  const [l, a] = M(o), [c, d] = M(
     {}
-  ), [g, f] = N({}), [$, w] = N(!1), y = X(d);
-  y.current = d;
-  const b = R(
-    (h) => {
+  ), [p, $] = M({}), [g, y] = M(!1), b = G(l);
+  b.current = l;
+  const f = V(
+    (m) => {
       if (!r)
         return {};
-      const v = r(h);
+      const v = r(m);
       return Object.fromEntries(
-        Object.entries(v).filter(([, k]) => k !== void 0)
+        Object.entries(v).filter(([, D]) => D !== void 0)
       );
     },
     [r]
-  ), m = X(g);
-  m.current = g;
-  const W = R(
-    (h) => {
-      const { name: v, value: k } = h.target, B = { ...y.current, [v]: k };
-      a(B), m.current[v] && u(b(B));
+  ), x = G(p);
+  x.current = p;
+  const w = V(
+    (m) => {
+      const { name: v, value: D } = m.target;
+      process.env.NODE_ENV !== "production" && !v && console.warn(
+        "[useForm] handleChange: field is missing a `name` attribute — value will not be tracked."
+      );
+      const W = { ...b.current, [v]: D };
+      a(W), x.current[v] && d(f(W));
     },
-    [b]
-  ), I = R(
-    (h) => {
-      const { name: v } = h.target;
-      f((k) => ({ ...k, [v]: !0 })), u(b(y.current));
+    [f]
+  ), S = V(
+    (m) => {
+      const { name: v } = m.target;
+      process.env.NODE_ENV !== "production" && !v && console.warn(
+        "[useForm] handleBlur: field is missing a `name` attribute — touched state will not be tracked."
+      ), $((D) => ({ ...D, [v]: !0 })), d(f(b.current));
     },
-    [b]
-  ), x = R(
-    (h) => {
-      h?.preventDefault();
-      const v = Object.keys(y.current).reduce(
-        (A, j) => ({ ...A, [j]: !0 }),
+    [f]
+  ), T = V(
+    (m) => {
+      m?.preventDefault();
+      const v = Object.keys(b.current).reduce(
+        (F, O) => ({ ...F, [O]: !0 }),
         {}
       );
-      f(v);
-      const k = b(y.current);
-      if (u(k), Object.keys(k).length > 0) {
-        i?.(k);
+      $(v);
+      const D = f(b.current);
+      if (d(D), Object.keys(D).length > 0) {
+        e?.(D);
         return;
       }
       (async () => {
-        w(!0);
+        y(!0);
         try {
-          await n?.(y.current);
+          await n?.(b.current);
         } finally {
-          w(!1);
+          y(!1);
         }
       })();
     },
-    [b, n, i]
-  ), P = R((h, v) => {
-    a((k) => ({ ...k, [h]: v }));
-  }, []), O = R(() => {
-    a(o), u({}), f({}), w(!1);
-  }, [o]), D = Object.fromEntries(
-    Object.entries(c).filter(([h]) => g[h])
+    [f, n, e]
+  ), z = V((m, v) => {
+    a((D) => ({ ...D, [m]: v }));
+  }, []), I = V(
+    (m) => {
+      a(m ?? o), d({}), $({}), y(!1);
+    },
+    [o]
+  ), k = Object.fromEntries(
+    Object.entries(c).filter(([m]) => p[m])
   );
   return {
-    values: d,
-    errors: D,
-    touched: g,
-    handleChange: W,
-    handleBlur: I,
-    handleSubmit: x,
-    setFieldValue: P,
-    reset: O,
-    isSubmitting: $
+    values: l,
+    errors: k,
+    touched: p,
+    handleChange: w,
+    handleBlur: S,
+    handleSubmit: T,
+    setFieldValue: z,
+    reset: I,
+    isSubmitting: g
   };
 }
-function an(o, r) {
+const cn = i.div`
+  border-radius: ${({ theme: o }) => o.radius.md};
+  background: ${({ theme: o }) => o.colors.neutral[0]};
+  overflow: hidden;
+
+  ${({ theme: o, $accentColor: r }) => o.brutalism ? t`
+          border: ${o.brutalism.borderWidth} solid
+            ${r ?? o.colors.neutral[900]};
+          box-shadow: ${o.brutalism.shadowOffset}
+            ${o.brutalism.shadowOffset} 0
+            ${r ?? o.colors.neutral[900]};
+        ` : t`
+          border: 1px solid ${r ?? o.colors.neutral[200]};
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+        `}
+`, dn = i.button`
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  gap: ${({ theme: o }) => o.spacing[3]};
+  padding: ${({ theme: o }) => o.spacing[4]};
+  background: ${({ theme: o }) => o.brutalism ? o.colors.neutral[100] : o.colors.neutral[0]};
+  border: none;
+  cursor: pointer;
+  text-align: left;
+
+  &:hover {
+    background: ${({ theme: o }) => o.colors.neutral[100]};
+  }
+
+  &:focus-visible {
+    outline: 2px solid
+      ${({ theme: o, $accentColor: r }) => r ?? o.colors.primary[500]};
+    outline-offset: -2px;
+  }
+`, un = i.div`
+  flex: 1;
+  min-width: 0;
+`, pn = i.span`
+  display: block;
+  font-size: ${({ theme: o }) => o.fontSizes.md};
+  font-weight: 600;
+  color: ${({ theme: o }) => o.colors.neutral[900]};
+`, fn = i.span`
+  display: block;
+  font-size: ${({ theme: o }) => o.fontSizes.sm};
+  color: ${({ theme: o }) => o.colors.neutral[500]};
+`, $n = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: ${({ theme: o }) => o.spacing[1]};
+
+  @media (max-width: 640px) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: ${({ theme: o }) => o.spacing[2]};
+  }
+`, gn = i.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: o }) => o.spacing[2]};
+`, bn = i.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+  transform: ${({ $open: o }) => o ? "rotate(180deg)" : "rotate(0deg)"};
+  color: ${({ theme: o, $accentColor: r }) => r ?? o.colors.neutral[500]};
+`, xn = i.div`
+  display: grid;
+  grid-template-rows: ${({ $open: o }) => o ? "1fr" : "0fr"};
+  transition: grid-template-rows 0.2s ease;
+`, yn = i.div`
+  overflow: hidden;
+`, hn = i.div`
+  padding: ${({ theme: o }) => o.spacing[4]};
+  border-top: 1px solid ${({ theme: o }) => o.colors.neutral[200]};
+`;
+function wn({
+  title: o,
+  children: r,
+  defaultOpen: n = !1,
+  open: e,
+  onToggle: l,
+  subtitle: a,
+  headerActions: c,
+  accentColor: d
+}) {
+  const [p, $] = M(n), g = A(), y = e !== void 0, b = y ? e : p;
+  return /* @__PURE__ */ C(cn, { $accentColor: d, children: [
+    /* @__PURE__ */ C(
+      dn,
+      {
+        type: "button",
+        $open: b,
+        $accentColor: d,
+        "aria-expanded": b,
+        "aria-controls": g,
+        onClick: () => {
+          const x = !b;
+          y || $(x), l?.(x);
+        },
+        children: [
+          /* @__PURE__ */ C(un, { children: [
+            /* @__PURE__ */ s(pn, { children: o }),
+            (a || c) && /* @__PURE__ */ C($n, { children: [
+              a && /* @__PURE__ */ s(fn, { children: a }),
+              c && /* @__PURE__ */ s(gn, { onClick: (x) => x.stopPropagation(), children: c })
+            ] })
+          ] }),
+          /* @__PURE__ */ s(
+            bn,
+            {
+              $open: b,
+              $accentColor: d,
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ s(zo, { size: 18, strokeWidth: 2.5 })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ s(xn, { $open: b, children: /* @__PURE__ */ s(yn, { id: g, role: "region", "aria-label": o, children: /* @__PURE__ */ s(hn, { children: r }) }) })
+  ] });
+}
+wn.displayName = "CollapsibleCard";
+const mn = L`
+  to { transform: rotate(360deg); }
+`, vn = {
+  sm: "16px",
+  md: "24px",
+  lg: "40px"
+}, kn = {
+  thin: "2px",
+  normal: "3px",
+  bold: "5px"
+}, Cn = i.span`
+  display: inline-block;
+  border-radius: 50%;
+  animation: ${mn} 0.7s linear infinite;
+
+  ${({ $size: o = "md", $weight: r = "normal", $color: n, theme: e }) => {
+  const l = vn[o], a = kn[r], c = e.colors.neutral[200], d = n ?? e.colors.primary[500];
+  return t`
+      width: ${l};
+      height: ${l};
+      border: ${a} solid ${c};
+      border-top-color: ${d};
+    `;
+}}
+`;
+function Sn({
+  size: o = "md",
+  weight: r = "normal",
+  color: n,
+  label: e = "Loading..."
+}) {
+  return /* @__PURE__ */ s(
+    Cn,
+    {
+      $size: o,
+      $weight: r,
+      $color: n,
+      role: "status",
+      "aria-label": e
+    }
+  );
+}
+Sn.displayName = "Spinner";
+function zn(o, r) {
   return o?.key !== r ? { key: r, direction: "asc" } : o.direction === "asc" ? { key: r, direction: "desc" } : null;
 }
-function ln({
+function Tn({
   data: o,
   sort: r,
   defaultSort: n,
-  onSortChange: i
+  onSortChange: e
 }) {
-  const d = r !== void 0, [a, c] = N(
+  const l = r !== void 0, [a, c] = M(
     n ?? null
-  ), u = d ? r ?? null : a, g = ($) => {
-    const w = an(u, $);
-    return d || c(w), i?.(w), w;
-  }, f = po(() => d || !u ? o : [...o].sort(($, w) => {
-    const y = $[u.key], b = w[u.key], m = y < b ? -1 : y > b ? 1 : 0;
-    return u.direction === "asc" ? m : -m;
-  }), [o, u, d]);
-  return { activeSort: u, sortedData: f, handleSort: g };
+  ), d = l ? r ?? null : a, p = (g) => {
+    const y = zn(d, g);
+    return l || c(y), e?.(y), y;
+  }, $ = lo(() => l || !d ? o : [...o].sort((g, y) => {
+    const b = g[d.key], f = y[d.key], x = b < f ? -1 : b > f ? 1 : 0;
+    return d.direction === "asc" ? x : -x;
+  }), [o, d, l]);
+  return { activeSort: d, sortedData: $, handleSort: p };
 }
-const cn = 7, wo = 3, vo = 1;
-function dn(o, r) {
-  if (r <= cn)
-    return Array.from({ length: r }, (i, d) => d + 1);
+const In = 7, xo = 3, yo = 1;
+function Mn(o, r) {
+  if (r <= In)
+    return Array.from({ length: r }, (e, l) => l + 1);
   const n = [1];
-  o > wo && n.push("...");
-  for (let i = Math.max(2, o - vo); i <= Math.min(r - 1, o + vo); i++)
-    n.push(i);
-  return o < r - wo + 1 && n.push("..."), n.push(r), n;
+  o > xo && n.push("...");
+  for (let e = Math.max(2, o - yo); e <= Math.min(r - 1, o + yo); e++)
+    n.push(e);
+  return o < r - xo + 1 && n.push("..."), n.push(r), n;
 }
-function un({
+function Dn({
   data: o,
   pageSize: r,
   page: n,
-  defaultPage: i,
-  totalRows: d,
+  defaultPage: e,
+  totalRows: l,
   onPageChange: a
 }) {
-  const c = n !== void 0, [u, g] = N(i ?? 1), f = c ? n : u, $ = (W) => {
-    c || g(W), a?.(W);
-  }, w = c || d !== void 0, y = d ?? o.length, b = r ? Math.max(1, Math.ceil(y / r)) : 1, m = po(() => {
-    if (!r || w)
+  const c = n !== void 0, [d, p] = M(e ?? 1), $ = c ? n : d, g = (w) => {
+    c || p(w), a?.(w);
+  }, y = c || l !== void 0, b = l ?? o.length, f = r ? Math.max(1, Math.ceil(b / r)) : 1, x = lo(() => {
+    if (!r || y)
       return o;
-    const W = (f - 1) * r;
-    return o.slice(W, W + r);
-  }, [o, r, f, w]);
-  return { activePage: f, totalPages: b, displayData: m, handlePageChange: $ };
+    const w = ($ - 1) * r;
+    return o.slice(w, w + r);
+  }, [o, r, $, y]);
+  return { activePage: $, totalPages: f, displayData: x, handlePageChange: g };
 }
-const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg" ? `${r.spacing[3]} ${r.spacing[4]}` : `${r.spacing[2]} ${r.spacing[3]}`, Oo = e.div`
+const Wo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg" ? `${r.spacing[3]} ${r.spacing[4]}` : `${r.spacing[2]} ${r.spacing[3]}`, Wn = i.div`
   width: 100%;
 
   ${({ theme: o, $borderColor: r }) => o.brutalism ? t`
@@ -1377,7 +1658,7 @@ const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
   ${({ $stickyHeader: o }) => o && t`
       overflow-y: auto;
     `}
-`, Do = e.table`
+`, On = i.table`
   width: 100%;
   border-collapse: collapse;
   font-size: ${({ $size: o, theme: r }) => ({
@@ -1389,7 +1670,7 @@ const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
   caption {
     padding: 8px 0;
   }
-`, No = e.thead`
+`, Pn = i.thead`
   ${({ $stickyHeader: o }) => o && t`
       position: sticky;
       top: 0;
@@ -1409,7 +1690,7 @@ const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
             --th-text: ${o.colors.neutral[600]};
             --th-sep: ${n ?? o.colors.neutral[300]};
           `}
-`, Lo = e.tbody`
+`, Nn = i.tbody`
   ${({ $rowColor: o }) => o && t`
       tr {
         background-color: ${o};
@@ -1425,21 +1706,37 @@ const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
   tr:last-child td {
     border-bottom: none;
   }
-`, G = e.tr``, fo = e.th`
+
+  tr:hover td {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+`, X = i.tr``, En = i(X)`
+  cursor: pointer;
+
+  td {
+    transition:
+      background-color 0.1s,
+      box-shadow 0.1s;
+  }
+
+  &:hover td {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+
+  &:hover td:first-child {
+    box-shadow: inset 4px 0 0
+      ${({ $accentColor: o, theme: r }) => o ?? r.colors.neutral[900]};
+  }
+`, Ln = i.th`
   background-color: var(--th-bg);
   color: var(--th-text);
   text-align: left;
   font-weight: 700;
   white-space: nowrap;
 
-  padding: ${({ $size: o, theme: r }) => Bo(o, r)};
+  padding: ${({ $size: o, theme: r }) => Wo(o, r)};
 
-  ${({ theme: o, $bordered: r }) => o.brutalism ? t`
-          border-right: 1px solid var(--th-sep);
-          &:last-child {
-            border-right: none;
-          }
-        ` : t`
+  ${({ theme: o, $bordered: r }) => o.brutalism ? t`` : t`
           border-bottom: 2px solid var(--th-sep);
           ${r && t`
             border-right: 1px solid var(--th-sep);
@@ -1448,7 +1745,7 @@ const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
             }
           `}
         `}
-`, pn = e.button`
+`, Fn = i.button`
   display: inline-flex;
   align-items: center;
   gap: ${({ theme: o }) => o.spacing[1]};
@@ -1467,12 +1764,12 @@ const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
     outline-offset: 2px;
     border-radius: 2px;
   }
-`, fn = e.span`
+`, Bn = i.span`
   opacity: 0.5;
   display: inline-flex;
   align-items: center;
-`, ro = e.td`
-  padding: ${({ $size: o, theme: r }) => Bo(o, r)};
+`, Oo = i.td`
+  padding: ${({ $size: o, theme: r }) => Wo(o, r)};
 
   ${({ $bordered: o, $borderColor: r, theme: n }) => n.brutalism ? t`
           border-bottom: ${n.brutalism.borderWidth} solid
@@ -1490,16 +1787,16 @@ const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
             border-bottom: 1px solid
               ${r ?? n.colors.neutral[200]};
           `}
-`, gn = e.td`
+`, Vn = i.td`
   text-align: center;
   color: ${({ theme: o }) => o.colors.neutral[400]};
   padding: ${({ theme: o }) => `${o.spacing[4]} ${o.spacing[3]}`};
   font-size: ${({ theme: o }) => o.fontSizes.sm};
   border-bottom: none;
-`, bn = _`
+`, _n = L`
   0% { background-position: -400px 0; }
   100% { background-position: 400px 0; }
-`, $n = e(ro)``, xn = e.div`
+`, jn = i(Oo)``, An = i.div`
   height: 14px;
   border-radius: 4px;
   background: linear-gradient(
@@ -1509,8 +1806,8 @@ const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
     ${({ theme: o }) => o.colors.neutral[200]} 75%
   );
   background-size: 800px 100%;
-  animation: ${bn} 1.6s ease-in-out infinite;
-`, yn = e.div`
+  animation: ${_n} 1.6s ease-in-out infinite;
+`, Rn = i.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1523,7 +1820,7 @@ const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
         ` : t`
           border-top: 1px solid ${o.colors.neutral[200]};
         `}
-`, ao = e.button`
+`, no = i.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1566,171 +1863,180 @@ const Bo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
     outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
     outline-offset: 2px;
   }
-`, hn = 4;
-function wn(o, r) {
-  return o?.key !== r ? /* @__PURE__ */ s(wr, { size: 14 }) : o.direction === "asc" ? /* @__PURE__ */ s(kr, { size: 14 }) : /* @__PURE__ */ s(yr, { size: 14 });
+`, Yn = 4;
+function Hn(o, r) {
+  return o?.key !== r ? /* @__PURE__ */ s(dr, { size: 14 }) : o.direction === "asc" ? /* @__PURE__ */ s(pr, { size: 14 }) : /* @__PURE__ */ s(lr, { size: 14 });
 }
-function vn({
+function Un({
   columns: o,
   data: r,
   rowKey: n,
-  size: i = "md",
-  striped: d,
+  size: e = "md",
+  striped: l,
   bordered: a,
   stickyHeader: c,
-  caption: u,
-  emptyMessage: g = "No data",
-  loading: f,
-  sort: $,
-  defaultSort: w,
-  onSortChange: y,
-  pageSize: b,
-  page: m,
-  defaultPage: W,
-  totalRows: I,
-  onPageChange: x,
-  onChange: P,
-  borderColor: O,
-  headerColor: D,
-  rowColor: h,
-  stripeColor: v,
-  className: k,
-  style: B
+  caption: d,
+  emptyMessage: p = "No data",
+  loading: $,
+  sort: g,
+  defaultSort: y,
+  onSortChange: b,
+  pageSize: f,
+  page: x,
+  defaultPage: w,
+  totalRows: S,
+  onPageChange: T,
+  onChange: z,
+  onRowClick: I,
+  borderColor: k,
+  headerColor: m,
+  rowColor: v,
+  stripeColor: D,
+  className: W,
+  style: F
 }) {
   const {
-    activeSort: A,
-    sortedData: j,
-    handleSort: M
-  } = ln({
+    activeSort: O,
+    sortedData: U,
+    handleSort: P
+  } = Tn({
     data: r,
-    sort: $,
-    defaultSort: w,
-    onSortChange: y
+    sort: g,
+    defaultSort: y,
+    onSortChange: b
   }), {
-    activePage: L,
-    totalPages: H,
-    displayData: Y,
-    handlePageChange: no
-  } = un({
-    data: j,
-    pageSize: b,
-    page: m,
-    defaultPage: W,
-    totalRows: I,
-    onPageChange: x
-  }), to = (l) => {
-    const S = M(l);
-    P?.({ sort: S, page: L });
-  }, U = (l) => {
-    no(l), P?.({ sort: A, page: l });
-  }, so = (l, S) => String(n ? l[n] : S), p = !f && Y.length === 0, C = b ?? hn;
-  return /* @__PURE__ */ T(
-    Oo,
+    activePage: N,
+    totalPages: K,
+    displayData: u,
+    handlePageChange: B
+  } = Dn({
+    data: U,
+    pageSize: f,
+    page: x,
+    defaultPage: w,
+    totalRows: S,
+    onPageChange: T
+  }), R = (h) => {
+    const E = P(h);
+    z?.({ sort: E, page: N });
+  }, Y = (h) => {
+    B(h), z?.({ sort: O, page: h });
+  }, Z = (h, E) => String(n ? h[n] : E), Q = !$ && u.length === 0, Eo = f ?? Yn;
+  return /* @__PURE__ */ C(
+    Wn,
     {
-      $borderColor: O,
+      $borderColor: k,
       $stickyHeader: c,
-      className: k,
-      style: B,
+      className: W,
+      style: F,
       children: [
-        /* @__PURE__ */ T(Do, { $size: i, children: [
-          u && /* @__PURE__ */ s("caption", { children: u }),
+        /* @__PURE__ */ C(On, { $size: e, children: [
+          d && /* @__PURE__ */ s("caption", { children: d }),
           /* @__PURE__ */ s(
-            No,
+            Pn,
             {
-              $headerColor: D,
-              $borderColor: O,
+              $headerColor: m,
+              $borderColor: k,
               $stickyHeader: c,
-              children: /* @__PURE__ */ s(G, { children: o.map((l) => /* @__PURE__ */ s(
-                fo,
+              children: /* @__PURE__ */ s(X, { children: o.map((h) => /* @__PURE__ */ s(
+                Ln,
                 {
-                  $size: i,
+                  $size: e,
                   $bordered: a,
                   scope: "col",
-                  style: l.width ? { width: l.width } : void 0,
-                  children: l.sortable ? /* @__PURE__ */ T(
-                    pn,
+                  style: h.width ? { width: h.width } : void 0,
+                  children: h.sortable ? /* @__PURE__ */ C(
+                    Fn,
                     {
                       type: "button",
-                      onClick: () => to(l.key),
-                      "aria-label": `Sort by ${l.header}${A?.key === l.key ? `, ${A.direction}ending` : ""}`,
+                      onClick: () => R(h.key),
+                      "aria-label": `Sort by ${h.header}${O?.key === h.key ? `, ${O.direction}ending` : ""}`,
                       children: [
-                        l.header,
-                        /* @__PURE__ */ s(fn, { "aria-hidden": "true", children: wn(A, l.key) })
+                        h.header,
+                        /* @__PURE__ */ s(Bn, { "aria-hidden": "true", children: Hn(O, h.key) })
                       ]
                     }
-                  ) : l.header
+                  ) : h.header
                 },
-                l.key
+                h.key
               )) })
             }
           ),
           /* @__PURE__ */ s(
-            Lo,
+            Nn,
             {
-              $striped: d,
-              $rowColor: h,
-              $stripeColor: v,
-              children: f ? Array.from({ length: C }).map((l, S) => /* @__PURE__ */ s(G, { children: o.map((z) => /* @__PURE__ */ s(
-                $n,
+              $striped: l,
+              $rowColor: v,
+              $stripeColor: D,
+              children: $ ? Array.from({ length: Eo }).map((h, E) => /* @__PURE__ */ s(X, { children: o.map((uo) => /* @__PURE__ */ s(
+                jn,
                 {
-                  $size: i,
+                  $size: e,
                   $bordered: a,
-                  $borderColor: O,
-                  children: /* @__PURE__ */ s(xn, {})
+                  $borderColor: k,
+                  children: /* @__PURE__ */ s(An, {})
                 },
-                z.key
-              )) }, S)) : p ? /* @__PURE__ */ s("tr", { children: /* @__PURE__ */ s(gn, { colSpan: o.length, children: g }) }) : Y.map((l, S) => /* @__PURE__ */ s(G, { children: o.map((z) => /* @__PURE__ */ s(
-                ro,
+                uo.key
+              )) }, E)) : Q ? /* @__PURE__ */ s("tr", { children: /* @__PURE__ */ s(Vn, { colSpan: o.length, children: p }) }) : u.map((h, E) => /* @__PURE__ */ s(
+                I ? En : X,
                 {
-                  $size: i,
-                  $bordered: a,
-                  $borderColor: O,
-                  children: z.render ? z.render(l[z.key], l, S) : String(l[z.key] ?? "") || " "
+                  onClick: I ? () => I(h) : void 0,
+                  $accentColor: I ? k : void 0,
+                  children: o.map((q) => /* @__PURE__ */ s(
+                    Oo,
+                    {
+                      $size: e,
+                      $bordered: a,
+                      $borderColor: k,
+                      children: q.render ? q.render(h[q.key], h, E) : String(h[q.key] ?? "") || " "
+                    },
+                    q.key
+                  ))
                 },
-                z.key
-              )) }, so(l, S)))
+                Z(h, E)
+              ))
             }
           )
         ] }),
-        b && H > 1 && /* @__PURE__ */ T(yn, { children: [
+        f && K > 1 && /* @__PURE__ */ C(Rn, { children: [
           /* @__PURE__ */ s(
-            ao,
+            no,
             {
               type: "button",
-              onClick: () => U(L - 1),
-              disabled: L <= 1,
+              onClick: () => Y(N - 1),
+              disabled: N <= 1,
               "aria-label": "Previous page",
               children: "←"
             }
           ),
-          dn(L, H).map(
-            (l, S) => l === "..." ? /* @__PURE__ */ s(
+          Mn(N, K).map(
+            (h, E) => h === "..." ? /* @__PURE__ */ s(
               "span",
               {
                 "aria-hidden": "true",
                 style: { padding: "0 4px" },
                 children: "…"
               },
-              `e${S}`
+              `e${E}`
             ) : /* @__PURE__ */ s(
-              ao,
+              no,
               {
                 type: "button",
-                $active: l === L,
-                onClick: () => U(l),
-                "aria-label": `Page ${l}`,
-                "aria-current": l === L ? "page" : void 0,
-                children: l
+                $active: h === N,
+                onClick: () => Y(h),
+                "aria-label": `Page ${h}`,
+                "aria-current": h === N ? "page" : void 0,
+                children: h
               },
-              l
+              h
             )
           ),
           /* @__PURE__ */ s(
-            ao,
+            no,
             {
               type: "button",
-              onClick: () => U(L + 1),
-              disabled: L >= H,
+              onClick: () => Y(N + 1),
+              disabled: N >= K,
               "aria-label": "Next page",
               children: "→"
             }
@@ -1740,361 +2046,527 @@ function vn({
     }
   );
 }
-vn.displayName = "Table";
-function Fn({
-  defaultSort: o,
-  defaultPage: r = 1
-} = {}) {
-  const [n, i] = N(o ?? null), [d, a] = N(r);
-  return { sort: n, page: d, onSortChange: (g) => {
-    i(g), a(1);
-  }, onPageChange: (g) => {
-    a(g);
-  } };
+Un.displayName = "Table";
+function mt({
+  defaultSort: o,
+  defaultPage: r = 1
+} = {}) {
+  const [n, e] = M(o ?? null), [l, a] = M(r);
+  return { sort: n, page: l, onSortChange: (p) => {
+    e(p), a(1);
+  }, onPageChange: (p) => {
+    a(p);
+  } };
+}
+const Kn = i.p`
+  margin: 0;
+  font-size: ${({ theme: o }) => o.fontSizes.md};
+  color: ${({ theme: o }) => o.colors.neutral[600]};
+  line-height: 1.5;
+`, qn = i.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: ${({ theme: o }) => o.radius.md};
+  font-weight: 600;
+  cursor: pointer;
+  padding: ${({ theme: o }) => o.spacing[2]} ${({ theme: o }) => o.spacing[4]};
+  font-size: ${({ theme: o }) => o.fontSizes.md};
+  background-color: ${({ theme: o }) => o.colors.error[500]};
+  color: ${({ theme: o }) => o.colors.neutral[0]};
+  border: none;
+
+  &:hover:not(:disabled) {
+    opacity: 0.88;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme: o }) => o.colors.error[500]};
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  ${({ theme: o }) => o.brutalism && t`
+      border: ${o.brutalism.borderWidth} solid ${o.colors.neutral[900]};
+      box-shadow: ${o.brutalism.shadowOffset}
+        ${o.brutalism.shadowOffset} 0 ${o.colors.neutral[900]};
+      transition:
+        transform 0.1s,
+        box-shadow 0.1s;
+      &:hover:not(:disabled) {
+        opacity: 1;
+        transform: translate(2px, 2px);
+        box-shadow: 2px 2px 0 ${o.colors.neutral[900]};
+      }
+    `}
+`;
+function Po({
+  open: o,
+  title: r = "Are you sure?",
+  message: n,
+  confirmLabel: e = "Confirm",
+  cancelLabel: l = "Cancel",
+  variant: a = "default",
+  size: c = "sm",
+  onConfirm: d,
+  onCancel: p
+}) {
+  return /* @__PURE__ */ s(
+    Io,
+    {
+      open: o,
+      onClose: p,
+      title: r,
+      size: c,
+      closeOnBackdrop: !1,
+      footer: /* @__PURE__ */ C(Lo, { children: [
+        /* @__PURE__ */ s(so, { variant: "outline", onClick: p, children: l }),
+        a === "danger" ? /* @__PURE__ */ s(qn, { type: "button", onClick: d, children: e }) : /* @__PURE__ */ s(so, { variant: "primary", onClick: d, children: e })
+      ] }),
+      children: /* @__PURE__ */ s(Kn, { children: n })
+    }
+  );
+}
+Po.displayName = "ConfirmDialog";
+const No = ao(null);
+function vt({ children: o }) {
+  const [r, n] = M(null), e = V((c) => new Promise((d) => {
+    n({ ...c, resolve: d });
+  }), []), l = () => {
+    r?.resolve(!0), n(null);
+  }, a = () => {
+    r?.resolve(!1), n(null);
+  };
+  return /* @__PURE__ */ C(No.Provider, { value: { confirm: e }, children: [
+    o,
+    r && /* @__PURE__ */ s(
+      Po,
+      {
+        open: !0,
+        title: r.title,
+        message: r.message,
+        confirmLabel: r.confirmLabel,
+        cancelLabel: r.cancelLabel,
+        variant: r.variant,
+        size: r.size,
+        onConfirm: l,
+        onCancel: a
+      }
+    )
+  ] });
+}
+function kt() {
+  const o = io(No);
+  if (!o)
+    throw new Error("useConfirm must be used within a ConfirmProvider");
+  return o.confirm;
 }
-const kn = e(Do)`
-  table-layout: fixed;
-`, mn = e(ro)`
-  ${({ $editable: o, theme: r }) => o && t`
-      cursor: pointer;
-      position: relative;
+const Gn = i.div`
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  gap: ${({ theme: o }) => o.spacing[1]};
+`, Jn = i.div`
+  display: flex;
+  align-items: center;
+  border-radius: ${({ theme: o }) => o.radius.md};
+  cursor: pointer;
+  user-select: none;
+  min-width: 200px;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
 
-      &:hover {
-        background-color: ${r.brutalism ? r.colors.neutral[100] : r.colors.primary[50]};
-      }
-    `}
-`, Ao = t`
-  display: block;
-  width: 100%;
-  min-width: 0;
-  box-sizing: border-box;
-  border: none;
-  outline: none;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  padding: 0;
-  margin: 0;
+  ${({ $size: o, theme: r }) => ({
+  sm: t`
+        padding: ${r.spacing[1]} ${r.spacing[2]};
+        font-size: ${r.fontSizes.sm};
+      `,
+  md: t`
+        padding: ${r.spacing[2]} ${r.spacing[3]};
+        font-size: ${r.fontSizes.md};
+      `,
+  lg: t`
+        padding: ${r.spacing[3]} ${r.spacing[4]};
+        font-size: ${r.fontSizes.lg};
+      `
+})[o]}
 
   ${({ theme: o }) => o.brutalism ? t`
-          &:focus {
-            outline: 2px solid ${o.colors.neutral[900]};
-            outline-offset: 1px;
-          }
-        ` : t`
-          &:focus {
-            box-shadow: ${o.shadows.focusRing};
-          }
-        `}
-`, Sn = e.input`
-  ${Ao}
-`, Cn = e.select`
-  ${Ao}
-  cursor: pointer;
-`, zn = e(fo)`
-  width: 40px;
-`, Tn = e(ro)`
-  width: 40px;
-  text-align: center;
-  padding-left: 0;
-  padding-right: 0;
-`, In = e.button`
+        border: ${o.brutalism.borderWidth} solid
+          ${o.colors.neutral[900]};
+        background-color: ${o.colors.neutral[0]};
+        box-shadow: 3px 3px 0 ${o.colors.neutral[900]};
+      ` : t`
+      border: 1px solid ${o.colors.neutral[400]};
+      background-color: ${o.colors.neutral[0]};
+    `}
+
+  ${({ $error: o, theme: r }) => o && t`
+      border-color: ${r.colors.error[500]};
+    `}
+
+  ${({ $disabled: o }) => o && t`
+      cursor: not-allowed;
+      opacity: 0.6;
+    `}
+
+  &:focus {
+    outline: none;
+    box-shadow: ${({ theme: o }) => o.shadows.focusRing};
+  }
+`, Xn = i.span`
+  flex: 1;
+  color: ${({ $hasValue: o, theme: r }) => o ? r.colors.neutral[900] : r.colors.neutral[400]};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, Zn = i.span`
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
+  margin-left: ${({ theme: o }) => o.spacing[2]};
+  color: ${({ theme: o }) => o.colors.neutral[500]};
+  flex-shrink: 0;
+`, Qn = i.button`
+  display: inline-flex;
+  align-items: center;
+  margin-left: ${({ theme: o }) => o.spacing[2]};
   padding: 0;
   background: none;
   border: none;
   cursor: pointer;
-  font-size: ${({ theme: o }) => o.fontSizes.xs};
   color: ${({ theme: o }) => o.colors.neutral[500]};
-  border-radius: ${({ theme: o }) => o.radius.md};
-  transition: color 0.1s;
+  flex-shrink: 0;
 
   &:hover {
-    color: ${({ theme: o }) => o.colors.error[500]};
+    color: ${({ theme: o }) => o.colors.neutral[900]};
+  }
 
-    ${({ theme: o }) => o.brutalism && t`
-        background-color: ${o.colors.error[50]};
-      `}
+  &:focus-visible {
+    outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
+    outline-offset: 2px;
+    border-radius: 2px;
   }
-`, En = e.tr`
+`, ot = i.span`
+  font-size: ${({ theme: o }) => o.fontSizes.xs};
+  color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
+`, rt = i.div`
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: ${({ theme: o }) => o.zIndex.modal};
+  background: ${({ theme: o }) => o.colors.neutral[0]};
+  border-radius: ${({ theme: o }) => o.radius.md};
+  padding: ${({ theme: o }) => o.spacing[3]};
+  min-width: 280px;
+
   ${({ theme: o }) => o.brutalism ? t`
-          border-top: ${o.brutalism.borderWidth} solid
-            ${o.colors.neutral[900]};
-        ` : t`
-          border-top: 1px solid ${o.colors.neutral[200]};
-        `}
-`, Wn = e.button`
+        border: ${o.brutalism.borderWidth} solid
+          ${o.colors.neutral[900]};
+        box-shadow: ${o.brutalism.shadowOffset}
+          ${o.brutalism.shadowOffset} 0 ${o.colors.neutral[900]};
+      ` : t`
+      border: 1px solid ${o.colors.neutral[200]};
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    `}
+`, nt = i.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: ${({ theme: o }) => o.spacing[3]};
+`, ho = i.button`
   display: inline-flex;
   align-items: center;
-  gap: ${({ theme: o }) => o.spacing[1]};
-  background: none;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
   border: none;
+  background: none;
+  border-radius: ${({ theme: o }) => o.radius.md};
   cursor: pointer;
-  font: inherit;
-  font-weight: 600;
   color: ${({ theme: o }) => o.colors.neutral[600]};
-  padding: ${({ theme: o }) => `${o.spacing[2]} ${o.spacing[3]}`};
-  width: 100%;
-  text-align: left;
+  padding: 0;
 
   &:hover {
-    color: ${({ theme: o }) => o.brutalism ? o.colors.neutral[900] : o.colors.primary[500]};
+    background-color: ${({ theme: o }) => o.colors.neutral[100]};
+    color: ${({ theme: o }) => o.colors.neutral[900]};
   }
 
   &:focus-visible {
     outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
     outline-offset: 2px;
   }
-`;
-function lo(o, r, n) {
-  return typeof o.editable == "function" ? o.editable(r, n) : !!o.editable;
+
+  ${({ theme: o }) => o.brutalism && t`
+      border: ${o.brutalism.borderWidth} solid ${o.colors.neutral[900]};
+      &:hover {
+        background-color: ${o.colors.neutral[100]};
+        transform: translate(1px, 1px);
+      }
+    `}
+`, tt = i.span`
+  font-weight: 600;
+  font-size: ${({ theme: o }) => o.fontSizes.md};
+  color: ${({ theme: o }) => o.colors.neutral[900]};
+`, st = i.div`
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+`, et = i.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: ${({ theme: o }) => o.fontSizes.xs};
+  font-weight: 600;
+  color: ${({ theme: o }) => o.colors.neutral[500]};
+  padding: ${({ theme: o }) => o.spacing[1]};
+  margin-bottom: 2px;
+`, wo = i.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  border: none;
+  background: none;
+  border-radius: ${({ theme: o }) => o.radius.md};
+  cursor: pointer;
+  font-size: ${({ theme: o }) => o.fontSizes.sm};
+  padding: ${({ theme: o }) => o.spacing[1]};
+  font-weight: ${({ $today: o, $selected: r }) => o || r ? "600" : "400"};
+  pointer-events: ${({ $currentMonth: o }) => o ? "auto" : "none"};
+
+  color: ${({ $currentMonth: o, $selected: r, $today: n, theme: e }) => o ? r ? e.colors.primary.contrast : n ? e.colors.primary[500] : e.colors.neutral[900] : e.colors.neutral[300]};
+
+  background-color: ${({ $selected: o, theme: r }) => o ? r.colors.primary[500] : "transparent"};
+
+  &:hover:not(:disabled) {
+    background-color: ${({ $selected: o, theme: r }) => o ? r.colors.primary[700] : r.colors.neutral[100]};
+  }
+
+  &:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
+    outline-offset: 1px;
+  }
+
+  ${({ $selected: o, $today: r, theme: n }) => n.brutalism && (o || r) && t`
+      border: ${n.brutalism.borderWidth} solid ${n.colors.neutral[900]};
+      ${o && t`
+        box-shadow: 2px 2px 0 ${n.colors.neutral[900]};
+      `}
+    `}
+`, it = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+], at = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function mo(o, r) {
+  return new Date(o, r + 1, 0).getDate();
 }
-function Pn({
-  columns: o,
-  defaultData: r,
-  data: n,
-  rowKey: i,
-  onChange: d,
-  size: a = "md",
-  borderColor: c,
-  headerColor: u,
-  addRowLabel: g = "Add row",
-  newRowFactory: f,
-  deletable: $ = !1,
-  className: w,
-  style: y
-}) {
-  const b = n !== void 0, [m, W] = N(r ?? []), I = b ? n : m, [x, P] = N(null), [O, D] = N(""), h = X(null), v = X(null);
-  F(() => {
-    if (!x)
-      return;
-    o.find((C) => C.key === x.colKey)?.options ? v.current?.focus() : (h.current?.focus(), h.current?.select());
-  }, [x, o]);
-  const k = R(
-    (p) => {
-      b || W(p), d?.(p);
-    },
-    [b, d]
-  ), B = R(
-    () => f ? f() : Object.fromEntries(o.map((p) => [p.key, ""])),
-    [f, o]
-  ), A = R(
-    (p) => {
-      const C = [];
-      return p.forEach((l, S) => {
-        o.forEach((z) => {
-          lo(z, l, S) && C.push({ rowIndex: S, colKey: z.key });
-        });
-      }), C;
-    },
-    [o]
-  ), j = (p, C, l) => {
-    P({ rowIndex: p, colKey: C }), D(String(l ?? ""));
-  }, M = R(() => {
-    if (!x)
-      return;
-    const { rowIndex: p, colKey: C } = x, l = I.map(
-      (S, z) => z === p ? { ...S, [C]: O } : S
+function lt(o, r) {
+  return new Date(o, r, 1).getDay();
+}
+function vo(o, r) {
+  return o.getFullYear() === r.getFullYear() && o.getMonth() === r.getMonth() && o.getDate() === r.getDate();
+}
+function ct(o, r, n) {
+  if (r) {
+    const e = new Date(
+      r.getFullYear(),
+      r.getMonth(),
+      r.getDate()
     );
-    k(l), P(null);
-  }, [x, I, O, k]), L = () => {
-    P(null), D("");
-  }, H = (p) => {
-    if (!x)
-      return;
-    p.preventDefault();
-    const { rowIndex: C, colKey: l } = x, S = I.map(
-      (E, Q) => Q === C ? { ...E, [l]: O } : E
+    if (o < e) return !0;
+  }
+  if (n) {
+    const e = new Date(
+      n.getFullYear(),
+      n.getMonth(),
+      n.getDate()
     );
-    k(S);
-    const z = A(S), q = z.findIndex(
-      (E) => E.rowIndex === C && E.colKey === l
-    ), V = p.shiftKey ? q - 1 : q + 1;
-    if (V >= 0 && V < z.length) {
-      const E = z[V];
-      P(E), D(String(S[E.rowIndex][E.colKey] ?? ""));
-      return;
-    }
-    if (!p.shiftKey && V >= z.length) {
-      const E = B(), Q = [...S, E];
-      k(Q);
-      const go = Q.length - 1, bo = o.find(
-        (Ro) => lo(Ro, E, go)
-      );
-      P(
-        bo ? { rowIndex: go, colKey: bo.key } : null
-      ), D("");
-      return;
-    }
-    P(null), D("");
-  }, Y = (p) => {
-    if (p.key === "Enter") {
-      if (o.find((l) => l.key === x?.colKey)?.options) {
-        v.current?.showPicker();
-        return;
-      }
-      M();
-      return;
-    }
-    if (p.key === "Escape") {
-      L();
-      return;
-    }
-    p.key === "Tab" && H(p);
-  }, no = () => k([...I, B()]), to = (p) => {
-    x?.rowIndex === p && P(null), k(I.filter((C, l) => l !== p));
-  }, U = (p, C) => String(i ? p[i] : C), so = $ ? o.length + 1 : o.length;
-  return /* @__PURE__ */ s(
-    Oo,
-    {
-      $borderColor: c,
-      className: w,
-      style: y,
-      children: /* @__PURE__ */ T(kn, { $size: a, children: [
-        /* @__PURE__ */ s(No, { $headerColor: u, $borderColor: c, children: /* @__PURE__ */ T(G, { children: [
-          o.map((p) => /* @__PURE__ */ s(
-            fo,
+    if (o > e) return !0;
+  }
+  return !1;
+}
+function dt(o) {
+  return o.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function ut(o) {
+  return o.toLocaleDateString("en-US", {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function pt({
+  value: o = null,
+  onChange: r,
+  placeholder: n = "Select date...",
+  size: e = "md",
+  disabled: l = !1,
+  clearable: a = !1,
+  minDate: c,
+  maxDate: d,
+  formatDate: p,
+  id: $,
+  error: g
+}) {
+  const y = A(), b = $ ?? y, f = /* @__PURE__ */ new Date(), [x, w] = M(!1), [S, T] = M(
+    () => (o ?? f).getFullYear()
+  ), [z, I] = M(() => (o ?? f).getMonth()), k = G(null);
+  j(() => {
+    if (!x) return;
+    const u = (B) => {
+      k.current && !k.current.contains(B.target) && w(!1);
+    };
+    return document.addEventListener("mousedown", u), () => document.removeEventListener("mousedown", u);
+  }, [x]), j(() => {
+    o && (T(o.getFullYear()), I(o.getMonth()));
+  }, [o]);
+  const m = o ? p ? p(o) : dt(o) : "", v = (u) => {
+    r?.(new Date(S, z, u)), w(!1);
+  }, D = (u) => {
+    u.stopPropagation(), r?.(null);
+  }, W = () => {
+    z === 0 ? (I(11), T((u) => u - 1)) : I((u) => u - 1);
+  }, F = () => {
+    z === 11 ? (I(0), T((u) => u + 1)) : I((u) => u + 1);
+  }, O = mo(S, z), U = lt(S, z), P = [], N = mo(
+    z === 0 ? S - 1 : S,
+    z === 0 ? 11 : z - 1
+  );
+  for (let u = U - 1; u >= 0; u--)
+    P.push({ day: N - u, currentMonth: !1 });
+  for (let u = 1; u <= O; u++)
+    P.push({ day: u, currentMonth: !0 });
+  const K = 42 - P.length;
+  for (let u = 1; u <= K; u++)
+    P.push({ day: u, currentMonth: !1 });
+  return /* @__PURE__ */ C(Gn, { ref: k, children: [
+    /* @__PURE__ */ C(
+      Jn,
+      {
+        id: b,
+        $size: e,
+        $error: !!g,
+        $disabled: l,
+        role: "combobox",
+        "aria-haspopup": "true",
+        "aria-expanded": x,
+        tabIndex: l ? -1 : 0,
+        onClick: () => {
+          l || w((u) => !u);
+        },
+        onKeyDown: (u) => {
+          (u.key === "Enter" || u.key === " ") && !l && (u.preventDefault(), w((B) => !B)), u.key === "Escape" && w(!1);
+        },
+        children: [
+          /* @__PURE__ */ s(Xn, { $hasValue: !!o, children: m || n }),
+          a && o ? /* @__PURE__ */ s(
+            Qn,
             {
-              $size: a,
-              scope: "col",
-              style: p.width ? { width: p.width } : void 0,
-              children: p.header
-            },
-            p.key
-          )),
-          $ && /* @__PURE__ */ s(zn, { $size: a, "aria-label": "Actions" })
-        ] }) }),
-        /* @__PURE__ */ T(Lo, { children: [
-          I.map((p, C) => /* @__PURE__ */ T(G, { children: [
-            o.map((l) => {
-              const S = x?.rowIndex === C && x.colKey === l.key, z = p[l.key], q = lo(l, p, C), V = l.options ? (l.options.find((E) => E.value === String(z ?? ""))?.label ?? String(z ?? "")) || " " : l.render ? l.render(z, p, C) : String(z ?? "") || " ";
-              return /* @__PURE__ */ s(
-                mn,
-                {
-                  $size: a,
-                  $borderColor: c,
-                  $editable: q && !S,
-                  onClick: q && !S ? () => {
-                    l.options ? (_o(
-                      () => j(C, l.key, z)
-                    ), v.current?.showPicker()) : j(C, l.key, z);
-                  } : void 0,
-                  children: S && l.options ? /* @__PURE__ */ s(
-                    Cn,
-                    {
-                      ref: v,
-                      $size: a,
-                      value: O,
-                      onChange: (E) => D(E.target.value),
-                      onBlur: M,
-                      onKeyDown: Y,
-                      "aria-label": `Edit ${l.header}`,
-                      children: l.options.map((E) => /* @__PURE__ */ s("option", { value: E.value, children: E.label }, E.value))
-                    }
-                  ) : S ? /* @__PURE__ */ s(
-                    Sn,
-                    {
-                      ref: h,
-                      $size: a,
-                      value: O,
-                      onChange: (E) => D(E.target.value),
-                      onBlur: M,
-                      onKeyDown: Y,
-                      "aria-label": `Edit ${l.header}`
-                    }
-                  ) : V
-                },
-                l.key
-              );
-            }),
-            $ && /* @__PURE__ */ s(Tn, { $size: a, $borderColor: c, children: /* @__PURE__ */ s(
-              In,
+              type: "button",
+              onClick: D,
+              "aria-label": "Clear date",
+              children: /* @__PURE__ */ s(co, { size: 14 })
+            }
+          ) : /* @__PURE__ */ s(Zn, { "aria-hidden": "true", children: /* @__PURE__ */ s($r, { size: 14 }) })
+        ]
+      }
+    ),
+    typeof g == "string" && /* @__PURE__ */ s(ot, { $error: !0, children: g }),
+    x && /* @__PURE__ */ C(rt, { role: "dialog", "aria-label": "Calendar", children: [
+      /* @__PURE__ */ C(nt, { children: [
+        /* @__PURE__ */ s(
+          ho,
+          {
+            type: "button",
+            onClick: W,
+            "aria-label": "Previous month",
+            children: /* @__PURE__ */ s(xr, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ C(tt, { children: [
+          it[z],
+          " ",
+          S
+        ] }),
+        /* @__PURE__ */ s(
+          ho,
+          {
+            type: "button",
+            onClick: F,
+            "aria-label": "Next month",
+            children: /* @__PURE__ */ s(hr, { size: 16 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ C(st, { children: [
+        at.map((u) => /* @__PURE__ */ s(et, { children: u }, u)),
+        P.map((u, B) => {
+          if (!u.currentMonth)
+            return /* @__PURE__ */ s(
+              wo,
               {
                 type: "button",
-                onClick: () => to(C),
-                "aria-label": "Delete row",
-                children: "✕"
-              }
-            ) })
-          ] }, U(p, C))),
-          /* @__PURE__ */ s(En, { children: /* @__PURE__ */ s("td", { colSpan: so, children: /* @__PURE__ */ T(Wn, { type: "button", onClick: no, children: [
-            "+ ",
-            g
-          ] }) }) })
-        ] })
+                $currentMonth: !1,
+                $selected: !1,
+                $today: !1,
+                disabled: !0,
+                tabIndex: -1,
+                children: u.day
+              },
+              B
+            );
+          const R = new Date(S, z, u.day), Y = o ? vo(R, o) : !1, Z = vo(R, f), Q = ct(R, c, d);
+          return /* @__PURE__ */ s(
+            wo,
+            {
+              type: "button",
+              $currentMonth: !0,
+              $selected: Y,
+              $today: Z,
+              disabled: Q,
+              "aria-label": ut(R),
+              "aria-pressed": Y,
+              onClick: () => v(u.day),
+              children: u.day
+            },
+            B
+          );
+        })
       ] })
-    }
-  );
+    ] })
+  ] });
 }
-Pn.displayName = "DataTable";
-const ko = {
-  primary: {
-    50: "#f0f8ff",
-    500: "#0070f3",
-    700: "#005bb5"
-  },
-  neutral: {
-    0: "#ffffff",
-    100: "#f5f5f5",
-    200: "#eaeaea",
-    300: "#cacaca",
-    400: "#cccccc",
-    500: "#666666",
-    600: "#333333",
-    900: "#111111"
-  },
-  error: {
-    50: "#fef2f2",
-    500: "#d32f2f"
-  },
-  success: {
-    50: "#f0fdf4",
-    500: "#16a34a"
-  },
-  warning: {
-    50: "#fffbeb",
-    500: "#d97706"
-  },
-  info: {
-    50: "#eff6ff",
-    500: "#2563eb"
-  }
-}, Bn = {
-  1: "4px",
-  2: "8px",
-  3: "12px",
-  4: "16px",
-  5: "20px",
-  6: "24px"
-}, On = {
-  md: "6px"
-}, Dn = {
-  modal: 1e3,
-  toast: 1100
-}, Nn = {
-  xs: "12px",
-  sm: "14px",
-  md: "16px",
-  lg: "18px"
-}, Hn = {
-  colors: { ...ko, primary: { ...ko.primary, contrast: "#ffffff" } },
-  spacing: Bn,
-  fontSizes: Nn,
-  radius: On,
-  zIndex: Dn,
-  shadows: {
-    focusRing: "0 0 0 2px rgba(0, 112, 243, 0.25)"
-  }
-};
-function Ln(o) {
-  const r = parseInt(o.slice(1, 3), 16) / 255, n = parseInt(o.slice(3, 5), 16) / 255, i = parseInt(o.slice(5, 7), 16) / 255, d = (c) => c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
-  return 0.2126 * d(r) + 0.7152 * d(n) + 0.0722 * d(i) > 0.179 ? "#111111" : "#ffffff";
+pt.displayName = "DatePicker";
+function ft(o) {
+  const r = parseInt(o.slice(1, 3), 16) / 255, n = parseInt(o.slice(3, 5), 16) / 255, e = parseInt(o.slice(5, 7), 16) / 255, l = (c) => c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  return 0.2126 * l(r) + 0.7152 * l(n) + 0.0722 * l(e) > 0.179 ? "#111111" : "#ffffff";
 }
-const uo = {
+const eo = {
   colors: {
     primary: {
       50: "#fffde6",
@@ -2124,45 +2596,70 @@ const uo = {
   shadows: { focusRing: "3px 3px 0 #111111" },
   brutalism: { borderWidth: "2px", shadowOffset: "4px" }
 };
-function Yn(o) {
+function Ct(o) {
   return {
-    ...uo,
+    ...eo,
     colors: {
-      ...uo.colors,
+      ...eo.colors,
       primary: {
         50: "#fffff0",
         500: o,
         700: o,
-        contrast: Ln(o)
+        contrast: ft(o)
       }
     }
   };
 }
-function Un({
-  theme: o = uo,
+function St({
+  theme: o = eo,
   children: r
 }) {
-  return /* @__PURE__ */ s(jo, { theme: o, children: r });
+  return /* @__PURE__ */ s(Fo, { theme: o, children: r });
 }
+const zt = Bo`
+  *, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  html, body {
+    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
+    font-size: ${({ theme: o }) => o.fontSizes.md};
+    color: ${({ theme: o }) => o.colors.neutral[900]};
+    background-color: ${({ theme: o }) => o.colors.neutral[0]};
+  }
+
+  button, input, select, textarea {
+    font-family: inherit;
+  }
+`;
 export {
-  Vo as Badge,
-  Fo as Button,
-  en as CollapsibleCard,
-  Pn as DataTable,
-  Ar as Form,
-  Rr as FormField,
-  Zo as Input,
-  Ur as Link,
-  dr as Modal,
-  Hr as Select,
-  vn as Table,
-  Un as ThemeProvider,
-  Wo as Toast,
-  Mn as ToastProvider,
-  Yn as createNeoBrutalTheme,
-  Hn as defaultTheme,
-  uo as neoBrutalTheme,
-  Kn as useForm,
-  Fn as useTable,
-  Vn as useToast
+  _o as Badge,
+  so as Button,
+  wn as CollapsibleCard,
+  Po as ConfirmDialog,
+  vt as ConfirmProvider,
+  pt as DatePicker,
+  Dr as Editable,
+  Er as Field,
+  an as Form,
+  ln as FormField,
+  zt as GlobalStyles,
+  qo as Input,
+  To as Link,
+  Io as Modal,
+  Tr as Select,
+  Sn as Spinner,
+  Un as Table,
+  or as Textarea,
+  St as ThemeProvider,
+  Mo as Toast,
+  yt as ToastProvider,
+  Ct as createNeoBrutalTheme,
+  eo as neoBrutalTheme,
+  kt as useConfirm,
+  wt as useForm,
+  mt as useTable,
+  ht as useToast
 };