@blockle/blocks 0.19.1 → 0.20.0-alpha1.0

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

@@ -10,5 +10,6 @@ function minMediaQuery(breakpoint) {
 }
 export {
   breakpointNames,
+  breakpoints,
   minMediaQuery
 };

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

@@ -0,0 +1,2 @@
+export type * from './atomTypes';
+export { atoms } from './sprinkles.css';

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

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const sprinkles = require("@vanilla-extract/sprinkles");
+const atomicProperties = require("./atomicProperties.cjs");
+const breakpoints = require("./breakpoints.cjs");
+fileScope.setFileScope("src/lib/css/atoms/sprinkles.css.ts", "@blockle/blocks");
+const unresponsiveAtomicProperties = sprinkles.defineProperties({
+  properties: atomicProperties.unresponsiveProperties,
+  shorthands: {
+    inset: [
+      "insetBlockStart",
+      "insetBlockEnd",
+      "insetInlineStart",
+      "insetInlineEnd"
+    ]
+  }
+});
+const responsiveAtomicProperties = sprinkles.defineProperties({
+  defaultCondition: "mobile",
+  conditions: {
+    mobile: {},
+    tablet: {
+      "@media": breakpoints.minMediaQuery("tablet")
+    },
+    desktop: {
+      "@media": breakpoints.minMediaQuery("desktop")
+    },
+    wide: {
+      "@media": breakpoints.minMediaQuery("wide")
+    }
+  },
+  responsiveArray: breakpoints.breakpointNames,
+  properties: atomicProperties.responsiveProperties,
+  shorthands: {
+    margin: [
+      "marginBlockStart",
+      "marginBlockEnd",
+      "marginInlineStart",
+      "marginInlineEnd"
+    ],
+    marginBlock: ["marginBlockStart", "marginBlockEnd"],
+    marginInline: ["marginInlineStart", "marginInlineEnd"],
+    placeItems: ["justifyContent", "alignItems"]
+  }
+});
+const atoms = sprinkles.createSprinkles(
+  unresponsiveAtomicProperties,
+  responsiveAtomicProperties
+);
+fileScope.endFileScope();
+exports.atoms = atoms;

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/{styles/lib/css/atoms/sprinkles.css.mjs → lib/css/atoms/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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const justifyContentMap = {
+  left: "flex-start",
+  right: "flex-end",
+  center: "center",
+  between: "space-between",
+  around: "space-around"
+};
+const alignItemsMap = {
+  left: "flex-start",
+  right: "flex-end",
+  center: "center",
+  stretch: "stretch"
+};
+exports.alignItemsMap = alignItemsMap;
+exports.justifyContentMap = justifyContentMap;

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/flexbox/flexbox.js

@@ -0,0 +1,17 @@
+const justifyContentMap = {
+  left: "flex-start",
+  right: "flex-end",
+  center: "center",
+  between: "space-between",
+  around: "space-around"
+};
+const alignItemsMap = {
+  left: "flex-start",
+  right: "flex-end",
+  center: "center",
+  stretch: "stretch"
+};
+export {
+  alignItemsMap,
+  justifyContentMap
+};

package/dist/{styles/lib → 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/{styles/lib → 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 styles_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 (styles_lib_css_atoms_sprinkles_css_cjs.atoms.properties.has(name)) {
+    if (sprinkles_css.atoms.properties.has(name)) {
       try {
-        atomClassNames.push(styles_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/{styles/lib/css/style/style.mjs → lib/css/style/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/{styles/lib → 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

@@ -0,0 +1,43 @@
+"use strict";
+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) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    if (childPropValue === void 0) {
+      continue;
+    }
+    if (slotPropValue === void 0) {
+      overrideProps[propName] = childPropValue;
+      continue;
+    }
+    if (typeof slotPropValue === "function" && typeof childPropValue === "function") {
+      overrideProps[propName] = (...args) => {
+        childPropValue(...args);
+        slotPropValue(...args);
+      };
+    } else
+      switch (propName) {
+        case "style": {
+          overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+          break;
+        }
+        case "className": {
+          overrideProps[propName] = classnames.classnames(slotPropValue, childPropValue);
+          break;
+        }
+        case "ref": {
+          overrideProps[propName] = refs.composeRefs(slotPropValue, childPropValue);
+          break;
+        }
+        default: {
+          overrideProps[propName] = childPropValue;
+        }
+      }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+exports.mergeProps = mergeProps;

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.js

@@ -0,0 +1,43 @@
+import { classnames } from "../utils/classnames.js";
+import { composeRefs } from "./refs.js";
+function mergeProps(slotProps, childProps) {
+  const overrideProps = {};
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    if (childPropValue === void 0) {
+      continue;
+    }
+    if (slotPropValue === void 0) {
+      overrideProps[propName] = childPropValue;
+      continue;
+    }
+    if (typeof slotPropValue === "function" && typeof childPropValue === "function") {
+      overrideProps[propName] = (...args) => {
+        childPropValue(...args);
+        slotPropValue(...args);
+      };
+    } else
+      switch (propName) {
+        case "style": {
+          overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+          break;
+        }
+        case "className": {
+          overrideProps[propName] = classnames(slotPropValue, childPropValue);
+          break;
+        }
+        case "ref": {
+          overrideProps[propName] = composeRefs(slotPropValue, childPropValue);
+          break;
+        }
+        default: {
+          overrideProps[propName] = childPropValue;
+        }
+      }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+export {
+  mergeProps
+};

package/dist/lib/react/refs.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      setRef(ref, node);
+    }
+  };
+}
+exports.composeRefs = composeRefs;

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/react/refs.js

@@ -0,0 +1,17 @@
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      setRef(ref, node);
+    }
+  };
+}
+export {
+  composeRefs
+};