@blockle/blocks 0.11.0 → 0.11.1

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

@@ -0,0 +1,66 @@
+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 { focusable } from "./helpers.css.mjs";
+setFileScope("src/themes/momotaro/components/slider.css.ts", "@blockle/blocks");
+const trackBackground = createVar("trackBackground");
+const filledTrackBackground = createVar("filledTrackBackground");
+const thumbBackground = createVar("thumbBackground");
+const slider = makeComponentTheme("slider", {
+  base: style({
+    blockSize: "20px"
+  }),
+  track: style({
+    blockSize: "4px",
+    backgroundColor: trackBackground,
+    borderRadius: "small"
+  }),
+  filledTrack: style({
+    backgroundColor: filledTrackBackground
+  }),
+  thumb: style([{
+    backgroundColor: thumbBackground,
+    borderRadius: "50%",
+    height: "16px",
+    width: "16px"
+  }, focusable]),
+  variants: {
+    size: {
+      small: style({
+        inlineSize: "100px"
+      }),
+      medium: style({
+        inlineSize: "200px"
+      }),
+      large: style({
+        inlineSize: "300px"
+      })
+    },
+    colorScheme: {
+      primary: style({
+        vars: {
+          [trackBackground]: vars.color.primaryLight,
+          [filledTrackBackground]: vars.color.primary,
+          [thumbBackground]: vars.color.primary
+        }
+      }),
+      secondary: style({
+        vars: {
+          [trackBackground]: vars.color.primaryLight,
+          [filledTrackBackground]: vars.color.secondary,
+          [thumbBackground]: vars.color.secondary
+        }
+      })
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    colorScheme: "primary"
+  }
+});
+endFileScope();
+export {
+  slider
+};

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

@@ -0,0 +1,43 @@
+"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");
+fileScope.setFileScope("src/themes/momotaro/components/spinner.css.ts", "@blockle/blocks");
+const spinAnimation = css.keyframes({
+  "0%": {
+    transform: "rotate(0deg)"
+  },
+  "100%": {
+    transform: "rotate(360deg)"
+  }
+}, "spinAnimation");
+const spinner = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("spinner", {
+  base: css.style({
+    aspectRatio: "1 / 1",
+    overflow: "hidden",
+    borderRadius: "50%",
+    borderWidth: "3px",
+    borderStyle: "solid",
+    borderColor: "currentColor transparent currentColor transparent",
+    animation: `${spinAnimation} 1.2s linear infinite`
+  }, "spinner_base"),
+  variants: {
+    // note: colors are handled by atoms
+    size: {
+      small: css.style({
+        width: 16
+      }, "spinner_variants_size_small"),
+      medium: css.style({
+        width: 24
+      }, "spinner_variants_size_medium"),
+      large: css.style({
+        width: 32
+      }, "spinner_variants_size_large")
+    }
+  },
+  defaultVariants: {
+    size: "small"
+  }
+});
+fileScope.endFileScope();
+exports.spinner = spinner;

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

@@ -0,0 +1,44 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { keyframes, style } from "@vanilla-extract/css";
+import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
+setFileScope("src/themes/momotaro/components/spinner.css.ts", "@blockle/blocks");
+const spinAnimation = keyframes({
+  "0%": {
+    transform: "rotate(0deg)"
+  },
+  "100%": {
+    transform: "rotate(360deg)"
+  }
+}, "spinAnimation");
+const spinner = makeComponentTheme("spinner", {
+  base: style({
+    aspectRatio: "1 / 1",
+    overflow: "hidden",
+    borderRadius: "50%",
+    borderWidth: "3px",
+    borderStyle: "solid",
+    borderColor: "currentColor transparent currentColor transparent",
+    animation: `${spinAnimation} 1.2s linear infinite`
+  }, "spinner_base"),
+  variants: {
+    // note: colors are handled by atoms
+    size: {
+      small: style({
+        width: 16
+      }, "spinner_variants_size_small"),
+      medium: style({
+        width: 24
+      }, "spinner_variants_size_medium"),
+      large: style({
+        width: 32
+      }, "spinner_variants_size_large")
+    }
+  },
+  defaultVariants: {
+    size: "small"
+  }
+});
+endFileScope();
+export {
+  spinner
+};

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

@@ -0,0 +1,58 @@
+"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");
+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([{
+    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}`
+      }
+    },
+    selectors: {
+      '&[data-checked="true"]': {
+        backgroundColor: styles_lib_theme_vars_css_cjs.vars.color.secondary
+      }
+    },
+    // Scale the switch when it's `:active`
+    vars: {
+      [activeScaleFactor]: "1"
+    },
+    ":active": {
+      vars: {
+        [activeScaleFactor]: "0.96"
+      }
+    }
+  }, styles_themes_momotaro_components_helpers_css_cjs.focusable]),
+  slider: styles_lib_css_style_style_cjs.style({
+    width: 24,
+    height: 24,
+    top: 4,
+    left: 4,
+    transform: `translateX(0) scale(calc(0.9 * ${activeScaleFactor}))`,
+    position: "absolute",
+    backgroundColor: "white",
+    borderRadius: "xlarge",
+    selectors: {
+      '&[data-checked="true"]': {
+        transform: `translateX(20px) scale(${activeScaleFactor})`
+      }
+    },
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: "transform 120ms ease-out"
+      }
+    }
+  })
+});
+fileScope.endFileScope();
+exports.switchTheme = switchTheme;

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

@@ -0,0 +1,59 @@
+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 { focusable } from "./helpers.css.mjs";
+setFileScope("src/themes/momotaro/components/switch.css.ts", "@blockle/blocks");
+const activeScaleFactor = createVar("activeScaleFactor");
+const switchTheme = makeComponentTheme("switch", {
+  base: style([{
+    width: 52,
+    height: 32,
+    borderRadius: "xlarge",
+    backgroundColor: "textLight",
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: `background-color 120ms linear, box-shadow ${vars.transition.fast}`
+      }
+    },
+    selectors: {
+      '&[data-checked="true"]': {
+        backgroundColor: vars.color.secondary
+      }
+    },
+    // Scale the switch when it's `:active`
+    vars: {
+      [activeScaleFactor]: "1"
+    },
+    ":active": {
+      vars: {
+        [activeScaleFactor]: "0.96"
+      }
+    }
+  }, focusable]),
+  slider: style({
+    width: 24,
+    height: 24,
+    top: 4,
+    left: 4,
+    transform: `translateX(0) scale(calc(0.9 * ${activeScaleFactor}))`,
+    position: "absolute",
+    backgroundColor: "white",
+    borderRadius: "xlarge",
+    selectors: {
+      '&[data-checked="true"]': {
+        transform: `translateX(20px) scale(${activeScaleFactor})`
+      }
+    },
+    "@media": {
+      "(prefers-reduced-motion: no-preference)": {
+        transition: "transform 120ms ease-out"
+      }
+    }
+  })
+});
+endFileScope();
+export {
+  switchTheme
+};

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

@@ -0,0 +1,3 @@
+"use strict";
+const bounceOut = "cubic-bezier(.65,.36,.55,1.65)";
+exports.bounceOut = bounceOut;

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

@@ -0,0 +1,4 @@
+const bounceOut = "cubic-bezier(.65,.36,.55,1.65)";
+export {
+  bounceOut
+};

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

@@ -1,197 +1,13 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-require("./tokens.css.ts.vanilla.cjs");
-require("./components/button.css.ts.vanilla.cjs");
-require("./components/checkbox.css.ts.vanilla.cjs");
-require("./components/dialog.css.ts.vanilla.cjs");
-require("./components/divider.css.ts.vanilla.cjs");
-require("./components/dropdown.css.ts.vanilla.cjs");
-require("./components/input.css.ts.vanilla.cjs");
-require("./components/label.css.ts.vanilla.cjs");
-require("./components/link.css.ts.vanilla.cjs");
-require("./components/progress.css.ts.vanilla.cjs");
-require("./components/radio.css.ts.vanilla.cjs");
-require("./components/select.css.ts.vanilla.cjs");
-require("./components/slider.css.ts.vanilla.cjs");
-require("./components/spinner.css.ts.vanilla.cjs");
-require("./components/switch.css.ts.vanilla.cjs");
-require("./components/helpers.css.ts.vanilla.cjs");
-require("../../lib/css/atoms/sprinkles.css.ts.vanilla.cjs");
-require("./momotaro.css.ts.vanilla.cjs");
+const styles_lib_theme_makeTheme_cjs = require("../../lib/theme/makeTheme.cjs");
+const styles_themes_momotaro_components_index_cjs = require("./components/index.cjs");
+const styles_themes_momotaro_tokens_css_cjs = require("./tokens.css.cjs");
 fileScope.setFileScope("src/themes/momotaro/momotaro.css.ts", "@blockle/blocks");
-var momotaro = {
+const momotaro = styles_lib_theme_makeTheme_cjs.makeTheme({
   name: "momotaro",
-  vars: "_1htisiw0",
-  components: {
-    button: {
-      base: "ta7q6b8 ta7q6b2 rvxbw5s ta7q6b3 rvxbw98 rvxbw40 ta7q6b4 rvxbw7w ta7q6b5 rvxbwv ta7q6b6 rvxbw1z ta7q6b7 rvxbw8k _1pwcvlj2 _1pwcvlj1",
-      variants: {
-        variant: {
-          solid: "ta7q6ba ta7q6b9 rvxbw11",
-          outline: "ta7q6bc ta7q6bb rvxbwy",
-          ghost: "ta7q6bd"
-        },
-        size: {
-          small: "ta7q6bf ta7q6be rvxbwgw",
-          medium: "ta7q6bh ta7q6bg rvxbwh0",
-          large: "ta7q6bj ta7q6bi rvxbwh0"
-        },
-        intent: {
-          neutral: "ta7q6bk",
-          danger: "ta7q6bl"
-        }
-      },
-      compoundVariants: [{
-        variants: {
-          variant: "solid",
-          intent: "neutral"
-        },
-        style: "ta7q6bm"
-      }, {
-        variants: {
-          variant: "solid",
-          intent: "danger"
-        },
-        style: "ta7q6bn"
-      }],
-      defaultVariants: {
-        size: "small",
-        variant: "solid",
-        intent: "neutral"
-      }
-    },
-    checkbox: {
-      base: "_1cqtsrz1 _1cqtsrz0 rvxbw3 rvxbwu _1pwcvlj1",
-      icon: "_1cqtsrz2",
-      label: "_1cqtsrz3 rvxbw5o rvxbw6k rvxbwdg rvxbw8o rvxbw1r"
-    },
-    dialog: {
-      dialog: "_6gb0ay1 _6gb0ay0 rvxbw5o rvxbw6s rvxbwdc rvxbw11 rvxbw2n rvxbwv rvxbw1a",
-      backdrop: "_6gb0ay2",
-      variants: {
-        size: {
-          small: "_6gb0ay3",
-          medium: "_6gb0ay4",
-          large: "_6gb0ay5"
-        }
-      },
-      defaultVariants: {
-        size: "small"
-      }
-    },
-    divider: {
-      defaultVariants: {
-        color: "textLight"
-      }
-    },
-    dropdown: {
-      base: "dgheqo4 dgheqo0 rvxbw1 dgheqo1 rvxbwu dgheqo2 rvxbw19 dgheqo3 rvxbwdo",
-      variants: {
-        variant: {
-          solid: "dgheqoa dgheqo5 rvxbw1 dgheqo6 rvxbw11 dgheqo7 rvxbw19 dgheqo8 rvxbw1b dgheqo9 rvxbwdo",
-          outline: "dgheqod dgheqob rvxbw1b dgheqoc rvxbwdo"
-        }
-      },
-      defaultVariants: {
-        variant: "solid"
-      }
-    },
-    input: {
-      input: "thlqfd1 thlqfd0 rvxbw1k rvxbwds rvxbw11 rvxbwu",
-      container: "thlqfd3 thlqfd2 rvxbw1 rvxbwv rvxbw19"
-    },
-    label: {
-      base: "_1426p3v0",
-      variants: {
-        size: {
-          small: "_1426p3v1",
-          medium: "_1426p3v2",
-          large: "_1426p3v3"
-        },
-        required: "_1426p3v4"
-      },
-      defaultVariants: {
-        size: "large"
-      }
-    },
-    link: {
-      base: "zujos30 _1pwcvlj1",
-      variants: {
-        variant: {
-          inherit: "zujos31",
-          primary: "zujos32 rvxbw1f rvxbw1z",
-          secondary: "zujos33 rvxbw1i rvxbw1z"
-        },
-        underline: "zujos34"
-      },
-      defaultVariants: {
-        variant: "primary"
-      }
-    },
-    progress: {
-      base: "_185khh42 _185khh41 rvxbw2d rvxbwu rvxbwa rvxbw1f rvxbw2k",
-      bar: "_185khh43",
-      variants: {
-        indeterminate: "_185khh44"
-      }
-    },
-    radio: {
-      base: "fipgc31 fipgc30 rvxbw3 _1pwcvlj1",
-      icon: "fipgc32",
-      label: "fipgc33 rvxbw5o rvxbw6k rvxbwdg rvxbw8o rvxbw1r"
-    },
-    select: {
-      select: "_1q59vpe7 _1q59vpe0 rvxbw1k _1q59vpe1 rvxbwds _1q59vpe2 rvxbw11 _1q59vpe3 rvxbwd4 _1q59vpe4 rvxbw1 _1q59vpe5 rvxbwv _1q59vpe6 rvxbw19 _1pwcvlj1",
-      variants: {
-        variant: {
-          outline: "_1q59vpea _1q59vpe8 rvxbwy _1q59vpe9 rvxbwj",
-          solid: "_1q59vpeb"
-        }
-      },
-      icon: "_1q59vped _1q59vpec rvxbwgw",
-      defaultVariants: {
-        variant: "solid"
-      }
-    },
-    spinner: {
-      base: "ilkbcn1",
-      variants: {
-        size: {
-          small: "ilkbcn2",
-          medium: "ilkbcn3",
-          large: "ilkbcn4"
-        }
-      },
-      defaultVariants: {
-        size: "small"
-      }
-    },
-    "switch": {
-      base: "pzg9zr3 pzg9zr1 rvxbwx pzg9zr2 rvxbwa _1pwcvlj1",
-      slider: "pzg9zr7 pzg9zr4 rvxbwiw pzg9zr5 rvxbw1 pzg9zr6 rvxbwx"
-    },
-    slider: {
-      base: "nczc033",
-      track: "nczc035 nczc034 rvxbwu",
-      filledTrack: "nczc036",
-      thumb: "nczc037 _1pwcvlj1",
-      variants: {
-        size: {
-          small: "nczc038",
-          medium: "nczc039",
-          large: "nczc03a"
-        },
-        colorScheme: {
-          primary: "nczc03b",
-          secondary: "nczc03c"
-        }
-      },
-      defaultVariants: {
-        size: "medium",
-        colorScheme: "primary"
-      }
-    }
-  }
-};
+  tokens: styles_themes_momotaro_tokens_css_cjs.tokens,
+  components: styles_themes_momotaro_components_index_cjs.components
+});
 fileScope.endFileScope();
 exports.momotaro = momotaro;

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

@@ -1,197 +1,13 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import "./tokens.css.ts.vanilla.mjs";
-import "./components/button.css.ts.vanilla.mjs";
-import "./components/checkbox.css.ts.vanilla.mjs";
-import "./components/dialog.css.ts.vanilla.mjs";
-import "./components/divider.css.ts.vanilla.mjs";
-import "./components/dropdown.css.ts.vanilla.mjs";
-import "./components/input.css.ts.vanilla.mjs";
-import "./components/label.css.ts.vanilla.mjs";
-import "./components/link.css.ts.vanilla.mjs";
-import "./components/progress.css.ts.vanilla.mjs";
-import "./components/radio.css.ts.vanilla.mjs";
-import "./components/select.css.ts.vanilla.mjs";
-import "./components/slider.css.ts.vanilla.mjs";
-import "./components/spinner.css.ts.vanilla.mjs";
-import "./components/switch.css.ts.vanilla.mjs";
-import "./components/helpers.css.ts.vanilla.mjs";
-import "../../lib/css/atoms/sprinkles.css.ts.vanilla.mjs";
-import "./momotaro.css.ts.vanilla.mjs";
+import { makeTheme } from "../../lib/theme/makeTheme.mjs";
+import { components } from "./components/index.mjs";
+import { tokens } from "./tokens.css.mjs";
 setFileScope("src/themes/momotaro/momotaro.css.ts", "@blockle/blocks");
-var momotaro = {
+const momotaro = makeTheme({
   name: "momotaro",
-  vars: "_1htisiw0",
-  components: {
-    button: {
-      base: "ta7q6b8 ta7q6b2 rvxbw5s ta7q6b3 rvxbw98 rvxbw40 ta7q6b4 rvxbw7w ta7q6b5 rvxbwv ta7q6b6 rvxbw1z ta7q6b7 rvxbw8k _1pwcvlj2 _1pwcvlj1",
-      variants: {
-        variant: {
-          solid: "ta7q6ba ta7q6b9 rvxbw11",
-          outline: "ta7q6bc ta7q6bb rvxbwy",
-          ghost: "ta7q6bd"
-        },
-        size: {
-          small: "ta7q6bf ta7q6be rvxbwgw",
-          medium: "ta7q6bh ta7q6bg rvxbwh0",
-          large: "ta7q6bj ta7q6bi rvxbwh0"
-        },
-        intent: {
-          neutral: "ta7q6bk",
-          danger: "ta7q6bl"
-        }
-      },
-      compoundVariants: [{
-        variants: {
-          variant: "solid",
-          intent: "neutral"
-        },
-        style: "ta7q6bm"
-      }, {
-        variants: {
-          variant: "solid",
-          intent: "danger"
-        },
-        style: "ta7q6bn"
-      }],
-      defaultVariants: {
-        size: "small",
-        variant: "solid",
-        intent: "neutral"
-      }
-    },
-    checkbox: {
-      base: "_1cqtsrz1 _1cqtsrz0 rvxbw3 rvxbwu _1pwcvlj1",
-      icon: "_1cqtsrz2",
-      label: "_1cqtsrz3 rvxbw5o rvxbw6k rvxbwdg rvxbw8o rvxbw1r"
-    },
-    dialog: {
-      dialog: "_6gb0ay1 _6gb0ay0 rvxbw5o rvxbw6s rvxbwdc rvxbw11 rvxbw2n rvxbwv rvxbw1a",
-      backdrop: "_6gb0ay2",
-      variants: {
-        size: {
-          small: "_6gb0ay3",
-          medium: "_6gb0ay4",
-          large: "_6gb0ay5"
-        }
-      },
-      defaultVariants: {
-        size: "small"
-      }
-    },
-    divider: {
-      defaultVariants: {
-        color: "textLight"
-      }
-    },
-    dropdown: {
-      base: "dgheqo4 dgheqo0 rvxbw1 dgheqo1 rvxbwu dgheqo2 rvxbw19 dgheqo3 rvxbwdo",
-      variants: {
-        variant: {
-          solid: "dgheqoa dgheqo5 rvxbw1 dgheqo6 rvxbw11 dgheqo7 rvxbw19 dgheqo8 rvxbw1b dgheqo9 rvxbwdo",
-          outline: "dgheqod dgheqob rvxbw1b dgheqoc rvxbwdo"
-        }
-      },
-      defaultVariants: {
-        variant: "solid"
-      }
-    },
-    input: {
-      input: "thlqfd1 thlqfd0 rvxbw1k rvxbwds rvxbw11 rvxbwu",
-      container: "thlqfd3 thlqfd2 rvxbw1 rvxbwv rvxbw19"
-    },
-    label: {
-      base: "_1426p3v0",
-      variants: {
-        size: {
-          small: "_1426p3v1",
-          medium: "_1426p3v2",
-          large: "_1426p3v3"
-        },
-        required: "_1426p3v4"
-      },
-      defaultVariants: {
-        size: "large"
-      }
-    },
-    link: {
-      base: "zujos30 _1pwcvlj1",
-      variants: {
-        variant: {
-          inherit: "zujos31",
-          primary: "zujos32 rvxbw1f rvxbw1z",
-          secondary: "zujos33 rvxbw1i rvxbw1z"
-        },
-        underline: "zujos34"
-      },
-      defaultVariants: {
-        variant: "primary"
-      }
-    },
-    progress: {
-      base: "_185khh42 _185khh41 rvxbw2d rvxbwu rvxbwa rvxbw1f rvxbw2k",
-      bar: "_185khh43",
-      variants: {
-        indeterminate: "_185khh44"
-      }
-    },
-    radio: {
-      base: "fipgc31 fipgc30 rvxbw3 _1pwcvlj1",
-      icon: "fipgc32",
-      label: "fipgc33 rvxbw5o rvxbw6k rvxbwdg rvxbw8o rvxbw1r"
-    },
-    select: {
-      select: "_1q59vpe7 _1q59vpe0 rvxbw1k _1q59vpe1 rvxbwds _1q59vpe2 rvxbw11 _1q59vpe3 rvxbwd4 _1q59vpe4 rvxbw1 _1q59vpe5 rvxbwv _1q59vpe6 rvxbw19 _1pwcvlj1",
-      variants: {
-        variant: {
-          outline: "_1q59vpea _1q59vpe8 rvxbwy _1q59vpe9 rvxbwj",
-          solid: "_1q59vpeb"
-        }
-      },
-      icon: "_1q59vped _1q59vpec rvxbwgw",
-      defaultVariants: {
-        variant: "solid"
-      }
-    },
-    spinner: {
-      base: "ilkbcn1",
-      variants: {
-        size: {
-          small: "ilkbcn2",
-          medium: "ilkbcn3",
-          large: "ilkbcn4"
-        }
-      },
-      defaultVariants: {
-        size: "small"
-      }
-    },
-    "switch": {
-      base: "pzg9zr3 pzg9zr1 rvxbwx pzg9zr2 rvxbwa _1pwcvlj1",
-      slider: "pzg9zr7 pzg9zr4 rvxbwiw pzg9zr5 rvxbw1 pzg9zr6 rvxbwx"
-    },
-    slider: {
-      base: "nczc033",
-      track: "nczc035 nczc034 rvxbwu",
-      filledTrack: "nczc036",
-      thumb: "nczc037 _1pwcvlj1",
-      variants: {
-        size: {
-          small: "nczc038",
-          medium: "nczc039",
-          large: "nczc03a"
-        },
-        colorScheme: {
-          primary: "nczc03b",
-          secondary: "nczc03c"
-        }
-      },
-      defaultVariants: {
-        size: "medium",
-        colorScheme: "primary"
-      }
-    }
-  }
-};
+  tokens,
+  components
+});
 endFileScope();
 export {
   momotaro