A design system in a box.
hip-ui.tngl.io/docs/introduction
fix lint errors
+799
-815
+2
-2
apps/docs/src/components/alert-dialog/index.tsx
+2
-2
apps/docs/src/components/alert-dialog/index.tsx
···
27
27
paddingTop: spacing["2"],
28
28
},
29
29
header: {
30
-
alignItems: "center",
31
30
gap: spacing["2"],
31
+
alignItems: "center",
32
32
display: "flex",
33
+
fontSize: fontSize["lg"],
33
34
justifyContent: "space-between",
34
35
height: spacing["8"],
35
36
paddingLeft: spacing["4"],
36
37
paddingRight: spacing["4"],
37
-
fontSize: fontSize["lg"],
38
38
paddingTop: spacing["2"],
39
39
},
40
40
description: {
+63
-36
apps/docs/src/components/avatar/index.tsx
+63
-36
apps/docs/src/components/avatar/index.tsx
···
2
2
import { use, useLayoutEffect, useState } from "react";
3
3
4
4
import { SizeContext } from "../context";
5
+
import { uiColor } from "../theme/color.stylex";
5
6
import { radius } from "../theme/radius.stylex";
6
-
import { uiColor } from "../theme/semantic-color.stylex";
7
7
import { spacing } from "../theme/spacing.stylex";
8
8
import { Size, StyleXComponentProps } from "../theme/types";
9
9
import {
···
26
26
27
27
// eslint-disable-next-line @stylexjs/valid-styles
28
28
cornerShape: "squircle",
29
+
},
30
+
wrapperSm: {
29
31
borderRadius: {
30
-
":is([data-size=lg])": {
31
-
default: radius["lg"],
32
-
"@supports (corner-shape: squircle)": radius["3xl"],
33
-
},
34
-
":is([data-size=md])": {
35
-
default: radius["md"],
36
-
"@supports (corner-shape: squircle)": radius["3xl"],
37
-
},
38
-
":is([data-size=sm])": {
39
-
default: radius["sm"],
40
-
"@supports (corner-shape: squircle)": radius["3xl"],
41
-
},
42
-
":is([data-size=xl])": {
43
-
default: radius["xl"],
44
-
"@supports (corner-shape: squircle)": radius["3xl"],
45
-
},
32
+
default: radius["sm"],
33
+
"@supports (corner-shape: squircle)": radius["3xl"],
46
34
},
47
-
height: {
48
-
":is([data-size=lg])": spacing["10"],
49
-
":is([data-size=md])": spacing["8"],
50
-
":is([data-size=sm])": spacing["6"],
51
-
":is([data-size=xl])": spacing["14"],
35
+
height: spacing["6"],
36
+
width: spacing["6"],
37
+
},
38
+
wrapperMd: {
39
+
borderRadius: {
40
+
default: radius["md"],
41
+
"@supports (corner-shape: squircle)": radius["3xl"],
42
+
},
43
+
height: spacing["8"],
44
+
width: spacing["8"],
45
+
},
46
+
wrapperLg: {
47
+
borderRadius: {
48
+
default: radius["lg"],
49
+
"@supports (corner-shape: squircle)": radius["3xl"],
52
50
},
53
-
width: {
54
-
":is([data-size=lg])": spacing["10"],
55
-
":is([data-size=md])": spacing["8"],
56
-
":is([data-size=sm])": spacing["6"],
57
-
":is([data-size=xl])": spacing["14"],
51
+
height: spacing["10"],
52
+
width: spacing["10"],
53
+
},
54
+
wrapperXl: {
55
+
borderRadius: {
56
+
default: radius["xl"],
57
+
"@supports (corner-shape: squircle)": radius["3xl"],
58
58
},
59
+
height: spacing["14"],
60
+
width: spacing["14"],
59
61
},
60
62
image: {
61
63
objectFit: "cover",
···
68
70
fontFamily: fontFamily["sans"],
69
71
fontWeight: fontWeight["medium"],
70
72
lineHeight: lineHeight["none"],
71
-
72
-
fontSize: {
73
-
":is([data-size=lg] *)": fontSize["lg"],
74
-
":is([data-size=md] *)": fontSize["base"],
75
-
":is([data-size=sm] *)": fontSize["sm"],
76
-
":is([data-size=xl] *)": fontSize["xl"],
77
-
},
73
+
},
74
+
fallbackSm: {
75
+
fontSize: fontSize["sm"],
76
+
},
77
+
fallbackMd: {
78
+
fontSize: fontSize["base"],
79
+
},
80
+
fallbackLg: {
81
+
fontSize: fontSize["lg"],
82
+
},
83
+
fallbackXl: {
84
+
fontSize: fontSize["xl"],
78
85
},
79
86
});
80
87
···
123
130
}, [src]);
124
131
125
132
return (
126
-
<div {...props} data-size={size} {...stylex.props(styles.wrapper, style)}>
133
+
<div
134
+
{...props}
135
+
{...stylex.props(
136
+
styles.wrapper,
137
+
size === "sm" && styles.wrapperSm,
138
+
size === "md" && styles.wrapperMd,
139
+
size === "lg" && styles.wrapperLg,
140
+
size === "xl" && styles.wrapperXl,
141
+
style,
142
+
)}
143
+
>
127
144
{imageLoaded === "loaded" && (
128
145
<img {...stylex.props(styles.image)} src={src} alt={alt} />
129
146
)}
130
147
{(!src || imageLoaded === "error") && (
131
-
<div {...stylex.props(styles.fallback)}>{fallback}</div>
148
+
<div
149
+
{...stylex.props(
150
+
styles.fallback,
151
+
size === "sm" && styles.fallbackSm,
152
+
size === "md" && styles.fallbackMd,
153
+
size === "lg" && styles.fallbackLg,
154
+
size === "xl" && styles.fallbackXl,
155
+
)}
156
+
>
157
+
{fallback}
158
+
</div>
132
159
)}
133
160
</div>
134
161
);
-1
apps/docs/src/components/calendar/index.tsx
-1
apps/docs/src/components/calendar/index.tsx
···
18
18
import { Flex } from "../flex";
19
19
import { IconButton } from "../icon-button";
20
20
import { ErrorMessage } from "../label";
21
-
import { spacing } from "../theme/spacing.stylex";
22
21
import { useCalendarStyles } from "../theme/useCalendarStyles";
23
22
24
23
export interface CalendarProps<T extends DateValue>
+6
-6
apps/docs/src/components/color-picker/index.tsx
+6
-6
apps/docs/src/components/color-picker/index.tsx
···
36
36
37
37
const styles = stylex.create({
38
38
button: {
39
-
alignItems: "center",
40
-
backgroundColor: "transparent",
39
+
margin: 0,
40
+
padding: 0,
41
41
borderWidth: 0,
42
-
display: "flex",
43
-
fontSize: fontSize["sm"],
44
42
gap: {
45
43
default: spacing["2"],
46
44
":is([data-size=sm])": spacing["1"],
47
45
},
48
-
margin: 0,
49
-
padding: 0,
46
+
alignItems: "center",
47
+
backgroundColor: "transparent",
48
+
display: "flex",
49
+
fontSize: fontSize["sm"],
50
50
},
51
51
root: {
52
52
display: "block",
+1
-1
apps/docs/src/components/color-slider/index.tsx
+1
-1
apps/docs/src/components/color-slider/index.tsx
···
11
11
import { ColorThumb } from "../color-area";
12
12
import { SizeContext } from "../context";
13
13
import { Label } from "../label";
14
+
import { uiColor } from "../theme/color.stylex";
14
15
import { radius } from "../theme/radius.stylex";
15
-
import { uiColor } from "../theme/semantic-color.stylex";
16
16
import { spacing } from "../theme/spacing.stylex";
17
17
import { Size, StyleXComponentProps } from "../theme/types";
18
18
import { fontSize, lineHeight } from "../theme/typography.stylex";
+1
-1
apps/docs/src/components/color-swatch-picker/index.tsx
+1
-1
apps/docs/src/components/color-swatch-picker/index.tsx
···
9
9
10
10
import { ColorSwatch } from "../color-swatch";
11
11
import { SizeContext } from "../context";
12
+
import { uiColor } from "../theme/color.stylex";
12
13
import { radius } from "../theme/radius.stylex";
13
-
import { uiColor } from "../theme/semantic-color.stylex";
14
14
import { spacing } from "../theme/spacing.stylex";
15
15
import { Size, StyleXComponentProps } from "../theme/types";
16
16
+28
-23
apps/docs/src/components/color-swatch/index.tsx
+28
-23
apps/docs/src/components/color-swatch/index.tsx
···
5
5
import { ColorSwatch as AriaColorSwatch } from "react-aria-components";
6
6
7
7
import { SizeContext } from "../context";
8
+
import { uiColor } from "../theme/color.stylex";
8
9
import { radius } from "../theme/radius.stylex";
9
-
import { uiColor } from "../theme/semantic-color.stylex";
10
10
import { spacing } from "../theme/spacing.stylex";
11
11
import { Size, StyleXComponentProps } from "../theme/types";
12
12
···
19
19
20
20
// eslint-disable-next-line @stylexjs/valid-styles
21
21
cornerShape: "squircle",
22
+
},
23
+
swatchSm: {
22
24
borderRadius: {
23
-
":is([data-size=lg])": {
24
-
default: radius["lg"],
25
-
"@supports (corner-shape: squircle)": radius["3xl"],
26
-
},
27
-
":is([data-size=md])": {
28
-
default: radius["md"],
29
-
"@supports (corner-shape: squircle)": radius["3xl"],
30
-
},
31
-
":is([data-size=sm])": {
32
-
default: radius["sm"],
33
-
"@supports (corner-shape: squircle)": radius["3xl"],
34
-
},
25
+
default: radius["sm"],
26
+
"@supports (corner-shape: squircle)": radius["3xl"],
35
27
},
36
-
height: {
37
-
":is([data-size=lg])": spacing["8"],
38
-
":is([data-size=md])": spacing["6"],
39
-
":is([data-size=sm])": spacing["4"],
28
+
height: spacing["4"],
29
+
width: spacing["4"],
30
+
},
31
+
swatchMd: {
32
+
borderRadius: {
33
+
default: radius["md"],
34
+
"@supports (corner-shape: squircle)": radius["3xl"],
40
35
},
41
-
width: {
42
-
":is([data-size=lg])": spacing["8"],
43
-
":is([data-size=md])": spacing["6"],
44
-
":is([data-size=sm])": spacing["4"],
36
+
height: spacing["6"],
37
+
width: spacing["6"],
38
+
},
39
+
swatchLg: {
40
+
borderRadius: {
41
+
default: radius["lg"],
42
+
"@supports (corner-shape: squircle)": radius["3xl"],
45
43
},
44
+
height: spacing["8"],
45
+
width: spacing["8"],
46
46
},
47
47
});
48
48
···
62
62
return (
63
63
<AriaColorSwatch
64
64
{...props}
65
-
{...stylex.props(styles.swatch, style)}
66
-
data-size={size}
65
+
{...stylex.props(
66
+
styles.swatch,
67
+
size === "sm" && styles.swatchSm,
68
+
size === "md" && styles.swatchMd,
69
+
size === "lg" && styles.swatchLg,
70
+
style,
71
+
)}
67
72
style={({ color }) => ({
68
73
background: `linear-gradient(${color.toString()}, ${color.toString()}),
69
74
repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`,
+1
-1
apps/docs/src/components/color-wheel/index.tsx
+1
-1
apps/docs/src/components/color-wheel/index.tsx
···
9
9
10
10
import { ColorThumb } from "../color-area";
11
11
import { SizeContext } from "../context";
12
+
import { uiColor } from "../theme/color.stylex";
12
13
import { radius } from "../theme/radius.stylex";
13
-
import { uiColor } from "../theme/semantic-color.stylex";
14
14
import { spacing } from "../theme/spacing.stylex";
15
15
import { Size, StyleXComponentProps } from "../theme/types";
16
16
+1
-1
apps/docs/src/components/date-range-picker/index.tsx
+1
-1
apps/docs/src/components/date-range-picker/index.tsx
···
18
18
import { Description, FieldErrorMessage, Label } from "../label";
19
19
import { RangeCalendar, RangeCalendarProps } from "../range-calendar";
20
20
import { SuffixIcon } from "../suffix-icon";
21
-
import { uiColor } from "../theme/semantic-color.stylex";
21
+
import { uiColor } from "../theme/color.stylex";
22
22
import { spacing } from "../theme/spacing.stylex";
23
23
import {
24
24
InputVariant,
+3
-3
apps/docs/src/components/dialog/index.tsx
+3
-3
apps/docs/src/components/dialog/index.tsx
···
12
12
} from "react-aria-components";
13
13
14
14
import { IconButton } from "../icon-button";
15
-
import { uiColor } from "../theme/semantic-color.stylex";
15
+
import { uiColor } from "../theme/color.stylex";
16
16
import { spacing } from "../theme/spacing.stylex";
17
17
import { Size, StyleXComponentProps } from "../theme/types";
18
18
import { fontSize, typeramp } from "../theme/typography.stylex";
···
23
23
paddingTop: spacing["2"],
24
24
},
25
25
header: {
26
-
alignItems: "center",
27
26
gap: spacing["2"],
27
+
alignItems: "center",
28
28
display: "flex",
29
+
fontSize: fontSize["lg"],
29
30
justifyContent: "space-between",
30
31
height: spacing["8"],
31
32
paddingBottom: spacing["2"],
32
33
paddingLeft: spacing["4"],
33
-
fontSize: fontSize["lg"],
34
34
paddingRight: spacing["4"],
35
35
36
36
borderBottomColor: uiColor.border1,
+3
-3
apps/docs/src/components/disclosure-group/index.tsx
+3
-3
apps/docs/src/components/disclosure-group/index.tsx
···
8
8
} from "react-aria-components";
9
9
10
10
import { SizeContext } from "../context";
11
-
import { uiColor } from "../theme/semantic-color.stylex";
11
+
import { uiColor } from "../theme/color.stylex";
12
12
import { Size, StyleXComponentProps } from "../theme/types";
13
13
14
14
const styles = stylex.create({
···
17
17
flexDirection: "column",
18
18
},
19
19
separator: {
20
-
backgroundColor: uiColor.border2,
20
+
margin: 0,
21
21
borderWidth: 0,
22
+
backgroundColor: uiColor.border2,
22
23
height: "1px",
23
-
margin: 0,
24
24
width: "100%",
25
25
},
26
26
});
+1
-1
apps/docs/src/components/disclosure/index.tsx
+1
-1
apps/docs/src/components/disclosure/index.tsx
···
12
12
13
13
import { SizeContext } from "../context";
14
14
import { animationDuration } from "../theme/animations.stylex";
15
+
import { uiColor } from "../theme/color.stylex";
15
16
import { radius } from "../theme/radius.stylex";
16
-
import { uiColor } from "../theme/semantic-color.stylex";
17
17
import { spacing } from "../theme/spacing.stylex";
18
18
import { Size, StyleXComponentProps } from "../theme/types";
19
19
import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex";
+1
-1
apps/docs/src/components/drawer/index.tsx
+1
-1
apps/docs/src/components/drawer/index.tsx
···
13
13
14
14
import { IconButton } from "../icon-button";
15
15
import { animationDuration, animations } from "../theme/animations.stylex";
16
-
import { uiColor } from "../theme/semantic-color.stylex";
16
+
import { uiColor } from "../theme/color.stylex";
17
17
import { spacing } from "../theme/spacing.stylex";
18
18
import { Size, StyleXComponentProps } from "../theme/types";
19
19
import { typeramp } from "../theme/typography.stylex";
+30
-77
apps/docs/src/components/empty-state/index.tsx
+30
-77
apps/docs/src/components/empty-state/index.tsx
···
11
11
12
12
const styles = stylex.create({
13
13
emptyState: {
14
-
display: "grid",
15
-
gridTemplateColumns: {
16
-
":is([data-empty-state-size=sm])": {
17
-
":has([data-empty-state-actions])": "min-content 1fr max-content",
18
-
default: "min-content 1fr",
19
-
},
14
+
"--empty-state-gap": {
15
+
":is([data-empty-state-size=lg])": spacing["8"],
16
+
":is([data-empty-state-size=md])": spacing["6"],
17
+
":is([data-empty-state-size=sm])": spacing["4"],
20
18
},
21
-
gridTemplateAreas: {
22
-
":is([data-empty-state-size=md],[data-empty-state-size=lg])": {
23
-
default: `
24
-
"image"
25
-
"title"
26
-
"description"
27
-
`,
28
-
":has([data-empty-state-actions])": `
29
-
"image"
30
-
"title"
31
-
"description"
32
-
"actions"
33
-
`,
34
-
},
35
-
":is([data-empty-state-size=sm])": {
36
-
default: `
37
-
"image title"
38
-
"image description"
39
-
`,
40
-
":has([data-empty-state-actions])": `
41
-
"image title actions"
42
-
"image description actions"
43
-
`,
44
-
},
19
+
"--empty-state-image-size": {
20
+
":is([data-empty-state-size=lg])": "240px",
21
+
":is([data-empty-state-size=md])": "180px",
22
+
":is([data-empty-state-size=sm])": "120px",
45
23
},
24
+
gap: "var(--empty-state-gap)",
46
25
alignItems: "center",
47
-
justifyItems: {
48
-
":is([data-empty-state-size=md],[data-empty-state-size=lg])": "center",
49
-
":is([data-empty-state-size=sm])": "start",
50
-
},
26
+
display: "flex",
27
+
flexDirection: "column",
51
28
fontFamily: fontFamily["sans"],
29
+
justifyContent: "center",
52
30
textAlign: "center",
53
-
columnGap: {
54
-
":is([data-empty-state-size=sm])": spacing["4"],
55
-
},
56
-
rowGap: {
57
-
":is([data-empty-state-size=lg])": spacing["6"],
58
-
":is([data-empty-state-size=md])": spacing["4"],
59
-
":is([data-empty-state-size=sm])": spacing["2"],
60
-
},
61
-
"--empty-state-image-size": {
62
-
":is([data-empty-state-size=lg])": spacing["20"],
63
-
":is([data-empty-state-size=md])": spacing["14"],
64
-
":is([data-empty-state-size=sm])": spacing["10"],
65
-
},
66
31
},
67
32
image: {
68
-
gridArea: "image",
69
-
width: "var(--empty-state-image-size)",
70
-
height: "var(--empty-state-image-size)",
71
-
objectFit: "contain",
72
-
display: "flex",
73
33
alignItems: "center",
34
+
display: "flex",
74
35
justifyContent: "center",
36
+
objectFit: "contain",
37
+
height: "var(--empty-state-image-size)",
38
+
width: "var(--empty-state-image-size)",
75
39
},
76
40
title: {
77
-
gridArea: "title",
41
+
margin: 0,
78
42
fontSize: {
79
43
":is([data-empty-state-size='lg'] *)": fontSize["2xl"],
80
44
":is([data-empty-state-size='md'] *)": fontSize["xl"],
81
45
":is([data-empty-state-size='sm'] *)": fontSize["lg"],
82
46
},
83
47
fontWeight: fontWeight["semibold"],
84
-
margin: 0,
85
48
},
86
49
description: {
87
-
gridArea: "description",
50
+
margin: 0,
88
51
fontSize: fontSize["sm"],
89
52
fontWeight: fontWeight["normal"],
90
-
margin: 0,
91
53
maxWidth: {
92
54
":is([data-empty-state-size=lg])": "480px",
93
55
":is([data-empty-state-size=md])": "400px",
···
95
57
},
96
58
},
97
59
actions: {
98
-
gridArea: "actions",
60
+
gap: spacing["2"],
61
+
alignItems: "center",
99
62
display: "flex",
100
63
flexDirection: "row",
101
-
gap: spacing["2"],
102
-
alignItems: "center",
64
+
flexWrap: "wrap",
103
65
justifyContent: "center",
104
-
flexWrap: "wrap",
105
-
106
-
paddingLeft: {
107
-
":is([data-empty-state-size=sm] *)": spacing["4"],
108
-
},
109
66
},
110
67
});
111
68
···
126
83
const size = sizeProp || use(SizeContext);
127
84
128
85
return (
129
-
<div
130
-
{...props}
131
-
data-empty-state-size={size}
132
-
{...stylex.props(styles.emptyState, style)}
133
-
/>
86
+
<SizeContext value={size}>
87
+
<div
88
+
{...props}
89
+
data-empty-state-size={size}
90
+
{...stylex.props(styles.emptyState, style)}
91
+
/>
92
+
</SizeContext>
134
93
);
135
94
};
136
95
···
172
131
extends StyleXComponentProps<React.ComponentProps<"h2">> {}
173
132
174
133
export const EmptyStateTitle = ({ style, ...props }: EmptyStateTitleProps) => {
175
-
return <h2 {...props} {...stylex.props(styles.title, ui.text, style)} />;
134
+
return <div {...props} {...stylex.props(styles.title, ui.text, style)} />;
176
135
};
177
136
178
137
export interface EmptyStateDescriptionProps
···
194
153
style,
195
154
...props
196
155
}: EmptyStateActionsProps) => {
197
-
return (
198
-
<div
199
-
{...props}
200
-
data-empty-state-actions
201
-
{...stylex.props(styles.actions, style)}
202
-
/>
203
-
);
156
+
return <div {...props} {...stylex.props(styles.actions, style)} />;
204
157
};
+1
-1
apps/docs/src/components/file-drop-zone/index.tsx
+1
-1
apps/docs/src/components/file-drop-zone/index.tsx
···
9
9
DropZoneProps,
10
10
} from "react-aria-components";
11
11
12
+
import { primaryColor, uiColor } from "../theme/color.stylex";
12
13
import { radius } from "../theme/radius.stylex";
13
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
14
14
import { spacing } from "../theme/spacing.stylex";
15
15
16
16
async function getFiles(items: DropItem[]): Promise<File[]> {
+1
-1
apps/docs/src/components/form/index.tsx
+1
-1
apps/docs/src/components/form/index.tsx
+1
-1
apps/docs/src/components/hover-card/index.tsx
+1
-1
apps/docs/src/components/hover-card/index.tsx
+1
-1
apps/docs/src/components/kbd/index.tsx
+1
-1
apps/docs/src/components/kbd/index.tsx
···
1
1
import { isMac as getIsMac } from "@react-aria/utils";
2
2
import * as stylex from "@stylexjs/stylex";
3
3
4
+
import { uiColor } from "../theme/color.stylex";
4
5
import { radius } from "../theme/radius.stylex";
5
-
import { uiColor } from "../theme/semantic-color.stylex";
6
6
import { spacing } from "../theme/spacing.stylex";
7
7
import { StyleXComponentProps } from "../theme/types";
8
8
import { fontFamily, fontSize, tracking } from "../theme/typography.stylex";
+4
-4
apps/docs/src/components/label/index.tsx
+4
-4
apps/docs/src/components/label/index.tsx
···
20
20
fontWeight: fontWeight["semibold"],
21
21
22
22
fontSize: {
23
-
":is([data-size=sm])": fontSize["xs"],
24
-
":is([data-size=md])": fontSize["sm"],
25
23
":is([data-size=lg])": fontSize["base"],
24
+
":is([data-size=md])": fontSize["sm"],
25
+
":is([data-size=sm])": fontSize["xs"],
26
26
},
27
27
lineHeight: {
28
-
":is([data-size=sm])": lineHeight["xs"],
29
-
":is([data-size=md])": lineHeight["sm"],
30
28
":is([data-size=lg])": lineHeight["base"],
29
+
":is([data-size=md])": lineHeight["sm"],
30
+
":is([data-size=sm])": lineHeight["xs"],
31
31
},
32
32
},
33
33
description: {
+6
-6
apps/docs/src/components/link/index.tsx
+6
-6
apps/docs/src/components/link/index.tsx
···
5
5
Link as AriaLink,
6
6
} from "react-aria-components";
7
7
8
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
8
+
import { primaryColor, uiColor } from "../theme/color.stylex";
9
9
import { spacing } from "../theme/spacing.stylex";
10
10
import { StyleXComponentProps } from "../theme/types";
11
11
import { fontFamily, fontWeight } from "../theme/typography.stylex";
···
13
13
14
14
const styles = stylex.create({
15
15
link: {
16
+
textDecoration: {
17
+
default: "none",
18
+
":is([data-breadcrumb] *)": "none",
19
+
":is([data-hovered])": "underline",
20
+
},
16
21
color: {
17
22
default: primaryColor.text2,
18
23
":is([data-breadcrumb] *)": uiColor.text1,
···
24
29
},
25
30
fontFamily: fontFamily["sans"],
26
31
fontWeight: fontWeight["normal"],
27
-
textDecoration: {
28
-
default: "none",
29
-
":is([data-hovered])": "underline",
30
-
":is([data-breadcrumb] *)": "none",
31
-
},
32
32
textUnderlineOffset: spacing["1"],
33
33
},
34
34
});
+2
-2
apps/docs/src/components/listbox/index.tsx
+2
-2
apps/docs/src/components/listbox/index.tsx
···
36
36
paddingTop: spacing["1"],
37
37
38
38
height: {
39
-
":is([data-size=sm])": spacing["7"],
40
-
":is([data-size=md])": spacing["7"],
41
39
":is([data-size=lg])": spacing["9"],
40
+
":is([data-size=md])": spacing["7"],
41
+
":is([data-size=sm])": spacing["7"],
42
42
},
43
43
},
44
44
separator: {
+2
-2
apps/docs/src/components/meter/index.tsx
+2
-2
apps/docs/src/components/meter/index.tsx
···
7
7
import { SizeContext } from "../context";
8
8
import { Label } from "../label";
9
9
import { animationDuration } from "../theme/animations.stylex";
10
-
import { radius } from "../theme/radius.stylex";
11
10
import {
12
11
criticalColor,
13
12
primaryColor,
14
13
successColor,
15
14
uiColor,
16
15
warningColor,
17
-
} from "../theme/semantic-color.stylex";
16
+
} from "../theme/color.stylex";
17
+
import { radius } from "../theme/radius.stylex";
18
18
import { spacing } from "../theme/spacing.stylex";
19
19
import { MeterVariant, Size, StyleXComponentProps } from "../theme/types";
20
20
import { fontSize, lineHeight } from "../theme/typography.stylex";
+2
-1
apps/docs/src/components/number-field/index.tsx
+2
-1
apps/docs/src/components/number-field/index.tsx
···
18
18
import { SizeContext } from "../context";
19
19
import { Description, FieldErrorMessage, Label } from "../label";
20
20
import { SuffixIcon } from "../suffix-icon";
21
-
import { ui, uiColor } from "../theme/semantic-color.stylex";
21
+
import { uiColor } from "../theme/color.stylex";
22
+
import { ui } from "../theme/semantic-color.stylex";
22
23
import { spacing } from "../theme/spacing.stylex";
23
24
import {
24
25
InputVariant,
+1
-1
apps/docs/src/components/pagination/index.tsx
+1
-1
apps/docs/src/components/pagination/index.tsx
+5
-5
apps/docs/src/components/popover/index.tsx
+5
-5
apps/docs/src/components/popover/index.tsx
···
10
10
Dialog,
11
11
} from "react-aria-components";
12
12
13
-
import { uiColor } from "../theme/semantic-color.stylex";
13
+
import { uiColor } from "../theme/color.stylex";
14
14
import { spacing } from "../theme/spacing.stylex";
15
15
import { StyleXComponentProps } from "../theme/types";
16
16
import { usePopoverStyles } from "../theme/usePopoverStyles";
···
26
26
},
27
27
content: {
28
28
boxShadow: "none",
29
+
position: "relative",
29
30
paddingBottom: spacing["2"],
30
31
paddingLeft: spacing["2"],
31
32
paddingRight: spacing["2"],
32
33
paddingTop: spacing["2"],
33
-
position: "relative",
34
34
},
35
35
caret: {},
36
36
arrow: {
37
37
backgroundColor: uiColor.bgSubtle,
38
-
height: spacing["2"],
39
38
transform: {
40
39
[":is([data-placement=bottom] *)"]: "rotate(180deg)",
41
-
[":is([data-placement=top] *)"]: "tranuiColorY(-50%) rotate(-45deg)",
42
40
[":is([data-placement=left] *)"]: "rotate(90deg)",
43
41
[":is([data-placement=right] *)"]: "rotate(-90deg)",
42
+
[":is([data-placement=top] *)"]: "tranuiColorY(-50%) rotate(-45deg)",
44
43
},
44
+
zIndex: 0,
45
+
height: spacing["2"],
45
46
width: spacing["2"],
46
-
zIndex: 0,
47
47
},
48
48
});
49
49
interface PopoverProps
+1
-1
apps/docs/src/components/progress-bar/index.tsx
+1
-1
apps/docs/src/components/progress-bar/index.tsx
···
7
7
import { SizeContext } from "../context";
8
8
import { Label } from "../label";
9
9
import { animationDuration } from "../theme/animations.stylex";
10
+
import { primaryColor, uiColor } from "../theme/color.stylex";
10
11
import { radius } from "../theme/radius.stylex";
11
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
12
12
import { spacing } from "../theme/spacing.stylex";
13
13
import { Size, StyleXComponentProps } from "../theme/types";
14
14
import { fontSize, lineHeight } from "../theme/typography.stylex";
+11
-11
apps/docs/src/components/progress-circle/index.tsx
+11
-11
apps/docs/src/components/progress-circle/index.tsx
···
10
10
import { SizeContext } from "../context";
11
11
import { Label } from "../label";
12
12
import { animationDuration } from "../theme/animations.stylex";
13
+
import { primaryColor, uiColor } from "../theme/color.stylex";
13
14
import { radius } from "../theme/radius.stylex";
14
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
15
15
import { spacing } from "../theme/spacing.stylex";
16
16
17
17
const IndeterminateFillAnimation = stylex.keyframes({
···
25
25
26
26
const styles = stylex.create({
27
27
wrapper: {
28
+
gap: spacing["2"],
28
29
alignItems: "center",
29
30
boxSizing: "border-box",
30
31
display: "flex",
31
32
flexDirection: "column",
32
-
gap: spacing["2"],
33
33
},
34
34
circleWrapper: {
35
35
justifyContent: "center",
···
37
37
38
38
"--progress-border-width": spacing["1"],
39
39
"--progress-size": {
40
+
":is([data-size=lg] *)": spacing["10"],
41
+
":is([data-size=md] *)": spacing["8"],
40
42
":is([data-size=sm] *)": spacing["4"],
41
-
":is([data-size=md] *)": spacing["8"],
42
-
":is([data-size=lg] *)": spacing["10"],
43
43
},
44
44
},
45
45
track: {
···
52
52
width: "var(--progress-size)",
53
53
},
54
54
fills: {
55
+
position: "absolute",
55
56
height: "100%",
56
57
left: 0,
57
-
position: "absolute",
58
58
top: 0,
59
59
width: "100%",
60
60
},
61
61
fillMask: {
62
-
boxSizing: "border-box",
63
-
height: "100%",
64
62
overflow: "hidden",
63
+
boxSizing: "border-box",
65
64
position: "absolute",
66
65
transformOrigin: "100%",
66
+
height: "100%",
67
67
width: "50%",
68
68
},
69
69
fillMask1: {
···
73
73
transform: "rotate(180deg)",
74
74
},
75
75
fillSubmask: {
76
+
overflow: "hidden",
76
77
boxSizing: "border-box",
77
-
height: "100%",
78
-
overflow: "hidden",
79
78
transformOrigin: "100%",
80
79
transitionDuration: animationDuration.default,
81
80
transitionProperty: "transform",
82
81
transitionTimingFunction: "linear",
82
+
height: "100%",
83
83
width: "100%",
84
84
},
85
85
fill: {
···
92
92
width: "var(--progress-size)",
93
93
},
94
94
check: {
95
-
left: "50%",
96
95
position: "absolute",
97
-
top: "50%",
98
96
transform: "translate(-50%, -50%)",
97
+
left: "50%",
98
+
top: "50%",
99
99
},
100
100
completed: {
101
101
backgroundColor: primaryColor.solid1,
+1
-1
apps/docs/src/components/range-calendar/index.tsx
+1
-1
apps/docs/src/components/range-calendar/index.tsx
+1
-1
apps/docs/src/components/segmented-control/index.tsx
+1
-1
apps/docs/src/components/segmented-control/index.tsx
···
12
12
13
13
import { SizeContext } from "../context";
14
14
import { animationDuration } from "../theme/animations-duration.stylex";
15
+
import { uiColor } from "../theme/color.stylex";
15
16
import { radius } from "../theme/radius.stylex";
16
-
import { uiColor } from "../theme/semantic-color.stylex";
17
17
import { shadow } from "../theme/shadow.stylex";
18
18
import { spacing } from "../theme/spacing.stylex";
19
19
import { Size, StyleXComponentProps } from "../theme/types";
+3
-3
apps/docs/src/components/separator/index.tsx
+3
-3
apps/docs/src/components/separator/index.tsx
···
4
4
Separator as AriaSeparator,
5
5
} from "react-aria-components";
6
6
7
-
import { uiColor } from "../theme/semantic-color.stylex";
7
+
import { uiColor } from "../theme/color.stylex";
8
8
import { StyleXComponentProps } from "../theme/types";
9
9
10
10
const styles = stylex.create({
11
11
separator: {
12
-
backgroundColor: uiColor.border2,
12
+
margin: 0,
13
13
borderWidth: 0,
14
+
backgroundColor: uiColor.border2,
14
15
height: {
15
16
default: "1px",
16
17
":is([aria-orientation=vertical])": "100%",
17
18
},
18
-
margin: 0,
19
19
width: {
20
20
default: "100%",
21
21
":is([aria-orientation=vertical])": "1px",
+1
-1
apps/docs/src/components/skeleton/index.tsx
+1
-1
apps/docs/src/components/skeleton/index.tsx
···
2
2
3
3
import * as stylex from "@stylexjs/stylex";
4
4
5
+
import { uiColor } from "../theme/color.stylex";
5
6
import { radius } from "../theme/radius.stylex";
6
-
import { uiColor } from "../theme/semantic-color.stylex";
7
7
import { shadow } from "../theme/shadow.stylex";
8
8
import { spacing } from "../theme/spacing.stylex";
9
9
import { Size, StyleXComponentProps } from "../theme/types";
+27
-27
apps/docs/src/components/slider/index.tsx
+27
-27
apps/docs/src/components/slider/index.tsx
···
9
9
} from "react-aria-components";
10
10
11
11
import { Label } from "../label";
12
+
import { primaryColor, uiColor } from "../theme/color.stylex";
12
13
import { radius } from "../theme/radius.stylex";
13
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
14
14
import { shadow } from "../theme/shadow.stylex";
15
15
import { spacing } from "../theme/spacing.stylex";
16
16
import { StyleXComponentProps } from "../theme/types";
···
18
18
19
19
const styles = stylex.create({
20
20
wrapper: {
21
+
gap: {
22
+
":is([data-orientation=vertical])": spacing["2"],
23
+
},
24
+
gridTemplateAreas: "'label value-label' 'track track'",
21
25
alignItems: {
22
26
":is([data-orientation=vertical])": "center",
23
27
},
···
28
32
flexDirection: {
29
33
":is([data-orientation=vertical])": "column",
30
34
},
31
-
gap: {
32
-
":is([data-orientation=vertical])": spacing["2"],
33
-
},
34
-
gridTemplateAreas: "'label value-label' 'track track'",
35
35
},
36
36
track: {
37
+
gridArea: "track",
37
38
flexGrow: {
38
39
":is([data-orientation=vertical] *)": 1,
39
40
},
40
-
gridArea: "track",
41
+
opacity: {
42
+
":is([data-disabled=true] *)": 0.5,
43
+
},
44
+
position: "relative",
41
45
height: {
42
46
":is([data-orientation=horizontal] *)": spacing["8"],
43
47
":is([data-orientation=horizontal] *)::before": spacing["1"],
44
48
":is([data-orientation=vertical] *)": "100%",
45
49
":is([data-orientation=vertical] *)::before": "100%",
46
50
},
47
-
opacity: {
48
-
":is([data-disabled=true] *)": 0.5,
49
-
},
50
-
position: "relative",
51
51
width: {
52
52
":is([data-orientation=horizontal] *)": "100%",
53
53
":is([data-orientation=horizontal] *)::before": "100%",
···
55
55
":is([data-orientation=vertical] *)::before": spacing["1"],
56
56
},
57
57
58
+
transform: {
59
+
":is([data-orientation=horizontal] *)::before": "translateY(-50%)",
60
+
":is([data-orientation=vertical] *)::before": "translateX(-50%)",
61
+
},
58
62
bottom: {
59
63
":is([data-orientation=vertical] *)::before": 0,
60
64
},
···
69
73
":is([data-orientation=horizontal] *)::before": "50%",
70
74
":is([data-orientation=vertical] *)::before": 0,
71
75
},
72
-
transform: {
73
-
":is([data-orientation=horizontal] *)::before": "translateY(-50%)",
74
-
":is([data-orientation=vertical] *)::before": "translateX(-50%)",
75
-
},
76
76
"::before": {
77
+
borderRadius: radius.full,
77
78
backgroundColor: uiColor.border1,
78
-
borderRadius: radius.full,
79
79
content: "''",
80
80
position: "absolute",
81
81
},
82
82
},
83
83
thumb: {
84
-
backgroundColor: {
85
-
default: uiColor.component1,
86
-
":hover": uiColor.component2,
87
-
":is([data-dragging=true]):is([data-dragging=true])": uiColor.component3,
88
-
},
89
84
borderColor: uiColor.border1,
90
85
borderRadius: radius.full,
91
86
borderStyle: "solid",
92
87
borderWidth: 1,
88
+
backgroundColor: {
89
+
default: uiColor.component1,
90
+
":is([data-dragging=true]):is([data-dragging=true])": uiColor.component3,
91
+
":hover": uiColor.component2,
92
+
},
93
93
boxShadow: shadow.md,
94
94
content: "''",
95
95
forcedColorAdjust: "none",
···
103
103
width: spacing["4"],
104
104
},
105
105
trackInner: {
106
+
borderRadius: radius.full,
106
107
backgroundColor: {
107
108
default: primaryColor.solid1,
108
109
":is([data-disabled=true] *)": uiColor.border3,
109
110
},
110
-
borderRadius: radius.full,
111
+
position: "absolute",
112
+
transform: {
113
+
":is([data-orientation=horizontal] *)": "translateY(-50%)",
114
+
":is([data-orientation=vertical] *)": "translateX(-50%)",
115
+
},
111
116
height: {
112
117
":is([data-orientation=horizontal] *)": spacing["1"],
113
118
":is([data-orientation=vertical] *)": "100%",
···
115
120
left: {
116
121
":is([data-orientation=vertical] *)": "50%",
117
122
},
118
-
position: "absolute",
119
123
top: {
120
124
":is([data-orientation=horizontal] *)": "50%",
121
-
},
122
-
transform: {
123
-
":is([data-orientation=horizontal] *)": "translateY(-50%)",
124
-
":is([data-orientation=vertical] *)": "translateX(-50%)",
125
125
},
126
126
width: {
127
127
":is([data-orientation=horizontal] *)": "100%",
···
163
163
},
164
164
},
165
165
valueLabel: {
166
+
gridArea: "value-label",
166
167
color: uiColor.text1,
167
168
fontSize: fontSize["sm"],
168
169
fontVariantNumeric: "tabular-nums",
169
-
gridArea: "value-label",
170
170
justifySelf: "flex-end",
171
171
lineHeight: lineHeight["sm"],
172
172
},
+1
-1
apps/docs/src/components/switch/index.tsx
+1
-1
apps/docs/src/components/switch/index.tsx
···
5
5
} from "react-aria-components";
6
6
7
7
import { animationDuration } from "../theme/animations.stylex";
8
+
import { primaryColor, uiColor } from "../theme/color.stylex";
8
9
import { radius } from "../theme/radius.stylex";
9
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
10
10
import { shadow } from "../theme/shadow.stylex";
11
11
import { spacing } from "../theme/spacing.stylex";
12
12
import { StyleXComponentProps } from "../theme/types";
+21
-21
apps/docs/src/components/table/index.tsx
+21
-21
apps/docs/src/components/table/index.tsx
···
25
25
import { SizeContext } from "../context";
26
26
import { Flex } from "../flex";
27
27
import { IconButton } from "../icon-button";
28
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
28
+
import { primaryColor, uiColor } from "../theme/color.stylex";
29
29
import { spacing } from "../theme/spacing.stylex";
30
30
import { Size, StyleXComponentProps } from "../theme/types";
31
31
import { LabelText } from "../typography";
···
42
42
},
43
43
},
44
44
column: {
45
+
padding: 0,
45
46
borderBottomColor: uiColor.border2,
46
47
borderBottomStyle: "solid",
47
48
borderBottomWidth: 1,
48
-
padding: 0,
49
49
},
50
50
columnHeader: {
51
51
alignItems: "center",
···
59
59
},
60
60
tableBody: {},
61
61
cell: {
62
+
overflow: "auto",
62
63
borderBottomColor: uiColor.border2,
63
64
borderBottomStyle: "solid",
64
65
borderBottomWidth: {
65
66
default: 1,
66
67
":is([role=row]:last-child *)": 0,
67
68
},
68
-
overflow: "auto",
69
69
},
70
70
cellContent: {
71
71
boxSizing: "border-box",
72
+
opacity: {
73
+
default: 1,
74
+
":is([aria-disabled=true] *)": 0.5,
75
+
},
76
+
textAlign: "left",
72
77
minHeight: {
73
78
default: spacing["8"],
74
-
":is([data-table-size=md] *)": spacing["10"],
75
79
":is([data-table-size=lg] *)": spacing["12"],
76
-
},
77
-
opacity: {
78
-
default: 1,
79
-
":is([aria-disabled=true] *)": 0.5,
80
+
":is([data-table-size=md] *)": spacing["10"],
80
81
},
81
82
paddingBottom: {
82
83
default: spacing["1"],
83
-
":is([data-table-size=md] *)": spacing["2"],
84
84
":is([data-table-size=lg] *)": spacing["3"],
85
+
":is([data-table-size=md] *)": spacing["2"],
85
86
},
86
87
paddingLeft: {
87
88
default: spacing["2"],
88
-
":is([data-table-size=md] *:not(:first-child))": spacing["3"],
89
89
":is([data-table-size=lg] *:not(:first-child))": spacing["4"],
90
+
":is([data-table-size=md] *:not(:first-child))": spacing["3"],
90
91
},
91
92
paddingRight: {
92
93
default: spacing["2"],
93
-
":is([data-table-size=md] *:not(:last-child))": spacing["3"],
94
94
":is([data-table-size=lg] *:not(:last-child))": spacing["4"],
95
+
":is([data-table-size=md] *:not(:last-child))": spacing["3"],
95
96
},
96
97
paddingTop: {
97
98
default: spacing["1"],
99
+
":is([data-table-size=lg] *)": spacing["3"],
98
100
":is([data-table-size=md] *)": spacing["2"],
99
-
":is([data-table-size=lg] *)": spacing["3"],
100
101
},
101
-
textAlign: "left",
102
102
},
103
103
textEllipsis: {
104
104
overflow: "hidden",
···
115
115
flexBasis: "auto",
116
116
flexGrow: 0,
117
117
flexShrink: 0,
118
+
position: "relative",
119
+
touchAction: "none",
118
120
marginBottom: {
119
121
default: `calc(${spacing["1"]} * -1)`,
122
+
":is([data-table-size=lg] *)": `calc(${spacing["3"]} * -1)`,
120
123
":is([data-table-size=md] *)": `calc(${spacing["2"]} * -1)`,
121
-
":is([data-table-size=lg] *)": `calc(${spacing["3"]} * -1)`,
122
124
},
123
125
marginTop: {
124
126
default: `calc(${spacing["1"]} * -1)`,
125
-
":is([data-table-size=md] *)": `calc(${spacing["2"]} * -1)`,
126
127
":is([data-table-size=lg] *)": `calc(${spacing["3"]} * -1)`,
128
+
":is([data-table-size=md] *)": `calc(${spacing["2"]} * -1)`,
127
129
},
128
130
minHeight: {
129
131
default: spacing["8"],
130
-
":is([data-table-size=md] *)": spacing["10"],
131
132
":is([data-table-size=lg] *)": spacing["12"],
133
+
":is([data-table-size=md] *)": spacing["10"],
132
134
},
133
-
position: "relative",
134
-
touchAction: "none",
135
135
width: spacing["3"],
136
136
},
137
137
resizerLine: {
···
140
140
":is([data-hovered=true] *)": uiColor.border2,
141
141
":is([data-resizing=true] *)": uiColor.border3,
142
142
},
143
-
bottom: 0,
144
143
display: "block",
144
+
position: "absolute",
145
+
transform: "translateX(-50%)",
146
+
bottom: 0,
145
147
left: "50%",
146
-
position: "absolute",
147
148
top: 0,
148
-
transform: "translateX(-50%)",
149
149
width: spacing["0.5"],
150
150
},
151
151
dropIndicator: {
+1
-1
apps/docs/src/components/tabs/index.tsx
+1
-1
apps/docs/src/components/tabs/index.tsx
···
16
16
17
17
import { SizeContext } from "../context";
18
18
import { animationDuration } from "../theme/animations.stylex";
19
+
import { primaryColor, uiColor } from "../theme/color.stylex";
19
20
import { radius } from "../theme/radius.stylex";
20
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
21
21
import { spacing } from "../theme/spacing.stylex";
22
22
import { Size, StyleXComponentProps } from "../theme/types";
23
23
import { fontFamily, fontSize } from "../theme/typography.stylex";
+1
-1
apps/docs/src/components/tag-group/index.tsx
+1
-1
apps/docs/src/components/tag-group/index.tsx
···
12
12
13
13
import { Description, ErrorMessage, Label } from "../label";
14
14
import { animationDuration } from "../theme/animations.stylex";
15
+
import { primaryColor, uiColor } from "../theme/color.stylex";
15
16
import { radius } from "../theme/radius.stylex";
16
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
17
17
import { spacing } from "../theme/spacing.stylex";
18
18
import { StyleXComponentProps } from "../theme/types";
19
19
import { typeramp } from "../theme/typography.stylex";
+2
-1
apps/docs/src/components/text-area/index.tsx
+2
-1
apps/docs/src/components/text-area/index.tsx
···
11
11
12
12
import { SizeContext } from "../context";
13
13
import { Description, FieldErrorMessage, Label } from "../label";
14
+
import { uiColor } from "../theme/color.stylex";
14
15
import { radius } from "../theme/radius.stylex";
15
-
import { ui, uiColor } from "../theme/semantic-color.stylex";
16
+
import { ui } from "../theme/semantic-color.stylex";
16
17
import { spacing } from "../theme/spacing.stylex";
17
18
import { Size, StyleXComponentProps } from "../theme/types";
18
19
import { lineHeight, fontSize, fontFamily } from "../theme/typography.stylex";
+103
apps/docs/src/components/theme/color.stylex.tsx
+103
apps/docs/src/components/theme/color.stylex.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
3
+
import { green } from "./colors/green.stylex";
4
+
import { orange } from "./colors/orange.stylex";
5
+
import { red } from "./colors/red.stylex";
6
+
import { slate, slateInverted } from "./colors/slate.stylex";
7
+
import { yellow } from "./colors/yellow.stylex";
8
+
9
+
export const uiColor = stylex.defineVars({
10
+
bg: slate.bg,
11
+
bgSubtle: slate.bgSubtle,
12
+
component1: slate.component1,
13
+
component2: slate.component2,
14
+
component3: slate.component3,
15
+
border1: slate.border1,
16
+
border2: slate.border2,
17
+
border3: slate.border3,
18
+
solid1: slate.solid1,
19
+
solid2: slate.solid2,
20
+
text1: slate.text1,
21
+
text2: slate.text2,
22
+
textContrast: "white",
23
+
});
24
+
25
+
export const uiInverted = stylex.defineVars({
26
+
bg: slateInverted.bg,
27
+
bgSubtle: slateInverted.bgSubtle,
28
+
component1: slateInverted.component1,
29
+
component2: slateInverted.component2,
30
+
component3: slateInverted.component3,
31
+
border1: slateInverted.border1,
32
+
border2: slateInverted.border2,
33
+
border3: slateInverted.border3,
34
+
solid1: slateInverted.solid1,
35
+
solid2: slateInverted.solid2,
36
+
text1: slateInverted.text1,
37
+
text2: slateInverted.text2,
38
+
textContrast: "white",
39
+
});
40
+
41
+
export const primaryColor = stylex.defineVars({
42
+
bg: orange.bg,
43
+
bgSubtle: orange.bgSubtle,
44
+
component1: orange.component1,
45
+
component2: orange.component2,
46
+
component3: orange.component3,
47
+
border1: orange.border1,
48
+
border2: orange.border2,
49
+
border3: orange.border3,
50
+
solid1: orange.solid1,
51
+
solid2: orange.solid2,
52
+
text1: orange.text1,
53
+
text2: orange.text2,
54
+
textContrast: "white",
55
+
});
56
+
57
+
export const criticalColor = stylex.defineVars({
58
+
bg: red.bg,
59
+
bgSubtle: red.bgSubtle,
60
+
component1: red.component1,
61
+
component2: red.component2,
62
+
component3: red.component3,
63
+
border1: red.border1,
64
+
border2: red.border2,
65
+
border3: red.border3,
66
+
solid1: red.solid1,
67
+
solid2: red.solid2,
68
+
text1: red.text1,
69
+
text2: red.text2,
70
+
textContrast: "white",
71
+
});
72
+
73
+
export const warningColor = stylex.defineVars({
74
+
bg: yellow.bg,
75
+
bgSubtle: yellow.bgSubtle,
76
+
component1: yellow.component1,
77
+
component2: yellow.component2,
78
+
component3: yellow.component3,
79
+
border1: yellow.border1,
80
+
border2: yellow.border2,
81
+
border3: yellow.border3,
82
+
solid1: yellow.solid1,
83
+
solid2: yellow.solid2,
84
+
text1: yellow.text1,
85
+
text2: yellow.text2,
86
+
textContrast: "black",
87
+
});
88
+
89
+
export const successColor = stylex.defineVars({
90
+
bg: green.bg,
91
+
bgSubtle: green.bgSubtle,
92
+
component1: green.component1,
93
+
component2: green.component2,
94
+
component3: green.component3,
95
+
border1: green.border1,
96
+
border2: green.border2,
97
+
border3: green.border3,
98
+
solid1: green.solid1,
99
+
solid2: green.solid2,
100
+
text1: green.text1,
101
+
text2: green.text2,
102
+
textContrast: "white",
103
+
});
+32
-130
apps/docs/src/components/theme/semantic-color.stylex.tsx
+32
-130
apps/docs/src/components/theme/semantic-color.stylex.tsx
···
1
-
/* eslint-disable @stylexjs/valid-styles */
2
-
3
1
import * as stylex from "@stylexjs/stylex";
4
2
3
+
import { animationDuration } from "./animations-duration.stylex";
4
+
import {
5
+
criticalColor,
6
+
primaryColor,
7
+
successColor,
8
+
uiColor,
9
+
warningColor,
10
+
} from "./color.stylex";
5
11
import { green } from "./colors/green.stylex";
6
-
import { orange } from "./colors/orange.stylex";
7
12
import { red } from "./colors/red.stylex";
8
-
import { slate, slateInverted } from "./colors/slate.stylex";
9
13
import { yellow } from "./colors/yellow.stylex";
10
14
import { fontFamily } from "./typography.stylex";
11
15
12
-
export const uiColor = stylex.defineVars({
13
-
bg: slate.bg,
14
-
bgSubtle: slate.bgSubtle,
15
-
component1: slate.component1,
16
-
component2: slate.component2,
17
-
component3: slate.component3,
18
-
border1: slate.border1,
19
-
border2: slate.border2,
20
-
border3: slate.border3,
21
-
solid1: slate.solid1,
22
-
solid2: slate.solid2,
23
-
text1: slate.text1,
24
-
text2: slate.text2,
25
-
textContrast: "white",
26
-
});
27
-
28
-
export const uiInverted = stylex.defineVars({
29
-
bg: slateInverted.bg,
30
-
bgSubtle: slateInverted.bgSubtle,
31
-
component1: slateInverted.component1,
32
-
component2: slateInverted.component2,
33
-
component3: slateInverted.component3,
34
-
border1: slateInverted.border1,
35
-
border2: slateInverted.border2,
36
-
border3: slateInverted.border3,
37
-
solid1: slateInverted.solid1,
38
-
solid2: slateInverted.solid2,
39
-
text1: slateInverted.text1,
40
-
text2: slateInverted.text2,
41
-
textContrast: "white",
42
-
});
43
-
44
16
// eslint-disable-next-line @stylexjs/enforce-extension
45
17
export const ui = stylex.create({
46
18
bg: { backgroundColor: uiColor.bg },
···
66
38
borderStyle: "solid",
67
39
borderWidth: 1,
68
40
69
-
transitionDuration: "100ms",
41
+
transitionDuration: animationDuration.fast,
70
42
transitionProperty: "background-color, border-color",
71
43
transitionTimingFunction: "ease-in-out",
72
44
},
···
83
55
":is(:active,[data-pressed=true]):not(:disabled)": uiColor.component3,
84
56
":disabled": "transparent",
85
57
},
86
-
transitionDuration: "100ms",
58
+
transitionDuration: animationDuration.fast,
87
59
transitionProperty: "background-color, border-color",
88
60
transitionTimingFunction: "ease-in-out",
89
61
},
···
94
66
":is(:active,[data-pressed=true]):not(:disabled)": uiColor.component3,
95
67
":disabled": uiColor.component1,
96
68
},
97
-
transitionDuration: "100ms",
69
+
transitionDuration: animationDuration.fast,
98
70
transitionProperty: "background-color, border-color",
99
71
transitionTimingFunction: "ease-in-out",
100
72
},
···
105
77
":is(:active,[data-pressed=true]):not(:disabled)": uiColor.component3,
106
78
":disabled": uiColor.component1,
107
79
},
108
-
transitionDuration: "100ms",
80
+
transitionDuration: animationDuration.fast,
109
81
transitionProperty: "background-color, border-color",
110
82
transitionTimingFunction: "ease-in-out",
111
83
},
···
115
87
":hover:not(:has(* button:hover)):not(:disabled)": uiColor.solid2,
116
88
":disabled": uiColor.component1,
117
89
},
118
-
transitionDuration: "100ms",
90
+
transitionDuration: animationDuration.fast,
119
91
transitionProperty: "background-color, border-color",
120
92
transitionTimingFunction: "ease-in-out",
121
93
},
122
94
});
123
95
124
96
// eslint-disable-next-line @stylexjs/enforce-extension
125
-
export const primaryColor = stylex.defineVars({
126
-
bg: orange.bg,
127
-
bgSubtle: orange.bgSubtle,
128
-
component1: orange.component1,
129
-
component2: orange.component2,
130
-
component3: orange.component3,
131
-
border1: orange.border1,
132
-
border2: orange.border2,
133
-
border3: orange.border3,
134
-
solid1: orange.solid1,
135
-
solid2: orange.solid2,
136
-
text1: orange.text1,
137
-
text2: orange.text2,
138
-
textContrast: "white",
139
-
});
140
-
141
-
// eslint-disable-next-line @stylexjs/enforce-extension
142
97
export const primary = stylex.create({
143
98
bg: { backgroundColor: primaryColor.bg },
144
99
bgSubtle: { backgroundColor: primaryColor.bgSubtle },
···
163
118
borderStyle: "solid",
164
119
borderWidth: 1,
165
120
166
-
transitionDuration: "100ms",
121
+
transitionDuration: animationDuration.fast,
167
122
transitionProperty: "background-color, border-color",
168
123
transitionTimingFunction: "ease-in-out",
169
124
},
···
182
137
primaryColor.component3,
183
138
":disabled": primaryColor.component1,
184
139
},
185
-
transitionDuration: "100ms",
140
+
transitionDuration: animationDuration.fast,
186
141
transitionProperty: "background-color, border-color",
187
142
transitionTimingFunction: "ease-in-out",
188
143
},
···
194
149
":is(:active,[data-pressed=true])": primaryColor.component3,
195
150
":disabled": primaryColor.component1,
196
151
},
197
-
transitionDuration: "100ms",
152
+
transitionDuration: animationDuration.fast,
198
153
transitionProperty: "background-color, border-color",
199
154
transitionTimingFunction: "ease-in-out",
200
155
},
···
207
162
primaryColor.component3,
208
163
":disabled": primaryColor.component1,
209
164
},
210
-
transitionDuration: "100ms",
165
+
transitionDuration: animationDuration.fast,
211
166
transitionProperty: "background-color, border-color",
212
167
transitionTimingFunction: "ease-in-out",
213
168
},
···
217
172
":hover:not(:has(* button:hover)):not(:disabled)": primaryColor.solid2,
218
173
":disabled": primaryColor.component1,
219
174
},
220
-
transitionDuration: "100ms",
175
+
transitionDuration: animationDuration.fast,
221
176
transitionProperty: "background-color, border-color",
222
177
transitionTimingFunction: "ease-in-out",
223
178
},
224
179
});
225
180
226
181
// eslint-disable-next-line @stylexjs/enforce-extension
227
-
export const criticalColor = stylex.defineVars({
228
-
bg: red.bg,
229
-
bgSubtle: red.bgSubtle,
230
-
component1: red.component1,
231
-
component2: red.component2,
232
-
component3: red.component3,
233
-
border1: red.border1,
234
-
border2: red.border2,
235
-
border3: red.border3,
236
-
solid1: red.solid1,
237
-
solid2: red.solid2,
238
-
text1: red.text1,
239
-
text2: red.text2,
240
-
textContrast: "white",
241
-
});
242
-
243
-
// eslint-disable-next-line @stylexjs/enforce-extension
244
182
export const critical = stylex.create({
245
183
bg: { backgroundColor: criticalColor.bg },
246
184
bgSubtle: { backgroundColor: criticalColor.bgSubtle },
···
264
202
},
265
203
borderStyle: "solid",
266
204
borderWidth: 1,
267
-
transitionDuration: "100ms",
205
+
transitionDuration: animationDuration.fast,
268
206
transitionProperty: "background-color, border-color",
269
207
transitionTimingFunction: "ease-in-out",
270
208
},
···
283
221
criticalColor.component3,
284
222
":disabled": criticalColor.component1,
285
223
},
286
-
transitionDuration: "100ms",
224
+
transitionDuration: animationDuration.fast,
287
225
transitionProperty: "background-color, border-color",
288
226
transitionTimingFunction: "ease-in-out",
289
227
},
···
296
234
criticalColor.component3,
297
235
":disabled": criticalColor.component1,
298
236
},
299
-
transitionDuration: "100ms",
237
+
transitionDuration: animationDuration.fast,
300
238
transitionProperty: "background-color, border-color",
301
239
transitionTimingFunction: "ease-in-out",
302
240
},
···
309
247
criticalColor.component3,
310
248
":disabled": criticalColor.component1,
311
249
},
312
-
transitionDuration: "100ms",
250
+
transitionDuration: animationDuration.fast,
313
251
transitionProperty: "background-color, border-color",
314
252
transitionTimingFunction: "ease-in-out",
315
253
},
···
319
257
":hover:not(:has(* button:hover)):not(:disabled)": criticalColor.solid2,
320
258
":disabled": criticalColor.component1,
321
259
},
322
-
transitionDuration: "100ms",
260
+
transitionDuration: animationDuration.fast,
323
261
transitionProperty: "background-color, border-color",
324
262
transitionTimingFunction: "ease-in-out",
325
263
},
326
264
});
327
265
328
266
// eslint-disable-next-line @stylexjs/enforce-extension
329
-
export const warningColor = stylex.defineVars({
330
-
bg: yellow.bg,
331
-
bgSubtle: yellow.bgSubtle,
332
-
component1: yellow.component1,
333
-
component2: yellow.component2,
334
-
component3: yellow.component3,
335
-
border1: yellow.border1,
336
-
border2: yellow.border2,
337
-
border3: yellow.border3,
338
-
solid1: yellow.solid1,
339
-
solid2: yellow.solid2,
340
-
text1: yellow.text1,
341
-
text2: yellow.text2,
342
-
textContrast: "black",
343
-
});
344
-
345
-
// eslint-disable-next-line @stylexjs/enforce-extension
346
267
export const warning = stylex.create({
347
268
bg: { backgroundColor: warningColor.bg },
348
269
bgSubtle: { backgroundColor: warningColor.bgSubtle },
···
380
301
warningColor.component3,
381
302
":disabled": warningColor.component1,
382
303
},
383
-
transitionDuration: "100ms",
304
+
transitionDuration: animationDuration.fast,
384
305
transitionProperty: "background-color, border-color",
385
306
transitionTimingFunction: "ease-in-out",
386
307
},
···
392
313
":is(:active,[data-pressed=true]):not(:disabled)": yellow.component3,
393
314
":disabled": warningColor.component1,
394
315
},
395
-
transitionDuration: "100ms",
316
+
transitionDuration: animationDuration.fast,
396
317
transitionProperty: "background-color, border-color",
397
318
transitionTimingFunction: "ease-in-out",
398
319
},
···
405
326
warningColor.component3,
406
327
":disabled": warningColor.component1,
407
328
},
408
-
transitionDuration: "100ms",
329
+
transitionDuration: animationDuration.fast,
409
330
transitionProperty: "background-color, border-color",
410
331
transitionTimingFunction: "ease-in-out",
411
332
},
···
415
336
":hover:not(:has(* button:hover)):not(:disabled)": warningColor.solid2,
416
337
":disabled": warningColor.component1,
417
338
},
418
-
transitionDuration: "100ms",
339
+
transitionDuration: animationDuration.fast,
419
340
transitionProperty: "background-color, border-color",
420
341
transitionTimingFunction: "ease-in-out",
421
342
},
422
343
});
423
344
424
345
// eslint-disable-next-line @stylexjs/enforce-extension
425
-
export const successColor = stylex.defineVars({
426
-
bg: green.bg,
427
-
bgSubtle: green.bgSubtle,
428
-
component1: green.component1,
429
-
component2: green.component2,
430
-
component3: green.component3,
431
-
border1: green.border1,
432
-
border2: green.border2,
433
-
border3: green.border3,
434
-
solid1: green.solid1,
435
-
solid2: green.solid2,
436
-
text1: green.text1,
437
-
text2: green.text2,
438
-
textContrast: "white",
439
-
});
440
-
441
-
// eslint-disable-next-line @stylexjs/enforce-extension
442
346
export const success = stylex.create({
443
347
bg: { backgroundColor: successColor.bg },
444
348
bgSubtle: { backgroundColor: successColor.bgSubtle },
···
462
366
},
463
367
borderStyle: "solid",
464
368
borderWidth: 1,
465
-
transitionDuration: "100ms",
369
+
transitionDuration: animationDuration.fast,
466
370
transitionProperty: "background-color, border-color",
467
371
transitionTimingFunction: "ease-in-out",
468
372
},
···
481
385
successColor.component3,
482
386
":disabled": successColor.component1,
483
387
},
484
-
transitionDuration: "100ms",
388
+
transitionDuration: animationDuration.fast,
485
389
transitionProperty: "background-color, border-color",
486
390
transitionTimingFunction: "ease-in-out",
487
391
},
···
494
398
successColor.component3,
495
399
":disabled": successColor.component1,
496
400
},
497
-
transitionDuration: "100ms",
401
+
transitionDuration: animationDuration.fast,
498
402
transitionProperty: "background-color, border-color",
499
403
transitionTimingFunction: "ease-in-out",
500
404
},
···
507
411
successColor.component3,
508
412
":disabled": successColor.component1,
509
413
},
510
-
transitionDuration: "100ms",
414
+
transitionDuration: animationDuration.fast,
511
415
transitionProperty: "background-color, border-color",
512
416
transitionTimingFunction: "ease-in-out",
513
417
},
···
517
421
":hover:not(:has(* button:hover)):not(:disabled)": successColor.solid2,
518
422
":disabled": successColor.component1,
519
423
},
520
-
transitionDuration: "100ms",
424
+
transitionDuration: animationDuration.fast,
521
425
transitionProperty: "background-color, border-color",
522
426
transitionTimingFunction: "ease-in-out",
523
427
},
524
428
});
525
-
526
-
/* eslint-enable @stylexjs/valid-styles */
+2
-1
apps/docs/src/components/theme/useButtonStyles.ts
+2
-1
apps/docs/src/components/theme/useButtonStyles.ts
···
7
7
import { SizeContext } from "../context";
8
8
import { Size, ButtonVariant } from "../theme/types";
9
9
import { animationDuration } from "./animations.stylex";
10
+
import { uiColor } from "./color.stylex";
10
11
import { radius } from "./radius.stylex";
11
-
import { critical, ui, primary, uiColor } from "./semantic-color.stylex";
12
+
import { critical, ui, primary } from "./semantic-color.stylex";
12
13
import { shadow } from "./shadow.stylex";
13
14
import { spacing } from "./spacing.stylex";
14
15
import {
+1
-1
apps/docs/src/components/theme/useCalendarStyles.ts
+1
-1
apps/docs/src/components/theme/useCalendarStyles.ts
···
8
8
import type { StyleXComponentProps } from "../theme/types";
9
9
10
10
import { animationDuration } from "../theme/animations.stylex";
11
+
import { primaryColor, uiColor } from "../theme/color.stylex";
11
12
import { radius } from "../theme/radius.stylex";
12
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
13
13
import { spacing } from "../theme/spacing.stylex";
14
14
import { fontSize, fontWeight } from "./typography.stylex";
15
15
+3
-3
apps/docs/src/components/theme/useInputStyles.ts
+3
-3
apps/docs/src/components/theme/useInputStyles.ts
···
4
4
import { SizeContext } from "../context";
5
5
import { InputValidationState, InputVariant, Size } from "../theme/types";
6
6
import { animationDuration } from "./animations-duration.stylex";
7
-
import { radius } from "./radius.stylex";
8
7
import {
9
8
criticalColor,
10
9
successColor,
11
-
ui,
12
10
uiColor,
13
11
warningColor,
14
-
} from "./semantic-color.stylex";
12
+
} from "./color.stylex";
13
+
import { radius } from "./radius.stylex";
14
+
import { ui } from "./semantic-color.stylex";
15
15
import { spacing } from "./spacing.stylex";
16
16
import { lineHeight, fontSize } from "./typography.stylex";
17
17
+2
-2
apps/docs/src/components/theme/useListBoxItemStyles.ts
+2
-2
apps/docs/src/components/theme/useListBoxItemStyles.ts
···
11
11
typeramp,
12
12
} from "../theme/typography.stylex";
13
13
import { animationDuration } from "./animations.stylex";
14
-
import { criticalColor, primaryColor, uiColor } from "./semantic-color.stylex";
14
+
import { criticalColor, primaryColor, uiColor } from "./color.stylex";
15
15
16
16
const styles = stylex.create({
17
17
item: {
···
89
89
marginTop: `calc(${spacing["2"]} * -1)`,
90
90
minWidth: spacing["4"],
91
91
92
-
// eslint-disable-next-line @stylexjs/valid-styles
92
+
// eslint-disable-next-line @stylexjs/valid-styles, @stylexjs/no-legacy-contextual-styles
93
93
":is(*) svg": {
94
94
flexShrink: 0,
95
95
pointerEvents: "none",
+26
-25
apps/docs/src/components/toast/Toast.tsx
+26
-25
apps/docs/src/components/toast/Toast.tsx
···
11
11
QueuedToast,
12
12
} from "react-aria-components";
13
13
14
+
import { Button } from "../button";
14
15
import { IconButton } from "../icon-button";
15
16
import {
16
17
criticalColor,
17
18
successColor,
18
19
uiColor,
19
20
warningColor,
20
-
} from "../theme/semantic-color.stylex";
21
+
} from "../theme/color.stylex";
21
22
import { spacing } from "../theme/spacing.stylex";
22
23
import { StyleXComponentProps } from "../theme/types";
23
24
import { lineHeight, typeramp } from "../theme/typography.stylex";
25
+
import { usePopoverStyles } from "../theme/usePopoverStyles";
24
26
import { toasts, ToastContentType } from "./queue";
25
-
import { usePopoverStyles } from "../theme/usePopoverStyles";
26
-
import { Button } from "../button";
27
27
28
28
const styles = stylex.create({
29
29
region: {
30
-
bottom: spacing["4"],
30
+
gap: spacing["2"],
31
+
outline: "none",
31
32
display: "flex",
32
33
flexDirection: "column-reverse",
33
-
gap: spacing["2"],
34
-
outline: "none",
35
34
position: "fixed",
36
-
right: spacing["4"],
37
35
zIndex: 9999,
36
+
bottom: spacing["4"],
37
+
right: spacing["4"],
38
38
},
39
39
toast: {
40
+
gap: spacing["4"],
41
+
alignItems: "center",
40
42
display: "flex",
41
43
flexDirection: "row",
42
-
alignItems: "center",
43
44
justifyContent: "space-between",
44
-
gap: spacing["4"],
45
+
minWidth: spacing["60"],
46
+
paddingBottom: spacing["3"],
45
47
paddingLeft: spacing["4"],
46
48
paddingRight: spacing["4"],
47
49
paddingTop: spacing["3"],
48
-
paddingBottom: spacing["3"],
49
-
minWidth: spacing["60"],
50
50
},
51
51
content: {
52
-
display: "flex",
53
52
flex: "1 1 auto",
53
+
gap: spacing["2.5"],
54
+
display: "flex",
54
55
flexDirection: "column",
55
-
gap: spacing["2.5"],
56
56
minWidth: 0,
57
57
},
58
58
title: {
59
-
fontWeight: 600,
60
-
lineHeight: lineHeight["none"],
61
59
color: {
62
60
default: uiColor.text1,
63
61
":is([data-variant=critical] *)": criticalColor.textContrast,
64
62
":is([data-variant=success] *)": successColor.textContrast,
65
63
":is([data-variant=warning] *)": warningColor.text2,
66
64
},
65
+
fontWeight: 600,
66
+
lineHeight: lineHeight["none"],
67
67
},
68
68
description: {
69
69
color: {
···
74
74
},
75
75
},
76
76
icon: {
77
+
alignItems: "center",
77
78
display: "flex",
78
-
alignItems: "center",
79
+
flexShrink: 0,
79
80
justifyContent: "center",
80
-
flexShrink: 0,
81
81
82
+
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
82
83
":is(*) svg": {
83
-
flexShrink: 0,
84
-
height: spacing["4"],
85
-
pointerEvents: "none",
86
-
width: spacing["4"],
87
84
color: {
88
85
":is([data-variant=critical] *)": criticalColor.solid1,
89
86
":is([data-variant=success] *)": successColor.solid1,
90
87
":is([data-variant=warning] *)": warningColor.solid1,
91
88
},
89
+
flexShrink: 0,
90
+
pointerEvents: "none",
91
+
height: spacing["4"],
92
+
width: spacing["4"],
92
93
},
93
94
},
94
95
critical: {
95
-
backgroundColor: criticalColor.component1,
96
96
borderColor: criticalColor.border2,
97
+
backgroundColor: criticalColor.component1,
97
98
color: criticalColor.text2,
98
99
},
99
100
success: {
100
-
backgroundColor: successColor.component1,
101
101
borderColor: successColor.border2,
102
+
backgroundColor: successColor.component1,
102
103
color: successColor.text2,
103
104
},
104
105
warning: {
105
-
backgroundColor: warningColor.component1,
106
106
borderColor: warningColor.border2,
107
+
backgroundColor: warningColor.component1,
107
108
color: warningColor.text2,
108
109
},
109
110
});
···
123
124
toast.content.variant === "warning" && styles.warning,
124
125
)}
125
126
>
126
-
{toast.content.icon && (
127
+
{Boolean(toast.content.icon) && (
127
128
<div {...stylex.props(styles.icon)}>{toast.content.icon}</div>
128
129
)}
129
130
<ToastContent {...stylex.props(styles.content)}>
+2
apps/docs/src/components/toast/queue.ts
+2
apps/docs/src/components/toast/queue.ts
···
1
1
import { flushSync } from "react-dom";
2
2
import { ToastQueue } from "react-stately";
3
+
3
4
import { ButtonVariant, ToastVariant } from "../theme/types";
4
5
5
6
export interface ToastContentType {
···
19
20
wrapUpdate(fn) {
20
21
if ("startViewTransition" in document) {
21
22
document.startViewTransition(() => {
23
+
// eslint-disable-next-line @eslint-react/dom/no-flush-sync
22
24
flushSync(fn);
23
25
});
24
26
} else {
+3
-3
apps/docs/src/components/toolbar/index.tsx
+3
-3
apps/docs/src/components/toolbar/index.tsx
···
10
10
SeparatorProps as AriaSeparatorProps,
11
11
} from "react-aria-components";
12
12
13
-
import { uiColor } from "../theme/semantic-color.stylex";
13
+
import { uiColor } from "../theme/color.stylex";
14
14
import { spacing } from "../theme/spacing.stylex";
15
15
import { StyleXComponentProps } from "../theme/types";
16
16
17
17
const styles = stylex.create({
18
18
toolbar: {
19
+
gap: spacing["1"],
19
20
display: "flex",
20
21
flexWrap: "wrap",
21
-
gap: spacing["1"],
22
22
},
23
23
horizontal: {
24
24
flexDirection: "row",
···
30
30
display: "contents",
31
31
},
32
32
separator: {
33
-
backgroundColor: uiColor.border2,
34
33
borderWidth: 0,
34
+
backgroundColor: uiColor.border2,
35
35
height: {
36
36
":is([data-orientation=vertical] *)": "1px",
37
37
},
+1
-1
apps/docs/src/components/tooltip/index.tsx
+1
-1
apps/docs/src/components/tooltip/index.tsx
···
10
10
} from "react-aria-components";
11
11
12
12
import { animationDuration } from "../theme/animations.stylex";
13
+
import { uiInverted } from "../theme/color.stylex";
13
14
import { radius } from "../theme/radius.stylex";
14
-
import { uiInverted } from "../theme/semantic-color.stylex";
15
15
import { shadow } from "../theme/shadow.stylex";
16
16
import { spacing } from "../theme/spacing.stylex";
17
17
import { fontFamily, fontSize, lineHeight } from "../theme/typography.stylex";
+2
-1
apps/docs/src/components/tree/index.tsx
+2
-1
apps/docs/src/components/tree/index.tsx
···
14
14
import { Checkbox } from "../checkbox";
15
15
import { SizeContext } from "../context";
16
16
import { animationDuration } from "../theme/animations.stylex";
17
+
import { primaryColor } from "../theme/color.stylex";
17
18
import { radius } from "../theme/radius.stylex";
18
-
import { primaryColor, ui } from "../theme/semantic-color.stylex";
19
+
import { ui } from "../theme/semantic-color.stylex";
19
20
import { spacing } from "../theme/spacing.stylex";
20
21
import { Size, StyleXComponentProps } from "../theme/types";
21
22
import { useListBoxItemStyles } from "../theme/useListBoxItemStyles";
+1
-1
apps/docs/src/components/typography/text.tsx
+1
-1
apps/docs/src/components/typography/text.tsx
+5
-5
apps/docs/src/components/window-splitter/index.tsx
+5
-5
apps/docs/src/components/window-splitter/index.tsx
···
10
10
type PanelResizerProps,
11
11
} from "@window-splitter/react";
12
12
13
-
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
13
+
import { primaryColor, uiColor } from "../theme/color.stylex";
14
14
import { spacing } from "../theme/spacing.stylex";
15
15
import { StyleXComponentProps } from "../theme/types";
16
16
···
37
37
},
38
38
position: "absolute",
39
39
40
+
transform: {
41
+
":is([data-handle-orientation='horizontal'] *)": "translateX(-50%)",
42
+
":is([data-handle-orientation='vertical'] *)": "translateY(-50%)",
43
+
},
40
44
bottom: { ":is([data-handle-orientation='horizontal'] *)": 0 },
41
45
left: { ":is([data-handle-orientation='vertical'] *)": 0 },
42
46
right: { ":is([data-handle-orientation='vertical'] *)": 0 },
43
47
top: { ":is([data-handle-orientation='horizontal'] *)": 0 },
44
-
transform: {
45
-
":is([data-handle-orientation='horizontal'] *)": "translateX(-50%)",
46
-
":is([data-handle-orientation='vertical'] *)": "translateY(-50%)",
47
-
},
48
48
49
49
height: {
50
50
":is([data-handle-orientation='horizontal'] *)": "100%",
+1
-1
apps/docs/src/docs/foundations/colors.mdx
+1
-1
apps/docs/src/docs/foundations/colors.mdx
···
71
71
Use the semantic colors to style your components.
72
72
73
73
```tsx
74
-
import { uiColor } from "@/components/theme/semantic-color.stylex";
74
+
import { uiColor } from "@/components/theme/color.stylex";
75
75
import * as stylex from "@stylexjs/stylex";
76
76
77
77
const styles = stylex.create({
+1
-1
apps/docs/src/examples/aspect-ratio/no-image.tsx
+1
-1
apps/docs/src/examples/aspect-ratio/no-image.tsx
···
4
4
import { AspectRatio } from "@/components/aspect-ratio";
5
5
import { Button } from "@/components/button";
6
6
7
-
import { uiColor } from "../../components/theme/semantic-color.stylex";
7
+
import { uiColor } from "../../components/theme/color.stylex";
8
8
import { spacing } from "../../components/theme/spacing.stylex";
9
9
10
10
const styles = stylex.create({
+1
-1
apps/docs/src/examples/flex/alignment.tsx
+1
-1
apps/docs/src/examples/flex/alignment.tsx
+1
-1
apps/docs/src/examples/flex/wrap.tsx
+1
-1
apps/docs/src/examples/flex/wrap.tsx
+1
-1
apps/docs/src/examples/foundations/shadow.tsx
+1
-1
apps/docs/src/examples/foundations/shadow.tsx
···
6
6
import { Text } from "@/components/typography/text";
7
7
8
8
import { radius } from "../../components/theme/radius.stylex";
9
-
import { uiColor } from "../../components/theme/semantic-color.stylex";
9
+
import { uiColor } from "../../components/theme/color.stylex";
10
10
import { spacing } from "../../components/theme/spacing.stylex";
11
11
12
12
const styles = stylex.create({
+1
-1
apps/docs/src/lib/Example.tsx
+1
-1
apps/docs/src/lib/Example.tsx
···
6
6
import { Flex } from "@/components/flex";
7
7
8
8
import { radius } from "../components/theme/radius.stylex";
9
-
import { uiColor } from "../components/theme/semantic-color.stylex";
9
+
import { uiColor } from "../components/theme/color.stylex";
10
10
import { spacing } from "../components/theme/spacing.stylex";
11
11
import { CopyToClipboardButton } from "./CopyToClipboardButton";
12
12
+1
-1
apps/docs/src/lib/PropDocs.tsx
+1
-1
apps/docs/src/lib/PropDocs.tsx
···
22
22
import { Text } from "@/components/typography/text";
23
23
24
24
import { radius } from "../components/theme/radius.stylex";
25
-
import { uiColor } from "../components/theme/semantic-color.stylex";
25
+
import { uiColor } from "../components/theme/color.stylex";
26
26
import { shadow } from "../components/theme/shadow.stylex";
27
27
import { spacing } from "../components/theme/spacing.stylex";
28
28
+2
-32
apps/docs/src/routes/__root.tsx
+2
-32
apps/docs/src/routes/__root.tsx
···
5
5
import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router";
6
6
import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
7
7
8
-
import { ui, primaryColor } from "../components/theme/semantic-color.stylex";
9
-
import { blue } from "../components/theme/colors/blue.stylex";
10
-
import { purple } from "../components/theme/colors/purple.stylex";
8
+
import { ui } from "../components/theme/semantic-color.stylex";
11
9
12
10
if (import.meta.env.DEV) {
13
11
import("virtual:stylex:runtime");
···
16
14
const styles = stylex.create({
17
15
body: {
18
16
margin: 0,
19
-
},
20
-
themeBlue: {
21
-
[primaryColor.bg]: blue.bg,
22
-
[primaryColor.bgSubtle]: blue.bgSubtle,
23
-
[primaryColor.component1]: blue.component1,
24
-
[primaryColor.component2]: blue.component2,
25
-
[primaryColor.component3]: blue.component3,
26
-
[primaryColor.border1]: blue.border1,
27
-
[primaryColor.border2]: blue.border2,
28
-
[primaryColor.border3]: blue.border3,
29
-
[primaryColor.solid1]: blue.solid1,
30
-
[primaryColor.solid2]: blue.solid2,
31
-
[primaryColor.text1]: blue.text1,
32
-
[primaryColor.text2]: blue.text2,
33
-
},
34
-
themePurple: {
35
-
[primaryColor.bg]: purple.bg,
36
-
[primaryColor.bgSubtle]: purple.bgSubtle,
37
-
[primaryColor.component1]: purple.component1,
38
-
[primaryColor.component2]: purple.component2,
39
-
[primaryColor.component3]: purple.component3,
40
-
[primaryColor.border1]: purple.border1,
41
-
[primaryColor.border2]: purple.border2,
42
-
[primaryColor.border3]: purple.border3,
43
-
[primaryColor.solid1]: purple.solid1,
44
-
[primaryColor.solid2]: purple.solid2,
45
-
[primaryColor.text1]: purple.text1,
46
-
[primaryColor.text2]: purple.text2,
47
17
},
48
18
});
49
19
···
92
62
<head>
93
63
<HeadContent />
94
64
</head>
95
-
<body {...stylex.props(ui.bg, ui.text, styles.body, styles.themeBlue)}>
65
+
<body {...stylex.props(ui.bg, ui.text, styles.body)}>
96
66
<script>{`
97
67
const localtColorScheme = localStorage.getItem("hip-ui-color-scheme");
98
68
+1
-1
apps/docs/src/routes/docs.$.tsx
+1
-1
apps/docs/src/routes/docs.$.tsx
···
52
52
53
53
import { animationDuration } from "../components/theme/animations.stylex";
54
54
import { radius } from "../components/theme/radius.stylex";
55
-
import { uiColor } from "../components/theme/semantic-color.stylex";
55
+
import { uiColor } from "../components/theme/color.stylex";
56
56
import { spacing } from "../components/theme/spacing.stylex";
57
57
import { lineHeight } from "../components/theme/typography.stylex";
58
58
+1
-1
apps/docs/src/routes/docs.tsx
+1
-1
apps/docs/src/routes/docs.tsx
···
22
22
} from "@/components/sidebar";
23
23
import { Text } from "@/components/typography/text";
24
24
25
-
import { uiColor } from "../components/theme/semantic-color.stylex";
25
+
import { uiColor } from "../components/theme/color.stylex";
26
26
27
27
const SidebarItemLink = createLink(SidebarItem);
28
28
+1
-1
apps/docs/src/showcases/canvas-editor.tsx
+1
-1
apps/docs/src/showcases/canvas-editor.tsx
···
72
72
import { Text } from "@/components/typography/text";
73
73
74
74
import { radius } from "../components/theme/radius.stylex";
75
-
import { uiColor } from "../components/theme/semantic-color.stylex";
75
+
import { uiColor } from "../components/theme/color.stylex";
76
76
import { shadow } from "../components/theme/shadow.stylex";
77
77
import { spacing } from "../components/theme/spacing.stylex";
78
78
import {
+1
-1
apps/docs/src/showcases/llm.tsx
+1
-1
apps/docs/src/showcases/llm.tsx
···
36
36
import { Slider } from "../components/slider";
37
37
import { TextArea } from "../components/text-area";
38
38
import { radius } from "../components/theme/radius.stylex";
39
-
import { uiColor } from "../components/theme/semantic-color.stylex";
39
+
import { uiColor } from "../components/theme/color.stylex";
40
40
import { shadow } from "../components/theme/shadow.stylex";
41
41
import { spacing } from "../components/theme/spacing.stylex";
42
42
import { fontSize, fontWeight } from "../components/theme/typography.stylex";
+1
-1
apps/docs/src/showcases/todo-table.tsx
+1
-1
apps/docs/src/showcases/todo-table.tsx
···
46
46
import { Text } from "@/components/typography/text";
47
47
48
48
import { radius } from "../components/theme/radius.stylex";
49
-
import { uiColor } from "../components/theme/semantic-color.stylex";
49
+
import { uiColor } from "../components/theme/color.stylex";
50
50
import { shadow } from "../components/theme/shadow.stylex";
51
51
import { spacing } from "../components/theme/spacing.stylex";
52
52
+246
-262
apps/docs/stylex.css
+246
-262
apps/docs/stylex.css
···
8
8
@property --x-aspectRatio { syntax: "*"; inherits: false;}
9
9
@property --x-width { syntax: "*"; inherits: false;}
10
10
@property --x-paddingLeft { syntax: "*"; inherits: false;}
11
+
@property --x---items-per-row { syntax: "*"; inherits: false;}
11
12
@property --x-fontSize { syntax: "*"; inherits: false;}
12
13
@property --x-1gfbyet { syntax: "*"; inherits: false;}
13
14
@property --x-paddingRight { syntax: "*"; inherits: false;}
14
15
@property --x-height { syntax: "*"; inherits: false;}
15
-
@property --x---items-per-row { syntax: "*"; inherits: false;}
16
16
@property --x-transform { syntax: "*"; inherits: false;}
17
17
@property --thin-xk6k0je { syntax: "<number>"; inherits: true; initial-value: 100 }
18
18
@property --extralight-x12edb6v { syntax: "<number>"; inherits: true; initial-value: 200 }
···
30
30
:root, .x15x7s49{--_0-xcffliq:0px;--_1-x1plbop:0.25rem;--_2-xsow7ju:0.5rem;--_3-x1a1riub:0.75rem;--_4-xgvn2um:1rem;--_5-x1pn3ufh:1.25rem;--_6-x109877l:1.5rem;--_7-x3ogwq2:1.75rem;--_8-x1do95gr:2rem;--_9-x58vtwt:2.25rem;--_10-xyoqvup:2.5rem;--_11-x11x3va4:2.75rem;--_12-xaxip2l:3rem;--_14-x18pvp2c:3.5rem;--_16-xnqsi2d:4rem;--_20-xbgtkw8:5rem;--_24-x8uq83j:6rem;--_28-x3c8utc:7rem;--_32-xxeew7j:8rem;--_36-x9ro48l:9rem;--_40-xlhyjhi:10rem;--_44-x4oqk9o:11rem;--_48-xc3zl6e:12rem;--_52-x66e183:13rem;--_56-x1k96jyh:14rem;--_60-xf930e:15rem;--_64-xhz114r:16rem;--_72-xgbkc4t:18rem;--_80-x12r4f45:20rem;--_96-x1mf07nc:24rem;--px-x1rrl3u8:1px;--_0_5-x1bnlq1y:0.125rem;--_1_5-x1llymyc:0.375rem;--_2_5-xmuc480:0.625rem;--_3_5-x1gotxl7:0.875rem;}
31
31
:root, .x1rvy3a9{--_2xs-x1xzzr5o:0 1px rgb(0 0 0 / 0.05);--xs-x1e2w8h4:0 1px 2px 0 rgb(0 0 0 / 0.05);--sm-xeboudq:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--md-xf59ov0:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--lg-xgilsvr:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--xl-x1azhb21:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--_2xl-x1nhun0f:0 25px 50px -12px rgb(0 0 0 / 0.25);--none-xgllz1r:0 0 #0000;--inset-xe4eu4o:inset 0 0 4px 0 rgb(0 0 0 / 0.1);--insetSm-xio3qbh:inset 0 0 4px 0 rgb(0 0 0 / 0.05);--insetMd-xx48ebj:inset 0 0 4px 0 rgb(0 0 0 / 0.1);--insetLg-x19q2zjg:inset 0 0 8px 0 rgb(0 0 0 / 0.15);}
32
32
:root, .x1vqb0uf{--bg-x11hz5ne:light-dark(#fcfcfd, #fcfcfd);--bgSubtle-xk6jaqm:light-dark(#f9f9fb, #f9f9fb);--component1-x14nyoj8:light-dark(#f0f0f3, #f0f0f3);--component2-xx984p:light-dark(#e8e8ec, #e8e8ec);--component3-x1frjuvu:light-dark(#e0e1e6, #e0e1e6);--border1-x1xf4476:light-dark(#d9d9e0, #d9d9e0);--border2-x10iw3tt:light-dark(#cdced6, #cdced6);--border3-xq0e6t4:light-dark(#b9bbc6, #b9bbc6);--solid1-x1rohqqu:light-dark(#8b8d98, #8b8d98);--solid2-x27t3df:light-dark(#80838d, #80838d);--text1-x1340um9:light-dark(#60646c, #60646c);--text2-x19kn33k:light-dark(#1c2024, #1c2024);}
33
-
:root, .x192maez{--bg-x151sc8w:var(--bg-x1gphzf2);--bgSubtle-x8mr634:var(--bgSubtle-x1jplh2x);--component1-x1rae15s:var(--component1-xrknle9);--component2-x1a2uij6:var(--component2-x12ntf8);--component3-x1g6ykoq:var(--component3-x1qvqun4);--border1-xs1aqk6:var(--border1-xdv3dhm);--border2-xdphg4n:var(--border2-xwn3lmr);--border3-xy1d7zd:var(--border3-xwig6mx);--solid1-xdodexi:var(--solid1-xp35zam);--solid2-xzgmc89:var(--solid2-xi399qe);--text1-xccyl1g:var(--text1-x1blb29e);--text2-x8ycaw:var(--text2-xx3kex6);--textContrast-xxxqvdi:white;}
34
-
:root, .xxwjb7h{--bg-x175608s:var(--bg-xyifsjz);--bgSubtle-x1y9leuq:var(--bgSubtle-x2tkz45);--component1-x1sghgg8:var(--component1-xaivliz);--component2-x124xhl6:var(--component2-xgxkwj6);--component3-x1ejz5cj:var(--component3-x3872c4);--border1-xm7eg2j:var(--border1-x51i60m);--border2-x1kmnglg:var(--border2-x1lnuyuh);--border3-x1afn5qd:var(--border3-xqf689p);--solid1-x2pkv20:var(--solid1-x1m6a25n);--solid2-x4985y2:var(--solid2-x1o05zwi);--text1-xjn2lxg:var(--text1-x3r7y46);--text2-x1drysnq:var(--text2-x11v4dhp);--textContrast-x116zh0m:white;}
35
33
:root, .x1nacpgj{--bg-x18rimo7:light-dark(#00c04004, #00de4505);--bgSubtle-x1qpayca:light-dark(#00a32f0b, #29f99d0b);--component1-xkt0b0i:light-dark(#00a43319, #22ff991e);--component2-x13zpfk5:light-dark(#00a83829, #11ff992d);--component3-x3c1f4h:light-dark(#019c393b, #2bffa23c);--border1-xmsez:light-dark(#00963c52, #44ffaa4b);--border2-x6ry4fz:light-dark(#00914071, #50fdac5e);--border3-x1xr1aty:light-dark(#00924ba4, #54ffad73);--solid1-xtnx0yx:light-dark(#008f4acf, #44ffa49e);--solid2-x1vqfbnw:light-dark(#008647d4, #43fea4ab);--text1-xkuh3uh:light-dark(#00713fde, #46fea5d4);--text2-x1i4rdgx:light-dark(#002616e6, #bbffd7f0);}
34
+
:root, .x15xos7j{--bg-x1aturvj:var(--bg-x1sw4zc8);--bgSubtle-x1i13xn6:var(--bgSubtle-x16ilu94);--component1-xrqvod2:var(--component1-xeaj9e7);--component2-xpnxlzk:var(--component2-x8ir5ts);--component3-xhtfb9k:var(--component3-xdklm5y);--border1-x1gfz7lw:var(--border1-x6y5na3);--border2-xdhoy4z:var(--border2-x9cla9k);--border3-x1fv6rtg:var(--border3-x1g5crwn);--solid1-xs64gu4:var(--solid1-x1jiy1i7);--solid2-x1crx5cu:var(--solid2-x1lcgbx5);--text1-xpii5us:var(--text1-x1g3lydx);--text2-x1xyma3f:var(--text2-x649ojl);--textContrast-x1f99jtk:white;}
35
+
:root, .x1rxy9eo{--bg-x1drn8y1:var(--bg-x1l89o2a);--bgSubtle-xn5r12v:var(--bgSubtle-xlq589s);--component1-x17z0c80:var(--component1-xoam46d);--component2-xl2jk9r:var(--component2-xptpg9x);--component3-x156ikib:var(--component3-x1bpgk6h);--border1-xkgv7eh:var(--border1-x1m6eoqc);--border2-x1yq3app:var(--border2-x1s07flx);--border3-x1587jaz:var(--border3-x3z2k3q);--solid1-x6wzzll:var(--solid1-x10d61hv);--solid2-x1ubhs74:var(--solid2-x1ks7zzp);--text1-x1s275lk:var(--text1-x1hos2s0);--text2-x1kg2ygz:var(--text2-xasqimf);--textContrast-x1rjp7a6:white;}
36
36
:root, .x1ghv51{--bg-x1gphzf2:light-dark(#fcfcfd, #fcfcfd);--bgSubtle-x1jplh2x:light-dark(#f9f9fb, #f9f9fb);--component1-xrknle9:light-dark(#f0f0f3, #f0f0f3);--component2-x12ntf8:light-dark(#e8e8ec, #e8e8ec);--component3-x1qvqun4:light-dark(#e0e1e6, #e0e1e6);--border1-xdv3dhm:light-dark(#d9d9e0, #d9d9e0);--border2-xwn3lmr:light-dark(#cdced6, #cdced6);--border3-xwig6mx:light-dark(#b9bbc6, #b9bbc6);--solid1-xp35zam:light-dark(#8b8d98, #8b8d98);--solid2-xi399qe:light-dark(#80838d, #80838d);--text1-x1blb29e:light-dark(#60646c, #60646c);--text2-xx3kex6:light-dark(#1c2024, #1c2024);}
37
-
:root, .x1hdqnv5{--bg-x1jmar6b:var(--bg-x6re758);--bgSubtle-xvpzc41:var(--bgSubtle-x415v6g);--component1-x1gg3jrv:var(--component1-xp4d679);--component2-x1q29jlu:var(--component2-xk9ahtj);--component3-x3nfkm8:var(--component3-x4u0l1k);--border1-xdz3kzl:var(--border1-x1rbpmds);--border2-x7rqvo0:var(--border2-xfem4zx);--border3-x16mdiod:var(--border3-x1hu3pnx);--solid1-xnhvmlu:var(--solid1-x162hmff);--solid2-xlw47ga:var(--solid2-x1dlve8z);--text1-x1pj8xh0:var(--text1-x13j7ndk);--text2-xcv02bb:var(--text2-xpa4mfl);--textContrast-x1gt1e58:black;}
38
37
:root, .x1eqhwi5{--bg-x1l89o2a:light-dark(#fbfefc, #fbfefc);--bgSubtle-xlq589s:light-dark(#f4fbf6, #f4fbf6);--component1-xoam46d:light-dark(#e6f6eb, #e6f6eb);--component2-xptpg9x:light-dark(#d6f1df, #d6f1df);--component3-x1bpgk6h:light-dark(#c4e8d1, #c4e8d1);--border1-x1m6eoqc:light-dark(#adddc0, #adddc0);--border2-x1s07flx:light-dark(#8eceaa, #8eceaa);--border3-x3z2k3q:light-dark(#5bb98b, #5bb98b);--solid1-x10d61hv:light-dark(#30a46c, #30a46c);--solid2-x1ks7zzp:light-dark(#2b9a66, #2b9a66);--text1-x1hos2s0:light-dark(#218358, #218358);--text2-xasqimf:light-dark(#193b2d, #193b2d);}
39
-
:root, .x1jciiue{--bg-x1oix42s:var(--bg-x1l89o2a);--bgSubtle-x1eogh41:var(--bgSubtle-xlq589s);--component1-x1ui28u3:var(--component1-xoam46d);--component2-x1hhltqf:var(--component2-xptpg9x);--component3-x3irpq9:var(--component3-x1bpgk6h);--border1-x46gdic:var(--border1-x1m6eoqc);--border2-x1k67xy2:var(--border2-x1s07flx);--border3-x1kngkfb:var(--border3-x3z2k3q);--solid1-xmemhk6:var(--solid1-x10d61hv);--solid2-x1dbywqs:var(--solid2-x1ks7zzp);--text1-x253p4m:var(--text1-x1hos2s0);--text2-x1ew83cn:var(--text2-xasqimf);--textContrast-x1xz901g:white;}
40
-
:root, .x1lw1t95{--bg-x1rxyl4a:var(--bg-x1sw4zc8);--bgSubtle-xmjz13d:var(--bgSubtle-x16ilu94);--component1-x43o0oh:var(--component1-xeaj9e7);--component2-xzjwbwe:var(--component2-x8ir5ts);--component3-xvwaia1:var(--component3-xdklm5y);--border1-x1d0hf4b:var(--border1-x6y5na3);--border2-x130p4o0:var(--border2-x9cla9k);--border3-x1lhdl2z:var(--border3-x1g5crwn);--solid1-x6o1eyi:var(--solid1-x1jiy1i7);--solid2-x1rgzn25:var(--solid2-x1lcgbx5);--text1-xc56m6b:var(--text1-x1g3lydx);--text2-x6gkmtf:var(--text2-x649ojl);--textContrast-xmd31bd:white;}
41
38
:root, .x1tahuoi{--bg-x1sw4zc8:light-dark(#fefcfb, #fefcfb);--bgSubtle-x16ilu94:light-dark(#fff7ed, #fff7ed);--component1-xeaj9e7:light-dark(#ffefd6, #ffefd6);--component2-x8ir5ts:light-dark(#ffdfb5, #ffdfb5);--component3-xdklm5y:light-dark(#ffd19a, #ffd19a);--border1-x6y5na3:light-dark(#ffc182, #ffc182);--border2-x9cla9k:light-dark(#f5ae73, #f5ae73);--border3-x1g5crwn:light-dark(#ec9455, #ec9455);--solid1-x1jiy1i7:light-dark(#f76b15, #f76b15);--solid2-x1lcgbx5:light-dark(#ef5f00, #ef5f00);--text1-x1g3lydx:light-dark(#cc4e00, #cc4e00);--text2-x649ojl:light-dark(#582d1d, #582d1d);}
39
+
:root, .x9nu7xu{--bg-x1yrls9:var(--bg-x11hz5ne);--bgSubtle-x123awk4:var(--bgSubtle-xk6jaqm);--component1-x1ojhc7k:var(--component1-x14nyoj8);--component2-xx7wvuk:var(--component2-xx984p);--component3-x11hgl6v:var(--component3-x1frjuvu);--border1-x11as8pt:var(--border1-x1xf4476);--border2-xxsd9i2:var(--border2-x10iw3tt);--border3-x1be1b4q:var(--border3-xq0e6t4);--solid1-x1qgqpcr:var(--solid1-x1rohqqu);--solid2-xkcrude:var(--solid2-x27t3df);--text1-x45q57k:var(--text1-x1340um9);--text2-xelq0bc:var(--text2-x19kn33k);--textContrast-x15nwm92:white;}
40
+
:root, .xlzuynz{--bg-x47z3hi:var(--bg-xyifsjz);--bgSubtle-x1u2qu9m:var(--bgSubtle-x2tkz45);--component1-x16ucms1:var(--component1-xaivliz);--component2-x18xvsux:var(--component2-xgxkwj6);--component3-xi8u5z9:var(--component3-x3872c4);--border1-xptzz2t:var(--border1-x51i60m);--border2-x1cklt06:var(--border2-x1lnuyuh);--border3-x1wagwp:var(--border3-xqf689p);--solid1-x1uwop3o:var(--solid1-x1m6a25n);--solid2-xepqutl:var(--solid2-x1o05zwi);--text1-x1umfgwa:var(--text1-x3r7y46);--text2-x1l5nls6:var(--text2-x11v4dhp);--textContrast-x1mspsiw:white;}
42
41
:root, .xyxmmhb{--bg-x6qb2y7:light-dark(#00000000, #00005503);--bgSubtle-xz52aqz:light-dark(#d8f4f609, #00005506);--component1-x1ootxdk:light-dark(#ddeaf814, #0000330f);--component2-x1x5bo14:light-dark(#d3edf81d, #00002d17);--component3-x8x5exd:light-dark(#d9edfe25, #0009321f);--border1-xl5c3qb:light-dark(#d6ebfd30, #00002f26);--border2-x1snns10:light-dark(#d9edff40, #00062e32);--border3-x1b5487t:light-dark(#d9edff5d, #00083046);--solid1-xw7lcsf:light-dark(#dfebfd6d, #00051d74);--solid2-x1vuts7a:light-dark(#e5edfd7b, #00071b7f);--text1-x1qacqzu:light-dark(#f1f7feb5, #0007149f);--text2-x7xxkp7:light-dark(#fcfdffef, #000509e3);}
43
42
:root, .x9qo77k{--bg-x6re758:light-dark(#fdfdf9, #fdfdf9);--bgSubtle-x415v6g:light-dark(#fefce9, #fefce9);--component1-xp4d679:light-dark(#fffab8, #fffab8);--component2-xk9ahtj:light-dark(#fff394, #fff394);--component3-x4u0l1k:light-dark(#ffe770, #ffe770);--border1-x1rbpmds:light-dark(#f3d768, #f3d768);--border2-xfem4zx:light-dark(#e4c767, #e4c767);--border3-x1hu3pnx:light-dark(#d5ae39, #d5ae39);--solid1-x162hmff:light-dark(#ffe629, #ffe629);--solid2-x1dlve8z:light-dark(#ffdc00, #ffdc00);--text1-x13j7ndk:light-dark(#9e6c00, #9e6c00);--text2-xpa4mfl:light-dark(#473b1f, #473b1f);}
44
43
:root, .xxq1yzn{--bg-xa4n1ix:light-dark(#ff000003, #f4121209);--bgSubtle-xjwgibg:light-dark(#ff000008, #f22f3e11);--component1-x18qyhc9:light-dark(#f3000d14, #ff173f2d);--component2-x1532e8q:light-dark(#ff000824, #fe0a3b44);--component3-x1pajzzf:light-dark(#ff000632, #ff204756);--border1-xovqzn1:light-dark(#f8000442, #ff3e5668);--border2-xphtnsk:light-dark(#df000356, #ff536184);--border3-x16n4bma:light-dark(#d2000571, #ff5d61b0);--solid1-x1iik73w:light-dark(#db0007b7, #fe4e54e4);--solid2-x1j1wfyr:light-dark(#d10005c1, #ff6465eb);--text1-x8esa8k:light-dark(#c40006d3, #ff9592);--text2-x1bvq9d8:light-dark(#55000de8, #ffd1d9);}
44
+
:root, .x16th5me{--bg-xbgkqvh:var(--bg-x6re758);--bgSubtle-x1obn2uh:var(--bgSubtle-x415v6g);--component1-x1e4ihis:var(--component1-xp4d679);--component2-x1bs37nf:var(--component2-xk9ahtj);--component3-xzgtcz2:var(--component3-x4u0l1k);--border1-x1a33rbf:var(--border1-x1rbpmds);--border2-x8tqwsr:var(--border2-xfem4zx);--border3-x1cxb3of:var(--border3-x1hu3pnx);--solid1-x14k0c5u:var(--solid1-x162hmff);--solid2-xvobw7z:var(--solid2-x1dlve8z);--text1-xw4mcn1:var(--text1-x13j7ndk);--text2-x1u4qfl5:var(--text2-xpa4mfl);--textContrast-x1f1q847:black;}
45
45
:root, .x4hfvnt{--bg-xde63gs:light-dark(#c0400004, #ec360007);--bgSubtle-x1jdsv4g:light-dark(#ff8e0012, #fe6d000e);--component1-xxoq9mm:light-dark(#ff9c0029, #fb6a0025);--component2-x1os2gnc:light-dark(#ff91014a, #ff590039);--component3-x1becyrv:light-dark(#ff8b0065, #ff61004a);--border1-xb79avr:light-dark(#ff81007d, #fd75045c);--border2-xq7p22b:light-dark(#ed6c008c, #ff832c75);--border3-x1jpklpn:light-dark(#e35f00aa, #fe84389d);--solid1-x1uqiz8q:light-dark(#f65e00ea, #fe6d15f7);--solid2-x1f48cqm:light-dark(#ef5f00, #ff801f);--text1-xqn6ccr:light-dark(#cc4e00, #ffa057);--text2-x143oi4e:light-dark(#431200e2, #ffe0c2);}
46
-
:root, .x1sicsqz{--bg-xl687un:var(--bg-x11hz5ne);--bgSubtle-xi821rj:var(--bgSubtle-xk6jaqm);--component1-x11poo5x:var(--component1-x14nyoj8);--component2-x18xhj12:var(--component2-xx984p);--component3-x1isc7sq:var(--component3-x1frjuvu);--border1-x1en7ut4:var(--border1-x1xf4476);--border2-xavwyw3:var(--border2-x10iw3tt);--border3-xm42ywm:var(--border3-xq0e6t4);--solid1-x1yanih7:var(--solid1-x1rohqqu);--solid2-x1ba3nh8:var(--solid2-x27t3df);--text1-xb5nrd9:var(--text1-x1340um9);--text2-x1ztxw:var(--text2-x19kn33k);--textContrast-xk9atbi:white;}
47
46
:root, .xv3w7a0{--bg-xo9m2b4:light-dark(#aaaa0006, #d1510004);--bgSubtle-xpnscu7:light-dark(#f4dd0016, #f9b4000b);--component1-xq65tlw:light-dark(#ffee0047, #ffaa001e);--component2-x1ujsea2:light-dark(#ffe3016b, #fdb70028);--component3-x1njakr4:light-dark(#ffd5008f, #febb0036);--border1-xgpgkv2:light-dark(#ebbc0097, #fec40046);--border2-xfy5k6m:light-dark(#d2a10098, #fdcb225c);--border3-x1bakgjo:light-dark(#c99700c6, #fdca327b);--solid1-xffo9u0:light-dark(#ffe100d6, #ffe629);--solid2-x10kpuhz:light-dark(#ffdc00, #ffff57);--text1-x1arwxzo:light-dark(#9e6c00, #fee949f5);--text2-x1330fsk:light-dark(#2e2000e0, #fef6baf6);}
47
+
:root, .x203hvu{--bg-xohqlzf:var(--bg-x1gphzf2);--bgSubtle-x1h1eurh:var(--bgSubtle-x1jplh2x);--component1-x50hgqv:var(--component1-xrknle9);--component2-x16vpvfb:var(--component2-x12ntf8);--component3-x16f4t7r:var(--component3-x1qvqun4);--border1-xcc23vl:var(--border1-xdv3dhm);--border2-x1hmtawr:var(--border2-xwn3lmr);--border3-x8zrzci:var(--border3-xwig6mx);--solid1-x1r678bi:var(--solid1-xp35zam);--solid2-x1o3inj8:var(--solid2-xi399qe);--text1-x1pbhz26:var(--text1-x1blb29e);--text2-xoi766n:var(--text2-xx3kex6);--textContrast-x6gs0n1:white;}
48
48
:root, .x1qw93q1{--bg-xvz4l1d:light-dark(#00005503, #00000000);--bgSubtle-x11wv3u2:light-dark(#00005506, #d8f4f609);--component1-xq1n77x:light-dark(#0000330f, #ddeaf814);--component2-x1pcqosl:light-dark(#00002d17, #d3edf81d);--component3-x2i1291:light-dark(#0009321f, #d9edfe25);--border1-xqh3mvu:light-dark(#00002f26, #d6ebfd30);--border2-xk8cw7k:light-dark(#00062e32, #d9edff40);--border3-x1aygav0:light-dark(#00083046, #d9edff5d);--solid1-xxfkrpm:light-dark(#00051d74, #dfebfd6d);--solid2-x1u1gfxn:light-dark(#00071b7f, #e5edfd7b);--text1-ximjy2m:light-dark(#0007149f, #f1f7feb5);--text2-x1tsbbhh:light-dark(#000509e3, #fcfdffef);}
49
49
:root, .x1dct8vy{--bg-xyifsjz:light-dark(#fffcfc, #fffcfc);--bgSubtle-x2tkz45:light-dark(#fff7f7, #fff7f7);--component1-xaivliz:light-dark(#feebec, #feebec);--component2-xgxkwj6:light-dark(#ffdbdc, #ffdbdc);--component3-x3872c4:light-dark(#ffcdce, #ffcdce);--border1-x51i60m:light-dark(#fdbdbe, #fdbdbe);--border2-x1lnuyuh:light-dark(#f4a9aa, #f4a9aa);--border3-xqf689p:light-dark(#eb8e90, #eb8e90);--solid1-x1m6a25n:light-dark(#e5484d, #e5484d);--solid2-x1o05zwi:light-dark(#dc3e42, #dc3e42);--text1-x3r7y46:light-dark(#ce2c31, #ce2c31);--text2-x11v4dhp:light-dark(#641723, #641723);}
50
50
:root, .x10ailbr{--none-x7rich4:1;--xs-xg4a8ug:0.8;--sm-x4pl0dv:1.25;--base-x17a3wz2:1.75;--lg-x1nt92rq:2;--xl-xyq6gpo:2.5;--_2xl-xnhvph2:3;--_3xl-x11fa68j:3.5;}
···
77
77
.--card-y-padding-x1s63jwo:is([data-card-size=lg]){--card-y-padding:var(--_10-xyoqvup)}
78
78
.--card-y-padding-xmmjuso:is([data-card-size=sm]){--card-y-padding:var(--_2-xsow7ju)}
79
79
.--card-y-padding-x1d9o89m:is([data-card-size=md]){--card-y-padding:var(--_7-x3ogwq2)}
80
-
.--empty-state-image-size-x1n5g2xx:is([data-empty-state-size=sm]){--empty-state-image-size:var(--_10-xyoqvup)}
81
-
.--empty-state-image-size-x13rc4i8:is([data-empty-state-size=md]){--empty-state-image-size:var(--_14-x18pvp2c)}
82
-
.--empty-state-image-size-x113ivaj:is([data-empty-state-size=lg]){--empty-state-image-size:var(--_20-xbgtkw8)}
80
+
.--empty-state-gap-x1mjqiuu:is([data-empty-state-size=sm]){--empty-state-gap:var(--_4-xgvn2um)}
81
+
.--empty-state-gap-xy4cvh6:is([data-empty-state-size=md]){--empty-state-gap:var(--_6-x109877l)}
82
+
.--empty-state-gap-x1ws3guz:is([data-empty-state-size=lg]){--empty-state-gap:var(--_8-x1do95gr)}
83
+
.--empty-state-image-size-xc1b8y5:is([data-empty-state-size=sm]){--empty-state-image-size:120px}
84
+
.--empty-state-image-size-x10zm317:is([data-empty-state-size=md]){--empty-state-image-size:180px}
85
+
.--empty-state-image-size-x13qpv5z:is([data-empty-state-size=lg]){--empty-state-image-size:240px}
83
86
.--origin-x-x1b8bcs2:is([data-placement=right],[data-placement=right] > *){--origin-x:calc(var(--_4-xgvn2um) * -1)}
84
87
.--origin-x-x11jamwj:is([data-placement=left],[data-placement=left] > *){--origin-x:var(--_4-xgvn2um)}
85
88
.--origin-y-xkt5zg6:is([data-placement=bottom],[data-placement=bottom] > *){--origin-y:calc(var(--_4-xgvn2um) * -1)}
···
92
95
.--progress-size-x1mc7m0b:is([data-size=sm] *){--progress-size:var(--_4-xgvn2um)}
93
96
.--progress-size-xbwumww:is([data-size=md] *){--progress-size:var(--_8-x1do95gr)}
94
97
.gridArea-x19dv8yz:not(#\#){grid-area:action}
95
-
.gridArea-x1cfmmib:not(#\#){grid-area:actions}
96
98
.gridArea-x1iynvfu:not(#\#){grid-area:bar}
97
99
.gridArea-x19tbii3:not(#\#){grid-area:description}
98
-
.gridArea-x5jscpo:not(#\#){grid-area:image}
99
100
.gridArea-xxwd7sb:not(#\#){grid-area:label}
100
101
.gridArea-xnyuz70:not(#\#){grid-area:title}
101
102
.gridArea-xo3lhmp:not(#\#){grid-area:track}
···
128
129
.padding-x11kw06r:is([data-size=lg] *):not(#\#){padding:var(--_5-x1pn3ufh)}
129
130
.gridTemplate-xznk9rs:has([data-card-header-description]):not(#\#){grid-template:'title action' 'description action'}
130
131
.borderColor-x9r1u3d:not(#\#):not(#\#){border-color:transparent}
131
-
.borderColor-x1k39n6z:not(#\#):not(#\#){border-color:var(--border1-x1d0hf4b)}
132
-
.borderColor-x1py3wlq:not(#\#):not(#\#){border-color:var(--border1-x1en7ut4)}
133
-
.borderColor-xc465ie:not(#\#):not(#\#){border-color:var(--border1-x46gdic)}
134
-
.borderColor-xfxcto8:not(#\#):not(#\#){border-color:var(--border1-xdz3kzl)}
135
-
.borderColor-x13kk5ga:not(#\#):not(#\#){border-color:var(--border1-xm7eg2j)}
132
+
.borderColor-xutqp2n:not(#\#):not(#\#){border-color:var(--border1-x11as8pt)}
133
+
.borderColor-xtyextq:not(#\#):not(#\#){border-color:var(--border1-x1a33rbf)}
134
+
.borderColor-x1j3jg0b:not(#\#):not(#\#){border-color:var(--border1-x1gfz7lw)}
135
+
.borderColor-xp2f6fw:not(#\#):not(#\#){border-color:var(--border1-xkgv7eh)}
136
+
.borderColor-x19u9m2y:not(#\#):not(#\#){border-color:var(--border1-xptzz2t)}
136
137
.borderColor-xfo4zru:not(#\#):not(#\#){border-color:var(--border2-x130p4o0)}
137
-
.borderColor-xs06tsl:not(#\#):not(#\#){border-color:var(--border2-x1k67xy2)}
138
-
.borderColor-x10awtix:not(#\#):not(#\#){border-color:var(--border2-x1kmnglg)}
139
-
.borderColor-xqcsr7z:not(#\#):not(#\#){border-color:var(--border2-x7rqvo0)}
140
-
.borderColor-x1gsw6mb:not(#\#):not(#\#){border-color:var(--border2-xavwyw3)}
141
-
.borderColor-xa6stqc:not(#\#):not(#\#){border-color:var(--border3-xm42ywm)}
142
-
.borderColor-x2xmkrc:not(#\#):not(#\#){border-color:var(--component1-x11poo5x)}
143
-
.borderColor-x11wpsl:not(#\#):not(#\#){border-color:var(--component1-x1gg3jrv)}
144
-
.borderColor-x13lxkxy:not(#\#):not(#\#){border-color:var(--component1-x1sghgg8)}
145
-
.borderColor-xty6efl:not(#\#):not(#\#){border-color:var(--component1-x1ui28u3)}
146
-
.borderColor-x6txe1r:not(#\#):not(#\#){border-color:var(--solid1-x6o1eyi)}
138
+
.borderColor-xdt6ewa:not(#\#):not(#\#){border-color:var(--border2-x1cklt06)}
139
+
.borderColor-xn0q7k0:not(#\#):not(#\#){border-color:var(--border2-x1yq3app)}
140
+
.borderColor-xyr8ci1:not(#\#):not(#\#){border-color:var(--border2-x8tqwsr)}
141
+
.borderColor-xbsj1ce:not(#\#):not(#\#){border-color:var(--border2-xdhoy4z)}
142
+
.borderColor-x76092r:not(#\#):not(#\#){border-color:var(--border2-xxsd9i2)}
143
+
.borderColor-x520y0d:not(#\#):not(#\#){border-color:var(--border3-x1be1b4q)}
144
+
.borderColor-xn2yik0:not(#\#):not(#\#){border-color:var(--component1-x16ucms1)}
145
+
.borderColor-xbsohsc:not(#\#):not(#\#){border-color:var(--component1-x17z0c80)}
146
+
.borderColor-x1hdesfp:not(#\#):not(#\#){border-color:var(--component1-x1e4ihis)}
147
+
.borderColor-x1jga0k0:not(#\#):not(#\#){border-color:var(--component1-x1ojhc7k)}
148
+
.borderColor-xlje8lw:not(#\#):not(#\#){border-color:var(--solid1-xs64gu4)}
147
149
.borderColor-x1e8wf2f:not(#\#):not(#\#){border-color:var(--solid2-x1rgzn25)}
148
150
.borderColor-x1nvupfo:not(#\#):not(#\#){border-color:white}
149
151
.borderRadius-x2u8bby:not(#\#):not(#\#){border-radius:0}
···
152
154
.borderRadius-xuoujax:not(#\#):not(#\#){border-radius:var(--lg-x1011bts)}
153
155
.borderRadius-x1i993ju:not(#\#):not(#\#){border-radius:var(--md-x1o51v3i)}
154
156
.borderRadius-xf80l99:not(#\#):not(#\#){border-radius:var(--sm-xp4zkua)}
157
+
.borderRadius-x3ee2pc:not(#\#):not(#\#){border-radius:var(--xl-x195otgw)}
155
158
.borderStyle-xbsl7fq:not(#\#):not(#\#){border-style:dashed}
156
159
.borderStyle-x1y0btm7:not(#\#):not(#\#){border-style:solid}
157
160
.borderWidth-xc342km:not(#\#):not(#\#){border-width:0}
···
197
200
.gap-x1mlfgta:not(#\#):not(#\#){gap:var(--_9-x58vtwt)}
198
201
.gap-x1erfctr:not(#\#):not(#\#){gap:var(--_96-x1mf07nc)}
199
202
.gap-x8fwt5u:not(#\#):not(#\#){gap:var(--card-gap)}
203
+
.gap-x1dp1mka:not(#\#):not(#\#){gap:var(--empty-state-gap)}
200
204
.gap-x19e0sr3:not(#\#):not(#\#){gap:var(--toggle-button-group-gap)}
201
205
.gridTemplateAreas-x1syeyrc:not(#\#):not(#\#){grid-template-areas:'label value-label' 'bar bar'}
202
206
.gridTemplateAreas-xynonu2:not(#\#):not(#\#){grid-template-areas:'label value-label' 'track track'}
···
217
221
@supports (corner-shape: squircle){.borderRadius-xrrq4d1.borderRadius-xrrq4d1:not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
218
222
@supports (corner-shape: squircle){.borderRadius-xw9u2bx.borderRadius-xw9u2bx:not(#\#):not(#\#){border-radius:var(--_4xl-x1okofp6)}}
219
223
@supports (corner-shape: squircle){.borderRadius-x6qlbny.borderRadius-x6qlbny:not(#\#):not(#\#){border-radius:var(--full-xmpdjt5)}}
220
-
.borderColor-x13lu68w:is(*) pre:not(#\#):not(#\#){border-color:var(--border1-x1en7ut4)}
221
-
.borderColor-x3f55jo:is([data-selected]):not(#\#):not(#\#){border-color:var(--border3-x1lhdl2z)}
222
-
.borderColor-x1eiwmf5:is([data-hovered]):not(#\#):not(#\#){border-color:var(--border3-xm42ywm)}
223
-
.borderColor-xqq6sos:is([data-selected]):not(#\#):not(#\#)::after{border-color:var(--border3-xm42ywm)}
224
-
.borderColor-x1sy93ik:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#){border-color:var(--component1-x1gg3jrv)}
225
-
.borderColor-x14yyjta:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#){border-color:var(--component1-x1sghgg8)}
226
-
.borderColor-x1cdleqb:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#){border-color:var(--component1-x1ui28u3)}
227
-
.borderColor-x7uwspx:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#){border-color:var(--component2-x124xhl6)}
228
-
.borderColor-x1hjdiz4:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#){border-color:var(--component2-x124xhl6)}
229
-
.borderColor-x1u7xhzo:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#){border-color:var(--component2-x18xhj12)}
230
-
.borderColor-x12xzem2:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#){border-color:var(--component2-x1hhltqf)}
231
-
.borderColor-x1norvzd:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#){border-color:var(--component2-x1hhltqf)}
232
-
.borderColor-x18bsdji:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#){border-color:var(--component2-x1q29jlu)}
233
-
.borderColor-x1hn2oy6:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#){border-color:var(--component2-x1q29jlu)}
234
-
.borderColor-xrto6f1:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#){border-color:var(--component3-x1isc7sq)}
235
-
.borderColor-xh16ylw:is([data-drop-target]):not(#\#):not(#\#){border-color:var(--solid1-x6o1eyi)}
236
-
.borderRadius-x1t92zbi:is([data-size=lg]):not(#\#):not(#\#){border-radius:var(--lg-x1011bts)}
224
+
.borderColor-x12fox8i:is(*) pre:not(#\#):not(#\#){border-color:var(--border1-x11as8pt)}
225
+
.borderColor-x1weylw1:is([data-hovered]):not(#\#):not(#\#){border-color:var(--border3-x1be1b4q)}
226
+
.borderColor-xqvx02d:is([data-selected]):not(#\#):not(#\#)::after{border-color:var(--border3-x1be1b4q)}
227
+
.borderColor-x1xrhmbe:is([data-selected]):not(#\#):not(#\#){border-color:var(--border3-x1fv6rtg)}
228
+
.borderColor-xrj67hz:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#){border-color:var(--component1-x16ucms1)}
229
+
.borderColor-x1kgqhrx:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#){border-color:var(--component1-x17z0c80)}
230
+
.borderColor-x1e746jc:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#){border-color:var(--component1-x1e4ihis)}
231
+
.borderColor-x1v55q3n:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#){border-color:var(--component2-x18xvsux)}
232
+
.borderColor-x17ukjld:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#){border-color:var(--component2-x18xvsux)}
233
+
.borderColor-xtz5g1:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#){border-color:var(--component2-x1bs37nf)}
234
+
.borderColor-x16r5l2q:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#){border-color:var(--component2-x1bs37nf)}
235
+
.borderColor-x4r69j5:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#){border-color:var(--component2-xl2jk9r)}
236
+
.borderColor-xw9uukr:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#){border-color:var(--component2-xl2jk9r)}
237
+
.borderColor-xiy1x9r:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#){border-color:var(--component2-xx7wvuk)}
238
+
.borderColor-x1wwhzqd:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#){border-color:var(--component3-x11hgl6v)}
239
+
.borderColor-xdohbos:is([data-drop-target]):not(#\#):not(#\#){border-color:var(--solid1-xs64gu4)}
237
240
.borderRadius-xebk0zn:is([data-size=lg] *):not(#\#):not(#\#){border-radius:var(--lg-x1011bts)}
238
241
.borderRadius-x1yuwfv0:is(*) pre:not(#\#):not(#\#){border-radius:var(--md-x1o51v3i)}
239
-
.borderRadius-xsj6ar2:is([data-size=md]):not(#\#):not(#\#){border-radius:var(--md-x1o51v3i)}
240
242
.borderRadius-xaojaxi:is([data-size=md] *):not(#\#):not(#\#){border-radius:var(--md-x1o51v3i)}
241
-
.borderRadius-x1xma92x:is([data-size=sm]):not(#\#):not(#\#){border-radius:var(--sm-xp4zkua)}
242
243
.borderRadius-x1rz1h0l:is([data-size=sm] *):not(#\#):not(#\#){border-radius:var(--sm-xp4zkua)}
243
-
.borderRadius-xerymwo:is([data-size=xl]):not(#\#):not(#\#){border-radius:var(--xl-x195otgw)}
244
244
.borderStyle-xqya0cv:is(*) pre:not(#\#):not(#\#){border-style:solid}
245
245
.borderStyle-x1d6f3g8:is([data-drop-target]):not(#\#):not(#\#){border-style:solid}
246
246
.borderStyle-xwciwry:is([data-selected]):not(#\#):not(#\#)::after{border-style:solid}
···
249
249
.borderWidth-xqwsx7m:is([data-selected]):not(#\#):not(#\#)::after{border-width:1px}
250
250
.gap-x3qxcbn:is([data-size=sm]):not(#\#):not(#\#){gap:var(--_1-x1plbop)}
251
251
.gap-x1i12q1p:is([data-orientation=vertical]):not(#\#):not(#\#){gap:var(--_2-xsow7ju)}
252
-
.gridTemplateAreas-x1d8lqcm:is([data-empty-state-size=sm]):not(#\#):not(#\#){grid-template-areas:"image title" "image description"}
253
-
.gridTemplateAreas-x4jzqnn:is([data-empty-state-size=md],[data-empty-state-size=lg]):not(#\#):not(#\#){grid-template-areas:"image" "title" "description"}
254
-
.outline-x1wayld1:is([data-focus-visible] *):not(#\#):not(#\#){outline:2px solid var(--solid1-x1yanih7)}
252
+
.outline-x1yue699:is([data-focus-visible] *):not(#\#):not(#\#){outline:2px solid var(--solid1-x1qgqpcr)}
255
253
.textDecoration-x1meiurb:is([data-unavailable]):not(#\#):not(#\#){text-decoration:line-through}
256
254
.textDecoration-x17pbne7:is([data-breadcrumb] *):not(#\#):not(#\#){text-decoration:none}
257
255
.textDecoration-x1fyv82c:is([data-hovered]):not(#\#):not(#\#){text-decoration:underline}
258
-
.borderColor-x1vqnz6b:has([data-hovered]):not(#\#):not(#\#){border-color:var(--border3-x16mdiod)}
259
-
.borderColor-xlfq6zh:has([data-hovered]):not(#\#):not(#\#){border-color:var(--border3-x1afn5qd)}
260
-
.borderColor-xbu3y6y:has([data-hovered]):not(#\#):not(#\#){border-color:var(--border3-x1kngkfb)}
261
-
.borderColor-x1fywe2t:has([data-hovered]):not(:has([data-invalid])):not(#\#):not(#\#){border-color:var(--border3-xm42ywm)}
256
+
.borderColor-xjw1rlz:has([data-hovered]):not(#\#):not(#\#){border-color:var(--border3-x1587jaz)}
257
+
.borderColor-xxzyjj1:has([data-hovered]):not(:has([data-invalid])):not(#\#):not(#\#){border-color:var(--border3-x1be1b4q)}
258
+
.borderColor-xv450us:has([data-hovered]):not(#\#):not(#\#){border-color:var(--border3-x1cxb3of)}
259
+
.borderColor-x1yg0sa0:has([data-hovered]):not(#\#):not(#\#){border-color:var(--border3-x1wagwp)}
262
260
.gridTemplateAreas-xx842gn:has(label,[data-slider-output]):not(#\#):not(#\#){grid-template-areas:'label value-label' 'track track'}
263
261
@supports (corner-shape: squircle){.borderRadius-xdq5phb.borderRadius-xdq5phb:is(*) pre:not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
264
-
@supports (corner-shape: squircle){.borderRadius-xydlxy0.borderRadius-xydlxy0:is([data-size=lg]):not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
265
-
@supports (corner-shape: squircle){.borderRadius-x1sctp66.borderRadius-x1sctp66:is([data-size=md]):not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
266
-
@supports (corner-shape: squircle){.borderRadius-x4arbgl.borderRadius-x4arbgl:is([data-size=sm]):not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
267
-
@supports (corner-shape: squircle){.borderRadius-x1w2x00y.borderRadius-x1w2x00y:is([data-size=xl]):not(#\#):not(#\#){border-radius:var(--_3xl-x1bwjc12)}}
268
-
.gridTemplateAreas-x1ljrgqn:has([data-empty-state-actions]):is([data-empty-state-size=sm]):not(#\#):not(#\#){grid-template-areas:"image title actions" "image description actions"}
269
-
.gridTemplateAreas-x9cfk05:has([data-empty-state-actions]):is([data-empty-state-size=md],[data-empty-state-size=lg]):not(#\#):not(#\#){grid-template-areas:"image" "title" "description" "actions"}
270
262
.borderColor-x17yyxzj:disabled:not(#\#):not(#\#){border-color:transparent}
271
-
.borderColor-xwl4gkf:disabled:not(#\#):not(#\#){border-color:var(--component1-x11poo5x)}
272
-
.borderColor-x10hl8ol:hover:not(#\#):not(#\#){border-color:var(--border2-xavwyw3)}
273
-
.borderColor-x1jy64qq:hover:not(#\#):not(#\#){border-color:var(--border3-x16mdiod)}
274
-
.borderColor-x1dprclh:hover:not(#\#):not(#\#){border-color:var(--border3-x1lhdl2z)}
263
+
.borderColor-x16ivpeq:disabled:not(#\#):not(#\#){border-color:var(--component1-x1ojhc7k)}
264
+
.borderColor-xxjvwv0:hover:not(#\#):not(#\#){border-color:var(--border2-xxsd9i2)}
265
+
.borderColor-x1y7u23t:hover:not(#\#):not(#\#){border-color:var(--border3-x1be1b4q)}
266
+
.borderColor-x1wglu1c:hover:not(#\#):not(#\#){border-color:var(--border3-x1cxb3of)}
267
+
.borderColor-x1sq4kbd:hover:not(#\#):not(#\#){border-color:var(--border3-x1fv6rtg)}
275
268
.borderColor-x8vuplx:hover:not(#\#):not(#\#){border-color:var(--border3-x3z2k3q)}
276
-
.borderColor-x1nnb4vk:hover:not(#\#):not(#\#){border-color:var(--border3-xm42ywm)}
277
269
.borderColor-x9035ti:hover:not(#\#):not(#\#){border-color:var(--border3-xqf689p)}
278
-
.borderColor-xlq0dt:hover:not(#\#):not(#\#){border-color:var(--component2-x18xhj12)}
279
-
.borderColor-x1v4kup2:focus:not(#\#):not(#\#){border-color:var(--solid1-x1yanih7)}
270
+
.borderColor-xzt52ql:hover:not(#\#):not(#\#){border-color:var(--component2-xx7wvuk)}
271
+
.borderColor-x1fkpr51:focus:not(#\#):not(#\#){border-color:var(--solid1-x1qgqpcr)}
280
272
.outline-x1uvtmcs:focus:not(#\#):not(#\#){outline:none}
281
-
.borderColor-xr9x1gx:active:not(#\#):not(#\#){border-color:var(--border3-xm42ywm)}
282
-
.borderColor-xzr5fyu:active:not(#\#):not(#\#){border-color:var(--component3-x1isc7sq)}
273
+
.borderColor-x1h9215t:active:not(#\#):not(#\#){border-color:var(--border3-x1be1b4q)}
274
+
.borderColor-x8zghie:active:not(#\#):not(#\#){border-color:var(--component3-x11hgl6v)}
283
275
@media (prefers-reduced-motion: reduce){.transition-x9kvfbb.transition-x9kvfbb:not(#\#):not(#\#){transition:none}}
284
276
.alignContent-xc26acl:not(#\#):not(#\#):not(#\#){align-content:center}
285
277
.alignContent-x4465f1:not(#\#):not(#\#):not(#\#){align-content:end}
···
310
302
.backgroundColor-x1esc4pq:not(#\#):not(#\#):not(#\#){background-color:#14b8a6}
311
303
.backgroundColor-xcpsgoo:not(#\#):not(#\#):not(#\#){background-color:rgba(0,0,0,.5)}
312
304
.backgroundColor-xjbqb8w:not(#\#):not(#\#):not(#\#){background-color:transparent}
313
-
.backgroundColor-xpt24m0:not(#\#):not(#\#):not(#\#){background-color:var(--bg-x151sc8w)}
314
-
.backgroundColor-x1k29844:not(#\#):not(#\#):not(#\#){background-color:var(--bg-x175608s)}
315
-
.backgroundColor-x1l4czcd:not(#\#):not(#\#):not(#\#){background-color:var(--bg-x1jmar6b)}
316
-
.backgroundColor-x1cxuv9w:not(#\#):not(#\#):not(#\#){background-color:var(--bg-x1oix42s)}
317
-
.backgroundColor-x63xxpn:not(#\#):not(#\#):not(#\#){background-color:var(--bg-x1rxyl4a)}
318
-
.backgroundColor-x1r9drjd:not(#\#):not(#\#):not(#\#){background-color:var(--bg-xl687un)}
319
-
.backgroundColor-x1p10r6x:not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-x1eogh41)}
320
-
.backgroundColor-xg427dp:not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-x1y9leuq)}
321
-
.backgroundColor-x1tez0uk:not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-xi821rj)}
305
+
.backgroundColor-x1258bvr:not(#\#):not(#\#):not(#\#){background-color:var(--bg-x1aturvj)}
306
+
.backgroundColor-xpujea2:not(#\#):not(#\#):not(#\#){background-color:var(--bg-x1drn8y1)}
307
+
.backgroundColor-x1ed67tp:not(#\#):not(#\#):not(#\#){background-color:var(--bg-x1yrls9)}
308
+
.backgroundColor-xeqpuyd:not(#\#):not(#\#):not(#\#){background-color:var(--bg-x47z3hi)}
309
+
.backgroundColor-xi42ifg:not(#\#):not(#\#):not(#\#){background-color:var(--bg-xbgkqvh)}
310
+
.backgroundColor-x1g2mb47:not(#\#):not(#\#):not(#\#){background-color:var(--bg-xohqlzf)}
311
+
.backgroundColor-x15vp1h5:not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-x123awk4)}
312
+
.backgroundColor-xnryvut:not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-x1i13xn6)}
313
+
.backgroundColor-x16rw06s:not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-x1obn2uh)}
314
+
.backgroundColor-x1k5wrh7:not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-x1u2qu9m)}
322
315
.backgroundColor-x1s411yl:not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-xmjz13d)}
323
-
.backgroundColor-x11zz5ef:not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-xvpzc41)}
324
-
.backgroundColor-x7nz34z:not(#\#):not(#\#):not(#\#){background-color:var(--border1-x1en7ut4)}
325
-
.backgroundColor-x1vh6gzx:not(#\#):not(#\#):not(#\#){background-color:var(--border2-xavwyw3)}
326
-
.backgroundColor-xvf7uj2:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x11poo5x)}
327
-
.backgroundColor-x1a2iaau:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1gg3jrv)}
328
-
.backgroundColor-x1fv4v9l:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1sghgg8)}
329
-
.backgroundColor-x1nx5pi8:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1ui28u3)}
330
-
.backgroundColor-xyz3se4:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x43o0oh)}
331
-
.backgroundColor-xy55pl3:not(#\#):not(#\#):not(#\#){background-color:var(--component2-x124xhl6)}
332
-
.backgroundColor-x1kr21eg:not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
333
-
.backgroundColor-xclalfi:not(#\#):not(#\#):not(#\#){background-color:var(--component2-x1hhltqf)}
334
-
.backgroundColor-xwxmetc:not(#\#):not(#\#):not(#\#){background-color:var(--component2-x1q29jlu)}
316
+
.backgroundColor-xhr61r1:not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-xn5r12v)}
317
+
.backgroundColor-x10byn03:not(#\#):not(#\#):not(#\#){background-color:var(--border1-x11as8pt)}
318
+
.backgroundColor-xeaf3st:not(#\#):not(#\#):not(#\#){background-color:var(--border2-xxsd9i2)}
319
+
.backgroundColor-xoi7bxm:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x16ucms1)}
320
+
.backgroundColor-x1blkemx:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x17z0c80)}
321
+
.backgroundColor-xx6ox7:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1e4ihis)}
322
+
.backgroundColor-x1i2pggt:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1ojhc7k)}
323
+
.backgroundColor-x1u0djmp:not(#\#):not(#\#):not(#\#){background-color:var(--component1-xrqvod2)}
324
+
.backgroundColor-x48labv:not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xvsux)}
325
+
.backgroundColor-x1l1v8df:not(#\#):not(#\#):not(#\#){background-color:var(--component2-x1bs37nf)}
326
+
.backgroundColor-xkww27s:not(#\#):not(#\#):not(#\#){background-color:var(--component2-xl2jk9r)}
327
+
.backgroundColor-x1in19m2:not(#\#):not(#\#):not(#\#){background-color:var(--component2-xpnxlzk)}
328
+
.backgroundColor-x1uad2fy:not(#\#):not(#\#):not(#\#){background-color:var(--component2-xx7wvuk)}
335
329
.backgroundColor-xw3eyx6:not(#\#):not(#\#):not(#\#){background-color:var(--component2-xzjwbwe)}
336
-
.backgroundColor-x74tuy1:not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1ejz5cj)}
337
-
.backgroundColor-xkpi630:not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
338
-
.backgroundColor-xmiexp3:not(#\#):not(#\#):not(#\#){background-color:var(--component3-x3irpq9)}
339
-
.backgroundColor-x1wopwzl:not(#\#):not(#\#):not(#\#){background-color:var(--component3-x3nfkm8)}
340
-
.backgroundColor-xxm6bgo:not(#\#):not(#\#):not(#\#){background-color:var(--component3-xvwaia1)}
341
-
.backgroundColor-xyxz66h:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x1yanih7)}
342
-
.backgroundColor-x1uus1jj:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x2pkv20)}
330
+
.backgroundColor-x1nnhqtx:not(#\#):not(#\#):not(#\#){background-color:var(--component3-x11hgl6v)}
331
+
.backgroundColor-xhaq8gw:not(#\#):not(#\#):not(#\#){background-color:var(--component3-x156ikib)}
332
+
.backgroundColor-x103sky8:not(#\#):not(#\#):not(#\#){background-color:var(--component3-xhtfb9k)}
333
+
.backgroundColor-xc5i6f3:not(#\#):not(#\#):not(#\#){background-color:var(--component3-xi8u5z9)}
334
+
.backgroundColor-xgcrzmp:not(#\#):not(#\#):not(#\#){background-color:var(--component3-xzgtcz2)}
335
+
.backgroundColor-x19pk420:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x14k0c5u)}
336
+
.backgroundColor-x13ukgo7:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x1qgqpcr)}
337
+
.backgroundColor-x51ut5s:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x1uwop3o)}
343
338
.backgroundColor-xkg05a4:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x6o1eyi)}
344
-
.backgroundColor-x1ou224l:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-xmemhk6)}
345
-
.backgroundColor-xi0jere:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-xnhvmlu)}
346
-
.backgroundColor-x267pdx:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1ba3nh8)}
347
-
.backgroundColor-x5yh9jm:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1dbywqs)}
348
-
.backgroundColor-x1vti4om:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1rgzn25)}
349
-
.backgroundColor-xms3029:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x4985y2)}
350
-
.backgroundColor-x1hn9kz4:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-xlw47ga)}
339
+
.backgroundColor-x1ruha2d:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x6wzzll)}
340
+
.backgroundColor-x1m4zno4:not(#\#):not(#\#):not(#\#){background-color:var(--solid1-xs64gu4)}
341
+
.backgroundColor-xpg9a5c:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1crx5cu)}
342
+
.backgroundColor-x11sd72w:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1ubhs74)}
343
+
.backgroundColor-x1lca5q:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-xepqutl)}
344
+
.backgroundColor-xtw1ohb:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-xkcrude)}
345
+
.backgroundColor-xalgd7a:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-xvobw7z)}
351
346
.backgroundColor-x12peec7:not(#\#):not(#\#):not(#\#){background-color:white}
352
-
.backgroundImage-x1bl8eps:not(#\#):not(#\#):not(#\#){background-image:linear-gradient(-80deg,transparent 0%,transparent 30%,var(--component3-x1isc7sq) 50%,transparent 70%,transparent 100%)}
347
+
.backgroundImage-x13idnwe:not(#\#):not(#\#):not(#\#){background-image:linear-gradient(-80deg,transparent 0%,transparent 30%,var(--component3-x11hgl6v) 50%,transparent 70%,transparent 100%)}
353
348
.backgroundImage-xs7eep8:not(#\#):not(#\#):not(#\#){background-image:linear-gradient(135deg,var(--solid2-x1rgzn25) 0%,var(--text1-xc56m6b) 100%)}
354
-
.backgroundImage-x1kafqu6:not(#\#):not(#\#):not(#\#){background-image:repeating-linear-gradient(45deg,var(--solid1-x6o1eyi),var(--solid1-x6o1eyi) 20px,var(--border2-x130p4o0) 20px,var(--border2-x130p4o0) 40px)}
349
+
.backgroundImage-xuv1wvg:not(#\#):not(#\#):not(#\#){background-image:repeating-linear-gradient(45deg,var(--solid1-xs64gu4),var(--solid1-xs64gu4) 20px,var(--border2-xdhoy4z) 20px,var(--border2-xdhoy4z) 40px)}
355
350
.backgroundRepeat-xiy17q3:not(#\#):not(#\#):not(#\#){background-repeat:no-repeat}
356
351
.backgroundSize-x25l62i:not(#\#):not(#\#):not(#\#){background-size:100%}
357
352
.backgroundSize-x12z9qec:not(#\#):not(#\#):not(#\#){background-size:20%}
358
353
.borderCollapse-x1mwwwfo:not(#\#):not(#\#):not(#\#){border-collapse:collapse}
359
354
.borderSpacing-x1gukg7c:not(#\#):not(#\#):not(#\#){border-spacing:0}
360
355
.boxShadow-xa2943:not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 1px black,inset 0 0 0 1px black}
361
-
.boxShadow-x1uv2y6h:not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 2px var(--component1-x1gg3jrv)}
362
-
.boxShadow-xy8646n:not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 2px var(--component1-x1sghgg8)}
363
-
.boxShadow-xlf2e38:not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 2px var(--component1-x1ui28u3)}
356
+
.boxShadow-x5v59rp:not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 2px var(--component1-x16ucms1)}
357
+
.boxShadow-xwugb3g:not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 2px var(--component1-x17z0c80)}
358
+
.boxShadow-x14vp4js:not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 2px var(--component1-x1e4ihis)}
364
359
.boxShadow-x85lyh1:not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 10px 1px rgba(0,0,0,.1)}
365
360
.boxShadow-xkc5vb6:not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 8px 1px rgba(0,0,0,.2)}
366
361
.boxShadow-x1gnnqk1:not(#\#):not(#\#):not(#\#){box-shadow:none}
···
374
369
.color-x1heor9g:not(#\#):not(#\#):not(#\#){color:inherit}
375
370
.color-x1g041ww:not(#\#):not(#\#):not(#\#){color:light-dark(white,black)}
376
371
.color-x13p24mn:not(#\#):not(#\#):not(#\#){color:var(--solid1-x6o1eyi)}
372
+
.color-xub2jqh:not(#\#):not(#\#):not(#\#){color:var(--solid1-xs64gu4)}
377
373
.color-xrykz3h:not(#\#):not(#\#):not(#\#){color:var(--solid2-x1dbywqs)}
378
374
.color-x1ji32hz:not(#\#):not(#\#):not(#\#){color:var(--solid2-x1rgzn25)}
379
-
.color-xvqu39i:not(#\#):not(#\#):not(#\#){color:var(--text1-x1pj8xh0)}
380
-
.color-xyxuv7z:not(#\#):not(#\#):not(#\#){color:var(--text1-x253p4m)}
375
+
.color-x1ee9rt7:not(#\#):not(#\#):not(#\#){color:var(--text1-x1pbhz26)}
376
+
.color-x9q3a0c:not(#\#):not(#\#):not(#\#){color:var(--text1-x1s275lk)}
377
+
.color-xfq4jxp:not(#\#):not(#\#):not(#\#){color:var(--text1-x1umfgwa)}
378
+
.color-x1b49xvv:not(#\#):not(#\#):not(#\#){color:var(--text1-x45q57k)}
381
379
.color-x17eu1j6:not(#\#):not(#\#):not(#\#){color:var(--text1-xb5nrd9)}
382
380
.color-xqle7yb:not(#\#):not(#\#):not(#\#){color:var(--text1-xc56m6b)}
383
-
.color-xbhoie5:not(#\#):not(#\#):not(#\#){color:var(--text1-xccyl1g)}
384
-
.color-x1t52da2:not(#\#):not(#\#):not(#\#){color:var(--text1-xjn2lxg)}
385
-
.color-xc1cpzf:not(#\#):not(#\#):not(#\#){color:var(--text2-x1drysnq)}
386
-
.color-x1a78sfz:not(#\#):not(#\#):not(#\#){color:var(--text2-x1ew83cn)}
387
-
.color-x1x394q5:not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
381
+
.color-x1wes0ss:not(#\#):not(#\#):not(#\#){color:var(--text1-xpii5us)}
382
+
.color-x1qdyb4b:not(#\#):not(#\#):not(#\#){color:var(--text1-xw4mcn1)}
383
+
.color-x1fsez3s:not(#\#):not(#\#):not(#\#){color:var(--text2-x1kg2ygz)}
384
+
.color-x1mee78f:not(#\#):not(#\#):not(#\#){color:var(--text2-x1l5nls6)}
385
+
.color-x9rezns:not(#\#):not(#\#):not(#\#){color:var(--text2-x1u4qfl5)}
386
+
.color-x1kyf0hv:not(#\#):not(#\#):not(#\#){color:var(--text2-x1xyma3f)}
388
387
.color-x1vmc86j:not(#\#):not(#\#):not(#\#){color:var(--text2-x6gkmtf)}
389
-
.color-xlv6qze:not(#\#):not(#\#):not(#\#){color:var(--text2-xcv02bb)}
390
-
.color-x1n45ymj:not(#\#):not(#\#):not(#\#){color:var(--textContrast-x1gt1e58)}
391
-
.color-x5xs1dj:not(#\#):not(#\#):not(#\#){color:var(--textContrast-x1xz901g)}
392
-
.color-x1dc14gg:not(#\#):not(#\#):not(#\#){color:var(--textContrast-xk9atbi)}
388
+
.color-x7l6lhp:not(#\#):not(#\#):not(#\#){color:var(--text2-xelq0bc)}
389
+
.color-x1c2i756:not(#\#):not(#\#):not(#\#){color:var(--textContrast-x15nwm92)}
390
+
.color-x1tz4loq:not(#\#):not(#\#):not(#\#){color:var(--textContrast-x1f1q847)}
391
+
.color-xtiqitw:not(#\#):not(#\#):not(#\#){color:var(--textContrast-x1f99jtk)}
392
+
.color-xnsj7wm:not(#\#):not(#\#):not(#\#){color:var(--textContrast-x1rjp7a6)}
393
393
.color-x1pz8lci:not(#\#):not(#\#):not(#\#){color:var(--textContrast-xmd31bd)}
394
394
.color-xfru5vu:not(#\#):not(#\#):not(#\#){color:var(--textDim-x17ce2fr)}
395
395
.color-xagf5oq:not(#\#):not(#\#):not(#\#){color:var(--textDim-x1v8eiz3)}
···
410
410
.display-x1rg5ohu:not(#\#):not(#\#):not(#\#){display:inline-block}
411
411
.display-x3nfvp2:not(#\#):not(#\#):not(#\#){display:inline-flex}
412
412
.display-x1s85apg:not(#\#):not(#\#):not(#\#){display:none}
413
-
.fill-x9d69u1:not(#\#):not(#\#):not(#\#){fill:var(--bg-x151sc8w)}
413
+
.fill-x11esupn:not(#\#):not(#\#):not(#\#){fill:var(--bg-xohqlzf)}
414
414
.fill-x1b0arvy:not(#\#):not(#\#):not(#\#){fill:var(--solid1-x6o1eyi)}
415
-
.filter-x1j01woz:not(#\#):not(#\#):not(#\#){filter:drop-shadow(-0.5px -0.5px 0 var(--border2-xavwyw3)) drop-shadow(.5px -0.5px 0 var(--border2-xavwyw3)) drop-shadow(.5px .5px 0 var(--border2-xavwyw3)) drop-shadow(-0.5px .5px 0 var(--border2-xavwyw3)) drop-shadow(0px 1px 3px rgb(0 0 0 / .1)) drop-shadow(0 -1px 3px rgb(0 0 0 / .1))}
415
+
.filter-x1jkiwv0:not(#\#):not(#\#):not(#\#){filter:drop-shadow(-0.5px -0.5px 0 var(--border2-xxsd9i2)) drop-shadow(.5px -0.5px 0 var(--border2-xxsd9i2)) drop-shadow(.5px .5px 0 var(--border2-xxsd9i2)) drop-shadow(-0.5px .5px 0 var(--border2-xxsd9i2)) drop-shadow(0px 1px 3px rgb(0 0 0 / .1)) drop-shadow(0 -1px 3px rgb(0 0 0 / .1))}
416
416
.flexBasis-x1t1x2f9:not(#\#):not(#\#):not(#\#){flex-basis:0%}
417
417
.flexBasis-xdl72j9:not(#\#):not(#\#):not(#\#){flex-basis:auto}
418
418
.flexBasis-x199s2q5:not(#\#):not(#\#):not(#\#){flex-basis:calc((1 / var(--items-per-row)) * (100% - (var(--toggle-button-group-gap) * (var(--items-per-row) - 1))))}
···
505
505
.opacity-x1hc1fzr:not(#\#):not(#\#):not(#\#){opacity:1}
506
506
.outlineColor-x1vjhitx:not(#\#):not(#\#):not(#\#){outline-color:blue}
507
507
.outlineColor-x1lu3twc:not(#\#):not(#\#):not(#\#){outline-color:var(--solid1-x6o1eyi)}
508
+
.outlineColor-xg4rixe:not(#\#):not(#\#):not(#\#){outline-color:var(--solid1-xs64gu4)}
508
509
.outlineOffset-x1hl8ikr:not(#\#):not(#\#):not(#\#){outline-offset:2px}
509
510
.outlineStyle-xaatb59:not(#\#):not(#\#):not(#\#){outline-style:solid}
510
511
.outlineWidth-x1k57tk5:not(#\#):not(#\#):not(#\#){outline-width:0}
···
538
539
.transform-xuuh30:not(#\#):not(#\#):not(#\#){transform:translateX(-50%)}
539
540
.transform-x1cb1t30:not(#\#):not(#\#):not(#\#){transform:translateY(-50%)}
540
541
.transform-xsqj5wx:not(#\#):not(#\#):not(#\#){transform:var(--x-transform)}
541
-
.transitionDuration-x1g2r6go:not(#\#):not(#\#):not(#\#){transition-duration:.1s}
542
542
.transitionDuration-xpfv6me:not(#\#):not(#\#):not(#\#){transition-duration:var(--default-x1seeabg)}
543
543
.transitionDuration-xx08pzc:not(#\#):not(#\#):not(#\#){transition-duration:var(--fast-x1gssecm)}
544
544
.transitionDuration-x85ithh:not(#\#):not(#\#):not(#\#){transition-duration:var(--fast-x6ual6w)}
···
585
585
.animationName-xfv8cg2:is([data-entering]):not(#\#):not(#\#):not(#\#){animation-name:var(--zoomIn-xe8tyo6)}
586
586
.animationTimingFunction-xyfghb2:is([data-entering]):not(#\#):not(#\#):not(#\#){animation-timing-function:cubic-bezier(.175,.885,.32,1.275)}
587
587
.backgroundColor-x6yz6ea:is(*):not(#\#):not(#\#):not(#\#)::before{background-color:transparent}
588
-
.backgroundColor-x7yv93o:is([data-state='dragging']):not(#\#):not(#\#):not(#\#){background-color:var(--border2-x130p4o0)}
589
-
.backgroundColor-x1ccbx3t:is([data-hovered=true] *):not(#\#):not(#\#):not(#\#){background-color:var(--border2-xavwyw3)}
590
-
.backgroundColor-x1xgxvzy:is([data-resizing=true] *):not(#\#):not(#\#):not(#\#){background-color:var(--border3-xm42ywm)}
591
-
.backgroundColor-x1bwnevv:is([data-disabled=true] *):not(#\#):not(#\#):not(#\#){background-color:var(--border3-xm42ywm)}
592
-
.backgroundColor-xvlnlln:hover:not([data-state='dragging']):not(#\#):not(#\#):not(#\#){background-color:var(--border3-xm42ywm)}
593
-
.backgroundColor-x1ymmlfe:is([data-hovered]):not(#\#):not(#\#):not(#\#){background-color:var(--component1-x11poo5x)}
594
-
.backgroundColor-x9mfpjm:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1gg3jrv)}
595
-
.backgroundColor-x5c6nzi:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1sghgg8)}
596
-
.backgroundColor-x1d3hb8j:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1ui28u3)}
597
-
.backgroundColor-xty7e01:is([data-drop-target]):not(#\#):not(#\#):not(#\#){background-color:var(--component1-x43o0oh)}
598
-
.backgroundColor-x1p3054l:is([data-selected]):not(#\#):not(#\#):not(#\#){background-color:var(--component1-x43o0oh)}
599
-
.backgroundColor-x1azejus:is([data-selected]):not([data-selection-start],[data-selection-end]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--component1-x43o0oh)}
600
-
.backgroundColor-xhd8mbf:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x124xhl6)}
601
-
.backgroundColor-x1hjp71x:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x124xhl6)}
602
-
.backgroundColor-xzckxse:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x124xhl6)}
603
-
.backgroundColor-xj1svf1:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
604
-
.backgroundColor-x1a4xmkr:is([data-hovered=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
605
-
.backgroundColor-x3iekxc:is([data-react-aria-pressable=true]:hover:not([data-disabled]) *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
606
-
.backgroundColor-x15ownq4:is([data-hovered]):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
607
-
.backgroundColor-xh32jup:is([data-pressed]):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
608
-
.backgroundColor-x1xa9zv7:is([data-variant=secondary] *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
609
-
.backgroundColor-x2jfmnu:is([data-hovered]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--component2-x18xhj12)}
610
-
.backgroundColor-xsd57se:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x1hhltqf)}
611
-
.backgroundColor-x1akb97j:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x1hhltqf)}
612
-
.backgroundColor-xtgxwrx:is([data-variant=success] *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x1hhltqf)}
613
-
.backgroundColor-x1u4j5me:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x1q29jlu)}
614
-
.backgroundColor-x3h62z9:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x1q29jlu)}
615
-
.backgroundColor-x6d30c2:is([data-variant=warning] *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x1q29jlu)}
616
-
.backgroundColor-xllbmhp:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-xzjwbwe)}
617
-
.backgroundColor-x1q7fcaw:is([data-hovered=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component2-xzjwbwe)}
618
-
.backgroundColor-xfnscv6:is([data-variant=primary] *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-xzjwbwe)}
619
-
.backgroundColor-xk7lcje:is([data-selected]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--component2-xzjwbwe)}
620
-
.backgroundColor-x1l0anta:is([data-selection-start],[data-selection-end]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--component2-xzjwbwe)}
621
-
.backgroundColor-xkhw87q:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1ejz5cj)}
622
-
.backgroundColor-x174ku2b:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1ejz5cj)}
623
-
.backgroundColor-xbmc7h8:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
624
-
.backgroundColor-xibgg82:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
625
-
.backgroundColor-x1n9l9xn:is([data-pressed=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
626
-
.backgroundColor-x18u3sjz:is([data-dragging=true]):is([data-dragging=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
627
-
.backgroundColor-xvke1tl:is([data-react-aria-pressable=true]:not([data-disabled]):active *):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
628
-
.backgroundColor-x1w0eppo:is([data-pressed]):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
629
-
.backgroundColor-x11hzcxw:is([data-pressed]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--component3-x1isc7sq)}
630
-
.backgroundColor-xfj0oy5:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x3irpq9)}
631
-
.backgroundColor-xlnddd4:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x3irpq9)}
632
-
.backgroundColor-x1qt1x9y:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x3nfkm8)}
633
-
.backgroundColor-x127wlr:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x3nfkm8)}
588
+
.backgroundColor-x150fiwq:is([data-state='dragging']):not(#\#):not(#\#):not(#\#){background-color:var(--border2-xdhoy4z)}
589
+
.backgroundColor-xgtr15:is([data-hovered=true] *):not(#\#):not(#\#):not(#\#){background-color:var(--border2-xxsd9i2)}
590
+
.backgroundColor-x1rh4ari:is([data-resizing=true] *):not(#\#):not(#\#):not(#\#){background-color:var(--border3-x1be1b4q)}
591
+
.backgroundColor-xpz5vvc:is([data-disabled=true] *):not(#\#):not(#\#):not(#\#){background-color:var(--border3-x1be1b4q)}
592
+
.backgroundColor-xef9062:hover:not([data-state='dragging']):not(#\#):not(#\#):not(#\#){background-color:var(--border3-x1be1b4q)}
593
+
.backgroundColor-xvbr6sj:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component1-x16ucms1)}
594
+
.backgroundColor-xwk5gtt:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component1-x17z0c80)}
595
+
.backgroundColor-xw4t7ku:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1e4ihis)}
596
+
.backgroundColor-x1yfru4l:is([data-hovered]):not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1ojhc7k)}
597
+
.backgroundColor-xd1pnix:is([data-drop-target]):not(#\#):not(#\#):not(#\#){background-color:var(--component1-xrqvod2)}
598
+
.backgroundColor-x1t8opny:is([data-selected]):not(#\#):not(#\#):not(#\#){background-color:var(--component1-xrqvod2)}
599
+
.backgroundColor-x1tm8rzt:is([data-selected]):not([data-selection-start],[data-selection-end]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--component1-xrqvod2)}
600
+
.backgroundColor-x1926plm:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xvsux)}
601
+
.backgroundColor-x18i4t2:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xvsux)}
602
+
.backgroundColor-xlwg6he:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xvsux)}
603
+
.backgroundColor-xqi3tdy:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x1bs37nf)}
604
+
.backgroundColor-xth593p:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x1bs37nf)}
605
+
.backgroundColor-xcgvmh:is([data-variant=warning] *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-x1bs37nf)}
606
+
.backgroundColor-x1tqfyr:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-xl2jk9r)}
607
+
.backgroundColor-x7jtvd1:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-xl2jk9r)}
608
+
.backgroundColor-x1d9ppl8:is([data-variant=success] *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-xl2jk9r)}
609
+
.backgroundColor-xivahlm:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-xpnxlzk)}
610
+
.backgroundColor-x1uov4wm:is([data-hovered=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component2-xpnxlzk)}
611
+
.backgroundColor-x1lfvt6i:is([data-variant=primary] *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-xpnxlzk)}
612
+
.backgroundColor-xls3b57:is([data-selected]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--component2-xpnxlzk)}
613
+
.backgroundColor-x1etuwtc:is([data-selection-start],[data-selection-end]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--component2-xpnxlzk)}
614
+
.backgroundColor-x1qthavv:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component2-xx7wvuk)}
615
+
.backgroundColor-xxl12ax:is([data-hovered=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component2-xx7wvuk)}
616
+
.backgroundColor-x1rp42tc:is([data-react-aria-pressable=true]:hover:not([data-disabled]) *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-xx7wvuk)}
617
+
.backgroundColor-xwapf0n:is([data-hovered]):not(#\#):not(#\#):not(#\#){background-color:var(--component2-xx7wvuk)}
618
+
.backgroundColor-x4tq65h:is([data-variant=secondary] *):not(#\#):not(#\#):not(#\#){background-color:var(--component2-xx7wvuk)}
619
+
.backgroundColor-x1vf1kub:is([data-pressed]):not(#\#):not(#\#):not(#\#){background-color:var(--component2-xx7wvuk)}
620
+
.backgroundColor-xbjw1w3:is([data-hovered]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--component2-xx7wvuk)}
621
+
.backgroundColor-xyw9x7e:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x11hgl6v)}
622
+
.backgroundColor-x1dc7neo:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x11hgl6v)}
623
+
.backgroundColor-x1iu8jvy:is([data-pressed=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x11hgl6v)}
624
+
.backgroundColor-x1ip9n1c:is([data-dragging=true]):is([data-dragging=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x11hgl6v)}
625
+
.backgroundColor-x107hw1x:is([data-react-aria-pressable=true]:not([data-disabled]):active *):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x11hgl6v)}
626
+
.backgroundColor-xlvb29a:is([data-pressed]):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x11hgl6v)}
627
+
.backgroundColor-x14cmzjb:is([data-pressed]):not([data-unavailable]):not(#\#):not(#\#):not(#\#)::before{background-color:var(--component3-x11hgl6v)}
628
+
.backgroundColor-x10zwvfr:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x156ikib)}
629
+
.backgroundColor-xsqiusp:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x156ikib)}
634
630
.backgroundColor-xfm9g3v:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-x4u0l1k)}
635
-
.backgroundColor-x120yizm:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-xvwaia1)}
636
-
.backgroundColor-xgaer2l:is(:active,[data-pressed=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component3-xvwaia1)}
637
-
.backgroundColor-x9pex8s:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-xvwaia1)}
638
-
.backgroundColor-xbhw3a7:is([data-pressed=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component3-xvwaia1)}
639
-
.backgroundColor-x10vob7d:is([data-selected]):not([data-unavailable]):hover:not(#\#):not(#\#):not(#\#)::before{background-color:var(--component3-xvwaia1)}
640
-
.backgroundColor-x1e0gckj:is([data-selection-start],[data-selection-end]):not([data-unavailable]):hover:not(#\#):not(#\#):not(#\#)::before{background-color:var(--component3-xvwaia1)}
641
-
.backgroundColor-xzrhb8f:is([data-variant=secondary] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x1yanih7)}
642
-
.backgroundColor-x17491x2:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x2pkv20)}
631
+
.backgroundColor-x1siz3tu:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-xhtfb9k)}
632
+
.backgroundColor-x1yz608n:is(:active,[data-pressed=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component3-xhtfb9k)}
633
+
.backgroundColor-xwidnyz:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-xhtfb9k)}
634
+
.backgroundColor-xjda1t6:is([data-pressed=true]):not(#\#):not(#\#):not(#\#){background-color:var(--component3-xhtfb9k)}
635
+
.backgroundColor-x1klb3hm:is([data-selected]):not([data-unavailable]):hover:not(#\#):not(#\#):not(#\#)::before{background-color:var(--component3-xhtfb9k)}
636
+
.backgroundColor-x17sfhyp:is([data-selection-start],[data-selection-end]):not([data-unavailable]):hover:not(#\#):not(#\#):not(#\#)::before{background-color:var(--component3-xhtfb9k)}
637
+
.backgroundColor-x1kmua7d:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-xi8u5z9)}
638
+
.backgroundColor-x1yvw66n:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-xi8u5z9)}
639
+
.backgroundColor-x14k3s4t:is(:active,[data-pressed=true]):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-xzgtcz2)}
640
+
.backgroundColor-x1t68akw:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--component3-xzgtcz2)}
641
+
.backgroundColor-x1txcqx6:is([data-variant=secondary] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x1qgqpcr)}
642
+
.backgroundColor-x7yjmlq:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x1uwop3o)}
643
643
.backgroundColor-x1ck3tfv:hover:not(#\#):not(#\#):not(#\#)::before{background-color:var(--solid1-x6o1eyi)}
644
-
.backgroundColor-x1aw4n5j:is([data-selected=true] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x6o1eyi)}
645
-
.backgroundColor-x61hwtc:is([data-variant=primary] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x6o1eyi)}
646
-
.backgroundColor-xxpmrhf:is([data-variant=success] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-xmemhk6)}
647
-
.backgroundColor-x2bbucx:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1ba3nh8)}
648
-
.backgroundColor-xdx23yb:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1dbywqs)}
649
-
.backgroundColor-x1ukug4a:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1rgzn25)}
650
-
.backgroundColor-x8b2kiq:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x4985y2)}
651
-
.backgroundColor-xsfl4k6:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-xlw47ga)}
652
-
.backgroundColor-x1anma2h:is([data-variant=warning] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-xlw47ga)}
653
-
.backgroundImage-x1beqnot:is([data-disabled]):not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--component2-x18xhj12),var(--component2-x18xhj12))!important}
644
+
.backgroundColor-xjxg5cl:is([data-variant=success] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-x6wzzll)}
645
+
.backgroundColor-x1k1fne4:is([data-selected=true] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-xs64gu4)}
646
+
.backgroundColor-xnqmgiw:is([data-variant=primary] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid1-xs64gu4)}
647
+
.backgroundColor-xfviuw8:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1crx5cu)}
648
+
.backgroundColor-x1i57evq:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1ubhs74)}
649
+
.backgroundColor-x1s4idtu:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-xepqutl)}
650
+
.backgroundColor-x17ls61m:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-xkcrude)}
651
+
.backgroundColor-x1pvvomg:hover:not(:has(* button:hover)):not(:disabled):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-xvobw7z)}
652
+
.backgroundColor-x1am773g:is([data-variant=warning] *):not(#\#):not(#\#):not(#\#){background-color:var(--solid2-xvobw7z)}
653
+
.backgroundImage-x30ua8e:is([data-disabled]):not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--component2-xx7wvuk),var(--component2-xx7wvuk))!important}
654
654
.borderBottomLeftWidth-xti2wqi:is(:not(:first-child)) *:not(#\#):not(#\#):not(#\#){border-bottom-left-width:0}
655
655
.boxShadow-x19pap68:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 2px 1px rgba(0,0,0,.2)}
656
656
.boxShadow-xf34dur:is([data-variant=primary] *):not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 2px 1px rgba(0,0,0,.2)}
657
657
.boxShadow-xe1oxu5:is([data-variant=secondary] *):not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 2px 1px rgba(0,0,0,.2)}
658
658
.boxShadow-xdsxzvj:is([data-variant=success] *):not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 2px 1px rgba(0,0,0,.2)}
659
659
.boxShadow-x10iyi2d:is([data-variant=warning] *):not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 2px 1px rgba(0,0,0,.2)}
660
-
.color-x1rssh9o:is([data-react-aria-pressable=true][data-disabled] *):not(#\#):not(#\#):not(#\#){color:var(--border3-xm42ywm)}
661
-
.color-x1e3r2xt:is([data-variant=warning] *):not(#\#):not(#\#):not(#\#){color:var(--text1-x1pj8xh0)}
662
-
.color-x17661w7:is([data-variant=success] *):not(#\#):not(#\#):not(#\#){color:var(--text1-x253p4m)}
663
-
.color-x18y9v2v:is([data-breadcrumb] *):not(#\#):not(#\#):not(#\#){color:var(--text1-xb5nrd9)}
664
-
.color-xnfuzeh:is(:not(#\#):not(#\#):not(#\#)::placeholder,[data-placeholder]){color:var(--text1-xb5nrd9)}
665
-
.color-xr273q8:is([data-current]):not(#\#):not(#\#):not(#\#){color:var(--text1-xb5nrd9)}
666
-
.color-xl7gfqg:is([data-placeholder]):not(#\#):not(#\#):not(#\#){color:var(--text1-xb5nrd9)}
667
-
.color-x3dk8ss:is([data-variant=destructive] *):not(#\#):not(#\#):not(#\#){color:var(--text1-xjn2lxg)}
668
-
.color-x15gqzh4:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){color:var(--text1-xjn2lxg)}
669
-
.color-xfg0ta2:is([data-breadcrumb][data-current] *):not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
670
-
.color-x1gaf1qe:is([data-hovered]):not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
671
-
.color-xis98h5:is([data-selected]):not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
672
-
.color-xjka5tq:is([data-hovered],[data-focused],[data-selected]):not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
673
-
.color-xat45n7:is([data-hovered]):not([data-unavailable]):not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
674
-
.color-x8zdt5v:is([data-selected]):not(#\#):not(#\#):not(#\#){color:var(--text2-x6gkmtf)}
675
-
.color-x16entun:is([data-selection-start],[data-selection-end]):not(#\#):not(#\#):not(#\#){color:var(--text2-x6gkmtf)}
676
-
.color-x1v12cwp:is([data-variant=warning] *):not(#\#):not(#\#):not(#\#){color:var(--text2-xcv02bb)}
677
-
.color-x1cw8dt2:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){color:var(--textContrast-x116zh0m)}
678
-
.color-x1juwwod:is([data-variant=success] *):not(#\#):not(#\#):not(#\#){color:var(--textContrast-x1xz901g)}
679
-
.columnGap-x1lrzex8:is([data-empty-state-size=sm]):not(#\#):not(#\#):not(#\#){column-gap:var(--_4-xgvn2um)}
660
+
.color-x1c4os4c:is([data-react-aria-pressable=true][data-disabled] *):not(#\#):not(#\#):not(#\#){color:var(--border3-x1be1b4q)}
661
+
.color-xufwy4v:is([data-variant=success] *):not(#\#):not(#\#):not(#\#){color:var(--text1-x1s275lk)}
662
+
.color-xdt1xqa:is([data-variant=destructive] *):not(#\#):not(#\#):not(#\#){color:var(--text1-x1umfgwa)}
663
+
.color-x1tqrvjy:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){color:var(--text1-x1umfgwa)}
664
+
.color-x21l3u3:is([data-breadcrumb] *):not(#\#):not(#\#):not(#\#){color:var(--text1-x45q57k)}
665
+
.color-x14nsdjc:is(:not(#\#):not(#\#):not(#\#)::placeholder,[data-placeholder]){color:var(--text1-x45q57k)}
666
+
.color-x1e5cg24:is([data-current]):not(#\#):not(#\#):not(#\#){color:var(--text1-x45q57k)}
667
+
.color-x1oj07n7:is([data-placeholder]):not(#\#):not(#\#):not(#\#){color:var(--text1-x45q57k)}
668
+
.color-xslau8o:is([data-variant=warning] *):not(#\#):not(#\#):not(#\#){color:var(--text1-xw4mcn1)}
669
+
.color-xk6mey7:is([data-variant=warning] *):not(#\#):not(#\#):not(#\#){color:var(--text2-x1u4qfl5)}
670
+
.color-x889psc:is([data-selected]):not(#\#):not(#\#):not(#\#){color:var(--text2-x1xyma3f)}
671
+
.color-x1fj5yzg:is([data-selection-start],[data-selection-end]):not(#\#):not(#\#):not(#\#){color:var(--text2-x1xyma3f)}
672
+
.color-xk6bjvc:is([data-breadcrumb][data-current] *):not(#\#):not(#\#):not(#\#){color:var(--text2-xelq0bc)}
673
+
.color-xwj4xq3:is([data-hovered]):not(#\#):not(#\#):not(#\#){color:var(--text2-xelq0bc)}
674
+
.color-xqk162a:is([data-selected]):not(#\#):not(#\#):not(#\#){color:var(--text2-xelq0bc)}
675
+
.color-xof2rvm:is([data-hovered],[data-focused],[data-selected]):not(#\#):not(#\#):not(#\#){color:var(--text2-xelq0bc)}
676
+
.color-xgxmptl:is([data-hovered]):not([data-unavailable]):not(#\#):not(#\#):not(#\#){color:var(--text2-xelq0bc)}
677
+
.color-x1p1glbl:is([data-variant=critical] *):not(#\#):not(#\#):not(#\#){color:var(--textContrast-x1mspsiw)}
678
+
.color-x1luw3h8:is([data-variant=success] *):not(#\#):not(#\#):not(#\#){color:var(--textContrast-x1rjp7a6)}
680
679
.cornerShape-x12tbmpm:is(*) pre:not(#\#):not(#\#):not(#\#){corner-shape:squircle}
681
680
.cursor-x1w11t6e:is([data-resizable-direction=left]):not(#\#):not(#\#):not(#\#){cursor:e-resize}
682
681
.cursor-x1oooc6o:is([data-resizable-direction=both]):not(#\#):not(#\#):not(#\#){cursor:ew-resize}
···
697
696
.fontSize-x1h5ralm:is([data-size=md] *):not(#\#):not(#\#):not(#\#){font-size:var(--base-xidomu0)}
698
697
.fontSize-x1a19hz7:is([data-size=lg]):not(#\#):not(#\#):not(#\#){font-size:var(--base-xidomu0)}
699
698
.fontSize-x175ohug:is([data-size=lg] *):not(#\#):not(#\#):not(#\#){font-size:var(--base-xidomu0)}
700
-
.fontSize-x1py6ykt:is([data-size=lg] *):not(#\#):not(#\#):not(#\#){font-size:var(--lg-x1hevvyd)}
701
699
.fontSize-x1fkmo1y:is([data-card-size='sm'] *):not(#\#):not(#\#):not(#\#){font-size:var(--lg-x1hevvyd)}
700
+
.fontSize-x1py6ykt:is([data-size=lg] *):not(#\#):not(#\#):not(#\#){font-size:var(--lg-x1hevvyd)}
702
701
.fontSize-x1ktbii6:is([data-empty-state-size='sm'] *):not(#\#):not(#\#):not(#\#){font-size:var(--lg-x1hevvyd)}
703
702
.fontSize-xiceyaw:is([data-size=sm] *):not(#\#):not(#\#):not(#\#){font-size:var(--sm-x1w27pzf)}
704
703
.fontSize-x1bzifm9:is([data-size=md]):not(#\#):not(#\#):not(#\#){font-size:var(--sm-x1w27pzf)}
705
704
.fontSize-x1ya0evx:is([data-size=md] *):not(#\#):not(#\#):not(#\#){font-size:var(--sm-x1w27pzf)}
706
-
.fontSize-xonwjwx:is([data-size=xl] *):not(#\#):not(#\#):not(#\#){font-size:var(--xl-x1vzl7l6)}
707
705
.fontSize-xujovw0:is([data-card-size='md'] *):not(#\#):not(#\#):not(#\#){font-size:var(--xl-x1vzl7l6)}
708
706
.fontSize-x14tgbhz:is([data-empty-state-size='md'] *):not(#\#):not(#\#):not(#\#){font-size:var(--xl-x1vzl7l6)}
709
707
.fontSize-x1w3w1z:is([data-size=sm]):not(#\#):not(#\#):not(#\#){font-size:var(--xs-x1vaen13)}
710
708
.fontSize-x14nmpad:is([data-size=sm] *):not(#\#):not(#\#):not(#\#){font-size:var(--xs-x1vaen13)}
711
709
.fontWeight-x12f8piz:is([data-react-aria-pressable=true][data-selected=true]):not(#\#):not(#\#):not(#\#){font-weight:var(--medium-x1tobmye)}
712
710
.fontWeight-x6i2wo5:is([data-current]):not(#\#):not(#\#):not(#\#){font-weight:var(--medium-x1tobmye)}
713
-
.gridTemplateColumns-xl84o51:is([data-empty-state-size=sm]):not(#\#):not(#\#):not(#\#){grid-template-columns:min-content 1fr}
714
-
.justifyItems-x14u8no6:is([data-empty-state-size=md],[data-empty-state-size=lg]):not(#\#):not(#\#):not(#\#){justify-items:center}
715
-
.justifyItems-x1h912m2:is([data-empty-state-size=sm]):not(#\#):not(#\#):not(#\#){justify-items:start}
716
711
.lineHeight-xx24gj9:is(li *):not(#\#):not(#\#):not(#\#){line-height:var(--base-x17a3wz2)}
717
712
.lineHeight-x1qqnixq:is(blockquote *):not(#\#):not(#\#):not(#\#){line-height:var(--base-x17a3wz2)}
718
713
.lineHeight-x1g66cck:is([data-size=lg]):not(#\#):not(#\#):not(#\#){line-height:var(--base-x17a3wz2)}
···
741
736
.pointerEvents-x19hqv7w:is([data-exiting], [data-exiting] > *):not(#\#):not(#\#):not(#\#){pointer-events:none}
742
737
.rotate-xufvh4u:is([aria-expanded=true] *):not(#\#):not(#\#):not(#\#){rotate:180deg}
743
738
.rotate-x18ellfx:is([aria-expanded=true] *):not(#\#):not(#\#):not(#\#){rotate:90deg}
744
-
.rowGap-x1w7h5gl:is([data-empty-state-size=sm]):not(#\#):not(#\#):not(#\#){row-gap:var(--_2-xsow7ju)}
745
-
.rowGap-x1fg3xu1:is([data-empty-state-size=md]):not(#\#):not(#\#):not(#\#){row-gap:var(--_4-xgvn2um)}
746
-
.rowGap-x4u1qcl:is([data-empty-state-size=lg]):not(#\#):not(#\#):not(#\#){row-gap:var(--_6-x109877l)}
747
739
.transform-x140extk:is([data-placement=right] *):not(#\#):not(#\#):not(#\#){transform:rotate(-90deg)}
748
740
.transform-x1s861hk:is([data-placement=top] *):not(#\#):not(#\#):not(#\#){transform:rotate(0deg)}
749
741
.transform-xr9p1a1:is([data-placement=bottom] *):not(#\#):not(#\#):not(#\#){transform:rotate(180deg)}
···
764
756
.transitionDuration-xgggp24:is([data-exiting]):not(#\#):not(#\#):not(#\#){transition-duration:var(--fast-x1gssecm)}
765
757
.zIndex-xikqtj0:is([data-selected]):not(#\#):not(#\#):not(#\#){z-index:0}
766
758
.alignItems-xkjcc5q:has(p):not(#\#):not(#\#):not(#\#){align-items:flex-start}
767
-
.backgroundColor-x1ywip0:has(td:hover):not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-xi821rj)}
768
-
.boxShadow-xqd9uwx:has([data-invalid]):not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 2px var(--component1-x1sghgg8)}
769
-
.color-x17u1pav:is([data-variant=critical] *):is(*) svg:not(#\#):not(#\#):not(#\#){color:var(--solid1-x2pkv20)}
770
-
.color-x1ok210x:is([data-variant=success] *):is(*) svg:not(#\#):not(#\#):not(#\#){color:var(--solid1-xmemhk6)}
771
-
.color-x1af8a7e:is([data-variant=warning] *):is(*) svg:not(#\#):not(#\#):not(#\#){color:var(--solid1-xnhvmlu)}
772
-
.gridTemplateColumns-xyvwb2k:has([data-empty-state-actions]):is([data-empty-state-size=sm]):not(#\#):not(#\#):not(#\#){grid-template-columns:min-content 1fr max-content}
759
+
.backgroundColor-x1lowtz0:has(td:hover):not(#\#):not(#\#):not(#\#){background-color:var(--bgSubtle-x123awk4)}
760
+
.boxShadow-xhc9u6p:has([data-invalid]):not(#\#):not(#\#):not(#\#){box-shadow:0 0 0 2px var(--component1-x16ucms1)}
761
+
.color-xigtx26:is([data-variant=warning] *):is(*) svg:not(#\#):not(#\#):not(#\#){color:var(--solid1-x14k0c5u)}
762
+
.color-x11wzhem:is([data-variant=critical] *):is(*) svg:not(#\#):not(#\#):not(#\#){color:var(--solid1-x1uwop3o)}
763
+
.color-x1lz9at7:is([data-variant=success] *):is(*) svg:not(#\#):not(#\#):not(#\#){color:var(--solid1-x6wzzll)}
773
764
.backgroundColor-x1oqui1x:disabled:not(#\#):not(#\#):not(#\#){background-color:transparent}
774
-
.backgroundColor-xcvjdaz:disabled:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x11poo5x)}
775
-
.backgroundColor-xhe8pwl:disabled:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1gg3jrv)}
776
-
.backgroundColor-x9ustey:disabled:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1sghgg8)}
777
-
.backgroundColor-x1dfs8j4:disabled:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1ui28u3)}
778
-
.backgroundColor-x1snhj8a:disabled:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x43o0oh)}
779
-
.color-xnxeckx:disabled:not(#\#):not(#\#):not(#\#){color:var(--text1-xb5nrd9)}
765
+
.backgroundColor-x11qv109:disabled:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x16ucms1)}
766
+
.backgroundColor-x12r3ubh:disabled:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x17z0c80)}
767
+
.backgroundColor-x1q5g7f4:disabled:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1e4ihis)}
768
+
.backgroundColor-x2gcylo:disabled:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x1ojhc7k)}
769
+
.backgroundColor-xfc2aog:disabled:not(#\#):not(#\#):not(#\#){background-color:var(--component1-xrqvod2)}
770
+
.color-xjdgtzr:disabled:not(#\#):not(#\#):not(#\#){color:var(--text1-x45q57k)}
780
771
.opacity-xijokvz:disabled:not(#\#):not(#\#):not(#\#){opacity:.5}
781
772
.pointerEvents-xaqnwrm:disabled:not(#\#):not(#\#):not(#\#){pointer-events:none}
782
773
.backgroundColor-x1byop2d:hover:not(#\#):not(#\#):not(#\#){background-color:rgba(255,255,255,.3)}
783
-
.backgroundColor-x1tett1n:hover:not(#\#):not(#\#):not(#\#){background-color:var(--border2-xavwyw3)}
774
+
.backgroundColor-x83z7zn:hover:not(#\#):not(#\#):not(#\#){background-color:var(--border2-xxsd9i2)}
784
775
.backgroundColor-x1jqod2p:hover:not(#\#):not(#\#):not(#\#){background-color:var(--component1-x11poo5x)}
785
-
.backgroundColor-xow2hbl:hover:not(#\#):not(#\#):not(#\#){background-color:var(--component2-x18xhj12)}
776
+
.backgroundColor-x1gdzzc8:hover:not(#\#):not(#\#):not(#\#){background-color:var(--component2-xx7wvuk)}
786
777
.backgroundColor-x151gwij:hover:not(#\#):not(#\#):not(#\#){background-color:var(--component2-xzjwbwe)}
787
778
.backgroundColor-x11aw7u0:hover:not(#\#):not(#\#):not(#\#){background-color:var(--component3-xvwaia1)}
788
-
.backgroundColor-xp87xln:hover:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1rgzn25)}
789
-
.color-xjrurd6:hover:not(#\#):not(#\#):not(#\#){color:var(--text2-x1ztxw)}
779
+
.backgroundColor-x1fe0uph:hover:not(#\#):not(#\#):not(#\#){background-color:var(--solid2-x1crx5cu)}
780
+
.color-x1qb2x6o:hover:not(#\#):not(#\#):not(#\#){color:var(--text2-xelq0bc)}
790
781
.opacity-x1o7uuvo:hover:not(#\#):not(#\#):not(#\#){opacity:1}
791
782
.outlineWidth-xat8dtc:focus:not(#\#):not(#\#):not(#\#){outline-width:1px}
792
-
.backgroundColor-x174fhsx:active:not(#\#):not(#\#):not(#\#){background-color:var(--border3-xm42ywm)}
793
-
.backgroundColor-x13w91gl:active:not(#\#):not(#\#):not(#\#){background-color:var(--component3-x1isc7sq)}
794
-
.backgroundColor-x1jjjnae:active:not(#\#):not(#\#):not(#\#){background-color:var(--text1-xc56m6b)}
783
+
.backgroundColor-x1xulx9p:active:not(#\#):not(#\#):not(#\#){background-color:var(--border3-x1be1b4q)}
784
+
.backgroundColor-xp661xf:active:not(#\#):not(#\#):not(#\#){background-color:var(--component3-x11hgl6v)}
785
+
.backgroundColor-x1y3xz72:active:not(#\#):not(#\#):not(#\#){background-color:var(--text1-xpii5us)}
795
786
@media (prefers-reduced-motion: reduce){.animationName-x1aquc0h.animationName-x1aquc0h:not(#\#):not(#\#):not(#\#){animation-name:none}}
796
787
@media (min-width: 48rem){.fontSize-x1em9g14.fontSize-x1em9g14:not(#\#):not(#\#):not(#\#){font-size:var(--_4xl-x4z03mz)}}
797
788
@media (min-width: 48rem){.fontSize-xd8xfak.fontSize-xd8xfak:not(#\#):not(#\#):not(#\#){font-size:var(--_5xl-x17lnkj2)}}
···
799
790
@container (min-width: 400px){.display-x1b4ekcc.display-x1b4ekcc:not(#\#):not(#\#):not(#\#){display:flex}}
800
791
@container (min-width: 400px){.display-xr91lqn.display-xr91lqn:not(#\#):not(#\#):not(#\#){display:none}}
801
792
.borderBottomColor-x16stqrj:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:transparent}
802
-
.borderBottomColor-x4zo83h:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--border1-x1en7ut4)}
803
-
.borderBottomColor-xc7lc1u:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--border2-xavwyw3)}
793
+
.borderBottomColor-x1eb3gzl:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--border1-x11as8pt)}
794
+
.borderBottomColor-xywfoak:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--border2-xxsd9i2)}
804
795
.borderBottomLeftRadius-xfrllxf:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-left-radius:0}
805
796
.borderBottomLeftRadius-x19y7gkx:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-left-radius:var(--md-x1o51v3i)}
806
797
.borderBottomRightRadius-xjppbhk:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-right-radius:0}
···
808
799
.borderBottomStyle-x1q0q8m5:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-style:solid}
809
800
.borderBottomWidth-x1qhh985:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
810
801
.borderBottomWidth-xso031l:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:1px}
802
+
.borderLeftColor-x18ezt4p:not(#\#):not(#\#):not(#\#):not(#\#){border-left-color:var(--border1-x11as8pt)}
811
803
.borderLeftColor-x80kmbg:not(#\#):not(#\#):not(#\#):not(#\#){border-left-color:var(--border1-x1en7ut4)}
812
-
.borderLeftColor-x1nbwh4f:not(#\#):not(#\#):not(#\#):not(#\#){border-left-color:var(--border2-xavwyw3)}
804
+
.borderLeftColor-xrv3xfo:not(#\#):not(#\#):not(#\#):not(#\#){border-left-color:var(--border2-xxsd9i2)}
813
805
.borderLeftColor-xicfvt9:not(#\#):not(#\#):not(#\#):not(#\#){border-left-color:var(--borderDim-x1j89upv)}
814
806
.borderLeftColor-x1iy1ygf:not(#\#):not(#\#):not(#\#):not(#\#){border-left-color:var(--solid1-x6o1eyi)}
815
807
.borderLeftStyle-x19ypqd9:not(#\#):not(#\#):not(#\#):not(#\#){border-left-style:solid}
816
808
.borderLeftWidth-xyj58a3:not(#\#):not(#\#):not(#\#):not(#\#){border-left-width:0}
817
809
.borderLeftWidth-xe0pwq:not(#\#):not(#\#):not(#\#):not(#\#){border-left-width:1px}
818
-
.borderRightColor-xm0m5e5:not(#\#):not(#\#):not(#\#):not(#\#){border-right-color:var(--border2-xavwyw3)}
810
+
.borderRightColor-x4e8wl5:not(#\#):not(#\#):not(#\#):not(#\#){border-right-color:var(--border2-xxsd9i2)}
819
811
.borderRightStyle-x32b0ac:not(#\#):not(#\#):not(#\#):not(#\#){border-right-style:solid}
820
812
.borderRightWidth-xgfja2r:not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:0}
821
813
.borderRightWidth-xs1s249:not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:1px}
822
-
.borderTopColor-xdo11qm:not(#\#):not(#\#):not(#\#):not(#\#){border-top-color:var(--border1-x1en7ut4)}
823
-
.borderTopColor-x1unxl75:not(#\#):not(#\#):not(#\#):not(#\#){border-top-color:var(--border2-xavwyw3)}
814
+
.borderTopColor-xr3mu9e:not(#\#):not(#\#):not(#\#):not(#\#){border-top-color:var(--border1-x11as8pt)}
815
+
.borderTopColor-x1ygkicy:not(#\#):not(#\#):not(#\#):not(#\#){border-top-color:var(--border2-xxsd9i2)}
824
816
.borderTopLeftRadius-x1ia1hqs:not(#\#):not(#\#):not(#\#):not(#\#){border-top-left-radius:0}
825
817
.borderTopLeftRadius-xkvr9zc:not(#\#):not(#\#):not(#\#):not(#\#){border-top-left-radius:var(--md-x1o51v3i)}
826
818
.borderTopRightRadius-x1a2w583:not(#\#):not(#\#):not(#\#):not(#\#){border-top-right-radius:0}
···
842
834
.height-xt7dq6l:not(#\#):not(#\#):not(#\#):not(#\#){height:auto}
843
835
.height-xfc2vd1:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_10-xyoqvup)}
844
836
.height-xrkkcas:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_12-xaxip2l)}
837
+
.height-xs4occd:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_14-x18pvp2c)}
845
838
.height-x140y8s0:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_16-xnqsi2d)}
846
839
.height-x1gek4bg:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_2_5-xmuc480)}
847
840
.height-x1tdiqgn:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_2-xsow7ju)}
···
993
986
.width-xrn72xf:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_0_5-x1bnlq1y)}
994
987
.width-xe35rg9:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_10-xyoqvup)}
995
988
.width-x1ut46fo:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_12-xaxip2l)}
989
+
.width-x3hpmgd:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_14-x18pvp2c)}
996
990
.width-x1cyjp46:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_16-xnqsi2d)}
997
991
.width-xae9cqk:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_2_5-xmuc480)}
998
992
.width-xnum6w6:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_2-xsow7ju)}
999
993
.width-x3v7y2w:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_3-x1a1riub)}
1000
994
.width-x5aj043:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_32-xxeew7j)}
1001
995
.width-x1iobu0p:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_4-xgvn2um)}
996
+
.width-xhjp159:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_6-x109877l)}
1002
997
.width-x1ywvk1j:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_64-xhz114r)}
1003
998
.width-x9tbrr9:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_8-x1do95gr)}
1004
999
.width-xefsqe8:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--empty-state-image-size)}
···
1010
1005
@supports (corner-shape: squircle){.borderTopLeftRadius-x8lfnw4.borderTopLeftRadius-x8lfnw4:not(#\#):not(#\#):not(#\#):not(#\#){border-top-left-radius:var(--_3xl-x1bwjc12)}}
1011
1006
@supports (corner-shape: squircle){.borderTopRightRadius-xzsfayr.borderTopRightRadius-xzsfayr:not(#\#):not(#\#):not(#\#):not(#\#){border-top-right-radius:var(--_3xl-x1bwjc12)}}
1012
1007
.borderBottomColor-xd1ie4z:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:transparent}
1013
-
.borderBottomColor-x1utxzx2:not(:last-child):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--border2-xavwyw3)}
1014
-
.borderBottomColor-x12b2rmk:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--border2-xavwyw3)}
1015
-
.borderBottomColor-x94w7c5:is([data-orientation=horizontal] > [data-selected] > *):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--solid1-x6o1eyi)}
1008
+
.borderBottomColor-x1lhcra1:not(:last-child):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--border2-xxsd9i2)}
1009
+
.borderBottomColor-xezxa21:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--border2-xxsd9i2)}
1010
+
.borderBottomColor-xdpg5bj:is([data-orientation=horizontal] > [data-selected] > *):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--solid1-xs64gu4)}
1016
1011
.borderBottomLeftRadius-x7efh69:not(:first-child):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-left-radius:0}
1017
1012
.borderBottomLeftRadius-x1l931rc:not(:last-child):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-left-radius:0}
1018
1013
.borderBottomLeftRadius-x11hkhd3:is(:not(:first-child)) *:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-left-radius:0}
···
1037
1032
.borderLeftWidth-x1g606n3:is([data-direction=right]):not(#\#):not(#\#):not(#\#):not(#\#){border-left-width:1px}
1038
1033
.borderRightColor-xkuxz9x:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-color:transparent}
1039
1034
.borderRightColor-xz94i59:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){border-right-color:transparent}
1040
-
.borderRightColor-x8t59l0:not(:last-child):not(#\#):not(#\#):not(#\#):not(#\#){border-right-color:var(--border2-xavwyw3)}
1041
-
.borderRightColor-x8pcx9o:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-color:var(--border2-xavwyw3)}
1042
-
.borderRightColor-xrs3to8:is([data-orientation=vertical] > [data-selected] > *):not(#\#):not(#\#):not(#\#):not(#\#){border-right-color:var(--solid1-x6o1eyi)}
1035
+
.borderRightColor-x9bz1r0:not(:last-child):not(#\#):not(#\#):not(#\#):not(#\#){border-right-color:var(--border2-xxsd9i2)}
1036
+
.borderRightColor-xevsnfw:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-color:var(--border2-xxsd9i2)}
1037
+
.borderRightColor-x1d37f74:is([data-orientation=vertical] > [data-selected] > *):not(#\#):not(#\#):not(#\#):not(#\#){border-right-color:var(--solid1-xs64gu4)}
1043
1038
.borderRightStyle-x11n44ol:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-style:none}
1044
1039
.borderRightStyle-x43d2xm:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){border-right-style:none}
1045
1040
.borderRightStyle-x1ep6zql:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-style:solid}
···
1086
1081
.height-xvgowgr:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_10-xyoqvup)}
1087
1082
.height-x1bj8b9x:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_10-xyoqvup)}
1088
1083
.height-x104b1j8:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_11-x11x3va4)}
1089
-
.height-x1k9a9im:is([data-size=xl]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_14-x18pvp2c)}
1084
+
.height-x11nvpuc:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_2-xsow7ju)}
1090
1085
.height-xe43mij:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_2-xsow7ju)}
1091
-
.height-x11nvpuc:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_2-xsow7ju)}
1092
1086
.height-x1dwj4yq:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_3_5-x1gotxl7)}
1093
1087
.height-xepgdy3:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_3-x1a1riub)}
1094
-
.height-x1fju72f:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_3-x1a1riub)}
1095
1088
.height-x6cp08u:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_3-x1a1riub)}
1089
+
.height-x1fju72f:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_3-x1a1riub)}
1096
1090
.height-x1nk0t4g:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_4-xgvn2um)}
1097
-
.height-x1ejewa8:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_4-xgvn2um)}
1098
1091
.height-xzmxqe9:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_4-xgvn2um)}
1099
-
.height-x1ckmk8u:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
1100
-
.height-x413wr7:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
1092
+
.height-x1f99l0e:is([data-focus-visible]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
1101
1093
.height-xuw6t6g:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
1102
1094
.height-x1900l2r:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
1103
-
.height-x1f99l0e:is([data-focus-visible]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)}
1104
1095
.height-xflfpla:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_7-x3ogwq2)}
1105
1096
.height-x8h21d:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_7-x3ogwq2)}
1106
1097
.height-xbkx42m:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_8-x1do95gr)}
1107
-
.height-xl931vt:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_8-x1do95gr)}
1108
1098
.height-xwcq22m:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_8-x1do95gr)}
1109
1099
.height-xawfzw8:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_8-x1do95gr)}
1110
1100
.height-x1ym6ln2:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_9-x58vtwt)}
···
1165
1155
.paddingLeft-x1yv1bkc:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_3-x1a1riub)}
1166
1156
.paddingLeft-xhpkq72:is(*) pre:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_4-xgvn2um)}
1167
1157
.paddingLeft-x1remayf:is([data-table-size=lg] *:not(:first-child)):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_4-xgvn2um)}
1168
-
.paddingLeft-x1c4wgp3:is([data-empty-state-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_4-xgvn2um)}
1169
1158
.paddingRight-x1ovgblk:last-child:has(svg):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_0_5-x1bnlq1y)}
1170
1159
.paddingRight-xt1a0pi:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_1-x1plbop)}
1171
1160
.paddingRight-x1l70bhl:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_1-x1plbop)}
···
1218
1207
.width-x16wso6y:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{width:var(--_1-x1plbop)}
1219
1208
.width-xk4ult:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_1-x1plbop)}
1220
1209
.width-x3sirbn:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_10-xyoqvup)}
1221
-
.width-xjnrrc6:is([data-size=xl]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_14-x18pvp2c)}
1222
1210
.width-x88fgpr:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_2-xsow7ju)}
1223
1211
.width-xpxfstr:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_3_5-x1gotxl7)}
1224
1212
.width-x5dfxfh:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_3-x1a1riub)}
1225
1213
.width-x1f1f7ci:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_3-x1a1riub)}
1226
1214
.width-x9pq8ax:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_4-xgvn2um)}
1227
-
.width-x1ika010:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_4-xgvn2um)}
1228
1215
.width-xx5h5ec:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_4-xgvn2um)}
1229
-
.width-x1vjoq73:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_6-x109877l)}
1230
-
.width-xw8vdjb:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_6-x109877l)}
1231
1216
.width-x17jvw3h:is([data-focus-visible]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_6-x109877l)}
1232
1217
.width-x9c0q0b:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_6-x109877l)}
1233
1218
.width-x10ou3qj:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_7-x3ogwq2)}
1234
1219
.width-xn3cxqo:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_8-x1do95gr)}
1235
-
.width-x1lby93s:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_8-x1do95gr)}
1236
1220
.width-xo8awbe:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_8-x1do95gr)}
1237
1221
.paddingLeft-xu53kqt:has(svg+*):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_2_5-xmuc480)}
1238
1222
.paddingLeft-xe3k1bx:has(> * + *, > *:not(svg):only-child):not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--_2-xsow7ju)}
···
1266
1250
.borderRadius-x1a44610:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-radius:var(--md-x1o51v3i)}
1267
1251
.appearance-x1ad04t7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-search-cancel-button{appearance:none}
1268
1252
.appearance-x1glnyev:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-search-decoration{appearance:none}
1269
-
.backgroundColor-x1og98oj:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-color:var(--border1-x1en7ut4)}
1253
+
.backgroundColor-xf5qcfx:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-color:var(--border1-x11as8pt)}
1270
1254
.backgroundColor-x2ydo77:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-color:var(--solid1-x6o1eyi)}
1271
1255
.boxSizing-xx38sju:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{box-sizing:border-box}
1272
-
.color-x17pfzbs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::placeholder{color:var(--text1-xb5nrd9)}
1256
+
.color-xniw34i:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::placeholder{color:var(--text1-x45q57k)}
1273
1257
.content-x10tli2e:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{content:''}
1274
1258
.content-x1s928wv:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{content:""}
1275
1259
.position-x1hmns74:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{position:absolute}
+62
-35
packages/hip-ui/src/components/avatar/index.tsx
+62
-35
packages/hip-ui/src/components/avatar/index.tsx
···
26
26
27
27
// eslint-disable-next-line @stylexjs/valid-styles
28
28
cornerShape: "squircle",
29
+
},
30
+
wrapperSm: {
29
31
borderRadius: {
30
-
":is([data-size=lg])": {
31
-
default: radius["lg"],
32
-
"@supports (corner-shape: squircle)": radius["3xl"],
33
-
},
34
-
":is([data-size=md])": {
35
-
default: radius["md"],
36
-
"@supports (corner-shape: squircle)": radius["3xl"],
37
-
},
38
-
":is([data-size=sm])": {
39
-
default: radius["sm"],
40
-
"@supports (corner-shape: squircle)": radius["3xl"],
41
-
},
42
-
":is([data-size=xl])": {
43
-
default: radius["xl"],
44
-
"@supports (corner-shape: squircle)": radius["3xl"],
45
-
},
32
+
default: radius["sm"],
33
+
"@supports (corner-shape: squircle)": radius["3xl"],
34
+
},
35
+
height: spacing["6"],
36
+
width: spacing["6"],
37
+
},
38
+
wrapperMd: {
39
+
borderRadius: {
40
+
default: radius["md"],
41
+
"@supports (corner-shape: squircle)": radius["3xl"],
46
42
},
47
-
height: {
48
-
":is([data-size=lg])": spacing["10"],
49
-
":is([data-size=md])": spacing["8"],
50
-
":is([data-size=sm])": spacing["6"],
51
-
":is([data-size=xl])": spacing["14"],
43
+
height: spacing["8"],
44
+
width: spacing["8"],
45
+
},
46
+
wrapperLg: {
47
+
borderRadius: {
48
+
default: radius["lg"],
49
+
"@supports (corner-shape: squircle)": radius["3xl"],
52
50
},
53
-
width: {
54
-
":is([data-size=lg])": spacing["10"],
55
-
":is([data-size=md])": spacing["8"],
56
-
":is([data-size=sm])": spacing["6"],
57
-
":is([data-size=xl])": spacing["14"],
51
+
height: spacing["10"],
52
+
width: spacing["10"],
53
+
},
54
+
wrapperXl: {
55
+
borderRadius: {
56
+
default: radius["xl"],
57
+
"@supports (corner-shape: squircle)": radius["3xl"],
58
58
},
59
+
height: spacing["14"],
60
+
width: spacing["14"],
59
61
},
60
62
image: {
61
63
objectFit: "cover",
···
68
70
fontFamily: fontFamily["sans"],
69
71
fontWeight: fontWeight["medium"],
70
72
lineHeight: lineHeight["none"],
71
-
72
-
fontSize: {
73
-
":is([data-size=lg] *)": fontSize["lg"],
74
-
":is([data-size=md] *)": fontSize["base"],
75
-
":is([data-size=sm] *)": fontSize["sm"],
76
-
":is([data-size=xl] *)": fontSize["xl"],
77
-
},
73
+
},
74
+
fallbackSm: {
75
+
fontSize: fontSize["sm"],
76
+
},
77
+
fallbackMd: {
78
+
fontSize: fontSize["base"],
79
+
},
80
+
fallbackLg: {
81
+
fontSize: fontSize["lg"],
82
+
},
83
+
fallbackXl: {
84
+
fontSize: fontSize["xl"],
78
85
},
79
86
});
80
87
···
123
130
}, [src]);
124
131
125
132
return (
126
-
<div {...props} data-size={size} {...stylex.props(styles.wrapper, style)}>
133
+
<div
134
+
{...props}
135
+
{...stylex.props(
136
+
styles.wrapper,
137
+
size === "sm" && styles.wrapperSm,
138
+
size === "md" && styles.wrapperMd,
139
+
size === "lg" && styles.wrapperLg,
140
+
size === "xl" && styles.wrapperXl,
141
+
style,
142
+
)}
143
+
>
127
144
{imageLoaded === "loaded" && (
128
145
<img {...stylex.props(styles.image)} src={src} alt={alt} />
129
146
)}
130
147
{(!src || imageLoaded === "error") && (
131
-
<div {...stylex.props(styles.fallback)}>{fallback}</div>
148
+
<div
149
+
{...stylex.props(
150
+
styles.fallback,
151
+
size === "sm" && styles.fallbackSm,
152
+
size === "md" && styles.fallbackMd,
153
+
size === "lg" && styles.fallbackLg,
154
+
size === "xl" && styles.fallbackXl,
155
+
)}
156
+
>
157
+
{fallback}
158
+
</div>
132
159
)}
133
160
</div>
134
161
);
+27
-22
packages/hip-ui/src/components/color-swatch/index.tsx
+27
-22
packages/hip-ui/src/components/color-swatch/index.tsx
···
19
19
20
20
// eslint-disable-next-line @stylexjs/valid-styles
21
21
cornerShape: "squircle",
22
+
},
23
+
swatchSm: {
22
24
borderRadius: {
23
-
":is([data-size=lg])": {
24
-
default: radius["lg"],
25
-
"@supports (corner-shape: squircle)": radius["3xl"],
26
-
},
27
-
":is([data-size=md])": {
28
-
default: radius["md"],
29
-
"@supports (corner-shape: squircle)": radius["3xl"],
30
-
},
31
-
":is([data-size=sm])": {
32
-
default: radius["sm"],
33
-
"@supports (corner-shape: squircle)": radius["3xl"],
34
-
},
25
+
default: radius["sm"],
26
+
"@supports (corner-shape: squircle)": radius["3xl"],
35
27
},
36
-
height: {
37
-
":is([data-size=lg])": spacing["8"],
38
-
":is([data-size=md])": spacing["6"],
39
-
":is([data-size=sm])": spacing["4"],
28
+
height: spacing["4"],
29
+
width: spacing["4"],
30
+
},
31
+
swatchMd: {
32
+
borderRadius: {
33
+
default: radius["md"],
34
+
"@supports (corner-shape: squircle)": radius["3xl"],
40
35
},
41
-
width: {
42
-
":is([data-size=lg])": spacing["8"],
43
-
":is([data-size=md])": spacing["6"],
44
-
":is([data-size=sm])": spacing["4"],
36
+
height: spacing["6"],
37
+
width: spacing["6"],
38
+
},
39
+
swatchLg: {
40
+
borderRadius: {
41
+
default: radius["lg"],
42
+
"@supports (corner-shape: squircle)": radius["3xl"],
45
43
},
44
+
height: spacing["8"],
45
+
width: spacing["8"],
46
46
},
47
47
});
48
48
···
62
62
return (
63
63
<AriaColorSwatch
64
64
{...props}
65
-
{...stylex.props(styles.swatch, style)}
66
-
data-size={size}
65
+
{...stylex.props(
66
+
styles.swatch,
67
+
size === "sm" && styles.swatchSm,
68
+
size === "md" && styles.swatchMd,
69
+
size === "lg" && styles.swatchLg,
70
+
style,
71
+
)}
67
72
style={({ color }) => ({
68
73
background: `linear-gradient(${color.toString()}, ${color.toString()}),
69
74
repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`,
+1
-1
packages/hip-ui/src/components/theme/useListBoxItemStyles.ts
+1
-1
packages/hip-ui/src/components/theme/useListBoxItemStyles.ts
···
89
89
marginTop: `calc(${spacing["2"]} * -1)`,
90
90
minWidth: spacing["4"],
91
91
92
-
// eslint-disable-next-line @stylexjs/valid-styles
92
+
// eslint-disable-next-line @stylexjs/valid-styles, @stylexjs/no-legacy-contextual-styles
93
93
":is(*) svg": {
94
94
flexShrink: 0,
95
95
pointerEvents: "none",
+1
packages/hip-ui/src/components/toast/Toast.tsx
+1
packages/hip-ui/src/components/toast/Toast.tsx