@blockle/blocks 0.19.1 → 0.20.0-alpha1.0

package/dist/lib/asChildRenderer/createAsChildTemplate.cjs

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const mergeProps = require("../react/mergeProps.cjs");
+function createAsChildTemplate(defaultElement) {
+  const Tag = defaultElement;
+  const Template = ({
+    asChild,
+    children,
+    ref,
+    ...rootProps
+  }) => {
+    if (!asChild) {
+      const tagProps = { ref, ...rootProps };
+      return /* @__PURE__ */ jsxRuntime.jsx(Tag, { ...tagProps, children });
+    }
+    const childrenArray = react.Children.toArray(children);
+    const slotIndex = childrenArray.findIndex((child) => {
+      if (!react.isValidElement(child)) {
+        return false;
+      }
+      return child.type === Slot;
+    });
+    const slot = childrenArray[slotIndex];
+    if (!slot) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("Template: No Slot provided");
+      }
+      return null;
+    }
+    if (!isValidElementWithChildren(slot)) {
+      return null;
+    }
+    if (!react.isValidElement(slot.props.children)) {
+      if (process.env.NODE_ENV !== "production") {
+        if (react.Children.toArray(slot.props.children).length === 0) {
+          console.error("When using asChild, at least one child is required");
+        } else {
+          console.error("When using asChild, only one child is allowed");
+        }
+      }
+      return null;
+    }
+    if (!isValidElementWithChildren(slot.props.children)) {
+      return null;
+    }
+    const nextChildren = [...childrenArray];
+    if (nextChildren.length === 1 && !slot.props.children.props.children) {
+      return react.cloneElement(
+        slot.props.children,
+        mergeProps.mergeProps(rootProps, slot.props.children.props)
+      );
+    }
+    nextChildren[slotIndex] = slot.props.children.props.children;
+    return react.cloneElement(
+      slot.props.children,
+      mergeProps.mergeProps(rootProps, slot.props.children.props),
+      nextChildren
+    );
+  };
+  return {
+    Template,
+    Slot
+  };
+}
+function isValidElementWithChildren(child) {
+  return react.isValidElement(child) && !!child.props;
+}
+const Slot = ({ children }) => {
+  return children;
+};
+exports.createAsChildTemplate = createAsChildTemplate;

package/dist/lib/asChildRenderer/createAsChildTemplate.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { HTMLElementProps } from '../utils/utils';
+type TemplateProps = {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    ref?: React.Ref<Element>;
+};
+/**
+ * Create a Template component that can render as a child of another component with asChild prop.
+ *
+ * Example
+ * // Create a Template and Slot components with div as default element
+ * const { Template, Slot } = createAsChildContainer('div');
+ *
+ * const MyComponent = ({ children, asChild, ...restProps }) => {
+ *  return (
+ *   <Template asChild={asChild} {...restProps}>
+ *     <Slot>{childen}</Slot> // Slot is required, will be replaced with children
+ *   </Template>
+ * );
+ * }
+ *
+ * <MyComponent className="test">Not a link</MyComponent> // Renders as <div class="test">Not a link</div>
+ * <MyComponent className="test"><a href="#">Link</a></MyComponent> // Renders as <div class="test"><a href="#">Link</a></div>
+ * <MyComponent className="test" asChild><a href="#">Link</a></MyComponent> // Renders as <a href="#" class="test">Link</a>
+ */
+export declare function createAsChildTemplate<T extends keyof HTMLElementTagNameMap>(defaultElement: T): {
+    Template: React.FC<TemplateProps & HTMLElementProps<HTMLElementTagNameMap[T]>>;
+    Slot: React.FC<SlotProps>;
+};
+type SlotProps = {
+    children: React.ReactNode;
+};
+export {};

package/dist/lib/asChildRenderer/createAsChildTemplate.js

@@ -0,0 +1,73 @@
+import { jsx } from "react/jsx-runtime";
+import { Children, isValidElement, cloneElement } from "react";
+import { mergeProps } from "../react/mergeProps.js";
+function createAsChildTemplate(defaultElement) {
+  const Tag = defaultElement;
+  const Template = ({
+    asChild,
+    children,
+    ref,
+    ...rootProps
+  }) => {
+    if (!asChild) {
+      const tagProps = { ref, ...rootProps };
+      return /* @__PURE__ */ jsx(Tag, { ...tagProps, children });
+    }
+    const childrenArray = Children.toArray(children);
+    const slotIndex = childrenArray.findIndex((child) => {
+      if (!isValidElement(child)) {
+        return false;
+      }
+      return child.type === Slot;
+    });
+    const slot = childrenArray[slotIndex];
+    if (!slot) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("Template: No Slot provided");
+      }
+      return null;
+    }
+    if (!isValidElementWithChildren(slot)) {
+      return null;
+    }
+    if (!isValidElement(slot.props.children)) {
+      if (process.env.NODE_ENV !== "production") {
+        if (Children.toArray(slot.props.children).length === 0) {
+          console.error("When using asChild, at least one child is required");
+        } else {
+          console.error("When using asChild, only one child is allowed");
+        }
+      }
+      return null;
+    }
+    if (!isValidElementWithChildren(slot.props.children)) {
+      return null;
+    }
+    const nextChildren = [...childrenArray];
+    if (nextChildren.length === 1 && !slot.props.children.props.children) {
+      return cloneElement(
+        slot.props.children,
+        mergeProps(rootProps, slot.props.children.props)
+      );
+    }
+    nextChildren[slotIndex] = slot.props.children.props.children;
+    return cloneElement(
+      slot.props.children,
+      mergeProps(rootProps, slot.props.children.props),
+      nextChildren
+    );
+  };
+  return {
+    Template,
+    Slot
+  };
+}
+function isValidElementWithChildren(child) {
+  return isValidElement(child) && !!child.props;
+}
+const Slot = ({ children }) => {
+  return children;
+};
+export {
+  createAsChildTemplate
+};

package/dist/lib/asChildRenderer/createAsChildTemplate.spec.d.ts

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

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

@@ -0,0 +1,37 @@
+import { atoms } from './sprinkles.css';
+export type Atoms = Parameters<typeof atoms>[0];
+export type ResponsiveValue<T> = T | [T] | [T, T] | [T, T, T] | [T, T, T, T];
+export type ResponsiveDisplayFlex = ResponsiveValue<'none' | 'flex' | 'inline-flex'>;
+export type MarginAtoms = {
+    margin?: Atoms['margin'];
+    marginBlock?: Atoms['marginBlock'];
+    marginBlockStart?: Atoms['marginBlockStart'];
+    marginBlockEnd?: Atoms['marginBlockEnd'];
+    marginInline?: Atoms['marginInline'];
+    marginInlineStart?: Atoms['marginInlineStart'];
+    marginInlineEnd?: Atoms['marginInlineEnd'];
+};
+export type PaddingAtoms = {
+    padding?: Atoms['padding'];
+    paddingBlock?: Atoms['paddingBlock'];
+    paddingBlockStart?: Atoms['paddingBlockStart'];
+    paddingBlockEnd?: Atoms['paddingBlockEnd'];
+    paddingInline?: Atoms['paddingInline'];
+    paddingInlineStart?: Atoms['paddingInlineStart'];
+    paddingInlineEnd?: Atoms['paddingInlineEnd'];
+};
+export type TextAtoms = {
+    color?: Atoms['color'];
+    fontFamily?: Atoms['fontFamily'];
+    fontSize?: Atoms['fontSize'];
+    fontStyle?: Atoms['fontStyle'];
+    fontWeight?: Atoms['fontWeight'];
+    lineHeight?: Atoms['lineHeight'];
+    textAlign?: Atoms['textAlign'];
+    textDecoration?: Atoms['textDecoration'];
+    textTransform?: Atoms['textTransform'];
+    textWrap?: Atoms['textWrap'];
+    whiteSpace?: Atoms['whiteSpace'];
+    wordBreak?: Atoms['wordBreak'];
+    wordWrap?: Atoms['wordWrap'];
+};

package/dist/{styles/lib → lib}/css/atoms/atomicProperties.cjs

@@ -1,12 +1,13 @@
 "use strict";
-const styles_lib_theme_vars_css_cjs = require("../../theme/vars.css.cjs");
-const colorsWithCurrentColor = { ...styles_lib_theme_vars_css_cjs.vars.color, currentColor: "currentColor" };
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vars_css = require("../../theme/vars.css.cjs");
+const colorsWithCurrentColor = { ...vars_css.vars.color, currentColor: "currentColor" };
 const size = { auto: "auto", full: "100%", "fit-content": "fit-content" };
 const unresponsiveProperties = {
   backgroundColor: colorsWithCurrentColor,
   borderColor: colorsWithCurrentColor,
-  borderRadius: styles_lib_theme_vars_css_cjs.vars.borderRadius,
-  borderWidth: styles_lib_theme_vars_css_cjs.vars.borderWidth,
+  borderRadius: vars_css.vars.borderRadius,
+  borderWidth: vars_css.vars.borderWidth,
   border: ["none"],
   insetBlock: [0],
   insetBlockStart: [0],
@@ -14,13 +15,13 @@ const unresponsiveProperties = {
   insetInline: [0],
   insetInlineStart: [0],
   insetInlineEnd: [0],
-  boxShadow: styles_lib_theme_vars_css_cjs.vars.shadow,
+  boxShadow: vars_css.vars.shadow,
   color: colorsWithCurrentColor,
   cursor: ["auto", "pointer"],
-  fontFamily: styles_lib_theme_vars_css_cjs.vars.fontFamily,
+  fontFamily: vars_css.vars.fontFamily,
   fontStyle: ["normal", "italic", "oblique"],
-  fontWeight: styles_lib_theme_vars_css_cjs.vars.fontWeight,
-  lineHeight: styles_lib_theme_vars_css_cjs.vars.lineHeight,
+  fontWeight: vars_css.vars.fontWeight,
+  lineHeight: vars_css.vars.lineHeight,
   blockSize: size,
   maxBlockSize: size,
   inlineSize: size,
@@ -33,18 +34,18 @@ const unresponsiveProperties = {
   textDecoration: ["overline", "line-through", "underline", "none"],
   textTransform: ["lowercase", "uppercase", "capitalize"],
   textWrap: ["balance", "wrap"],
-  transition: styles_lib_theme_vars_css_cjs.vars.transition,
+  transition: vars_css.vars.transition,
   userSelect: ["none"],
   whiteSpace: ["nowrap", "pre", "pre-line", "pre-wrap"],
   wordBreak: ["break-word"],
   wordWrap: ["break-word"]
 };
-const marginSpace = { auto: "auto", ...styles_lib_theme_vars_css_cjs.vars.space };
+const marginSpace = { auto: "auto", ...vars_css.vars.space };
 const responsiveProperties = {
   alignContent: ["stretch", "center", "flex-start", "flex-end"],
   alignItems: ["stretch", "center", "flex-start", "flex-end"],
   alignSelf: ["stretch", "center", "flex-start", "flex-end"],
-  columnGap: styles_lib_theme_vars_css_cjs.vars.space,
+  columnGap: vars_css.vars.space,
   display: [
     "none",
     "flex",
@@ -60,23 +61,29 @@ const responsiveProperties = {
   flexGrow: [0, 1],
   flexShrink: [0, 1],
   flexWrap: ["nowrap", "wrap"],
-  fontSize: styles_lib_theme_vars_css_cjs.vars.fontSize,
-  gap: styles_lib_theme_vars_css_cjs.vars.space,
-  justifyContent: ["flex-start", "flex-end", "center", "space-between", "space-around"],
+  fontSize: vars_css.vars.fontSize,
+  gap: vars_css.vars.space,
+  justifyContent: [
+    "flex-start",
+    "flex-end",
+    "center",
+    "space-between",
+    "space-around"
+  ],
   marginBlockStart: marginSpace,
   marginBlockEnd: marginSpace,
   marginInlineStart: marginSpace,
   marginInlineEnd: marginSpace,
   outline: ["none"],
-  padding: styles_lib_theme_vars_css_cjs.vars.space,
-  paddingBlock: styles_lib_theme_vars_css_cjs.vars.space,
-  paddingBlockStart: styles_lib_theme_vars_css_cjs.vars.space,
-  paddingBlockEnd: styles_lib_theme_vars_css_cjs.vars.space,
-  paddingInline: styles_lib_theme_vars_css_cjs.vars.space,
-  paddingInlineStart: styles_lib_theme_vars_css_cjs.vars.space,
-  paddingInlineEnd: styles_lib_theme_vars_css_cjs.vars.space,
+  padding: vars_css.vars.space,
+  paddingBlock: vars_css.vars.space,
+  paddingBlockStart: vars_css.vars.space,
+  paddingBlockEnd: vars_css.vars.space,
+  paddingInline: vars_css.vars.space,
+  paddingInlineStart: vars_css.vars.space,
+  paddingInlineEnd: vars_css.vars.space,
   position: ["relative", "fixed", "absolute", "sticky", "static"],
-  rowGap: styles_lib_theme_vars_css_cjs.vars.space,
+  rowGap: vars_css.vars.space,
   textAlign: ["center", "left", "right", "justify"]
 };
 exports.responsiveProperties = responsiveProperties;

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

@@ -0,0 +1,286 @@
+export declare const unresponsiveProperties: {
+    readonly backgroundColor: {
+        currentColor: string;
+        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})`;
+        danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly borderColor: {
+        currentColor: string;
+        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})`;
+        danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly borderRadius: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `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})`;
+    };
+    readonly borderWidth: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly border: readonly ["none"];
+    readonly insetBlock: readonly [0];
+    readonly insetBlockStart: readonly [0];
+    readonly insetBlockEnd: readonly [0];
+    readonly insetInline: readonly [0];
+    readonly insetInlineStart: readonly [0];
+    readonly insetInlineEnd: readonly [0];
+    readonly boxShadow: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly color: {
+        currentColor: string;
+        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})`;
+        danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly cursor: readonly ["auto", "pointer"];
+    readonly fontFamily: {
+        body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly fontStyle: readonly ["normal", "italic", "oblique"];
+    readonly fontWeight: {
+        regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly lineHeight: {
+        medium: `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})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly blockSize: {
+        auto: string;
+        full: string;
+        'fit-content': string;
+    };
+    readonly maxBlockSize: {
+        auto: string;
+        full: string;
+        'fit-content': string;
+    };
+    readonly inlineSize: {
+        auto: string;
+        full: string;
+        'fit-content': string;
+    };
+    readonly maxInlineSize: {
+        auto: string;
+        full: string;
+        'fit-content': string;
+    };
+    readonly opacity: readonly [0, 1];
+    readonly overflow: readonly ["hidden", "scroll", "visible", "auto"];
+    readonly overflowBlock: readonly ["hidden", "scroll", "visible", "auto"];
+    readonly overflowInline: readonly ["hidden", "scroll", "visible", "auto"];
+    readonly pointerEvents: readonly ["none"];
+    readonly textDecoration: readonly ["overline", "line-through", "underline", "none"];
+    readonly textTransform: readonly ["lowercase", "uppercase", "capitalize"];
+    readonly textWrap: readonly ["balance", "wrap"];
+    readonly 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})`;
+    };
+    readonly userSelect: readonly ["none"];
+    readonly whiteSpace: readonly ["nowrap", "pre", "pre-line", "pre-wrap"];
+    readonly wordBreak: readonly ["break-word"];
+    readonly wordWrap: readonly ["break-word"];
+};
+export type UnresponsiveProperties = keyof typeof unresponsiveProperties;
+export declare const responsiveProperties: {
+    readonly alignContent: readonly ["stretch", "center", "flex-start", "flex-end"];
+    readonly alignItems: readonly ["stretch", "center", "flex-start", "flex-end"];
+    readonly alignSelf: readonly ["stretch", "center", "flex-start", "flex-end"];
+    readonly columnGap: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        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})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly display: readonly ["none", "flex", "inline-flex", "block", "inline", "inline-block", "grid", "inline-grid"];
+    readonly flex: readonly [1];
+    readonly flexDirection: readonly ["row", "row-reverse", "column", "column-reverse"];
+    readonly flexGrow: readonly [0, 1];
+    readonly flexShrink: readonly [0, 1];
+    readonly flexWrap: readonly ["nowrap", "wrap"];
+    readonly fontSize: {
+        medium: `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})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly gap: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        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})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly justifyContent: readonly ["flex-start", "flex-end", "center", "space-between", "space-around"];
+    readonly marginBlockStart: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        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})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        auto: string;
+    };
+    readonly marginBlockEnd: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        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})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        auto: string;
+    };
+    readonly marginInlineStart: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        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})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        auto: string;
+    };
+    readonly marginInlineEnd: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        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})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        auto: string;
+    };
+    readonly outline: readonly ["none"];
+    readonly padding: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        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})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly paddingBlock: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        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})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly paddingBlockStart: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        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})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly paddingBlockEnd: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        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})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly paddingInline: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        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})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly paddingInlineStart: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        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})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly paddingInlineEnd: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        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})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly position: readonly ["relative", "fixed", "absolute", "sticky", "static"];
+    readonly rowGap: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        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})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly textAlign: readonly ["center", "left", "right", "justify"];
+};
+export type ResponsiveProperties = keyof typeof responsiveProperties;

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

@@ -1,4 +1,4 @@
-import { vars } from "../../theme/vars.css.mjs";
+import { vars } from "../../theme/vars.css.js";
 const colorsWithCurrentColor = { ...vars.color, currentColor: "currentColor" };
 const size = { auto: "auto", full: "100%", "fit-content": "fit-content" };
 const unresponsiveProperties = {
@@ -61,7 +61,13 @@ const responsiveProperties = {
   flexWrap: ["nowrap", "wrap"],
   fontSize: vars.fontSize,
   gap: vars.space,
-  justifyContent: ["flex-start", "flex-end", "center", "space-between", "space-around"],
+  justifyContent: [
+    "flex-start",
+    "flex-end",
+    "center",
+    "space-between",
+    "space-around"
+  ],
   marginBlockStart: marginSpace,
   marginBlockEnd: marginSpace,
   marginInlineStart: marginSpace,

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

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

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

@@ -1,4 +1,5 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const breakpointNames = ["mobile", "tablet", "desktop", "wide"];
 const breakpoints = {
   mobile: 0,
@@ -10,4 +11,5 @@ function minMediaQuery(breakpoint) {
   return `screen and (min-width: ${breakpoints[breakpoint]}px)`;
 }
 exports.breakpointNames = breakpointNames;
+exports.breakpoints = breakpoints;
 exports.minMediaQuery = minMediaQuery;

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

@@ -0,0 +1,9 @@
+export declare const breakpointNames: readonly ["mobile", "tablet", "desktop", "wide"];
+export declare const breakpoints: {
+    readonly mobile: 0;
+    readonly tablet: 740;
+    readonly desktop: 992;
+    readonly wide: 1200;
+};
+export type Breakpoint = keyof typeof breakpoints;
+export declare function minMediaQuery(breakpoint: Exclude<Breakpoint, 'mobile'>): string;