@octavius2929-personal/design-system 0.11.0 → 0.13.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 +491 -391
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +174 -123
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +42 -5
- package/dist/index.d.ts +42 -5
- package/dist/index.js +369 -271
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -62,6 +62,7 @@ __export(index_exports, {
|
|
|
62
62
|
Switch: () => Switch,
|
|
63
63
|
Table: () => Table,
|
|
64
64
|
Tabs: () => Tabs,
|
|
65
|
+
TestIdProvider: () => TestIdProvider,
|
|
65
66
|
TextField: () => TextField,
|
|
66
67
|
ThemeProvider: () => ThemeProvider,
|
|
67
68
|
Tooltip: () => Tooltip,
|
|
@@ -75,16 +76,17 @@ __export(index_exports, {
|
|
|
75
76
|
theme: () => vars,
|
|
76
77
|
themes: () => themes,
|
|
77
78
|
usePrevious: () => usePrevious,
|
|
79
|
+
useTestId: () => useTestId,
|
|
78
80
|
useTheme: () => useTheme,
|
|
79
81
|
useToggle: () => useToggle
|
|
80
82
|
});
|
|
81
83
|
module.exports = __toCommonJS(index_exports);
|
|
82
84
|
|
|
83
85
|
// src/theme/theme.css.ts
|
|
84
|
-
var colorVars = { bg1: "var(--bg1__e3grur28)", bg2: "var(--bg2__e3grur29)", bg3: "var(--bg3__e3grur2a)", bgInset: "var(--bgInset__e3grur2b)", fg1: "var(--fg1__e3grur2c)", fg2: "var(--fg2__e3grur2d)", fg3: "var(--fg3__e3grur2e)", fgOnAccent: "var(--fgOnAccent__e3grur2f)", border1: "var(--border1__e3grur2g)", border2: "var(--border2__e3grur2h)", borderStrong: "var(--borderStrong__e3grur2i)", accent: "var(--accent__e3grur2j)", accentHover: "var(--accentHover__e3grur2k)", accentSoft: "var(--accentSoft__e3grur2l)", ok: "var(--ok__e3grur2m)", warn: "var(--warn__e3grur2n)", danger: "var(--danger__e3grur2o)", info: "var(--
|
|
86
|
+
var colorVars = { bg1: "var(--bg1__e3grur28)", bg2: "var(--bg2__e3grur29)", bg3: "var(--bg3__e3grur2a)", bgInset: "var(--bgInset__e3grur2b)", fg1: "var(--fg1__e3grur2c)", fg2: "var(--fg2__e3grur2d)", fg3: "var(--fg3__e3grur2e)", fgOnAccent: "var(--fgOnAccent__e3grur2f)", border1: "var(--border1__e3grur2g)", border2: "var(--border2__e3grur2h)", borderStrong: "var(--borderStrong__e3grur2i)", accent: "var(--accent__e3grur2j)", accentHover: "var(--accentHover__e3grur2k)", accentSoft: "var(--accentSoft__e3grur2l)", ok: "var(--ok__e3grur2m)", warn: "var(--warn__e3grur2n)", danger: "var(--danger__e3grur2o)", dangerHover: "var(--dangerHover__e3grur2p)", dangerSoft: "var(--dangerSoft__e3grur2q)", info: "var(--info__e3grur2r)", focus: "var(--focus__e3grur2s)", scrim: "var(--scrim__e3grur2t)" };
|
|
85
87
|
var modeNames = ["light", "dark", "sepia", "contrast"];
|
|
86
88
|
var schemaNames = ["tinta"];
|
|
87
|
-
var themes = { tinta: { light: "
|
|
89
|
+
var themes = { tinta: { light: "theme_themes_tinta_light__e3grur2u", dark: "theme_themes_tinta_dark__e3grur2v", sepia: "theme_themes_tinta_sepia__e3grur2w", contrast: "theme_themes_tinta_contrast__e3grur2x" } };
|
|
88
90
|
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 };
|
|
89
91
|
|
|
90
92
|
// src/hooks/use-previous/index.ts
|
|
@@ -110,7 +112,7 @@ var import_react3 = require("react");
|
|
|
110
112
|
|
|
111
113
|
// src/theme/styles/sprinkles/index.css.ts
|
|
112
114
|
var import_createRuntimeSprinkles = require("@vanilla-extract/sprinkles/createRuntimeSprinkles");
|
|
113
|
-
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" } } } } });
|
|
115
|
+
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" }, dangerHover: { defaultClass: "sprinkles_background_dangerHover__qhecrd3t" }, dangerSoft: { defaultClass: "sprinkles_background_dangerSoft__qhecrd3u" }, info: { defaultClass: "sprinkles_background_info__qhecrd3v" }, focus: { defaultClass: "sprinkles_background_focus__qhecrd3w" }, scrim: { defaultClass: "sprinkles_background_scrim__qhecrd3x" } } }, color: { values: { bg1: { defaultClass: "sprinkles_color_bg1__qhecrd3y" }, bg2: { defaultClass: "sprinkles_color_bg2__qhecrd3z" }, bg3: { defaultClass: "sprinkles_color_bg3__qhecrd40" }, bgInset: { defaultClass: "sprinkles_color_bgInset__qhecrd41" }, fg1: { defaultClass: "sprinkles_color_fg1__qhecrd42" }, fg2: { defaultClass: "sprinkles_color_fg2__qhecrd43" }, fg3: { defaultClass: "sprinkles_color_fg3__qhecrd44" }, fgOnAccent: { defaultClass: "sprinkles_color_fgOnAccent__qhecrd45" }, border1: { defaultClass: "sprinkles_color_border1__qhecrd46" }, border2: { defaultClass: "sprinkles_color_border2__qhecrd47" }, borderStrong: { defaultClass: "sprinkles_color_borderStrong__qhecrd48" }, accent: { defaultClass: "sprinkles_color_accent__qhecrd49" }, accentHover: { defaultClass: "sprinkles_color_accentHover__qhecrd4a" }, accentSoft: { defaultClass: "sprinkles_color_accentSoft__qhecrd4b" }, ok: { defaultClass: "sprinkles_color_ok__qhecrd4c" }, warn: { defaultClass: "sprinkles_color_warn__qhecrd4d" }, danger: { defaultClass: "sprinkles_color_danger__qhecrd4e" }, dangerHover: { defaultClass: "sprinkles_color_dangerHover__qhecrd4f" }, dangerSoft: { defaultClass: "sprinkles_color_dangerSoft__qhecrd4g" }, info: { defaultClass: "sprinkles_color_info__qhecrd4h" }, focus: { defaultClass: "sprinkles_color_focus__qhecrd4i" }, scrim: { defaultClass: "sprinkles_color_scrim__qhecrd4j" } } }, borderRadius: { values: { none: { defaultClass: "sprinkles_borderRadius_none__qhecrd4k" }, sm: { defaultClass: "sprinkles_borderRadius_sm__qhecrd4l" }, md: { defaultClass: "sprinkles_borderRadius_md__qhecrd4m" }, lg: { defaultClass: "sprinkles_borderRadius_lg__qhecrd4n" }, base: { defaultClass: "sprinkles_borderRadius_base__qhecrd4o" }, full: { defaultClass: "sprinkles_borderRadius_full__qhecrd4p" } } }, display: { values: { block: { defaultClass: "sprinkles_display_block__qhecrd4q" }, "inline-block": { defaultClass: "sprinkles_display_inline-block__qhecrd4r" }, flex: { defaultClass: "sprinkles_display_flex__qhecrd4s" }, "inline-flex": { defaultClass: "sprinkles_display_inline-flex__qhecrd4t" }, grid: { defaultClass: "sprinkles_display_grid__qhecrd4u" }, none: { defaultClass: "sprinkles_display_none__qhecrd4v" } } }, flexDirection: { values: { row: { defaultClass: "sprinkles_flexDirection_row__qhecrd4w" }, column: { defaultClass: "sprinkles_flexDirection_column__qhecrd4x" }, "row-reverse": { defaultClass: "sprinkles_flexDirection_row-reverse__qhecrd4y" }, "column-reverse": { defaultClass: "sprinkles_flexDirection_column-reverse__qhecrd4z" } } }, alignItems: { values: { "flex-start": { defaultClass: "sprinkles_alignItems_flex-start__qhecrd50" }, center: { defaultClass: "sprinkles_alignItems_center__qhecrd51" }, "flex-end": { defaultClass: "sprinkles_alignItems_flex-end__qhecrd52" }, stretch: { defaultClass: "sprinkles_alignItems_stretch__qhecrd53" }, baseline: { defaultClass: "sprinkles_alignItems_baseline__qhecrd54" } } }, justifyContent: { values: { "flex-start": { defaultClass: "sprinkles_justifyContent_flex-start__qhecrd55" }, center: { defaultClass: "sprinkles_justifyContent_center__qhecrd56" }, "flex-end": { defaultClass: "sprinkles_justifyContent_flex-end__qhecrd57" }, "space-between": { defaultClass: "sprinkles_justifyContent_space-between__qhecrd58" }, "space-around": { defaultClass: "sprinkles_justifyContent_space-around__qhecrd59" }, "space-evenly": { defaultClass: "sprinkles_justifyContent_space-evenly__qhecrd5a" } } }, flexWrap: { values: { nowrap: { defaultClass: "sprinkles_flexWrap_nowrap__qhecrd5b" }, wrap: { defaultClass: "sprinkles_flexWrap_wrap__qhecrd5c" } } } } });
|
|
114
116
|
|
|
115
117
|
// src/components/container/use-styles.ts
|
|
116
118
|
function useStyles(props) {
|
|
@@ -291,20 +293,67 @@ TypographyForwarded.displayName = "Typography";
|
|
|
291
293
|
var Typography = TypographyForwarded;
|
|
292
294
|
|
|
293
295
|
// src/components/button/index.tsx
|
|
296
|
+
var import_react10 = require("react");
|
|
297
|
+
|
|
298
|
+
// src/testing/states.ts
|
|
299
|
+
function states(map) {
|
|
300
|
+
const active2 = Object.keys(map).filter((key) => map[key]);
|
|
301
|
+
return active2.length > 0 ? active2.join(" ") : void 0;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
// src/testing/use-test-id.ts
|
|
294
305
|
var import_react8 = require("react");
|
|
295
306
|
|
|
296
|
-
// src/
|
|
307
|
+
// src/testing/compose.ts
|
|
308
|
+
function normalizeSegment(seg) {
|
|
309
|
+
return seg.trim().replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
|
|
310
|
+
}
|
|
311
|
+
function composeTestId(parts) {
|
|
312
|
+
return parts.filter((p) => typeof p === "string" && p.trim() !== "").map(normalizeSegment).join("__");
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
// src/testing/context/test-id-context.tsx
|
|
297
316
|
var import_react7 = require("react");
|
|
317
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
318
|
+
var TestIdContext = (0, import_react7.createContext)([]);
|
|
319
|
+
function TestIdProvider({ context, children }) {
|
|
320
|
+
const parent = (0, import_react7.useContext)(TestIdContext);
|
|
321
|
+
const value = (0, import_react7.useMemo)(
|
|
322
|
+
() => [...parent, normalizeSegment(context)].filter((seg) => seg !== ""),
|
|
323
|
+
[parent, context]
|
|
324
|
+
);
|
|
325
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TestIdContext.Provider, { value, children });
|
|
326
|
+
}
|
|
327
|
+
function useTestIdContext() {
|
|
328
|
+
return (0, import_react7.useContext)(TestIdContext);
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
// src/testing/use-test-id.ts
|
|
332
|
+
function useTestId(type, ownTestId) {
|
|
333
|
+
const ctx = useTestIdContext();
|
|
334
|
+
const testId = composeTestId([type, ...ctx, ownTestId]);
|
|
335
|
+
return (0, import_react8.useMemo)(
|
|
336
|
+
() => ({
|
|
337
|
+
testId,
|
|
338
|
+
slot: (name) => `${testId}__${normalizeSegment(name)}`
|
|
339
|
+
}),
|
|
340
|
+
[testId]
|
|
341
|
+
);
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
// src/components/button/use-styles.ts
|
|
345
|
+
var import_react9 = require("react");
|
|
298
346
|
|
|
299
347
|
// src/components/button/use-styles.css.ts
|
|
300
348
|
var full = "use-styles_full__1pbtill4";
|
|
301
349
|
var root = "use-styles_root__1pbtill0";
|
|
302
350
|
var size = { sm: "use-styles_size_sm__1pbtill1", md: "use-styles_size_md__1pbtill2", lg: "use-styles_size_lg__1pbtill3" };
|
|
303
|
-
var tone = { filledInk: "use-styles_tone_filledInk__1pbtill5", filledAccent: "use-styles_tone_filledAccent__1pbtill6", outlineInk: "use-styles_tone_outlineInk__1pbtill7", outlineAccent: "use-styles_tone_outlineAccent__1pbtill8", ghostInk: "use-styles_tone_ghostInk__1pbtill9", ghostAccent: "use-styles_tone_ghostAccent__1pbtilla" };
|
|
351
|
+
var tone = { filledInk: "use-styles_tone_filledInk__1pbtill5", filledAccent: "use-styles_tone_filledAccent__1pbtill6", outlineInk: "use-styles_tone_outlineInk__1pbtill7", outlineAccent: "use-styles_tone_outlineAccent__1pbtill8", ghostInk: "use-styles_tone_ghostInk__1pbtill9", ghostAccent: "use-styles_tone_ghostAccent__1pbtilla", filledDanger: "use-styles_tone_filledDanger__1pbtillb", outlineDanger: "use-styles_tone_outlineDanger__1pbtillc", ghostDanger: "use-styles_tone_ghostDanger__1pbtilld" };
|
|
304
352
|
|
|
305
353
|
// src/components/button/use-styles.ts
|
|
306
354
|
function toneKey(variant2, tone4) {
|
|
307
|
-
|
|
355
|
+
const Tone = `${tone4.charAt(0).toUpperCase()}${tone4.slice(1)}`;
|
|
356
|
+
return `${variant2}${Tone}`;
|
|
308
357
|
}
|
|
309
358
|
function useStyles3({
|
|
310
359
|
variant: variant2 = "filled",
|
|
@@ -314,7 +363,7 @@ function useStyles3({
|
|
|
314
363
|
className
|
|
315
364
|
}) {
|
|
316
365
|
const { themeClass } = useTheme();
|
|
317
|
-
const container = (0,
|
|
366
|
+
const container = (0, import_react9.useMemo)(
|
|
318
367
|
() => [
|
|
319
368
|
themeClass,
|
|
320
369
|
root,
|
|
@@ -329,9 +378,9 @@ function useStyles3({
|
|
|
329
378
|
}
|
|
330
379
|
|
|
331
380
|
// src/components/button/index.tsx
|
|
332
|
-
var
|
|
381
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
333
382
|
var ICON_SIZE = { sm: 14, md: 16, lg: 18 };
|
|
334
|
-
var Button = (0,
|
|
383
|
+
var Button = (0, import_react10.forwardRef)(function Button2({
|
|
335
384
|
variant: variant2,
|
|
336
385
|
tone: tone4,
|
|
337
386
|
size: size3 = "md",
|
|
@@ -340,23 +389,36 @@ var Button = (0, import_react8.forwardRef)(function Button2({
|
|
|
340
389
|
full: full2,
|
|
341
390
|
className,
|
|
342
391
|
type = "button",
|
|
392
|
+
testId,
|
|
343
393
|
children,
|
|
344
394
|
...rest
|
|
345
395
|
}, ref) {
|
|
346
396
|
const { container } = useStyles3({ variant: variant2, tone: tone4, size: size3, full: full2, className });
|
|
397
|
+
const { testId: dataTestId } = useTestId("button", testId);
|
|
347
398
|
const iconSize = ICON_SIZE[size3];
|
|
348
|
-
return /* @__PURE__ */ (0,
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
399
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
400
|
+
"button",
|
|
401
|
+
{
|
|
402
|
+
ref,
|
|
403
|
+
type,
|
|
404
|
+
className: container,
|
|
405
|
+
"data-testid": dataTestId,
|
|
406
|
+
"data-state": states({ disabled: rest.disabled }),
|
|
407
|
+
...rest,
|
|
408
|
+
children: [
|
|
409
|
+
StartIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StartIcon, { size: iconSize }),
|
|
410
|
+
children,
|
|
411
|
+
EndIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EndIcon, { size: iconSize })
|
|
412
|
+
]
|
|
413
|
+
}
|
|
414
|
+
);
|
|
353
415
|
});
|
|
354
416
|
|
|
355
417
|
// src/components/divider/index.tsx
|
|
356
|
-
var
|
|
418
|
+
var import_react12 = require("react");
|
|
357
419
|
|
|
358
420
|
// src/components/divider/use-styles.ts
|
|
359
|
-
var
|
|
421
|
+
var import_react11 = require("react");
|
|
360
422
|
|
|
361
423
|
// src/components/divider/use-styles.css.ts
|
|
362
424
|
var horizontal = "use-styles_horizontal__1n7v7yj1";
|
|
@@ -369,7 +431,7 @@ var vertical = "use-styles_vertical__1n7v7yj2";
|
|
|
369
431
|
// src/components/divider/use-styles.ts
|
|
370
432
|
function useStyles4({ vertical: vertical2, hasLabel }) {
|
|
371
433
|
const { themeClass } = useTheme();
|
|
372
|
-
const root24 = (0,
|
|
434
|
+
const root24 = (0, import_react11.useMemo)(
|
|
373
435
|
() => [
|
|
374
436
|
themeClass,
|
|
375
437
|
root2,
|
|
@@ -381,25 +443,25 @@ function useStyles4({ vertical: vertical2, hasLabel }) {
|
|
|
381
443
|
}
|
|
382
444
|
|
|
383
445
|
// src/components/divider/index.tsx
|
|
384
|
-
var
|
|
385
|
-
var Divider = (0,
|
|
446
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
447
|
+
var Divider = (0, import_react12.forwardRef)(function Divider2({ vertical: vertical2, label: label7, ...rest }, ref) {
|
|
386
448
|
const hasLabel = label7 != null;
|
|
387
449
|
const { root: root24, line: line2, label: labelClass } = useStyles4({ vertical: vertical2, hasLabel });
|
|
388
450
|
if (hasLabel) {
|
|
389
|
-
return /* @__PURE__ */ (0,
|
|
390
|
-
/* @__PURE__ */ (0,
|
|
391
|
-
/* @__PURE__ */ (0,
|
|
392
|
-
/* @__PURE__ */ (0,
|
|
451
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref, role: "separator", className: root24, ...rest, children: [
|
|
452
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: line2 }),
|
|
453
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: labelClass, children: label7 }),
|
|
454
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: line2 })
|
|
393
455
|
] });
|
|
394
456
|
}
|
|
395
|
-
return /* @__PURE__ */ (0,
|
|
457
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, role: "separator", className: root24, ...rest });
|
|
396
458
|
});
|
|
397
459
|
|
|
398
460
|
// src/components/avatar/index.tsx
|
|
399
|
-
var
|
|
461
|
+
var import_react14 = require("react");
|
|
400
462
|
|
|
401
463
|
// src/components/avatar/use-styles.ts
|
|
402
|
-
var
|
|
464
|
+
var import_react13 = require("react");
|
|
403
465
|
|
|
404
466
|
// src/components/avatar/use-styles.css.ts
|
|
405
467
|
var root3 = "use-styles_root__1mn1rmu0";
|
|
@@ -413,7 +475,7 @@ function useStyles5({
|
|
|
413
475
|
className
|
|
414
476
|
}) {
|
|
415
477
|
const { themeClass } = useTheme();
|
|
416
|
-
const root24 = (0,
|
|
478
|
+
const root24 = (0, import_react13.useMemo)(
|
|
417
479
|
() => [
|
|
418
480
|
themeClass,
|
|
419
481
|
root3,
|
|
@@ -427,17 +489,17 @@ function useStyles5({
|
|
|
427
489
|
}
|
|
428
490
|
|
|
429
491
|
// src/components/avatar/index.tsx
|
|
430
|
-
var
|
|
431
|
-
var Avatar = (0,
|
|
492
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
493
|
+
var Avatar = (0, import_react14.forwardRef)(function Avatar2({ size: size3, filled, className, children, ...rest }, ref) {
|
|
432
494
|
const { root: root24 } = useStyles5({ size: size3, filled, className });
|
|
433
|
-
return /* @__PURE__ */ (0,
|
|
495
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { ref, className: root24, ...rest, children });
|
|
434
496
|
});
|
|
435
497
|
|
|
436
498
|
// src/components/badge/index.tsx
|
|
437
|
-
var
|
|
499
|
+
var import_react16 = require("react");
|
|
438
500
|
|
|
439
501
|
// src/components/badge/use-styles.ts
|
|
440
|
-
var
|
|
502
|
+
var import_react15 = require("react");
|
|
441
503
|
|
|
442
504
|
// src/components/badge/use-styles.css.ts
|
|
443
505
|
var dot = "use-styles_dot__1wpei6p1";
|
|
@@ -450,29 +512,29 @@ function useStyles6({
|
|
|
450
512
|
className
|
|
451
513
|
}) {
|
|
452
514
|
const { themeClass } = useTheme();
|
|
453
|
-
const root24 = (0,
|
|
515
|
+
const root24 = (0, import_react15.useMemo)(
|
|
454
516
|
() => [themeClass, root4, className].filter(Boolean).join(" "),
|
|
455
517
|
[themeClass, className]
|
|
456
518
|
);
|
|
457
|
-
const dot3 = (0,
|
|
519
|
+
const dot3 = (0, import_react15.useMemo)(() => [dot, tone2[tone4]].join(" "), [tone4]);
|
|
458
520
|
return { root: root24, dot: dot3 };
|
|
459
521
|
}
|
|
460
522
|
|
|
461
523
|
// src/components/badge/index.tsx
|
|
462
|
-
var
|
|
463
|
-
var Badge = (0,
|
|
524
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
525
|
+
var Badge = (0, import_react16.forwardRef)(function Badge2({ count, tone: tone4, className, children, ...rest }, ref) {
|
|
464
526
|
const { root: root24, dot: dot3 } = useStyles6({ tone: tone4, className });
|
|
465
|
-
return /* @__PURE__ */ (0,
|
|
527
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { ref, className: root24, ...rest, children: [
|
|
466
528
|
children,
|
|
467
|
-
count != null && /* @__PURE__ */ (0,
|
|
529
|
+
count != null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: dot3, children: count })
|
|
468
530
|
] });
|
|
469
531
|
});
|
|
470
532
|
|
|
471
533
|
// src/components/progress/index.tsx
|
|
472
|
-
var
|
|
534
|
+
var import_react18 = require("react");
|
|
473
535
|
|
|
474
536
|
// src/components/progress/use-styles.ts
|
|
475
|
-
var
|
|
537
|
+
var import_react17 = require("react");
|
|
476
538
|
|
|
477
539
|
// src/components/progress/use-styles.css.ts
|
|
478
540
|
var bar = "use-styles_bar__kbop7v3";
|
|
@@ -488,7 +550,7 @@ function useStyles7({
|
|
|
488
550
|
}) {
|
|
489
551
|
const { themeClass } = useTheme();
|
|
490
552
|
const indeterminate2 = value === void 0;
|
|
491
|
-
return (0,
|
|
553
|
+
return (0, import_react17.useMemo)(() => {
|
|
492
554
|
const root24 = (...classes) => [themeClass, ...classes, className].filter(Boolean).join(" ");
|
|
493
555
|
if (variant2 === "circular") {
|
|
494
556
|
return { track: "", bar: "", spinner: root24(spinner) };
|
|
@@ -502,12 +564,12 @@ function useStyles7({
|
|
|
502
564
|
}
|
|
503
565
|
|
|
504
566
|
// src/components/progress/index.tsx
|
|
505
|
-
var
|
|
506
|
-
var Progress = (0,
|
|
567
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
568
|
+
var Progress = (0, import_react18.forwardRef)(function Progress2({ variant: variant2 = "linear", value, size: size3 = 20, className, ...rest }, ref) {
|
|
507
569
|
const { track: track4, bar: bar2, spinner: spinner2 } = useStyles7({ variant: variant2, value, className });
|
|
508
570
|
const indeterminate2 = value === void 0;
|
|
509
571
|
if (variant2 === "circular") {
|
|
510
|
-
return /* @__PURE__ */ (0,
|
|
572
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
511
573
|
"span",
|
|
512
574
|
{
|
|
513
575
|
ref,
|
|
@@ -521,7 +583,7 @@ var Progress = (0, import_react16.forwardRef)(function Progress2({ variant: vari
|
|
|
521
583
|
}
|
|
522
584
|
);
|
|
523
585
|
}
|
|
524
|
-
return /* @__PURE__ */ (0,
|
|
586
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
525
587
|
"div",
|
|
526
588
|
{
|
|
527
589
|
ref,
|
|
@@ -531,18 +593,18 @@ var Progress = (0, import_react16.forwardRef)(function Progress2({ variant: vari
|
|
|
531
593
|
"aria-valuemin": indeterminate2 ? void 0 : 0,
|
|
532
594
|
"aria-valuemax": indeterminate2 ? void 0 : 100,
|
|
533
595
|
...rest,
|
|
534
|
-
children: /* @__PURE__ */ (0,
|
|
596
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: bar2, style: indeterminate2 ? void 0 : { width: `${value}%` } })
|
|
535
597
|
}
|
|
536
598
|
);
|
|
537
599
|
});
|
|
538
600
|
|
|
539
601
|
// src/components/chip/index.tsx
|
|
540
|
-
var
|
|
602
|
+
var import_react20 = require("react");
|
|
541
603
|
|
|
542
604
|
// src/components/icons/x/index.tsx
|
|
543
|
-
var
|
|
605
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
544
606
|
function XIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
545
|
-
return /* @__PURE__ */ (0,
|
|
607
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
546
608
|
"svg",
|
|
547
609
|
{
|
|
548
610
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -557,15 +619,15 @@ function XIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
557
619
|
"aria-hidden": "true",
|
|
558
620
|
...rest,
|
|
559
621
|
children: [
|
|
560
|
-
/* @__PURE__ */ (0,
|
|
561
|
-
/* @__PURE__ */ (0,
|
|
622
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M18 6 6 18" }),
|
|
623
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "m6 6 12 12" })
|
|
562
624
|
]
|
|
563
625
|
}
|
|
564
626
|
);
|
|
565
627
|
}
|
|
566
628
|
|
|
567
629
|
// src/components/chip/use-styles.ts
|
|
568
|
-
var
|
|
630
|
+
var import_react19 = require("react");
|
|
569
631
|
|
|
570
632
|
// src/components/chip/use-styles.css.ts
|
|
571
633
|
var clickable = "use-styles_clickable__1axilf44";
|
|
@@ -581,7 +643,7 @@ function useStyles8({
|
|
|
581
643
|
clickable: clickable2
|
|
582
644
|
}) {
|
|
583
645
|
const { themeClass } = useTheme();
|
|
584
|
-
const root24 = (0,
|
|
646
|
+
const root24 = (0, import_react19.useMemo)(
|
|
585
647
|
() => [
|
|
586
648
|
themeClass,
|
|
587
649
|
root5,
|
|
@@ -594,27 +656,27 @@ function useStyles8({
|
|
|
594
656
|
}
|
|
595
657
|
|
|
596
658
|
// src/components/chip/index.tsx
|
|
597
|
-
var
|
|
598
|
-
var Chip = (0,
|
|
659
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
660
|
+
var Chip = (0, import_react20.forwardRef)(function Chip2({ selected: selected3, tone: tone4, onDelete, onClick, children, ...rest }, ref) {
|
|
599
661
|
const clickable2 = Boolean(onClick);
|
|
600
662
|
const { root: root24, deleteBtn: deleteBtn2 } = useStyles8({ selected: selected3, tone: tone4, clickable: clickable2 });
|
|
601
663
|
const handleDelete = (event) => {
|
|
602
664
|
event.stopPropagation();
|
|
603
665
|
onDelete?.();
|
|
604
666
|
};
|
|
605
|
-
return /* @__PURE__ */ (0,
|
|
667
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { ref, className: root24, onClick, ...rest, children: [
|
|
606
668
|
children,
|
|
607
|
-
onDelete && /* @__PURE__ */ (0,
|
|
669
|
+
onDelete && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: deleteBtn2, "aria-label": "Remove", onClick: handleDelete, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(XIcon, { size: 13 }) })
|
|
608
670
|
] });
|
|
609
671
|
});
|
|
610
672
|
|
|
611
673
|
// src/components/checkbox/index.tsx
|
|
612
|
-
var
|
|
674
|
+
var import_react22 = require("react");
|
|
613
675
|
|
|
614
676
|
// src/components/icons/check/index.tsx
|
|
615
|
-
var
|
|
677
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
616
678
|
function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
617
|
-
return /* @__PURE__ */ (0,
|
|
679
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
618
680
|
"svg",
|
|
619
681
|
{
|
|
620
682
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -628,13 +690,13 @@ function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
628
690
|
strokeLinejoin: "round",
|
|
629
691
|
"aria-hidden": "true",
|
|
630
692
|
...rest,
|
|
631
|
-
children: /* @__PURE__ */ (0,
|
|
693
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M20 6 9 17l-5-5" })
|
|
632
694
|
}
|
|
633
695
|
);
|
|
634
696
|
}
|
|
635
697
|
|
|
636
698
|
// src/components/checkbox/use-styles.ts
|
|
637
|
-
var
|
|
699
|
+
var import_react21 = require("react");
|
|
638
700
|
|
|
639
701
|
// src/components/checkbox/use-styles.css.ts
|
|
640
702
|
var box = "use-styles_box__9zoga91";
|
|
@@ -647,11 +709,11 @@ var root6 = "use-styles_root__9zoga90";
|
|
|
647
709
|
// src/components/checkbox/use-styles.ts
|
|
648
710
|
function useStyles9({ checked, disabled: disabled3 }) {
|
|
649
711
|
const { themeClass } = useTheme();
|
|
650
|
-
const root24 = (0,
|
|
712
|
+
const root24 = (0, import_react21.useMemo)(
|
|
651
713
|
() => [themeClass, root6, disabled3 && disabled].filter(Boolean).join(" "),
|
|
652
714
|
[themeClass, disabled3]
|
|
653
715
|
);
|
|
654
|
-
const box2 = (0,
|
|
716
|
+
const box2 = (0, import_react21.useMemo)(
|
|
655
717
|
() => [box, checked && boxChecked].filter(Boolean).join(" "),
|
|
656
718
|
[checked]
|
|
657
719
|
);
|
|
@@ -659,15 +721,15 @@ function useStyles9({ checked, disabled: disabled3 }) {
|
|
|
659
721
|
}
|
|
660
722
|
|
|
661
723
|
// src/components/checkbox/index.tsx
|
|
662
|
-
var
|
|
663
|
-
var Checkbox = (0,
|
|
724
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
725
|
+
var Checkbox = (0, import_react22.forwardRef)(function Checkbox2({ checked = false, onChange, label: label7, disabled: disabled3 = false, id, ...rest }, ref) {
|
|
664
726
|
const { root: root24, input: input6, box: box2, check: check2 } = useStyles9({ checked, disabled: disabled3 });
|
|
665
727
|
const handleChange = (e) => {
|
|
666
728
|
if (disabled3) return;
|
|
667
729
|
onChange?.(e.target.checked);
|
|
668
730
|
};
|
|
669
|
-
return /* @__PURE__ */ (0,
|
|
670
|
-
/* @__PURE__ */ (0,
|
|
731
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: root24, children: [
|
|
732
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
671
733
|
"input",
|
|
672
734
|
{
|
|
673
735
|
ref,
|
|
@@ -680,16 +742,16 @@ var Checkbox = (0, import_react20.forwardRef)(function Checkbox2({ checked = fal
|
|
|
680
742
|
...rest
|
|
681
743
|
}
|
|
682
744
|
),
|
|
683
|
-
/* @__PURE__ */ (0,
|
|
745
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: box2, children: checked && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CheckIcon, { size: 12, className: check2 }) }),
|
|
684
746
|
label7
|
|
685
747
|
] });
|
|
686
748
|
});
|
|
687
749
|
|
|
688
750
|
// src/components/radio/index.tsx
|
|
689
|
-
var
|
|
751
|
+
var import_react24 = require("react");
|
|
690
752
|
|
|
691
753
|
// src/components/radio/use-styles.ts
|
|
692
|
-
var
|
|
754
|
+
var import_react23 = require("react");
|
|
693
755
|
|
|
694
756
|
// src/components/radio/use-styles.css.ts
|
|
695
757
|
var circle = "use-styles_circle__vy61b42";
|
|
@@ -705,7 +767,7 @@ function useStyles10({
|
|
|
705
767
|
className
|
|
706
768
|
}) {
|
|
707
769
|
const { themeClass } = useTheme();
|
|
708
|
-
const root24 = (0,
|
|
770
|
+
const root24 = (0, import_react23.useMemo)(
|
|
709
771
|
() => [themeClass, root7, disabled3 && disabled2, className].filter(Boolean).join(" "),
|
|
710
772
|
[themeClass, disabled3, className]
|
|
711
773
|
);
|
|
@@ -719,11 +781,11 @@ function useStyles10({
|
|
|
719
781
|
}
|
|
720
782
|
|
|
721
783
|
// src/components/radio/index.tsx
|
|
722
|
-
var
|
|
723
|
-
var Radio = (0,
|
|
784
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
785
|
+
var Radio = (0, import_react24.forwardRef)(function Radio2({ checked, onChange, label: label7, name, value, disabled: disabled3, ...rest }, ref) {
|
|
724
786
|
const { root: root24, input: input6, circle: circle2, dot: dot3, label: labelClass } = useStyles10({ disabled: disabled3 });
|
|
725
|
-
return /* @__PURE__ */ (0,
|
|
726
|
-
/* @__PURE__ */ (0,
|
|
787
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: root24, children: [
|
|
788
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
727
789
|
"input",
|
|
728
790
|
{
|
|
729
791
|
ref,
|
|
@@ -737,16 +799,16 @@ var Radio = (0, import_react22.forwardRef)(function Radio2({ checked, onChange,
|
|
|
737
799
|
...rest
|
|
738
800
|
}
|
|
739
801
|
),
|
|
740
|
-
/* @__PURE__ */ (0,
|
|
741
|
-
label7 != null && /* @__PURE__ */ (0,
|
|
802
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: circle2, children: checked && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: dot3 }) }),
|
|
803
|
+
label7 != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: labelClass, children: label7 })
|
|
742
804
|
] });
|
|
743
805
|
});
|
|
744
806
|
|
|
745
807
|
// src/components/switch/index.tsx
|
|
746
|
-
var
|
|
808
|
+
var import_react26 = require("react");
|
|
747
809
|
|
|
748
810
|
// src/components/switch/use-styles.ts
|
|
749
|
-
var
|
|
811
|
+
var import_react25 = require("react");
|
|
750
812
|
|
|
751
813
|
// src/components/switch/use-styles.css.ts
|
|
752
814
|
var input3 = "surfaces_srOnly__1qa7atn0";
|
|
@@ -760,7 +822,7 @@ var trackChecked = "use-styles_trackChecked__1r6kem72";
|
|
|
760
822
|
// src/components/switch/use-styles.ts
|
|
761
823
|
function useStyles11({ checked }) {
|
|
762
824
|
const { themeClass } = useTheme();
|
|
763
|
-
return (0,
|
|
825
|
+
return (0, import_react25.useMemo)(
|
|
764
826
|
() => ({
|
|
765
827
|
root: [themeClass, root8].filter(Boolean).join(" "),
|
|
766
828
|
input: input3,
|
|
@@ -773,11 +835,11 @@ function useStyles11({ checked }) {
|
|
|
773
835
|
}
|
|
774
836
|
|
|
775
837
|
// src/components/switch/index.tsx
|
|
776
|
-
var
|
|
777
|
-
var Switch = (0,
|
|
838
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
839
|
+
var Switch = (0, import_react26.forwardRef)(function Switch2({ checked = false, onChange, label: label7, disabled: disabled3, ...rest }, ref) {
|
|
778
840
|
const { root: root24, input: input6, track: track4, knob: knob2, label: labelClass } = useStyles11({ checked });
|
|
779
|
-
return /* @__PURE__ */ (0,
|
|
780
|
-
/* @__PURE__ */ (0,
|
|
841
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: root24, children: [
|
|
842
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
781
843
|
"input",
|
|
782
844
|
{
|
|
783
845
|
ref,
|
|
@@ -794,19 +856,19 @@ var Switch = (0, import_react24.forwardRef)(function Switch2({ checked = false,
|
|
|
794
856
|
...rest
|
|
795
857
|
}
|
|
796
858
|
),
|
|
797
|
-
/* @__PURE__ */ (0,
|
|
798
|
-
label7 != null && /* @__PURE__ */ (0,
|
|
859
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: track4, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: knob2 }) }),
|
|
860
|
+
label7 != null && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: labelClass, children: label7 })
|
|
799
861
|
] });
|
|
800
862
|
});
|
|
801
863
|
|
|
802
864
|
// src/components/text-field/index.tsx
|
|
803
|
-
var
|
|
865
|
+
var import_react29 = require("react");
|
|
804
866
|
|
|
805
867
|
// src/components/base-field/index.tsx
|
|
806
|
-
var
|
|
868
|
+
var import_react28 = require("react");
|
|
807
869
|
|
|
808
870
|
// src/components/base-field/use-styles.ts
|
|
809
|
-
var
|
|
871
|
+
var import_react27 = require("react");
|
|
810
872
|
|
|
811
873
|
// src/components/base-field/use-styles.css.ts
|
|
812
874
|
var field = "use-styles_field__1c3cgd3";
|
|
@@ -825,7 +887,7 @@ var trailingSlot = "use-styles_trailingSlot__1c3cgdb";
|
|
|
825
887
|
// src/components/base-field/use-styles.ts
|
|
826
888
|
function useStyles12({ error, hasStartIcon, hasTrailing, className }) {
|
|
827
889
|
const { themeClass } = useTheme();
|
|
828
|
-
return (0,
|
|
890
|
+
return (0, import_react27.useMemo)(() => {
|
|
829
891
|
const root24 = [themeClass, root9].filter(Boolean).join(" ");
|
|
830
892
|
const labelText2 = [labelText, error && labelTextError].filter(Boolean).join(" ");
|
|
831
893
|
const input6 = [
|
|
@@ -849,9 +911,9 @@ function useStyles12({ error, hasStartIcon, hasTrailing, className }) {
|
|
|
849
911
|
}
|
|
850
912
|
|
|
851
913
|
// src/components/base-field/index.tsx
|
|
852
|
-
var
|
|
853
|
-
var BaseField = (0,
|
|
854
|
-
const autoId = (0,
|
|
914
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
915
|
+
var BaseField = (0, import_react28.forwardRef)(function BaseField2({ label: label7, help, error, startIcon: StartIcon, trailing: trailing2, id, className, testId, children }, ref) {
|
|
916
|
+
const autoId = (0, import_react28.useId)();
|
|
855
917
|
const controlId = id ?? autoId;
|
|
856
918
|
const errorMessage = error != null && error !== false && error !== true && error !== "" ? error : null;
|
|
857
919
|
const hasError = error === true || errorMessage != null;
|
|
@@ -863,27 +925,30 @@ var BaseField = (0, import_react26.forwardRef)(function BaseField2({ label: labe
|
|
|
863
925
|
hasTrailing: trailing2 != null,
|
|
864
926
|
className
|
|
865
927
|
});
|
|
928
|
+
const { testId: rootTestId, slot } = useTestId("field", testId);
|
|
866
929
|
const control = {
|
|
867
930
|
id: controlId,
|
|
868
931
|
className: classes.input,
|
|
869
932
|
ref,
|
|
870
933
|
"aria-describedby": messageId,
|
|
871
|
-
"aria-invalid": hasError ? true : void 0
|
|
934
|
+
"aria-invalid": hasError ? true : void 0,
|
|
935
|
+
"data-testid": slot("input")
|
|
872
936
|
};
|
|
873
|
-
return /* @__PURE__ */ (0,
|
|
874
|
-
label7 != null && /* @__PURE__ */ (0,
|
|
875
|
-
/* @__PURE__ */ (0,
|
|
876
|
-
StartIcon != null && /* @__PURE__ */ (0,
|
|
937
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: classes.root, "data-testid": rootTestId, "data-state": states({ error: hasError }), children: [
|
|
938
|
+
label7 != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { htmlFor: controlId, className: classes.labelText, "data-testid": slot("label"), children: label7 }),
|
|
939
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: classes.field, children: [
|
|
940
|
+
StartIcon != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: classes.startIconSlot, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StartIcon, { size: 18 }) }),
|
|
877
941
|
children(control),
|
|
878
|
-
trailing2 != null && /* @__PURE__ */ (0,
|
|
942
|
+
trailing2 != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: classes.trailingSlot, children: trailing2 })
|
|
879
943
|
] }),
|
|
880
944
|
message2 != null && // `aria-live` solo cuando el mensaje es un error: anuncia la validación al aparecer.
|
|
881
|
-
/* @__PURE__ */ (0,
|
|
945
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
882
946
|
"span",
|
|
883
947
|
{
|
|
884
948
|
id: messageId,
|
|
885
949
|
className: classes.helpText,
|
|
886
950
|
"aria-live": errorMessage ? "polite" : void 0,
|
|
951
|
+
"data-testid": slot("message"),
|
|
887
952
|
children: message2
|
|
888
953
|
}
|
|
889
954
|
)
|
|
@@ -891,12 +956,12 @@ var BaseField = (0, import_react26.forwardRef)(function BaseField2({ label: labe
|
|
|
891
956
|
});
|
|
892
957
|
|
|
893
958
|
// src/components/text-field/index.tsx
|
|
894
|
-
var
|
|
959
|
+
var import_jsx_runtime17 = (
|
|
895
960
|
// En multiline el control es un <textarea>: no reenviamos `controlRef` porque el
|
|
896
961
|
// tipo público de la ref es HTMLInputElement (la ref aplica solo a la rama <input>).
|
|
897
962
|
require("react/jsx-runtime")
|
|
898
963
|
);
|
|
899
|
-
var TextField = (0,
|
|
964
|
+
var TextField = (0, import_react29.forwardRef)(function TextField2({
|
|
900
965
|
label: label7,
|
|
901
966
|
help,
|
|
902
967
|
error,
|
|
@@ -907,9 +972,11 @@ var TextField = (0, import_react27.forwardRef)(function TextField2({
|
|
|
907
972
|
onChange,
|
|
908
973
|
className,
|
|
909
974
|
id,
|
|
975
|
+
testId,
|
|
910
976
|
...rest
|
|
911
977
|
}, ref) {
|
|
912
|
-
|
|
978
|
+
const rawTestId = rest["data-testid"];
|
|
979
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
913
980
|
BaseField,
|
|
914
981
|
{
|
|
915
982
|
ref,
|
|
@@ -919,19 +986,22 @@ var TextField = (0, import_react27.forwardRef)(function TextField2({
|
|
|
919
986
|
startIcon,
|
|
920
987
|
id,
|
|
921
988
|
className,
|
|
922
|
-
|
|
989
|
+
testId,
|
|
990
|
+
children: ({ ref: controlRef, ...control }) => multiline ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
923
991
|
"textarea",
|
|
924
992
|
{
|
|
925
993
|
...rest,
|
|
926
994
|
...control,
|
|
995
|
+
"data-testid": rawTestId ?? control["data-testid"],
|
|
927
996
|
rows: rows ?? 4,
|
|
928
997
|
onChange: (e) => onChange?.(e.target.value)
|
|
929
998
|
}
|
|
930
|
-
) : /* @__PURE__ */ (0,
|
|
999
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
931
1000
|
"input",
|
|
932
1001
|
{
|
|
933
1002
|
...rest,
|
|
934
1003
|
...control,
|
|
1004
|
+
"data-testid": rawTestId ?? control["data-testid"],
|
|
935
1005
|
ref: controlRef,
|
|
936
1006
|
type,
|
|
937
1007
|
onChange: (e) => onChange?.(e.target.value)
|
|
@@ -942,12 +1012,12 @@ var TextField = (0, import_react27.forwardRef)(function TextField2({
|
|
|
942
1012
|
});
|
|
943
1013
|
|
|
944
1014
|
// src/components/password-field/index.tsx
|
|
945
|
-
var
|
|
1015
|
+
var import_react31 = require("react");
|
|
946
1016
|
|
|
947
1017
|
// src/components/icons/eye/index.tsx
|
|
948
|
-
var
|
|
1018
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
949
1019
|
function EyeIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
950
|
-
return /* @__PURE__ */ (0,
|
|
1020
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
951
1021
|
"svg",
|
|
952
1022
|
{
|
|
953
1023
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -962,17 +1032,17 @@ function EyeIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
962
1032
|
"aria-hidden": "true",
|
|
963
1033
|
...rest,
|
|
964
1034
|
children: [
|
|
965
|
-
/* @__PURE__ */ (0,
|
|
966
|
-
/* @__PURE__ */ (0,
|
|
1035
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
|
|
1036
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: "12", cy: "12", r: "3" })
|
|
967
1037
|
]
|
|
968
1038
|
}
|
|
969
1039
|
);
|
|
970
1040
|
}
|
|
971
1041
|
|
|
972
1042
|
// src/components/icons/eye-off/index.tsx
|
|
973
|
-
var
|
|
1043
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
974
1044
|
function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
975
|
-
return /* @__PURE__ */ (0,
|
|
1045
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
976
1046
|
"svg",
|
|
977
1047
|
{
|
|
978
1048
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -987,31 +1057,31 @@ function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
987
1057
|
"aria-hidden": "true",
|
|
988
1058
|
...rest,
|
|
989
1059
|
children: [
|
|
990
|
-
/* @__PURE__ */ (0,
|
|
991
|
-
/* @__PURE__ */ (0,
|
|
992
|
-
/* @__PURE__ */ (0,
|
|
993
|
-
/* @__PURE__ */ (0,
|
|
1060
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
|
|
1061
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.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" }),
|
|
1062
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.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" }),
|
|
1063
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "m2 2 20 20" })
|
|
994
1064
|
]
|
|
995
1065
|
}
|
|
996
1066
|
);
|
|
997
1067
|
}
|
|
998
1068
|
|
|
999
1069
|
// src/components/password-field/use-styles.ts
|
|
1000
|
-
var
|
|
1070
|
+
var import_react30 = require("react");
|
|
1001
1071
|
|
|
1002
1072
|
// src/components/password-field/use-styles.css.ts
|
|
1003
1073
|
var revealButton = "use-styles_revealButton__rsu9d50";
|
|
1004
1074
|
|
|
1005
1075
|
// src/components/password-field/use-styles.ts
|
|
1006
1076
|
function useStyles13() {
|
|
1007
|
-
return (0,
|
|
1077
|
+
return (0, import_react30.useMemo)(() => ({ revealButton }), []);
|
|
1008
1078
|
}
|
|
1009
1079
|
|
|
1010
1080
|
// src/components/password-field/index.tsx
|
|
1011
|
-
var
|
|
1012
|
-
var PasswordField = (0,
|
|
1081
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1082
|
+
var PasswordField = (0, import_react31.forwardRef)(
|
|
1013
1083
|
function PasswordField2({ label: label7, help, error, startIcon, onChange, id, className, ...rest }, ref) {
|
|
1014
|
-
const [reveal, setReveal] = (0,
|
|
1084
|
+
const [reveal, setReveal] = (0, import_react31.useState)(false);
|
|
1015
1085
|
const classes = useStyles13();
|
|
1016
1086
|
const handleChange = (e) => {
|
|
1017
1087
|
onChange?.(e.target.value);
|
|
@@ -1019,7 +1089,7 @@ var PasswordField = (0, import_react29.forwardRef)(
|
|
|
1019
1089
|
const handleToggleMouseDown = (e) => {
|
|
1020
1090
|
e.preventDefault();
|
|
1021
1091
|
};
|
|
1022
|
-
const toggleButton = /* @__PURE__ */ (0,
|
|
1092
|
+
const toggleButton = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1023
1093
|
"button",
|
|
1024
1094
|
{
|
|
1025
1095
|
type: "button",
|
|
@@ -1028,10 +1098,10 @@ var PasswordField = (0, import_react29.forwardRef)(
|
|
|
1028
1098
|
"aria-label": reveal ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a",
|
|
1029
1099
|
onMouseDown: handleToggleMouseDown,
|
|
1030
1100
|
onClick: () => setReveal((r) => !r),
|
|
1031
|
-
children: reveal ? /* @__PURE__ */ (0,
|
|
1101
|
+
children: reveal ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(EyeOffIcon, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(EyeIcon, { size: 18 })
|
|
1032
1102
|
}
|
|
1033
1103
|
);
|
|
1034
|
-
return /* @__PURE__ */ (0,
|
|
1104
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1035
1105
|
BaseField,
|
|
1036
1106
|
{
|
|
1037
1107
|
ref,
|
|
@@ -1042,7 +1112,7 @@ var PasswordField = (0, import_react29.forwardRef)(
|
|
|
1042
1112
|
trailing: toggleButton,
|
|
1043
1113
|
id,
|
|
1044
1114
|
className,
|
|
1045
|
-
children: (control) => /* @__PURE__ */ (0,
|
|
1115
|
+
children: (control) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1046
1116
|
"input",
|
|
1047
1117
|
{
|
|
1048
1118
|
...rest,
|
|
@@ -1057,15 +1127,15 @@ var PasswordField = (0, import_react29.forwardRef)(
|
|
|
1057
1127
|
);
|
|
1058
1128
|
|
|
1059
1129
|
// src/components/money-field/index.tsx
|
|
1060
|
-
var
|
|
1061
|
-
var
|
|
1130
|
+
var import_react32 = require("react");
|
|
1131
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1062
1132
|
function parseAmount(raw) {
|
|
1063
1133
|
const cleaned = raw.replace(/[^0-9.-]/g, "");
|
|
1064
1134
|
if (cleaned === "" || cleaned === "-" || cleaned === ".") return null;
|
|
1065
1135
|
const n = Number.parseFloat(cleaned);
|
|
1066
1136
|
return Number.isNaN(n) ? null : n;
|
|
1067
1137
|
}
|
|
1068
|
-
var MoneyField = (0,
|
|
1138
|
+
var MoneyField = (0, import_react32.forwardRef)(function MoneyField2({
|
|
1069
1139
|
value,
|
|
1070
1140
|
onChange,
|
|
1071
1141
|
currency = "USD",
|
|
@@ -1080,9 +1150,9 @@ var MoneyField = (0, import_react30.forwardRef)(function MoneyField2({
|
|
|
1080
1150
|
onBlur,
|
|
1081
1151
|
...rest
|
|
1082
1152
|
}, ref) {
|
|
1083
|
-
const [focused, setFocused] = (0,
|
|
1084
|
-
const [draft, setDraft] = (0,
|
|
1085
|
-
const formatter = (0,
|
|
1153
|
+
const [focused, setFocused] = (0, import_react32.useState)(false);
|
|
1154
|
+
const [draft, setDraft] = (0, import_react32.useState)("");
|
|
1155
|
+
const formatter = (0, import_react32.useMemo)(
|
|
1086
1156
|
() => new Intl.NumberFormat(locale, { style: "currency", currency }),
|
|
1087
1157
|
[locale, currency]
|
|
1088
1158
|
);
|
|
@@ -1098,7 +1168,7 @@ var MoneyField = (0, import_react30.forwardRef)(function MoneyField2({
|
|
|
1098
1168
|
onChange?.(parseAmount(draft));
|
|
1099
1169
|
onBlur?.(e);
|
|
1100
1170
|
};
|
|
1101
|
-
return /* @__PURE__ */ (0,
|
|
1171
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1102
1172
|
BaseField,
|
|
1103
1173
|
{
|
|
1104
1174
|
ref,
|
|
@@ -1108,7 +1178,7 @@ var MoneyField = (0, import_react30.forwardRef)(function MoneyField2({
|
|
|
1108
1178
|
startIcon,
|
|
1109
1179
|
id,
|
|
1110
1180
|
className,
|
|
1111
|
-
children: (control) => /* @__PURE__ */ (0,
|
|
1181
|
+
children: (control) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1112
1182
|
"input",
|
|
1113
1183
|
{
|
|
1114
1184
|
...rest,
|
|
@@ -1125,10 +1195,10 @@ var MoneyField = (0, import_react30.forwardRef)(function MoneyField2({
|
|
|
1125
1195
|
});
|
|
1126
1196
|
|
|
1127
1197
|
// src/components/icon-button/index.tsx
|
|
1128
|
-
var
|
|
1198
|
+
var import_react34 = require("react");
|
|
1129
1199
|
|
|
1130
1200
|
// src/components/icon-button/use-styles.ts
|
|
1131
|
-
var
|
|
1201
|
+
var import_react33 = require("react");
|
|
1132
1202
|
|
|
1133
1203
|
// src/components/icon-button/use-styles.css.ts
|
|
1134
1204
|
var accent = "use-styles_accent__18np0q02";
|
|
@@ -1141,7 +1211,7 @@ function useStyles14({
|
|
|
1141
1211
|
tone: tone4 = "ink"
|
|
1142
1212
|
}) {
|
|
1143
1213
|
const { themeClass } = useTheme();
|
|
1144
|
-
const root24 = (0,
|
|
1214
|
+
const root24 = (0, import_react33.useMemo)(
|
|
1145
1215
|
() => [themeClass, root10, tone4 === "accent" && accent, active2 && active].filter(Boolean).join(" "),
|
|
1146
1216
|
[themeClass, active2, tone4]
|
|
1147
1217
|
);
|
|
@@ -1149,8 +1219,8 @@ function useStyles14({
|
|
|
1149
1219
|
}
|
|
1150
1220
|
|
|
1151
1221
|
// src/components/icon-button/index.tsx
|
|
1152
|
-
var
|
|
1153
|
-
var IconButton = (0,
|
|
1222
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1223
|
+
var IconButton = (0, import_react34.forwardRef)(function IconButton2({ icon: Icon, active: active2, tone: tone4, title, type = "button", testId, ...rest }, ref) {
|
|
1154
1224
|
if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
|
|
1155
1225
|
const restProps = rest;
|
|
1156
1226
|
const hasName = title.trim() !== "" || restProps["aria-label"] != null || restProps["aria-labelledby"] != null;
|
|
@@ -1159,14 +1229,28 @@ var IconButton = (0, import_react32.forwardRef)(function IconButton2({ icon: Ico
|
|
|
1159
1229
|
}
|
|
1160
1230
|
}
|
|
1161
1231
|
const { root: root24 } = useStyles14({ active: active2, tone: tone4 });
|
|
1162
|
-
|
|
1232
|
+
const { testId: dataTestId } = useTestId("button", testId);
|
|
1233
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1234
|
+
"button",
|
|
1235
|
+
{
|
|
1236
|
+
ref,
|
|
1237
|
+
type,
|
|
1238
|
+
className: root24,
|
|
1239
|
+
"aria-label": title,
|
|
1240
|
+
title,
|
|
1241
|
+
"data-testid": dataTestId,
|
|
1242
|
+
"data-state": states({ active: active2, disabled: rest.disabled }),
|
|
1243
|
+
...rest,
|
|
1244
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { size: 18 })
|
|
1245
|
+
}
|
|
1246
|
+
);
|
|
1163
1247
|
});
|
|
1164
1248
|
|
|
1165
1249
|
// src/components/card/index.tsx
|
|
1166
|
-
var
|
|
1250
|
+
var import_react36 = require("react");
|
|
1167
1251
|
|
|
1168
1252
|
// src/components/card/use-styles.ts
|
|
1169
|
-
var
|
|
1253
|
+
var import_react35 = require("react");
|
|
1170
1254
|
|
|
1171
1255
|
// src/components/card/use-styles.css.ts
|
|
1172
1256
|
var body = "use-styles_body__1fuvd022";
|
|
@@ -1177,27 +1261,27 @@ var root11 = "use-styles_root__1fuvd020";
|
|
|
1177
1261
|
// src/components/card/use-styles.ts
|
|
1178
1262
|
function useStyles15() {
|
|
1179
1263
|
const { themeClass } = useTheme();
|
|
1180
|
-
const root24 = (0,
|
|
1264
|
+
const root24 = (0, import_react35.useMemo)(() => `${themeClass} ${root11}`, [themeClass]);
|
|
1181
1265
|
return { root: root24, header, body, footer };
|
|
1182
1266
|
}
|
|
1183
1267
|
|
|
1184
1268
|
// src/components/card/index.tsx
|
|
1185
|
-
var
|
|
1186
|
-
var CardRoot = (0,
|
|
1269
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1270
|
+
var CardRoot = (0, import_react36.forwardRef)(function Card({ children, ...rest }, ref) {
|
|
1187
1271
|
const { root: root24 } = useStyles15();
|
|
1188
|
-
return /* @__PURE__ */ (0,
|
|
1272
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, className: root24, ...rest, children });
|
|
1189
1273
|
});
|
|
1190
1274
|
function CardHeader({ children, ...rest }) {
|
|
1191
1275
|
const { header: header3 } = useStyles15();
|
|
1192
|
-
return /* @__PURE__ */ (0,
|
|
1276
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: header3, ...rest, children });
|
|
1193
1277
|
}
|
|
1194
1278
|
function CardBody({ children, ...rest }) {
|
|
1195
1279
|
const { body: body3 } = useStyles15();
|
|
1196
|
-
return /* @__PURE__ */ (0,
|
|
1280
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: body3, ...rest, children });
|
|
1197
1281
|
}
|
|
1198
1282
|
function CardFooter({ children, ...rest }) {
|
|
1199
1283
|
const { footer: footer2 } = useStyles15();
|
|
1200
|
-
return /* @__PURE__ */ (0,
|
|
1284
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: footer2, ...rest, children });
|
|
1201
1285
|
}
|
|
1202
1286
|
CardRoot.displayName = "Card";
|
|
1203
1287
|
CardHeader.displayName = "Card.Header";
|
|
@@ -1210,12 +1294,12 @@ var Card2 = Object.assign(CardRoot, {
|
|
|
1210
1294
|
});
|
|
1211
1295
|
|
|
1212
1296
|
// src/components/alert/index.tsx
|
|
1213
|
-
var
|
|
1297
|
+
var import_react38 = require("react");
|
|
1214
1298
|
|
|
1215
1299
|
// src/components/icons/circle-check/index.tsx
|
|
1216
|
-
var
|
|
1300
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1217
1301
|
function CircleCheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
1218
|
-
return /* @__PURE__ */ (0,
|
|
1302
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1219
1303
|
"svg",
|
|
1220
1304
|
{
|
|
1221
1305
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1230,17 +1314,17 @@ function CircleCheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
1230
1314
|
"aria-hidden": "true",
|
|
1231
1315
|
...rest,
|
|
1232
1316
|
children: [
|
|
1233
|
-
/* @__PURE__ */ (0,
|
|
1234
|
-
/* @__PURE__ */ (0,
|
|
1317
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
1318
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "m9 12 2 2 4-4" })
|
|
1235
1319
|
]
|
|
1236
1320
|
}
|
|
1237
1321
|
);
|
|
1238
1322
|
}
|
|
1239
1323
|
|
|
1240
1324
|
// src/components/icons/circle-x/index.tsx
|
|
1241
|
-
var
|
|
1325
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1242
1326
|
function CircleXIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
1243
|
-
return /* @__PURE__ */ (0,
|
|
1327
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
1244
1328
|
"svg",
|
|
1245
1329
|
{
|
|
1246
1330
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1255,18 +1339,18 @@ function CircleXIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
1255
1339
|
"aria-hidden": "true",
|
|
1256
1340
|
...rest,
|
|
1257
1341
|
children: [
|
|
1258
|
-
/* @__PURE__ */ (0,
|
|
1259
|
-
/* @__PURE__ */ (0,
|
|
1260
|
-
/* @__PURE__ */ (0,
|
|
1342
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
1343
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "m15 9-6 6" }),
|
|
1344
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "m9 9 6 6" })
|
|
1261
1345
|
]
|
|
1262
1346
|
}
|
|
1263
1347
|
);
|
|
1264
1348
|
}
|
|
1265
1349
|
|
|
1266
1350
|
// src/components/icons/info/index.tsx
|
|
1267
|
-
var
|
|
1351
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1268
1352
|
function InfoIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
1269
|
-
return /* @__PURE__ */ (0,
|
|
1353
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1270
1354
|
"svg",
|
|
1271
1355
|
{
|
|
1272
1356
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1281,18 +1365,18 @@ function InfoIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
1281
1365
|
"aria-hidden": "true",
|
|
1282
1366
|
...rest,
|
|
1283
1367
|
children: [
|
|
1284
|
-
/* @__PURE__ */ (0,
|
|
1285
|
-
/* @__PURE__ */ (0,
|
|
1286
|
-
/* @__PURE__ */ (0,
|
|
1368
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
|
|
1369
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M12 16v-4" }),
|
|
1370
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M12 8h.01" })
|
|
1287
1371
|
]
|
|
1288
1372
|
}
|
|
1289
1373
|
);
|
|
1290
1374
|
}
|
|
1291
1375
|
|
|
1292
1376
|
// src/components/icons/triangle-alert/index.tsx
|
|
1293
|
-
var
|
|
1377
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1294
1378
|
function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
1295
|
-
return /* @__PURE__ */ (0,
|
|
1379
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
1296
1380
|
"svg",
|
|
1297
1381
|
{
|
|
1298
1382
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1307,16 +1391,16 @@ function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
1307
1391
|
"aria-hidden": "true",
|
|
1308
1392
|
...rest,
|
|
1309
1393
|
children: [
|
|
1310
|
-
/* @__PURE__ */ (0,
|
|
1311
|
-
/* @__PURE__ */ (0,
|
|
1312
|
-
/* @__PURE__ */ (0,
|
|
1394
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.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" }),
|
|
1395
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M12 9v4" }),
|
|
1396
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M12 17h.01" })
|
|
1313
1397
|
]
|
|
1314
1398
|
}
|
|
1315
1399
|
);
|
|
1316
1400
|
}
|
|
1317
1401
|
|
|
1318
1402
|
// src/components/alert/use-styles.ts
|
|
1319
|
-
var
|
|
1403
|
+
var import_react37 = require("react");
|
|
1320
1404
|
|
|
1321
1405
|
// src/components/alert/use-styles.css.ts
|
|
1322
1406
|
var content = "use-styles_content__ivsh6u6";
|
|
@@ -1330,7 +1414,7 @@ function useStyles16({
|
|
|
1330
1414
|
className
|
|
1331
1415
|
}) {
|
|
1332
1416
|
const { themeClass } = useTheme();
|
|
1333
|
-
const root24 = (0,
|
|
1417
|
+
const root24 = (0, import_react37.useMemo)(
|
|
1334
1418
|
() => [themeClass, root12, severity[severity2], className].filter(Boolean).join(" "),
|
|
1335
1419
|
[themeClass, severity2, className]
|
|
1336
1420
|
);
|
|
@@ -1342,30 +1426,30 @@ function useStyles16({
|
|
|
1342
1426
|
}
|
|
1343
1427
|
|
|
1344
1428
|
// src/components/alert/index.tsx
|
|
1345
|
-
var
|
|
1429
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1346
1430
|
var defaultIcons = {
|
|
1347
1431
|
info: InfoIcon,
|
|
1348
1432
|
ok: CircleCheckIcon,
|
|
1349
1433
|
warn: TriangleAlertIcon,
|
|
1350
1434
|
danger: CircleXIcon
|
|
1351
1435
|
};
|
|
1352
|
-
var Alert = (0,
|
|
1436
|
+
var Alert = (0, import_react38.forwardRef)(function Alert2({ severity: severity2 = "info", title, icon, className, children, ...rest }, ref) {
|
|
1353
1437
|
const styles = useStyles16({ severity: severity2, className });
|
|
1354
1438
|
const IconComponent = icon ?? defaultIcons[severity2];
|
|
1355
|
-
return /* @__PURE__ */ (0,
|
|
1356
|
-
/* @__PURE__ */ (0,
|
|
1357
|
-
/* @__PURE__ */ (0,
|
|
1358
|
-
title != null && /* @__PURE__ */ (0,
|
|
1359
|
-
children != null && /* @__PURE__ */ (0,
|
|
1439
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref, role: "alert", className: styles.root, ...rest, children: [
|
|
1440
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: styles.iconSlot, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconComponent, {}) }),
|
|
1441
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: styles.content, children: [
|
|
1442
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Typography, { variant: "h4", children: title }),
|
|
1443
|
+
children != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Typography, { variant: "body", color: "fg2", children })
|
|
1360
1444
|
] })
|
|
1361
1445
|
] });
|
|
1362
1446
|
});
|
|
1363
1447
|
|
|
1364
1448
|
// src/components/tooltip/index.tsx
|
|
1365
|
-
var
|
|
1449
|
+
var import_react40 = require("react");
|
|
1366
1450
|
|
|
1367
1451
|
// src/components/tooltip/use-styles.ts
|
|
1368
|
-
var
|
|
1452
|
+
var import_react39 = require("react");
|
|
1369
1453
|
|
|
1370
1454
|
// src/components/tooltip/use-styles.css.ts
|
|
1371
1455
|
var bubble = "use-styles_bubble__h9kvh1 surfaces_inkySurface__1qa7atn2";
|
|
@@ -1377,11 +1461,11 @@ function useStyles17({
|
|
|
1377
1461
|
placement: placement2 = "top"
|
|
1378
1462
|
}) {
|
|
1379
1463
|
const { themeClass } = useTheme();
|
|
1380
|
-
const wrapper4 = (0,
|
|
1464
|
+
const wrapper4 = (0, import_react39.useMemo)(
|
|
1381
1465
|
() => [themeClass, wrapper].filter(Boolean).join(" "),
|
|
1382
1466
|
[themeClass]
|
|
1383
1467
|
);
|
|
1384
|
-
const bubble2 = (0,
|
|
1468
|
+
const bubble2 = (0, import_react39.useMemo)(
|
|
1385
1469
|
() => [bubble, placement[placement2]].filter(Boolean).join(" "),
|
|
1386
1470
|
[placement2]
|
|
1387
1471
|
);
|
|
@@ -1389,13 +1473,13 @@ function useStyles17({
|
|
|
1389
1473
|
}
|
|
1390
1474
|
|
|
1391
1475
|
// src/components/tooltip/index.tsx
|
|
1392
|
-
var
|
|
1476
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1393
1477
|
var HIDE_DELAY = 120;
|
|
1394
|
-
var Tooltip = (0,
|
|
1395
|
-
const [open, setOpen] = (0,
|
|
1396
|
-
const tooltipId = (0,
|
|
1478
|
+
var Tooltip = (0, import_react40.forwardRef)(function Tooltip2({ label: label7, children, placement: placement2 }, ref) {
|
|
1479
|
+
const [open, setOpen] = (0, import_react40.useState)(false);
|
|
1480
|
+
const tooltipId = (0, import_react40.useId)();
|
|
1397
1481
|
const { wrapper: wrapper4, bubble: bubble2 } = useStyles17({ placement: placement2 });
|
|
1398
|
-
const hideTimer = (0,
|
|
1482
|
+
const hideTimer = (0, import_react40.useRef)(null);
|
|
1399
1483
|
const clearHide = () => {
|
|
1400
1484
|
if (hideTimer.current) {
|
|
1401
1485
|
clearTimeout(hideTimer.current);
|
|
@@ -1414,7 +1498,7 @@ var Tooltip = (0, import_react38.forwardRef)(function Tooltip2({ label: label7,
|
|
|
1414
1498
|
clearHide();
|
|
1415
1499
|
setOpen(false);
|
|
1416
1500
|
};
|
|
1417
|
-
(0,
|
|
1501
|
+
(0, import_react40.useEffect)(() => {
|
|
1418
1502
|
return () => {
|
|
1419
1503
|
if (hideTimer.current) clearTimeout(hideTimer.current);
|
|
1420
1504
|
};
|
|
@@ -1427,8 +1511,8 @@ var Tooltip = (0, import_react38.forwardRef)(function Tooltip2({ label: label7,
|
|
|
1427
1511
|
};
|
|
1428
1512
|
const previousDescribedBy = children.props["aria-describedby"];
|
|
1429
1513
|
const describedBy = open ? [previousDescribedBy, tooltipId].filter(Boolean).join(" ") : previousDescribedBy;
|
|
1430
|
-
const trigger2 = (0,
|
|
1431
|
-
return /* @__PURE__ */ (0,
|
|
1514
|
+
const trigger2 = (0, import_react40.cloneElement)(children, { "aria-describedby": describedBy });
|
|
1515
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
1432
1516
|
"span",
|
|
1433
1517
|
{
|
|
1434
1518
|
ref,
|
|
@@ -1440,7 +1524,7 @@ var Tooltip = (0, import_react38.forwardRef)(function Tooltip2({ label: label7,
|
|
|
1440
1524
|
onKeyDown: handleKeyDown,
|
|
1441
1525
|
children: [
|
|
1442
1526
|
trigger2,
|
|
1443
|
-
open && /* @__PURE__ */ (0,
|
|
1527
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1444
1528
|
"span",
|
|
1445
1529
|
{
|
|
1446
1530
|
id: tooltipId,
|
|
@@ -1457,12 +1541,12 @@ var Tooltip = (0, import_react38.forwardRef)(function Tooltip2({ label: label7,
|
|
|
1457
1541
|
});
|
|
1458
1542
|
|
|
1459
1543
|
// src/components/select/index.tsx
|
|
1460
|
-
var
|
|
1544
|
+
var import_react42 = require("react");
|
|
1461
1545
|
|
|
1462
1546
|
// src/components/icons/chevron-down/index.tsx
|
|
1463
|
-
var
|
|
1547
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1464
1548
|
function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
1465
|
-
return /* @__PURE__ */ (0,
|
|
1549
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1466
1550
|
"svg",
|
|
1467
1551
|
{
|
|
1468
1552
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1476,13 +1560,13 @@ function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
1476
1560
|
strokeLinejoin: "round",
|
|
1477
1561
|
"aria-hidden": "true",
|
|
1478
1562
|
...rest,
|
|
1479
|
-
children: /* @__PURE__ */ (0,
|
|
1563
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "m6 9 6 6 6-6" })
|
|
1480
1564
|
}
|
|
1481
1565
|
);
|
|
1482
1566
|
}
|
|
1483
1567
|
|
|
1484
1568
|
// src/components/select/use-styles.ts
|
|
1485
|
-
var
|
|
1569
|
+
var import_react41 = require("react");
|
|
1486
1570
|
|
|
1487
1571
|
// src/components/select/use-styles.css.ts
|
|
1488
1572
|
var chevron = "use-styles_chevron__1w1czpb4";
|
|
@@ -1501,7 +1585,7 @@ function useStyles18({
|
|
|
1501
1585
|
open = false
|
|
1502
1586
|
}) {
|
|
1503
1587
|
const { themeClass } = useTheme();
|
|
1504
|
-
return (0,
|
|
1588
|
+
return (0, import_react41.useMemo)(() => {
|
|
1505
1589
|
const chevron3 = [chevron, open && chevronOpen].filter(Boolean).join(" ");
|
|
1506
1590
|
return {
|
|
1507
1591
|
root: [themeClass, root13].filter(Boolean).join(" "),
|
|
@@ -1516,17 +1600,17 @@ function useStyles18({
|
|
|
1516
1600
|
}
|
|
1517
1601
|
|
|
1518
1602
|
// src/components/select/index.tsx
|
|
1519
|
-
var
|
|
1520
|
-
var Select = (0,
|
|
1521
|
-
const [open, setOpen] = (0,
|
|
1522
|
-
const [activeIndex, setActiveIndex] = (0,
|
|
1523
|
-
const rootRef = (0,
|
|
1603
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1604
|
+
var Select = (0, import_react42.forwardRef)(function Select2({ options, value, onChange, placeholder: placeholder2, label: label7, disabled: disabled3, ...rest }, ref) {
|
|
1605
|
+
const [open, setOpen] = (0, import_react42.useState)(false);
|
|
1606
|
+
const [activeIndex, setActiveIndex] = (0, import_react42.useState)(0);
|
|
1607
|
+
const rootRef = (0, import_react42.useRef)(null);
|
|
1524
1608
|
const setRootRef = (node) => {
|
|
1525
1609
|
rootRef.current = node;
|
|
1526
1610
|
if (typeof ref === "function") ref(node);
|
|
1527
1611
|
else if (ref) ref.current = node;
|
|
1528
1612
|
};
|
|
1529
|
-
const baseId = (0,
|
|
1613
|
+
const baseId = (0, import_react42.useId)();
|
|
1530
1614
|
const labelId = `${baseId}-label`;
|
|
1531
1615
|
const optionId = (index) => `${baseId}-option-${index}`;
|
|
1532
1616
|
const {
|
|
@@ -1538,7 +1622,7 @@ var Select = (0, import_react40.forwardRef)(function Select2({ options, value, o
|
|
|
1538
1622
|
menu: menu2,
|
|
1539
1623
|
optionClass
|
|
1540
1624
|
} = useStyles18({ open });
|
|
1541
|
-
(0,
|
|
1625
|
+
(0, import_react42.useEffect)(() => {
|
|
1542
1626
|
if (!open) return;
|
|
1543
1627
|
const onPointerDown = (event) => {
|
|
1544
1628
|
if (rootRef.current && !rootRef.current.contains(event.target)) {
|
|
@@ -1598,9 +1682,9 @@ var Select = (0, import_react40.forwardRef)(function Select2({ options, value, o
|
|
|
1598
1682
|
break;
|
|
1599
1683
|
}
|
|
1600
1684
|
};
|
|
1601
|
-
return /* @__PURE__ */ (0,
|
|
1602
|
-
label7 && /* @__PURE__ */ (0,
|
|
1603
|
-
/* @__PURE__ */ (0,
|
|
1685
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ref: setRootRef, className: root24, ...rest, children: [
|
|
1686
|
+
label7 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { id: labelId, className: labelClass, children: label7 }),
|
|
1687
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
1604
1688
|
"button",
|
|
1605
1689
|
{
|
|
1606
1690
|
type: "button",
|
|
@@ -1620,17 +1704,17 @@ var Select = (0, import_react40.forwardRef)(function Select2({ options, value, o
|
|
|
1620
1704
|
},
|
|
1621
1705
|
onKeyDown: handleKeyDown,
|
|
1622
1706
|
children: [
|
|
1623
|
-
selected3 ? selected3.label : /* @__PURE__ */ (0,
|
|
1624
|
-
/* @__PURE__ */ (0,
|
|
1707
|
+
selected3 ? selected3.label : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: placeholderClass, children: placeholder2 }),
|
|
1708
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: chevron3, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChevronDownIcon, { size: 18 }) })
|
|
1625
1709
|
]
|
|
1626
1710
|
}
|
|
1627
1711
|
),
|
|
1628
|
-
open && /* @__PURE__ */ (0,
|
|
1712
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: menu2, role: "listbox", children: options.map((option2, index) => {
|
|
1629
1713
|
const isSelected = option2.value === value;
|
|
1630
1714
|
const isActive = index === activeIndex;
|
|
1631
1715
|
return (
|
|
1632
1716
|
// biome-ignore lint/a11y/useKeyWithClickEvents: keyboard nav lives on the trigger via aria-activedescendant; options are not focusable.
|
|
1633
|
-
/* @__PURE__ */ (0,
|
|
1717
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
1634
1718
|
"div",
|
|
1635
1719
|
{
|
|
1636
1720
|
id: optionId(index),
|
|
@@ -1649,10 +1733,10 @@ var Select = (0, import_react40.forwardRef)(function Select2({ options, value, o
|
|
|
1649
1733
|
});
|
|
1650
1734
|
|
|
1651
1735
|
// src/components/slider/index.tsx
|
|
1652
|
-
var
|
|
1736
|
+
var import_react44 = require("react");
|
|
1653
1737
|
|
|
1654
1738
|
// src/components/slider/use-styles.ts
|
|
1655
|
-
var
|
|
1739
|
+
var import_react43 = require("react");
|
|
1656
1740
|
|
|
1657
1741
|
// src/components/slider/use-styles.css.ts
|
|
1658
1742
|
var input5 = "use-styles_input__okw59n3";
|
|
@@ -1666,7 +1750,7 @@ var wrapper2 = "use-styles_wrapper__okw59n6";
|
|
|
1666
1750
|
// src/components/slider/use-styles.ts
|
|
1667
1751
|
function useStyles19() {
|
|
1668
1752
|
const { themeClass } = useTheme();
|
|
1669
|
-
return (0,
|
|
1753
|
+
return (0, import_react43.useMemo)(() => {
|
|
1670
1754
|
const root24 = [themeClass, root14].filter(Boolean).join(" ");
|
|
1671
1755
|
return {
|
|
1672
1756
|
wrapper: wrapper2,
|
|
@@ -1681,8 +1765,8 @@ function useStyles19() {
|
|
|
1681
1765
|
}
|
|
1682
1766
|
|
|
1683
1767
|
// src/components/slider/index.tsx
|
|
1684
|
-
var
|
|
1685
|
-
var Slider = (0,
|
|
1768
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1769
|
+
var Slider = (0, import_react44.forwardRef)(function Slider2({ value = 0, onChange, min = 0, max = 100, step: step2 = 1, disabled: disabled3, label: label7, ...rest }, ref) {
|
|
1686
1770
|
const { wrapper: wrapper4, label: labelClass, root: root24, track: track4, range: range2, thumb: thumb2, input: input6 } = useStyles19();
|
|
1687
1771
|
const span = max - min;
|
|
1688
1772
|
const percent = span > 0 ? (value - min) / span * 100 : 0;
|
|
@@ -1690,12 +1774,12 @@ var Slider = (0, import_react42.forwardRef)(function Slider2({ value = 0, onChan
|
|
|
1690
1774
|
const handleChange = (e) => {
|
|
1691
1775
|
onChange?.(Number(e.target.value));
|
|
1692
1776
|
};
|
|
1693
|
-
return /* @__PURE__ */ (0,
|
|
1694
|
-
label7 ? /* @__PURE__ */ (0,
|
|
1695
|
-
/* @__PURE__ */ (0,
|
|
1696
|
-
/* @__PURE__ */ (0,
|
|
1697
|
-
/* @__PURE__ */ (0,
|
|
1698
|
-
/* @__PURE__ */ (0,
|
|
1777
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: wrapper4, children: [
|
|
1778
|
+
label7 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: labelClass, children: label7 }) : null,
|
|
1779
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: root24, children: [
|
|
1780
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: track4 }),
|
|
1781
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: range2, style: { width: `${clamped}%` } }),
|
|
1782
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
1699
1783
|
"input",
|
|
1700
1784
|
{
|
|
1701
1785
|
ref,
|
|
@@ -1710,16 +1794,16 @@ var Slider = (0, import_react42.forwardRef)(function Slider2({ value = 0, onChan
|
|
|
1710
1794
|
...rest
|
|
1711
1795
|
}
|
|
1712
1796
|
),
|
|
1713
|
-
/* @__PURE__ */ (0,
|
|
1797
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: thumb2, style: { left: `${clamped}%` } })
|
|
1714
1798
|
] })
|
|
1715
1799
|
] });
|
|
1716
1800
|
});
|
|
1717
1801
|
|
|
1718
1802
|
// src/components/accordion/index.tsx
|
|
1719
|
-
var
|
|
1803
|
+
var import_react46 = require("react");
|
|
1720
1804
|
|
|
1721
1805
|
// src/components/accordion/use-styles.ts
|
|
1722
|
-
var
|
|
1806
|
+
var import_react45 = require("react");
|
|
1723
1807
|
|
|
1724
1808
|
// src/components/accordion/use-styles.css.ts
|
|
1725
1809
|
var chevron2 = "use-styles_chevron__1cjrdh93";
|
|
@@ -1732,7 +1816,7 @@ var root15 = "use-styles_root__1cjrdh90";
|
|
|
1732
1816
|
// src/components/accordion/use-styles.ts
|
|
1733
1817
|
function useStyles20({ className }) {
|
|
1734
1818
|
const { themeClass } = useTheme();
|
|
1735
|
-
return (0,
|
|
1819
|
+
return (0, import_react45.useMemo)(
|
|
1736
1820
|
() => ({
|
|
1737
1821
|
root: [themeClass, root15, className].filter(Boolean).join(" "),
|
|
1738
1822
|
item,
|
|
@@ -1745,9 +1829,9 @@ function useStyles20({ className }) {
|
|
|
1745
1829
|
}
|
|
1746
1830
|
|
|
1747
1831
|
// src/components/accordion/index.tsx
|
|
1748
|
-
var
|
|
1749
|
-
var Accordion = (0,
|
|
1750
|
-
const [open, setOpen] = (0,
|
|
1832
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1833
|
+
var Accordion = (0, import_react46.forwardRef)(function Accordion2({ items, multiple = false, defaultOpen = [], className }, ref) {
|
|
1834
|
+
const [open, setOpen] = (0, import_react46.useState)(defaultOpen);
|
|
1751
1835
|
const { root: root24, item: item3, header: header3, chevronFor, panel: panel3 } = useStyles20({ className });
|
|
1752
1836
|
const toggle = (id) => {
|
|
1753
1837
|
setOpen((current2) => {
|
|
@@ -1756,12 +1840,12 @@ var Accordion = (0, import_react44.forwardRef)(function Accordion2({ items, mult
|
|
|
1756
1840
|
return multiple ? [...current2, id] : [id];
|
|
1757
1841
|
});
|
|
1758
1842
|
};
|
|
1759
|
-
return /* @__PURE__ */ (0,
|
|
1843
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref, className: root24, children: items.map((it) => {
|
|
1760
1844
|
const isOpen = open.includes(it.id);
|
|
1761
1845
|
const panelId = `accordion-panel-${it.id}`;
|
|
1762
1846
|
const headerId = `accordion-header-${it.id}`;
|
|
1763
|
-
return /* @__PURE__ */ (0,
|
|
1764
|
-
/* @__PURE__ */ (0,
|
|
1847
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: item3, children: [
|
|
1848
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
1765
1849
|
"button",
|
|
1766
1850
|
{
|
|
1767
1851
|
type: "button",
|
|
@@ -1772,22 +1856,22 @@ var Accordion = (0, import_react44.forwardRef)(function Accordion2({ items, mult
|
|
|
1772
1856
|
onClick: () => toggle(it.id),
|
|
1773
1857
|
children: [
|
|
1774
1858
|
it.title,
|
|
1775
|
-
/* @__PURE__ */ (0,
|
|
1859
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChevronDownIcon, { className: chevronFor(isOpen) })
|
|
1776
1860
|
]
|
|
1777
1861
|
}
|
|
1778
1862
|
),
|
|
1779
|
-
isOpen && /* @__PURE__ */ (0,
|
|
1863
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { id: panelId, className: panel3, role: "region", "aria-labelledby": headerId, children: it.content })
|
|
1780
1864
|
] }, it.id);
|
|
1781
1865
|
}) });
|
|
1782
1866
|
});
|
|
1783
1867
|
|
|
1784
1868
|
// src/components/breadcrumbs/index.tsx
|
|
1785
|
-
var
|
|
1869
|
+
var import_react48 = require("react");
|
|
1786
1870
|
|
|
1787
1871
|
// src/components/icons/chevron-right/index.tsx
|
|
1788
|
-
var
|
|
1872
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1789
1873
|
function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
1790
|
-
return /* @__PURE__ */ (0,
|
|
1874
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
1791
1875
|
"svg",
|
|
1792
1876
|
{
|
|
1793
1877
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1801,13 +1885,13 @@ function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
1801
1885
|
strokeLinejoin: "round",
|
|
1802
1886
|
"aria-hidden": "true",
|
|
1803
1887
|
...rest,
|
|
1804
|
-
children: /* @__PURE__ */ (0,
|
|
1888
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "m9 18 6-6-6-6" })
|
|
1805
1889
|
}
|
|
1806
1890
|
);
|
|
1807
1891
|
}
|
|
1808
1892
|
|
|
1809
1893
|
// src/components/breadcrumbs/use-styles.ts
|
|
1810
|
-
var
|
|
1894
|
+
var import_react47 = require("react");
|
|
1811
1895
|
|
|
1812
1896
|
// src/components/breadcrumbs/use-styles.css.ts
|
|
1813
1897
|
var crumb = "use-styles_crumb__7u0du61";
|
|
@@ -1818,7 +1902,7 @@ var separator = "use-styles_separator__7u0du63";
|
|
|
1818
1902
|
// src/components/breadcrumbs/use-styles.ts
|
|
1819
1903
|
function useStyles21({ className }) {
|
|
1820
1904
|
const { themeClass } = useTheme();
|
|
1821
|
-
const root24 = (0,
|
|
1905
|
+
const root24 = (0, import_react47.useMemo)(
|
|
1822
1906
|
() => [themeClass, root16, className].filter(Boolean).join(" "),
|
|
1823
1907
|
[themeClass, className]
|
|
1824
1908
|
);
|
|
@@ -1826,26 +1910,26 @@ function useStyles21({ className }) {
|
|
|
1826
1910
|
}
|
|
1827
1911
|
|
|
1828
1912
|
// src/components/breadcrumbs/index.tsx
|
|
1829
|
-
var
|
|
1830
|
-
var Breadcrumbs = (0,
|
|
1913
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1914
|
+
var Breadcrumbs = (0, import_react48.forwardRef)(function Breadcrumbs2({ items, className, ...rest }, ref) {
|
|
1831
1915
|
const { root: root24, crumb: crumb2, current: current2, separator: separator2 } = useStyles21({ className });
|
|
1832
|
-
return /* @__PURE__ */ (0,
|
|
1916
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("nav", { ref, "aria-label": "Breadcrumb", className: root24, ...rest, children: items.map((item3, index) => {
|
|
1833
1917
|
const isLast = index === items.length - 1;
|
|
1834
1918
|
const key = index;
|
|
1835
|
-
return /* @__PURE__ */ (0,
|
|
1836
|
-
isLast ? /* @__PURE__ */ (0,
|
|
1837
|
-
!isLast && /* @__PURE__ */ (0,
|
|
1919
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react48.Fragment, { children: [
|
|
1920
|
+
isLast ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: current2, "aria-current": "page", children: item3.label }) : item3.href ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("a", { className: crumb2, href: item3.href, children: item3.label }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: crumb2, children: item3.label }),
|
|
1921
|
+
!isLast && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: separator2, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronRightIcon, { size: 14 }) })
|
|
1838
1922
|
] }, key);
|
|
1839
1923
|
}) });
|
|
1840
1924
|
});
|
|
1841
1925
|
|
|
1842
1926
|
// src/components/pagination/index.tsx
|
|
1843
|
-
var
|
|
1927
|
+
var import_react50 = require("react");
|
|
1844
1928
|
|
|
1845
1929
|
// src/components/icons/chevron-left/index.tsx
|
|
1846
|
-
var
|
|
1930
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
1847
1931
|
function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
1848
|
-
return /* @__PURE__ */ (0,
|
|
1932
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
1849
1933
|
"svg",
|
|
1850
1934
|
{
|
|
1851
1935
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1859,13 +1943,13 @@ function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
1859
1943
|
strokeLinejoin: "round",
|
|
1860
1944
|
"aria-hidden": "true",
|
|
1861
1945
|
...rest,
|
|
1862
|
-
children: /* @__PURE__ */ (0,
|
|
1946
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "m15 18-6-6 6-6" })
|
|
1863
1947
|
}
|
|
1864
1948
|
);
|
|
1865
1949
|
}
|
|
1866
1950
|
|
|
1867
1951
|
// src/components/pagination/use-styles.ts
|
|
1868
|
-
var
|
|
1952
|
+
var import_react49 = require("react");
|
|
1869
1953
|
|
|
1870
1954
|
// src/components/pagination/use-styles.css.ts
|
|
1871
1955
|
var ellipsis = "use-styles_ellipsis__1azgzoh3";
|
|
@@ -1877,7 +1961,7 @@ var root17 = "use-styles_root__1azgzoh0";
|
|
|
1877
1961
|
// src/components/pagination/use-styles.ts
|
|
1878
1962
|
function useStyles22() {
|
|
1879
1963
|
const { themeClass } = useTheme();
|
|
1880
|
-
return (0,
|
|
1964
|
+
return (0, import_react49.useMemo)(
|
|
1881
1965
|
() => ({
|
|
1882
1966
|
root: [themeClass, root17].filter(Boolean).join(" "),
|
|
1883
1967
|
pageBtnFor: (active2) => [pageBtn, active2 && pageActive].filter(Boolean).join(" "),
|
|
@@ -1889,7 +1973,7 @@ function useStyles22() {
|
|
|
1889
1973
|
}
|
|
1890
1974
|
|
|
1891
1975
|
// src/components/pagination/index.tsx
|
|
1892
|
-
var
|
|
1976
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
1893
1977
|
function buildItems(count, page, siblingCount) {
|
|
1894
1978
|
const total = Math.max(1, count);
|
|
1895
1979
|
const first = 1;
|
|
@@ -1903,14 +1987,14 @@ function buildItems(count, page, siblingCount) {
|
|
|
1903
1987
|
if (last > first) items.push(last);
|
|
1904
1988
|
return items;
|
|
1905
1989
|
}
|
|
1906
|
-
var Pagination = (0,
|
|
1990
|
+
var Pagination = (0, import_react50.forwardRef)(function Pagination2({ count, page = 1, onChange, siblingCount = 1, ...rest }, ref) {
|
|
1907
1991
|
const { root: root24, pageBtnFor, ellipsis: ellipsis2, nav: nav2 } = useStyles22();
|
|
1908
1992
|
const total = Math.max(1, count);
|
|
1909
1993
|
const current2 = Math.min(Math.max(1, page), total);
|
|
1910
1994
|
const items = buildItems(total, current2, siblingCount);
|
|
1911
1995
|
const go = (n) => onChange?.(Math.min(Math.max(1, n), total));
|
|
1912
|
-
return /* @__PURE__ */ (0,
|
|
1913
|
-
/* @__PURE__ */ (0,
|
|
1996
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("nav", { ref, className: root24, "aria-label": "Pagination", ...rest, children: [
|
|
1997
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
1914
1998
|
"button",
|
|
1915
1999
|
{
|
|
1916
2000
|
type: "button",
|
|
@@ -1918,14 +2002,14 @@ var Pagination = (0, import_react48.forwardRef)(function Pagination2({ count, pa
|
|
|
1918
2002
|
"aria-label": "Previous page",
|
|
1919
2003
|
disabled: current2 <= 1,
|
|
1920
2004
|
onClick: () => go(current2 - 1),
|
|
1921
|
-
children: /* @__PURE__ */ (0,
|
|
2005
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChevronLeftIcon, { size: 18 })
|
|
1922
2006
|
}
|
|
1923
2007
|
),
|
|
1924
2008
|
items.map(
|
|
1925
2009
|
(item3, index) => item3 === "ellipsis" ? (
|
|
1926
2010
|
// biome-ignore lint/suspicious/noArrayIndexKey: ellipsis position is stable per render
|
|
1927
|
-
/* @__PURE__ */ (0,
|
|
1928
|
-
) : /* @__PURE__ */ (0,
|
|
2011
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: ellipsis2, children: "\u2026" }, `ellipsis-${index}`)
|
|
2012
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
1929
2013
|
"button",
|
|
1930
2014
|
{
|
|
1931
2015
|
type: "button",
|
|
@@ -1937,7 +2021,7 @@ var Pagination = (0, import_react48.forwardRef)(function Pagination2({ count, pa
|
|
|
1937
2021
|
item3
|
|
1938
2022
|
)
|
|
1939
2023
|
),
|
|
1940
|
-
/* @__PURE__ */ (0,
|
|
2024
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
1941
2025
|
"button",
|
|
1942
2026
|
{
|
|
1943
2027
|
type: "button",
|
|
@@ -1945,17 +2029,17 @@ var Pagination = (0, import_react48.forwardRef)(function Pagination2({ count, pa
|
|
|
1945
2029
|
"aria-label": "Next page",
|
|
1946
2030
|
disabled: current2 >= total,
|
|
1947
2031
|
onClick: () => go(current2 + 1),
|
|
1948
|
-
children: /* @__PURE__ */ (0,
|
|
2032
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChevronRightIcon, { size: 18 })
|
|
1949
2033
|
}
|
|
1950
2034
|
)
|
|
1951
2035
|
] });
|
|
1952
2036
|
});
|
|
1953
2037
|
|
|
1954
2038
|
// src/components/stepper/index.tsx
|
|
1955
|
-
var
|
|
2039
|
+
var import_react52 = require("react");
|
|
1956
2040
|
|
|
1957
2041
|
// src/components/stepper/use-styles.ts
|
|
1958
|
-
var
|
|
2042
|
+
var import_react51 = require("react");
|
|
1959
2043
|
|
|
1960
2044
|
// src/components/stepper/use-styles.css.ts
|
|
1961
2045
|
var connector = "use-styles_connector__79pt4e7";
|
|
@@ -1970,7 +2054,7 @@ var step = "use-styles_step__79pt4e1";
|
|
|
1970
2054
|
// src/components/stepper/use-styles.ts
|
|
1971
2055
|
function useStyles23({ className }) {
|
|
1972
2056
|
const { themeClass } = useTheme();
|
|
1973
|
-
return (0,
|
|
2057
|
+
return (0, import_react51.useMemo)(() => {
|
|
1974
2058
|
const root24 = [themeClass, root18, className].filter(Boolean).join(" ");
|
|
1975
2059
|
const markerFor = (state) => [
|
|
1976
2060
|
marker,
|
|
@@ -1983,30 +2067,30 @@ function useStyles23({ className }) {
|
|
|
1983
2067
|
}
|
|
1984
2068
|
|
|
1985
2069
|
// src/components/stepper/index.tsx
|
|
1986
|
-
var
|
|
1987
|
-
var Stepper = (0,
|
|
2070
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
2071
|
+
var Stepper = (0, import_react52.forwardRef)(function Stepper2({ steps, active: active2 = 0, className, ...rest }, ref) {
|
|
1988
2072
|
const { root: root24, step: step2, connector: connector2, markerFor, labelFor } = useStyles23({ className });
|
|
1989
|
-
return /* @__PURE__ */ (0,
|
|
2073
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { ref, className: root24, ...rest, children: steps.map((s, index) => {
|
|
1990
2074
|
const state = index < active2 ? "done" : index === active2 ? "active" : "upcoming";
|
|
1991
2075
|
const isActive = state === "active";
|
|
1992
2076
|
return (
|
|
1993
2077
|
// biome-ignore lint/suspicious/noArrayIndexKey: steps are a static, ordered list with no stable id.
|
|
1994
|
-
/* @__PURE__ */ (0,
|
|
1995
|
-
/* @__PURE__ */ (0,
|
|
1996
|
-
/* @__PURE__ */ (0,
|
|
1997
|
-
/* @__PURE__ */ (0,
|
|
2078
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react52.Fragment, { children: [
|
|
2079
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: step2, "aria-current": isActive ? "step" : void 0, children: [
|
|
2080
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: markerFor(state), children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckIcon, { size: 14 }) : index + 1 }),
|
|
2081
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: labelFor(isActive), children: s.label })
|
|
1998
2082
|
] }),
|
|
1999
|
-
index < steps.length - 1 && /* @__PURE__ */ (0,
|
|
2083
|
+
index < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "data-part": "connector", className: connector2 })
|
|
2000
2084
|
] }, index)
|
|
2001
2085
|
);
|
|
2002
2086
|
}) });
|
|
2003
2087
|
});
|
|
2004
2088
|
|
|
2005
2089
|
// src/components/tabs/index.tsx
|
|
2006
|
-
var
|
|
2090
|
+
var import_react54 = require("react");
|
|
2007
2091
|
|
|
2008
2092
|
// src/components/tabs/use-styles.ts
|
|
2009
|
-
var
|
|
2093
|
+
var import_react53 = require("react");
|
|
2010
2094
|
|
|
2011
2095
|
// src/components/tabs/use-styles.css.ts
|
|
2012
2096
|
var panel2 = "use-styles_panel__1l4m7t43";
|
|
@@ -2017,7 +2101,7 @@ var tabActive = "use-styles_tabActive__1l4m7t42";
|
|
|
2017
2101
|
// src/components/tabs/use-styles.ts
|
|
2018
2102
|
function useStyles24() {
|
|
2019
2103
|
const { themeClass } = useTheme();
|
|
2020
|
-
return (0,
|
|
2104
|
+
return (0, import_react53.useMemo)(() => {
|
|
2021
2105
|
const root24 = [themeClass, root19].filter(Boolean).join(" ");
|
|
2022
2106
|
const tabClass = (active2) => [tab, active2 && tabActive].filter(Boolean).join(" ");
|
|
2023
2107
|
return { root: root24, tab, tabClass, panel: panel2 };
|
|
@@ -2025,11 +2109,11 @@ function useStyles24() {
|
|
|
2025
2109
|
}
|
|
2026
2110
|
|
|
2027
2111
|
// src/components/tabs/index.tsx
|
|
2028
|
-
var
|
|
2029
|
-
var Tabs = (0,
|
|
2112
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
2113
|
+
var Tabs = (0, import_react54.forwardRef)(function Tabs2({ items, value, onChange, ...rest }, ref) {
|
|
2030
2114
|
const { root: root24, tabClass, panel: panel3 } = useStyles24();
|
|
2031
|
-
const baseId = (0,
|
|
2032
|
-
const tabRefs = (0,
|
|
2115
|
+
const baseId = (0, import_react54.useId)();
|
|
2116
|
+
const tabRefs = (0, import_react54.useRef)([]);
|
|
2033
2117
|
const hasPanels = items.some((item3) => item3.content !== void 0);
|
|
2034
2118
|
const activeIndex = items.findIndex((item3) => item3.value === value);
|
|
2035
2119
|
const tabId = (v) => `${baseId}-tab-${v}`;
|
|
@@ -2061,11 +2145,11 @@ var Tabs = (0, import_react52.forwardRef)(function Tabs2({ items, value, onChang
|
|
|
2061
2145
|
break;
|
|
2062
2146
|
}
|
|
2063
2147
|
};
|
|
2064
|
-
return /* @__PURE__ */ (0,
|
|
2065
|
-
/* @__PURE__ */ (0,
|
|
2148
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
|
|
2149
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ref, role: "tablist", className: root24, ...rest, children: items.map((item3, index) => {
|
|
2066
2150
|
const active2 = item3.value === value;
|
|
2067
2151
|
const tabbable = active2 || activeIndex === -1 && index === 0;
|
|
2068
|
-
return /* @__PURE__ */ (0,
|
|
2152
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2069
2153
|
"button",
|
|
2070
2154
|
{
|
|
2071
2155
|
ref: (el) => {
|
|
@@ -2085,7 +2169,7 @@ var Tabs = (0, import_react52.forwardRef)(function Tabs2({ items, value, onChang
|
|
|
2085
2169
|
item3.value
|
|
2086
2170
|
);
|
|
2087
2171
|
}) }),
|
|
2088
|
-
hasPanels && items.map((item3) => /* @__PURE__ */ (0,
|
|
2172
|
+
hasPanels && items.map((item3) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2089
2173
|
"div",
|
|
2090
2174
|
{
|
|
2091
2175
|
role: "tabpanel",
|
|
@@ -2102,10 +2186,10 @@ var Tabs = (0, import_react52.forwardRef)(function Tabs2({ items, value, onChang
|
|
|
2102
2186
|
});
|
|
2103
2187
|
|
|
2104
2188
|
// src/components/menu/index.tsx
|
|
2105
|
-
var
|
|
2189
|
+
var import_react56 = require("react");
|
|
2106
2190
|
|
|
2107
2191
|
// src/components/menu/use-styles.ts
|
|
2108
|
-
var
|
|
2192
|
+
var import_react55 = require("react");
|
|
2109
2193
|
|
|
2110
2194
|
// src/components/menu/use-styles.css.ts
|
|
2111
2195
|
var danger = "use-styles_danger__1uyxaj3";
|
|
@@ -2116,7 +2200,7 @@ var wrapper3 = "use-styles_wrapper__1uyxaj0";
|
|
|
2116
2200
|
// src/components/menu/use-styles.ts
|
|
2117
2201
|
function useStyles25() {
|
|
2118
2202
|
const { themeClass } = useTheme();
|
|
2119
|
-
return (0,
|
|
2203
|
+
return (0, import_react55.useMemo)(
|
|
2120
2204
|
() => ({
|
|
2121
2205
|
wrapper: [themeClass, wrapper3].filter(Boolean).join(" "),
|
|
2122
2206
|
list,
|
|
@@ -2128,22 +2212,23 @@ function useStyles25() {
|
|
|
2128
2212
|
}
|
|
2129
2213
|
|
|
2130
2214
|
// src/components/menu/index.tsx
|
|
2131
|
-
var
|
|
2215
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2132
2216
|
function assignRef(ref, value) {
|
|
2133
2217
|
if (typeof ref === "function") ref(value);
|
|
2134
2218
|
else if (ref) ref.current = value;
|
|
2135
2219
|
}
|
|
2136
|
-
var Menu = (0,
|
|
2220
|
+
var Menu = (0, import_react56.forwardRef)(function Menu2({ trigger: trigger2, items, testId }, ref) {
|
|
2137
2221
|
const { wrapper: wrapper4, list: list2, item: item3, dangerItem } = useStyles25();
|
|
2138
|
-
const
|
|
2139
|
-
const [
|
|
2140
|
-
const
|
|
2222
|
+
const { testId: rootTestId, slot } = useTestId("menu", testId);
|
|
2223
|
+
const [open, setOpen] = (0, import_react56.useState)(false);
|
|
2224
|
+
const [alignEnd, setAlignEnd] = (0, import_react56.useState)(false);
|
|
2225
|
+
const rootRef = (0, import_react56.useRef)(null);
|
|
2141
2226
|
const setRootRef = (node) => {
|
|
2142
2227
|
rootRef.current = node;
|
|
2143
2228
|
assignRef(ref, node);
|
|
2144
2229
|
};
|
|
2145
|
-
const listRef = (0,
|
|
2146
|
-
const triggerRef = (0,
|
|
2230
|
+
const listRef = (0, import_react56.useRef)(null);
|
|
2231
|
+
const triggerRef = (0, import_react56.useRef)(null);
|
|
2147
2232
|
const getMenuItems = () => Array.from(listRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
|
|
2148
2233
|
const focusItemAt = (index) => {
|
|
2149
2234
|
const menuItems = getMenuItems();
|
|
@@ -2155,7 +2240,7 @@ var Menu = (0, import_react54.forwardRef)(function Menu2({ trigger: trigger2, it
|
|
|
2155
2240
|
setOpen(false);
|
|
2156
2241
|
triggerRef.current?.focus();
|
|
2157
2242
|
};
|
|
2158
|
-
(0,
|
|
2243
|
+
(0, import_react56.useLayoutEffect)(() => {
|
|
2159
2244
|
if (!open) {
|
|
2160
2245
|
setAlignEnd(false);
|
|
2161
2246
|
return;
|
|
@@ -2167,7 +2252,7 @@ var Menu = (0, import_react54.forwardRef)(function Menu2({ trigger: trigger2, it
|
|
|
2167
2252
|
const viewport = document.documentElement.clientWidth;
|
|
2168
2253
|
setAlignEnd(rootLeft + listEl.offsetWidth > viewport);
|
|
2169
2254
|
}, [open]);
|
|
2170
|
-
(0,
|
|
2255
|
+
(0, import_react56.useEffect)(() => {
|
|
2171
2256
|
if (!open) return;
|
|
2172
2257
|
listRef.current?.querySelector('[role="menuitem"]')?.focus();
|
|
2173
2258
|
const onDocMouseDown = (event) => {
|
|
@@ -2223,7 +2308,7 @@ var Menu = (0, import_react54.forwardRef)(function Menu2({ trigger: trigger2, it
|
|
|
2223
2308
|
triggerRef.current = node;
|
|
2224
2309
|
assignRef(consumerRef, node);
|
|
2225
2310
|
};
|
|
2226
|
-
const clonedTrigger = (0,
|
|
2311
|
+
const clonedTrigger = (0, import_react56.cloneElement)(trigger2, {
|
|
2227
2312
|
ref: mergedTriggerRef,
|
|
2228
2313
|
"aria-haspopup": "menu",
|
|
2229
2314
|
"aria-expanded": open,
|
|
@@ -2232,42 +2317,53 @@ var Menu = (0, import_react54.forwardRef)(function Menu2({ trigger: trigger2, it
|
|
|
2232
2317
|
setOpen((prev) => !prev);
|
|
2233
2318
|
}
|
|
2234
2319
|
});
|
|
2235
|
-
return /* @__PURE__ */ (0,
|
|
2236
|
-
|
|
2237
|
-
|
|
2238
|
-
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
"button",
|
|
2320
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
2321
|
+
"div",
|
|
2322
|
+
{
|
|
2323
|
+
ref: setRootRef,
|
|
2324
|
+
className: wrapper4,
|
|
2325
|
+
"data-testid": rootTestId,
|
|
2326
|
+
"data-state": open ? "open" : "closed",
|
|
2327
|
+
children: [
|
|
2328
|
+
clonedTrigger,
|
|
2329
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
2330
|
+
"div",
|
|
2247
2331
|
{
|
|
2248
|
-
|
|
2249
|
-
role: "
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
|
|
2256
|
-
|
|
2257
|
-
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2332
|
+
ref: listRef,
|
|
2333
|
+
role: "menu",
|
|
2334
|
+
className: list2,
|
|
2335
|
+
"data-align": alignEnd ? "end" : "start",
|
|
2336
|
+
"data-testid": slot("list"),
|
|
2337
|
+
onKeyDown: onMenuKeyDown,
|
|
2338
|
+
children: items.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
2339
|
+
"button",
|
|
2340
|
+
{
|
|
2341
|
+
type: "button",
|
|
2342
|
+
role: "menuitem",
|
|
2343
|
+
tabIndex: -1,
|
|
2344
|
+
className: entry.danger ? dangerItem : item3,
|
|
2345
|
+
"data-testid": slot(`item-${index}`),
|
|
2346
|
+
onClick: () => {
|
|
2347
|
+
entry.onClick?.();
|
|
2348
|
+
setOpen(false);
|
|
2349
|
+
},
|
|
2350
|
+
children: entry.label
|
|
2351
|
+
},
|
|
2352
|
+
index
|
|
2353
|
+
))
|
|
2354
|
+
}
|
|
2355
|
+
)
|
|
2356
|
+
]
|
|
2357
|
+
}
|
|
2358
|
+
);
|
|
2263
2359
|
});
|
|
2264
2360
|
|
|
2265
2361
|
// src/components/dialog/index.tsx
|
|
2266
|
-
var
|
|
2362
|
+
var import_react58 = require("react");
|
|
2267
2363
|
var import_react_dom = require("react-dom");
|
|
2268
2364
|
|
|
2269
2365
|
// src/components/dialog/use-styles.ts
|
|
2270
|
-
var
|
|
2366
|
+
var import_react57 = require("react");
|
|
2271
2367
|
|
|
2272
2368
|
// src/components/dialog/use-styles.css.ts
|
|
2273
2369
|
var actions = "use-styles_actions__5tstu83";
|
|
@@ -2278,7 +2374,7 @@ var surface = "use-styles_surface__5tstu81";
|
|
|
2278
2374
|
// src/components/dialog/use-styles.ts
|
|
2279
2375
|
function useStyles26() {
|
|
2280
2376
|
const { themeClass } = useTheme();
|
|
2281
|
-
return (0,
|
|
2377
|
+
return (0, import_react57.useMemo)(
|
|
2282
2378
|
() => ({
|
|
2283
2379
|
overlay: [themeClass, overlay].filter(Boolean).join(" "),
|
|
2284
2380
|
surface,
|
|
@@ -2290,23 +2386,24 @@ function useStyles26() {
|
|
|
2290
2386
|
}
|
|
2291
2387
|
|
|
2292
2388
|
// src/components/dialog/index.tsx
|
|
2293
|
-
var
|
|
2389
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
2294
2390
|
var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
2295
2391
|
function assignRef2(ref, value) {
|
|
2296
2392
|
if (typeof ref === "function") ref(value);
|
|
2297
2393
|
else if (ref) ref.current = value;
|
|
2298
2394
|
}
|
|
2299
|
-
var Dialog = (0,
|
|
2395
|
+
var Dialog = (0, import_react58.forwardRef)(function Dialog2({ open, onClose, title, actions: actions3, children, testId }, ref) {
|
|
2300
2396
|
const { overlay: overlay2, surface: surface2, body: body3, actions: actionsClass } = useStyles26();
|
|
2301
|
-
const
|
|
2397
|
+
const { testId: rootTestId, slot } = useTestId("dialog", testId);
|
|
2398
|
+
const surfaceRef = (0, import_react58.useRef)(null);
|
|
2302
2399
|
const setSurfaceRef = (node) => {
|
|
2303
2400
|
surfaceRef.current = node;
|
|
2304
2401
|
assignRef2(ref, node);
|
|
2305
2402
|
};
|
|
2306
|
-
const previouslyFocused = (0,
|
|
2307
|
-
const generatedId = (0,
|
|
2403
|
+
const previouslyFocused = (0, import_react58.useRef)(null);
|
|
2404
|
+
const generatedId = (0, import_react58.useId)();
|
|
2308
2405
|
const titleId = title != null ? generatedId : void 0;
|
|
2309
|
-
(0,
|
|
2406
|
+
(0, import_react58.useEffect)(() => {
|
|
2310
2407
|
if (!open) return;
|
|
2311
2408
|
const onKeyDown = (event) => {
|
|
2312
2409
|
if (event.key === "Escape") onClose();
|
|
@@ -2314,13 +2411,13 @@ var Dialog = (0, import_react56.forwardRef)(function Dialog2({ open, onClose, ti
|
|
|
2314
2411
|
document.addEventListener("keydown", onKeyDown);
|
|
2315
2412
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
2316
2413
|
}, [open, onClose]);
|
|
2317
|
-
(0,
|
|
2414
|
+
(0, import_react58.useEffect)(() => {
|
|
2318
2415
|
if (!open) return;
|
|
2319
2416
|
previouslyFocused.current = document.activeElement;
|
|
2320
2417
|
surfaceRef.current?.focus();
|
|
2321
2418
|
return () => previouslyFocused.current?.focus?.();
|
|
2322
2419
|
}, [open]);
|
|
2323
|
-
(0,
|
|
2420
|
+
(0, import_react58.useEffect)(() => {
|
|
2324
2421
|
if (!open) return;
|
|
2325
2422
|
const previousOverflow = document.body.style.overflow;
|
|
2326
2423
|
document.body.style.overflow = "hidden";
|
|
@@ -2358,7 +2455,7 @@ var Dialog = (0, import_react56.forwardRef)(function Dialog2({ open, onClose, ti
|
|
|
2358
2455
|
};
|
|
2359
2456
|
return (0, import_react_dom.createPortal)(
|
|
2360
2457
|
// biome-ignore lint/a11y/useKeyWithClickEvents: ESC handled by a document keydown listener.
|
|
2361
|
-
/* @__PURE__ */ (0,
|
|
2458
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: overlay2, "data-testid": slot("overlay"), onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
2362
2459
|
"div",
|
|
2363
2460
|
{
|
|
2364
2461
|
ref: setSurfaceRef,
|
|
@@ -2367,12 +2464,13 @@ var Dialog = (0, import_react56.forwardRef)(function Dialog2({ open, onClose, ti
|
|
|
2367
2464
|
"aria-modal": "true",
|
|
2368
2465
|
"aria-labelledby": titleId,
|
|
2369
2466
|
tabIndex: -1,
|
|
2467
|
+
"data-testid": rootTestId,
|
|
2370
2468
|
onClick: stop,
|
|
2371
2469
|
onKeyDown: onSurfaceKeyDown,
|
|
2372
2470
|
children: [
|
|
2373
|
-
title != null && /* @__PURE__ */ (0,
|
|
2374
|
-
children != null && /* @__PURE__ */ (0,
|
|
2375
|
-
actions3 != null && /* @__PURE__ */ (0,
|
|
2471
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Typography, { variant: "h3", as: "h2", id: titleId, children: title }),
|
|
2472
|
+
children != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: body3, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Typography, { variant: "body", color: "fg2", children }) }),
|
|
2473
|
+
actions3 != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: actionsClass, children: actions3 })
|
|
2376
2474
|
]
|
|
2377
2475
|
}
|
|
2378
2476
|
) }),
|
|
@@ -2381,11 +2479,11 @@ var Dialog = (0, import_react56.forwardRef)(function Dialog2({ open, onClose, ti
|
|
|
2381
2479
|
});
|
|
2382
2480
|
|
|
2383
2481
|
// src/components/snackbar/index.tsx
|
|
2384
|
-
var
|
|
2482
|
+
var import_react60 = require("react");
|
|
2385
2483
|
var import_react_dom2 = require("react-dom");
|
|
2386
2484
|
|
|
2387
2485
|
// src/components/snackbar/use-styles.ts
|
|
2388
|
-
var
|
|
2486
|
+
var import_react59 = require("react");
|
|
2389
2487
|
|
|
2390
2488
|
// src/components/snackbar/use-styles.css.ts
|
|
2391
2489
|
var closeBtn = "use-styles_closeBtn__ihzsep2";
|
|
@@ -2395,7 +2493,7 @@ var root20 = "use-styles_root__ihzsep0 surfaces_inkySurface__1qa7atn2";
|
|
|
2395
2493
|
// src/components/snackbar/use-styles.ts
|
|
2396
2494
|
function useStyles27() {
|
|
2397
2495
|
const { themeClass } = useTheme();
|
|
2398
|
-
return (0,
|
|
2496
|
+
return (0, import_react59.useMemo)(
|
|
2399
2497
|
() => ({
|
|
2400
2498
|
root: [themeClass, root20].filter(Boolean).join(" "),
|
|
2401
2499
|
message,
|
|
@@ -2406,25 +2504,25 @@ function useStyles27() {
|
|
|
2406
2504
|
}
|
|
2407
2505
|
|
|
2408
2506
|
// src/components/snackbar/index.tsx
|
|
2409
|
-
var
|
|
2410
|
-
var Snackbar = (0,
|
|
2507
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
2508
|
+
var Snackbar = (0, import_react60.forwardRef)(function Snackbar2({ open, message: message2, action, onClose }, ref) {
|
|
2411
2509
|
const { root: root24, message: messageClass, closeBtn: closeBtn2 } = useStyles27();
|
|
2412
2510
|
if (!open || typeof document === "undefined") return null;
|
|
2413
2511
|
return (0, import_react_dom2.createPortal)(
|
|
2414
|
-
/* @__PURE__ */ (0,
|
|
2415
|
-
/* @__PURE__ */ (0,
|
|
2512
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { ref, role: "status", className: root24, children: [
|
|
2513
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: messageClass, children: message2 }),
|
|
2416
2514
|
action,
|
|
2417
|
-
onClose && /* @__PURE__ */ (0,
|
|
2515
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { type: "button", "aria-label": "Close", className: closeBtn2, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(XIcon, { size: 18 }) })
|
|
2418
2516
|
] }),
|
|
2419
2517
|
document.body
|
|
2420
2518
|
);
|
|
2421
2519
|
});
|
|
2422
2520
|
|
|
2423
2521
|
// src/components/table/index.tsx
|
|
2424
|
-
var
|
|
2522
|
+
var import_react62 = require("react");
|
|
2425
2523
|
|
|
2426
2524
|
// src/components/table/use-styles.ts
|
|
2427
|
-
var
|
|
2525
|
+
var import_react61 = require("react");
|
|
2428
2526
|
|
|
2429
2527
|
// src/components/table/use-styles.css.ts
|
|
2430
2528
|
var alignRight = "use-styles_alignRight__1n2cz6i3";
|
|
@@ -2436,7 +2534,7 @@ var th = "use-styles_th__1n2cz6i1";
|
|
|
2436
2534
|
// src/components/table/use-styles.ts
|
|
2437
2535
|
function useStyles28({ className }) {
|
|
2438
2536
|
const { themeClass } = useTheme();
|
|
2439
|
-
const root24 = (0,
|
|
2537
|
+
const root24 = (0, import_react61.useMemo)(
|
|
2440
2538
|
() => [themeClass, root21, className].filter(Boolean).join(" "),
|
|
2441
2539
|
[themeClass, className]
|
|
2442
2540
|
);
|
|
@@ -2450,26 +2548,26 @@ function useStyles28({ className }) {
|
|
|
2450
2548
|
}
|
|
2451
2549
|
|
|
2452
2550
|
// src/components/table/index.tsx
|
|
2453
|
-
var
|
|
2551
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
2454
2552
|
function TableInner({ columns, rows, getRowKey, className, caption: caption2, ...rest }, ref) {
|
|
2455
2553
|
const { root: root24, th: th2, td: td2, alignRight: alignRight2, caption: captionClass } = useStyles28({ className });
|
|
2456
2554
|
const headClass = (column) => column.align === "right" ? `${th2} ${alignRight2}` : th2;
|
|
2457
2555
|
const cellClass = (column) => column.align === "right" ? `${td2} ${alignRight2}` : td2;
|
|
2458
|
-
return /* @__PURE__ */ (0,
|
|
2459
|
-
caption2 != null && /* @__PURE__ */ (0,
|
|
2460
|
-
/* @__PURE__ */ (0,
|
|
2461
|
-
/* @__PURE__ */ (0,
|
|
2556
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("table", { ref, className: root24, ...rest, children: [
|
|
2557
|
+
caption2 != null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("caption", { className: captionClass, children: caption2 }),
|
|
2558
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("th", { scope: "col", className: headClass(column), children: column.header }, column.key)) }) }),
|
|
2559
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tbody", { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("td", { className: cellClass(column), children: column.render ? column.render(row) : String(row[column.key]) }, column.key)) }, getRowKey ? getRowKey(row, index) : index)) })
|
|
2462
2560
|
] });
|
|
2463
2561
|
}
|
|
2464
|
-
var TableForwarded = (0,
|
|
2562
|
+
var TableForwarded = (0, import_react62.forwardRef)(TableInner);
|
|
2465
2563
|
TableForwarded.displayName = "Table";
|
|
2466
2564
|
var Table = TableForwarded;
|
|
2467
2565
|
|
|
2468
2566
|
// src/components/app-bar/index.tsx
|
|
2469
|
-
var
|
|
2567
|
+
var import_react64 = require("react");
|
|
2470
2568
|
|
|
2471
2569
|
// src/components/app-bar/use-styles.ts
|
|
2472
|
-
var
|
|
2570
|
+
var import_react63 = require("react");
|
|
2473
2571
|
|
|
2474
2572
|
// src/components/app-bar/use-styles.css.ts
|
|
2475
2573
|
var actions2 = "use-styles_actions__1h133nh2";
|
|
@@ -2479,7 +2577,7 @@ var root22 = "use-styles_root__1h133nh0";
|
|
|
2479
2577
|
// src/components/app-bar/use-styles.ts
|
|
2480
2578
|
function useStyles29({ className }) {
|
|
2481
2579
|
const { themeClass } = useTheme();
|
|
2482
|
-
const root24 = (0,
|
|
2580
|
+
const root24 = (0, import_react63.useMemo)(
|
|
2483
2581
|
() => [themeClass, root22, className].filter(Boolean).join(" "),
|
|
2484
2582
|
[themeClass, className]
|
|
2485
2583
|
);
|
|
@@ -2487,21 +2585,21 @@ function useStyles29({ className }) {
|
|
|
2487
2585
|
}
|
|
2488
2586
|
|
|
2489
2587
|
// src/components/app-bar/index.tsx
|
|
2490
|
-
var
|
|
2491
|
-
var AppBar = (0,
|
|
2588
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
2589
|
+
var AppBar = (0, import_react64.forwardRef)(function AppBar2({ brand: brand2, actions: actions3, className, children, ...rest }, ref) {
|
|
2492
2590
|
const styles = useStyles29({ className });
|
|
2493
|
-
return /* @__PURE__ */ (0,
|
|
2494
|
-
brand2 !== void 0 ? /* @__PURE__ */ (0,
|
|
2591
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("header", { ref, className: styles.root, ...rest, children: [
|
|
2592
|
+
brand2 !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: styles.brand, children: brand2 }) : null,
|
|
2495
2593
|
children,
|
|
2496
|
-
actions3 !== void 0 ? /* @__PURE__ */ (0,
|
|
2594
|
+
actions3 !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: styles.actions, children: actions3 }) : null
|
|
2497
2595
|
] });
|
|
2498
2596
|
});
|
|
2499
2597
|
|
|
2500
2598
|
// src/components/list-item/index.tsx
|
|
2501
|
-
var
|
|
2599
|
+
var import_react66 = require("react");
|
|
2502
2600
|
|
|
2503
2601
|
// src/components/list-item/use-styles.ts
|
|
2504
|
-
var
|
|
2602
|
+
var import_react65 = require("react");
|
|
2505
2603
|
|
|
2506
2604
|
// src/components/list-item/use-styles.css.ts
|
|
2507
2605
|
var content2 = "use-styles_content__kbreq13";
|
|
@@ -2516,7 +2614,7 @@ function useStyles30({
|
|
|
2516
2614
|
className
|
|
2517
2615
|
}) {
|
|
2518
2616
|
const { themeClass } = useTheme();
|
|
2519
|
-
const root24 = (0,
|
|
2617
|
+
const root24 = (0, import_react65.useMemo)(
|
|
2520
2618
|
() => [themeClass, root23, selected3 && selected2, className].filter(Boolean).join(" "),
|
|
2521
2619
|
[themeClass, selected3, className]
|
|
2522
2620
|
);
|
|
@@ -2524,20 +2622,20 @@ function useStyles30({
|
|
|
2524
2622
|
}
|
|
2525
2623
|
|
|
2526
2624
|
// src/components/list-item/index.tsx
|
|
2527
|
-
var
|
|
2528
|
-
var ListItem = (0,
|
|
2625
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
2626
|
+
var ListItem = (0, import_react66.forwardRef)(function ListItem2({ leading: leading2, trailing: trailing2, selected: selected3, className, children, ...rest }, ref) {
|
|
2529
2627
|
const styles = useStyles30({ selected: selected3, className });
|
|
2530
|
-
return /* @__PURE__ */ (0,
|
|
2531
|
-
leading2 != null && /* @__PURE__ */ (0,
|
|
2532
|
-
/* @__PURE__ */ (0,
|
|
2533
|
-
trailing2 != null && /* @__PURE__ */ (0,
|
|
2628
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { ref, className: styles.root, ...rest, children: [
|
|
2629
|
+
leading2 != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: styles.leading, children: leading2 }),
|
|
2630
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: styles.content, children }),
|
|
2631
|
+
trailing2 != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: styles.trailing, children: trailing2 })
|
|
2534
2632
|
] });
|
|
2535
2633
|
});
|
|
2536
2634
|
|
|
2537
2635
|
// src/components/icons/chevron-up/index.tsx
|
|
2538
|
-
var
|
|
2636
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
2539
2637
|
function ChevronUpIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
2540
|
-
return /* @__PURE__ */ (0,
|
|
2638
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
2541
2639
|
"svg",
|
|
2542
2640
|
{
|
|
2543
2641
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -2551,15 +2649,15 @@ function ChevronUpIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
2551
2649
|
strokeLinejoin: "round",
|
|
2552
2650
|
"aria-hidden": "true",
|
|
2553
2651
|
...rest,
|
|
2554
|
-
children: /* @__PURE__ */ (0,
|
|
2652
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("path", { d: "m18 15-6-6-6 6" })
|
|
2555
2653
|
}
|
|
2556
2654
|
);
|
|
2557
2655
|
}
|
|
2558
2656
|
|
|
2559
2657
|
// src/components/icons/search/index.tsx
|
|
2560
|
-
var
|
|
2658
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
2561
2659
|
function SearchIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
2562
|
-
return /* @__PURE__ */ (0,
|
|
2660
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
|
|
2563
2661
|
"svg",
|
|
2564
2662
|
{
|
|
2565
2663
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -2574,17 +2672,17 @@ function SearchIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
2574
2672
|
"aria-hidden": "true",
|
|
2575
2673
|
...rest,
|
|
2576
2674
|
children: [
|
|
2577
|
-
/* @__PURE__ */ (0,
|
|
2578
|
-
/* @__PURE__ */ (0,
|
|
2675
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
|
|
2676
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "m21 21-4.3-4.3" })
|
|
2579
2677
|
]
|
|
2580
2678
|
}
|
|
2581
2679
|
);
|
|
2582
2680
|
}
|
|
2583
2681
|
|
|
2584
2682
|
// src/components/icons/plus/index.tsx
|
|
2585
|
-
var
|
|
2683
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
2586
2684
|
function PlusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
2587
|
-
return /* @__PURE__ */ (0,
|
|
2685
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
|
|
2588
2686
|
"svg",
|
|
2589
2687
|
{
|
|
2590
2688
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -2599,17 +2697,17 @@ function PlusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
2599
2697
|
"aria-hidden": "true",
|
|
2600
2698
|
...rest,
|
|
2601
2699
|
children: [
|
|
2602
|
-
/* @__PURE__ */ (0,
|
|
2603
|
-
/* @__PURE__ */ (0,
|
|
2700
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M5 12h14" }),
|
|
2701
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M12 5v14" })
|
|
2604
2702
|
]
|
|
2605
2703
|
}
|
|
2606
2704
|
);
|
|
2607
2705
|
}
|
|
2608
2706
|
|
|
2609
2707
|
// src/components/icons/minus/index.tsx
|
|
2610
|
-
var
|
|
2708
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
2611
2709
|
function MinusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
2612
|
-
return /* @__PURE__ */ (0,
|
|
2710
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
2613
2711
|
"svg",
|
|
2614
2712
|
{
|
|
2615
2713
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -2623,15 +2721,15 @@ function MinusIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
2623
2721
|
strokeLinejoin: "round",
|
|
2624
2722
|
"aria-hidden": "true",
|
|
2625
2723
|
...rest,
|
|
2626
|
-
children: /* @__PURE__ */ (0,
|
|
2724
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "M5 12h14" })
|
|
2627
2725
|
}
|
|
2628
2726
|
);
|
|
2629
2727
|
}
|
|
2630
2728
|
|
|
2631
2729
|
// src/components/icons/more-horizontal/index.tsx
|
|
2632
|
-
var
|
|
2730
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
2633
2731
|
function MoreHorizontalIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
2634
|
-
return /* @__PURE__ */ (0,
|
|
2732
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
|
|
2635
2733
|
"svg",
|
|
2636
2734
|
{
|
|
2637
2735
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -2646,9 +2744,9 @@ function MoreHorizontalIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
2646
2744
|
"aria-hidden": "true",
|
|
2647
2745
|
...rest,
|
|
2648
2746
|
children: [
|
|
2649
|
-
/* @__PURE__ */ (0,
|
|
2650
|
-
/* @__PURE__ */ (0,
|
|
2651
|
-
/* @__PURE__ */ (0,
|
|
2747
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
|
|
2748
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
|
|
2749
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("circle", { cx: "5", cy: "12", r: "1" })
|
|
2652
2750
|
]
|
|
2653
2751
|
}
|
|
2654
2752
|
);
|
|
@@ -2697,6 +2795,7 @@ function MoreHorizontalIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
2697
2795
|
Switch,
|
|
2698
2796
|
Table,
|
|
2699
2797
|
Tabs,
|
|
2798
|
+
TestIdProvider,
|
|
2700
2799
|
TextField,
|
|
2701
2800
|
ThemeProvider,
|
|
2702
2801
|
Tooltip,
|
|
@@ -2710,6 +2809,7 @@ function MoreHorizontalIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
|
|
|
2710
2809
|
theme,
|
|
2711
2810
|
themes,
|
|
2712
2811
|
usePrevious,
|
|
2812
|
+
useTestId,
|
|
2713
2813
|
useTheme,
|
|
2714
2814
|
useToggle
|
|
2715
2815
|
});
|