@blockle/blocks 0.18.4 → 0.19.1

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

@@ -1,7 +1,7 @@
 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 { createContext, useContext, Children, isValidElement, cloneElement } from "react";
 import { getAtomsAndProps } from "../../../lib/utils/atom-props.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 const BlocksProviderContext = createContext(null);
@@ -84,6 +84,20 @@ const useComponentStyleDefaultProps = (name) => {
   }
   return component.defaultVariants ?? {};
 };
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      setRef(ref, node);
+    }
+  };
+}
 function mergeProps(slotProps, childProps) {
   const overrideProps = {};
   for (const propName in childProps) {
@@ -101,33 +115,35 @@ function mergeProps(slotProps, childProps) {
         childPropValue(...args);
         slotPropValue(...args);
       };
-    } else if (propName === "style") {
-      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-    } else if (propName === "className") {
-      overrideProps[propName] = classnames(slotPropValue, childPropValue);
-    } else {
-      overrideProps[propName] = childPropValue;
-    }
+    } else
+      switch (propName) {
+        case "style": {
+          overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+          break;
+        }
+        case "className": {
+          overrideProps[propName] = classnames(slotPropValue, childPropValue);
+          break;
+        }
+        case "ref": {
+          overrideProps[propName] = composeRefs(slotPropValue, childPropValue);
+          break;
+        }
+        default: {
+          overrideProps[propName] = childPropValue;
+        }
+      }
   }
   return { ...slotProps, ...overrideProps };
 }
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      setRef(ref, node);
-    }
-  };
-}
 function createAsChildTemplate(defaultElement) {
   const Tag = defaultElement;
-  const Template2 = forwardRef(function Template22({ asChild, children, ...rootProps }, ref) {
+  const Template2 = ({
+    asChild,
+    children,
+    ref,
+    ...rootProps
+  }) => {
     if (!asChild) {
       const tagProps = { ref, ...rootProps };
       return /* @__PURE__ */ jsx(Tag, { ...tagProps, children });
@@ -146,7 +162,7 @@ function createAsChildTemplate(defaultElement) {
       }
       return null;
     }
-    if (!isValidElement(slot)) {
+    if (!isValidElementWithChildren(slot)) {
       return null;
     }
     if (!isValidElement(slot.props.children)) {
@@ -159,36 +175,33 @@ function createAsChildTemplate(defaultElement) {
       }
       return null;
     }
-    if (!isValidElement(slot.props.children)) {
+    if (!isValidElementWithChildren(slot.props.children)) {
       return null;
     }
     const nextChildren = [...childrenArray];
     if (nextChildren.length === 1 && !slot.props.children.props.children) {
-      return cloneElement(slot.props.children, {
-        ...mergeProps(rootProps, slot.props.children.props),
-        ref: composeRefs(ref, slot.props.children.ref)
-      });
+      return cloneElement(slot.props.children, mergeProps(rootProps, slot.props.children.props));
     }
     nextChildren[slotIndex] = slot.props.children.props.children;
     return cloneElement(
       slot.props.children,
-      {
-        ...mergeProps(rootProps, slot.props.children.props),
-        ref: composeRefs(ref, slot.props.children.ref)
-      },
+      mergeProps(rootProps, slot.props.children.props),
       nextChildren
     );
-  });
+  };
   return {
     Template: Template2,
     Slot: Slot$1
   };
 }
+function isValidElementWithChildren(child) {
+  return isValidElement(child) && !!child.props;
+}
 const Slot$1 = ({ children }) => {
   return children;
 };
 const { Template, Slot } = createAsChildTemplate("div");
-const Box = forwardRef(function Box2({ asChild, className, children, ...restProps }, ref) {
+const Box = ({ asChild, className, children, ref, ...restProps }) => {
   const [atomsProps, otherProps] = getAtomsAndProps(restProps);
   return /* @__PURE__ */ jsx(
     Template,
@@ -200,7 +213,7 @@ const Box = forwardRef(function Box2({ asChild, className, children, ...restProp
       children: /* @__PURE__ */ jsx(Slot, { children })
     }
   );
-});
+};
 const Divider = ({ className, color, ...restProps }) => {
   const dividerClass = useComponentStyles("divider", { base: true });
   const dividerDefaults = useComponentStyleDefaultProps("divider");

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

@@ -1,6 +1,5 @@
 "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_lib_utils_atomProps_cjs = require("../../../lib/utils/atom-props.cjs");
 const styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.cjs");
@@ -11,19 +10,20 @@ const Spinner = ({ className, size, color, ...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({
+const Button = ({
+  asChild,
   children,
   className,
-  variant,
+  disabled,
+  endSlot,
   intent,
+  loading,
+  ref,
   size,
   startSlot,
-  endSlot,
-  loading,
-  disabled,
-  asChild,
+  variant,
   ...restProps
-}, ref) {
+}) => {
   const buttonClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("button", {
     base: true,
     variants: {
@@ -51,6 +51,6 @@ const Button = react.forwardRef(function Button2({
       ]
     }
   );
-});
+};
 exports.Button = Button;
 exports.Spinner = Spinner;

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

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { useComponentStyles, Box, createAsChildTemplate } from "../../display/Divider/Divider.mjs";
 import { getAtomsAndProps } from "../../../lib/utils/atom-props.mjs";
 import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
@@ -10,19 +9,20 @@ const Spinner = ({ className, size, color, ...restProps }) => {
   return /* @__PURE__ */ jsx(Box, { color, className: classnames(spinnerClassName, className), ...restProps });
 };
 const { Template, Slot } = createAsChildTemplate("button");
-const Button = forwardRef(function Button2({
+const Button = ({
+  asChild,
   children,
   className,
-  variant,
+  disabled,
+  endSlot,
   intent,
+  loading,
+  ref,
   size,
   startSlot,
-  endSlot,
-  loading,
-  disabled,
-  asChild,
+  variant,
   ...restProps
-}, ref) {
+}) => {
   const buttonClassName = useComponentStyles("button", {
     base: true,
     variants: {
@@ -50,7 +50,7 @@ const Button = forwardRef(function Button2({
       ]
     }
   );
-});
+};
 export {
   Button,
   Spinner

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

@@ -28,7 +28,15 @@ const Label = ({
     }
   );
 };
-const Checkbox = react.forwardRef(function Checkbox2({ name, id, children, required, className, ...restProps }, ref) {
+const Checkbox = ({
+  children,
+  className,
+  id,
+  name,
+  ref,
+  required,
+  ...restProps
+}) => {
   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);
@@ -55,7 +63,7 @@ const Checkbox = react.forwardRef(function Checkbox2({ name, id, children, requi
     input,
     children && /* @__PURE__ */ jsxRuntime.jsx(Label, { required, htmlFor: inputId, children })
   ] });
-});
+};
 const DefaultIcon = () => {
   return (
     // TOOD - replace with actual icon component renderer

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

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
+import { 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";
+import { input, icon, container } from "./checkbox.css.mjs";
 const Label = ({
   asSpan,
   children,
@@ -27,7 +27,15 @@ const Label = ({
     }
   );
 };
-const Checkbox = forwardRef(function Checkbox2({ name, id, children, required, className, ...restProps }, ref) {
+const Checkbox = ({
+  children,
+  className,
+  id,
+  name,
+  ref,
+  required,
+  ...restProps
+}) => {
   const containerClassName = useComponentStyles("checkbox", { base: true }, false);
   const iconClassName = useComponentStyles("checkbox", { icon: true }, false);
   const labelClassName = useComponentStyles("checkbox", { label: true }, false);
@@ -54,7 +62,7 @@ const Checkbox = forwardRef(function Checkbox2({ name, id, children, required, c
     input$1,
     children && /* @__PURE__ */ jsx(Label, { required, htmlFor: inputId, children })
   ] });
-});
+};
 const DefaultIcon = () => {
   return (
     // TOOD - replace with actual icon component renderer

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

@@ -4,7 +4,16 @@ const react = require("react");
 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 Input = ({
+  className,
+  endSlot,
+  name,
+  placeholder,
+  ref,
+  startSlot,
+  type = "text",
+  ...restProps
+}) => {
   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 });
@@ -24,5 +33,5 @@ const Input = react.forwardRef(function Input2({ className, name, type = "text",
     ),
     endSlot
   ] }) });
-});
+};
 exports.Input = Input;

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

@@ -1,9 +1,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
+import { useId } from "react";
 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 Input = ({
+  className,
+  endSlot,
+  name,
+  placeholder,
+  ref,
+  startSlot,
+  type = "text",
+  ...restProps
+}) => {
   const id = useId();
   const containerClassName = useComponentStyles("input", { container: true }, false);
   const inputClassName = useComponentStyles("input", { input: true });
@@ -23,7 +32,7 @@ const Input = forwardRef(function Input2({ className, name, type = "text", start
     ),
     endSlot
   ] }) });
-});
+};
 export {
   Input
 };

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

@@ -1,11 +1,10 @@
 "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_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 Radio = ({ name, children, className, ref, ...restProps }) => {
   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);
@@ -20,5 +19,5 @@ const Radio = react.forwardRef(function Checkbox({ name, children, className, ..
     input,
     /* @__PURE__ */ jsxRuntime.jsx(styles_components_form_Checkbox_Checkbox_cjs.Label, { asSpan: true, children })
   ] });
-});
+};
 exports.Radio = Radio;

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

@@ -1,10 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
-import { container, input, icon } from "./radio.css.mjs";
+import { input, icon, container } 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 Radio = ({ name, children, className, ref, ...restProps }) => {
   const containerClassName = useComponentStyles("radio", { base: true }, false);
   const iconClassName = useComponentStyles("radio", { icon: true }, false);
   const labelClassName = useComponentStyles("checkbox", { label: true }, false);
@@ -19,7 +18,7 @@ const Radio = forwardRef(function Checkbox({ name, children, className, ...restP
     input$1,
     /* @__PURE__ */ jsx(Label, { asSpan: true, children })
   ] });
-});
+};
 export {
   Radio
 };

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

@@ -1,10 +1,16 @@
 "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_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 Select = ({
+  children,
+  placeholder,
+  className,
+  variant,
+  ref,
+  ...restProps
+}) => {
   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);
@@ -23,7 +29,7 @@ const Select = react.forwardRef(function Select2({ children, placeholder, classN
     ),
     /* @__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 = () => {
   return (
     // TOOD - replace with actual icon component renderer

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

@@ -1,9 +1,15 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
-import { wrapper, select, icon } from "./select.css.mjs";
+import { select, icon, wrapper } from "./select.css.mjs";
 import { useComponentStyles, Box } from "../../display/Divider/Divider.mjs";
-const Select = forwardRef(function Select2({ children, placeholder, className, variant, ...restProps }, ref) {
+const Select = ({
+  children,
+  placeholder,
+  className,
+  variant,
+  ref,
+  ...restProps
+}) => {
   const wrapperClassName = useComponentStyles("select", { wrapper: true }, false);
   const selectClassName = useComponentStyles("select", { select: true, variants: { variant } });
   const iconClassName = useComponentStyles("select", { icon: true }, false);
@@ -22,7 +28,7 @@ const Select = forwardRef(function Select2({ children, placeholder, className, v
     ),
     /* @__PURE__ */ jsx(Box, { className: classnames(icon, iconClassName), role: "presentation", "aria-hidden": true, children: /* @__PURE__ */ jsx(DefaultIcon, {}) })
   ] });
-});
+};
 const DefaultIcon = () => {
   return (
     // TOOD - replace with actual icon component renderer

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

@@ -48,7 +48,11 @@ function getProgress(event, rect) {
   const y = (clientY - top) / height;
   return [x, y];
 }
-function usePointerProgress({ container, orientation, onChange }) {
+function usePointerProgress({
+  container,
+  orientation,
+  onChange
+}) {
   react.useEffect(() => {
     const element = container.current;
     function pointerdown(event) {

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useCallback, useEffect, useRef } from "react";
 import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
-import { containerVertical, container, track, filledTrack, thumb } from "./slider.css.mjs";
+import { filledTrack, track, thumb, containerVertical, container } from "./slider.css.mjs";
 import { useComponentStyles } from "../../display/Divider/Divider.mjs";
 function useControlledValue({
   defaultValue,
@@ -47,7 +47,11 @@ function getProgress(event, rect) {
   const y = (clientY - top) / height;
   return [x, y];
 }
-function usePointerProgress({ container: container2, orientation, onChange }) {
+function usePointerProgress({
+  container: container2,
+  orientation,
+  onChange
+}) {
   useEffect(() => {
     const element = container2.current;
     function pointerdown(event) {

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

@@ -4,7 +4,14 @@ const react = require("react");
 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 Switch = ({
+  checked,
+  className,
+  defaultChecked,
+  onChange,
+  ref,
+  ...restProps
+}) => {
   const [isChecked, setIsChecked] = react.useState(defaultChecked || checked || false);
   const baseClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("switch", { base: true });
   const sliderClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("switch", { slider: true }, false);
@@ -58,5 +65,5 @@ const Switch = react.forwardRef(function Switch2({ className, checked, onChange,
       ]
     }
   ) });
-});
+};
 exports.Switch = Switch;

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

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

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

@@ -10,7 +10,6 @@ const BlocksProvider = ({
   className,
   ...restProps
 }) => {
-  const ref = react.useRef(null);
   const [ariaHidden, setAriaHidden] = react.useState(false);
   const contextValue = react.useMemo(
     () => ({
@@ -19,20 +18,11 @@ const BlocksProvider = ({
     }),
     [theme, setAriaHidden]
   );
-  react.useEffect(() => {
-    var _a, _b;
-    if (ariaHidden) {
-      (_a = ref.current) == null ? void 0 : _a.setAttribute("inert", "");
-    } else {
-      (_b = ref.current) == null ? void 0 : _b.removeAttribute("inert");
-    }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.BlocksProviderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.BlocksProviderContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ref,
       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,
+      inert: ariaHidden ? true : void 0,
       ...restProps,
       children
     }

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

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useRef, useState, useMemo, useEffect } from "react";
+import { useState, useMemo } from "react";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
 import { BlocksProviderContext } from "../../display/Divider/Divider.mjs";
@@ -9,7 +9,6 @@ const BlocksProvider = ({
   className,
   ...restProps
 }) => {
-  const ref = useRef(null);
   const [ariaHidden, setAriaHidden] = useState(false);
   const contextValue = useMemo(
     () => ({
@@ -18,20 +17,11 @@ const BlocksProvider = ({
     }),
     [theme, setAriaHidden]
   );
-  useEffect(() => {
-    var _a, _b;
-    if (ariaHidden) {
-      (_a = ref.current) == null ? void 0 : _a.setAttribute("inert", "");
-    } else {
-      (_b = ref.current) == null ? void 0 : _b.removeAttribute("inert");
-    }
-  });
-  return /* @__PURE__ */ jsx(BlocksProviderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(BlocksProviderContext, { value: contextValue, children: /* @__PURE__ */ jsx(
     "div",
     {
-      ref,
       className: classnames(theme.vars, atoms({ fontFamily: "primary" }), className),
-      "aria-hidden": ariaHidden ? true : void 0,
+      inert: ariaHidden ? true : void 0,
       ...restProps,
       children
     }

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

@@ -1,10 +1,20 @@
 "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_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_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_typography_Text_text_css_cjs.text, className), ...restProps, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Tag, { children }) });
-});
+const Text = ({
+  asChild,
+  children,
+  className,
+  ref,
+  tag,
+  ...restProps
+}) => {
+  const Component = tag ?? "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { asChild: true, className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_typography_Text_text_css_cjs.text, className), ...restProps, children: asChild ? children : (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, children })
+  ) });
+};
 exports.Text = Text;