@blockle/blocks 0.12.2 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/index.cjs +60 -13
  2. package/dist/index.d.mts +1 -1
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.mjs +60 -13
  5. package/dist/momotaro.chunk.d.ts +95 -77
  6. package/dist/styles/components/display/Divider/Divider.cjs +42 -58
  7. package/dist/styles/components/display/Divider/Divider.mjs +42 -58
  8. package/dist/styles/components/form/Button/Button.cjs +4 -4
  9. package/dist/styles/components/form/Button/Button.mjs +3 -3
  10. package/dist/styles/components/overlay/Dialog/Dialog.cjs +25 -80
  11. package/dist/styles/components/overlay/Dialog/Dialog.mjs +29 -84
  12. package/dist/styles/themes/momotaro/components/dialog.css.cjs +17 -4
  13. package/dist/styles/themes/momotaro/components/dialog.css.mjs +17 -4
  14. package/dist/styles/themes/momotaro/components/link.css.cjs +6 -0
  15. package/dist/styles/themes/momotaro/components/link.css.mjs +6 -0
  16. package/dist/styles/themes/momotaro/components/popover.css.cjs +1 -0
  17. package/dist/styles/themes/momotaro/components/popover.css.mjs +1 -0
  18. package/package.json +5 -2
package/dist/momotaro.chunk.d.ts CHANGED
@@ -46,193 +46,193 @@ declare const atoms: ((props: {
46
46
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
47
47
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
48
48
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
49
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
49
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
50
50
  readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
51
51
  mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
52
52
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
53
53
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
54
54
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
55
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
55
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
56
56
  readonly alignSelf?: ("stretch" | "center" | "flex-start" | "flex-end" | {
57
57
  mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
58
58
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
59
59
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
60
60
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
61
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
61
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
62
62
  readonly columnGap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
63
63
  mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
64
64
  tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
65
65
  desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
66
66
  wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
67
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
67
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
68
68
  readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
69
69
  mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
70
70
  tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
71
71
  desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
72
72
  wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
73
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
73
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
74
74
  readonly flex?: (1 | {
75
75
  mobile?: 1 | undefined;
76
76
  tablet?: 1 | undefined;
77
77
  desktop?: 1 | undefined;
78
78
  wide?: 1 | undefined;
79
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 1 | null>;
79
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 1 | null>;
80
80
  readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
81
81
  mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
82
82
  tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
83
83
  desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
84
84
  wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
85
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
85
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "row" | "row-reverse" | "column" | "column-reverse" | null>;
86
86
  readonly flexGrow?: (0 | 1 | {
87
87
  mobile?: 0 | 1 | undefined;
88
88
  tablet?: 0 | 1 | undefined;
89
89
  desktop?: 0 | 1 | undefined;
90
90
  wide?: 0 | 1 | undefined;
91
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
91
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
92
92
  readonly flexShrink?: (0 | 1 | {
93
93
  mobile?: 0 | 1 | undefined;
94
94
  tablet?: 0 | 1 | undefined;
95
95
  desktop?: 0 | 1 | undefined;
96
96
  wide?: 0 | 1 | undefined;
97
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
97
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
98
98
  readonly flexWrap?: ("nowrap" | "wrap" | {
99
99
  mobile?: "nowrap" | "wrap" | undefined;
100
100
  tablet?: "nowrap" | "wrap" | undefined;
101
101
  desktop?: "nowrap" | "wrap" | undefined;
102
102
  wide?: "nowrap" | "wrap" | undefined;
103
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "nowrap" | "wrap" | null>;
103
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "nowrap" | "wrap" | null>;
104
104
  readonly fontSize?: (("large" | "medium" | "small" | "xsmall" | "xlarge") | {
105
105
  mobile?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
106
106
  tablet?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
107
107
  desktop?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
108
108
  wide?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
109
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("large" | "medium" | "small" | "xsmall" | "xlarge") | null>;
109
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("large" | "medium" | "small" | "xsmall" | "xlarge") | null>;
110
110
  readonly gap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
111
111
  mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
112
112
  tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
113
113
  desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
114
114
  wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
115
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
115
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
116
116
  readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
117
117
  mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
118
118
  tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
119
119
  desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
120
120
  wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
121
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
121
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
122
122
  readonly marginBlockStart?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
123
123
  mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
124
124
  tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
125
125
  desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
126
126
  wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
127
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
127
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
128
128
  readonly marginBlockEnd?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
129
129
  mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
130
130
  tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
131
131
  desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
132
132
  wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
133
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
133
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
134
134
  readonly marginInlineStart?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
135
135
  mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
136
136
  tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
137
137
  desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
138
138
  wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
139
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
139
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
140
140
  readonly marginInlineEnd?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
141
141
  mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
142
142
  tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
143
143
  desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
144
144
  wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
145
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
145
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
146
146
  readonly outline?: ("none" | {
147
147
  mobile?: "none" | undefined;
148
148
  tablet?: "none" | undefined;
149
149
  desktop?: "none" | undefined;
150
150
  wide?: "none" | undefined;
151
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
151
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | null>;
152
152
  readonly padding?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
153
153
  mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
154
154
  tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
155
155
  desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
156
156
  wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
157
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
157
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
158
158
  readonly paddingBlock?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
159
159
  mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
160
160
  tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
161
161
  desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
162
162
  wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
163
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
163
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
164
164
  readonly paddingBlockStart?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
165
165
  mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
166
166
  tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
167
167
  desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
168
168
  wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
169
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
169
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
170
170
  readonly paddingBlockEnd?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
171
171
  mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
172
172
  tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
173
173
  desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
174
174
  wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
175
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
175
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
176
176
  readonly paddingInline?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
177
177
  mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
178
178
  tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
179
179
  desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
180
180
  wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
181
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
181
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
182
182
  readonly paddingInlineStart?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
183
183
  mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
184
184
  tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
185
185
  desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
186
186
  wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
187
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
187
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
188
188
  readonly paddingInlineEnd?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
189
189
  mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
190
190
  tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
191
191
  desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
192
192
  wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
193
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
193
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
194
194
  readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
195
195
  mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
196
196
  tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
197
197
  desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
198
198
  wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
199
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
199
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
200
200
  readonly rowGap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
201
201
  mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
202
202
  tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
203
203
  desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
204
204
  wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
205
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
205
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
206
206
  readonly textAlign?: ("left" | "right" | "center" | "justify" | {
207
207
  mobile?: "left" | "right" | "center" | "justify" | undefined;
208
208
  tablet?: "left" | "right" | "center" | "justify" | undefined;
209
209
  desktop?: "left" | "right" | "center" | "justify" | undefined;
210
210
  wide?: "left" | "right" | "center" | "justify" | undefined;
211
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
211
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "left" | "right" | "center" | "justify" | null>;
212
212
  margin?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
213
213
  mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
214
214
  tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
215
215
  desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
216
216
  wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
217
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
217
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
218
218
  marginBlock?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
219
219
  mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
220
220
  tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
221
221
  desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
222
222
  wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
223
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
223
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
224
224
  marginInline?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
225
225
  mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
226
226
  tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
227
227
  desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
228
228
  wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
229
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
229
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
230
230
  placeItems?: ("center" | "flex-start" | "flex-end" | {
231
231
  mobile?: "center" | "flex-start" | "flex-end" | undefined;
232
232
  tablet?: "center" | "flex-start" | "flex-end" | undefined;
233
233
  desktop?: "center" | "flex-start" | "flex-end" | undefined;
234
234
  wide?: "center" | "flex-start" | "flex-end" | undefined;
235
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
235
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | null>;
236
236
  }) => string) & {
237
237
  properties: Set<"alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "blockSize" | "boxShadow" | "color" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "justifyContent" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "maxBlockSize" | "maxInlineSize" | "opacity" | "overflowBlock" | "overflowInline" | "paddingBlockEnd" | "paddingBlockStart" | "paddingInlineEnd" | "paddingInlineStart" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "textTransform" | "textWrap" | "userSelect" | "whiteSpace" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "borderRadius" | "borderWidth" | "flex" | "gap" | "inset" | "insetBlock" | "insetInline" | "margin" | "marginBlock" | "marginInline" | "outline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "placeItems" | "textDecoration" | "transition">;
238
238
  };
@@ -627,7 +627,7 @@ type SpinnerProps = {
627
627
  } & MarginAtoms;
628
628
  declare const Spinner: React.FC<SpinnerProps>;
629
629
 
630
- type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Atoms | 'as' | 'ref'>;
630
+ type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Atoms | 'ref'>;
631
631
 
632
632
  type ButtonProps = {
633
633
  children: React.ReactNode;
@@ -642,6 +642,7 @@ type ButtonProps = {
642
642
  endSlot?: React.ReactNode;
643
643
  disabled?: boolean;
644
644
  asChild?: boolean;
645
+ popovertarget?: string;
645
646
  } & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
646
647
  declare const Button: react.ForwardRefExoticComponent<{
647
648
  children: React.ReactNode;
@@ -656,6 +657,7 @@ declare const Button: react.ForwardRefExoticComponent<{
656
657
  endSlot?: React.ReactNode;
657
658
  disabled?: boolean | undefined;
658
659
  asChild?: boolean | undefined;
660
+ popovertarget?: string | undefined;
659
661
  } & Omit<HTMLElementProps<HTMLButtonElement>, "size"> & MarginAtoms & react.RefAttributes<HTMLButtonElement>>;
660
662
 
661
663
  type CheckboxProps = {
@@ -802,193 +804,193 @@ declare const Box: react.ForwardRefExoticComponent<{
802
804
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
803
805
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
804
806
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
805
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
807
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
806
808
  readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
807
809
  mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
808
810
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
809
811
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
810
812
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
811
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
813
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
812
814
  readonly alignSelf?: ("stretch" | "center" | "flex-start" | "flex-end" | {
813
815
  mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
814
816
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
815
817
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
816
818
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
817
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
819
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
818
820
  readonly columnGap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
819
821
  mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
820
822
  tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
821
823
  desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
822
824
  wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
823
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
825
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
824
826
  readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
825
827
  mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
826
828
  tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
827
829
  desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
828
830
  wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
829
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
831
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
830
832
  readonly flex?: (1 | {
831
833
  mobile?: 1 | undefined;
832
834
  tablet?: 1 | undefined;
833
835
  desktop?: 1 | undefined;
834
836
  wide?: 1 | undefined;
835
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 1 | null>;
837
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 1 | null>;
836
838
  readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
837
839
  mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
838
840
  tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
839
841
  desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
840
842
  wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
841
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
843
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "row" | "row-reverse" | "column" | "column-reverse" | null>;
842
844
  readonly flexGrow?: (0 | 1 | {
843
845
  mobile?: 0 | 1 | undefined;
844
846
  tablet?: 0 | 1 | undefined;
845
847
  desktop?: 0 | 1 | undefined;
846
848
  wide?: 0 | 1 | undefined;
847
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
849
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
848
850
  readonly flexShrink?: (0 | 1 | {
849
851
  mobile?: 0 | 1 | undefined;
850
852
  tablet?: 0 | 1 | undefined;
851
853
  desktop?: 0 | 1 | undefined;
852
854
  wide?: 0 | 1 | undefined;
853
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
855
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
854
856
  readonly flexWrap?: ("nowrap" | "wrap" | {
855
857
  mobile?: "nowrap" | "wrap" | undefined;
856
858
  tablet?: "nowrap" | "wrap" | undefined;
857
859
  desktop?: "nowrap" | "wrap" | undefined;
858
860
  wide?: "nowrap" | "wrap" | undefined;
859
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "nowrap" | "wrap" | null>;
861
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "nowrap" | "wrap" | null>;
860
862
  readonly fontSize?: (("large" | "medium" | "small" | "xsmall" | "xlarge") | {
861
863
  mobile?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
862
864
  tablet?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
863
865
  desktop?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
864
866
  wide?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
865
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("large" | "medium" | "small" | "xsmall" | "xlarge") | null>;
867
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("large" | "medium" | "small" | "xsmall" | "xlarge") | null>;
866
868
  readonly gap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
867
869
  mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
868
870
  tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
869
871
  desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
870
872
  wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
871
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
873
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
872
874
  readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
873
875
  mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
874
876
  tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
875
877
  desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
876
878
  wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
877
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
879
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
878
880
  readonly marginBlockStart?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
879
881
  mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
880
882
  tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
881
883
  desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
882
884
  wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
883
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
885
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
884
886
  readonly marginBlockEnd?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
885
887
  mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
886
888
  tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
887
889
  desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
888
890
  wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
889
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
891
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
890
892
  readonly marginInlineStart?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
891
893
  mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
892
894
  tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
893
895
  desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
894
896
  wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
895
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
897
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
896
898
  readonly marginInlineEnd?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
897
899
  mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
898
900
  tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
899
901
  desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
900
902
  wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
901
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
903
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
902
904
  readonly outline?: ("none" | {
903
905
  mobile?: "none" | undefined;
904
906
  tablet?: "none" | undefined;
905
907
  desktop?: "none" | undefined;
906
908
  wide?: "none" | undefined;
907
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
909
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | null>;
908
910
  readonly padding?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
909
911
  mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
910
912
  tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
911
913
  desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
912
914
  wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
913
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
915
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
914
916
  readonly paddingBlock?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
915
917
  mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
916
918
  tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
917
919
  desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
918
920
  wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
919
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
921
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
920
922
  readonly paddingBlockStart?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
921
923
  mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
922
924
  tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
923
925
  desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
924
926
  wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
925
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
927
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
926
928
  readonly paddingBlockEnd?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
927
929
  mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
928
930
  tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
929
931
  desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
930
932
  wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
931
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
933
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
932
934
  readonly paddingInline?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
933
935
  mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
934
936
  tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
935
937
  desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
936
938
  wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
937
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
939
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
938
940
  readonly paddingInlineStart?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
939
941
  mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
940
942
  tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
941
943
  desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
942
944
  wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
943
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
945
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
944
946
  readonly paddingInlineEnd?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
945
947
  mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
946
948
  tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
947
949
  desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
948
950
  wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
949
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
951
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
950
952
  readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
951
953
  mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
952
954
  tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
953
955
  desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
954
956
  wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
955
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
957
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
956
958
  readonly rowGap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
957
959
  mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
958
960
  tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
959
961
  desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
960
962
  wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
961
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
963
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
962
964
  readonly textAlign?: ("left" | "right" | "center" | "justify" | {
963
965
  mobile?: "left" | "right" | "center" | "justify" | undefined;
964
966
  tablet?: "left" | "right" | "center" | "justify" | undefined;
965
967
  desktop?: "left" | "right" | "center" | "justify" | undefined;
966
968
  wide?: "left" | "right" | "center" | "justify" | undefined;
967
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
969
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "left" | "right" | "center" | "justify" | null>;
968
970
  margin?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
969
971
  mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
970
972
  tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
971
973
  desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
972
974
  wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
973
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
975
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
974
976
  marginBlock?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
975
977
  mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
976
978
  tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
977
979
  desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
978
980
  wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
979
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
981
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
980
982
  marginInline?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
981
983
  mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
982
984
  tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
983
985
  desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
984
986
  wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
985
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
987
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
986
988
  placeItems?: ("center" | "flex-start" | "flex-end" | {
987
989
  mobile?: "center" | "flex-start" | "flex-end" | undefined;
988
990
  tablet?: "center" | "flex-start" | "flex-end" | undefined;
989
991
  desktop?: "center" | "flex-start" | "flex-end" | undefined;
990
992
  wide?: "center" | "flex-start" | "flex-end" | undefined;
991
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
993
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | null>;
992
994
  } & HTMLElementProps<HTMLDivElement> & react.RefAttributes<unknown>>;
993
995
 
994
996
  declare const justifyContentMap: {
@@ -1106,20 +1108,36 @@ type TextProps = {
1106
1108
  } & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLSpanElement>;
1107
1109
  declare const Text: React.FC<TextProps>;
1108
1110
 
1109
- type HTMLElementTags = 'a' | 'article' | 'button' | 'div' | 'p' | 'section' | 'span' | 'strong';
1111
+ type TemplateProps = {
1112
+ asChild?: boolean;
1113
+ children?: React.ReactNode;
1114
+ };
1110
1115
  /**
1111
- * Notes:
1112
- * - <Slot> can only have one child
1113
- * - <Slot> can only be used once
1114
- * - <Slot> can only be used as a direct descendant of <Slottable>
1116
+ * Create a Template component that can render as a child of another component with asChild prop.
1117
+ *
1118
+ * Example
1119
+ * // Create a Template and Slot components with div as default element
1120
+ * const { Template, Slot } = createAsChildContainer('div');
1121
+ *
1122
+ * const MyComponent = ({ children, asChild, ...restProps }) => {
1123
+ * return (
1124
+ * <Template asChild={asChild} {...restProps}>
1125
+ * <Slot>{childen}</Slot> // Slot is required, will be replaced with children
1126
+ * </Template>
1127
+ * );
1128
+ * }
1129
+ *
1130
+ * <MyComponent className="test">Not a link</MyComponent> // Renders as <div class="test">Not a link</div>
1131
+ * <MyComponent className="test"><a href="#">Link</a></MyComponent> // Renders as <div class="test"><a href="#">Link</a></div>
1132
+ * <MyComponent className="test" asChild><a href="#">Link</a></MyComponent> // Renders as <a href="#" class="test">Link</a>
1115
1133
  */
1116
- declare function createSlottable<E extends HTMLElementTags>(defaultElement: E): (props: {
1117
- asChild?: boolean | undefined;
1118
- } & react__default.HTMLProps<unknown>, ref: react__default.ForwardedRef<any>) => react__default.ReactElement<any, string | react__default.JSXElementConstructor<any>> | null;
1134
+ declare function createAsChildTemplate<T extends keyof HTMLElementTagNameMap>(defaultElement: T): {
1135
+ Template: react.ForwardRefExoticComponent<TemplateProps & HTMLElementProps<HTMLElementTagNameMap[T]> & react.RefAttributes<HTMLElementTagNameMap[T]>>;
1136
+ Slot: react.FC<SlotProps>;
1137
+ };
1119
1138
  type SlotProps = {
1120
- children: react__default.ReactNode;
1139
+ children: React.ReactNode;
1121
1140
  };
1122
- declare const Slot: react__default.FC<SlotProps>;
1123
1141
 
1124
1142
  declare function useComponentStyles<T extends keyof ComponentThemesProps>(name: T, props: ComponentThemesProps[T], useDefaultVariants?: boolean): string;
1125
1143
 
@@ -1150,9 +1168,9 @@ declare const usePreventBodyScroll: (enabled?: boolean) => void;
1150
1168
  */
1151
1169
  declare const useRootAriaHidden: (hidden: boolean) => void;
1152
1170
 
1153
- type Args = null | undefined | boolean | string;
1171
+ type Args = null | undefined | boolean | string | unknown;
1154
1172
  declare const classnames: (...args: Args[]) => string | undefined;
1155
1173
 
1156
1174
  declare const momotaro: Theme;
1157
1175
 
1158
- export { BlocksProvider, type BlocksProviderProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Dialog, type DialogProps, Divider, type DividerProps, Heading, type HeadingProps, Inline, type InlineProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Portal, type PortalProps, Progress, type ProgressProps, Radio, type RadioProps, Select, type SelectProps, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Text, type TextProps, type ThemeComponentsStyles, type ThemeTokens, Tooltip, type TooltipProps, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars };
1176
+ export { BlocksProvider, type BlocksProviderProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Dialog, type DialogProps, Divider, type DividerProps, Heading, type HeadingProps, Inline, type InlineProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Portal, type PortalProps, Progress, type ProgressProps, Radio, type RadioProps, Select, type SelectProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Text, type TextProps, type ThemeComponentsStyles, type ThemeTokens, Tooltip, type TooltipProps, atoms, breakpointQuery, classnames, createAsChildTemplate, makeComponentTheme, makeTheme, momotaro, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars };