npm - @blockle/blocks - Versions diffs - 0.18.0 → 0.18.1 - Mend

@blockle/blocks 0.18.0 → 0.18.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/dist/index.cjs CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -46,193 +46,193 @@ declare const atoms: ((props: {
         tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
     readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
         mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
     readonly alignSelf?: ("stretch" | "center" | "flex-start" | "flex-end" | {
         mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
     readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
         mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
         tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
         desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
         wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
     readonly flex?: (1 | {
         mobile?: 1 | undefined;
         tablet?: 1 | undefined;
         desktop?: 1 | undefined;
         wide?: 1 | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 1 | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 1 | null>;
     readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
         mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
         tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
         desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
         wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "row" | "row-reverse" | "column" | "column-reverse" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
     readonly flexGrow?: (0 | 1 | {
         mobile?: 0 | 1 | undefined;
         tablet?: 0 | 1 | undefined;
         desktop?: 0 | 1 | undefined;
         wide?: 0 | 1 | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
     readonly flexShrink?: (0 | 1 | {
         mobile?: 0 | 1 | undefined;
         tablet?: 0 | 1 | undefined;
         desktop?: 0 | 1 | undefined;
         wide?: 0 | 1 | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
     readonly flexWrap?: ("wrap" | "nowrap" | {
         mobile?: "wrap" | "nowrap" | undefined;
         tablet?: "wrap" | "nowrap" | undefined;
         desktop?: "wrap" | "nowrap" | undefined;
         wide?: "wrap" | "nowrap" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "wrap" | "nowrap" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "wrap" | "nowrap" | null>;
     readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
         mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
         tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
         desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
         wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
     readonly marginBlockStart?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     readonly marginBlockEnd?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     readonly marginInlineStart?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     readonly marginInlineEnd?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     readonly outline?: ("none" | {
         mobile?: "none" | undefined;
         tablet?: "none" | undefined;
         desktop?: "none" | undefined;
         wide?: "none" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
     readonly padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly paddingBlock?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly paddingBlockStart?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly paddingBlockEnd?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly paddingInline?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly paddingInlineStart?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly paddingInlineEnd?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
         mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
         tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
         desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
         wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
     readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly textAlign?: ("left" | "right" | "center" | "justify" | {
         mobile?: "left" | "right" | "center" | "justify" | undefined;
         tablet?: "left" | "right" | "center" | "justify" | undefined;
         desktop?: "left" | "right" | "center" | "justify" | undefined;
         wide?: "left" | "right" | "center" | "justify" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "left" | "right" | "center" | "justify" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
     margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     marginBlock?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     marginInline?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     placeItems?: ("center" | "flex-start" | "flex-end" | {
         mobile?: "center" | "flex-start" | "flex-end" | undefined;
         tablet?: "center" | "flex-start" | "flex-end" | undefined;
         desktop?: "center" | "flex-start" | "flex-end" | undefined;
         wide?: "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
 }) => string) & {
     properties: Set<"borderRadius" | "color" | "borderWidth" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "blockSize" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "justifyContent" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "maxBlockSize" | "maxInlineSize" | "opacity" | "overflowBlock" | "overflowInline" | "paddingBlockEnd" | "paddingBlockStart" | "paddingInlineEnd" | "paddingInlineStart" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "textTransform" | "textWrap" | "userSelect" | "whiteSpace" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "flex" | "gap" | "inset" | "insetBlock" | "insetInline" | "margin" | "marginBlock" | "marginInline" | "outline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "placeItems" | "textDecoration">;
 };
@@ -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 = {
@@ -633,8 +635,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';
@@ -810,193 +810,193 @@ declare const Box: react.ForwardRefExoticComponent<{
         tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
     readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
         mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
     readonly alignSelf?: ("stretch" | "center" | "flex-start" | "flex-end" | {
         mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
     readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
         mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
         tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
         desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
         wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
     readonly flex?: (1 | {
         mobile?: 1 | undefined;
         tablet?: 1 | undefined;
         desktop?: 1 | undefined;
         wide?: 1 | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 1 | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 1 | null>;
     readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
         mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
         tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
         desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
         wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "row" | "row-reverse" | "column" | "column-reverse" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
     readonly flexGrow?: (0 | 1 | {
         mobile?: 0 | 1 | undefined;
         tablet?: 0 | 1 | undefined;
         desktop?: 0 | 1 | undefined;
         wide?: 0 | 1 | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
     readonly flexShrink?: (0 | 1 | {
         mobile?: 0 | 1 | undefined;
         tablet?: 0 | 1 | undefined;
         desktop?: 0 | 1 | undefined;
         wide?: 0 | 1 | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, 0 | 1 | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
     readonly flexWrap?: ("wrap" | "nowrap" | {
         mobile?: "wrap" | "nowrap" | undefined;
         tablet?: "wrap" | "nowrap" | undefined;
         desktop?: "wrap" | "nowrap" | undefined;
         wide?: "wrap" | "nowrap" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "wrap" | "nowrap" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "wrap" | "nowrap" | null>;
     readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
         mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
         tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
         desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
         wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
     readonly marginBlockStart?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     readonly marginBlockEnd?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     readonly marginInlineStart?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     readonly marginInlineEnd?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     readonly outline?: ("none" | {
         mobile?: "none" | undefined;
         tablet?: "none" | undefined;
         desktop?: "none" | undefined;
         wide?: "none" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
     readonly padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly paddingBlock?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly paddingBlockStart?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly paddingBlockEnd?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly paddingInline?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly paddingInlineStart?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly paddingInlineEnd?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
         mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
         tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
         desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
         wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
     readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
     readonly textAlign?: ("left" | "right" | "center" | "justify" | {
         mobile?: "left" | "right" | "center" | "justify" | undefined;
         tablet?: "left" | "right" | "center" | "justify" | undefined;
         desktop?: "left" | "right" | "center" | "justify" | undefined;
         wide?: "left" | "right" | "center" | "justify" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "left" | "right" | "center" | "justify" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
     margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     marginBlock?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     marginInline?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
         mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
         wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
     placeItems?: ("center" | "flex-start" | "flex-end" | {
         mobile?: "center" | "flex-start" | "flex-end" | undefined;
         tablet?: "center" | "flex-start" | "flex-end" | undefined;
         desktop?: "center" | "flex-start" | "flex-end" | undefined;
         wide?: "center" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | null>;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
 } & HTMLElementProps<HTMLDivElement> & react.RefAttributes<unknown>>;
 declare const justifyContentMap: {

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,7 +22,7 @@ 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
     }
@@ -31,9 +32,9 @@ const Checkbox = react.forwardRef(function Checkbox2({ name, children, required,
   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: [
+  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, 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, {}) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Checkbox_checkbox_css_cjs.icon, iconClassName), role: "presentation", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {}) })
   ] });
   if (!children) {
     return input;

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

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useComponentStyles, classnames } from "../../display/Divider/Divider.mjs";
+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 = ({

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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