@blockle/blocks 0.3.1 → 0.3.2

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.
package/dist/index.cjs CHANGED
@@ -1,7 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const styles_lib_css_theme_vars_css_cjs = require("./styles/lib/css/theme/vars.css.cjs");
4
3
  const styles_lib_css_atoms_breakpoints_cjs = require("./styles/lib/css/atoms/breakpoints.cjs");
4
+ const styles_lib_css_theme_makeTheme_cjs = require("./styles/lib/css/theme/makeTheme.cjs");
5
+ const styles_lib_css_theme_vars_css_cjs = require("./styles/lib/css/theme/vars.css.cjs");
5
6
  const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
6
7
  const jsxRuntime = require("react/jsx-runtime");
7
8
  const react = require("react");
@@ -265,8 +266,9 @@ const Link = react.forwardRef(function Link2({ as, className, variant, underline
265
266
  const linkClassName = useComponentStyles("link", { base: true, variant, underline });
266
267
  return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
267
268
  });
268
- exports.vars = styles_lib_css_theme_vars_css_cjs.vars;
269
269
  exports.breakpointQuery = styles_lib_css_atoms_breakpoints_cjs.breakpointQuery;
270
+ exports.makeTheme = styles_lib_css_theme_makeTheme_cjs.makeTheme;
271
+ exports.vars = styles_lib_css_theme_vars_css_cjs.vars;
270
272
  exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
271
273
  exports.BlocksProvider = BlocksProvider;
272
274
  exports.Box = Box;
package/dist/index.d.ts CHANGED
@@ -1 +1 @@
1
- export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, breakpointQuery, classnames, vars } from './momotaro.chunk.js';
1
+ export { BlocksProvider, BlocksProviderProps, BlocksTokens, Box, BoxProps, Button, ButtonProps, ComponentThemesMap, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, breakpointQuery, classnames, makeTheme, vars } from './momotaro.chunk.js';
package/dist/index.mjs CHANGED
@@ -1,7 +1,8 @@
1
1
  'use client';
2
2
 
3
- import { vars } from "./styles/lib/css/theme/vars.css.mjs";
4
3
  import { breakpointQuery } from "./styles/lib/css/atoms/breakpoints.mjs";
4
+ import { makeTheme } from "./styles/lib/css/theme/makeTheme.mjs";
5
+ import { vars } from "./styles/lib/css/theme/vars.css.mjs";
5
6
  import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
6
7
  import { jsx, jsxs } from "react/jsx-runtime";
7
8
  import { createContext, forwardRef, useContext } from "react";
@@ -278,5 +279,6 @@ export {
278
279
  atoms,
279
280
  breakpointQuery,
280
281
  classnames,
282
+ makeTheme,
281
283
  vars
282
284
  };
@@ -4,18 +4,18 @@ import { HTMLProps, ReactNode, FC } 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") | undefined;
7
+ readonly backgroundColor?: ("link" | "danger" | "primary" | "secondary" | "white" | "black" | "body" | "primaryLight" | "primaryDark" | "secondaryLight" | "secondaryDark" | "text" | "textLight" | "textDark") | undefined;
8
8
  readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
9
9
  readonly bottom?: 0 | undefined;
10
10
  readonly boxShadow?: ("small" | "medium" | "large") | undefined;
11
- readonly color?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
11
+ readonly color?: "link" | "danger" | "primary" | "secondary" | "white" | "black" | "body" | "primaryLight" | "primaryDark" | "secondaryLight" | "secondaryDark" | "text" | "textLight" | "textDark" | "currentColor" | undefined;
12
12
  readonly cursor?: "auto" | "pointer" | undefined;
13
13
  readonly fontFamily?: "secondary" | "standard" | undefined;
14
14
  readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
15
15
  readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
16
16
  readonly height?: "auto" | "full" | undefined;
17
17
  readonly left?: 0 | undefined;
18
- readonly lineHeight?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
18
+ readonly lineHeight?: ("small" | "medium" | "large" | "xsmall" | "xlarge") | undefined;
19
19
  readonly maxHeight?: "full" | undefined;
20
20
  readonly maxWidth?: "full" | undefined;
21
21
  readonly opacity?: 0 | 1 | undefined;
@@ -24,13 +24,13 @@ declare const atoms: ((props: {
24
24
  readonly overflowY?: "auto" | "hidden" | "scroll" | "visible" | undefined;
25
25
  readonly pointerEvents?: "none" | undefined;
26
26
  readonly right?: 0 | undefined;
27
- readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
27
+ readonly textDecoration?: "underline" | "none" | "overline" | "line-through" | undefined;
28
28
  readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
29
29
  readonly textWrap?: "balance" | "wrap" | undefined;
30
30
  readonly top?: 0 | undefined;
31
31
  readonly transition?: ("slow" | "normal" | "fast") | undefined;
32
32
  readonly userSelect?: "none" | undefined;
33
- readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
33
+ readonly whiteSpace?: "nowrap" | "pre" | "pre-line" | "pre-wrap" | undefined;
34
34
  readonly width?: "auto" | "fit-content" | "full" | undefined;
35
35
  readonly wordBreak?: "break-word" | undefined;
36
36
  readonly wordWrap?: "break-word" | undefined;
@@ -41,183 +41,183 @@ declare const atoms: ((props: {
41
41
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
42
42
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
43
43
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
44
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
45
- readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
46
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
47
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
48
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
49
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
50
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
44
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
45
+ readonly columnGap?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
46
+ mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
47
+ tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
48
+ desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
49
+ wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
50
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
51
51
  readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
52
52
  mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
53
53
  tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
54
54
  desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
55
55
  wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
56
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
56
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
57
57
  readonly flex?: (1 | {
58
58
  mobile?: 1 | undefined;
59
59
  tablet?: 1 | undefined;
60
60
  desktop?: 1 | undefined;
61
61
  wide?: 1 | undefined;
62
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 1 | null>;
62
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 1 | null>;
63
63
  readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
64
64
  mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
65
65
  tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
66
66
  desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
67
67
  wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
68
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
68
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "row" | "row-reverse" | "column" | "column-reverse" | null>;
69
69
  readonly flexGrow?: (0 | 1 | {
70
70
  mobile?: 0 | 1 | undefined;
71
71
  tablet?: 0 | 1 | undefined;
72
72
  desktop?: 0 | 1 | undefined;
73
73
  wide?: 0 | 1 | undefined;
74
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
74
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
75
75
  readonly flexShrink?: (0 | 1 | {
76
76
  mobile?: 0 | 1 | undefined;
77
77
  tablet?: 0 | 1 | undefined;
78
78
  desktop?: 0 | 1 | undefined;
79
79
  wide?: 0 | 1 | undefined;
80
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
81
- readonly flexWrap?: ("nowrap" | "wrap" | {
82
- mobile?: "nowrap" | "wrap" | undefined;
83
- tablet?: "nowrap" | "wrap" | undefined;
84
- desktop?: "nowrap" | "wrap" | undefined;
85
- wide?: "nowrap" | "wrap" | undefined;
86
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "nowrap" | "wrap" | null>;
87
- readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
88
- mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
89
- tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
90
- desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
91
- wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
92
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
93
- readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
94
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
95
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
96
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
97
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
98
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
80
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
81
+ readonly flexWrap?: ("wrap" | "nowrap" | {
82
+ mobile?: "wrap" | "nowrap" | undefined;
83
+ tablet?: "wrap" | "nowrap" | undefined;
84
+ desktop?: "wrap" | "nowrap" | undefined;
85
+ wide?: "wrap" | "nowrap" | undefined;
86
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "wrap" | "nowrap" | null>;
87
+ readonly fontSize?: (("small" | "medium" | "large" | "xsmall" | "xlarge") | {
88
+ mobile?: ("small" | "medium" | "large" | "xsmall" | "xlarge") | undefined;
89
+ tablet?: ("small" | "medium" | "large" | "xsmall" | "xlarge") | undefined;
90
+ desktop?: ("small" | "medium" | "large" | "xsmall" | "xlarge") | undefined;
91
+ wide?: ("small" | "medium" | "large" | "xsmall" | "xlarge") | undefined;
92
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "xsmall" | "xlarge") | null>;
93
+ readonly gap?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
94
+ mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
95
+ tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
96
+ desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
97
+ wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
98
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
99
99
  readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
100
100
  mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
101
101
  tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
102
102
  desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
103
103
  wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
104
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
105
- readonly marginBottom?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
106
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
107
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
108
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
109
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
110
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
111
- readonly marginLeft?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
112
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
113
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
114
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
115
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
116
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
117
- readonly marginRight?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
118
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
119
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
120
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
121
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
122
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
123
- readonly marginTop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
124
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
125
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
126
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
127
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
128
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
104
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
105
+ readonly marginBottom?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
106
+ mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
107
+ tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
108
+ desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
109
+ wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
110
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
111
+ readonly marginLeft?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
112
+ mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
113
+ tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
114
+ desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
115
+ wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
116
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
117
+ readonly marginRight?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
118
+ mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
119
+ tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
120
+ desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
121
+ wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
122
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
123
+ readonly marginTop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
124
+ mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
125
+ tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
126
+ desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
127
+ wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
128
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
129
129
  readonly outline?: ("none" | {
130
130
  mobile?: "none" | undefined;
131
131
  tablet?: "none" | undefined;
132
132
  desktop?: "none" | undefined;
133
133
  wide?: "none" | undefined;
134
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
135
- readonly paddingBottom?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
136
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
137
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
138
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
139
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
140
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
141
- readonly paddingLeft?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
142
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
143
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
144
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
145
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
146
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
147
- readonly paddingRight?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
148
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
149
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
150
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
151
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
152
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
153
- readonly paddingTop?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
154
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
155
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
156
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
157
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
158
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
134
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | null>;
135
+ readonly paddingBottom?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
136
+ mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
137
+ tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
138
+ desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
139
+ wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
140
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
141
+ readonly paddingLeft?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
142
+ mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
143
+ tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
144
+ desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
145
+ wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
146
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
147
+ readonly paddingRight?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
148
+ mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
149
+ tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
150
+ desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
151
+ wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
152
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
153
+ readonly paddingTop?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
154
+ mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
155
+ tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
156
+ desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
157
+ wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
158
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
159
159
  readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
160
160
  mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
161
161
  tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
162
162
  desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
163
163
  wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
164
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
165
- readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
166
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
167
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
168
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
169
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
170
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
164
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
165
+ readonly rowGap?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
166
+ mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
167
+ tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
168
+ desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
169
+ wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
170
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
171
171
  readonly textAlign?: ("left" | "right" | "center" | "justify" | {
172
172
  mobile?: "left" | "right" | "center" | "justify" | undefined;
173
173
  tablet?: "left" | "right" | "center" | "justify" | undefined;
174
174
  desktop?: "left" | "right" | "center" | "justify" | undefined;
175
175
  wide?: "left" | "right" | "center" | "justify" | undefined;
176
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
177
- margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
178
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
179
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
180
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
181
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
182
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
183
- marginX?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
184
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
185
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
186
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
187
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
188
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
189
- marginY?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
190
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
191
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
192
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
193
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
194
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
195
- padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
196
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
197
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
198
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
199
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
200
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
201
- paddingX?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
202
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
203
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
204
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
205
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
206
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
207
- paddingY?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
208
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
209
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
210
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
211
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
212
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
176
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "left" | "right" | "center" | "justify" | null>;
177
+ margin?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
178
+ mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
179
+ tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
180
+ desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
181
+ wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
182
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
183
+ marginX?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
184
+ mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
185
+ tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
186
+ desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
187
+ wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
188
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
189
+ marginY?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
190
+ mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
191
+ tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
192
+ desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
193
+ wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
194
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
195
+ padding?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
196
+ mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
197
+ tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
198
+ desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
199
+ wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
200
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
201
+ paddingX?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
202
+ mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
203
+ tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
204
+ desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
205
+ wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
206
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
207
+ paddingY?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
208
+ mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
209
+ tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
210
+ desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
211
+ wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
212
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
213
213
  placeItems?: ("center" | "flex-start" | "flex-end" | {
214
214
  mobile?: "center" | "flex-start" | "flex-end" | undefined;
215
215
  tablet?: "center" | "flex-start" | "flex-end" | undefined;
216
216
  desktop?: "center" | "flex-start" | "flex-end" | undefined;
217
217
  wide?: "center" | "flex-start" | "flex-end" | undefined;
218
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
218
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | null>;
219
219
  }) => string) & {
220
- properties: Set<"borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignItems" | "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" | "flex" | "gap" | "inset" | "margin" | "outline" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
220
+ properties: Set<"outline" | "borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignItems" | "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" | "flex" | "gap" | "inset" | "margin" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
221
221
  };
222
222
 
223
223
  type Atoms = Parameters<typeof atoms>[0];
@@ -243,20 +243,11 @@ type PaddingAtoms = {
243
243
  };
244
244
  type MarginAndPaddingAtoms = MarginAtoms & PaddingAtoms;
245
245
 
246
- declare const breakpoints: {
247
- readonly mobile: 0;
248
- readonly tablet: 740;
249
- readonly desktop: 992;
250
- readonly wide: 1200;
251
- };
252
- type Breakpoint = keyof typeof breakpoints;
253
- declare const breakpointQuery: (key: Breakpoint) => string;
254
-
255
- type Theme = {
246
+ type Theme$1 = {
256
247
  type: string;
257
248
  variants?: Record<string, string | boolean>;
258
249
  };
259
- type CreateComponentTheme<T extends Theme> = {
250
+ type CreateComponentTheme<T extends Theme$1> = {
260
251
  type: T['type'];
261
252
  base?: string;
262
253
  variants?: {
@@ -345,8 +336,8 @@ type ButtonProps = {
345
336
  declare const Button: react.ForwardRefExoticComponent<{
346
337
  children: ReactNode;
347
338
  type?: "button" | "submit" | "reset" | undefined;
348
- variant?: "link" | "outline" | "solid" | "ghost" | undefined;
349
- intent?: "danger" | "neutral" | undefined;
339
+ variant?: "solid" | "outline" | "ghost" | "link" | undefined;
340
+ intent?: "neutral" | "danger" | undefined;
350
341
  size?: "small" | "medium" | "large" | undefined;
351
342
  width?: Atoms['width'];
352
343
  loading?: boolean | undefined;
@@ -439,14 +430,65 @@ type SpinnerProps = {
439
430
  } & MarginAtoms;
440
431
  declare const Spinner: FC<SpinnerProps>;
441
432
 
433
+ declare const breakpoints: {
434
+ readonly mobile: 0;
435
+ readonly tablet: 740;
436
+ readonly desktop: 992;
437
+ readonly wide: 1200;
438
+ };
439
+ type Breakpoint = keyof typeof breakpoints;
440
+ declare const breakpointQuery: (key: Breakpoint) => string;
441
+
442
+ type FontWeight = 'regular' | 'medium' | 'strong';
443
+ type Space = 'none' | 'gutter' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
444
+ type Transition = 'slow' | 'normal' | 'fast';
445
+ type BorderRadius = 'small' | 'medium' | 'large' | 'xlarge';
446
+ type BorderWidth = 'small' | 'medium' | 'large';
447
+ type BoxShadow = 'small' | 'medium' | 'large';
448
+ type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
449
+ type LineHeight = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
450
+ type Color = 'white' | 'black' | 'body' | 'primaryLight' | 'primary' | 'primaryDark' | 'secondaryLight' | 'secondary' | 'secondaryDark' | 'text' | 'textLight' | 'textDark' | 'danger' | 'link';
451
+ type BlocksTokens = {
452
+ typography: {
453
+ fontFamily: {
454
+ standard: string;
455
+ secondary?: string;
456
+ };
457
+ fontSize: Record<FontSize, number | string>;
458
+ fontWeight: Record<FontWeight, 400 | 500 | 600 | 700 | 800>;
459
+ lineHeight: Record<LineHeight, number | string>;
460
+ };
461
+ spacing: Record<Space, number | string>;
462
+ transition: Record<Transition, string>;
463
+ border: {
464
+ radius: Record<BorderRadius, number | string>;
465
+ width: Record<BorderWidth, number | string>;
466
+ };
467
+ shadow: Record<BoxShadow, string>;
468
+ focus: {
469
+ boxShadow: string;
470
+ };
471
+ color: Record<Color, string>;
472
+ };
473
+
474
+ type Theme = {
475
+ name: string;
476
+ tokens: BlocksTokens;
477
+ components: ComponentThemesMap;
478
+ };
479
+ declare const makeTheme: (theme: Theme) => {
480
+ vars: string;
481
+ components: ComponentThemesMap;
482
+ };
483
+
442
484
  declare const vars: {
443
485
  space: {
444
- none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
445
- gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
446
- xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
447
486
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
448
487
  medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
449
488
  large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
489
+ none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
490
+ gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
491
+ xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
450
492
  xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
451
493
  };
452
494
  borderRadius: {
@@ -456,20 +498,20 @@ declare const vars: {
456
498
  xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
457
499
  };
458
500
  color: {
501
+ link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
502
+ danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
503
+ primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
504
+ secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
459
505
  white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
460
506
  black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
461
507
  body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
462
508
  primaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
463
- primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
464
509
  primaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
465
510
  secondaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
466
- secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
467
511
  secondaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
468
512
  text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
469
513
  textLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
470
514
  textDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
471
- danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
472
- link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
473
515
  };
474
516
  borderWidth: {
475
517
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -481,10 +523,10 @@ declare const vars: {
481
523
  standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
482
524
  };
483
525
  fontSize: {
484
- xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
485
526
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
486
527
  medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
487
528
  large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
529
+ xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
488
530
  xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
489
531
  };
490
532
  fontWeight: {
@@ -493,10 +535,10 @@ declare const vars: {
493
535
  strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
494
536
  };
495
537
  lineHeight: {
496
- xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
497
538
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
498
539
  medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
499
540
  large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
541
+ xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
500
542
  xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
501
543
  };
502
544
  transition: {
@@ -522,4 +564,4 @@ declare const momotaro: {
522
564
  components: ComponentThemesMap;
523
565
  };
524
566
 
525
- export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, breakpointQuery, classnames, momotaro, vars };
567
+ export { BlocksProvider, BlocksProviderProps, BlocksTokens, Box, BoxProps, Button, ButtonProps, ComponentThemesMap, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, breakpointQuery, classnames, makeTheme, momotaro, vars };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockle/blocks",
3
- "version": "0.3.1",
3
+ "version": "0.3.2",
4
4
  "description": "Blocks design system",
5
5
  "repository": "git@github.com:Blockle/blocks.git",
6
6
  "license": "MIT",