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

package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.cjs

@@ -1,7 +1,8 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const components_accessibility_VisuallyHidden_visuallyHidden_css_cjs = require("./visually-hidden.css.cjs");
+const classnames = require("../../../lib/utils/classnames.cjs");
+const visuallyHidden_css = require("./visually-hidden.css.cjs");
 const VisuallyHidden = ({
   children,
   className,
@@ -10,7 +11,7 @@ const VisuallyHidden = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: lib_utils_classnames_cjs.classnames(components_accessibility_VisuallyHidden_visuallyHidden_css_cjs.visuallyHidden, className),
+      className: classnames.classnames(visuallyHidden_css.visuallyHidden, className),
       ...restProps,
       children
     }

package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.d.ts

@@ -0,0 +1,5 @@
+import { HTMLElementProps } from '../../../lib/utils/utils';
+export type VisuallyHiddenProps = {
+    children: React.ReactNode;
+} & HTMLElementProps<HTMLSpanElement>;
+export declare const VisuallyHidden: React.FC<VisuallyHiddenProps>;

package/dist/components/accessibility/VisuallyHidden/{VisuallyHidden.mjs → VisuallyHidden.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { visuallyHidden } from "./visually-hidden.css.mjs";
+import { classnames } from "../../../lib/utils/classnames.js";
+import { visuallyHidden } from "./visually-hidden.css.js";
 const VisuallyHidden = ({
   children,
   className,

package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.spec.d.ts

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

package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { VisuallyHidden, VisuallyHiddenProps } from './VisuallyHidden';
+declare const meta: Meta<typeof VisuallyHidden>;
+export default meta;
+type Story = StoryObj<VisuallyHiddenProps>;
+export declare const Default: Story;

package/dist/components/accessibility/VisuallyHidden/index.d.ts

@@ -0,0 +1 @@
+export { VisuallyHidden, type VisuallyHiddenProps } from './VisuallyHidden';

package/dist/components/accessibility/VisuallyHidden/visually-hidden.css.cjs

@@ -1,4 +1,5 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 fileScope.setFileScope("src/components/accessibility/VisuallyHidden/visually-hidden.css.ts", "@blockle/blocks");
@@ -10,6 +11,6 @@ const visuallyHidden = css.style({
   position: "absolute",
   whiteSpace: "nowrap",
   width: "1px"
-}, "visuallyHidden");
+});
 fileScope.endFileScope();
 exports.visuallyHidden = visuallyHidden;

package/dist/components/accessibility/VisuallyHidden/visually-hidden.css.d.ts

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

package/dist/components/accessibility/VisuallyHidden/{visually-hidden.css.mjs → visually-hidden.css.js}

@@ -9,7 +9,7 @@ const visuallyHidden = style({
   position: "absolute",
   whiteSpace: "nowrap",
   width: "1px"
-}, "visuallyHidden");
+});
 endFileScope();
 export {
   visuallyHidden

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

@@ -1,23 +1,24 @@
 "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_display_Divider_divider_css_cjs = require("./divider.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 divider_css = require("./divider.css.cjs");
+const Box = require("../../layout/Box/Box.cjs");
 const Divider = ({
   className,
   color,
   ...restProps
 }) => {
-  const dividerClass = lib_theme_store_theme_cjs.getComponentStyles("divider", { base: true });
-  const dividerDefaults = lib_theme_store_theme_cjs.getComponentStyleDefaults("divider");
+  const dividerClass = theme.getComponentStyles("divider", { base: true });
+  const dividerDefaults = theme.getComponentStyleDefaults("divider");
   return /* @__PURE__ */ jsxRuntime.jsx(
-    components_layout_Box_Box_cjs.Box,
+    Box.Box,
     {
       role: "separator",
       inlineSize: "full",
       backgroundColor: color ?? dividerDefaults.color,
-      className: lib_utils_classnames_cjs.classnames(className, dividerClass, components_display_Divider_divider_css_cjs.divider),
+      className: classnames.classnames(className, dividerClass, divider_css.divider),
       ...restProps
     }
   );

package/dist/components/display/Divider/Divider.d.ts

@@ -0,0 +1,7 @@
+import { Atoms } from '../../../lib/css/atoms';
+export type DividerProps = {
+    className?: string;
+    color?: Atoms['backgroundColor'];
+    style?: React.CSSProperties;
+};
+export declare const Divider: React.FC<DividerProps>;

package/dist/components/display/Divider/{Divider.mjs → Divider.js}

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { getComponentStyles, getComponentStyleDefaults } from "../../../lib/theme/store/theme.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { divider } from "./divider.css.mjs";
-import { Box } from "../../layout/Box/Box.mjs";
+import { getComponentStyles, getComponentStyleDefaults } from "../../../lib/theme/store/theme.js";
+import { classnames } from "../../../lib/utils/classnames.js";
+import { divider } from "./divider.css.js";
+import { Box } from "../../layout/Box/Box.js";
 const Divider = ({
   className,
   color,

package/dist/components/display/Divider/Divider.spec.d.ts

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

package/dist/components/display/Divider/Divider.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Divider, DividerProps } from './Divider';
+declare const meta: Meta<typeof Divider>;
+export default meta;
+type Story = StoryObj<DividerProps>;
+export declare const Default: Story;

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

@@ -1,15 +1,16 @@
 "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/display/Divider/divider.css.ts", "@blockle/blocks");
 const divider = css.style({
   "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [layers_css.blocksLayer]: {
       clear: "both",
       blockSize: "1px"
     }
   }
-}, "divider");
+});
 fileScope.endFileScope();
 exports.divider = divider;

package/dist/components/display/Divider/divider.css.d.ts

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

package/dist/components/display/Divider/{divider.css.mjs → divider.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/display/Divider/divider.css.ts", "@blockle/blocks");
 const divider = style({
   "@layer": {
@@ -9,7 +9,7 @@ const divider = style({
       blockSize: "1px"
     }
   }
-}, "divider");
+});
 endFileScope();
 export {
   divider

package/dist/components/display/Divider/index.d.ts

@@ -0,0 +1 @@
+export { Divider, type DividerProps } from './Divider';

package/dist/components/feedback/Progress/Progress.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 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 Box = require("../../layout/Box/Box.cjs");
 const Progress = ({
   className,
   indeterminate,
@@ -12,23 +13,23 @@ const Progress = ({
   ...restProps
 }) => {
   const progress = value / max * 100;
-  const containerClassName = lib_theme_store_theme_cjs.getComponentStyles(
+  const containerClassName = theme.getComponentStyles(
     "progress",
     {
       base: true
     },
     false
   );
-  const barClassName = lib_theme_store_theme_cjs.getComponentStyles(
+  const barClassName = theme.getComponentStyles(
     "progress",
     { bar: true, variants: { indeterminate } },
     false
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
-    components_layout_Box_Box_cjs.Box,
+    Box.Box,
     {
       ref,
-      className: lib_utils_classnames_cjs.classnames(containerClassName, className),
+      className: classnames.classnames(containerClassName, className),
       overflow: "hidden",
       role: "progressbar",
       "aria-valuenow": value,
@@ -36,7 +37,7 @@ const Progress = ({
       "aria-valuemax": max,
       ...restProps,
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        components_layout_Box_Box_cjs.Box,
+        Box.Box,
         {
           className: barClassName,
           backgroundColor: "currentColor",

package/dist/components/feedback/Progress/Progress.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export type ProgressProps = {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-valuetext'?: string;
+    className?: string;
+    indeterminate?: boolean;
+    max?: number;
+    style?: React.CSSProperties;
+    /**
+     * The value of the progress bar, between 0 and max=100.
+     */
+    value?: number;
+    ref?: React.Ref<HTMLDivElement>;
+};
+export declare const Progress: React.FC<ProgressProps>;

package/dist/components/feedback/Progress/{Progress.mjs → Progress.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 { Box } from "../../layout/Box/Box.mjs";
+import { getComponentStyles } from "../../../lib/theme/store/theme.js";
+import { classnames } from "../../../lib/utils/classnames.js";
+import { Box } from "../../layout/Box/Box.js";
 const Progress = ({
   className,
   indeterminate,

package/dist/components/feedback/Progress/Progress.stories.d.ts

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

package/dist/components/feedback/Progress/index.d.ts

@@ -0,0 +1 @@
+export { Progress, type ProgressProps } from './Progress';

package/dist/components/feedback/Spinner/Spinner.cjs

@@ -1,23 +1,24 @@
 "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_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 Box = require("../../layout/Box/Box.cjs");
 const Spinner = ({
   className,
   size,
   color,
   ...restProps
 }) => {
-  const spinnerClassName = lib_theme_store_theme_cjs.getComponentStyles("spinner", {
+  const spinnerClassName = theme.getComponentStyles("spinner", {
     base: true,
     variants: { size, color }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    components_layout_Box_Box_cjs.Box,
+    Box.Box,
     {
       color,
-      className: lib_utils_classnames_cjs.classnames(spinnerClassName, className),
+      className: classnames.classnames(spinnerClassName, className),
       ...restProps
     }
   );

package/dist/components/feedback/Spinner/Spinner.d.ts

@@ -0,0 +1,9 @@
+import { MarginAtoms } from '../../../lib/css/atoms';
+import { SpinnerTheme } from '../../../lib/theme/componentThemes';
+export type SpinnerProps = {
+    className?: string;
+    color?: SpinnerTheme['variants']['color'];
+    size?: SpinnerTheme['variants']['size'];
+    style?: React.CSSProperties;
+} & MarginAtoms;
+export declare const Spinner: React.FC<SpinnerProps>;

package/dist/components/feedback/Spinner/{Spinner.mjs → Spinner.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 { Box } from "../../layout/Box/Box.mjs";
+import { getComponentStyles } from "../../../lib/theme/store/theme.js";
+import { classnames } from "../../../lib/utils/classnames.js";
+import { Box } from "../../layout/Box/Box.js";
 const Spinner = ({
   className,
   size,

package/dist/components/feedback/Spinner/Spinner.stories.d.ts

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

package/dist/components/feedback/Spinner/index.d.ts

@@ -0,0 +1 @@
+export { Spinner, type SpinnerProps } from './Spinner';

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

@@ -1,13 +1,14 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const lib_asChildRenderer_createAsChildTemplate_cjs = require("../../../lib/asChildRenderer/createAsChildTemplate.cjs");
-const lib_theme_store_theme_cjs = require("../../../lib/theme/store/theme.cjs");
-const lib_utils_atomProps_cjs = require("../../../lib/utils/atom-props.cjs");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const components_form_Button_Button_css_cjs = require("./Button.css.cjs");
-const components_feedback_Spinner_Spinner_cjs = require("../../feedback/Spinner/Spinner.cjs");
-const lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
-const { Template, Slot } = lib_asChildRenderer_createAsChildTemplate_cjs.createAsChildTemplate("button");
+const createAsChildTemplate = require("../../../lib/asChildRenderer/createAsChildTemplate.cjs");
+const theme = require("../../../lib/theme/store/theme.cjs");
+const atomProps = require("../../../lib/utils/atom-props.cjs");
+const classnames = require("../../../lib/utils/classnames.cjs");
+const Button_css = require("./Button.css.cjs");
+const Spinner = require("../../feedback/Spinner/Spinner.cjs");
+const sprinkles_css = require("../../../lib/css/atoms/sprinkles.css.cjs");
+const { Template, Slot } = createAsChildTemplate.createAsChildTemplate("button");
 const Button = ({
   asChild,
   children,
@@ -22,7 +23,7 @@ const Button = ({
   variant,
   ...restProps
 }) => {
-  const buttonClassName = lib_theme_store_theme_cjs.getComponentStyles("button", {
+  const buttonClassName = theme.getComponentStyles("button", {
     base: true,
     variants: {
       variant,
@@ -32,23 +33,23 @@ const Button = ({
       loading
     }
   });
-  const [atomsProps, otherProps] = lib_utils_atomProps_cjs.getAtomsAndProps(restProps);
+  const [atomsProps, otherProps] = atomProps.getAtomsAndProps(restProps);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Template,
     {
       ref,
       asChild,
       disabled: disabled || loading,
-      className: lib_utils_classnames_cjs.classnames(
-        components_form_Button_Button_css_cjs.buttonReset,
+      className: classnames.classnames(
+        Button_css.buttonReset,
         buttonClassName,
-        lib_css_atoms_sprinkles_css_cjs.atoms(atomsProps),
+        sprinkles_css.atoms(atomsProps),
         className
       ),
       ...otherProps,
       children: [
         startSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: startSlot }),
-        loading && /* @__PURE__ */ jsxRuntime.jsx(components_feedback_Spinner_Spinner_cjs.Spinner, { size }),
+        loading && /* @__PURE__ */ jsxRuntime.jsx(Spinner.Spinner, { size }),
         /* @__PURE__ */ jsxRuntime.jsx(Slot, { children }),
         endSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: endSlot })
       ]

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

@@ -1,15 +1,16 @@
 "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/Button/Button.css.ts", "@blockle/blocks");
 const buttonReset = css.style({
   "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [layers_css.blocksLayer]: {
       all: "unset",
       cursor: "pointer"
     }
   }
-}, "buttonReset");
+});
 fileScope.endFileScope();
 exports.buttonReset = buttonReset;

package/dist/components/form/Button/Button.css.d.ts

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

package/dist/components/form/Button/{Button.css.mjs → Button.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/Button/Button.css.ts", "@blockle/blocks");
 const buttonReset = style({
   "@layer": {
@@ -9,7 +9,7 @@ const buttonReset = style({
       cursor: "pointer"
     }
   }
-}, "buttonReset");
+});
 endFileScope();
 export {
   buttonReset

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

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { Atoms, MarginAtoms } from '../../../lib/css/atoms';
+import { ButtonTheme } from '../../../lib/theme/componentThemes';
+import { HTMLElementProps } from '../../../lib/utils/utils';
+export type ButtonProps = {
+    alignSelf?: Atoms['alignSelf'];
+    asChild?: boolean;
+    children: React.ReactNode;
+    disabled?: boolean;
+    endSlot?: React.ReactNode;
+    inlineSize?: Atoms['inlineSize'];
+    intent?: ButtonTheme['variants']['intent'];
+    loading?: boolean;
+    popovertarget?: string;
+    ref?: React.Ref<HTMLButtonElement>;
+    size?: ButtonTheme['variants']['size'];
+    startSlot?: React.ReactNode;
+    type?: 'button' | 'submit' | 'reset';
+    variant?: ButtonTheme['variants']['variant'];
+} & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
+export declare const Button: React.FC<ButtonProps>;

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

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { createAsChildTemplate } from "../../../lib/asChildRenderer/createAsChildTemplate.mjs";
-import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
-import { getAtomsAndProps } from "../../../lib/utils/atom-props.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { buttonReset } from "./Button.css.mjs";
-import { Spinner } from "../../feedback/Spinner/Spinner.mjs";
-import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+import { createAsChildTemplate } from "../../../lib/asChildRenderer/createAsChildTemplate.js";
+import { getComponentStyles } from "../../../lib/theme/store/theme.js";
+import { getAtomsAndProps } from "../../../lib/utils/atom-props.js";
+import { classnames } from "../../../lib/utils/classnames.js";
+import { buttonReset } from "./Button.css.js";
+import { Spinner } from "../../feedback/Spinner/Spinner.js";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.js";
 const { Template, Slot } = createAsChildTemplate("button");
 const Button = ({
   asChild,

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

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

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ButtonProps } from './Button';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryObj<ButtonProps>;
+export declare const LinkButton: StoryObj<ButtonProps>;
+export declare const Play: StoryObj<ButtonProps>;

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

@@ -0,0 +1 @@
+export { Button, type ButtonProps } from './Button';

package/dist/components/form/Checkbox/Checkbox.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_Label_Label_cjs = require("../Label/Label.cjs");
-const components_form_Checkbox_checkbox_css_cjs = require("./checkbox.css.cjs");
+const theme = require("../../../lib/theme/store/theme.cjs");
+const classnames = require("../../../lib/utils/classnames.cjs");
+const Label = require("../Label/Label.cjs");
+const checkbox_css = require("./checkbox.css.cjs");
 const Checkbox = ({
   children,
   className,
@@ -14,19 +15,19 @@ const Checkbox = ({
   required,
   ...restProps
 }) => {
-  const containerClassName = lib_theme_store_theme_cjs.getComponentStyles(
+  const containerClassName = theme.getComponentStyles(
     "checkbox",
     { base: true },
     false
   );
-  const iconClassName = lib_theme_store_theme_cjs.getComponentStyles("checkbox", { icon: true }, false);
-  const labelClassName = lib_theme_store_theme_cjs.getComponentStyles("checkbox", { label: true }, false);
+  const iconClassName = theme.getComponentStyles("checkbox", { icon: true }, false);
+  const labelClassName = theme.getComponentStyles("checkbox", { label: true }, false);
   const reactId = react.useId();
   const inputId = id || reactId;
   const input = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: lib_utils_classnames_cjs.classnames(components_form_Checkbox_checkbox_css_cjs.container, containerClassName, className),
+      className: classnames.classnames(checkbox_css.container, containerClassName, className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
@@ -35,11 +36,11 @@ const Checkbox = ({
             type: "checkbox",
             name,
             id: inputId,
-            className: components_form_Checkbox_checkbox_css_cjs.input,
+            className: checkbox_css.input,
             ...restProps
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: lib_utils_classnames_cjs.classnames(components_form_Checkbox_checkbox_css_cjs.icon, iconClassName), "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {}) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classnames.classnames(checkbox_css.icon, iconClassName), "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {}) })
       ]
     }
   );
@@ -48,7 +49,7 @@ const Checkbox = ({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: labelClassName, children: [
     input,
-    children && /* @__PURE__ */ jsxRuntime.jsx(components_form_Label_Label_cjs.Label, { required, htmlFor: inputId, children })
+    children && /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { required, htmlFor: inputId, children })
   ] });
 };
 const DefaultIcon = () => {

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { HTMLElementProps } from '../../../lib/utils/utils';
+export type CheckboxProps = {
+    children?: React.ReactNode;
+    name: string;
+    ref?: React.Ref<HTMLInputElement>;
+    required?: boolean;
+} & HTMLElementProps<HTMLInputElement>;
+export declare const Checkbox: React.FC<CheckboxProps>;

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

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useId } from "react";
-import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { Label } from "../Label/Label.mjs";
-import { input, icon, container } from "./checkbox.css.mjs";
+import { getComponentStyles } from "../../../lib/theme/store/theme.js";
+import { classnames } from "../../../lib/utils/classnames.js";
+import { Label } from "../Label/Label.js";
+import { input, icon, container } from "./checkbox.css.js";
 const Checkbox = ({
   children,
   className,

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

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

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

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