braid-design-system 32.16.0 → 32.16.2

package/dist/lib/css/typography.css.cjs

@@ -0,0 +1,172 @@
+"use strict";
+const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const cssUtils = require("@vanilla-extract/css-utils");
+const lib_css_capsize_css_cjs = require("./capsize.css.cjs");
+const lib_themes_vars_css_cjs = require("../themes/vars.css.cjs");
+const lib_css_responsiveStyle_cjs = require("./responsiveStyle.cjs");
+const lib_css_colorModeStyle_cjs = require("./colorModeStyle.cjs");
+const lib_utils_mapToProperty_cjs = require("../utils/mapToProperty.cjs");
+__vanilla_filescope__.setFileScope("src/lib/css/typography.css.ts", "braid-design-system");
+const fontFamily = css.style({
+  fontFamily: lib_themes_vars_css_cjs.vars.fontFamily
+}, "fontFamily");
+const fontWeight = css.styleVariants(lib_themes_vars_css_cjs.vars.textWeight, lib_utils_mapToProperty_cjs.mapToProperty("fontWeight"), "fontWeight");
+const textSizeTrimmed = css.styleVariants(lib_themes_vars_css_cjs.vars.textSize, ({
+  mobile,
+  tablet
+}, variant) => [lib_css_capsize_css_cjs.createTextStyle({
+  fontSize: mobile.fontSize,
+  lineHeight: mobile.lineHeight,
+  ...mobile.capsizeTrims
+}, {
+  "@media": {
+    [lib_css_responsiveStyle_cjs.breakpointQuery.tablet]: {
+      fontSize: tablet.fontSize,
+      lineHeight: tablet.lineHeight,
+      ...tablet.capsizeTrims
+    }
+  }
+}, `textSize_${variant}`)], "textSizeTrimmed");
+const textSizeUntrimmed = css.styleVariants(lib_themes_vars_css_cjs.vars.textSize, ({
+  mobile,
+  tablet
+}) => lib_css_responsiveStyle_cjs.responsiveStyle({
+  mobile: {
+    fontSize: mobile.fontSize,
+    lineHeight: mobile.lineHeight
+  },
+  tablet: {
+    fontSize: tablet.fontSize,
+    lineHeight: tablet.lineHeight
+  }
+}), "textSizeUntrimmed");
+const headingWeight = css.styleVariants(lib_themes_vars_css_cjs.vars.headingWeight, lib_utils_mapToProperty_cjs.mapToProperty("fontWeight"), "headingWeight");
+const heading = css.styleVariants(lib_themes_vars_css_cjs.vars.headingLevel, ({
+  mobile,
+  tablet
+}, variant) => [lib_css_capsize_css_cjs.createTextStyle({
+  fontSize: mobile.fontSize,
+  lineHeight: mobile.lineHeight,
+  ...mobile.capsizeTrims
+}, {
+  "@media": {
+    [lib_css_responsiveStyle_cjs.breakpointQuery.tablet]: {
+      fontSize: tablet.fontSize,
+      lineHeight: tablet.lineHeight,
+      ...tablet.capsizeTrims
+    }
+  }
+}, `heading_${variant}`)], "heading");
+const textToneVars = css.createThemeContract({
+  critical: null,
+  caution: null,
+  info: null,
+  promote: null,
+  positive: null,
+  brandAccent: null,
+  formAccent: null,
+  neutral: null,
+  secondary: null,
+  link: null
+});
+const lightContextToneVars = css.assignVars(textToneVars, {
+  critical: lib_themes_vars_css_cjs.vars.foregroundColor.critical,
+  caution: lib_themes_vars_css_cjs.vars.foregroundColor.caution,
+  info: lib_themes_vars_css_cjs.vars.foregroundColor.info,
+  promote: lib_themes_vars_css_cjs.vars.foregroundColor.promote,
+  positive: lib_themes_vars_css_cjs.vars.foregroundColor.positive,
+  brandAccent: lib_themes_vars_css_cjs.vars.foregroundColor.brandAccent,
+  formAccent: lib_themes_vars_css_cjs.vars.foregroundColor.formAccent,
+  neutral: lib_themes_vars_css_cjs.vars.foregroundColor.neutral,
+  secondary: lib_themes_vars_css_cjs.vars.foregroundColor.secondary,
+  link: lib_themes_vars_css_cjs.vars.foregroundColor.link
+});
+const darkContextToneVars = css.assignVars(textToneVars, {
+  critical: lib_themes_vars_css_cjs.vars.foregroundColor.criticalLight,
+  caution: lib_themes_vars_css_cjs.vars.foregroundColor.cautionLight,
+  info: lib_themes_vars_css_cjs.vars.foregroundColor.infoLight,
+  promote: lib_themes_vars_css_cjs.vars.foregroundColor.promoteLight,
+  positive: lib_themes_vars_css_cjs.vars.foregroundColor.positiveLight,
+  brandAccent: lib_themes_vars_css_cjs.vars.foregroundColor.brandAccentLight,
+  formAccent: lib_themes_vars_css_cjs.vars.foregroundColor.formAccentLight,
+  neutral: lib_themes_vars_css_cjs.vars.foregroundColor.neutralInverted,
+  secondary: lib_themes_vars_css_cjs.vars.foregroundColor.secondaryInverted,
+  link: lib_themes_vars_css_cjs.vars.foregroundColor.linkLight
+});
+const lightModeTone = css.styleVariants({
+  light: lib_css_colorModeStyle_cjs.colorModeStyle({
+    lightMode: {
+      vars: lightContextToneVars
+    }
+  }),
+  dark: lib_css_colorModeStyle_cjs.colorModeStyle({
+    lightMode: {
+      vars: darkContextToneVars
+    }
+  })
+}, "lightModeTone");
+const darkModeTone = css.styleVariants({
+  light: lib_css_colorModeStyle_cjs.colorModeStyle({
+    darkMode: {
+      vars: lightContextToneVars
+    }
+  }),
+  dark: lib_css_colorModeStyle_cjs.colorModeStyle({
+    darkMode: {
+      vars: darkContextToneVars
+    }
+  })
+}, "darkModeTone");
+const neutralOverrideForBackground = {
+  criticalLight: "critical",
+  criticalSoft: "critical",
+  criticalSoftActive: "critical",
+  criticalSoftHover: "critical",
+  caution: "caution",
+  cautionLight: "caution",
+  positiveLight: "positive",
+  infoLight: "info",
+  promoteLight: "promote"
+};
+const lightModeNeutralOverride = css.styleVariants(neutralOverrideForBackground, (textTone) => lib_css_colorModeStyle_cjs.colorModeStyle({
+  lightMode: {
+    vars: {
+      [textToneVars.neutral]: textToneVars[textTone]
+    }
+  }
+}), "lightModeNeutralOverride");
+const darkModeNeutralOverride = css.styleVariants(neutralOverrideForBackground, (textTone) => lib_css_colorModeStyle_cjs.colorModeStyle({
+  darkMode: {
+    vars: {
+      [textToneVars.neutral]: textToneVars[textTone]
+    }
+  }
+}), "darkModeNeutralOverride");
+const tone = css.styleVariants(textToneVars, (toneVar) => ({
+  color: toneVar
+}), "tone");
+const makeTouchableSpacing = (touchableHeight, textHeight) => {
+  const space = cssUtils.calc(touchableHeight).subtract(textHeight).divide(2).toString();
+  return {
+    paddingTop: space,
+    paddingBottom: space
+  };
+};
+const touchableText = css.styleVariants(lib_themes_vars_css_cjs.vars.textSize, (textDefinition) => lib_css_responsiveStyle_cjs.responsiveStyle({
+  mobile: makeTouchableSpacing(lib_themes_vars_css_cjs.vars.touchableSize, textDefinition.mobile.lineHeight),
+  tablet: makeTouchableSpacing(lib_themes_vars_css_cjs.vars.touchableSize, textDefinition.tablet.lineHeight)
+}), "touchableText");
+__vanilla_filescope__.endFileScope();
+exports.darkModeNeutralOverride = darkModeNeutralOverride;
+exports.darkModeTone = darkModeTone;
+exports.fontFamily = fontFamily;
+exports.fontWeight = fontWeight;
+exports.heading = heading;
+exports.headingWeight = headingWeight;
+exports.lightModeNeutralOverride = lightModeNeutralOverride;
+exports.lightModeTone = lightModeTone;
+exports.textSizeTrimmed = textSizeTrimmed;
+exports.textSizeUntrimmed = textSizeUntrimmed;
+exports.tone = tone;
+exports.touchableText = touchableText;

package/dist/lib/css/typography.css.mjs

@@ -0,0 +1,173 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style, styleVariants, createThemeContract, assignVars } from "@vanilla-extract/css";
+import { calc } from "@vanilla-extract/css-utils";
+import { createTextStyle } from "./capsize.css.mjs";
+import { vars } from "../themes/vars.css.mjs";
+import { breakpointQuery, responsiveStyle } from "./responsiveStyle.mjs";
+import { colorModeStyle } from "./colorModeStyle.mjs";
+import { mapToProperty } from "../utils/mapToProperty.mjs";
+setFileScope("src/lib/css/typography.css.ts", "braid-design-system");
+const fontFamily = style({
+  fontFamily: vars.fontFamily
+}, "fontFamily");
+const fontWeight = styleVariants(vars.textWeight, mapToProperty("fontWeight"), "fontWeight");
+const textSizeTrimmed = styleVariants(vars.textSize, ({
+  mobile,
+  tablet
+}, variant) => [createTextStyle({
+  fontSize: mobile.fontSize,
+  lineHeight: mobile.lineHeight,
+  ...mobile.capsizeTrims
+}, {
+  "@media": {
+    [breakpointQuery.tablet]: {
+      fontSize: tablet.fontSize,
+      lineHeight: tablet.lineHeight,
+      ...tablet.capsizeTrims
+    }
+  }
+}, `textSize_${variant}`)], "textSizeTrimmed");
+const textSizeUntrimmed = styleVariants(vars.textSize, ({
+  mobile,
+  tablet
+}) => responsiveStyle({
+  mobile: {
+    fontSize: mobile.fontSize,
+    lineHeight: mobile.lineHeight
+  },
+  tablet: {
+    fontSize: tablet.fontSize,
+    lineHeight: tablet.lineHeight
+  }
+}), "textSizeUntrimmed");
+const headingWeight = styleVariants(vars.headingWeight, mapToProperty("fontWeight"), "headingWeight");
+const heading = styleVariants(vars.headingLevel, ({
+  mobile,
+  tablet
+}, variant) => [createTextStyle({
+  fontSize: mobile.fontSize,
+  lineHeight: mobile.lineHeight,
+  ...mobile.capsizeTrims
+}, {
+  "@media": {
+    [breakpointQuery.tablet]: {
+      fontSize: tablet.fontSize,
+      lineHeight: tablet.lineHeight,
+      ...tablet.capsizeTrims
+    }
+  }
+}, `heading_${variant}`)], "heading");
+const textToneVars = createThemeContract({
+  critical: null,
+  caution: null,
+  info: null,
+  promote: null,
+  positive: null,
+  brandAccent: null,
+  formAccent: null,
+  neutral: null,
+  secondary: null,
+  link: null
+});
+const lightContextToneVars = assignVars(textToneVars, {
+  critical: vars.foregroundColor.critical,
+  caution: vars.foregroundColor.caution,
+  info: vars.foregroundColor.info,
+  promote: vars.foregroundColor.promote,
+  positive: vars.foregroundColor.positive,
+  brandAccent: vars.foregroundColor.brandAccent,
+  formAccent: vars.foregroundColor.formAccent,
+  neutral: vars.foregroundColor.neutral,
+  secondary: vars.foregroundColor.secondary,
+  link: vars.foregroundColor.link
+});
+const darkContextToneVars = assignVars(textToneVars, {
+  critical: vars.foregroundColor.criticalLight,
+  caution: vars.foregroundColor.cautionLight,
+  info: vars.foregroundColor.infoLight,
+  promote: vars.foregroundColor.promoteLight,
+  positive: vars.foregroundColor.positiveLight,
+  brandAccent: vars.foregroundColor.brandAccentLight,
+  formAccent: vars.foregroundColor.formAccentLight,
+  neutral: vars.foregroundColor.neutralInverted,
+  secondary: vars.foregroundColor.secondaryInverted,
+  link: vars.foregroundColor.linkLight
+});
+const lightModeTone = styleVariants({
+  light: colorModeStyle({
+    lightMode: {
+      vars: lightContextToneVars
+    }
+  }),
+  dark: colorModeStyle({
+    lightMode: {
+      vars: darkContextToneVars
+    }
+  })
+}, "lightModeTone");
+const darkModeTone = styleVariants({
+  light: colorModeStyle({
+    darkMode: {
+      vars: lightContextToneVars
+    }
+  }),
+  dark: colorModeStyle({
+    darkMode: {
+      vars: darkContextToneVars
+    }
+  })
+}, "darkModeTone");
+const neutralOverrideForBackground = {
+  criticalLight: "critical",
+  criticalSoft: "critical",
+  criticalSoftActive: "critical",
+  criticalSoftHover: "critical",
+  caution: "caution",
+  cautionLight: "caution",
+  positiveLight: "positive",
+  infoLight: "info",
+  promoteLight: "promote"
+};
+const lightModeNeutralOverride = styleVariants(neutralOverrideForBackground, (textTone) => colorModeStyle({
+  lightMode: {
+    vars: {
+      [textToneVars.neutral]: textToneVars[textTone]
+    }
+  }
+}), "lightModeNeutralOverride");
+const darkModeNeutralOverride = styleVariants(neutralOverrideForBackground, (textTone) => colorModeStyle({
+  darkMode: {
+    vars: {
+      [textToneVars.neutral]: textToneVars[textTone]
+    }
+  }
+}), "darkModeNeutralOverride");
+const tone = styleVariants(textToneVars, (toneVar) => ({
+  color: toneVar
+}), "tone");
+const makeTouchableSpacing = (touchableHeight, textHeight) => {
+  const space = calc(touchableHeight).subtract(textHeight).divide(2).toString();
+  return {
+    paddingTop: space,
+    paddingBottom: space
+  };
+};
+const touchableText = styleVariants(vars.textSize, (textDefinition) => responsiveStyle({
+  mobile: makeTouchableSpacing(vars.touchableSize, textDefinition.mobile.lineHeight),
+  tablet: makeTouchableSpacing(vars.touchableSize, textDefinition.tablet.lineHeight)
+}), "touchableText");
+endFileScope();
+export {
+  darkModeNeutralOverride,
+  darkModeTone,
+  fontFamily,
+  fontWeight,
+  heading,
+  headingWeight,
+  lightModeNeutralOverride,
+  lightModeTone,
+  textSizeTrimmed,
+  textSizeUntrimmed,
+  tone,
+  touchableText
+};

package/dist/lib/hooks/useIcon/icon.css.cjs

@@ -0,0 +1,66 @@
+"use strict";
+const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const lib_css_responsiveStyle_cjs = require("../../css/responsiveStyle.cjs");
+const lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
+__vanilla_filescope__.setFileScope("src/lib/hooks/useIcon/icon.css.ts", "braid-design-system");
+const iconScaleIncrease = 0.2;
+const size = css.style({
+  width: `${1 + iconScaleIncrease}em`,
+  height: `${1 + iconScaleIncrease}em`
+}, "size");
+const cropToTextSize = css.style({
+  margin: `${iconScaleIncrease / 2 * -1}em`
+}, "cropToTextSize");
+const inlineCrop = css.style({
+  marginTop: `-${iconScaleIncrease}em`,
+  marginBottom: `-${iconScaleIncrease}em`
+}, "inlineCrop");
+const inline = css.style({
+  verticalAlign: "middle"
+}, "inline");
+const uppercaseNudge = -0.105;
+const lowercaseNudge = uppercaseNudge + 0.04;
+const verticalCorrection = 0.06;
+const alignY = {
+  uppercase: css.styleVariants({
+    none: {
+      top: `${uppercaseNudge}em`
+    },
+    up: {
+      top: `${uppercaseNudge - verticalCorrection}em`
+    },
+    down: {
+      top: `${uppercaseNudge + verticalCorrection}em`
+    }
+  }, "alignY_uppercase"),
+  lowercase: css.styleVariants({
+    none: {
+      top: `${lowercaseNudge}em`
+    },
+    up: {
+      top: `${lowercaseNudge - verticalCorrection}em`
+    },
+    down: {
+      top: `${lowercaseNudge + verticalCorrection}em`
+    }
+  }, "alignY_lowercase")
+};
+const blockWidths = css.styleVariants(lib_themes_vars_css_cjs.vars.textSize, ({
+  mobile,
+  tablet
+}) => lib_css_responsiveStyle_cjs.responsiveStyle({
+  mobile: {
+    width: mobile.lineHeight
+  },
+  tablet: {
+    width: tablet.lineHeight
+  }
+}), "blockWidths");
+__vanilla_filescope__.endFileScope();
+exports.alignY = alignY;
+exports.blockWidths = blockWidths;
+exports.cropToTextSize = cropToTextSize;
+exports.inline = inline;
+exports.inlineCrop = inlineCrop;
+exports.size = size;

package/dist/lib/hooks/useIcon/index.cjs

@@ -0,0 +1,73 @@
+"use strict";
+const React = require("react");
+const assert = require("assert");
+const clsx = require("clsx");
+const lib_components_Text_TextContext_cjs = require("../../components/Text/TextContext.cjs");
+const lib_components_Heading_HeadingContext_cjs = require("../../components/Heading/HeadingContext.cjs");
+const lib_css_lineHeightContainer_css_cjs = require("../../css/lineHeightContainer.css.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../../components/private/buildDataAttributes.cjs");
+const lib_components_icons_IconRenderer_cjs = require("../../components/icons/IconRenderer.cjs");
+const lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
+const lib_css_typography_css_cjs = require("../../css/typography.css.cjs");
+const lib_hooks_useIcon_icon_css_cjs = require("./icon.css.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
+const clsx__default = /* @__PURE__ */ _interopDefaultCompat(clsx);
+const iconSize = ({
+  size = "standard",
+  crop = false
+} = {}) => clsx__default.default(lib_hooks_useIcon_icon_css_cjs.size, lib_css_typography_css_cjs.textSizeUntrimmed[size], {
+  [lib_hooks_useIcon_icon_css_cjs.cropToTextSize]: crop
+});
+const iconContainerSize = (size = "standard") => clsx__default.default(lib_hooks_useIcon_icon_css_cjs.blockWidths[size], lib_css_lineHeightContainer_css_cjs.lineHeightContainer[size]);
+const defaultVerticalCorrection = {
+  uppercase: "none",
+  lowercase: "none"
+};
+const useIcon = ({ size, tone, alignY, data, title, titleId, ...restProps }, { verticalCorrection = defaultVerticalCorrection } = {}) => {
+  const textContext = React.useContext(lib_components_Text_TextContext_cjs.TextContext);
+  const headingContext = React.useContext(lib_components_Heading_HeadingContext_cjs.HeadingContext);
+  const resolvedTone = lib_css_typography_css_cjs.tone[tone || (textContext == null ? void 0 : textContext.tone) || "neutral"];
+  const toneClass = tone || !headingContext && !(textContext == null ? void 0 : textContext.tone) ? resolvedTone : void 0;
+  const isInline = Boolean(textContext || headingContext);
+  const a11yProps = title ? { title, titleId, role: "img" } : { "aria-hidden": true };
+  assert__default.default(
+    !(size && isInline),
+    `Specifying a custom \`size\` for an \`Icon\` inside the context of a \`<${textContext ? "Text" : "Heading"}>\` component is invalid. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/${textContext ? "Text" : "Heading"}`
+  );
+  assert__default.default(
+    !(alignY && !isInline),
+    `Specifying \`alignY\` for an \`Icon\` outside of a text component is invalid.`
+  );
+  if (size === "fill") {
+    return {
+      width: "full",
+      height: "full",
+      display: "block",
+      className: toneClass,
+      ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+      ...a11yProps
+    };
+  }
+  return {
+    className: [
+      toneClass,
+      isInline ? [
+        lib_components_icons_IconRenderer_cjs.iconInlineSize({
+          alignY: alignY || "uppercase",
+          verticalCorrection: verticalCorrection[alignY || "uppercase"]
+        })
+      ] : [
+        lib_css_atoms_atoms_cjs.atoms({
+          display: "block"
+        }),
+        iconContainerSize(size)
+      ]
+    ],
+    ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+    ...a11yProps
+  };
+};
+exports.iconContainerSize = iconContainerSize;
+exports.iconSize = iconSize;
+exports.useIcon = useIcon;

package/dist/lib/hooks/useIcon/index.mjs

@@ -0,0 +1,71 @@
+import { useContext } from "react";
+import assert from "assert";
+import clsx from "clsx";
+import { TextContext } from "../../components/Text/TextContext.mjs";
+import { HeadingContext } from "../../components/Heading/HeadingContext.mjs";
+import { lineHeightContainer } from "../../css/lineHeightContainer.css.mjs";
+import { buildDataAttributes } from "../../components/private/buildDataAttributes.mjs";
+import { iconInlineSize } from "../../components/icons/IconRenderer.mjs";
+import { atoms } from "../../css/atoms/atoms.mjs";
+import { tone, textSizeUntrimmed } from "../../css/typography.css.mjs";
+import { size, cropToTextSize, blockWidths } from "./icon.css.mjs";
+const iconSize = ({
+  size: size$1 = "standard",
+  crop = false
+} = {}) => clsx(size, textSizeUntrimmed[size$1], {
+  [cropToTextSize]: crop
+});
+const iconContainerSize = (size2 = "standard") => clsx(blockWidths[size2], lineHeightContainer[size2]);
+const defaultVerticalCorrection = {
+  uppercase: "none",
+  lowercase: "none"
+};
+const useIcon = ({ size: size2, tone: tone$1, alignY, data, title, titleId, ...restProps }, { verticalCorrection = defaultVerticalCorrection } = {}) => {
+  const textContext = useContext(TextContext);
+  const headingContext = useContext(HeadingContext);
+  const resolvedTone = tone[tone$1 || (textContext == null ? void 0 : textContext.tone) || "neutral"];
+  const toneClass = tone$1 || !headingContext && !(textContext == null ? void 0 : textContext.tone) ? resolvedTone : void 0;
+  const isInline = Boolean(textContext || headingContext);
+  const a11yProps = title ? { title, titleId, role: "img" } : { "aria-hidden": true };
+  assert(
+    !(size2 && isInline),
+    `Specifying a custom \`size\` for an \`Icon\` inside the context of a \`<${textContext ? "Text" : "Heading"}>\` component is invalid. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/${textContext ? "Text" : "Heading"}`
+  );
+  assert(
+    !(alignY && !isInline),
+    `Specifying \`alignY\` for an \`Icon\` outside of a text component is invalid.`
+  );
+  if (size2 === "fill") {
+    return {
+      width: "full",
+      height: "full",
+      display: "block",
+      className: toneClass,
+      ...buildDataAttributes({ data, validateRestProps: restProps }),
+      ...a11yProps
+    };
+  }
+  return {
+    className: [
+      toneClass,
+      isInline ? [
+        iconInlineSize({
+          alignY: alignY || "uppercase",
+          verticalCorrection: verticalCorrection[alignY || "uppercase"]
+        })
+      ] : [
+        atoms({
+          display: "block"
+        }),
+        iconContainerSize(size2)
+      ]
+    ],
+    ...buildDataAttributes({ data, validateRestProps: restProps }),
+    ...a11yProps
+  };
+};
+export {
+  iconContainerSize,
+  iconSize,
+  useIcon
+};

package/dist/lib/hooks/useIsomorphicLayoutEffect.cjs

@@ -0,0 +1,4 @@
+"use strict";
+const React = require("react");
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

package/dist/lib/hooks/useIsomorphicLayoutEffect.mjs

@@ -0,0 +1,5 @@
+import { useLayoutEffect, useEffect } from "react";
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+export {
+  useIsomorphicLayoutEffect
+};

package/dist/lib/playroom/FrameComponent.cjs

@@ -0,0 +1,68 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lib_playroom_playroomState_cjs = require("./playroomState.cjs");
+const lib_css_atoms_sprinkles_css_cjs = require("../css/atoms/sprinkles.css.cjs");
+const lib_components_BraidProvider_BraidProvider_cjs = require("../components/BraidProvider/BraidProvider.cjs");
+const lib_components_useToast_ToastContext_cjs = require("../components/useToast/ToastContext.cjs");
+const lib_components_useResponsiveValue_useResponsiveValue_cjs = require("../components/useResponsiveValue/useResponsiveValue.cjs");
+const PlayroomLink = lib_components_BraidProvider_BraidProvider_cjs.makeLinkComponent(
+  ({ href, onClick, ...restProps }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      ref,
+      href: href ?? "#",
+      onClick: (e) => {
+        if (!href) {
+          e.preventDefault();
+        }
+        if (onClick) {
+          onClick(e);
+        }
+      },
+      ...restProps
+    }
+  )
+);
+const ResponsiveReady = ({ children }) => {
+  const responsiveReady = lib_components_useResponsiveValue_useResponsiveValue_cjs.useResponsiveValue()({ mobile: true }) ?? false;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: responsiveReady ? children : null });
+};
+const FrameComponent = ({ theme, children }) => {
+  React.useEffect(() => {
+    let code = "";
+    const darkTrigger = "braiddark";
+    const lightTrigger = "braidlight";
+    const longestTrigger = Math.max(lightTrigger.length, darkTrigger.length);
+    const colorModeToggle = (ev) => {
+      code += ev.key;
+      if (code.substr(code.length - darkTrigger.length) === darkTrigger) {
+        document.documentElement.classList.add(lib_css_atoms_sprinkles_css_cjs.darkMode);
+        code = "";
+      }
+      if (code.substr(code.length - lightTrigger.length) === lightTrigger) {
+        document.documentElement.classList.remove(lib_css_atoms_sprinkles_css_cjs.darkMode);
+        code = "";
+      }
+      if (code.length > longestTrigger) {
+        code = code.substr(code.length - longestTrigger);
+      }
+    };
+    window.addEventListener("keydown", colorModeToggle);
+    return () => {
+      window.removeEventListener("keydown", colorModeToggle);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        dangerouslySetInnerHTML: {
+          __html: theme.webFonts.map((font) => font.linkTag).join("")
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(lib_playroom_playroomState_cjs.PlayroomStateProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_BraidProvider_BraidProvider_cjs.BraidProvider, { theme, linkComponent: PlayroomLink, children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_useToast_ToastContext_cjs.ToastProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ResponsiveReady, { children }) }) }) })
+  ] });
+};
+exports.FrameComponent = FrameComponent;