@blockle/blocks 0.3.0 → 0.3.1

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,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const styles_lib_css_theme_vars_css_cjs = require("./styles/lib/css/theme/vars.css.cjs");
4
+ const styles_lib_css_atoms_breakpoints_cjs = require("./styles/lib/css/atoms/breakpoints.cjs");
4
5
  const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
5
6
  const jsxRuntime = require("react/jsx-runtime");
6
7
  const react = require("react");
@@ -265,6 +266,7 @@ const Link = react.forwardRef(function Link2({ as, className, variant, underline
265
266
  return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
266
267
  });
267
268
  exports.vars = styles_lib_css_theme_vars_css_cjs.vars;
269
+ exports.breakpointQuery = styles_lib_css_atoms_breakpoints_cjs.breakpointQuery;
268
270
  exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
269
271
  exports.BlocksProvider = BlocksProvider;
270
272
  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, classnames, vars } from './momotaro.chunk.js';
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';
package/dist/index.mjs CHANGED
@@ -1,6 +1,7 @@
1
1
  'use client';
2
2
 
3
3
  import { vars } from "./styles/lib/css/theme/vars.css.mjs";
4
+ import { breakpointQuery } from "./styles/lib/css/atoms/breakpoints.mjs";
4
5
  import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
5
6
  import { jsx, jsxs } from "react/jsx-runtime";
6
7
  import { createContext, forwardRef, useContext } from "react";
@@ -275,6 +276,7 @@ export {
275
276
  Stack,
276
277
  Text,
277
278
  atoms,
279
+ breakpointQuery,
278
280
  classnames,
279
281
  vars
280
282
  };
@@ -5,9 +5,9 @@ import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
5
5
 
6
6
  declare const atoms: ((props: {
7
7
  readonly backgroundColor?: ("white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link") | undefined;
8
- readonly borderRadius?: ("large" | "medium" | "small" | "xlarge") | undefined;
8
+ readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
9
9
  readonly bottom?: 0 | undefined;
10
- readonly boxShadow?: ("large" | "medium" | "small") | undefined;
10
+ readonly boxShadow?: ("small" | "medium" | "large") | undefined;
11
11
  readonly color?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
12
12
  readonly cursor?: "auto" | "pointer" | undefined;
13
13
  readonly fontFamily?: "secondary" | "standard" | undefined;
@@ -15,7 +15,7 @@ declare const atoms: ((props: {
15
15
  readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
16
16
  readonly height?: "auto" | "full" | undefined;
17
17
  readonly left?: 0 | undefined;
18
- readonly lineHeight?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
18
+ readonly lineHeight?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
19
19
  readonly maxHeight?: "full" | undefined;
20
20
  readonly maxWidth?: "full" | undefined;
21
21
  readonly opacity?: 0 | 1 | undefined;
@@ -28,7 +28,7 @@ declare const atoms: ((props: {
28
28
  readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
29
29
  readonly textWrap?: "balance" | "wrap" | undefined;
30
30
  readonly top?: 0 | undefined;
31
- readonly transition?: ("normal" | "slow" | "fast") | undefined;
31
+ readonly transition?: ("slow" | "normal" | "fast") | undefined;
32
32
  readonly userSelect?: "none" | undefined;
33
33
  readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
34
34
  readonly width?: "auto" | "fit-content" | "full" | 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<2 | 1 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
45
- readonly columnGap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
46
- mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
47
- tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
48
- desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
49
- wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
50
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
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>;
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<2 | 1 | 3 | 4, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
56
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "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<2 | 1 | 3 | 4, 1 | null>;
62
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 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<2 | 1 | 3 | 4, "row" | "row-reverse" | "column" | "column-reverse" | null>;
68
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "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<2 | 1 | 3 | 4, 0 | 1 | null>;
74
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 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<2 | 1 | 3 | 4, 0 | 1 | null>;
80
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
81
81
  readonly flexWrap?: ("nowrap" | "wrap" | {
82
82
  mobile?: "nowrap" | "wrap" | undefined;
83
83
  tablet?: "nowrap" | "wrap" | undefined;
84
84
  desktop?: "nowrap" | "wrap" | undefined;
85
85
  wide?: "nowrap" | "wrap" | undefined;
86
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "nowrap" | "wrap" | null>;
87
- readonly fontSize?: (("large" | "medium" | "small" | "xsmall" | "xlarge") | {
88
- mobile?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
89
- tablet?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
90
- desktop?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
91
- wide?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
92
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("large" | "medium" | "small" | "xsmall" | "xlarge") | null>;
93
- readonly gap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
94
- mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
95
- tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
96
- desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
97
- wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
98
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
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>;
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<2 | 1 | 3 | 4, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
105
- readonly marginBottom?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
106
- mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
107
- tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
108
- desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
109
- wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
110
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
111
- readonly marginLeft?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
112
- mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
113
- tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
114
- desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
115
- wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
116
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
117
- readonly marginRight?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
118
- mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
119
- tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
120
- desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
121
- wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
122
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
123
- readonly marginTop?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
124
- mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
125
- tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
126
- desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
127
- wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
128
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
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>;
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<2 | 1 | 3 | 4, "none" | null>;
135
- readonly paddingBottom?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
136
- mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
137
- tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
138
- desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
139
- wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
140
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
141
- readonly paddingLeft?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
142
- mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
143
- tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
144
- desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
145
- wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
146
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
147
- readonly paddingRight?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
148
- mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
149
- tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
150
- desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
151
- wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
152
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
153
- readonly paddingTop?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
154
- mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
155
- tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
156
- desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
157
- wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
158
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
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>;
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<2 | 1 | 3 | 4, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
165
- readonly rowGap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
166
- mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
167
- tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
168
- desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
169
- wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
170
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
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>;
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<2 | 1 | 3 | 4, "left" | "right" | "center" | "justify" | null>;
177
- margin?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
178
- mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
179
- tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
180
- desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
181
- wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
182
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
183
- marginX?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
184
- mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
185
- tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
186
- desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
187
- wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
188
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
189
- marginY?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
190
- mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
191
- tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
192
- desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
193
- wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
194
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
195
- padding?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
196
- mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
197
- tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
198
- desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
199
- wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
200
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
201
- paddingX?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
202
- mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
203
- tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
204
- desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
205
- wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
206
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
207
- paddingY?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
208
- mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
209
- tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
210
- desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
211
- wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
212
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
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>;
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<2 | 1 | 3 | 4, "center" | "flex-start" | "flex-end" | null>;
218
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
219
219
  }) => string) & {
220
- properties: Set<"alignItems" | "backgroundColor" | "bottom" | "boxShadow" | "color" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "height" | "justifyContent" | "left" | "lineHeight" | "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" | "borderRadius" | "flex" | "gap" | "inset" | "margin" | "outline" | "overflow" | "padding" | "placeItems" | "textDecoration" | "transition" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
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">;
221
221
  };
222
222
 
223
223
  type Atoms = Parameters<typeof atoms>[0];
@@ -243,6 +243,15 @@ 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
+
246
255
  type Theme = {
247
256
  type: string;
248
257
  variants?: Record<string, string | boolean>;
@@ -336,9 +345,9 @@ type ButtonProps = {
336
345
  declare const Button: react.ForwardRefExoticComponent<{
337
346
  children: ReactNode;
338
347
  type?: "button" | "submit" | "reset" | undefined;
339
- variant?: "outline" | "link" | "solid" | "ghost" | undefined;
348
+ variant?: "link" | "outline" | "solid" | "ghost" | undefined;
340
349
  intent?: "danger" | "neutral" | undefined;
341
- size?: "large" | "medium" | "small" | undefined;
350
+ size?: "small" | "medium" | "large" | undefined;
342
351
  width?: Atoms['width'];
343
352
  loading?: boolean | undefined;
344
353
  startSlot?: ReactNode;
@@ -433,17 +442,17 @@ declare const Spinner: FC<SpinnerProps>;
433
442
  declare const vars: {
434
443
  space: {
435
444
  none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
436
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
437
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
438
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
439
445
  gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
440
446
  xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
447
+ small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
448
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
449
+ large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
441
450
  xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
442
451
  };
443
452
  borderRadius: {
444
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
445
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
446
453
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
454
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
455
+ large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
447
456
  xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
448
457
  };
449
458
  color: {
@@ -463,19 +472,19 @@ declare const vars: {
463
472
  link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
464
473
  };
465
474
  borderWidth: {
466
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
467
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
468
475
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
476
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
477
+ large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
469
478
  };
470
479
  fontFamily: {
471
480
  secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
472
481
  standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
473
482
  };
474
483
  fontSize: {
475
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
476
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
477
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
478
484
  xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
485
+ small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
486
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
487
+ large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
479
488
  xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
480
489
  };
481
490
  fontWeight: {
@@ -484,21 +493,21 @@ declare const vars: {
484
493
  strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
485
494
  };
486
495
  lineHeight: {
487
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
488
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
489
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
490
496
  xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
497
+ small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
498
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
499
+ large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
491
500
  xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
492
501
  };
493
502
  transition: {
494
- normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
495
503
  slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
504
+ normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
496
505
  fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
497
506
  };
498
507
  shadow: {
499
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
500
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
501
508
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
509
+ medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
510
+ large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
502
511
  };
503
512
  focus: {
504
513
  boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -513,4 +522,4 @@ declare const momotaro: {
513
522
  components: ComponentThemesMap;
514
523
  };
515
524
 
516
- export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, classnames, momotaro, vars };
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 };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockle/blocks",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "description": "Blocks design system",
5
5
  "repository": "git@github.com:Blockle/blocks.git",
6
6
  "license": "MIT",