braid-design-system 32.16.0 → 32.16.2

package/dist/lib/components/Dropdown/Dropdown.playroom.cjs

@@ -0,0 +1,30 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_playroom_playroomState_cjs = require("../../playroom/playroomState.cjs");
+const lib_playroom_utils_cjs = require("../../playroom/utils.cjs");
+const lib_components_Dropdown_Dropdown_cjs = require("./Dropdown.cjs");
+const Dropdown = ({
+  id,
+  stateName,
+  value,
+  onChange,
+  ...restProps
+}) => {
+  const fallbackId = lib_playroom_utils_cjs.useFallbackId();
+  const [state, handleChange] = lib_playroom_playroomState_cjs.useFallbackState(
+    stateName,
+    value,
+    onChange,
+    ""
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Dropdown_Dropdown_cjs.Dropdown,
+    {
+      id: id ?? fallbackId,
+      value: state,
+      onChange: handleChange,
+      ...restProps
+    }
+  );
+};
+exports.Dropdown = Dropdown;

package/dist/lib/components/Dropdown/Dropdown.playroom.mjs

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useFallbackState } from "../../playroom/playroomState.mjs";
+import { useFallbackId } from "../../playroom/utils.mjs";
+import { Dropdown as Dropdown$1 } from "./Dropdown.mjs";
+const Dropdown = ({
+  id,
+  stateName,
+  value,
+  onChange,
+  ...restProps
+}) => {
+  const fallbackId = useFallbackId();
+  const [state, handleChange] = useFallbackState(
+    stateName,
+    value,
+    onChange,
+    ""
+  );
+  return /* @__PURE__ */ jsx(
+    Dropdown$1,
+    {
+      id: id ?? fallbackId,
+      value: state,
+      onChange: handleChange,
+      ...restProps
+    }
+  );
+};
+export {
+  Dropdown
+};

package/dist/lib/components/FieldLabel/FieldLabel.cjs

@@ -0,0 +1,41 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
+const lib_components_Secondary_Secondary_cjs = require("../Secondary/Secondary.cjs");
+const lib_components_Strong_Strong_cjs = require("../Strong/Strong.cjs");
+const lib_components_Text_Text_cjs = require("../Text/Text.cjs");
+const lib_components_Stack_Stack_cjs = require("../Stack/Stack.cjs");
+const FieldLabel = ({
+  id,
+  htmlFor,
+  label,
+  disabled,
+  secondaryLabel,
+  tertiaryLabel,
+  description,
+  descriptionId,
+  data
+}) => {
+  if (!label && !description) {
+    return null;
+  }
+  const labelEl = /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Text_Text_cjs.Text, { tone: disabled ? "secondary" : void 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lib_components_Strong_Strong_cjs.Strong, { children: label }),
+    secondaryLabel ? /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Secondary_Secondary_cjs.Secondary, { children: [
+      " (",
+      secondaryLabel,
+      ")"
+    ] }) : null
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Stack_Stack_cjs.Stack, { space: "xsmall", data, children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Box_Box_cjs.Box, { component: "span", display: "flex", justifyContent: "spaceBetween", children: [
+      htmlFor === false ? labelEl : /* @__PURE__ */ jsxRuntime.jsx("label", { id, htmlFor, children: labelEl }),
+      tertiaryLabel ? /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Text_Text_cjs.Text, { children: [
+        " ",
+        tertiaryLabel
+      ] }) : null
+    ] }) : null,
+    description ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { paddingTop: label ? "xxsmall" : void 0, paddingBottom: "xxsmall", children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { tone: "secondary", id: descriptionId, children: description }) }) : null
+  ] });
+};
+exports.FieldLabel = FieldLabel;

package/dist/lib/components/FieldLabel/FieldLabel.mjs

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Box } from "../Box/Box.mjs";
+import { Secondary } from "../Secondary/Secondary.mjs";
+import { Strong } from "../Strong/Strong.mjs";
+import { Text } from "../Text/Text.mjs";
+import { Stack } from "../Stack/Stack.mjs";
+const FieldLabel = ({
+  id,
+  htmlFor,
+  label,
+  disabled,
+  secondaryLabel,
+  tertiaryLabel,
+  description,
+  descriptionId,
+  data
+}) => {
+  if (!label && !description) {
+    return null;
+  }
+  const labelEl = /* @__PURE__ */ jsxs(Text, { tone: disabled ? "secondary" : void 0, children: [
+    /* @__PURE__ */ jsx(Strong, { children: label }),
+    secondaryLabel ? /* @__PURE__ */ jsxs(Secondary, { children: [
+      " (",
+      secondaryLabel,
+      ")"
+    ] }) : null
+  ] });
+  return /* @__PURE__ */ jsxs(Stack, { space: "xsmall", data, children: [
+    label ? /* @__PURE__ */ jsxs(Box, { component: "span", display: "flex", justifyContent: "spaceBetween", children: [
+      htmlFor === false ? labelEl : /* @__PURE__ */ jsx("label", { id, htmlFor, children: labelEl }),
+      tertiaryLabel ? /* @__PURE__ */ jsxs(Text, { children: [
+        " ",
+        tertiaryLabel
+      ] }) : null
+    ] }) : null,
+    description ? /* @__PURE__ */ jsx(Box, { paddingTop: label ? "xxsmall" : void 0, paddingBottom: "xxsmall", children: /* @__PURE__ */ jsx(Text, { tone: "secondary", id: descriptionId, children: description }) }) : null
+  ] });
+};
+export {
+  FieldLabel
+};

package/dist/lib/components/FieldLabel/FieldLabel.playroom.cjs

@@ -0,0 +1,21 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_playroom_utils_cjs = require("../../playroom/utils.cjs");
+const lib_components_FieldLabel_FieldLabel_cjs = require("./FieldLabel.cjs");
+const FieldLabel = ({
+  id,
+  htmlFor,
+  ...restProps
+}) => {
+  const fallbackId = lib_playroom_utils_cjs.useFallbackId();
+  const fallbackFor = lib_playroom_utils_cjs.useFallbackId();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_FieldLabel_FieldLabel_cjs.FieldLabel,
+    {
+      id: id ?? fallbackId,
+      htmlFor: htmlFor ?? fallbackFor,
+      ...restProps
+    }
+  );
+};
+exports.FieldLabel = FieldLabel;

package/dist/lib/components/FieldLabel/FieldLabel.playroom.mjs

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { useFallbackId } from "../../playroom/utils.mjs";
+import { FieldLabel as FieldLabel$1 } from "./FieldLabel.mjs";
+const FieldLabel = ({
+  id,
+  htmlFor,
+  ...restProps
+}) => {
+  const fallbackId = useFallbackId();
+  const fallbackFor = useFallbackId();
+  return /* @__PURE__ */ jsx(
+    FieldLabel$1,
+    {
+      id: id ?? fallbackId,
+      htmlFor: htmlFor ?? fallbackFor,
+      ...restProps
+    }
+  );
+};
+export {
+  FieldLabel
+};

package/dist/lib/components/FieldMessage/FieldMessage.cjs

@@ -0,0 +1,55 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
+const lib_components_Text_Text_cjs = require("../Text/Text.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const lib_components_icons_IconCritical_IconCritical_cjs = require("../icons/IconCritical/IconCritical.cjs");
+const lib_components_icons_IconPositive_IconPositive_cjs = require("../icons/IconPositive/IconPositive.cjs");
+const lib_components_icons_IconCaution_IconCaution_cjs = require("../icons/IconCaution/IconCaution.cjs");
+const tones = ["neutral", "critical", "positive", "caution"];
+const icon = {
+  critical: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconCritical_IconCritical_cjs.IconCritical, { tone: "critical" }),
+  positive: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconPositive_IconPositive_cjs.IconPositive, { tone: "positive" }),
+  caution: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconCaution_IconCaution_cjs.IconCaution, { tone: "caution" })
+};
+const FieldMessage = ({
+  id,
+  tone = "neutral",
+  message,
+  secondaryMessage,
+  reserveMessageSpace = true,
+  disabled,
+  data,
+  ...restProps
+}) => {
+  if (tones.indexOf(tone) === -1) {
+    throw new Error(`Invalid tone: ${tone}`);
+  }
+  if (!message && !secondaryMessage && !reserveMessageSpace) {
+    return null;
+  }
+  const showMessage = !disabled && message;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    lib_components_Box_Box_cjs.Box,
+    {
+      id,
+      display: "flex",
+      justifyContent: "flexEnd",
+      ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { flexGrow: 1, userSelect: showMessage ? void 0 : "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+          lib_components_Text_Text_cjs.Text,
+          {
+            size: "small",
+            tone: tone === "neutral" ? "secondary" : tone,
+            icon: showMessage && tone !== "neutral" ? icon[tone] : void 0,
+            children: showMessage ? message : " "
+          }
+        ) }),
+        secondaryMessage && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { paddingLeft: "xsmall", flexGrow: 0, children: secondaryMessage }) : null
+      ]
+    }
+  );
+};
+exports.FieldMessage = FieldMessage;
+exports.tones = tones;

package/dist/lib/components/FieldMessage/FieldMessage.mjs

@@ -0,0 +1,56 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Box } from "../Box/Box.mjs";
+import { Text } from "../Text/Text.mjs";
+import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
+import { IconCritical } from "../icons/IconCritical/IconCritical.mjs";
+import { IconPositive } from "../icons/IconPositive/IconPositive.mjs";
+import { IconCaution } from "../icons/IconCaution/IconCaution.mjs";
+const tones = ["neutral", "critical", "positive", "caution"];
+const icon = {
+  critical: /* @__PURE__ */ jsx(IconCritical, { tone: "critical" }),
+  positive: /* @__PURE__ */ jsx(IconPositive, { tone: "positive" }),
+  caution: /* @__PURE__ */ jsx(IconCaution, { tone: "caution" })
+};
+const FieldMessage = ({
+  id,
+  tone = "neutral",
+  message,
+  secondaryMessage,
+  reserveMessageSpace = true,
+  disabled,
+  data,
+  ...restProps
+}) => {
+  if (tones.indexOf(tone) === -1) {
+    throw new Error(`Invalid tone: ${tone}`);
+  }
+  if (!message && !secondaryMessage && !reserveMessageSpace) {
+    return null;
+  }
+  const showMessage = !disabled && message;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      id,
+      display: "flex",
+      justifyContent: "flexEnd",
+      ...buildDataAttributes({ data, validateRestProps: restProps }),
+      children: [
+        /* @__PURE__ */ jsx(Box, { flexGrow: 1, userSelect: showMessage ? void 0 : "none", children: /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "small",
+            tone: tone === "neutral" ? "secondary" : tone,
+            icon: showMessage && tone !== "neutral" ? icon[tone] : void 0,
+            children: showMessage ? message : " "
+          }
+        ) }),
+        secondaryMessage && !disabled ? /* @__PURE__ */ jsx(Box, { paddingLeft: "xsmall", flexGrow: 0, children: secondaryMessage }) : null
+      ]
+    }
+  );
+};
+export {
+  FieldMessage,
+  tones
+};

package/dist/lib/components/FieldMessage/FieldMessage.playroom.cjs

@@ -0,0 +1,20 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_playroom_utils_cjs = require("../../playroom/utils.cjs");
+const lib_components_FieldMessage_FieldMessage_cjs = require("./FieldMessage.cjs");
+const FieldMessage = ({
+  id,
+  tone,
+  ...restProps
+}) => {
+  const fallbackId = lib_playroom_utils_cjs.useFallbackId();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_FieldMessage_FieldMessage_cjs.FieldMessage,
+    {
+      id: id ?? fallbackId,
+      tone: tone && lib_components_FieldMessage_FieldMessage_cjs.tones.indexOf(tone) > -1 ? tone : void 0,
+      ...restProps
+    }
+  );
+};
+exports.FieldMessage = FieldMessage;

package/dist/lib/components/FieldMessage/FieldMessage.playroom.mjs

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { useFallbackId } from "../../playroom/utils.mjs";
+import { FieldMessage as FieldMessage$1, tones } from "./FieldMessage.mjs";
+const FieldMessage = ({
+  id,
+  tone,
+  ...restProps
+}) => {
+  const fallbackId = useFallbackId();
+  return /* @__PURE__ */ jsx(
+    FieldMessage$1,
+    {
+      id: id ?? fallbackId,
+      tone: tone && tones.indexOf(tone) > -1 ? tone : void 0,
+      ...restProps
+    }
+  );
+};
+export {
+  FieldMessage
+};

package/dist/lib/components/Heading/Heading.cjs

@@ -0,0 +1,30 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_components_Heading_HeadingContext_cjs = require("./HeadingContext.cjs");
+const lib_components_private_Typography_Typography_cjs = require("../private/Typography/Typography.cjs");
+const lib_css_typography_css_cjs = require("../../css/typography.css.cjs");
+const resolveDefaultComponent = {
+  "1": "h1",
+  "2": "h2",
+  "3": "h3",
+  "4": "h4"
+};
+const Heading = ({
+  level,
+  weight,
+  component,
+  ...typographyProps
+}) => /* @__PURE__ */ jsxRuntime.jsx(lib_components_Heading_HeadingContext_cjs.HeadingContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+  lib_components_private_Typography_Typography_cjs.Typography,
+  {
+    ...typographyProps,
+    component: component || resolveDefaultComponent[level],
+    className: [
+      lib_css_typography_css_cjs.fontFamily,
+      lib_css_typography_css_cjs.headingWeight[weight || "regular"],
+      lib_css_typography_css_cjs.heading[level],
+      lib_css_typography_css_cjs.tone.neutral
+    ]
+  }
+) });
+exports.Heading = Heading;

package/dist/lib/components/Heading/Heading.mjs

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { HeadingContext } from "./HeadingContext.mjs";
+import { Typography } from "../private/Typography/Typography.mjs";
+import { fontFamily, headingWeight, heading, tone } from "../../css/typography.css.mjs";
+const resolveDefaultComponent = {
+  "1": "h1",
+  "2": "h2",
+  "3": "h3",
+  "4": "h4"
+};
+const Heading = ({
+  level,
+  weight,
+  component,
+  ...typographyProps
+}) => /* @__PURE__ */ jsx(HeadingContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
+  Typography,
+  {
+    ...typographyProps,
+    component: component || resolveDefaultComponent[level],
+    className: [
+      fontFamily,
+      headingWeight[weight || "regular"],
+      heading[level],
+      tone.neutral
+    ]
+  }
+) });
+export {
+  Heading
+};

package/dist/lib/components/Heading/Heading.playroom.cjs

@@ -0,0 +1,5 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_components_Heading_Heading_cjs = require("./Heading.cjs");
+const Heading = ({ level, ...restProps }) => /* @__PURE__ */ jsxRuntime.jsx(lib_components_Heading_Heading_cjs.Heading, { level: level || "3", ...restProps });
+exports.Heading = Heading;

package/dist/lib/components/Heading/Heading.playroom.mjs

@@ -0,0 +1,6 @@
+import { jsx } from "react/jsx-runtime";
+import { Heading as Heading$1 } from "./Heading.mjs";
+const Heading = ({ level, ...restProps }) => /* @__PURE__ */ jsx(Heading$1, { level: level || "3", ...restProps });
+export {
+  Heading
+};

package/dist/lib/components/Heading/HeadingContext.cjs

@@ -0,0 +1,4 @@
+"use strict";
+const React = require("react");
+const HeadingContext = React.createContext(false);
+exports.HeadingContext = HeadingContext;

package/dist/lib/components/Heading/HeadingContext.mjs

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const HeadingContext = createContext(false);
+export {
+  HeadingContext
+};

package/dist/lib/components/Hidden/Hidden.cjs

@@ -0,0 +1,50 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
+const lib_components_Text_TextContext_cjs = require("../Text/TextContext.cjs");
+const lib_components_Heading_HeadingContext_cjs = require("../Heading/HeadingContext.cjs");
+const lib_utils_resolveResponsiveRangeProps_cjs = require("../../utils/resolveResponsiveRangeProps.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const lib_components_Hidden_Hidden_css_cjs = require("./Hidden.css.cjs");
+const lib_utils_optimizeResponsiveArray_cjs = require("../../utils/optimizeResponsiveArray.cjs");
+const Hidden = ({
+  children,
+  component,
+  above,
+  below,
+  screen,
+  print,
+  inline: inlineProp,
+  data,
+  ...restProps
+}) => {
+  if (process.env.NODE_ENV === "development" && screen) {
+    console.warn(
+      `You used the "screen" prop on Hidden, but this probably doesn't do what you expect. If you're trying to provide content to screen readers without rendering it to the screen, use the <HiddenVisually> component instead. The "screen" prop is likely to be deprecated in a future release.`
+    );
+  }
+  const inText = Boolean(React.useContext(lib_components_Text_TextContext_cjs.TextContext));
+  const inHeading = Boolean(React.useContext(lib_components_Heading_HeadingContext_cjs.HeadingContext));
+  const hiddenOnScreen = Boolean(screen);
+  const hiddenOnPrint = Boolean(print);
+  const [hiddenOnMobile, hiddenOnTablet, hiddenOnDesktop, hiddenOnWide] = lib_utils_resolveResponsiveRangeProps_cjs.resolveResponsiveRangeProps({ above, below });
+  const inline = inlineProp ?? (inText || inHeading);
+  const display = inline ? "inline" : "block";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Box_Box_cjs.Box,
+    {
+      display: hiddenOnScreen ? "none" : lib_utils_optimizeResponsiveArray_cjs.optimizeResponsiveArray([
+        hiddenOnMobile ? "none" : display,
+        hiddenOnTablet ? "none" : display,
+        hiddenOnDesktop ? "none" : display,
+        hiddenOnWide ? "none" : display
+      ]),
+      className: hiddenOnPrint ? lib_components_Hidden_Hidden_css_cjs.hiddenOnPrint : void 0,
+      component: component || (inline ? "span" : "div"),
+      ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+      children
+    }
+  );
+};
+exports.Hidden = Hidden;

package/dist/lib/components/Hidden/Hidden.mjs

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Box } from "../Box/Box.mjs";
+import { TextContext } from "../Text/TextContext.mjs";
+import { HeadingContext } from "../Heading/HeadingContext.mjs";
+import { resolveResponsiveRangeProps } from "../../utils/resolveResponsiveRangeProps.mjs";
+import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
+import { hiddenOnPrint } from "./Hidden.css.mjs";
+import { optimizeResponsiveArray } from "../../utils/optimizeResponsiveArray.mjs";
+const Hidden = ({
+  children,
+  component,
+  above,
+  below,
+  screen,
+  print,
+  inline: inlineProp,
+  data,
+  ...restProps
+}) => {
+  if (process.env.NODE_ENV === "development" && screen) {
+    console.warn(
+      `You used the "screen" prop on Hidden, but this probably doesn't do what you expect. If you're trying to provide content to screen readers without rendering it to the screen, use the <HiddenVisually> component instead. The "screen" prop is likely to be deprecated in a future release.`
+    );
+  }
+  const inText = Boolean(useContext(TextContext));
+  const inHeading = Boolean(useContext(HeadingContext));
+  const hiddenOnScreen = Boolean(screen);
+  const hiddenOnPrint$1 = Boolean(print);
+  const [hiddenOnMobile, hiddenOnTablet, hiddenOnDesktop, hiddenOnWide] = resolveResponsiveRangeProps({ above, below });
+  const inline = inlineProp ?? (inText || inHeading);
+  const display = inline ? "inline" : "block";
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      display: hiddenOnScreen ? "none" : optimizeResponsiveArray([
+        hiddenOnMobile ? "none" : display,
+        hiddenOnTablet ? "none" : display,
+        hiddenOnDesktop ? "none" : display,
+        hiddenOnWide ? "none" : display
+      ]),
+      className: hiddenOnPrint$1 ? hiddenOnPrint : void 0,
+      component: component || (inline ? "span" : "div"),
+      ...buildDataAttributes({ data, validateRestProps: restProps }),
+      children
+    }
+  );
+};
+export {
+  Hidden
+};

package/dist/lib/components/HiddenVisually/HiddenVisually.cjs

@@ -0,0 +1,31 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
+const lib_components_Text_TextContext_cjs = require("../Text/TextContext.cjs");
+const lib_components_Heading_HeadingContext_cjs = require("../Heading/HeadingContext.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const lib_components_HiddenVisually_HiddenVisually_css_cjs = require("./HiddenVisually.css.cjs");
+const HiddenVisually = ({
+  id,
+  data,
+  children,
+  ...restProps
+}) => {
+  const inText = Boolean(React.useContext(lib_components_Text_TextContext_cjs.TextContext));
+  const inHeading = Boolean(React.useContext(lib_components_Heading_HeadingContext_cjs.HeadingContext));
+  const component = inText || inHeading ? "span" : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Box_Box_cjs.Box,
+    {
+      component,
+      id,
+      position: "absolute",
+      overflow: "hidden",
+      className: lib_components_HiddenVisually_HiddenVisually_css_cjs.root,
+      ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+      children
+    }
+  );
+};
+exports.HiddenVisually = HiddenVisually;

package/dist/lib/components/HiddenVisually/HiddenVisually.mjs

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Box } from "../Box/Box.mjs";
+import { TextContext } from "../Text/TextContext.mjs";
+import { HeadingContext } from "../Heading/HeadingContext.mjs";
+import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
+import { root } from "./HiddenVisually.css.mjs";
+const HiddenVisually = ({
+  id,
+  data,
+  children,
+  ...restProps
+}) => {
+  const inText = Boolean(useContext(TextContext));
+  const inHeading = Boolean(useContext(HeadingContext));
+  const component = inText || inHeading ? "span" : "div";
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component,
+      id,
+      position: "absolute",
+      overflow: "hidden",
+      className: root,
+      ...buildDataAttributes({ data, validateRestProps: restProps }),
+      children
+    }
+  );
+};
+export {
+  HiddenVisually
+};