@blockle/blocks 0.2.2 → 0.2.3

package/README.md

@@ -15,7 +15,7 @@ import React from 'react';
 
 import '@blockle/blocks/reset.css';
 import { ThemeProvider } from '@blockle/blocks';
-import { theme } from '@blockle/blocks/themes/momotaro';
+import { momotaro } from '@blockle/blocks/themes/momotaro';
 
 // const Link = makeLinkComponent(...)
 

package/dist/index.d.ts

@@ -1 +1 @@
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Heading, HeadingProps, Inline, InlineProps, Stack, StackProps, Text, TextProps, atoms, classnames, vars } from './reset.css.js';
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Heading, HeadingProps, Inline, InlineProps, Stack, StackProps, Text, TextProps, atoms, classnames, vars } from './momotaro.chunk.js';

package/dist/momotaro.chunk.d.ts

@@ -0,0 +1,410 @@
+import { ForwardRefComponent } from '@radix-ui/react-polymorphic';
+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 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 cursor?: "auto" | "pointer" | undefined;
+    readonly fontFamily?: "secondary" | "standard" | undefined;
+    readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
+    readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
+    readonly height?: "auto" | "full" | undefined;
+    readonly left?: 0 | undefined;
+    readonly lineHeight?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
+    readonly maxHeight?: "full" | undefined;
+    readonly maxWidth?: "full" | undefined;
+    readonly opacity?: 0 | 1 | undefined;
+    readonly overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
+    readonly overflowX?: "auto" | "hidden" | "scroll" | "visible" | undefined;
+    readonly overflowY?: "auto" | "hidden" | "scroll" | "visible" | undefined;
+    readonly pointerEvents?: "none" | undefined;
+    readonly right?: 0 | 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?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
+    readonly width?: "auto" | "fit-content" | "full" | undefined;
+    readonly wordBreak?: "break-word" | undefined;
+    readonly wordWrap?: "break-word" | undefined;
+    inset?: 0 | undefined;
+} & {
+    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<1 | 2 | 3 | 4, "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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+    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>;
+}) => 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">;
+};
+
+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'>;
+type MarginAtoms = {
+    margin?: Atoms['margin'];
+    marginLeft?: Atoms['marginLeft'];
+    marginRight?: Atoms['marginRight'];
+    marginTop?: Atoms['marginTop'];
+    marginBottom?: Atoms['marginBottom'];
+    marginX?: Atoms['marginX'];
+    marginY?: Atoms['marginY'];
+};
+type PaddingAtoms = {
+    padding?: Atoms['padding'];
+    paddingLeft?: Atoms['paddingLeft'];
+    paddingRight?: Atoms['paddingRight'];
+    paddingTop?: Atoms['paddingTop'];
+    paddingBottom?: Atoms['paddingBottom'];
+    paddingX?: Atoms['paddingX'];
+    paddingY?: Atoms['paddingY'];
+};
+type MarginAndPaddingAtoms = MarginAtoms & PaddingAtoms;
+
+type BoxProps = {
+    children?: React.ReactNode;
+    className?: string;
+} & Atoms;
+type PolymorphicBox = ForwardRefComponent<'div', BoxProps>;
+declare const Box: PolymorphicBox;
+
+type HTMLElementProps<E extends Element> = Omit<HTMLProps<E>, keyof Atoms | 'as' | 'ref'>;
+
+type HeadingProps = {
+    className?: string;
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    children: React.ReactNode;
+    align?: Atoms['textAlign'];
+    fontSize?: Atoms['fontSize'];
+    fontWeight?: Atoms['fontWeight'];
+    fontFamily?: Atoms['fontFamily'];
+} & MarginAndPaddingAtoms & HTMLElementProps<HTMLHeadingElement>;
+declare const Heading: React.FC<HeadingProps>;
+
+declare const justifyContentMap: {
+    readonly left: "flex-start";
+    readonly right: "flex-end";
+    readonly center: "center";
+    readonly between: "space-between";
+    readonly around: "space-around";
+};
+type JustifyContentMap = typeof justifyContentMap;
+declare const alignItemsMap: {
+    readonly left: "flex-start";
+    readonly right: "flex-end";
+    readonly center: "center";
+    readonly stretch: "stretch";
+};
+type AlignItemsMap = typeof alignItemsMap;
+
+type InlineProps = {
+    as?: 'div' | 'ul' | 'ol' | 'nav';
+    children: React.ReactNode;
+    alignX?: keyof JustifyContentMap;
+    alignY?: keyof AlignItemsMap;
+    gap: Atoms['gap'];
+    display?: ResponsiveDisplayFlex;
+} & MarginAndPaddingAtoms;
+declare const Inline: React.FC<InlineProps>;
+
+type StackProps = {
+    as?: 'div' | 'section' | 'ul' | 'ol';
+    children: React.ReactNode;
+    alignX?: keyof AlignItemsMap;
+    gap: Atoms['gap'];
+    display?: ResponsiveDisplayFlex;
+    className?: string;
+    /**
+     * Start prop is only valid when as="ol"
+     */
+    start?: number;
+} & MarginAndPaddingAtoms;
+declare const Stack: React.FC<StackProps>;
+
+type TextProps = {
+    children: React.ReactNode;
+    as?: 'span' | 'p' | 'strong' | 'em' | 'small' | 's' | 'del' | 'ins' | 'sub' | 'sup';
+    color?: Atoms['color'];
+    fontSize?: Atoms['fontSize'];
+    fontWeight?: Atoms['fontWeight'];
+    fontFamily?: Atoms['fontFamily'];
+    textAlign?: Atoms['textAlign'];
+    fontStyle?: Atoms['fontStyle'];
+    textDecoration?: Atoms['textDecoration'];
+    lineHeight?: Atoms['lineHeight'];
+    whiteSpace?: Atoms['whiteSpace'];
+    wordWrap?: Atoms['wordWrap'];
+    wordBreak?: Atoms['wordBreak'];
+} & MarginAndPaddingAtoms & HTMLElementProps<HTMLSpanElement>;
+declare const Text: React.FC<TextProps>;
+
+declare const vars: {
+    space: {
+        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: {
+        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})`;
+    };
+    color: {
+        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})`;
+        caution: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    borderWidth: {
+        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})`;
+    };
+    fontFamily: {
+        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        standard: `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})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    fontWeight: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        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})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    transition: {
+        slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    shadow: {
+        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})`;
+    };
+};
+
+type Args = null | undefined | boolean | string;
+declare const classnames: (...args: Args[]) => string | undefined;
+
+declare const momotaro: {
+    vars: string;
+    components: Record<string, any>;
+};
+
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Heading, HeadingProps, Inline, InlineProps, Stack, StackProps, Text, TextProps, atoms, classnames, momotaro, vars };

package/dist/reset.css.d.ts

@@ -1,409 +1,2 @@
-import { ForwardRefComponent } from '@radix-ui/react-polymorphic';
-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 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 cursor?: "auto" | "pointer" | undefined;
-    readonly fontFamily?: "secondary" | "standard" | undefined;
-    readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
-    readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
-    readonly height?: "auto" | "full" | undefined;
-    readonly left?: 0 | undefined;
-    readonly lineHeight?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    readonly maxHeight?: "full" | undefined;
-    readonly maxWidth?: "full" | undefined;
-    readonly opacity?: 0 | 1 | undefined;
-    readonly overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
-    readonly overflowX?: "auto" | "hidden" | "scroll" | "visible" | undefined;
-    readonly overflowY?: "auto" | "hidden" | "scroll" | "visible" | undefined;
-    readonly pointerEvents?: "none" | undefined;
-    readonly right?: 0 | 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?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
-    readonly width?: "auto" | "fit-content" | "full" | undefined;
-    readonly wordBreak?: "break-word" | undefined;
-    readonly wordWrap?: "break-word" | undefined;
-    inset?: 0 | undefined;
-} & {
-    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<1 | 2 | 3 | 4, "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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-    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>;
-}) => 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">;
-};
-
-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'>;
-type MarginAtoms = {
-    margin?: Atoms['margin'];
-    marginLeft?: Atoms['marginLeft'];
-    marginRight?: Atoms['marginRight'];
-    marginTop?: Atoms['marginTop'];
-    marginBottom?: Atoms['marginBottom'];
-    marginX?: Atoms['marginX'];
-    marginY?: Atoms['marginY'];
-};
-type PaddingAtoms = {
-    padding?: Atoms['padding'];
-    paddingLeft?: Atoms['paddingLeft'];
-    paddingRight?: Atoms['paddingRight'];
-    paddingTop?: Atoms['paddingTop'];
-    paddingBottom?: Atoms['paddingBottom'];
-    paddingX?: Atoms['paddingX'];
-    paddingY?: Atoms['paddingY'];
-};
-type MarginAndPaddingAtoms = MarginAtoms & PaddingAtoms;
-
-type BoxProps = {
-    children?: React.ReactNode;
-    className?: string;
-} & Atoms;
-type PolymorphicBox = ForwardRefComponent<'div', BoxProps>;
-declare const Box: PolymorphicBox;
-
-type HTMLElementProps<E extends Element> = Omit<HTMLProps<E>, keyof Atoms | 'as' | 'ref'>;
-
-type HeadingProps = {
-    className?: string;
-    level: 1 | 2 | 3 | 4 | 5 | 6;
-    children: React.ReactNode;
-    align?: Atoms['textAlign'];
-    fontSize?: Atoms['fontSize'];
-    fontWeight?: Atoms['fontWeight'];
-    fontFamily?: Atoms['fontFamily'];
-} & MarginAndPaddingAtoms & HTMLElementProps<HTMLHeadingElement>;
-declare const Heading: React.FC<HeadingProps>;
-
-declare const justifyContentMap: {
-    readonly left: "flex-start";
-    readonly right: "flex-end";
-    readonly center: "center";
-    readonly between: "space-between";
-    readonly around: "space-around";
-};
-type JustifyContentMap = typeof justifyContentMap;
-declare const alignItemsMap: {
-    readonly left: "flex-start";
-    readonly right: "flex-end";
-    readonly center: "center";
-    readonly stretch: "stretch";
-};
-type AlignItemsMap = typeof alignItemsMap;
-
-type InlineProps = {
-    as?: 'div' | 'ul' | 'ol' | 'nav';
-    children: React.ReactNode;
-    alignX?: keyof JustifyContentMap;
-    alignY?: keyof AlignItemsMap;
-    gap: Atoms['gap'];
-    display?: ResponsiveDisplayFlex;
-} & MarginAndPaddingAtoms;
-declare const Inline: React.FC<InlineProps>;
-
-type StackProps = {
-    as?: 'div' | 'section' | 'ul' | 'ol';
-    children: React.ReactNode;
-    alignX?: keyof AlignItemsMap;
-    gap: Atoms['gap'];
-    display?: ResponsiveDisplayFlex;
-    className?: string;
-    /**
-     * Start prop is only valid when as="ol"
-     */
-    start?: number;
-} & MarginAndPaddingAtoms;
-declare const Stack: React.FC<StackProps>;
-
-type TextProps = {
-    children: React.ReactNode;
-    as?: 'span' | 'p' | 'strong' | 'em' | 'small' | 's' | 'del' | 'ins' | 'sub' | 'sup';
-    color?: Atoms['color'];
-    fontSize?: Atoms['fontSize'];
-    fontWeight?: Atoms['fontWeight'];
-    fontFamily?: Atoms['fontFamily'];
-    textAlign?: Atoms['textAlign'];
-    fontStyle?: Atoms['fontStyle'];
-    textDecoration?: Atoms['textDecoration'];
-    lineHeight?: Atoms['lineHeight'];
-    whiteSpace?: Atoms['whiteSpace'];
-    wordWrap?: Atoms['wordWrap'];
-    wordBreak?: Atoms['wordBreak'];
-} & MarginAndPaddingAtoms;
-declare const Text: React.FC<TextProps>;
-
-declare const vars: {
-    space: {
-        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: {
-        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})`;
-    };
-    color: {
-        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})`;
-        caution: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    borderWidth: {
-        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})`;
-    };
-    fontFamily: {
-        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        standard: `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})`;
-        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    fontWeight: {
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        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})`;
-        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    transition: {
-        slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    shadow: {
-        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})`;
-    };
-};
-
-type Args = null | undefined | boolean | string;
-declare const classnames: (...args: Args[]) => string | undefined;
-
-declare const theme: {
-    vars: string;
-};
-
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Heading, HeadingProps, Inline, InlineProps, Stack, StackProps, Text, TextProps, atoms, classnames, theme, vars };
+export { }

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

@@ -0,0 +1,3 @@
+"use strict";
+const makeComponentTheme = (options) => options;
+exports.makeComponentTheme = makeComponentTheme;

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

@@ -0,0 +1,4 @@
+const makeComponentTheme = (options) => options;
+export {
+  makeComponentTheme
+};

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

@@ -1,10 +1,11 @@
 "use strict";
 const css = require("@vanilla-extract/css");
-const styles_lib_css_theme_vars_css_cjs = require("./vars.css.cjs");
 const styles_lib_css_theme_makeVanillaTheme_cjs = require("./makeVanillaTheme.cjs");
+const styles_lib_css_theme_vars_css_cjs = require("./vars.css.cjs");
 const makeTheme = (theme) => {
   return {
-    vars: css.createTheme(styles_lib_css_theme_vars_css_cjs.vars, styles_lib_css_theme_makeVanillaTheme_cjs.makeVanillaTheme(theme.tokens))
+    vars: css.createTheme(styles_lib_css_theme_vars_css_cjs.vars, styles_lib_css_theme_makeVanillaTheme_cjs.makeVanillaTheme(theme.tokens)),
+    components: theme.components
   };
 };
 exports.makeTheme = makeTheme;

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

@@ -1,9 +1,10 @@
 import { createTheme } from "@vanilla-extract/css";
-import { vars } from "./vars.css.mjs";
 import { makeVanillaTheme } from "./makeVanillaTheme.mjs";
+import { vars } from "./vars.css.mjs";
 const makeTheme = (theme) => {
   return {
-    vars: createTheme(vars, makeVanillaTheme(theme.tokens))
+    vars: createTheme(vars, makeVanillaTheme(theme.tokens)),
+    components: theme.components
   };
 };
 export {

package/dist/styles/themes/momotaro/components/button.css.cjs

@@ -0,0 +1,46 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const styles_lib_css_theme_makeComponentTheme_cjs = require("../../../lib/css/theme/makeComponentTheme.cjs");
+const styles_lib_css_theme_vars_css_cjs = require("../../../lib/css/theme/vars.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
+const button = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
+  type: "button",
+  base: {
+    // ...
+    borderRadius: "9999px"
+  },
+  variants: {
+    // ...
+    variant: {
+      solid: {
+        color: styles_lib_css_theme_vars_css_cjs.vars.color.primary
+      },
+      outline: {},
+      ghost: {},
+      link: {}
+    },
+    size: {
+      small: {},
+      medium: {},
+      large: {}
+    }
+  },
+  compoundVariants: [
+    // ...
+    {
+      variants: {
+        variant: "solid",
+        size: "small"
+      },
+      style: {
+        // ...
+      }
+    }
+  ],
+  defaultVariants: {
+    // ...
+    variant: "ghost"
+  }
+});
+fileScope.endFileScope();
+exports.button = button;

package/dist/styles/themes/momotaro/components/button.css.mjs

@@ -0,0 +1,47 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { makeComponentTheme } from "../../../lib/css/theme/makeComponentTheme.mjs";
+import { vars } from "../../../lib/css/theme/vars.css.mjs";
+setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
+const button = makeComponentTheme({
+  type: "button",
+  base: {
+    // ...
+    borderRadius: "9999px"
+  },
+  variants: {
+    // ...
+    variant: {
+      solid: {
+        color: vars.color.primary
+      },
+      outline: {},
+      ghost: {},
+      link: {}
+    },
+    size: {
+      small: {},
+      medium: {},
+      large: {}
+    }
+  },
+  compoundVariants: [
+    // ...
+    {
+      variants: {
+        variant: "solid",
+        size: "small"
+      },
+      style: {
+        // ...
+      }
+    }
+  ],
+  defaultVariants: {
+    // ...
+    variant: "ghost"
+  }
+});
+endFileScope();
+export {
+  button
+};

package/dist/styles/themes/momotaro/components/index.cjs

@@ -0,0 +1,6 @@
+"use strict";
+const styles_themes_momotaro_components_button_css_cjs = require("./button.css.cjs");
+const components = {
+  button: styles_themes_momotaro_components_button_css_cjs.button
+};
+exports.components = components;

package/dist/styles/themes/momotaro/components/index.mjs

@@ -0,0 +1,7 @@
+import { button } from "./button.css.mjs";
+const components = {
+  button
+};
+export {
+  components
+};

package/dist/styles/themes/momotaro/momotaro.css.cjs

@@ -0,0 +1,13 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const styles_lib_css_theme_makeTheme_cjs = require("../../lib/css/theme/makeTheme.cjs");
+const styles_themes_momotaro_components_index_cjs = require("./components/index.cjs");
+const styles_themes_momotaro_tokens_cjs = require("./tokens.cjs");
+fileScope.setFileScope("src/themes/momotaro/momotaro.css.ts?used", "blocks");
+const momotaro = styles_lib_css_theme_makeTheme_cjs.makeTheme({
+  name: "momotaro",
+  tokens: styles_themes_momotaro_tokens_cjs.tokens,
+  components: styles_themes_momotaro_components_index_cjs.components
+});
+fileScope.endFileScope();
+exports.momotaro = momotaro;

package/dist/styles/themes/momotaro/{momotaroTheme.css.mjs → momotaro.css.mjs}

@@ -1,12 +1,14 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { makeTheme } from "../../lib/css/theme/makeTheme.mjs";
+import { components } from "./components/index.mjs";
 import { tokens } from "./tokens.mjs";
-setFileScope("src/themes/momotaro/momotaroTheme.css.ts?used", "blocks");
-const theme = makeTheme({
+setFileScope("src/themes/momotaro/momotaro.css.ts?used", "blocks");
+const momotaro = makeTheme({
   name: "momotaro",
-  tokens
+  tokens,
+  components
 });
 endFileScope();
 export {
-  theme
+  momotaro
 };

package/dist/themes/momotaro.cjs

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const styles_themes_momotaro_momotaroTheme_css_cjs = require("../styles/themes/momotaro/momotaroTheme.css.cjs");
-exports.theme = styles_themes_momotaro_momotaroTheme_css_cjs.theme;
+const styles_themes_momotaro_momotaro_css_cjs = require("../styles/themes/momotaro/momotaro.css.cjs");
+exports.momotaro = styles_themes_momotaro_momotaro_css_cjs.momotaro;

package/dist/themes/momotaro.d.ts

@@ -1 +1 @@
-export { theme } from '../reset.css.js';
+export { momotaro } from '../momotaro.chunk.js';

package/dist/themes/momotaro.mjs

@@ -1,4 +1,4 @@
-import { theme } from "../styles/themes/momotaro/momotaroTheme.css.mjs";
+import { momotaro } from "../styles/themes/momotaro/momotaro.css.mjs";
 export {
-  theme
+  momotaro
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
@@ -38,31 +38,31 @@
   },
   "dependencies": {
     "@radix-ui/react-polymorphic": "^0.0.14",
-    "@vanilla-extract/css": "^1.11.1",
+    "@vanilla-extract/css": "^1.13.0",
     "@vanilla-extract/css-utils": "^0.1.3",
-    "@vanilla-extract/sprinkles": "^1.6.0",
+    "@vanilla-extract/sprinkles": "^1.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@crackle/cli": "^0.12.0",
-    "@crackle/core": "^0.25.0",
-    "@types/react": "^18.2.13",
-    "@types/react-dom": "^18.2.6",
-    "@typescript-eslint/eslint-plugin": "^5.60.0",
-    "@typescript-eslint/parser": "^5.60.0",
+    "@crackle/cli": "^0.12.4",
+    "@crackle/core": "^0.28.0",
+    "@types/react": "^18.2.25",
+    "@types/react-dom": "^18.2.10",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
     "cross-env": "^7.0.3",
-    "eslint": "^8.43.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-jest": "^27.2.2",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint": "^8.50.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-jest": "^27.4.2",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.12",
-    "eslint-plugin-unicorn": "^47.0.0",
-    "prettier": "^2.8.8",
-    "typescript": "^5.1.3",
-    "vitest": "^0.32.2"
+    "eslint-plugin-storybook": "^0.6.14",
+    "eslint-plugin-unicorn": "^48.0.1",
+    "prettier": "^3.0.3",
+    "typescript": "^5.2.2",
+    "vitest": "^0.34.6"
   },
   "packageManager": "yarn@1.22.19"
 }

package/dist/styles/themes/momotaro/momotaroTheme.css.cjs

@@ -1,11 +0,0 @@
-"use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const styles_lib_css_theme_makeTheme_cjs = require("../../lib/css/theme/makeTheme.cjs");
-const styles_themes_momotaro_tokens_cjs = require("./tokens.cjs");
-fileScope.setFileScope("src/themes/momotaro/momotaroTheme.css.ts?used", "blocks");
-const theme = styles_lib_css_theme_makeTheme_cjs.makeTheme({
-  name: "momotaro",
-  tokens: styles_themes_momotaro_tokens_cjs.tokens
-});
-fileScope.endFileScope();
-exports.theme = theme;