@octavius2929-personal/design-system 0.11.0 → 0.13.0

package/dist/index.js

@@ -1,8 +1,8 @@
 // src/theme/theme.css.ts
-var colorVars = { bg1: "var(--bg1__e3grur28)", bg2: "var(--bg2__e3grur29)", bg3: "var(--bg3__e3grur2a)", bgInset: "var(--bgInset__e3grur2b)", fg1: "var(--fg1__e3grur2c)", fg2: "var(--fg2__e3grur2d)", fg3: "var(--fg3__e3grur2e)", fgOnAccent: "var(--fgOnAccent__e3grur2f)", border1: "var(--border1__e3grur2g)", border2: "var(--border2__e3grur2h)", borderStrong: "var(--borderStrong__e3grur2i)", accent: "var(--accent__e3grur2j)", accentHover: "var(--accentHover__e3grur2k)", accentSoft: "var(--accentSoft__e3grur2l)", ok: "var(--ok__e3grur2m)", warn: "var(--warn__e3grur2n)", danger: "var(--danger__e3grur2o)", info: "var(--info__e3grur2p)", focus: "var(--focus__e3grur2q)", scrim: "var(--scrim__e3grur2r)" };
+var colorVars = { bg1: "var(--bg1__e3grur28)", bg2: "var(--bg2__e3grur29)", bg3: "var(--bg3__e3grur2a)", bgInset: "var(--bgInset__e3grur2b)", fg1: "var(--fg1__e3grur2c)", fg2: "var(--fg2__e3grur2d)", fg3: "var(--fg3__e3grur2e)", fgOnAccent: "var(--fgOnAccent__e3grur2f)", border1: "var(--border1__e3grur2g)", border2: "var(--border2__e3grur2h)", borderStrong: "var(--borderStrong__e3grur2i)", accent: "var(--accent__e3grur2j)", accentHover: "var(--accentHover__e3grur2k)", accentSoft: "var(--accentSoft__e3grur2l)", ok: "var(--ok__e3grur2m)", warn: "var(--warn__e3grur2n)", danger: "var(--danger__e3grur2o)", dangerHover: "var(--dangerHover__e3grur2p)", dangerSoft: "var(--dangerSoft__e3grur2q)", info: "var(--info__e3grur2r)", focus: "var(--focus__e3grur2s)", scrim: "var(--scrim__e3grur2t)" };
 var modeNames = ["light", "dark", "sepia", "contrast"];
 var schemaNames = ["tinta"];
-var themes = { tinta: { light: "theme_themes_tinta_light__e3grur2s", dark: "theme_themes_tinta_dark__e3grur2t", sepia: "theme_themes_tinta_sepia__e3grur2u", contrast: "theme_themes_tinta_contrast__e3grur2v" } };
+var themes = { tinta: { light: "theme_themes_tinta_light__e3grur2u", dark: "theme_themes_tinta_dark__e3grur2v", sepia: "theme_themes_tinta_sepia__e3grur2w", contrast: "theme_themes_tinta_contrast__e3grur2x" } };
 var vars = { font: { display: "var(--font-display__e3grur0)", text: "var(--font-text__e3grur1)", mono: "var(--font-mono__e3grur2)", black: "var(--font-black__e3grur3)" }, text: { eyebrow: { size: "var(--text-eyebrow-size__e3grur4)", lineHeight: "var(--text-eyebrow-lineHeight__e3grur5)", weight: "var(--text-eyebrow-weight__e3grur6)", letterSpacing: "var(--text-eyebrow-letterSpacing__e3grur7)" }, display: { size: "var(--text-display-size__e3grur8)", lineHeight: "var(--text-display-lineHeight__e3grur9)", weight: "var(--text-display-weight__e3grura)", letterSpacing: "var(--text-display-letterSpacing__e3grurb)" }, h1: { size: "var(--text-h1-size__e3grurc)", lineHeight: "var(--text-h1-lineHeight__e3grurd)", weight: "var(--text-h1-weight__e3grure)", letterSpacing: "var(--text-h1-letterSpacing__e3grurf)" }, h2: { size: "var(--text-h2-size__e3grurg)", lineHeight: "var(--text-h2-lineHeight__e3grurh)", weight: "var(--text-h2-weight__e3gruri)", letterSpacing: "var(--text-h2-letterSpacing__e3grurj)" }, h3: { size: "var(--text-h3-size__e3grurk)", lineHeight: "var(--text-h3-lineHeight__e3grurl)", weight: "var(--text-h3-weight__e3grurm)", letterSpacing: "var(--text-h3-letterSpacing__e3grurn)" }, h4: { size: "var(--text-h4-size__e3gruro)", lineHeight: "var(--text-h4-lineHeight__e3grurp)", weight: "var(--text-h4-weight__e3grurq)", letterSpacing: "var(--text-h4-letterSpacing__e3grurr)" }, body: { size: "var(--text-body-size__e3grurs)", lineHeight: "var(--text-body-lineHeight__e3grurt)", weight: "var(--text-body-weight__e3gruru)", letterSpacing: "var(--text-body-letterSpacing__e3grurv)" }, lead: { size: "var(--text-lead-size__e3grurw)", lineHeight: "var(--text-lead-lineHeight__e3grurx)", weight: "var(--text-lead-weight__e3grury)", letterSpacing: "var(--text-lead-letterSpacing__e3grurz)" }, small: { size: "var(--text-small-size__e3grur10)", lineHeight: "var(--text-small-lineHeight__e3grur11)", weight: "var(--text-small-weight__e3grur12)", letterSpacing: "var(--text-small-letterSpacing__e3grur13)" }, caption: { size: "var(--text-caption-size__e3grur14)", lineHeight: "var(--text-caption-lineHeight__e3grur15)", weight: "var(--text-caption-weight__e3grur16)", letterSpacing: "var(--text-caption-letterSpacing__e3grur17)" } }, space: { s0: "var(--space-s0__e3grur18)", s1: "var(--space-s1__e3grur19)", s2: "var(--space-s2__e3grur1a)", s3: "var(--space-s3__e3grur1b)", s4: "var(--space-s4__e3grur1c)", s5: "var(--space-s5__e3grur1d)", s6: "var(--space-s6__e3grur1e)", s7: "var(--space-s7__e3grur1f)", s8: "var(--space-s8__e3grur1g)", s9: "var(--space-s9__e3grur1h)" }, radius: { none: "var(--radius-none__e3grur1i)", sm: "var(--radius-sm__e3grur1j)", md: "var(--radius-md__e3grur1k)", lg: "var(--radius-lg__e3grur1l)", base: "var(--radius-base__e3grur1m)", full: "var(--radius-full__e3grur1n)" }, border: { hair: "var(--border-hair__e3grur1o)", rule: "var(--border-rule__e3grur1p)", heavy: "var(--border-heavy__e3grur1q)" }, tracking: { tight: "var(--tracking-tight__e3grur1r)", normal: "var(--tracking-normal__e3grur1s)", wide: "var(--tracking-wide__e3grur1t)", wider: "var(--tracking-wider__e3grur1u)", widest: "var(--tracking-widest__e3grur1v)" }, weight: { light: "var(--weight-light__e3grur1w)", regular: "var(--weight-regular__e3grur1x)", medium: "var(--weight-medium__e3grur1y)", semibold: "var(--weight-semibold__e3grur1z)", bold: "var(--weight-bold__e3grur20)" }, dur: { fast: "var(--dur-fast__e3grur21)", base: "var(--dur-base__e3grur22)", slow: "var(--dur-slow__e3grur23)" }, ease: { ink: "var(--ease-ink__e3grur24)" }, shadow: { sm: "var(--shadow-sm__e3grur25)", md: "var(--shadow-md__e3grur26)", lg: "var(--shadow-lg__e3grur27)" }, color: colorVars };
 
 // src/hooks/use-previous/index.ts
@@ -28,7 +28,7 @@ import { forwardRef } from "react";
 
 // src/theme/styles/sprinkles/index.css.ts
 import { createSprinkles as _ad221 } from "@vanilla-extract/sprinkles/createRuntimeSprinkles";
-var sprinkles = _ad221({ 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" } } } } });
+var sprinkles = _ad221({ 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" }, dangerHover: { defaultClass: "sprinkles_background_dangerHover__qhecrd3t" }, dangerSoft: { defaultClass: "sprinkles_background_dangerSoft__qhecrd3u" }, info: { defaultClass: "sprinkles_background_info__qhecrd3v" }, focus: { defaultClass: "sprinkles_background_focus__qhecrd3w" }, scrim: { defaultClass: "sprinkles_background_scrim__qhecrd3x" } } }, color: { values: { bg1: { defaultClass: "sprinkles_color_bg1__qhecrd3y" }, bg2: { defaultClass: "sprinkles_color_bg2__qhecrd3z" }, bg3: { defaultClass: "sprinkles_color_bg3__qhecrd40" }, bgInset: { defaultClass: "sprinkles_color_bgInset__qhecrd41" }, fg1: { defaultClass: "sprinkles_color_fg1__qhecrd42" }, fg2: { defaultClass: "sprinkles_color_fg2__qhecrd43" }, fg3: { defaultClass: "sprinkles_color_fg3__qhecrd44" }, fgOnAccent: { defaultClass: "sprinkles_color_fgOnAccent__qhecrd45" }, border1: { defaultClass: "sprinkles_color_border1__qhecrd46" }, border2: { defaultClass: "sprinkles_color_border2__qhecrd47" }, borderStrong: { defaultClass: "sprinkles_color_borderStrong__qhecrd48" }, accent: { defaultClass: "sprinkles_color_accent__qhecrd49" }, accentHover: { defaultClass: "sprinkles_color_accentHover__qhecrd4a" }, accentSoft: { defaultClass: "sprinkles_color_accentSoft__qhecrd4b" }, ok: { defaultClass: "sprinkles_color_ok__qhecrd4c" }, warn: { defaultClass: "sprinkles_color_warn__qhecrd4d" }, danger: { defaultClass: "sprinkles_color_danger__qhecrd4e" }, dangerHover: { defaultClass: "sprinkles_color_dangerHover__qhecrd4f" }, dangerSoft: { defaultClass: "sprinkles_color_dangerSoft__qhecrd4g" }, info: { defaultClass: "sprinkles_color_info__qhecrd4h" }, focus: { defaultClass: "sprinkles_color_focus__qhecrd4i" }, scrim: { defaultClass: "sprinkles_color_scrim__qhecrd4j" } } }, borderRadius: { values: { none: { defaultClass: "sprinkles_borderRadius_none__qhecrd4k" }, sm: { defaultClass: "sprinkles_borderRadius_sm__qhecrd4l" }, md: { defaultClass: "sprinkles_borderRadius_md__qhecrd4m" }, lg: { defaultClass: "sprinkles_borderRadius_lg__qhecrd4n" }, base: { defaultClass: "sprinkles_borderRadius_base__qhecrd4o" }, full: { defaultClass: "sprinkles_borderRadius_full__qhecrd4p" } } }, display: { values: { block: { defaultClass: "sprinkles_display_block__qhecrd4q" }, "inline-block": { defaultClass: "sprinkles_display_inline-block__qhecrd4r" }, flex: { defaultClass: "sprinkles_display_flex__qhecrd4s" }, "inline-flex": { defaultClass: "sprinkles_display_inline-flex__qhecrd4t" }, grid: { defaultClass: "sprinkles_display_grid__qhecrd4u" }, none: { defaultClass: "sprinkles_display_none__qhecrd4v" } } }, flexDirection: { values: { row: { defaultClass: "sprinkles_flexDirection_row__qhecrd4w" }, column: { defaultClass: "sprinkles_flexDirection_column__qhecrd4x" }, "row-reverse": { defaultClass: "sprinkles_flexDirection_row-reverse__qhecrd4y" }, "column-reverse": { defaultClass: "sprinkles_flexDirection_column-reverse__qhecrd4z" } } }, alignItems: { values: { "flex-start": { defaultClass: "sprinkles_alignItems_flex-start__qhecrd50" }, center: { defaultClass: "sprinkles_alignItems_center__qhecrd51" }, "flex-end": { defaultClass: "sprinkles_alignItems_flex-end__qhecrd52" }, stretch: { defaultClass: "sprinkles_alignItems_stretch__qhecrd53" }, baseline: { defaultClass: "sprinkles_alignItems_baseline__qhecrd54" } } }, justifyContent: { values: { "flex-start": { defaultClass: "sprinkles_justifyContent_flex-start__qhecrd55" }, center: { defaultClass: "sprinkles_justifyContent_center__qhecrd56" }, "flex-end": { defaultClass: "sprinkles_justifyContent_flex-end__qhecrd57" }, "space-between": { defaultClass: "sprinkles_justifyContent_space-between__qhecrd58" }, "space-around": { defaultClass: "sprinkles_justifyContent_space-around__qhecrd59" }, "space-evenly": { defaultClass: "sprinkles_justifyContent_space-evenly__qhecrd5a" } } }, flexWrap: { values: { nowrap: { defaultClass: "sprinkles_flexWrap_nowrap__qhecrd5b" }, wrap: { defaultClass: "sprinkles_flexWrap_wrap__qhecrd5c" } } } } });
 
 // src/components/container/use-styles.ts
 function useStyles(props) {
@@ -211,18 +211,65 @@ var Typography = TypographyForwarded;
 // src/components/button/index.tsx
 import { forwardRef as forwardRef3 } from "react";
 
+// src/testing/states.ts
+function states(map) {
+  const active2 = Object.keys(map).filter((key) => map[key]);
+  return active2.length > 0 ? active2.join(" ") : void 0;
+}
+
+// src/testing/use-test-id.ts
+import { useMemo as useMemo4 } from "react";
+
+// src/testing/compose.ts
+function normalizeSegment(seg) {
+  return seg.trim().replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+}
+function composeTestId(parts) {
+  return parts.filter((p) => typeof p === "string" && p.trim() !== "").map(normalizeSegment).join("__");
+}
+
+// src/testing/context/test-id-context.tsx
+import { createContext as createContext2, useContext as useContext2, useMemo as useMemo3 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var TestIdContext = createContext2([]);
+function TestIdProvider({ context, children }) {
+  const parent = useContext2(TestIdContext);
+  const value = useMemo3(
+    () => [...parent, normalizeSegment(context)].filter((seg) => seg !== ""),
+    [parent, context]
+  );
+  return /* @__PURE__ */ jsx4(TestIdContext.Provider, { value, children });
+}
+function useTestIdContext() {
+  return useContext2(TestIdContext);
+}
+
+// src/testing/use-test-id.ts
+function useTestId(type, ownTestId) {
+  const ctx = useTestIdContext();
+  const testId = composeTestId([type, ...ctx, ownTestId]);
+  return useMemo4(
+    () => ({
+      testId,
+      slot: (name) => `${testId}__${normalizeSegment(name)}`
+    }),
+    [testId]
+  );
+}
+
 // src/components/button/use-styles.ts
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo5 } from "react";
 
 // src/components/button/use-styles.css.ts
 var full = "use-styles_full__1pbtill4";
 var root = "use-styles_root__1pbtill0";
 var size = { sm: "use-styles_size_sm__1pbtill1", md: "use-styles_size_md__1pbtill2", lg: "use-styles_size_lg__1pbtill3" };
-var tone = { filledInk: "use-styles_tone_filledInk__1pbtill5", filledAccent: "use-styles_tone_filledAccent__1pbtill6", outlineInk: "use-styles_tone_outlineInk__1pbtill7", outlineAccent: "use-styles_tone_outlineAccent__1pbtill8", ghostInk: "use-styles_tone_ghostInk__1pbtill9", ghostAccent: "use-styles_tone_ghostAccent__1pbtilla" };
+var tone = { filledInk: "use-styles_tone_filledInk__1pbtill5", filledAccent: "use-styles_tone_filledAccent__1pbtill6", outlineInk: "use-styles_tone_outlineInk__1pbtill7", outlineAccent: "use-styles_tone_outlineAccent__1pbtill8", ghostInk: "use-styles_tone_ghostInk__1pbtill9", ghostAccent: "use-styles_tone_ghostAccent__1pbtilla", filledDanger: "use-styles_tone_filledDanger__1pbtillb", outlineDanger: "use-styles_tone_outlineDanger__1pbtillc", ghostDanger: "use-styles_tone_ghostDanger__1pbtilld" };
 
 // src/components/button/use-styles.ts
 function toneKey(variant2, tone4) {
-  return `${variant2}${tone4 === "ink" ? "Ink" : "Accent"}`;
+  const Tone = `${tone4.charAt(0).toUpperCase()}${tone4.slice(1)}`;
+  return `${variant2}${Tone}`;
 }
 function useStyles3({
   variant: variant2 = "filled",
@@ -232,7 +279,7 @@ function useStyles3({
   className
 }) {
   const { themeClass } = useTheme();
-  const container = useMemo3(
+  const container = useMemo5(
     () => [
       themeClass,
       root,
@@ -247,7 +294,7 @@ function useStyles3({
 }
 
 // src/components/button/index.tsx
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
 var ICON_SIZE = { sm: 14, md: 16, lg: 18 };
 var Button = forwardRef3(function Button2({
   variant: variant2,
@@ -258,23 +305,36 @@ var Button = forwardRef3(function Button2({
   full: full2,
   className,
   type = "button",
+  testId,
   children,
   ...rest
 }, ref) {
   const { container } = useStyles3({ variant: variant2, tone: tone4, size: size3, full: full2, className });
+  const { testId: dataTestId } = useTestId("button", testId);
   const iconSize = ICON_SIZE[size3];
-  return /* @__PURE__ */ jsxs("button", { ref, type, className: container, ...rest, children: [
-    StartIcon && /* @__PURE__ */ jsx4(StartIcon, { size: iconSize }),
-    children,
-    EndIcon && /* @__PURE__ */ jsx4(EndIcon, { size: iconSize })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type,
+      className: container,
+      "data-testid": dataTestId,
+      "data-state": states({ disabled: rest.disabled }),
+      ...rest,
+      children: [
+        StartIcon && /* @__PURE__ */ jsx5(StartIcon, { size: iconSize }),
+        children,
+        EndIcon && /* @__PURE__ */ jsx5(EndIcon, { size: iconSize })
+      ]
+    }
+  );
 });
 
 // src/components/divider/index.tsx
 import { forwardRef as forwardRef4 } from "react";
 
 // src/components/divider/use-styles.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo6 } from "react";
 
 // src/components/divider/use-styles.css.ts
 var horizontal = "use-styles_horizontal__1n7v7yj1";
@@ -287,7 +347,7 @@ var vertical = "use-styles_vertical__1n7v7yj2";
 // src/components/divider/use-styles.ts
 function useStyles4({ vertical: vertical2, hasLabel }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo4(
+  const root24 = useMemo6(
     () => [
       themeClass,
       root2,
@@ -299,25 +359,25 @@ function useStyles4({ vertical: vertical2, hasLabel }) {
 }
 
 // src/components/divider/index.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var Divider = forwardRef4(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__ */ jsxs2("div", { ref, role: "separator", className: root24, ...rest, children: [
-      /* @__PURE__ */ jsx5("span", { className: line2 }),
-      /* @__PURE__ */ jsx5("span", { className: labelClass, children: label7 }),
-      /* @__PURE__ */ jsx5("span", { className: line2 })
+      /* @__PURE__ */ jsx6("span", { className: line2 }),
+      /* @__PURE__ */ jsx6("span", { className: labelClass, children: label7 }),
+      /* @__PURE__ */ jsx6("span", { className: line2 })
     ] });
   }
-  return /* @__PURE__ */ jsx5("div", { ref, role: "separator", className: root24, ...rest });
+  return /* @__PURE__ */ jsx6("div", { ref, role: "separator", className: root24, ...rest });
 });
 
 // src/components/avatar/index.tsx
 import { forwardRef as forwardRef5 } from "react";
 
 // src/components/avatar/use-styles.ts
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo7 } from "react";
 
 // src/components/avatar/use-styles.css.ts
 var root3 = "use-styles_root__1mn1rmu0";
@@ -331,7 +391,7 @@ function useStyles5({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo5(
+  const root24 = useMemo7(
     () => [
       themeClass,
       root3,
@@ -345,17 +405,17 @@ function useStyles5({
 }
 
 // src/components/avatar/index.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var Avatar = forwardRef5(function Avatar2({ size: size3, filled, className, children, ...rest }, ref) {
   const { root: root24 } = useStyles5({ size: size3, filled, className });
-  return /* @__PURE__ */ jsx6("span", { ref, className: root24, ...rest, children });
+  return /* @__PURE__ */ jsx7("span", { ref, className: root24, ...rest, children });
 });
 
 // src/components/badge/index.tsx
 import { forwardRef as forwardRef6 } from "react";
 
 // src/components/badge/use-styles.ts
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo8 } from "react";
 
 // src/components/badge/use-styles.css.ts
 var dot = "use-styles_dot__1wpei6p1";
@@ -368,21 +428,21 @@ function useStyles6({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo6(
+  const root24 = useMemo8(
     () => [themeClass, root4, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
-  const dot3 = useMemo6(() => [dot, tone2[tone4]].join(" "), [tone4]);
+  const dot3 = useMemo8(() => [dot, tone2[tone4]].join(" "), [tone4]);
   return { root: root24, dot: dot3 };
 }
 
 // src/components/badge/index.tsx
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var Badge = forwardRef6(function Badge2({ count, tone: tone4, className, children, ...rest }, ref) {
   const { root: root24, dot: dot3 } = useStyles6({ tone: tone4, className });
   return /* @__PURE__ */ jsxs3("span", { ref, className: root24, ...rest, children: [
     children,
-    count != null && /* @__PURE__ */ jsx7("span", { className: dot3, children: count })
+    count != null && /* @__PURE__ */ jsx8("span", { className: dot3, children: count })
   ] });
 });
 
@@ -390,7 +450,7 @@ var Badge = forwardRef6(function Badge2({ count, tone: tone4, className, childre
 import { forwardRef as forwardRef7 } from "react";
 
 // src/components/progress/use-styles.ts
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo9 } from "react";
 
 // src/components/progress/use-styles.css.ts
 var bar = "use-styles_bar__kbop7v3";
@@ -406,7 +466,7 @@ function useStyles7({
 }) {
   const { themeClass } = useTheme();
   const indeterminate2 = value === void 0;
-  return useMemo7(() => {
+  return useMemo9(() => {
     const root24 = (...classes) => [themeClass, ...classes, className].filter(Boolean).join(" ");
     if (variant2 === "circular") {
       return { track: "", bar: "", spinner: root24(spinner) };
@@ -420,12 +480,12 @@ function useStyles7({
 }
 
 // src/components/progress/index.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var Progress = forwardRef7(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__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       "span",
       {
         ref,
@@ -439,7 +499,7 @@ var Progress = forwardRef7(function Progress2({ variant: variant2 = "linear", va
       }
     );
   }
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       ref,
@@ -449,7 +509,7 @@ var Progress = forwardRef7(function Progress2({ variant: variant2 = "linear", va
       "aria-valuemin": indeterminate2 ? void 0 : 0,
       "aria-valuemax": indeterminate2 ? void 0 : 100,
       ...rest,
-      children: /* @__PURE__ */ jsx8("div", { className: bar2, style: indeterminate2 ? void 0 : { width: `${value}%` } })
+      children: /* @__PURE__ */ jsx9("div", { className: bar2, style: indeterminate2 ? void 0 : { width: `${value}%` } })
     }
   );
 });
@@ -458,7 +518,7 @@ var Progress = forwardRef7(function Progress2({ variant: variant2 = "linear", va
 import { forwardRef as forwardRef8 } from "react";
 
 // src/components/icons/x/index.tsx
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 function XIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs4(
     "svg",
@@ -475,15 +535,15 @@ function XIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx9("path", { d: "M18 6 6 18" }),
-        /* @__PURE__ */ jsx9("path", { d: "m6 6 12 12" })
+        /* @__PURE__ */ jsx10("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx10("path", { d: "m6 6 12 12" })
       ]
     }
   );
 }
 
 // src/components/chip/use-styles.ts
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo10 } from "react";
 
 // src/components/chip/use-styles.css.ts
 var clickable = "use-styles_clickable__1axilf44";
@@ -499,7 +559,7 @@ function useStyles8({
   clickable: clickable2
 }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo8(
+  const root24 = useMemo10(
     () => [
       themeClass,
       root5,
@@ -512,7 +572,7 @@ function useStyles8({
 }
 
 // src/components/chip/index.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 var Chip = forwardRef8(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 });
@@ -522,7 +582,7 @@ var Chip = forwardRef8(function Chip2({ selected: selected3, tone: tone4, onDele
   };
   return /* @__PURE__ */ jsxs5("span", { ref, className: root24, onClick, ...rest, children: [
     children,
-    onDelete && /* @__PURE__ */ jsx10("button", { type: "button", className: deleteBtn2, "aria-label": "Remove", onClick: handleDelete, children: /* @__PURE__ */ jsx10(XIcon, { size: 13 }) })
+    onDelete && /* @__PURE__ */ jsx11("button", { type: "button", className: deleteBtn2, "aria-label": "Remove", onClick: handleDelete, children: /* @__PURE__ */ jsx11(XIcon, { size: 13 }) })
   ] });
 });
 
@@ -530,9 +590,9 @@ var Chip = forwardRef8(function Chip2({ selected: selected3, tone: tone4, onDele
 import { forwardRef as forwardRef9 } from "react";
 
 // src/components/icons/check/index.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -546,13 +606,13 @@ function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ jsx11("path", { d: "M20 6 9 17l-5-5" })
+      children: /* @__PURE__ */ jsx12("path", { d: "M20 6 9 17l-5-5" })
     }
   );
 }
 
 // src/components/checkbox/use-styles.ts
-import { useMemo as useMemo9 } from "react";
+import { useMemo as useMemo11 } from "react";
 
 // src/components/checkbox/use-styles.css.ts
 var box = "use-styles_box__9zoga91";
@@ -565,11 +625,11 @@ var root6 = "use-styles_root__9zoga90";
 // src/components/checkbox/use-styles.ts
 function useStyles9({ checked, disabled: disabled3 }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo9(
+  const root24 = useMemo11(
     () => [themeClass, root6, disabled3 && disabled].filter(Boolean).join(" "),
     [themeClass, disabled3]
   );
-  const box2 = useMemo9(
+  const box2 = useMemo11(
     () => [box, checked && boxChecked].filter(Boolean).join(" "),
     [checked]
   );
@@ -577,7 +637,7 @@ function useStyles9({ checked, disabled: disabled3 }) {
 }
 
 // src/components/checkbox/index.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 var Checkbox = forwardRef9(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) => {
@@ -585,7 +645,7 @@ var Checkbox = forwardRef9(function Checkbox2({ checked = false, onChange, label
     onChange?.(e.target.checked);
   };
   return /* @__PURE__ */ jsxs6("label", { className: root24, children: [
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       "input",
       {
         ref,
@@ -598,7 +658,7 @@ var Checkbox = forwardRef9(function Checkbox2({ checked = false, onChange, label
         ...rest
       }
     ),
-    /* @__PURE__ */ jsx12("span", { className: box2, children: checked && /* @__PURE__ */ jsx12(CheckIcon, { size: 12, className: check2 }) }),
+    /* @__PURE__ */ jsx13("span", { className: box2, children: checked && /* @__PURE__ */ jsx13(CheckIcon, { size: 12, className: check2 }) }),
     label7
   ] });
 });
@@ -607,7 +667,7 @@ var Checkbox = forwardRef9(function Checkbox2({ checked = false, onChange, label
 import { forwardRef as forwardRef10 } from "react";
 
 // src/components/radio/use-styles.ts
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo12 } from "react";
 
 // src/components/radio/use-styles.css.ts
 var circle = "use-styles_circle__vy61b42";
@@ -623,7 +683,7 @@ function useStyles10({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo10(
+  const root24 = useMemo12(
     () => [themeClass, root7, disabled3 && disabled2, className].filter(Boolean).join(" "),
     [themeClass, disabled3, className]
   );
@@ -637,11 +697,11 @@ function useStyles10({
 }
 
 // src/components/radio/index.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 var Radio = forwardRef10(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__ */ jsxs7("label", { className: root24, children: [
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       "input",
       {
         ref,
@@ -655,8 +715,8 @@ var Radio = forwardRef10(function Radio2({ checked, onChange, label: label7, nam
         ...rest
       }
     ),
-    /* @__PURE__ */ jsx13("span", { className: circle2, children: checked && /* @__PURE__ */ jsx13("span", { className: dot3 }) }),
-    label7 != null && /* @__PURE__ */ jsx13("span", { className: labelClass, children: label7 })
+    /* @__PURE__ */ jsx14("span", { className: circle2, children: checked && /* @__PURE__ */ jsx14("span", { className: dot3 }) }),
+    label7 != null && /* @__PURE__ */ jsx14("span", { className: labelClass, children: label7 })
   ] });
 });
 
@@ -664,7 +724,7 @@ var Radio = forwardRef10(function Radio2({ checked, onChange, label: label7, nam
 import { forwardRef as forwardRef11 } from "react";
 
 // src/components/switch/use-styles.ts
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo13 } from "react";
 
 // src/components/switch/use-styles.css.ts
 var input3 = "surfaces_srOnly__1qa7atn0";
@@ -678,7 +738,7 @@ var trackChecked = "use-styles_trackChecked__1r6kem72";
 // src/components/switch/use-styles.ts
 function useStyles11({ checked }) {
   const { themeClass } = useTheme();
-  return useMemo11(
+  return useMemo13(
     () => ({
       root: [themeClass, root8].filter(Boolean).join(" "),
       input: input3,
@@ -691,11 +751,11 @@ function useStyles11({ checked }) {
 }
 
 // src/components/switch/index.tsx
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 var Switch = forwardRef11(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__ */ jsxs8("label", { className: root24, children: [
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       "input",
       {
         ref,
@@ -712,8 +772,8 @@ var Switch = forwardRef11(function Switch2({ checked = false, onChange, label: l
         ...rest
       }
     ),
-    /* @__PURE__ */ jsx14("span", { className: track4, children: /* @__PURE__ */ jsx14("span", { className: knob2 }) }),
-    label7 != null && /* @__PURE__ */ jsx14("span", { className: labelClass, children: label7 })
+    /* @__PURE__ */ jsx15("span", { className: track4, children: /* @__PURE__ */ jsx15("span", { className: knob2 }) }),
+    label7 != null && /* @__PURE__ */ jsx15("span", { className: labelClass, children: label7 })
   ] });
 });
 
@@ -724,7 +784,7 @@ import { forwardRef as forwardRef13 } from "react";
 import { forwardRef as forwardRef12, useId } from "react";
 
 // src/components/base-field/use-styles.ts
-import { useMemo as useMemo12 } from "react";
+import { useMemo as useMemo14 } from "react";
 
 // src/components/base-field/use-styles.css.ts
 var field = "use-styles_field__1c3cgd3";
@@ -743,7 +803,7 @@ var trailingSlot = "use-styles_trailingSlot__1c3cgdb";
 // src/components/base-field/use-styles.ts
 function useStyles12({ error, hasStartIcon, hasTrailing, className }) {
   const { themeClass } = useTheme();
-  return useMemo12(() => {
+  return useMemo14(() => {
     const root24 = [themeClass, root9].filter(Boolean).join(" ");
     const labelText2 = [labelText, error && labelTextError].filter(Boolean).join(" ");
     const input6 = [
@@ -767,8 +827,8 @@ function useStyles12({ error, hasStartIcon, hasTrailing, className }) {
 }
 
 // src/components/base-field/index.tsx
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
-var BaseField = forwardRef12(function BaseField2({ label: label7, help, error, startIcon: StartIcon, trailing: trailing2, id, className, children }, ref) {
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+var BaseField = forwardRef12(function BaseField2({ label: label7, help, error, startIcon: StartIcon, trailing: trailing2, id, className, testId, children }, ref) {
   const autoId = useId();
   const controlId = id ?? autoId;
   const errorMessage = error != null && error !== false && error !== true && error !== "" ? error : null;
@@ -781,27 +841,30 @@ var BaseField = forwardRef12(function BaseField2({ label: label7, help, error, s
     hasTrailing: trailing2 != null,
     className
   });
+  const { testId: rootTestId, slot } = useTestId("field", testId);
   const control = {
     id: controlId,
     className: classes.input,
     ref,
     "aria-describedby": messageId,
-    "aria-invalid": hasError ? true : void 0
+    "aria-invalid": hasError ? true : void 0,
+    "data-testid": slot("input")
   };
-  return /* @__PURE__ */ jsxs9("div", { className: classes.root, children: [
-    label7 != null && /* @__PURE__ */ jsx15("label", { htmlFor: controlId, className: classes.labelText, children: label7 }),
+  return /* @__PURE__ */ jsxs9("div", { className: classes.root, "data-testid": rootTestId, "data-state": states({ error: hasError }), children: [
+    label7 != null && /* @__PURE__ */ jsx16("label", { htmlFor: controlId, className: classes.labelText, "data-testid": slot("label"), children: label7 }),
     /* @__PURE__ */ jsxs9("div", { className: classes.field, children: [
-      StartIcon != null && /* @__PURE__ */ jsx15("span", { className: classes.startIconSlot, children: /* @__PURE__ */ jsx15(StartIcon, { size: 18 }) }),
+      StartIcon != null && /* @__PURE__ */ jsx16("span", { className: classes.startIconSlot, children: /* @__PURE__ */ jsx16(StartIcon, { size: 18 }) }),
       children(control),
-      trailing2 != null && /* @__PURE__ */ jsx15("span", { className: classes.trailingSlot, children: trailing2 })
+      trailing2 != null && /* @__PURE__ */ jsx16("span", { className: classes.trailingSlot, children: trailing2 })
     ] }),
     message2 != null && // `aria-live` solo cuando el mensaje es un error: anuncia la validación al aparecer.
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       "span",
       {
         id: messageId,
         className: classes.helpText,
         "aria-live": errorMessage ? "polite" : void 0,
+        "data-testid": slot("message"),
         children: message2
       }
     )
@@ -809,7 +872,7 @@ var BaseField = forwardRef12(function BaseField2({ label: label7, help, error, s
 });
 
 // src/components/text-field/index.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var TextField = forwardRef13(function TextField2({
   label: label7,
   help,
@@ -821,9 +884,11 @@ var TextField = forwardRef13(function TextField2({
   onChange,
   className,
   id,
+  testId,
   ...rest
 }, ref) {
-  return /* @__PURE__ */ jsx16(
+  const rawTestId = rest["data-testid"];
+  return /* @__PURE__ */ jsx17(
     BaseField,
     {
       ref,
@@ -833,23 +898,26 @@ var TextField = forwardRef13(function TextField2({
       startIcon,
       id,
       className,
+      testId,
       children: ({ ref: controlRef, ...control }) => multiline ? (
         // 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>).
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           "textarea",
           {
             ...rest,
             ...control,
+            "data-testid": rawTestId ?? control["data-testid"],
             rows: rows ?? 4,
             onChange: (e) => onChange?.(e.target.value)
           }
         )
-      ) : /* @__PURE__ */ jsx16(
+      ) : /* @__PURE__ */ jsx17(
         "input",
         {
           ...rest,
           ...control,
+          "data-testid": rawTestId ?? control["data-testid"],
           ref: controlRef,
           type,
           onChange: (e) => onChange?.(e.target.value)
@@ -863,7 +931,7 @@ var TextField = forwardRef13(function TextField2({
 import { forwardRef as forwardRef14, useState as useState3 } from "react";
 
 // src/components/icons/eye/index.tsx
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function EyeIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs10(
     "svg",
@@ -880,15 +948,15 @@ function EyeIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx17("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
-        /* @__PURE__ */ jsx17("circle", { cx: "12", cy: "12", r: "3" })
+        /* @__PURE__ */ jsx18("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
+        /* @__PURE__ */ jsx18("circle", { cx: "12", cy: "12", r: "3" })
       ]
     }
   );
 }
 
 // src/components/icons/eye-off/index.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs11(
     "svg",
@@ -905,28 +973,28 @@ function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx18("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
-        /* @__PURE__ */ jsx18("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
-        /* @__PURE__ */ jsx18("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
-        /* @__PURE__ */ jsx18("path", { d: "m2 2 20 20" })
+        /* @__PURE__ */ jsx19("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
+        /* @__PURE__ */ jsx19("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
+        /* @__PURE__ */ jsx19("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
+        /* @__PURE__ */ jsx19("path", { d: "m2 2 20 20" })
       ]
     }
   );
 }
 
 // src/components/password-field/use-styles.ts
-import { useMemo as useMemo13 } from "react";
+import { useMemo as useMemo15 } from "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 useMemo13(() => ({ revealButton }), []);
+  return useMemo15(() => ({ revealButton }), []);
 }
 
 // src/components/password-field/index.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var PasswordField = forwardRef14(
   function PasswordField2({ label: label7, help, error, startIcon, onChange, id, className, ...rest }, ref) {
     const [reveal, setReveal] = useState3(false);
@@ -937,7 +1005,7 @@ var PasswordField = forwardRef14(
     const handleToggleMouseDown = (e) => {
       e.preventDefault();
     };
-    const toggleButton = /* @__PURE__ */ jsx19(
+    const toggleButton = /* @__PURE__ */ jsx20(
       "button",
       {
         type: "button",
@@ -946,10 +1014,10 @@ var PasswordField = forwardRef14(
         "aria-label": reveal ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a",
         onMouseDown: handleToggleMouseDown,
         onClick: () => setReveal((r) => !r),
-        children: reveal ? /* @__PURE__ */ jsx19(EyeOffIcon, { size: 18 }) : /* @__PURE__ */ jsx19(EyeIcon, { size: 18 })
+        children: reveal ? /* @__PURE__ */ jsx20(EyeOffIcon, { size: 18 }) : /* @__PURE__ */ jsx20(EyeIcon, { size: 18 })
       }
     );
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx20(
       BaseField,
       {
         ref,
@@ -960,7 +1028,7 @@ var PasswordField = forwardRef14(
         trailing: toggleButton,
         id,
         className,
-        children: (control) => /* @__PURE__ */ jsx19(
+        children: (control) => /* @__PURE__ */ jsx20(
           "input",
           {
             ...rest,
@@ -975,8 +1043,8 @@ var PasswordField = forwardRef14(
 );
 
 // src/components/money-field/index.tsx
-import { forwardRef as forwardRef15, useMemo as useMemo14, useState as useState4 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { forwardRef as forwardRef15, useMemo as useMemo16, useState as useState4 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function parseAmount(raw) {
   const cleaned = raw.replace(/[^0-9.-]/g, "");
   if (cleaned === "" || cleaned === "-" || cleaned === ".") return null;
@@ -1000,7 +1068,7 @@ var MoneyField = forwardRef15(function MoneyField2({
 }, ref) {
   const [focused, setFocused] = useState4(false);
   const [draft, setDraft] = useState4("");
-  const formatter = useMemo14(
+  const formatter = useMemo16(
     () => new Intl.NumberFormat(locale, { style: "currency", currency }),
     [locale, currency]
   );
@@ -1016,7 +1084,7 @@ var MoneyField = forwardRef15(function MoneyField2({
     onChange?.(parseAmount(draft));
     onBlur?.(e);
   };
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     BaseField,
     {
       ref,
@@ -1026,7 +1094,7 @@ var MoneyField = forwardRef15(function MoneyField2({
       startIcon,
       id,
       className,
-      children: (control) => /* @__PURE__ */ jsx20(
+      children: (control) => /* @__PURE__ */ jsx21(
         "input",
         {
           ...rest,
@@ -1046,7 +1114,7 @@ var MoneyField = forwardRef15(function MoneyField2({
 import { forwardRef as forwardRef16 } from "react";
 
 // src/components/icon-button/use-styles.ts
-import { useMemo as useMemo15 } from "react";
+import { useMemo as useMemo17 } from "react";
 
 // src/components/icon-button/use-styles.css.ts
 var accent = "use-styles_accent__18np0q02";
@@ -1059,7 +1127,7 @@ function useStyles14({
   tone: tone4 = "ink"
 }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo15(
+  const root24 = useMemo17(
     () => [themeClass, root10, tone4 === "accent" && accent, active2 && active].filter(Boolean).join(" "),
     [themeClass, active2, tone4]
   );
@@ -1067,8 +1135,8 @@ function useStyles14({
 }
 
 // src/components/icon-button/index.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
-var IconButton = forwardRef16(function IconButton2({ icon: Icon, active: active2, tone: tone4, title, type = "button", ...rest }, ref) {
+import { jsx as jsx22 } from "react/jsx-runtime";
+var IconButton = forwardRef16(function IconButton2({ icon: Icon, active: active2, tone: tone4, title, type = "button", testId, ...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;
@@ -1077,14 +1145,28 @@ var IconButton = forwardRef16(function IconButton2({ icon: Icon, active: active2
     }
   }
   const { root: root24 } = useStyles14({ active: active2, tone: tone4 });
-  return /* @__PURE__ */ jsx21("button", { ref, type, className: root24, "aria-label": title, title, ...rest, children: /* @__PURE__ */ jsx21(Icon, { size: 18 }) });
+  const { testId: dataTestId } = useTestId("button", testId);
+  return /* @__PURE__ */ jsx22(
+    "button",
+    {
+      ref,
+      type,
+      className: root24,
+      "aria-label": title,
+      title,
+      "data-testid": dataTestId,
+      "data-state": states({ active: active2, disabled: rest.disabled }),
+      ...rest,
+      children: /* @__PURE__ */ jsx22(Icon, { size: 18 })
+    }
+  );
 });
 
 // src/components/card/index.tsx
 import { forwardRef as forwardRef17 } from "react";
 
 // src/components/card/use-styles.ts
-import { useMemo as useMemo16 } from "react";
+import { useMemo as useMemo18 } from "react";
 
 // src/components/card/use-styles.css.ts
 var body = "use-styles_body__1fuvd022";
@@ -1095,27 +1177,27 @@ var root11 = "use-styles_root__1fuvd020";
 // src/components/card/use-styles.ts
 function useStyles15() {
   const { themeClass } = useTheme();
-  const root24 = useMemo16(() => `${themeClass} ${root11}`, [themeClass]);
+  const root24 = useMemo18(() => `${themeClass} ${root11}`, [themeClass]);
   return { root: root24, header, body, footer };
 }
 
 // src/components/card/index.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var CardRoot = forwardRef17(function Card({ children, ...rest }, ref) {
   const { root: root24 } = useStyles15();
-  return /* @__PURE__ */ jsx22("div", { ref, className: root24, ...rest, children });
+  return /* @__PURE__ */ jsx23("div", { ref, className: root24, ...rest, children });
 });
 function CardHeader({ children, ...rest }) {
   const { header: header3 } = useStyles15();
-  return /* @__PURE__ */ jsx22("div", { className: header3, ...rest, children });
+  return /* @__PURE__ */ jsx23("div", { className: header3, ...rest, children });
 }
 function CardBody({ children, ...rest }) {
   const { body: body3 } = useStyles15();
-  return /* @__PURE__ */ jsx22("div", { className: body3, ...rest, children });
+  return /* @__PURE__ */ jsx23("div", { className: body3, ...rest, children });
 }
 function CardFooter({ children, ...rest }) {
   const { footer: footer2 } = useStyles15();
-  return /* @__PURE__ */ jsx22("div", { className: footer2, ...rest, children });
+  return /* @__PURE__ */ jsx23("div", { className: footer2, ...rest, children });
 }
 CardRoot.displayName = "Card";
 CardHeader.displayName = "Card.Header";
@@ -1131,7 +1213,7 @@ var Card2 = Object.assign(CardRoot, {
 import { forwardRef as forwardRef18 } from "react";
 
 // src/components/icons/circle-check/index.tsx
-import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 function CircleCheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs12(
     "svg",
@@ -1148,15 +1230,15 @@ function CircleCheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx23("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx23("path", { d: "m9 12 2 2 4-4" })
+        /* @__PURE__ */ jsx24("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx24("path", { d: "m9 12 2 2 4-4" })
       ]
     }
   );
 }
 
 // src/components/icons/circle-x/index.tsx
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 function CircleXIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs13(
     "svg",
@@ -1173,16 +1255,16 @@ function CircleXIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx24("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx24("path", { d: "m15 9-6 6" }),
-        /* @__PURE__ */ jsx24("path", { d: "m9 9 6 6" })
+        /* @__PURE__ */ jsx25("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx25("path", { d: "m15 9-6 6" }),
+        /* @__PURE__ */ jsx25("path", { d: "m9 9 6 6" })
       ]
     }
   );
 }
 
 // src/components/icons/info/index.tsx
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 function InfoIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs14(
     "svg",
@@ -1199,16 +1281,16 @@ function InfoIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx25("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx25("path", { d: "M12 16v-4" }),
-        /* @__PURE__ */ jsx25("path", { d: "M12 8h.01" })
+        /* @__PURE__ */ jsx26("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx26("path", { d: "M12 16v-4" }),
+        /* @__PURE__ */ jsx26("path", { d: "M12 8h.01" })
       ]
     }
   );
 }
 
 // src/components/icons/triangle-alert/index.tsx
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs15(
     "svg",
@@ -1225,16 +1307,16 @@ function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx26("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
-        /* @__PURE__ */ jsx26("path", { d: "M12 9v4" }),
-        /* @__PURE__ */ jsx26("path", { d: "M12 17h.01" })
+        /* @__PURE__ */ jsx27("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
+        /* @__PURE__ */ jsx27("path", { d: "M12 9v4" }),
+        /* @__PURE__ */ jsx27("path", { d: "M12 17h.01" })
       ]
     }
   );
 }
 
 // src/components/alert/use-styles.ts
-import { useMemo as useMemo17 } from "react";
+import { useMemo as useMemo19 } from "react";
 
 // src/components/alert/use-styles.css.ts
 var content = "use-styles_content__ivsh6u6";
@@ -1248,7 +1330,7 @@ function useStyles16({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo17(
+  const root24 = useMemo19(
     () => [themeClass, root12, severity[severity2], className].filter(Boolean).join(" "),
     [themeClass, severity2, className]
   );
@@ -1260,7 +1342,7 @@ function useStyles16({
 }
 
 // src/components/alert/index.tsx
-import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 var defaultIcons = {
   info: InfoIcon,
   ok: CircleCheckIcon,
@@ -1271,10 +1353,10 @@ var Alert = forwardRef18(function Alert2({ severity: severity2 = "info", title,
   const styles = useStyles16({ severity: severity2, className });
   const IconComponent = icon ?? defaultIcons[severity2];
   return /* @__PURE__ */ jsxs16("div", { ref, role: "alert", className: styles.root, ...rest, children: [
-    /* @__PURE__ */ jsx27("span", { className: styles.iconSlot, children: /* @__PURE__ */ jsx27(IconComponent, {}) }),
+    /* @__PURE__ */ jsx28("span", { className: styles.iconSlot, children: /* @__PURE__ */ jsx28(IconComponent, {}) }),
     /* @__PURE__ */ jsxs16("div", { className: styles.content, children: [
-      title != null && /* @__PURE__ */ jsx27(Typography, { variant: "h4", children: title }),
-      children != null && /* @__PURE__ */ jsx27(Typography, { variant: "body", color: "fg2", children })
+      title != null && /* @__PURE__ */ jsx28(Typography, { variant: "h4", children: title }),
+      children != null && /* @__PURE__ */ jsx28(Typography, { variant: "body", color: "fg2", children })
     ] })
   ] });
 });
@@ -1290,7 +1372,7 @@ import {
 } from "react";
 
 // src/components/tooltip/use-styles.ts
-import { useMemo as useMemo18 } from "react";
+import { useMemo as useMemo20 } from "react";
 
 // src/components/tooltip/use-styles.css.ts
 var bubble = "use-styles_bubble__h9kvh1 surfaces_inkySurface__1qa7atn2";
@@ -1302,11 +1384,11 @@ function useStyles17({
   placement: placement2 = "top"
 }) {
   const { themeClass } = useTheme();
-  const wrapper4 = useMemo18(
+  const wrapper4 = useMemo20(
     () => [themeClass, wrapper].filter(Boolean).join(" "),
     [themeClass]
   );
-  const bubble2 = useMemo18(
+  const bubble2 = useMemo20(
     () => [bubble, placement[placement2]].filter(Boolean).join(" "),
     [placement2]
   );
@@ -1314,7 +1396,7 @@ function useStyles17({
 }
 
 // src/components/tooltip/index.tsx
-import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 var HIDE_DELAY = 120;
 var Tooltip = forwardRef19(function Tooltip2({ label: label7, children, placement: placement2 }, ref) {
   const [open, setOpen] = useState5(false);
@@ -1365,7 +1447,7 @@ var Tooltip = forwardRef19(function Tooltip2({ label: label7, children, placemen
       onKeyDown: handleKeyDown,
       children: [
         trigger2,
-        open && /* @__PURE__ */ jsx28(
+        open && /* @__PURE__ */ jsx29(
           "span",
           {
             id: tooltipId,
@@ -1385,9 +1467,9 @@ var Tooltip = forwardRef19(function Tooltip2({ label: label7, children, placemen
 import { forwardRef as forwardRef20, useEffect as useEffect4, useId as useId3, useRef as useRef3, useState as useState6 } from "react";
 
 // src/components/icons/chevron-down/index.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1401,13 +1483,13 @@ function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ jsx29("path", { d: "m6 9 6 6 6-6" })
+      children: /* @__PURE__ */ jsx30("path", { d: "m6 9 6 6 6-6" })
     }
   );
 }
 
 // src/components/select/use-styles.ts
-import { useMemo as useMemo19 } from "react";
+import { useMemo as useMemo21 } from "react";
 
 // src/components/select/use-styles.css.ts
 var chevron = "use-styles_chevron__1w1czpb4";
@@ -1426,7 +1508,7 @@ function useStyles18({
   open = false
 }) {
   const { themeClass } = useTheme();
-  return useMemo19(() => {
+  return useMemo21(() => {
     const chevron3 = [chevron, open && chevronOpen].filter(Boolean).join(" ");
     return {
       root: [themeClass, root13].filter(Boolean).join(" "),
@@ -1441,7 +1523,7 @@ function useStyles18({
 }
 
 // src/components/select/index.tsx
-import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
 var Select = forwardRef20(function Select2({ options, value, onChange, placeholder: placeholder2, label: label7, disabled: disabled3, ...rest }, ref) {
   const [open, setOpen] = useState6(false);
   const [activeIndex, setActiveIndex] = useState6(0);
@@ -1524,7 +1606,7 @@ var Select = forwardRef20(function Select2({ options, value, onChange, placehold
     }
   };
   return /* @__PURE__ */ jsxs18("div", { ref: setRootRef, className: root24, ...rest, children: [
-    label7 && /* @__PURE__ */ jsx30("span", { id: labelId, className: labelClass, children: label7 }),
+    label7 && /* @__PURE__ */ jsx31("span", { id: labelId, className: labelClass, children: label7 }),
     /* @__PURE__ */ jsxs18(
       "button",
       {
@@ -1545,17 +1627,17 @@ var Select = forwardRef20(function Select2({ options, value, onChange, placehold
         },
         onKeyDown: handleKeyDown,
         children: [
-          selected3 ? selected3.label : /* @__PURE__ */ jsx30("span", { className: placeholderClass, children: placeholder2 }),
-          /* @__PURE__ */ jsx30("span", { className: chevron3, children: /* @__PURE__ */ jsx30(ChevronDownIcon, { size: 18 }) })
+          selected3 ? selected3.label : /* @__PURE__ */ jsx31("span", { className: placeholderClass, children: placeholder2 }),
+          /* @__PURE__ */ jsx31("span", { className: chevron3, children: /* @__PURE__ */ jsx31(ChevronDownIcon, { size: 18 }) })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx30("div", { className: menu2, role: "listbox", children: options.map((option2, index) => {
+    open && /* @__PURE__ */ jsx31("div", { className: menu2, role: "listbox", children: options.map((option2, index) => {
       const isSelected = option2.value === value;
       const isActive = index === activeIndex;
       return (
         // biome-ignore lint/a11y/useKeyWithClickEvents: keyboard nav lives on the trigger via aria-activedescendant; options are not focusable.
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx31(
           "div",
           {
             id: optionId(index),
@@ -1577,7 +1659,7 @@ var Select = forwardRef20(function Select2({ options, value, onChange, placehold
 import { forwardRef as forwardRef21 } from "react";
 
 // src/components/slider/use-styles.ts
-import { useMemo as useMemo20 } from "react";
+import { useMemo as useMemo22 } from "react";
 
 // src/components/slider/use-styles.css.ts
 var input5 = "use-styles_input__okw59n3";
@@ -1591,7 +1673,7 @@ var wrapper2 = "use-styles_wrapper__okw59n6";
 // src/components/slider/use-styles.ts
 function useStyles19() {
   const { themeClass } = useTheme();
-  return useMemo20(() => {
+  return useMemo22(() => {
     const root24 = [themeClass, root14].filter(Boolean).join(" ");
     return {
       wrapper: wrapper2,
@@ -1606,7 +1688,7 @@ function useStyles19() {
 }
 
 // src/components/slider/index.tsx
-import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
 var Slider = forwardRef21(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;
@@ -1616,11 +1698,11 @@ var Slider = forwardRef21(function Slider2({ value = 0, onChange, min = 0, max =
     onChange?.(Number(e.target.value));
   };
   return /* @__PURE__ */ jsxs19("span", { className: wrapper4, children: [
-    label7 ? /* @__PURE__ */ jsx31("span", { className: labelClass, children: label7 }) : null,
+    label7 ? /* @__PURE__ */ jsx32("span", { className: labelClass, children: label7 }) : null,
     /* @__PURE__ */ jsxs19("span", { className: root24, children: [
-      /* @__PURE__ */ jsx31("span", { className: track4 }),
-      /* @__PURE__ */ jsx31("span", { className: range2, style: { width: `${clamped}%` } }),
-      /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx32("span", { className: track4 }),
+      /* @__PURE__ */ jsx32("span", { className: range2, style: { width: `${clamped}%` } }),
+      /* @__PURE__ */ jsx32(
         "input",
         {
           ref,
@@ -1635,7 +1717,7 @@ var Slider = forwardRef21(function Slider2({ value = 0, onChange, min = 0, max =
           ...rest
         }
       ),
-      /* @__PURE__ */ jsx31("span", { className: thumb2, style: { left: `${clamped}%` } })
+      /* @__PURE__ */ jsx32("span", { className: thumb2, style: { left: `${clamped}%` } })
     ] })
   ] });
 });
@@ -1644,7 +1726,7 @@ var Slider = forwardRef21(function Slider2({ value = 0, onChange, min = 0, max =
 import { forwardRef as forwardRef22, useState as useState7 } from "react";
 
 // src/components/accordion/use-styles.ts
-import { useMemo as useMemo21 } from "react";
+import { useMemo as useMemo23 } from "react";
 
 // src/components/accordion/use-styles.css.ts
 var chevron2 = "use-styles_chevron__1cjrdh93";
@@ -1657,7 +1739,7 @@ var root15 = "use-styles_root__1cjrdh90";
 // src/components/accordion/use-styles.ts
 function useStyles20({ className }) {
   const { themeClass } = useTheme();
-  return useMemo21(
+  return useMemo23(
     () => ({
       root: [themeClass, root15, className].filter(Boolean).join(" "),
       item,
@@ -1670,7 +1752,7 @@ function useStyles20({ className }) {
 }
 
 // src/components/accordion/index.tsx
-import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
 var Accordion = forwardRef22(function Accordion2({ items, multiple = false, defaultOpen = [], className }, ref) {
   const [open, setOpen] = useState7(defaultOpen);
   const { root: root24, item: item3, header: header3, chevronFor, panel: panel3 } = useStyles20({ className });
@@ -1681,7 +1763,7 @@ var Accordion = forwardRef22(function Accordion2({ items, multiple = false, defa
       return multiple ? [...current2, id] : [id];
     });
   };
-  return /* @__PURE__ */ jsx32("div", { ref, className: root24, children: items.map((it) => {
+  return /* @__PURE__ */ jsx33("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}`;
@@ -1697,11 +1779,11 @@ var Accordion = forwardRef22(function Accordion2({ items, multiple = false, defa
           onClick: () => toggle(it.id),
           children: [
             it.title,
-            /* @__PURE__ */ jsx32(ChevronDownIcon, { className: chevronFor(isOpen) })
+            /* @__PURE__ */ jsx33(ChevronDownIcon, { className: chevronFor(isOpen) })
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ jsx32("div", { id: panelId, className: panel3, role: "region", "aria-labelledby": headerId, children: it.content })
+      isOpen && /* @__PURE__ */ jsx33("div", { id: panelId, className: panel3, role: "region", "aria-labelledby": headerId, children: it.content })
     ] }, it.id);
   }) });
 });
@@ -1710,9 +1792,9 @@ var Accordion = forwardRef22(function Accordion2({ items, multiple = false, defa
 import { Fragment, forwardRef as forwardRef23 } from "react";
 
 // src/components/icons/chevron-right/index.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1726,13 +1808,13 @@ function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ jsx33("path", { d: "m9 18 6-6-6-6" })
+      children: /* @__PURE__ */ jsx34("path", { d: "m9 18 6-6-6-6" })
     }
   );
 }
 
 // src/components/breadcrumbs/use-styles.ts
-import { useMemo as useMemo22 } from "react";
+import { useMemo as useMemo24 } from "react";
 
 // src/components/breadcrumbs/use-styles.css.ts
 var crumb = "use-styles_crumb__7u0du61";
@@ -1743,7 +1825,7 @@ var separator = "use-styles_separator__7u0du63";
 // src/components/breadcrumbs/use-styles.ts
 function useStyles21({ className }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo22(
+  const root24 = useMemo24(
     () => [themeClass, root16, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -1751,15 +1833,15 @@ function useStyles21({ className }) {
 }
 
 // src/components/breadcrumbs/index.tsx
-import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
 var Breadcrumbs = forwardRef23(function Breadcrumbs2({ items, className, ...rest }, ref) {
   const { root: root24, crumb: crumb2, current: current2, separator: separator2 } = useStyles21({ className });
-  return /* @__PURE__ */ jsx34("nav", { ref, "aria-label": "Breadcrumb", className: root24, ...rest, children: items.map((item3, index) => {
+  return /* @__PURE__ */ jsx35("nav", { ref, "aria-label": "Breadcrumb", className: root24, ...rest, children: items.map((item3, index) => {
     const isLast = index === items.length - 1;
     const key = index;
     return /* @__PURE__ */ jsxs21(Fragment, { children: [
-      isLast ? /* @__PURE__ */ jsx34("span", { className: current2, "aria-current": "page", children: item3.label }) : item3.href ? /* @__PURE__ */ jsx34("a", { className: crumb2, href: item3.href, children: item3.label }) : /* @__PURE__ */ jsx34("span", { className: crumb2, children: item3.label }),
-      !isLast && /* @__PURE__ */ jsx34("span", { className: separator2, children: /* @__PURE__ */ jsx34(ChevronRightIcon, { size: 14 }) })
+      isLast ? /* @__PURE__ */ jsx35("span", { className: current2, "aria-current": "page", children: item3.label }) : item3.href ? /* @__PURE__ */ jsx35("a", { className: crumb2, href: item3.href, children: item3.label }) : /* @__PURE__ */ jsx35("span", { className: crumb2, children: item3.label }),
+      !isLast && /* @__PURE__ */ jsx35("span", { className: separator2, children: /* @__PURE__ */ jsx35(ChevronRightIcon, { size: 14 }) })
     ] }, key);
   }) });
 });
@@ -1768,9 +1850,9 @@ var Breadcrumbs = forwardRef23(function Breadcrumbs2({ items, className, ...rest
 import { forwardRef as forwardRef24 } from "react";
 
 // src/components/icons/chevron-left/index.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1784,13 +1866,13 @@ function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ jsx35("path", { d: "m15 18-6-6 6-6" })
+      children: /* @__PURE__ */ jsx36("path", { d: "m15 18-6-6 6-6" })
     }
   );
 }
 
 // src/components/pagination/use-styles.ts
-import { useMemo as useMemo23 } from "react";
+import { useMemo as useMemo25 } from "react";
 
 // src/components/pagination/use-styles.css.ts
 var ellipsis = "use-styles_ellipsis__1azgzoh3";
@@ -1802,7 +1884,7 @@ var root17 = "use-styles_root__1azgzoh0";
 // src/components/pagination/use-styles.ts
 function useStyles22() {
   const { themeClass } = useTheme();
-  return useMemo23(
+  return useMemo25(
     () => ({
       root: [themeClass, root17].filter(Boolean).join(" "),
       pageBtnFor: (active2) => [pageBtn, active2 && pageActive].filter(Boolean).join(" "),
@@ -1814,7 +1896,7 @@ function useStyles22() {
 }
 
 // src/components/pagination/index.tsx
-import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
 function buildItems(count, page, siblingCount) {
   const total = Math.max(1, count);
   const first = 1;
@@ -1835,7 +1917,7 @@ var Pagination = forwardRef24(function Pagination2({ count, page = 1, onChange,
   const items = buildItems(total, current2, siblingCount);
   const go = (n) => onChange?.(Math.min(Math.max(1, n), total));
   return /* @__PURE__ */ jsxs22("nav", { ref, className: root24, "aria-label": "Pagination", ...rest, children: [
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       "button",
       {
         type: "button",
@@ -1843,14 +1925,14 @@ var Pagination = forwardRef24(function Pagination2({ count, page = 1, onChange,
         "aria-label": "Previous page",
         disabled: current2 <= 1,
         onClick: () => go(current2 - 1),
-        children: /* @__PURE__ */ jsx36(ChevronLeftIcon, { size: 18 })
+        children: /* @__PURE__ */ jsx37(ChevronLeftIcon, { size: 18 })
       }
     ),
     items.map(
       (item3, index) => item3 === "ellipsis" ? (
         // biome-ignore lint/suspicious/noArrayIndexKey: ellipsis position is stable per render
-        /* @__PURE__ */ jsx36("span", { className: ellipsis2, children: "\u2026" }, `ellipsis-${index}`)
-      ) : /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37("span", { className: ellipsis2, children: "\u2026" }, `ellipsis-${index}`)
+      ) : /* @__PURE__ */ jsx37(
         "button",
         {
           type: "button",
@@ -1862,7 +1944,7 @@ var Pagination = forwardRef24(function Pagination2({ count, page = 1, onChange,
         item3
       )
     ),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       "button",
       {
         type: "button",
@@ -1870,7 +1952,7 @@ var Pagination = forwardRef24(function Pagination2({ count, page = 1, onChange,
         "aria-label": "Next page",
         disabled: current2 >= total,
         onClick: () => go(current2 + 1),
-        children: /* @__PURE__ */ jsx36(ChevronRightIcon, { size: 18 })
+        children: /* @__PURE__ */ jsx37(ChevronRightIcon, { size: 18 })
       }
     )
   ] });
@@ -1880,7 +1962,7 @@ var Pagination = forwardRef24(function Pagination2({ count, page = 1, onChange,
 import { Fragment as Fragment2, forwardRef as forwardRef25 } from "react";
 
 // src/components/stepper/use-styles.ts
-import { useMemo as useMemo24 } from "react";
+import { useMemo as useMemo26 } from "react";
 
 // src/components/stepper/use-styles.css.ts
 var connector = "use-styles_connector__79pt4e7";
@@ -1895,7 +1977,7 @@ var step = "use-styles_step__79pt4e1";
 // src/components/stepper/use-styles.ts
 function useStyles23({ className }) {
   const { themeClass } = useTheme();
-  return useMemo24(() => {
+  return useMemo26(() => {
     const root24 = [themeClass, root18, className].filter(Boolean).join(" ");
     const markerFor = (state) => [
       marker,
@@ -1908,20 +1990,20 @@ function useStyles23({ className }) {
 }
 
 // src/components/stepper/index.tsx
-import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
 var Stepper = forwardRef25(function Stepper2({ steps, active: active2 = 0, className, ...rest }, ref) {
   const { root: root24, step: step2, connector: connector2, markerFor, labelFor } = useStyles23({ className });
-  return /* @__PURE__ */ jsx37("div", { ref, className: root24, ...rest, children: steps.map((s, index) => {
+  return /* @__PURE__ */ jsx38("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__ */ jsxs23(Fragment2, { children: [
         /* @__PURE__ */ jsxs23("div", { className: step2, "aria-current": isActive ? "step" : void 0, children: [
-          /* @__PURE__ */ jsx37("span", { className: markerFor(state), children: state === "done" ? /* @__PURE__ */ jsx37(CheckIcon, { size: 14 }) : index + 1 }),
-          /* @__PURE__ */ jsx37("span", { className: labelFor(isActive), children: s.label })
+          /* @__PURE__ */ jsx38("span", { className: markerFor(state), children: state === "done" ? /* @__PURE__ */ jsx38(CheckIcon, { size: 14 }) : index + 1 }),
+          /* @__PURE__ */ jsx38("span", { className: labelFor(isActive), children: s.label })
         ] }),
-        index < steps.length - 1 && /* @__PURE__ */ jsx37("span", { "data-part": "connector", className: connector2 })
+        index < steps.length - 1 && /* @__PURE__ */ jsx38("span", { "data-part": "connector", className: connector2 })
       ] }, index)
     );
   }) });
@@ -1931,7 +2013,7 @@ var Stepper = forwardRef25(function Stepper2({ steps, active: active2 = 0, class
 import { forwardRef as forwardRef26, useId as useId4, useRef as useRef4 } from "react";
 
 // src/components/tabs/use-styles.ts
-import { useMemo as useMemo25 } from "react";
+import { useMemo as useMemo27 } from "react";
 
 // src/components/tabs/use-styles.css.ts
 var panel2 = "use-styles_panel__1l4m7t43";
@@ -1942,7 +2024,7 @@ var tabActive = "use-styles_tabActive__1l4m7t42";
 // src/components/tabs/use-styles.ts
 function useStyles24() {
   const { themeClass } = useTheme();
-  return useMemo25(() => {
+  return useMemo27(() => {
     const root24 = [themeClass, root19].filter(Boolean).join(" ");
     const tabClass = (active2) => [tab, active2 && tabActive].filter(Boolean).join(" ");
     return { root: root24, tab, tabClass, panel: panel2 };
@@ -1950,7 +2032,7 @@ function useStyles24() {
 }
 
 // src/components/tabs/index.tsx
-import { Fragment as Fragment3, jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
 var Tabs = forwardRef26(function Tabs2({ items, value, onChange, ...rest }, ref) {
   const { root: root24, tabClass, panel: panel3 } = useStyles24();
   const baseId = useId4();
@@ -1987,10 +2069,10 @@ var Tabs = forwardRef26(function Tabs2({ items, value, onChange, ...rest }, ref)
     }
   };
   return /* @__PURE__ */ jsxs24(Fragment3, { children: [
-    /* @__PURE__ */ jsx38("div", { ref, role: "tablist", className: root24, ...rest, children: items.map((item3, index) => {
+    /* @__PURE__ */ jsx39("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__ */ jsx38(
+      return /* @__PURE__ */ jsx39(
         "button",
         {
           ref: (el) => {
@@ -2010,7 +2092,7 @@ var Tabs = forwardRef26(function Tabs2({ items, value, onChange, ...rest }, ref)
         item3.value
       );
     }) }),
-    hasPanels && items.map((item3) => /* @__PURE__ */ jsx38(
+    hasPanels && items.map((item3) => /* @__PURE__ */ jsx39(
       "div",
       {
         role: "tabpanel",
@@ -2037,7 +2119,7 @@ import {
 } from "react";
 
 // src/components/menu/use-styles.ts
-import { useMemo as useMemo26 } from "react";
+import { useMemo as useMemo28 } from "react";
 
 // src/components/menu/use-styles.css.ts
 var danger = "use-styles_danger__1uyxaj3";
@@ -2048,7 +2130,7 @@ var wrapper3 = "use-styles_wrapper__1uyxaj0";
 // src/components/menu/use-styles.ts
 function useStyles25() {
   const { themeClass } = useTheme();
-  return useMemo26(
+  return useMemo28(
     () => ({
       wrapper: [themeClass, wrapper3].filter(Boolean).join(" "),
       list,
@@ -2060,13 +2142,14 @@ function useStyles25() {
 }
 
 // src/components/menu/index.tsx
-import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
 function assignRef(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var Menu = forwardRef27(function Menu2({ trigger: trigger2, items }, ref) {
+var Menu = forwardRef27(function Menu2({ trigger: trigger2, items, testId }, ref) {
   const { wrapper: wrapper4, list: list2, item: item3, dangerItem } = useStyles25();
+  const { testId: rootTestId, slot } = useTestId("menu", testId);
   const [open, setOpen] = useState8(false);
   const [alignEnd, setAlignEnd] = useState8(false);
   const rootRef = useRef5(null);
@@ -2164,34 +2247,45 @@ var Menu = forwardRef27(function Menu2({ trigger: trigger2, items }, ref) {
       setOpen((prev) => !prev);
     }
   });
-  return /* @__PURE__ */ jsxs25("div", { ref: setRootRef, className: wrapper4, children: [
-    clonedTrigger,
-    open && /* @__PURE__ */ jsx39(
-      "div",
-      {
-        ref: listRef,
-        role: "menu",
-        className: list2,
-        "data-align": alignEnd ? "end" : "start",
-        onKeyDown: onMenuKeyDown,
-        children: items.map((entry, index) => /* @__PURE__ */ jsx39(
-          "button",
+  return /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      ref: setRootRef,
+      className: wrapper4,
+      "data-testid": rootTestId,
+      "data-state": open ? "open" : "closed",
+      children: [
+        clonedTrigger,
+        open && /* @__PURE__ */ jsx40(
+          "div",
           {
-            type: "button",
-            role: "menuitem",
-            tabIndex: -1,
-            className: entry.danger ? dangerItem : item3,
-            onClick: () => {
-              entry.onClick?.();
-              setOpen(false);
-            },
-            children: entry.label
-          },
-          index
-        ))
-      }
-    )
-  ] });
+            ref: listRef,
+            role: "menu",
+            className: list2,
+            "data-align": alignEnd ? "end" : "start",
+            "data-testid": slot("list"),
+            onKeyDown: onMenuKeyDown,
+            children: items.map((entry, index) => /* @__PURE__ */ jsx40(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                tabIndex: -1,
+                className: entry.danger ? dangerItem : item3,
+                "data-testid": slot(`item-${index}`),
+                onClick: () => {
+                  entry.onClick?.();
+                  setOpen(false);
+                },
+                children: entry.label
+              },
+              index
+            ))
+          }
+        )
+      ]
+    }
+  );
 });
 
 // src/components/dialog/index.tsx
@@ -2204,7 +2298,7 @@ import {
 import { createPortal } from "react-dom";
 
 // src/components/dialog/use-styles.ts
-import { useMemo as useMemo27 } from "react";
+import { useMemo as useMemo29 } from "react";
 
 // src/components/dialog/use-styles.css.ts
 var actions = "use-styles_actions__5tstu83";
@@ -2215,7 +2309,7 @@ var surface = "use-styles_surface__5tstu81";
 // src/components/dialog/use-styles.ts
 function useStyles26() {
   const { themeClass } = useTheme();
-  return useMemo27(
+  return useMemo29(
     () => ({
       overlay: [themeClass, overlay].filter(Boolean).join(" "),
       surface,
@@ -2227,14 +2321,15 @@ function useStyles26() {
 }
 
 // src/components/dialog/index.tsx
-import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
 var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function assignRef2(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var Dialog = forwardRef28(function Dialog2({ open, onClose, title, actions: actions3, children }, ref) {
+var Dialog = forwardRef28(function Dialog2({ open, onClose, title, actions: actions3, children, testId }, ref) {
   const { overlay: overlay2, surface: surface2, body: body3, actions: actionsClass } = useStyles26();
+  const { testId: rootTestId, slot } = useTestId("dialog", testId);
   const surfaceRef = useRef6(null);
   const setSurfaceRef = (node) => {
     surfaceRef.current = node;
@@ -2295,7 +2390,7 @@ var Dialog = forwardRef28(function Dialog2({ open, onClose, title, actions: acti
   };
   return createPortal(
     // biome-ignore lint/a11y/useKeyWithClickEvents: ESC handled by a document keydown listener.
-    /* @__PURE__ */ jsx40("div", { className: overlay2, "data-testid": "dialog-overlay", onClick: onClose, children: /* @__PURE__ */ jsxs26(
+    /* @__PURE__ */ jsx41("div", { className: overlay2, "data-testid": slot("overlay"), onClick: onClose, children: /* @__PURE__ */ jsxs26(
       "div",
       {
         ref: setSurfaceRef,
@@ -2304,12 +2399,13 @@ var Dialog = forwardRef28(function Dialog2({ open, onClose, title, actions: acti
         "aria-modal": "true",
         "aria-labelledby": titleId,
         tabIndex: -1,
+        "data-testid": rootTestId,
         onClick: stop,
         onKeyDown: onSurfaceKeyDown,
         children: [
-          title != null && /* @__PURE__ */ jsx40(Typography, { variant: "h3", as: "h2", id: titleId, children: title }),
-          children != null && /* @__PURE__ */ jsx40("div", { className: body3, children: /* @__PURE__ */ jsx40(Typography, { variant: "body", color: "fg2", children }) }),
-          actions3 != null && /* @__PURE__ */ jsx40("div", { className: actionsClass, children: actions3 })
+          title != null && /* @__PURE__ */ jsx41(Typography, { variant: "h3", as: "h2", id: titleId, children: title }),
+          children != null && /* @__PURE__ */ jsx41("div", { className: body3, children: /* @__PURE__ */ jsx41(Typography, { variant: "body", color: "fg2", children }) }),
+          actions3 != null && /* @__PURE__ */ jsx41("div", { className: actionsClass, children: actions3 })
         ]
       }
     ) }),
@@ -2322,7 +2418,7 @@ import { forwardRef as forwardRef29 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/snackbar/use-styles.ts
-import { useMemo as useMemo28 } from "react";
+import { useMemo as useMemo30 } from "react";
 
 // src/components/snackbar/use-styles.css.ts
 var closeBtn = "use-styles_closeBtn__ihzsep2";
@@ -2332,7 +2428,7 @@ var root20 = "use-styles_root__ihzsep0 surfaces_inkySurface__1qa7atn2";
 // src/components/snackbar/use-styles.ts
 function useStyles27() {
   const { themeClass } = useTheme();
-  return useMemo28(
+  return useMemo30(
     () => ({
       root: [themeClass, root20].filter(Boolean).join(" "),
       message,
@@ -2343,15 +2439,15 @@ function useStyles27() {
 }
 
 // src/components/snackbar/index.tsx
-import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
 var Snackbar = forwardRef29(function Snackbar2({ open, message: message2, action, onClose }, ref) {
   const { root: root24, message: messageClass, closeBtn: closeBtn2 } = useStyles27();
   if (!open || typeof document === "undefined") return null;
   return createPortal2(
     /* @__PURE__ */ jsxs27("div", { ref, role: "status", className: root24, children: [
-      /* @__PURE__ */ jsx41("span", { className: messageClass, children: message2 }),
+      /* @__PURE__ */ jsx42("span", { className: messageClass, children: message2 }),
       action,
-      onClose && /* @__PURE__ */ jsx41("button", { type: "button", "aria-label": "Close", className: closeBtn2, onClick: onClose, children: /* @__PURE__ */ jsx41(XIcon, { size: 18 }) })
+      onClose && /* @__PURE__ */ jsx42("button", { type: "button", "aria-label": "Close", className: closeBtn2, onClick: onClose, children: /* @__PURE__ */ jsx42(XIcon, { size: 18 }) })
     ] }),
     document.body
   );
@@ -2361,7 +2457,7 @@ var Snackbar = forwardRef29(function Snackbar2({ open, message: message2, action
 import { forwardRef as forwardRef30 } from "react";
 
 // src/components/table/use-styles.ts
-import { useMemo as useMemo29 } from "react";
+import { useMemo as useMemo31 } from "react";
 
 // src/components/table/use-styles.css.ts
 var alignRight = "use-styles_alignRight__1n2cz6i3";
@@ -2373,7 +2469,7 @@ var th = "use-styles_th__1n2cz6i1";
 // src/components/table/use-styles.ts
 function useStyles28({ className }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo29(
+  const root24 = useMemo31(
     () => [themeClass, root21, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -2387,15 +2483,15 @@ function useStyles28({ className }) {
 }
 
 // src/components/table/index.tsx
-import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
 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__ */ jsxs28("table", { ref, className: root24, ...rest, children: [
-    caption2 != null && /* @__PURE__ */ jsx42("caption", { className: captionClass, children: caption2 }),
-    /* @__PURE__ */ jsx42("thead", { children: /* @__PURE__ */ jsx42("tr", { children: columns.map((column) => /* @__PURE__ */ jsx42("th", { scope: "col", className: headClass(column), children: column.header }, column.key)) }) }),
-    /* @__PURE__ */ jsx42("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsx42("tr", { children: columns.map((column) => /* @__PURE__ */ jsx42("td", { className: cellClass(column), children: column.render ? column.render(row) : String(row[column.key]) }, column.key)) }, getRowKey ? getRowKey(row, index) : index)) })
+    caption2 != null && /* @__PURE__ */ jsx43("caption", { className: captionClass, children: caption2 }),
+    /* @__PURE__ */ jsx43("thead", { children: /* @__PURE__ */ jsx43("tr", { children: columns.map((column) => /* @__PURE__ */ jsx43("th", { scope: "col", className: headClass(column), children: column.header }, column.key)) }) }),
+    /* @__PURE__ */ jsx43("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsx43("tr", { children: columns.map((column) => /* @__PURE__ */ jsx43("td", { className: cellClass(column), children: column.render ? column.render(row) : String(row[column.key]) }, column.key)) }, getRowKey ? getRowKey(row, index) : index)) })
   ] });
 }
 var TableForwarded = forwardRef30(TableInner);
@@ -2406,7 +2502,7 @@ var Table = TableForwarded;
 import { forwardRef as forwardRef31 } from "react";
 
 // src/components/app-bar/use-styles.ts
-import { useMemo as useMemo30 } from "react";
+import { useMemo as useMemo32 } from "react";
 
 // src/components/app-bar/use-styles.css.ts
 var actions2 = "use-styles_actions__1h133nh2";
@@ -2416,7 +2512,7 @@ var root22 = "use-styles_root__1h133nh0";
 // src/components/app-bar/use-styles.ts
 function useStyles29({ className }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo30(
+  const root24 = useMemo32(
     () => [themeClass, root22, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -2424,13 +2520,13 @@ function useStyles29({ className }) {
 }
 
 // src/components/app-bar/index.tsx
-import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
 var AppBar = forwardRef31(function AppBar2({ brand: brand2, actions: actions3, className, children, ...rest }, ref) {
   const styles = useStyles29({ className });
   return /* @__PURE__ */ jsxs29("header", { ref, className: styles.root, ...rest, children: [
-    brand2 !== void 0 ? /* @__PURE__ */ jsx43("div", { className: styles.brand, children: brand2 }) : null,
+    brand2 !== void 0 ? /* @__PURE__ */ jsx44("div", { className: styles.brand, children: brand2 }) : null,
     children,
-    actions3 !== void 0 ? /* @__PURE__ */ jsx43("div", { className: styles.actions, children: actions3 }) : null
+    actions3 !== void 0 ? /* @__PURE__ */ jsx44("div", { className: styles.actions, children: actions3 }) : null
   ] });
 });
 
@@ -2438,7 +2534,7 @@ var AppBar = forwardRef31(function AppBar2({ brand: brand2, actions: actions3, c
 import { forwardRef as forwardRef32 } from "react";
 
 // src/components/list-item/use-styles.ts
-import { useMemo as useMemo31 } from "react";
+import { useMemo as useMemo33 } from "react";
 
 // src/components/list-item/use-styles.css.ts
 var content2 = "use-styles_content__kbreq13";
@@ -2453,7 +2549,7 @@ function useStyles30({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = useMemo31(
+  const root24 = useMemo33(
     () => [themeClass, root23, selected3 && selected2, className].filter(Boolean).join(" "),
     [themeClass, selected3, className]
   );
@@ -2461,20 +2557,20 @@ function useStyles30({
 }
 
 // src/components/list-item/index.tsx
-import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
 var ListItem = forwardRef32(function ListItem2({ leading: leading2, trailing: trailing2, selected: selected3, className, children, ...rest }, ref) {
   const styles = useStyles30({ selected: selected3, className });
   return /* @__PURE__ */ jsxs30("div", { ref, className: styles.root, ...rest, children: [
-    leading2 != null && /* @__PURE__ */ jsx44("span", { className: styles.leading, children: leading2 }),
-    /* @__PURE__ */ jsx44("span", { className: styles.content, children }),
-    trailing2 != null && /* @__PURE__ */ jsx44("span", { className: styles.trailing, children: trailing2 })
+    leading2 != null && /* @__PURE__ */ jsx45("span", { className: styles.leading, children: leading2 }),
+    /* @__PURE__ */ jsx45("span", { className: styles.content, children }),
+    trailing2 != null && /* @__PURE__ */ jsx45("span", { className: styles.trailing, children: trailing2 })
   ] });
 });
 
 // src/components/icons/chevron-up/index.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function ChevronUpIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2488,13 +2584,13 @@ function ChevronUpIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ jsx45("path", { d: "m18 15-6-6-6 6" })
+      children: /* @__PURE__ */ jsx46("path", { d: "m18 15-6-6-6 6" })
     }
   );
 }
 
 // src/components/icons/search/index.tsx
-import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
 function SearchIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs31(
     "svg",
@@ -2511,15 +2607,15 @@ function SearchIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx46("circle", { cx: "11", cy: "11", r: "8" }),
-        /* @__PURE__ */ jsx46("path", { d: "m21 21-4.3-4.3" })
+        /* @__PURE__ */ jsx47("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsx47("path", { d: "m21 21-4.3-4.3" })
       ]
     }
   );
 }
 
 // src/components/icons/plus/index.tsx
-import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
 function PlusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs32(
     "svg",
@@ -2536,17 +2632,17 @@ function PlusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx47("path", { d: "M5 12h14" }),
-        /* @__PURE__ */ jsx47("path", { d: "M12 5v14" })
+        /* @__PURE__ */ jsx48("path", { d: "M5 12h14" }),
+        /* @__PURE__ */ jsx48("path", { d: "M12 5v14" })
       ]
     }
   );
 }
 
 // src/components/icons/minus/index.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 function MinusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2560,13 +2656,13 @@ function MinusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ jsx48("path", { d: "M5 12h14" })
+      children: /* @__PURE__ */ jsx49("path", { d: "M5 12h14" })
     }
   );
 }
 
 // src/components/icons/more-horizontal/index.tsx
-import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
 function MoreHorizontalIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs33(
     "svg",
@@ -2583,9 +2679,9 @@ function MoreHorizontalIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx49("circle", { cx: "12", cy: "12", r: "1" }),
-        /* @__PURE__ */ jsx49("circle", { cx: "19", cy: "12", r: "1" }),
-        /* @__PURE__ */ jsx49("circle", { cx: "5", cy: "12", r: "1" })
+        /* @__PURE__ */ jsx50("circle", { cx: "12", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx50("circle", { cx: "19", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx50("circle", { cx: "5", cy: "12", r: "1" })
       ]
     }
   );
@@ -2633,6 +2729,7 @@ export {
   Switch,
   Table,
   Tabs,
+  TestIdProvider,
   TextField,
   ThemeProvider,
   Tooltip,
@@ -2646,6 +2743,7 @@ export {
   vars as theme,
   themes,
   usePrevious,
+  useTestId,
   useTheme,
   useToggle
 };