@blockle/blocks 0.12.1 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +5 -22
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.mjs +8 -25
- package/dist/momotaro.chunk.d.ts +297 -279
- package/dist/styles/components/display/Divider/Divider.cjs +43 -59
- package/dist/styles/components/display/Divider/Divider.mjs +43 -59
- package/dist/styles/components/form/Button/Button.cjs +4 -4
- package/dist/styles/components/form/Button/Button.mjs +3 -3
- package/dist/styles/components/overlay/Dialog/Dialog.cjs +18 -21
- package/dist/styles/components/overlay/Dialog/Dialog.mjs +18 -21
- package/dist/styles/themes/momotaro/components/divider.css.cjs +4 -0
- package/dist/styles/themes/momotaro/components/divider.css.mjs +4 -0
- package/package.json +1 -2
package/dist/momotaro.chunk.d.ts
CHANGED
|
@@ -4,10 +4,10 @@ import react__default, { useEffect } from 'react';
|
|
|
4
4
|
import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
|
|
5
5
|
|
|
6
6
|
declare const atoms: ((props: {
|
|
7
|
-
readonly backgroundColor?: "
|
|
8
|
-
readonly borderColor?: "
|
|
9
|
-
readonly borderRadius?: ("
|
|
10
|
-
readonly borderWidth?: ("
|
|
7
|
+
readonly backgroundColor?: "black" | "white" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
|
|
8
|
+
readonly borderColor?: "black" | "white" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
|
|
9
|
+
readonly borderRadius?: ("large" | "medium" | "small" | "xlarge") | undefined;
|
|
10
|
+
readonly borderWidth?: ("large" | "medium" | "small") | undefined;
|
|
11
11
|
readonly border?: "none" | undefined;
|
|
12
12
|
readonly insetBlock?: 0 | undefined;
|
|
13
13
|
readonly insetBlockStart?: 0 | undefined;
|
|
@@ -15,13 +15,13 @@ declare const atoms: ((props: {
|
|
|
15
15
|
readonly insetInline?: 0 | undefined;
|
|
16
16
|
readonly insetInlineStart?: 0 | undefined;
|
|
17
17
|
readonly insetInlineEnd?: 0 | undefined;
|
|
18
|
-
readonly boxShadow?: ("
|
|
19
|
-
readonly color?: "
|
|
18
|
+
readonly boxShadow?: ("large" | "medium" | "small") | undefined;
|
|
19
|
+
readonly color?: "black" | "white" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
|
|
20
20
|
readonly cursor?: "auto" | "pointer" | undefined;
|
|
21
21
|
readonly fontFamily?: "body" | "primary" | "secondary" | undefined;
|
|
22
22
|
readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
|
|
23
23
|
readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
|
|
24
|
-
readonly lineHeight?: ("
|
|
24
|
+
readonly lineHeight?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
|
|
25
25
|
readonly blockSize?: "auto" | "fit-content" | "full" | undefined;
|
|
26
26
|
readonly maxBlockSize?: "auto" | "fit-content" | "full" | undefined;
|
|
27
27
|
readonly inlineSize?: "auto" | "fit-content" | "full" | undefined;
|
|
@@ -34,9 +34,9 @@ declare const atoms: ((props: {
|
|
|
34
34
|
readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
|
|
35
35
|
readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
|
|
36
36
|
readonly textWrap?: "balance" | "wrap" | undefined;
|
|
37
|
-
readonly transition?: ("
|
|
37
|
+
readonly transition?: ("normal" | "slow" | "fast") | undefined;
|
|
38
38
|
readonly userSelect?: "none" | undefined;
|
|
39
|
-
readonly whiteSpace?: "
|
|
39
|
+
readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
|
|
40
40
|
readonly wordBreak?: "break-word" | undefined;
|
|
41
41
|
readonly wordWrap?: "break-word" | undefined;
|
|
42
42
|
inset?: 0 | undefined;
|
|
@@ -59,12 +59,12 @@ declare const atoms: ((props: {
|
|
|
59
59
|
desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
60
60
|
wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
61
61
|
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
|
|
62
|
-
readonly columnGap?: (("none" | "
|
|
63
|
-
mobile?: ("none" | "
|
|
64
|
-
tablet?: ("none" | "
|
|
65
|
-
desktop?: ("none" | "
|
|
66
|
-
wide?: ("none" | "
|
|
67
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
62
|
+
readonly columnGap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
|
|
63
|
+
mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
64
|
+
tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
65
|
+
desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
66
|
+
wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
67
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
|
|
68
68
|
readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
|
|
69
69
|
mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
|
|
70
70
|
tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
|
|
@@ -95,138 +95,138 @@ declare const atoms: ((props: {
|
|
|
95
95
|
desktop?: 0 | 1 | undefined;
|
|
96
96
|
wide?: 0 | 1 | undefined;
|
|
97
97
|
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
|
|
98
|
-
readonly flexWrap?: ("
|
|
99
|
-
mobile?: "
|
|
100
|
-
tablet?: "
|
|
101
|
-
desktop?: "
|
|
102
|
-
wide?: "
|
|
103
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "
|
|
104
|
-
readonly fontSize?: (("
|
|
105
|
-
mobile?: ("
|
|
106
|
-
tablet?: ("
|
|
107
|
-
desktop?: ("
|
|
108
|
-
wide?: ("
|
|
109
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("
|
|
110
|
-
readonly gap?: (("none" | "
|
|
111
|
-
mobile?: ("none" | "
|
|
112
|
-
tablet?: ("none" | "
|
|
113
|
-
desktop?: ("none" | "
|
|
114
|
-
wide?: ("none" | "
|
|
115
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
98
|
+
readonly flexWrap?: ("nowrap" | "wrap" | {
|
|
99
|
+
mobile?: "nowrap" | "wrap" | undefined;
|
|
100
|
+
tablet?: "nowrap" | "wrap" | undefined;
|
|
101
|
+
desktop?: "nowrap" | "wrap" | undefined;
|
|
102
|
+
wide?: "nowrap" | "wrap" | undefined;
|
|
103
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "nowrap" | "wrap" | null>;
|
|
104
|
+
readonly fontSize?: (("large" | "medium" | "small" | "xsmall" | "xlarge") | {
|
|
105
|
+
mobile?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
|
|
106
|
+
tablet?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
|
|
107
|
+
desktop?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
|
|
108
|
+
wide?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
|
|
109
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("large" | "medium" | "small" | "xsmall" | "xlarge") | null>;
|
|
110
|
+
readonly gap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
|
|
111
|
+
mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
112
|
+
tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
113
|
+
desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
114
|
+
wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
115
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
|
|
116
116
|
readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
|
|
117
117
|
mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
|
|
118
118
|
tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
|
|
119
119
|
desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
|
|
120
120
|
wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
|
|
121
121
|
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
|
|
122
|
-
readonly marginBlockStart?: ("none" | "
|
|
123
|
-
mobile?: "none" | "
|
|
124
|
-
tablet?: "none" | "
|
|
125
|
-
desktop?: "none" | "
|
|
126
|
-
wide?: "none" | "
|
|
127
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
128
|
-
readonly marginBlockEnd?: ("none" | "
|
|
129
|
-
mobile?: "none" | "
|
|
130
|
-
tablet?: "none" | "
|
|
131
|
-
desktop?: "none" | "
|
|
132
|
-
wide?: "none" | "
|
|
133
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
134
|
-
readonly marginInlineStart?: ("none" | "
|
|
135
|
-
mobile?: "none" | "
|
|
136
|
-
tablet?: "none" | "
|
|
137
|
-
desktop?: "none" | "
|
|
138
|
-
wide?: "none" | "
|
|
139
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
140
|
-
readonly marginInlineEnd?: ("none" | "
|
|
141
|
-
mobile?: "none" | "
|
|
142
|
-
tablet?: "none" | "
|
|
143
|
-
desktop?: "none" | "
|
|
144
|
-
wide?: "none" | "
|
|
145
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
122
|
+
readonly marginBlockStart?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
|
|
123
|
+
mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
124
|
+
tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
125
|
+
desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
126
|
+
wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
127
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
|
|
128
|
+
readonly marginBlockEnd?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
|
|
129
|
+
mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
130
|
+
tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
131
|
+
desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
132
|
+
wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
133
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
|
|
134
|
+
readonly marginInlineStart?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
|
|
135
|
+
mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
136
|
+
tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
137
|
+
desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
138
|
+
wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
139
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
|
|
140
|
+
readonly marginInlineEnd?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
|
|
141
|
+
mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
142
|
+
tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
143
|
+
desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
144
|
+
wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
145
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
|
|
146
146
|
readonly outline?: ("none" | {
|
|
147
147
|
mobile?: "none" | undefined;
|
|
148
148
|
tablet?: "none" | undefined;
|
|
149
149
|
desktop?: "none" | undefined;
|
|
150
150
|
wide?: "none" | undefined;
|
|
151
151
|
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
|
|
152
|
-
readonly padding?: (("none" | "
|
|
153
|
-
mobile?: ("none" | "
|
|
154
|
-
tablet?: ("none" | "
|
|
155
|
-
desktop?: ("none" | "
|
|
156
|
-
wide?: ("none" | "
|
|
157
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
158
|
-
readonly paddingBlock?: (("none" | "
|
|
159
|
-
mobile?: ("none" | "
|
|
160
|
-
tablet?: ("none" | "
|
|
161
|
-
desktop?: ("none" | "
|
|
162
|
-
wide?: ("none" | "
|
|
163
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
164
|
-
readonly paddingBlockStart?: (("none" | "
|
|
165
|
-
mobile?: ("none" | "
|
|
166
|
-
tablet?: ("none" | "
|
|
167
|
-
desktop?: ("none" | "
|
|
168
|
-
wide?: ("none" | "
|
|
169
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
170
|
-
readonly paddingBlockEnd?: (("none" | "
|
|
171
|
-
mobile?: ("none" | "
|
|
172
|
-
tablet?: ("none" | "
|
|
173
|
-
desktop?: ("none" | "
|
|
174
|
-
wide?: ("none" | "
|
|
175
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
176
|
-
readonly paddingInline?: (("none" | "
|
|
177
|
-
mobile?: ("none" | "
|
|
178
|
-
tablet?: ("none" | "
|
|
179
|
-
desktop?: ("none" | "
|
|
180
|
-
wide?: ("none" | "
|
|
181
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
182
|
-
readonly paddingInlineStart?: (("none" | "
|
|
183
|
-
mobile?: ("none" | "
|
|
184
|
-
tablet?: ("none" | "
|
|
185
|
-
desktop?: ("none" | "
|
|
186
|
-
wide?: ("none" | "
|
|
187
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
188
|
-
readonly paddingInlineEnd?: (("none" | "
|
|
189
|
-
mobile?: ("none" | "
|
|
190
|
-
tablet?: ("none" | "
|
|
191
|
-
desktop?: ("none" | "
|
|
192
|
-
wide?: ("none" | "
|
|
193
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
152
|
+
readonly padding?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
|
|
153
|
+
mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
154
|
+
tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
155
|
+
desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
156
|
+
wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
157
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
|
|
158
|
+
readonly paddingBlock?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
|
|
159
|
+
mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
160
|
+
tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
161
|
+
desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
162
|
+
wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
163
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
|
|
164
|
+
readonly paddingBlockStart?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
|
|
165
|
+
mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
166
|
+
tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
167
|
+
desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
168
|
+
wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
169
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
|
|
170
|
+
readonly paddingBlockEnd?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
|
|
171
|
+
mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
172
|
+
tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
173
|
+
desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
174
|
+
wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
175
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
|
|
176
|
+
readonly paddingInline?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
|
|
177
|
+
mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
178
|
+
tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
179
|
+
desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
180
|
+
wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
181
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
|
|
182
|
+
readonly paddingInlineStart?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
|
|
183
|
+
mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
184
|
+
tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
185
|
+
desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
186
|
+
wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
187
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
|
|
188
|
+
readonly paddingInlineEnd?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
|
|
189
|
+
mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
190
|
+
tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
191
|
+
desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
192
|
+
wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
193
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
|
|
194
194
|
readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
|
|
195
195
|
mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
|
|
196
196
|
tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
|
|
197
197
|
desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
|
|
198
198
|
wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
|
|
199
199
|
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
|
|
200
|
-
readonly rowGap?: (("none" | "
|
|
201
|
-
mobile?: ("none" | "
|
|
202
|
-
tablet?: ("none" | "
|
|
203
|
-
desktop?: ("none" | "
|
|
204
|
-
wide?: ("none" | "
|
|
205
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
200
|
+
readonly rowGap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
|
|
201
|
+
mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
202
|
+
tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
203
|
+
desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
204
|
+
wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
205
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
|
|
206
206
|
readonly textAlign?: ("left" | "right" | "center" | "justify" | {
|
|
207
207
|
mobile?: "left" | "right" | "center" | "justify" | undefined;
|
|
208
208
|
tablet?: "left" | "right" | "center" | "justify" | undefined;
|
|
209
209
|
desktop?: "left" | "right" | "center" | "justify" | undefined;
|
|
210
210
|
wide?: "left" | "right" | "center" | "justify" | undefined;
|
|
211
211
|
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
|
|
212
|
-
margin?: ("none" | "
|
|
213
|
-
mobile?: "none" | "
|
|
214
|
-
tablet?: "none" | "
|
|
215
|
-
desktop?: "none" | "
|
|
216
|
-
wide?: "none" | "
|
|
217
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
218
|
-
marginBlock?: ("none" | "
|
|
219
|
-
mobile?: "none" | "
|
|
220
|
-
tablet?: "none" | "
|
|
221
|
-
desktop?: "none" | "
|
|
222
|
-
wide?: "none" | "
|
|
223
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
224
|
-
marginInline?: ("none" | "
|
|
225
|
-
mobile?: "none" | "
|
|
226
|
-
tablet?: "none" | "
|
|
227
|
-
desktop?: "none" | "
|
|
228
|
-
wide?: "none" | "
|
|
229
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
212
|
+
margin?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
|
|
213
|
+
mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
214
|
+
tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
215
|
+
desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
216
|
+
wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
217
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
|
|
218
|
+
marginBlock?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
|
|
219
|
+
mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
220
|
+
tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
221
|
+
desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
222
|
+
wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
223
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
|
|
224
|
+
marginInline?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
|
|
225
|
+
mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
226
|
+
tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
227
|
+
desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
228
|
+
wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
229
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
|
|
230
230
|
placeItems?: ("center" | "flex-start" | "flex-end" | {
|
|
231
231
|
mobile?: "center" | "flex-start" | "flex-end" | undefined;
|
|
232
232
|
tablet?: "center" | "flex-start" | "flex-end" | undefined;
|
|
@@ -234,7 +234,7 @@ declare const atoms: ((props: {
|
|
|
234
234
|
wide?: "center" | "flex-start" | "flex-end" | undefined;
|
|
235
235
|
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
|
|
236
236
|
}) => string) & {
|
|
237
|
-
properties: Set<"
|
|
237
|
+
properties: Set<"alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "blockSize" | "boxShadow" | "color" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "justifyContent" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "maxBlockSize" | "maxInlineSize" | "opacity" | "overflowBlock" | "overflowInline" | "paddingBlockEnd" | "paddingBlockStart" | "paddingInlineEnd" | "paddingInlineStart" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "textTransform" | "textWrap" | "userSelect" | "whiteSpace" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "borderRadius" | "borderWidth" | "flex" | "gap" | "inset" | "insetBlock" | "insetInline" | "margin" | "marginBlock" | "marginInline" | "outline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "placeItems" | "textDecoration" | "transition">;
|
|
238
238
|
};
|
|
239
239
|
|
|
240
240
|
declare const breakpoints: {
|
|
@@ -526,22 +526,22 @@ declare function makeTheme(theme: ThemeInput): Theme;
|
|
|
526
526
|
declare const vars: {
|
|
527
527
|
space: {
|
|
528
528
|
none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
529
|
+
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
530
|
+
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
531
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
529
532
|
gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
530
533
|
xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
531
|
-
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
532
|
-
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
533
|
-
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
534
534
|
xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
535
535
|
};
|
|
536
536
|
borderRadius: {
|
|
537
|
-
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
538
|
-
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
539
537
|
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
538
|
+
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
539
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
540
540
|
xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
541
541
|
};
|
|
542
542
|
color: {
|
|
543
|
-
white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
544
543
|
black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
544
|
+
white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
545
545
|
body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
546
546
|
primaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
547
547
|
primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
@@ -556,9 +556,9 @@ declare const vars: {
|
|
|
556
556
|
link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
557
557
|
};
|
|
558
558
|
borderWidth: {
|
|
559
|
-
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
560
|
-
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
561
559
|
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
560
|
+
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
561
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
562
562
|
};
|
|
563
563
|
fontFamily: {
|
|
564
564
|
body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
@@ -566,10 +566,10 @@ declare const vars: {
|
|
|
566
566
|
secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
567
567
|
};
|
|
568
568
|
fontSize: {
|
|
569
|
-
xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
570
|
-
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
571
|
-
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
572
569
|
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
570
|
+
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
571
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
572
|
+
xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
573
573
|
xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
574
574
|
};
|
|
575
575
|
fontWeight: {
|
|
@@ -578,21 +578,21 @@ declare const vars: {
|
|
|
578
578
|
strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
579
579
|
};
|
|
580
580
|
lineHeight: {
|
|
581
|
-
xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
582
|
-
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
583
|
-
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
584
581
|
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
582
|
+
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
583
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
584
|
+
xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
585
585
|
xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
586
586
|
};
|
|
587
587
|
transition: {
|
|
588
|
-
slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
589
588
|
normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
589
|
+
slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
590
590
|
fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
591
591
|
};
|
|
592
592
|
shadow: {
|
|
593
|
-
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
594
|
-
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
595
593
|
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
594
|
+
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
595
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
596
596
|
};
|
|
597
597
|
focus: {
|
|
598
598
|
boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
@@ -627,7 +627,7 @@ type SpinnerProps = {
|
|
|
627
627
|
} & MarginAtoms;
|
|
628
628
|
declare const Spinner: React.FC<SpinnerProps>;
|
|
629
629
|
|
|
630
|
-
type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Atoms | '
|
|
630
|
+
type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Atoms | 'ref'>;
|
|
631
631
|
|
|
632
632
|
type ButtonProps = {
|
|
633
633
|
children: React.ReactNode;
|
|
@@ -642,13 +642,14 @@ type ButtonProps = {
|
|
|
642
642
|
endSlot?: React.ReactNode;
|
|
643
643
|
disabled?: boolean;
|
|
644
644
|
asChild?: boolean;
|
|
645
|
+
popovertarget?: string;
|
|
645
646
|
} & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
|
|
646
647
|
declare const Button: react.ForwardRefExoticComponent<{
|
|
647
648
|
children: React.ReactNode;
|
|
648
649
|
type?: "button" | "reset" | "submit" | undefined;
|
|
649
650
|
variant?: "outline" | "solid" | "ghost" | undefined;
|
|
650
651
|
intent?: "danger" | "neutral" | undefined;
|
|
651
|
-
size?: "
|
|
652
|
+
size?: "large" | "medium" | "small" | undefined;
|
|
652
653
|
inlineSize?: Atoms['inlineSize'];
|
|
653
654
|
alignSelf?: Atoms['alignSelf'];
|
|
654
655
|
loading?: boolean | undefined;
|
|
@@ -656,6 +657,7 @@ declare const Button: react.ForwardRefExoticComponent<{
|
|
|
656
657
|
endSlot?: React.ReactNode;
|
|
657
658
|
disabled?: boolean | undefined;
|
|
658
659
|
asChild?: boolean | undefined;
|
|
660
|
+
popovertarget?: string | undefined;
|
|
659
661
|
} & Omit<HTMLElementProps<HTMLButtonElement>, "size"> & MarginAtoms & react.RefAttributes<HTMLButtonElement>>;
|
|
660
662
|
|
|
661
663
|
type CheckboxProps = {
|
|
@@ -760,10 +762,10 @@ declare const Box: react.ForwardRefExoticComponent<{
|
|
|
760
762
|
style?: react.CSSProperties | undefined;
|
|
761
763
|
asChild?: boolean | undefined;
|
|
762
764
|
} & {
|
|
763
|
-
readonly backgroundColor?: "
|
|
764
|
-
readonly borderColor?: "
|
|
765
|
-
readonly borderRadius?: ("
|
|
766
|
-
readonly borderWidth?: ("
|
|
765
|
+
readonly backgroundColor?: "black" | "white" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
|
|
766
|
+
readonly borderColor?: "black" | "white" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
|
|
767
|
+
readonly borderRadius?: ("large" | "medium" | "small" | "xlarge") | undefined;
|
|
768
|
+
readonly borderWidth?: ("large" | "medium" | "small") | undefined;
|
|
767
769
|
readonly border?: "none" | undefined;
|
|
768
770
|
readonly insetBlock?: 0 | undefined;
|
|
769
771
|
readonly insetBlockStart?: 0 | undefined;
|
|
@@ -771,13 +773,13 @@ declare const Box: react.ForwardRefExoticComponent<{
|
|
|
771
773
|
readonly insetInline?: 0 | undefined;
|
|
772
774
|
readonly insetInlineStart?: 0 | undefined;
|
|
773
775
|
readonly insetInlineEnd?: 0 | undefined;
|
|
774
|
-
readonly boxShadow?: ("
|
|
775
|
-
readonly color?: "
|
|
776
|
+
readonly boxShadow?: ("large" | "medium" | "small") | undefined;
|
|
777
|
+
readonly color?: "black" | "white" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
|
|
776
778
|
readonly cursor?: "auto" | "pointer" | undefined;
|
|
777
779
|
readonly fontFamily?: "body" | "primary" | "secondary" | undefined;
|
|
778
780
|
readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
|
|
779
781
|
readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
|
|
780
|
-
readonly lineHeight?: ("
|
|
782
|
+
readonly lineHeight?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
|
|
781
783
|
readonly blockSize?: "auto" | "fit-content" | "full" | undefined;
|
|
782
784
|
readonly maxBlockSize?: "auto" | "fit-content" | "full" | undefined;
|
|
783
785
|
readonly inlineSize?: "auto" | "fit-content" | "full" | undefined;
|
|
@@ -790,9 +792,9 @@ declare const Box: react.ForwardRefExoticComponent<{
|
|
|
790
792
|
readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
|
|
791
793
|
readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
|
|
792
794
|
readonly textWrap?: "balance" | "wrap" | undefined;
|
|
793
|
-
readonly transition?: ("
|
|
795
|
+
readonly transition?: ("normal" | "slow" | "fast") | undefined;
|
|
794
796
|
readonly userSelect?: "none" | undefined;
|
|
795
|
-
readonly whiteSpace?: "
|
|
797
|
+
readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
|
|
796
798
|
readonly wordBreak?: "break-word" | undefined;
|
|
797
799
|
readonly wordWrap?: "break-word" | undefined;
|
|
798
800
|
inset?: 0 | undefined;
|
|
@@ -815,12 +817,12 @@ declare const Box: react.ForwardRefExoticComponent<{
|
|
|
815
817
|
desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
816
818
|
wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
817
819
|
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
|
|
818
|
-
readonly columnGap?: (("none" | "
|
|
819
|
-
mobile?: ("none" | "
|
|
820
|
-
tablet?: ("none" | "
|
|
821
|
-
desktop?: ("none" | "
|
|
822
|
-
wide?: ("none" | "
|
|
823
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
820
|
+
readonly columnGap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
|
|
821
|
+
mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
822
|
+
tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
823
|
+
desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
824
|
+
wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
825
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
|
|
824
826
|
readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
|
|
825
827
|
mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
|
|
826
828
|
tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
|
|
@@ -851,138 +853,138 @@ declare const Box: react.ForwardRefExoticComponent<{
|
|
|
851
853
|
desktop?: 0 | 1 | undefined;
|
|
852
854
|
wide?: 0 | 1 | undefined;
|
|
853
855
|
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
|
|
854
|
-
readonly flexWrap?: ("
|
|
855
|
-
mobile?: "
|
|
856
|
-
tablet?: "
|
|
857
|
-
desktop?: "
|
|
858
|
-
wide?: "
|
|
859
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "
|
|
860
|
-
readonly fontSize?: (("
|
|
861
|
-
mobile?: ("
|
|
862
|
-
tablet?: ("
|
|
863
|
-
desktop?: ("
|
|
864
|
-
wide?: ("
|
|
865
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("
|
|
866
|
-
readonly gap?: (("none" | "
|
|
867
|
-
mobile?: ("none" | "
|
|
868
|
-
tablet?: ("none" | "
|
|
869
|
-
desktop?: ("none" | "
|
|
870
|
-
wide?: ("none" | "
|
|
871
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
856
|
+
readonly flexWrap?: ("nowrap" | "wrap" | {
|
|
857
|
+
mobile?: "nowrap" | "wrap" | undefined;
|
|
858
|
+
tablet?: "nowrap" | "wrap" | undefined;
|
|
859
|
+
desktop?: "nowrap" | "wrap" | undefined;
|
|
860
|
+
wide?: "nowrap" | "wrap" | undefined;
|
|
861
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "nowrap" | "wrap" | null>;
|
|
862
|
+
readonly fontSize?: (("large" | "medium" | "small" | "xsmall" | "xlarge") | {
|
|
863
|
+
mobile?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
|
|
864
|
+
tablet?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
|
|
865
|
+
desktop?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
|
|
866
|
+
wide?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
|
|
867
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("large" | "medium" | "small" | "xsmall" | "xlarge") | null>;
|
|
868
|
+
readonly gap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
|
|
869
|
+
mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
870
|
+
tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
871
|
+
desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
872
|
+
wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
873
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
|
|
872
874
|
readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
|
|
873
875
|
mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
|
|
874
876
|
tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
|
|
875
877
|
desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
|
|
876
878
|
wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
|
|
877
879
|
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
|
|
878
|
-
readonly marginBlockStart?: ("none" | "
|
|
879
|
-
mobile?: "none" | "
|
|
880
|
-
tablet?: "none" | "
|
|
881
|
-
desktop?: "none" | "
|
|
882
|
-
wide?: "none" | "
|
|
883
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
884
|
-
readonly marginBlockEnd?: ("none" | "
|
|
885
|
-
mobile?: "none" | "
|
|
886
|
-
tablet?: "none" | "
|
|
887
|
-
desktop?: "none" | "
|
|
888
|
-
wide?: "none" | "
|
|
889
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
890
|
-
readonly marginInlineStart?: ("none" | "
|
|
891
|
-
mobile?: "none" | "
|
|
892
|
-
tablet?: "none" | "
|
|
893
|
-
desktop?: "none" | "
|
|
894
|
-
wide?: "none" | "
|
|
895
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
896
|
-
readonly marginInlineEnd?: ("none" | "
|
|
897
|
-
mobile?: "none" | "
|
|
898
|
-
tablet?: "none" | "
|
|
899
|
-
desktop?: "none" | "
|
|
900
|
-
wide?: "none" | "
|
|
901
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
880
|
+
readonly marginBlockStart?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
|
|
881
|
+
mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
882
|
+
tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
883
|
+
desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
884
|
+
wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
885
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
|
|
886
|
+
readonly marginBlockEnd?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
|
|
887
|
+
mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
888
|
+
tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
889
|
+
desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
890
|
+
wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
891
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
|
|
892
|
+
readonly marginInlineStart?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
|
|
893
|
+
mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
894
|
+
tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
895
|
+
desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
896
|
+
wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
897
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
|
|
898
|
+
readonly marginInlineEnd?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
|
|
899
|
+
mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
900
|
+
tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
901
|
+
desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
902
|
+
wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
903
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
|
|
902
904
|
readonly outline?: ("none" | {
|
|
903
905
|
mobile?: "none" | undefined;
|
|
904
906
|
tablet?: "none" | undefined;
|
|
905
907
|
desktop?: "none" | undefined;
|
|
906
908
|
wide?: "none" | undefined;
|
|
907
909
|
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
|
|
908
|
-
readonly padding?: (("none" | "
|
|
909
|
-
mobile?: ("none" | "
|
|
910
|
-
tablet?: ("none" | "
|
|
911
|
-
desktop?: ("none" | "
|
|
912
|
-
wide?: ("none" | "
|
|
913
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
914
|
-
readonly paddingBlock?: (("none" | "
|
|
915
|
-
mobile?: ("none" | "
|
|
916
|
-
tablet?: ("none" | "
|
|
917
|
-
desktop?: ("none" | "
|
|
918
|
-
wide?: ("none" | "
|
|
919
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
920
|
-
readonly paddingBlockStart?: (("none" | "
|
|
921
|
-
mobile?: ("none" | "
|
|
922
|
-
tablet?: ("none" | "
|
|
923
|
-
desktop?: ("none" | "
|
|
924
|
-
wide?: ("none" | "
|
|
925
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
926
|
-
readonly paddingBlockEnd?: (("none" | "
|
|
927
|
-
mobile?: ("none" | "
|
|
928
|
-
tablet?: ("none" | "
|
|
929
|
-
desktop?: ("none" | "
|
|
930
|
-
wide?: ("none" | "
|
|
931
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
932
|
-
readonly paddingInline?: (("none" | "
|
|
933
|
-
mobile?: ("none" | "
|
|
934
|
-
tablet?: ("none" | "
|
|
935
|
-
desktop?: ("none" | "
|
|
936
|
-
wide?: ("none" | "
|
|
937
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
938
|
-
readonly paddingInlineStart?: (("none" | "
|
|
939
|
-
mobile?: ("none" | "
|
|
940
|
-
tablet?: ("none" | "
|
|
941
|
-
desktop?: ("none" | "
|
|
942
|
-
wide?: ("none" | "
|
|
943
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
944
|
-
readonly paddingInlineEnd?: (("none" | "
|
|
945
|
-
mobile?: ("none" | "
|
|
946
|
-
tablet?: ("none" | "
|
|
947
|
-
desktop?: ("none" | "
|
|
948
|
-
wide?: ("none" | "
|
|
949
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
910
|
+
readonly padding?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
|
|
911
|
+
mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
912
|
+
tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
913
|
+
desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
914
|
+
wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
915
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
|
|
916
|
+
readonly paddingBlock?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
|
|
917
|
+
mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
918
|
+
tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
919
|
+
desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
920
|
+
wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
921
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
|
|
922
|
+
readonly paddingBlockStart?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
|
|
923
|
+
mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
924
|
+
tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
925
|
+
desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
926
|
+
wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
927
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
|
|
928
|
+
readonly paddingBlockEnd?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
|
|
929
|
+
mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
930
|
+
tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
931
|
+
desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
932
|
+
wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
933
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
|
|
934
|
+
readonly paddingInline?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
|
|
935
|
+
mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
936
|
+
tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
937
|
+
desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
938
|
+
wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
939
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
|
|
940
|
+
readonly paddingInlineStart?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
|
|
941
|
+
mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
942
|
+
tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
943
|
+
desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
944
|
+
wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
945
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
|
|
946
|
+
readonly paddingInlineEnd?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
|
|
947
|
+
mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
948
|
+
tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
949
|
+
desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
950
|
+
wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
951
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
|
|
950
952
|
readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
|
|
951
953
|
mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
|
|
952
954
|
tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
|
|
953
955
|
desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
|
|
954
956
|
wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
|
|
955
957
|
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
|
|
956
|
-
readonly rowGap?: (("none" | "
|
|
957
|
-
mobile?: ("none" | "
|
|
958
|
-
tablet?: ("none" | "
|
|
959
|
-
desktop?: ("none" | "
|
|
960
|
-
wide?: ("none" | "
|
|
961
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
958
|
+
readonly rowGap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
|
|
959
|
+
mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
960
|
+
tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
961
|
+
desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
962
|
+
wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
|
|
963
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
|
|
962
964
|
readonly textAlign?: ("left" | "right" | "center" | "justify" | {
|
|
963
965
|
mobile?: "left" | "right" | "center" | "justify" | undefined;
|
|
964
966
|
tablet?: "left" | "right" | "center" | "justify" | undefined;
|
|
965
967
|
desktop?: "left" | "right" | "center" | "justify" | undefined;
|
|
966
968
|
wide?: "left" | "right" | "center" | "justify" | undefined;
|
|
967
969
|
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
|
|
968
|
-
margin?: ("none" | "
|
|
969
|
-
mobile?: "none" | "
|
|
970
|
-
tablet?: "none" | "
|
|
971
|
-
desktop?: "none" | "
|
|
972
|
-
wide?: "none" | "
|
|
973
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
974
|
-
marginBlock?: ("none" | "
|
|
975
|
-
mobile?: "none" | "
|
|
976
|
-
tablet?: "none" | "
|
|
977
|
-
desktop?: "none" | "
|
|
978
|
-
wide?: "none" | "
|
|
979
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
980
|
-
marginInline?: ("none" | "
|
|
981
|
-
mobile?: "none" | "
|
|
982
|
-
tablet?: "none" | "
|
|
983
|
-
desktop?: "none" | "
|
|
984
|
-
wide?: "none" | "
|
|
985
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
970
|
+
margin?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
|
|
971
|
+
mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
972
|
+
tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
973
|
+
desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
974
|
+
wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
975
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
|
|
976
|
+
marginBlock?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
|
|
977
|
+
mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
978
|
+
tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
979
|
+
desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
980
|
+
wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
981
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
|
|
982
|
+
marginInline?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
|
|
983
|
+
mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
984
|
+
tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
985
|
+
desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
986
|
+
wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
|
|
987
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
|
|
986
988
|
placeItems?: ("center" | "flex-start" | "flex-end" | {
|
|
987
989
|
mobile?: "center" | "flex-start" | "flex-end" | undefined;
|
|
988
990
|
tablet?: "center" | "flex-start" | "flex-end" | undefined;
|
|
@@ -1045,7 +1047,7 @@ declare const Link: react.ForwardRefExoticComponent<{
|
|
|
1045
1047
|
asChild?: boolean | undefined;
|
|
1046
1048
|
children?: React.ReactNode;
|
|
1047
1049
|
underline?: boolean | undefined;
|
|
1048
|
-
variant?: "
|
|
1050
|
+
variant?: "inherit" | "primary" | "secondary" | undefined;
|
|
1049
1051
|
} & MarginAtoms & HTMLElementProps<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
|
|
1050
1052
|
|
|
1051
1053
|
type BlocksProviderProps = {
|
|
@@ -1106,20 +1108,36 @@ type TextProps = {
|
|
|
1106
1108
|
} & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLSpanElement>;
|
|
1107
1109
|
declare const Text: React.FC<TextProps>;
|
|
1108
1110
|
|
|
1109
|
-
type
|
|
1111
|
+
type TemplateProps = {
|
|
1112
|
+
asChild?: boolean;
|
|
1113
|
+
children?: React.ReactNode;
|
|
1114
|
+
};
|
|
1110
1115
|
/**
|
|
1111
|
-
*
|
|
1112
|
-
*
|
|
1113
|
-
*
|
|
1114
|
-
*
|
|
1116
|
+
* Create a Template component that can render as a child of another component with asChild prop.
|
|
1117
|
+
*
|
|
1118
|
+
* Example
|
|
1119
|
+
* // Create a Template and Slot components with div as default element
|
|
1120
|
+
* const { Template, Slot } = createAsChildContainer('div');
|
|
1121
|
+
*
|
|
1122
|
+
* const MyComponent = ({ children, asChild, ...restProps }) => {
|
|
1123
|
+
* return (
|
|
1124
|
+
* <Template asChild={asChild} {...restProps}>
|
|
1125
|
+
* <Slot>{childen}</Slot> // Slot is required, will be replaced with children
|
|
1126
|
+
* </Template>
|
|
1127
|
+
* );
|
|
1128
|
+
* }
|
|
1129
|
+
*
|
|
1130
|
+
* <MyComponent className="test">Not a link</MyComponent> // Renders as <div class="test">Not a link</div>
|
|
1131
|
+
* <MyComponent className="test"><a href="#">Link</a></MyComponent> // Renders as <div class="test"><a href="#">Link</a></div>
|
|
1132
|
+
* <MyComponent className="test" asChild><a href="#">Link</a></MyComponent> // Renders as <a href="#" class="test">Link</a>
|
|
1115
1133
|
*/
|
|
1116
|
-
declare function
|
|
1117
|
-
|
|
1118
|
-
|
|
1134
|
+
declare function createAsChildTemplate<T extends keyof HTMLElementTagNameMap>(defaultElement: T): {
|
|
1135
|
+
Template: react.ForwardRefExoticComponent<TemplateProps & HTMLElementProps<HTMLElementTagNameMap[T]> & react.RefAttributes<HTMLElementTagNameMap[T]>>;
|
|
1136
|
+
Slot: react.FC<SlotProps>;
|
|
1137
|
+
};
|
|
1119
1138
|
type SlotProps = {
|
|
1120
|
-
children:
|
|
1139
|
+
children: React.ReactNode;
|
|
1121
1140
|
};
|
|
1122
|
-
declare const Slot: react__default.FC<SlotProps>;
|
|
1123
1141
|
|
|
1124
1142
|
declare function useComponentStyles<T extends keyof ComponentThemesProps>(name: T, props: ComponentThemesProps[T], useDefaultVariants?: boolean): string;
|
|
1125
1143
|
|
|
@@ -1150,9 +1168,9 @@ declare const usePreventBodyScroll: (enabled?: boolean) => void;
|
|
|
1150
1168
|
*/
|
|
1151
1169
|
declare const useRootAriaHidden: (hidden: boolean) => void;
|
|
1152
1170
|
|
|
1153
|
-
type Args = null | undefined | boolean | string;
|
|
1171
|
+
type Args = null | undefined | boolean | string | unknown;
|
|
1154
1172
|
declare const classnames: (...args: Args[]) => string | undefined;
|
|
1155
1173
|
|
|
1156
1174
|
declare const momotaro: Theme;
|
|
1157
1175
|
|
|
1158
|
-
export { BlocksProvider, type BlocksProviderProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Dialog, type DialogProps, Divider, type DividerProps, Heading, type HeadingProps, Inline, type InlineProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Portal, type PortalProps, Progress, type ProgressProps, Radio, type RadioProps, Select, type SelectProps, Slider, type SliderProps,
|
|
1176
|
+
export { BlocksProvider, type BlocksProviderProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Dialog, type DialogProps, Divider, type DividerProps, Heading, type HeadingProps, Inline, type InlineProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Portal, type PortalProps, Progress, type ProgressProps, Radio, type RadioProps, Select, type SelectProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Text, type TextProps, type ThemeComponentsStyles, type ThemeTokens, Tooltip, type TooltipProps, atoms, breakpointQuery, classnames, createAsChildTemplate, makeComponentTheme, makeTheme, momotaro, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars };
|