@blockle/blocks 0.8.10 → 0.9.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 (42) hide show
  1. package/dist/index.cjs +4 -2
  2. package/dist/index.d.mts +1 -1
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.mjs +4 -2
  5. package/dist/momotaro.chunk.d.ts +328 -302
  6. package/dist/styles/components/display/Divider/divider.css.cjs +1 -1
  7. package/dist/styles/components/display/Divider/divider.css.mjs +1 -1
  8. package/dist/styles/components/form/Checkbox/Checkbox.cjs +17 -1
  9. package/dist/styles/components/form/Checkbox/Checkbox.mjs +17 -1
  10. package/dist/styles/components/form/Select/Select.cjs +40 -0
  11. package/dist/styles/components/form/Select/Select.mjs +41 -0
  12. package/dist/styles/components/form/Select/select.css.cjs +37 -0
  13. package/dist/styles/components/form/Select/select.css.mjs +38 -0
  14. package/dist/styles/components/form/Switch/switch.css.cjs +2 -2
  15. package/dist/styles/components/form/Switch/switch.css.mjs +2 -2
  16. package/dist/styles/components/overlay/Dialog/dialog.css.cjs +4 -4
  17. package/dist/styles/components/overlay/Dialog/dialog.css.mjs +4 -4
  18. package/dist/styles/lib/css/atoms/atomicProperties.cjs +28 -22
  19. package/dist/styles/lib/css/atoms/atomicProperties.mjs +28 -22
  20. package/dist/styles/lib/css/atoms/sprinkles.css.cjs +4 -7
  21. package/dist/styles/lib/css/atoms/sprinkles.css.mjs +4 -7
  22. package/dist/styles/themes/momotaro/components/button.css.cjs +3 -3
  23. package/dist/styles/themes/momotaro/components/button.css.mjs +3 -3
  24. package/dist/styles/themes/momotaro/components/checkbox.css.cjs +18 -12
  25. package/dist/styles/themes/momotaro/components/checkbox.css.mjs +18 -12
  26. package/dist/styles/themes/momotaro/components/dialog.css.cjs +7 -7
  27. package/dist/styles/themes/momotaro/components/dialog.css.mjs +7 -7
  28. package/dist/styles/themes/momotaro/components/helpers.css.cjs +7 -6
  29. package/dist/styles/themes/momotaro/components/helpers.css.mjs +7 -6
  30. package/dist/styles/themes/momotaro/components/index.cjs +3 -1
  31. package/dist/styles/themes/momotaro/components/index.mjs +3 -1
  32. package/dist/styles/themes/momotaro/components/input.css.cjs +6 -4
  33. package/dist/styles/themes/momotaro/components/input.css.mjs +6 -4
  34. package/dist/styles/themes/momotaro/components/progress.css.cjs +1 -1
  35. package/dist/styles/themes/momotaro/components/progress.css.mjs +1 -1
  36. package/dist/styles/themes/momotaro/components/radio.css.cjs +12 -5
  37. package/dist/styles/themes/momotaro/components/radio.css.mjs +12 -5
  38. package/dist/styles/themes/momotaro/components/select.css.cjs +35 -0
  39. package/dist/styles/themes/momotaro/components/select.css.mjs +36 -0
  40. package/dist/styles/themes/momotaro/components/switch.css.cjs +1 -1
  41. package/dist/styles/themes/momotaro/components/switch.css.mjs +1 -1
  42. package/package.json +1 -1
package/dist/momotaro.chunk.d.ts CHANGED
@@ -4,37 +4,39 @@ import react__default, { useEffect } from 'react';
4
4
  import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
5
5
 
6
6
  declare const atoms: ((props: {
7
- readonly backgroundColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
8
- readonly borderColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
9
- readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
10
- readonly borderWidth?: ("small" | "medium" | "large") | undefined;
7
+ readonly backgroundColor?: "black" | "white" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
8
+ readonly borderColor?: "black" | "white" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
9
+ readonly borderRadius?: ("large" | "medium" | "small" | "xlarge") | undefined;
10
+ readonly borderWidth?: ("large" | "medium" | "small") | undefined;
11
11
  readonly border?: "none" | undefined;
12
- readonly bottom?: 0 | undefined;
13
- readonly boxShadow?: ("small" | "medium" | "large") | undefined;
14
- readonly color?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
12
+ readonly insetBlock?: 0 | undefined;
13
+ readonly insetBlockStart?: 0 | undefined;
14
+ readonly insetBlockEnd?: 0 | undefined;
15
+ readonly insetInline?: 0 | undefined;
16
+ readonly insetInlineStart?: 0 | undefined;
17
+ readonly insetInlineEnd?: 0 | undefined;
18
+ readonly boxShadow?: ("large" | "medium" | "small") | undefined;
19
+ readonly color?: "black" | "white" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
15
20
  readonly cursor?: "auto" | "pointer" | undefined;
16
21
  readonly fontFamily?: "body" | "primary" | "secondary" | undefined;
17
22
  readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
18
23
  readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
19
- readonly height?: "auto" | "full" | undefined;
20
- readonly left?: 0 | undefined;
21
- readonly lineHeight?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
22
- readonly maxHeight?: "full" | undefined;
23
- readonly maxWidth?: "full" | undefined;
24
+ readonly lineHeight?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
25
+ readonly blockSize?: "auto" | "fit-content" | "full" | undefined;
26
+ readonly maxBlockSize?: "auto" | "fit-content" | "full" | undefined;
27
+ readonly inlineSize?: "auto" | "fit-content" | "full" | undefined;
28
+ readonly maxInlineSize?: "auto" | "fit-content" | "full" | undefined;
24
29
  readonly opacity?: 0 | 1 | undefined;
25
30
  readonly overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
26
- readonly overflowX?: "auto" | "hidden" | "scroll" | "visible" | undefined;
27
- readonly overflowY?: "auto" | "hidden" | "scroll" | "visible" | undefined;
31
+ readonly overflowBlock?: "auto" | "hidden" | "scroll" | "visible" | undefined;
32
+ readonly overflowInline?: "auto" | "hidden" | "scroll" | "visible" | undefined;
28
33
  readonly pointerEvents?: "none" | undefined;
29
- readonly right?: 0 | undefined;
30
34
  readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
31
35
  readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
32
36
  readonly textWrap?: "balance" | "wrap" | undefined;
33
- readonly top?: 0 | undefined;
34
- readonly transition?: ("slow" | "normal" | "fast") | undefined;
37
+ readonly transition?: ("normal" | "slow" | "fast") | undefined;
35
38
  readonly userSelect?: "none" | undefined;
36
- readonly whiteSpace?: "nowrap" | "pre" | "pre-line" | "pre-wrap" | undefined;
37
- readonly width?: "auto" | "fit-content" | "full" | undefined;
39
+ readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
38
40
  readonly wordBreak?: "break-word" | undefined;
39
41
  readonly wordWrap?: "break-word" | undefined;
40
42
  inset?: 0 | undefined;
@@ -57,12 +59,12 @@ declare const atoms: ((props: {
57
59
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
58
60
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
59
61
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
60
- readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
61
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
62
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
63
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
64
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
65
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
62
+ readonly columnGap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
63
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
64
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
65
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
66
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
67
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
66
68
  readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
67
69
  mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
68
70
  tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
@@ -93,138 +95,138 @@ declare const atoms: ((props: {
93
95
  desktop?: 0 | 1 | undefined;
94
96
  wide?: 0 | 1 | undefined;
95
97
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
96
- readonly flexWrap?: ("wrap" | "nowrap" | {
97
- mobile?: "wrap" | "nowrap" | undefined;
98
- tablet?: "wrap" | "nowrap" | undefined;
99
- desktop?: "wrap" | "nowrap" | undefined;
100
- wide?: "wrap" | "nowrap" | undefined;
101
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "wrap" | "nowrap" | null>;
102
- readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
103
- mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
104
- tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
105
- desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
106
- wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
107
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
108
- readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
109
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
110
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
111
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
112
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
113
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
98
+ readonly flexWrap?: ("nowrap" | "wrap" | {
99
+ mobile?: "nowrap" | "wrap" | undefined;
100
+ tablet?: "nowrap" | "wrap" | undefined;
101
+ desktop?: "nowrap" | "wrap" | undefined;
102
+ wide?: "nowrap" | "wrap" | undefined;
103
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "nowrap" | "wrap" | null>;
104
+ readonly fontSize?: (("large" | "medium" | "small" | "xsmall" | "xlarge") | {
105
+ mobile?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
106
+ tablet?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
107
+ desktop?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
108
+ wide?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
109
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("large" | "medium" | "small" | "xsmall" | "xlarge") | null>;
110
+ readonly gap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
111
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
112
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
113
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
114
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
115
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
114
116
  readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
115
117
  mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
116
118
  tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
117
119
  desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
118
120
  wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
119
121
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
120
- readonly marginBottom?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
121
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
122
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
123
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
124
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
125
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
126
- readonly marginLeft?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
127
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
128
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
129
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
130
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
131
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
132
- readonly marginRight?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
133
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
134
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
135
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
136
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
137
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
138
- readonly marginTop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
139
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
140
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
141
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
142
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
143
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
122
+ readonly marginBlockStart?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
123
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
124
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
125
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
126
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
127
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
128
+ readonly marginBlockEnd?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
129
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
130
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
131
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
132
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
133
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
134
+ readonly marginInlineStart?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
135
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
136
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
137
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
138
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
139
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
140
+ readonly marginInlineEnd?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
141
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
142
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
143
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
144
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
145
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
144
146
  readonly outline?: ("none" | {
145
147
  mobile?: "none" | undefined;
146
148
  tablet?: "none" | undefined;
147
149
  desktop?: "none" | undefined;
148
150
  wide?: "none" | undefined;
149
151
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
150
- readonly paddingBottom?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
151
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
152
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
153
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
154
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
155
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
156
- readonly paddingLeft?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
157
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
158
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
159
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
160
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
161
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
162
- readonly paddingRight?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
163
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
164
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
165
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
166
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
167
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
168
- readonly paddingTop?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
169
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
170
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
171
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
172
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
173
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
152
+ readonly padding?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
153
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
154
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
155
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
156
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
157
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
158
+ readonly paddingBlock?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
159
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
160
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
161
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
162
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
163
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
164
+ readonly paddingBlockStart?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
165
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
166
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
167
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
168
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
169
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
170
+ readonly paddingBlockEnd?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
171
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
172
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
173
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
174
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
175
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
176
+ readonly paddingInline?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
177
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
178
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
179
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
180
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
181
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
182
+ readonly paddingInlineStart?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
183
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
184
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
185
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
186
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
187
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
188
+ readonly paddingInlineEnd?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
189
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
190
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
191
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
192
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
193
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
174
194
  readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
175
195
  mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
176
196
  tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
177
197
  desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
178
198
  wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
179
199
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
180
- readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
181
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
182
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
183
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
184
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
185
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
200
+ readonly rowGap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
201
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
202
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
203
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
204
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
205
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
186
206
  readonly textAlign?: ("left" | "right" | "center" | "justify" | {
187
207
  mobile?: "left" | "right" | "center" | "justify" | undefined;
188
208
  tablet?: "left" | "right" | "center" | "justify" | undefined;
189
209
  desktop?: "left" | "right" | "center" | "justify" | undefined;
190
210
  wide?: "left" | "right" | "center" | "justify" | undefined;
191
211
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
192
- margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
193
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
194
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
195
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
196
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
197
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
198
- marginX?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
199
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
200
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
201
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
202
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
203
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
204
- marginY?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
205
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
206
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
207
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
208
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
209
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
210
- padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
211
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
212
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
213
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
214
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
215
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
216
- paddingX?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
217
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
218
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
219
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
220
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
221
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
222
- paddingY?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
223
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
224
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
225
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
226
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
227
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
212
+ margin?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
213
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
214
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
215
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
216
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
217
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
218
+ marginBlock?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
219
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
220
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
221
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
222
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
223
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
224
+ marginInline?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
225
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
226
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
227
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
228
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
229
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
228
230
  placeItems?: ("center" | "flex-start" | "flex-end" | {
229
231
  mobile?: "center" | "flex-start" | "flex-end" | undefined;
230
232
  tablet?: "center" | "flex-start" | "flex-end" | undefined;
@@ -232,7 +234,7 @@ declare const atoms: ((props: {
232
234
  wide?: "center" | "flex-start" | "flex-end" | undefined;
233
235
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
234
236
  }) => string) & {
235
- properties: Set<"borderRadius" | "color" | "borderWidth" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "bottom" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "height" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "rowGap" | "textAlign" | "textTransform" | "top" | "userSelect" | "whiteSpace" | "width" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "flex" | "gap" | "inset" | "margin" | "outline" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
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" | "userSelect" | "whiteSpace" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "borderRadius" | "borderWidth" | "flex" | "gap" | "inset" | "insetBlock" | "insetInline" | "margin" | "marginBlock" | "marginInline" | "outline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "placeItems" | "textDecoration" | "transition" | "textWrap">;
236
238
  };
237
239
 
238
240
  declare const breakpoints: {
@@ -256,21 +258,21 @@ type ResponsiveValue<T> = T | [T] | [T, T] | [T, T, T] | [T, T, T, T];
256
258
  type ResponsiveDisplayFlex = ResponsiveValue<'none' | 'flex' | 'inline-flex'>;
257
259
  type MarginAtoms = {
258
260
  margin?: Atoms['margin'];
259
- marginLeft?: Atoms['marginLeft'];
260
- marginRight?: Atoms['marginRight'];
261
- marginTop?: Atoms['marginTop'];
262
- marginBottom?: Atoms['marginBottom'];
263
- marginX?: Atoms['marginX'];
264
- marginY?: Atoms['marginY'];
261
+ marginBlock?: Atoms['marginBlock'];
262
+ marginBlockStart?: Atoms['marginBlockStart'];
263
+ marginBlockEnd?: Atoms['marginBlockEnd'];
264
+ marginInline?: Atoms['marginInline'];
265
+ marginInlineStart?: Atoms['marginInlineStart'];
266
+ marginInlineEnd?: Atoms['marginInlineEnd'];
265
267
  };
266
268
  type PaddingAtoms = {
267
269
  padding?: Atoms['padding'];
268
- paddingLeft?: Atoms['paddingLeft'];
269
- paddingRight?: Atoms['paddingRight'];
270
- paddingTop?: Atoms['paddingTop'];
271
- paddingBottom?: Atoms['paddingBottom'];
272
- paddingX?: Atoms['paddingX'];
273
- paddingY?: Atoms['paddingY'];
270
+ paddingBlock?: Atoms['paddingBlock'];
271
+ paddingBlockStart?: Atoms['paddingBlockStart'];
272
+ paddingBlockEnd?: Atoms['paddingBlockEnd'];
273
+ paddingInline?: Atoms['paddingInline'];
274
+ paddingInlineStart?: Atoms['paddingInlineStart'];
275
+ paddingInlineEnd?: Atoms['paddingInlineEnd'];
274
276
  };
275
277
  type TextAtoms = {
276
278
  color?: Atoms['color'];
@@ -380,19 +382,28 @@ type DropdownTheme = {
380
382
  variant: 'solid' | 'outline';
381
383
  };
382
384
  };
385
+ type SelectTheme = {
386
+ wrapper?: string;
387
+ select: string;
388
+ icon: string;
389
+ variants: {
390
+ variant: 'solid' | 'outline';
391
+ };
392
+ };
383
393
  type ComponentThemes = {
384
394
  button: ButtonTheme;
385
395
  checkbox: CheckboxTheme;
386
396
  dialog: DialogTheme;
387
397
  divider: DividerTheme;
398
+ dropdown: DropdownTheme;
388
399
  input: InputTheme;
389
400
  label: LabelTheme;
390
401
  link: LinkTheme;
391
402
  progress: ProgressTheme;
392
403
  radio: RadioTheme;
404
+ select: SelectTheme;
393
405
  spinner: SpinnerTheme;
394
406
  switch: SwitchTheme;
395
- dropdown: DropdownTheme;
396
407
  };
397
408
  /**
398
409
  * ComponentThemeProps is a helper type to define the props passed to useComponentStyles.
@@ -501,22 +512,22 @@ declare function makeTheme(theme: ThemeInput): Theme;
501
512
  declare const vars: {
502
513
  space: {
503
514
  none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
515
+ large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
516
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
517
+ small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
504
518
  gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
505
519
  xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
506
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
507
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
508
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
509
520
  xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
510
521
  };
511
522
  borderRadius: {
512
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
513
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
514
523
  large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
524
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
525
+ small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
515
526
  xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
516
527
  };
517
528
  color: {
518
- white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
519
529
  black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
530
+ white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
520
531
  body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
521
532
  primaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
522
533
  primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -531,9 +542,9 @@ declare const vars: {
531
542
  link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
532
543
  };
533
544
  borderWidth: {
534
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
535
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
536
545
  large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
546
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
547
+ small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
537
548
  };
538
549
  fontFamily: {
539
550
  body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -541,10 +552,10 @@ declare const vars: {
541
552
  secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
542
553
  };
543
554
  fontSize: {
544
- xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
545
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
546
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
547
555
  large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
556
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
557
+ small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
558
+ xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
548
559
  xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
549
560
  };
550
561
  fontWeight: {
@@ -553,21 +564,21 @@ declare const vars: {
553
564
  strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
554
565
  };
555
566
  lineHeight: {
556
- xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
557
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
558
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
559
567
  large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
568
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
569
+ small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
570
+ xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
560
571
  xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
561
572
  };
562
573
  transition: {
563
- slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
564
574
  normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
575
+ slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
565
576
  fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
566
577
  };
567
578
  shadow: {
568
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
569
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
570
579
  large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
580
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
581
+ small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
571
582
  };
572
583
  focus: {
573
584
  boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -610,7 +621,7 @@ type ButtonProps = {
610
621
  variant?: ButtonTheme['variants']['variant'];
611
622
  intent?: ButtonTheme['variants']['intent'];
612
623
  size?: ButtonTheme['variants']['size'];
613
- width?: Atoms['width'];
624
+ inlineSize?: Atoms['inlineSize'];
614
625
  alignSelf?: Atoms['alignSelf'];
615
626
  loading?: boolean;
616
627
  startSlot?: React.ReactNode;
@@ -623,8 +634,8 @@ declare const Button: react.ForwardRefExoticComponent<{
623
634
  type?: "button" | "reset" | "submit" | undefined;
624
635
  variant?: "outline" | "solid" | "ghost" | undefined;
625
636
  intent?: "danger" | "neutral" | undefined;
626
- size?: "small" | "medium" | "large" | undefined;
627
- width?: Atoms['width'];
637
+ size?: "large" | "medium" | "small" | undefined;
638
+ inlineSize?: Atoms['inlineSize'];
628
639
  alignSelf?: Atoms['alignSelf'];
629
640
  loading?: boolean | undefined;
630
641
  startSlot?: React.ReactNode;
@@ -688,6 +699,19 @@ declare const Radio: react.ForwardRefExoticComponent<{
688
699
  children?: React.ReactNode;
689
700
  } & HTMLElementProps<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
690
701
 
702
+ type SelectProps = {
703
+ children: react__default.ReactNode;
704
+ placeholder?: string;
705
+ variant?: SelectTheme['variants'];
706
+ } & HTMLElementProps<HTMLSelectElement>;
707
+ declare const Select: react__default.ForwardRefExoticComponent<{
708
+ children: react__default.ReactNode;
709
+ placeholder?: string | undefined;
710
+ variant?: {
711
+ variant: "outline" | "solid";
712
+ } | undefined;
713
+ } & HTMLElementProps<HTMLSelectElement> & react__default.RefAttributes<HTMLSelectElement>>;
714
+
691
715
  type SwitchProps = {
692
716
  onChange?: (value: boolean) => void;
693
717
  } & Omit<HTMLElementProps<HTMLInputElement>, 'onChange'>;
@@ -707,37 +731,39 @@ declare const Box: react.ForwardRefExoticComponent<{
707
731
  style?: react.CSSProperties | undefined;
708
732
  asChild?: boolean | undefined;
709
733
  } & {
710
- readonly backgroundColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
711
- readonly borderColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
712
- readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
713
- readonly borderWidth?: ("small" | "medium" | "large") | undefined;
734
+ readonly backgroundColor?: "black" | "white" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
735
+ readonly borderColor?: "black" | "white" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
736
+ readonly borderRadius?: ("large" | "medium" | "small" | "xlarge") | undefined;
737
+ readonly borderWidth?: ("large" | "medium" | "small") | undefined;
714
738
  readonly border?: "none" | undefined;
715
- readonly bottom?: 0 | undefined;
716
- readonly boxShadow?: ("small" | "medium" | "large") | undefined;
717
- readonly color?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
739
+ readonly insetBlock?: 0 | undefined;
740
+ readonly insetBlockStart?: 0 | undefined;
741
+ readonly insetBlockEnd?: 0 | undefined;
742
+ readonly insetInline?: 0 | undefined;
743
+ readonly insetInlineStart?: 0 | undefined;
744
+ readonly insetInlineEnd?: 0 | undefined;
745
+ readonly boxShadow?: ("large" | "medium" | "small") | undefined;
746
+ readonly color?: "black" | "white" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
718
747
  readonly cursor?: "auto" | "pointer" | undefined;
719
748
  readonly fontFamily?: "body" | "primary" | "secondary" | undefined;
720
749
  readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
721
750
  readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
722
- readonly height?: "auto" | "full" | undefined;
723
- readonly left?: 0 | undefined;
724
- readonly lineHeight?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
725
- readonly maxHeight?: "full" | undefined;
726
- readonly maxWidth?: "full" | undefined;
751
+ readonly lineHeight?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
752
+ readonly blockSize?: "auto" | "fit-content" | "full" | undefined;
753
+ readonly maxBlockSize?: "auto" | "fit-content" | "full" | undefined;
754
+ readonly inlineSize?: "auto" | "fit-content" | "full" | undefined;
755
+ readonly maxInlineSize?: "auto" | "fit-content" | "full" | undefined;
727
756
  readonly opacity?: 0 | 1 | undefined;
728
757
  readonly overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
729
- readonly overflowX?: "auto" | "hidden" | "scroll" | "visible" | undefined;
730
- readonly overflowY?: "auto" | "hidden" | "scroll" | "visible" | undefined;
758
+ readonly overflowBlock?: "auto" | "hidden" | "scroll" | "visible" | undefined;
759
+ readonly overflowInline?: "auto" | "hidden" | "scroll" | "visible" | undefined;
731
760
  readonly pointerEvents?: "none" | undefined;
732
- readonly right?: 0 | undefined;
733
761
  readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
734
762
  readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
735
763
  readonly textWrap?: "balance" | "wrap" | undefined;
736
- readonly top?: 0 | undefined;
737
- readonly transition?: ("slow" | "normal" | "fast") | undefined;
764
+ readonly transition?: ("normal" | "slow" | "fast") | undefined;
738
765
  readonly userSelect?: "none" | undefined;
739
- readonly whiteSpace?: "nowrap" | "pre" | "pre-line" | "pre-wrap" | undefined;
740
- readonly width?: "auto" | "fit-content" | "full" | undefined;
766
+ readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
741
767
  readonly wordBreak?: "break-word" | undefined;
742
768
  readonly wordWrap?: "break-word" | undefined;
743
769
  inset?: 0 | undefined;
@@ -760,12 +786,12 @@ declare const Box: react.ForwardRefExoticComponent<{
760
786
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
761
787
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
762
788
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
763
- readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
764
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
765
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
766
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
767
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
768
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
789
+ readonly columnGap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
790
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
791
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
792
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
793
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
794
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
769
795
  readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
770
796
  mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
771
797
  tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
@@ -796,138 +822,138 @@ declare const Box: react.ForwardRefExoticComponent<{
796
822
  desktop?: 0 | 1 | undefined;
797
823
  wide?: 0 | 1 | undefined;
798
824
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
799
- readonly flexWrap?: ("wrap" | "nowrap" | {
800
- mobile?: "wrap" | "nowrap" | undefined;
801
- tablet?: "wrap" | "nowrap" | undefined;
802
- desktop?: "wrap" | "nowrap" | undefined;
803
- wide?: "wrap" | "nowrap" | undefined;
804
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "wrap" | "nowrap" | null>;
805
- readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
806
- mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
807
- tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
808
- desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
809
- wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
810
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
811
- readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
812
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
813
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
814
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
815
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
816
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
825
+ readonly flexWrap?: ("nowrap" | "wrap" | {
826
+ mobile?: "nowrap" | "wrap" | undefined;
827
+ tablet?: "nowrap" | "wrap" | undefined;
828
+ desktop?: "nowrap" | "wrap" | undefined;
829
+ wide?: "nowrap" | "wrap" | undefined;
830
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "nowrap" | "wrap" | null>;
831
+ readonly fontSize?: (("large" | "medium" | "small" | "xsmall" | "xlarge") | {
832
+ mobile?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
833
+ tablet?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
834
+ desktop?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
835
+ wide?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
836
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("large" | "medium" | "small" | "xsmall" | "xlarge") | null>;
837
+ readonly gap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
838
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
839
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
840
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
841
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
842
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
817
843
  readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
818
844
  mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
819
845
  tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
820
846
  desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
821
847
  wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
822
848
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
823
- readonly marginBottom?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
824
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
825
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
826
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
827
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
828
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
829
- readonly marginLeft?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
830
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
831
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
832
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
833
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
834
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
835
- readonly marginRight?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
836
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
837
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
838
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
839
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
840
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
841
- readonly marginTop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
842
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
843
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
844
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
845
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
846
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
849
+ readonly marginBlockStart?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
850
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
851
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
852
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
853
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
854
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
855
+ readonly marginBlockEnd?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
856
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
857
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
858
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
859
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
860
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
861
+ readonly marginInlineStart?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
862
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
863
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
864
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
865
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
866
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
867
+ readonly marginInlineEnd?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
868
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
869
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
870
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
871
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
872
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
847
873
  readonly outline?: ("none" | {
848
874
  mobile?: "none" | undefined;
849
875
  tablet?: "none" | undefined;
850
876
  desktop?: "none" | undefined;
851
877
  wide?: "none" | undefined;
852
878
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
853
- readonly paddingBottom?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
854
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
855
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
856
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
857
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
858
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
859
- readonly paddingLeft?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
860
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
861
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
862
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
863
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
864
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
865
- readonly paddingRight?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
866
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
867
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
868
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
869
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
870
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
871
- readonly paddingTop?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
872
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
873
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
874
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
875
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
876
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
879
+ readonly padding?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
880
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
881
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
882
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
883
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
884
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
885
+ readonly paddingBlock?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
886
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
887
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
888
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
889
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
890
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
891
+ readonly paddingBlockStart?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
892
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
893
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
894
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
895
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
896
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
897
+ readonly paddingBlockEnd?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
898
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
899
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
900
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
901
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
902
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
903
+ readonly paddingInline?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
904
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
905
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
906
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
907
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
908
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
909
+ readonly paddingInlineStart?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
910
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
911
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
912
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
913
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
914
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
915
+ readonly paddingInlineEnd?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
916
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
917
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
918
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
919
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
920
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
877
921
  readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
878
922
  mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
879
923
  tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
880
924
  desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
881
925
  wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
882
926
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
883
- readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
884
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
885
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
886
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
887
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
888
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
927
+ readonly rowGap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
928
+ mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
929
+ tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
930
+ desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
931
+ wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
932
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
889
933
  readonly textAlign?: ("left" | "right" | "center" | "justify" | {
890
934
  mobile?: "left" | "right" | "center" | "justify" | undefined;
891
935
  tablet?: "left" | "right" | "center" | "justify" | undefined;
892
936
  desktop?: "left" | "right" | "center" | "justify" | undefined;
893
937
  wide?: "left" | "right" | "center" | "justify" | undefined;
894
938
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
895
- margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
896
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
897
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
898
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
899
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
900
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
901
- marginX?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
902
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
903
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
904
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
905
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
906
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
907
- marginY?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
908
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
909
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
910
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
911
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
912
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
913
- padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
914
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
915
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
916
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
917
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
918
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
919
- paddingX?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
920
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
921
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
922
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
923
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
924
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
925
- paddingY?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
926
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
927
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
928
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
929
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
930
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
939
+ margin?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
940
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
941
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
942
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
943
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
944
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
945
+ marginBlock?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
946
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
947
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
948
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
949
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
950
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
951
+ marginInline?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
952
+ mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
953
+ tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
954
+ desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
955
+ wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
956
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
931
957
  placeItems?: ("center" | "flex-start" | "flex-end" | {
932
958
  mobile?: "center" | "flex-start" | "flex-end" | undefined;
933
959
  tablet?: "center" | "flex-start" | "flex-end" | undefined;
@@ -990,7 +1016,7 @@ declare const Link: react.ForwardRefExoticComponent<{
990
1016
  asChild?: boolean | undefined;
991
1017
  children?: React.ReactNode;
992
1018
  underline?: boolean | undefined;
993
- variant?: "primary" | "secondary" | "inherit" | undefined;
1019
+ variant?: "inherit" | "primary" | "secondary" | undefined;
994
1020
  } & MarginAtoms & HTMLElementProps<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
995
1021
 
996
1022
  type BlocksProviderProps = {
@@ -1072,4 +1098,4 @@ declare const classnames: (...args: Args[]) => string | undefined;
1072
1098
 
1073
1099
  declare const momotaro: Theme;
1074
1100
 
1075
- 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, Slot, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Text, type TextProps, type ThemeComponentsStyles, type ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, vars };
1101
+ 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, Slot, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Text, type TextProps, type ThemeComponentsStyles, type ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, vars };