blunt-ui 0.3.1 → 0.3.3

package/dist/index.js

@@ -1,13 +1,13 @@
-import { jsx as s, jsxs as C } from "react/jsx-runtime";
-import i, { css as t, keyframes as M, ThemeProvider as Ao } from "styled-components";
-import bo, { useId as G, useState as D, useRef as oo, useEffect as K, useContext as ko, createContext as mo, forwardRef as So, createElement as lo, useCallback as R, useMemo as uo } from "react";
+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 F = (o, r, n) => t`
+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]};
-`, jo = i.span`
+`, Vo = i.span`
   display: inline-flex;
   align-items: center;
   font-weight: 700;
@@ -31,32 +31,32 @@ const F = (o, r, n) => t`
 })[o]}
 
   ${({ $variant: o, theme: r }) => r.brutalism ? {
-  primary: F(
+  primary: H(
     r,
     r.colors.primary[500],
     r.colors.primary.contrast
   ),
-  neutral: F(
+  neutral: H(
     r,
     r.colors.neutral[200],
     r.colors.neutral[900]
   ),
-  success: F(
+  success: H(
     r,
     r.colors.success[50],
     r.colors.success[500]
   ),
-  error: F(
+  error: H(
     r,
     r.colors.error[50],
     r.colors.error[500]
   ),
-  warning: F(
+  warning: H(
     r,
     r.colors.warning[50],
     r.colors.warning[500]
   ),
-  info: F(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 F = (o, r, n) => t`
       `
 }[o]}
 `;
-function Ro({
+function _o({
   variant: o = "primary",
   size: r = "md",
   children: n,
   ...e
 }) {
-  return /* @__PURE__ */ s(jo, { $variant: o, $size: r, ...e, children: n });
+  return /* @__PURE__ */ s(Vo, { $variant: o, $size: r, ...e, children: n });
 }
-Ro.displayName = "Badge";
-const so = (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 so = (o, r, n) => t`
     transform: translate(2px, 2px);
     box-shadow: 2px 2px 0 ${o.colors.neutral[900]};
   }
-`, _o = i.button`
+`, jo = i.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -126,17 +126,17 @@ const so = (o, r, n) => t`
   }
 
   ${({ $variant: o, theme: r }) => r.brutalism ? {
-  primary: so(
+  primary: oo(
     r,
     r.colors.primary[500],
     r.colors.primary.contrast
   ),
-  secondary: so(
+  secondary: oo(
     r,
     r.colors.neutral[100],
     r.colors.neutral[900]
   ),
-  outline: so(
+  outline: oo(
     r,
     r.colors.neutral[0],
     r.colors.neutral[900]
@@ -183,41 +183,41 @@ const so = (o, r, n) => t`
       `
 })[o]}
 `;
-function Mo({
+function so({
   ref: o,
   as: r,
   href: n,
   variant: e = "primary",
-  size: c = "md",
+  size: l = "md",
   isLoading: a,
-  disabled: l,
-  children: u,
-  ...x
+  disabled: c,
+  children: d,
+  ...p
 }) {
   return /* @__PURE__ */ s(
-    _o,
+    jo,
     {
       ref: o,
       as: r ?? (n ? "a" : "button"),
       href: n,
       $variant: e,
-      $size: c,
-      disabled: a || l,
-      ...x,
-      children: a ? "Loading..." : u
+      $size: l,
+      disabled: a || c,
+      ...p,
+      children: a ? "Loading..." : d
     }
   );
 }
-Mo.displayName = "Button";
-const Vo = i.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"};
-`, Fo = i.label`
+`, Ro = i.label`
   font-size: ${({ theme: o }) => o.fontSizes.sm};
   font-weight: ${({ theme: o }) => o.brutalism ? "700" : "500"};
-`, Ko = i.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]};
 `, Ho = i.div`
@@ -256,10 +256,6 @@ const Vo = i.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 Vo = i.div`
   &:focus-within {
     box-shadow: ${({ theme: o }) => o.shadows.focusRing};
   }
-`, Yo = i.input`
+`, Uo = i.input`
   flex: 1;
   border: none;
   outline: none;
@@ -284,11 +280,11 @@ const Vo = i.div`
     cursor: not-allowed;
     opacity: 0.6;
   }
-`, $o = i.div`
+`, fo = i.div`
   display: inline-flex;
   align-items: center;
   margin: 0 ${({ theme: o }) => o.spacing[1]};
-`, Uo = i.button`
+`, Ko = i.button`
   display: inline-flex;
   align-items: center;
   margin: 0 ${({ theme: o }) => o.spacing[1]};
@@ -307,266 +303,176 @@ function qo({
   type: r = "text",
   size: n = "md",
   variant: e = "default",
-  label: c,
+  label: l,
   helperText: a,
-  error: l,
-  leftElement: u,
-  rightElement: x,
-  clearable: p,
-  onClear: b,
-  fullWidth: w,
-  id: y,
-  value: g,
-  defaultValue: k,
-  onChange: T,
-  ...z
+  error: c,
+  leftElement: d,
+  rightElement: p,
+  clearable: $,
+  onClear: g,
+  fullWidth: y,
+  id: b,
+  value: f,
+  defaultValue: x,
+  onChange: w,
+  ...S
 }) {
-  const v = G(), I = y ?? v, P = `${I}-hint`, [B, h] = D(k ?? ""), $ = g !== void 0, m = $ ? g : B, O = typeof l == "string" ? l : void 0, j = !!(a || l), _ = (N) => {
-    $ || h(N.target.value), T?.(N);
-  }, H = () => {
-    $ || h(""), b?.();
+  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__ */ C(Vo, { $fullWidth: w, children: [
-    c && /* @__PURE__ */ s(Fo, { htmlFor: I, children: c }),
-    /* @__PURE__ */ C(Ho, { $size: n, $variant: e, $error: !!l, children: [
-      u && /* @__PURE__ */ s($o, { 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(
-        Yo,
+        Uo,
         {
-          id: I,
+          id: z,
           ref: o,
           type: r,
-          value: m,
-          onChange: _,
-          ...z,
-          "aria-invalid": !!l,
-          "aria-describedby": j ? P : void 0
+          value: D,
+          onChange: O,
+          ...S,
+          "aria-invalid": !!c,
+          "aria-describedby": F ? I : void 0
         }
       ),
-      p && m && /* @__PURE__ */ s(
-        Uo,
+      $ && D && /* @__PURE__ */ s(
+        Ko,
         {
           type: "button",
-          onClick: H,
+          onClick: U,
           "aria-label": "Clear input",
           children: "✕"
         }
       ),
-      x && /* @__PURE__ */ s($o, { children: x })
+      p && /* @__PURE__ */ s(fo, { children: p })
     ] }),
-    j && /* @__PURE__ */ s(Ko, { id: P, $error: !!l, children: O ?? a })
+    F && /* @__PURE__ */ s(Yo, { id: I, $error: !!c, children: W ?? a })
   ] });
 }
 qo.displayName = "Input";
-const Go = M`
-  from { opacity: 0; }
-  to { opacity: 1; }
-`, Xo = M`
-  from { opacity: 1; }
-  to { opacity: 0; }
-`, Zo = M`
-  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
-  to { opacity: 1; transform: scale(1) translateY(0); }
-`, Jo = M`
-  from { opacity: 1; transform: scale(1) translateY(0); }
-  to { opacity: 0; transform: scale(0.95) translateY(-8px); }
-`, Qo = i.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 ? Xo : Go} 0.15s ease
-    forwards;
-`, or = 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"};
+const Go = i.div`
   display: flex;
   flex-direction: column;
-  max-height: 90vh;
-  animation: ${({ $closing: o }) => o ? Jo : Zo} 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;
-    `}
-`, rr = i.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;
-`, nr = i.h2`
-  flex: 1;
-  font-size: ${({ theme: o }) => o.fontSizes.lg};
-  font-weight: 600;
-  margin: 0;
-`, tr = i.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};
   }
-`, sr = i.div`
-  padding: ${({ theme: o }) => o.spacing[4]};
-  overflow-y: auto;
+`, Qo = i.textarea`
   flex: 1;
-`, ir = 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;
-`, er = [
-  "button:not([disabled])",
-  "input:not([disabled])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  "a[href]",
-  '[tabindex]:not([tabindex="-1"])'
-].join(", ");
-function xo(o) {
-  return Array.from(
-    o.querySelectorAll(er)
-  );
-}
-function ar({
-  open: o,
-  onClose: r,
-  title: n,
-  children: e,
-  footer: c,
-  size: a = "md",
-  closeOnBackdrop: l = !0,
-  closeOnEscape: u = !0,
-  ariaLabelledBy: x,
-  ariaDescribedBy: p
+  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 b = oo(null), w = G(), y = x ?? (n ? w : void 0), [g, k] = D(o), [T, z] = D(!1);
-  return K(() => {
-    if (o)
-      k(!0), z(!1);
-    else if (g) {
-      z(!0);
-      const v = setTimeout(() => {
-        k(!1), z(!1);
-      }, 150);
-      return () => clearTimeout(v);
-    }
-  }, [o, g]), K(() => {
-    if (!o)
-      return;
-    const v = document.body.style.overflow;
-    return document.body.style.overflow = "hidden", () => {
-      document.body.style.overflow = v;
-    };
-  }, [o]), K(() => {
-    if (!o || !b.current)
-      return;
-    const v = b.current, I = document.activeElement;
-    (xo(v)[0] ?? v).focus();
-    const B = (h) => {
-      if (h.key === "Escape" && u) {
-        r();
-        return;
-      }
-      if (h.key !== "Tab")
-        return;
-      const $ = xo(v);
-      if ($.length === 0) {
-        h.preventDefault();
-        return;
-      }
-      const m = $[0], O = $[$.length - 1];
-      h.shiftKey ? document.activeElement === m && (h.preventDefault(), O.focus()) : document.activeElement === O && (h.preventDefault(), m.focus());
-    };
-    return document.addEventListener("keydown", B), () => {
-      document.removeEventListener("keydown", B), I?.focus();
-    };
-  }, [o, u, r, g]), g ? Co(
-    /* @__PURE__ */ s(
+  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: T,
-        onClick: l ? r : void 0,
-        children: /* @__PURE__ */ C(
-          or,
-          {
-            ref: b,
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-labelledby": y,
-            "aria-describedby": p,
-            $size: a,
-            $closing: T,
-            tabIndex: -1,
-            onClick: (v) => v.stopPropagation(),
-            children: [
-              /* @__PURE__ */ C(rr, { children: [
-                n && /* @__PURE__ */ s(nr, { id: w, children: n }),
-                /* @__PURE__ */ s(tr, { onClick: r, "aria-label": "Close modal", children: "×" })
-              ] }),
-              /* @__PURE__ */ s(sr, { children: e }),
-              c && /* @__PURE__ */ s(ir, { children: c })
-            ]
-          }
-        )
+        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 })
+  ] });
 }
-ar.displayName = "Modal";
-const zo = (...o) => o.filter((r, n, e) => !!r && r.trim() !== "" && e.indexOf(r) === n).join(" ").trim();
-const lr = (o) => o.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-const cr = (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, e) => e ? e.toUpperCase() : n.toLowerCase()
 );
-const yo = (o) => {
-  const r = cr(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 dr = (o) => {
+const tr = (o) => {
   for (const r in o)
     if (r.startsWith("aria-") || r === "role" || r === "title")
       return !0;
   return !1;
-}, ur = mo({}), pr = () => ko(ur), fr = So(
-  ({ color: o, size: r, strokeWidth: n, absoluteStrokeWidth: e, className: c = "", children: a, iconNode: l, ...u }, x) => {
+}, 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: p = 24,
-      strokeWidth: b = 2,
-      absoluteStrokeWidth: w = !1,
-      color: y = "currentColor",
-      className: g = ""
-    } = pr() ?? {}, k = e ?? w ? Number(n ?? b) * 24 / Number(r ?? p) : n ?? b;
-    return lo(
+      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: x,
-        ...io,
-        width: r ?? p ?? io.width,
-        height: r ?? p ?? io.height,
-        stroke: o ?? y,
-        strokeWidth: k,
-        className: zo("lucide", g, c),
-        ...!a && !dr(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
       },
       [
-        ...l.map(([T, z]) => lo(T, z)),
+        ...c.map(([w, S]) => to(w, S)),
         ...Array.isArray(a) ? a : [a]
       ]
     );
   }
 );
-const X = (o, r) => {
-  const n = So(
-    ({ className: e, ...c }, a) => lo(fr, {
+const _ = (o, r) => {
+  const n = ko(
+    ({ className: e, ...l }, a) => to(ir, {
       ref: a,
       iconNode: r,
-      className: zo(
-        `lucide-${lr(yo(o))}`,
+      className: So(
+        `lucide-${rr($o(o))}`,
         `lucide-${o}`,
         e
       ),
-      ...c
+      ...l
     })
   );
-  return n.displayName = yo(o), n;
+  return n.displayName = $o(o), n;
 };
-const gr = [
+const ar = [
   ["path", { d: "M12 5v14", key: "s699le" }],
   ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
-], br = X("arrow-down", gr);
-const $r = [
+], 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" }]
-], xr = X("arrow-up-down", $r);
-const yr = [
+], dr = _("arrow-up-down", cr);
+const ur = [
   ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
   ["path", { d: "M12 19V5", key: "x0mq9r" }]
-], hr = X("arrow-up", yr);
-const wr = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], To = X("chevron-down", wr);
-const vr = [
+], 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" }]
-], Io = X("x", vr), kr = M`
-  from { opacity: 0; transform: translateY(12px); }
-  to   { opacity: 1; transform: translateY(0); }
-`, mr = M`
-  from { opacity: 0; transform: translateY(-12px); }
-  to   { opacity: 1; transform: translateY(0); }
-`, Sr = M`
-  from { opacity: 1; }
-  to   { opacity: 0; }
-`, Cr = i.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`
-          ${Sr} 0.2s ease forwards
-        ` : r.startsWith("top") ? t`
-            ${mr} 0.2s ease forwards
-          ` : t`
-            ${kr} 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]}
-`, Q = (o, r, n) => t`
-  background: ${r};
-  border: ${o.brutalism.borderWidth} solid ${n};
-  box-shadow: ${o.brutalism.shadowOffset} ${o.brutalism.shadowOffset}
-    0 ${n};
-`, zr = i(Cr)`
-  ${({ $variant: o, theme: r }) => r.brutalism ? {
-  success: Q(
-    r,
-    r.colors.success[50],
-    r.colors.success[500]
-  ),
-  error: Q(
-    r,
-    r.colors.error[50],
-    r.colors.error[500]
-  ),
-  warning: Q(
-    r,
-    r.colors.warning[50],
-    r.colors.warning[500]
-  ),
-  info: Q(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]}
-`, Tr = 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]};
-`, Ir = 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 Eo({
-  open: o,
-  onClose: r,
-  message: n,
-  variant: e = "info",
-  duration: c = 4e3,
-  position: a = "bottom-right"
-}) {
-  const [l, u] = D(o), [x, p] = D(!1);
-  return K(() => {
-    if (o)
-      u(!0), p(!1);
-    else if (l) {
-      p(!0);
-      const b = setTimeout(() => {
-        u(!1), p(!1);
-      }, 200);
-      return () => {
-        clearTimeout(b);
-      };
-    }
-  }, [o, l]), K(() => {
-    if (!o || c === 0)
-      return;
-    const b = setTimeout(r, c);
-    return () => {
-      clearTimeout(b);
-    };
-  }, [o, c, r]), l ? Co(
-    /* @__PURE__ */ C(
-      zr,
-      {
-        $position: a,
-        $variant: e,
-        $closing: x,
-        role: "alert",
-        "aria-live": "polite",
-        children: [
-          /* @__PURE__ */ s(Tr, { children: n }),
-          /* @__PURE__ */ s(Ir, { onClick: r, "aria-label": "Close notification", children: /* @__PURE__ */ s(Io, { size: 14, strokeWidth: 2.5 }) })
-        ]
-      }
-    ),
-    document.body
-  ) : null;
-}
-Eo.displayName = "Toast";
-const Er = i.form`
-  display: flex;
-  flex-direction: column;
-  gap: ${({ theme: o }) => o.spacing[4]};
-`, Wr = i.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${({ theme: o }) => o.spacing[1]};
-`, Or = i.label`
-  font-size: ${({ theme: o }) => o.fontSizes.sm};
-  font-weight: 500;
-  color: ${({ theme: o }) => o.colors.neutral[900]};
-`, Pr = i.span`
-  color: ${({ theme: o }) => o.colors.error[500]};
-  margin-left: 2px;
-`, Br = i.span`
-  font-size: ${({ theme: o }) => o.fontSizes.xs};
-  color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
-`;
-function Dr({ onSubmit: o, children: r, ...n }) {
-  return /* @__PURE__ */ s(
-    Er,
-    {
-      onSubmit: (e) => {
-        e.preventDefault(), o?.(e);
-      },
-      noValidate: !0,
-      ...n,
-      children: r
-    }
-  );
-}
-Dr.displayName = "Form";
-function Nr({
-  label: o,
-  error: r,
-  helperText: n,
-  required: e,
-  children: c
-}) {
-  const a = G(), l = `${a}-hint`, u = !!(r || n), x = typeof r == "string" ? r : void 0, p = bo.isValidElement(c) ? bo.cloneElement(
-    c,
-    {
-      id: a,
-      ...u && { "aria-describedby": l },
-      ...r && { "aria-invalid": !0 }
-    }
-  ) : c;
-  return /* @__PURE__ */ C(Wr, { children: [
-    o && /* @__PURE__ */ C(Or, { htmlFor: a, children: [
-      o,
-      e && /* @__PURE__ */ s(Pr, { "aria-hidden": "true", children: " *" })
-    ] }),
-    p,
-    u && /* @__PURE__ */ s(Br, { id: l, $error: !!r, children: x ?? n })
-  ] });
-}
-Nr.displayName = "FormField";
-const Lr = i.div`
-  display: inline-flex;
-  flex-direction: column;
-  gap: ${({ theme: o }) => o.spacing[1]};
-  width: ${({ $fullWidth: o }) => o ? "100%" : "auto"};
-`, Ar = i.div`
-  position: relative;
-  display: flex;
-  width: 100%;
-`, jr = i.span`
-  font-size: ${({ theme: o }) => o.fontSizes.xs};
-  color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
-`, Rr = i.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 Lr = i.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 Lr = i.div`
     cursor: not-allowed;
     opacity: 0.6;
   }
-`, _r = i.button`
+`, Sr = i.button`
   position: absolute;
   right: ${({ theme: o }) => o.spacing[3]};
   top: 50%;
@@ -964,7 +649,7 @@ const Lr = i.div`
     outline-offset: 2px;
     border-radius: 2px;
   }
-`, Mr = i.span`
+`, zr = i.span`
   position: absolute;
   right: ${({ theme: o }) => o.spacing[3]};
   top: 50%;
@@ -974,63 +659,165 @@ const Lr = i.div`
   align-items: center;
   color: ${({ theme: o }) => o.colors.neutral[500]};
 `;
-function Vr({
+function Tr({
   options: o,
   placeholder: r,
   size: n = "md",
   variant: e = "default",
-  error: c,
+  error: l,
   fullWidth: a,
-  clearable: l,
-  onClear: u,
-  id: x,
-  value: p,
-  defaultValue: b,
-  onChange: w,
-  ...y
+  clearable: c,
+  onClear: d,
+  id: p,
+  value: $,
+  defaultValue: g,
+  onChange: y,
+  ...b
 }) {
-  const g = G(), k = x ?? g, T = `${k}-hint`, z = typeof c == "string" ? c : void 0, [v, I] = D(
-    b ?? ""
-  ), P = p !== void 0, B = P ? p : v, h = (O) => {
-    P || I(O.target.value), w?.(O);
-  }, $ = () => {
-    P || I(""), u?.();
-  }, m = l && !!B;
-  return /* @__PURE__ */ C(Lr, { $fullWidth: a, children: [
-    /* @__PURE__ */ C(Ar, { children: [
+  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 = () => {
+    I || z(""), d?.();
+  }, D = c && !!k;
+  return /* @__PURE__ */ C(mr, { $fullWidth: a, children: [
+    /* @__PURE__ */ C(vr, { children: [
       /* @__PURE__ */ C(
-        Rr,
+        Cr,
         {
-          id: k,
+          id: x,
           $size: n,
           $variant: e,
-          $error: !!c,
-          "aria-invalid": !!c,
-          "aria-describedby": z ? T : void 0,
-          value: B,
-          onChange: h,
-          ...y,
+          $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((O) => /* @__PURE__ */ s("option", { value: O.value, disabled: O.disabled, children: O.label }, O.value))
+            o.map((W) => /* @__PURE__ */ s("option", { value: W.value, disabled: W.disabled, children: W.label }, W.value))
           ]
         }
       ),
-      m ? /* @__PURE__ */ s(
-        _r,
+      D ? /* @__PURE__ */ s(
+        Sr,
         {
           type: "button",
-          onClick: $,
+          onClick: v,
           "aria-label": "Clear selection",
-          children: /* @__PURE__ */ s(Io, { size: 14 })
+          children: /* @__PURE__ */ s(co, { size: 14 })
         }
-      ) : /* @__PURE__ */ s(Mr, { "aria-hidden": "true", children: /* @__PURE__ */ s(To, { size: 14 }) })
+      ) : /* @__PURE__ */ s(zr, { "aria-hidden": "true", children: /* @__PURE__ */ s(zo, { size: 14 }) })
     ] }),
-    z && /* @__PURE__ */ s(jr, { id: T, $error: !0, children: z })
+    S && /* @__PURE__ */ s(kr, { id: w, $error: !0, children: S })
   ] });
 }
-Vr.displayName = "Select";
-const Fr = i.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,14 +843,14 @@ const Fr = i.a`
       `
 })[o]}
 `;
-function Kr({
+function To({
   variant: o = "default",
   external: r,
   children: n,
   ...e
 }) {
   return /* @__PURE__ */ s(
-    Fr,
+    Wr,
     {
       $variant: o,
       ...r && { target: "_blank", rel: "noreferrer" },
@@ -1072,150 +859,405 @@ function Kr({
     }
   );
 }
-Kr.displayName = "Link";
-const Hr = 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);
-        `}
-`, Yr = i.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;
-  }
-`, Ur = i.div`
-  flex: 1;
-  min-width: 0;
-`, qr = i.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]};
-`, Gr = i.span`
-  display: block;
-  font-size: ${({ theme: o }) => o.fontSizes.sm};
-  color: ${({ theme: o }) => o.colors.neutral[500]};
-`, Xr = i.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: ${({ theme: o }) => o.spacing[1]};
+`;
+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;
+  align-items: center;
+  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;
 
-  @media (max-width: 640px) {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: ${({ theme: o }) => o.spacing[2]};
-  }
-`, Zr = i.div`
+  ${({ $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]};
-`, Jr = i.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]};
-`, Qr = i.div`
-  display: grid;
-  grid-template-rows: ${({ $open: o }) => o ? "1fr" : "0fr"};
-  transition: grid-template-rows 0.2s ease;
-`, on = i.div`
-  overflow: hidden;
-`, rn = i.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 nn({
-  title: o,
-  children: r,
-  defaultOpen: n = !1,
-  open: e,
-  onToggle: c,
-  subtitle: a,
-  headerActions: l,
-  accentColor: u
+function Mo({
+  open: o,
+  onClose: r,
+  message: n,
+  variant: e = "info",
+  duration: l = 4e3,
+  position: a = "bottom-right"
 }) {
-  const [x, p] = D(n), b = G(), w = e !== void 0, y = w ? e : x;
-  return /* @__PURE__ */ C(Hr, { $accentColor: u, children: [
+  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(
-      Yr,
+      Zr,
       {
-        type: "button",
-        $open: y,
-        $accentColor: u,
-        "aria-expanded": y,
-        "aria-controls": b,
-        onClick: () => {
-          const k = !y;
-          w || p(k), c?.(k);
-        },
+        $position: a,
+        $variant: e,
+        $closing: p,
+        role: "alert",
+        "aria-live": "polite",
         children: [
-          /* @__PURE__ */ C(Ur, { children: [
-            /* @__PURE__ */ s(qr, { children: o }),
-            (a || l) && /* @__PURE__ */ C(Xr, { children: [
-              a && /* @__PURE__ */ s(Gr, { children: a }),
-              l && /* @__PURE__ */ s(Zr, { onClick: (k) => k.stopPropagation(), children: l })
-            ] })
-          ] }),
-          /* @__PURE__ */ s(
-            Jr,
-            {
-              $open: y,
-              $accentColor: u,
-              "aria-hidden": "true",
-              children: /* @__PURE__ */ s(To, { 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(Qr, { $open: y, children: /* @__PURE__ */ s(on, { id: b, role: "region", "aria-label": o, children: /* @__PURE__ */ s(rn, { children: r }) }) })
-  ] });
+    document.body
+  ) : null;
 }
-nn.displayName = "CollapsibleCard";
-const Wo = mo(null);
-function An({ children: o }) {
-  const [r, n] = D(null), e = 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() });
-  }, []), c = uo(() => Object.assign((a) => e(a), {
-    success: (a, l) => e({ ...l, message: a, variant: "success" }),
-    error: (a, l) => e({ ...l, message: a, variant: "error" }),
-    warning: (a, l) => e({ ...l, message: a, variant: "warning" }),
-    info: (a, l) => e({ ...l, message: a, variant: "info" })
+  }, []), 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(Wo.Provider, { value: { toast: c }, children: [
+  return /* @__PURE__ */ C(Do.Provider, { value: { toast: l }, children: [
     o,
     r && /* @__PURE__ */ s(
-      Eo,
+      Mo,
       {
         open: !0,
         onClose: () => n(null),
@@ -1228,137 +1270,376 @@ function An({ children: o }) {
     )
   ] });
 }
-function jn() {
-  const o = ko(Wo);
+function ht() {
+  const o = io(Do);
   if (!o)
     throw new Error("useToast must be used within a ToastProvider");
   return o;
 }
-function Rn({
+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: e
 }) {
-  const [c, a] = D(o), [l, u] = D(
+  const [l, a] = M(o), [c, d] = M(
     {}
-  ), [x, p] = D({}), [b, w] = D(!1), y = oo(c);
-  y.current = c;
-  const g = R(
-    (h) => {
+  ), [p, $] = M({}), [g, y] = M(!1), b = G(l);
+  b.current = l;
+  const f = V(
+    (m) => {
       if (!r)
         return {};
-      const $ = r(h);
+      const v = r(m);
       return Object.fromEntries(
-        Object.entries($).filter(([, m]) => m !== void 0)
+        Object.entries(v).filter(([, D]) => D !== void 0)
       );
     },
     [r]
-  ), k = oo(x);
-  k.current = x;
-  const T = R(
-    (h) => {
-      const { name: $, value: m } = h.target, O = { ...y.current, [$]: m };
-      a(O), k.current[$] && u(g(O));
+  ), 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));
     },
-    [g]
-  ), z = R(
-    (h) => {
-      const { name: $ } = h.target;
-      p((m) => ({ ...m, [$]: !0 })), u(g(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));
     },
-    [g]
-  ), v = R(
-    (h) => {
-      h?.preventDefault();
-      const $ = Object.keys(y.current).reduce(
-        (j, _) => ({ ...j, [_]: !0 }),
+    [f]
+  ), T = V(
+    (m) => {
+      m?.preventDefault();
+      const v = Object.keys(b.current).reduce(
+        (F, O) => ({ ...F, [O]: !0 }),
         {}
       );
-      p($);
-      const m = g(y.current);
-      if (u(m), Object.keys(m).length > 0) {
-        e?.(m);
+      $(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);
         }
       })();
     },
-    [g, n, e]
-  ), I = R((h, $) => {
-    a((m) => ({ ...m, [h]: $ }));
-  }, []), P = R(() => {
-    a(o), u({}), p({}), w(!1);
-  }, [o]), B = Object.fromEntries(
-    Object.entries(l).filter(([h]) => x[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: c,
-    errors: B,
-    touched: x,
-    handleChange: T,
-    handleBlur: z,
-    handleSubmit: v,
-    setFieldValue: I,
-    reset: P,
-    isSubmitting: b
+    values: l,
+    errors: k,
+    touched: p,
+    handleChange: w,
+    handleBlur: S,
+    handleSubmit: T,
+    setFieldValue: z,
+    reset: I,
+    isSubmitting: g
   };
 }
-function tn(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 sn({
+function Tn({
   data: o,
   sort: r,
   defaultSort: n,
   onSortChange: e
 }) {
-  const c = r !== void 0, [a, l] = D(
+  const l = r !== void 0, [a, c] = M(
     n ?? null
-  ), u = c ? r ?? null : a, x = (b) => {
-    const w = tn(u, b);
-    return c || l(w), e?.(w), w;
-  }, p = uo(() => c || !u ? o : [...o].sort((b, w) => {
-    const y = b[u.key], g = w[u.key], k = y < g ? -1 : y > g ? 1 : 0;
-    return u.direction === "asc" ? k : -k;
-  }), [o, u, c]);
-  return { activeSort: u, sortedData: p, handleSort: x };
+  ), 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 en = 7, ho = 3, wo = 1;
-function an(o, r) {
-  if (r <= en)
-    return Array.from({ length: r }, (e, c) => c + 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 > ho && n.push("...");
-  for (let e = Math.max(2, o - wo); e <= Math.min(r - 1, o + wo); e++)
+  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 - ho + 1 && n.push("..."), n.push(r), n;
+  return o < r - xo + 1 && n.push("..."), n.push(r), n;
 }
-function ln({
+function Dn({
   data: o,
   pageSize: r,
   page: n,
   defaultPage: e,
-  totalRows: c,
+  totalRows: l,
   onPageChange: a
 }) {
-  const l = n !== void 0, [u, x] = D(e ?? 1), p = l ? n : u, b = (T) => {
-    l || x(T), a?.(T);
-  }, w = l || c !== void 0, y = c ?? o.length, g = r ? Math.max(1, Math.ceil(y / r)) : 1, k = uo(() => {
-    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 T = (p - 1) * r;
-    return o.slice(T, T + r);
-  }, [o, r, p, w]);
-  return { activePage: p, totalPages: g, displayData: k, handlePageChange: b };
+    const w = ($ - 1) * r;
+    return o.slice(w, w + r);
+  }, [o, r, $, y]);
+  return { activePage: $, totalPages: f, displayData: x, handlePageChange: g };
 }
-const Oo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg" ? `${r.spacing[3]} ${r.spacing[4]}` : `${r.spacing[2]} ${r.spacing[3]}`, Po = i.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 Oo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
   ${({ $stickyHeader: o }) => o && t`
       overflow-y: auto;
     `}
-`, Bo = i.table`
+`, On = i.table`
   width: 100%;
   border-collapse: collapse;
   font-size: ${({ $size: o, theme: r }) => ({
@@ -1389,7 +1670,7 @@ const Oo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
   caption {
     padding: 8px 0;
   }
-`, Do = i.thead`
+`, Pn = i.thead`
   ${({ $stickyHeader: o }) => o && t`
       position: sticky;
       top: 0;
@@ -1409,7 +1690,7 @@ const Oo = (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]};
           `}
-`, No = i.tbody`
+`, Nn = i.tbody`
   ${({ $rowColor: o }) => o && t`
       tr {
         background-color: ${o};
@@ -1425,21 +1706,37 @@ const Oo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
   tr:last-child td {
     border-bottom: none;
   }
-`, q = i.tr``, po = i.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 }) => Oo(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 Oo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
             }
           `}
         `}
-`, cn = i.button`
+`, Fn = i.button`
   display: inline-flex;
   align-items: center;
   gap: ${({ theme: o }) => o.spacing[1]};
@@ -1467,12 +1764,12 @@ const Oo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
     outline-offset: 2px;
     border-radius: 2px;
   }
-`, dn = i.span`
+`, Bn = i.span`
   opacity: 0.5;
   display: inline-flex;
   align-items: center;
-`, ro = i.td`
-  padding: ${({ $size: o, theme: r }) => Oo(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 Oo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
             border-bottom: 1px solid
               ${r ?? n.colors.neutral[200]};
           `}
-`, un = i.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;
-`, pn = M`
+`, _n = L`
   0% { background-position: -400px 0; }
   100% { background-position: 400px 0; }
-`, fn = i(ro)``, gn = i.div`
+`, jn = i(Oo)``, An = i.div`
   height: 14px;
   border-radius: 4px;
   background: linear-gradient(
@@ -1509,8 +1806,8 @@ const Oo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
     ${({ theme: o }) => o.colors.neutral[200]} 75%
   );
   background-size: 800px 100%;
-  animation: ${pn} 1.6s ease-in-out infinite;
-`, bn = i.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 Oo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
         ` : t`
           border-top: 1px solid ${o.colors.neutral[200]};
         `}
-`, eo = i.button`
+`, no = i.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1566,171 +1863,180 @@ const Oo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
     outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
     outline-offset: 2px;
   }
-`, $n = 4;
-function xn(o, r) {
-  return o?.key !== r ? /* @__PURE__ */ s(xr, { size: 14 }) : o.direction === "asc" ? /* @__PURE__ */ s(hr, { size: 14 }) : /* @__PURE__ */ s(br, { 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 yn({
+function Un({
   columns: o,
   data: r,
   rowKey: n,
   size: e = "md",
-  striped: c,
+  striped: l,
   bordered: a,
-  stickyHeader: l,
-  caption: u,
-  emptyMessage: x = "No data",
-  loading: p,
-  sort: b,
-  defaultSort: w,
-  onSortChange: y,
-  pageSize: g,
-  page: k,
-  defaultPage: T,
-  totalRows: z,
-  onPageChange: v,
-  onChange: I,
-  borderColor: P,
-  headerColor: B,
-  rowColor: h,
-  stripeColor: $,
-  className: m,
-  style: O
+  stickyHeader: c,
+  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: j,
-    sortedData: _,
-    handleSort: H
-  } = sn({
+    activeSort: O,
+    sortedData: U,
+    handleSort: P
+  } = Tn({
     data: r,
-    sort: b,
-    defaultSort: w,
-    onSortChange: y
+    sort: g,
+    defaultSort: y,
+    onSortChange: b
   }), {
     activePage: N,
-    totalPages: Y,
-    displayData: Z,
-    handlePageChange: no
-  } = ln({
-    data: _,
-    pageSize: g,
-    page: k,
-    defaultPage: T,
-    totalRows: z,
-    onPageChange: v
-  }), to = (d) => {
-    const S = H(d);
-    I?.({ sort: S, page: N });
-  }, U = (d) => {
-    no(d), I?.({ sort: j, page: d });
-  }, f = (d, S) => String(n ? d[n] : S), E = !p && Z.length === 0, W = g ?? $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(
-    Po,
+    Wn,
     {
-      $borderColor: P,
-      $stickyHeader: l,
-      className: m,
-      style: O,
+      $borderColor: k,
+      $stickyHeader: c,
+      className: W,
+      style: F,
       children: [
-        /* @__PURE__ */ C(Bo, { $size: e, children: [
-          u && /* @__PURE__ */ s("caption", { children: u }),
+        /* @__PURE__ */ C(On, { $size: e, children: [
+          d && /* @__PURE__ */ s("caption", { children: d }),
           /* @__PURE__ */ s(
-            Do,
+            Pn,
             {
-              $headerColor: B,
-              $borderColor: P,
-              $stickyHeader: l,
-              children: /* @__PURE__ */ s(q, { children: o.map((d) => /* @__PURE__ */ s(
-                po,
+              $headerColor: m,
+              $borderColor: k,
+              $stickyHeader: c,
+              children: /* @__PURE__ */ s(X, { children: o.map((h) => /* @__PURE__ */ s(
+                Ln,
                 {
                   $size: e,
                   $bordered: a,
                   scope: "col",
-                  style: d.width ? { width: d.width } : void 0,
-                  children: d.sortable ? /* @__PURE__ */ C(
-                    cn,
+                  style: h.width ? { width: h.width } : void 0,
+                  children: h.sortable ? /* @__PURE__ */ C(
+                    Fn,
                     {
                       type: "button",
-                      onClick: () => to(d.key),
-                      "aria-label": `Sort by ${d.header}${j?.key === d.key ? `, ${j.direction}ending` : ""}`,
+                      onClick: () => R(h.key),
+                      "aria-label": `Sort by ${h.header}${O?.key === h.key ? `, ${O.direction}ending` : ""}`,
                       children: [
-                        d.header,
-                        /* @__PURE__ */ s(dn, { "aria-hidden": "true", children: xn(j, d.key) })
+                        h.header,
+                        /* @__PURE__ */ s(Bn, { "aria-hidden": "true", children: Hn(O, h.key) })
                       ]
                     }
-                  ) : d.header
+                  ) : h.header
                 },
-                d.key
+                h.key
               )) })
             }
           ),
           /* @__PURE__ */ s(
-            No,
+            Nn,
             {
-              $striped: c,
-              $rowColor: h,
-              $stripeColor: $,
-              children: p ? Array.from({ length: W }).map((d, S) => /* @__PURE__ */ s(q, { children: o.map((L) => /* @__PURE__ */ s(
-                fn,
+              $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: e,
                   $bordered: a,
-                  $borderColor: P,
-                  children: /* @__PURE__ */ s(gn, {})
+                  $borderColor: k,
+                  children: /* @__PURE__ */ s(An, {})
                 },
-                L.key
-              )) }, S)) : E ? /* @__PURE__ */ s("tr", { children: /* @__PURE__ */ s(un, { colSpan: o.length, children: x }) }) : Z.map((d, S) => /* @__PURE__ */ s(q, { children: o.map((L) => /* @__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: e,
-                  $bordered: a,
-                  $borderColor: P,
-                  children: L.render ? L.render(d[L.key], d, S) : String(d[L.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
+                  ))
                 },
-                L.key
-              )) }, f(d, S)))
+                Z(h, E)
+              ))
             }
           )
         ] }),
-        g && Y > 1 && /* @__PURE__ */ C(bn, { children: [
+        f && K > 1 && /* @__PURE__ */ C(Rn, { children: [
           /* @__PURE__ */ s(
-            eo,
+            no,
             {
               type: "button",
-              onClick: () => U(N - 1),
+              onClick: () => Y(N - 1),
               disabled: N <= 1,
               "aria-label": "Previous page",
               children: "←"
             }
           ),
-          an(N, Y).map(
-            (d, S) => d === "..." ? /* @__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(
-              eo,
+              no,
               {
                 type: "button",
-                $active: d === N,
-                onClick: () => U(d),
-                "aria-label": `Page ${d}`,
-                "aria-current": d === N ? "page" : void 0,
-                children: d
+                $active: h === N,
+                onClick: () => Y(h),
+                "aria-label": `Page ${h}`,
+                "aria-current": h === N ? "page" : void 0,
+                children: h
               },
-              d
+              h
             )
           ),
           /* @__PURE__ */ s(
-            eo,
+            no,
             {
               type: "button",
-              onClick: () => U(N + 1),
-              disabled: N >= Y,
+              onClick: () => Y(N + 1),
+              disabled: N >= K,
               "aria-label": "Next page",
               children: "→"
             }
@@ -1740,323 +2046,527 @@ function yn({
     }
   );
 }
-yn.displayName = "Table";
-const hn = i(Bo)`
-  table-layout: fixed;
-`, wn = i(ro)`
-  ${({ $editable: o, theme: r }) => o && t`
-      cursor: pointer;
-      position: relative;
-
-      &:hover {
-        background-color: ${r.brutalism ? r.colors.neutral[100] : r.colors.primary[50]};
+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
       }
-    `}
-`, vn = i.input`
-  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;
+    )
+  ] });
+}
+function kt() {
+  const o = io(No);
+  if (!o)
+    throw new Error("useConfirm must be used within a ConfirmProvider");
+  return o.confirm;
+}
+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;
+
+  ${({ $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};
-          }
-        `}
-`, kn = i(po)`
-  width: 40px;
-`, mn = i(ro)`
-  width: 40px;
-  text-align: center;
-  padding-left: 0;
-  padding-right: 0;
-`, Sn = i.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;
   }
-`, Cn = i.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]};
-        `}
-`, zn = i.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 ao(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 Tn({
-  columns: o,
-  defaultData: r,
-  data: n,
-  rowKey: e,
-  onChange: c,
-  size: a = "md",
-  borderColor: l,
-  headerColor: u,
-  addRowLabel: x = "Add row",
-  newRowFactory: p,
-  deletable: b = !1,
-  className: w,
-  style: y
-}) {
-  const g = n !== void 0, [k, T] = D(r ?? []), z = g ? n : k, [v, I] = D(null), [P, B] = D(""), h = oo(null);
-  K(() => {
-    v && (h.current?.focus(), h.current?.select());
-  }, [v]);
-  const $ = R(
-    (f) => {
-      g || T(f), c?.(f);
-    },
-    [g, c]
-  ), m = R(
-    () => p ? p() : Object.fromEntries(o.map((f) => [f.key, ""])),
-    [p, o]
-  ), O = R(
-    (f) => {
-      const E = [];
-      return f.forEach((W, d) => {
-        o.forEach((S) => {
-          ao(S, W, d) && E.push({ rowIndex: d, colKey: S.key });
-        });
-      }), E;
-    },
-    [o]
-  ), j = (f, E, W) => {
-    I({ rowIndex: f, colKey: E }), B(String(W ?? ""));
-  }, _ = R(() => {
-    if (!v)
-      return;
-    const { rowIndex: f, colKey: E } = v, W = z.map(
-      (d, S) => S === f ? { ...d, [E]: P } : d
+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()
     );
-    $(W), I(null);
-  }, [v, z, P, $]), H = () => {
-    I(null), B("");
-  }, N = (f) => {
-    if (!v)
-      return;
-    f.preventDefault();
-    const { rowIndex: E, colKey: W } = v, d = z.map(
-      (A, J) => J === E ? { ...A, [W]: P } : A
+    if (o < e) return !0;
+  }
+  if (n) {
+    const e = new Date(
+      n.getFullYear(),
+      n.getMonth(),
+      n.getDate()
     );
-    $(d);
-    const S = O(d), L = S.findIndex(
-      (A) => A.rowIndex === E && A.colKey === W
-    ), V = f.shiftKey ? L - 1 : L + 1;
-    if (V >= 0 && V < S.length) {
-      const A = S[V];
-      I(A), B(String(d[A.rowIndex][A.colKey] ?? ""));
-      return;
-    }
-    if (!f.shiftKey && V >= S.length) {
-      const A = m(), J = [...d, A];
-      $(J);
-      const fo = J.length - 1, go = o.find(
-        (Lo) => ao(Lo, A, fo)
-      );
-      I(
-        go ? { rowIndex: fo, colKey: go.key } : null
-      ), B("");
-      return;
-    }
-    I(null), B("");
-  }, Y = (f) => {
-    if (f.key === "Enter") {
-      _();
-      return;
-    }
-    if (f.key === "Escape") {
-      H();
-      return;
-    }
-    f.key === "Tab" && N(f);
-  }, Z = () => $([...z, m()]), no = (f) => {
-    v?.rowIndex === f && I(null), $(z.filter((E, W) => W !== f));
-  }, to = (f, E) => String(e ? f[e] : E), U = b ? o.length + 1 : o.length;
-  return /* @__PURE__ */ s(
-    Po,
-    {
-      $borderColor: l,
-      className: w,
-      style: y,
-      children: /* @__PURE__ */ C(hn, { $size: a, children: [
-        /* @__PURE__ */ s(Do, { $headerColor: u, $borderColor: l, children: /* @__PURE__ */ C(q, { children: [
-          o.map((f) => /* @__PURE__ */ s(
-            po,
+    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: f.width ? { width: f.width } : void 0,
-              children: f.header
-            },
-            f.key
-          )),
-          b && /* @__PURE__ */ s(kn, { $size: a, "aria-label": "Actions" })
-        ] }) }),
-        /* @__PURE__ */ C(No, { children: [
-          z.map((f, E) => /* @__PURE__ */ C(q, { children: [
-            o.map((W) => {
-              const d = v?.rowIndex === E && v.colKey === W.key, S = f[W.key], L = ao(W, f, E);
-              return /* @__PURE__ */ s(
-                wn,
-                {
-                  $size: a,
-                  $borderColor: l,
-                  $editable: L && !d,
-                  onClick: L && !d ? () => j(E, W.key, S) : void 0,
-                  children: d ? /* @__PURE__ */ s(
-                    vn,
-                    {
-                      ref: h,
-                      $size: a,
-                      value: P,
-                      onChange: (V) => B(V.target.value),
-                      onBlur: _,
-                      onKeyDown: Y,
-                      "aria-label": `Edit ${W.header}`
-                    }
-                  ) : W.render ? W.render(S, f, E) : String(S ?? "") || " "
-                },
-                W.key
-              );
-            }),
-            b && /* @__PURE__ */ s(mn, { $size: a, $borderColor: l, children: /* @__PURE__ */ s(
-              Sn,
+              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: () => no(E),
-                "aria-label": "Delete row",
-                children: "✕"
-              }
-            ) })
-          ] }, to(f, E))),
-          /* @__PURE__ */ s(Cn, { children: /* @__PURE__ */ s("td", { colSpan: U, children: /* @__PURE__ */ C(zn, { type: "button", onClick: Z, children: [
-            "+ ",
-            x
-          ] }) }) })
-        ] })
+                $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
+          );
+        })
       ] })
-    }
-  );
+    ] })
+  ] });
 }
-Tn.displayName = "DataTable";
-const vo = {
-  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"
-  }
-}, In = {
-  1: "4px",
-  2: "8px",
-  3: "12px",
-  4: "16px",
-  5: "20px",
-  6: "24px"
-}, En = {
-  md: "6px"
-}, Wn = {
-  modal: 1e3,
-  toast: 1100
-}, On = {
-  xs: "12px",
-  sm: "14px",
-  md: "16px",
-  lg: "18px"
-}, _n = {
-  colors: { ...vo, primary: { ...vo.primary, contrast: "#ffffff" } },
-  spacing: In,
-  fontSizes: On,
-  radius: En,
-  zIndex: Wn,
-  shadows: {
-    focusRing: "0 0 0 2px rgba(0, 112, 243, 0.25)"
-  }
-};
-function Pn(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, c = (l) => l <= 0.03928 ? l / 12.92 : ((l + 0.055) / 1.055) ** 2.4;
-  return 0.2126 * c(r) + 0.7152 * c(n) + 0.0722 * c(e) > 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 co = {
+const eo = {
   colors: {
     primary: {
       50: "#fffde6",
@@ -2086,44 +2596,70 @@ const co = {
   shadows: { focusRing: "3px 3px 0 #111111" },
   brutalism: { borderWidth: "2px", shadowOffset: "4px" }
 };
-function Mn(o) {
+function Ct(o) {
   return {
-    ...co,
+    ...eo,
     colors: {
-      ...co.colors,
+      ...eo.colors,
       primary: {
         50: "#fffff0",
         500: o,
         700: o,
-        contrast: Pn(o)
+        contrast: ft(o)
       }
     }
   };
 }
-function Vn({
-  theme: o = co,
+function St({
+  theme: o = eo,
   children: r
 }) {
-  return /* @__PURE__ */ s(Ao, { 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 {
-  Ro as Badge,
-  Mo as Button,
-  nn as CollapsibleCard,
-  Tn as DataTable,
-  Dr as Form,
-  Nr as FormField,
+  _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,
-  Kr as Link,
-  ar as Modal,
-  Vr as Select,
-  yn as Table,
-  Vn as ThemeProvider,
-  Eo as Toast,
-  An as ToastProvider,
-  Mn as createNeoBrutalTheme,
-  _n as defaultTheme,
-  co as neoBrutalTheme,
-  Rn as useForm,
-  jn as useToast
+  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
 };