blunt-ui 0.3.0 → 0.3.1

package/dist/index.js

@@ -1,13 +1,13 @@
-import { jsx as i, jsxs as m } from "react/jsx-runtime";
-import t, { css as n, keyframes as R, ThemeProvider as yo } from "styled-components";
-import G, { useId as M, useState as W, useRef as Y, useEffect as V, useContext as no, createContext as so, forwardRef as to, createElement as q, useCallback as j, useMemo as wo } from "react";
-import { createPortal as io } from "react-dom";
-const N = (o, r, s) => n`
+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 { createPortal as Co } from "react-dom";
+const F = (o, r, n) => t`
   background: ${r};
-  color: ${s};
+  color: ${n};
   border: ${o.brutalism.borderWidth} solid ${o.colors.neutral[900]};
   box-shadow: 2px 2px 0 ${o.colors.neutral[900]};
-`, vo = t.span`
+`, jo = i.span`
   display: inline-flex;
   align-items: center;
   font-weight: 700;
@@ -20,82 +20,82 @@ const N = (o, r, s) => n`
   max-width: 20ch;
 
   ${({ $size: o, theme: r }) => ({
-  sm: n`
+  sm: t`
         padding: 2px 8px;
         font-size: ${r.fontSizes.xs};
       `,
-  md: n`
+  md: t`
         padding: 4px 10px;
         font-size: ${r.fontSizes.sm};
       `
 })[o]}
 
   ${({ $variant: o, theme: r }) => r.brutalism ? {
-  primary: N(
+  primary: F(
     r,
     r.colors.primary[500],
     r.colors.primary.contrast
   ),
-  neutral: N(
+  neutral: F(
     r,
     r.colors.neutral[200],
     r.colors.neutral[900]
   ),
-  success: N(
+  success: F(
     r,
     r.colors.success[50],
     r.colors.success[500]
   ),
-  error: N(
+  error: F(
     r,
     r.colors.error[50],
     r.colors.error[500]
   ),
-  warning: N(
+  warning: F(
     r,
     r.colors.warning[50],
     r.colors.warning[500]
   ),
-  info: N(r, r.colors.info[50], r.colors.info[500])
+  info: F(r, r.colors.info[50], r.colors.info[500])
 }[o] : {
-  primary: n`
+  primary: t`
         background: ${r.colors.primary[50]};
         color: ${r.colors.primary[500]};
       `,
-  neutral: n`
+  neutral: t`
         background: ${r.colors.neutral[200]};
         color: ${r.colors.neutral[600]};
       `,
-  success: n`
+  success: t`
         background: ${r.colors.success[50]};
         color: ${r.colors.success[500]};
       `,
-  error: n`
+  error: t`
         background: ${r.colors.error[50]};
         color: ${r.colors.error[500]};
       `,
-  warning: n`
+  warning: t`
         background: ${r.colors.warning[50]};
         color: ${r.colors.warning[500]};
       `,
-  info: n`
+  info: t`
         background: ${r.colors.info[50]};
         color: ${r.colors.info[500]};
       `
 }[o]}
 `;
-function mo({
+function Ro({
   variant: o = "primary",
   size: r = "md",
-  children: s,
-  ...a
+  children: n,
+  ...e
 }) {
-  return /* @__PURE__ */ i(vo, { $variant: o, $size: r, ...a, children: s });
+  return /* @__PURE__ */ s(jo, { $variant: o, $size: r, ...e, children: n });
 }
-mo.displayName = "Badge";
-const _ = (o, r, s) => n`
+Ro.displayName = "Badge";
+const so = (o, r, n) => t`
   background-color: ${r};
-  color: ${s};
+  color: ${n};
   border: ${o.brutalism.borderWidth} solid ${o.colors.neutral[900]};
   box-shadow: ${o.brutalism.shadowOffset} ${o.brutalism.shadowOffset}
     0 ${o.colors.neutral[900]};
@@ -106,7 +106,7 @@ const _ = (o, r, s) => n`
     transform: translate(2px, 2px);
     box-shadow: 2px 2px 0 ${o.colors.neutral[900]};
   }
-`, ho = t.button`
+`, _o = i.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -126,23 +126,23 @@ const _ = (o, r, s) => n`
   }
 
   ${({ $variant: o, theme: r }) => r.brutalism ? {
-  primary: _(
+  primary: so(
     r,
     r.colors.primary[500],
     r.colors.primary.contrast
   ),
-  secondary: _(
+  secondary: so(
     r,
     r.colors.neutral[100],
     r.colors.neutral[900]
   ),
-  outline: _(
+  outline: so(
     r,
     r.colors.neutral[0],
     r.colors.neutral[900]
   )
 }[o] : {
-  primary: n`
+  primary: t`
         background-color: ${r.colors.primary[500]};
         color: ${r.colors.neutral[0]};
         border: none;
@@ -150,7 +150,7 @@ const _ = (o, r, s) => n`
           background-color: ${r.colors.primary[700]};
         }
       `,
-  secondary: n`
+  secondary: t`
         background-color: ${r.colors.neutral[200]};
         color: ${r.colors.neutral[600]};
         border: none;
@@ -158,7 +158,7 @@ const _ = (o, r, s) => n`
           background-color: ${r.colors.neutral[300]};
         }
       `,
-  outline: n`
+  outline: t`
         background-color: transparent;
         color: ${r.colors.primary[500]};
         border: 2px solid ${r.colors.primary[500]};
@@ -169,58 +169,58 @@ const _ = (o, r, s) => n`
 }[o]}
 
   ${({ $size: o, theme: r }) => ({
-  sm: n`
+  sm: t`
         padding: ${r.spacing[1]} ${r.spacing[3]};
         font-size: ${r.fontSizes.sm};
       `,
-  md: n`
+  md: t`
         padding: ${r.spacing[2]} ${r.spacing[4]};
         font-size: ${r.fontSizes.md};
       `,
-  lg: n`
+  lg: t`
         padding: ${r.spacing[3]} ${r.spacing[6]};
         font-size: ${r.fontSizes.lg};
       `
 })[o]}
 `;
-function ko({
+function Mo({
   ref: o,
   as: r,
-  href: s,
-  variant: a = "primary",
-  size: l = "md",
-  isLoading: d,
-  disabled: c,
-  children: e,
-  ...p
+  href: n,
+  variant: e = "primary",
+  size: c = "md",
+  isLoading: a,
+  disabled: l,
+  children: u,
+  ...x
 }) {
-  return /* @__PURE__ */ i(
-    ho,
+  return /* @__PURE__ */ s(
+    _o,
     {
       ref: o,
-      as: r ?? (s ? "a" : "button"),
-      href: s,
-      $variant: a,
-      $size: l,
-      disabled: d || c,
-      ...p,
-      children: d ? "Loading..." : e
+      as: r ?? (n ? "a" : "button"),
+      href: n,
+      $variant: e,
+      $size: c,
+      disabled: a || l,
+      ...x,
+      children: a ? "Loading..." : u
     }
   );
 }
-ko.displayName = "Button";
-const Co = t.div`
+Mo.displayName = "Button";
+const Vo = i.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme: o }) => o.spacing[1]};
   width: ${({ $fullWidth: o }) => o ? "100%" : "auto"};
-`, zo = t.label`
+`, Fo = i.label`
   font-size: ${({ theme: o }) => o.fontSizes.sm};
   font-weight: ${({ theme: o }) => o.brutalism ? "700" : "500"};
-`, So = t.span`
+`, Ko = i.span`
   font-size: ${({ theme: o }) => o.fontSizes.xs};
   color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
-`, To = t.div`
+`, Ho = i.div`
   display: flex;
   align-items: center;
   border-radius: ${({ theme: o }) => o.radius.md};
@@ -229,43 +229,43 @@ const Co = t.div`
     box-shadow 0.2s;
 
   ${({ $size: o = "md", theme: r }) => ({
-  sm: n`
+  sm: t`
         padding: ${r.spacing[1]} ${r.spacing[2]};
         font-size: ${r.fontSizes.sm};
       `,
-  md: n`
+  md: t`
         padding: ${r.spacing[2]} ${r.spacing[3]};
         font-size: ${r.fontSizes.md};
       `,
-  lg: n`
+  lg: t`
         padding: ${r.spacing[3]} ${r.spacing[4]};
         font-size: ${r.fontSizes.lg};
       `
 })[o]}
 
-  ${({ $variant: o = "default", theme: r }) => r.brutalism ? n`
+  ${({ $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: n`
+  default: t`
         border: 1px solid ${r.colors.neutral[400]};
         background-color: ${r.colors.neutral[0]};
       `,
-  outlined: n`
+  outlined: t`
         border: 2px solid ${r.colors.primary[500]};
         background-color: ${r.colors.neutral[0]};
       `,
-  filled: n`
+  filled: t`
         border: 1px solid transparent;
         background-color: ${r.colors.neutral[100]};
       `
 }[o]}
 
-  ${({ $error: o, theme: r }) => o && n`
+  ${({ $error: o, theme: r }) => o && t`
       border-color: ${r.colors.error[500]};
-      ${r.brutalism && n`
+      ${r.brutalism && t`
         box-shadow: 3px 3px 0 ${r.colors.error[500]};
       `}
     `}
@@ -273,7 +273,7 @@ const Co = t.div`
   &:focus-within {
     box-shadow: ${({ theme: o }) => o.shadows.focusRing};
   }
-`, Io = t.input`
+`, Yo = i.input`
   flex: 1;
   border: none;
   outline: none;
@@ -284,11 +284,11 @@ const Co = t.div`
     cursor: not-allowed;
     opacity: 0.6;
   }
-`, J = t.div`
+`, $o = i.div`
   display: inline-flex;
   align-items: center;
   margin: 0 ${({ theme: o }) => o.spacing[1]};
-`, Wo = t.button`
+`, Uo = i.button`
   display: inline-flex;
   align-items: center;
   margin: 0 ${({ theme: o }) => o.spacing[1]};
@@ -302,75 +302,75 @@ const Co = t.div`
     opacity: 0.8;
   }
 `;
-function Eo({
+function qo({
   ref: o,
   type: r = "text",
-  size: s = "md",
-  variant: a = "default",
-  label: l,
-  helperText: d,
-  error: c,
-  leftElement: e,
-  rightElement: p,
-  clearable: u,
-  onClear: x,
-  fullWidth: C,
-  id: w,
-  value: b,
-  defaultValue: f,
-  onChange: S,
+  size: n = "md",
+  variant: e = "default",
+  label: c,
+  helperText: a,
+  error: l,
+  leftElement: u,
+  rightElement: x,
+  clearable: p,
+  onClear: b,
+  fullWidth: w,
+  id: y,
+  value: g,
+  defaultValue: k,
+  onChange: T,
   ...z
 }) {
-  const h = M(), E = w ?? h, B = `${E}-hint`, [O, $] = W(f ?? ""), y = b !== void 0, v = y ? b : O, k = typeof c == "string" ? c : void 0, A = !!(d || c), D = (T) => {
-    y || $(T.target.value), S?.(T);
-  }, g = () => {
-    y || $(""), x?.();
+  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?.();
   };
-  return /* @__PURE__ */ m(Co, { $fullWidth: C, children: [
-    l && /* @__PURE__ */ i(zo, { htmlFor: E, children: l }),
-    /* @__PURE__ */ m(To, { $size: s, $variant: a, $error: !!c, children: [
-      e && /* @__PURE__ */ i(J, { children: e }),
-      /* @__PURE__ */ i(
-        Io,
+  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 }),
+      /* @__PURE__ */ s(
+        Yo,
         {
-          id: E,
+          id: I,
           ref: o,
           type: r,
-          value: v,
-          onChange: D,
+          value: m,
+          onChange: _,
           ...z,
-          "aria-invalid": !!c,
-          "aria-describedby": A ? B : void 0
+          "aria-invalid": !!l,
+          "aria-describedby": j ? P : void 0
         }
       ),
-      u && v && /* @__PURE__ */ i(
-        Wo,
+      p && m && /* @__PURE__ */ s(
+        Uo,
         {
           type: "button",
-          onClick: g,
+          onClick: H,
           "aria-label": "Clear input",
           children: "✕"
         }
       ),
-      p && /* @__PURE__ */ i(J, { children: p })
+      x && /* @__PURE__ */ s($o, { children: x })
     ] }),
-    A && /* @__PURE__ */ i(So, { id: B, $error: !!c, children: k ?? d })
+    j && /* @__PURE__ */ s(Ko, { id: P, $error: !!l, children: O ?? a })
   ] });
 }
-Eo.displayName = "Input";
-const Bo = R`
+qo.displayName = "Input";
+const Go = M`
   from { opacity: 0; }
   to { opacity: 1; }
-`, Oo = R`
+`, Xo = M`
   from { opacity: 1; }
   to { opacity: 0; }
-`, jo = R`
+`, Zo = M`
   from { opacity: 0; transform: scale(0.95) translateY(-8px); }
   to { opacity: 1; transform: scale(1) translateY(0); }
-`, Ro = R`
+`, Jo = M`
   from { opacity: 1; transform: scale(1) translateY(0); }
   to { opacity: 0; transform: scale(0.95) translateY(-8px); }
-`, Ao = t.div`
+`, Qo = i.div`
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.5);
@@ -378,9 +378,9 @@ const Bo = R`
   align-items: center;
   justify-content: center;
   z-index: ${({ theme: o }) => o.zIndex.modal};
-  animation: ${({ $closing: o }) => o ? Oo : Bo} 0.15s ease
+  animation: ${({ $closing: o }) => o ? Xo : Go} 0.15s ease
     forwards;
-`, Lo = t.div`
+`, or = i.div`
   position: relative;
   background: ${({ theme: o }) => o.colors.neutral[0]};
   border-radius: ${({ theme: o }) => o.radius.md};
@@ -389,37 +389,37 @@ const Bo = R`
   display: flex;
   flex-direction: column;
   max-height: 90vh;
-  animation: ${({ $closing: o }) => o ? Ro : jo} 0.15s ease
+  animation: ${({ $closing: o }) => o ? Jo : Zo} 0.15s ease
     forwards;
 
-  ${({ $size: o }) => o === "sm" && n`
+  ${({ $size: o }) => o === "sm" && t`
       width: min(400px, 90vw);
     `}
-  ${({ $size: o }) => o === "md" && n`
+  ${({ $size: o }) => o === "md" && t`
       width: min(560px, 90vw);
     `}
-  ${({ $size: o }) => o === "lg" && n`
+  ${({ $size: o }) => o === "lg" && t`
       width: min(720px, 90vw);
     `}
-  ${({ $size: o }) => o === "fullscreen" && n`
+  ${({ $size: o }) => o === "fullscreen" && t`
       width: 100vw;
       height: 100vh;
       max-height: 100vh;
       border-radius: 0;
     `}
-`, No = t.div`
+`, rr = 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;
-`, Vo = t.h2`
+`, nr = i.h2`
   flex: 1;
   font-size: ${({ theme: o }) => o.fontSizes.lg};
   font-weight: 600;
   margin: 0;
-`, Do = t.button`
+`, tr = i.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -444,11 +444,11 @@ const Bo = R`
     outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
     outline-offset: 2px;
   }
-`, Fo = t.div`
+`, sr = i.div`
   padding: ${({ theme: o }) => o.spacing[4]};
   overflow-y: auto;
   flex: 1;
-`, Mo = t.div`
+`, ir = i.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -456,7 +456,7 @@ const Bo = R`
   padding: ${({ theme: o }) => o.spacing[4]};
   border-top: 1px solid ${({ theme: o }) => o.colors.neutral[200]};
   flex-shrink: 0;
-`, Po = [
+`, er = [
   "button:not([disabled])",
   "input:not([disabled])",
   "select:not([disabled])",
@@ -464,89 +464,89 @@ const Bo = R`
   "a[href]",
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
-function Q(o) {
+function xo(o) {
   return Array.from(
-    o.querySelectorAll(Po)
+    o.querySelectorAll(er)
   );
 }
-function Yo({
+function ar({
   open: o,
   onClose: r,
-  title: s,
-  children: a,
-  footer: l,
-  size: d = "md",
-  closeOnBackdrop: c = !0,
-  closeOnEscape: e = !0,
-  ariaLabelledBy: p,
-  ariaDescribedBy: u
+  title: n,
+  children: e,
+  footer: c,
+  size: a = "md",
+  closeOnBackdrop: l = !0,
+  closeOnEscape: u = !0,
+  ariaLabelledBy: x,
+  ariaDescribedBy: p
 }) {
-  const x = Y(null), C = M(), w = p ?? (s ? C : void 0), [b, f] = W(o), [S, z] = W(!1);
-  return V(() => {
+  const b = oo(null), w = G(), y = x ?? (n ? w : void 0), [g, k] = D(o), [T, z] = D(!1);
+  return K(() => {
     if (o)
-      f(!0), z(!1);
-    else if (b) {
+      k(!0), z(!1);
+    else if (g) {
       z(!0);
-      const h = setTimeout(() => {
-        f(!1), z(!1);
+      const v = setTimeout(() => {
+        k(!1), z(!1);
       }, 150);
-      return () => clearTimeout(h);
+      return () => clearTimeout(v);
     }
-  }, [o, b]), V(() => {
+  }, [o, g]), K(() => {
     if (!o)
       return;
-    const h = document.body.style.overflow;
+    const v = document.body.style.overflow;
     return document.body.style.overflow = "hidden", () => {
-      document.body.style.overflow = h;
+      document.body.style.overflow = v;
     };
-  }, [o]), V(() => {
-    if (!o || !x.current)
+  }, [o]), K(() => {
+    if (!o || !b.current)
       return;
-    const h = x.current, E = document.activeElement;
-    (Q(h)[0] ?? h).focus();
-    const O = ($) => {
-      if ($.key === "Escape" && e) {
+    const v = b.current, I = document.activeElement;
+    (xo(v)[0] ?? v).focus();
+    const B = (h) => {
+      if (h.key === "Escape" && u) {
         r();
         return;
       }
-      if ($.key !== "Tab")
+      if (h.key !== "Tab")
         return;
-      const y = Q(h);
-      if (y.length === 0) {
-        $.preventDefault();
+      const $ = xo(v);
+      if ($.length === 0) {
+        h.preventDefault();
         return;
       }
-      const v = y[0], k = y[y.length - 1];
-      $.shiftKey ? document.activeElement === v && ($.preventDefault(), k.focus()) : document.activeElement === k && ($.preventDefault(), v.focus());
+      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", O), () => {
-      document.removeEventListener("keydown", O), E?.focus();
+    return document.addEventListener("keydown", B), () => {
+      document.removeEventListener("keydown", B), I?.focus();
     };
-  }, [o, e, r, b]), b ? io(
-    /* @__PURE__ */ i(
-      Ao,
+  }, [o, u, r, g]), g ? Co(
+    /* @__PURE__ */ s(
+      Qo,
       {
-        $closing: S,
-        onClick: c ? r : void 0,
-        children: /* @__PURE__ */ m(
-          Lo,
+        $closing: T,
+        onClick: l ? r : void 0,
+        children: /* @__PURE__ */ C(
+          or,
           {
-            ref: x,
+            ref: b,
             role: "dialog",
             "aria-modal": "true",
-            "aria-labelledby": w,
-            "aria-describedby": u,
-            $size: d,
-            $closing: S,
+            "aria-labelledby": y,
+            "aria-describedby": p,
+            $size: a,
+            $closing: T,
             tabIndex: -1,
-            onClick: (h) => h.stopPropagation(),
+            onClick: (v) => v.stopPropagation(),
             children: [
-              /* @__PURE__ */ m(No, { children: [
-                s && /* @__PURE__ */ i(Vo, { id: C, children: s }),
-                /* @__PURE__ */ i(Do, { onClick: r, "aria-label": "Close modal", children: "×" })
+              /* @__PURE__ */ C(rr, { children: [
+                n && /* @__PURE__ */ s(nr, { id: w, children: n }),
+                /* @__PURE__ */ s(tr, { onClick: r, "aria-label": "Close modal", children: "×" })
               ] }),
-              /* @__PURE__ */ i(Fo, { children: a }),
-              l && /* @__PURE__ */ i(Mo, { children: l })
+              /* @__PURE__ */ s(sr, { children: e }),
+              c && /* @__PURE__ */ s(ir, { children: c })
             ]
           }
         )
@@ -555,18 +555,18 @@ function Yo({
     document.body
   ) : null;
 }
-Yo.displayName = "Modal";
-const ao = (...o) => o.filter((r, s, a) => !!r && r.trim() !== "" && a.indexOf(r) === s).join(" ").trim();
-const Ho = (o) => o.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-const _o = (o) => o.replace(
+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(
   /^([A-Z])|[\s-_]+(\w)/g,
-  (r, s, a) => a ? a.toUpperCase() : s.toLowerCase()
+  (r, n, e) => e ? e.toUpperCase() : n.toLowerCase()
 );
-const oo = (o) => {
-  const r = _o(o);
+const yo = (o) => {
+  const r = cr(o);
   return r.charAt(0).toUpperCase() + r.slice(1);
 };
-var K = {
+var io = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24,
@@ -577,69 +577,83 @@ var K = {
   strokeLinecap: "round",
   strokeLinejoin: "round"
 };
-const Ko = (o) => {
+const dr = (o) => {
   for (const r in o)
     if (r.startsWith("aria-") || r === "role" || r === "title")
       return !0;
   return !1;
-}, qo = so({}), Uo = () => no(qo), Zo = to(
-  ({ color: o, size: r, strokeWidth: s, absoluteStrokeWidth: a, className: l = "", children: d, iconNode: c, ...e }, p) => {
+}, ur = mo({}), pr = () => ko(ur), fr = So(
+  ({ color: o, size: r, strokeWidth: n, absoluteStrokeWidth: e, className: c = "", children: a, iconNode: l, ...u }, x) => {
     const {
-      size: u = 24,
-      strokeWidth: x = 2,
-      absoluteStrokeWidth: C = !1,
-      color: w = "currentColor",
-      className: b = ""
-    } = Uo() ?? {}, f = a ?? C ? Number(s ?? x) * 24 / Number(r ?? u) : s ?? x;
-    return q(
+      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(
       "svg",
       {
-        ref: p,
-        ...K,
-        width: r ?? u ?? K.width,
-        height: r ?? u ?? K.height,
-        stroke: o ?? w,
-        strokeWidth: f,
-        className: ao("lucide", b, l),
-        ...!d && !Ko(e) && { "aria-hidden": "true" },
-        ...e
+        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
       },
       [
-        ...c.map(([S, z]) => q(S, z)),
-        ...Array.isArray(d) ? d : [d]
+        ...l.map(([T, z]) => lo(T, z)),
+        ...Array.isArray(a) ? a : [a]
       ]
     );
   }
 );
-const eo = (o, r) => {
-  const s = to(
-    ({ className: a, ...l }, d) => q(Zo, {
-      ref: d,
+const X = (o, r) => {
+  const n = So(
+    ({ className: e, ...c }, a) => lo(fr, {
+      ref: a,
       iconNode: r,
-      className: ao(
-        `lucide-${Ho(oo(o))}`,
+      className: zo(
+        `lucide-${lr(yo(o))}`,
         `lucide-${o}`,
-        a
+        e
       ),
-      ...l
+      ...c
     })
   );
-  return s.displayName = oo(o), s;
+  return n.displayName = yo(o), n;
 };
-const Xo = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], lo = eo("chevron-down", Xo);
-const Go = [
+const gr = [
+  ["path", { d: "M12 5v14", key: "s699le" }],
+  ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
+], br = X("arrow-down", gr);
+const $r = [
+  ["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 = [
+  ["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 = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], co = eo("x", Go), Jo = R`
+], Io = X("x", vr), kr = M`
   from { opacity: 0; transform: translateY(12px); }
   to   { opacity: 1; transform: translateY(0); }
-`, Qo = R`
+`, mr = M`
   from { opacity: 0; transform: translateY(-12px); }
   to   { opacity: 1; transform: translateY(0); }
-`, or = R`
+`, Sr = M`
   from { opacity: 1; }
   to   { opacity: 0; }
-`, rr = t.div`
+`, Cr = i.div`
   position: fixed;
   z-index: ${({ theme: o }) => o.zIndex.toast};
   display: flex;
@@ -649,85 +663,85 @@ const Go = [
   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 ? n`
-          ${or} 0.2s ease forwards
-        ` : r.startsWith("top") ? n`
-            ${Qo} 0.2s ease forwards
-          ` : n`
-            ${Jo} 0.2s ease forwards
+  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
           `};
 
   ${({ $position: o, theme: r }) => ({
-  "bottom-right": n`
+  "bottom-right": t`
         bottom: ${r.spacing[6]};
         right: ${r.spacing[6]};
       `,
-  "bottom-left": n`
+  "bottom-left": t`
         bottom: ${r.spacing[6]};
         left: ${r.spacing[6]};
       `,
-  "top-right": n`
+  "top-right": t`
         top: ${r.spacing[6]};
         right: ${r.spacing[6]};
       `,
-  "top-left": n`
+  "top-left": t`
         top: ${r.spacing[6]};
         left: ${r.spacing[6]};
       `
 })[o]}
-`, P = (o, r, s) => n`
+`, Q = (o, r, n) => t`
   background: ${r};
-  border: ${o.brutalism.borderWidth} solid ${s};
+  border: ${o.brutalism.borderWidth} solid ${n};
   box-shadow: ${o.brutalism.shadowOffset} ${o.brutalism.shadowOffset}
-    0 ${s};
-`, nr = t(rr)`
+    0 ${n};
+`, zr = i(Cr)`
   ${({ $variant: o, theme: r }) => r.brutalism ? {
-  success: P(
+  success: Q(
     r,
     r.colors.success[50],
     r.colors.success[500]
   ),
-  error: P(
+  error: Q(
     r,
     r.colors.error[50],
     r.colors.error[500]
   ),
-  warning: P(
+  warning: Q(
     r,
     r.colors.warning[50],
     r.colors.warning[500]
   ),
-  info: P(r, r.colors.info[50], r.colors.info[500])
+  info: Q(r, r.colors.info[50], r.colors.info[500])
 }[o] : {
-  success: n`
+  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: n`
+  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: n`
+  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: n`
+  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]}
-`, sr = t.p`
+`, 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]};
-`, tr = t.button`
+`, Ir = i.button`
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
@@ -750,121 +764,124 @@ const Go = [
     outline-offset: 2px;
   }
 `;
-function uo({
+function Eo({
   open: o,
   onClose: r,
-  message: s,
-  variant: a = "info",
-  duration: l = 4e3,
-  position: d = "bottom-right"
+  message: n,
+  variant: e = "info",
+  duration: c = 4e3,
+  position: a = "bottom-right"
 }) {
-  const [c, e] = W(o), [p, u] = W(!1);
-  return V(() => {
+  const [l, u] = D(o), [x, p] = D(!1);
+  return K(() => {
     if (o)
-      e(!0), u(!1);
-    else if (c) {
-      u(!0);
-      const x = setTimeout(() => {
-        e(!1), u(!1);
+      u(!0), p(!1);
+    else if (l) {
+      p(!0);
+      const b = setTimeout(() => {
+        u(!1), p(!1);
       }, 200);
-      return () => clearTimeout(x);
+      return () => {
+        clearTimeout(b);
+      };
     }
-  }, [o, c]), V(() => {
-    if (!o || l === 0)
+  }, [o, l]), K(() => {
+    if (!o || c === 0)
       return;
-    const x = setTimeout(r, l);
-    return () => clearTimeout(x);
-  }, [o, l, r]), c ? io(
-    /* @__PURE__ */ m(
-      nr,
+    const b = setTimeout(r, c);
+    return () => {
+      clearTimeout(b);
+    };
+  }, [o, c, r]), l ? Co(
+    /* @__PURE__ */ C(
+      zr,
       {
-        $position: d,
-        $variant: a,
-        $closing: p,
+        $position: a,
+        $variant: e,
+        $closing: x,
         role: "alert",
         "aria-live": "polite",
         children: [
-          /* @__PURE__ */ i(sr, { children: s }),
-          /* @__PURE__ */ i(tr, { onClick: r, "aria-label": "Close notification", children: /* @__PURE__ */ i(co, { size: 14, strokeWidth: 2.5 }) })
+          /* @__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;
 }
-uo.displayName = "Toast";
-const ir = t.form`
+Eo.displayName = "Toast";
+const Er = i.form`
   display: flex;
   flex-direction: column;
   gap: ${({ theme: o }) => o.spacing[4]};
-`, ar = t.div`
+`, Wr = i.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme: o }) => o.spacing[1]};
-`, er = t.label`
+`, Or = i.label`
   font-size: ${({ theme: o }) => o.fontSizes.sm};
   font-weight: 500;
   color: ${({ theme: o }) => o.colors.neutral[900]};
-`, lr = t.span`
+`, Pr = i.span`
   color: ${({ theme: o }) => o.colors.error[500]};
   margin-left: 2px;
-  aria-hidden: true;
-`, cr = t.span`
+`, 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, ...s }) {
-  return /* @__PURE__ */ i(
-    ir,
+function Dr({ onSubmit: o, children: r, ...n }) {
+  return /* @__PURE__ */ s(
+    Er,
     {
-      onSubmit: (a) => {
-        a.preventDefault(), o?.(a);
+      onSubmit: (e) => {
+        e.preventDefault(), o?.(e);
       },
       noValidate: !0,
-      ...s,
+      ...n,
       children: r
     }
   );
 }
-dr.displayName = "Form";
-function ur({
+Dr.displayName = "Form";
+function Nr({
   label: o,
   error: r,
-  helperText: s,
-  required: a,
-  children: l
+  helperText: n,
+  required: e,
+  children: c
 }) {
-  const d = M(), c = `${d}-hint`, e = !!(r || s), p = typeof r == "string" ? r : void 0, u = G.isValidElement(l) ? G.cloneElement(
-    l,
+  const a = G(), l = `${a}-hint`, u = !!(r || n), x = typeof r == "string" ? r : void 0, p = bo.isValidElement(c) ? bo.cloneElement(
+    c,
     {
-      id: d,
-      ...e && { "aria-describedby": c },
+      id: a,
+      ...u && { "aria-describedby": l },
       ...r && { "aria-invalid": !0 }
     }
-  ) : l;
-  return /* @__PURE__ */ m(ar, { children: [
-    o && /* @__PURE__ */ m(er, { htmlFor: d, children: [
+  ) : c;
+  return /* @__PURE__ */ C(Wr, { children: [
+    o && /* @__PURE__ */ C(Or, { htmlFor: a, children: [
       o,
-      a && /* @__PURE__ */ i(lr, { "aria-hidden": "true", children: " *" })
+      e && /* @__PURE__ */ s(Pr, { "aria-hidden": "true", children: " *" })
     ] }),
-    u,
-    e && /* @__PURE__ */ i(cr, { id: c, $error: !!r, children: p ?? s })
+    p,
+    u && /* @__PURE__ */ s(Br, { id: l, $error: !!r, children: x ?? n })
   ] });
 }
-ur.displayName = "FormField";
-const pr = t.div`
+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"};
-`, fr = t.div`
+`, Ar = i.div`
   position: relative;
   display: flex;
   width: 100%;
-`, $r = t.span`
+`, jr = i.span`
   font-size: ${({ theme: o }) => o.fontSizes.xs};
   color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
-`, br = t.select`
+`, Rr = i.select`
   appearance: none;
   width: 100%;
   border-radius: ${({ theme: o }) => o.radius.md};
@@ -876,15 +893,15 @@ const pr = t.div`
     box-shadow 0.2s;
 
   ${({ $size: o, theme: r }) => ({
-  sm: n`
+  sm: t`
         padding: ${r.spacing[1]} ${r.spacing[2]};
         font-size: ${r.fontSizes.sm};
       `,
-  md: n`
+  md: t`
         padding: ${r.spacing[2]} ${r.spacing[3]};
         font-size: ${r.fontSizes.md};
       `,
-  lg: n`
+  lg: t`
         padding: ${r.spacing[3]} ${r.spacing[4]};
         font-size: ${r.fontSizes.lg};
       `
@@ -892,27 +909,27 @@ const pr = t.div`
 
   padding-right: 2.5rem;
 
-  ${({ $variant: o, theme: r }) => r.brutalism ? n`
+  ${({ $variant: o, 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: n`
+  default: t`
         border: 1px solid ${r.colors.neutral[400]};
         background-color: ${r.colors.neutral[0]};
       `,
-  outlined: n`
+  outlined: t`
         border: 2px solid ${r.colors.primary[500]};
         background-color: ${r.colors.neutral[0]};
       `,
-  filled: n`
+  filled: t`
         border: 1px solid transparent;
         background-color: ${r.colors.neutral[100]};
       `
 }[o]}
 
-  ${({ $error: o, theme: r }) => o && n`
+  ${({ $error: o, theme: r }) => o && t`
       border-color: ${r.colors.error[500]};
     `}
 
@@ -925,7 +942,7 @@ const pr = t.div`
     cursor: not-allowed;
     opacity: 0.6;
   }
-`, gr = t.button`
+`, _r = i.button`
   position: absolute;
   right: ${({ theme: o }) => o.spacing[3]};
   top: 50%;
@@ -947,7 +964,7 @@ const pr = t.div`
     outline-offset: 2px;
     border-radius: 2px;
   }
-`, xr = t.span`
+`, Mr = i.span`
   position: absolute;
   right: ${({ theme: o }) => o.spacing[3]};
   top: 50%;
@@ -957,63 +974,63 @@ const pr = t.div`
   align-items: center;
   color: ${({ theme: o }) => o.colors.neutral[500]};
 `;
-function yr({
+function Vr({
   options: o,
   placeholder: r,
-  size: s = "md",
-  variant: a = "default",
-  error: l,
-  fullWidth: d,
-  clearable: c,
-  onClear: e,
-  id: p,
-  value: u,
-  defaultValue: x,
-  onChange: C,
-  ...w
+  size: n = "md",
+  variant: e = "default",
+  error: c,
+  fullWidth: a,
+  clearable: l,
+  onClear: u,
+  id: x,
+  value: p,
+  defaultValue: b,
+  onChange: w,
+  ...y
 }) {
-  const b = M(), f = p ?? b, S = `${f}-hint`, z = typeof l == "string" ? l : void 0, [h, E] = W(
-    x ?? ""
-  ), B = u !== void 0, O = B ? u : h, $ = (k) => {
-    B || E(k.target.value), C?.(k);
-  }, y = () => {
-    B || E(""), e?.();
-  }, v = c && !!O;
-  return /* @__PURE__ */ m(pr, { $fullWidth: d, children: [
-    /* @__PURE__ */ m(fr, { children: [
-      /* @__PURE__ */ m(
-        br,
+  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: [
+      /* @__PURE__ */ C(
+        Rr,
         {
-          id: f,
-          $size: s,
-          $variant: a,
-          $error: !!l,
-          "aria-invalid": !!l,
-          "aria-describedby": z ? S : void 0,
-          value: O,
-          onChange: $,
-          ...w,
+          id: k,
+          $size: n,
+          $variant: e,
+          $error: !!c,
+          "aria-invalid": !!c,
+          "aria-describedby": z ? T : void 0,
+          value: B,
+          onChange: h,
+          ...y,
           children: [
-            r && /* @__PURE__ */ i("option", { value: "", disabled: !0, children: r }),
-            o.map((k) => /* @__PURE__ */ i("option", { value: k.value, disabled: k.disabled, children: k.label }, k.value))
+            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))
           ]
         }
       ),
-      v ? /* @__PURE__ */ i(
-        gr,
+      m ? /* @__PURE__ */ s(
+        _r,
         {
           type: "button",
-          onClick: y,
+          onClick: $,
           "aria-label": "Clear selection",
-          children: /* @__PURE__ */ i(co, { size: 14 })
+          children: /* @__PURE__ */ s(Io, { size: 14 })
         }
-      ) : /* @__PURE__ */ i(xr, { "aria-hidden": "true", children: /* @__PURE__ */ i(lo, { size: 14 }) })
+      ) : /* @__PURE__ */ s(Mr, { "aria-hidden": "true", children: /* @__PURE__ */ s(To, { size: 14 }) })
     ] }),
-    z && /* @__PURE__ */ i($r, { id: S, $error: !0, children: z })
+    z && /* @__PURE__ */ s(jr, { id: T, $error: !0, children: z })
   ] });
 }
-yr.displayName = "Select";
-const wr = t.a`
+Vr.displayName = "Select";
+const Fr = i.a`
   text-decoration: underline;
   text-underline-offset: 2px;
   transition: color 0.15s;
@@ -1025,13 +1042,13 @@ const wr = t.a`
   }
 
   ${({ $variant: o, theme: r }) => ({
-  default: n`
+  default: t`
         color: ${r.colors.primary[500]};
         &:hover {
           color: ${r.colors.primary[700]};
         }
       `,
-  subtle: n`
+  subtle: t`
         color: ${r.colors.neutral[500]};
         &:hover {
           color: ${r.colors.neutral[900]};
@@ -1039,39 +1056,39 @@ const wr = t.a`
       `
 })[o]}
 `;
-function vr({
+function Kr({
   variant: o = "default",
   external: r,
-  children: s,
-  ...a
+  children: n,
+  ...e
 }) {
-  return /* @__PURE__ */ i(
-    wr,
+  return /* @__PURE__ */ s(
+    Fr,
     {
       $variant: o,
       ...r && { target: "_blank", rel: "noreferrer" },
-      ...a,
-      children: s
+      ...e,
+      children: n
     }
   );
 }
-vr.displayName = "Link";
-const mr = t.div`
+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 ? n`
+  ${({ 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]};
-        ` : n`
+        ` : t`
           border: 1px solid ${r ?? o.colors.neutral[200]};
           box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
         `}
-`, hr = t.button`
+`, Yr = i.button`
   width: 100%;
   display: flex;
   align-items: flex-start;
@@ -1091,19 +1108,19 @@ const mr = t.div`
       ${({ theme: o, $accentColor: r }) => r ?? o.colors.primary[500]};
     outline-offset: -2px;
   }
-`, kr = t.div`
+`, Ur = i.div`
   flex: 1;
   min-width: 0;
-`, Cr = t.span`
+`, qr = i.span`
   display: block;
   font-size: ${({ theme: o }) => o.fontSizes.md};
   font-weight: 600;
   color: ${({ theme: o }) => o.colors.neutral[900]};
-`, zr = t.span`
+`, Gr = i.span`
   display: block;
   font-size: ${({ theme: o }) => o.fontSizes.sm};
   color: ${({ theme: o }) => o.colors.neutral[500]};
-`, Sr = t.div`
+`, Xr = i.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -1115,11 +1132,11 @@ const mr = t.div`
     align-items: flex-start;
     gap: ${({ theme: o }) => o.spacing[2]};
   }
-`, Tr = t.div`
+`, Zr = i.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: o }) => o.spacing[2]};
-`, Ir = t.span`
+`, Jr = i.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1127,79 +1144,81 @@ const mr = t.div`
   transition: transform 0.2s ease;
   transform: ${({ $open: o }) => o ? "rotate(180deg)" : "rotate(0deg)"};
   color: ${({ theme: o, $accentColor: r }) => r ?? o.colors.neutral[500]};
-`, Wr = t.div`
+`, Qr = i.div`
   display: grid;
   grid-template-rows: ${({ $open: o }) => o ? "1fr" : "0fr"};
   transition: grid-template-rows 0.2s ease;
-`, Er = t.div`
+`, on = i.div`
   overflow: hidden;
-`, Br = t.div`
+`, rn = i.div`
   padding: ${({ theme: o }) => o.spacing[4]};
   border-top: 1px solid ${({ theme: o }) => o.colors.neutral[200]};
 `;
-function Or({
+function nn({
   title: o,
   children: r,
-  defaultOpen: s = !1,
-  open: a,
-  onToggle: l,
-  subtitle: d,
-  headerActions: c,
-  accentColor: e
+  defaultOpen: n = !1,
+  open: e,
+  onToggle: c,
+  subtitle: a,
+  headerActions: l,
+  accentColor: u
 }) {
-  const [p, u] = W(s), x = M(), C = a !== void 0, w = C ? a : p;
-  return /* @__PURE__ */ m(mr, { $accentColor: e, children: [
-    /* @__PURE__ */ m(
-      hr,
+  const [x, p] = D(n), b = G(), w = e !== void 0, y = w ? e : x;
+  return /* @__PURE__ */ C(Hr, { $accentColor: u, children: [
+    /* @__PURE__ */ C(
+      Yr,
       {
         type: "button",
-        $open: w,
-        $accentColor: e,
-        "aria-expanded": w,
-        "aria-controls": x,
+        $open: y,
+        $accentColor: u,
+        "aria-expanded": y,
+        "aria-controls": b,
         onClick: () => {
-          const f = !w;
-          C || u(f), l?.(f);
+          const k = !y;
+          w || p(k), c?.(k);
         },
         children: [
-          /* @__PURE__ */ m(kr, { children: [
-            /* @__PURE__ */ i(Cr, { children: o }),
-            (d || c) && /* @__PURE__ */ m(Sr, { children: [
-              d && /* @__PURE__ */ i(zr, { children: d }),
-              c && /* @__PURE__ */ i(Tr, { onClick: (f) => f.stopPropagation(), children: c })
+          /* @__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__ */ i(
-            Ir,
+          /* @__PURE__ */ s(
+            Jr,
             {
-              $open: w,
-              $accentColor: e,
+              $open: y,
+              $accentColor: u,
               "aria-hidden": "true",
-              children: /* @__PURE__ */ i(lo, { size: 18, strokeWidth: 2.5 })
+              children: /* @__PURE__ */ s(To, { size: 18, strokeWidth: 2.5 })
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ i(Wr, { $open: w, children: /* @__PURE__ */ i(Er, { id: x, role: "region", "aria-label": o, children: /* @__PURE__ */ i(Br, { children: r }) }) })
+    /* @__PURE__ */ s(Qr, { $open: y, children: /* @__PURE__ */ s(on, { id: b, role: "region", "aria-label": o, children: /* @__PURE__ */ s(rn, { children: r }) }) })
   ] });
 }
-Or.displayName = "CollapsibleCard";
-const po = so(null);
-function Gr({ children: o }) {
-  const [r, s] = W(null), a = j((d) => {
-    s({ ...d, id: Date.now() });
-  }, []), l = wo(() => {
-    const d = (c) => a(c);
-    return d.success = (c, e) => a({ ...e, message: c, variant: "success" }), d.error = (c, e) => a({ ...e, message: c, variant: "error" }), d.warning = (c, e) => a({ ...e, message: c, variant: "warning" }), d.info = (c, e) => a({ ...e, message: c, variant: "info" }), d;
-  }, [a]);
-  return /* @__PURE__ */ m(po.Provider, { value: { toast: l }, children: [
+nn.displayName = "CollapsibleCard";
+const Wo = mo(null);
+function An({ children: o }) {
+  const [r, n] = D(null), e = R((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" })
+  }), [e]);
+  return /* @__PURE__ */ C(Wo.Provider, { value: { toast: c }, children: [
     o,
-    r && /* @__PURE__ */ i(
-      uo,
+    r && /* @__PURE__ */ s(
+      Eo,
       {
         open: !0,
-        onClose: () => s(null),
+        onClose: () => n(null),
         message: r.message,
         variant: r.variant,
         duration: r.duration,
@@ -1209,102 +1228,156 @@ function Gr({ children: o }) {
     )
   ] });
 }
-function Jr() {
-  const o = no(po);
+function jn() {
+  const o = ko(Wo);
   if (!o)
     throw new Error("useToast must be used within a ToastProvider");
   return o;
 }
-function Qr({
+function Rn({
   initialValues: o,
   validate: r,
-  onSubmit: s,
-  onError: a
+  onSubmit: n,
+  onError: e
 }) {
-  const [l, d] = W(o), [c, e] = W(
+  const [c, a] = D(o), [l, u] = D(
     {}
-  ), [p, u] = W({}), [x, C] = W(!1), w = Y(l);
-  w.current = l;
-  const b = j(
-    ($) => {
+  ), [x, p] = D({}), [b, w] = D(!1), y = oo(c);
+  y.current = c;
+  const g = R(
+    (h) => {
       if (!r)
         return {};
-      const y = r($);
+      const $ = r(h);
       return Object.fromEntries(
-        Object.entries(y).filter(([, v]) => v !== void 0)
+        Object.entries($).filter(([, m]) => m !== void 0)
       );
     },
     [r]
-  ), f = Y(p);
-  f.current = p;
-  const S = j(
-    ($) => {
-      const { name: y, value: v } = $.target, k = { ...w.current, [y]: v };
-      d(k), f.current[y] && e(b(k));
+  ), 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));
     },
-    [b]
-  ), z = j(
-    ($) => {
-      const { name: y } = $.target;
-      u((v) => ({ ...v, [y]: !0 })), e(b(w.current));
+    [g]
+  ), z = R(
+    (h) => {
+      const { name: $ } = h.target;
+      p((m) => ({ ...m, [$]: !0 })), u(g(y.current));
     },
-    [b]
-  ), h = j(
-    ($) => {
-      $?.preventDefault();
-      const y = Object.keys(w.current).reduce(
-        (A, D) => ({ ...A, [D]: !0 }),
+    [g]
+  ), v = R(
+    (h) => {
+      h?.preventDefault();
+      const $ = Object.keys(y.current).reduce(
+        (j, _) => ({ ...j, [_]: !0 }),
         {}
       );
-      u(y);
-      const v = b(w.current);
-      if (e(v), Object.keys(v).length > 0) {
-        a?.(v);
+      p($);
+      const m = g(y.current);
+      if (u(m), Object.keys(m).length > 0) {
+        e?.(m);
         return;
       }
       (async () => {
-        C(!0);
+        w(!0);
         try {
-          await s?.(w.current);
+          await n?.(y.current);
         } finally {
-          C(!1);
+          w(!1);
         }
       })();
     },
-    [b, s, a]
-  ), E = j(($, y) => {
-    d((v) => ({ ...v, [$]: y }));
-  }, []), B = j(() => {
-    d(o), e({}), u({}), C(!1);
-  }, [o]), O = Object.fromEntries(
-    Object.entries(c).filter(([$]) => p[$])
+    [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])
   );
   return {
-    values: l,
-    errors: O,
-    touched: p,
-    handleChange: S,
+    values: c,
+    errors: B,
+    touched: x,
+    handleChange: T,
     handleBlur: z,
-    handleSubmit: h,
-    setFieldValue: E,
-    reset: B,
-    isSubmitting: x
+    handleSubmit: v,
+    setFieldValue: I,
+    reset: P,
+    isSubmitting: b
   };
 }
-const fo = t.div`
-  overflow-x: auto;
+function tn(o, r) {
+  return o?.key !== r ? { key: r, direction: "asc" } : o.direction === "asc" ? { key: r, direction: "desc" } : null;
+}
+function sn({
+  data: o,
+  sort: r,
+  defaultSort: n,
+  onSortChange: e
+}) {
+  const c = r !== void 0, [a, l] = D(
+    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 };
+}
+const en = 7, ho = 3, wo = 1;
+function an(o, r) {
+  if (r <= en)
+    return Array.from({ length: r }, (e, c) => c + 1);
+  const n = [1];
+  o > ho && n.push("...");
+  for (let e = Math.max(2, o - wo); e <= Math.min(r - 1, o + wo); e++)
+    n.push(e);
+  return o < r - ho + 1 && n.push("..."), n.push(r), n;
+}
+function ln({
+  data: o,
+  pageSize: r,
+  page: n,
+  defaultPage: e,
+  totalRows: c,
+  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)
+      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 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`
   width: 100%;
 
-  ${({ theme: o }) => o.brutalism ? n`
-          border: ${o.brutalism.borderWidth} solid ${o.colors.neutral[900]};
-          box-shadow: ${o.brutalism.shadowOffset} ${o.brutalism.shadowOffset}
-            0 ${o.colors.neutral[900]};
-        ` : n`
-          border: 1px solid ${o.colors.neutral[300]};
+  ${({ theme: o, $borderColor: 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[300]};
           border-radius: ${o.radius.md};
           overflow: hidden;
         `}
-`, $o = t.table`
+
+  overflow-x: auto;
+  ${({ $stickyHeader: o }) => o && t`
+      overflow-y: auto;
+    `}
+`, Bo = i.table`
   width: 100%;
   border-collapse: collapse;
   font-size: ${({ $size: o, theme: r }) => ({
@@ -1312,108 +1385,366 @@ const fo = t.div`
   md: r.fontSizes.md,
   lg: r.fontSizes.lg
 })[o]};
-`, bo = t.thead`
-  ${({ theme: o }) => o.brutalism ? n`
-          background-color: ${o.colors.neutral[900]};
-          color: ${o.colors.neutral[0]};
-        ` : n`
-          background-color: ${o.colors.neutral[100]};
-          color: ${o.colors.neutral[600]};
-        `}
-`, go = t.tbody`
-  ${({ $variant: o, theme: r }) => o === "striped" && n`
+
+  caption {
+    padding: 8px 0;
+  }
+`, Do = i.thead`
+  ${({ $stickyHeader: o }) => o && t`
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    `}
+
+  ${({ theme: o, $headerColor: r, $borderColor: n }) => r ? t`
+          --th-bg: ${r};
+          --th-text: ${o.colors.neutral[0]};
+          --th-sep: rgba(255, 255, 255, 0.25);
+        ` : o.brutalism ? t`
+            --th-bg: ${o.colors.neutral[900]};
+            --th-text: ${o.colors.neutral[0]};
+            --th-sep: ${n ?? o.colors.neutral[600]};
+          ` : t`
+            --th-bg: ${o.colors.neutral[100]};
+            --th-text: ${o.colors.neutral[600]};
+            --th-sep: ${n ?? o.colors.neutral[300]};
+          `}
+`, No = i.tbody`
+  ${({ $rowColor: o }) => o && t`
+      tr {
+        background-color: ${o};
+      }
+    `}
+
+  ${({ $striped: o, theme: r, $stripeColor: n }) => o && t`
       tr:nth-child(even) {
-        background-color: ${r.colors.neutral[100]};
+        background-color: ${n ?? r.colors.neutral[100]};
       }
     `}
 
   tr:last-child td {
     border-bottom: none;
   }
-`, H = t.tr``, Z = t.th`
+`, q = i.tr``, po = i.th`
+  background-color: var(--th-bg);
+  color: var(--th-text);
   text-align: left;
   font-weight: 700;
   white-space: nowrap;
 
-  ${({ $size: o, theme: r }) => ({
-  sm: n`
-        padding: ${r.spacing[1]} ${r.spacing[2]};
-      `,
-  md: n`
-        padding: ${r.spacing[2]} ${r.spacing[3]};
-      `,
-  lg: n`
-        padding: ${r.spacing[3]} ${r.spacing[4]};
-      `
-})[o]}
+  padding: ${({ $size: o, theme: r }) => Oo(o, r)};
 
-  ${({ theme: o }) => o.brutalism ? n`
-          border-right: 1px solid ${o.colors.neutral[600]};
-          &:last-child {
-            border-right: none;
-          }
-        ` : n`
-          border-bottom: 2px solid ${o.colors.neutral[300]};
-          border-right: 1px solid ${o.colors.neutral[200]};
+  ${({ theme: o, $bordered: r }) => o.brutalism ? t`
+          border-right: 1px solid var(--th-sep);
           &:last-child {
             border-right: none;
           }
+        ` : t`
+          border-bottom: 2px solid var(--th-sep);
+          ${r && t`
+            border-right: 1px solid var(--th-sep);
+            &:last-child {
+              border-right: none;
+            }
+          `}
         `}
-`, X = t.td`
-  ${({ $size: o, theme: r }) => ({
-  sm: n`
-        padding: ${r.spacing[1]} ${r.spacing[2]};
-      `,
-  md: n`
-        padding: ${r.spacing[2]} ${r.spacing[3]};
-      `,
-  lg: n`
-        padding: ${r.spacing[3]} ${r.spacing[4]};
-      `
-})[o]}
+`, cn = i.button`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ theme: o }) => o.spacing[1]};
+  background: none;
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  font-weight: 700;
+  padding: 0;
+  width: 100%;
+  text-align: left;
 
-  ${({ $variant: o, theme: r }) => r.brutalism ? n`
-          border-bottom: ${r.brutalism.borderWidth} solid
-            ${r.colors.neutral[900]};
-          ${o === "bordered" && n`
-            border-right: ${r.brutalism.borderWidth} solid
-              ${r.colors.neutral[900]};
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+`, dn = i.span`
+  opacity: 0.5;
+  display: inline-flex;
+  align-items: center;
+`, ro = i.td`
+  padding: ${({ $size: o, theme: r }) => Oo(o, r)};
+
+  ${({ $bordered: o, $borderColor: r, theme: n }) => n.brutalism ? t`
+          border-bottom: ${n.brutalism.borderWidth} solid
+            ${r ?? n.colors.neutral[900]};
+          ${o && t`
+            border-right: ${n.brutalism.borderWidth} solid
+              ${r ?? n.colors.neutral[900]};
             &:last-child {
               border-right: none;
             }
           `}
-        ` : o === "bordered" ? n`
-            border: 1px solid ${r.colors.neutral[300]};
-          ` : n`
-            border-bottom: 1px solid ${r.colors.neutral[200]};
+        ` : o ? t`
+            border: 1px solid ${r ?? n.colors.neutral[300]};
+          ` : t`
+            border-bottom: 1px solid
+              ${r ?? n.colors.neutral[200]};
           `}
-`;
-function jr({
+`, un = 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`
+  0% { background-position: -400px 0; }
+  100% { background-position: 400px 0; }
+`, fn = i(ro)``, gn = i.div`
+  height: 14px;
+  border-radius: 4px;
+  background: linear-gradient(
+    90deg,
+    ${({ theme: o }) => o.colors.neutral[200]} 25%,
+    ${({ theme: o }) => o.colors.neutral[100]} 50%,
+    ${({ theme: o }) => o.colors.neutral[200]} 75%
+  );
+  background-size: 800px 100%;
+  animation: ${pn} 1.6s ease-in-out infinite;
+`, bn = i.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme: o }) => o.spacing[1]};
+  padding: ${({ theme: o }) => `${o.spacing[2]} ${o.spacing[3]}`};
+
+  ${({ theme: o }) => o.brutalism ? t`
+          border-top: ${o.brutalism.borderWidth} solid
+            ${o.colors.neutral[900]};
+        ` : t`
+          border-top: 1px solid ${o.colors.neutral[200]};
+        `}
+`, eo = i.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 ${({ theme: o }) => o.spacing[2]};
+  font: inherit;
+  font-size: ${({ theme: o }) => o.fontSizes.sm};
+  cursor: pointer;
+
+  ${({ $active: o, theme: r }) => r.brutalism ? t`
+          border: ${r.brutalism.borderWidth} solid
+            ${r.colors.neutral[900]};
+          background: ${o ? r.colors.neutral[900] : "transparent"};
+          color: ${o ? r.colors.neutral[0] : r.colors.neutral[900]};
+          box-shadow: ${o ? "none" : `2px 2px 0 ${r.colors.neutral[900]}`};
+
+          &:hover:not(:disabled) {
+            background: ${o ? r.colors.neutral[600] : r.colors.neutral[100]};
+          }
+        ` : t`
+          border: 1px solid
+            ${o ? r.colors.primary[500] : "transparent"};
+          border-radius: ${r.radius.md};
+          background: ${o ? r.colors.primary[500] : "transparent"};
+          color: ${o ? r.colors.neutral[0] : r.colors.neutral[600]};
+
+          &:hover:not(:disabled) {
+            background: ${o ? r.colors.primary[700] : r.colors.neutral[100]};
+            border-color: ${o ? r.colors.primary[700] : r.colors.neutral[200]};
+          }
+        `}
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    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 });
+}
+function yn({
   columns: o,
   data: r,
-  size: s = "md",
-  variant: a = "default",
-  caption: l,
-  className: d,
-  style: c
+  rowKey: n,
+  size: e = "md",
+  striped: c,
+  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
 }) {
-  return /* @__PURE__ */ i(fo, { className: d, style: c, children: /* @__PURE__ */ m($o, { $size: s, children: [
-    l && /* @__PURE__ */ i("caption", { children: l }),
-    /* @__PURE__ */ i(bo, { children: /* @__PURE__ */ i(H, { children: o.map((e) => /* @__PURE__ */ i(
-      Z,
-      {
-        $size: s,
-        style: e.width ? { width: e.width } : void 0,
-        children: e.header
-      },
-      e.key
-    )) }) }),
-    /* @__PURE__ */ i(go, { $variant: a, children: r.map((e, p) => /* @__PURE__ */ i(H, { children: o.map((u) => /* @__PURE__ */ i(X, { $size: s, $variant: a, children: u.render ? u.render(e[u.key], e, p) : String(e[u.key] ?? "") }, u.key)) }, p)) })
-  ] }) });
+  const {
+    activeSort: j,
+    sortedData: _,
+    handleSort: H
+  } = sn({
+    data: r,
+    sort: b,
+    defaultSort: w,
+    onSortChange: y
+  }), {
+    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;
+  return /* @__PURE__ */ C(
+    Po,
+    {
+      $borderColor: P,
+      $stickyHeader: l,
+      className: m,
+      style: O,
+      children: [
+        /* @__PURE__ */ C(Bo, { $size: e, children: [
+          u && /* @__PURE__ */ s("caption", { children: u }),
+          /* @__PURE__ */ s(
+            Do,
+            {
+              $headerColor: B,
+              $borderColor: P,
+              $stickyHeader: l,
+              children: /* @__PURE__ */ s(q, { children: o.map((d) => /* @__PURE__ */ s(
+                po,
+                {
+                  $size: e,
+                  $bordered: a,
+                  scope: "col",
+                  style: d.width ? { width: d.width } : void 0,
+                  children: d.sortable ? /* @__PURE__ */ C(
+                    cn,
+                    {
+                      type: "button",
+                      onClick: () => to(d.key),
+                      "aria-label": `Sort by ${d.header}${j?.key === d.key ? `, ${j.direction}ending` : ""}`,
+                      children: [
+                        d.header,
+                        /* @__PURE__ */ s(dn, { "aria-hidden": "true", children: xn(j, d.key) })
+                      ]
+                    }
+                  ) : d.header
+                },
+                d.key
+              )) })
+            }
+          ),
+          /* @__PURE__ */ s(
+            No,
+            {
+              $striped: c,
+              $rowColor: h,
+              $stripeColor: $,
+              children: p ? Array.from({ length: W }).map((d, S) => /* @__PURE__ */ s(q, { children: o.map((L) => /* @__PURE__ */ s(
+                fn,
+                {
+                  $size: e,
+                  $bordered: a,
+                  $borderColor: P,
+                  children: /* @__PURE__ */ s(gn, {})
+                },
+                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,
+                {
+                  $size: e,
+                  $bordered: a,
+                  $borderColor: P,
+                  children: L.render ? L.render(d[L.key], d, S) : String(d[L.key] ?? "") || " "
+                },
+                L.key
+              )) }, f(d, S)))
+            }
+          )
+        ] }),
+        g && Y > 1 && /* @__PURE__ */ C(bn, { children: [
+          /* @__PURE__ */ s(
+            eo,
+            {
+              type: "button",
+              onClick: () => U(N - 1),
+              disabled: N <= 1,
+              "aria-label": "Previous page",
+              children: "←"
+            }
+          ),
+          an(N, Y).map(
+            (d, S) => d === "..." ? /* @__PURE__ */ s(
+              "span",
+              {
+                "aria-hidden": "true",
+                style: { padding: "0 4px" },
+                children: "…"
+              },
+              `e${S}`
+            ) : /* @__PURE__ */ s(
+              eo,
+              {
+                type: "button",
+                $active: d === N,
+                onClick: () => U(d),
+                "aria-label": `Page ${d}`,
+                "aria-current": d === N ? "page" : void 0,
+                children: d
+              },
+              d
+            )
+          ),
+          /* @__PURE__ */ s(
+            eo,
+            {
+              type: "button",
+              onClick: () => U(N + 1),
+              disabled: N >= Y,
+              "aria-label": "Next page",
+              children: "→"
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
-jr.displayName = "Table";
-const Rr = t(X)`
-  ${({ $editable: o, theme: r }) => o && n`
+yn.displayName = "Table";
+const hn = i(Bo)`
+  table-layout: fixed;
+`, wn = i(ro)`
+  ${({ $editable: o, theme: r }) => o && t`
       cursor: pointer;
       position: relative;
 
@@ -1421,8 +1752,11 @@ const Rr = t(X)`
         background-color: ${r.brutalism ? r.colors.neutral[100] : r.colors.primary[50]};
       }
     `}
-`, Ar = t.input`
+`, vn = i.input`
+  display: block;
   width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
   border: none;
   outline: none;
   background: transparent;
@@ -1431,24 +1765,24 @@ const Rr = t(X)`
   padding: 0;
   margin: 0;
 
-  ${({ theme: o }) => o.brutalism ? n`
+  ${({ theme: o }) => o.brutalism ? t`
           &:focus {
             outline: 2px solid ${o.colors.neutral[900]};
             outline-offset: 1px;
           }
-        ` : n`
+        ` : t`
           &:focus {
             box-shadow: ${o.shadows.focusRing};
           }
         `}
-`, Lr = t(Z)`
+`, kn = i(po)`
   width: 40px;
-`, Nr = t(X)`
+`, mn = i(ro)`
   width: 40px;
   text-align: center;
   padding-left: 0;
   padding-right: 0;
-`, Vr = t.button`
+`, Sn = i.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1466,18 +1800,18 @@ const Rr = t(X)`
   &:hover {
     color: ${({ theme: o }) => o.colors.error[500]};
 
-    ${({ theme: o }) => o.brutalism && n`
+    ${({ theme: o }) => o.brutalism && t`
         background-color: ${o.colors.error[50]};
       `}
   }
-`, Dr = t.tr`
-  ${({ theme: o }) => o.brutalism ? n`
+`, Cn = i.tr`
+  ${({ theme: o }) => o.brutalism ? t`
           border-top: ${o.brutalism.borderWidth} solid
             ${o.colors.neutral[900]};
-        ` : n`
+        ` : t`
           border-top: 1px solid ${o.colors.neutral[200]};
         `}
-`, Fr = t.button`
+`, zn = i.button`
   display: inline-flex;
   align-items: center;
   gap: ${({ theme: o }) => o.spacing[1]};
@@ -1500,104 +1834,166 @@ const Rr = t(X)`
     outline-offset: 2px;
   }
 `;
-function Mr({
+function ao(o, r, n) {
+  return typeof o.editable == "function" ? o.editable(r, n) : !!o.editable;
+}
+function Tn({
   columns: o,
   defaultData: r,
-  data: s,
-  onChange: a,
-  size: l = "md",
-  addRowLabel: d = "Add row",
-  newRowFactory: c,
-  deletable: e = !1,
-  className: p,
-  style: u
+  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 x = s !== void 0, [C, w] = W(r ?? []), b = x ? s : C, [f, S] = W(null), [z, h] = W(""), E = Y(null);
-  V(() => {
-    f && (E.current?.focus(), E.current?.select());
-  }, [f]);
-  const B = j(
-    (g) => {
-      x || w(g), a?.(g);
+  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;
     },
-    [x, a]
-  ), O = (g, T, I) => {
-    S({ rowIndex: g, colKey: T }), h(String(I ?? ""));
-  }, $ = j(() => {
-    if (!f) return;
-    const { rowIndex: g, colKey: T } = f, I = b.map(
-      (L, F) => F === g ? { ...L, [T]: z } : L
+    [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
     );
-    B(I), S(null);
-  }, [f, b, z, B]), y = () => {
-    S(null), h("");
-  }, v = (g) => {
-    g.key === "Enter" && $(), g.key === "Escape" && y();
-  }, k = () => {
-    const g = c ? c() : Object.fromEntries(o.map((T) => [T.key, ""]));
-    B([...b, g]);
-  }, A = (g) => {
-    f?.rowIndex === g && S(null), B(b.filter((T, I) => I !== g));
-  }, D = e ? o.length + 1 : o.length;
-  return /* @__PURE__ */ i(fo, { className: p, style: u, children: /* @__PURE__ */ m($o, { $size: l, children: [
-    /* @__PURE__ */ i(bo, { children: /* @__PURE__ */ m(H, { children: [
-      o.map((g) => /* @__PURE__ */ i(
-        Z,
-        {
-          $size: l,
-          style: g.width ? { width: g.width } : void 0,
-          children: g.header
-        },
-        g.key
-      )),
-      e && /* @__PURE__ */ i(Lr, { $size: l, "aria-label": "Actions" })
-    ] }) }),
-    /* @__PURE__ */ m(go, { $variant: "default", children: [
-      b.map((g, T) => /* @__PURE__ */ m(H, { children: [
-        o.map((I) => {
-          const L = f?.rowIndex === T && f.colKey === I.key, F = g[I.key];
-          return /* @__PURE__ */ i(
-            Rr,
+    $(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
+    );
+    $(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,
             {
-              $size: l,
-              $variant: "default",
-              $editable: I.editable && !L,
-              onClick: I.editable && !L ? () => O(T, I.key, F) : void 0,
-              children: L ? /* @__PURE__ */ i(
-                Ar,
-                {
-                  ref: E,
-                  $size: l,
-                  value: z,
-                  onChange: (xo) => h(xo.target.value),
-                  onBlur: $,
-                  onKeyDown: v,
-                  "aria-label": `Edit ${I.header}`
-                }
-              ) : I.render ? I.render(F, g, T) : String(F ?? "")
+              $size: a,
+              scope: "col",
+              style: f.width ? { width: f.width } : void 0,
+              children: f.header
             },
-            I.key
-          );
-        }),
-        e && /* @__PURE__ */ i(Nr, { $size: l, $variant: "default", children: /* @__PURE__ */ i(
-          Vr,
-          {
-            type: "button",
-            onClick: () => A(T),
-            "aria-label": "Delete row",
-            children: "✕"
-          }
-        ) })
-      ] }, T)),
-      /* @__PURE__ */ i(Dr, { children: /* @__PURE__ */ i("td", { colSpan: D, children: /* @__PURE__ */ m(Fr, { type: "button", onClick: k, children: [
-        "+ ",
-        d
-      ] }) }) })
-    ] })
-  ] }) });
+            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: () => 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
+          ] }) }) })
+        ] })
+      ] })
+    }
+  );
 }
-Mr.displayName = "EditableTable";
-const ro = {
+Tn.displayName = "DataTable";
+const vo = {
   primary: {
     50: "#f0f8ff",
     500: "#0070f3",
@@ -1629,38 +2025,38 @@ const ro = {
     50: "#eff6ff",
     500: "#2563eb"
   }
-}, Pr = {
+}, In = {
   1: "4px",
   2: "8px",
   3: "12px",
   4: "16px",
   5: "20px",
   6: "24px"
-}, Yr = {
+}, En = {
   md: "6px"
-}, Hr = {
+}, Wn = {
   modal: 1e3,
   toast: 1100
-}, _r = {
+}, On = {
   xs: "12px",
   sm: "14px",
   md: "16px",
   lg: "18px"
-}, on = {
-  colors: { ...ro, primary: { ...ro.primary, contrast: "#ffffff" } },
-  spacing: Pr,
-  fontSizes: _r,
-  radius: Yr,
-  zIndex: Hr,
+}, _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 Kr(o) {
-  const r = parseInt(o.slice(1, 3), 16) / 255, s = parseInt(o.slice(3, 5), 16) / 255, a = 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(s) + 0.0722 * l(a) > 0.179 ? "#111111" : "#ffffff";
+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";
 }
-const U = {
+const co = {
   colors: {
     primary: {
       50: "#fffde6",
@@ -1690,44 +2086,44 @@ const U = {
   shadows: { focusRing: "3px 3px 0 #111111" },
   brutalism: { borderWidth: "2px", shadowOffset: "4px" }
 };
-function rn(o) {
+function Mn(o) {
   return {
-    ...U,
+    ...co,
     colors: {
-      ...U.colors,
+      ...co.colors,
       primary: {
         50: "#fffff0",
         500: o,
         700: o,
-        contrast: Kr(o)
+        contrast: Pn(o)
       }
     }
   };
 }
-function nn({
-  theme: o = U,
+function Vn({
+  theme: o = co,
   children: r
 }) {
-  return /* @__PURE__ */ i(yo, { theme: o, children: r });
+  return /* @__PURE__ */ s(Ao, { theme: o, children: r });
 }
 export {
-  mo as Badge,
-  ko as Button,
-  Or as CollapsibleCard,
-  Mr as EditableTable,
-  dr as Form,
-  ur as FormField,
-  Eo as Input,
-  vr as Link,
-  Yo as Modal,
-  yr as Select,
-  jr as Table,
-  nn as ThemeProvider,
-  uo as Toast,
-  Gr as ToastProvider,
-  rn as createNeoBrutalTheme,
-  on as defaultTheme,
-  U as neoBrutalTheme,
-  Qr as useForm,
-  Jr as useToast
+  Ro as Badge,
+  Mo as Button,
+  nn as CollapsibleCard,
+  Tn as DataTable,
+  Dr as Form,
+  Nr as FormField,
+  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
 };