@blockle/blocks 0.1.0 → 0.2.1

package/dist/reset.css.d.ts

@@ -0,0 +1,390 @@
+import { ForwardRefComponent } from '@radix-ui/react-polymorphic';
+import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
+
+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 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" | "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;
+
+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;
+} & 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, Inline, InlineProps, Stack, StackProps, Text, TextProps, atoms, classnames, theme, vars };

package/dist/reset.css.mjs

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

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

@@ -0,0 +1,70 @@
+"use strict";
+const styles_lib_css_theme_vars_css_cjs = require("../theme/vars.css.cjs");
+const unresponsiveProperties = {
+  backgroundColor: styles_lib_css_theme_vars_css_cjs.vars.color,
+  borderRadius: styles_lib_css_theme_vars_css_cjs.vars.borderRadius,
+  bottom: [0],
+  boxShadow: styles_lib_css_theme_vars_css_cjs.vars.shadow,
+  color: { ...styles_lib_css_theme_vars_css_cjs.vars.color, currentColor: "currentColor" },
+  cursor: ["auto", "pointer"],
+  fontFamily: styles_lib_css_theme_vars_css_cjs.vars.fontFamily,
+  fontStyle: ["normal", "italic", "oblique"],
+  fontWeight: styles_lib_css_theme_vars_css_cjs.vars.fontWeight,
+  height: { auto: "auto", full: "100%" },
+  left: [0],
+  lineHeight: styles_lib_css_theme_vars_css_cjs.vars.lineHeight,
+  maxHeight: { full: "100%" },
+  maxWidth: { full: "100%" },
+  opacity: [0, 1],
+  overflow: ["hidden", "scroll", "visible", "auto"],
+  overflowX: ["hidden", "scroll", "visible", "auto"],
+  overflowY: ["hidden", "scroll", "visible", "auto"],
+  pointerEvents: ["none"],
+  right: [0],
+  textDecoration: ["overline", "line-through", "underline", "none"],
+  textTransform: ["lowercase", "uppercase", "capitalize"],
+  top: [0],
+  transition: styles_lib_css_theme_vars_css_cjs.vars.transition,
+  userSelect: ["none"],
+  whiteSpace: ["nowrap", "pre", "pre-line", "pre-wrap"],
+  width: { auto: "auto", full: "100%", "fit-content": "fit-content" },
+  wordBreak: ["break-word"],
+  wordWrap: ["break-word"]
+};
+const marginSpace = { auto: "auto", ...styles_lib_css_theme_vars_css_cjs.vars.space };
+const responsiveProperties = {
+  alignItems: ["stretch", "center", "flex-start", "flex-end"],
+  columnGap: styles_lib_css_theme_vars_css_cjs.vars.space,
+  display: [
+    "none",
+    "flex",
+    "inline-flex",
+    "block",
+    "inline",
+    "inline-block",
+    "grid",
+    "inline-grid"
+  ],
+  flex: [1],
+  flexDirection: ["row", "row-reverse", "column", "column-reverse"],
+  flexGrow: [0, 1],
+  flexShrink: [0, 1],
+  flexWrap: ["nowrap", "wrap"],
+  fontSize: styles_lib_css_theme_vars_css_cjs.vars.fontSize,
+  gap: styles_lib_css_theme_vars_css_cjs.vars.space,
+  justifyContent: ["flex-start", "flex-end", "center", "space-between", "space-around"],
+  marginBottom: marginSpace,
+  marginLeft: marginSpace,
+  marginRight: marginSpace,
+  marginTop: marginSpace,
+  outline: ["none"],
+  paddingBottom: styles_lib_css_theme_vars_css_cjs.vars.space,
+  paddingLeft: styles_lib_css_theme_vars_css_cjs.vars.space,
+  paddingRight: styles_lib_css_theme_vars_css_cjs.vars.space,
+  paddingTop: styles_lib_css_theme_vars_css_cjs.vars.space,
+  position: ["relative", "fixed", "absolute", "sticky", "static"],
+  rowGap: styles_lib_css_theme_vars_css_cjs.vars.space,
+  textAlign: ["center", "left", "right", "justify"]
+};
+exports.responsiveProperties = responsiveProperties;
+exports.unresponsiveProperties = unresponsiveProperties;

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

@@ -0,0 +1,71 @@
+import { vars } from "../theme/vars.css.mjs";
+const unresponsiveProperties = {
+  backgroundColor: vars.color,
+  borderRadius: vars.borderRadius,
+  bottom: [0],
+  boxShadow: vars.shadow,
+  color: { ...vars.color, currentColor: "currentColor" },
+  cursor: ["auto", "pointer"],
+  fontFamily: vars.fontFamily,
+  fontStyle: ["normal", "italic", "oblique"],
+  fontWeight: vars.fontWeight,
+  height: { auto: "auto", full: "100%" },
+  left: [0],
+  lineHeight: vars.lineHeight,
+  maxHeight: { full: "100%" },
+  maxWidth: { full: "100%" },
+  opacity: [0, 1],
+  overflow: ["hidden", "scroll", "visible", "auto"],
+  overflowX: ["hidden", "scroll", "visible", "auto"],
+  overflowY: ["hidden", "scroll", "visible", "auto"],
+  pointerEvents: ["none"],
+  right: [0],
+  textDecoration: ["overline", "line-through", "underline", "none"],
+  textTransform: ["lowercase", "uppercase", "capitalize"],
+  top: [0],
+  transition: vars.transition,
+  userSelect: ["none"],
+  whiteSpace: ["nowrap", "pre", "pre-line", "pre-wrap"],
+  width: { auto: "auto", full: "100%", "fit-content": "fit-content" },
+  wordBreak: ["break-word"],
+  wordWrap: ["break-word"]
+};
+const marginSpace = { auto: "auto", ...vars.space };
+const responsiveProperties = {
+  alignItems: ["stretch", "center", "flex-start", "flex-end"],
+  columnGap: vars.space,
+  display: [
+    "none",
+    "flex",
+    "inline-flex",
+    "block",
+    "inline",
+    "inline-block",
+    "grid",
+    "inline-grid"
+  ],
+  flex: [1],
+  flexDirection: ["row", "row-reverse", "column", "column-reverse"],
+  flexGrow: [0, 1],
+  flexShrink: [0, 1],
+  flexWrap: ["nowrap", "wrap"],
+  fontSize: vars.fontSize,
+  gap: vars.space,
+  justifyContent: ["flex-start", "flex-end", "center", "space-between", "space-around"],
+  marginBottom: marginSpace,
+  marginLeft: marginSpace,
+  marginRight: marginSpace,
+  marginTop: marginSpace,
+  outline: ["none"],
+  paddingBottom: vars.space,
+  paddingLeft: vars.space,
+  paddingRight: vars.space,
+  paddingTop: vars.space,
+  position: ["relative", "fixed", "absolute", "sticky", "static"],
+  rowGap: vars.space,
+  textAlign: ["center", "left", "right", "justify"]
+};
+export {
+  responsiveProperties,
+  unresponsiveProperties
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+const breakpointNames = ["mobile", "tablet", "desktop", "wide"];
+const breakpoints = {
+  mobile: 0,
+  tablet: 740,
+  desktop: 992,
+  wide: 1200
+};
+const breakpointQuery = (key) => `screen and (min-width: ${breakpoints[key]}px)`;
+exports.breakpointNames = breakpointNames;
+exports.breakpointQuery = breakpointQuery;

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

@@ -0,0 +1,12 @@
+const breakpointNames = ["mobile", "tablet", "desktop", "wide"];
+const breakpoints = {
+  mobile: 0,
+  tablet: 740,
+  desktop: 992,
+  wide: 1200
+};
+const breakpointQuery = (key) => `screen and (min-width: ${breakpoints[key]}px)`;
+export {
+  breakpointNames,
+  breakpointQuery
+};

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

@@ -0,0 +1,45 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const sprinkles = require("@vanilla-extract/sprinkles");
+const styles_lib_css_atoms_atomicProperties_cjs = require("./atomicProperties.cjs");
+const styles_lib_css_atoms_breakpoints_cjs = require("./breakpoints.cjs");
+fileScope.setFileScope("src/lib/css/atoms/sprinkles.css.ts?used", "blocks");
+const unresponsiveAtomicProperties = sprinkles.defineProperties({
+  properties: styles_lib_css_atoms_atomicProperties_cjs.unresponsiveProperties,
+  shorthands: {
+    inset: ["top", "bottom", "left", "right"]
+  }
+});
+const responsiveAtomicProperties = sprinkles.defineProperties({
+  defaultCondition: "mobile",
+  conditions: {
+    mobile: {},
+    tablet: {
+      "@media": styles_lib_css_atoms_breakpoints_cjs.breakpointQuery("tablet")
+    },
+    desktop: {
+      "@media": styles_lib_css_atoms_breakpoints_cjs.breakpointQuery("desktop")
+    },
+    wide: {
+      "@media": styles_lib_css_atoms_breakpoints_cjs.breakpointQuery("wide")
+    }
+  },
+  responsiveArray: styles_lib_css_atoms_breakpoints_cjs.breakpointNames,
+  properties: styles_lib_css_atoms_atomicProperties_cjs.responsiveProperties,
+  shorthands: {
+    margin: ["marginTop", "marginBottom", "marginLeft", "marginRight"],
+    marginX: ["marginLeft", "marginRight"],
+    marginY: ["marginTop", "marginBottom"],
+    padding: ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
+    paddingX: ["paddingLeft", "paddingRight"],
+    paddingY: ["paddingTop", "paddingBottom"],
+    placeItems: ["justifyContent", "alignItems"]
+  }
+});
+const atoms = sprinkles.createSprinkles(
+  unresponsiveAtomicProperties,
+  responsiveAtomicProperties
+  // colorAtomicProperties,
+);
+fileScope.endFileScope();
+exports.atoms = atoms;