@blockle/blocks 0.9.0 → 0.10.0

package/dist/reset.css.cjs

@@ -1,4 +1,4 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-fileScope.setFileScope("src/entries/reset.css.ts", "blocks");
+fileScope.setFileScope("src/entries/reset.css.ts", "@blockle/blocks");
 fileScope.endFileScope();

package/dist/reset.css.mjs

@@ -1,3 +1,3 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-setFileScope("src/entries/reset.css.ts", "blocks");
+setFileScope("src/entries/reset.css.ts", "@blockle/blocks");
 endFileScope();

package/dist/styles/components/display/Divider/Divider.cjs

@@ -6,11 +6,11 @@ const styles_lib_utils_atomProps_cjs = require("../../../lib/utils/atom-props.cj
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 const BlocksProviderContext = react.createContext(null);
 const useTheme = () => {
-  const theme = react.useContext(BlocksProviderContext);
-  if (!theme) {
+  const context = react.useContext(BlocksProviderContext);
+  if (!context) {
     throw new Error("useTheme must be used within a BlocksProvider");
   }
-  return theme;
+  return context.theme;
 };
 function useComponentStyles(name, props, useDefaultVariants = true) {
   const { components } = useTheme();

package/dist/styles/components/display/Divider/Divider.mjs

@@ -5,11 +5,11 @@ import { getAtomsAndProps } from "../../../lib/utils/atom-props.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 const BlocksProviderContext = createContext(null);
 const useTheme = () => {
-  const theme = useContext(BlocksProviderContext);
-  if (!theme) {
+  const context = useContext(BlocksProviderContext);
+  if (!context) {
     throw new Error("useTheme must be used within a BlocksProvider");
   }
-  return theme;
+  return context.theme;
 };
 function useComponentStyles(name, props, useDefaultVariants = true) {
   const { components } = useTheme();

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

@@ -2,7 +2,7 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/display/Divider/divider.css.ts", "blocks");
+fileScope.setFileScope("src/components/display/Divider/divider.css.ts", "@blockle/blocks");
 const divider = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

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

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
-setFileScope("src/components/display/Divider/divider.css.ts", "blocks");
+setFileScope("src/components/display/Divider/divider.css.ts", "@blockle/blocks");
 const divider = style({
   "@layer": {
     [blocksLayer]: {

package/dist/styles/components/form/Button/Button.css.cjs

@@ -2,7 +2,7 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/form/Button/Button.css.ts", "blocks");
+fileScope.setFileScope("src/components/form/Button/Button.css.ts", "@blockle/blocks");
 const buttonReset = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

package/dist/styles/components/form/Button/Button.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
-setFileScope("src/components/form/Button/Button.css.ts", "blocks");
+setFileScope("src/components/form/Button/Button.css.ts", "@blockle/blocks");
 const buttonReset = style({
   "@layer": {
     [blocksLayer]: {

package/dist/styles/components/form/Checkbox/checkbox.css.cjs

@@ -2,7 +2,7 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/form/Checkbox/checkbox.css.ts", "blocks");
+fileScope.setFileScope("src/components/form/Checkbox/checkbox.css.ts", "@blockle/blocks");
 const container = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

package/dist/styles/components/form/Checkbox/checkbox.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
-setFileScope("src/components/form/Checkbox/checkbox.css.ts", "blocks");
+setFileScope("src/components/form/Checkbox/checkbox.css.ts", "@blockle/blocks");
 const container = style({
   "@layer": {
     [blocksLayer]: {

package/dist/styles/components/form/Input/input.css.cjs

@@ -2,7 +2,7 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/form/Input/input.css.ts", "blocks");
+fileScope.setFileScope("src/components/form/Input/input.css.ts", "@blockle/blocks");
 const input = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

package/dist/styles/components/form/Input/input.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
-setFileScope("src/components/form/Input/input.css.ts", "blocks");
+setFileScope("src/components/form/Input/input.css.ts", "@blockle/blocks");
 const input = style({
   "@layer": {
     [blocksLayer]: {

package/dist/styles/components/form/Radio/radio.css.cjs

@@ -2,7 +2,7 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/form/Radio/radio.css.ts", "blocks");
+fileScope.setFileScope("src/components/form/Radio/radio.css.ts", "@blockle/blocks");
 const container = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

package/dist/styles/components/form/Radio/radio.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
-setFileScope("src/components/form/Radio/radio.css.ts", "blocks");
+setFileScope("src/components/form/Radio/radio.css.ts", "@blockle/blocks");
 const container = style({
   "@layer": {
     [blocksLayer]: {

package/dist/styles/components/form/Select/select.css.cjs

@@ -2,7 +2,7 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/form/Select/select.css.ts", "blocks");
+fileScope.setFileScope("src/components/form/Select/select.css.ts", "@blockle/blocks");
 const wrapper = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

package/dist/styles/components/form/Select/select.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
-setFileScope("src/components/form/Select/select.css.ts", "blocks");
+setFileScope("src/components/form/Select/select.css.ts", "@blockle/blocks");
 const wrapper = style({
   "@layer": {
     [blocksLayer]: {

package/dist/styles/components/form/Slider/Slider.cjs

@@ -0,0 +1,155 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
+const styles_components_form_Slider_slider_css_cjs = require("./slider.css.cjs");
+function getProgress(event, rect) {
+  const { clientX, clientY } = event;
+  const { width, height, left, top } = rect;
+  const x = (clientX - left) / width;
+  const y = (clientY - top) / height;
+  return [x, y];
+}
+function usePointerProgress({ container, orientation, onChange }) {
+  react.useEffect(() => {
+    const element = container.current;
+    function pointerdown(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!element) {
+        return;
+      }
+      const containerRect = element.getBoundingClientRect();
+      const axisIndex = orientation === "horizontal" ? 0 : 1;
+      const progress = getProgress(event, containerRect);
+      onChange(progress[axisIndex]);
+      const pointermove = (event2) => {
+        event2.preventDefault();
+        const progress2 = getProgress(event2, containerRect);
+        onChange(progress2[axisIndex]);
+      };
+      const pointerup = () => {
+        document.removeEventListener("pointermove", pointermove);
+        document.removeEventListener("pointerup", pointerup);
+      };
+      document.addEventListener("pointermove", pointermove);
+      document.addEventListener("pointerup", pointerup);
+    }
+    if (!element) {
+      return;
+    }
+    element.addEventListener("pointerdown", pointerdown);
+    return () => {
+      element.removeEventListener("pointerdown", pointerdown);
+    };
+  }, [container, onChange, orientation]);
+}
+function getBoundValue(newValue, min, max, step) {
+  let value = Math.round(newValue / step) * step;
+  value = Math.max(min, Math.min(max, value));
+  return value;
+}
+const Slider = ({
+  min = 0,
+  max = 100,
+  step = 1,
+  orientation = "horizontal",
+  defaultValue = 0,
+  onChange,
+  value,
+  name,
+  size,
+  colorScheme,
+  ...restProps
+}) => {
+  const [internValue, setInternValue] = react.useState(
+    getBoundValue(value ?? defaultValue, min, max, step)
+  );
+  const baseClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", { base: true, variants: { size, colorScheme } });
+  const trackClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", { track: true }, false);
+  const filledTrackClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", { filledTrack: true }, false);
+  const thumbClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", { thumb: true }, false);
+  const containerRef = react.useRef(null);
+  react.useEffect(() => {
+    if (value !== void 0) {
+      setInternValue(getBoundValue(value, min, max, step));
+    }
+  }, [value, min, max, step]);
+  react.useEffect(() => {
+    if (onChange && internValue !== value) {
+      onChange(internValue);
+    }
+  }, [internValue, onChange, value]);
+  usePointerProgress({
+    container: containerRef,
+    orientation,
+    onChange(progress) {
+      if (orientation === "vertical") {
+        progress = 1 - progress;
+      }
+      setInternValue(getBoundValue(max * progress, min, max, step));
+    }
+  });
+  const onKeyDown = react.useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const specialKey = ["PageUp", "PageDown"];
+      const stepModifier = event.shiftKey || specialKey.includes(event.key) ? (max - min) / 10 : step;
+      if (event.key === "ArrowLeft" || event.key === "ArrowDown" || event.key === "PageDown") {
+        return setInternValue((value2) => getBoundValue(value2 - stepModifier, min, max, step));
+      }
+      if (event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "PageUp") {
+        return setInternValue((value2) => getBoundValue(value2 + stepModifier, min, max, step));
+      }
+      if (event.key === "Home") {
+        return setInternValue(min);
+      }
+      if (event.key === "End") {
+        return setInternValue(max);
+      }
+    },
+    [max, min, step]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: styles_components_display_Divider_Divider_cjs.classnames(
+        styles_components_form_Slider_slider_css_cjs.container,
+        orientation === "vertical" ? styles_components_form_Slider_slider_css_cjs.containerVertical : "",
+        baseClass
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Slider_slider_css_cjs.track, trackClass), children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Slider_slider_css_cjs.filledTrack, filledTrackClass),
+            style: {
+              inlineSize: `${internValue / max * 100}%`
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Slider_slider_css_cjs.thumb, thumbClass),
+            tabIndex: 0,
+            role: "slider",
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": internValue,
+            "aria-orientation": orientation,
+            style: {
+              [orientation === "horizontal" ? "insetInlineStart" : "insetInlineEnd"]: `${internValue / max * 100}%`
+            },
+            onKeyDown,
+            ...restProps
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: internValue })
+      ]
+    }
+  );
+};
+exports.Slider = Slider;

package/dist/styles/components/form/Slider/Slider.mjs

@@ -0,0 +1,156 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEffect, useState, useRef, useCallback } from "react";
+import { useComponentStyles, classnames } from "../../display/Divider/Divider.mjs";
+import { containerVertical, container, track, filledTrack, thumb } from "./slider.css.mjs";
+function getProgress(event, rect) {
+  const { clientX, clientY } = event;
+  const { width, height, left, top } = rect;
+  const x = (clientX - left) / width;
+  const y = (clientY - top) / height;
+  return [x, y];
+}
+function usePointerProgress({ container: container2, orientation, onChange }) {
+  useEffect(() => {
+    const element = container2.current;
+    function pointerdown(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!element) {
+        return;
+      }
+      const containerRect = element.getBoundingClientRect();
+      const axisIndex = orientation === "horizontal" ? 0 : 1;
+      const progress = getProgress(event, containerRect);
+      onChange(progress[axisIndex]);
+      const pointermove = (event2) => {
+        event2.preventDefault();
+        const progress2 = getProgress(event2, containerRect);
+        onChange(progress2[axisIndex]);
+      };
+      const pointerup = () => {
+        document.removeEventListener("pointermove", pointermove);
+        document.removeEventListener("pointerup", pointerup);
+      };
+      document.addEventListener("pointermove", pointermove);
+      document.addEventListener("pointerup", pointerup);
+    }
+    if (!element) {
+      return;
+    }
+    element.addEventListener("pointerdown", pointerdown);
+    return () => {
+      element.removeEventListener("pointerdown", pointerdown);
+    };
+  }, [container2, onChange, orientation]);
+}
+function getBoundValue(newValue, min, max, step) {
+  let value = Math.round(newValue / step) * step;
+  value = Math.max(min, Math.min(max, value));
+  return value;
+}
+const Slider = ({
+  min = 0,
+  max = 100,
+  step = 1,
+  orientation = "horizontal",
+  defaultValue = 0,
+  onChange,
+  value,
+  name,
+  size,
+  colorScheme,
+  ...restProps
+}) => {
+  const [internValue, setInternValue] = useState(
+    getBoundValue(value ?? defaultValue, min, max, step)
+  );
+  const baseClass = useComponentStyles("slider", { base: true, variants: { size, colorScheme } });
+  const trackClass = useComponentStyles("slider", { track: true }, false);
+  const filledTrackClass = useComponentStyles("slider", { filledTrack: true }, false);
+  const thumbClass = useComponentStyles("slider", { thumb: true }, false);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (value !== void 0) {
+      setInternValue(getBoundValue(value, min, max, step));
+    }
+  }, [value, min, max, step]);
+  useEffect(() => {
+    if (onChange && internValue !== value) {
+      onChange(internValue);
+    }
+  }, [internValue, onChange, value]);
+  usePointerProgress({
+    container: containerRef,
+    orientation,
+    onChange(progress) {
+      if (orientation === "vertical") {
+        progress = 1 - progress;
+      }
+      setInternValue(getBoundValue(max * progress, min, max, step));
+    }
+  });
+  const onKeyDown = useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const specialKey = ["PageUp", "PageDown"];
+      const stepModifier = event.shiftKey || specialKey.includes(event.key) ? (max - min) / 10 : step;
+      if (event.key === "ArrowLeft" || event.key === "ArrowDown" || event.key === "PageDown") {
+        return setInternValue((value2) => getBoundValue(value2 - stepModifier, min, max, step));
+      }
+      if (event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "PageUp") {
+        return setInternValue((value2) => getBoundValue(value2 + stepModifier, min, max, step));
+      }
+      if (event.key === "Home") {
+        return setInternValue(min);
+      }
+      if (event.key === "End") {
+        return setInternValue(max);
+      }
+    },
+    [max, min, step]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: classnames(
+        container,
+        orientation === "vertical" ? containerVertical : "",
+        baseClass
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: classnames(track, trackClass), children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classnames(filledTrack, filledTrackClass),
+            style: {
+              inlineSize: `${internValue / max * 100}%`
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classnames(thumb, thumbClass),
+            tabIndex: 0,
+            role: "slider",
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": internValue,
+            "aria-orientation": orientation,
+            style: {
+              [orientation === "horizontal" ? "insetInlineStart" : "insetInlineEnd"]: `${internValue / max * 100}%`
+            },
+            onKeyDown,
+            ...restProps
+          }
+        ),
+        /* @__PURE__ */ jsx("input", { type: "hidden", name, value: internValue })
+      ]
+    }
+  );
+};
+export {
+  Slider
+};

package/dist/styles/components/form/Slider/slider.css.cjs

@@ -0,0 +1,73 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+fileScope.setFileScope("src/components/form/Slider/slider.css.ts", "@blockle/blocks");
+const container = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      position: "relative",
+      writingMode: "horizontal-tb"
+    }
+  }
+}, "container");
+const containerVertical = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      writingMode: "vertical-lr"
+    }
+  }
+}, "containerVertical");
+const track = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      cursor: "pointer",
+      position: "absolute",
+      inlineSize: "100%",
+      insetBlockStart: "50%",
+      transform: "translateY(-50%)",
+      selectors: {
+        [`${containerVertical} &`]: {
+          transform: "translateX(-50%)"
+        }
+      }
+    }
+  }
+}, "track");
+const filledTrack = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      position: "absolute",
+      blockSize: "100%",
+      borderRadius: "inherit",
+      selectors: {
+        [`${containerVertical} &`]: {
+          insetInlineEnd: "0%"
+        }
+      }
+    }
+  }
+}, "filledTrack");
+const thumb = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      cursor: "pointer",
+      position: "absolute",
+      blockSize: "100%",
+      insetBlockStart: "50%",
+      transform: "translate(-50%, -50%)",
+      touchAction: "none",
+      selectors: {
+        [`${containerVertical} &`]: {
+          transform: "translate(-50%, 50%)"
+        }
+      }
+    }
+  }
+}, "thumb");
+fileScope.endFileScope();
+exports.container = container;
+exports.containerVertical = containerVertical;
+exports.filledTrack = filledTrack;
+exports.thumb = thumb;
+exports.track = track;

package/dist/styles/components/form/Slider/slider.css.mjs

@@ -0,0 +1,74 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/form/Slider/slider.css.ts", "@blockle/blocks");
+const container = style({
+  "@layer": {
+    [blocksLayer]: {
+      position: "relative",
+      writingMode: "horizontal-tb"
+    }
+  }
+}, "container");
+const containerVertical = style({
+  "@layer": {
+    [blocksLayer]: {
+      writingMode: "vertical-lr"
+    }
+  }
+}, "containerVertical");
+const track = style({
+  "@layer": {
+    [blocksLayer]: {
+      cursor: "pointer",
+      position: "absolute",
+      inlineSize: "100%",
+      insetBlockStart: "50%",
+      transform: "translateY(-50%)",
+      selectors: {
+        [`${containerVertical} &`]: {
+          transform: "translateX(-50%)"
+        }
+      }
+    }
+  }
+}, "track");
+const filledTrack = style({
+  "@layer": {
+    [blocksLayer]: {
+      position: "absolute",
+      blockSize: "100%",
+      borderRadius: "inherit",
+      selectors: {
+        [`${containerVertical} &`]: {
+          insetInlineEnd: "0%"
+        }
+      }
+    }
+  }
+}, "filledTrack");
+const thumb = style({
+  "@layer": {
+    [blocksLayer]: {
+      cursor: "pointer",
+      position: "absolute",
+      blockSize: "100%",
+      insetBlockStart: "50%",
+      transform: "translate(-50%, -50%)",
+      touchAction: "none",
+      selectors: {
+        [`${containerVertical} &`]: {
+          transform: "translate(-50%, 50%)"
+        }
+      }
+    }
+  }
+}, "thumb");
+endFileScope();
+export {
+  container,
+  containerVertical,
+  filledTrack,
+  thumb,
+  track
+};

package/dist/styles/components/form/Switch/switch.css.cjs

@@ -2,7 +2,7 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/form/Switch/switch.css.ts", "blocks");
+fileScope.setFileScope("src/components/form/Switch/switch.css.ts", "@blockle/blocks");
 const container = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

package/dist/styles/components/form/Switch/switch.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
-setFileScope("src/components/form/Switch/switch.css.ts", "blocks");
+setFileScope("src/components/form/Switch/switch.css.ts", "@blockle/blocks");
 const container = style({
   "@layer": {
     [blocksLayer]: {