@blockle/blocks 0.8.4 → 0.8.6

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 (11) hide show
  1. package/dist/index.cjs +2 -0
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.mjs +4 -2
  4. package/dist/momotaro.chunk.d.ts +98 -88
  5. package/dist/styles/lib/css/style/style.cjs +28 -0
  6. package/dist/styles/lib/css/style/style.mjs +29 -0
  7. package/dist/styles/themes/momotaro/components/button.css.cjs +23 -26
  8. package/dist/styles/themes/momotaro/components/button.css.mjs +19 -22
  9. package/dist/styles/themes/momotaro/components/helpers.css.cjs +2 -4
  10. package/dist/styles/themes/momotaro/components/helpers.css.mjs +2 -4
  11. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const styles_lib_css_atoms_breakpoints_cjs = require("./styles/lib/css/atoms/breakpoints.cjs");
4
+ const styles_lib_css_style_style_cjs = require("./styles/lib/css/style/style.cjs");
4
5
  const styles_lib_theme_makeComponentTheme_cjs = require("./styles/lib/theme/makeComponentTheme.cjs");
5
6
  const styles_lib_theme_makeTheme_cjs = require("./styles/lib/theme/makeTheme.cjs");
6
7
  const styles_lib_theme_vars_css_cjs = require("./styles/lib/theme/vars.css.cjs");
@@ -737,6 +738,7 @@ const Text = react.forwardRef(function Text2({ tag: Tag = "span", asChild, child
737
738
  return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref, asChild: true, className: classnames(styles_components_Text_text_css_cjs.text, className), ...restProps, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Tag, { children }) });
738
739
  });
739
740
  exports.breakpointQuery = styles_lib_css_atoms_breakpoints_cjs.breakpointQuery;
741
+ exports.style = styles_lib_css_style_style_cjs.style;
740
742
  exports.makeComponentTheme = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme;
741
743
  exports.makeTheme = styles_lib_theme_makeTheme_cjs.makeTheme;
742
744
  exports.vars = styles_lib_theme_vars_css_cjs.vars;
package/dist/index.d.ts CHANGED
@@ -1 +1 @@
1
- export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, vars } from './momotaro.chunk.js';
1
+ export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, vars } from './momotaro.chunk.js';
package/dist/index.mjs CHANGED
@@ -1,6 +1,7 @@
1
1
  'use client';
2
2
 
3
3
  import { breakpointQuery } from "./styles/lib/css/atoms/breakpoints.mjs";
4
+ import { style } from "./styles/lib/css/style/style.mjs";
4
5
  import { makeComponentTheme } from "./styles/lib/theme/makeComponentTheme.mjs";
5
6
  import { makeTheme } from "./styles/lib/theme/makeTheme.mjs";
6
7
  import { vars } from "./styles/lib/theme/vars.css.mjs";
@@ -446,8 +447,8 @@ function hasAnimationDuration(element) {
446
447
  if (!element) {
447
448
  return false;
448
449
  }
449
- const style = window.getComputedStyle(element);
450
- return style.transitionDuration !== "0s" || style.animationDuration !== "0s";
450
+ const style2 = window.getComputedStyle(element);
451
+ return style2.transitionDuration !== "0s" || style2.animationDuration !== "0s";
451
452
  }
452
453
  const Portal = ({ children, container: container2 }) => {
453
454
  const context = useTheme();
@@ -761,6 +762,7 @@ export {
761
762
  createSlottable,
762
763
  makeComponentTheme,
763
764
  makeTheme,
765
+ style,
764
766
  useComponentStyleDefaultProps,
765
767
  useComponentStyles,
766
768
  useIsomorphicLayoutEffect,
package/dist/momotaro.chunk.d.ts CHANGED
@@ -1,15 +1,16 @@
1
+ import { StyleRule } from '@vanilla-extract/css';
1
2
  import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
2
3
  import * as react from 'react';
3
4
  import react__default, { useEffect } from 'react';
4
5
 
5
6
  declare const atoms: ((props: {
6
- readonly backgroundColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
7
- readonly borderColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
7
+ readonly backgroundColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
8
+ readonly borderColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
8
9
  readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
9
10
  readonly border?: "none" | undefined;
10
11
  readonly bottom?: 0 | undefined;
11
12
  readonly boxShadow?: ("small" | "medium" | "large") | undefined;
12
- readonly color?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
13
+ readonly color?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
13
14
  readonly cursor?: "auto" | "pointer" | undefined;
14
15
  readonly fontFamily?: "body" | "primary" | "secondary" | undefined;
15
16
  readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
@@ -31,7 +32,7 @@ declare const atoms: ((props: {
31
32
  readonly top?: 0 | undefined;
32
33
  readonly transition?: ("slow" | "normal" | "fast") | undefined;
33
34
  readonly userSelect?: "none" | undefined;
34
- readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
35
+ readonly whiteSpace?: "nowrap" | "pre" | "pre-line" | "pre-wrap" | undefined;
35
36
  readonly width?: "auto" | "fit-content" | "full" | undefined;
36
37
  readonly wordBreak?: "break-word" | undefined;
37
38
  readonly wordWrap?: "break-word" | undefined;
@@ -42,193 +43,193 @@ declare const atoms: ((props: {
42
43
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
43
44
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
44
45
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
45
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
46
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
46
47
  readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
47
48
  mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
48
49
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
49
50
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
50
51
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
51
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
52
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
52
53
  readonly alignSelf?: ("stretch" | "center" | "flex-start" | "flex-end" | {
53
54
  mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
54
55
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
55
56
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
56
57
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
57
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
58
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
58
59
  readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
59
60
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
60
61
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
61
62
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
62
63
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
63
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
64
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
64
65
  readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
65
66
  mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
66
67
  tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
67
68
  desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
68
69
  wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
69
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
70
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
70
71
  readonly flex?: (1 | {
71
72
  mobile?: 1 | undefined;
72
73
  tablet?: 1 | undefined;
73
74
  desktop?: 1 | undefined;
74
75
  wide?: 1 | undefined;
75
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 1 | null>;
76
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 1 | null>;
76
77
  readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
77
78
  mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
78
79
  tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
79
80
  desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
80
81
  wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
81
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
82
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
82
83
  readonly flexGrow?: (0 | 1 | {
83
84
  mobile?: 0 | 1 | undefined;
84
85
  tablet?: 0 | 1 | undefined;
85
86
  desktop?: 0 | 1 | undefined;
86
87
  wide?: 0 | 1 | undefined;
87
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
88
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
88
89
  readonly flexShrink?: (0 | 1 | {
89
90
  mobile?: 0 | 1 | undefined;
90
91
  tablet?: 0 | 1 | undefined;
91
92
  desktop?: 0 | 1 | undefined;
92
93
  wide?: 0 | 1 | undefined;
93
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
94
- readonly flexWrap?: ("nowrap" | "wrap" | {
95
- mobile?: "nowrap" | "wrap" | undefined;
96
- tablet?: "nowrap" | "wrap" | undefined;
97
- desktop?: "nowrap" | "wrap" | undefined;
98
- wide?: "nowrap" | "wrap" | undefined;
99
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "nowrap" | "wrap" | null>;
94
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
95
+ readonly flexWrap?: ("wrap" | "nowrap" | {
96
+ mobile?: "wrap" | "nowrap" | undefined;
97
+ tablet?: "wrap" | "nowrap" | undefined;
98
+ desktop?: "wrap" | "nowrap" | undefined;
99
+ wide?: "wrap" | "nowrap" | undefined;
100
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "wrap" | "nowrap" | null>;
100
101
  readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
101
102
  mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
102
103
  tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
103
104
  desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
104
105
  wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
105
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
106
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
106
107
  readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
107
108
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
108
109
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
109
110
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
110
111
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
111
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
112
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
112
113
  readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
113
114
  mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
114
115
  tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
115
116
  desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
116
117
  wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
117
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
118
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
118
119
  readonly marginBottom?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
119
120
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
120
121
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
121
122
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
122
123
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
123
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
124
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
124
125
  readonly marginLeft?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
125
126
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
126
127
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
127
128
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
128
129
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
129
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
130
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
130
131
  readonly marginRight?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
131
132
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
132
133
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
133
134
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
134
135
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
135
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
136
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
136
137
  readonly marginTop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
137
138
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
138
139
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
139
140
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
140
141
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
141
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
142
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
142
143
  readonly outline?: ("none" | {
143
144
  mobile?: "none" | undefined;
144
145
  tablet?: "none" | undefined;
145
146
  desktop?: "none" | undefined;
146
147
  wide?: "none" | undefined;
147
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | null>;
148
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
148
149
  readonly paddingBottom?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
149
150
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
150
151
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
151
152
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
152
153
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
153
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
154
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
154
155
  readonly paddingLeft?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
155
156
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
156
157
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
157
158
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
158
159
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
159
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
160
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
160
161
  readonly paddingRight?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
161
162
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
162
163
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
163
164
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
164
165
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
165
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
166
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
166
167
  readonly paddingTop?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
167
168
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
168
169
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
169
170
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
170
171
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
171
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
172
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
172
173
  readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
173
174
  mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
174
175
  tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
175
176
  desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
176
177
  wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
177
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
178
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
178
179
  readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
179
180
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
180
181
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
181
182
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
182
183
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
183
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
184
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
184
185
  readonly textAlign?: ("left" | "right" | "center" | "justify" | {
185
186
  mobile?: "left" | "right" | "center" | "justify" | undefined;
186
187
  tablet?: "left" | "right" | "center" | "justify" | undefined;
187
188
  desktop?: "left" | "right" | "center" | "justify" | undefined;
188
189
  wide?: "left" | "right" | "center" | "justify" | undefined;
189
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "left" | "right" | "center" | "justify" | null>;
190
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
190
191
  margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
191
192
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
192
193
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
193
194
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
194
195
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
195
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
196
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
196
197
  marginX?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
197
198
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
198
199
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
199
200
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
200
201
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
201
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
202
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
202
203
  marginY?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
203
204
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
204
205
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
205
206
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
206
207
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
207
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
208
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
208
209
  padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
209
210
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
210
211
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
211
212
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
212
213
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
213
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
214
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
214
215
  paddingX?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
215
216
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
216
217
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
217
218
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
218
219
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
219
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
220
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
220
221
  paddingY?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
221
222
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
222
223
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
223
224
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
224
225
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
225
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
226
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
226
227
  placeItems?: ("center" | "flex-start" | "flex-end" | {
227
228
  mobile?: "center" | "flex-start" | "flex-end" | undefined;
228
229
  tablet?: "center" | "flex-start" | "flex-end" | undefined;
229
230
  desktop?: "center" | "flex-start" | "flex-end" | undefined;
230
231
  wide?: "center" | "flex-start" | "flex-end" | undefined;
231
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | null>;
232
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
232
233
  }) => string) & {
233
234
  properties: Set<"borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "bottom" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "height" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "rowGap" | "textAlign" | "textTransform" | "top" | "userSelect" | "whiteSpace" | "width" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "flex" | "gap" | "inset" | "margin" | "outline" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
234
235
  };
@@ -242,10 +243,11 @@ declare const breakpoints: {
242
243
  type Breakpoint = keyof typeof breakpoints;
243
244
  declare const breakpointQuery: (key: Breakpoint) => string;
244
245
 
246
+ type AnyString = string & {};
245
247
  /**
246
248
  * Suggest a type for a string literal but also allow any string.
247
249
  */
248
- type OptionalLiteral<T extends string> = T | (string & {});
250
+ type OptionalLiteral<T extends string> = T | AnyString;
249
251
  type RecordLike = Record<string | number, unknown>;
250
252
 
251
253
  type Atoms = Parameters<typeof atoms>[0];
@@ -285,6 +287,15 @@ type TextAtoms = {
285
287
  wordWrap?: Atoms['wordWrap'];
286
288
  };
287
289
 
290
+ type StyleRuleWithAtoms = Omit<StyleRule, keyof Atoms> & {
291
+ [K in keyof Atoms]?: K extends keyof StyleRule ? Atoms[K] | AnyString | number : Atoms[K];
292
+ };
293
+ /**
294
+ * A wrapper around vanilla-extract's `style` function that allows you to use
295
+ * atoms and raw CSS values in the same object.
296
+ */
297
+ declare function style(props: StyleRuleWithAtoms | (StyleRuleWithAtoms | string)[]): string;
298
+
288
299
  type ButtonTheme = {
289
300
  base: string;
290
301
  variants: {
@@ -425,7 +436,7 @@ type ComponentTheme<T extends RecordLike> = ComponentThemeToStyles<T> & {
425
436
  defaultVariants?: ComponentThemeDefaultVariants<T>;
426
437
  };
427
438
  type ThemeComponentsStyles = {
428
- [K in keyof ComponentThemes]: ComponentTheme<ComponentThemes[K]>;
439
+ [K in keyof ComponentThemes]?: ComponentTheme<ComponentThemes[K]>;
429
440
  };
430
441
  declare function makeComponentTheme<T extends keyof ThemeComponentsStyles>(component: T, componentTheme: ThemeComponentsStyles[T]): ThemeComponentsStyles[T];
431
442
 
@@ -491,7 +502,6 @@ declare const vars: {
491
502
  xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
492
503
  };
493
504
  color: {
494
- link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
495
505
  white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
496
506
  black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
497
507
  body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -505,6 +515,7 @@ declare const vars: {
505
515
  textLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
506
516
  textDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
507
517
  danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
518
+ link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
508
519
  };
509
520
  borderWidth: {
510
521
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -572,13 +583,13 @@ declare const Box: react.ForwardRefExoticComponent<{
572
583
  style?: react.CSSProperties | undefined;
573
584
  asChild?: boolean | undefined;
574
585
  } & {
575
- readonly backgroundColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
576
- readonly borderColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
586
+ readonly backgroundColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
587
+ readonly borderColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
577
588
  readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
578
589
  readonly border?: "none" | undefined;
579
590
  readonly bottom?: 0 | undefined;
580
591
  readonly boxShadow?: ("small" | "medium" | "large") | undefined;
581
- readonly color?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
592
+ readonly color?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
582
593
  readonly cursor?: "auto" | "pointer" | undefined;
583
594
  readonly fontFamily?: "body" | "primary" | "secondary" | undefined;
584
595
  readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
@@ -600,7 +611,7 @@ declare const Box: react.ForwardRefExoticComponent<{
600
611
  readonly top?: 0 | undefined;
601
612
  readonly transition?: ("slow" | "normal" | "fast") | undefined;
602
613
  readonly userSelect?: "none" | undefined;
603
- readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
614
+ readonly whiteSpace?: "nowrap" | "pre" | "pre-line" | "pre-wrap" | undefined;
604
615
  readonly width?: "auto" | "fit-content" | "full" | undefined;
605
616
  readonly wordBreak?: "break-word" | undefined;
606
617
  readonly wordWrap?: "break-word" | undefined;
@@ -611,193 +622,193 @@ declare const Box: react.ForwardRefExoticComponent<{
611
622
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
612
623
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
613
624
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
614
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
625
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
615
626
  readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
616
627
  mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
617
628
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
618
629
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
619
630
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
620
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
631
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
621
632
  readonly alignSelf?: ("stretch" | "center" | "flex-start" | "flex-end" | {
622
633
  mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
623
634
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
624
635
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
625
636
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
626
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
637
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
627
638
  readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
628
639
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
629
640
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
630
641
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
631
642
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
632
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
643
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
633
644
  readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
634
645
  mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
635
646
  tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
636
647
  desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
637
648
  wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
638
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
649
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
639
650
  readonly flex?: (1 | {
640
651
  mobile?: 1 | undefined;
641
652
  tablet?: 1 | undefined;
642
653
  desktop?: 1 | undefined;
643
654
  wide?: 1 | undefined;
644
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 1 | null>;
655
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 1 | null>;
645
656
  readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
646
657
  mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
647
658
  tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
648
659
  desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
649
660
  wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
650
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
661
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
651
662
  readonly flexGrow?: (0 | 1 | {
652
663
  mobile?: 0 | 1 | undefined;
653
664
  tablet?: 0 | 1 | undefined;
654
665
  desktop?: 0 | 1 | undefined;
655
666
  wide?: 0 | 1 | undefined;
656
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
667
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
657
668
  readonly flexShrink?: (0 | 1 | {
658
669
  mobile?: 0 | 1 | undefined;
659
670
  tablet?: 0 | 1 | undefined;
660
671
  desktop?: 0 | 1 | undefined;
661
672
  wide?: 0 | 1 | undefined;
662
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
663
- readonly flexWrap?: ("nowrap" | "wrap" | {
664
- mobile?: "nowrap" | "wrap" | undefined;
665
- tablet?: "nowrap" | "wrap" | undefined;
666
- desktop?: "nowrap" | "wrap" | undefined;
667
- wide?: "nowrap" | "wrap" | undefined;
668
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "nowrap" | "wrap" | null>;
673
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
674
+ readonly flexWrap?: ("wrap" | "nowrap" | {
675
+ mobile?: "wrap" | "nowrap" | undefined;
676
+ tablet?: "wrap" | "nowrap" | undefined;
677
+ desktop?: "wrap" | "nowrap" | undefined;
678
+ wide?: "wrap" | "nowrap" | undefined;
679
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "wrap" | "nowrap" | null>;
669
680
  readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
670
681
  mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
671
682
  tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
672
683
  desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
673
684
  wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
674
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
685
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
675
686
  readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
676
687
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
677
688
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
678
689
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
679
690
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
680
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
691
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
681
692
  readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
682
693
  mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
683
694
  tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
684
695
  desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
685
696
  wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
686
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
697
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
687
698
  readonly marginBottom?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
688
699
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
689
700
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
690
701
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
691
702
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
692
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
703
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
693
704
  readonly marginLeft?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
694
705
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
695
706
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
696
707
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
697
708
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
698
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
709
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
699
710
  readonly marginRight?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
700
711
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
701
712
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
702
713
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
703
714
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
704
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
715
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
705
716
  readonly marginTop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
706
717
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
707
718
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
708
719
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
709
720
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
710
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
721
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
711
722
  readonly outline?: ("none" | {
712
723
  mobile?: "none" | undefined;
713
724
  tablet?: "none" | undefined;
714
725
  desktop?: "none" | undefined;
715
726
  wide?: "none" | undefined;
716
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | null>;
727
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
717
728
  readonly paddingBottom?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
718
729
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
719
730
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
720
731
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
721
732
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
722
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
733
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
723
734
  readonly paddingLeft?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
724
735
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
725
736
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
726
737
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
727
738
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
728
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
739
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
729
740
  readonly paddingRight?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
730
741
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
731
742
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
732
743
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
733
744
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
734
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
745
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
735
746
  readonly paddingTop?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
736
747
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
737
748
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
738
749
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
739
750
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
740
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
751
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
741
752
  readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
742
753
  mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
743
754
  tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
744
755
  desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
745
756
  wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
746
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
757
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
747
758
  readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
748
759
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
749
760
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
750
761
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
751
762
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
752
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
763
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
753
764
  readonly textAlign?: ("left" | "right" | "center" | "justify" | {
754
765
  mobile?: "left" | "right" | "center" | "justify" | undefined;
755
766
  tablet?: "left" | "right" | "center" | "justify" | undefined;
756
767
  desktop?: "left" | "right" | "center" | "justify" | undefined;
757
768
  wide?: "left" | "right" | "center" | "justify" | undefined;
758
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "left" | "right" | "center" | "justify" | null>;
769
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
759
770
  margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
760
771
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
761
772
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
762
773
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
763
774
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
764
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
775
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
765
776
  marginX?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
766
777
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
767
778
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
768
779
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
769
780
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
770
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
781
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
771
782
  marginY?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
772
783
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
773
784
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
774
785
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
775
786
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
776
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
787
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
777
788
  padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
778
789
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
779
790
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
780
791
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
781
792
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
782
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
793
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
783
794
  paddingX?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
784
795
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
785
796
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
786
797
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
787
798
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
788
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
799
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
789
800
  paddingY?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
790
801
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
791
802
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
792
803
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
793
804
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
794
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
805
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
795
806
  placeItems?: ("center" | "flex-start" | "flex-end" | {
796
807
  mobile?: "center" | "flex-start" | "flex-end" | undefined;
797
808
  tablet?: "center" | "flex-start" | "flex-end" | undefined;
798
809
  desktop?: "center" | "flex-start" | "flex-end" | undefined;
799
810
  wide?: "center" | "flex-start" | "flex-end" | undefined;
800
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | null>;
811
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
801
812
  } & HTMLElementProps<HTMLDivElement> & react.RefAttributes<unknown>>;
802
813
 
803
814
  type ButtonProps = {
@@ -816,7 +827,7 @@ type ButtonProps = {
816
827
  } & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
817
828
  declare const Button: react.ForwardRefExoticComponent<{
818
829
  children: React.ReactNode;
819
- type?: "button" | "submit" | "reset" | undefined;
830
+ type?: "button" | "reset" | "submit" | undefined;
820
831
  variant?: "outline" | "solid" | "ghost" | undefined;
821
832
  intent?: "danger" | "neutral" | undefined;
822
833
  size?: "small" | "medium" | "large" | undefined;
@@ -858,7 +869,6 @@ type DividerProps = {
858
869
  declare const Divider: React.FC<DividerProps>;
859
870
 
860
871
  type HeadingProps = {
861
- align?: Atoms['textAlign'];
862
872
  children: React.ReactNode;
863
873
  className?: string;
864
874
  level: 1 | 2 | 3 | 4 | 5 | 6;
@@ -1035,4 +1045,4 @@ declare const classnames: (...args: Args[]) => string | undefined;
1035
1045
 
1036
1046
  declare const momotaro: Theme;
1037
1047
 
1038
- export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, vars };
1048
+ export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, vars };
package/dist/styles/lib/css/style/style.cjs ADDED
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+ const css = require("@vanilla-extract/css");
3
+ const styles_lib_css_atoms_sprinkles_css_cjs = require("../atoms/sprinkles.css.cjs");
4
+ function style(props) {
5
+ const styleRule = {};
6
+ const atomClassNames = [];
7
+ if (Array.isArray(props)) {
8
+ return props.map((rule) => {
9
+ if (typeof rule === "string") {
10
+ return rule;
11
+ }
12
+ return style(rule);
13
+ }).join(" ");
14
+ }
15
+ for (const [name, value] of Object.entries(props)) {
16
+ if (styles_lib_css_atoms_sprinkles_css_cjs.atoms.properties.has(name)) {
17
+ try {
18
+ atomClassNames.push(styles_lib_css_atoms_sprinkles_css_cjs.atoms({ [name]: value }));
19
+ } catch {
20
+ styleRule[name] = value;
21
+ }
22
+ } else {
23
+ styleRule[name] = value;
24
+ }
25
+ }
26
+ return css.style([styleRule, ...atomClassNames]);
27
+ }
28
+ exports.style = style;
package/dist/styles/lib/css/style/style.mjs ADDED
@@ -0,0 +1,29 @@
1
+ import { style as style$1 } from "@vanilla-extract/css";
2
+ import { atoms } from "../atoms/sprinkles.css.mjs";
3
+ function style(props) {
4
+ const styleRule = {};
5
+ const atomClassNames = [];
6
+ if (Array.isArray(props)) {
7
+ return props.map((rule) => {
8
+ if (typeof rule === "string") {
9
+ return rule;
10
+ }
11
+ return style(rule);
12
+ }).join(" ");
13
+ }
14
+ for (const [name, value] of Object.entries(props)) {
15
+ if (atoms.properties.has(name)) {
16
+ try {
17
+ atomClassNames.push(atoms({ [name]: value }));
18
+ } catch {
19
+ styleRule[name] = value;
20
+ }
21
+ } else {
22
+ styleRule[name] = value;
23
+ }
24
+ }
25
+ return style$1([styleRule, ...atomClassNames]);
26
+ }
27
+ export {
28
+ style
29
+ };
package/dist/styles/themes/momotaro/components/button.css.cjs CHANGED
@@ -1,25 +1,25 @@
1
1
  "use strict";
2
2
  const fileScope = require("@vanilla-extract/css/fileScope");
3
3
  const css = require("@vanilla-extract/css");
4
+ const styles_lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
4
5
  const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
5
6
  const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
6
7
  const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
7
- const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
8
8
  fileScope.setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
9
9
  const primaryColor = css.createVar("primaryColor");
10
10
  const button = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("button", {
11
- base: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
11
+ base: styles_lib_css_style_style_cjs.style([{
12
12
  display: "inline-flex",
13
13
  placeItems: "center",
14
14
  fontSize: "medium",
15
15
  borderRadius: "medium",
16
16
  fontWeight: "medium",
17
- // Space between icon and text
17
+ // Space between `startSlot | children | endSlot`
18
18
  gap: "small"
19
- }), styles_themes_momotaro_components_helpers_css_cjs.clickable], "button_base"),
19
+ }, styles_themes_momotaro_components_helpers_css_cjs.clickable]),
20
20
  variants: {
21
21
  variant: {
22
- solid: css.style({
22
+ solid: styles_lib_css_style_style_cjs.style({
23
23
  color: styles_lib_theme_vars_css_cjs.vars.color.white,
24
24
  backgroundColor: primaryColor,
25
25
  border: "none",
@@ -28,8 +28,8 @@ const button = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("butto
28
28
  backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryDark
29
29
  }
30
30
  }
31
- }, "button_variants_variant_solid"),
32
- outline: css.style({
31
+ }),
32
+ outline: styles_lib_css_style_style_cjs.style({
33
33
  color: primaryColor,
34
34
  borderWidth: styles_lib_theme_vars_css_cjs.vars.borderWidth.small,
35
35
  borderStyle: "solid",
@@ -40,8 +40,8 @@ const button = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("butto
40
40
  backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryLight
41
41
  }
42
42
  }
43
- }, "button_variants_variant_outline"),
44
- ghost: css.style({
43
+ }),
44
+ ghost: styles_lib_css_style_style_cjs.style({
45
45
  color: primaryColor,
46
46
  background: "transparent",
47
47
  selectors: {
@@ -49,36 +49,33 @@ const button = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("butto
49
49
  backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.primaryLight
50
50
  }
51
51
  }
52
- }, "button_variants_variant_ghost")
52
+ })
53
53
  },
54
54
  size: {
55
- small: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
56
- paddingX: "large"
57
- }), {
55
+ small: styles_lib_css_style_style_cjs.style({
56
+ paddingX: "large",
58
57
  height: 40
59
- }], "button_variants_size_small"),
60
- medium: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
61
- paddingX: "xlarge"
62
- }), {
58
+ }),
59
+ medium: styles_lib_css_style_style_cjs.style({
60
+ paddingX: "xlarge",
63
61
  height: 56
64
- }], "button_variants_size_medium"),
65
- large: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
66
- paddingX: "xlarge"
67
- }), {
62
+ }),
63
+ large: styles_lib_css_style_style_cjs.style({
64
+ paddingX: "xlarge",
68
65
  height: 72
69
- }], "button_variants_size_large")
66
+ })
70
67
  },
71
68
  intent: {
72
- neutral: css.style({
69
+ neutral: styles_lib_css_style_style_cjs.style({
73
70
  vars: {
74
71
  [primaryColor]: styles_lib_theme_vars_css_cjs.vars.color.primary
75
72
  }
76
- }, "button_variants_intent_neutral"),
77
- danger: css.style({
73
+ }),
74
+ danger: styles_lib_css_style_style_cjs.style({
78
75
  vars: {
79
76
  [primaryColor]: styles_lib_theme_vars_css_cjs.vars.color.danger
80
77
  }
81
- }, "button_variants_intent_danger")
78
+ })
82
79
  }
83
80
  },
84
81
  // compoundVariants: [
package/dist/styles/themes/momotaro/components/button.css.mjs CHANGED
@@ -1,21 +1,21 @@
1
1
  import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
2
- import { createVar, style } from "@vanilla-extract/css";
2
+ import { createVar } from "@vanilla-extract/css";
3
+ import { style } from "../../../lib/css/style/style.mjs";
3
4
  import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
4
5
  import { vars } from "../../../lib/theme/vars.css.mjs";
5
6
  import { clickable } from "./helpers.css.mjs";
6
- import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
7
7
  setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
8
8
  const primaryColor = createVar("primaryColor");
9
9
  const button = makeComponentTheme("button", {
10
- base: style([atoms({
10
+ base: style([{
11
11
  display: "inline-flex",
12
12
  placeItems: "center",
13
13
  fontSize: "medium",
14
14
  borderRadius: "medium",
15
15
  fontWeight: "medium",
16
- // Space between icon and text
16
+ // Space between `startSlot | children | endSlot`
17
17
  gap: "small"
18
- }), clickable], "button_base"),
18
+ }, clickable]),
19
19
  variants: {
20
20
  variant: {
21
21
  solid: style({
@@ -27,7 +27,7 @@ const button = makeComponentTheme("button", {
27
27
  backgroundColor: vars.color.primaryDark
28
28
  }
29
29
  }
30
- }, "button_variants_variant_solid"),
30
+ }),
31
31
  outline: style({
32
32
  color: primaryColor,
33
33
  borderWidth: vars.borderWidth.small,
@@ -39,7 +39,7 @@ const button = makeComponentTheme("button", {
39
39
  backgroundColor: vars.color.primaryLight
40
40
  }
41
41
  }
42
- }, "button_variants_variant_outline"),
42
+ }),
43
43
  ghost: style({
44
44
  color: primaryColor,
45
45
  background: "transparent",
@@ -48,36 +48,33 @@ const button = makeComponentTheme("button", {
48
48
  backgroundColor: vars.color.primaryLight
49
49
  }
50
50
  }
51
- }, "button_variants_variant_ghost")
51
+ })
52
52
  },
53
53
  size: {
54
- small: style([atoms({
55
- paddingX: "large"
56
- }), {
54
+ small: style({
55
+ paddingX: "large",
57
56
  height: 40
58
- }], "button_variants_size_small"),
59
- medium: style([atoms({
60
- paddingX: "xlarge"
61
- }), {
57
+ }),
58
+ medium: style({
59
+ paddingX: "xlarge",
62
60
  height: 56
63
- }], "button_variants_size_medium"),
64
- large: style([atoms({
65
- paddingX: "xlarge"
66
- }), {
61
+ }),
62
+ large: style({
63
+ paddingX: "xlarge",
67
64
  height: 72
68
- }], "button_variants_size_large")
65
+ })
69
66
  },
70
67
  intent: {
71
68
  neutral: style({
72
69
  vars: {
73
70
  [primaryColor]: vars.color.primary
74
71
  }
75
- }, "button_variants_intent_neutral"),
72
+ }),
76
73
  danger: style({
77
74
  vars: {
78
75
  [primaryColor]: vars.color.danger
79
76
  }
80
- }, "button_variants_intent_danger")
77
+ })
81
78
  }
82
79
  },
83
80
  // compoundVariants: [
package/dist/styles/themes/momotaro/components/helpers.css.cjs CHANGED
@@ -31,10 +31,8 @@ const focusable = css.style({
31
31
  }
32
32
  }, "focusable");
33
33
  const clickable = css.style([focusable, {
34
- selectors: {
35
- "&:active:not(:disabled)": {
36
- transform: "scale(0.9)"
37
- }
34
+ ":active": {
35
+ transform: "scale(0.98)"
38
36
  }
39
37
  }], "clickable");
40
38
  fileScope.endFileScope();
package/dist/styles/themes/momotaro/components/helpers.css.mjs CHANGED
@@ -30,10 +30,8 @@ const focusable = style({
30
30
  }
31
31
  }, "focusable");
32
32
  const clickable = style([focusable, {
33
- selectors: {
34
- "&:active:not(:disabled)": {
35
- transform: "scale(0.9)"
36
- }
33
+ ":active": {
34
+ transform: "scale(0.98)"
37
35
  }
38
36
  }], "clickable");
39
37
  endFileScope();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockle/blocks",
3
- "version": "0.8.4",
3
+ "version": "0.8.6",
4
4
  "description": "Blocks design system",
5
5
  "repository": "git@github.com:Blockle/blocks.git",
6
6
  "license": "MIT",