@blockle/blocks 0.18.0 → 0.18.2

package/dist/index.cjs

@@ -6,8 +6,8 @@ const styles_lib_theme_makeComponentTheme_cjs = require("./styles/lib/theme/make
 const styles_lib_theme_makeTheme_cjs = require("./styles/lib/theme/makeTheme.cjs");
 const styles_lib_theme_vars_css_cjs = require("./styles/lib/theme/vars.css.cjs");
 const styles_components_display_Divider_Divider_cjs = require("./styles/components/display/Divider/Divider.cjs");
-const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
 const styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("./styles/components/Accessibility/VisuallyHidden/VisuallyHidden.cjs");
+const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const styles_components_form_Button_Button_cjs = require("./styles/components/form/Button/Button.cjs");
@@ -40,7 +40,7 @@ const Progress = react.forwardRef(function Progress2({ className, indeterminate,
     styles_components_display_Divider_Divider_cjs.Box,
     {
       ref,
-      className: styles_components_display_Divider_Divider_cjs.classnames(containerClassName, className),
+      className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(containerClassName, className),
       overflow: "hidden",
       role: "progressbar",
       "aria-valuenow": value,
@@ -132,7 +132,7 @@ const Link = react.forwardRef(function Link2({ asChild, className, children, var
     {
       asChild,
       ref,
-      className: styles_components_display_Divider_Divider_cjs.classnames(className, linkClassName),
+      className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(className, linkClassName),
       ...restProps,
       children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
     }
@@ -309,7 +309,7 @@ const Popover = ({
       "data-open": dataOpen,
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
-      className: styles_components_display_Divider_Divider_cjs.classnames(containerClassName, className),
+      className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(containerClassName, className),
       position: "absolute",
       style: {
         ...style,
@@ -399,12 +399,12 @@ exports.makeTheme = styles_lib_theme_makeTheme_cjs.makeTheme;
 exports.vars = styles_lib_theme_vars_css_cjs.vars;
 exports.Box = styles_components_display_Divider_Divider_cjs.Box;
 exports.Divider = styles_components_display_Divider_Divider_cjs.Divider;
-exports.classnames = styles_components_display_Divider_Divider_cjs.classnames;
 exports.createAsChildTemplate = styles_components_display_Divider_Divider_cjs.createAsChildTemplate;
 exports.useComponentStyleDefaultProps = styles_components_display_Divider_Divider_cjs.useComponentStyleDefaultProps;
 exports.useComponentStyles = styles_components_display_Divider_Divider_cjs.useComponentStyles;
-exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
 exports.VisuallyHidden = styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.VisuallyHidden;
+exports.classnames = styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames;
+exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
 exports.Button = styles_components_form_Button_Button_cjs.Button;
 exports.Spinner = styles_components_form_Button_Button_cjs.Spinner;
 exports.Checkbox = styles_components_form_Checkbox_Checkbox_cjs.Checkbox;

package/dist/index.mjs

@@ -5,10 +5,11 @@ import { style } from "./styles/lib/css/style/style.mjs";
 import { makeComponentTheme } from "./styles/lib/theme/makeComponentTheme.mjs";
 import { makeTheme } from "./styles/lib/theme/makeTheme.mjs";
 import { vars } from "./styles/lib/theme/vars.css.mjs";
-import { useComponentStyles, Box, classnames, createAsChildTemplate, useTheme, composeRefs, BlocksProviderContext } from "./styles/components/display/Divider/Divider.mjs";
+import { useComponentStyles, Box, createAsChildTemplate, useTheme, composeRefs, BlocksProviderContext } from "./styles/components/display/Divider/Divider.mjs";
 import { Divider, useComponentStyleDefaultProps } from "./styles/components/display/Divider/Divider.mjs";
-import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
+import { classnames } from "./styles/components/Accessibility/VisuallyHidden/VisuallyHidden.mjs";
 import { VisuallyHidden } from "./styles/components/Accessibility/VisuallyHidden/VisuallyHidden.mjs";
+import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef, useRef, useEffect, useState, useCallback, useLayoutEffect, useId, Children, isValidElement, cloneElement, useContext } from "react";
 import { Button, Spinner } from "./styles/components/form/Button/Button.mjs";

package/dist/momotaro.chunk.d.ts

@@ -600,9 +600,11 @@ declare const vars: {
     };
 };
 
+type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Atoms | 'ref'>;
+
 type VisuallyHiddenProps = {
     children: React.ReactNode;
-};
+} & HTMLElementProps<HTMLSpanElement>;
 declare const VisuallyHidden: React.FC<VisuallyHiddenProps>;
 
 type DividerProps = {
@@ -613,7 +615,9 @@ type DividerProps = {
 declare const Divider: React.FC<DividerProps>;
 
 type ProgressProps = {
+    'aria-label'?: string;
     'aria-labelledby'?: string;
+    'aria-valuetext'?: string;
     className?: string;
     indeterminate?: boolean;
     max?: number;
@@ -633,8 +637,6 @@ type SpinnerProps = {
 } & MarginAtoms;
 declare const Spinner: React.FC<SpinnerProps>;
 
-type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Atoms | 'ref'>;
-
 type ButtonProps = {
     children: React.ReactNode;
     type?: 'button' | 'submit' | 'reset';

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

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

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

@@ -1,8 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { visuallyHidden } from "./visually-hidden.css.mjs";
-const VisuallyHidden = ({ children }) => {
-  return /* @__PURE__ */ jsx("span", { className: visuallyHidden, children });
+const classnames = (...args) => {
+  const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
+  return className || void 0;
+};
+const VisuallyHidden = ({
+  children,
+  className,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsx("span", { className: classnames(visuallyHidden, className), ...restProps, children });
 };
 export {
-  VisuallyHidden
+  VisuallyHidden,
+  classnames
 };

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

@@ -1,5 +1,6 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
+const styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.cjs");
 const styles_components_display_Divider_divider_css_cjs = require("./divider.css.cjs");
 const react = require("react");
 const styles_lib_utils_atomProps_cjs = require("../../../lib/utils/atom-props.cjs");
@@ -84,10 +85,6 @@ const useComponentStyleDefaultProps = (name) => {
   }
   return component.defaultVariants ?? {};
 };
-const classnames = (...args) => {
-  const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
-  return className || void 0;
-};
 function mergeProps(slotProps, childProps) {
   const overrideProps = {};
   for (const propName in childProps) {
@@ -108,7 +105,7 @@ function mergeProps(slotProps, childProps) {
     } else if (propName === "style") {
       overrideProps[propName] = { ...slotPropValue, ...childPropValue };
     } else if (propName === "className") {
-      overrideProps[propName] = classnames(slotPropValue, childPropValue);
+      overrideProps[propName] = styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(slotPropValue, childPropValue);
     } else {
       overrideProps[propName] = childPropValue;
     }
@@ -199,7 +196,7 @@ const Box = react.forwardRef(function Box2({ asChild, className, children, ...re
     {
       ref,
       asChild,
-      className: classnames(className, styles_lib_css_atoms_sprinkles_css_cjs.atoms(atomsProps)),
+      className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(className, styles_lib_css_atoms_sprinkles_css_cjs.atoms(atomsProps)),
       ...otherProps,
       children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
     }
@@ -214,7 +211,7 @@ const Divider = ({ className, color, ...restProps }) => {
       role: "separator",
       inlineSize: "full",
       backgroundColor: color ?? dividerDefaults.color,
-      className: classnames(className, dividerClass, styles_components_display_Divider_divider_css_cjs.divider),
+      className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(className, dividerClass, styles_components_display_Divider_divider_css_cjs.divider),
       ...restProps
     }
   );
@@ -222,7 +219,6 @@ const Divider = ({ className, color, ...restProps }) => {
 exports.BlocksProviderContext = BlocksProviderContext;
 exports.Box = Box;
 exports.Divider = Divider;
-exports.classnames = classnames;
 exports.composeRefs = composeRefs;
 exports.createAsChildTemplate = createAsChildTemplate;
 exports.useComponentStyleDefaultProps = useComponentStyleDefaultProps;

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

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
 import { divider } from "./divider.css.mjs";
 import { createContext, useContext, forwardRef, Children, isValidElement, cloneElement } from "react";
 import { getAtomsAndProps } from "../../../lib/utils/atom-props.mjs";
@@ -83,10 +84,6 @@ const useComponentStyleDefaultProps = (name) => {
   }
   return component.defaultVariants ?? {};
 };
-const classnames = (...args) => {
-  const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
-  return className || void 0;
-};
 function mergeProps(slotProps, childProps) {
   const overrideProps = {};
   for (const propName in childProps) {
@@ -222,7 +219,6 @@ export {
   BlocksProviderContext,
   Box,
   Divider,
-  classnames,
   composeRefs,
   createAsChildTemplate,
   useComponentStyleDefaultProps,

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

@@ -3,11 +3,12 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
 const styles_lib_utils_atomProps_cjs = require("../../../lib/utils/atom-props.cjs");
+const styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.cjs");
 const styles_components_form_Button_Button_css_cjs = require("./Button.css.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 const Spinner = ({ className, size, color, ...restProps }) => {
   const spinnerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("spinner", { base: true, variants: { size, color } });
-  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { color, className: styles_components_display_Divider_Divider_cjs.classnames(spinnerClassName, className), ...restProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { color, className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(spinnerClassName, className), ...restProps });
 };
 const { Template, Slot } = styles_components_display_Divider_Divider_cjs.createAsChildTemplate("button");
 const Button = react.forwardRef(function Button2({
@@ -40,7 +41,7 @@ const Button = react.forwardRef(function Button2({
       ref,
       asChild,
       disabled: disabled || loading,
-      className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Button_Button_css_cjs.buttonReset, buttonClassName, styles_lib_css_atoms_sprinkles_css_cjs.atoms(atomsProps), className),
+      className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Button_Button_css_cjs.buttonReset, buttonClassName, styles_lib_css_atoms_sprinkles_css_cjs.atoms(atomsProps), className),
       ...otherProps,
       children: [
         startSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: startSlot }),

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

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useComponentStyles, Box, classnames, createAsChildTemplate } from "../../display/Divider/Divider.mjs";
+import { useComponentStyles, Box, createAsChildTemplate } from "../../display/Divider/Divider.mjs";
 import { getAtomsAndProps } from "../../../lib/utils/atom-props.mjs";
+import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
 import { buttonReset } from "./Button.css.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 const Spinner = ({ className, size, color, ...restProps }) => {

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

@@ -1,6 +1,7 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.cjs");
 const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 const styles_components_form_Checkbox_checkbox_css_cjs = require("./checkbox.css.cjs");
@@ -21,26 +22,38 @@ const Label = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
-      className: styles_components_display_Divider_Divider_cjs.classnames(containerClassName, className, styles_lib_css_atoms_sprinkles_css_cjs.atoms({ cursor })),
+      className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(containerClassName, className, styles_lib_css_atoms_sprinkles_css_cjs.atoms({ cursor })),
       ...restProps,
       children
     }
   );
 };
-const Checkbox = react.forwardRef(function Checkbox2({ name, children, required, className, ...restProps }, ref) {
+const Checkbox = react.forwardRef(function Checkbox2({ name, id, children, required, className, ...restProps }, ref) {
   const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("checkbox", { base: true }, false);
   const iconClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("checkbox", { icon: true }, false);
   const labelClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("checkbox", { label: true }, false);
-  const input = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Checkbox_checkbox_css_cjs.container, containerClassName, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ref, type: "checkbox", name, className: styles_components_form_Checkbox_checkbox_css_cjs.input, ...restProps }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Checkbox_checkbox_css_cjs.icon, iconClassName), role: "presentation", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {}) })
+  const reactId = react.useId();
+  const inputId = id || reactId;
+  const input = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Checkbox_checkbox_css_cjs.container, containerClassName, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref,
+        type: "checkbox",
+        name,
+        id: inputId,
+        className: styles_components_form_Checkbox_checkbox_css_cjs.input,
+        ...restProps
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Checkbox_checkbox_css_cjs.icon, iconClassName), "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {}) })
   ] });
   if (!children) {
     return input;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: labelClassName, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: labelClassName, children: [
     input,
-    children && /* @__PURE__ */ jsxRuntime.jsx(Label, { asSpan: true, required, children })
+    children && /* @__PURE__ */ jsxRuntime.jsx(Label, { required, htmlFor: inputId, children })
   ] });
 });
 const DefaultIcon = () => {

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

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useComponentStyles, classnames } from "../../display/Divider/Divider.mjs";
+import { forwardRef, useId } from "react";
+import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
+import { useComponentStyles } from "../../display/Divider/Divider.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 import { container, input, icon } from "./checkbox.css.mjs";
 const Label = ({
@@ -26,20 +27,32 @@ const Label = ({
     }
   );
 };
-const Checkbox = forwardRef(function Checkbox2({ name, children, required, className, ...restProps }, ref) {
+const Checkbox = forwardRef(function Checkbox2({ name, id, children, required, className, ...restProps }, ref) {
   const containerClassName = useComponentStyles("checkbox", { base: true }, false);
   const iconClassName = useComponentStyles("checkbox", { icon: true }, false);
   const labelClassName = useComponentStyles("checkbox", { label: true }, false);
+  const reactId = useId();
+  const inputId = id || reactId;
   const input$1 = /* @__PURE__ */ jsxs("div", { className: classnames(container, containerClassName, className), children: [
-    /* @__PURE__ */ jsx("input", { ref, type: "checkbox", name, className: input, ...restProps }),
-    /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName), role: "presentation", "aria-hidden": true, children: /* @__PURE__ */ jsx(DefaultIcon, {}) })
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "checkbox",
+        name,
+        id: inputId,
+        className: input,
+        ...restProps
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName), "aria-hidden": true, children: /* @__PURE__ */ jsx(DefaultIcon, {}) })
   ] });
   if (!children) {
     return input$1;
   }
-  return /* @__PURE__ */ jsxs("label", { className: labelClassName, children: [
+  return /* @__PURE__ */ jsxs("span", { className: labelClassName, children: [
     input$1,
-    children && /* @__PURE__ */ jsx(Label, { asSpan: true, required, children })
+    children && /* @__PURE__ */ jsx(Label, { required, htmlFor: inputId, children })
   ] });
 });
 const DefaultIcon = () => {

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

@@ -1,13 +1,14 @@
 "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_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.cjs");
 const styles_components_form_Input_input_css_cjs = require("./input.css.cjs");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
 const Input = react.forwardRef(function Input2({ className, name, type = "text", startSlot, endSlot, placeholder, ...restProps }, ref) {
   const id = react.useId();
   const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("input", { container: true }, false);
   const inputClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("input", { input: true });
-  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(styles_components_display_Divider_Divider_cjs.Box, { display: "flex", alignItems: "center", className: styles_components_display_Divider_Divider_cjs.classnames(containerClassName, className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(styles_components_display_Divider_Divider_cjs.Box, { display: "flex", alignItems: "center", className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(containerClassName, className), children: [
     startSlot,
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -17,7 +18,7 @@ const Input = react.forwardRef(function Input2({ className, name, type = "text",
         name,
         type,
         placeholder,
-        className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Input_input_css_cjs.input, inputClassName),
+        className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Input_input_css_cjs.input, inputClassName),
         ...restProps
       }
     ),

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

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useId } from "react";
-import { useComponentStyles, Box, classnames } from "../../display/Divider/Divider.mjs";
+import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
 import { input } from "./input.css.mjs";
+import { useComponentStyles, Box } from "../../display/Divider/Divider.mjs";
 const Input = forwardRef(function Input2({ className, name, type = "text", startSlot, endSlot, placeholder, ...restProps }, ref) {
   const id = useId();
   const containerClassName = useComponentStyles("input", { container: true }, false);

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

@@ -1,16 +1,17 @@
 "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_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.cjs");
 const styles_components_form_Radio_radio_css_cjs = require("./radio.css.cjs");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
 const styles_components_form_Checkbox_Checkbox_cjs = require("../Checkbox/Checkbox.cjs");
 const Radio = react.forwardRef(function Checkbox({ name, children, className, ...restProps }, ref) {
   const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("radio", { base: true }, false);
   const iconClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("radio", { icon: true }, false);
   const labelClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("checkbox", { label: true }, false);
-  const input = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Radio_radio_css_cjs.container, containerClassName, className), children: [
+  const input = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Radio_radio_css_cjs.container, containerClassName, className), children: [
     /* @__PURE__ */ jsxRuntime.jsx("input", { ref, type: "radio", name, className: styles_components_form_Radio_radio_css_cjs.input, ...restProps }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Radio_radio_css_cjs.icon, iconClassName) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Radio_radio_css_cjs.icon, iconClassName) })
   ] });
   if (!children) {
     return input;

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

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useComponentStyles, classnames } from "../../display/Divider/Divider.mjs";
+import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
 import { container, input, icon } from "./radio.css.mjs";
+import { useComponentStyles } from "../../display/Divider/Divider.mjs";
 import { Label } from "../Checkbox/Checkbox.mjs";
 const Radio = forwardRef(function Checkbox({ name, children, className, ...restProps }, ref) {
   const containerClassName = useComponentStyles("radio", { base: true }, false);

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

@@ -1,18 +1,19 @@
 "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_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.cjs");
 const styles_components_form_Select_select_css_cjs = require("./select.css.cjs");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
 const Select = react.forwardRef(function Select2({ children, placeholder, className, variant, ...restProps }, ref) {
   const wrapperClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("select", { wrapper: true }, false);
   const selectClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("select", { select: true, variants: { variant } });
   const iconClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("select", { icon: true }, false);
-  return /* @__PURE__ */ jsxRuntime.jsxs(styles_components_display_Divider_Divider_cjs.Box, { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Select_select_css_cjs.wrapper, wrapperClassName), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(styles_components_display_Divider_Divider_cjs.Box, { className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Select_select_css_cjs.wrapper, wrapperClassName), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "select",
       {
         ref,
-        className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Select_select_css_cjs.select, selectClassName, className),
+        className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Select_select_css_cjs.select, selectClassName, className),
         ...restProps,
         children: [
           placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: placeholder }),
@@ -20,7 +21,7 @@ const Select = react.forwardRef(function Select2({ children, placeholder, classN
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Select_select_css_cjs.icon, iconClassName), role: "presentation", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {}) })
+    /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Select_select_css_cjs.icon, iconClassName), role: "presentation", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {}) })
   ] });
 });
 const DefaultIcon = () => {

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

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useComponentStyles, Box, classnames } from "../../display/Divider/Divider.mjs";
+import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
 import { wrapper, select, icon } from "./select.css.mjs";
+import { useComponentStyles, Box } from "../../display/Divider/Divider.mjs";
 const Select = forwardRef(function Select2({ children, placeholder, className, variant, ...restProps }, ref) {
   const wrapperClassName = useComponentStyles("select", { wrapper: true }, false);
   const selectClassName = useComponentStyles("select", { select: true, variants: { variant } });

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

@@ -1,8 +1,9 @@
 "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_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.cjs");
 const styles_components_form_Slider_slider_css_cjs = require("./slider.css.cjs");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
 function useControlledValue({
   defaultValue,
   value,
@@ -160,16 +161,16 @@ const Slider = ({
     "div",
     {
       ref: containerRef,
-      className: styles_components_display_Divider_Divider_cjs.classnames(
+      className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_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(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_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),
+            className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Slider_slider_css_cjs.filledTrack, filledTrackClass),
             style: {
               inlineSize: `${currentValue / max * 100}%`
             }
@@ -179,7 +180,7 @@ const Slider = ({
           "button",
           {
             type: "button",
-            className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Slider_slider_css_cjs.thumb, thumbClass),
+            className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Slider_slider_css_cjs.thumb, thumbClass),
             role: "slider",
             "aria-valuemin": min,
             "aria-valuemax": max,

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

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useCallback, useEffect, useRef } from "react";
-import { useComponentStyles, classnames } from "../../display/Divider/Divider.mjs";
+import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
 import { containerVertical, container, track, filledTrack, thumb } from "./slider.css.mjs";
+import { useComponentStyles } from "../../display/Divider/Divider.mjs";
 function useControlledValue({
   defaultValue,
   value,

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

@@ -1,8 +1,9 @@
 "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_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.cjs");
 const styles_components_form_Switch_switch_css_cjs = require("./switch.css.cjs");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
 const Switch = react.forwardRef(function Switch2({ className, checked, onChange, defaultChecked, ...restProps }, ref) {
   const [isChecked, setIsChecked] = react.useState(defaultChecked || checked || false);
   const baseClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("switch", { base: true });
@@ -33,7 +34,7 @@ const Switch = react.forwardRef(function Switch2({ className, checked, onChange,
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: styles_components_display_Divider_Divider_cjs.classnames(className, styles_components_form_Switch_switch_css_cjs.container, baseClassName),
+      className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(className, styles_components_form_Switch_switch_css_cjs.container, baseClassName),
       "data-checked": isChecked,
       onClick: (event) => {
         if (event.target.tagName === "INPUT") {

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

@@ -1,7 +1,8 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, useEffect, useCallback } from "react";
-import { useComponentStyles, classnames } from "../../display/Divider/Divider.mjs";
+import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
 import { container, input } from "./switch.css.mjs";
+import { useComponentStyles } from "../../display/Divider/Divider.mjs";
 const Switch = forwardRef(function Switch2({ className, checked, onChange, defaultChecked, ...restProps }, ref) {
   const [isChecked, setIsChecked] = useState(defaultChecked || checked || false);
   const baseClassName = useComponentStyles("switch", { base: true });

package/dist/styles/components/other/BlocksProvider/BlocksProvider.cjs

@@ -2,6 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+const styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.cjs");
 const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
 const BlocksProvider = ({
   children,
@@ -30,7 +31,7 @@ const BlocksProvider = ({
     "div",
     {
       ref,
-      className: styles_components_display_Divider_Divider_cjs.classnames(theme.vars, styles_lib_css_atoms_sprinkles_css_cjs.atoms({ fontFamily: "primary" }), className),
+      className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(theme.vars, styles_lib_css_atoms_sprinkles_css_cjs.atoms({ fontFamily: "primary" }), className),
       "aria-hidden": ariaHidden ? true : void 0,
       ...restProps,
       children

package/dist/styles/components/other/BlocksProvider/BlocksProvider.mjs

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useState, useMemo, useEffect } from "react";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
-import { BlocksProviderContext, classnames } from "../../display/Divider/Divider.mjs";
+import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
+import { BlocksProviderContext } from "../../display/Divider/Divider.mjs";
 const BlocksProvider = ({
   children,
   theme,

package/dist/styles/components/overlay/Dialog/Dialog.cjs

@@ -1,8 +1,9 @@
 "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_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.cjs");
 const styles_components_overlay_Dialog_dialog_css_cjs = require("./dialog.css.cjs");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
 const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
   react.useEffect(() => {
     if (!enabled) {
@@ -155,7 +156,7 @@ const Dialog = ({
       ref: dialogRef,
       "aria-modal": "true",
       open: dataOpen,
-      className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_overlay_Dialog_dialog_css_cjs.dialog, dialogClassName, className),
+      className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_overlay_Dialog_dialog_css_cjs.dialog, dialogClassName, className),
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
       ...restProps,

package/dist/styles/components/overlay/Dialog/Dialog.mjs

@@ -1,7 +1,8 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, createContext, useContext, useState, useCallback } from "react";
-import { useComponentStyles, classnames } from "../../display/Divider/Divider.mjs";
+import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
 import { dialog } from "./dialog.css.mjs";
+import { useComponentStyles } from "../../display/Divider/Divider.mjs";
 const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
   useEffect(() => {
     if (!enabled) {

package/dist/styles/components/typography/Heading/Heading.cjs

@@ -1,7 +1,8 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
-const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
+const styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.cjs");
 const styles_components_typography_Heading_heading_css_cjs = require("./heading.css.cjs");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
 const Heading = ({
   className,
   level = 1,
@@ -9,6 +10,6 @@ const Heading = ({
   ...restProps
 }) => {
   const Tag = `h${level}`;
-  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { asChild: true, className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_typography_Heading_heading_css_cjs.heading, className), ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { asChild: true, className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_typography_Heading_heading_css_cjs.heading, className), ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children }) });
 };
 exports.Heading = Heading;

package/dist/styles/components/typography/Heading/Heading.mjs

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { Box, classnames } from "../../display/Divider/Divider.mjs";
+import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
 import { heading } from "./heading.css.mjs";
+import { Box } from "../../display/Divider/Divider.mjs";
 const Heading = ({
   className,
   level = 1,

package/dist/styles/components/typography/Text/Text.cjs

@@ -1,9 +1,10 @@
 "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_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.cjs");
 const styles_components_typography_Text_text_css_cjs = require("./text.css.cjs");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
 const Text = react.forwardRef(function Text2({ tag: Tag = "span", asChild, children, className, ...restProps }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { ref, asChild: true, className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_typography_Text_text_css_cjs.text, className), ...restProps, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Tag, { children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { ref, asChild: true, className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_typography_Text_text_css_cjs.text, className), ...restProps, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Tag, { children }) });
 });
 exports.Text = Text;

package/dist/styles/components/typography/Text/Text.mjs

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Box, classnames } from "../../display/Divider/Divider.mjs";
+import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
 import { text } from "./text.css.mjs";
+import { Box } from "../../display/Divider/Divider.mjs";
 const Text = forwardRef(function Text2({ tag: Tag = "span", asChild, children, className, ...restProps }, ref) {
   return /* @__PURE__ */ jsx(Box, { ref, asChild: true, className: classnames(text, className), ...restProps, children: asChild ? children : /* @__PURE__ */ jsx(Tag, { children }) });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",