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

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

@@ -1,30 +1,31 @@
 "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_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+const layers_css = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/form/Checkbox/checkbox.css.ts", "@blockle/blocks");
 const container = css.style({
   "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [layers_css.blocksLayer]: {
       position: "relative",
       cursor: "pointer",
       overflow: "hidden"
     }
   }
-}, "container");
+});
 const input = css.style({
   position: "absolute",
   inset: 0,
   opacity: 0,
   "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [layers_css.blocksLayer]: {
       all: "unset"
     }
   }
-}, "input");
+});
 const icon = css.style({
   pointerEvents: "none"
-}, "icon");
+});
 fileScope.endFileScope();
 exports.container = container;
 exports.icon = icon;

package/dist/components/form/Checkbox/checkbox.css.d.ts

@@ -0,0 +1,3 @@
+export declare const container: string;
+export declare const input: string;
+export declare const icon: string;

package/dist/components/form/Checkbox/{checkbox.css.mjs → checkbox.css.js}

@@ -1,6 +1,6 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.js";
 setFileScope("src/components/form/Checkbox/checkbox.css.ts", "@blockle/blocks");
 const container = style({
   "@layer": {
@@ -10,7 +10,7 @@ const container = style({
       overflow: "hidden"
     }
   }
-}, "container");
+});
 const input = style({
   position: "absolute",
   inset: 0,
@@ -20,10 +20,10 @@ const input = style({
       all: "unset"
     }
   }
-}, "input");
+});
 const icon = style({
   pointerEvents: "none"
-}, "icon");
+});
 endFileScope();
 export {
   container,

package/dist/components/form/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox, type CheckboxProps } from './Checkbox';

package/dist/components/form/Input/Input.cjs

@@ -1,10 +1,11 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const components_form_Input_input_css_cjs = require("./input.css.cjs");
-const components_layout_Box_Box_cjs = require("../../layout/Box/Box.cjs");
+const theme = require("../../../lib/theme/store/theme.cjs");
+const classnames = require("../../../lib/utils/classnames.cjs");
+const input_css = require("./input.css.cjs");
+const Box = require("../../layout/Box/Box.cjs");
 const Input = ({
   className,
   endSlot,
@@ -16,18 +17,18 @@ const Input = ({
   ...restProps
 }) => {
   const id = react.useId();
-  const containerClassName = lib_theme_store_theme_cjs.getComponentStyles(
+  const containerClassName = theme.getComponentStyles(
     "input",
     { container: true },
     false
   );
-  const inputClassName = lib_theme_store_theme_cjs.getComponentStyles("input", { input: true });
-  return /* @__PURE__ */ jsxRuntime.jsx(components_layout_Box_Box_cjs.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    components_layout_Box_Box_cjs.Box,
+  const inputClassName = theme.getComponentStyles("input", { input: true });
+  return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    Box.Box,
     {
       display: "flex",
       alignItems: "center",
-      className: lib_utils_classnames_cjs.classnames(containerClassName, className),
+      className: classnames.classnames(containerClassName, className),
       children: [
         startSlot,
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -38,7 +39,7 @@ const Input = ({
             name,
             type,
             placeholder,
-            className: lib_utils_classnames_cjs.classnames(components_form_Input_input_css_cjs.input, inputClassName),
+            className: classnames.classnames(input_css.input, inputClassName),
             ...restProps
           }
         ),

package/dist/components/form/Input/Input.d.ts

@@ -0,0 +1,11 @@
+import { OptionalLiteral } from '../../../lib/utils/helpers';
+import { HTMLElementProps } from '../../../lib/utils/utils';
+export type InputProps = {
+    className?: string;
+    endSlot?: React.ReactNode;
+    name: string;
+    ref?: React.Ref<HTMLInputElement>;
+    startSlot?: React.ReactNode;
+    type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
+} & Omit<HTMLElementProps<HTMLInputElement>, 'type'>;
+export declare const Input: React.FC<InputProps>;

package/dist/components/form/Input/{Input.mjs → Input.js}

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
-import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { input } from "./input.css.mjs";
-import { Box } from "../../layout/Box/Box.mjs";
+import { getComponentStyles } from "../../../lib/theme/store/theme.js";
+import { classnames } from "../../../lib/utils/classnames.js";
+import { input } from "./input.css.js";
+import { Box } from "../../layout/Box/Box.js";
 const Input = ({
   className,
   endSlot,

package/dist/components/form/Input/Input.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/form/Input/Input.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Input, InputProps } from './Input';
+declare const _default: Meta<typeof Input>;
+export default _default;
+export declare const Default: StoryObj<InputProps>;

package/dist/components/form/Input/index.d.ts

@@ -0,0 +1 @@
+export { Input, type InputProps } from './Input';

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

@@ -1,11 +1,12 @@
 "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_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+const layers_css = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/form/Input/input.css.ts", "@blockle/blocks");
 const input = css.style({
   "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [layers_css.blocksLayer]: {
       appearance: "none",
       width: "100%",
       selectors: {
@@ -15,6 +16,6 @@ const input = css.style({
       }
     }
   }
-}, "input");
+});
 fileScope.endFileScope();
 exports.input = input;

package/dist/components/form/Input/input.css.d.ts

@@ -0,0 +1 @@
+export declare const input: string;

package/dist/components/form/Input/{input.css.mjs → input.css.js}

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

package/dist/components/form/Label/Label.cjs

@@ -1,8 +1,9 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+const theme = require("../../../lib/theme/store/theme.cjs");
+const classnames = require("../../../lib/utils/classnames.cjs");
+const sprinkles_css = require("../../../lib/css/atoms/sprinkles.css.cjs");
 const Label = ({
   asSpan,
   children,
@@ -13,14 +14,14 @@ const Label = ({
   ...restProps
 }) => {
   const Component = asSpan ? "span" : "label";
-  const containerClassName = lib_theme_store_theme_cjs.getComponentStyles("label", {
+  const containerClassName = theme.getComponentStyles("label", {
     base: true,
     variants: { required, size }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
-      className: lib_utils_classnames_cjs.classnames(containerClassName, className, lib_css_atoms_sprinkles_css_cjs.atoms({ cursor })),
+      className: classnames.classnames(containerClassName, className, sprinkles_css.atoms({ cursor })),
       ...restProps,
       children
     }

package/dist/components/form/Label/Label.d.ts

@@ -0,0 +1,18 @@
+import { Atoms } from '../../../lib/css/atoms';
+import { LabelTheme } from '../../../lib/theme/componentThemes';
+import { HTMLElementProps } from '../../../lib/utils/utils';
+export type LabelProps = {
+    /**
+     * If true, the label will be rendered as a span element
+     * but will still have the same styles as a label.
+     * Useful for when you want to use a label element but
+     * can't because of the parent element's structure.
+     */
+    asSpan?: boolean;
+    htmlFor?: string;
+    children?: React.ReactNode;
+    required?: boolean;
+    size?: LabelTheme['variants']['size'];
+    cursor?: Atoms['cursor'];
+} & HTMLElementProps<HTMLLabelElement>;
+export declare const Label: React.FC<LabelProps>;

package/dist/components/form/Label/{Label.mjs → Label.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+import { getComponentStyles } from "../../../lib/theme/store/theme.js";
+import { classnames } from "../../../lib/utils/classnames.js";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.js";
 const Label = ({
   asSpan,
   children,

package/dist/components/form/Label/Label.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/form/Label/Label.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { LabelProps } from './Label';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryObj<LabelProps>;
+export declare const WithInput: StoryObj<LabelProps>;

package/dist/components/form/Label/index.d.ts

@@ -0,0 +1 @@
+export { Label, type LabelProps } from './Label';

package/dist/components/form/Radio/Radio.cjs

@@ -1,9 +1,10 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const components_form_Radio_radio_css_cjs = require("./radio.css.cjs");
-const components_form_Label_Label_cjs = require("../Label/Label.cjs");
+const theme = require("../../../lib/theme/store/theme.cjs");
+const classnames = require("../../../lib/utils/classnames.cjs");
+const radio_css = require("./radio.css.cjs");
+const Label = require("../Label/Label.cjs");
 const Radio = ({
   name,
   children,
@@ -11,13 +12,13 @@ const Radio = ({
   ref,
   ...restProps
 }) => {
-  const containerClassName = lib_theme_store_theme_cjs.getComponentStyles("radio", { base: true }, false);
-  const iconClassName = lib_theme_store_theme_cjs.getComponentStyles("radio", { icon: true }, false);
-  const labelClassName = lib_theme_store_theme_cjs.getComponentStyles("checkbox", { label: true }, false);
+  const containerClassName = theme.getComponentStyles("radio", { base: true }, false);
+  const iconClassName = theme.getComponentStyles("radio", { icon: true }, false);
+  const labelClassName = theme.getComponentStyles("checkbox", { label: true }, false);
   const input = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: lib_utils_classnames_cjs.classnames(components_form_Radio_radio_css_cjs.container, containerClassName, className),
+      className: classnames.classnames(radio_css.container, containerClassName, className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
@@ -25,11 +26,11 @@ const Radio = ({
             ref,
             type: "radio",
             name,
-            className: components_form_Radio_radio_css_cjs.input,
+            className: radio_css.input,
             ...restProps
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: lib_utils_classnames_cjs.classnames(components_form_Radio_radio_css_cjs.icon, iconClassName) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classnames.classnames(radio_css.icon, iconClassName) })
       ]
     }
   );
@@ -40,7 +41,7 @@ const Radio = ({
     // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>
     /* @__PURE__ */ jsxRuntime.jsxs("label", { className: labelClassName, children: [
       input,
-      /* @__PURE__ */ jsxRuntime.jsx(components_form_Label_Label_cjs.Label, { asSpan: true, children })
+      /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { asSpan: true, children })
     ] })
   );
 };

package/dist/components/form/Radio/Radio.d.ts

@@ -0,0 +1,8 @@
+import { HTMLElementProps } from '../../../lib/utils/utils';
+export type RadioProps = {
+    children?: React.ReactNode;
+    name: string;
+    ref?: React.Ref<HTMLInputElement>;
+    value: string;
+} & HTMLElementProps<HTMLInputElement>;
+export declare const Radio: React.FC<RadioProps>;

package/dist/components/form/Radio/{Radio.mjs → Radio.js}

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { input, icon, container } from "./radio.css.mjs";
-import { Label } from "../Label/Label.mjs";
+import { getComponentStyles } from "../../../lib/theme/store/theme.js";
+import { classnames } from "../../../lib/utils/classnames.js";
+import { input, icon, container } from "./radio.css.js";
+import { Label } from "../Label/Label.js";
 const Radio = ({
   name,
   children,

package/dist/components/form/Radio/Radio.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/form/Radio/Radio.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { RadioProps } from './Radio';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryObj<RadioProps>;
+export declare const WithRadioGroup: StoryObj<RadioProps>;

package/dist/components/form/Radio/RadioGroup.d.ts

@@ -0,0 +1,8 @@
+export type RadioGroupProps = {
+    'aria-labelledby'?: string;
+    children: React.ReactNode;
+    className?: string;
+    required?: boolean;
+    style?: React.CSSProperties;
+};
+export declare const RadioGroup: React.FC<RadioGroupProps>;

package/dist/components/form/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export { Radio, type RadioProps } from './Radio';
+export { RadioGroup, type RadioGroupProps } from './RadioGroup';

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

@@ -1,30 +1,31 @@
 "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_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+const layers_css = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/form/Radio/radio.css.ts", "@blockle/blocks");
 const container = css.style({
   "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [layers_css.blocksLayer]: {
       position: "relative",
       cursor: "pointer",
       overflow: "hidden"
     }
   }
-}, "container");
+});
 const input = css.style({
   position: "absolute",
   inset: 0,
   opacity: 0,
   "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [layers_css.blocksLayer]: {
       all: "unset"
     }
   }
-}, "input");
+});
 const icon = css.style({
   pointerEvents: "none"
-}, "icon");
+});
 fileScope.endFileScope();
 exports.container = container;
 exports.icon = icon;

package/dist/components/form/Radio/radio.css.d.ts

@@ -0,0 +1,3 @@
+export declare const container: string;
+export declare const input: string;
+export declare const icon: string;

package/dist/components/form/Radio/{radio.css.mjs → radio.css.js}

@@ -1,6 +1,6 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.js";
 setFileScope("src/components/form/Radio/radio.css.ts", "@blockle/blocks");
 const container = style({
   "@layer": {
@@ -10,7 +10,7 @@ const container = style({
       overflow: "hidden"
     }
   }
-}, "container");
+});
 const input = style({
   position: "absolute",
   inset: 0,
@@ -20,10 +20,10 @@ const input = style({
       all: "unset"
     }
   }
-}, "input");
+});
 const icon = style({
   pointerEvents: "none"
-}, "icon");
+});
 endFileScope();
 export {
   container,

package/dist/components/form/Select/Select.cjs

@@ -1,9 +1,10 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const components_form_Select_select_css_cjs = require("./select.css.cjs");
-const components_layout_Box_Box_cjs = require("../../layout/Box/Box.cjs");
+const theme = require("../../../lib/theme/store/theme.cjs");
+const classnames = require("../../../lib/utils/classnames.cjs");
+const select_css = require("./select.css.cjs");
+const Box = require("../../layout/Box/Box.cjs");
 const Select = ({
   children,
   placeholder,
@@ -12,22 +13,22 @@ const Select = ({
   ref,
   ...restProps
 }) => {
-  const wrapperClassName = lib_theme_store_theme_cjs.getComponentStyles(
+  const wrapperClassName = theme.getComponentStyles(
     "select",
     { wrapper: true },
     false
   );
-  const selectClassName = lib_theme_store_theme_cjs.getComponentStyles("select", {
+  const selectClassName = theme.getComponentStyles("select", {
     select: true,
     variants: { variant }
   });
-  const iconClassName = lib_theme_store_theme_cjs.getComponentStyles("select", { icon: true }, false);
-  return /* @__PURE__ */ jsxRuntime.jsxs(components_layout_Box_Box_cjs.Box, { className: lib_utils_classnames_cjs.classnames(components_form_Select_select_css_cjs.wrapper, wrapperClassName), children: [
+  const iconClassName = theme.getComponentStyles("select", { icon: true }, false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { className: classnames.classnames(select_css.wrapper, wrapperClassName), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "select",
       {
         ref,
-        className: lib_utils_classnames_cjs.classnames(components_form_Select_select_css_cjs.select, selectClassName, className),
+        className: classnames.classnames(select_css.select, selectClassName, className),
         ...restProps,
         children: [
           placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: placeholder }),
@@ -36,9 +37,9 @@ const Select = ({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      components_layout_Box_Box_cjs.Box,
+      Box.Box,
       {
-        className: lib_utils_classnames_cjs.classnames(components_form_Select_select_css_cjs.icon, iconClassName),
+        className: classnames.classnames(select_css.icon, iconClassName),
         role: "presentation",
         "aria-hidden": true,
         children: /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {})

package/dist/components/form/Select/Select.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { SelectTheme } from '../../../lib/theme/componentThemes';
+import { HTMLElementProps } from '../../../lib/utils/utils';
+export type SelectProps = {
+    children: React.ReactNode;
+    placeholder?: string;
+    ref?: React.Ref<HTMLSelectElement>;
+    variant?: SelectTheme['variants']['variant'];
+} & HTMLElementProps<HTMLSelectElement>;
+export declare const Select: React.FC<SelectProps>;

package/dist/components/form/Select/{Select.mjs → Select.js}

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { select, icon, wrapper } from "./select.css.mjs";
-import { Box } from "../../layout/Box/Box.mjs";
+import { getComponentStyles } from "../../../lib/theme/store/theme.js";
+import { classnames } from "../../../lib/utils/classnames.js";
+import { select, icon, wrapper } from "./select.css.js";
+import { Box } from "../../layout/Box/Box.js";
 const Select = ({
   children,
   placeholder,

package/dist/components/form/Select/Select.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Select, SelectProps } from './Select';
+declare const _default: Meta<typeof Select>;
+export default _default;
+export declare const Default: StoryObj<SelectProps>;

package/dist/components/form/Select/index.d.ts

@@ -0,0 +1 @@
+export { Select, type SelectProps } from './Select';

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

@@ -1,26 +1,27 @@
 "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_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+const layers_css = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/form/Select/select.css.ts", "@blockle/blocks");
 const wrapper = css.style({
   "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [layers_css.blocksLayer]: {
       position: "relative"
     }
   }
-}, "wrapper");
+});
 const select = css.style({
   "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [layers_css.blocksLayer]: {
       appearance: "none",
       inlineSize: "100%"
     }
   }
-}, "select");
+});
 const icon = css.style({
   "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [layers_css.blocksLayer]: {
       position: "absolute",
       right: 0,
       top: 0,
@@ -30,7 +31,7 @@ const icon = css.style({
       alignItems: "center"
     }
   }
-}, "icon");
+});
 fileScope.endFileScope();
 exports.icon = icon;
 exports.select = select;

package/dist/components/form/Select/select.css.d.ts

@@ -0,0 +1,3 @@
+export declare const wrapper: string;
+export declare const select: string;
+export declare const icon: string;

package/dist/components/form/Select/{select.css.mjs → select.css.js}

@@ -1,6 +1,6 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.js";
 setFileScope("src/components/form/Select/select.css.ts", "@blockle/blocks");
 const wrapper = style({
   "@layer": {
@@ -8,7 +8,7 @@ const wrapper = style({
       position: "relative"
     }
   }
-}, "wrapper");
+});
 const select = style({
   "@layer": {
     [blocksLayer]: {
@@ -16,7 +16,7 @@ const select = style({
       inlineSize: "100%"
     }
   }
-}, "select");
+});
 const icon = style({
   "@layer": {
     [blocksLayer]: {
@@ -29,7 +29,7 @@ const icon = style({
       alignItems: "center"
     }
   }
-}, "icon");
+});
 endFileScope();
 export {
   icon,