@octavius2929-personal/design-system 0.7.1 → 0.8.1

package/dist/index.js

@@ -3,7 +3,7 @@ var colorVars = { bg1: "var(--bg1__e3grur28)", bg2: "var(--bg2__e3grur29)", bg3:
 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 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: { none: "var(--space-none__e3grur18)", xs: "var(--space-xs__e3grur19)", sm: "var(--space-sm__e3grur1a)", md: "var(--space-md__e3grur1b)", lg: "var(--space-lg__e3grur1c)", xl: "var(--space-xl__e3grur1d)", "2xl": "var(--space-2xl__e3grur1e)", "3xl": "var(--space-3xl__e3grur1f)", "4xl": "var(--space-4xl__e3grur1g)", "5xl": "var(--space-5xl__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 };
+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
 import { useEffect, useRef } from "react";
@@ -23,12 +23,39 @@ function useToggle(initial = false) {
   return [on, toggle, setOn];
 }
 
+// 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" } } } } });
+
+// src/components/container/use-styles.ts
+function useStyles(props) {
+  const styleProps = {};
+  const rest = {};
+  for (const key of Object.keys(props)) {
+    const value = props[key];
+    if (sprinkles.properties.has(key)) {
+      styleProps[key] = value;
+    } else {
+      rest[key] = value;
+    }
+  }
+  return { className: sprinkles(styleProps), rest };
+}
+
+// src/components/container/index.tsx
+import { jsx } from "react/jsx-runtime";
+function Container({ as, ...props }) {
+  const Component = as ?? "div";
+  const { className, rest } = useStyles(props);
+  return /* @__PURE__ */ jsx(Component, { ...rest, className });
+}
+
 // src/components/typography/use-styles.ts
 import { useMemo as useMemo2 } from "react";
 
 // src/theme/context/theme-context.tsx
 import { createContext, useContext, useEffect as useEffect2, useMemo, useState as useState2 } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var noop = () => {
 };
 var DEFAULT_VALUE = {
@@ -111,7 +138,7 @@ function ThemeProvider({
     }),
     [schema, mode, preference]
   );
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx2(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
   return useContext(ThemeContext) ?? DEFAULT_VALUE;
@@ -126,7 +153,7 @@ var base = "use-styles_base__d74jf60";
 var color = { fg1: "use-styles_color_fg1__d74jf61", fg2: "use-styles_color_fg2__d74jf62", fg3: "use-styles_color_fg3__d74jf63", accent: "use-styles_color_accent__d74jf64", danger: "use-styles_color_danger__d74jf65", ok: "use-styles_color_ok__d74jf66", warn: "use-styles_color_warn__d74jf67", info: "use-styles_color_info__d74jf68" };
 
 // src/components/typography/use-styles.ts
-function useStyles({
+function useStyles2({
   variant: variant2,
   color: color2,
   align: align2
@@ -146,7 +173,7 @@ function useStyles({
 }
 
 // src/components/typography/index.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var defaultElement = {
   display: "h1",
   h1: "h1",
@@ -169,8 +196,8 @@ function Typography({
   ...rest
 }) {
   const Component = as ?? defaultElement[variant2];
-  const { text: text2 } = useStyles({ variant: variant2, color: color2, align: align2 });
-  return /* @__PURE__ */ jsx2(Component, { ...rest, className: text2 });
+  const { text: text2 } = useStyles2({ variant: variant2, color: color2, align: align2 });
+  return /* @__PURE__ */ jsx3(Component, { ...rest, className: text2 });
 }
 
 // src/components/button/use-styles.ts
@@ -186,7 +213,7 @@ var tone = { filledInk: "use-styles_tone_filledInk__1pbtill5", filledAccent: "us
 function toneKey(variant2, tone4) {
   return `${variant2}${tone4 === "ink" ? "Ink" : "Accent"}`;
 }
-function useStyles2({
+function useStyles3({
   variant: variant2 = "filled",
   tone: tone4 = "ink",
   size: size3 = "md",
@@ -209,7 +236,7 @@ function useStyles2({
 }
 
 // src/components/button/index.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var ICON_SIZE = { sm: 14, md: 16, lg: 18 };
 function Button({
   variant: variant2,
@@ -222,12 +249,12 @@ function Button({
   children,
   ...rest
 }) {
-  const { container } = useStyles2({ variant: variant2, tone: tone4, size: size3, full: full2, className });
+  const { container } = useStyles3({ variant: variant2, tone: tone4, size: size3, full: full2, className });
   const iconSize = ICON_SIZE[size3];
   return /* @__PURE__ */ jsxs("button", { className: container, ...rest, children: [
-    StartIcon && /* @__PURE__ */ jsx3(StartIcon, { size: iconSize }),
+    StartIcon && /* @__PURE__ */ jsx4(StartIcon, { size: iconSize }),
     children,
-    EndIcon && /* @__PURE__ */ jsx3(EndIcon, { size: iconSize })
+    EndIcon && /* @__PURE__ */ jsx4(EndIcon, { size: iconSize })
   ] });
 }
 
@@ -243,7 +270,7 @@ var root2 = "use-styles_root__1n7v7yj0";
 var vertical = "use-styles_vertical__1n7v7yj2";
 
 // src/components/divider/use-styles.ts
-function useStyles3({ vertical: vertical2, hasLabel }) {
+function useStyles4({ vertical: vertical2, hasLabel }) {
   const { themeClass } = useTheme();
   const root24 = useMemo4(
     () => [
@@ -257,18 +284,18 @@ function useStyles3({ vertical: vertical2, hasLabel }) {
 }
 
 // src/components/divider/index.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function Divider({ vertical: vertical2, label: label7, ...rest }) {
   const hasLabel = label7 != null;
-  const { root: root24, line: line2, label: labelClass } = useStyles3({ vertical: vertical2, hasLabel });
+  const { root: root24, line: line2, label: labelClass } = useStyles4({ vertical: vertical2, hasLabel });
   if (hasLabel) {
     return /* @__PURE__ */ jsxs2("div", { role: "separator", className: root24, ...rest, children: [
-      /* @__PURE__ */ jsx4("span", { className: line2 }),
-      /* @__PURE__ */ jsx4("span", { className: labelClass, children: label7 }),
-      /* @__PURE__ */ jsx4("span", { className: line2 })
+      /* @__PURE__ */ jsx5("span", { className: line2 }),
+      /* @__PURE__ */ jsx5("span", { className: labelClass, children: label7 }),
+      /* @__PURE__ */ jsx5("span", { className: line2 })
     ] });
   }
-  return /* @__PURE__ */ jsx4("div", { role: "separator", className: root24, ...rest });
+  return /* @__PURE__ */ jsx5("div", { role: "separator", className: root24, ...rest });
 }
 
 // src/components/avatar/use-styles.ts
@@ -280,7 +307,7 @@ var size2 = { sm: "use-styles_size_sm__1mn1rmu1", md: "use-styles_size_md__1mn1r
 var variant = { "default": "use-styles_variant_default__1mn1rmu4", filled: "use-styles_variant_filled__1mn1rmu5" };
 
 // src/components/avatar/use-styles.ts
-function useStyles4({
+function useStyles5({
   size: size3 = "md",
   filled,
   className
@@ -300,10 +327,10 @@ function useStyles4({
 }
 
 // src/components/avatar/index.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function Avatar({ size: size3, filled, className, children, ...rest }) {
-  const { root: root24 } = useStyles4({ size: size3, filled, className });
-  return /* @__PURE__ */ jsx5("span", { className: root24, ...rest, children });
+  const { root: root24 } = useStyles5({ size: size3, filled, className });
+  return /* @__PURE__ */ jsx6("span", { className: root24, ...rest, children });
 }
 
 // src/components/badge/use-styles.ts
@@ -315,7 +342,7 @@ var root4 = "use-styles_root__1wpei6p0";
 var tone2 = { ink: "use-styles_tone_ink__1wpei6p2", accent: "use-styles_tone_accent__1wpei6p3" };
 
 // src/components/badge/use-styles.ts
-function useStyles5({
+function useStyles6({
   tone: tone4 = "ink",
   className
 }) {
@@ -329,12 +356,12 @@ function useStyles5({
 }
 
 // src/components/badge/index.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function Badge({ count, tone: tone4, className, children, ...rest }) {
-  const { root: root24, dot: dot3 } = useStyles5({ tone: tone4, className });
+  const { root: root24, dot: dot3 } = useStyles6({ tone: tone4, className });
   return /* @__PURE__ */ jsxs3("span", { className: root24, ...rest, children: [
     children,
-    count != null && /* @__PURE__ */ jsx6("span", { className: dot3, children: count })
+    count != null && /* @__PURE__ */ jsx7("span", { className: dot3, children: count })
   ] });
 }
 
@@ -348,7 +375,7 @@ var spinner = "use-styles_spinner__kbop7v5";
 var track = "use-styles_track__kbop7v2";
 
 // src/components/progress/use-styles.ts
-function useStyles6({
+function useStyles7({
   variant: variant2 = "linear",
   value,
   className
@@ -369,7 +396,7 @@ function useStyles6({
 }
 
 // src/components/progress/index.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function Progress({
   variant: variant2 = "linear",
   value,
@@ -377,10 +404,10 @@ function Progress({
   className,
   ...rest
 }) {
-  const { track: track4, bar: bar2, spinner: spinner2 } = useStyles6({ variant: variant2, value, className });
+  const { track: track4, bar: bar2, spinner: spinner2 } = useStyles7({ variant: variant2, value, className });
   const indeterminate2 = value === void 0;
   if (variant2 === "circular") {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       "span",
       {
         className: spinner2,
@@ -393,7 +420,7 @@ function Progress({
       }
     );
   }
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       className: track4,
@@ -402,13 +429,13 @@ function Progress({
       "aria-valuemin": indeterminate2 ? void 0 : 0,
       "aria-valuemax": indeterminate2 ? void 0 : 100,
       ...rest,
-      children: /* @__PURE__ */ jsx7("div", { className: bar2, style: indeterminate2 ? void 0 : { width: `${value}%` } })
+      children: /* @__PURE__ */ jsx8("div", { className: bar2, style: indeterminate2 ? void 0 : { width: `${value}%` } })
     }
   );
 }
 
 // src/components/icons/x/index.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 function XIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs4(
     "svg",
@@ -425,8 +452,8 @@ function XIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx8("path", { d: "M18 6 6 18" }),
-        /* @__PURE__ */ jsx8("path", { d: "m6 6 12 12" })
+        /* @__PURE__ */ jsx9("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx9("path", { d: "m6 6 12 12" })
       ]
     }
   );
@@ -443,7 +470,7 @@ var selected = "use-styles_selected__1axilf43";
 var tone3 = { ink: "use-styles_tone_ink__1axilf41", accent: "use-styles_tone_accent__1axilf42" };
 
 // src/components/chip/use-styles.ts
-function useStyles7({
+function useStyles8({
   selected: selected3,
   tone: tone4 = "ink",
   clickable: clickable2
@@ -462,24 +489,24 @@ function useStyles7({
 }
 
 // src/components/chip/index.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 function Chip({ selected: selected3, tone: tone4, onDelete, onClick, children, ...rest }) {
   const clickable2 = Boolean(onClick);
-  const { root: root24, deleteBtn: deleteBtn2 } = useStyles7({ selected: selected3, tone: tone4, clickable: clickable2 });
+  const { root: root24, deleteBtn: deleteBtn2 } = useStyles8({ selected: selected3, tone: tone4, clickable: clickable2 });
   const handleDelete = (event) => {
     event.stopPropagation();
     onDelete?.();
   };
   return /* @__PURE__ */ jsxs5("span", { className: root24, onClick, ...rest, children: [
     children,
-    onDelete && /* @__PURE__ */ jsx9("button", { type: "button", className: deleteBtn2, "aria-label": "Remove", onClick: handleDelete, children: /* @__PURE__ */ jsx9(XIcon, { size: 13 }) })
+    onDelete && /* @__PURE__ */ jsx10("button", { type: "button", className: deleteBtn2, "aria-label": "Remove", onClick: handleDelete, children: /* @__PURE__ */ jsx10(XIcon, { size: 13 }) })
   ] });
 }
 
 // src/components/icons/check/index.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -493,7 +520,7 @@ function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ jsx10("path", { d: "M20 6 9 17l-5-5" })
+      children: /* @__PURE__ */ jsx11("path", { d: "M20 6 9 17l-5-5" })
     }
   );
 }
@@ -506,11 +533,11 @@ var box = "use-styles_box__9zoga91";
 var boxChecked = "use-styles_boxChecked__9zoga92";
 var check = "use-styles_check__9zoga93";
 var disabled = "use-styles_disabled__9zoga94";
-var input = "surfaces_srOnly__6hs0fg0";
+var input = "surfaces_srOnly__1qa7atn0";
 var root6 = "use-styles_root__9zoga90";
 
 // src/components/checkbox/use-styles.ts
-function useStyles8({ checked, disabled: disabled3 }) {
+function useStyles9({ checked, disabled: disabled3 }) {
   const { themeClass } = useTheme();
   const root24 = useMemo9(
     () => [themeClass, root6, disabled3 && disabled].filter(Boolean).join(" "),
@@ -524,7 +551,7 @@ function useStyles8({ checked, disabled: disabled3 }) {
 }
 
 // src/components/checkbox/index.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 function Checkbox({
   checked = false,
   onChange,
@@ -532,13 +559,13 @@ function Checkbox({
   disabled: disabled3 = false,
   id
 }) {
-  const { root: root24, input: input6, box: box2, check: check2 } = useStyles8({ checked, disabled: disabled3 });
+  const { root: root24, input: input6, box: box2, check: check2 } = useStyles9({ checked, disabled: disabled3 });
   const handleChange = (e) => {
     if (disabled3) return;
     onChange?.(e.target.checked);
   };
   return /* @__PURE__ */ jsxs6("label", { className: root24, children: [
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(
       "input",
       {
         type: "checkbox",
@@ -549,7 +576,7 @@ function Checkbox({
         onChange: handleChange
       }
     ),
-    /* @__PURE__ */ jsx11("span", { className: box2, children: checked && /* @__PURE__ */ jsx11(CheckIcon, { size: 12, className: check2 }) }),
+    /* @__PURE__ */ jsx12("span", { className: box2, children: checked && /* @__PURE__ */ jsx12(CheckIcon, { size: 12, className: check2 }) }),
     label7
   ] });
 }
@@ -561,12 +588,12 @@ import { useMemo as useMemo10 } from "react";
 var circle = "use-styles_circle__vy61b42";
 var disabled2 = "use-styles_disabled__vy61b41";
 var dot2 = "use-styles_dot__vy61b43";
-var input2 = "surfaces_srOnly__6hs0fg0";
+var input2 = "surfaces_srOnly__1qa7atn0";
 var label2 = "use-styles_label__vy61b44";
 var root7 = "use-styles_root__vy61b40";
 
 // src/components/radio/use-styles.ts
-function useStyles9({
+function useStyles10({
   disabled: disabled3,
   className
 }) {
@@ -585,11 +612,11 @@ function useStyles9({
 }
 
 // src/components/radio/index.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function Radio({ checked, onChange, label: label7, name, value, disabled: disabled3 }) {
-  const { root: root24, input: input6, circle: circle2, dot: dot3, label: labelClass } = useStyles9({ disabled: disabled3 });
+  const { root: root24, input: input6, circle: circle2, dot: dot3, label: labelClass } = useStyles10({ disabled: disabled3 });
   return /* @__PURE__ */ jsxs7("label", { className: root24, children: [
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       "input",
       {
         className: input6,
@@ -601,8 +628,8 @@ function Radio({ checked, onChange, label: label7, name, value, disabled: disabl
         onChange
       }
     ),
-    /* @__PURE__ */ jsx12("span", { className: circle2, children: checked && /* @__PURE__ */ jsx12("span", { className: dot3 }) }),
-    label7 != null && /* @__PURE__ */ jsx12("span", { className: labelClass, children: label7 })
+    /* @__PURE__ */ jsx13("span", { className: circle2, children: checked && /* @__PURE__ */ jsx13("span", { className: dot3 }) }),
+    label7 != null && /* @__PURE__ */ jsx13("span", { className: labelClass, children: label7 })
   ] });
 }
 
@@ -610,7 +637,7 @@ function Radio({ checked, onChange, label: label7, name, value, disabled: disabl
 import { useMemo as useMemo11 } from "react";
 
 // src/components/switch/use-styles.css.ts
-var input3 = "surfaces_srOnly__6hs0fg0";
+var input3 = "surfaces_srOnly__1qa7atn0";
 var knob = "use-styles_knob__1r6kem73";
 var knobChecked = "use-styles_knobChecked__1r6kem74";
 var label3 = "use-styles_label__1r6kem75";
@@ -619,7 +646,7 @@ var track2 = "use-styles_track__1r6kem71";
 var trackChecked = "use-styles_trackChecked__1r6kem72";
 
 // src/components/switch/use-styles.ts
-function useStyles10({ checked }) {
+function useStyles11({ checked }) {
   const { themeClass } = useTheme();
   return useMemo11(
     () => ({
@@ -634,11 +661,11 @@ function useStyles10({ checked }) {
 }
 
 // src/components/switch/index.tsx
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function Switch({ checked = false, onChange, label: label7, disabled: disabled3 }) {
-  const { root: root24, input: input6, track: track4, knob: knob2, label: labelClass } = useStyles10({ checked });
+  const { root: root24, input: input6, track: track4, knob: knob2, label: labelClass } = useStyles11({ checked });
   return /* @__PURE__ */ jsxs8("label", { className: root24, children: [
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       "input",
       {
         type: "checkbox",
@@ -653,8 +680,8 @@ function Switch({ checked = false, onChange, label: label7, disabled: disabled3
         }
       }
     ),
-    /* @__PURE__ */ jsx13("span", { className: track4, children: /* @__PURE__ */ jsx13("span", { className: knob2 }) }),
-    label7 != null && /* @__PURE__ */ jsx13("span", { className: labelClass, children: label7 })
+    /* @__PURE__ */ jsx14("span", { className: track4, children: /* @__PURE__ */ jsx14("span", { className: knob2 }) }),
+    label7 != null && /* @__PURE__ */ jsx14("span", { className: labelClass, children: label7 })
   ] });
 }
 
@@ -679,7 +706,7 @@ var startIconSlot = "use-styles_startIconSlot__1c3cgda";
 var trailingSlot = "use-styles_trailingSlot__1c3cgdb";
 
 // src/components/base-field/use-styles.ts
-function useStyles11({ error, hasStartIcon, hasTrailing, className }) {
+function useStyles12({ error, hasStartIcon, hasTrailing, className }) {
   const { themeClass } = useTheme();
   return useMemo12(() => {
     const root24 = [themeClass, root9].filter(Boolean).join(" ");
@@ -705,7 +732,7 @@ function useStyles11({ error, hasStartIcon, hasTrailing, className }) {
 }
 
 // src/components/base-field/index.tsx
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 function BaseField({
   label: label7,
   help,
@@ -719,7 +746,7 @@ function BaseField({
   const autoId = useId();
   const controlId = id ?? autoId;
   const helpId = help != null ? `${controlId}-help` : void 0;
-  const classes = useStyles11({
+  const classes = useStyles12({
     error,
     hasStartIcon: StartIcon != null,
     hasTrailing: trailing2 != null,
@@ -732,18 +759,18 @@ function BaseField({
     "aria-invalid": error ? true : void 0
   };
   return /* @__PURE__ */ jsxs9("div", { className: classes.root, children: [
-    label7 != null && /* @__PURE__ */ jsx14("label", { htmlFor: controlId, className: classes.labelText, children: label7 }),
+    label7 != null && /* @__PURE__ */ jsx15("label", { htmlFor: controlId, className: classes.labelText, children: label7 }),
     /* @__PURE__ */ jsxs9("div", { className: classes.field, children: [
-      StartIcon != null && /* @__PURE__ */ jsx14("span", { className: classes.startIconSlot, children: /* @__PURE__ */ jsx14(StartIcon, { size: 18 }) }),
+      StartIcon != null && /* @__PURE__ */ jsx15("span", { className: classes.startIconSlot, children: /* @__PURE__ */ jsx15(StartIcon, { size: 18 }) }),
       children(control),
-      trailing2 != null && /* @__PURE__ */ jsx14("span", { className: classes.trailingSlot, children: trailing2 })
+      trailing2 != null && /* @__PURE__ */ jsx15("span", { className: classes.trailingSlot, children: trailing2 })
     ] }),
-    help != null && /* @__PURE__ */ jsx14("span", { id: helpId, className: classes.helpText, children: help })
+    help != null && /* @__PURE__ */ jsx15("span", { id: helpId, className: classes.helpText, children: help })
   ] });
 }
 
 // src/components/text-field/index.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function TextField({
   label: label7,
   help,
@@ -757,7 +784,7 @@ function TextField({
   id,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     BaseField,
     {
       label: label7,
@@ -766,7 +793,7 @@ function TextField({
       startIcon,
       id,
       className,
-      children: (control) => multiline ? /* @__PURE__ */ jsx15(
+      children: (control) => multiline ? /* @__PURE__ */ jsx16(
         "textarea",
         {
           ...rest,
@@ -774,7 +801,7 @@ function TextField({
           rows: rows ?? 4,
           onChange: (e) => onChange?.(e.target.value)
         }
-      ) : /* @__PURE__ */ jsx15(
+      ) : /* @__PURE__ */ jsx16(
         "input",
         {
           ...rest,
@@ -791,7 +818,7 @@ function TextField({
 import { useState as useState3 } from "react";
 
 // src/components/icons/eye/index.tsx
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 function EyeIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs10(
     "svg",
@@ -808,15 +835,15 @@ function EyeIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx16("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
-        /* @__PURE__ */ jsx16("circle", { cx: "12", cy: "12", r: "3" })
+        /* @__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" })
       ]
     }
   );
 }
 
 // src/components/icons/eye-off/index.tsx
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs11(
     "svg",
@@ -833,10 +860,10 @@ function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx17("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
-        /* @__PURE__ */ jsx17("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__ */ jsx17("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__ */ jsx17("path", { d: "m2 2 20 20" })
+        /* @__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" })
       ]
     }
   );
@@ -849,12 +876,12 @@ import { useMemo as useMemo13 } from "react";
 var revealButton = "use-styles_revealButton__rsu9d50";
 
 // src/components/password-field/use-styles.ts
-function useStyles12() {
+function useStyles13() {
   return useMemo13(() => ({ revealButton }), []);
 }
 
 // src/components/password-field/index.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function PasswordField({
   label: label7,
   help,
@@ -866,14 +893,14 @@ function PasswordField({
   ...rest
 }) {
   const [reveal, setReveal] = useState3(false);
-  const classes = useStyles12();
+  const classes = useStyles13();
   const handleChange = (e) => {
     onChange?.(e.target.value);
   };
   const handleToggleMouseDown = (e) => {
     e.preventDefault();
   };
-  const toggleButton = /* @__PURE__ */ jsx18(
+  const toggleButton = /* @__PURE__ */ jsx19(
     "button",
     {
       type: "button",
@@ -882,10 +909,10 @@ function PasswordField({
       "aria-label": reveal ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a",
       onMouseDown: handleToggleMouseDown,
       onClick: () => setReveal((r) => !r),
-      children: reveal ? /* @__PURE__ */ jsx18(EyeOffIcon, { size: 18 }) : /* @__PURE__ */ jsx18(EyeIcon, { size: 18 })
+      children: reveal ? /* @__PURE__ */ jsx19(EyeOffIcon, { size: 18 }) : /* @__PURE__ */ jsx19(EyeIcon, { size: 18 })
     }
   );
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     BaseField,
     {
       label: label7,
@@ -895,14 +922,14 @@ function PasswordField({
       trailing: toggleButton,
       id,
       className,
-      children: (control) => /* @__PURE__ */ jsx18("input", { ...rest, ...control, type: reveal ? "text" : "password", onChange: handleChange })
+      children: (control) => /* @__PURE__ */ jsx19("input", { ...rest, ...control, type: reveal ? "text" : "password", onChange: handleChange })
     }
   );
 }
 
 // src/components/money-field/index.tsx
 import { useMemo as useMemo14, useState as useState4 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function parseAmount(raw) {
   const cleaned = raw.replace(/[^0-9.-]/g, "");
   if (cleaned === "" || cleaned === "-" || cleaned === ".") return null;
@@ -942,7 +969,7 @@ function MoneyField({
     onChange?.(parseAmount(draft));
     onBlur?.(e);
   };
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     BaseField,
     {
       label: label7,
@@ -951,7 +978,7 @@ function MoneyField({
       startIcon,
       id,
       className,
-      children: (control) => /* @__PURE__ */ jsx19(
+      children: (control) => /* @__PURE__ */ jsx20(
         "input",
         {
           ...rest,
@@ -976,7 +1003,7 @@ var active = "use-styles_active__18np0q01";
 var root10 = "use-styles_root__18np0q00";
 
 // src/components/icon-button/use-styles.ts
-function useStyles13({
+function useStyles14({
   active: active2 = false,
   tone: tone4 = "ink"
 }) {
@@ -989,10 +1016,10 @@ function useStyles13({
 }
 
 // src/components/icon-button/index.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function IconButton({ icon: Icon, active: active2, tone: tone4, title, ...rest }) {
-  const { root: root24 } = useStyles13({ active: active2, tone: tone4 });
-  return /* @__PURE__ */ jsx20("button", { className: root24, "aria-label": title, title, ...rest, children: /* @__PURE__ */ jsx20(Icon, { size: 18 }) });
+  const { root: root24 } = useStyles14({ active: active2, tone: tone4 });
+  return /* @__PURE__ */ jsx21("button", { className: root24, "aria-label": title, title, ...rest, children: /* @__PURE__ */ jsx21(Icon, { size: 18 }) });
 }
 
 // src/components/card/use-styles.ts
@@ -1005,29 +1032,29 @@ var header = "use-styles_header__1fuvd021";
 var root11 = "use-styles_root__1fuvd020";
 
 // src/components/card/use-styles.ts
-function useStyles14() {
+function useStyles15() {
   const { themeClass } = useTheme();
   const root24 = useMemo16(() => `${themeClass} ${root11}`, [themeClass]);
   return { root: root24, header, body, footer };
 }
 
 // src/components/card/index.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function CardRoot({ children, ...rest }) {
-  const { root: root24 } = useStyles14();
-  return /* @__PURE__ */ jsx21("div", { className: root24, ...rest, children });
+  const { root: root24 } = useStyles15();
+  return /* @__PURE__ */ jsx22("div", { className: root24, ...rest, children });
 }
 function CardHeader({ children, ...rest }) {
-  const { header: header3 } = useStyles14();
-  return /* @__PURE__ */ jsx21("div", { className: header3, ...rest, children });
+  const { header: header3 } = useStyles15();
+  return /* @__PURE__ */ jsx22("div", { className: header3, ...rest, children });
 }
 function CardBody({ children, ...rest }) {
-  const { body: body3 } = useStyles14();
-  return /* @__PURE__ */ jsx21("div", { className: body3, ...rest, children });
+  const { body: body3 } = useStyles15();
+  return /* @__PURE__ */ jsx22("div", { className: body3, ...rest, children });
 }
 function CardFooter({ children, ...rest }) {
-  const { footer: footer2 } = useStyles14();
-  return /* @__PURE__ */ jsx21("div", { className: footer2, ...rest, children });
+  const { footer: footer2 } = useStyles15();
+  return /* @__PURE__ */ jsx22("div", { className: footer2, ...rest, children });
 }
 CardRoot.displayName = "Card";
 CardHeader.displayName = "Card.Header";
@@ -1040,7 +1067,7 @@ var Card = Object.assign(CardRoot, {
 });
 
 // src/components/icons/circle-check/index.tsx
-import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 function CircleCheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs12(
     "svg",
@@ -1057,15 +1084,15 @@ function CircleCheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx22("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx22("path", { d: "m9 12 2 2 4-4" })
+        /* @__PURE__ */ jsx23("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx23("path", { d: "m9 12 2 2 4-4" })
       ]
     }
   );
 }
 
 // src/components/icons/circle-x/index.tsx
-import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 function CircleXIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs13(
     "svg",
@@ -1082,16 +1109,16 @@ function CircleXIcon({ 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: "m15 9-6 6" }),
-        /* @__PURE__ */ jsx23("path", { d: "m9 9 6 6" })
+        /* @__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" })
       ]
     }
   );
 }
 
 // src/components/icons/info/index.tsx
-import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 function InfoIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs14(
     "svg",
@@ -1108,16 +1135,16 @@ function InfoIcon({ 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: "M12 16v-4" }),
-        /* @__PURE__ */ jsx24("path", { d: "M12 8h.01" })
+        /* @__PURE__ */ jsx25("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx25("path", { d: "M12 16v-4" }),
+        /* @__PURE__ */ jsx25("path", { d: "M12 8h.01" })
       ]
     }
   );
 }
 
 // src/components/icons/triangle-alert/index.tsx
-import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs15(
     "svg",
@@ -1134,9 +1161,9 @@ function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx25("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__ */ jsx25("path", { d: "M12 9v4" }),
-        /* @__PURE__ */ jsx25("path", { d: "M12 17h.01" })
+        /* @__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" })
       ]
     }
   );
@@ -1152,7 +1179,7 @@ var root12 = "use-styles_root__ivsh6u0";
 var severity = { info: "use-styles_severity_info__ivsh6u1", ok: "use-styles_severity_ok__ivsh6u2", warn: "use-styles_severity_warn__ivsh6u3", danger: "use-styles_severity_danger__ivsh6u4" };
 
 // src/components/alert/use-styles.ts
-function useStyles15({
+function useStyles16({
   severity: severity2 = "info",
   className
 }) {
@@ -1169,7 +1196,7 @@ function useStyles15({
 }
 
 // src/components/alert/index.tsx
-import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 var defaultIcons = {
   info: InfoIcon,
   ok: CircleCheckIcon,
@@ -1184,13 +1211,13 @@ function Alert({
   children,
   ...rest
 }) {
-  const styles = useStyles15({ severity: severity2, className });
+  const styles = useStyles16({ severity: severity2, className });
   const IconComponent = icon ?? defaultIcons[severity2];
   return /* @__PURE__ */ jsxs16("div", { role: "alert", className: styles.root, ...rest, children: [
-    /* @__PURE__ */ jsx26("span", { className: styles.iconSlot, children: /* @__PURE__ */ jsx26(IconComponent, {}) }),
+    /* @__PURE__ */ jsx27("span", { className: styles.iconSlot, children: /* @__PURE__ */ jsx27(IconComponent, {}) }),
     /* @__PURE__ */ jsxs16("div", { className: styles.content, children: [
-      title != null && /* @__PURE__ */ jsx26(Typography, { variant: "h4", children: title }),
-      children != null && /* @__PURE__ */ jsx26(Typography, { variant: "body", color: "fg2", children })
+      title != null && /* @__PURE__ */ jsx27(Typography, { variant: "h4", children: title }),
+      children != null && /* @__PURE__ */ jsx27(Typography, { variant: "body", color: "fg2", children })
     ] })
   ] });
 }
@@ -1202,12 +1229,12 @@ import { cloneElement, useId as useId2, useState as useState5 } from "react";
 import { useMemo as useMemo18 } from "react";
 
 // src/components/tooltip/use-styles.css.ts
-var bubble = "use-styles_bubble__h9kvh1 surfaces_inkySurface__6hs0fg2";
+var bubble = "use-styles_bubble__h9kvh1 surfaces_inkySurface__1qa7atn2";
 var placement = { top: "use-styles_placement_top__h9kvh2", bottom: "use-styles_placement_bottom__h9kvh3" };
 var wrapper = "use-styles_wrapper__h9kvh0";
 
 // src/components/tooltip/use-styles.ts
-function useStyles16({
+function useStyles17({
   placement: placement2 = "top"
 }) {
   const { themeClass } = useTheme();
@@ -1223,11 +1250,11 @@ function useStyles16({
 }
 
 // src/components/tooltip/index.tsx
-import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 function Tooltip({ label: label7, children, placement: placement2 }) {
   const [open, setOpen] = useState5(false);
   const tooltipId = useId2();
-  const { wrapper: wrapper4, bubble: bubble2 } = useStyles16({ placement: placement2 });
+  const { wrapper: wrapper4, bubble: bubble2 } = useStyles17({ placement: placement2 });
   const show = () => setOpen(true);
   const hide = () => setOpen(false);
   const previousDescribedBy = children.props["aria-describedby"];
@@ -1235,7 +1262,7 @@ function Tooltip({ label: label7, children, placement: placement2 }) {
   const trigger2 = cloneElement(children, { "aria-describedby": describedBy });
   return /* @__PURE__ */ jsxs17("span", { className: wrapper4, onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, children: [
     trigger2,
-    open && /* @__PURE__ */ jsx27("span", { id: tooltipId, role: "tooltip", className: bubble2, children: label7 })
+    open && /* @__PURE__ */ jsx28("span", { id: tooltipId, role: "tooltip", className: bubble2, children: label7 })
   ] });
 }
 
@@ -1243,9 +1270,9 @@ function Tooltip({ label: label7, children, placement: placement2 }) {
 import { useEffect as useEffect3, useId as useId3, useRef as useRef2, useState as useState6 } from "react";
 
 // src/components/icons/chevron-down/index.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1259,7 +1286,7 @@ function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ jsx28("path", { d: "m6 9 6 6 6-6" })
+      children: /* @__PURE__ */ jsx29("path", { d: "m6 9 6 6 6-6" })
     }
   );
 }
@@ -1271,7 +1298,7 @@ import { useMemo as useMemo19 } from "react";
 var chevron = "use-styles_chevron__1w1czpb4";
 var chevronOpen = "use-styles_chevronOpen__1w1czpb5";
 var label4 = "use-styles_label__1w1czpb1";
-var menu = "use-styles_menu__1w1czpb6 surfaces_panelSurface__6hs0fg1";
+var menu = "use-styles_menu__1w1czpb6 surfaces_panelSurface__1qa7atn1";
 var option = "use-styles_option__1w1czpb7";
 var optionActive = "use-styles_optionActive__1w1czpb9";
 var optionSelected = "use-styles_optionSelected__1w1czpb8";
@@ -1280,7 +1307,7 @@ var root13 = "use-styles_root__1w1czpb0";
 var trigger = "use-styles_trigger__1w1czpb2";
 
 // src/components/select/use-styles.ts
-function useStyles17({
+function useStyles18({
   open = false
 }) {
   const { themeClass } = useTheme();
@@ -1299,7 +1326,7 @@ function useStyles17({
 }
 
 // src/components/select/index.tsx
-import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 function Select({ options, value, onChange, placeholder: placeholder2, label: label7, disabled: disabled3 }) {
   const [open, setOpen] = useState6(false);
   const [activeIndex, setActiveIndex] = useState6(0);
@@ -1315,7 +1342,7 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
     chevron: chevron3,
     menu: menu2,
     optionClass
-  } = useStyles17({ open });
+  } = useStyles18({ open });
   useEffect3(() => {
     if (!open) return;
     const onPointerDown = (event) => {
@@ -1377,7 +1404,7 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
     }
   };
   return /* @__PURE__ */ jsxs18("div", { ref: rootRef, className: root24, children: [
-    label7 && /* @__PURE__ */ jsx29("span", { id: labelId, className: labelClass, children: label7 }),
+    label7 && /* @__PURE__ */ jsx30("span", { id: labelId, className: labelClass, children: label7 }),
     /* @__PURE__ */ jsxs18(
       "button",
       {
@@ -1398,17 +1425,17 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
         },
         onKeyDown: handleKeyDown,
         children: [
-          selected3 ? selected3.label : /* @__PURE__ */ jsx29("span", { className: placeholderClass, children: placeholder2 }),
-          /* @__PURE__ */ jsx29("span", { className: chevron3, children: /* @__PURE__ */ jsx29(ChevronDownIcon, { size: 18 }) })
+          selected3 ? selected3.label : /* @__PURE__ */ jsx30("span", { className: placeholderClass, children: placeholder2 }),
+          /* @__PURE__ */ jsx30("span", { className: chevron3, children: /* @__PURE__ */ jsx30(ChevronDownIcon, { size: 18 }) })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx29("div", { className: menu2, role: "listbox", children: options.map((option2, index) => {
+    open && /* @__PURE__ */ jsx30("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__ */ jsx29(
+        /* @__PURE__ */ jsx30(
           "div",
           {
             id: optionId(index),
@@ -1439,7 +1466,7 @@ var track3 = "use-styles_track__okw59n1";
 var wrapper2 = "use-styles_wrapper__okw59n6";
 
 // src/components/slider/use-styles.ts
-function useStyles18() {
+function useStyles19() {
   const { themeClass } = useTheme();
   return useMemo20(() => {
     const root24 = [themeClass, root14].filter(Boolean).join(" ");
@@ -1456,7 +1483,7 @@ function useStyles18() {
 }
 
 // src/components/slider/index.tsx
-import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
 function Slider({
   value = 0,
   onChange,
@@ -1466,7 +1493,7 @@ function Slider({
   disabled: disabled3,
   label: label7
 }) {
-  const { wrapper: wrapper4, label: labelClass, root: root24, track: track4, range: range2, thumb: thumb2, input: input6 } = useStyles18();
+  const { wrapper: wrapper4, label: labelClass, root: root24, track: track4, range: range2, thumb: thumb2, input: input6 } = useStyles19();
   const span = max - min;
   const percent = span > 0 ? (value - min) / span * 100 : 0;
   const clamped = Math.max(0, Math.min(100, percent));
@@ -1474,11 +1501,11 @@ function Slider({
     onChange?.(Number(e.target.value));
   };
   return /* @__PURE__ */ jsxs19("span", { className: wrapper4, children: [
-    label7 ? /* @__PURE__ */ jsx30("span", { className: labelClass, children: label7 }) : null,
+    label7 ? /* @__PURE__ */ jsx31("span", { className: labelClass, children: label7 }) : null,
     /* @__PURE__ */ jsxs19("span", { className: root24, children: [
-      /* @__PURE__ */ jsx30("span", { className: track4 }),
-      /* @__PURE__ */ jsx30("span", { className: range2, style: { width: `${clamped}%` } }),
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx31("span", { className: track4 }),
+      /* @__PURE__ */ jsx31("span", { className: range2, style: { width: `${clamped}%` } }),
+      /* @__PURE__ */ jsx31(
         "input",
         {
           className: input6,
@@ -1491,7 +1518,7 @@ function Slider({
           onChange: handleChange
         }
       ),
-      /* @__PURE__ */ jsx30("span", { className: thumb2, style: { left: `${clamped}%` } })
+      /* @__PURE__ */ jsx31("span", { className: thumb2, style: { left: `${clamped}%` } })
     ] })
   ] });
 }
@@ -1511,7 +1538,7 @@ var panel = "use-styles_panel__1cjrdh95";
 var root15 = "use-styles_root__1cjrdh90";
 
 // src/components/accordion/use-styles.ts
-function useStyles19({ className }) {
+function useStyles20({ className }) {
   const { themeClass } = useTheme();
   return useMemo21(
     () => ({
@@ -1526,7 +1553,7 @@ function useStyles19({ className }) {
 }
 
 // src/components/accordion/index.tsx
-import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
 function Accordion({
   items,
   multiple = false,
@@ -1534,7 +1561,7 @@ function Accordion({
   className
 }) {
   const [open, setOpen] = useState7(defaultOpen);
-  const { root: root24, item: item3, header: header3, chevronFor, panel: panel2 } = useStyles19({ className });
+  const { root: root24, item: item3, header: header3, chevronFor, panel: panel2 } = useStyles20({ className });
   const toggle = (id) => {
     setOpen((current2) => {
       const isOpen = current2.includes(id);
@@ -1542,7 +1569,7 @@ function Accordion({
       return multiple ? [...current2, id] : [id];
     });
   };
-  return /* @__PURE__ */ jsx31("div", { className: root24, children: items.map((it) => {
+  return /* @__PURE__ */ jsx32("div", { className: root24, children: items.map((it) => {
     const isOpen = open.includes(it.id);
     const panelId = `accordion-panel-${it.id}`;
     const headerId = `accordion-header-${it.id}`;
@@ -1558,11 +1585,11 @@ function Accordion({
           onClick: () => toggle(it.id),
           children: [
             it.title,
-            /* @__PURE__ */ jsx31(ChevronDownIcon, { className: chevronFor(isOpen) })
+            /* @__PURE__ */ jsx32(ChevronDownIcon, { className: chevronFor(isOpen) })
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ jsx31("div", { id: panelId, className: panel2, role: "region", "aria-labelledby": headerId, children: it.content })
+      isOpen && /* @__PURE__ */ jsx32("div", { id: panelId, className: panel2, role: "region", "aria-labelledby": headerId, children: it.content })
     ] }, it.id);
   }) });
 }
@@ -1571,9 +1598,9 @@ function Accordion({
 import { Fragment } from "react";
 
 // src/components/icons/chevron-right/index.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1587,7 +1614,7 @@ function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ jsx32("path", { d: "m9 18 6-6-6-6" })
+      children: /* @__PURE__ */ jsx33("path", { d: "m9 18 6-6-6-6" })
     }
   );
 }
@@ -1602,7 +1629,7 @@ var root16 = "use-styles_root__7u0du60";
 var separator = "use-styles_separator__7u0du63";
 
 // src/components/breadcrumbs/use-styles.ts
-function useStyles20({ className }) {
+function useStyles21({ className }) {
   const { themeClass } = useTheme();
   const root24 = useMemo22(
     () => [themeClass, root16, className].filter(Boolean).join(" "),
@@ -1612,23 +1639,23 @@ function useStyles20({ className }) {
 }
 
 // src/components/breadcrumbs/index.tsx
-import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
 function Breadcrumbs({ items, className, ...rest }) {
-  const { root: root24, crumb: crumb2, current: current2, separator: separator2 } = useStyles20({ className });
-  return /* @__PURE__ */ jsx33("nav", { "aria-label": "Breadcrumb", className: root24, ...rest, children: items.map((item3, index) => {
+  const { root: root24, crumb: crumb2, current: current2, separator: separator2 } = useStyles21({ className });
+  return /* @__PURE__ */ jsx34("nav", { "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__ */ jsx33("span", { className: current2, "aria-current": "page", children: item3.label }) : item3.href ? /* @__PURE__ */ jsx33("a", { className: crumb2, href: item3.href, children: item3.label }) : /* @__PURE__ */ jsx33("span", { className: crumb2, children: item3.label }),
-      !isLast && /* @__PURE__ */ jsx33("span", { className: separator2, children: /* @__PURE__ */ jsx33(ChevronRightIcon, { size: 14 }) })
+      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 }) })
     ] }, key);
   }) });
 }
 
 // src/components/icons/chevron-left/index.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1642,7 +1669,7 @@ function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ jsx34("path", { d: "m15 18-6-6 6-6" })
+      children: /* @__PURE__ */ jsx35("path", { d: "m15 18-6-6 6-6" })
     }
   );
 }
@@ -1658,7 +1685,7 @@ var pageBtn = "use-styles_pageBtn__1azgzoh1";
 var root17 = "use-styles_root__1azgzoh0";
 
 // src/components/pagination/use-styles.ts
-function useStyles21() {
+function useStyles22() {
   const { themeClass } = useTheme();
   return useMemo23(
     () => ({
@@ -1672,7 +1699,7 @@ function useStyles21() {
 }
 
 // src/components/pagination/index.tsx
-import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
 function buildItems(count, page, siblingCount) {
   const total = Math.max(1, count);
   const first = 1;
@@ -1687,13 +1714,13 @@ function buildItems(count, page, siblingCount) {
   return items;
 }
 function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
-  const { root: root24, pageBtnFor, ellipsis: ellipsis2, nav: nav2 } = useStyles21();
+  const { root: root24, pageBtnFor, ellipsis: ellipsis2, nav: nav2 } = useStyles22();
   const total = Math.max(1, count);
   const current2 = Math.min(Math.max(1, page), total);
   const items = buildItems(total, current2, siblingCount);
   const go = (n) => onChange?.(Math.min(Math.max(1, n), total));
   return /* @__PURE__ */ jsxs22("nav", { className: root24, "aria-label": "Pagination", children: [
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36(
       "button",
       {
         type: "button",
@@ -1701,14 +1728,14 @@ function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
         "aria-label": "Previous page",
         disabled: current2 <= 1,
         onClick: () => go(current2 - 1),
-        children: /* @__PURE__ */ jsx35(ChevronLeftIcon, { size: 18 })
+        children: /* @__PURE__ */ jsx36(ChevronLeftIcon, { size: 18 })
       }
     ),
     items.map(
       (item3, index) => item3 === "ellipsis" ? (
         // biome-ignore lint/suspicious/noArrayIndexKey: ellipsis position is stable per render
-        /* @__PURE__ */ jsx35("span", { className: ellipsis2, children: "\u2026" }, `ellipsis-${index}`)
-      ) : /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36("span", { className: ellipsis2, children: "\u2026" }, `ellipsis-${index}`)
+      ) : /* @__PURE__ */ jsx36(
         "button",
         {
           type: "button",
@@ -1720,7 +1747,7 @@ function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
         item3
       )
     ),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36(
       "button",
       {
         type: "button",
@@ -1728,7 +1755,7 @@ function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
         "aria-label": "Next page",
         disabled: current2 >= total,
         onClick: () => go(current2 + 1),
-        children: /* @__PURE__ */ jsx35(ChevronRightIcon, { size: 18 })
+        children: /* @__PURE__ */ jsx36(ChevronRightIcon, { size: 18 })
       }
     )
   ] });
@@ -1751,7 +1778,7 @@ var root18 = "use-styles_root__79pt4e0";
 var step = "use-styles_step__79pt4e1";
 
 // src/components/stepper/use-styles.ts
-function useStyles22({ className }) {
+function useStyles23({ className }) {
   const { themeClass } = useTheme();
   return useMemo24(() => {
     const root24 = [themeClass, root18, className].filter(Boolean).join(" ");
@@ -1766,20 +1793,20 @@ function useStyles22({ className }) {
 }
 
 // src/components/stepper/index.tsx
-import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
 function Stepper({ steps, active: active2 = 0, className, ...rest }) {
-  const { root: root24, step: step2, connector: connector2, markerFor, labelFor } = useStyles22({ className });
-  return /* @__PURE__ */ jsx36("div", { className: root24, ...rest, children: steps.map((s, index) => {
+  const { root: root24, step: step2, connector: connector2, markerFor, labelFor } = useStyles23({ className });
+  return /* @__PURE__ */ jsx37("div", { 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__ */ jsx36("span", { className: markerFor(state), children: state === "done" ? /* @__PURE__ */ jsx36(CheckIcon, { size: 14 }) : index + 1 }),
-          /* @__PURE__ */ jsx36("span", { className: labelFor(isActive), children: s.label })
+          /* @__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 })
         ] }),
-        index < steps.length - 1 && /* @__PURE__ */ jsx36("span", { "data-part": "connector", className: connector2 })
+        index < steps.length - 1 && /* @__PURE__ */ jsx37("span", { "data-part": "connector", className: connector2 })
       ] }, index)
     );
   }) });
@@ -1794,7 +1821,7 @@ var tab = "use-styles_tab__1l4m7t41";
 var tabActive = "use-styles_tabActive__1l4m7t42";
 
 // src/components/tabs/use-styles.ts
-function useStyles23() {
+function useStyles24() {
   const { themeClass } = useTheme();
   return useMemo25(() => {
     const root24 = [themeClass, root19].filter(Boolean).join(" ");
@@ -1804,12 +1831,12 @@ function useStyles23() {
 }
 
 // src/components/tabs/index.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function Tabs({ items, value, onChange }) {
-  const { root: root24, tabClass } = useStyles23();
-  return /* @__PURE__ */ jsx37("div", { role: "tablist", className: root24, children: items.map((item3) => {
+  const { root: root24, tabClass } = useStyles24();
+  return /* @__PURE__ */ jsx38("div", { role: "tablist", className: root24, children: items.map((item3) => {
     const active2 = item3.value === value;
-    return /* @__PURE__ */ jsx37(
+    return /* @__PURE__ */ jsx38(
       "button",
       {
         type: "button",
@@ -1828,6 +1855,7 @@ function Tabs({ items, value, onChange }) {
 import {
   cloneElement as cloneElement2,
   useEffect as useEffect4,
+  useLayoutEffect,
   useRef as useRef3,
   useState as useState8
 } from "react";
@@ -1838,11 +1866,11 @@ import { useMemo as useMemo26 } from "react";
 // src/components/menu/use-styles.css.ts
 var danger = "use-styles_danger__1uyxaj3";
 var item2 = "use-styles_item__1uyxaj2";
-var list = "use-styles_list__1uyxaj1 surfaces_panelSurface__6hs0fg1";
+var list = "use-styles_list__1uyxaj1 surfaces_panelSurface__1qa7atn1";
 var wrapper3 = "use-styles_wrapper__1uyxaj0";
 
 // src/components/menu/use-styles.ts
-function useStyles24() {
+function useStyles25() {
   const { themeClass } = useTheme();
   return useMemo26(
     () => ({
@@ -1856,14 +1884,15 @@ function useStyles24() {
 }
 
 // src/components/menu/index.tsx
-import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
 function assignRef(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
 function Menu({ trigger: trigger2, items }) {
-  const { wrapper: wrapper4, list: list2, item: item3, dangerItem } = useStyles24();
+  const { wrapper: wrapper4, list: list2, item: item3, dangerItem } = useStyles25();
   const [open, setOpen] = useState8(false);
+  const [alignEnd, setAlignEnd] = useState8(false);
   const rootRef = useRef3(null);
   const listRef = useRef3(null);
   const triggerRef = useRef3(null);
@@ -1878,6 +1907,18 @@ function Menu({ trigger: trigger2, items }) {
     setOpen(false);
     triggerRef.current?.focus();
   };
+  useLayoutEffect(() => {
+    if (!open) {
+      setAlignEnd(false);
+      return;
+    }
+    const listEl = listRef.current;
+    const rootEl = rootRef.current;
+    if (!listEl || !rootEl) return;
+    const rootLeft = rootEl.getBoundingClientRect().left;
+    const viewport = document.documentElement.clientWidth;
+    setAlignEnd(rootLeft + listEl.offsetWidth > viewport);
+  }, [open]);
   useEffect4(() => {
     if (!open) return;
     listRef.current?.querySelector('[role="menuitem"]')?.focus();
@@ -1945,21 +1986,31 @@ function Menu({ trigger: trigger2, items }) {
   });
   return /* @__PURE__ */ jsxs24("div", { ref: rootRef, className: wrapper4, children: [
     clonedTrigger,
-    open && /* @__PURE__ */ jsx38("div", { ref: listRef, role: "menu", className: list2, onKeyDown: onMenuKeyDown, children: items.map((entry, index) => /* @__PURE__ */ jsx38(
-      "button",
+    open && /* @__PURE__ */ jsx39(
+      "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",
+        onKeyDown: onMenuKeyDown,
+        children: items.map((entry, index) => /* @__PURE__ */ jsx39(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            tabIndex: -1,
+            className: entry.danger ? dangerItem : item3,
+            onClick: () => {
+              entry.onClick?.();
+              setOpen(false);
+            },
+            children: entry.label
+          },
+          index
+        ))
+      }
+    )
   ] });
 }
 
@@ -1981,7 +2032,7 @@ var overlay = "use-styles_overlay__5tstu80";
 var surface = "use-styles_surface__5tstu81";
 
 // src/components/dialog/use-styles.ts
-function useStyles25() {
+function useStyles26() {
   const { themeClass } = useTheme();
   return useMemo27(
     () => ({
@@ -1995,10 +2046,10 @@ function useStyles25() {
 }
 
 // src/components/dialog/index.tsx
-import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs25 } 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 Dialog({ open, onClose, title, actions: actions3, children }) {
-  const { overlay: overlay2, surface: surface2, body: body3, actions: actionsClass } = useStyles25();
+  const { overlay: overlay2, surface: surface2, body: body3, actions: actionsClass } = useStyles26();
   const surfaceRef = useRef4(null);
   const previouslyFocused = useRef4(null);
   const generatedId = useId4();
@@ -2055,7 +2106,7 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
   };
   return createPortal(
     // biome-ignore lint/a11y/useKeyWithClickEvents: ESC handled by a document keydown listener.
-    /* @__PURE__ */ jsx39("div", { className: overlay2, "data-testid": "dialog-overlay", onClick: onClose, children: /* @__PURE__ */ jsxs25(
+    /* @__PURE__ */ jsx40("div", { className: overlay2, "data-testid": "dialog-overlay", onClick: onClose, children: /* @__PURE__ */ jsxs25(
       "div",
       {
         ref: surfaceRef,
@@ -2067,9 +2118,9 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
         onClick: stop,
         onKeyDown: onSurfaceKeyDown,
         children: [
-          title != null && /* @__PURE__ */ jsx39(Typography, { variant: "h3", as: "h2", id: titleId, children: title }),
-          children != null && /* @__PURE__ */ jsx39("div", { className: body3, children: /* @__PURE__ */ jsx39(Typography, { variant: "body", color: "fg2", children }) }),
-          actions3 != null && /* @__PURE__ */ jsx39("div", { className: actionsClass, children: actions3 })
+          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 })
         ]
       }
     ) }),
@@ -2086,10 +2137,10 @@ import { useMemo as useMemo28 } from "react";
 // src/components/snackbar/use-styles.css.ts
 var closeBtn = "use-styles_closeBtn__ihzsep2";
 var message = "use-styles_message__ihzsep1";
-var root20 = "use-styles_root__ihzsep0 surfaces_inkySurface__6hs0fg2";
+var root20 = "use-styles_root__ihzsep0 surfaces_inkySurface__1qa7atn2";
 
 // src/components/snackbar/use-styles.ts
-function useStyles26() {
+function useStyles27() {
   const { themeClass } = useTheme();
   return useMemo28(
     () => ({
@@ -2102,15 +2153,15 @@ function useStyles26() {
 }
 
 // src/components/snackbar/index.tsx
-import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
 function Snackbar({ open, message: message2, action, onClose }) {
-  const { root: root24, message: messageClass, closeBtn: closeBtn2 } = useStyles26();
+  const { root: root24, message: messageClass, closeBtn: closeBtn2 } = useStyles27();
   if (!open || typeof document === "undefined") return null;
   return createPortal2(
     /* @__PURE__ */ jsxs26("div", { role: "status", className: root24, children: [
-      /* @__PURE__ */ jsx40("span", { className: messageClass, children: message2 }),
+      /* @__PURE__ */ jsx41("span", { className: messageClass, children: message2 }),
       action,
-      onClose && /* @__PURE__ */ jsx40("button", { type: "button", "aria-label": "Close", className: closeBtn2, onClick: onClose, children: /* @__PURE__ */ jsx40(XIcon, { size: 18 }) })
+      onClose && /* @__PURE__ */ jsx41("button", { type: "button", "aria-label": "Close", className: closeBtn2, onClick: onClose, children: /* @__PURE__ */ jsx41(XIcon, { size: 18 }) })
     ] }),
     document.body
   );
@@ -2126,7 +2177,7 @@ var td = "use-styles_td__1n2cz6i2";
 var th = "use-styles_th__1n2cz6i1";
 
 // src/components/table/use-styles.ts
-function useStyles27({ className }) {
+function useStyles28({ className }) {
   const { themeClass } = useTheme();
   const root24 = useMemo29(
     () => [themeClass, root21, className].filter(Boolean).join(" "),
@@ -2136,7 +2187,7 @@ function useStyles27({ className }) {
 }
 
 // src/components/table/index.tsx
-import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
 function Table({
   columns,
   rows,
@@ -2144,12 +2195,12 @@ function Table({
   className,
   ...rest
 }) {
-  const { root: root24, th: th2, td: td2, alignRight: alignRight2 } = useStyles27({ className });
+  const { root: root24, th: th2, td: td2, alignRight: alignRight2 } = useStyles28({ className });
   const headClass = (column) => column.align === "right" ? `${th2} ${alignRight2}` : th2;
   const cellClass = (column) => column.align === "right" ? `${td2} ${alignRight2}` : td2;
   return /* @__PURE__ */ jsxs27("table", { className: root24, ...rest, children: [
-    /* @__PURE__ */ jsx41("thead", { children: /* @__PURE__ */ jsx41("tr", { children: columns.map((column) => /* @__PURE__ */ jsx41("th", { className: headClass(column), children: column.header }, column.key)) }) }),
-    /* @__PURE__ */ jsx41("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsx41("tr", { children: columns.map((column) => /* @__PURE__ */ jsx41("td", { className: cellClass(column), children: column.render ? column.render(row) : String(row[column.key]) }, column.key)) }, getRowKey ? getRowKey(row, index) : index)) })
+    /* @__PURE__ */ jsx42("thead", { children: /* @__PURE__ */ jsx42("tr", { children: columns.map((column) => /* @__PURE__ */ jsx42("th", { 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)) })
   ] });
 }
 
@@ -2162,7 +2213,7 @@ var brand = "use-styles_brand__1h133nh1";
 var root22 = "use-styles_root__1h133nh0";
 
 // src/components/app-bar/use-styles.ts
-function useStyles28({ className }) {
+function useStyles29({ className }) {
   const { themeClass } = useTheme();
   const root24 = useMemo30(
     () => [themeClass, root22, className].filter(Boolean).join(" "),
@@ -2172,13 +2223,13 @@ function useStyles28({ className }) {
 }
 
 // src/components/app-bar/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 AppBar({ brand: brand2, actions: actions3, className, children, ...rest }) {
-  const styles = useStyles28({ className });
+  const styles = useStyles29({ className });
   return /* @__PURE__ */ jsxs28("header", { className: styles.root, ...rest, children: [
-    brand2 !== void 0 ? /* @__PURE__ */ jsx42("div", { className: styles.brand, children: brand2 }) : null,
+    brand2 !== void 0 ? /* @__PURE__ */ jsx43("div", { className: styles.brand, children: brand2 }) : null,
     children,
-    actions3 !== void 0 ? /* @__PURE__ */ jsx42("div", { className: styles.actions, children: actions3 }) : null
+    actions3 !== void 0 ? /* @__PURE__ */ jsx43("div", { className: styles.actions, children: actions3 }) : null
   ] });
 }
 
@@ -2193,7 +2244,7 @@ var selected2 = "use-styles_selected__kbreq11";
 var trailing = "use-styles_trailing__kbreq14";
 
 // src/components/list-item/use-styles.ts
-function useStyles29({
+function useStyles30({
   selected: selected3,
   className
 }) {
@@ -2206,7 +2257,7 @@ function useStyles29({
 }
 
 // src/components/list-item/index.tsx
-import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
 function ListItem({
   leading: leading2,
   trailing: trailing2,
@@ -2215,18 +2266,18 @@ function ListItem({
   children,
   ...rest
 }) {
-  const styles = useStyles29({ selected: selected3, className });
+  const styles = useStyles30({ selected: selected3, className });
   return /* @__PURE__ */ jsxs29("div", { className: styles.root, ...rest, children: [
-    leading2 != null && /* @__PURE__ */ jsx43("span", { className: styles.leading, children: leading2 }),
-    /* @__PURE__ */ jsx43("span", { className: styles.content, children }),
-    trailing2 != null && /* @__PURE__ */ jsx43("span", { className: styles.trailing, children: trailing2 })
+    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 })
   ] });
 }
 
 // src/components/icons/chevron-up/index.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 function ChevronUpIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2240,13 +2291,13 @@ function ChevronUpIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ jsx44("path", { d: "m18 15-6-6-6 6" })
+      children: /* @__PURE__ */ jsx45("path", { d: "m18 15-6-6-6 6" })
     }
   );
 }
 
 // src/components/icons/search/index.tsx
-import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
 function SearchIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs30(
     "svg",
@@ -2263,15 +2314,15 @@ function SearchIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx45("circle", { cx: "11", cy: "11", r: "8" }),
-        /* @__PURE__ */ jsx45("path", { d: "m21 21-4.3-4.3" })
+        /* @__PURE__ */ jsx46("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsx46("path", { d: "m21 21-4.3-4.3" })
       ]
     }
   );
 }
 
 // src/components/icons/plus/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 PlusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs31(
     "svg",
@@ -2288,17 +2339,17 @@ function PlusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx46("path", { d: "M5 12h14" }),
-        /* @__PURE__ */ jsx46("path", { d: "M12 5v14" })
+        /* @__PURE__ */ jsx47("path", { d: "M5 12h14" }),
+        /* @__PURE__ */ jsx47("path", { d: "M12 5v14" })
       ]
     }
   );
 }
 
 // src/components/icons/minus/index.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 function MinusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2312,13 +2363,13 @@ function MinusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       ...rest,
-      children: /* @__PURE__ */ jsx47("path", { d: "M5 12h14" })
+      children: /* @__PURE__ */ jsx48("path", { d: "M5 12h14" })
     }
   );
 }
 
 // src/components/icons/more-horizontal/index.tsx
-import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
 function MoreHorizontalIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
   return /* @__PURE__ */ jsxs32(
     "svg",
@@ -2335,9 +2386,9 @@ function MoreHorizontalIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
       "aria-hidden": "true",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx48("circle", { cx: "12", cy: "12", r: "1" }),
-        /* @__PURE__ */ jsx48("circle", { cx: "19", cy: "12", r: "1" }),
-        /* @__PURE__ */ jsx48("circle", { cx: "5", cy: "12", r: "1" })
+        /* @__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" })
       ]
     }
   );
@@ -2360,6 +2411,7 @@ export {
   Chip,
   CircleCheckIcon,
   CircleXIcon,
+  Container,
   Dialog,
   Divider,
   EyeIcon,