@brycks/core-front 0.2.0 → 0.2.1

package/dist/index.js

@@ -1,66 +1,66 @@
-import { a as Yn, c as Kn, e as Gn, i as qn, n as _n, p as Un, s as Zn, w as Qn } from "./colors-B_8a3coi.js";
-import { spacing as j, durations as Z, easings as q, fontSizes as ge, fontWeights as xe, lineHeights as Ce, fontFamilies as se, containers as ot, textStyles as de } from "./tokens.js";
-import { animations as es, borderStyles as ts, borderWidths as rs, breakpoints as os, focusRings as ns, glows as ss, letterSpacings as as, mediaQueries as is, radii as ls, semanticSpacing as cs, shadows as ds, transitions as us, zIndex as ys } from "./tokens.js";
-import { T as bs, c as ms, d as gs, l as hs, u as ps, a as ks } from "./cssVariables-D9uw0uKO.js";
-import { forwardRef as z, useState as E, useId as nt, useRef as Q, useCallback as A, useEffect as V, createContext as be, useContext as me, cloneElement as Te, useMemo as st, Children as at, isValidElement as it } from "react";
-import { jsx as s, jsxs as S, Fragment as ee } from "react/jsx-runtime";
-import { createPortal as ke } from "react-dom";
-const ue = {
+import { a as ts, c as rs, e as os, i as ns, n as ss, p as as, s as is, w as ls } from "./colors-B_8a3coi.js";
+import { spacing as D, durations as Z, easings as G, fontSizes as me, fontWeights as Se, lineHeights as ze, fontFamilies as ne, containers as nt, textStyles as le } from "./tokens.js";
+import { animations as ds, borderStyles as us, borderWidths as ys, breakpoints as fs, focusRings as bs, glows as ms, letterSpacings as gs, mediaQueries as hs, radii as ps, semanticSpacing as ks, shadows as vs, transitions as xs, zIndex as Ss } from "./tokens.js";
+import { T as Cs, c as zs, d as Ms, l as Is, u as Ts, a as Ls } from "./cssVariables-D9uw0uKO.js";
+import { forwardRef as z, useState as B, useId as st, useRef as Q, useCallback as j, useEffect as X, createContext as ye, useContext as fe, cloneElement as Le, useMemo as at, Children as it, isValidElement as lt } from "react";
+import { jsx as s, jsxs as S, Fragment as te } from "react/jsx-runtime";
+import { createPortal as pe } from "react-dom";
+const ce = {
   /** 24px - Micro elements (tags, small badges) */
-  xs: j[6],
+  xs: D[6],
   /** 32px - Small inputs, compact buttons */
-  sm: j[8],
+  sm: D[8],
   /** 40px - Default size for most interactive elements */
-  md: j[10],
+  md: D[10],
   /** 48px - Large inputs, prominent buttons */
-  lg: j[12],
+  lg: D[12],
   /** 56px - Extra large, hero CTAs */
-  xl: j[14]
-}, Se = {
+  xl: D[14]
+}, we = {
   /** 12px */
-  xs: j[3],
+  xs: D[3],
   /** 16px */
-  sm: j[4],
+  sm: D[4],
   /** 20px */
-  md: j[5],
+  md: D[5],
   /** 24px */
-  lg: j[6],
+  lg: D[6],
   /** 32px */
-  xl: j[8]
-}, ye = {
+  xl: D[8]
+}, de = {
   /** 8px */
-  xs: j[2],
+  xs: D[2],
   /** 12px */
-  sm: j[3],
+  sm: D[3],
   /** 16px */
-  md: j[4],
+  md: D[4],
   /** 20px */
-  lg: j[5],
+  lg: D[5],
   /** 24px */
-  xl: j[6]
-}, hn = {
+  xl: D[6]
+}, pn = {
   /** 4px */
-  xs: j[1],
+  xs: D[1],
   /** 6px */
-  sm: j[1.5],
+  sm: D[1.5],
   /** 8px */
-  md: j[2],
+  md: D[2],
   /** 10px */
-  lg: j[2.5],
+  lg: D[2.5],
   /** 12px */
-  xl: j[3]
+  xl: D[3]
 }, ae = {
   /** 4px - Tight spacing between icons and text */
-  xs: j[1],
+  xs: D[1],
   /** 6px */
-  sm: j[1.5],
+  sm: D[1.5],
   /** 8px - Default internal spacing */
-  md: j[2],
+  md: D[2],
   /** 10px */
-  lg: j[2.5],
+  lg: D[2.5],
   /** 12px - Spacious internal spacing */
-  xl: j[3]
-}, pn = {
+  xl: D[3]
+}, kn = {
   /** 400px - Small dialogs, confirmations */
   sm: 400,
   /** 500px - Medium dialogs */
@@ -71,16 +71,16 @@ const ue = {
   xl: 800,
   /** Full width minus margins */
   full: "calc(100vw - 48px)"
-}, kn = {
+}, vn = {
   /** Default tooltip max width */
   tooltipMaxWidth: 300,
   /** Default popover max width */
   popoverMaxWidth: 400,
   /** Arrow size for tooltips */
-  arrowSize: j[2],
+  arrowSize: D[2],
   /** Gap between trigger and popover */
-  offset: j[2]
-}, lt = {
+  offset: D[2]
+}, ct = {
   sm: {
     box: 16,
     icon: 10
@@ -93,7 +93,7 @@ const ue = {
     box: 22,
     icon: 14
   }
-}, ct = {
+}, dt = {
   sm: {
     width: 36,
     height: 20,
@@ -109,7 +109,7 @@ const ue = {
     height: 28,
     thumb: 24
   }
-}, fe = {
+}, ue = {
   /** Default focus ring - primary color */
   default: "0 0 0 3px var(--brycks-focus-ring-color, rgba(85, 120, 244, 0.35))",
   /** Error state focus ring */
@@ -120,10 +120,10 @@ const ue = {
   subtle: "0 0 0 2px var(--brycks-focus-ring-color, rgba(85, 120, 244, 0.25))",
   /** None - explicitly no focus ring */
   none: "none"
-}, vn = {
+}, xn = {
   default: "0 0 0 2px var(--brycks-background-app), 0 0 0 4px var(--brycks-primary-default)",
   error: "0 0 0 2px var(--brycks-background-app), 0 0 0 4px var(--brycks-error-default)"
-}, xn = {
+}, Sn = {
   /** Outline-based focus (native) */
   outline: {
     outline: "2px solid var(--brycks-border-focus)",
@@ -132,51 +132,51 @@ const ue = {
   /** Box-shadow based focus (custom) */
   ring: {
     outline: "none",
-    boxShadow: fe.default
+    boxShadow: ue.default
   },
   /** Error state focus */
   ringError: {
     outline: "none",
-    boxShadow: fe.error
+    boxShadow: ue.error
   },
   /** Remove focus styles (use sparingly) */
   none: {
     outline: "none",
     boxShadow: "none"
   }
-}, pe = {
+}, he = {
   /** No transition */
   none: "none",
   /** Ultra-fast - for micro-interactions (50ms) */
-  instant: `all ${Z.faster}ms ${q.easeOut}`,
+  instant: `all ${Z.faster}ms ${G.easeOut}`,
   /** Fast - for hover states, toggles (100ms) */
-  fast: `all ${Z.fast}ms ${q.easeOut}`,
+  fast: `all ${Z.fast}ms ${G.easeOut}`,
   /** Quick - standard interactive feedback (150ms) */
-  quick: `all ${Z.quick}ms ${q.easeOut}`,
+  quick: `all ${Z.quick}ms ${G.easeOut}`,
   /** Default - most state changes (200ms) */
-  default: `all ${Z.normal}ms ${q.easeOut}`,
+  default: `all ${Z.normal}ms ${G.easeOut}`,
   /** Smooth - focus states, form elements (300ms) */
-  smooth: `all ${Z.relaxed}ms ${q.smooth}`,
+  smooth: `all ${Z.relaxed}ms ${G.smooth}`,
   /** Slow - reveals, modals (400ms) */
-  slow: `all ${Z.slow}ms ${q.easeOut}`,
+  slow: `all ${Z.slow}ms ${G.easeOut}`,
   /** Spring - bouncy, tactile feel (300ms) */
-  spring: `all ${Z.relaxed}ms ${q.softSpring}`,
+  spring: `all ${Z.relaxed}ms ${G.softSpring}`,
   /** Colors only - optimized for color transitions */
-  colors: `color ${Z.fast}ms ${q.easeOut}, background-color ${Z.fast}ms ${q.easeOut}, border-color ${Z.fast}ms ${q.easeOut}`,
+  colors: `color ${Z.fast}ms ${G.easeOut}, background-color ${Z.fast}ms ${G.easeOut}, border-color ${Z.fast}ms ${G.easeOut}`,
   /** Transform only - for scale, translate */
-  transform: `transform ${Z.normal}ms ${q.easeOut}`,
+  transform: `transform ${Z.normal}ms ${G.easeOut}`,
   /** Opacity only - for fade effects */
-  opacity: `opacity ${Z.normal}ms ${q.easeOut}`,
+  opacity: `opacity ${Z.normal}ms ${G.easeOut}`,
   /** Shadow only - for elevation changes */
-  shadow: `box-shadow ${Z.normal}ms ${q.easeOut}`
-}, Sn = {
+  shadow: `box-shadow ${Z.normal}ms ${G.easeOut}`
+}, wn = {
   all: "all",
   colors: "color, background-color, border-color, fill, stroke",
   opacity: "opacity",
   shadow: "box-shadow",
   transform: "transform",
   dimensions: "width, height, padding, margin"
-}, wn = {
+}, Cn = {
   instant: Z.faster,
   fast: Z.fast,
   quick: Z.quick,
@@ -184,17 +184,17 @@ const ue = {
   smooth: Z.relaxed,
   slow: Z.slow,
   slower: Z.slower
-}, Cn = {
-  linear: q.linear,
-  ease: q.ease,
-  easeIn: q.easeIn,
-  easeOut: q.easeOut,
-  easeInOut: q.easeInOut,
-  spring: q.spring,
-  softSpring: q.softSpring,
-  smooth: q.smooth,
-  snappy: q.snappy
 }, zn = {
+  linear: G.linear,
+  ease: G.ease,
+  easeIn: G.easeIn,
+  easeOut: G.easeOut,
+  easeInOut: G.easeInOut,
+  spring: G.spring,
+  softSpring: G.softSpring,
+  smooth: G.smooth,
+  snappy: G.snappy
+}, Mn = {
   fadeIn: `
     @keyframes brycks-fade-in {
       from { opacity: 0; }
@@ -255,144 +255,144 @@ const ue = {
       40% { transform: scale(1); opacity: 1; }
     }
   `
-}, Y = {
+}, K = {
   /** 11px - Extra small labels, badges */
-  xs: ge.xs,
+  xs: me.xs,
   /** 12px - Small text, captions, helper text */
-  sm: ge.sm,
+  sm: me.sm,
   /** 14px - Default component text */
-  md: ge.base,
+  md: me.base,
   /** 15px - Large component text */
   lg: 15,
   /** 16px - Extra large component text */
-  xl: ge.md
+  xl: me.md
 }, re = {
   /** 400 - Regular body text */
-  regular: xe.regular,
+  regular: Se.regular,
   /** 500 - Labels, emphasized text */
-  medium: xe.medium,
+  medium: Se.medium,
   /** 600 - Headings, titles */
-  semibold: xe.semibold,
+  semibold: Se.semibold,
   /** 700 - Strong emphasis */
-  bold: xe.bold
+  bold: Se.bold
 }, U = {
   /** 1 - Single line, badges */
-  none: Ce.none,
+  none: ze.none,
   /** 1.25 - Tight, headings */
-  tight: Ce.snug,
+  tight: ze.snug,
   /** 1.4 - Slightly relaxed, labels */
   snug: 1.4,
   /** 1.5 - Default body text */
-  normal: Ce.normal,
+  normal: ze.normal,
   /** 1.6 - Relaxed, helper text */
   relaxed: 1.6
-}, Mn = {
+}, In = {
   /** Form field labels */
   label: {
-    fontFamily: se.sans,
-    fontSize: Y.sm,
+    fontFamily: ne.sans,
+    fontSize: K.sm,
     fontWeight: re.medium,
     lineHeight: U.normal
   },
   /** Helper/hint text below inputs */
   helperText: {
-    fontFamily: se.sans,
-    fontSize: Y.xs,
+    fontFamily: ne.sans,
+    fontSize: K.xs,
     fontWeight: re.regular,
     lineHeight: U.relaxed
   },
   /** Error messages */
   errorText: {
-    fontFamily: se.sans,
-    fontSize: Y.xs,
+    fontFamily: ne.sans,
+    fontSize: K.xs,
     fontWeight: re.regular,
     lineHeight: U.relaxed
   },
   /** Button text - small */
   buttonSm: {
-    fontFamily: se.sans,
-    fontSize: Y.sm,
+    fontFamily: ne.sans,
+    fontSize: K.sm,
     fontWeight: re.medium,
     lineHeight: U.none
   },
   /** Button text - medium (default) */
   buttonMd: {
-    fontFamily: se.sans,
-    fontSize: Y.md,
+    fontFamily: ne.sans,
+    fontSize: K.md,
     fontWeight: re.medium,
     lineHeight: U.none
   },
   /** Button text - large */
   buttonLg: {
-    fontFamily: se.sans,
-    fontSize: Y.lg,
+    fontFamily: ne.sans,
+    fontSize: K.lg,
     fontWeight: re.medium,
     lineHeight: U.none
   },
   /** Badge text */
   badge: {
-    fontFamily: se.sans,
-    fontSize: Y.xs,
+    fontFamily: ne.sans,
+    fontSize: K.xs,
     fontWeight: re.medium,
     lineHeight: U.none
   },
   /** Tooltip text */
   tooltip: {
-    fontFamily: se.sans,
-    fontSize: Y.xs,
+    fontFamily: ne.sans,
+    fontSize: K.xs,
     fontWeight: re.medium,
     lineHeight: U.snug
   },
   /** Alert title */
   alertTitle: {
-    fontFamily: se.sans,
-    fontSize: Y.md,
+    fontFamily: ne.sans,
+    fontSize: K.md,
     fontWeight: re.semibold,
     lineHeight: U.tight
   },
   /** Alert description */
   alertDescription: {
-    fontFamily: se.sans,
-    fontSize: Y.md,
+    fontFamily: ne.sans,
+    fontSize: K.md,
     fontWeight: re.regular,
     lineHeight: U.normal
   },
   /** Modal title */
   modalTitle: {
-    fontFamily: se.sans,
-    fontSize: ge.lg,
+    fontFamily: ne.sans,
+    fontSize: me.lg,
     fontWeight: re.semibold,
     lineHeight: U.tight
   },
   /** Modal description */
   modalDescription: {
-    fontFamily: se.sans,
-    fontSize: Y.md,
+    fontFamily: ne.sans,
+    fontSize: K.md,
     fontWeight: re.regular,
     lineHeight: U.normal
   },
   /** Empty state title */
   emptyStateTitle: {
-    fontFamily: se.sans,
-    fontSize: ge.lg,
+    fontFamily: ne.sans,
+    fontSize: me.lg,
     fontWeight: re.semibold,
     lineHeight: U.tight
   },
   /** Empty state description */
   emptyStateDescription: {
-    fontFamily: se.sans,
-    fontSize: Y.md,
+    fontFamily: ne.sans,
+    fontSize: K.md,
     fontWeight: re.regular,
     lineHeight: U.normal
   },
   /** Divider label */
   dividerLabel: {
-    fontFamily: se.sans,
-    fontSize: Y.xs,
+    fontFamily: ne.sans,
+    fontSize: K.xs,
     fontWeight: re.medium,
     lineHeight: U.normal
   }
-}, ce = {
+}, ie = {
   /** 0 - Fully transparent */
   transparent: 0,
   /** 0.05 - Barely visible */
@@ -425,24 +425,24 @@ const ue = {
   95: 0.95,
   /** 1 - Fully opaque */
   opaque: 1
-}, Me = {
+}, Ie = {
   /** Disabled elements */
-  disabled: ce[50],
+  disabled: ie[50],
   /** Placeholder text */
-  placeholder: ce[50],
+  placeholder: ie[50],
   /** Hover overlay */
-  hoverOverlay: ce[5],
+  hoverOverlay: ie[5],
   /** Active/pressed overlay */
-  activeOverlay: ce[10],
+  activeOverlay: ie[10],
   /** Modal backdrop */
-  backdrop: ce[40],
+  backdrop: ie[40],
   /** Loading state */
-  loading: ce[70],
+  loading: ie[70],
   /** Secondary text */
-  muted: ce[60],
+  muted: ie[60],
   /** Subtle decorative elements */
-  subtle: ce[30]
-}, he = {
+  subtle: ie[30]
+}, ge = {
   /** Pressed state - subtle shrink */
   pressed: 0.98,
   /** Strong pressed - more noticeable */
@@ -457,33 +457,98 @@ const ue = {
   hover: 1.02,
   /** Emphasized grow */
   emphasized: 1.05
+}, Tn = {
+  /** Collapsed sidebar width: 72px */
+  collapsed: 72,
+  /** Expanded sidebar width: 240px */
+  expanded: 240,
+  /** Logo size: 32px */
+  logoSize: D[8],
+  /** Nav icon size: 20px */
+  navIconSize: D[5]
+}, Ln = {
+  /** Standard header height: 64px */
+  height: D[16],
+  /** Compact header height: 48px */
+  compact: D[12]
+}, Nn = {
+  /** 24px - Extra small */
+  xs: D[6],
+  /** 32px - Small */
+  sm: D[8],
+  /** 36px - Medium (default) */
+  md: 36,
+  /** 40px - Large */
+  lg: D[10],
+  /** 48px - Extra large */
+  xl: D[12],
+  /** 64px - 2x large (for hero sections) */
+  "2xl": D[16]
+}, $n = {
+  /** 28px */
+  xs: 28,
+  /** 32px */
+  sm: D[8],
+  /** 36px */
+  md: 36,
+  /** 40px */
+  lg: D[10],
+  /** 48px */
+  xl: D[12]
+}, Hn = {
+  /** Icon container size: 48px */
+  iconContainer: D[12],
+  /** Default padding: 16px */
+  padding: D[4]
+}, Wn = {
+  /** Mobile padding: 16px */
+  mobile: D[4],
+  /** Tablet padding: 20px */
+  tablet: D[5],
+  /** Desktop padding: 24px */
+  desktop: D[6],
+  /** Large screen padding: 32px */
+  wide: D[8]
+}, Dn = {
+  /** Bottom margin: 24px */
+  marginBottom: D[6]
+}, Bn = {
+  /** Minimum width: 240px */
+  minWidth: 240,
+  /** Icon left offset: 12px */
+  iconLeft: D[3],
+  /** Input left padding to accommodate icon: 36px */
+  paddingLeft: 36
+}, En = {
+  /** Icon container size: 48px */
+  iconContainer: D[12]
 };
 function M(...r) {
   return r.filter(Boolean).join(" ");
 }
-function In(r) {
-  return j[r];
+function Rn(r) {
+  return D[r];
 }
-function O(r) {
+function Y(r) {
   if (r === void 0) return;
-  const e = j[r];
+  const e = D[r];
   return e === 0 ? "0" : `${e}px`;
 }
-function Ie(r) {
+function Te(r) {
   const e = {};
-  return r.m !== void 0 && (e.margin = O(r.m)), r.mx !== void 0 && (e.marginLeft = O(r.mx), e.marginRight = O(r.mx)), r.my !== void 0 && (e.marginTop = O(r.my), e.marginBottom = O(r.my)), r.mt !== void 0 && (e.marginTop = O(r.mt)), r.mr !== void 0 && (e.marginRight = O(r.mr)), r.mb !== void 0 && (e.marginBottom = O(r.mb)), r.ml !== void 0 && (e.marginLeft = O(r.ml)), r.p !== void 0 && (e.padding = O(r.p)), r.px !== void 0 && (e.paddingLeft = O(r.px), e.paddingRight = O(r.px)), r.py !== void 0 && (e.paddingTop = O(r.py), e.paddingBottom = O(r.py)), r.pt !== void 0 && (e.paddingTop = O(r.pt)), r.pr !== void 0 && (e.paddingRight = O(r.pr)), r.pb !== void 0 && (e.paddingBottom = O(r.pb)), r.pl !== void 0 && (e.paddingLeft = O(r.pl)), e;
+  return r.m !== void 0 && (e.margin = Y(r.m)), r.mx !== void 0 && (e.marginLeft = Y(r.mx), e.marginRight = Y(r.mx)), r.my !== void 0 && (e.marginTop = Y(r.my), e.marginBottom = Y(r.my)), r.mt !== void 0 && (e.marginTop = Y(r.mt)), r.mr !== void 0 && (e.marginRight = Y(r.mr)), r.mb !== void 0 && (e.marginBottom = Y(r.mb)), r.ml !== void 0 && (e.marginLeft = Y(r.ml)), r.p !== void 0 && (e.padding = Y(r.p)), r.px !== void 0 && (e.paddingLeft = Y(r.px), e.paddingRight = Y(r.px)), r.py !== void 0 && (e.paddingTop = Y(r.py), e.paddingBottom = Y(r.py)), r.pt !== void 0 && (e.paddingTop = Y(r.pt)), r.pr !== void 0 && (e.paddingRight = Y(r.pr)), r.pb !== void 0 && (e.paddingBottom = Y(r.pb)), r.pl !== void 0 && (e.paddingLeft = Y(r.pl)), e;
 }
-let dt = 0;
-function Tn(r = "brycks") {
-  return `${r}-${++dt}`;
+let ut = 0;
+function Fn(r = "brycks") {
+  return `${r}-${++ut}`;
 }
-function Ln(r, e) {
+function An(r, e) {
   const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r);
   if (!t) return r;
   const o = parseInt(t[1], 16), n = parseInt(t[2], 16), a = parseInt(t[3], 16);
   return `rgba(${o}, ${n}, ${a}, ${e})`;
 }
-const ut = {
+const yt = {
   none: "0",
   xs: "var(--brycks-radius-xs)",
   sm: "var(--brycks-radius-sm)",
@@ -493,7 +558,7 @@ const ut = {
   "2xl": "var(--brycks-radius-2xl)",
   "3xl": "var(--brycks-radius-3xl)",
   full: "var(--brycks-radius-full)"
-}, yt = {
+}, ft = {
   none: "none",
   xs: "var(--brycks-shadow-xs)",
   sm: "var(--brycks-shadow-sm)",
@@ -502,13 +567,13 @@ const ut = {
   xl: "var(--brycks-shadow-xl)",
   "2xl": "var(--brycks-shadow-2xl)"
 };
-function ft(r) {
+function bt(r) {
   const t = {
-    ...Ie(r)
+    ...Te(r)
   };
-  return r.display && (t.display = r.display), r.position && (t.position = r.position), r.width && (t.width = r.width), r.height && (t.height = r.height), r.minWidth && (t.minWidth = r.minWidth), r.maxWidth && (t.maxWidth = r.maxWidth), r.minHeight && (t.minHeight = r.minHeight), r.maxHeight && (t.maxHeight = r.maxHeight), r.overflow && (t.overflow = r.overflow), r.bg && (t.backgroundColor = r.bg), r.radius && (t.borderRadius = ut[r.radius]), r.shadow && (t.boxShadow = yt[r.shadow]), t;
+  return r.display && (t.display = r.display), r.position && (t.position = r.position), r.width && (t.width = r.width), r.height && (t.height = r.height), r.minWidth && (t.minWidth = r.minWidth), r.maxWidth && (t.maxWidth = r.maxWidth), r.minHeight && (t.minHeight = r.minHeight), r.maxHeight && (t.maxHeight = r.maxHeight), r.overflow && (t.overflow = r.overflow), r.bg && (t.backgroundColor = r.bg), r.radius && (t.borderRadius = yt[r.radius]), r.shadow && (t.boxShadow = ft[r.shadow]), t;
 }
-const bt = [
+const mt = [
   "m",
   "mx",
   "my",
@@ -537,14 +602,14 @@ const bt = [
   "shadow",
   "testId"
 ];
-function mt(r) {
+function gt(r) {
   const e = { ...r };
-  for (const t of bt)
+  for (const t of mt)
     delete e[t];
   return e;
 }
-const gt = ({ as: r, className: e, style: t, children: o, testId: n, ...a }, l) => {
-  const i = r || "div", d = ft(a), c = mt(a);
+const ht = ({ as: r, className: e, style: t, children: o, testId: n, ...a }, l) => {
+  const i = r || "div", d = bt(a), c = gt(a);
   return /* @__PURE__ */ s(
     i,
     {
@@ -556,9 +621,9 @@ const gt = ({ as: r, className: e, style: t, children: o, testId: n, ...a }, l)
       children: o
     }
   );
-}, ht = z(gt);
-ht.displayName = "Box";
-const pt = [
+}, pt = z(ht);
+pt.displayName = "Box";
+const kt = [
   "m",
   "mx",
   "my",
@@ -583,22 +648,22 @@ const pt = [
   "inline",
   "testId"
 ];
-function kt(r) {
+function vt(r) {
   const e = { ...r };
-  for (const t of pt)
+  for (const t of kt)
     delete e[t];
   return e;
 }
-function vt(r) {
+function xt(r) {
   const t = {
-    ...Ie(r),
+    ...Te(r),
     display: r.inline ? "inline-flex" : "flex",
     flexDirection: r.direction ?? "column"
   };
-  return r.gap !== void 0 ? t.gap = O(r.gap) : (r.gapX !== void 0 && (t.columnGap = O(r.gapX)), r.gapY !== void 0 && (t.rowGap = O(r.gapY))), r.align && (t.alignItems = r.align), r.justify && (t.justifyContent = r.justify), r.wrap && (t.flexWrap = r.wrap), t;
+  return r.gap !== void 0 ? t.gap = Y(r.gap) : (r.gapX !== void 0 && (t.columnGap = Y(r.gapX)), r.gapY !== void 0 && (t.rowGap = Y(r.gapY))), r.align && (t.alignItems = r.align), r.justify && (t.justifyContent = r.justify), r.wrap && (t.flexWrap = r.wrap), t;
 }
-const xt = ({ as: r, className: e, style: t, children: o, testId: n, ...a }, l) => {
-  const i = r || "div", d = vt(a), c = kt(a);
+const St = ({ as: r, className: e, style: t, children: o, testId: n, ...a }, l) => {
+  const i = r || "div", d = xt(a), c = vt(a);
   return /* @__PURE__ */ s(
     i,
     {
@@ -610,13 +675,13 @@ const xt = ({ as: r, className: e, style: t, children: o, testId: n, ...a }, l)
       children: o
     }
   );
-}, Le = z(xt);
-Le.displayName = "Stack";
-const St = (r, e) => /* @__PURE__ */ s(Le, { ref: e, direction: "row", align: "center", ...r }), wt = z(St);
-wt.displayName = "HStack";
-const Ct = (r, e) => /* @__PURE__ */ s(Le, { ref: e, direction: "column", ...r }), zt = z(Ct);
-zt.displayName = "VStack";
-const Mt = [
+}, Ne = z(St);
+Ne.displayName = "Stack";
+const wt = (r, e) => /* @__PURE__ */ s(Ne, { ref: e, direction: "row", align: "center", ...r }), Ct = z(wt);
+Ct.displayName = "HStack";
+const zt = (r, e) => /* @__PURE__ */ s(Ne, { ref: e, direction: "column", ...r }), Mt = z(zt);
+Mt.displayName = "VStack";
+const It = [
   "m",
   "mx",
   "my",
@@ -644,21 +709,21 @@ const Mt = [
   "inline",
   "testId"
 ];
-function It(r) {
+function Tt(r) {
   const e = { ...r };
-  for (const t of Mt)
+  for (const t of It)
     delete e[t];
   return e;
 }
-function Tt(r) {
+function Lt(r) {
   const t = {
-    ...Ie(r),
+    ...Te(r),
     display: r.inline ? "inline-grid" : "grid"
   };
-  return r.columns !== void 0 && (t.gridTemplateColumns = typeof r.columns == "number" ? `repeat(${r.columns}, 1fr)` : r.columns), r.rows !== void 0 && (t.gridTemplateRows = typeof r.rows == "number" ? `repeat(${r.rows}, 1fr)` : r.rows), r.templateColumns && (t.gridTemplateColumns = r.templateColumns), r.templateRows && (t.gridTemplateRows = r.templateRows), r.gap !== void 0 ? t.gap = O(r.gap) : (r.gapX !== void 0 && (t.columnGap = O(r.gapX)), r.gapY !== void 0 && (t.rowGap = O(r.gapY))), r.align && (t.alignItems = r.align), r.justify && (t.justifyItems = r.justify), r.flow && (t.gridAutoFlow = r.flow), t;
+  return r.columns !== void 0 && (t.gridTemplateColumns = typeof r.columns == "number" ? `repeat(${r.columns}, 1fr)` : r.columns), r.rows !== void 0 && (t.gridTemplateRows = typeof r.rows == "number" ? `repeat(${r.rows}, 1fr)` : r.rows), r.templateColumns && (t.gridTemplateColumns = r.templateColumns), r.templateRows && (t.gridTemplateRows = r.templateRows), r.gap !== void 0 ? t.gap = Y(r.gap) : (r.gapX !== void 0 && (t.columnGap = Y(r.gapX)), r.gapY !== void 0 && (t.rowGap = Y(r.gapY))), r.align && (t.alignItems = r.align), r.justify && (t.justifyItems = r.justify), r.flow && (t.gridAutoFlow = r.flow), t;
 }
-const Lt = ({ as: r, className: e, style: t, children: o, testId: n, ...a }, l) => {
-  const i = r || "div", d = Tt(a), c = It(a);
+const Nt = ({ as: r, className: e, style: t, children: o, testId: n, ...a }, l) => {
+  const i = r || "div", d = Lt(a), c = Tt(a);
   return /* @__PURE__ */ s(
     i,
     {
@@ -670,9 +735,9 @@ const Lt = ({ as: r, className: e, style: t, children: o, testId: n, ...a }, l)
       children: o
     }
   );
-}, Nt = z(Lt);
-Nt.displayName = "Grid";
-const $t = ({
+}, $t = z(Nt);
+$t.displayName = "Grid";
+const Ht = ({
   as: r,
   className: e,
   style: t,
@@ -698,9 +763,9 @@ const $t = ({
       children: o
     }
   );
-}, Wt = z($t);
+}, Wt = z(Ht);
 Wt.displayName = "GridItem";
-const Ht = [
+const Dt = [
   "m",
   "mx",
   "my",
@@ -720,22 +785,22 @@ const Ht = [
   "padded",
   "testId"
 ];
-function Dt(r) {
+function Bt(r) {
   const e = { ...r };
-  for (const t of Ht)
+  for (const t of Dt)
     delete e[t];
   return e;
 }
-function Bt(r) {
-  const e = Ie(r), t = r.size ?? "xl", o = ot[t], n = {
+function Et(r) {
+  const e = Te(r), t = r.size ?? "xl", o = nt[t], n = {
     ...e,
     width: "100%",
     maxWidth: typeof o == "number" ? `${o}px` : o
   };
   return r.centered !== !1 && (n.marginLeft = "auto", n.marginRight = "auto"), r.padded !== !1 && (n.paddingLeft = "var(--brycks-space-4)", n.paddingRight = "var(--brycks-space-4)"), n;
 }
-const Et = ({ as: r, className: e, style: t, children: o, testId: n, ...a }, l) => {
-  const i = r || "div", d = Bt(a), c = Dt(a);
+const Rt = ({ as: r, className: e, style: t, children: o, testId: n, ...a }, l) => {
+  const i = r || "div", d = Et(a), c = Bt(a);
   return /* @__PURE__ */ s(
     i,
     {
@@ -747,15 +812,15 @@ const Et = ({ as: r, className: e, style: t, children: o, testId: n, ...a }, l)
       children: o
     }
   );
-}, Rt = z(Et);
-Rt.displayName = "Container";
-const Ft = {
+}, Ft = z(Rt);
+Ft.displayName = "Container";
+const At = {
   none: 0,
   sm: 12,
   md: 16,
   lg: 24,
   xl: 32
-}, At = z(function({
+}, jt = z(function({
   variant: e = "elevated",
   padding: t = "md",
   interactive: o = !1,
@@ -770,7 +835,7 @@ const Ft = {
     ...(() => {
       const y = {
         borderRadius: "var(--brycks-radius-lg)",
-        transition: "all 150ms ease-out"
+        transition: "transform 150ms ease-out, box-shadow 150ms ease-out, border-color 150ms ease-out"
       };
       switch (e) {
         case "elevated":
@@ -800,7 +865,7 @@ const Ft = {
           };
       }
     })(),
-    padding: Ft[t],
+    padding: At[t],
     display: "flex",
     flexDirection: "column",
     cursor: o ? "pointer" : void 0,
@@ -832,8 +897,8 @@ const Ft = {
     }
   );
 });
-At.displayName = "Card";
-const jt = z(function({ divider: e = !1, className: t, style: o, children: n, ...a }, l) {
+jt.displayName = "Card";
+const Vt = z(function({ divider: e = !1, className: t, style: o, children: n, ...a }, l) {
   const i = {
     display: "flex",
     alignItems: "center",
@@ -846,16 +911,16 @@ const jt = z(function({ divider: e = !1, className: t, style: o, children: n, ..
   };
   return /* @__PURE__ */ s("div", { ref: l, className: M("brycks-card-header", t), style: i, ...a, children: n });
 });
-jt.displayName = "CardHeader";
-const Pt = z(function({ className: e, style: t, children: o, ...n }, a) {
+Vt.displayName = "CardHeader";
+const Ot = z(function({ className: e, style: t, children: o, ...n }, a) {
   const l = {
     flex: 1,
     ...t
   };
   return /* @__PURE__ */ s("div", { ref: a, className: M("brycks-card-body", e), style: l, ...n, children: o });
 });
-Pt.displayName = "CardBody";
-const Vt = z(function({ divider: e = !1, align: t = "right", className: o, style: n, children: a, ...l }, i) {
+Ot.displayName = "CardBody";
+const Pt = z(function({ divider: e = !1, align: t = "right", className: o, style: n, children: a, ...l }, i) {
   const c = {
     display: "flex",
     alignItems: "center",
@@ -873,14 +938,14 @@ const Vt = z(function({ divider: e = !1, align: t = "right", className: o, style
   };
   return /* @__PURE__ */ s("div", { ref: i, className: M("brycks-card-footer", o), style: c, ...l, children: a });
 });
-Vt.displayName = "CardFooter";
-const He = {
+Pt.displayName = "CardFooter";
+const De = {
   none: 0,
   sm: 16,
   md: 24,
   lg: 32,
   xl: 48
-}, Ot = z(function({
+}, Xt = z(function({
   title: e,
   description: t,
   titleLevel: o = "h2",
@@ -897,8 +962,8 @@ const He = {
     display: "flex",
     flexDirection: "column",
     gap: 16,
-    paddingTop: a ? He[n] : 0,
-    marginTop: He[n],
+    paddingTop: a ? De[n] : 0,
+    marginTop: De[n],
     borderTop: a ? "1px solid var(--brycks-border-muted)" : void 0,
     ...d
   }, g = {
@@ -951,8 +1016,8 @@ const He = {
     }
   );
 });
-Ot.displayName = "Section";
-const Xt = z(function({
+Xt.displayName = "Section";
+const Yt = z(function({
   size: e,
   customSize: t,
   flex: o = !1,
@@ -961,7 +1026,7 @@ const Xt = z(function({
   style: l,
   ...i
 }, d) {
-  const c = t ?? (e ? j[e] : void 0), u = {
+  const c = t ?? (e ? D[e] : void 0), u = {
     flex: o ? 1 : void 0,
     width: n === "horizontal" ? c ?? (o ? void 0 : 0) : void 0,
     height: n === "vertical" ? c ?? (o ? void 0 : 0) : void 0,
@@ -981,21 +1046,21 @@ const Xt = z(function({
     }
   );
 });
-Xt.displayName = "Spacer";
-const Yt = {
+Yt.displayName = "Spacer";
+const Kt = {
   start: "flex-start",
   end: "flex-end",
   center: "center",
   between: "space-between",
   around: "space-around",
   evenly: "space-evenly"
-}, De = {
+}, Be = {
   start: "flex-start",
   end: "flex-end",
   center: "center",
   baseline: "baseline",
   stretch: "stretch"
-}, Kt = z(function({
+}, Gt = z(function({
   direction: e = "row",
   wrap: t = "nowrap",
   justify: o = "start",
@@ -1017,11 +1082,11 @@ const Yt = {
     display: d ? "inline-flex" : "flex",
     flexDirection: e,
     flexWrap: t,
-    justifyContent: Yt[o],
-    alignItems: De[n],
-    gap: a ? j[a] : void 0,
-    rowGap: l ? j[l] : void 0,
-    columnGap: i ? j[i] : void 0,
+    justifyContent: Kt[o],
+    alignItems: Be[n],
+    gap: a ? D[a] : void 0,
+    rowGap: l ? D[l] : void 0,
+    columnGap: i ? D[i] : void 0,
     flexGrow: c,
     flexShrink: u,
     flexBasis: m,
@@ -1039,8 +1104,8 @@ const Yt = {
     }
   );
 });
-Kt.displayName = "Flex";
-const Gt = z(function({
+Gt.displayName = "Flex";
+const qt = z(function({
   grow: e,
   shrink: t,
   basis: o,
@@ -1056,7 +1121,7 @@ const Gt = z(function({
     flexGrow: e,
     flexShrink: t,
     flexBasis: o,
-    alignSelf: n ? De[n] : void 0,
+    alignSelf: n ? Be[n] : void 0,
     order: a,
     ...d
   };
@@ -1072,28 +1137,28 @@ const Gt = z(function({
     }
   );
 });
-Gt.displayName = "FlexItem";
-const Be = {
-  body: { element: "p", styles: de.bodyDefault },
-  bodyLarge: { element: "p", styles: de.bodyLarge },
-  bodySmall: { element: "p", styles: de.bodySmall },
-  label: { element: "span", styles: de.label },
-  caption: { element: "span", styles: de.caption },
-  overline: { element: "span", styles: de.overline },
-  code: { element: "code", styles: de.code }
+qt.displayName = "FlexItem";
+const Ee = {
+  body: { element: "p", styles: le.bodyDefault },
+  bodyLarge: { element: "p", styles: le.bodyLarge },
+  bodySmall: { element: "p", styles: le.bodySmall },
+  label: { element: "span", styles: le.label },
+  caption: { element: "span", styles: le.caption },
+  overline: { element: "span", styles: le.overline },
+  code: { element: "code", styles: le.code }
 };
-function qt(r) {
-  const e = r.variant ?? "body", t = Be[e].styles, o = {
+function _t(r) {
+  const e = r.variant ?? "body", t = Ee[e].styles, o = {
     fontFamily: t.fontFamily,
-    fontSize: r.size ? ge[r.size] : t.fontSize,
-    fontWeight: r.weight ? xe[r.weight] : t.fontWeight,
-    lineHeight: r.leading ? Ce[r.leading] : t.lineHeight,
+    fontSize: r.size ? me[r.size] : t.fontSize,
+    fontWeight: r.weight ? Se[r.weight] : t.fontWeight,
+    lineHeight: r.leading ? ze[r.leading] : t.lineHeight,
     letterSpacing: t.letterSpacing
   };
   return "textTransform" in t && (o.textTransform = t.textTransform), r.align && (o.textAlign = r.align), r.color && (o.color = r.color), r.truncate && (o.overflow = "hidden", o.textOverflow = "ellipsis", o.whiteSpace = "nowrap"), r.lineClamp && (o.display = "-webkit-box", o.WebkitLineClamp = r.lineClamp, o.WebkitBoxOrient = "vertical", o.overflow = "hidden"), o;
 }
-const _t = ({ as: r, variant: e = "body", className: t, style: o, children: n, testId: a, ...l }, i) => {
-  const d = r || Be[e].element, c = qt({ variant: e, ...l }), {
+const Ut = ({ as: r, variant: e = "body", className: t, style: o, children: n, testId: a, ...l }, i) => {
+  const d = r || Ee[e].element, c = _t({ variant: e, ...l }), {
     size: u,
     weight: m,
     leading: h,
@@ -1114,24 +1179,24 @@ const _t = ({ as: r, variant: e = "body", className: t, style: o, children: n, t
       children: n
     }
   );
-}, Ee = z(_t);
-Ee.displayName = "Text";
-const Ut = (r, e) => /* @__PURE__ */ s(
-  Ee,
+}, Re = z(Ut);
+Re.displayName = "Text";
+const Zt = (r, e) => /* @__PURE__ */ s(
+  Re,
   {
     ...r,
     ref: e,
     variant: "code",
     style: {
       backgroundColor: "var(--brycks-background-muted)",
-      padding: `${j[0.5]}px ${j[1.5]}px`,
+      padding: `${D[0.5]}px ${D[1.5]}px`,
       borderRadius: "var(--brycks-radius-sm)",
       ...r.style
     }
   }
-), Zt = z(Ut);
-Zt.displayName = "Code";
-const Qt = {
+), Qt = z(Zt);
+Qt.displayName = "Code";
+const Jt = {
   1: "h1",
   2: "h2",
   3: "h3",
@@ -1142,19 +1207,19 @@ const Qt = {
   displayLarge: "displayLarge",
   displaySmall: "displaySmall"
 };
-function Jt(r) {
-  const e = r.level ?? 2, t = r.size ?? e, o = Qt[t], n = de[o], a = {
+function er(r) {
+  const e = r.level ?? 2, t = r.size ?? e, o = Jt[t], n = le[o], a = {
     fontFamily: n.fontFamily,
     fontSize: n.fontSize,
-    fontWeight: r.weight ? xe[r.weight] : n.fontWeight,
+    fontWeight: r.weight ? Se[r.weight] : n.fontWeight,
     lineHeight: n.lineHeight,
     letterSpacing: n.letterSpacing,
     margin: 0
   };
   return r.align && (a.textAlign = r.align), r.color && (a.color = r.color), r.truncate && (a.overflow = "hidden", a.textOverflow = "ellipsis", a.whiteSpace = "nowrap"), a;
 }
-const er = ({ as: r, level: e = 2, className: t, style: o, children: n, testId: a, ...l }, i) => {
-  const d = r || `h${e}`, c = Jt({ level: e, ...l }), {
+const tr = ({ as: r, level: e = 2, className: t, style: o, children: n, testId: a, ...l }, i) => {
+  const d = r || `h${e}`, c = er({ level: e, ...l }), {
     size: u,
     weight: m,
     align: h,
@@ -1173,52 +1238,52 @@ const er = ({ as: r, level: e = 2, className: t, style: o, children: n, testId:
       children: n
     }
   );
-}, Re = z(er);
-Re.displayName = "Heading";
-const tr = ({ size: r = "display", ...e }, t) => /* @__PURE__ */ s(Re, { ref: t, level: 1, size: r, ...e }), rr = z(tr);
-rr.displayName = "Display";
-const Fe = {
+}, Fe = z(tr);
+Fe.displayName = "Heading";
+const rr = ({ size: r = "display", ...e }, t) => /* @__PURE__ */ s(Fe, { ref: t, level: 1, size: r, ...e }), or = z(rr);
+or.displayName = "Display";
+const Ae = {
   xs: {
-    height: ue.xs,
-    paddingX: ye.xs,
-    fontSize: Y.xs,
-    iconSize: Se.xs,
+    height: ce.xs,
+    paddingX: de.xs,
+    fontSize: K.xs,
+    iconSize: we.xs,
     gap: ae.xs,
     radius: "var(--brycks-radius-md)"
   },
   sm: {
-    height: ue.sm,
-    paddingX: ye.sm,
-    fontSize: Y.sm,
-    iconSize: Se.sm,
+    height: ce.sm,
+    paddingX: de.sm,
+    fontSize: K.sm,
+    iconSize: we.sm,
     gap: ae.sm,
     radius: "var(--brycks-radius-md)"
   },
   md: {
-    height: ue.md,
-    paddingX: ye.md,
-    fontSize: Y.md,
-    iconSize: Se.md,
+    height: ce.md,
+    paddingX: de.md,
+    fontSize: K.md,
+    iconSize: we.md,
     gap: ae.md,
     radius: "var(--brycks-radius-default)"
   },
   lg: {
-    height: ue.lg,
-    paddingX: ye.lg,
-    fontSize: Y.lg,
-    iconSize: Se.lg,
+    height: ce.lg,
+    paddingX: de.lg,
+    fontSize: K.lg,
+    iconSize: we.lg,
     gap: ae.md,
     radius: "var(--brycks-radius-lg)"
   },
   xl: {
-    height: ue.xl,
-    paddingX: ye.xl,
-    fontSize: Y.xl,
-    iconSize: Se.xl,
+    height: ce.xl,
+    paddingX: de.xl,
+    fontSize: K.xl,
+    iconSize: we.xl,
     gap: ae.lg,
     radius: "var(--brycks-radius-xl)"
   }
-}, or = {
+}, nr = {
   primary: {
     solid: {
       bg: "var(--brycks-primary-default)",
@@ -1376,8 +1441,8 @@ const Fe = {
     }
   }
 };
-function nr(r) {
-  const { variant: e, intent: t, size: o, fullWidth: n, isIconOnly: a } = r, l = Fe[o], i = or[t][e], d = {
+function sr(r) {
+  const { variant: e, intent: t, size: o, fullWidth: n, isIconOnly: a } = r, l = Ae[o], i = nr[t][e], d = {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
@@ -1396,7 +1461,7 @@ function nr(r) {
     cursor: "pointer",
     userSelect: "none",
     textDecoration: "none",
-    transition: pe.quick,
+    transition: he.quick,
     WebkitTapHighlightColor: "transparent"
   };
   switch (e) {
@@ -1473,14 +1538,14 @@ function nr(r) {
     }
   }
   const u = {
-    transform: e !== "link" ? `scale(${he.pressed})` : void 0
+    transform: e !== "link" ? `scale(${ge.pressed})` : void 0
   };
   if (e === "solid") {
     const y = i;
     u.backgroundColor = y.activeBg, u.boxShadow = "var(--brycks-shadow-xs)";
   }
   const m = {
-    opacity: Me.disabled,
+    opacity: Ie.disabled,
     cursor: "not-allowed",
     pointerEvents: "none"
   };
@@ -1489,7 +1554,7 @@ function nr(r) {
     pointerEvents: "none"
   } };
 }
-function sr({ size: r }) {
+function ar({ size: r }) {
   return /* @__PURE__ */ S(
     "svg",
     {
@@ -1538,7 +1603,7 @@ function sr({ size: r }) {
     }
   );
 }
-const ar = ({
+const ir = ({
   as: r,
   variant: e = "solid",
   intent: t = "primary",
@@ -1559,28 +1624,28 @@ const ar = ({
   onMouseUp: k,
   ...x
 }, v) => {
-  const C = r || "button", [N, p] = E(!1), [I, w] = E(!1), T = l || a, W = nr({
+  const C = r || "button", [N, p] = B(!1), [I, w] = B(!1), T = l || a, $ = sr({
     variant: e,
     intent: t,
     size: o,
     fullWidth: n,
     isIconOnly: c
   }), L = {
-    ...W.base,
-    ...N && !T ? W.hover : {},
-    ...I && !T ? W.active : {},
-    ...T ? W.disabled : {},
-    ...a ? W.loading : {},
+    ...$.base,
+    ...N && !T ? $.hover : {},
+    ...I && !T ? $.active : {},
+    ...T ? $.disabled : {},
+    ...a ? $.loading : {},
     ...m
-  }, R = Fe[o], H = (X) => {
-    p(!0), f == null || f(X);
-  }, K = (X) => {
-    p(!1), w(!1), g == null || g(X);
-  }, $ = (X) => {
-    w(!0), b == null || b(X);
-  }, B = (X) => {
-    w(!1), k == null || k(X);
-  }, F = M(
+  }, E = Ae[o], W = (_) => {
+    p(!0), f == null || f(_);
+  }, q = (_) => {
+    p(!1), w(!1), g == null || g(_);
+  }, P = (_) => {
+    w(!0), b == null || b(_);
+  }, H = (_) => {
+    w(!1), k == null || k(_);
+  }, R = M(
     "brycks-button",
     `brycks-button--${e}`,
     `brycks-button--${t}`,
@@ -1590,7 +1655,7 @@ const ar = ({
     a && "brycks-button--loading",
     T && "brycks-button--disabled",
     u
-  ), oe = C === "button" || r === void 0 ? {
+  ), J = C === "button" || r === void 0 ? {
     type: x.type ?? "button",
     disabled: T
   } : {
@@ -1602,14 +1667,14 @@ const ar = ({
     C,
     {
       ref: v,
-      className: F,
+      className: R,
       style: L,
       "data-testid": y,
-      onMouseEnter: H,
-      onMouseLeave: K,
-      onMouseDown: $,
-      onMouseUp: B,
-      ...oe,
+      onMouseEnter: W,
+      onMouseLeave: q,
+      onMouseDown: P,
+      onMouseUp: H,
+      ...J,
       ...x,
       children: [
         a && /* @__PURE__ */ s(
@@ -1619,7 +1684,7 @@ const ar = ({
               display: "inline-flex",
               position: c ? "absolute" : "relative"
             },
-            children: /* @__PURE__ */ s(sr, { size: R.iconSize })
+            children: /* @__PURE__ */ s(ar, { size: E.iconSize })
           }
         ),
         !a && i && /* @__PURE__ */ s(
@@ -1627,8 +1692,8 @@ const ar = ({
           {
             style: {
               display: "inline-flex",
-              width: R.iconSize,
-              height: R.iconSize
+              width: E.iconSize,
+              height: E.iconSize
             },
             children: i
           }
@@ -1647,8 +1712,8 @@ const ar = ({
           {
             style: {
               display: "inline-flex",
-              width: R.iconSize,
-              height: R.iconSize
+              width: E.iconSize,
+              height: E.iconSize
             },
             children: d
           }
@@ -1657,18 +1722,18 @@ const ar = ({
       ]
     }
   );
-}, Ae = z(ar);
-Ae.displayName = "Button";
-const ir = (r, e) => /* @__PURE__ */ s(Ae, { ref: e, isIconOnly: !0, ...r }), lr = z(ir);
-lr.displayName = "IconButton";
-const cr = {
+}, je = z(ir);
+je.displayName = "Button";
+const lr = (r, e) => /* @__PURE__ */ s(je, { ref: e, isIconOnly: !0, ...r }), cr = z(lr);
+cr.displayName = "IconButton";
+const dr = {
   xs: 12,
   sm: 14,
   md: 16,
   lg: 20,
   xl: 24,
   "2xl": 32
-}, dr = z(function({
+}, ur = z(function({
   size: e = "md",
   customSize: t,
   color: o,
@@ -1683,7 +1748,7 @@ const cr = {
   children: h,
   ...y
 }, f) {
-  const g = t ?? cr[e], b = {
+  const g = t ?? dr[e], b = {
     width: g,
     height: g,
     minWidth: g,
@@ -1711,8 +1776,8 @@ const cr = {
     }
   );
 });
-dr.displayName = "Icon";
-const Nn = {
+ur.displayName = "Icon";
+const jn = {
   close: "M18 6L6 18M6 6l12 12",
   check: "M20 6L9 17l-5-5",
   chevronDown: "M6 9l6 6 6-6",
@@ -1765,27 +1830,31 @@ const Nn = {
   moon: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z",
   grip: "M4 6a2 2 0 114 0 2 2 0 01-4 0zM10 6a2 2 0 114 0 2 2 0 01-4 0zM16 6a2 2 0 114 0 2 2 0 01-4 0zM4 12a2 2 0 114 0 2 2 0 01-4 0zM10 12a2 2 0 114 0 2 2 0 01-4 0zM16 12a2 2 0 114 0 2 2 0 01-4 0zM4 18a2 2 0 114 0 2 2 0 01-4 0zM10 18a2 2 0 114 0 2 2 0 01-4 0zM16 18a2 2 0 114 0 2 2 0 01-4 0z",
   moreHorizontal: "M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z",
-  moreVertical: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-}, ur = {
+  moreVertical: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z",
+  layout: "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z",
+  car: "M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9L18 10l-1.6-3.2c-.4-.8-1.2-1.3-2.1-1.3H9.7c-.9 0-1.7.5-2.1 1.3L6 10l-2.5 1.1C2.7 11.3 2 12.1 2 13v3c0 .6.4 1 1 1h2M7 17h10M7 17a2 2 0 11-4 0 2 2 0 014 0zm12 0a2 2 0 11-4 0 2 2 0 014 0z",
+  page: "M4 4a2 2 0 012-2h8l6 6v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm10 0v6h6",
+  gridVertical: "M9 4a1 1 0 110 2 1 1 0 010-2zm6 0a1 1 0 110 2 1 1 0 010-2zm-6 5a1 1 0 110 2 1 1 0 010-2zm6 0a1 1 0 110 2 1 1 0 010-2zm-6 5a1 1 0 110 2 1 1 0 010-2zm6 0a1 1 0 110 2 1 1 0 010-2zm-6 5a1 1 0 110 2 1 1 0 010-2zm6 0a1 1 0 110 2 1 1 0 010-2z"
+}, yr = {
   sm: {
-    height: ue.sm,
-    fontSize: Y.sm,
-    paddingX: ye.sm,
+    height: ce.sm,
+    fontSize: K.sm,
+    paddingX: de.sm,
     radius: "var(--brycks-radius-md)"
   },
   md: {
-    height: ue.md,
-    fontSize: Y.md,
-    paddingX: ye.md,
+    height: ce.md,
+    fontSize: K.md,
+    paddingX: de.md,
     radius: "var(--brycks-radius-default)"
   },
   lg: {
-    height: ue.lg,
-    fontSize: Y.lg,
-    paddingX: ye.lg,
+    height: ce.lg,
+    fontSize: K.lg,
+    paddingX: de.lg,
     radius: "var(--brycks-radius-lg)"
   }
-}, je = z(function({
+}, Ve = z(function({
   size: e = "md",
   variant: t = "outline",
   isInvalid: o,
@@ -1799,7 +1868,7 @@ const Nn = {
   onBlur: m,
   ...h
 }, y) {
-  const [f, g] = E(!1), b = ur[e], k = () => {
+  const [f, g] = B(!1), b = yr[e], k = () => {
     const p = {
       display: "flex",
       alignItems: "center",
@@ -1807,14 +1876,14 @@ const Nn = {
       position: "relative",
       height: b.height,
       borderRadius: b.radius,
-      transition: pe.default
+      transition: he.default
     };
     switch (t) {
       case "outline":
         Object.assign(p, {
           backgroundColor: "var(--brycks-background-app)",
           border: `1px solid ${o ? "var(--brycks-error-default)" : f ? "var(--brycks-border-focus)" : "var(--brycks-border-default)"}`,
-          boxShadow: f ? o ? fe.error : fe.default : fe.none
+          boxShadow: f ? o ? ue.error : ue.default : ue.none
         });
         break;
       case "filled":
@@ -1833,7 +1902,7 @@ const Nn = {
         break;
     }
     return c && Object.assign(p, {
-      opacity: Me.disabled,
+      opacity: Ie.disabled,
       cursor: "not-allowed"
     }), p;
   }, x = {
@@ -1849,7 +1918,7 @@ const Nn = {
     paddingLeft: n ? ae.md : b.paddingX,
     paddingRight: a ? ae.md : b.paddingX,
     cursor: c ? "not-allowed" : "text",
-    transition: pe.default
+    transition: he.default
   }, v = (p) => {
     g(!0), u == null || u(p);
   }, C = (p) => {
@@ -1908,8 +1977,8 @@ const Nn = {
     }
   );
 });
-je.displayName = "Input";
-const yr = z(function({
+Ve.displayName = "Input";
+const fr = z(function({
   label: e,
   helperText: t,
   errorMessage: o,
@@ -1921,7 +1990,7 @@ const yr = z(function({
   testId: c,
   ...u
 }, m) {
-  const h = nt(), y = i ?? h, f = `${y}-helper`, g = `${y}-error`, b = !!o || l, k = [b && g, t && f].filter(Boolean).join(" "), x = {
+  const h = st(), y = i ?? h, f = `${y}-helper`, g = `${y}-error`, b = !!o || l, k = [b && g, t && f].filter(Boolean).join(" "), x = {
     display: "block",
     marginBottom: 6,
     fontSize: 13,
@@ -1973,7 +2042,7 @@ const yr = z(function({
           )
         ] }),
         /* @__PURE__ */ s(
-          je,
+          Ve,
           {
             ref: m,
             id: y,
@@ -1989,13 +2058,13 @@ const yr = z(function({
     }
   );
 });
-yr.displayName = "TextField";
-const fr = {
+fr.displayName = "TextField";
+const br = {
   sm: { height: 32, fontSize: 13, padding: 10 },
   md: { height: 40, fontSize: 14, padding: 12 },
   lg: { height: 48, fontSize: 15, padding: 14 }
 };
-function br() {
+function mr() {
   return /* @__PURE__ */ s("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ s(
     "path",
     {
@@ -2007,7 +2076,7 @@ function br() {
     }
   ) });
 }
-const mr = z(function({
+const gr = z(function({
   size: e = "md",
   variant: t = "outline",
   isInvalid: o,
@@ -2022,7 +2091,7 @@ const mr = z(function({
   value: h,
   ...y
 }, f) {
-  const [g, b] = E(!1), k = fr[e], x = h !== void 0 && h !== "", v = {
+  const [g, b] = B(!1), k = br[e], x = h !== void 0 && h !== "", v = {
     position: "relative",
     display: "inline-flex",
     width: "100%"
@@ -2091,13 +2160,13 @@ const mr = z(function({
             ]
           }
         ),
-        /* @__PURE__ */ s("span", { style: N, children: /* @__PURE__ */ s(br, {}) })
+        /* @__PURE__ */ s("span", { style: N, children: /* @__PURE__ */ s(mr, {}) })
       ]
     }
   );
 });
-mr.displayName = "Select";
-function gr({ size: r }) {
+gr.displayName = "Select";
+function hr({ size: r }) {
   return /* @__PURE__ */ s("svg", { width: r, height: r, viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ s(
     "path",
     {
@@ -2109,7 +2178,7 @@ function gr({ size: r }) {
     }
   ) });
 }
-function hr({ size: r }) {
+function pr({ size: r }) {
   return /* @__PURE__ */ s("svg", { width: r, height: r, viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ s(
     "path",
     {
@@ -2120,7 +2189,7 @@ function hr({ size: r }) {
     }
   ) });
 }
-const pr = z(function({
+const kr = z(function({
   size: e = "md",
   label: t,
   description: o,
@@ -2134,12 +2203,12 @@ const pr = z(function({
   onChange: m,
   ...h
 }, y) {
-  const [f, g] = E(!1), [b, k] = E(!1), [x, v] = E(!1), C = lt[e], N = Y[e], p = u || a, I = {
+  const [f, g] = B(!1), [b, k] = B(!1), [x, v] = B(!1), C = ct[e], N = K[e], p = u || a, I = {
     display: "inline-flex",
     alignItems: "flex-start",
     gap: ae.lg,
     cursor: c ? "not-allowed" : "pointer",
-    opacity: c ? Me.disabled : 1
+    opacity: c ? Ie.disabled : 1
   }, w = {
     position: "relative",
     width: C.box,
@@ -2147,9 +2216,9 @@ const pr = z(function({
     borderRadius: "var(--brycks-radius-sm)",
     border: `1.5px solid ${n ? "var(--brycks-error-default)" : p ? "var(--brycks-primary-default)" : f ? "var(--brycks-border-focus)" : "var(--brycks-border-default)"}`,
     backgroundColor: p ? "var(--brycks-primary-default)" : b ? "var(--brycks-background-subtle)" : "var(--brycks-background-app)",
-    transition: pe.quick,
-    transform: x ? `scale(${he.controlPressed})` : `scale(${he.normal})`,
-    boxShadow: f ? fe.default : fe.none,
+    transition: he.quick,
+    transform: x ? `scale(${ge.controlPressed})` : `scale(${ge.normal})`,
+    boxShadow: f ? ue.default : ue.none,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -2157,9 +2226,9 @@ const pr = z(function({
   }, T = {
     color: "var(--brycks-primary-foreground)",
     opacity: p ? 1 : 0,
-    transform: p ? `scale(${he.normal})` : `scale(${he.hidden})`,
-    transition: pe.quick
-  }, W = {
+    transform: p ? `scale(${ge.normal})` : `scale(${ge.hidden})`,
+    transition: he.quick
+  }, $ = {
     position: "absolute",
     width: "100%",
     height: "100%",
@@ -2171,12 +2240,12 @@ const pr = z(function({
     flexDirection: "column",
     gap: ae.xs,
     paddingTop: (C.box - N) / 2
-  }, R = {
+  }, E = {
     fontSize: N,
     lineHeight: U.snug,
     color: "var(--brycks-foreground-default)",
     userSelect: "none"
-  }, H = {
+  }, W = {
     fontSize: N - 1,
     lineHeight: U.snug,
     color: "var(--brycks-foreground-muted)",
@@ -2208,7 +2277,7 @@ const pr = z(function({
             {
               ref: y,
               type: "checkbox",
-              style: W,
+              style: $,
               checked: u,
               disabled: c,
               "aria-invalid": n,
@@ -2218,18 +2287,18 @@ const pr = z(function({
               ...h
             }
           ),
-          /* @__PURE__ */ s("span", { style: T, children: a ? /* @__PURE__ */ s(hr, { size: C.icon }) : /* @__PURE__ */ s(gr, { size: C.icon }) })
+          /* @__PURE__ */ s("span", { style: T, children: a ? /* @__PURE__ */ s(pr, { size: C.icon }) : /* @__PURE__ */ s(hr, { size: C.icon }) })
         ] }),
         (t || o) && /* @__PURE__ */ S("span", { style: L, children: [
-          t && /* @__PURE__ */ s("span", { style: R, children: t }),
-          o && /* @__PURE__ */ s("span", { style: H, children: o })
+          t && /* @__PURE__ */ s("span", { style: E, children: t }),
+          o && /* @__PURE__ */ s("span", { style: W, children: o })
         ] })
       ]
     }
   );
 });
-pr.displayName = "Checkbox";
-const kr = z(function({
+kr.displayName = "Checkbox";
+const vr = z(function({
   size: e = "md",
   label: t,
   description: o,
@@ -2241,12 +2310,12 @@ const kr = z(function({
   onChange: c,
   ...u
 }, m) {
-  const [h, y] = E(!1), [f, g] = E(!1), b = ct[e], k = Y[e], x = (b.height - b.thumb) / 2, v = b.width - b.thumb - x * 2, C = {
+  const [h, y] = B(!1), [f, g] = B(!1), b = dt[e], k = K[e], x = (b.height - b.thumb) / 2, v = b.width - b.thumb - x * 2, C = {
     display: "inline-flex",
     alignItems: "flex-start",
     gap: ae.xl,
     cursor: i ? "not-allowed" : "pointer",
-    opacity: i ? Me.disabled : 1
+    opacity: i ? Ie.disabled : 1
   }, N = {
     position: "relative",
     width: b.width,
@@ -2254,8 +2323,8 @@ const kr = z(function({
     borderRadius: b.height / 2,
     backgroundColor: d ? "var(--brycks-primary-default)" : "var(--brycks-background-muted)",
     border: `1px solid ${d ? "var(--brycks-primary-default)" : "var(--brycks-border-default)"}`,
-    transition: pe.spring,
-    boxShadow: h ? fe.default : "inset 0 1px 2px rgba(0,0,0,0.05)",
+    transition: he.spring,
+    boxShadow: h ? ue.default : "inset 0 1px 2px rgba(0,0,0,0.05)",
     flexShrink: 0
   }, p = {
     position: "absolute",
@@ -2266,8 +2335,8 @@ const kr = z(function({
     borderRadius: b.thumb / 2,
     backgroundColor: "var(--brycks-background-elevated)",
     boxShadow: "var(--brycks-shadow-sm)",
-    transition: pe.spring,
-    transform: f ? `scale(${he.pressedStrong})` : `scale(${he.normal})`
+    transition: he.spring,
+    transform: f ? `scale(${ge.pressedStrong})` : `scale(${ge.normal})`
   }, I = {
     position: "absolute",
     width: "100%",
@@ -2285,7 +2354,7 @@ const kr = z(function({
     lineHeight: U.snug,
     color: "var(--brycks-foreground-default)",
     userSelect: "none"
-  }, W = {
+  }, $ = {
     fontSize: k - 1,
     lineHeight: U.snug,
     color: "var(--brycks-foreground-muted)",
@@ -2328,18 +2397,18 @@ const kr = z(function({
         ] }),
         (t || o) && /* @__PURE__ */ S("span", { style: w, children: [
           t && /* @__PURE__ */ s("span", { style: T, children: t }),
-          o && /* @__PURE__ */ s("span", { style: W, children: o })
+          o && /* @__PURE__ */ s("span", { style: $, children: o })
         ] })
       ]
     }
   );
 });
-kr.displayName = "Switch";
-const vr = {
+vr.displayName = "Switch";
+const xr = {
   sm: { fontSize: 13, padding: 10, lineHeight: 1.5 },
   md: { fontSize: 14, padding: 12, lineHeight: 1.5 },
   lg: { fontSize: 15, padding: 14, lineHeight: 1.5 }
-}, xr = z(function({
+}, Sr = z(function({
   size: e = "md",
   variant: t = "outline",
   isInvalid: o,
@@ -2359,27 +2428,27 @@ const vr = {
   onBlur: k,
   ...x
 }, v) {
-  const [C, N] = E(!1), [p, I] = E(0), w = Q(null), T = v || w, W = vr[e], L = W.fontSize * W.lineHeight, R = L * a + W.padding * 2, H = L * l + W.padding * 2, K = A(() => {
-    const D = T.current;
-    if (!D || !n) return;
-    D.style.height = "auto";
-    const _ = D.scrollHeight, J = Math.min(Math.max(_, R), H);
-    D.style.height = `${J}px`;
-  }, [n, R, H, T]);
-  V(() => {
-    K();
-  }, [y, K]), V(() => {
-    const D = String(y ?? f ?? "");
-    I(D.length);
+  const [C, N] = B(!1), [p, I] = B(0), w = Q(null), T = v || w, $ = xr[e], L = $.fontSize * $.lineHeight, E = L * a + $.padding * 2, W = L * l + $.padding * 2, q = j(() => {
+    const F = T.current;
+    if (!F || !n) return;
+    F.style.height = "auto";
+    const V = F.scrollHeight, ee = Math.min(Math.max(V, E), W);
+    F.style.height = `${ee}px`;
+  }, [n, E, W, T]);
+  X(() => {
+    q();
+  }, [y, q]), X(() => {
+    const F = String(y ?? f ?? "");
+    I(F.length);
   }, [y, f]);
-  const $ = () => {
-    const D = {
+  const P = () => {
+    const F = {
       width: "100%",
-      minHeight: R,
-      maxHeight: n ? H : void 0,
-      padding: W.padding,
-      fontSize: W.fontSize,
-      lineHeight: W.lineHeight,
+      minHeight: E,
+      maxHeight: n ? W : void 0,
+      padding: $.padding,
+      fontSize: $.fontSize,
+      lineHeight: $.lineHeight,
       fontFamily: "var(--brycks-font-sans)",
       color: "var(--brycks-foreground-default)",
       backgroundColor: t === "filled" ? "var(--brycks-background-muted)" : "var(--brycks-background-app)",
@@ -2390,11 +2459,11 @@ const vr = {
       transition: "all 200ms ease-out",
       boxShadow: C ? o ? "0 0 0 3px rgba(239, 68, 68, 0.15)" : "0 0 0 3px rgba(85, 120, 244, 0.15)" : "none"
     };
-    return h && (D.opacity = 0.5, D.cursor = "not-allowed", D.resize = "none"), D;
-  }, B = {
+    return h && (F.opacity = 0.5, F.cursor = "not-allowed", F.resize = "none"), F;
+  }, H = {
     position: "relative",
     width: "100%"
-  }, F = {
+  }, R = {
     position: "absolute",
     bottom: 8,
     right: 12,
@@ -2402,12 +2471,12 @@ const vr = {
     color: p >= (d ?? 1 / 0) ? "var(--brycks-error-default)" : "var(--brycks-foreground-muted)",
     pointerEvents: "none",
     transition: "color 150ms ease-out"
-  }, G = (D) => {
-    I(D.target.value.length), g == null || g(D);
-  }, oe = (D) => {
-    N(!0), b == null || b(D);
-  }, X = (D) => {
-    N(!1), k == null || k(D);
+  }, A = (F) => {
+    I(F.target.value.length), g == null || g(F);
+  }, J = (F) => {
+    N(!0), b == null || b(F);
+  }, _ = (F) => {
+    N(!1), k == null || k(F);
   };
   return /* @__PURE__ */ S(
     "div",
@@ -2420,27 +2489,27 @@ const vr = {
         h && "brycks-textarea-wrapper--disabled",
         c
       ),
-      style: { ...B, ...u },
+      style: { ...H, ...u },
       children: [
         /* @__PURE__ */ s(
           "textarea",
           {
             ref: T,
             className: "brycks-textarea",
-            style: $(),
+            style: P(),
             disabled: h,
             "aria-invalid": o,
             "data-testid": m,
             value: y,
             defaultValue: f,
             maxLength: d,
-            onChange: G,
-            onFocus: oe,
-            onBlur: X,
+            onChange: A,
+            onFocus: J,
+            onBlur: _,
             ...x
           }
         ),
-        i && /* @__PURE__ */ S("span", { style: F, children: [
+        i && /* @__PURE__ */ S("span", { style: R, children: [
           p,
           d ? `/${d}` : ""
         ] })
@@ -2448,12 +2517,12 @@ const vr = {
     }
   );
 });
-xr.displayName = "Textarea";
-const Sr = {
+Sr.displayName = "Textarea";
+const wr = {
   sm: { radio: 16, dot: 6, fontSize: 13, gap: 8 },
   md: { radio: 20, dot: 8, fontSize: 14, gap: 10 },
   lg: { radio: 24, dot: 10, fontSize: 16, gap: 12 }
-}, wr = z(function({
+}, Cr = z(function({
   size: e = "md",
   label: t,
   description: o,
@@ -2465,7 +2534,7 @@ const Sr = {
   checked: c,
   ...u
 }, m) {
-  const [h, y] = E(!1), [f, g] = E(!1), b = Sr[e], k = {
+  const [h, y] = B(!1), [f, g] = B(!1), b = wr[e], k = {
     display: "inline-flex",
     alignItems: "flex-start",
     gap: b.gap,
@@ -2552,8 +2621,8 @@ const Sr = {
     }
   );
 });
-wr.displayName = "Radio";
-function Cr({
+Cr.displayName = "Radio";
+function zr({
   name: r,
   value: e,
   defaultValue: t,
@@ -2566,7 +2635,7 @@ function Cr({
   className: c,
   style: u
 }) {
-  const [m, h] = E(t ?? ""), y = e ?? m, f = (k) => {
+  const [m, h] = B(t ?? ""), y = e ?? m, f = (k) => {
     e === void 0 && h(k), o == null || o(k);
   }, g = {
     display: "flex",
@@ -2602,12 +2671,12 @@ function Cr({
     }
   );
 }
-Cr.displayName = "RadioGroup";
-const zr = {
+zr.displayName = "RadioGroup";
+const Mr = {
   sm: { track: 4, thumb: 14, fontSize: 12 },
   md: { track: 6, thumb: 18, fontSize: 14 },
   lg: { track: 8, thumb: 22, fontSize: 16 }
-}, Mr = z(function({
+}, Ir = z(function({
   size: e = "md",
   min: t = 0,
   max: o = 100,
@@ -2624,65 +2693,65 @@ const zr = {
   testId: f,
   ...g
 }, b) {
-  const [k, x] = E(l), [v, C] = E(!1), [N, p] = E(!1), I = Q(null), w = a ?? k, T = zr[e], W = (w - t) / (o - t) * 100, L = A(
-    (D) => {
-      const _ = Math.max(t, Math.min(o, D));
-      a === void 0 && x(_), i == null || i(_);
+  const [k, x] = B(l), [v, C] = B(!1), [N, p] = B(!1), I = Q(null), w = a ?? k, T = Mr[e], $ = (w - t) / (o - t) * 100, L = j(
+    (F) => {
+      const V = Math.max(t, Math.min(o, F));
+      a === void 0 && x(V), i == null || i(V);
     },
     [a, t, o, i]
   );
-  V(() => {
-    const D = I.current;
-    if (!D) return;
-    const _ = (J) => {
-      const te = J.target;
-      L(parseFloat(te.value));
+  X(() => {
+    const F = I.current;
+    if (!F) return;
+    const V = (ee) => {
+      const ke = ee.target;
+      L(parseFloat(ke.value));
     };
-    return D.addEventListener("input", _), () => D.removeEventListener("input", _);
+    return F.addEventListener("input", V), () => F.removeEventListener("input", V);
   }, [L]);
-  const R = {
+  const E = {
     display: "flex",
     flexDirection: "column",
     gap: 8,
     opacity: m ? 0.5 : 1,
     ...y
-  }, H = {
+  }, W = {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
     gap: 12
-  }, K = {
+  }, q = {
     fontSize: T.fontSize,
     fontWeight: 500,
     color: "var(--brycks-foreground-default)"
-  }, $ = {
+  }, P = {
     fontSize: T.fontSize,
     fontWeight: 500,
     color: "var(--brycks-foreground-muted)",
     fontVariantNumeric: "tabular-nums"
-  }, B = {
+  }, H = {
     position: "relative",
     display: "flex",
     alignItems: "center",
     height: T.thumb,
     cursor: m ? "not-allowed" : "pointer"
-  }, F = {
+  }, R = {
     position: "absolute",
     width: "100%",
     height: T.track,
     borderRadius: T.track / 2,
     backgroundColor: "var(--brycks-background-muted)"
-  }, G = {
+  }, A = {
     position: "absolute",
     left: 0,
     height: T.track,
-    width: `${W}%`,
+    width: `${$}%`,
     borderRadius: T.track / 2,
     backgroundColor: m ? "var(--brycks-foreground-muted)" : "var(--brycks-primary-default)",
     transition: v ? "none" : "width 100ms ease-out"
-  }, oe = {
+  }, J = {
     position: "absolute",
-    left: `calc(${W}% - ${T.thumb / 2}px)`,
+    left: `calc(${$}% - ${T.thumb / 2}px)`,
     width: T.thumb,
     height: T.thumb,
     borderRadius: "50%",
@@ -2692,7 +2761,7 @@ const zr = {
     transform: v ? "scale(1.1)" : "scale(1)",
     transition: v ? "transform 100ms ease-out, box-shadow 100ms ease-out" : "all 100ms ease-out",
     pointerEvents: "none"
-  }, X = {
+  }, _ = {
     position: "absolute",
     width: "100%",
     height: T.thumb,
@@ -2701,26 +2770,26 @@ const zr = {
     opacity: 0,
     cursor: m ? "not-allowed" : "pointer"
   };
-  return /* @__PURE__ */ S("div", { className: M("brycks-slider", `brycks-slider--${e}`, h), style: R, children: [
-    (u || d) && /* @__PURE__ */ S("div", { style: H, children: [
-      u && /* @__PURE__ */ s("span", { style: K, children: u }),
-      d && /* @__PURE__ */ s("span", { style: $, children: c(w) })
+  return /* @__PURE__ */ S("div", { className: M("brycks-slider", `brycks-slider--${e}`, h), style: E, children: [
+    (u || d) && /* @__PURE__ */ S("div", { style: W, children: [
+      u && /* @__PURE__ */ s("span", { style: q, children: u }),
+      d && /* @__PURE__ */ s("span", { style: P, children: c(w) })
     ] }),
     /* @__PURE__ */ S(
       "div",
       {
-        style: B,
+        style: H,
         onMouseEnter: () => p(!0),
         onMouseLeave: () => p(!1),
         children: [
-          /* @__PURE__ */ s("div", { style: F }),
-          /* @__PURE__ */ s("div", { style: G }),
-          /* @__PURE__ */ s("div", { style: oe }),
+          /* @__PURE__ */ s("div", { style: R }),
+          /* @__PURE__ */ s("div", { style: A }),
+          /* @__PURE__ */ s("div", { style: J }),
           /* @__PURE__ */ s(
             "input",
             {
-              ref: (D) => {
-                I.current = D, typeof b == "function" ? b(D) : b && (b.current = D);
+              ref: (F) => {
+                I.current = F, typeof b == "function" ? b(F) : b && (b.current = F);
               },
               type: "range",
               min: t,
@@ -2728,7 +2797,7 @@ const zr = {
               step: n,
               value: w,
               disabled: m,
-              style: X,
+              style: _,
               onMouseDown: () => C(!0),
               onMouseUp: () => C(!1),
               onTouchStart: () => C(!0),
@@ -2742,12 +2811,12 @@ const zr = {
     )
   ] });
 });
-Mr.displayName = "Slider";
-const Ir = {
+Ir.displayName = "Slider";
+const Tr = {
   sm: { height: 32, fontSize: 13, padding: 10, iconSize: 14 },
   md: { height: 40, fontSize: 14, padding: 12, iconSize: 16 },
   lg: { height: 48, fontSize: 16, padding: 14, iconSize: 18 }
-}, Tr = z(function({
+}, Lr = z(function({
   size: e = "md",
   variant: t = "outline",
   type: o = "date",
@@ -2762,7 +2831,7 @@ const Ir = {
   testId: h,
   ...y
 }, f) {
-  const [g, b] = E(!1), [k, x] = E(!1), v = Ir[e], C = i || !!l, N = {
+  const [g, b] = B(!1), [k, x] = B(!1), v = Tr[e], C = i || !!l, N = {
     display: "flex",
     flexDirection: "column",
     gap: 6,
@@ -2814,7 +2883,7 @@ const Ir = {
     width: v.iconSize,
     height: v.iconSize,
     pointerEvents: "none"
-  }, W = {
+  }, $ = {
     fontSize: v.fontSize - 2,
     color: C ? "var(--brycks-error-default)" : "var(--brycks-foreground-muted)"
   };
@@ -2849,21 +2918,21 @@ const Ir = {
             ]
           }
         ),
-        (a || l) && /* @__PURE__ */ s("span", { style: W, children: l || a })
+        (a || l) && /* @__PURE__ */ s("span", { style: $, children: l || a })
       ]
     }
   );
 });
-Tr.displayName = "DateInput";
-const Lr = {
+Lr.displayName = "DateInput";
+const Nr = {
   sm: { height: 80, fontSize: 12, padding: 16, iconSize: 24 },
   md: { height: 120, fontSize: 14, padding: 24, iconSize: 32 },
   lg: { height: 160, fontSize: 16, padding: 32, iconSize: 40 }
 };
-function Nr({ size: r }) {
+function $r({ size: r }) {
   return /* @__PURE__ */ s("svg", { width: r, height: r, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ s("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) });
 }
-const $r = z(function({
+const Hr = z(function({
   size: e = "md",
   variant: t = "dropzone",
   accept: o,
@@ -2881,46 +2950,46 @@ const $r = z(function({
   testId: g,
   ...b
 }, k) {
-  const [x, v] = E(!1), [C, N] = E(!1), p = Q(null), I = Lr[e], w = c || !!d, T = A(
-    (P) => {
-      if (!P || P.length === 0) return;
-      let ne = Array.from(P);
-      a && (ne = ne.filter((le) => le.size <= a)), !n && ne.length > 1 && (ne = [ne[0]]), u == null || u(ne);
+  const [x, v] = B(!1), [C, N] = B(!1), p = Q(null), I = Nr[e], w = c || !!d, T = j(
+    (O) => {
+      if (!O || O.length === 0) return;
+      let oe = Array.from(O);
+      a && (oe = oe.filter((be) => be.size <= a)), !n && oe.length > 1 && (oe = [oe[0]]), u == null || u(oe);
     },
     [a, n, u]
-  ), W = A((P) => {
-    P.preventDefault(), P.stopPropagation(), h || v(!0);
-  }, [h]), L = A((P) => {
-    P.preventDefault(), P.stopPropagation(), v(!1);
-  }, []), R = A(
-    (P) => {
-      P.preventDefault(), P.stopPropagation(), v(!1), h || T(P.dataTransfer.files);
+  ), $ = j((O) => {
+    O.preventDefault(), O.stopPropagation(), h || v(!0);
+  }, [h]), L = j((O) => {
+    O.preventDefault(), O.stopPropagation(), v(!1);
+  }, []), E = j(
+    (O) => {
+      O.preventDefault(), O.stopPropagation(), v(!1), h || T(O.dataTransfer.files);
     },
     [h, T]
-  ), H = A(
-    (P) => {
-      T(P.target.files), p.current && (p.current.value = "");
+  ), W = j(
+    (O) => {
+      T(O.target.files), p.current && (p.current.value = "");
     },
     [T]
-  ), K = A(() => {
-    var P;
-    h || (P = p.current) == null || P.click();
-  }, [h]), $ = A(
-    (P) => {
-      var ne;
-      (P.key === "Enter" || P.key === " ") && !h && (P.preventDefault(), (ne = p.current) == null || ne.click());
+  ), q = j(() => {
+    var O;
+    h || (O = p.current) == null || O.click();
+  }, [h]), P = j(
+    (O) => {
+      var oe;
+      (O.key === "Enter" || O.key === " ") && !h && (O.preventDefault(), (oe = p.current) == null || oe.click());
     },
     [h]
-  ), B = {
+  ), H = {
     display: "flex",
     flexDirection: "column",
     gap: 6,
     ...f
-  }, F = {
+  }, R = {
     fontSize: I.fontSize,
     fontWeight: 500,
     color: "var(--brycks-foreground-default)"
-  }, G = {
+  }, A = {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
@@ -2935,74 +3004,74 @@ const $r = z(function({
     opacity: h ? 0.5 : 1,
     transition: "all 150ms ease-out",
     outline: "none"
-  }, oe = {
+  }, J = {
     color: x ? "var(--brycks-primary-default)" : "var(--brycks-foreground-muted)",
     transition: "color 150ms ease-out"
-  }, X = {
+  }, _ = {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     gap: 4,
     textAlign: "center"
-  }, D = {
+  }, F = {
     fontSize: I.fontSize,
     fontWeight: 500,
     color: "var(--brycks-foreground-default)"
-  }, _ = {
+  }, V = {
     fontSize: I.fontSize - 2,
     color: "var(--brycks-foreground-muted)"
-  }, J = {
+  }, ee = {
     color: "var(--brycks-primary-default)",
     fontWeight: 500
-  }, te = {
+  }, ke = {
     fontSize: I.fontSize - 2,
     color: "var(--brycks-error-default)"
-  }, ie = n ? "Drag files here or click to browse" : "Drag a file here or click to browse";
+  }, se = n ? "Drag files here or click to browse" : "Drag a file here or click to browse";
   return /* @__PURE__ */ S(
     "div",
     {
       className: M("brycks-file-input", `brycks-file-input--${e}`, `brycks-file-input--${t}`, y),
-      style: B,
+      style: H,
       children: [
-        l && /* @__PURE__ */ s("label", { style: F, children: l }),
+        l && /* @__PURE__ */ s("label", { style: R, children: l }),
         /* @__PURE__ */ S(
           "div",
           {
-            style: G,
-            onDragOver: W,
+            style: A,
+            onDragOver: $,
             onDragLeave: L,
-            onDrop: R,
-            onClick: K,
-            onKeyDown: $,
+            onDrop: E,
+            onClick: q,
+            onKeyDown: P,
             onFocus: () => N(!0),
             onBlur: () => N(!1),
             tabIndex: h ? -1 : 0,
             role: "button",
-            "aria-label": String(i) || ie,
+            "aria-label": String(i) || se,
             children: [
-              /* @__PURE__ */ s("div", { style: oe, children: m || /* @__PURE__ */ s(Nr, { size: I.iconSize }) }),
-              /* @__PURE__ */ S("div", { style: X, children: [
-                /* @__PURE__ */ s("span", { style: D, children: x ? "Drop files here" : /* @__PURE__ */ S(ee, { children: [
-                  /* @__PURE__ */ s("span", { style: J, children: "Click to browse" }),
+              /* @__PURE__ */ s("div", { style: J, children: m || /* @__PURE__ */ s($r, { size: I.iconSize }) }),
+              /* @__PURE__ */ S("div", { style: _, children: [
+                /* @__PURE__ */ s("span", { style: F, children: x ? "Drop files here" : /* @__PURE__ */ S(te, { children: [
+                  /* @__PURE__ */ s("span", { style: ee, children: "Click to browse" }),
                   " or drag files here"
                 ] }) }),
-                i && /* @__PURE__ */ s("span", { style: _, children: i })
+                i && /* @__PURE__ */ s("span", { style: V, children: i })
               ] })
             ]
           }
         ),
-        d && /* @__PURE__ */ s("span", { style: te, children: d }),
+        d && /* @__PURE__ */ s("span", { style: ke, children: d }),
         /* @__PURE__ */ s(
           "input",
           {
-            ref: (P) => {
-              p.current = P, typeof k == "function" ? k(P) : k && (k.current = P);
+            ref: (O) => {
+              p.current = O, typeof k == "function" ? k(O) : k && (k.current = O);
             },
             type: "file",
             accept: o,
             multiple: n,
             disabled: h,
-            onChange: H,
+            onChange: W,
             style: { display: "none" },
             "data-testid": g,
             ...b
@@ -3012,28 +3081,28 @@ const $r = z(function({
     }
   );
 });
-$r.displayName = "FileInput";
+Hr.displayName = "FileInput";
 let Wr = 0;
-function ze(r) {
+function Me(r) {
   return `${r}-${++Wr}`;
 }
-function Hr(r = "brycks") {
-  const [e, t] = E("");
-  return V(() => {
-    t(ze(r));
-  }, [r]), e || ze(r);
+function Dr(r = "brycks") {
+  const [e, t] = B("");
+  return X(() => {
+    t(Me(r));
+  }, [r]), e || Me(r);
 }
-function $n(r, e = "brycks") {
-  const [t, o] = E([]);
-  return V(() => {
-    o(Array.from({ length: r }, () => ze(e)));
-  }, [r, e]), t.length ? t : Array.from({ length: r }, () => ze(e));
+function Vn(r, e = "brycks") {
+  const [t, o] = B([]);
+  return X(() => {
+    o(Array.from({ length: r }, () => Me(e)));
+  }, [r, e]), t.length ? t : Array.from({ length: r }, () => Me(e));
 }
-const Dr = {
+const Br = {
   sm: { labelSize: 12, helperSize: 11, gap: 4 },
   md: { labelSize: 14, helperSize: 12, gap: 6 },
   lg: { labelSize: 16, helperSize: 14, gap: 8 }
-}, Br = z(function({
+}, Er = z(function({
   size: e = "md",
   label: t,
   required: o = !1,
@@ -3050,7 +3119,7 @@ const Dr = {
   testId: f,
   ...g
 }, b) {
-  const k = Hr("field"), x = d || k, v = `${x}-helper`, C = `${x}-error`, N = Dr[e], p = l || !!a, I = {
+  const k = Dr("field"), x = d || k, v = `${x}-helper`, C = `${x}-error`, N = Br[e], p = l || !!a, I = {
     display: "flex",
     flexDirection: c === "horizontal" ? "row" : "column",
     gap: c === "horizontal" ? 16 : N.gap,
@@ -3071,7 +3140,7 @@ const Dr = {
     fontWeight: 500,
     color: i ? "var(--brycks-foreground-muted)" : "var(--brycks-foreground-default)",
     lineHeight: 1.4
-  }, W = {
+  }, $ = {
     color: "var(--brycks-error-default)",
     marginLeft: 2
   }, L = {
@@ -3079,11 +3148,11 @@ const Dr = {
     flexDirection: "column",
     gap: N.gap,
     flex: 1
-  }, R = {
+  }, E = {
     fontSize: N.helperSize,
     color: p ? "var(--brycks-error-default)" : "var(--brycks-foreground-muted)",
     lineHeight: 1.4
-  }, H = {
+  }, W = {
     id: x,
     "aria-describedby": n || a ? a ? C : v : void 0,
     "aria-invalid": p ? !0 : void 0
@@ -3099,15 +3168,15 @@ const Dr = {
       children: [
         t && /* @__PURE__ */ s("div", { style: w, children: /* @__PURE__ */ S("label", { htmlFor: x, style: T, children: [
           t,
-          o && /* @__PURE__ */ s("span", { style: W, "aria-hidden": "true", children: "*" })
+          o && /* @__PURE__ */ s("span", { style: $, "aria-hidden": "true", children: "*" })
         ] }) }),
         /* @__PURE__ */ S("div", { style: L, children: [
-          typeof y == "function" ? y(H) : y,
+          typeof y == "function" ? y(W) : y,
           (n || a) && /* @__PURE__ */ s(
             "span",
             {
               id: a ? C : v,
-              style: R,
+              style: E,
               role: a ? "alert" : void 0,
               children: a || n
             }
@@ -3117,13 +3186,13 @@ const Dr = {
     }
   );
 });
-Br.displayName = "FormField";
-const Er = {
+Er.displayName = "FormField";
+const Rr = {
   sm: { fontSize: 11, iconSize: 12, gap: 4 },
   md: { fontSize: 12, iconSize: 14, gap: 6 },
   lg: { fontSize: 14, iconSize: 16, gap: 8 }
 };
-function Rr({ size: r }) {
+function Fr({ size: r }) {
   return /* @__PURE__ */ s(
     "svg",
     {
@@ -3145,7 +3214,7 @@ function Rr({ size: r }) {
     }
   );
 }
-const Fr = z(function({
+const Ar = z(function({
   size: e = "md",
   children: t,
   showIcon: o = !0,
@@ -3155,7 +3224,7 @@ const Fr = z(function({
   testId: i,
   ...d
 }, c) {
-  const u = Er[e], m = {
+  const u = Rr[e], m = {
     display: "inline-flex",
     alignItems: "center",
     gap: u.gap,
@@ -3181,21 +3250,21 @@ const Fr = z(function({
       "data-testid": i,
       ...d,
       children: [
-        o && /* @__PURE__ */ s("span", { style: h, children: n || /* @__PURE__ */ s(Rr, { size: u.iconSize }) }),
+        o && /* @__PURE__ */ s("span", { style: h, children: n || /* @__PURE__ */ s(Fr, { size: u.iconSize }) }),
         t
       ]
     }
   ) : null;
 });
-Fr.displayName = "FieldError";
-const Ar = {
+Ar.displayName = "FieldError";
+const jr = {
   sm: "400px",
   md: "500px",
   lg: "640px",
   xl: "800px",
   full: "calc(100vw - 48px)"
 };
-function jr() {
+function Vr() {
   return /* @__PURE__ */ s("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ s(
     "path",
     {
@@ -3206,7 +3275,7 @@ function jr() {
     }
   ) });
 }
-const Pr = z(function({
+const Or = z(function({
   isOpen: e,
   onClose: t,
   size: o = "md",
@@ -3222,29 +3291,29 @@ const Pr = z(function({
   ...y
 }, f) {
   const g = Q(null), b = Q(null);
-  V(() => {
+  X(() => {
     if (!e) return;
     b.current = document.activeElement;
     const L = g.current;
     L && L.focus();
-    const R = (H) => {
-      if (H.key === "Escape" && i) {
+    const E = (W) => {
+      if (W.key === "Escape" && i) {
         t();
         return;
       }
-      if (H.key === "Tab" && L) {
-        const K = L.querySelectorAll(
+      if (W.key === "Tab" && L) {
+        const q = L.querySelectorAll(
           'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        ), $ = K[0], B = K[K.length - 1];
-        H.shiftKey && document.activeElement === $ ? (H.preventDefault(), B == null || B.focus()) : !H.shiftKey && document.activeElement === B && (H.preventDefault(), $ == null || $.focus());
+        ), P = q[0], H = q[q.length - 1];
+        W.shiftKey && document.activeElement === P ? (W.preventDefault(), H == null || H.focus()) : !W.shiftKey && document.activeElement === H && (W.preventDefault(), P == null || P.focus());
       }
     };
-    return document.addEventListener("keydown", R), document.body.style.overflow = "hidden", () => {
-      var H;
-      document.removeEventListener("keydown", R), document.body.style.overflow = "", (H = b.current) == null || H.focus();
+    return document.addEventListener("keydown", E), document.body.style.overflow = "hidden", () => {
+      var W;
+      document.removeEventListener("keydown", E), document.body.style.overflow = "", (W = b.current) == null || W.focus();
     };
   }, [e, i, t]);
-  const k = A(
+  const k = j(
     (L) => {
       L.target === L.currentTarget && l && t();
     },
@@ -3265,7 +3334,7 @@ const Pr = z(function({
   }, v = {
     position: "relative",
     width: "100%",
-    maxWidth: Ar[o],
+    maxWidth: jr[o],
     maxHeight: o === "full" ? "calc(100vh - 48px)" : "85vh",
     backgroundColor: "var(--brycks-background-elevated)",
     borderRadius: "var(--brycks-radius-xl)",
@@ -3311,7 +3380,7 @@ const Pr = z(function({
     flex: 1,
     overflow: "auto",
     padding: 24
-  }, W = /* @__PURE__ */ S(ee, { children: [
+  }, $ = /* @__PURE__ */ S(te, { children: [
     /* @__PURE__ */ s("style", { children: `
           @keyframes brycks-fade-in {
             from { opacity: 0; }
@@ -3364,7 +3433,7 @@ const Pr = z(function({
                     onMouseLeave: (L) => {
                       L.currentTarget.style.backgroundColor = "transparent", L.currentTarget.style.color = "var(--brycks-foreground-muted)";
                     },
-                    children: /* @__PURE__ */ s(jr, {})
+                    children: /* @__PURE__ */ s(Vr, {})
                   }
                 )
               ] }),
@@ -3375,10 +3444,10 @@ const Pr = z(function({
       }
     )
   ] });
-  return ke(W, document.body);
+  return pe($, document.body);
 });
-Pr.displayName = "Modal";
-const Vr = {
+Or.displayName = "Modal";
+const Pr = {
   info: {
     icon: /* @__PURE__ */ S("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
       /* @__PURE__ */ s("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
@@ -3473,7 +3542,7 @@ const Vr = {
       }
     }
   }
-}, Or = z(function({
+}, Xr = z(function({
   intent: e = "info",
   variant: t = "subtle",
   title: o,
@@ -3488,7 +3557,7 @@ const Vr = {
   children: h,
   ...y
 }, f) {
-  const g = Vr[e], b = g.colors[t], k = {
+  const g = Pr[e], b = g.colors[t], k = {
     display: "flex",
     alignItems: "flex-start",
     gap: 12,
@@ -3574,8 +3643,8 @@ const Vr = {
     }
   );
 });
-Or.displayName = "Alert";
-const Xr = z(function({
+Xr.displayName = "Alert";
+const Yr = z(function({
   content: e,
   placement: t = "top",
   delay: o = 200,
@@ -3585,28 +3654,28 @@ const Xr = z(function({
   children: i,
   ...d
 }, c) {
-  const [u, m] = E(!1), [h, y] = E({ top: 0, left: 0 }), f = Q(null), g = Q(null), b = Q(), k = A(() => {
+  const [u, m] = B(!1), [h, y] = B({ top: 0, left: 0 }), f = Q(null), g = Q(null), b = Q(null), k = j(() => {
     if (!f.current || !g.current) return;
     const I = f.current.getBoundingClientRect(), w = g.current.getBoundingClientRect(), T = 8;
-    let W = 0, L = 0;
+    let $ = 0, L = 0;
     switch (t) {
       case "top":
-        W = I.top - w.height - T, L = I.left + (I.width - w.width) / 2;
+        $ = I.top - w.height - T, L = I.left + (I.width - w.width) / 2;
         break;
       case "bottom":
-        W = I.bottom + T, L = I.left + (I.width - w.width) / 2;
+        $ = I.bottom + T, L = I.left + (I.width - w.width) / 2;
         break;
       case "left":
-        W = I.top + (I.height - w.height) / 2, L = I.left - w.width - T;
+        $ = I.top + (I.height - w.height) / 2, L = I.left - w.width - T;
         break;
       case "right":
-        W = I.top + (I.height - w.height) / 2, L = I.right + T;
+        $ = I.top + (I.height - w.height) / 2, L = I.right + T;
         break;
     }
-    const R = 8;
-    L = Math.max(R, Math.min(L, window.innerWidth - w.width - R)), W = Math.max(R, Math.min(W, window.innerHeight - w.height - R)), y({ top: W, left: L });
+    const E = 8;
+    L = Math.max(E, Math.min(L, window.innerWidth - w.width - E)), $ = Math.max(E, Math.min($, window.innerHeight - w.height - E)), y({ top: $, left: L });
   }, [t]);
-  V(() => (u && (k(), window.addEventListener("scroll", k, !0), window.addEventListener("resize", k)), () => {
+  X(() => (u && (k(), window.addEventListener("scroll", k, !0), window.addEventListener("resize", k)), () => {
     window.removeEventListener("scroll", k, !0), window.removeEventListener("resize", k);
   }), [u, k]);
   const x = () => {
@@ -3616,7 +3685,7 @@ const Xr = z(function({
   }, v = () => {
     b.current && clearTimeout(b.current), m(!1);
   };
-  V(() => () => {
+  X(() => () => {
     b.current && clearTimeout(b.current);
   }, []);
   const C = {
@@ -3648,7 +3717,7 @@ const Xr = z(function({
     ...t === "left" && { right: -4, top: "50%", marginTop: -4 },
     ...t === "right" && { left: -4, top: "50%", marginTop: -4 }
   };
-  return /* @__PURE__ */ S(ee, { children: [
+  return /* @__PURE__ */ S(te, { children: [
     /* @__PURE__ */ s(
       "div",
       {
@@ -3661,8 +3730,8 @@ const Xr = z(function({
         children: i
       }
     ),
-    u && ke(
-      /* @__PURE__ */ S(ee, { children: [
+    u && pe(
+      /* @__PURE__ */ S(te, { children: [
         /* @__PURE__ */ s("style", { children: `
                 @keyframes brycks-tooltip-in {
                   from { opacity: 0; transform: scale(0.95); }
@@ -3691,8 +3760,8 @@ const Xr = z(function({
     )
   ] });
 });
-Xr.displayName = "Tooltip";
-const Yr = {
+Yr.displayName = "Tooltip";
+const Kr = {
   info: {
     bg: "var(--brycks-info-50)",
     border: "var(--brycks-info-200)",
@@ -3714,7 +3783,7 @@ const Yr = {
     icon: "var(--brycks-error-default)"
   }
 };
-function Kr({ intent: r }) {
+function Gr({ intent: r }) {
   return /* @__PURE__ */ s("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ s("path", { d: {
     info: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
     success: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z",
@@ -3722,10 +3791,10 @@ function Kr({ intent: r }) {
     error: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
   }[r] }) });
 }
-function Gr() {
+function qr() {
   return /* @__PURE__ */ s("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ s("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
 }
-const Pe = z(function({
+const Oe = z(function({
   intent: e = "info",
   title: t,
   description: o,
@@ -3740,23 +3809,23 @@ const Pe = z(function({
   testId: h,
   ...y
 }, f) {
-  const [g, b] = E(n), [k, x] = E(!1);
-  if (V(() => {
+  const [g, b] = B(n), [k, x] = B(!1);
+  if (X(() => {
     if (n)
       b(!0), x(!1);
     else {
       x(!0);
-      const W = setTimeout(() => b(!1), 200);
-      return () => clearTimeout(W);
+      const $ = setTimeout(() => b(!1), 200);
+      return () => clearTimeout($);
     }
-  }, [n]), V(() => {
+  }, [n]), X(() => {
     if (!n || a === 0) return;
-    const W = setTimeout(() => {
+    const $ = setTimeout(() => {
       l == null || l();
     }, a);
-    return () => clearTimeout(W);
+    return () => clearTimeout($);
   }, [n, a, l]), !g) return null;
-  const v = Yr[e], C = {
+  const v = Kr[e], C = {
     display: "flex",
     alignItems: "flex-start",
     gap: 12,
@@ -3798,7 +3867,7 @@ const Pe = z(function({
     flexShrink: 0,
     marginLeft: "auto"
   };
-  return /* @__PURE__ */ S(ee, { children: [
+  return /* @__PURE__ */ S(te, { children: [
     /* @__PURE__ */ s("style", { children: `
           @keyframes brycks-toast-in {
             from { opacity: 0; transform: translateY(-8px) scale(0.95); }
@@ -3820,7 +3889,7 @@ const Pe = z(function({
         "data-testid": h,
         ...y,
         children: [
-          /* @__PURE__ */ s("span", { style: N, children: c || /* @__PURE__ */ s(Kr, { intent: e }) }),
+          /* @__PURE__ */ s("span", { style: N, children: c || /* @__PURE__ */ s(Gr, { intent: e }) }),
           /* @__PURE__ */ S("div", { style: p, children: [
             t && /* @__PURE__ */ s("span", { style: I, children: t }),
             o && /* @__PURE__ */ s("span", { style: w, children: o }),
@@ -3833,13 +3902,13 @@ const Pe = z(function({
               style: T,
               onClick: l,
               "aria-label": "Close toast",
-              onMouseEnter: (W) => {
-                W.currentTarget.style.backgroundColor = "var(--brycks-background-muted)";
+              onMouseEnter: ($) => {
+                $.currentTarget.style.backgroundColor = "var(--brycks-background-muted)";
               },
-              onMouseLeave: (W) => {
-                W.currentTarget.style.backgroundColor = "transparent";
+              onMouseLeave: ($) => {
+                $.currentTarget.style.backgroundColor = "transparent";
               },
-              children: /* @__PURE__ */ s(Gr, {})
+              children: /* @__PURE__ */ s(qr, {})
             }
           )
         ]
@@ -3847,15 +3916,15 @@ const Pe = z(function({
     )
   ] });
 });
-Pe.displayName = "Toast";
-const Ve = be(null);
-function Wn() {
-  const r = me(Ve);
+Oe.displayName = "Toast";
+const Pe = ye(null);
+function On() {
+  const r = fe(Pe);
   if (!r)
     throw new Error("useToast must be used within a ToastProvider");
   return r;
 }
-const qr = {
+const _r = {
   "top-left": { top: 16, left: 16 },
   "top-center": { top: 16, left: "50%", transform: "translateX(-50%)" },
   "top-right": { top: 16, right: 16 },
@@ -3863,28 +3932,28 @@ const qr = {
   "bottom-center": { bottom: 16, left: "50%", transform: "translateX(-50%)" },
   "bottom-right": { bottom: 16, right: 16 }
 };
-let _r = 0;
-function Hn({
+let Ur = 0;
+function Pn({
   children: r,
   position: e = "top-right",
   maxToasts: t = 5
 }) {
-  const [o, n] = E([]), [a, l] = E(!1);
-  V(() => {
+  const [o, n] = B([]), [a, l] = B(!1);
+  X(() => {
     l(!0);
   }, []);
-  const i = A(
+  const i = j(
     (h) => {
-      const y = `toast-${++_r}`;
+      const y = `toast-${++Ur}`;
       return n((f) => {
         const g = [...f, { id: y, props: h }];
         return g.length > t ? g.slice(-t) : g;
       }), y;
     },
     [t]
-  ), d = A((h) => {
+  ), d = j((h) => {
     n((y) => y.filter((f) => f.id !== h));
-  }, []), c = A(() => {
+  }, []), c = j(() => {
     n([]);
   }, []), u = {
     position: "fixed",
@@ -3893,29 +3962,29 @@ function Hn({
     flexDirection: "column",
     gap: 8,
     pointerEvents: "none",
-    ...qr[e]
+    ..._r[e]
   }, m = {
     pointerEvents: "auto"
   };
-  return /* @__PURE__ */ S(Ve.Provider, { value: { toasts: o, addToast: i, removeToast: d, removeAll: c }, children: [
+  return /* @__PURE__ */ S(Pe.Provider, { value: { toasts: o, addToast: i, removeToast: d, removeAll: c }, children: [
     r,
-    a && ke(
-      /* @__PURE__ */ s("div", { className: "brycks-toast-container", style: u, children: o.map(({ id: h, props: y }) => /* @__PURE__ */ s("div", { style: m, children: /* @__PURE__ */ s(Pe, { ...y, isOpen: !0, onClose: () => d(h) }) }, h)) }),
+    a && pe(
+      /* @__PURE__ */ s("div", { className: "brycks-toast-container", style: u, children: o.map(({ id: h, props: y }) => /* @__PURE__ */ s("div", { style: m, children: /* @__PURE__ */ s(Oe, { ...y, isOpen: !0, onClose: () => d(h) }) }, h)) }),
       document.body
     )
   ] });
 }
-const Ur = {
+const Zr = {
   sm: "320px",
   md: "400px",
   lg: "560px",
   xl: "720px",
   full: "100%"
 };
-function Zr() {
+function Qr() {
   return /* @__PURE__ */ s("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ s("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
 }
-const Qr = z(function({
+const Jr = z(function({
   isOpen: e,
   onClose: t,
   placement: o = "right",
@@ -3932,36 +4001,36 @@ const Qr = z(function({
   ...f
 }, g) {
   const b = Q(null), k = Q(null);
-  V(() => {
+  X(() => {
     if (!e) return;
     k.current = document.activeElement;
-    const H = b.current;
-    H && H.focus();
-    const K = ($) => {
-      if ($.key === "Escape" && i) {
+    const W = b.current;
+    W && W.focus();
+    const q = (P) => {
+      if (P.key === "Escape" && i) {
         t();
         return;
       }
-      if ($.key === "Tab" && H) {
-        const B = H.querySelectorAll(
+      if (P.key === "Tab" && W) {
+        const H = W.querySelectorAll(
           'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        ), F = B[0], G = B[B.length - 1];
-        $.shiftKey && document.activeElement === F ? ($.preventDefault(), G == null || G.focus()) : !$.shiftKey && document.activeElement === G && ($.preventDefault(), F == null || F.focus());
+        ), R = H[0], A = H[H.length - 1];
+        P.shiftKey && document.activeElement === R ? (P.preventDefault(), A == null || A.focus()) : !P.shiftKey && document.activeElement === A && (P.preventDefault(), R == null || R.focus());
       }
     };
-    return document.addEventListener("keydown", K), document.body.style.overflow = "hidden", () => {
-      var $;
-      document.removeEventListener("keydown", K), document.body.style.overflow = "", ($ = k.current) == null || $.focus();
+    return document.addEventListener("keydown", q), document.body.style.overflow = "hidden", () => {
+      var P;
+      document.removeEventListener("keydown", q), document.body.style.overflow = "", (P = k.current) == null || P.focus();
     };
   }, [e, i, t]);
-  const x = A(
-    (H) => {
-      H.target === H.currentTarget && l && t();
+  const x = j(
+    (W) => {
+      W.target === W.currentTarget && l && t();
     },
     [l, t]
   );
   if (!e) return null;
-  const v = o === "left" || o === "right", C = Ur[n], N = {
+  const v = o === "left" || o === "right", C = Zr[n], N = {
     position: "fixed",
     inset: 0,
     zIndex: "var(--brycks-z-drawer)",
@@ -3970,7 +4039,7 @@ const Qr = z(function({
     animation: "brycks-drawer-overlay-in 200ms ease-out"
   }, I = {
     ...(() => {
-      const H = {
+      const W = {
         position: "absolute",
         backgroundColor: "var(--brycks-background-elevated)",
         boxShadow: "var(--brycks-shadow-2xl)",
@@ -3979,14 +4048,14 @@ const Qr = z(function({
         overflow: "hidden"
       };
       return v ? {
-        ...H,
+        ...W,
         top: 0,
         bottom: 0,
         [o]: 0,
         width: C,
         maxWidth: "100vw"
       } : {
-        ...H,
+        ...W,
         left: 0,
         right: 0,
         [o]: 0,
@@ -4009,7 +4078,7 @@ const Qr = z(function({
     fontWeight: 600,
     color: "var(--brycks-foreground-default)",
     margin: 0
-  }, W = {
+  }, $ = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -4022,7 +4091,7 @@ const Qr = z(function({
     flex: 1,
     overflow: "auto",
     padding: 20
-  }, R = /* @__PURE__ */ S(ee, { children: [
+  }, E = /* @__PURE__ */ S(te, { children: [
     /* @__PURE__ */ s("style", { children: `
           @keyframes brycks-drawer-overlay-in {
             from { opacity: 0; }
@@ -4055,8 +4124,8 @@ const Qr = z(function({
         children: /* @__PURE__ */ S(
           "div",
           {
-            ref: (H) => {
-              b.current = H, typeof g == "function" ? g(H) : g && (g.current = H);
+            ref: (W) => {
+              b.current = W, typeof g == "function" ? g(W) : g && (g.current = W);
             },
             role: "dialog",
             "aria-modal": "true",
@@ -4074,16 +4143,16 @@ const Qr = z(function({
                   {
                     type: "button",
                     className: "brycks-drawer-close",
-                    style: W,
+                    style: $,
                     onClick: t,
                     "aria-label": "Close drawer",
-                    onMouseEnter: (H) => {
-                      H.currentTarget.style.backgroundColor = "var(--brycks-background-muted)", H.currentTarget.style.color = "var(--brycks-foreground-default)";
+                    onMouseEnter: (W) => {
+                      W.currentTarget.style.backgroundColor = "var(--brycks-background-muted)", W.currentTarget.style.color = "var(--brycks-foreground-default)";
                     },
-                    onMouseLeave: (H) => {
-                      H.currentTarget.style.backgroundColor = "transparent", H.currentTarget.style.color = "var(--brycks-foreground-muted)";
+                    onMouseLeave: (W) => {
+                      W.currentTarget.style.backgroundColor = "transparent", W.currentTarget.style.color = "var(--brycks-foreground-muted)";
                     },
-                    children: /* @__PURE__ */ s(Zr, {})
+                    children: /* @__PURE__ */ s(Qr, {})
                   }
                 )
               ] }),
@@ -4094,12 +4163,12 @@ const Qr = z(function({
       }
     )
   ] });
-  return ke(R, document.body);
+  return pe(E, document.body);
 });
-Qr.displayName = "Drawer";
-function Jr(r, e = {}) {
+Jr.displayName = "Drawer";
+function eo(r, e = {}) {
   const { enabled: t = !0, eventType: o = "mousedown" } = e, n = Q(null);
-  return V(() => {
+  return X(() => {
     if (!t) return;
     const a = (l) => {
       const i = n.current;
@@ -4110,7 +4179,7 @@ function Jr(r, e = {}) {
     };
   }, [r, t, o]), n;
 }
-const eo = z(function({
+const to = z(function({
   content: e,
   children: t,
   placement: o = "bottom",
@@ -4128,102 +4197,102 @@ const eo = z(function({
   testId: g,
   ...b
 }, k) {
-  const [x, v] = E(l), [C, N] = E({ top: 0, left: 0 }), [p, I] = E(!1), w = Q(null), T = Q(null), W = Q(), L = Q(), R = a ?? x, H = A(
-    (D) => {
-      a === void 0 && v(D), i == null || i(D);
+  const [x, v] = B(l), [C, N] = B({ top: 0, left: 0 }), [p, I] = B(!1), w = Q(null), T = Q(null), $ = Q(null), L = Q(null), E = a ?? x, W = j(
+    (V) => {
+      a === void 0 && v(V), i == null || i(V);
     },
     [a, i]
-  ), K = Jr(() => {
-    m && n === "click" && R && H(!1);
-  }, { enabled: R && n === "click" });
-  V(() => (I(!0), () => I(!1)), []), V(() => {
-    if (!R || !w.current || !p) return;
-    const D = () => {
-      const _ = w.current, J = T.current;
-      if (!_ || !J) return;
-      const te = _.getBoundingClientRect(), ie = J.getBoundingClientRect(), P = window.scrollX, ne = window.scrollY;
-      let le = 0, ve = 0;
+  ), q = eo(() => {
+    m && n === "click" && E && W(!1);
+  }, { enabled: E && n === "click" });
+  X(() => (I(!0), () => I(!1)), []), X(() => {
+    if (!E || !w.current || !p) return;
+    const V = () => {
+      const ee = w.current, ke = T.current;
+      if (!ee || !ke) return;
+      const se = ee.getBoundingClientRect(), O = ke.getBoundingClientRect(), oe = window.scrollX, be = window.scrollY;
+      let ve = 0, xe = 0;
       switch (o) {
         case "top":
         case "top-start":
         case "top-end":
-          le = te.top + ne - ie.height - d;
+          ve = se.top + be - O.height - d;
           break;
         case "bottom":
         case "bottom-start":
         case "bottom-end":
-          le = te.bottom + ne + d;
+          ve = se.bottom + be + d;
           break;
         case "left":
         case "left-start":
         case "left-end":
-          ve = te.left + P - ie.width - d;
+          xe = se.left + oe - O.width - d;
           break;
         case "right":
         case "right-start":
         case "right-end":
-          ve = te.right + P + d;
+          xe = se.right + oe + d;
           break;
       }
       switch (o) {
         case "top":
         case "bottom":
-          ve = te.left + P + (te.width - ie.width) / 2;
+          xe = se.left + oe + (se.width - O.width) / 2;
           break;
         case "top-start":
         case "bottom-start":
-          ve = te.left + P;
+          xe = se.left + oe;
           break;
         case "top-end":
         case "bottom-end":
-          ve = te.right + P - ie.width;
+          xe = se.right + oe - O.width;
           break;
         case "left":
         case "right":
-          le = te.top + ne + (te.height - ie.height) / 2;
+          ve = se.top + be + (se.height - O.height) / 2;
           break;
         case "left-start":
         case "right-start":
-          le = te.top + ne;
+          ve = se.top + be;
           break;
         case "left-end":
         case "right-end":
-          le = te.bottom + ne - ie.height;
+          ve = se.bottom + be - O.height;
           break;
       }
-      N({ top: le, left: ve });
+      N({ top: ve, left: xe });
     };
-    return D(), window.addEventListener("resize", D), window.addEventListener("scroll", D, !0), () => {
-      window.removeEventListener("resize", D), window.removeEventListener("scroll", D, !0);
+    return V(), window.addEventListener("resize", V), window.addEventListener("scroll", V, !0), () => {
+      window.removeEventListener("resize", V), window.removeEventListener("scroll", V, !0);
     };
-  }, [R, o, d, p]), V(() => () => {
-    W.current && clearTimeout(W.current), L.current && clearTimeout(L.current);
+  }, [E, o, d, p]), X(() => () => {
+    $.current && clearTimeout($.current), L.current && clearTimeout(L.current);
   }, []);
-  const $ = A(() => {
-    L.current && clearTimeout(L.current), n === "hover" ? W.current = setTimeout(() => H(!0), c) : H(!0);
-  }, [n, c, H]), B = A(() => {
-    W.current && clearTimeout(W.current), n === "hover" ? L.current = setTimeout(() => H(!1), u) : H(!1);
-  }, [n, u, H]), F = A(() => {
-    R ? B() : $();
-  }, [R, $, B]), G = Te(t, {
+  const P = j(() => {
+    L.current && clearTimeout(L.current), n === "hover" ? $.current = setTimeout(() => W(!0), c) : W(!0);
+  }, [n, c, W]), H = j(() => {
+    $.current && clearTimeout($.current), n === "hover" ? L.current = setTimeout(() => W(!1), u) : W(!1);
+  }, [n, u, W]), R = j(() => {
+    E ? H() : P();
+  }, [E, P, H]), A = t.props, J = Le(t, {
     ref: w,
     ...n === "click" && {
-      onClick: (D) => {
-        var _, J;
-        (J = (_ = t.props).onClick) == null || J.call(_, D), F();
+      onClick: (V) => {
+        var ee;
+        (ee = A.onClick) == null || ee.call(A, V), R();
       }
     },
     ...n === "hover" && {
-      onMouseEnter: (D) => {
-        var _, J;
-        (J = (_ = t.props).onMouseEnter) == null || J.call(_, D), $();
+      onMouseEnter: (V) => {
+        var ee;
+        (ee = A.onMouseEnter) == null || ee.call(A, V), P();
       },
-      onMouseLeave: (D) => {
-        var _, J;
-        (J = (_ = t.props).onMouseLeave) == null || J.call(_, D), B();
+      onMouseLeave: (V) => {
+        var ee;
+        (ee = A.onMouseLeave) == null || ee.call(A, V), H();
       }
     }
-  }), oe = {
+  }), _ = {
     position: "absolute",
     top: C.top,
     left: C.left,
@@ -4236,7 +4305,7 @@ const eo = z(function({
     minWidth: 120,
     animation: "brycks-popover-in 150ms ease-out",
     ...f
-  }, X = R && p && /* @__PURE__ */ S(ee, { children: [
+  }, F = E && p && /* @__PURE__ */ S(te, { children: [
     /* @__PURE__ */ s("style", { children: `
           @keyframes brycks-popover-in {
             from { opacity: 0; transform: scale(0.95); }
@@ -4246,42 +4315,42 @@ const eo = z(function({
     /* @__PURE__ */ s(
       "div",
       {
-        ref: (D) => {
-          T.current = D, K.current = D, typeof k == "function" ? k(D) : k && (k.current = D);
+        ref: (V) => {
+          T.current = V, q.current = V, typeof k == "function" ? k(V) : k && (k.current = V);
         },
         className: M("brycks-popover", y),
-        style: oe,
+        style: _,
         role: "dialog",
         "data-testid": g,
-        onMouseEnter: n === "hover" ? $ : void 0,
-        onMouseLeave: n === "hover" ? B : void 0,
+        onMouseEnter: n === "hover" ? P : void 0,
+        onMouseLeave: n === "hover" ? H : void 0,
         ...b,
         children: e
       }
     )
   ] });
-  return /* @__PURE__ */ S(ee, { children: [
-    G,
-    p && ke(X, document.body)
+  return /* @__PURE__ */ S(te, { children: [
+    J,
+    p && pe(F, document.body)
   ] });
 });
-eo.displayName = "Popover";
-const to = {
+to.displayName = "Popover";
+const ro = {
   xs: 4,
   sm: 6,
   md: 8,
   lg: 12
-}, ro = {
+}, oo = {
   xs: { size: 24, strokeWidth: 3 },
   sm: { size: 32, strokeWidth: 3 },
   md: { size: 48, strokeWidth: 4 },
   lg: { size: 64, strokeWidth: 5 }
-}, oo = {
+}, no = {
   primary: "var(--brycks-primary-default)",
   success: "var(--brycks-success-default)",
   warning: "var(--brycks-warning-default)",
   error: "var(--brycks-error-default)"
-}, no = z(function({
+}, so = z(function({
   value: e = 0,
   max: t = 100,
   size: o = "md",
@@ -4296,42 +4365,42 @@ const to = {
   testId: h,
   ...y
 }, f) {
-  const g = Math.min(100, Math.max(0, e / t * 100)), b = oo[a];
+  const g = Math.min(100, Math.max(0, e / t * 100)), b = no[a];
   if (n === "circular") {
-    const w = ro[o], T = (w.size - w.strokeWidth) / 2, W = 2 * Math.PI * T, L = W - g / 100 * W, R = {
+    const w = oo[o], T = (w.size - w.strokeWidth) / 2, $ = 2 * Math.PI * T, L = $ - g / 100 * $, E = {
       display: "inline-flex",
       flexDirection: "column",
       alignItems: "center",
       gap: 8,
       ...m
-    }, H = {
+    }, W = {
       transform: "rotate(-90deg)",
       width: w.size,
       height: w.size
-    }, K = {
+    }, q = {
       fill: "none",
       stroke: "var(--brycks-background-muted)",
       strokeWidth: w.strokeWidth
-    }, $ = {
+    }, P = {
       fill: "none",
       stroke: b,
       strokeWidth: w.strokeWidth,
       strokeLinecap: "round",
-      strokeDasharray: W,
-      strokeDashoffset: i ? W * 0.75 : L,
+      strokeDasharray: $,
+      strokeDashoffset: i ? $ * 0.75 : L,
       transition: i ? "none" : "stroke-dashoffset 300ms ease-out",
       animation: i ? "brycks-progress-circular-spin 1s linear infinite" : void 0,
       transformOrigin: "center"
-    }, B = {
+    }, H = {
       position: "absolute",
       fontSize: o === "xs" ? 8 : o === "sm" ? 10 : o === "md" ? 12 : 14,
       fontWeight: 600,
       color: "var(--brycks-foreground-default)"
-    }, F = {
+    }, R = {
       fontSize: o === "xs" ? 10 : o === "sm" ? 11 : o === "md" ? 12 : 14,
       color: "var(--brycks-foreground-muted)"
     };
-    return /* @__PURE__ */ S(ee, { children: [
+    return /* @__PURE__ */ S(te, { children: [
       /* @__PURE__ */ s("style", { children: `
             @keyframes brycks-progress-circular-spin {
               from { transform: rotate(0deg); }
@@ -4343,7 +4412,7 @@ const to = {
         {
           ref: f,
           className: M("brycks-progress", "brycks-progress--circular", `brycks-progress--${o}`, u),
-          style: R,
+          style: E,
           role: "progressbar",
           "aria-valuenow": i ? void 0 : e,
           "aria-valuemin": 0,
@@ -4353,19 +4422,19 @@ const to = {
           ...y,
           children: [
             /* @__PURE__ */ S("div", { style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }, children: [
-              /* @__PURE__ */ S("svg", { style: H, children: [
-                /* @__PURE__ */ s("circle", { cx: w.size / 2, cy: w.size / 2, r: T, style: K }),
-                /* @__PURE__ */ s("circle", { cx: w.size / 2, cy: w.size / 2, r: T, style: $ })
+              /* @__PURE__ */ S("svg", { style: W, children: [
+                /* @__PURE__ */ s("circle", { cx: w.size / 2, cy: w.size / 2, r: T, style: q }),
+                /* @__PURE__ */ s("circle", { cx: w.size / 2, cy: w.size / 2, r: T, style: P })
               ] }),
-              l && !i && o !== "xs" && /* @__PURE__ */ s("span", { style: B, children: d(e, t) })
+              l && !i && o !== "xs" && /* @__PURE__ */ s("span", { style: H, children: d(e, t) })
             ] }),
-            c && /* @__PURE__ */ s("span", { style: F, children: c })
+            c && /* @__PURE__ */ s("span", { style: R, children: c })
           ]
         }
       )
     ] });
   }
-  const k = to[o], x = {
+  const k = ro[o], x = {
     display: "flex",
     flexDirection: "column",
     gap: 6,
@@ -4399,7 +4468,7 @@ const to = {
     transition: i ? "none" : "width 300ms ease-out",
     animation: i ? "brycks-progress-linear-indeterminate 1.5s ease-in-out infinite" : void 0
   };
-  return /* @__PURE__ */ S(ee, { children: [
+  return /* @__PURE__ */ S(te, { children: [
     /* @__PURE__ */ s("style", { children: `
           @keyframes brycks-progress-linear-indeterminate {
             0% { transform: translateX(-100%); }
@@ -4430,15 +4499,15 @@ const to = {
     )
   ] });
 });
-no.displayName = "Progress";
-const Oe = be(null);
-function Ne() {
-  const r = me(Oe);
+so.displayName = "Progress";
+const Xe = ye(null);
+function $e() {
+  const r = fe(Xe);
   if (!r)
     throw new Error("Tabs components must be used within a Tabs");
   return r;
 }
-const so = z(function({
+const ao = z(function({
   value: e,
   defaultValue: t = "",
   onChange: o,
@@ -4451,7 +4520,7 @@ const so = z(function({
   testId: u,
   ...m
 }, h) {
-  const [y, f] = E(t), g = e ?? y, b = A(
+  const [y, f] = B(t), g = e ?? y, b = j(
     (x) => {
       e === void 0 && f(x), o == null || o(x);
     },
@@ -4462,7 +4531,7 @@ const so = z(function({
     gap: l === "vertical" ? 24 : 0,
     ...d
   };
-  return /* @__PURE__ */ s(Oe.Provider, { value: { value: g, onChange: b, size: n, variant: a, orientation: l }, children: /* @__PURE__ */ s(
+  return /* @__PURE__ */ s(Xe.Provider, { value: { value: g, onChange: b, size: n, variant: a, orientation: l }, children: /* @__PURE__ */ s(
     "div",
     {
       ref: h,
@@ -4474,9 +4543,9 @@ const so = z(function({
     }
   ) });
 });
-so.displayName = "Tabs";
-const ao = z(function({ className: e, style: t, children: o, ...n }, a) {
-  const { orientation: l, variant: i } = Ne(), d = {
+ao.displayName = "Tabs";
+const io = z(function({ className: e, style: t, children: o, ...n }, a) {
+  const { orientation: l, variant: i } = $e(), d = {
     display: "flex",
     flexDirection: l === "vertical" ? "column" : "row",
     gap: i === "enclosed" || l === "vertical" ? 4 : 0,
@@ -4502,13 +4571,13 @@ const ao = z(function({ className: e, style: t, children: o, ...n }, a) {
     }
   );
 });
-ao.displayName = "TabList";
-const io = {
+io.displayName = "TabList";
+const lo = {
   sm: { fontSize: 13, padding: "6px 12px", height: 32 },
   md: { fontSize: 14, padding: "8px 16px", height: 40 },
   lg: { fontSize: 16, padding: "10px 20px", height: 48 }
-}, lo = z(function({ value: e, disabled: t = !1, icon: o, className: n, style: a, children: l, ...i }, d) {
-  const { value: c, onChange: u, size: m, variant: h, orientation: y } = Ne(), f = c === e, g = io[m], b = () => {
+}, co = z(function({ value: e, disabled: t = !1, icon: o, className: n, style: a, children: l, ...i }, d) {
+  const { value: c, onChange: u, size: m, variant: h, orientation: y } = $e(), f = c === e, g = lo[m], b = () => {
     t || u(e);
   }, k = (v) => {
     var I, w, T;
@@ -4578,24 +4647,24 @@ const io = {
     }
   );
 });
-lo.displayName = "Tab";
-const co = z(function({ className: e, style: t, children: o, ...n }, a) {
+co.displayName = "Tab";
+const uo = z(function({ className: e, style: t, children: o, ...n }, a) {
   const l = {
     flex: 1,
     ...t
   };
   return /* @__PURE__ */ s("div", { ref: a, className: M("brycks-tab-panels", e), style: l, ...n, children: o });
 });
-co.displayName = "TabPanels";
-const uo = z(function({ value: e, className: t, style: o, children: n, ...a }, l) {
-  const { value: i } = Ne();
+uo.displayName = "TabPanels";
+const yo = z(function({ value: e, className: t, style: o, children: n, ...a }, l) {
+  const { value: i } = $e();
   if (!(i === e)) return null;
   const c = {
     padding: "16px 0",
     animation: "brycks-tab-panel-in 200ms ease-out",
     ...o
   };
-  return /* @__PURE__ */ S(ee, { children: [
+  return /* @__PURE__ */ S(te, { children: [
     /* @__PURE__ */ s("style", { children: `
           @keyframes brycks-tab-panel-in {
             from { opacity: 0; }
@@ -4616,15 +4685,15 @@ const uo = z(function({ value: e, className: t, style: o, children: n, ...a }, l
     )
   ] });
 });
-uo.displayName = "TabPanel";
-const Xe = be(null);
-function Ye() {
-  const r = me(Xe);
+yo.displayName = "TabPanel";
+const Ye = ye(null);
+function Ke() {
+  const r = fe(Ye);
   if (!r)
     throw new Error("AccordionItem must be used within an Accordion");
   return r;
 }
-const yo = z(function({
+const fo = z(function({
   value: e,
   defaultValue: t = [],
   onChange: o,
@@ -4636,7 +4705,7 @@ const yo = z(function({
   testId: c,
   ...u
 }, m) {
-  const [h, y] = E(t), f = e ?? h, g = A(
+  const [h, y] = B(t), f = e ?? h, g = j(
     (k) => {
       const x = f.includes(k);
       let v;
@@ -4649,7 +4718,7 @@ const yo = z(function({
     gap: a === "separated" ? 8 : 0,
     ...i
   };
-  return /* @__PURE__ */ s(Xe.Provider, { value: { expandedItems: f, toggleItem: g, allowMultiple: n, variant: a }, children: /* @__PURE__ */ s(
+  return /* @__PURE__ */ s(Ye.Provider, { value: { expandedItems: f, toggleItem: g, allowMultiple: n, variant: a }, children: /* @__PURE__ */ s(
     "div",
     {
       ref: m,
@@ -4661,23 +4730,23 @@ const yo = z(function({
     }
   ) });
 });
-yo.displayName = "Accordion";
-const Ke = be(null);
-function Ge() {
-  const r = me(Ke);
+fo.displayName = "Accordion";
+const Ge = ye(null);
+function qe() {
+  const r = fe(Ge);
   if (!r)
     throw new Error("AccordionTrigger/AccordionContent must be used within an AccordionItem");
   return r;
 }
-const fo = z(function({ value: e, disabled: t = !1, className: o, style: n, children: a, ...l }, i) {
-  const { expandedItems: d, variant: c } = Ye(), u = d.includes(e), m = {
+const bo = z(function({ value: e, disabled: t = !1, className: o, style: n, children: a, ...l }, i) {
+  const { expandedItems: d, variant: c } = Ke(), u = d.includes(e), m = {
     borderBottom: c === "default" ? "1px solid var(--brycks-border-muted)" : void 0,
     border: c === "bordered" || c === "separated" ? "1px solid var(--brycks-border-default)" : void 0,
     borderRadius: c === "separated" ? "var(--brycks-radius-lg)" : void 0,
     overflow: "hidden",
     ...n
   };
-  return c === "bordered" && !u && (m.borderBottom = "1px solid var(--brycks-border-default)"), /* @__PURE__ */ s(Ke.Provider, { value: { value: e, isExpanded: u, disabled: t }, children: /* @__PURE__ */ s(
+  return c === "bordered" && !u && (m.borderBottom = "1px solid var(--brycks-border-default)"), /* @__PURE__ */ s(Ge.Provider, { value: { value: e, isExpanded: u, disabled: t }, children: /* @__PURE__ */ s(
     "div",
     {
       ref: i,
@@ -4688,8 +4757,8 @@ const fo = z(function({ value: e, disabled: t = !1, className: o, style: n, chil
     }
   ) });
 });
-fo.displayName = "AccordionItem";
-function bo({ isExpanded: r }) {
+bo.displayName = "AccordionItem";
+function mo({ isExpanded: r }) {
   return /* @__PURE__ */ s(
     "svg",
     {
@@ -4714,8 +4783,8 @@ function bo({ isExpanded: r }) {
     }
   );
 }
-const mo = z(function({ icon: e, className: t, style: o, children: n, ...a }, l) {
-  const { toggleItem: i } = Ye(), { value: d, isExpanded: c, disabled: u } = Ge(), m = () => {
+const go = z(function({ icon: e, className: t, style: o, children: n, ...a }, l) {
+  const { toggleItem: i } = Ke(), { value: d, isExpanded: c, disabled: u } = qe(), m = () => {
     u || i(d);
   }, h = {
     display: "flex",
@@ -4754,14 +4823,14 @@ const mo = z(function({ icon: e, className: t, style: o, children: n, ...a }, l)
       ...a,
       children: [
         n,
-        /* @__PURE__ */ s("span", { style: { color: "var(--brycks-foreground-muted)", flexShrink: 0, marginLeft: 12 }, children: e ?? /* @__PURE__ */ s(bo, { isExpanded: c }) })
+        /* @__PURE__ */ s("span", { style: { color: "var(--brycks-foreground-muted)", flexShrink: 0, marginLeft: 12 }, children: e ?? /* @__PURE__ */ s(mo, { isExpanded: c }) })
       ]
     }
   );
 });
-mo.displayName = "AccordionTrigger";
-const go = z(function({ className: e, style: t, children: o, ...n }, a) {
-  const { isExpanded: l } = Ge(), i = {
+go.displayName = "AccordionTrigger";
+const ho = z(function({ className: e, style: t, children: o, ...n }, a) {
+  const { isExpanded: l } = qe(), i = {
     overflow: "hidden",
     transition: "max-height 200ms ease-out, opacity 200ms ease-out",
     maxHeight: l ? "1000px" : "0",
@@ -4786,15 +4855,15 @@ const go = z(function({ className: e, style: t, children: o, ...n }, a) {
     }
   );
 });
-go.displayName = "AccordionContent";
-const qe = be(null);
-function ho() {
-  const r = me(qe);
+ho.displayName = "AccordionContent";
+const _e = ye(null);
+function po() {
+  const r = fe(_e);
   if (!r)
     throw new Error("Dropdown components must be used within a Dropdown");
   return r;
 }
-const po = z(function({
+const ko = z(function({
   trigger: e,
   isOpen: t,
   defaultOpen: o = !1,
@@ -4808,93 +4877,93 @@ const po = z(function({
   testId: m,
   ...h
 }, y) {
-  var K;
-  const [f, g] = E(o), [b, k] = E({ top: 0, left: 0 }), [x, v] = E(-1), [C, N] = E(!1), p = Q(null), I = Q(null), w = t ?? f;
-  V(() => (N(!0), () => N(!1)), []);
-  const T = A(
-    ($) => {
-      t === void 0 && g($), n == null || n($), $ || v(-1);
+  var P;
+  const [f, g] = B(o), [b, k] = B({ top: 0, left: 0 }), [x, v] = B(-1), [C, N] = B(!1), p = Q(null), I = Q(null), w = t ?? f;
+  X(() => (N(!0), () => N(!1)), []);
+  const T = j(
+    (H) => {
+      t === void 0 && g(H), n == null || n(H), H || v(-1);
     },
     [t, n]
-  ), W = A(() => T(!1), [T]);
-  V(() => {
+  ), $ = j(() => T(!1), [T]);
+  X(() => {
     if (!w || !p.current || !C) return;
-    const $ = () => {
-      const B = p.current;
-      if (!B) return;
-      const F = B.getBoundingClientRect(), G = window.scrollX, oe = window.scrollY;
-      let X = 0, D = 0;
-      a.startsWith("bottom") ? X = F.bottom + oe + l : X = F.top + oe - l, a.endsWith("start") ? D = F.left + G : D = F.right + G, k({ top: X, left: D });
+    const H = () => {
+      const R = p.current;
+      if (!R) return;
+      const A = R.getBoundingClientRect(), J = window.scrollX, _ = window.scrollY;
+      let F = 0, V = 0;
+      a.startsWith("bottom") ? F = A.bottom + _ + l : F = A.top + _ - l, a.endsWith("start") ? V = A.left + J : V = A.right + J, k({ top: F, left: V });
     };
-    return $(), window.addEventListener("resize", $), window.addEventListener("scroll", $, !0), () => {
-      window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0);
+    return H(), window.addEventListener("resize", H), window.addEventListener("scroll", H, !0), () => {
+      window.removeEventListener("resize", H), window.removeEventListener("scroll", H, !0);
     };
-  }, [w, a, l, C]), V(() => {
+  }, [w, a, l, C]), X(() => {
     if (!w) return;
-    const $ = (B) => {
-      var F, G;
-      (F = p.current) != null && F.contains(B.target) || (G = I.current) != null && G.contains(B.target) || T(!1);
+    const H = (R) => {
+      var A, J;
+      (A = p.current) != null && A.contains(R.target) || (J = I.current) != null && J.contains(R.target) || T(!1);
     };
-    return document.addEventListener("mousedown", $), () => document.removeEventListener("mousedown", $);
+    return document.addEventListener("mousedown", H), () => document.removeEventListener("mousedown", H);
   }, [w, T]);
-  const L = A(
-    ($) => {
-      var F, G, oe;
+  const L = j(
+    (H) => {
+      var A, J, _;
       if (!w) {
-        ($.key === "ArrowDown" || $.key === "Enter" || $.key === " ") && ($.preventDefault(), T(!0));
+        (H.key === "ArrowDown" || H.key === "Enter" || H.key === " ") && (H.preventDefault(), T(!0));
         return;
       }
-      const B = (F = I.current) == null ? void 0 : F.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');
-      if (B != null && B.length)
-        switch ($.key) {
+      const R = (A = I.current) == null ? void 0 : A.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');
+      if (R != null && R.length)
+        switch (H.key) {
           case "ArrowDown":
-            $.preventDefault(), v((X) => (X + 1) % B.length);
+            H.preventDefault(), v((F) => (F + 1) % R.length);
             break;
           case "ArrowUp":
-            $.preventDefault(), v((X) => (X - 1 + B.length) % B.length);
+            H.preventDefault(), v((F) => (F - 1 + R.length) % R.length);
             break;
           case "Home":
-            $.preventDefault(), v(0);
+            H.preventDefault(), v(0);
             break;
           case "End":
-            $.preventDefault(), v(B.length - 1);
+            H.preventDefault(), v(R.length - 1);
             break;
           case "Escape":
-            $.preventDefault(), T(!1), (G = p.current) == null || G.focus();
+            H.preventDefault(), T(!1), (J = p.current) == null || J.focus();
             break;
           case "Enter":
           case " ":
-            $.preventDefault(), x >= 0 && ((oe = B[x]) == null || oe.click());
+            H.preventDefault(), x >= 0 && ((_ = R[x]) == null || _.click());
             break;
         }
     },
     [w, x, T]
   );
-  V(() => {
-    var B, F;
+  X(() => {
+    var R, A;
     if (!w || x < 0) return;
-    const $ = (B = I.current) == null ? void 0 : B.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');
-    (F = $ == null ? void 0 : $[x]) == null || F.focus();
+    const H = (R = I.current) == null ? void 0 : R.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');
+    (A = H == null ? void 0 : H[x]) == null || A.focus();
   }, [w, x]);
-  const R = Te(e, {
+  const E = e.props, W = Le(e, {
     ref: p,
     "aria-haspopup": "menu",
     "aria-expanded": w,
-    onClick: ($) => {
-      var B, F;
-      (F = (B = e.props).onClick) == null || F.call(B, $), T(!w);
+    onClick: (H) => {
+      var R;
+      (R = E.onClick) == null || R.call(E, H), T(!w);
     },
-    onKeyDown: ($) => {
-      var B, F;
-      (F = (B = e.props).onKeyDown) == null || F.call(B, $), L($);
+    onKeyDown: (H) => {
+      var R;
+      (R = E.onKeyDown) == null || R.call(E, H), L(H);
     }
-  }), H = {
+  }), q = {
     position: "absolute",
     top: b.top,
     left: a.endsWith("end") ? "auto" : b.left,
     right: a.endsWith("end") ? window.innerWidth - b.left : "auto",
     zIndex: "var(--brycks-z-dropdown)",
-    minWidth: ((K = p.current) == null ? void 0 : K.offsetWidth) ?? 160,
+    minWidth: ((P = p.current) == null ? void 0 : P.offsetWidth) ?? 160,
     backgroundColor: "var(--brycks-background-elevated)",
     border: "1px solid var(--brycks-border-default)",
     borderRadius: "var(--brycks-radius-lg)",
@@ -4904,7 +4973,7 @@ const po = z(function({
     outline: "none",
     ...c
   };
-  return /* @__PURE__ */ s(qe.Provider, { value: { isOpen: w, close: i ? W : () => {
+  return /* @__PURE__ */ s(_e.Provider, { value: { isOpen: w, close: i ? $ : () => {
   }, activeIndex: x, setActiveIndex: v }, children: /* @__PURE__ */ S(
     "div",
     {
@@ -4914,9 +4983,9 @@ const po = z(function({
       "data-testid": m,
       ...h,
       children: [
-        R,
-        w && C && ke(
-          /* @__PURE__ */ S(ee, { children: [
+        W,
+        w && C && pe(
+          /* @__PURE__ */ S(te, { children: [
             /* @__PURE__ */ s("style", { children: `
                 @keyframes brycks-dropdown-in {
                   from { opacity: 0; transform: translateY(-4px); }
@@ -4928,7 +4997,7 @@ const po = z(function({
               {
                 ref: I,
                 role: "menu",
-                style: H,
+                style: q,
                 onKeyDown: L,
                 tabIndex: -1,
                 children: u
@@ -4941,9 +5010,9 @@ const po = z(function({
     }
   ) });
 });
-po.displayName = "Dropdown";
-const ko = z(function({ disabled: e = !1, icon: t, shortcut: o, destructive: n = !1, className: a, style: l, children: i, onClick: d, ...c }, u) {
-  const { close: m } = ho(), h = (b) => {
+ko.displayName = "Dropdown";
+const vo = z(function({ disabled: e = !1, icon: t, shortcut: o, destructive: n = !1, className: a, style: l, children: i, onClick: d, ...c }, u) {
+  const { close: m } = po(), h = (b) => {
     e || (d == null || d(b), m());
   }, y = {
     display: "flex",
@@ -5000,8 +5069,8 @@ const ko = z(function({ disabled: e = !1, icon: t, shortcut: o, destructive: n =
     }
   );
 });
-ko.displayName = "DropdownItem";
-const vo = z(function({ className: e, style: t, ...o }, n) {
+vo.displayName = "DropdownItem";
+const xo = z(function({ className: e, style: t, ...o }, n) {
   const a = {
     height: 1,
     backgroundColor: "var(--brycks-border-muted)",
@@ -5019,8 +5088,8 @@ const vo = z(function({ className: e, style: t, ...o }, n) {
     }
   );
 });
-vo.displayName = "DropdownDivider";
-const xo = z(function({ className: e, style: t, children: o, ...n }, a) {
+xo.displayName = "DropdownDivider";
+const So = z(function({ className: e, style: t, children: o, ...n }, a) {
   const l = {
     padding: "8px 12px 4px 12px",
     fontSize: 11,
@@ -5041,15 +5110,15 @@ const xo = z(function({ className: e, style: t, children: o, ...n }, a) {
     }
   );
 });
-xo.displayName = "DropdownLabel";
-const _e = be(null);
-function Ue() {
-  const r = me(_e);
+So.displayName = "DropdownLabel";
+const Ue = ye(null);
+function Ze() {
+  const r = fe(Ue);
   if (!r)
     throw new Error("Menu components must be used within a Menu");
   return r;
 }
-const So = z(function({
+const wo = z(function({
   activeItem: e,
   onChange: t,
   size: o = "md",
@@ -5060,7 +5129,7 @@ const So = z(function({
   testId: d,
   ...c
 }, u) {
-  const [m, h] = E(null), y = e !== void 0 ? e : m, f = (b) => {
+  const [m, h] = B(null), y = e !== void 0 ? e : m, f = (b) => {
     e === void 0 && h(b), t == null || t(b);
   }, g = {
     display: "flex",
@@ -5069,7 +5138,7 @@ const So = z(function({
     padding: 8,
     ...l
   };
-  return /* @__PURE__ */ s(_e.Provider, { value: { size: o, activeItem: y, setActiveItem: f, collapsed: n }, children: /* @__PURE__ */ s(
+  return /* @__PURE__ */ s(Ue.Provider, { value: { size: o, activeItem: y, setActiveItem: f, collapsed: n }, children: /* @__PURE__ */ s(
     "nav",
     {
       ref: u,
@@ -5081,13 +5150,13 @@ const So = z(function({
     }
   ) });
 });
-So.displayName = "Menu";
-const wo = {
+wo.displayName = "Menu";
+const Co = {
   sm: { height: 32, fontSize: 13, iconSize: 16, padding: 10 },
   md: { height: 40, fontSize: 14, iconSize: 18, padding: 12 },
   lg: { height: 48, fontSize: 16, iconSize: 20, padding: 14 }
-}, Co = z(function({ value: e, icon: t, badge: o, disabled: n = !1, onClick: a, className: l, style: i, children: d, ...c }, u) {
-  const { size: m, activeItem: h, setActiveItem: y, collapsed: f } = Ue(), g = h === e, b = wo[m], k = () => {
+}, zo = z(function({ value: e, icon: t, badge: o, disabled: n = !1, onClick: a, className: l, style: i, children: d, ...c }, u) {
+  const { size: m, activeItem: h, setActiveItem: y, collapsed: f } = Ze(), g = h === e, b = Co[m], k = () => {
     n || (y(e), a == null || a(e));
   }, x = {
     display: "flex",
@@ -5143,9 +5212,9 @@ const wo = {
     }
   );
 });
-Co.displayName = "MenuItem";
-const zo = z(function({ label: e, className: t, style: o, children: n, ...a }, l) {
-  const { collapsed: i } = Ue(), d = {
+zo.displayName = "MenuItem";
+const Mo = z(function({ label: e, className: t, style: o, children: n, ...a }, l) {
+  const { collapsed: i } = Ze(), d = {
     display: "flex",
     flexDirection: "column",
     gap: 2,
@@ -5163,8 +5232,8 @@ const zo = z(function({ label: e, className: t, style: o, children: n, ...a }, l
     n
   ] });
 });
-zo.displayName = "MenuGroup";
-const Mo = z(function({ className: e, style: t, ...o }, n) {
+Mo.displayName = "MenuGroup";
+const Io = z(function({ className: e, style: t, ...o }, n) {
   const a = {
     height: 1,
     backgroundColor: "var(--brycks-border-muted)",
@@ -5182,22 +5251,22 @@ const Mo = z(function({ className: e, style: t, ...o }, n) {
     }
   );
 });
-Mo.displayName = "MenuDivider";
-const Io = {
+Io.displayName = "MenuDivider";
+const To = {
   sm: { height: 28, fontSize: 12, gap: 4, minWidth: 28 },
   md: { height: 36, fontSize: 14, gap: 6, minWidth: 36 },
   lg: { height: 44, fontSize: 16, gap: 8, minWidth: 44 }
 };
-function To() {
+function Lo() {
   return /* @__PURE__ */ s("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ s("path", { d: "M10 12L6 8l4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
-function Lo() {
+function No() {
   return /* @__PURE__ */ s("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ s("path", { d: "M6 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
-function No() {
+function $o() {
   return /* @__PURE__ */ s("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ s("path", { d: "M11 12l-4-4 4-4M7 12l-4-4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
-function $o() {
+function Ho() {
   return /* @__PURE__ */ s("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ s("path", { d: "M5 4l4 4-4 4M9 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 const Wo = z(function({
@@ -5215,12 +5284,12 @@ const Wo = z(function({
   testId: h,
   ...y
 }, f) {
-  const g = Io[n], b = st(() => {
+  const g = To[n], b = at(() => {
     if (a === "minimal" || a === "simple")
       return [];
-    const p = [], I = Math.max(e - l, 1), w = Math.min(e + l, t), T = I > 2, W = w < t - 1;
+    const p = [], I = Math.max(e - l, 1), w = Math.min(e + l, t), T = I > 2, $ = w < t - 1;
     if (T)
-      if (W) {
+      if ($) {
         p.push(1), p.push("ellipsis");
         for (let L = I; L <= w; L++)
           p.push(L);
@@ -5233,7 +5302,7 @@ const Wo = z(function({
     else {
       for (let L = 1; L <= Math.min(3 + l, t); L++)
         p.push(L);
-      W && (p.push("ellipsis"), p.push(t));
+      $ && (p.push("ellipsis"), p.push(t));
     }
     return p;
   }, [e, t, l, a]), k = {
@@ -5297,7 +5366,7 @@ const Wo = z(function({
             onMouseLeave: (p) => {
               p.currentTarget.style.backgroundColor = "transparent";
             },
-            children: /* @__PURE__ */ s(No, {})
+            children: /* @__PURE__ */ s($o, {})
           }
         ),
         d && /* @__PURE__ */ s(
@@ -5314,7 +5383,7 @@ const Wo = z(function({
             onMouseLeave: (p) => {
               p.currentTarget.style.backgroundColor = "transparent";
             },
-            children: /* @__PURE__ */ s(To, {})
+            children: /* @__PURE__ */ s(Lo, {})
           }
         ),
         a === "simple" || a === "minimal" ? /* @__PURE__ */ s("span", { style: C, children: a === "minimal" ? `${e} / ${t}` : `Page ${e} of ${t}` }) : b.map(
@@ -5352,7 +5421,7 @@ const Wo = z(function({
             onMouseLeave: (p) => {
               p.currentTarget.style.backgroundColor = "transparent";
             },
-            children: /* @__PURE__ */ s(Lo, {})
+            children: /* @__PURE__ */ s(No, {})
           }
         ),
         i && a !== "minimal" && /* @__PURE__ */ s(
@@ -5369,7 +5438,7 @@ const Wo = z(function({
             onMouseLeave: (p) => {
               p.currentTarget.style.backgroundColor = "transparent";
             },
-            children: /* @__PURE__ */ s($o, {})
+            children: /* @__PURE__ */ s(Ho, {})
           }
         )
       ]
@@ -5377,15 +5446,15 @@ const Wo = z(function({
   );
 });
 Wo.displayName = "Pagination";
-const Ze = {
+const Qe = {
   sm: { fontSize: 12, gap: 6, iconSize: 12 },
   md: { fontSize: 14, gap: 8, iconSize: 14 },
   lg: { fontSize: 16, gap: 10, iconSize: 16 }
 };
-function Ho({ size: r }) {
+function Do({ size: r }) {
   return /* @__PURE__ */ s("svg", { width: r, height: r, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ s("path", { d: "M6 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
-const Do = z(function({
+const Bo = z(function({
   separator: e,
   size: t = "md",
   maxItems: o,
@@ -5395,7 +5464,7 @@ const Do = z(function({
   testId: i,
   ...d
 }, c) {
-  const u = Ze[t], m = at.toArray(l).filter(it);
+  const u = Qe[t], m = it.toArray(l).filter(lt);
   let h = m, y = !1;
   if (o && m.length > o) {
     const v = Math.floor((o - 1) / 2);
@@ -5424,7 +5493,7 @@ const Do = z(function({
     alignItems: "center",
     color: "var(--brycks-foreground-muted)",
     fontSize: u.fontSize
-  }, x = () => /* @__PURE__ */ s("span", { style: b, "aria-hidden": "true", children: e ?? /* @__PURE__ */ s(Ho, { size: u.iconSize }) });
+  }, x = () => /* @__PURE__ */ s("span", { style: b, "aria-hidden": "true", children: e ?? /* @__PURE__ */ s(Do, { size: u.iconSize }) });
   return /* @__PURE__ */ s(
     "nav",
     {
@@ -5437,11 +5506,11 @@ const Do = z(function({
       children: /* @__PURE__ */ s("ol", { style: g, children: h.map((v, C) => {
         const N = C === h.length - 1, p = !N, I = y && C === Math.floor((o - 1) / 2) - 1;
         return /* @__PURE__ */ S("li", { style: { display: "flex", alignItems: "center", gap: u.gap }, children: [
-          Te(v, {
+          Le(v, {
             isCurrentPage: N,
             size: t
           }),
-          I && /* @__PURE__ */ S(ee, { children: [
+          I && /* @__PURE__ */ S(te, { children: [
             x(),
             /* @__PURE__ */ s("span", { style: k, children: "..." })
           ] }),
@@ -5451,8 +5520,8 @@ const Do = z(function({
     }
   );
 });
-Do.displayName = "Breadcrumb";
-const Bo = z(function({
+Bo.displayName = "Breadcrumb";
+const Eo = z(function({
   as: e = "a",
   href: t,
   icon: o,
@@ -5463,7 +5532,7 @@ const Bo = z(function({
   children: d,
   ...c
 }, u) {
-  const m = Ze[a], h = {
+  const m = Qe[a], h = {
     display: "inline-flex",
     alignItems: "center",
     gap: 6,
@@ -5505,16 +5574,16 @@ const Bo = z(function({
     }
   );
 });
-Bo.displayName = "BreadcrumbItem";
-const Qe = be({ size: "md", variant: "default" });
-function $e() {
-  return me(Qe);
+Eo.displayName = "BreadcrumbItem";
+const Je = ye({ size: "md", variant: "default" });
+function He() {
+  return fe(Je);
 }
 const We = {
   sm: { fontSize: 13, padding: "8px 12px", headerPadding: "8px 12px" },
   md: { fontSize: 14, padding: "12px 16px", headerPadding: "12px 16px" },
   lg: { fontSize: 15, padding: "16px 20px", headerPadding: "14px 20px" }
-}, Eo = z(function({
+}, Ro = z(function({
   size: e = "md",
   variant: t = "default",
   stickyHeader: o = !1,
@@ -5538,7 +5607,7 @@ const We = {
     opacity: n ? 0.6 : 1,
     transition: "opacity 150ms ease-out"
   };
-  return /* @__PURE__ */ s(Qe.Provider, { value: { size: e, variant: t }, children: /* @__PURE__ */ s("div", { className: "brycks-table-container", style: m, children: /* @__PURE__ */ s(
+  return /* @__PURE__ */ s(Je.Provider, { value: { size: e, variant: t }, children: /* @__PURE__ */ s("div", { className: "brycks-table-container", style: m, children: /* @__PURE__ */ s(
     "table",
     {
       ref: u,
@@ -5550,8 +5619,8 @@ const We = {
     }
   ) }) });
 });
-Eo.displayName = "Table";
-const Ro = z(function({ sticky: e = !1, className: t, style: o, children: n, ...a }, l) {
+Ro.displayName = "Table";
+const Fo = z(function({ sticky: e = !1, className: t, style: o, children: n, ...a }, l) {
   const i = {
     backgroundColor: "var(--brycks-background-muted)",
     position: e ? "sticky" : void 0,
@@ -5570,8 +5639,8 @@ const Ro = z(function({ sticky: e = !1, className: t, style: o, children: n, ...
     }
   );
 });
-Ro.displayName = "TableHead";
-const Fo = z(function({ className: e, style: t, children: o, ...n }, a) {
+Fo.displayName = "TableHead";
+const Ao = z(function({ className: e, style: t, children: o, ...n }, a) {
   const l = {
     ...t
   };
@@ -5586,9 +5655,9 @@ const Fo = z(function({ className: e, style: t, children: o, ...n }, a) {
     }
   );
 });
-Fo.displayName = "TableBody";
-const Ao = z(function({ selected: e = !1, clickable: t = !1, className: o, style: n, children: a, ...l }, i) {
-  const { variant: d } = $e(), c = {
+Ao.displayName = "TableBody";
+const jo = z(function({ selected: e = !1, clickable: t = !1, className: o, style: n, children: a, ...l }, i) {
+  const { variant: d } = He(), c = {
     backgroundColor: e ? "var(--brycks-primary-50)" : "transparent",
     borderBottom: d !== "bordered" ? "1px solid var(--brycks-border-muted)" : void 0,
     cursor: t ? "pointer" : void 0,
@@ -5617,14 +5686,14 @@ const Ao = z(function({ selected: e = !1, clickable: t = !1, className: o, style
     }
   );
 });
-Ao.displayName = "TableRow";
-function jo({ direction: r }) {
+jo.displayName = "TableRow";
+function Vo({ direction: r }) {
   return r ? /* @__PURE__ */ s("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: r === "asc" ? /* @__PURE__ */ s("path", { d: "M7 3L10 6H4L7 3Z", fill: "currentColor" }) : /* @__PURE__ */ s("path", { d: "M7 11L4 8H10L7 11Z", fill: "currentColor" }) }) : /* @__PURE__ */ S("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", style: { opacity: 0.4 }, children: [
     /* @__PURE__ */ s("path", { d: "M7 3L10 6H4L7 3Z", fill: "currentColor" }),
     /* @__PURE__ */ s("path", { d: "M7 11L4 8H10L7 11Z", fill: "currentColor" })
   ] });
 }
-const Po = z(function({
+const Oo = z(function({
   sortable: e = !1,
   sortDirection: t = null,
   onSort: o,
@@ -5634,7 +5703,7 @@ const Po = z(function({
   children: i,
   ...d
 }, c) {
-  const { size: u } = $e(), h = {
+  const { size: u } = He(), h = {
     padding: We[u].headerPadding,
     fontWeight: 600,
     color: "var(--brycks-foreground-muted)",
@@ -5668,14 +5737,14 @@ const Po = z(function({
       ...d,
       children: /* @__PURE__ */ S("span", { style: y, children: [
         i,
-        e && /* @__PURE__ */ s(jo, { direction: t })
+        e && /* @__PURE__ */ s(Vo, { direction: t })
       ] })
     }
   );
 });
-Po.displayName = "TableHeader";
-const Vo = z(function({ align: e = "left", truncate: t = !1, className: o, style: n, children: a, ...l }, i) {
-  const { size: d, variant: c } = $e(), m = {
+Oo.displayName = "TableHeader";
+const Po = z(function({ align: e = "left", truncate: t = !1, className: o, style: n, children: a, ...l }, i) {
+  const { size: d, variant: c } = He(), m = {
     padding: We[d].padding,
     color: "var(--brycks-foreground-default)",
     textAlign: e,
@@ -5699,8 +5768,8 @@ const Vo = z(function({ align: e = "left", truncate: t = !1, className: o, style
     }
   );
 });
-Vo.displayName = "TableCell";
-const Oo = z(function({ className: e, style: t, children: o, ...n }, a) {
+Po.displayName = "TableCell";
+const Xo = z(function({ className: e, style: t, children: o, ...n }, a) {
   const l = {
     backgroundColor: "var(--brycks-background-muted)",
     fontWeight: 500,
@@ -5717,8 +5786,8 @@ const Oo = z(function({ className: e, style: t, children: o, ...n }, a) {
     }
   );
 });
-Oo.displayName = "TableFoot";
-const Xo = z(function({ placement: e = "bottom", className: t, style: o, children: n, ...a }, l) {
+Xo.displayName = "TableFoot";
+const Yo = z(function({ placement: e = "bottom", className: t, style: o, children: n, ...a }, l) {
   const i = {
     captionSide: e,
     padding: "12px 16px",
@@ -5738,12 +5807,12 @@ const Xo = z(function({ placement: e = "bottom", className: t, style: o, childre
     }
   );
 });
-Xo.displayName = "TableCaption";
-const Je = be({ size: "md", variant: "default" });
-function Yo() {
-  return me(Je);
+Yo.displayName = "TableCaption";
+const et = ye({ size: "md", variant: "default" });
+function Ko() {
+  return fe(et);
 }
-const Ko = z(function({
+const Go = z(function({
   size: e = "md",
   variant: t = "default",
   interactive: o = !1,
@@ -5765,7 +5834,7 @@ const Ko = z(function({
     overflow: t === "bordered" ? "hidden" : void 0,
     ...a
   };
-  return /* @__PURE__ */ s(Je.Provider, { value: { size: e, variant: t }, children: /* @__PURE__ */ s(
+  return /* @__PURE__ */ s(et.Provider, { value: { size: e, variant: t }, children: /* @__PURE__ */ s(
     "ul",
     {
       ref: c,
@@ -5783,12 +5852,12 @@ const Ko = z(function({
     }
   ) });
 });
-Ko.displayName = "List";
-const Go = {
+Go.displayName = "List";
+const qo = {
   sm: { padding: "8px 12px", fontSize: 13, secondarySize: 12, gap: 10, minHeight: 40 },
   md: { padding: "12px 16px", fontSize: 14, secondarySize: 13, gap: 12, minHeight: 52 },
   lg: { padding: "16px 20px", fontSize: 16, secondarySize: 14, gap: 14, minHeight: 64 }
-}, qo = z(function({
+}, _o = z(function({
   leftElement: e,
   rightElement: t,
   secondary: o,
@@ -5800,7 +5869,7 @@ const Go = {
   children: c,
   ...u
 }, m) {
-  const { size: h, variant: y } = Yo(), f = Go[h], g = {
+  const { size: h, variant: y } = Ko(), f = qo[h], g = {
     display: "flex",
     alignItems: "center",
     gap: f.gap,
@@ -5865,8 +5934,8 @@ const Go = {
     }
   );
 });
-qo.displayName = "ListItem";
-const _o = z(function({ className: e, style: t, ...o }, n) {
+_o.displayName = "ListItem";
+const Uo = z(function({ className: e, style: t, ...o }, n) {
   const a = {
     height: 1,
     backgroundColor: "var(--brycks-border-muted)",
@@ -5884,8 +5953,8 @@ const _o = z(function({ className: e, style: t, ...o }, n) {
     }
   );
 });
-_o.displayName = "ListDivider";
-const Uo = z(function({ className: e, style: t, children: o, ...n }, a) {
+Uo.displayName = "ListDivider";
+const Zo = z(function({ className: e, style: t, children: o, ...n }, a) {
   const l = {
     padding: "12px 16px 8px 16px",
     fontSize: 11,
@@ -5906,12 +5975,12 @@ const Uo = z(function({ className: e, style: t, children: o, ...n }, a) {
     }
   );
 });
-Uo.displayName = "ListHeader";
-const Zo = {
+Zo.displayName = "ListHeader";
+const Qo = {
   sm: { fontSize: 10, padding: "2px 6px", height: 18 },
   md: { fontSize: 11, padding: "3px 8px", height: 22 },
   lg: { fontSize: 12, padding: "4px 10px", height: 26 }
-}, Qo = {
+}, Jo = {
   neutral: {
     solid: { backgroundColor: "var(--brycks-foreground-default)", color: "var(--brycks-background-app)" },
     subtle: { backgroundColor: "var(--brycks-background-muted)", color: "var(--brycks-foreground-default)" },
@@ -5919,35 +5988,35 @@ const Zo = {
   },
   primary: {
     solid: { backgroundColor: "var(--brycks-primary-default)", color: "var(--brycks-primary-foreground)" },
-    subtle: { backgroundColor: "var(--brycks-primary-muted)", color: "var(--brycks-primary-default)" },
+    subtle: { backgroundColor: "var(--brycks-primary-muted)", color: "var(--brycks-primary-hover)" },
     outline: { backgroundColor: "transparent", color: "var(--brycks-primary-default)", borderColor: "var(--brycks-primary-default)" }
   },
   accent: {
     solid: { backgroundColor: "var(--brycks-accent-default)", color: "var(--brycks-accent-foreground)" },
-    subtle: { backgroundColor: "var(--brycks-accent-muted)", color: "var(--brycks-accent-default)" },
+    subtle: { backgroundColor: "var(--brycks-accent-muted)", color: "var(--brycks-accent-hover)" },
     outline: { backgroundColor: "transparent", color: "var(--brycks-accent-default)", borderColor: "var(--brycks-accent-default)" }
   },
   success: {
     solid: { backgroundColor: "var(--brycks-success-default)", color: "var(--brycks-success-foreground)" },
-    subtle: { backgroundColor: "var(--brycks-success-muted)", color: "var(--brycks-success-default)" },
+    subtle: { backgroundColor: "var(--brycks-success-muted)", color: "var(--brycks-success-on-muted)" },
     outline: { backgroundColor: "transparent", color: "var(--brycks-success-default)", borderColor: "var(--brycks-success-default)" }
   },
   warning: {
     solid: { backgroundColor: "var(--brycks-warning-default)", color: "var(--brycks-warning-foreground)" },
-    subtle: { backgroundColor: "var(--brycks-warning-muted)", color: "var(--brycks-warning-default)" },
+    subtle: { backgroundColor: "var(--brycks-warning-muted)", color: "var(--brycks-warning-on-muted)" },
     outline: { backgroundColor: "transparent", color: "var(--brycks-warning-default)", borderColor: "var(--brycks-warning-default)" }
   },
   error: {
     solid: { backgroundColor: "var(--brycks-error-default)", color: "var(--brycks-error-foreground)" },
-    subtle: { backgroundColor: "var(--brycks-error-muted)", color: "var(--brycks-error-default)" },
+    subtle: { backgroundColor: "var(--brycks-error-muted)", color: "var(--brycks-error-on-muted)" },
     outline: { backgroundColor: "transparent", color: "var(--brycks-error-default)", borderColor: "var(--brycks-error-default)" }
   },
   info: {
     solid: { backgroundColor: "var(--brycks-info-default)", color: "var(--brycks-info-foreground)" },
-    subtle: { backgroundColor: "var(--brycks-info-muted)", color: "var(--brycks-info-default)" },
+    subtle: { backgroundColor: "var(--brycks-info-muted)", color: "var(--brycks-info-on-muted)" },
     outline: { backgroundColor: "transparent", color: "var(--brycks-info-default)", borderColor: "var(--brycks-info-default)" }
   }
-}, Jo = z(function({
+}, en = z(function({
   variant: e = "subtle",
   intent: t = "neutral",
   size: o = "md",
@@ -5957,7 +6026,7 @@ const Zo = {
   children: i,
   ...d
 }, c) {
-  const u = Zo[o], m = Qo[t][e], h = {
+  const u = Qo[o], m = Jo[t][e], h = {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
@@ -5989,15 +6058,15 @@ const Zo = {
     }
   );
 });
-Jo.displayName = "Badge";
-const en = {
+en.displayName = "Badge";
+const tn = {
   xs: 14,
   sm: 18,
   md: 24,
   lg: 32,
   xl: 48
 };
-function tn({ size: r, color: e }) {
+function rn({ size: r, color: e }) {
   return /* @__PURE__ */ S(
     "svg",
     {
@@ -6032,7 +6101,7 @@ function tn({ size: r, color: e }) {
     }
   );
 }
-function rn({ size: r, color: e }) {
+function on({ size: r, color: e }) {
   const t = r / 4, o = r / 6;
   return /* @__PURE__ */ s(
     "div",
@@ -6060,7 +6129,7 @@ function rn({ size: r, color: e }) {
     }
   );
 }
-function on({ size: r, color: e }) {
+function nn({ size: r, color: e }) {
   return /* @__PURE__ */ s(
     "span",
     {
@@ -6075,7 +6144,7 @@ function on({ size: r, color: e }) {
     }
   );
 }
-const et = z(function({
+const tt = z(function({
   size: e = "md",
   variant: t = "spinner",
   color: o = "var(--brycks-primary-default)",
@@ -6085,7 +6154,7 @@ const et = z(function({
   testId: i,
   ...d
 }, c) {
-  const u = en[e], m = {
+  const u = tn[e], m = {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
@@ -6093,14 +6162,14 @@ const et = z(function({
   }, h = () => {
     switch (t) {
       case "dots":
-        return /* @__PURE__ */ s(rn, { size: u, color: o });
-      case "pulse":
         return /* @__PURE__ */ s(on, { size: u, color: o });
+      case "pulse":
+        return /* @__PURE__ */ s(nn, { size: u, color: o });
       default:
-        return /* @__PURE__ */ s(tn, { size: u, color: o });
+        return /* @__PURE__ */ s(rn, { size: u, color: o });
     }
   };
-  return /* @__PURE__ */ S(ee, { children: [
+  return /* @__PURE__ */ S(te, { children: [
     /* @__PURE__ */ s("style", { children: `
           @keyframes brycks-spin {
             from { transform: rotate(0deg); }
@@ -6154,8 +6223,8 @@ const et = z(function({
     )
   ] });
 });
-et.displayName = "Loader";
-const Dn = et, tt = z(function({
+tt.displayName = "Loader";
+const Xn = tt, rt = z(function({
   variant: e = "rectangular",
   width: t,
   height: o,
@@ -6196,7 +6265,7 @@ const Dn = et, tt = z(function({
     background: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%)",
     animation: a ? "brycks-shimmer 1.5s infinite" : "none"
   };
-  return /* @__PURE__ */ S(ee, { children: [
+  return /* @__PURE__ */ S(te, { children: [
     a && /* @__PURE__ */ s("style", { children: `
             @keyframes brycks-shimmer {
               0% { transform: translateX(-100%); }
@@ -6222,8 +6291,8 @@ const Dn = et, tt = z(function({
     )
   ] });
 });
-tt.displayName = "Skeleton";
-function nn({
+rt.displayName = "Skeleton";
+function sn({
   lines: r = 3,
   gap: e = 8,
   lastLineWidth: t = "80%",
@@ -6235,7 +6304,7 @@ function nn({
       className: M("brycks-skeleton-text", o),
       style: { display: "flex", flexDirection: "column", gap: e },
       children: Array.from({ length: r }).map((n, a) => /* @__PURE__ */ s(
-        tt,
+        rt,
         {
           variant: "text",
           width: a === r - 1 ? t : "100%"
@@ -6245,8 +6314,8 @@ function nn({
     }
   );
 }
-nn.displayName = "SkeletonText";
-const sn = z(function({
+sn.displayName = "SkeletonText";
+const an = z(function({
   orientation: e = "horizontal",
   variant: t = "solid",
   label: o,
@@ -6325,8 +6394,8 @@ const sn = z(function({
     }
   );
 });
-sn.displayName = "Divider";
-const an = z(function({
+an.displayName = "Divider";
+const ln = z(function({
   icon: e,
   title: t,
   description: o,
@@ -6387,8 +6456,8 @@ const an = z(function({
     }
   );
 });
-an.displayName = "EmptyState";
-function ln({ size: r = 64 }) {
+ln.displayName = "EmptyState";
+function cn({ size: r = 64 }) {
   return /* @__PURE__ */ S(
     "svg",
     {
@@ -6449,19 +6518,19 @@ function ln({ size: r = 64 }) {
     }
   );
 }
-ln.displayName = "EmptyStateIcon";
-function rt({ children: r, container: e, disabled: t = !1 }) {
-  const [o, n] = E(!1), [a, l] = E(null);
-  return V(() => {
+cn.displayName = "EmptyStateIcon";
+function ot({ children: r, container: e, disabled: t = !1 }) {
+  const [o, n] = B(!1), [a, l] = B(null);
+  return X(() => {
     if (n(!0), typeof e == "string") {
       const i = document.querySelector(e);
       l(i);
     } else l(e || document.body);
     return () => n(!1);
-  }, [e]), t ? /* @__PURE__ */ s(ee, { children: r }) : !o || !a ? null : ke(r, a);
+  }, [e]), t ? /* @__PURE__ */ s(te, { children: r }) : !o || !a ? null : pe(r, a);
 }
-rt.displayName = "Portal";
-const cn = [
+ot.displayName = "Portal";
+const dn = [
   "button:not([disabled])",
   "[href]",
   "input:not([disabled])",
@@ -6469,21 +6538,21 @@ const cn = [
   "textarea:not([disabled])",
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
-function dn(r = {}) {
+function un(r = {}) {
   const {
     enabled: e = !0,
     autoFocus: t = !0,
     restoreFocus: o = !0,
     initialFocus: n
-  } = r, a = Q(null), l = Q(null), i = A(() => a.current ? Array.from(a.current.querySelectorAll(cn)) : [], []), d = A(() => {
+  } = r, a = Q(null), l = Q(null), i = j(() => a.current ? Array.from(a.current.querySelectorAll(dn)) : [], []), d = j(() => {
     var m;
     (m = i()[0]) == null || m.focus();
-  }, [i]), c = A(() => {
+  }, [i]), c = j(() => {
     var m;
     const u = i();
     (m = u[u.length - 1]) == null || m.focus();
   }, [i]);
-  return V(() => {
+  return X(() => {
     if (e) {
       if (l.current = document.activeElement, t) {
         const u = a.current;
@@ -6498,7 +6567,7 @@ function dn(r = {}) {
         o && l.current && l.current.focus();
       };
     }
-  }, [e, t, o, n, d]), V(() => {
+  }, [e, t, o, n, d]), X(() => {
     if (!e) return;
     const u = (m) => {
       if (m.key !== "Tab" || !a.current) return;
@@ -6514,7 +6583,7 @@ function dn(r = {}) {
     focusLast: c
   };
 }
-const un = z(function({
+const yn = z(function({
   children: e,
   enabled: t = !0,
   autoFocus: o = !0,
@@ -6523,7 +6592,7 @@ const un = z(function({
   className: l,
   style: i
 }, d) {
-  const { ref: c } = dn({
+  const { ref: c } = un({
     enabled: t,
     autoFocus: o,
     restoreFocus: n,
@@ -6541,8 +6610,8 @@ const un = z(function({
     }
   );
 });
-un.displayName = "FocusTrap";
-const yn = z(function({
+yn.displayName = "FocusTrap";
+const fn = z(function({
   isOpen: e,
   onClose: t,
   closeOnClick: o = !0,
@@ -6569,7 +6638,7 @@ const yn = z(function({
     WebkitBackdropFilter: n ? `blur(${a}px)` : void 0,
     animation: "brycks-overlay-fade-in 200ms ease-out",
     ...u
-  }, k = /* @__PURE__ */ S(ee, { children: [
+  }, k = /* @__PURE__ */ S(te, { children: [
     /* @__PURE__ */ s("style", { children: `
           @keyframes brycks-overlay-fade-in {
             from { opacity: 0; }
@@ -6590,38 +6659,38 @@ const yn = z(function({
       }
     )
   ] });
-  return i ? /* @__PURE__ */ s(rt, { children: k }) : k;
+  return i ? /* @__PURE__ */ s(ot, { children: k }) : k;
 });
-yn.displayName = "Overlay";
-function we(r) {
-  const [e, t] = E(() => typeof window > "u" ? !1 : window.matchMedia(r).matches);
-  return V(() => {
+fn.displayName = "Overlay";
+function Ce(r) {
+  const [e, t] = B(() => typeof window > "u" ? !1 : window.matchMedia(r).matches);
+  return X(() => {
     if (typeof window > "u") return;
     const o = window.matchMedia(r), n = (a) => t(a.matches);
     return t(o.matches), o.addEventListener("change", n), () => o.removeEventListener("change", n);
   }, [r]), e;
 }
-function Bn() {
-  return we("(max-width: 639px)");
+function Yn() {
+  return Ce("(max-width: 639px)");
 }
-function En() {
-  return we("(min-width: 640px) and (max-width: 1023px)");
+function Kn() {
+  return Ce("(min-width: 640px) and (max-width: 1023px)");
 }
-function Rn() {
-  return we("(min-width: 1024px)");
+function Gn() {
+  return Ce("(min-width: 1024px)");
 }
-function Fn() {
-  return we("(prefers-reduced-motion: reduce)");
+function qn() {
+  return Ce("(prefers-reduced-motion: reduce)");
 }
-function An() {
-  return we("(prefers-color-scheme: dark)");
+function _n() {
+  return Ce("(prefers-color-scheme: dark)");
 }
-function jn(r = {}) {
-  const { defaultIsOpen: e = !1, onOpen: t, onClose: o } = r, [n, a] = E(e), l = A(() => {
+function Un(r = {}) {
+  const { defaultIsOpen: e = !1, onOpen: t, onClose: o } = r, [n, a] = B(e), l = j(() => {
     a(!0), t == null || t();
-  }, [t]), i = A(() => {
+  }, [t]), i = j(() => {
     a(!1), o == null || o();
-  }, [o]), d = A(() => {
+  }, [o]), d = j(() => {
     const c = !n;
     a(c), c ? t == null || t() : o == null || o();
   }, [n, t, o]);
@@ -6633,7 +6702,7 @@ function jn(r = {}) {
     setIsOpen: a
   };
 }
-function Pn(r) {
+function Zn(r) {
   const {
     itemCount: e,
     initialIndex: t = 0,
@@ -6641,12 +6710,12 @@ function Pn(r) {
     orientation: n = "vertical",
     onIndexChange: a,
     onSelect: l
-  } = r, [i, d] = E(t), c = A(
+  } = r, [i, d] = B(t), c = j(
     (y) => {
       d(y), a == null || a(y);
     },
     [a]
-  ), u = A(
+  ), u = j(
     (y) => {
       let f;
       switch (y) {
@@ -6666,7 +6735,7 @@ function Pn(r) {
       c(f);
     },
     [i, e, o, c]
-  ), m = A(
+  ), m = j(
     (y) => {
       const { key: f } = y, g = n === "vertical" || n === "both", b = n === "horizontal" || n === "both";
       switch (f) {
@@ -6695,7 +6764,7 @@ function Pn(r) {
       }
     },
     [n, u, l, i]
-  ), h = A(
+  ), h = j(
     (y) => ({
       tabIndex: y === i ? 0 : -1,
       "data-focused": y === i,
@@ -6710,14 +6779,14 @@ function Pn(r) {
     getItemProps: h
   };
 }
-function Vn(r) {
+function Qn(r) {
   const { value: e, defaultValue: t, onChange: o } = r, n = e !== void 0, a = Q(n);
-  V(() => {
+  X(() => {
     a.current !== n && console.warn(
       "Component is switching between controlled and uncontrolled modes. This is not recommended and may cause unexpected behavior."
     ), a.current = n;
   }, [n]);
-  const [l, i] = E(t), d = n ? e : l, c = A(
+  const [l, i] = B(t), d = n ? e : l, c = j(
     (u) => {
       const m = typeof u == "function" ? u(d) : u;
       n || i(m), o == null || o(m);
@@ -6731,172 +6800,181 @@ function Vn(r) {
   };
 }
 export {
-  yo as Accordion,
-  go as AccordionContent,
-  fo as AccordionItem,
-  mo as AccordionTrigger,
-  Or as Alert,
-  Jo as Badge,
-  ht as Box,
-  Do as Breadcrumb,
-  Bo as BreadcrumbItem,
-  Ae as Button,
-  At as Card,
-  Pt as CardBody,
-  Vt as CardFooter,
-  jt as CardHeader,
-  pr as Checkbox,
-  Zt as Code,
-  Rt as Container,
-  Tr as DateInput,
-  rr as Display,
-  sn as Divider,
-  Qr as Drawer,
-  po as Dropdown,
-  vo as DropdownDivider,
-  ko as DropdownItem,
-  xo as DropdownLabel,
-  an as EmptyState,
-  ln as EmptyStateIcon,
-  Fr as FieldError,
-  $r as FileInput,
-  Kt as Flex,
-  Gt as FlexItem,
-  un as FocusTrap,
-  Br as FormField,
-  Nt as Grid,
+  fo as Accordion,
+  ho as AccordionContent,
+  bo as AccordionItem,
+  go as AccordionTrigger,
+  Xr as Alert,
+  en as Badge,
+  pt as Box,
+  Bo as Breadcrumb,
+  Eo as BreadcrumbItem,
+  je as Button,
+  jt as Card,
+  Ot as CardBody,
+  Pt as CardFooter,
+  Vt as CardHeader,
+  kr as Checkbox,
+  Qt as Code,
+  Ft as Container,
+  Lr as DateInput,
+  or as Display,
+  an as Divider,
+  Jr as Drawer,
+  ko as Dropdown,
+  xo as DropdownDivider,
+  vo as DropdownItem,
+  So as DropdownLabel,
+  ln as EmptyState,
+  cn as EmptyStateIcon,
+  Ar as FieldError,
+  Hr as FileInput,
+  Gt as Flex,
+  qt as FlexItem,
+  yn as FocusTrap,
+  Er as FormField,
+  $t as Grid,
   Wt as GridItem,
-  wt as HStack,
-  Re as Heading,
-  dr as Icon,
-  lr as IconButton,
-  je as Input,
-  Ko as List,
-  _o as ListDivider,
-  Uo as ListHeader,
-  qo as ListItem,
-  et as Loader,
-  So as Menu,
-  Mo as MenuDivider,
-  zo as MenuGroup,
-  Co as MenuItem,
-  Pr as Modal,
-  yn as Overlay,
+  Ct as HStack,
+  Fe as Heading,
+  ur as Icon,
+  cr as IconButton,
+  Ve as Input,
+  Go as List,
+  Uo as ListDivider,
+  Zo as ListHeader,
+  _o as ListItem,
+  tt as Loader,
+  wo as Menu,
+  Io as MenuDivider,
+  Mo as MenuGroup,
+  zo as MenuItem,
+  Or as Modal,
+  fn as Overlay,
   Wo as Pagination,
-  eo as Popover,
-  rt as Portal,
-  no as Progress,
-  wr as Radio,
-  Cr as RadioGroup,
-  Ot as Section,
-  mr as Select,
-  tt as Skeleton,
-  nn as SkeletonText,
-  Mr as Slider,
-  Xt as Spacer,
-  Dn as Spinner,
-  Le as Stack,
-  kr as Switch,
-  lo as Tab,
-  ao as TabList,
-  uo as TabPanel,
-  co as TabPanels,
-  Eo as Table,
-  Fo as TableBody,
-  Xo as TableCaption,
-  Vo as TableCell,
-  Oo as TableFoot,
-  Ro as TableHead,
-  Po as TableHeader,
-  Ao as TableRow,
-  so as Tabs,
-  Ee as Text,
-  yr as TextField,
-  xr as Textarea,
-  bs as ThemeProvider,
-  Pe as Toast,
-  Hn as ToastProvider,
-  Xr as Tooltip,
-  zt as VStack,
-  Yn as accent,
-  es as animations,
-  ts as borderStyles,
-  rs as borderWidths,
-  os as breakpoints,
-  Ie as buildSpacingStyles,
-  Kn as colors,
-  Y as componentFontSize,
+  to as Popover,
+  ot as Portal,
+  so as Progress,
+  Cr as Radio,
+  zr as RadioGroup,
+  Xt as Section,
+  gr as Select,
+  rt as Skeleton,
+  sn as SkeletonText,
+  Ir as Slider,
+  Yt as Spacer,
+  Xn as Spinner,
+  Ne as Stack,
+  vr as Switch,
+  co as Tab,
+  io as TabList,
+  yo as TabPanel,
+  uo as TabPanels,
+  Ro as Table,
+  Ao as TableBody,
+  Yo as TableCaption,
+  Po as TableCell,
+  Xo as TableFoot,
+  Fo as TableHead,
+  Oo as TableHeader,
+  jo as TableRow,
+  ao as Tabs,
+  Re as Text,
+  fr as TextField,
+  Sr as Textarea,
+  Cs as ThemeProvider,
+  Oe as Toast,
+  Pn as ToastProvider,
+  Yr as Tooltip,
+  Mt as VStack,
+  ts as accent,
+  ds as animations,
+  Nn as avatarSizes,
+  us as borderStyles,
+  ys as borderWidths,
+  fs as breakpoints,
+  Te as buildSpacingStyles,
+  rs as colors,
+  K as componentFontSize,
   re as componentFontWeight,
   ae as componentGap,
-  ue as componentHeights,
+  ce as componentHeights,
   U as componentLineHeight,
-  ye as componentPaddingX,
-  hn as componentPaddingY,
-  Mn as componentTypography,
-  ot as containers,
-  lt as controlSizes,
-  ms as cssVar,
+  de as componentPaddingX,
+  pn as componentPaddingY,
+  In as componentTypography,
+  nt as containers,
+  Wn as contentPadding,
+  ct as controlSizes,
+  zs as cssVar,
   M as cx,
-  gs as darkTheme,
-  wn as duration,
+  Ms as darkTheme,
+  Cn as duration,
   Z as durations,
-  Cn as easing,
-  q as easings,
-  Gn as error,
-  fe as focusRing,
-  vn as focusRingOffset,
-  ns as focusRings,
-  xn as focusStyles,
-  se as fontFamilies,
-  ge as fontSizes,
-  xe as fontWeights,
-  Tn as generateId,
-  In as getSpacingValue,
-  ss as glows,
-  Ln as hexToRgba,
-  Nn as iconPaths,
-  Se as iconSizes,
-  qn as info,
-  zn as keyframes,
-  as as letterSpacings,
-  hs as lightTheme,
-  Ce as lineHeights,
-  is as mediaQueries,
-  pn as modalWidths,
-  _n as neutrals,
-  ce as opacity,
-  kn as popoverSizing,
-  Un as primary,
-  ls as radii,
-  he as scale,
-  cs as semanticSpacing,
-  ds as shadows,
-  j as spacing,
-  O as spacingToCss,
-  Me as stateOpacity,
-  Zn as success,
-  ct as switchSizes,
-  de as textStyles,
-  pe as transition,
-  Sn as transitionProperties,
-  us as transitions,
-  Jr as useClickOutside,
-  Vn as useControllable,
-  jn as useDisclosure,
-  dn as useFocusTrap,
-  Hr as useId,
-  $n as useIds,
-  Rn as useIsDesktop,
-  Bn as useIsMobile,
-  En as useIsTablet,
-  Pn as useKeyboardNavigation,
-  we as useMediaQuery,
-  An as usePrefersDarkMode,
-  Fn as usePrefersReducedMotion,
-  ps as useTheme,
-  ks as useThemeColors,
-  Wn as useToast,
-  Qn as warning,
-  ys as zIndex
+  zn as easing,
+  G as easings,
+  os as error,
+  ue as focusRing,
+  xn as focusRingOffset,
+  bs as focusRings,
+  Sn as focusStyles,
+  ne as fontFamilies,
+  me as fontSizes,
+  Se as fontWeights,
+  Fn as generateId,
+  Rn as getSpacingValue,
+  ms as glows,
+  Ln as headerSizes,
+  An as hexToRgba,
+  $n as iconButtonSizes,
+  jn as iconPaths,
+  we as iconSizes,
+  ns as info,
+  Mn as keyframes,
+  gs as letterSpacings,
+  Is as lightTheme,
+  ze as lineHeights,
+  hs as mediaQueries,
+  kn as modalWidths,
+  ss as neutrals,
+  ie as opacity,
+  Dn as pageHeaderSpacing,
+  vn as popoverSizing,
+  as as primary,
+  Hn as quickActionSizes,
+  ps as radii,
+  ge as scale,
+  Bn as searchInputSizes,
+  ks as semanticSpacing,
+  vs as shadows,
+  Tn as sidebarSizes,
+  D as spacing,
+  Y as spacingToCss,
+  En as statCardSizes,
+  Ie as stateOpacity,
+  is as success,
+  dt as switchSizes,
+  le as textStyles,
+  he as transition,
+  wn as transitionProperties,
+  xs as transitions,
+  eo as useClickOutside,
+  Qn as useControllable,
+  Un as useDisclosure,
+  un as useFocusTrap,
+  Dr as useId,
+  Vn as useIds,
+  Gn as useIsDesktop,
+  Yn as useIsMobile,
+  Kn as useIsTablet,
+  Zn as useKeyboardNavigation,
+  Ce as useMediaQuery,
+  _n as usePrefersDarkMode,
+  qn as usePrefersReducedMotion,
+  Ts as useTheme,
+  Ls as useThemeColors,
+  On as useToast,
+  ls as warning,
+  Ss as zIndex
 };
 //# sourceMappingURL=index.js.map