@octavius2929-personal/design-system 0.9.0 → 0.10.0

package/dist/index.cjs

@@ -27,7 +27,7 @@ __export(index_exports, {
   Badge: () => Badge,
   Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
-  Card: () => Card,
+  Card: () => Card2,
   CheckIcon: () => CheckIcon,
   Checkbox: () => Checkbox,
   ChevronDownIcon: () => ChevronDownIcon,
@@ -105,6 +105,9 @@ function useToggle(initial = false) {
   return [on, toggle, setOn];
 }
 
+// src/components/container/index.tsx
+var import_react3 = require("react");
+
 // src/theme/styles/sprinkles/index.css.ts
 var import_createRuntimeSprinkles = require("@vanilla-extract/sprinkles/createRuntimeSprinkles");
 var sprinkles = (0, import_createRuntimeSprinkles.createSprinkles)({ conditions: void 0, styles: { p: { mappings: ["padding"] }, px: { mappings: ["paddingLeft", "paddingRight"] }, py: { mappings: ["paddingTop", "paddingBottom"] }, pt: { mappings: ["paddingTop"] }, pr: { mappings: ["paddingRight"] }, pb: { mappings: ["paddingBottom"] }, pl: { mappings: ["paddingLeft"] }, m: { mappings: ["marginTop", "marginRight", "marginBottom", "marginLeft"] }, mx: { mappings: ["marginLeft", "marginRight"] }, my: { mappings: ["marginTop", "marginBottom"] }, mt: { mappings: ["marginTop"] }, mr: { mappings: ["marginRight"] }, mb: { mappings: ["marginBottom"] }, ml: { mappings: ["marginLeft"] }, bg: { mappings: ["background"] }, radius: { mappings: ["borderRadius"] }, padding: { values: { s0: { defaultClass: "sprinkles_padding_s0__qhecrd0" }, s1: { defaultClass: "sprinkles_padding_s1__qhecrd1" }, s2: { defaultClass: "sprinkles_padding_s2__qhecrd2" }, s3: { defaultClass: "sprinkles_padding_s3__qhecrd3" }, s4: { defaultClass: "sprinkles_padding_s4__qhecrd4" }, s5: { defaultClass: "sprinkles_padding_s5__qhecrd5" }, s6: { defaultClass: "sprinkles_padding_s6__qhecrd6" }, s7: { defaultClass: "sprinkles_padding_s7__qhecrd7" }, s8: { defaultClass: "sprinkles_padding_s8__qhecrd8" }, s9: { defaultClass: "sprinkles_padding_s9__qhecrd9" } } }, paddingTop: { values: { s0: { defaultClass: "sprinkles_paddingTop_s0__qhecrda" }, s1: { defaultClass: "sprinkles_paddingTop_s1__qhecrdb" }, s2: { defaultClass: "sprinkles_paddingTop_s2__qhecrdc" }, s3: { defaultClass: "sprinkles_paddingTop_s3__qhecrdd" }, s4: { defaultClass: "sprinkles_paddingTop_s4__qhecrde" }, s5: { defaultClass: "sprinkles_paddingTop_s5__qhecrdf" }, s6: { defaultClass: "sprinkles_paddingTop_s6__qhecrdg" }, s7: { defaultClass: "sprinkles_paddingTop_s7__qhecrdh" }, s8: { defaultClass: "sprinkles_paddingTop_s8__qhecrdi" }, s9: { defaultClass: "sprinkles_paddingTop_s9__qhecrdj" } } }, paddingRight: { values: { s0: { defaultClass: "sprinkles_paddingRight_s0__qhecrdk" }, s1: { defaultClass: "sprinkles_paddingRight_s1__qhecrdl" }, s2: { defaultClass: "sprinkles_paddingRight_s2__qhecrdm" }, s3: { defaultClass: "sprinkles_paddingRight_s3__qhecrdn" }, s4: { defaultClass: "sprinkles_paddingRight_s4__qhecrdo" }, s5: { defaultClass: "sprinkles_paddingRight_s5__qhecrdp" }, s6: { defaultClass: "sprinkles_paddingRight_s6__qhecrdq" }, s7: { defaultClass: "sprinkles_paddingRight_s7__qhecrdr" }, s8: { defaultClass: "sprinkles_paddingRight_s8__qhecrds" }, s9: { defaultClass: "sprinkles_paddingRight_s9__qhecrdt" } } }, paddingBottom: { values: { s0: { defaultClass: "sprinkles_paddingBottom_s0__qhecrdu" }, s1: { defaultClass: "sprinkles_paddingBottom_s1__qhecrdv" }, s2: { defaultClass: "sprinkles_paddingBottom_s2__qhecrdw" }, s3: { defaultClass: "sprinkles_paddingBottom_s3__qhecrdx" }, s4: { defaultClass: "sprinkles_paddingBottom_s4__qhecrdy" }, s5: { defaultClass: "sprinkles_paddingBottom_s5__qhecrdz" }, s6: { defaultClass: "sprinkles_paddingBottom_s6__qhecrd10" }, s7: { defaultClass: "sprinkles_paddingBottom_s7__qhecrd11" }, s8: { defaultClass: "sprinkles_paddingBottom_s8__qhecrd12" }, s9: { defaultClass: "sprinkles_paddingBottom_s9__qhecrd13" } } }, paddingLeft: { values: { s0: { defaultClass: "sprinkles_paddingLeft_s0__qhecrd14" }, s1: { defaultClass: "sprinkles_paddingLeft_s1__qhecrd15" }, s2: { defaultClass: "sprinkles_paddingLeft_s2__qhecrd16" }, s3: { defaultClass: "sprinkles_paddingLeft_s3__qhecrd17" }, s4: { defaultClass: "sprinkles_paddingLeft_s4__qhecrd18" }, s5: { defaultClass: "sprinkles_paddingLeft_s5__qhecrd19" }, s6: { defaultClass: "sprinkles_paddingLeft_s6__qhecrd1a" }, s7: { defaultClass: "sprinkles_paddingLeft_s7__qhecrd1b" }, s8: { defaultClass: "sprinkles_paddingLeft_s8__qhecrd1c" }, s9: { defaultClass: "sprinkles_paddingLeft_s9__qhecrd1d" } } }, marginTop: { values: { s0: { defaultClass: "sprinkles_marginTop_s0__qhecrd1e" }, s1: { defaultClass: "sprinkles_marginTop_s1__qhecrd1f" }, s2: { defaultClass: "sprinkles_marginTop_s2__qhecrd1g" }, s3: { defaultClass: "sprinkles_marginTop_s3__qhecrd1h" }, s4: { defaultClass: "sprinkles_marginTop_s4__qhecrd1i" }, s5: { defaultClass: "sprinkles_marginTop_s5__qhecrd1j" }, s6: { defaultClass: "sprinkles_marginTop_s6__qhecrd1k" }, s7: { defaultClass: "sprinkles_marginTop_s7__qhecrd1l" }, s8: { defaultClass: "sprinkles_marginTop_s8__qhecrd1m" }, s9: { defaultClass: "sprinkles_marginTop_s9__qhecrd1n" } } }, marginRight: { values: { s0: { defaultClass: "sprinkles_marginRight_s0__qhecrd1o" }, s1: { defaultClass: "sprinkles_marginRight_s1__qhecrd1p" }, s2: { defaultClass: "sprinkles_marginRight_s2__qhecrd1q" }, s3: { defaultClass: "sprinkles_marginRight_s3__qhecrd1r" }, s4: { defaultClass: "sprinkles_marginRight_s4__qhecrd1s" }, s5: { defaultClass: "sprinkles_marginRight_s5__qhecrd1t" }, s6: { defaultClass: "sprinkles_marginRight_s6__qhecrd1u" }, s7: { defaultClass: "sprinkles_marginRight_s7__qhecrd1v" }, s8: { defaultClass: "sprinkles_marginRight_s8__qhecrd1w" }, s9: { defaultClass: "sprinkles_marginRight_s9__qhecrd1x" } } }, marginBottom: { values: { s0: { defaultClass: "sprinkles_marginBottom_s0__qhecrd1y" }, s1: { defaultClass: "sprinkles_marginBottom_s1__qhecrd1z" }, s2: { defaultClass: "sprinkles_marginBottom_s2__qhecrd20" }, s3: { defaultClass: "sprinkles_marginBottom_s3__qhecrd21" }, s4: { defaultClass: "sprinkles_marginBottom_s4__qhecrd22" }, s5: { defaultClass: "sprinkles_marginBottom_s5__qhecrd23" }, s6: { defaultClass: "sprinkles_marginBottom_s6__qhecrd24" }, s7: { defaultClass: "sprinkles_marginBottom_s7__qhecrd25" }, s8: { defaultClass: "sprinkles_marginBottom_s8__qhecrd26" }, s9: { defaultClass: "sprinkles_marginBottom_s9__qhecrd27" } } }, marginLeft: { values: { s0: { defaultClass: "sprinkles_marginLeft_s0__qhecrd28" }, s1: { defaultClass: "sprinkles_marginLeft_s1__qhecrd29" }, s2: { defaultClass: "sprinkles_marginLeft_s2__qhecrd2a" }, s3: { defaultClass: "sprinkles_marginLeft_s3__qhecrd2b" }, s4: { defaultClass: "sprinkles_marginLeft_s4__qhecrd2c" }, s5: { defaultClass: "sprinkles_marginLeft_s5__qhecrd2d" }, s6: { defaultClass: "sprinkles_marginLeft_s6__qhecrd2e" }, s7: { defaultClass: "sprinkles_marginLeft_s7__qhecrd2f" }, s8: { defaultClass: "sprinkles_marginLeft_s8__qhecrd2g" }, s9: { defaultClass: "sprinkles_marginLeft_s9__qhecrd2h" } } }, gap: { values: { s0: { defaultClass: "sprinkles_gap_s0__qhecrd2i" }, s1: { defaultClass: "sprinkles_gap_s1__qhecrd2j" }, s2: { defaultClass: "sprinkles_gap_s2__qhecrd2k" }, s3: { defaultClass: "sprinkles_gap_s3__qhecrd2l" }, s4: { defaultClass: "sprinkles_gap_s4__qhecrd2m" }, s5: { defaultClass: "sprinkles_gap_s5__qhecrd2n" }, s6: { defaultClass: "sprinkles_gap_s6__qhecrd2o" }, s7: { defaultClass: "sprinkles_gap_s7__qhecrd2p" }, s8: { defaultClass: "sprinkles_gap_s8__qhecrd2q" }, s9: { defaultClass: "sprinkles_gap_s9__qhecrd2r" } } }, rowGap: { values: { s0: { defaultClass: "sprinkles_rowGap_s0__qhecrd2s" }, s1: { defaultClass: "sprinkles_rowGap_s1__qhecrd2t" }, s2: { defaultClass: "sprinkles_rowGap_s2__qhecrd2u" }, s3: { defaultClass: "sprinkles_rowGap_s3__qhecrd2v" }, s4: { defaultClass: "sprinkles_rowGap_s4__qhecrd2w" }, s5: { defaultClass: "sprinkles_rowGap_s5__qhecrd2x" }, s6: { defaultClass: "sprinkles_rowGap_s6__qhecrd2y" }, s7: { defaultClass: "sprinkles_rowGap_s7__qhecrd2z" }, s8: { defaultClass: "sprinkles_rowGap_s8__qhecrd30" }, s9: { defaultClass: "sprinkles_rowGap_s9__qhecrd31" } } }, columnGap: { values: { s0: { defaultClass: "sprinkles_columnGap_s0__qhecrd32" }, s1: { defaultClass: "sprinkles_columnGap_s1__qhecrd33" }, s2: { defaultClass: "sprinkles_columnGap_s2__qhecrd34" }, s3: { defaultClass: "sprinkles_columnGap_s3__qhecrd35" }, s4: { defaultClass: "sprinkles_columnGap_s4__qhecrd36" }, s5: { defaultClass: "sprinkles_columnGap_s5__qhecrd37" }, s6: { defaultClass: "sprinkles_columnGap_s6__qhecrd38" }, s7: { defaultClass: "sprinkles_columnGap_s7__qhecrd39" }, s8: { defaultClass: "sprinkles_columnGap_s8__qhecrd3a" }, s9: { defaultClass: "sprinkles_columnGap_s9__qhecrd3b" } } }, background: { values: { bg1: { defaultClass: "sprinkles_background_bg1__qhecrd3c" }, bg2: { defaultClass: "sprinkles_background_bg2__qhecrd3d" }, bg3: { defaultClass: "sprinkles_background_bg3__qhecrd3e" }, bgInset: { defaultClass: "sprinkles_background_bgInset__qhecrd3f" }, fg1: { defaultClass: "sprinkles_background_fg1__qhecrd3g" }, fg2: { defaultClass: "sprinkles_background_fg2__qhecrd3h" }, fg3: { defaultClass: "sprinkles_background_fg3__qhecrd3i" }, fgOnAccent: { defaultClass: "sprinkles_background_fgOnAccent__qhecrd3j" }, border1: { defaultClass: "sprinkles_background_border1__qhecrd3k" }, border2: { defaultClass: "sprinkles_background_border2__qhecrd3l" }, borderStrong: { defaultClass: "sprinkles_background_borderStrong__qhecrd3m" }, accent: { defaultClass: "sprinkles_background_accent__qhecrd3n" }, accentHover: { defaultClass: "sprinkles_background_accentHover__qhecrd3o" }, accentSoft: { defaultClass: "sprinkles_background_accentSoft__qhecrd3p" }, ok: { defaultClass: "sprinkles_background_ok__qhecrd3q" }, warn: { defaultClass: "sprinkles_background_warn__qhecrd3r" }, danger: { defaultClass: "sprinkles_background_danger__qhecrd3s" }, info: { defaultClass: "sprinkles_background_info__qhecrd3t" }, focus: { defaultClass: "sprinkles_background_focus__qhecrd3u" }, scrim: { defaultClass: "sprinkles_background_scrim__qhecrd3v" } } }, color: { values: { bg1: { defaultClass: "sprinkles_color_bg1__qhecrd3w" }, bg2: { defaultClass: "sprinkles_color_bg2__qhecrd3x" }, bg3: { defaultClass: "sprinkles_color_bg3__qhecrd3y" }, bgInset: { defaultClass: "sprinkles_color_bgInset__qhecrd3z" }, fg1: { defaultClass: "sprinkles_color_fg1__qhecrd40" }, fg2: { defaultClass: "sprinkles_color_fg2__qhecrd41" }, fg3: { defaultClass: "sprinkles_color_fg3__qhecrd42" }, fgOnAccent: { defaultClass: "sprinkles_color_fgOnAccent__qhecrd43" }, border1: { defaultClass: "sprinkles_color_border1__qhecrd44" }, border2: { defaultClass: "sprinkles_color_border2__qhecrd45" }, borderStrong: { defaultClass: "sprinkles_color_borderStrong__qhecrd46" }, accent: { defaultClass: "sprinkles_color_accent__qhecrd47" }, accentHover: { defaultClass: "sprinkles_color_accentHover__qhecrd48" }, accentSoft: { defaultClass: "sprinkles_color_accentSoft__qhecrd49" }, ok: { defaultClass: "sprinkles_color_ok__qhecrd4a" }, warn: { defaultClass: "sprinkles_color_warn__qhecrd4b" }, danger: { defaultClass: "sprinkles_color_danger__qhecrd4c" }, info: { defaultClass: "sprinkles_color_info__qhecrd4d" }, focus: { defaultClass: "sprinkles_color_focus__qhecrd4e" }, scrim: { defaultClass: "sprinkles_color_scrim__qhecrd4f" } } }, borderRadius: { values: { none: { defaultClass: "sprinkles_borderRadius_none__qhecrd4g" }, sm: { defaultClass: "sprinkles_borderRadius_sm__qhecrd4h" }, md: { defaultClass: "sprinkles_borderRadius_md__qhecrd4i" }, lg: { defaultClass: "sprinkles_borderRadius_lg__qhecrd4j" }, base: { defaultClass: "sprinkles_borderRadius_base__qhecrd4k" }, full: { defaultClass: "sprinkles_borderRadius_full__qhecrd4l" } } }, display: { values: { block: { defaultClass: "sprinkles_display_block__qhecrd4m" }, "inline-block": { defaultClass: "sprinkles_display_inline-block__qhecrd4n" }, flex: { defaultClass: "sprinkles_display_flex__qhecrd4o" }, "inline-flex": { defaultClass: "sprinkles_display_inline-flex__qhecrd4p" }, grid: { defaultClass: "sprinkles_display_grid__qhecrd4q" }, none: { defaultClass: "sprinkles_display_none__qhecrd4r" } } }, flexDirection: { values: { row: { defaultClass: "sprinkles_flexDirection_row__qhecrd4s" }, column: { defaultClass: "sprinkles_flexDirection_column__qhecrd4t" }, "row-reverse": { defaultClass: "sprinkles_flexDirection_row-reverse__qhecrd4u" }, "column-reverse": { defaultClass: "sprinkles_flexDirection_column-reverse__qhecrd4v" } } }, alignItems: { values: { "flex-start": { defaultClass: "sprinkles_alignItems_flex-start__qhecrd4w" }, center: { defaultClass: "sprinkles_alignItems_center__qhecrd4x" }, "flex-end": { defaultClass: "sprinkles_alignItems_flex-end__qhecrd4y" }, stretch: { defaultClass: "sprinkles_alignItems_stretch__qhecrd4z" }, baseline: { defaultClass: "sprinkles_alignItems_baseline__qhecrd50" } } }, justifyContent: { values: { "flex-start": { defaultClass: "sprinkles_justifyContent_flex-start__qhecrd51" }, center: { defaultClass: "sprinkles_justifyContent_center__qhecrd52" }, "flex-end": { defaultClass: "sprinkles_justifyContent_flex-end__qhecrd53" }, "space-between": { defaultClass: "sprinkles_justifyContent_space-between__qhecrd54" }, "space-around": { defaultClass: "sprinkles_justifyContent_space-around__qhecrd55" }, "space-evenly": { defaultClass: "sprinkles_justifyContent_space-evenly__qhecrd56" } } }, flexWrap: { values: { nowrap: { defaultClass: "sprinkles_flexWrap_nowrap__qhecrd57" }, wrap: { defaultClass: "sprinkles_flexWrap_wrap__qhecrd58" } } } } });
@@ -126,17 +129,23 @@ function useStyles(props) {
 
 // src/components/container/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function Container({ as, ...props }) {
+function ContainerImpl({ as, ...props }, ref) {
   const Component = as ?? "div";
   const { className, rest } = useStyles(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...rest, className });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref, ...rest, className });
 }
+var ContainerForwarded = (0, import_react3.forwardRef)(ContainerImpl);
+ContainerForwarded.displayName = "Container";
+var Container = ContainerForwarded;
+
+// src/components/typography/index.tsx
+var import_react6 = require("react");
 
 // src/components/typography/use-styles.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/theme/context/theme-context.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var noop = () => {
 };
@@ -150,7 +159,7 @@ var DEFAULT_VALUE = {
   toggleMode: noop,
   cycleMode: noop
 };
-var ThemeContext = (0, import_react3.createContext)(null);
+var ThemeContext = (0, import_react4.createContext)(null);
 function resolveSystemMode() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
   if (window.matchMedia("(prefers-contrast: more)").matches) return "contrast";
@@ -180,14 +189,14 @@ function ThemeProvider({
   storageKey = "ds-theme",
   persist = true
 }) {
-  const [schema, setSchema] = (0, import_react3.useState)(
+  const [schema, setSchema] = (0, import_react4.useState)(
     () => persist && readStored(storageKey)?.schema || defaultSchema
   );
-  const [preference, setPreference] = (0, import_react3.useState)(
+  const [preference, setPreference] = (0, import_react4.useState)(
     () => (persist ? readStored(storageKey)?.preference : null) ?? defaultMode
   );
-  const [systemMode, setSystemMode] = (0, import_react3.useState)(resolveSystemMode);
-  (0, import_react3.useEffect)(() => {
+  const [systemMode, setSystemMode] = (0, import_react4.useState)(resolveSystemMode);
+  (0, import_react4.useEffect)(() => {
     if (preference !== "system") return;
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mqls = ["(prefers-contrast: more)", "(prefers-color-scheme: dark)"].map(
@@ -201,10 +210,10 @@ function ThemeProvider({
     };
   }, [preference]);
   const mode = preference === "system" ? systemMode : preference;
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (persist) writeStored(storageKey, { schema, preference });
   }, [schema, preference, persist, storageKey]);
-  const value = (0, import_react3.useMemo)(
+  const value = (0, import_react4.useMemo)(
     () => ({
       schema,
       mode,
@@ -223,7 +232,7 @@ function ThemeProvider({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
-  return (0, import_react3.useContext)(ThemeContext) ?? DEFAULT_VALUE;
+  return (0, import_react4.useContext)(ThemeContext) ?? DEFAULT_VALUE;
 }
 
 // src/theme/typography.css.ts
@@ -241,7 +250,7 @@ function useStyles2({
   align: align2
 }) {
   const { themeClass } = useTheme();
-  const className = (0, import_react4.useMemo)(
+  const className = (0, import_react5.useMemo)(
     () => [
       themeClass,
       base,
@@ -270,20 +279,22 @@ var defaultElement = {
   code: "code",
   blackletter: "span"
 };
-function Typography({
-  variant: variant2,
-  as,
-  color: color2,
-  align: align2,
-  ...rest
-}) {
+function TypographyInner({ variant: variant2, as, color: color2, align: align2, ...rest }, ref) {
   const Component = as ?? defaultElement[variant2];
   const { text: text2 } = useStyles2({ variant: variant2, color: color2, align: align2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...rest, className: text2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ref, ...rest, className: text2 });
 }
+var TypographyForwarded = (0, import_react6.forwardRef)(
+  TypographyInner
+);
+TypographyForwarded.displayName = "Typography";
+var Typography = TypographyForwarded;
+
+// src/components/button/index.tsx
+var import_react8 = require("react");
 
 // src/components/button/use-styles.ts
-var import_react5 = require("react");
+var import_react7 = require("react");
 
 // src/components/button/use-styles.css.ts
 var full = "use-styles_full__1pbtill4";
@@ -303,7 +314,7 @@ function useStyles3({
   className
 }) {
   const { themeClass } = useTheme();
-  const container = (0, import_react5.useMemo)(
+  const container = (0, import_react7.useMemo)(
     () => [
       themeClass,
       root,
@@ -320,7 +331,7 @@ function useStyles3({
 // src/components/button/index.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var ICON_SIZE = { sm: 14, md: 16, lg: 18 };
-function Button({
+var Button = (0, import_react8.forwardRef)(function Button2({
   variant: variant2,
   tone: tone4,
   size: size3 = "md",
@@ -328,20 +339,24 @@ function Button({
   endIcon: EndIcon,
   full: full2,
   className,
+  type = "button",
   children,
   ...rest
-}) {
+}, ref) {
   const { container } = useStyles3({ variant: variant2, tone: tone4, size: size3, full: full2, className });
   const iconSize = ICON_SIZE[size3];
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { className: container, ...rest, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { ref, type, className: container, ...rest, children: [
     StartIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StartIcon, { size: iconSize }),
     children,
     EndIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EndIcon, { size: iconSize })
   ] });
-}
+});
+
+// src/components/divider/index.tsx
+var import_react10 = require("react");
 
 // src/components/divider/use-styles.ts
-var import_react6 = require("react");
+var import_react9 = require("react");
 
 // src/components/divider/use-styles.css.ts
 var horizontal = "use-styles_horizontal__1n7v7yj1";
@@ -354,7 +369,7 @@ var vertical = "use-styles_vertical__1n7v7yj2";
 // src/components/divider/use-styles.ts
 function useStyles4({ vertical: vertical2, hasLabel }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react6.useMemo)(
+  const root24 = (0, import_react9.useMemo)(
     () => [
       themeClass,
       root2,
@@ -367,21 +382,24 @@ function useStyles4({ vertical: vertical2, hasLabel }) {
 
 // src/components/divider/index.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function Divider({ vertical: vertical2, label: label7, ...rest }) {
+var Divider = (0, import_react10.forwardRef)(function Divider2({ vertical: vertical2, label: label7, ...rest }, ref) {
   const hasLabel = label7 != null;
   const { root: root24, line: line2, label: labelClass } = useStyles4({ vertical: vertical2, hasLabel });
   if (hasLabel) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { role: "separator", className: root24, ...rest, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref, role: "separator", className: root24, ...rest, children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: line2 }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: labelClass, children: label7 }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: line2 })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { role: "separator", className: root24, ...rest });
-}
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, role: "separator", className: root24, ...rest });
+});
+
+// src/components/avatar/index.tsx
+var import_react12 = require("react");
 
 // src/components/avatar/use-styles.ts
-var import_react7 = require("react");
+var import_react11 = require("react");
 
 // src/components/avatar/use-styles.css.ts
 var root3 = "use-styles_root__1mn1rmu0";
@@ -395,7 +413,7 @@ function useStyles5({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react7.useMemo)(
+  const root24 = (0, import_react11.useMemo)(
     () => [
       themeClass,
       root3,
@@ -410,13 +428,16 @@ function useStyles5({
 
 // src/components/avatar/index.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function Avatar({ size: size3, filled, className, children, ...rest }) {
+var Avatar = (0, import_react12.forwardRef)(function Avatar2({ size: size3, filled, className, children, ...rest }, ref) {
   const { root: root24 } = useStyles5({ size: size3, filled, className });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: root24, ...rest, children });
-}
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { ref, className: root24, ...rest, children });
+});
+
+// src/components/badge/index.tsx
+var import_react14 = require("react");
 
 // src/components/badge/use-styles.ts
-var import_react8 = require("react");
+var import_react13 = require("react");
 
 // src/components/badge/use-styles.css.ts
 var dot = "use-styles_dot__1wpei6p1";
@@ -429,26 +450,29 @@ function useStyles6({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react8.useMemo)(
+  const root24 = (0, import_react13.useMemo)(
     () => [themeClass, root4, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
-  const dot3 = (0, import_react8.useMemo)(() => [dot, tone2[tone4]].join(" "), [tone4]);
+  const dot3 = (0, import_react13.useMemo)(() => [dot, tone2[tone4]].join(" "), [tone4]);
   return { root: root24, dot: dot3 };
 }
 
 // src/components/badge/index.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function Badge({ count, tone: tone4, className, children, ...rest }) {
+var Badge = (0, import_react14.forwardRef)(function Badge2({ count, tone: tone4, className, children, ...rest }, ref) {
   const { root: root24, dot: dot3 } = useStyles6({ tone: tone4, className });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: root24, ...rest, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { ref, className: root24, ...rest, children: [
     children,
     count != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: dot3, children: count })
   ] });
-}
+});
+
+// src/components/progress/index.tsx
+var import_react16 = require("react");
 
 // src/components/progress/use-styles.ts
-var import_react9 = require("react");
+var import_react15 = require("react");
 
 // src/components/progress/use-styles.css.ts
 var bar = "use-styles_bar__kbop7v3";
@@ -464,7 +488,7 @@ function useStyles7({
 }) {
   const { themeClass } = useTheme();
   const indeterminate2 = value === void 0;
-  return (0, import_react9.useMemo)(() => {
+  return (0, import_react15.useMemo)(() => {
     const root24 = (...classes) => [themeClass, ...classes, className].filter(Boolean).join(" ");
     if (variant2 === "circular") {
       return { track: "", bar: "", spinner: root24(spinner) };
@@ -479,19 +503,14 @@ function useStyles7({
 
 // src/components/progress/index.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-function Progress({
-  variant: variant2 = "linear",
-  value,
-  size: size3 = 20,
-  className,
-  ...rest
-}) {
+var Progress = (0, import_react16.forwardRef)(function Progress2({ variant: variant2 = "linear", value, size: size3 = 20, className, ...rest }, ref) {
   const { track: track4, bar: bar2, spinner: spinner2 } = useStyles7({ variant: variant2, value, className });
   const indeterminate2 = value === void 0;
   if (variant2 === "circular") {
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "span",
       {
+        ref,
         className: spinner2,
         role: "progressbar",
         "aria-valuenow": indeterminate2 ? void 0 : value,
@@ -505,6 +524,7 @@ function Progress({
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
+      ref,
       className: track4,
       role: "progressbar",
       "aria-valuenow": indeterminate2 ? void 0 : value,
@@ -514,7 +534,10 @@ function Progress({
       children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: bar2, style: indeterminate2 ? void 0 : { width: `${value}%` } })
     }
   );
-}
+});
+
+// src/components/chip/index.tsx
+var import_react18 = require("react");
 
 // src/components/icons/x/index.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -542,7 +565,7 @@ function XIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/chip/use-styles.ts
-var import_react10 = require("react");
+var import_react17 = require("react");
 
 // src/components/chip/use-styles.css.ts
 var clickable = "use-styles_clickable__1axilf44";
@@ -558,7 +581,7 @@ function useStyles8({
   clickable: clickable2
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react10.useMemo)(
+  const root24 = (0, import_react17.useMemo)(
     () => [
       themeClass,
       root5,
@@ -572,18 +595,21 @@ function useStyles8({
 
 // src/components/chip/index.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function Chip({ selected: selected3, tone: tone4, onDelete, onClick, children, ...rest }) {
+var Chip = (0, import_react18.forwardRef)(function Chip2({ selected: selected3, tone: tone4, onDelete, onClick, children, ...rest }, ref) {
   const clickable2 = Boolean(onClick);
   const { root: root24, deleteBtn: deleteBtn2 } = useStyles8({ selected: selected3, tone: tone4, clickable: clickable2 });
   const handleDelete = (event) => {
     event.stopPropagation();
     onDelete?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: root24, onClick, ...rest, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { ref, className: root24, onClick, ...rest, children: [
     children,
     onDelete && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: deleteBtn2, "aria-label": "Remove", onClick: handleDelete, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(XIcon, { size: 13 }) })
   ] });
-}
+});
+
+// src/components/checkbox/index.tsx
+var import_react20 = require("react");
 
 // src/components/icons/check/index.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
@@ -608,7 +634,7 @@ function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/checkbox/use-styles.ts
-var import_react11 = require("react");
+var import_react19 = require("react");
 
 // src/components/checkbox/use-styles.css.ts
 var box = "use-styles_box__9zoga91";
@@ -621,11 +647,11 @@ var root6 = "use-styles_root__9zoga90";
 // src/components/checkbox/use-styles.ts
 function useStyles9({ checked, disabled: disabled3 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react11.useMemo)(
+  const root24 = (0, import_react19.useMemo)(
     () => [themeClass, root6, disabled3 && disabled].filter(Boolean).join(" "),
     [themeClass, disabled3]
   );
-  const box2 = (0, import_react11.useMemo)(
+  const box2 = (0, import_react19.useMemo)(
     () => [box, checked && boxChecked].filter(Boolean).join(" "),
     [checked]
   );
@@ -634,13 +660,7 @@ function useStyles9({ checked, disabled: disabled3 }) {
 
 // src/components/checkbox/index.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-function Checkbox({
-  checked = false,
-  onChange,
-  label: label7,
-  disabled: disabled3 = false,
-  id
-}) {
+var Checkbox = (0, import_react20.forwardRef)(function Checkbox2({ checked = false, onChange, label: label7, disabled: disabled3 = false, id, ...rest }, ref) {
   const { root: root24, input: input6, box: box2, check: check2 } = useStyles9({ checked, disabled: disabled3 });
   const handleChange = (e) => {
     if (disabled3) return;
@@ -650,21 +670,26 @@ function Checkbox({
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "input",
       {
+        ref,
         type: "checkbox",
         className: input6,
         id,
         checked,
         disabled: disabled3,
-        onChange: handleChange
+        onChange: handleChange,
+        ...rest
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: box2, children: checked && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CheckIcon, { size: 12, className: check2 }) }),
     label7
   ] });
-}
+});
+
+// src/components/radio/index.tsx
+var import_react22 = require("react");
 
 // src/components/radio/use-styles.ts
-var import_react12 = require("react");
+var import_react21 = require("react");
 
 // src/components/radio/use-styles.css.ts
 var circle = "use-styles_circle__vy61b42";
@@ -680,7 +705,7 @@ function useStyles10({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react12.useMemo)(
+  const root24 = (0, import_react21.useMemo)(
     () => [themeClass, root7, disabled3 && disabled2, className].filter(Boolean).join(" "),
     [themeClass, disabled3, className]
   );
@@ -695,28 +720,33 @@ function useStyles10({
 
 // src/components/radio/index.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-function Radio({ checked, onChange, label: label7, name, value, disabled: disabled3 }) {
+var Radio = (0, import_react22.forwardRef)(function Radio2({ checked, onChange, label: label7, name, value, disabled: disabled3, ...rest }, ref) {
   const { root: root24, input: input6, circle: circle2, dot: dot3, label: labelClass } = useStyles10({ disabled: disabled3 });
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: root24, children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "input",
       {
+        ref,
         className: input6,
         type: "radio",
         name,
         value,
         checked,
         disabled: disabled3,
-        onChange
+        onChange,
+        ...rest
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: circle2, children: checked && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: dot3 }) }),
     label7 != null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: labelClass, children: label7 })
   ] });
-}
+});
+
+// src/components/switch/index.tsx
+var import_react24 = require("react");
 
 // src/components/switch/use-styles.ts
-var import_react13 = require("react");
+var import_react23 = require("react");
 
 // src/components/switch/use-styles.css.ts
 var input3 = "surfaces_srOnly__1qa7atn0";
@@ -730,7 +760,7 @@ var trackChecked = "use-styles_trackChecked__1r6kem72";
 // src/components/switch/use-styles.ts
 function useStyles11({ checked }) {
   const { themeClass } = useTheme();
-  return (0, import_react13.useMemo)(
+  return (0, import_react23.useMemo)(
     () => ({
       root: [themeClass, root8].filter(Boolean).join(" "),
       input: input3,
@@ -744,12 +774,13 @@ function useStyles11({ checked }) {
 
 // src/components/switch/index.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-function Switch({ checked = false, onChange, label: label7, disabled: disabled3 }) {
+var Switch = (0, import_react24.forwardRef)(function Switch2({ checked = false, onChange, label: label7, disabled: disabled3, ...rest }, ref) {
   const { root: root24, input: input6, track: track4, knob: knob2, label: labelClass } = useStyles11({ checked });
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: root24, children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "input",
       {
+        ref,
         type: "checkbox",
         role: "switch",
         "aria-checked": checked,
@@ -759,19 +790,23 @@ function Switch({ checked = false, onChange, label: label7, disabled: disabled3
         onChange: (event) => {
           if (disabled3) return;
           onChange?.(event.target.checked);
-        }
+        },
+        ...rest
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: track4, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: knob2 }) }),
     label7 != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: labelClass, children: label7 })
   ] });
-}
+});
+
+// src/components/text-field/index.tsx
+var import_react27 = require("react");
 
 // src/components/base-field/index.tsx
-var import_react15 = require("react");
+var import_react26 = require("react");
 
 // src/components/base-field/use-styles.ts
-var import_react14 = require("react");
+var import_react25 = require("react");
 
 // src/components/base-field/use-styles.css.ts
 var field = "use-styles_field__1c3cgd3";
@@ -790,7 +825,7 @@ var trailingSlot = "use-styles_trailingSlot__1c3cgdb";
 // src/components/base-field/use-styles.ts
 function useStyles12({ error, hasStartIcon, hasTrailing, className }) {
   const { themeClass } = useTheme();
-  return (0, import_react14.useMemo)(() => {
+  return (0, import_react25.useMemo)(() => {
     const root24 = [themeClass, root9].filter(Boolean).join(" ");
     const labelText2 = [labelText, error && labelTextError].filter(Boolean).join(" ");
     const input6 = [
@@ -815,21 +850,15 @@ function useStyles12({ error, hasStartIcon, hasTrailing, className }) {
 
 // src/components/base-field/index.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-function BaseField({
-  label: label7,
-  help,
-  error,
-  startIcon: StartIcon,
-  trailing: trailing2,
-  id,
-  className,
-  children
-}) {
-  const autoId = (0, import_react15.useId)();
+var BaseField = (0, import_react26.forwardRef)(function BaseField2({ label: label7, help, error, startIcon: StartIcon, trailing: trailing2, id, className, children }, ref) {
+  const autoId = (0, import_react26.useId)();
   const controlId = id ?? autoId;
-  const helpId = help != null ? `${controlId}-help` : void 0;
+  const errorMessage = error != null && error !== false && error !== true && error !== "" ? error : null;
+  const hasError = error === true || errorMessage != null;
+  const message2 = errorMessage ?? help;
+  const messageId = message2 != null ? `${controlId}-msg` : void 0;
   const classes = useStyles12({
-    error,
+    error: hasError,
     hasStartIcon: StartIcon != null,
     hasTrailing: trailing2 != null,
     className
@@ -837,8 +866,9 @@ function BaseField({
   const control = {
     id: controlId,
     className: classes.input,
-    "aria-describedby": helpId,
-    "aria-invalid": error ? true : void 0
+    ref,
+    "aria-describedby": messageId,
+    "aria-invalid": hasError ? true : void 0
   };
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: classes.root, children: [
     label7 != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { htmlFor: controlId, className: classes.labelText, children: label7 }),
@@ -847,13 +877,26 @@ function BaseField({
       children(control),
       trailing2 != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: classes.trailingSlot, children: trailing2 })
     ] }),
-    help != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { id: helpId, className: classes.helpText, children: help })
+    message2 != null && // `aria-live` solo cuando el mensaje es un error: anuncia la validación al aparecer.
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "span",
+      {
+        id: messageId,
+        className: classes.helpText,
+        "aria-live": errorMessage ? "polite" : void 0,
+        children: message2
+      }
+    )
   ] });
-}
+});
 
 // src/components/text-field/index.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-function TextField({
+var import_jsx_runtime16 = (
+  // En multiline el control es un <textarea>: no reenviamos `controlRef` porque el
+  // tipo público de la ref es HTMLInputElement (la ref aplica solo a la rama <input>).
+  require("react/jsx-runtime")
+);
+var TextField = (0, import_react27.forwardRef)(function TextField2({
   label: label7,
   help,
   error,
@@ -865,17 +908,18 @@ function TextField({
   className,
   id,
   ...rest
-}) {
+}, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     BaseField,
     {
+      ref,
       label: label7,
       help,
       error,
       startIcon,
       id,
       className,
-      children: (control) => multiline ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      children: ({ ref: controlRef, ...control }) => multiline ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "textarea",
         {
           ...rest,
@@ -888,16 +932,17 @@ function TextField({
         {
           ...rest,
           ...control,
+          ref: controlRef,
           type,
           onChange: (e) => onChange?.(e.target.value)
         }
       )
     }
   );
-}
+});
 
 // src/components/password-field/index.tsx
-var import_react17 = require("react");
+var import_react29 = require("react");
 
 // src/components/icons/eye/index.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
@@ -952,65 +997,67 @@ function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/password-field/use-styles.ts
-var import_react16 = require("react");
+var import_react28 = require("react");
 
 // src/components/password-field/use-styles.css.ts
 var revealButton = "use-styles_revealButton__rsu9d50";
 
 // src/components/password-field/use-styles.ts
 function useStyles13() {
-  return (0, import_react16.useMemo)(() => ({ revealButton }), []);
+  return (0, import_react28.useMemo)(() => ({ revealButton }), []);
 }
 
 // src/components/password-field/index.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
-function PasswordField({
-  label: label7,
-  help,
-  error,
-  startIcon,
-  onChange,
-  id,
-  className,
-  ...rest
-}) {
-  const [reveal, setReveal] = (0, import_react17.useState)(false);
-  const classes = useStyles13();
-  const handleChange = (e) => {
-    onChange?.(e.target.value);
-  };
-  const handleToggleMouseDown = (e) => {
-    e.preventDefault();
-  };
-  const toggleButton = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    "button",
-    {
-      type: "button",
-      tabIndex: -1,
-      className: classes.revealButton,
-      "aria-label": reveal ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a",
-      onMouseDown: handleToggleMouseDown,
-      onClick: () => setReveal((r) => !r),
-      children: reveal ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(EyeOffIcon, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(EyeIcon, { size: 18 })
-    }
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    BaseField,
-    {
-      label: label7,
-      help,
-      error,
-      startIcon,
-      trailing: toggleButton,
-      id,
-      className,
-      children: (control) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { ...rest, ...control, type: reveal ? "text" : "password", onChange: handleChange })
-    }
-  );
-}
+var PasswordField = (0, import_react29.forwardRef)(
+  function PasswordField2({ label: label7, help, error, startIcon, onChange, id, className, ...rest }, ref) {
+    const [reveal, setReveal] = (0, import_react29.useState)(false);
+    const classes = useStyles13();
+    const handleChange = (e) => {
+      onChange?.(e.target.value);
+    };
+    const handleToggleMouseDown = (e) => {
+      e.preventDefault();
+    };
+    const toggleButton = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        className: classes.revealButton,
+        "aria-label": reveal ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a",
+        onMouseDown: handleToggleMouseDown,
+        onClick: () => setReveal((r) => !r),
+        children: reveal ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(EyeOffIcon, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(EyeIcon, { size: 18 })
+      }
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      BaseField,
+      {
+        ref,
+        label: label7,
+        help,
+        error,
+        startIcon,
+        trailing: toggleButton,
+        id,
+        className,
+        children: (control) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "input",
+          {
+            ...rest,
+            ...control,
+            type: reveal ? "text" : "password",
+            onChange: handleChange
+          }
+        )
+      }
+    );
+  }
+);
 
 // src/components/money-field/index.tsx
-var import_react18 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function parseAmount(raw) {
   const cleaned = raw.replace(/[^0-9.-]/g, "");
@@ -1018,7 +1065,7 @@ function parseAmount(raw) {
   const n = Number.parseFloat(cleaned);
   return Number.isNaN(n) ? null : n;
 }
-function MoneyField({
+var MoneyField = (0, import_react30.forwardRef)(function MoneyField2({
   value,
   onChange,
   currency = "USD",
@@ -1032,10 +1079,10 @@ function MoneyField({
   onFocus,
   onBlur,
   ...rest
-}) {
-  const [focused, setFocused] = (0, import_react18.useState)(false);
-  const [draft, setDraft] = (0, import_react18.useState)("");
-  const formatter = (0, import_react18.useMemo)(
+}, ref) {
+  const [focused, setFocused] = (0, import_react30.useState)(false);
+  const [draft, setDraft] = (0, import_react30.useState)("");
+  const formatter = (0, import_react30.useMemo)(
     () => new Intl.NumberFormat(locale, { style: "currency", currency }),
     [locale, currency]
   );
@@ -1054,6 +1101,7 @@ function MoneyField({
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     BaseField,
     {
+      ref,
       label: label7,
       help,
       error,
@@ -1074,10 +1122,13 @@ function MoneyField({
       )
     }
   );
-}
+});
+
+// src/components/icon-button/index.tsx
+var import_react32 = require("react");
 
 // src/components/icon-button/use-styles.ts
-var import_react19 = require("react");
+var import_react31 = require("react");
 
 // src/components/icon-button/use-styles.css.ts
 var accent = "use-styles_accent__18np0q02";
@@ -1090,7 +1141,7 @@ function useStyles14({
   tone: tone4 = "ink"
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react19.useMemo)(
+  const root24 = (0, import_react31.useMemo)(
     () => [themeClass, root10, tone4 === "accent" && accent, active2 && active].filter(Boolean).join(" "),
     [themeClass, active2, tone4]
   );
@@ -1099,13 +1150,23 @@ function useStyles14({
 
 // src/components/icon-button/index.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
-function IconButton({ icon: Icon, active: active2, tone: tone4, title, ...rest }) {
+var IconButton = (0, import_react32.forwardRef)(function IconButton2({ icon: Icon, active: active2, tone: tone4, title, type = "button", ...rest }, ref) {
+  if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+    const restProps = rest;
+    const hasName = title.trim() !== "" || restProps["aria-label"] != null || restProps["aria-labelledby"] != null;
+    if (!hasName) {
+      console.warn("IconButton: falta un nombre accesible (`title` o `aria-label`).");
+    }
+  }
   const { root: root24 } = useStyles14({ active: active2, tone: tone4 });
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { className: root24, "aria-label": title, title, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { size: 18 }) });
-}
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { ref, type, className: root24, "aria-label": title, title, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { size: 18 }) });
+});
+
+// src/components/card/index.tsx
+var import_react34 = require("react");
 
 // src/components/card/use-styles.ts
-var import_react20 = require("react");
+var import_react33 = require("react");
 
 // src/components/card/use-styles.css.ts
 var body = "use-styles_body__1fuvd022";
@@ -1116,16 +1177,16 @@ var root11 = "use-styles_root__1fuvd020";
 // src/components/card/use-styles.ts
 function useStyles15() {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react20.useMemo)(() => `${themeClass} ${root11}`, [themeClass]);
+  const root24 = (0, import_react33.useMemo)(() => `${themeClass} ${root11}`, [themeClass]);
   return { root: root24, header, body, footer };
 }
 
 // src/components/card/index.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
-function CardRoot({ children, ...rest }) {
+var CardRoot = (0, import_react34.forwardRef)(function Card({ children, ...rest }, ref) {
   const { root: root24 } = useStyles15();
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: root24, ...rest, children });
-}
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ref, className: root24, ...rest, children });
+});
 function CardHeader({ children, ...rest }) {
   const { header: header3 } = useStyles15();
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: header3, ...rest, children });
@@ -1142,12 +1203,15 @@ CardRoot.displayName = "Card";
 CardHeader.displayName = "Card.Header";
 CardBody.displayName = "Card.Body";
 CardFooter.displayName = "Card.Footer";
-var Card = Object.assign(CardRoot, {
+var Card2 = Object.assign(CardRoot, {
   Header: CardHeader,
   Body: CardBody,
   Footer: CardFooter
 });
 
+// src/components/alert/index.tsx
+var import_react36 = require("react");
+
 // src/components/icons/circle-check/index.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function CircleCheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
@@ -1252,7 +1316,7 @@ function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/alert/use-styles.ts
-var import_react21 = require("react");
+var import_react35 = require("react");
 
 // src/components/alert/use-styles.css.ts
 var content = "use-styles_content__ivsh6u6";
@@ -1266,7 +1330,7 @@ function useStyles16({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react21.useMemo)(
+  const root24 = (0, import_react35.useMemo)(
     () => [themeClass, root12, severity[severity2], className].filter(Boolean).join(" "),
     [themeClass, severity2, className]
   );
@@ -1285,30 +1349,23 @@ var defaultIcons = {
   warn: TriangleAlertIcon,
   danger: CircleXIcon
 };
-function Alert({
-  severity: severity2 = "info",
-  title,
-  icon,
-  className,
-  children,
-  ...rest
-}) {
+var Alert = (0, import_react36.forwardRef)(function Alert2({ severity: severity2 = "info", title, icon, className, children, ...rest }, ref) {
   const styles = useStyles16({ severity: severity2, className });
   const IconComponent = icon ?? defaultIcons[severity2];
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { role: "alert", className: styles.root, ...rest, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ref, role: "alert", className: styles.root, ...rest, children: [
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: styles.iconSlot, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconComponent, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: styles.content, children: [
       title != null && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Typography, { variant: "h4", children: title }),
       children != null && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Typography, { variant: "body", color: "fg2", children })
     ] })
   ] });
-}
+});
 
 // src/components/tooltip/index.tsx
-var import_react23 = require("react");
+var import_react38 = require("react");
 
 // src/components/tooltip/use-styles.ts
-var import_react22 = require("react");
+var import_react37 = require("react");
 
 // src/components/tooltip/use-styles.css.ts
 var bubble = "use-styles_bubble__h9kvh1 surfaces_inkySurface__1qa7atn2";
@@ -1320,11 +1377,11 @@ function useStyles17({
   placement: placement2 = "top"
 }) {
   const { themeClass } = useTheme();
-  const wrapper4 = (0, import_react22.useMemo)(
+  const wrapper4 = (0, import_react37.useMemo)(
     () => [themeClass, wrapper].filter(Boolean).join(" "),
     [themeClass]
   );
-  const bubble2 = (0, import_react22.useMemo)(
+  const bubble2 = (0, import_react37.useMemo)(
     () => [bubble, placement[placement2]].filter(Boolean).join(" "),
     [placement2]
   );
@@ -1333,23 +1390,74 @@ function useStyles17({
 
 // src/components/tooltip/index.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
-function Tooltip({ label: label7, children, placement: placement2 }) {
-  const [open, setOpen] = (0, import_react23.useState)(false);
-  const tooltipId = (0, import_react23.useId)();
+var HIDE_DELAY = 120;
+var Tooltip = (0, import_react38.forwardRef)(function Tooltip2({ label: label7, children, placement: placement2 }, ref) {
+  const [open, setOpen] = (0, import_react38.useState)(false);
+  const tooltipId = (0, import_react38.useId)();
   const { wrapper: wrapper4, bubble: bubble2 } = useStyles17({ placement: placement2 });
-  const show = () => setOpen(true);
-  const hide = () => setOpen(false);
+  const hideTimer = (0, import_react38.useRef)(null);
+  const clearHide = () => {
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+      hideTimer.current = null;
+    }
+  };
+  const show = () => {
+    clearHide();
+    setOpen(true);
+  };
+  const scheduleHide = () => {
+    clearHide();
+    hideTimer.current = setTimeout(() => setOpen(false), HIDE_DELAY);
+  };
+  const hideNow = () => {
+    clearHide();
+    setOpen(false);
+  };
+  (0, import_react38.useEffect)(() => {
+    return () => {
+      if (hideTimer.current) clearTimeout(hideTimer.current);
+    };
+  }, []);
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape" && open) {
+      event.stopPropagation();
+      hideNow();
+    }
+  };
   const previousDescribedBy = children.props["aria-describedby"];
   const describedBy = open ? [previousDescribedBy, tooltipId].filter(Boolean).join(" ") : previousDescribedBy;
-  const trigger2 = (0, import_react23.cloneElement)(children, { "aria-describedby": describedBy });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: wrapper4, onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, children: [
-    trigger2,
-    open && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { id: tooltipId, role: "tooltip", className: bubble2, children: label7 })
-  ] });
-}
+  const trigger2 = (0, import_react38.cloneElement)(children, { "aria-describedby": describedBy });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    "span",
+    {
+      ref,
+      className: wrapper4,
+      onMouseEnter: show,
+      onMouseLeave: scheduleHide,
+      onFocus: show,
+      onBlur: hideNow,
+      onKeyDown: handleKeyDown,
+      children: [
+        trigger2,
+        open && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "span",
+          {
+            id: tooltipId,
+            role: "tooltip",
+            className: bubble2,
+            onMouseEnter: show,
+            onMouseLeave: scheduleHide,
+            children: label7
+          }
+        )
+      ]
+    }
+  );
+});
 
 // src/components/select/index.tsx
-var import_react25 = require("react");
+var import_react40 = require("react");
 
 // src/components/icons/chevron-down/index.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
@@ -1374,7 +1482,7 @@ function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/select/use-styles.ts
-var import_react24 = require("react");
+var import_react39 = require("react");
 
 // src/components/select/use-styles.css.ts
 var chevron = "use-styles_chevron__1w1czpb4";
@@ -1393,7 +1501,7 @@ function useStyles18({
   open = false
 }) {
   const { themeClass } = useTheme();
-  return (0, import_react24.useMemo)(() => {
+  return (0, import_react39.useMemo)(() => {
     const chevron3 = [chevron, open && chevronOpen].filter(Boolean).join(" ");
     return {
       root: [themeClass, root13].filter(Boolean).join(" "),
@@ -1409,11 +1517,16 @@ function useStyles18({
 
 // src/components/select/index.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
-function Select({ options, value, onChange, placeholder: placeholder2, label: label7, disabled: disabled3 }) {
-  const [open, setOpen] = (0, import_react25.useState)(false);
-  const [activeIndex, setActiveIndex] = (0, import_react25.useState)(0);
-  const rootRef = (0, import_react25.useRef)(null);
-  const baseId = (0, import_react25.useId)();
+var Select = (0, import_react40.forwardRef)(function Select2({ options, value, onChange, placeholder: placeholder2, label: label7, disabled: disabled3, ...rest }, ref) {
+  const [open, setOpen] = (0, import_react40.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react40.useState)(0);
+  const rootRef = (0, import_react40.useRef)(null);
+  const setRootRef = (node) => {
+    rootRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  const baseId = (0, import_react40.useId)();
   const labelId = `${baseId}-label`;
   const optionId = (index) => `${baseId}-option-${index}`;
   const {
@@ -1425,7 +1538,7 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
     menu: menu2,
     optionClass
   } = useStyles18({ open });
-  (0, import_react25.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!open) return;
     const onPointerDown = (event) => {
       if (rootRef.current && !rootRef.current.contains(event.target)) {
@@ -1485,7 +1598,7 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
         break;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ref: rootRef, className: root24, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ref: setRootRef, className: root24, ...rest, children: [
     label7 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { id: labelId, className: labelClass, children: label7 }),
     /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
       "button",
@@ -1533,10 +1646,13 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
       );
     }) })
   ] });
-}
+});
+
+// src/components/slider/index.tsx
+var import_react42 = require("react");
 
 // src/components/slider/use-styles.ts
-var import_react26 = require("react");
+var import_react41 = require("react");
 
 // src/components/slider/use-styles.css.ts
 var input5 = "use-styles_input__okw59n3";
@@ -1550,7 +1666,7 @@ var wrapper2 = "use-styles_wrapper__okw59n6";
 // src/components/slider/use-styles.ts
 function useStyles19() {
   const { themeClass } = useTheme();
-  return (0, import_react26.useMemo)(() => {
+  return (0, import_react41.useMemo)(() => {
     const root24 = [themeClass, root14].filter(Boolean).join(" ");
     return {
       wrapper: wrapper2,
@@ -1566,15 +1682,7 @@ function useStyles19() {
 
 // src/components/slider/index.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
-function Slider({
-  value = 0,
-  onChange,
-  min = 0,
-  max = 100,
-  step: step2 = 1,
-  disabled: disabled3,
-  label: label7
-}) {
+var Slider = (0, import_react42.forwardRef)(function Slider2({ value = 0, onChange, min = 0, max = 100, step: step2 = 1, disabled: disabled3, label: label7, ...rest }, ref) {
   const { wrapper: wrapper4, label: labelClass, root: root24, track: track4, range: range2, thumb: thumb2, input: input6 } = useStyles19();
   const span = max - min;
   const percent = span > 0 ? (value - min) / span * 100 : 0;
@@ -1590,6 +1698,7 @@ function Slider({
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "input",
         {
+          ref,
           className: input6,
           type: "range",
           min,
@@ -1597,19 +1706,20 @@ function Slider({
           step: step2,
           value,
           disabled: disabled3,
-          onChange: handleChange
+          onChange: handleChange,
+          ...rest
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: thumb2, style: { left: `${clamped}%` } })
     ] })
   ] });
-}
+});
 
 // src/components/accordion/index.tsx
-var import_react28 = require("react");
+var import_react44 = require("react");
 
 // src/components/accordion/use-styles.ts
-var import_react27 = require("react");
+var import_react43 = require("react");
 
 // src/components/accordion/use-styles.css.ts
 var chevron2 = "use-styles_chevron__1cjrdh93";
@@ -1622,7 +1732,7 @@ var root15 = "use-styles_root__1cjrdh90";
 // src/components/accordion/use-styles.ts
 function useStyles20({ className }) {
   const { themeClass } = useTheme();
-  return (0, import_react27.useMemo)(
+  return (0, import_react43.useMemo)(
     () => ({
       root: [themeClass, root15, className].filter(Boolean).join(" "),
       item,
@@ -1636,14 +1746,9 @@ function useStyles20({ className }) {
 
 // src/components/accordion/index.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
-function Accordion({
-  items,
-  multiple = false,
-  defaultOpen = [],
-  className
-}) {
-  const [open, setOpen] = (0, import_react28.useState)(defaultOpen);
-  const { root: root24, item: item3, header: header3, chevronFor, panel: panel2 } = useStyles20({ className });
+var Accordion = (0, import_react44.forwardRef)(function Accordion2({ items, multiple = false, defaultOpen = [], className }, ref) {
+  const [open, setOpen] = (0, import_react44.useState)(defaultOpen);
+  const { root: root24, item: item3, header: header3, chevronFor, panel: panel3 } = useStyles20({ className });
   const toggle = (id) => {
     setOpen((current2) => {
       const isOpen = current2.includes(id);
@@ -1651,7 +1756,7 @@ function Accordion({
       return multiple ? [...current2, id] : [id];
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: root24, children: items.map((it) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref, className: root24, children: items.map((it) => {
     const isOpen = open.includes(it.id);
     const panelId = `accordion-panel-${it.id}`;
     const headerId = `accordion-header-${it.id}`;
@@ -1671,13 +1776,13 @@ function Accordion({
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { id: panelId, className: panel2, role: "region", "aria-labelledby": headerId, children: it.content })
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { id: panelId, className: panel3, role: "region", "aria-labelledby": headerId, children: it.content })
     ] }, it.id);
   }) });
-}
+});
 
 // src/components/breadcrumbs/index.tsx
-var import_react30 = require("react");
+var import_react46 = require("react");
 
 // src/components/icons/chevron-right/index.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
@@ -1702,7 +1807,7 @@ function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/breadcrumbs/use-styles.ts
-var import_react29 = require("react");
+var import_react45 = require("react");
 
 // src/components/breadcrumbs/use-styles.css.ts
 var crumb = "use-styles_crumb__7u0du61";
@@ -1713,7 +1818,7 @@ var separator = "use-styles_separator__7u0du63";
 // src/components/breadcrumbs/use-styles.ts
 function useStyles21({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react29.useMemo)(
+  const root24 = (0, import_react45.useMemo)(
     () => [themeClass, root16, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -1722,17 +1827,20 @@ function useStyles21({ className }) {
 
 // src/components/breadcrumbs/index.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
-function Breadcrumbs({ items, className, ...rest }) {
+var Breadcrumbs = (0, import_react46.forwardRef)(function Breadcrumbs2({ items, className, ...rest }, ref) {
   const { root: root24, crumb: crumb2, current: current2, separator: separator2 } = useStyles21({ className });
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("nav", { "aria-label": "Breadcrumb", className: root24, ...rest, children: items.map((item3, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("nav", { ref, "aria-label": "Breadcrumb", className: root24, ...rest, children: items.map((item3, index) => {
     const isLast = index === items.length - 1;
     const key = index;
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react30.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react46.Fragment, { children: [
       isLast ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: current2, "aria-current": "page", children: item3.label }) : item3.href ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("a", { className: crumb2, href: item3.href, children: item3.label }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: crumb2, children: item3.label }),
       !isLast && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: separator2, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronRightIcon, { size: 14 }) })
     ] }, key);
   }) });
-}
+});
+
+// src/components/pagination/index.tsx
+var import_react48 = require("react");
 
 // src/components/icons/chevron-left/index.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
@@ -1757,7 +1865,7 @@ function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/pagination/use-styles.ts
-var import_react31 = require("react");
+var import_react47 = require("react");
 
 // src/components/pagination/use-styles.css.ts
 var ellipsis = "use-styles_ellipsis__1azgzoh3";
@@ -1769,7 +1877,7 @@ var root17 = "use-styles_root__1azgzoh0";
 // src/components/pagination/use-styles.ts
 function useStyles22() {
   const { themeClass } = useTheme();
-  return (0, import_react31.useMemo)(
+  return (0, import_react47.useMemo)(
     () => ({
       root: [themeClass, root17].filter(Boolean).join(" "),
       pageBtnFor: (active2) => [pageBtn, active2 && pageActive].filter(Boolean).join(" "),
@@ -1795,13 +1903,13 @@ function buildItems(count, page, siblingCount) {
   if (last > first) items.push(last);
   return items;
 }
-function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
+var Pagination = (0, import_react48.forwardRef)(function Pagination2({ count, page = 1, onChange, siblingCount = 1, ...rest }, ref) {
   const { root: root24, pageBtnFor, ellipsis: ellipsis2, nav: nav2 } = useStyles22();
   const total = Math.max(1, count);
   const current2 = Math.min(Math.max(1, page), total);
   const items = buildItems(total, current2, siblingCount);
   const go = (n) => onChange?.(Math.min(Math.max(1, n), total));
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("nav", { className: root24, "aria-label": "Pagination", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("nav", { ref, className: root24, "aria-label": "Pagination", ...rest, children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "button",
       {
@@ -1841,13 +1949,13 @@ function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
       }
     )
   ] });
-}
+});
 
 // src/components/stepper/index.tsx
-var import_react33 = require("react");
+var import_react50 = require("react");
 
 // src/components/stepper/use-styles.ts
-var import_react32 = require("react");
+var import_react49 = require("react");
 
 // src/components/stepper/use-styles.css.ts
 var connector = "use-styles_connector__79pt4e7";
@@ -1862,7 +1970,7 @@ var step = "use-styles_step__79pt4e1";
 // src/components/stepper/use-styles.ts
 function useStyles23({ className }) {
   const { themeClass } = useTheme();
-  return (0, import_react32.useMemo)(() => {
+  return (0, import_react49.useMemo)(() => {
     const root24 = [themeClass, root18, className].filter(Boolean).join(" ");
     const markerFor = (state) => [
       marker,
@@ -1876,14 +1984,14 @@ function useStyles23({ className }) {
 
 // src/components/stepper/index.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
-function Stepper({ steps, active: active2 = 0, className, ...rest }) {
+var Stepper = (0, import_react50.forwardRef)(function Stepper2({ steps, active: active2 = 0, className, ...rest }, ref) {
   const { root: root24, step: step2, connector: connector2, markerFor, labelFor } = useStyles23({ className });
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: root24, ...rest, children: steps.map((s, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { ref, className: root24, ...rest, children: steps.map((s, index) => {
     const state = index < active2 ? "done" : index === active2 ? "active" : "upcoming";
     const isActive = state === "active";
     return (
       // biome-ignore lint/suspicious/noArrayIndexKey: steps are a static, ordered list with no stable id.
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react33.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react50.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: step2, "aria-current": isActive ? "step" : void 0, children: [
           /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: markerFor(state), children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CheckIcon, { size: 14 }) : index + 1 }),
           /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: labelFor(isActive), children: s.label })
@@ -1892,12 +2000,16 @@ function Stepper({ steps, active: active2 = 0, className, ...rest }) {
       ] }, index)
     );
   }) });
-}
+});
+
+// src/components/tabs/index.tsx
+var import_react52 = require("react");
 
 // src/components/tabs/use-styles.ts
-var import_react34 = require("react");
+var import_react51 = require("react");
 
 // src/components/tabs/use-styles.css.ts
+var panel2 = "use-styles_panel__1l4m7t43";
 var root19 = "use-styles_root__1l4m7t40";
 var tab = "use-styles_tab__1l4m7t41";
 var tabActive = "use-styles_tabActive__1l4m7t42";
@@ -1905,39 +2017,95 @@ var tabActive = "use-styles_tabActive__1l4m7t42";
 // src/components/tabs/use-styles.ts
 function useStyles24() {
   const { themeClass } = useTheme();
-  return (0, import_react34.useMemo)(() => {
+  return (0, import_react51.useMemo)(() => {
     const root24 = [themeClass, root19].filter(Boolean).join(" ");
     const tabClass = (active2) => [tab, active2 && tabActive].filter(Boolean).join(" ");
-    return { root: root24, tab, tabClass };
+    return { root: root24, tab, tabClass, panel: panel2 };
   }, [themeClass]);
 }
 
 // src/components/tabs/index.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
-function Tabs({ items, value, onChange }) {
-  const { root: root24, tabClass } = useStyles24();
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { role: "tablist", className: root24, children: items.map((item3) => {
-    const active2 = item3.value === value;
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-      "button",
+var Tabs = (0, import_react52.forwardRef)(function Tabs2({ items, value, onChange, ...rest }, ref) {
+  const { root: root24, tabClass, panel: panel3 } = useStyles24();
+  const baseId = (0, import_react52.useId)();
+  const tabRefs = (0, import_react52.useRef)([]);
+  const hasPanels = items.some((item3) => item3.content !== void 0);
+  const activeIndex = items.findIndex((item3) => item3.value === value);
+  const tabId = (v) => `${baseId}-tab-${v}`;
+  const panelId = (v) => `${baseId}-panel-${v}`;
+  const selectTab = (index) => {
+    const item3 = items[index];
+    if (!item3) return;
+    onChange?.(item3.value);
+    tabRefs.current[index]?.focus();
+  };
+  const onKeyDown = (event, index) => {
+    const last = items.length - 1;
+    switch (event.key) {
+      case "ArrowRight":
+        event.preventDefault();
+        selectTab(index === last ? 0 : index + 1);
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        selectTab(index === 0 ? last : index - 1);
+        break;
+      case "Home":
+        event.preventDefault();
+        selectTab(0);
+        break;
+      case "End":
+        event.preventDefault();
+        selectTab(last);
+        break;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { ref, role: "tablist", className: root24, ...rest, children: items.map((item3, index) => {
+      const active2 = item3.value === value;
+      const tabbable = active2 || activeIndex === -1 && index === 0;
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        "button",
+        {
+          ref: (el) => {
+            tabRefs.current[index] = el;
+          },
+          type: "button",
+          role: "tab",
+          id: tabId(item3.value),
+          "aria-selected": active2,
+          "aria-controls": hasPanels ? panelId(item3.value) : void 0,
+          tabIndex: tabbable ? 0 : -1,
+          className: tabClass(active2),
+          onClick: () => onChange?.(item3.value),
+          onKeyDown: (event) => onKeyDown(event, index),
+          children: item3.label
+        },
+        item3.value
+      );
+    }) }),
+    hasPanels && items.map((item3) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      "div",
       {
-        type: "button",
-        role: "tab",
-        "aria-selected": active2,
-        className: tabClass(active2),
-        onClick: () => onChange?.(item3.value),
-        children: item3.label
+        role: "tabpanel",
+        id: panelId(item3.value),
+        "aria-labelledby": tabId(item3.value),
+        hidden: item3.value !== value,
+        tabIndex: 0,
+        className: panel3,
+        children: item3.content
       },
       item3.value
-    );
-  }) });
-}
+    ))
+  ] });
+});
 
 // src/components/menu/index.tsx
-var import_react36 = require("react");
+var import_react54 = require("react");
 
 // src/components/menu/use-styles.ts
-var import_react35 = require("react");
+var import_react53 = require("react");
 
 // src/components/menu/use-styles.css.ts
 var danger = "use-styles_danger__1uyxaj3";
@@ -1948,7 +2116,7 @@ var wrapper3 = "use-styles_wrapper__1uyxaj0";
 // src/components/menu/use-styles.ts
 function useStyles25() {
   const { themeClass } = useTheme();
-  return (0, import_react35.useMemo)(
+  return (0, import_react53.useMemo)(
     () => ({
       wrapper: [themeClass, wrapper3].filter(Boolean).join(" "),
       list,
@@ -1965,13 +2133,17 @@ function assignRef(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-function Menu({ trigger: trigger2, items }) {
+var Menu = (0, import_react54.forwardRef)(function Menu2({ trigger: trigger2, items }, ref) {
   const { wrapper: wrapper4, list: list2, item: item3, dangerItem } = useStyles25();
-  const [open, setOpen] = (0, import_react36.useState)(false);
-  const [alignEnd, setAlignEnd] = (0, import_react36.useState)(false);
-  const rootRef = (0, import_react36.useRef)(null);
-  const listRef = (0, import_react36.useRef)(null);
-  const triggerRef = (0, import_react36.useRef)(null);
+  const [open, setOpen] = (0, import_react54.useState)(false);
+  const [alignEnd, setAlignEnd] = (0, import_react54.useState)(false);
+  const rootRef = (0, import_react54.useRef)(null);
+  const setRootRef = (node) => {
+    rootRef.current = node;
+    assignRef(ref, node);
+  };
+  const listRef = (0, import_react54.useRef)(null);
+  const triggerRef = (0, import_react54.useRef)(null);
   const getMenuItems = () => Array.from(listRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
   const focusItemAt = (index) => {
     const menuItems = getMenuItems();
@@ -1983,7 +2155,7 @@ function Menu({ trigger: trigger2, items }) {
     setOpen(false);
     triggerRef.current?.focus();
   };
-  (0, import_react36.useLayoutEffect)(() => {
+  (0, import_react54.useLayoutEffect)(() => {
     if (!open) {
       setAlignEnd(false);
       return;
@@ -1995,7 +2167,7 @@ function Menu({ trigger: trigger2, items }) {
     const viewport = document.documentElement.clientWidth;
     setAlignEnd(rootLeft + listEl.offsetWidth > viewport);
   }, [open]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (!open) return;
     listRef.current?.querySelector('[role="menuitem"]')?.focus();
     const onDocMouseDown = (event) => {
@@ -2051,7 +2223,7 @@ function Menu({ trigger: trigger2, items }) {
     triggerRef.current = node;
     assignRef(consumerRef, node);
   };
-  const clonedTrigger = (0, import_react36.cloneElement)(trigger2, {
+  const clonedTrigger = (0, import_react54.cloneElement)(trigger2, {
     ref: mergedTriggerRef,
     "aria-haspopup": "menu",
     "aria-expanded": open,
@@ -2060,7 +2232,7 @@ function Menu({ trigger: trigger2, items }) {
       setOpen((prev) => !prev);
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ref: rootRef, className: wrapper4, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ref: setRootRef, className: wrapper4, children: [
     clonedTrigger,
     open && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "div",
@@ -2088,14 +2260,14 @@ function Menu({ trigger: trigger2, items }) {
       }
     )
   ] });
-}
+});
 
 // src/components/dialog/index.tsx
-var import_react38 = require("react");
+var import_react56 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/dialog/use-styles.ts
-var import_react37 = require("react");
+var import_react55 = require("react");
 
 // src/components/dialog/use-styles.css.ts
 var actions = "use-styles_actions__5tstu83";
@@ -2106,7 +2278,7 @@ var surface = "use-styles_surface__5tstu81";
 // src/components/dialog/use-styles.ts
 function useStyles26() {
   const { themeClass } = useTheme();
-  return (0, import_react37.useMemo)(
+  return (0, import_react55.useMemo)(
     () => ({
       overlay: [themeClass, overlay].filter(Boolean).join(" "),
       surface,
@@ -2120,13 +2292,21 @@ function useStyles26() {
 // src/components/dialog/index.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
-function Dialog({ open, onClose, title, actions: actions3, children }) {
+function assignRef2(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
+var Dialog = (0, import_react56.forwardRef)(function Dialog2({ open, onClose, title, actions: actions3, children }, ref) {
   const { overlay: overlay2, surface: surface2, body: body3, actions: actionsClass } = useStyles26();
-  const surfaceRef = (0, import_react38.useRef)(null);
-  const previouslyFocused = (0, import_react38.useRef)(null);
-  const generatedId = (0, import_react38.useId)();
+  const surfaceRef = (0, import_react56.useRef)(null);
+  const setSurfaceRef = (node) => {
+    surfaceRef.current = node;
+    assignRef2(ref, node);
+  };
+  const previouslyFocused = (0, import_react56.useRef)(null);
+  const generatedId = (0, import_react56.useId)();
   const titleId = title != null ? generatedId : void 0;
-  (0, import_react38.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose();
@@ -2134,13 +2314,13 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (!open) return;
     previouslyFocused.current = document.activeElement;
     surfaceRef.current?.focus();
     return () => previouslyFocused.current?.focus?.();
   }, [open]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (!open) return;
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -2181,7 +2361,7 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: overlay2, "data-testid": "dialog-overlay", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "div",
       {
-        ref: surfaceRef,
+        ref: setSurfaceRef,
         className: surface2,
         role: "dialog",
         "aria-modal": "true",
@@ -2198,13 +2378,14 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
     ) }),
     document.body
   );
-}
+});
 
 // src/components/snackbar/index.tsx
+var import_react58 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/components/snackbar/use-styles.ts
-var import_react39 = require("react");
+var import_react57 = require("react");
 
 // src/components/snackbar/use-styles.css.ts
 var closeBtn = "use-styles_closeBtn__ihzsep2";
@@ -2214,7 +2395,7 @@ var root20 = "use-styles_root__ihzsep0 surfaces_inkySurface__1qa7atn2";
 // src/components/snackbar/use-styles.ts
 function useStyles27() {
   const { themeClass } = useTheme();
-  return (0, import_react39.useMemo)(
+  return (0, import_react57.useMemo)(
     () => ({
       root: [themeClass, root20].filter(Boolean).join(" "),
       message,
@@ -2226,24 +2407,28 @@ function useStyles27() {
 
 // src/components/snackbar/index.tsx
 var import_jsx_runtime41 = require("react/jsx-runtime");
-function Snackbar({ open, message: message2, action, onClose }) {
+var Snackbar = (0, import_react58.forwardRef)(function Snackbar2({ open, message: message2, action, onClose }, ref) {
   const { root: root24, message: messageClass, closeBtn: closeBtn2 } = useStyles27();
   if (!open || typeof document === "undefined") return null;
   return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { role: "status", className: root24, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref, role: "status", className: root24, children: [
       /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: messageClass, children: message2 }),
       action,
       onClose && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { type: "button", "aria-label": "Close", className: closeBtn2, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(XIcon, { size: 18 }) })
     ] }),
     document.body
   );
-}
+});
+
+// src/components/table/index.tsx
+var import_react60 = require("react");
 
 // src/components/table/use-styles.ts
-var import_react40 = require("react");
+var import_react59 = require("react");
 
 // src/components/table/use-styles.css.ts
 var alignRight = "use-styles_alignRight__1n2cz6i3";
+var caption = "use-styles_caption__1n2cz6i4";
 var root21 = "use-styles_root__1n2cz6i0";
 var td = "use-styles_td__1n2cz6i2";
 var th = "use-styles_th__1n2cz6i1";
@@ -2251,33 +2436,40 @@ var th = "use-styles_th__1n2cz6i1";
 // src/components/table/use-styles.ts
 function useStyles28({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react40.useMemo)(
+  const root24 = (0, import_react59.useMemo)(
     () => [themeClass, root21, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
-  return { root: root24, th, td, alignRight };
+  return {
+    root: root24,
+    th,
+    td,
+    alignRight,
+    caption
+  };
 }
 
 // src/components/table/index.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
-function Table({
-  columns,
-  rows,
-  getRowKey,
-  className,
-  ...rest
-}) {
-  const { root: root24, th: th2, td: td2, alignRight: alignRight2 } = useStyles28({ className });
+function TableInner({ columns, rows, getRowKey, className, caption: caption2, ...rest }, ref) {
+  const { root: root24, th: th2, td: td2, alignRight: alignRight2, caption: captionClass } = useStyles28({ className });
   const headClass = (column) => column.align === "right" ? `${th2} ${alignRight2}` : th2;
   const cellClass = (column) => column.align === "right" ? `${td2} ${alignRight2}` : td2;
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("table", { className: root24, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("th", { className: headClass(column), children: column.header }, column.key)) }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("table", { ref, className: root24, ...rest, children: [
+    caption2 != null && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("caption", { className: captionClass, children: caption2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("th", { scope: "col", className: headClass(column), children: column.header }, column.key)) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("tbody", { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("td", { className: cellClass(column), children: column.render ? column.render(row) : String(row[column.key]) }, column.key)) }, getRowKey ? getRowKey(row, index) : index)) })
   ] });
 }
+var TableForwarded = (0, import_react60.forwardRef)(TableInner);
+TableForwarded.displayName = "Table";
+var Table = TableForwarded;
+
+// src/components/app-bar/index.tsx
+var import_react62 = require("react");
 
 // src/components/app-bar/use-styles.ts
-var import_react41 = require("react");
+var import_react61 = require("react");
 
 // src/components/app-bar/use-styles.css.ts
 var actions2 = "use-styles_actions__1h133nh2";
@@ -2287,7 +2479,7 @@ var root22 = "use-styles_root__1h133nh0";
 // src/components/app-bar/use-styles.ts
 function useStyles29({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react41.useMemo)(
+  const root24 = (0, import_react61.useMemo)(
     () => [themeClass, root22, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -2296,17 +2488,20 @@ function useStyles29({ className }) {
 
 // src/components/app-bar/index.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
-function AppBar({ brand: brand2, actions: actions3, className, children, ...rest }) {
+var AppBar = (0, import_react62.forwardRef)(function AppBar2({ brand: brand2, actions: actions3, className, children, ...rest }, ref) {
   const styles = useStyles29({ className });
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("header", { className: styles.root, ...rest, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("header", { ref, className: styles.root, ...rest, children: [
     brand2 !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: styles.brand, children: brand2 }) : null,
     children,
     actions3 !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: styles.actions, children: actions3 }) : null
   ] });
-}
+});
+
+// src/components/list-item/index.tsx
+var import_react64 = require("react");
 
 // src/components/list-item/use-styles.ts
-var import_react42 = require("react");
+var import_react63 = require("react");
 
 // src/components/list-item/use-styles.css.ts
 var content2 = "use-styles_content__kbreq13";
@@ -2321,7 +2516,7 @@ function useStyles30({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react42.useMemo)(
+  const root24 = (0, import_react63.useMemo)(
     () => [themeClass, root23, selected3 && selected2, className].filter(Boolean).join(" "),
     [themeClass, selected3, className]
   );
@@ -2330,21 +2525,14 @@ function useStyles30({
 
 // src/components/list-item/index.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
-function ListItem({
-  leading: leading2,
-  trailing: trailing2,
-  selected: selected3,
-  className,
-  children,
-  ...rest
-}) {
+var ListItem = (0, import_react64.forwardRef)(function ListItem2({ leading: leading2, trailing: trailing2, selected: selected3, className, children, ...rest }, ref) {
   const styles = useStyles30({ selected: selected3, className });
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: styles.root, ...rest, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { ref, className: styles.root, ...rest, children: [
     leading2 != null && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: styles.leading, children: leading2 }),
     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: styles.content, children }),
     trailing2 != null && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: styles.trailing, children: trailing2 })
   ] });
-}
+});
 
 // src/components/icons/chevron-up/index.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");