@octavius2929-personal/design-system 0.7.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +307 -278
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +689 -120
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +100 -51
- package/dist/index.d.ts +100 -51
- package/dist/index.js +269 -241
- package/dist/index.js.map +1 -1
- package/package.json +4 -1
package/dist/index.cjs
CHANGED
|
@@ -37,6 +37,7 @@ __export(index_exports, {
|
|
|
37
37
|
Chip: () => Chip,
|
|
38
38
|
CircleCheckIcon: () => CircleCheckIcon,
|
|
39
39
|
CircleXIcon: () => CircleXIcon,
|
|
40
|
+
Container: () => Container,
|
|
40
41
|
Dialog: () => Dialog,
|
|
41
42
|
Divider: () => Divider,
|
|
42
43
|
EyeIcon: () => EyeIcon,
|
|
@@ -84,7 +85,7 @@ var colorVars = { bg1: "var(--bg1__e3grur28)", bg2: "var(--bg2__e3grur29)", bg3:
|
|
|
84
85
|
var modeNames = ["light", "dark", "sepia", "contrast"];
|
|
85
86
|
var schemaNames = ["tinta"];
|
|
86
87
|
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" } };
|
|
87
|
-
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: {
|
|
88
|
+
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 };
|
|
88
89
|
|
|
89
90
|
// src/hooks/use-previous/index.ts
|
|
90
91
|
var import_react = require("react");
|
|
@@ -104,12 +105,39 @@ function useToggle(initial = false) {
|
|
|
104
105
|
return [on, toggle, setOn];
|
|
105
106
|
}
|
|
106
107
|
|
|
108
|
+
// src/theme/styles/sprinkles/index.css.ts
|
|
109
|
+
var import_createRuntimeSprinkles = require("@vanilla-extract/sprinkles/createRuntimeSprinkles");
|
|
110
|
+
var sprinkles = (0, import_createRuntimeSprinkles.createSprinkles)({ conditions: void 0, styles: { p: { mappings: ["padding"] }, px: { mappings: ["paddingLeft", "paddingRight"] }, py: { mappings: ["paddingTop", "paddingBottom"] }, pt: { mappings: ["paddingTop"] }, pr: { mappings: ["paddingRight"] }, pb: { mappings: ["paddingBottom"] }, pl: { mappings: ["paddingLeft"] }, m: { mappings: ["marginTop", "marginRight", "marginBottom", "marginLeft"] }, mx: { mappings: ["marginLeft", "marginRight"] }, my: { mappings: ["marginTop", "marginBottom"] }, mt: { mappings: ["marginTop"] }, mr: { mappings: ["marginRight"] }, mb: { mappings: ["marginBottom"] }, ml: { mappings: ["marginLeft"] }, bg: { mappings: ["background"] }, radius: { mappings: ["borderRadius"] }, padding: { values: { s0: { defaultClass: "sprinkles_padding_s0__qhecrd0" }, s1: { defaultClass: "sprinkles_padding_s1__qhecrd1" }, s2: { defaultClass: "sprinkles_padding_s2__qhecrd2" }, s3: { defaultClass: "sprinkles_padding_s3__qhecrd3" }, s4: { defaultClass: "sprinkles_padding_s4__qhecrd4" }, s5: { defaultClass: "sprinkles_padding_s5__qhecrd5" }, s6: { defaultClass: "sprinkles_padding_s6__qhecrd6" }, s7: { defaultClass: "sprinkles_padding_s7__qhecrd7" }, s8: { defaultClass: "sprinkles_padding_s8__qhecrd8" }, s9: { defaultClass: "sprinkles_padding_s9__qhecrd9" } } }, paddingTop: { values: { s0: { defaultClass: "sprinkles_paddingTop_s0__qhecrda" }, s1: { defaultClass: "sprinkles_paddingTop_s1__qhecrdb" }, s2: { defaultClass: "sprinkles_paddingTop_s2__qhecrdc" }, s3: { defaultClass: "sprinkles_paddingTop_s3__qhecrdd" }, s4: { defaultClass: "sprinkles_paddingTop_s4__qhecrde" }, s5: { defaultClass: "sprinkles_paddingTop_s5__qhecrdf" }, s6: { defaultClass: "sprinkles_paddingTop_s6__qhecrdg" }, s7: { defaultClass: "sprinkles_paddingTop_s7__qhecrdh" }, s8: { defaultClass: "sprinkles_paddingTop_s8__qhecrdi" }, s9: { defaultClass: "sprinkles_paddingTop_s9__qhecrdj" } } }, paddingRight: { values: { s0: { defaultClass: "sprinkles_paddingRight_s0__qhecrdk" }, s1: { defaultClass: "sprinkles_paddingRight_s1__qhecrdl" }, s2: { defaultClass: "sprinkles_paddingRight_s2__qhecrdm" }, s3: { defaultClass: "sprinkles_paddingRight_s3__qhecrdn" }, s4: { defaultClass: "sprinkles_paddingRight_s4__qhecrdo" }, s5: { defaultClass: "sprinkles_paddingRight_s5__qhecrdp" }, s6: { defaultClass: "sprinkles_paddingRight_s6__qhecrdq" }, s7: { defaultClass: "sprinkles_paddingRight_s7__qhecrdr" }, s8: { defaultClass: "sprinkles_paddingRight_s8__qhecrds" }, s9: { defaultClass: "sprinkles_paddingRight_s9__qhecrdt" } } }, paddingBottom: { values: { s0: { defaultClass: "sprinkles_paddingBottom_s0__qhecrdu" }, s1: { defaultClass: "sprinkles_paddingBottom_s1__qhecrdv" }, s2: { defaultClass: "sprinkles_paddingBottom_s2__qhecrdw" }, s3: { defaultClass: "sprinkles_paddingBottom_s3__qhecrdx" }, s4: { defaultClass: "sprinkles_paddingBottom_s4__qhecrdy" }, s5: { defaultClass: "sprinkles_paddingBottom_s5__qhecrdz" }, s6: { defaultClass: "sprinkles_paddingBottom_s6__qhecrd10" }, s7: { defaultClass: "sprinkles_paddingBottom_s7__qhecrd11" }, s8: { defaultClass: "sprinkles_paddingBottom_s8__qhecrd12" }, s9: { defaultClass: "sprinkles_paddingBottom_s9__qhecrd13" } } }, paddingLeft: { values: { s0: { defaultClass: "sprinkles_paddingLeft_s0__qhecrd14" }, s1: { defaultClass: "sprinkles_paddingLeft_s1__qhecrd15" }, s2: { defaultClass: "sprinkles_paddingLeft_s2__qhecrd16" }, s3: { defaultClass: "sprinkles_paddingLeft_s3__qhecrd17" }, s4: { defaultClass: "sprinkles_paddingLeft_s4__qhecrd18" }, s5: { defaultClass: "sprinkles_paddingLeft_s5__qhecrd19" }, s6: { defaultClass: "sprinkles_paddingLeft_s6__qhecrd1a" }, s7: { defaultClass: "sprinkles_paddingLeft_s7__qhecrd1b" }, s8: { defaultClass: "sprinkles_paddingLeft_s8__qhecrd1c" }, s9: { defaultClass: "sprinkles_paddingLeft_s9__qhecrd1d" } } }, marginTop: { values: { s0: { defaultClass: "sprinkles_marginTop_s0__qhecrd1e" }, s1: { defaultClass: "sprinkles_marginTop_s1__qhecrd1f" }, s2: { defaultClass: "sprinkles_marginTop_s2__qhecrd1g" }, s3: { defaultClass: "sprinkles_marginTop_s3__qhecrd1h" }, s4: { defaultClass: "sprinkles_marginTop_s4__qhecrd1i" }, s5: { defaultClass: "sprinkles_marginTop_s5__qhecrd1j" }, s6: { defaultClass: "sprinkles_marginTop_s6__qhecrd1k" }, s7: { defaultClass: "sprinkles_marginTop_s7__qhecrd1l" }, s8: { defaultClass: "sprinkles_marginTop_s8__qhecrd1m" }, s9: { defaultClass: "sprinkles_marginTop_s9__qhecrd1n" } } }, marginRight: { values: { s0: { defaultClass: "sprinkles_marginRight_s0__qhecrd1o" }, s1: { defaultClass: "sprinkles_marginRight_s1__qhecrd1p" }, s2: { defaultClass: "sprinkles_marginRight_s2__qhecrd1q" }, s3: { defaultClass: "sprinkles_marginRight_s3__qhecrd1r" }, s4: { defaultClass: "sprinkles_marginRight_s4__qhecrd1s" }, s5: { defaultClass: "sprinkles_marginRight_s5__qhecrd1t" }, s6: { defaultClass: "sprinkles_marginRight_s6__qhecrd1u" }, s7: { defaultClass: "sprinkles_marginRight_s7__qhecrd1v" }, s8: { defaultClass: "sprinkles_marginRight_s8__qhecrd1w" }, s9: { defaultClass: "sprinkles_marginRight_s9__qhecrd1x" } } }, marginBottom: { values: { s0: { defaultClass: "sprinkles_marginBottom_s0__qhecrd1y" }, s1: { defaultClass: "sprinkles_marginBottom_s1__qhecrd1z" }, s2: { defaultClass: "sprinkles_marginBottom_s2__qhecrd20" }, s3: { defaultClass: "sprinkles_marginBottom_s3__qhecrd21" }, s4: { defaultClass: "sprinkles_marginBottom_s4__qhecrd22" }, s5: { defaultClass: "sprinkles_marginBottom_s5__qhecrd23" }, s6: { defaultClass: "sprinkles_marginBottom_s6__qhecrd24" }, s7: { defaultClass: "sprinkles_marginBottom_s7__qhecrd25" }, s8: { defaultClass: "sprinkles_marginBottom_s8__qhecrd26" }, s9: { defaultClass: "sprinkles_marginBottom_s9__qhecrd27" } } }, marginLeft: { values: { s0: { defaultClass: "sprinkles_marginLeft_s0__qhecrd28" }, s1: { defaultClass: "sprinkles_marginLeft_s1__qhecrd29" }, s2: { defaultClass: "sprinkles_marginLeft_s2__qhecrd2a" }, s3: { defaultClass: "sprinkles_marginLeft_s3__qhecrd2b" }, s4: { defaultClass: "sprinkles_marginLeft_s4__qhecrd2c" }, s5: { defaultClass: "sprinkles_marginLeft_s5__qhecrd2d" }, s6: { defaultClass: "sprinkles_marginLeft_s6__qhecrd2e" }, s7: { defaultClass: "sprinkles_marginLeft_s7__qhecrd2f" }, s8: { defaultClass: "sprinkles_marginLeft_s8__qhecrd2g" }, s9: { defaultClass: "sprinkles_marginLeft_s9__qhecrd2h" } } }, gap: { values: { s0: { defaultClass: "sprinkles_gap_s0__qhecrd2i" }, s1: { defaultClass: "sprinkles_gap_s1__qhecrd2j" }, s2: { defaultClass: "sprinkles_gap_s2__qhecrd2k" }, s3: { defaultClass: "sprinkles_gap_s3__qhecrd2l" }, s4: { defaultClass: "sprinkles_gap_s4__qhecrd2m" }, s5: { defaultClass: "sprinkles_gap_s5__qhecrd2n" }, s6: { defaultClass: "sprinkles_gap_s6__qhecrd2o" }, s7: { defaultClass: "sprinkles_gap_s7__qhecrd2p" }, s8: { defaultClass: "sprinkles_gap_s8__qhecrd2q" }, s9: { defaultClass: "sprinkles_gap_s9__qhecrd2r" } } }, rowGap: { values: { s0: { defaultClass: "sprinkles_rowGap_s0__qhecrd2s" }, s1: { defaultClass: "sprinkles_rowGap_s1__qhecrd2t" }, s2: { defaultClass: "sprinkles_rowGap_s2__qhecrd2u" }, s3: { defaultClass: "sprinkles_rowGap_s3__qhecrd2v" }, s4: { defaultClass: "sprinkles_rowGap_s4__qhecrd2w" }, s5: { defaultClass: "sprinkles_rowGap_s5__qhecrd2x" }, s6: { defaultClass: "sprinkles_rowGap_s6__qhecrd2y" }, s7: { defaultClass: "sprinkles_rowGap_s7__qhecrd2z" }, s8: { defaultClass: "sprinkles_rowGap_s8__qhecrd30" }, s9: { defaultClass: "sprinkles_rowGap_s9__qhecrd31" } } }, columnGap: { values: { s0: { defaultClass: "sprinkles_columnGap_s0__qhecrd32" }, s1: { defaultClass: "sprinkles_columnGap_s1__qhecrd33" }, s2: { defaultClass: "sprinkles_columnGap_s2__qhecrd34" }, s3: { defaultClass: "sprinkles_columnGap_s3__qhecrd35" }, s4: { defaultClass: "sprinkles_columnGap_s4__qhecrd36" }, s5: { defaultClass: "sprinkles_columnGap_s5__qhecrd37" }, s6: { defaultClass: "sprinkles_columnGap_s6__qhecrd38" }, s7: { defaultClass: "sprinkles_columnGap_s7__qhecrd39" }, s8: { defaultClass: "sprinkles_columnGap_s8__qhecrd3a" }, s9: { defaultClass: "sprinkles_columnGap_s9__qhecrd3b" } } }, background: { values: { bg1: { defaultClass: "sprinkles_background_bg1__qhecrd3c" }, bg2: { defaultClass: "sprinkles_background_bg2__qhecrd3d" }, bg3: { defaultClass: "sprinkles_background_bg3__qhecrd3e" }, bgInset: { defaultClass: "sprinkles_background_bgInset__qhecrd3f" }, fg1: { defaultClass: "sprinkles_background_fg1__qhecrd3g" }, fg2: { defaultClass: "sprinkles_background_fg2__qhecrd3h" }, fg3: { defaultClass: "sprinkles_background_fg3__qhecrd3i" }, fgOnAccent: { defaultClass: "sprinkles_background_fgOnAccent__qhecrd3j" }, border1: { defaultClass: "sprinkles_background_border1__qhecrd3k" }, border2: { defaultClass: "sprinkles_background_border2__qhecrd3l" }, borderStrong: { defaultClass: "sprinkles_background_borderStrong__qhecrd3m" }, accent: { defaultClass: "sprinkles_background_accent__qhecrd3n" }, accentHover: { defaultClass: "sprinkles_background_accentHover__qhecrd3o" }, accentSoft: { defaultClass: "sprinkles_background_accentSoft__qhecrd3p" }, ok: { defaultClass: "sprinkles_background_ok__qhecrd3q" }, warn: { defaultClass: "sprinkles_background_warn__qhecrd3r" }, danger: { defaultClass: "sprinkles_background_danger__qhecrd3s" }, info: { defaultClass: "sprinkles_background_info__qhecrd3t" }, focus: { defaultClass: "sprinkles_background_focus__qhecrd3u" }, scrim: { defaultClass: "sprinkles_background_scrim__qhecrd3v" } } }, color: { values: { bg1: { defaultClass: "sprinkles_color_bg1__qhecrd3w" }, bg2: { defaultClass: "sprinkles_color_bg2__qhecrd3x" }, bg3: { defaultClass: "sprinkles_color_bg3__qhecrd3y" }, bgInset: { defaultClass: "sprinkles_color_bgInset__qhecrd3z" }, fg1: { defaultClass: "sprinkles_color_fg1__qhecrd40" }, fg2: { defaultClass: "sprinkles_color_fg2__qhecrd41" }, fg3: { defaultClass: "sprinkles_color_fg3__qhecrd42" }, fgOnAccent: { defaultClass: "sprinkles_color_fgOnAccent__qhecrd43" }, border1: { defaultClass: "sprinkles_color_border1__qhecrd44" }, border2: { defaultClass: "sprinkles_color_border2__qhecrd45" }, borderStrong: { defaultClass: "sprinkles_color_borderStrong__qhecrd46" }, accent: { defaultClass: "sprinkles_color_accent__qhecrd47" }, accentHover: { defaultClass: "sprinkles_color_accentHover__qhecrd48" }, accentSoft: { defaultClass: "sprinkles_color_accentSoft__qhecrd49" }, ok: { defaultClass: "sprinkles_color_ok__qhecrd4a" }, warn: { defaultClass: "sprinkles_color_warn__qhecrd4b" }, danger: { defaultClass: "sprinkles_color_danger__qhecrd4c" }, info: { defaultClass: "sprinkles_color_info__qhecrd4d" }, focus: { defaultClass: "sprinkles_color_focus__qhecrd4e" }, scrim: { defaultClass: "sprinkles_color_scrim__qhecrd4f" } } }, borderRadius: { values: { none: { defaultClass: "sprinkles_borderRadius_none__qhecrd4g" }, sm: { defaultClass: "sprinkles_borderRadius_sm__qhecrd4h" }, md: { defaultClass: "sprinkles_borderRadius_md__qhecrd4i" }, lg: { defaultClass: "sprinkles_borderRadius_lg__qhecrd4j" }, base: { defaultClass: "sprinkles_borderRadius_base__qhecrd4k" }, full: { defaultClass: "sprinkles_borderRadius_full__qhecrd4l" } } }, display: { values: { block: { defaultClass: "sprinkles_display_block__qhecrd4m" }, "inline-block": { defaultClass: "sprinkles_display_inline-block__qhecrd4n" }, flex: { defaultClass: "sprinkles_display_flex__qhecrd4o" }, "inline-flex": { defaultClass: "sprinkles_display_inline-flex__qhecrd4p" }, grid: { defaultClass: "sprinkles_display_grid__qhecrd4q" }, none: { defaultClass: "sprinkles_display_none__qhecrd4r" } } }, flexDirection: { values: { row: { defaultClass: "sprinkles_flexDirection_row__qhecrd4s" }, column: { defaultClass: "sprinkles_flexDirection_column__qhecrd4t" }, "row-reverse": { defaultClass: "sprinkles_flexDirection_row-reverse__qhecrd4u" }, "column-reverse": { defaultClass: "sprinkles_flexDirection_column-reverse__qhecrd4v" } } }, alignItems: { values: { "flex-start": { defaultClass: "sprinkles_alignItems_flex-start__qhecrd4w" }, center: { defaultClass: "sprinkles_alignItems_center__qhecrd4x" }, "flex-end": { defaultClass: "sprinkles_alignItems_flex-end__qhecrd4y" }, stretch: { defaultClass: "sprinkles_alignItems_stretch__qhecrd4z" }, baseline: { defaultClass: "sprinkles_alignItems_baseline__qhecrd50" } } }, justifyContent: { values: { "flex-start": { defaultClass: "sprinkles_justifyContent_flex-start__qhecrd51" }, center: { defaultClass: "sprinkles_justifyContent_center__qhecrd52" }, "flex-end": { defaultClass: "sprinkles_justifyContent_flex-end__qhecrd53" }, "space-between": { defaultClass: "sprinkles_justifyContent_space-between__qhecrd54" }, "space-around": { defaultClass: "sprinkles_justifyContent_space-around__qhecrd55" }, "space-evenly": { defaultClass: "sprinkles_justifyContent_space-evenly__qhecrd56" } } }, flexWrap: { values: { nowrap: { defaultClass: "sprinkles_flexWrap_nowrap__qhecrd57" }, wrap: { defaultClass: "sprinkles_flexWrap_wrap__qhecrd58" } } } } });
|
|
111
|
+
|
|
112
|
+
// src/components/container/use-styles.ts
|
|
113
|
+
function useStyles(props) {
|
|
114
|
+
const styleProps = {};
|
|
115
|
+
const rest = {};
|
|
116
|
+
for (const key of Object.keys(props)) {
|
|
117
|
+
const value = props[key];
|
|
118
|
+
if (sprinkles.properties.has(key)) {
|
|
119
|
+
styleProps[key] = value;
|
|
120
|
+
} else {
|
|
121
|
+
rest[key] = value;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
return { className: sprinkles(styleProps), rest };
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// src/components/container/index.tsx
|
|
128
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
129
|
+
function Container({ as, ...props }) {
|
|
130
|
+
const Component = as ?? "div";
|
|
131
|
+
const { className, rest } = useStyles(props);
|
|
132
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...rest, className });
|
|
133
|
+
}
|
|
134
|
+
|
|
107
135
|
// src/components/typography/use-styles.ts
|
|
108
136
|
var import_react4 = require("react");
|
|
109
137
|
|
|
110
138
|
// src/theme/context/theme-context.tsx
|
|
111
139
|
var import_react3 = require("react");
|
|
112
|
-
var
|
|
140
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
113
141
|
var noop = () => {
|
|
114
142
|
};
|
|
115
143
|
var DEFAULT_VALUE = {
|
|
@@ -192,7 +220,7 @@ function ThemeProvider({
|
|
|
192
220
|
}),
|
|
193
221
|
[schema, mode, preference]
|
|
194
222
|
);
|
|
195
|
-
return /* @__PURE__ */ (0,
|
|
223
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThemeContext.Provider, { value, children });
|
|
196
224
|
}
|
|
197
225
|
function useTheme() {
|
|
198
226
|
return (0, import_react3.useContext)(ThemeContext) ?? DEFAULT_VALUE;
|
|
@@ -207,7 +235,7 @@ var base = "use-styles_base__d74jf60";
|
|
|
207
235
|
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" };
|
|
208
236
|
|
|
209
237
|
// src/components/typography/use-styles.ts
|
|
210
|
-
function
|
|
238
|
+
function useStyles2({
|
|
211
239
|
variant: variant2,
|
|
212
240
|
color: color2,
|
|
213
241
|
align: align2
|
|
@@ -227,7 +255,7 @@ function useStyles({
|
|
|
227
255
|
}
|
|
228
256
|
|
|
229
257
|
// src/components/typography/index.tsx
|
|
230
|
-
var
|
|
258
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
231
259
|
var defaultElement = {
|
|
232
260
|
display: "h1",
|
|
233
261
|
h1: "h1",
|
|
@@ -250,8 +278,8 @@ function Typography({
|
|
|
250
278
|
...rest
|
|
251
279
|
}) {
|
|
252
280
|
const Component = as ?? defaultElement[variant2];
|
|
253
|
-
const { text: text2 } =
|
|
254
|
-
return /* @__PURE__ */ (0,
|
|
281
|
+
const { text: text2 } = useStyles2({ variant: variant2, color: color2, align: align2 });
|
|
282
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...rest, className: text2 });
|
|
255
283
|
}
|
|
256
284
|
|
|
257
285
|
// src/components/button/use-styles.ts
|
|
@@ -267,7 +295,7 @@ var tone = { filledInk: "use-styles_tone_filledInk__1pbtill5", filledAccent: "us
|
|
|
267
295
|
function toneKey(variant2, tone4) {
|
|
268
296
|
return `${variant2}${tone4 === "ink" ? "Ink" : "Accent"}`;
|
|
269
297
|
}
|
|
270
|
-
function
|
|
298
|
+
function useStyles3({
|
|
271
299
|
variant: variant2 = "filled",
|
|
272
300
|
tone: tone4 = "ink",
|
|
273
301
|
size: size3 = "md",
|
|
@@ -290,7 +318,7 @@ function useStyles2({
|
|
|
290
318
|
}
|
|
291
319
|
|
|
292
320
|
// src/components/button/index.tsx
|
|
293
|
-
var
|
|
321
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
294
322
|
var ICON_SIZE = { sm: 14, md: 16, lg: 18 };
|
|
295
323
|
function Button({
|
|
296
324
|
variant: variant2,
|
|
@@ -303,12 +331,12 @@ function Button({
|
|
|
303
331
|
children,
|
|
304
332
|
...rest
|
|
305
333
|
}) {
|
|
306
|
-
const { container } =
|
|
334
|
+
const { container } = useStyles3({ variant: variant2, tone: tone4, size: size3, full: full2, className });
|
|
307
335
|
const iconSize = ICON_SIZE[size3];
|
|
308
|
-
return /* @__PURE__ */ (0,
|
|
309
|
-
StartIcon && /* @__PURE__ */ (0,
|
|
336
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("button", { className: container, ...rest, children: [
|
|
337
|
+
StartIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StartIcon, { size: iconSize }),
|
|
310
338
|
children,
|
|
311
|
-
EndIcon && /* @__PURE__ */ (0,
|
|
339
|
+
EndIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EndIcon, { size: iconSize })
|
|
312
340
|
] });
|
|
313
341
|
}
|
|
314
342
|
|
|
@@ -324,7 +352,7 @@ var root2 = "use-styles_root__1n7v7yj0";
|
|
|
324
352
|
var vertical = "use-styles_vertical__1n7v7yj2";
|
|
325
353
|
|
|
326
354
|
// src/components/divider/use-styles.ts
|
|
327
|
-
function
|
|
355
|
+
function useStyles4({ vertical: vertical2, hasLabel }) {
|
|
328
356
|
const { themeClass } = useTheme();
|
|
329
357
|
const root24 = (0, import_react6.useMemo)(
|
|
330
358
|
() => [
|
|
@@ -338,18 +366,18 @@ function useStyles3({ vertical: vertical2, hasLabel }) {
|
|
|
338
366
|
}
|
|
339
367
|
|
|
340
368
|
// src/components/divider/index.tsx
|
|
341
|
-
var
|
|
369
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
342
370
|
function Divider({ vertical: vertical2, label: label7, ...rest }) {
|
|
343
371
|
const hasLabel = label7 != null;
|
|
344
|
-
const { root: root24, line: line2, label: labelClass } =
|
|
372
|
+
const { root: root24, line: line2, label: labelClass } = useStyles4({ vertical: vertical2, hasLabel });
|
|
345
373
|
if (hasLabel) {
|
|
346
|
-
return /* @__PURE__ */ (0,
|
|
347
|
-
/* @__PURE__ */ (0,
|
|
348
|
-
/* @__PURE__ */ (0,
|
|
349
|
-
/* @__PURE__ */ (0,
|
|
374
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { role: "separator", className: root24, ...rest, children: [
|
|
375
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: line2 }),
|
|
376
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: labelClass, children: label7 }),
|
|
377
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: line2 })
|
|
350
378
|
] });
|
|
351
379
|
}
|
|
352
|
-
return /* @__PURE__ */ (0,
|
|
380
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { role: "separator", className: root24, ...rest });
|
|
353
381
|
}
|
|
354
382
|
|
|
355
383
|
// src/components/avatar/use-styles.ts
|
|
@@ -361,7 +389,7 @@ var size2 = { sm: "use-styles_size_sm__1mn1rmu1", md: "use-styles_size_md__1mn1r
|
|
|
361
389
|
var variant = { "default": "use-styles_variant_default__1mn1rmu4", filled: "use-styles_variant_filled__1mn1rmu5" };
|
|
362
390
|
|
|
363
391
|
// src/components/avatar/use-styles.ts
|
|
364
|
-
function
|
|
392
|
+
function useStyles5({
|
|
365
393
|
size: size3 = "md",
|
|
366
394
|
filled,
|
|
367
395
|
className
|
|
@@ -381,10 +409,10 @@ function useStyles4({
|
|
|
381
409
|
}
|
|
382
410
|
|
|
383
411
|
// src/components/avatar/index.tsx
|
|
384
|
-
var
|
|
412
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
385
413
|
function Avatar({ size: size3, filled, className, children, ...rest }) {
|
|
386
|
-
const { root: root24 } =
|
|
387
|
-
return /* @__PURE__ */ (0,
|
|
414
|
+
const { root: root24 } = useStyles5({ size: size3, filled, className });
|
|
415
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: root24, ...rest, children });
|
|
388
416
|
}
|
|
389
417
|
|
|
390
418
|
// src/components/badge/use-styles.ts
|
|
@@ -396,7 +424,7 @@ var root4 = "use-styles_root__1wpei6p0";
|
|
|
396
424
|
var tone2 = { ink: "use-styles_tone_ink__1wpei6p2", accent: "use-styles_tone_accent__1wpei6p3" };
|
|
397
425
|
|
|
398
426
|
// src/components/badge/use-styles.ts
|
|
399
|
-
function
|
|
427
|
+
function useStyles6({
|
|
400
428
|
tone: tone4 = "ink",
|
|
401
429
|
className
|
|
402
430
|
}) {
|
|
@@ -410,12 +438,12 @@ function useStyles5({
|
|
|
410
438
|
}
|
|
411
439
|
|
|
412
440
|
// src/components/badge/index.tsx
|
|
413
|
-
var
|
|
441
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
414
442
|
function Badge({ count, tone: tone4, className, children, ...rest }) {
|
|
415
|
-
const { root: root24, dot: dot3 } =
|
|
416
|
-
return /* @__PURE__ */ (0,
|
|
443
|
+
const { root: root24, dot: dot3 } = useStyles6({ tone: tone4, className });
|
|
444
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: root24, ...rest, children: [
|
|
417
445
|
children,
|
|
418
|
-
count != null && /* @__PURE__ */ (0,
|
|
446
|
+
count != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: dot3, children: count })
|
|
419
447
|
] });
|
|
420
448
|
}
|
|
421
449
|
|
|
@@ -429,7 +457,7 @@ var spinner = "use-styles_spinner__kbop7v5";
|
|
|
429
457
|
var track = "use-styles_track__kbop7v2";
|
|
430
458
|
|
|
431
459
|
// src/components/progress/use-styles.ts
|
|
432
|
-
function
|
|
460
|
+
function useStyles7({
|
|
433
461
|
variant: variant2 = "linear",
|
|
434
462
|
value,
|
|
435
463
|
className
|
|
@@ -450,7 +478,7 @@ function useStyles6({
|
|
|
450
478
|
}
|
|
451
479
|
|
|
452
480
|
// src/components/progress/index.tsx
|
|
453
|
-
var
|
|
481
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
454
482
|
function Progress({
|
|
455
483
|
variant: variant2 = "linear",
|
|
456
484
|
value,
|
|
@@ -458,10 +486,10 @@ function Progress({
|
|
|
458
486
|
className,
|
|
459
487
|
...rest
|
|
460
488
|
}) {
|
|
461
|
-
const { track: track4, bar: bar2, spinner: spinner2 } =
|
|
489
|
+
const { track: track4, bar: bar2, spinner: spinner2 } = useStyles7({ variant: variant2, value, className });
|
|
462
490
|
const indeterminate2 = value === void 0;
|
|
463
491
|
if (variant2 === "circular") {
|
|
464
|
-
return /* @__PURE__ */ (0,
|
|
492
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
465
493
|
"span",
|
|
466
494
|
{
|
|
467
495
|
className: spinner2,
|
|
@@ -474,7 +502,7 @@ function Progress({
|
|
|
474
502
|
}
|
|
475
503
|
);
|
|
476
504
|
}
|
|
477
|
-
return /* @__PURE__ */ (0,
|
|
505
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
478
506
|
"div",
|
|
479
507
|
{
|
|
480
508
|
className: track4,
|
|
@@ -483,15 +511,15 @@ function Progress({
|
|
|
483
511
|
"aria-valuemin": indeterminate2 ? void 0 : 0,
|
|
484
512
|
"aria-valuemax": indeterminate2 ? void 0 : 100,
|
|
485
513
|
...rest,
|
|
486
|
-
children: /* @__PURE__ */ (0,
|
|
514
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: bar2, style: indeterminate2 ? void 0 : { width: `${value}%` } })
|
|
487
515
|
}
|
|
488
516
|
);
|
|
489
517
|
}
|
|
490
518
|
|
|
491
519
|
// src/components/icons/x/index.tsx
|
|
492
|
-
var
|
|
520
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
493
521
|
function XIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
494
|
-
return /* @__PURE__ */ (0,
|
|
522
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
495
523
|
"svg",
|
|
496
524
|
{
|
|
497
525
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -506,8 +534,8 @@ function XIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
506
534
|
"aria-hidden": "true",
|
|
507
535
|
...rest,
|
|
508
536
|
children: [
|
|
509
|
-
/* @__PURE__ */ (0,
|
|
510
|
-
/* @__PURE__ */ (0,
|
|
537
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M18 6 6 18" }),
|
|
538
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m6 6 12 12" })
|
|
511
539
|
]
|
|
512
540
|
}
|
|
513
541
|
);
|
|
@@ -524,7 +552,7 @@ var selected = "use-styles_selected__1axilf43";
|
|
|
524
552
|
var tone3 = { ink: "use-styles_tone_ink__1axilf41", accent: "use-styles_tone_accent__1axilf42" };
|
|
525
553
|
|
|
526
554
|
// src/components/chip/use-styles.ts
|
|
527
|
-
function
|
|
555
|
+
function useStyles8({
|
|
528
556
|
selected: selected3,
|
|
529
557
|
tone: tone4 = "ink",
|
|
530
558
|
clickable: clickable2
|
|
@@ -543,24 +571,24 @@ function useStyles7({
|
|
|
543
571
|
}
|
|
544
572
|
|
|
545
573
|
// src/components/chip/index.tsx
|
|
546
|
-
var
|
|
574
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
547
575
|
function Chip({ selected: selected3, tone: tone4, onDelete, onClick, children, ...rest }) {
|
|
548
576
|
const clickable2 = Boolean(onClick);
|
|
549
|
-
const { root: root24, deleteBtn: deleteBtn2 } =
|
|
577
|
+
const { root: root24, deleteBtn: deleteBtn2 } = useStyles8({ selected: selected3, tone: tone4, clickable: clickable2 });
|
|
550
578
|
const handleDelete = (event) => {
|
|
551
579
|
event.stopPropagation();
|
|
552
580
|
onDelete?.();
|
|
553
581
|
};
|
|
554
|
-
return /* @__PURE__ */ (0,
|
|
582
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: root24, onClick, ...rest, children: [
|
|
555
583
|
children,
|
|
556
|
-
onDelete && /* @__PURE__ */ (0,
|
|
584
|
+
onDelete && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: deleteBtn2, "aria-label": "Remove", onClick: handleDelete, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(XIcon, { size: 13 }) })
|
|
557
585
|
] });
|
|
558
586
|
}
|
|
559
587
|
|
|
560
588
|
// src/components/icons/check/index.tsx
|
|
561
|
-
var
|
|
589
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
562
590
|
function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
563
|
-
return /* @__PURE__ */ (0,
|
|
591
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
564
592
|
"svg",
|
|
565
593
|
{
|
|
566
594
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -574,7 +602,7 @@ function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
574
602
|
strokeLinejoin: "round",
|
|
575
603
|
"aria-hidden": "true",
|
|
576
604
|
...rest,
|
|
577
|
-
children: /* @__PURE__ */ (0,
|
|
605
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M20 6 9 17l-5-5" })
|
|
578
606
|
}
|
|
579
607
|
);
|
|
580
608
|
}
|
|
@@ -587,11 +615,11 @@ var box = "use-styles_box__9zoga91";
|
|
|
587
615
|
var boxChecked = "use-styles_boxChecked__9zoga92";
|
|
588
616
|
var check = "use-styles_check__9zoga93";
|
|
589
617
|
var disabled = "use-styles_disabled__9zoga94";
|
|
590
|
-
var input = "
|
|
618
|
+
var input = "surfaces_srOnly__1qa7atn0";
|
|
591
619
|
var root6 = "use-styles_root__9zoga90";
|
|
592
620
|
|
|
593
621
|
// src/components/checkbox/use-styles.ts
|
|
594
|
-
function
|
|
622
|
+
function useStyles9({ checked, disabled: disabled3 }) {
|
|
595
623
|
const { themeClass } = useTheme();
|
|
596
624
|
const root24 = (0, import_react11.useMemo)(
|
|
597
625
|
() => [themeClass, root6, disabled3 && disabled].filter(Boolean).join(" "),
|
|
@@ -605,7 +633,7 @@ function useStyles8({ checked, disabled: disabled3 }) {
|
|
|
605
633
|
}
|
|
606
634
|
|
|
607
635
|
// src/components/checkbox/index.tsx
|
|
608
|
-
var
|
|
636
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
609
637
|
function Checkbox({
|
|
610
638
|
checked = false,
|
|
611
639
|
onChange,
|
|
@@ -613,13 +641,13 @@ function Checkbox({
|
|
|
613
641
|
disabled: disabled3 = false,
|
|
614
642
|
id
|
|
615
643
|
}) {
|
|
616
|
-
const { root: root24, input: input6, box: box2, check: check2 } =
|
|
644
|
+
const { root: root24, input: input6, box: box2, check: check2 } = useStyles9({ checked, disabled: disabled3 });
|
|
617
645
|
const handleChange = (e) => {
|
|
618
646
|
if (disabled3) return;
|
|
619
647
|
onChange?.(e.target.checked);
|
|
620
648
|
};
|
|
621
|
-
return /* @__PURE__ */ (0,
|
|
622
|
-
/* @__PURE__ */ (0,
|
|
649
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: root24, children: [
|
|
650
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
623
651
|
"input",
|
|
624
652
|
{
|
|
625
653
|
type: "checkbox",
|
|
@@ -630,7 +658,7 @@ function Checkbox({
|
|
|
630
658
|
onChange: handleChange
|
|
631
659
|
}
|
|
632
660
|
),
|
|
633
|
-
/* @__PURE__ */ (0,
|
|
661
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: box2, children: checked && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CheckIcon, { size: 12, className: check2 }) }),
|
|
634
662
|
label7
|
|
635
663
|
] });
|
|
636
664
|
}
|
|
@@ -642,12 +670,12 @@ var import_react12 = require("react");
|
|
|
642
670
|
var circle = "use-styles_circle__vy61b42";
|
|
643
671
|
var disabled2 = "use-styles_disabled__vy61b41";
|
|
644
672
|
var dot2 = "use-styles_dot__vy61b43";
|
|
645
|
-
var input2 = "
|
|
673
|
+
var input2 = "surfaces_srOnly__1qa7atn0";
|
|
646
674
|
var label2 = "use-styles_label__vy61b44";
|
|
647
675
|
var root7 = "use-styles_root__vy61b40";
|
|
648
676
|
|
|
649
677
|
// src/components/radio/use-styles.ts
|
|
650
|
-
function
|
|
678
|
+
function useStyles10({
|
|
651
679
|
disabled: disabled3,
|
|
652
680
|
className
|
|
653
681
|
}) {
|
|
@@ -666,11 +694,11 @@ function useStyles9({
|
|
|
666
694
|
}
|
|
667
695
|
|
|
668
696
|
// src/components/radio/index.tsx
|
|
669
|
-
var
|
|
697
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
670
698
|
function Radio({ checked, onChange, label: label7, name, value, disabled: disabled3 }) {
|
|
671
|
-
const { root: root24, input: input6, circle: circle2, dot: dot3, label: labelClass } =
|
|
672
|
-
return /* @__PURE__ */ (0,
|
|
673
|
-
/* @__PURE__ */ (0,
|
|
699
|
+
const { root: root24, input: input6, circle: circle2, dot: dot3, label: labelClass } = useStyles10({ disabled: disabled3 });
|
|
700
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: root24, children: [
|
|
701
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
674
702
|
"input",
|
|
675
703
|
{
|
|
676
704
|
className: input6,
|
|
@@ -682,8 +710,8 @@ function Radio({ checked, onChange, label: label7, name, value, disabled: disabl
|
|
|
682
710
|
onChange
|
|
683
711
|
}
|
|
684
712
|
),
|
|
685
|
-
/* @__PURE__ */ (0,
|
|
686
|
-
label7 != null && /* @__PURE__ */ (0,
|
|
713
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: circle2, children: checked && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: dot3 }) }),
|
|
714
|
+
label7 != null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: labelClass, children: label7 })
|
|
687
715
|
] });
|
|
688
716
|
}
|
|
689
717
|
|
|
@@ -691,7 +719,7 @@ function Radio({ checked, onChange, label: label7, name, value, disabled: disabl
|
|
|
691
719
|
var import_react13 = require("react");
|
|
692
720
|
|
|
693
721
|
// src/components/switch/use-styles.css.ts
|
|
694
|
-
var input3 = "
|
|
722
|
+
var input3 = "surfaces_srOnly__1qa7atn0";
|
|
695
723
|
var knob = "use-styles_knob__1r6kem73";
|
|
696
724
|
var knobChecked = "use-styles_knobChecked__1r6kem74";
|
|
697
725
|
var label3 = "use-styles_label__1r6kem75";
|
|
@@ -700,7 +728,7 @@ var track2 = "use-styles_track__1r6kem71";
|
|
|
700
728
|
var trackChecked = "use-styles_trackChecked__1r6kem72";
|
|
701
729
|
|
|
702
730
|
// src/components/switch/use-styles.ts
|
|
703
|
-
function
|
|
731
|
+
function useStyles11({ checked }) {
|
|
704
732
|
const { themeClass } = useTheme();
|
|
705
733
|
return (0, import_react13.useMemo)(
|
|
706
734
|
() => ({
|
|
@@ -715,11 +743,11 @@ function useStyles10({ checked }) {
|
|
|
715
743
|
}
|
|
716
744
|
|
|
717
745
|
// src/components/switch/index.tsx
|
|
718
|
-
var
|
|
746
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
719
747
|
function Switch({ checked = false, onChange, label: label7, disabled: disabled3 }) {
|
|
720
|
-
const { root: root24, input: input6, track: track4, knob: knob2, label: labelClass } =
|
|
721
|
-
return /* @__PURE__ */ (0,
|
|
722
|
-
/* @__PURE__ */ (0,
|
|
748
|
+
const { root: root24, input: input6, track: track4, knob: knob2, label: labelClass } = useStyles11({ checked });
|
|
749
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: root24, children: [
|
|
750
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
723
751
|
"input",
|
|
724
752
|
{
|
|
725
753
|
type: "checkbox",
|
|
@@ -734,8 +762,8 @@ function Switch({ checked = false, onChange, label: label7, disabled: disabled3
|
|
|
734
762
|
}
|
|
735
763
|
}
|
|
736
764
|
),
|
|
737
|
-
/* @__PURE__ */ (0,
|
|
738
|
-
label7 != null && /* @__PURE__ */ (0,
|
|
765
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: track4, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: knob2 }) }),
|
|
766
|
+
label7 != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: labelClass, children: label7 })
|
|
739
767
|
] });
|
|
740
768
|
}
|
|
741
769
|
|
|
@@ -760,7 +788,7 @@ var startIconSlot = "use-styles_startIconSlot__1c3cgda";
|
|
|
760
788
|
var trailingSlot = "use-styles_trailingSlot__1c3cgdb";
|
|
761
789
|
|
|
762
790
|
// src/components/base-field/use-styles.ts
|
|
763
|
-
function
|
|
791
|
+
function useStyles12({ error, hasStartIcon, hasTrailing, className }) {
|
|
764
792
|
const { themeClass } = useTheme();
|
|
765
793
|
return (0, import_react14.useMemo)(() => {
|
|
766
794
|
const root24 = [themeClass, root9].filter(Boolean).join(" ");
|
|
@@ -786,7 +814,7 @@ function useStyles11({ error, hasStartIcon, hasTrailing, className }) {
|
|
|
786
814
|
}
|
|
787
815
|
|
|
788
816
|
// src/components/base-field/index.tsx
|
|
789
|
-
var
|
|
817
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
790
818
|
function BaseField({
|
|
791
819
|
label: label7,
|
|
792
820
|
help,
|
|
@@ -800,7 +828,7 @@ function BaseField({
|
|
|
800
828
|
const autoId = (0, import_react15.useId)();
|
|
801
829
|
const controlId = id ?? autoId;
|
|
802
830
|
const helpId = help != null ? `${controlId}-help` : void 0;
|
|
803
|
-
const classes =
|
|
831
|
+
const classes = useStyles12({
|
|
804
832
|
error,
|
|
805
833
|
hasStartIcon: StartIcon != null,
|
|
806
834
|
hasTrailing: trailing2 != null,
|
|
@@ -812,19 +840,19 @@ function BaseField({
|
|
|
812
840
|
"aria-describedby": helpId,
|
|
813
841
|
"aria-invalid": error ? true : void 0
|
|
814
842
|
};
|
|
815
|
-
return /* @__PURE__ */ (0,
|
|
816
|
-
label7 != null && /* @__PURE__ */ (0,
|
|
817
|
-
/* @__PURE__ */ (0,
|
|
818
|
-
StartIcon != null && /* @__PURE__ */ (0,
|
|
843
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: classes.root, children: [
|
|
844
|
+
label7 != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { htmlFor: controlId, className: classes.labelText, children: label7 }),
|
|
845
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: classes.field, children: [
|
|
846
|
+
StartIcon != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: classes.startIconSlot, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StartIcon, { size: 18 }) }),
|
|
819
847
|
children(control),
|
|
820
|
-
trailing2 != null && /* @__PURE__ */ (0,
|
|
848
|
+
trailing2 != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: classes.trailingSlot, children: trailing2 })
|
|
821
849
|
] }),
|
|
822
|
-
help != null && /* @__PURE__ */ (0,
|
|
850
|
+
help != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { id: helpId, className: classes.helpText, children: help })
|
|
823
851
|
] });
|
|
824
852
|
}
|
|
825
853
|
|
|
826
854
|
// src/components/text-field/index.tsx
|
|
827
|
-
var
|
|
855
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
828
856
|
function TextField({
|
|
829
857
|
label: label7,
|
|
830
858
|
help,
|
|
@@ -838,7 +866,7 @@ function TextField({
|
|
|
838
866
|
id,
|
|
839
867
|
...rest
|
|
840
868
|
}) {
|
|
841
|
-
return /* @__PURE__ */ (0,
|
|
869
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
842
870
|
BaseField,
|
|
843
871
|
{
|
|
844
872
|
label: label7,
|
|
@@ -847,7 +875,7 @@ function TextField({
|
|
|
847
875
|
startIcon,
|
|
848
876
|
id,
|
|
849
877
|
className,
|
|
850
|
-
children: (control) => multiline ? /* @__PURE__ */ (0,
|
|
878
|
+
children: (control) => multiline ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
851
879
|
"textarea",
|
|
852
880
|
{
|
|
853
881
|
...rest,
|
|
@@ -855,7 +883,7 @@ function TextField({
|
|
|
855
883
|
rows: rows ?? 4,
|
|
856
884
|
onChange: (e) => onChange?.(e.target.value)
|
|
857
885
|
}
|
|
858
|
-
) : /* @__PURE__ */ (0,
|
|
886
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
859
887
|
"input",
|
|
860
888
|
{
|
|
861
889
|
...rest,
|
|
@@ -872,9 +900,9 @@ function TextField({
|
|
|
872
900
|
var import_react17 = require("react");
|
|
873
901
|
|
|
874
902
|
// src/components/icons/eye/index.tsx
|
|
875
|
-
var
|
|
903
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
876
904
|
function EyeIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
877
|
-
return /* @__PURE__ */ (0,
|
|
905
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
878
906
|
"svg",
|
|
879
907
|
{
|
|
880
908
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -889,17 +917,17 @@ function EyeIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
889
917
|
"aria-hidden": "true",
|
|
890
918
|
...rest,
|
|
891
919
|
children: [
|
|
892
|
-
/* @__PURE__ */ (0,
|
|
893
|
-
/* @__PURE__ */ (0,
|
|
920
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
|
|
921
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "12", cy: "12", r: "3" })
|
|
894
922
|
]
|
|
895
923
|
}
|
|
896
924
|
);
|
|
897
925
|
}
|
|
898
926
|
|
|
899
927
|
// src/components/icons/eye-off/index.tsx
|
|
900
|
-
var
|
|
928
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
901
929
|
function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
902
|
-
return /* @__PURE__ */ (0,
|
|
930
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
903
931
|
"svg",
|
|
904
932
|
{
|
|
905
933
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -914,10 +942,10 @@ function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
914
942
|
"aria-hidden": "true",
|
|
915
943
|
...rest,
|
|
916
944
|
children: [
|
|
917
|
-
/* @__PURE__ */ (0,
|
|
918
|
-
/* @__PURE__ */ (0,
|
|
919
|
-
/* @__PURE__ */ (0,
|
|
920
|
-
/* @__PURE__ */ (0,
|
|
945
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
|
|
946
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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" }),
|
|
947
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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" }),
|
|
948
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "m2 2 20 20" })
|
|
921
949
|
]
|
|
922
950
|
}
|
|
923
951
|
);
|
|
@@ -930,12 +958,12 @@ var import_react16 = require("react");
|
|
|
930
958
|
var revealButton = "use-styles_revealButton__rsu9d50";
|
|
931
959
|
|
|
932
960
|
// src/components/password-field/use-styles.ts
|
|
933
|
-
function
|
|
961
|
+
function useStyles13() {
|
|
934
962
|
return (0, import_react16.useMemo)(() => ({ revealButton }), []);
|
|
935
963
|
}
|
|
936
964
|
|
|
937
965
|
// src/components/password-field/index.tsx
|
|
938
|
-
var
|
|
966
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
939
967
|
function PasswordField({
|
|
940
968
|
label: label7,
|
|
941
969
|
help,
|
|
@@ -947,14 +975,14 @@ function PasswordField({
|
|
|
947
975
|
...rest
|
|
948
976
|
}) {
|
|
949
977
|
const [reveal, setReveal] = (0, import_react17.useState)(false);
|
|
950
|
-
const classes =
|
|
978
|
+
const classes = useStyles13();
|
|
951
979
|
const handleChange = (e) => {
|
|
952
980
|
onChange?.(e.target.value);
|
|
953
981
|
};
|
|
954
982
|
const handleToggleMouseDown = (e) => {
|
|
955
983
|
e.preventDefault();
|
|
956
984
|
};
|
|
957
|
-
const toggleButton = /* @__PURE__ */ (0,
|
|
985
|
+
const toggleButton = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
958
986
|
"button",
|
|
959
987
|
{
|
|
960
988
|
type: "button",
|
|
@@ -963,10 +991,10 @@ function PasswordField({
|
|
|
963
991
|
"aria-label": reveal ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a",
|
|
964
992
|
onMouseDown: handleToggleMouseDown,
|
|
965
993
|
onClick: () => setReveal((r) => !r),
|
|
966
|
-
children: reveal ? /* @__PURE__ */ (0,
|
|
994
|
+
children: reveal ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(EyeOffIcon, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(EyeIcon, { size: 18 })
|
|
967
995
|
}
|
|
968
996
|
);
|
|
969
|
-
return /* @__PURE__ */ (0,
|
|
997
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
970
998
|
BaseField,
|
|
971
999
|
{
|
|
972
1000
|
label: label7,
|
|
@@ -976,14 +1004,14 @@ function PasswordField({
|
|
|
976
1004
|
trailing: toggleButton,
|
|
977
1005
|
id,
|
|
978
1006
|
className,
|
|
979
|
-
children: (control) => /* @__PURE__ */ (0,
|
|
1007
|
+
children: (control) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { ...rest, ...control, type: reveal ? "text" : "password", onChange: handleChange })
|
|
980
1008
|
}
|
|
981
1009
|
);
|
|
982
1010
|
}
|
|
983
1011
|
|
|
984
1012
|
// src/components/money-field/index.tsx
|
|
985
1013
|
var import_react18 = require("react");
|
|
986
|
-
var
|
|
1014
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
987
1015
|
function parseAmount(raw) {
|
|
988
1016
|
const cleaned = raw.replace(/[^0-9.-]/g, "");
|
|
989
1017
|
if (cleaned === "" || cleaned === "-" || cleaned === ".") return null;
|
|
@@ -1023,7 +1051,7 @@ function MoneyField({
|
|
|
1023
1051
|
onChange?.(parseAmount(draft));
|
|
1024
1052
|
onBlur?.(e);
|
|
1025
1053
|
};
|
|
1026
|
-
return /* @__PURE__ */ (0,
|
|
1054
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1027
1055
|
BaseField,
|
|
1028
1056
|
{
|
|
1029
1057
|
label: label7,
|
|
@@ -1032,7 +1060,7 @@ function MoneyField({
|
|
|
1032
1060
|
startIcon,
|
|
1033
1061
|
id,
|
|
1034
1062
|
className,
|
|
1035
|
-
children: (control) => /* @__PURE__ */ (0,
|
|
1063
|
+
children: (control) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1036
1064
|
"input",
|
|
1037
1065
|
{
|
|
1038
1066
|
...rest,
|
|
@@ -1057,7 +1085,7 @@ var active = "use-styles_active__18np0q01";
|
|
|
1057
1085
|
var root10 = "use-styles_root__18np0q00";
|
|
1058
1086
|
|
|
1059
1087
|
// src/components/icon-button/use-styles.ts
|
|
1060
|
-
function
|
|
1088
|
+
function useStyles14({
|
|
1061
1089
|
active: active2 = false,
|
|
1062
1090
|
tone: tone4 = "ink"
|
|
1063
1091
|
}) {
|
|
@@ -1070,10 +1098,10 @@ function useStyles13({
|
|
|
1070
1098
|
}
|
|
1071
1099
|
|
|
1072
1100
|
// src/components/icon-button/index.tsx
|
|
1073
|
-
var
|
|
1101
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1074
1102
|
function IconButton({ icon: Icon, active: active2, tone: tone4, title, ...rest }) {
|
|
1075
|
-
const { root: root24 } =
|
|
1076
|
-
return /* @__PURE__ */ (0,
|
|
1103
|
+
const { root: root24 } = useStyles14({ active: active2, tone: tone4 });
|
|
1104
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { className: root24, "aria-label": title, title, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { size: 18 }) });
|
|
1077
1105
|
}
|
|
1078
1106
|
|
|
1079
1107
|
// src/components/card/use-styles.ts
|
|
@@ -1086,29 +1114,29 @@ var header = "use-styles_header__1fuvd021";
|
|
|
1086
1114
|
var root11 = "use-styles_root__1fuvd020";
|
|
1087
1115
|
|
|
1088
1116
|
// src/components/card/use-styles.ts
|
|
1089
|
-
function
|
|
1117
|
+
function useStyles15() {
|
|
1090
1118
|
const { themeClass } = useTheme();
|
|
1091
1119
|
const root24 = (0, import_react20.useMemo)(() => `${themeClass} ${root11}`, [themeClass]);
|
|
1092
1120
|
return { root: root24, header, body, footer };
|
|
1093
1121
|
}
|
|
1094
1122
|
|
|
1095
1123
|
// src/components/card/index.tsx
|
|
1096
|
-
var
|
|
1124
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1097
1125
|
function CardRoot({ children, ...rest }) {
|
|
1098
|
-
const { root: root24 } =
|
|
1099
|
-
return /* @__PURE__ */ (0,
|
|
1126
|
+
const { root: root24 } = useStyles15();
|
|
1127
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: root24, ...rest, children });
|
|
1100
1128
|
}
|
|
1101
1129
|
function CardHeader({ children, ...rest }) {
|
|
1102
|
-
const { header: header3 } =
|
|
1103
|
-
return /* @__PURE__ */ (0,
|
|
1130
|
+
const { header: header3 } = useStyles15();
|
|
1131
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: header3, ...rest, children });
|
|
1104
1132
|
}
|
|
1105
1133
|
function CardBody({ children, ...rest }) {
|
|
1106
|
-
const { body: body3 } =
|
|
1107
|
-
return /* @__PURE__ */ (0,
|
|
1134
|
+
const { body: body3 } = useStyles15();
|
|
1135
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: body3, ...rest, children });
|
|
1108
1136
|
}
|
|
1109
1137
|
function CardFooter({ children, ...rest }) {
|
|
1110
|
-
const { footer: footer2 } =
|
|
1111
|
-
return /* @__PURE__ */ (0,
|
|
1138
|
+
const { footer: footer2 } = useStyles15();
|
|
1139
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: footer2, ...rest, children });
|
|
1112
1140
|
}
|
|
1113
1141
|
CardRoot.displayName = "Card";
|
|
1114
1142
|
CardHeader.displayName = "Card.Header";
|
|
@@ -1121,9 +1149,9 @@ var Card = Object.assign(CardRoot, {
|
|
|
1121
1149
|
});
|
|
1122
1150
|
|
|
1123
1151
|
// src/components/icons/circle-check/index.tsx
|
|
1124
|
-
var
|
|
1152
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1125
1153
|
function CircleCheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
1126
|
-
return /* @__PURE__ */ (0,
|
|
1154
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1127
1155
|
"svg",
|
|
1128
1156
|
{
|
|
1129
1157
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1138,17 +1166,17 @@ function CircleCheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
1138
1166
|
"aria-hidden": "true",
|
|
1139
1167
|
...rest,
|
|
1140
1168
|
children: [
|
|
1141
|
-
/* @__PURE__ */ (0,
|
|
1142
|
-
/* @__PURE__ */ (0,
|
|
1169
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
1170
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "m9 12 2 2 4-4" })
|
|
1143
1171
|
]
|
|
1144
1172
|
}
|
|
1145
1173
|
);
|
|
1146
1174
|
}
|
|
1147
1175
|
|
|
1148
1176
|
// src/components/icons/circle-x/index.tsx
|
|
1149
|
-
var
|
|
1177
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1150
1178
|
function CircleXIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
1151
|
-
return /* @__PURE__ */ (0,
|
|
1179
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1152
1180
|
"svg",
|
|
1153
1181
|
{
|
|
1154
1182
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1163,18 +1191,18 @@ function CircleXIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
1163
1191
|
"aria-hidden": "true",
|
|
1164
1192
|
...rest,
|
|
1165
1193
|
children: [
|
|
1166
|
-
/* @__PURE__ */ (0,
|
|
1167
|
-
/* @__PURE__ */ (0,
|
|
1168
|
-
/* @__PURE__ */ (0,
|
|
1194
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
1195
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "m15 9-6 6" }),
|
|
1196
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "m9 9 6 6" })
|
|
1169
1197
|
]
|
|
1170
1198
|
}
|
|
1171
1199
|
);
|
|
1172
1200
|
}
|
|
1173
1201
|
|
|
1174
1202
|
// src/components/icons/info/index.tsx
|
|
1175
|
-
var
|
|
1203
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1176
1204
|
function InfoIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
1177
|
-
return /* @__PURE__ */ (0,
|
|
1205
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
1178
1206
|
"svg",
|
|
1179
1207
|
{
|
|
1180
1208
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1189,18 +1217,18 @@ function InfoIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
1189
1217
|
"aria-hidden": "true",
|
|
1190
1218
|
...rest,
|
|
1191
1219
|
children: [
|
|
1192
|
-
/* @__PURE__ */ (0,
|
|
1193
|
-
/* @__PURE__ */ (0,
|
|
1194
|
-
/* @__PURE__ */ (0,
|
|
1220
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
1221
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M12 16v-4" }),
|
|
1222
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M12 8h.01" })
|
|
1195
1223
|
]
|
|
1196
1224
|
}
|
|
1197
1225
|
);
|
|
1198
1226
|
}
|
|
1199
1227
|
|
|
1200
1228
|
// src/components/icons/triangle-alert/index.tsx
|
|
1201
|
-
var
|
|
1229
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1202
1230
|
function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
1203
|
-
return /* @__PURE__ */ (0,
|
|
1231
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1204
1232
|
"svg",
|
|
1205
1233
|
{
|
|
1206
1234
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1215,9 +1243,9 @@ function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
1215
1243
|
"aria-hidden": "true",
|
|
1216
1244
|
...rest,
|
|
1217
1245
|
children: [
|
|
1218
|
-
/* @__PURE__ */ (0,
|
|
1219
|
-
/* @__PURE__ */ (0,
|
|
1220
|
-
/* @__PURE__ */ (0,
|
|
1246
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("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" }),
|
|
1247
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M12 9v4" }),
|
|
1248
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M12 17h.01" })
|
|
1221
1249
|
]
|
|
1222
1250
|
}
|
|
1223
1251
|
);
|
|
@@ -1233,7 +1261,7 @@ var root12 = "use-styles_root__ivsh6u0";
|
|
|
1233
1261
|
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" };
|
|
1234
1262
|
|
|
1235
1263
|
// src/components/alert/use-styles.ts
|
|
1236
|
-
function
|
|
1264
|
+
function useStyles16({
|
|
1237
1265
|
severity: severity2 = "info",
|
|
1238
1266
|
className
|
|
1239
1267
|
}) {
|
|
@@ -1250,7 +1278,7 @@ function useStyles15({
|
|
|
1250
1278
|
}
|
|
1251
1279
|
|
|
1252
1280
|
// src/components/alert/index.tsx
|
|
1253
|
-
var
|
|
1281
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1254
1282
|
var defaultIcons = {
|
|
1255
1283
|
info: InfoIcon,
|
|
1256
1284
|
ok: CircleCheckIcon,
|
|
@@ -1265,13 +1293,13 @@ function Alert({
|
|
|
1265
1293
|
children,
|
|
1266
1294
|
...rest
|
|
1267
1295
|
}) {
|
|
1268
|
-
const styles =
|
|
1296
|
+
const styles = useStyles16({ severity: severity2, className });
|
|
1269
1297
|
const IconComponent = icon ?? defaultIcons[severity2];
|
|
1270
|
-
return /* @__PURE__ */ (0,
|
|
1271
|
-
/* @__PURE__ */ (0,
|
|
1272
|
-
/* @__PURE__ */ (0,
|
|
1273
|
-
title != null && /* @__PURE__ */ (0,
|
|
1274
|
-
children != null && /* @__PURE__ */ (0,
|
|
1298
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { role: "alert", className: styles.root, ...rest, children: [
|
|
1299
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: styles.iconSlot, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconComponent, {}) }),
|
|
1300
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: styles.content, children: [
|
|
1301
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Typography, { variant: "h4", children: title }),
|
|
1302
|
+
children != null && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Typography, { variant: "body", color: "fg2", children })
|
|
1275
1303
|
] })
|
|
1276
1304
|
] });
|
|
1277
1305
|
}
|
|
@@ -1283,12 +1311,12 @@ var import_react23 = require("react");
|
|
|
1283
1311
|
var import_react22 = require("react");
|
|
1284
1312
|
|
|
1285
1313
|
// src/components/tooltip/use-styles.css.ts
|
|
1286
|
-
var bubble = "use-styles_bubble__h9kvh1
|
|
1314
|
+
var bubble = "use-styles_bubble__h9kvh1 surfaces_inkySurface__1qa7atn2";
|
|
1287
1315
|
var placement = { top: "use-styles_placement_top__h9kvh2", bottom: "use-styles_placement_bottom__h9kvh3" };
|
|
1288
1316
|
var wrapper = "use-styles_wrapper__h9kvh0";
|
|
1289
1317
|
|
|
1290
1318
|
// src/components/tooltip/use-styles.ts
|
|
1291
|
-
function
|
|
1319
|
+
function useStyles17({
|
|
1292
1320
|
placement: placement2 = "top"
|
|
1293
1321
|
}) {
|
|
1294
1322
|
const { themeClass } = useTheme();
|
|
@@ -1304,19 +1332,19 @@ function useStyles16({
|
|
|
1304
1332
|
}
|
|
1305
1333
|
|
|
1306
1334
|
// src/components/tooltip/index.tsx
|
|
1307
|
-
var
|
|
1335
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1308
1336
|
function Tooltip({ label: label7, children, placement: placement2 }) {
|
|
1309
1337
|
const [open, setOpen] = (0, import_react23.useState)(false);
|
|
1310
1338
|
const tooltipId = (0, import_react23.useId)();
|
|
1311
|
-
const { wrapper: wrapper4, bubble: bubble2 } =
|
|
1339
|
+
const { wrapper: wrapper4, bubble: bubble2 } = useStyles17({ placement: placement2 });
|
|
1312
1340
|
const show = () => setOpen(true);
|
|
1313
1341
|
const hide = () => setOpen(false);
|
|
1314
1342
|
const previousDescribedBy = children.props["aria-describedby"];
|
|
1315
1343
|
const describedBy = open ? [previousDescribedBy, tooltipId].filter(Boolean).join(" ") : previousDescribedBy;
|
|
1316
1344
|
const trigger2 = (0, import_react23.cloneElement)(children, { "aria-describedby": describedBy });
|
|
1317
|
-
return /* @__PURE__ */ (0,
|
|
1345
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: wrapper4, onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, children: [
|
|
1318
1346
|
trigger2,
|
|
1319
|
-
open && /* @__PURE__ */ (0,
|
|
1347
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { id: tooltipId, role: "tooltip", className: bubble2, children: label7 })
|
|
1320
1348
|
] });
|
|
1321
1349
|
}
|
|
1322
1350
|
|
|
@@ -1324,9 +1352,9 @@ function Tooltip({ label: label7, children, placement: placement2 }) {
|
|
|
1324
1352
|
var import_react25 = require("react");
|
|
1325
1353
|
|
|
1326
1354
|
// src/components/icons/chevron-down/index.tsx
|
|
1327
|
-
var
|
|
1355
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1328
1356
|
function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
1329
|
-
return /* @__PURE__ */ (0,
|
|
1357
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1330
1358
|
"svg",
|
|
1331
1359
|
{
|
|
1332
1360
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1340,7 +1368,7 @@ function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
1340
1368
|
strokeLinejoin: "round",
|
|
1341
1369
|
"aria-hidden": "true",
|
|
1342
1370
|
...rest,
|
|
1343
|
-
children: /* @__PURE__ */ (0,
|
|
1371
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { d: "m6 9 6 6 6-6" })
|
|
1344
1372
|
}
|
|
1345
1373
|
);
|
|
1346
1374
|
}
|
|
@@ -1352,7 +1380,7 @@ var import_react24 = require("react");
|
|
|
1352
1380
|
var chevron = "use-styles_chevron__1w1czpb4";
|
|
1353
1381
|
var chevronOpen = "use-styles_chevronOpen__1w1czpb5";
|
|
1354
1382
|
var label4 = "use-styles_label__1w1czpb1";
|
|
1355
|
-
var menu = "use-styles_menu__1w1czpb6
|
|
1383
|
+
var menu = "use-styles_menu__1w1czpb6 surfaces_panelSurface__1qa7atn1";
|
|
1356
1384
|
var option = "use-styles_option__1w1czpb7";
|
|
1357
1385
|
var optionActive = "use-styles_optionActive__1w1czpb9";
|
|
1358
1386
|
var optionSelected = "use-styles_optionSelected__1w1czpb8";
|
|
@@ -1361,7 +1389,7 @@ var root13 = "use-styles_root__1w1czpb0";
|
|
|
1361
1389
|
var trigger = "use-styles_trigger__1w1czpb2";
|
|
1362
1390
|
|
|
1363
1391
|
// src/components/select/use-styles.ts
|
|
1364
|
-
function
|
|
1392
|
+
function useStyles18({
|
|
1365
1393
|
open = false
|
|
1366
1394
|
}) {
|
|
1367
1395
|
const { themeClass } = useTheme();
|
|
@@ -1380,7 +1408,7 @@ function useStyles17({
|
|
|
1380
1408
|
}
|
|
1381
1409
|
|
|
1382
1410
|
// src/components/select/index.tsx
|
|
1383
|
-
var
|
|
1411
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1384
1412
|
function Select({ options, value, onChange, placeholder: placeholder2, label: label7, disabled: disabled3 }) {
|
|
1385
1413
|
const [open, setOpen] = (0, import_react25.useState)(false);
|
|
1386
1414
|
const [activeIndex, setActiveIndex] = (0, import_react25.useState)(0);
|
|
@@ -1396,7 +1424,7 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
|
|
|
1396
1424
|
chevron: chevron3,
|
|
1397
1425
|
menu: menu2,
|
|
1398
1426
|
optionClass
|
|
1399
|
-
} =
|
|
1427
|
+
} = useStyles18({ open });
|
|
1400
1428
|
(0, import_react25.useEffect)(() => {
|
|
1401
1429
|
if (!open) return;
|
|
1402
1430
|
const onPointerDown = (event) => {
|
|
@@ -1457,9 +1485,9 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
|
|
|
1457
1485
|
break;
|
|
1458
1486
|
}
|
|
1459
1487
|
};
|
|
1460
|
-
return /* @__PURE__ */ (0,
|
|
1461
|
-
label7 && /* @__PURE__ */ (0,
|
|
1462
|
-
/* @__PURE__ */ (0,
|
|
1488
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ref: rootRef, className: root24, children: [
|
|
1489
|
+
label7 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { id: labelId, className: labelClass, children: label7 }),
|
|
1490
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
1463
1491
|
"button",
|
|
1464
1492
|
{
|
|
1465
1493
|
type: "button",
|
|
@@ -1479,17 +1507,17 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
|
|
|
1479
1507
|
},
|
|
1480
1508
|
onKeyDown: handleKeyDown,
|
|
1481
1509
|
children: [
|
|
1482
|
-
selected3 ? selected3.label : /* @__PURE__ */ (0,
|
|
1483
|
-
/* @__PURE__ */ (0,
|
|
1510
|
+
selected3 ? selected3.label : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: placeholderClass, children: placeholder2 }),
|
|
1511
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: chevron3, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChevronDownIcon, { size: 18 }) })
|
|
1484
1512
|
]
|
|
1485
1513
|
}
|
|
1486
1514
|
),
|
|
1487
|
-
open && /* @__PURE__ */ (0,
|
|
1515
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: menu2, role: "listbox", children: options.map((option2, index) => {
|
|
1488
1516
|
const isSelected = option2.value === value;
|
|
1489
1517
|
const isActive = index === activeIndex;
|
|
1490
1518
|
return (
|
|
1491
1519
|
// biome-ignore lint/a11y/useKeyWithClickEvents: keyboard nav lives on the trigger via aria-activedescendant; options are not focusable.
|
|
1492
|
-
/* @__PURE__ */ (0,
|
|
1520
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1493
1521
|
"div",
|
|
1494
1522
|
{
|
|
1495
1523
|
id: optionId(index),
|
|
@@ -1520,7 +1548,7 @@ var track3 = "use-styles_track__okw59n1";
|
|
|
1520
1548
|
var wrapper2 = "use-styles_wrapper__okw59n6";
|
|
1521
1549
|
|
|
1522
1550
|
// src/components/slider/use-styles.ts
|
|
1523
|
-
function
|
|
1551
|
+
function useStyles19() {
|
|
1524
1552
|
const { themeClass } = useTheme();
|
|
1525
1553
|
return (0, import_react26.useMemo)(() => {
|
|
1526
1554
|
const root24 = [themeClass, root14].filter(Boolean).join(" ");
|
|
@@ -1537,7 +1565,7 @@ function useStyles18() {
|
|
|
1537
1565
|
}
|
|
1538
1566
|
|
|
1539
1567
|
// src/components/slider/index.tsx
|
|
1540
|
-
var
|
|
1568
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1541
1569
|
function Slider({
|
|
1542
1570
|
value = 0,
|
|
1543
1571
|
onChange,
|
|
@@ -1547,19 +1575,19 @@ function Slider({
|
|
|
1547
1575
|
disabled: disabled3,
|
|
1548
1576
|
label: label7
|
|
1549
1577
|
}) {
|
|
1550
|
-
const { wrapper: wrapper4, label: labelClass, root: root24, track: track4, range: range2, thumb: thumb2, input: input6 } =
|
|
1578
|
+
const { wrapper: wrapper4, label: labelClass, root: root24, track: track4, range: range2, thumb: thumb2, input: input6 } = useStyles19();
|
|
1551
1579
|
const span = max - min;
|
|
1552
1580
|
const percent = span > 0 ? (value - min) / span * 100 : 0;
|
|
1553
1581
|
const clamped = Math.max(0, Math.min(100, percent));
|
|
1554
1582
|
const handleChange = (e) => {
|
|
1555
1583
|
onChange?.(Number(e.target.value));
|
|
1556
1584
|
};
|
|
1557
|
-
return /* @__PURE__ */ (0,
|
|
1558
|
-
label7 ? /* @__PURE__ */ (0,
|
|
1559
|
-
/* @__PURE__ */ (0,
|
|
1560
|
-
/* @__PURE__ */ (0,
|
|
1561
|
-
/* @__PURE__ */ (0,
|
|
1562
|
-
/* @__PURE__ */ (0,
|
|
1585
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: wrapper4, children: [
|
|
1586
|
+
label7 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: labelClass, children: label7 }) : null,
|
|
1587
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: root24, children: [
|
|
1588
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: track4 }),
|
|
1589
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: range2, style: { width: `${clamped}%` } }),
|
|
1590
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
1563
1591
|
"input",
|
|
1564
1592
|
{
|
|
1565
1593
|
className: input6,
|
|
@@ -1572,7 +1600,7 @@ function Slider({
|
|
|
1572
1600
|
onChange: handleChange
|
|
1573
1601
|
}
|
|
1574
1602
|
),
|
|
1575
|
-
/* @__PURE__ */ (0,
|
|
1603
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: thumb2, style: { left: `${clamped}%` } })
|
|
1576
1604
|
] })
|
|
1577
1605
|
] });
|
|
1578
1606
|
}
|
|
@@ -1592,7 +1620,7 @@ var panel = "use-styles_panel__1cjrdh95";
|
|
|
1592
1620
|
var root15 = "use-styles_root__1cjrdh90";
|
|
1593
1621
|
|
|
1594
1622
|
// src/components/accordion/use-styles.ts
|
|
1595
|
-
function
|
|
1623
|
+
function useStyles20({ className }) {
|
|
1596
1624
|
const { themeClass } = useTheme();
|
|
1597
1625
|
return (0, import_react27.useMemo)(
|
|
1598
1626
|
() => ({
|
|
@@ -1607,7 +1635,7 @@ function useStyles19({ className }) {
|
|
|
1607
1635
|
}
|
|
1608
1636
|
|
|
1609
1637
|
// src/components/accordion/index.tsx
|
|
1610
|
-
var
|
|
1638
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1611
1639
|
function Accordion({
|
|
1612
1640
|
items,
|
|
1613
1641
|
multiple = false,
|
|
@@ -1615,7 +1643,7 @@ function Accordion({
|
|
|
1615
1643
|
className
|
|
1616
1644
|
}) {
|
|
1617
1645
|
const [open, setOpen] = (0, import_react28.useState)(defaultOpen);
|
|
1618
|
-
const { root: root24, item: item3, header: header3, chevronFor, panel: panel2 } =
|
|
1646
|
+
const { root: root24, item: item3, header: header3, chevronFor, panel: panel2 } = useStyles20({ className });
|
|
1619
1647
|
const toggle = (id) => {
|
|
1620
1648
|
setOpen((current2) => {
|
|
1621
1649
|
const isOpen = current2.includes(id);
|
|
@@ -1623,12 +1651,12 @@ function Accordion({
|
|
|
1623
1651
|
return multiple ? [...current2, id] : [id];
|
|
1624
1652
|
});
|
|
1625
1653
|
};
|
|
1626
|
-
return /* @__PURE__ */ (0,
|
|
1654
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: root24, children: items.map((it) => {
|
|
1627
1655
|
const isOpen = open.includes(it.id);
|
|
1628
1656
|
const panelId = `accordion-panel-${it.id}`;
|
|
1629
1657
|
const headerId = `accordion-header-${it.id}`;
|
|
1630
|
-
return /* @__PURE__ */ (0,
|
|
1631
|
-
/* @__PURE__ */ (0,
|
|
1658
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: item3, children: [
|
|
1659
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
1632
1660
|
"button",
|
|
1633
1661
|
{
|
|
1634
1662
|
type: "button",
|
|
@@ -1639,11 +1667,11 @@ function Accordion({
|
|
|
1639
1667
|
onClick: () => toggle(it.id),
|
|
1640
1668
|
children: [
|
|
1641
1669
|
it.title,
|
|
1642
|
-
/* @__PURE__ */ (0,
|
|
1670
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevronDownIcon, { className: chevronFor(isOpen) })
|
|
1643
1671
|
]
|
|
1644
1672
|
}
|
|
1645
1673
|
),
|
|
1646
|
-
isOpen && /* @__PURE__ */ (0,
|
|
1674
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { id: panelId, className: panel2, role: "region", "aria-labelledby": headerId, children: it.content })
|
|
1647
1675
|
] }, it.id);
|
|
1648
1676
|
}) });
|
|
1649
1677
|
}
|
|
@@ -1652,9 +1680,9 @@ function Accordion({
|
|
|
1652
1680
|
var import_react30 = require("react");
|
|
1653
1681
|
|
|
1654
1682
|
// src/components/icons/chevron-right/index.tsx
|
|
1655
|
-
var
|
|
1683
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1656
1684
|
function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
1657
|
-
return /* @__PURE__ */ (0,
|
|
1685
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1658
1686
|
"svg",
|
|
1659
1687
|
{
|
|
1660
1688
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1668,7 +1696,7 @@ function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
1668
1696
|
strokeLinejoin: "round",
|
|
1669
1697
|
"aria-hidden": "true",
|
|
1670
1698
|
...rest,
|
|
1671
|
-
children: /* @__PURE__ */ (0,
|
|
1699
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: "m9 18 6-6-6-6" })
|
|
1672
1700
|
}
|
|
1673
1701
|
);
|
|
1674
1702
|
}
|
|
@@ -1683,7 +1711,7 @@ var root16 = "use-styles_root__7u0du60";
|
|
|
1683
1711
|
var separator = "use-styles_separator__7u0du63";
|
|
1684
1712
|
|
|
1685
1713
|
// src/components/breadcrumbs/use-styles.ts
|
|
1686
|
-
function
|
|
1714
|
+
function useStyles21({ className }) {
|
|
1687
1715
|
const { themeClass } = useTheme();
|
|
1688
1716
|
const root24 = (0, import_react29.useMemo)(
|
|
1689
1717
|
() => [themeClass, root16, className].filter(Boolean).join(" "),
|
|
@@ -1693,23 +1721,23 @@ function useStyles20({ className }) {
|
|
|
1693
1721
|
}
|
|
1694
1722
|
|
|
1695
1723
|
// src/components/breadcrumbs/index.tsx
|
|
1696
|
-
var
|
|
1724
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1697
1725
|
function Breadcrumbs({ items, className, ...rest }) {
|
|
1698
|
-
const { root: root24, crumb: crumb2, current: current2, separator: separator2 } =
|
|
1699
|
-
return /* @__PURE__ */ (0,
|
|
1726
|
+
const { root: root24, crumb: crumb2, current: current2, separator: separator2 } = useStyles21({ className });
|
|
1727
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("nav", { "aria-label": "Breadcrumb", className: root24, ...rest, children: items.map((item3, index) => {
|
|
1700
1728
|
const isLast = index === items.length - 1;
|
|
1701
1729
|
const key = index;
|
|
1702
|
-
return /* @__PURE__ */ (0,
|
|
1703
|
-
isLast ? /* @__PURE__ */ (0,
|
|
1704
|
-
!isLast && /* @__PURE__ */ (0,
|
|
1730
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react30.Fragment, { children: [
|
|
1731
|
+
isLast ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: current2, "aria-current": "page", children: item3.label }) : item3.href ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("a", { className: crumb2, href: item3.href, children: item3.label }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: crumb2, children: item3.label }),
|
|
1732
|
+
!isLast && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: separator2, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronRightIcon, { size: 14 }) })
|
|
1705
1733
|
] }, key);
|
|
1706
1734
|
}) });
|
|
1707
1735
|
}
|
|
1708
1736
|
|
|
1709
1737
|
// src/components/icons/chevron-left/index.tsx
|
|
1710
|
-
var
|
|
1738
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1711
1739
|
function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
1712
|
-
return /* @__PURE__ */ (0,
|
|
1740
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
1713
1741
|
"svg",
|
|
1714
1742
|
{
|
|
1715
1743
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1723,7 +1751,7 @@ function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
1723
1751
|
strokeLinejoin: "round",
|
|
1724
1752
|
"aria-hidden": "true",
|
|
1725
1753
|
...rest,
|
|
1726
|
-
children: /* @__PURE__ */ (0,
|
|
1754
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "m15 18-6-6 6-6" })
|
|
1727
1755
|
}
|
|
1728
1756
|
);
|
|
1729
1757
|
}
|
|
@@ -1739,7 +1767,7 @@ var pageBtn = "use-styles_pageBtn__1azgzoh1";
|
|
|
1739
1767
|
var root17 = "use-styles_root__1azgzoh0";
|
|
1740
1768
|
|
|
1741
1769
|
// src/components/pagination/use-styles.ts
|
|
1742
|
-
function
|
|
1770
|
+
function useStyles22() {
|
|
1743
1771
|
const { themeClass } = useTheme();
|
|
1744
1772
|
return (0, import_react31.useMemo)(
|
|
1745
1773
|
() => ({
|
|
@@ -1753,7 +1781,7 @@ function useStyles21() {
|
|
|
1753
1781
|
}
|
|
1754
1782
|
|
|
1755
1783
|
// src/components/pagination/index.tsx
|
|
1756
|
-
var
|
|
1784
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
1757
1785
|
function buildItems(count, page, siblingCount) {
|
|
1758
1786
|
const total = Math.max(1, count);
|
|
1759
1787
|
const first = 1;
|
|
@@ -1768,13 +1796,13 @@ function buildItems(count, page, siblingCount) {
|
|
|
1768
1796
|
return items;
|
|
1769
1797
|
}
|
|
1770
1798
|
function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
|
|
1771
|
-
const { root: root24, pageBtnFor, ellipsis: ellipsis2, nav: nav2 } =
|
|
1799
|
+
const { root: root24, pageBtnFor, ellipsis: ellipsis2, nav: nav2 } = useStyles22();
|
|
1772
1800
|
const total = Math.max(1, count);
|
|
1773
1801
|
const current2 = Math.min(Math.max(1, page), total);
|
|
1774
1802
|
const items = buildItems(total, current2, siblingCount);
|
|
1775
1803
|
const go = (n) => onChange?.(Math.min(Math.max(1, n), total));
|
|
1776
|
-
return /* @__PURE__ */ (0,
|
|
1777
|
-
/* @__PURE__ */ (0,
|
|
1804
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("nav", { className: root24, "aria-label": "Pagination", children: [
|
|
1805
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
1778
1806
|
"button",
|
|
1779
1807
|
{
|
|
1780
1808
|
type: "button",
|
|
@@ -1782,14 +1810,14 @@ function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
|
|
|
1782
1810
|
"aria-label": "Previous page",
|
|
1783
1811
|
disabled: current2 <= 1,
|
|
1784
1812
|
onClick: () => go(current2 - 1),
|
|
1785
|
-
children: /* @__PURE__ */ (0,
|
|
1813
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ChevronLeftIcon, { size: 18 })
|
|
1786
1814
|
}
|
|
1787
1815
|
),
|
|
1788
1816
|
items.map(
|
|
1789
1817
|
(item3, index) => item3 === "ellipsis" ? (
|
|
1790
1818
|
// biome-ignore lint/suspicious/noArrayIndexKey: ellipsis position is stable per render
|
|
1791
|
-
/* @__PURE__ */ (0,
|
|
1792
|
-
) : /* @__PURE__ */ (0,
|
|
1819
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: ellipsis2, children: "\u2026" }, `ellipsis-${index}`)
|
|
1820
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
1793
1821
|
"button",
|
|
1794
1822
|
{
|
|
1795
1823
|
type: "button",
|
|
@@ -1801,7 +1829,7 @@ function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
|
|
|
1801
1829
|
item3
|
|
1802
1830
|
)
|
|
1803
1831
|
),
|
|
1804
|
-
/* @__PURE__ */ (0,
|
|
1832
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
1805
1833
|
"button",
|
|
1806
1834
|
{
|
|
1807
1835
|
type: "button",
|
|
@@ -1809,7 +1837,7 @@ function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
|
|
|
1809
1837
|
"aria-label": "Next page",
|
|
1810
1838
|
disabled: current2 >= total,
|
|
1811
1839
|
onClick: () => go(current2 + 1),
|
|
1812
|
-
children: /* @__PURE__ */ (0,
|
|
1840
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ChevronRightIcon, { size: 18 })
|
|
1813
1841
|
}
|
|
1814
1842
|
)
|
|
1815
1843
|
] });
|
|
@@ -1832,7 +1860,7 @@ var root18 = "use-styles_root__79pt4e0";
|
|
|
1832
1860
|
var step = "use-styles_step__79pt4e1";
|
|
1833
1861
|
|
|
1834
1862
|
// src/components/stepper/use-styles.ts
|
|
1835
|
-
function
|
|
1863
|
+
function useStyles23({ className }) {
|
|
1836
1864
|
const { themeClass } = useTheme();
|
|
1837
1865
|
return (0, import_react32.useMemo)(() => {
|
|
1838
1866
|
const root24 = [themeClass, root18, className].filter(Boolean).join(" ");
|
|
@@ -1847,20 +1875,20 @@ function useStyles22({ className }) {
|
|
|
1847
1875
|
}
|
|
1848
1876
|
|
|
1849
1877
|
// src/components/stepper/index.tsx
|
|
1850
|
-
var
|
|
1878
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
1851
1879
|
function Stepper({ steps, active: active2 = 0, className, ...rest }) {
|
|
1852
|
-
const { root: root24, step: step2, connector: connector2, markerFor, labelFor } =
|
|
1853
|
-
return /* @__PURE__ */ (0,
|
|
1880
|
+
const { root: root24, step: step2, connector: connector2, markerFor, labelFor } = useStyles23({ className });
|
|
1881
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: root24, ...rest, children: steps.map((s, index) => {
|
|
1854
1882
|
const state = index < active2 ? "done" : index === active2 ? "active" : "upcoming";
|
|
1855
1883
|
const isActive = state === "active";
|
|
1856
1884
|
return (
|
|
1857
1885
|
// biome-ignore lint/suspicious/noArrayIndexKey: steps are a static, ordered list with no stable id.
|
|
1858
|
-
/* @__PURE__ */ (0,
|
|
1859
|
-
/* @__PURE__ */ (0,
|
|
1860
|
-
/* @__PURE__ */ (0,
|
|
1861
|
-
/* @__PURE__ */ (0,
|
|
1886
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react33.Fragment, { children: [
|
|
1887
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: step2, "aria-current": isActive ? "step" : void 0, children: [
|
|
1888
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: markerFor(state), children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CheckIcon, { size: 14 }) : index + 1 }),
|
|
1889
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: labelFor(isActive), children: s.label })
|
|
1862
1890
|
] }),
|
|
1863
|
-
index < steps.length - 1 && /* @__PURE__ */ (0,
|
|
1891
|
+
index < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "data-part": "connector", className: connector2 })
|
|
1864
1892
|
] }, index)
|
|
1865
1893
|
);
|
|
1866
1894
|
}) });
|
|
@@ -1875,7 +1903,7 @@ var tab = "use-styles_tab__1l4m7t41";
|
|
|
1875
1903
|
var tabActive = "use-styles_tabActive__1l4m7t42";
|
|
1876
1904
|
|
|
1877
1905
|
// src/components/tabs/use-styles.ts
|
|
1878
|
-
function
|
|
1906
|
+
function useStyles24() {
|
|
1879
1907
|
const { themeClass } = useTheme();
|
|
1880
1908
|
return (0, import_react34.useMemo)(() => {
|
|
1881
1909
|
const root24 = [themeClass, root19].filter(Boolean).join(" ");
|
|
@@ -1885,12 +1913,12 @@ function useStyles23() {
|
|
|
1885
1913
|
}
|
|
1886
1914
|
|
|
1887
1915
|
// src/components/tabs/index.tsx
|
|
1888
|
-
var
|
|
1916
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
1889
1917
|
function Tabs({ items, value, onChange }) {
|
|
1890
|
-
const { root: root24, tabClass } =
|
|
1891
|
-
return /* @__PURE__ */ (0,
|
|
1918
|
+
const { root: root24, tabClass } = useStyles24();
|
|
1919
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { role: "tablist", className: root24, children: items.map((item3) => {
|
|
1892
1920
|
const active2 = item3.value === value;
|
|
1893
|
-
return /* @__PURE__ */ (0,
|
|
1921
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
1894
1922
|
"button",
|
|
1895
1923
|
{
|
|
1896
1924
|
type: "button",
|
|
@@ -1914,11 +1942,11 @@ var import_react35 = require("react");
|
|
|
1914
1942
|
// src/components/menu/use-styles.css.ts
|
|
1915
1943
|
var danger = "use-styles_danger__1uyxaj3";
|
|
1916
1944
|
var item2 = "use-styles_item__1uyxaj2";
|
|
1917
|
-
var list = "use-styles_list__1uyxaj1
|
|
1945
|
+
var list = "use-styles_list__1uyxaj1 surfaces_panelSurface__1qa7atn1";
|
|
1918
1946
|
var wrapper3 = "use-styles_wrapper__1uyxaj0";
|
|
1919
1947
|
|
|
1920
1948
|
// src/components/menu/use-styles.ts
|
|
1921
|
-
function
|
|
1949
|
+
function useStyles25() {
|
|
1922
1950
|
const { themeClass } = useTheme();
|
|
1923
1951
|
return (0, import_react35.useMemo)(
|
|
1924
1952
|
() => ({
|
|
@@ -1932,13 +1960,13 @@ function useStyles24() {
|
|
|
1932
1960
|
}
|
|
1933
1961
|
|
|
1934
1962
|
// src/components/menu/index.tsx
|
|
1935
|
-
var
|
|
1963
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
1936
1964
|
function assignRef(ref, value) {
|
|
1937
1965
|
if (typeof ref === "function") ref(value);
|
|
1938
1966
|
else if (ref) ref.current = value;
|
|
1939
1967
|
}
|
|
1940
1968
|
function Menu({ trigger: trigger2, items }) {
|
|
1941
|
-
const { wrapper: wrapper4, list: list2, item: item3, dangerItem } =
|
|
1969
|
+
const { wrapper: wrapper4, list: list2, item: item3, dangerItem } = useStyles25();
|
|
1942
1970
|
const [open, setOpen] = (0, import_react36.useState)(false);
|
|
1943
1971
|
const rootRef = (0, import_react36.useRef)(null);
|
|
1944
1972
|
const listRef = (0, import_react36.useRef)(null);
|
|
@@ -2019,9 +2047,9 @@ function Menu({ trigger: trigger2, items }) {
|
|
|
2019
2047
|
setOpen((prev) => !prev);
|
|
2020
2048
|
}
|
|
2021
2049
|
});
|
|
2022
|
-
return /* @__PURE__ */ (0,
|
|
2050
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ref: rootRef, className: wrapper4, children: [
|
|
2023
2051
|
clonedTrigger,
|
|
2024
|
-
open && /* @__PURE__ */ (0,
|
|
2052
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ref: listRef, role: "menu", className: list2, onKeyDown: onMenuKeyDown, children: items.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2025
2053
|
"button",
|
|
2026
2054
|
{
|
|
2027
2055
|
type: "button",
|
|
@@ -2053,7 +2081,7 @@ var overlay = "use-styles_overlay__5tstu80";
|
|
|
2053
2081
|
var surface = "use-styles_surface__5tstu81";
|
|
2054
2082
|
|
|
2055
2083
|
// src/components/dialog/use-styles.ts
|
|
2056
|
-
function
|
|
2084
|
+
function useStyles26() {
|
|
2057
2085
|
const { themeClass } = useTheme();
|
|
2058
2086
|
return (0, import_react37.useMemo)(
|
|
2059
2087
|
() => ({
|
|
@@ -2067,10 +2095,10 @@ function useStyles25() {
|
|
|
2067
2095
|
}
|
|
2068
2096
|
|
|
2069
2097
|
// src/components/dialog/index.tsx
|
|
2070
|
-
var
|
|
2098
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2071
2099
|
var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
2072
2100
|
function Dialog({ open, onClose, title, actions: actions3, children }) {
|
|
2073
|
-
const { overlay: overlay2, surface: surface2, body: body3, actions: actionsClass } =
|
|
2101
|
+
const { overlay: overlay2, surface: surface2, body: body3, actions: actionsClass } = useStyles26();
|
|
2074
2102
|
const surfaceRef = (0, import_react38.useRef)(null);
|
|
2075
2103
|
const previouslyFocused = (0, import_react38.useRef)(null);
|
|
2076
2104
|
const generatedId = (0, import_react38.useId)();
|
|
@@ -2127,7 +2155,7 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
|
|
|
2127
2155
|
};
|
|
2128
2156
|
return (0, import_react_dom.createPortal)(
|
|
2129
2157
|
// biome-ignore lint/a11y/useKeyWithClickEvents: ESC handled by a document keydown listener.
|
|
2130
|
-
/* @__PURE__ */ (0,
|
|
2158
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: overlay2, "data-testid": "dialog-overlay", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
2131
2159
|
"div",
|
|
2132
2160
|
{
|
|
2133
2161
|
ref: surfaceRef,
|
|
@@ -2139,9 +2167,9 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
|
|
|
2139
2167
|
onClick: stop,
|
|
2140
2168
|
onKeyDown: onSurfaceKeyDown,
|
|
2141
2169
|
children: [
|
|
2142
|
-
title != null && /* @__PURE__ */ (0,
|
|
2143
|
-
children != null && /* @__PURE__ */ (0,
|
|
2144
|
-
actions3 != null && /* @__PURE__ */ (0,
|
|
2170
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Typography, { variant: "h3", as: "h2", id: titleId, children: title }),
|
|
2171
|
+
children != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: body3, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Typography, { variant: "body", color: "fg2", children }) }),
|
|
2172
|
+
actions3 != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: actionsClass, children: actions3 })
|
|
2145
2173
|
]
|
|
2146
2174
|
}
|
|
2147
2175
|
) }),
|
|
@@ -2158,10 +2186,10 @@ var import_react39 = require("react");
|
|
|
2158
2186
|
// src/components/snackbar/use-styles.css.ts
|
|
2159
2187
|
var closeBtn = "use-styles_closeBtn__ihzsep2";
|
|
2160
2188
|
var message = "use-styles_message__ihzsep1";
|
|
2161
|
-
var root20 = "use-styles_root__ihzsep0
|
|
2189
|
+
var root20 = "use-styles_root__ihzsep0 surfaces_inkySurface__1qa7atn2";
|
|
2162
2190
|
|
|
2163
2191
|
// src/components/snackbar/use-styles.ts
|
|
2164
|
-
function
|
|
2192
|
+
function useStyles27() {
|
|
2165
2193
|
const { themeClass } = useTheme();
|
|
2166
2194
|
return (0, import_react39.useMemo)(
|
|
2167
2195
|
() => ({
|
|
@@ -2174,15 +2202,15 @@ function useStyles26() {
|
|
|
2174
2202
|
}
|
|
2175
2203
|
|
|
2176
2204
|
// src/components/snackbar/index.tsx
|
|
2177
|
-
var
|
|
2205
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
2178
2206
|
function Snackbar({ open, message: message2, action, onClose }) {
|
|
2179
|
-
const { root: root24, message: messageClass, closeBtn: closeBtn2 } =
|
|
2207
|
+
const { root: root24, message: messageClass, closeBtn: closeBtn2 } = useStyles27();
|
|
2180
2208
|
if (!open || typeof document === "undefined") return null;
|
|
2181
2209
|
return (0, import_react_dom2.createPortal)(
|
|
2182
|
-
/* @__PURE__ */ (0,
|
|
2183
|
-
/* @__PURE__ */ (0,
|
|
2210
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { role: "status", className: root24, children: [
|
|
2211
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: messageClass, children: message2 }),
|
|
2184
2212
|
action,
|
|
2185
|
-
onClose && /* @__PURE__ */ (0,
|
|
2213
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { type: "button", "aria-label": "Close", className: closeBtn2, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(XIcon, { size: 18 }) })
|
|
2186
2214
|
] }),
|
|
2187
2215
|
document.body
|
|
2188
2216
|
);
|
|
@@ -2198,7 +2226,7 @@ var td = "use-styles_td__1n2cz6i2";
|
|
|
2198
2226
|
var th = "use-styles_th__1n2cz6i1";
|
|
2199
2227
|
|
|
2200
2228
|
// src/components/table/use-styles.ts
|
|
2201
|
-
function
|
|
2229
|
+
function useStyles28({ className }) {
|
|
2202
2230
|
const { themeClass } = useTheme();
|
|
2203
2231
|
const root24 = (0, import_react40.useMemo)(
|
|
2204
2232
|
() => [themeClass, root21, className].filter(Boolean).join(" "),
|
|
@@ -2208,7 +2236,7 @@ function useStyles27({ className }) {
|
|
|
2208
2236
|
}
|
|
2209
2237
|
|
|
2210
2238
|
// src/components/table/index.tsx
|
|
2211
|
-
var
|
|
2239
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
2212
2240
|
function Table({
|
|
2213
2241
|
columns,
|
|
2214
2242
|
rows,
|
|
@@ -2216,12 +2244,12 @@ function Table({
|
|
|
2216
2244
|
className,
|
|
2217
2245
|
...rest
|
|
2218
2246
|
}) {
|
|
2219
|
-
const { root: root24, th: th2, td: td2, alignRight: alignRight2 } =
|
|
2247
|
+
const { root: root24, th: th2, td: td2, alignRight: alignRight2 } = useStyles28({ className });
|
|
2220
2248
|
const headClass = (column) => column.align === "right" ? `${th2} ${alignRight2}` : th2;
|
|
2221
2249
|
const cellClass = (column) => column.align === "right" ? `${td2} ${alignRight2}` : td2;
|
|
2222
|
-
return /* @__PURE__ */ (0,
|
|
2223
|
-
/* @__PURE__ */ (0,
|
|
2224
|
-
/* @__PURE__ */ (0,
|
|
2250
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("table", { className: root24, ...rest, children: [
|
|
2251
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("th", { className: headClass(column), children: column.header }, column.key)) }) }),
|
|
2252
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("tbody", { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("td", { className: cellClass(column), children: column.render ? column.render(row) : String(row[column.key]) }, column.key)) }, getRowKey ? getRowKey(row, index) : index)) })
|
|
2225
2253
|
] });
|
|
2226
2254
|
}
|
|
2227
2255
|
|
|
@@ -2234,7 +2262,7 @@ var brand = "use-styles_brand__1h133nh1";
|
|
|
2234
2262
|
var root22 = "use-styles_root__1h133nh0";
|
|
2235
2263
|
|
|
2236
2264
|
// src/components/app-bar/use-styles.ts
|
|
2237
|
-
function
|
|
2265
|
+
function useStyles29({ className }) {
|
|
2238
2266
|
const { themeClass } = useTheme();
|
|
2239
2267
|
const root24 = (0, import_react41.useMemo)(
|
|
2240
2268
|
() => [themeClass, root22, className].filter(Boolean).join(" "),
|
|
@@ -2244,13 +2272,13 @@ function useStyles28({ className }) {
|
|
|
2244
2272
|
}
|
|
2245
2273
|
|
|
2246
2274
|
// src/components/app-bar/index.tsx
|
|
2247
|
-
var
|
|
2275
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
2248
2276
|
function AppBar({ brand: brand2, actions: actions3, className, children, ...rest }) {
|
|
2249
|
-
const styles =
|
|
2250
|
-
return /* @__PURE__ */ (0,
|
|
2251
|
-
brand2 !== void 0 ? /* @__PURE__ */ (0,
|
|
2277
|
+
const styles = useStyles29({ className });
|
|
2278
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("header", { className: styles.root, ...rest, children: [
|
|
2279
|
+
brand2 !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: styles.brand, children: brand2 }) : null,
|
|
2252
2280
|
children,
|
|
2253
|
-
actions3 !== void 0 ? /* @__PURE__ */ (0,
|
|
2281
|
+
actions3 !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: styles.actions, children: actions3 }) : null
|
|
2254
2282
|
] });
|
|
2255
2283
|
}
|
|
2256
2284
|
|
|
@@ -2265,7 +2293,7 @@ var selected2 = "use-styles_selected__kbreq11";
|
|
|
2265
2293
|
var trailing = "use-styles_trailing__kbreq14";
|
|
2266
2294
|
|
|
2267
2295
|
// src/components/list-item/use-styles.ts
|
|
2268
|
-
function
|
|
2296
|
+
function useStyles30({
|
|
2269
2297
|
selected: selected3,
|
|
2270
2298
|
className
|
|
2271
2299
|
}) {
|
|
@@ -2278,7 +2306,7 @@ function useStyles29({
|
|
|
2278
2306
|
}
|
|
2279
2307
|
|
|
2280
2308
|
// src/components/list-item/index.tsx
|
|
2281
|
-
var
|
|
2309
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
2282
2310
|
function ListItem({
|
|
2283
2311
|
leading: leading2,
|
|
2284
2312
|
trailing: trailing2,
|
|
@@ -2287,18 +2315,18 @@ function ListItem({
|
|
|
2287
2315
|
children,
|
|
2288
2316
|
...rest
|
|
2289
2317
|
}) {
|
|
2290
|
-
const styles =
|
|
2291
|
-
return /* @__PURE__ */ (0,
|
|
2292
|
-
leading2 != null && /* @__PURE__ */ (0,
|
|
2293
|
-
/* @__PURE__ */ (0,
|
|
2294
|
-
trailing2 != null && /* @__PURE__ */ (0,
|
|
2318
|
+
const styles = useStyles30({ selected: selected3, className });
|
|
2319
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: styles.root, ...rest, children: [
|
|
2320
|
+
leading2 != null && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: styles.leading, children: leading2 }),
|
|
2321
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: styles.content, children }),
|
|
2322
|
+
trailing2 != null && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: styles.trailing, children: trailing2 })
|
|
2295
2323
|
] });
|
|
2296
2324
|
}
|
|
2297
2325
|
|
|
2298
2326
|
// src/components/icons/chevron-up/index.tsx
|
|
2299
|
-
var
|
|
2327
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
2300
2328
|
function ChevronUpIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
2301
|
-
return /* @__PURE__ */ (0,
|
|
2329
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2302
2330
|
"svg",
|
|
2303
2331
|
{
|
|
2304
2332
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -2312,15 +2340,15 @@ function ChevronUpIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
2312
2340
|
strokeLinejoin: "round",
|
|
2313
2341
|
"aria-hidden": "true",
|
|
2314
2342
|
...rest,
|
|
2315
|
-
children: /* @__PURE__ */ (0,
|
|
2343
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("path", { d: "m18 15-6-6-6 6" })
|
|
2316
2344
|
}
|
|
2317
2345
|
);
|
|
2318
2346
|
}
|
|
2319
2347
|
|
|
2320
2348
|
// src/components/icons/search/index.tsx
|
|
2321
|
-
var
|
|
2349
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
2322
2350
|
function SearchIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
2323
|
-
return /* @__PURE__ */ (0,
|
|
2351
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
2324
2352
|
"svg",
|
|
2325
2353
|
{
|
|
2326
2354
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -2335,17 +2363,17 @@ function SearchIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
2335
2363
|
"aria-hidden": "true",
|
|
2336
2364
|
...rest,
|
|
2337
2365
|
children: [
|
|
2338
|
-
/* @__PURE__ */ (0,
|
|
2339
|
-
/* @__PURE__ */ (0,
|
|
2366
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
|
|
2367
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("path", { d: "m21 21-4.3-4.3" })
|
|
2340
2368
|
]
|
|
2341
2369
|
}
|
|
2342
2370
|
);
|
|
2343
2371
|
}
|
|
2344
2372
|
|
|
2345
2373
|
// src/components/icons/plus/index.tsx
|
|
2346
|
-
var
|
|
2374
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
2347
2375
|
function PlusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
2348
|
-
return /* @__PURE__ */ (0,
|
|
2376
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
|
|
2349
2377
|
"svg",
|
|
2350
2378
|
{
|
|
2351
2379
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -2360,17 +2388,17 @@ function PlusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
2360
2388
|
"aria-hidden": "true",
|
|
2361
2389
|
...rest,
|
|
2362
2390
|
children: [
|
|
2363
|
-
/* @__PURE__ */ (0,
|
|
2364
|
-
/* @__PURE__ */ (0,
|
|
2391
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M5 12h14" }),
|
|
2392
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M12 5v14" })
|
|
2365
2393
|
]
|
|
2366
2394
|
}
|
|
2367
2395
|
);
|
|
2368
2396
|
}
|
|
2369
2397
|
|
|
2370
2398
|
// src/components/icons/minus/index.tsx
|
|
2371
|
-
var
|
|
2399
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
2372
2400
|
function MinusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
2373
|
-
return /* @__PURE__ */ (0,
|
|
2401
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
2374
2402
|
"svg",
|
|
2375
2403
|
{
|
|
2376
2404
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -2384,15 +2412,15 @@ function MinusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
2384
2412
|
strokeLinejoin: "round",
|
|
2385
2413
|
"aria-hidden": "true",
|
|
2386
2414
|
...rest,
|
|
2387
|
-
children: /* @__PURE__ */ (0,
|
|
2415
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M5 12h14" })
|
|
2388
2416
|
}
|
|
2389
2417
|
);
|
|
2390
2418
|
}
|
|
2391
2419
|
|
|
2392
2420
|
// src/components/icons/more-horizontal/index.tsx
|
|
2393
|
-
var
|
|
2421
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
2394
2422
|
function MoreHorizontalIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
2395
|
-
return /* @__PURE__ */ (0,
|
|
2423
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
|
|
2396
2424
|
"svg",
|
|
2397
2425
|
{
|
|
2398
2426
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -2407,9 +2435,9 @@ function MoreHorizontalIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
2407
2435
|
"aria-hidden": "true",
|
|
2408
2436
|
...rest,
|
|
2409
2437
|
children: [
|
|
2410
|
-
/* @__PURE__ */ (0,
|
|
2411
|
-
/* @__PURE__ */ (0,
|
|
2412
|
-
/* @__PURE__ */ (0,
|
|
2438
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
|
|
2439
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
|
|
2440
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("circle", { cx: "5", cy: "12", r: "1" })
|
|
2413
2441
|
]
|
|
2414
2442
|
}
|
|
2415
2443
|
);
|
|
@@ -2433,6 +2461,7 @@ function MoreHorizontalIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
2433
2461
|
Chip,
|
|
2434
2462
|
CircleCheckIcon,
|
|
2435
2463
|
CircleXIcon,
|
|
2464
|
+
Container,
|
|
2436
2465
|
Dialog,
|
|
2437
2466
|
Divider,
|
|
2438
2467
|
EyeIcon,
|