blunt-ui 0.3.6 → 1.1.0

package/dist/index.js

@@ -1,16 +1,16 @@
-import { jsx as s, jsxs as k, Fragment as Lo } from "react/jsx-runtime";
-import i, { css as t, keyframes as F, ThemeProvider as Fo, createGlobalStyle as Bo } from "styled-components";
-import po, { useId as R, useState as D, useContext as io, createContext as ao, forwardRef as ko, createElement as to, useRef as j, useEffect as A, useCallback as V, useMemo as lo } from "react";
-import { createPortal as Co } from "react-dom";
-const U = (o, r, n) => t`
+import { jsx as e, jsxs as S, Fragment as dr } from "react/jsx-runtime";
+import i, { css as t, keyframes as oo, ThemeProvider as ur, createGlobalStyle as pr } from "styled-components";
+import Mo, { useId as ro, useState as T, useContext as To, createContext as Wo, forwardRef as Yo, createElement as zo, useRef as Y, useCallback as X, useEffect as B, useMemo as Do } from "react";
+import { createPortal as xo } from "react-dom";
+const uo = (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]};
-`, Vo = i.span`
+`, fr = i.span`
   display: inline-flex;
   align-items: center;
-  font-weight: 700;
+  font-weight: ${({ theme: o }) => o.fontWeights.bold};
   letter-spacing: 0.04em;
   cursor: default;
   border-radius: ${({ theme: o }) => o.radius.md};
@@ -21,42 +21,42 @@ const U = (o, r, n) => t`
 
   ${({ $size: o, theme: r }) => ({
   sm: t`
-        padding: 2px 8px;
+        padding: ${r.spacing[0.5]} ${r.spacing[2]};
         font-size: ${r.fontSizes.xs};
       `,
   md: t`
-        padding: 4px 10px;
+        padding: ${r.spacing[1]} ${r.spacing[3]};
         font-size: ${r.fontSizes.sm};
       `
 })[o]}
 
   ${({ $variant: o, theme: r }) => r.brutalism ? {
-  primary: U(
+  primary: uo(
     r,
     r.colors.primary[500],
     r.colors.primary.contrast
   ),
-  neutral: U(
+  neutral: uo(
     r,
     r.colors.neutral[200],
     r.colors.neutral[900]
   ),
-  success: U(
+  success: uo(
     r,
     r.colors.success[50],
     r.colors.success[500]
   ),
-  error: U(
+  error: uo(
     r,
     r.colors.error[50],
     r.colors.error[500]
   ),
-  warning: U(
+  warning: uo(
     r,
     r.colors.warning[50],
     r.colors.warning[500]
   ),
-  info: U(r, r.colors.info[50], r.colors.info[500])
+  info: uo(r, r.colors.info[50], r.colors.info[500])
 }[o] : {
   primary: t`
         background: ${r.colors.primary[50]};
@@ -84,16 +84,16 @@ const U = (o, r, n) => t`
       `
 }[o]}
 `;
-function _o({
+function $r({
   variant: o = "primary",
   size: r = "md",
   children: n,
-  ...e
+  ...s
 }) {
-  return /* @__PURE__ */ s(Vo, { $variant: o, $size: r, ...e, children: n });
+  return /* @__PURE__ */ e(fr, { $variant: o, $size: r, ...s, children: n });
 }
-_o.displayName = "Badge";
-const oo = (o, r, n) => t`
+$r.displayName = "Badge";
+const ho = (o, r, n) => t`
   background-color: ${r};
   color: ${n};
   border: ${o.brutalism.borderWidth} solid ${o.colors.neutral[900]};
@@ -106,12 +106,12 @@ const oo = (o, r, n) => t`
     transform: translate(2px, 2px);
     box-shadow: 2px 2px 0 ${o.colors.neutral[900]};
   }
-`, jo = i.button`
+`, gr = i.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: ${({ theme: o }) => o.radius.md};
-  font-weight: 600;
+  font-weight: ${({ theme: o }) => o.fontWeights.semibold};
   cursor: pointer;
   text-decoration: none;
 
@@ -126,17 +126,17 @@ const oo = (o, r, n) => t`
   }
 
   ${({ $variant: o, theme: r }) => r.brutalism ? {
-  primary: oo(
+  primary: ho(
     r,
     r.colors.primary[500],
     r.colors.primary.contrast
   ),
-  secondary: oo(
+  secondary: ho(
     r,
     r.colors.neutral[100],
     r.colors.neutral[900]
   ),
-  outline: oo(
+  outline: ho(
     r,
     r.colors.neutral[0],
     r.colors.neutral[900]
@@ -183,44 +183,44 @@ const oo = (o, r, n) => t`
       `
 })[o]}
 `;
-function so({
+function Co({
   ref: o,
   as: r,
   href: n,
-  variant: e = "primary",
-  size: l = "md",
-  isLoading: a,
-  disabled: c,
-  children: d,
-  ...p
+  variant: s = "primary",
+  size: a = "md",
+  isLoading: l,
+  disabled: d,
+  children: p,
+  ...u
 }) {
-  return /* @__PURE__ */ s(
-    jo,
+  return /* @__PURE__ */ e(
+    gr,
     {
       ref: o,
       as: r ?? (n ? "a" : "button"),
       href: n,
-      $variant: e,
-      $size: l,
-      disabled: a || c,
-      ...p,
-      children: a ? "Loading..." : d
+      $variant: s,
+      $size: a,
+      disabled: l || d,
+      ...u,
+      children: l ? "Loading..." : p
     }
   );
 }
-so.displayName = "Button";
-const Ao = i.div`
+Co.displayName = "Button";
+const br = i.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme: o }) => o.spacing[1]};
   width: ${({ $fullWidth: o }) => o ? "100%" : "auto"};
-`, Ro = i.label`
+`, xr = i.label`
   font-size: ${({ theme: o }) => o.fontSizes.sm};
-  font-weight: ${({ theme: o }) => o.brutalism ? "700" : "500"};
-`, Yo = i.span`
+  font-weight: ${({ theme: o }) => o.brutalism ? o.fontWeights.bold : o.fontWeights.medium};
+`, yr = 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`
+`, hr = i.div`
   display: flex;
   align-items: center;
   border-radius: ${({ theme: o }) => o.radius.md};
@@ -269,7 +269,7 @@ const Ao = i.div`
   &:focus-within {
     box-shadow: ${({ theme: o }) => o.shadows.focusRing};
   }
-`, Uo = i.input`
+`, wr = i.input`
   flex: 1;
   border: none;
   outline: none;
@@ -280,11 +280,11 @@ const Ao = i.div`
     cursor: not-allowed;
     opacity: 0.6;
   }
-`, fo = i.div`
+`, Lo = i.div`
   display: inline-flex;
   align-items: center;
   margin: 0 ${({ theme: o }) => o.spacing[1]};
-`, Ko = i.button`
+`, mr = i.button`
   display: inline-flex;
   align-items: center;
   margin: 0 ${({ theme: o }) => o.spacing[1]};
@@ -298,74 +298,74 @@ const Ao = i.div`
     opacity: 0.8;
   }
 `;
-function qo({
+function vr({
   ref: o,
   type: r = "text",
   size: n = "md",
-  variant: e = "default",
-  label: l,
-  helperText: a,
-  error: c,
-  leftElement: d,
-  rightElement: p,
-  clearable: $,
+  variant: s = "default",
+  label: a,
+  helperText: l,
+  error: d,
+  leftElement: p,
+  rightElement: u,
+  clearable: f,
   onClear: g,
-  fullWidth: w,
-  id: x,
-  value: f,
-  defaultValue: y,
-  onChange: h,
-  ...z
+  fullWidth: m,
+  id: v,
+  value: h,
+  defaultValue: k,
+  onChange: C,
+  ...M
 }) {
-  const W = R(), v = x ?? W, b = `${v}-hint`, [C, I] = D(y ?? ""), S = f !== void 0, T = S ? f : C, M = typeof c == "string" ? c : void 0, P = !!(a || c), O = (N) => {
-    S || I(N.target.value), h?.(N);
-  }, K = () => {
-    S || I(""), g?.();
+  const P = ro(), L = v ?? P, x = `${L}-hint`, [I, w] = T(k ?? ""), b = h !== void 0, z = b ? h : I, D = typeof d == "string" ? d : void 0, W = !!(l || d), N = (_) => {
+    b || w(_.target.value), C?.(_);
+  }, F = () => {
+    b || w(""), g?.();
   };
-  return /* @__PURE__ */ k(Ao, { $fullWidth: w, children: [
-    l && /* @__PURE__ */ s(Ro, { htmlFor: v, children: l }),
-    /* @__PURE__ */ k(Ho, { $size: n, $variant: e, $error: !!c, children: [
-      d && /* @__PURE__ */ s(fo, { children: d }),
-      /* @__PURE__ */ s(
-        Uo,
+  return /* @__PURE__ */ S(br, { $fullWidth: m, children: [
+    a && /* @__PURE__ */ e(xr, { htmlFor: L, children: a }),
+    /* @__PURE__ */ S(hr, { $size: n, $variant: s, $error: !!d, children: [
+      p && /* @__PURE__ */ e(Lo, { children: p }),
+      /* @__PURE__ */ e(
+        wr,
         {
-          id: v,
+          id: L,
           ref: o,
           type: r,
-          value: T,
-          onChange: O,
-          ...z,
-          "aria-invalid": !!c,
-          "aria-describedby": P ? b : void 0
+          value: z,
+          onChange: N,
+          ...M,
+          "aria-invalid": !!d,
+          "aria-describedby": W ? x : void 0
         }
       ),
-      $ && T && /* @__PURE__ */ s(
-        Ko,
+      f && z && /* @__PURE__ */ e(
+        mr,
         {
           type: "button",
-          onClick: K,
+          onClick: F,
           "aria-label": "Clear input",
           children: "✕"
         }
       ),
-      p && /* @__PURE__ */ s(fo, { children: p })
+      u && /* @__PURE__ */ e(Lo, { children: u })
     ] }),
-    P && /* @__PURE__ */ s(Yo, { id: b, $error: !!c, children: M ?? a })
+    W && /* @__PURE__ */ e(yr, { id: x, $error: !!d, children: D ?? l })
   ] });
 }
-qo.displayName = "Input";
-const Go = i.div`
+vr.displayName = "Input";
+const kr = i.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme: o }) => o.spacing[1]};
   width: ${({ $fullWidth: o }) => o ? "100%" : "auto"};
-`, Jo = i.label`
+`, Sr = i.label`
   font-size: ${({ theme: o }) => o.fontSizes.sm};
-  font-weight: ${({ theme: o }) => o.brutalism ? "700" : "500"};
-`, Xo = i.span`
+  font-weight: ${({ theme: o }) => o.brutalism ? o.fontWeights.bold : o.fontWeights.medium};
+`, zr = 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`
+`, Cr = i.div`
   display: flex;
   border-radius: ${({ theme: o }) => o.radius.md};
   transition:
@@ -413,7 +413,7 @@ const Go = i.div`
   &:focus-within {
     box-shadow: ${({ theme: o }) => o.shadows.focusRing};
   }
-`, Qo = i.textarea`
+`, Ir = i.textarea`
   flex: 1;
   border: none;
   outline: none;
@@ -427,52 +427,52 @@ const Go = i.div`
     opacity: 0.6;
   }
 `;
-function or({
+function Tr({
   ref: o,
   size: r = "md",
   variant: n = "default",
-  label: e,
-  helperText: l,
-  error: a,
-  fullWidth: c,
-  id: d,
-  value: p,
-  defaultValue: $,
+  label: s,
+  helperText: a,
+  error: l,
+  fullWidth: d,
+  id: p,
+  value: u,
+  defaultValue: f,
   onChange: g,
-  ...w
+  ...m
 }) {
-  const x = R(), f = d ?? x, y = `${f}-hint`, [h, z] = D($ ?? ""), W = p !== void 0, v = W ? p : h, b = typeof a == "string" ? a : void 0, C = !!(l || a);
-  return /* @__PURE__ */ k(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,
+  const v = ro(), h = p ?? v, k = `${h}-hint`, [C, M] = T(f ?? ""), P = u !== void 0, L = P ? u : C, x = typeof l == "string" ? l : void 0, I = !!(a || l);
+  return /* @__PURE__ */ S(kr, { $fullWidth: d, children: [
+    s && /* @__PURE__ */ e(Sr, { htmlFor: h, children: s }),
+    /* @__PURE__ */ e(Cr, { $size: r, $variant: n, $error: !!l, children: /* @__PURE__ */ e(
+      Ir,
       {
-        id: f,
+        id: h,
         ref: o,
-        value: v,
-        onChange: (S) => {
-          W || z(S.target.value), g?.(S);
+        value: L,
+        onChange: (b) => {
+          P || M(b.target.value), g?.(b);
         },
-        ...w,
-        "aria-invalid": !!a,
-        "aria-describedby": C ? y : void 0
+        ...m,
+        "aria-invalid": !!l,
+        "aria-describedby": I ? k : void 0
       }
     ) }),
-    C && /* @__PURE__ */ s(Xo, { id: y, $error: !!a, children: b ?? l })
+    I && /* @__PURE__ */ e(zr, { id: k, $error: !!l, children: x ?? a })
   ] });
 }
-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(
+Tr.displayName = "Textarea";
+const Uo = (...o) => o.filter((r, n, s) => !!r && r.trim() !== "" && s.indexOf(r) === n).join(" ").trim();
+const Wr = (o) => o.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const Dr = (o) => o.replace(
   /^([A-Z])|[\s-_]+(\w)/g,
-  (r, n, e) => e ? e.toUpperCase() : n.toLowerCase()
+  (r, n, s) => s ? s.toUpperCase() : n.toLowerCase()
 );
-const $o = (o) => {
-  const r = nr(o);
+const No = (o) => {
+  const r = Dr(o);
   return r.charAt(0).toUpperCase() + r.slice(1);
 };
-var ro = {
+var wo = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24,
@@ -483,100 +483,107 @@ var ro = {
   strokeLinecap: "round",
   strokeLinejoin: "round"
 };
-const tr = (o) => {
+const Er = (o) => {
   for (const r in o)
     if (r.startsWith("aria-") || r === "role" || r === "title")
       return !0;
   return !1;
-}, sr = ao({}), er = () => io(sr), ir = ko(
-  ({ color: o, size: r, strokeWidth: n, absoluteStrokeWidth: e, className: l = "", children: a, iconNode: c, ...d }, p) => {
+}, Or = Wo({}), Mr = () => To(Or), Lr = Yo(
+  ({ color: o, size: r, strokeWidth: n, absoluteStrokeWidth: s, className: a = "", children: l, iconNode: d, ...p }, u) => {
     const {
-      size: $ = 24,
+      size: f = 24,
       strokeWidth: g = 2,
-      absoluteStrokeWidth: w = !1,
-      color: x = "currentColor",
-      className: f = ""
-    } = er() ?? {}, y = e ?? w ? Number(n ?? g) * 24 / Number(r ?? $) : n ?? g;
-    return to(
+      absoluteStrokeWidth: m = !1,
+      color: v = "currentColor",
+      className: h = ""
+    } = Mr() ?? {}, k = s ?? m ? Number(n ?? g) * 24 / Number(r ?? f) : n ?? g;
+    return zo(
       "svg",
       {
-        ref: p,
-        ...ro,
-        width: r ?? $ ?? ro.width,
-        height: r ?? $ ?? ro.height,
-        stroke: o ?? x,
-        strokeWidth: y,
-        className: So("lucide", f, l),
-        ...!a && !tr(d) && { "aria-hidden": "true" },
-        ...d
+        ref: u,
+        ...wo,
+        width: r ?? f ?? wo.width,
+        height: r ?? f ?? wo.height,
+        stroke: o ?? v,
+        strokeWidth: k,
+        className: Uo("lucide", h, a),
+        ...!l && !Er(p) && { "aria-hidden": "true" },
+        ...p
       },
       [
-        ...c.map(([h, z]) => to(h, z)),
-        ...Array.isArray(a) ? a : [a]
+        ...d.map(([C, M]) => zo(C, M)),
+        ...Array.isArray(l) ? l : [l]
       ]
     );
   }
 );
-const _ = (o, r) => {
-  const n = ko(
-    ({ className: e, ...l }, a) => to(ir, {
-      ref: a,
+const no = (o, r) => {
+  const n = Yo(
+    ({ className: s, ...a }, l) => zo(Lr, {
+      ref: l,
       iconNode: r,
-      className: So(
-        `lucide-${rr($o(o))}`,
+      className: Uo(
+        `lucide-${Wr(No(o))}`,
         `lucide-${o}`,
-        e
+        s
       ),
-      ...l
+      ...a
     })
   );
-  return n.displayName = $o(o), n;
+  return n.displayName = No(o), n;
 };
-const ar = [
+const Nr = [
   ["path", { d: "M12 5v14", key: "s699le" }],
   ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
-], lr = _("arrow-down", ar);
-const cr = [
+], Pr = no("arrow-down", Nr);
+const Rr = [
   ["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" }]
-], dr = _("arrow-up-down", cr);
-const ur = [
+], Vr = no("arrow-up-down", Rr);
+const Fr = [
   ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
   ["path", { d: "M12 19V5", key: "x0mq9r" }]
-], pr = _("arrow-up", ur);
-const fr = [
+], Ar = no("arrow-up", Fr);
+const Br = [
   ["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 = [
+], _r = no("calendar", Br);
+const jr = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], Ko = no("chevron-down", jr);
+const Hr = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]], Yr = no("chevron-left", Hr);
+const Ur = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]], Kr = no("chevron-right", Ur);
+const qr = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], co = _("x", wr), mr = i.div`
+], yo = no("x", qr), Gr = 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;
+  min-width: 0;
+`, Xr = i.div`
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  pointer-events: none;
   display: flex;
-  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`
+  flex-direction: column;
+`, Jr = i.button`
   appearance: none;
   width: 100%;
   border-radius: ${({ theme: o }) => o.radius.md};
-  cursor: pointer;
+  cursor: ${({ $disabled: o }) => o ? "not-allowed" : "pointer"};
   font: inherit;
   color: ${({ theme: o }) => o.colors.neutral[900]};
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: o }) => o.spacing[2]};
+  text-align: left;
+  background: none;
   transition:
     border-color 0.2s,
     box-shadow 0.2s;
@@ -596,8 +603,6 @@ const wr = [
       `
 })[o]}
 
-  padding-right: 2.5rem;
-
   ${({ $variant: o, theme: r }) => r.brutalism ? t`
         border: ${r.brutalism.borderWidth} solid
           ${r.colors.neutral[900]};
@@ -618,22 +623,106 @@ const wr = [
       border-color: ${r.colors.error[500]};
     `}
 
-  &:focus {
+  ${({ $disabled: o }) => o && t`
+      opacity: 0.6;
+    `}
+
+  &:focus-visible {
     outline: none;
     box-shadow: ${({ theme: o }) => o.shadows.focusRing};
   }
+`, mo = i.span`
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: ${({ $placeholder: o, theme: r }) => o ? r.colors.neutral[400] : r.colors.neutral[900]};
+`, Qr = i.span`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: o }) => o.spacing[1]};
+  flex-shrink: 0;
+  color: ${({ theme: o }) => o.colors.neutral[500]};
+`, Zr = i.span`
+  display: inline-flex;
+  align-items: center;
+  transition: transform 0.15s;
+  transform: ${({ $open: o }) => o ? "rotate(180deg)" : "rotate(0deg)"};
+`, on = i.ul`
+  z-index: ${({ theme: o }) => o.zIndex.modal};
+  margin: 0;
+  padding: ${({ theme: o }) => o.spacing[1]} 0;
+  list-style: none;
+  background-color: ${({ theme: o }) => o.colors.neutral[0]};
+  border-radius: ${({ theme: o }) => o.radius.md};
+  max-height: 240px;
+  overflow-y: auto;
 
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
+  ${({ 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.neutral[300]};
+          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+        `}
+`, rn = i.div`
+  padding: ${({ theme: o }) => o.spacing[2]};
+  border-bottom: 1px solid ${({ theme: o }) => o.colors.neutral[200]};
+`, nn = i.input`
+  width: 100%;
+  border: 1px solid ${({ theme: o }) => o.colors.neutral[300]};
+  border-radius: ${({ theme: o }) => o.radius.md};
+  padding: ${({ theme: o }) => `${o.spacing[1]} ${o.spacing[2]}`};
+  font: inherit;
+  font-size: ${({ theme: o }) => o.fontSizes.sm};
+  color: ${({ theme: o }) => o.colors.neutral[900]};
+  background: ${({ theme: o }) => o.colors.neutral[0]};
+  outline: none;
+
+  &:focus {
+    border-color: ${({ theme: o }) => o.colors.primary[500]};
+    box-shadow: ${({ theme: o }) => o.shadows.focusRing};
   }
-`, Sr = i.button`
-  position: absolute;
-  right: ${({ theme: o }) => o.spacing[3]};
-  top: 50%;
-  transform: translateY(-50%);
+
+  ${({ theme: o }) => o.brutalism && t`
+      border: ${o.brutalism.borderWidth} solid ${o.colors.neutral[900]};
+      &:focus {
+        box-shadow: ${o.shadows.focusRing};
+      }
+    `}
+`, tn = i.li`
+  padding: ${({ theme: o }) => `${o.spacing[2]} ${o.spacing[3]}`};
+  font-size: ${({ theme: o }) => o.fontSizes.sm};
+  color: ${({ theme: o }) => o.colors.neutral[400]};
+  list-style: none;
+`, sn = i.li`
   display: flex;
   align-items: center;
+  padding: ${({ theme: o }) => `${o.spacing[2]} ${o.spacing[3]}`};
+  font-size: ${({ theme: o }) => o.fontSizes.md};
+  cursor: ${({ $disabled: o }) => o ? "not-allowed" : "pointer"};
+  color: ${({ $disabled: o, theme: r }) => o ? r.colors.neutral[400] : r.colors.neutral[900]};
+
+  background-color: ${({ $selected: o, $focused: r, theme: n }) => o ? n.colors.primary[50] : r ? n.colors.neutral[100] : "transparent"};
+
+  font-weight: ${({ $selected: o, theme: r }) => o ? r.fontWeights.semibold : r.fontWeights.normal};
+
+  ${({ $selected: o, theme: r }) => o && t`
+      border-left: ${r.spacing[1]} solid ${r.colors.primary[500]};
+      padding-left: ${r.spacing[2]};
+    `}
+
+  &:hover {
+    background-color: ${({ $disabled: o, $selected: r, theme: n }) => o ? "transparent" : r ? n.colors.primary[50] : n.colors.neutral[100]};
+  }
+`, en = i.span`
+  font-size: ${({ theme: o }) => o.fontSizes.xs};
+  color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
+`, an = i.button`
+  display: inline-flex;
+  align-items: center;
   padding: 0;
   background: none;
   border: none;
@@ -649,75 +738,261 @@ const wr = [
     outline-offset: 2px;
     border-radius: 2px;
   }
-`, zr = i.span`
-  position: absolute;
-  right: ${({ theme: o }) => o.spacing[3]};
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-  display: flex;
-  align-items: center;
-  color: ${({ theme: o }) => o.colors.neutral[500]};
 `;
-function Tr({
+function ln({
   options: o,
   placeholder: r,
   size: n = "md",
-  variant: e = "default",
-  error: l,
-  fullWidth: a,
-  clearable: c,
-  onClear: d,
-  id: p,
-  value: $,
-  defaultValue: g,
-  onChange: w,
-  ...x
+  variant: s = "default",
+  error: a,
+  fullWidth: l,
+  clearable: d,
+  onClear: p,
+  id: u,
+  name: f,
+  value: g,
+  defaultValue: m,
+  onChange: v,
+  disabled: h,
+  searchable: k,
+  "aria-label": C,
+  "aria-describedby": M
 }) {
-  const f = R(), y = p ?? f, h = `${y}-hint`, z = typeof l == "string" ? l : void 0, [W, v] = D(
-    g ?? ""
-  ), b = $ !== void 0, C = b ? $ : W, I = (M) => {
-    b || v(M.target.value), w?.(M);
-  }, S = () => {
-    b || v(""), d?.();
-  }, T = c && !!C;
-  return /* @__PURE__ */ k(mr, { $fullWidth: a, children: [
-    /* @__PURE__ */ k(vr, { children: [
-      /* @__PURE__ */ k(
-        Cr,
+  const P = ro(), L = u ?? P, x = `${L}-list`, I = `${L}-search`, w = typeof a == "string" ? a : void 0, [b, z] = T(!1), [D, W] = T(-1), [N, F] = T(""), [_, V] = T({
+    top: 0,
+    left: 0,
+    width: 0
+  }), [U, io] = T(
+    m ?? ""
+  ), O = g !== void 0, H = O ? g : U, ao = Y(null), K = Y(null), to = Y(null), J = Y(null), lo = o.find(
+    (c) => c.value === H
+  ), j = k && N ? o.filter(
+    (c) => c.label.toLowerCase().includes(N.toLowerCase())
+  ) : o, q = X(() => {
+    if (!K.current)
+      return;
+    const c = K.current.getBoundingClientRect();
+    V({
+      top: c.bottom + 4,
+      left: c.left,
+      width: c.width
+    });
+  }, []);
+  B(() => {
+    if (b)
+      return q(), window.addEventListener("scroll", q, !0), window.addEventListener("resize", q), () => {
+        window.removeEventListener("scroll", q, !0), window.removeEventListener("resize", q);
+      };
+  }, [b, q]), B(() => {
+    if (!b)
+      return;
+    const c = (E) => {
+      const G = ao.current?.contains(
+        E.target
+      ), $o = to.current?.contains(
+        E.target
+      );
+      !G && !$o && z(!1);
+    };
+    return document.addEventListener("mousedown", c), () => document.removeEventListener("mousedown", c);
+  }, [b]), B(() => {
+    b && k && setTimeout(() => J.current?.focus(), 0), b || (F(""), W(-1));
+  }, [b, k]), B(() => {
+    W(-1);
+  }, [N]), B(() => {
+    if (D < 0)
+      return;
+    const c = document.getElementById(`${x}-option-${D}`);
+    c && typeof c.scrollIntoView == "function" && c.scrollIntoView({ block: "nearest" });
+  }, [D, x]);
+  function Q(c, E) {
+    let G = c + E;
+    for (; G >= 0 && G < j.length; ) {
+      if (!j[G].disabled)
+        return G;
+      G += E;
+    }
+    return c;
+  }
+  function Z() {
+    return j.findIndex((c) => !c.disabled);
+  }
+  function so() {
+    for (let c = j.length - 1; c >= 0; c--)
+      if (!j[c].disabled)
+        return c;
+    return -1;
+  }
+  function eo(c) {
+    if (c.disabled)
+      return;
+    O || io(c.value);
+    const E = {
+      target: { name: f ?? "", value: c.value },
+      currentTarget: { name: f ?? "", value: c.value }
+    };
+    v?.(E), z(!1), K.current?.focus();
+  }
+  function y(c) {
+    c.stopPropagation(), O || io(""), v?.({
+      target: { name: f ?? "", value: "" },
+      currentTarget: { name: f ?? "", value: "" }
+    }), p?.(), K.current?.focus();
+  }
+  function A(c) {
+    if (!h) {
+      if (!b) {
+        ["ArrowDown", "ArrowUp", "Enter", " "].includes(c.key) && (c.preventDefault(), z(!0), k || W(Z()));
+        return;
+      }
+      if (c.key === "Escape") {
+        c.preventDefault(), z(!1);
+        return;
+      }
+      if (!k) {
+        if (c.key === "ArrowDown") {
+          c.preventDefault(), W((E) => Q(E, 1));
+          return;
+        }
+        if (c.key === "ArrowUp") {
+          c.preventDefault(), W((E) => Q(E, -1));
+          return;
+        }
+        if (c.key === "Home") {
+          c.preventDefault(), W(Z());
+          return;
+        }
+        if (c.key === "End") {
+          c.preventDefault(), W(so());
+          return;
+        }
+        (c.key === "Enter" || c.key === " ") && D >= 0 && (c.preventDefault(), eo(j[D]));
+      }
+    }
+  }
+  function co(c) {
+    if (c.key === "Escape") {
+      z(!1), K.current?.focus();
+      return;
+    }
+    if (c.key === "ArrowDown") {
+      c.preventDefault(), W(
+        (E) => E < 0 ? Z() : Q(E, 1)
+      );
+      return;
+    }
+    if (c.key === "ArrowUp") {
+      c.preventDefault(), W(
+        (E) => E < 0 ? so() : Q(E, -1)
+      );
+      return;
+    }
+    c.key === "Enter" && D >= 0 && (c.preventDefault(), eo(j[D]));
+  }
+  const $ = d && !!H && !h, R = D >= 0 ? `${x}-option-${D}` : void 0;
+  return /* @__PURE__ */ S(Gr, { ref: ao, $fullWidth: l, children: [
+    /* @__PURE__ */ S(Xr, { "aria-hidden": "true", children: [
+      r && /* @__PURE__ */ e(mo, { children: r }),
+      o.map((c) => /* @__PURE__ */ e(mo, { children: c.label }, c.value))
+    ] }),
+    /* @__PURE__ */ S(
+      Jr,
+      {
+        ref: K,
+        id: L,
+        type: "button",
+        role: "combobox",
+        "aria-expanded": b,
+        "aria-haspopup": "listbox",
+        "aria-controls": b ? x : void 0,
+        "aria-activedescendant": b && !k ? R : void 0,
+        "aria-invalid": !!a,
+        "aria-label": C,
+        "aria-describedby": M,
+        $size: n,
+        $variant: s,
+        $error: !!a,
+        $disabled: h,
+        $open: b,
+        disabled: h,
+        onClick: () => !h && z((c) => !c),
+        onKeyDown: A,
+        children: [
+          /* @__PURE__ */ e(mo, { $placeholder: !lo, children: lo?.label ?? r ?? "Select..." }),
+          /* @__PURE__ */ S(Qr, { children: [
+            $ && /* @__PURE__ */ e(
+              an,
+              {
+                type: "button",
+                onClick: y,
+                "aria-label": "Clear selection",
+                children: /* @__PURE__ */ e(yo, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ e(Zr, { $open: b, "aria-hidden": "true", children: /* @__PURE__ */ e(Ko, { size: 14 }) })
+          ] })
+        ]
+      }
+    ),
+    b && xo(
+      /* @__PURE__ */ S(
+        on,
         {
-          id: y,
-          $size: n,
-          $variant: e,
-          $error: !!l,
-          "aria-invalid": !!l,
-          "aria-describedby": z ? h : void 0,
-          value: C,
-          onChange: I,
-          ...x,
+          ref: to,
+          id: x,
+          role: "listbox",
+          "aria-label": r ?? "Options",
+          style: {
+            position: "fixed",
+            top: _.top,
+            left: _.left,
+            width: _.width
+          },
           children: [
-            r && /* @__PURE__ */ s("option", { value: "", disabled: !0, children: r }),
-            o.map((M) => /* @__PURE__ */ s("option", { value: M.value, disabled: M.disabled, children: M.label }, M.value))
+            k && /* @__PURE__ */ e(rn, { children: /* @__PURE__ */ e(
+              nn,
+              {
+                ref: J,
+                id: I,
+                type: "text",
+                placeholder: "Search...",
+                value: N,
+                onChange: (c) => F(c.target.value),
+                onKeyDown: co,
+                "aria-label": "Search options",
+                "aria-controls": x,
+                "aria-activedescendant": R
+              }
+            ) }),
+            j.length === 0 && /* @__PURE__ */ e(tn, { children: "No options found" }),
+            j.map((c, E) => /* @__PURE__ */ e(
+              sn,
+              {
+                id: `${x}-option-${E}`,
+                role: "option",
+                "aria-selected": c.value === H,
+                "aria-disabled": c.disabled,
+                $selected: c.value === H,
+                $focused: E === D,
+                $disabled: c.disabled,
+                onClick: () => eo(c),
+                onMouseEnter: () => !c.disabled && W(E),
+                children: c.label
+              },
+              c.value
+            ))
           ]
         }
       ),
-      T ? /* @__PURE__ */ s(
-        Sr,
-        {
-          type: "button",
-          onClick: S,
-          "aria-label": "Clear selection",
-          children: /* @__PURE__ */ s(co, { size: 14 })
-        }
-      ) : /* @__PURE__ */ s(zr, { "aria-hidden": "true", children: /* @__PURE__ */ s(zo, { size: 14 }) })
-    ] }),
-    z && /* @__PURE__ */ s(kr, { id: h, $error: !0, children: z })
+      document.body
+    ),
+    w && /* @__PURE__ */ e(en, { $error: !0, children: w })
   ] });
 }
-Tr.displayName = "Select";
-const go = i.span`
+ln.displayName = "Select";
+const Po = i.span`
   display: inline-block;
-`, Ir = i.span`
+`, cn = i.span`
   display: inline-block;
   min-width: 60px;
   padding: ${({ theme: o }) => `${o.spacing[1]} ${o.spacing[2]}`};
@@ -755,7 +1030,7 @@ const go = i.span`
             box-shadow: ${r.shadows.focusRing};
           }
         `}
-`, Dr = i.input`
+`, dn = i.input`
   display: inline-block;
   min-width: 60px;
   padding: ${({ theme: o }) => `${o.spacing[1]} ${o.spacing[2]}`};
@@ -775,52 +1050,52 @@ const go = i.span`
           box-shadow: ${o.shadows.focusRing};
         `}
 `;
-function Mr({
+function un({
   value: o,
   defaultValue: r = "",
   onChange: n,
-  onSubmit: e,
-  onCancel: l,
-  placeholder: a = "Click to edit",
-  disabled: c = !1
+  onSubmit: s,
+  onCancel: a,
+  placeholder: l = "Click to edit",
+  disabled: d = !1
 }) {
-  const d = o !== void 0, [p, $] = D(r), g = d ? o : p, [w, x] = D(!1), [f, y] = D(""), h = j(null), z = () => {
-    c || (y(g), x(!0), setTimeout(() => {
-      h.current?.focus(), h.current?.select();
+  const p = o !== void 0, [u, f] = T(r), g = p ? o : u, [m, v] = T(!1), [h, k] = T(""), C = Y(null), M = () => {
+    d || (k(g), v(!0), setTimeout(() => {
+      C.current?.focus(), C.current?.select();
     }, 0));
-  }, W = () => {
-    d || $(f), n?.(f), e?.(f), x(!1);
-  }, v = () => {
-    l?.(g), x(!1);
-  }, b = (C) => {
-    C.key === "Enter" ? W() : C.key === "Escape" && v();
+  }, P = () => {
+    p || f(h), n?.(h), s?.(h), v(!1);
+  }, L = () => {
+    a?.(g), v(!1);
+  }, x = (I) => {
+    I.key === "Enter" ? P() : I.key === "Escape" && L();
   };
-  return w ? /* @__PURE__ */ s(go, { children: /* @__PURE__ */ s(
-    Dr,
+  return m ? /* @__PURE__ */ e(Po, { children: /* @__PURE__ */ e(
+    dn,
     {
-      ref: h,
-      value: f,
-      size: Math.max(f.length, a.length, 10),
-      onChange: (C) => y(C.target.value),
-      onBlur: W,
-      onKeyDown: b,
+      ref: C,
+      value: h,
+      size: Math.max(h.length, l.length, 10),
+      onChange: (I) => k(I.target.value),
+      onBlur: P,
+      onKeyDown: x,
       "aria-label": "Edit value"
     }
-  ) }) : /* @__PURE__ */ s(go, { children: /* @__PURE__ */ s(
-    Ir,
+  ) }) : /* @__PURE__ */ e(Po, { children: /* @__PURE__ */ e(
+    cn,
     {
-      role: c ? void 0 : "button",
-      tabIndex: c ? void 0 : 0,
-      $disabled: c,
+      role: d ? void 0 : "button",
+      tabIndex: d ? void 0 : 0,
+      $disabled: d,
       $empty: !g,
-      onClick: z,
-      onKeyDown: (C) => C.key === "Enter" && z(),
-      children: g || a
+      onClick: M,
+      onKeyDown: (I) => I.key === "Enter" && M(),
+      children: g || l
     }
   ) });
 }
-Mr.displayName = "Editable";
-const Wr = i.a`
+un.displayName = "Editable";
+const pn = i.a`
   text-decoration: underline;
   text-underline-offset: 2px;
   transition: color 0.15s;
@@ -846,55 +1121,55 @@ const Wr = i.a`
       `
 })[o]}
 `;
-function To({
+function qo({
   variant: o = "default",
   external: r,
   children: n,
-  ...e
+  ...s
 }) {
-  return /* @__PURE__ */ s(
-    Wr,
+  return /* @__PURE__ */ e(
+    pn,
     {
       $variant: o,
       ...r && { target: "_blank", rel: "noreferrer" },
-      ...e,
+      ...s,
       children: n
     }
   );
 }
-To.displayName = "Link";
-const Or = i.div`
+qo.displayName = "Link";
+const fn = i.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme: o }) => o.spacing[1]};
-`, Pr = i.span`
+`, $n = 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-weight: ${({ theme: o }) => o.brutalism ? o.fontWeights.bold : o.fontWeights.medium};
+`, gn = i.span`
   font-size: ${({ theme: o }) => o.fontSizes.md};
   color: ${({ theme: o }) => o.colors.neutral[900]};
 `;
-function Er({ label: o, value: r, href: n }) {
-  return /* @__PURE__ */ k(Or, { children: [
-    /* @__PURE__ */ s(Pr, { children: o }),
-    n ? /* @__PURE__ */ s(To, { href: n, external: !0, children: r }) : /* @__PURE__ */ s(Nr, { children: r ?? "—" })
+function bn({ label: o, value: r, href: n }) {
+  return /* @__PURE__ */ S(fn, { children: [
+    /* @__PURE__ */ e($n, { children: o }),
+    n ? /* @__PURE__ */ e(qo, { href: n, external: !0, children: r }) : /* @__PURE__ */ e(gn, { children: r ?? "—" })
   ] });
 }
-Er.displayName = "Field";
-const Lr = F`
+bn.displayName = "Field";
+const xn = oo`
   from { opacity: 0; }
   to { opacity: 1; }
-`, Fr = F`
+`, yn = oo`
   from { opacity: 1; }
   to { opacity: 0; }
-`, Br = F`
+`, hn = oo`
   from { opacity: 0; transform: scale(0.95) translateY(-8px); }
   to { opacity: 1; transform: scale(1) translateY(0); }
-`, Vr = F`
+`, wn = oo`
   from { opacity: 1; transform: scale(1) translateY(0); }
   to { opacity: 0; transform: scale(0.95) translateY(-8px); }
-`, _r = i.div`
+`, mn = i.div`
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.5);
@@ -902,9 +1177,9 @@ const Lr = F`
   align-items: center;
   justify-content: center;
   z-index: ${({ theme: o }) => o.zIndex.modal};
-  animation: ${({ $closing: o }) => o ? Fr : Lr} 0.15s ease
+  animation: ${({ $closing: o }) => o ? yn : xn} 0.15s ease
     forwards;
-`, jr = i.div`
+`, vn = i.div`
   position: relative;
   background: ${({ theme: o }) => o.colors.neutral[0]};
   border-radius: ${({ theme: o }) => o.radius.md};
@@ -913,7 +1188,7 @@ const Lr = F`
   display: flex;
   flex-direction: column;
   max-height: 90vh;
-  animation: ${({ $closing: o }) => o ? Vr : Br} 0.15s ease
+  animation: ${({ $closing: o }) => o ? wn : hn} 0.15s ease
     forwards;
 
   ${({ $size: o }) => o === "sm" && t`
@@ -931,19 +1206,19 @@ const Lr = F`
       max-height: 100vh;
       border-radius: 0;
     `}
-`, Ar = i.div`
+`, kn = 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;
-`, Rr = i.h2`
+`, Sn = i.h2`
   flex: 1;
   font-size: ${({ theme: o }) => o.fontSizes.lg};
-  font-weight: 600;
+  font-weight: ${({ theme: o }) => o.fontWeights.semibold};
   margin: 0;
-`, Yr = i.button`
+`, zn = i.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -968,11 +1243,11 @@ const Lr = F`
     outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
     outline-offset: 2px;
   }
-`, Hr = i.div`
+`, Cn = i.div`
   padding: ${({ theme: o }) => o.spacing[4]};
   overflow-y: auto;
   flex: 1;
-`, Ur = i.div`
+`, In = i.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -980,7 +1255,7 @@ const Lr = F`
   padding: ${({ theme: o }) => o.spacing[4]};
   border-top: 1px solid ${({ theme: o }) => o.colors.neutral[200]};
   flex-shrink: 0;
-`, Kr = [
+`, Tn = [
   "button:not([disabled])",
   "input:not([disabled])",
   "select:not([disabled])",
@@ -988,96 +1263,96 @@ const Lr = F`
   "a[href]",
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
-function bo(o) {
+function Ro(o) {
   return Array.from(
-    o.querySelectorAll(Kr)
+    o.querySelectorAll(Tn)
   );
 }
-function Io({
+function Go({
   open: o,
   onClose: r,
   title: n,
-  children: e,
-  footer: l,
-  size: a = "md",
-  closeOnBackdrop: c = !0,
-  closeOnEscape: d = !0,
-  ariaLabelledBy: p,
-  ariaDescribedBy: $
+  children: s,
+  footer: a,
+  size: l = "md",
+  closeOnBackdrop: d = !0,
+  closeOnEscape: p = !0,
+  ariaLabelledBy: u,
+  ariaDescribedBy: f
 }) {
-  const g = j(null), w = j(null), x = j(r);
-  x.current = r;
-  const f = R(), y = p ?? (n ? f : void 0), [h, z] = D(o), [W, v] = D(!1);
-  return A(() => {
+  const g = Y(null), m = Y(null), v = Y(r);
+  v.current = r;
+  const h = ro(), k = u ?? (n ? h : void 0), [C, M] = T(o), [P, L] = T(!1);
+  return B(() => {
     if (o)
-      z(!0), v(!1);
-    else if (h) {
-      v(!0);
-      const b = setTimeout(() => {
-        z(!1), v(!1);
+      M(!0), L(!1);
+    else if (C) {
+      L(!0);
+      const x = setTimeout(() => {
+        M(!1), L(!1);
       }, 150);
-      return () => clearTimeout(b);
+      return () => clearTimeout(x);
     }
-  }, [o, h]), A(() => {
+  }, [o, C]), B(() => {
     if (!o)
       return;
-    const b = document.body.style.overflow;
+    const x = document.body.style.overflow;
     return document.body.style.overflow = "hidden", () => {
-      document.body.style.overflow = b;
+      document.body.style.overflow = x;
     };
-  }, [o]), A(() => {
+  }, [o]), B(() => {
     if (!o || !g.current)
       return;
-    const b = g.current, C = document.activeElement;
-    (bo(b)[0] ?? b).focus();
-    const S = (T) => {
-      if (T.key === "Escape" && d) {
-        x.current();
+    const x = g.current, I = document.activeElement;
+    (Ro(x)[0] ?? x).focus();
+    const b = (z) => {
+      if (z.key === "Escape" && p) {
+        v.current();
         return;
       }
-      if (T.key !== "Tab")
+      if (z.key !== "Tab")
         return;
-      const M = bo(b);
-      if (M.length === 0) {
-        T.preventDefault();
+      const D = Ro(x);
+      if (D.length === 0) {
+        z.preventDefault();
         return;
       }
-      const P = M[0], O = M[M.length - 1];
-      T.shiftKey ? document.activeElement === P && (T.preventDefault(), O.focus()) : document.activeElement === O && (T.preventDefault(), P.focus());
+      const W = D[0], N = D[D.length - 1];
+      z.shiftKey ? document.activeElement === W && (z.preventDefault(), N.focus()) : document.activeElement === N && (z.preventDefault(), W.focus());
     };
-    return document.addEventListener("keydown", S), () => {
-      document.removeEventListener("keydown", S), C?.focus();
+    return document.addEventListener("keydown", b), () => {
+      document.removeEventListener("keydown", b), I?.focus();
     };
-  }, [o, d, h]), h ? Co(
-    /* @__PURE__ */ s(
-      _r,
+  }, [o, p, C]), C ? xo(
+    /* @__PURE__ */ e(
+      mn,
       {
-        $closing: W,
-        onMouseDown: (b) => {
-          w.current = b.target;
+        $closing: P,
+        onMouseDown: (x) => {
+          m.current = x.target;
         },
-        onClick: (b) => {
-          c && w.current === b.currentTarget && r();
+        onClick: (x) => {
+          d && m.current === x.currentTarget && r();
         },
-        children: /* @__PURE__ */ k(
-          jr,
+        children: /* @__PURE__ */ S(
+          vn,
           {
             ref: g,
             role: "dialog",
             "aria-modal": "true",
-            "aria-labelledby": y,
-            "aria-describedby": $,
-            $size: a,
-            $closing: W,
+            "aria-labelledby": k,
+            "aria-describedby": f,
+            $size: l,
+            $closing: P,
             tabIndex: -1,
-            onClick: (b) => b.stopPropagation(),
+            onClick: (x) => x.stopPropagation(),
             children: [
-              /* @__PURE__ */ k(Ar, { children: [
-                n && /* @__PURE__ */ s(Rr, { id: f, children: n }),
-                /* @__PURE__ */ s(Yr, { onClick: r, "aria-label": "Close modal", children: "×" })
+              /* @__PURE__ */ S(kn, { children: [
+                n && /* @__PURE__ */ e(Sn, { id: h, children: n }),
+                /* @__PURE__ */ e(zn, { onClick: r, "aria-label": "Close modal", children: "×" })
               ] }),
-              /* @__PURE__ */ s(Hr, { children: e }),
-              l && /* @__PURE__ */ s(Ur, { children: l })
+              /* @__PURE__ */ e(Cn, { children: s }),
+              a && /* @__PURE__ */ e(In, { children: a })
             ]
           }
         )
@@ -1086,19 +1361,64 @@ function Io({
     document.body
   ) : null;
 }
-Io.displayName = "Modal";
-const qr = F`
+Go.displayName = "Modal";
+const Xo = oo`
   from { opacity: 0; transform: translateY(12px); }
   to   { opacity: 1; transform: translateY(0); }
-`, Gr = F`
+`, Jo = oo`
   from { opacity: 0; transform: translateY(-12px); }
   to   { opacity: 1; transform: translateY(0); }
-`, Jr = F`
+`, Qo = oo`
   from { opacity: 1; }
   to   { opacity: 0; }
-`, Xr = i.div`
-  position: fixed;
-  z-index: ${({ theme: o }) => o.zIndex.toast};
+`, go = (o, r, n) => t`
+  background: ${r};
+  border: ${o.brutalism.borderWidth} solid ${n};
+  box-shadow: ${o.brutalism.shadowOffset} ${o.brutalism.shadowOffset}
+    0 ${n};
+`;
+function Zo(o, r) {
+  return r.brutalism ? {
+    success: go(
+      r,
+      r.colors.success[50],
+      r.colors.success[500]
+    ),
+    error: go(
+      r,
+      r.colors.error[50],
+      r.colors.error[500]
+    ),
+    warning: go(
+      r,
+      r.colors.warning[50],
+      r.colors.warning[500]
+    ),
+    info: go(r, r.colors.info[50], r.colors.info[500])
+  }[o] : {
+    success: t`
+      background: ${r.colors.success[50]};
+      border-left: ${r.spacing[1]} 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: ${r.spacing[1]} 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: ${r.spacing[1]} 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: ${r.spacing[1]} solid ${r.colors.info[500]};
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    `
+  }[o];
+}
+const or = t`
   display: flex;
   align-items: center;
   gap: ${({ theme: o }) => o.spacing[3]};
@@ -1106,85 +1426,89 @@ const qr = F`
   max-width: 400px;
   padding: ${({ theme: o }) => `${o.spacing[3]} ${o.spacing[4]}`};
   border-radius: ${({ theme: o }) => o.radius.md};
+`, Wn = {
+  "bottom-right": t`
+    bottom: 24px;
+    right: 24px;
+  `,
+  "bottom-left": t`
+    bottom: 24px;
+    left: 24px;
+  `,
+  "top-right": t`
+    top: 24px;
+    right: 24px;
+  `,
+  "top-left": t`
+    top: 24px;
+    left: 24px;
+  `
+}, Dn = i.div`
+  position: fixed;
+  z-index: ${({ theme: o }) => o.zIndex.toast};
+  ${or}
+
   animation: ${({ $closing: o, $position: r }) => o ? t`
-          ${Jr} 0.2s ease forwards
+          ${Qo} 0.2s ease forwards
         ` : r.startsWith("top") ? t`
-            ${Gr} 0.2s ease forwards
+            ${Jo} 0.2s ease forwards
+          ` : t`
+            ${Xo} 0.2s ease forwards
+          `};
+
+  ${({ $position: o }) => Wn[o]}
+  ${({ $variant: o, theme: r }) => Zo(o, r)}
+`, En = i.div`
+  ${or}
+  pointer-events: all;
+
+  animation: ${({ $closing: o, $isTop: r }) => o ? t`
+          ${Qo} 0.2s ease forwards
+        ` : r ? t`
+            ${Jo} 0.2s ease forwards
           ` : t`
-            ${qr} 0.2s ease forwards
+            ${Xo} 0.2s ease forwards
           `};
 
+  ${({ $variant: o, theme: r }) => Zo(o, r)}
+`, On = i.div`
+  position: fixed;
+  z-index: ${({ theme: o }) => o.zIndex.toast};
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: o }) => o.spacing[2]};
+  pointer-events: none;
+
   ${({ $position: o, theme: r }) => ({
   "bottom-right": t`
         bottom: ${r.spacing[6]};
         right: ${r.spacing[6]};
+        align-items: flex-end;
       `,
   "bottom-left": t`
         bottom: ${r.spacing[6]};
         left: ${r.spacing[6]};
+        align-items: flex-start;
       `,
   "top-right": t`
         top: ${r.spacing[6]};
         right: ${r.spacing[6]};
+        align-items: flex-end;
       `,
   "top-left": t`
         top: ${r.spacing[6]};
         left: ${r.spacing[6]};
+        align-items: flex-start;
       `
 })[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`
+`, rr = i.p`
   flex: 1;
   margin: 0;
   font-size: ${({ theme: o }) => o.fontSizes.sm};
-  font-weight: ${({ theme: o }) => o.brutalism ? 600 : 400};
+  font-weight: ${({ theme: o }) => o.brutalism ? o.fontWeights.semibold : o.fontWeights.normal};
   line-height: 1.5;
   color: ${({ theme: o }) => o.colors.neutral[900]};
-`, on = i.button`
+`, nr = i.button`
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
@@ -1207,110 +1531,143 @@ const qr = F`
     outline-offset: 2px;
   }
 `;
-function Do({
+function Mn({
   open: o,
   onClose: r,
   message: n,
-  variant: e = "info",
-  duration: l = 4e3,
-  position: a = "bottom-right"
+  variant: s = "info",
+  duration: a = 4e3,
+  position: l = "bottom-right"
 }) {
-  const [c, d] = D(o), [p, $] = D(!1);
-  return A(() => {
+  const [d, p] = T(o), [u, f] = T(!1);
+  return B(() => {
     if (o)
-      d(!0), $(!1);
-    else if (c) {
-      $(!0);
+      p(!0), f(!1);
+    else if (d) {
+      f(!0);
       const g = setTimeout(() => {
-        d(!1), $(!1);
+        p(!1), f(!1);
       }, 200);
       return () => {
         clearTimeout(g);
       };
     }
-  }, [o, c]), A(() => {
-    if (!o || l === 0)
+  }, [o, d]), B(() => {
+    if (!o || a === 0)
       return;
-    const g = setTimeout(r, l);
+    const g = setTimeout(r, a);
     return () => {
       clearTimeout(g);
     };
-  }, [o, l, r]), c ? Co(
-    /* @__PURE__ */ k(
-      Zr,
+  }, [o, a, r]), d ? xo(
+    /* @__PURE__ */ S(
+      Dn,
       {
-        $position: a,
-        $variant: e,
-        $closing: p,
+        $position: l,
+        $variant: s,
+        $closing: u,
         role: "alert",
         "aria-live": "polite",
         children: [
-          /* @__PURE__ */ s(Qr, { children: n }),
-          /* @__PURE__ */ s(on, { onClick: r, "aria-label": "Close notification", children: /* @__PURE__ */ s(co, { size: 14, strokeWidth: 2.5 }) })
+          /* @__PURE__ */ e(rr, { children: n }),
+          /* @__PURE__ */ e(nr, { onClick: r, "aria-label": "Close notification", children: /* @__PURE__ */ e(yo, { size: 14, strokeWidth: 2.5 }) })
         ]
       }
     ),
     document.body
   ) : null;
 }
-Do.displayName = "Toast";
-const Mo = ao(null);
-function yt({ children: o }) {
-  const [r, n] = D(null), e = V((a) => {
-    n({ ...a, id: Date.now() });
-  }, []), 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__ */ k(Mo.Provider, { value: { toast: l }, children: [
+Mn.displayName = "Toast";
+const tr = Wo(null), Vo = 5, Ln = "bottom-right";
+function Nn({
+  toast: o,
+  isTop: r,
+  onClose: n
+}) {
+  return B(() => {
+    const s = o.duration ?? 4e3;
+    if (s === 0)
+      return;
+    const a = setTimeout(() => n(o.id), s);
+    return () => clearTimeout(a);
+  }, [o.id, o.duration, n]), /* @__PURE__ */ S(
+    En,
+    {
+      $variant: o.variant ?? "info",
+      $closing: o.closing,
+      $isTop: r,
+      role: "alert",
+      "aria-live": "polite",
+      children: [
+        /* @__PURE__ */ e(rr, { children: o.message }),
+        /* @__PURE__ */ e(
+          nr,
+          {
+            onClick: () => n(o.id),
+            "aria-label": "Close notification",
+            children: /* @__PURE__ */ e(yo, { size: 14, strokeWidth: 2.5 })
+          }
+        )
+      ]
+    }
+  );
+}
+function xs({ children: o }) {
+  const [r, n] = T([]), s = X((u) => {
+    n(
+      (f) => f.map(
+        (g) => g.id === u ? { ...g, closing: !0 } : g
+      )
+    ), setTimeout(() => {
+      n(
+        (f) => f.filter((g) => g.id !== u)
+      );
+    }, 200);
+  }, []), a = X((u) => {
+    const f = Date.now();
+    n((g) => {
+      const m = [...g, { ...u, id: f, closing: !1 }];
+      return m.length > Vo ? m.slice(m.length - Vo) : m;
+    });
+  }, []), l = Do(() => Object.assign((u) => a(u), {
+    success: (u, f) => a({ ...f, message: u, variant: "success" }),
+    error: (u, f) => a({ ...f, message: u, variant: "error" }),
+    warning: (u, f) => a({ ...f, message: u, variant: "warning" }),
+    info: (u, f) => a({ ...f, message: u, variant: "info" })
+  }), [a]), d = r[r.length - 1]?.position ?? Ln, p = d.startsWith("top");
+  return /* @__PURE__ */ S(tr.Provider, { value: { toast: l }, children: [
     o,
-    r && /* @__PURE__ */ s(
-      Do,
-      {
-        open: !0,
-        onClose: () => n(null),
-        message: r.message,
-        variant: r.variant,
-        duration: r.duration,
-        position: r.position
-      },
-      r.id
+    r.length > 0 && xo(
+      /* @__PURE__ */ e(On, { $position: d, children: r.map((u) => /* @__PURE__ */ e(
+        Nn,
+        {
+          toast: u,
+          isTop: p,
+          onClose: s
+        },
+        u.id
+      )) }),
+      document.body
     )
   ] });
 }
-function ht() {
-  const o = io(Mo);
+function ys() {
+  const o = To(tr);
   if (!o)
     throw new Error("useToast must be used within a ToastProvider");
   return o;
 }
-const rn = i.form`
+const Pn = 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,
+function Rn({ onSubmit: o, children: r, ...n }) {
+  return /* @__PURE__ */ e(
+    Pn,
     {
-      onSubmit: (e) => {
-        e.preventDefault(), o?.(e);
+      onSubmit: (s) => {
+        s.preventDefault(), o?.(s);
       },
       noValidate: !0,
       ...n,
@@ -1318,118 +1675,499 @@ function an({ onSubmit: o, children: r, ...n }) {
     }
   );
 }
-an.displayName = "Form";
-function ln({
+Rn.displayName = "Form";
+const Vn = i.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: o }) => o.spacing[1]};
+`, Fn = i.label`
+  font-size: ${({ theme: o }) => o.fontSizes.sm};
+  font-weight: ${({ theme: o }) => o.fontWeights.medium};
+  color: ${({ theme: o }) => o.colors.neutral[900]};
+`, An = i.span`
+  color: ${({ theme: o }) => o.colors.error[500]};
+  margin-left: ${({ theme: o }) => o.spacing[0.5]};
+`, Bn = i.span`
+  font-size: ${({ theme: o }) => o.fontSizes.xs};
+  color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
+`;
+function sr({
   label: o,
   error: r,
   helperText: n,
-  required: e,
-  children: l
+  required: s,
+  children: a
 }) {
-  const a = R(), c = `${a}-hint`, d = !!(r || n), p = typeof r == "string" ? r : void 0, $ = po.isValidElement(l) ? po.cloneElement(
-    l,
+  const l = ro(), d = `${l}-hint`, p = !!(r || n), u = typeof r == "string" ? r : void 0, f = Mo.isValidElement(a) ? Mo.cloneElement(
+    a,
     {
-      id: a,
-      ...d && { "aria-describedby": c },
+      id: l,
+      ...p && { "aria-describedby": d },
       ...r && { "aria-invalid": !0 }
     }
-  ) : l;
-  return /* @__PURE__ */ k(nn, { children: [
-    o && /* @__PURE__ */ k(tn, { htmlFor: a, children: [
+  ) : a;
+  return /* @__PURE__ */ S(Vn, { children: [
+    o && /* @__PURE__ */ S(Fn, { htmlFor: l, children: [
       o,
-      e && /* @__PURE__ */ s(sn, { "aria-hidden": "true", children: " *" })
+      s && /* @__PURE__ */ e(An, { "aria-hidden": "true", children: " *" })
     ] }),
-    $,
-    d && /* @__PURE__ */ s(en, { id: c, $error: !!r, children: p ?? n })
+    f,
+    p && /* @__PURE__ */ e(Bn, { id: d, $error: !!r, children: u ?? n })
   ] });
 }
-ln.displayName = "FormField";
-function wt({
+sr.displayName = "FormField";
+function hs({
   initialValues: o,
   validate: r,
   onSubmit: n,
-  onError: e
+  onError: s
 }) {
-  const [l, a] = D(o), [c, d] = D(
+  const [a, l] = T(o), [d, p] = T(
     {}
-  ), [p, $] = D({}), [g, w] = D(!1), x = j(l);
-  x.current = l;
-  const f = V(
-    (I) => {
+  ), [u, f] = T({}), [g, m] = T(!1), v = Y(a);
+  v.current = a;
+  const h = X(
+    (w) => {
       if (!r)
         return {};
-      const S = r(I);
+      const b = r(w);
       return Object.fromEntries(
-        Object.entries(S).filter(([, T]) => T !== void 0)
+        Object.entries(b).filter(([, z]) => z !== void 0)
       );
     },
     [r]
-  ), y = j(p);
-  y.current = p;
-  const h = V(
-    (I) => {
-      const { name: S, value: T } = I.target;
-      process.env.NODE_ENV !== "production" && !S && console.warn(
+  ), k = Y(u);
+  k.current = u;
+  const C = X(
+    (w) => {
+      const { name: b, value: z } = w.target;
+      process.env.NODE_ENV !== "production" && !b && console.warn(
         "[useForm] handleChange: field is missing a `name` attribute — value will not be tracked."
       );
-      const M = { ...x.current, [S]: T };
-      a(M), y.current[S] && d(f(M));
+      const D = { ...v.current, [b]: z };
+      l(D), k.current[b] && p(h(D));
     },
-    [f]
-  ), z = V(
-    (I) => {
-      const { name: S } = I.target;
-      process.env.NODE_ENV !== "production" && !S && console.warn(
+    [h]
+  ), M = X(
+    (w) => {
+      const { name: b } = w.target;
+      process.env.NODE_ENV !== "production" && !b && console.warn(
         "[useForm] handleBlur: field is missing a `name` attribute — touched state will not be tracked."
-      ), $((T) => ({ ...T, [S]: !0 })), d(f(x.current));
+      ), f((z) => ({ ...z, [b]: !0 })), p(h(v.current));
     },
-    [f]
-  ), W = V(
-    (I) => {
-      I?.preventDefault();
-      const S = Object.keys(x.current).reduce(
-        (P, O) => ({ ...P, [O]: !0 }),
+    [h]
+  ), P = X(
+    (w) => {
+      w?.preventDefault();
+      const b = Object.keys(v.current).reduce(
+        (W, N) => ({ ...W, [N]: !0 }),
         {}
       );
-      $(S);
-      const T = f(x.current);
-      if (d(T), Object.keys(T).length > 0) {
-        e?.(T);
+      f(b);
+      const z = h(v.current);
+      if (p(z), Object.keys(z).length > 0) {
+        s?.(z);
         return;
       }
       (async () => {
-        w(!0);
+        m(!0);
         try {
-          await n?.(x.current);
+          await n?.(v.current);
         } finally {
-          w(!1);
+          m(!1);
         }
       })();
     },
-    [f, n, e]
-  ), v = V((I, S) => {
-    a((T) => ({ ...T, [I]: S }));
-  }, []), b = V(
-    (I) => {
-      a(I ?? o), d({}), $({}), w(!1);
+    [h, n, s]
+  ), L = X((w, b) => {
+    l((z) => ({ ...z, [w]: b }));
+  }, []), x = X(
+    (w) => {
+      l(w ?? o), p({}), f({}), m(!1);
     },
     [o]
-  ), C = Object.fromEntries(
-    Object.entries(c).filter(([I]) => p[I])
+  ), I = Object.fromEntries(
+    Object.entries(d).filter(([w]) => u[w])
   );
   return {
-    values: l,
-    errors: C,
-    touched: p,
-    handleChange: h,
-    handleBlur: z,
-    handleSubmit: W,
-    setFieldValue: v,
-    reset: b,
+    values: a,
+    errors: I,
+    touched: u,
+    handleChange: C,
+    handleBlur: M,
+    handleSubmit: P,
+    setFieldValue: L,
+    reset: x,
     isSubmitting: g
   };
 }
-const cn = i.div`
+const ws = (o = "Required") => (r) => {
+  if (!r.trim())
+    return o;
+}, ms = (o, r) => (n) => {
+  if (n.length < o)
+    return r ?? `Must be at least ${o} characters`;
+}, vs = (o, r) => (n) => {
+  if (n.length > o)
+    return r ?? `Must be at most ${o} characters`;
+}, ks = (o = "Enter a valid email") => (r) => {
+  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r))
+    return o;
+}, Ss = (o = "Enter a valid URL") => (r) => {
+  try {
+    new URL(r);
+    return;
+  } catch {
+    return o;
+  }
+}, zs = (o, r) => (n) => {
+  if (!o.test(n))
+    return r;
+};
+function Cs(...o) {
+  return (r) => {
+    for (const n of o) {
+      const s = n(r);
+      if (s !== void 0)
+        return s;
+    }
+  };
+}
+const _n = i.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: o }) => o.spacing[1]};
+`, jn = i.label`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ theme: o }) => o.spacing[2]};
+  cursor: ${({ $disabled: o }) => o ? "not-allowed" : "pointer"};
+  opacity: ${({ $disabled: o }) => o ? 0.6 : 1};
+`, Hn = i.input`
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+
+  &:focus-visible + div {
+    box-shadow: ${({ theme: o }) => o.shadows.focusRing};
+  }
+`, Yn = i.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: ${({ theme: o }) => o.radius.md};
+  border: ${({ theme: o }) => o.brutalism?.borderWidth ?? "2px"} solid
+    ${({ $error: o, $borderColor: r, theme: n }) => o ? n.colors.error[500] : r ?? n.colors.neutral[900]};
+  background-color: ${({ $checked: o, $color: r, theme: n }) => o ? r ?? n.colors.primary[500] : n.colors.neutral[0]};
+  transition:
+    background-color 0.1s,
+    border-color 0.1s;
+
+  ${({ $size: o = "md", theme: r }) => ({
+  sm: t`
+        width: ${r.spacing[4]};
+        height: ${r.spacing[4]};
+      `,
+  md: t`
+        width: ${r.spacing[5]};
+        height: ${r.spacing[5]};
+      `
+})[o]}
+
+  ${({ $checked: o, $checkColor: r }) => o && t`
+      &::after {
+        content: "";
+        display: block;
+        width: 5px;
+        height: 9px;
+        border: 2px solid ${r ?? "currentColor"};
+        border-top: none;
+        border-left: none;
+        transform: rotate(45deg) translate(-1px, -1px);
+      }
+    `}
+`, Un = i.span`
+  font-size: ${({ $size: o = "md", theme: r }) => o === "sm" ? r.fontSizes.sm : r.fontSizes.md};
+  font-weight: ${({ theme: o }) => o.fontWeights.medium};
+`, Kn = i.span`
+  font-size: ${({ theme: o }) => o.fontSizes.xs};
+  color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
+`;
+function qn({
+  ref: o,
+  label: r,
+  size: n = "md",
+  error: s,
+  helperText: a,
+  disabled: l,
+  checked: d,
+  id: p,
+  color: u,
+  borderColor: f,
+  checkColor: g,
+  ...m
+}) {
+  const v = ro(), h = p ?? v, k = typeof s == "string" ? s : void 0, C = !!(a || s);
+  return /* @__PURE__ */ S(_n, { children: [
+    /* @__PURE__ */ S(jn, { htmlFor: h, $disabled: l, children: [
+      /* @__PURE__ */ e(
+        Hn,
+        {
+          id: h,
+          ref: o,
+          type: "checkbox",
+          checked: d,
+          disabled: l,
+          "aria-invalid": !!s,
+          ...m
+        }
+      ),
+      /* @__PURE__ */ e(
+        Yn,
+        {
+          $checked: d,
+          $error: !!s,
+          $disabled: l,
+          $size: n,
+          $color: u,
+          $borderColor: f,
+          $checkColor: g
+        }
+      ),
+      r && /* @__PURE__ */ e(Un, { $size: n, children: r })
+    ] }),
+    C && /* @__PURE__ */ e(Kn, { $error: !!s, children: k ?? a })
+  ] });
+}
+qn.displayName = "Checkbox";
+const Gn = i.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: o }) => o.spacing[1]};
+`, Xn = i.label`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ theme: o }) => o.spacing[2]};
+  cursor: ${({ $disabled: o }) => o ? "not-allowed" : "pointer"};
+  opacity: ${({ $disabled: o }) => o ? 0.6 : 1};
+`, Jn = i.input`
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+
+  &:focus-visible + div {
+    box-shadow: ${({ theme: o }) => o.shadows.focusRing};
+  }
+`, Qn = i.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 50%;
+  border: ${({ theme: o }) => o.brutalism?.borderWidth ?? "2px"} solid
+    ${({ $error: o, $borderColor: r, theme: n }) => o ? n.colors.error[500] : r ?? n.colors.neutral[900]};
+  background-color: ${({ theme: o }) => o.colors.neutral[0]};
+  transition:
+    background-color 0.1s,
+    border-color 0.1s;
+
+  ${({ $size: o = "md", theme: r }) => ({
+  sm: t`
+        width: ${r.spacing[4]};
+        height: ${r.spacing[4]};
+      `,
+  md: t`
+        width: ${r.spacing[5]};
+        height: ${r.spacing[5]};
+      `
+})[o]}
+
+  ${({ $checked: o, $color: r, theme: n }) => o && t`
+      &::after {
+        content: "";
+        display: block;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: ${r ?? n.colors.primary[500]};
+      }
+    `}
+`, Zn = i.span`
+  font-size: ${({ $size: o = "md", theme: r }) => o === "sm" ? r.fontSizes.sm : r.fontSizes.md};
+  font-weight: ${({ theme: o }) => o.fontWeights.medium};
+`, ot = i.span`
+  font-size: ${({ theme: o }) => o.fontSizes.xs};
+  color: ${({ $error: o, theme: r }) => o ? r.colors.error[500] : r.colors.neutral[500]};
+`;
+function rt({
+  ref: o,
+  label: r,
+  size: n = "md",
+  error: s,
+  helperText: a,
+  disabled: l,
+  checked: d,
+  id: p,
+  color: u,
+  borderColor: f,
+  ...g
+}) {
+  const m = ro(), v = p ?? m, h = !!(a || s);
+  return /* @__PURE__ */ S(Gn, { children: [
+    /* @__PURE__ */ S(Xn, { htmlFor: v, $disabled: l, children: [
+      /* @__PURE__ */ e(
+        Jn,
+        {
+          id: v,
+          ref: o,
+          type: "radio",
+          checked: d,
+          disabled: l,
+          "aria-invalid": !!s,
+          ...g
+        }
+      ),
+      /* @__PURE__ */ e(
+        Qn,
+        {
+          $checked: d,
+          $error: s,
+          $disabled: l,
+          $size: n,
+          $color: u,
+          $borderColor: f
+        }
+      ),
+      r && /* @__PURE__ */ e(Zn, { $size: n, children: r })
+    ] }),
+    h && /* @__PURE__ */ e(ot, { $error: s, children: a })
+  ] });
+}
+rt.displayName = "Radio";
+const nt = i.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: o }) => o.spacing[1]};
+`, tt = i.label`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ theme: o }) => o.spacing[2]};
+  cursor: ${({ $disabled: o }) => o ? "not-allowed" : "pointer"};
+  opacity: ${({ $disabled: o }) => o ? 0.6 : 1};
+`, st = i.input`
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+
+  &:focus-visible + div {
+    box-shadow: ${({ theme: o }) => o.shadows.focusRing};
+  }
+`, et = i.div`
+  position: relative;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  border: ${({ theme: o }) => o.brutalism?.borderWidth ?? "2px"} solid
+    ${({ $borderColor: o, theme: r }) => o ?? r.colors.neutral[900]};
+  background-color: ${({ $checked: o, $color: r, theme: n }) => o ? r ?? n.colors.primary[500] : n.colors.neutral[200]};
+  transition:
+    background-color 0.15s,
+    box-shadow 0.15s;
+
+  ${({ $checked: o, theme: r }) => o && t`
+      box-shadow: ${r.brutalism?.shadowOffset ?? "4px"}
+        ${r.brutalism?.shadowOffset ?? "4px"} 0 ${r.colors.neutral[900]};
+    `}
+
+  ${({ $size: o = "md" }) => ({
+  sm: t`
+        width: 36px;
+        height: 20px;
+      `,
+  md: t`
+        width: 44px;
+        height: 24px;
+      `
+})[o]}
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    border-radius: 50%;
+    background-color: ${({ theme: o }) => o.colors.neutral[0]};
+    border: 2px solid ${({ theme: o }) => o.colors.neutral[900]};
+    transition: transform 0.15s;
+
+    ${({ $size: o = "md", $checked: r }) => {
+  const n = t`
+        width: 12px;
+        height: 12px;
+        margin-top: -6px;
+        transform: translateX(${r ? "calc(100% + 4px)" : "2px"});
+      `, s = t`
+        width: 16px;
+        height: 16px;
+        margin-top: -8px;
+        transform: translateX(${r ? "calc(100% + 4px)" : "2px"});
+      `;
+  return o === "sm" ? n : s;
+}}
+  }
+`, it = i.span`
+  font-size: ${({ $size: o = "md", theme: r }) => o === "sm" ? r.fontSizes.sm : r.fontSizes.md};
+  font-weight: ${({ theme: o }) => o.fontWeights.medium};
+`;
+function at({
+  ref: o,
+  label: r,
+  size: n = "md",
+  disabled: s,
+  checked: a,
+  id: l,
+  color: d,
+  borderColor: p,
+  ...u
+}) {
+  const f = ro(), g = l ?? f;
+  return /* @__PURE__ */ e(nt, { children: /* @__PURE__ */ S(tt, { htmlFor: g, $disabled: s, children: [
+    /* @__PURE__ */ e(
+      st,
+      {
+        id: g,
+        ref: o,
+        type: "checkbox",
+        role: "switch",
+        checked: a,
+        disabled: s,
+        ...u
+      }
+    ),
+    /* @__PURE__ */ e(
+      et,
+      {
+        $checked: a,
+        $size: n,
+        $color: d,
+        $borderColor: p
+      }
+    ),
+    r && /* @__PURE__ */ e(it, { $size: n, children: r })
+  ] }) });
+}
+at.displayName = "Switch";
+const lt = i.div`
   border-radius: ${({ theme: o }) => o.radius.md};
   background: ${({ theme: o }) => o.colors.neutral[0]};
   overflow: hidden;
@@ -1444,7 +2182,7 @@ const cn = i.div`
           border: 1px solid ${r ?? o.colors.neutral[200]};
           box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
         `}
-`, dn = i.button`
+`, ct = i.button`
   width: 100%;
   display: flex;
   align-items: flex-start;
@@ -1464,19 +2202,19 @@ const cn = i.div`
       ${({ theme: o, $accentColor: r }) => r ?? o.colors.primary[500]};
     outline-offset: -2px;
   }
-`, un = i.div`
+`, dt = i.div`
   flex: 1;
   min-width: 0;
-`, pn = i.span`
+`, ut = i.span`
   display: block;
   font-size: ${({ theme: o }) => o.fontSizes.md};
-  font-weight: 600;
+  font-weight: ${({ theme: o }) => o.fontWeights.semibold};
   color: ${({ theme: o }) => o.colors.neutral[900]};
-`, fn = i.span`
+`, pt = i.span`
   display: block;
   font-size: ${({ theme: o }) => o.fontSizes.sm};
   color: ${({ theme: o }) => o.colors.neutral[500]};
-`, $n = i.div`
+`, ft = i.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -1488,11 +2226,11 @@ const cn = i.div`
     align-items: flex-start;
     gap: ${({ theme: o }) => o.spacing[2]};
   }
-`, gn = i.div`
+`, $t = i.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: o }) => o.spacing[2]};
-`, bn = i.span`
+`, gt = i.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1500,156 +2238,167 @@ const cn = i.div`
   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`
+`, bt = i.div`
   display: grid;
   grid-template-rows: ${({ $open: o }) => o ? "1fr" : "0fr"};
   transition: grid-template-rows 0.2s ease;
-`, yn = i.div`
+`, xt = i.div`
   overflow: hidden;
-`, hn = i.div`
+`, yt = i.div`
   padding: ${({ theme: o }) => o.spacing[4]};
   border-top: 1px solid ${({ theme: o }) => o.colors.neutral[200]};
 `;
-function wn({
+function ht({
   title: o,
   children: r,
   defaultOpen: n = !1,
-  open: e,
-  onToggle: l,
-  subtitle: a,
-  headerActions: c,
-  accentColor: d
+  open: s,
+  onToggle: a,
+  subtitle: l,
+  headerActions: d,
+  accentColor: p
 }) {
-  const [p, $] = D(n), g = R(), w = e !== void 0, x = w ? e : p;
-  return /* @__PURE__ */ k(cn, { $accentColor: d, children: [
-    /* @__PURE__ */ k(
-      dn,
+  const [u, f] = T(n), g = ro(), m = s !== void 0, v = m ? s : u;
+  return /* @__PURE__ */ S(lt, { $accentColor: p, children: [
+    /* @__PURE__ */ S(
+      ct,
       {
         type: "button",
-        $open: x,
-        $accentColor: d,
-        "aria-expanded": x,
+        $open: v,
+        $accentColor: p,
+        "aria-expanded": v,
         "aria-controls": g,
         onClick: () => {
-          const y = !x;
-          w || $(y), l?.(y);
+          const k = !v;
+          m || f(k), a?.(k);
         },
         children: [
-          /* @__PURE__ */ k(un, { children: [
-            /* @__PURE__ */ s(pn, { children: o }),
-            (a || c) && /* @__PURE__ */ k($n, { children: [
-              a && /* @__PURE__ */ s(fn, { children: a }),
-              c && /* @__PURE__ */ s(gn, { onClick: (y) => y.stopPropagation(), children: c })
+          /* @__PURE__ */ S(dt, { children: [
+            /* @__PURE__ */ e(ut, { children: o }),
+            (l || d) && /* @__PURE__ */ S(ft, { children: [
+              l && /* @__PURE__ */ e(pt, { children: l }),
+              d && /* @__PURE__ */ e($t, { onClick: (k) => k.stopPropagation(), children: d })
             ] })
           ] }),
-          /* @__PURE__ */ s(
-            bn,
+          /* @__PURE__ */ e(
+            gt,
             {
-              $open: x,
-              $accentColor: d,
+              $open: v,
+              $accentColor: p,
               "aria-hidden": "true",
-              children: /* @__PURE__ */ s(zo, { size: 18, strokeWidth: 2.5 })
+              children: /* @__PURE__ */ e(Ko, { size: 18, strokeWidth: 2.5 })
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ s(xn, { $open: x, children: /* @__PURE__ */ s(yn, { id: g, role: "region", "aria-label": o, children: /* @__PURE__ */ s(hn, { children: r }) }) })
+    /* @__PURE__ */ e(bt, { $open: v, children: /* @__PURE__ */ e(xt, { id: g, role: "region", "aria-label": o, children: /* @__PURE__ */ e(yt, { children: r }) }) })
   ] });
 }
-wn.displayName = "CollapsibleCard";
-const mn = F`
+ht.displayName = "CollapsibleCard";
+const wt = oo`
   to { transform: rotate(360deg); }
-`, vn = {
+`, mt = {
   sm: "16px",
   md: "24px",
   lg: "40px"
-}, kn = {
+}, vt = {
   thin: "2px",
   normal: "3px",
   bold: "5px"
-}, Cn = i.span`
+}, kt = i.span`
   display: inline-block;
   border-radius: 50%;
-  animation: ${mn} 0.7s linear infinite;
+  animation: ${wt} 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];
+  ${({ $size: o = "md", $weight: r = "normal", $color: n, theme: s }) => {
+  const a = mt[o], l = vt[r], d = s.colors.neutral[200], p = n ?? s.colors.primary[500];
   return t`
-      width: ${l};
-      height: ${l};
-      border: ${a} solid ${c};
-      border-top-color: ${d};
+      width: ${a};
+      height: ${a};
+      border: ${l} solid ${d};
+      border-top-color: ${p};
     `;
 }}
 `;
-function Sn({
+function St({
   size: o = "md",
   weight: r = "normal",
   color: n,
-  label: e = "Loading..."
+  label: s = "Loading..."
 }) {
-  return /* @__PURE__ */ s(
-    Cn,
+  return /* @__PURE__ */ e(
+    kt,
     {
       $size: o,
       $weight: r,
       $color: n,
       role: "status",
-      "aria-label": e
+      "aria-label": s
     }
   );
 }
-Sn.displayName = "Spinner";
-function zn(o, r) {
+St.displayName = "Spinner";
+const zt = 7, Fo = 3, Ao = 1;
+function Is({
+  defaultSort: o,
+  defaultPage: r = 1
+} = {}) {
+  const [n, s] = T(o ?? null), [a, l] = T(r);
+  return { sort: n, page: a, onSortChange: (u) => {
+    s(u), l(1);
+  }, onPageChange: (u) => {
+    l(u);
+  } };
+}
+function Ct(o, r) {
   return o?.key !== r ? { key: r, direction: "asc" } : o.direction === "asc" ? { key: r, direction: "desc" } : null;
 }
-function Tn({
+function It({
   data: o,
   sort: r,
   defaultSort: n,
-  onSortChange: e
+  onSortChange: s
 }) {
-  const l = r !== void 0, [a, c] = D(
+  const a = r !== void 0, [l, d] = T(
     n ?? null
-  ), d = l ? r ?? null : a, p = (g) => {
-    const w = zn(d, g);
-    return l || c(w), e?.(w), w;
-  }, $ = lo(() => l || !d ? o : [...o].sort((g, w) => {
-    const x = g[d.key], f = w[d.key], y = x < f ? -1 : x > f ? 1 : 0;
-    return d.direction === "asc" ? y : -y;
-  }), [o, d, l]);
-  return { activeSort: d, sortedData: $, handleSort: p };
+  ), p = a ? r ?? null : l, u = (g) => {
+    const m = Ct(p, g);
+    return a || d(m), s?.(m), m;
+  }, f = Do(() => a || !p ? o : [...o].sort((g, m) => {
+    const v = g[p.key], h = m[p.key], k = v < h ? -1 : v > h ? 1 : 0;
+    return p.direction === "asc" ? k : -k;
+  }), [o, p, a]);
+  return { activeSort: p, sortedData: f, handleSort: u };
 }
-const In = 7, xo = 3, yo = 1;
-function Dn(o, r) {
-  if (r <= In)
-    return Array.from({ length: r }, (e, l) => l + 1);
+function Tt(o, r) {
+  if (r <= zt)
+    return Array.from({ length: r }, (s, a) => a + 1);
   const n = [1];
-  o > xo && n.push("...");
-  for (let e = Math.max(2, o - yo); e <= Math.min(r - 1, o + yo); e++)
-    n.push(e);
-  return o < r - xo + 1 && n.push("..."), n.push(r), n;
+  o > Fo && n.push("...");
+  for (let s = Math.max(2, o - Ao); s <= Math.min(r - 1, o + Ao); s++)
+    n.push(s);
+  return o < r - Fo + 1 && n.push("..."), n.push(r), n;
 }
-function Mn({
+function Wt({
   data: o,
   pageSize: r,
   page: n,
-  defaultPage: e,
-  totalRows: l,
-  onPageChange: a
+  defaultPage: s,
+  totalRows: a,
+  onPageChange: l
 }) {
-  const c = n !== void 0, [d, p] = D(e ?? 1), $ = c ? n : d, g = (h) => {
-    c || p(h), a?.(h);
-  }, w = c || l !== void 0, x = l ?? o.length, f = r ? Math.max(1, Math.ceil(x / r)) : 1, y = lo(() => {
-    if (!r || w)
+  const d = n !== void 0, [p, u] = T(s ?? 1), f = d ? n : p, g = (C) => {
+    d || u(C), l?.(C);
+  }, m = a !== void 0, v = a ?? o.length, h = r ? Math.max(1, Math.ceil(v / r)) : 1, k = Do(() => {
+    if (!r || m)
       return o;
-    const h = ($ - 1) * r;
-    return o.slice(h, h + r);
-  }, [o, r, $, w]);
-  return { activePage: $, totalPages: f, displayData: y, handlePageChange: g };
+    const C = (f - 1) * r;
+    return o.slice(C, C + r);
+  }, [o, r, f, m]);
+  return { activePage: f, totalPages: h, displayData: k, handlePageChange: g };
 }
-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`
+const er = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg" ? `${r.spacing[3]} ${r.spacing[4]}` : `${r.spacing[2]} ${r.spacing[3]}`, Dt = i.div`
   width: 100%;
 
   ${({ theme: o, $borderColor: r }) => o.brutalism ? t`
@@ -1664,11 +2413,16 @@ const Wo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
           overflow: hidden;
         `}
 
-  overflow-x: auto;
-  ${({ $stickyHeader: o }) => o && t`
-      overflow-y: auto;
-    `}
-`, On = i.table`
+  ${({ $stickyPagination: o }) => o ? t`
+          display: flex;
+          flex-direction: column;
+        ` : t`
+          overflow-x: auto;
+        `}
+`, Et = i.div`
+  overflow: auto;
+  min-height: 0;
+`, Ot = i.table`
   width: 100%;
   border-collapse: collapse;
   font-size: ${({ $size: o, theme: r }) => ({
@@ -1678,9 +2432,9 @@ const Wo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
 })[o]};
 
   caption {
-    padding: 8px 0;
+    padding: ${({ theme: o }) => o.spacing[2]} 0;
   }
-`, Pn = i.thead`
+`, Mt = i.thead`
   ${({ $stickyHeader: o }) => o && t`
       position: sticky;
       top: 0;
@@ -1700,7 +2454,7 @@ const Wo = (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]};
           `}
-`, Nn = i.tbody`
+`, Lt = i.tbody`
   ${({ $rowColor: o }) => o && t`
       tr {
         background-color: ${o};
@@ -1720,7 +2474,7 @@ const Wo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
   tr:hover td {
     background-color: rgba(0, 0, 0, 0.04);
   }
-`, X = i.tr``, En = i(X)`
+`, bo = i.tr``, Nt = i(bo)`
   cursor: pointer;
 
   td {
@@ -1737,14 +2491,14 @@ const Wo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
     box-shadow: inset 4px 0 0
       ${({ $accentColor: o, theme: r }) => o ?? r.colors.neutral[900]};
   }
-`, Ln = i.th`
+`, Pt = i.th`
   background-color: var(--th-bg);
   color: var(--th-text);
   text-align: left;
-  font-weight: 700;
+  font-weight: ${({ theme: o }) => o.fontWeights.bold};
   white-space: nowrap;
 
-  padding: ${({ $size: o, theme: r }) => Wo(o, r)};
+  padding: ${({ $size: o, theme: r }) => er(o, r)};
 
   ${({ theme: o, $bordered: r }) => o.brutalism ? t`` : t`
           border-bottom: 2px solid var(--th-sep);
@@ -1755,7 +2509,7 @@ const Wo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
             }
           `}
         `}
-`, Fn = i.button`
+`, Rt = i.button`
   display: inline-flex;
   align-items: center;
   gap: ${({ theme: o }) => o.spacing[1]};
@@ -1764,7 +2518,7 @@ const Wo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
   cursor: pointer;
   font: inherit;
   color: inherit;
-  font-weight: 700;
+  font-weight: ${({ theme: o }) => o.fontWeights.bold};
   padding: 0;
   width: 100%;
   text-align: left;
@@ -1774,12 +2528,12 @@ const Wo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
     outline-offset: 2px;
     border-radius: 2px;
   }
-`, Bn = i.span`
+`, Vt = i.span`
   opacity: 0.5;
   display: inline-flex;
   align-items: center;
-`, Oo = i.td`
-  padding: ${({ $size: o, theme: r }) => Wo(o, r)};
+`, ir = i.td`
+  padding: ${({ $size: o, theme: r }) => er(o, r)};
 
   ${({ $bordered: o, $borderColor: r, theme: n }) => n.brutalism ? t`
           border-bottom: ${n.brutalism.borderWidth} solid
@@ -1797,16 +2551,16 @@ const Wo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
             border-bottom: 1px solid
               ${r ?? n.colors.neutral[200]};
           `}
-`, Vn = i.td`
+`, Ft = 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;
-`, _n = F`
+`, At = oo`
   0% { background-position: -400px 0; }
   100% { background-position: 400px 0; }
-`, jn = i(Oo)``, An = i.div`
+`, Bt = i(ir)``, _t = i.div`
   height: 14px;
   border-radius: 4px;
   background: linear-gradient(
@@ -1816,13 +2570,14 @@ const Wo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
     ${({ theme: o }) => o.colors.neutral[200]} 75%
   );
   background-size: 800px 100%;
-  animation: ${_n} 1.6s ease-in-out infinite;
-`, Rn = i.div`
+  animation: ${At} 1.6s ease-in-out infinite;
+`, jt = i.div`
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: ${({ $hasPageSizeOptions: o }) => o ? "space-between" : "center"};
   gap: ${({ theme: o }) => o.spacing[1]};
   padding: ${({ theme: o }) => `${o.spacing[2]} ${o.spacing[3]}`};
+  flex-shrink: 0;
 
   ${({ theme: o }) => o.brutalism ? t`
           border-top: ${o.brutalism.borderWidth} solid
@@ -1830,7 +2585,44 @@ const Wo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
         ` : t`
           border-top: 1px solid ${o.colors.neutral[200]};
         `}
-`, no = i.button`
+`, Ht = i.label`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: o }) => o.spacing[2]};
+  font-size: ${({ theme: o }) => o.fontSizes.sm};
+  color: ${({ theme: o }) => o.colors.neutral[500]};
+  white-space: nowrap;
+
+  select {
+    padding: ${({ theme: o }) => `${o.spacing[1]} ${o.spacing[2]}`};
+    font-size: ${({ theme: o }) => o.fontSizes.sm};
+    font-family: inherit;
+    color: ${({ theme: o }) => o.colors.neutral[900]};
+    background-color: ${({ theme: o }) => o.colors.neutral[0]};
+    cursor: pointer;
+
+    ${({ theme: o }) => o.brutalism ? t`
+            border: ${o.brutalism.borderWidth} solid
+              ${o.colors.neutral[900]};
+          ` : t`
+            border: 1px solid ${o.colors.neutral[300]};
+            border-radius: ${o.radius.md};
+
+            &:hover {
+              border-color: ${o.colors.neutral[400]};
+            }
+
+            &:focus {
+              outline: 2px solid ${o.colors.primary[500]};
+              outline-offset: 1px;
+            }
+          `}
+  }
+`, Yt = i.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: o }) => o.spacing[1]};
+`, vo = i.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1873,212 +2665,210 @@ const Wo = (o, r) => o === "sm" ? `${r.spacing[1]} ${r.spacing[2]}` : o === "lg"
     outline: 2px solid ${({ theme: o }) => o.colors.primary[500]};
     outline-offset: 2px;
   }
-`, 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 });
+`, Ut = 4;
+function Kt(o, r) {
+  return o?.key !== r ? /* @__PURE__ */ e(Vr, { size: 14 }) : o.direction === "asc" ? /* @__PURE__ */ e(Ar, { size: 14 }) : /* @__PURE__ */ e(Pr, { size: 14 });
 }
-function Un({
+function qt({
   columns: o,
   data: r,
   rowKey: n,
-  size: e = "md",
-  striped: l,
-  bordered: a,
-  stickyHeader: c,
-  caption: d,
-  emptyMessage: p = "No data",
-  loading: $,
-  sort: g,
-  defaultSort: w,
-  onSortChange: x,
-  pageSize: f,
-  page: y,
-  defaultPage: h,
-  totalRows: z,
-  onPageChange: W,
-  onChange: v,
+  size: s = "md",
+  striped: a,
+  bordered: l,
+  stickyHeader: d,
+  stickyPagination: p,
+  caption: u,
+  emptyMessage: f = "No data",
+  loading: g,
+  sort: m,
+  defaultSort: v,
+  onSortChange: h,
+  pageSize: k,
+  page: C,
+  defaultPage: M,
+  totalRows: P,
+  onPageChange: L,
+  pageSizeOptions: x,
+  onPageSizeChange: I,
+  onChange: w,
   onRowClick: b,
-  borderColor: C,
-  headerColor: I,
-  rowColor: S,
-  stripeColor: T,
-  className: M,
-  style: P
+  borderColor: z,
+  headerColor: D,
+  rowColor: W,
+  stripeColor: N,
+  className: F,
+  style: _
 }) {
   const {
-    activeSort: O,
-    sortedData: K,
-    handleSort: N
-  } = Tn({
+    activeSort: V,
+    sortedData: U,
+    handleSort: io
+  } = It({
     data: r,
-    sort: g,
-    defaultSort: w,
-    onSortChange: x
+    sort: m,
+    defaultSort: v,
+    onSortChange: h
   }), {
-    activePage: E,
-    totalPages: q,
-    displayData: u,
-    handlePageChange: B
-  } = Mn({
-    data: K,
-    pageSize: f,
-    page: y,
-    defaultPage: h,
-    totalRows: z,
-    onPageChange: W
-  }), Y = (m) => {
-    const L = N(m);
-    v?.({ sort: L, page: E });
-  }, H = (m) => {
-    B(m), v?.({ sort: O, page: m });
-  }, Z = (m, L) => String(n ? m[n] : L), Q = !$ && u.length === 0, Eo = f ?? Yn;
-  return /* @__PURE__ */ k(
-    Wn,
-    {
-      $borderColor: C,
-      $stickyHeader: c,
-      className: M,
-      style: P,
-      children: [
-        /* @__PURE__ */ k(On, { $size: e, children: [
-          d && /* @__PURE__ */ s("caption", { children: d }),
-          /* @__PURE__ */ s(
-            Pn,
-            {
-              $headerColor: I,
-              $borderColor: C,
-              $stickyHeader: c,
-              children: /* @__PURE__ */ s(X, { children: o.map((m) => /* @__PURE__ */ s(
-                Ln,
-                {
-                  $size: e,
-                  $bordered: a,
-                  scope: "col",
-                  style: m.width ? { width: m.width } : void 0,
-                  children: m.sortable ? /* @__PURE__ */ k(
-                    Fn,
-                    {
-                      type: "button",
-                      onClick: () => Y(m.key),
-                      "aria-label": `Sort by ${m.header}${O?.key === m.key ? `, ${O.direction}ending` : ""}`,
-                      children: [
-                        m.header,
-                        /* @__PURE__ */ s(Bn, { "aria-hidden": "true", children: Hn(O, m.key) })
-                      ]
-                    }
-                  ) : m.header
-                },
-                m.key
-              )) })
-            }
-          ),
-          /* @__PURE__ */ s(
-            Nn,
-            {
-              $striped: l,
-              $rowColor: S,
-              $stripeColor: T,
-              children: $ ? Array.from({ length: Eo }).map((m, L) => /* @__PURE__ */ s(X, { children: o.map((uo) => /* @__PURE__ */ s(
-                jn,
-                {
-                  $size: e,
-                  $bordered: a,
-                  $borderColor: C,
-                  children: /* @__PURE__ */ s(An, {})
-                },
-                uo.key
-              )) }, L)) : Q ? /* @__PURE__ */ s("tr", { children: /* @__PURE__ */ s(Vn, { colSpan: o.length, children: p }) }) : u.map((m, L) => /* @__PURE__ */ s(
-                b ? En : X,
-                {
-                  onClick: b ? () => b(m) : void 0,
-                  $accentColor: b ? C : void 0,
-                  children: o.map((G) => /* @__PURE__ */ s(
-                    Oo,
-                    {
-                      $size: e,
-                      $bordered: a,
-                      $borderColor: C,
-                      children: G.render ? G.render(m[G.key], m, L) : String(m[G.key] ?? "") || " "
-                    },
-                    G.key
-                  ))
-                },
-                Z(m, L)
-              ))
-            }
-          )
-        ] }),
-        f && q > 1 && /* @__PURE__ */ k(Rn, { children: [
-          /* @__PURE__ */ s(
-            no,
-            {
-              type: "button",
-              onClick: () => H(E - 1),
-              disabled: E <= 1,
-              "aria-label": "Previous page",
-              children: "←"
-            }
-          ),
-          Dn(E, q).map(
-            (m, L) => m === "..." ? /* @__PURE__ */ s(
-              "span",
-              {
-                "aria-hidden": "true",
-                style: { padding: "0 4px" },
-                children: "…"
-              },
-              `e${L}`
-            ) : /* @__PURE__ */ s(
-              no,
+    activePage: O,
+    totalPages: H,
+    displayData: ao,
+    handlePageChange: K
+  } = Wt({
+    data: U,
+    pageSize: k,
+    page: C,
+    defaultPage: M,
+    totalRows: P,
+    onPageChange: L
+  }), to = (y) => {
+    const A = io(y);
+    w?.({ sort: A, page: O });
+  }, J = (y) => {
+    K(y), w?.({ sort: V, page: y });
+  }, lo = (y, A) => String(n ? y[n] : A), j = !g && ao.length === 0, q = k ?? Ut, Q = !!k && H > 1, Z = !!x?.length, so = /* @__PURE__ */ S(Ot, { $size: s, children: [
+    u && /* @__PURE__ */ e("caption", { children: u }),
+    /* @__PURE__ */ e(
+      Mt,
+      {
+        $headerColor: D,
+        $borderColor: z,
+        $stickyHeader: d,
+        children: /* @__PURE__ */ e(bo, { children: o.map((y) => /* @__PURE__ */ e(
+          Pt,
+          {
+            $size: s,
+            $bordered: l,
+            scope: "col",
+            style: y.width ? { width: y.width } : void 0,
+            children: y.sortable ? /* @__PURE__ */ S(
+              Rt,
               {
                 type: "button",
-                $active: m === E,
-                onClick: () => H(m),
-                "aria-label": `Page ${m}`,
-                "aria-current": m === E ? "page" : void 0,
-                children: m
-              },
-              m
-            )
-          ),
-          /* @__PURE__ */ s(
-            no,
-            {
-              type: "button",
-              onClick: () => H(E + 1),
-              disabled: E >= q,
-              "aria-label": "Next page",
-              children: "→"
-            }
-          )
-        ] })
+                onClick: () => to(y.key),
+                "aria-label": `Sort by ${y.header}${V?.key === y.key ? `, ${V.direction}ending` : ""}`,
+                children: [
+                  y.header,
+                  /* @__PURE__ */ e(Vt, { "aria-hidden": "true", children: Kt(V, y.key) })
+                ]
+              }
+            ) : y.header
+          },
+          y.key
+        )) })
+      }
+    ),
+    /* @__PURE__ */ e(Lt, { $striped: a, $rowColor: W, $stripeColor: N, children: g ? Array.from({ length: q }).map((y, A) => /* @__PURE__ */ e(bo, { children: o.map((co) => /* @__PURE__ */ e(
+      Bt,
+      {
+        $size: s,
+        $bordered: l,
+        $borderColor: z,
+        children: /* @__PURE__ */ e(_t, {})
+      },
+      co.key
+    )) }, A)) : j ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(Ft, { colSpan: o.length, children: f }) }) : ao.map((y, A) => /* @__PURE__ */ e(
+      b ? Nt : bo,
+      {
+        onClick: b ? () => b(y) : void 0,
+        $accentColor: b ? z : void 0,
+        children: o.map(($) => /* @__PURE__ */ e(
+          ir,
+          {
+            $size: s,
+            $bordered: l,
+            $borderColor: z,
+            children: $.render ? $.render(y[$.key], y, A) : String(y[$.key] ?? "") || " "
+          },
+          $.key
+        ))
+      },
+      lo(y, A)
+    )) })
+  ] }), eo = (Q || Z) && /* @__PURE__ */ S(jt, { $hasPageSizeOptions: Z, children: [
+    Z && /* @__PURE__ */ S(Ht, { children: [
+      "Rows per page:",
+      /* @__PURE__ */ e(
+        "select",
+        {
+          value: k,
+          onChange: (y) => I?.(Number(y.target.value)),
+          "aria-label": "Rows per page",
+          children: x.map((y) => /* @__PURE__ */ e("option", { value: y, children: y }, y))
+        }
+      )
+    ] }),
+    Q && /* @__PURE__ */ S(Yt, { children: [
+      /* @__PURE__ */ e(
+        vo,
+        {
+          type: "button",
+          onClick: () => J(O - 1),
+          disabled: O <= 1,
+          "aria-label": "Previous page",
+          children: "←"
+        }
+      ),
+      Tt(O, H).map(
+        (y, A) => y === "..." ? /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: { padding: "0 4px" },
+            children: "…"
+          },
+          `e${A}`
+        ) : /* @__PURE__ */ e(
+          vo,
+          {
+            type: "button",
+            $active: y === O,
+            onClick: () => J(y),
+            "aria-label": `Page ${y}`,
+            "aria-current": y === O ? "page" : void 0,
+            children: y
+          },
+          y
+        )
+      ),
+      /* @__PURE__ */ e(
+        vo,
+        {
+          type: "button",
+          onClick: () => J(O + 1),
+          disabled: O >= H,
+          "aria-label": "Next page",
+          children: "→"
+        }
+      )
+    ] })
+  ] });
+  return /* @__PURE__ */ S(
+    Dt,
+    {
+      $borderColor: z,
+      $stickyPagination: p,
+      className: F,
+      style: _,
+      children: [
+        p ? /* @__PURE__ */ e(Et, { children: so }) : so,
+        eo
       ]
     }
   );
 }
-Un.displayName = "Table";
-function mt({
-  defaultSort: o,
-  defaultPage: r = 1
-} = {}) {
-  const [n, e] = D(o ?? null), [l, a] = D(r);
-  return { sort: n, page: l, onSortChange: (p) => {
-    e(p), a(1);
-  }, onPageChange: (p) => {
-    a(p);
-  } };
-}
-const Kn = i.p`
+qt.displayName = "Table";
+const Gt = 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`
+`, Xt = i.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: ${({ theme: o }) => o.radius.md};
-  font-weight: 600;
+  font-weight: ${({ theme: o }) => o.fontWeights.semibold};
   cursor: pointer;
   padding: ${({ theme: o }) => o.spacing[2]} ${({ theme: o }) => o.spacing[4]};
   font-size: ${({ theme: o }) => o.fontSizes.md};
@@ -2114,47 +2904,47 @@ const Kn = i.p`
       }
     `}
 `;
-function Po({
+function ar({
   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
+  confirmLabel: s = "Confirm",
+  cancelLabel: a = "Cancel",
+  variant: l = "default",
+  size: d = "sm",
+  onConfirm: p,
+  onCancel: u
 }) {
-  return /* @__PURE__ */ s(
-    Io,
+  return /* @__PURE__ */ e(
+    Go,
     {
       open: o,
-      onClose: p,
+      onClose: u,
       title: r,
-      size: c,
+      size: d,
       closeOnBackdrop: !1,
-      footer: /* @__PURE__ */ k(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 })
+      footer: /* @__PURE__ */ S(dr, { children: [
+        /* @__PURE__ */ e(Co, { variant: "outline", onClick: u, children: a }),
+        l === "danger" ? /* @__PURE__ */ e(Xt, { type: "button", onClick: p, children: s }) : /* @__PURE__ */ e(Co, { variant: "primary", onClick: p, children: s })
       ] }),
-      children: /* @__PURE__ */ s(Kn, { children: n })
+      children: /* @__PURE__ */ e(Gt, { children: n })
     }
   );
 }
-Po.displayName = "ConfirmDialog";
-const No = ao(null);
-function vt({ children: o }) {
-  const [r, n] = D(null), e = V((c) => new Promise((d) => {
-    n({ ...c, resolve: d });
-  }), []), l = () => {
+ar.displayName = "ConfirmDialog";
+const lr = Wo(null);
+function Ts({ children: o }) {
+  const [r, n] = T(null), s = X((d) => new Promise((p) => {
+    n({ ...d, resolve: p });
+  }), []), a = () => {
     r?.resolve(!0), n(null);
-  }, a = () => {
+  }, l = () => {
     r?.resolve(!1), n(null);
   };
-  return /* @__PURE__ */ k(No.Provider, { value: { confirm: e }, children: [
+  return /* @__PURE__ */ S(lr.Provider, { value: { confirm: s }, children: [
     o,
-    r && /* @__PURE__ */ s(
-      Po,
+    r && /* @__PURE__ */ e(
+      ar,
       {
         open: !0,
         title: r.title,
@@ -2163,24 +2953,24 @@ function vt({ children: o }) {
         cancelLabel: r.cancelLabel,
         variant: r.variant,
         size: r.size,
-        onConfirm: l,
-        onCancel: a
+        onConfirm: a,
+        onCancel: l
       }
     )
   ] });
 }
-function kt() {
-  const o = io(No);
+function Ws() {
+  const o = To(lr);
   if (!o)
     throw new Error("useConfirm must be used within a ConfirmProvider");
   return o.confirm;
 }
-const Gn = i.div`
+const Jt = i.div`
   position: relative;
   display: inline-flex;
   flex-direction: column;
   gap: ${({ theme: o }) => o.spacing[1]};
-`, Jn = i.div`
+`, Qt = i.div`
   display: flex;
   align-items: center;
   border-radius: ${({ theme: o }) => o.radius.md};
@@ -2229,19 +3019,19 @@ const Gn = i.div`
     outline: none;
     box-shadow: ${({ theme: o }) => o.shadows.focusRing};
   }
-`, Xn = i.span`
+`, Zt = 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`
+`, os = i.span`
   display: inline-flex;
   align-items: center;
   margin-left: ${({ theme: o }) => o.spacing[2]};
   color: ${({ theme: o }) => o.colors.neutral[500]};
   flex-shrink: 0;
-`, Qn = i.button`
+`, rs = i.button`
   display: inline-flex;
   align-items: center;
   margin-left: ${({ theme: o }) => o.spacing[2]};
@@ -2261,10 +3051,12 @@ const Gn = i.div`
     outline-offset: 2px;
     border-radius: 2px;
   }
-`, ot = i.span`
+`;
+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`
+`;
+const ns = i.div`
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
@@ -2283,12 +3075,12 @@ const Gn = i.div`
       border: 1px solid ${o.colors.neutral[200]};
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
     `}
-`, nt = i.div`
+`, ts = i.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: ${({ theme: o }) => o.spacing[3]};
-`, ho = i.button`
+`, Bo = i.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2318,24 +3110,24 @@ const Gn = i.div`
         transform: translate(1px, 1px);
       }
     `}
-`, tt = i.span`
-  font-weight: 600;
+`, ss = i.span`
+  font-weight: ${({ theme: o }) => o.fontWeights.semibold};
   font-size: ${({ theme: o }) => o.fontSizes.md};
   color: ${({ theme: o }) => o.colors.neutral[900]};
-`, st = i.div`
+`, es = i.div`
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: 2px;
-`, et = i.span`
+  gap: ${({ theme: o }) => o.spacing[0.5]};
+`, is = i.span`
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: ${({ theme: o }) => o.fontSizes.xs};
-  font-weight: 600;
+  font-weight: ${({ theme: o }) => o.fontWeights.semibold};
   color: ${({ theme: o }) => o.colors.neutral[500]};
   padding: ${({ theme: o }) => o.spacing[1]};
-  margin-bottom: 2px;
-`, wo = i.button`
+  margin-bottom: ${({ theme: o }) => o.spacing[0.5]};
+`, ko = i.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2346,15 +3138,36 @@ const Gn = i.div`
   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"};
+  font-weight: ${({
+  $today: o,
+  $selected: r,
+  $rangeStart: n,
+  $rangeEnd: s,
+  $inRange: a,
+  theme: l
+}) => o || r || n || s ? l.fontWeights.semibold : l.fontWeights.normal};
   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"};
+  color: ${({
+  $currentMonth: o,
+  $selected: r,
+  $today: n,
+  $rangeStart: s,
+  $rangeEnd: a,
+  theme: l
+}) => o ? r || s || a ? l.colors.primary.contrast : n ? l.colors.primary[500] : l.colors.neutral[900] : l.colors.neutral[300]};
+
+  background-color: ${({
+  $selected: o,
+  $rangeStart: r,
+  $rangeEnd: n,
+  $inRange: s,
+  $currentMonth: a,
+  theme: l
+}) => a ? o || r || n ? l.colors.primary[500] : s ? l.colors.primary[50] : "transparent" : "transparent"};
 
   &:hover:not(:disabled) {
-    background-color: ${({ $selected: o, theme: r }) => o ? r.colors.primary[700] : r.colors.neutral[100]};
+    background-color: ${({ $selected: o, $rangeStart: r, $rangeEnd: n, theme: s }) => o || r || n ? s.colors.primary[700] : s.colors.neutral[100]};
   }
 
   &:disabled {
@@ -2367,13 +3180,13 @@ const Gn = i.div`
     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]};
+  ${({ $selected: o, $rangeStart: r, $rangeEnd: n, $today: s, theme: a }) => a.brutalism && (o || r || n || s) && t`
+      border: ${a.brutalism.borderWidth} solid ${a.colors.neutral[900]};
+      ${(o || r || n) && t`
+        box-shadow: 2px 2px 0 ${a.colors.neutral[900]};
       `}
     `}
-`, it = [
+`, as = [
   "January",
   "February",
   "March",
@@ -2386,43 +3199,45 @@ const Gn = i.div`
   "October",
   "November",
   "December"
-], at = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-function mo(o, r) {
+], ls = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function _o(o, r) {
   return new Date(o, r + 1, 0).getDate();
 }
-function lt(o, r) {
+function cs(o, r) {
   return new Date(o, r, 1).getDay();
 }
-function vo(o, r) {
+function fo(o, r) {
   return o.getFullYear() === r.getFullYear() && o.getMonth() === r.getMonth() && o.getDate() === r.getDate();
 }
-function ct(o, r, n) {
+function ds(o, r, n) {
   if (r) {
-    const e = new Date(
+    const s = new Date(
       r.getFullYear(),
       r.getMonth(),
       r.getDate()
     );
-    if (o < e) return !0;
+    if (o < s)
+      return !0;
   }
   if (n) {
-    const e = new Date(
+    const s = new Date(
       n.getFullYear(),
       n.getMonth(),
       n.getDate()
     );
-    if (o > e) return !0;
+    if (o > s)
+      return !0;
   }
   return !1;
 }
-function dt(o) {
+function jo(o) {
   return o.toLocaleDateString("en-US", {
     month: "short",
     day: "numeric",
     year: "numeric"
   });
 }
-function ut(o) {
+function Ho(o) {
   return o.toLocaleDateString("en-US", {
     weekday: "long",
     month: "long",
@@ -2430,153 +3245,244 @@ function ut(o) {
     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
+function So(o) {
+  if (!o)
+    return null;
+  const r = o.split("-");
+  if (r.length !== 3)
+    return null;
+  const n = parseInt(r[0], 10), s = parseInt(r[1], 10), a = parseInt(r[2], 10);
+  return isNaN(n) || isNaN(s) || isNaN(a) ? null : new Date(n, s - 1, a);
+}
+function po(o) {
+  const r = o.getFullYear(), n = String(o.getMonth() + 1).padStart(2, "0"), s = String(o.getDate()).padStart(2, "0");
+  return `${r}-${n}-${s}`;
+}
+function us({
+  name: o,
+  label: r,
+  value: n,
+  onChange: s,
+  placeholder: a = "Select date...",
+  size: l = "md",
+  disabled: d = !1,
+  clearable: p = !1,
+  minDate: u,
+  maxDate: f,
+  formatDate: g,
+  error: m,
+  required: v,
+  helperText: h,
+  mode: k = "single",
+  nameFrom: C,
+  nameTo: M,
+  valueFrom: P,
+  valueTo: L
 }) {
-  const w = R(), x = $ ?? w, f = /* @__PURE__ */ new Date(), [y, h] = D(!1), [z, W] = D(
-    () => (o ?? f).getFullYear()
-  ), [v, b] = D(() => (o ?? f).getMonth()), C = j(null);
-  A(() => {
-    if (!y) return;
-    const u = (B) => {
-      C.current && !C.current.contains(B.target) && h(!1);
+  const x = k === "range", I = So(n ?? ""), w = So(P ?? ""), b = So(L ?? ""), z = /* @__PURE__ */ new Date(), D = () => x ? w ?? b ?? z : I ?? z, [W, N] = T(!1), [F, _] = T(
+    () => D().getFullYear()
+  ), [V, U] = T(
+    () => D().getMonth()
+  ), [io, O] = T("from"), H = Y(null);
+  B(() => {
+    if (!W)
+      return;
+    const $ = (R) => {
+      H.current && !H.current.contains(R.target) && (N(!1), x && O("from"));
     };
-    return document.addEventListener("mousedown", u), () => document.removeEventListener("mousedown", u);
-  }, [y]), A(() => {
-    o && (W(o.getFullYear()), b(o.getMonth()));
-  }, [o]);
-  const I = o ? p ? p(o) : dt(o) : "", S = (u) => {
-    r?.(new Date(z, v, u)), h(!1);
-  }, T = (u) => {
-    u.stopPropagation(), r?.(null);
-  }, M = () => {
-    v === 0 ? (b(11), W((u) => u - 1)) : b((u) => u - 1);
-  }, P = () => {
-    v === 11 ? (b(0), W((u) => u + 1)) : b((u) => u + 1);
-  }, O = mo(z, v), K = lt(z, v), N = [], E = mo(
-    v === 0 ? z - 1 : z,
-    v === 0 ? 11 : v - 1
+    return document.addEventListener("mousedown", $), () => document.removeEventListener("mousedown", $);
+  }, [W, x]), B(() => {
+    !x && I && (_(I.getFullYear()), U(I.getMonth()));
+  }, [n, x]), B(() => {
+    x && w && (_(w.getFullYear()), U(w.getMonth()));
+  }, [P, x]);
+  const K = (() => {
+    if (!x)
+      return I ? g ? g(I) : jo(I) : "";
+    if (!w && !b)
+      return "";
+    const $ = g ?? jo;
+    return w && b ? `${$(w)} - ${$(b)}` : w ? `${$(w)} - ...` : "";
+  })(), to = x ? !!(w || b) : !!I, J = ($) => {
+    const R = new Date(F, V, $);
+    if (!x) {
+      s(o ?? "", po(R)), N(!1);
+      return;
+    }
+    if (io === "from") {
+      s(C ?? "", po(R)), O("to");
+      return;
+    }
+    if (!w) {
+      s(C ?? "", po(R)), O("to");
+      return;
+    }
+    if (fo(R, w)) {
+      s(C ?? "", ""), s(M ?? "", ""), O("from");
+      return;
+    }
+    if (R >= w) {
+      s(M ?? "", po(R)), O("from"), N(!1);
+      return;
+    }
+    s(M ?? "", po(w)), s(C ?? "", po(R)), O("from"), N(!1);
+  }, lo = ($) => {
+    $.stopPropagation(), x ? (s(C ?? "", ""), s(M ?? "", ""), O("from")) : s(o ?? "", "");
+  }, j = () => {
+    if (d)
+      return;
+    const $ = !W;
+    N($), !$ && x && O("from");
+  }, q = ($) => {
+    if (($.key === "Enter" || $.key === " ") && !d) {
+      $.preventDefault();
+      const R = !W;
+      N(R), !R && x && O("from");
+    }
+    $.key === "Escape" && (N(!1), x && O("from"));
+  }, Q = () => {
+    V === 0 ? (U(11), _(($) => $ - 1)) : U(($) => $ - 1);
+  }, Z = () => {
+    V === 11 ? (U(0), _(($) => $ + 1)) : U(($) => $ + 1);
+  }, so = _o(F, V), eo = cs(F, V), y = [], A = _o(
+    V === 0 ? F - 1 : F,
+    V === 0 ? 11 : V - 1
   );
-  for (let u = K - 1; u >= 0; u--)
-    N.push({ day: E - u, currentMonth: !1 });
-  for (let u = 1; u <= O; u++)
-    N.push({ day: u, currentMonth: !0 });
-  const q = 42 - N.length;
-  for (let u = 1; u <= q; u++)
-    N.push({ day: u, currentMonth: !1 });
-  return /* @__PURE__ */ k(Gn, { ref: C, children: [
-    /* @__PURE__ */ k(
-      Jn,
-      {
-        id: x,
-        $size: e,
-        $error: !!g,
-        $disabled: l,
-        role: "combobox",
-        "aria-haspopup": "true",
-        "aria-expanded": y,
-        tabIndex: l ? -1 : 0,
-        onClick: () => {
-          l || h((u) => !u);
-        },
-        onKeyDown: (u) => {
-          (u.key === "Enter" || u.key === " ") && !l && (u.preventDefault(), h((B) => !B)), u.key === "Escape" && h(!1);
-        },
-        children: [
-          /* @__PURE__ */ s(Xn, { $hasValue: !!o, children: I || n }),
-          a && o ? /* @__PURE__ */ s(
-            Qn,
-            {
-              type: "button",
-              onClick: T,
-              "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 }),
-    y && /* @__PURE__ */ k(rt, { role: "dialog", "aria-label": "Calendar", children: [
-      /* @__PURE__ */ k(nt, { children: [
-        /* @__PURE__ */ s(
-          ho,
+  for (let $ = eo - 1; $ >= 0; $--)
+    y.push({ day: A - $, currentMonth: !1 });
+  for (let $ = 1; $ <= so; $++)
+    y.push({ day: $, currentMonth: !0 });
+  const co = 42 - y.length;
+  for (let $ = 1; $ <= co; $++)
+    y.push({ day: $, currentMonth: !1 });
+  return /* @__PURE__ */ e(
+    sr,
+    {
+      label: r,
+      error: m,
+      helperText: h,
+      required: v,
+      children: /* @__PURE__ */ S(Jt, { ref: H, children: [
+        /* @__PURE__ */ S(
+          Qt,
           {
-            type: "button",
-            onClick: M,
-            "aria-label": "Previous month",
-            children: /* @__PURE__ */ s(xr, { size: 16 })
+            $size: l,
+            $error: !!m,
+            $disabled: d,
+            role: "combobox",
+            "aria-haspopup": "true",
+            "aria-expanded": W,
+            tabIndex: d ? -1 : 0,
+            onClick: j,
+            onKeyDown: q,
+            children: [
+              /* @__PURE__ */ e(Zt, { $hasValue: to, children: K || a }),
+              p && to ? /* @__PURE__ */ e(
+                rs,
+                {
+                  type: "button",
+                  onClick: lo,
+                  "aria-label": "Clear date",
+                  children: /* @__PURE__ */ e(yo, { size: 14 })
+                }
+              ) : /* @__PURE__ */ e(os, { "aria-hidden": "true", children: /* @__PURE__ */ e(_r, { size: 14 }) })
+            ]
           }
         ),
-        /* @__PURE__ */ k(tt, { children: [
-          it[v],
-          " ",
-          z
-        ] }),
-        /* @__PURE__ */ s(
-          ho,
-          {
-            type: "button",
-            onClick: P,
-            "aria-label": "Next month",
-            children: /* @__PURE__ */ s(hr, { size: 16 })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ k(st, { children: [
-        at.map((u) => /* @__PURE__ */ s(et, { children: u }, u)),
-        N.map((u, B) => {
-          if (!u.currentMonth)
-            return /* @__PURE__ */ s(
-              wo,
+        W && /* @__PURE__ */ S(ns, { role: "dialog", "aria-label": "Calendar", children: [
+          /* @__PURE__ */ S(ts, { children: [
+            /* @__PURE__ */ e(
+              Bo,
               {
                 type: "button",
-                $currentMonth: !1,
-                $selected: !1,
-                $today: !1,
-                disabled: !0,
-                tabIndex: -1,
-                children: u.day
-              },
-              B
-            );
-          const Y = new Date(z, v, u.day), H = o ? vo(Y, o) : !1, Z = vo(Y, f), Q = ct(Y, c, d);
-          return /* @__PURE__ */ s(
-            wo,
-            {
-              type: "button",
-              $currentMonth: !0,
-              $selected: H,
-              $today: Z,
-              disabled: Q,
-              "aria-label": ut(Y),
-              "aria-pressed": H,
-              onClick: () => S(u.day),
-              children: u.day
-            },
-            B
-          );
-        })
+                onClick: Q,
+                "aria-label": "Previous month",
+                children: /* @__PURE__ */ e(Yr, { size: 16 })
+              }
+            ),
+            /* @__PURE__ */ S(ss, { children: [
+              as[V],
+              " ",
+              F
+            ] }),
+            /* @__PURE__ */ e(
+              Bo,
+              {
+                type: "button",
+                onClick: Z,
+                "aria-label": "Next month",
+                children: /* @__PURE__ */ e(Kr, { size: 16 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ S(es, { children: [
+            ls.map(($) => /* @__PURE__ */ e(is, { children: $ }, $)),
+            y.map(($, R) => {
+              if (!$.currentMonth)
+                return /* @__PURE__ */ e(
+                  ko,
+                  {
+                    type: "button",
+                    $currentMonth: !1,
+                    $selected: !1,
+                    $today: !1,
+                    disabled: !0,
+                    tabIndex: -1,
+                    children: $.day
+                  },
+                  R
+                );
+              const c = new Date(F, V, $.day), E = fo(c, z), G = ds(c, u, f);
+              if (x) {
+                const Eo = w ? fo(c, w) : !1, Oo = b ? fo(c, b) : !1, cr = w && b ? c > w && c < b : !1;
+                return /* @__PURE__ */ e(
+                  ko,
+                  {
+                    type: "button",
+                    $currentMonth: !0,
+                    $selected: !1,
+                    $today: E,
+                    $rangeStart: Eo,
+                    $rangeEnd: Oo,
+                    $inRange: cr,
+                    disabled: G,
+                    "aria-label": Ho(c),
+                    "aria-pressed": Eo || Oo,
+                    onClick: () => J($.day),
+                    children: $.day
+                  },
+                  R
+                );
+              }
+              const $o = I ? fo(c, I) : !1;
+              return /* @__PURE__ */ e(
+                ko,
+                {
+                  type: "button",
+                  $currentMonth: !0,
+                  $selected: $o,
+                  $today: E,
+                  disabled: G,
+                  "aria-label": Ho(c),
+                  "aria-pressed": $o,
+                  onClick: () => J($.day),
+                  children: $.day
+                },
+                R
+              );
+            })
+          ] })
+        ] })
       ] })
-    ] })
-  ] });
+    }
+  );
 }
-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";
+us.displayName = "DatePicker";
+function ps(o) {
+  const r = parseInt(o.slice(1, 3), 16) / 255, n = parseInt(o.slice(3, 5), 16) / 255, s = parseInt(o.slice(5, 7), 16) / 255, a = (d) => d <= 0.03928 ? d / 12.92 : ((d + 0.055) / 1.055) ** 2.4;
+  return 0.2126 * a(r) + 0.7152 * a(n) + 0.0722 * a(s) > 0.179 ? "#111111" : "#ffffff";
 }
-const eo = {
+const Io = {
   colors: {
     primary: {
       50: "#fffde6",
@@ -2599,34 +3505,45 @@ const eo = {
     warning: { 50: "#fffbe6", 500: "#ff9900" },
     info: { 50: "#f0f0ff", 500: "#3333ff" }
   },
-  spacing: { 1: "4px", 2: "8px", 3: "12px", 4: "16px", 5: "20px", 6: "24px" },
+  spacing: {
+    0.5: "2px",
+    1: "4px",
+    2: "8px",
+    3: "12px",
+    4: "16px",
+    5: "20px",
+    6: "24px",
+    8: "32px",
+    10: "40px"
+  },
   radius: { md: "2px" },
   zIndex: { modal: 1e3, toast: 1100 },
   fontSizes: { xs: "12px", sm: "14px", md: "16px", lg: "18px" },
+  fontWeights: { normal: "400", medium: "500", semibold: "600", bold: "700" },
   shadows: { focusRing: "3px 3px 0 #111111" },
   brutalism: { borderWidth: "2px", shadowOffset: "4px" }
 };
-function Ct(o) {
+function Ds(o) {
   return {
-    ...eo,
+    ...Io,
     colors: {
-      ...eo.colors,
+      ...Io.colors,
       primary: {
         50: "#fffff0",
         500: o,
         700: o,
-        contrast: ft(o)
+        contrast: ps(o)
       }
     }
   };
 }
-function St({
-  theme: o = eo,
+function Es({
+  theme: o = Io,
   children: r
 }) {
-  return /* @__PURE__ */ s(Fo, { theme: o, children: r });
+  return /* @__PURE__ */ e(ur, { theme: o, children: r });
 }
-const zt = Bo`
+const Os = pr`
   *, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
@@ -2645,31 +3562,41 @@ const zt = Bo`
   }
 `;
 export {
-  _o as Badge,
-  so as Button,
-  wn as CollapsibleCard,
-  Po as ConfirmDialog,
-  vt as ConfirmProvider,
-  pt as DatePicker,
-  Mr as Editable,
-  Er as Field,
-  an as Form,
-  ln as FormField,
-  zt as GlobalStyles,
-  qo as Input,
-  To as Link,
-  Io as Modal,
-  Tr as Select,
-  Sn as Spinner,
-  Un as Table,
-  or as Textarea,
-  St as ThemeProvider,
-  Do as Toast,
-  yt as ToastProvider,
-  Ct as createNeoBrutalTheme,
-  eo as neoBrutalTheme,
-  kt as useConfirm,
-  wt as useForm,
-  mt as useTable,
-  ht as useToast
+  $r as Badge,
+  Co as Button,
+  qn as Checkbox,
+  ht as CollapsibleCard,
+  ar as ConfirmDialog,
+  Ts as ConfirmProvider,
+  us as DatePicker,
+  un as Editable,
+  bn as Field,
+  Rn as Form,
+  sr as FormField,
+  Os as GlobalStyles,
+  vr as Input,
+  qo as Link,
+  Go as Modal,
+  rt as Radio,
+  ln as Select,
+  St as Spinner,
+  at as Switch,
+  qt as Table,
+  Tr as Textarea,
+  Es as ThemeProvider,
+  Mn as Toast,
+  xs as ToastProvider,
+  Cs as composeValidators,
+  Ds as createNeoBrutalTheme,
+  ks as isEmail,
+  Ss as isUrl,
+  vs as maxLength,
+  ms as minLength,
+  Io as neoBrutalTheme,
+  zs as pattern,
+  ws as required,
+  Ws as useConfirm,
+  hs as useForm,
+  Is as useTable,
+  ys as useToast
 };