@blockle/blocks 0.2.3 → 0.3.1

package/dist/momotaro.chunk.d.ts

@@ -1,21 +1,14 @@
 import { ForwardRefComponent } from '@radix-ui/react-polymorphic';
+import * as react from 'react';
+import { HTMLProps, ReactNode, FC } from 'react';
 import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
-import { HTMLProps } from 'react';
-
-type BlocksProviderProps = {
-    children: React.ReactNode;
-    theme: {
-        vars: string;
-    };
-};
-declare const BlocksProvider: React.FC<BlocksProviderProps>;
 
 declare const atoms: ((props: {
-    readonly backgroundColor?: ("white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "caution" | "link") | undefined;
+    readonly backgroundColor?: ("white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link") | undefined;
     readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
     readonly bottom?: 0 | undefined;
     readonly boxShadow?: ("small" | "medium" | "large") | undefined;
-    readonly color?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "caution" | "link" | "currentColor" | undefined;
+    readonly color?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
     readonly cursor?: "auto" | "pointer" | undefined;
     readonly fontFamily?: "secondary" | "standard" | undefined;
     readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
@@ -48,183 +41,183 @@ declare const atoms: ((props: {
         tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
     readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
         mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
         tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
         desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
         wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
     readonly flex?: (1 | {
         mobile?: 1 | undefined;
         tablet?: 1 | undefined;
         desktop?: 1 | undefined;
         wide?: 1 | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 1 | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 1 | null>;
     readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
         mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
         tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
         desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
         wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "row" | "row-reverse" | "column" | "column-reverse" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
     readonly flexGrow?: (0 | 1 | {
         mobile?: 0 | 1 | undefined;
         tablet?: 0 | 1 | undefined;
         desktop?: 0 | 1 | undefined;
         wide?: 0 | 1 | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
     readonly flexShrink?: (0 | 1 | {
         mobile?: 0 | 1 | undefined;
         tablet?: 0 | 1 | undefined;
         desktop?: 0 | 1 | undefined;
         wide?: 0 | 1 | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
     readonly flexWrap?: ("nowrap" | "wrap" | {
         mobile?: "nowrap" | "wrap" | undefined;
         tablet?: "nowrap" | "wrap" | undefined;
         desktop?: "nowrap" | "wrap" | undefined;
         wide?: "nowrap" | "wrap" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "nowrap" | "wrap" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "nowrap" | "wrap" | null>;
     readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
         mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
         tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
         desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
         wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
     readonly marginBottom?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     readonly marginLeft?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     readonly marginRight?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     readonly marginTop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     readonly outline?: ("none" | {
         mobile?: "none" | undefined;
         tablet?: "none" | undefined;
         desktop?: "none" | undefined;
         wide?: "none" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
     readonly paddingBottom?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly paddingLeft?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly paddingRight?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly paddingTop?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
         mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
         tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
         desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
         wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
     readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly textAlign?: ("left" | "right" | "center" | "justify" | {
         mobile?: "left" | "right" | "center" | "justify" | undefined;
         tablet?: "left" | "right" | "center" | "justify" | undefined;
         desktop?: "left" | "right" | "center" | "justify" | undefined;
         wide?: "left" | "right" | "center" | "justify" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "left" | "right" | "center" | "justify" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
     margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     marginX?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     marginY?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     paddingX?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     paddingY?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     placeItems?: ("center" | "flex-start" | "flex-end" | {
         mobile?: "center" | "flex-start" | "flex-end" | undefined;
         tablet?: "center" | "flex-start" | "flex-end" | undefined;
         desktop?: "center" | "flex-start" | "flex-end" | undefined;
         wide?: "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
 }) => string) & {
-    properties: Set<"borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "alignItems" | "backgroundColor" | "bottom" | "boxShadow" | "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">;
+    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">;
 };
 
 type Atoms = Parameters<typeof atoms>[0];
@@ -250,6 +243,84 @@ type PaddingAtoms = {
 };
 type MarginAndPaddingAtoms = MarginAtoms & PaddingAtoms;
 
+declare const breakpoints: {
+    readonly mobile: 0;
+    readonly tablet: 740;
+    readonly desktop: 992;
+    readonly wide: 1200;
+};
+type Breakpoint = keyof typeof breakpoints;
+declare const breakpointQuery: (key: Breakpoint) => string;
+
+type Theme = {
+    type: string;
+    variants?: Record<string, string | boolean>;
+};
+type CreateComponentTheme<T extends Theme> = {
+    type: T['type'];
+    base?: string;
+    variants?: {
+        [VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup] extends string ? {
+            [Variant in T['variants'][VariantGroup]]?: string;
+        } : string;
+    };
+    compoundVariants?: Array<{
+        style: string;
+        variants: {
+            [VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup];
+        };
+    }>;
+    defaultVariants?: {
+        [VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup] extends string ? T['variants'][VariantGroup] : boolean;
+    };
+};
+
+type ButtonTheme = {
+    type: 'button';
+    variants: {
+        variant: 'solid' | 'outline' | 'ghost' | 'link';
+        intent: 'neutral' | 'danger';
+        size: 'small' | 'medium' | 'large';
+    };
+};
+type ButtonThemeComponent = CreateComponentTheme<ButtonTheme>;
+type LinkTheme = {
+    type: 'link';
+    variants: {
+        variant: 'inherit' | 'primary' | 'secondary';
+        underline: boolean;
+    };
+};
+type LinkThemeComponent = CreateComponentTheme<LinkTheme>;
+type SpinnerTheme = {
+    type: 'spinner';
+    variants: {
+        size: 'small' | 'medium' | 'large';
+        color: Exclude<Atoms['color'], undefined>;
+    };
+};
+type SpinnerThemeComponent = CreateComponentTheme<SpinnerTheme>;
+type ComponentThemes = ButtonThemeComponent | LinkThemeComponent | SpinnerThemeComponent;
+type ComponentThemesMap = UnionThemesToRecord<ComponentThemes>;
+type UnionThemesToRecord<T extends {
+    type: string;
+}> = {
+    [P in T['type']]: Omit<Extract<T, {
+        type: P;
+    }>, 'type'>;
+};
+
+type BlocksProviderContextData = {
+    vars: string;
+    components: ComponentThemesMap;
+};
+
+type BlocksProviderProps = {
+    children: React.ReactNode;
+    theme: BlocksProviderContextData;
+};
+declare const BlocksProvider: React.FC<BlocksProviderProps>;
+
 type BoxProps = {
     children?: React.ReactNode;
     className?: string;
@@ -259,6 +330,31 @@ declare const Box: PolymorphicBox;
 
 type HTMLElementProps<E extends Element> = Omit<HTMLProps<E>, keyof Atoms | 'as' | 'ref'>;
 
+type ButtonProps = {
+    children: ReactNode;
+    type?: 'button' | 'submit' | 'reset';
+    variant?: ButtonTheme['variants']['variant'];
+    intent?: ButtonTheme['variants']['intent'];
+    size?: ButtonTheme['variants']['size'];
+    width?: Atoms['width'];
+    loading?: boolean;
+    startSlot?: ReactNode;
+    endSlot?: ReactNode;
+    disabled?: boolean;
+} & Omit<HTMLElementProps<HTMLButtonElement>, 'size'>;
+declare const Button: react.ForwardRefExoticComponent<{
+    children: ReactNode;
+    type?: "button" | "submit" | "reset" | undefined;
+    variant?: "link" | "outline" | "solid" | "ghost" | undefined;
+    intent?: "danger" | "neutral" | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    width?: Atoms['width'];
+    loading?: boolean | undefined;
+    startSlot?: ReactNode;
+    endSlot?: ReactNode;
+    disabled?: boolean | undefined;
+} & Omit<HTMLElementProps<HTMLButtonElement>, "size"> & react.RefAttributes<HTMLButtonElement>>;
+
 type HeadingProps = {
     className?: string;
     level: 1 | 2 | 3 | 4 | 5 | 6;
@@ -327,6 +423,22 @@ type TextProps = {
 } & MarginAndPaddingAtoms & HTMLElementProps<HTMLSpanElement>;
 declare const Text: React.FC<TextProps>;
 
+type LinkProps = {
+    variant: LinkTheme['variants']['variant'];
+    underline?: LinkTheme['variants']['underline'];
+    children?: ReactNode;
+    className?: string;
+} & Atoms & HTMLElementProps<HTMLAnchorElement>;
+type PolymorphicLink = ForwardRefComponent<'a', LinkProps>;
+declare const Link: PolymorphicLink;
+
+type SpinnerProps = {
+    className?: string;
+    size?: SpinnerTheme['variants']['size'];
+    color?: SpinnerTheme['variants']['color'];
+} & MarginAtoms;
+declare const Spinner: FC<SpinnerProps>;
+
 declare const vars: {
     space: {
         none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -356,7 +468,7 @@ declare const vars: {
         text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         textLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         textDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        caution: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     borderWidth: {
@@ -397,6 +509,9 @@ declare const vars: {
         medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
+    focus: {
+        boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
 };
 
 type Args = null | undefined | boolean | string;
@@ -404,7 +519,7 @@ declare const classnames: (...args: Args[]) => string | undefined;
 
 declare const momotaro: {
     vars: string;
-    components: Record<string, any>;
+    components: ComponentThemesMap;
 };
 
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Heading, HeadingProps, Inline, InlineProps, Stack, StackProps, Text, TextProps, atoms, classnames, momotaro, vars };
+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/dist/reset.css.cjs

@@ -1,5 +1,4 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-require("./styles/lib/css/reset/reset.css.cjs");
 fileScope.setFileScope("src/entries/reset.css.ts", "blocks");
 fileScope.endFileScope();

package/dist/reset.css.mjs

@@ -1,4 +1,3 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import "./styles/lib/css/reset/reset.css.mjs";
 setFileScope("src/entries/reset.css.ts", "blocks");
 endFileScope();

package/dist/styles/components/Button/Button.css.cjs

@@ -0,0 +1,15 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_layers_layers_css_cjs = require("../../lib/css/layers/layers.css.cjs");
+fileScope.setFileScope("src/components/Button/Button.css.ts?used", "blocks");
+const buttonReset = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      all: "unset",
+      cursor: "pointer"
+    }
+  }
+}, "buttonReset");
+fileScope.endFileScope();
+exports.buttonReset = buttonReset;

package/dist/styles/components/Button/Button.css.mjs

@@ -0,0 +1,16 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/Button/Button.css.ts?used", "blocks");
+const buttonReset = style({
+  "@layer": {
+    [blocksLayer]: {
+      all: "unset",
+      cursor: "pointer"
+    }
+  }
+}, "buttonReset");
+endFileScope();
+export {
+  buttonReset
+};

package/dist/styles/lib/css/atoms/index.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/styles/lib/css/atoms/index.mjs

@@ -0,0 +1 @@
+

package/dist/styles/lib/css/layers/layers.css.cjs

@@ -0,0 +1,7 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+fileScope.setFileScope("src/lib/css/layers/layers.css.ts?used", "blocks");
+const blocksLayer = css.layer("blockle-blocks");
+fileScope.endFileScope();
+exports.blocksLayer = blocksLayer;

package/dist/styles/lib/css/layers/layers.css.mjs

@@ -0,0 +1,8 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { layer } from "@vanilla-extract/css";
+setFileScope("src/lib/css/layers/layers.css.ts?used", "blocks");
+const blocksLayer = layer("blockle-blocks");
+endFileScope();
+export {
+  blocksLayer
+};

package/dist/styles/lib/css/reset/reset.css.cjs

@@ -1,37 +1 @@
 "use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-fileScope.setFileScope("src/lib/css/reset/reset.css.ts?used", "blocks");
-css.globalStyle(":where(*, *::before, *::after)", {
-  boxSizing: "inherit"
-});
-css.globalStyle(":where(html)", {
-  lineHeight: 1.5,
-  boxSizing: "border-box",
-  WebkitFontSmoothing: "antialiased"
-});
-css.globalStyle(":where(body)", {
-  margin: 0,
-  padding: 0,
-  fontFamily: "Calibri, sans-serif"
-});
-css.globalStyle(":where(button, input, optgroup, select, textarea)", {
-  fontFamily: "inherit",
-  fontSize: "100%",
-  lineHeight: "inherit",
-  margin: 0,
-  padding: 0
-});
-css.globalStyle(":where(p, ul, ol, pre, blockquote)", {
-  margin: 0,
-  padding: 0
-});
-css.globalStyle(":where(h1, h2, h3, h4, h5, h6)", {
-  margin: 0,
-  padding: 0,
-  fontSize: "inherit"
-});
-css.globalStyle(":where(pre)", {
-  whiteSpace: "pre-wrap"
-});
-fileScope.endFileScope();

package/dist/styles/lib/css/reset/reset.css.mjs

@@ -1,36 +1 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { globalStyle } from "@vanilla-extract/css";
-setFileScope("src/lib/css/reset/reset.css.ts?used", "blocks");
-globalStyle(":where(*, *::before, *::after)", {
-  boxSizing: "inherit"
-});
-globalStyle(":where(html)", {
-  lineHeight: 1.5,
-  boxSizing: "border-box",
-  WebkitFontSmoothing: "antialiased"
-});
-globalStyle(":where(body)", {
-  margin: 0,
-  padding: 0,
-  fontFamily: "Calibri, sans-serif"
-});
-globalStyle(":where(button, input, optgroup, select, textarea)", {
-  fontFamily: "inherit",
-  fontSize: "100%",
-  lineHeight: "inherit",
-  margin: 0,
-  padding: 0
-});
-globalStyle(":where(p, ul, ol, pre, blockquote)", {
-  margin: 0,
-  padding: 0
-});
-globalStyle(":where(h1, h2, h3, h4, h5, h6)", {
-  margin: 0,
-  padding: 0,
-  fontSize: "inherit"
-});
-globalStyle(":where(pre)", {
-  whiteSpace: "pre-wrap"
-});
-endFileScope();
+

package/dist/styles/lib/css/theme/makeVanillaTheme.cjs

@@ -1,7 +1,7 @@
 "use strict";
 const makeVanillaTheme = (tokens) => {
   return {
-    space: tokens.space,
+    space: tokens.spacing,
     borderRadius: tokens.border.radius,
     color: tokens.color,
     borderWidth: tokens.border.width,
@@ -10,7 +10,10 @@ const makeVanillaTheme = (tokens) => {
     fontWeight: tokens.typography.fontWeight,
     lineHeight: tokens.typography.lineHeight,
     transition: tokens.transition,
-    shadow: tokens.shadow
+    shadow: tokens.shadow,
+    focus: {
+      boxShadow: tokens.focus.boxShadow
+    }
   };
 };
 exports.makeVanillaTheme = makeVanillaTheme;

package/dist/styles/lib/css/theme/makeVanillaTheme.mjs

@@ -1,6 +1,6 @@
 const makeVanillaTheme = (tokens) => {
   return {
-    space: tokens.space,
+    space: tokens.spacing,
     borderRadius: tokens.border.radius,
     color: tokens.color,
     borderWidth: tokens.border.width,
@@ -9,7 +9,10 @@ const makeVanillaTheme = (tokens) => {
     fontWeight: tokens.typography.fontWeight,
     lineHeight: tokens.typography.lineHeight,
     transition: tokens.transition,
-    shadow: tokens.shadow
+    shadow: tokens.shadow,
+    focus: {
+      boxShadow: tokens.focus.boxShadow
+    }
   };
 };
 export {