braid-design-system 32.16.0 → 32.16.2

package/dist/lib/components/Box/Box.cjs

@@ -0,0 +1,85 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const clsx = require("clsx");
+const React = require("react");
+const dedent = require("dedent");
+const lib_css_reset_reset_css_cjs = require("../../css/reset/reset.css.cjs");
+const lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
+const lib_css_atoms_sprinkles_css_cjs = require("../../css/atoms/sprinkles.css.cjs");
+const lib_components_Box_ColoredBox_cjs = require("./ColoredBox.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const clsx__default = /* @__PURE__ */ _interopDefaultCompat(clsx);
+const dedent__default = /* @__PURE__ */ _interopDefaultCompat(dedent);
+const Box = React.forwardRef(
+  ({ component = "div", className, background, boxShadow, data, ...restProps }, ref) => {
+    const atomProps = {};
+    const nativeProps = {
+      ...data ? (
+        // Not validating rest props as Box supports native HTML element props
+        // and we do not want to warn against using the native syntax.
+        lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: false })
+      ) : void 0
+    };
+    for (const key in restProps) {
+      if (lib_css_atoms_sprinkles_css_cjs.sprinkles.properties.has(key)) {
+        atomProps[key] = restProps[key];
+      } else {
+        nativeProps[key] = restProps[key];
+      }
+    }
+    const userClasses = clsx__default.default(className);
+    if (process.env.NODE_ENV !== "production") {
+      React.useEffect(() => {
+        if (userClasses.includes(lib_css_reset_reset_css_cjs.base)) {
+          throw new Error(
+            dedent__default.default`
+              Reset class has been applied more than once. This is normally caused when asking for an explicit reset on the \`atoms\` function. This can be removed as Box automatically adds reset classes.
+
+              atoms({
+                reset: '...' // <-- Remove this
+              })
+            `
+          );
+        }
+      }, [userClasses]);
+    }
+    const atomicClasses = lib_css_atoms_atoms_cjs.atoms({
+      reset: typeof component === "string" ? component : "div",
+      ...atomProps
+    });
+    const combinedClasses = `${atomicClasses}${userClasses ? ` ${userClasses}` : ""}`;
+    return background || boxShadow ? /* @__PURE__ */ jsxRuntime.jsx(
+      lib_components_Box_ColoredBox_cjs.ColoredBox,
+      {
+        component,
+        background,
+        boxShadow,
+        className: combinedClasses,
+        ref,
+        ...nativeProps
+      }
+    ) : React.createElement(component, {
+      className: combinedClasses,
+      ...nativeProps,
+      ref
+    });
+  }
+);
+Box.displayName = "Box";
+const PublicBox = React.forwardRef(
+  (props, ref) => {
+    if (process.env.NODE_ENV !== "production") {
+      if (typeof props.background !== "undefined" && typeof props.background !== "string") {
+        throw new Error("Conditional backgrounds are not suppported");
+      }
+      if (typeof props.boxShadow !== "undefined" && typeof props.boxShadow !== "string") {
+        throw new Error("Conditional boxShadows are not suppported");
+      }
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { ...props, ref });
+  }
+);
+PublicBox.displayName = "Box";
+exports.Box = Box;
+exports.PublicBox = PublicBox;

package/dist/lib/components/Box/Box.mjs

@@ -0,0 +1,83 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef, useEffect, createElement } from "react";
+import dedent from "dedent";
+import { base } from "../../css/reset/reset.css.mjs";
+import { atoms } from "../../css/atoms/atoms.mjs";
+import { sprinkles } from "../../css/atoms/sprinkles.css.mjs";
+import { ColoredBox } from "./ColoredBox.mjs";
+import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
+const Box = forwardRef(
+  ({ component = "div", className, background, boxShadow, data, ...restProps }, ref) => {
+    const atomProps = {};
+    const nativeProps = {
+      ...data ? (
+        // Not validating rest props as Box supports native HTML element props
+        // and we do not want to warn against using the native syntax.
+        buildDataAttributes({ data, validateRestProps: false })
+      ) : void 0
+    };
+    for (const key in restProps) {
+      if (sprinkles.properties.has(key)) {
+        atomProps[key] = restProps[key];
+      } else {
+        nativeProps[key] = restProps[key];
+      }
+    }
+    const userClasses = clsx(className);
+    if (process.env.NODE_ENV !== "production") {
+      useEffect(() => {
+        if (userClasses.includes(base)) {
+          throw new Error(
+            dedent`
+              Reset class has been applied more than once. This is normally caused when asking for an explicit reset on the \`atoms\` function. This can be removed as Box automatically adds reset classes.
+
+              atoms({
+                reset: '...' // <-- Remove this
+              })
+            `
+          );
+        }
+      }, [userClasses]);
+    }
+    const atomicClasses = atoms({
+      reset: typeof component === "string" ? component : "div",
+      ...atomProps
+    });
+    const combinedClasses = `${atomicClasses}${userClasses ? ` ${userClasses}` : ""}`;
+    return background || boxShadow ? /* @__PURE__ */ jsx(
+      ColoredBox,
+      {
+        component,
+        background,
+        boxShadow,
+        className: combinedClasses,
+        ref,
+        ...nativeProps
+      }
+    ) : createElement(component, {
+      className: combinedClasses,
+      ...nativeProps,
+      ref
+    });
+  }
+);
+Box.displayName = "Box";
+const PublicBox = forwardRef(
+  (props, ref) => {
+    if (process.env.NODE_ENV !== "production") {
+      if (typeof props.background !== "undefined" && typeof props.background !== "string") {
+        throw new Error("Conditional backgrounds are not suppported");
+      }
+      if (typeof props.boxShadow !== "undefined" && typeof props.boxShadow !== "string") {
+        throw new Error("Conditional boxShadows are not suppported");
+      }
+    }
+    return /* @__PURE__ */ jsx(Box, { ...props, ref });
+  }
+);
+PublicBox.displayName = "Box";
+export {
+  Box,
+  PublicBox
+};

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

@@ -0,0 +1,30 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
+const lib_css_atoms_sprinkles_css_cjs = require("../../css/atoms/sprinkles.css.cjs");
+const lib_components_Box_Box_cjs = require("./Box.cjs");
+const Box = React.forwardRef((props, ref) => {
+  const sprinklesProps = {};
+  const otherProps = {};
+  for (const key in props) {
+    if (lib_css_atoms_sprinkles_css_cjs.sprinkles.properties.has(key)) {
+      const value = props[key];
+      try {
+        lib_css_atoms_atoms_cjs.atoms({ [key]: value });
+        sprinklesProps[key] = value;
+      } catch (e) {
+        if (key === "background") {
+          if (typeof value === "string" && /^customDark|customLight$/.test(value) || typeof value === "object" && (value.darkMode || value.lightMode)) {
+            sprinklesProps[key] = value;
+          }
+        }
+      }
+    } else {
+      otherProps[key] = props[key];
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { ref, ...sprinklesProps, ...otherProps });
+});
+Box.displayName = "Box";
+exports.Box = Box;

package/dist/lib/components/Box/BoxRenderer.cjs

@@ -0,0 +1,41 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const clsx = require("clsx");
+const lib_components_Box_BackgroundContext_cjs = require("./BackgroundContext.cjs");
+const lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
+const lib_components_Box_ColoredBox_cjs = require("./ColoredBox.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const clsx__default = /* @__PURE__ */ _interopDefaultCompat(clsx);
+const ColoredBoxRenderer = ({
+  background,
+  boxShadow,
+  children,
+  className
+}) => {
+  const { backgroundContext, classList } = lib_components_Box_ColoredBox_cjs.useColoredBoxClasses({
+    background,
+    boxShadow
+  });
+  const element = children(clsx__default.default(className, classList));
+  return backgroundContext ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_BackgroundContext_cjs.BackgroundProvider, { value: backgroundContext, children: element }) : element;
+};
+const BoxRenderer = ({
+  children,
+  component = "div",
+  className,
+  background,
+  boxShadow,
+  ...props
+}) => {
+  const classes = clsx__default.default(className, lib_css_atoms_atoms_cjs.atoms({ reset: component, ...props }));
+  return background || boxShadow ? /* @__PURE__ */ jsxRuntime.jsx(
+    ColoredBoxRenderer,
+    {
+      background,
+      boxShadow,
+      className: classes,
+      children
+    }
+  ) : children(classes);
+};
+exports.BoxRenderer = BoxRenderer;

package/dist/lib/components/Box/BoxRenderer.mjs

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { BackgroundProvider } from "./BackgroundContext.mjs";
+import { atoms } from "../../css/atoms/atoms.mjs";
+import { useColoredBoxClasses } from "./ColoredBox.mjs";
+const ColoredBoxRenderer = ({
+  background,
+  boxShadow,
+  children,
+  className
+}) => {
+  const { backgroundContext, classList } = useColoredBoxClasses({
+    background,
+    boxShadow
+  });
+  const element = children(clsx(className, classList));
+  return backgroundContext ? /* @__PURE__ */ jsx(BackgroundProvider, { value: backgroundContext, children: element }) : element;
+};
+const BoxRenderer = ({
+  children,
+  component = "div",
+  className,
+  background,
+  boxShadow,
+  ...props
+}) => {
+  const classes = clsx(className, atoms({ reset: component, ...props }));
+  return background || boxShadow ? /* @__PURE__ */ jsx(
+    ColoredBoxRenderer,
+    {
+      background,
+      boxShadow,
+      className: classes,
+      children
+    }
+  ) : children(classes);
+};
+export {
+  BoxRenderer
+};

package/dist/lib/components/Box/ColoredBox.cjs

@@ -0,0 +1,117 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
+const lib_components_BraidProvider_BraidThemeContext_cjs = require("../BraidProvider/BraidThemeContext.cjs");
+const lib_components_Box_BackgroundContext_cjs = require("./BackgroundContext.cjs");
+const lib_css_typography_css_cjs = require("../../css/typography.css.cjs");
+const adaptiveBackgrounds = {
+  body: "bodyDark",
+  surface: "surfaceDark",
+  brand: "neutral",
+  promoteLight: "neutral",
+  infoLight: "neutral",
+  positiveLight: "neutral",
+  cautionLight: "neutral",
+  criticalLight: "neutral",
+  neutralLight: "neutral",
+  formAccentSoft: "neutral",
+  formAccentSoftActive: "neutralActive",
+  formAccentSoftHover: "neutralHover"
+};
+const adaptiveBoxShadow = {
+  borderBrandAccent: "borderBrandAccentLight",
+  borderBrandAccentLarge: "borderBrandAccentLightLarge",
+  borderCaution: "borderCautionLight",
+  borderCritical: "borderCriticalLight",
+  borderCriticalLarge: "borderCriticalLightLarge",
+  borderFormAccent: "borderFormAccentLight",
+  borderFormAccentLarge: "borderFormAccentLightLarge",
+  borderInfo: "borderInfoLight",
+  borderNeutral: "borderNeutralInverted",
+  borderNeutralLarge: "borderNeutralInvertedLarge",
+  borderNeutralLight: "borderNeutral",
+  borderPositive: "borderPositiveLight",
+  borderPromote: "borderPromoteLight"
+};
+const normaliseBackground = (background) => ({
+  lightMode: typeof background === "object" ? background.lightMode : background,
+  darkMode: typeof background === "object" ? background.darkMode : adaptiveBackgrounds[background] || background
+});
+const normalisedBoxShadow = (boxShadow) => ({
+  lightMode: typeof boxShadow === "object" ? boxShadow.lightMode : boxShadow,
+  darkMode: typeof boxShadow === "object" ? boxShadow.darkMode : boxShadow
+});
+const useColoredBoxClasses = ({
+  background,
+  boxShadow
+}) => {
+  const parentLightness = lib_components_Box_BackgroundContext_cjs.useBackgroundLightness();
+  const currentBackgroundContext = lib_components_Box_BackgroundContext_cjs.useBackground();
+  const { backgroundLightness } = lib_components_BraidProvider_BraidThemeContext_cjs.useBraidTheme();
+  const lightnessMap = {
+    ...backgroundLightness,
+    customDark: "dark",
+    customLight: "light"
+  };
+  const classList = [];
+  if (boxShadow) {
+    const normalisedBoxShadows = normalisedBoxShadow(boxShadow);
+    const isSemantic = typeof boxShadow === "string";
+    classList.push(
+      lib_css_atoms_atoms_cjs.atoms({
+        boxShadow: {
+          lightMode: isSemantic && parentLightness.lightMode === "dark" ? adaptiveBoxShadow[normalisedBoxShadows.lightMode] || normalisedBoxShadows.lightMode : normalisedBoxShadows.lightMode,
+          darkMode: isSemantic && parentLightness.darkMode === "dark" ? adaptiveBoxShadow[normalisedBoxShadows.darkMode] || normalisedBoxShadows.darkMode : normalisedBoxShadows.darkMode
+        }
+      })
+    );
+  }
+  if (background) {
+    const { lightMode, darkMode } = normaliseBackground(background);
+    classList.push(lib_css_typography_css_cjs.lightModeTone[lightnessMap[lightMode]]);
+    classList.push(lib_css_typography_css_cjs.darkModeTone[lightnessMap[darkMode]]);
+    const lightModeTone = lightMode === "neutral" ? darkMode : lightMode;
+    const darkModeTone = darkMode === "neutral" ? lightMode : darkMode;
+    if (lightModeTone && lib_css_typography_css_cjs.lightModeNeutralOverride[lightModeTone]) {
+      classList.push(lib_css_typography_css_cjs.lightModeNeutralOverride[lightModeTone]);
+    }
+    if (darkModeTone && lib_css_typography_css_cjs.darkModeNeutralOverride[darkModeTone]) {
+      classList.push(lib_css_typography_css_cjs.darkModeNeutralOverride[darkModeTone]);
+    }
+    classList.push(
+      lib_css_atoms_atoms_cjs.atoms({
+        background: {
+          lightMode: lightMode === "customDark" || lightMode === "customLight" ? void 0 : lightMode,
+          darkMode: darkMode === "customDark" || darkMode === "customLight" ? void 0 : darkMode
+        }
+      })
+    );
+    return {
+      backgroundContext: {
+        lightMode: lightMode || currentBackgroundContext.lightMode,
+        darkMode: darkMode || currentBackgroundContext.darkMode
+      },
+      classList: classList.join(" ")
+    };
+  }
+  return {
+    classList: classList.join(" ")
+  };
+};
+const ColoredBox = React.forwardRef(
+  ({ component, background, boxShadow, className, ...props }, ref) => {
+    const { backgroundContext, classList: colorClasses } = useColoredBoxClasses(
+      { background, boxShadow }
+    );
+    const element = React.createElement(component, {
+      className: `${className}${colorClasses ? ` ${colorClasses}` : ""}`,
+      ...props,
+      ref
+    });
+    return backgroundContext ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_BackgroundContext_cjs.BackgroundProvider, { value: backgroundContext, children: element }) : element;
+  }
+);
+ColoredBox.displayName = "ColoredBox";
+exports.ColoredBox = ColoredBox;
+exports.useColoredBoxClasses = useColoredBoxClasses;

package/dist/lib/components/Box/ColoredBox.mjs

@@ -0,0 +1,118 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, createElement } from "react";
+import { atoms } from "../../css/atoms/atoms.mjs";
+import { useBraidTheme } from "../BraidProvider/BraidThemeContext.mjs";
+import { BackgroundProvider, useBackgroundLightness, useBackground } from "./BackgroundContext.mjs";
+import { lightModeTone, darkModeTone, lightModeNeutralOverride, darkModeNeutralOverride } from "../../css/typography.css.mjs";
+const adaptiveBackgrounds = {
+  body: "bodyDark",
+  surface: "surfaceDark",
+  brand: "neutral",
+  promoteLight: "neutral",
+  infoLight: "neutral",
+  positiveLight: "neutral",
+  cautionLight: "neutral",
+  criticalLight: "neutral",
+  neutralLight: "neutral",
+  formAccentSoft: "neutral",
+  formAccentSoftActive: "neutralActive",
+  formAccentSoftHover: "neutralHover"
+};
+const adaptiveBoxShadow = {
+  borderBrandAccent: "borderBrandAccentLight",
+  borderBrandAccentLarge: "borderBrandAccentLightLarge",
+  borderCaution: "borderCautionLight",
+  borderCritical: "borderCriticalLight",
+  borderCriticalLarge: "borderCriticalLightLarge",
+  borderFormAccent: "borderFormAccentLight",
+  borderFormAccentLarge: "borderFormAccentLightLarge",
+  borderInfo: "borderInfoLight",
+  borderNeutral: "borderNeutralInverted",
+  borderNeutralLarge: "borderNeutralInvertedLarge",
+  borderNeutralLight: "borderNeutral",
+  borderPositive: "borderPositiveLight",
+  borderPromote: "borderPromoteLight"
+};
+const normaliseBackground = (background) => ({
+  lightMode: typeof background === "object" ? background.lightMode : background,
+  darkMode: typeof background === "object" ? background.darkMode : adaptiveBackgrounds[background] || background
+});
+const normalisedBoxShadow = (boxShadow) => ({
+  lightMode: typeof boxShadow === "object" ? boxShadow.lightMode : boxShadow,
+  darkMode: typeof boxShadow === "object" ? boxShadow.darkMode : boxShadow
+});
+const useColoredBoxClasses = ({
+  background,
+  boxShadow
+}) => {
+  const parentLightness = useBackgroundLightness();
+  const currentBackgroundContext = useBackground();
+  const { backgroundLightness } = useBraidTheme();
+  const lightnessMap = {
+    ...backgroundLightness,
+    customDark: "dark",
+    customLight: "light"
+  };
+  const classList = [];
+  if (boxShadow) {
+    const normalisedBoxShadows = normalisedBoxShadow(boxShadow);
+    const isSemantic = typeof boxShadow === "string";
+    classList.push(
+      atoms({
+        boxShadow: {
+          lightMode: isSemantic && parentLightness.lightMode === "dark" ? adaptiveBoxShadow[normalisedBoxShadows.lightMode] || normalisedBoxShadows.lightMode : normalisedBoxShadows.lightMode,
+          darkMode: isSemantic && parentLightness.darkMode === "dark" ? adaptiveBoxShadow[normalisedBoxShadows.darkMode] || normalisedBoxShadows.darkMode : normalisedBoxShadows.darkMode
+        }
+      })
+    );
+  }
+  if (background) {
+    const { lightMode, darkMode } = normaliseBackground(background);
+    classList.push(lightModeTone[lightnessMap[lightMode]]);
+    classList.push(darkModeTone[lightnessMap[darkMode]]);
+    const lightModeTone$1 = lightMode === "neutral" ? darkMode : lightMode;
+    const darkModeTone$1 = darkMode === "neutral" ? lightMode : darkMode;
+    if (lightModeTone$1 && lightModeNeutralOverride[lightModeTone$1]) {
+      classList.push(lightModeNeutralOverride[lightModeTone$1]);
+    }
+    if (darkModeTone$1 && darkModeNeutralOverride[darkModeTone$1]) {
+      classList.push(darkModeNeutralOverride[darkModeTone$1]);
+    }
+    classList.push(
+      atoms({
+        background: {
+          lightMode: lightMode === "customDark" || lightMode === "customLight" ? void 0 : lightMode,
+          darkMode: darkMode === "customDark" || darkMode === "customLight" ? void 0 : darkMode
+        }
+      })
+    );
+    return {
+      backgroundContext: {
+        lightMode: lightMode || currentBackgroundContext.lightMode,
+        darkMode: darkMode || currentBackgroundContext.darkMode
+      },
+      classList: classList.join(" ")
+    };
+  }
+  return {
+    classList: classList.join(" ")
+  };
+};
+const ColoredBox = forwardRef(
+  ({ component, background, boxShadow, className, ...props }, ref) => {
+    const { backgroundContext, classList: colorClasses } = useColoredBoxClasses(
+      { background, boxShadow }
+    );
+    const element = createElement(component, {
+      className: `${className}${colorClasses ? ` ${colorClasses}` : ""}`,
+      ...props,
+      ref
+    });
+    return backgroundContext ? /* @__PURE__ */ jsx(BackgroundProvider, { value: backgroundContext, children: element }) : element;
+  }
+);
+ColoredBox.displayName = "ColoredBox";
+export {
+  ColoredBox,
+  useColoredBoxClasses
+};

package/dist/lib/components/BraidPortal/BraidPortal.cjs

@@ -0,0 +1,14 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const reactDom = require("react-dom");
+const lib_components_Text_TextContext_cjs = require("../Text/TextContext.cjs");
+const lib_components_BraidProvider_BraidThemeContext_cjs = require("../BraidProvider/BraidThemeContext.cjs");
+const lib_components_BraidProvider_VanillaThemeContainer_cjs = require("../BraidProvider/VanillaThemeContainer.cjs");
+const BraidPortal = ({ children, container }) => {
+  const { vanillaTheme } = lib_components_BraidProvider_BraidThemeContext_cjs.useBraidTheme();
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_TextContext_cjs.TextContext.Provider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_BraidProvider_VanillaThemeContainer_cjs.VanillaThemeContainer, { theme: vanillaTheme, setDefaultTextTones: true, children }) }),
+    container ?? document.body
+  );
+};
+exports.BraidPortal = BraidPortal;

package/dist/lib/components/BraidPortal/BraidPortal.mjs

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { TextContext } from "../Text/TextContext.mjs";
+import { useBraidTheme } from "../BraidProvider/BraidThemeContext.mjs";
+import { VanillaThemeContainer } from "../BraidProvider/VanillaThemeContainer.mjs";
+const BraidPortal = ({ children, container }) => {
+  const { vanillaTheme } = useBraidTheme();
+  return createPortal(
+    /* @__PURE__ */ jsx(TextContext.Provider, { value: null, children: /* @__PURE__ */ jsx(VanillaThemeContainer, { theme: vanillaTheme, setDefaultTextTones: true, children }) }),
+    container ?? document.body
+  );
+};
+export {
+  BraidPortal
+};

package/dist/lib/components/BraidProvider/BraidProvider.cjs

@@ -0,0 +1,76 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const assert = require("assert");
+const dedent = require("dedent");
+const React = require("react");
+const lib_css_reset_resetTracker_cjs = require("../../css/reset/resetTracker.cjs");
+const lib_components_private_hideFocusRings_useHideFocusRings_cjs = require("../private/hideFocusRings/useHideFocusRings.cjs");
+const lib_components_BraidTestProvider_BraidTestProviderContext_cjs = require("../BraidTestProvider/BraidTestProviderContext.cjs");
+const lib_components_BraidProvider_BreakpointContext_cjs = require("./BreakpointContext.cjs");
+const lib_components_BraidProvider_BraidThemeContext_cjs = require("./BraidThemeContext.cjs");
+const lib_css_atoms_sprinkles_css_cjs = require("../../css/atoms/sprinkles.css.cjs");
+const lib_components_BraidProvider_VanillaThemeContainer_cjs = require("./VanillaThemeContainer.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
+const dedent__default = /* @__PURE__ */ _interopDefaultCompat(dedent);
+if (process.env.NODE_ENV === "development") {
+  lib_css_reset_resetTracker_cjs.ensureResetImported();
+}
+const makeLinkComponent = (render) => ({ __forwardRef__: React.forwardRef(render) });
+const DefaultLinkComponent = makeLinkComponent((props, ref) => /* @__PURE__ */ jsxRuntime.jsx("a", { ref, ...props }));
+const LinkComponentContext = React.createContext(DefaultLinkComponent);
+const useLinkComponent = (ref) => {
+  const linkComponent = React.useContext(LinkComponentContext);
+  assert__default.default(
+    !ref || "__forwardRef__" in linkComponent,
+    dedent__default.default`
+      You're passing a ref to a Braid link, but your app is providing a custom link component to 'BraidProvider' that doesn't appear to support refs.
+
+      To fix this, you need to use Braid's 'makeLinkComponent' helper function when creating your custom link component. This ensures that refs are forwarded correctly, and allows us to silence this error message.
+
+      For more information and an example implementation, check out the documentation for 'BraidProvider': https://seek-oss.github.io/braid-design-system/components/BraidProvider
+    `
+  );
+  if ("__forwardRef__" in linkComponent) {
+    return linkComponent.__forwardRef__;
+  }
+  return linkComponent;
+};
+const BraidProvider = ({
+  theme,
+  styleBody = true,
+  linkComponent,
+  children
+}) => {
+  const alreadyInBraidProvider = Boolean(React.useContext(lib_components_BraidProvider_BraidThemeContext_cjs.BraidThemeContext));
+  const inTestProvider = React.useContext(lib_components_BraidTestProvider_BraidTestProviderContext_cjs.BraidTestProviderContext);
+  const linkComponentFromContext = React.useContext(LinkComponentContext);
+  lib_components_private_hideFocusRings_useHideFocusRings_cjs.useHideFocusRings(!(alreadyInBraidProvider || inTestProvider));
+  assert__default.default(
+    inTestProvider || typeof navigator === "undefined" || navigator.userAgent === void 0 || navigator.userAgent.indexOf("jsdom") === -1,
+    `Rendering 'BraidProvider' in Jest is not supported as it expects a browser environment. Please switch to 'BraidTestProvider'. See the docs for more info: https://seek-oss.github.io/braid-design-system/components/BraidTestProvider`
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(lib_components_BraidProvider_BraidThemeContext_cjs.BraidThemeContext.Provider, { value: theme, children: [
+    styleBody ? /* @__PURE__ */ jsxRuntime.jsx("style", { type: "text/css", children: `
+            html,body{margin:0;padding:0;background:${theme.background.lightMode}}
+            html.${lib_css_atoms_sprinkles_css_cjs.darkMode},html.${lib_css_atoms_sprinkles_css_cjs.darkMode} body{color-scheme:dark;background:${theme.background.darkMode}}
+          ` }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      lib_components_BraidProvider_VanillaThemeContainer_cjs.VanillaThemeContainer,
+      {
+        theme: theme.vanillaTheme,
+        setDefaultTextTones: !alreadyInBraidProvider,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          LinkComponentContext.Provider,
+          {
+            value: linkComponent || linkComponentFromContext,
+            children: alreadyInBraidProvider || inTestProvider ? children : /* @__PURE__ */ jsxRuntime.jsx(lib_components_BraidProvider_BreakpointContext_cjs.BreakpointProvider, { children })
+          }
+        )
+      }
+    )
+  ] });
+};
+exports.BraidProvider = BraidProvider;
+exports.makeLinkComponent = makeLinkComponent;
+exports.useLinkComponent = useLinkComponent;