@blockle/blocks 0.19.0 → 0.20.0-alpha1

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

@@ -0,0 +1,34 @@
+"use strict";
+const themes_momotaro_components_button_css_cjs = require("./button.css.cjs");
+const themes_momotaro_components_checkbox_css_cjs = require("./checkbox.css.cjs");
+const themes_momotaro_components_dialog_css_cjs = require("./dialog.css.cjs");
+const themes_momotaro_components_divider_css_cjs = require("./divider.css.cjs");
+const themes_momotaro_components_input_css_cjs = require("./input.css.cjs");
+const themes_momotaro_components_label_css_cjs = require("./label.css.cjs");
+const themes_momotaro_components_link_css_cjs = require("./link.css.cjs");
+const themes_momotaro_components_popover_css_cjs = require("./popover.css.cjs");
+const themes_momotaro_components_progress_css_cjs = require("./progress.css.cjs");
+const themes_momotaro_components_radio_css_cjs = require("./radio.css.cjs");
+const themes_momotaro_components_select_css_cjs = require("./select.css.cjs");
+const themes_momotaro_components_slider_css_cjs = require("./slider.css.cjs");
+const themes_momotaro_components_spinner_css_cjs = require("./spinner.css.cjs");
+const themes_momotaro_components_switch_css_cjs = require("./switch.css.cjs");
+const themes_momotaro_components_tooltip_css_cjs = require("./tooltip.css.cjs");
+const components = {
+  button: themes_momotaro_components_button_css_cjs.button,
+  checkbox: themes_momotaro_components_checkbox_css_cjs.checkbox,
+  dialog: themes_momotaro_components_dialog_css_cjs.dialog,
+  divider: themes_momotaro_components_divider_css_cjs.divider,
+  input: themes_momotaro_components_input_css_cjs.input,
+  label: themes_momotaro_components_label_css_cjs.label,
+  link: themes_momotaro_components_link_css_cjs.link,
+  popover: themes_momotaro_components_popover_css_cjs.popover,
+  progress: themes_momotaro_components_progress_css_cjs.progress,
+  radio: themes_momotaro_components_radio_css_cjs.radio,
+  select: themes_momotaro_components_select_css_cjs.select,
+  slider: themes_momotaro_components_slider_css_cjs.slider,
+  spinner: themes_momotaro_components_spinner_css_cjs.spinner,
+  switch: themes_momotaro_components_switch_css_cjs.switchTheme,
+  tooltip: themes_momotaro_components_tooltip_css_cjs.tooltip
+};
+exports.components = components;

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

@@ -1,12 +1,12 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
-const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+const lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
+const lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/input.css.ts", "@blockle/blocks");
-const input = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("input", {
-  input: css.style([styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+const input = lib_theme_makeComponentTheme_cjs.makeComponentTheme("input", {
+  input: css.style([lib_css_atoms_sprinkles_css_cjs.atoms({
     color: "text",
     padding: "large",
     border: "none",
@@ -15,7 +15,7 @@ const input = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("input"
     outline: "none",
     background: "transparent",
     "::placeholder": {
-      color: styles_lib_theme_vars_css_cjs.vars.color.textLight
+      color: lib_theme_vars_css_cjs.vars.color.textLight
     },
     ":disabled": {}
   }], "input_input"),
@@ -23,15 +23,15 @@ const input = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("input"
     minHeight: 56,
     "@media": {
       "(prefers-reduced-motion: no-preference)": {
-        transition: `box-shadow ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`
+        transition: `box-shadow ${lib_theme_vars_css_cjs.vars.transition.fast}`
       }
     },
     ":focus-within": {
       outline: "2px solid transparent",
       outlineOffset: "2px",
-      boxShadow: `${styles_lib_theme_vars_css_cjs.vars.shadow.small}, ${styles_lib_theme_vars_css_cjs.vars.focus.boxShadow}`
+      boxShadow: `${lib_theme_vars_css_cjs.vars.shadow.small}, ${lib_theme_vars_css_cjs.vars.focus.boxShadow}`
     }
-  }, styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+  }, lib_css_atoms_sprinkles_css_cjs.atoms({
     backgroundColor: "white",
     borderRadius: "medium",
     boxShadow: "medium"

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

@@ -1,27 +1,27 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
+const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+const lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/label.css.ts", "@blockle/blocks");
-const label = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("label", {
+const label = lib_theme_makeComponentTheme_cjs.makeComponentTheme("label", {
   base: css.style({}, "label_base"),
   variants: {
     size: {
       small: css.style({
-        fontSize: styles_lib_theme_vars_css_cjs.vars.fontSize.xsmall
+        fontSize: lib_theme_vars_css_cjs.vars.fontSize.xsmall
       }, "label_variants_size_small"),
       medium: css.style({
-        fontSize: styles_lib_theme_vars_css_cjs.vars.fontSize.small
+        fontSize: lib_theme_vars_css_cjs.vars.fontSize.small
       }, "label_variants_size_medium"),
       large: css.style({
-        fontSize: styles_lib_theme_vars_css_cjs.vars.fontSize.medium
+        fontSize: lib_theme_vars_css_cjs.vars.fontSize.medium
       }, "label_variants_size_large")
     },
     required: css.style({
       ":after": {
         content: '"*"',
-        marginLeft: styles_lib_theme_vars_css_cjs.vars.space.xsmall
+        marginLeft: lib_theme_vars_css_cjs.vars.space.xsmall
       }
     }, "label_variants_required")
   },

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

@@ -1,11 +1,11 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
-const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+const themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
+const lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/link.css.ts", "@blockle/blocks");
-const link = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("link", {
+const link = lib_theme_makeComponentTheme_cjs.makeComponentTheme("link", {
   base: css.style([{
     outline: "none",
     border: "none",
@@ -25,18 +25,18 @@ const link = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("link",
     //     marginLeft: 4,
     //   },
     // },
-  }, styles_themes_momotaro_components_helpers_css_cjs.focusable], "link_base"),
+  }, themes_momotaro_components_helpers_css_cjs.focusable], "link_base"),
   variants: {
     variant: {
       inherit: css.style({
         color: "inherit",
         fontWeight: "inherit"
       }, "link_variants_variant_inherit"),
-      primary: styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+      primary: lib_css_atoms_sprinkles_css_cjs.atoms({
         color: "primary",
         fontWeight: "medium"
       }),
-      secondary: styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+      secondary: lib_css_atoms_sprinkles_css_cjs.atoms({
         color: "secondary",
         fontWeight: "medium"
       })

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

@@ -1,10 +1,10 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-const styles_lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
-const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+const lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
+const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/popover.css.ts", "@blockle/blocks");
-const popover = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("popover", {
-  base: styles_lib_css_style_style_cjs.style({
+const popover = lib_theme_makeComponentTheme_cjs.makeComponentTheme("popover", {
+  base: lib_css_style_style_cjs.style({
     backgroundColor: "white",
     borderRadius: "small",
     boxShadow: "medium",

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

@@ -1,9 +1,9 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
-const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+const lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
+const lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/progress.css.ts", "@blockle/blocks");
 const indeterminateAnimation = css.keyframes({
   "0%": {
@@ -13,10 +13,10 @@ const indeterminateAnimation = css.keyframes({
     transform: "translateX(100%)"
   }
 }, "indeterminateAnimation");
-const progress = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("progress", {
+const progress = lib_theme_makeComponentTheme_cjs.makeComponentTheme("progress", {
   base: css.style([{
     height: 8
-  }, styles_lib_css_atoms_sprinkles_css_cjs.atoms({
+  }, lib_css_atoms_sprinkles_css_cjs.atoms({
     inlineSize: "full",
     borderRadius: "small",
     backgroundColor: "textLight",
@@ -40,8 +40,8 @@ const progress = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("pro
           45deg,
           transparent,
           transparent 20px,
-          ${styles_lib_theme_vars_css_cjs.vars.color.primaryDark} 20px,
-          ${styles_lib_theme_vars_css_cjs.vars.color.primaryDark} 40px
+          ${lib_theme_vars_css_cjs.vars.color.primaryDark} 20px,
+          ${lib_theme_vars_css_cjs.vars.color.primaryDark} 40px
         )`
         },
         "(prefers-reduced-motion: no-preference)": {

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

@@ -0,0 +1,60 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+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 themes_momotaro_components_transitions_cjs = require("./transitions.cjs");
+const lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/components/radio.css.ts", "@blockle/blocks");
+const radio = lib_theme_makeComponentTheme_cjs.makeComponentTheme("radio", {
+  base: css.style([{
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    inlineSize: 24,
+    blockSize: 24,
+    borderRadius: 12,
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `background-color ${lib_theme_vars_css_cjs.vars.transition.fast}, box-shadow ${lib_theme_vars_css_cjs.vars.transition.fast}`
+      }
+    },
+    ":hover": {
+      backgroundColor: lib_theme_vars_css_cjs.vars.color.primaryDark
+    },
+    selectors: {
+      "&:has(input:checked):not(:hover)": {
+        backgroundColor: lib_theme_vars_css_cjs.vars.color.primary
+      }
+    }
+  }, lib_css_atoms_sprinkles_css_cjs.atoms({
+    backgroundColor: "primaryLight"
+  }), themes_momotaro_components_helpers_css_cjs.focusable], "radio_base"),
+  icon: css.style({
+    height: 12,
+    width: 12,
+    backgroundColor: "white",
+    borderRadius: "8px",
+    transform: "scale(0)",
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `transform ${lib_theme_vars_css_cjs.vars.transition.normal} ${themes_momotaro_components_transitions_cjs.bounceOut}`
+      }
+    },
+    selectors: {
+      "input:checked ~ &": {
+        transform: "scale(1)"
+      }
+    }
+  }, "radio_icon"),
+  label: lib_css_atoms_sprinkles_css_cjs.atoms({
+    display: "flex",
+    flexDirection: "row",
+    padding: "xsmall",
+    gap: "medium",
+    cursor: "pointer"
+  })
+});
+fileScope.endFileScope();
+exports.radio = radio;

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

@@ -0,0 +1,44 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+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");
+fileScope.setFileScope("src/themes/momotaro/components/select.css.ts", "@blockle/blocks");
+const select = lib_theme_makeComponentTheme_cjs.makeComponentTheme("select", {
+  select: lib_css_style_style_cjs.style([{
+    color: "text",
+    padding: "large",
+    border: "none",
+    outline: "none",
+    backgroundColor: "white",
+    borderRadius: "medium",
+    boxShadow: "medium",
+    minHeight: 56,
+    transitionDuration: lib_theme_vars_css_cjs.vars.transition.fast,
+    transitionProperty: "box-shadow",
+    ":focus-within": {
+      outline: "2px solid transparent",
+      outlineOffset: "2px",
+      boxShadow: `${lib_theme_vars_css_cjs.vars.shadow.small}, ${lib_theme_vars_css_cjs.vars.focus.boxShadow}`
+    }
+  }, themes_momotaro_components_helpers_css_cjs.focusable]),
+  variants: {
+    variant: {
+      outline: lib_css_style_style_cjs.style({
+        borderWidth: "small",
+        borderStyle: "solid",
+        borderColor: "primary"
+      }),
+      solid: lib_css_style_style_cjs.style({})
+    }
+  },
+  icon: lib_css_style_style_cjs.style({
+    paddingInline: "large"
+  }),
+  defaultVariants: {
+    variant: "solid"
+  }
+});
+fileScope.endFileScope();
+exports.select = select;

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

@@ -0,0 +1,89 @@
+"use strict";
+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");
+fileScope.setFileScope("src/themes/momotaro/components/slider.css.ts", "@blockle/blocks");
+const trackBackground = css.createVar("trackBackground");
+const filledTrackBackground = css.createVar("filledTrackBackground");
+const thumbBackground = css.createVar("thumbBackground");
+const thumbActive = css.createVar("thumbActive");
+const slider = lib_theme_makeComponentTheme_cjs.makeComponentTheme("slider", {
+  base: lib_css_style_style_cjs.style({
+    blockSize: "20px"
+  }),
+  track: lib_css_style_style_cjs.style({
+    blockSize: "4px",
+    backgroundColor: trackBackground,
+    borderRadius: "small"
+  }),
+  filledTrack: lib_css_style_style_cjs.style({
+    backgroundColor: filledTrackBackground
+  }),
+  thumb: lib_css_style_style_cjs.style([{
+    backgroundColor: thumbBackground,
+    borderRadius: "50%",
+    height: "16px",
+    width: "16px",
+    boxShadow: `0 0 0 0px color-mix(in srgb,  ${lib_theme_vars_css_cjs.vars.color.primaryLight}, transparent 0%)`,
+    vars: {
+      [thumbActive]: `0 0 0 8px color-mix(in srgb,  ${lib_theme_vars_css_cjs.vars.color.primaryLight}, transparent 20%)`
+    },
+    ":hover": {
+      boxShadow: thumbActive
+    },
+    ":focus-visible": {
+      boxShadow: thumbActive
+    },
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: "box-shadow 0.2s"
+      }
+    }
+  }, themes_momotaro_components_helpers_css_cjs.focusable]),
+  variants: {
+    size: {
+      small: lib_css_style_style_cjs.style({
+        inlineSize: "100px"
+      }),
+      medium: lib_css_style_style_cjs.style({
+        inlineSize: "200px"
+      }),
+      large: lib_css_style_style_cjs.style({
+        inlineSize: "300px"
+      })
+    },
+    colorScheme: {
+      primary: lib_css_style_style_cjs.style({
+        vars: {
+          [trackBackground]: lib_theme_vars_css_cjs.vars.color.primaryLight,
+          [filledTrackBackground]: lib_theme_vars_css_cjs.vars.color.primary,
+          [thumbBackground]: lib_theme_vars_css_cjs.vars.color.primary
+        }
+      }),
+      secondary: lib_css_style_style_cjs.style({
+        vars: {
+          [trackBackground]: lib_theme_vars_css_cjs.vars.color.primaryLight,
+          [filledTrackBackground]: lib_theme_vars_css_cjs.vars.color.secondary,
+          [thumbBackground]: lib_theme_vars_css_cjs.vars.color.secondary
+        }
+      })
+    },
+    disabled: lib_css_style_style_cjs.style({
+      pointerEvents: "none",
+      vars: {
+        [trackBackground]: "#c0c0c0",
+        [filledTrackBackground]: "#ccc",
+        [thumbBackground]: "#c0c0c0"
+      }
+    })
+  },
+  defaultVariants: {
+    size: "medium",
+    colorScheme: "primary"
+  }
+});
+fileScope.endFileScope();
+exports.slider = slider;

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

@@ -1,7 +1,7 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/spinner.css.ts", "@blockle/blocks");
 const spinAnimation = css.keyframes({
   "0%": {
@@ -11,7 +11,7 @@ const spinAnimation = css.keyframes({
     transform: "rotate(360deg)"
   }
 }, "spinAnimation");
-const spinner = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("spinner", {
+const spinner = lib_theme_makeComponentTheme_cjs.makeComponentTheme("spinner", {
   base: css.style({
     aspectRatio: "1 / 1",
     overflow: "hidden",

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

@@ -1,26 +1,26 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const styles_lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
-const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
-const styles_lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
-const styles_themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
+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");
 fileScope.setFileScope("src/themes/momotaro/components/switch.css.ts", "@blockle/blocks");
 const activeScaleFactor = css.createVar("activeScaleFactor");
-const switchTheme = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("switch", {
-  base: styles_lib_css_style_style_cjs.style([{
+const switchTheme = lib_theme_makeComponentTheme_cjs.makeComponentTheme("switch", {
+  base: lib_css_style_style_cjs.style([{
     width: 52,
     height: 32,
     borderRadius: "xlarge",
     backgroundColor: "textLight",
     "@media": {
       "(prefers-reduced-motion: no-preference)": {
-        transition: `background-color 120ms linear, box-shadow ${styles_lib_theme_vars_css_cjs.vars.transition.fast}`
+        transition: `background-color 120ms linear, box-shadow ${lib_theme_vars_css_cjs.vars.transition.fast}`
       }
     },
     selectors: {
       '&[data-checked="true"]': {
-        backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.secondary
+        backgroundColor: lib_theme_vars_css_cjs.vars.color.secondary
       }
     },
     // Scale the switch when it's `:active`
@@ -32,8 +32,8 @@ const switchTheme = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("
         [activeScaleFactor]: "0.96"
       }
     }
-  }, styles_themes_momotaro_components_helpers_css_cjs.focusable]),
-  slider: styles_lib_css_style_style_cjs.style({
+  }, themes_momotaro_components_helpers_css_cjs.focusable]),
+  slider: lib_css_style_style_cjs.style({
     width: 24,
     height: 24,
     top: 4,

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

@@ -1,21 +1,21 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-const styles_lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
-const styles_lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
+const lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
+const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
 fileScope.setFileScope("src/themes/momotaro/components/tooltip.css.ts", "@blockle/blocks");
-const tooltip = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("tooltip", {
-  base: styles_lib_css_style_style_cjs.style({
+const tooltip = lib_theme_makeComponentTheme_cjs.makeComponentTheme("tooltip", {
+  base: lib_css_style_style_cjs.style({
     backgroundColor: "primary",
     padding: "small"
   }),
   variants: {
     colorScheme: {
-      primary: styles_lib_css_style_style_cjs.style({
+      primary: lib_css_style_style_cjs.style({
         backgroundColor: "rgba(0, 0, 0, 0.8)",
         boxShadow: "0 0 0 1px rgba(255, 255, 255, 0.1)",
         color: "white"
       }),
-      secondary: styles_lib_css_style_style_cjs.style({
+      secondary: lib_css_style_style_cjs.style({
         backgroundColor: "rgba(255, 255, 255, 0.8)",
         boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1)",
         color: "black"

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

@@ -0,0 +1,13 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const lib_theme_makeTheme_cjs = require("../../lib/theme/makeTheme.cjs");
+const themes_momotaro_components_index_cjs = require("./components/index.cjs");
+const themes_momotaro_tokens_css_cjs = require("./tokens.css.cjs");
+fileScope.setFileScope("src/themes/momotaro/momotaro.css.ts", "@blockle/blocks");
+const momotaro = lib_theme_makeTheme_cjs.makeTheme({
+  name: "momotaro",
+  tokens: themes_momotaro_tokens_css_cjs.tokens,
+  components: themes_momotaro_components_index_cjs.components
+});
+fileScope.endFileScope();
+exports.momotaro = momotaro;

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

@@ -1,6 +1,6 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-const styles_lib_css_utils_cssUtils_cjs = require("../../lib/css/utils/cssUtils.cjs");
+const lib_css_utils_cssUtils_cjs = require("../../lib/css/utils/cssUtils.cjs");
 fileScope.setFileScope("src/themes/momotaro/tokens.css.ts", "@blockle/blocks");
 const tokens = {
   border: {
@@ -61,11 +61,11 @@ const tokens = {
       secondary: '"Rubik", sans-serif'
     },
     fontSize: {
-      xsmall: styles_lib_css_utils_cssUtils_cjs.rem(12),
-      small: styles_lib_css_utils_cssUtils_cjs.rem(14),
-      medium: styles_lib_css_utils_cssUtils_cjs.rem(16),
-      large: styles_lib_css_utils_cssUtils_cjs.rem(20),
-      xlarge: styles_lib_css_utils_cssUtils_cjs.rem(24)
+      xsmall: lib_css_utils_cssUtils_cjs.rem(12),
+      small: lib_css_utils_cssUtils_cjs.rem(14),
+      medium: lib_css_utils_cssUtils_cjs.rem(16),
+      large: lib_css_utils_cssUtils_cjs.rem(20),
+      xlarge: lib_css_utils_cssUtils_cjs.rem(24)
     },
     fontWeight: {
       regular: 400,
@@ -73,11 +73,11 @@ const tokens = {
       strong: 700
     },
     lineHeight: {
-      xsmall: styles_lib_css_utils_cssUtils_cjs.rem(16),
-      small: styles_lib_css_utils_cssUtils_cjs.rem(20),
-      medium: styles_lib_css_utils_cssUtils_cjs.rem(24),
-      large: styles_lib_css_utils_cssUtils_cjs.rem(28),
-      xlarge: styles_lib_css_utils_cssUtils_cjs.rem(32)
+      xsmall: lib_css_utils_cssUtils_cjs.rem(16),
+      small: lib_css_utils_cssUtils_cjs.rem(20),
+      medium: lib_css_utils_cssUtils_cjs.rem(24),
+      large: lib_css_utils_cssUtils_cjs.rem(28),
+      xlarge: lib_css_utils_cssUtils_cjs.rem(32)
     }
   }
 };

package/dist/themes/momotaro.cjs

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const styles_themes_momotaro_momotaro_css_cjs = require("../styles/themes/momotaro/momotaro.css.cjs");
-exports.momotaro = styles_themes_momotaro_momotaro_css_cjs.momotaro;
+const themes_momotaro_momotaro_css_cjs = require("./momotaro/momotaro.css.cjs");
+exports.momotaro = themes_momotaro_momotaro_css_cjs.momotaro;

package/dist/themes/momotaro.mjs

@@ -1,4 +1,4 @@
-import { momotaro } from "../styles/themes/momotaro/momotaro.css.mjs";
+import { momotaro } from "./momotaro/momotaro.css.mjs";
 export {
   momotaro
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.19.0",
+  "version": "0.20.0-alpha1",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
@@ -49,12 +49,13 @@
     "themes/momotaro"
   ],
   "scripts": {
-    "build": "crackle package && node ./temp-use-client-fix.js",
+    "build": "crackle package && node ./scripts/use-client-fix.mjs",
     "build-storybook": "storybook build",
     "changeset": "changeset",
     "coverage": "vitest run --coverage",
     "fix": "crackle fix",
-    "lint": "eslint .",
+    "lint": "biome format ./src",
+    "lint:fix": "biome format --write ./src",
     "release": "npm run ts && npm run test && npm run build && changeset publish",
     "storybook": "storybook dev -p 6006 --no-open",
     "test": "vitest --silent",
@@ -64,6 +65,7 @@
     "string-width": "^4.2.2"
   },
   "devDependencies": {
+    "@biomejs/biome": "1.9.4",
     "@changesets/cli": "^2.27.12",
     "@chromatic-com/storybook": "^3.2.4",
     "@crackle/cli": "^0.15.5",
@@ -80,11 +82,8 @@
     "@storybook/test": "^8.5.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
-    "@types/eslint": "^8.56.12",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
     "@vanilla-extract/css": "^1.17.1",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/sprinkles": "^1.6.2",
@@ -92,16 +91,7 @@
     "@vitest/coverage-v8": "^3.0.4",
     "autoprefixer": "^10.4.19",
     "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-jest": "^28.6.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.2",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-unicorn": "^53.0.0",
     "jsdom": "^26.0.0",
-    "prettier": "^3.3.1",
     "prop-types": "^15.8.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/dist/styles/components/Accessibility/VisuallyHidden/VisuallyHidden.cjs

@@ -1,16 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const styles_components_Accessibility_VisuallyHidden_visuallyHidden_css_cjs = require("./visually-hidden.css.cjs");
-const classnames = (...args) => {
-  const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
-  return className || void 0;
-};
-const VisuallyHidden = ({
-  children,
-  className,
-  ...restProps
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: classnames(styles_components_Accessibility_VisuallyHidden_visuallyHidden_css_cjs.visuallyHidden, className), ...restProps, children });
-};
-exports.VisuallyHidden = VisuallyHidden;
-exports.classnames = classnames;