A design system in a box.
hip-ui.tngl.io/docs/introduction
migrate to named tokens
+1260
-923
+26
apps/docs/src/docs/foundations/theming.mdx
+26
apps/docs/src/docs/foundations/theming.mdx
···
12
12
13
13
<Example src={ThemingExample} />
14
14
15
+
## Semantic Spacing Tokens
16
+
17
+
Use semantic spacing tokens in component styles instead of primitive spacing values.
18
+
Semantic spacing keeps intent clear and makes global spacing changes safer.
19
+
20
+
```tsx
21
+
import {
22
+
gap,
23
+
horizontalSpace,
24
+
size,
25
+
verticalSpace,
26
+
} from "@/components/theme/semantic-spacing.stylex";
27
+
28
+
const styles = stylex.create({
29
+
root: {
30
+
gap: gap.md,
31
+
paddingLeft: horizontalSpace.lg,
32
+
paddingTop: verticalSpace.md,
33
+
minHeight: size.lg,
34
+
},
35
+
});
36
+
```
37
+
38
+
When a theme needs different rhythm, override the semantic spacing tokens first.
39
+
This preserves component intent while allowing global spacing adjustments.
40
+
15
41
## Creating a Theme
16
42
17
43
To start theming your application fist import the tokens you want to theme.
+7
-5
packages/hip-ui/package.json
+7
-5
packages/hip-ui/package.json
···
13
13
"lint": "oxlint .",
14
14
"generate:component": "turbo gen react-component",
15
15
"check-types": "tsc --noEmit",
16
-
"generate-colors": "tsx scripts/generate-colors.tsx"
16
+
"generate-colors": "tsx scripts/generate-colors.tsx",
17
+
"codemod:semantic-spacing": "jscodeshift -t scripts/codemods/migrate-spacing-to-semantic-spacing.cjs src/components --extensions=ts,tsx --parser=tsx"
17
18
},
18
19
"devDependencies": {
19
20
"@repo/typescript-config": "workspace:*",
20
21
"@types/node": "catalog:",
21
22
"@types/react": "catalog:",
22
23
"@types/react-dom": "catalog:",
24
+
"jscodeshift": "^17.3.0",
23
25
"tsx": "^4.20.6",
24
26
"typescript": "catalog:"
25
27
},
26
28
"dependencies": {
27
-
"@tanstack/react-router": "^1.133.0",
28
29
"@inkjs/ui": "^2.0.0",
29
30
"@origin-space/image-cropper": "^0.1.9",
30
31
"@radix-ui/colors": "^3.0.0",
···
34
35
"@react-types/overlays": "catalog:",
35
36
"@react-types/shared": "^3.33.1",
36
37
"@stylexjs/stylex": "catalog:",
38
+
"@tanstack/react-router": "^1.133.0",
37
39
"@window-splitter/react": "^1.0.0",
38
40
"change-case": "catalog:",
39
41
"command-line-application": "^0.10.1",
···
46
48
"react-aria": "catalog:",
47
49
"react-aria-components": "catalog:",
48
50
"react-dom": "catalog:",
49
-
"react-stately": "catalog:",
50
51
"react-markdown": "^10.1.0",
51
-
"web-haptics": "^0.0.6",
52
+
"react-stately": "catalog:",
52
53
"rehype-sanitize": "^6.0.0",
53
-
"remark-gfm": "^4.0.0"
54
+
"remark-gfm": "^4.0.0",
55
+
"web-haptics": "^0.0.6"
54
56
}
55
57
}
+15
-15
packages/hip-ui/src/components/alert-dialog/index.tsx
+15
-15
packages/hip-ui/src/components/alert-dialog/index.tsx
···
27
27
28
28
const styles = stylex.create({
29
29
dialog: {
30
-
paddingBottom: verticalSpace["2"],
31
-
paddingTop: verticalSpace["2"],
30
+
paddingBottom: verticalSpace["md"],
31
+
paddingTop: verticalSpace["md"],
32
32
},
33
33
header: {
34
-
gap: gap["2"],
34
+
gap: gap["md"],
35
35
alignItems: "center",
36
36
display: "flex",
37
37
fontSize: fontSize["lg"],
38
38
justifyContent: "space-between",
39
-
height: sizeSpace["8"],
40
-
paddingLeft: horizontalSpace["4"],
41
-
paddingRight: horizontalSpace["4"],
42
-
paddingTop: verticalSpace["2"],
39
+
height: sizeSpace["6xl"],
40
+
paddingLeft: horizontalSpace["3xl"],
41
+
paddingRight: horizontalSpace["3xl"],
42
+
paddingTop: verticalSpace["md"],
43
43
},
44
44
description: {
45
-
paddingBottom: verticalSpace["4"],
46
-
paddingLeft: horizontalSpace["4"],
47
-
paddingRight: horizontalSpace["4"],
48
-
paddingTop: verticalSpace["4"],
45
+
paddingBottom: verticalSpace["3xl"],
46
+
paddingLeft: horizontalSpace["3xl"],
47
+
paddingRight: horizontalSpace["3xl"],
48
+
paddingTop: verticalSpace["3xl"],
49
49
},
50
50
footer: {
51
-
gap: gap["2"],
51
+
gap: gap["md"],
52
52
display: "flex",
53
53
justifyContent: "flex-end",
54
-
paddingBottom: verticalSpace["2"],
55
-
paddingLeft: horizontalSpace["4"],
56
-
paddingRight: horizontalSpace["4"],
54
+
paddingBottom: verticalSpace["md"],
55
+
paddingLeft: horizontalSpace["3xl"],
56
+
paddingRight: horizontalSpace["3xl"],
57
57
},
58
58
});
59
59
+19
-19
packages/hip-ui/src/components/alert/index.tsx
+19
-19
packages/hip-ui/src/components/alert/index.tsx
···
39
39
borderStyle: "solid",
40
40
borderWidth: 1,
41
41
cornerShape: "squircle",
42
-
gap: gap["2.5"],
42
+
gap: gap["lg"],
43
43
gridTemplateAreas: {
44
44
default: "'icon content'",
45
45
[maxBreakpoints.sm]: "'icon content'",
···
53
53
[maxBreakpoints.sm]: "auto 1fr",
54
54
},
55
55
position: "relative",
56
-
minHeight: sizeSpace["10"],
57
-
paddingBottom: verticalSpace["2.5"],
58
-
paddingLeft: horizontalSpace["4"],
59
-
paddingRight: horizontalSpace["4"],
60
-
paddingTop: verticalSpace["2.5"],
56
+
minHeight: sizeSpace["lg"],
57
+
paddingBottom: verticalSpace["lg"],
58
+
paddingLeft: horizontalSpace["3xl"],
59
+
paddingRight: horizontalSpace["3xl"],
60
+
paddingTop: verticalSpace["lg"],
61
61
},
62
62
alertWithDescription: {
63
63
alignItems: "flex-start",
64
-
paddingBottom: verticalSpace["4"],
65
-
paddingRight: horizontalSpace["3"],
66
-
paddingTop: verticalSpace["4"],
64
+
paddingBottom: verticalSpace["3xl"],
65
+
paddingRight: horizontalSpace["xl"],
66
+
paddingTop: verticalSpace["3xl"],
67
67
},
68
68
alertWithClose: {
69
69
gridTemplateAreas: {
···
74
74
default: "auto 1fr auto",
75
75
[maxBreakpoints.sm]: "auto 1fr auto",
76
76
},
77
-
paddingRight: horizontalSpace["2"],
77
+
paddingRight: horizontalSpace["md"],
78
78
},
79
79
alertWithAction: {
80
80
gridTemplateAreas: {
···
85
85
default: "auto 1fr auto",
86
86
[maxBreakpoints.sm]: "auto 1fr",
87
87
},
88
-
paddingRight: horizontalSpace["2"],
88
+
paddingRight: horizontalSpace["md"],
89
89
},
90
90
alertWithActionAndClose: {
91
91
gridTemplateAreas: {
···
96
96
default: "auto 1fr auto auto",
97
97
[maxBreakpoints.sm]: "auto 1fr auto",
98
98
},
99
-
paddingRight: horizontalSpace["2"],
99
+
paddingRight: horizontalSpace["md"],
100
100
},
101
101
content: {
102
102
gridArea: "content",
103
-
gap: gap["3"],
103
+
gap: gap["xl"],
104
104
display: "flex",
105
105
flexDirection: "column",
106
106
},
107
107
contentWithDescription: {
108
-
paddingTop: verticalSpace["0.5"],
108
+
paddingTop: verticalSpace["xxs"],
109
109
},
110
110
icon: {
111
111
gridArea: "icon",
···
119
119
":is(*) svg": {
120
120
flexShrink: 0,
121
121
pointerEvents: "none",
122
-
height: sizeSpace["5"],
123
-
width: sizeSpace["5"],
122
+
height: sizeSpace["3xl"],
123
+
width: sizeSpace["3xl"],
124
124
},
125
125
},
126
126
action: {
127
127
gridArea: "action",
128
-
gap: gap["2"],
128
+
gap: gap["md"],
129
129
alignItems: "center",
130
130
alignSelf: "center",
131
131
display: "flex",
···
134
134
closeButton: {
135
135
gridArea: "close",
136
136
flexShrink: 0,
137
-
marginBottom: `calc(${sizeSpace["1"]} * -1)`,
138
-
marginTop: `calc(${sizeSpace["1"]} * -1)`,
137
+
marginBottom: `calc(${sizeSpace["xxs"]} * -1)`,
138
+
marginTop: `calc(${sizeSpace["xxs"]} * -1)`,
139
139
},
140
140
actionAndClose: {
141
141
alignSelf: "center",
+1
-1
packages/hip-ui/src/components/autocomplete/index.tsx
+1
-1
packages/hip-ui/src/components/autocomplete/index.tsx
+8
-8
packages/hip-ui/src/components/avatar/index.tsx
+8
-8
packages/hip-ui/src/components/avatar/index.tsx
···
41
41
default: radius.sm,
42
42
[mediaQueries.supportsSquircle]: radius["3xl"],
43
43
},
44
-
height: sizeSpace["6"],
45
-
width: sizeSpace["6"],
44
+
height: sizeSpace["4xl"],
45
+
width: sizeSpace["4xl"],
46
46
},
47
47
wrapperMd: {
48
48
borderRadius: {
49
49
default: radius.md,
50
50
[mediaQueries.supportsSquircle]: radius["3xl"],
51
51
},
52
-
height: sizeSpace["8"],
53
-
width: sizeSpace["8"],
52
+
height: sizeSpace["6xl"],
53
+
width: sizeSpace["6xl"],
54
54
},
55
55
wrapperLg: {
56
56
borderRadius: {
57
57
default: radius.lg,
58
58
[mediaQueries.supportsSquircle]: radius["3xl"],
59
59
},
60
-
height: sizeSpace["10"],
61
-
width: sizeSpace["10"],
60
+
height: sizeSpace["lg"],
61
+
width: sizeSpace["lg"],
62
62
},
63
63
wrapperXl: {
64
64
borderRadius: {
65
65
default: radius.xl,
66
66
[mediaQueries.supportsSquircle]: radius["3xl"],
67
67
},
68
-
height: sizeSpace["14"],
69
-
width: sizeSpace["14"],
68
+
height: sizeSpace["11xl"],
69
+
width: sizeSpace["11xl"],
70
70
},
71
71
image: {
72
72
objectFit: "cover",
+16
-16
packages/hip-ui/src/components/badge/index.tsx
+16
-16
packages/hip-ui/src/components/badge/index.tsx
···
30
30
width: "fit-content",
31
31
},
32
32
sm: {
33
-
gap: gap["1"],
33
+
gap: gap["xs"],
34
34
fontSize: fontSize["xs"],
35
-
height: sizeSpace["5"],
36
-
paddingBottom: verticalSpace["0.5"],
37
-
paddingLeft: horizontalSpace["2.5"],
38
-
paddingRight: horizontalSpace["2.5"],
39
-
paddingTop: verticalSpace["0.5"],
35
+
height: sizeSpace["3xl"],
36
+
paddingBottom: verticalSpace["xxs"],
37
+
paddingLeft: horizontalSpace["lg"],
38
+
paddingRight: horizontalSpace["lg"],
39
+
paddingTop: verticalSpace["xxs"],
40
40
41
41
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
42
42
":is(*) svg": {
43
43
flexShrink: 0,
44
44
pointerEvents: "none",
45
-
height: sizeSpace["3"],
46
-
width: sizeSpace["3"],
45
+
height: sizeSpace["md"],
46
+
width: sizeSpace["md"],
47
47
},
48
48
},
49
49
md: {
50
-
gap: gap["1.5"],
50
+
gap: gap["sm"],
51
51
fontSize: fontSize["sm"],
52
-
height: sizeSpace["6"],
53
-
paddingBottom: verticalSpace["0.5"],
54
-
paddingLeft: horizontalSpace["3.5"],
55
-
paddingRight: horizontalSpace["3.5"],
56
-
paddingTop: verticalSpace["0.5"],
52
+
height: sizeSpace["4xl"],
53
+
paddingBottom: verticalSpace["xxs"],
54
+
paddingLeft: horizontalSpace["2xl"],
55
+
paddingRight: horizontalSpace["2xl"],
56
+
paddingTop: verticalSpace["xxs"],
57
57
58
58
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
59
59
":is(*) svg": {
60
60
flexShrink: 0,
61
61
pointerEvents: "none",
62
-
height: sizeSpace["3.5"],
63
-
width: sizeSpace["3.5"],
62
+
height: sizeSpace["2xl"],
63
+
width: sizeSpace["2xl"],
64
64
},
65
65
},
66
66
});
+3
-3
packages/hip-ui/src/components/calendar/index.tsx
+3
-3
packages/hip-ui/src/components/calendar/index.tsx
···
37
37
38
38
const styles = stylex.create({
39
39
header: {
40
-
gap: gap["2"],
40
+
gap: gap["md"],
41
41
alignItems: "center",
42
42
display: "flex",
43
43
},
44
44
headerContent: {
45
-
gap: gap["0.5"],
45
+
gap: gap["xxs"],
46
46
alignItems: "center",
47
47
display: "flex",
48
48
flexGrow: 1,
···
202
202
<ChevronRight />
203
203
</IconButton>
204
204
</header>
205
-
<Flex align="start" gap="4">
205
+
<Flex align="start" gap="2xl">
206
206
{monthsVisible.map((month) => (
207
207
<CalendarGrid
208
208
key={month}
+13
-13
packages/hip-ui/src/components/card/index.tsx
+13
-13
packages/hip-ui/src/components/card/index.tsx
···
32
32
fontFamily: fontFamily["sans"],
33
33
34
34
"--card-gap": {
35
-
":is([data-card-size=lg])": sizeSpace["4"],
36
-
":is([data-card-size=md])": sizeSpace["4"],
37
-
":is([data-card-size=sm])": sizeSpace["1"],
35
+
":is([data-card-size=lg])": sizeSpace["2xl"],
36
+
":is([data-card-size=md])": sizeSpace["2xl"],
37
+
":is([data-card-size=sm])": sizeSpace["xxs"],
38
38
},
39
39
"--card-x-padding": {
40
-
":is([data-card-size=lg])": sizeSpace["8"],
41
-
":is([data-card-size=md])": sizeSpace["6"],
42
-
":is([data-card-size=sm])": sizeSpace["3"],
40
+
":is([data-card-size=lg])": sizeSpace["6xl"],
41
+
":is([data-card-size=md])": sizeSpace["4xl"],
42
+
":is([data-card-size=sm])": sizeSpace["md"],
43
43
},
44
44
"--card-y-padding": {
45
-
":is([data-card-size=lg])": sizeSpace["8"],
46
-
":is([data-card-size=md])": sizeSpace["6"],
47
-
":is([data-card-size=sm])": sizeSpace["3"],
45
+
":is([data-card-size=lg])": sizeSpace["6xl"],
46
+
":is([data-card-size=md])": sizeSpace["4xl"],
47
+
":is([data-card-size=sm])": sizeSpace["md"],
48
48
},
49
49
},
50
50
cardSection: {
···
73
73
borderColor: uiColor.component2,
74
74
borderBottomStyle: "solid",
75
75
borderBottomWidth: 1,
76
-
paddingBottom: verticalSpace["6"],
76
+
paddingBottom: verticalSpace["5xl"],
77
77
},
78
78
cardHeaderAction: {
79
79
gridArea: "action",
80
-
gap: gap["1"],
80
+
gap: gap["xs"],
81
81
display: "flex",
82
82
justifyContent: "flex-end",
83
83
},
···
87
87
// eslint-disable-next-line @stylexjs/valid-styles
88
88
textBoxTrim: "trim-both",
89
89
gridArea: "title",
90
-
gap: gap["3"],
90
+
gap: gap["xl"],
91
91
alignItems: "center",
92
92
display: "flex",
93
93
fontFamily: fontFamily["title"],
···
119
119
},
120
120
},
121
121
cardFooter: {
122
-
gap: gap["2"],
122
+
gap: gap["md"],
123
123
display: "flex",
124
124
justifyContent: "flex-end",
125
125
},
+6
-6
packages/hip-ui/src/components/checkbox/index.tsx
+6
-6
packages/hip-ui/src/components/checkbox/index.tsx
···
24
24
25
25
const styles = stylex.create({
26
26
wrapper: {
27
-
gap: gap["2.5"],
27
+
gap: gap["lg"],
28
28
alignItems: {
29
29
default: "center",
30
30
":has(p)": "flex-start",
···
46
46
borderWidth: 2,
47
47
48
48
cornerShape: "squircle",
49
-
height: sizeSpace["4"],
50
-
width: sizeSpace["4"],
49
+
height: sizeSpace["2xl"],
50
+
width: sizeSpace["2xl"],
51
51
},
52
52
checked: {
53
53
color: "white",
54
54
},
55
55
group: {
56
-
gap: gap["3"],
56
+
gap: gap["xl"],
57
57
display: "flex",
58
58
flexDirection: "column",
59
59
},
···
84
84
<SizeContext value={size}>
85
85
<AriaCheckboxGroup {...props} {...stylex.props(styles.group, style)}>
86
86
<Label>{label}</Label>
87
-
<Flex direction="column" gap="2">
87
+
<Flex direction="column" gap="md">
88
88
{children}
89
89
</Flex>
90
90
<Description>{description}</Description>
···
123
123
) : null}
124
124
</div>
125
125
{children != null && (
126
-
<Flex direction="column" gap="1">
126
+
<Flex direction="column" gap="xs">
127
127
{children}
128
128
</Flex>
129
129
)}
+10
-11
packages/hip-ui/src/components/color-area/index.tsx
+10
-11
packages/hip-ui/src/components/color-area/index.tsx
···
11
11
12
12
import type { StyleXComponentProps } from "../theme/types";
13
13
14
-
import { mediaQueries } from "../theme/media-queries.stylex";
15
14
import { radius } from "../theme/radius.stylex";
16
15
import { size as sizeSpace } from "../theme/semantic-spacing.stylex";
17
16
···
37
36
":is([data-disabled])": "grayscale(1)",
38
37
},
39
38
height: {
40
-
default: sizeSpace["4"],
41
-
":is([data-focus-visible])": sizeSpace["6"],
42
-
":is([data-size=lg] *)": sizeSpace["6"],
43
-
":is([data-size=md] *)": sizeSpace["4"],
44
-
":is([data-size=sm] *)": sizeSpace["3"],
39
+
default: sizeSpace["2xl"],
40
+
":is([data-focus-visible])": sizeSpace["4xl"],
41
+
":is([data-size=lg] *)": sizeSpace["4xl"],
42
+
":is([data-size=md] *)": sizeSpace["2xl"],
43
+
":is([data-size=sm] *)": sizeSpace["md"],
45
44
},
46
45
width: {
47
-
default: sizeSpace["4"],
48
-
":is([data-focus-visible])": sizeSpace["6"],
49
-
":is([data-size=lg] *)": sizeSpace["6"],
50
-
":is([data-size=md] *)": sizeSpace["4"],
51
-
":is([data-size=sm] *)": sizeSpace["3"],
46
+
default: sizeSpace["2xl"],
47
+
":is([data-focus-visible])": sizeSpace["4xl"],
48
+
":is([data-size=lg] *)": sizeSpace["4xl"],
49
+
":is([data-size=md] *)": sizeSpace["2xl"],
50
+
":is([data-size=sm] *)": sizeSpace["md"],
52
51
},
53
52
},
54
53
aspectRatio: (aspectRatio: number) => ({
+1
-1
packages/hip-ui/src/components/color-field/index.tsx
+1
-1
packages/hip-ui/src/components/color-field/index.tsx
+14
-14
packages/hip-ui/src/components/color-picker/index.tsx
+14
-14
packages/hip-ui/src/components/color-picker/index.tsx
···
45
45
padding: 0,
46
46
borderWidth: 0,
47
47
gap: {
48
-
default: gap["2"],
49
-
":is([data-size=sm])": sizeSpace["1"],
48
+
default: gap["md"],
49
+
":is([data-size=sm])": sizeSpace["xxs"],
50
50
},
51
51
alignItems: "center",
52
52
backgroundColor: "transparent",
···
57
57
display: "block",
58
58
},
59
59
defaultPicker: {
60
-
paddingBottom: verticalSpace["3"],
61
-
paddingLeft: horizontalSpace["2"],
62
-
paddingRight: horizontalSpace["2"],
63
-
paddingTop: verticalSpace["2"],
60
+
paddingBottom: verticalSpace["xl"],
61
+
paddingLeft: horizontalSpace["md"],
62
+
paddingRight: horizontalSpace["md"],
63
+
paddingTop: verticalSpace["md"],
64
64
},
65
65
popover: {
66
66
paddingBottom: 0,
···
68
68
width: 328,
69
69
},
70
70
separator: {
71
-
marginLeft: `calc(${sizeSpace["2"]} * -1)`,
72
-
marginRight: `calc(${sizeSpace["2"]} * -1)`,
73
-
width: `calc(100% + ${sizeSpace["2"]} * 2)`,
71
+
marginLeft: `calc(${sizeSpace["sm"]} * -1)`,
72
+
marginRight: `calc(${sizeSpace["sm"]} * -1)`,
73
+
width: `calc(100% + ${sizeSpace["sm"]} * 2)`,
74
74
},
75
75
grow: {
76
76
flexBasis: "0%",
···
79
79
minWidth: 0,
80
80
},
81
81
controls: {
82
-
paddingLeft: horizontalSpace["1"],
83
-
paddingRight: horizontalSpace["1"],
82
+
paddingLeft: horizontalSpace["xs"],
83
+
paddingRight: horizontalSpace["xs"],
84
84
},
85
85
});
86
86
···
161
161
return (
162
162
<Flex
163
163
direction="column"
164
-
gap="3"
164
+
gap="xl"
165
165
{...props}
166
166
style={[styles.defaultPicker, style]}
167
167
>
···
183
183
184
184
<Separator style={styles.separator} />
185
185
186
-
<Flex gap="2" align="center">
186
+
<Flex gap="md" align="center">
187
187
<IconButton label="Pick color" variant="outline">
188
188
<Pipette />
189
189
</IconButton>
···
216
216
<Separator style={styles.separator} />
217
217
218
218
<SizeContext value="sm">
219
-
<Flex direction="column" gap="3" style={styles.controls}>
219
+
<Flex direction="column" gap="xl" style={styles.controls}>
220
220
{colorSpace === "hsb" ? (
221
221
<>
222
222
<ColorSlider label="Hue" channel="hue" colorSpace={colorSpace} />
+4
-5
packages/hip-ui/src/components/color-slider/index.tsx
+4
-5
packages/hip-ui/src/components/color-slider/index.tsx
···
14
14
import { SizeContext } from "../context";
15
15
import { Label } from "../label";
16
16
import { uiColor } from "../theme/color.stylex";
17
-
import { mediaQueries } from "../theme/media-queries.stylex";
18
17
import { radius } from "../theme/radius.stylex";
19
18
import { gap, size as sizeSpace } from "../theme/semantic-spacing.stylex";
20
19
import { fontSize, lineHeight } from "../theme/typography.stylex";
21
20
22
21
const styles = stylex.create({
23
22
colorSlider: {
24
-
gap: gap["2"],
23
+
gap: gap["md"],
25
24
gridTemplateAreas: {
26
25
default: "'track'",
27
26
":has(label,[data-slider-output])": "'label value-label' 'track track'",
···
54
53
borderRadius: radius.full,
55
54
cornerShape: "squircle",
56
55
height: {
57
-
":is([data-size=lg] *)": sizeSpace["6"],
58
-
":is([data-size=md] *)": sizeSpace["4"],
59
-
":is([data-size=sm] *)": sizeSpace["3"],
56
+
":is([data-size=lg] *)": sizeSpace["4xl"],
57
+
":is([data-size=md] *)": sizeSpace["2xl"],
58
+
":is([data-size=sm] *)": sizeSpace["md"],
60
59
},
61
60
width: "100%",
62
61
},
+2
-2
packages/hip-ui/src/components/color-swatch-picker/index.tsx
+2
-2
packages/hip-ui/src/components/color-swatch-picker/index.tsx
+6
-6
packages/hip-ui/src/components/color-swatch/index.tsx
+6
-6
packages/hip-ui/src/components/color-swatch/index.tsx
···
23
23
},
24
24
swatchSm: {
25
25
borderRadius: radius.xs,
26
-
height: sizeSpace["4"],
27
-
width: sizeSpace["4"],
26
+
height: sizeSpace["2xl"],
27
+
width: sizeSpace["2xl"],
28
28
},
29
29
swatchMd: {
30
30
borderRadius: radius.sm,
31
-
height: sizeSpace["6"],
32
-
width: sizeSpace["6"],
31
+
height: sizeSpace["4xl"],
32
+
width: sizeSpace["4xl"],
33
33
},
34
34
swatchLg: {
35
35
borderRadius: radius.md,
36
-
height: sizeSpace["8"],
37
-
width: sizeSpace["8"],
36
+
height: sizeSpace["6xl"],
37
+
width: sizeSpace["6xl"],
38
38
},
39
39
circle: {
40
40
borderRadius: {
+3
-3
packages/hip-ui/src/components/color-wheel/index.tsx
+3
-3
packages/hip-ui/src/components/color-wheel/index.tsx
···
24
24
gridArea: "track",
25
25
borderRadius: radius.full,
26
26
height: {
27
-
":is([data-size=lg] *)": sizeSpace["6"],
28
-
":is([data-size=md] *)": sizeSpace["4"],
29
-
":is([data-size=sm] *)": sizeSpace["3"],
27
+
":is([data-size=lg] *)": sizeSpace["4xl"],
28
+
":is([data-size=md] *)": sizeSpace["2xl"],
29
+
":is([data-size=sm] *)": sizeSpace["md"],
30
30
},
31
31
width: "100%",
32
32
+2
-2
packages/hip-ui/src/components/combobox/index.tsx
+2
-2
packages/hip-ui/src/components/combobox/index.tsx
···
41
41
minWidth: "max(var(--trigger-width), 180px)",
42
42
},
43
43
emptyState: {
44
-
padding: sizeSpace["4"],
44
+
padding: sizeSpace["2xl"],
45
45
display: "flex",
46
46
justifyContent: "center",
47
47
},
···
168
168
<>
169
169
<Label style={inputStyles.label}>{label}</Label>
170
170
{labelVariant === "horizontal" ? (
171
-
<Flex direction="column" gap="2">
171
+
<Flex direction="column" gap="md">
172
172
{content}
173
173
</Flex>
174
174
) : (
+18
-18
packages/hip-ui/src/components/content/index.tsx
+18
-18
packages/hip-ui/src/components/content/index.tsx
···
10
10
/* eslint-disable @stylexjs/valid-styles, @stylexjs/no-legacy-contextual-styles */
11
11
12
12
":is(*) > :is(:has(h1),h1)": {
13
-
marginBottom: verticalSpace["8"],
14
-
marginTop: verticalSpace["8"],
13
+
marginBottom: verticalSpace["7xl"],
14
+
marginTop: verticalSpace["7xl"],
15
15
},
16
16
":is(*) > :is(:has(h2),h2)": {
17
-
marginBottom: verticalSpace["4"],
18
-
marginTop: verticalSpace["8"],
17
+
marginBottom: verticalSpace["3xl"],
18
+
marginTop: verticalSpace["7xl"],
19
19
},
20
20
":is(*) > :is(:has(h3),h3)": {
21
-
marginBottom: verticalSpace["5"],
22
-
marginTop: verticalSpace["8"],
21
+
marginBottom: verticalSpace["4xl"],
22
+
marginTop: verticalSpace["7xl"],
23
23
},
24
24
":is(*) > :is(:has(h4),h4)": {
25
-
marginBottom: verticalSpace["8"],
26
-
marginTop: verticalSpace["8"],
25
+
marginBottom: verticalSpace["7xl"],
26
+
marginTop: verticalSpace["7xl"],
27
27
},
28
28
":is(*) > :is(:has(h5),h5)": {
29
-
marginBottom: verticalSpace["8"],
30
-
marginTop: verticalSpace["8"],
29
+
marginBottom: verticalSpace["7xl"],
30
+
marginTop: verticalSpace["7xl"],
31
31
},
32
32
":is(*) > blockquote": {
33
33
marginBottom: 0,
34
-
marginLeft: horizontalSpace["2"],
34
+
marginLeft: horizontalSpace["md"],
35
35
marginRight: 0,
36
36
marginTop: 0,
37
-
paddingLeft: horizontalSpace["4"],
37
+
paddingLeft: horizontalSpace["3xl"],
38
38
},
39
39
":is(*) > p": {
40
40
lineHeight: {
···
43
43
":is(li *)": lineHeight.base,
44
44
},
45
45
marginBottom: {
46
-
default: sizeSpace["5"],
47
-
":is(blockquote *)": sizeSpace["0"],
48
-
":is(li *)": sizeSpace["0"],
46
+
default: sizeSpace["3xl"],
47
+
":is(blockquote *)": sizeSpace["none"],
48
+
":is(li *)": sizeSpace["none"],
49
49
},
50
50
marginTop: {
51
-
default: sizeSpace["5"],
52
-
":is(blockquote *)": sizeSpace["0"],
53
-
":is(li *)": sizeSpace["0"],
51
+
default: sizeSpace["3xl"],
52
+
":is(blockquote *)": sizeSpace["none"],
53
+
":is(li *)": sizeSpace["none"],
54
54
},
55
55
},
56
56
+1
-1
packages/hip-ui/src/components/date-field/index.tsx
+1
-1
packages/hip-ui/src/components/date-field/index.tsx
+2
-2
packages/hip-ui/src/components/date-picker/index.tsx
+2
-2
packages/hip-ui/src/components/date-picker/index.tsx
···
48
48
49
49
const styles = stylex.create({
50
50
popoverContent: {
51
-
padding: sizeSpace["2"],
51
+
padding: sizeSpace["sm"],
52
52
},
53
53
});
54
54
···
113
113
<>
114
114
<Label style={inputStyles.label}>{label}</Label>
115
115
{labelVariant === "horizontal" ? (
116
-
<Flex direction="column" gap="2">
116
+
<Flex direction="column" gap="md">
117
117
{content}
118
118
</Flex>
119
119
) : (
+6
-6
packages/hip-ui/src/components/date-range-picker/index.tsx
+6
-6
packages/hip-ui/src/components/date-range-picker/index.tsx
···
52
52
53
53
const styles = stylex.create({
54
54
group: {
55
-
gap: gap["1"],
55
+
gap: gap["xs"],
56
56
alignItems: "center",
57
57
display: "flex",
58
58
···
63
63
},
64
64
},
65
65
popoverContent: {
66
-
padding: sizeSpace["2"],
66
+
padding: sizeSpace["sm"],
67
67
},
68
68
separator: {
69
69
paddingRight: {
70
-
":is([data-size=lg] *)": horizontalSpace["1"],
71
-
":is([data-size=md] *)": sizeSpace["2"],
72
-
":is([data-size=sm] *)": sizeSpace["1"],
70
+
":is([data-size=lg] *)": horizontalSpace["xs"],
71
+
":is([data-size=md] *)": sizeSpace["sm"],
72
+
":is([data-size=sm] *)": sizeSpace["xxs"],
73
73
},
74
74
},
75
75
lastInput: {
···
163
163
<>
164
164
<Label style={inputStyles.label}>{label}</Label>
165
165
{labelVariant === "horizontal" ? (
166
-
<Flex direction="column" gap="2">
166
+
<Flex direction="column" gap="md">
167
167
{content}
168
168
</Flex>
169
169
) : (
+19
-19
packages/hip-ui/src/components/dialog/index.tsx
+19
-19
packages/hip-ui/src/components/dialog/index.tsx
···
26
26
overflow: "auto",
27
27
},
28
28
header: {
29
-
gap: gap["2"],
29
+
gap: gap["md"],
30
30
alignItems: "center",
31
31
backgroundColor: uiColor.bg,
32
32
display: "flex",
···
34
34
justifyContent: "space-between",
35
35
position: "sticky",
36
36
zIndex: 1,
37
-
height: sizeSpace["8"],
38
-
paddingBottom: verticalSpace["2"],
39
-
paddingLeft: horizontalSpace["4"],
40
-
paddingRight: horizontalSpace["4"],
41
-
paddingTop: verticalSpace["2"],
37
+
height: sizeSpace["6xl"],
38
+
paddingBottom: verticalSpace["md"],
39
+
paddingLeft: horizontalSpace["3xl"],
40
+
paddingRight: horizontalSpace["3xl"],
41
+
paddingTop: verticalSpace["md"],
42
42
top: 0,
43
43
44
44
borderBottomColor: uiColor.border1,
···
47
47
},
48
48
description: {
49
49
color: uiColor.text1,
50
-
marginBottom: verticalSpace["4"],
51
-
marginTop: verticalSpace["4"],
52
-
paddingLeft: horizontalSpace["4"],
53
-
paddingRight: horizontalSpace["4"],
50
+
marginBottom: verticalSpace["3xl"],
51
+
marginTop: verticalSpace["3xl"],
52
+
paddingLeft: horizontalSpace["3xl"],
53
+
paddingRight: horizontalSpace["3xl"],
54
54
},
55
55
body: {
56
-
marginBottom: verticalSpace["4"],
57
-
marginTop: verticalSpace["4"],
58
-
paddingLeft: horizontalSpace["4"],
59
-
paddingRight: horizontalSpace["4"],
56
+
marginBottom: verticalSpace["3xl"],
57
+
marginTop: verticalSpace["3xl"],
58
+
paddingLeft: horizontalSpace["3xl"],
59
+
paddingRight: horizontalSpace["3xl"],
60
60
},
61
61
/* eslint-disable @stylexjs/sort-keys -- footer layout + padding order */
62
62
footer: {
63
-
gap: gap["2"],
63
+
gap: gap["md"],
64
64
display: "flex",
65
65
justifyContent: "flex-end",
66
-
paddingBottom: verticalSpace["4"],
67
-
paddingLeft: horizontalSpace["4"],
68
-
paddingRight: horizontalSpace["4"],
66
+
paddingBottom: verticalSpace["3xl"],
67
+
paddingLeft: horizontalSpace["3xl"],
68
+
paddingRight: horizontalSpace["3xl"],
69
69
position: "sticky",
70
-
paddingTop: verticalSpace["4"],
70
+
paddingTop: verticalSpace["3xl"],
71
71
zIndex: 1,
72
72
bottom: 0,
73
73
backgroundColor: uiColor.bg,
+7
-7
packages/hip-ui/src/components/disclosure/index.tsx
+7
-7
packages/hip-ui/src/components/disclosure/index.tsx
···
30
30
},
31
31
title: {
32
32
padding: {
33
-
":is([data-size=lg] *)": `${sizeSpace["4"]} ${sizeSpace["4"]}`,
34
-
":is([data-size=md] *)": `${sizeSpace["3"]} ${sizeSpace["3"]}`,
35
-
":is([data-size=sm] *)": `${sizeSpace["2"]} ${sizeSpace["2"]}`,
33
+
":is([data-size=lg] *)": `${sizeSpace["2xl"]} ${sizeSpace["2xl"]}`,
34
+
":is([data-size=md] *)": `${sizeSpace["md"]} ${sizeSpace["md"]}`,
35
+
":is([data-size=sm] *)": `${sizeSpace["sm"]} ${sizeSpace["sm"]}`,
36
36
},
37
37
borderRadius: radius.lg,
38
38
borderWidth: 0,
39
39
40
40
cornerShape: "squircle",
41
-
gap: gap["2"],
41
+
gap: gap["md"],
42
42
alignItems: "center",
43
43
backgroundColor: {
44
44
default: "transparent",
···
97
97
},
98
98
panelContent: {
99
99
padding: {
100
-
":is([data-size=lg] *)": `${sizeSpace["4"]} ${sizeSpace["4"]}`,
101
-
":is([data-size=md] *)": `${sizeSpace["3"]} ${sizeSpace["3"]}`,
102
-
":is([data-size=sm] *)": `${sizeSpace["2"]} ${sizeSpace["2"]}`,
100
+
":is([data-size=lg] *)": `${sizeSpace["2xl"]} ${sizeSpace["2xl"]}`,
101
+
":is([data-size=md] *)": `${sizeSpace["md"]} ${sizeSpace["md"]}`,
102
+
":is([data-size=sm] *)": `${sizeSpace["sm"]} ${sizeSpace["sm"]}`,
103
103
},
104
104
},
105
105
});
+22
-22
packages/hip-ui/src/components/drawer/index.tsx
+22
-22
packages/hip-ui/src/components/drawer/index.tsx
···
83
83
},
84
84
maxHeight: {
85
85
":is([data-direction=right], [data-direction=left])": "100vh",
86
-
":is([data-direction=top], [data-direction=bottom])": `calc(100vh - ${sizeSpace["8"]})`,
86
+
":is([data-direction=top], [data-direction=bottom])": `calc(100vh - ${sizeSpace["6xl"]})`,
87
87
},
88
88
maxWidth: {
89
-
":is([data-direction=right], [data-direction=left])": `calc(100vw - ${sizeSpace["8"]})`,
89
+
":is([data-direction=right], [data-direction=left])": `calc(100vw - ${sizeSpace["6xl"]})`,
90
90
":is([data-direction=top], [data-direction=bottom])": "100vw",
91
91
},
92
92
width: {
···
117
117
},
118
118
dialog: {
119
119
overflow: "auto",
120
-
paddingBottom: verticalSpace["2"],
121
-
paddingTop: verticalSpace["2"],
120
+
paddingBottom: verticalSpace["md"],
121
+
paddingTop: verticalSpace["md"],
122
122
},
123
123
header: {
124
-
gap: gap["2"],
124
+
gap: gap["md"],
125
125
alignItems: "center",
126
126
display: "flex",
127
127
justifyContent: "space-between",
128
-
height: sizeSpace["8"],
129
-
paddingBottom: verticalSpace["2"],
130
-
paddingLeft: horizontalSpace["4"],
131
-
paddingRight: horizontalSpace["4"],
128
+
height: sizeSpace["6xl"],
129
+
paddingBottom: verticalSpace["md"],
130
+
paddingLeft: horizontalSpace["3xl"],
131
+
paddingRight: horizontalSpace["3xl"],
132
132
},
133
133
description: {
134
134
color: uiColor.text1,
135
-
paddingBottom: verticalSpace["4"],
136
-
paddingLeft: horizontalSpace["4"],
137
-
paddingRight: horizontalSpace["4"],
138
-
paddingTop: verticalSpace["4"],
135
+
paddingBottom: verticalSpace["3xl"],
136
+
paddingLeft: horizontalSpace["3xl"],
137
+
paddingRight: horizontalSpace["3xl"],
138
+
paddingTop: verticalSpace["3xl"],
139
139
},
140
140
body: {
141
141
flexGrow: 1,
142
-
paddingBottom: verticalSpace["4"],
143
-
paddingLeft: horizontalSpace["4"],
144
-
paddingRight: horizontalSpace["4"],
145
-
paddingTop: { default: 0, ":first-child": verticalSpace["4"] },
142
+
paddingBottom: verticalSpace["3xl"],
143
+
paddingLeft: horizontalSpace["3xl"],
144
+
paddingRight: horizontalSpace["3xl"],
145
+
paddingTop: { default: 0, ":first-child": verticalSpace["3xl"] },
146
146
},
147
147
footer: {
148
-
gap: gap["2"],
148
+
gap: gap["md"],
149
149
display: "flex",
150
150
justifyContent: "flex-end",
151
-
paddingBottom: verticalSpace["2"],
152
-
paddingLeft: horizontalSpace["4"],
153
-
paddingRight: horizontalSpace["4"],
154
-
paddingTop: verticalSpace["4"],
151
+
paddingBottom: verticalSpace["md"],
152
+
paddingLeft: horizontalSpace["3xl"],
153
+
paddingRight: horizontalSpace["3xl"],
154
+
paddingTop: verticalSpace["3xl"],
155
155
156
156
borderTopColor: uiColor.border1,
157
157
borderTopStyle: "solid",
+8
-8
packages/hip-ui/src/components/editable-text/index.tsx
+8
-8
packages/hip-ui/src/components/editable-text/index.tsx
···
44
44
":focus": "1px",
45
45
},
46
46
47
-
marginBottom: `calc(${sizeSpace["1"]} * -1)`,
48
-
marginLeft: `calc(${sizeSpace["2"]} * -1)`,
49
-
marginRight: `calc(${sizeSpace["2"]} * -1)`,
50
-
marginTop: `calc(${sizeSpace["1"]} * -1)`,
51
-
paddingBottom: verticalSpace["1"],
52
-
paddingLeft: horizontalSpace["2"],
53
-
paddingRight: horizontalSpace["2"],
54
-
paddingTop: verticalSpace["1"],
47
+
marginBottom: `calc(${sizeSpace["xxs"]} * -1)`,
48
+
marginLeft: `calc(${sizeSpace["sm"]} * -1)`,
49
+
marginRight: `calc(${sizeSpace["sm"]} * -1)`,
50
+
marginTop: `calc(${sizeSpace["xxs"]} * -1)`,
51
+
paddingBottom: verticalSpace["xs"],
52
+
paddingLeft: horizontalSpace["md"],
53
+
paddingRight: horizontalSpace["md"],
54
+
paddingTop: verticalSpace["xs"],
55
55
},
56
56
});
57
57
+9
-9
packages/hip-ui/src/components/empty-state/index.tsx
+9
-9
packages/hip-ui/src/components/empty-state/index.tsx
···
13
13
const styles = stylex.create({
14
14
emptyState: {
15
15
"--empty-state-image-size": {
16
-
":is([data-empty-state-size=lg])": sizeSpace["20"],
17
-
":is([data-empty-state-size=md])": sizeSpace["14"],
18
-
":is([data-empty-state-size=sm])": sizeSpace["10"],
16
+
":is([data-empty-state-size=lg])": sizeSpace["13xl"],
17
+
":is([data-empty-state-size=md])": sizeSpace["11xl"],
18
+
":is([data-empty-state-size=sm])": sizeSpace["lg"],
19
19
},
20
20
gridTemplateAreas: {
21
21
// eslint-disable-next-line @stylexjs/valid-styles
···
46
46
},
47
47
alignItems: "center",
48
48
columnGap: {
49
-
":is([data-empty-state-size=sm])": sizeSpace["4"],
49
+
":is([data-empty-state-size=sm])": sizeSpace["2xl"],
50
50
},
51
51
display: "grid",
52
52
fontFamily: fontFamily["sans"],
···
62
62
":is([data-empty-state-size=sm])": "start",
63
63
},
64
64
rowGap: {
65
-
":is([data-empty-state-size=lg])": sizeSpace["6"],
66
-
":is([data-empty-state-size=md])": sizeSpace["4"],
67
-
":is([data-empty-state-size=sm])": sizeSpace["2"],
65
+
":is([data-empty-state-size=lg])": sizeSpace["4xl"],
66
+
":is([data-empty-state-size=md])": sizeSpace["2xl"],
67
+
":is([data-empty-state-size=sm])": sizeSpace["sm"],
68
68
},
69
69
textAlign: "center",
70
70
},
···
100
100
},
101
101
actions: {
102
102
gridArea: "actions",
103
-
gap: gap["2"],
103
+
gap: gap["md"],
104
104
alignItems: "center",
105
105
display: "flex",
106
106
flexDirection: "row",
···
108
108
justifyContent: "center",
109
109
110
110
paddingLeft: {
111
-
":is([data-empty-state-size=sm] *)": horizontalSpace["4"],
111
+
":is([data-empty-state-size=sm] *)": horizontalSpace["3xl"],
112
112
},
113
113
},
114
114
});
+1
-1
packages/hip-ui/src/components/file-drop-zone/index.tsx
+1
-1
packages/hip-ui/src/components/file-drop-zone/index.tsx
+3
-37
packages/hip-ui/src/components/flex/index.tsx
+3
-37
packages/hip-ui/src/components/flex/index.tsx
···
25
25
"align-end": { alignItems: "flex-end" },
26
26
"align-center": { alignItems: "center" },
27
27
"align-baseline": { alignItems: "baseline" },
28
-
"gap-0.5": { gap: gapSpace["0.5"] },
29
-
"gap-1": { gap: gapSpace["1"] },
30
-
"gap-1.5": { gap: gapSpace["1.5"] },
31
-
"gap-2": { gap: gapSpace["2"] },
32
-
"gap-2.5": { gap: gapSpace["2.5"] },
33
-
"gap-3": { gap: gapSpace["3"] },
34
-
"gap-3.5": { gap: gapSpace["3.5"] },
35
-
"gap-4": { gap: gapSpace["4"] },
36
-
"gap-5": { gap: gapSpace["5"] },
37
-
"gap-6": { gap: gapSpace["6"] },
38
-
"gap-7": { gap: gapSpace["7"] },
39
-
"gap-8": { gap: gapSpace["8"] },
40
-
"gap-9": { gap: gapSpace["9"] },
41
-
"gap-10": { gap: gapSpace["10"] },
42
-
"gap-11": { gap: gapSpace["11"] },
43
-
"gap-12": { gap: gapSpace["12"] },
44
-
"gap-14": { gap: gapSpace["14"] },
45
-
"gap-16": { gap: gapSpace["16"] },
46
-
"gap-20": { gap: gapSpace["20"] },
47
-
"gap-24": { gap: gapSpace["24"] },
48
-
"gap-28": { gap: gapSpace["28"] },
49
-
"gap-32": { gap: gapSpace["32"] },
50
-
"gap-36": { gap: gapSpace["36"] },
51
-
"gap-40": { gap: gapSpace["40"] },
52
-
"gap-44": { gap: gapSpace["44"] },
53
-
"gap-48": { gap: gapSpace["48"] },
54
-
"gap-52": { gap: gapSpace["52"] },
55
-
"gap-56": { gap: gapSpace["56"] },
56
-
"gap-60": { gap: gapSpace["60"] },
57
-
"gap-64": { gap: gapSpace["64"] },
58
-
"gap-72": { gap: gapSpace["72"] },
59
-
"gap-80": { gap: gapSpace["80"] },
60
-
"gap-96": { gap: gapSpace["96"] },
28
+
gap: (g: Gap) => ({ gap: gapSpace[g] }),
61
29
});
62
30
63
31
export interface FlexProps extends StyleXComponentProps<
···
92
60
*/
93
61
align?: "stretch" | "start" | "end" | "center" | "baseline";
94
62
/**
95
-
* The gap of the flex container.
96
-
* @default "0"
97
-
* @type "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96"
63
+
* The gap of the flex container (semantic spacing token).
98
64
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/gap
99
65
*/
100
66
gap?: Gap;
···
143
109
align === "center" && styles["align-center"],
144
110
align === "baseline" && styles["align-baseline"],
145
111
146
-
typeof gap === "string" && styles[`gap-${gap}` as keyof typeof styles],
112
+
typeof gap === "string" && styles.gap(gap),
147
113
148
114
style,
149
115
)}
+1
-1
packages/hip-ui/src/components/form/index.tsx
+1
-1
packages/hip-ui/src/components/form/index.tsx
+8
-83
packages/hip-ui/src/components/grid/index.tsx
+8
-83
packages/hip-ui/src/components/grid/index.tsx
···
3
3
import type { Gap } from "../theme/semantic-spacing.stylex";
4
4
import type { StyleXComponentProps } from "../theme/types";
5
5
6
-
import { gap } from "../theme/semantic-spacing.stylex";
6
+
import { gap as gapVars } from "../theme/semantic-spacing.stylex";
7
7
8
8
const styles = stylex.create({
9
9
base: { display: "grid" },
···
35
35
"justify-items-end": { justifyItems: "end" },
36
36
"justify-items-center": { justifyItems: "center" },
37
37
38
-
"row-gap-0.5": { rowGap: gap["0.5"] },
39
-
"row-gap-1": { rowGap: gap["1"] },
40
-
"row-gap-1.5": { rowGap: gap["1.5"] },
41
-
"row-gap-2": { rowGap: gap["2"] },
42
-
"row-gap-2.5": { rowGap: gap["2.5"] },
43
-
"row-gap-3": { rowGap: gap["3"] },
44
-
"row-gap-3.5": { rowGap: gap["3.5"] },
45
-
"row-gap-4": { rowGap: gap["4"] },
46
-
"row-gap-5": { rowGap: gap["5"] },
47
-
"row-gap-6": { rowGap: gap["6"] },
48
-
"row-gap-7": { rowGap: gap["7"] },
49
-
"row-gap-8": { rowGap: gap["8"] },
50
-
"row-gap-9": { rowGap: gap["9"] },
51
-
"row-gap-10": { rowGap: gap["10"] },
52
-
"row-gap-11": { rowGap: gap["11"] },
53
-
"row-gap-12": { rowGap: gap["12"] },
54
-
"row-gap-14": { rowGap: gap["14"] },
55
-
"row-gap-16": { rowGap: gap["16"] },
56
-
"row-gap-20": { rowGap: gap["20"] },
57
-
"row-gap-24": { rowGap: gap["24"] },
58
-
"row-gap-28": { rowGap: gap["28"] },
59
-
"row-gap-32": { rowGap: gap["32"] },
60
-
"row-gap-36": { rowGap: gap["36"] },
61
-
"row-gap-40": { rowGap: gap["40"] },
62
-
"row-gap-44": { rowGap: gap["44"] },
63
-
"row-gap-48": { rowGap: gap["48"] },
64
-
"row-gap-52": { rowGap: gap["52"] },
65
-
"row-gap-56": { rowGap: gap["56"] },
66
-
"row-gap-60": { rowGap: gap["60"] },
67
-
"row-gap-64": { rowGap: gap["64"] },
68
-
"row-gap-72": { rowGap: gap["72"] },
69
-
"row-gap-80": { rowGap: gap["80"] },
70
-
"row-gap-96": { rowGap: gap["96"] },
71
-
72
-
"column-gap-0.5": { columnGap: gap["0.5"] },
73
-
"column-gap-1": { columnGap: gap["1"] },
74
-
"column-gap-1.5": { columnGap: gap["1.5"] },
75
-
"column-gap-2": { columnGap: gap["2"] },
76
-
"column-gap-2.5": { columnGap: gap["2.5"] },
77
-
"column-gap-3": { columnGap: gap["3"] },
78
-
"column-gap-3.5": { columnGap: gap["3.5"] },
79
-
"column-gap-4": { columnGap: gap["4"] },
80
-
"column-gap-5": { columnGap: gap["5"] },
81
-
"column-gap-6": { columnGap: gap["6"] },
82
-
"column-gap-7": { columnGap: gap["7"] },
83
-
"column-gap-8": { columnGap: gap["8"] },
84
-
"column-gap-9": { columnGap: gap["9"] },
85
-
"column-gap-10": { columnGap: gap["10"] },
86
-
"column-gap-11": { columnGap: gap["11"] },
87
-
"column-gap-12": { columnGap: gap["12"] },
88
-
"column-gap-14": { columnGap: gap["14"] },
89
-
"column-gap-16": { columnGap: gap["16"] },
90
-
"column-gap-20": { columnGap: gap["20"] },
91
-
"column-gap-24": { columnGap: gap["24"] },
92
-
"column-gap-28": { columnGap: gap["28"] },
93
-
"column-gap-32": { columnGap: gap["32"] },
94
-
"column-gap-36": { columnGap: gap["36"] },
95
-
"column-gap-40": { columnGap: gap["40"] },
96
-
"column-gap-44": { columnGap: gap["44"] },
97
-
"column-gap-48": { columnGap: gap["48"] },
98
-
"column-gap-52": { columnGap: gap["52"] },
99
-
"column-gap-56": { columnGap: gap["56"] },
100
-
"column-gap-60": { columnGap: gap["60"] },
101
-
"column-gap-64": { columnGap: gap["64"] },
102
-
"column-gap-72": { columnGap: gap["72"] },
103
-
"column-gap-80": { columnGap: gap["80"] },
104
-
"column-gap-96": { columnGap: gap["96"] },
38
+
rowGap: (g: Gap) => ({ rowGap: gapVars[g] }),
39
+
columnGap: (g: Gap) => ({ columnGap: gapVars[g] }),
105
40
106
41
columnStart: (start: number) => ({ gridColumnStart: start }),
107
42
columnEnd: (end: number) => ({ gridColumnEnd: end }),
···
155
90
*/
156
91
alignContent?: "start" | "end" | "center" | "between" | "around" | "evenly";
157
92
/**
158
-
* The gap of the flex container.
159
-
* @default "0"
160
-
* @type "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96"
161
-
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/gap
93
+
* Column gap (semantic spacing token).
94
+
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
162
95
*/
163
96
columnGap?: Gap;
164
97
/**
165
-
* The row gap of the grid container.
166
-
* @default "0"
167
-
* @type "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96"
98
+
* Row gap (semantic spacing token).
168
99
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
169
100
*/
170
101
rowGap?: Gap;
···
214
145
justifyItems === "end" && styles["justify-items-end"],
215
146
justifyItems === "center" && styles["justify-items-center"],
216
147
217
-
typeof columnGap === "string" &&
218
-
(styles[
219
-
`column-gap-${columnGap}` as keyof typeof styles
220
-
] as stylex.StyleXStyles),
221
-
typeof rowGap === "string" &&
222
-
(styles[
223
-
`row-gap-${rowGap}` as keyof typeof styles
224
-
] as stylex.StyleXStyles),
148
+
typeof columnGap === "string" && styles.columnGap(columnGap),
149
+
typeof rowGap === "string" && styles.rowGap(rowGap),
225
150
226
151
style,
227
152
)}
+16
-16
packages/hip-ui/src/components/header-layout/index.tsx
+16
-16
packages/hip-ui/src/components/header-layout/index.tsx
···
32
32
maxWidth: "var(--page-content-max-width)",
33
33
minHeight: 0,
34
34
paddingBottom: {
35
-
default: verticalSpace["10"],
36
-
[containerBreakpoints.sm]: sizeSpace["12"],
35
+
default: verticalSpace["9xl"],
36
+
[containerBreakpoints.sm]: sizeSpace["xl"],
37
37
":has(> [data-sidebar-layout=true])": "0 !important",
38
38
},
39
39
paddingLeft: {
40
-
default: horizontalSpace["4"],
41
-
[containerBreakpoints.sm]: sizeSpace["8"],
40
+
default: horizontalSpace["3xl"],
41
+
[containerBreakpoints.sm]: sizeSpace["6xl"],
42
42
":has(> [data-sidebar-layout=true])": "0 !important",
43
43
},
44
44
paddingRight: {
45
-
default: horizontalSpace["4"],
46
-
[containerBreakpoints.sm]: sizeSpace["8"],
45
+
default: horizontalSpace["3xl"],
46
+
[containerBreakpoints.sm]: sizeSpace["6xl"],
47
47
":has(> [data-sidebar-layout=true])": "0 !important",
48
48
},
49
49
paddingTop: {
50
-
default: verticalSpace["2"],
51
-
[containerBreakpoints.sm]: sizeSpace["6"],
50
+
default: verticalSpace["md"],
51
+
[containerBreakpoints.sm]: sizeSpace["4xl"],
52
52
":has(> [data-sidebar-layout=true])": "0 !important",
53
53
},
54
54
width: "100%",
···
61
61
boxSizing: "border-box",
62
62
color: primaryColor.textContrast,
63
63
paddingBottom: {
64
-
default: verticalSpace["6"],
65
-
[containerBreakpoints.sm]: sizeSpace["12"],
64
+
default: verticalSpace["5xl"],
65
+
[containerBreakpoints.sm]: sizeSpace["xl"],
66
66
},
67
67
paddingTop: {
68
-
default: verticalSpace["6"],
69
-
[containerBreakpoints.sm]: sizeSpace["12"],
68
+
default: verticalSpace["5xl"],
69
+
[containerBreakpoints.sm]: sizeSpace["xl"],
70
70
},
71
71
width: "100%",
72
72
},
···
76
76
marginRight: "auto",
77
77
maxWidth: "var(--page-content-max-width)",
78
78
paddingLeft: {
79
-
default: horizontalSpace["4"],
80
-
[containerBreakpoints.sm]: sizeSpace["8"],
79
+
default: horizontalSpace["3xl"],
80
+
[containerBreakpoints.sm]: sizeSpace["6xl"],
81
81
},
82
82
paddingRight: {
83
-
default: horizontalSpace["4"],
84
-
[containerBreakpoints.sm]: sizeSpace["8"],
83
+
default: horizontalSpace["3xl"],
84
+
[containerBreakpoints.sm]: sizeSpace["6xl"],
85
85
},
86
86
width: "100%",
87
87
},
+4
-4
packages/hip-ui/src/components/hover-card/index.tsx
+4
-4
packages/hip-ui/src/components/hover-card/index.tsx
···
29
29
content: {
30
30
outline: "none",
31
31
position: "relative",
32
-
paddingBottom: verticalSpace["2"],
33
-
paddingLeft: horizontalSpace["2"],
34
-
paddingRight: horizontalSpace["2"],
35
-
paddingTop: verticalSpace["2"],
32
+
paddingBottom: verticalSpace["md"],
33
+
paddingLeft: horizontalSpace["md"],
34
+
paddingRight: horizontalSpace["md"],
35
+
paddingTop: verticalSpace["md"],
36
36
},
37
37
});
38
38
+1
-1
packages/hip-ui/src/components/image-cropper/index.tsx
+1
-1
packages/hip-ui/src/components/image-cropper/index.tsx
+4
-4
packages/hip-ui/src/components/kbd/index.tsx
+4
-4
packages/hip-ui/src/components/kbd/index.tsx
···
24
24
letterSpacing: tracking["widest"],
25
25
lineHeight: lineHeight["none"],
26
26
position: "relative",
27
-
paddingBottom: verticalSpace["0.5"],
28
-
paddingLeft: horizontalSpace["1"],
29
-
paddingRight: horizontalSpace["1"],
30
-
paddingTop: verticalSpace["0.5"],
27
+
paddingBottom: verticalSpace["xxs"],
28
+
paddingLeft: horizontalSpace["xs"],
29
+
paddingRight: horizontalSpace["xs"],
30
+
paddingTop: verticalSpace["xxs"],
31
31
top: "-1px",
32
32
},
33
33
});
+3
-3
packages/hip-ui/src/components/lightbox/index.tsx
+3
-3
packages/hip-ui/src/components/lightbox/index.tsx
···
118
118
closeButton: {
119
119
position: "fixed",
120
120
zIndex: 210,
121
-
right: horizontalSpace["4"],
122
-
top: verticalSpace["4"],
121
+
right: horizontalSpace["3xl"],
122
+
top: verticalSpace["3xl"],
123
123
},
124
124
hiddenTrigger: {
125
125
display: "none",
126
126
},
127
127
contentRow: {
128
-
gap: gap["4"],
128
+
gap: gap["2xl"],
129
129
alignItems: "center",
130
130
display: "flex",
131
131
flexGrow: 1,
+2
-2
packages/hip-ui/src/components/link/index.tsx
+2
-2
packages/hip-ui/src/components/link/index.tsx
···
19
19
":is([data-breadcrumb] *)": 0,
20
20
":is([data-hovered])": 1,
21
21
},
22
-
gap: gap["2"],
22
+
gap: gap["md"],
23
23
textDecoration: "none",
24
24
alignItems: "center",
25
25
color: {
···
46
46
opacity: "var(--underline-opacity)",
47
47
pointerEvents: "none",
48
48
position: "absolute",
49
-
bottom: `calc(${sizeSpace["1"]} * -1)`,
49
+
bottom: `calc(${sizeSpace["xxs"]} * -1)`,
50
50
height: "2px",
51
51
left: 0,
52
52
right: 0,
+9
-9
packages/hip-ui/src/components/listbox/index.tsx
+9
-9
packages/hip-ui/src/components/listbox/index.tsx
···
41
41
alignItems: "center",
42
42
boxSizing: "border-box",
43
43
display: "flex",
44
-
paddingBottom: verticalSpace["1"],
45
-
paddingLeft: horizontalSpace["3"],
46
-
paddingRight: horizontalSpace["3"],
47
-
paddingTop: verticalSpace["1"],
44
+
paddingBottom: verticalSpace["xs"],
45
+
paddingLeft: horizontalSpace["xl"],
46
+
paddingRight: horizontalSpace["xl"],
47
+
paddingTop: verticalSpace["xs"],
48
48
49
49
height: {
50
-
":is([data-size=lg])": sizeSpace["9"],
51
-
":is([data-size=md])": sizeSpace["7"],
52
-
":is([data-size=sm])": sizeSpace["7"],
50
+
":is([data-size=lg])": sizeSpace["7xl"],
51
+
":is([data-size=md])": sizeSpace["5xl"],
52
+
":is([data-size=sm])": sizeSpace["5xl"],
53
53
},
54
54
},
55
55
separator: {
56
-
marginBottom: verticalSpace["1.5"],
57
-
marginTop: verticalSpace["1.5"],
56
+
marginBottom: verticalSpace["sm"],
57
+
marginTop: verticalSpace["sm"],
58
58
},
59
59
});
60
60
+12
-10
packages/hip-ui/src/components/markdown-content/index.tsx
+12
-10
packages/hip-ui/src/components/markdown-content/index.tsx
···
34
34
fontStyle: "italic",
35
35
},
36
36
standardMargin: {
37
-
marginBottom: verticalSpace["5"],
38
-
marginTop: verticalSpace["5"],
37
+
marginBottom: verticalSpace["4xl"],
38
+
marginTop: verticalSpace["4xl"],
39
39
},
40
40
h2: {
41
-
marginBottom: verticalSpace["4"],
42
-
marginTop: verticalSpace["8"],
41
+
marginBottom: verticalSpace["3xl"],
42
+
marginTop: verticalSpace["7xl"],
43
43
},
44
44
h3: {
45
-
marginBottom: verticalSpace["5"],
46
-
marginTop: verticalSpace["8"],
45
+
marginBottom: verticalSpace["4xl"],
46
+
marginTop: verticalSpace["7xl"],
47
47
},
48
48
h4: {
49
-
marginBottom: verticalSpace["8"],
50
-
marginTop: verticalSpace["8"],
49
+
marginBottom: verticalSpace["7xl"],
50
+
marginTop: verticalSpace["7xl"],
51
51
},
52
52
h5: {
53
-
marginBottom: verticalSpace["8"],
54
-
marginTop: verticalSpace["8"],
53
+
marginBottom: verticalSpace["7xl"],
54
+
marginTop: verticalSpace["7xl"],
55
55
},
56
56
});
57
57
58
+
/** Map of react-markdown element types to Hip typography; not a React component. */
59
+
// oxlint-disable-next-line react-refresh/only-export-components
58
60
export const components: Components = {
59
61
h1: ({ className: _className, style: _style, ...props }) => (
60
62
<Heading1 {...props} />
+4
-4
packages/hip-ui/src/components/meter/index.tsx
+4
-4
packages/hip-ui/src/components/meter/index.tsx
···
22
22
23
23
const styles = stylex.create({
24
24
wrapper: {
25
-
gap: gap["2"],
25
+
gap: gap["md"],
26
26
gridTemplateAreas: "'label value-label' 'bar bar'",
27
27
alignItems: "center",
28
28
display: "grid",
···
49
49
":is([data-variant=warning] *)": `inset 0 0 2px 1px rgba(0,0,0,0.2)`,
50
50
},
51
51
height: {
52
-
":is([data-size=lg] *)": sizeSpace["3"],
53
-
":is([data-size=md] *)": sizeSpace["2"],
54
-
":is([data-size=sm] *)": sizeSpace["1"],
52
+
":is([data-size=lg] *)": sizeSpace["md"],
53
+
":is([data-size=md] *)": sizeSpace["sm"],
54
+
":is([data-size=sm] *)": sizeSpace["xxs"],
55
55
},
56
56
width: "100%",
57
57
},
+5
-5
packages/hip-ui/src/components/number-field/index.tsx
+5
-5
packages/hip-ui/src/components/number-field/index.tsx
···
108
108
":is(*) svg": {
109
109
flexShrink: 0,
110
110
pointerEvents: "none",
111
-
height: sizeSpace["4"],
112
-
width: sizeSpace["4"],
111
+
height: sizeSpace["2xl"],
112
+
width: sizeSpace["2xl"],
113
113
},
114
114
115
115
color: {
···
127
127
},
128
128
inputWithStepper: {
129
129
textAlign: "center",
130
-
paddingLeft: horizontalSpace["2"],
131
-
paddingRight: horizontalSpace["2"],
130
+
paddingLeft: horizontalSpace["md"],
131
+
paddingRight: horizontalSpace["md"],
132
132
},
133
133
});
134
134
···
235
235
<>
236
236
<Label style={inputStyles.label}>{label}</Label>
237
237
{labelVariant === "horizontal" ? (
238
-
<Flex direction="column" gap="2">
238
+
<Flex direction="column" gap="md">
239
239
{content}
240
240
</Flex>
241
241
) : (
+46
-48
packages/hip-ui/src/components/page/Page.tsx
+46
-48
packages/hip-ui/src/components/page/Page.tsx
···
1
1
"use client";
2
2
3
+
/* oxlint-disable perfectionist/sort-imports -- @stylexjs vs @tanstack ordering conflicts */
3
4
import type { ComponentProps, ReactNode } from "react";
4
5
5
6
import * as stylex from "@stylexjs/stylex";
6
-
import { createLink, LinkProps } from "@tanstack/react-router";
7
+
import type { LinkProps } from "@tanstack/react-router";
8
+
import { createLink } from "@tanstack/react-router";
7
9
import { ArrowLeft } from "lucide-react";
8
10
import { useEffect, useRef, useState } from "react";
9
11
···
12
14
import { Flex } from "../flex";
13
15
import { IconButton } from "../icon-button";
14
16
import { primaryColor, uiColor } from "../theme/color.stylex";
15
-
import {
16
-
breakpoints,
17
-
containerBreakpoints,
18
-
mediaQueries,
19
-
} from "../theme/media-queries.stylex";
17
+
import { breakpoints, containerBreakpoints } from "../theme/media-queries.stylex";
20
18
import { radius } from "../theme/radius.stylex";
21
19
import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
22
20
import { shadow } from "../theme/shadow.stylex";
23
-
import { fontFamily, lineHeight } from "../theme/typography.stylex";
21
+
import { fontFamily } from "../theme/typography.stylex";
24
22
import { Text } from "../typography/text";
25
23
import { PageContext, usePageContext } from "./context";
26
24
···
34
32
marginRight: "auto",
35
33
maxWidth: "880px",
36
34
paddingTop: {
37
-
default: verticalSpace["4"],
38
-
[breakpoints.sm]: sizeSpace["4"],
35
+
default: verticalSpace["3xl"],
36
+
[breakpoints.sm]: sizeSpace["2xl"],
39
37
},
40
38
width: "100%",
41
39
},
···
50
48
marginLeft: "auto",
51
49
marginRight: "auto",
52
50
maxWidth: "var(--page-content-max-width)",
53
-
paddingBottom: verticalSpace["16"],
54
-
paddingTop: verticalSpace["3.5"],
51
+
paddingBottom: verticalSpace["13xl"],
52
+
paddingTop: verticalSpace["2xl"],
55
53
width: "100%",
56
54
},
57
55
});
···
59
57
const smallHeaderStyles = stylex.create({
60
58
header: {
61
59
marginBottom: {
62
-
default: sizeSpace["6"],
60
+
default: sizeSpace["4xl"],
63
61
":is([data-sticky-header=true] *)": 0,
64
62
},
65
-
minHeight: sizeSpace["8"],
63
+
minHeight: sizeSpace["6xl"],
66
64
},
67
65
});
68
66
···
89
87
},
90
88
},
91
89
alignItems: "center",
92
-
columnGap: gap["4"],
90
+
columnGap: gap["2xl"],
93
91
display: "grid",
94
92
gridTemplateColumns: {
95
93
default: "1fr auto",
96
94
":has([data-page-icon])": "auto 1fr auto",
97
95
},
98
-
rowGap: gap["2"],
96
+
rowGap: gap["md"],
99
97
marginBottom: {
100
-
default: sizeSpace["8"],
98
+
default: sizeSpace["6xl"],
101
99
":is([data-sticky-header=true] *)": 0,
102
100
},
103
-
minHeight: sizeSpace["8"],
104
-
paddingBottom: verticalSpace["4"],
105
-
paddingTop: verticalSpace["4"],
101
+
minHeight: sizeSpace["6xl"],
102
+
paddingBottom: verticalSpace["3xl"],
103
+
paddingTop: verticalSpace["3xl"],
106
104
},
107
105
});
108
106
···
134
132
},
135
133
},
136
134
smallActions: {
137
-
gap: gap["1"],
135
+
gap: gap["xs"],
138
136
flexShrink: 0,
139
137
},
140
138
largeActions: {
141
139
gridArea: "actions",
142
140
gap: {
143
-
default: gap["1"],
144
-
[breakpoints.sm]: sizeSpace["2"],
141
+
default: gap["xs"],
142
+
[breakpoints.sm]: sizeSpace["sm"],
145
143
},
146
-
minHeight: sizeSpace["8"],
144
+
minHeight: sizeSpace["6xl"],
147
145
},
148
146
icon: {
149
147
gridArea: "icon",
···
156
154
color: primaryColor.textContrast,
157
155
display: "flex",
158
156
justifyContent: "center",
159
-
height: sizeSpace["12"],
160
-
width: sizeSpace["12"],
157
+
height: sizeSpace["xl"],
158
+
width: sizeSpace["xl"],
161
159
},
162
160
});
163
161
···
175
173
position: "sticky",
176
174
zIndex: 10,
177
175
left: 0,
178
-
marginBottom: verticalSpace["2"],
176
+
marginBottom: verticalSpace["md"],
179
177
marginLeft: `calc(-50vw + 50%)`,
180
178
marginRight: `calc(-50vw + 50%)`,
181
179
right: 0,
···
185
183
largeStickyWrapper: {
186
184
zIndex: 100,
187
185
marginBottom: {
188
-
default: sizeSpace["2"],
189
-
[breakpoints.sm]: sizeSpace["8"],
186
+
default: sizeSpace["sm"],
187
+
[breakpoints.sm]: sizeSpace["6xl"],
190
188
},
191
189
},
192
190
stickyWrapperStuck: {
···
219
217
marginLeft: "auto",
220
218
marginRight: "auto",
221
219
maxWidth: "880px",
222
-
paddingBottom: verticalSpace["4"],
223
-
paddingLeft: horizontalSpace["4"],
224
-
paddingRight: horizontalSpace["4"],
225
-
paddingTop: verticalSpace["4"],
220
+
paddingBottom: verticalSpace["3xl"],
221
+
paddingLeft: horizontalSpace["3xl"],
222
+
paddingRight: horizontalSpace["3xl"],
223
+
paddingTop: verticalSpace["3xl"],
226
224
},
227
225
largeStickyContent: {
228
226
boxSizing: "border-box",
···
233
231
marginRight: "auto",
234
232
maxWidth: "var(--page-content-max-width)",
235
233
paddingLeft: {
236
-
default: horizontalSpace["4"],
237
-
[containerBreakpoints.sm]: sizeSpace["8"],
234
+
default: horizontalSpace["3xl"],
235
+
[containerBreakpoints.sm]: sizeSpace["6xl"],
238
236
":has(> [data-sidebar-layout=true])": "0 !important",
239
237
},
240
238
paddingRight: {
241
-
default: horizontalSpace["4"],
242
-
[containerBreakpoints.sm]: sizeSpace["8"],
239
+
default: horizontalSpace["3xl"],
240
+
[containerBreakpoints.sm]: sizeSpace["6xl"],
243
241
":has(> [data-sidebar-layout=true])": "0 !important",
244
242
},
245
243
},
···
259
257
left: 0,
260
258
marginLeft: `calc(-50vw + 50%)`,
261
259
marginRight: `calc(-50vw + 50%)`,
262
-
marginTop: verticalSpace["2"],
260
+
marginTop: verticalSpace["md"],
263
261
right: 0,
264
262
width: "100vw",
265
263
},
···
292
290
marginLeft: "auto",
293
291
marginRight: "auto",
294
292
maxWidth: "880px",
295
-
paddingBottom: verticalSpace["4"],
296
-
paddingLeft: horizontalSpace["4"],
297
-
paddingRight: horizontalSpace["4"],
298
-
paddingTop: verticalSpace["4"],
293
+
paddingBottom: verticalSpace["3xl"],
294
+
paddingLeft: horizontalSpace["3xl"],
295
+
paddingRight: horizontalSpace["3xl"],
296
+
paddingTop: verticalSpace["3xl"],
299
297
},
300
298
largeStickyContent: {
301
299
boxSizing: "border-box",
···
304
302
marginLeft: "auto",
305
303
marginRight: "auto",
306
304
maxWidth: "var(--page-content-max-width)",
307
-
paddingBottom: verticalSpace["4"],
305
+
paddingBottom: verticalSpace["3xl"],
308
306
paddingLeft: {
309
-
default: horizontalSpace["4"],
310
-
[containerBreakpoints.sm]: sizeSpace["8"],
307
+
default: horizontalSpace["3xl"],
308
+
[containerBreakpoints.sm]: sizeSpace["6xl"],
311
309
":has(> [data-sidebar-layout=true])": "0 !important",
312
310
},
313
311
paddingRight: {
314
-
default: horizontalSpace["4"],
315
-
[containerBreakpoints.sm]: sizeSpace["8"],
312
+
default: horizontalSpace["3xl"],
313
+
[containerBreakpoints.sm]: sizeSpace["6xl"],
316
314
":has(> [data-sidebar-layout=true])": "0 !important",
317
315
},
318
-
paddingTop: verticalSpace["4"],
316
+
paddingTop: verticalSpace["3xl"],
319
317
},
320
318
});
321
319
···
365
363
return (
366
364
<Flex
367
365
align="center"
368
-
gap="3"
366
+
gap="xl"
369
367
{...props}
370
368
style={[smallHeaderStyles.header, style]}
371
369
/>
+2
-2
packages/hip-ui/src/components/pagination/index.tsx
+2
-2
packages/hip-ui/src/components/pagination/index.tsx
···
19
19
20
20
const styles = stylex.create({
21
21
list: {
22
-
gap: gap["4"],
22
+
gap: gap["2xl"],
23
23
alignItems: "center",
24
24
containerType: "inline-size",
25
25
display: "flex",
···
119
119
</li>
120
120
<li {...stylex.props(styles.listItem, styles.pages)}>
121
121
<ul>
122
-
<Flex align="center" justify="center" gap="1">
122
+
<Flex align="center" justify="center" gap="xs">
123
123
{visiblePages[0] !== 1 && (
124
124
<li {...stylex.props(styles.listItem, styles.desktopButton)}>
125
125
<Button
+6
-6
packages/hip-ui/src/components/popover/index.tsx
+6
-6
packages/hip-ui/src/components/popover/index.tsx
···
32
32
content: {
33
33
boxShadow: "none",
34
34
position: "relative",
35
-
paddingBottom: verticalSpace["4"],
36
-
paddingLeft: horizontalSpace["4"],
37
-
paddingRight: horizontalSpace["4"],
38
-
paddingTop: verticalSpace["4"],
35
+
paddingBottom: verticalSpace["3xl"],
36
+
paddingLeft: horizontalSpace["3xl"],
37
+
paddingRight: horizontalSpace["3xl"],
38
+
paddingTop: verticalSpace["3xl"],
39
39
},
40
40
caret: {},
41
41
arrow: {
···
47
47
[":is([data-placement=top] *)"]: "tranuiColorY(-50%) rotate(-45deg)",
48
48
},
49
49
zIndex: 0,
50
-
height: sizeSpace["2"],
51
-
width: sizeSpace["2"],
50
+
height: sizeSpace["sm"],
51
+
width: sizeSpace["sm"],
52
52
},
53
53
});
54
54
interface PopoverProps
+4
-4
packages/hip-ui/src/components/progress-bar/index.tsx
+4
-4
packages/hip-ui/src/components/progress-bar/index.tsx
···
26
26
27
27
const styles = stylex.create({
28
28
wrapper: {
29
-
gap: gap["2"],
29
+
gap: gap["md"],
30
30
gridTemplateAreas: "'label value-label' 'bar bar'",
31
31
alignItems: "center",
32
32
display: "grid",
···
42
42
width: "100%",
43
43
44
44
height: {
45
-
":is([data-size=lg] *)": sizeSpace["3"],
46
-
":is([data-size=md] *)": sizeSpace["2"],
47
-
":is([data-size=sm] *)": sizeSpace["1"],
45
+
":is([data-size=lg] *)": sizeSpace["md"],
46
+
":is([data-size=md] *)": sizeSpace["sm"],
47
+
":is([data-size=sm] *)": sizeSpace["xxs"],
48
48
},
49
49
},
50
50
valueLabel: {
+5
-5
packages/hip-ui/src/components/progress-circle/index.tsx
+5
-5
packages/hip-ui/src/components/progress-circle/index.tsx
···
25
25
26
26
const styles = stylex.create({
27
27
wrapper: {
28
-
gap: gap["2"],
28
+
gap: gap["md"],
29
29
alignItems: "center",
30
30
boxSizing: "border-box",
31
31
display: "flex",
···
35
35
justifyContent: "center",
36
36
position: "relative",
37
37
38
-
"--progress-border-width": sizeSpace["1"],
38
+
"--progress-border-width": sizeSpace["xxs"],
39
39
"--progress-size": {
40
-
":is([data-size=lg] *)": sizeSpace["10"],
41
-
":is([data-size=md] *)": sizeSpace["8"],
42
-
":is([data-size=sm] *)": sizeSpace["4"],
40
+
":is([data-size=lg] *)": sizeSpace["lg"],
41
+
":is([data-size=md] *)": sizeSpace["6xl"],
42
+
":is([data-size=sm] *)": sizeSpace["2xl"],
43
43
},
44
44
},
45
45
track: {
+8
-8
packages/hip-ui/src/components/radio/index.tsx
+8
-8
packages/hip-ui/src/components/radio/index.tsx
···
38
38
39
39
const styles = stylex.create({
40
40
wrapper: {
41
-
gap: gap["2.5"],
41
+
gap: gap["lg"],
42
42
alignItems: {
43
43
default: "center",
44
44
":has(p)": "flex-start",
···
57
57
borderRadius: radius.full,
58
58
borderWidth: 2,
59
59
position: "relative",
60
-
height: sizeSpace["4"],
61
-
width: sizeSpace["4"],
60
+
height: sizeSpace["2xl"],
61
+
width: sizeSpace["2xl"],
62
62
63
63
transitionDuration: animationDuration.fast,
64
64
transitionProperty: {
···
70
70
selectionIndicator: {
71
71
borderRadius: radius.full,
72
72
backgroundColor: "white",
73
-
height: sizeSpace["2"],
74
-
width: sizeSpace["2"],
73
+
height: sizeSpace["sm"],
74
+
width: sizeSpace["sm"],
75
75
76
76
position: "absolute",
77
77
transform: "translate(-50%, -50%)",
···
90
90
color: "white",
91
91
},
92
92
group: {
93
-
gap: gap["3"],
93
+
gap: gap["xl"],
94
94
display: "flex",
95
95
flexDirection: "column",
96
96
},
···
121
121
<SizeContext value={size}>
122
122
<AriaRadioGroup {...props} {...stylex.props(styles.group, style)}>
123
123
<Label>{label}</Label>
124
-
<Flex direction="column" gap="2">
124
+
<Flex direction="column" gap="md">
125
125
{children}
126
126
</Flex>
127
127
<Description>{description}</Description>
···
155
155
>
156
156
<SelectionIndicator {...stylex.props(styles.selectionIndicator)} />
157
157
</div>
158
-
<Flex direction="column" gap="1">
158
+
<Flex direction="column" gap="xs">
159
159
{children}
160
160
</Flex>
161
161
</>
+2
-2
packages/hip-ui/src/components/range-calendar/index.tsx
+2
-2
packages/hip-ui/src/components/range-calendar/index.tsx
···
33
33
34
34
const styles = stylex.create({
35
35
root: {
36
-
gap: gap["3"],
36
+
gap: gap["xl"],
37
37
display: "flex",
38
38
flexDirection: "column",
39
39
},
···
72
72
<ChevronRight />
73
73
</IconButton>
74
74
</header>
75
-
<Flex align="start" gap="4">
75
+
<Flex align="start" gap="2xl">
76
76
{monthsVisible.map((month) => (
77
77
<CalendarGrid
78
78
key={month}
+2
-2
packages/hip-ui/src/components/search-field/index.tsx
+2
-2
packages/hip-ui/src/components/search-field/index.tsx
···
36
36
top: "50%",
37
37
},
38
38
clearButtonPadding: {
39
-
paddingRight: horizontalSpace["8"],
39
+
paddingRight: horizontalSpace["7xl"],
40
40
},
41
41
});
42
42
···
124
124
<>
125
125
<Label style={inputStyles.label}>{label}</Label>
126
126
{labelVariant === "horizontal" ? (
127
-
<Flex direction="column" gap="2">
127
+
<Flex direction="column" gap="md">
128
128
{content}
129
129
</Flex>
130
130
) : (
+12
-12
packages/hip-ui/src/components/segmented-control/index.tsx
+12
-12
packages/hip-ui/src/components/segmented-control/index.tsx
···
26
26
27
27
const styles = stylex.create({
28
28
group: {
29
-
padding: sizeSpace["1"],
29
+
padding: sizeSpace["xxs"],
30
30
31
31
cornerShape: "squircle",
32
-
gap: gap["2"],
32
+
gap: gap["md"],
33
33
alignItems: "center",
34
34
backgroundColor: uiColor.component1,
35
35
boxShadow: "inset 0 0 8px 0 rgba(0, 0, 0, 0.1)",
36
36
boxSizing: "border-box",
37
37
display: "flex",
38
38
height: {
39
-
":is([data-size=lg])": sizeSpace["11"],
40
-
":is([data-size=md])": sizeSpace["9"],
41
-
":is([data-size=sm])": sizeSpace["7"],
39
+
":is([data-size=lg])": sizeSpace["9xl"],
40
+
":is([data-size=md])": sizeSpace["7xl"],
41
+
":is([data-size=sm])": sizeSpace["5xl"],
42
42
},
43
43
},
44
44
small: {
···
60
60
alignItems: "center",
61
61
backgroundColor: "transparent",
62
62
boxSizing: "border-box",
63
-
gap: gap["1"],
63
+
gap: gap["xs"],
64
64
display: "flex",
65
65
color: {
66
66
default: uiColor.text1,
···
75
75
":is([data-selected])": 0,
76
76
},
77
77
height: "100%",
78
-
paddingBottom: verticalSpace["1"],
79
-
paddingLeft: horizontalSpace["2"],
80
-
paddingRight: horizontalSpace["2"],
81
-
paddingTop: verticalSpace["1"],
78
+
paddingBottom: verticalSpace["xs"],
79
+
paddingLeft: horizontalSpace["md"],
80
+
paddingRight: horizontalSpace["md"],
81
+
paddingTop: verticalSpace["xs"],
82
82
83
83
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
84
84
":is(*) svg": {
85
85
flexShrink: 0,
86
86
pointerEvents: "none",
87
-
height: sizeSpace["4"],
88
-
width: sizeSpace["4"],
87
+
height: sizeSpace["2xl"],
88
+
width: sizeSpace["2xl"],
89
89
},
90
90
},
91
91
/* eslint-enable @stylexjs/sort-keys */
+3
-3
packages/hip-ui/src/components/select/index.tsx
+3
-3
packages/hip-ui/src/components/select/index.tsx
···
45
45
maxHeight: "40vh",
46
46
},
47
47
searchField: {
48
-
paddingLeft: horizontalSpace["1"],
49
-
paddingRight: horizontalSpace["1"],
50
-
paddingTop: verticalSpace["1"],
48
+
paddingLeft: horizontalSpace["xs"],
49
+
paddingRight: horizontalSpace["xs"],
50
+
paddingTop: verticalSpace["xs"],
51
51
},
52
52
});
53
53
+7
-7
packages/hip-ui/src/components/skeleton/index.tsx
+7
-7
packages/hip-ui/src/components/skeleton/index.tsx
···
60
60
cornerShape: "squircle",
61
61
},
62
62
sizeSm: {
63
-
height: sizeSpace["8"],
64
-
width: sizeSpace["8"],
63
+
height: sizeSpace["6xl"],
64
+
width: sizeSpace["6xl"],
65
65
},
66
66
sizeMd: {
67
-
height: sizeSpace["12"],
68
-
width: sizeSpace["12"],
67
+
height: sizeSpace["xl"],
68
+
width: sizeSpace["xl"],
69
69
},
70
70
sizeLg: {
71
-
height: sizeSpace["16"],
72
-
width: sizeSpace["16"],
71
+
height: sizeSpace["12xl"],
72
+
width: sizeSpace["12xl"],
73
73
},
74
74
height: (height: string | undefined) => ({
75
-
height: height || sizeSpace["4"],
75
+
height: height || sizeSpace["2xl"],
76
76
}),
77
77
width: (width: string | undefined) => ({
78
78
width: width || "100%",
+13
-13
packages/hip-ui/src/components/slider/index.tsx
+13
-13
packages/hip-ui/src/components/slider/index.tsx
···
20
20
const styles = stylex.create({
21
21
wrapper: {
22
22
gap: {
23
-
":is([data-orientation=vertical])": gap["2"],
23
+
":is([data-orientation=vertical])": gap["md"],
24
24
},
25
25
gridTemplateAreas: "'label value-label' 'track track'",
26
26
alignItems: {
···
44
44
},
45
45
position: "relative",
46
46
height: {
47
-
":is([data-orientation=horizontal] *)": sizeSpace["8"],
48
-
":is([data-orientation=horizontal] *)::before": sizeSpace["1"],
47
+
":is([data-orientation=horizontal] *)": sizeSpace["6xl"],
48
+
":is([data-orientation=horizontal] *)::before": sizeSpace["xxs"],
49
49
":is([data-orientation=vertical] *)": "100%",
50
50
":is([data-orientation=vertical] *)::before": "100%",
51
51
},
52
52
width: {
53
53
":is([data-orientation=horizontal] *)": "100%",
54
54
":is([data-orientation=horizontal] *)::before": "100%",
55
-
":is([data-orientation=vertical] *)": sizeSpace["8"],
56
-
":is([data-orientation=vertical] *)::before": sizeSpace["1"],
55
+
":is([data-orientation=vertical] *)": sizeSpace["6xl"],
56
+
":is([data-orientation=vertical] *)::before": sizeSpace["xxs"],
57
57
},
58
58
59
59
transform: {
···
94
94
boxShadow: shadow.md,
95
95
content: "''",
96
96
forcedColorAdjust: "none",
97
-
height: sizeSpace["4"],
97
+
height: sizeSpace["2xl"],
98
98
left: {
99
99
":is([data-orientation=vertical] *)": "50%",
100
100
},
101
101
top: {
102
102
":is([data-orientation=horizontal] *)": "50%",
103
103
},
104
-
width: sizeSpace["4"],
104
+
width: sizeSpace["2xl"],
105
105
},
106
106
trackInner: {
107
107
borderRadius: radius.full,
···
115
115
":is([data-orientation=vertical] *)": "translateX(-50%)",
116
116
},
117
117
height: {
118
-
":is([data-orientation=horizontal] *)": sizeSpace["1"],
118
+
":is([data-orientation=horizontal] *)": sizeSpace["xxs"],
119
119
":is([data-orientation=vertical] *)": "100%",
120
120
},
121
121
left: {
···
126
126
},
127
127
width: {
128
128
":is([data-orientation=horizontal] *)": "100%",
129
-
":is([data-orientation=vertical] *)": sizeSpace["1"],
129
+
":is([data-orientation=vertical] *)": sizeSpace["xxs"],
130
130
},
131
131
},
132
132
trackSingle: {
133
133
height: {
134
-
":is([data-orientation=horizontal] *)": sizeSpace["1"],
134
+
":is([data-orientation=horizontal] *)": sizeSpace["xxs"],
135
135
":is([data-orientation=vertical] *)":
136
136
"calc(attr(data-progress number) * 1%)",
137
137
},
138
138
width: {
139
139
":is([data-orientation=horizontal] *)":
140
140
"calc(attr(data-progress number) * 1%)",
141
-
":is([data-orientation=vertical] *)": sizeSpace["1"],
141
+
":is([data-orientation=vertical] *)": sizeSpace["xxs"],
142
142
},
143
143
},
144
144
trackMultiple: {
145
145
height: {
146
-
":is([data-orientation=horizontal] *)": sizeSpace["1"],
146
+
":is([data-orientation=horizontal] *)": sizeSpace["xxs"],
147
147
":is([data-orientation=vertical] *)":
148
148
"calc(attr(data-progress-end number) * 1% - attr(data-progress-start number) * 1%)",
149
149
},
···
160
160
width: {
161
161
":is([data-orientation=horizontal] *)":
162
162
"calc(attr(data-progress-end number) * 1% - attr(data-progress-start number) * 1%)",
163
-
":is([data-orientation=vertical] *)": sizeSpace["1"],
163
+
":is([data-orientation=vertical] *)": sizeSpace["xxs"],
164
164
},
165
165
},
166
166
valueLabel: {
+3
-3
packages/hip-ui/src/components/star-rating/index.tsx
+3
-3
packages/hip-ui/src/components/star-rating/index.tsx
···
17
17
18
18
const styles = stylex.create({
19
19
stars: {
20
-
gap: gap["0.5"],
20
+
gap: gap["xxs"],
21
21
alignItems: "center",
22
22
display: "flex",
23
23
},
···
101
101
const emptyCount = 5 - filledCount - (showHalf ? 1 : 0);
102
102
103
103
return (
104
-
<Flex direction="row" align="center" gap="1" style={style} {...props}>
104
+
<Flex direction="row" align="center" gap="xs" style={style} {...props}>
105
105
<div
106
106
{...stylex.props(styles.stars)}
107
107
style={{ "--star-size": `${String(size)}px` } as React.CSSProperties}
···
232
232
<Flex
233
233
direction="row"
234
234
align="center"
235
-
gap="1"
235
+
gap="xs"
236
236
role="slider"
237
237
aria-label={ariaLabel}
238
238
aria-valuemin={0}
+7
-7
packages/hip-ui/src/components/switch/index.tsx
+7
-7
packages/hip-ui/src/components/switch/index.tsx
···
20
20
minWidth: 0,
21
21
},
22
22
wrapper: {
23
-
gap: gap["3"],
23
+
gap: gap["xl"],
24
24
alignItems: "center",
25
25
display: "flex",
26
26
},
···
43
43
[mediaQueries.reducedMotion]: "none",
44
44
},
45
45
transitionTimingFunction: "ease-in-out",
46
-
height: sizeSpace["6"],
47
-
width: sizeSpace["10"],
46
+
height: sizeSpace["4xl"],
47
+
width: sizeSpace["lg"],
48
48
},
49
49
thumb: {
50
50
borderRadius: radius.full,
···
62
62
[mediaQueries.reducedMotion]: "none",
63
63
},
64
64
transitionTimingFunction: "ease-in-out",
65
-
height: sizeSpace["4"],
65
+
height: sizeSpace["2xl"],
66
66
left: 0,
67
-
marginLeft: horizontalSpace["1"],
68
-
marginRight: horizontalSpace["1"],
67
+
marginLeft: horizontalSpace["xs"],
68
+
marginRight: horizontalSpace["xs"],
69
69
top: "50%",
70
-
width: sizeSpace["4"],
70
+
width: sizeSpace["2xl"],
71
71
},
72
72
});
73
73
+5
-5
packages/hip-ui/src/components/table-of-contents/index.tsx
+5
-5
packages/hip-ui/src/components/table-of-contents/index.tsx
···
25
25
26
26
const styles = stylex.create({
27
27
wrapper: {
28
-
gap: gap["2"],
28
+
gap: gap["md"],
29
29
overflow: "auto",
30
30
boxSizing: "border-box",
31
31
display: "flex",
32
32
flexDirection: "column",
33
33
flexShrink: 0,
34
-
paddingBottom: verticalSpace["20"],
35
-
paddingTop: verticalSpace["12"],
34
+
paddingBottom: verticalSpace["14xl"],
35
+
paddingTop: verticalSpace["11xl"],
36
36
width: "240px",
37
37
},
38
38
itemList: {
···
65
65
},
66
66
borderLeftStyle: "solid",
67
67
borderLeftWidth: 1,
68
-
height: sizeSpace[8],
68
+
height: sizeSpace["6xl"],
69
69
70
70
"::before": {
71
71
content: "''",
···
77
77
},
78
78
},
79
79
level: (level: number) => ({
80
-
paddingLeft: `calc(${sizeSpace[4]} * ${level.toString()})`,
80
+
paddingLeft: `calc(${sizeSpace["2xl"]} * ${level.toString()})`,
81
81
}),
82
82
active: {
83
83
color: primaryColor.solid2,
+29
-29
packages/hip-ui/src/components/table/index.tsx
+29
-29
packages/hip-ui/src/components/table/index.tsx
···
63
63
display: "flex",
64
64
justifyContent: "space-between",
65
65
paddingLeft: {
66
-
default: horizontalSpace["2"],
67
-
":is(:first-child > *)": sizeSpace["2"],
66
+
default: horizontalSpace["md"],
67
+
":is(:first-child > *)": sizeSpace["sm"],
68
68
},
69
69
},
70
70
columnHeaderSortable: {
···
88
88
},
89
89
textAlign: "left",
90
90
minHeight: {
91
-
default: sizeSpace["8"],
92
-
":is([data-table-size=lg] *)": sizeSpace["12"],
93
-
":is([data-table-size=md] *)": sizeSpace["10"],
91
+
default: sizeSpace["6xl"],
92
+
":is([data-table-size=lg] *)": sizeSpace["xl"],
93
+
":is([data-table-size=md] *)": sizeSpace["lg"],
94
94
},
95
95
paddingBottom: {
96
-
default: verticalSpace["1"],
97
-
":is([data-table-size=lg] *)": sizeSpace["3"],
98
-
":is([data-table-size=md] *)": sizeSpace["2"],
96
+
default: verticalSpace["xs"],
97
+
":is([data-table-size=lg] *)": sizeSpace["md"],
98
+
":is([data-table-size=md] *)": sizeSpace["sm"],
99
99
},
100
100
paddingLeft: {
101
-
default: horizontalSpace["4"],
102
-
":is([data-table-size=lg] *:not(:first-child))": sizeSpace["4"],
103
-
":is([data-table-size=md] *:not(:first-child))": sizeSpace["3"],
101
+
default: horizontalSpace["3xl"],
102
+
":is([data-table-size=lg] *:not(:first-child))": sizeSpace["2xl"],
103
+
":is([data-table-size=md] *:not(:first-child))": sizeSpace["md"],
104
104
},
105
105
paddingRight: {
106
-
default: horizontalSpace["4"],
107
-
":is([data-table-size=lg] *:not(:last-child))": sizeSpace["4"],
108
-
":is([data-table-size=md] *:not(:last-child))": sizeSpace["3"],
106
+
default: horizontalSpace["3xl"],
107
+
":is([data-table-size=lg] *:not(:last-child))": sizeSpace["2xl"],
108
+
":is([data-table-size=md] *:not(:last-child))": sizeSpace["md"],
109
109
},
110
110
paddingTop: {
111
-
default: verticalSpace["1"],
112
-
":is([data-table-size=lg] *)": sizeSpace["3"],
113
-
":is([data-table-size=md] *)": sizeSpace["2"],
111
+
default: verticalSpace["xs"],
112
+
":is([data-table-size=lg] *)": sizeSpace["md"],
113
+
":is([data-table-size=md] *)": sizeSpace["sm"],
114
114
},
115
115
},
116
116
textEllipsis: {
···
131
131
position: "relative",
132
132
touchAction: "none",
133
133
marginBottom: {
134
-
default: `calc(${sizeSpace["1"]} * -1)`,
135
-
":is([data-table-size=lg] *)": `calc(${sizeSpace["3"]} * -1)`,
136
-
":is([data-table-size=md] *)": `calc(${sizeSpace["2"]} * -1)`,
134
+
default: `calc(${sizeSpace["xxs"]} * -1)`,
135
+
":is([data-table-size=lg] *)": `calc(${sizeSpace["md"]} * -1)`,
136
+
":is([data-table-size=md] *)": `calc(${sizeSpace["sm"]} * -1)`,
137
137
},
138
138
marginTop: {
139
-
default: `calc(${sizeSpace["1"]} * -1)`,
140
-
":is([data-table-size=lg] *)": `calc(${sizeSpace["3"]} * -1)`,
141
-
":is([data-table-size=md] *)": `calc(${sizeSpace["2"]} * -1)`,
139
+
default: `calc(${sizeSpace["xxs"]} * -1)`,
140
+
":is([data-table-size=lg] *)": `calc(${sizeSpace["md"]} * -1)`,
141
+
":is([data-table-size=md] *)": `calc(${sizeSpace["sm"]} * -1)`,
142
142
},
143
143
minHeight: {
144
-
default: sizeSpace["8"],
145
-
":is([data-table-size=lg] *)": sizeSpace["12"],
146
-
":is([data-table-size=md] *)": sizeSpace["10"],
144
+
default: sizeSpace["6xl"],
145
+
":is([data-table-size=lg] *)": sizeSpace["xl"],
146
+
":is([data-table-size=md] *)": sizeSpace["lg"],
147
147
},
148
-
width: sizeSpace["3"],
148
+
width: sizeSpace["md"],
149
149
},
150
150
resizerLine: {
151
151
backgroundColor: {
···
159
159
bottom: 0,
160
160
left: "50%",
161
161
top: 0,
162
-
width: sizeSpace["0.5"],
162
+
width: sizeSpace["xxs"],
163
163
},
164
164
dropIndicator: {
165
165
outlineColor: primaryColor.solid1,
···
236
236
)}
237
237
>
238
238
<div {...stylex.props(styles.cellContent, styles.columnHeader)}>
239
-
<Flex align="center" gap="1">
239
+
<Flex align="center" gap="xs">
240
240
<LabelText
241
241
tabIndex={hasResizer ? -1 : undefined}
242
242
hasEllipsis={hasEllipsis}
+7
-7
packages/hip-ui/src/components/tabs/index.tsx
+7
-7
packages/hip-ui/src/components/tabs/index.tsx
···
38
38
flexDirection: "row",
39
39
},
40
40
tabList: {
41
-
gap: gap["1"],
41
+
gap: gap["xs"],
42
42
overflow: "auto",
43
43
alignItems: {
44
44
":is([data-orientation=horizontal])": "flex-start",
···
77
77
},
78
78
tab: {
79
79
padding: {
80
-
":is([data-size=lg] *)": `${sizeSpace["4"]} ${sizeSpace["5"]}`,
81
-
":is([data-size=md] *)": `${sizeSpace["3"]} ${sizeSpace["4"]}`,
82
-
":is([data-size=sm] *)": `${sizeSpace["2"]} ${sizeSpace["2.5"]}`,
80
+
":is([data-size=lg] *)": `${sizeSpace["2xl"]} ${sizeSpace["3xl"]}`,
81
+
":is([data-size=md] *)": `${sizeSpace["md"]} ${sizeSpace["2xl"]}`,
82
+
":is([data-size=sm] *)": `${sizeSpace["sm"]} ${sizeSpace["md"]}`,
83
83
},
84
84
borderWidth: 0,
85
85
outline: "none",
···
168
168
},
169
169
tabPanel: {
170
170
padding: {
171
-
":is([data-size=lg] *)": sizeSpace["5"],
172
-
":is([data-size=md] *)": sizeSpace["4"],
173
-
":is([data-size=sm] *)": sizeSpace["3"],
171
+
":is([data-size=lg] *)": sizeSpace["3xl"],
172
+
":is([data-size=md] *)": sizeSpace["2xl"],
173
+
":is([data-size=sm] *)": sizeSpace["md"],
174
174
},
175
175
outline: "none",
176
176
fontSize: {
+13
-13
packages/hip-ui/src/components/tag-group/index.tsx
+13
-13
packages/hip-ui/src/components/tag-group/index.tsx
···
25
25
26
26
const styles = stylex.create({
27
27
group: {
28
-
gap: gap["2"],
28
+
gap: gap["md"],
29
29
display: "flex",
30
30
flexDirection: "column",
31
31
},
32
32
list: {
33
33
alignItems: "center",
34
-
columnGap: gap["1.5"],
34
+
columnGap: gap["sm"],
35
35
display: "flex",
36
36
flexWrap: "wrap",
37
-
rowGap: gap["2.5"],
37
+
rowGap: gap["lg"],
38
38
},
39
39
tag: {
40
40
borderColor: {
···
45
45
borderRadius: radius.full,
46
46
borderStyle: "solid",
47
47
borderWidth: 1,
48
-
gap: gap["1.5"],
48
+
gap: gap["sm"],
49
49
alignItems: "center",
50
50
backgroundColor: {
51
51
default: uiColor.component1,
···
64
64
opacity: {
65
65
":is([data-disabled])": 0.5,
66
66
},
67
-
paddingBottom: verticalSpace["1"],
68
-
paddingLeft: horizontalSpace["2.5"],
67
+
paddingBottom: verticalSpace["xs"],
68
+
paddingLeft: horizontalSpace["lg"],
69
69
paddingRight: {
70
-
default: horizontalSpace["2.5"],
71
-
":has(button)": sizeSpace["1.5"],
70
+
default: horizontalSpace["lg"],
71
+
":has(button)": sizeSpace["xs"],
72
72
},
73
-
paddingTop: verticalSpace["1"],
73
+
paddingTop: verticalSpace["xs"],
74
74
},
75
75
removeButton: {
76
76
margin: 0,
···
95
95
[mediaQueries.reducedMotion]: "none",
96
96
},
97
97
transitionTimingFunction: "ease-in-out",
98
-
height: sizeSpace["4"],
99
-
width: sizeSpace["4"],
98
+
height: sizeSpace["2xl"],
99
+
width: sizeSpace["2xl"],
100
100
},
101
101
tagText: {
102
102
// eslint-disable-next-line @stylexjs/valid-styles
103
103
textBoxEdge: "cap alphabetic",
104
104
// eslint-disable-next-line @stylexjs/valid-styles
105
105
textBoxTrim: "trim-both",
106
-
paddingBottom: verticalSpace["0.5"],
107
-
paddingTop: verticalSpace["0.5"],
106
+
paddingBottom: verticalSpace["xxs"],
107
+
paddingTop: verticalSpace["xxs"],
108
108
},
109
109
});
110
110
+9
-9
packages/hip-ui/src/components/text-area/index.tsx
+9
-9
packages/hip-ui/src/components/text-area/index.tsx
···
39
39
},
40
40
resize: "none",
41
41
minHeight: {
42
-
":is([data-size=lg])": sizeSpace["10"],
43
-
":is([data-size=md])": sizeSpace["8"],
44
-
":is([data-size=sm])": sizeSpace["6"],
42
+
":is([data-size=lg])": sizeSpace["lg"],
43
+
":is([data-size=md])": sizeSpace["6xl"],
44
+
":is([data-size=sm])": sizeSpace["4xl"],
45
45
},
46
46
minWidth: 0,
47
47
paddingBottom: {
48
-
":is([data-size=lg])": verticalSpace["3"],
49
-
":is([data-size=md])": sizeSpace["2"],
50
-
":is([data-size=sm])": sizeSpace["1"],
48
+
":is([data-size=lg])": verticalSpace["xl"],
49
+
":is([data-size=md])": sizeSpace["sm"],
50
+
":is([data-size=sm])": sizeSpace["xxs"],
51
51
},
52
52
paddingTop: {
53
-
":is([data-size=lg])": verticalSpace["3"],
54
-
":is([data-size=md])": sizeSpace["2"],
55
-
":is([data-size=sm])": sizeSpace["1"],
53
+
":is([data-size=lg])": verticalSpace["xl"],
54
+
":is([data-size=md])": sizeSpace["sm"],
55
+
":is([data-size=sm])": sizeSpace["xxs"],
56
56
},
57
57
width: "100%",
58
58
},
+1
-1
packages/hip-ui/src/components/text-field/index.tsx
+1
-1
packages/hip-ui/src/components/text-field/index.tsx
+86
-43
packages/hip-ui/src/components/theme/semantic-spacing.stylex.tsx
+86
-43
packages/hip-ui/src/components/theme/semantic-spacing.stylex.tsx
···
5
5
import { spacing } from "./spacing.stylex";
6
6
7
7
/**
8
-
* Full numeric scale (same keys/values as `spacing`) for phase-1 bracket access on semantic categories.
8
+
* Horizontal inset / margin scale (semantic keys only).
9
+
* Numeric spacing steps 0–6 align with: none, xxs … 5xl.
9
10
*/
10
-
const spacingNumeric = {
11
-
px: spacing["px"],
12
-
"0": spacing["0"],
13
-
"0.5": spacing["0.5"],
14
-
"1": spacing["1"],
15
-
"1.5": spacing["1.5"],
16
-
"2": spacing["2"],
17
-
"2.5": spacing["2.5"],
18
-
"3": spacing["3"],
19
-
"3.5": spacing["3.5"],
20
-
"4": spacing["4"],
21
-
"5": spacing["5"],
22
-
"6": spacing["6"],
23
-
"7": spacing["7"],
24
-
"8": spacing["8"],
25
-
"9": spacing["9"],
26
-
"10": spacing["10"],
27
-
"11": spacing["11"],
28
-
"12": spacing["12"],
29
-
"14": spacing["14"],
30
-
"16": spacing["16"],
31
-
"20": spacing["20"],
32
-
"24": spacing["24"],
33
-
"28": spacing["28"],
34
-
"32": spacing["32"],
35
-
"36": spacing["36"],
36
-
"40": spacing["40"],
37
-
"44": spacing["44"],
38
-
"48": spacing["48"],
39
-
"52": spacing["52"],
40
-
"56": spacing["56"],
41
-
"60": spacing["60"],
42
-
"64": spacing["64"],
43
-
"72": spacing["72"],
44
-
"80": spacing["80"],
45
-
"96": spacing["96"],
46
-
} as const;
47
-
48
11
export const horizontalSpace = stylex.defineVars({
49
12
none: spacing["0"],
50
13
xxs: spacing["0.5"],
···
56
19
"2xl": spacing["3.5"],
57
20
"3xl": spacing["4"],
58
21
"4xl": spacing["5"],
59
-
...spacingNumeric,
22
+
"5xl": spacing["6"],
23
+
"6xl": spacing["7"],
24
+
"7xl": spacing["8"],
25
+
"8xl": spacing["9"],
26
+
"9xl": spacing["10"],
27
+
"10xl": spacing["11"],
28
+
"11xl": spacing["12"],
29
+
"12xl": spacing["14"],
30
+
"13xl": spacing["16"],
31
+
"14xl": spacing["20"],
32
+
"15xl": spacing["24"],
33
+
"16xl": spacing["28"],
34
+
"17xl": spacing["32"],
35
+
"18xl": spacing["36"],
36
+
"19xl": spacing["40"],
37
+
"20xl": spacing["44"],
38
+
"21xl": spacing["48"],
39
+
"22xl": spacing["52"],
40
+
"23xl": spacing["56"],
41
+
"24xl": spacing["60"],
42
+
"25xl": spacing["64"],
43
+
"26xl": spacing["72"],
44
+
"27xl": spacing["80"],
45
+
"28xl": spacing["96"],
60
46
});
61
47
48
+
/**
49
+
* Vertical inset / margin scale (semantic keys only).
50
+
*/
62
51
export const verticalSpace = stylex.defineVars({
63
52
none: spacing["0"],
64
53
xxs: spacing["0.5"],
···
71
60
"3xl": spacing["4"],
72
61
"4xl": spacing["5"],
73
62
"5xl": spacing["6"],
74
-
...spacingNumeric,
63
+
"6xl": spacing["7"],
64
+
"7xl": spacing["8"],
65
+
"8xl": spacing["9"],
66
+
"9xl": spacing["10"],
67
+
"10xl": spacing["11"],
68
+
"11xl": spacing["12"],
69
+
"12xl": spacing["14"],
70
+
"13xl": spacing["16"],
71
+
"14xl": spacing["20"],
72
+
"15xl": spacing["24"],
73
+
"16xl": spacing["28"],
74
+
"17xl": spacing["32"],
75
+
"18xl": spacing["36"],
76
+
"19xl": spacing["40"],
77
+
"20xl": spacing["44"],
78
+
"21xl": spacing["48"],
79
+
"22xl": spacing["52"],
80
+
"23xl": spacing["56"],
81
+
"24xl": spacing["60"],
82
+
"25xl": spacing["64"],
83
+
"26xl": spacing["72"],
84
+
"27xl": spacing["80"],
85
+
"28xl": spacing["96"],
75
86
});
76
87
88
+
/**
89
+
* Gap scale: `2xl` is spacing step 4 (not 3.5); step 3.5 uses `3xl`.
90
+
*/
77
91
export const gap = stylex.defineVars({
78
92
none: spacing["0"],
93
+
xxs: spacing["0.5"],
79
94
xs: spacing["1"],
80
95
sm: spacing["1.5"],
81
96
md: spacing["2"],
97
+
lg: spacing["2.5"],
82
98
xl: spacing["3"],
99
+
"3xl": spacing["3.5"],
83
100
"2xl": spacing["4"],
84
-
...spacingNumeric,
101
+
"4xl": spacing["5"],
102
+
"5xl": spacing["6"],
103
+
"6xl": spacing["7"],
104
+
"7xl": spacing["8"],
105
+
"8xl": spacing["9"],
106
+
"9xl": spacing["10"],
107
+
"10xl": spacing["11"],
108
+
"11xl": spacing["12"],
109
+
"12xl": spacing["14"],
110
+
"13xl": spacing["16"],
111
+
"14xl": spacing["20"],
112
+
"15xl": spacing["24"],
113
+
"16xl": spacing["28"],
114
+
"17xl": spacing["32"],
115
+
"18xl": spacing["36"],
116
+
"19xl": spacing["40"],
117
+
"20xl": spacing["44"],
118
+
"21xl": spacing["48"],
119
+
"22xl": spacing["52"],
120
+
"23xl": spacing["56"],
121
+
"24xl": spacing["60"],
122
+
"25xl": spacing["64"],
123
+
"26xl": spacing["72"],
124
+
"27xl": spacing["80"],
125
+
"28xl": spacing["96"],
85
126
});
86
127
128
+
/**
129
+
* Component size / icon box scale (semantic keys only).
130
+
*/
87
131
export const size = stylex.defineVars({
88
132
none: spacing["0"],
89
133
xxs: spacing["1"],
···
119
163
"26xl": spacing["80"],
120
164
"27xl": spacing["96"],
121
165
"28xl": spacing["96"],
122
-
...spacingNumeric,
123
166
});
124
167
125
168
// eslint-disable-next-line @stylexjs/enforce-extension
+5
-5
packages/hip-ui/src/components/theme/typography.stylex.tsx
+5
-5
packages/hip-ui/src/components/theme/typography.stylex.tsx
···
76
76
fontWeight: fontWeight["extrabold"],
77
77
letterSpacing: tracking["tight"],
78
78
lineHeight: lineHeight.base,
79
-
scrollMarginBlockStart: verticalSpace["20"],
79
+
scrollMarginBlockStart: verticalSpace["14xl"],
80
80
},
81
81
heading2: {
82
82
// eslint-disable-next-line @stylexjs/valid-styles
···
94
94
fontWeight: fontWeight.semibold,
95
95
letterSpacing: tracking["tight"],
96
96
lineHeight: lineHeight.sm,
97
-
scrollMarginBlockStart: verticalSpace["20"],
97
+
scrollMarginBlockStart: verticalSpace["14xl"],
98
98
borderBottomWidth: 1,
99
99
},
100
100
heading3: {
···
110
110
fontWeight: fontWeight["semibold"],
111
111
letterSpacing: tracking["tight"],
112
112
lineHeight: lineHeight.sm,
113
-
scrollMarginBlockStart: verticalSpace["20"],
113
+
scrollMarginBlockStart: verticalSpace["14xl"],
114
114
},
115
115
heading4: {
116
116
// eslint-disable-next-line @stylexjs/valid-styles
···
125
125
fontWeight: fontWeight["semibold"],
126
126
letterSpacing: tracking["tight"],
127
127
lineHeight: lineHeight.sm,
128
-
scrollMarginBlockStart: verticalSpace["20"],
128
+
scrollMarginBlockStart: verticalSpace["14xl"],
129
129
},
130
130
heading5: {
131
131
// eslint-disable-next-line @stylexjs/valid-styles
···
140
140
fontWeight: fontWeight["semibold"],
141
141
letterSpacing: tracking["tight"],
142
142
lineHeight: lineHeight.sm,
143
-
scrollMarginBlockStart: verticalSpace["20"],
143
+
scrollMarginBlockStart: verticalSpace["14xl"],
144
144
},
145
145
body: {
146
146
// eslint-disable-next-line @stylexjs/valid-styles
+23
-23
packages/hip-ui/src/components/theme/useButtonStyles.ts
+23
-23
packages/hip-ui/src/components/theme/useButtonStyles.ts
···
30
30
borderWidth: 1,
31
31
32
32
cornerShape: "squircle",
33
-
gap: gap["1"],
33
+
gap: gap["xs"],
34
34
alignItems: "center",
35
35
boxSizing: "border-box",
36
36
display: "inline-flex",
···
54
54
":is(*) svg": {
55
55
flexShrink: 0,
56
56
pointerEvents: "none",
57
-
height: sizeSpace["4"],
58
-
width: sizeSpace["4"],
57
+
height: sizeSpace["2xl"],
58
+
width: sizeSpace["2xl"],
59
59
},
60
60
},
61
61
small: {
62
62
fontSize: fontSize["xs"],
63
-
height: sizeSpace["7"],
63
+
height: sizeSpace["5xl"],
64
64
paddingLeft: {
65
-
default: horizontalSpace["2"],
65
+
default: horizontalSpace["md"],
66
66
},
67
-
paddingRight: horizontalSpace["2"],
67
+
paddingRight: horizontalSpace["md"],
68
68
69
69
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
70
70
":is(*) svg": {
71
71
flexShrink: 0,
72
72
pointerEvents: "none",
73
-
height: sizeSpace["3.5"],
74
-
width: sizeSpace["3.5"],
73
+
height: sizeSpace["2xl"],
74
+
width: sizeSpace["2xl"],
75
75
},
76
76
},
77
77
medium: {
78
-
gap: gap["1.5"],
78
+
gap: gap["sm"],
79
79
fontSize: fontSize["sm"],
80
-
height: sizeSpace["8"],
80
+
height: sizeSpace["6xl"],
81
81
paddingLeft: {
82
-
default: horizontalSpace["3"],
83
-
":has(svg+*)": sizeSpace["2.5"],
82
+
default: horizontalSpace["xl"],
83
+
":has(svg+*)": sizeSpace["md"],
84
84
},
85
-
paddingRight: horizontalSpace["3"],
85
+
paddingRight: horizontalSpace["xl"],
86
86
},
87
87
large: {
88
-
gap: gap["2"],
88
+
gap: gap["md"],
89
89
fontSize: fontSize["sm"],
90
-
height: sizeSpace["10"],
90
+
height: sizeSpace["lg"],
91
91
paddingLeft: {
92
-
default: horizontalSpace["4"],
93
-
":has(svg+*)": sizeSpace["3"],
92
+
default: horizontalSpace["3xl"],
93
+
":has(svg+*)": sizeSpace["md"],
94
94
},
95
-
paddingRight: horizontalSpace["4"],
95
+
paddingRight: horizontalSpace["3xl"],
96
96
},
97
97
xl: {
98
-
gap: gap["2"],
98
+
gap: gap["md"],
99
99
fontSize: fontSize["lg"],
100
-
height: sizeSpace["12"],
100
+
height: sizeSpace["xl"],
101
101
paddingLeft: {
102
-
default: horizontalSpace["5"],
103
-
":has(svg+*)": sizeSpace["4"],
102
+
default: horizontalSpace["4xl"],
103
+
":has(svg+*)": sizeSpace["2xl"],
104
104
},
105
-
paddingRight: horizontalSpace["5"],
105
+
paddingRight: horizontalSpace["4xl"],
106
106
},
107
107
secondary: {
108
108
borderColor: {
+8
-8
packages/hip-ui/src/components/theme/useCalendarStyles.ts
+8
-8
packages/hip-ui/src/components/theme/useCalendarStyles.ts
···
23
23
24
24
const styles = stylex.create({
25
25
cell: {
26
-
padding: sizeSpace["1"],
26
+
padding: sizeSpace["xxs"],
27
27
borderRadius: radius.md,
28
28
cornerShape: "squircle",
29
29
textDecoration: {
···
35
35
":is([data-selected])": primaryColor.text2,
36
36
},
37
37
cursor: "default",
38
-
lineHeight: sizeSpace["8"],
38
+
lineHeight: sizeSpace["6xl"],
39
39
opacity: {
40
40
":is([data-outside-visible-range],[data-unavailable])": 0.5,
41
41
},
···
45
45
transitionProperty: "color",
46
46
transitionTimingFunction: "ease-in-out",
47
47
zIndex: 0,
48
-
width: sizeSpace["8"],
48
+
width: sizeSpace["6xl"],
49
49
50
50
"::before": {
51
-
inset: sizeSpace["1"],
51
+
inset: sizeSpace["xxs"],
52
52
content: "''",
53
53
position: "absolute",
54
54
transitionDuration: animationDuration.fast,
···
113
113
":is([data-selection-end],td:last-child > *)::before": radius.md,
114
114
},
115
115
marginLeft: {
116
-
":is(td:not(:first-child) > [data-selected]):not([data-selection-start],[data-selection-end])::before": `calc(${horizontalSpace["2"]} * -1)`,
116
+
":is(td:not(:first-child) > [data-selected]):not([data-selection-start],[data-selection-end])::before": `calc(${horizontalSpace["md"]} * -1)`,
117
117
},
118
118
marginRight: {
119
-
":is(td:not(:last-child) > [data-selected]):not([data-selection-start],[data-selection-end])::before": `calc(${horizontalSpace["2"]} * -1)`,
119
+
":is(td:not(:last-child) > [data-selected]):not([data-selection-start],[data-selection-end])::before": `calc(${horizontalSpace["md"]} * -1)`,
120
120
},
121
121
},
122
122
headerCell: {
123
123
fontSize: fontSize["sm"],
124
124
fontWeight: fontWeight["medium"],
125
125
textAlign: "center",
126
-
paddingBottom: verticalSpace["1"],
126
+
paddingBottom: verticalSpace["xs"],
127
127
},
128
128
heading: {
129
129
margin: 0,
···
135
135
borderCollapse: "collapse",
136
136
},
137
137
wrapper: {
138
-
gap: gap["3"],
138
+
gap: gap["xl"],
139
139
display: "flex",
140
140
flexDirection: "column",
141
141
},
+30
-30
packages/hip-ui/src/components/theme/useInputStyles.ts
+30
-30
packages/hip-ui/src/components/theme/useInputStyles.ts
···
23
23
24
24
const styles = stylex.create({
25
25
field: {
26
-
gap: gap["2"],
26
+
gap: gap["md"],
27
27
display: "flex",
28
28
flexDirection: "column",
29
29
},
···
33
33
flexShrink: 0,
34
34
height: "100%",
35
35
36
-
gap: gap["2"],
36
+
gap: gap["md"],
37
37
alignItems: "center",
38
38
display: "flex",
39
39
justifyContent: "center",
···
42
42
":is(*) svg": {
43
43
flexShrink: 0,
44
44
pointerEvents: "none",
45
-
height: sizeSpace["4"],
46
-
width: sizeSpace["4"],
45
+
height: sizeSpace["2xl"],
46
+
width: sizeSpace["2xl"],
47
47
},
48
48
},
49
49
addonSm: {
50
-
paddingLeft: { ":first-child": horizontalSpace["1.5"] },
50
+
paddingLeft: { ":first-child": horizontalSpace["sm"] },
51
51
paddingRight: {
52
-
":first-child": horizontalSpace["1"],
53
-
":last-child": sizeSpace["1.5"],
52
+
":first-child": horizontalSpace["xs"],
53
+
":last-child": sizeSpace["xs"],
54
54
},
55
55
},
56
56
addonMd: {
57
-
paddingLeft: { ":first-child": horizontalSpace["2.5"] },
57
+
paddingLeft: { ":first-child": horizontalSpace["lg"] },
58
58
paddingRight: {
59
-
":first-child": horizontalSpace["2"],
60
-
":last-child": sizeSpace["2.5"],
59
+
":first-child": horizontalSpace["md"],
60
+
":last-child": sizeSpace["md"],
61
61
},
62
62
},
63
63
addonLg: {
64
-
paddingLeft: { ":first-child": horizontalSpace["3"] },
64
+
paddingLeft: { ":first-child": horizontalSpace["xl"] },
65
65
paddingRight: {
66
-
":first-child": horizontalSpace["2"],
67
-
":last-child": sizeSpace["3"],
66
+
":first-child": horizontalSpace["md"],
67
+
":last-child": sizeSpace["md"],
68
68
},
69
69
},
70
70
validationIcon: {
···
314
314
inputSizeSm: {
315
315
fontSize: fontSize["xs"],
316
316
paddingLeft: {
317
-
":first-child": horizontalSpace["2"],
317
+
":first-child": horizontalSpace["md"],
318
318
},
319
-
paddingRight: horizontalSpace["1"],
319
+
paddingRight: horizontalSpace["xs"],
320
320
},
321
321
inputSizeMd: {
322
322
fontSize: fontSize["sm"],
323
323
paddingLeft: {
324
-
":first-child": horizontalSpace["2"],
324
+
":first-child": horizontalSpace["md"],
325
325
},
326
-
paddingRight: horizontalSpace["2"],
326
+
paddingRight: horizontalSpace["md"],
327
327
},
328
328
inputSizeLg: {
329
329
fontSize: fontSize["base"],
330
330
paddingLeft: {
331
-
":first-child": horizontalSpace["3"],
331
+
":first-child": horizontalSpace["xl"],
332
332
},
333
-
paddingRight: horizontalSpace["3"],
333
+
paddingRight: horizontalSpace["xl"],
334
334
},
335
335
wrapperSizeSm: {
336
-
height: sizeSpace["6"],
336
+
height: sizeSpace["4xl"],
337
337
},
338
338
wrapperSizeMd: {
339
-
height: sizeSpace["8"],
339
+
height: sizeSpace["6xl"],
340
340
},
341
341
wrapperSizeLg: {
342
-
height: sizeSpace["10"],
342
+
height: sizeSpace["lg"],
343
343
},
344
344
horizontalLabel: {
345
-
gap: gap["4"],
345
+
gap: gap["2xl"],
346
346
alignItems: "flex-start",
347
347
flexDirection: "row",
348
348
},
···
353
353
paddingRight: 0,
354
354
},
355
355
horizontalLabelTextSm: {
356
-
lineHeight: sizeSpace["6"],
356
+
lineHeight: sizeSpace["4xl"],
357
357
},
358
358
horizontalLabelTextMd: {
359
-
lineHeight: sizeSpace["8"],
359
+
lineHeight: sizeSpace["6xl"],
360
360
},
361
361
horizontalLabelTextLg: {
362
362
fontSize: fontSize["base"],
363
363
fontWeight: fontWeight["medium"],
364
-
lineHeight: sizeSpace["10"],
364
+
lineHeight: sizeSpace["lg"],
365
365
},
366
366
label: {
367
-
paddingLeft: horizontalSpace["1"],
368
-
paddingRight: horizontalSpace["1"],
367
+
paddingLeft: horizontalSpace["xs"],
368
+
paddingRight: horizontalSpace["xs"],
369
369
},
370
370
additionalText: {
371
-
paddingLeft: horizontalSpace["2"],
372
-
paddingRight: horizontalSpace["2"],
371
+
paddingLeft: horizontalSpace["md"],
372
+
paddingRight: horizontalSpace["md"],
373
373
},
374
374
});
375
375
+21
-21
packages/hip-ui/src/components/theme/useListBoxItemStyles.ts
+21
-21
packages/hip-ui/src/components/theme/useListBoxItemStyles.ts
···
30
30
[":is([data-react-aria-pressable=true][data-selected=true])"]:
31
31
fontWeight["medium"],
32
32
},
33
-
paddingBottom: verticalSpace["0.5"],
34
-
paddingLeft: horizontalSpace["1"],
35
-
paddingRight: horizontalSpace["1"],
36
-
paddingTop: verticalSpace["0.5"],
33
+
paddingBottom: verticalSpace["xxs"],
34
+
paddingLeft: horizontalSpace["xs"],
35
+
paddingRight: horizontalSpace["xs"],
36
+
paddingTop: verticalSpace["xxs"],
37
37
},
38
-
sm: { minHeight: sizeSpace["7"] },
39
-
md: { minHeight: sizeSpace["9"] },
40
-
lg: { minHeight: sizeSpace["12"] },
38
+
sm: { minHeight: sizeSpace["5xl"] },
39
+
md: { minHeight: sizeSpace["7xl"] },
40
+
lg: { minHeight: sizeSpace["xl"] },
41
41
itemInner: {
42
42
borderRadius: radius.md,
43
43
cornerShape: "squircle",
44
-
gap: gap["3"],
44
+
gap: gap["xl"],
45
45
alignItems: "center",
46
46
backgroundColor: {
47
47
default: "transparent",
···
62
62
transitionDuration: animationDuration.fast,
63
63
transitionProperty: "background-color",
64
64
transitionTimingFunction: "ease-in-out",
65
-
paddingBottom: verticalSpace["2"],
66
-
paddingLeft: horizontalSpace["3"],
67
-
paddingRight: horizontalSpace["3"],
68
-
paddingTop: verticalSpace["2"],
65
+
paddingBottom: verticalSpace["md"],
66
+
paddingLeft: horizontalSpace["xl"],
67
+
paddingRight: horizontalSpace["xl"],
68
+
paddingTop: verticalSpace["md"],
69
69
70
70
/* eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles */
71
71
":is([data-variant=destructive] *) *": {
···
73
73
},
74
74
},
75
75
smItemInner: {
76
-
gap: gap["2"],
76
+
gap: gap["md"],
77
77
fontSize: fontSize["xs"],
78
78
lineHeight: lineHeight["xs"],
79
-
paddingBottom: verticalSpace["1"],
80
-
paddingTop: verticalSpace["1"],
79
+
paddingBottom: verticalSpace["xs"],
80
+
paddingTop: verticalSpace["xs"],
81
81
},
82
82
lgItemInner: {
83
83
fontSize: fontSize["base"],
···
89
89
alignItems: "center",
90
90
display: "flex",
91
91
justifyContent: "center",
92
-
marginBottom: `calc(${sizeSpace["2"]} * -1)`,
93
-
marginTop: `calc(${sizeSpace["2"]} * -1)`,
94
-
minWidth: sizeSpace["4"],
92
+
marginBottom: `calc(${sizeSpace["sm"]} * -1)`,
93
+
marginTop: `calc(${sizeSpace["sm"]} * -1)`,
94
+
minWidth: sizeSpace["2xl"],
95
95
96
96
// eslint-disable-next-line @stylexjs/valid-styles, @stylexjs/no-legacy-contextual-styles
97
97
":is(*) svg": {
98
98
flexShrink: 0,
99
99
pointerEvents: "none",
100
-
height: sizeSpace["4"],
101
-
width: sizeSpace["4"],
100
+
height: sizeSpace["2xl"],
101
+
width: sizeSpace["2xl"],
102
102
},
103
103
},
104
104
label: {
···
106
106
textBoxEdge: "cap alphabetic",
107
107
// eslint-disable-next-line @stylexjs/valid-styles
108
108
textBoxTrim: "trim-both",
109
-
gap: gap["1.5"],
109
+
gap: gap["sm"],
110
110
display: "flex",
111
111
flexDirection: "column",
112
112
flexGrow: 1,
+4
-4
packages/hip-ui/src/components/theme/usePopoverStyles.ts
+4
-4
packages/hip-ui/src/components/theme/usePopoverStyles.ts
···
19
19
},
20
20
animation: {
21
21
"--origin-x": {
22
-
":is([data-placement=left],[data-placement=left] > *)": sizeSpace["4"],
23
-
":is([data-placement=right],[data-placement=right] > *)": `calc(${sizeSpace["4"]} * -1)`,
22
+
":is([data-placement=left],[data-placement=left] > *)": sizeSpace["2xl"],
23
+
":is([data-placement=right],[data-placement=right] > *)": `calc(${sizeSpace["2xl"]} * -1)`,
24
24
},
25
25
"--origin-y": {
26
-
":is([data-placement=bottom],[data-placement=bottom] > *)": `calc(${sizeSpace["4"]} * -1)`,
27
-
":is([data-placement=top],[data-placement=top] > *)": sizeSpace["4"],
26
+
":is([data-placement=bottom],[data-placement=bottom] > *)": `calc(${sizeSpace["2xl"]} * -1)`,
27
+
":is([data-placement=top],[data-placement=top] > *)": sizeSpace["2xl"],
28
28
},
29
29
opacity: {
30
30
default: 1,
+1
-1
packages/hip-ui/src/components/time-field/index.tsx
+1
-1
packages/hip-ui/src/components/time-field/index.tsx
+13
-14
packages/hip-ui/src/components/toast/Toast.tsx
+13
-14
packages/hip-ui/src/components/toast/Toast.tsx
···
29
29
warningColor,
30
30
} from "../theme/color.stylex";
31
31
import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex";
32
-
import { shadow } from "../theme/shadow.stylex";
33
32
import { lineHeight, typeramp } from "../theme/typography.stylex";
34
33
import { usePopoverStyles } from "../theme/usePopoverStyles";
35
34
import { toasts } from "./queue";
36
35
37
36
const styles = stylex.create({
38
37
region: {
39
-
gap: gap["2"],
38
+
gap: gap["md"],
40
39
outline: "none",
41
40
display: "flex",
42
41
flexDirection: "column-reverse",
43
42
position: "fixed",
44
43
zIndex: 9999,
45
-
bottom: verticalSpace["4"],
46
-
right: horizontalSpace["4"],
44
+
bottom: verticalSpace["3xl"],
45
+
right: horizontalSpace["3xl"],
47
46
},
48
47
toast: {
49
-
gap: gap["4"],
48
+
gap: gap["2xl"],
50
49
alignItems: "center",
51
50
display: "flex",
52
51
flexDirection: "row",
53
52
justifyContent: "space-between",
54
-
minWidth: sizeSpace["60"],
55
-
paddingBottom: verticalSpace["3"],
56
-
paddingLeft: horizontalSpace["4"],
57
-
paddingRight: horizontalSpace["4"],
58
-
paddingTop: verticalSpace["3"],
53
+
minWidth: sizeSpace["23xl"],
54
+
paddingBottom: verticalSpace["xl"],
55
+
paddingLeft: horizontalSpace["3xl"],
56
+
paddingRight: horizontalSpace["3xl"],
57
+
paddingTop: verticalSpace["xl"],
59
58
},
60
59
content: {
61
60
flex: "1 1 auto",
62
-
gap: gap["2.5"],
61
+
gap: gap["lg"],
63
62
display: "flex",
64
63
flexDirection: "column",
65
64
minWidth: 0,
···
97
96
},
98
97
flexShrink: 0,
99
98
pointerEvents: "none",
100
-
height: sizeSpace["4"],
101
-
width: sizeSpace["4"],
99
+
height: sizeSpace["2xl"],
100
+
width: sizeSpace["2xl"],
102
101
},
103
102
},
104
103
critical: {
···
158
157
</Text>
159
158
)}
160
159
</ToastContent>
161
-
<Flex direction="row" gap="1">
160
+
<Flex direction="row" gap="xs">
162
161
{toast.content.action && (
163
162
<Button
164
163
size="sm"
+9
-9
packages/hip-ui/src/components/toolbar/index.tsx
+9
-9
packages/hip-ui/src/components/toolbar/index.tsx
···
20
20
21
21
const styles = stylex.create({
22
22
toolbar: {
23
-
gap: gap["1"],
23
+
gap: gap["xs"],
24
24
display: "flex",
25
25
flexWrap: "wrap",
26
26
},
···
40
40
":is([data-orientation=vertical] *)": "1px",
41
41
},
42
42
marginBottom: {
43
-
":is([data-orientation=horizontal] *)": sizeSpace["1"],
44
-
":is([data-orientation=vertical] *)": sizeSpace["2"],
43
+
":is([data-orientation=horizontal] *)": sizeSpace["xxs"],
44
+
":is([data-orientation=vertical] *)": sizeSpace["sm"],
45
45
},
46
46
marginLeft: {
47
-
":is([data-orientation=horizontal] *)": sizeSpace["2"],
48
-
":is([data-orientation=vertical] *)": sizeSpace["1"],
47
+
":is([data-orientation=horizontal] *)": sizeSpace["sm"],
48
+
":is([data-orientation=vertical] *)": sizeSpace["xxs"],
49
49
},
50
50
marginRight: {
51
-
":is([data-orientation=horizontal] *)": sizeSpace["2"],
52
-
":is([data-orientation=vertical] *)": sizeSpace["1"],
51
+
":is([data-orientation=horizontal] *)": sizeSpace["sm"],
52
+
":is([data-orientation=vertical] *)": sizeSpace["xxs"],
53
53
},
54
54
marginTop: {
55
-
":is([data-orientation=horizontal] *)": sizeSpace["1"],
56
-
":is([data-orientation=vertical] *)": sizeSpace["2"],
55
+
":is([data-orientation=horizontal] *)": sizeSpace["xxs"],
56
+
":is([data-orientation=vertical] *)": sizeSpace["sm"],
57
57
},
58
58
width: {
59
59
":is([data-orientation=horizontal] *)": "1px",
+4
-4
packages/hip-ui/src/components/tooltip/index.tsx
+4
-4
packages/hip-ui/src/components/tooltip/index.tsx
···
29
29
fontFamily: fontFamily["sans"],
30
30
fontSize: fontSize["sm"],
31
31
lineHeight: lineHeight["sm"],
32
-
paddingBottom: verticalSpace["1"],
33
-
paddingLeft: horizontalSpace["2"],
34
-
paddingRight: horizontalSpace["2"],
35
-
paddingTop: verticalSpace["1"],
32
+
paddingBottom: verticalSpace["xs"],
33
+
paddingLeft: horizontalSpace["md"],
34
+
paddingRight: horizontalSpace["md"],
35
+
paddingTop: verticalSpace["xs"],
36
36
37
37
"--origin": {
38
38
":is([data-placement=bottom])": "translateY(-4px)",
+10
-10
packages/hip-ui/src/components/tree/index.tsx
+10
-10
packages/hip-ui/src/components/tree/index.tsx
···
36
36
position: "relative",
37
37
},
38
38
itemInner: {
39
-
gap: gap["1"],
40
-
paddingLeft: horizontalSpace["0.5"],
39
+
gap: gap["xs"],
40
+
paddingLeft: horizontalSpace["xxs"],
41
41
},
42
42
selected: {
43
43
backgroundColor: primaryColor.component2,
44
44
},
45
45
spacer: {
46
-
width: `calc((var(--tree-item-level, 0) - 1) * ${sizeSpace["3"]})`,
46
+
width: `calc((var(--tree-item-level, 0) - 1) * ${sizeSpace["md"]})`,
47
47
},
48
48
content: {
49
-
gap: gap["2"],
49
+
gap: gap["md"],
50
50
alignItems: "center",
51
51
display: "flex",
52
52
flexGrow: 1,
···
78
78
79
79
// eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles
80
80
":is(*) svg": {
81
-
height: sizeSpace["3"],
82
-
width: sizeSpace["3"],
81
+
height: sizeSpace["md"],
82
+
width: sizeSpace["md"],
83
83
},
84
84
},
85
85
addon: {
86
-
marginBottom: `calc(${sizeSpace["2"]} * -1)`,
87
-
marginTop: `calc(${sizeSpace["2"]} * -1)`,
86
+
marginBottom: `calc(${sizeSpace["sm"]} * -1)`,
87
+
marginTop: `calc(${sizeSpace["sm"]} * -1)`,
88
88
},
89
89
dragButtonWrapper: {
90
90
opacity: {
···
107
107
display: "flex",
108
108
justifyContent: "center",
109
109
110
-
height: sizeSpace["8"],
111
-
width: sizeSpace["8"],
110
+
height: sizeSpace["6xl"],
111
+
width: sizeSpace["6xl"],
112
112
},
113
113
});
114
114
+20
-20
packages/hip-ui/src/components/typography/index.tsx
+20
-20
packages/hip-ui/src/components/typography/index.tsx
···
30
30
31
31
const styles = stylex.create({
32
32
pre: {
33
-
padding: sizeSpace["4"],
33
+
padding: sizeSpace["2xl"],
34
34
borderColor: uiColor.border2,
35
35
borderRadius: radius.lg,
36
36
borderStyle: "solid",
···
38
38
39
39
cornerShape: "squircle",
40
40
position: "relative",
41
-
marginBottom: verticalSpace["8"],
42
-
marginTop: verticalSpace["8"],
41
+
marginBottom: verticalSpace["7xl"],
42
+
marginTop: verticalSpace["7xl"],
43
43
},
44
44
copyButton: {
45
45
position: "absolute",
46
-
right: horizontalSpace["3"],
47
-
top: verticalSpace["2.5"],
46
+
right: horizontalSpace["xl"],
47
+
top: verticalSpace["lg"],
48
48
},
49
49
blockquote: {
50
-
gap: gap["5"],
50
+
gap: gap["4xl"],
51
51
color: ui.textDim,
52
52
display: "flex",
53
53
flexDirection: "column",
···
56
56
borderLeftStyle: "solid",
57
57
borderLeftWidth: 1,
58
58
marginBottom: 0,
59
-
marginLeft: horizontalSpace["2"],
59
+
marginLeft: horizontalSpace["md"],
60
60
marginRight: 0,
61
61
marginTop: 0,
62
-
paddingBottom: verticalSpace["2"],
63
-
paddingLeft: horizontalSpace["4"],
64
-
paddingTop: verticalSpace["2"],
62
+
paddingBottom: verticalSpace["md"],
63
+
paddingLeft: horizontalSpace["3xl"],
64
+
paddingTop: verticalSpace["md"],
65
65
},
66
66
unorderedList: {
67
67
margin: 0,
68
-
gap: gap["3"],
68
+
gap: gap["xl"],
69
69
display: "flex",
70
70
flexDirection: "column",
71
71
listStyleType: "disc",
72
-
paddingLeft: horizontalSpace["8"],
72
+
paddingLeft: horizontalSpace["7xl"],
73
73
},
74
74
orderedList: {
75
75
margin: 0,
76
-
gap: gap["3"],
76
+
gap: gap["xl"],
77
77
display: "flex",
78
78
flexDirection: "column",
79
79
listStyleType: "decimal",
80
-
paddingLeft: horizontalSpace["8"],
80
+
paddingLeft: horizontalSpace["7xl"],
81
81
},
82
82
listItem: {
83
83
fontFamily: fontFamily["sans"],
84
84
fontSize: fontSize["base"],
85
85
lineHeight: lineHeight["base"],
86
-
paddingLeft: horizontalSpace["1"],
86
+
paddingLeft: horizontalSpace["xs"],
87
87
},
88
88
inlineCode: {
89
89
borderRadius: radius.sm,
90
90
cornerShape: "squircle",
91
91
fontSize: "0.95em",
92
92
position: "relative",
93
-
paddingBottom: verticalSpace["1"],
94
-
paddingLeft: horizontalSpace["1"],
95
-
paddingRight: horizontalSpace["1"],
96
-
paddingTop: verticalSpace["1"],
93
+
paddingBottom: verticalSpace["xs"],
94
+
paddingLeft: horizontalSpace["xs"],
95
+
paddingRight: horizontalSpace["xs"],
96
+
paddingTop: verticalSpace["xs"],
97
97
top: "-0.01em",
98
98
},
99
99
underline: {
···
430
430
return (
431
431
<Flex
432
432
direction="row"
433
-
gap="2"
433
+
gap="md"
434
434
align="center"
435
435
data-heading-link
436
436
data-hovered={isHovered || undefined}
+1
packages/hip-ui/src/components/typography/text.tsx
+1
packages/hip-ui/src/components/typography/text.tsx
+2
-2
packages/hip-ui/src/components/window-splitter/index.tsx
+2
-2
packages/hip-ui/src/components/window-splitter/index.tsx
···
53
53
54
54
height: {
55
55
":is([data-handle-orientation='horizontal'] *)": "100%",
56
-
":is([data-handle-orientation='vertical'] *)": sizeSpace["2"],
56
+
":is([data-handle-orientation='vertical'] *)": sizeSpace["sm"],
57
57
},
58
58
width: {
59
-
":is([data-handle-orientation='horizontal'] *)": sizeSpace["2"],
59
+
":is([data-handle-orientation='horizontal'] *)": sizeSpace["sm"],
60
60
":is([data-handle-orientation='vertical'] *)": "100%",
61
61
},
62
62
},
+379
-1
pnpm-lock.yaml
+379
-1
pnpm-lock.yaml
···
461
461
'@types/react-dom':
462
462
specifier: 'catalog:'
463
463
version: 19.2.0(@types/react@19.2.0)
464
+
jscodeshift:
465
+
specifier: ^17.3.0
466
+
version: 17.3.0
464
467
tsx:
465
468
specifier: ^4.20.6
466
469
version: 4.20.6
···
497
500
resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
498
501
engines: {node: '>=6.9.0'}
499
502
503
+
'@babel/code-frame@7.29.0':
504
+
resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
505
+
engines: {node: '>=6.9.0'}
506
+
500
507
'@babel/compat-data@7.28.5':
501
508
resolution: {integrity: sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==}
502
509
engines: {node: '>=6.9.0'}
···
507
514
508
515
'@babel/generator@7.28.5':
509
516
resolution: {integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==}
517
+
engines: {node: '>=6.9.0'}
518
+
519
+
'@babel/generator@7.29.1':
520
+
resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
510
521
engines: {node: '>=6.9.0'}
511
522
512
523
'@babel/helper-annotate-as-pure@7.27.3':
···
523
534
peerDependencies:
524
535
'@babel/core': ^7.0.0
525
536
537
+
'@babel/helper-create-class-features-plugin@7.28.6':
538
+
resolution: {integrity: sha512-dTOdvsjnG3xNT9Y0AUg1wAl38y+4Rl4sf9caSQZOXdNqVn+H+HbbJ4IyyHaIqNR6SW9oJpA/RuRjsjCw2IdIow==}
539
+
engines: {node: '>=6.9.0'}
540
+
peerDependencies:
541
+
'@babel/core': ^7.0.0
542
+
526
543
'@babel/helper-globals@7.28.0':
527
544
resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
528
545
engines: {node: '>=6.9.0'}
···
549
566
resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==}
550
567
engines: {node: '>=6.9.0'}
551
568
569
+
'@babel/helper-plugin-utils@7.28.6':
570
+
resolution: {integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==}
571
+
engines: {node: '>=6.9.0'}
572
+
552
573
'@babel/helper-replace-supers@7.27.1':
553
574
resolution: {integrity: sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==}
554
575
engines: {node: '>=6.9.0'}
555
576
peerDependencies:
556
577
'@babel/core': ^7.0.0
557
578
579
+
'@babel/helper-replace-supers@7.28.6':
580
+
resolution: {integrity: sha512-mq8e+laIk94/yFec3DxSjCRD2Z0TAjhVbEJY3UQrlwVo15Lmt7C2wAUbK4bjnTs4APkwsYLTahXRraQXhb1WCg==}
581
+
engines: {node: '>=6.9.0'}
582
+
peerDependencies:
583
+
'@babel/core': ^7.0.0
584
+
558
585
'@babel/helper-skip-transparent-expression-wrappers@7.27.1':
559
586
resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
560
587
engines: {node: '>=6.9.0'}
···
580
607
engines: {node: '>=6.0.0'}
581
608
hasBin: true
582
609
610
+
'@babel/parser@7.29.2':
611
+
resolution: {integrity: sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==}
612
+
engines: {node: '>=6.0.0'}
613
+
hasBin: true
614
+
583
615
'@babel/plugin-syntax-flow@7.27.1':
584
616
resolution: {integrity: sha512-p9OkPbZ5G7UT1MofwYFigGebnrzGJacoBSQM0/6bi/PUMVE+qlWDD/OalvQKbwgQzU6dl0xAv6r4X7Jme0RYxA==}
585
617
engines: {node: '>=6.9.0'}
···
598
630
peerDependencies:
599
631
'@babel/core': ^7.0.0-0
600
632
633
+
'@babel/plugin-transform-class-properties@7.28.6':
634
+
resolution: {integrity: sha512-dY2wS3I2G7D697VHndN91TJr8/AAfXQNt5ynCTI/MpxMsSzHp+52uNivYT5wCPax3whc47DR8Ba7cmlQMg24bw==}
635
+
engines: {node: '>=6.9.0'}
636
+
peerDependencies:
637
+
'@babel/core': ^7.0.0-0
638
+
639
+
'@babel/plugin-transform-flow-strip-types@7.27.1':
640
+
resolution: {integrity: sha512-G5eDKsu50udECw7DL2AcsysXiQyB7Nfg521t2OAJ4tbfTJ27doHLeF/vlI1NZGlLdbb/v+ibvtL1YBQqYOwJGg==}
641
+
engines: {node: '>=6.9.0'}
642
+
peerDependencies:
643
+
'@babel/core': ^7.0.0-0
644
+
601
645
'@babel/plugin-transform-modules-commonjs@7.27.1':
602
646
resolution: {integrity: sha512-OJguuwlTYlN0gBZFRPqwOGNWssZjfIUdS7HMYtN8c1KmwpwHFBwTeFZrg9XZa+DFTitWOW5iTAG7tyCUPsCCyw==}
603
647
engines: {node: '>=6.9.0'}
604
648
peerDependencies:
605
649
'@babel/core': ^7.0.0-0
606
650
651
+
'@babel/plugin-transform-nullish-coalescing-operator@7.28.6':
652
+
resolution: {integrity: sha512-3wKbRgmzYbw24mDJXT7N+ADXw8BC/imU9yo9c9X9NKaLF1fW+e5H1U5QjMUBe4Qo4Ox/o++IyUkl1sVCLgevKg==}
653
+
engines: {node: '>=6.9.0'}
654
+
peerDependencies:
655
+
'@babel/core': ^7.0.0-0
656
+
657
+
'@babel/plugin-transform-optional-chaining@7.28.6':
658
+
resolution: {integrity: sha512-A4zobikRGJTsX9uqVFdafzGkqD30t26ck2LmOzAuLL8b2x6k3TIqRiT2xVvA9fNmFeTX484VpsdgmKNA0bS23w==}
659
+
engines: {node: '>=6.9.0'}
660
+
peerDependencies:
661
+
'@babel/core': ^7.0.0-0
662
+
663
+
'@babel/plugin-transform-private-methods@7.28.6':
664
+
resolution: {integrity: sha512-piiuapX9CRv7+0st8lmuUlRSmX6mBcVeNQ1b4AYzJxfCMuBfB0vBXDiGSmm03pKJw1v6cZ8KSeM+oUnM6yAExg==}
665
+
engines: {node: '>=6.9.0'}
666
+
peerDependencies:
667
+
'@babel/core': ^7.0.0-0
668
+
607
669
'@babel/plugin-transform-react-jsx-self@7.27.1':
608
670
resolution: {integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==}
609
671
engines: {node: '>=6.9.0'}
···
622
684
peerDependencies:
623
685
'@babel/core': ^7.0.0-0
624
686
687
+
'@babel/preset-flow@7.27.1':
688
+
resolution: {integrity: sha512-ez3a2it5Fn6P54W8QkbfIyyIbxlXvcxyWHHvno1Wg0Ej5eiJY5hBb8ExttoIOJJk7V2dZE6prP7iby5q2aQ0Lg==}
689
+
engines: {node: '>=6.9.0'}
690
+
peerDependencies:
691
+
'@babel/core': ^7.0.0-0
692
+
625
693
'@babel/preset-typescript@7.28.5':
626
694
resolution: {integrity: sha512-+bQy5WOI2V6LJZpPVxY+yp66XdZ2yifu0Mc1aP5CQKgjn4QM5IN2i5fAZ4xKop47pr8rpVhiAeu+nDQa12C8+g==}
627
695
engines: {node: '>=6.9.0'}
628
696
peerDependencies:
629
697
'@babel/core': ^7.0.0-0
630
698
699
+
'@babel/register@7.28.6':
700
+
resolution: {integrity: sha512-pgcbbEl/dWQYb6L6Yew6F94rdwygfuv+vJ/tXfwIOYAfPB6TNWpXUMEtEq3YuTeHRdvMIhvz13bkT9CNaS+wqA==}
701
+
engines: {node: '>=6.9.0'}
702
+
peerDependencies:
703
+
'@babel/core': ^7.0.0-0
704
+
631
705
'@babel/runtime@7.28.4':
632
706
resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
633
707
engines: {node: '>=6.9.0'}
···
636
710
resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
637
711
engines: {node: '>=6.9.0'}
638
712
713
+
'@babel/template@7.28.6':
714
+
resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
715
+
engines: {node: '>=6.9.0'}
716
+
639
717
'@babel/traverse@7.28.5':
640
718
resolution: {integrity: sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==}
641
719
engines: {node: '>=6.9.0'}
642
720
721
+
'@babel/traverse@7.29.0':
722
+
resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
723
+
engines: {node: '>=6.9.0'}
724
+
643
725
'@babel/types@7.28.5':
644
726
resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
727
+
engines: {node: '>=6.9.0'}
728
+
729
+
'@babel/types@7.29.0':
730
+
resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
645
731
engines: {node: '>=6.9.0'}
646
732
647
733
'@bcoe/v8-coverage@1.0.2':
···
4404
4490
resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
4405
4491
engines: {node: '>=12'}
4406
4492
4493
+
clone-deep@4.0.1:
4494
+
resolution: {integrity: sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==}
4495
+
engines: {node: '>=6'}
4496
+
4407
4497
clsx@2.1.1:
4408
4498
resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
4409
4499
engines: {node: '>=6'}
···
5052
5142
resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
5053
5143
engines: {node: '>=8'}
5054
5144
5145
+
find-cache-dir@2.1.0:
5146
+
resolution: {integrity: sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==}
5147
+
engines: {node: '>=6'}
5148
+
5055
5149
find-replace@3.0.0:
5056
5150
resolution: {integrity: sha512-6Tb2myMioCAgv5kfvP5/PkZZ/ntTpVK39fHY7WkWBgvbeE+VHd/tZuZ4mrC+bxh4cfOZeYKVPaJIZtZXV7GNCQ==}
5057
5151
engines: {node: '>=4.0.0'}
···
5060
5154
resolution: {integrity: sha512-afd4O7zpqHeRyg4PfDQsXmlDe2PfdHtJt6Akt8jOWaApLOZk5JXs6VMR29lz03pRe9mpykrRCYIYxaJYcfpncQ==}
5061
5155
engines: {node: '>=18'}
5062
5156
5157
+
find-up@3.0.0:
5158
+
resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
5159
+
engines: {node: '>=6'}
5160
+
5063
5161
find-up@5.0.0:
5064
5162
resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
5065
5163
engines: {node: '>=10'}
···
5070
5168
5071
5169
flatted@3.3.3:
5072
5170
resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
5171
+
5172
+
flow-parser@0.307.0:
5173
+
resolution: {integrity: sha512-tgyfAH8UdNCrrNx5H1Qwu6ldFWXqcH7ag6LgN1vCEwK8tamBnJ6ekfJRk32rKM4Jr7V7zhhYwhBDVb+XQtriFQ==}
5174
+
engines: {node: '>=0.4.0'}
5073
5175
5074
5176
for-each@0.3.5:
5075
5177
resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
···
5531
5633
resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
5532
5634
engines: {node: '>=12'}
5533
5635
5636
+
is-plain-object@2.0.4:
5637
+
resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
5638
+
engines: {node: '>=0.10.0'}
5639
+
5534
5640
is-plain-object@5.0.0:
5535
5641
resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
5536
5642
engines: {node: '>=0.10.0'}
···
5617
5723
isexe@2.0.0:
5618
5724
resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
5619
5725
5726
+
isobject@3.0.1:
5727
+
resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
5728
+
engines: {node: '>=0.10.0'}
5729
+
5620
5730
istanbul-lib-coverage@3.2.2:
5621
5731
resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
5622
5732
engines: {node: '>=8'}
···
5670
5780
resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
5671
5781
hasBin: true
5672
5782
5783
+
jscodeshift@17.3.0:
5784
+
resolution: {integrity: sha512-LjFrGOIORqXBU+jwfC9nbkjmQfFldtMIoS6d9z2LG/lkmyNXsJAySPT+2SWXJEoE68/bCWcxKpXH37npftgmow==}
5785
+
engines: {node: '>=16'}
5786
+
hasBin: true
5787
+
peerDependencies:
5788
+
'@babel/preset-env': ^7.1.6
5789
+
peerDependenciesMeta:
5790
+
'@babel/preset-env':
5791
+
optional: true
5792
+
5673
5793
jsdom@27.0.1:
5674
5794
resolution: {integrity: sha512-SNSQteBL1IlV2zqhwwolaG9CwhIhTvVHWg3kTss/cLE7H/X4644mtPQqYvCfsSrGQWt9hSZcgOXX8bOZaMN+kA==}
5675
5795
engines: {node: '>=20'}
···
5838
5958
resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
5839
5959
engines: {node: '>=14'}
5840
5960
5961
+
locate-path@3.0.0:
5962
+
resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
5963
+
engines: {node: '>=6'}
5964
+
5841
5965
locate-path@6.0.0:
5842
5966
resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
5843
5967
engines: {node: '>=10'}
···
5909
6033
5910
6034
magicast@0.3.5:
5911
6035
resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
6036
+
6037
+
make-dir@2.1.0:
6038
+
resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
6039
+
engines: {node: '>=6'}
5912
6040
5913
6041
make-dir@4.0.0:
5914
6042
resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
···
6342
6470
oxlint-tsgolint:
6343
6471
optional: true
6344
6472
6473
+
p-limit@2.3.0:
6474
+
resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
6475
+
engines: {node: '>=6'}
6476
+
6345
6477
p-limit@3.1.0:
6346
6478
resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
6347
6479
engines: {node: '>=10'}
···
6350
6482
resolution: {integrity: sha512-kuUqqHNUqoIWp/c467RI4X6mmyuojY5jGutNU0wVTmEOOfcuwLqyMVoAi9MKi2Ak+5i9+nhmrK4ufZE8069kHA==}
6351
6483
engines: {node: '>=18'}
6352
6484
6485
+
p-locate@3.0.0:
6486
+
resolution: {integrity: sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==}
6487
+
engines: {node: '>=6'}
6488
+
6353
6489
p-locate@5.0.0:
6354
6490
resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
6355
6491
engines: {node: '>=10'}
6492
+
6493
+
p-try@2.2.0:
6494
+
resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
6495
+
engines: {node: '>=6'}
6356
6496
6357
6497
package-json-from-dist@1.0.1:
6358
6498
resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
···
6384
6524
resolution: {integrity: sha512-0YNdUceMdaQwoKce1gatDScmMo5pu/tfABfnzEqeG0gtTmd7mh/WcwgUjtAeOU7N8nFFlbQBnFK2gXW5fGvmMA==}
6385
6525
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
6386
6526
6527
+
path-exists@3.0.0:
6528
+
resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
6529
+
engines: {node: '>=4'}
6530
+
6387
6531
path-exists@4.0.0:
6388
6532
resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
6389
6533
engines: {node: '>=8'}
···
6437
6581
picomatch@4.0.3:
6438
6582
resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
6439
6583
engines: {node: '>=12'}
6584
+
6585
+
pify@4.0.1:
6586
+
resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
6587
+
engines: {node: '>=6'}
6588
+
6589
+
pirates@4.0.7:
6590
+
resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
6591
+
engines: {node: '>= 6'}
6592
+
6593
+
pkg-dir@3.0.0:
6594
+
resolution: {integrity: sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==}
6595
+
engines: {node: '>=6'}
6440
6596
6441
6597
pkg-types@1.3.1:
6442
6598
resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
···
6906
7062
resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
6907
7063
engines: {node: '>=4'}
6908
7064
7065
+
semver@5.7.2:
7066
+
resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
7067
+
hasBin: true
7068
+
6909
7069
semver@6.3.1:
6910
7070
resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
6911
7071
hasBin: true
···
6953
7113
6954
7114
setprototypeof@1.2.0:
6955
7115
resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
7116
+
7117
+
shallow-clone@3.0.1:
7118
+
resolution: {integrity: sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==}
7119
+
engines: {node: '>=8'}
6956
7120
6957
7121
shebang-command@2.0.0:
6958
7122
resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
···
7280
7444
resolution: {integrity: sha512-Y1KQBgDd/NUc+LfOtKS6mNsC9CCaH+m2P1RoIZy7RAPo3C3/t8X45+zgut31cRZtZ3xKPjfn3TkGTrctC2TQIQ==}
7281
7445
hasBin: true
7282
7446
7447
+
tmp@0.2.5:
7448
+
resolution: {integrity: sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==}
7449
+
engines: {node: '>=14.14'}
7450
+
7283
7451
to-regex-range@5.0.1:
7284
7452
resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
7285
7453
engines: {node: '>=8.0'}
···
7908
8076
resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==}
7909
8077
engines: {node: '>=18'}
7910
8078
8079
+
write-file-atomic@5.0.1:
8080
+
resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
8081
+
engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
8082
+
7911
8083
ws@8.18.3:
7912
8084
resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==}
7913
8085
engines: {node: '>=10.0.0'}
···
8036
8208
js-tokens: 4.0.0
8037
8209
picocolors: 1.1.1
8038
8210
8211
+
'@babel/code-frame@7.29.0':
8212
+
dependencies:
8213
+
'@babel/helper-validator-identifier': 7.28.5
8214
+
js-tokens: 4.0.0
8215
+
picocolors: 1.1.1
8216
+
8039
8217
'@babel/compat-data@7.28.5': {}
8040
8218
8041
8219
'@babel/core@7.28.5':
···
8066
8244
'@jridgewell/trace-mapping': 0.3.31
8067
8245
jsesc: 3.1.0
8068
8246
8247
+
'@babel/generator@7.29.1':
8248
+
dependencies:
8249
+
'@babel/parser': 7.29.2
8250
+
'@babel/types': 7.29.0
8251
+
'@jridgewell/gen-mapping': 0.3.13
8252
+
'@jridgewell/trace-mapping': 0.3.31
8253
+
jsesc: 3.1.0
8254
+
8069
8255
'@babel/helper-annotate-as-pure@7.27.3':
8070
8256
dependencies:
8071
8257
'@babel/types': 7.28.5
···
8091
8277
transitivePeerDependencies:
8092
8278
- supports-color
8093
8279
8280
+
'@babel/helper-create-class-features-plugin@7.28.6(@babel/core@7.28.5)':
8281
+
dependencies:
8282
+
'@babel/core': 7.28.5
8283
+
'@babel/helper-annotate-as-pure': 7.27.3
8284
+
'@babel/helper-member-expression-to-functions': 7.28.5
8285
+
'@babel/helper-optimise-call-expression': 7.27.1
8286
+
'@babel/helper-replace-supers': 7.28.6(@babel/core@7.28.5)
8287
+
'@babel/helper-skip-transparent-expression-wrappers': 7.27.1
8288
+
'@babel/traverse': 7.29.0
8289
+
semver: 6.3.1
8290
+
transitivePeerDependencies:
8291
+
- supports-color
8292
+
8094
8293
'@babel/helper-globals@7.28.0': {}
8095
8294
8096
8295
'@babel/helper-member-expression-to-functions@7.28.5':
8097
8296
dependencies:
8098
-
'@babel/traverse': 7.28.5
8297
+
'@babel/traverse': 7.29.0
8099
8298
'@babel/types': 7.28.5
8100
8299
transitivePeerDependencies:
8101
8300
- supports-color
···
8122
8321
8123
8322
'@babel/helper-plugin-utils@7.27.1': {}
8124
8323
8324
+
'@babel/helper-plugin-utils@7.28.6': {}
8325
+
8125
8326
'@babel/helper-replace-supers@7.27.1(@babel/core@7.28.5)':
8126
8327
dependencies:
8127
8328
'@babel/core': 7.28.5
8128
8329
'@babel/helper-member-expression-to-functions': 7.28.5
8129
8330
'@babel/helper-optimise-call-expression': 7.27.1
8130
8331
'@babel/traverse': 7.28.5
8332
+
transitivePeerDependencies:
8333
+
- supports-color
8334
+
8335
+
'@babel/helper-replace-supers@7.28.6(@babel/core@7.28.5)':
8336
+
dependencies:
8337
+
'@babel/core': 7.28.5
8338
+
'@babel/helper-member-expression-to-functions': 7.28.5
8339
+
'@babel/helper-optimise-call-expression': 7.27.1
8340
+
'@babel/traverse': 7.29.0
8131
8341
transitivePeerDependencies:
8132
8342
- supports-color
8133
8343
···
8153
8363
dependencies:
8154
8364
'@babel/types': 7.28.5
8155
8365
8366
+
'@babel/parser@7.29.2':
8367
+
dependencies:
8368
+
'@babel/types': 7.29.0
8369
+
8156
8370
'@babel/plugin-syntax-flow@7.27.1(@babel/core@7.28.5)':
8157
8371
dependencies:
8158
8372
'@babel/core': 7.28.5
···
8168
8382
'@babel/core': 7.28.5
8169
8383
'@babel/helper-plugin-utils': 7.27.1
8170
8384
8385
+
'@babel/plugin-transform-class-properties@7.28.6(@babel/core@7.28.5)':
8386
+
dependencies:
8387
+
'@babel/core': 7.28.5
8388
+
'@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.28.5)
8389
+
'@babel/helper-plugin-utils': 7.28.6
8390
+
transitivePeerDependencies:
8391
+
- supports-color
8392
+
8393
+
'@babel/plugin-transform-flow-strip-types@7.27.1(@babel/core@7.28.5)':
8394
+
dependencies:
8395
+
'@babel/core': 7.28.5
8396
+
'@babel/helper-plugin-utils': 7.27.1
8397
+
'@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.28.5)
8398
+
8171
8399
'@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.28.5)':
8172
8400
dependencies:
8173
8401
'@babel/core': 7.28.5
···
8176
8404
transitivePeerDependencies:
8177
8405
- supports-color
8178
8406
8407
+
'@babel/plugin-transform-nullish-coalescing-operator@7.28.6(@babel/core@7.28.5)':
8408
+
dependencies:
8409
+
'@babel/core': 7.28.5
8410
+
'@babel/helper-plugin-utils': 7.28.6
8411
+
8412
+
'@babel/plugin-transform-optional-chaining@7.28.6(@babel/core@7.28.5)':
8413
+
dependencies:
8414
+
'@babel/core': 7.28.5
8415
+
'@babel/helper-plugin-utils': 7.28.6
8416
+
'@babel/helper-skip-transparent-expression-wrappers': 7.27.1
8417
+
transitivePeerDependencies:
8418
+
- supports-color
8419
+
8420
+
'@babel/plugin-transform-private-methods@7.28.6(@babel/core@7.28.5)':
8421
+
dependencies:
8422
+
'@babel/core': 7.28.5
8423
+
'@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.28.5)
8424
+
'@babel/helper-plugin-utils': 7.28.6
8425
+
transitivePeerDependencies:
8426
+
- supports-color
8427
+
8179
8428
'@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.28.5)':
8180
8429
dependencies:
8181
8430
'@babel/core': 7.28.5
···
8197
8446
transitivePeerDependencies:
8198
8447
- supports-color
8199
8448
8449
+
'@babel/preset-flow@7.27.1(@babel/core@7.28.5)':
8450
+
dependencies:
8451
+
'@babel/core': 7.28.5
8452
+
'@babel/helper-plugin-utils': 7.27.1
8453
+
'@babel/helper-validator-option': 7.27.1
8454
+
'@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.28.5)
8455
+
8200
8456
'@babel/preset-typescript@7.28.5(@babel/core@7.28.5)':
8201
8457
dependencies:
8202
8458
'@babel/core': 7.28.5
···
8208
8464
transitivePeerDependencies:
8209
8465
- supports-color
8210
8466
8467
+
'@babel/register@7.28.6(@babel/core@7.28.5)':
8468
+
dependencies:
8469
+
'@babel/core': 7.28.5
8470
+
clone-deep: 4.0.1
8471
+
find-cache-dir: 2.1.0
8472
+
make-dir: 2.1.0
8473
+
pirates: 4.0.7
8474
+
source-map-support: 0.5.21
8475
+
8211
8476
'@babel/runtime@7.28.4': {}
8212
8477
8213
8478
'@babel/template@7.27.2':
···
8216
8481
'@babel/parser': 7.28.5
8217
8482
'@babel/types': 7.28.5
8218
8483
8484
+
'@babel/template@7.28.6':
8485
+
dependencies:
8486
+
'@babel/code-frame': 7.29.0
8487
+
'@babel/parser': 7.29.2
8488
+
'@babel/types': 7.29.0
8489
+
8219
8490
'@babel/traverse@7.28.5':
8220
8491
dependencies:
8221
8492
'@babel/code-frame': 7.27.1
···
8224
8495
'@babel/parser': 7.28.5
8225
8496
'@babel/template': 7.27.2
8226
8497
'@babel/types': 7.28.5
8498
+
debug: 4.4.3
8499
+
transitivePeerDependencies:
8500
+
- supports-color
8501
+
8502
+
'@babel/traverse@7.29.0':
8503
+
dependencies:
8504
+
'@babel/code-frame': 7.29.0
8505
+
'@babel/generator': 7.29.1
8506
+
'@babel/helper-globals': 7.28.0
8507
+
'@babel/parser': 7.29.2
8508
+
'@babel/template': 7.28.6
8509
+
'@babel/types': 7.29.0
8227
8510
debug: 4.4.3
8228
8511
transitivePeerDependencies:
8229
8512
- supports-color
···
8233
8516
'@babel/helper-string-parser': 7.27.1
8234
8517
'@babel/helper-validator-identifier': 7.28.5
8235
8518
8519
+
'@babel/types@7.29.0':
8520
+
dependencies:
8521
+
'@babel/helper-string-parser': 7.27.1
8522
+
'@babel/helper-validator-identifier': 7.28.5
8523
+
8236
8524
'@bcoe/v8-coverage@1.0.2': {}
8237
8525
8238
8526
'@cloudflare/kv-asset-handler@0.4.0':
···
12667
12955
strip-ansi: 6.0.1
12668
12956
wrap-ansi: 7.0.0
12669
12957
12958
+
clone-deep@4.0.1:
12959
+
dependencies:
12960
+
is-plain-object: 2.0.4
12961
+
kind-of: 6.0.3
12962
+
shallow-clone: 3.0.1
12963
+
12670
12964
clsx@2.1.1: {}
12671
12965
12672
12966
cluster-key-slot@1.1.2: {}
···
13427
13721
dependencies:
13428
13722
to-regex-range: 5.0.1
13429
13723
13724
+
find-cache-dir@2.1.0:
13725
+
dependencies:
13726
+
commondir: 1.0.1
13727
+
make-dir: 2.1.0
13728
+
pkg-dir: 3.0.0
13729
+
13430
13730
find-replace@3.0.0:
13431
13731
dependencies:
13432
13732
array-back: 3.1.0
13433
13733
13434
13734
find-up-simple@1.0.1: {}
13435
13735
13736
+
find-up@3.0.0:
13737
+
dependencies:
13738
+
locate-path: 3.0.0
13739
+
13436
13740
find-up@5.0.0:
13437
13741
dependencies:
13438
13742
locate-path: 6.0.0
···
13444
13748
keyv: 4.5.4
13445
13749
13446
13750
flatted@3.3.3: {}
13751
+
13752
+
flow-parser@0.307.0: {}
13447
13753
13448
13754
for-each@0.3.5:
13449
13755
dependencies:
···
13975
14281
13976
14282
is-plain-obj@4.1.0: {}
13977
14283
14284
+
is-plain-object@2.0.4:
14285
+
dependencies:
14286
+
isobject: 3.0.1
14287
+
13978
14288
is-plain-object@5.0.0: {}
13979
14289
13980
14290
is-potential-custom-element-name@1.0.1: {}
···
14052
14362
14053
14363
isexe@2.0.0: {}
14054
14364
14365
+
isobject@3.0.1: {}
14366
+
14055
14367
istanbul-lib-coverage@3.2.2: {}
14056
14368
14057
14369
istanbul-lib-report@3.0.1:
···
14117
14429
dependencies:
14118
14430
argparse: 2.0.1
14119
14431
14432
+
jscodeshift@17.3.0:
14433
+
dependencies:
14434
+
'@babel/core': 7.28.5
14435
+
'@babel/parser': 7.28.5
14436
+
'@babel/plugin-transform-class-properties': 7.28.6(@babel/core@7.28.5)
14437
+
'@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.5)
14438
+
'@babel/plugin-transform-nullish-coalescing-operator': 7.28.6(@babel/core@7.28.5)
14439
+
'@babel/plugin-transform-optional-chaining': 7.28.6(@babel/core@7.28.5)
14440
+
'@babel/plugin-transform-private-methods': 7.28.6(@babel/core@7.28.5)
14441
+
'@babel/preset-flow': 7.27.1(@babel/core@7.28.5)
14442
+
'@babel/preset-typescript': 7.28.5(@babel/core@7.28.5)
14443
+
'@babel/register': 7.28.6(@babel/core@7.28.5)
14444
+
flow-parser: 0.307.0
14445
+
graceful-fs: 4.2.11
14446
+
micromatch: 4.0.8
14447
+
neo-async: 2.6.2
14448
+
picocolors: 1.1.1
14449
+
recast: 0.23.11
14450
+
tmp: 0.2.5
14451
+
write-file-atomic: 5.0.1
14452
+
transitivePeerDependencies:
14453
+
- supports-color
14454
+
14120
14455
jsdom@27.0.1(postcss@8.5.6):
14121
14456
dependencies:
14122
14457
'@asamuzakjp/dom-selector': 6.7.3
···
14281
14616
pkg-types: 2.3.0
14282
14617
quansync: 0.2.11
14283
14618
14619
+
locate-path@3.0.0:
14620
+
dependencies:
14621
+
p-locate: 3.0.0
14622
+
path-exists: 3.0.0
14623
+
14284
14624
locate-path@6.0.0:
14285
14625
dependencies:
14286
14626
p-locate: 5.0.0
···
14338
14678
'@babel/parser': 7.28.5
14339
14679
'@babel/types': 7.28.5
14340
14680
source-map-js: 1.2.1
14681
+
14682
+
make-dir@2.1.0:
14683
+
dependencies:
14684
+
pify: 4.0.1
14685
+
semver: 5.7.2
14341
14686
14342
14687
make-dir@4.0.0:
14343
14688
dependencies:
···
15169
15514
'@oxlint/binding-win32-ia32-msvc': 1.50.0
15170
15515
'@oxlint/binding-win32-x64-msvc': 1.50.0
15171
15516
15517
+
p-limit@2.3.0:
15518
+
dependencies:
15519
+
p-try: 2.2.0
15520
+
15172
15521
p-limit@3.1.0:
15173
15522
dependencies:
15174
15523
yocto-queue: 0.1.0
···
15177
15526
dependencies:
15178
15527
yocto-queue: 1.2.1
15179
15528
15529
+
p-locate@3.0.0:
15530
+
dependencies:
15531
+
p-limit: 2.3.0
15532
+
15180
15533
p-locate@5.0.0:
15181
15534
dependencies:
15182
15535
p-limit: 3.1.0
15536
+
15537
+
p-try@2.2.0: {}
15183
15538
15184
15539
package-json-from-dist@1.0.1: {}
15185
15540
···
15218
15573
15219
15574
patch-console@2.0.0: {}
15220
15575
15576
+
path-exists@3.0.0: {}
15577
+
15221
15578
path-exists@4.0.0: {}
15222
15579
15223
15580
path-key@3.1.1: {}
···
15257
15614
picomatch@2.3.1: {}
15258
15615
15259
15616
picomatch@4.0.3: {}
15617
+
15618
+
pify@4.0.1: {}
15619
+
15620
+
pirates@4.0.7: {}
15621
+
15622
+
pkg-dir@3.0.0:
15623
+
dependencies:
15624
+
find-up: 3.0.0
15260
15625
15261
15626
pkg-types@1.3.1:
15262
15627
dependencies:
···
16008
16373
dependencies:
16009
16374
extend-shallow: 2.0.1
16010
16375
kind-of: 6.0.3
16376
+
16377
+
semver@5.7.2: {}
16011
16378
16012
16379
semver@6.3.1: {}
16013
16380
···
16076
16443
16077
16444
setprototypeof@1.2.0: {}
16078
16445
16446
+
shallow-clone@3.0.1:
16447
+
dependencies:
16448
+
kind-of: 6.0.3
16449
+
16079
16450
shebang-command@2.0.0:
16080
16451
dependencies:
16081
16452
shebang-regex: 3.0.0
···
16451
16822
tldts@7.0.17:
16452
16823
dependencies:
16453
16824
tldts-core: 7.0.17
16825
+
16826
+
tmp@0.2.5: {}
16454
16827
16455
16828
to-regex-range@5.0.1:
16456
16829
dependencies:
···
17172
17545
ansi-styles: 6.2.3
17173
17546
string-width: 7.2.0
17174
17547
strip-ansi: 7.1.2
17548
+
17549
+
write-file-atomic@5.0.1:
17550
+
dependencies:
17551
+
imurmurhash: 0.1.4
17552
+
signal-exit: 4.1.0
17175
17553
17176
17554
ws@8.18.3: {}
17177
17555