@blockle/blocks 0.20.0-alpha1 → 0.20.0-alpha1.0

package/dist/lib/css/atoms/sprinkles.css.d.ts

@@ -0,0 +1,233 @@
+export declare const atoms: ((props: {
+    readonly backgroundColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
+    readonly borderColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
+    readonly borderRadius?: ("medium" | "small" | "large" | "xlarge") | undefined;
+    readonly borderWidth?: ("medium" | "small" | "large") | undefined;
+    readonly border?: "none" | undefined;
+    readonly insetBlock?: 0 | undefined;
+    readonly insetBlockStart?: 0 | undefined;
+    readonly insetBlockEnd?: 0 | undefined;
+    readonly insetInline?: 0 | undefined;
+    readonly insetInlineStart?: 0 | undefined;
+    readonly insetInlineEnd?: 0 | undefined;
+    readonly boxShadow?: ("medium" | "small" | "large") | undefined;
+    readonly color?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
+    readonly cursor?: "auto" | "pointer" | undefined;
+    readonly fontFamily?: "body" | "primary" | "secondary" | undefined;
+    readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
+    readonly fontWeight?: ("regular" | "medium" | "strong") | undefined;
+    readonly lineHeight?: ("medium" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+    readonly blockSize?: "auto" | "fit-content" | "full" | undefined;
+    readonly maxBlockSize?: "auto" | "fit-content" | "full" | undefined;
+    readonly inlineSize?: "auto" | "fit-content" | "full" | undefined;
+    readonly maxInlineSize?: "auto" | "fit-content" | "full" | undefined;
+    readonly opacity?: 0 | 1 | undefined;
+    readonly overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
+    readonly overflowBlock?: "auto" | "hidden" | "scroll" | "visible" | undefined;
+    readonly overflowInline?: "auto" | "hidden" | "scroll" | "visible" | undefined;
+    readonly pointerEvents?: "none" | undefined;
+    readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
+    readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
+    readonly textWrap?: "balance" | "wrap" | undefined;
+    readonly transition?: ("slow" | "normal" | "fast") | undefined;
+    readonly userSelect?: "none" | undefined;
+    readonly whiteSpace?: "nowrap" | "pre" | "pre-line" | "pre-wrap" | 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) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, "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) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, "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) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
+    readonly columnGap?: (("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | {
+        mobile?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        tablet?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        desktop?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        wide?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | null>;
+    readonly display?: ("none" | "flex" | "inline-flex" | "block" | "inline" | "inline-block" | "grid" | "inline-grid" | {
+        mobile?: "none" | "flex" | "inline-flex" | "block" | "inline" | "inline-block" | "grid" | "inline-grid" | undefined;
+        tablet?: "none" | "flex" | "inline-flex" | "block" | "inline" | "inline-block" | "grid" | "inline-grid" | undefined;
+        desktop?: "none" | "flex" | "inline-flex" | "block" | "inline" | "inline-block" | "grid" | "inline-grid" | undefined;
+        wide?: "none" | "flex" | "inline-flex" | "block" | "inline" | "inline-block" | "grid" | "inline-grid" | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, "none" | "flex" | "inline-flex" | "block" | "inline" | "inline-block" | "grid" | "inline-grid" | null>;
+    readonly flex?: (1 | {
+        mobile?: 1 | undefined;
+        tablet?: 1 | undefined;
+        desktop?: 1 | undefined;
+        wide?: 1 | undefined;
+    } | undefined) | import('@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) | import('@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) | import('@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) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
+    readonly flexWrap?: ("wrap" | "nowrap" | {
+        mobile?: "wrap" | "nowrap" | undefined;
+        tablet?: "wrap" | "nowrap" | undefined;
+        desktop?: "wrap" | "nowrap" | undefined;
+        wide?: "wrap" | "nowrap" | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, "wrap" | "nowrap" | null>;
+    readonly fontSize?: (("medium" | "xsmall" | "small" | "large" | "xlarge") | {
+        mobile?: ("medium" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        tablet?: ("medium" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        desktop?: ("medium" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        wide?: ("medium" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, ("medium" | "xsmall" | "small" | "large" | "xlarge") | null>;
+    readonly gap?: (("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | {
+        mobile?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        tablet?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        desktop?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        wide?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, ("medium" | "none" | "gutter" | "xsmall" | "small" | "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) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
+    readonly marginBlockStart?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | {
+        mobile?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        tablet?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        desktop?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        wide?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | null>;
+    readonly marginBlockEnd?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | {
+        mobile?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        tablet?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        desktop?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        wide?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | null>;
+    readonly marginInlineStart?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | {
+        mobile?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        tablet?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        desktop?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        wide?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | null>;
+    readonly marginInlineEnd?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | {
+        mobile?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        tablet?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        desktop?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        wide?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | null>;
+    readonly outline?: ("none" | {
+        mobile?: "none" | undefined;
+        tablet?: "none" | undefined;
+        desktop?: "none" | undefined;
+        wide?: "none" | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, "none" | null>;
+    readonly padding?: (("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | {
+        mobile?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        tablet?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        desktop?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        wide?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | null>;
+    readonly paddingBlock?: (("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | {
+        mobile?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        tablet?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        desktop?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        wide?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | null>;
+    readonly paddingBlockStart?: (("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | {
+        mobile?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        tablet?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        desktop?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        wide?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | null>;
+    readonly paddingBlockEnd?: (("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | {
+        mobile?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        tablet?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        desktop?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        wide?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | null>;
+    readonly paddingInline?: (("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | {
+        mobile?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        tablet?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        desktop?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        wide?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | null>;
+    readonly paddingInlineStart?: (("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | {
+        mobile?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        tablet?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        desktop?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        wide?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | null>;
+    readonly paddingInlineEnd?: (("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | {
+        mobile?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        tablet?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        desktop?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        wide?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, ("medium" | "none" | "gutter" | "xsmall" | "small" | "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) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
+    readonly rowGap?: (("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | {
+        mobile?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        tablet?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        desktop?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+        wide?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | null>;
+    readonly textAlign?: ("center" | "left" | "right" | "justify" | {
+        mobile?: "center" | "left" | "right" | "justify" | undefined;
+        tablet?: "center" | "left" | "right" | "justify" | undefined;
+        desktop?: "center" | "left" | "right" | "justify" | undefined;
+        wide?: "center" | "left" | "right" | "justify" | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, "center" | "left" | "right" | "justify" | null>;
+    margin?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | {
+        mobile?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        tablet?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        desktop?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        wide?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | null>;
+    marginBlock?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | {
+        mobile?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        tablet?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        desktop?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        wide?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | null>;
+    marginInline?: ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | {
+        mobile?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        tablet?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        desktop?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+        wide?: "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | 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) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | null>;
+}) => string) & {
+    properties: Set<"borderRadius" | "color" | "borderWidth" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "flex" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "blockSize" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "justifyContent" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "maxBlockSize" | "maxInlineSize" | "opacity" | "overflowBlock" | "overflowInline" | "paddingBlockEnd" | "paddingBlockStart" | "paddingInlineEnd" | "paddingInlineStart" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "textTransform" | "textWrap" | "userSelect" | "whiteSpace" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "gap" | "inset" | "insetBlock" | "insetInline" | "margin" | "marginBlock" | "marginInline" | "outline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "placeItems" | "textDecoration">;
+};

package/dist/lib/css/atoms/{sprinkles.css.mjs → sprinkles.css.js}

@@ -1,12 +1,17 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles";
-import { unresponsiveProperties, responsiveProperties } from "./atomicProperties.mjs";
-import { breakpointNames, minMediaQuery } from "./breakpoints.mjs";
+import { unresponsiveProperties, responsiveProperties } from "./atomicProperties.js";
+import { breakpointNames, minMediaQuery } from "./breakpoints.js";
 setFileScope("src/lib/css/atoms/sprinkles.css.ts", "@blockle/blocks");
 const unresponsiveAtomicProperties = defineProperties({
   properties: unresponsiveProperties,
   shorthands: {
-    inset: ["insetBlockStart", "insetBlockEnd", "insetInlineStart", "insetInlineEnd"]
+    inset: [
+      "insetBlockStart",
+      "insetBlockEnd",
+      "insetInlineStart",
+      "insetInlineEnd"
+    ]
   }
 });
 const responsiveAtomicProperties = defineProperties({
@@ -26,13 +31,21 @@ const responsiveAtomicProperties = defineProperties({
   responsiveArray: breakpointNames,
   properties: responsiveProperties,
   shorthands: {
-    margin: ["marginBlockStart", "marginBlockEnd", "marginInlineStart", "marginInlineEnd"],
+    margin: [
+      "marginBlockStart",
+      "marginBlockEnd",
+      "marginInlineStart",
+      "marginInlineEnd"
+    ],
     marginBlock: ["marginBlockStart", "marginBlockEnd"],
     marginInline: ["marginInlineStart", "marginInlineEnd"],
     placeItems: ["justifyContent", "alignItems"]
   }
 });
-const atoms = createSprinkles(unresponsiveAtomicProperties, responsiveAtomicProperties);
+const atoms = createSprinkles(
+  unresponsiveAtomicProperties,
+  responsiveAtomicProperties
+);
 endFileScope();
 export {
   atoms

package/dist/lib/css/flexbox/flexbox.cjs

@@ -1,4 +1,5 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const justifyContentMap = {
   left: "flex-start",
   right: "flex-end",

package/dist/lib/css/flexbox/flexbox.d.ts

@@ -0,0 +1,15 @@
+export declare const justifyContentMap: {
+    readonly left: "flex-start";
+    readonly right: "flex-end";
+    readonly center: "center";
+    readonly between: "space-between";
+    readonly around: "space-around";
+};
+export type JustifyContentMap = typeof justifyContentMap;
+export declare const alignItemsMap: {
+    readonly left: "flex-start";
+    readonly right: "flex-end";
+    readonly center: "center";
+    readonly stretch: "stretch";
+};
+export type AlignItemsMap = typeof alignItemsMap;

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

@@ -1,4 +1,5 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 fileScope.setFileScope("src/lib/css/layers/layers.css.ts", "@blockle/blocks");

package/dist/lib/css/layers/layers.css.d.ts

@@ -0,0 +1 @@
+export declare const blocksLayer: string;

package/dist/lib/css/reset/reset.css.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/css/style/style.cjs

@@ -1,6 +1,7 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const css = require("@vanilla-extract/css");
-const lib_css_atoms_sprinkles_css_cjs = require("../atoms/sprinkles.css.cjs");
+const sprinkles_css = require("../atoms/sprinkles.css.cjs");
 function style(props) {
   const styleRule = {};
   const atomClassNames = [];
@@ -13,9 +14,9 @@ function style(props) {
     }).join(" ");
   }
   for (const [name, value] of Object.entries(props)) {
-    if (lib_css_atoms_sprinkles_css_cjs.atoms.properties.has(name)) {
+    if (sprinkles_css.atoms.properties.has(name)) {
       try {
-        atomClassNames.push(lib_css_atoms_sprinkles_css_cjs.atoms({ [name]: value }));
+        atomClassNames.push(sprinkles_css.atoms({ [name]: value }));
       } catch {
         styleRule[name] = value;
       }

package/dist/lib/css/style/style.d.ts

@@ -0,0 +1,12 @@
+import { StyleRule } from '@vanilla-extract/css';
+import { AnyString } from '../../utils/helpers';
+import { Atoms } from '../atoms';
+type StyleRuleWithAtoms = Omit<StyleRule, keyof Atoms> & {
+    [K in keyof Atoms]?: K extends keyof StyleRule ? Atoms[K] | AnyString | number : Atoms[K];
+};
+/**
+ * A wrapper around vanilla-extract's `style` function that allows you to use
+ * atoms and raw CSS values in the same object.
+ */
+export declare function style(props: StyleRuleWithAtoms | (StyleRuleWithAtoms | string)[]): string;
+export {};

package/dist/lib/css/style/{style.mjs → style.js}

@@ -1,5 +1,5 @@
 import { style as style$1 } from "@vanilla-extract/css";
-import { atoms } from "../atoms/sprinkles.css.mjs";
+import { atoms } from "../atoms/sprinkles.css.js";
 function style(props) {
   const styleRule = {};
   const atomClassNames = [];

package/dist/lib/css/utils/cssUtils.cjs

@@ -1,4 +1,5 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 function rem(value) {
   return `${value / 16}rem`;
 }

package/dist/lib/css/utils/cssUtils.d.ts

@@ -0,0 +1 @@
+export declare function rem(value: number): `${number}rem`;

package/dist/lib/react/mergeProps.cjs

@@ -1,6 +1,7 @@
 "use strict";
-const lib_utils_classnames_cjs = require("../utils/classnames.cjs");
-const lib_react_refs_cjs = require("./refs.cjs");
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classnames = require("../utils/classnames.cjs");
+const refs = require("./refs.cjs");
 function mergeProps(slotProps, childProps) {
   const overrideProps = {};
   for (const propName in childProps) {
@@ -25,11 +26,11 @@ function mergeProps(slotProps, childProps) {
           break;
         }
         case "className": {
-          overrideProps[propName] = lib_utils_classnames_cjs.classnames(slotPropValue, childPropValue);
+          overrideProps[propName] = classnames.classnames(slotPropValue, childPropValue);
           break;
         }
         case "ref": {
-          overrideProps[propName] = lib_react_refs_cjs.composeRefs(slotPropValue, childPropValue);
+          overrideProps[propName] = refs.composeRefs(slotPropValue, childPropValue);
           break;
         }
         default: {

package/dist/lib/react/mergeProps.d.ts

@@ -0,0 +1,4 @@
+export type UknownRecord = Record<string, unknown>;
+export declare function mergeProps(slotProps: UknownRecord, childProps: UknownRecord): {
+    [x: string]: unknown;
+};

package/dist/lib/react/{mergeProps.mjs → mergeProps.js}

@@ -1,5 +1,5 @@
-import { classnames } from "../utils/classnames.mjs";
-import { composeRefs } from "./refs.mjs";
+import { classnames } from "../utils/classnames.js";
+import { composeRefs } from "./refs.js";
 function mergeProps(slotProps, childProps) {
   const overrideProps = {};
   for (const propName in childProps) {

package/dist/lib/react/refs.cjs

@@ -1,4 +1,5 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 function setRef(ref, value) {
   if (typeof ref === "function") {
     ref(value);

package/dist/lib/react/refs.d.ts

@@ -0,0 +1,3 @@
+type PossibleRef<T> = React.Ref<T> | undefined | unknown;
+export declare function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
+export {};

package/dist/lib/theme/componentThemes.d.ts

@@ -0,0 +1,134 @@
+import { Atoms } from '../css/atoms';
+import { RecordLike } from '../utils/helpers';
+export type ButtonTheme = {
+    base: string;
+    variants: {
+        variant: 'solid' | 'outline' | 'ghost';
+        intent: 'neutral' | 'danger';
+        size: 'small' | 'medium' | 'large';
+        loading: boolean;
+        disabled: boolean;
+    };
+};
+export type LinkTheme = {
+    base: string;
+    variants: {
+        variant: 'inherit' | 'primary' | 'secondary';
+        underline: boolean;
+    };
+};
+export type SpinnerTheme = {
+    base: string;
+    variants: {
+        size: 'small' | 'medium' | 'large';
+        color: Exclude<Atoms['color'], undefined>;
+    };
+};
+export type DividerTheme = {
+    base?: string;
+    variants: {
+        color: Exclude<Atoms['color'], undefined>;
+    };
+};
+export type DialogTheme = {
+    dialog: string;
+    variants: {
+        size: 'small' | 'medium' | 'large';
+    };
+};
+export type InputTheme = {
+    container: string;
+    input: string;
+    variants: {
+        variant: 'solid' | 'outline';
+        disabled: boolean;
+        required: boolean;
+    };
+};
+export type CheckboxTheme = {
+    base: string;
+    icon: string;
+    label: string;
+    variants: {
+        required: boolean;
+    };
+};
+export type RadioTheme = {
+    base: string;
+    icon: string;
+    label: string;
+};
+export type LabelTheme = {
+    base: string;
+    variants: {
+        size: 'small' | 'medium' | 'large';
+        required: boolean;
+    };
+};
+export type ProgressTheme = {
+    base: string;
+    bar: string;
+    variants: {
+        indeterminate: boolean;
+    };
+};
+export type SwitchTheme = {
+    base: string;
+    slider: string;
+};
+export type PopoverTheme = {
+    base: string;
+};
+export type SelectTheme = {
+    wrapper?: string;
+    select: string;
+    icon: string;
+    variants: {
+        variant: 'solid' | 'outline';
+    };
+};
+export type SliderTheme = {
+    base: string;
+    track: string;
+    filledTrack: string;
+    thumb: string;
+    variants: {
+        size: 'small' | 'medium' | 'large';
+        colorScheme: 'primary' | 'secondary';
+        disabled: boolean;
+    };
+};
+export type TooltipTheme = {
+    base: string;
+    variants: {
+        colorScheme: 'primary' | 'secondary';
+    };
+};
+export type ComponentThemes = {
+    button: ButtonTheme;
+    checkbox: CheckboxTheme;
+    dialog: DialogTheme;
+    divider: DividerTheme;
+    input: InputTheme;
+    label: LabelTheme;
+    link: LinkTheme;
+    popover: PopoverTheme;
+    progress: ProgressTheme;
+    radio: RadioTheme;
+    select: SelectTheme;
+    slider: SliderTheme;
+    spinner: SpinnerTheme;
+    switch: SwitchTheme;
+    tooltip: TooltipTheme;
+};
+/**
+ * ComponentThemeProps is a helper type to define the props passed to useComponentStyles.
+ */
+export type ComponentThemeProps<T extends RecordLike> = Omit<{
+    [K in keyof T]?: Exclude<T[K], undefined> extends string ? boolean : never;
+}, 'variants'> & {
+    variants?: T['variants'] extends RecordLike ? Partial<T['variants']> : never;
+};
+export type ComponentThemesProps = {
+    [K in keyof ComponentThemes]: ComponentThemeProps<ComponentThemes[K]>;
+};

package/dist/lib/theme/makeComponentTheme.cjs

@@ -1,4 +1,5 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 function makeComponentTheme(component, componentTheme) {
   return componentTheme;
 }