@blockle/blocks 0.8.5 → 0.8.7

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.
Files changed (22) hide show
  1. package/README.md +19 -18
  2. package/dist/index.cjs +60 -1
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.mjs +63 -4
  5. package/dist/momotaro.chunk.d.ts +118 -94
  6. package/dist/styles/components/Switch/switch.css.cjs +26 -0
  7. package/dist/styles/components/Switch/switch.css.mjs +27 -0
  8. package/dist/styles/lib/css/atoms/atomicProperties.cjs +1 -0
  9. package/dist/styles/lib/css/atoms/atomicProperties.mjs +1 -0
  10. package/dist/styles/lib/css/style/style.cjs +28 -0
  11. package/dist/styles/lib/css/style/style.mjs +29 -0
  12. package/dist/styles/themes/momotaro/components/button.css.cjs +65 -76
  13. package/dist/styles/themes/momotaro/components/button.css.mjs +62 -73
  14. package/dist/styles/themes/momotaro/components/helpers.css.cjs +5 -5
  15. package/dist/styles/themes/momotaro/components/helpers.css.mjs +6 -6
  16. package/dist/styles/themes/momotaro/components/index.cjs +3 -1
  17. package/dist/styles/themes/momotaro/components/index.mjs +3 -1
  18. package/dist/styles/themes/momotaro/components/progress.css.cjs +15 -5
  19. package/dist/styles/themes/momotaro/components/progress.css.mjs +15 -5
  20. package/dist/styles/themes/momotaro/components/switch.css.cjs +58 -0
  21. package/dist/styles/themes/momotaro/components/switch.css.mjs +59 -0
  22. package/package.json +14 -13
package/dist/momotaro.chunk.d.ts CHANGED
@@ -1,15 +1,17 @@
1
+ import { StyleRule } from '@vanilla-extract/css';
1
2
  import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
2
3
  import * as react from 'react';
3
4
  import react__default, { useEffect } from 'react';
4
5
 
5
6
  declare const atoms: ((props: {
6
- readonly backgroundColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
7
- readonly borderColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
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;
8
9
  readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
10
+ readonly borderWidth?: ("small" | "medium" | "large") | undefined;
9
11
  readonly border?: "none" | undefined;
10
12
  readonly bottom?: 0 | undefined;
11
13
  readonly boxShadow?: ("small" | "medium" | "large") | undefined;
12
- readonly color?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
14
+ readonly color?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
13
15
  readonly cursor?: "auto" | "pointer" | undefined;
14
16
  readonly fontFamily?: "body" | "primary" | "secondary" | undefined;
15
17
  readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
@@ -31,7 +33,7 @@ declare const atoms: ((props: {
31
33
  readonly top?: 0 | undefined;
32
34
  readonly transition?: ("slow" | "normal" | "fast") | undefined;
33
35
  readonly userSelect?: "none" | undefined;
34
- readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
36
+ readonly whiteSpace?: "nowrap" | "pre" | "pre-line" | "pre-wrap" | undefined;
35
37
  readonly width?: "auto" | "fit-content" | "full" | undefined;
36
38
  readonly wordBreak?: "break-word" | undefined;
37
39
  readonly wordWrap?: "break-word" | undefined;
@@ -42,195 +44,195 @@ declare const atoms: ((props: {
42
44
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
43
45
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
44
46
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
45
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
47
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
46
48
  readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
47
49
  mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
48
50
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
49
51
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
50
52
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
51
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
53
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
52
54
  readonly alignSelf?: ("stretch" | "center" | "flex-start" | "flex-end" | {
53
55
  mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
54
56
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
55
57
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
56
58
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
57
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
59
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
58
60
  readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
59
61
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
60
62
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
61
63
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
62
64
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
63
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
65
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
64
66
  readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
65
67
  mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
66
68
  tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
67
69
  desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
68
70
  wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
69
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
71
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
70
72
  readonly flex?: (1 | {
71
73
  mobile?: 1 | undefined;
72
74
  tablet?: 1 | undefined;
73
75
  desktop?: 1 | undefined;
74
76
  wide?: 1 | undefined;
75
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 1 | null>;
77
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 1 | null>;
76
78
  readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
77
79
  mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
78
80
  tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
79
81
  desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
80
82
  wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
81
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
83
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
82
84
  readonly flexGrow?: (0 | 1 | {
83
85
  mobile?: 0 | 1 | undefined;
84
86
  tablet?: 0 | 1 | undefined;
85
87
  desktop?: 0 | 1 | undefined;
86
88
  wide?: 0 | 1 | undefined;
87
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
89
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
88
90
  readonly flexShrink?: (0 | 1 | {
89
91
  mobile?: 0 | 1 | undefined;
90
92
  tablet?: 0 | 1 | undefined;
91
93
  desktop?: 0 | 1 | undefined;
92
94
  wide?: 0 | 1 | undefined;
93
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
94
- readonly flexWrap?: ("nowrap" | "wrap" | {
95
- mobile?: "nowrap" | "wrap" | undefined;
96
- tablet?: "nowrap" | "wrap" | undefined;
97
- desktop?: "nowrap" | "wrap" | undefined;
98
- wide?: "nowrap" | "wrap" | undefined;
99
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "nowrap" | "wrap" | null>;
95
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
96
+ readonly flexWrap?: ("wrap" | "nowrap" | {
97
+ mobile?: "wrap" | "nowrap" | undefined;
98
+ tablet?: "wrap" | "nowrap" | undefined;
99
+ desktop?: "wrap" | "nowrap" | undefined;
100
+ wide?: "wrap" | "nowrap" | undefined;
101
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "wrap" | "nowrap" | null>;
100
102
  readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
101
103
  mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
102
104
  tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
103
105
  desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
104
106
  wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
105
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
107
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
106
108
  readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
107
109
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
108
110
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
109
111
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
110
112
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
111
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
113
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
112
114
  readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
113
115
  mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
114
116
  tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
115
117
  desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
116
118
  wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
117
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
119
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
118
120
  readonly marginBottom?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
119
121
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
120
122
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
121
123
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
122
124
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
123
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
125
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
124
126
  readonly marginLeft?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
125
127
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
126
128
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
127
129
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
128
130
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
129
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
131
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
130
132
  readonly marginRight?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
131
133
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
132
134
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
133
135
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
134
136
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
135
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
137
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
136
138
  readonly marginTop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
137
139
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
138
140
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
139
141
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
140
142
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
141
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
143
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
142
144
  readonly outline?: ("none" | {
143
145
  mobile?: "none" | undefined;
144
146
  tablet?: "none" | undefined;
145
147
  desktop?: "none" | undefined;
146
148
  wide?: "none" | undefined;
147
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | null>;
149
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
148
150
  readonly paddingBottom?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
149
151
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
150
152
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
151
153
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
152
154
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
153
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
155
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
154
156
  readonly paddingLeft?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
155
157
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
156
158
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
157
159
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
158
160
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
159
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
161
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
160
162
  readonly paddingRight?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
161
163
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
162
164
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
163
165
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
164
166
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
165
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
167
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
166
168
  readonly paddingTop?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
167
169
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
168
170
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
169
171
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
170
172
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
171
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
173
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
172
174
  readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
173
175
  mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
174
176
  tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
175
177
  desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
176
178
  wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
177
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
179
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
178
180
  readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
179
181
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
180
182
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
181
183
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
182
184
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
183
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
185
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
184
186
  readonly textAlign?: ("left" | "right" | "center" | "justify" | {
185
187
  mobile?: "left" | "right" | "center" | "justify" | undefined;
186
188
  tablet?: "left" | "right" | "center" | "justify" | undefined;
187
189
  desktop?: "left" | "right" | "center" | "justify" | undefined;
188
190
  wide?: "left" | "right" | "center" | "justify" | undefined;
189
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "left" | "right" | "center" | "justify" | null>;
191
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
190
192
  margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
191
193
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
192
194
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
193
195
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
194
196
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
195
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
197
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
196
198
  marginX?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
197
199
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
198
200
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
199
201
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
200
202
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
201
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
203
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
202
204
  marginY?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
203
205
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
204
206
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
205
207
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
206
208
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
207
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
209
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
208
210
  padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
209
211
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
210
212
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
211
213
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
212
214
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
213
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
215
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
214
216
  paddingX?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
215
217
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
216
218
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
217
219
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
218
220
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
219
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
221
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
220
222
  paddingY?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
221
223
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
222
224
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
223
225
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
224
226
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
225
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
227
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
226
228
  placeItems?: ("center" | "flex-start" | "flex-end" | {
227
229
  mobile?: "center" | "flex-start" | "flex-end" | undefined;
228
230
  tablet?: "center" | "flex-start" | "flex-end" | undefined;
229
231
  desktop?: "center" | "flex-start" | "flex-end" | undefined;
230
232
  wide?: "center" | "flex-start" | "flex-end" | undefined;
231
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | null>;
233
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
232
234
  }) => string) & {
233
- properties: Set<"borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "bottom" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "height" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "rowGap" | "textAlign" | "textTransform" | "top" | "userSelect" | "whiteSpace" | "width" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "flex" | "gap" | "inset" | "margin" | "outline" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
235
+ properties: Set<"borderRadius" | "color" | "borderWidth" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "bottom" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "height" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "rowGap" | "textAlign" | "textTransform" | "top" | "userSelect" | "whiteSpace" | "width" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "flex" | "gap" | "inset" | "margin" | "outline" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
234
236
  };
235
237
 
236
238
  declare const breakpoints: {
@@ -242,10 +244,11 @@ declare const breakpoints: {
242
244
  type Breakpoint = keyof typeof breakpoints;
243
245
  declare const breakpointQuery: (key: Breakpoint) => string;
244
246
 
247
+ type AnyString = string & {};
245
248
  /**
246
249
  * Suggest a type for a string literal but also allow any string.
247
250
  */
248
- type OptionalLiteral<T extends string> = T | (string & {});
251
+ type OptionalLiteral<T extends string> = T | AnyString;
249
252
  type RecordLike = Record<string | number, unknown>;
250
253
 
251
254
  type Atoms = Parameters<typeof atoms>[0];
@@ -285,6 +288,15 @@ type TextAtoms = {
285
288
  wordWrap?: Atoms['wordWrap'];
286
289
  };
287
290
 
291
+ type StyleRuleWithAtoms = Omit<StyleRule, keyof Atoms> & {
292
+ [K in keyof Atoms]?: K extends keyof StyleRule ? Atoms[K] | AnyString | number : Atoms[K];
293
+ };
294
+ /**
295
+ * A wrapper around vanilla-extract's `style` function that allows you to use
296
+ * atoms and raw CSS values in the same object.
297
+ */
298
+ declare function style(props: StyleRuleWithAtoms | (StyleRuleWithAtoms | string)[]): string;
299
+
288
300
  type ButtonTheme = {
289
301
  base: string;
290
302
  variants: {
@@ -352,23 +364,28 @@ type LabelTheme = {
352
364
  };
353
365
  };
354
366
  type ProgressTheme = {
355
- container: string;
367
+ base: string;
356
368
  bar: string;
357
369
  variants: {
358
370
  indeterminate: boolean;
359
371
  };
360
372
  };
373
+ type SwitchTheme = {
374
+ base: string;
375
+ slider: string;
376
+ };
361
377
  type ComponentThemes = {
362
378
  button: ButtonTheme;
363
- link: LinkTheme;
364
- spinner: SpinnerTheme;
365
- divider: DividerTheme;
379
+ checkbox: CheckboxTheme;
366
380
  dialog: DialogTheme;
381
+ divider: DividerTheme;
367
382
  input: InputTheme;
368
- checkbox: CheckboxTheme;
369
- radio: RadioTheme;
370
383
  label: LabelTheme;
384
+ link: LinkTheme;
371
385
  progress: ProgressTheme;
386
+ radio: RadioTheme;
387
+ spinner: SpinnerTheme;
388
+ switch: SwitchTheme;
372
389
  };
373
390
  /**
374
391
  * ComponentThemeProps is a helper type to define the props passed to useComponentStyles.
@@ -491,7 +508,6 @@ declare const vars: {
491
508
  xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
492
509
  };
493
510
  color: {
494
- link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
495
511
  white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
496
512
  black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
497
513
  body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -505,6 +521,7 @@ declare const vars: {
505
521
  textLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
506
522
  textDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
507
523
  danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
524
+ link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
508
525
  };
509
526
  borderWidth: {
510
527
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -572,13 +589,14 @@ declare const Box: react.ForwardRefExoticComponent<{
572
589
  style?: react.CSSProperties | undefined;
573
590
  asChild?: boolean | undefined;
574
591
  } & {
575
- readonly backgroundColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
576
- readonly borderColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
592
+ readonly backgroundColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
593
+ readonly borderColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
577
594
  readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
595
+ readonly borderWidth?: ("small" | "medium" | "large") | undefined;
578
596
  readonly border?: "none" | undefined;
579
597
  readonly bottom?: 0 | undefined;
580
598
  readonly boxShadow?: ("small" | "medium" | "large") | undefined;
581
- readonly color?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
599
+ readonly color?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
582
600
  readonly cursor?: "auto" | "pointer" | undefined;
583
601
  readonly fontFamily?: "body" | "primary" | "secondary" | undefined;
584
602
  readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
@@ -600,7 +618,7 @@ declare const Box: react.ForwardRefExoticComponent<{
600
618
  readonly top?: 0 | undefined;
601
619
  readonly transition?: ("slow" | "normal" | "fast") | undefined;
602
620
  readonly userSelect?: "none" | undefined;
603
- readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
621
+ readonly whiteSpace?: "nowrap" | "pre" | "pre-line" | "pre-wrap" | undefined;
604
622
  readonly width?: "auto" | "fit-content" | "full" | undefined;
605
623
  readonly wordBreak?: "break-word" | undefined;
606
624
  readonly wordWrap?: "break-word" | undefined;
@@ -611,193 +629,193 @@ declare const Box: react.ForwardRefExoticComponent<{
611
629
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
612
630
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
613
631
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
614
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
632
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
615
633
  readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
616
634
  mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
617
635
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
618
636
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
619
637
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
620
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
638
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
621
639
  readonly alignSelf?: ("stretch" | "center" | "flex-start" | "flex-end" | {
622
640
  mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
623
641
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
624
642
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
625
643
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
626
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
644
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
627
645
  readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
628
646
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
629
647
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
630
648
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
631
649
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
632
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
650
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
633
651
  readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
634
652
  mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
635
653
  tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
636
654
  desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
637
655
  wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
638
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
656
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
639
657
  readonly flex?: (1 | {
640
658
  mobile?: 1 | undefined;
641
659
  tablet?: 1 | undefined;
642
660
  desktop?: 1 | undefined;
643
661
  wide?: 1 | undefined;
644
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 1 | null>;
662
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 1 | null>;
645
663
  readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
646
664
  mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
647
665
  tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
648
666
  desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
649
667
  wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
650
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
668
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
651
669
  readonly flexGrow?: (0 | 1 | {
652
670
  mobile?: 0 | 1 | undefined;
653
671
  tablet?: 0 | 1 | undefined;
654
672
  desktop?: 0 | 1 | undefined;
655
673
  wide?: 0 | 1 | undefined;
656
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
674
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
657
675
  readonly flexShrink?: (0 | 1 | {
658
676
  mobile?: 0 | 1 | undefined;
659
677
  tablet?: 0 | 1 | undefined;
660
678
  desktop?: 0 | 1 | undefined;
661
679
  wide?: 0 | 1 | undefined;
662
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
663
- readonly flexWrap?: ("nowrap" | "wrap" | {
664
- mobile?: "nowrap" | "wrap" | undefined;
665
- tablet?: "nowrap" | "wrap" | undefined;
666
- desktop?: "nowrap" | "wrap" | undefined;
667
- wide?: "nowrap" | "wrap" | undefined;
668
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "nowrap" | "wrap" | null>;
680
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
681
+ readonly flexWrap?: ("wrap" | "nowrap" | {
682
+ mobile?: "wrap" | "nowrap" | undefined;
683
+ tablet?: "wrap" | "nowrap" | undefined;
684
+ desktop?: "wrap" | "nowrap" | undefined;
685
+ wide?: "wrap" | "nowrap" | undefined;
686
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "wrap" | "nowrap" | null>;
669
687
  readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
670
688
  mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
671
689
  tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
672
690
  desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
673
691
  wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
674
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
692
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
675
693
  readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
676
694
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
677
695
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
678
696
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
679
697
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
680
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
698
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
681
699
  readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
682
700
  mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
683
701
  tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
684
702
  desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
685
703
  wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
686
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
704
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
687
705
  readonly marginBottom?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
688
706
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
689
707
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
690
708
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
691
709
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
692
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
710
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
693
711
  readonly marginLeft?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
694
712
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
695
713
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
696
714
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
697
715
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
698
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
716
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
699
717
  readonly marginRight?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
700
718
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
701
719
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
702
720
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
703
721
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
704
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
722
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
705
723
  readonly marginTop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
706
724
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
707
725
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
708
726
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
709
727
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
710
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
728
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
711
729
  readonly outline?: ("none" | {
712
730
  mobile?: "none" | undefined;
713
731
  tablet?: "none" | undefined;
714
732
  desktop?: "none" | undefined;
715
733
  wide?: "none" | undefined;
716
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | null>;
734
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
717
735
  readonly paddingBottom?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
718
736
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
719
737
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
720
738
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
721
739
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
722
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
740
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
723
741
  readonly paddingLeft?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
724
742
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
725
743
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
726
744
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
727
745
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
728
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
746
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
729
747
  readonly paddingRight?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
730
748
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
731
749
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
732
750
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
733
751
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
734
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
752
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
735
753
  readonly paddingTop?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
736
754
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
737
755
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
738
756
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
739
757
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
740
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
758
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
741
759
  readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
742
760
  mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
743
761
  tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
744
762
  desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
745
763
  wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
746
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
764
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
747
765
  readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
748
766
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
749
767
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
750
768
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
751
769
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
752
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
770
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
753
771
  readonly textAlign?: ("left" | "right" | "center" | "justify" | {
754
772
  mobile?: "left" | "right" | "center" | "justify" | undefined;
755
773
  tablet?: "left" | "right" | "center" | "justify" | undefined;
756
774
  desktop?: "left" | "right" | "center" | "justify" | undefined;
757
775
  wide?: "left" | "right" | "center" | "justify" | undefined;
758
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "left" | "right" | "center" | "justify" | null>;
776
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
759
777
  margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
760
778
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
761
779
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
762
780
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
763
781
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
764
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
782
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
765
783
  marginX?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
766
784
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
767
785
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
768
786
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
769
787
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
770
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
788
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
771
789
  marginY?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
772
790
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
773
791
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
774
792
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
775
793
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
776
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
794
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
777
795
  padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
778
796
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
779
797
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
780
798
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
781
799
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
782
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
800
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
783
801
  paddingX?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
784
802
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
785
803
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
786
804
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
787
805
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
788
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
806
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
789
807
  paddingY?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
790
808
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
791
809
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
792
810
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
793
811
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
794
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
812
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
795
813
  placeItems?: ("center" | "flex-start" | "flex-end" | {
796
814
  mobile?: "center" | "flex-start" | "flex-end" | undefined;
797
815
  tablet?: "center" | "flex-start" | "flex-end" | undefined;
798
816
  desktop?: "center" | "flex-start" | "flex-end" | undefined;
799
817
  wide?: "center" | "flex-start" | "flex-end" | undefined;
800
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | null>;
818
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
801
819
  } & HTMLElementProps<HTMLDivElement> & react.RefAttributes<unknown>>;
802
820
 
803
821
  type ButtonProps = {
@@ -816,7 +834,7 @@ type ButtonProps = {
816
834
  } & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
817
835
  declare const Button: react.ForwardRefExoticComponent<{
818
836
  children: React.ReactNode;
819
- type?: "button" | "submit" | "reset" | undefined;
837
+ type?: "button" | "reset" | "submit" | undefined;
820
838
  variant?: "outline" | "solid" | "ghost" | undefined;
821
839
  intent?: "danger" | "neutral" | undefined;
822
840
  size?: "small" | "medium" | "large" | undefined;
@@ -858,7 +876,6 @@ type DividerProps = {
858
876
  declare const Divider: React.FC<DividerProps>;
859
877
 
860
878
  type HeadingProps = {
861
- align?: Atoms['textAlign'];
862
879
  children: React.ReactNode;
863
880
  className?: string;
864
881
  level: 1 | 2 | 3 | 4 | 5 | 6;
@@ -987,6 +1004,13 @@ type StackProps = {
987
1004
  } & MarginAtoms & PaddingAtoms;
988
1005
  declare const Stack: React.FC<StackProps>;
989
1006
 
1007
+ type SwitchProps = {
1008
+ onChange?: (value: boolean) => void;
1009
+ } & Omit<HTMLElementProps<HTMLInputElement>, 'onChange'>;
1010
+ declare const Switch: react.ForwardRefExoticComponent<{
1011
+ onChange?: ((value: boolean) => void) | undefined;
1012
+ } & Omit<HTMLElementProps<HTMLInputElement>, "onChange"> & react.RefAttributes<HTMLInputElement>>;
1013
+
990
1014
  type TextProps = {
991
1015
  children: React.ReactNode;
992
1016
  tag?: 'span' | 'p' | 'strong' | 'em' | 'small' | 's' | 'del' | 'ins' | 'sub' | 'sup' | 'label';
@@ -1035,4 +1059,4 @@ declare const classnames: (...args: Args[]) => string | undefined;
1035
1059
 
1036
1060
  declare const momotaro: Theme;
1037
1061
 
1038
- export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, vars };
1062
+ export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, vars };