@blockle/blocks 0.5.1 → 0.7.0

package/dist/momotaro.chunk.d.ts

@@ -4,20 +4,20 @@ import { HTMLProps, ReactNode, FC } from 'react';
 import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
 
 declare const atoms: ((props: {
-    readonly backgroundColor?: "link" | "danger" | "primary" | "secondary" | "white" | "black" | "body" | "primaryLight" | "primaryDark" | "secondaryLight" | "secondaryDark" | "text" | "textLight" | "textDark" | "currentColor" | undefined;
-    readonly borderColor?: "link" | "danger" | "primary" | "secondary" | "white" | "black" | "body" | "primaryLight" | "primaryDark" | "secondaryLight" | "secondaryDark" | "text" | "textLight" | "textDark" | "currentColor" | undefined;
+    readonly backgroundColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
+    readonly borderColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
     readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
     readonly border?: "none" | undefined;
     readonly bottom?: 0 | undefined;
     readonly boxShadow?: ("small" | "medium" | "large") | undefined;
-    readonly color?: "link" | "danger" | "primary" | "secondary" | "white" | "black" | "body" | "primaryLight" | "primaryDark" | "secondaryLight" | "secondaryDark" | "text" | "textLight" | "textDark" | "currentColor" | undefined;
+    readonly color?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
     readonly cursor?: "auto" | "pointer" | undefined;
-    readonly fontFamily?: "primary" | "secondary" | undefined;
+    readonly fontFamily?: "body" | "primary" | "secondary" | undefined;
     readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
     readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
     readonly height?: "auto" | "full" | undefined;
     readonly left?: 0 | undefined;
-    readonly lineHeight?: ("small" | "medium" | "large" | "xsmall" | "xlarge") | undefined;
+    readonly lineHeight?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
     readonly maxHeight?: "full" | undefined;
     readonly maxWidth?: "full" | undefined;
     readonly opacity?: 0 | 1 | undefined;
@@ -26,13 +26,13 @@ declare const atoms: ((props: {
     readonly overflowY?: "auto" | "hidden" | "scroll" | "visible" | undefined;
     readonly pointerEvents?: "none" | undefined;
     readonly right?: 0 | undefined;
-    readonly textDecoration?: "underline" | "none" | "overline" | "line-through" | undefined;
+    readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
     readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
     readonly textWrap?: "balance" | "wrap" | undefined;
     readonly top?: 0 | undefined;
     readonly transition?: ("slow" | "normal" | "fast") | undefined;
     readonly userSelect?: "none" | undefined;
-    readonly whiteSpace?: "nowrap" | "pre" | "pre-line" | "pre-wrap" | undefined;
+    readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
     readonly width?: "auto" | "fit-content" | "full" | undefined;
     readonly wordBreak?: "break-word" | undefined;
     readonly wordWrap?: "break-word" | undefined;
@@ -43,195 +43,195 @@ 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<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
     readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
         mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         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<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
     readonly alignSelf?: ("stretch" | "center" | "flex-start" | "flex-end" | {
         mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         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<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
-    readonly columnGap?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
-        mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 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<4 | 2 | 1 | 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<4 | 1 | 2 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 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<4 | 1 | 2 | 3, 1 | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 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<4 | 1 | 2 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 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<4 | 1 | 2 | 3, 0 | 1 | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 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<4 | 1 | 2 | 3, 0 | 1 | null>;
-    readonly flexWrap?: ("wrap" | "nowrap" | {
-        mobile?: "wrap" | "nowrap" | undefined;
-        tablet?: "wrap" | "nowrap" | undefined;
-        desktop?: "wrap" | "nowrap" | undefined;
-        wide?: "wrap" | "nowrap" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "wrap" | "nowrap" | null>;
-    readonly fontSize?: (("small" | "medium" | "large" | "xsmall" | "xlarge") | {
-        mobile?: ("small" | "medium" | "large" | "xsmall" | "xlarge") | undefined;
-        tablet?: ("small" | "medium" | "large" | "xsmall" | "xlarge") | undefined;
-        desktop?: ("small" | "medium" | "large" | "xsmall" | "xlarge") | undefined;
-        wide?: ("small" | "medium" | "large" | "xsmall" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "xsmall" | "xlarge") | null>;
-    readonly gap?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
-        mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 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<4 | 2 | 1 | 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<4 | 2 | 1 | 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<4 | 2 | 1 | 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<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
-    readonly marginBottom?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
-        mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
-    readonly marginLeft?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
-        mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
-    readonly marginRight?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
-        mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
-    readonly marginTop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
-        mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 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<4 | 2 | 1 | 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<4 | 2 | 1 | 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<4 | 2 | 1 | 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<4 | 2 | 1 | 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<4 | 1 | 2 | 3, "none" | null>;
-    readonly paddingBottom?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
-        mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
-    readonly paddingLeft?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
-        mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
-    readonly paddingRight?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
-        mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
-    readonly paddingTop?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
-        mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 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<4 | 2 | 1 | 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<4 | 2 | 1 | 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<4 | 2 | 1 | 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<4 | 2 | 1 | 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<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
-    readonly rowGap?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
-        mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 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<4 | 2 | 1 | 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<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
-    margin?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
-        mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
-    marginX?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
-        mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
-    marginY?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
-        mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-        wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
-    padding?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
-        mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
-    paddingX?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
-        mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
-    paddingY?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
-        mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-        wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 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<4 | 2 | 1 | 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<4 | 2 | 1 | 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<4 | 2 | 1 | 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<4 | 2 | 1 | 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<4 | 2 | 1 | 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<4 | 2 | 1 | 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<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | null>;
 }) => string) & {
-    properties: Set<"outline" | "borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "bottom" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "height" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "rowGap" | "textAlign" | "textTransform" | "top" | "userSelect" | "whiteSpace" | "width" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "flex" | "gap" | "inset" | "margin" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
+    properties: Set<"borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "bottom" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "height" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "rowGap" | "textAlign" | "textTransform" | "top" | "userSelect" | "whiteSpace" | "width" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "flex" | "gap" | "inset" | "margin" | "outline" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
 };
 
 declare const breakpoints: {
@@ -243,6 +243,12 @@ declare const breakpoints: {
 type Breakpoint = keyof typeof breakpoints;
 declare const breakpointQuery: (key: Breakpoint) => string;
 
+/**
+ * Suggest a type for a string literal but also allow any string.
+ */
+type OptionalLiteral<T extends string> = T | (string & {});
+type RecordLike = Record<string | number, unknown>;
+
 type Atoms = Parameters<typeof atoms>[0];
 type ResponsiveValue<T> = T | [T] | [T, T] | [T, T, T] | [T, T, T, T];
 type ResponsiveDisplayFlex = ResponsiveValue<'none' | 'flex' | 'inline-flex'>;
@@ -266,93 +272,141 @@ type PaddingAtoms = {
 };
 type MarginAndPaddingAtoms = MarginAtoms & PaddingAtoms;
 
-type Theme$1 = {
-    type: string;
-    variants?: Record<string, string | boolean>;
-};
-type CreateComponentTheme<T extends Theme$1> = {
-    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] extends string ? T['variants'][VariantGroup] : boolean;
-        };
-    }>;
-    defaultVariants?: {
-        [VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup] extends string ? T['variants'][VariantGroup] : boolean;
-    };
-};
-type CreateThemeProps<T extends Theme$1> = {
-    [K in keyof T['variants']]?: T['variants'][K] extends string ? T['variants'][K] : boolean;
-} & {
-    type: T['type'];
-    base?: boolean;
-};
-declare const makeComponentTheme: <T extends "button" | "link" | "spinner" | "divider" | "dialog", const O extends ComponentThemesMap[T]>(name: T, options: O) => O;
-
 type ButtonTheme = {
-    type: 'button';
-    base: boolean;
+    base: string;
     variants: {
-        variant: 'solid' | 'outline' | 'ghost' | 'link';
+        variant: 'solid' | 'outline' | 'ghost';
         intent: 'neutral' | 'danger';
         size: 'small' | 'medium' | 'large';
         loading: boolean;
         disabled: boolean;
     };
 };
-type ButtonThemeProps = CreateThemeProps<ButtonTheme>;
-type ButtonThemeComponent = CreateComponentTheme<ButtonTheme>;
 type LinkTheme = {
-    type: 'link';
+    base: string;
     variants: {
         variant: 'inherit' | 'primary' | 'secondary';
         underline: boolean;
     };
 };
-type LinkThemeProps = CreateThemeProps<LinkTheme>;
-type LinkThemeComponent = CreateComponentTheme<LinkTheme>;
 type SpinnerTheme = {
-    type: 'spinner';
+    base: string;
     variants: {
         size: 'small' | 'medium' | 'large';
         color: Exclude<Atoms['color'], undefined>;
     };
 };
-type SpinnerThemeProps = CreateThemeProps<SpinnerTheme>;
-type SpinnerThemeComponent = CreateComponentTheme<SpinnerTheme>;
 type DividerTheme = {
-    type: 'divider';
+    base?: string;
     variants: {
         color: Exclude<Atoms['color'], undefined>;
     };
 };
-type DividerThemeProps = CreateThemeProps<DividerTheme>;
-type DividerThemeComponent = CreateComponentTheme<DividerTheme>;
 type DialogTheme = {
-    type: 'dialog';
+    base: string;
+    backdrop: string;
+    variants: {
+        size: 'small' | 'medium' | 'large';
+    };
+};
+type InputTheme = {
+    container: string;
+    input: string;
+    variants: {
+        variant: 'solid' | 'outline';
+        disabled: boolean;
+        required: boolean;
+    };
+};
+type CheckboxTheme = {
+    base: string;
+    icon: string;
+    label: string;
+    variants: {
+        required: boolean;
+    };
+};
+type RadioTheme = {
+    base: string;
+    icon: string;
+    label: string;
+};
+type LabelTheme = {
+    base: string;
+    variants: {
+        size: 'small' | 'medium' | 'large';
+        required: boolean;
+    };
+};
+type ComponentThemes = {
+    button: ButtonTheme;
+    link: LinkTheme;
+    spinner: SpinnerTheme;
+    divider: DividerTheme;
+    dialog: DialogTheme;
+    input: InputTheme;
+    checkbox: CheckboxTheme;
+    radio: RadioTheme;
+    label: LabelTheme;
+};
+/**
+ * ComponentThemeProps is a helper type to define the props passed to useComponentStyles.
+ */
+type ComponentThemeProps<T extends RecordLike> = Omit<{
+    [K in keyof T]?: Exclude<T[K], undefined> extends string ? boolean : never;
+}, 'variants'> & {
+    variants?: T['variants'] extends RecordLike ? Partial<T['variants']> : never;
+};
+type ComponentThemesProps = {
+    [K in keyof ComponentThemes]: ComponentThemeProps<ComponentThemes[K]>;
+};
+
+/**
+ * Helper generic to convert a component theme to a styles object
+ *
+ * export type ThemeIn = {
+ *  base: string;
+ *  variants: {
+ *    intent: 'neutral' | 'danger';
+ *    level?: 1 | 2;
+ *    loading: boolean;
+ *  };
+ * };
+ * export type ThemeOut = {
+ *  base: string;
+ *  variants: {
+ *    intent: Record<'neutral' | 'danger', string>;
+ *    level?: Record<1 | 2, string>;
+ *    loading: string;
+ *  };
+ * };
+ */
+type VariantsToStyle<T extends RecordLike> = {
+    [K in keyof T]?: T[K] extends string | number ? Partial<Record<T[K], string>> : T[K] extends boolean ? string : never;
+};
+/**
+ * ComponentThemeToStyles is a helper type to define the props passed to useComponentStyles.
+ */
+type ComponentThemeToStyles<T extends RecordLike> = Omit<T, 'variants'> & {
+    variants?: T['variants'] extends RecordLike ? VariantsToStyle<T['variants']> : never;
+};
+type ComponentThemeCompoundVariants<T extends RecordLike> = T['variants'] extends RecordLike ? {
     variants: {
-        backdrop: boolean;
+        [K in keyof T['variants']]?: T['variants'][K];
     };
+    style: string;
+}[] : never;
+type ComponentThemeDefaultVariants<T extends RecordLike> = T['variants'] extends RecordLike ? {
+    [K in keyof T['variants']]?: T['variants'][K];
+} : never;
+type ComponentTheme<T extends RecordLike> = ComponentThemeToStyles<T> & {
+    compoundVariants?: ComponentThemeCompoundVariants<T>;
+    defaultVariants?: ComponentThemeDefaultVariants<T>;
 };
-type DialogThemeProps = CreateThemeProps<DialogTheme>;
-type DialogThemeComponent = CreateComponentTheme<DialogTheme>;
-type ComponentThemeProps = UnionThemesToRecord<ButtonThemeProps | LinkThemeProps | SpinnerThemeProps | DividerThemeProps | DialogThemeProps>;
-type ComponentThemes = ButtonThemeComponent | LinkThemeComponent | SpinnerThemeComponent | DividerThemeComponent | DialogThemeComponent;
-type ComponentThemesMap = UnionThemesToRecord<ComponentThemes>;
-type UnionThemesToRecord<T extends {
-    type: string;
-}> = {
-    [P in T['type']]: Omit<Extract<T, {
-        type: P;
-    }>, 'type'>;
+type ThemeComponentsStyles = {
+    [K in keyof ComponentThemes]: ComponentTheme<ComponentThemes[K]>;
 };
+declare function makeComponentTheme<T extends keyof ThemeComponentsStyles>(component: T, componentTheme: ThemeComponentsStyles[T]): ThemeComponentsStyles[T];
 
 type FontWeight = 'regular' | 'medium' | 'strong';
 type Space = 'none' | 'gutter' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
@@ -363,9 +417,10 @@ type BoxShadow = 'small' | 'medium' | 'large';
 type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 type LineHeight = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 type Color = 'white' | 'black' | 'body' | 'primaryLight' | 'primary' | 'primaryDark' | 'secondaryLight' | 'secondary' | 'secondaryDark' | 'text' | 'textLight' | 'textDark' | 'danger' | 'link';
-type BlocksTokens = {
+type ThemeTokens = {
     typography: {
         fontFamily: {
+            body?: string;
             primary?: string;
             secondary?: string;
         };
@@ -386,24 +441,26 @@ type BlocksTokens = {
     color: Record<Color, string>;
 };
 
-type Theme = {
+type ThemeInput = {
     name: string;
-    tokens: BlocksTokens;
-    components: ComponentThemesMap;
+    tokens: ThemeTokens;
+    components: ThemeComponentsStyles;
 };
-declare const makeTheme: (theme: Theme) => {
+type Theme = {
+    name: string;
     vars: string;
-    components: ComponentThemesMap;
+    components: ThemeComponentsStyles;
 };
+declare function makeTheme(theme: ThemeInput): Theme;
 
 declare const vars: {
     space: {
-        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     borderRadius: {
@@ -414,19 +471,19 @@ declare const vars: {
     };
     color: {
         link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         primaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         primaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         secondaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         secondaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         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})`;
+        danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     borderWidth: {
         small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -434,14 +491,15 @@ declare const vars: {
         large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     fontFamily: {
+        body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     fontSize: {
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     fontWeight: {
@@ -450,10 +508,10 @@ declare const vars: {
         strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     lineHeight: {
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     transition: {
@@ -471,14 +529,11 @@ declare const vars: {
     };
 };
 
-type BlocksProviderContextData = {
-    vars: string;
-    components: ComponentThemesMap;
-};
-
 type BlocksProviderProps = {
     children: React.ReactNode;
-    theme: BlocksProviderContextData;
+    theme: Theme;
+    className?: string;
+    style?: React.CSSProperties;
 };
 declare const BlocksProvider: React.FC<BlocksProviderProps>;
 
@@ -508,8 +563,8 @@ type ButtonProps = {
 declare const Button: react.ForwardRefExoticComponent<{
     children: ReactNode;
     type?: "button" | "submit" | "reset" | undefined;
-    variant?: "solid" | "outline" | "ghost" | "link" | undefined;
-    intent?: "neutral" | "danger" | undefined;
+    variant?: "outline" | "solid" | "ghost" | undefined;
+    intent?: "danger" | "neutral" | undefined;
     size?: "small" | "medium" | "large" | undefined;
     width?: Atoms['width'];
     alignSelf?: Atoms['alignSelf'];
@@ -519,6 +574,23 @@ declare const Button: react.ForwardRefExoticComponent<{
     disabled?: boolean | undefined;
 } & Omit<HTMLElementProps<HTMLButtonElement>, "size"> & react.RefAttributes<HTMLButtonElement>>;
 
+type DialogProps = {
+    children?: ReactNode;
+    open: boolean;
+    onRequestClose: () => void;
+    className?: string;
+    size?: DialogTheme['variants']['size'];
+    'aria-label'?: string;
+};
+declare const Dialog: FC<DialogProps>;
+
+type DividerProps = {
+    className?: string;
+    color?: Atoms['backgroundColor'];
+    style?: React.CSSProperties;
+};
+declare const Divider: FC<DividerProps>;
+
 type HeadingProps = {
     align?: Atoms['textAlign'];
     children: React.ReactNode;
@@ -558,6 +630,49 @@ type InlineProps = {
 } & MarginAndPaddingAtoms;
 declare const Inline: React.FC<InlineProps>;
 
+type InputProps = {
+    className?: string;
+    name: string;
+    type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
+    startSlot?: ReactNode;
+    endSlot?: ReactNode;
+    label: string;
+} & Omit<HTMLElementProps<HTMLInputElement>, 'type'>;
+declare const Input: react.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    name: string;
+    type?: OptionalLiteral<"number" | "text" | "tel" | "url" | "email" | "password"> | undefined;
+    startSlot?: ReactNode;
+    endSlot?: ReactNode;
+    label: string;
+} & Omit<HTMLElementProps<HTMLInputElement>, "type"> & react.RefAttributes<HTMLInputElement>>;
+
+type LabelProps = {
+    visualOnly?: boolean;
+    htmlFor?: string;
+    children?: React.ReactNode;
+    required?: boolean;
+    size?: LabelTheme['variants']['size'];
+    cursor?: Atoms['cursor'];
+} & HTMLElementProps<HTMLLabelElement>;
+declare const Label: React.FC<LabelProps>;
+
+type LinkProps = {
+    children?: ReactNode;
+    underline?: LinkTheme['variants']['underline'];
+    variant?: LinkTheme['variants']['variant'];
+} & Atoms & HTMLElementProps<HTMLAnchorElement>;
+type PolymorphicLink = ForwardRefComponent<'a', LinkProps>;
+declare const Link: PolymorphicLink;
+
+type SpinnerProps = {
+    className?: string;
+    color?: SpinnerTheme['variants']['color'];
+    size?: SpinnerTheme['variants']['size'];
+    style?: React.CSSProperties;
+} & MarginAtoms;
+declare const Spinner: FC<SpinnerProps>;
+
 type StackProps = {
     alignX?: keyof AlignItemsMap;
     as?: 'div' | 'section' | 'ul' | 'ol';
@@ -566,6 +681,7 @@ type StackProps = {
     display?: ResponsiveDisplayFlex;
     gap: Atoms['gap'];
     style?: React.CSSProperties;
+    role?: React.AriaRole;
     /**
      * Start prop is only valid when as="ol"
      */
@@ -590,47 +706,17 @@ type TextProps = {
 } & MarginAndPaddingAtoms & HTMLElementProps<HTMLSpanElement>;
 declare const Text: React.FC<TextProps>;
 
-type LinkProps = {
-    children?: ReactNode;
-    underline?: LinkTheme['variants']['underline'];
-    variant?: LinkTheme['variants']['variant'];
-} & Atoms & HTMLElementProps<HTMLAnchorElement>;
-type PolymorphicLink = ForwardRefComponent<'a', LinkProps>;
-declare const Link: PolymorphicLink;
-
-type SpinnerProps = {
-    className?: string;
-    color?: SpinnerTheme['variants']['color'];
-    size?: SpinnerTheme['variants']['size'];
-    style?: React.CSSProperties;
-} & MarginAtoms;
-declare const Spinner: FC<SpinnerProps>;
-
-type DividerProps = {
-    className?: string;
-    color?: Atoms['backgroundColor'];
-    style?: React.CSSProperties;
-};
-declare const Divider: FC<DividerProps>;
+declare function useComponentStyles<T extends keyof ComponentThemesProps>(name: T, props: ComponentThemesProps[T], useDefaultVariants?: boolean): string;
 
-type DialogProps = {
-    children?: ReactNode;
-    open: boolean;
-    onRequestClose: () => void;
-    className?: string;
+type ThemeComponentsStylesRequired = Required<ThemeComponentsStyles>;
+type Components = {
+    [K in keyof ThemeComponentsStylesRequired]: ThemeComponentsStylesRequired[K] extends RecordLike ? Required<ThemeComponentsStylesRequired[K]>['defaultVariants'] extends RecordLike ? ThemeComponentsStylesRequired[K]['defaultVariants'] extends undefined ? never : Exclude<ThemeComponentsStylesRequired[K]['defaultVariants'], undefined> : never : never;
 };
-declare const Dialog: FC<DialogProps>;
-
-declare function useComponentStyles<T extends keyof ComponentThemeProps>(name: T, props: ComponentThemeProps[T]): string;
-
-declare const useComponentStyleDefaultProps: <T extends "button" | "link" | "spinner" | "divider" | "dialog">(name: T) => ComponentThemeProps[T];
+declare const useComponentStyleDefaultProps: <T extends keyof ComponentThemes>(name: T) => Components[T];
 
 type Args = null | undefined | boolean | string;
 declare const classnames: (...args: Args[]) => string | undefined;
 
-declare const momotaro: {
-    vars: string;
-    components: ComponentThemesMap;
-};
+declare const momotaro: Theme;
 
-export { BlocksProvider, BlocksProviderProps, BlocksTokens, Box, BoxProps, Button, ButtonProps, ComponentThemesMap, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, momotaro, useComponentStyleDefaultProps, useComponentStyles, vars };
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, momotaro, useComponentStyleDefaultProps, useComponentStyles, vars };