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

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

@@ -0,0 +1,49 @@
+import { RecordLike } from '../utils/helpers';
+import { ComponentThemes } from './componentThemes';
+/**
+ * Helper generic to convert a component theme to a styles object
+ *
+ * export type ThemeIn = {
+ *  base: string;
+ *  variants: {
+ *    intent: 'neutral' | 'danger';
+ *    level?: 1 | 2;
+ *    loading: boolean;
+ *  };
+ * };
+ * export type ThemeOut = {
+ *  base: string;
+ *  variants: {
+ *    intent: Record<'neutral' | 'danger', string>;
+ *    level?: Record<1 | 2, string>;
+ *    loading: string;
+ *  };
+ * };
+ */
+type VariantsToStyle<T extends RecordLike> = {
+    [K in keyof T]?: T[K] extends string | number ? Partial<Record<T[K], string>> : T[K] extends boolean ? string : never;
+};
+/**
+ * ComponentThemeToStyles is a helper type to define the props passed to useComponentStyles.
+ */
+export type ComponentThemeToStyles<T extends RecordLike> = Omit<T, 'variants'> & {
+    variants?: T['variants'] extends RecordLike ? VariantsToStyle<T['variants']> : never;
+};
+export type ComponentThemeCompoundVariants<T extends RecordLike> = T['variants'] extends RecordLike ? {
+    variants: {
+        [K in keyof T['variants']]?: T['variants'][K];
+    };
+    style: string;
+}[] : never;
+export type ComponentThemeDefaultVariants<T extends RecordLike> = T['variants'] extends RecordLike ? {
+    [K in keyof T['variants']]?: T['variants'][K];
+} : never;
+export type ComponentTheme<T extends RecordLike> = ComponentThemeToStyles<T> & {
+    compoundVariants?: ComponentThemeCompoundVariants<T>;
+    defaultVariants?: ComponentThemeDefaultVariants<T>;
+};
+export type ThemeComponentsStyles = {
+    [K in keyof ComponentThemes]?: ComponentTheme<ComponentThemes[K]>;
+};
+export declare function makeComponentTheme<T extends keyof ThemeComponentsStyles>(component: T, componentTheme: ThemeComponentsStyles[T]): ThemeComponentsStyles[T];
+export {};

package/dist/lib/theme/makeTheme.cjs

@@ -1,11 +1,12 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const css = require("@vanilla-extract/css");
-const lib_theme_makeVanillaTheme_cjs = require("./makeVanillaTheme.cjs");
-const lib_theme_vars_css_cjs = require("./vars.css.cjs");
+const makeVanillaTheme = require("./makeVanillaTheme.cjs");
+const vars_css = require("./vars.css.cjs");
 function makeTheme(theme) {
   return {
     name: theme.name,
-    vars: css.createTheme(lib_theme_vars_css_cjs.vars, lib_theme_makeVanillaTheme_cjs.makeVanillaTheme(theme.tokens)),
+    vars: css.createTheme(vars_css.vars, makeVanillaTheme.makeVanillaTheme(theme.tokens)),
     components: theme.components
   };
 }

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

@@ -0,0 +1,14 @@
+import { ThemeComponentsStyles } from './makeComponentTheme';
+import { ThemeTokens } from './tokensType';
+type ThemeInput = {
+    name: string;
+    tokens: ThemeTokens;
+    components: ThemeComponentsStyles;
+};
+export type Theme = {
+    name: string;
+    vars: string;
+    components: ThemeComponentsStyles;
+};
+export declare function makeTheme(theme: ThemeInput): Theme;
+export {};

package/dist/lib/theme/{makeTheme.mjs → makeTheme.js}

@@ -1,6 +1,6 @@
 import { createTheme } from "@vanilla-extract/css";
-import { makeVanillaTheme } from "./makeVanillaTheme.mjs";
-import { vars } from "./vars.css.mjs";
+import { makeVanillaTheme } from "./makeVanillaTheme.js";
+import { vars } from "./vars.css.js";
 function makeTheme(theme) {
   return {
     name: theme.name,

package/dist/lib/theme/makeVanillaTheme.cjs

@@ -1,4 +1,5 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const makeVanillaTheme = (tokens) => {
   return {
     space: tokens.spacing,

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

@@ -0,0 +1,16 @@
+import { ThemeTokens } from './tokensType';
+export declare const makeVanillaTheme: (tokens: ThemeTokens) => {
+    space: Record<keyof typeof tokens.spacing, string>;
+    borderRadius: Record<keyof typeof tokens.border.radius, string>;
+    color: Record<keyof typeof tokens.color, string>;
+    borderWidth: Record<keyof typeof tokens.border.width, string>;
+    fontFamily: Record<keyof typeof tokens.typography.fontFamily, string>;
+    fontSize: Record<keyof typeof tokens.typography.fontSize, string>;
+    fontWeight: Record<keyof typeof tokens.typography.fontWeight, string>;
+    lineHeight: Record<keyof typeof tokens.typography.lineHeight, string>;
+    transition: Record<keyof typeof tokens.transition, string>;
+    shadow: Record<keyof typeof tokens.shadow, string>;
+    focus: {
+        boxShadow: string;
+    };
+};

package/dist/lib/theme/store/theme.cjs

@@ -1,4 +1,5 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let currentTheme = null;
 function setTheme(theme) {
   currentTheme = theme;

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

@@ -0,0 +1,13 @@
+import { RecordLike } from '../../utils/helpers';
+import { ComponentThemesProps } from '../componentThemes';
+import { ThemeComponentsStyles } from '../makeComponentTheme';
+import { Theme } from '../makeTheme';
+export declare function setTheme(theme: Theme): void;
+export declare function getTheme(): Theme;
+export declare function getComponentStyles<T extends keyof ComponentThemesProps>(name: T, props: ComponentThemesProps[T], useDefaultVariants?: boolean): string;
+type ThemeComponentsStylesRequired = Required<ThemeComponentsStyles>;
+type Components = {
+    [K in keyof ThemeComponentsStylesRequired]: ThemeComponentsStylesRequired[K] extends RecordLike ? Required<ThemeComponentsStylesRequired[K]>['defaultVariants'] extends RecordLike ? ThemeComponentsStylesRequired[K]['defaultVariants'] extends undefined ? never : Exclude<ThemeComponentsStylesRequired[K]['defaultVariants'], undefined> : never : never;
+};
+export declare function getComponentStyleDefaults<T extends keyof ThemeComponentsStyles>(name: T): Components[T];
+export {};

package/dist/lib/theme/tokens.cjs

@@ -1,4 +1,5 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const tokens = {
   typography: {
     fontFamily: {

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

@@ -0,0 +1,2 @@
+import { ThemeTokens } from './tokensType';
+export declare const tokens: ThemeTokens;

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

@@ -0,0 +1,33 @@
+type FontWeight = 'regular' | 'medium' | 'strong';
+type Space = 'none' | 'gutter' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type Transition = 'slow' | 'normal' | 'fast';
+type BorderRadius = 'small' | 'medium' | 'large' | 'xlarge';
+type BorderWidth = 'small' | 'medium' | 'large';
+type BoxShadow = 'small' | 'medium' | 'large';
+type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type LineHeight = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type Color = 'white' | 'black' | 'body' | 'primaryLight' | 'primary' | 'primaryDark' | 'secondaryLight' | 'secondary' | 'secondaryDark' | 'text' | 'textLight' | 'textDark' | 'danger' | 'link';
+export type ThemeTokens = {
+    typography: {
+        fontFamily: {
+            body?: string;
+            primary?: string;
+            secondary?: string;
+        };
+        fontSize: Record<FontSize, number | string>;
+        fontWeight: Record<FontWeight, 400 | 500 | 600 | 700 | 800>;
+        lineHeight: Record<LineHeight, number | string>;
+    };
+    spacing: Record<Space, number | string>;
+    transition: Record<Transition, string>;
+    border: {
+        radius: Record<BorderRadius, number | string>;
+        width: Record<BorderWidth, number | string>;
+    };
+    shadow: Record<BoxShadow, string>;
+    focus: {
+        boxShadow: string;
+    };
+    color: Record<Color, string>;
+};
+export {};

package/dist/lib/theme/vars.css.cjs

@@ -1,9 +1,10 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const lib_theme_makeVanillaTheme_cjs = require("./makeVanillaTheme.cjs");
-const lib_theme_tokens_cjs = require("./tokens.cjs");
+const makeVanillaTheme = require("./makeVanillaTheme.cjs");
+const tokens = require("./tokens.cjs");
 fileScope.setFileScope("src/lib/theme/vars.css.ts", "@blockle/blocks");
-const vars = css.createThemeContract(lib_theme_makeVanillaTheme_cjs.makeVanillaTheme(lib_theme_tokens_cjs.tokens));
+const vars = css.createThemeContract(makeVanillaTheme.makeVanillaTheme(tokens.tokens));
 fileScope.endFileScope();
 exports.vars = vars;

package/dist/lib/theme/vars.css.d.ts

@@ -0,0 +1,75 @@
+export declare const vars: {
+    space: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    borderRadius: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    color: {
+        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})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    fontFamily: {
+        body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    fontSize: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    fontWeight: {
+        regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    lineHeight: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    transition: {
+        slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    shadow: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    focus: {
+        boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};

package/dist/lib/theme/{vars.css.mjs → vars.css.js}

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { createThemeContract } from "@vanilla-extract/css";
-import { makeVanillaTheme } from "./makeVanillaTheme.mjs";
-import { tokens } from "./tokens.mjs";
+import { makeVanillaTheme } from "./makeVanillaTheme.js";
+import { tokens } from "./tokens.js";
 setFileScope("src/lib/theme/vars.css.ts", "@blockle/blocks");
 const vars = createThemeContract(makeVanillaTheme(tokens));
 endFileScope();

package/dist/lib/utils/atom-props.cjs

@@ -1,10 +1,11 @@
 "use strict";
-const lib_css_atoms_sprinkles_css_cjs = require("../css/atoms/sprinkles.css.cjs");
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const sprinkles_css = require("../css/atoms/sprinkles.css.cjs");
 function getAtomsAndProps(props) {
   const atomProps = {};
   const otherProps = {};
   for (const [name, value] of Object.entries(props)) {
-    if (lib_css_atoms_sprinkles_css_cjs.atoms.properties.has(name)) {
+    if (sprinkles_css.atoms.properties.has(name)) {
       atomProps[name] = value;
     } else {
       otherProps[name] = value;

package/dist/lib/utils/atom-props.d.ts

@@ -0,0 +1,4 @@
+/**
+ *
+ */
+export declare function getAtomsAndProps(props: Record<string, unknown>): [atomsClassNames: Record<string, unknown>, props: Record<string, unknown>];

package/dist/lib/utils/{atom-props.mjs → atom-props.js}

@@ -1,4 +1,4 @@
-import { atoms } from "../css/atoms/sprinkles.css.mjs";
+import { atoms } from "../css/atoms/sprinkles.css.js";
 function getAtomsAndProps(props) {
   const atomProps = {};
   const otherProps = {};

package/dist/lib/utils/classnames.cjs

@@ -1,4 +1,5 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
   return className || void 0;

package/dist/lib/utils/classnames.d.ts

@@ -0,0 +1,3 @@
+type Args = null | undefined | boolean | string | unknown;
+export declare const classnames: (...args: Args[]) => string | undefined;
+export {};

package/dist/lib/utils/dom-focus.d.ts

@@ -0,0 +1,2 @@
+export declare const getFirstFocusableElement: (container: HTMLElement) => HTMLElement | null;
+export declare const focusFirstElement: (container: HTMLElement) => void;

package/dist/lib/utils/dom.cjs

@@ -1,4 +1,5 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 function hasAnimationDuration(element) {
   if (!element) {
     return false;

package/dist/lib/utils/dom.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Check if the element has animation duration.
+ */
+export declare function hasAnimationDuration(element: HTMLElement | null): boolean;

package/dist/lib/utils/helpers.d.ts

@@ -0,0 +1,9 @@
+export type AnyString = string & {};
+/**
+ * Suggest a type for a string literal but also allow any string.
+ */
+export type OptionalLiteral<T extends string> = T | AnyString;
+export type RecordLike = Record<string | number, unknown>;
+export type IsStringUnion<T> = T extends string ? string extends T ? false : true : false;
+export type IsNumberUnion<T> = T extends number ? number extends T ? false : true : false;
+export type IsUnion<T> = IsStringUnion<T> extends true ? true : IsNumberUnion<T> extends true ? true : false;

package/dist/lib/utils/math.cjs

@@ -1,4 +1,5 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 function roundToPrecision(value, precision) {
   const factor = 10 ** precision;
   return Math.round(value * factor) / factor;

package/dist/lib/utils/math.d.ts

@@ -0,0 +1,2 @@
+export declare function roundToPrecision(value: number, precision: number): number;
+export declare function getBoundValue(newValue: number, min: number, max: number, step: number): number;

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

@@ -0,0 +1,3 @@
+import { Atoms } from '../css/atoms';
+export type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Atoms | 'ref'>;
+export declare function isObjectLike<T extends Record<string, unknown>>(value: T): value is T;

package/dist/reset.js

@@ -0,0 +1,2 @@
+import "./lib/css/atoms/sprinkles.css.js";
+import "./lib/css/reset/reset.css.js";

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

@@ -1,98 +1,105 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
-const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-const lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
-const themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
+const style = require("../../../lib/css/style/style.cjs");
+const makeComponentTheme = require("../../../lib/theme/makeComponentTheme.cjs");
+const vars_css = require("../../../lib/theme/vars.css.cjs");
+const helpers_css = require("./helpers.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/button.css.ts", "@blockle/blocks");
-const intentColor = css.createVar("intentColor");
-const hoverBackgroundColor = css.createVar("hoverBackgroundColor");
-const button = lib_theme_makeComponentTheme_cjs.makeComponentTheme("button", {
-  base: lib_css_style_style_cjs.style([{
-    display: "inline-flex",
-    placeItems: "center",
-    fontSize: "medium",
-    borderRadius: "medium",
-    fontWeight: "medium",
-    // Space between `startSlot | children | endSlot`
-    gap: "small",
-    selectors: {
-      "&:hover:not(:disabled)": {
-        backgroundColor: hoverBackgroundColor
+const intentColor = css.createVar();
+const hoverBackgroundColor = css.createVar();
+const button = makeComponentTheme.makeComponentTheme("button", {
+  base: style.style([
+    {
+      display: "inline-flex",
+      placeItems: "center",
+      fontSize: "medium",
+      borderRadius: "medium",
+      fontWeight: "medium",
+      // Space between `startSlot | children | endSlot`
+      gap: "small",
+      selectors: {
+        "&:hover:not(:disabled)": {
+          backgroundColor: hoverBackgroundColor
+        }
       }
-    }
-  }, themes_momotaro_components_helpers_css_cjs.clickable]),
+    },
+    helpers_css.clickable
+  ]),
   variants: {
     variant: {
-      solid: lib_css_style_style_cjs.style({
-        color: lib_theme_vars_css_cjs.vars.color.white,
+      solid: style.style({
+        color: vars_css.vars.color.white,
         backgroundColor: intentColor,
         border: "none"
       }),
-      outline: lib_css_style_style_cjs.style({
+      outline: style.style({
         color: intentColor,
         borderWidth: "small",
         borderStyle: "solid",
         borderColor: intentColor,
         background: "transparent"
       }),
-      ghost: lib_css_style_style_cjs.style({
+      ghost: style.style({
         color: intentColor,
         background: "transparent"
       })
     },
     size: {
-      small: lib_css_style_style_cjs.style({
+      small: style.style({
         paddingInline: "large",
         height: 40
       }),
-      medium: lib_css_style_style_cjs.style({
+      medium: style.style({
         paddingInline: "xlarge",
         height: 56
       }),
-      large: lib_css_style_style_cjs.style({
+      large: style.style({
         paddingInline: "xlarge",
         height: 72
       })
     },
     intent: {
-      neutral: lib_css_style_style_cjs.style({
+      neutral: style.style({
         vars: {
-          [intentColor]: lib_theme_vars_css_cjs.vars.color.primary,
-          [hoverBackgroundColor]: lib_theme_vars_css_cjs.vars.color.primaryLight
+          [intentColor]: vars_css.vars.color.primary,
+          [hoverBackgroundColor]: vars_css.vars.color.primaryLight
         }
       }),
-      danger: lib_css_style_style_cjs.style({
+      danger: style.style({
         vars: {
-          [intentColor]: lib_theme_vars_css_cjs.vars.color.danger,
+          [intentColor]: vars_css.vars.color.danger,
           [hoverBackgroundColor]: "#fff8f7",
-          [themes_momotaro_components_helpers_css_cjs.focusRingColor]: lib_theme_vars_css_cjs.vars.color.danger
+          [helpers_css.focusRingColor]: vars_css.vars.color.danger
         }
       })
     }
   },
-  compoundVariants: [{
-    variants: {
-      variant: "solid",
-      intent: "neutral"
-    },
-    style: lib_css_style_style_cjs.style({
-      vars: {
-        [hoverBackgroundColor]: lib_theme_vars_css_cjs.vars.color.primaryDark
-      }
-    })
-  }, {
-    variants: {
-      variant: "solid",
-      intent: "danger"
+  compoundVariants: [
+    {
+      variants: {
+        variant: "solid",
+        intent: "neutral"
+      },
+      style: style.style({
+        vars: {
+          [hoverBackgroundColor]: vars_css.vars.color.primaryDark
+        }
+      })
     },
-    style: lib_css_style_style_cjs.style({
-      vars: {
-        [hoverBackgroundColor]: "#f9b1a9"
-      }
-    })
-  }],
+    {
+      variants: {
+        variant: "solid",
+        intent: "danger"
+      },
+      style: style.style({
+        vars: {
+          [hoverBackgroundColor]: "#f9b1a9"
+        }
+      })
+    }
+  ],
   defaultVariants: {
     size: "small",
     variant: "solid",

package/dist/themes/momotaro/components/button.css.d.ts

@@ -0,0 +1 @@
+export declare const button: import('../../../lib/theme/makeComponentTheme').ComponentTheme<import('../../../lib/theme/componentThemes').ButtonTheme> | undefined;

package/dist/themes/momotaro/components/{button.css.mjs → button.css.js}

@@ -1,27 +1,30 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { createVar } from "@vanilla-extract/css";
-import { style } from "../../../lib/css/style/style.mjs";
-import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
-import { vars } from "../../../lib/theme/vars.css.mjs";
-import { focusRingColor, clickable } from "./helpers.css.mjs";
+import { style } from "../../../lib/css/style/style.js";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.js";
+import { vars } from "../../../lib/theme/vars.css.js";
+import { focusRingColor, clickable } from "./helpers.css.js";
 setFileScope("src/themes/momotaro/components/button.css.ts", "@blockle/blocks");
-const intentColor = createVar("intentColor");
-const hoverBackgroundColor = createVar("hoverBackgroundColor");
+const intentColor = createVar();
+const hoverBackgroundColor = createVar();
 const button = makeComponentTheme("button", {
-  base: style([{
-    display: "inline-flex",
-    placeItems: "center",
-    fontSize: "medium",
-    borderRadius: "medium",
-    fontWeight: "medium",
-    // Space between `startSlot | children | endSlot`
-    gap: "small",
-    selectors: {
-      "&:hover:not(:disabled)": {
-        backgroundColor: hoverBackgroundColor
+  base: style([
+    {
+      display: "inline-flex",
+      placeItems: "center",
+      fontSize: "medium",
+      borderRadius: "medium",
+      fontWeight: "medium",
+      // Space between `startSlot | children | endSlot`
+      gap: "small",
+      selectors: {
+        "&:hover:not(:disabled)": {
+          backgroundColor: hoverBackgroundColor
+        }
       }
-    }
-  }, clickable]),
+    },
+    clickable
+  ]),
   variants: {
     variant: {
       solid: style({
@@ -71,27 +74,30 @@ const button = makeComponentTheme("button", {
       })
     }
   },
-  compoundVariants: [{
-    variants: {
-      variant: "solid",
-      intent: "neutral"
-    },
-    style: style({
-      vars: {
-        [hoverBackgroundColor]: vars.color.primaryDark
-      }
-    })
-  }, {
-    variants: {
-      variant: "solid",
-      intent: "danger"
+  compoundVariants: [
+    {
+      variants: {
+        variant: "solid",
+        intent: "neutral"
+      },
+      style: style({
+        vars: {
+          [hoverBackgroundColor]: vars.color.primaryDark
+        }
+      })
     },
-    style: style({
-      vars: {
-        [hoverBackgroundColor]: "#f9b1a9"
-      }
-    })
-  }],
+    {
+      variants: {
+        variant: "solid",
+        intent: "danger"
+      },
+      style: style({
+        vars: {
+          [hoverBackgroundColor]: "#f9b1a9"
+        }
+      })
+    }
+  ],
   defaultVariants: {
     size: "small",
     variant: "solid",