@blockle/blocks 0.7.2 → 0.8.1

package/dist/momotaro.chunk.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefComponent } from '@radix-ui/react-polymorphic';
+import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
 import * as react from 'react';
 import react__default from 'react';
-import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
 
 declare const atoms: ((props: {
     readonly backgroundColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
@@ -270,7 +269,21 @@ type PaddingAtoms = {
     paddingX?: Atoms['paddingX'];
     paddingY?: Atoms['paddingY'];
 };
-type MarginAndPaddingAtoms = MarginAtoms & PaddingAtoms;
+type TextAtoms = {
+    color?: Atoms['color'];
+    fontFamily?: Atoms['fontFamily'];
+    fontSize?: Atoms['fontSize'];
+    fontStyle?: Atoms['fontStyle'];
+    fontWeight?: Atoms['fontWeight'];
+    lineHeight?: Atoms['lineHeight'];
+    textAlign?: Atoms['textAlign'];
+    textDecoration?: Atoms['textDecoration'];
+    textTransform?: Atoms['textTransform'];
+    textWrap?: Atoms['textWrap'];
+    whiteSpace?: Atoms['whiteSpace'];
+    wordBreak?: Atoms['wordBreak'];
+    wordWrap?: Atoms['wordWrap'];
+};
 
 type ButtonTheme = {
     base: string;
@@ -537,15 +550,247 @@ type BlocksProviderProps = {
 };
 declare const BlocksProvider: React.FC<BlocksProviderProps>;
 
+type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Atoms | 'as' | 'ref'>;
+
 type BoxProps = {
     children?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
-} & Atoms;
-type PolymorphicBox = ForwardRefComponent<'div', BoxProps>;
-declare const Box: PolymorphicBox;
-
-type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Atoms | 'as' | 'ref'>;
+    asChild?: boolean;
+} & Atoms & HTMLElementProps<HTMLDivElement>;
+declare const Box: react.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+    className?: string | undefined;
+    style?: react.CSSProperties | undefined;
+    asChild?: boolean | 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" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
+    readonly cursor?: "auto" | "pointer" | 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?: ("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 alignContent?: ("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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | null>;
+} & HTMLElementProps<HTMLDivElement> & react.RefAttributes<unknown>>;
 
 type ButtonProps = {
     children: React.ReactNode;
@@ -559,7 +804,8 @@ type ButtonProps = {
     startSlot?: React.ReactNode;
     endSlot?: React.ReactNode;
     disabled?: boolean;
-} & Omit<HTMLElementProps<HTMLButtonElement>, 'size'>;
+    asChild?: boolean;
+} & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
 declare const Button: react.ForwardRefExoticComponent<{
     children: React.ReactNode;
     type?: "button" | "submit" | "reset" | undefined;
@@ -572,7 +818,8 @@ declare const Button: react.ForwardRefExoticComponent<{
     startSlot?: React.ReactNode;
     endSlot?: React.ReactNode;
     disabled?: boolean | undefined;
-} & Omit<HTMLElementProps<HTMLButtonElement>, "size"> & react.RefAttributes<HTMLButtonElement>>;
+    asChild?: boolean | undefined;
+} & Omit<HTMLElementProps<HTMLButtonElement>, "size"> & MarginAtoms & react.RefAttributes<HTMLButtonElement>>;
 
 type CheckboxProps = {
     name: string;
@@ -606,11 +853,8 @@ type HeadingProps = {
     align?: Atoms['textAlign'];
     children: React.ReactNode;
     className?: string;
-    fontFamily?: Atoms['fontFamily'];
-    fontSize?: Atoms['fontSize'];
-    fontWeight?: Atoms['fontWeight'];
     level: 1 | 2 | 3 | 4 | 5 | 6;
-} & MarginAndPaddingAtoms & HTMLElementProps<HTMLHeadingElement>;
+} & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLHeadingElement>;
 declare const Heading: React.FC<HeadingProps>;
 
 declare const justifyContentMap: {
@@ -632,13 +876,13 @@ type AlignItemsMap = typeof alignItemsMap;
 type InlineProps = {
     alignX?: keyof JustifyContentMap;
     alignY?: keyof AlignItemsMap;
-    as?: 'div' | 'ul' | 'ol' | 'nav';
+    tag?: 'div' | 'ul' | 'ol' | 'nav';
     children: React.ReactNode;
     className?: string;
     display?: ResponsiveDisplayFlex;
     gap: Atoms['gap'];
     style?: React.CSSProperties;
-} & MarginAndPaddingAtoms;
+} & MarginAtoms & PaddingAtoms;
 declare const Inline: React.FC<InlineProps>;
 
 type InputProps = {
@@ -669,12 +913,17 @@ type LabelProps = {
 declare const Label: React.FC<LabelProps>;
 
 type LinkProps = {
+    asChild?: boolean;
     children?: React.ReactNode;
     underline?: LinkTheme['variants']['underline'];
     variant?: LinkTheme['variants']['variant'];
-} & Atoms & HTMLElementProps<HTMLAnchorElement>;
-type PolymorphicLink = ForwardRefComponent<'a', LinkProps>;
-declare const Link: PolymorphicLink;
+} & MarginAtoms & HTMLElementProps<HTMLAnchorElement>;
+declare const Link: react.ForwardRefExoticComponent<{
+    asChild?: boolean | undefined;
+    children?: React.ReactNode;
+    underline?: boolean | undefined;
+    variant?: "primary" | "secondary" | "inherit" | undefined;
+} & MarginAtoms & HTMLElementProps<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
 
 type PortalProps = {
     children: React.ReactNode;
@@ -703,7 +952,7 @@ declare const Spinner: React.FC<SpinnerProps>;
 
 type StackProps = {
     alignX?: keyof AlignItemsMap;
-    as?: 'div' | 'section' | 'ul' | 'ol';
+    tag?: 'div' | 'section' | 'ul' | 'ol';
     children: React.ReactNode;
     className?: string;
     display?: ResponsiveDisplayFlex;
@@ -711,29 +960,34 @@ type StackProps = {
     style?: React.CSSProperties;
     role?: React.AriaRole;
     /**
-     * Start prop is only valid when as="ol"
+     * Start prop is only valid when tag="ol"
      */
     start?: number;
-} & MarginAndPaddingAtoms;
+} & MarginAtoms & PaddingAtoms;
 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>;
+    tag?: 'span' | 'p' | 'strong' | 'em' | 'small' | 's' | 'del' | 'ins' | 'sub' | 'sup';
+    asChild?: boolean;
+} & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLSpanElement>;
 declare const Text: React.FC<TextProps>;
 
+type HTMLElementTags = 'a' | 'article' | 'button' | 'div' | 'p' | 'section' | 'span' | 'strong';
+/**
+ * Notes:
+ * - <Slot> can only have one child
+ * - <Slot> can only be used once
+ * - <Slot> can only be used as a direct descendant of <Slottable>
+ */
+declare function createSlottable<E extends HTMLElementTags>(defaultElement: E): (props: {
+    asChild?: boolean | undefined;
+} & react__default.HTMLProps<unknown>, ref: react__default.ForwardedRef<any>) => react__default.ReactElement<any, string | react__default.JSXElementConstructor<any>> | null;
+type SlotProps = {
+    children: react__default.ReactNode;
+};
+declare const Slot: react__default.FC<SlotProps>;
+
 declare function useComponentStyles<T extends keyof ComponentThemesProps>(name: T, props: ComponentThemesProps[T], useDefaultVariants?: boolean): string;
 
 type ThemeComponentsStylesRequired = Required<ThemeComponentsStyles>;
@@ -747,4 +1001,4 @@ declare const classnames: (...args: Args[]) => string | undefined;
 
 declare const momotaro: Theme;
 
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Radio, RadioProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, momotaro, useComponentStyleDefaultProps, useComponentStyles, vars };
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Radio, RadioProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, useComponentStyleDefaultProps, useComponentStyles, vars };

package/dist/styles/components/Heading/heading.css.cjs

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

package/dist/styles/components/Heading/heading.css.mjs

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

package/dist/styles/components/Text/text.css.cjs

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

package/dist/styles/components/Text/text.css.mjs

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

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

@@ -13,7 +13,9 @@ const button = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("butto
     placeItems: "center",
     fontSize: "medium",
     borderRadius: "medium",
-    fontWeight: "medium"
+    fontWeight: "medium",
+    // Space between icon and text
+    gap: "small"
   }), styles_themes_momotaro_components_helpers_css_cjs.clickable], "button_base"),
   variants: {
     variant: {

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

@@ -12,7 +12,9 @@ const button = makeComponentTheme("button", {
     placeItems: "center",
     fontSize: "medium",
     borderRadius: "medium",
-    fontWeight: "medium"
+    fontWeight: "medium",
+    // Space between icon and text
+    gap: "small"
   }), clickable], "button_base"),
   variants: {
     variant: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.7.2",
+  "version": "0.8.1",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
@@ -51,7 +51,6 @@
   },
   "dependencies": {
     "@changesets/cli": "^2.26.2",
-    "@radix-ui/react-polymorphic": "^0.0.14",
     "@vanilla-extract/css": "^1.13.0",
     "@vanilla-extract/css-utils": "^0.1.3",
     "@vanilla-extract/sprinkles": "^1.6.1",