@blockle/blocks 0.4.1 → 0.5.1

package/README.md

@@ -46,9 +46,18 @@ import { makeTokens, makeComponentTheme, makeTheme } from "@blockle/blocks";
 
 const tokens = makeTokens({ ... });
 
-const button = makeComponentTheme({
-  type: 'button',
-  ...
+const button = makeComponentTheme('button', {
+  base: style({
+    ...
+  }),
+  variants: {
+    primary: style({
+      ...
+    }),
+    secondary: style({
+      ...
+    })
+  },
 });
 
 const theme = makeTheme({

package/dist/index.cjs

@@ -129,7 +129,9 @@ const Button = react.forwardRef(function Button2({
     base: true,
     variant: isLinkVariant ? "solid" : variant,
     intent,
-    size
+    size,
+    disabled,
+    loading
   });
   const linkClassName = useComponentStyles("link", { base: true, variant: "primary" });
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -275,7 +277,7 @@ 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 Divider = ({ className, color, ...restProps }) => {
   const dividerClass = useComponentStyles("divider", { base: true });
   const dividerDefaults = useComponentStyleDefaultProps("divider");
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -284,7 +286,8 @@ const Divider = ({ className, color }) => {
       role: "separator",
       width: "full",
       backgroundColor: color ?? dividerDefaults.color,
-      className: classnames(className, dividerClass, styles_components_Divider_divider_css_cjs.divider)
+      className: classnames(className, dividerClass, styles_components_Divider_divider_css_cjs.divider),
+      ...restProps
     }
   );
 };

package/dist/index.mjs

@@ -129,7 +129,9 @@ const Button = forwardRef(function Button2({
     base: true,
     variant: isLinkVariant ? "solid" : variant,
     intent,
-    size
+    size,
+    disabled,
+    loading
   });
   const linkClassName = useComponentStyles("link", { base: true, variant: "primary" });
   return /* @__PURE__ */ jsxs(
@@ -275,7 +277,7 @@ 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 Divider = ({ className, color, ...restProps }) => {
   const dividerClass = useComponentStyles("divider", { base: true });
   const dividerDefaults = useComponentStyleDefaultProps("divider");
   return /* @__PURE__ */ jsx(
@@ -284,7 +286,8 @@ const Divider = ({ className, color }) => {
       role: "separator",
       width: "full",
       backgroundColor: color ?? dividerDefaults.color,
-      className: classnames(className, dividerClass, divider)
+      className: classnames(className, dividerClass, divider),
+      ...restProps
     }
   );
 };

package/dist/momotaro.chunk.d.ts

@@ -38,188 +38,200 @@ declare const atoms: ((props: {
     readonly wordWrap?: "break-word" | undefined;
     inset?: 0 | undefined;
 } & {
+    readonly alignContent?: ("stretch" | "center" | "flex-start" | "flex-end" | {
+        mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
+        tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
+        desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
+        wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
     readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
         mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
+    readonly alignSelf?: ("stretch" | "center" | "flex-start" | "flex-end" | {
+        mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
+        tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
+        desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
+        wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
+    } | undefined) | _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<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
+    } | 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<1 | 2 | 3 | 4, "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<1 | 2 | 3 | 4, 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<1 | 2 | 3 | 4, "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<1 | 2 | 3 | 4, 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<1 | 2 | 3 | 4, 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<1 | 2 | 3 | 4, "wrap" | "nowrap" | 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<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "xsmall" | "xlarge") | null>;
+    } | 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<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
+    } | 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<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | 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<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
+    } | 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<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
+    } | 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<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
+    } | 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<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
+    } | 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<1 | 2 | 3 | 4, "none" | 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<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
+    } | 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<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
+    } | 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<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
+    } | 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<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
+    } | 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<1 | 2 | 3 | 4, "relative" | "fixed" | "absolute" | "sticky" | "static" | 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<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
+    } | 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<1 | 2 | 3 | 4, "left" | "right" | "center" | "justify" | 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<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
+    } | 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<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
+    } | 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<1 | 2 | 3 | 4, "small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge" | "auto" | null>;
+    } | 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<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
+    } | 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<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
+    } | 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<1 | 2 | 3 | 4, ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | null>;
+    } | 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<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
 }) => string) & {
-    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" | "border" | "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" | "alignContent" | "alignItems" | "alignSelf" | "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" | "border" | "borderColor" | "flex" | "gap" | "inset" | "margin" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
 };
 
 declare const breakpoints: {
@@ -269,7 +281,7 @@ type CreateComponentTheme<T extends Theme$1> = {
     compoundVariants?: Array<{
         style: string;
         variants: {
-            [VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup];
+            [VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup] extends string ? T['variants'][VariantGroup] : boolean;
         };
     }>;
     defaultVariants?: {
@@ -282,14 +294,17 @@ type CreateThemeProps<T extends Theme$1> = {
     type: T['type'];
     base?: boolean;
 };
-declare const makeComponentTheme: <T extends ComponentThemes>(options: T) => T;
+declare const makeComponentTheme: <T extends "button" | "link" | "spinner" | "divider" | "dialog", const O extends ComponentThemesMap[T]>(name: T, options: O) => O;
 
 type ButtonTheme = {
     type: 'button';
+    base: boolean;
     variants: {
         variant: 'solid' | 'outline' | 'ghost' | 'link';
         intent: 'neutral' | 'danger';
         size: 'small' | 'medium' | 'large';
+        loading: boolean;
+        disabled: boolean;
     };
 };
 type ButtonThemeProps = CreateThemeProps<ButtonTheme>;
@@ -470,6 +485,7 @@ declare const BlocksProvider: React.FC<BlocksProviderProps>;
 type BoxProps = {
     children?: React.ReactNode;
     className?: string;
+    style?: React.CSSProperties;
 } & Atoms;
 type PolymorphicBox = ForwardRefComponent<'div', BoxProps>;
 declare const Box: PolymorphicBox;
@@ -483,6 +499,7 @@ type ButtonProps = {
     intent?: ButtonTheme['variants']['intent'];
     size?: ButtonTheme['variants']['size'];
     width?: Atoms['width'];
+    alignSelf?: Atoms['alignSelf'];
     loading?: boolean;
     startSlot?: ReactNode;
     endSlot?: ReactNode;
@@ -495,6 +512,7 @@ declare const Button: react.ForwardRefExoticComponent<{
     intent?: "neutral" | "danger" | undefined;
     size?: "small" | "medium" | "large" | undefined;
     width?: Atoms['width'];
+    alignSelf?: Atoms['alignSelf'];
     loading?: boolean | undefined;
     startSlot?: ReactNode;
     endSlot?: ReactNode;
@@ -502,13 +520,13 @@ declare const Button: react.ForwardRefExoticComponent<{
 } & Omit<HTMLElementProps<HTMLButtonElement>, "size"> & react.RefAttributes<HTMLButtonElement>>;
 
 type HeadingProps = {
-    className?: string;
-    level: 1 | 2 | 3 | 4 | 5 | 6;
-    children: React.ReactNode;
     align?: Atoms['textAlign'];
+    children: React.ReactNode;
+    className?: string;
+    fontFamily?: Atoms['fontFamily'];
     fontSize?: Atoms['fontSize'];
     fontWeight?: Atoms['fontWeight'];
-    fontFamily?: Atoms['fontFamily'];
+    level: 1 | 2 | 3 | 4 | 5 | 6;
 } & MarginAndPaddingAtoms & HTMLElementProps<HTMLHeadingElement>;
 declare const Heading: React.FC<HeadingProps>;
 
@@ -529,22 +547,25 @@ declare const alignItemsMap: {
 type AlignItemsMap = typeof alignItemsMap;
 
 type InlineProps = {
-    as?: 'div' | 'ul' | 'ol' | 'nav';
-    children: React.ReactNode;
     alignX?: keyof JustifyContentMap;
     alignY?: keyof AlignItemsMap;
-    gap: Atoms['gap'];
+    as?: 'div' | 'ul' | 'ol' | 'nav';
+    children: React.ReactNode;
+    className?: string;
     display?: ResponsiveDisplayFlex;
+    gap: Atoms['gap'];
+    style?: React.CSSProperties;
 } & MarginAndPaddingAtoms;
 declare const Inline: React.FC<InlineProps>;
 
 type StackProps = {
+    alignX?: keyof AlignItemsMap;
     as?: 'div' | 'section' | 'ul' | 'ol';
     children: React.ReactNode;
-    alignX?: keyof AlignItemsMap;
-    gap: Atoms['gap'];
-    display?: ResponsiveDisplayFlex;
     className?: string;
+    display?: ResponsiveDisplayFlex;
+    gap: Atoms['gap'];
+    style?: React.CSSProperties;
     /**
      * Start prop is only valid when as="ol"
      */
@@ -570,24 +591,25 @@ type TextProps = {
 declare const Text: React.FC<TextProps>;
 
 type LinkProps = {
-    variant?: LinkTheme['variants']['variant'];
-    underline?: LinkTheme['variants']['underline'];
     children?: ReactNode;
-    className?: string;
+    underline?: LinkTheme['variants']['underline'];
+    variant?: LinkTheme['variants']['variant'];
 } & Atoms & HTMLElementProps<HTMLAnchorElement>;
 type PolymorphicLink = ForwardRefComponent<'a', LinkProps>;
 declare const Link: PolymorphicLink;
 
 type SpinnerProps = {
     className?: string;
-    size?: SpinnerTheme['variants']['size'];
     color?: SpinnerTheme['variants']['color'];
+    size?: SpinnerTheme['variants']['size'];
+    style?: React.CSSProperties;
 } & MarginAtoms;
 declare const Spinner: FC<SpinnerProps>;
 
 type DividerProps = {
     className?: string;
     color?: Atoms['backgroundColor'];
+    style?: React.CSSProperties;
 };
 declare const Divider: FC<DividerProps>;
 

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

@@ -37,7 +37,9 @@ const unresponsiveProperties = {
 };
 const marginSpace = { auto: "auto", ...styles_lib_css_theme_vars_css_cjs.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_css_theme_vars_css_cjs.vars.space,
   display: [
     "none",

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

@@ -36,7 +36,9 @@ const unresponsiveProperties = {
 };
 const marginSpace = { auto: "auto", ...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: vars.space,
   display: [
     "none",

package/dist/styles/lib/css/theme/makeComponentTheme.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const makeComponentTheme = (options) => options;
+const makeComponentTheme = (name, options) => options;
 exports.makeComponentTheme = makeComponentTheme;

package/dist/styles/lib/css/theme/makeComponentTheme.mjs

@@ -1,4 +1,4 @@
-const makeComponentTheme = (options) => options;
+const makeComponentTheme = (name, options) => options;
 export {
   makeComponentTheme
 };

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

@@ -7,8 +7,7 @@ const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
 const primaryColor = css.createVar("primaryColor");
-const button = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
-  type: "button",
+const button = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("button", {
   base: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
     display: "inline-flex",
     placeItems: "center",
@@ -17,8 +16,6 @@ const button = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
     fontWeight: "medium"
   }), styles_themes_momotaro_components_helpers_css_cjs.focusable], "button_base"),
   variants: {
-    // ...
-    // styleVariants could be used to but lacks correct typings atm
     variant: {
       solid: css.style({
         color: styles_lib_css_theme_vars_css_cjs.vars.color.white,
@@ -82,20 +79,20 @@ const button = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
       }, "button_variants_intent_danger")
     }
   },
-  compoundVariants: [
-    // Example of compound variants
-    // {
-    //   variants: {
-    //     intent: 'danger',
-    //     variant: 'ghost',
-    //   },
-    //   style: style({
-    //     color: vars.color.danger,
-    //     fontSize: vars.fontSize.small,
-    //     background: 'red',
-    //   }),
-    // },
-  ],
+  // compoundVariants: [
+  //   {
+  //     variants: {
+  //       intent: 'danger',
+  //       variant: 'ghost',
+  //       loading: true,
+  //     },
+  //     style: style({
+  //       color: vars.color.danger,
+  //       fontSize: vars.fontSize.small,
+  //       background: 'red',
+  //     }),
+  //   },
+  // ],
   defaultVariants: {
     size: "small",
     variant: "ghost",

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

@@ -6,8 +6,7 @@ import { focusable } from "./helpers.css.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 setFileScope("src/themes/momotaro/components/button.css.ts?used", "blocks");
 const primaryColor = createVar("primaryColor");
-const button = makeComponentTheme({
-  type: "button",
+const button = makeComponentTheme("button", {
   base: style([atoms({
     display: "inline-flex",
     placeItems: "center",
@@ -16,8 +15,6 @@ const button = makeComponentTheme({
     fontWeight: "medium"
   }), focusable], "button_base"),
   variants: {
-    // ...
-    // styleVariants could be used to but lacks correct typings atm
     variant: {
       solid: style({
         color: vars.color.white,
@@ -81,20 +78,20 @@ const button = makeComponentTheme({
       }, "button_variants_intent_danger")
     }
   },
-  compoundVariants: [
-    // Example of compound variants
-    // {
-    //   variants: {
-    //     intent: 'danger',
-    //     variant: 'ghost',
-    //   },
-    //   style: style({
-    //     color: vars.color.danger,
-    //     fontSize: vars.fontSize.small,
-    //     background: 'red',
-    //   }),
-    // },
-  ],
+  // compoundVariants: [
+  //   {
+  //     variants: {
+  //       intent: 'danger',
+  //       variant: 'ghost',
+  //       loading: true,
+  //     },
+  //     style: style({
+  //       color: vars.color.danger,
+  //       fontSize: vars.fontSize.small,
+  //       background: 'red',
+  //     }),
+  //   },
+  // ],
   defaultVariants: {
     size: "small",
     variant: "ghost",

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

@@ -4,8 +4,7 @@ const css = require("@vanilla-extract/css");
 const styles_lib_css_theme_makeComponentTheme_cjs = require("../../../lib/css/theme/makeComponentTheme.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/dialog.css.ts?used", "blocks");
-const dialog = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
-  type: "dialog",
+const dialog = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("dialog", {
   base: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
     display: "flex",
     flexDirection: "column",

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

@@ -3,8 +3,7 @@ import { style } from "@vanilla-extract/css";
 import { makeComponentTheme } from "../../../lib/css/theme/makeComponentTheme.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 setFileScope("src/themes/momotaro/components/dialog.css.ts?used", "blocks");
-const dialog = makeComponentTheme({
-  type: "dialog",
+const dialog = makeComponentTheme("dialog", {
   base: style([atoms({
     display: "flex",
     flexDirection: "column",

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

@@ -2,8 +2,7 @@
 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",
+const divider = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("divider", {
   defaultVariants: {
     color: "textLight"
   }

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

@@ -1,8 +1,7 @@
 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",
+const divider = makeComponentTheme("divider", {
   defaultVariants: {
     color: "textLight"
   }

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

@@ -4,8 +4,7 @@ const css = require("@vanilla-extract/css");
 const styles_lib_css_theme_makeComponentTheme_cjs = require("../../../lib/css/theme/makeComponentTheme.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/link.css.ts?used", "blocks");
-const link = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
-  type: "link",
+const link = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("link", {
   base: css.style({
     outline: "none",
     border: "none",
@@ -39,8 +38,7 @@ const link = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
     }, "link_variants_underline")
   },
   defaultVariants: {
-    variant: "primary",
-    underline: true
+    variant: "primary"
   }
 });
 fileScope.endFileScope();

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

@@ -3,8 +3,7 @@ import { style } from "@vanilla-extract/css";
 import { makeComponentTheme } from "../../../lib/css/theme/makeComponentTheme.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 setFileScope("src/themes/momotaro/components/link.css.ts?used", "blocks");
-const link = makeComponentTheme({
-  type: "link",
+const link = makeComponentTheme("link", {
   base: style({
     outline: "none",
     border: "none",
@@ -38,8 +37,7 @@ const link = makeComponentTheme({
     }, "link_variants_underline")
   },
   defaultVariants: {
-    variant: "primary",
-    underline: true
+    variant: "primary"
   }
 });
 endFileScope();

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

@@ -11,8 +11,7 @@ const spinAnimation = css.keyframes({
     transform: "rotate(360deg)"
   }
 }, "spinAnimation");
-const spinner = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme({
-  type: "spinner",
+const spinner = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("spinner", {
   base: css.style({
     aspectRatio: "1 / 1",
     overflow: "hidden",

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

@@ -10,8 +10,7 @@ const spinAnimation = keyframes({
     transform: "rotate(360deg)"
   }
 }, "spinAnimation");
-const spinner = makeComponentTheme({
-  type: "spinner",
+const spinner = makeComponentTheme("spinner", {
   base: style({
     aspectRatio: "1 / 1",
     overflow: "hidden",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",