@blockle/blocks 0.3.4 → 0.3.6

package/dist/index.cjs

@@ -8,6 +8,7 @@ const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/s
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const styles_components_Button_Button_css_cjs = require("./styles/components/Button/Button.css.cjs");
+const styles_components_Divider_divider_css_cjs = require("./styles/components/Divider/divider.css.cjs");
 const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
   return className || void 0;
@@ -98,6 +99,11 @@ function useComponentStyles(name, props) {
   }
   return classNames.join(" ");
 }
+const useComponentStyleDefaultProps = (name) => {
+  const { components } = useTheme();
+  const component = components[name];
+  return (component == null ? void 0 : component.defaultVariants) ?? {};
+};
 const Spinner = ({ className, size, color, ...restProps }) => {
   const spinnerClassName = useComponentStyles("spinner", { base: true, size, color });
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { color, className: classnames(spinnerClassName, className), ...restProps });
@@ -267,6 +273,19 @@ const Link = react.forwardRef(function Link2({ as, className, variant, underline
   const linkClassName = useComponentStyles("link", { base: true, variant, underline });
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
 });
+const Divider = ({ className, color }) => {
+  const dividerClass = useComponentStyles("divider", { base: true });
+  const dividerDefaults = useComponentStyleDefaultProps("divider");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      role: "separator",
+      width: "full",
+      backgroundColor: color ?? dividerDefaults.color,
+      className: classnames(className, dividerClass, styles_components_Divider_divider_css_cjs.divider)
+    }
+  );
+};
 exports.breakpointQuery = styles_lib_css_atoms_breakpoints_cjs.breakpointQuery;
 exports.makeTheme = styles_lib_css_theme_makeTheme_cjs.makeTheme;
 exports.makeComponentTheme = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme;
@@ -275,6 +294,7 @@ exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
 exports.BlocksProvider = BlocksProvider;
 exports.Box = Box;
 exports.Button = Button;
+exports.Divider = Divider;
 exports.Heading = Heading;
 exports.Inline = Inline;
 exports.Link = Link;

package/dist/index.d.ts

@@ -1 +1 @@
-export { BlocksProvider, BlocksProviderProps, BlocksTokens, Box, BoxProps, Button, ButtonProps, ComponentThemesMap, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, vars } from './momotaro.chunk.js';
+export { BlocksProvider, BlocksProviderProps, BlocksTokens, Box, BoxProps, Button, ButtonProps, ComponentThemesMap, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, vars } from './momotaro.chunk.js';

package/dist/index.mjs

@@ -8,6 +8,7 @@ import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext } from "react";
 import { buttonReset } from "./styles/components/Button/Button.css.mjs";
+import { divider } from "./styles/components/Divider/divider.css.mjs";
 const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
   return className || void 0;
@@ -98,6 +99,11 @@ function useComponentStyles(name, props) {
   }
   return classNames.join(" ");
 }
+const useComponentStyleDefaultProps = (name) => {
+  const { components } = useTheme();
+  const component = components[name];
+  return (component == null ? void 0 : component.defaultVariants) ?? {};
+};
 const Spinner = ({ className, size, color, ...restProps }) => {
   const spinnerClassName = useComponentStyles("spinner", { base: true, size, color });
   return /* @__PURE__ */ jsx(Box, { color, className: classnames(spinnerClassName, className), ...restProps });
@@ -267,10 +273,24 @@ const Link = forwardRef(function Link2({ as, className, variant, underline, ...r
   const linkClassName = useComponentStyles("link", { base: true, variant, underline });
   return /* @__PURE__ */ jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
 });
+const Divider = ({ className, color }) => {
+  const dividerClass = useComponentStyles("divider", { base: true });
+  const dividerDefaults = useComponentStyleDefaultProps("divider");
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "separator",
+      width: "full",
+      backgroundColor: color ?? dividerDefaults.color,
+      className: classnames(className, dividerClass, divider)
+    }
+  );
+};
 export {
   BlocksProvider,
   Box,
   Button,
+  Divider,
   Heading,
   Inline,
   Link,

package/dist/momotaro.chunk.d.ts

@@ -4,19 +4,19 @@ import { HTMLProps, ReactNode, FC } from 'react';
 import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
 
 declare const atoms: ((props: {
-    readonly backgroundColor?: ("white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link") | undefined;
-    readonly borderColor?: ("white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link") | undefined;
-    readonly borderRadius?: ("medium" | "small" | "large" | "xlarge") | undefined;
+    readonly backgroundColor?: "link" | "danger" | "primary" | "secondary" | "white" | "black" | "body" | "primaryLight" | "primaryDark" | "secondaryLight" | "secondaryDark" | "text" | "textLight" | "textDark" | "currentColor" | undefined;
+    readonly borderColor?: "link" | "danger" | "primary" | "secondary" | "white" | "black" | "body" | "primaryLight" | "primaryDark" | "secondaryLight" | "secondaryDark" | "text" | "textLight" | "textDark" | "currentColor" | undefined;
+    readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
     readonly bottom?: 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 boxShadow?: ("small" | "medium" | "large") | undefined;
+    readonly color?: "link" | "danger" | "primary" | "secondary" | "white" | "black" | "body" | "primaryLight" | "primaryDark" | "secondaryLight" | "secondaryDark" | "text" | "textLight" | "textDark" | "currentColor" | undefined;
     readonly cursor?: "auto" | "pointer" | undefined;
     readonly fontFamily?: "primary" | "secondary" | undefined;
     readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
-    readonly fontWeight?: ("regular" | "medium" | "strong") | undefined;
+    readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
     readonly height?: "auto" | "full" | undefined;
     readonly left?: 0 | undefined;
-    readonly lineHeight?: ("medium" | "xsmall" | "small" | "large" | "xlarge") | undefined;
+    readonly lineHeight?: ("small" | "medium" | "large" | "xsmall" | "xlarge") | undefined;
     readonly maxHeight?: "full" | undefined;
     readonly maxWidth?: "full" | undefined;
     readonly opacity?: 0 | 1 | undefined;
@@ -25,7 +25,7 @@ declare const atoms: ((props: {
     readonly overflowY?: "auto" | "hidden" | "scroll" | "visible" | undefined;
     readonly pointerEvents?: "none" | undefined;
     readonly right?: 0 | undefined;
-    readonly textDecoration?: "none" | "underline" | "overline" | "line-through" | undefined;
+    readonly textDecoration?: "underline" | "none" | "overline" | "line-through" | undefined;
     readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
     readonly textWrap?: "balance" | "wrap" | undefined;
     readonly top?: 0 | undefined;
@@ -42,183 +42,183 @@ declare const atoms: ((props: {
         tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
-    readonly columnGap?: (("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) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
+    readonly columnGap?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
     readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
         mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
         tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
         desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
         wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
     readonly flex?: (1 | {
         mobile?: 1 | undefined;
         tablet?: 1 | undefined;
         desktop?: 1 | undefined;
         wide?: 1 | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 1 | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 1 | null>;
     readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
         mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
         tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
         desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
         wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
     readonly flexGrow?: (0 | 1 | {
         mobile?: 0 | 1 | undefined;
         tablet?: 0 | 1 | undefined;
         desktop?: 0 | 1 | undefined;
         wide?: 0 | 1 | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
     readonly flexShrink?: (0 | 1 | {
         mobile?: 0 | 1 | undefined;
         tablet?: 0 | 1 | undefined;
         desktop?: 0 | 1 | undefined;
         wide?: 0 | 1 | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
     readonly flexWrap?: ("wrap" | "nowrap" | {
         mobile?: "wrap" | "nowrap" | undefined;
         tablet?: "wrap" | "nowrap" | undefined;
         desktop?: "wrap" | "nowrap" | undefined;
         wide?: "wrap" | "nowrap" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "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) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("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) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "wrap" | "nowrap" | null>;
+    readonly fontSize?: (("small" | "medium" | "large" | "xsmall" | "xlarge") | {
+        mobile?: ("small" | "medium" | "large" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("small" | "medium" | "large" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("small" | "medium" | "large" | "xsmall" | "xlarge") | undefined;
+        wide?: ("small" | "medium" | "large" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "xsmall" | "xlarge") | null>;
+    readonly gap?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
     readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
         mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
         tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
         desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
         wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
-    readonly marginBottom?: ("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) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | null>;
-    readonly marginLeft?: ("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) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | null>;
-    readonly marginRight?: ("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) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | null>;
-    readonly marginTop?: ("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) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
+    readonly marginBottom?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
+        mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
+    readonly marginLeft?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
+        mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
+    readonly marginRight?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
+        mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
+    readonly marginTop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
+        mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
     readonly outline?: ("none" | {
         mobile?: "none" | undefined;
         tablet?: "none" | undefined;
         desktop?: "none" | undefined;
         wide?: "none" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | null>;
-    readonly paddingBottom?: (("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) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | null>;
-    readonly paddingLeft?: (("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) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | null>;
-    readonly paddingRight?: (("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) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | null>;
-    readonly paddingTop?: (("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) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
+    readonly paddingBottom?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
+    readonly paddingLeft?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
+    readonly paddingRight?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
+    readonly paddingTop?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
     readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
         mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
         tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
         desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
         wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
-    readonly rowGap?: (("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) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
+    readonly rowGap?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
     readonly textAlign?: ("left" | "right" | "center" | "justify" | {
         mobile?: "left" | "right" | "center" | "justify" | undefined;
         tablet?: "left" | "right" | "center" | "justify" | undefined;
         desktop?: "left" | "right" | "center" | "justify" | undefined;
         wide?: "left" | "right" | "center" | "justify" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "left" | "right" | "center" | "justify" | null>;
-    margin?: ("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) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | null>;
-    marginX?: ("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) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | null>;
-    marginY?: ("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) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge" | "auto" | null>;
-    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) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | null>;
-    paddingX?: (("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) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | null>;
-    paddingY?: (("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) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("medium" | "none" | "gutter" | "xsmall" | "small" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
+    margin?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
+        mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
+    marginX?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
+        mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
+    marginY?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | {
+        mobile?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        tablet?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        desktop?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+        wide?: "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
+    padding?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
+    paddingX?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
+    paddingY?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
     placeItems?: ("center" | "flex-start" | "flex-end" | {
         mobile?: "center" | "flex-start" | "flex-end" | undefined;
         tablet?: "center" | "flex-start" | "flex-end" | undefined;
         desktop?: "center" | "flex-start" | "flex-end" | undefined;
         wide?: "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
 }) => string) & {
-    properties: Set<"borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "outline" | "alignItems" | "backgroundColor" | "bottom" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "height" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "rowGap" | "textAlign" | "textTransform" | "top" | "userSelect" | "whiteSpace" | "width" | "wordBreak" | "wordWrap" | "borderColor" | "flex" | "gap" | "inset" | "margin" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
+    properties: Set<"outline" | "borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignItems" | "backgroundColor" | "bottom" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "height" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "rowGap" | "textAlign" | "textTransform" | "top" | "userSelect" | "whiteSpace" | "width" | "wordBreak" | "wordWrap" | "borderColor" | "flex" | "gap" | "inset" | "margin" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
 };
 
 type Atoms = Parameters<typeof atoms>[0];
@@ -293,7 +293,14 @@ type SpinnerTheme = {
     };
 };
 type SpinnerThemeComponent = CreateComponentTheme<SpinnerTheme>;
-type ComponentThemes = ButtonThemeComponent | LinkThemeComponent | SpinnerThemeComponent;
+type DividerTheme = {
+    type: 'divider';
+    variants: {
+        color: Exclude<Atoms['color'], undefined>;
+    };
+};
+type DividerThemeComponent = CreateComponentTheme<DividerTheme>;
+type ComponentThemes = ButtonThemeComponent | LinkThemeComponent | SpinnerThemeComponent | DividerThemeComponent;
 type ComponentThemesMap = UnionThemesToRecord<ComponentThemes>;
 type UnionThemesToRecord<T extends {
     type: string;
@@ -338,9 +345,9 @@ type ButtonProps = {
 declare const Button: react.ForwardRefExoticComponent<{
     children: ReactNode;
     type?: "button" | "submit" | "reset" | undefined;
-    variant?: "link" | "solid" | "outline" | "ghost" | undefined;
-    intent?: "danger" | "neutral" | undefined;
-    size?: "medium" | "small" | "large" | undefined;
+    variant?: "solid" | "outline" | "ghost" | "link" | undefined;
+    intent?: "neutral" | "danger" | undefined;
+    size?: "small" | "medium" | "large" | undefined;
     width?: Atoms['width'];
     loading?: boolean | undefined;
     startSlot?: ReactNode;
@@ -432,6 +439,12 @@ type SpinnerProps = {
 } & MarginAtoms;
 declare const Spinner: FC<SpinnerProps>;
 
+type DividerProps = {
+    className?: string;
+    color?: Atoms['backgroundColor'];
+};
+declare const Divider: FC<DividerProps>;
+
 declare const breakpoints: {
     readonly mobile: 0;
     readonly tablet: 740;
@@ -485,39 +498,39 @@ declare const makeTheme: (theme: Theme) => {
 
 declare const vars: {
     space: {
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         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})`;
     };
     borderRadius: {
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     color: {
+        link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger: `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})`;
         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})`;
     };
     borderWidth: {
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     fontFamily: {
@@ -525,22 +538,22 @@ declare const vars: {
         secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     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})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     fontWeight: {
-        regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     lineHeight: {
-        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})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     transition: {
@@ -549,8 +562,8 @@ declare const vars: {
         fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     shadow: {
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     focus: {
@@ -566,4 +579,4 @@ declare const momotaro: {
     components: ComponentThemesMap;
 };
 
-export { BlocksProvider, BlocksProviderProps, BlocksTokens, Box, BoxProps, Button, ButtonProps, ComponentThemesMap, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, momotaro, vars };
+export { BlocksProvider, BlocksProviderProps, BlocksTokens, Box, BoxProps, Button, ButtonProps, ComponentThemesMap, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, momotaro, vars };

package/dist/styles/components/Divider/divider.css.cjs

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

package/dist/styles/components/Divider/divider.css.mjs

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

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

@@ -1,12 +1,13 @@
 "use strict";
 const styles_lib_css_theme_vars_css_cjs = require("../theme/vars.css.cjs");
+const colorWithCurrentColor = { ...styles_lib_css_theme_vars_css_cjs.vars.color, currentColor: "currentColor" };
 const unresponsiveProperties = {
-  backgroundColor: styles_lib_css_theme_vars_css_cjs.vars.color,
-  borderColor: styles_lib_css_theme_vars_css_cjs.vars.color,
+  backgroundColor: colorWithCurrentColor,
+  borderColor: colorWithCurrentColor,
   borderRadius: styles_lib_css_theme_vars_css_cjs.vars.borderRadius,
   bottom: [0],
   boxShadow: styles_lib_css_theme_vars_css_cjs.vars.shadow,
-  color: { ...styles_lib_css_theme_vars_css_cjs.vars.color, currentColor: "currentColor" },
+  color: colorWithCurrentColor,
   cursor: ["auto", "pointer"],
   fontFamily: styles_lib_css_theme_vars_css_cjs.vars.fontFamily,
   fontStyle: ["normal", "italic", "oblique"],

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

@@ -1,11 +1,12 @@
 import { vars } from "../theme/vars.css.mjs";
+const colorWithCurrentColor = { ...vars.color, currentColor: "currentColor" };
 const unresponsiveProperties = {
-  backgroundColor: vars.color,
-  borderColor: vars.color,
+  backgroundColor: colorWithCurrentColor,
+  borderColor: colorWithCurrentColor,
   borderRadius: vars.borderRadius,
   bottom: [0],
   boxShadow: vars.shadow,
-  color: { ...vars.color, currentColor: "currentColor" },
+  color: colorWithCurrentColor,
   cursor: ["auto", "pointer"],
   fontFamily: vars.fontFamily,
   fontStyle: ["normal", "italic", "oblique"],

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

@@ -0,0 +1,12 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const styles_lib_css_theme_makeComponentTheme_cjs = require("../../../lib/css/theme/makeComponentTheme.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/divider.css.ts?used", "blocks");
+const divider = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
+  type: "divider",
+  defaultVariants: {
+    color: "textLight"
+  }
+});
+fileScope.endFileScope();
+exports.divider = divider;

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

@@ -0,0 +1,13 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { makeComponentTheme } from "../../../lib/css/theme/makeComponentTheme.mjs";
+setFileScope("src/themes/momotaro/components/divider.css.ts?used", "blocks");
+const divider = makeComponentTheme({
+  type: "divider",
+  defaultVariants: {
+    color: "textLight"
+  }
+});
+endFileScope();
+export {
+  divider
+};

package/dist/styles/themes/momotaro/components/index.cjs

@@ -2,9 +2,11 @@
 const styles_themes_momotaro_components_button_css_cjs = require("./button.css.cjs");
 const styles_themes_momotaro_components_link_css_cjs = require("./link.css.cjs");
 const styles_themes_momotaro_components_spinner_css_cjs = require("./spinner.css.cjs");
+const styles_themes_momotaro_components_divider_css_cjs = require("./divider.css.cjs");
 const components = {
   button: styles_themes_momotaro_components_button_css_cjs.button,
   link: styles_themes_momotaro_components_link_css_cjs.link,
-  spinner: styles_themes_momotaro_components_spinner_css_cjs.spinner
+  spinner: styles_themes_momotaro_components_spinner_css_cjs.spinner,
+  divider: styles_themes_momotaro_components_divider_css_cjs.divider
 };
 exports.components = components;

package/dist/styles/themes/momotaro/components/index.mjs

@@ -1,10 +1,12 @@
 import { button } from "./button.css.mjs";
 import { link } from "./link.css.mjs";
 import { spinner } from "./spinner.css.mjs";
+import { divider } from "./divider.css.mjs";
 const components = {
   button,
   link,
-  spinner
+  spinner,
+  divider
 };
 export {
   components

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

@@ -2,11 +2,11 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const styles_lib_css_theme_makeTheme_cjs = require("../../lib/css/theme/makeTheme.cjs");
 const styles_themes_momotaro_components_index_cjs = require("./components/index.cjs");
-const styles_themes_momotaro_tokens_cjs = require("./tokens.cjs");
+const styles_themes_momotaro_tokens_css_cjs = require("./tokens.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/momotaro.css.ts?used", "blocks");
 const momotaro = styles_lib_css_theme_makeTheme_cjs.makeTheme({
   name: "momotaro",
-  tokens: styles_themes_momotaro_tokens_cjs.tokens,
+  tokens: styles_themes_momotaro_tokens_css_cjs.tokens,
   components: styles_themes_momotaro_components_index_cjs.components
 });
 fileScope.endFileScope();

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

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { makeTheme } from "../../lib/css/theme/makeTheme.mjs";
 import { components } from "./components/index.mjs";
-import { tokens } from "./tokens.mjs";
+import { tokens } from "./tokens.css.mjs";
 setFileScope("src/themes/momotaro/momotaro.css.ts?used", "blocks");
 const momotaro = makeTheme({
   name: "momotaro",

package/dist/styles/themes/momotaro/{tokens.cjs → tokens.css.cjs}

@@ -1,4 +1,6 @@
 "use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+fileScope.setFileScope("src/themes/momotaro/tokens.css.ts?used", "blocks");
 const tokens = {
   border: {
     radius: {
@@ -77,4 +79,5 @@ const tokens = {
     }
   }
 };
+fileScope.endFileScope();
 exports.tokens = tokens;

package/dist/styles/themes/momotaro/{tokens.mjs → tokens.css.mjs}

@@ -1,3 +1,5 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+setFileScope("src/themes/momotaro/tokens.css.ts?used", "blocks");
 const tokens = {
   border: {
     radius: {
@@ -76,6 +78,7 @@ const tokens = {
     }
   }
 };
+endFileScope();
 export {
   tokens
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
@@ -72,19 +72,19 @@
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "@types/react": "^18.2.25",
-    "@types/react-dom": "^18.2.10",
+    "@types/react-dom": "^18.2.11",
     "@typescript-eslint/eslint-plugin": "^6.7.4",
     "@typescript-eslint/parser": "^6.7.4",
     "@vanilla-extract/vite-plugin": "^3.8.2",
     "@vitest/coverage-v8": "^0.34.6",
     "cross-env": "^7.0.3",
-    "eslint": "^8.50.0",
+    "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jest": "^27.4.2",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.14",
+    "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-unicorn": "^48.0.1",
     "jsdom": "^22.1.0",
     "prettier": "^3.0.3",