@blockle/blocks 0.18.3 → 0.19.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 (27) hide show
  1. package/dist/index.cjs +25 -9
  2. package/dist/index.mjs +25 -9
  3. package/dist/momotaro.chunk.d.ts +84 -346
  4. package/dist/styles/components/display/Divider/Divider.cjs +48 -35
  5. package/dist/styles/components/display/Divider/Divider.mjs +49 -36
  6. package/dist/styles/components/form/Button/Button.cjs +9 -9
  7. package/dist/styles/components/form/Button/Button.mjs +9 -9
  8. package/dist/styles/components/form/Checkbox/Checkbox.cjs +10 -2
  9. package/dist/styles/components/form/Checkbox/Checkbox.mjs +12 -4
  10. package/dist/styles/components/form/Input/Input.cjs +11 -2
  11. package/dist/styles/components/form/Input/Input.mjs +12 -3
  12. package/dist/styles/components/form/Radio/Radio.cjs +2 -3
  13. package/dist/styles/components/form/Radio/Radio.mjs +3 -4
  14. package/dist/styles/components/form/Select/Select.cjs +9 -3
  15. package/dist/styles/components/form/Select/Select.mjs +10 -4
  16. package/dist/styles/components/form/Slider/Slider.cjs +5 -1
  17. package/dist/styles/components/form/Slider/Slider.mjs +6 -2
  18. package/dist/styles/components/form/Switch/Switch.cjs +9 -2
  19. package/dist/styles/components/form/Switch/Switch.mjs +11 -4
  20. package/dist/styles/components/typography/Text/Text.cjs +14 -4
  21. package/dist/styles/components/typography/Text/Text.mjs +14 -4
  22. package/dist/styles/lib/css/atoms/sprinkles.css.mjs +1 -1
  23. package/dist/styles/themes/momotaro/components/button.css.mjs +1 -1
  24. package/dist/styles/themes/momotaro/components/helpers.css.mjs +1 -1
  25. package/dist/styles/themes/momotaro/components/progress.css.mjs +1 -1
  26. package/dist/styles/themes/momotaro/components/spinner.css.mjs +1 -1
  27. package/package.json +34 -34
package/dist/momotaro.chunk.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { StyleRule } from '@vanilla-extract/css';
2
- import * as react from 'react';
3
- import react__default, { useEffect } from 'react';
2
+ import React$1, { useEffect } from 'react';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
5
5
 
6
6
  declare const atoms: ((props: {
@@ -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<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
49
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "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<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
55
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "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<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
61
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
62
62
  readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
63
63
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
64
64
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
65
65
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
66
66
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
67
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
67
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
68
68
  readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
69
69
  mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
70
70
  tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
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<1 | 2 | 3 | 4, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
73
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "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<1 | 2 | 3 | 4, 1 | null>;
79
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 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<1 | 2 | 3 | 4, "row" | "row-reverse" | "column" | "column-reverse" | null>;
85
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "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<1 | 2 | 3 | 4, 0 | 1 | null>;
91
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 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<1 | 2 | 3 | 4, 0 | 1 | null>;
97
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
98
98
  readonly flexWrap?: ("wrap" | "nowrap" | {
99
99
  mobile?: "wrap" | "nowrap" | undefined;
100
100
  tablet?: "wrap" | "nowrap" | undefined;
101
101
  desktop?: "wrap" | "nowrap" | undefined;
102
102
  wide?: "wrap" | "nowrap" | undefined;
103
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "wrap" | "nowrap" | null>;
103
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "wrap" | "nowrap" | null>;
104
104
  readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
105
105
  mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
106
106
  tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
107
107
  desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
108
108
  wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
109
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
109
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
110
110
  readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
111
111
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
112
112
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
113
113
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
114
114
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
115
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
115
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
116
116
  readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
117
117
  mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
118
118
  tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
119
119
  desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
120
120
  wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
121
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
121
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
122
122
  readonly marginBlockStart?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
123
123
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
124
124
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
125
125
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
126
126
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
127
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
127
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
128
128
  readonly marginBlockEnd?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
129
129
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
130
130
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
131
131
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
132
132
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
133
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
133
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
134
134
  readonly marginInlineStart?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
135
135
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
136
136
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
137
137
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
138
138
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
139
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
139
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
140
140
  readonly marginInlineEnd?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
141
141
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
142
142
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
143
143
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
144
144
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
145
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
145
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
146
146
  readonly outline?: ("none" | {
147
147
  mobile?: "none" | undefined;
148
148
  tablet?: "none" | undefined;
149
149
  desktop?: "none" | undefined;
150
150
  wide?: "none" | undefined;
151
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | null>;
151
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
152
152
  readonly padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
153
153
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
154
154
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
155
155
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
156
156
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
157
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
157
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
158
158
  readonly paddingBlock?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
159
159
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
160
160
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
161
161
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
162
162
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
163
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
163
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
164
164
  readonly paddingBlockStart?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
165
165
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
166
166
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
167
167
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
168
168
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
169
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
169
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
170
170
  readonly paddingBlockEnd?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
171
171
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
172
172
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
173
173
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
174
174
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
175
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
175
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
176
176
  readonly paddingInline?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
177
177
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
178
178
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
179
179
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
180
180
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
181
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
181
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
182
182
  readonly paddingInlineStart?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
183
183
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
184
184
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
185
185
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
186
186
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
187
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
187
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
188
188
  readonly paddingInlineEnd?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
189
189
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
190
190
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
191
191
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
192
192
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
193
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
193
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
194
194
  readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
195
195
  mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
196
196
  tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
197
197
  desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
198
198
  wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
199
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
199
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
200
200
  readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
201
201
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
202
202
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
203
203
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
204
204
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
205
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
205
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
206
206
  readonly textAlign?: ("left" | "right" | "center" | "justify" | {
207
207
  mobile?: "left" | "right" | "center" | "justify" | undefined;
208
208
  tablet?: "left" | "right" | "center" | "justify" | undefined;
209
209
  desktop?: "left" | "right" | "center" | "justify" | undefined;
210
210
  wide?: "left" | "right" | "center" | "justify" | undefined;
211
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "left" | "right" | "center" | "justify" | null>;
211
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
212
212
  margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
213
213
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
214
214
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
215
215
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
216
216
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
217
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
217
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
218
218
  marginBlock?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
219
219
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
220
220
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
221
221
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
222
222
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
223
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
223
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
224
224
  marginInline?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
225
225
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
226
226
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
227
227
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
228
228
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
229
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
229
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
230
230
  placeItems?: ("center" | "flex-start" | "flex-end" | {
231
231
  mobile?: "center" | "flex-start" | "flex-end" | undefined;
232
232
  tablet?: "center" | "flex-start" | "flex-end" | undefined;
233
233
  desktop?: "center" | "flex-start" | "flex-end" | undefined;
234
234
  wide?: "center" | "flex-start" | "flex-end" | undefined;
235
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | null>;
235
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
236
236
  }) => string) & {
237
237
  properties: Set<"borderRadius" | "color" | "borderWidth" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "blockSize" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "justifyContent" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "maxBlockSize" | "maxInlineSize" | "opacity" | "overflowBlock" | "overflowInline" | "paddingBlockEnd" | "paddingBlockStart" | "paddingInlineEnd" | "paddingInlineStart" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "textTransform" | "textWrap" | "userSelect" | "whiteSpace" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "flex" | "gap" | "inset" | "insetBlock" | "insetInline" | "margin" | "marginBlock" | "marginInline" | "outline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "placeItems" | "textDecoration">;
238
238
  };
@@ -621,13 +621,14 @@ type ProgressProps = {
621
621
  className?: string;
622
622
  indeterminate?: boolean;
623
623
  max?: number;
624
- style?: React.CSSProperties;
624
+ style?: React$1.CSSProperties;
625
625
  /**
626
626
  * The value of the progress bar, between 0 and max=100.
627
627
  */
628
628
  value?: number;
629
+ ref?: React$1.Ref<HTMLDivElement>;
629
630
  };
630
- declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLProgressElement>>;
631
+ declare const Progress: React$1.FC<ProgressProps>;
631
632
 
632
633
  type SpinnerProps = {
633
634
  className?: string;
@@ -638,61 +639,40 @@ type SpinnerProps = {
638
639
  declare const Spinner: React.FC<SpinnerProps>;
639
640
 
640
641
  type ButtonProps = {
641
- children: React.ReactNode;
642
- type?: 'button' | 'submit' | 'reset';
643
- variant?: ButtonTheme['variants']['variant'];
644
- intent?: ButtonTheme['variants']['intent'];
645
- size?: ButtonTheme['variants']['size'];
646
- inlineSize?: Atoms['inlineSize'];
647
642
  alignSelf?: Atoms['alignSelf'];
648
- loading?: boolean;
649
- startSlot?: React.ReactNode;
650
- endSlot?: React.ReactNode;
651
- disabled?: boolean;
652
643
  asChild?: boolean;
653
- popovertarget?: string;
654
- } & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
655
- declare const Button: react.ForwardRefExoticComponent<{
656
- children: React.ReactNode;
657
- type?: "button" | "submit" | "reset";
658
- variant?: ButtonTheme["variants"]["variant"];
659
- intent?: ButtonTheme["variants"]["intent"];
660
- size?: ButtonTheme["variants"]["size"];
661
- inlineSize?: Atoms["inlineSize"];
662
- alignSelf?: Atoms["alignSelf"];
663
- loading?: boolean;
664
- startSlot?: React.ReactNode;
665
- endSlot?: React.ReactNode;
644
+ children: React$1.ReactNode;
666
645
  disabled?: boolean;
667
- asChild?: boolean;
646
+ endSlot?: React$1.ReactNode;
647
+ inlineSize?: Atoms['inlineSize'];
648
+ intent?: ButtonTheme['variants']['intent'];
649
+ loading?: boolean;
668
650
  popovertarget?: string;
669
- } & Omit<HTMLElementProps<HTMLButtonElement>, "size"> & MarginAtoms & react.RefAttributes<HTMLButtonElement>>;
651
+ ref?: React$1.Ref<HTMLButtonElement>;
652
+ size?: ButtonTheme['variants']['size'];
653
+ startSlot?: React$1.ReactNode;
654
+ type?: 'button' | 'submit' | 'reset';
655
+ variant?: ButtonTheme['variants']['variant'];
656
+ } & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
657
+ declare const Button: React$1.FC<ButtonProps>;
670
658
 
671
659
  type CheckboxProps = {
660
+ children?: React$1.ReactNode;
672
661
  name: string;
673
- children?: react__default.ReactNode;
662
+ ref?: React$1.Ref<HTMLInputElement>;
674
663
  required?: boolean;
675
664
  } & HTMLElementProps<HTMLInputElement>;
676
- declare const Checkbox: react__default.ForwardRefExoticComponent<{
677
- name: string;
678
- children?: react__default.ReactNode;
679
- required?: boolean;
680
- } & HTMLElementProps<HTMLInputElement> & react__default.RefAttributes<HTMLInputElement>>;
665
+ declare const Checkbox: React$1.FC<CheckboxProps>;
681
666
 
682
667
  type InputProps = {
683
668
  className?: string;
684
- name: string;
685
- type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
686
- startSlot?: React.ReactNode;
687
669
  endSlot?: React.ReactNode;
688
- } & Omit<HTMLElementProps<HTMLInputElement>, 'type'>;
689
- declare const Input: react.ForwardRefExoticComponent<{
690
- className?: string;
691
670
  name: string;
692
- type?: OptionalLiteral<"email" | "number" | "password" | "tel" | "text" | "url">;
671
+ ref?: React.Ref<HTMLInputElement>;
693
672
  startSlot?: React.ReactNode;
694
- endSlot?: React.ReactNode;
695
- } & Omit<HTMLElementProps<HTMLInputElement>, "type"> & react.RefAttributes<HTMLInputElement>>;
673
+ type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
674
+ } & Omit<HTMLElementProps<HTMLInputElement>, 'type'>;
675
+ declare const Input: React.FC<InputProps>;
696
676
 
697
677
  type LabelProps = {
698
678
  /**
@@ -711,26 +691,20 @@ type LabelProps = {
711
691
  declare const Label: React.FC<LabelProps>;
712
692
 
713
693
  type RadioProps = {
714
- name: string;
715
- value: string;
716
694
  children?: React.ReactNode;
717
- } & HTMLElementProps<HTMLInputElement>;
718
- declare const Radio: react.ForwardRefExoticComponent<{
719
695
  name: string;
696
+ ref?: React.Ref<HTMLInputElement>;
720
697
  value: string;
721
- children?: React.ReactNode;
722
- } & HTMLElementProps<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
698
+ } & HTMLElementProps<HTMLInputElement>;
699
+ declare const Radio: React.FC<RadioProps>;
723
700
 
724
701
  type SelectProps = {
725
- children: react__default.ReactNode;
702
+ children: React$1.ReactNode;
726
703
  placeholder?: string;
704
+ ref?: React$1.Ref<HTMLSelectElement>;
727
705
  variant?: SelectTheme['variants']['variant'];
728
706
  } & HTMLElementProps<HTMLSelectElement>;
729
- declare const Select: react__default.ForwardRefExoticComponent<{
730
- children: react__default.ReactNode;
731
- placeholder?: string;
732
- variant?: SelectTheme["variants"]["variant"];
733
- } & HTMLElementProps<HTMLSelectElement> & react__default.RefAttributes<HTMLSelectElement>>;
707
+ declare const Select: React$1.FC<SelectProps>;
734
708
 
735
709
  type SliderProps = {
736
710
  name?: string;
@@ -749,257 +723,22 @@ type SliderProps = {
749
723
  disabled?: boolean;
750
724
  precision?: number;
751
725
  };
752
- declare const Slider: react__default.FC<SliderProps>;
726
+ declare const Slider: React$1.FC<SliderProps>;
753
727
 
754
728
  type SwitchProps = {
755
729
  onChange?: (value: boolean) => void;
730
+ ref?: React.Ref<HTMLInputElement>;
756
731
  } & Omit<HTMLElementProps<HTMLInputElement>, 'onChange'>;
757
- declare const Switch: react.ForwardRefExoticComponent<{
758
- onChange?: (value: boolean) => void;
759
- } & Omit<HTMLElementProps<HTMLInputElement>, "onChange"> & react.RefAttributes<HTMLInputElement>>;
732
+ declare const Switch: React.FC<SwitchProps>;
760
733
 
761
734
  type BoxProps = {
762
- children?: React.ReactNode;
763
- className?: string;
764
- style?: React.CSSProperties;
765
735
  asChild?: boolean;
766
- } & Atoms & HTMLElementProps<HTMLDivElement>;
767
- declare const Box: react.ForwardRefExoticComponent<{
768
- children?: React.ReactNode;
736
+ children?: React$1.ReactNode;
769
737
  className?: string;
770
- style?: React.CSSProperties;
771
- asChild?: boolean;
772
- } & {
773
- readonly backgroundColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
774
- readonly borderColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
775
- readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
776
- readonly borderWidth?: ("small" | "medium" | "large") | undefined;
777
- readonly border?: "none" | undefined;
778
- readonly insetBlock?: 0 | undefined;
779
- readonly insetBlockStart?: 0 | undefined;
780
- readonly insetBlockEnd?: 0 | undefined;
781
- readonly insetInline?: 0 | undefined;
782
- readonly insetInlineStart?: 0 | undefined;
783
- readonly insetInlineEnd?: 0 | undefined;
784
- readonly boxShadow?: ("small" | "medium" | "large") | undefined;
785
- readonly color?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
786
- readonly cursor?: "auto" | "pointer" | undefined;
787
- readonly fontFamily?: "body" | "primary" | "secondary" | undefined;
788
- readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
789
- readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
790
- readonly lineHeight?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
791
- readonly blockSize?: "auto" | "fit-content" | "full" | undefined;
792
- readonly maxBlockSize?: "auto" | "fit-content" | "full" | undefined;
793
- readonly inlineSize?: "auto" | "fit-content" | "full" | undefined;
794
- readonly maxInlineSize?: "auto" | "fit-content" | "full" | undefined;
795
- readonly opacity?: 0 | 1 | undefined;
796
- readonly overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
797
- readonly overflowBlock?: "auto" | "hidden" | "scroll" | "visible" | undefined;
798
- readonly overflowInline?: "auto" | "hidden" | "scroll" | "visible" | undefined;
799
- readonly pointerEvents?: "none" | undefined;
800
- readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
801
- readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
802
- readonly textWrap?: "balance" | "wrap" | undefined;
803
- readonly transition?: ("slow" | "normal" | "fast") | undefined;
804
- readonly userSelect?: "none" | undefined;
805
- readonly whiteSpace?: "nowrap" | "pre" | "pre-line" | "pre-wrap" | undefined;
806
- readonly wordBreak?: "break-word" | undefined;
807
- readonly wordWrap?: "break-word" | undefined;
808
- inset?: 0 | undefined;
809
- } & {
810
- readonly alignContent?: ("stretch" | "center" | "flex-start" | "flex-end" | {
811
- mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
812
- tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
813
- desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
814
- wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
815
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
816
- readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
817
- mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
818
- tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
819
- desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
820
- wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
821
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
822
- readonly alignSelf?: ("stretch" | "center" | "flex-start" | "flex-end" | {
823
- mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
824
- tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
825
- desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
826
- wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
827
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
828
- readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
829
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
830
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
831
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
832
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
833
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
834
- readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
835
- mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
836
- tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
837
- desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
838
- wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
839
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
840
- readonly flex?: (1 | {
841
- mobile?: 1 | undefined;
842
- tablet?: 1 | undefined;
843
- desktop?: 1 | undefined;
844
- wide?: 1 | undefined;
845
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 1 | null>;
846
- readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
847
- mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
848
- tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
849
- desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
850
- wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
851
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "row" | "row-reverse" | "column" | "column-reverse" | null>;
852
- readonly flexGrow?: (0 | 1 | {
853
- mobile?: 0 | 1 | undefined;
854
- tablet?: 0 | 1 | undefined;
855
- desktop?: 0 | 1 | undefined;
856
- wide?: 0 | 1 | undefined;
857
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
858
- readonly flexShrink?: (0 | 1 | {
859
- mobile?: 0 | 1 | undefined;
860
- tablet?: 0 | 1 | undefined;
861
- desktop?: 0 | 1 | undefined;
862
- wide?: 0 | 1 | undefined;
863
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
864
- readonly flexWrap?: ("wrap" | "nowrap" | {
865
- mobile?: "wrap" | "nowrap" | undefined;
866
- tablet?: "wrap" | "nowrap" | undefined;
867
- desktop?: "wrap" | "nowrap" | undefined;
868
- wide?: "wrap" | "nowrap" | undefined;
869
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "wrap" | "nowrap" | null>;
870
- readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
871
- mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
872
- tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
873
- desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
874
- wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
875
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
876
- readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
877
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
878
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
879
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
880
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
881
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
882
- readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
883
- mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
884
- tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
885
- desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
886
- wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
887
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
888
- readonly marginBlockStart?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
889
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
890
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
891
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
892
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
893
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
894
- readonly marginBlockEnd?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
895
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
896
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
897
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
898
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
899
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
900
- readonly marginInlineStart?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
901
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
902
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
903
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
904
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
905
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
906
- readonly marginInlineEnd?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
907
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
908
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
909
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
910
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
911
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
912
- readonly outline?: ("none" | {
913
- mobile?: "none" | undefined;
914
- tablet?: "none" | undefined;
915
- desktop?: "none" | undefined;
916
- wide?: "none" | undefined;
917
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | null>;
918
- readonly padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
919
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
920
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
921
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
922
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
923
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
924
- readonly paddingBlock?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
925
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
926
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
927
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
928
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
929
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
930
- readonly paddingBlockStart?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
931
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
932
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
933
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
934
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
935
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
936
- readonly paddingBlockEnd?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
937
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
938
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
939
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
940
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
941
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
942
- readonly paddingInline?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
943
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
944
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
945
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
946
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
947
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
948
- readonly paddingInlineStart?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
949
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
950
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
951
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
952
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
953
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
954
- readonly paddingInlineEnd?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
955
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
956
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
957
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
958
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
959
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
960
- readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
961
- mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
962
- tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
963
- desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
964
- wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
965
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
966
- readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
967
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
968
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
969
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
970
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
971
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
972
- readonly textAlign?: ("left" | "right" | "center" | "justify" | {
973
- mobile?: "left" | "right" | "center" | "justify" | undefined;
974
- tablet?: "left" | "right" | "center" | "justify" | undefined;
975
- desktop?: "left" | "right" | "center" | "justify" | undefined;
976
- wide?: "left" | "right" | "center" | "justify" | undefined;
977
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "left" | "right" | "center" | "justify" | null>;
978
- margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
979
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
980
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
981
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
982
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
983
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
984
- marginBlock?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
985
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
986
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
987
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
988
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
989
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
990
- marginInline?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
991
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
992
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
993
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
994
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
995
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
996
- placeItems?: ("center" | "flex-start" | "flex-end" | {
997
- mobile?: "center" | "flex-start" | "flex-end" | undefined;
998
- tablet?: "center" | "flex-start" | "flex-end" | undefined;
999
- desktop?: "center" | "flex-start" | "flex-end" | undefined;
1000
- wide?: "center" | "flex-start" | "flex-end" | undefined;
1001
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | null>;
1002
- } & HTMLElementProps<HTMLDivElement> & react.RefAttributes<unknown>>;
738
+ ref?: React$1.Ref<HTMLDivElement>;
739
+ style?: React$1.CSSProperties;
740
+ } & Atoms & HTMLElementProps<HTMLDivElement>;
741
+ declare const Box: React$1.FC<BoxProps>;
1003
742
 
1004
743
  declare const justifyContentMap: {
1005
744
  readonly left: "flex-start";
@@ -1048,15 +787,11 @@ declare const Stack: React.FC<StackProps>;
1048
787
  type LinkProps = {
1049
788
  asChild?: boolean;
1050
789
  children?: React.ReactNode;
790
+ ref?: React.Ref<HTMLAnchorElement>;
1051
791
  underline?: LinkTheme['variants']['underline'];
1052
792
  variant?: LinkTheme['variants']['variant'];
1053
793
  } & MarginAtoms & HTMLElementProps<HTMLAnchorElement>;
1054
- declare const Link: react.ForwardRefExoticComponent<{
1055
- asChild?: boolean;
1056
- children?: React.ReactNode;
1057
- underline?: LinkTheme["variants"]["underline"];
1058
- variant?: LinkTheme["variants"]["variant"];
1059
- } & MarginAtoms & HTMLElementProps<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
794
+ declare const Link: React.FC<LinkProps>;
1060
795
 
1061
796
  type BlocksProviderProps = {
1062
797
  children: React.ReactNode;
@@ -1084,7 +819,7 @@ declare const Dialog: React.FC<DialogProps>;
1084
819
 
1085
820
  type PopoverProps = {
1086
821
  align?: 'top' | 'bottom' | 'left' | 'right';
1087
- anchorElement: React.RefObject<HTMLElement>;
822
+ anchorElement: React.RefObject<HTMLElement | null>;
1088
823
  children: React.ReactNode;
1089
824
  className?: string;
1090
825
  onRequestClose: () => void;
@@ -1109,16 +844,19 @@ type HeadingProps = {
1109
844
  } & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLHeadingElement>;
1110
845
  declare const Heading: React.FC<HeadingProps>;
1111
846
 
1112
- type TextProps = {
1113
- children: React.ReactNode;
1114
- tag?: 'span' | 'p' | 'strong' | 'em' | 'small' | 's' | 'del' | 'ins' | 'sub' | 'sup' | 'label';
847
+ type Tags = 'del' | 'em' | 'ins' | 'label' | 'p' | 's' | 'small' | 'span' | 'strong' | 'sub' | 'sup';
848
+ type TextProps<Tag extends Tags = 'span'> = {
1115
849
  asChild?: boolean;
850
+ children: React$1.ReactNode;
851
+ ref?: React$1.Ref<HTMLElementTagNameMap[Tag]>;
852
+ tag?: Tag;
1116
853
  } & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLSpanElement>;
1117
- declare const Text: React.FC<TextProps>;
854
+ declare const Text: <T extends Tags = "span">({ asChild, children, className, ref, tag, ...restProps }: TextProps<T>) => react_jsx_runtime.JSX.Element;
1118
855
 
1119
856
  type TemplateProps = {
1120
857
  asChild?: boolean;
1121
- children?: React.ReactNode;
858
+ children?: React$1.ReactNode;
859
+ ref?: React$1.Ref<Element>;
1122
860
  };
1123
861
  /**
1124
862
  * Create a Template component that can render as a child of another component with asChild prop.
@@ -1140,11 +878,11 @@ type TemplateProps = {
1140
878
  * <MyComponent className="test" asChild><a href="#">Link</a></MyComponent> // Renders as <a href="#" class="test">Link</a>
1141
879
  */
1142
880
  declare function createAsChildTemplate<T extends keyof HTMLElementTagNameMap>(defaultElement: T): {
1143
- Template: react.ForwardRefExoticComponent<TemplateProps & HTMLElementProps<HTMLElementTagNameMap[T]> & react.RefAttributes<HTMLElementTagNameMap[T]>>;
1144
- Slot: react.FC<SlotProps>;
881
+ Template: React$1.FC<TemplateProps & HTMLElementProps<HTMLElementTagNameMap[T]>>;
882
+ Slot: React$1.FC<SlotProps>;
1145
883
  };
1146
884
  type SlotProps = {
1147
- children: React.ReactNode;
885
+ children: React$1.ReactNode;
1148
886
  };
1149
887
 
1150
888
  declare function useComponentStyles<T extends keyof ComponentThemesProps>(name: T, props: ComponentThemesProps[T], useDefaultVariants?: boolean): string;