@blockle/blocks 0.15.0 → 0.15.2
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/momotaro.chunk.d.ts +264 -266
- package/dist/styles/components/form/Input/Input.cjs +2 -2
- package/dist/styles/components/form/Input/Input.mjs +2 -2
- package/dist/styles/components/form/Slider/Slider.cjs +13 -1
- package/dist/styles/components/form/Slider/Slider.mjs +13 -1
- package/package.json +16 -15
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?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
|
|
8
|
+
readonly borderColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
|
|
9
|
+
readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
|
|
10
|
+
readonly borderWidth?: ("small" | "medium" | "large") | 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?: ("small" | "medium" | "large") | undefined;
|
|
19
|
+
readonly color?: "white" | "black" | "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?: ("xsmall" | "small" | "medium" | "large" | "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?: ("slow" | "normal" | "fast") | undefined;
|
|
38
38
|
readonly userSelect?: "none" | undefined;
|
|
39
|
-
readonly whiteSpace?: "
|
|
39
|
+
readonly whiteSpace?: "nowrap" | "pre" | "pre-line" | "pre-wrap" | 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" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
63
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
64
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
65
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
66
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
67
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "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?: ("wrap" | "nowrap" | {
|
|
99
|
+
mobile?: "wrap" | "nowrap" | undefined;
|
|
100
|
+
tablet?: "wrap" | "nowrap" | undefined;
|
|
101
|
+
desktop?: "wrap" | "nowrap" | undefined;
|
|
102
|
+
wide?: "wrap" | "nowrap" | undefined;
|
|
103
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "wrap" | "nowrap" | null>;
|
|
104
|
+
readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
105
|
+
mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
106
|
+
tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
107
|
+
desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
108
|
+
wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
109
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
110
|
+
readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
111
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
112
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
113
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
114
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
115
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "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" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
123
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
124
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
125
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
126
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
127
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
|
|
128
|
+
readonly marginBlockEnd?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
129
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
130
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
131
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
132
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
133
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
|
|
134
|
+
readonly marginInlineStart?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
135
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
136
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
137
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
138
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
139
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
|
|
140
|
+
readonly marginInlineEnd?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
141
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
142
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
143
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
144
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
145
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | 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" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
153
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
154
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
155
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
156
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
157
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
158
|
+
readonly paddingBlock?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
159
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
160
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
161
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
162
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
163
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
164
|
+
readonly paddingBlockStart?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
165
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
166
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
167
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
168
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
169
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
170
|
+
readonly paddingBlockEnd?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
171
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
172
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
173
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
174
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
175
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
176
|
+
readonly paddingInline?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
177
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
178
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
179
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
180
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
181
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
182
|
+
readonly paddingInlineStart?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
183
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
184
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
185
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
186
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
187
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
188
|
+
readonly paddingInlineEnd?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
189
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
190
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
191
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
192
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
193
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "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" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
201
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
202
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
203
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
204
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
205
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "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" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
213
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
214
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
215
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
216
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
217
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
|
|
218
|
+
marginBlock?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
219
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
220
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
221
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
222
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
223
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
|
|
224
|
+
marginInline?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
225
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
226
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
227
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
228
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
229
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | 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<"borderRadius" | "color" | "borderWidth" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "blockSize" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "justifyContent" | "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" | "flex" | "gap" | "inset" | "insetBlock" | "insetInline" | "margin" | "marginBlock" | "marginInline" | "outline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "placeItems" | "textDecoration">;
|
|
238
238
|
};
|
|
239
239
|
|
|
240
240
|
declare const breakpoints: {
|
|
@@ -527,22 +527,22 @@ declare function makeTheme(theme: ThemeInput): Theme;
|
|
|
527
527
|
declare const vars: {
|
|
528
528
|
space: {
|
|
529
529
|
none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
530
|
-
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
531
|
-
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
532
|
-
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
533
530
|
gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
534
531
|
xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
532
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
533
|
+
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
534
|
+
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
535
535
|
xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
536
536
|
};
|
|
537
537
|
borderRadius: {
|
|
538
|
-
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
539
|
-
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
540
538
|
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
539
|
+
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
540
|
+
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
541
541
|
xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
542
542
|
};
|
|
543
543
|
color: {
|
|
544
|
-
black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
545
544
|
white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
545
|
+
black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
546
546
|
body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
547
547
|
primaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
548
548
|
primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
@@ -557,9 +557,9 @@ declare const vars: {
|
|
|
557
557
|
link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
558
558
|
};
|
|
559
559
|
borderWidth: {
|
|
560
|
-
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
561
|
-
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
562
560
|
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
561
|
+
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
562
|
+
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
563
563
|
};
|
|
564
564
|
fontFamily: {
|
|
565
565
|
body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
@@ -567,10 +567,10 @@ declare const vars: {
|
|
|
567
567
|
secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
568
568
|
};
|
|
569
569
|
fontSize: {
|
|
570
|
-
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
571
|
-
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
572
|
-
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
573
570
|
xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
571
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
572
|
+
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
573
|
+
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
574
574
|
xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
575
575
|
};
|
|
576
576
|
fontWeight: {
|
|
@@ -579,21 +579,21 @@ declare const vars: {
|
|
|
579
579
|
strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
580
580
|
};
|
|
581
581
|
lineHeight: {
|
|
582
|
-
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
583
|
-
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
584
|
-
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
585
582
|
xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
583
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
584
|
+
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
585
|
+
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
586
586
|
xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
587
587
|
};
|
|
588
588
|
transition: {
|
|
589
|
-
normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
590
589
|
slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
590
|
+
normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
591
591
|
fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
592
592
|
};
|
|
593
593
|
shadow: {
|
|
594
|
-
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
595
|
-
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
596
594
|
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
595
|
+
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
596
|
+
large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
597
597
|
};
|
|
598
598
|
focus: {
|
|
599
599
|
boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
@@ -678,7 +678,6 @@ type InputProps = {
|
|
|
678
678
|
type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
|
|
679
679
|
startSlot?: React.ReactNode;
|
|
680
680
|
endSlot?: React.ReactNode;
|
|
681
|
-
label: string;
|
|
682
681
|
} & Omit<HTMLElementProps<HTMLInputElement>, 'type'>;
|
|
683
682
|
declare const Input: react.ForwardRefExoticComponent<{
|
|
684
683
|
className?: string;
|
|
@@ -686,7 +685,6 @@ declare const Input: react.ForwardRefExoticComponent<{
|
|
|
686
685
|
type?: OptionalLiteral<"email" | "number" | "password" | "tel" | "text" | "url">;
|
|
687
686
|
startSlot?: React.ReactNode;
|
|
688
687
|
endSlot?: React.ReactNode;
|
|
689
|
-
label: string;
|
|
690
688
|
} & Omit<HTMLElementProps<HTMLInputElement>, "type"> & react.RefAttributes<HTMLInputElement>>;
|
|
691
689
|
|
|
692
690
|
type LabelProps = {
|
|
@@ -765,10 +763,10 @@ declare const Box: react.ForwardRefExoticComponent<{
|
|
|
765
763
|
style?: React.CSSProperties;
|
|
766
764
|
asChild?: boolean;
|
|
767
765
|
} & {
|
|
768
|
-
readonly backgroundColor?: "
|
|
769
|
-
readonly borderColor?: "
|
|
770
|
-
readonly borderRadius?: ("
|
|
771
|
-
readonly borderWidth?: ("
|
|
766
|
+
readonly backgroundColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
|
|
767
|
+
readonly borderColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
|
|
768
|
+
readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
|
|
769
|
+
readonly borderWidth?: ("small" | "medium" | "large") | undefined;
|
|
772
770
|
readonly border?: "none" | undefined;
|
|
773
771
|
readonly insetBlock?: 0 | undefined;
|
|
774
772
|
readonly insetBlockStart?: 0 | undefined;
|
|
@@ -776,13 +774,13 @@ declare const Box: react.ForwardRefExoticComponent<{
|
|
|
776
774
|
readonly insetInline?: 0 | undefined;
|
|
777
775
|
readonly insetInlineStart?: 0 | undefined;
|
|
778
776
|
readonly insetInlineEnd?: 0 | undefined;
|
|
779
|
-
readonly boxShadow?: ("
|
|
780
|
-
readonly color?: "
|
|
777
|
+
readonly boxShadow?: ("small" | "medium" | "large") | undefined;
|
|
778
|
+
readonly color?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
|
|
781
779
|
readonly cursor?: "auto" | "pointer" | undefined;
|
|
782
780
|
readonly fontFamily?: "body" | "primary" | "secondary" | undefined;
|
|
783
781
|
readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
|
|
784
782
|
readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
|
|
785
|
-
readonly lineHeight?: ("
|
|
783
|
+
readonly lineHeight?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
786
784
|
readonly blockSize?: "auto" | "fit-content" | "full" | undefined;
|
|
787
785
|
readonly maxBlockSize?: "auto" | "fit-content" | "full" | undefined;
|
|
788
786
|
readonly inlineSize?: "auto" | "fit-content" | "full" | undefined;
|
|
@@ -795,9 +793,9 @@ declare const Box: react.ForwardRefExoticComponent<{
|
|
|
795
793
|
readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
|
|
796
794
|
readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
|
|
797
795
|
readonly textWrap?: "balance" | "wrap" | undefined;
|
|
798
|
-
readonly transition?: ("
|
|
796
|
+
readonly transition?: ("slow" | "normal" | "fast") | undefined;
|
|
799
797
|
readonly userSelect?: "none" | undefined;
|
|
800
|
-
readonly whiteSpace?: "
|
|
798
|
+
readonly whiteSpace?: "nowrap" | "pre" | "pre-line" | "pre-wrap" | undefined;
|
|
801
799
|
readonly wordBreak?: "break-word" | undefined;
|
|
802
800
|
readonly wordWrap?: "break-word" | undefined;
|
|
803
801
|
inset?: 0 | undefined;
|
|
@@ -820,12 +818,12 @@ declare const Box: react.ForwardRefExoticComponent<{
|
|
|
820
818
|
desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
821
819
|
wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
|
|
822
820
|
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
|
|
823
|
-
readonly columnGap?: (("none" | "
|
|
824
|
-
mobile?: ("none" | "
|
|
825
|
-
tablet?: ("none" | "
|
|
826
|
-
desktop?: ("none" | "
|
|
827
|
-
wide?: ("none" | "
|
|
828
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
821
|
+
readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
822
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
823
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
824
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
825
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
826
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
829
827
|
readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
|
|
830
828
|
mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
|
|
831
829
|
tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
|
|
@@ -856,138 +854,138 @@ declare const Box: react.ForwardRefExoticComponent<{
|
|
|
856
854
|
desktop?: 0 | 1 | undefined;
|
|
857
855
|
wide?: 0 | 1 | undefined;
|
|
858
856
|
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
|
|
859
|
-
readonly flexWrap?: ("
|
|
860
|
-
mobile?: "
|
|
861
|
-
tablet?: "
|
|
862
|
-
desktop?: "
|
|
863
|
-
wide?: "
|
|
864
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "
|
|
865
|
-
readonly fontSize?: (("
|
|
866
|
-
mobile?: ("
|
|
867
|
-
tablet?: ("
|
|
868
|
-
desktop?: ("
|
|
869
|
-
wide?: ("
|
|
870
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("
|
|
871
|
-
readonly gap?: (("none" | "
|
|
872
|
-
mobile?: ("none" | "
|
|
873
|
-
tablet?: ("none" | "
|
|
874
|
-
desktop?: ("none" | "
|
|
875
|
-
wide?: ("none" | "
|
|
876
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
857
|
+
readonly flexWrap?: ("wrap" | "nowrap" | {
|
|
858
|
+
mobile?: "wrap" | "nowrap" | undefined;
|
|
859
|
+
tablet?: "wrap" | "nowrap" | undefined;
|
|
860
|
+
desktop?: "wrap" | "nowrap" | undefined;
|
|
861
|
+
wide?: "wrap" | "nowrap" | undefined;
|
|
862
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "wrap" | "nowrap" | null>;
|
|
863
|
+
readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
864
|
+
mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
865
|
+
tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
866
|
+
desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
867
|
+
wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
868
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
869
|
+
readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
870
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
871
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
872
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
873
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
874
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
877
875
|
readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
|
|
878
876
|
mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
|
|
879
877
|
tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
|
|
880
878
|
desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
|
|
881
879
|
wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
|
|
882
880
|
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
|
|
883
|
-
readonly marginBlockStart?: ("none" | "
|
|
884
|
-
mobile?: "none" | "
|
|
885
|
-
tablet?: "none" | "
|
|
886
|
-
desktop?: "none" | "
|
|
887
|
-
wide?: "none" | "
|
|
888
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
889
|
-
readonly marginBlockEnd?: ("none" | "
|
|
890
|
-
mobile?: "none" | "
|
|
891
|
-
tablet?: "none" | "
|
|
892
|
-
desktop?: "none" | "
|
|
893
|
-
wide?: "none" | "
|
|
894
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
895
|
-
readonly marginInlineStart?: ("none" | "
|
|
896
|
-
mobile?: "none" | "
|
|
897
|
-
tablet?: "none" | "
|
|
898
|
-
desktop?: "none" | "
|
|
899
|
-
wide?: "none" | "
|
|
900
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
901
|
-
readonly marginInlineEnd?: ("none" | "
|
|
902
|
-
mobile?: "none" | "
|
|
903
|
-
tablet?: "none" | "
|
|
904
|
-
desktop?: "none" | "
|
|
905
|
-
wide?: "none" | "
|
|
906
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
881
|
+
readonly marginBlockStart?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
882
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
883
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
884
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
885
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
886
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
|
|
887
|
+
readonly marginBlockEnd?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
888
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
889
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
890
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
891
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
892
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
|
|
893
|
+
readonly marginInlineStart?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
894
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
895
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
896
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
897
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
898
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
|
|
899
|
+
readonly marginInlineEnd?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
900
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
901
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
902
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
903
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
904
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
|
|
907
905
|
readonly outline?: ("none" | {
|
|
908
906
|
mobile?: "none" | undefined;
|
|
909
907
|
tablet?: "none" | undefined;
|
|
910
908
|
desktop?: "none" | undefined;
|
|
911
909
|
wide?: "none" | undefined;
|
|
912
910
|
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
|
|
913
|
-
readonly padding?: (("none" | "
|
|
914
|
-
mobile?: ("none" | "
|
|
915
|
-
tablet?: ("none" | "
|
|
916
|
-
desktop?: ("none" | "
|
|
917
|
-
wide?: ("none" | "
|
|
918
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
919
|
-
readonly paddingBlock?: (("none" | "
|
|
920
|
-
mobile?: ("none" | "
|
|
921
|
-
tablet?: ("none" | "
|
|
922
|
-
desktop?: ("none" | "
|
|
923
|
-
wide?: ("none" | "
|
|
924
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
925
|
-
readonly paddingBlockStart?: (("none" | "
|
|
926
|
-
mobile?: ("none" | "
|
|
927
|
-
tablet?: ("none" | "
|
|
928
|
-
desktop?: ("none" | "
|
|
929
|
-
wide?: ("none" | "
|
|
930
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
931
|
-
readonly paddingBlockEnd?: (("none" | "
|
|
932
|
-
mobile?: ("none" | "
|
|
933
|
-
tablet?: ("none" | "
|
|
934
|
-
desktop?: ("none" | "
|
|
935
|
-
wide?: ("none" | "
|
|
936
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
937
|
-
readonly paddingInline?: (("none" | "
|
|
938
|
-
mobile?: ("none" | "
|
|
939
|
-
tablet?: ("none" | "
|
|
940
|
-
desktop?: ("none" | "
|
|
941
|
-
wide?: ("none" | "
|
|
942
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
943
|
-
readonly paddingInlineStart?: (("none" | "
|
|
944
|
-
mobile?: ("none" | "
|
|
945
|
-
tablet?: ("none" | "
|
|
946
|
-
desktop?: ("none" | "
|
|
947
|
-
wide?: ("none" | "
|
|
948
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
949
|
-
readonly paddingInlineEnd?: (("none" | "
|
|
950
|
-
mobile?: ("none" | "
|
|
951
|
-
tablet?: ("none" | "
|
|
952
|
-
desktop?: ("none" | "
|
|
953
|
-
wide?: ("none" | "
|
|
954
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
911
|
+
readonly padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
912
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
913
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
914
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
915
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
916
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
917
|
+
readonly paddingBlock?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
918
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
919
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
920
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
921
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
922
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
923
|
+
readonly paddingBlockStart?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
924
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
925
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
926
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
927
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
928
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
929
|
+
readonly paddingBlockEnd?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
930
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
931
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
932
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
933
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
934
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
935
|
+
readonly paddingInline?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
936
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
937
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
938
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
939
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
940
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
941
|
+
readonly paddingInlineStart?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
942
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
943
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
944
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
945
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
946
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
947
|
+
readonly paddingInlineEnd?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
948
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
949
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
950
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
951
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
952
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
955
953
|
readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
|
|
956
954
|
mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
|
|
957
955
|
tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
|
|
958
956
|
desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
|
|
959
957
|
wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
|
|
960
958
|
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
|
|
961
|
-
readonly rowGap?: (("none" | "
|
|
962
|
-
mobile?: ("none" | "
|
|
963
|
-
tablet?: ("none" | "
|
|
964
|
-
desktop?: ("none" | "
|
|
965
|
-
wide?: ("none" | "
|
|
966
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "
|
|
959
|
+
readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
|
|
960
|
+
mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
961
|
+
tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
962
|
+
desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
963
|
+
wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
|
|
964
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
|
|
967
965
|
readonly textAlign?: ("left" | "right" | "center" | "justify" | {
|
|
968
966
|
mobile?: "left" | "right" | "center" | "justify" | undefined;
|
|
969
967
|
tablet?: "left" | "right" | "center" | "justify" | undefined;
|
|
970
968
|
desktop?: "left" | "right" | "center" | "justify" | undefined;
|
|
971
969
|
wide?: "left" | "right" | "center" | "justify" | undefined;
|
|
972
970
|
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
|
|
973
|
-
margin?: ("none" | "
|
|
974
|
-
mobile?: "none" | "
|
|
975
|
-
tablet?: "none" | "
|
|
976
|
-
desktop?: "none" | "
|
|
977
|
-
wide?: "none" | "
|
|
978
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
979
|
-
marginBlock?: ("none" | "
|
|
980
|
-
mobile?: "none" | "
|
|
981
|
-
tablet?: "none" | "
|
|
982
|
-
desktop?: "none" | "
|
|
983
|
-
wide?: "none" | "
|
|
984
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
985
|
-
marginInline?: ("none" | "
|
|
986
|
-
mobile?: "none" | "
|
|
987
|
-
tablet?: "none" | "
|
|
988
|
-
desktop?: "none" | "
|
|
989
|
-
wide?: "none" | "
|
|
990
|
-
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "
|
|
971
|
+
margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
972
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
973
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
974
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
975
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
976
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
|
|
977
|
+
marginBlock?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
978
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
979
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
980
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
981
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
982
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
|
|
983
|
+
marginInline?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
|
|
984
|
+
mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
985
|
+
tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
986
|
+
desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
987
|
+
wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
|
|
988
|
+
} | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
|
|
991
989
|
placeItems?: ("center" | "flex-start" | "flex-end" | {
|
|
992
990
|
mobile?: "center" | "flex-start" | "flex-end" | undefined;
|
|
993
991
|
tablet?: "center" | "flex-start" | "flex-end" | undefined;
|
|
@@ -3,7 +3,7 @@ const jsxRuntime = require("react/jsx-runtime");
|
|
|
3
3
|
const react = require("react");
|
|
4
4
|
const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
|
|
5
5
|
const styles_components_form_Input_input_css_cjs = require("./input.css.cjs");
|
|
6
|
-
const Input = react.forwardRef(function Input2({ className, name, type = "text", startSlot, endSlot,
|
|
6
|
+
const Input = react.forwardRef(function Input2({ className, name, type = "text", startSlot, endSlot, placeholder, ...restProps }, ref) {
|
|
7
7
|
const id = react.useId();
|
|
8
8
|
const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("input", { container: true }, false);
|
|
9
9
|
const inputClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("input", { input: true });
|
|
@@ -16,7 +16,7 @@ const Input = react.forwardRef(function Input2({ className, name, type = "text",
|
|
|
16
16
|
ref,
|
|
17
17
|
name,
|
|
18
18
|
type,
|
|
19
|
-
placeholder
|
|
19
|
+
placeholder,
|
|
20
20
|
className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Input_input_css_cjs.input, inputClassName),
|
|
21
21
|
...restProps
|
|
22
22
|
}
|
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef, useId } from "react";
|
|
3
3
|
import { useComponentStyles, Box, classnames } from "../../display/Divider/Divider.mjs";
|
|
4
4
|
import { input } from "./input.css.mjs";
|
|
5
|
-
const Input = forwardRef(function Input2({ className, name, type = "text", startSlot, endSlot,
|
|
5
|
+
const Input = forwardRef(function Input2({ className, name, type = "text", startSlot, endSlot, placeholder, ...restProps }, ref) {
|
|
6
6
|
const id = useId();
|
|
7
7
|
const containerClassName = useComponentStyles("input", { container: true }, false);
|
|
8
8
|
const inputClassName = useComponentStyles("input", { input: true });
|
|
@@ -15,7 +15,7 @@ const Input = forwardRef(function Input2({ className, name, type = "text", start
|
|
|
15
15
|
ref,
|
|
16
16
|
name,
|
|
17
17
|
type,
|
|
18
|
-
placeholder
|
|
18
|
+
placeholder,
|
|
19
19
|
className: classnames(input, inputClassName),
|
|
20
20
|
...restProps
|
|
21
21
|
}
|
|
@@ -81,6 +81,18 @@ function usePointerProgress({ container, orientation, onChange }) {
|
|
|
81
81
|
};
|
|
82
82
|
}, [container, onChange, orientation]);
|
|
83
83
|
}
|
|
84
|
+
const usableKeys = /* @__PURE__ */ new Set([
|
|
85
|
+
"ArrowLeft",
|
|
86
|
+
"ArrowRight",
|
|
87
|
+
"ArrowUp",
|
|
88
|
+
"ArrowDown",
|
|
89
|
+
"Home",
|
|
90
|
+
"End",
|
|
91
|
+
"PageUp",
|
|
92
|
+
"PageDown",
|
|
93
|
+
"Home",
|
|
94
|
+
"End"
|
|
95
|
+
]);
|
|
84
96
|
const Slider = ({
|
|
85
97
|
min = 0,
|
|
86
98
|
max = 100,
|
|
@@ -122,7 +134,7 @@ const Slider = ({
|
|
|
122
134
|
});
|
|
123
135
|
const onKeyDown = react.useCallback(
|
|
124
136
|
(event) => {
|
|
125
|
-
if (event.key
|
|
137
|
+
if (!usableKeys.has(event.key)) {
|
|
126
138
|
return;
|
|
127
139
|
}
|
|
128
140
|
event.preventDefault();
|
|
@@ -80,6 +80,18 @@ function usePointerProgress({ container: container2, orientation, onChange }) {
|
|
|
80
80
|
};
|
|
81
81
|
}, [container2, onChange, orientation]);
|
|
82
82
|
}
|
|
83
|
+
const usableKeys = /* @__PURE__ */ new Set([
|
|
84
|
+
"ArrowLeft",
|
|
85
|
+
"ArrowRight",
|
|
86
|
+
"ArrowUp",
|
|
87
|
+
"ArrowDown",
|
|
88
|
+
"Home",
|
|
89
|
+
"End",
|
|
90
|
+
"PageUp",
|
|
91
|
+
"PageDown",
|
|
92
|
+
"Home",
|
|
93
|
+
"End"
|
|
94
|
+
]);
|
|
83
95
|
const Slider = ({
|
|
84
96
|
min = 0,
|
|
85
97
|
max = 100,
|
|
@@ -121,7 +133,7 @@ const Slider = ({
|
|
|
121
133
|
});
|
|
122
134
|
const onKeyDown = useCallback(
|
|
123
135
|
(event) => {
|
|
124
|
-
if (event.key
|
|
136
|
+
if (!usableKeys.has(event.key)) {
|
|
125
137
|
return;
|
|
126
138
|
}
|
|
127
139
|
event.preventDefault();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blockle/blocks",
|
|
3
|
-
"version": "0.15.
|
|
3
|
+
"version": "0.15.2",
|
|
4
4
|
"description": "Blocks design system",
|
|
5
5
|
"repository": "git@github.com:Blockle/blocks.git",
|
|
6
6
|
"license": "MIT",
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
"./src/lib/theme/globalTheme.ts",
|
|
10
10
|
"dist/side-effects/**"
|
|
11
11
|
],
|
|
12
|
+
"type": "module",
|
|
12
13
|
"exports": {
|
|
13
14
|
".": {
|
|
14
15
|
"types": {
|
|
@@ -47,14 +48,14 @@
|
|
|
47
48
|
"scripts": {
|
|
48
49
|
"build": "crackle package && node ./temp-use-client-fix.js",
|
|
49
50
|
"build-storybook": "storybook build",
|
|
51
|
+
"changeset": "changeset",
|
|
50
52
|
"coverage": "vitest run --coverage",
|
|
51
53
|
"fix": "crackle fix",
|
|
52
54
|
"lint": "eslint .",
|
|
53
55
|
"release": "npm run ts && npm run test && npm run build && changeset publish",
|
|
54
56
|
"storybook": "storybook dev -p 6006 --no-open",
|
|
55
57
|
"test": "vitest --silent # ignore warnings till js-dom can parse new css features",
|
|
56
|
-
"ts": "tsc --noemit --project ./tsconfig.json"
|
|
57
|
-
"changeset": "changeset"
|
|
58
|
+
"ts": "tsc --noemit --project ./tsconfig.json"
|
|
58
59
|
},
|
|
59
60
|
"resolutions": {
|
|
60
61
|
"string-width": "^4.2.2"
|
|
@@ -64,19 +65,19 @@
|
|
|
64
65
|
},
|
|
65
66
|
"devDependencies": {
|
|
66
67
|
"@changesets/cli": "^2.27.5",
|
|
67
|
-
"@chromatic-com/storybook": "^
|
|
68
|
-
"@crackle/cli": "^0.15.
|
|
68
|
+
"@chromatic-com/storybook": "^2.0.2",
|
|
69
|
+
"@crackle/cli": "^0.15.5",
|
|
69
70
|
"@crackle/core": "^0.33.3",
|
|
70
|
-
"@storybook/addon-a11y": "^8.
|
|
71
|
+
"@storybook/addon-a11y": "^8.3.0",
|
|
71
72
|
"@storybook/addon-coverage": "^1.0.4",
|
|
72
|
-
"@storybook/addon-essentials": "^8.
|
|
73
|
-
"@storybook/addon-interactions": "^8.
|
|
74
|
-
"@storybook/addon-links": "^8.
|
|
75
|
-
"@storybook/blocks": "^8.
|
|
76
|
-
"@storybook/preview-api": "^8.
|
|
77
|
-
"@storybook/react": "^8.
|
|
78
|
-
"@storybook/react-vite": "^8.
|
|
79
|
-
"@storybook/test": "^8.
|
|
73
|
+
"@storybook/addon-essentials": "^8.3.0",
|
|
74
|
+
"@storybook/addon-interactions": "^8.3.0",
|
|
75
|
+
"@storybook/addon-links": "^8.3.0",
|
|
76
|
+
"@storybook/blocks": "^8.3.0",
|
|
77
|
+
"@storybook/preview-api": "^8.3.0",
|
|
78
|
+
"@storybook/react": "^8.3.0",
|
|
79
|
+
"@storybook/react-vite": "^8.3.0",
|
|
80
|
+
"@storybook/test": "^8.3.0",
|
|
80
81
|
"@testing-library/jest-dom": "^6.4.5",
|
|
81
82
|
"@testing-library/react": "^16.0.0",
|
|
82
83
|
"@types/eslint": "^8.56.12",
|
|
@@ -104,7 +105,7 @@
|
|
|
104
105
|
"prop-types": "^15.8.1",
|
|
105
106
|
"react": "^18.3.1",
|
|
106
107
|
"react-dom": "^18.3.1",
|
|
107
|
-
"storybook": "^8.
|
|
108
|
+
"storybook": "^8.3.0",
|
|
108
109
|
"typescript": "^5.4.5",
|
|
109
110
|
"vitest": "^2.0.5"
|
|
110
111
|
},
|