braid-design-system 32.16.0 → 32.16.2

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

@@ -1,36 +0,0 @@
-"use strict";
-const React = require("react");
-const sideEffects_lib_components_BraidProvider_BraidProvider_cjs = require("../../../../side-effects/lib/components/BraidProvider/BraidProvider.cjs");
-const styles_lib_css_atoms_sprinkles_css_cjs = require("../../css/atoms/sprinkles.css.cjs");
-const backgroundContext = React.createContext({
-  lightMode: "body",
-  darkMode: "bodyDark"
-});
-const BackgroundProvider = backgroundContext.Provider;
-const useBackground = () => React.useContext(backgroundContext);
-const useBackgroundLightness = (backgroundOverride) => {
-  const backgroundFromContext = useBackground();
-  const background = backgroundOverride || backgroundFromContext;
-  const { backgroundLightness } = sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme();
-  const lightnessMap = {
-    ...backgroundLightness,
-    customDark: "dark",
-    customLight: "light"
-  };
-  return {
-    lightMode: lightnessMap[background.lightMode],
-    darkMode: lightnessMap[background.darkMode]
-  };
-};
-const useColorContrast = () => {
-  const background = useBackground();
-  const backgroundLightness = useBackgroundLightness();
-  return (map) => styles_lib_css_atoms_sprinkles_css_cjs.mapColorModeValue(
-    backgroundLightness,
-    (lightness, mode) => typeof map === "function" ? map(lightness, background[mode]) : map[lightness]
-  );
-};
-exports.BackgroundProvider = BackgroundProvider;
-exports.useBackground = useBackground;
-exports.useBackgroundLightness = useBackgroundLightness;
-exports.useColorContrast = useColorContrast;

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

@@ -1,37 +0,0 @@
-import { createContext, useContext } from "react";
-import { useBraidTheme } from "../../../../side-effects/lib/components/BraidProvider/BraidProvider.mjs";
-import { mapColorModeValue } from "../../css/atoms/sprinkles.css.mjs";
-const backgroundContext = createContext({
-  lightMode: "body",
-  darkMode: "bodyDark"
-});
-const BackgroundProvider = backgroundContext.Provider;
-const useBackground = () => useContext(backgroundContext);
-const useBackgroundLightness = (backgroundOverride) => {
-  const backgroundFromContext = useBackground();
-  const background = backgroundOverride || backgroundFromContext;
-  const { backgroundLightness } = useBraidTheme();
-  const lightnessMap = {
-    ...backgroundLightness,
-    customDark: "dark",
-    customLight: "light"
-  };
-  return {
-    lightMode: lightnessMap[background.lightMode],
-    darkMode: lightnessMap[background.darkMode]
-  };
-};
-const useColorContrast = () => {
-  const background = useBackground();
-  const backgroundLightness = useBackgroundLightness();
-  return (map) => mapColorModeValue(
-    backgroundLightness,
-    (lightness, mode) => typeof map === "function" ? map(lightness, background[mode]) : map[lightness]
-  );
-};
-export {
-  BackgroundProvider,
-  useBackground,
-  useBackgroundLightness,
-  useColorContrast
-};

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

@@ -1,85 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const clsx = require("clsx");
-const React = require("react");
-const dedent = require("dedent");
-const styles_lib_css_reset_reset_css_cjs = require("../../css/reset/reset.css.cjs");
-const styles_lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
-const styles_lib_css_atoms_sprinkles_css_cjs = require("../../css/atoms/sprinkles.css.cjs");
-const styles_lib_components_Box_ColoredBox_cjs = require("./ColoredBox.cjs");
-const styles_lib_components_Accordion_Accordion_cjs = require("../Accordion/Accordion.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.
-        styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: false })
-      ) : void 0
-    };
-    for (const key in restProps) {
-      if (styles_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(styles_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 = styles_lib_css_atoms_atoms_cjs.atoms({
-      reset: typeof component === "string" ? component : "div",
-      ...atomProps
-    });
-    const combinedClasses = `${atomicClasses}${userClasses ? ` ${userClasses}` : ""}`;
-    return background || boxShadow ? /* @__PURE__ */ jsxRuntime.jsx(
-      styles_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/styles/lib/components/Box/Box.mjs

@@ -1,83 +0,0 @@
-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 "../Accordion/Accordion.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/styles/lib/components/Box/Box.playroom.cjs

@@ -1,30 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const styles_lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
-const styles_lib_css_atoms_sprinkles_css_cjs = require("../../css/atoms/sprinkles.css.cjs");
-const styles_lib_components_Box_Box_cjs = require("./Box.cjs");
-const Box = React.forwardRef((props, ref) => {
-  const sprinklesProps = {};
-  const otherProps = {};
-  for (const key in props) {
-    if (styles_lib_css_atoms_sprinkles_css_cjs.sprinkles.properties.has(key)) {
-      const value = props[key];
-      try {
-        styles_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(styles_lib_components_Box_Box_cjs.Box, { ref, ...sprinklesProps, ...otherProps });
-});
-Box.displayName = "Box";
-exports.Box = Box;

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

@@ -1,117 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const styles_lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
-const sideEffects_lib_components_BraidProvider_BraidProvider_cjs = require("../../../../side-effects/lib/components/BraidProvider/BraidProvider.cjs");
-const styles_lib_components_Box_BackgroundContext_cjs = require("./BackgroundContext.cjs");
-const styles_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 = styles_lib_components_Box_BackgroundContext_cjs.useBackgroundLightness();
-  const currentBackgroundContext = styles_lib_components_Box_BackgroundContext_cjs.useBackground();
-  const { backgroundLightness } = sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme();
-  const lightnessMap = {
-    ...backgroundLightness,
-    customDark: "dark",
-    customLight: "light"
-  };
-  const classList = [];
-  if (boxShadow) {
-    const normalisedBoxShadows = normalisedBoxShadow(boxShadow);
-    const isSemantic = typeof boxShadow === "string";
-    classList.push(
-      styles_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(styles_lib_css_typography_css_cjs.lightModeTone[lightnessMap[lightMode]]);
-    classList.push(styles_lib_css_typography_css_cjs.darkModeTone[lightnessMap[darkMode]]);
-    const lightModeTone = lightMode === "neutral" ? darkMode : lightMode;
-    const darkModeTone = darkMode === "neutral" ? lightMode : darkMode;
-    if (lightModeTone && styles_lib_css_typography_css_cjs.lightModeNeutralOverride[lightModeTone]) {
-      classList.push(styles_lib_css_typography_css_cjs.lightModeNeutralOverride[lightModeTone]);
-    }
-    if (darkModeTone && styles_lib_css_typography_css_cjs.darkModeNeutralOverride[darkModeTone]) {
-      classList.push(styles_lib_css_typography_css_cjs.darkModeNeutralOverride[darkModeTone]);
-    }
-    classList.push(
-      styles_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(styles_lib_components_Box_BackgroundContext_cjs.BackgroundProvider, { value: backgroundContext, children: element }) : element;
-  }
-);
-ColoredBox.displayName = "ColoredBox";
-exports.ColoredBox = ColoredBox;
-exports.useColoredBoxClasses = useColoredBoxClasses;

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

@@ -1,118 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, createElement } from "react";
-import { atoms } from "../../css/atoms/atoms.mjs";
-import { useBraidTheme } from "../../../../side-effects/lib/components/BraidProvider/BraidProvider.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/styles/lib/components/BraidProvider/VanillaThemeContainer.cjs

@@ -1,13 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const styles_lib_css_typography_css_cjs = require("../../css/typography.css.cjs");
-const textTones = [
-  styles_lib_css_typography_css_cjs.lightModeTone.light,
-  styles_lib_css_typography_css_cjs.darkModeTone.dark
-].join(" ");
-const VanillaThemeContainer = ({
-  children,
-  theme,
-  setDefaultTextTones
-}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${theme}${setDefaultTextTones ? ` ${textTones}` : ""}`, children });
-exports.VanillaThemeContainer = VanillaThemeContainer;